/* Shared interface icons and touch targets. Game illustrations keep their art. */
.ui-icon { stroke-width:2; }
.hud { height:calc(72px + env(safe-area-inset-top)); }
.hud .icon-button { width:44px; height:44px; }
.hud .icon-button .ui-icon { width:21px; height:21px; }
.hud-counters .ui-icon { width:16px; height:16px; }
.hero-badge strong small { font-size:11px; }
.hp-line .ui-icon { width:13px; height:13px; }
.bottom-nav { height:calc(50px + env(safe-area-inset-bottom)); }
.bottom-nav button { min-height:44px; font-size:13px; }
.bottom-nav .ui-icon { width:20px; height:20px; }
.bottom-nav button>b { top:5px; font-size:11px; line-height:16px; }
.icon-button, .tiny-button, .sheet>header .icon-button { min-width:44px; min-height:44px; }
.sound-toggle { min-height:44px; }
.sheet>header .ui-icon { width:20px; height:20px; }
.save-indicator { top:calc(76px + env(safe-area-inset-top)); font-size:9px; }
.shop-offer>b .ui-icon, .shop-services b .ui-icon { width:14px; height:14px; }

/* A full-size, vertically scrollable chapter with a fixed next-step footer. */
.screen-map .screen-content { overflow:hidden; }
.screen-content>.route-screen { height:100%; min-height:0; }
.route-screen { padding:18px 16px 0; gap:0; }
.route-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; }
.route-heading h1 { font-size:26px; }
.route-heading .eyebrow { font-size:10px; letter-spacing:1.6px; margin-bottom:6px; }
.route-help { display:flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:0 8px; font-size:12px; color:#adbaa5; border:1px solid #424d45; border-radius:7px; flex:none; }
.route-help .ui-icon { width:17px; height:17px; }
.route-summary { display:flex; justify-content:space-between; align-items:center; gap:6px; min-height:38px; margin-top:8px; font-size:12px; color:#8f9d92; }
.route-summary>span { display:flex; align-items:center; gap:6px; }
.route-summary .ui-icon { width:16px; height:16px; color:#ba929d; }
.route-summary b { color:#d0b3ba; font-size:14px; }
.route-legend { padding:10px 0 12px; gap:13px; font-size:12px; flex:none; border-top:1px solid #303b36; }
.route-legend .ui-icon { width:14px; height:14px; }
.route-legend .green-dot { width:7px; height:7px; }
.future-dot { width:7px; height:7px; border:1px solid #78847d; border-radius:50%; }
.route-direction { margin-left:auto; color:#879487; gap:3px !important; }
.route-scroll { position:relative; flex:1; min-height:150px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#53614f transparent; border-top:1px solid #303b36; border-bottom:1px solid #3d473d; }
.route-board { flex:none; min-height:0; margin:0; width:100%; background:linear-gradient(90deg,transparent 15.7%,#7e927009 16%,transparent 16.3%,transparent 49.7%,#7e927009 50%,transparent 50.3%,transparent 83.7%,#7e927009 84%,transparent 84.3%); }
.route-lines path { fill:none; vector-effect:non-scaling-stroke; stroke:#59605e; stroke-width:1.5; stroke-dasharray:5 7; opacity:.44; }
.route-lines path.traveled { stroke:#94ad72; stroke-width:2.3; stroke-dasharray:none; opacity:.9; }
.route-lines path.available { stroke:var(--green); stroke-width:2.5; stroke-dasharray:7 6; opacity:1; }
.map-watermark { top:12px; opacity:.07; }
.route-node { width:var(--route-node-width,88px); height:var(--route-node-height,98px); transform:translate(-50%,-26px); gap:6px; color:#a3afa4; font-size:14px; }
.route-node:disabled { opacity:1; }
.route-node strong { font-size:14px; line-height:18px; font-weight:600; }
.route-node small { font-size:12px; line-height:15px; max-width:100%; white-space:nowrap; color:#788a7d; }
.node-circle, .route-node.boss .node-circle { width:52px; height:52px; flex:none; border-width:1.5px; background:#20292b; box-shadow:0 0 0 5px #151b1d; }
.node-circle .ui-icon { width:22px; height:22px; }
.route-node.boss .node-circle { background:#3b2b34; border-color:#ad7283; color:#e0a6b3; box-shadow:0 0 0 5px #231c24,0 0 25px #aa4f6518; }
.route-node.boss .ui-icon { width:26px; height:26px; }
.route-node.reachable .node-circle { border-width:2px; border-color:var(--green); background:#34462f; box-shadow:0 0 0 5px #1d2a20,0 0 20px #b8d7841c; }
.route-node.reachable strong, .route-node.reachable small { color:var(--green); }
.route-node.visited .node-circle { background:#24332a; border-color:#7e976b; }
.route-node.current .node-circle { box-shadow:0 0 0 5px #1d2a20,0 0 0 6px #64785a; }
.route-node.current small { color:#b9cba8; }
.route-node.passed, .route-node.passed:disabled { opacity:.28; }
.route-start { bottom:35px; display:flex; align-items:center; justify-content:center; gap:7px; font:12px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; letter-spacing:0; color:#91a084; }
.route-start .ui-icon { width:17px; height:17px; }
.route-footer { flex:none; border:0; min-height:73px; align-items:center; padding:12px 0; gap:12px; }
.route-footer>span { display:flex; flex-direction:column; gap:5px; min-width:0; }
.route-footer b { margin:0; font-size:14px; color:#d1ddbe; }
.route-footer small { font-size:12px; line-height:1.5; color:#879983; }
.route-footer button { display:flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:0 10px; font-size:12px; color:var(--green); border:1px solid #536249; border-radius:7px; flex:none; background:#273222; }
.route-footer .ui-icon { width:17px; height:17px; }
.map-sheet .route-screen { padding:0; }
.map-sheet .route-heading { display:none; }
.map-sheet .route-scroll { flex:none; height:min(54dvh,560px); }
.map-sheet .route-board { min-height:0; }
.route-type-list { display:flex; flex-direction:column; gap:18px; margin:24px 0 12px; }
.route-type-list>div { display:flex; gap:15px; align-items:flex-start; }
.route-type-list .ui-icon { color:var(--green); margin-top:3px; width:23px; height:23px; }
.route-type-list strong { display:block; font-size:16px; margin-bottom:5px; }
.route-type-list small { display:block; font-size:14px; color:#a2aea0; line-height:1.7; }

/* Combat keeps cards and primary actions near the bottom of the screen. */
.screen-content>.battle-screen { min-height:100%; height:auto; }
.battle-screen { padding:0; }
.battle-caption { min-height:53px; padding:10px 14px 6px; }
.chapter-mini { font-size:11px; letter-spacing:.4px; }
.battle-caption h1 { font-size:19px; margin-top:3px; }
.battle-caption-tools { gap:7px; }
.audio-quick.icon-button { width:44px; height:44px; }
.audio-quick .ui-icon { width:20px; height:20px; }
.round-badge { min-height:44px; gap:5px; padding:6px 9px; font-size:12px; }
.arena { flex:1 0 218px; min-height:218px; max-height:none; margin:0; }
.boss-fight .arena { min-height:242px; flex-basis:242px; }
.arena-code { left:14px; top:75px; font-size:22px; letter-spacing:2px; }
.enemy-row, .enemy-row.count-3 { top:8px; left:89px; right:12px; max-width:none; display:grid; grid-template-columns:repeat(var(--enemy-count,1),minmax(0,1fr)); align-items:start; justify-items:center; gap:8px; }
.enemy-row.count-1 { left:auto; right:30px; width:160px; }
.enemy, .count-3 .enemy { width:100%; min-width:0; max-width:160px; min-height:184px; border:1px solid transparent; padding:3px 3px 0; border-radius:9px; }
.enemy-art { display:flex; align-items:flex-end; justify-content:center; width:100%; height:111px; flex:none; }
.boss-fight .enemy-art { height:142px; }
.count-3 .enemy-art { height:101px; }
.arena .enemy .sprite, .arena .enemy-row.count-1 .enemy .sprite, .arena .count-3 .enemy .sprite { width:min(100%,calc(var(--art-height)*var(--art-ratio))); height:auto; aspect-ratio:var(--art-ratio); max-height:var(--art-height); }
.intent { min-height:27px; height:auto; width:100%; padding:3px 2px; gap:3px; margin-bottom:4px; font-size:11px; white-space:normal; line-height:1.2; }
.intent .ui-icon { width:14px; height:14px; }
.intent b { font-weight:600; }
.enemy-name, .count-3 .enemy-name { font-size:11px; line-height:15px; margin:4px 0; max-width:100%; }
.enemy-name i { font-size:10px; }
.enemy-hp { width:100%; min-width:0; max-width:113px; height:16px; }
.enemy-hp b { font-size:10px; }
.enemy-status { min-height:16px; gap:2px; }
.enemy-status .status { font-size:10px; }
.enemy.is-target .enemy-hp { border-color:#82966e; }
.targeting .enemy { background:#bed69108; border-color:#71836070; }
.targeting .enemy.is-target { background:#bed69112; border-color:var(--green); box-shadow:inset 0 0 18px #bad7880c; }
.targeting .enemy .sprite { filter:drop-shadow(0 0 6px #d8c18733); }
.target-reticle { left:auto; right:0; top:43px; bottom:auto; transform:none; padding:3px 5px; background:#293523eb; border-color:#a4b97e; color:#dce9b8; font-size:11px; z-index:3; pointer-events:none; }
.target-reticle .ui-icon { width:12px; height:12px; }
.survivor { left:16px; bottom:14px; }
.survivor .sprite { height:101px; width:calc(101px*var(--art-ratio)); }
.survivor-shield { font-size:15px; }
.survivor-shield .ui-icon { width:17px; height:17px; }
.arena-threat { left:14px; top:12px; right:auto; bottom:auto; width:73px; text-align:left; gap:6px; font-size:11px; line-height:1.5; }
.arena-threat>span { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.arena-threat .ui-icon { width:14px; height:14px; color:#bd807c; }
.arena-threat b { font-size:16px; margin:0; }
.arena-threat small { color:#ad9c91; font-size:11px; line-height:1.5; }
.hand-heading { display:flex; flex:none; align-items:center; justify-content:space-between; gap:8px; min-height:51px; padding:4px 14px; }
.hand-title { display:flex; gap:7px; align-items:center; min-height:44px; text-align:left; }
.hand-title .ui-icon { width:20px; height:20px; color:#aaba96; }
.hand-title b { display:block; font-size:14px; color:#d4dec6; }
.hand-title small { display:block; margin-top:3px; color:#83937e; font-size:11px; }
.quick-items { display:flex; gap:5px; align-items:center; }
.quick-item-cost { display:flex; flex-direction:column; gap:4px; margin-right:2px; color:#849776; }
.quick-item-cost b { font-size:11px; font-weight:500; }
.quick-item-cost small { font-size:10px; white-space:nowrap; }
.quick-item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:46px; min-height:44px; padding:3px; border:1px solid #424e3f; border-radius:6px; background:#252e24; }
.quick-item .item-art { height:24px; width:calc(24px*var(--art-ratio)); }
.quick-item small { font-size:10px; line-height:12px; color:#b6c5a4; }
.no-items { font-size:12px; color:#73816f; }
.hand { position:relative; height:234px; min-height:234px; gap:10px; padding:7px 14px 12px; scroll-padding:14px; overscroll-behavior-x:contain; }
.hand .game-card { flex-basis:138px; min-height:215px; padding:10px 10px 0; }
.hand .card-name { font-size:14px; margin-top:20px; }
.hand .card-cost { font-size:18px; }
.hand .card-art { height:49px; flex:none; }
.hand .card-art .item-art { height:43px; width:calc(43px*var(--art-ratio)); }
.hand .card-text { font-size:14px; line-height:1.55; min-height:66px; padding:3px 0 6px; }
.hand .card-footer { font-size:11px; padding:7px 0; letter-spacing:0; white-space:nowrap; gap:4px; }
.hand .card-footer .ui-icon { width:12px; height:12px; }
.hand .card-footer.blocked { color:#e6a59a; }
.hand .game-card.unavailable { opacity:.65; }
.hand .game-card.selected { transform:translateY(-3px); }
.empty-hand { font-size:14px; }
.empty-hand small { font-size:12px; }
.battle-dock { position:sticky; bottom:0; flex:none; z-index:6; background:#19201df5; border-top:1px solid #3d4938; box-shadow:0 -5px 16px #10161970; backdrop-filter:blur(8px); }
.combat-command { padding:7px 14px 0; min-height:63px; }
.combat-hint { display:flex; align-items:center; gap:10px; min-height:49px; }
.combat-hint>.ui-icon { width:22px; height:22px; color:#94a979; }
.combat-hint>span { flex:1; min-width:0; }
.combat-hint strong { display:block; font-size:14px; font-weight:600; color:#cbd7be; }
.combat-hint strong .ui-icon { width:14px; height:14px; margin:0 2px; }
.combat-hint small { display:block; margin-top:5px; font-size:12px; line-height:1.4; color:#85967d; }
.enemy-detail-button { display:flex; align-items:center; gap:4px; min-height:44px; padding:0 6px; flex:none; color:#a4b194; font-size:12px; }
.enemy-detail-button .ui-icon { width:17px; height:17px; }
.selected-command { background:#a8c57f0a; padding-top:9px; }
.command-row { display:flex; align-items:center; gap:8px; min-height:72px; }
.command-info { flex:1; min-width:0; }
.command-info strong { display:block; font-size:16px; color:#dbe5c8; }
.command-info small { display:flex; flex-wrap:wrap; gap:8px; margin-top:5px; font-size:12px; line-height:1.5; color:#b0c192; }
.command-info small>span { display:flex; align-items:center; gap:3px; }
.command-info small .ui-icon { width:13px; height:13px; }
.command-info>span { display:block; font-size:12px; color:#d1bc92; line-height:1.5; margin-top:4px; }
.attack-confirm { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; width:88px; min-height:58px; border:1px solid #d4e5af; border-radius:7px; color:#253220; background:var(--green); flex:none; font-size:15px; font-weight:700; box-shadow:0 2px 0 #738453; }
.attack-confirm .ui-icon { width:22px; height:22px; }
.cancel-selection { display:grid; place-items:center; width:44px; height:44px; flex:none; color:#aab4a0; border:1px solid #4c5747; border-radius:7px; }
.cancel-selection .ui-icon { width:19px; height:19px; }
.target-tabs { display:flex; gap:6px; margin:7px 0 2px; }
.target-tabs button { position:relative; min-height:44px; flex:1; min-width:0; padding:4px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; border:1px solid #495641; border-radius:5px; font-size:12px; color:#95a28b; }
.target-tabs .ui-icon { width:12px; height:12px; position:absolute; left:5px; top:6px; opacity:.65; }
.target-tabs span { padding-left:10px; font-size:12px; max-width:100%; white-space:nowrap; }
.target-tabs small { font-size:11px; }
.target-tabs .active { border-color:var(--green); color:#d1e2ac; background:#41513275; }
.battle-controls { height:70px; gap:10px; padding:9px 14px 11px; }
.energy { min-width:65px; }
.energy>span { display:flex; gap:4px; align-items:center; font-size:12px; margin-bottom:3px; }
.energy .ui-icon { width:14px; height:14px; }
.energy strong { font-size:24px; }
.energy strong small { font-size:12px; }
.energy>i { margin-top:4px; }
.ammo-control { min-width:0; flex:1; min-height:49px; border:1px solid #5d6149; border-radius:6px; padding:5px 8px; background:#34372b; text-align:left; }
.ammo-control>span { display:flex; align-items:center; gap:5px; font:700 20px ui-monospace,monospace; margin:0 0 3px; color:#e0d2aa; }
.ammo-control>span>small { font-size:12px; color:#a6aa91; }
.ammo-control .ui-icon { width:15px; height:15px; }
.ammo-control>small { font-size:11px; margin:0; color:#c2c5a5; display:flex; align-items:center; gap:4px; }
.ammo-control>small .ui-icon { width:12px; height:12px; }
.ammo-control:disabled { opacity:.55; }
.ammo-control.empty-ammo:not(:disabled) { border-color:#c59365; background:#473b2c; }
.end-turn { flex:1; margin-left:0; min-width:100px; max-width:150px; min-height:49px; font-size:14px; }
.has-selection .end-turn { background:#293426; border-color:#56674a; color:#acbb9b; }
.resolving .battle-controls .end-turn { font-size:14px; }
.resolving .attack-confirm, .resolving .quick-items { pointer-events:none; }
.pile-options { margin:18px 0; }
.pile-options .choice-row { min-height:56px; font-size:15px; }
.pile-options b { margin-left:auto; }
.enemy-info { gap:15px; padding-left:0; padding-right:0; }
.enemy-info>.sprite { max-width:42%; }

@media (max-width:374px) {
  .hud { gap:6px; padding-left:10px; padding-right:10px; }
  .hud-counters { gap:8px; font-size:12px; }
  .hero-badge { gap:6px; }
  .hero-badge>.sprite { height:38px; width:calc(38px*var(--art-ratio)); }
  .hero-badge strong { font-size:13px; gap:5px; }
  .hero-badge strong small { font-size:10px; }
  .bottom-nav button { gap:5px; font-size:12px; }
  .route-heading h1 { font-size:24px; }
  .route-legend { gap:10px; font-size:11px; }
  .route-direction { font-size:11px; }
  .route-help { padding:0 6px; }
  .battle-caption { padding-left:12px; padding-right:12px; }
  .battle-caption h1 { font-size:17px; }
  .chapter-mini { font-size:10px; }
  .enemy-row, .enemy-row.count-3 { left:77px; right:8px; gap:5px; }
  .enemy-row.count-1 { left:auto; right:18px; width:151px; }
  .enemy-name, .count-3 .enemy-name { font-size:10px; }
  .intent, .enemy-row.count-3 .intent { font-size:10px; }
  .count-3 .intent .ui-icon { width:12px; height:12px; }
  .arena-threat { left:12px; width:64px; font-size:10px; }
  .arena-threat small { font-size:10px; }
  .hand-heading { padding-left:12px; padding-right:12px; }
  .quick-items { gap:4px; }
  .quick-item { width:44px; }
  .hand { padding-left:12px; padding-right:12px; }
  .combat-command { padding-left:12px; padding-right:12px; }
  .combat-hint { gap:7px; }
  .combat-hint strong { font-size:13px; }
  .combat-hint small { font-size:11px; }
  .command-info strong { font-size:14px; }
  .command-info small { font-size:11px; gap:6px; }
  .command-info>span { font-size:11px; }
  .target-tabs span { font-size:11px; padding-left:10px; }
  .target-tabs .ui-icon { left:3px; width:11px; height:11px; }
  .battle-controls { padding-left:12px; padding-right:12px; gap:7px; }
  .energy { min-width:57px; }
  .ammo-control { padding-left:6px; padding-right:6px; }
  .ammo-control>small { font-size:10px; }
  .end-turn { min-width:90px; }
}

@media (prefers-reduced-motion:reduce) {
  .route-scroll { scroll-behavior:auto; }
}

@media (max-height:750px) {
  .battle-caption { min-height:46px; padding-top:5px; padding-bottom:3px; }
  .arena { min-height:184px; flex-basis:184px; }
  .boss-fight .arena { min-height:214px; flex-basis:214px; }
  .enemy-row, .enemy-row.count-3 { top:3px; }
  .enemy, .count-3 .enemy { min-height:160px; }
  .enemy-art { height:82px; }
  .boss-fight .enemy-art { height:115px; }
  .count-3 .enemy-art { height:80px; }
  .intent { min-height:24px; margin-bottom:3px; }
  .survivor .sprite { height:85px; width:calc(85px*var(--art-ratio)); }
  .hand-heading { min-height:46px; padding-top:2px; padding-bottom:2px; }
  .hand { height:218px; min-height:218px; }
  .hand .game-card { min-height:199px; padding-top:8px; }
  .hand .card-art { height:37px; }
  .hand .card-art .item-art { height:32px; width:calc(32px*var(--art-ratio)); }
  .hand .card-text { line-height:1.4; min-height:61px; padding:2px 0 5px; }
  .hand .card-footer { padding:6px 0; }
  .combat-command { min-height:55px; padding-top:4px; }
  .combat-hint { min-height:44px; }
  .battle-controls { height:64px; padding-top:7px; padding-bottom:8px; }
}