:root {
  /* Vibrant dark fantasy palette - richer earth tones, less flat brown */
  --bg: #120f0a;
  --bg-panel: #211d16;
  --bg-deep: #18140e;

  --gold: #e2b36b;           /* more vibrant gold */
  --gold-bright: #f4d9a8;
  --parchment: #d2c09a;

  --teal: #4c7369;           /* secondary accent for variety & corruption feel */
  --blood: #a53a3a;          /* more saturated */

  --text: #e0d4b8;
  --text-dim: #9a8f70;

  --wall: #2f2923;
  --floor: #3f3528;
  --accent: #6b5638;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, 'Palatino Linotype', serif;
  overflow: hidden;
  height: 100vh;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== CINEMATIC INTRODUCTION (Grok Imagine) ===== */
.cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cinematic-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.92);
  transform: scale(1.02);
  animation: cinematic-zoom 10.5s ease-out forwards;
  z-index: 1;
}

/* Fallback static image layer (Grok Imagine) — shown when video autoplay blocked or before play */
.cinematic-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 0;
}

@keyframes cinematic-zoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1.0); }
}

.cinematic-overlay {
  position: relative;
  z-index: 3;
  max-width: 820px;
  padding: 0 40px;
  text-align: center;
  color: #f0e6d2;
}

.cinematic-content {
  opacity: 0;
  animation: cinematic-fade-in 2.8s ease-out 1.2s forwards;
}

@keyframes cinematic-fade-in {
  to { opacity: 1; }
}

.cinematic-title {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #f0d9a0;
  text-shadow: 0 4px 30px rgba(0,0,0,0.9);
  margin-bottom: 8px;
  font-family: Georgia, serif;
}

.cinematic-tagline {
  font-size: 18px;
  letter-spacing: 4px;
  color: #c9b48a;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.cinematic-story {
  font-size: 17px;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 48px;
  color: #e8d9b8;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

.cinematic-prompt {
  font-size: 14px;
  letter-spacing: 2px;
  color: #a88;
  text-transform: uppercase;
  animation: pulse 2.5s ease-in-out infinite;
}

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

.cinematic-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.85) 82%);
  z-index: 2;
  pointer-events: none;
}

/* Hide normal title until cinematic intro is dismissed */
#screen-title {
  transition: opacity 0.6s ease;
}

/* ===== LEVEL DESCENT TRANSITIONS (Grok Imagine per-level) ===== */
.descent-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.descent-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.descent-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: contrast(1.05) saturate(0.95);
}
.descent-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  padding: 0 40px;
  color: #f0d9a0;
}
.descent-quote {
  font-family: Georgia, 'Palatino Linotype', serif;
  font-size: 28px;
  line-height: 1.35;
  font-style: italic;
  text-shadow: 0 3px 12px rgba(0,0,0,0.85);
  margin-bottom: 18px;
}
.descent-hint {
  font-size: 15px;
  opacity: 0.75;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.descent-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.65) 82%);
  pointer-events: none;
  z-index: 1;
}

/* ===== ENTRY / LANDING PAGE (static gesture provider - "ENTER ALL YE WHO DARE") ===== */
.entry-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.entry-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.72) contrast(1.1) saturate(0.9);
  z-index: 0;
}
.entry-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 42%, transparent 28%, rgba(0,0,0,0.82) 72%);
  z-index: 1;
  pointer-events: none;
}
.entry-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #f0e6d2;
  padding: 0 20px;
  max-width: 860px;
  text-shadow: 0 3px 18px rgba(0,0,0,0.9);
}
.entry-ornament {
  font-size: 42px;
  color: #c9a46e;
  margin-bottom: 8px;
  opacity: 0.9;
  letter-spacing: 8px;
}
.entry-dare {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: #f4d9a8;
  margin-bottom: 6px;
  line-height: 1;
}
.entry-game-title {
  font-size: 78px;
  font-weight: 700;
  letter-spacing: 7px;
  color: #e8d4a8;
  margin-bottom: 4px;
  line-height: 0.9;
  text-shadow: 0 0 50px rgba(212,175,119,0.55);
}
.entry-tagline {
  font-size: 17px;
  color: #c9b38a;
  letter-spacing: 4px;
  margin-bottom: 38px;
  opacity: 0.95;
}
.entry-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,16,11,0.75);
  border: 5px solid #e8c78a;
  padding: 22px 72px;
  border-radius: 8px;
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  animation: entry-cta-pulse 1.45s infinite alternate ease-in-out;
  box-shadow: 0 0 18px rgba(232, 199, 138, 0.7), 0 0 40px rgba(201, 164, 110, 0.45);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.entry-action:hover {
  transform: scale(1.06);
  background: rgba(35,27,18,0.9);
  box-shadow: 0 0 28px rgba(244, 217, 168, 1), 0 0 60px rgba(232, 199, 138, 0.6), 0 0 0 4px #f4d9a8 inset;
}
.entry-action:active {
  transform: scale(0.985);
  box-shadow: 0 0 12px rgba(232, 199, 138, 0.9);
}
.entry-action-text {
  color: #f8e9c8;
  letter-spacing: 4px;
}

@keyframes entry-cta-pulse {
  from {
    box-shadow: 0 0 18px rgba(232, 199, 138, 0.65), 0 0 36px rgba(201, 164, 110, 0.4);
    transform: scale(1);
  }
  to {
    box-shadow: 0 0 32px rgba(244, 217, 168, 0.95), 0 0 55px rgba(232, 199, 138, 0.55);
    transform: scale(1.022);
  }
}
.entry-hint {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #a38b5f;
  opacity: 0.8;
}

/* ===== SCREENS ===== */
.screen {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

/* Game screen has less padding to let background show more at edges */
#screen-game {
  padding: 12px;
}
.screen.active {
  display: flex;
}

