:root{--stone-950: #0e0d0b;--stone-900: #1a1814;--stone-800: #252220;--stone-700: #2e2b26;--stone-600: #3d3830;--stone-500: #56504a;--stone-400: #8a857b;--stone-300: #b8b2a8;--stone-200: #d8d2c8;--stone-100: #f0ece4;--copper-700: #2e6457;--copper-600: #3d8070;--copper-500: #5e9e8f;--copper-400: #7fbfb2;--copper-300: #a8d8d0;--copper-glow: rgba(94, 158, 143, .25);--amber-700: #7a4e1a;--amber-600: #a0672a;--amber-500: #c8873a;--amber-400: #dda862;--amber-300: #f0c88a;--amber-glow: rgba(200, 135, 58, .25);--rust-600: #8c3e20;--rust-500: #b85c3a;--rust-400: #d47a58;--rust-glow: rgba(184, 92, 58, .25);--bg: var(--stone-950);--bg-elevated: var(--stone-900);--surface: var(--stone-900);--surface-2: var(--stone-800);--border: var(--stone-700);--border-subtle: var(--stone-800);--fg: var(--stone-100);--fg-muted: var(--stone-400);--fg-dim: var(--stone-500);--accent: var(--copper-500);--accent-glow: var(--copper-glow);--rival: var(--amber-500);--rival-glow: var(--amber-glow);--danger: var(--rust-500);--piece-I: #5e9e8f;--piece-O: #c8873a;--piece-T: #9b6fa0;--piece-S: #7a9e5e;--piece-Z: #b85c3a;--piece-J: #4a7aaa;--piece-L: #c8a43a;--font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;--font-mono: "Space Grotesk", "Courier New", monospace;--text-xs: .625rem;--text-sm: .75rem;--text-base: .875rem;--text-md: 1rem;--text-lg: 1.25rem;--text-xl: 1.75rem;--text-2xl: 2.5rem;--text-3xl: 3.75rem;--text-4xl: 5rem;--weight-light: 300;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--leading-tight: 1.1;--leading-snug: 1.25;--leading-normal: 1.5;--tracking-tight: -.02em;--tracking-normal: 0em;--tracking-wide: .06em;--tracking-wider: .12em;--tracking-widest: .2em;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px;--space-24: 96px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-pill: 999px;--glow-accent: 0 0 16px var(--copper-glow), 0 0 40px rgba(94,158,143,.1);--glow-rival: 0 0 16px var(--amber-glow), 0 0 40px rgba(200,135,58,.1);--glow-danger: 0 0 16px var(--rust-glow);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-standard: cubic-bezier(.4, 0, .2, 1);--duration-fast: .12s;--duration-base: .2s;--duration-slow: .38s;--z-base: 0;--z-raised: 10;--z-overlay: 100;--z-modal: 200;--z-top: 999}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%;overscroll-behavior:none;touch-action:manipulation}body{font-family:var(--font-sans);font-size:1rem;font-weight:400;line-height:1.5;color:var(--fg);background:var(--bg);height:100%;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}#app{position:relative;width:100vw;height:100vh;overflow:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,.035) 3px,rgba(0,0,0,.035) 4px)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s var(--ease-standard),transform .18s var(--ease-standard);transform:translateY(6px)}.screen.active{opacity:1;pointer-events:all;transform:translateY(0)}.btn{font-family:var(--font-sans);font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .12s ease,transform .12s ease,box-shadow .12s ease;text-decoration:none;white-space:nowrap}.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97);filter:brightness(.9)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:#0e0d0b;font-size:13px;padding:13px 36px;border-radius:var(--radius-sm);box-shadow:0 0 20px #5e9e8f4d}.btn-rival{background:var(--rival);color:#0e0d0b;font-size:13px;padding:13px 36px;border-radius:var(--radius-sm);box-shadow:0 0 20px #c8873a47}.btn-ghost{background:transparent;color:var(--fg-muted);font-size:12px;padding:12px 28px;border-radius:var(--radius-sm);border:1px solid var(--border)}.btn-ghost:hover{color:var(--fg);border-color:var(--stone-500)}.btn-sm{background:var(--surface-2);color:var(--fg-muted);font-size:11px;padding:7px 14px;border-radius:var(--radius-xs);border:1px solid var(--border)}.input{font-family:var(--font-sans);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--surface-2);border:1px solid var(--border);color:var(--fg);padding:12px 16px;border-radius:var(--radius-sm);outline:none;width:100%;transition:border-color .15s ease,box-shadow .15s ease;-webkit-text-size-adjust:100%;touch-action:manipulation}.input.p1:focus{border-color:var(--accent);box-shadow:0 0 0 3px #5e9e8f1f}.input.p2:focus{border-color:var(--rival);box-shadow:0 0 0 3px #c8873a1f}.input::placeholder{color:var(--fg-dim);font-weight:400;text-transform:none;letter-spacing:0}h1{font-size:3.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.1}h2{font-size:2.5rem;font-weight:700;line-height:1.1}h3{font-size:1.75rem;font-weight:600;line-height:1.25}p{color:var(--fg-muted);line-height:1.5}#screen-htp{overflow-y:auto;align-items:flex-start}#screen-online{overflow-y:auto;align-items:flex-start;padding:12px 0 env(safe-area-inset-bottom,24px)}input,textarea{-webkit-user-select:text;user-select:text}@keyframes mc-ripple{0%{transform:scale(0);opacity:.55}to{transform:scale(4);opacity:0}}@keyframes mc-breathe{0%,to{box-shadow:0 0 18px 2px #5e9e8f2e,inset 0 0 12px #0009}50%{box-shadow:0 0 32px 6px #5e9e8f52,inset 0 0 12px #0009}}@keyframes mc-home-pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.35);opacity:0}}@keyframes mc-glow-a{0%,to{box-shadow:0 5px #245f4e,0 8px 18px #0009,inset 0 1px 2px #ffffff61}50%{box-shadow:0 5px #245f4e,0 8px 18px #0009,inset 0 1px 2px #ffffff61,0 0 10px 2px #5e9e8f47}}@keyframes mc-glow-b{0%,to{box-shadow:0 5px #5a380e,0 8px 18px #0009,inset 0 1px 2px #ffffff61}50%{box-shadow:0 5px #5a380e,0 8px 18px #0009,inset 0 1px 2px #ffffff61,0 0 10px 2px #c8873a47}}@keyframes mc-flash{0%{opacity:.7}to{opacity:0}}@keyframes mc-score-fly{0%{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-32px) scale(1.3);opacity:0}}