@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Sans:wght@500;600&display=swap";:root{--color-primary:#0f8;--color-on-primary:#0f0f11;--color-secondary:#ff3d8a;--color-on-secondary:#fff;--color-danger:#ff4d4d;--color-gold:#ffdb79;--color-bg:#fafafa;--color-surface:#fff;--color-surface-raised:#f1f1f3;--color-border:#d8d8dc;--color-text:#18181b;--color-text-muted:#5b5b63;--tile-bg:#fff;--tile-border:#d8d8dc;--tile-hit-bg:var(--color-primary);--tile-hit-text:var(--color-on-primary);--tile-miss-bg:#ececef;--tile-ghost-outline:#0f89;--tile-invalid-outline:var(--color-danger);--glow-primary:0 0 15px #0f86;--glow-secondary:0 0 15px #ff3d8a66;--glow-gold:0 0 18px #ffdb7973;--shadow-tile:0 4px 0 0 #0000002e;--highlight-tile-top:inset 0 1px 0 0 #ffffff1a;--font-headline:"Space Grotesk", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-label:"IBM Plex Sans", system-ui, sans-serif;--text-headline-lg:700 32px/40px var(--font-headline);--text-headline-mobile:700 28px/34px var(--font-headline);--text-tile:700 24px/32px var(--font-headline);--text-body:400 16px/24px var(--font-body);--text-label:500 13px/16px var(--font-label);--tracking-headline:-.02em;--tracking-label:.1em;--radius-chip:4px;--radius-base:12px;--radius-card:24px;--space-base:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--tile-gutter:6px;--safe-margin:20px;--board-max:440px;--motion-micro:.15s;--motion-meso:.3s;--motion-macro:.5s;--motion-stagger:60ms;--motion-ease-snap:cubic-bezier(.2, .9, .3, 1.2);--motion-ease-out:cubic-bezier(.16, 1, .3, 1)}:root[data-theme=dark],:root:not([data-theme=light]){--color-bg:#0f0f11;--color-surface:#1a1a1d;--color-surface-raised:#1f1f23;--color-border:#2a2a2e;--color-text:#e4e1e7;--color-text-muted:#9ca3af;--tile-bg:#1a1a1d;--tile-border:#2a2a2e;--tile-miss-bg:#141416;--shadow-tile:0 4px 0 0 #131317}@media (prefers-reduced-motion:reduce){:root{--motion-micro:.01ms;--motion-meso:.01ms;--motion-macro:.01ms;--motion-stagger:0s}}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font:var(--text-body);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:32px 32px;min-height:100dvh}#root{min-height:100dvh}button{font-family:var(--font-body);cursor:pointer;color:inherit;background:0 0;border:none}button:disabled{cursor:not-allowed}input{font-family:var(--font-body)}.app-shell{max-width:480px;padding:var(--space-lg) var(--safe-margin);flex-direction:column;min-height:100dvh;margin:0 auto;display:flex}.screen-title{font:var(--text-headline-mobile);letter-spacing:var(--tracking-headline);text-transform:uppercase;color:var(--color-primary);text-shadow:var(--glow-primary);text-align:center}.label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-muted)}.btn{justify-content:center;align-items:center;gap:var(--space-xs);border-radius:var(--radius-base);width:100%;transition:transform var(--motion-micro) var(--motion-ease-out), box-shadow var(--motion-micro) var(--motion-ease-out), opacity var(--motion-micro);padding:16px;font-size:17px;font-weight:700;display:inline-flex}.btn-primary{background:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow-tile), var(--glow-primary)}.btn-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #131317}.btn-secondary{border:2px solid var(--color-secondary);color:var(--color-secondary);background:0 0}.btn-secondary:active:not(:disabled){transform:translateY(2px)}.btn-ghost{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text)}.btn:disabled{opacity:.4}.btn-row{gap:var(--space-sm);display:flex}.field{border-radius:var(--radius-base);width:100%;transition:border-color var(--motion-micro), box-shadow var(--motion-micro);outline:none;padding:14px 16px;font-size:16px;background:var(--color-surface)!important;border:2px solid var(--color-border)!important;color:var(--color-text)!important}.field:focus{box-shadow:var(--glow-primary);border-color:var(--color-primary)!important}.field.invalid{border-color:var(--color-danger)!important}.field::placeholder{color:var(--color-text-muted)}.divider{align-items:center;gap:var(--space-sm);margin:var(--space-lg) 0;display:flex}.divider:before,.divider:after{content:"";background:var(--color-border);flex:1;height:1px}.code-tiles{gap:var(--space-xs);justify-content:center;display:flex}.code-tile{width:52px;height:56px;font:var(--text-tile);text-transform:uppercase;border-radius:var(--radius-base);background:var(--color-surface);border:2px solid var(--color-border);box-shadow:var(--shadow-tile), var(--highlight-tile-top);color:var(--color-text);text-align:center;justify-content:center;align-items:center;display:flex}.code-tile.lit{border-color:var(--color-primary);box-shadow:var(--glow-primary)}.code-tile input{text-align:center;width:100%;height:100%;color:var(--color-text);font:var(--text-tile);text-transform:uppercase;background:0 0;border:none;outline:none}.grid{--cells:8;grid-template-columns:repeat(var(--cells), 1fr);gap:var(--tile-gutter);width:min(100%, var(--board-max));aspect-ratio:1;margin:0 auto;display:grid}.grid.framed{padding:var(--space-sm);border-radius:var(--radius-card);border:1px solid var(--color-border);background:#ffffff04}.cell{aspect-ratio:1;border-radius:var(--radius-base);font:var(--text-tile);text-transform:uppercase;-webkit-user-select:none;user-select:none;background:var(--tile-bg);border:2px solid var(--tile-border);transition:background var(--motion-meso), border-color var(--motion-micro), box-shadow var(--motion-meso);justify-content:center;align-items:center;font-size:clamp(14px,4.5vw,24px);display:flex}.cell.empty{background:var(--tile-bg);opacity:.55}.cell.filled{background:var(--color-primary);color:var(--color-on-primary)}.cell.hit{background:var(--color-primary);color:var(--color-on-primary);box-shadow:var(--glow-primary), var(--highlight-tile-top)}.cell.miss{background:var(--tile-miss-bg);border-color:var(--tile-miss-bg)}.cell.miss:after{content:"";background:var(--color-text-muted);opacity:.5;border-radius:50%;width:5px;height:5px}.cell.ghost{border-color:var(--color-primary);color:var(--color-primary);animation:ghost-pop var(--motion-micro) var(--motion-ease-snap) 1;background:#00ff8814}.cell.ghost-invalid{border-color:var(--color-danger);color:var(--color-danger);animation:ghost-shake var(--motion-meso) var(--motion-ease-out) 1;background:#ff4d4d14}@keyframes ghost-pop{0%{transform:scale(.82)}to{transform:scale(1)}}@keyframes ghost-shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}}.cell.selectable{cursor:pointer}.cell.anchor{border-color:var(--color-secondary);box-shadow:var(--glow-secondary)}.cell-slot{aspect-ratio:1;min-width:0}.cell-slot .cell{width:100%;height:100%}.cell.tone-word{background:var(--color-gold);color:var(--color-on-primary);box-shadow:var(--glow-gold), var(--highlight-tile-top)}.cell.tone-penalty{background:var(--color-danger);color:#fff;box-shadow:0 0 16px #ff4d4d8c, var(--highlight-tile-top);animation:alarm-pulse .5s var(--motion-ease-out) 2}.cell.traced{animation:trace-glow var(--motion-macro) var(--motion-ease-out) 1}@keyframes trace-glow{0%{box-shadow:var(--glow-primary)}50%{border-color:var(--color-gold);box-shadow:0 0 24px #ffdb79cc}to{box-shadow:var(--glow-primary)}}@keyframes alarm-pulse{0%,to{box-shadow:0 0 8px #ff4d4d59}50%{box-shadow:0 0 26px #ff4d4dd9}}.grid.idle-pulse{animation:2.4s ease-in-out infinite idle-pulse}@keyframes idle-pulse{0%,to{border-color:var(--color-border);box-shadow:none}50%{border-color:#00ff8873;box-shadow:0 0 22px #00ff881f}}.mini-grid{--cells:8;grid-template-columns:repeat(8,1fr);gap:2px;width:132px;height:132px;display:grid}.mini-cell{background:var(--color-surface-raised);font:700 9px/1 var(--font-headline);text-transform:uppercase;-webkit-user-select:none;user-select:none;border-radius:3px;justify-content:center;align-items:center;display:flex}.mini-cell.word{color:var(--color-text-muted);background:#00ff882e}.mini-cell.found{background:var(--color-secondary);color:var(--color-on-secondary)}.rail{gap:var(--space-xs);margin:var(--space-md) 0;grid-template-columns:repeat(7,1fr);display:grid}.rail-key{border-radius:var(--radius-base);height:40px;font:var(--text-tile);text-transform:uppercase;background:var(--color-surface);border:1.5px solid var(--color-border);color:var(--color-text);box-shadow:var(--shadow-tile);transition:background var(--motion-micro), transform var(--motion-micro), box-shadow var(--motion-micro);justify-content:center;align-items:center;font-size:18px;display:flex}.rail-key:active:not(:disabled){transform:translateY(2px)}.rail-key.hit{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary);box-shadow:var(--glow-primary)}.rail-key.miss{background:var(--tile-miss-bg);color:var(--color-text-muted);border-color:var(--tile-miss-bg);box-shadow:none;opacity:.55}.rail-key.selected{border-color:var(--color-secondary);box-shadow:var(--glow-secondary)}.rail-key:disabled{cursor:not-allowed}.rail>:nth-child(22){grid-column-start:2}.chips{gap:var(--space-xs);flex-wrap:wrap;display:flex}.chip{border-radius:var(--radius-base);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;border:2px dashed var(--color-border);color:var(--color-text-muted);background:0 0;align-items:center;gap:6px;padding:10px 14px;display:inline-flex}.chip.placed{border-style:solid;border-color:var(--color-primary);color:var(--color-primary);background:#00ff8814}.chip.active{border-style:solid;border-color:var(--color-secondary);color:var(--color-secondary)}.status-bar{justify-content:space-between;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-md);flex-wrap:nowrap;display:flex}.turn-pill{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;border:2px solid var(--color-primary);color:var(--color-primary);box-shadow:var(--glow-primary);border-radius:9999px;flex-shrink:0;padding:6px 12px}.turn-pill.waiting{border-color:var(--color-border);color:var(--color-text-muted);box-shadow:none}.strikes{align-items:center;gap:4px;display:flex}.strike{color:var(--color-border);font-weight:700}.strike.lit{color:var(--color-danger);text-shadow:0 0 8px var(--color-danger)}.strikes.flash{animation:.5s ease-out 2 strike-flash}@keyframes strike-flash{0%,to{filter:none;transform:scale(1)}50%{filter:drop-shadow(0 0 10px var(--color-danger));transform:scale(1.25)}}.opponent-grid-wrap{position:relative}.banner-slot{z-index:10;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:10px;left:0;right:0}.event-banner{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;background:color-mix(in srgb, var(--color-surface) 94%, transparent);border:2px solid var(--color-border);color:var(--color-text);white-space:nowrap;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:9999px;padding:8px 20px;font-size:14px}.event-banner.hit{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--glow-primary)}.event-banner.word{border-color:var(--color-gold);color:var(--color-gold);box-shadow:var(--glow-gold)}.event-banner.miss{color:var(--color-text-muted)}.event-banner.alarm{border-color:var(--color-danger);color:var(--color-danger);box-shadow:0 0 14px #ff4d4d66}.event-banner.turn{padding:10px 28px;font-size:16px}.event-banner.turn-mine{border-color:var(--color-primary);color:var(--color-on-primary);background:var(--color-primary);box-shadow:var(--glow-primary)}.event-banner.turn-theirs{border-color:var(--color-border);color:var(--color-text-muted)}.mini-cell.popping{background:var(--color-secondary);z-index:1;box-shadow:0 0 8px #ff3d8ab3}.mini-cell.popping.tone-penalty{background:var(--color-danger);box-shadow:0 0 10px #ff4d4dcc}.confetti-layer{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.confetti-layer span{border-radius:2px;display:block;position:absolute;top:0}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-lg)}.toast-stack{bottom:var(--space-md);gap:var(--space-xs);z-index:50;flex-direction:column;width:min(92vw,440px);display:flex;position:fixed;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-base);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-tile);padding:12px 16px;font-size:14px}.toast.error{border-color:var(--color-danger);color:var(--color-danger)}.rejoin-banner{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);border-radius:var(--radius-base);background:var(--color-surface);border:1px solid var(--color-secondary);padding:12px 16px;display:flex}.spacer{flex:1}.stack{gap:var(--space-md);flex-direction:column;display:flex}.center{text-align:center}.muted{color:var(--color-text-muted)}.helper{color:var(--color-text-muted);text-align:center;font-size:13px}.helper.invalid{color:var(--color-danger)}.stats{gap:var(--space-sm);text-align:center;grid-template-columns:repeat(3,1fr);display:grid}.stat-value{font:var(--text-headline-mobile);color:var(--color-primary)}.stat-value .denom{color:var(--color-text-muted);font-size:16px}.help-fab{background:var(--color-surface);border:1px solid var(--color-border);width:32px;height:32px;color:var(--color-text);font:700 15px/1 var(--font-body);cursor:pointer;transition:border-color var(--motion-micro), box-shadow var(--motion-micro);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.help-fab:hover,.help-fab:focus-visible{border-color:var(--color-primary);box-shadow:var(--glow-primary);outline:none}.help-overlay{z-index:60;background:#0009;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.help-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);width:100%;max-width:420px;max-height:80vh;padding:var(--space-lg);overflow-y:auto}.help-rules{gap:var(--space-md);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.help-rules li{color:var(--color-text);padding-left:var(--space-sm);border-left:2px solid var(--color-border);font-size:15px;line-height:1.55}.help-rules li strong{color:var(--color-primary);letter-spacing:.02em;margin-bottom:4px;font-weight:700;display:block}.move-log{flex-direction:column;flex:1;gap:5px;min-width:0;display:flex}.move-log-title{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-muted);margin-bottom:4px}.move-log-empty{color:var(--color-text-muted);opacity:.6;font-size:12px;font-style:italic}.move-log-entry{color:var(--color-text);align-items:center;gap:6px;font-size:12px;line-height:1.3;display:flex}.move-log-dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.move-log-dot.hit{background:var(--color-primary)}.move-log-dot.miss{background:var(--color-text-muted);opacity:.6}.move-log-dot.word{background:var(--color-gold)}.move-log-dot.wrongWord{background:var(--color-text-muted);opacity:.6}.move-log-dot.penalty{background:var(--color-danger)}.score-pills-inline{flex-shrink:0;align-items:center;gap:6px;display:flex}.score-pill{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;background:var(--color-surface);border:1.5px solid var(--color-border);color:var(--color-text-muted);white-space:nowrap;border-radius:9999px;padding:4px 10px;font-size:11px}.score-pill.mine{border-color:var(--color-primary);color:var(--color-primary)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}