/* New demo on phones: compact header, 44px touch targets, scrollable hand that
   never overlaps, landscape fit and notch safe areas. Loaded last. */
html,body{overflow-x:hidden}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.app-header{padding-top:max(.5rem,env(safe-area-inset-top))}

/* ---------- Tap-play bar (html.tap-play): the selected card's full text ---------- */
.arena-top .tap-bar{flex:0 0 100%;box-sizing:border-box;max-width:860px;margin:2px auto 0;padding:6px 8px 6px 10px;border:1px solid #f0c24b99;border-left:4px solid #f0c24b;border-radius:6px;background:#0b141df5;box-shadow:0 4px 14px #0008;color:#e8eef4;text-align:left;font-size:14px;line-height:1.45}
.arena-top .tap-bar.is-aiming{border-color:#ff9b5a;border-left-color:#ff9b5a}
.tap-bar-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.tap-bar-head b{font-size:16px;color:#ffd77a}
.tap-bar-head span{font-size:12px;color:#a9bccb}
.tap-bar-text{margin:3px 0 4px;font-size:14px;color:#f4f7fa;overflow-wrap:anywhere}
.tap-bar-foot{display:flex;align-items:center;gap:6px}
.tap-bar-foot small{flex:1 1 auto;min-width:0;font-size:12px;color:#a8e59a}
.tap-bar-foot small.is-blocked{color:#ff9b8a}
#game-root .arena .tap-bar .btn{flex:none;min-height:44px;min-width:60px;padding:0 12px!important;font-size:14px!important}
html.tap-play #game-root .battle .hand-area .hand-card.shared-card.selected{z-index:3}

.app-header .lbl-short{display:none}
/* Deployables sit in the status row (the shared rule pins them absolutely for Wa). */
.arena .status-row{flex-wrap:wrap}
.arena .status-row .deploy-row{position:static;flex-wrap:wrap}
.arena .status-badge{white-space:nowrap}
/* Notices are information only: never block a tap, never sit on the hand. */
.notice{pointer-events:none}
@media (max-width:720px),(orientation:landscape) and (max-height:500px){
  .notice{top:calc(58px + env(safe-area-inset-top));bottom:auto!important;left:12px;right:12px!important;margin:0 auto;max-width:520px;box-sizing:border-box;padding:.55rem .9rem!important;font-size:14px;line-height:1.4;text-align:center}
}
@media (max-width:560px){
  .app-header .lbl-full{display:none}.app-header .lbl-short{display:inline}
}

/* ---------- Portrait phone ---------- */
@media (max-width:720px){
  /* One header row: the title lives in the tab, the buttons get the width. */
  .app-header{flex-direction:row!important;align-items:center;gap:6px!important;padding:max(6px,env(safe-area-inset-top)) 8px 6px!important}
  .app-header .app-title{font-size:16px;white-space:nowrap}
  .app-header .app-buttons{flex:1;display:flex;justify-content:flex-end;gap:4px;flex-wrap:nowrap}
  .app-header .app-buttons .btn{min-height:44px;padding:0 10px!important;font-size:13px!important;white-space:nowrap}
  .app-header .sfx-toggle{width:44px;height:44px;flex:none}
  .run-strip .strip-label{font-size:12px}
  .run-strip button.supply-slot{min-width:44px;min-height:44px}
  .guide-strip{font-size:12px!important}
  .guide-dismiss{min-height:44px;min-width:60px;font-size:13px!important}

  /* Badges at full size (the old .85 scale drew their labels at ~10px). */
  #game-root .arena .status-badge{transform:none;margin:0;padding:1px 5px 1px 3px}
  #game-root .arena .status-badge .status-svg{width:15px;height:15px}
  #game-root .arena .status-badge b{font-size:13px}
  #game-root .arena .enemy-zone .status-row{justify-content:center;gap:3px}
  /* Enemy life: bar on its own line, numbers under it, so neighbours never touch. */
  #game-root .arena .enemy-hp{flex-wrap:wrap;justify-content:center;gap:1px 0}
  #game-root .arena .enemy-hp .hp-bar{flex:1 1 100%}
  #game-root .arena .ally-hud .rm-incoming{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.35}
  /* Battle text ≥12px. */
  .arena-top .battlefield-tag,.arena-hint{font-size:12px!important}
  #game-root .arena .enemy-unit .intent{font-size:12px!important}
  #game-root .arena .enemy-name{font-size:12px!important}
  .arena .enemy-hp,.arena .enemy-hud .trait-tag{font-size:12px}
  .energy-orb small{font-size:12px!important;margin-bottom:4px}
  .energy-orb{width:44px!important;height:44px!important}
  #game-root .arena .ally-hud{font-size:12px}
  .stance-name{font-size:12px!important}
  #game-root .arena #btn-stance{min-height:44px;min-width:64px;padding:0 8px!important;font-size:13px!important}
  #game-root .arena .ops-actions .btn{min-height:46px}
  #game-root .arena .ops-actions .btn small{display:none}
  #game-root .arena .pile-btn{height:46px;min-width:54px;font-size:12px}
  #game-root .arena .pile-btn span{font-size:12px}

  /* Ally HUD as a compact 2×2 grid in a wider column instead of a tall wrapped stack. */
  #game-root .arena .arena-floor{grid-template-columns:44% minmax(0,1fr)!important}
  #game-root .arena .ally-hud{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 6px}
  #game-root .arena .ally-hud .ally-vitals{min-width:0}
  #game-root .arena .ally-hud .value,#game-root .arena .ally-hud .block-value{white-space:nowrap}
  /* The arena takes the spare height so the hand sits at the bottom, under the thumb. */
  #game-root .battle.arena>.arena-floor{flex:1 0 auto}
  /* Never squeeze the arena into the hand/buttons: on short phones the page scrolls instead. */
  #game-root .battle.arena{max-height:none!important}
  #game-root .battle.arena>.arena-top,#game-root .battle.arena>.arena-hud{flex-shrink:0}
  #game-root .battle.arena>.arena-hud{margin-top:auto}
  /* Hand: a scrolling row; three cards in view, never covering cost or name. */
  #game-root .arena .hand-area{min-height:0!important;padding:18px 8px max(10px,env(safe-area-inset-bottom))!important;gap:6px!important;touch-action:pan-x}
  #game-root .battle .hand-area .hand-card.shared-card{flex:0 0 118px;width:118px;min-width:118px;height:176px}
  #game-root .battle .hand-area .hand-card.shared-card.selected{transform:translateY(-12px)}
  #game-root .battle .hand-area .tc-text,#game-root .battle .hand-area .tc-text *{font-size:12px!important;line-height:1.3}
  .tc-text,.tc-text .kw{font-size:12px}
}
@media (max-width:560px){
  .app-header .app-title{display:none}
  .app-header .app-buttons{justify-content:space-between}
  .app-header .app-buttons .btn{flex:1 1 auto}
}
@media (max-width:720px) and (orientation:portrait){
  /* Smaller art strip so three lines of card text fit the hand card. */
  #game-root .battle .hand-area .tc-art{flex:0 0 34px;height:34px;min-height:0}
}
@media (max-width:380px){
  #game-root .arena .ally-hud .value{white-space:normal}
  #game-root .arena .ally-hud{padding-right:2px}
  #game-root .battle .hand-area .hand-card.shared-card{flex-basis:110px;width:110px;min-width:110px;height:166px}
  .app-header .app-buttons .btn{padding:0 6px!important}
}

/* Short portrait phones (e.g. 375×667): smaller figures so the hand stays on screen. */
@media (max-width:720px) and (max-height:740px){
  #game-root .arena .fighter-figure{height:84px!important}
  #game-root .arena .enemy-figure{height:84px!important}
  .enemy-zone[data-count="2"] .enemy-figure,.enemy-zone[data-count="3"] .enemy-figure{height:76px!important}
  #game-root .battle .hand-area .hand-card.shared-card{height:160px}
  #game-root .arena .hand-area{padding-top:14px!important}
}

/* ---------- Landscape phone (e.g. 844×390): battle fits without page scroll ---------- */
@media (orientation:landscape) and (max-height:500px){
  .app-header{flex-direction:row!important;align-items:center;gap:8px;padding:3px max(10px,env(safe-area-inset-right)) 3px max(10px,env(safe-area-inset-left))!important;min-height:0}
  .app-header .app-title{font-size:15px}
  .app-header .app-buttons .btn{min-height:44px;padding:0 10px!important;font-size:13px!important}
  .app-header .sfx-toggle{width:44px;height:44px}
  body:has(.battle.arena) #run-strip,body:has(.battle.arena) .guide-strip{display:none}
  /* One grid: arena top-left, ally status top-right, hand bottom-left, actions
     bottom-right next to the thumb. The floor/HUD wrappers dissolve into it. */
  #game-root .battle.arena,#game-root:has(> .guide-strip) .battle.arena{display:grid!important;flex:none!important;grid-template-columns:64px 140px minmax(0,1fr) 224px!important;grid-template-rows:auto minmax(0,1fr) auto!important;height:calc(100dvh - 51px - env(safe-area-inset-top))!important;max-height:none!important;min-height:0!important;padding:0 max(6px,env(safe-area-inset-right)) 0 max(6px,env(safe-area-inset-left))!important;gap:0 8px;overflow:hidden!important}
  #game-root .battle.arena>.arena-floor,#game-root .battle.arena>.arena-hud,#game-root .arena .ally-zone{display:contents!important}
  #game-root .battle.arena>.arena-top{grid-column:1 / 3!important;grid-row:1!important;padding:2px 0;min-height:0}
  #game-root .arena .ally-unit{grid-column:1 / 3!important;grid-row:2!important;align-self:end;min-height:0}
  #game-root .arena .enemy-zone{grid-column:3!important;grid-row:1 / 3!important;align-self:end;min-height:0}
  #game-root .arena .ally-hud{grid-column:4!important;grid-row:1 / 3!important;align-self:start;margin-top:4px;padding:4px 6px;display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 8px}
  #game-root .arena .ally-hud .ally-vitals{min-width:0}
  #game-root .arena .ally-hud .value,#game-root .arena .ally-hud .block-value{white-space:nowrap}
  #game-root .arena .hud-left{grid-column:1!important;grid-row:3!important;align-self:center}
  #game-root .arena .hand-area{grid-column:2 / 4!important;grid-row:3!important;display:flex!important;flex-wrap:nowrap!important;gap:6px;overflow-x:auto;overflow-y:hidden;height:auto;min-height:0!important;padding:10px 2px max(4px,env(safe-area-inset-bottom))!important;touch-action:pan-x;align-items:flex-start;justify-content:flex-start!important}
  #game-root .arena .hud-right{grid-column:4!important;grid-row:3!important;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:4px 0 max(4px,env(safe-area-inset-bottom))}
  #game-root .arena .ops-actions{display:flex;flex-direction:row;gap:6px}
  #game-root .arena .ops-actions .btn{flex:1;min-height:44px;font-size:14px!important;padding:4px!important}
  #game-root .arena .ops-actions .btn small{display:none}
  #game-root .arena .hud-piles{display:flex;gap:6px}
  #game-root .arena .pile-btn{height:46px;width:auto;min-width:56px;flex:1;font-size:12px}
  #game-root .arena .hud-left .pile-btn{width:60px}
  #game-root .arena .pile-btn span{font-size:12px}
  #game-root .arena .ally-figure{height:92px!important}
  #game-root .arena .enemy-figure{height:70px!important}
  .enemy-zone[data-count="2"] .enemy-figure,.enemy-zone[data-count="3"] .enemy-figure{height:70px!important}
  #game-root .battle .hand-area .hand-card.shared-card{position:relative;left:auto;bottom:auto;flex:0 0 100px;width:100px;min-width:100px;height:138px;transform:none;scroll-snap-align:start;touch-action:pan-x}
  #game-root .battle .hand-area .hand-card.shared-card.selected{transform:translateY(-8px)}
  #game-root .battle .hand-area .tc-art{display:none}
  #game-root .arena .ally-hud .rm-incoming{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.3}
  /* Enemies fill the space above the hand; a crowded status stack scrolls inside it. */
  #game-root .arena .enemy-zone{align-self:stretch!important;align-items:flex-start!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:2px}
  #game-root .arena .enemy-figure,.enemy-zone[data-count="2"] .enemy-figure,.enemy-zone[data-count="3"] .enemy-figure{height:56px!important}
  #game-root .arena .enemy-unit .intent{white-space:normal;line-height:1.25}
  /* The short arena has no room for stacked badge labels: icon + number in a
     wrapping row (a long press or tap on the badge still explains it). */
  #game-root .arena .status-row{flex-direction:row!important;flex-wrap:wrap;justify-content:center;gap:3px;max-width:100%}
  #game-root .arena .status-badge{transform:none;margin:0;padding:1px 4px 1px 3px}
  #game-root .arena .status-badge em{display:none}
  #game-root .arena .status-badge .status-svg{width:14px;height:14px}
  #game-root .arena .status-badge b{font-size:12px}
  #game-root .arena .ally-status{max-width:212px}
  #game-root .arena .arena-turn span{display:none}
  #game-root .arena .enemy-hp{flex-wrap:wrap;justify-content:center;gap:0}
  #game-root .arena .enemy-hp .hp-bar{flex:1 1 100%}
  #game-root .battle .hand-area .tc-name{font-size:12.5px}
  #game-root .battle .hand-area .tc-text{padding:2px 3px}
  #game-root .battle .hand-area .tc-text,#game-root .battle .hand-area .tc-text *{font-size:12px!important;line-height:1.25}
  #game-root .arena .enemy-unit .intent,#game-root .arena .enemy-name,.arena .enemy-hp,.stance-name,.arena-top .battlefield-tag,.arena-hint{font-size:12px!important}
  .energy-orb{width:44px!important;height:44px!important}.energy-orb small{font-size:12px!important}
  #game-root .arena #btn-stance{min-height:44px;font-size:13px!important}
  .stance-name small,.trait-text small{font-size:12px!important}
}

/* ---------- Portrait phone combat: one fixed screen (2026-09-26) ----------
   The fight fits the viewport exactly: no page scroll, the tapped card's bar
   floats over the top of the arena instead of pushing it down, and the whole
   hand fits the width (cards overlap like a fan instead of scrolling off). */
@media (max-width:720px) and (orientation:portrait){
  body:has(#game-root .battle.arena) .guide-strip{display:none!important}
  #game-root .battle.arena{height:calc(100dvh - var(--arena-y,120px))!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;position:relative}
  #game-root .battle.arena>.arena-top{position:relative;flex:0 0 auto;min-height:26px;z-index:40}
  #game-root .battle.arena>.arena-floor{flex:1 1 0!important;min-height:0!important;overflow:hidden}
  #game-root .battle.arena>.arena-hud{flex:0 0 auto;margin-top:0}
  .arena-top .tap-bar{position:absolute;left:6px;right:6px;top:100%;margin:0!important;max-width:none;z-index:45;font-size:13px}
  .arena-top .tap-bar .tap-bar-text{margin:2px 0 3px;font-size:13px}
  #game-root .arena .tap-bar .btn{min-height:40px}
  /* Readable cards in a scrolling row; never squeeze a growing hand into overlaps. */
  #game-root .arena .hand-area{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;padding:18px 8px max(10px,env(safe-area-inset-bottom))!important;gap:8px!important;touch-action:pan-x}
  #game-root .battle .hand-area .hand-card.shared-card{flex:0 0 104px!important;width:104px!important;min-width:104px!important;height:150px!important;position:relative!important;left:auto!important;bottom:auto!important;transform:none;margin:0}
  #game-root .battle .hand-area .hand-card.shared-card+.hand-card.shared-card{margin-left:0!important}
  #game-root .battle .hand-area .hand-card.shared-card.selected{transform:translateY(-14px)!important;z-index:20!important}
  #game-root .battle .hand-area .tc-art{display:none}
}
.enemy-turn-banner{position:fixed!important;z-index:90;left:50%!important;top:34%!important;transform:translateX(-50%)!important;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:180px;padding:12px 24px;border:1px solid #e4ab74;border-radius:9px;background:#251d2bef;box-shadow:0 10px 35px #000a,0 0 28px #bd745577;color:#ffe4c2;pointer-events:none;animation:enemy-turn-in .25s ease-out}
.enemy-turn-banner strong{font-size:20px;letter-spacing:3px}.enemy-turn-banner span{font-size:12px;color:#cbb2ab}
@media (max-width:720px) and (orientation:portrait){
  /* Cards in flight look like the hand cards they become. */
  .card-pile-motion-layer .tc-art{display:none}
  .card-pile-motion-layer .tc-text,.card-pile-motion-layer .tc-text *{font-size:12px!important;line-height:1.3}
}
@media (max-width:720px) and (orientation:portrait){
  /* Ally panel: orb beside HP/布防, then the incoming line, trait and stance at full width. */
  #game-root .arena .ally-hud{grid-template-columns:auto minmax(0,1fr)!important;align-content:start}
  #game-root .arena .ally-hud .ally-vitals{display:contents!important}
  #game-root .arena .ally-hud .energy-orb{grid-row:span 2}
  #game-root .arena .ally-hud .hp-line,#game-root .arena .ally-hud .block-value{grid-column:2;min-width:0}
  #game-root .arena .ally-hud .rm-incoming,#game-root .arena .ally-hud>.trait-chip,#game-root .arena .ally-hud>.stance-chip{grid-column:1 / -1;min-width:0;max-width:100%;box-sizing:border-box}
  #game-root .arena .ally-hud .hp-line .value{white-space:nowrap}
}