/* CSS STYLES */
:root {
  --card-hover-color: #ffc107;
  --energy-color: #00b8ff;
  --player-slot-color: rgba(0, 150, 255, 0.4);
  --player-slot-hover: rgba(0, 150, 255, 0.6);
  --enemy-slot-color: rgba(255, 0, 0, 0.2);
  --background-dark: #121212;
  --surface-dark: #1e1e1e;
  --primary-text: #e0e0e0;
  --border-color: #444;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}
body {
  font-family: "Poppins", sans-serif;
  background:rosybrown;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--primary-text);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
body.is-placing {
  cursor: pointer;
}
#game-container {
  width: 98vw;
  max-width: 1400px;
  max-height: 98vh;
  aspect-ratio: 16 / 9;
  background-color: #1c1c1c;
  border: 2px solid var(--border-color);
  display: flex;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
.hidden {
  display: none !important;
}

/* --- OVERLAYS --- */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  text-align: center;
}
.overlay h1 {
  color: var(--card-hover-color);
  text-shadow: 2px 2px 5px black;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-top: 0;
}
.setup-button {
  padding: 1rem 2rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  border: none;
  background-color: #555;
  color: #999;
  cursor: not-allowed;
  border-radius: 5px;
  transition: all 0.3s;
  width: 100%;
  max-width: 400px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
}
.setup-button.ready {
  background-color: #28a745;
  color: white;
  cursor: pointer;
}
.setup-button.ready:hover {
  background-color: #218838;
  transform: scale(1.05);
}

/* --- SETUP PHASE --- */
#stats-display {
  display: flex;
  gap: 2rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
#stats-display p {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 600;
}
#stats-display .wins {
  color: #28a745;
}
#stats-display .losses {
  color: #dc3545;
}

#character-roster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem 0;
  max-height: 50vh;
  overflow-y: auto;
  padding: 1rem;
}
#placement-sidebar {
  width: 25%;
  min-width: 280px;
  background-color: var(--surface-dark);
  border-right: 2px solid var(--border-color);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
#placement-sidebar h2 {
  color: var(--card-hover-color);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  text-shadow: 1px 1px 3px black;
}
#placement-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
#main-game-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.roster-char {
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-color);
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  width: 120px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s, box-shadow 0.3s;
}
.roster-char.flipped {
  transform: rotateY(180deg) scale(1.05);
}
.roster-char:not(.flipped):hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--card-hover-color);
  border-color: var(--card-hover-color);
}
.roster-char-front,
.roster-char-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0.6rem;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.roster-char-back {
  background-color: #333;
  transform: rotateY(180deg);
  justify-content: center;
  gap: 4px;
}
.stat-bar-container {
  font-size: 0.7rem;
  text-align: left;
}
.stat-bar {
  width: 100%;
  height: 8px;
  background-color: #555;
  border-radius: 4px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  background-color: var(--card-hover-color);
}
/* --- NEW STYLE FOR MAX STATS --- */
.stat-bar-fill.max-stat {
    background: linear-gradient(to right, #a133ff, #d633ff);
}
.roster-sprite {
  width: 100%;
  height: 80px;
  border-radius: 5px;
  margin: 0 auto 5px;
  object-fit: cover;
}
.roster-char.selected {
  opacity: 0.4;
  cursor: not-allowed;
  transform: scale(0.95);
}
.roster-char.locked {
  cursor: not-allowed;
  filter: grayscale(1) brightness(0.5);
}
.lock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock-overlay svg {
  width: 40%;
  height: 40%;
  fill: #fff;
}

#animation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}
.flash-animation {
  animation: screen-flash 0.5s ease-out;
}
@keyframes screen-flash {
  0% {
    background: transparent;
  }
  50% {
    background: rgba(255, 255, 255, 0.7);
  }
  100% {
    background: transparent;
  }
}

/* --- BATTLE STYLES --- */
#battlefield {
  flex-grow: 1;
  background: url(bg/normal.jpg) scroll;
  background-size: cover;
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 0.1fr 1.5fr 1.5fr;
  grid-template-rows: repeat(2, 1fr);
  padding: 0;
  gap: 5px;
}
#dividing-line {
  grid-column: 3;
  grid-row: 1 / -1;
  width: 50px;
  background-color: rgba(255, 0, 0, 0.073);
  justify-self: center;
}
.placement-slot {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.placement-slot.player-zone {
  border: 2px dashed var(--player-slot-color);
}
.placement-slot.player-zone.available {
  background-color: var(--player-slot-color);
}
.placement-slot.player-zone.available:hover {
  background-color: var(--player-slot-hover);
  cursor: pointer;
}

#slot-p1 {
  grid-column: 1;
  grid-row: 1;
}
#slot-p2 {
  grid-column: 1;
  grid-row: 2;
}
#slot-p3 {
  grid-column: 2;
  grid-row: 1;
}
#slot-p4 {
  grid-column: 2;
  grid-row: 2;
}
#slot-e1 {
  grid-column: 4;
  grid-row: 1;
}
#slot-e2 {
  grid-column: 4;
  grid-row: 2;
}
#slot-e3 {
  grid-column: 5;
  grid-row: 1;
}
#slot-e4 {
  grid-column: 5;
  grid-row: 2;
}

.character {
  max-width: 160px;
  width: 90%;
  aspect-ratio: 2 / 3;
  border: 3px solid transparent;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1%;
  position: relative;
  transition: all 0.2s;
  border-radius: 5px;
  margin: auto;
}
.character.in-placement:hover {
  border-color: #dc3545;
}
.character.active-turn {
  border-color: transparent;
}
.character.targetable {
  cursor: pointer;
  transform: scale(1.1);
  filter: drop-shadow(0 0 10px #dc3545);
}
.character.dead {
  opacity: 0.5;
  filter: grayscale(100%);
}
.character.is-hit {
  animation: shake-animation 0.3s linear;
}
@keyframes shake-animation {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(8px);
  }
}

@keyframes dodge-animation-player {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-40px) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes dodge-animation-enemy {
  0% {
    transform: scaleX(-1) translateX(0);
  }
  50% {
    transform: scaleX(-1) translateX(-40px) scale(0.95);
    opacity: 0.7;
  }
  100% {
    transform: scaleX(-1) translateX(0);
  }
}
.character.is-dodging:not(.enemy) {
  animation: dodge-animation-player 0.5s ease-out;
}
.character.is-dodging.enemy {
  animation: dodge-animation-enemy 0.5s ease-out;
}

.character-sprite {
  width: 95%;
  height: 95%;
  margin-bottom: 5px;
  border-radius: 4px;
  object-fit: contain;
  transition: all 0.3s ease-in-out;
  filter: drop-shadow(2px 2px 5px black);
    z-index: 1;        /* <-- ADD THIS LINE */

}
.character-sprite.attacking {
  opacity: 0;
  transition: opacity 0.1s;
}
.character.active-turn .character-sprite {
  filter: drop-shadow(0 0 12px var(--card-hover-color));
}
.character .is-hit-sprite {
  filter: grayscale(100%);
  animation: hit-flash 0.3s;
}
@keyframes hit-flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.character.enemy {
  transform: scaleX(-1);
}
.character.enemy.targetable {
  transform: scaleX(-1) scale(1.1);
  filter: drop-shadow(0 0 10px #dc3545);
}
/* --- REPLACEMENT CSS RULE --- */
.character.enemy .character-name,
.character.enemy .health-bar-container,
.character.enemy .energy-bar-container,
.character.enemy .status-effects-container { /* <-- ADDED THIS LINE */
  transform: scaleX(-1);
}

.effect-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
    z-index: 10; /* <-- ADD THIS LINE */

}
.effect-overlay img {
  max-width: 150%;
  max-height: 150%;
}

.damage-popup {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px black;
  pointer-events: none;
  animation: float-up 1s ease-out forwards;
}
.damage-low {
  color: white;
}
.damage-medium {
  color: yellow;
}
.damage-high {
  color: red;
  font-size: 1.8rem;
}
@keyframes float-up {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50px);
    opacity: 0;
  }
}

.status-dodged {
  color: var(--energy-color);
  font-size: 1.6rem;
  font-style: italic;
}
.card-played-popup {
  color: #ffeb3b;
  font-size: 1.2rem;
  top: -5%;
}

.character.enemy .damage-popup {
  transform: translateX(50%) scaleX(-1);
}

.character-name {
  font-size: clamp(0.7rem, 1.5vw, 1rem);
  font-weight: bold;
}
.health-bar-container,
.energy-bar-container {
  width: 100%;
  height: 10px;
  background-color: #333;
  border: 1px solid #111;
  border-radius: 5px;
  margin-top: 5px;
  position: relative;
}
.health-bar {
  height: 100%;
  background: linear-gradient(to right, #28a745, #5cff80);
  border-radius: 4px;
  transition: width 0.5s;
}
.energy-bar {
  height: 100%;
  background: linear-gradient(to right, #00b8ff, #80dfff);
  border-radius: 4px;
  transition: width 0.5s;
}
.shield-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(0, 191, 255, 0.7);
  border-radius: 4px;
  transition: width 0.5s;
}

#ui-panel {
  flex: 0 0 35%;
  min-height: 180px;
  background-color: var(--surface-dark);
  border-top: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
}
#turn-info {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.1rem);
  margin-bottom: 0.6rem;
  color: var(--card-hover-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#player-hand {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-grow: 1;
  overflow: hidden;
}
.card {
  width: 100%;
  max-width: 140px;
  max-height: 93px;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background-color: #2a2a2a;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 5px 15px var(--card-hover-color);
  border-color: var(--card-hover-color);
}
.card.disabled {
  cursor: not-allowed;
  opacity: 0.6;
  filter: grayscale(50%);
}
.card.copied-card {
  border-color: #8a2be2;
  box-shadow: 0 0 15px #8a2be2;
}
.card-name {
  font-size: clamp(0.8rem, 1.5vw, 1rem);
  font-weight: bold;
  text-align: center;
}
.card-type {
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  font-style: italic;
  text-align: center;
  color: #ccc;
  margin: 5px 0;
}
.card-cost {
  font-size: clamp(0.7rem, 1.2vw, 0.8rem);
  font-weight: bold;
  text-align: right;
  color: var(--energy-color);
}
#card-tooltip {
  position: fixed;
  background-color: #222;
  border: 1px solid var(--card-hover-color);
  border-radius: 5px;
  padding: 10px;
  max-width: 200px;
  font-size: 0.8rem;
  text-align: center;
  z-index: 300;
  pointer-events: none;
}

#post-game-overlay .content,
#unlock-popup .content {
  background-color: var(--surface-dark);
  padding: 2rem 3rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
}
#post-game-overlay .win {
  color: #28a745;
}
#post-game-overlay .loss {
  color: #dc3545;
}
#unlock-popup p {
  font-size: 1.2rem;
  margin-top: 0;
}
#unlock-popup .highlight {
  color: var(--card-hover-color);
  font-weight: bold;
  font-size: 1.5rem;
}

/* --- Specific Character Size Adjustments --- */
.character.shingen {
  max-width: 240px; /* Make his container wider */
  aspect-ratio: 2 / 4; /* Make his container taller */
}

/* --- DEBUG PANEL STYLES --- */
#debug-toggle-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  opacity: 0.7;
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #000;
  cursor: pointer;
}

#debug-panel {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 300px;
  max-height: 90vh;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #fff;
  color: #fff;
  z-index: 1000;
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  overflow-y: auto;
  border-radius: 5px;
}
#debug-content p {
  margin: 2px 0;
}
#debug-content .debuff {
  color: #ff6b6b;
  font-weight: bold;
}
#debug-content .target-ally {
  color: #f9b233;
  font-weight: bold;
}
#debug-content .target-enemy {
  color: #83d6e9;
  font-weight: bold;
}
/* --- ADDED STYLES FOR NEW FEATURES --- */

/* Makes the "New Game" button red */
#new-game-btn {
  background-color: #dc3545;
}
#new-game-btn:hover {
  background-color: #c82333;
}

/* Styles for the boss unlock popup */
#unlocked-boss-sprite {
  width: 120px;
  height: auto;
  margin-bottom: 1rem;
  border: 3px solid var(--card-hover-color);
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Styles for the new game confirmation popup */
.confirm-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}
.confirm-buttons .setup-button {
  width: auto;
  min-width: 150px;
}
#confirm-yes-btn {
  background-color: #dc3545; /* Red for the destructive action */
  color: white;
  cursor: pointer;
}
#confirm-yes-btn:hover {
  background-color: #c82333;
}
/* --- Styles for Round Progression Tracker --- */
#progression-overlay {
  flex-direction: column; /* Center the tracker */
  background: rgba(10, 10, 10, 0.85); /* Darker background */
}

