html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#120a1f;height:100%;overflow:hidden}img,canvas{-webkit-user-drag:none}.cioif{color:#f4efe6;font-family:var(--font-inter), system-ui, sans-serif;background:#120a1f;position:fixed;inset:0;overflow:hidden}.cioif-canvas{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.cioif-flash{pointer-events:none;background:radial-gradient(#0000 45%,#ff6a13 130%);position:absolute;inset:0}.cioif-streaks{pointer-events:none;opacity:0;background:repeating-conic-gradient(at 50% 55%,#0000 0deg 7deg,#ffb40029 7.4deg 8deg);transition:opacity .18s cubic-bezier(.22,1,.36,1);position:absolute;inset:0;-webkit-mask-image:radial-gradient(at 50% 55%,#0000 52%,#000 100%);mask-image:radial-gradient(at 50% 55%,#0000 52%,#000 100%)}.cioif-streaks.on{opacity:1}.cioif-zoomhost{top:calc(max(12px, env(safe-area-inset-top)) + 52px);right:max(0px, env(safe-area-inset-right));pointer-events:none;z-index:6;width:70px;height:120px;position:absolute}.cioif-zoomhost>*{pointer-events:auto}.cioif-hud{pointer-events:none;padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));font-family:var(--font-russo), Impact, sans-serif;position:absolute;inset:0}.cioif-hud button{pointer-events:auto}.cioif-map{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));opacity:.94;background:#1a1030;border:2px solid #ff7a2f;border-radius:10px;width:132px;height:132px;position:absolute}.cioif-top{top:max(12px, env(safe-area-inset-top));flex-direction:column;align-items:center;gap:8px;width:min(440px,100vw - 340px);min-width:220px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.cioif-timer{background:#1a1030b8;border:2px solid #ff7a2f;align-items:baseline;gap:10px;padding:4px 22px;display:flex;transform:skew(-12deg)}.cioif-timer>*{display:inline-block;transform:skew(12deg)}.cioif-timer .lbl{letter-spacing:.12em;color:#ffd9b8;font-size:12px}.cioif-timer .val{color:#2fe6ff;font-variant-numeric:lining-nums tabular-nums;text-align:right;min-width:3.4ch;font-size:34px}.cioif-timer.low{border-color:#d7261e}.cioif-timer.low .val{color:#ff5a4a}.cioif-chip{background:#1a1030b8;border:2px solid #ff7a2f;width:100%;padding:8px 14px 10px;transform:skew(-8deg)}.cioif-chip .txt{letter-spacing:.04em;color:#fff;overflow-wrap:anywhere;font-size:13px;line-height:1.25;display:block;transform:skew(8deg)}.cioif-chip .bar{background:#ffffff24;height:5px;margin-top:6px;display:block}.cioif-chip .bar>span{background:#ffb400;height:100%;transition:width .12s linear;display:block}.cioif-roll{color:#ffb400;text-shadow:0 1px 6px #000;margin:0;font-size:15px}.cioif-topright{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));position:absolute}.cioif-icon{color:#fff;cursor:pointer;touch-action:manipulation;background:#1a1030c7;border:1px solid #ffffff40;border-radius:12px;place-items:center;width:44px;height:44px;transition:background-color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1);display:inline-grid}.cioif-icon:hover{background:#46286ee6;border-color:#ff7a2f}.cioif-icon:focus-visible,.cioif-btn:focus-visible,.seg:focus-visible,.pad-btn:focus-visible{outline-offset:2px;outline:2px solid #2fe6ff}.cioif-gauge{right:max(12px, env(safe-area-inset-right));bottom:max(12px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:4px;width:190px;display:flex;position:absolute}.cioif-gauge.touch{opacity:.92;width:130px;right:50%;transform:translate(50%)}.speedo{width:100%;height:auto;overflow:visible}.speedo .tick{stroke:#ffd9b8;stroke-width:1.4px;opacity:.55}.speedo .tick.big{opacity:.95;stroke-width:2px}.speedo .arc-track{fill:none;stroke:#ffffff24;stroke-width:9px;stroke-linecap:round}.speedo .arc-fill{fill:none;stroke:#ff7a2f;stroke-width:9px;stroke-linecap:round;transition:stroke-dasharray 80ms linear}.speedo-num{fill:#2fe6ff;text-anchor:middle;font-variant-numeric:lining-nums tabular-nums;font-size:34px;font-family:var(--font-russo), Impact, sans-serif}.speedo-unit{fill:#ffd9b8;text-anchor:middle;letter-spacing:.12em;font-size:11px;font-family:var(--font-inter), sans-serif}.cioif-gauge .nitro{color:#ffb400;align-items:center;gap:8px;width:100%;display:flex}.cioif-gauge .nitro .track{background:#ffffff29;border-radius:5px;flex:1;height:10px;overflow:hidden}.cioif-gauge .nitro .track>span{background:#ffb400;height:100%;display:block}.cioif-gauge .nitro .track>span.burn{background:#ff6a13}.cioif-gauge .stars{color:#ffb400;font-variant-numeric:lining-nums tabular-nums;align-items:center;gap:6px;font-size:16px;display:flex}.cioif-count{color:#ffb400;text-shadow:0 4px 24px #0009;font-size:clamp(72px,16vw,160px);animation:.9s cubic-bezier(.22,1,.36,1) both cioif-pop;position:absolute;top:36%;left:50%;transform:translate(-50%,-50%)}.cioif-count.go{color:#2fe6ff;animation:1.1s cubic-bezier(.22,1,.36,1) both cioif-go}@keyframes cioif-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(1.3)}30%{opacity:1}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes cioif-go{0%{opacity:1;transform:translate(-50%,-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-50%)scale(1.5)}}.cioif-debug{color:#9f9;margin:0;font:11px/1.2 monospace;position:absolute;bottom:12px;left:12px}.cioif-pad{pointer-events:none;padding:0 max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));position:absolute;inset:0}.cioif-pad .pad-left{left:max(12px, env(safe-area-inset-left));bottom:max(14px, env(safe-area-inset-bottom));gap:12px;display:flex;position:absolute}.cioif-pad .pad-right{right:max(12px, env(safe-area-inset-right));bottom:max(14px, env(safe-area-inset-bottom));flex-direction:column;align-items:flex-end;gap:12px;display:flex;position:absolute}.cioif-pad .row{gap:12px;display:flex}.pad-btn{pointer-events:auto;touch-action:none;color:#fff;font:11px/1 var(--font-russo), Impact, sans-serif;letter-spacing:.08em;-webkit-backdrop-filter:none;backdrop-filter:none;background:#1a103080;border:2px solid #fff6;flex-direction:column;justify-content:center;align-items:center;transition:background-color .12s,transform .12s;display:inline-flex}.pad-btn.steer,.pad-btn.gas,.pad-btn.brake{border-radius:22px;width:84px;height:84px}.pad-btn.gas{border-color:#2fe6ff}.pad-btn.brake{border-color:#d7261e}.pad-btn.nitro{color:#1a1030;background:#ffb4008c;border-color:#ffb400;border-radius:50%;width:120px;height:120px;font-size:13px}.pad-btn.is-on{background:#ff7a2fc7;transform:scale(.96)}.cioif-overlay{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));z-index:10;background:#0a051461;place-items:center;display:grid;position:absolute;inset:0}.cioif-card{overflow-wrap:anywhere;color:#f4efe6;box-sizing:border-box;background:#1a1030f5;border:2px solid #ff7a2f;border-radius:6px;width:100%;max-width:min(560px,100%);max-height:100%;padding:clamp(20px,5vw,32px);overflow-y:auto}.cioif-card .shot{aspect-ratio:16/9;object-fit:cover;border:2px solid #ff7a2fb3;border-radius:4px;width:100%;height:auto;margin-bottom:16px;display:block}.cioif-card .brand{font:14px/1.2 var(--font-russo), Impact, sans-serif;letter-spacing:.22em;color:#ff7a2f;margin:0 0 4px}.cioif-card .brand.lost{color:#ff5a4a}.cioif-card h1,.cioif-card h2{font:clamp(26px, 6vw, 38px)/1.08 var(--font-russo), Impact, sans-serif;color:#fff;letter-spacing:-.01em;margin:0 0 8px}.cioif-card h2{font-size:clamp(22px,5vw,30px)}.cioif-card h3{letter-spacing:.13em;text-transform:uppercase;opacity:.75;margin:0 0 6px;font-size:12px}.cioif-card .lede,.cioif-card .about p{color:#e8dfd2;margin:0 0 16px;font-size:15px;line-height:1.5}.cioif-card .keys{color:#cdbfae;margin:14px 0 0;font-size:13px;line-height:1.4}.cioif-card .best{font:15px/1.2 var(--font-russo), Impact, sans-serif;color:#ffb400;margin:10px 0 0}.cioif-card .err{color:#ff9a8a;margin:8px 0;line-height:1.4}.cioif-card .actions,.cioif-card footer{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.cioif-card header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.cioif-card header h2{margin:0}.cioif-card .body{gap:4px;display:grid}.cioif-card footer{margin-top:18px}.cioif-card dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0;display:grid}.cioif-card dt{letter-spacing:.1em;text-transform:uppercase;color:#cdbfae;font-size:12px}.cioif-card dd{font:24px/1.1 var(--font-russo), Impact, sans-serif;color:#2fe6ff;font-variant-numeric:lining-nums tabular-nums;margin:2px 0 0}.cioif-card .quality{border:0;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 20px;padding:0;display:flex}.cioif-card .quality legend{letter-spacing:.13em;text-transform:uppercase;opacity:.68;margin-bottom:8px;padding:0;font-size:12px;font-weight:800}.seg{color:#f4efe6;min-height:44px;font:inherit;cursor:pointer;background:0 0;border:1px solid #ffffff4d;border-radius:8px;padding:0 16px;transition:background-color .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1)}.seg:hover{background:#ffffff1a}.seg.on{color:#1a1030;background:#ff7a2f;border-color:#ff7a2f;font-weight:700}.cioif-btn{white-space:nowrap;color:#fff;min-height:48px;font:16px/1 var(--font-russo), Impact, sans-serif;letter-spacing:.06em;cursor:pointer;touch-action:manipulation;background:0 0;border:2px solid #ff7a2f;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:0 26px;transition:background-color .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1);display:inline-flex}.cioif-btn:hover{background:#ff7a2f38;transform:translateY(-1px)}.cioif-btn:active{transform:scale(.98)}.cioif-btn.primary{color:#1a1030;background:#ff7a2f}.cioif-btn.primary:hover{background:#ff8c48}.cioif-btn:disabled{opacity:.6;cursor:progress;transform:none}@media (max-width:760px){.cioif-map{width:96px;height:96px}.cioif-top{width:calc(100vw - 230px);min-width:0}.cioif-timer .val{font-size:28px}.cioif-chip .txt{font-size:11px}}@media (max-height:460px){.cioif-card .shot{display:none}}@media (prefers-reduced-motion:reduce){.cioif-count,.cioif-count.go{animation:none}.cioif-streaks,.cioif-btn,.seg,.cioif-icon{transition:none}}
