/* ============================================================
   REALM OF SHADOWS — Top-Down Pixel Action RPG
   Master Stylesheet
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Palette */
  --color-bg-dark:        #0d0a1a;
  --color-bg-panel:       #1a1332;
  --color-bg-panel-alt:   #241b42;
  --color-purple-deep:    #2e1a52;
  --color-purple:         #5b3a8c;
  --color-purple-light:   #8b5fbf;
  --color-gold:           #f5c842;
  --color-gold-dark:      #c49a1a;
  --color-gold-glow:      rgba(245, 200, 66, 0.6);
  --color-amber:          #e8a020;
  --color-red:            #e83030;
  --color-red-dark:       #a01818;
  --color-red-glow:       rgba(232, 48, 48, 0.5);
  --color-green:          #2ecc40;
  --color-green-dark:     #1a8a2a;
  --color-green-glow:     rgba(46, 204, 64, 0.4);
  --color-blue:           #4a8aff;
  --color-blue-dark:      #2a5abf;
  --color-blue-glow:      rgba(74, 138, 255, 0.5);
  --color-epic:           #a855f7;
  --color-epic-glow:      rgba(168, 85, 247, 0.5);
  --color-mythic:         #ff2244;
  --color-mythic-glow:    rgba(255, 34, 68, 0.6);
  --color-legendary:      #ff8c00;
  --color-legendary-glow: rgba(255, 140, 0, 0.5);
  --color-common:         #9ca3af;
  --color-uncommon:       #2ecc40;
  --color-rare:           #4a8aff;
  --color-white:          #f0e8d8;
  --color-white-dim:      #b0a898;
  --color-text:           #e8e0d0;
  --color-text-shadow:    #000000;
  --color-shadow:         rgba(0, 0, 0, 0.7);

  /* Pixel border helpers */
  --pixel-border:
    inset -2px -2px 0 0 #0d0a1a,
    inset  2px  2px 0 0 rgba(255,255,255,0.15),
    0 0 0 2px #0d0a1a,
    2px 2px 0 2px rgba(0,0,0,0.4);

  --pixel-border-gold:
    inset -2px -2px 0 0 #0d0a1a,
    inset  2px  2px 0 0 rgba(245,200,66,0.3),
    0 0 0 2px var(--color-gold-dark),
    2px 2px 0 2px rgba(0,0,0,0.4);

  --pixel-border-red:
    inset -2px -2px 0 0 #0d0a1a,
    inset  2px  2px 0 0 rgba(232,48,48,0.3),
    0 0 0 2px var(--color-red-dark),
    2px 2px 0 2px rgba(0,0,0,0.4);

  /* Typography */
  --font-pixel: 'Press Start 2P', monospace, cursive;

  /* Timing */
  --transition-fast: 0.15s;
  --transition-med:  0.3s;
  --transition-slow: 0.6s;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--color-bg-dark);
  font-family: var(--font-pixel);
  color: var(--color-text);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  image-rendering: pixelated;
  user-select: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Pixel-style scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb {
  background: var(--color-purple);
  border: 2px solid var(--color-bg-dark);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.pixel-border      { box-shadow: var(--pixel-border); }
.pixel-border-gold { box-shadow: var(--pixel-border-gold); }
.pixel-border-red  { box-shadow: var(--pixel-border-red); }

.hidden { display: none !important; }

.fade-in  { animation: fadeIn 0.4s ease-out forwards; }
.fade-out { animation: fadeOut 0.3s ease-in forwards; }

.slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.slide-down {
  animation: slideDown 0.3s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

/* ============================================================
   GAME CONTAINER & CANVAS
   ============================================================ */

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #111;
  image-rendering: pixelated;
  overflow: hidden;
}

#game-canvas,
canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: manipulation;
}

/* ============================================================
   SHARED BUTTON STYLES
   ============================================================ */

.btn {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--color-text);
  background: var(--color-purple-deep);
  border: none;
  cursor: pointer;
  box-shadow: var(--pixel-border);
  text-transform: uppercase;
  letter-spacing: 1px;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    text-shadow var(--transition-fast);
  position: relative;
}

.btn:hover {
  background: var(--color-purple);
  transform: translateY(-2px);
  box-shadow:
    var(--pixel-border),
    0 4px 12px rgba(91, 58, 140, 0.4);
  text-shadow: 0 0 6px var(--color-purple-light);
}

.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset -1px -1px 0 0 #0d0a1a,
    inset  1px  1px 0 0 rgba(255,255,255,0.1),
    0 0 0 2px #0d0a1a;
}

.btn-gold {
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dark) 100%);
  color: #1a1332;
  box-shadow: var(--pixel-border-gold);
}

