:root{--felt-1: #123524;--felt-2: #0d271b;--felt-3: #0a1f16;--ink: #eaf3ee;--ink-dim: #9db8ab;--panel: rgba(10, 26, 19, .72);--panel-line: rgba(255, 255, 255, .08);--accent: #f2b544;--accent-ink: #2a1c05;--good: #5fd08a;--bad: #e06c5f;--card-shadow: 0 2px 6px rgba(0, 0, 0, .45);--radius: 10px;font-size:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:radial-gradient(120% 90% at 50% -10%,var(--felt-1) 0%,var(--felt-2) 45%,var(--felt-3) 100%) fixed;overscroll-behavior:none}.app{min-height:100%;display:flex;flex-direction:column}.btn{appearance:none;border:1px solid var(--panel-line);background:#ffffff0f;color:var(--ink);padding:.6rem 1rem;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:transform .05s ease,background .15s ease,opacity .15s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.btn.ghost{background:transparent;border-color:var(--panel-line);color:var(--ink-dim)}.btn.tiny{padding:.3rem .6rem;font-size:.8rem}.field{display:block;margin:.9rem 0}.field span{display:block;font-size:.8rem;color:var(--ink-dim);margin-bottom:.3rem}.field input{width:100%;padding:.7rem .8rem;border-radius:var(--radius);border:1px solid var(--panel-line);background:#00000040;color:var(--ink);font-size:1rem}.field input:focus{outline:2px solid var(--accent);outline-offset:1px}.toast{position:fixed;top:.6rem;left:50%;transform:translate(-50%);z-index:50;max-width:92vw;background:var(--bad);color:#fff;padding:.6rem 1rem;border-radius:var(--radius);box-shadow:var(--card-shadow);display:flex;gap:.8rem;align-items:center;cursor:pointer;font-weight:600;animation:drop .18s ease}.toast-x{opacity:.7}@keyframes drop{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}.reconnect-banner{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#f2b544eb;color:var(--accent-ink);text-align:center;padding:.4rem;font-weight:700;font-size:.85rem}.home{flex:1;display:flex;align-items:center;justify-content:center;padding:1.2rem}.home-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:1.6rem 1.4rem;backdrop-filter:blur(6px);box-shadow:var(--card-shadow)}.logo{margin:0;text-align:center;font-size:2.6rem;letter-spacing:.12em;font-weight:800;color:var(--accent)}.tagline{text-align:center;color:var(--ink-dim);margin:.2rem 0 1.2rem;font-size:.9rem}.home-card .btn{width:100%;margin-top:.4rem}.divider{display:flex;align-items:center;gap:.8rem;color:var(--ink-dim);font-size:.8rem;margin:1rem 0}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--panel-line)}.lobby{flex:1;display:flex;align-items:center;justify-content:center;padding:1.2rem}.lobby-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--panel-line);border-radius:16px;padding:1.6rem 1.4rem;backdrop-filter:blur(6px);box-shadow:var(--card-shadow)}.lobby-card h2{margin:0 0 .6rem;font-size:1.4rem}.room-code{display:flex;align-items:baseline;gap:.6rem;background:#0000004d;border:1px dashed var(--panel-line);border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:.6rem}.code-label{font-size:.75rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.1em}.code{font-size:1.8rem;font-weight:800;letter-spacing:.25em;color:var(--accent)}.lobby-hint{color:var(--ink-dim);font-size:.85rem;margin:0 0 1rem}.seat-list{list-style:none;padding:0;margin:0 0 .6rem;display:grid;gap:.4rem}.seat-list li{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:#ffffff0a;border-radius:var(--radius)}.seat-list li.empty{opacity:.4}.seat-dot{width:10px;height:10px;border-radius:50%;background:var(--bad);flex:none}.seat-dot[data-on=true]{background:var(--good)}.seat-name{font-weight:600}.host-tag,.self-tag{font-style:normal;font-size:.75rem;color:var(--ink-dim);margin-left:.4rem}.lobby-count{color:var(--ink-dim);font-size:.85rem;margin:.4rem 0 1rem}.lobby-wait{color:var(--ink-dim);font-size:.9rem;margin-bottom:1rem}.lobby-card .btn{width:100%;margin-top:.5rem}.game{flex:1;display:flex;flex-direction:column;min-height:0}.topbar{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;padding-top:calc(.5rem + env(safe-area-inset-top));background:var(--panel);border-bottom:1px solid var(--panel-line);position:sticky;top:0;z-index:20;font-size:.85rem}.topbar-code{font-weight:800;letter-spacing:.15em;color:var(--accent)}.topbar-phase{color:var(--ink-dim);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}.topbar-round{margin-left:auto;color:var(--ink-dim)}.topbar-piles{display:flex;gap:.75rem;align-items:center}.pile{display:flex;flex-direction:column;align-items:center;gap:1px}.pile-stack{position:relative;width:22px;height:30px}.pile-stack .pile-card{position:absolute;inset:0}.pile-stack.stacked .pile-card:first-child{transform:translate(-2px,-2px);opacity:.8;z-index:0}.pile-stack.stacked .pile-card:last-child{z-index:1}.pile-card{width:22px;height:30px;border-radius:4px;background:url(/cards/back.jpg) center / cover no-repeat;border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 3px #0006}.pile-card.empty{background:none;border:1.5px dashed rgba(255,255,255,.22);box-shadow:none}.pile-count{font-size:.72rem;font-weight:700;color:var(--ink-dim)}.pile-discard.pop .pile-card{animation:pile-pop .45s ease}@keyframes pile-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}to{transform:scale(1)}}.game-body{flex:1;display:flex;flex-direction:column;gap:1rem;padding:.9rem;overflow-y:auto}.main-col{display:flex;flex-direction:column;gap:.9rem;min-width:0}.side-col{display:flex;flex-direction:column;gap:1rem}.phase-banner{background:var(--panel);border:1px solid var(--panel-line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:.7rem .9rem;font-size:.95rem;font-weight:600}.phase-banner.over{border-left-color:var(--good);color:var(--good)}.my-board-wrap{display:flex;flex-direction:column;gap:.5rem}.board-label{font-size:.8rem;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.08em}.you-turn{color:var(--accent);font-style:normal}.board-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:520px;width:100%;margin:0 auto}.board-grid.small{gap:4px;max-width:220px}.board-grid>div{border-radius:6px;position:relative}.board-grid>div.formed{box-shadow:0 0 0 2px var(--good);border-radius:8px}.board-grid>div.just-formed{animation:formed-pulse .8s ease-in-out 2}@keyframes formed-pulse{0%,to{box-shadow:0 0 0 2px var(--good)}50%{box-shadow:0 0 0 4px var(--good),0 0 20px 6px #5fd08a8c}}.formed-badge{position:absolute;top:-7px;right:-7px;z-index:12;background:var(--good);color:#052e1c;font-size:.72rem;font-weight:800;line-height:1;padding:.18em .42em;border-radius:9px;box-shadow:0 1px 5px #00000073}.board-grid>div.just-formed .formed-badge{animation:badge-pop .5s ease}@keyframes badge-pop{0%{transform:scale(0)}60%{transform:scale(1.25)}to{transform:scale(1)}}.card-ghost{position:absolute;inset:0;z-index:10;pointer-events:none;animation:swap-out .5s ease-in forwards}@keyframes swap-out{0%{opacity:.95;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-24px) scale(.82)}}.card,.card-slot{aspect-ratio:635 / 889;border-radius:8px;position:relative;overflow:hidden;background:#081510;box-shadow:var(--card-shadow)}.card{perspective:600px}.card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .35s ease}.card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden}.card-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.card-face.front{transform:rotateY(180deg)}.card.down .card-face.back img{filter:saturate(.9)}.card.swap-in{animation:swap-in .45s ease-out}@keyframes swap-in{0%{opacity:0;transform:translateY(-18px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}.card-slot{border:2px dashed rgba(255,255,255,.12);background:#0003}.card.actionable{cursor:pointer;box-shadow:0 0 0 2px var(--accent),var(--card-shadow)}.card.selected{box-shadow:0 0 0 3px var(--accent),var(--card-shadow);transform:translateY(-3px)}.card.dimmed{opacity:.35}.card-value{position:absolute;top:4px;left:4px;min-width:1.1em;text-align:center;background:#000000b8;color:#fff;font-weight:800;font-size:clamp(.6rem,2.4vw,.95rem);padding:.05em .3em;border-radius:6px;line-height:1.1}.board-grid.small .card-value{display:none}.placing{display:flex;flex-direction:column;gap:.7rem}.hand{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:520px;width:100%;margin:0 auto}.hand .card,.hand .card-slot{border-radius:6px}.hand .card{cursor:pointer}.hand .card.selected{box-shadow:0 0 0 3px var(--accent),var(--card-shadow)}.action-bar{display:flex;flex-wrap:wrap;gap:.5rem;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:.7rem}.action-hint{width:100%;margin:0;color:var(--ink-dim);font-size:.85rem}.action-bar .btn{flex:1 1 auto}.host-pick{display:flex;flex-direction:column;gap:.5rem;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:.7rem}.host-pick p{margin:0;font-weight:600}.host-pick-opts{display:flex;flex-wrap:wrap;gap:.5rem}.gameover{display:flex;justify-content:center}.scoreboard{display:flex;flex-direction:column;gap:.35rem;background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:.6rem}.score-row{display:flex;justify-content:space-between;align-items:center;padding:.4rem .6rem;border-radius:8px;background:#ffffff08}.score-row.turn{background:#f2b54429;box-shadow:inset 0 0 0 1px var(--accent)}.score-row.winner{background:#5fd08a2e;box-shadow:inset 0 0 0 1px var(--good)}.score-row.self .score-name:before{content:"▸ ";color:var(--accent)}.score-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-right{display:flex;align-items:baseline;gap:.5rem}.score-sub{font-size:.75rem;font-weight:700;color:var(--ink-dim);min-width:2.2em;text-align:right}.score-val{font-weight:800;font-size:1.05rem;color:var(--accent)}.off{color:var(--bad);margin-left:.3rem;font-size:.8rem}.opp-score em{font-style:normal;font-size:.7rem;color:var(--ink-dim);margin-left:.35rem;font-weight:700}.history{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);overflow:hidden}.history-toggle{width:100%;display:flex;align-items:center;gap:.5rem;background:transparent;border:none;color:var(--ink);font-weight:700;font-size:.9rem;padding:.6rem .8rem;cursor:pointer}.history-count{background:#ffffff1a;border-radius:10px;padding:0 .45rem;font-size:.72rem;color:var(--ink-dim)}.history-caret{margin-left:auto;color:var(--ink-dim)}.history-body{border-top:1px solid var(--panel-line);padding:.6rem;display:flex;flex-direction:column;gap:.6rem}.history-tabs{display:flex;gap:.4rem}.history-tabs button{flex:1;background:transparent;border:1px solid var(--panel-line);color:var(--ink-dim);border-radius:8px;padding:.35rem;font-size:.8rem;font-weight:600;cursor:pointer}.history-tabs button.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}.history-log{list-style:none;margin:0;padding:0;max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.history-item{display:flex;gap:.5rem;align-items:baseline;font-size:.8rem;padding:.25rem .4rem;border-radius:6px;background:#ffffff08}.history-item.roundScored,.history-item.gameOver,.history-item.firstPlayer{background:#f2b5441f}.history-round{flex:none;width:2.4em;color:var(--ink-dim);font-size:.7rem;font-weight:700}.history-text{color:var(--ink)}.history-empty{color:var(--ink-dim);font-size:.8rem;text-align:center;padding:.5rem}.history-rounds{display:flex;flex-direction:column;gap:.5rem;max-height:300px;overflow-y:auto}.round-summary{background:#ffffff08;border-radius:8px;padding:.5rem .6rem}.round-summary-head{font-weight:700;font-size:.8rem;color:var(--accent);margin-bottom:.3rem}.round-summary-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem;padding:.1rem 0}.round-summary-name{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}.round-summary-sub{color:var(--ink-dim);font-weight:700}.round-summary-total{color:var(--accent);font-weight:800}.opponents{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}.opp{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--radius);padding:.6rem;display:flex;flex-direction:column;gap:.5rem}.opp.turn{box-shadow:inset 0 0 0 1px var(--accent)}.opp-head{display:flex;justify-content:space-between;align-items:baseline}.opp-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.opp-score{font-weight:800;color:var(--accent)}@media (min-width: 900px){.game-body{flex-direction:row;align-items:flex-start}.main-col{flex:1.4}.side-col{flex:1;position:sticky;top:64px}.opponents{grid-template-columns:repeat(2,1fr)}}