#mobileGameControls[hidden],#mobileGameControls [hidden]{display:none!important}#mobileGameControls{position:fixed;inset:0;z-index:120;pointer-events:none;touch-action:none;font-family:system-ui,sans-serif}#mobileGameControls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}#mobileGameControls .mobile-two{position:absolute;inset:auto 0 max(26px,env(safe-area-inset-bottom)) 0;display:flex;justify-content:space-between;padding:0 7vw}#mobileGameControls .mobile-two button{width:min(23vw,92px);height:min(23vw,92px);border:2px solid #fff8d9;border-radius:50%;background:#465b39dc;color:#fff;font-size:28px;box-shadow:0 4px 12px #13220c66}#mobileGameControls .mobile-stick{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:min(32vw,140px);aspect-ratio:1;border:2px solid #fff9dcaa;border-radius:50%;background:#34472b70;pointer-events:auto;touch-action:none}#mobileGameControls .mobile-stick-knob{position:absolute;left:50%;top:50%;width:40%;height:40%;transform:translate(0,0);margin:-20%;border:2px solid #fff;border-radius:50%;background:#d8e8b9dd;box-shadow:0 2px 8px #1d2a1a88;pointer-events:none}body[data-game-mode="dash"] #mobileGameControls .mobile-stick{right:auto;left:max(24px,env(safe-area-inset-left))}@media(min-width:761px) and (pointer:fine){#mobileGameControls{display:none!important}}

/* Portrait phone HUD: the shared canvas rule otherwise stretches every canvas,
   including the race minimap, to the full viewport. Keep the game canvas full
   size but give HUD canvases their own explicit mobile bounds. */
@media (max-width: 760px) and (orientation: portrait) {
  #stage { width: 100%; width: 100vw; height: 100%; height: 100dvh; overflow: hidden; }
  .hud { overflow: hidden; }

  #raceHud .brand-banner {
    top: max(7px, env(safe-area-inset-top));
    left: 50%; max-width: calc(100vw - 112px); overflow: hidden;
    padding: 6px 9px; font-size: clamp(10px, 3vw, 13px);
    letter-spacing: 0; text-overflow: ellipsis;
  }
  #raceHud .hud-quit-btn { top: max(7px, env(safe-area-inset-top)); right: 7px; padding: 5px 8px; font-size: 10px; }
  #raceHud .bgm-toggle-btn { top: 44px; right: 8px; width: 30px; height: 30px; font-size: 14px; }
  #raceHud .hud-topbar {
    top: 45px; left: 50%; max-width: calc(100vw - 72px); padding: 5px 8px;
    font-size: clamp(8px, 2.45vw, 11px); line-height: 1.35;
    white-space: normal; text-align: center;
  }
  #raceHud #raceMinimap {
    position: absolute !important; inset: max(82px, calc(env(safe-area-inset-top) + 74px)) auto auto 8px !important;
    display: block; width: clamp(104px, 27vw, 142px) !important; height: auto !important;
    aspect-ratio: 5 / 3; z-index: 2;
  }
  #raceHud .race-leaderboard {
    top: max(168px, calc(env(safe-area-inset-top) + 158px)); left: 8px;
    width: clamp(122px, 34vw, 172px); max-height: min(26vh, 190px);
    padding: 5px 6px; gap: 3px; overflow: auto; z-index: 3;
    font-size: 10px; line-height: 1.25;
  }
  #raceHud .race-leaderboard li { min-width: 0; padding: 4px 6px; gap: 4px; font-size: 10px; }
  #raceHud .race-leaderboard li .rl-status { font-size: 9px; }
  #raceHud .race-countdown-banner {
    top: max(126px, calc(env(safe-area-inset-top) + 118px)); left: 50%;
    width: max-content; max-width: calc(100vw - 24px); padding: 7px 10px;
    font-size: 12px; line-height: 1.35; white-space: normal; text-align: center;
  }
  #raceHud .race-start-countdown {
    top: 52%; left: 50%; width: calc(100vw - 24px); max-width: 420px; gap: 6px;
  }
  #raceHud .race-start-countdown .rsc-number { font-size: clamp(64px, 19vw, 104px); }
  #raceHud .race-start-countdown .rsc-hint {
    max-width: 100%; padding: 8px 10px; font-size: clamp(11px, 3.3vw, 15px);
    line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
  }
  #raceHud .bottom-hud { display: none; }
  #raceHud .race-buff-panel {
    top: auto; right: 8px; bottom: max(96px, calc(env(safe-area-inset-bottom) + 88px));
    width: min(108px, 28vw); padding: 6px; gap: 3px; border-width: 1px; border-radius: 11px;
  }
  #raceHud .race-buff-img { width: 100%; height: auto; aspect-ratio: 1; border-width: 1px; border-radius: 8px; }
  #raceHud .race-buff-level-text, #raceHud .race-buff-pct-text { max-width: 100%; font-size: 10px; white-space: normal; text-align: center; }
  #raceHud .race-buff-popup { top: 42%; max-width: calc(100vw - 28px); padding: 9px 12px; font-size: 15px; white-space: normal; }

  #mobileGameControls .mobile-two { bottom: max(18px, env(safe-area-inset-bottom)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  #mobileGameControls .mobile-two button { width: clamp(62px, 18vw, 88px); height: clamp(62px, 18vw, 88px); font-size: clamp(22px, 7vw, 30px); }
  #mobileGameControls .mobile-stick { width: clamp(92px, 27vw, 128px); right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  body[data-game-mode="dash"] #mobileGameControls .mobile-stick { left: max(18px, env(safe-area-inset-left)); }
}

/* Red Light, Green Light: compact portrait prompts and keep the play field visible. */
@media (max-width: 760px) and (orientation: portrait) {
  #redlightHud .brand-banner {
    top: max(7px, env(safe-area-inset-top)); left: 50%;
    max-width: calc(100vw - 108px); padding: 6px 9px;
    font-size: clamp(9px, 2.8vw, 12px); letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  #redlightHud .hud-quit-btn { top: max(7px, env(safe-area-inset-top)); right: 7px; padding: 5px 7px; font-size: 10px; }
  #redlightHud .hud-topbar {
    top: max(43px, calc(env(safe-area-inset-top) + 38px)); left: 50%;
    width: max-content; max-width: calc(100vw - 20px); padding: 5px 8px;
    font-size: clamp(9px, 2.7vw, 11px); line-height: 1.3;
    white-space: normal; text-align: center;
  }
  #redlightHud .rl-field-viewport {
    top: max(156px, calc(env(safe-area-inset-top) + 148px));
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
    left: 50%; width: calc(100vw - 20px); transform: translateX(-50%);
  }
  #redlightHud #rlLeaderboard {
    top: max(88px, calc(env(safe-area-inset-top) + 80px)) !important;
    left: 8px !important; right: auto !important;
    width: clamp(118px, 37vw, 148px); max-height: 82px;
    padding: 5px; gap: 3px; overflow-y: auto; border-radius: 10px;
  }
  #redlightHud #rlLeaderboard li { padding: 4px 5px; gap: 4px; font-size: 9px; }
  #redlightHud #rlLeaderboard li:nth-child(n+4) { display: none; }
  #redlightHud #rlKillFeed {
    top: max(88px, calc(env(safe-area-inset-top) + 80px)); right: 8px; left: auto;
    width: clamp(118px, 37vw, 148px); max-height: 82px; overflow: hidden;
    gap: 3px; font-size: 9px;
  }
  #redlightHud #rlKillFeed > div { padding: 4px 5px; font-size: 9px; line-height: 1.2; white-space: normal; }
  #redlightHud .rl-phase-banner { top: max(132px, calc(env(safe-area-inset-top) + 124px)); left: 50%; width: max-content; max-width: calc(100vw - 24px); }
  #redlightHud .rl-phase-banner span { display: block; padding: 6px 12px; font-size: clamp(14px, 4vw, 18px); line-height: 1.2; }
  #redlightHud .rl-elim-banner { top: max(168px, calc(env(safe-area-inset-top) + 160px)); left: 50%; width: max-content; max-width: calc(100vw - 24px); }
  #redlightHud .rl-elim-banner span { display: block; padding: 5px 10px; font-size: clamp(12px, 3.5vw, 15px); line-height: 1.2; white-space: normal; text-align: center; }
  #redlightHud .dodge-status-banner {
    top: 52%; left: 50%; width: max-content; max-width: calc(100vw - 28px);
    padding: 9px 12px; font-size: clamp(15px, 4.5vw, 21px);
    line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
    text-align: center; box-sizing: border-box; transform: translate(-50%, -50%);
  }
  #redlightHud .spectator-banner { left: 50%; width: max-content; max-width: calc(100vw - 28px); white-space: normal; overflow-wrap: anywhere; text-align: center; }
  #redlightHud .race-start-countdown { top: 52%; left: 50%; width: calc(100vw - 28px); max-width: 400px; gap: 4px; }
  #redlightHud .race-start-countdown .rsc-number { font-size: clamp(58px, 18vw, 86px); }
  #redlightHud .race-start-countdown .rsc-hint {
    max-width: 100%; padding: 8px 10px; font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.3; white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #redlightHud .bottom-hud {
    left: 8px; right: auto; bottom: max(18px, env(safe-area-inset-bottom));
    display: flex; flex-direction: row; align-items: center; width: auto;
    max-width: none; gap: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  #redlightHud #rlBgmToggleBtn {
    flex: 0 0 34px; width: 34px; height: 34px; padding: 0; font-size: 16px;
    background: #536746; color: #fff8e9; border: 1px solid #beaf86; border-radius: 50%;
  }
  #redlightHud .bottom-hud .control-hint { display: none; }
  #mobileGameControls .mobile-stick { width: clamp(82px, 23vw, 96px); right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Glass Bridge: leave a clear central lane for the bridge and keep the touch prompt compact. */
@media (max-width: 760px) and (orientation: portrait) {
  #glassHud .brand-banner {
    top: max(7px, env(safe-area-inset-top)); left: 50%;
    max-width: calc(100vw - 112px); padding: 6px 9px;
    font-size: clamp(10px, 3vw, 13px); letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  #glassHud .hud-quit-btn { top: max(7px, env(safe-area-inset-top)); right: 7px; padding: 5px 7px; font-size: 10px; }
  #glassHud .hud-topbar {
    top: max(43px, calc(env(safe-area-inset-top) + 38px)); left: 50%;
    width: max-content; max-width: calc(100vw - 20px); padding: 5px 8px;
    font-size: clamp(9px, 2.8vw, 12px); line-height: 1.3;
    white-space: normal; text-align: center;
  }
  #glassHud #glassLeaderboard {
    top: max(91px, calc(env(safe-area-inset-top) + 84px)) !important;
    left: 8px !important; right: auto !important;
    width: clamp(118px, 39vw, 150px); max-height: 76px;
    padding: 5px; gap: 3px; overflow-y: auto; border-radius: 10px;
  }
  #glassHud #glassLeaderboard li { padding: 4px 5px; gap: 4px; font-size: 9px; }
  #glassHud #glassLeaderboard li:nth-child(n+4) { display: none; }
  #glassHud .glass-answer-panel {
    top: max(91px, calc(env(safe-area-inset-top) + 84px)); left: auto; right: 8px;
    width: clamp(118px, 39vw, 150px); max-height: 76px; padding: 5px 6px;
    border-width: 1px; border-radius: 10px; overflow-y: auto;
  }
  #glassHud .glass-answer-title { margin: 0 0 2px; font-size: 9px; white-space: normal; }
  #glassHud .glass-answer-text { font-size: 10px; line-height: 1.25; letter-spacing: 0; }
  #glassHud .glass-collapse-countdown {
    top: max(126px, calc(env(safe-area-inset-top) + 118px)); left: 50%;
    max-width: calc(100vw - 24px); padding: 5px 9px; font-size: 10px;
    white-space: normal; line-height: 1.25;
  }
  #glassHud .glass-collapse-countdown .gcc-num { font-size: 15px; }
  #glassHud .glass-bridge-viewport {
    top: max(178px, calc(env(safe-area-inset-top) + 170px));
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px));
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(360px, calc(100vw - 28px));
  }
  #glassHud .glass-tile-row { left: 9px; right: 9px; gap: 9px; height: 58px; }
  #glassHud .glass-start-row, #glassHud .glass-finish-row { left: 9px; right: 9px; height: 48px; }
  #glassHud .glass-tile-num { top: -13px; font-size: 9px; }

  #glassHud .dodge-status-banner,
  #glassHud .dodge-speedup-banner {
    left: 50%; width: max-content; max-width: calc(100vw - 28px);
    padding: 9px 12px; font-size: clamp(15px, 4.5vw, 21px);
    line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
    text-align: center; box-sizing: border-box;
  }
  #glassHud .dodge-status-banner { top: 52%; transform: translate(-50%, -50%); }
  #glassHud .dodge-speedup-banner { top: 43%; transform: translate(-50%, -50%); }
  #glassHud .spectator-banner { left: 50%; width: max-content; max-width: calc(100vw - 28px); white-space: normal; overflow-wrap: anywhere; text-align: center; }
  #glassHud .race-start-countdown { top: 52%; left: 50%; width: calc(100vw - 28px); max-width: 400px; gap: 4px; }
  #glassHud .race-start-countdown .rsc-number { font-size: clamp(58px, 18vw, 86px); }
  #glassHud .race-start-countdown .rsc-hint {
    max-width: 100%; padding: 8px 10px; font-size: clamp(12px, 3.8vw, 16px);
    line-height: 1.35; white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #glassHud .bottom-hud {
    left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom));
    display: flex; flex-direction: row; align-items: center; gap: 7px;
    width: auto; max-width: none; min-width: 0; padding: 5px 7px;
    border-radius: 12px; background: #fff8e9ed; border: 1px solid #beaf88;
    box-shadow: 0 2px 0 #504c3330;
  }
  #glassHud #glassBgmToggleBtn {
    flex: 0 0 32px; width: 32px; height: 32px; padding: 0;
    font-size: 15px; border-radius: 50%;
  }
  #glassHud .control-hint {
    min-width: 0; width: auto; padding: 0; font-size: clamp(9px, 2.7vw, 11px);
    line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
  }
}

/* Turtle Egg Dodge: compact portrait HUD and keep the thumb stick clear of the hint/audio row. */
@media (max-width: 760px) and (orientation: portrait) {
  #dashHud .brand-banner {
    top: max(7px, env(safe-area-inset-top)); left: 50%;
    max-width: calc(100vw - 104px); padding: 6px 10px;
    font-size: clamp(10px, 3vw, 13px); letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  #dashHud .hud-quit-btn { top: max(7px, env(safe-area-inset-top)); right: 7px; padding: 5px 7px; font-size: 10px; }
  #dashHud .hud-topbar {
    top: max(43px, calc(env(safe-area-inset-top) + 38px)); left: 50%;
    width: max-content; max-width: calc(100vw - 20px); padding: 5px 8px;
    font-size: clamp(9px, 2.8vw, 12px); line-height: 1.3;
    white-space: normal; text-align: center;
  }
  #dashHud #dashMinimap {
    top: max(88px, calc(env(safe-area-inset-top) + 80px)) !important;
    right: 8px !important; left: auto !important;
    width: clamp(104px, 32vw, 128px) !important; height: auto !important;
    aspect-ratio: 1; border-width: 2px; border-radius: 12px;
  }
  #dashHud #dashLeaderboard {
    top: max(224px, calc(env(safe-area-inset-top) + 216px)) !important;
    right: 8px !important; left: auto !important;
    width: clamp(132px, 42vw, 172px); max-height: min(18vh, 126px);
    padding: 5px 6px; gap: 3px; overflow-y: auto; border-radius: 11px;
    font-size: 10px; line-height: 1.2;
  }
  #dashHud #dashLeaderboard li { padding: 4px 5px; gap: 4px; font-size: 10px; }
  #dashHud #dashLeaderboard li:nth-child(n+4) { display: none; }

  #dashHud .dodge-status-banner,
  #dashHud .dodge-invincible-banner,
  #dashHud .dodge-speedup-banner {
    left: 50%; width: max-content; max-width: calc(100vw - 28px);
    padding: 10px 14px; font-size: clamp(15px, 4.6vw, 22px);
    line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
    text-align: center; box-sizing: border-box;
  }
  #dashHud .dodge-status-banner { top: 52%; transform: translate(-50%, -50%); }
  #dashHud .dodge-invincible-banner { top: max(186px, calc(env(safe-area-inset-top) + 178px)); transform: translateX(-50%); }
  #dashHud .dodge-speedup-banner { top: 43%; transform: translate(-50%, -50%); }
  #dashHud .spectator-banner { left: 50%; width: max-content; max-width: calc(100vw - 28px); white-space: normal; overflow-wrap: anywhere; text-align: center; }
  #dashHud .race-start-countdown { top: 53%; left: 50%; width: calc(100vw - 28px); max-width: 420px; gap: 5px; }
  #dashHud .race-start-countdown .rsc-number { font-size: clamp(56px, 17vw, 88px); }
  #dashHud .race-start-countdown .rsc-hint {
    max-width: 100%; padding: 7px 10px; font-size: clamp(11px, 3.5vw, 15px);
    line-height: 1.35; white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #dashHud .bottom-hud {
    left: 8px; right: auto; bottom: max(18px, env(safe-area-inset-bottom));
    display: flex; flex-direction: row; align-items: center; width: auto;
    max-width: none; gap: 0; padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  #dashHud #dashBgmToggleBtn {
    flex: 0 0 34px; width: 34px; height: 34px; padding: 0; font-size: 16px;
    background: #536746; color: #fff8e9; border: 1px solid #beaf88; border-radius: 50%;
  }
  #dashHud .bottom-hud .control-hint { display: none; }
  body[data-game-mode="dash"] #mobileGameControls .mobile-stick {
    left: auto; right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom)); width: clamp(82px, 23vw, 96px);
  }
}

/* Turtle Dodge: compact portrait HUD so the speaker and status text never cover the play area. */
@media (max-width: 760px) and (orientation: portrait) {
  #dodgeHud .brand-banner {
    top: max(7px, env(safe-area-inset-top)); left: 50%;
    max-width: calc(100vw - 112px); padding: 6px 10px;
    font-size: clamp(10px, 3vw, 13px); letter-spacing: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  #dodgeHud .hud-topbar {
    top: max(43px, calc(env(safe-area-inset-top) + 38px)); left: 50%;
    width: max-content; max-width: calc(100vw - 24px); padding: 5px 9px;
    font-size: clamp(9px, 2.8vw, 12px); line-height: 1.3;
    white-space: normal; text-align: center;
  }
  #dodgeHud .dodge-my-lives {
    top: max(88px, calc(env(safe-area-inset-top) + 82px)); left: 10px;
    gap: 6px; padding: 6px 10px; border-width: 1px; border-radius: 12px;
  }
  #dodgeHud .dml-label { font-size: 11px; }
  #dodgeHud .dml-hearts { font-size: clamp(17px, 5vw, 22px); letter-spacing: 0; }
  #dodgeHud .dodge-lives-list {
    top: max(137px, calc(env(safe-area-inset-top) + 130px)); left: 10px;
    width: min(62vw, 290px); max-height: min(22vh, 210px);
    gap: 3px; padding: 6px; overflow-y: auto; border-radius: 12px;
  }
  #dodgeHud .dodge-lives-list li { padding: 4px 6px; gap: 5px; font-size: 10px; }
  #dodgeHud .dodge-lives-list li .dl-hearts { font-size: 10px; }
  #dodgeHud .dodge-lives-list li .dl-state { font-size: 9px; }

  #dodgeHud .dodge-status-banner,
  #dodgeHud .dodge-invincible-banner,
  #dodgeHud .dodge-speedup-banner,
  #dodgeHud .dodge-heal-toast {
    left: 50%; width: max-content; max-width: calc(100vw - 28px);
    padding: 10px 14px; font-size: clamp(15px, 4.6vw, 22px);
    line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
    text-align: center; box-sizing: border-box;
  }
  #dodgeHud .dodge-status-banner { top: 52%; transform: translate(-50%, -50%); }
  #dodgeHud .dodge-invincible-banner { top: max(186px, calc(env(safe-area-inset-top) + 178px)); transform: translateX(-50%); }
  #dodgeHud .dodge-speedup-banner { top: 43%; transform: translate(-50%, -50%); }
  #dodgeHud .dodge-heal-toast { top: max(137px, calc(env(safe-area-inset-top) + 130px)); transform: translateX(-50%); }
  #dodgeHud .race-start-countdown { top: 53%; left: 50%; width: calc(100vw - 28px); max-width: 420px; gap: 5px; }
  #dodgeHud .race-start-countdown .rsc-number { font-size: clamp(56px, 17vw, 88px); }
  #dodgeHud .race-start-countdown .rsc-hint {
    max-width: 100%; padding: 7px 10px; font-size: clamp(11px, 3.5vw, 15px);
    line-height: 1.35; white-space: normal; overflow-wrap: anywhere; text-align: center;
  }
  #dodgeHud .bottom-hud {
    left: 8px; right: 8px; bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px));
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 7px; min-width: 0; padding: 5px 7px; border-radius: 12px;
    background: #fff8e9ed; border: 1px solid #beaf88; box-shadow: 0 2px 0 #82714c25;
  }
  #dodgeBgmToggleBtn {
    flex: 0 0 34px; width: 34px; min-width: 34px; height: 34px; padding: 0;
    align-self: center; font-size: 16px; border: 1px solid #beaf88;
    background: #536746; color: #fff8e9;
  }
  #dodgeHud .control-hint {
    min-width: 0; width: auto; padding: 3px 5px; border-radius: 7px;
    background: transparent; color: #59634b; font-size: clamp(8px, 2.4vw, 10px);
    line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
  }
  #dodgeHud .dodge-debug-panel { display: none !important; }
}