/* INTRO */
    #intro {
      position: absolute;
      inset: 0;
      z-index: 60;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      overflow-y: auto;
      background:
        radial-gradient(120% 70% at 50% 0%, rgba(56, 189, 248, .35) 0%, transparent 55%),
        linear-gradient(170deg, #070F1E 0%, #0B1C33 38%, #0E2340 72%, #15355B 100%);
    }

    #intro .intro-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 36px 20px 30px;
      gap: 16px;
      max-width: 400px;
      width: 100%;
      margin: auto;
    }

    #intro .intro-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    #intro .intro-logo-img {
      width: 76px;
      height: auto;
      display: block;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
    }

    #intro h1 {
      font-family: var(--display);
      font-weight: 900;
      font-size: 46px;
      color: #fff;
      text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
      letter-spacing: -1px;
    }

    #intro .tag {
      font-weight: 600;
      font-size: 13.5px;
      color: rgba(255, 255, 255, .65);
      letter-spacing: 0.5px;
    }

    #intro .bigdog {
      font-size: 88px;
      filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .35));
      animation: introBob 2.5s ease-in-out infinite;
    }

    @keyframes introBob {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-8px);
      }
    }

    #intro .how-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    #intro .how-tile {
      background: rgba(255, 255, 255, .1);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1.5px solid rgba(255, 255, 255, .18);
      border-radius: 18px;
      padding: 14px 12px;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    #intro .how-tile .tile-icon {
      font-size: 26px;
      line-height: 1;
    }

    #intro .how-tile .tile-title {
      font-family: var(--display);
      font-weight: 800;
      font-size: 13px;
      color: #fff;
    }

    #intro .how-tile .tile-desc {
      font-size: 11.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, .65);
      line-height: 1.45;
    }

    #intro .evo-hint {
      background: rgba(255, 200, 61, .15);
      border: 1.5px solid rgba(255, 200, 61, .35);
      border-radius: 16px;
      padding: 13px 16px;
      width: 100%;
      text-align: left;
    }

    #intro .evo-hint .eh-title {
      font-family: var(--display);
      font-weight: 800;
      font-size: 13px;
      color: var(--gold);
      margin-bottom: 6px;
    }

    #intro .evo-hint ul {
      list-style: none;
      font-size: 12px;
      color: rgba(255, 255, 255, .75);
      font-weight: 500;
      line-height: 1.7;
    }

    #intro .evo-hint li::before {
      content: '⭐ ';
    }

    #intro #play {
      width: 100%;
      background: linear-gradient(135deg, #ffe27a, var(--gold-d));
      color: #3a2800;
      font-family: var(--display);
      font-weight: 900;
      font-size: 18px;
      padding: 16px 44px;
      border-radius: 22px;
      box-shadow: 0 6px 0 #a06a10, 0 10px 24px rgba(0, 0, 0, .3);
      border: 2.5px solid rgba(255, 255, 255, .4);
      letter-spacing: 0.3px;
      transition: transform .15s var(--ease-bounce), box-shadow .15s;
    }

    #intro #play:active {
      transform: translateY(4px);
      box-shadow: 0 2px 0 #a06a10, 0 4px 12px rgba(0, 0, 0, .2);
    }

    #intro.hide {
      opacity: 0;
      pointer-events: none;
      transition: .5s;
    }

    /* ── DRIVE DESTINATIONS ── */
    .drive-body {
      padding: 16px 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      max-height: 70vh;
    }

    /* ── FLIGHTS picker rows ── */
    #flights-overlay { z-index: 9500; } /* above the city map modal (z 90) */
    #flights-list { display: flex; flex-direction: column; gap: 8px; }
    .flight-row {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      width: 100%; text-align: left; cursor: pointer;
      padding: 12px 14px; border-radius: 14px;
      border: 1.5px solid rgba(37,99,235,.18);
      background: linear-gradient(160deg,#ffffff,#eef4fc);
      box-shadow: 0 3px 10px rgba(0,0,0,.07);
      font-family: inherit; transition: transform .08s, box-shadow .12s;
    }
    .flight-row:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,.18); }
    .flight-row:active:not(:disabled) { transform: translateY(1px); }
    .flight-row:disabled { opacity: .5; cursor: not-allowed; }
    .flight-row .fr-dest { font-family: var(--display); font-weight: 800; font-size: 15px; color: #1e3a5f; }
    .flight-row .fr-code { font-size: 11px; font-weight: 700; color: #2563eb; background: rgba(37,99,235,.10); padding: 1px 6px; border-radius: 6px; margin-left: 4px; }
    .flight-row .fr-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
    .flight-row .fr-price { font-family: var(--display); font-weight: 800; font-size: 15px; color: #047857; white-space: nowrap; }
    .flight-row .fr-price.fr-locked { color: #b45309; }



    /* ── PROGRESSION CARD ── */
    .prog-card {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 16px; padding: 16px; margin-bottom: 16px;
    }
    .prog-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
    .prog-lv {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      min-width: 68px; padding: 8px 10px; border-radius: 14px;
      background: linear-gradient(135deg, var(--violet), #0e7490); color: #fff;
    }
    .prog-lv-num { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1; }
    .prog-lv-cap { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; opacity: .85; margin-top: 2px; }
    .prog-stage { flex: 1; min-width: 0; }
    .prog-stage-name { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); }
    .prog-stage-blurb { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
    .prog-bar { height: 14px; border-radius: 99px; background: rgba(8, 24, 52, .45); overflow: hidden; }
    .prog-bar-fill {
      height: 100%; border-radius: 99px;
      background: linear-gradient(90deg, var(--green), var(--gold));
      transition: width .5s cubic-bezier(.2, .7, .3, 1);
    }
    .prog-bar-cap { font-size: 11.5px; color: var(--ink-muted); margin-top: 6px; text-align: center; }
    .prog-sub {
      font-family: var(--display); font-weight: 800; font-size: 13px;
      color: var(--ink-muted); letter-spacing: .4px;
      margin: 14px 0 6px; text-transform: uppercase;
    }
    .prog-m-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; }
    .prog-m-name { flex: 1; color: var(--ink); font-weight: 600; }
    .prog-m-stars { color: var(--gold); letter-spacing: 1px; }
    .prog-m-cap { min-width: 56px; text-align: right; font-size: 11.5px; color: var(--ink-muted); }
    .prog-foot { display: flex; gap: 8px; margin-top: 14px; }
    .prog-chip {
      flex: 1; text-align: center; padding: 9px 6px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border);
    }
    .prog-chip b { display: block; font-family: var(--display); font-size: 16px; color: var(--ink); }
    .prog-chip span { display: block; font-size: 10.5px; color: var(--ink-muted); margin-top: 1px; }

    /* ── TALK SHEET ── */
    #talk-body { padding: 16px; overflow-y: auto; }
    .talk-reply {
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 18px; border-top-left-radius: 6px;
      padding: 16px 18px; margin-bottom: 16px;
      font-size: 16px; line-height: 1.5; color: var(--ink); min-height: 62px;
      display: flex; align-items: center;
    }
    .talk-reply.thinking { opacity: .55; font-style: italic; }
    .talk-qs { display: flex; flex-direction: column; gap: 10px; }
    .talk-q {
      display: flex; align-items: center; gap: 10px;
      width: 100%; text-align: left;
      padding: 14px 16px; min-height: 52px;
      border-radius: 14px; border: 2px solid var(--border-strong);
      background: var(--surface); color: var(--ink);
      font-family: var(--body); font-size: 15px; font-weight: 600;
      cursor: pointer;
    }
    .talk-q:active { transform: scale(.985); }
    .talk-q .tq-ico { font-size: 20px; flex: 0 0 auto; }

    /* ── TRAVEL MODAL (district picker) ── */
    #city-map-modal {
      position: fixed; inset: 0;
      background: rgba(16, 21, 31, 0.92); backdrop-filter: blur(8px);
      z-index: 90; display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
    }
    #city-map-modal.open { opacity: 1; pointer-events: auto; }
    .city-map-card {
      background: #f8fafb; width: 96%; max-width: 920px; height: 92%; max-height: 620px;
      border-radius: 20px; border: 3px solid var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.5);
      padding: 0; display: flex; flex-direction: row; position: relative; overflow: hidden;
    }
    .city-map-card h2 { font-family: var(--display); font-size: 18px; color: #0f172a; margin: 0; }
    .city-map-card p { font-size: 12px; color: #64748b; margin: 2px 0 0; }
    #city-map-close-btn {
      position: absolute; top: 10px; right: 10px;
      background: #ef4444; color: white; border: 3px solid var(--ink); border-radius: 50%;
      width: 32px; height: 32px; font-weight: 800; cursor: pointer; font-size: 14px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 3px 0 var(--ink); transition: transform 0.1s; z-index: 10;
    }
    #city-map-close-btn:active { transform: translateY(3px); box-shadow: none; }
    .city-map-container {
      flex: 1; position: relative; overflow: hidden;
      background: #e8eff8;
    }
    .map-header {
      position: absolute; top: 12px; left: 16px; z-index: 8;
      background: rgba(255,255,255,0.92); padding: 8px 14px; border-radius: 12px;
      border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
    }
    .drive-map-pin {
      display: flex; flex-direction: column; align-items: center; cursor: pointer;
      transition: transform 0.15s;
    }
    .drive-map-pin:hover { transform: scale(1.12); }
    .drive-map-pin:active { transform: scale(0.95); }
    .dmp-bubble {
      width: 46px; height: 46px; border-radius: 50% 50% 50% 4px;
      background: #fff; border: 2.5px solid #1e3a8a;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(0,0,0,.2);
      color: #1e3a8a;
    }
    .drive-map-pin.active .dmp-bubble { border-color: var(--green); background: #ecfdf5; color: #065f46; }
    .dmp-tag {
      margin-top: 2px; background: #1e293b; color: #fff;
      font-family: var(--display); font-size: 13px; font-weight: 800;
      padding: 2px 6px; border-radius: 6px;
      white-space: nowrap; text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .drive-map-pin.active .dmp-tag { background: var(--green); }
    #map-car { display: none; }
    #map-nodes { display: none; }
    .map-sidebar {
      width: 160px; background: #1e293b; display: flex; flex-direction: column; padding: 14px 10px;
      border-left: 2px solid #334155; gap: 10px; overflow-y: auto;
    }
    .map-sidebar-title { font-family: var(--display); font-size: 12px; color: #94a3b8; text-align: center; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
    .map-sidebar-item {
      background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.1); border-radius: 12px;
      padding: 10px 6px; cursor: pointer; transition: background .2s, border-color .2s; text-align: center;
    }
    .map-sidebar-item:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
    .map-sidebar-item .si-icon { font-size: 22px; display: block; margin-bottom: 4px; }
    .map-sidebar-item .si-label { font-size: 10px; font-weight: 700; color: #e2e8f0; }
    @media (max-width: 640px) {
      .city-map-card { flex-direction: column; max-height: 88vh; }
      .map-sidebar { width: 100%; max-height: 120px; flex-direction: row; border-left: none; border-top: 2px solid #334155; }
      .map-sidebar-item { flex: 1; min-width: 80px; }
    }

    .dest-card {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      text-align: left;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      box-shadow: var(--shadow-sm);
      transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
      cursor: pointer;
    }

    .dest-card:hover {
      border-color: var(--violet);
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm), var(--glow-violet);
    }

    .dest-card:active {
      transform: scale(.97);
    }

    .dest-card.current {
      border-color: var(--gold);
      background: var(--panel-soft);
    }

    .dest-card .demoji {
      font-size: 32px;
      width: 52px;
      height: 52px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(56, 225, 240, .14));
    }

    .dest-card .dinfo {
      flex: 1;
      min-width: 0;
    }

    .dest-card .dname {
      font-family: var(--display);
      font-weight: 800;
      font-size: 17px;
      color: var(--ink);
    }

    .dest-card .dboost {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink-muted);
      margin-top: 2px;
    }

    .dest-card .dgo {
      font-family: var(--display);
      font-weight: 800;
      font-size: 13px;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-d));
      padding: 8px 14px;
      border-radius: 999px;
      flex-shrink: 0;
      min-height: 36px;
      display: flex;
      align-items: center;
    }

    .dest-card.current .dgo {
      background: #b9c2cf;
    }

    /* ── DRIVE ANIMATION OVERLAY ── */
    #drive-anim {
      position: absolute;
      inset: 0;
      z-index: 56;
      background: linear-gradient(180deg, #1a3a8f 0%, #2C5BC0 40%, #3F7DE0 70%, #6FB1ED 100%);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    #drive-anim.show {
      display: flex;
    }

    #drive-road {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40%;
      background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
    }

    #drive-road::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #FFC83D;
    }

    #drive-road-line {
      position: absolute;
      bottom: 37%;
      left: 0;
      right: 0;
      height: 7px;
      overflow: hidden;
    }

    #drive-road-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 400%;
      height: 100%;
      background: repeating-linear-gradient(90deg, #fff 0px, #fff 70px, transparent 70px, transparent 110px);
      animation: roadDash 0.35s linear infinite;
    }

    @keyframes roadDash {
      to {
        transform: translateX(110px);
      }
    }

    /* Smoke particles */
    #drive-smoke-wrap {
      position: absolute;
      bottom: 40%;
      left: 0;
      will-change: transform;
      pointer-events: none;
      transform: translate3d(-220px,0,0);
    }

    @-webkit-keyframes smokeDrive {
      0% { -webkit-transform: translate3d(-220px,0,0); animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
      35% { -webkit-transform: translate3d(calc(50vw - 120px),0,0); animation-timing-function: linear; }
      39% { -webkit-transform: translate3d(calc(50vw - 114px),0,0); }
      43% { -webkit-transform: translate3d(calc(50vw - 126px),0,0); }
      47% { -webkit-transform: translate3d(calc(50vw - 113px),0,0); }
      51% { -webkit-transform: translate3d(calc(50vw - 127px),0,0); }
      55% { -webkit-transform: translate3d(calc(50vw - 115px),0,0); }
      59% { -webkit-transform: translate3d(calc(50vw - 125px),0,0); }
      63% { -webkit-transform: translate3d(calc(50vw - 120px),0,0); animation-timing-function: cubic-bezier(0.6,0,1,0.4); }
      100% { -webkit-transform: translate3d(calc(100vw + 200px),0,0); }
    }
    @keyframes smokeDrive {
      0% { transform: translate3d(-220px,0,0); animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); }
      35% { transform: translate3d(calc(50vw - 120px),0,0); animation-timing-function: linear; }
      39% { transform: translate3d(calc(50vw - 114px),0,0); }
      43% { transform: translate3d(calc(50vw - 126px),0,0); }
      47% { transform: translate3d(calc(50vw - 113px),0,0); }
      51% { transform: translate3d(calc(50vw - 127px),0,0); }
      55% { transform: translate3d(calc(50vw - 115px),0,0); }
      59% { transform: translate3d(calc(50vw - 125px),0,0); }
      63% { transform: translate3d(calc(50vw - 120px),0,0); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.4); }
      100% { transform: translate3d(calc(100vw + 200px),0,0); }
    }

    .smoke-puff {
      position: absolute;
      border-radius: 50%;
      background: rgba(180, 180, 190, 0.7);
      -webkit-animation: puffUp 1.1s ease-out infinite;
      animation: puffUp 1.1s ease-out infinite;
    }

    .smoke-puff:nth-child(1) {
      width: 28px; height: 28px; left: -18px; bottom: 54px; animation-delay: 0s;
    }
    .smoke-puff:nth-child(2) {
      width: 20px; height: 20px; left: -30px; bottom: 66px; animation-delay: 0.25s;
    }
    .smoke-puff:nth-child(3) {
      width: 16px; height: 16px; left: -8px; bottom: 78px; animation-delay: 0.5s;
    }
    .smoke-puff:nth-child(4) {
      width: 22px; height: 22px; left: -38px; bottom: 80px; animation-delay: 0.75s;
    }

    @-webkit-keyframes puffUp {
      0% { -webkit-transform: translateY(0) scale(0.5); opacity: 0.8; }
      60% { opacity: 0.5; }
      100% { -webkit-transform: translateY(-50px) scale(1.6); opacity: 0; }
    }
    @keyframes puffUp {
      0% { transform: translateY(0) scale(0.5); opacity: 0.8; }
      60% { opacity: 0.5; }
      100% { transform: translateY(-50px) scale(1.6); opacity: 0; }
    }

    #drive-car-wrap {
      position: absolute;
      bottom: 37%;
      left: 0;
      will-change: transform;
      transform: translate3d(-180px,0,0);
    }
    #drive-car-wrap.playing {
      -webkit-animation: carDrive 3.2s forwards;
      animation: carDrive 3.2s forwards;
    }
    #drive-smoke-wrap.playing {
      -webkit-animation: smokeDrive 3.2s forwards;
      animation: smokeDrive 3.2s forwards;
    }

    @-webkit-keyframes carDrive {
      0%   { -webkit-transform: translate3d(-180px,0,0); animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
      35%  { -webkit-transform: translate3d(calc(50vw - 80px),0,0); animation-timing-function: linear; }
      39%  { -webkit-transform: translate3d(calc(50vw - 74px),0,0); }
      43%  { -webkit-transform: translate3d(calc(50vw - 86px),0,0); }
      47%  { -webkit-transform: translate3d(calc(50vw - 73px),0,0); }
      51%  { -webkit-transform: translate3d(calc(50vw - 87px),0,0); }
      55%  { -webkit-transform: translate3d(calc(50vw - 75px),0,0); }
      59%  { -webkit-transform: translate3d(calc(50vw - 85px),0,0); }
      63%  { -webkit-transform: translate3d(calc(50vw - 80px),0,0); animation-timing-function: cubic-bezier(0.6,0,1,0.4); }
      100% { -webkit-transform: translate3d(calc(100vw + 200px),0,0); }
    }
    @keyframes carDrive {
      0%   { transform: translate3d(-180px,0,0); animation-timing-function: cubic-bezier(0.25,0.1,0.25,1); }
      35%  { transform: translate3d(calc(50vw - 80px),0,0); animation-timing-function: linear; }
      39%  { transform: translate3d(calc(50vw - 74px),0,0); }
      43%  { transform: translate3d(calc(50vw - 86px),0,0); }
      47%  { transform: translate3d(calc(50vw - 73px),0,0); }
      51%  { transform: translate3d(calc(50vw - 87px),0,0); }
      55%  { transform: translate3d(calc(50vw - 75px),0,0); }
      59%  { transform: translate3d(calc(50vw - 85px),0,0); }
      63%  { transform: translate3d(calc(50vw - 80px),0,0); animation-timing-function: cubic-bezier(0.6,0,1,0.4); }
      100% { transform: translate3d(calc(100vw + 200px),0,0); }
    }

    /* Wheel spin */
    .car-wheel {
      -webkit-animation: wheelSpin 0.3s linear infinite;
      animation: wheelSpin 0.3s linear infinite;
      transform-origin: center;
    }

    @-webkit-keyframes wheelSpin { to { -webkit-transform: rotate(360deg); } }
    @keyframes wheelSpin { to { transform: rotate(360deg); } }

    #drive-car-svg {
      width: 160px;
      height: 84px;
      filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
    }

    #drive-label {
      position: absolute;
      bottom: 57%;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, .15);
      backdrop-filter: blur(12px);
      border: 2px solid rgba(255, 255, 255, .4);
      border-radius: 22px;
      padding: 12px 28px;
      text-align: center;
      white-space: nowrap;
      animation: labelPop 0.45s 0.25s var(--ease-bounce) both;
    }

    @keyframes labelPop {
      from {
        transform: translateX(-50%) scale(0.7);
        opacity: 0;
      }

      to {
        transform: translateX(-50%) scale(1);
        opacity: 1;
      }
    }

    #drive-label .dl-top {
      font-family: var(--body);
      font-size: 13px;
      font-weight: 700;
      color: rgba(255, 255, 255, .85);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    #drive-label .dl-dest {
      font-family: var(--display);
      font-size: 26px;
      font-weight: 800;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
      margin-top: 4px;
    }

    /* Speed lines */
    #drive-speed-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .speed-line {
      position: absolute;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      border-radius: 2px;
      animation: speedLine 0.6s linear infinite;
    }

    @keyframes speedLine {
      from {
        transform: translateX(100%);
      }

      to {
        transform: translateX(-200%);
      }
    }

    /* ── SAVINGS JAR + SLIDE-OUT SHOP MENU ── */
    .savebox {
      display: flex;
      align-items: center;
      gap: 3px;
      background: linear-gradient(135deg, var(--purple), var(--purple-d));
      color: #fff;
      font-family: var(--display);
      font-weight: 800;
      padding: 5px 11px;
      border-radius: 999px;
      box-shadow: var(--shadow-sm);
      font-size: 15px;
    }

    .savebox .sj {
      font-size: 9px;
      letter-spacing: .5px;
      opacity: .85;
      margin-right: 2px;
    }

    .savebox .c {
      opacity: .9;
    }


    /* EVO LEVEL BADGE */
    .evobadge {
      display: flex;
      align-items: center;
      gap: 4px;
      background: linear-gradient(145deg, #ff9f20, #e65100);
      color: #fff;
      font-family: var(--display);
      font-weight: 900;
      font-size: 15px;
      padding: 7px 12px;
      border-radius: 20px;
      box-shadow: 0 3px 0 #9c3200, 0 4px 14px rgba(230, 81, 0, .35);
      border: 2px solid rgba(255, 255, 255, .3);
      white-space: nowrap;
      transition: transform .2s var(--ease-bounce);
    }

    .evobadge:hover {
      transform: scale(1.05);
    }

    .evobadge .ev-tiny {
      font-size: 9px;
      opacity: .75;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    /* EVO PROGRESS BAR */
    .evo-bar-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      min-width: 80px;
    }
    .evobar {
      width: 80px;
      height: 8px;
      background: rgba(0,0,0,0.28);
      border-radius: 8px;
      border: 1.5px solid rgba(255,255,255,0.20);
      overflow: hidden;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    }
    .evobar-fill {
      height: 100%;
      width: 0%;
      border-radius: 8px;
      background: linear-gradient(90deg, #22c55e, #86efac);
      transition: width 0.5s cubic-bezier(0.22,1,0.36,1);
      box-shadow: 0 0 8px rgba(34,197,94,0.7);
    }
    .evobar.zeroed .evobar-fill {
      background: linear-gradient(90deg, #ef4444, #fca5a5);
      box-shadow: 0 0 8px rgba(239,68,68,0.8);
      animation: evobarPulse 0.8s ease-in-out infinite alternate;
    }
    @keyframes evobarPulse {
      from { opacity: 0.5; }
      to   { opacity: 1.0; }
    }
    .evobar-label {
      font-family: var(--body);
      font-size: 8px;
      color: rgba(255,255,255,0.65);
      white-space: nowrap;
      text-align: right;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* LEVEL UP POPUP */
    #levelup-overlay {
      position: absolute;
      inset: 0;
      z-index: 70;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(6, 12, 24, .8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 20px;
    }

    #levelup-overlay.show {
      display: flex;
      animation: fade .3s;
    }

    /* ── LEVEL-DOWN OVERLAY ── */
    #leveldown-overlay {
      position: absolute;
      inset: 0;
      z-index: 71;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(20, 0, 0, .88);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 20px;
    }

    #leveldown-overlay.show {
      display: flex;
      animation: fade .3s;
    }

    .leveldown-card {
      background: linear-gradient(170deg, #2a1212 0%, #1a0808 100%);
      border-radius: var(--radius-lg);
      max-width: 360px;
      width: 100%;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1.5px rgba(239, 68, 68, .4);
      animation: levelPop .45s cubic-bezier(.3, 1.4, .5, 1);
      overflow: hidden;
      text-align: center;
    }

    .leveldown-banner {
      background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
      padding: 24px 20px 20px;
    }

    @keyframes petCry {
      0% {
        transform: rotate(-10deg) translateY(0);
      }

      25% {
        transform: rotate(10deg) translateY(-4px);
      }

      50% {
        transform: rotate(-10deg) translateY(0);
      }

      75% {
        transform: rotate(8deg) translateY(-2px);
      }

      100% {
        transform: rotate(0deg) translateY(0);
      }
    }

    #ld-emoji-anim {
      font-size: 56px;
      display: block;
      margin-bottom: 10px;
      animation: petCry .55s ease 3;
    }

    #ld-title {
      font-family: var(--display);
      font-weight: 800;
      font-size: 22px;
      color: #fff;
      margin-bottom: 4px;
    }

    #ld-stat-msg {
      font-size: 13px;
      color: rgba(255, 255, 255, .85);
    }

    .leveldown-body {
      padding: 20px;
    }

    #ld-msg {
      font-size: 13px;
      color: var(--ink-muted);
      line-height: 1.5;
      margin-bottom: 14px;
    }

    #ld-level-badge {
      display: inline-block;
      background: rgba(239, 68, 68, .15);
      border: 1px solid rgba(239, 68, 68, .35);
      color: #ef4444;
      font-family: var(--display);
      font-weight: 800;
      font-size: 15px;
      padding: 8px 22px;
      border-radius: 50px;
      margin-bottom: 18px;
    }

    .leveldown-ok-btn {
      width: 100%;
      padding: 13px;
      background: #ef4444;
      color: #fff;
      font-family: var(--display);
      font-weight: 800;
      font-size: 16px;
      border: none;
      border-radius: 12px;
      cursor: pointer;
    }