:root { color-scheme: dark; font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #173451; }
    body { touch-action: none; user-select: none; -webkit-user-select: none; }
    button { font: inherit; }
    #game {
      position: relative;
      width: 100%;
      height: var(--escapee-vh, 100dvh);
      min-height: 320px;
      overflow: hidden;
      isolation: isolate;
      background: radial-gradient(circle at 50% 42%, #7298aa 0, #355b70 44%, #173451 100%);
    }
    canvas { display: block; width: 100%; height: 100%; touch-action: none; }
    .hud {
      position: absolute;
      z-index: 3;
      top: max(10px, env(safe-area-inset-top));
      left: max(10px, env(safe-area-inset-left));
      right: max(66px, calc(env(safe-area-inset-right) + 54px));
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      pointer-events: none;
    }
    .hud-card {
      min-width: 0;
      padding: 7px 9px 8px;
      border: 1px solid rgba(221, 245, 255, .35);
      border-radius: 12px;
      color: #f7fcff;
      background: rgba(12, 35, 50, .74);
      box-shadow: 0 5px 18px rgba(5, 18, 28, .23);
      backdrop-filter: blur(7px);
    }
    .hud-label { display: block; margin-bottom: 2px; color: #bcd9e7; font-size: clamp(9px, 2.5vw, 11px); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hud-value { display: block; font-size: clamp(14px, 4vw, 20px); font-weight: 950; line-height: 1; white-space: nowrap; }
    .meter { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .15); }
    .meter > i { display: block; width: 100%; height: 100%; border-radius: inherit; background: #75d7ff; transform-origin: left center; }
    #accessFill { background: #9fe185; }
    #fuelFill.is-low { background: #ffb34c; }
    #fuelFill.is-empty { background: #e75b5b; }
    .message {
      position: absolute;
      z-index: 4;
      top: max(78px, calc(env(safe-area-inset-top) + 74px));
      left: 50%;
      max-width: calc(100% - 36px);
      padding: 8px 13px;
      border-radius: 999px;
      color: #f9fdff;
      background: rgba(9, 30, 43, .78);
      font-size: clamp(11px, 3vw, 14px);
      font-weight: 900;
      text-align: center;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity .16s ease;
      pointer-events: none;
    }
    .message.is-visible { opacity: 1; }
    .warning {
      position: absolute;
      z-index: 4;
      left: 50%;
      bottom: max(118px, calc(env(safe-area-inset-bottom) + 110px));
      width: min(540px, calc(100% - 34px));
      padding: 9px 14px;
      border: 2px solid rgba(255, 190, 96, .8);
      border-radius: 14px;
      color: #fff2d0;
      background: rgba(91, 42, 20, .84);
      box-shadow: 0 8px 28px rgba(31, 13, 5, .28);
      font-size: clamp(12px, 3.3vw, 16px);
      font-weight: 950;
      text-align: center;
      transform: translateX(-50%);
      pointer-events: none;
    }
    .warning[hidden] { display: none; }
    .touch-controls {
      position: absolute;
      z-index: 5;
      left: max(16px, env(safe-area-inset-left));
      right: max(16px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      pointer-events: none;
    }
    .touch-controls button { pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; }
    .joystick {
      position: relative;
      width: clamp(78px, 22vw, 102px);
      height: clamp(78px, 22vw, 102px);
      min-width: 64px;
      min-height: 64px;
      border: 3px solid rgba(239, 250, 255, .75);
      border-radius: 50%;
      background: rgba(18, 55, 75, .58);
      box-shadow: inset 0 0 0 20px rgba(198, 230, 242, .09), 0 7px 24px rgba(2, 16, 25, .24);
    }
    .joystick::after {
      content: "";
      position: absolute;
      width: 34%;
      height: 34%;
      left: 33%;
      top: 33%;
      border-radius: 50%;
      background: rgba(236, 248, 252, .88);
      box-shadow: 0 3px 10px rgba(4, 21, 31, .35);
      transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
    }
    .action {
      width: clamp(72px, 19vw, 92px);
      height: clamp(72px, 19vw, 92px);
      min-width: 64px;
      min-height: 64px;
      border: 3px solid rgba(255, 244, 206, .82);
      border-radius: 50%;
      color: #fff9e5;
      background: rgba(206, 96, 34, .76);
      box-shadow: inset 0 0 0 7px rgba(255, 189, 89, .17), 0 7px 24px rgba(38, 15, 4, .27);
      font-size: clamp(10px, 2.8vw, 13px);
      font-weight: 950;
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .action.is-locked { opacity: .48; filter: grayscale(.65); }
    .action.is-active { transform: scale(.95); background: rgba(237, 139, 46, .93); }
    .action small { display: block; font-size: .78em; letter-spacing: 0; }
    .overlay {
      position: absolute;
      z-index: 8;
      inset: 0;
      display: grid;
      place-items: center;
      padding: max(70px, calc(env(safe-area-inset-top) + 64px)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      background: rgba(8, 28, 42, .66);
      backdrop-filter: blur(7px);
      overflow: auto;
      touch-action: pan-y;
    }
    .overlay[hidden] { display: none; }
    .panel {
      width: min(660px, 100%);
      padding: clamp(20px, 5vw, 34px);
      border: 1px solid rgba(227, 247, 255, .42);
      border-radius: 24px;
      color: #f7fcff;
      background: linear-gradient(155deg, rgba(28, 67, 88, .97), rgba(10, 35, 51, .98));
      box-shadow: 0 22px 75px rgba(2, 13, 21, .42);
      text-align: center;
    }
    .eyebrow { color: #9fdff3; font-size: 12px; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
    .panel h1, .panel h2 { margin: 8px 0 10px; font-weight: 1000; letter-spacing: -.035em; }
    .panel h1 { font-size: clamp(38px, 11vw, 72px); line-height: .92; }
    .panel h2 { font-size: clamp(27px, 7vw, 42px); }
    .panel p { margin: 0 auto 18px; max-width: 530px; color: #d1e8f1; font-size: clamp(14px, 3.7vw, 18px); line-height: 1.45; }
    .panel strong { color: #fff0af; }
    .primary-button, .upgrade-card {
      min-height: 52px;
      border: 0;
      border-radius: 14px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .primary-button {
      min-width: min(260px, 100%);
      padding: 14px 24px;
      color: #173043;
      background: #fff0ad;
      box-shadow: 0 6px 0 #caa84d;
      font-size: 18px;
      font-weight: 1000;
    }
    .primary-button:active { transform: translateY(3px); box-shadow: 0 3px 0 #caa84d; }
    .controls-copy { margin-top: 18px; color: #a8c8d5; font-size: 12px; font-weight: 800; }
    .upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
    .upgrade-card {
      padding: 14px 12px;
      color: #f8fcff;
      background: rgba(105, 151, 171, .21);
      border: 1px solid rgba(215, 242, 251, .34);
      text-align: left;
    }
    .upgrade-card:hover, .upgrade-card:focus-visible { background: rgba(126, 184, 207, .32); outline: 3px solid rgba(255, 232, 147, .65); outline-offset: 2px; }
    .upgrade-icon { display: block; margin-bottom: 7px; font-size: 26px; }
    .upgrade-name { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 1000; }
    .upgrade-desc { display: block; color: #c7dfe8; font-size: 12px; line-height: 1.35; }
    .upgrade-level { display: block; margin-top: 9px; color: #ffe49a; font-size: 10px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
    .score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0; }
    .score-box { padding: 12px; border-radius: 14px; background: rgba(213, 239, 248, .1); }
    .score-box small { display: block; color: #aecbd8; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
    .score-box b { display: block; margin-top: 3px; font-size: 25px; }
    @media (hover: hover) and (pointer: fine) { .touch-controls { display: none; } }
    @media (max-width: 560px) { .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); right: max(62px, calc(env(safe-area-inset-right) + 52px)); } .message { top: max(124px, calc(env(safe-area-inset-top) + 120px)); } .upgrade-grid { grid-template-columns: 1fr; } .overlay { align-items: start; } }
    @media (max-height: 520px) and (orientation: landscape) {
      .hud { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; top: max(6px, env(safe-area-inset-top)); }
      .hud-card { padding: 5px 7px; }
      .hud-label { font-size: 8px; }
      .hud-value { font-size: 14px; }
      .meter { margin-top: 3px; }
      .message { top: max(50px, calc(env(safe-area-inset-top) + 47px)); }
      .touch-controls { bottom: max(7px, env(safe-area-inset-bottom)); }
      .joystick, .action { width: 66px; height: 66px; min-width: 58px; min-height: 58px; }
      .overlay { padding-top: max(56px, calc(env(safe-area-inset-top) + 52px)); align-items: start; }
      .panel { padding: 16px 22px; }
      .panel h1 { font-size: 38px; }
      .panel h2 { margin: 3px 0 7px; font-size: 25px; }
      .panel p { margin-bottom: 11px; font-size: 13px; }
      .upgrade-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
      .upgrade-card { padding: 9px; min-height: 80px; }
      .upgrade-icon { display: none; }
      .warning { bottom: max(82px, calc(env(safe-area-inset-bottom) + 76px)); }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } }