:root {
  --space-deep: #1b1240;
  --space-mid: #362463;
  --panel: #2a1f52;
  --panel-light: #4a3a82;
  --panel-dark: #170f33;
  --grass-light: #8fd14f;
  --grass-dark: #5a9c2f;
  --accent: #ffd76b;
}

* { box-sizing: border-box; }

.hidden { display: none !important; }

body {
  margin: 0;
  padding: 24px;
  min-height: 100vh;
  background:
    radial-gradient(1px 1px at 10% 20%, #fff 100%, transparent),
    radial-gradient(1px 1px at 80% 10%, #fff 100%, transparent),
    radial-gradient(1px 1px at 60% 70%, #fff 100%, transparent),
    radial-gradient(1px 1px at 30% 85%, #fff 100%, transparent),
    radial-gradient(1px 1px at 90% 55%, #fff 100%, transparent),
    linear-gradient(180deg, var(--space-deep), var(--space-mid));
  font-family: 'Comic Sans MS', 'Segoe UI', cursive, sans-serif;
  color: #f0e9ff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exp-wrap {
  max-width: 560px;
  width: 100%;
  background: var(--panel);
  border: 6px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.exp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.exp-header h1 {
  margin: 0;
  font-size: 20px;
}

.link-btn {
  padding: 6px 12px;
  border: 2px solid;
  border-color: var(--grass-light) var(--grass-dark) var(--grass-dark) var(--grass-light);
  background: #79c94a;
  color: #23360f;
  font-weight: bold;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  display: inline-block;
}

.action-btn {
  padding: 10px 16px;
  cursor: pointer;
  border: 3px solid;
  border-color: var(--grass-light) var(--grass-dark) var(--grass-dark) var(--grass-light);
  background: #79c94a;
  color: #23360f;
  font-weight: bold;
  font-family: inherit;
  font-size: 14px;
  border-radius: 8px;
  touch-action: manipulation;
  display: block;
  width: 100%;
}

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.exp-hint {
  font-size: 12px;
  color: #cbb8ff;
  margin: 0 0 16px;
  line-height: 1.5;
}

.exp-section-title, .exp-result h2 {
  font-size: 16px;
  margin: 0 0 10px;
}

/* ---------- Home screen ("The home page for the expedition phase"
   card, 2026-07-25) - now the default/landing view: team management +
   browse-all-monsters + Launch Expedition, replacing the old world-map-
   first layout. ---------- */

.exp-progress-banner {
  background: var(--panel-dark);
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.exp-progress-text {
  margin: 0;
  font-size: 12px;
  color: var(--accent);
  font-weight: bold;
  line-height: 1.4;
}

.exp-worldpick {
  margin-top: 4px;
}

.exp-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-height: 340px;
  overflow-y: auto;
}

/* "deck view changes" follow-up (2026-07-25): styled like the STAT-card
   face specifically ("select it should only show the one styled like
   the one on the top right"), not the portrait-card face .deck-card
   uses on /deck - a compact sprite thumbnail + name/archetype + stat
   chips in a horizontal row, dense enough to compare several while
   picking a squad. See deck.css for the portrait-card counterpart. */

.exp-card-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 3px solid var(--panel-light);
  background: var(--panel-dark);
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.exp-card-btn.selected {
  border-color: var(--accent);
  background: var(--panel-light);
}

.exp-card-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.exp-card-btn-sprite-stack {
  width: 44px;
  height: 44px;
  flex: none;
}

.exp-card-btn-sprite-stack .pet-sprite.has-image {
  max-width: 42px;
  max-height: 42px;
}

.exp-card-btn-sprite-stack .pet-sprite {
  font-size: 30px;
}

.exp-card-btn-info {
  min-width: 0;
  flex: 1;
}

.exp-card-btn-name {
  font-weight: bold;
  font-size: 12px;
}

.exp-card-btn-archetype {
  font-size: 10px;
  color: #cbb8ff;
  margin-bottom: 3px;
}

.exp-card-btn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.exp-card-btn-stat-chip {
  font-size: 9px;
  color: #a8e678;
  background: var(--panel-dark);
  border: 1px solid var(--grass-dark);
  border-radius: 5px;
  padding: 1px 5px;
}

.exp-no-cards-hint {
  font-size: 12px;
  color: #cbb8ff;
  text-align: center;
  margin-bottom: 12px;
}

.exp-no-cards-hint a {
  color: var(--accent);
}

.exp-picker-error {
  font-size: 12px;
  font-weight: bold;
  color: #ff9a9a;
  text-align: center;
  margin-top: 8px;
}

/* ---------- World map (2026-07-25 same-day follow-up: "auto fight level
   after level" replaces picking one level - one clickable tile per WORLD
   now, not 10 level buttons). Same ".locked { opacity }" + swap-the-icon
   idiom planet.js's own .environment-card.locked already uses - kept
   consistent rather than inventing a new "locked" visual language. */

.exp-world-map {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.exp-world-tile {
  border-radius: 10px;
  border: 3px solid var(--panel-light);
  background-color: var(--panel-dark);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 12px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.exp-world-tile.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.exp-world-tile.cleared {
  border-color: var(--accent);
}

.exp-world-tile-title {
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
  align-self: flex-start;
}

.exp-world-tile-pips {
  display: flex;
  gap: 3px;
}

.exp-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.exp-pip.cleared {
  background: var(--accent);
  border-color: var(--accent);
}

.exp-world-tile-note {
  font-size: 10px;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 2px 6px;
  align-self: flex-start;
}


/* ---------- My Teams panel (2026-07-25 same-day follow-up) ---------- */

.exp-teams-panel {
  border: 2px solid var(--panel-light);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.exp-teams-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 8px;
}

.exp-teams-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.exp-team-row {
  display: flex;
  gap: 6px;
}

.exp-team-use-btn {
  flex: 1;
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  border: 2px solid var(--panel-light);
  background: var(--panel-dark);
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.exp-team-use-btn.selected {
  border-color: var(--accent);
  background: var(--panel-light);
}

.exp-team-delete-btn {
  padding: 4px 8px;
  border-radius: 6px;
  border: 2px solid var(--panel-light);
  background: var(--panel-dark);
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}

.exp-no-teams-hint {
  font-size: 11px;
  color: #cbb8ff;
  margin: 0;
}

.exp-level-progress {
  text-align: center;
  font-size: 12px;
  color: #cbb8ff;
  margin: 0 0 8px;
}

/* ---------- Battle scene (result screen) ---------- */

.exp-battle-scene {
  background-size: cover;
  background-position: center;
  border: 4px solid var(--panel-dark);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.exp-squad-side {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.exp-squad-member {
  background: rgba(23, 15, 51, 0.75);
  border-radius: 8px;
  padding: 8px;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110px;
}

.exp-squad-member.defeated {
  opacity: 0.45;
}

.exp-sprite-stack {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.exp-sprite-stack .pet-sprite.has-image {
  max-width: 56px;
  max-height: 56px;
}

.exp-sprite-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 4px;
}

.exp-squad-member-info {
  width: 100%;
  text-align: center;
}

.exp-squad-member-name {
  font-weight: bold;
  margin-bottom: 2px;
}

.exp-squad-member-archetype {
  font-weight: normal;
  color: #cbb8ff;
  font-size: 10px;
  margin-bottom: 3px;
}

.exp-squad-member-hp-track {
  height: 8px;
  background: var(--space-deep);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 3px;
}

.exp-squad-member-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grass-dark), var(--grass-light));
}

.exp-squad-member-hp-label {
  font-size: 10px;
  color: #cbb8ff;
}

/* ---------- Team "last action" rolodex boxes ----------
   Same flip mechanic/classes as battle_arena.css's own
   .arena-action-box* (copied rather than shared, matching this
   codebase's existing "each page's CSS is self-contained" convention -
   see nav.css's own doc-comment) - "use a scroll to show the most
   recent attacks by the player's team and the enemy team... same
   system as arena." One box per TEAM, not per unit - whichever squad
   member most recently acted flips that side's box. */

.exp-action-log {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.exp-action-box {
  background: rgba(23, 15, 51, 0.75);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
}

.exp-action-box-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #cbb8ff;
  opacity: 0.75;
  margin-bottom: 4px;
}

.exp-action-box-flipper {
  perspective: 300px;
  overflow: hidden;
  min-height: 2.6em;
}

.exp-action-box-text {
  font-size: 12px;
  color: #f0e9ff;
  line-height: 1.3;
  transform-origin: 50% 0%;
}

.exp-action-box-text.exp-flip-out {
  transform: rotateX(-100deg);
  opacity: 0;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

@keyframes exp-flip-in {
  0% { transform: rotateX(100deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}

.exp-action-box-text.exp-flip-in {
  animation: exp-flip-in 0.24s ease-out;
}

/* ---------- Shake/hit/miss animations - same keyframes as battle_arena.css ---------- */

@keyframes exp-shake-attack {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(4px); }
}

@keyframes exp-shake-hit {
  0%, 100% { transform: translateX(0) scale(1); }
  15% { transform: translateX(-12px) scale(1.05); }
  30% { transform: translateX(11px) scale(0.95); }
  45% { transform: translateX(-10px) scale(1.05); }
  60% { transform: translateX(9px) scale(0.97); }
  75% { transform: translateX(-6px); }
  90% { transform: translateX(4px); }
}

@keyframes exp-dodge-miss {
  0% { transform: translateX(0); }
  50% { transform: translateX(22px); }
  100% { transform: translateX(0); }
}

.exp-anim-attack { animation: exp-shake-attack 0.35s ease-in-out; }
.exp-anim-hit { animation: exp-shake-hit 0.5s ease-in-out; }
.exp-anim-miss { animation: exp-dodge-miss 0.7s ease-in-out; }

/* ---------- Whole-run recap screen ("arena reward screen / loss screen"
   card follow-up, 2026-07-25: "Add win-loss screens to expeditions") -
   a dedicated screen shown once the whole run ends, matching Battle
   Arena's own #arena-over/#arena-quit-summary treatment rather than a
   line of text left on the battle screen. See expedition.js's
   finishRun(). ---------- */

.exp-run-summary {
  text-align: center;
  max-width: 480px;
  margin: 40px auto 0;
  padding: 20px;
  background: var(--panel-dark);
  border-radius: 10px;
}

.exp-run-summary-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--accent);
  margin: 0 0 6px;
}

.exp-run-summary-message {
  font-size: 13px;
  color: #cbb8ff;
  margin: 0 0 14px;
}

.exp-run-totals {
  background: var(--space-deep);
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 14px;
  text-align: left;
}

.exp-run-totals-line {
  font-size: 12px;
  color: #cbb8ff;
  margin: 0 0 6px;
}

.exp-run-totals-line:last-child {
  margin-bottom: 0;
}

.exp-run-note-line {
  color: var(--accent);
  font-weight: bold;
}

/* "The home page for the expedition phase" card (2026-07-25): the
   reward shown above is a PREVIEW, not yet granted - this line makes
   that explicit so the recap doesn't read as "you already got this." */
.exp-run-wait-line {
  font-style: italic;
  opacity: 0.85;
}

@media (max-width: 480px) {
  body { padding: 10px; }
  .exp-wrap { padding: 14px; }
}

/* ---------- Desktop wide-screen widening ("Display changes" card, 2026-07-25) ----------
   .exp-squad-side already flex-wraps and .exp-level-grid is a grid, so
   both get more comfortable room automatically from a wider wrap; the
   card-list picker stays single-column (already reasonably wide). */
@media (min-width: 700px) {
  .exp-wrap {
    max-width: 760px;
  }
}