: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;
}

.arena-wrap {
  max-width: 480px;
  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);
}

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

.arena-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;
  font-size: 13px;
  text-decoration: none;
}

.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;
}

.action-btn:active {
  border-color: var(--grass-dark) var(--grass-light) var(--grass-light) var(--grass-dark);
}

.danger-btn {
  border-color: #ff9a9a #b33a3a #b33a3a #ff9a9a;
  background: #e05656;
  color: #3a0d0d;
}

.arena-idle {
  text-align: center;
  padding: 16px 4px;
}

.arena-idle p {
  font-size: 14px;
  color: #cbb8ff;
  line-height: 1.5;
}

.arena-leaderboard-hint {
  margin-top: 10px !important;
  font-size: 12px !important;
}

.arena-leaderboard-hint a {
  color: var(--accent);
}

/* "Define the 'Bound' System" card (2026-07-25) - the new arena-only
   energy resource, shown/gated only on this idle/pre-run screen. */
.arena-energy-line {
  font-weight: bold !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
}

.arena-no-energy-hint {
  font-size: 12px !important;
  color: #ff9a9a !important;
  margin-top: 8px !important;
}

.arena-error {
  margin-top: 10px;
  color: #ff8a8a;
  font-size: 13px;
}

.arena-chain-row {
  text-align: center;
  margin-bottom: 10px;
}

.arena-chain-label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--panel-dark);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  font-weight: bold;
}

