/* The camp (lobby): chapter heading and splash, side actions, chapter controls, the start button and mode chips, and the chapter, mode and scout dialogs. */
.battle {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chapter-heading {
  text-align: center;
  margin-top: 24px;
  z-index: 1;
}
.chapter-heading > span {
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 900;
  color: #d9f7ed;
}
.chapter-heading h2 {
  font-family: Impact, "Arial Black", sans-serif;
  text-transform: uppercase;
  font-size: 29px;
  letter-spacing: 0.4px;
  margin: 6px 0;
  color: #fff2c7;
  text-shadow:
    2px 3px #234c67,
    -1px -1px #234c67;
}
.chapter-heading p {
  font-size: 10px;
  letter-spacing: 1.4px;
  font-weight: 900;
  color: #087893;
}
.lobby-scene {
  position: relative;
  flex: 1;
  min-height: 205px;
  max-height: 340px;
  display: grid;
  place-items: center;
  margin-top: 3px;
}
.chapter-art {
  width: 80%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: normal;
  mask-image: radial-gradient(ellipse at center, #000 48%, transparent 73%);
  z-index: -1;
  filter: saturate(0.95);
}
.scene-rays {
  position: absolute;
  width: 290px;
  height: 290px;
  background: repeating-conic-gradient(
    from 3deg,
    #b6f8d112 0deg 15deg,
    transparent 15deg 30deg
  );
  mask-image: radial-gradient(#000, transparent 65%);
  border-radius: 50%;
  z-index: -1;
}
.side-actions {
  position: absolute;
  top: 12%;
  display: flex;
  flex-direction: column;
  gap: 29px;
}
.side-actions.left {
  left: 9px;
}
.side-actions.right {
  right: 9px;
}
.side-actions button {
  width: 58px;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0;
  filter: drop-shadow(0 2px 0 #08779855);
}
.side-actions small {
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  letter-spacing: 0.1px;
  color: #fff7cc;
  text-shadow: 1px 1px #265777;
  margin-top: 2px;
}
.chapter-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 33px;
  margin: 14px 0 12px;
}
.chapter-progress {
  position: relative;
  background: none;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.chapter-progress > span {
  display: flex;
  align-items: center;
  color: #f9e984;
  font-size: 25px;
  line-height: 24px;
  text-shadow: 1px 2px #358582;
}
.chapter-progress i {
  display: block;
  width: 32px;
  height: 3px;
  background: #138ba5;
  margin: 0 5px;
  border-top: 1px solid #6bdae3;
}
.chapter-progress small {
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #d5f6e6;
}
.lobby-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 14px;
  gap: 9px;
}
.mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--slate-500);
  border: 2px solid var(--slate);
  border-radius: 9px;
  width: 100%;
  padding: 13px 8px;
  margin: 10px 0;
  text-align: left;
}
.mode-row span {
  flex: 1;
}
.mode-row b {
  font-size: 14px;
  display: block;
}
.mode-row small {
  font-size: 10px;
  display: block;
  color: #d3e0e0;
  margin-top: 5px;
}
@media (min-height: 900px) {
  .chapter-heading {
    margin-top: 31px;
  }
  .lobby-bottom {
    padding-bottom: 22px;
    gap: 11px;
  }
  .chapter-controls {
    margin-block: 19px;
  }
  .chapter-art {
    width: 88%;
  }
  .lobby-scene {
    max-height: 350px;
  }
}
@media (max-width: 480px) {
  .chapter-art {
    width: 84%;
  }
  .lobby-scene {
    max-height: 380px;
  }
  .lobby-bottom {
    padding-bottom: 15px;
  }
  .chapter-heading {
    margin-top: 22px;
  }
}
@media (max-height: 720px) {
  .chapter-heading {
    margin-top: 15px;
  }
  .chapter-heading h2 {
    font-size: 25px;
  }
  .lobby-scene {
    min-height: 155px;
  }
  .side-actions {
    gap: 20px;
  }
  .chapter-controls {
    margin: 7px 0;
  }
  .lobby-bottom {
    padding-bottom: 9px;
    gap: 5px;
  }
}
.lobby-scene {
  isolation: isolate;
}
.chapter-art {
  z-index: 0;
}
.side-actions {
  z-index: 1;
}
.chapter-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 74%);
}
.chapter-progress > span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Campaign milestones and scouting use the shared illustrated icon set. */
.campaign-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 8px;
}
.chapter-progress > span {
  gap: 20px;
}
.scout-terrain.defeat-tip {margin:0}
[data-modal-type="scout"] .modal-body > h3 {
  margin: 20px 0 14px;
}
[data-modal-type="scout"] .scout-enemies + .btn {
  margin-top: 20px;
}
.scout-enemies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: 8px;
}
.chapter-heading h2 {
  font-family: "Lilita One", Arial, sans-serif;
  font-weight: 400;
  color: white;
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  text-shadow: none;
}
/* Chips: small slate buttons styled like an unselected tab (the lobby difficulty picker).
   Lettering matches the lobby side labels: 10px, the smallest text size in the game. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 11px;
  border: 2px solid var(--tab-edge);
  border-radius: 8px;
  background: var(--tab-fill);
  color: white;
  font-size: 10px;
  box-shadow: 0 3px var(--tab-drop);
}
/* The difficulty chip takes the mode's color with white, ink-stroked lettering like the buttons:
   yellow (normal), blue (challenge), red (hardcore). */
