/* Shared short-screen layouts. Native iPhone supports both landscape rotations;
   browser portrait and tablet windows keep their existing responsive flow. */
:root {
  --game-safe-left: max(14px, env(safe-area-inset-left));
  --game-safe-right: max(14px, env(safe-area-inset-right));
  --game-safe-bottom: max(12px, env(safe-area-inset-bottom));
}
@media (orientation: landscape) and (max-height: 600px) {
  html { scroll-padding-block: 60px 80px; }
  body { -webkit-text-size-adjust: 100%; }
  .training-nav, .attributes-screen > nav, .skills-page-nav, .story-topbar {
    min-height: 52px; height: auto; padding: 4px var(--game-safe-right) 4px var(--game-safe-left);
    gap: 12px; background: #0b0e12f5;
  }
  :where(.training-nav, .attributes-screen > nav, .skills-page-nav) a { min-height: 44px; font-size: 14px; }
  :where(.training-nav, .attributes-screen > nav, .skills-page-nav) select { min-height: 40px; }
  :where(.training-screen, .attributes-screen) > main {
    padding: 14px var(--game-safe-right) calc(78px + var(--game-safe-bottom)) var(--game-safe-left);
  }
  /* The scene and the next action share the first view. Options continue below. */
  .training-heading { flex-direction: row; justify-content: space-between; text-align: start; gap: 16px; padding: 0 0 10px; margin: 0 0 14px; }
  .training-heading h1 { font-size: 25px; margin: 2px 0; }
  .training-heading p:not(.kicker) { font-size: 13px; margin: 3px 0; }
  .training-heading .kicker { font-size: 11px; }
  .training-identity { flex-direction: column; align-items: flex-end; gap: 0; border: 0; background: none; padding: 0; flex-shrink: 0; }
  .training-identity :is(b,span,small) { font-size: 12px; }
  .training-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.85fr); gap: 14px; }
  .training-left { display: block; min-width: 0; }
  .training-scene { height: max(215px, calc(100dvh - 160px)); border-radius: 16px; }
  .training-fighter { height: calc(100% - 45px); width: 55%; left: 2%; bottom: 0; }
  .training-bag { height: 105px; width: 40px; left: 52%; bottom: 23px; }
  .scene-title { inset: 10px 12px auto; }
  .scene-title h2 { font-size: 21px; }
  .scene-state { top: 67px; right: 10px; max-width: 135px; font-size: 10px; }
  .scene-coach { right: 8px; bottom: 8px; padding: 6px; grid-template-columns: 34px 1fr; gap: 0 6px; }
  .scene-coach .trainer-thumb { width: 34px; height: 40px; }
  .scene-coach b { font-size: 13px; }
  .scene-coach span:last-child { font-size: 11px; }
  .training-panel { position: static; padding: 14px; border-radius: 16px; }
  .training-panel > h2 { font-size: 21px; margin: 4px 0 8px; }
  .gain-row { padding: 5px 0; font-size: 13px; }
  .gain-row strong { font-size: 21px; }
  .training-summary { margin: 9px 0; padding-bottom: 8px; }
  .training-lengths { gap: 5px; }
  .training-lengths button { padding: 8px 5px; min-height: 44px; font-size: 12px; }
  .training-hint { font-size: 12px; margin: 8px 0; }
  .training-primary { min-height: 46px; }
  .training-tabs button { min-height: 44px; font-size: 12px; }
  .training-options { padding: 14px; }
  .training-programs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .training-program { min-height: 80px; padding: 12px; }
  .training-screen .beta-feedback, .training-screen .mma-music-control { position: static; }
  /* Attribute prices and Save remain legible; the rows scroll naturally. */
  .attributes-screen > main { display: grid; grid-template-columns: 190px minmax(0,1fr); column-gap: 18px; align-items: start; }
  .attribute-planner { grid-column: 1; position: sticky; top: 12px; max-height: calc(100dvh - 100px); overflow-y: auto; scrollbar-width: thin; }
  .attribute-note { grid-column: 1 / -1; }
  .attribute-hero { min-height: 90px; margin: 0 0 12px; padding: 8px 0; }
  .attribute-hero img { height: 86px; width: 72px; }
  .attribute-hero > div { padding-inline: 0; }
  .attribute-hero img { opacity: .12; width: 90px; height: 100%; }
  .attribute-hero h1 { font-size: 25px; }
  .attribute-hero p { font-size: 13px; margin: 4px auto; }
  .attribute-kicker { margin-bottom: 4px; }
  .attribute-budget { gap: 5px; margin: 0 0 12px; grid-template-columns: 1fr; }
  .attribute-budget article { padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .attribute-budget strong { font-size: 23px; }
  .attribute-controls { margin: 12px 0; gap: 6px; }
  .attribute-controls > span { flex-basis: 100%; text-align: center; }
  .attribute-controls button { padding: 8px 10px; }
  .attribute-controls button, .attribute-row .attribute-buttons button { min-height: 44px; }
  .attribute-groups { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; gap: 12px; }
  .attribute-group { padding: 14px; }
  .attribute-row h3 { font-size: 17px; }
  .attribute-row .attribute-value { font-size: 24px; }
  .attribute-footer { padding: 8px var(--game-safe-right) var(--game-safe-bottom) var(--game-safe-left); }
  /* Skill branches read across the screen, with selection details immediately below. */
  .elemental-skills { padding: 14px var(--game-safe-right) var(--game-safe-bottom) var(--game-safe-left); min-height: 0; }
  .skills-header { flex-direction: row; padding: 0 0 10px; text-align: start; }
  .skills-header h1 { font-size: 27px; }
  .element-picker { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 10px 0; }
  .element-picker button { min-height: 44px; }
  .element-heading { padding: 6px 0; display: grid; grid-template-columns: 1fr auto; text-align: start; gap: 2px 14px; }
  .element-heading h2 { font-size: 24px; }
  .element-heading p { grid-column: 1; max-width: 650px; font-size: 13px; margin: 3px 0; }
  .element-heading .equip-element { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; }
  .skills-tree { grid-template-columns: repeat(5,minmax(0,1fr)); padding: 14px 0; gap: 8px; }
  .elemental-skills .skill-node { min-height: 130px; padding: 12px 9px; gap: 7px; }
  .skills-tree .skill-node:last-child { grid-column: auto; max-width: none; }
  .skill-node b { font-size: 17px; overflow-wrap: anywhere; }
  .skill-node span { font-size: 12px; }
  .skill-detail { padding: 16px; }
  .skill-detail h3 { font-size: 25px; }
  .skills-help { margin: 12px auto; }
  .street-world { padding: 16px var(--game-safe-right) calc(50px + var(--game-safe-bottom)) var(--game-safe-left); }
  .street-chapter h1 { font-size: 32px; }
  /* Offline and Online use the same compact broadcast hierarchy. */
  .global-bar, .broadcast-header { height: 46px; padding: 0 var(--game-safe-right) 0 var(--game-safe-left); }
  .live-center { padding: 50px var(--game-safe-right) var(--game-safe-bottom) var(--game-safe-left); overflow-y: auto; }
  .fight-hud { height: 80px; grid-template-columns: minmax(0,1fr) 80px minmax(0,1fr); }
  .hud-fighter img { width: 54px; }
  .hud-info { padding: 6px 8px; }
  .hud-info > small { display: none; }
  .hud-info > strong { font-size: 17px; margin: 2px 0 8px; }
  .round-clock time { font-size: 29px; }
  .round-clock strong { font-size: 12px; }
  .round-clock small, .round-clock span { font-size: 10px; letter-spacing: .03em; }
  .live-layout { min-height: 0; height: auto; grid-template-columns: 1fr; margin-top: 6px; gap: 6px; }
  .event-arena { height: max(190px,calc(100dvh - 152px - var(--game-safe-bottom))); min-height: 190px; }
  .fight-chat { max-height: 110px; }
  .fight-chat header { padding: 9px 12px; }
  .fight-chat li { font-size: 13px; padding: 7px 0; }
  .fight-app { padding: 8px var(--game-safe-right) var(--game-safe-bottom) var(--game-safe-left); }
  .event-strip { min-height: 24px; font-size: 11px; padding-block: 4px; }
  .scoreboard { grid-template-columns: minmax(0,1fr) 75px minmax(0,1fr); border-radius: 12px; }
  .fighter-hud { display: grid; grid-template-columns: 44px minmax(0,1fr); min-height: 0; padding: 6px; gap: 6px; text-align: start; }
  .fighter-hud.red { direction: ltr; text-align: start; }
  .fighter-hud > img { width: 44px; height: 50px; }
  .fighter-hud__identity { padding: 0; }
  .fighter-hud__identity h1 { font-size: 17px; margin: 3px 0; }
  .fighter-hud__identity small { font-size: 10px; letter-spacing: .04em; }
  .fighter-hud__identity p { font-size: 11px; }
  .fighter-hud .meters { position: static; grid-column: 1/-1; width: 100%; padding: 0; }
  .fighter-hud .meters label { font-size: 10px; }
  .clock b { font-size: 30px; }
  .clock small, .clock span { font-size: 10px; letter-spacing: .02em; }
  .arena { min-height: 185px; height: max(185px,calc(100dvh - 208px)); margin-top: 6px; border-radius: 12px; }
  .arena > .fight-visual-stage { inset: 5% 0 9%; }
  .event-arena .visual-fighter, .arena .visual-fighter { height: 84%; width: 40%; bottom: 1%; }
  .event-arena .visual-fighter--blue, .arena .visual-fighter--blue { left: 9%; }
  .event-arena .visual-fighter--red, .arena .visual-fighter--red { right: 9%; }
  .fight-report { margin-inline: auto; max-width: 1080px; }
  .newspaper-headline h2 { font-size: 32px; }
  .debut-coach-handoff { gap: 12px; }
  .beta-feedback { max-width: calc(100vw - var(--game-safe-left) - var(--game-safe-right)); }
}
@media (orientation: landscape) and (max-height: 600px) and (min-width: 900px) {
  .attribute-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
}