/*
  Phase 8.6 mobile cascade boundary.

  This file intentionally inlines the verified legacy mobile hotfix layers in
  their original order so index.html loads one mobile override stylesheet and
  no longer pulls root-level hotfix CSS through @import. The original root
  files remain in the repository as legacy reference sources until a later
  cleanup proves they can be deleted safely.
*/

/* ---- Legacy source: mobile-enhancements.css ---- */
/* Mobile and tablet experience layer for Math Maze */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --visual-viewport-height: 100dvh;
}

html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  overscroll-behavior: none;
  -webkit-touch-callout: none;
}

button,
input,
label {
  -webkit-tap-highlight-color: transparent;
}

button {
  touch-action: manipulation;
}

.mobile-only,
.mobile-number-pad,
.control-field,
.fullscreen-button {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  body {
    user-select: none;
  }

  input {
    user-select: text;
  }

  .game-shell {
    min-height: var(--visual-viewport-height);
    height: var(--visual-viewport-height);
  }

  .stage {
    border-radius: 16px;
    contain: layout paint;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.44),
      0 0 0 1px rgba(104, 231, 255, 0.12),
      inset 0 0 34px rgba(10, 55, 96, 0.24);
  }

  .icon-button {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 14px;
    touch-action: manipulation;
  }

  .primary-button,
  #submit-answer,
  .difficulty-options span {
    min-height: 48px;
  }

  .mobile-icon-button {
    color: transparent;
    font-size: 0;
    overflow: hidden;
  }

  /* Phase 8.6: pause, sound, and fullscreen icons now render through ui/icons.svg. */

  .control-field {
    display: grid;
    gap: 7px;
    margin: 2px 0 4px;
    padding: 0;
    border: 0;
  }

  .control-field legend {
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }

  .control-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .control-options button {
    min-height: 46px;
    border: 1px solid rgba(104, 231, 255, 0.26);
    border-radius: 13px;
    background: rgba(104, 231, 255, 0.055);
    color: var(--muted);
    font-weight: 800;
  }

  .control-options button[aria-pressed="true"] {
    border-color: rgba(255, 216, 74, 0.78);
    background: linear-gradient(180deg, rgba(255, 216, 74, 0.2), rgba(255, 216, 74, 0.07));
    color: var(--gold);
    box-shadow: inset 0 0 18px rgba(255, 216, 74, 0.1);
  }

  .mobile-number-pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
    direction: ltr;
  }

  .mobile-number-pad button {
    min-height: 52px;
    border: 1px solid rgba(104, 231, 255, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 32, 58, 0.96), rgba(5, 10, 23, 0.98));
    color: var(--ink);
    font-family: var(--display-font);
    font-size: 22px;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .mobile-number-pad button:active {
    transform: scale(0.96);
    border-color: var(--gold);
    background: rgba(255, 216, 74, 0.16);
  }

  .mobile-number-pad .key-delete {
    color: #ff9aa7;
  }

  .mobile-number-pad .key-submit {
    background: linear-gradient(135deg, #13c985, #86f76f);
    color: #031009;
  }

  #answer-input[readonly] {
    caret-color: transparent;
  }

  #question-dialog:not([hidden]) ~ * {
    pointer-events: none;
  }

  html.control-swipe .mobile-joystick {
    display: none !important;
  }

  html.control-swipe .stage {
    touch-action: none;
  }

  html.mobile-low-effects .stage,
  html.mobile-low-effects .metric,
  html.mobile-low-effects .dialog-inner,
  html.mobile-low-effects .screen-panel {
    backdrop-filter: none;
  }
}

/* Phone portrait */
@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  .game-shell {
    --joystick-size: clamp(94px, 27vw, 112px);
    --stage-width: calc(100vw - max(16px, var(--safe-left) + var(--safe-right)));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    padding:
      max(7px, var(--safe-top))
      max(8px, var(--safe-right))
      max(8px, var(--safe-bottom))
      max(8px, var(--safe-left));
  }

  .hud {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 5px;
    align-items: center;
    gap: 5px 7px;
    padding: 0 1px;
  }

  .hud-group-main {
    display: grid;
    grid-template-columns: minmax(88px, 1.18fr) minmax(72px, 1fr) minmax(72px, 1fr);
    gap: 5px;
    flex-wrap: nowrap;
  }

  .metric {
    min-width: 0;
    padding: 6px 7px;
    border-radius: 12px;
  }

  .metric-label {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .metric strong {
    font-size: clamp(15px, 4.2vw, 18px);
  }

  .metric-lives strong {
    font-size: 15px;
    letter-spacing: -1px;
  }

  .progress-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 5px;
    margin: 0;
    border-radius: 999px;
  }

  .hud-actions {
    gap: 6px;
    align-self: stretch;
  }

  .stage {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    border-radius: 16px;
  }

  .mobile-joystick {
    width: 100%;
    min-height: calc(var(--joystick-size) + 4px);
    margin-top: auto;
    padding-top: 2px;
  }

  .joystick-base {
    box-shadow:
      inset 0 0 24px rgba(104, 231, 255, 0.12),
      0 10px 24px rgba(0, 0, 0, 0.38);
  }

  .screen {
    padding:
      max(8px, var(--safe-top))
      max(8px, var(--safe-right))
      max(8px, var(--safe-bottom))
      max(8px, var(--safe-left));
  }

  #start-screen {
    place-items: start center;
  }

  .start-layout {
    width: min(100%, 460px);
    border-radius: 20px;
  }

  .start-poster-frame {
    height: clamp(118px, 18dvh, 162px);
    border-radius: 19px 19px 0 0;
  }

  .start-poster {
    object-position: center 54%;
    filter: saturate(1.04) contrast(1.03);
  }

  .start-layout .screen-panel {
    padding: 10px 13px 14px;
  }

  .start-graphic {
    display: none;
  }

  .eyebrow {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }

  .screen h1 {
    margin: 8px 0 9px;
    font-size: clamp(25px, 7.8vw, 34px);
  }

  .screen-stats {
    margin: 7px 0 9px;
  }

  .screen-stats span {
    min-width: 86px;
    padding: 6px 8px;
    border-radius: 11px;
    font-size: 13px;
  }

  .name-form {
    gap: 7px;
  }

  #player-name-input {
    height: 48px;
    border-radius: 13px;
    font-size: 20px;
  }

  .difficulty-options span {
    border-radius: 12px;
    font-size: 14px;
  }

  .time-limit-toggle {
    width: 50px;
    height: 50px;
  }

  .primary-button {
    border-radius: 14px;
  }

  .dialog {
    position: fixed;
    left: 50%;
    top: auto;
    bottom: max(8px, var(--safe-bottom));
    width: min(430px, calc(100vw - var(--safe-left) - var(--safe-right) - 16px));
    transform: translateX(-50%);
  }

  .dialog-inner {
    max-height: calc(var(--visual-viewport-height) - var(--safe-top) - var(--safe-bottom) - 16px);
    overflow-y: auto;
    padding: 14px;
    border-radius: 22px;
  }

  .dialog h1 {
    margin: 8px 0 10px;
    font-size: clamp(31px, 10vw, 42px);
  }

  #answer-form {
    grid-template-columns: 1fr;
  }

  #answer-input {
    height: 54px;
    border-radius: 14px;
    font-size: 29px;
  }

  #submit-answer {
    display: none;
  }

  #question-feedback {
    min-height: 20px;
    margin-top: 8px;
  }

  html.control-swipe .game-shell {
    justify-content: flex-start;
  }

  html.control-swipe .stage {
    margin-top: clamp(6px, 2vh, 18px);
  }
}

/* Touch landscape: controls beside the playfield */
@media (hover: none) and (orientation: landscape) and (max-height: 700px),
       (pointer: coarse) and (orientation: landscape) and (max-height: 700px) {
  .game-shell {
    --joystick-size: clamp(86px, 18dvh, 116px);
    --stage-width: min(
      calc((100dvh - var(--safe-top) - var(--safe-bottom) - 62px) * 1.3333),
      calc(100vw - var(--safe-left) - var(--safe-right) - 164px)
    );
    display: grid;
    grid-template-columns: minmax(104px, 132px) var(--stage-width) minmax(52px, 64px);
    grid-template-rows: 54px minmax(0, 1fr);
    grid-template-areas:
      "hud hud hud"
      "joystick stage rail";
    align-content: center;
    justify-content: center;
    gap: 6px 8px;
    padding:
      max(4px, var(--safe-top))
      max(8px, var(--safe-right))
      max(4px, var(--safe-bottom))
      max(8px, var(--safe-left));
  }

  .hud {
    grid-area: hud;
    width: 100%;
    height: 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr 4px;
    gap: 4px 8px;
  }

  .hud-group-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(64px, 1fr));
    gap: 5px;
  }

  .metric {
    min-width: 0;
    padding: 4px 7px;
    border-radius: 10px;
  }

  .metric-label {
    margin-bottom: 1px;
    font-size: 9px;
  }

  .metric strong {
    font-size: 14px;
  }

  .progress-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 4px;
    margin: 0;
    border-radius: 999px;
  }

  .hud-actions {
    position: fixed;
    right: max(8px, var(--safe-right));
    top: 50%;
    z-index: 20;
    display: grid;
    gap: 8px;
    transform: translateY(-30%);
  }

  .stage {
    grid-area: stage;
    width: var(--stage-width);
    align-self: center;
  }

  .mobile-joystick {
    grid-area: joystick;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    align-self: center;
  }

  .screen {
    padding:
      max(6px, var(--safe-top))
      max(8px, var(--safe-right))
      max(6px, var(--safe-bottom))
      max(8px, var(--safe-left));
  }

  .start-layout {
    width: min(900px, calc(100vw - var(--safe-left) - var(--safe-right) - 20px));
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
    grid-template-columns: minmax(230px, 38%) minmax(390px, 62%);
    border-radius: 18px;
  }

  .start-poster-frame,
  .start-layout .screen-panel {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
  }

  .start-layout .screen-panel {
    padding: 12px 18px;
  }

  .start-graphic {
    display: none;
  }

  .screen h1 {
    margin: 6px 0 8px;
    font-size: clamp(27px, 5vw, 38px);
  }

  .screen-stats {
    margin: 6px 0 8px;
  }

  .name-form,
  .difficulty-field {
    gap: 6px;
  }

  #player-name-input {
    height: 44px;
    font-size: 19px;
  }

  .difficulty-options span,
  .control-options button {
    min-height: 40px;
  }

  .time-limit-setting {
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .time-limit-toggle {
    width: 42px;
    height: 42px;
  }

  .dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(680px, calc(100vw - var(--safe-left) - var(--safe-right) - 32px));
    transform: translate(-50%, -50%);
  }

  .dialog-inner {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(280px, 1.2fr);
    grid-template-areas:
      "status keypad"
      "question keypad"
      "answer keypad"
      "feedback keypad";
    align-items: center;
    gap: 5px 16px;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    padding: 12px 16px;
    border-radius: 20px;
  }

  .dialog-kicker { grid-area: status; justify-self: center; }
  .dialog h1 { grid-area: question; margin: 4px 0; font-size: clamp(30px, 7vh, 44px); }
  #answer-form { grid-area: answer; grid-template-columns: 1fr; }
  #question-feedback { grid-area: feedback; margin: 3px 0 0; }
  .mobile-number-pad { grid-area: keypad; margin: 0; }
  .mobile-number-pad button { min-height: clamp(38px, 8.5vh, 52px); }
  #submit-answer { display: none; }
}

