/* Phone layout follows document flow so expanded status text and large hands
   cannot cover another control. Desktop composition remains in combat-ui.css. */
.touch-hand-hint {display:none}
@media (max-width:700px) {
 .desktop-hand-hint {display:none}
 .touch-hand-hint {display:inline}
 html {scroll-padding-block:16px}
 body {overflow-x:clip;-webkit-text-size-adjust:100%}
 button,a,input,select,summary {touch-action:manipulation}
 input,select,textarea {font-size:16px}
 #app {min-width:0}
 body.in-battle {overflow-y:auto;--card-w:136px;--card-h:204px}
 body.in-battle #app .battle-run {
  display:grid;grid-template-areas:"hud" "rail" "field" "command" "tray";
  grid-template-columns:minmax(0,1fr);align-content:start;
  height:auto;min-height:100svh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow:clip;background-position:center top;
 }
 .in-battle #app .combat-hud {
  grid-area:hud;position:relative;inset:auto;width:100%;height:52px;min-height:52px;
  display:flex;flex-wrap:nowrap;gap:4px;padding:4px 8px;box-sizing:border-box;
 }
 .in-battle #app .hud-hero {gap:0;min-width:30px;flex:none}
 .in-battle #app .hud-hero>span:last-child {display:none}
 .in-battle #app .hud-portrait {width:28px;height:28px;outline:none}
 .in-battle #app .hud-portrait:after {display:none}
 .in-battle #app .hud-values {gap:6px;min-width:0;flex:1;font-size:12px;white-space:nowrap}
 .in-battle #app .hud-values .ui-icon {width:16px;height:18px}
 .in-battle #app :is(.hud-settings,.potion-hud,.hud-deck) {width:auto;min-width:32px;min-height:44px;padding:4px;gap:3px;flex:none;font-size:12px}
 .in-battle #app :is(.hud-deck,.potion-hud) .ui-icon {width:17px;height:20px}
 .in-battle #app .hud-settings .ui-icon {width:24px;height:26px}
 .in-battle #app :is(.hud-relics,.hud-journey) {display:none}
 .in-battle #app .sanctuary-rail {
  grid-area:rail;position:relative;inset:auto;display:flex;width:auto;height:auto;
  justify-content:space-around;gap:4px;padding:0 8px;background:#100e18bc;
 }
 .in-battle #app .sanctuary-rail button {display:flex;flex:1;flex-direction:row;gap:5px;min-height:40px;min-width:0;padding:2px}
 .in-battle #app .sanctuary-rail :is(i,.ui-icon) {width:20px;height:22px}
 .in-battle #app .sanctuary-rail span {display:inline;font-size:11px;white-space:nowrap}
 .in-battle #app .battle-field {
  grid-area:field;position:relative;inset:auto;height:auto;min-height:230px;
  display:grid;grid-template-columns:35% minmax(0,1fr);grid-template-rows:28px auto 30px;
  padding:0 8px;isolation:isolate;
 }
 .in-battle #app .field-title {position:relative;inset:auto;grid-column:2;grid-row:1;max-width:none;text-align:right;padding-top:6px}
 .in-battle #app .field-title span {font-size:10px}
 .in-battle #app .field-title h1 {display:none}
 .in-battle #app .turn-indicator {position:relative;inset:auto;grid-column:1;grid-row:1;font-size:11px;padding-top:6px}
 .in-battle #app .hero-actor {left:-8px;top:28px;bottom:30px;height:auto;width:43%;max-width:none;aspect-ratio:auto;z-index:1}
 .in-battle #app .hero-actor .actor-figure {height:100%;width:100%}
 .in-battle #app .hero-actor .hero-sprite {object-fit:contain;object-position:center bottom}
 .in-battle #app .enemy-line,.in-battle #app .enemy-line.three-enemies {
  position:relative;inset:auto;grid-column:2;grid-row:2;width:100%;min-width:0;
  align-self:center;align-items:flex-end;gap:8px;padding:4px 0 8px;z-index:3;
 }
 .in-battle #app .battle-field:has(.three-enemies) {grid-template-columns:22% minmax(0,1fr)}
 .in-battle #app .enemy {min-width:0;flex:1;max-width:none;padding:0;gap:2px;touch-action:manipulation}
 .in-battle #app .enemy .intent {position:relative;inset:auto;transform:none;min-width:0;width:100%;padding:4px 2px;margin:0 0 4px;box-sizing:border-box;background:#110d1bd9;border-radius:5px}
 .in-battle #app .enemy .intent-main {font-size:17px;line-height:1.3}
 .in-battle #app .enemy :is(.intent-special,.intent-next,.phase-warning) {font-size:10px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
 .in-battle #app .enemy .intent-label {font-size:10px}
 .in-battle #app .enemy .actor-figure,.in-battle #app .enemy.boss .actor-figure,.in-battle #app .three-enemies .enemy .actor-figure {height:96px;min-height:0;margin:0}
 .in-battle #app .enemy .actor-sprite {max-height:100%;max-width:100%;object-fit:contain}
 .in-battle #app .enemy .actor-health-row {width:100%;max-width:none;min-width:0;margin:3px 0}
 .in-battle #app .enemy .actor-health {height:13px}
 .in-battle #app .enemy .actor-health>b {font-size:12px;line-height:15px}
 .in-battle #app .enemy .actor-caption {margin:3px 0;font-size:11px;min-height:18px;white-space:normal}
 .in-battle #app .enemy .actor-caption b {font-size:11px;line-height:1.5;white-space:normal;letter-spacing:0}
 .in-battle #app .enemy .actor-statuses {position:relative;inset:auto;gap:3px;flex-wrap:wrap;justify-content:center}
 .in-battle #app .enemy .actor-statuses>span {font-size:10px;white-space:normal}
 .in-battle #app .stage-bottom {position:relative;inset:auto;grid-column:1/-1;grid-row:3;min-width:0;align-self:end;z-index:4;pointer-events:auto}
 .in-battle #app .turn-forecast {display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;min-height:26px;padding:4px;font-size:11px;background:#130e1bd9;box-sizing:border-box}
 .in-battle #app .last-action {display:none}
 .in-battle #app .stage-announcement {left:5%;top:35%;width:90%;z-index:8}
 .in-battle #app .command-panel {grid-area:command;display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px;padding:6px 8px;background:#110e1bd9;position:relative;z-index:6;min-width:0}
 .in-battle #app .hero-insignia {grid-column:1/-1;position:relative;inset:auto;width:auto;margin:0;padding:6px;gap:5px;grid-template-columns:1fr 1fr}
 .in-battle #app .hero-insignia .command-heading {height:28px;font-size:12px}
 .in-battle #app .hero-insignia .command-heading button {min-height:28px}
 .in-battle #app .hero-insignia :is(.command-equipment,.command-passive) {min-height:54px;padding:5px;gap:3px 6px;grid-template-columns:26px minmax(0,1fr)}
 .in-battle #app .hero-insignia :is(.gear-art,.passive-art) {width:26px;height:30px;grid-row:1}
 .in-battle #app .hero-insignia :is(.gear-copy b,.passive-copy b) {font-size:12px;line-height:1.4}
 .in-battle #app .hero-insignia :is(.gear-heading,.passive-copy small) {font-size:10px}
 .in-battle #app .hero-insignia :is(.gear-effect,.passive-effect) {display:none}
 .in-battle #app .hero-insignia .passive-state {position:static;grid-column:1/-1;font-size:10px;line-height:1.5;padding:0;border:0}
 .in-battle #app .hero-insignia :is(.command-buffs>span,.command-upcoming,.next-trigger,.command-field b) {font-size:11px;line-height:1.6}
 .in-battle #app .hero-insignia .command-synergy:empty {display:none}
 .in-battle #app .hero-insignia :is(.needle-repeat,.settle-button) {min-height:44px;font-size:11px}
 .in-battle #app .command-resources {position:relative;inset:auto;width:auto;gap:6px;align-self:center}
 .in-battle #app .mana-readout {width:44px;height:44px}
 .in-battle #app .mana-readout:after {display:none}
 .in-battle #app .mana-readout:before {inset:-5px}
 .in-battle #app .mana-readout strong {font-size:22px}
 .in-battle #app .mana-readout>span {font-size:9px}
 .in-battle #app .command-resonance {width:60px}
 .in-battle #app .command-resonance>div:first-child {flex-direction:row;gap:2px;font-size:10px;justify-content:center}
 .in-battle #app .command-resonance b {font-size:12px}
 .in-battle #app :is(.resonance-milestones,.command-resonance small) {display:none}
 .in-battle #app .command-panel .hero-abilities {position:relative;inset:auto;width:auto;gap:5px;align-self:center}
 .in-battle #app .command-panel .hero-abilities:before {display:none}
 .in-battle #app .command-panel .stage-power {height:84px;padding:34px 1px 2px;min-width:0}
 .in-battle #app .command-panel .stage-power .ability-orb {width:25px;height:25px;left:calc(50% - 12px);top:4px}
 .in-battle #app .command-panel .ability-orb .ui-icon {width:20px;height:20px}
 .in-battle #app .command-panel .stage-power b {font-size:11px;letter-spacing:0;line-height:1.5}
 .in-battle #app :is(.power-cost,.power-state) {font-size:10px;line-height:1.5}
 .in-battle #app .battle-tray {grid-area:tray;position:relative;inset:auto;height:auto;min-width:0;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;padding:0 8px 8px;background:linear-gradient(#110d1be8,#0d0a14);z-index:10}
 .in-battle #app .hand-center {grid-column:1/-1;position:relative;inset:auto;width:auto;min-width:0;height:auto;order:0;z-index:1}
 .in-battle #app .hand-center .hand-instructions,.in-battle #app .hand-center:has(.mulligan-hand) .hand-instructions {position:relative;inset:auto;display:flex;justify-content:center;align-items:center;width:auto;min-height:28px;height:auto;font-size:11px;visibility:visible;line-height:1.5;padding:4px 0}
 .in-battle #app .hand-instructions small {display:none}
 .in-battle #app .fan-hand,.in-battle #app .fan-hand.mulligan-hand {display:flex;position:relative;inset:auto;width:100%;height:236px;box-sizing:border-box;gap:12px;justify-content:flex-start;align-items:flex-start;padding:16px 8px 10px!important;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scroll-snap-type:x proximity;scroll-padding-inline:8px;overscroll-behavior-x:contain;scrollbar-width:thin}
 .in-battle #app .fan-hand>.hand-card.card-surface {position:relative!important;inset:auto!important;margin:0!important;width:136px!important;min-width:136px!important;max-width:none!important;height:204px!important;flex:0 0 136px!important;transform:none!important;translate:0 0;scroll-snap-align:start;touch-action:pan-x pan-y;transition:translate .15s,outline-color .15s}
 .in-battle #app .fan-hand>.hand-card.card-surface:hover {transform:none!important;translate:0 0;z-index:auto!important}
 .in-battle #app .fan-hand.mulligan-hand>.hand-card.card-surface.swap-selected[data-action=swap] {translate:0 -8px;outline-offset:2px}
 .in-battle #app .fan-hand .card-hotkey {display:none}
 .in-battle #app .empty-hand {margin:auto;min-width:0;font-size:14px}
 .in-battle #app .energy-panel {grid-column:1;position:relative;inset:auto;width:44px;height:56px;order:1;align-self:center}
 .in-battle #app .turn-controls {grid-column:2;position:relative;inset:auto;width:auto;height:auto;display:flex;flex-direction:row;align-items:center;gap:4px;order:2;min-width:0;z-index:2}
 .in-battle #app .right-piles {position:relative;inset:auto;width:80px;display:flex;gap:0;order:0;flex:none}
 .in-battle #app .pile-control {width:40px;min-width:40px;min-height:56px;transform:none;margin:0;padding:4px 0}
 .in-battle #app .deck-back {width:22px;height:28px;transform:none}
 .in-battle #app .pile-control b {font-size:12px;right:0;bottom:20px}
 .in-battle #app .pile-control small {font-size:10px;margin-top:4px;letter-spacing:0}
 .in-battle #app .enemy-guide-button {order:1;width:44px;min-width:44px;min-height:52px!important;padding:4px 2px!important;white-space:normal;font-size:10px;line-height:1.5;background:none!important;box-shadow:none!important}
 .in-battle #app .end-turn {order:2;flex:1;min-width:0;width:auto;height:54px;min-height:54px;margin:0!important;padding:5px 8px!important;clip-path:none;background:#493153!important;border:1px solid #c6a0d7;border-radius:5px}
 .in-battle #app .end-turn:before,.in-battle #app .end-turn:after {display:none}
 .in-battle #app .end-turn .end-copy b {font-size:14px;letter-spacing:1px;white-space:normal;line-height:1.4}
 .in-battle #app .end-turn .end-copy small {font-size:10px;letter-spacing:0}
 .in-battle #app :is(.end-shortcut,.turn-control-note,.combat-bottomline) {display:none}
 .in-battle .skill-cut-in {position:fixed;top:26svh;bottom:auto;max-height:180px}
 #modal {width:calc(100% - 16px);max-width:calc(100% - 16px);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));margin:auto;box-sizing:border-box}
 #modal .modal-body {min-width:0;overscroll-behavior:contain;overflow-wrap:anywhere}
 #modal :is(.modal-close,.modal-header button,.center-actions>.button) {min-height:44px}
 #modal :is(input,select) {font-size:16px}
 #modal .center-actions {flex-wrap:wrap;gap:8px}
 #modal .center-actions .button {max-width:100%;white-space:normal}
 .front-screen,.flow-scene,.result-scene {padding-bottom:max(20px,env(safe-area-inset-bottom));min-width:0}
 .front-screen :is(.front-back,.setting-switch),.flow-scene :is(.flow-preparation-back,.text-button) {min-height:44px}
 .settings-tabs button {min-height:44px}
 .setting-row {gap:12px;flex-wrap:wrap}
 .setting-row input[type=range] {min-height:40px;touch-action:pan-y}
 .flow-hud {max-width:100%;box-sizing:border-box}
 .flow-actions,.center-actions {flex-wrap:wrap}
 .flow-story-panel {overflow-wrap:anywhere}
 .flow-picker {max-height:55dvh;overscroll-behavior:contain}
 .flow-reward .reward-cards {scroll-snap-type:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-padding-inline:12px}
 /* Preserve readable goods on short phones: scroll the page instead of
    shrinking product cards inside a fixed-height desktop shop viewport. */
 body.in-shop {overflow-y:auto}
 body.in-shop .flow-shop {height:auto;min-height:100svh;grid-template-rows:60px 42px auto auto;overflow:visible;padding-bottom:env(safe-area-inset-bottom)}
 body.in-shop .shop-room {grid-template-rows:96px auto;min-height:0}
 body.in-shop #app .merchant-tab {min-height:44px;padding:8px 4px}
 body.in-shop .merchant-panel {grid-template-rows:auto minmax(310px,auto) 48px;gap:8px}
 body.in-shop .merchant-grid {container-type:inline-size;min-height:310px;padding-block:8px}
 body.in-shop .merchant-cards .hand-card {--merchant-card-height:min(330px,calc((100cqw - 32px)*1.5))}
 body.in-shop .merchant-art {height:100px}
 body.in-shop .merchant-offer {max-height:none}
 body.in-shop .merchant-footer {position:relative;inset:auto;min-height:64px;padding-bottom:env(safe-area-inset-bottom);background:#17111ff5}
 body.in-shop #app .merchant-pagination>.button {min-height:44px}
}