:root{--blue: #1f5fbf;--navy: #0b2a5b;--green: #16a34a;--amber: #f59e0b;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%;overflow:hidden;background:#0b2a5b;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.gl{position:fixed!important;inset:0;height:100dvh!important;touch-action:none}button{font:inherit;cursor:pointer;touch-action:manipulation}.nogl{display:grid;place-items:center;height:100%;padding:24px;text-align:center}.nogl img{width:200px}.start,.results{position:fixed;inset:0;display:grid;place-items:center;padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));overflow-y:auto;background:linear-gradient(160deg,#0b2a5beb,#1f5fbfc7);z-index:20}.card{width:min(560px,100%);text-align:center;padding:18px 18px 14px}.card .logo{width:190px;max-width:60%}.card h1{margin:8px 0 4px;font-size:clamp(28px,7vw,42px);letter-spacing:.5px}.card .sub{margin:0 0 12px;opacity:.9;font-size:15px}.card .wrap{width:100%;border-radius:10px;box-shadow:0 8px 28px #00000059}.card h2{font-size:16px;margin:14px 0 4px;text-transform:uppercase;letter-spacing:1px;opacity:.85}.card ol{text-align:left;margin:0 auto;padding-left:22px;max-width:440px;font-size:15px;line-height:1.45}.card .ctl{font-size:14px;opacity:.9;margin:10px 0}.go{margin:10px auto 6px;display:block;min-width:220px;padding:14px 28px;font-size:20px;font-weight:800;color:#fff;border:0;border-radius:999px;background:linear-gradient(180deg,#22c55e,#15803d);box-shadow:0 6px #0f5a2b,0 10px 24px #0000004d}.go:active{transform:translateY(3px);box-shadow:0 3px #0f5a2b}.fine{font-size:12px;opacity:.75;margin:6px 0 0}.results dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;justify-content:center;margin:10px 0;font-size:16px}.results dt{text-align:right;opacity:.8}.results dd{margin:0;text-align:left;font-weight:700;font-variant-numeric:tabular-nums}.verdict{font-size:18px;font-weight:700;margin:2px 0}.brands{display:flex;gap:14px;justify-content:center;align-items:center;margin:8px 0}.brands img{height:30px}.stars{display:flex;gap:2px;font-size:18px;color:#ffffff4d;text-shadow:0 1px 2px rgba(0,0,0,.4)}.stars span.on{color:#fbbf24}.stars.big{justify-content:center;font-size:56px;gap:8px}.hud{position:fixed;inset:0;pointer-events:none;z-index:10}.hud .top{position:absolute;top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));display:flex;align-items:center;gap:6px}.hud .mini{height:22px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));margin-right:4px}.chip{background:#0b2a5bc7;padding:6px 10px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}.chip.hit{background:#dc2626}.spacer{flex:1}.icon{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:0;background:#0b2a5bc7;color:#fff;font-size:18px}.hud .center{position:absolute;top:calc(56px + var(--safe-t));left:8px;right:8px;display:flex;flex-direction:column;align-items:center;gap:6px}.task{max-width:min(92vw,560px);background:#fffffff0;color:#0b2a5b;padding:8px 14px;border-radius:14px;font-weight:700;font-size:16px;text-align:center;box-shadow:0 4px 14px #00000040}.task .n{background:var(--blue);color:#fff;border-radius:8px;padding:1px 7px;margin-right:4px;font-size:13px}.task .tip{font-size:12px;font-weight:600;color:#475569;margin-top:3px}.task .dist{color:#475569;font-weight:600}.bar{position:relative;height:18px;margin-top:6px;background:#e2e8f0;border-radius:9px;overflow:hidden}.bar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .2s}.bar em{position:relative;font-style:normal;font-size:12px}.scale{max-width:94vw;background:#111111d9;border:2px solid #374151;border-radius:12px;padding:4px 12px;text-align:center}.scale .row{display:flex;gap:12px;font-size:13px;align-items:baseline;flex-wrap:wrap;justify-content:center}.scale.live{padding:8px 18px}.scale .lbl{font-size:13px;opacity:.85}.scale .num{font-family:ui-monospace,Menlo,monospace;color:#ff3b2f;font-size:34px;font-weight:800;font-variant-numeric:tabular-nums}.scale .gv{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#fbbf24}.toast{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:900;color:#fff;text-shadow:0 3px 0 #b91c1c,0 6px 18px rgba(0,0,0,.5);animation:pop .7s ease-out}@keyframes pop{0%{transform:translate(-50%,-50%) scale(1.6);opacity:0}30%{opacity:1}to{transform:translate(-50%,-50%) scale(1)}}.touch{position:fixed;left:0;right:0;bottom:0;height:0;z-index:11}.stick{position:absolute;left:calc(14px + var(--safe-l));bottom:calc(18px + var(--safe-b));width:170px;height:96px;border-radius:48px;background:#0b2a5b80;border:2px solid rgba(255,255,255,.45);touch-action:none;display:grid;place-items:center}.stick .knob{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1);box-shadow:0 4px 12px #0006;pointer-events:none}.stick .arr{position:absolute;top:50%;transform:translateY(-50%);opacity:.7;font-size:16px;pointer-events:none}.stick .l{left:10px}.stick .r{right:10px}.pedals{position:absolute;right:calc(14px + var(--safe-r));bottom:calc(18px + var(--safe-b));display:flex;gap:12px;align-items:flex-end}.pedal{width:82px;height:112px;border:0;border-radius:16px;color:#fff;font-weight:900;font-size:20px;touch-action:none;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 6px #00000059}.pedal small{font-size:12px;opacity:.9}.pedal.gas{background:linear-gradient(180deg,#22c55e,#15803d);height:128px}.pedal.brake{background:linear-gradient(180deg,#ef4444,#b91c1c)}.pedal.on{transform:translateY(4px);box-shadow:0 2px #00000059;filter:brightness(1.15)}@media(max-height:480px){.hud .center{top:calc(52px + var(--safe-t))}.task{font-size:14px;padding:6px 10px}.scale.live .num{font-size:26px}.pedal{height:92px;width:74px}.pedal.gas{height:104px}.stick{height:84px}}@media(max-width:420px){.chip{font-size:13px;padding:5px 8px}.hud .mini{height:18px}.stars,.task{font-size:15px}}
