:root{--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans Thai, Noto Sans, Helvetica, Arial, sans-serif;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 999px;--shadow-sm: 0 4px 12px -8px color-mix(in oklab, black, transparent 80%);--shadow-md: 0 8px 24px -16px color-mix(in oklab, black, transparent 85%);--bg: #f8f9fa;--fg: #212529;--muted: #6c757d;--surface: #ffffff;--card: #ffffff;--border: #dee2e6;--ok: #198754;--err: #dc3545;--current: #0d6efd;--accent: #fd7e14;--ring: #86b7fe}[data-theme=dark]{--bg: #121212;--fg: #e9ecef;--muted: #adb5bd;--surface: #1e1e1e;--card: #2f2f2f;--border: #495057;--ok: #20c997;--err: #fd7888;--current: #4dabf7;--accent: #ff922b;--ring: #3682f1}.panel{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm)}.btn{font-family:inherit;font-size:1rem;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.btn:hover{background:color-mix(in oklab,var(--fg),transparent 92%)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:color-mix(in oklab,var(--current),transparent 88%);border-color:var(--ring)}.btn-primary:hover{background:color-mix(in oklab,var(--current),transparent 82%)}.btn-primary:disabled{background:var(--surface);border-color:var(--border);opacity:.6;cursor:not-allowed}.btn-start{font-size:1.1rem;font-weight:600;padding:10px 24px}.btn-icon{padding:6px 8px;font-size:1.1rem;line-height:1;margin-left:-4px}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:var(--font-sans);background-color:var(--bg);color:var(--fg);line-height:1.5;transition:background-color .2s,color .2s}.app-header{display:flex;justify-content:flex-start;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;position:sticky;top:0;-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px);background:color-mix(in oklab,var(--surface),transparent 15%);z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand h1{margin:0;font-size:1.25rem;color:var(--muted)}.tagline{margin:2px 0 0;color:var(--muted);font-size:.9rem}.affiliate-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;margin-left:20px;border-radius:var(--radius-full);border:1px solid var(--border);background:color-mix(in oklab,var(--surface),var(--fg) 6%);color:var(--fg);text-decoration:none;font-weight:600;font-size:.95rem;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;box-shadow:inset 0 1px color-mix(in oklab,var(--fg),transparent 92%);flex-shrink:0}.affiliate-link:hover{transform:translateY(-1px);background:color-mix(in oklab,var(--surface),var(--fg) 12%);border-color:color-mix(in oklab,var(--border),var(--fg) 20%);box-shadow:0 10px 24px -18px color-mix(in oklab,var(--fg),transparent 72%)}.affiliate-link:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.affiliate-label{white-space:nowrap;letter-spacing:.3px}.affiliate-icon{font-size:.9rem;color:var(--muted)}.history-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--fg);font-size:1.2rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-btn:hover{background:color-mix(in oklab,var(--fg),transparent 92%)}.header-actions{display:flex;align-items:center;gap:8px;position:relative;margin-left:auto}.update-notice-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);border:1px solid color-mix(in oklab,var(--accent),transparent 40%);background:color-mix(in oklab,var(--accent),transparent 78%);color:var(--fg);font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:0 6px 18px -14px color-mix(in oklab,var(--accent),transparent 30%);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease}.update-notice-btn:hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in oklab,var(--accent),transparent 20%);background:color-mix(in oklab,var(--accent),transparent 68%);box-shadow:0 14px 26px -20px color-mix(in oklab,var(--accent),transparent 20%)}.update-notice-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}.update-notice-btn:disabled{opacity:.7;cursor:progress}.update-notice-icon{font-size:1.1rem}.settings-btn{font-size:1.4rem}.achievements-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}.achievements-btn.has-new:after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px color-mix(in oklab,var(--accent),transparent 40%)}.achievements-btn.active{border-color:var(--accent)}.achievements-btn:hover{background:color-mix(in oklab,var(--fg),transparent 92%)}.theme-toggle{font-size:1.2rem;background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--radius-sm);line-height:1}.theme-toggle:hover{background:color-mix(in oklab,var(--fg),transparent 90%)}.app-main{max-width:1000px;margin:0 auto;padding:16px 20px 28px;display:grid;gap:14px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px;border-radius:var(--radius-md)}.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px 12px}select,button{font-family:inherit}.toolbar select{font-size:1rem;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--fg)}.toolbar select:disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:default}.hidden{display:none!important}.start-area{display:flex;justify-content:center}.custom-form{display:grid;gap:10px;padding:16px 0}.custom-form label{font-size:.9rem;color:var(--muted)}.criteria-container{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px}#wordCountIndicator{font-size:.85rem;color:var(--muted)}.criteria-indicator{font-size:.85rem;color:var(--muted);min-height:1.2em}.bypass-validation{display:flex;align-items:center;gap:6px;font-size:.9rem}.custom-form input,.custom-form textarea{width:100%;font-family:inherit;font-size:1rem;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg);color:var(--fg)}.custom-form input[type=checkbox]{width:auto}.custom-form input:focus,.custom-form textarea:focus{outline:3px solid var(--ring);border-color:var(--current)}.board{position:relative;padding:18px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.board:after{content:"";position:absolute;bottom:18px;left:18px;right:18px;height:2.1rem;background:linear-gradient(to bottom,transparent,var(--card) 90%);pointer-events:none}.text-display{font-size:1.45rem;line-height:2.1rem;word-wrap:break-word;word-break:break-word;max-height:6.5rem;overflow-y:auto;scrollbar-width:none}.text-display::-webkit-scrollbar{display:none}.game-container{display:none;align-items:center;justify-content:center;padding:40px 20px}.game-container canvas{width:min(90vw,520px);height:auto;max-height:min(90vh,520px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}body.snake-game-active{overflow:hidden}body.snake-game-active .app-header,body.snake-game-active .app-main,body.snake-game-active .app-footer,body.snake-game-active .modal-overlay{display:none!important}body.snake-game-active .game-container{display:flex}body.flux-horizon-active{overflow:hidden;background:radial-gradient(circle at center,#10223d,#050512 65%,#020109)}body.flux-horizon-active .app-header,body.flux-horizon-active .app-main,body.flux-horizon-active .app-footer,body.flux-horizon-active .modal-overlay{display:none!important}.flux-horizon-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px;z-index:1000;color:#e6f6ff;font-family:IBM Plex Mono,Fira Code,monospace;text-transform:uppercase;letter-spacing:.08em;background:linear-gradient(180deg,#060c18d9,#02040cf2 40%,#010208fa)}.flux-horizon-canvas{width:min(92vw,1152px);height:auto;image-rendering:pixelated;border:2px solid rgba(120,210,255,.35);box-shadow:0 0 60px #50c8ff4d;background:#02030a}.flux-horizon-hud{display:flex;gap:16px;font-size:clamp(.7rem,1.4vw,.9rem);color:#9fe3ff}.flux-hud-label{padding:6px 10px;border:1px solid rgba(120,210,255,.35);background:#0a182c99;border-radius:4px;text-shadow:0 0 4px rgba(30,200,255,.6)}.flux-horizon-message{min-height:24px;font-size:clamp(.75rem,1.8vw,1rem);letter-spacing:.12em;color:#f5ffb8;opacity:0;transition:opacity .2s ease}.flux-horizon-message.visible{opacity:1}.flux-horizon-message[data-tone=warn]{color:#ff9c9c}.flux-horizon-message[data-tone=info]{color:#b7fffe}.flux-horizon-exit{position:absolute;top:24px;right:24px;font-family:inherit;font-size:.7rem;letter-spacing:.2em;padding:8px 14px;border:1px solid rgba(180,230,255,.5);background:#041020b3;color:#bfe9ff;cursor:pointer;text-transform:inherit;transition:background .2s ease,color .2s ease}.flux-horizon-exit:hover{background:#78dcff40;color:#fff}.flux-horizon-input{position:absolute;width:1px;height:1px;opacity:.001;pointer-events:none}.flux-horizon-gameover{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 28px;border:1px solid rgba(255,220,180,.35);background:#060a18eb;color:#ffe9c7;box-shadow:0 0 32px #ffd86059}.flux-horizon-gameover.hidden{display:none}.flux-horizon-gameover h2{margin:0 0 6px;font-size:.95rem;letter-spacing:.25em}.flux-gameover-line{margin:0;font-size:.7rem;letter-spacing:.18em}.flux-gameover-value{margin-left:6px;color:#fff}.flux-horizon-return{margin-top:6px;padding:8px 16px;font-size:.65rem;letter-spacing:.3em;background:#ffb04238;border:1px solid rgba(255,200,120,.5);color:#ffe9c7;text-transform:inherit;cursor:pointer;transition:background .2s ease,color .2s ease}.flux-horizon-return:hover{background:#ffd67e59;color:#1b1f34}.flux-horizon-affiliate{font-size:.55rem;letter-spacing:.18em;color:#9fdcff;text-decoration:none;margin-top:4px;transition:color .2s ease}.flux-horizon-affiliate:hover{color:#fff;text-decoration:underline}.text-display span{position:relative;padding:0 1px;border-radius:var(--radius-xs);transition:background-color .15s,color .15s}.text-display span[data-inserts]{padding-right:5px}.text-display span[data-inserts-before]{padding-left:5px}.text-display .done.ok{color:var(--ok)}.text-display .done.err{background-color:color-mix(in oklab,var(--err),transparent 85%);text-decoration:underline;text-decoration-color:var(--err);text-decoration-thickness:2px;text-underline-offset:3px}.text-display span[data-inserts]:after{content:"";position:absolute;right:-1px;top:10%;height:80%;width:6px;background:linear-gradient(var(--err),var(--err)) center / 2px 100% no-repeat,linear-gradient(var(--err),var(--err)) top / 100% 2px no-repeat,linear-gradient(var(--err),var(--err)) bottom / 100% 2px no-repeat}.text-display span[data-inserts-before]:before{content:"";position:absolute;left:-1px;top:10%;height:80%;width:6px;background:linear-gradient(var(--err),var(--err)) center / 2px 100% no-repeat,linear-gradient(var(--err),var(--err)) top / 100% 2px no-repeat,linear-gradient(var(--err),var(--err)) bottom / 100% 2px no-repeat}.text-display .current{position:relative;background:color-mix(in oklab,var(--current),transparent 85%);outline:1px solid var(--current)}.text-display .current:after{content:"";position:absolute;right:-1px;top:15%;bottom:15%;width:2px;background:var(--current);animation:caret 1s steps(1) infinite;border-radius:1px}@keyframes caret{50%{opacity:0}}.progress{height:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--current),var(--accent));transition:width .2s ease;width:var(--progress-width, 0%)}.input-area{display:flex}.typing-input{width:100%;font-size:1.2rem;padding:14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);color:var(--fg);box-shadow:0 4px 16px -12px color-mix(in oklab,black,transparent 85%)}.typing-input:focus{outline:3px solid var(--ring);border-color:var(--current)}.typing-input:-webkit-autofill,.typing-input:-webkit-autofill:hover,.typing-input:-webkit-autofill:focus{transition:background-color 9999s ease-out,color 9999s ease-out;-webkit-text-fill-color:var(--fg)}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.stat{padding:10px 12px;display:flex;justify-content:space-between;align-items:baseline;border-radius:var(--radius-md)}.stat .label{color:var(--muted);font-size:.85rem}.stat span:last-child{font-weight:600;font-size:1.15rem}.cheat-notice{margin:12px auto 0;max-width:520px;padding:12px 16px;border-radius:var(--radius-md);border:1px dashed color-mix(in oklab,var(--accent),transparent 40%);background:color-mix(in oklab,var(--accent),transparent 88%);color:var(--fg);font-weight:600;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden}.cheat-spectator{position:fixed;left:var(--cheat-left, 50%);top:var(--cheat-top, 50%);transform:translate(-50%,65%) scale(.2);font-size:clamp(4rem,12vw,6.5rem);line-height:1;pointer-events:none;opacity:0;filter:drop-shadow(0 20px 35px color-mix(in oklab,black,transparent 75%));z-index:40}.cheat-spectator.is-active{animation:cheatSpectatorRise 2.6s ease-out forwards}@keyframes cheatSpectatorRise{0%{opacity:0;transform:translate(-50%,70%) scale(.25)}18%{opacity:1;transform:translate(-50%,-8%) scale(1)}32%{transform:translate(-60%,-10%) scale(1) rotate(-2deg)}48%{transform:translate(-40%,-10%) scale(1) rotate(2deg)}62%{transform:translate(-50%,-6%) scale(.95)}78%{opacity:1;transform:translate(-50%,14%) scale(.8)}to{opacity:0;transform:translate(-50%,90%) scale(.35)}}.cheat-results{display:flex;align-items:center;gap:16px;margin:1rem auto;padding:16px 18px;max-width:520px;background:color-mix(in oklab,var(--surface),var(--accent) 12%);border:1px dashed color-mix(in oklab,var(--accent),transparent 30%);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.cheat-results-emoji{font-size:2.6rem;line-height:1;filter:drop-shadow(0 2px 4px color-mix(in oklab,black,transparent 85%))}.cheat-results-body{display:flex;flex-direction:column;gap:6px;flex:1}.cheat-results-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 10px;border-radius:var(--radius-md);background:color-mix(in oklab,var(--surface),var(--accent) 6%);font-weight:600;font-size:1rem}.cheat-results-row .label{color:var(--muted);font-size:.85rem;letter-spacing:.02em}.cheat-results-row .value{font-size:1.2rem;color:var(--fg)}.cheat-results-headline{margin:6px 0 0;font-weight:600;color:color-mix(in oklab,var(--fg),var(--accent) 25%)}.cheat-results-note{margin:0;font-size:.85rem;color:var(--muted)}.modal-content.wide{max-width:800px}#personalBestBanner{color:var(--primary);text-align:center;margin-top:0;margin-bottom:.5rem;font-size:1.5rem;animation:fadeInDown .5s ease-out}#milestoneMessage{text-align:center;font-size:1.2rem;color:var(--text-secondary);margin-bottom:1rem;min-height:1.5rem}#celebrationContainer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.confetti{position:absolute;width:var(--particle-width, 10px);height:var(--particle-height, 10px);background-color:var(--particle-bg-color, #f00);opacity:var(--particle-opacity, 0);animation-name:var(--particle-animation-name, confetti-fall);animation-duration:var(--particle-animation-duration, 3s);animation-timing-function:var(--particle-animation-timing-function, linear);animation-fill-mode:forwards;left:var(--particle-left);top:var(--particle-top);border-radius:var(--particle-border-radius, 0);transform:var(--particle-transform)}.sparkle{position:absolute;width:var(--sparkle-width, 3px);height:var(--sparkle-height, 12px);background-color:var(--sparkle-bg-color, #ffc700);border-radius:var(--sparkle-border-radius, 1px);opacity:var(--sparkle-opacity, 0);pointer-events:none;animation-fill-mode:forwards;left:var(--sparkle-left);top:var(--sparkle-top)}.sparkle:after{content:"";position:absolute;top:4.5px;left:-4.5px;width:12px;height:3px;border-radius:1px;background-color:inherit}@keyframes confetti-fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 5px 2px #4caf5080}50%{box-shadow:0 0 15px 5px #4caf50cc}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes legendary-fall{0%{transform:translateY(-10vh) rotate(0) scale(1.2);opacity:1}to{transform:translateY(100vh) rotate(1080deg) scale(.2);opacity:0}}@keyframes sparkle-animation{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.5) rotate(180deg);opacity:1}to{transform:scale(0) rotate(360deg);opacity:0}}@keyframes modal-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes text-glitch{0%,to{opacity:1;color:var(--fg)}25%{color:#f0f}50%{opacity:.8;transform:skew(-5deg);color:#0ff}75%{color:#ff0}}@keyframes god-rays{0%{background:radial-gradient(ellipse at 50% 0%,rgba(255,215,100,.2),transparent 60%);opacity:0}50%{opacity:.6}to{background:radial-gradient(ellipse at 50% 0%,rgba(255,215,100,.4),transparent 70%);opacity:0}}@keyframes shimmer-fall{0%{transform:translateY(-10vh) scale(.5);opacity:1}to{transform:translateY(100vh) scale(1);opacity:0}}@keyframes ribbon-twist{0%{transform:translateY(-10vh) rotate3d(0,0,1,0) scale(1);opacity:1}to{transform:translateY(100vh) rotate3d(1,1,1,720deg) scale(.5);opacity:0}}@keyframes text-glow{0%{opacity:0;text-shadow:0 0 5px var(--accent)}50%{opacity:1;text-shadow:0 0 15px var(--accent)}to{opacity:1;text-shadow:none}}@keyframes text-electric{0%{color:#2ad8ff;transform:scale(1)}25%{color:#fce81a}50%{color:#d81af0;transform:scale(1.1)}75%{color:#50fc32}to{color:var(--fg);transform:scale(1)}}@keyframes gold-shine{0%{background-position:200% 0}to{background-position:-200% 0}}.milestone-text{text-align:center;font-size:1.2rem;color:var(--muted);margin-bottom:1rem;min-height:1.5rem}.text-glow-effect{animation:text-glow 1.5s ease-in-out forwards}.text-electric-effect{animation:text-electric 1s forwards}.modal-shake-effect{animation:modal-shake .5s linear infinite}.text-glitch-effect{animation:text-glitch .3s linear infinite}@keyframes double-fade-zoom{0%{opacity:0;transform:scale(.8)}20%{opacity:1;transform:scale(1.1)}40%{opacity:0;transform:scale(.8)}60%{opacity:1;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}.text-zoom-effect{color:var(--fg);text-shadow:0 2px 4px rgba(0,0,0,.2);animation:double-fade-zoom 1.2s ease-out forwards}.modal-content.world-class-bg{background:radial-gradient(ellipse at center,color-mix(in oklab,#fff784,var(--card) 50%),color-mix(in oklab,#daa520,var(--card) 20%))}[data-theme=dark] .modal-content.world-class-bg{background:radial-gradient(ellipse at center,color-mix(in oklab,#ffd700,var(--card) 50%),color-mix(in oklab,#a8760b,var(--card) 20%))}.modal-content.beginner-bg{background:#e6f9f0}[data-theme=dark] .modal-content.beginner-bg{background:#2d3a34}.modal-content.intermediate-bg{background:linear-gradient(45deg,#e7f5ff,#f1f9ff)}[data-theme=dark] .modal-content.intermediate-bg{background:linear-gradient(45deg,#2c3e50,#34495e)}.modal-content.advanced-bg{background:#e9ecef}[data-theme=dark] .modal-content.advanced-bg{background:#343a40}.modal-content.expert-bg{background:linear-gradient(45deg,#d0d0d0,#f8f8f8,#d0d0d0)}[data-theme=dark] .modal-content.expert-bg{background:linear-gradient(45deg,#708090,#b0c4de,#708090)}.modal-content.legendary-bg{background:linear-gradient(45deg,#ffadad,#ffd6a5,#fdffb6,#caffbf,#9bf6ff,#a0c4ff,#bdb2ff,#ffc6ff)}[data-theme=dark] .modal-content.legendary-bg{background:linear-gradient(45deg,#8b0000,#b8860b,#556b2f,#006400,#008b8b,#00008b,#483d8b,#8b008b)}.world-class-particle{filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}.world-class-particle.confetti{text-shadow:0 2px 2px rgba(0,0,0,.5)}.legendary-particle{filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}.legendary-particle.confetti{text-shadow:0 0 4px rgba(255,255,255,.8)}.god-rays-effect{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;animation:god-rays 4s ease-in-out infinite}.ascii-rain-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.ascii-char{position:absolute;font-family:monospace;color:#0f0;-webkit-user-select:none;user-select:none;animation:ascii-fall 5s linear forwards;left:var(--ascii-left);font-size:var(--ascii-font-size)}@keyframes ascii-fall{0%{transform:translateY(-10vh);opacity:1}to{transform:translateY(100vh);opacity:0}}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background:color-mix(in oklab,var(--surface),var(--current) 10%);color:var(--fg);padding:12px 20px;border-radius:var(--radius-full);border:1px solid var(--border);box-shadow:var(--shadow-md);z-index:100;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.toast:not(.hidden){opacity:1;transform:translate(-50%) translateY(10px);pointer-events:auto}.toast.toast-interactive{cursor:pointer}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.modal-content{position:relative;background:var(--card);padding:20px 24px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:90%;max-width:500px;transform:scale(.95);transition:transform .2s ease-out}.modal-overlay:not(.hidden) .modal-content{transform:scale(1)}.modal-content h2{margin-top:0;text-align:center}.achievements-panel{max-width:680px;display:grid;gap:16px}.achievements-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.achievements-summary{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start;font-size:.85rem;color:var(--muted)}.achievements-summary span{padding:6px 12px;border-radius:var(--radius-full);border:1px solid var(--border);background:color-mix(in oklab,var(--surface),transparent 20%)}.achievements-list{display:flex;flex-direction:column;gap:10px;max-height:360px;overflow-y:auto;padding-right:4px}.achievement-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius-md);border:1px solid color-mix(in oklab,var(--border),transparent 15%);background:color-mix(in oklab,var(--surface),transparent 12%);transition:border-color .2s ease,background .2s ease}.achievement-row:not(.locked){background:color-mix(in oklab,var(--surface),var(--accent) 12%);border-color:color-mix(in oklab,var(--accent),transparent 70%)}.achievement-row.locked{background:color-mix(in oklab,var(--surface),var(--fg) 6%);border-style:dashed;border-color:color-mix(in oklab,var(--border),transparent 5%);color:color-mix(in oklab,var(--muted),transparent 10%)}.achievement-row.locked .achievement-detail h3,.achievement-row.locked .achievement-detail p,.achievement-row.locked .achievement-meta{color:color-mix(in oklab,var(--muted),transparent 5%);opacity:.68}.achievement-row.locked .achievement-badge{opacity:.55}.achievement-badge{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;font-size:1.6rem;background:color-mix(in oklab,var(--surface),transparent 25%)}.achievement-badge.locked{filter:grayscale(1)}.achievement-detail{display:grid;gap:4px}.achievement-detail h3{margin:0;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}.achievement-detail p{margin:0;font-size:.85rem;color:var(--muted)}.achievement-meta{display:grid;gap:6px;text-align:right;font-size:.8rem;color:var(--muted)}.achievement-meta time{font-variant-numeric:tabular-nums}.achievement-action{justify-self:end;padding:6px 12px;border-radius:var(--radius-full);border:1px solid color-mix(in oklab,var(--accent),transparent 60%);background:color-mix(in oklab,var(--surface),transparent 20%);color:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s ease,border-color .2s ease}.achievement-action:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 85%)}.results-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.results-finished-at{margin-top:-4px;text-align:center;font-size:.8rem;letter-spacing:.08em;color:color-mix(in oklab,var(--muted),transparent 25%)}.modal-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}.history-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.summary-group{background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:var(--radius-md)}.summary-group h3{margin:0 0 10px;font-size:1.1rem}.summary-stat{font-size:.9rem;display:flex;justify-content:space-between;margin-bottom:4px}.summary-stat .label{color:var(--muted)}.summary-stat .value{font-weight:600}.best-record{margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.best-record .title{font-size:.9rem;font-weight:600}.best-record .details{font-size:.8rem;color:var(--muted)}.history-table-container{max-height:40vh;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-md)}.history-table{width:100%;border-collapse:collapse}.history-table th,.history-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border)}.history-table th{position:sticky;top:0;background:var(--surface);font-size:.9rem}.history-table tbody tr:last-child td{border-bottom:none}.history-table td{font-size:.95rem}.history-table td:nth-child(3),.history-table td:nth-child(4){font-weight:600;text-align:right}.history-table th:nth-child(3),.history-table th:nth-child(4){text-align:right}#historyTitle span[contenteditable=true]{cursor:text;padding:0 4px;border-radius:var(--radius-xs);outline:none}#historyTitle span[contenteditable=true]:hover{background-color:color-mix(in oklab,var(--fg),transparent 95%)}#historyTitle span[contenteditable=true]:focus{background-color:var(--surface);box-shadow:0 0 0 2px var(--ring)}.settings-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:320px;padding:16px;border-radius:var(--radius-md);display:grid;gap:16px}.setting-row{display:flex;justify-content:space-between;align-items:center;font-size:.95rem}.lang-buttons .btn{padding:4px 12px;font-size:.9rem}.lang-buttons .btn:not(.active){background:transparent;border-color:transparent;color:var(--muted)}.lang-buttons .btn.active{background:color-mix(in oklab,var(--current),transparent 88%);border-color:var(--current);color:var(--fg)}.switch{position:relative;display:inline-block;width:44px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:var(--surface);border:1px solid var(--border);transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:var(--muted);transition:.4s;border-radius:50%}input:checked+.slider{background-color:var(--current);border-color:var(--current)}input:focus+.slider{box-shadow:0 0 1px var(--current)}input:checked+.slider:before{transform:translate(20px);background-color:var(--card)}.app-footer{text-align:center;padding:16px 20px;font-size:.85rem;color:var(--muted)}.text-error{color:var(--err)}.text-ok{color:var(--ok)}.fox-animation-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999}@media (max-width: 600px){.text-display{font-size:1.2rem;line-height:1.9rem}.results-grid,.history-summary{grid-template-columns:1fr}}
