*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}:root{color-scheme:dark;--bg: #1a1a2e;--surface: #16213e;--surface2: #0f3460;--accent: #e94560;--text: #eaeaea;--text-muted: #9a9ab0;--correct: #2ecc71;--incorrect: #e74c3c;--radius: 12px;--transition: .2s ease}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1rem}header{text-align:center;margin-bottom:1.25rem}.stats-row{display:flex;justify-content:center;gap:2rem;margin-top:.6rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}.stat-label{font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.stat-value{font-size:1.25rem;font-weight:700;line-height:1}h1{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}.subtitle{color:var(--text-muted);margin-top:.3rem;font-size:.875rem}main{width:100%;max-width:480px}.game-area{display:flex;flex-direction:column;align-items:center;gap:1rem}.swatch{width:min(200px,60vw);height:min(200px,60vw);border-radius:var(--radius);box-shadow:0 8px 32px #00000080;border:3px solid rgba(255,255,255,.08);transition:background-color var(--transition)}.choices{width:100%;display:flex;flex-direction:column;gap:.6rem}.choice-btn{width:100%;min-height:44px;padding:.75rem 1rem;background:var(--surface);color:var(--text);border:2px solid rgba(255,255,255,.1);border-radius:var(--radius);font-size:.95rem;font-family:inherit;cursor:pointer;text-align:center;overflow-wrap:break-word;word-break:break-word;transition:background var(--transition),border-color var(--transition),transform var(--transition)}.choice-btn:hover:not(:disabled){background:var(--surface2);border-color:#ffffff40;transform:translateY(-1px)}.choice-btn:disabled{cursor:default}.choice-btn.correct{background:#2ecc7133;border-color:var(--correct);color:var(--correct)}.choice-btn.incorrect{background:#e74c3c33;border-color:var(--incorrect);color:var(--incorrect)}.info-panel{width:100%;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1rem 1.25rem;transition:opacity var(--transition),transform var(--transition)}.info-panel.hidden,.choices.hidden{display:none}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center}.info-label{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.3rem}.info-value{display:block;font-size:.875rem;font-weight:600;word-break:break-all}.info-value.mono{font-family:ui-monospace,Cascadia Code,monospace}.similar-panel{width:100%;background:var(--surface);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:1rem 1.25rem;display:flex;gap:.5rem}.similar-panel.hidden{display:none}.similar-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:.35rem}.similar-swatch{width:48px;height:48px;border-radius:6px;border:1px solid rgba(255,255,255,.15);flex-shrink:0}.similar-center .similar-swatch{width:60px;height:60px;border:2px solid rgba(255,255,255,.4)}.similar-name{display:block;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);text-align:center;word-break:break-word}.next-btn{min-height:44px;padding:.75rem 1.75rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-family:inherit;font-weight:600;cursor:pointer;transition:opacity var(--transition),transform var(--transition)}.next-btn:hover{opacity:.9;transform:translateY(-1px)}.next-btn.hidden{display:none}@keyframes drain{0%{width:100%}to{width:0%}}.reveal-bar{width:min(200px,60vw);height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.reveal-bar.hidden{display:none}.reveal-bar-fill{height:100%;background:var(--text-muted);border-radius:3px;width:100%}.reveal-bar-fill.draining{animation:drain 3s linear forwards}.choice-btn{position:relative}.choice-btn.answered{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.choice-btn.answered:before{content:"";display:inline-block;width:18px;height:18px;flex-shrink:0;border-radius:4px;background:var(--btn-color);border:1px solid rgba(255,255,255,.2)}footer{margin-top:1.5rem;width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem}#lang-switcher,#colorset-switcher{display:flex;align-items:center;font-size:.8rem;color:var(--text-muted)}#lang-select,#colorset-select{background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,.15);border-radius:6px;padding:.3rem .5rem;font-size:.8rem;font-family:inherit;cursor:pointer}#lang-select:focus,#colorset-select:focus{outline:2px solid var(--accent);outline-offset:2px}.source-link{width:100%;text-align:center;font-size:.7rem;color:var(--text-muted);text-decoration:none;opacity:.6}.source-link:hover{text-decoration:underline;opacity:1}@media(min-width:600px){body{padding:2rem 1rem}header{margin-bottom:2.5rem}h1{font-size:2rem}.subtitle{font-size:.95rem;margin-top:.4rem}.game-area{gap:1.5rem}.swatch{width:260px;height:260px}.reveal-bar{width:260px}.choices{flex-direction:row;gap:.75rem}.choice-btn{padding:.85rem 1.25rem;font-size:1rem}.info-panel{padding:1.25rem 1.5rem}.info-grid{gap:1rem}.info-label{font-size:.7rem;margin-bottom:.35rem}.info-value{font-size:.95rem}.next-btn{padding:.85rem 2rem}}