:root{color-scheme:dark;--ui-scale: 1;--beat: .6s}*{margin:0;padding:0;box-sizing:border-box}body{background:#07070c;font-family:Teko,system-ui,sans-serif;color:#fff;overflow:hidden}#stage{position:relative;width:100vw;height:100vh;display:grid;place-items:center;will-change:transform}#webcam,#fruit,#overlay{position:absolute;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}#fruit{z-index:1}#overlay{z-index:31;pointer-events:none}#status{position:absolute;left:10px;bottom:9px;padding:1px 9px;border-radius:4px;background:#00000059;font-family:Teko,sans-serif;font-size:15px;letter-spacing:.06em;color:#ffffff73;pointer-events:none;z-index:10;transform:scale(var(--ui-scale));transform-origin:left bottom}#hud{position:absolute;top:16px;left:0;right:0;display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:0 22px;z-index:15;pointer-events:none}#hud.hidden{display:none}.hpwrap{flex:1;max-width:44%;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.hpwrap.p1{align-items:flex-end}.plate{font-family:Bungee,sans-serif;font-size:clamp(13px,1.9vmin,40px);line-height:1.4;padding:0 12px;border-radius:4px;color:#07070c}.p0 .plate{background:#38dcff;box-shadow:0 0 16px #38dcffcc}.p1 .plate{background:#ff60bc;box-shadow:0 0 16px #ff60bccc}.bar{position:relative;width:100%;height:clamp(16px,2.4vmin,52px);background:#000000a6;border:3px solid #fff;border-radius:4px;overflow:hidden;transform:skew(-14deg);box-shadow:0 0 0 2px #000000b3,0 5px 16px #00000080}.p1 .bar{transform:skew(14deg)}.bar span{position:absolute;top:0;bottom:0;left:0;display:block;width:100%}.p1 .bar span{left:auto;right:0}.trail{background:#ffe23a;transition:width .45s ease .14s}.fill{transition:width .07s linear}.p0 .fill{background:linear-gradient(180deg,#b6f3ff,#38dcff);box-shadow:0 0 20px #38dcff}.p1 .fill{background:linear-gradient(180deg,#ffc7e8,#ff60bc);box-shadow:0 0 20px #ff60bc}.vs{font-family:Bungee,sans-serif;font-size:clamp(20px,3.5vmin,72px);margin-top:16px;color:#fff;-webkit-text-stroke:2px #111;text-shadow:0 0 18px rgba(255,255,255,.55);transform:rotate(-6deg)}.vs.low{color:#ff4f6d;text-shadow:0 0 24px rgba(255,79,109,.75);animation:timerPulse .5s ease-in-out infinite}#victory{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#3c0e34b3,#05050bed);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#victory.hidden{display:none}#victory h1{font-family:Bungee,sans-serif;font-size:clamp(40px,9vw,104px);line-height:1;-webkit-text-stroke:4px #0c0c12;text-shadow:7px 7px 0 rgba(0,0,0,.45);transform:rotate(-2deg)}.vstats{display:flex;flex-direction:column;gap:10px;font-family:Teko,sans-serif;font-size:clamp(18px,2.6vw,27px);letter-spacing:.14em}.vstat{display:flex;align-items:center;gap:14px}.vstat .who{font-family:Bungee,sans-serif;font-size:.72em;padding:0 10px;border-radius:4px;color:#07070c}.vstat.p0 .who{background:#38dcff;box-shadow:0 0 14px #38dcffb3}.vstat.p1 .who{background:#ff60bc;box-shadow:0 0 14px #ff60bcb3}#btn-rematch:hover{border-color:#ffd23a}.menu-btns button.hand-hover{transform:skew(-6deg) translateY(-4px);box-shadow:0 10px #00000073,0 0 32px #ffffff38;border-color:#ffd23a}#victory .vhint{font-family:Teko,sans-serif;font-size:clamp(15px,2.2vw,22px);letter-spacing:.28em;color:#ffffffbf}#menu{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#3c0e34b3,#05050bed);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#menu.hidden{display:none}.menu-card{display:flex;flex-direction:column;align-items:center;gap:26px;text-align:center;transform:scale(var(--ui-scale))}#menu h1{font-family:Bungee,sans-serif;display:flex;flex-direction:column;line-height:.86;font-size:clamp(54px,13vw,132px);color:#aef74b;-webkit-text-stroke:4px #0c0c12;text-shadow:7px 7px 0 rgba(0,0,0,.45),0 0 34px rgba(255,140,60,.45);transform:rotate(-3deg)}.title .row{display:flex;justify-content:center}.title .row.red{color:#ff4f6d}.title .ltr{display:inline-block;will-change:transform;animation:letterHop calc(var(--beat) * 16) ease-out infinite;animation-delay:calc(var(--slot) * var(--beat))}@keyframes letterHop{0%,4.5%,to{transform:translateY(0) scaleY(1)}1.6%{transform:translateY(-.5em) scaleY(1.14)}3.4%{transform:translateY(0) scaleY(.86)}}@media(prefers-reduced-motion:reduce){.title .ltr{animation:none}}.tagline{position:absolute;right:-10%;bottom:-9%;z-index:2;max-width:55%;font-family:Luckiest Guy,Bungee,sans-serif;font-size:clamp(12px,1.7vw,17px);line-height:1.05;text-align:right;text-transform:none;color:#ffd23a;-webkit-text-stroke:0;text-shadow:2px 2px 0 rgba(0,0,0,.8),0 0 14px rgba(255,210,58,.45);animation:tagPulse calc(var(--beat) * 2) ease-in-out infinite;pointer-events:none}@keyframes tagPulse{0%,to{transform:rotate(-8deg) scale(1)}50%{transform:rotate(-8deg) scale(1.06)}}@media(prefers-reduced-motion:reduce){.tagline{animation:none;transform:rotate(-8deg)}}#menu-sub{font-family:Teko,sans-serif;font-size:clamp(18px,3vw,28px);letter-spacing:.32em;color:#ffd23a;text-shadow:0 0 14px rgba(255,210,58,.5)}.menu-btns{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.menu-btns button{font-family:Bungee,sans-serif;display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 30px;min-width:244px;color:#fff;border:4px solid #fff;border-radius:12px;background:linear-gradient(180deg,#ffffff21,#ffffff08);box-shadow:0 6px #00000073,0 0 26px #0006;cursor:pointer;transform:skew(-6deg);transition:transform .12s,box-shadow .12s,border-color .12s,background .12s}.menu-btns button>*{transform:skew(6deg)}.menu-btns button b{font-size:clamp(17px,3vw,25px);letter-spacing:.02em}.menu-btns button span{font-family:Teko,sans-serif;font-size:17px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}.menu-btns button:hover{transform:skew(-6deg) translateY(-4px);box-shadow:0 10px #00000073,0 0 32px #ffffff38}#btn-timeattack:hover{border-color:#ffd23a}#btn-practice:hover{border-color:#38dcff}#btn-multi:hover{border-color:#ff60bc}.credit{font-family:Teko,sans-serif;font-size:clamp(14px,2vw,19px);letter-spacing:.18em;color:#ffffff8c}.credit a{color:#ffd23a;text-decoration:none;border-bottom:1px solid rgba(255,210,58,.4)}.credit a:hover{color:#fff;border-bottom-color:#fff}.attrib{font-size:clamp(10px,1.3vw,13px);letter-spacing:.12em;color:#ffffff59;margin-top:.15em}.attrib a{color:#ffd23a99;border-bottom-color:transparent}.gear{position:absolute;top:18px;right:20px;width:clamp(48px,5vmin,104px);height:clamp(48px,5vmin,104px);font-size:clamp(26px,2.8vmin,58px);line-height:1;display:grid;place-items:center;color:#fff;background:#ffffff14;border:3px solid rgba(255,255,255,.45);border-radius:12px;cursor:pointer;transition:transform .25s,border-color .12s,background .12s}.gear:hover{border-color:#ffd23a;background:#ffffff29;transform:rotate(60deg)}.gear-icon{display:block;width:1em;height:1em}#btn-quit{z-index:20}#btn-quit:hover{border-color:#ff4f6d;transform:none}#btn-quit.hidden{display:none}#settings{position:absolute;top:0;right:0;bottom:0;left:0;z-index:32;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#0e263cc7,#05050bf2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#settings.hidden{display:none}.settings-card{gap:22px;width:min(440px,90vw)}.settings-card h2,.camfail-card h2{font-family:Bungee,sans-serif;font-size:clamp(28px,6vw,46px);color:#fff;-webkit-text-stroke:3px #0c0c12;text-shadow:5px 5px 0 rgba(0,0,0,.45);transform:rotate(-2deg)}.set-rows{display:flex;flex-direction:column;gap:18px;width:100%;text-align:left}.set-row{display:flex;flex-direction:column;gap:7px}.set-label{font-family:Bungee,sans-serif;font-size:clamp(12px,2.3vw,15px);letter-spacing:.03em;color:#fff;display:flex;align-items:baseline;gap:8px}.set-label em{font-family:Teko,sans-serif;font-style:normal;font-size:1.25em;color:#ffd23a;margin-left:auto}.set-hint{font-family:Teko,sans-serif;font-size:15px;letter-spacing:.06em;color:#ffffff80;text-transform:none}.set-row input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;background:#ffffff29;outline:none;cursor:pointer}.set-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#ffd23a;border:3px solid #0c0c12;box-shadow:0 0 12px #ffd23ab3;cursor:pointer}.set-row input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#ffd23a;border:3px solid #0c0c12;box-shadow:0 0 12px #ffd23ab3;cursor:pointer}.set-row select{font-family:Teko,sans-serif;font-size:18px;letter-spacing:.04em;padding:8px 12px;color:#fff;background:#0000008c;border:3px solid rgba(255,255,255,.4);border-radius:8px;cursor:pointer}.toggle-row{flex-direction:row;align-items:center;gap:14px;cursor:pointer}.toggle-row input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:0 0 auto;width:30px;height:30px;border-radius:7px;border:3px solid rgba(255,255,255,.5);background:#00000080;cursor:pointer;position:relative}.toggle-row input[type=checkbox]:checked{background:#ffd23a;border-color:#ffd23a}.toggle-row input[type=checkbox]:checked:after{content:"✓";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#0c0c12;font-weight:900;font-size:19px}.toggle-row .set-label{flex-direction:column;align-items:flex-start;gap:2px}#btn-settings-done:hover{border-color:#ffd23a}#tahud{position:absolute;top:14px;left:0;right:0;z-index:15;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;transform:scale(var(--ui-scale));transform-origin:top center}#tahud.hidden{display:none}.ta-timer{font-family:Bungee,sans-serif;font-size:clamp(40px,9vw,84px);line-height:.9;color:#fff;-webkit-text-stroke:4px #0c0c12;text-shadow:0 0 22px rgba(255,255,255,.4),5px 5px 0 rgba(0,0,0,.4)}.ta-timer.low{color:#ff4f6d;text-shadow:0 0 26px rgba(255,79,109,.7),5px 5px 0 rgba(0,0,0,.4);animation:timerPulse .5s ease-in-out infinite}@keyframes timerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}.ta-score{font-family:Bungee,sans-serif;font-size:clamp(15px,2.6vw,24px);letter-spacing:.06em;color:#ffd23a;text-shadow:0 0 16px rgba(255,210,58,.5),3px 3px 0 rgba(0,0,0,.4)}.ta-score span{color:#fff}.ta-combo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:4px}.ta-combo.hidden{display:none}.ta-combo.bump{animation:comboBump .22s ease-out}@keyframes comboBump{0%{transform:scale(1)}40%{transform:scale(1.16)}to{transform:scale(1)}}.ta-combo-head{display:flex;align-items:baseline;gap:8px;font-family:Luckiest Guy,Bungee,sans-serif;-webkit-text-stroke:2px #0c0c12;text-shadow:0 0 20px rgba(255,140,60,.7)}#ta-combo-n{font-size:clamp(30px,6vw,60px);color:#ff8c3c;line-height:.9}.ta-combo-word{font-size:clamp(15px,2.6vw,24px);color:#fff;letter-spacing:.06em}.ta-combo-mult{font-family:Bungee,sans-serif;-webkit-text-stroke:0;font-size:clamp(16px,3vw,28px);color:#ffd23a;text-shadow:0 0 14px rgba(255,210,58,.7)}.ta-combo-bar{width:clamp(130px,30vw,280px);height:9px;border-radius:6px;background:#ffffff2e;border:2px solid rgba(0,0,0,.5);overflow:hidden}#ta-combo-fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffd23a,#ff8c3c);box-shadow:0 0 12px #ff8c3ccc}#results{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#3c2c0eb8,#05050bed);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#results.hidden{display:none}#results h1{font-family:Bungee,sans-serif;font-size:clamp(40px,9vw,100px);line-height:1;color:#ffd23a;-webkit-text-stroke:4px #0c0c12;text-shadow:7px 7px 0 rgba(0,0,0,.45),0 0 40px rgba(255,210,58,.5);transform:rotate(-2deg)}.ta-final{display:flex;flex-direction:column;align-items:center;gap:10px}.ta-final-score{font-family:Bungee,sans-serif;font-size:clamp(44px,11vw,96px);line-height:1;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.45),5px 5px 0 rgba(0,0,0,.4)}.ta-final-rows{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-family:Teko,sans-serif;font-size:clamp(16px,2.4vw,24px);letter-spacing:.12em;color:#ffffffd9}.ta-final-rows span{white-space:nowrap}#res-best{color:#ffd23a}#btn-ta-rematch:hover{border-color:#ffd23a}#camfail{position:absolute;top:0;right:0;bottom:0;left:0;z-index:33;display:grid;place-items:center;background:radial-gradient(circle at 50% 28%,#3c1010cc,#05050bf5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#camfail.hidden{display:none}.camfail-card{gap:18px;width:min(560px,92vw)}.camfail-sub{font-family:Teko,sans-serif;font-size:clamp(16px,2.4vw,22px);letter-spacing:.14em;color:#ffd23a}#camfail-msg{font-family:Teko,sans-serif;font-size:clamp(18px,2.6vw,25px);letter-spacing:.05em;line-height:1.3;color:#ffffffe0;max-width:46ch}#btn-cam-retry:hover{border-color:#ffd23a}