:root{--bg: #cfe7f2;--panel: #1c232e;--edge: #2c3540;--ink: #33414d;--dim: #6d7d8a;--queue: #4dd8c0;--roll: #f0b866;--next: #a78bfa;--loss: #ff6b6b;--queue-ink: #0d8f78;--roll-ink: #a06f18;--loss-ink: #c14b4b;--card: #fdfaf1;--card-edge: #e0dac6;--road-h: clamp(54px, 9vh, 100px);--wheels: 3;--wheel-gap: clamp(2px, .8vw, 6px);--odo-pad-x: clamp(10px, 2.4vw, 20px);--wheel-w: clamp( 22px, calc((100vw - 44px - 2 * var(--odo-pad-x) - (var(--wheels) - 1) * var(--wheel-gap)) / var(--wheels)), 58px );--wheel-h: calc(var(--wheel-w) * 1.45)}*{box-sizing:border-box}html{background:linear-gradient(#a9d7ea,#cfe7f2 55%,#e9f5e6 80%) fixed}body{margin:0;min-height:100vh;min-height:100dvh;background:transparent;color:var(--ink);font:15px/1.6 ui-monospace,SF Mono,Menlo,monospace;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:clamp(14px,2.4vh,22px);padding:calc(clamp(16px,3vh,30px) + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) calc(clamp(16px,3vh,30px) + env(safe-area-inset-bottom,0px)) calc(14px + env(safe-area-inset-left,0px));user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.scene{--sky-top: #a9d7ea;--sky-mid: #cfe7f2;--sky-low: #e9f5e6;--sun-c: #fff3c4;--scene-dim: 1;position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(var(--sky-top),var(--sky-mid) 55%,var(--sky-low) 80%)}.scene>div{position:absolute;left:0;right:0}.sun{left:80%;top:10%;width:74px;height:74px;right:auto;border-radius:50%;background:var(--sun-c);box-shadow:0 0 70px 28px var(--sun-c);opacity:.92;transition:left 2.5s ease,top 2.5s ease}.clouds,.hills,.mid,.houses{filter:brightness(var(--scene-dim));transition:filter 2.5s ease}.clouds{top:1%;height:200px;opacity:.9;--shift: -700px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='160'%3E%3Cg fill='%23ffffff' opacity='.85'%3E%3Cellipse cx='120' cy='60' rx='55' ry='22'/%3E%3Cellipse cx='162' cy='48' rx='34' ry='17'/%3E%3Cellipse cx='95' cy='50' rx='28' ry='14'/%3E%3Cellipse cx='420' cy='104' rx='46' ry='18'/%3E%3Cellipse cx='456' cy='92' rx='28' ry='14'/%3E%3Cellipse cx='600' cy='42' rx='40' ry='16'/%3E%3Cellipse cx='632' cy='34' rx='24' ry='12'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top / 700px 160px;animation:slide 150s linear infinite}.hills{bottom:calc(var(--road-h) + 96px);height:120px;--shift: -600px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cpath d='M0 120V78C80 44 150 46 230 72 310 98 340 40 430 50 520 60 560 90 600 78V120Z' fill='%23d4e6c3'/%3E%3Cpath d='M0 120V88C90 60 170 62 250 84 330 106 380 58 470 66 540 72 570 96 600 88V120Z' fill='%23c2dcae'/%3E%3C/svg%3E") repeat-x left bottom / 600px 120px;animation:slide 85s linear infinite}.mid{bottom:var(--road-h);height:110px;background:#b1d49e}.houses{bottom:var(--road-h);height:140px;--shift: -460px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='140'%3E%3Crect y='116' width='460' height='24' fill='%23a8cf94'/%3E%3Crect x='18' y='66' width='70' height='52' rx='3' fill='%23f2e3c9'/%3E%3Cpath d='M12 68L53 36 94 68Z' fill='%23c96f5f'/%3E%3Crect x='30' y='80' width='14' height='14' rx='2' fill='%23fff7dc' stroke='%236b5d4f' stroke-width='2'/%3E%3Crect x='60' y='84' width='16' height='34' rx='2' fill='%238a7968'/%3E%3Crect x='122' y='88' width='8' height='30' rx='3' fill='%238a6f55'/%3E%3Ccircle cx='126' cy='74' r='24' fill='%238fbf7f'/%3E%3Ccircle cx='110' cy='86' r='14' fill='%239cc98c'/%3E%3Crect x='170' y='58' width='84' height='60' rx='3' fill='%23bcd8d2'/%3E%3Cpath d='M162 60L212 26 262 60Z' fill='%237d99a8'/%3E%3Crect x='186' y='74' width='15' height='15' rx='2' fill='%23fff7dc' stroke='%235d6e6a' stroke-width='2'/%3E%3Crect x='222' y='74' width='15' height='15' rx='2' fill='%23fff7dc' stroke='%235d6e6a' stroke-width='2'/%3E%3Crect x='204' y='86' width='17' height='32' rx='2' fill='%235d6e6a'/%3E%3Ccircle cx='285' cy='112' r='12' fill='%239cc98c'/%3E%3Ccircle cx='300' cy='116' r='9' fill='%238fbf7f'/%3E%3Crect x='330' y='64' width='72' height='54' rx='3' fill='%23e8b8a8'/%3E%3Cpath d='M324 66L366 32 408 66Z' fill='%238a7968'/%3E%3Crect x='344' y='78' width='14' height='14' rx='2' fill='%23fff7dc' stroke='%236b5d4f' stroke-width='2'/%3E%3Crect x='374' y='82' width='16' height='36' rx='2' fill='%236b5d4f'/%3E%3Crect x='432' y='94' width='7' height='24' rx='3' fill='%238a6f55'/%3E%3Ccircle cx='435' cy='82' r='18' fill='%239cc98c'/%3E%3C/svg%3E") repeat-x left bottom / 460px 140px;animation:slide 36s linear infinite}.road{bottom:0;height:var(--road-h);background:#4a5560;border-top:6px solid #d8d3c4}.road:before{content:"";position:absolute;left:-112px;right:0;top:50%;height:6px;margin-top:-3px;background:repeating-linear-gradient(90deg,#e8e3d5 0 48px,transparent 48px 112px);animation:dash 1.4s linear infinite}@keyframes slide{to{background-position-x:var(--shift)}}@keyframes dash{to{transform:translate(-112px)}}.car{position:absolute;width:64px;height:26px;will-change:transform}.car svg{width:100%;height:100%;display:block}.car.oncoming{top:16%;transform:scale(.72)}.car.ours{top:48%}.car.ours svg{transform:scaleX(-1)}@keyframes driveL{0%{left:100vw}to{left:-90px}}@keyframes driveR{0%{left:-90px}to{left:100vw}}body.flash:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:15;pointer-events:none;background:radial-gradient(60% 50% at 50% 38%,#f0b86636,transparent 72%);animation:flashfade .9s ease-out forwards}@keyframes flashfade{0%{opacity:1}to{opacity:0}}h1{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#4d5f6b;margin:0 0 14px;text-align:center;text-shadow:0 1px 0 #ffffff80}.hud{display:flex;gap:clamp(12px,4vw,34px);justify-content:center;flex-wrap:wrap}.stat{display:flex;flex-direction:column;align-items:center}.stat .n{font-size:clamp(17px,4.5vw,26px);font-weight:300;line-height:1.1}.stat .k{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:3px}#score{color:var(--queue-ink);transition:color .2s;text-shadow:0 1px 0 #ffffffb0}#score.loss{color:var(--loss-ink)}#tiles.low{color:var(--roll-ink)}#tiles.critical{color:var(--roll-ink);animation:tickdown 1.1s ease-in-out infinite}@keyframes tickdown{50%{opacity:.4}}.pop{animation:pop .45s cubic-bezier(.2,.9,.25,1)}@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.22)}to{transform:scale(1)}}main{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vh,20px)}.frame{max-width:100%;overflow-x:auto;padding-bottom:4px}.odometer{display:flex;gap:var(--wheel-gap);padding:clamp(10px,2vw,18px) var(--odo-pad-x);background:linear-gradient(var(--panel),#10151d) padding-box,linear-gradient(165deg,#3d4a5c,#1a2028 38%,#0d1117 62%,#2e3a48) border-box;border:1px solid transparent;border-radius:14px;box-shadow:0 16px 32px -14px #33414d80,0 2px #ffffff0a inset,0 -10px 30px -18px #000 inset;transition:box-shadow .3s,border-color .3s}.odometer.allPrimed{border-color:var(--roll);box-shadow:0 0 44px -6px var(--roll),0 16px 32px -14px #33414d80,inset 0 1px #ffffff08}.odometer.spill{animation:shake .42s cubic-bezier(.36,.07,.19,.97)}@keyframes shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-7px)}40%,60%{transform:translate(7px)}}.wheel{position:relative;flex:none;width:var(--wheel-w);height:var(--wheel-h);background:linear-gradient(#070a0e,#151c26 45%,#090d12);border:1px solid var(--edge);border-radius:8px;box-shadow:inset 0 3px 8px #000c,inset 0 -3px 8px #0009;overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s,background .3s,width .4s cubic-bezier(.2,.9,.25,1),height .4s cubic-bezier(.2,.9,.25,1)}.wheel:active{transform:scale(.94)}.wheel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(#fff1,#fff0 22%,#0000 78%,#0006)}.wheel.primed{border-color:var(--roll);background:linear-gradient(#1a1408,#241b0c 45%,#1a1408)}.wheel.primed .strip div{color:var(--roll)}.wheel.rolling{border-color:var(--roll);box-shadow:0 0 18px -4px var(--roll),inset 0 3px 8px #000c}.wheel.fits{border-color:#c99a45;box-shadow:0 0 12px -3px var(--roll),inset 0 3px 8px #000c}.wheel.warn{border-style:dashed;border-color:#ff6b6bb0}.tile.useful{outline:2px solid var(--roll);outline-offset:2px}.coach{position:fixed;z-index:25;transform:translate(-50%);max-width:230px;padding:9px 14px 7px;background:var(--card);border:1px solid var(--card-edge);border-radius:12px;box-shadow:0 10px 30px -10px #33414d80;font-size:13px;line-height:1.5;color:var(--ink);text-align:center;animation:coachIn .3s cubic-bezier(.2,.9,.25,1)}.coach:after{content:"▼";position:absolute;left:50%;bottom:-19px;transform:translate(-50%);color:var(--queue-ink);font-size:14px;animation:nudge 1s ease-in-out infinite}@keyframes nudge{50%{transform:translate(-50%) translateY(4px)}}@keyframes coachIn{0%{opacity:0;transform:translate(-50%) translateY(6px)}}.coach .skip{display:block;margin-top:3px;font-size:10px;color:var(--dim);text-decoration:underline;cursor:pointer}.coach b{color:var(--queue-ink)}body.coaching footer,body.coaching .hud{opacity:.45;transition:opacity .3s}.wheel.suggest{border-color:var(--queue);animation:suggestPulse 1s ease-in-out infinite}@keyframes suggestPulse{0%,to{box-shadow:0 0 12px -2px var(--queue),inset 0 3px 8px #000c}50%{box-shadow:0 0 26px 2px var(--queue),inset 0 3px 8px #000c}}.odometer.allPrimed .wheel:not(.ignition){opacity:.45;cursor:not-allowed;filter:saturate(.5)}.wheel.denied{animation:denied .35s ease}@keyframes denied{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@media (hover: hover) and (pointer: fine){.wheel:hover{border-color:var(--queue);transform:translateY(-3px)}button:hover{border-color:var(--queue-ink);color:var(--queue-ink)}}.wheel.ignition{--charge: 0;box-shadow:0 0 calc(var(--charge) * 30px) calc(var(--charge) * -2px) var(--queue)}.wheel.ignition:before{content:"▲";position:absolute;bottom:2px;left:0;right:0;z-index:3;text-align:center;font-size:min(9px,calc(var(--wheel-w) * .28));line-height:1;color:var(--queue);opacity:calc(.35 + var(--charge) * .65);transition:opacity .3s}.odometer.allPrimed .wheel.ignition:before{color:var(--roll);animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.3;transform:translateY(-2px)}}.wheel.born{animation:born .5s cubic-bezier(.2,.9,.25,1)}@keyframes born{0%{width:0;opacity:0;margin-right:calc(var(--wheel-gap) * -1)}to{width:var(--wheel-w);opacity:1;margin-right:0}}.strip{position:absolute;left:0;width:100%;display:flex;flex-direction:column;transform:translateY(calc(var(--pos, 0) * var(--wheel-h) * -1));transition:transform .3s cubic-bezier(.2,.9,.25,1)}.strip div{height:var(--wheel-h);flex:none;display:flex;align-items:center;justify-content:center;font-size:calc(var(--wheel-w) * .64);font-weight:300;color:#e9eef4;transition:height .4s cubic-bezier(.2,.9,.25,1)}.places{display:flex;gap:var(--wheel-gap);padding:6px var(--odo-pad-x) 0}.places span{width:var(--wheel-w);flex:none;text-align:center;font-size:10px;color:#55666f}@media (max-width: 520px){.places{display:none}}.queue{display:flex;align-items:center;gap:13px}.label{font-size:10px;color:var(--dim);letter-spacing:.18em;text-transform:uppercase}.tile{width:50px;height:50px;border-radius:12px;background:linear-gradient(150deg,#6ee8d2,var(--queue) 40%,#23997f);color:#06231d;font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px var(--queue),inset 0 2px 2px #ffffff59,inset 0 -4px 8px #00000038;transition:transform .2s}#tile{animation:bob 2.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-3px)}}.tile.next{transform:scale(.68);opacity:.5;box-shadow:none;animation:none;background:linear-gradient(150deg,#c3aefc,var(--next) 45%,#6d4fc4);color:#1a1035}.float{position:fixed;pointer-events:none;z-index:10;font-size:19px;font-weight:600;color:var(--roll-ink);text-shadow:0 1px 0 #fff,0 0 12px #ffffffcc;animation:rise 1s ease-out forwards}.float.small{font-size:14px}.float.loss{color:var(--loss-ink);font-size:22px}.float.big{font-size:28px;font-weight:700}@keyframes rise{to{transform:translateY(-52px);opacity:0}}.spark{position:fixed;z-index:20;pointer-events:none;width:6px;height:6px;border-radius:50%;background:var(--roll);box-shadow:0 0 8px var(--roll);animation:fling .8s cubic-bezier(.15,.6,.3,1) forwards}.spark.alt{width:4px;height:4px;background:var(--queue);box-shadow:0 0 8px var(--queue)}@keyframes fling{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--dx, 0px),var(--dy, -60px)) scale(.4)}}.msg{min-height:26px;margin:0;font-size:13px;color:var(--roll-ink);text-align:center;max-width:60ch;padding:2px 8px}.msg:not(:empty){background:#fdfaf1d6;border:1px solid var(--card-edge);border-radius:12px;padding:2px 14px}.msg.bad{color:var(--loss-ink)}.over{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#33414d66;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.over[hidden]{display:none}.overCard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 44px;border-radius:18px;background:var(--card);border:1px solid var(--card-edge);box-shadow:0 30px 70px -18px #33414d99;animation:cardIn .35s cubic-bezier(.2,.9,.25,1);text-align:center}@keyframes cardIn{0%{transform:translateY(14px) scale(.96);opacity:0}}.overTitle{margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim)}.overScore{margin:0;font-size:46px;font-weight:400;line-height:1.1;color:var(--queue-ink)}.overSub{margin:0 0 6px;font-size:12px;color:var(--dim)}.confirmText{margin:0 0 6px;max-width:38ch;font-size:13px;line-height:1.7;color:var(--ink);text-align:center}.confirmText b{color:var(--loss-ink)}.confirmText .safe{color:var(--queue-ink);font-weight:600}#confirm{background:#33414d40;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px)}footer{display:flex;flex-direction:column;align-items:center;gap:16px;background:#fdfaf1cf;border:1px solid var(--card-edge);border-radius:18px;padding:20px 22px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);max-width:min(94vw,660px)}.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.hint{color:var(--dim);font-size:12.5px;max-width:62ch;line-height:1.7;margin:0}ol.hint{text-align:left;padding-left:20px;display:grid;gap:6px}ol.hint li::marker{color:var(--queue-ink);font-weight:600}.hint.dim{text-align:center;font-size:11.5px;opacity:.7;max-width:58ch}.hint b{color:var(--queue-ink);font-weight:600}.hint i{color:var(--roll-ink);font-style:normal}.key{border-collapse:collapse;font-size:11.5px;color:var(--dim);max-width:62ch}.key th{text-align:left;padding:10px 8px 4px;font-weight:600;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.7;border-bottom:1px solid var(--card-edge)}.key td{padding:3px 8px;vertical-align:baseline}.key td:first-child{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}.key .good{color:var(--roll-ink)}.key .bad{color:var(--loss-ink)}.key .none{color:var(--dim);opacity:.8}.key b{color:var(--queue-ink);font-weight:600}.key .pic{text-align:right}.mini{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}.mini.demo{margin-top:6px}.mini.demo .mw{width:18px;height:25px;font-size:12px}.mini.demo b,.mini.demo em{font-size:12px}.mini .mw{width:15px;height:21px;border-radius:3px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(#080b10,#141b24 45%,#0a0e13);border:1px solid var(--edge);color:#e9eef4;font-style:normal;font-size:10px;line-height:1}.mini .mw.p{color:var(--roll);border-color:#8a6a2e;background:linear-gradient(#1a1408,#241b0c 45%,#1a1408)}.mini .mw.r{color:var(--roll);border-color:var(--roll);box-shadow:0 0 6px -1px var(--roll)}.mini .mw.new{border-style:dashed;border-color:var(--queue);color:var(--queue);background:none}.mini .mw.w{border-style:dashed;border-color:#ff6b6bb0}.mini .mw.i{border-color:var(--queue);box-shadow:0 0 6px -1px var(--queue)}.mini em{color:var(--dim);font-style:normal;font-size:9px;padding:0 1px}.mini b{color:var(--queue-ink);font-size:9px;font-weight:700;padding-left:2px}.mini b.t{font-size:13px;padding:0}.mini b.x{color:var(--loss-ink);font-size:10px;padding:0 2px 0 0}.mini.all{outline:1px solid var(--roll);outline-offset:2px;border-radius:4px;box-shadow:0 0 10px -2px var(--roll)}.mini.dim{opacity:.55}.mini .tq{min-width:16px;height:16px;padding:0 2px;border-radius:4px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#6ee8d2,var(--queue) 40%,#23997f);color:#06231d;font-style:normal;font-size:9px;font-weight:700}.mini .tq.v{background:linear-gradient(150deg,#c3aefc,var(--next) 45%,#6d4fc4);color:#1a1035}.mini .tq.ring{outline:2px solid var(--roll);outline-offset:1px}.copy{margin:0;font-size:10px;color:var(--dim);opacity:.6;letter-spacing:.08em;text-align:center;line-height:1.8}.copy a{color:inherit}button{background:#ffffff8c;border:1px solid #c3cdd2;color:#4d5f6b;padding:10px 18px;border-radius:10px;cursor:pointer;font:inherit;font-size:12px;font-weight:500;transition:border-color .2s,color .2s,background .2s;touch-action:manipulation;box-shadow:0 2px 6px -2px #33414d33}button:active{border-color:var(--queue-ink);color:var(--queue-ink)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