.arena-screen {
  /* Roman-arena backdrop (added 2026-07-24) instead of the page's own
     starry-space gradient - the fight itself happens "in the arena," the
     surrounding page chrome stays space-themed. */
  background-image: url('arena_background.svg');
  background-size: cover;
  background-position: center;
  border: 4px solid var(--panel-dark);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.arena-combatant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.arena-enemy { align-items: flex-end; }
.arena-player { align-items: flex-start; }

.arena-portrait {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.arena-enemy-portrait {
  background: #0a0a0a;
  border: 3px solid #444;
  color: #fff;
}

/* Player portrait is now the real composited monster (sprite_render.js),
   not a plain emoji circle - drop the old fixed circular frame. Deliberately
   NOT giving .arena-player-sprite-stack a fixed width/height (unlike the
   enemy's fixed circle): pet.css's accessory layers are positioned by
   percentage (Pet.sprite_anchors) relative to the STACK's own bounding
   box, which pet.js's page relies on sizing itself to its content (the
   sprite's actual JS-set px dimensions) - forcing a fixed size here would
   make that box stop matching the sprite's real footprint and misalign
   every accessory. A max-width/height clamp on the sprite itself achieves
   "don't get huge at high stages" without that side effect.
*/
.arena-player-portrait.has-image {
  max-width: 110px;
  max-height: 110px;
}

.arena-player-portrait {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.arena-player-sprite-stack,
.arena-enemy-sprite-stack {
  position: relative;
}

/* Enemy sprite (added 2026-07-24, NPC Creator integration) - same
   "don't fix the stack's own size" reasoning as the player's, since
   accessory-layer percentages are relative to whatever box the stack
   actually renders at. NPCs never have accessories, but the layers still
   exist so SpriteRender.renderFull() has somewhere to clear/write to. */
.arena-enemy-sprite.has-image {
  max-width: 110px;
  max-height: 110px;
}

.arena-enemy-sprite {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

/* Heal aura (2026-07-25, "Battle UI upgrades and foes" follow-up - "a
   green arua fade in then fade out behind the monster who used the
   healing ablity") - one of these lives inside each of the 3 possible
   creature-visual containers (enemy sprite-stack, enemy placeholder
   portrait, player sprite-stack - only ONE enemy variant is ever visible
   at a time, same as the existing shake-animation targeting). `inset`
   (not a fixed pixel size) so it scales with whatever that container's
   own current size is - the placeholder is a fixed 84px circle, the
   composited sprites vary up to 110px, and this glow just needs to sit
   behind whichever one is showing, not match it pixel-for-pixel. Sits
   first in DOM order within its container so later siblings (the actual
   sprite/emoji) paint over it. */
.arena-heal-aura {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 207, 111, 0.75) 0%, rgba(111, 207, 111, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

@keyframes arena-heal-fade {
  0% { opacity: 0; }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

.arena-heal-aura.arena-heal-glow {
  animation: arena-heal-fade 1.2s ease-in-out;
}

.arena-name {
  font-size: 13px;
  font-weight: bold;
  color: #f0e9ff;
}

/* Class label (2026-07-25, "Battle UI upgrades and foes" card - "both the
   players monster and the enemies monster should show both name and
   class") - the Archetype Grid identity (e.g. "Barbarian"), shown under
   the name (pet's own given name, or the enemy NPC's) for both sides. */
.arena-class {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  margin-top: -2px;
}

.arena-hp-track {
  width: 160px;
}

.stat-bar-track {
  height: 12px;
  background: var(--panel-dark);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #000a;
}

.arena-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6a6a, #ffd76b, #8fd14f);
  transition: width 0.3s ease;
}

.arena-hp-label {
  font-size: 11px;
  color: #cbb8ff;
}

/* Replaces the old single scrolling .arena-log/.arena-log-entry (2026-07-25
   follow-up - "make that area... nicer with two boxes... like an old
   style rolodex"). */

.arena-status-line {
  min-height: 1.2em;
  padding: 2px 4px;
  margin-bottom: 8px;
  font-size: 12px;
  font-style: italic;
  color: var(--accent);
  text-align: center;
}

.arena-action-log {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.arena-action-box {
  background: var(--panel-dark);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
}

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

/* `perspective` on the flipper (not the text itself) is what gives the
   rotateX() below its 3D "card flipping over" look rather than just a
   flat squash. `overflow: hidden` crops the text at the moment it's
   rotated edge-on to the viewer, mid-flip - the same instant the JS below
   swaps the actual text content, so the "reveal" reads as one continuous
   flip instead of a visible content jump-cut. */
.arena-action-box-flipper {
  perspective: 300px;
  overflow: hidden;
  min-height: 2.6em;
}

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

/* Two-phase flip, driven by battle_arena.js toggling these classes with a
   setTimeout in between (not a single CSS animation) because the actual
   TEXT has to change at the midpoint - old content rotates away first,
   then the new content rotates in from the opposite direction, like a
   rolodex card flipping over to its next entry. */
.arena-action-box-text.arena-flip-out {
  transform: rotateX(-100deg);
  opacity: 0;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

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

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

/* 2026-07-25 visual overhaul ("Battle UI upgrades and foes" card - "all
   options should go 50% across so there are 2 rows"): #arena-actions is
   the 2-column grid itself. #arena-abilities is `display:contents` so its
   dynamically-rendered button children flow directly into THIS grid as
   siblings of the static Attack button, instead of being confined to
   their own flex sub-box (which would make Attack a lone full-width row
   above a separate abilities grid, not one unified 2-column layout). */
.arena-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.arena-abilities {
  display: contents;
}

/* Every action - Attack and every ability alike - is now this same
   header (name + charges) / body (what it does) card shape. */
.arena-option-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 4px;
  padding: 10px 12px;
  cursor: pointer;
  border: 3px solid;
  border-color: #b0a0ff #6a5ac2 #6a5ac2 #b0a0ff;
  background: linear-gradient(135deg, #d8c8ff, #a48fef);
  color: #241a4a;
  font-family: inherit;
  border-radius: 8px;
}

.arena-option-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-weight: bold;
  font-size: 13px;
}

.arena-option-charges {
  font-size: 11px;
  font-weight: normal;
  opacity: 0.75;
  white-space: nowrap;
}

.arena-option-body {
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.85;
}

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

.arena-rest-btn {
  background: linear-gradient(135deg, #fff0c2, var(--accent) 55%, #f0a940);
  color: #2b1b00;
  border-color: #fff6dc #a5701a #a5701a #fff6dc;
}

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

.arena-over {
  text-align: center;
  margin-top: 14px;
  padding: 14px;
  background: var(--panel-dark);
  border-radius: 10px;
}

.arena-over p {
  font-size: 14px;
  margin: 0 0 12px;
}

/* "arena reward screen / loss screen" card (2026-07-25) - shared by
   #arena-over (defeat) and #arena-quit-summary (voluntary quit), same
   whole-run totals in both, see battle_arena.js's renderRunTotals(). */
.arena-run-totals {
  background: var(--space-deep);
  border-radius: 8px;
  padding: 10px;
  margin: 0 0 14px;
}

.arena-run-totals-line {
  font-size: 12px !important;
  color: #cbb8ff;
  margin: 0 0 6px !important;
  text-align: left;
}

.arena-run-totals-line:last-child {
  margin-bottom: 0 !important;
}

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

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

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

/* Between-rounds checkpoint (added 2026-07-24, "additional changes"
   update) - Fight/Rest/Quit now live here exclusively, not in the live
   in-combat action bar above. */
.arena-checkpoint {
  text-align: center;
  padding: 14px;
  background: var(--panel-dark);
  border: 2px solid var(--accent);
  border-radius: 10px;
}

.arena-checkpoint-message {
  font-size: 14px;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: bold;
}

.arena-checkpoint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.arena-mute-btn {
  font-size: 15px;
  padding: 6px 10px;
}

/* ---------- Combat feedback animations ----------
   Per the card's "addition features": the actor vibrates quickly on
   every action, a hit victim vibrates harder/longer than that, and a
   miss makes the target dodge with a slow slide-out-and-back instead. */

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

@keyframes arena-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 arena-dodge-miss {
  0% { transform: translateX(0); }
  50% { transform: translateX(22px); }
  100% { transform: translateX(0); }
}

/* No longer scoped to .arena-portrait - the player portrait and the
   enemy's real NPC sprite (both via sprite_render.js) dropped that class
   when they switched from the plain emoji-circle look to composited
   sprites, which silently broke their shake/dodge animations while the
   enemy's still-a-mystery "???" placeholder (which kept .arena-portrait)
   kept working - exactly the "enemy moves, player doesn't" bug report. */
.arena-anim-attack {
  animation: arena-shake-attack 0.35s ease-in-out;
}

.arena-anim-hit {
  animation: arena-shake-hit 0.5s ease-in-out;
}

.arena-anim-miss {
  animation: arena-dodge-miss 0.7s ease-in-out;
}

/* Leaderboard modal (button + markup) moved to dashboard.html/dashboard.css
   - "single point of entry for all leaderboard data viewing for players"
   (2026-07-25, "Unified Leader boards / options menu" card).
   .arena-modal-overlay/.arena-modal/.arena-modal-header (generic modal
   chrome, shared with the Options modal) moved to nav.css instead, since
   every player-facing page needs those now, not just this one. */

/* ---------- Desktop wide-screen widening ("Display changes" card, 2026-07-25) ----------
   The battle scene itself stays a vertical stack (enemy over player) -
   redesigning it into a genuine side-by-side layout is a much bigger
   visual-design change than this pass's scope, so this just gives the
   existing stack more comfortable breathing room on a wide screen
   rather than staying pinned to mobile width. */
@media (min-width: 700px) {
  .arena-wrap {
    max-width: 620px;
  }
}