@import"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800;900&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:#020817;font-family:Space Mono,Courier New,monospace;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-overflow-scrolling:touch;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);box-sizing:border-box;width:100%}html,body,#root{min-height:100dvh;margin:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}#root{width:100%;display:flex;flex-direction:column}.game-screen-container{min-height:100dvh;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom))}.menu-screen-container{min-height:100dvh;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.fit-screen{min-height:100dvh;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}.fit-screen>main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}.board-container{touch-action:none}button,[role=button],.mode-card,.cell{touch-action:manipulation}@media (max-width: 900px){.vs-grid{grid-template-columns:1fr!important;grid-template-rows:auto auto!important}.vs-board{width:min(42vh,90vw)!important}}.font-syne{font-family:Syne,Space Mono,monospace}input,button{font-family:inherit}input:focus{outline:none}button:active{transform:scale(.96)}button:focus:not(:focus-visible),a:focus:not(:focus-visible),[role=button]:focus:not(:focus-visible){outline:none!important;box-shadow:none!important}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.mode-card{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;outline:none!important;box-shadow:none!important;background:#080f1e!important;border:1px solid #1e293b!important;transition:background .15s,border-color .15s,color .15s!important}.mode-card:focus,.mode-card:focus-within,.mode-card:active,.mode-card:hover{outline:none!important;box-shadow:none!important}.mode-card.selected{background:#3b82f61a!important;border-color:#3b82f68c!important}.mode-card:not(.selected):focus,.mode-card:not(.selected):focus-within,.mode-card:not(.selected):active,.mode-card:not(.selected):hover{background:#080f1e!important;border-color:#1e293b!important}.mode-card:focus:not(:focus-visible){border-color:#1e293b!important;outline:none!important;box-shadow:none!important}.av-btn *,.avatar-btn *,.icon-btn *{pointer-events:none!important}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#0f172a}::-webkit-scrollbar-thumb{background:#334155;border-radius:2px}@keyframes heartbeat{0%{transform:scale(1)}14%{transform:scale(1.25)}28%{transform:scale(1)}42%{transform:scale(1.2)}70%{transform:scale(1)}}@keyframes fadeInSarah{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes floatPetal{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-100vh) rotate(360deg);opacity:0}}.sarah-heart{animation:heartbeat 1.2s ease-in-out infinite;display:inline-block;filter:drop-shadow(0 0 30px rgba(248,113,113,.8))}.sarah-text{animation:fadeInSarah 1.2s cubic-bezier(.22,1,.36,1) forwards}.rose-petal{position:fixed;pointer-events:none;animation:floatPetal linear forwards;font-size:20px;z-index:100000}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:0}}.confetti-piece{position:absolute;top:-20px;border-radius:50%;animation-name:confettiFall;animation-timing-function:linear;animation-fill-mode:forwards}:root,[data-theme=dark]{--bg: #020817;--bg-card: rgba(15,23,42,.96);--bg-panel: #080f20;--bg-cell: #0a1628;--bg-input: #0f172a;--border: #1e293b;--border-bold: #334155;--border-inner: #1e293b;--border-box: #334155;--text-main: #e2e8f0;--text-muted: #64748b;--text-dim: #334155;--text-given: #60a5fa;--text-player: #93c5fd;--text-error: #f87171;--accent: #3b82f6;--accent2: #6366f1;--board-bg: #020817;--cell-bg: transparent;--cell-given: #60a5fa;--cell-player: #93c5fd;--cell-correct: #4ade80;--cell-selected:#1e3a5f;--cell-highlight:rgba(30,41,59,.7)}[data-theme=light]{--bg-cell: #ffffff;--border-inner: #d0d8e0;--border-box: rgba(0,0,0,.45);--text-given: #0f172a;--text-player: #2563eb;--text-error: #ef4444;--cell-bg: #ffffff;--cell-given: #0f172a;--cell-player: #2563eb;--cell-correct: #16a34a;--cell-selected:#dbeafe;--cell-highlight:#eef2f7;--board-bg: #f0f4f8}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) translate(-50%)}to{opacity:1;transform:translateY(0) translate(-50%)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes sq-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.08)}}@keyframes solved{0%{transform:scale(.9);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes popIn{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.fade-in{animation:fadeIn .25s ease}.slide-up{animation:slideUp .3s ease}.solved-anim{animation:solved .4s ease}.spinner{width:32px;height:32px;border:3px solid #1e293b;border-top-color:#3b82f6;border-radius:50%;animation:spin .7s linear infinite}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:1px}.note-num{display:flex;align-items:center;justify-content:center;font-size:8px;line-height:1;color:#4a6a8a}@keyframes wavePop{0%{transform:scale(1);filter:brightness(1)}30%{transform:scale(1.14);filter:brightness(2.2);box-shadow:inset 0 0 0 2px var(--accent, #60a5fa)}65%{transform:scale(.95);filter:brightness(1.1)}to{transform:scale(1);filter:brightness(1)}}.wave-cell{animation:wavePop .55s ease both;z-index:2;position:relative}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0) scale(1);opacity:1}75%{opacity:1}to{transform:translateY(105vh) rotate(600deg) scale(.6);opacity:0}}.confetti-piece{position:fixed;top:-12px;pointer-events:none;z-index:900;animation:confettiFall linear forwards}.board-cell{background-color:#080f1e;color:#60a5fa}.board-cell.box-even{background-color:#101c2e}.board-cell.cell-highlight{background-color:#1a2740!important}.board-cell.cell-conflict{background-color:#dc262640!important}.board-cell.cell-selected{background-color:#1e3a5f!important}.board-cell.cell-correct{color:#4ade80}[data-theme=light] .board-cell{background-color:#fff;color:#0f172a;border-color:#d0d8e0}[data-theme=light] .board-cell.box-even{background-color:#f1f5f9}[data-theme=light] .board-cell.cell-highlight{background-color:#e0e8f0!important}[data-theme=light] .board-cell.cell-conflict{background-color:#dc262626!important}[data-theme=light] .board-cell.cell-selected{background-color:#dbeafe!important}[data-theme=light] .board-cell.cell-correct{color:#16a34a}[data-theme=light] .board-cell.player{color:#2563eb}.board-cell{border-right:1px solid #1e293b;border-bottom:1px solid #1e293b;border-top:none;border-left:none}.board-cell.box-border-r{border-right:2px solid #334155}.board-cell.box-border-b{border-bottom:2px solid #334155}.board-cell.vs-divider-b{border-bottom:3px solid #f97316}[data-theme=light] .board-cell{border-right-color:#d0d8e0;border-bottom-color:#d0d8e0}[data-theme=light] .board-cell.box-border-r{border-right-color:#b0bcc8}[data-theme=light] .board-cell.box-border-b{border-bottom-color:#b0bcc8}.board-desktop{border:2px solid #334155!important;background:#060d1a}[data-theme=light] .board-desktop{border:2px solid #b0bcc8!important;background:#f8fafc}@media (min-width: 768px){.board-desktop{width:min(560px,90vw)!important}}.chat-panel{width:100%;background:var(--bg-panel, #080f20);border:1px solid var(--border-inner, #1a2744);border-radius:12px;overflow:hidden}.chat-messages{height:140px;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.chat-messages::-webkit-scrollbar{width:3px}.chat-messages::-webkit-scrollbar-thumb{background:var(--border, #1e293b)}.chat-input-row{display:flex;border-top:1px solid var(--border-inner, #1a2744)}.chat-input{flex:1;background:transparent;border:none;color:var(--text-main, #cbd5e1);font-size:12px;padding:9px 12px;outline:none}.chat-input::placeholder{color:var(--text-dim, #334155)}.chat-send-btn{background:none;border:none;border-left:1px solid var(--border-inner, #1a2744);color:var(--accent, #3b82f6);padding:9px 14px;cursor:pointer;font-size:14px;font-weight:700;transition:background .15s}.chat-send-btn:hover{background:#3b82f61a}.reaction-strip{display:flex;gap:4px;width:100%;justify-content:center;flex-wrap:wrap}.reaction-btn{background:var(--bg-panel, #080f20);border:1px solid var(--border, #1e293b);border-radius:20px;padding:5px 9px;font-size:18px;cursor:pointer;transition:transform .12s,border-color .12s;line-height:1}.reaction-btn:hover{transform:scale(1.2);border-color:var(--accent, #3b82f6)}.reaction-btn:active{transform:scale(.9)}@keyframes reactionFloat{0%{transform:translateY(0) scale(.5);opacity:0}15%{transform:translateY(-8px) scale(1.2);opacity:1}80%{opacity:1}to{transform:translateY(-60px) scale(.8);opacity:0}}.reaction-bubble{position:fixed;pointer-events:none;z-index:800;font-size:28px;animation:reactionFloat 2.5s ease forwards;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}.vs-divider{height:3px;background:linear-gradient(90deg,#f97316,#ef4444,#f97316);width:100%;border-radius:2px;box-shadow:0 0 12px #f9731699;margin:2px 0}.vs-team-a-zone{outline:2px solid rgba(249,115,22,.25)!important;outline-offset:-2px}.vs-team-b-zone{outline:2px solid rgba(59,130,246,.25)!important;outline-offset:-2px}.pro-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;background:linear-gradient(135deg,#f59e0b26,#fbbf2426);border:1px solid rgba(245,158,11,.4);border-radius:20px;font-size:8px;font-weight:700;color:#f59e0b;letter-spacing:1px;text-transform:uppercase}.locked-feature{position:relative;cursor:pointer}.locked-feature:after{content:"🔒";position:absolute;top:-6px;right:-6px;font-size:10px}.results-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020817eb;display:flex;align-items:center;justify-content:center;z-index:500;padding:20px;animation:fadeIn .35s ease}.results-card{background:#050e1e;border:1px solid #0f1f3a;border-radius:24px;padding:32px 28px;max-width:380px;width:100%;text-align:center;box-shadow:0 24px 80px #000000b3;max-height:90vh;overflow-y:auto}.theme-popover{position:absolute;top:100%;right:0;margin-top:6px;background:#050e1e;border:1px solid #1a2744;border-radius:12px;padding:12px;z-index:200;display:flex;flex-direction:column;gap:6px;min-width:160px;box-shadow:0 16px 40px #0009;animation:fadeIn .15s ease}.theme-option{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .15s;font-size:12px;font-weight:700;color:#94a3b8;background:transparent;text-align:left}.theme-option:hover{background:#3b82f61a;color:#e2e8f0}.theme-option.active{border-color:#3b82f6;color:#60a5fa;background:#3b82f614}.theme-swatch{width:16px;height:16px;border-radius:4px;flex-shrink:0}.upgrade-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020817cc;display:flex;align-items:flex-end;justify-content:center;z-index:600;padding:20px}.upgrade-sheet{background:#050e1e;border:1px solid #1a2744;border-radius:20px;padding:28px 24px;max-width:400px;width:100%;animation:fadeIn .25s ease;margin-bottom:env(safe-area-inset-bottom,0px)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@media (max-width: 600px){.numpad-btn{min-height:44px!important;font-size:18px!important}.numpad-action{min-height:40px!important}}@media (max-width: 360px){.header-logo{display:none!important}}.board-desktop{width:clamp(260px,min(94vw,92vh - 220px),440px)!important;max-width:100%!important}@media (min-width: 768px){.board-desktop{width:clamp(320px,min(560px,92vh - 260px),560px)!important}}@media (max-width: 500px){.board-desktop{width:min(94vw,380px)!important}}@media (max-width: 400px){.board-desktop{width:92vw!important}}@media (max-height: 720px){.numpad-btn{min-height:36px!important;font-size:15px!important;padding:6px!important}.numpad-action{min-height:32px!important;font-size:11px!important;padding:5px!important}}@media (max-height: 640px){.numpad-btn{min-height:32px!important;font-size:14px!important}.numpad-action{min-height:28px!important;font-size:10px!important}}.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;justify-items:center;align-items:start;width:100%;max-width:980px;margin:0 auto}@media (max-width: 900px){.vs-grid{grid-template-columns:1fr!important;gap:14px!important}}.vs-panel{width:100%;max-width:min(440px,45vw);display:flex;flex-direction:column;gap:6px}@media (max-width: 900px){.vs-panel{max-width:min(94vw,420px)!important}}.emote-bar{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:6px 4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;width:100%;justify-content:center}.emote-bar::-webkit-scrollbar{display:none;width:0;height:0}.emote-btn{flex-shrink:0;width:38px;height:38px;font-size:20px;border-radius:50%;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,background .15s;line-height:1;padding:0;color:inherit}.emote-btn:hover{background:#ffffff1a}.emote-btn:active{transform:scale(.88)}@keyframes emoteBurst{0%{transform:scale(1)}40%{transform:scale(1.4)}to{transform:scale(1)}}.emote-burst{animation:emoteBurst .8s ease both;-webkit-animation:emoteBurst .8s ease both}.pause-btn,.timer-reset-btn,.timer-btn{background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:4px 6px!important;color:#f97316;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;outline:none;transition:color .15s,transform .1s}.pause-btn.paused{color:#10b981!important}.pause-btn:active,.timer-reset-btn:active{transform:scale(.9)}.pause-btn:hover,.timer-reset-btn:hover{color:#fb923c;transform:scale(1.05)}.pause-btn.paused:hover{color:#34d399!important}.pause-btn:focus,.timer-reset-btn:focus{outline:none}.pause-btn:focus-visible,.timer-reset-btn:focus-visible{outline:2px solid #60a5fa;outline-offset:2px;border-radius:4px}@keyframes cellGlowPulse{0%,to{box-shadow:inset 0 0 #22c55e00}50%{box-shadow:inset 0 0 12px 3px #22c55e59}}.cell-glow{animation:cellGlowPulse .5s ease both;-webkit-animation:cellGlowPulse .5s ease both}button,[role=button]{-webkit-tap-highlight-color:transparent}.chat-panel{padding-bottom:env(safe-area-inset-bottom,0px)}.spectator-tag{font-size:8px;color:#64748b;margin-left:2px}@keyframes completionPulse{0%{box-shadow:0 0 #4ade8000 inset,0 0 #4ade8000;background-color:#4ade8000}35%{box-shadow:0 0 18px 6px #4ade808c inset,0 0 18px 4px #4ade8073;background-color:#4ade802e}70%{box-shadow:0 0 12px 4px #4ade8059 inset,0 0 12px 2px #4ade8040;background-color:#4ade801a}to{box-shadow:0 0 #4ade8000 inset,0 0 #4ade8000;background-color:#4ade8000}}@-webkit-keyframes completionPulse{0%{box-shadow:0 0 #4ade8000 inset;background-color:#4ade8000}35%{box-shadow:0 0 18px 6px #4ade808c inset;background-color:#4ade802e}70%{box-shadow:0 0 12px 4px #4ade8059 inset;background-color:#4ade801a}to{box-shadow:0 0 #4ade8000 inset;background-color:#4ade8000}}.completion-pulse{animation:completionPulse 1.5s cubic-bezier(.4,0,.2,1) both;-webkit-animation:completionPulse 1.5s cubic-bezier(.4,0,.2,1) both;z-index:3}@keyframes completionSweep{0%{background-color:#38bdf800;transform:scale(1)}40%{background-color:#38bdf88c;transform:scale(1.05)}to{background-color:#38bdf800;transform:scale(1)}}@-webkit-keyframes completionSweep{0%{background-color:#38bdf800;-webkit-transform:scale(1)}40%{background-color:#38bdf88c;-webkit-transform:scale(1.05)}to{background-color:#38bdf800;-webkit-transform:scale(1)}}.completion-sweep{animation:completionSweep .45s cubic-bezier(.34,1.56,.64,1) both;-webkit-animation:completionSweep .45s cubic-bezier(.34,1.56,.64,1) both;z-index:3}@keyframes completionRain{0%{transform:translateY(-110%);opacity:0}20%{opacity:1}60%{transform:translateY(0);opacity:.85}to{transform:translateY(110%);opacity:0}}@-webkit-keyframes completionRain{0%{-webkit-transform:translateY(-110%);opacity:0}20%{opacity:1}60%{-webkit-transform:translateY(0%);opacity:.85}to{-webkit-transform:translateY(110%);opacity:0}}.completion-rain{position:relative;z-index:3}.completion-rain:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,#a855f700,#a855f78c 40%,#ec48998c 60%,#ec489900);mix-blend-mode:screen;animation:completionRain .85s cubic-bezier(.6,0,.4,1) both;-webkit-animation:completionRain .85s cubic-bezier(.6,0,.4,1) both}