:root{--bg: #0f172a;--bg-soft: #1e293b;--bg-card: #1e293b;--line: #334155;--text: #e2e8f0;--muted: #94a3b8;--primary: #22c55e;--primary-dark: #16a34a;--danger: #ef4444;--felt: #14532d;--tile-bg: #faf7ee;--red-ink: #f03e3e;--red-pip: #f03e3e;--blue-ink: #1c7ed6;--blue-pip: #1c7ed6;--black-ink: #2a3036;--black-pip: #343a40;--orange-ink: #f76707;--orange-pip: #f76707;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(circle at 50% -10%,#1e293b,var(--bg) 60%);color:var(--text);-webkit-tap-highlight-color:transparent}#root{display:flex;flex-direction:column}.logo{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;margin:0;background:linear-gradient(120deg,#4ade80,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--muted);margin-top:.25rem}.splash,.home,.lobby{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem;text-align:center}.card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:1.5rem;width:100%;max-width:380px;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 20px 40px -20px #0009}.field{display:flex;flex-direction:column;gap:.35rem;text-align:left;font-size:.85rem;color:var(--muted)}input{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;color:var(--text);font-size:1rem;width:100%}input:focus{outline:2px solid var(--primary);border-color:transparent}.code-input{text-transform:uppercase;letter-spacing:.4em;text-align:center;font-weight:700;font-size:1.4rem}.join-row{display:flex;gap:.5rem}.join-row .code-input{flex:1}.divider{text-align:center;color:var(--muted);font-size:.8rem;position:relative}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:var(--bg-soft);color:var(--text);border-radius:10px;padding:.7rem 1rem;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .05s ease,background .15s ease,opacity .15s ease}.btn:hover{background:#273449}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--primary);border-color:var(--primary-dark);color:#06210f}.btn-primary:hover{background:var(--primary-dark)}.btn-small{padding:.35rem .6rem;font-size:.8rem}.btn-link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:.4rem}.error{color:var(--danger);font-size:.9rem;margin:0}.hint{color:var(--muted);font-size:.9rem;margin:0}.code-display{display:flex;align-items:center;gap:.6rem;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}.code-label{font-size:.75rem;color:var(--muted)}.code-value{font-size:1.4rem;font-weight:800;letter-spacing:.3em;flex:1}.player-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.player-list li{display:flex;align-items:center;gap:.6rem;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;text-align:left}.player-list .empty-slot{opacity:.45;border-style:dashed}.player-list .seat{width:1.6rem;height:1.6rem;display:grid;place-items:center;background:var(--bg-soft);border-radius:50%;font-weight:700;font-size:.85rem}.player-list .name{flex:1;font-weight:600}.badge{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--muted)}.badge-you{background:var(--primary);color:#06210f;border-color:var(--primary-dark)}.game{flex:1;display:flex;flex-direction:column;gap:.75rem;padding:.75rem;max-width:900px;width:100%;margin:0 auto}.game-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}.turn-track{display:flex;gap:.4rem;flex-wrap:wrap}.turn-chip{display:flex;align-items:center;gap:.4rem;background:var(--bg-card);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;font-size:.85rem}.turn-chip.active{border-color:var(--primary);box-shadow:0 0 0 2px #22c55e40}.turn-chip.me .chip-name{font-weight:700}.chip-count{background:var(--bg-soft);border-radius:999px;padding:0 .45rem;font-size:.75rem;color:var(--muted)}.game-meta{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--muted)}.winner-banner{background:linear-gradient(120deg,var(--primary),#22d3ee);color:#06210f;font-weight:800;text-align:center;padding:.7rem;border-radius:12px}.table-area{flex:1;background:radial-gradient(circle at 50% 0%,#166534,var(--felt) 70%);border:1px solid #14532d;border-radius:16px;padding:1rem;display:flex;flex-wrap:wrap;align-content:flex-start;gap:1.1rem;min-height:220px;box-shadow:inset 0 4px 30px #00000059}.table-empty{color:#ffffff80;margin:auto}.meld-row{display:flex;align-items:center;gap:4px;padding:6px;border-radius:10px;background:#0000002e;border:2px solid transparent;min-height:64px;position:relative}.meld-row.meld-valid{border-color:#22c55e99}.meld-row.meld-invalid{border-color:#ef4444b3}.meld-grip{align-self:stretch;display:flex;align-items:center;justify-content:center;padding:0 3px;margin:-2px 1px -2px -2px;color:#fff6;font-size:.85rem;letter-spacing:-2px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.meld-grip:active{cursor:grabbing}.meld-drag-preview{box-shadow:0 14px 28px #0000008c;background:#14281cf2}.new-meld-drop{min-height:64px;min-width:120px;border:2px dashed rgba(255,255,255,.3);border-radius:10px;display:grid;place-items:center;color:#ffffff8c;font-size:.8rem;padding:.5rem;flex:1}.new-meld-drop.over{border-color:var(--primary);color:var(--primary);background:#22c55e1a}.rack-area{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:.75rem}.rack-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;color:var(--muted);font-size:.85rem}.rack-grid{--slot-w: 46px;--slot-h: 62px;display:grid;grid-template-columns:repeat(auto-fill,var(--slot-w));grid-auto-rows:var(--slot-h);justify-content:center;gap:5px;max-height:42vh;overflow-y:auto;padding:6px 4px;background:repeating-linear-gradient(90deg,#2b3648,#2b3648 2px,#26303f 2px,#26303f 6px);border-radius:10px}.rack-slot{width:var(--slot-w);height:var(--slot-h);border-radius:8px;display:grid;place-items:center;background:#0000002e;box-shadow:inset 0 0 0 1px #ffffff0d}.rack-slot.filled{background:transparent;box-shadow:none}.rack-slot.over{box-shadow:inset 0 0 0 2px var(--primary);background:#22c55e1f}.tile{position:relative;width:44px;height:58px;background:var(--tile-bg);border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:1.5rem;cursor:grab;-webkit-user-select:none;user-select:none;box-shadow:0 2px #0000004d,inset 0 -3px 6px #0000001f;touch-action:none}.tile:active{cursor:grabbing}.tile-dragging{box-shadow:0 12px 24px #00000080;transform:scale(1.05)}.tile-pip{position:absolute;top:3px;left:5px;font-size:.72rem;line-height:1;pointer-events:none}.tile-face{-webkit-text-stroke:1px rgba(0,0,0,.42);paint-order:stroke fill}.tile-red .tile-face{color:var(--red-ink)}.tile-red .tile-pip{color:var(--red-pip)}.tile-blue .tile-face{color:var(--blue-ink)}.tile-blue .tile-pip{color:var(--blue-pip)}.tile-black .tile-face{color:var(--black-ink)}.tile-black .tile-pip{color:var(--black-pip)}.tile-orange .tile-face{color:var(--orange-ink)}.tile-orange .tile-pip{color:var(--orange-pip)}.tile-joker{background:linear-gradient(135deg,#fde68a,#fca5a5,#93c5fd)}.tile-joker .tile-face{color:#1f2937}.action-bar{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex-wrap:wrap}.action-bar .hint{margin-right:auto}.game-error{text-align:right}@media (max-width: 480px){.tile{width:40px;height:54px;font-size:1.45rem}.tile-face{-webkit-text-stroke-width:.6px}.rack-grid{--slot-w: 44px;--slot-h: 58px}.logo{font-size:2rem}}