/* Touch tablets */
@media (pointer: coarse) and (min-width: 601px) and (orientation: portrait) {
  .game-shell {
    --joystick-size: clamp(104px, 16vw, 128px);
    --stage-width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 28px), 900px);
    justify-content: flex-start;
    padding:
      max(12px, var(--safe-top))
      max(14px, var(--safe-right))
      max(12px, var(--safe-bottom))
      max(14px, var(--safe-left));
  }

  .hud {
    width: var(--stage-width);
  }

  .metric {
    border-radius: 12px;
  }

  .stage {
    border-radius: 20px;
  }

  .mobile-joystick {
    margin-top: auto;
  }

  .dialog {
    position: fixed;
    width: min(520px, calc(100vw - 40px));
  }

  .dialog-inner {
    border-radius: 24px;
  }

  #submit-answer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-number-pad button:active {
    transform: none;
  }
}

/* ---- Legacy source: mobile-phone-refinement.css ---- */
/* Phone portrait refinement: one-line HUD, larger playfield, higher joystick */

@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  .game-shell {
    --joystick-size: clamp(122px, 35vw, 142px);
    width: 100vw;
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding:
      max(4px, var(--safe-top))
      max(2px, var(--safe-right))
      max(4px, var(--safe-bottom))
      max(2px, var(--safe-left));
    overflow: hidden;
  }

  .hud {
    position: relative;
    width: 100%;
    height: 43px;
    min-height: 43px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 40px 3px;
    align-items: center;
    gap: 0 4px;
    padding: 0;
  }

  .hud-group-main {
    min-width: 0;
    height: 40px;
    display: grid;
    grid-template-columns: minmax(72px, 1.05fr) minmax(68px, 1fr) minmax(68px, 0.9fr);
    align-items: stretch;
    gap: 4px;
  }

  .metric {
    min-width: 0;
    min-height: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 6px;
    border-radius: 9px;
    background: rgba(2, 6, 14, 0.82);
    box-shadow: inset 0 0 12px rgba(104, 231, 255, 0.055);
  }

  .metric-label {
    display: none !important;
  }

  .metric strong {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 0;
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1;
  }

  .metric-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 7px;
  }

  .metric-icon .ui-icon {
    width: 1em;
    height: 1em;
  }

  .metric-lives strong {
    color: var(--red);
    font-size: clamp(14px, 3.8vw, 17px);
    letter-spacing: -1.5px;
  }

  .hud-actions {
    height: 40px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 40px;
    gap: 4px;
    align-items: center;
  }

  .hud-actions .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
  }

  /* Phase 8.6: mobile HUD icon sizing now follows the shared SVG icon rules. */


  .progress-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 3px;
    margin: 0;
    border-radius: 999px;
  }

  .stage {
    width: 100%;
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 11px;
    border-width: 1px;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(104, 231, 255, 0.1),
      inset 0 0 22px rgba(10, 55, 96, 0.2);
  }

  .mobile-joystick {
    width: 100%;
    min-height: var(--joystick-size);
    height: var(--joystick-size);
    margin: clamp(10px, 2.2dvh, 18px) 0 0;
    padding: 0;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }

  .joystick-base {
    width: var(--joystick-size);
    height: var(--joystick-size);
    border-width: 2px;
    box-shadow:
      inset 0 0 28px rgba(104, 231, 255, 0.15),
      0 10px 28px rgba(0, 0, 0, 0.42),
      0 0 22px rgba(104, 231, 255, 0.08);
  }

  .joystick-knob {
    width: 48%;
    height: 48%;
  }

  html.control-swipe .stage {
    margin-top: 0;
  }

  html.control-swipe .mobile-joystick {
    display: none !important;
  }
}

/* Extra tightening for short phones */
@media (hover: none) and (max-width: 600px) and (orientation: portrait) and (max-height: 720px),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  .game-shell {
    --joystick-size: clamp(112px, 32vw, 128px);
    gap: 3px;
  }

  .hud,
  .hud-group-main,
  .hud-actions {
    height: 38px;
    min-height: 38px;
  }

  .hud {
    grid-template-rows: 36px 2px;
  }

  .metric,
  .hud-actions .icon-button {
    height: 36px;
    min-height: 36px;
  }

  .hud-actions {
    grid-auto-columns: 36px;
  }

  .mobile-joystick {
    margin-top: 8px;
  }
}

/* ---- Legacy source: mobile-start-hotfix.css ---- */
/* Mobile start-screen hotfix: keep the entire entry form usable and visible. */

@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  html.start-screen-open,
  html.start-screen-open body {
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    overflow: hidden;
  }

  html.start-screen-open .game-shell {
    width: 100vw;
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    padding: 0;
    gap: 0;
    overflow: hidden;
  }

  html.start-screen-open .hud,
  html.start-screen-open .mobile-joystick {
    display: none !important;
  }

  html.start-screen-open .stage {
    width: 100vw;
    max-width: none;
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
  }

  html.start-screen-open #start-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding:
      max(6px, var(--safe-top))
      max(7px, var(--safe-right))
      max(8px, var(--safe-bottom))
      max(7px, var(--safe-left));
    background:
      radial-gradient(circle at 50% 12%, rgba(35, 75, 118, 0.24), transparent 36%),
      #02050c;
    backdrop-filter: none;
  }

  html.start-screen-open #start-screen .start-layout {
    width: min(100%, 440px);
    min-height: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 18px;
  }

  html.start-screen-open #start-screen .start-poster-frame {
    width: 100%;
    height: clamp(88px, 14dvh, 122px);
    min-height: 88px;
    max-height: 122px;
    flex: 0 0 auto;
    border-radius: 17px 17px 0 0;
  }

  html.start-screen-open #start-screen .start-poster {
    object-position: center 47%;
  }

  html.start-screen-open #start-screen .screen-panel {
    width: 100%;
    max-height: none;
    overflow: visible;
    flex: 0 0 auto;
    padding: 8px 11px 12px;
    scrollbar-gutter: auto;
  }

  html.start-screen-open #start-screen .eyebrow {
    min-height: 20px;
    margin: 0;
    padding: 2px 7px;
    font-size: 10px;
  }

  html.start-screen-open #start-screen h1 {
    margin: 5px 0 6px;
    font-size: clamp(24px, 7vw, 31px);
    line-height: 1;
  }

  html.start-screen-open #start-screen .screen-stats {
    gap: 6px;
    margin: 5px 0 7px;
  }

  html.start-screen-open #start-screen .screen-stats span {
    min-width: 0;
    padding: 5px 8px;
    font-size: 12px;
  }

  html.start-screen-open #start-screen .name-form {
    gap: 5px;
  }

  html.start-screen-open #start-screen .name-form > label,
  html.start-screen-open #start-screen .difficulty-field legend,
  html.start-screen-open #start-screen .control-field legend {
    font-size: 12px;
    line-height: 1.15;
  }

  html.start-screen-open #player-name-input {
    height: 43px;
    min-height: 43px;
    font-size: 18px;
  }

  html.start-screen-open #name-error {
    min-height: 0;
    margin: 0;
    font-size: 11px;
  }

  html.start-screen-open .difficulty-field,
  html.start-screen-open .control-field {
    gap: 4px;
    margin: 0;
  }

  html.start-screen-open .difficulty-options,
  html.start-screen-open .control-options {
    gap: 5px;
  }

  html.start-screen-open .difficulty-options span,
  html.start-screen-open .control-options button {
    min-height: 36px;
    height: 36px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 12px;
  }

  html.start-screen-open .time-limit-setting {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 1fr 38px auto;
    align-items: center;
    justify-items: stretch;
    gap: 7px;
    margin: 0;
  }

  html.start-screen-open .time-limit-title,
  html.start-screen-open .time-limit-state {
    font-size: 12px;
  }

  html.start-screen-open .time-limit-title {
    text-align: start;
  }

  html.start-screen-open .time-limit-state {
    min-height: 0;
    text-align: end;
  }

  html.start-screen-open .time-limit-toggle {
    width: 38px;
    height: 38px;
  }

  html.start-screen-open .clock-icon {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }

  html.start-screen-open #start-button {
    position: sticky;
    bottom: max(0px, var(--safe-bottom));
    z-index: 4;
    width: 100%;
    min-height: 48px;
    margin-top: 2px;
    border-radius: 13px;
    font-size: 17px;
    box-shadow:
      0 -10px 18px rgba(5, 8, 20, 0.82),
      0 10px 24px rgba(0, 0, 0, 0.38);
  }
}

@media (hover: none) and (max-width: 600px) and (orientation: portrait) and (max-height: 740px),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) and (max-height: 740px) {
  html.start-screen-open #start-screen .start-poster-frame {
    height: 76px;
    min-height: 76px;
  }

  html.start-screen-open #start-screen .screen-stats {
    display: none;
  }

  html.start-screen-open #start-screen h1 {
    font-size: 23px;
  }

  html.start-screen-open .difficulty-options span,
  html.start-screen-open .control-options button {
    min-height: 33px;
    height: 33px;
  }
}

/* ---- Legacy source: mobile-resolution-hotfix.css ---- */
/* Balanced phone resolution: moderate camera scale, compact keypad and joystick. */

@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  .game-shell {
    --joystick-size: clamp(100px, 29vw, 116px);
  }

  .stage {
    contain: none;
    border-radius: 12px;
  }

  #game-canvas {
    border-radius: inherit;
  }

  .mobile-joystick {
    min-height: var(--joystick-size);
    height: var(--joystick-size);
    margin-top: 8px;
  }

  .joystick-base {
    width: var(--joystick-size);
    height: var(--joystick-size);
  }

  .joystick-knob {
    width: 44%;
    height: 44%;
  }

  html.question-open .stage {
    overflow: visible;
    contain: none;
  }

  html.question-open .mobile-joystick {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  html.question-open .hud {
    opacity: 0.82;
  }

  .dialog {
    position: fixed;
    left: 50%;
    top: calc(max(5px, var(--safe-top)) + 48px);
    bottom: auto;
    z-index: 220;
    width: min(338px, calc(100vw - var(--safe-left) - var(--safe-right) - 18px));
    max-height: calc(var(--visual-viewport-height) - var(--safe-top) - var(--safe-bottom) - 58px);
    transform: translateX(-50%);
  }

  .dialog-inner {
    max-height: none;
    overflow: visible;
    padding: 9px;
    border-radius: 17px;
  }

  .dialog-kicker {
    min-height: 20px;
    padding: 2px 7px;
    font-size: 10px;
  }

  .question-timer {
    min-height: 22px;
    font-size: 11px;
  }

  .dialog h1 {
    margin: 3px 0 5px;
    font-size: clamp(25px, 7.2vw, 31px);
    line-height: 1;
  }

  #answer-form {
    display: block;
  }

  #answer-input {
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 23px;
  }

  .mobile-number-pad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
  }

  .mobile-number-pad button {
    min-height: 39px;
    height: 39px;
    padding: 0 5px;
    border-radius: 10px;
    font-size: 18px;
  }

  .mobile-number-pad .key-submit {
    font-family: var(--body-font);
    font-size: 16px;
  }

  #question-feedback {
    min-height: 16px;
    margin: 4px 0 0;
    font-size: 12px;
  }
}

@media (hover: none) and (max-width: 380px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 380px) and (orientation: portrait) {
  .dialog {
    width: calc(100vw - var(--safe-left) - var(--safe-right) - 14px);
  }

  .mobile-number-pad button {
    min-height: 37px;
    height: 37px;
  }
}

/* ---- Legacy source: mobile-native-answer.css ---- */
/* Native mobile answer input: compact question card inside the game. */

@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  .mobile-number-pad {
    display: none !important;
  }

  html.question-open .stage {
    overflow: hidden;
    contain: layout paint;
  }

  html.question-open .mobile-joystick {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    z-index: 40;
    width: min(282px, calc(100% - 28px));
    max-height: none;
    transform: translate(-50%, -50%);
  }

  .dialog-inner {
    max-height: none;
    overflow: visible;
    padding: 12px;
    border-radius: 17px;
    box-shadow:
      0 18px 45px rgba(0, 0, 0, 0.64),
      0 0 0 3px rgba(104, 231, 255, 0.04),
      inset 0 0 26px rgba(104, 231, 255, 0.07);
  }

  .dialog-kicker {
    min-height: 21px;
    padding: 2px 8px;
    font-size: 10px;
  }

  .question-timer {
    min-height: 20px;
    font-size: 11px;
  }

  .dialog h1 {
    margin: 6px 0 10px;
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1;
  }

  #answer-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 8px;
    align-items: center;
  }

  #answer-input {
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 5px 10px;
    border-radius: 11px;
    font-size: 25px;
    text-align: center;
  }

  #submit-answer {
    display: block !important;
    width: 72px;
    min-width: 72px;
    height: 46px;
    min-height: 46px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 15px;
  }

  #question-feedback {
    min-height: 17px;
    margin: 6px 0 0;
    font-size: 12px;
  }
}

@media (hover: none) and (max-width: 380px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 380px) and (orientation: portrait) {
  .dialog {
    width: min(268px, calc(100% - 20px));
  }

  #answer-form {
    grid-template-columns: minmax(0, 1fr) 66px;
  }

  #submit-answer {
    width: 66px;
    min-width: 66px;
  }
}

/* ---- Legacy source: mobile-final-layout.css ---- */
/* Final phone portrait layout: full-width board and joystick centered in the remaining black area. */

@media (hover: none) and (max-width: 600px) and (orientation: portrait),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) {
  html:not(.start-screen-open),
  html:not(.start-screen-open) body {
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    overflow: hidden;
  }

  html:not(.start-screen-open) .game-shell {
    width: 100vw;
    height: var(--visual-viewport-height);
    min-height: var(--visual-viewport-height);
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 43px auto minmax(0, 1fr);
    align-content: stretch;
    justify-content: stretch;
    gap: 3px;
    padding:
      max(3px, var(--safe-top))
      0
      max(3px, var(--safe-bottom));
    overflow: hidden;
  }

  html:not(.start-screen-open) .hud {
    grid-row: 1;
    width: calc(100% - 6px);
    height: 43px;
    min-height: 43px;
    margin: 0 auto;
  }

  html:not(.start-screen-open) .stage {
    grid-row: 2;
    width: 100vw !important;
    max-width: none !important;
    height: min(calc(100vw * 0.84), 46dvh) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    align-self: start;
    justify-self: stretch;
    overflow: hidden;
    contain: layout paint;
    border-left: 0;
    border-right: 0;
    border-radius: 9px;
  }

  html:not(.start-screen-open) #game-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0;
    border-radius: inherit;
    object-fit: fill;
  }

  html:not(.start-screen-open) .mobile-joystick {
    grid-row: 3;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 max(2px, var(--safe-bottom));
    display: grid !important;
    place-items: center;
    align-self: stretch;
    justify-self: stretch;
  }

  html:not(.start-screen-open) .joystick-base {
    width: clamp(112px, 31vw, 128px);
    height: clamp(112px, 31vw, 128px);
    margin: 0;
  }

  html:not(.start-screen-open) .joystick-knob {
    width: 46%;
    height: 46%;
  }

  html.control-swipe:not(.start-screen-open) .mobile-joystick {
    display: none !important;
  }

  html.question-open:not(.start-screen-open) .mobile-joystick {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (hover: none) and (max-width: 600px) and (orientation: portrait) and (max-height: 720px),
       (pointer: coarse) and (max-width: 600px) and (orientation: portrait) and (max-height: 720px) {
  html:not(.start-screen-open) .stage {
    height: min(calc(100vw * 0.82), 45dvh) !important;
  }

  html:not(.start-screen-open) .joystick-base {
    width: clamp(104px, 29vw, 118px);
    height: clamp(104px, 29vw, 118px);
  }
}