/* Global styles */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #ececec;
}

#app {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Start screen */
.start-screen {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Position relative so that the character selection container can be absolutely positioned */
  position: relative;
  /* Align items at the start; vertical positioning is handled via absolute positioning */
  justify-content: flex-start;
  overflow-y: auto;

  /* Apply a rich background image for the character select screen.  Using
     the victory backdrop here makes the opening menu more visually
     engaging. The image is scaled to cover the entire area and
     centered to maintain its composition. */
  background-image: url('assets/victorybg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.start-screen h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 32px;
  text-align: center;
}

/*
 * Settings option as gear icon
 *
 * Reposition the existing settings option from beneath the Save Code
 * button to the top-left corner of the start screen. Hide its
 * original text and display a gear symbol instead. This ensures the
 * bottom UI does not shift between turns and provides a clear,
 * unobtrusive way to access the settings overlay. The underlying
 * element retains its click handler defined in game.js.
 */
.settings-option {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 32px;
  color: transparent;
  cursor: pointer;
  user-select: none;
  z-index: 10;
}
.settings-option::before {
  content: '⚙';
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.settings-option:hover::before {
  opacity: 0.75;
}

/*
 * Secret character trigger on the start screen.  This question mark is intentionally
 * subtle: it blends into the backdrop colour and only becomes more visible on
 * hover.  Placed near the top-right of the start screen, it does not overlap
 * other interactive elements.  Clicking it begins a game as the hidden
 * Secret Character.
 */
.secret-button {
  position: absolute;
  /* Position within the upper right quadrant without overlapping the
     settings gear; adjust margins to suit different screen sizes. */
  top: 80px;
  right: 40px;
  font-size: 42px;
  color: rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  z-index: 5;
  user-select: none;
  transition: color 0.2s ease;
}
.secret-button:hover {
  color: rgba(255, 255, 255, 0.5);
}

/* Save Code option on the start screen */
.save-code-option {
  margin-top: 360px; /* position it further toward the bottom of the start screen */
  font-size: 20px;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease;
}
.save-code-option:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* Always-visible hint below the Save Code button.  Previously this text was
   only available via a tooltip.  Placing it in a pseudo-element ensures
   players on touch devices and those who don't hover still understand
   the purpose of the Save Code option. */
.save-code-option::after {
  content: 'Resume your progress using a save code';
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Hint text beneath the Save Code option on the start screen */
.save-code-hint {
  margin-top: 8px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

/* Overlay for the save code entry modal.  Covers the entire
   viewport with a dark backdrop and centres the modal content. */
.save-code-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Container for the save code modal content.  Uses a dark
   background with padding and rounded corners. */
.save-code-modal-content {
  background: rgba(0, 0, 0, 0.85);
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Button hover effect inside the save code modal */
.save-code-modal-content button:hover {
  opacity: 0.85;
}

.character-select {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 1000px;
  /* Position the character selection container at the vertical midpoint
     between the top of the viewport and its middle (25% of the viewport
     height). Using absolute positioning with a transform centers the
     container horizontally and adjusts it vertically so that its center
     aligns with 25% of the screen height. */
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.character-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  width: 200px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.character-card:hover {
  transform: translateY(-4px);
}

.character-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.character-card h3 {
  margin: 10px 0 5px;
  font-size: 20px;
}

.character-card p {
  margin: 0 10px 15px;
  font-size: 14px;
  text-align: center;
}

/* Map screen */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Map container
 *
 * The original game drew the map inside a triangular div with a CSS
 * clip‑path and flex rows, which caused nodes to spill outside the
 * visible area.  The new design instead uses a pixel‑art mountain
 * background.  We keep the same sizing as before (80% width and 80vh
 * height, capped at 900px wide by 700px tall) but remove the
 * triangular clip path and border.  Nodes are positioned absolutely
 * within this container via JavaScript, so we no longer need to
 * specify a flex layout here.  The responsive background image
 * ensures the mountain scales smoothly across devices.
 */
.triangle-map {
  position: relative;
  width: 80%;
  max-width: 900px;
  height: 80vh;
  max-height: 700px;
  margin: auto;
  /* Remove the triangular clip and solid border */
  clip-path: none;
  border: none;
  overflow: hidden;
  /* Use the pixel art mountain as the map background */
  background-image: url('assets/map_bg.gif');
  background-size: cover;
  background-position: center bottom;
  /* Do not use flexbox here; nodes will be absolutely positioned */
}

/* The map rows are no longer used for layout because nodes are
 * absolutely positioned over the background.  We leave this rule
 * empty for backwards compatibility so any leftover DOM elements
 * styled as .map-row do not impose unwanted spacing. */
.map-row {
  /* intentionally left blank */
}

.map-node {
  /* Increase node size for better touch targets on mobile. */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0e0e0;
  /* Use a bright yellow border to make each node stand out more clearly
     on the map. */
  border: 2px solid #ffd93b;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Slightly larger font for the symbols. */
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.map-node.enemy { background: #e06666; }
.map-node.rest { background: #ffb347; }
.map-node.shop { background: #9fc5e8; }
.map-node.event { background: #b6d7a8; }
.map-node.star { background: #ffd966; }
.map-node.boss { background: #c0504d; }
.map-node.start { background: #ccc; }

/* Map legend overlay.  Provides a small explanatory key for the map
   symbols.  Positioned in the top left corner above the map, with a
   semi‑transparent dark background and rounded corners to blend
   naturally with the scene.  Each row holds a mini node icon and
   descriptive text. */
.map-legend {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font-size: 12px;
  line-height: 1.3;
  z-index: 3;
}

.map-legend .legend-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.map-legend .legend-row:last-child {
  margin-bottom: 0;
}

.map-legend .legend-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ffd93b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 6px;
}

/* Title within the map legend.  Render slightly larger and bold to
   distinguish it from the individual entries. */
.map-legend .legend-title {
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 6px;
}

/* Highlight reachable nodes with a bright outline and subtle glow to
 * ensure they stand out against the blue mountain background.  A
 * white outline combined with a box-shadow creates a glow effect.
 */
.map-node.reachable {
  outline: 3px solid #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* Battle screen */
/*
 * The battle screen is now split into three vertical canvases: a top bar for
 * high‑level information (HP/Gold/Level/Deck), a middle section for the
 * combat scene and player resources (energy and armor) and a bottom bar for
 * the player's hand of cards.  By default the battle screen stretches to
 * fill its container and stacks its children vertically.
 */
.battle-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-size: cover;
  /* Align the battle backdrop to the bottom so that sprites appear grounded. */
  background-position: bottom;
  overflow: hidden;
}

/* Top UI bar: displays HP, gold, level and deck button. The height is fixed
   to provide consistent layout regardless of screen size. */
/*
 * Top UI bar
 *
 * Increase the height of the top bar so that the deck (book) icon and other
 * elements have more breathing room. A height of 100px gives the UI a
 * balanced appearance while still leaving ample space for the battle area.
 */
/*
 * The .battle-top-ui class is styled alongside .battle-header in a shared rule later
 * in this stylesheet. Removing the standalone definition here prevents redundant
 * declarations and ensures a single source of truth for the top bar's styling.
 */

/* The status bar sits inside the centre area at the top and holds the
   energy indicators and the armor (block) counter in a single horizontal row.
   We use a flex layout to neatly align the elements without the need for
   JavaScript to compute margins. */
.status-bar {
  display: flex;
  align-items: center;
  /* Increase the gap between the energy and armour groups so they don't feel crowded */
  gap: 60px;
  /* Provide more breathing room around the status bar itself */
  margin: 30px;
}

/* Centre section for the battle: contains the status bar and the character
   sprites. The flex direction is column so that the status bar sits above
   the characters. */
.battle-center {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Top bar styles. Apply identical styling to both the legacy .battle-header and
   the new .battle-top-ui so that either class will position and style the
   high‑level information consistently. */
.battle-header,
 .battle-top-ui {
  position: relative;
  width: 100%;
  /* Height of the top bar. Reducing this from the previous 100px frees up more vertical
     space while maintaining enough room for icons and text. */
  /* Height of the top bar. Keep it consistent to provide space for icons and
     text without overwhelming the battle area. */
  /* Slightly reduce the top bar height from 90px to 80px to free up additional
     vertical space for the battle area while still accommodating icons and
     the deck button. */
  height: 80px;
  /* Semi‑opaque white background for the top bar so the underlying battle
     background shows through subtly. */
  background: rgba(255,255,255,0.8);
  /* Use a three‑column grid: left (auto), center (flexible), right (auto). */
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Align all items to the bottom of the bar. */
  align-items: end;
  /* Center the contents within their grid cells. */
  justify-items: center;
  /* Add bottom padding (25px) and horizontal padding (20px). No top padding. */
  padding: 0 20px 25px 20px;
}

/* HP/Gold container sits on the left of the top bar. The gap between HP and
   gold has been increased to give breathing room. The selector matches
   children of either .battle-header or .battle-top-ui. */
.battle-header .hp-gold-container,
 .battle-top-ui .hp-gold-container {
  /* Position the HP/gold stack at the bottom-left of the top bar with a fixed
     offset. By using absolute positioning here we can guarantee the
     counter sits on the baseline regardless of the header's height and
     padding. */
  position: absolute;
  bottom: 25px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.battle-header .hp-gold-container span,
.battle-top-ui .hp-gold-container span {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.battle-header .hp-gold-container span img,
.battle-top-ui .hp-gold-container span img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* Level indicator appears in the middle of the top bar */
.battle-header .level-indicator,
.battle-top-ui .level-indicator {
  font-size: 18px;
  font-weight: bold;
  /* Center the level indicator horizontally and anchor it to the bottom of the top bar.
     The transform ensures perfect centering regardless of its width. */
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

/* Deck button positioned on the right of the top bar */
.battle-header .deck-button,
 .battle-top-ui .deck-button {
  /* Place the deck button to the left of the pause button.  The right
     offset is increased to leave room for the pause control (40px
     wide plus margins). */
  position: absolute;
  bottom: 25px;
  right: 70px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Pause button styling
   The pause button reuses the same dimensions and aesthetic as the deck
   button so it sits harmoniously in the top bar. It also appears on
   the map screen where it anchors to the top‑right corner. */
.pause-button {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  font-size: 20px;
  line-height: 1;
}

/* Positioning for the pause button inside the battle top bar.  By
   specifying these selectors alongside the deck button, we ensure
   consistent placement within the header. */
.battle-header .pause-button,
.battle-top-ui .pause-button {
  position: absolute;
  bottom: 25px;
  /* Position the pause button at the far right edge of the top bar.  A
     20px margin keeps it aligned with other UI elements. */
  right: 20px;
}

/* Energy display below header: shows current/max energy and a row of dots. */
.energy-container {
  /* In the new layout the energy container sits inside the status bar, so
     allow the width to shrink to fit its contents and reset margins. */
  width: auto;
  display: flex;
  align-items: center;
  /* Increase spacing between the energy count and the row of dots */
  gap: 24px;
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}
/* energy-count displays text like "3/3" before dots */
.energy-count {
  /* Remove the fixed margin; spacing is handled by the energy container's gap */
  margin-right: 0;
  /* Give the AP display a distinct backdrop like enemy intents for better
     readability over varied backgrounds. */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.energy-dots {
  display: flex;
  /* Increase spacing between individual energy circles */
  gap: 16px;
}
.energy-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f1c232;
  border: 2px solid #cc9900;
}
.energy-dot.empty {
  background: transparent;
  border-color: #aaa;
}

/* Armor (block) display beneath energy.
   Shows a 3‑digit counter with leading zeros hidden and a shield icon next to it. */
.armor-container {
  display: flex;
  align-items: center;
  /* Reduce gap slightly so that the numeric armor counter sits closer to the shield icon */
  gap: 4px;
  /* In the new layout the armour container will sit in the status bar so
     reset its margin and rely on .status-bar spacing instead. */
  margin: 0;
  font-size: 0; /* remove gaps between inline-block digits */
}
.armor-count {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  height: 24px;
  white-space: nowrap;
  /* Add a translucent background and slight padding around the
     armour digits so that they remain legible over the battle backdrop. */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.armor-count .digit {
  width: 16px;
  text-align: center;
  line-height: 24px;
}
.armor-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #d9d9d9;
  border: 2px solid #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #555;
}

/* Characters area */
.battle-characters {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 30px;
  position: relative;
}

.player-area,
.enemy-area {
  /* Enemy areas share the remaining horizontal space equally. The player area
     occupies a fixed portion (40%), while enemies divide the rest. */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.player-area {
  /* Player area retains its fixed width to visually separate the protagonist
     from opponents. */
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Set individual sizes for player and enemy sprites in battle. */
.player-area img {
  max-width: 100%;
  /* Revert to the original sprite scale by limiting the height to the same
     baseline as enemy images (220px). This prevents the player character
     from appearing twice as large. */
  max-height: 220px;
  object-fit: contain;
  /* Raise the player sprite up so it doesn’t overlap the health bar */
  margin-bottom: 60px;
}

.enemy-area img {
  max-width: 100%;
  /* Base maximum height for enemy sprites. Specific sizes override this below. */
  max-height: 220px;
  object-fit: contain;
  /* Raise enemy sprites to prevent overlap with their health bars */
  margin-bottom: 60px;
}

/* Scale enemy sprites based on their size category. These classes are added
   dynamically in the battle renderer to reflect the enemy template. */
.enemy-area.small img {
  max-height: 180px;
}
.enemy-area.medium-small img {
  max-height: 200px;
}
.enemy-area.medium-large img {
  max-height: 240px;
}
.enemy-area.large img {
  max-height: 280px;
}

/* Health bars appear beneath characters. Set width to 60% of container to avoid stretching across entire area. */
.health-bar {
  width: 50%;
  height: 14px;
  background: #ddd;
  border-radius: 4px;
  overflow: hidden;
  /* Position health bars absolutely so they remain visible even when
     character sprites are tall. Anchor them near the bottom of the
     character area. */
  position: absolute;
  /* Position the bar slightly lower since sprites are raised */
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.health-fill {
  height: 100%;
  background: #4caf50;
  width: 100%;
  transition: width 0.3s ease;
}

.health-text {
  /* Position the HP text just below the health bar. Use absolute positioning
     relative to the character area so it stays visible with large sprites. */
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  /* Provide a light backdrop with subtle padding to improve readability on
     varied battle backgrounds. Mirror the style used for the energy
     counter so the fractional HP text does not blend into the scene. */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.enemy-intent {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
  /* Improve legibility of enemy intents by giving them a light backdrop
     similar to the block indicator. A translucent white background with a
     subtle shadow separates the text from busy battle backgrounds. */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Battle bottom (cards) */
/* Controls area placed below the battle scene for cards and end-turn button */
.battle-controls {
  width: 100%;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  /* A light grey background for the controls area. Using a neutral grey ensures cards
     stand out against the battle area and satisfies the user's request. */
  background: #f0f0f0;
}

.card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  width: 100px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
  /* Provide a subtle top border color by default; actual category colors override below */
  border-top: 6px solid transparent;
}

/* Card category colours: attack cards are red/orange, defend cards are blue, understanding cards are purple, skill cards are green.  The coloured bar at the top of each card helps players quickly
   identify the type of action. */
.card.attack {
  border-top-color: #e06666;
}
.card.defend {
  border-top-color: #6fa8dc;
}
.card.understanding {
  border-top-color: #b4a7d6;
}
.card.skill {
  border-top-color: #93c47d;
}

.card .card-cost {
  font-weight: bold;
  /* Reduce cost font size slightly for a cleaner look */
  /* Further reduce the cost font size for a more compact look */
  font-size: 12px;
  color: #b85c00;
}

.card .card-name {
  /* Reduce name font size to make long names fit better */
  font-size: 12px;
  font-weight: bold;
  margin: 4px 0;
  text-align: center;
}

.card .card-desc {
  /* Reduce description font size slightly */
  /* Further reduce description font size while keeping it legible */
  /* Increase font size slightly now that descriptions are shorter. */
  /* Increase description font size a bit for better readability */
  font-size: 11px;
  text-align: center;
}

/*
 * Style the abbreviated damage text on cards.  All occurrences of
 * "damage" in card descriptions are replaced with a <span> using this
 * class.  Use a bold red colour to draw attention to the damage value.
 */
.card .card-desc .dmg-text {
  color: #d00000;
  font-weight: bold;
}

/*
 * Style the word "Draw" on cards.  Instances of "Draw" in card
 * descriptions are wrapped in a <span> with this class.  Use a bold
 * green colour to signal card draw effects clearly.
 */
.card .card-desc .draw-text {
  color: #007500;
  font-weight: bold;
}

/* Animation for newly drawn cards.  When a card is drawn, it is
 * temporarily flagged and given the `new-card` class.  This
 * animation causes the card to scale up slightly then settle back
 * into place.  A brief delay before the animation begins gives
 * players a moment to notice that the card has appeared.  The
 * overall duration is short so as not to interrupt gameplay.
 */
@keyframes newCardBounce {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Newly drawn cards bounce slightly after being drawn.  A small delay
 * gives players time to notice the new card before the animation
 * begins.  We omit opacity changes so the card remains visible
 * throughout. */
.card.new-card {
  animation: newCardBounce 0.4s ease;
  animation-delay: 0.2s;
}

.end-turn-button {
  margin-left: 20px;
  padding: 10px 20px;
  background: #4a90e2;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  /* Ensure the end turn button matches the height of a card (140px)
     so it aligns perfectly with the player's hand. Use flexbox to
     vertically centre the label within the button. */
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Button used to cycle the order of enemies during multi‑enemy battles.
   Styled similarly to the end turn button but with a complementary
   colour so players can distinguish between ending their turn and
   rotating opponents. */
.recycle-button {
  margin-left: 10px;
  padding: 10px 20px;
  background: #6fa8dc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* Hint line beneath the map legend instructing players to begin at
   the bottom of the mountain. Styled with a small font and reduced
   opacity so it doesn't overpower the legend entries. */
.map-legend .legend-hint {
  font-size: 10px;
  margin-top: 4px;
  color: #ddd;
  opacity: 0.8;
}

/* Deck overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* ===== Math Challenge UI =====
   The math challenge overlay presents a simple arithmetic question with
   four multiple-choice answers.  Buttons are sized for touch screens and
   provide visual feedback on correct/incorrect selections. */
.math-modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.math-question {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.math-options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.math-option {
  padding: 14px;
  font-size: 20px;
  background: #f0f0f0;
  border: 2px solid #ccc;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s;
}

.math-option:hover {
  background: #e8e8e8;
}

.math-option.incorrect {
  background: #f8d7da !important;
  border-color: #f5c6cb !important;
  color: #721c24;
}

.math-option.correct {
  background: #d4edda !important;
  border-color: #c3e6cb !important;
  color: #155724;
}

/* Shake animation for wrong answers */
@keyframes math-shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

.math-option.shake {
  animation: math-shake 0.4s;
}

.math-message {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: #e06666;
  padding: 10px 20px;
  border-radius: 6px;
}

.deck-modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  /* Allow vertical panning via touch or stylus so that scroll gestures on
     interactive whiteboards (e.g., SmartBoards) work like native scrolls. */
  touch-action: pan-y;
}

.deck-modal h2 {
  margin-top: 0;
}

.deck-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.deck-list .card {
  width: 80px;
  height: 120px;
}

.deck-modal .close-btn {
  margin-top: 20px;
  padding: 8px 16px;
  background: #e06666;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ===== Shop UI =====
   The shop overlay displays a friendly shopkeeper, eight cards for sale,
   and optional buttons to heal or leave. Cards show their prices as
   small tags. When purchased, a card is dimmed and marked as sold. */
.shop-modal {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-modal h2 {
  margin: 0 0 10px;
  font-size: 28px;
}

/* Row container for shop header information (gold, HP and icon).  Display
   these items horizontally to reduce vertical height and keep the
   leave button visible without scrolling. */
.shop-header-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
  width: 100%;
}
/* Within the header row, remove bottom margins so gold and HP counters
   align vertically with the icon and avoid extra spacing. */
.shop-header-row .shop-gold,
.shop-header-row .shop-hp {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
/* Scale down the shop icon within the header row to avoid stretching
   the row height.  Margin-bottom is removed since the row controls spacing. */
.shop-header-row .shop-keeper {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0;
}

    /* Gold display in shop */
    .shop-gold {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }

/* HP display in the shop.  Mirrors the styling of the gold display so
   players can see their current health when buying healing.  Placed
   immediately below the gold counter in the shop modal. */
.shop-hp {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.shop-keeper {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 20px;
}
.shop-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.shop-card {
  position: relative;
}
.shop-card .price-tag {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #fce5cd;
  color: #333;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  pointer-events: none;
}
.shop-card.sold {
  opacity: 0.6;
}
.shop-card.sold .price-tag {
  background: #e6e6e6;
  color: #777;
}

/*
 * Generic modal button styling
 *
 * Many overlays are created via Game.createModal().  All buttons
 * created by that helper receive the class `modal-button` so that
 * they share a consistent look.  External overlays like the shop
 * continue to define their own button classes.  If you wish to
 * customise the colour for a specific modal, override the
 * background-color on that button element or assign an additional
 * class.
 */
.modal-button {
  margin-top: 20px;
  margin-right: 10px;
  padding: 10px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #4a90e2;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/*
 * Shop button styles
 *
 * The heal and exit buttons in the shop overlay share a
 * consistent base style for padding, border radius, box shadow and
 * cursor.  Specific colours are applied via modifier classes
 * `.heal` and `.exit`.  Centralising these styles makes it easy to
 * maintain a cohesive look across all shop actions.
 */
.shop-button {
  margin: 5px;
  padding: 10px 24px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #fff;
}
.shop-button.heal {
  background: #b6d7a8;
  color: #3d5229;
}
.shop-button.exit {
  background: #e06666;
  color: #fff;
}

/* Upgrade button in shop.  Use a warm gold to suggest improvement. */
.shop-button.upgrade {
  background: #ffd966;
  color: #665e26;
}
.shop-heal-button,
.shop-exit-button {
  margin: 5px;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.shop-heal-button {
  background: #b6d7a8;
  color: #3d5229;
}
.shop-exit-button {
  background: #e06666;
  color: #fff;
}

/* Shake and attack animations via classes as fallback (not used here but reserved) */
.shake {
  animation: shake 0.3s linear;
}

.attack-bounce {
  animation: attack-bounce 0.5s ease-out;
}

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

@keyframes attack-bounce {
  0% { transform: translateX(0); }
  50% { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

/*
 * Enemy block indicator
 *
 * Display a small shield icon and the current block value above each
 * enemy when they have block. Positioned at the top centre of the
 * enemy area, the indicator uses a light background for readability
 * across varied battle backdrops. A subtle shadow helps it stand out.
 */
/*
 * Enemy block indicator
 *
 * Display a small shield icon and the current block value above each
 * enemy's intent. This indicator is inserted before the intent in
 * the DOM and flows normally in the flex layout. A subtle box
 * shadow helps it stand out, while margins add breathing room.
 */
.enemy-block-indicator {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin-bottom: 4px;
}
.enemy-block-indicator .enemy-block-icon {
  margin-right: 2px;
}
.enemy-block-indicator .enemy-block-value {
  /* inherits font and weight */
}

/*
 * Status effects bar
 *
 * Display ongoing player buffs (e.g. +2 damage, +1 energy) in a compact
 * line beneath the energy and armour indicators. When no effects are
 * active the bar is omitted entirely. Text is centred and uses a
 * smaller font size so it doesn't compete visually with primary UI.
 */
.status-effects {
  /* Left align status text so that it begins under the energy counter. */
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  /* Indent the status text by the same margin used on the status bar (30px) so
     it aligns with the energy and armour indicators above. */
  padding-left: 30px;
  margin-top: -10px;
  margin-bottom: 10px;
  /* Provide a semi‑transparent background and slight padding to make
     status text readable over the battle backdrop. */
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/*
 * Player status icons
 *
 * Replaces the old textual status bar with a row of icons representing
 * ongoing combat effects and permanent bonuses. Each icon is accompanied
 * by a numeric value where applicable. Tooltips provide additional
 * context on hover. The container uses a semi‑transparent background
 * similar to the status bar for readability over varied battle
 * backdrops. Align the status icons with the energy counter using
 * the same horizontal padding.
 */
.player-status-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-left: 30px;
  margin-top: -10px;
  margin-bottom: 10px;
  /* Do not apply a full-width background to the container itself; instead
     each status icon carries its own pill background.  Align the
     container to the start of the row so it does not stretch across
     the entire battle area. */
  align-self: flex-start;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

/*
 * Enemy status container
 *
 * A horizontal row of small icons displayed beneath each enemy's
 * health bar. The container does not enforce a background by
 * default, allowing the icons to float against the battle backdrop.
 */
.enemy-statuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Status icons now sit above the intent and block indicators, so space
     them from the elements below using a bottom margin instead of a top
     margin. */
  margin-top: 0;
  margin-bottom: 4px;
  /* Slightly reduce font size so multiple statuses fit comfortably */
  font-size: 12px;
  font-weight: bold;
}

/*
 * Status icon element
 *
 * Shared styling for both player and enemy status icons. A small
 * pill‑shaped badge with a semi‑transparent background and slight
 * padding. Uses flexbox to centre content vertically. The font size
 * inherits from the parent container.
 */
.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  line-height: 1;
  color: #333;
  /* Show native tooltip on hover and indicate interactivity. Without this,
     some browsers may not display the title tooltip when inside a flex
     container. */
  cursor: help;
  pointer-events: auto;
}

/* Tooltip for status icons
 *
 * Custom tooltips are used instead of relying solely on the native
 * title attribute to ensure consistent behaviour across browsers and
 * avoid issues with flex containers. The tooltip floats above the
 * triggering element, centred horizontally, with a dark semi‑transparent
 * background and white text. It ignores pointer events so it doesn’t
 * interfere with hover detection. */
.battle-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 200px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.2;
  pointer-events: none;
  white-space: normal;
  text-align: center;
}

/*
 * Geometric shield icons
 *
 * The shield cards (Square Shield, Pentagon Shield, Septagon Shield,
 * Octagon Shield, Triangle Shield, Hexagon Shield, Nonagon Shield and
 * Decagon Shield) each display a small polygon icon beneath their
 * name.  These icons help reinforce the shape names visually without
 * cluttering the card with extra text.  The icons are drawn using
 * CSS clip-path polygons.  They share a common size and margin to
 * align neatly on the card.
 */
.card .shape-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto 4px;
  /* Use a neutral grey fill so icons stand out against the white card
     but do not draw attention away from the card text. */
  background-color: #d9d9d9;
}
.card .shape-square {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.card .shape-pentagon {
  clip-path: polygon(50% 0%, 93% 38%, 75% 100%, 25% 100%, 7% 38%);
}
.card .shape-septagon {
  clip-path: polygon(50% 0%, 85% 20%, 100% 60%, 80% 100%, 20% 100%, 0% 60%, 15% 20%);
}
.card .shape-octagon {
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.card .shape-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.card .shape-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.card .shape-nonagon {
  clip-path: polygon(50% 0%, 80% 10%, 100% 40%, 95% 75%, 75% 95%, 50% 100%, 20% 95%, 5% 75%, 0% 40%);
}
.card .shape-decagon {
  clip-path: polygon(50% 0%, 78% 5%, 100% 30%, 100% 65%, 80% 95%, 50% 100%, 20% 95%, 0% 65%, 0% 30%, 22% 5%);
}