.chip.mode-select {
  background: var(--yellow);
  color: white;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.chip.mode-select.mode-challenge {
  background: var(--blue);
}
.chip.mode-select.mode-hardcore {
  background: var(--red);
}
/* The lobby start button: a tall yellow .btn with its energy cost under the label. */
.start-button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 148px;
  min-height: 68px;
  margin: 12px 0 0;
  padding: 5px 12px;
  border-radius: 16px;
}
.start-button > span {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 1px;
}
.start-button small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 25px;
  margin: 0;
}
.start-button small > svg {
  width: 21px;
  height: 21px;
}
.start-button small b {
  font-size: 21px;
}
.chapter-art.chapter-splash {
  object-fit: contain;
  transform: none;
  width: 78%;
  height: 100%;
  top: 0;
  left: 11%;
  filter: drop-shadow(0 9px 0 #12697c30);
}
.chapter-art.chapter-splash {
  mask-image: none;
}
.mode-row:disabled {
  opacity: 0.5;
}

.mode-row .mode-emblem { position: relative; display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 16px; border: 2px solid #243b48; background: var(--yellow-soft); box-shadow: inset 0 3px 0 #ffffff70, 0 3px 0 #29424e; }
/* Difficulty emblems match the lobby chip's shields: soft tints of yellow (normal), blue (challenge) and red (hardcore). */
.mode-row .mode-emblem-challenge { background: var(--blue-soft); }
.mode-row .mode-emblem-hardcore { background: var(--red-soft); }
.mode-row .mode-emblem strong { position: absolute; right: -5px; bottom: -6px; min-width: 27px; padding: 2px 4px; border: 2px solid #fff6df; border-radius: 9px; background: var(--slate-900); color: white; font: 900 13px/1 Arial,sans-serif; text-align: center; }

/* Keep chapter navigation targets stationary as the fourth star appears. */
.chapter-controls {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  gap: 16px;
  width: calc(100% - 32px);
  max-width: 320px;
  margin-inline: auto;
}
.chapter-controls .chapter-progress { min-width: 0; }

.chapter-controls > .round:disabled {
  visibility: hidden;
}
.chapter-art.chapter-splash.mega-splash {display:grid;place-items:center;isolation:isolate;}
/* Home, equipment and shop use a slate background.
   Home mixes glyphs; equipment, shop and training each drift their own. */
.screen.battle {background-color:var(--slate-700)}
.screen.battle {background-image:var(--pattern-home)}
/* Mega boss stages go one shade darker and swap the cute glyphs for drifting skulls. */
.screen.battle:has(.mega-splash) {background-color:var(--slate-800);background-image:var(--pattern-mega)}
/* Boss label: red MEGA BOSS (or DEFEATED) on a solid slate backing for contrast. */
.mega-stage-progress {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;justify-self:center;padding:0 16px;border-radius:11px;background:var(--slate-900);text-align:center;color:#fff}
/* Plain text on the solid slate, like the HUD. */
.mega-stage-progress b {font-size:22px;font-weight:400;line-height:1;color:var(--red-top)}
.mega-stage-progress small {font-size:12px;color:#fff8e7}
/* The carousel reserves identical rows for chapters and starless boss stages:
   one track the row's own height, so a taller middle can never push the arrows. */
.chapter-controls {height:65px;flex-shrink:0;grid-template-rows:100%;}
.mega-stage-progress {height:100%;min-height:0;}
.mega-splash-composition {position:relative;width:100%;height:100%;transform:scale(.9);}
@media (max-width:360px) {
  .chapter-heading h2 {font-size:22px;}
}

/* Lobby hierarchy: chapter scene first, compact navigation and start below. */
.screen.battle {overflow-y:auto;overflow-x:hidden}
.battle .chapter-heading {flex:1;min-width:0;margin:0;min-height:54px;display:flex;flex-direction:column;justify-content:center}
.battle .chapter-heading>span {font-size:10px;letter-spacing:1.7px}
.battle .chapter-heading h2 {font-size:25px;line-height:1.1;margin:4px 0 0;color:white;-webkit-text-stroke:2.5px var(--slate-950);paint-order:stroke fill;text-shadow:none;text-wrap:balance}
.battle .lobby-scene {display:grid;grid-template-columns:52px minmax(0,1fr) 52px;column-gap:6px;flex:1 1 300px;min-height:210px;max-height:none;margin:12px 10px 0;padding-bottom:22px}
.battle .chapter-art.chapter-splash {position:relative;inset:auto;grid-column:2;grid-row:1;align-self:center;justify-self:center;width:100%;height:100%;max-height:360px;min-height:0;filter:drop-shadow(3px 3px 0 #fffdf0) drop-shadow(-3px -3px 0 #fffdf0) drop-shadow(0 6px 0 #12697c30)}
.battle .side-actions {position:relative;inset:auto;grid-row:1;align-self:start;display:flex;gap:18px;padding:12px 0;background:#038ec14d;border-radius:11px;width:52px;align-items:center}
.battle .side-actions.left {grid-column:1}
.battle .side-actions.right {grid-column:3}
.battle .side-actions button {width:52px;min-height:52px;justify-content:center}
.battle .side-actions small {font-size:10px;line-height:1.3;color:white;-webkit-text-stroke:1.2px var(--slate-800);paint-order:stroke fill;text-shadow:none}
.battle .scene-rays {left:50%;top:50%;transform:translate(-50%,-50%);width:70%;height:90%;pointer-events:none}
.battle .chapter-controls {margin:10px auto 8px;height:54px;flex-shrink:0;grid-template-columns:38px minmax(0,1fr) 38px;gap:12px}
.battle .chapter-progress {gap:2px}
.battle .chapter-progress>span svg {width:36px;height:36px}
.battle .chapter-progress>span {gap:8px}
.battle .chapter-progress small {font-size:10px;letter-spacing:.6px}
.battle .lobby-bottom {flex-shrink:0;gap:5px;padding:0 12px 27px}
.battle .campaign-links {margin-bottom:0;min-height:30px;gap:7px}
@media(max-width:360px){.battle .chapter-heading h2{font-size:21px}.battle .lobby-scene{grid-template-columns:46px minmax(0,1fr) 46px;column-gap:4px;margin-inline:7px}.battle .side-actions,.battle .side-actions button{width:46px}.battle .campaign-links .chip{padding-inline:9px}
}
@media(max-height:740px){.battle .chapter-heading{min-height:46px}.battle .lobby-scene{min-height:170px;margin-top:8px}.battle .lobby-bottom{padding-bottom:19px}.battle .chapter-controls{margin:6px auto}
}
@media(max-height:640px){.battle .chapter-heading h2{font-size:21px}.battle .lobby-scene{min-height:135px;padding-bottom:18px}.battle .side-actions{gap:5px;padding-block:5px}.battle .side-actions button{min-height:44px}.battle .side-actions button>svg{width:29px;height:29px}.battle .chapter-controls{height:45px;margin:4px auto}.battle .lobby-bottom{gap:2px;padding-bottom:17px}.battle .start-button{margin-top:7px;min-height:61px}.battle .start-button>span{font-size:25px}
}
@media(prefers-reduced-motion:no-preference) {
  .battle .chapter-art.chapter-splash {
    animation:equipment-dane-idle 2.6s ease-in-out infinite;
  }
}

/* Chapter heading aligns with the side-menu rails, freeing the utility row. */
/* The side menus start below the title, so it can use the full width. */
.battle .chapter-heading {grid-column:1 / -1;grid-row:1;align-self:start;min-height:0;margin:0;padding-top:0}
/* Always two lines tall, one-line titles centered in it, so the island never shifts between chapters. */
.battle .chapter-heading h2 {margin:0;font-size:24px;line-height:1.12;min-height:2lh;display:flex;align-items:center;justify-content:center}
.battle .lobby-scene {grid-template-rows:auto minmax(0,1fr);row-gap:8px;flex:0 1 350px;min-height:180px;max-height:350px;margin-top:24px;padding-bottom:0}
.battle .chapter-art.chapter-splash {grid-row:2;max-height:310px}
/* Menus span exactly the island row, buttons spread top to bottom, so they start with
   the island and can never reach the arrows whatever the frame size. */
.battle .lobby-scene > .side-actions {grid-row:2;align-self:stretch;justify-content:space-between;gap:4px}
.battle .chapter-controls {margin-top:4px}
.battle .lobby-bottom {margin-top:auto;padding-top:8px}
.battle .mode-select .mode-chevron {width:12px;height:12px;margin-left:4px}
@media(max-width:360px){.battle .chapter-heading h2{font-size:20px}
}
@media(max-height:740px){.battle .lobby-scene{flex-basis:270px;min-height:160px;margin-top:18px}.battle .lobby-bottom{padding-top:3px}
}
@media(max-height:640px){.battle .lobby-scene{flex-basis:190px;min-height:125px;row-gap:4px;padding-bottom:0}.battle .chapter-heading{min-height:0}.battle .chapter-heading h2{font-size:19px}
}

.battle .lobby-bottom {margin-top:0;flex:1 0 auto}
.battle .start-button {margin-top:auto}
/* Shorter screens: difficulty on the left, a default-size START on the right, in one row,
   to give the island its height back. */
@media(max-height:800px){
 .battle .lobby-scene {flex:1 1 auto}
 .battle .lobby-bottom {flex:0 0 auto;margin-top:auto;flex-direction:row;justify-content:center;align-items:center;gap:12px}
 .battle .lobby-bottom > .campaign-utilities {margin:0}
 /* Boss stages: no placeholder in the row, so START centers; START matches the
    difficulty box height (50px) so the row is the same height either way. */
 .battle .lobby-bottom > .campaign-utilities.is-placeholder {display:none}
 .battle .lobby-bottom > .start-button {flex-direction:row;gap:10px;width:auto;min-height:50px;margin:0;padding:6px 16px;border-radius:var(--button-radius)}
 .battle .start-button > span {font-size:22px}
 .battle .start-button small {height:auto}
 .battle .start-button small > svg {width:18px;height:18px}
 .battle .start-button small b {font-size:18px}
}

.battle .chapter-progress {min-height:44px;min-width:112px;justify-content:center}

/* Four lobby destinations per side, with Scout and difficulty in one row. */
.battle .side-actions {gap:10px}
.battle .lobby-scene {min-height:262px}
.battle .campaign-utilities {align-items:center;margin:0 auto 12px;width:fit-content;padding:8px 10px;background:#038ec14d;border-radius:11px}
/* Boss stages have no difficulty row; an invisible copy keeps the bottom block (and the arrows) in place. */
.battle .campaign-utilities.is-placeholder {visibility:hidden}
@media(max-height:640px){
  .battle .side-actions {gap:5px}
  .battle .lobby-scene {min-height:201px}
}
/* Keep all five chapter stars between the navigation arrows on phones. */
.battle .chapter-progress>span {gap:4px}
.battle .chapter-progress>span svg {width:30px;height:30px}
@media(max-width:360px){
  .battle .chapter-progress>span {gap:2px}
  .battle .chapter-progress>span svg {width:25px;height:25px}
}

/* Selection uses radio indicators; locks describe availability, never completion. */
/* Selected mode: a darker slate card with a cream outline and filled cream radio; unselected rows stay light slate. */
.mode-row.is-selected {border-color:var(--cream);background:var(--slate-800);box-shadow:inset 0 0 0 1px var(--cream)}
.mode-row .mode-description {min-width:0}
.mode-row .mode-state {flex:0 0 42px;display:grid;justify-items:center;color:#d3e0e0}
.mode-row .mode-state svg {width:36px;height:36px}
.mode-row.is-selected .mode-state {color:var(--cream)}

/* Back from a battle: stars just earned pop in one by one, a star slot just opened by the
   next mode fades in, then the next-stage arrow pulses once when that stage has just opened (camp-reveal.js). A dialog over the camp, such
   as a friend reveal, holds both until it closes. Reduced motion fades and glows instead. */
@keyframes star-earned-pop {
  0% {transform: scale(0) rotate(-45deg); opacity: 0}
  60% {transform: scale(1.4) rotate(10deg); opacity: 1}
  100% {transform: scale(1) rotate(0)}
}
@keyframes next-stage-pulse {
  50% {transform: scale(1.2); box-shadow: 0 var(--button-depth) var(--button-drop), 0 0 0 5px var(--yellow-top)}
}
@keyframes star-earned-fade {from {opacity: 0}}
@keyframes next-stage-glow {
  50% {box-shadow: 0 var(--button-depth) var(--button-drop), 0 0 0 5px var(--yellow-top)}
}
.chapter-progress .star-new {animation: star-earned-pop .5s cubic-bezier(.3, 1.4, .5, 1) calc(.35s + var(--reveal-order) * .3s) backwards}
.chapter-progress .slot-new {animation: star-earned-fade .6s ease-out calc(.6s + var(--reveal-order) * .3s) backwards}
.chapter-controls > .next-pulse {animation: next-stage-pulse .8s ease-in-out calc(.95s + var(--reveal-steps) * .3s)}
:root:has(#modal-root [data-modal-type]) :is(.chapter-progress .star-new, .chapter-progress .slot-new, .chapter-controls > .next-pulse) {animation-play-state: paused}
@media (prefers-reduced-motion: reduce) {
  .chapter-progress .star-new {animation-name: star-earned-fade}
  .chapter-controls > .next-pulse {animation-name: next-stage-glow}
}