:root{--bg: #0e0e10;--panel: #1b1b1f;--fg: #f4f4f5;--muted: #9a9aa3;--accent: #ffd400;--good: #3ddc84;--card-w: min(42vw, 170px);--safe-b: env(safe-area-inset-bottom, 0px);font-family:Helvetica Neue,Helvetica,Arial,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow-x:hidden;background:var(--bg);color:var(--fg);overscroll-behavior:none}#app{min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 var(--safe-b)}button{font:inherit;font-weight:700;color:#000;background:var(--accent);border:0;border-radius:10px;padding:14px 20px;min-height:48px;cursor:pointer}button:disabled{opacity:.4;cursor:default}button.ghost{background:transparent;color:var(--fg);border:1px solid #444}input{font:inherit;padding:14px;min-height:48px;border-radius:10px;border:1px solid #444;background:var(--panel);color:var(--fg);width:100%}h1,h2,h3{margin:0}.center{margin:auto;width:min(420px,92vw);display:grid;gap:14px}.title{font-size:2rem;line-height:1.1}.muted{color:var(--muted)}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.code{font-size:2.4rem;letter-spacing:.3em;font-weight:800;color:var(--accent)}.topbar{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;background:var(--panel)}.chip{flex:none;padding:6px 10px;border-radius:999px;background:#2a2a30;font-size:.85rem;white-space:nowrap}.chip.czar{outline:2px solid var(--accent)}.chip.off{opacity:.45}.chip.done:after{content:" ✓";color:var(--good)}.stage{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:14px}.status{text-align:center;font-weight:700}.cards{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.card{width:var(--card-w);min-height:calc(var(--card-w) * 1.4);padding:12px 10px;border-radius:10px;font-weight:700;font-size:clamp(.82rem,3.4vw,1rem);line-height:1.25;overflow-wrap:anywhere;-webkit-user-select:none;user-select:none;background:#fff;color:#000;border:3px solid transparent;text-align:left;font-family:inherit}.card.black{background:#000;color:#fff;border-color:#fff}.card.black.big{width:min(92vw,360px);min-height:0;font-size:1.15rem;padding:16px}.card.sel{border-color:#ff2d55;transform:translateY(-6px)}.card.win{border-color:var(--good);box-shadow:0 0 0 3px var(--good)}.group{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;background:var(--panel)}.group.win{outline:3px solid var(--good)}.group.clickable{cursor:pointer}.group .who{font-size:.8rem;color:var(--muted);text-align:center}.hand{padding:10px 12px 14px;background:var(--panel);border-top:1px solid #333}.hand h3{font-size:.85rem;color:var(--muted);margin-bottom:8px}.scroll-x{display:flex;gap:10px;overflow-x:auto;padding:8px 2px;scroll-snap-type:x proximity}.scroll-x .card{flex:none;scroll-snap-align:start}.hand .card{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-x}.tray{display:flex;gap:8px;flex-wrap:wrap;min-height:96px;padding:8px;border-radius:12px;border:2px dashed #444;background:#141418;align-items:stretch}.tray .card{min-height:0;width:min(44vw,170px);font-size:.8rem;padding:8px}.slot{width:min(44vw,170px);min-height:80px;border-radius:10px;border:2px dashed #3a3a42;color:var(--muted);display:grid;place-items:center;text-align:center;padding:10px;font-size:.8rem}.card.dragging{opacity:.3}.card.ghost{position:fixed;z-index:50;pointer-events:none;margin:0;transform:rotate(4deg) scale(1.06);opacity:.95;box-shadow:0 10px 24px #00000080;cursor:grabbing}@media(min-width:900px){:root{--card-w: 170px}.scroll-x{flex-wrap:wrap;overflow:visible;justify-content:center}}@media(min-width:900px)and (hover:hover){.fan{flex-wrap:nowrap;justify-content:center;padding:40px 0 70px;gap:0;scroll-snap-type:none}.fan .card{--o: calc(var(--i) - (var(--n) - 1) / 2);flex:none;position:relative;margin-left:calc(-1*max(24px,(var(--n) * 170px - (100vw - 120px)) / (var(--n) - 1)));transform:translateY(calc(var(--o) * var(--o) * 1.5px)) rotate(calc(var(--o) * 3deg));transition:transform .12s,box-shadow .12s;box-shadow:-3px 2px 8px #00000059}.fan .card:first-child{margin-left:0}.fan .card:hover{transform:translateY(-34px) scale(1.12);z-index:5;border-color:#ff2d55}}#toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%);background:#ff2d55;color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:10}#toast.show{opacity:1}