*{margin:0;padding:0;box-sizing:border-box}html{height:100%}:root{--bg: #111827;--fg: #ffffff;--fg-dim: rgba(255,255,255,.45);--swatch-empty: #1f2937;--border: rgba(255,255,255,.25);--border-hover: rgba(255,255,255,.55);--hover-bg: rgba(255,255,255,.08);--bar-bg: rgba(255,255,255,.1);--primary-bg: rgba(255,255,255,.95);--primary-fg: #111827;--ctrl-bg: rgba(255,255,255,.07);--ctrl-hover: rgba(255,255,255,.15)}body.light{--bg: #ffffff;--fg: #111827;--fg-dim: rgba(17,24,39,.5);--swatch-empty: #d1d5db;--border: rgba(17,24,39,.18);--border-hover: rgba(17,24,39,.45);--hover-bg: rgba(17,24,39,.05);--bar-bg: rgba(17,24,39,.12);--primary-bg: #111827;--primary-fg: #ffffff;--ctrl-bg: rgba(17,24,39,.06);--ctrl-hover: rgba(17,24,39,.12)}body{background:var(--bg);color:var(--fg);font-family:Segoe UI,system-ui,sans-serif;height:100dvh;overflow:hidden;overscroll-behavior:none;display:flex;flex-direction:column;padding:clamp(8px,1.5vh,16px) 24px;transition:background .3s,color .3s}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1.8vh,20px);overflow:hidden;transition:opacity .15s ease}main.fading{opacity:0}.top-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;flex-shrink:0;padding-bottom:clamp(4px,1vh,10px)}.ctrl-btn.daily-active{border-color:var(--border-hover);font-weight:600}.ctrl-btn{height:34px;padding:0 12px;border-radius:17px;border:1.5px solid var(--border);background:var(--ctrl-bg);color:var(--fg);font-size:.7rem;letter-spacing:1px;cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit}.ctrl-btn:hover{background:var(--ctrl-hover);border-color:var(--border-hover)}.ctrl-btn.diff-hard,.ctrl-btn.ta-active{border-color:var(--border-hover);font-weight:600}h1{font-size:1.4rem;letter-spacing:8px;text-transform:uppercase;font-weight:300;opacity:.85}.info-bar{display:flex;gap:32px;font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim)}.swatches{display:flex;gap:20px}.swatch-group{display:flex;flex-direction:column;align-items:center;gap:10px}.swatch{width:clamp(72px,18vmin,130px);height:clamp(72px,18vmin,130px);border-radius:clamp(8px,2vmin,14px);background:var(--swatch-empty);transition:background .15s,opacity .4s ease;outline:1.5px solid var(--border)}.swatch-label{font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--fg-dim)}.swatch.faded{opacity:.12;transition:opacity .4s ease}.swatch-wrap{position:relative;display:inline-block}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:clamp(8px,2vmin,14px);font-size:clamp(2.2rem,6vmin,3.5rem);font-weight:800;color:#fffffff2;text-shadow:0 1px 10px rgba(0,0,0,.55);pointer-events:none}.countdown-overlay[hidden]{display:none}@keyframes countdown-tick{0%{transform:scale(1.5);opacity:0}18%{transform:scale(1);opacity:1}72%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}.countdown-overlay.tick{animation:countdown-tick 1s ease forwards}#wheelCanvas{cursor:crosshair;display:block;touch-action:none;width:min(340px,76vmin,calc(100dvh - 340px));height:min(340px,76vmin,calc(100dvh - 340px))}.round-timer-bar{width:min(340px,76vmin,calc(100dvh - 340px));height:4px;background:var(--bar-bg);border-radius:2px;overflow:hidden}.round-timer-fill{height:100%;background:var(--fg);border-radius:2px;width:0%}.btn{padding:14px 48px;border:1.5px solid var(--border);background:transparent;color:var(--fg);border-radius:50px;font-size:.8rem;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit}.btn:hover{background:var(--hover-bg);border-color:var(--border-hover)}.btn.primary{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent}.btn.primary:hover{opacity:.9}.score-display{display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:clamp(72px,18vmin,130px)}.score-label{font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--fg-dim)}.score-number{font-size:3rem;font-weight:700;line-height:1;transition:color .3s}.score-number.high{color:#4ade80}.score-number.low{color:#f87171}.score-number.perfect{color:#fbbf24;animation:perfect-glow .6s ease forwards}@keyframes perfect-glow{0%{text-shadow:0 0 0px #fbbf24}50%{text-shadow:0 0 24px #fbbf24,0 0 48px #f59e0b}to{text-shadow:0 0 8px #fbbf24}}.score-bar{width:100%;height:4px;background:var(--bar-bg);border-radius:2px;overflow:hidden}.color-name{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim);min-height:1em}.score-bar-fill{height:100%;background:var(--fg);border-radius:2px;width:0%;transition:width .6s ease}#finalScreen{display:none;flex-direction:column;align-items:center;gap:16px;text-align:center}.grade{font-size:7rem;font-weight:800;line-height:1}@keyframes grade-pop{0%{transform:scale(.2);opacity:0}65%{transform:scale(1.25);opacity:1}82%{transform:scale(.92)}to{transform:scale(1)}}.grade.pop{animation:grade-pop .55s cubic-bezier(.34,1.56,.64,1) forwards}.final-avg{font-size:1rem;color:var(--fg-dim);letter-spacing:2px}.final-meta{display:flex;gap:20px;align-items:center}.final-best{font-size:1rem;letter-spacing:1px;color:var(--fg);font-weight:600}.final-best.record{font-size:1.1rem;letter-spacing:2px;text-transform:uppercase}.final-streak{font-size:1rem;font-weight:600}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tutorial-overlay[hidden]{display:none}.tutorial-card{background:var(--bg);border:1.5px solid var(--border);border-radius:20px;padding:32px 28px;max-width:320px;width:calc(100% - 48px);display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}.daily-card{background:#1c2333;border:1px solid rgba(255,255,255,.09);border-radius:24px;padding:28px 28px 24px;max-width:300px;width:calc(100% - 40px);display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 28px 64px #0000008c;position:relative;overflow:hidden}body.light .daily-card{background:#fff;border-color:#11182717;box-shadow:0 16px 48px #0000001f}.daily-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--daily-accent, rgba(255,255,255,.18))}.daily-day{font-size:.6rem;letter-spacing:5px;text-transform:uppercase;color:var(--fg-dim);margin-top:4px;margin-bottom:14px}.daily-grade{font-size:6rem;font-weight:800;line-height:1;margin-bottom:10px}@keyframes daily-grade-pop{0%{transform:scale(.3);opacity:0}65%{transform:scale(1.18);opacity:1}82%{transform:scale(.93)}to{transform:scale(1);opacity:1}}.daily-grade.pop{animation:daily-grade-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}.daily-score{font-size:1rem;color:var(--fg-dim);letter-spacing:3px;margin-bottom:20px}.daily-palette{display:flex;gap:8px;margin-bottom:22px;min-height:44px;align-items:center;justify-content:center}.daily-palette .palette-swatch{width:44px;height:44px;border-radius:12px}.daily-actions{display:flex;gap:10px;width:100%}.daily-actions .btn{flex:1;padding:13px 0}.tutorial-title{font-size:.7rem;letter-spacing:4px;text-transform:uppercase;opacity:.6}.tutorial-steps{list-style:none;display:flex;flex-direction:column;gap:16px;counter-reset:step;width:100%}.tutorial-steps li{counter-increment:step;display:flex;align-items:center;gap:14px;font-size:.9rem;line-height:1.4;text-align:left}.tutorial-steps li:before{content:counter(step);flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;letter-spacing:0;opacity:.7}.final-palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:280px}.palette-swatch{width:36px;height:36px;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .3s}.palette-swatch.good{outline-color:#4ade80}.palette-swatch.bad{outline-color:#f87171}.history-wrap{display:flex;flex-direction:column;align-items:center;gap:8px}.history-chart{display:flex;align-items:flex-end;gap:5px;width:220px;height:52px}.h-bar{flex:1;background:var(--fg);opacity:.25;border-radius:3px 3px 0 0;min-height:3px;transition:height .4s ease,opacity .3s}.h-bar.current{opacity:1}.h-bar.h-bar-empty{opacity:.07;height:100%!important}.settings-card{min-width:240px;width:calc(100% - 80px);max-width:300px}.settings-rows{display:flex;flex-direction:column;gap:6px;width:100%}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border)}.settings-row:last-child{border-bottom:none}.settings-label{font-size:.65rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim)}.ach-card-overlay{max-width:360px;width:calc(100% - 40px);gap:16px}.ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}.ach-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:12px;border:1.5px solid var(--border);text-align:center;opacity:.28;filter:grayscale(1);transition:opacity .3s,filter .3s}.ach-item.unlocked{opacity:1;filter:none}.ach-item-emoji{font-size:1.6rem;line-height:1}.ach-item-name{font-size:.52rem;letter-spacing:.5px;text-transform:uppercase;color:var(--fg-dim);line-height:1.3}.ach-item-desc{font-size:.5rem;color:var(--fg-dim);line-height:1.3;opacity:.7}.stats-card{min-width:260px;width:calc(100% - 48px);max-width:320px}.stats-nums{display:flex;justify-content:space-around;width:100%;padding:4px 0}.stat-block{display:flex;flex-direction:column;align-items:center;gap:4px}.stat-value{font-size:2rem;font-weight:700;line-height:1}.stat-label{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim)}.stats-section-label{font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--fg-dim);align-self:flex-start}.grade-bars{display:flex;flex-direction:column;gap:6px;width:100%}.grade-bar-row{display:flex;align-items:center;gap:8px}.grade-bar-letter{font-size:.75rem;font-weight:700;width:14px;text-align:center}.grade-bar-track{flex:1;height:6px;background:var(--bar-bg);border-radius:3px;overflow:hidden}.grade-bar-fill{height:100%;border-radius:3px;width:0%;transition:width .5s ease}.grade-bar-count{font-size:.65rem;color:var(--fg-dim);width:20px;text-align:right}.stats-footer{display:flex;flex-direction:column;gap:6px;width:100%;padding-top:10px;border-top:1px solid var(--border)}.stats-footer-item{display:flex;justify-content:space-between;align-items:center}.stats-footer-label{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--fg-dim)}.stats-footer-val{font-size:.85rem;font-weight:600}.ach-toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-140%);background:var(--primary-bg);color:var(--primary-fg);border-radius:20px;padding:12px 20px 12px 16px;display:flex;align-items:center;gap:12px;z-index:300;box-shadow:0 8px 32px #00000059;pointer-events:none;white-space:nowrap}.ach-toast[hidden]{display:none}@keyframes ach-toast-in{0%{transform:translate(-50%) translateY(-140%)}to{transform:translate(-50%) translateY(0)}}@keyframes ach-toast-out{0%{transform:translate(-50%) translateY(0);opacity:1}to{transform:translate(-50%) translateY(-140%);opacity:0}}.ach-toast.show{animation:ach-toast-in .45s cubic-bezier(.34,1.56,.64,1) forwards}.ach-toast-emoji{font-size:1.6rem;line-height:1}.ach-toast-label{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;opacity:.6}.ach-toast-name{font-size:.85rem;font-weight:700;letter-spacing:.5px}footer{font-size:.6rem;letter-spacing:2px;color:var(--fg-dim);opacity:.5;text-transform:uppercase}footer a{color:inherit;text-decoration:none}footer a:hover{opacity:.8;text-decoration:underline}