@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=IM+Fell+English+SC&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-dark: #0a0806;
  --bg-wood: #1a120b;
  --bg-slot: #1a120b;
  --bg-slot-hover: #2a2018;
  --border-gold: #b8860b;
  --text-light: #d4c5a0;
  --text-gold: #d4a843;
  --text-dim: #7a6a50;
  --card-bg: #1e160e;
  --card-border: #5a4020;
  --candle-glow: rgba(255, 180, 60, 0.15);
}

body {
  background: var(--bg-dark);
  color: var(--text-light);
  font-family: 'MedievalSharp', serif;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
}

.screen { display: none; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* ===== GAME SCREEN ===== */
#game-screen {
  background: var(--bg-dark);
  background-image:
    radial-gradient(ellipse at 10% 50%, var(--candle-glow) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 50%, var(--candle-glow) 0%, transparent 40%);
  justify-content: flex-start;
  padding: 8px 10px;
  gap: 4px;
}

.candle-left, .candle-right {
  position: fixed; width: 120px; height: 120px; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.candle-left {
  top: 35%; left: -20px;
  background: radial-gradient(circle, rgba(255,160,40,0.2) 0%, transparent 70%);
  animation: candleFlicker 4s ease-in-out infinite;
}
.candle-right {
  top: 35%; right: -20px;
  background: radial-gradient(circle, rgba(255,160,40,0.2) 0%, transparent 70%);
  animation: candleFlicker 3.5s ease-in-out infinite 1s;
}
@keyframes candleFlicker {
  0%, 100% { opacity: 0.8; } 50% { opacity: 1; }
}

/* ===== PLAYER BARS ===== */
.player-bar {
  display: flex; align-items: center; gap: 20px; padding: 6px 20px;
  background: linear-gradient(90deg, transparent, var(--bg-wood), transparent);
  border-top: 1px solid rgba(90,61,32,0.3);
  border-bottom: 1px solid rgba(90,61,32,0.3);
  width: 100%; max-width: 700px; z-index: 1;
}
.player-name { font-family: 'IM Fell English SC', serif; font-size: 1.1em; color: var(--text-gold); min-width: 130px; }
.health-display, .energy-display, .deck-count { font-size: 1.1em; display: flex; align-items: center; gap: 5px; }
.health-display span:not(.heart) { font-weight: bold; color: #cc3300; }
.health-display .heart { font-size: 1.2em; }

/* ===== BOARD ===== */
.board-section { width: 100%; max-width: 700px; z-index: 1; }
.board-row { display: flex; justify-content: center; gap: 8px; margin: 3px 0; }

.board-divider { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 700px; z-index: 1; padding: 2px 0; }
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); }
.scales-icon { font-size: 1.8em; animation: scalesSway 4s ease-in-out infinite; }
@keyframes scalesSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* ===== SLOTS ===== */
.slot {
  width: 75px; height: 95px; background: var(--bg-slot);
  border: 2px solid rgba(90,61,32,0.4); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative; cursor: default; transition: all 0.2s;
}
.slot.has-card { cursor: pointer; }

.slot.highlight-slot {
  border-color: var(--text-gold);
  background: var(--bg-slot-hover);
  animation: slotPulse 1.2s ease-in-out infinite;
}
@keyframes slotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(184,134,11,0.3); border-color: rgba(184,134,11,0.5); }
  50% { box-shadow: 0 0 18px rgba(184,134,11,0.7); border-color: var(--text-gold); }
}