#round-progression-tracker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.progression-node {
  border-radius: 50%;
  border: 2px solid var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 50px;

}

/* Glowing Animation */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px #fff, 0 0 10px #fff; }
  50% { box-shadow: 0 0 15px #fff, 0 0 25px var(--card-hover-color); }
}

.progression-node.glowing {
  animation: glow 1.5s infinite ease-in-out;
}

/* Normal round circles */
.progression-node.small-circle {
  width: 15px;
  height: 15px;
  background-color: #ffffff; /* Red for incomplete rounds */
}

/* Completed normal round circles with slow dimming transition */
.progression-node.small-circle.completed {
  background-color: var(--card-hover-color); /* Yellow for completed */
  border-color: var(--card-hover-color);
  transition: background-color 3s ease, border-color 3s ease;
}

/* Boss round nodes */
.progression-node.boss-round {
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
}

.progression-node.boss-round img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: brightness(100%);
}

/* Completed boss round nodes with slow dimming transition */
.progression-node.boss-round.completed img {
  filter: brightness(50%); /* Dimmed image */
  transition: filter 3s ease;
}

/* Line connecting nodes */
.progression-line {
  height: 2px;
  background-color: var(--text-color);
  width: 20px;
}
/* --- Styles for Status Effect Icons --- */
.status-effects-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 22px; /* Fixed height to prevent layout shifts */
  margin-top: 4px;
  position: absolute;
  bottom: -25px; /* Position below the character bars */
  width: 100%;
}

.status-icon {
  width: 20px;
  height: 20px;
  position: relative; /* Required for tooltip positioning */
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 2px;
}

.status-icon img {
  width: 100%;
  height: 100%;
}

/* Tooltip text */
.status-icon .tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #111;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  border: 1px solid var(--card-hover-color);
  
  /* Position the tooltip */
  position: absolute;
  z-index: 10;
  bottom: 135%; /* Position above the icon */
  left: 50%;
  margin-left: -70px; /* Use half of the width to center */
  
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Show the tooltip text when you mouse over the icon container */
.status-icon:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}
/* --- Styles for Loading Screen --- */
#loading-overlay {
  /* This ensures the loading screen is visible by default */
  display: flex;
}

#progress-bar-container {
  width: 100%;
  max-width: 400px;
  height: 30px;
  background-color: #333;
  border: 2px solid var(--border-color);
  border-radius: 15px;
  margin: 1.5rem auto;
  overflow: hidden;
}

#progress-bar {
  width: 0%; /* Starts at 0 */
  height: 100%;
  background: linear-gradient(to right, #28a745, #5cff80);
  transition: width 0.3s ease-in-out;
}

#progress-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--card-hover-color);
}#loading-asset-text {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #ccc;
  height: 20px; /* Prevents the layout from shifting */
  font-style: italic;
}/* --- Styles for Preloader Failure Summary --- */
#loading-overlay .failure-list {
  text-align: left;
  font-size: 0.8rem;
  max-height: 150px;
  overflow-y: auto;
  background: rgba(0,0,0,0.3);
  padding: 10px;
  border-radius: 5px;
  margin-top: 1rem;
}

#loading-overlay .failure-list li {
  color: #ffc107; /* Yellow to stand out */
}
/* --- Styles for Support Button & Popup --- */

#support-btn {
  position: absolute;
  top: 21px;
  left: 5%;
  z-index: 999;
  opacity: 0.8;
  padding: 5px 10px;
  background: #1e90ff; /* A nice blue color */
  color: white;
  border: 1px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#support-btn:hover {
  opacity: 1;
}

.kofi-button {
  background-color: #00b9fe !important; /* Ko-fi's brand blue */
  color: white !important;
  cursor: pointer !important;
  display: inline-block;
  text-decoration: none;
}

.kofi-button:hover {
  background-color: #00a0d9 !important;
}/* --- Styles for Online Player Counter --- */

#online-counter {
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #444;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ccc;
  backdrop-filter: blur(5px);
}

.online-indicator {
  width: 12px;
  height: 12px;
  background-color: #28a745;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}