:root{--table-deep: #0b2038;--table: #123c63;--table-line: rgba(255, 246, 227, .16);--card: #fff6e3;--card-edge: #d9c4a0;--ink: #16233a;--ink-soft: #5f7191;--yellow: #ffc531;--yellow-dk: #c08c00;--blue: #2e86ff;--blue-dk: #17559f;--green: #34c77b;--green-dk: #1b8250;--red: #f2555a;--red-dk: #a92c30;--cream: #fff6e3;--cream-dim: rgba(255, 246, 227, .62);--text: var(--cream);--muted: var(--cream-dim);--panel: var(--table);--panel-2: rgba(255, 246, 227, .1);--line: var(--table-line);--accent: var(--yellow);--danger: var(--red);--success: var(--green);--radius: 18px;--bevel: 5px;--font-display: ui-rounded, "SF Pro Rounded", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;--font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);color:var(--cream);-webkit-font-smoothing:antialiased;overflow:hidden;background-color:var(--table-deep);background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,197,49,.16),transparent 60%),repeating-linear-gradient(45deg,rgba(255,255,255,.017) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0 2px,transparent 2px 4px)}#root{display:flex;flex-direction:column}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}.screen{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px;gap:12px}.center{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;text-align:center;overflow-y:auto;overscroll-behavior:contain;width:100%}.row{display:flex;align-items:center;gap:10px}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.scroll{overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:12px}.panel{background:var(--table);border:2px solid var(--table-line);border-radius:var(--radius);padding:15px;box-shadow:inset 0 1px #fff6e317,0 6px 18px #00000047}.title{font-family:var(--font-display);font-size:clamp(24px,7vw,34px);font-weight:800;letter-spacing:-.015em;line-height:1.05}.subtitle{color:var(--cream-dim);font-size:14px;line-height:1.45}.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:800;color:var(--yellow)}.huge{font-family:var(--font-display);font-size:clamp(64px,21vw,132px);font-weight:800;letter-spacing:-.04em;line-height:.88;font-variant-numeric:tabular-nums}.btn{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.01em;background:var(--card);color:var(--ink);border-radius:14px;padding:13px 20px;box-shadow:0 var(--bevel) 0 var(--card-edge),0 calc(var(--bevel) + 5px) 14px #0000004d;transition:transform .06s ease,box-shadow .06s ease,filter .15s ease}.btn:hover:not(:disabled){filter:brightness(1.04)}.btn:active:not(:disabled){transform:translateY(var(--bevel));box-shadow:0 0 0 var(--card-edge),0 2px 5px #0000004d}.btn:disabled{background:#26456b;color:var(--cream-dim);box-shadow:0 var(--bevel) 0 #17314d}.btn.primary{background:var(--yellow);color:#3a2a00;box-shadow:0 var(--bevel) 0 var(--yellow-dk),0 calc(var(--bevel) + 6px) 16px #00000057}.btn.primary:active:not(:disabled){box-shadow:0 0 0 var(--yellow-dk),0 2px 5px #0000004d}.btn.ghost{background:#fff6e31a;color:var(--cream);box-shadow:0 var(--bevel) 0 #0000004d}.btn.ghost:active:not(:disabled){box-shadow:0 0 #0000004d}.btn.danger{background:var(--red);color:#fff;box-shadow:0 var(--bevel) 0 var(--red-dk),0 calc(var(--bevel) + 5px) 14px #0000004d}.btn.danger:active:not(:disabled){box-shadow:0 0 0 var(--red-dk),0 2px 5px #0000004d}.btn.big{font-size:19px;padding:17px 30px;--bevel: 6px}.chip{display:inline-flex;align-items:center;gap:8px;background:#fff6e31a;border-radius:999px;padding:4px 12px 4px 4px;font-size:13px;font-weight:600;color:var(--cream)}.avatar{width:24px;height:24px;border-radius:50%;flex:none;object-fit:cover;box-shadow:inset 0 1.5px #ffffff73,0 1px 3px #00000073}.avatar.fallback{background:linear-gradient(160deg,#4f6b93,#2b4266);display:grid;place-items:center;font-weight:800;font-family:var(--font-display);color:var(--cream)}.named{display:inline-flex;align-items:center;gap:8px}.chip.dim{opacity:.4}.dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 2px #ffffff80,0 1px 3px #00000073}.banner{display:flex;align-items:center;gap:10px;border-radius:14px;padding:11px 14px;font-size:13px;line-height:1.4;background:#fff6e314;border:2px solid var(--table-line)}.banner.warn{border-color:#ffc53180;background:#ffc53121}.banner.live{border-color:#34c77b8c;background:#34c77b24}.banner.idle{border-color:#2e86ff80;background:#2e86ff1f}.pulse{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 #34c77bb3;animation:pulse 1.5s ease-out infinite;flex:none}@keyframes pulse{0%{box-shadow:0 0 #34c77bb3}70%{box-shadow:0 0 0 11px #34c77b00}to{box-shadow:0 0 #34c77b00}}.teams{display:grid;grid-template-columns:1fr 1fr;gap:12px}.teams.stack{grid-template-columns:1fr}.team{border-radius:var(--radius);border:2px solid var(--table-line);background:var(--table);padding:13px;display:flex;flex-direction:column;gap:10px;min-height:0;box-shadow:inset 0 1px #fff6e314}.team.active{border-color:currentColor;box-shadow:inset 0 0 0 1px currentColor,0 0 20px #ffc5311f}.team-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:800}.team-score{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:24px;font-weight:800}.members{display:flex;flex-wrap:wrap;gap:6px}.words{display:flex;flex-direction:column;gap:9px;width:100%;max-width:440px}.word{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:var(--card);color:var(--ink);border-radius:12px;padding:14px 16px 14px 22px;font-family:var(--font-display);font-size:20px;font-weight:800;box-shadow:0 3px 0 var(--card-edge),0 6px 14px #00000042;transition:transform .14s ease,box-shadow .14s ease,background .2s ease}.word:before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:5px;border-radius:3px;background:var(--blue)}.words .word:nth-child(odd){transform:rotate(-.35deg)}.words .word:nth-child(2n){transform:rotate(.35deg)}.words .word:nth-child(odd):before{background:var(--yellow)}.word.tappable:hover{transform:rotate(0) translateY(-2px);box-shadow:0 5px 0 var(--card-edge),0 10px 20px #0000004d}.word.tappable:active{transform:rotate(0) translateY(3px);box-shadow:0 0 0 var(--card-edge),0 3px 7px #0000004d}.word.scored{background:var(--green);color:#06301b;box-shadow:0 3px 0 var(--green-dk),0 6px 14px #00000042}.word.scored:before{background:#06301b52}.word.scored .word-text{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:#06301b73}.word.flash{animation:stamp .55s cubic-bezier(.2,1.6,.4,1)}@keyframes stamp{0%{transform:rotate(0) scale(1.09);box-shadow:0 0 34px #34c77bcc}60%{transform:rotate(0) scale(.99)}to{transform:rotate(0) scale(1)}}.word-meta{font-family:var(--font-body);font-size:11px;font-weight:700;opacity:.72;display:flex;align-items:center;gap:7px;flex:none}.masked{display:flex;gap:9px;flex-wrap:wrap;padding:5px 0}.mask-group{display:flex;gap:4px}.mask-letter{width:14px;height:5px;border-radius:3px;background:#16233a3d}.play-timer,.play-words{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}@media(min-width:700px)and (max-height:760px){.center.play{flex-direction:row;justify-content:center;align-items:center;gap:28px}.play-timer,.play-words{width:auto;flex:0 1 440px}.play-hint{display:none}}.timer-wrap{display:grid;place-items:center;gap:10px;width:100%}.timer-num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:clamp(70px,22vw,140px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--yellow);text-shadow:0 4px 0 var(--yellow-dk),0 10px 26px rgba(0,0,0,.45)}.timer-num.low{color:var(--red);text-shadow:0 4px 0 var(--red-dk),0 10px 26px rgba(0,0,0,.45);animation:tick .5s steps(2,end) infinite}@keyframes tick{0%,to{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}.bar{height:12px;border-radius:999px;background:#00000057;box-shadow:inset 0 2px 4px #00000080;overflow:hidden;width:100%;max-width:440px}.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(180deg,#ffdb74,var(--yellow));box-shadow:inset 0 -2px #0000002e;transition:width .1s linear}.board{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;width:100%;padding:9px 7px;border-radius:11px;background:#0000004d;box-shadow:inset 0 2px 6px #00000073}.space{position:relative;flex:1 1 0;min-width:2px;height:19px;border-radius:3px;background:var(--blue);opacity:.3}.space:nth-child(2n){background:var(--yellow)}.space.passed{opacity:1}.space.finish{background:var(--cream);opacity:1;flex-grow:1.6;box-shadow:0 0 9px #fff6e38c}.pawn{position:absolute;left:50%;top:50%;width:19px;height:19px;margin:-10px 0 0 -10px;border-radius:50%;background:currentColor;box-shadow:inset 0 2.5px #ffffffa6,inset 0 -2.5px #0000004d,0 2px 6px #0009;animation:hop .45s ease}@keyframes hop{0%{transform:translateY(-15px) scale(.85)}60%{transform:translateY(0) scale(1.08)}to{transform:translateY(0) scale(1)}}.card-back{width:138px;height:188px;border-radius:14px;display:grid;place-items:center;transform:rotate(-3deg);background-color:var(--yellow);background-image:linear-gradient(45deg,var(--blue) 25%,transparent 25% 75%,var(--blue) 75%),linear-gradient(45deg,var(--blue) 25%,transparent 25% 75%,var(--blue) 75%);background-size:34px 34px;background-position:0 0,17px 17px;box-shadow:inset 0 0 0 7px var(--card),0 7px 0 var(--card-edge),0 16px 30px #00000080;animation:deal .5s cubic-bezier(.2,1.4,.4,1)}.card-back>span{font-family:var(--font-display);font-size:52px;font-weight:800;color:var(--ink);background:var(--card);border-radius:50%;width:84px;height:84px;display:grid;place-items:center;box-shadow:0 3px 10px #0000004d}.pawn-big{width:108px;height:108px;border-radius:50%;background:currentColor;box-shadow:inset 0 9px #ffffff80,inset 0 -8px #00000040,0 10px #00000047,0 20px 34px #00000080;animation:hop .6s ease}@keyframes deal{0%{transform:rotate(-16deg) translateY(-32px) scale(.9);opacity:0}to{transform:rotate(-3deg) translateY(0) scale(1);opacity:1}}.die{width:72px;height:72px;border-radius:16px;background:linear-gradient(155deg,#fffdf6,#eadfc6);box-shadow:inset 0 3px #ffffffe6,inset 0 -4px #0000001f,0 7px #bfae8d,0 14px 22px #0006;display:grid;grid-template-columns:1fr 1fr;place-items:center;gap:6px;padding:14px;animation:roll .55s cubic-bezier(.2,1.5,.4,1)}.die.blank,.die.one{grid-template-columns:1fr}.pip{width:15px;height:15px;border-radius:50%;background:var(--ink);box-shadow:inset 0 -2px 2px #00000073}@keyframes roll{0%{transform:rotate(-160deg) scale(.4);opacity:0}70%{transform:rotate(8deg) scale(1.07);opacity:1}to{transform:rotate(0) scale(1)}}.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%);background:var(--card);color:var(--ink);border-radius:14px;padding:12px 18px;font-size:14px;font-weight:600;z-index:40;max-width:90vw;box-shadow:0 4px 0 var(--card-edge),0 10px 24px #00000073;animation:pop .28s cubic-bezier(.2,1.5,.4,1)}.toast.warn{background:var(--yellow);box-shadow:0 4px 0 var(--yellow-dk),0 10px 24px #00000073}@keyframes pop{0%{transform:translate(-50%) translateY(14px) scale(.94);opacity:0}to{transform:translate(-50%) translateY(0) scale(1);opacity:1}}.grid-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}.opt{font-family:var(--font-display);border-radius:12px;padding:11px 8px;font-size:13px;font-weight:800;background:#fff6e317;color:var(--cream-dim);box-shadow:0 3px #00000052;text-align:center;transition:transform .06s ease,box-shadow .06s ease}.opt:hover{background:#fff6e326}.opt.on{background:var(--yellow);color:#3a2a00;box-shadow:0 3px 0 var(--yellow-dk);transform:translateY(0)}.opt:active{transform:translateY(3px);box-shadow:0 0 #00000052}.spinner{width:34px;height:34px;border:4px solid rgba(255,246,227,.2);border-top-color:var(--yellow);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:430px){.screen{padding:11px;gap:9px}.teams{grid-template-columns:1fr}.space{width:13px;height:13px}.word{font-size:18px;padding:12px 13px 12px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}