:root {
      color-scheme: dark;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --safe-top: max(12px, env(safe-area-inset-top));
      --safe-right: max(16px, env(safe-area-inset-right));
      --safe-bottom: max(12px, env(safe-area-inset-bottom));
      --safe-left: max(16px, env(safe-area-inset-left));
      --accent: #78e7ff;
      --panel: rgba(4, 16, 34, .72);
      --app-width: 100vw;
      --app-height: 100dvh;
      --hud-reserved: 58px;
      --canvas-ratio: 2.1641;
    }

    * { box-sizing: border-box; }
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      overscroll-behavior: none;
      background: #020712;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    [hidden] { display: none !important; }

    .stage {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      width: var(--app-width, 100vw);
      height: 100vh;
      height: 100svh;
      height: var(--app-height, 100dvh);
      overflow: hidden;
      isolation: isolate;
      background: radial-gradient(circle at 50% 50%, #0b3459 0, #04162d 42%, #020712 100%);
    }

    .background-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #020712;
      z-index: -3;
    }

    .fallback-bg {
      position: absolute;
      inset: 0;
      z-index: -2;
      display: grid;
      place-items: end center;
      padding-bottom: calc(var(--safe-bottom) + 44px);
      background:
        linear-gradient(115deg, transparent 20%, rgba(120, 231, 255, .10) 50%, transparent 80%),
        radial-gradient(circle at 50% 50%, #164b72, #061a34 52%, #020712);
      color: rgba(255,255,255,.55);
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .fallback-bg::before {
      content: "";
    }

    .hud {
      position: absolute;
      top: var(--safe-top);
      left: var(--safe-left);
      right: var(--safe-right);
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      pointer-events: none;
    }

    .hud__group { display: flex; align-items: center; gap: 8px; pointer-events: auto; }
    .hud button {
      min-width: 68px;
      min-height: 38px;
      padding: 8px 14px;
      border: 1px solid rgba(255,255,255,.32);
      border-radius: 999px;
      background: rgba(3, 12, 27, .68);
      backdrop-filter: blur(10px);
      cursor: pointer;
    }
    .hud button:disabled { opacity: .35; cursor: default; }

    .progress {
      /* Progress remains functional for a possible future re-enable. */
      display: none;
      width: min(32vw, 280px);
      height: 7px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.36);
      border-radius: 999px;
      background: rgba(0,0,0,.34);
      box-shadow: 0 0 0 1px rgba(0,0,0,.2);
    }
    .progress__bar {
      display: block;
      width: 0;
      height: 100%;
      background: linear-gradient(90deg, #3ec9ff, #b5f7ff);
      box-shadow: 0 0 14px rgba(120,231,255,.85);
      transition: width .35s ease;
    }

    .screen {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 4;
      padding: calc(var(--safe-top) + var(--hud-reserved)) var(--safe-right) var(--safe-bottom) var(--safe-left);
    }
    :fullscreen .screen,
    :-webkit-full-screen .screen {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    #startScreen {
      overflow: hidden;
      padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    }

    .opening-panel {
      position: relative;
      width: min(
        calc(var(--app-width, 100vw) - var(--safe-left) - var(--safe-right)),
        calc((var(--app-height, 100dvh) - var(--safe-top) - var(--safe-bottom)) * var(--canvas-ratio))
      );
      aspect-ratio: 2532 / 1170;
      max-width: 100%;
      max-height: 100%;
    }
    .opening-panel__image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }
    .opening-start {
      position: absolute;
      left: 43.5%;
      top: 72.8%;
      width: 13%;
      height: 10%;
      padding: 0;
      border: 0;
      background: transparent;
      color: transparent;
      cursor: pointer;
    }
    .opening-start:focus-visible,
    .opening-start:hover {
      outline: 3px solid rgba(181, 17, 99, .75);
      background: rgba(255,255,255,.12);
    }

    .start-card, .end-card, .resume-card {
      position: relative;
      z-index: 1;
      width: min(560px, 78vw);
      padding: clamp(22px, 4vw, 42px);
      text-align: center;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: 26px;
      background: var(--panel);
      backdrop-filter: blur(18px);
      box-shadow: 0 24px 70px rgba(0,0,0,.38);
    }

    #endScreen {
      padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
      background: transparent;
    }
    #endScreen .end-card {
      border: 0;
      background: transparent;
      backdrop-filter: none;
      box-shadow: none;
    }

    h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 62px); letter-spacing: .04em; }
    p { margin: 8px 0 18px; color: rgba(255,255,255,.76); }
    .total-score {
      margin: 0;
      color: #fff;
      font-size: clamp(34px, 7vw, 78px);
      font-weight: 800;
      letter-spacing: .04em;
    }
    .back-to-title {
      display: block;
      margin: clamp(16px, 3vh, 28px) auto 0;
    }
    .primary {
      min-width: 180px;
      min-height: 52px;
      padding: 12px 28px;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, #baf8ff, #46cfee);
      color: #031426;
      font-weight: 800;
      letter-spacing: .08em;
      cursor: pointer;
      box-shadow: 0 10px 36px rgba(70,207,238,.32);
    }

    .art-panel {
      position: relative;
      width: min(92vw, calc(82vh * 2.1641));
      width: min(
        calc(var(--app-width, 100vw) - var(--safe-left) - var(--safe-right)),
        calc((var(--app-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - var(--hud-reserved)) * var(--canvas-ratio))
      );
      aspect-ratio: 844 / 390;
      max-width: 100%;
      max-height: 100%;
      opacity: 0;
      transform: scale(.97);
      transition: opacity .7s ease, transform .7s ease;
    }
    .art-panel.is-visible { opacity: 1; transform: scale(1); }
    .art-panel__image { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

    .form-overlay {
      position: absolute;
      inset: 0;
    }

    .form-overlay input {
      position: absolute;
      left: 45.7%;
      width: 18.8%;
      height: 7.8%;
      min-height: 0;
      padding: 0 .8%;
      border: 0;
      border-radius: 0;
      outline: none;
      background: transparent;
      color: #15223a;
      /* 16px minimum prevents iOS Safari from auto-zooming focused inputs. */
      font-size: clamp(16px, 1.8vw, 17px);
    }
    .form-overlay input:nth-of-type(1) { top: 15%; }
    .form-overlay input:nth-of-type(2) { top: 31.9%; }
    .form-overlay input:nth-of-type(3) { top: 48.8%; }
    .form-overlay input:nth-of-type(4) { top: 67.7%; }
    .form-overlay input:focus { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255,255,255,.25); }
    .form-overlay input::placeholder { color: transparent; }
    .form-overlay .primary {
      position: absolute;
      left: 44.1%;
      top: 83.6%;
      width: 11.8%;
      height: 7.2%;
      min-width: 0;
      min-height: 0;
      padding: 0;
      border-radius: 0;
      opacity: 0;
    }
    .form-overlay .primary:focus-visible { opacity: .28; outline: 3px solid var(--accent); }
    .form-overlay .otp-get {
      position: absolute;
      left: 68.7%;
      top: 68.7%;
      width: 7.8%;
      height: 7.2%;
      padding: 0;
      border: 0;
      background: transparent;
      color: transparent;
      cursor: pointer;
    }
    .form-overlay .otp-get:focus-visible,
    .form-overlay .otp-get:hover {
      outline: 3px solid var(--accent);
      background: rgba(255,255,255,.16);
    }

    .answers {
      position: absolute;
      inset: 0;
    }

    .answer {
      position: absolute;
      left: 10.8%;
      width: 78.7%;
      height: 9%;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: transparent;
      cursor: pointer;
    }
    .answer:nth-child(1) { top: 26.3%; }
    .answer:nth-child(2) { top: 39.8%; }
    .answer:nth-child(3) { top: 53.2%; }
    .answer:nth-child(4) { top: 65.8%; }
    .answer:nth-child(5) { top: 79.1%; }
    .answer:hover, .answer:focus-visible {
      background: rgba(120,231,255,.16);
      box-shadow: inset 0 0 0 3px rgba(120,231,255,.92);
    }
    .answer.is-selected {
      background: rgba(120,231,255,.24);
      box-shadow: inset 0 0 0 4px #78e7ff;
    }
    .answer.is-correct { box-shadow: inset 0 0 0 4px #66f0a8; }
    .answer.is-wrong { box-shadow: inset 0 0 0 4px #ff7292; }
    .answer:disabled { cursor: default; }

    .answer-feedback {
      position: absolute;
      inset: 0;
      z-index: 8;
      background: rgba(1, 8, 22, .24);
    }
    .answer-feedback__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: .88;
      pointer-events: none;
    }
    .mission-action {
      position: absolute;
      right: 4%;
      bottom: 5%;
      width: clamp(112px, 18%, 160px);
      min-width: 0;
      min-height: 36px;
      padding: 8px 14px;
      font-size: clamp(10px, 1.4vw, 15px);
      box-shadow: 0 8px 24px rgba(0,0,0,.38);
    }
    .question-confirm { z-index: 7; }
    .answer-feedback__continue { z-index: 2; }

    .flash {
      position: absolute;
      inset: -15%;
      z-index: 50;
      opacity: 0;
      pointer-events: none;
      background: radial-gradient(circle, #fff 0, #e9fbff 24%, rgba(105,220,255,.82) 48%, transparent 72%);
      mix-blend-mode: screen;
    }
    .flash.is-active { animation: flash .72s ease-out both; }
    @keyframes flash {
      0% { opacity: 0; transform: scale(.6); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: scale(1.28); }
    }

    .status {
      /* Keep runtime status updates for diagnostics without showing bottom captions. */
      display: none;
      position: absolute;
      left: 50%;
      bottom: var(--safe-bottom);
      z-index: 30;
      transform: translateX(-50%);
      margin: 0;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.58);
      color: rgba(255,255,255,.74);
      font-size: 12px;
      pointer-events: none;
    }
    .status:empty { display: none; }

    .request-notice {
      position: absolute; z-index: 80; bottom: max(44px, env(safe-area-inset-bottom));
      left: 50%; transform: translateX(-50%); width: min(90vw, 520px);
      padding: 12px 18px; border-radius: 12px; text-align: center;
      background: #092336; box-shadow: 0 6px 30px #0008;
    }
    .request-notice p { margin: 0 0 8px; color: #fff; }
    .request-pending { position: absolute; z-index: 80; top: var(--safe-top); left: 50%;
      transform: translateX(-50%); padding: 6px 14px; border-radius: 12px; background: #092336; color: #fff; }
    .request-notice button { cursor: pointer; padding: 6px 12px; border-radius: 8px; }
    .form-message { position: absolute; left: 8%; bottom: 0; width: 84%; margin: 0;
      padding: 4px; background: #092336e6; text-align: center; font-size: 12px; color: #fff; }
    .form-message:empty { display: none; }
    .security-check { position: absolute; right: 1%; top: 4%; z-index: 3; }
    .form-overlay .otp-get.is-waiting { color: #15223a; background: #baf8ff; font-size: clamp(10px, 1.5vw, 16px); }
    button:disabled { cursor: wait; }

    .rotate-gate {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      place-items: center;
      padding: 28px;
      text-align: center;
      background: #031020;
    }
    .rotate-gate__icon { display: block; font-size: 58px; animation: rotateHint 1.8s ease-in-out infinite; }
    @keyframes rotateHint { 0%,100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

    @media (orientation: portrait) and (max-width: 900px) {
      .rotate-gate { display: grid; }
    }
    @media (max-height: 520px) {
      :root {
        --safe-top: max(5px, env(safe-area-inset-top));
        --safe-right: max(8px, env(safe-area-inset-right));
        --safe-bottom: max(5px, env(safe-area-inset-bottom));
        --safe-left: max(8px, env(safe-area-inset-left));
        --hud-reserved: 40px;
      }
      .hud { gap: 6px; }
      .hud__group { gap: 4px; }
      .hud button {
        min-width: 50px;
        min-height: 30px;
        padding: 4px 8px;
        font-size: 11px;
      }
      .progress { width: min(25vw, 170px); height: 5px; }
      .start-card, .end-card, .resume-card {
        width: min(520px, 86vw);
        padding: 14px 22px;
        border-radius: 18px;
      }
      h1 { margin-bottom: 4px; font-size: clamp(24px, 7vh, 38px); }
      p { margin: 4px 0 10px; font-size: 13px; }
      .primary { min-height: 38px; padding: 8px 22px; }
      .status { padding: 4px 9px; font-size: 10px; }
    }
    @media (max-height: 360px) {
      :root { --hud-reserved: 36px; }
      .hud button { min-width: 44px; min-height: 28px; padding: 3px 6px; font-size: 10px; }
      .progress { width: min(20vw, 120px); }
      .status { display: none; }
    }
    .stage.is-keyboard-open {
      --hud-reserved: 4px;
    }
    .stage.is-keyboard-open .hud,
    .stage.is-keyboard-open .status {
      opacity: 0;
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }