/* Touch layouts keep the whole fight and every action inside the viewport. */
.touch-fight-tools, .touch-stick-caption { display: none; }
@media (max-width: 900px) {
  html, body { overscroll-behavior: none; }
  button { -webkit-tap-highlight-color: transparent; }
  #clock-menu .clock-mode, #clock-menu .menu-fullscreen { min-height: 48px; }
  .top-actions button, .career-hub-actions button, .spotlight-actions button,
  .workplace-choices button, .roster-fighter, .solo-fighter { min-height: 44px; }
  .in-bout #app { height: 100dvh; min-height: 0; padding-bottom: 0; overflow: hidden; }
  .in-bout header { min-height: 52px; padding: 3px 10px; flex-wrap: nowrap; }
  .in-bout .brand img { max-width: 105px; max-height: 43px; object-fit: contain; }
  .in-bout .top-actions button { min-height: 44px; padding: 7px 11px; font-size: 12px; }
  .in-bout #controls-toggle { display: none; }
  .in-bout .arena, .in-bout.compact-controls .arena,
  .in-bout:not(.compact-controls) .arena { height: auto; min-height: 0; flex: 1 1 auto; }
  .in-bout .controls-deck, .in-bout.compact-controls .controls-deck {
    display: grid; grid-template-columns: minmax(100px, 1fr) min(60vw, 230px); gap: 8px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom));
    border-top-width: 3px; align-items: stretch; flex: none; touch-action: none;
  }
  .in-bout .movement-controls { width: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .in-bout .movement-controls>div:last-child { width: 100%; }
  .in-bout .movement-controls strong, .in-bout .movement-controls p,
  .in-bout .movement-controls small { display: none; }
  .in-bout .stick { width: 96px; height: 96px; }
  .in-bout .aux-controls { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 0; }
  .in-bout .aux-controls button { min-height: 40px; padding: 4px; font: 800 13px var(--display); }
  .in-bout .attack-controls { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(48px, 1fr)); gap: 5px; align-self: stretch; }
  .in-bout .attack-controls button { min-width: 0; min-height: 48px; padding: 5px 3px;
    display: grid; place-items: center; text-align: center; touch-action: none; }
  .in-bout .attack-controls button:active, .in-bout .aux-controls button:active {
    background: var(--yellow); color: var(--ink); transform: scale(.96);
  }
  .in-bout .attack-controls strong { font: 800 15px/1 var(--display); }
  .in-bout .attack-controls kbd, .in-bout .attack-controls small { display: none; }
  .in-bout #block { grid-column: 1 / -1; background: #39383b; border-color: #afa69a; }
  .in-bout #block.held { background: var(--yellow); }
  .in-bout:not(.versus-match) #shot-dock { display: none !important; }
  .in-bout.versus-match .controls-deck { display: none !important; }
  .in-bout.versus-match #shot-dock:not([hidden]) { display: flex !important; }
  .in-bout.versus-match #app { padding-bottom: 102px; }
  .in-bout .fight-hud { top: 8px; left: 10px; right: 10px; gap: 6px; }
  .in-bout .fighter-name { font-size: clamp(16px, 5vw, 22px); }
  .in-bout .match-info { padding-top: 0; gap: 2px; }
  .in-bout .match-info #clock { font-size: 20px; }
  .in-bout .overlay { inset: 125px 0 6px; }
  .in-bout .fight-card { max-height: 100%; overflow: auto; }
  .in-bout .announcement { bottom: 10px; }
  #clock-menu.awaiting-start .clock-menu-actions { display: none; }
  #clock-menu.awaiting-start .clock-menu-stage { display: block; }
  .choosing-career header { position: sticky; top: 0; z-index: 30; }
  .fighter-spotlight { overflow: visible; }
  #career-screen .spotlight-actions, #career-screen .career-hub-actions {
    position: fixed !important; left: 0; right: 0; bottom: 0 !important; z-index: 25;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  #game-options .options-actions { position: sticky !important; bottom: 0 !important;
    z-index: 4; margin-top: 8px; padding: 8px 0; background: #f8efdd;
    box-shadow: 0 -2px 0 #c4bbab; }
  #game-options .options-actions button { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
  .choosing-versus #versus-home, .choosing-versus #locker, .choosing-versus #pause { display: none; }
}

@media (max-width: 680px) {
  .choosing-career header { height: 56px; min-height: 56px; flex-wrap: nowrap; padding: 3px 8px; gap: 4px; }
  .choosing-career header .brand img { width: 98px; height: 38px; object-fit: contain; }
  .choosing-career header .top-actions { flex-wrap: nowrap; gap: 3px; margin-left: auto; }
  .choosing-career header .top-actions button { min-height: 40px; padding: 5px; font-size: 10px; }
  .fighter-spotlight { grid-template-rows: auto 240px auto auto; padding-bottom: 108px; }
  .spotlight-heading { padding: 12px 16px 5px; }
  .spotlight-heading h2 { margin: 4px 0; font-size: 30px; }
  .spotlight-stage { min-height: 0; }
  .spotlight-name { font-size: 115px; top: 8%; }
  .spotlight-caption { min-height: 42px; padding: 5px 10px; }
  .spotlight-caption b { font-size: 15px; }
  .spotlight-caption span { font-size: 12px; }
  .spotlight-info { padding: 10px 16px; gap: 9px; }
  .spotlight-profile { padding: 12px 14px; transform: none; }
  .spotlight-profile h3 { font-size: 42px; margin-bottom: 5px; }
  .spotlight-background { font-size: 14px; margin-bottom: 5px; }
  .spotlight-style { font-size: 16px; padding: 3px 8px; }
  .spotlight-profile>p:not(.spotlight-background) { font-size: 13px; margin: 5px 0; }
  .spotlight-bars { margin-top: 8px; padding-top: 7px; gap: 4px; }
  .spotlight-bars>div { grid-template-columns: 82px 1fr; gap: 5px; }
  .spotlight-bars b { font-size: 16px; }
  .spotlight-bars span { height: 11px; }
  .spotlight-profile details { margin-top: 6px; }
  .spotlight-roster { gap: 6px; }
  .spotlight-roster { order: -1; }
  .solo-fighter img { height: 64px; }
  .solo-fighter strong { font-size: 15px; padding: 3px; }
  .career-hub { grid-template-rows: auto 225px auto auto auto; padding-bottom: 108px; }
  .workplace-picker.career-hub { grid-template-rows: auto 260px auto auto auto; }
  .career-hub-heading { padding: 12px 16px 5px; }
  .career-hub-heading h2 { margin: 4px 0; font-size: 31px; }
  .career-hub-info { padding: 10px 16px; gap: 8px; }
  .workplace-picker .career-hub-scene { min-height: 0; }
  .workplace-picker .career-hub-info { padding: 10px 16px; }
  .workplace-choices { gap: 7px; }
  .workplace-choices button { min-height: 72px; padding: 10px 13px; gap: 2px; }
  .workplace-choices strong { font-size: 25px; }
  .workplace-choices span { font-size: 13px; }
  .workplace-choices small { font-size: 12px; }
  .career-hub-caption { bottom: 5px; padding: 6px 10px; }
  .career-hub-caption h3 { margin: 4px 0; font-size: 19px; }
  .career-hub-progress { margin-top: 5px; gap: 4px; }
  .career-hub-progress i { width: 22px; height: 22px; }
  .career-hub-profile { padding: 10px 12px; }
  .career-hub-opponent { gap: 10px; }
  .career-hub-opponent img { width: 62px; height: 72px; }
  .career-hub-opponent h3 { font-size: 31px; margin: 4px 0; }
  .career-hub-opponent strong { font-size: 13px; }
  .career-hub-profile blockquote { font-size: 13px; margin: 9px 0 5px; }
  .career-hub-tip { font-size: 12px; margin: 3px 0 7px; }
  .career-cv-heading { margin: 8px 0 3px; }
  .career-hub-ladder { gap: 0; padding-top: 3px; }
  .career-hub-ladder button { min-height: 35px; padding: 3px 5px; font-size: 12px; }
  .career-hub-ladder em { margin-top: 0; }
}
@media (max-width: 900px) and (max-height: 700px) {
  #clock-menu:not(.awaiting-start) .clock-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  #clock-menu:not(.awaiting-start) .clock-mode, #clock-menu:not(.awaiting-start) .menu-fullscreen {
    width: 100%; min-height: 48px; margin: 0; padding: 6px 9px; font-size: 19px;
  }
  #clock-menu:not(.awaiting-start) .clock-mode small { display: none; }
  #clock-menu:not(.awaiting-start) .clock-menu-help { grid-column: 1 / -1; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .in-bout header { height: 42px; min-height: 42px; }
  .in-bout .brand img { max-height: 36px; }
  .in-bout .controls-deck, .in-bout.compact-controls .controls-deck {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex;
    justify-content: space-between; align-items: end; padding: 4px max(8px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, #101115cc); border: 0; pointer-events: none;
  }
  .in-bout .movement-controls { flex-direction: row; align-items: end; gap: 5px; pointer-events: none; }
  .in-bout .movement-controls>div:last-child { width: 56px; }
  .in-bout .stick { width: 88px; height: 88px; pointer-events: auto; }
  .in-bout .aux-controls button { min-height: 40px; font-size: 11px; pointer-events: auto; }
  .in-bout .attack-controls { display: grid; flex: none; width: min(43vw, 300px); grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 42px); gap: 4px; pointer-events: none; }
  .in-bout .attack-controls button { min-height: 42px; font-size: 12px; pointer-events: auto; background: #15171ddd; }
  .in-bout .attack-controls strong { font-size: 12px; }
  .in-bout #block { grid-column: auto; }
  .in-bout .overlay { inset: 95px 0 75px; }
  .in-bout .announcement { bottom: 72px; }
  .at-clock-menu #app { min-height: 100dvh; height: auto; }
  #clock-menu { min-height: 100dvh; height: auto; align-items: flex-start; padding: 10px 3% 22px;
    overflow: auto; }
  #clock-menu .clock-menu-copy { width: 43%; max-width: 350px; }
  #clock-menu .clock-menu-logo { width: min(190px, 80%); margin: 0 0 7px; }
  #clock-menu .clock-mode { min-height: 44px; padding: 4px 9px; margin: 3px 0; font-size: 19px; }
  #clock-menu:not(.awaiting-start) .clock-mode small { display: none; }
  #clock-menu .menu-fullscreen { min-height: 40px; padding: 5px 9px; font-size: 13px; }
  #clock-menu .clock-menu-help { margin-top: 5px; font-size: 11px; line-height: 1.25; }
  #clock-menu .clock-community { margin: 7px 0 0; font-size: 11px; line-height: 1.3; }
  #clock-menu .clock-start p { margin: 8px 0; font-size: 12px; }
  #clock-menu .clock-menu-foot { display: none; }
  #clock-menu:not(.awaiting-start) .clock-menu-copy { width: 55%; max-width: 480px; }
  .choosing-career #app { height: 100dvh; min-height: 0; overflow: hidden; }
  .choosing-career header { position: relative; flex: none; height: 54px; min-height: 54px; }
  .choosing-career #career-screen { flex: 1; min-height: 0; overflow: hidden; }
  .fighter-spotlight, .career-hub { height: 100%; min-height: 0; overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .workplace-picker .career-hub-heading { grid-column: 2 !important; grid-row: 1; }
  .career-hub-scene { grid-column: 1; grid-row: 1 / 3; }
  .career-hub-info { grid-column: 2; grid-row: 2; }
  .spotlight-stage, .career-hub-scene, .workplace-picker .career-hub-scene { min-height: 0 !important; }
  .spotlight-info, .career-hub-info { min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    justify-content: flex-start !important; }
  .spotlight-heading, .career-hub-heading { padding: 8px 14px 3px; }
  .spotlight-heading h2, .career-hub-heading h2 { font-size: 29px; margin: 3px 0; }
  .spotlight-profile, .career-hub-profile { padding: 12px; transform: none; }
  .spotlight-info { overflow: hidden; gap: 6px; }
  .spotlight-roster { order: -1; flex: none; gap: 5px; }
  .spotlight-roster img { height: 52px !important; }
  .spotlight-roster button { min-height: 72px; }
  .spotlight-profile { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .workplace-picker .career-hub-info { padding: 4px 12px; overflow: hidden; }
  .workplace-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .workplace-choices button { min-height: 110px; padding: 8px; gap: 3px; }
  .workplace-choices strong { font-size: 19px; overflow-wrap: anywhere; }
  .workplace-choices span { font-size: 11px; }
  .workplace-choices small { font-size: 10px; }
  #career-screen .spotlight-actions, #career-screen .career-hub-actions {
    position: relative !important; bottom: auto !important; padding: 5px 12px; min-height: 50px;
  }
  .career-hub-save { padding: 2px 12px; min-height: 25px; }
}


/* Fighting uses the full viewport; touch controls float over the arena. */
.touch-fight { --touch-key: 62px; overflow: hidden; touch-action: none; }
.touch-fight #app { position: fixed; inset: 0; height: 100dvh; min-height: 0; padding: 0; overflow: hidden; }
.touch-fight #app>header, .touch-fight footer, .touch-fight .run-strip { display: none; }
.touch-fight #app>.arena { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.touch-fight .fight-hud {
  top: max(10px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right)); gap: 10px;
  grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr);
}
.touch-fight .fighter-name { font-size: clamp(17px,3.3vw,25px); line-height: 1; }
.touch-fight .fighter-name small, .touch-fight .condition { display: none; }
.touch-fight .health-track { height: 14px; margin-top: 6px; }
.touch-fight .stamina-track { height: 8px; margin-top: 4px; }
.touch-fight .match-info { padding: 0; gap: 2px; font-size: 9px; }
.touch-fight #round-number { font-size: 14px; }
.touch-fight #clock { font-size: 20px; }
.touch-fight .round-score i { width: 9px; height: 9px; }
.touch-fight #bout, .touch-fight #round-state { display: none; }
.touch-fight .touch-fight-tools { display: flex; position: absolute; z-index: 10;
  top: calc(max(10px, env(safe-area-inset-top)) + 76px); left: 50%; transform: translateX(-50%); gap: 6px; }
.touch-fight-tools button { width: 44px; height: 44px; border: 1px solid #f8efdd66;
  border-radius: 10px; background: #15171daa; color: #f8efdd; font-size: 22px; touch-action: manipulation; }
.touch-fight .touch-fight-tools button[hidden] { display: none; }
.touch-fight .controls-deck, .touch-fight.compact-controls .controls-deck {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 8px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: linear-gradient(transparent, #10111580); border: 0; pointer-events: none; touch-action: none;
}
.touch-fight .movement-controls { position: relative; display: flex; width: auto; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
.touch-fight .movement-controls>div:last-of-type { width: auto; }
.touch-fight .movement-controls strong, .touch-fight .movement-controls p,
.touch-fight .movement-controls small, .touch-fight #lean { display: none; }
.touch-fight .stick { flex: none; width: 112px; height: 112px; margin: 0;
  background: #15171d99; border: 2px solid #f8efdd77; border-radius: 50%; pointer-events: auto; }
.touch-fight .stick-nub { background: #f8efddcc; border: 2px solid #15171d; }
.touch-fight .aux-controls { display: block; margin: 0; }
.touch-fight #feint { min-height: 44px; min-width: 72px; padding: 8px; border: 1px solid #f8efdd66;
  border-radius: 12px; background: #15171daa; color: #f8efdd; font-size: 13px; pointer-events: auto; }
.touch-fight .touch-stick-caption { display: block; font: 600 11px/1.2 'Barlow',sans-serif;
  color: #f8efdd; text-shadow: 0 1px 3px #000; }
.touch-fight .attack-controls { display: grid; width: 180px; flex: none; align-self: auto;
  grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: var(--touch-key) var(--touch-key) 46px; gap: 7px; pointer-events: none; }
.touch-fight .attack-controls button { min-width: 0; min-height: 0; padding: 8px 4px;
  border: 2px solid #f8efdd99; border-radius: 18px; background: #15171dc9;
  box-shadow: 0 3px 0 #0005; color: #f8efdd; touch-action: none; pointer-events: auto; }
.touch-fight .attack-controls strong { font: 800 15px/1.05 var(--display); color: inherit; }
.touch-fight .attack-controls kbd, .touch-fight .attack-controls small { display: none; }
.touch-fight .attack-controls button:active { background: var(--yellow); color: var(--ink); transform: scale(.94); }
.touch-fight .attack-controls button:disabled { opacity: .35; }
.touch-fight #block { grid-column: 1 / -1; background: #15171dc9; border-color: #afa69a; border-radius: 14px; }
.touch-fight #block.guard-latched, .touch-fight #block.held { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 0 0 16px #ffe50040; }
.touch-fight #block.guard-open { background: #3e3520d9; color: var(--yellow); box-shadow: none; }
.touch-fight .overlay { inset: calc(max(10px, env(safe-area-inset-top)) + 120px) 0 max(12px, env(safe-area-inset-bottom)); z-index: 12; }
.touch-fight .overlay:empty { pointer-events: none; }
.touch-fight .announcement { bottom: calc(190px + env(safe-area-inset-bottom)); }
.touch-fight .recovery { bottom: calc(195px + env(safe-area-inset-bottom)); }
.touch-fight.versus-match .controls-deck { display: none !important; }
.touch-fight.versus-match #app { padding: 0; }
.touch-fight:not(.versus-match) #shot-dock { display: none !important; }
.touch-fight #training-deck { left: 50%; right: auto; bottom: auto;
  top: calc(max(10px,env(safe-area-inset-top)) + 130px); transform: translateX(-50%);
  width: min(94%,400px); padding: 8px 12px; }
.touch-fight #training-deck strong { font-size: 18px; }
.touch-fight #training-deck span { font-size: 12px; }
.touch-fight #training-deck button { font-size: 12px; min-height: 44px; padding: 6px; }
@media (orientation: landscape) and (max-height: 500px) {
  .touch-fight { --touch-key: 54px; }
  .touch-fight .attack-controls { width: 174px; grid-template-rows: var(--touch-key) var(--touch-key) 44px; gap: 5px; }
  .touch-fight .stick { width: 104px; height: 104px; }
  .touch-fight .movement-controls { flex-direction: row; padding-bottom: 19px; }
  .touch-fight .touch-stick-caption { position: absolute; bottom: 0; left: 0; white-space: nowrap; }
  .touch-fight .touch-fight-tools { top: max(8px, env(safe-area-inset-top)); }
  .touch-fight .fight-hud { grid-template-columns: minmax(0,1fr) 160px minmax(0,1fr); }
  .touch-fight .match-info { padding-top: 45px; }
  .touch-fight .overlay { inset: calc(max(8px, env(safe-area-inset-top)) + 85px) 185px 8px; }
  .touch-fight .announcement { bottom: max(12px, env(safe-area-inset-bottom)); width: min(48%,480px); }
  .touch-fight .recovery { bottom: max(12px, env(safe-area-inset-bottom)); width: min(46%,420px); }
}
@media (max-width: 380px) and (orientation: portrait) {
  .touch-fight .attack-controls { width: 158px; }
  .touch-fight .stick { width: 100px; height: 100px; }
  .touch-fight .touch-stick-caption { max-width: 120px; text-align: center; }
}