:root{--bg:#0c0c14;--surface-1:#141420;--surface-2:#1c1c2a;--surface-3:#242434;--accent:#c9a86c;--accent-dim:#c9a86c21;--accent-border:#c9a86c47;--blue:#8b9cf4;--blue-dim:#8b9cf421;--blue-border:#8b9cf447;--rose:#e88fa0;--rose-dim:#e88fa021;--rose-border:#e88fa047;--correct:#52e38a;--correct-dim:#52e38a21;--error:#ff6b6b;--error-dim:#ff6b6b21;--text:#ede8df;--muted:#ede8df8c;--dim:#ede8df47;--faint:#ede8df21;--border:#ffffff14;--border-strong:#ffffff26;--radius-xl:24px;--radius-lg:20px;--radius-md:16px;--radius-sm:12px;--font-display:"Bricolage Grotesque", system-ui, sans-serif;--font-body:"DM Sans", system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:linear-gradient(180deg, #24243461, transparent 34rem), var(--bg);color:var(--text);font-family:var(--font-body)}button,input,select{font:inherit}button{border:0}.app-shell{width:min(100%,780px);min-height:100vh;margin:0 auto;padding:clamp(18px,4vw,34px)}.screen{flex-direction:column;gap:20px;min-height:calc(100vh - clamp(36px,8vw,68px));display:flex}.topline,.header-row,.stat-row,.mode-duration-row,.game-toolbar,.button-row,.answer-row,.stat-topline,.confirm-row{align-items:center;display:flex}.topline,.header-row,.game-toolbar,.stat-topline{justify-content:space-between;gap:16px}.brand-lockup{align-items:center;gap:14px;min-width:0;display:flex}.logo-mark{border:1px solid var(--accent-border);background:var(--accent-dim);border-radius:18px;flex:none;place-items:center;width:58px;height:58px;display:grid}.logo-mark svg{width:42px;height:42px}.eyebrow{color:var(--muted);text-transform:uppercase;font-size:.74rem;font-weight:700}h1,h2,h3,p{margin:0}.title{color:var(--text);font-family:var(--font-display);font-size:clamp(2rem,6vw,3.3rem);font-weight:800;line-height:1}.subtitle{color:var(--muted);margin-top:4px;font-size:.9rem}.ghost-button,.back-button,.text-button{min-height:40px;color:var(--accent);border-radius:var(--radius-sm);cursor:pointer;background:0 0;padding:8px 10px}.ghost-button:hover,.back-button:hover,.text-button:hover{background:var(--accent-dim)}.mode-list,.setup-list,.stats-list{gap:12px;display:grid}.mode-card,.panel,.stat-card,.stat-row-card,.feedback-panel,.confirm-panel{border:1px solid var(--border);background:var(--surface-1);border-radius:var(--radius-xl)}.mode-card{width:100%;min-height:118px;color:var(--text);text-align:left;cursor:pointer;align-items:center;gap:16px;padding:18px 20px;display:flex;position:relative;overflow:hidden}.mode-card:hover{background:var(--surface-2)}.mode-card[data-accent=amber]:hover{border-color:var(--accent-border)}.mode-card[data-accent=blue]:hover{border-color:var(--blue-border)}.mode-card[data-accent=rose]:hover{border-color:var(--rose-border)}.mode-icon{border-radius:14px;flex:none;place-items:center;width:48px;height:48px;font-size:1.25rem;font-weight:800;display:grid}.mode-card[data-accent=amber] .mode-icon{color:var(--accent);background:var(--accent-dim)}.mode-card[data-accent=blue] .mode-icon{color:var(--blue);background:var(--blue-dim)}.mode-card[data-accent=rose] .mode-icon{color:var(--rose);background:var(--rose-dim)}.mode-body{flex:1;min-width:0}.mode-title,.section-title,.screen-title,.feedback-title{font-family:var(--font-display);font-weight:800}.mode-title{margin-bottom:4px;font-size:1.28rem}.mode-subtitle,.small-muted,.stat-label{color:var(--muted)}.mode-subtitle{font-size:.92rem;line-height:1.35}.mode-duration-row{flex-wrap:wrap;gap:8px;margin-top:14px}.pill{border:1px solid var(--blue-border);min-width:56px;min-height:32px;color:var(--blue);cursor:pointer;background:0 0;border-radius:999px;padding:6px 12px;font-weight:700}.pill.is-selected{background:var(--blue);color:var(--bg)}.stats-button{border:1px solid var(--border);border-radius:var(--radius-lg);min-height:58px;color:var(--text);cursor:pointer;background:0 0;justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.stats-button:hover{border-color:var(--border-strong)}.bars-icon{align-items:end;gap:4px;width:28px;height:24px;display:flex}.bars-icon span{background:var(--accent);border-radius:3px;width:6px}.bars-icon span:first-child{height:9px}.bars-icon span:nth-child(2){height:16px}.bars-icon span:nth-child(3){height:23px}.back-button{align-self:flex-start;align-items:center;gap:6px;display:inline-flex}.back-chevron{font-family:var(--font-display);font-size:1.8rem;line-height:1}.screen-heading{min-width:0}.screen-title{font-size:clamp(1.45rem,5vw,2rem);line-height:1.05}.setup-list{padding-bottom:86px}.setup-section{gap:10px;display:grid}.section-label{color:var(--muted);text-transform:uppercase;font-size:.76rem;font-weight:700}.chip-row,.playback-grid{flex-wrap:wrap;gap:8px;display:flex}.chip,.playback-option{border:1px solid var(--border);min-height:38px;color:var(--text);background:var(--surface-1);cursor:pointer;white-space:nowrap;border-radius:999px;padding:8px 15px}.chip.mono{font-family:var(--font-mono);font-size:.84rem}.chip.is-selected{background:var(--accent);border-color:var(--accent-border);color:var(--bg);font-weight:800}.chip.is-soft-selected{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}.preview-line{color:var(--accent);font-family:var(--font-mono);font-size:.82rem;line-height:1.6}.playback-grid{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.playback-option{border-radius:var(--radius-md);color:var(--muted);text-align:center;white-space:normal;width:100%}.playback-option.is-selected{background:var(--surface-3);border-color:var(--border-strong);color:var(--text)}.volume-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.volume-value{color:var(--accent);font-family:var(--font-mono);font-size:.82rem;font-weight:800}.volume-slider{width:100%;height:34px;accent-color:var(--accent);cursor:pointer;appearance:none;background:0 0;margin:0}.volume-slider::-webkit-slider-runnable-track{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;height:6px}.volume-slider::-webkit-slider-thumb{border:2px solid var(--bg);background:var(--accent);width:20px;height:20px;box-shadow:0 0 0 5px var(--accent-dim);appearance:none;border-radius:50%;margin-top:-8px}.volume-slider::-moz-range-track{background:var(--surface-3);border:1px solid var(--border);border-radius:999px;height:6px}.volume-slider::-moz-range-thumb{border:2px solid var(--bg);background:var(--accent);width:20px;height:20px;box-shadow:0 0 0 5px var(--accent-dim);border-radius:50%}.sticky-action{background:linear-gradient(180deg, transparent, var(--bg) 40%, var(--bg));width:min(100%,780px);padding:38px clamp(18px,4vw,34px) 16px;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.primary-button,.secondary-button,.answer-button{border-radius:var(--radius-md);cursor:pointer}.primary-button{background:var(--accent);width:100%;min-height:56px;color:var(--bg);font-family:var(--font-display);padding:14px 18px;font-size:1.08rem;font-weight:800}.primary-button:disabled{background:var(--surface-2);color:var(--dim);cursor:not-allowed}.secondary-button{background:var(--surface-1);min-height:48px;color:var(--text);border:1px solid var(--border);padding:12px 16px}.secondary-button:disabled{color:var(--dim);cursor:not-allowed}.game-screen{gap:14px}.game-toolbar{min-height:48px}.mode-name{color:var(--accent);font-weight:700}.stat-cluster{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:clamp(12px,4vw,22px);display:flex}.stat-pill{text-align:center;min-width:52px}.stat-value{color:var(--accent);font-family:var(--font-display);font-size:1.26rem;font-weight:800;line-height:1;display:block}.stat-value.muted{color:var(--muted)}.stat-value.danger{color:var(--error)}.stat-label{text-transform:uppercase;margin-top:4px;font-size:.66rem;font-weight:700;display:block}.hearts{color:var(--rose);gap:4px;font-size:1.1rem;display:flex}.hearts .lost{color:var(--dim)}.feedback-panel{text-align:center;place-items:center;min-height:104px;padding:18px;display:grid}.feedback-panel.playing{background:0 0;border-color:#0000}.feedback-panel.correct{background:var(--correct-dim);border-color:#52e38a54}.feedback-panel.incorrect{background:var(--error-dim);border-color:#ff6b6b54}.feedback-panel.gameover,.feedback-panel.timeout{background:var(--accent-dim);border-color:var(--accent-border)}.feedback-title{font-size:clamp(1.3rem,5vw,1.8rem);line-height:1.1}.feedback-title.correct-color{color:var(--correct)}.feedback-title.error-color{color:var(--error)}.feedback-title.accent-color{color:var(--accent)}.feedback-code{color:var(--error);font-family:var(--font-mono);margin:5px 0;font-size:2rem;font-weight:800;line-height:1}.feedback-detail{color:var(--muted);font-family:var(--font-mono);margin-top:7px;font-size:.82rem}.wave-bars{justify-content:center;align-items:center;gap:6px;height:42px;display:flex}.wave-bars span{background:var(--blue);border-radius:999px;width:4px;animation:.76s ease-in-out infinite alternate wave}.wave-bars span:first-child{height:12px}.wave-bars span:nth-child(2){height:18px;animation-delay:.1s}.wave-bars span:nth-child(3){height:26px;animation-delay:.2s}.wave-bars span:nth-child(4){height:34px;animation-delay:.3s}.wave-bars span:nth-child(5){height:40px;animation-delay:.4s}@keyframes wave{0%{transform:scaleY(.32)}to{transform:scaleY(1)}}.button-row{gap:10px}.button-row .primary-button{flex:2}.button-row .secondary-button{flex:1}.answer-grid{gap:7px;display:grid}.answer-row{gap:7px}.answer-slot{flex:1;min-width:0}.answer-button{background:var(--surface-2);width:100%;min-height:68px;color:var(--accent);border:1px solid var(--border-strong);place-items:center;gap:2px;padding:10px 8px;display:grid}.answer-button:disabled{color:#ede8df2e;border-color:var(--border);cursor:not-allowed}.answer-button.correct{background:var(--correct-dim);color:var(--correct);border-color:#52e38a54}.answer-button.wrong{background:var(--error-dim);color:var(--error);border-color:#ff6b6b54}.answer-button.revealed{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent)}.answer-short{font-family:var(--font-mono);font-size:1.35rem;font-weight:800;line-height:1}.answer-full{color:var(--dim);text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.62rem;font-weight:800;overflow:hidden}.loading-line{color:var(--muted);text-align:center;font-size:.9rem}.stat-card{padding:20px}.stat-card-grid{grid-template-columns:1fr auto;align-items:center;gap:20px;display:grid}.overall-percent{color:var(--text);font-family:var(--font-display);font-size:clamp(2.6rem,12vw,3.5rem);font-weight:800;line-height:.95}.donut{background:conic-gradient(var(--donut-color) calc(var(--pct) * 1%), var(--surface-3) 0);border-radius:50%;place-items:center;width:78px;height:78px;display:grid;position:relative}.donut:after{content:"";background:var(--surface-1);border-radius:50%;width:60px;height:60px;position:absolute}.donut span{z-index:1;color:var(--muted);font-size:.74rem;font-weight:800;position:relative}.stat-row-card{gap:8px;padding:14px 16px;display:grid}.interval-id{font-family:var(--font-mono);font-weight:800}.progress-track{background:var(--surface-3);border-radius:999px;height:5px;overflow:hidden}.progress-fill{background:var(--bar-color);border-radius:inherit;height:100%}.empty-state{color:var(--muted);text-align:center;padding:70px 18px;line-height:1.6}.danger-button{color:#ff6b6bbf;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:1px solid #ff6b6b54;min-height:46px;padding:12px 16px}.confirm-panel{background:var(--error-dim);border-color:#ff6b6b54;padding:14px}.confirm-row{gap:8px;margin-top:10px}.confirm-row button{flex:1}.danger-solid{border-radius:var(--radius-sm);background:var(--error);color:#fff;cursor:pointer;min-height:42px}.spacer{visibility:hidden}@media (max-width:560px){.app-shell{padding:16px}.topline{align-items:flex-start}.logo-mark{border-radius:15px;width:48px;height:48px}.mode-card{min-height:108px;padding:16px}.mode-icon{width:42px;height:42px}.playback-grid{grid-template-columns:1fr}.game-toolbar{align-items:flex-start}.stat-cluster{gap:10px}.answer-button{min-height:64px}}