/* ===== MINI CARD ON BOARD ===== */
.mini-card {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 3px; border-radius: 4px; background: var(--card-bg);
  position: relative; transition: transform 0.2s;
}
.mini-card:hover { transform: scale(1.05); z-index: 5; }
.mini-card .mc-emoji { font-size: 2em; margin-top: 2px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.mini-card .mc-name { font-size: 0.55em; color: var(--text-gold); text-align: center; line-height: 1; margin: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mini-card .mc-stats { display: flex; justify-content: space-between; width: 100%; padding: 0 2px; }
.mini-card .mc-atk { color: #cc3300; font-weight: bold; font-size: 0.9em; }
.mini-card .mc-hp { color: #33aa33; font-weight: bold; font-size: 0.9em; }
.mini-card .mc-sigil { font-size: 0.7em; position: absolute; top: 2px; right: 2px; }
.mini-card .mc-strong { font-size: 0.7em; position: absolute; top: 2px; left: 2px; }
.mini-card.fresh { border: 1px solid rgba(100,200,100,0.4); }
.mini-card.exhausted { opacity: 0.7; filter: grayscale(0.3); }

@keyframes summonAppear {
  0% { transform: scale(0) rotateY(180deg); opacity: 0; }
  50% { transform: scale(1.2) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.mini-card.summoned { animation: summonAppear 0.5s ease-out; }

/* ===== HAND ===== */
.hand-area { width: 100%; max-width: 800px; z-index: 2; margin-top: 2px; }
.hand-label { text-align: center; font-size: 0.8em; color: var(--text-dim); margin-bottom: 3px; }
.hand-cards { display: flex; justify-content: center; gap: 8px; padding: 6px 10px; min-height: 130px; }

.hand-card {
  width: 90px; min-width: 90px; height: 125px;
  background: linear-gradient(135deg, #1e160e, #2a1f14);
  border: 2px solid var(--card-border); border-radius: 8px;
  padding: 5px; display: flex; flex-direction: column; align-items: center;
  cursor: grab; transition: all 0.2s; position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
.hand-card:hover {
  transform: translateY(-12px) scale(1.08);
  border-color: var(--text-gold);
  box-shadow: 0 8px 25px rgba(184,134,11,0.3);
  z-index: 10;
}
.hand-card:active { cursor: grabbing; }

.hand-card.hand-card-selected {
  transform: translateY(-16px) scale(1.1);
  border-color: var(--text-gold);
  box-shadow: 0 0 20px rgba(184,134,11,0.6), 0 8px 30px rgba(184,134,11,0.3);
  z-index: 11;
}

.hand-card .hc-cost {
  position: absolute; top: -6px; left: -6px;
  background: linear-gradient(135deg, #1a3a5c, #0d2844);
  border: 1px solid #4488cc; color: #88ccff;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8em; font-weight: bold;
}
.hand-card .hc-emoji { font-size: 2.4em; margin: 4px 0 2px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.hand-card .hc-name { font-size: 0.7em; color: var(--text-gold); text-align: center; margin-bottom: 2px; line-height: 1.1; }
.hand-card .hc-stats { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding: 0 3px; }
.hand-card .hc-atk { color: #cc3300; font-weight: bold; font-size: 0.9em; }
.hand-card .hc-hp { color: #33aa33; font-weight: bold; font-size: 0.9em; }

/* Strong card in hand */
.hand-card.hand-card-strong {
  border-color: #aa3020;
  background: linear-gradient(135deg, #2a1010, #1e160e);
}
.hand-card.hand-card-strong:hover {
  border-color: #cc4444;
  box-shadow: 0 8px 25px rgba(200,50,50,0.3);
}
.hand-card .hc-strong-mark {
  position: absolute; top: 4px; left: 4px; font-size: 0.9em;
}
.hand-card .hc-sigil-mark {
  position: absolute; top: 4px; right: 4px; font-size: 0.8em;
}
.hand-card .hc-sacrifice-hint {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: 0.6em; color: #cc4444; white-space: nowrap;
}

/* Sacrifice target */
.slot.sacrifice-target {
  border-color: #cc3300;
  box-shadow: 0 0 12px rgba(200,0,0,0.4);
  animation: sacrificeGlow 0.8s ease-in-out infinite;
  cursor: pointer;
}
@keyframes sacrificeGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(200,0,0,0.3); }
  50% { box-shadow: 0 0 18px rgba(200,0,0,0.7); }
}

/* Sacrifice bar */
.sacrifice-bar {
  width: 100%; max-width: 700px; z-index: 1;
  padding: 6px 16px;
  background: linear-gradient(90deg, transparent, rgba(150,20,20,0.3), transparent);
  border: 1px solid rgba(200,50,50,0.4);
  border-radius: 6px;
  font-size: 0.9em;
  color: #ff6644;
  text-align: center;
  animation: sacrificeBarPulse 1.5s ease-in-out infinite;
}
@keyframes sacrificeBarPulse {
  0%, 100% { border-color: rgba(200,50,50,0.3); }
  50% { border-color: rgba(200,50,50,0.7); }
}

/* ===== ACTION BAR ===== */
.action-bar { display: flex; gap: 10px; z-index: 3; margin-top: 2px; }

.btn-action {
  font-family: 'MedievalSharp', serif; font-size: 1em; padding: 8px 20px;
  border: 2px solid var(--border-gold); border-radius: 6px;
  cursor: pointer; transition: all 0.2s; color: var(--text-gold);
}
.btn-end-turn { background: linear-gradient(135deg, #3a2510, #5a3d20); }
.btn-end-turn:hover { background: linear-gradient(135deg, #5a3d20, #7a5030); box-shadow: 0 0 15px rgba(184,134,11,0.3); }

/* ===== MESSAGE LOG ===== */
.message-log {
  width: 100%; max-width: 700px; height: 36px; overflow-y: auto;
  padding: 4px 12px; background: rgba(10,8,6,0.8);
  border-top: 1px solid rgba(90,61,32,0.2);
  font-size: 0.75em; color: var(--text-dim); z-index: 1; margin-top: auto;
}
.log-entry { padding: 1px 0; border-bottom: 1px solid rgba(90,61,32,0.1); }
.log-entry:last-child { color: var(--text-light); }

/* ===== DAMAGE FLOAT ===== */
.damage-float {
  position: absolute; font-size: 1.5em; font-weight: bold; color: #ff4444;
  text-shadow: 0 0 6px rgba(255,0,0,0.7), 0 2px 4px rgba(0,0,0,0.8);
  pointer-events: none; z-index: 100; animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-40px) scale(1.3); } }

/* ===== CHOICE OVERLAY ===== */
.choice-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(10,8,6,0.92); backdrop-filter: blur(4px); z-index: 100;
  justify-content: center; align-items: center;
}
.choice-overlay.active { display: flex; }

.choice-box { text-align: center; }
.choice-title { font-family: 'IM Fell English SC', serif; font-size: 2em; color: var(--text-gold); margin-bottom: 8px; text-shadow: 0 0 15px rgba(184,134,11,0.4); }
.choice-subtitle { font-size: 1em; color: var(--text-dim); margin-bottom: 25px; font-style: italic; }
.choice-options { display: flex; align-items: center; justify-content: center; gap: 30px; }

.choice-card {
  width: 160px; height: 200px;
  background: linear-gradient(135deg, #1e160e, #2a1f14);
  border: 2px solid var(--border-gold); border-radius: 12px;
  padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.3s; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.choice-card:hover {
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 12px 30px rgba(184,134,11,0.4);
  border-color: var(--text-gold);
}
.choice-card.choice-card-attack { border-color: #cc3300; }
.choice-card.choice-card-attack:hover { border-color: #ff4444; box-shadow: 0 12px 30px rgba(200,50,50,0.3); }

.choice-emoji { font-size: 3em; margin-bottom: 6px; }
.choice-name { font-size: 1.1em; color: var(--text-gold); margin-bottom: 4px; }
.choice-desc { font-size: 0.75em; color: var(--text-dim); font-style: italic; margin-bottom: 6px; }
.choice-stats { font-size: 1em; font-weight: bold; color: var(--text-light); }
.choice-vs { font-size: 1.3em; color: var(--text-dim); font-weight: bold; }

/* ===== END SCREEN ===== */
#end-screen { background: rgba(10,8,6,0.95); justify-content: center; }
.end-content { text-align: center; }
.end-content h1 { font-family: 'IM Fell English SC', serif; font-size: 3em; margin-bottom: 20px; }
.end-content p { font-size: 1.2em; color: var(--text-dim); margin-bottom: 30px; max-width: 500px; line-height: 1.6; }

.btn-start {
  font-family: 'MedievalSharp', serif; font-size: 1.4em; padding: 15px 40px;
  background: linear-gradient(135deg, #3a2510, #5a3d20);
  border: 2px solid var(--border-gold); color: var(--text-gold);
  cursor: pointer; border-radius: 8px; transition: all 0.3s;
}
.btn-start:hover { background: linear-gradient(135deg, #5a3d20, #7a5030); box-shadow: 0 0 20px rgba(184,134,11,0.4); transform: scale(1.05); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #5a3d20; border-radius: 2px; }

@media (max-height: 700px) { .slot { width: 65px; height: 82px; } .hand-card { width: 80px; min-width: 80px; height: 110px; } }