.btn-gold:hover {
  background: linear-gradient(180deg, #ffe066 0%, var(--color-gold) 100%);
  box-shadow:
    var(--pixel-border-gold),
    0 0 16px var(--color-gold-glow);
  text-shadow: none;
}

.btn-red {
  background: linear-gradient(180deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: var(--color-white);
  box-shadow: var(--pixel-border-red);
}

.btn-red:hover {
  background: linear-gradient(180deg, #ff4444 0%, var(--color-red) 100%);
  box-shadow:
    var(--pixel-border-red),
    0 0 16px var(--color-red-glow);
}

.btn-lg {
  padding: 16px 40px;
  font-size: 12px;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 8px;
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */

#title-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: var(--color-bg-dark);
  overflow: hidden;
}

/* Animated ember / starfield background */
#title-screen::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(1px 1px at  8% 15%, var(--color-gold) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 22% 55%, var(--color-purple-light) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 50% 10%, var(--color-amber) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 65% 70%, var(--color-red) 0.3px, transparent 1px),
    radial-gradient(1px 1px at 80% 35%, var(--color-gold) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 15% 80%, var(--color-purple-light) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 40% 40%, var(--color-amber) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 92% 12%, var(--color-gold) 0.5px, transparent 1px),
    radial-gradient(2px 2px at 35% 90%, var(--color-red) 0.5px, transparent 1px),
    radial-gradient(1px 1px at 75% 55%, var(--color-amber) 0.5px, transparent 1px);
  animation: emberDrift 50s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes emberDrift {
  from { transform: translateY(0) translateX(0); }
  50%  { transform: translateY(10%) translateX(-3%); }
  to   { transform: translateY(25%) translateX(0); }
}

/* Dark vignette overlay */
#title-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(13, 10, 26, 0.9) 100%
  );
  pointer-events: none;
}

/* Title text */
.title-main {
  position: relative;
  z-index: 1;
  font-size: clamp(1.2rem, 4vw, 2.4rem);
  color: var(--color-gold);
  text-shadow:
    0 0 8px  var(--color-gold-glow),
    0 0 24px var(--color-gold-glow),
    0 0 48px rgba(245, 200, 66, 0.25),
    3px 3px 0 #000;
  letter-spacing: 4px;
  text-align: center;
  margin-bottom: 0.3em;
  animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 8px  var(--color-gold-glow),
      0 0 24px var(--color-gold-glow),
      0 0 48px rgba(245, 200, 66, 0.25),
      3px 3px 0 #000;
  }
  50% {
    text-shadow:
      0 0 12px var(--color-gold-glow),
      0 0 32px var(--color-gold-glow),
      0 0 64px rgba(245, 200, 66, 0.4),
      3px 3px 0 #000;
  }
}

/* Subtitle */
.title-subtitle {
  position: relative;
  z-index: 1;
  font-size: clamp(0.45rem, 1.2vw, 0.65rem);
  color: var(--color-white-dim);
  letter-spacing: 2px;
  margin-bottom: 2.5em;
  text-shadow: 2px 2px 0 #000;
  font-style: italic;
  opacity: 0;
  animation: subtitleReveal 1.5s ease-out 0.8s forwards;
}

@keyframes subtitleReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* Torch flicker effects */
.title-torch {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 24px;
  border-radius: 50% 50% 20% 20%;
  animation: torchFlicker 0.3s ease-in-out infinite alternate;
}

.title-torch--left {
  left: 18%;
  top: 42%;
  background: radial-gradient(ellipse, var(--color-gold) 0%, var(--color-amber) 40%, var(--color-red) 70%, transparent 100%);
  box-shadow:
    0 0 20px var(--color-gold-glow),
    0 0 40px rgba(232, 160, 32, 0.4),
    0 0 80px rgba(232, 48, 48, 0.2);
}

.title-torch--right {
  right: 18%;
  top: 42%;
  background: radial-gradient(ellipse, var(--color-gold) 0%, var(--color-amber) 40%, var(--color-red) 70%, transparent 100%);
  box-shadow:
    0 0 20px var(--color-gold-glow),
    0 0 40px rgba(232, 160, 32, 0.4),
    0 0 80px rgba(232, 48, 48, 0.2);
  animation-delay: 0.15s;
}

@keyframes torchFlicker {
  0%   { opacity: 0.8; transform: scaleY(1) scaleX(1); }
  25%  { opacity: 1;   transform: scaleY(1.15) scaleX(0.88); }
  50%  { opacity: 0.85; transform: scaleY(0.92) scaleX(1.08); }
  75%  { opacity: 1;   transform: scaleY(1.08) scaleX(0.94); }
  100% { opacity: 0.9; transform: scaleY(1) scaleX(1); }
}

/* Title menu buttons */
.title-buttons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.title-buttons .btn {
  min-width: 220px;
  text-align: center;
}

/* ============================================================
   STORY INTRO SCREEN
   ============================================================ */

#story-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: var(--color-bg-dark);
}

.story-frame {
  position: relative;
  max-width: 680px;
  width: 90%;
  padding: 36px;
  background: var(--color-bg-panel);
  box-shadow:
    var(--pixel-border-gold),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* Decorative corner accents */
.story-frame::before,
.story-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-gold-dark);
}
.story-frame::before {
  top: 6px;
  left: 6px;
  border-right: none;
  border-bottom: none;
}
.story-frame::after {
  bottom: 6px;
  right: 6px;
  border-left: none;
  border-top: none;
}

.story-text {
  font-size: 9px;
  line-height: 2.2;
  color: var(--color-white-dim);
  text-shadow: 1px 1px 0 #000;
}

.story-text p {
  margin-bottom: 1.5em;
  opacity: 0;
  animation: storyFadeIn 1s ease-out forwards;
}

.story-text p:nth-child(1) { animation-delay: 0.3s; }
.story-text p:nth-child(2) { animation-delay: 1.8s; }
.story-text p:nth-child(3) { animation-delay: 3.3s; }
.story-text p:nth-child(4) { animation-delay: 4.8s; }
.story-text p:nth-child(5) { animation-delay: 6.3s; }

@keyframes storyFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.story-continue {
  text-align: center;
  margin-top: 2em;
  font-size: 8px;
  color: var(--color-gold);
  cursor: pointer;
  animation: blinkText 1.2s steps(2) infinite;
}

@keyframes blinkText {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ============================================================
   CHARACTER SELECT SCREEN
   ============================================================ */

#character-select {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background:
    radial-gradient(ellipse at center, var(--color-bg-panel) 0%, var(--color-bg-dark) 70%);
}

.character-select-title {
  font-size: clamp(0.7rem, 2vw, 1.1rem);
  color: var(--color-gold);
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
  margin-bottom: 1.5em;
}

.character-cards {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 700px;
}

.character-card {
  width: 150px;
  padding: 16px 12px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition:
    transform var(--transition-med),
    box-shadow var(--transition-med);
}

.character-card:hover {
  transform: translateY(-4px);
  box-shadow:
    var(--pixel-border),
    0 6px 20px rgba(91, 58, 140, 0.3);
}

.character-card.selected {
  box-shadow:
    var(--pixel-border-gold),
    0 0 20px var(--color-gold-glow),
    0 0 40px rgba(245, 200, 66, 0.2);
  transform: translateY(-4px);
}

.character-portrait {
  width: 64px;
  height: 64px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  image-rendering: pixelated;
}

.character-class-name {
  font-size: 10px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
}

.character-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 7px;
}

.character-stat-row {
  display: flex;
  justify-content: space-between;
  color: var(--color-white-dim);
}

.character-stat-row span:last-child {
  color: var(--color-gold);
}

.character-desc {
  font-size: 7px;
  line-height: 1.8;
  color: var(--color-white-dim);
  text-align: center;
}

.character-select-confirm {
  margin-top: 1.5em;
}

/* ============================================================
   TOWN SCREEN — ELDERGROVE VILLAGE
   ============================================================ */

#town-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  background:
    linear-gradient(180deg,
      #0a0812 0%,
      #12101f 30%,
      #1a1832 60%,
      #0d1218 100%
    );
}

#town-overlay.active {
  display: flex;
}

/* Atmospheric mist */
#town-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(91, 58, 140, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(245, 200, 66, 0.06) 0%, transparent 40%);
  pointer-events: none;
  animation: mistShift 20s ease-in-out infinite alternate;
}

@keyframes mistShift {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.town-title {
  color: var(--color-gold);
  font-size: 18px;
  margin: 20px 0 5px;
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
  position: relative;
  z-index: 1;
}

.town-subtitle {
  color: var(--color-white-dim);
  font-size: 9px;
  margin-bottom: 15px;
  text-shadow: 1px 1px 0 #000;
  position: relative;
  z-index: 1;
}

/* Town header bar */
.town-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

/* Character info — top left */
.town-char-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(13, 10, 26, 0.85);
  padding: 8px 14px;
  box-shadow: var(--pixel-border);
}

.town-char-avatar {
  width: 32px;
  height: 32px;
  background: var(--color-purple-deep);
  box-shadow: var(--pixel-border);
  image-rendering: pixelated;
}

.town-char-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.town-char-name {
  font-size: 8px;
  color: var(--color-gold);
}

.town-char-level {
  font-size: 7px;
  color: var(--color-white-dim);
}

/* Gold counter — top right */
.town-gold {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 10, 26, 0.85);
  padding: 8px 14px;
  box-shadow: var(--pixel-border);
  font-size: 10px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

/* NPC buttons */
.town-npcs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 30px;
  max-width: 800px;
  position: relative;
  z-index: 1;
}

.npc-btn {
  background: var(--color-bg-panel);
  border: 2px solid var(--color-purple-deep);
  color: var(--color-text);
  font-family: var(--font-pixel);
  font-size: 9px;
  padding: 12px 16px;
  cursor: pointer;
  text-align: center;
  width: 140px;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: var(--pixel-border);
}

.npc-btn:hover {
  border-color: var(--color-gold-dark);
  transform: translateY(-2px);
  box-shadow:
    var(--pixel-border-gold),
    0 0 12px var(--color-gold-glow);
}

.npc-btn .npc-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 6px;
}

.npc-btn .npc-name {
  display: block;
  color: var(--color-gold);
  margin-bottom: 4px;
  text-shadow: 1px 1px 0 #000;
}

.npc-btn .npc-role {
  display: block;
  font-size: 7px;
  color: var(--color-white-dim);
}

/* Town action buttons */
.town-actions {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  padding-bottom: 15px;
  position: relative;
  z-index: 1;
}

.town-action-btn {
  background: linear-gradient(180deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  border: 2px solid var(--color-red-dark);
  color: var(--color-white);
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 12px 24px;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  box-shadow: var(--pixel-border-red);
}

.town-action-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--pixel-border-red),
    0 0 16px var(--color-red-glow);
}

.town-action-btn.safe {
  background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border-color: var(--color-green-dark);
  color: #fff;
  box-shadow: var(--pixel-border);
}

.town-action-btn.safe:hover {
  box-shadow:
    var(--pixel-border),
    0 0 16px var(--color-green-glow);
}

/* ============================================================
   DIALOGUE PANEL
   ============================================================ */

#dialogue-panel {
  display: none;
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  background: rgba(13, 10, 26, 0.95);
  border-top: 2px solid var(--color-purple);
  z-index: 20;
  padding: 15px 20px;
  min-height: 160px;
  box-shadow:
    inset 0 2px 0 0 rgba(245, 200, 66, 0.15),
    0 -4px 24px rgba(0, 0, 0, 0.5);
}

#dialogue-panel.active {
  display: block;
  animation: slideUp 0.3s ease-out;
}

.dialogue-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.dialogue-portrait {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  image-rendering: pixelated;
}

.dialogue-name {
  color: var(--color-gold);
  font-size: 11px;
  text-shadow: 0 0 4px var(--color-gold-glow), 1px 1px 0 #000;
}

.dialogue-text {
  color: var(--color-text);
  font-size: 9px;
  line-height: 2;
  margin-bottom: 12px;
  min-height: 40px;
  text-shadow: 1px 1px 0 #000;
}

.dialogue-responses {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dialogue-response {
  background: var(--color-bg-panel-alt);
  border: none;
  color: var(--color-white-dim);
  font-family: var(--font-pixel);
  font-size: 8px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--pixel-border);
  transition:
    color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.dialogue-response:hover {
  background: var(--color-purple-deep);
  color: var(--color-gold);
  box-shadow:
    var(--pixel-border),
    0 0 8px rgba(245, 200, 66, 0.15);
}

/* ============================================================
   INVENTORY OVERLAY
   ============================================================ */

#inventory-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 26, 0.95);
  z-index: 15;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

#inventory-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.inv-panel {
  background: var(--color-bg-panel);
  padding: 16px;
  box-shadow: var(--pixel-border);
}

.inv-title {
  color: var(--color-gold);
  font-size: 11px;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 0 4px var(--color-gold-glow), 1px 1px 0 #000;
}

/* 4x4 inventory grid */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 52px);
  gap: 4px;
}

.inv-slot {
  width: 52px;
  height: 52px;
  background: var(--color-bg-dark);
  border: 1px solid var(--color-purple-deep);
  box-shadow: var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 7px;
  color: var(--color-white-dim);
  text-align: center;
  padding: 2px;
  word-break: break-all;
  transition: box-shadow var(--transition-fast);
  image-rendering: pixelated;
}

.inv-slot:hover {
  box-shadow:
    var(--pixel-border),
    0 0 8px rgba(255, 255, 255, 0.1);
}

.inv-slot.equipped {
  border-color: var(--color-gold-dark);
  box-shadow: var(--pixel-border-gold);
}

/* Item rarity glow on slot */
.inv-slot.rarity-common   { border-left: 2px solid var(--color-common); }
.inv-slot.rarity-uncommon { border-left: 2px solid var(--color-uncommon); }
.inv-slot.rarity-rare     { border-left: 2px solid var(--color-rare); }
.inv-slot.rarity-epic     { border-left: 2px solid var(--color-epic); }
.inv-slot.rarity-legendary { border-left: 2px solid var(--color-legendary); }
.inv-slot.rarity-mythic   { border-left: 2px solid var(--color-mythic); }

/* Equipment slots (paper doll) */
.equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 52px);
  gap: 4px;
}

.equip-slot {
  width: 52px;
  height: 52px;
  background: var(--color-bg-dark);
  border: 1px solid var(--color-purple-deep);
  box-shadow: var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 6px;
  color: #666;
  text-align: center;
  padding: 2px;
  position: relative;
  transition: box-shadow var(--transition-fast);
}

.equip-slot:hover {
  box-shadow:
    var(--pixel-border-gold),
    0 0 8px var(--color-gold-glow);
}

.equip-slot.has-item {
  border-color: var(--color-gold-dark);
  color: var(--color-text);
}

.equip-slot-label {
  position: absolute;
  bottom: -12px;
  font-size: 5px;
  color: var(--color-white-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Equipment stats panel */
.equipment-stats {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid var(--color-purple-deep);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 7px;
  color: var(--color-white-dim);
  padding: 3px 0;
}

.stat-line .stat-value {
  color: var(--color-green);
}

.stat-line .stat-value.negative {
  color: var(--color-red);
}

/* Item tooltip */
.item-tooltip {
  display: none;
  position: absolute;
  background: var(--color-bg-dark);
  padding: 10px;
  font-size: 7px;
  color: var(--color-text);
  line-height: 1.6;
  z-index: 25;
  min-width: 160px;
  pointer-events: none;
  box-shadow: var(--pixel-border);
}

.item-tooltip.active {
  display: block;
  animation: fadeIn 0.15s ease-out;
}

.item-tooltip.rarity-common   { box-shadow: 0 0 0 2px var(--color-common),   var(--pixel-border); }
.item-tooltip.rarity-uncommon { box-shadow: 0 0 0 2px var(--color-uncommon), var(--pixel-border); }
.item-tooltip.rarity-rare     { box-shadow: 0 0 0 2px var(--color-rare),     var(--pixel-border); }
.item-tooltip.rarity-epic     { box-shadow: 0 0 0 2px var(--color-epic),     var(--pixel-border), 0 0 12px var(--color-epic-glow); }
.item-tooltip.rarity-legendary { box-shadow: 0 0 0 2px var(--color-legendary), var(--pixel-border), 0 0 12px var(--color-legendary-glow); }
.item-tooltip.rarity-mythic   { box-shadow: 0 0 0 2px var(--color-mythic),   var(--pixel-border), 0 0 16px var(--color-mythic-glow); }

.tooltip-name {
  font-size: 8px;
  margin-bottom: 4px;
}

.tooltip-name.rarity-common   { color: var(--color-common); }
.tooltip-name.rarity-uncommon { color: var(--color-uncommon); }
.tooltip-name.rarity-rare     { color: var(--color-rare); }
.tooltip-name.rarity-epic     { color: var(--color-epic); }
.tooltip-name.rarity-legendary { color: var(--color-legendary); }
.tooltip-name.rarity-mythic   { color: var(--color-mythic); }

.tooltip-type {
  font-size: 6px;
  color: var(--color-white-dim);
  margin-bottom: 8px;
}

.tooltip-stats {
  font-size: 7px;
  color: var(--color-green);
  line-height: 2;
}

.tooltip-desc {
  font-size: 6px;
  color: var(--color-white-dim);
  line-height: 1.8;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-purple-deep);
}

.tooltip-price {
  font-size: 7px;
  color: var(--color-gold);
  margin-top: 6px;
}

/* ============================================================
   STAT ALLOCATION OVERLAY
   ============================================================ */

#stat-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 26, 0.95);
  z-index: 16;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#stat-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.stat-label {
  color: var(--color-gold);
  font-size: 10px;
  width: 80px;
  text-shadow: 1px 1px 0 #000;
}

.stat-value {
  color: var(--color-white);
  font-size: 10px;
  width: 30px;
  text-align: center;
}

.stat-btn {
  background: var(--color-bg-panel-alt);
  border: 1px solid var(--color-purple);
  color: var(--color-white-dim);
  font-family: var(--font-pixel);
  font-size: 10px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pixel-border);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.stat-btn:hover {
  background: var(--color-purple);
  color: var(--color-white);
}

.confirm-btn {
  background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border: 2px solid var(--color-green-dark);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 10px 30px;
  cursor: pointer;
  margin-top: 20px;
  box-shadow: var(--pixel-border);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--pixel-border),
    0 0 12px var(--color-green-glow);
}

/* ============================================================
   SKILL TREE
   ============================================================ */

#skill-tree {
  position: absolute;
  inset: 0;
  z-index: 17;
  background: rgba(13, 10, 26, 0.95);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#skill-tree.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.skill-tree-title {
  font-size: 14px;
  color: var(--color-gold);
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
  margin-bottom: 20px;
}

.skill-tree-container {
  display: flex;
  gap: 24px;
  max-width: 780px;
  width: 95%;
}

.skill-branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 10px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
}

.skill-branch-title {
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 1px 1px 0 #000;
}

.skill-branch-title.branch-offense { color: var(--color-red); }
.skill-branch-title.branch-defense { color: var(--color-blue); }
.skill-branch-title.branch-utility { color: var(--color-green); }

/* Skill node */
.skill-node {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg-dark);
  box-shadow:
    0 0 0 3px var(--color-purple-deep),
    var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition:
    box-shadow var(--transition-med),
    transform var(--transition-fast);
}

.skill-node:hover {
  transform: scale(1.1);
}

.skill-node-icon {
  font-size: 18px;
  image-rendering: pixelated;
}

/* Connector line between nodes */
.skill-connector {
  width: 3px;
  height: 16px;
  background: var(--color-purple-deep);
}

/* Node states */
.skill-node.locked {
  opacity: 0.4;
  filter: grayscale(100%);
  cursor: not-allowed;
}

.skill-node.unlocked {
  box-shadow:
    0 0 0 3px var(--color-gold-dark),
    0 0 12px var(--color-gold-glow);
}

.skill-node.unlocked.branch-offense {
  box-shadow:
    0 0 0 3px var(--color-red-dark),
    0 0 12px var(--color-red-glow);
}

.skill-node.unlocked.branch-defense {
  box-shadow:
    0 0 0 3px var(--color-blue-dark),
    0 0 12px var(--color-blue-glow);
}

.skill-node.unlocked.branch-utility {
  box-shadow:
    0 0 0 3px var(--color-green-dark),
    0 0 12px var(--color-green-glow);
}

.skill-node.available {
  animation: skillPulse 2s ease-in-out infinite;
  cursor: pointer;
}

@keyframes skillPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--color-gold-dark),
      0 0 8px var(--color-gold-glow);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--color-gold),
      0 0 20px var(--color-gold-glow),
      0 0 32px rgba(245, 200, 66, 0.2);
  }
}

.skill-connector.active {
  background: var(--color-gold-dark);
  box-shadow: 0 0 4px var(--color-gold-glow);
}

.skill-points-display {
  margin-top: 16px;
  font-size: 9px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

/* ============================================================
   SHOP SCREEN
   ============================================================ */

#shop-screen {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 18;
  background: rgba(13, 10, 26, 0.95);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#shop-screen.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.shop-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.shop-title {
  font-size: 14px;
  color: var(--color-gold);
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
}

.shop-gold {
  font-size: 10px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

.shop-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.shop-tab {
  padding: 8px 20px;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--color-white-dim);
  background: var(--color-bg-panel-alt);
  border: none;
  cursor: pointer;
  box-shadow: var(--pixel-border);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.shop-tab:hover {
  color: var(--color-text);
  background: var(--color-purple-deep);
}

.shop-tab.active {
  color: var(--color-gold);
  background: var(--color-purple-deep);
  box-shadow: var(--pixel-border-gold);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 680px;
  width: 95%;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.shop-item {
  padding: 12px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.shop-item:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--pixel-border),
    0 4px 12px rgba(91, 58, 140, 0.3);
}

.shop-item-icon {
  width: 40px;
  height: 40px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  image-rendering: pixelated;
}

.shop-item-name {
  font-size: 7px;
  text-align: center;
  color: var(--color-text);
}

.shop-item-price {
  font-size: 8px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

.shop-item.too-expensive .shop-item-price {
  color: var(--color-red);
}

/* Item comparison tooltip in shop */
.shop-compare {
  display: flex;
  gap: 4px;
  font-size: 6px;
  margin-top: 4px;
}

.shop-compare .better { color: var(--color-green); }
.shop-compare .worse  { color: var(--color-red); }

/* ============================================================
   HUD — IN-GAME OVERLAY
   ============================================================ */

#hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#hud > * {
  pointer-events: all;
}

/* Top-left: HP / MP / Level */
.hud-vitals {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hud-level-badge {
  width: 28px;
  height: 28px;
  background: var(--color-purple-deep);
  box-shadow: var(--pixel-border-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
  margin-bottom: 2px;
}

.hud-bar-container {
  width: 150px;
  height: 12px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  position: relative;
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  transition: width 0.4s ease-out;
  position: relative;
}

.hud-bar-fill.hp {
  background: linear-gradient(180deg, #44dd55 0%, var(--color-green) 50%, #1a9a2e 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.hud-bar-fill.mp {
  background: linear-gradient(180deg, #6aa4ff 0%, var(--color-blue) 50%, #2a5abf 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.hud-bar-fill.xp {
  background: linear-gradient(180deg, #ffe066 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.hud-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

/* HP bar danger states */
.hud-bar-fill.hp.low {
  animation: hpDanger 0.8s ease-in-out infinite;
}

@keyframes hpDanger {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Top-right: mini-map + floor */
.hud-top-right {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.hud-floor {
  padding: 4px 10px;
  background: rgba(13, 10, 26, 0.85);
  box-shadow: var(--pixel-border);
  font-size: 8px;
  color: var(--color-white-dim);
  text-shadow: 1px 1px 0 #000;
}

.hud-minimap-toggle {
  width: 28px;
  height: 28px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
  border: none;
  cursor: pointer;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--color-white-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.hud-minimap-toggle:hover {
  color: var(--color-gold);
}

/* Bottom-center: skill slots */
.hud-skills {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}

.hud-skill-slot {
  width: 44px;
  height: 44px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.hud-skill-slot:hover {
  box-shadow:
    var(--pixel-border),
    0 0 8px rgba(255, 255, 255, 0.15);
}

.hud-skill-icon {
  width: 80%;
  height: 80%;
  image-rendering: pixelated;
}

.hud-skill-key {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6px;
  color: var(--color-white-dim);
  background: var(--color-bg-dark);
  padding: 1px 3px;
  box-shadow: var(--pixel-border);
}

/* Cooldown overlay — clockwise sweep */
.hud-skill-cooldown {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
}

.hud-skill-cooldown-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
}

/* Bottom-left: equipped weapon */
.hud-weapon {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 44px;
  height: 44px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-weapon-icon {
  width: 80%;
  height: 80%;
  image-rendering: pixelated;
}

/* Bottom-right: gold count */
.hud-gold {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(13, 10, 26, 0.85);
  box-shadow: var(--pixel-border);
  font-size: 9px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

/* ============================================================
   PAUSE MENU
   ============================================================ */

#pause-menu {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(13, 10, 26, 0.88);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

#pause-menu.active {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}

.pause-title {
  font-size: 18px;
  color: var(--color-gold);
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
  margin-bottom: 16px;
}

.pause-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.pause-buttons .btn {
  min-width: 200px;
  text-align: center;
}

/* ============================================================
   GAME OVER SCREEN
   ============================================================ */

#game-over {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(13, 10, 26, 0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#game-over.active {
  display: flex;
  animation: fadeIn 0.6s ease-out;
}

.game-over-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  color: var(--color-red);
  text-shadow:
    0 0 10px var(--color-red-glow),
    0 0 30px var(--color-red-glow),
    0 0 60px rgba(232, 48, 48, 0.3),
    3px 3px 0 #000;
  letter-spacing: 6px;
  text-transform: uppercase;
  animation: deathPulse 2s ease-in-out infinite;
}

@keyframes deathPulse {
  0%, 100% {
    text-shadow:
      0 0 10px var(--color-red-glow),
      0 0 30px var(--color-red-glow),
      0 0 60px rgba(232, 48, 48, 0.3),
      3px 3px 0 #000;
  }
  50% {
    text-shadow:
      0 0 16px var(--color-red-glow),
      0 0 40px var(--color-red-glow),
      0 0 80px rgba(232, 48, 48, 0.5),
      3px 3px 0 #000;
  }
}

.game-over-message {
  font-size: 9px;
  color: var(--color-white-dim);
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  line-height: 2;
}

.game-over-gold-lost {
  font-size: 8px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */

#admin-panel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(13, 10, 26, 0.95);
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  overflow-y: auto;
}

#admin-panel.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.admin-title {
  font-size: 16px;
  color: var(--color-red);
  text-shadow: 0 0 10px var(--color-red-glow), 2px 2px 0 #000;
  margin-bottom: 20px;
}

.admin-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
  width: 100%;
}

.admin-section {
  background: var(--color-bg-panel);
  padding: 16px;
  box-shadow: var(--pixel-border);
}

.admin-section-title {
  font-size: 9px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-purple-deep);
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 8px;
}

.admin-row label {
  flex: 1;
  color: var(--color-white-dim);
}

.admin-row input,
.admin-row select {
  flex: 1;
  padding: 6px 10px;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--color-text);
  background: var(--color-bg-dark);
  border: none;
  box-shadow: var(--pixel-border);
}

.admin-row input:focus,
.admin-row select:focus {
  outline: none;
  box-shadow:
    var(--pixel-border-gold),
    0 0 8px var(--color-gold-glow);
}

.admin-close {
  position: absolute;
  top: 16px;
  right: 16px;
}

/* ============================================================
   SETTINGS OVERLAY
   ============================================================ */

#settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 26, 0.95);
  z-index: 18;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#settings-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.settings-title {
  color: var(--color-gold);
  font-size: 16px;
  margin-bottom: 10px;
  text-shadow: 0 0 6px var(--color-gold-glow), 2px 2px 0 #000;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 0;
}

.settings-label {
  color: var(--color-white-dim);
  font-size: 9px;
  width: 120px;
}

/* Pixel-style range slider */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 8px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  outline: none;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-gold);
  cursor: pointer;
  box-shadow: 0 0 4px var(--color-gold-glow);
}

.settings-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-gold);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 4px var(--color-gold-glow);
}

/* Pixel toggle switch */
.settings-toggle {
  width: 36px;
  height: 18px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  cursor: pointer;
  position: relative;
}

.settings-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--color-white-dim);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.settings-toggle.active::after {
  transform: translateX(18px);
  background: var(--color-gold);
  box-shadow: 0 0 4px var(--color-gold-glow);
}

/* ============================================================
   RARITY COLOR CLASSES
   ============================================================ */

.rarity-common   { color: var(--color-common);   border-color: var(--color-common)   !important; }
.rarity-uncommon { color: var(--color-uncommon); border-color: var(--color-uncommon) !important; }
.rarity-rare     { color: var(--color-rare);     border-color: var(--color-rare)     !important; }
.rarity-epic     { color: var(--color-epic);     border-color: var(--color-epic)     !important; }
.rarity-legendary { color: var(--color-legendary); border-color: var(--color-legendary) !important; }
.rarity-mythic   { color: var(--color-mythic);   border-color: var(--color-mythic)   !important; }

/* ============================================================
   ANIMATIONS — GAMEPLAY EFFECTS
   ============================================================ */

/* Damage numbers — float up and fade */
.damage-number {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 12px;
  color: var(--color-red);
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
  animation: damageFloat 1s ease-out forwards;
  z-index: 100;
}

.damage-number.heal {
  color: var(--color-green);
}

.damage-number.crit {
  font-size: 16px;
  color: var(--color-gold);
  text-shadow:
    0 0 6px var(--color-gold-glow),
    1px 1px 0 #000, -1px -1px 0 #000;
}

.damage-number.miss {
  font-size: 10px;
  color: var(--color-white-dim);
}

@keyframes damageFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  20%  { transform: translateY(-10px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
}

/* Loot drop — bounce */
.loot-drop {
  animation: lootBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes lootBounce {
  0%   { opacity: 0; transform: translateY(-30px) scale(0.5); }
  60%  { transform: translateY(4px) scale(1.05); }
  80%  { transform: translateY(-2px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Level up — golden flash */
.level-up-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(245, 200, 66, 0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 200;
  animation: levelFlash 1.2s ease-out forwards;
}

@keyframes levelFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

.level-up-text {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-pixel);
  font-size: 20px;
  color: var(--color-gold);
  text-shadow:
    0 0 12px var(--color-gold-glow),
    0 0 30px var(--color-gold-glow),
    3px 3px 0 #000;
  pointer-events: none;
  z-index: 201;
  animation: levelTextPop 1.5s ease-out forwards;
}

@keyframes levelTextPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1.2); }
  40%  { transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1); }
}

/* Boss entrance — screen shake + dark flash */
.screen-shake {
  animation: screenShake 0.5s ease-out;
}

@keyframes screenShake {
  0%        { transform: translate(0, 0); }
  10%, 30%  { transform: translate(-4px, 2px); }
  20%, 40%  { transform: translate(4px, -2px); }
  50%, 70%  { transform: translate(-2px, 1px); }
  60%, 80%  { transform: translate(2px, -1px); }
  90%       { transform: translate(-1px, 0); }
  100%      { transform: translate(0, 0); }
}

.boss-flash {
  position: absolute;
  inset: 0;
  background: var(--color-bg-dark);
  pointer-events: none;
  z-index: 200;
  animation: bossFlash 0.8s ease-out forwards;
}

@keyframes bossFlash {
  0%   { opacity: 0; }
  15%  { opacity: 0.8; }
  30%  { opacity: 0.2; }
  45%  { opacity: 0.6; }
  60%  { opacity: 0.1; }
  100% { opacity: 0; }
}

/* Status effects */
.status-poison {
  animation: poisonPulse 1s ease-in-out infinite;
}

@keyframes poisonPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(46, 204, 64, 0.2); }
  50%      { box-shadow: inset 0 0 20px rgba(46, 204, 64, 0.4); }
}

.status-burning {
  animation: burnPulse 0.5s ease-in-out infinite;
}

@keyframes burnPulse {
  0%, 100% { box-shadow: inset 0 0 10px rgba(232, 48, 48, 0.2); }
  50%      { box-shadow: inset 0 0 20px rgba(232, 160, 32, 0.5); }
}

.status-frozen {
  filter: brightness(1.2) saturate(0.6);
  box-shadow: inset 0 0 20px rgba(74, 138, 255, 0.3);
}

/* Shadow corruption ambient effect */
.shadow-corruption {
  animation: shadowPulse 3s ease-in-out infinite;
}

@keyframes shadowPulse {
  0%, 100% {
    box-shadow: inset 0 0 30px rgba(13, 10, 26, 0.3);
  }
  50% {
    box-shadow: inset 0 0 60px rgba(46, 26, 82, 0.5);
  }
}

/* ============================================================
   NOTIFICATIONS / TOAST
   ============================================================ */

.toast-container {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

.toast {
  padding: 6px 16px;
  background: rgba(13, 10, 26, 0.92);
  box-shadow: var(--pixel-border);
  font-size: 8px;
  color: var(--color-text);
  text-shadow: 1px 1px 0 #000;
  animation: toastSlide 3s ease-out forwards;
  white-space: nowrap;
}

.toast.toast-gold {
  color: var(--color-gold);
  box-shadow: var(--pixel-border-gold);
}

.toast.toast-red {
  color: var(--color-red);
  box-shadow: var(--pixel-border-red);
}

@keyframes toastSlide {
  0%   { opacity: 0; transform: translateY(-10px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */

#loading-screen {
  position: absolute;
  inset: 0;
  z-index: 200;
  background: var(--color-bg-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.loading-title {
  font-size: 12px;
  color: var(--color-gold);
  text-shadow: 0 0 6px var(--color-gold-glow), 2px 2px 0 #000;
}

.loading-bar-container {
  width: 280px;
  height: 14px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-gold) 100%);
  transition: width 0.3s ease-out;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.3);
}

.loading-text {
  font-size: 7px;
  color: var(--color-white-dim);
  animation: blinkText 1.2s steps(2) infinite;
}

/* ============================================================
   MINIMAP
   ============================================================ */

.hud-minimap {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 110px;
  height: 110px;
  background: rgba(13, 10, 26, 0.85);
  box-shadow: var(--pixel-border);
  overflow: hidden;
}

.minimap-canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ============================================================
   CONFIRMATION MODAL
   ============================================================ */

.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(13, 10, 26, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.modal-box {
  max-width: 380px;
  width: 90%;
  padding: 24px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border-gold);
  text-align: center;
}

.modal-title {
  font-size: 11px;
  color: var(--color-gold);
  text-shadow: 1px 1px 0 #000;
  margin-bottom: 12px;
}

.modal-message {
  font-size: 8px;
  color: var(--color-white-dim);
  line-height: 2;
  margin-bottom: 20px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ============================================================
   QUEST LOG
   ============================================================ */

.quest-log {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}

.quest-entry {
  padding: 10px;
  margin-bottom: 6px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
}

.quest-entry.active {
  box-shadow: var(--pixel-border-gold);
}

.quest-entry.completed {
  opacity: 0.5;
}

.quest-name {
  font-size: 8px;
  color: var(--color-gold);
  margin-bottom: 4px;
}

.quest-desc {
  font-size: 7px;
  color: var(--color-white-dim);
  line-height: 1.8;
}

.quest-objective {
  font-size: 7px;
  color: var(--color-green);
  margin-top: 4px;
}

.quest-objective.incomplete {
  color: var(--color-white-dim);
}

/* ============================================================
   SAVE SLOT SCREEN
   ============================================================ */

.save-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
  width: 90%;
}

.save-slot {
  padding: 14px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.save-slot:hover {
  box-shadow:
    var(--pixel-border-gold),
    0 0 10px var(--color-gold-glow);
  transform: translateY(-2px);
}

.save-slot.empty {
  opacity: 0.5;
}

.save-slot-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.save-slot-name {
  font-size: 9px;
  color: var(--color-gold);
}

.save-slot-details {
  font-size: 7px;
  color: var(--color-white-dim);
}

.save-slot-time {
  font-size: 6px;
  color: var(--color-white-dim);
}

/* ============================================================
   SCREEN TRANSITION OVERLAY
   ============================================================ */

.screen-transition {
  position: absolute;
  inset: 0;
  z-index: 900;
  background: var(--color-bg-dark);
  pointer-events: none;
}

.screen-transition.transition-in {
  animation: transitionIn 0.4s ease-out forwards;
}

.screen-transition.transition-out {
  animation: transitionOut 0.4s ease-in forwards;
}

@keyframes transitionIn {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes transitionOut {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE — SMALLER SCREENS
   ============================================================ */

/* game-container is always 100vw/100vh now */

@media (max-width: 768px) {
  .character-cards {
    flex-direction: column;
    align-items: center;
  }

  .character-card {
    width: 85%;
    max-width: 280px;
  }

  #inventory-overlay.active {
    flex-direction: column;
  }

  .skill-tree-container {
    flex-direction: column;
    align-items: center;
  }

  .skill-branch {
    width: 90%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hud-bar-container {
    width: 120px;
    height: 10px;
  }

  .hud-skill-slot {
    width: 38px;
    height: 38px;
  }

  .dialogue-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Larger touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .npc-btn {
    min-width: 100px;
    min-height: 80px;
  }

  .town-npcs {
    gap: 8px;
    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .title-main {
    font-size: 1rem;
    letter-spacing: 2px;
  }

  .title-buttons .btn {
    min-width: 180px;
    font-size: 8px;
  }

  .inv-grid {
    grid-template-columns: repeat(3, 48px);
  }

  .inv-slot {
    width: 48px;
    height: 48px;
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hud-skills {
    gap: 4px;
  }

  .hud-skill-slot {
    width: 34px;
    height: 34px;
  }

  .hud-bar-container {
    width: 100px;
  }

  .town-title {
    font-size: 14px;
  }

  .npc-btn {
    width: 110px;
    font-size: 7px;
    padding: 8px 10px;
  }
}

/* ============================================================
   DUNGEON SELECT OVERLAY
   ============================================================ */

#dungeon-select-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 26, 0.95);
  z-index: 18;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

#dungeon-select-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.dungeon-select-title {
  color: var(--color-gold);
  font-size: 14px;
  margin-bottom: 10px;
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
}

.dungeon-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 800px;
}

.dungeon-card {
  width: 140px;
  padding: 14px 10px;
  background: var(--color-bg-panel);
  box-shadow: var(--pixel-border);
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.dungeon-card:hover:not(.locked) {
  transform: translateY(-3px);
  box-shadow: var(--pixel-border-gold), 0 0 12px var(--color-gold-glow);
}

.dungeon-card.locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(60%);
}

.dungeon-card .dungeon-card-name {
  color: var(--color-gold);
  font-size: 9px;
  margin-bottom: 6px;
  text-shadow: 1px 1px 0 #000;
}

.dungeon-card .dungeon-card-floors {
  color: var(--color-white-dim);
  font-size: 7px;
  margin-bottom: 4px;
}

.dungeon-card .dungeon-card-status {
  font-size: 7px;
  margin-top: 6px;
}

.dungeon-card .dungeon-card-status.cleared {
  color: var(--color-green);
}

.dungeon-card .dungeon-card-status.locked-text {
  color: var(--color-red);
}

/* ============================================================
   BLACKSMITH / CRAFTING OVERLAY
   ============================================================ */

#blacksmith-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 10, 26, 0.95);
  z-index: 18;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 30px;
  gap: 10px;
  overflow-y: auto;
}

#blacksmith-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease-out;
}

.bs-title {
  color: var(--color-gold);
  font-size: 14px;
  text-shadow: 0 0 8px var(--color-gold-glow), 2px 2px 0 #000;
}

.bs-tabs {
  display: flex;
  gap: 4px;
}

.bs-tab {
  padding: 8px 20px;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--color-white-dim);
  background: var(--color-bg-panel-alt);
  border: none;
  cursor: pointer;
  box-shadow: var(--pixel-border);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.bs-tab:hover {
  color: var(--color-text);
  background: var(--color-purple-deep);
}

.bs-tab.active {
  color: var(--color-gold);
  background: var(--color-purple-deep);
  box-shadow: var(--pixel-border-gold);
}

.bs-content {
  background: var(--color-bg-panel);
  padding: 16px;
  box-shadow: var(--pixel-border);
  max-width: 600px;
  width: 90%;
  min-height: 250px;
  max-height: 400px;
  overflow-y: auto;
}

.bs-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  margin-bottom: 4px;
  background: var(--color-bg-dark);
  box-shadow: var(--pixel-border);
}

.bs-item-name {
  font-size: 8px;
  color: var(--color-text);
  flex: 1;
}

.bs-item-cost {
  font-size: 7px;
  color: var(--color-gold);
  margin-right: 10px;
}

.bs-item-btn {
  padding: 5px 12px;
  font-family: var(--font-pixel);
  font-size: 7px;
  color: #fff;
  background: linear-gradient(180deg, var(--color-green) 0%, var(--color-green-dark) 100%);
  border: none;
  cursor: pointer;
  box-shadow: var(--pixel-border);
  transition: transform var(--transition-fast);
}

.bs-item-btn:hover {
  transform: translateY(-1px);
}

.bs-item-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bs-gold-display {
  color: var(--color-gold);
  font-size: 9px;
  text-shadow: 1px 1px 0 #000;
}

.bs-back-btn {
  margin-top: 10px;
  margin-bottom: 20px;
}