/* Optional mobile landscape mode. Desktop remains the default layout. */
.haff-ui-toggle{min-width:88px;min-height:32px;padding:5px 10px;border:1px solid #668061;border-radius:3px;background:#1c2d24;color:#d9efc8;font:700 11px/1.2 system-ui;white-space:nowrap;cursor:pointer}
.haff-ui-toggle[aria-pressed=true]{border-color:#b6ef7b;background:#34472c;color:#f0ffd8;box-shadow:inset 0 0 0 1px #b6ef7b33}
.topbar>.haff-ui-toggle{margin-left:auto}
.haff-ui-toggle-battle{display:none}
body:has(#battle-view:not([hidden])) .topbar>.haff-ui-toggle{display:none}
#battle-view:not([hidden]) .haff-ui-toggle-battle{display:block}
#battle-view:not([hidden]) .battle-toolbar{position:relative;z-index:4}
.haff-rotate-gate{display:none}

@media(orientation:portrait) and (max-width:900px){
  html.haff-mobile-mode .haff-rotate-gate:not([data-dismissed=true]){position:fixed;z-index:240;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center;color:#edf6e8;background:radial-gradient(circle at 50% 45%,#1d3428,#07100deF 62%)}
  html.haff-mobile-mode .haff-rotate-mark{font:76px/1 system-ui;color:#b6ef7b;transform:rotate(90deg);margin-bottom:8px}
  html.haff-mobile-mode .haff-rotate-gate strong{font-size:24px}
  html.haff-mobile-mode .haff-rotate-gate>span{max-width:340px;color:#aebfb2;font-size:14px;line-height:1.7}
  html.haff-mobile-mode .haff-rotate-gate>div:last-child{display:flex;gap:9px;margin-top:8px}
  html.haff-mobile-mode .haff-rotate-gate button{min-height:44px;padding:8px 14px;font-size:13px}
  html.haff-mobile-mode .haff-rotate-gate [data-haff-use-desktop]{border-color:#b6ef7b;background:#b6ef7b;color:#0d160f;font-weight:750}
}

@media(orientation:landscape) and (max-height:540px) and (min-width:640px){
  html.haff-mobile-mode{--hm-safe-top:env(safe-area-inset-top,0px);--hm-safe-right:env(safe-area-inset-right,0px);--hm-safe-bottom:env(safe-area-inset-bottom,0px);--hm-safe-left:env(safe-area-inset-left,0px)}
  html.haff-mobile-mode body{overscroll-behavior:none}
  html.haff-mobile-mode .topbar{min-height:40px;height:40px;padding:4px max(10px,var(--hm-safe-right)) 4px max(10px,var(--hm-safe-left));gap:10px}
  html.haff-mobile-mode .topbar>span:nth-child(2),html.haff-mobile-mode .topbar>.prototype{display:none}
  html.haff-mobile-mode .topbar>.haff-ui-toggle{margin-left:auto;min-height:34px}
  html.haff-mobile-mode body.haff-mobile-battle .topbar>.haff-ui-toggle{display:none}
  html.haff-mobile-mode main{max-width:none;padding-inline:max(10px,var(--hm-safe-left)) max(10px,var(--hm-safe-right))}
  html.haff-mobile-mode .titlebar{padding:10px 0 8px}
  html.haff-mobile-mode .titlebar h1{font-size:26px}
  html.haff-mobile-mode .titlebar .eyebrow{font-size:9px}

  /* Preparation: character cards own the stage; supporting information becomes compact chrome or a drawer. */
  html.haff-mobile-mode body.hbc-preparing .topbar{height:40px}
  html.haff-mobile-mode body.hbc-preparing main{height:calc(100dvh - 40px - var(--hm-safe-top) - var(--hm-safe-bottom));padding:0 max(8px,var(--hm-safe-right)) max(5px,var(--hm-safe-bottom)) max(8px,var(--hm-safe-left))}
  html.haff-mobile-mode body.hbc-preparing .campaign-top-actions{right:max(8px,var(--hm-safe-right));top:5px;height:34px}
  html.haff-mobile-mode body.hbc-preparing .campaign-top-actions .abandon-run{min-height:32px;padding:5px 9px}
  html.haff-mobile-mode body.hbc-preparing .topbar>.haff-ui-toggle{margin-right:112px}
  html.haff-mobile-mode body.hbc-preparing #campaign-shell{height:32px;max-height:32px;overflow:hidden}
  html.haff-mobile-mode body.hbc-preparing .campaign-hud{height:32px;padding:2px 0;gap:10px}
  html.haff-mobile-mode body.hbc-preparing .campaign-stat{display:flex;align-items:baseline;gap:4px;min-width:0}
  html.haff-mobile-mode body.hbc-preparing .campaign-stat>span{font-size:8px;white-space:nowrap}
  html.haff-mobile-mode body.hbc-preparing .campaign-stat>strong{font-size:13px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.haff-mobile-mode body.hbc-preparing .compact-progress,html.haff-mobile-mode body.hbc-preparing .career-badge{display:none!important}
  html.haff-mobile-mode body.hbc-preparing .mission-band{height:32px;min-height:32px;padding:2px 0;gap:8px}
  html.haff-mobile-mode body.hbc-preparing .mission-band h2{font-size:12px}
  html.haff-mobile-mode body.hbc-preparing .enemy-brief{display:none}
  html.haff-mobile-mode body.hbc-preparing .hbc-shop-toggle,html.haff-mobile-mode body.hbc-preparing .hbc-overview,html.haff-mobile-mode body.hbc-preparing .hbc-inspector-toggle{min-height:32px;padding:5px 9px;font-size:10px}
  html.haff-mobile-mode body.hbc-preparing .formation-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:0;padding:4px 0;flex:1;min-height:0}
  html.haff-mobile-mode body.hbc-preparing .formation-workspace>#prep-synergies{display:none!important}
  html.haff-mobile-mode body.hbc-preparing .squad-stage{grid-area:1/1;min-height:0;padding-right:2px;overflow-y:auto;overscroll-behavior:contain}
  html.haff-mobile-mode body.hbc-preparing .board-heading{position:sticky;top:0;z-index:3;height:24px;padding:1px 5px;background:#0e1915eF;backdrop-filter:blur(8px)}
  html.haff-mobile-mode body.hbc-preparing .board-heading h2{font-size:11px}
  html.haff-mobile-mode body.hbc-preparing .board-heading>span{font-size:9px}
  html.haff-mobile-mode body.hbc-preparing .formation-row{gap:6px}
  html.haff-mobile-mode body.hbc-preparing #squad>.formation-cell,html.haff-mobile-mode body.hbc-preparing #rear-squad>.formation-cell{height:152px}
  html.haff-mobile-mode body.hbc-preparing #prep-view :is(#squad,#rear-squad) .operator-piece{--seat-slot:24px}
  html.haff-mobile-mode body.hbc-preparing .bench-cell{height:76px}
  html.haff-mobile-mode body.hbc-preparing .bench-heading{margin-top:5px;padding:5px 0}
  html.haff-mobile-mode body.hbc-preparing .deploy-bar{height:48px;min-height:48px;padding:5px 8px calc(5px + var(--hm-safe-bottom));gap:8px}
  html.haff-mobile-mode body.hbc-preparing .deploy-button{min-width:124px;min-height:38px;font-size:13px}
  html.haff-mobile-mode body.hbc-preparing .deploy-readiness>div>span{font-size:10px}
  html.haff-mobile-mode body.hbc-preparing .difficulty{display:none}
  html.haff-mobile-mode body.hbc-preparing #hbc-shop:not([hidden]){position:fixed;z-index:90;inset:calc(40px + var(--hm-safe-top)) max(7px,var(--hm-safe-right)) calc(50px + var(--hm-safe-bottom)) max(7px,var(--hm-safe-left));overflow:auto;margin:0;padding:10px!important;border:1px solid #719178;background:#0c1713f7;box-shadow:0 18px 50px #000b}
  html.haff-mobile-mode body.hbc-preparing #hbc-shop .campaign-shop{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity}
  html.haff-mobile-mode body.hbc-preparing #hbc-shop .market-card{flex:0 0 190px;height:auto;min-height:178px;scroll-snap-align:start}
  html.haff-mobile-mode body.hbc-preparing.hbc-inspector-open .formation-workspace>.formation-inspector{display:block!important;position:fixed;z-index:100;top:calc(40px + var(--hm-safe-top));right:max(7px,var(--hm-safe-right));bottom:calc(50px + var(--hm-safe-bottom));width:min(380px,72vw);overflow:auto;padding:10px!important;border:1px solid #779a83;background:#122019fa;box-shadow:-18px 0 50px #000b}
  html.haff-mobile-mode body.hbc-preparing.hbc-inspector-open .hbc-panel-close{min-height:40px}

  /* Battle: reserve most of the short viewport for the battlefield. */
  html.haff-mobile-mode #battle-view:not([hidden]){padding:calc(5px + var(--hm-safe-top)) max(6px,var(--hm-safe-right)) calc(4px + var(--hm-safe-bottom)) max(6px,var(--hm-safe-left))}
  html.haff-mobile-mode #battle-view>.battle-shell{grid-template-columns:minmax(0,1fr) 80px;grid-template-rows:36px minmax(0,1fr) 108px 16px 32px;gap:0 5px}
  html.haff-mobile-mode #battle-view[data-direct-targeting]>.battle-shell{grid-template-rows:36px minmax(0,1fr) 88px 16px 32px}
  html.haff-mobile-mode #battle-view[data-damage-ranking=on]>.battle-shell{grid-template-columns:minmax(0,1fr) 96px}
  html.haff-mobile-mode #battle-view .battle-toolbar{position:relative;z-index:4;padding:0 0 4px;gap:6px}
  html.haff-mobile-mode #battle-view .battle-status{font-size:11px;gap:5px;min-width:0;overflow:hidden}
  html.haff-mobile-mode #battle-view .battle-status span,html.haff-mobile-mode #battle-view .battle-status b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.haff-mobile-mode #battle-view .controls{gap:4px;flex-wrap:nowrap}
  html.haff-mobile-mode #battle-view .controls fieldset{gap:2px}
  html.haff-mobile-mode #battle-view .controls legend{display:none}
  html.haff-mobile-mode #battle-view .controls button{min-height:34px;padding:4px 8px;font-size:11px}
  html.haff-mobile-mode #battle-view .controls .haff-ui-toggle-battle{display:block;min-width:58px;border-color:#668061}
  html.haff-mobile-mode #battle-view .turn-strip{padding:7px 0;gap:5px}
  html.haff-mobile-mode #battle-view .strip-label{font-size:9px;letter-spacing:0}
  html.haff-mobile-mode #battle-view .turn-chip{padding:3px;gap:3px;min-height:34px}
  html.haff-mobile-mode #battle-view .turn-chip img{width:22px;height:27px}
  html.haff-mobile-mode #battle-view .turn-chip span{font-size:10px}
  html.haff-mobile-mode #battle-view .turn-chip small{display:none}
  html.haff-mobile-mode #battle-view .turn-chip:nth-child(n+5){display:none}
  html.haff-mobile-mode #battle-view #action-panel{padding:4px 6px;grid-template-rows:16px 45px 17px 24px;gap:2px}
  html.haff-mobile-mode #battle-view[data-direct-targeting] #action-panel{grid-template-rows:16px 45px 17px}
  html.haff-mobile-mode #battle-view #skill-options{gap:5px}
  html.haff-mobile-mode #battle-view .skill-option{height:45px;padding:3px 6px;gap:1px}
  html.haff-mobile-mode #battle-view .skill-option>strong{font-size:12px}
  html.haff-mobile-mode #battle-view .skill-option>small{font-size:8px}
  html.haff-mobile-mode #battle-view .decision-heading h2{font-size:11px}
  html.haff-mobile-mode #battle-view .decision-heading label{font-size:9px}
  html.haff-mobile-mode #battle-view .decision-heading progress{display:none}
  html.haff-mobile-mode #battle-view .hb-skill-note{font-size:10px}
  html.haff-mobile-mode #battle-view .hb-skill-note button{min-height:26px;font-size:10px}
  html.haff-mobile-mode #battle-view #target-row{gap:4px}
  html.haff-mobile-mode #battle-view .target-option{min-height:28px;font-size:10px;padding:3px 5px}
  html.haff-mobile-mode #battle-view .decision-buttons button{min-height:30px;padding:4px 8px;font-size:10px}
  html.haff-mobile-mode #battle-view .action-caption{left:12px;top:48px;max-width:calc(100% - 126px);padding:3px 6px;font-size:10px}
  html.haff-mobile-mode #battle-view #rear-support{padding:1px 0;font-size:9px}
  html.haff-mobile-mode #battle-view .rear-support-unit{font-size:9px}
  html.haff-mobile-mode #battle-view .command-bar{font-size:10px;gap:6px}
  html.haff-mobile-mode #battle-view .command-bar button{min-height:32px;padding:4px 8px;font-size:10px}
  html.haff-mobile-mode #battle-view .team-vitals{gap:8px;font-size:10px}
  html.haff-mobile-mode #battle-view .hr-damage{--hr-row-height:31px;padding-bottom:5px}
  html.haff-mobile-mode #battle-view .hr-heading{margin-bottom:3px}
  html.haff-mobile-mode #battle-view .hr-heading h2{font-size:10px}
  html.haff-mobile-mode #battle-view .hr-heading .hr-close{min-height:25px;font-size:9px;padding:2px 4px}
  html.haff-mobile-mode #battle-view .hr-total{margin-bottom:3px;font-size:9px}
  html.haff-mobile-mode #battle-view .hr-total strong{font-size:13px}
  html.haff-mobile-mode #battle-view .hr-note{display:none}
  html.haff-mobile-mode #battle-view .hr-row{grid-template-columns:10px minmax(0,1fr) auto;grid-template-rows:16px 7px;gap:1px 3px}
  html.haff-mobile-mode #battle-view .hr-portrait{display:none}
  html.haff-mobile-mode #battle-view .hr-name,html.haff-mobile-mode #battle-view .hr-amount{font-size:9px;line-height:16px}
  html.haff-mobile-mode #battle-view .hr-rank{grid-area:1/1/3/2;font-size:8px}
  html.haff-mobile-mode #battle-view .hr-name{grid-area:1/2}
  html.haff-mobile-mode #battle-view .hr-amount{grid-area:1/3}
  html.haff-mobile-mode #battle-view .hr-bar{grid-area:2/2/3/4;height:3px}
  html.haff-mobile-mode #battle-view #battlefield .target-option{min-width:44px;min-height:44px}
  html.haff-mobile-mode dialog{max-height:calc(100dvh - var(--hm-safe-top) - var(--hm-safe-bottom) - 20px);overflow:auto}
}

@media(prefers-reduced-motion:reduce){
  .haff-ui-toggle{transition:none}
}