:root {
        --ink: #233456;
        --muted: #71809a;
        --paper: #fffdf8;
        --yellow: #ffd45f;
        --orange: #f29545;
        --blue: #2f78c4;
        --blue-dark: #1e4f8a;
        --green: #4dbb78;
        --green-dark: #287a4a;
        --red: #e85f56;
        --road: #566070;
        --shadow: 0 20px 55px rgba(35, 52, 86, 0.14);
      }

      * { box-sizing: border-box; }
      body {
        margin: 0;
        min-height: 100vh;
        color: var(--ink);
        font-family: "Nunito", sans-serif;
        background:
          radial-gradient(circle at 3% 11%, rgba(255, 212, 95, .28) 0 120px, transparent 121px),
          radial-gradient(circle at 98% 35%, rgba(77, 187, 120, .17) 0 180px, transparent 181px),
          linear-gradient(145deg, #fff8e9, #f4fbef 65%, #edf8f8);
        overflow-x: hidden;
      }
      button { color: inherit; font: inherit; }

      .topbar {
        height: 72px;
        padding: 0 clamp(18px, 5vw, 72px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(35, 52, 86, .08);
        background: rgba(255, 253, 248, .86);
        backdrop-filter: blur(14px);
        position: relative;
        z-index: 20;
      }
      .brand { display: flex; align-items: center; gap: 11px; }
      .brand-mark {
        width: 41px; height: 41px; display: grid; place-items: center;
        border-radius: 14px; color: white; background: var(--orange); font-size: 22px;
        transform: rotate(-5deg); box-shadow: 0 7px 16px rgba(242, 149, 69, .27);
      }
      .brand-name { font: 800 22px/1 "Baloo 2", cursive; }
      .brand-name small { display: block; color: #bf6723; font: 800 9px/1.3 "Nunito", sans-serif; letter-spacing: 1.6px; }
      .top-actions { display: flex; gap: 9px; }
      .icon-btn {
        width: 41px; height: 41px; display: grid; place-items: center;
        border: 1px solid #e5e3dc; border-radius: 13px; background: white;
        text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px rgba(35, 52, 86, .05);
        transition: .18s ease;
      }
      .icon-btn:hover { transform: translateY(-2px); }

      main { width: min(1220px, calc(100% - 30px)); margin: 0 auto; padding: 31px 0 46px; }
      .welcome { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 18px; }
      .eyebrow { margin: 0 0 3px; color: #b45a1d; font-size: 11px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase; }
      h1 { margin: 0; font: 800 clamp(30px, 4vw, 42px)/1.05 "Baloo 2", cursive; }
      .welcome-copy { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
      .best-pill { flex: 0 0 auto; padding: 10px 15px; border: 1px solid #e8e4dc; border-radius: 15px; background: white; font-size: 12px; font-weight: 900; box-shadow: 0 8px 22px rgba(35, 52, 86, .05); }

      .game-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 255px;
        overflow: hidden;
        border: 1px solid rgba(35, 52, 86, .1);
        border-radius: 29px;
        background: rgba(255, 255, 255, .9);
        box-shadow: var(--shadow);
      }
      .game-panel { min-width: 0; padding: 16px; background: #eef4e7; }
      .dashboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 12px; }
      .dash-card { padding: 9px 10px; border: 1px solid rgba(35, 52, 86, .08); border-radius: 13px; background: rgba(255, 255, 255, .94); text-align: center; }
      .dash-card strong { display: block; font: 800 18px/1.05 "Baloo 2", cursive; }
      .dash-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }

      .road-wrap {
        position: relative;
        height: min(62vh, 610px);
        min-height: 470px;
        overflow: hidden;
        border: 5px solid white;
        border-radius: 23px;
        background: #8dd9ef;
        box-shadow: inset 0 0 0 1px rgba(35, 52, 86, .08), 0 12px 28px rgba(35, 52, 86, .12);
      }
      canvas { width: 100%; height: 100%; display: block; touch-action: none; }
      .speed-gauge {
        position: absolute; left: 13px; top: 13px; z-index: 4; min-width: 84px; padding: 8px 11px;
        border: 2px solid rgba(255,255,255,.8); border-radius: 13px; background: rgba(35,52,86,.84);
        color: white; text-align: center; box-shadow: 0 6px 16px rgba(20,30,50,.16); pointer-events: none;
      }
      .speed-gauge strong { display: block; font: 800 18px/1 "Baloo 2", cursive; }
      .speed-gauge small { display: block; margin-top: 3px; color: #dce8ff; font-size: 7px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
      .game-overlay, .quiz-overlay {
        position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 20px;
        background: rgba(25, 39, 67, .43); backdrop-filter: blur(5px);
        opacity: 0; pointer-events: none; transition: .2s ease;
      }
      .game-overlay.show, .quiz-overlay.show { opacity: 1; pointer-events: auto; }
      .overlay-card { width: min(430px, 100%); padding: 27px; border-radius: 24px; background: white; box-shadow: 0 24px 65px rgba(20, 30, 55, .28); text-align: center; }
      .overlay-icon { font-size: 52px; }
      .overlay-card h2 { margin: 4px 0 4px; font: 800 29px/1.08 "Baloo 2", cursive; }
      .overlay-card p { margin: 7px auto 19px; color: var(--muted); font-size: 13px; line-height: 1.5; }
      .primary-btn { padding: 12px 22px; border: 0; border-radius: 14px; background: var(--orange); color: white; font-size: 12px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 16px rgba(242, 149, 69, .28); }
      .primary-btn:hover { transform: translateY(-1px); }

      .quiz-card { width: min(590px, 100%); padding: clamp(20px, 4vw, 31px); border-radius: 25px; background: white; box-shadow: 0 24px 70px rgba(20, 30, 55, .3); text-align: center; }
      .quiz-tag { display: inline-block; padding: 6px 11px; border-radius: 30px; color: #9a4d18; background: #fff0d5; font-size: 9px; font-weight: 900; letter-spacing: 1.1px; text-transform: uppercase; }
      .quiz-card h2 { margin: 10px auto 7px; max-width: 510px; font: 800 clamp(20px, 3vw, 27px)/1.25 "Baloo 2", cursive; }
      .quiz-hint { min-height: 19px; margin: 0 0 13px; color: var(--muted); font-size: 11px; font-weight: 800; }
      .answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
      .answer-btn { min-height: 49px; padding: 8px; border: 2px solid #e2e4df; border-bottom-width: 4px; border-radius: 14px; background: white; font: 800 17px/1.1 "Baloo 2", cursive; cursor: pointer; transition: .14s; }
      .answer-btn:hover:not(:disabled) { border-color: var(--orange); transform: translateY(-2px); }
      .answer-btn.correct { color: white; border-color: var(--green-dark); background: var(--green); }
      .answer-btn.wrong { color: white; border-color: #b9443e; background: var(--red); }
      .answer-btn:disabled { cursor: default; }
      .answer-key { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: rgba(35, 52, 86, .08); font: 900 9px/1 "Nunito"; }
      .quiz-feedback { min-height: 42px; margin: 12px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.4; }
      .continue-btn { display: none; margin: 3px auto 0; padding: 10px 18px; border: 0; border-radius: 12px; color: white; background: var(--ink); font-size: 11px; font-weight: 900; cursor: pointer; }
      .continue-btn.show { display: block; }

      .touch-controls { display: none; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
      .steer-btn { min-height: 55px; border: 0; border-radius: 16px; background: white; box-shadow: 0 5px 14px rgba(35, 52, 86, .1); font: 900 15px/1 "Nunito", sans-serif; cursor: pointer; touch-action: none; user-select: none; }
      .steer-btn .control-arrow { display: inline-block; margin: 0 6px; font-size: 23px; vertical-align: -2px; }
      .steer-btn.active { color: white; background: var(--blue); transform: translateY(2px); }

      .side-panel { display: flex; flex-direction: column; gap: 13px; padding: 22px 19px; background: #fffdf8; }
      .driver-card { position: relative; min-height: 165px; padding: 18px 15px; overflow: hidden; border-radius: 20px; background: linear-gradient(145deg, #ffd86d, #ffeca8); text-align: center; }
      .driver-face {
        width: 82px; height: 78px; margin: 0 auto 7px; border: 4px solid white; border-radius: 50%;
        background-image: url("../assets/images/daddy-doll-character-sheet-v5.png");
        background-size: 768px 512px; background-position: -92px -20px; background-repeat: no-repeat;
        box-shadow: 0 8px 18px rgba(94, 61, 28, .18);
      }
      .driver-card h2 { margin: 0; font: 800 20px/1 "Baloo 2", cursive; }
      .driver-card p { margin: 5px 0 0; color: #735329; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
      .side-card { padding: 15px; border: 1px solid #e8e7e0; border-radius: 17px; background: white; }
      .side-card h3 { margin: 0 0 8px; font: 800 16px/1.1 "Baloo 2", cursive; }
      .side-card p, .side-card li { color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.45; }
      .side-card ul { margin: 0; padding-left: 18px; }
      .side-card p { margin: 0; }
      .math-progress { margin-top: auto; padding: 15px; border-radius: 17px; background: #eaf7ed; }
      .math-progress-top { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
      .progress-track { height: 8px; margin-top: 9px; overflow: hidden; border-radius: 20px; background: rgba(40, 122, 74, .14); }
      .progress-fill { width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width .3s; }

      @media (max-width: 900px) {
        .game-shell { grid-template-columns: minmax(0, 1fr); }
        .side-panel { display: grid; grid-template-columns: 170px 1fr 1fr; align-items: stretch; }
        .driver-card { min-height: 140px; }
        .driver-face { width: 70px; height: 67px; background-size: 655px 437px; background-position: -78px -17px; }
        .math-progress { margin: 0; }
      }
      @media (pointer: coarse), (max-width: 700px) { .touch-controls { display: grid; } }
      @media (max-width: 650px) {
        .topbar { padding: 0 13px; }
        .brand-name { font-size: 18px; }
        main { width: calc(100% - 16px); padding-top: 20px; }
        .welcome { align-items: start; }
        .welcome-copy { font-size: 12px; }
        .best-pill { padding: 8px 10px; }
        .best-pill span { display: none; }
        .game-shell { border-radius: 22px; }
        .game-panel { padding: 9px; }
        .dashboard { gap: 5px; }
        .dash-card { padding: 7px 3px; }
        .dash-card strong { font-size: 15px; }
        .road-wrap { min-height: 410px; height: 56vh; border-width: 3px; border-radius: 18px; }
        .side-panel { grid-template-columns: 1fr 1fr; padding: 13px; }
        .driver-card { grid-column: 1 / -1; min-height: auto; display: grid; grid-template-columns: 72px 1fr; align-items: center; text-align: left; }
        .driver-face { grid-row: 1 / 3; margin: 0; }
        .side-card { padding: 12px; }
        .side-card li { font-size: 10px; }
        .math-progress { grid-column: 1 / -1; }
        .touch-controls { grid-template-columns: repeat(2, 1fr); }
        .answer-grid { grid-template-columns: 1fr; }
        .quiz-card { padding: 19px 14px; }
      }
      @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }