/* ==========================================================================
   TYRIA SURVIVORS - HADES UI DESIGN SYSTEM (SUPERGIANT GAMES INSPIRATION)
   ========================================================================== */

:root {
  --bg-deep: #08060d;
  --bg-obsidian: #0f0b18;
  --bg-card: rgba(18, 14, 28, 0.96);
  --bg-card-hover: rgba(28, 20, 42, 0.98);
  
  /* Hades Olympian Gold & Metallic Bronze */
  --gold-olympian: #e5b842;
  --gold-bright: #fde68a;
  --gold-glow: rgba(229, 184, 66, 0.6);
  --gold-dark: #855d14;
  --bronze-trim: #4a3821;
  
  /* Underworld Blood Red */
  --blood-red: #dc2626;
  --blood-red-glow: rgba(220, 38, 38, 0.7);
  --blood-crimson: #991b1b;
  
  /* Boon Rarities */
  --rarity-common: #94a3b8;
  --rarity-rare: #38bdf8;
  --rarity-epic: #c084fc;
  --rarity-heroic: #fb923c;
  --rarity-legendary: #facc15;
  
  /* Typography */
  --font-hades-title: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-hades-serif: 'Cinzel', 'Marcellus', serif;
  --font-hades-ui: 'Outfit', -apple-system, sans-serif;
  
  --shadow-hades: 0 16px 40px rgba(0, 0, 0, 0.95), 0 0 30px rgba(229, 184, 66, 0.2);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#game-container, #game-canvas, .mobile-controls, .joystick-zone, .mobile-action-zone {
  touch-action: none;
}

.overlay-modal, .hades-modal-box, .mirror-talents-container, .hades-boon-cards-grid, .upgrade-cards-container {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain;
}

.character-selection-wrapper {
  position: relative;
  width: 100%;
}

.character-selection {
  touch-action: pan-x pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain;
}

html, body {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background-color: var(--bg-deep);
  color: #f8fafc;
  font-family: var(--font-hades-ui);
}

#game-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  background: radial-gradient(circle at center, #1c152a 0%, #060408 100%);
}

/* Universal Hidden Rule (Immediate Display None & Pointer None) */
.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

#game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 1;
}

/* ==========================================================================
   HADES IN-GAME HUD SYSTEM
   ========================================================================== */

.hud-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: env(safe-area-inset-top, 1.2rem) 1.5rem env(safe-area-inset-bottom, 1.2rem) 1.5rem;
  transition: opacity 0.3s ease;
}

.hud-layer.hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Top Bar: Hades Escape / Darkness Track & Obols */
.hades-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.hades-xp-container {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 55%;
  max-width: 560px;
  pointer-events: auto;
}

.xp-frame-left, .xp-frame-right {
  font-size: 1.1rem;
  color: var(--gold-olympian);
  text-shadow: 0 0 10px var(--gold-glow);
}

.xp-bar-track {
  position: relative;
  width: 100%;
  height: 24px;
  background: rgba(12, 9, 20, 0.95);
  border: 1.5px solid var(--gold-olympian);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 15px rgba(229, 184, 66, 0.25);
}

.xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0369a1 0%, #38bdf8 70%, #a5f3fc 100%);
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.9);
  transition: width 0.15s ease-out;
}

.xp-content-row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.rank-tag {
  color: var(--gold-bright);
  font-family: var(--font-hades-serif);
}

.xp-counter {
  color: #f0f9ff;
  font-size: 0.72rem;
}

/* Hades Resource Counters (Obols, Kills, Escape Time, Darkness, Rerolls) */
.hades-currencies-row {
  display: flex;
  gap: 0.6rem;
  pointer-events: auto;
  flex-wrap: wrap;
}

.currency-pill {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(18, 14, 26, 0.94);
  border: 1.5px solid var(--gold-olympian);
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  font-family: var(--font-hades-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), 0 0 10px rgba(229, 184, 66, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.currency-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 14px var(--gold-glow);
}

.time-pill { color: #f1f5f9; }
.kills-pill { color: #fca5a5; }
.obols-pill { color: var(--gold-bright); }
.darkness-pill {
  color: #c084fc;
  border-color: #a855f7;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7), 0 0 10px rgba(168, 85, 247, 0.35);
}
.reroll-pill {
  color: #fbbf24;
  border-color: #d97706;
}

/* ==========================================================================
   HADES BOTTOM-LEFT VITALS (ANGULAR LIFEBAR, DEATH DEFIANCE, GOD CALL)
   ========================================================================== */

.hades-vitals-container {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 380px;
  pointer-events: auto;
}

.lifebar-wrapper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lifebar-crest {
  width: 48px;
  height: 48px;
  background: radial-gradient(circle, #2d1810 0%, #0e0705 75%);
  border: 2px solid var(--gold-olympian);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 0 18px rgba(229, 184, 66, 0.45);
  position: relative;
}

.lifebar-crest::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  pointer-events: none;
}

.lifebar-box {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex-grow: 1;
}

.lifebar-numbers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.life-title-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.life-title {
  color: var(--gold-olympian);
  font-family: var(--font-hades-serif);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

/* Death Defiance Skulls */
.death-defiance-pips {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.defiance-pip {
  font-size: 0.95rem;
  filter: drop-shadow(0 0 6px #ef4444);
  animation: defiancePulse 2s infinite ease-in-out;
}

@keyframes defiancePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #ef4444); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px #f87171); }
}

.hp-ratio {
  color: #fca5a5;
  font-family: var(--font-hades-serif);
  font-size: 0.92rem;
}

/* Angular Hades Beveled Health Track */
.lifebar-track {
  position: relative;
  width: 270px;
  height: 20px;
  background: rgba(14, 6, 10, 0.96);
  border: 2px solid #991b1b;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 15px rgba(220, 38, 38, 0.4);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Decaying White/Pink Ghost Bar */
.lifebar-ghost-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #fca5a5;
  opacity: 0.7;
  transition: width 0.35s ease-out;
}

/* Active Blood Red Health Fill */
.lifebar-fill {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #7f1d1d 0%, #dc2626 65%, #f87171 100%);
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
  transition: width 0.12s ease-out;
}

/* Dash Diamonds / Bloodstone Cast Pips */
.dash-pips-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.dash-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold-olympian);
  font-family: var(--font-hades-serif);
  letter-spacing: 0.08em;
}

.dash-diamonds-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.dash-diamond {
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: #0ea5e9;
  border: 1.5px solid #e0f2fe;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.9);
  transition: all 0.2s ease;
}

.dash-diamond.spent {
  background: rgba(14, 165, 233, 0.15);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: none;
}

/* Olympian God Gauge (Tanrı Çağrısı) */
.god-gauge-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(16, 12, 24, 0.88);
  border: 1px solid rgba(229, 184, 66, 0.4);
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
  max-width: 320px;
}

.god-gauge-header {
  display: flex;
  flex-direction: column;
}

.god-gauge-title {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--gold-bright);
  font-family: var(--font-hades-serif);
  letter-spacing: 0.08em;
}

.god-call-status {
  font-size: 0.58rem;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

.god-gauge-track {
  position: relative;
  width: 130px;
  height: 12px;
  background: rgba(8, 5, 14, 0.95);
  border: 1.5px solid var(--gold-olympian);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9);
}

.god-gauge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d97706 0%, #f59e0b 60%, #fde68a 100%);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.9);
  transition: width 0.15s ease-out;
}

.god-gauge-segments {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
}

.god-gauge-segments .seg {
  width: 1.5px;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.hades-call-badge {
  background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%);
  border: 1px solid #fde68a;
  color: #fff;
  font-family: var(--font-hades-serif);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.hades-call-badge.disabled {
  opacity: 0.45;
  filter: grayscale(0.8);
  cursor: not-allowed;
  box-shadow: none;
}

.hades-call-badge.ready {
  animation: callReadyPulse 1.2s infinite alternate;
}

@keyframes callReadyPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
  100% { transform: scale(1.08); box-shadow: 0 0 20px rgba(253, 230, 138, 0.9); border-color: #fff; }
}

.key-badge {
  background: #1e142c;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 0.05rem 0.3rem;
  border-radius: 2px;
  font-size: 0.62rem;
}

/* Active Boons Sidebar */
.hades-boon-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.boon-category {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.category-header {
  font-size: 0.68rem;
  font-family: var(--font-hades-serif);
  color: var(--gold-olympian);
  letter-spacing: 0.12em;
}

.boon-slots-list {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.inv-slot {
  width: 42px;
  height: 42px;
  background: rgba(22, 16, 32, 0.95);
  border: 1.5px solid var(--gold-olympian);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(229, 184, 66, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.inv-slot:hover {
  transform: scale(1.12);
  border-color: #fff;
  box-shadow: 0 0 18px rgba(229, 184, 66, 0.7);
}

.inv-slot .slot-icon { font-size: 1.35rem; }
.inv-slot .slot-level {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px #000;
  font-family: var(--font-hades-serif);
}

/* Bottom Right Buttons */
.bottom-right-hud {
  align-self: flex-end;
  display: flex;
  gap: 0.65rem;
  pointer-events: auto;
}

.hades-hud-btn {
  background: rgba(22, 16, 32, 0.92);
  border: 1.5px solid var(--gold-olympian);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.hades-hud-btn:hover {
  background: rgba(42, 30, 60, 0.95);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 15px var(--gold-glow);
}

/* Boss Warning Banner (Click / Tap to Dismiss Immediately) */
.boss-warning {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  animation: hadesPulse 1.2s infinite alternate;
  z-index: 45;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.boss-warning:active {
  transform: translateX(-50%) scale(0.96);
}

.hades-warning-box {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: linear-gradient(90deg, rgba(80, 10, 15, 0.95) 0%, rgba(140, 20, 25, 0.98) 50%, rgba(80, 10, 15, 0.95) 100%);
  border: 2px solid #ef4444;
  padding: 0.8rem 2.2rem;
  border-radius: 6px;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.75), 0 0 15px #000;
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.warning-flourish {
  font-size: 1.2rem;
  color: var(--gold-bright);
  text-shadow: 0 0 10px var(--gold-glow);
}

.warning-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.warning-subtitle {
  font-size: 0.75rem;
  color: var(--gold-bright);
  font-family: var(--font-hades-serif);
  letter-spacing: 0.2em;
}

.warning-main-title {
  font-family: var(--font-hades-serif);
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.12em;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
}

.warning-close-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid #fca5a5;
  color: #fca5a5;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-family: var(--font-hades-ui);
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 0.4rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.boss-warning:hover .warning-close-badge {
  background: #ef4444;
  color: #fff;
  border-color: #fff;
}

@keyframes hadesPulse {
  0% { transform: translateX(-50%) scale(0.97); }
  100% { transform: translateX(-50%) scale(1.03); }
}

/* ==========================================================================
   MOBILE CONTROLS (HADES STYLING)
   ========================================================================== */

.mobile-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
}

.joystick-zone {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: none;
}

.joystick-base {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 184, 66, 0.25) 0%, rgba(15, 10, 22, 0.75) 70%);
  border: 2px solid var(--gold-olympian);
  box-shadow: 0 0 25px var(--gold-glow);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joystick-base.hidden { opacity: 0; }

.joystick-stick {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a 0%, #e5b842 70%, #92400e 100%);
  box-shadow: 0 0 15px rgba(229, 184, 66, 0.9);
  border: 1.5px solid #fff;
  position: absolute;
  pointer-events: none;
  transform: translate(0, 0);
}

.mobile-action-zone {
  position: absolute;
  right: 1.5rem;
  bottom: 2.5rem;
  pointer-events: auto;
  z-index: 30;
  touch-action: none;
}

.hades-touch-dash {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle, #0284c7 0%, #0369a1 70%, #082f49 100%);
  border: 2px solid #38bdf8;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 25px rgba(56, 189, 248, 0.6), 0 0 15px rgba(0,0,0,0.9);
  position: relative;
  transition: transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.hades-touch-dash:active { transform: scale(0.92); }
.dash-icon { font-size: 1.5rem; line-height: 1; }
.dash-label-text { font-size: 0.65rem; font-weight: 800; font-family: var(--font-hades-serif); letter-spacing: 0.08em; }

.touch-dash-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 4; }
.ring-cooldown {
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 4;
  stroke-dasharray: 188.4;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.08s linear;
}

/* ==========================================================================
   HADES MODAL SYSTEM (PARCHMENT, OBSIDIAN & GOLDEN FRAMES)
   ========================================================================== */

.overlay-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 10, 0.88);
  backdrop-filter: blur(14px);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y !important;
}

.overlay-modal.active { opacity: 1; pointer-events: auto; }
.overlay-modal.hidden { display: none; opacity: 0; pointer-events: none; }

.hades-modal-box {
  width: 100%;
  max-width: 960px;
  max-height: 92vh;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior-y: contain;
  background: 
    linear-gradient(175deg, rgba(22, 16, 32, 0.98) 0%, rgba(10, 7, 16, 0.99) 100%),
    url('assets/gw2_bg.jpg') center/cover no-repeat;
  background-blend-mode: multiply;
  border: 2px solid var(--gold-olympian);
  border-radius: 8px;
  box-shadow: var(--shadow-hades);
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  animation: modalEnter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hades-modal-box::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border: 1px solid rgba(229, 184, 66, 0.35);
  border-radius: 5px;
  pointer-events: none;
}

@keyframes modalEnter {
  0% { opacity: 0; transform: scale(0.94) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Olympian Header Ornament (Laurel Wings) */
.hades-header-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.laurel-wing {
  width: 50px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-olympian));
  position: relative;
}

.laurel-wing.right {
  background: linear-gradient(90deg, var(--gold-olympian), transparent);
}

.laurel-wing.red {
  background: linear-gradient(90deg, transparent, #ef4444);
}
.laurel-wing.right.red {
  background: linear-gradient(90deg, #ef4444, transparent);
}

.olympian-crest {
  font-family: var(--font-hades-serif);
  font-size: 0.82rem;
  letter-spacing: 0.3em;
  color: var(--gold-bright);
  text-shadow: 0 0 12px var(--gold-glow);
}

.olympian-crest.red {
  color: #fca5a5;
  text-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
}

.hades-game-title {
  font-family: var(--font-hades-title);
  font-size: 2.9rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #fff 15%, var(--gold-bright) 65%, #ca8a04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 20px rgba(229, 184, 66, 0.55));
  margin-bottom: 0.25rem;
}

.hades-game-subtitle {
  color: #94a3b8;
  font-size: 1rem;
  font-family: var(--font-hades-serif);
  font-style: italic;
  margin-bottom: 1.6rem;
}

.hades-section-title {
  font-family: var(--font-hades-serif);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--gold-olympian);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   HADES CHARACTER & BOON CARDS
   ========================================================================== */

/* Hero Carousel Controls (Arrows + Dots) */
.hero-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
}

.hero-arrow-btn {
  background: rgba(26, 20, 38, 0.95);
  border: 1.5px solid var(--gold-olympian);
  border-radius: 50%;
  color: var(--gold-bright);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  touch-action: manipulation;
}

.hero-arrow-btn:hover {
  background: var(--gold-olympian);
  color: #06040a;
  transform: scale(1.08);
}

.hero-arrow-btn:active {
  transform: scale(0.92);
}

.hero-dots-container {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid var(--bronze-trim);
  cursor: pointer;
  transition: all 0.25s ease;
}

.hero-dot.active {
  width: 24px;
  border-radius: 5px;
  background: var(--gold-olympian);
  border-color: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-glow);
}

.character-selection-wrapper {
  position: relative;
  width: 100%;
}

.character-selection {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  width: 100%;
  margin-bottom: 1.6rem;
}

.hades-card {
  background: linear-gradient(165deg, rgba(26, 20, 38, 0.95) 0%, rgba(12, 9, 18, 0.98) 100%);
  border: 1.5px solid var(--bronze-trim);
  border-radius: 6px;
  padding: 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hades-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold-olympian);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 0 0 25px var(--gold-glow);
  background: linear-gradient(165deg, rgba(38, 28, 56, 0.98) 0%, rgba(16, 12, 24, 0.99) 100%);
}

.hades-card.active {
  border-color: var(--gold-olympian);
  background: linear-gradient(165deg, rgba(46, 34, 68, 0.98) 0%, rgba(18, 13, 28, 0.99) 100%);
  box-shadow: 0 0 30px var(--gold-glow), 0 12px 35px rgba(0, 0, 0, 0.9);
  transform: translateY(-4px);
}

/* Hades Rarity Ribbons */
.card-rarity-ribbon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font-hades-serif);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
}

.card-rarity-ribbon.rare { background: rgba(56, 189, 248, 0.2); border: 1px solid var(--rarity-rare); color: var(--rarity-rare); }
.card-rarity-ribbon.epic { background: rgba(192, 132, 252, 0.2); border: 1px solid var(--rarity-epic); color: var(--rarity-epic); }
.card-rarity-ribbon.heroic { background: rgba(251, 146, 60, 0.2); border: 1px solid var(--rarity-heroic); color: var(--rarity-heroic); }

.hades-portrait-frame {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 184, 66, 0.25) 0%, rgba(10, 8, 14, 0.9) 70%);
  border: 2px solid var(--gold-olympian);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  box-shadow: 0 0 20px rgba(229, 184, 66, 0.35);
}

.hades-pixel-preview {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
}

.hades-card-title {
  font-family: var(--font-hades-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.15rem;
}

.hades-card-role {
  font-size: 0.82rem;
  color: var(--gold-olympian);
  margin-bottom: 0.5rem;
}

.hades-card-stat-pill {
  background: rgba(229, 184, 66, 0.15);
  border: 1px solid var(--gold-olympian);
  color: var(--gold-bright);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  margin-bottom: 0.6rem;
}

.hades-card-weapon {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-bottom: 0.4rem;
}

.hades-card-desc {
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 1.1rem;
  flex-grow: 1;
}

.hades-card-select-btn {
  font-family: var(--font-hades-serif);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  border-top: 1px solid var(--bronze-trim);
  width: 100%;
  padding-top: 0.65rem;
}

.hades-card.active .hades-card-select-btn {
  color: #fff;
  text-shadow: 0 0 10px var(--gold-glow);
}

/* ==========================================================================
   HADES OLYMPIAN BOON SCREEN (LEVEL UP)
   ========================================================================== */

.boon-modal {
  max-width: 1020px;
  padding: 2.25rem 2rem;
}

.hades-boon-title {
  font-family: var(--font-hades-title);
  font-size: 2.3rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff 15%, var(--gold-bright) 65%, #ca8a04 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(229, 184, 66, 0.5));
  margin-bottom: 0.25rem;
}

.hades-boon-subtitle {
  color: #94a3b8;
  font-size: 0.95rem;
  font-family: var(--font-hades-serif);
  font-style: italic;
  margin-bottom: 1.75rem;
}

.hades-boon-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  width: 100%;
}

.hades-boon-card {
  background: linear-gradient(170deg, rgba(28, 20, 42, 0.96) 0%, rgba(12, 8, 18, 0.99) 100%);
  border: 1.5px solid var(--bronze-trim);
  border-radius: 6px;
  padding: 1.6rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.85);
}

.hades-boon-card:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: var(--gold-olympian);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.95), 0 0 30px var(--gold-glow);
  background: linear-gradient(170deg, rgba(42, 30, 64, 0.98) 0%, rgba(18, 12, 28, 0.99) 100%);
}

/* Corner Ornaments on Boon Cards */
.boon-card-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--gold-olympian);
  pointer-events: none;
}

.boon-card-corner.tl { top: 4px; left: 4px; border-top: 1.5px solid; border-left: 1.5px solid; }
.boon-card-corner.tr { top: 4px; right: 4px; border-top: 1.5px solid; border-right: 1.5px solid; }
.boon-card-corner.bl { bottom: 4px; left: 4px; border-bottom: 1.5px solid; border-left: 1.5px solid; }
.boon-card-corner.br { bottom: 4px; right: 4px; border-bottom: 1.5px solid; border-right: 1.5px solid; }

/* Rarity Banner */
.boon-rarity-banner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-hades-serif);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.75rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

.boon-rarity-banner.common { background: rgba(148, 163, 184, 0.15); border: 1px solid var(--rarity-common); color: var(--rarity-common); }
.boon-rarity-banner.rare { background: rgba(56, 189, 248, 0.2); border: 1px solid var(--rarity-rare); color: var(--rarity-rare); }
.boon-rarity-banner.epic { background: rgba(192, 132, 252, 0.2); border: 1px solid var(--rarity-epic); color: var(--rarity-epic); }
.boon-rarity-banner.heroic { background: rgba(251, 146, 60, 0.2); border: 1px solid var(--rarity-heroic); color: var(--rarity-heroic); }
.boon-rarity-banner.legendary { background: rgba(250, 204, 21, 0.25); border: 1.5px solid var(--rarity-legendary); color: var(--rarity-legendary); box-shadow: 0 0 10px rgba(250, 204, 21, 0.4); }

.boon-god-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.65rem;
}

.god-name {
  font-family: var(--font-hades-title);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
}

.god-title {
  font-size: 0.72rem;
  color: #94a3b8;
  font-family: var(--font-hades-serif);
}

.boon-icon-medallion {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 184, 66, 0.25) 0%, rgba(12, 8, 18, 0.9) 70%);
  border: 2px solid var(--gold-olympian);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.boon-name {
  font-family: var(--font-hades-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.15rem;
}

.boon-level-badge {
  font-size: 0.75rem;
  color: var(--gold-bright);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.boon-stats-callout {
  background: rgba(12, 8, 18, 0.85);
  border: 1px solid rgba(229, 184, 66, 0.35);
  padding: 0.75rem 0.85rem;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 0.85rem;
  flex-grow: 1;
}

.boon-desc {
  font-size: 0.84rem;
  color: #e2e8f0;
  line-height: 1.45;
}

.boon-flavor-quote {
  font-size: 0.76rem;
  color: #94a3b8;
  font-style: italic;
  font-family: var(--font-hades-serif);
  margin-bottom: 1.2rem;
}

/* God Dialogue Plaque (Hades Boon Header) */
.god-dialogue-plaque {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(90deg, rgba(20, 15, 30, 0.95) 0%, rgba(35, 25, 52, 0.98) 50%, rgba(20, 15, 30, 0.95) 100%);
  border: 1.5px solid var(--gold-olympian);
  border-radius: 6px;
  padding: 0.9rem 1.4rem;
  margin-bottom: 1.25rem;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(229, 184, 66, 0.15);
}

.god-avatar-frame {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 184, 66, 0.3) 0%, rgba(14, 10, 22, 0.95) 75%);
  border: 2px solid var(--gold-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  box-shadow: 0 0 15px var(--gold-glow);
  flex-shrink: 0;
}

.god-dialogue-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
}