/* Game screen specific layout - full width stacking for header + main content */
#screen-game.screen.active {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Full screen background behind everything in the game screen */
#screen-game {
  background-image: url('../assets/game-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Subtle dark overlay across the entire game screen for readability */
#screen-game::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 12, 8, 0.55);
  z-index: 1;
  pointer-events: none;
}

/* Ensure all main content layers sit above the background */
#screen-game > * {
  position: relative;
  z-index: 2;
}

/* (old help-open shifting rule removed - no longer needed) */

.title-content {
  text-align: center;
  max-width: 720px;
}
.title-header img {
  border-radius: 4px;
}
.hammer-icon {
  font-size: 72px;
  color: var(--gold);
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
h1 {
  font-size: 64px;
  letter-spacing: 6px;
  color: var(--gold-bright);
  text-shadow: 0 0 40px rgba(212, 175, 119, 0.3);
  line-height: 0.92;
  margin-bottom: 6px;
}
.subtitle {
  font-size: 18px;
  color: var(--text-dim);
  letter-spacing: 3px;
  margin-bottom: 32px;
}
.story-teaser {
  font-size: 17px;
  line-height: 1.5;
  color: var(--parchment);
  margin-bottom: 48px;
  padding: 0 40px;
}
.gold { color: var(--gold); }

.menu-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
}
.btn-primary, .btn-secondary, .btn-danger {
  font-family: inherit;
  font-size: 15px;
  padding: 14px 42px;
  border: none;
  cursor: pointer;
  letter-spacing: 1.5px;
  transition: all 0.15s ease;
  text-transform: uppercase;
}
.btn-primary {
  background: linear-gradient(#6b5638, #4a3a28);
  color: var(--gold-bright);
  border: 1px solid #8a6640;
}
.btn-primary:hover { background: #7a6142; transform: translateY(-1px); }
.btn-primary.large { padding: 18px 56px; font-size: 17px; }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid #5c4630;
}
.btn-secondary:hover { background: #2a241a; border-color: #6b5638; }

/* Compact style for the two method buttons in character creation (fixes overlap into Ability Scores panel) */
#screen-creation .field .btn-secondary.small {
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  white-space: normal;   /* allow wrapping if needed */
  text-align: center;
}

.btn-danger {
  background: #3a1f1f;
  color: #c88;
  border: 1px solid #5c2f2f;
  padding: 8px 16px;
  font-size: 12px;
}
.btn-danger:hover { background: #4a2727; }
.btn-danger.small { padding: 6px 12px; font-size: 11px; }

#btn-help.active {
  background: #3a2f20;
  border-color: var(--gold);
  color: var(--gold);
}

.btn-small {
  width: 26px; height: 26px;
  background: #252016;
  border: 1px solid #5c4630;
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.btn-small:hover { background: #3a2f20; }

.version {
  font-size: 11px;
  color: #554c38;
  letter-spacing: 1px;
}

/* ===== CHARACTER CREATION ===== */
.creation-container {
  width: 100%;
  max-width: 1080px;
}
.creation-header {
  text-align: center;
  margin-bottom: 24px;
}
.creation-header h2 { font-size: 32px; color: var(--gold); }
.creation-grid {
  display: grid;
  grid-template-columns: 280px 340px 260px;
  gap: 18px;
  margin-bottom: 20px;
  align-items: start;   /* Prevent tall content in one panel from pushing others down */
}
@media (max-width: 980px) {
  .creation-grid {
    grid-template-columns: 1fr 1fr;
  }
  .creation-grid > .creation-panel:last-child {
    grid-column: 1 / -1;
  }
}
.creation-panel {
  background: var(--bg-panel);
  border: 2px solid #3a2f20;
  padding: 18px;
}
.creation-panel h3 {
  color: var(--gold);
  font-size: 15px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #3a2f20;
}

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
input, select {
  width: 100%;
  background: #120f0a;
  border: 1px solid #5c4630;
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 15px;
}
.race-class-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.abilities { display: flex; flex-direction: column; gap: 6px; }
.ability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #120f0a;
  padding: 6px 10px;
  border: 1px solid #2c2520;
}
.ability-name { font-weight: bold; color: var(--gold); width: 42px; }
.ability-controls { display: flex; align-items: center; gap: 4px; }
.score { font-size: 20px; width: 34px; text-align: center; font-weight: 600; }
.mod { width: 36px; text-align: right; font-family: monospace; color: var(--text-dim); }

.points { float: right; font-size: 13px; color: #a88; }
.point-buy-hint { font-size: 11px; color: #776; margin-top: 10px; line-height: 1.35; }

.preview-stats {
  font-size: 14px;
  line-height: 1.7;
}
.preview-stats div { display: flex; justify-content: space-between; margin: 3px 0; }
.starting-hp { margin-top: 14px; font-size: 15px; color: var(--gold); }

.creation-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ===== GAME SCREEN ===== */
.game-header {
  position: relative;
  width: 100%;              /* force full width so absolute centering works relative to the screen */
  display: flex;
  align-items: center;
  padding: 8px 20px;
  background: rgba(18, 15, 10, 0.28);
  border-bottom: 2px solid #2c2520;
  flex-shrink: 0;
  min-height: 52px;
  box-sizing: border-box;
}

/* Centered main header content (title + depth + turn) at top middle */
.header-main {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  max-width: calc(100% - 160px); /* prevents overlap with right buttons on narrow screens */
}

.game-title { 
  color: var(--gold); 
  letter-spacing: 3px; 
  font-size: 17px; 
  white-space: nowrap;
}

.dungeon-info { 
  color: var(--text-dim); 
  font-size: 12px; 
  margin-top: 1px;
}

#turn-counter {
  color: #776b50; 
  font-size: 12px; 
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Action buttons pinned to the right edge */
.header-actions {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

.game-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 6px 8px;            /* Tighter padding to better utilize full window */
  gap: 6px;
  background: rgba(10, 8, 5, 0.42);
}

.game-main-inner {
  display: flex;
  gap: 12px;
  margin: 0 auto;
  width: 100%;
  max-width: none;            /* Allow it to use the full window width */
  align-items: stretch;
  box-sizing: border-box;
  min-height: 0;
  flex: 1;                    /* Take remaining space above the bottom feed */
}

/* Center column: help bar on top + canvas below */
.center-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* Compact bar above the map for controls/help */
.map-top-bar {
  min-height: 28px;
  background: rgba(20, 17, 13, 0.35);
  border: 1px solid #4a3a28;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
  margin-bottom: 0;
}

.help-text {
  font-family: 'Consolas', monospace;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--parchment);
}

.canvas-container {
  position: relative;
  border: 3px solid #4a3a28;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7);
  background: rgba(15, 13, 10, 0.4);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-top: none;
  border-radius: 0 0 4px 4px;
  min-height: 420px;
  /* aspect-ratio removed to allow the larger 1536x864 map to properly fill available window space */
}
#game-canvas {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  width: 100%;
  height: 100%;
  max-width: 1536px;
  max-height: 864px;
  object-fit: contain;
}

/* Fullscreen support - works whether fullscreening the root or a container */
:fullscreen .canvas-container,
:-webkit-full-screen .canvas-container,
:-moz-full-screen .canvas-container {
  border: none;
  box-shadow: none;
  background: #111;
  min-height: 100vh;
}

:fullscreen #game-canvas,
:-webkit-full-screen #game-canvas,
:-moz-full-screen #game-canvas {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.targeting-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(140, 47, 47, 0.9);
  color: white;
  padding: 4px 18px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 2px;
  pointer-events: none;
}

/* Old .sidebar is no longer the main right column.
   We now use .right-panel (defined above) for inventory focus.
   Keeping minimal fallback styles in case any old code still references .sidebar */
.old-sidebar {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex-shrink: 0;
}
.panel {
  background: rgba(24, 20, 15, 0.22);
  border: 2px solid #4a3a28;
  padding: 8px 10px;
}

/* Inventory panel gets flexible height so the 5-row grid fits without cutoff */
.panel.inventory {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.panel h3 {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2c2520;
}

.char-header { margin-bottom: 10px; }
#char-name-display { font-size: 21px; color: var(--gold); }
#char-race-class { font-size: 12px; color: var(--text-dim); }

.hp-bar-container { margin: 8px 0 12px; }
.bar-label { font-size: 12px; display: flex; justify-content: space-between; margin-bottom: 3px; }
.hp-bar {
  height: 11px;
  background: #1f160f;
  border: 1px solid #3a2f20;
  position: relative;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(#c44, #8c2f2f);
  transition: width 0.2s ease;
}
.bar-fill.hp { background: linear-gradient(#c44, #8c2f2f); }

.hunger-bar-container { margin: 4px 0 10px; }
.hunger-bar {
  height: 9px;
  background: #1f160f;
  border: 1px solid #3a2f20;
  position: relative;
  overflow: hidden;
}
.bar-fill.hunger { background: linear-gradient(#c85, #8a4422); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.stat {
  background: #120f0a;
  padding: 5px 6px;
  text-align: center;
  font-size: 14px;
}
.stat .label { display: block; font-size: 10px; color: var(--text-dim); }
.stat .value { font-weight: 600; color: var(--gold); }

.ability-scores-mini {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  font-size: 11px;
  text-align: center;
}
.mini-abi {
  background: #120f0a;
  padding: 3px 0;
}
.mini-abi span { display: block; font-size: 9px; color: #776; }
.mini-abi b { color: var(--gold); }

.equip-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.equip-slot {
  background: #120f0a;
  border: 1px solid #3a2f20;
  padding: 5px 6px;
  font-size: 10px;
  text-align: center;
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  transition: all 0.1s;
}
.equip-slot:hover { 
  border-color: #d4af77; 
  background: #1a160f;
}
.equip-slot .slot-label { 
  font-size: 8px; 
  color: #8a6640; 
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.equip-slot .item-name { 
  color: var(--text); 
  font-size: 9px;
  line-height: 1.15;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.equip-slot img {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  /* Give enough vertical space for 5 clean rows without the bottom being cut off.
     The panel will scroll internally if you have a full 20 items. */
  max-height: 255px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.inv-item {
  background: #120f0a;
  border: 1px solid #3a2f20;
  padding: 5px 4px;
  font-size: 9px;
  text-align: center;
  cursor: pointer;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  line-height: 1.05;
  transition: all 0.1s;
  overflow: hidden;
}
.inv-item:hover { 
  border-color: #d4af77; 
  background: #1a160f; 
  transform: scale(1.04);
}
.inv-item.empty { 
  opacity: 0.3; 
  cursor: default; 
  background: #0a0805;
}

/* Make the new D&D illustrated icons pop nicely */
.inv-item img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
  flex-shrink: 0;
}
.inv-item.rarity-rare img,
.inv-item.rarity-epic img,
.inv-item.rarity-legendary img {
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.inv-count { float: right; font-size: 10px; color: var(--text-dim); }

/* Quests panel - taller scroll area for 20-level campaign + longer quest text */
#quests-panel .quest-list,
.panel.quests .quest-list {
  max-height: 148px !important;
  overflow: auto;
}

.spell-list { display: flex; flex-direction: column; gap: 3px; }
.spell-btn {
  background: #120f0a;
  border: 1px solid #3a2f20;
  padding: 6px 9px;
  font-size: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.spell-btn:hover { border-color: #6a8; }
.spell-btn .cost { float: right; color: #8a7; font-size: 10px; }
.spell-btn.disabled { opacity: 0.4; cursor: not-allowed; }

/* RARITY COLORS - distinct per tier (normal/rare/epic/legendary) for easy scanning in tall/wide inventory & equipment */
.inv-item.rarity-common,
.inv-item.rarity-normal { color: #c8c0b0; border-color: #5c4630; }
.inv-item.rarity-uncommon { color: #6f6; border-color: #3a5; }
.inv-item.rarity-rare { color: #66aaff; border-color: #4488cc; box-shadow: inset 0 0 0 1px rgba(102,170,255,0.25); }
.inv-item.rarity-epic { color: #c77cff; border-color: #8448aa; background: rgba(50,30,60,0.65); font-weight:600; box-shadow: inset 0 0 0 1px rgba(199,124,255,0.3); }
.inv-item.rarity-legendary { color: #ffaa33; border-color: #c80; background: rgba(60,35,10,0.65); font-weight:700; text-shadow: 0 0 4px rgba(255,140,0,0.5); box-shadow: inset 0 0 0 1px rgba(255,170,51,0.35), 0 0 6px rgba(255,140,0,0.2); }

.equip-slot.rarity-uncommon { border-color: #3a5 !important; }
.equip-slot.rarity-rare { border-color: #4488cc !important; }
.equip-slot.rarity-epic { border-color: #8448aa !important; background: rgba(50,30,60,0.5) !important; }
.equip-slot.rarity-legendary { border-color: #c80 !important; background: rgba(60,35,10,0.5) !important; }

/* ============================================
   COMBAT LOG OVERLAY - Inside the map window at the bottom
   ============================================ */
.canvas-container {
  position: relative; /* needed for absolute overlay */
}

.combat-log-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 184px;
  background: rgba(10, 8, 5, 0.86);
  border-top: 2px solid #6b5638;
  border-bottom: 2px solid #3a2f20;
  padding: 8px 16px 10px;
  font-family: 'Consolas', monospace;
  font-size: 27px;
  line-height: 1.22;
  color: #d8c8a8;
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.55);
  pointer-events: none;
  z-index: 10;
}

/* Subtle inner border for nicer frame */
.combat-log-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(120, 90, 50, 0.25);
  pointer-events: none;
}

.combat-log-overlay .msg {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  flex: 0 0 auto;               /* prevent shrinking or weird overlap */
  min-height: 1.22em;
}

.combat-log-overlay .msg.crit {
  color: #ffbb88;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 140, 50, 0.6);
}

.combat-log-overlay .msg.hit { color: #eeaa99; }
.combat-log-overlay .msg.loot { color: #99eeaa; }
.combat-log-overlay .msg.quest { color: #ffee99; font-weight: 700; }
.combat-log-overlay .msg.system { color: #c8b89a; font-style: italic; }

/* ============================================
   D20 ROLL POPUP - Centered at bottom of map window
   ============================================ */
.map-dice-popup {
  position: absolute;
  bottom: 95px;               /* sits just above the combat log overlay */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
}

.map-dice-popup.hidden {
  display: none;
}

.dice-popup-content {
  background: rgba(16, 13, 9, 0.92);
  border: 2px solid #6b5638;
  border-radius: 8px;
  padding: 8px 16px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6),
              0 0 12px rgba(255, 140, 0, 0.15);
  text-align: center;
  min-width: 110px;
}

.dice-label {
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.dice-image {
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: crisp-edges;
  transition: transform 0.08s linear, width 0.2s ease, height 0.2s ease, filter 0.2s ease;
}

.map-dice-popup.rolling .dice-image {
  animation: dice-roll-spin 0.1s linear infinite;
}

@keyframes dice-roll-spin {
  0%   { transform: rotate(0deg) scale(0.96); }
  50%  { transform: rotate(180deg) scale(1.04); }
  100% { transform: rotate(360deg) scale(0.96); }
}

.dice-result {
  margin-top: 4px;
  font-size: 26px;
  font-weight: 700;
  color: #ffdd99;
  text-shadow: 0 0 8px rgba(255, 180, 60, 0.7);
  min-height: 30px;
  line-height: 1;
}

/* Special crit 20 flaming effect */
.map-dice-popup.crit-20 {
  background: rgba(22, 10, 6, 0.94);
  border-color: #ff6600;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.55),
              0 0 25px rgba(255, 100, 0, 0.5);
}

.map-dice-popup.crit-20 .dice-image {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 0 15px #ff6600) 
          drop-shadow(0 0 30px #ffcc44) 
          drop-shadow(0 0 50px #ff4400);
  transition: width 0.2s ease, height 0.2s ease, filter 0.2s ease;
  animation: crit-flame-pulse 0.5s ease-in-out;
}

.map-dice-popup.crit-20 .dice-result {
  font-size: 34px;
  color: #ffdd88;
  text-shadow: 0 0 15px rgba(255, 160, 40, 1);
}

@keyframes crit-flame-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Hide the old tall left log */
.game-main-inner .log-panel.left-log {
  display: none !important;
}

/* ============================================
   NEW LAYOUT - 2026-06
   Left = Character Panel (portrait + clean sheet)
   Center = Canvas
   Right = Inventory Panel (expanded)
   Bottom = Tiny 2-3 line Combat Feed
   ============================================ */

/* ============================================
   NEW SIDE PANELS - Character (Left) + Inventory (Right)
   ============================================ */

.left-panel,
.right-panel {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  background: rgba(20, 17, 13, 0.72);
  border: 2px solid #4a3a28;
  border-radius: 6px;
  padding: 10px;
  font-size: 12.5px;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.character-panel {
  background: rgba(22, 18, 13, 0.75);
}

.inventory-panel {
  background: rgba(20, 17, 14, 0.72);
}

.panel-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #4a3a28;
  text-transform: uppercase;
}

/* --- CHARACTER PANEL --- */
.char-portrait-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #0c0a07;
  border: 2px solid #4a3a28;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.char-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: crisp-edges;
  transition: transform 0.2s ease;
}

.char-portrait:hover {
  transform: scale(1.02);
}

.char-basic {
  margin-bottom: 8px;
}

.char-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.1;
}

.char-race-class {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 1px;
}

.vitals {
  margin-bottom: 8px;
}

.hp-bar-container,
.hunger-bar-container {
  margin-bottom: 4px;
}

.bar-label {
  font-size: 10px;
  color: #887;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.hp-bar,
.hunger-bar {
  height: 10px;
  background: #1a160f;
  border: 1px solid #3a2f20;
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  transition: width 0.2s ease;
}

.bar-fill.hp { background: linear-gradient(90deg, #4a8a4a, #6ab26a); }
.bar-fill.hunger { background: linear-gradient(90deg, #a86a3a, #c88a5a); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.stat {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,0.3);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(75, 60, 40, 0.3);
}

.stat .label { color: #887; }
.stat .value { color: #d4c4a0; font-weight: 600; }

.ability-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  font-size: 11px;
  margin-top: 2px;
}

.ability-scores .abi {
  display: flex;
  justify-content: space-between;
  background: rgba(0,0,0,0.35);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 10.5px;
  border: 1px solid rgba(75, 60, 40, 0.4);
}

.ability-scores .abi span { color: #887; }
.ability-scores .abi b { color: #d4c4a0; font-weight: 700; }

/* Compact equipped items inside character panel */
.equipped-mini {
  margin-top: 6px;
  font-size: 11px;
}

.equipped-mini .section-title {
  font-size: 10px;
  color: var(--teal);
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}

.equipped-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  font-size: 10.5px;
}

.equipped-mini-item {
  background: rgba(0,0,0,0.35);
  border: 1px solid #4a3a28;
  padding: 3px 5px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- INVENTORY / RIGHT PANEL --- */
.inventory-panel .section {
  background: rgba(22, 18, 12, 0.55);
  border: 1px solid #3a2f20;
  padding: 5px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

/* Old inventory d20 styles removed - relocated to map popup */

.inventory-panel h4 {
  font-size: 10px;
  margin: 0 0 3px;
  color: #a88;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}

.equip-slot {
  font-size: 11px;
  padding: 5px 6px;
  background: rgba(0,0,0,0.35);
  border: 1px solid #3a2f20;
  border-radius: 3px;
  min-height: 30px;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.equip-slot img {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  margin-right: 4px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* Good use of the wider right panel */
  gap: 3px;
  margin-bottom: 6px;
}

.inv-item {
  font-size: 11px;
  padding: 5px 2px;
  background: rgba(0,0,0,0.35);
  border: 1px solid #4a3a28;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.inv-item:hover {
  border-color: var(--teal);
  background: rgba(30, 40, 35, 0.6);
}

.game-main-inner .log-panel.left-log .log-header {
  flex-shrink: 0;
  font-size: 10px;
  padding: 4px 8px;
}

.game-main-inner .log-panel.left-log .message-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.25;
  font-family: 'Consolas', monospace;
}

/* Make log messages more compact for the narrow left column */
.game-main-inner .log-panel.left-log .message-log .msg {
  margin-bottom: 2px;
  /* Allow wrapping so full messages (including damage numbers) are visible */
  white-space: normal;
  word-break: break-word;
}
.log-header {
  font-size: 10px;
  padding: 3px 16px;
  color: #665;
  letter-spacing: 2px;
  background: #120f0a;
}
.message-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.35;
  font-family: 'Consolas', monospace;
}
.message-log .msg { margin-bottom: 2px; }
.message-log .msg.hit { color: #e88; }
.message-log .msg.crit { color: #f66; font-weight: bold; }
.message-log .msg.miss { color: #998; }
.message-log .msg.spell { color: #8ad; }
.message-log .msg.loot { color: #4c8; }
.message-log .msg.system { color: #a98; font-style: italic; }
.message-log .msg.quest { color: #ffdd66; font-weight: 600; } /* prominent gold for new floor quest starts */

/* END SCREENS */
.end-content {
  text-align: center;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 4px 20px;
  box-sizing: border-box;
}
/* .end-icon removed - using end-banner image instead */
#screen-end h2 { font-size: 38px; color: var(--gold); margin-bottom: 4px; }

/* Ensure end screen (victory/defeat) has solid dark bg so it doesn't show through to black game canvas or body */
#screen-end {
  background: #120f0a;
  z-index: 2000;
}
#screen-end.screen.active {
  display: flex !important;
}
#screen-end .end-content {
  background: #1a160f;
  border: 1px solid #3a2f20;
  border-radius: 4px;
  padding: 16px 24px;
}
.end-subtitle { color: var(--text-dim); margin-bottom: 24px; letter-spacing: 1px; }
.end-story {
  background: #1a160f;
  border: 1px solid #3a2f20;
  padding: 18px 26px;
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--parchment);
}
.end-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
  font-size: 14px;
  color: var(--text-dim);
}
.end-stats span { color: var(--gold); font-weight: 600; }

.hidden { display: none !important; }

/* Floating help panel is disabled now that log is on left - using ? button for simple help instead */
.help-panel {
  display: none !important;
}
.help-panel.hidden {
  display: none !important;
}
.help-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: #120f0a;
  border-bottom: 1px solid #3a2f20;
  font-size: 13px;
  color: var(--gold);
  flex-shrink: 0;
}
.help-close {
  background: none;
  border: none;
  color: #c9b48a;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.help-close:hover { color: #fff; }
.help-content {
  padding: 10px;
  line-height: 1.45;
  overflow-y: auto;
  flex: 1;
}
.help-content div { margin-bottom: 5px; }
.help-content hr { border: none; border-top: 1px solid #3a2f20; margin: 8px 0; }
.help-content small { color: var(--text-dim); }

/* ===== MODAL (How to Play + future use) ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-content {
  background: var(--bg-panel);
  border: 3px solid #3a2f20;
  max-width: 720px;
  width: 100%;
  padding: 24px 28px;
  color: var(--text);
}
.modal-content h2 {
  color: var(--gold);
  margin-bottom: 16px;
  font-size: 26px;
}
#modal-close-x:hover {
  color: #fff;
  transform: scale(1.2);
}
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}
.howto-grid h4 {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 6px;
}
.howto-grid ul {
  padding-left: 16px;
  line-height: 1.45;
  font-size: 13.5px;
}
.howto-grid li { margin-bottom: 3px; }

/* Improved thorough How to Play modal content */
.howto-content {
  font-size: 13.5px;
  line-height: 1.5;
  color: #c9b48a;
}
.howto-content h4 {
  color: #d4af77;
  font-size: 15px;
  margin: 16px 0 6px;
  border-bottom: 1px solid #3a2f20;
  padding-bottom: 4px;
}
.howto-content ul {
  margin: 4px 0 12px 18px;
  padding: 0;
}
.howto-content li {
  margin-bottom: 4px;
}
.howto-content p {
  margin: 6px 0 10px;
}

/* Scrollbars */
.message-log::-webkit-scrollbar, .sidebar::-webkit-scrollbar { width: 6px; }
.message-log::-webkit-scrollbar-thumb { background: #3a2f20; }

/* ===== NEW: SETTINGS + HALL OF FAME MODALS ===== */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  border-bottom: 1px solid #3a2f20;
  padding-bottom: 8px;
}
.modal-x {
  background: none;
  border: none;
  color: #c9b48a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 8px;
}
.modal-x:hover { color: #fff; transform: scale(1.15); }

.settings-modal, .hall-modal {
  max-width: 620px;
}
.settings-section {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #3a2f20;
}
.settings-section:last-of-type { border-bottom: none; margin-bottom: 8px; }
.settings-section h3 {
  color: var(--gold);
  font-size: 15px;
  margin: 0 0 10px;
  letter-spacing: 0.5px;
}
.audio-controls { display: flex; flex-direction: column; gap: 7px; }
.vol-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.vol-row label { flex: 0 0 110px; color: #c9b48a; }

/* ===== BOSS ENCOUNTER MODAL (dramatic full-screen popup with portrait + flee option) ===== */
.boss-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 3, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}
.boss-modal-content {
  background: #1a140f;
  border: 4px solid #8c2f2f;
  max-width: 620px;
  width: 100%;
  padding: 0;
  color: #d9d0b8;
  box-shadow: 0 0 80px rgba(140, 47, 47, 0.6);
  border-radius: 4px;
  overflow: hidden;
}
.boss-modal-header {
  background: #2c1f18;
  padding: 12px 20px;
  border-bottom: 2px solid #8c2f2f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.boss-modal-header h2 {
  color: #ff6644;
  font-size: 22px;
  margin: 0;
  letter-spacing: 1px;
}
.boss-modal-body {
  padding: 18px 22px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.boss-portrait {
  width: 180px;
  height: 220px;
  object-fit: cover;
  border: 3px solid #5c4630;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.boss-dialogue {
  flex: 1;
  font-size: 15px;
  line-height: 1.5;
  color: #e8d9b8;
  font-style: italic;
  background: rgba(20,15,10,0.6);
  padding: 14px 16px;
  border-left: 4px solid #8c2f2f;
}
.boss-actions {
  padding: 16px 22px 22px;
  display: flex;
  gap: 14px;
  justify-content: center;
  background: #120d0a;
  border-top: 2px solid #3a2f20;
}
.boss-actions button {
  font-size: 15px;
  padding: 10px 22px;
  border: 2px solid #5c4630;
  background: #2a2218;
  color: #d9d0b8;
  cursor: pointer;
  min-width: 160px;
  transition: all 0.1s;
}
.boss-actions button:hover {
  border-color: #d4af77;
  background: #3a2f20;
  color: #fff;
}
.boss-actions .btn-flee {
  border-color: #5a8a5a;
  color: #aaddaa;
}
.boss-actions .btn-fight {
  border-color: #8c2f2f;
  color: #ff9988;
  font-weight: 600;
}

/* ===== NEW SPACIOUS INVENTORY & CHARACTER POPUP MODALS (I and C keys) ===== */
.inv-modal, .char-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 180;
  padding: 20px;
  pointer-events: none; /* allow clicking game underneath when desired */
}

/* When only one modal is open, center it normally */
.inv-modal:not(.dual), .char-modal:not(.dual) {
  justify-content: center;
}

/* Dual mode: side-by-side floating panels for easy inventory <-> character equipping */
.inv-modal.dual {
  justify-content: flex-start;
  padding-left: 3vw;
}
.char-modal.dual {
  justify-content: flex-end;
  padding-right: 3vw;
}

.inv-modal-content, .char-modal-content {
  background: #1a160f;
  border: 3px solid #5c4630;
  width: 100%;
  max-width: 820px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  color: #d9d0b8;
  box-shadow: 0 10px 60px rgba(0,0,0,0.8);
  pointer-events: auto; /* content is interactive */
}

/* In dual mode make them a bit narrower so they sit side-by-side nicely */
.inv-modal.dual .inv-modal-content,
.char-modal.dual .char-modal-content {
  max-width: 46vw;
  min-width: 380px;
}

/* Make dual panels feel like proper floating windows */
.inv-modal.dual .inv-modal-header,
.char-modal.dual .char-modal-header {
  cursor: default;
}

.inv-modal.dual, .char-modal.dual {
  background: rgba(8, 6, 4, 0.55); /* lighter backdrop when both are open */
}

.inv-modal-header, .char-modal-header {
  padding: 14px 22px;
  background: #120f0a;
  border-bottom: 2px solid #3a2f20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.inv-modal-header h2, .char-modal-header h2 {
  color: #d4af77;
  margin: 0;
  font-size: 22px;
  letter-spacing: 1px;
}

.inv-modal-body, .char-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Nice item cards for inventory popup */
.inv-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.inv-card {
  background: #120f0a;
  border: 2px solid #3a2f20;
  padding: 12px;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.1s, border-color 0.1s;
  min-height: 168px;  /* Give room for the nice 48px illustrated icons */
}

.inv-card:hover {
  border-color: #d4af77;
  transform: translateY(-1px);
}

.inv-card.rarity-epic { border-color: #8448aa; background: #1f1628; }
.inv-card.rarity-legendary { border-color: #c80; background: #2a1f12; }

.inv-card-icon {
  font-size: 28px;
  line-height: 1;
  text-align: center;
  margin-bottom: 4px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-card-icon img {
  width: 48px !important;
  height: 48px !important;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Make high-rarity items in the big dedicated inventory modal look extra nice */
.inv-card.rarity-rare .inv-card-icon img,
.inv-card.rarity-epic .inv-card-icon img {
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.inv-card.rarity-legendary .inv-card-icon img {
  filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 2px 5px rgba(0,0,0,0.6));
}

.inv-card-name {
  font-weight: 600;
  font-size: 14px;
  color: #d9d0b8;
}

.inv-card-desc {
  font-size: 12px;
  color: #a89878;
  line-height: 1.35;
  flex: 1;
}

.inv-card-meta {
  font-size: 11px;
  color: #8a6640;
  display: flex;
  justify-content: space-between;
}

.inv-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.inv-card-actions button {
  flex: 1;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #5c4630;
  background: #2a2218;
  color: #d9d0b8;
  cursor: pointer;
}

.inv-card-actions button:hover { background: #3a2f20; }

/* ===== UPGRADED VENDOR / SHOPKEEPER UI ===== */
.vendor-shop-container {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}
.vendor-section {
  flex: 1;
  min-width: 0;
}
.vendor-section h4 {
  color: #d4af77;
  margin: 0 0 8px 0;
  font-size: 15px;
  border-bottom: 1px solid #3a2f20;
  padding-bottom: 4px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 8px;
}
.shop-item-card {
  background: #120f0a;
  border: 2px solid #3a2f20;
  border-radius: 4px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.shop-item-card:hover {
  border-color: #d4af77;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.shop-item-card .item-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid #5c4630;
  background: #0a0705;
  image-rendering: pixelated;
}
.shop-item-card .item-info {
  flex: 1;
  min-width: 0;
  font-size: 12px;
}
.shop-item-card .item-name {
  font-weight: bold;
  margin-bottom: 2px;
  display: block;
}
.shop-item-card .item-stats {
  color: #a89878;
  font-size: 10px;
  line-height: 1.3;
  margin-bottom: 3px;
}
.shop-item-card .item-price {
  color: #d4af77;
  font-weight: 600;
  font-size: 11px;
}

/* Rarity and special visuals */
.shop-item-card.rarity-uncommon { border-color: #6f6; }
.shop-item-card.rarity-rare { border-color: #66aaff; box-shadow: 0 0 8px rgba(100,170,255,0.4); }
.shop-item-card.rarity-epic { border-color: #c77cff; box-shadow: 0 0 10px rgba(190,120,255,0.5); }
.shop-item-card.rarity-legendary { 
  border-color: #ffaa33; 
  animation: legendary-pulse 2.2s infinite ease-in-out;
  box-shadow: 0 0 12px rgba(255,170,50,0.6);
}
@keyframes legendary-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,170,50,0.6); }
  50% { box-shadow: 0 0 20px rgba(255,200,80,0.9); }
}

.shop-item-card.wand-effect .item-icon {
  animation: wand-sparkle 1.8s infinite linear;
}
@keyframes wand-sparkle {
  0%, 100% { box-shadow: 0 0 4px #aaddff; }
  50% { box-shadow: 0 0 12px #ffee88, 0 0 4px #aaddff; }
}

.shop-item-card.flame-effect .item-icon {
  animation: flame-flicker 1.2s infinite ease-in-out;
}
@keyframes flame-flicker {
  0%, 100% { box-shadow: 0 0 6px #ff6644; }
  50% { box-shadow: 0 0 14px #ffaa33; }
}

/* Character sheet popup layout */
.char-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 22px;
}

.char-stats {
  font-size: 14px;
}

.char-stats .stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px dotted #3a2f20;
}

.char-stats .stat-row:last-child { border-bottom: none; }

.char-equip-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.char-equip-slot {
  background: #120f0a;
  border: 1px solid #3a2f20;
  padding: 8px 10px;
  font-size: 13px;
}

.char-equip-slot .slot-label {
  font-size: 10px;
  color: #8a6640;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.char-equip-slot .item {
  color: #d4af77;
  font-weight: 500;
}

.char-equip-slot:hover .item {
  text-decoration: underline;
}

.close-btn {
  background: none;
  border: none;
  color: #c9b48a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}

.close-btn:hover { color: #fff; }
.vol-row input[type="range"] {
  flex: 1;
  accent-color: #8a6640;
  height: 6px;
  background: #2a2218;
  border-radius: 3px;
}
.vol-row span { width: 42px; text-align: right; font-family: monospace; color: #d4af6a; font-size: 12px; }

.sound-test-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.btn-small-test {
  font-size: 11px;
  padding: 5px 10px;
  background: #2a2218;
  color: #c9b48a;
  border: 1px solid #5c4630;
  cursor: pointer;
  border-radius: 2px;
}
.btn-small-test:hover { background: #3f2f20; color: #e8d5a3; }

.audio-hint {
  font-size: 11px;
  color: #8a6640;
  margin-top: 8px;
  font-style: italic;
}

.options-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.options-row button { font-size: 12px; padding: 7px 14px; }

.settings-footer {
  font-size: 11px;
  color: #8a6640;
  text-align: center;
  margin-top: 6px;
}

/* Hall of Fame */
.hall-intro {
  color: #c9b48a;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.hall-table-wrap {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #3a2f20;
  background: rgba(0,0,0,0.2);
}
#hall-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
#hall-table th, #hall-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #2a2218;
}
#hall-table th {
  background: #2a2218;
  color: var(--gold);
  font-weight: 600;
  position: sticky;
  top: 0;
}
#hall-table td { color: #d4c9a8; }
#hall-table tr:nth-child(even) td { background: rgba(40,32,22,0.35); }
.hall-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.hall-hint {
  font-size: 11px;
  color: #8a6640;
  margin-top: 6px;
  text-align: center;
}

/* Menu buttons now support 5 items nicely */
.menu-buttons {
  flex-wrap: wrap;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.menu-buttons button { flex: 1 1 140px; min-width: 138px; }

/* ===== CHARACTER CREATION BACKGROUND (bright decorative border) ===== */
#screen-creation {
  background-image: url('../assets/creation-bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 20px 12px;
}

/* Very strong central darkening so the image is only visible as a bright decorative border around the edges.
   The central UI area is now almost completely opaque. */
#screen-creation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(
      ellipse at center,
      rgba(15, 12, 8, 0.98) 42%,
      rgba(15, 12, 8, 0.92) 58%,
      rgba(15, 12, 8, 0.65) 78%
    );
  z-index: 1;
  pointer-events: none;
}

/* Keep all content above the background + overlay */
#screen-creation > * {
  position: relative;
  z-index: 2;
}

/* Fully solid dark panels — the bright character border is now only visible outside the main window */
.creation-panel {
  background: #1a160f;
  border: 2px solid #3a2f20;
}
.creation-panel h3 {
  border-bottom-color: #3a2f20;
}

#rolled-stats-section {
  background: #120f0a;
  border: 1px solid #3a2f20;
  padding: 8px 10px;
  border-radius: 2px;
  max-height: 120px;
  overflow: auto;
  font-size: 12px;
}

/* Fix for overlapping roll4d6 and stats windows on creation screen */
.creation-panel.roll-mode .abilities,
.creation-panel.roll-mode #point-buy-hint {
  display: none !important;
}

/* Strong solid container that completely covers the center of the image */
.creation-container {
  background: #120f0a;
  padding: 26px 30px 22px;
  border-radius: 4px;
  border: 3px solid #5c4630;
  box-shadow: 0 0 0 6px rgba(15,12,8,0.6);
}

/* ===== DONJON IMPORTER MODAL ===== */
.donjon-importer {
  max-width: 860px;
  width: 92%;
  background: #1a140f;
  border: 4px solid #5c4630;
  color: #d4c3a3;
}

.donjon-importer .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px 16px;
  background: #120d09;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid #3a2f20;
  margin: 10px 0;
  font-size: 13.5px;
}

.donjon-importer .settings-grid .highlight {
  color: #ffdd88;
  font-weight: 600;
}

.donjon-importer .note {
  font-size: 12.5px;
  color: #a38b5f;
  margin: 6px 0 12px;
}

.donjon-importer .importer-actions {
  margin: 8px 0 4px;
}

.donjon-importer textarea {
  width: 100%;
  background: #0f0c08;
  color: #d4c3a3;
  border: 2px solid #5c4630;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 8px;
  resize: vertical;
}

.donjon-importer .json-preview {
  margin-top: 8px;
  min-height: 42px;
  background: #0f0c08;
  border: 1px solid #3a2f20;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: pre-wrap;
  color: #9c8a6e;
}

.donjon-importer .paste-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Dungeon Map Modal (FOW + nice donjon player PNGs) */
.map-modal canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: #0a0805;
}

/* Major Event / Boss Combat Modal */
.event-modal {
  background-size: cover !important;
  background-position: center !important;
  position: relative;
}
.event-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10,8,5,0.75), rgba(10,8,5,0.85));
  border-radius: 4px;
  pointer-events: none;
  z-index: 0;
}
.event-modal > * {
  position: relative;
  z-index: 1;
}
.event-modal #event-combat-log {
  white-space: pre-wrap;
  line-height: 1.3;
}

/* ============================================
   NEW FULL-SCREEN CINEMATIC BOSS FIGHT UI
   Player left / Boss right / Big action buttons
   ============================================ */
#modal-cinematic-fight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cinematic-fight-container {
  width: 96vw;
  max-width: 1480px;
  background: #0a0805;
  border: 4px solid #5c4630;
  border-radius: 6px;
  box-shadow: 0 0 80px rgba(0,0,0,0.9);
  overflow: hidden;
}

.cinematic-fight-header {
  background: #1a140f;
  padding: 10px 18px;
  border-bottom: 3px solid #5c4630;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cinematic-fight-body {
  display: flex;
  gap: 18px;
  padding: 16px 18px;
  min-height: 520px;
}

.cinematic-portrait-panel {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cinematic-portrait-panel .portrait-frame {
  width: 240px;
  height: 320px;
  border: 4px solid #3a2f20;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
}

.cinematic-portrait-panel .portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cinematic-portrait-panel.player-side .portrait-frame { border-color: #8a6640; }
.cinematic-portrait-panel.boss-side .portrait-frame { border-color: #8a2f2f; }

.cinematic-portrait-panel .portrait-info {
  margin-top: 8px;
  width: 100%;
  text-align: center;
}

.hp-bar {
  height: 8px;
  background: #2a2218;
  border: 1px solid #5c4630;
  border-radius: 3px;
  margin: 4px 0;
  overflow: hidden;
}
.hp-bar div { height: 100%; background: linear-gradient(90deg, #4a8c4a, #8ad48a); transition: width 0.2s ease; }
.hp-bar.boss div { background: linear-gradient(90deg, #8c2f2f, #d46a6a); }

.cinematic-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cinematic-actions .cinematic-btn {
  width: 100%;
  padding: 10px 8px;
  font-size: 14px;
  line-height: 1.15;
  background: #1f1810;
  border: 2px solid #5c4630;
  color: #d4c4a0;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s ease;
}
.cinematic-actions .cinematic-btn:hover {
  background: #3a2a1a;
  border-color: #8a6640;
  transform: translateY(-1px);
}
.cinematic-actions .cinematic-btn.primary {
  border-color: #8a6640;
  font-weight: bold;
  font-size: 15px;
}
.cinematic-actions .cinematic-btn.danger {
  border-color: #8c2f2f;
  color: #e88;
}
.cinematic-actions .cinematic-btn small {
  opacity: 0.75;
  font-size: 11px;
}