/* Phone layout (2026-10-27, user-approved plan). Portrait phones (max-width 767px) get one screen with no page scroll:
   a thin top bar, a one-line operation strip with the catalogue button, the battlefield filling the rest, and the squad dock
   at the bottom. The selected character's card rises as a sheet above the dock and closes with its own button.
   Loaded last so these rules win over the older layered phone rules in style.css / tactical.css. */
@media(max-width:767px){
 html,body{height:100%;overflow:hidden}
 .app{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}

 /* Top bar: brand and buttons on one row, the four readouts on a second, both slim. */
 .app>.combat-header{flex:0 0 auto;width:auto;min-height:0;margin:4px 6px 0;padding:3px 6px;gap:2px 6px;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto}
 .app>.combat-header .brand-logo{width:72px}
 .app>.combat-header .header-actions{gap:4px}
 .app>.combat-header .header-actions button{width:36px;min-width:36px;height:36px;min-height:36px}
 .app>.combat-header .combat-metrics{gap:4px}
 .app>.combat-header .combat-metrics .hud-item{min-height:0;padding:2px 6px}

 /* Workspace: strip on top, battlefield takes the rest. */
 .workspace{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:4px 6px 0;overflow:hidden}
 #operation-mount{order:0;flex:0 0 auto;display:flex;flex-direction:row;align-items:stretch;gap:4px;max-height:none;overflow:visible;padding:0;background:none}
 .board-column{order:1;flex:1 1 auto;min-height:0;height:auto}
 .board-column .battle-stage{flex:1 1 auto;min-height:0}
 .board-column .command-dock{position:relative;bottom:auto;flex:0 0 auto;min-height:0}

 /* Operation strip: wave, next-wave timer and the heretic in one row; heading and notes hidden. */
 #operation-panel{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:6px;padding:5px 8px}
 #operation-panel .mission-heading{display:none}
 #operation-panel .mission-wave{padding:0!important;border:0;gap:4px}
 #operation-panel .mission-wave>span:first-child{font-size:12px!important}
 #operation-panel .mission-wave strong{font-size:22px!important;gap:2px}
 #operation-panel .mission-wave strong small{font-size:12px!important}
 #operation-panel #wave-phase{display:none}
 #operation-panel :is(.wave-timer,.heretic-status){margin:0!important;padding:3px 6px 4px!important;min-width:0}
 #operation-panel :is(.mission-clock,.heretic-row){font-size:10px!important;gap:4px}
 #operation-panel .mission-clock strong{font-size:15px!important}
 #operation-panel .heretic-row strong{font-size:10px!important;white-space:nowrap}
 #operation-panel :is(#next-wave-progress,#heretic-progress){margin-top:3px!important;height:3px!important}
 #operation-panel #heretic-note{display:none}
 #operation-panel .heretic-status[hidden]{display:none}

 /* Character panel: only the catalogue button stays in the strip; the squad overview is left out on phones. */
 #operation-mount .character-panel{flex:0 0 auto;display:flex;padding:0;border:0;background:none;box-shadow:none}
 #operation-mount .character-panel>#catalog-open{width:64px;min-width:64px;min-height:0;height:auto;padding:4px;flex-direction:column;justify-content:center;font-size:11px;line-height:1.2}
 #operation-mount .character-panel>#catalog-open b{font-size:9px}
 #squad-overview{display:none!important}

 /* Selected character: a sheet above the dock. */
 .character-panel .selected-row:not([hidden]){position:fixed;z-index:30;left:6px;right:6px;bottom:var(--phone-dock,160px);max-height:min(46dvh,360px);overflow-y:auto;margin:0;padding:8px;border-radius:6px;background:#141211F2;box-shadow:0 -2px 0 #000,0 0 0 1px #3A3532}
 .character-panel .selected-row .unit-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 10px;align-items:start;margin:0;padding:0;border:0;background:none}
 .character-panel .selected-row .portrait.profile-frame{grid-column:1;grid-row:1/span 3;width:96px!important;margin:0}
 .character-panel .selected-row .portrait.profile-frame.options-open{grid-column:1/-1;grid-row:auto;width:100%!important}
 #unit-sheet-close{display:block;position:sticky;top:0;float:right;z-index:2;min-width:44px;min-height:32px;margin:-4px -4px 4px 4px;padding:2px 10px;font-size:12px}
 /* H frame on phones: a 3px band, and the character panel is just the catalogue button (same-weight selectors, later file wins). */
 html[data-frame=h] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog,.app>.combat-header){border-width:3px}
 html[data-frame=h] #operation-mount .character-panel{border:0;background:none;box-shadow:none;padding:0}
 html[data-frame=h] #operation-mount .mission-card{padding:5px 8px}
 #operation-panel>*{min-width:0;overflow:hidden}
 #operation-panel .heretic-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

 /* Top bar readouts: icons and numbers only. */
 .app>.combat-header .combat-metrics .hud-label{font-size:0;gap:0}
 .app>.combat-header .combat-metrics .hud-label svg,.app>.combat-header .combat-metrics .hud-icon{width:16px;height:16px}
 .app>.combat-header .combat-metrics .hud-item{display:flex;align-items:center;justify-content:center;gap:4px}
 .app>.combat-header .combat-metrics .hud-item strong{font-size:14px}
 .app>.combat-header .combat-metrics{grid-template-columns:minmax(0,67fr) minmax(0,63fr) minmax(0,67fr) minmax(0,60fr)}
 .app>.combat-header .combat-metrics .hud-item{padding:2px 5px}

 /* Compact sheet: 64px portrait, name, the three stats in one row, buttons side by side. */
 .character-panel .selected-row:not([hidden]){max-height:min(52dvh,380px);padding:6px 8px}
 .character-panel .selected-row .unit-card{grid-template-columns:64px minmax(0,1fr);gap:4px 8px}
 .character-panel .selected-row .portrait.profile-frame{width:64px!important;grid-row:1}
 .character-panel .selected-row .unit-info{margin:0;padding:0}
 .character-panel .selected-row .unit-identity{min-height:0;margin:0 52px 4px 0}
 .character-panel .selected-row #unit-meta{display:flex;gap:10px;margin:0;padding:0;border:0}
 .character-panel .selected-row #unit-meta>div{flex:0 0 auto;min-height:0;padding:0;border:0;gap:3px}
 .character-panel .selected-row #unit-meta dt{font-size:0;gap:0}
 .character-panel .selected-row #unit-meta dd{font-size:14px}
 .character-panel .selected-row .unit-info{display:flex;flex-direction:column}
 .character-panel .selected-row :is(#unit-option-action,#unit-portal,#unit-sell){margin:6px 0 0}
 .character-panel .selected-row #unit-option-action #unit-details-open,.character-panel .selected-row :is(#unit-portal,#unit-sell){height:44px;min-height:44px}
 #unit-sheet-close{position:absolute;top:6px;right:8px;float:none;margin:0}
 /* The strip must shrink so the catalogue button keeps its place; the three action buttons sit side by side. */
 #operation-mount #operation-panel{flex:1 1 0!important;width:auto!important;min-width:0!important}
 .character-panel .selected-row .unit-info{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
 .character-panel .selected-row .unit-info>:is(.unit-identity,#unit-meta){flex:0 0 100%}
 .character-panel .selected-row .unit-info>:is(#unit-option-action,#unit-portal,#unit-sell){flex:1 1 0;margin:0;min-width:0}
 /* Strip boxes show the time and the heretic's health only; the wave timer label is dropped to save width. */
 #operation-panel .mission-clock>span{display:none}
 #operation-panel .mission-clock{justify-content:center}
 #operation-panel .heretic-row{flex-wrap:nowrap}
 #operation-panel .heretic-row strong{display:none}
 #operation-panel .heretic-row span{max-width:none;color:#F0DCFF;font-weight:700}
 html[data-frame=h] #operation-mount .character-panel>#catalog-open{border:1px solid #0A0909;border-bottom:2px solid #C8502A;border-radius:3px;background:linear-gradient(180deg,#2A2726,#171514);color:#FFB27A;box-shadow:inset 0 1px 0 #ffffff12}
 html[data-frame=h] #operation-mount .character-panel>#catalog-open b{color:#C9B7A8}
 .character-panel .selected-row #unit-option-action #unit-details-open{width:100%;padding:0 4px;font-size:12px}
 .character-panel .selected-row :is(#unit-portal,#unit-sell){padding:0 4px;font-size:12px;white-space:nowrap}
 #unit-sheet-close{z-index:8}
 .character-panel .selected-row .legend-modules{padding-right:54px}
 /* Dock: one row — the squad strip (swipe sideways) and the three action buttons at the same height; the heading row is dropped. */
 .board-column .command-dock{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:stretch;gap:6px;padding:6px}
 .board-column .command-dock .roster-heading{display:none}
 .board-column .command-dock #roster-panel{grid-column:1;grid-row:1;min-height:0;height:auto}
 .board-column .command-dock #roster-list{max-height:62px;min-height:62px}
 .board-column .command-dock .command-actions{grid-column:2;grid-row:1;display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:62px;gap:4px;height:auto;min-height:0}
 .board-column .command-dock .command-actions>.command-button{min-height:0;height:62px;padding:2px;font-size:10px;line-height:1.15}
 .board-column .command-dock .command-actions .command-icon{width:18px;height:18px}
 .board-column .command-dock .command-actions .command-cost{font-size:9px}
 /* Strip: a little shorter. */
 html[data-frame=h] #operation-mount .mission-card{padding:3px 8px}
 #operation-panel .mission-wave strong{font-size:20px!important}
}
@media(max-width:360px){.board-column .command-dock .command-actions>.command-button{font-size:9px;letter-spacing:-.02em}.app>.combat-header .combat-metrics .hud-item strong{font-size:12px}.app>.combat-header .combat-metrics .hud-item{padding:2px 3px;gap:3px}}
@media(min-width:768px) and (min-height:500px){#unit-sheet-close{display:none}}
/* Phones held sideways (2026-10-27): short and wide screens. The field takes the left side at full height; a 220px column on the
   right holds the operation strip, the catalogue button, the squad and the three action buttons. No page scroll. */
@media(max-height:499px) and (orientation:landscape){
 html,body{height:100%;overflow:hidden}
 .app{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
 .app>.combat-header{flex:0 0 auto;width:auto;min-height:0;margin:3px 6px 0;padding:2px 8px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;gap:8px}
 .app>.combat-header .game-brand{grid-column:1;grid-row:1}
 .app>.combat-header .combat-metrics{grid-column:2;grid-row:1;gap:4px}
 .app>.combat-header .header-actions{grid-column:3;grid-row:1}
 .app>.combat-header .combat-metrics .hud-item{min-height:0;padding:2px 6px}
 .app>.combat-header .header-actions button{width:34px;min-width:34px;height:34px;min-height:34px}
 html[data-frame=h] :is(#operation-mount .mission-card,#operation-mount .character-panel,.squad-column,.board-column,.command-dock,dialog,.app>.combat-header){border-width:3px}
 .workspace{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:auto minmax(0,1fr);gap:4px;padding:4px 6px 4px;overflow:hidden}
 .board-column{display:contents}
 .intel-columns{display:contents!important}
 .board-column .battle-stage .arena-slot{flex:1 1 auto;height:auto;min-height:0}
 .app>.combat-header{position:relative;top:auto}
 .board-column .battle-stage{grid-column:1;grid-row:1/3;min-height:0;height:auto}
 #operation-mount{grid-column:2;grid-row:1;display:flex!important;flex-direction:column;gap:4px;max-height:none;overflow:visible;padding:0;background:none}
 .board-column .command-dock{grid-column:2;grid-row:2;position:relative;bottom:auto;min-height:0;display:flex;flex-direction:column;gap:4px;padding:6px;overflow:hidden}
 .board-column .command-dock .roster-heading{display:none}
 .board-column .command-dock #roster-panel{flex:1 1 auto;min-height:0;height:auto;overflow:auto}
 .board-column .command-dock #roster-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));grid-auto-flow:row;grid-auto-rows:52px;max-height:none;min-height:0;overflow:visible}
 .board-column .command-dock .command-actions{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:52px;gap:4px;height:auto;min-height:0}
 .board-column .command-dock .command-actions>.command-button{min-height:0;height:52px;padding:2px;font-size:10px;line-height:1.15}
 .board-column .command-dock .command-actions .command-icon{width:16px;height:16px}
 #operation-panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 6px;align-items:center;padding:4px 8px}
 #operation-panel .mission-heading,#operation-panel #wave-phase,#operation-panel #heretic-note{display:none}
 #operation-panel .mission-wave{padding:0!important;border:0;grid-column:1;grid-row:1}
 #operation-panel .mission-wave strong{font-size:18px!important}
 #operation-panel .mission-wave>span:first-child,#operation-panel .mission-wave strong small{font-size:11px!important}
 #operation-panel .wave-timer{grid-column:2;grid-row:1}
 #operation-panel .heretic-status{grid-column:1/-1;grid-row:2}
 #operation-panel :is(.wave-timer,.heretic-status){margin:0!important;padding:2px 6px 3px!important}
 #operation-panel .mission-clock>span{display:none}
 #operation-panel .mission-clock strong{font-size:14px!important}
 #operation-panel .heretic-row{font-size:10px!important}
 #operation-panel .heretic-row strong{font-size:10px!important}
 #operation-mount .character-panel{display:block;padding:0;border:0;background:none;box-shadow:none}
 html[data-frame=h] #operation-mount .character-panel{border:0;background:none;box-shadow:none;padding:0}
 #operation-mount .character-panel>#catalog-open{display:flex!important;width:100%;min-height:32px;height:32px;padding:2px 8px;flex-direction:row;gap:6px;font-size:12px}
 #squad-overview{display:none!important}
 .character-panel .selected-row:not([hidden]){position:fixed;z-index:30;left:8px;right:236px;width:auto;bottom:8px;max-height:calc(100dvh - 70px);overflow-y:auto;margin:0;padding:6px 8px;border-radius:6px;background:#141211F2;box-shadow:0 0 0 1px #3A3532}
 .character-panel .selected-row .unit-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 8px;margin:0;padding:0;border:0;background:none}
 .character-panel .selected-row .portrait.profile-frame{width:56px!important;margin:0}
 .character-panel .selected-row .portrait.profile-frame.options-open{grid-column:1/-1;width:min(100%,260px)!important}
 .character-panel .selected-row .unit-info{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;margin:0;padding:0}
 .character-panel .selected-row .unit-info>:is(.unit-identity,#unit-meta){flex:0 0 100%}
 .character-panel .selected-row .unit-identity{min-height:0;margin:0 52px 0 0}
 .character-panel .selected-row #unit-meta{display:flex;gap:10px;margin:0;padding:0;border:0}
 .character-panel .selected-row #unit-meta>div{flex:0 0 auto;min-height:0;padding:0;border:0;gap:3px}
 .character-panel .selected-row #unit-meta dt{font-size:0;gap:0}
 .character-panel .selected-row .unit-info>:is(#unit-option-action,#unit-portal,#unit-sell){flex:1 1 0;margin:0;min-width:0}
 .character-panel .selected-row #unit-option-action #unit-details-open,.character-panel .selected-row :is(#unit-portal,#unit-sell){height:44px;min-height:44px;width:100%;padding:0 4px;font-size:12px;white-space:nowrap}
 #unit-sheet-close{display:block;position:absolute;top:6px;right:8px;z-index:8;min-width:44px;min-height:32px;margin:0;padding:2px 10px;font-size:12px}
}
/* Phone polish (2026-10-27, user feedback after trying it): smaller corner rings, a thinner top bar, a little room between the
   bands and the cards inside them, and a catalogue whose close button, search and grade tabs stay put while the list scrolls. */
@media(max-width:767px),(max-height:499px) and (orientation:landscape){
 html[data-frame=h]{--fh-core:#FFE2C8 0 1px,#FF7A3A 1.4px 2px,#B5381A 2.4px 3px,#2A2523 3.4px 4.2px,#7A6A5E 4.6px 5.2px,#151312 5.6px,transparent 6.2px;
  --fh-corners:radial-gradient(circle at 5px 5px,var(--fh-core)),radial-gradient(circle at calc(100% - 5px) 5px,var(--fh-core)),radial-gradient(circle at 5px calc(100% - 5px),var(--fh-core)),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),var(--fh-core))}
 html[data-frame=h] .battle-stage::after{background:radial-gradient(circle at 2px 2px,var(--fh-core)),radial-gradient(circle at calc(100% - 2px) 2px,var(--fh-core));background-repeat:no-repeat}
 html[data-frame=h] .board-column .command-dock::after{background:radial-gradient(circle at 2px calc(100% - 2px),var(--fh-core)),radial-gradient(circle at calc(100% - 2px) calc(100% - 2px),var(--fh-core));background-repeat:no-repeat}
 .app>.combat-header{padding:2px 12px}
 .app>.combat-header .brand-logo{width:60px}
 .app>.combat-header .header-actions :is(#speed-top,#pause-top,#sound-top){width:30px;min-width:30px;height:30px;min-height:30px;padding:0}
 .app>.combat-header .header-actions button svg{width:16px;height:16px}
 .app>.combat-header .combat-metrics{margin:0 0 2px}
 html[data-frame=h] #operation-mount .mission-card{padding:5px 12px}
 #catalog-dialog[open]{display:flex;flex-direction:column;overflow:hidden;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}
 #catalog-dialog #mobile-catalog-mount{flex:1 1 auto;min-height:0;display:flex}
 #catalog-dialog #catalog-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
 #catalog-dialog #catalog-panel>:is(.side-heading,#catalog-search,#catalog-filters){flex:0 0 auto}
 #catalog-dialog #catalog-panel #recipes{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 #catalog-dialog #catalog-panel #recipes{grid-auto-rows:max-content;align-content:start}
 #catalog-dialog #catalog-panel #recipes>*{flex-shrink:0}
 #catalog-dialog>.dialog-heading{z-index:30}
 #catalog-dialog #catalog-close{z-index:20}
 /* The three dock buttons share one size (the start button carried its own width). */
 .board-column .command-dock .command-actions>#start{width:auto;min-width:0;max-width:none;height:62px;min-height:0;max-height:62px}
}
/* Home-screen app (2026-10-27): with the status bar drawn over the page, keep the game clear of the notch and home indicator. */
@media(max-width:767px),(max-height:499px) and (orientation:landscape){.app{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}}
@media(max-height:499px) and (orientation:landscape){.board-column .command-dock .command-actions>#start{height:52px;max-height:52px}}
/* Sell button (2026-10-27, user): small, at the end of the stats line beside range; effect options and portal stay on the row below. */
@media(max-width:767px),(max-height:499px) and (orientation:landscape){
 .character-panel .selected-row .unit-info>.unit-identity{order:0}
 .character-panel .selected-row .unit-info>#unit-meta{order:1;flex:1 1 130px;min-width:0;align-self:center;overflow:hidden}
 .character-panel .selected-row .unit-info>#unit-sell{order:2;flex:0 0 auto;width:auto;height:32px;min-height:32px;margin:0;padding:0 10px;font-size:12px;align-self:center}
 .character-panel .selected-row .unit-info>:is(#unit-option-action,#unit-portal){order:3;flex:1 1 40%}
}
@media(max-width:360px){.character-panel .selected-row #unit-meta{gap:5px}.character-panel .selected-row #unit-meta>div{gap:1px}.character-panel .selected-row #unit-meta dd{font-size:12px}.character-panel .selected-row #unit-meta svg{width:14px;height:14px}.character-panel .selected-row .unit-info>#unit-sell{padding:0 6px;font-size:11px}}
@media(max-height:499px) and (orientation:landscape){.character-panel .selected-row .unit-info>#unit-meta{flex-basis:50%}}
/* No landscape on phones (2026-10-27, user): a phone held sideways sees only this notice and the battle pauses (game.js).
   Tablets, PCs and unfolded foldables are tall enough and keep their layouts. */
.rotate-notice{display:none}
@media(orientation:landscape) and (max-height:499px) and (pointer:coarse){
 .app{visibility:hidden}
 .rotate-notice{display:flex;position:fixed;inset:0;z-index:2000;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;background:#121111;color:#EADFD6;text-align:center}
 .rotate-notice svg{width:56px;height:56px;color:#FF7A3A}
 .rotate-notice p{margin:0;font-size:18px;font-weight:800}
 .rotate-notice small{font-size:12px;color:#9C918A}
}