.god-dialogue-speaker {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

#dialogue-god-name {
  font-family: var(--font-hades-title);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--gold-bright);
  text-shadow: 0 0 10px var(--gold-glow);
}

#dialogue-god-title {
  font-family: var(--font-hades-serif);
  font-size: 0.76rem;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.god-dialogue-quote {
  font-family: var(--font-hades-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: #f1f5f9;
  letter-spacing: 0.03em;
}

/* Fated Authority Reroll Button (Hades Style) */
.boon-reroll-container {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
  width: 100%;
}

.hades-btn-reroll {
  background: linear-gradient(180deg, rgba(35, 24, 48, 0.95) 0%, rgba(18, 12, 26, 0.98) 100%);
  border: 1.5px solid var(--gold-olympian);
  color: var(--gold-bright);
  font-family: var(--font-hades-serif);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.6rem 1.6rem;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
}

.hades-btn-reroll:hover:not(.disabled) {
  background: linear-gradient(180deg, #d97706 0%, #78350f 100%);
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(229, 184, 66, 0.6);
}

.hades-btn-reroll.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.die-icon {
  font-size: 1.15rem;
}

/* ==========================================================================
   THE MIRROR OF NIGHT (GECE AYNASI - HADES META PROGRESSION)
   ========================================================================== */

.mirror-modal {
  max-width: 900px;
  padding: 2.2rem 2.2rem;
  background: radial-gradient(circle at center, #1e1233 0%, #0d0718 85%) !important;
  border: 2px solid #a855f7 !important;
  box-shadow: 0 0 50px rgba(168, 85, 247, 0.3), 0 20px 50px #000 !important;
}

.olympian-crest.purple {
  color: #d8b4fe;
  text-shadow: 0 0 14px rgba(168, 85, 247, 0.8);
}

.laurel-wing.purple {
  background: linear-gradient(90deg, transparent, #a855f7);
}
.laurel-wing.right.purple {
  background: linear-gradient(90deg, #a855f7, transparent);
}

.hades-mirror-title {
  font-family: var(--font-hades-title);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff 10%, #e9d5ff 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 12px rgba(168, 85, 247, 0.6));
  margin-bottom: 0.2rem;
}

.hades-mirror-subtitle {
  color: #c084fc;
  font-size: 0.92rem;
  font-family: var(--font-hades-serif);
  font-style: italic;
  margin-bottom: 1.3rem;
}

.mirror-darkness-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(22, 12, 38, 0.95);
  border: 1.5px solid #a855f7;
  padding: 0.45rem 1.4rem;
  border-radius: 20px;
  font-family: var(--font-hades-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  margin-bottom: 1.5rem;
}

.darkness-gem { font-size: 1.3rem; }
.darkness-label { color: #d8b4fe; letter-spacing: 0.08em; font-size: 0.85rem; }
.darkness-val { color: #f3e8ff; font-size: 1.35rem; }

.mirror-talents-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  width: 100%;
  margin-bottom: 1.6rem;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.mirror-talent-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(18, 11, 28, 0.92);
  border: 1.5px solid rgba(168, 85, 247, 0.45);
  border-radius: 6px;
  padding: 0.95rem 1.15rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  transition: all 0.2s ease;
}

.mirror-talent-card:hover {
  border-color: #c084fc;
  background: rgba(30, 18, 48, 0.96);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.3);
}

.talent-info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
}

.talent-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(12, 7, 20, 0.9) 75%);
  border: 1.5px solid #c084fc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.talent-text {
  display: flex;
  flex-direction: column;
}

.talent-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.talent-name {
  font-family: var(--font-hades-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.talent-sub {
  font-size: 0.68rem;
  color: #a855f7;
  font-family: var(--font-hades-serif);
  font-style: italic;
}

.talent-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.talent-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.talent-rank-pips {
  display: flex;
  gap: 0.25rem;
}

.rank-pip {
  font-size: 0.75rem;
  color: rgba(168, 85, 247, 0.35);
}

.rank-pip.active {
  color: #d8b4fe;
  text-shadow: 0 0 6px #c084fc;
}

.btn-talent-upgrade {
  background: linear-gradient(180deg, #9333ea 0%, #6b21a8 100%);
  border: 1px solid #d8b4fe;
  color: #fff;
  font-family: var(--font-hades-serif);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.btn-talent-upgrade:hover:not(:disabled) {
  background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
  border-color: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

.btn-talent-upgrade:disabled {
  background: rgba(30, 20, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
  color: #64748b;
  cursor: not-allowed;
}

.mirror-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* ==========================================================================
   CINEMATIC BANNERS (DEATH DEFIANCE & GOD CALL)
   ========================================================================== */

.cinematic-banner {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  animation: cinematicFade 2.4s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

.defiance-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(circle, rgba(140, 20, 25, 0.95) 0%, rgba(30, 8, 12, 0.98) 75%);
  border: 2px solid #ef4444;
  padding: 1.5rem 3.5rem;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(239, 68, 68, 0.9), 0 0 20px #000;
}

.defiance-skull {
  font-size: 3rem;
  filter: drop-shadow(0 0 15px #ef4444);
  margin-bottom: 0.4rem;
}

.defiance-title {
  font-family: var(--font-hades-title);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 0 20px #ef4444;
}

.defiance-sub {
  font-family: var(--font-hades-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: #fca5a5;
  margin-top: 0.25rem;
}

.cinematic-banner.god-wrath .wrath-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(circle, rgba(180, 83, 9, 0.95) 0%, rgba(30, 15, 5, 0.98) 75%);
  border: 2px solid #fde68a;
  padding: 1.5rem 3.5rem;
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.9), 0 0 20px #000;
}

.wrath-icon {
  font-size: 3rem;
  filter: drop-shadow(0 0 15px #f59e0b);
  margin-bottom: 0.4rem;
}

.wrath-title {
  font-family: var(--font-hades-title);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow: 0 0 20px #f59e0b;
}

.wrath-sub {
  font-family: var(--font-hades-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: #fef08a;
  margin-top: 0.25rem;
}

@keyframes cinematicFade {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.85); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
}

/* ==========================================================================
   HADES "THERE IS NO ESCAPE" DRIPPING BLOOD BANNER
   ========================================================================== */

.hades-blood-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.blood-title-text {
  font-family: var(--font-hades-title);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.35em;
  color: #ef4444;
  text-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
  padding: 0.4rem 1.6rem;
  border-top: 1.5px solid #ef4444;
  border-bottom: 1.5px solid #ef4444;
  background: rgba(140, 20, 25, 0.25);
}

.blood-ribbon {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ef4444);
}
.blood-ribbon.right {
  background: linear-gradient(90deg, #ef4444, transparent);
}

.recap-card.highlight-darkness {
  border-color: #a855f7;
  background: rgba(28, 14, 42, 0.9);
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}

.start-action-row, .gameover-actions-row {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  width: 100%;
}

.btn-mirror {
  background: linear-gradient(180deg, #7e22ce 0%, #4c1d95 100%) !important;
  border-color: #d8b4fe !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 20px rgba(168, 85, 247, 0.5) !important;
}

.btn-mirror:hover {
  background: linear-gradient(180deg, #9333ea 0%, #581c87 100%) !important;
  border-color: #fff !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 30px rgba(168, 85, 247, 0.8) !important;
}

.btn-icon { font-size: 1.2rem; }

/* Mobile Touch Call Button */
.hades-touch-call {
  position: absolute;
  bottom: 95px;
  right: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, #b45309 0%, #451a03 80%);
  border: 2px solid var(--gold-bright);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
  transition: all 0.2s ease;
}

.hades-touch-call.disabled {
  opacity: 0.35;
  filter: grayscale(0.8);
  box-shadow: none;
}

.call-icon { font-size: 1.2rem; }
.call-text { font-size: 0.52rem; font-family: var(--font-hades-serif); font-weight: 800; letter-spacing: 0.08em; }

/* Tooltip on Active Boon Slots */
.inv-slot::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(14, 10, 22, 0.98);
  border: 1px solid var(--gold-olympian);
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  color: #fff;
  font-size: 0.75rem;
  font-family: var(--font-hades-ui);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 10px rgba(229, 184, 66, 0.3);
  transition: opacity 0.2s ease;
  z-index: 50;
}

.inv-slot:hover::after {
  opacity: 1;
}

/* ==========================================================================
   HADES BUTTONS & CONTROLS
   ========================================================================== */

.hades-btn-primary {
  background: linear-gradient(180deg, #c79624 0%, #855d14 100%);
  border: 1.5px solid #ffe187;
  color: #0c0812;
  font-family: var(--font-hades-serif);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  padding: 1rem 3.5rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 25px rgba(229, 184, 66, 0.5);
}

.hades-btn-primary:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #a16207 100%);
  border-color: #fff;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 35px rgba(229, 184, 66, 0.85);
}

.hades-btn-primary.btn-secondary {
  background: linear-gradient(180deg, #332042 0%, #170d22 100%);
  border-color: #a855f7;
  color: #e9d5ff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
}

.hades-btn-primary.btn-secondary:hover {
  background: linear-gradient(180deg, #4c2d68 0%, #241436 100%);
  border-color: #fff;
  color: #fff;
}

.hades-pulse {
  animation: hadesPulseBtn 2s infinite ease-in-out;
}

@keyframes hadesPulseBtn {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.8), 0 0 20px rgba(229, 184, 66, 0.5); }
  50% { box-shadow: 0 8px 30px rgba(0,0,0,0.9), 0 0 35px rgba(229, 184, 66, 0.9); }
}

.hades-controls-guide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
  padding: 0.8rem 1.6rem;
  background: rgba(12, 8, 18, 0.85);
  border: 1px dashed rgba(229, 184, 66, 0.4);
  border-radius: 4px;
  font-size: 0.85rem;
  color: #94a3b8;
}

.hades-controls-guide kbd {
  background: #20172e;
  border: 1px solid #4a3860;
  border-radius: 3px;
  padding: 0.15rem 0.45rem;
  font-size: 0.78rem;
  color: #fff;
  box-shadow: 0 2px 0 #0f0b17;
  margin: 0 0.15rem;
}

/* Pause & Escape Recap */
.mini-box { max-width: 440px; padding: 2.25rem 2rem; }
.hades-pause-title { font-family: var(--font-hades-title); font-size: 1.8rem; color: var(--gold-bright); margin-bottom: 1.5rem; }
.pause-actions { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.gameover-box { max-width: 760px; }
.hades-gameover-title {
  font-family: var(--font-hades-title);
  font-size: 2.5rem;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 0.12em;
  text-shadow: 0 0 25px rgba(239, 68, 68, 0.8);
  margin-bottom: 0.35rem;
}

.hades-gameover-desc { color: #94a3b8; font-size: 1rem; font-family: var(--font-hades-serif); font-style: italic; margin-bottom: 1.75rem; }
.hades-recap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; width: 100%; margin-bottom: 1.6rem; }
.recap-card { background: rgba(18, 13, 26, 0.9); border: 1.5px solid rgba(229, 184, 66, 0.4); border-radius: 4px; padding: 1rem; }
.recap-label { font-size: 0.72rem; color: #94a3b8; letter-spacing: 0.1em; margin-bottom: 0.25rem; font-family: var(--font-hades-serif); }
.recap-value { font-size: 1.5rem; font-family: var(--font-hades-serif); font-weight: 800; color: #fff; }
.hades-boons-recap { width: 100%; margin-bottom: 1.75rem; }
.boons-recap-title { font-size: 0.85rem; font-family: var(--font-hades-serif); color: var(--gold-olympian); letter-spacing: 0.12em; margin-bottom: 0.65rem; }
.recap-list { display: flex; justify-content: center; gap: 0.65rem; flex-wrap: wrap; }
.recap-item { display: flex; align-items: center; gap: 0.4rem; background: rgba(28, 20, 38, 0.95); border: 1px solid var(--gold-olympian); padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.88rem; }

/* ==========================================================================
   MOBILE & RESPONSIVE UX OVERHAUL (VAMPIRE SURVIVORS SIMPLE HUD & TOUCH MODALS)
   ========================================================================== */

.mobile-only { display: none; }
.desktop-only { display: inline-block; }

@media (max-width: 860px) {
  .mobile-only { display: inline-block; }
  .desktop-only { display: none; }

  /* 1. Modal Overlays & Scrolling (Ensures all buttons/cards stay visible) */
  .overlay-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: max(6px, env(safe-area-inset-top, 6px)) 8px max(40px, env(safe-area-inset-bottom, 40px)) 8px !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
  }

  .hades-modal-box {
    margin: 8px auto !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem 0.85rem max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 2rem)) 0.85rem !important;
    width: 96% !important;
    max-width: 520px !important;
    border-width: 1.5px !important;
    box-sizing: border-box !important;
  }

  /* 2. Red Boss Warning Banner on Mobile (Below XP bar, Click/Tap to Dismiss) */
  .boss-warning {
    top: calc(max(6px, env(safe-area-inset-top, 6px)) + 46px) !important;
    width: 90% !important;
    max-width: 350px !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    animation: hadesPulseMobile 1.2s infinite alternate !important;
  }

  @keyframes hadesPulseMobile {
    0% { transform: translateX(-50%) scale(0.98); }
    100% { transform: translateX(-50%) scale(1.02); }
  }

  .hades-warning-box {
    padding: 0.45rem 0.8rem !important;
    gap: 0.5rem !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.75), 0 0 10px #000 !important;
    pointer-events: auto !important;
  }

  .warning-flourish {
    font-size: 0.85rem !important;
  }

  .warning-subtitle {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
  }

  .warning-main-title {
    font-size: 0.92rem !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.9) !important;
  }

  .warning-close-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    border: 1px solid #fca5a5 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
  }

  .warning-close-badge:active {
    background: #ef4444 !important;
    transform: scale(0.92) !important;
  }

  /* 3. Simple Top In-Game HUD (Vampire Survivors Style) */
  .hud-layer {
    padding: 0 !important;
    pointer-events: none !important;
  }

  .hades-top-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    padding: max(3px, env(safe-area-inset-top, 3px)) 6px 0 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    z-index: 20 !important;
    box-sizing: border-box !important;
  }

  .hades-xp-container {
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
  }

  .xp-frame-left, .xp-frame-right {
    display: none !important; /* Hide ornate side diamonds for clean full-width edge */
  }

  .xp-bar-track {
    height: 16px !important;
    border-radius: 3px !important;
    border: 1px solid var(--gold-olympian) !important;
  }

  .xp-content-row {
    padding: 0 0.45rem !important;
  }

  .rank-tag {
    font-size: 0.68rem !important;
  }

  .xp-counter {
    font-size: 0.62rem !important;
  }

  /* Under-XP Row: Left active item badges, Right compact stats */
  .hades-currencies-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding-right: 76px !important; /* reserve room for Sound & Pause buttons */
  }

  .currency-pill {
    font-size: 0.72rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 3px !important;
    gap: 0.25rem !important;
    border-width: 1px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
  }

  .currency-pill .curr-icon {
    font-size: 0.75rem !important;
  }

  /* Hide meta darkness and rerolls from active combat HUD on mobile */
  .darkness-pill, .reroll-pill {
    display: none !important;
  }

  /* 4. Active Weapons & Boons at TOP-LEFT (Vampire Survivors Style) */
  .hades-boon-sidebar {
    position: fixed !important;
    top: calc(max(3px, env(safe-area-inset-top, 3px)) + 20px) !important;
    left: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 3px !important;
    z-index: 25 !important;
    pointer-events: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
  }

  .boon-category {
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .category-header {
    display: none !important; /* Hide category headers on mobile */
  }

  .boon-slots-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important;
  }

  .inv-slot {
    width: 25px !important;
    height: 25px !important;
    border-radius: 4px !important;
    border: 1px solid var(--gold-olympian) !important;
    background: rgba(14, 10, 22, 0.94) !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
  }

  .inv-slot.empty-slot {
    display: none !important; /* Don't display empty slots on mobile */
  }

  .slot-level {
    font-size: 0.55rem !important;
    bottom: 0px !important;
    right: 1px !important;
    padding: 0 2px !important;
    line-height: 1 !important;
    border-radius: 2px !important;
  }

  /* 5. Sound & Pause Buttons at TOP-RIGHT */
  .bottom-right-hud {
    position: fixed !important;
    top: max(3px, env(safe-area-inset-top, 3px)) !important;
    right: 6px !important;
    bottom: auto !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 35 !important;
    pointer-events: auto !important;
  }

  .hades-hud-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.82rem !important;
    border-radius: 4px !important;
    padding: 0 !important;
    border-width: 1px !important;
  }

  /* 6. Minimal Bottom-Left Vitals (Elevated above Safari bottom bar) */
  .hades-vitals-container {
    position: fixed !important;
    bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
    left: 10px !important;
    max-width: 140px !important;
    gap: 1px !important;
    pointer-events: none !important;
    z-index: 55 !important;
  }

  .god-gauge-row {
    display: none !important; /* Virtual touch button is on the right */
  }

  .dash-pips-row {
    display: none !important; /* Virtual dash button is on the right */
  }

  .lifebar-wrapper {
    gap: 0 !important;
  }

  .lifebar-crest {
    display: none !important; /* Hide 48px crest icon on mobile */
  }

  .lifebar-box {
    gap: 1px !important;
  }

  .lifebar-numbers {
    font-size: 0.65rem !important;
    padding: 0 2px !important;
  }

  .life-title {
    font-size: 0.65rem !important;
  }

  .hp-ratio {
    font-size: 0.68rem !important;
  }

  .lifebar-track {
    width: 120px !important;
    height: 10px !important;
    border-width: 1px !important;
    border-radius: 2px !important;
  }

  /* 7. Level-Up Boon Cards on Mobile (Horizontal, Single Screen Fit) */
  .boon-modal {
    max-height: calc(100dvh - 16px) !important;
  }

  .god-dialogue-plaque {
    padding: 0.35rem 0.6rem !important;
    margin-bottom: 0.4rem !important;
    gap: 0.45rem !important;
  }

  .god-avatar-frame {
    width: 32px !important;
    height: 32px !important;
    font-size: 1.1rem !important;
  }

  .god-dialogue-speaker {
    font-size: 0.72rem !important;
    gap: 0.35rem !important;
  }

  .god-dialogue-quote {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
  }

  .hades-boon-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.15rem !important;
  }

  .hades-boon-subtitle {
    display: none !important;
  }

  .hades-boon-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .hades-boon-card, .boon-card {
    display: grid !important;
    grid-template-columns: 42px 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    padding: 0.5rem 0.7rem !important;
    gap: 0.25rem 0.6rem !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    border-width: 1.5px !important;
    background: rgba(18, 14, 28, 0.98) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .hades-boon-card:active, .boon-card:active {
    transform: scale(0.98) !important;
    border-color: #fff !important;
  }

  .boon-rarity-banner {
    grid-column: 1 / -1 !important;
    margin: -0.5rem -0.7rem 0.15rem -0.7rem !important;
    padding: 0.12rem 0.4rem !important;
    font-size: 0.6rem !important;
  }

  .boon-god-header {
    display: none !important;
  }

  .boon-icon-medallion {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
    border-radius: 6px !important;
  }

  .boon-name {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .boon-level-badge {
    display: inline-block !important;
    font-size: 0.6rem !important;
    padding: 0.1rem 0.3rem !important;
    margin-left: 0.25rem !important;
  }

  .boon-stats-callout {
    grid-column: 2 !important;
    grid-row: 3 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .boon-desc {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    color: #e2e8f0 !important;
  }

  .boon-flavor-quote {
    display: none !important;
  }

  .hades-btn-accept {
    grid-column: 3 !important;
    grid-row: 2 / span 2 !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .boon-reroll-container {
    margin-top: 0.4rem !important;
  }

  .hades-btn-reroll {
    padding: 0.35rem 0.85rem !important;
    font-size: 0.78rem !important;
  }

  /* 8. Start Screen Character Selection (Horizontal Swipeable Row) */
  .character-selection {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    touch-action: pan-x pan-y !important;
    gap: 0.75rem !important;
    padding: 0.3rem 0.2rem 0.7rem 0.2rem !important;
    width: 100% !important;
    scrollbar-width: thin !important;
  }

  .char-card {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    padding: 0.85rem 0.85rem !important;
    touch-action: pan-x pan-y !important;
    cursor: pointer !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .hero-carousel-controls {
    display: flex !important;
    gap: 0.9rem !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.55rem !important;
  }

  .hades-game-title {
    font-size: 1.55rem !important;
    margin-bottom: 0.15rem !important;
  }

  .hades-game-subtitle {
    font-size: 0.72rem !important;
    margin-bottom: 0.7rem !important;
  }

  .hades-section-title {
    font-size: 0.82rem !important;
    margin-bottom: 0.45rem !important;
  }

  .hades-portrait-frame {
    width: 58px !important;
    height: 58px !important;
    margin: 0.25rem auto !important;
  }

  .hades-card-title {
    font-size: 1rem !important;
  }

  .hades-card-desc {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }

  .hades-controls-guide {
    padding: 0.35rem 0.6rem !important;
    margin-bottom: 0.7rem !important;
    font-size: 0.7rem !important;
  }

  .start-action-row, .gameover-actions-row, .mirror-actions-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
  }

  .hades-btn-primary {
    flex: 1 !important;
    padding: 0.7rem 0.85rem !important;
    font-size: 0.92rem !important;
    justify-content: center !important;
    letter-spacing: 0.08em !important;
  }

  /* 9. Game Over Screen on Mobile */
  .hades-gameover-title {
    font-size: 1.6rem !important;
  }

  .blood-title-text {
    font-size: 0.92rem !important;
    padding: 0.18rem 0.7rem !important;
    letter-spacing: 0.15em !important;
  }

  .hades-recap-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    margin-bottom: 0.7rem !important;
  }

  .recap-card {
    padding: 0.45rem !important;
  }

  .recap-label {
    font-size: 0.6rem !important;
  }

  .recap-value {
    font-size: 1.1rem !important;
  }

  /* 10. Mirror of Night on Mobile */
  .mirror-talents-grid {
    max-height: 50vh !important;
    overflow-y: auto !important;
    gap: 0.45rem !important;
  }

  .mirror-talent-card {
    padding: 0.55rem 0.7rem !important;
  }

  /* Virtual Touch Buttons Scale (Elevated safely above Safari toolbar) */
  .hades-touch-dash {
    width: 62px !important;
    height: 62px !important;
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
    right: 18px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }

  .hades-touch-call {
    width: 52px !important;
    height: 52px !important;
    bottom: max(98px, calc(env(safe-area-inset-bottom, 0px) + 94px)) !important;
    right: 22px !important;
    z-index: 60 !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 480px) {
  .char-card {
    flex: 0 0 85% !important;
  }
  .hades-btn-primary {
    font-size: 0.86rem !important;
    padding: 0.65rem 0.75rem !important;
  }
}