:root {
      color-scheme: dark;
      --glass: rgba(18, 28, 30, .48);
      --line: rgba(255,255,255,.18);
      --text: #f8fbfa;
      --muted: rgba(248,251,250,.68);
      --accent: #9fe0bd;
      --safe-bottom: max(14px, env(safe-area-inset-bottom));
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    [hidden] { display:none !important; }
    html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#5b6794; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; touch-action:none; user-select:none; }
    canvas { display:block; width:100%; height:100%; outline:none; }
    body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:2; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 28%,transparent 70%,rgba(7,18,20,.13)), radial-gradient(circle at 50% 45%,transparent 48%,rgba(9,20,22,.14) 100%); }
    .glass { border:1px solid var(--line); background:var(--glass); backdrop-filter:blur(17px) saturate(135%); box-shadow:0 12px 34px rgba(15,31,32,.15); }
    .top-actions { position:fixed; z-index:6; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); display:flex; gap:4px; }
    .goal-readout { position:fixed; z-index:5; top:max(14px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); display:grid; justify-items:center; pointer-events:none; text-shadow:0 3px 18px rgba(10,20,24,.35); }
    .goal-readout strong { color:var(--text); font-size:28px; line-height:1; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
    .goal-falls { display:flex; align-items:baseline; gap:5px; margin-top:5px; color:rgba(248,251,250,.68); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
    .goal-falls b { color:var(--text); font-size:10px; font-weight:650; font-variant-numeric:tabular-nums; }
    .goal-bonus { position:relative; display:flex; align-items:baseline; gap:4px; margin-top:4px; color:rgba(248,251,250,.66); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
    .goal-bonus b { color:var(--accent); font-size:10px; font-weight:750; font-variant-numeric:tabular-nums; }
    .goal-readout.bonus-flash .goal-bonus { animation:bonus-flash 3.4s ease-in-out both; will-change:opacity,transform,filter,text-shadow; }
    .goal-readout.bonus-flash .goal-bonus b { animation:bonus-value-flash 3.4s ease-in-out both; }
    @keyframes bonus-flash { 0%,100% { opacity:.72; transform:none; filter:none; text-shadow:none; } 9% { opacity:1; transform:scale(1.055); filter:brightness(1.34); text-shadow:0 0 13px rgba(159,255,218,.72); } 22% { opacity:.78; transform:scale(1); filter:brightness(1.04); text-shadow:0 0 5px rgba(159,255,218,.24); } 37% { opacity:.98; transform:scale(1.04); filter:brightness(1.24); text-shadow:0 0 10px rgba(159,255,218,.58); } 50% { opacity:.76; transform:scale(1); filter:none; text-shadow:none; } 65% { opacity:.96; transform:scale(1.032); filter:brightness(1.18); text-shadow:0 0 8px rgba(159,255,218,.42); } 78% { opacity:.78; transform:scale(1); filter:none; text-shadow:none; } }
    @keyframes bonus-value-flash { 0%,100% { color:var(--accent); } 9% { color:#e8fff5; } 22% { color:var(--accent); } 37% { color:#d9ffeb; } 50% { color:var(--accent); } 65% { color:#d2ffe7; } 78% { color:var(--accent); } }
    @media (prefers-reduced-motion:reduce) { .goal-readout.bonus-flash .goal-bonus, .goal-readout.bonus-flash .goal-bonus b { animation:none; } }
    .settings-panel { position:fixed; z-index:15; top:66px; right:max(12px,env(safe-area-inset-right)); width:min(242px,calc(100vw - 24px)); padding:13px; border-radius:18px; display:grid; gap:8px; }
    .settings-panel.open { animation:panel-in .18s ease-out both; }
    .settings-title { display:flex; align-items:center; justify-content:space-between; color:var(--text); font-size:12px; font-weight:650; }
    .settings-title small { color:var(--muted); font-size:9px; font-weight:500; }
    .settings-panel button { width:100%; min-height:38px; text-align:left; }
    .settings-quality { display:grid; gap:5px; }
    .settings-quality label { color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
    .settings-quality select { width:100%; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:rgba(17,28,29,.58); font:inherit; font-size:11px; font-weight:600; }
    .settings-quality small { color:var(--muted); font-size:9px; line-height:1.35; }
    .settings-panel > #languageSelect { width:100%; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:rgba(17,28,29,.58); font:inherit; font-size:11px; font-weight:600; }
    .low-graphics-ui .glass { backdrop-filter:none; }
    .settings-panel .danger { color:#ffd8cf; border-color:rgba(255,158,144,.3); background:rgba(91,43,43,.32); }
    .confirm-backdrop { position:fixed; inset:0; z-index:19; display:grid; place-items:center; padding:20px; background:rgba(7,14,19,.34); backdrop-filter:blur(8px); }
    .confirm-card { width:min(330px,100%); padding:20px; border-radius:20px; }
    .confirm-card h2 { margin:0 0 7px; font-size:17px; }
    .confirm-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.45; }
    .confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
    .confirm-actions button { min-height:36px; }
    .confirm-actions .danger { color:#ffd8cf; border-color:rgba(255,158,144,.3); background:rgba(91,43,43,.44); }
    @keyframes panel-in { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
    .boost-action { background:linear-gradient(135deg,rgba(37,88,89,.66),rgba(42,58,65,.52)); border-color:rgba(164,247,229,.36); }
    .boost-action.active { background:linear-gradient(135deg,rgba(38,143,133,.82),rgba(52,90,104,.76)); border-color:rgba(220,255,245,.82); box-shadow:0 0 24px rgba(104,243,219,.28),0 10px 28px rgba(10,25,27,.16); }
    button { appearance:none; border:1px solid var(--line); color:var(--text); background:rgba(17,28,29,.47); backdrop-filter:blur(16px); min-height:42px; padding:0 13px; border-radius:14px; font:inherit; font-size:11px; font-weight:600; letter-spacing:.02em; touch-action:none; box-shadow:0 10px 28px rgba(10,25,27,.12); }
    button:active, button.pressed { transform:scale(.97); background:rgba(24,42,41,.68); }
    button.active { background:rgba(96,162,131,.56); border-color:rgba(211,255,229,.5); }
    .center-actions { position:fixed; z-index:6; left:50%; bottom:calc(var(--safe-bottom) + 4px); transform:translateX(-50%); display:flex; gap:6px; }
    .center-actions button { min-height:38px; padding:0 12px; background:rgba(17,28,29,.42); }
    .center-actions .camera-cycle { min-width:38px; padding:0 10px; font-size:13px; font-variant-numeric:tabular-nums; }
    .mobile-reveal-layer { position:fixed; inset:0; z-index:6; pointer-events:none; }
    .mobile-reveal-layer.active { pointer-events:auto; }
    .mobile-reveal-zone { position:absolute; bottom:0; width:230px; height:270px; touch-action:none; }
    .mobile-reveal-zone.steer-zone { left:0; }
    .mobile-reveal-zone.action-zone { right:0; }
    .mobile-controls { position:fixed; inset:0; z-index:7; pointer-events:none; transition:opacity .2s ease; }
    .mobile-controls.controls-hidden { opacity:0 !important; }
    .steer-pad { position:absolute; left:max(18px,env(safe-area-inset-left)); bottom:calc(var(--safe-bottom) + 46px); width:142px; height:142px; border-radius:50%; pointer-events:auto; display:grid; place-items:center; border:1px solid rgba(255,255,255,.19); background:radial-gradient(circle,rgba(28,48,46,.34),rgba(12,25,27,.18)); backdrop-filter:blur(9px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 12px 32px rgba(10,24,25,.12); }
    .steer-pad::before { content:""; width:80%; height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent); }
    .steer-knob { position:absolute; width:66px; height:66px; border-radius:50%; border:1px solid rgba(255,255,255,.33); background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.26),rgba(38,74,65,.62)); box-shadow:0 8px 20px rgba(7,23,20,.25); display:grid; place-items:center; font-size:10px; letter-spacing:.13em; color:rgba(255,255,255,.8); transform:translateX(0); }
    .pedals { position:absolute; right:max(18px,env(safe-area-inset-right)); bottom:calc(var(--safe-bottom) + 42px); display:flex; align-items:flex-end; gap:11px; pointer-events:auto; }
    .round-btn { border-radius:50%; padding:0; display:grid; place-items:center; }
    .brake-btn { width:72px; height:72px; background:rgba(79,48,42,.46); }
    .pedal-btn { width:104px; height:104px; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.18),rgba(52,105,82,.72)); font-size:12px; }
    .speed-vignette { position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 52%,transparent 38%,rgba(98,241,220,.16) 78%,rgba(86,207,229,.42) 100%),linear-gradient(90deg,rgba(130,255,226,.13),transparent 18%,transparent 82%,rgba(130,255,226,.13)); mix-blend-mode:screen; transition:opacity .12s linear; }
    .loading { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:linear-gradient(180deg,#9bc6d7,#b9d6c5); color:#f8fffb; letter-spacing:.2em; text-transform:uppercase; font-size:11px; transition:opacity .55s,visibility .55s; }
    .loading.hidden { opacity:0; visibility:hidden; }
    .start-screen { position:fixed; z-index:12; left:max(16px,env(safe-area-inset-left)); top:50%; width:min(334px,calc(100vw - 32px)); padding:22px; border:1px solid rgba(255,255,255,.28); border-radius:24px; color:var(--text); background:linear-gradient(145deg,rgba(21,40,40,.82),rgba(28,48,48,.68)); backdrop-filter:blur(22px) saturate(135%); box-shadow:0 20px 60px rgba(15,31,32,.26),inset 0 1px 0 rgba(255,255,255,.1); transform:translateY(-50%); transition:opacity .42s,transform .42s,visibility .42s; }
    .start-screen.hidden { opacity:0; visibility:hidden; transform:translate(-18px,-50%); pointer-events:none; }
    .run-record { margin-top:16px; padding:11px 12px; border:1px solid rgba(159,224,189,.22); border-radius:14px; background:rgba(105,174,143,.12); }
    .run-record-line { display:flex; align-items:baseline; gap:5px; }
    .run-record strong { color:var(--accent); font-size:20px; line-height:1; font-variant-numeric:tabular-nums; }
    .run-record span { color:var(--text); font-size:10px; }
    .run-record small { margin-left:auto; color:var(--muted); font-size:9px; line-height:1.35; white-space:nowrap; }
    .run-record small b { color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
    .start-section { margin-top:19px; }
    .start-section-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--text); font-size:10px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; }
    .control-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
    .control-card { min-width:0; padding:12px 12px 11px; border:1px solid rgba(159,224,189,.2); border-radius:14px; background:linear-gradient(145deg,rgba(112,193,162,.16),rgba(7,19,21,.2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
    .control-card-head { display:flex; align-items:center; gap:7px; color:var(--text); }
    .control-card-head strong { font-size:12px; font-weight:700; }
    .control-mark { width:21px; height:21px; display:grid; place-items:center; border:1px solid rgba(211,255,229,.28); border-radius:7px; color:var(--accent); background:rgba(159,224,189,.12); font-size:11px; font-weight:750; }
    .control-card small { display:block; margin-top:9px; color:var(--muted); font-size:10px; line-height:1.3; white-space:nowrap; }
    .color-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
    .color-choice { width:31px; min-height:31px; padding:0; border-radius:50%; border-color:rgba(255,255,255,.34); box-shadow:inset 0 1px 3px rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.16); }
    .color-choice.selected { border-color:#effff8; box-shadow:0 0 0 2px rgba(168,255,229,.48),inset 0 1px 3px rgba(255,255,255,.34),0 5px 17px rgba(34,124,100,.34); }
    .color-choice[data-bike-color="d9342b"] { background:#d9342b; }
    .color-choice[data-bike-color="2d77d9"] { background:#2d77d9; }
    .color-choice[data-bike-color="e5b52f"] { background:#e5b52f; }
    .color-choice[data-bike-color="f0f2ee"] { background:#f0f2ee; }
    .color-choice[data-bike-color="25383b"] { background:#25383b; }
    .color-choice[data-bike-color="ef6aa5"] { background:#ef6aa5; }
    .color-choice[data-bike-color="2bd86b"] { background:#2bd86b; }
    .color-choice[data-bike-color="a8e6b5"] { background:#a8e6b5; }
    .color-choice[data-bike-color="f08a4b"] { background:#f08a4b; }
    .color-choice[data-bike-color="8b6de8"] { background:#8b6de8; }
    .start-primary { width:100%; margin-top:17px; min-height:46px; color:#173a32; background:linear-gradient(135deg,#a8ead0,#d9ffe9); border-color:rgba(225,255,242,.8); box-shadow:0 12px 26px rgba(25,105,82,.2); font-size:13px; font-weight:800; letter-spacing:.12em; }
    @media (max-width:720px) { .start-screen { top:116px; transform:none; padding:18px; } .start-screen.hidden { transform:translate(-12px,0); } }
    @media (hover:hover) and (pointer:fine) { .mobile-reveal-layer { display:none; } .mobile-controls { opacity:.52; } button:hover { background:rgba(28,45,44,.66); } .boost-action { display:none; } }
    @media (max-width:720px) {
      .goal-readout { top:calc(max(14px,env(safe-area-inset-top)) + 2px); }
      .goal-readout strong { font-size:27px; }
      .top-actions button { min-width:42px; padding:0 10px; font-size:0; }
      .top-actions button::first-letter { font-size:14px; }
      .steer-pad { width:126px; height:126px; bottom:calc(var(--safe-bottom) + 44px); }
      .steer-knob { width:58px; height:58px; }
      .pedal-btn { width:94px; height:94px; }
      .brake-btn { width:66px; height:66px; }
    }
    @media (hover:none), (pointer:coarse) {
      .boost-action { position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:calc(var(--safe-bottom) + 152px); z-index:8; width:96px; height:96px; min-width:96px !important; min-height:96px; padding:0; border-radius:50%; font-size:12px !important; line-height:1.25; white-space:normal; display:grid; place-items:center; }
    }
    @media (max-height:520px) {
      .start-screen { top:12px; max-height:calc(100vh - 24px); overflow:auto; }
      .start-screen.hidden { transform:translate(-12px,0); }
      .steer-pad { width:104px; height:104px; bottom:calc(var(--safe-bottom) + 14px); }
      .steer-knob { width:50px; height:50px; }
      .pedals { bottom:calc(var(--safe-bottom) + 10px); }
      .pedal-btn { width:82px; height:82px; }
      .brake-btn { width:60px; height:60px; }
      .center-actions { bottom:var(--safe-bottom); }
    }
    @media (max-height:520px) and (hover:none), (max-height:520px) and (pointer:coarse) {
      .boost-action { width:78px; height:78px; min-width:78px !important; min-height:78px; bottom:calc(var(--safe-bottom) + 106px); font-size:10px !important; }
    }