:root{--bg: #1a1410;--bg-2: #241c16;--panel: rgba(38, 30, 24, .92);--panel-2: rgba(52, 41, 32, .9);--ink: #f6ead8;--ink-dim: #c7b59c;--accent: #f4a640;--accent-2: #ffd46a;--keeps: #ff5d4a;--practice: #5ec5a8;--line: rgba(255, 230, 190, .14);--radius: 14px;--font-display: "Rubik", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--font-body: "Rubik", "Segoe UI", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;cursor:pointer}input,select{font:inherit}a{color:var(--accent-2)}h1,h2,h3{font-family:var(--font-display);letter-spacing:.01em;margin:0 0 .5rem}.screen{min-height:100%;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));gap:14px;max-width:1100px;margin:0 auto;width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.brand{font-family:var(--font-display);font-weight:800;font-size:1.15rem;display:flex;align-items:center;gap:8px}.brand small{font-weight:500;color:var(--ink-dim);font-size:.8rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:0 10px 30px #00000059}.panel.soft{background:var(--panel-2)}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.grow{flex:1}.stack{display:flex;flex-direction:column;gap:10px}.btn{border:1px solid var(--line);background:var(--panel-2);color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:600;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s ease,background .15s ease}.btn:hover{background:#46382cf2}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(180deg,#f8bf5a,#e9922a);color:#2a1706;border-color:#b86f17}.btn.keeps{background:linear-gradient(180deg,#ff7a66,#d93d2a);color:#fff;border-color:#a52a1b}.btn.practice{background:linear-gradient(180deg,#7bdcc0,#3aa88b);color:#0a2a22;border-color:#227a62}.btn.ghost{background:transparent}.btn.big{font-size:1.15rem;padding:16px 22px;min-height:60px}.btn.small{min-height:34px;padding:6px 10px;font-size:.9rem}.input{background:#120e0b;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:44px;width:100%}.input:focus{outline:2px solid var(--accent);outline-offset:1px}label.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--ink-dim)}.tag{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:#00000040;color:var(--ink-dim);font-weight:600;letter-spacing:.02em;text-transform:uppercase}.tag.keeps{color:#ffb3a8;border-color:#ff5d4a80}.tag.practice{color:#a6eedb;border-color:#5ec5a880}.tag.ai{color:#d5c3ff;border-color:#aa8cff80}.tag.human{color:#ffe3a3;border-color:#f4a64080}.muted{color:var(--ink-dim)}.error{color:#ff9a8c}.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;position:relative}.card.selected{outline:2px solid var(--accent)}.card.locked{opacity:.55}.marble-thumb{width:100%;aspect-ratio:1;border-radius:50%;position:relative}.rarity-common{color:#d8d0c2}.rarity-uncommon{color:#8ee08a}.rarity-rare{color:#6cc4ff}.rarity-epic{color:#d49cff}.rarity-legendary{color:#ffd46a}.hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}.hud>*{pointer-events:auto}.hud-top{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.hud-bottom{display:flex;gap:10px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}.hud-panel{background:#140e0ad1;border:1px solid var(--line);border-radius:12px;padding:8px 12px;backdrop-filter:blur(6px)}.match-root{position:fixed;inset:0;background:#0f0c0a;overflow:hidden;touch-action:none}.match-root canvas{display:block;width:100%;height:100%;touch-action:none}.slider{width:100%}.players{display:flex;gap:8px;flex-wrap:wrap}.player-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:#0000004d}.player-chip.active{border-color:var(--accent);box-shadow:0 0 0 2px #f4a64040}.timer{font-variant-numeric:tabular-nums;font-weight:700}.modal-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;max-width:560px;width:100%;max-height:90vh;overflow:auto}.list{display:flex;flex-direction:column;gap:6px}.list-item{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:#00000038}.pill-group{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.pill-group button{border:0;background:transparent;color:var(--ink-dim);padding:8px 12px;min-height:40px}.pill-group button.on{background:var(--accent);color:#2a1706;font-weight:700}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:#2d241c;border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:60;box-shadow:0 10px 30px #0006;max-width:90vw}.title-hero{text-align:center;padding:28px 10px 10px}.title-hero h1{font-size:clamp(2rem,7vw,3.6rem);line-height:1;color:var(--accent-2);text-shadow:0 4px 0 #6b3a0a,0 10px 30px rgba(0,0,0,.5)}.title-hero p{color:var(--ink-dim);margin:6px 0 0}.bag-reveal{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}.bag-reveal .card{padding:6px;font-size:.72rem;animation:pop .35s ease both}@keyframes pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.countdown{font-variant-numeric:tabular-nums}@media(max-width:600px){.screen{padding-left:12px;padding-right:12px}.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.btn.big{font-size:1.05rem}}@media(prefers-reduced-motion:reduce){.bag-reveal .card{animation:none}}.title-screen{position:relative;isolation:isolate}.title-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0f0c0a}.title-backdrop img,.title-backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.title-backdrop video{opacity:.85}.title-backdrop-fade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#0f0c0a26,#0f0c0ad9 75%)}.title-screen .panel{background:#1c1510f0}@media(max-width:640px){.hud{padding:6px}.hud-panel{padding:6px 8px;border-radius:10px}.hud-top .players{gap:4px}.player-chip{padding:4px 6px;gap:5px;font-size:.8rem}.player-chip .tag{display:none}.hud-bottom{gap:6px}.hud-bottom .field{width:78px!important;font-size:.7rem}.hud-bottom .hud-panel{gap:6px!important}.hud-bottom .btn.primary{min-height:40px;padding:6px 12px}.hud-bottom .btn.small.ghost{display:none}.btn.small{min-height:30px;padding:4px 8px;font-size:.8rem}.timer{font-size:1rem!important}}@media(max-height:520px)and (orientation:landscape){.hud-top .players{display:none}}.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px;align-items:start}.lab-scene{position:relative;height:56vh;min-height:300px;border-radius:12px;overflow:hidden;background:#0f0c0a;border:1px solid var(--line)}.lab-scene canvas{display:block;width:100%;height:100%}.lab-scene .lab-overlay{position:absolute;left:8px;top:8px;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}.lab-scene .lab-overlay>*{pointer-events:auto}.lab-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.lab-table{width:100%;border-collapse:collapse;font-size:.88rem}.lab-table th{text-align:left;font-weight:600;color:var(--ink-dim);padding:4px 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}.lab-table td{padding:6px;border-top:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}.lab-table tr[data-testid=lab-row]{cursor:pointer}.lab-table tr.focus{background:#f4a6401f}.lab-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;box-shadow:0 0 0 1px #00000080}.lab-legend{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem}@media(max-width:760px){.lab-layout{grid-template-columns:1fr}.lab-scene{height:46vh;min-height:260px}.lab-table{font-size:.8rem}.lab-table td,.lab-table th{padding:4px}}.btn:focus-visible,.hud button:focus-visible,.hud input:focus-visible,.hud select:focus-visible,.card:focus-visible,.pill-group button:focus-visible,.modal button:focus-visible,.modal input:focus-visible,.modal select:focus-visible{outline:3px solid var(--accent-2);outline-offset:2px;box-shadow:0 0 0 6px #000000a6}.hud input[type=range]:focus-visible{outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kbd{display:inline-block;min-width:1.6em;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8em;padding:1px 6px;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;background:#00000059;color:var(--ink)}.controls-help h3{font-size:.95rem;margin:8px 0 2px;color:var(--accent-2)}.controls-help ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:.9rem}.controls-help li{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.controls-help li>span:first-child{min-width:170px;color:var(--ink)}.cue-swatch{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:3px solid currentColor;font-size:.72rem;font-weight:800;color:var(--ink);background:#0000008c;flex:none}.hud-panel.turn-pulse{animation:turnPulse 1.6s ease-in-out infinite}@keyframes turnPulse{0%,to{box-shadow:0 0 #ffd46a00}50%{box-shadow:0 0 0 4px #ffd46a80}}@media(prefers-reduced-motion:reduce){.hud-panel.turn-pulse{animation:none;box-shadow:0 0 0 2px #ffd46a80}.btn{transition:none}}.chat-drawer{background:#140e0ae0;border:1px solid var(--line);border-radius:12px;width:min(360px,100%);display:flex;flex-direction:column;overflow:hidden;backdrop-filter:blur(6px)}.panel .chat-drawer,.screen>.chat-drawer{width:100%;background:var(--panel-2)}.chat-head{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:var(--ink);padding:8px 12px;font-weight:700;min-height:38px;text-align:left}.chat-unread{background:var(--keeps);color:#fff;border-radius:999px;padding:1px 7px;font-size:.75rem;line-height:1.3}.chat-caret{margin-left:auto;color:var(--ink-dim)}.chat-body{display:flex;flex-direction:column;gap:6px;padding:0 8px 8px}.chat-list{max-height:160px;overflow:auto;display:flex;flex-direction:column;gap:3px;font-size:.85rem;padding:4px 2px;overscroll-behavior:contain}.chat-line{word-break:break-word}.chat-line strong{color:var(--accent-2);margin-right:5px}.chat-emote{font-weight:600}.chat-emotes{display:flex;gap:4px;flex-wrap:wrap}.chat-emotes .btn{min-width:38px;min-height:32px;padding:2px 6px;font-size:1rem}.chat-input{display:flex;gap:6px}.chat-input .input{min-height:36px;padding:6px 10px}.hud-chat{align-self:flex-end;pointer-events:none;display:flex;justify-content:flex-end;margin-top:6px;max-width:100%}.hud-chat .chat-drawer{pointer-events:auto;max-height:34vh}.hud-chat .chat-drawer:not(.open){width:auto;border-radius:999px}.hud-chat .chat-drawer:not(.open) .chat-head{width:auto;min-height:36px;padding:6px 14px;gap:6px}.hud-chat .chat-drawer:not(.open) .chat-caret{margin-left:0}.hud-chat .chat-list{max-height:min(150px,18vh)}.hud>.hud-status{pointer-events:none;margin:auto 0 6px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:min(60%,520px)}.hud-status .hud-panel{font-size:.9rem;padding:6px 10px}.hud-status button{pointer-events:auto}.emote-overlay{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:6px;pointer-events:none}.emote-bubble{background:#ffe6bef2;color:#2a1706;border-radius:14px;padding:4px 12px;display:flex;flex-direction:column;align-items:center;animation:pop .25s ease both;box-shadow:0 6px 16px #00000059}.emote-from{font-size:.7rem;font-weight:700;opacity:.75}.emote-glyph{font-size:1rem;font-weight:700}.tag.spectate{color:#bfe3ff;border-color:#4fb3ff80}@media(max-width:640px){.hud-chat .chat-drawer{max-height:30vh}.hud-chat .chat-list{max-height:13vh}.chat-emotes .btn{min-width:34px}}@media(prefers-reduced-motion:reduce){.emote-bubble{animation:none}}.hud-chat .chat-body{min-height:0;flex:1 1 auto}.hud-chat .chat-list{flex:1 1 auto;min-height:0}.collection-screen{position:relative;isolation:isolate}.collection-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 15%,#2b2017 0%,var(--bg) 50%,#120e0b 100%)}.collection-backdrop video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}.collection-backdrop-fade{position:absolute;inset:0;background:linear-gradient(180deg,#1a141033,#1a141080 55%,#1a1410cc)}@media(prefers-reduced-motion:reduce){.collection-backdrop video{display:none}}.hud-banner{align-self:center;margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:min(560px,100%);padding:8px 12px;border-radius:12px;background:#3c1810f0;border:1px solid var(--keeps, #e0603a);color:var(--ink);text-align:center}.timer.paused{opacity:.55}@media(max-width:640px),(orientation:portrait){.hud>.hud-status{margin:auto 0 6px;max-width:100%}.hud-status .hud-panel{font-size:.85rem}}.queue-chip{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}.modal:focus{outline:none}.modal-actions{position:sticky;bottom:-18px;margin:12px -18px -18px;padding:12px 18px;background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 16px 16px;z-index:1}.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.board-table{width:100%;border-collapse:collapse;white-space:nowrap}.board-table th,.board-table td{padding:4px 8px;text-align:left}@media(max-width:600px){.board-table{font-size:.85rem}.board-table th,.board-table td{padding:4px 5px}.board-table .btn.small{padding:4px 6px;min-height:30px}}.card>div{min-width:0;overflow-wrap:anywhere}.card .tag{display:block;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-item>span:first-child{min-width:0;overflow-wrap:anywhere}.player-chip{min-width:0;max-width:100%}.player-chip strong{min-width:0;max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.panel{min-width:0}
