:root{--felt:#1f6b45;--felt-dark:#154d31;--bg:#0f2f20;--panel:#fff;--panel-text:#1c2420;--muted:#5d6b63;--accent:#e0a526;--accent-dark:#b8841a;--danger:#c62828;--ok:#2e7d32;--card-w:clamp(46px, 7.2vw, 80px);--trick-w:clamp(46px, 6.4vw, 76px);--small-w:clamp(28px, 3.4vw, 40px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);color:#f4f7f5;-webkit-text-size-adjust:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--panel:#1e2a24;--panel-text:#e8efe9;--muted:#9aaba1}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{background:var(--bg);height:100%;min-height:100%;margin:0}body{touch-action:manipulation}button{font:inherit;cursor:pointer;color:#1c2420;background:#f4f7f5;border:1px solid #c9d3cd;border-radius:10px;min-height:44px;padding:.55em 1.1em}@media (hover:hover){button:hover:not(:disabled){filter:brightness(.95)}}button:active:not(:disabled){filter:brightness(.9)}button:disabled{opacity:.55;cursor:default}button.primary{background:var(--accent);border-color:var(--accent-dark);color:#241a02;font-weight:600}button.ghost{color:inherit;opacity:.9;background:0 0;border-color:currentColor}button.small{min-height:36px;padding:.3em .8em}input,select{font:inherit;color:#1c2420;background:#fff;border:1px solid #b9c6be;border-radius:10px;min-width:0;min-height:44px;padding:.5em .6em;font-size:max(16px,1em)}.app{min-height:100%}.center-msg{place-items:center;min-height:100vh;font-size:1.2rem;display:grid}.banner{background:var(--danger);color:#fff;text-align:center;padding:calc(.4em + var(--safe-t)) .4em .4em;z-index:50;position:fixed;top:0;left:0;right:0}.toast{bottom:calc(1.5rem + var(--safe-b));color:#fff;z-index:60;background:#2b2b2b;border-radius:10px;max-width:calc(100vw - 32px);padding:.7em 1.2em;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0006}.hint{color:var(--muted);font-size:.9em}.felt .hint,.topbar .hint{color:#b7d3c2}.felt .action-panel .hint{color:var(--muted)}.tag{vertical-align:middle;white-space:nowrap;background:#0000001f;border-radius:999px;padding:.1em .5em;font-size:.75em;display:inline-block}.tag.warn{background:var(--danger);color:#fff}.tag.decl{background:var(--accent);color:#241a02}.tag .short{display:none}.button-row{flex-wrap:wrap;align-items:center;gap:.6em;margin-top:.6em;display:flex}.lobby{max-width:1100px;padding:calc(24px + var(--safe-t)) calc(16px + var(--safe-r)) calc(48px + var(--safe-b)) calc(16px + var(--safe-l));margin:0 auto}.lobby-header h1{margin:.2em 0 0;font-size:clamp(2rem,6vw,3rem)}.logo{color:var(--accent);letter-spacing:.05em}.subtitle{color:#b7d3c2;margin-top:.3em}.lobby-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;display:grid}.panel{background:var(--panel);color:var(--panel-text);border-radius:14px;margin-bottom:16px;padding:18px 20px;box-shadow:0 6px 24px #00000040}.panel h2{margin:0 0 .3em;font-size:1.25rem}.panel h3{margin:1.2em 0 .4em;font-size:1rem}.panel .primary{width:100%}.field{flex-direction:column;gap:.3em;margin:.7em 0;display:flex}.field.inline{flex-flow:wrap;align-items:center;gap:.6em}.field span{color:var(--muted);font-size:.9em}.join-row{gap:.5em;display:flex}.join-row input{flex:1}.code{letter-spacing:.1em;font-family:ui-monospace,monospace}.table-list,.seat-list{margin:0;padding:0;list-style:none}.table-list li,.seat-list li{border-bottom:1px solid #7f7f7f40;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5em .8em;padding:.6em 0;display:flex}.seat-list .seat-no{color:var(--muted);flex-shrink:0;width:4.5em}.seat-list .seat-name{flex:1;min-width:10em}.seat-list .tag{margin-left:.4em}.game{overscroll-behavior:none;-webkit-user-select:none;user-select:none;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{padding:calc(6px + var(--safe-t)) calc(12px + var(--safe-r)) 6px calc(12px + var(--safe-l));background:var(--felt-dark);z-index:20;border-bottom:1px solid #0000004d;justify-content:space-between;align-items:center;gap:.8em;display:flex;position:relative}.topbar-title{align-items:center;gap:.8em;min-width:0;display:flex}.table-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.topbar-title .hint{white-space:nowrap}.topbar-actions{flex-shrink:0;gap:.4em;display:flex}.topbar-actions button{min-height:36px;padding:.2em .9em;font-size:.95em}.topbar-actions .icon{padding:.1em .7em;font-size:1.15em}.menu-backdrop{z-index:30;position:fixed;inset:0}.menu{top:calc(100% + 4px);right:calc(12px + var(--safe-r));z-index:31;background:var(--panel);border-radius:12px;flex-direction:column;min-width:230px;display:flex;position:absolute;overflow:hidden;box-shadow:0 10px 30px #0006}.menu button{color:var(--panel-text);text-align:left;background:0 0;border:0;border-radius:0;min-height:48px;padding:.8em 1.1em}.menu button+button{border-top:1px solid #7f7f7f40}.felt{background:radial-gradient(ellipse at center, #2a8558 0%, var(--felt) 55%, var(--felt-dark) 100%);min-height:0;padding-left:var(--safe-l);padding-right:var(--safe-r);flex:1;grid-template:"left center right"minmax(0,1fr)"me me me"/minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);display:grid;position:relative;overflow:hidden auto}.opponent{flex-direction:column;gap:8px;min-width:0;padding:12px;display:flex}.opponent.left{grid-area:left;align-items:flex-start}.opponent.right{grid-area:right;align-items:flex-end}.opp-cards{flex-wrap:wrap;max-width:100%;display:flex}.opponent.right .opp-cards{justify-content:flex-end}.opp-cards .card+.card{margin-left:calc(var(--small-w) * -.6)}.opp-cards.open .card+.card{margin-left:calc(var(--small-w) * -.25)}.seat-badge{background:#00000038;border:2px solid #0000;border-radius:10px;flex-direction:column;gap:3px;min-width:0;max-width:100%;padding:6px 10px;display:flex;position:relative}.seat-line{align-items:center;gap:.35em;min-width:0;display:flex}.seat-line.tags{flex-wrap:wrap}.seat-badge .seat-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;overflow:hidden}.seat-score{color:var(--accent);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:.6em;font-weight:700}.seat-badge.active{border-color:var(--accent);box-shadow:0 0 16px #e0a52680}.seat-badge .tag{background:#ffffff26}.seat-badge .tag.decl{background:var(--accent)}.seat-badge .tricks{color:#b7d3c2;white-space:nowrap;font-size:.8em}.bubble{color:#1c2420;z-index:3;background:#fff;border-radius:12px;padding:.1em .6em;font-weight:700;position:absolute;top:-14px;right:-6px;box-shadow:0 2px 8px #00000059}.center{flex-direction:column;grid-area:center;justify-content:safe center;align-items:center;gap:12px;min-width:0;min-height:0;display:flex;overflow:hidden}.contract-info{white-space:nowrap;text-overflow:ellipsis;background:#00000040;border-radius:999px;min-width:0;padding:3px 12px;overflow:hidden}.skat-slot{gap:6px;display:flex}.skat-slot .card,.trick .card{--card-w:var(--trick-w)}.trick{width:calc(var(--trick-w) * 2.9);height:calc(var(--trick-w) * 1.45 * 1.7);flex-shrink:0;position:relative}.trick.done .trick-card{opacity:.75}.trick-card{animation:.18s ease-out drop;position:absolute}.trick-card.slot-bottom{bottom:0;left:50%;transform:translate(-50%)}.trick-card.slot-left{top:8%;left:0;transform:rotate(-8deg)}.trick-card.slot-right{top:8%;right:0;transform:rotate(8deg)}.trick-label{text-align:center;color:#d7ecdf;white-space:nowrap;font-size:.85em;position:absolute;top:-1.6em;left:-2em;right:-2em}@keyframes drop{0%{opacity:0;margin-top:-12px}}.me-area{padding:8px 12px calc(12px + var(--safe-b));flex-direction:column;grid-area:me;align-items:center;gap:8px;min-width:0;display:flex}.me-top{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.me-top .seat-badge{flex-direction:row;align-items:center;gap:.6em}.me-top .seat-score{margin-left:0}.hand{width:100%;max-width:calc(var(--card-w) * (.72 * (var(--n) - 1) + 1));padding-top:18px;display:flex}.hand-slot{flex:1 1 0;min-width:0}.hand-slot:last-child{flex:0 0 var(--card-w)}.action-panel{background:var(--panel);color:var(--panel-text);text-align:center;border-radius:14px;width:min(640px,100%);padding:10px 16px;box-shadow:0 4px 18px #0000004d}.action-panel .button-row{justify-content:center}.action-panel .button-row>button{flex:1 1 0;max-width:240px}.action-panel.waiting,.action-panel.your-turn{color:#e6f2ea;width:auto;box-shadow:none;background:#00000040;border-radius:999px;padding:8px 16px}.action-panel.your-turn{background:var(--accent);color:#241a02;font-weight:600}.touch-hint{font-weight:500}.action-panel.result.won{border-top:4px solid var(--ok)}.action-panel.result.lost{border-top:4px solid var(--danger)}.headline{font-size:1.1em;font-weight:700}.detail{margin-top:.2em}.skat-reveal{flex-wrap:wrap;justify-content:center;gap:1.2em;margin:.5em 0;display:flex}.skat-reveal>span{align-items:center;gap:3px;display:inline-flex}.final ol{text-align:left;margin:.2em 0;display:inline-block}.final h3{margin:.6em 0 .2em}.jump{justify-content:center;align-items:center;gap:.5em;margin-top:.5em;display:flex}.jump select{min-height:36px;padding:.2em .5em}.type-row{grid-template-columns:repeat(6,minmax(0,1fr));gap:.4em;margin-top:.5em;display:grid}.type-btn{flex-direction:column;justify-content:center;align-items:center;min-width:0;padding:.3em .2em;display:flex}.type-btn.active{background:var(--accent);border-color:var(--accent-dark);color:#241a02;box-shadow:inset 0 0 0 2px var(--accent-dark)}.type-sym{font-size:1.4em;line-height:1.1}.type-name{text-overflow:ellipsis;max-width:100%;font-size:.85em;overflow:hidden}.options-row{flex-wrap:wrap;justify-content:center;gap:.5em;margin-top:.6em;display:flex}.chip{cursor:pointer;border:1px solid #c9d3cd;border-radius:999px;align-items:center;gap:.4em;min-height:40px;padding:0 .9em;display:inline-flex}.chip:has(input:checked){background:var(--accent);border-color:var(--accent-dark);color:#241a02}.chip input{width:18px;height:18px;min-height:0;margin:0}.value-line{margin-top:.5em}.value-line.warn{color:var(--danger)}.card{width:var(--card-w);height:calc(var(--card-w) * 1.45);border-radius:calc(var(--card-w) * .09);color:#111;-webkit-user-select:none;user-select:none;background:#fdfdfb;border:1px solid #b9b9b0;flex-shrink:0;min-height:0;padding:0;font-weight:700;transition:transform .12s,box-shadow .12s;display:block;position:relative;box-shadow:0 2px 6px #0000004d}.card.small{--card-w:var(--small-w);border-radius:4px}.card .corner{font-size:calc(var(--card-w) * .22);text-align:center;line-height:1;position:absolute}.card .corner.tl{top:5%;left:6%}.card .corner.br{bottom:5%;right:6%;transform:rotate(180deg)}.card .center{font-size:calc(var(--card-w) * .5);place-items:center;display:grid;position:absolute;inset:0}.card .center.face{font-size:calc(var(--card-w) * .42);font-family:Georgia,Times New Roman,serif}.card.small .corner{font-size:calc(var(--small-w) * .3)}.card.small .corner.br{display:none}.card.small .center{font-size:calc(var(--small-w) * .45);padding-top:30%}.card.back{background:repeating-linear-gradient(45deg,#8b1e2b 0 4px,#a8293a 4px 8px),#8b1e2b;border:2px solid #fff}.card.playable{cursor:pointer}@media (hover:hover){.card.playable:hover{transform:translateY(-10px);box-shadow:0 8px 16px #00000073}}.card.selected{box-shadow:0 0 0 3px var(--accent), 0 8px 16px #00000073;transform:translateY(-16px)}.card.dimmed{filter:brightness(.7)}.suit-C,.suit-S,.type-C .type-sym,.type-S .type-sym{color:#111}.suit-H,.suit-D,.type-H .type-sym,.type-D .type-sym{color:#d01f1f}.type-btn.active .type-sym{color:inherit}.modal-backdrop{z-index:40;background:#0000008c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--panel);color:var(--panel-text);border-radius:14px;flex-direction:column;width:min(760px,100%);max-height:90dvh;padding:14px 18px;display:flex}.modal-head{justify-content:space-between;align-items:center;display:flex}.modal-head h2{margin:0}.sheet-scroll{-webkit-overflow-scrolling:touch;overflow:auto}.sheet{border-collapse:collapse;width:100%;font-size:.92em}.sheet th,.sheet td{text-align:left;vertical-align:top;border-bottom:1px solid #7f7f7f40;padding:.4em .5em}.sheet thead th{background:var(--panel);position:sticky;top:0}.sheet .num{text-align:right;white-space:nowrap}.sheet .total{color:var(--muted);font-size:.85em}.pos{color:var(--ok);font-weight:600}.neg{color:var(--danger);font-weight:600}@media (width<=600px){:root{--card-w:min(19vw, 76px);--trick-w:min(17vw, 70px, 9dvh);--small-w:24px}.topbar-title .table-name{display:none}.topbar-title .hint{color:#e6f2ea;font-size:1em}.felt{grid-template:"left right""center center"minmax(0,1fr)"me me"/minmax(0,1fr) minmax(0,1fr)}.opponent{gap:6px;padding:10px 8px 4px}.opponent.left{padding-left:12px}.opponent.right{padding-right:12px}.opponent .seat-badge{width:100%}.opp-cards .card+.card{margin-left:calc(var(--small-w) * -.7)}.opp-cards.open{--small-w:27px}.opp-cards.open .card+.card{margin-left:calc(var(--small-w) * -.3)}.tag .long{display:none}.tag .short{display:inline}.me-area{gap:6px;padding-left:8px;padding-right:8px}.me-top .seat-badge{padding:4px 10px}.action-panel{padding:10px 12px}.action-panel .prompt{font-size:.95em}.type-sym{font-size:1.25em}.type-name{font-size:.72em}.modal-backdrop{place-items:end stretch;padding:0}.modal{width:100%;max-height:92dvh;padding:12px 12px calc(12px + var(--safe-b));border-radius:16px 16px 0 0}.sheet{font-size:.82em}.sheet th,.sheet td{padding:.4em .3em}.lobby-header h1{margin-top:0}}@media (height<=520px){:root{--card-w:clamp(40px, 15vh, 66px);--trick-w:clamp(34px, 11vh, 52px);--small-w:22px}.topbar{padding-top:calc(3px + var(--safe-t));padding-bottom:3px}.topbar-actions button{min-height:32px}.opponent{gap:4px;padding:6px 10px}.center{gap:4px}.me-area{padding-top:2px;padding-bottom:calc(6px + var(--safe-b));gap:4px}.me-top{flex-direction:row;justify-content:center;align-items:center}.me-top .seat-badge{flex-shrink:0}.me-top .tag .long{display:none}.me-top .tag .short{display:inline}.hand{padding-top:12px}.card.selected{transform:translateY(-10px)}.action-panel{width:auto;max-width:min(640px,100%);padding:6px 12px;font-size:.92em}.action-panel .button-row{margin-top:.4em}.action-panel button{min-height:38px}.jump,.type-row{margin-top:.3em}.type-btn{flex-direction:row;gap:.25em;padding:.2em}.options-row{margin-top:.3em}.chip{min-height:34px}.value-line{margin-top:.3em}.phase-finished .hand{display:none}.skat-reveal{margin:.3em 0}}.auth-panel{max-width:440px;margin:0 auto}.tabs{background:#7f7f7f26;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:.6em;padding:4px;display:grid}.tabs button{color:inherit;background:0 0;border:0}.tabs button.active{background:var(--panel);font-weight:600;box-shadow:0 1px 4px #0003}.form-error{color:var(--danger);margin:.4em 0 .8em;font-weight:500}.auth form .primary{margin-top:.4em}.lobby-header.with-account{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6em 1em;margin-bottom:16px;display:flex}.account{color:#d7ecdf;align-items:center;gap:.8em;display:flex}.friend-list{margin:.8em 0 0;padding:0;list-style:none}.friend-list li{border-bottom:1px solid #7f7f7f40;align-items:center;gap:.6em;min-height:52px;padding:.5em 0;display:flex}.friend-name{flex:1;min-width:0;font-weight:600}.friend-name .hint{font-weight:400}.status-dot{background:#9aa5a0;border-radius:50%;flex-shrink:0;width:10px;height:10px}.status-dot.online{background:#2fb35a}.status-dot.waiting{background:var(--accent)}.status-dot.playing{background:#d9792b}.confirm{gap:.4em;display:flex}.icon-btn{min-width:40px;color:var(--muted);border-color:#0000}button.danger{background:var(--danger);border-color:var(--danger);color:#fff}.tag.ok{background:var(--ok);color:#fff}.panel .tag{background:#7f7f7f2e}.panel .tag.ok{background:var(--ok)}.invite-banner{top:calc(8px + var(--safe-t));z-index:45;flex-direction:column;gap:8px;width:min(560px,100vw - 16px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.invite{background:var(--panel);color:var(--panel-text);border-left:5px solid var(--accent);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6em;padding:10px 14px;animation:.2s ease-out slide-in;display:flex;box-shadow:0 10px 30px #00000073}.invite-text{flex:220px}.invite-actions{gap:.5em;display:flex}@keyframes slide-in{0%{opacity:0;transform:translateY(-20px)}}.lobby>.hint{color:#b7d3c2}.toast.notice{background:#1d5e3a;border:1px solid #2fb35a}.lobby>.back{color:#d7ecdf;margin-bottom:.4em}.form-info{color:var(--ok);margin:.4em 0 .8em;font-weight:500}button.link{color:var(--muted);background:0 0;border:0;min-height:40px;margin:.8em auto 0;text-decoration:underline;display:block}.auth-panel h2{margin-bottom:.6em}.count-badge{background:var(--danger);color:#fff;vertical-align:middle;border-radius:999px;place-items:center;min-width:1.4em;height:1.4em;margin-left:.5em;padding:0 .35em;font-size:.7em;display:inline-grid}.requests.incoming{background:#e0a5261f;border:1px solid #e0a52680;border-radius:12px;margin-bottom:12px;padding:4px 12px 0}.requests h3{margin:.6em 0 0;font-size:.95rem}.requests .friend-list{margin-top:.2em}.requests .friend-list li:last-child{border-bottom:0}.friend-list li.pending .friend-name{font-weight:500}.status-dot.pending{background:0 0;border:2px dashed #9aa5a0}.friend-list li{flex-wrap:wrap}.request-hint{text-align:left;background:var(--accent);border-color:var(--accent-dark);color:#241a02;width:100%;margin-bottom:16px;font-weight:600;display:block}.friend-list .friend-name{flex:170px}.parties{grid-template-columns:1fr 1fr;gap:8px;margin:.6em 0;display:grid}.party{text-align:center;border:1px solid #7f7f7f4d;border-radius:10px;min-width:0;padding:8px 10px}.party.winner{border-color:var(--ok);background:#2e7d3214}.party-role{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8em}.party-role .tag{text-transform:none;letter-spacing:0;margin-left:.4em}.party-names{overflow-wrap:anywhere;font-weight:700}.party-points strong{font-variant-numeric:tabular-nums;font-size:1.6em}.round-points{border-collapse:collapse;min-width:min(100%,280px);margin:.2em auto .4em;font-size:.92em}.round-points th,.round-points td{text-align:left;padding:.2em .6em}.round-points th{color:var(--muted);font-size:.8em;font-weight:500}.round-points .num{text-align:right;font-variant-numeric:tabular-nums}.round-points tr.me td:first-child{font-weight:700}.ready-list{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:.5em;display:flex}.ready-chip{background:#7f7f7f26;border-radius:999px;padding:.2em .7em;font-size:.9em}.ready-chip.ok{background:var(--ok);color:#fff}.action-panel.result>.hint{margin-top:.4em}@media (height<=520px){.parties{margin:.3em 0}.party{padding:4px 8px}.party-points strong{font-size:1.2em}}@media (width<=600px){.phase-finished .hand{display:none}}.saved-list{margin:0;padding:0;list-style:none}.saved-list li{border-bottom:1px solid #7f7f7f40;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6em 1em;padding:.7em 0;display:flex}.saved-list li:last-child{border-bottom:0}.saved-info{flex:240px;min-width:0}.saved-players{flex-wrap:wrap;gap:.3em .9em;margin-top:.3em;font-size:.92em;display:flex}.saved-player strong{font-variant-numeric:tabular-nums}.saved-actions{align-items:center;gap:.5em;display:flex}button.ghost-dark{color:var(--muted);background:0 0}.seat-list .seat-score{font-variant-numeric:tabular-nums;text-align:right;min-width:3em;font-weight:700}.seat-list .status-dot{vertical-align:middle;margin-right:.2em;display:inline-block}.saved-info .tag{margin-left:.5em}.hand-slot{position:relative}.hand-slot.draggable{touch-action:none}.hand-slot.dragging{z-index:50}.hand-slot.dragging .card{cursor:grabbing;box-shadow:0 14px 30px #00000080}.center{border-radius:18px;transition:background .15s,box-shadow .15s;position:relative}.center.drop-possible{box-shadow:inset 0 0 0 2px #ffffff40}.center.drop-active{box-shadow:inset 0 0 0 3px var(--accent);background:#e0a5262e}.drop-hint{color:#fff;white-space:nowrap;pointer-events:none;z-index:5;background:#00000073;border-radius:999px;padding:4px 12px;font-size:.9em;position:absolute;top:8px;left:50%;transform:translate(-50%)}.center.drop-active .drop-hint{background:var(--accent);color:#241a02;font-weight:600}