*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0d1117;--bg-deep: #060910;--frame-dark: #1c1f26;--frame-mid: #2d323c;--frame-light: #4a5068;--frame-highlight: #6e7590;--cell-bg: #0f1318;--cell-given: #ffffff;--cell-input: #22d3ee;--cell-error: #f43f5e;--cell-selected: rgba(139, 92, 246, .45);--cell-related: rgba(34, 211, 238, .06);--accent-1: #8b5cf6;--accent-2: #22d3ee;--accent-3: #f59e0b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border: #1e293b;--border-box: #475569;--glow-purple: rgba(139, 92, 246, .6);--glow-cyan: rgba(34, 211, 238, .4);--glass-bg: rgba(15, 18, 25, .6);--glass-border: rgba(255, 255, 255, .06);--transition-smooth: cubic-bezier(.4, 0, .2, 1)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-deep);color:var(--text-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;opacity:.12;pointer-events:none;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}.particles-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;pointer-events:none}.bg-animation{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(120px);will-change:transform}.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,.8),transparent 70%);top:-200px;left:-150px;opacity:.3;animation:drift1 30s ease-in-out infinite}.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(8,145,178,.7),transparent 70%);bottom:-150px;right:-100px;opacity:.25;animation:drift2 38s ease-in-out infinite}.orb-3{width:700px;height:700px;background:radial-gradient(circle,rgba(30,27,75,.9),transparent 60%);top:40%;left:30%;opacity:.35;animation:drift3 45s ease-in-out infinite}.orb-4{width:400px;height:400px;background:radial-gradient(circle,rgba(190,24,93,.6),transparent 70%);top:70%;left:-50px;opacity:.15;animation:drift4 35s ease-in-out infinite}.orb-5{width:350px;height:350px;background:radial-gradient(circle,rgba(6,95,70,.6),transparent 70%);top:5%;right:10%;opacity:.2;animation:drift5 40s ease-in-out infinite}@keyframes drift1{0%,to{transform:translate(0) scale(1)}25%{transform:translate(120px,80px) scale(1.15)}50%{transform:translate(60px,160px) scale(.9)}75%{transform:translate(-50px,100px) scale(1.1)}}@keyframes drift2{0%,to{transform:translate(0) scale(1)}25%{transform:translate(-80px,-60px) scale(1.12)}50%{transform:translate(-140px,30px) scale(.88)}75%{transform:translate(-60px,-80px) scale(1.05)}}@keyframes drift3{0%,to{transform:translate(0) scale(1)}33%{transform:translate(90px,-70px) scale(1.15)}66%{transform:translate(-60px,-100px) scale(.9)}}@keyframes drift4{0%,to{transform:translate(0) scale(1)}30%{transform:translate(100px,-40px) scale(1.1)}60%{transform:translate(50px,-90px) scale(.95)}}@keyframes drift5{0%,to{transform:translate(0) scale(1);opacity:.2}50%{transform:translate(-80px,70px) scale(1.2);opacity:.12}}#app{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:20px;width:100%;max-width:1140px}.game-layout{display:flex;flex-direction:row-reverse;align-items:center;gap:40px;width:100%}.game-panel{flex:1;min-width:0}.game-title-bar{display:flex;align-items:baseline;gap:14px;margin-bottom:14px;padding:0 4px}.game-title{font-family:Inter,sans-serif;font-size:1.6rem;font-weight:800;letter-spacing:6px;background:linear-gradient(135deg,#c084fc,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-difficulty{font-family:Inter,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:20px;border:1px solid}.game-difficulty.easy{color:#10b981;border-color:#10b9814d;background:#10b98114}.game-difficulty.medium{color:#f59e0b;border-color:#f59e0b4d;background:#f59e0b14}.game-difficulty.hard{color:#f43f5e;border-color:#f43f5e4d;background:#f43f5e14}.mascot-container{display:flex;flex-direction:column;align-items:center;gap:12px;width:200px;flex-shrink:0;padding-top:40px}.mascot-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px 14px;width:100%}.mood-section{width:100%;margin-top:4px}.mood-label{display:block;font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px;text-align:center}.mood-bar{width:100%;height:8px;background:#ffffff0d;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.mood-fill{height:100%;width:50%;border-radius:4px;background:linear-gradient(90deg,#f59e0b,#10b981);transition:width .5s var(--transition-smooth),background .5s var(--transition-smooth);box-shadow:0 0 8px #10b9814d}.mood-fill.low{background:linear-gradient(90deg,#f43f5e,#f59e0b);box-shadow:0 0 8px #f43f5e4d}.mood-fill.high{background:linear-gradient(90deg,#10b981,#22d3ee);box-shadow:0 0 8px #22d3ee4d}.tip-section{width:100%;margin-top:4px}.tip-label{display:block;font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px;text-align:center;background:#22d3ee14;border:none;border-radius:0;padding:5px 10px;width:100%}.tip-text{font-size:.7rem;line-height:1.5;color:var(--text-secondary);text-align:center;min-height:3.15em;transition:opacity .4s ease}.tip-text.fade-out{opacity:0}.tip-text.fade-in{opacity:1}.moves-card{text-align:center;width:100%}.moves-label{display:block;font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px;background:#22d3ee14;border-radius:0;padding:5px 10px;width:100%}.moves-list{display:flex;flex-direction:column;gap:3px;min-height:95px}.moves-empty{font-size:.65rem;color:var(--text-secondary);opacity:.5;padding:30px 0;font-style:italic}.move-entry{display:flex;justify-content:space-between;align-items:center;font-family:JetBrains Mono,monospace;font-size:.65rem;padding:3px 8px;border-radius:4px;background:#ffffff05;border:1px solid rgba(255,255,255,.03);animation:moveSlideIn .3s var(--transition-smooth)}.move-entry .move-pos{color:var(--text-secondary)}.move-entry .move-val{font-weight:600}.move-entry.correct .move-val{color:#10b981}.move-entry.wrong .move-val{color:#f43f5e}.move-entry.erase .move-val{color:var(--text-secondary)}@keyframes moveSlideIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.fortune-callout{background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 12px;position:relative;width:100%;min-height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:all .4s var(--transition-smooth)}.fortune-callout.visible{background:#f59e0b14;border-color:#f59e0b33}.fortune-callout:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid transparent;transition:border-top-color .4s var(--transition-smooth)}.fortune-callout.visible:after{border-top-color:#f59e0b33}.fortune-text{font-size:.68rem;font-style:italic;line-height:1.4;color:var(--accent-3);text-align:center;margin:0;opacity:0;transition:opacity .4s ease}.fortune-callout.visible .fortune-text{opacity:1}.mascot{position:relative;width:120px;height:168px}.mascot-svg{width:100%;height:100%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}.mascot-body-group{transform-origin:100px 220px;animation:bodyBreathe 3s ease-in-out infinite}@keyframes bodyBreathe{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}.mascot-head{transform-origin:100px 100px;animation:headIdle 4s ease-in-out infinite}@keyframes headIdle{0%,to{transform:translateY(0) rotate(0)}30%{transform:translateY(-1px) rotate(.5deg)}70%{transform:translateY(-1.5px) rotate(-.5deg)}}.eyelid-left,.eyelid-right{animation:svgBlink 4s ease-in-out infinite}.eyelid-right{animation-delay:.05s}@keyframes svgBlink{0%,92%,to{height:0}95%{height:24px}}.arm-left{transform-origin:70px 155px;animation:armSwayL 3.5s ease-in-out infinite}.arm-right{transform-origin:130px 155px;animation:armSwayR 3.5s ease-in-out infinite .2s}@keyframes armSwayL{0%,to{transform:rotate(0)}50%{transform:rotate(-2deg)}}@keyframes armSwayR{0%,to{transform:rotate(0)}50%{transform:rotate(2deg)}}.mascot.happy .mascot-head{animation:headHappy .5s ease}.mascot.happy .mouth{d:path("M85 128 Q100 142 115 128")}.mascot.happy .cheek-left,.mascot.happy .cheek-right{fill:#ff646480}.mascot.happy .arm-left{animation:armCelebL .5s ease}.mascot.happy .arm-right{animation:armCelebR .5s ease}.mascot.happy .sparkles{animation:sparklesFade 1s ease forwards}.mascot.happy .mascot-body-group{animation:bodyBounce .5s ease}@keyframes headHappy{0%,to{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(2deg)}60%{transform:translateY(-3px) rotate(-1deg)}}@keyframes bodyBounce{0%,to{transform:translateY(0)}30%{transform:translateY(-8px)}60%{transform:translateY(-3px)}}@keyframes armCelebL{0%,to{transform:rotate(0)}40%{transform:rotate(-20deg)}}@keyframes armCelebR{0%,to{transform:rotate(0)}40%{transform:rotate(20deg)}}@keyframes sparklesFade{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.3)}}.mascot.sad .mascot-head{animation:headSad .5s ease forwards}.mascot.sad .mouth{d:path("M90 134 Q100 126 110 134")}.mascot.sad .brow-left{d:path("M76 90 Q85 94 94 90")}.mascot.sad .brow-right{d:path("M106 90 Q115 94 124 90")}.mascot.sad .mascot-body-group{animation:bodyShake .5s ease}.mascot.sad .pupil-left,.mascot.sad .pupil-right{transform:translateY(2px)}@keyframes headSad{0%{transform:translateY(0) rotate(0)}to{transform:translateY(3px) rotate(-3deg)}}@keyframes bodyShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.mascot.party .mascot-head{animation:headParty .6s ease infinite}.mascot.party .mouth{d:path("M82 128 Q100 148 118 128")}.mascot.party .cheek-left,.mascot.party .cheek-right{fill:#ff646499}.mascot.party .mascot-body-group{animation:bodyParty .6s ease infinite}.mascot.party .arm-left{animation:armPartyL .6s ease infinite}.mascot.party .arm-right{animation:armPartyR .6s ease infinite}.mascot.party .sparkles{animation:sparklesParty 1.2s ease infinite}.mascot.party .eyelid-left,.mascot.party .eyelid-right{animation:none;height:0}.mascot.party .eye-left,.mascot.party .eye-right{transform:scaleY(.7);transform-origin:center}@keyframes headParty{0%,to{transform:rotate(0) translateY(0)}25%{transform:rotate(4deg) translateY(-4px)}75%{transform:rotate(-4deg) translateY(-4px)}}@keyframes bodyParty{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-6px) rotate(2deg)}75%{transform:translateY(-6px) rotate(-2deg)}}@keyframes armPartyL{0%,to{transform:rotate(0)}50%{transform:rotate(-35deg)}}@keyframes armPartyR{0%,to{transform:rotate(0)}50%{transform:rotate(35deg)}}@keyframes sparklesParty{0%,to{opacity:0;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(10deg)}}.mascot-speech{background:transparent;border:1px solid transparent;border-radius:12px;padding:8px 14px;font-size:.75rem;font-weight:500;color:transparent;text-align:center;width:100%;min-height:36px;display:flex;align-items:center;justify-content:center;transition:all .3s var(--transition-smooth);position:relative;line-height:1.4}.mascot-speech.visible{background:#1e212de6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:#8b5cf64d;color:var(--text-secondary)}.mascot-speech:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid transparent;transition:border-bottom-color .3s var(--transition-smooth)}.mascot-speech.visible:before{border-bottom-color:#1e212de6}@media (max-width: 700px){.game-layout{flex-direction:column;gap:14px}.mascot-container{flex-direction:row;width:auto;gap:14px}.mascot{width:70px;height:100px}.mascot-speech{font-size:.7rem;padding:6px 10px;max-width:120px}.mascot-speech:before{display:none}.left-panel{display:none}}.metal-frame{background:var(--glass-bg);backdrop-filter:blur(40px) saturate(1.4);-webkit-backdrop-filter:blur(40px) saturate(1.4);border-radius:24px;padding:32px 36px;position:relative;border:1px solid var(--glass-border);box-shadow:0 0 0 1px #0000004d,0 1px #ffffff0a inset,0 25px 80px #0009,0 0 100px #8b5cf60f;transition:transform .4s var(--transition-smooth),opacity .4s var(--transition-smooth)}.metal-frame:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;border-radius:23px;background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,transparent 50%);pointer-events:none}.metal-frame:after{content:"";position:absolute;top:14px;left:14px;right:14px;bottom:14px;border-radius:16px;border:1px solid rgba(255,255,255,.025);pointer-events:none}.metal-frame .screw{position:absolute;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#5a5f6e,#2a2d35);box-shadow:inset 0 1px 2px #0009,0 0 0 1px #ffffff0a}.metal-frame .screw:after{content:"";position:absolute;top:50%;left:25%;right:25%;height:1px;background:#1a1a22;transform:translateY(-50%) rotate(45deg)}.metal-frame .screw-tl{top:16px;left:16px}.metal-frame .screw-tr{top:16px;right:16px}.metal-frame .screw-bl{bottom:16px;left:16px}.metal-frame .screw-br{bottom:16px;right:16px}.screen-menu,.screen-game{transition:opacity .5s var(--transition-smooth),transform .5s var(--transition-smooth)}.screen-menu.fade-out{opacity:0;transform:scale(.95) translateY(-10px)}.screen-game.fade-in{animation:slideUp .6s var(--transition-smooth) forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.screen-menu{text-align:center;animation:fadeIn .8s ease}.screen-menu h1{font-family:Inter,sans-serif;font-size:clamp(3.2rem,9vw,5rem);font-weight:800;letter-spacing:14px;margin-bottom:4px;background:linear-gradient(135deg,#c084fc,#22d3ee,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 25px rgba(139,92,246,.35));animation:titleGlow 4s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:drop-shadow(0 0 25px rgba(139,92,246,.35))}to{filter:drop-shadow(0 0 35px rgba(34,211,238,.45))}}.screen-menu p{color:var(--text-secondary);margin-bottom:44px;font-size:.85rem;letter-spacing:3px;text-transform:uppercase;font-weight:500}.difficulty-buttons{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.difficulty-buttons button{padding:14px 28px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;border:none;border-radius:12px;cursor:pointer;transition:all .3s var(--transition-smooth);min-width:120px;position:relative;overflow:hidden}.difficulty-buttons button:nth-child(1){background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 20px #0596694d,inset 0 1px #ffffff26}.difficulty-buttons button:nth-child(2){background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;box-shadow:0 4px 20px #d977064d,inset 0 1px #ffffff26}.difficulty-buttons button:nth-child(3){background:linear-gradient(135deg,#dc2626,#f43f5e);color:#fff;box-shadow:0 4px 20px #dc26264d,inset 0 1px #ffffff26}.difficulty-buttons button:hover{transform:translateY(-4px) scale(1.04)}.difficulty-buttons button:nth-child(1):hover{box-shadow:0 10px 40px #05966980,inset 0 1px #fff3}.difficulty-buttons button:nth-child(2):hover{box-shadow:0 10px 40px #d9770680,inset 0 1px #fff3}.difficulty-buttons button:nth-child(3):hover{box-shadow:0 10px 40px #dc262680,inset 0 1px #fff3}.difficulty-buttons button:active{transform:translateY(-1px) scale(.98);transition-duration:.1s}.difficulty-buttons button:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .6s var(--transition-smooth)}.difficulty-buttons button:hover:after{left:100%}.screen-game{display:none;width:100%}.game-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px;padding:0 4px}.game-header .left{display:flex;gap:20px;align-items:center}.game-header .right-header{display:flex;gap:14px;align-items:center}.timer{font-family:JetBrains Mono,monospace;font-size:1rem;color:var(--accent-2);font-weight:500;font-variant-numeric:tabular-nums;text-shadow:0 0 12px var(--glow-cyan);letter-spacing:1px}.errors{font-size:.9rem;color:var(--text-secondary);font-weight:500}.errors .count{font-family:JetBrains Mono,monospace;color:var(--cell-error);font-weight:700;text-shadow:0 0 10px rgba(244,63,94,.5)}.btn-back{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);cursor:pointer;font-family:Inter,sans-serif;font-size:.8rem;font-weight:500;padding:8px 16px;border-radius:10px;transition:all .25s var(--transition-smooth);letter-spacing:.5px}.btn-back:hover{color:var(--text-primary);background:#8b5cf61a;border-color:#8b5cf64d;box-shadow:0 0 15px #8b5cf626}.grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:clamp(300px,80vw,420px);height:clamp(300px,80vw,420px);border:2px solid rgba(139,92,246,.3);border-radius:8px;overflow:hidden;margin:0 auto;background:#05080ccc;box-shadow:inset 0 0 40px #0009,0 0 30px #8b5cf614,0 8px 20px #00000080}.cell{display:flex;align-items:center;justify-content:center;font-family:JetBrains Mono,monospace;font-size:clamp(1.1rem,3.8vw,1.4rem);font-weight:500;cursor:pointer;border:1px solid rgba(71,85,105,.2);background:var(--cell-bg);transition:all .2s var(--transition-smooth);-webkit-user-select:none;user-select:none;position:relative}.cell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,rgba(139,92,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}.cell:hover:after{opacity:.3}.cell:nth-child(3n){border-right:2px solid rgba(139,92,246,.25)}.cell:nth-child(9n){border-right:none}.cell:nth-child(n+19):nth-child(-n+27){border-bottom:2px solid rgba(139,92,246,.25)}.cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid rgba(139,92,246,.25)}.cell.given{color:var(--cell-given);font-weight:700;text-shadow:0 0 8px rgba(255,255,255,.15)}.cell.input{color:#f59e0b;text-shadow:0 0 10px rgba(245,158,11,.6);animation:numberPop .25s var(--transition-smooth)}.cell.selected{background:#8b5cf633;box-shadow:inset 0 0 0 2.5px #8b5cf6,inset 0 0 14px #8b5cf666;z-index:2}.cell.selected:after{opacity:0}.cell.selected.given{background:#8b5cf64d;box-shadow:inset 0 0 0 2.5px #8b5cf6,inset 0 0 16px #8b5cf666}.cell.selected.input{background:#f59e0b33;box-shadow:inset 0 0 0 2.5px #f59e0be6,inset 0 0 14px #f59e0b4d}.cell.related{background:var(--cell-related)}.cell.error{color:var(--cell-error);text-shadow:0 0 14px rgba(244,63,94,.7);animation:shake .4s ease;background:#f43f5e1f}.cell.same-number{background:#22d3ee14;box-shadow:inset 0 0 10px #22d3ee1f}.cell.hint{animation:hintPop .5s var(--transition-smooth);color:var(--accent-3);text-shadow:0 0 14px rgba(245,158,11,.6)}@keyframes numberPop{0%{transform:scale(.6);opacity:.3}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@keyframes selectedPulse{0%,to{opacity:.4}50%{opacity:.6}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@keyframes hintPop{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}.actions button{padding:10px 22px;font-family:Inter,sans-serif;font-size:.78rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(255,255,255,.06);background:#ffffff08;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);border-radius:10px;cursor:pointer;transition:all .25s var(--transition-smooth)}.actions button:hover{border-color:#22d3ee4d;color:var(--accent-2);background:#22d3ee0d;box-shadow:0 0 15px #22d3ee1f;transform:translateY(-2px)}.actions button:active{transform:translateY(0) scale(.97);transition-duration:.1s}.overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;background:#060910e6;backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);align-items:center;justify-content:center;flex-direction:column;gap:24px;animation:overlayIn .6s var(--transition-smooth)}.overlay.active{display:flex}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.overlay h2{font-family:Inter,sans-serif;font-size:clamp(2.2rem,7vw,3.5rem);font-weight:800;letter-spacing:8px;text-transform:uppercase;background:linear-gradient(135deg,#c084fc,#22d3ee,#f59e0b);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.overlay .sub{color:var(--text-secondary);font-size:1.1rem;font-weight:500;letter-spacing:1px}.overlay button{padding:16px 40px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;border:none;background:linear-gradient(135deg,var(--accent-1),#6d28d9);color:#fff;border-radius:12px;cursor:pointer;transition:all .3s var(--transition-smooth);box-shadow:0 4px 25px var(--glow-purple);position:relative;overflow:hidden}.overlay button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.1),transparent);opacity:0;transition:opacity .3s ease}.overlay button:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 40px var(--glow-purple)}.overlay button:hover:before{opacity:1}.overlay button:active{transform:translateY(-1px) scale(.98);transition-duration:.1s}.cell.complete-flash{animation:completionFlash .8s ease}@keyframes completionFlash{0%{background:var(--cell-bg)}30%{background:#22d3ee4d;box-shadow:inset 0 0 20px #22d3ee66}60%{background:#8b5cf633;box-shadow:inset 0 0 15px #8b5cf64d}to{background:var(--cell-bg)}}.cell.complete-flash:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmerSweep .6s ease forwards;pointer-events:none}@keyframes shimmerSweep{0%{transform:translate(-100%);opacity:1}to{transform:translate(100%);opacity:0}}.streak{display:flex;align-items:center;gap:6px;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:600;color:var(--accent-3);opacity:0;transform:scale(.8);transition:all .3s var(--transition-smooth)}.streak.visible{opacity:1;transform:scale(1)}.streak .streak-icon{font-size:1rem;filter:drop-shadow(0 0 4px rgba(245,158,11,.6))}.streak .streak-count{text-shadow:0 0 8px rgba(245,158,11,.5)}.streak.hot{color:#f43f5e}.streak.hot .streak-icon{filter:drop-shadow(0 0 6px rgba(244,63,94,.7));animation:fireFlicker .4s ease infinite alternate}.streak.hot .streak-count{text-shadow:0 0 10px rgba(244,63,94,.6)}@keyframes fireFlicker{0%{transform:scale(1) rotate(-2deg)}to{transform:scale(1.15) rotate(2deg)}}.best-time{font-family:JetBrains Mono,monospace;font-size:.75rem;color:var(--text-secondary);letter-spacing:.5px;display:flex;align-items:center;gap:6px}.best-time .trophy{color:#fbbf24;font-size:.85rem}.new-record{animation:newRecordPulse 1s ease infinite alternate;color:#fbbf24;font-weight:600}@keyframes newRecordPulse{0%{opacity:.7;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}.stats-section{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);width:100%}.stats-section h3{font-size:.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}.stats-grid{display:flex;gap:12px;justify-content:center}.stat-card{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 14px;text-align:center;min-width:80px}.stat-card .stat-label{font-size:.6rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px}.stat-card .stat-value{font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700;color:var(--text-primary)}.stat-card.easy .stat-value{color:#10b981}.stat-card.medium .stat-value{color:#f59e0b}.stat-card.hard .stat-value{color:#f43f5e}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.left-panel{display:flex;flex-direction:column;gap:14px;width:200px;flex-shrink:0;align-self:center}.panel-card{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border:1px solid var(--glass-border);border-radius:16px;padding:16px;text-align:center;box-shadow:0 4px 24px #0006,0 0 40px #8b5cf608}.panel-card-title{display:block;font-size:.6rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);margin-top:8px}.progress-ring-container{position:relative;width:100px;height:100px;margin:0 auto}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#ffffff0d;stroke-width:6}.progress-ring-fill{fill:none;stroke:url(#progress-gradient);stroke-width:6;stroke-linecap:round;stroke-dasharray:263.89;stroke-dashoffset:263.89;transition:stroke-dashoffset .6s var(--transition-smooth);filter:drop-shadow(0 0 6px rgba(139,92,246,.5))}.progress-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:1px}.progress-percent{font-family:JetBrains Mono,monospace;font-size:1.4rem;font-weight:700;color:var(--text-primary);text-shadow:0 0 12px rgba(139,92,246,.4)}.progress-label{font-family:Inter,sans-serif;font-size:.7rem;font-weight:600;color:var(--text-secondary);margin-top:4px}.minimap-grid{display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:90px;height:90px;margin:0 auto 10px;border:1px solid rgba(139,92,246,.2);border-radius:4px;overflow:hidden}.minimap-cell{background:#ffffff08;border:.5px solid rgba(255,255,255,.03);transition:background .3s ease}.minimap-cell.filled{background:#8b5cf64d}.minimap-cell.complete-unit{background:#22d3ee73;box-shadow:inset 0 0 3px #22d3ee4d}.shortcuts{display:flex;flex-direction:column;gap:5px;margin-top:8px}.shortcut-row{display:flex;align-items:center;justify-content:space-between;font-size:.65rem;color:var(--text-secondary)}.shortcut-row kbd{font-family:JetBrains Mono,monospace;font-size:.6rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:4px;padding:2px 6px;color:var(--accent-2)}.stats-card{text-align:left}.session-stat{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04)}.session-stat:last-child{border-bottom:none}.session-stat-label{font-size:.65rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.session-stat-value{font-family:JetBrains Mono,monospace;font-size:.75rem;font-weight:600;color:var(--text-primary)}.session-stat-value small{font-size:.6rem;color:var(--text-secondary);font-weight:400}@media (max-width: 950px) and (min-width: 701px){.left-panel{width:160px}.left-panel .shortcuts{display:none}}.hidden{display:none!important}