*,:before,:after{box-sizing:border-box;margin:0;padding:0}#home-btn{z-index:200;color:#ffffffbf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff14;border:1px solid #ffffff26;border-radius:20px;align-items:center;gap:6px;padding:8px 14px;font-size:13px;text-decoration:none;transition:background .2s,color .2s;display:flex;position:fixed;top:14px;left:14px}#home-btn:hover{color:#fff;background:#ffffff2e}#home-btn svg{flex-shrink:0;width:15px;height:15px}:root{--bg:#111;--card-r:clamp(16px, 4vw, 24px);--text:#f0f0f0;--muted:#ffffff73;--dim:#fff3;--border:#ffffff1a;--ease:cubic-bezier(.4, 0, .2, 1);--spring:cubic-bezier(.34, 1.56, .64, 1);--card-w:min(88vw, 400px);--touch-min:44px}html{-webkit-text-size-adjust:100%}html,body{background:var(--bg);height:100dvh;color:var(--text);-webkit-font-smoothing:antialiased;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,system-ui,sans-serif;overflow-x:hidden}.tw-page{background:var(--bg);min-height:100dvh;overflow:hidden auto}#app{min-height:100dvh;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));justify-content:center;align-items:center;display:flex}.screen{width:100%;animation:fadeIn .3s var(--ease);justify-content:center;align-items:center;display:none}.screen.active{display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.start-card{flex-direction:column;gap:clamp(14px,3vw,20px);width:100%;max-width:380px;display:flex}.start-logo{text-align:center}.title{letter-spacing:-2px;font-size:clamp(2.2rem,8vw,3.2rem);font-weight:800;line-height:1}.title-accent{background:linear-gradient(135deg,#f97316,#ec4899,#8b5cf6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.tagline{color:var(--muted);margin-top:10px;font-size:clamp(.8rem,2.5vw,.92rem);line-height:1.6}.best-score-row{border:1px solid var(--border);background:#ffffff0a;border-radius:12px;justify-content:space-between;align-items:center;padding:11px 14px;display:flex}.best-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.best-value{font-size:.95rem;font-weight:700}.diff-group{flex-direction:column;gap:8px;display:flex}.diff-btn{min-height:var(--touch-min);border:1.5px solid var(--border);color:var(--text);cursor:pointer;text-align:left;background:#ffffff08;border-radius:12px;justify-content:space-between;align-items:center;padding:10px 14px;transition:border-color .2s,background .2s;display:flex}.diff-btn:hover{background:#ffffff0f;border-color:#ffffff40}.diff-btn.active{background:#ffffff14;border-color:#ffffff8c}.diff-name{font-size:.9rem;font-weight:600}.diff-meta{color:var(--muted);font-size:.72rem}.btn-cta{width:100%;min-height:var(--touch-min);color:#111;cursor:pointer;background:#fff;border:none;border-radius:12px;padding:12px 14px;font-size:.95rem;font-weight:700;transition:opacity .15s,transform .1s}.btn-cta:hover{opacity:.88}.btn-cta:active{transform:scale(.98)}.btn-outline{width:100%;min-height:var(--touch-min);color:var(--text);border:1.5px solid var(--border);cursor:pointer;background:0 0;border-radius:12px;padding:10px 14px;font-size:.95rem;font-weight:600;transition:border-color .2s,background .2s}.btn-outline:hover{background:#ffffff0d;border-color:#ffffff4d}.start-hint{color:var(--dim);text-align:center;font-size:.75rem;line-height:1.5}.game-card{width:var(--card-w);aspect-ratio:3/4;max-height:80dvh;max-width:min(var(--card-w), calc(80dvh * 3 / 4));border-radius:var(--card-r);transition:background-color .15s var(--ease);background-color:#888;position:relative;overflow:hidden;box-shadow:0 4px 6px #00000026,0 20px 60px #00000080,0 0 0 1px #ffffff0f}.card-counter{color:#ffffffbf;letter-spacing:.03em;pointer-events:none;z-index:10;text-shadow:0 1px 4px #0000004d;font-size:clamp(11px,3vw,14px);font-weight:600;line-height:1;position:absolute;top:clamp(10px,3%,16px);left:clamp(12px,4%,18px)}.card-watermark{color:#ffffff59;letter-spacing:.04em;pointer-events:none;z-index:10;font-size:clamp(9px,2.5vw,11px);font-weight:500;position:absolute;bottom:clamp(10px,3%,16px);left:clamp(12px,4%,18px)}.auto-contrast{color:var(--contrast-color,#ffffffbf);text-shadow:none}.card-countdown{text-align:right;pointer-events:none;z-index:10;position:absolute;top:clamp(8px,2.5%,14px);right:clamp(12px,4%,18px)}.countdown-nums{justify-content:flex-end;align-items:baseline;line-height:1;display:flex}.cd-main{color:#fffffff2;letter-spacing:-3px;font-variant-numeric:tabular-nums;text-shadow:0 2px 12px #00000040;font-size:clamp(32px,13vw,56px);font-weight:800}.cd-dim{color:#ffffff73;letter-spacing:-1px;font-variant-numeric:tabular-nums;align-self:flex-end;margin-left:1px;padding-bottom:clamp(3px,1%,6px);font-size:clamp(18px,7vw,30px);font-weight:700}.countdown-label{color:#ffffff80;text-transform:uppercase;letter-spacing:.1em;margin-top:3px;font-size:clamp(8px,2vw,10px);font-weight:600}.sliders-col{z-index:10;flex-direction:row;width:24%;display:flex;position:absolute;top:0;bottom:0;left:0}.vslider{cursor:ns-resize;touch-action:none;-webkit-user-select:none;user-select:none;min-width:calc(var(--touch-min) / 3);flex:1;position:relative}.vslider-track{position:absolute;inset:0}.vslider-thumb{width:clamp(var(--touch-min), 8vw, 30px);height:clamp(var(--touch-min), 8vw, 30px);pointer-events:none;z-index:2;background:#fff;border-radius:50%;transition:transform 50ms;position:absolute;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0006,0 0 0 2px #ffffffe6}.vslider.dragging .vslider-thumb{transform:translate(-50%,-50%)scale(1.15)}.vslider+.vslider:before{content:"";z-index:3;background:#ffffff1f;width:1px;position:absolute;top:0;bottom:0;left:0}.confirm-btn{cursor:pointer;width:clamp(48px,16vw,68px);height:clamp(48px,16vw,68px);transition:transform .15s var(--spring), box-shadow .15s;z-index:20;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;bottom:clamp(14px,4%,22px);right:clamp(14px,4%,22px);box-shadow:0 4px 20px #00000059,0 0 0 2px #ffffff80}.confirm-btn:hover{transform:scale(1.06)}.confirm-btn:active{transform:scale(.93);box-shadow:0 2px 10px #0000004d}.confirm-btn svg{color:#111;width:clamp(20px,5.5vw,28px);height:clamp(20px,5.5vw,28px)}.rr-card{flex-direction:column;display:flex;overflow:hidden;background:0 0!important}.rr-half{transition:background-color .3s var(--ease);flex-direction:column;flex:1;justify-content:space-between;padding:clamp(10px,3.5%,18px) clamp(12px,4%,20px);display:flex;position:relative}.rr-divider{z-index:5;background:#00000026;flex-shrink:0;height:1.5px}.rr-counter{letter-spacing:.03em;color:var(--rr-top-contrast,#0000008c);pointer-events:none;font-size:clamp(11px,3vw,14px);font-weight:600;position:absolute;top:clamp(10px,3%,16px);left:clamp(12px,4%,18px)}.rr-score-display{letter-spacing:-3px;color:var(--rr-top-contrast,#000000b3);font-variant-numeric:tabular-nums;font-size:clamp(32px,13vw,56px);font-weight:800;line-height:1;position:absolute;top:clamp(6px,2%,12px);right:clamp(12px,4%,18px)}.rr-hsb-block{flex-direction:column;gap:2px;margin-top:auto;display:flex}.rr-half-label{letter-spacing:.03em;opacity:.65;font-size:clamp(10px,3vw,13px);font-weight:500}.rr-hsb-val{letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(11px,3.2vw,14px);font-weight:700}.rr-top .rr-counter,.rr-top .rr-half-label,.rr-top .rr-hsb-val{color:var(--rr-top-contrast,#000000bf)}.rr-bottom .rr-half-label,.rr-bottom .rr-hsb-val{color:var(--rr-bottom-contrast,#ffffffd9)}.rr-next-btn{position:absolute;bottom:clamp(14px,4%,20px);right:clamp(14px,4%,20px)}#screen-results{align-items:flex-start;min-height:100dvh;padding:clamp(24px,6vw,40px) 16px clamp(40px,10vw,60px);overflow-y:auto}.results-wrap{flex-direction:column;gap:clamp(16px,4vw,24px);width:100%;max-width:400px;display:flex}.results-header{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex}.results-eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem}.results-score-row{align-items:baseline;gap:4px;display:flex}.results-score-num{letter-spacing:-4px;font-size:clamp(3rem,14vw,5rem);font-weight:800;line-height:1}.results-score-denom{color:var(--muted);font-size:clamp(1.1rem,4vw,1.5rem);font-weight:600}.results-accuracy{color:var(--muted);font-size:.85rem}.results-accuracy strong{color:var(--text)}.record-badge{color:#fff;background:linear-gradient(135deg,#f97316,#ec4899);border-radius:99px;padding:5px 14px;font-size:.78rem;font-weight:700;animation:1.4s ease-in-out infinite pulseBadge}@keyframes pulseBadge{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.results-rounds{flex-direction:column;gap:10px;width:100%;display:flex}.round-card{border:1px solid var(--border);animation:slideIn .35s var(--ease) both;background:#ffffff08;border-radius:14px;align-items:center;gap:12px;padding:13px;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.round-swatches{flex-shrink:0;gap:7px;display:flex}.round-swatch-block{flex-direction:column;align-items:center;gap:4px;display:flex}.round-swatch{border:1px solid #ffffff14;border-radius:10px;width:clamp(40px,11vw,52px);height:clamp(40px,11vw,52px)}.swatch-label{color:var(--dim);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:.58rem}.round-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.round-meta{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:.68rem;overflow:hidden}.round-score-row{align-items:baseline;gap:3px;display:flex}.round-score{font-size:1.3rem;font-weight:800;line-height:1}.round-score-max{color:var(--muted);font-size:.72rem}.round-bar-wrap{background:#ffffff14;border-radius:99px;width:100%;height:4px;overflow:hidden}.round-bar{height:100%;transition:width .6s var(--ease) .15s;background:linear-gradient(90deg,#f97316,#ec4899);border-radius:99px;width:0%}.score-great{color:#4ade80}.score-good{color:#facc15}.score-bad{color:#f87171}.results-actions{flex-direction:column;gap:8px;width:100%;display:flex}.share-toast{bottom:max(28px, env(safe-area-inset-bottom));background:var(--text);color:#111;opacity:0;pointer-events:none;white-space:nowrap;z-index:100;border-radius:99px;padding:9px 18px;font-size:.82rem;font-weight:600;transition:opacity .25s,transform .25s;position:fixed;left:50%;transform:translate(-50%)translateY(20px)}.share-toast.visible{opacity:1;transform:translate(-50%)translateY(0)}@media (orientation:landscape) and (max-height:500px){#app{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(8px, env(safe-area-inset-bottom));align-items:center}.game-card{max-height:92dvh;max-width:min(var(--card-w), calc(92dvh * 3 / 4))}}@media (min-width:768px){:root{--card-w:min(360px, 50vw)}.start-card{max-width:420px}.results-wrap{max-width:440px}}