:root{--bg:#0a0b10;--surface:#13151e;--surface-2:#1a1d2a;--border:#ffffff0f;--text:#e2e4ea;--text-muted:#6b7280;--text-dim:#3d4250;--player:#4ecdc4;--player-dim:#4ecdc426;--opponent:#ff6b6b;--opponent-dim:#ff6b6b26;--accent:#4ecdc4;--accent-hover:#5de0d7;--hit:#ff9f43;--gold:gold;--purple:#8b5cf6;--tri-a:#1e2030;--tri-b:#282b3a;--bar-bg:#111320;--glass:#13151ecc;--glass-border:#ffffff14;--radius:16px;--radius-sm:8px;--radius-pill:9999px;--shadow:0 8px 32px #0006;--shadow-sm:0 2px 8px #0000004d;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:"SF Mono", "Fira Code", monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--error:#ff3c3c80;--error-dim:#ff3c3c1f;--btn-shadow:0 4px 0 #0000004d;--btn-shadow-sm:0 2px 0 #0000004d;--card-face:#fff;--card-back:#2563eb;--card-back-border:#1d4ed8;--card-back-pattern:#ffffff26;--card-border:#cbd5e1;--card-red:#dc2626;--card-black:#1e293b;--card-empty:#ffffff26;--card-highlight:#22c55e;--board-bg:#0f5132}[data-theme=light]{--bg:#f0f1f5;--surface:#fff;--surface-2:#e8eaef;--border:#00000014;--text:#1a1d2a;--text-muted:#6b7280;--text-dim:#9ca3af;--player:#0ea5a0;--player-dim:#0ea5a01f;--opponent:#e84545;--opponent-dim:#e845451f;--accent:#0ea5a0;--accent-hover:#0d9590;--tri-a:#d6d9e2;--tri-b:#c5c9d4;--bar-bg:#bcc0cc;--glass:#ffffffd9;--glass-border:#00000014;--btn-shadow:0 4px 0 #0000001f;--btn-shadow-sm:0 2px 0 #0000001a;--card-face:#fff;--card-back:#3b82f6;--card-back-border:#2563eb;--card-border:#d1d5db;--card-red:#dc2626;--card-black:#1e293b;--card-empty:#0000001a;--card-highlight:#16a34a;--board-bg:#16a34a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit}.app{-webkit-user-select:none;user-select:none;flex-direction:column;height:100dvh;display:flex}.top-bar{background:var(--glass);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.player-info{align-items:center;gap:10px;min-width:0;display:flex}.player-info.right{flex-direction:row-reverse}.player-info.right .player-meta{text-align:right}.avatar{border:2px solid var(--border);width:34px;height:34px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:700;transition:border-color .3s,box-shadow .3s;display:flex}.avatar.active{border-color:var(--player);color:var(--player);box-shadow:0 0 12px #4ecdc44d}.avatar.active.opp{border-color:var(--opponent);color:var(--opponent);box-shadow:0 0 12px #ff6b6b4d}.player-name{color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;font-size:10px;font-weight:600}.player-score{color:var(--text);font-variant-numeric:tabular-nums;font-size:18px;font-weight:700;line-height:1}.match-info{text-align:center;flex-shrink:0}.match-label{color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;font-size:9px}.pip-row{justify-content:center;gap:4px;margin-top:2px;display:flex}.pip-count{font-variant-numeric:tabular-nums;border-radius:8px;padding:1px 6px;font-size:10px;font-weight:600}.pip-count.you{background:var(--player-dim);color:var(--player)}.pip-count.opp{background:var(--opponent-dim);color:var(--opponent)}.board-area{flex:1;justify-content:center;align-items:center;min-height:0;padding:8px;display:flex;overflow:hidden}.board-wrap{aspect-ratio:680/580;width:100%;max-width:680px;max-height:100%;position:relative}.board-svg{border-radius:var(--radius);filter:drop-shadow(0 12px 40px #00000080);touch-action:none;width:100%;height:100%}[data-theme=light] .board-svg{filter:drop-shadow(0 8px 32px #0000002e)}.checker-group{cursor:grab;transition:filter .2s}.checker-group:active{cursor:grabbing}.checker-group.dragging{filter:drop-shadow(0 6px 20px #00000080)}@keyframes dest-pulse{0%,to{opacity:.5}50%{opacity:1}}.dest-glow{animation:1.5s ease-in-out infinite dest-pulse}@keyframes ai-move-glow{0%{opacity:0;r:10}30%{opacity:.8}to{opacity:.5}}.ai-highlight{animation:.4s ease-out forwards ai-move-glow}@keyframes dice-in{0%{opacity:0;transform:scale(0)rotate(-180deg)}60%{opacity:1;transform:scale(1.15)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}.die-group{animation:.5s cubic-bezier(.34,1.56,.64,1) both dice-in}.die-group:nth-child(2){animation-delay:80ms}.die-group:nth-child(3){animation-delay:.16s}.die-group:nth-child(4){animation-delay:.24s}@keyframes thinking-dots{0%,80%,to{opacity:.3}40%{opacity:1}}.thinking-dot{animation:1.4s ease-in-out infinite thinking-dots}.thinking-dot:nth-child(2){animation-delay:.16s}.thinking-dot:nth-child(3){animation-delay:.32s}.action-bar{background:var(--glass);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);z-index:10;flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:10px 16px;display:flex}.action-btn{height:42px;font-family:var(--font);cursor:pointer;color:#fff;letter-spacing:.3px;border:none;border-radius:12px;justify-content:center;align-items:center;gap:6px;padding:0 20px;font-size:14px;font-weight:700;transition:all .1s;display:flex;position:relative}.action-btn:active{transform:translateY(2px);box-shadow:none!important}.action-btn.primary{background:linear-gradient(180deg, var(--accent) 0%, #3ab5ad 100%);color:#0a0b10;box-shadow:var(--btn-shadow), 0 0 20px #4ecdc426}.action-btn.primary:hover{background:linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);box-shadow:var(--btn-shadow), 0 0 24px #4ecdc440}.action-btn.secondary{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--glass-border);box-shadow:var(--btn-shadow-sm)}.action-btn.secondary:hover{color:var(--text);background:#2a2d3a}.action-btn.icon-only{width:42px;padding:0}.seed-label{color:var(--text-dim);cursor:pointer;font-family:SF Mono,Fira Code,monospace;font-size:10px;transition:color .2s}.seed-label:hover{color:var(--text-muted)}.overlay-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay-card{background:var(--surface);border:1px solid var(--glass-border);text-align:center;border-radius:20px;width:90%;max-width:360px;padding:32px 28px;animation:.4s cubic-bezier(.34,1.56,.64,1) modal-bounce;box-shadow:0 16px 48px #00000080,0 0 0 1px #ffffff0d}.overlay-card h2{letter-spacing:.5px;margin-bottom:4px;font-size:22px;font-weight:900}.overlay-card p{color:var(--text-muted);margin-bottom:24px;font-size:13px}@keyframes modal-bounce{0%{opacity:0;transform:scale(.8)translateY(20px)}50%{transform:scale(1.03)translateY(-4px)}70%{transform:scale(.98)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes progress-pulse{0%,to{opacity:1}50%{opacity:.75}}@keyframes bounce-in{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.08)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes card-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes count-up-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}to{transform:scale(1)}}@keyframes badge-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes confetti-pop{0%{opacity:1;transform:scale(0)}50%{opacity:.8;transform:scale(1.2)}to{opacity:0;transform:scale(.8)}}@keyframes glow-ring{0%,to{box-shadow:0 0 4px,0 0 8px}50%{box-shadow:0 0 8px,0 0 16px}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes title-glow{0%,to{text-shadow:0 0 20px #4ecdc44d}50%{text-shadow:0 0 30px #4ecdc480,0 0 60px #4ecdc433}}@keyframes icon-bounce{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-down{0%{opacity:0;transform:translate(-50%,-100px)}to{opacity:1;transform:translate(-50%)}}@keyframes pulse-ring{0%{box-shadow:0 0 #4ecdc466}70%{box-shadow:0 0 0 8px #4ecdc400}to{box-shadow:0 0 #4ecdc400}}@keyframes win-scale{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.win-overlay{animation:.5s cubic-bezier(.34,1.56,.64,1) both win-scale}.game-card{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;position:relative;overflow:hidden}.game-card:hover{transform:translateY(-3px)scale(1.015);box-shadow:0 8px 24px #0000004d}.game-card:active{transform:translateY(1px)scale(.98);box-shadow:0 2px 8px #0003}[data-theme=light] .game-card:hover{box-shadow:0 8px 24px #0000001f}.challenge-card{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.challenge-card:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 24px #0000004d}.challenge-card:active{transform:scale(.97);box-shadow:0 2px 8px #0003}[data-theme=light] .challenge-card:hover{box-shadow:0 8px 24px #0000001f}.progress-bar-fill{position:relative;overflow:hidden}.progress-bar-fill:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffff4d 50%,#0000 100%) 0 0/200% 100%;animation:2s ease-in-out infinite shimmer;position:absolute;inset:0}.number-circle{transition:all .3s cubic-bezier(.34,1.56,.64,1)}.number-circle.completed{animation:2s ease-in-out infinite glow-ring}.difficulty-badge{animation:3s ease-in-out infinite badge-pulse}.stat-badge{animation:.5s ease-out both slide-up;position:relative}.match-selector{justify-content:center;gap:8px;margin-bottom:24px;display:flex}.match-option{border:2px solid var(--border);width:44px;height:44px;color:var(--text-muted);font-size:15px;font-weight:800;font-family:var(--font);cursor:pointer;box-shadow:var(--btn-shadow-sm);background:0 0;border-radius:12px;transition:all .2s cubic-bezier(.34,1.56,.64,1)}.match-option:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}.match-option:active{box-shadow:none;transform:translateY(1px)}.match-option.active{border-color:var(--accent);background:linear-gradient(180deg, var(--accent) 0%, #3ab5ad 100%);color:var(--bg);box-shadow:var(--btn-shadow), 0 0 16px #4ecdc433}.auth-input{border:2px solid var(--border);background:var(--surface-2);width:100%;height:44px;color:var(--text);font-family:var(--font);border-radius:12px;outline:none;padding:0 14px;font-size:14px;font-weight:500;transition:border-color .2s,box-shadow .2s}.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #4ecdc426}.auth-input::placeholder{color:var(--text-dim)}@media (height<=650px){.top-bar,.action-bar{padding:6px 12px}.avatar{width:28px;height:28px;font-size:11px}.player-score{font-size:15px}.player-name{font-size:9px}}@media (width<=420px){.top-bar{padding:8px 12px}.player-info{gap:6px}.avatar{width:28px;height:28px;font-size:11px}.player-score{font-size:15px}.match-label{font-size:8px}.pip-count{padding:1px 4px;font-size:9px}.action-btn{height:38px;padding:0 16px;font-size:13px}.action-btn.icon-only{width:38px}}