/* ===================================
   QUESTLOG - Main Stylesheet
   Parchment & Medieval Fantasy Theme
   =================================== */

/* ── Emoji font fallback ────────────────────────────────────────────────────
   Custom fonts (Cinzel, Georgia, Courier New, etc.) lack emoji glyphs.
   This @font-face maps common emoji Unicode ranges to local system emoji
   fonts. Prepending 'SystemEmoji' to every font stack ensures emoji
   codepoints are always routed to the emoji font, regardless of theme.
   ─────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'SystemEmoji';
  src: local('Apple Color Emoji'),
       local('Segoe UI Emoji'),
       local('Segoe UI Symbol'),
       local('Noto Color Emoji'),
       local('Android Emoji'),
       local('EmojiSymbols');
  unicode-range:
    U+00A9, U+00AE,
    U+203C, U+2049,
    U+20E3,
    U+2122, U+2139,
    U+2194-2199, U+21A9-21AA,
    U+231A-231B, U+2328,
    U+23CF, U+23E9-23F3, U+23F8-23FA,
    U+24C2,
    U+25AA-25AB, U+25B6, U+25C0, U+25FB-25FE,
    U+2600-27FF,
    U+2934-2935,
    U+2B05-2B07, U+2B1B-2B1C, U+2B50, U+2B55,
    U+3030, U+303D, U+3297, U+3299,
    U+FE0F,
    U+1F000-1F02F,
    U+1F0A0-1F0FF,
    U+1F100-1F1FF,
    U+1F200-1F2FF,
    U+1F300-1F5FF,
    U+1F600-1F64F,
    U+1F680-1F6FF,
    U+1F700-1F77F,
    U+1F780-1F7FF,
    U+1F800-1F8FF,
    U+1F900-1F9FF,
    U+1FA00-1FA6F,
    U+1FA70-1FAFF;
}

/* === CSS Variables === */
:root {
  /* Color Palette - Warm Parchment Tones */
  --parchment-light: #f4e8d0;
  --parchment-medium: #e8d5b7;
  --parchment-dark: #c9b18a;
  --parchment-darker: #a89368;
  
  /* Accent Colors */
  --ink-dark: #2c1810;
  --ink-medium: #4a3020;
  --ink-light: #6b4423;
  --gold: #d4af37;
  --gold-dark: #b8941f;
  --bronze: #cd7f32;
  
  /* Status Colors */
  --success: #5a7c3e;
  --warning: #d4821f;
  --danger: #8b2e1f;
  --info: #3a5f7c;
  
  /* Rarity Colors */
  --junk: #9d9d9d;
  --common: #ffffff;
  --uncommon: #1eff00;
  --rare: #0070dd;
  --epic: #a335ee;
  --legendary: #ff8000;
  
  /* Typography */
  --font-primary: 'SystemEmoji', 'Georgia', 'Times New Roman', serif;
  --font-display: 'SystemEmoji', 'Cinzel', 'Georgia', serif;
  --font-mono: 'SystemEmoji', 'Courier New', monospace;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(44, 24, 16, 0.1);
  --shadow-md: 0 4px 8px rgba(44, 24, 16, 0.15);
  --shadow-lg: 0 8px 16px rgba(44, 24, 16, 0.2);
  --shadow-inset: inset 0 2px 4px rgba(44, 24, 16, 0.1);

  /* ── E-5: Page backgrounds ───────────────────────────────── */
  --bg-stone-color:      #1a1614;
  --bg-stone-image:      url("/images/stone-wall.png");
  --bg-stone-size:       512px 512px;
  --bg-dungeon-color:    #0b0813;
  --bg-parchment-color:  #e8d5b7;
  --bg-admin-color:      #111318;
  --bg-auth-color:       #12100d;

  /* ── E-5: Typography ─────────────────────────────────────── */
  --font-display: 'SystemEmoji', 'Cinzel', 'Palatino Linotype', Georgia, serif;
  --font-body:    'SystemEmoji', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'SystemEmoji', 'Courier New', monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --weight-normal: 400;
  --weight-bold:   700;
  --weight-black:  900;

  /* ── E-5: Game stat colours ──────────────────────────────── */
  --color-hp:   #c0392b;
  --color-xp:   #2ecc71;
  --color-gold: #d4af37;
  --color-mana: #5b7fcb;

  /* ── E-5: Status colours ─────────────────────────────────── */
  --color-success: #4a9e5c;
  --color-warning: #c97c1a;
  --color-danger:  #b52c1a;
  --color-info:    #3a6fa0;

  /* ── E-5: Rarity tokens ──────────────────────────────────── */
  --rarity-junk:           #9d9d9d;
  --rarity-common:         #ffffff;
  --rarity-uncommon:       #1eff00;
  --rarity-rare:           #0070dd;
  --rarity-epic:           #a335ee;
  --rarity-legendary:      #ff8000;
  --rarity-uncommon-glow:  rgba(30, 255, 0,   0.35);
  --rarity-rare-glow:      rgba(0, 112, 221,  0.40);
  --rarity-epic-glow:      rgba(163, 53, 238, 0.45);
  --rarity-legendary-glow: rgba(255, 128, 0,  0.55);

  /* ── E-5: UI surfaces ────────────────────────────────────── */
  --surface-stone:     rgba(26, 22, 20, 0.92);
  --surface-parchment: #f4e8d0;
  --surface-dark:      rgba(14, 9, 7, 0.88);
  --surface-glass:     rgba(255, 255, 255, 0.06);

  /* ── E-5: Extended ink + gold ────────────────────────────── */
  --ink-ghost:  rgba(244, 232, 208, 0.45);
  --ink-bright: #f4e8d0;
  --gold-light: #f0cc5a;
  --gold-pale:  rgba(212, 175, 55, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* === Theme System === */
/* Dungeon Theme - Dark stone and torchlight */
[data-theme="dungeon"] {
  --parchment-light: #2a2a2a;
  --parchment-medium: #3a3a3a;
  --parchment-dark: #1a1a1a;
  --parchment-darker: #0a0a0a;
  
  --ink-dark: #e0e0e0;
  --ink-medium: #b0b0b0;
  --ink-light: #909090;
  --gold: #ff8c00;
  --gold-dark: #cc7000;
  --bronze: #8b4513;
  
  --success: #4a7c3e;
  --warning: #ff6b1f;
  --danger: #cc2e1f;
  --info: #4a8fc7;
  
  --font-primary: 'SystemEmoji', 'Courier New', 'Courier', monospace;
  --font-display: 'SystemEmoji', 'Impact', 'Arial Black', sans-serif;
}

/* Forest Theme - Deep greens and earth tones */
[data-theme="forest"] {
  --parchment-light: #e8f4e0;
  --parchment-medium: #c8d4b7;
  --parchment-dark: #9ab18a;
  --parchment-darker: #6a8368;
  
  --ink-dark: #1a3810;
  --ink-medium: #2a5020;
  --ink-light: #3a6423;
  --gold: #d4af37;
  --gold-dark: #b8941f;
  --bronze: #8b6914;
  
  --success: #3a6c2e;
  --warning: #c4721f;
  --danger: #7b1e0f;
  --info: #2a4f6c;
  
  --font-primary: 'SystemEmoji', 'Verdana', 'Geneva', sans-serif;
  --font-display: 'SystemEmoji', 'Trebuchet MS', 'Lucida Grande', sans-serif;
}

/* Unicorn Theme - Pastels and sparkles */
[data-theme="unicorn"] {
  --parchment-light: #ffeef8;
  --parchment-medium: #ffd4ef;
  --parchment-dark: #ffb3e3;
  --parchment-darker: #ff93d7;
  
  --ink-dark: #7a2869;
  --ink-medium: #9a3889;
  --ink-light: #ba48a9;
  --gold: #ffd700;
  --gold-dark: #ffb700;
  --bronze: #ff69b4;
  
  --success: #9a4fc9;
  --warning: #ff6fb4;
  --danger: #d92f8f;
  --info: #7a5fc9;
  
  --font-primary: 'SystemEmoji', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-display: 'SystemEmoji', 'Comic Sans MS', 'Chalkboard SE', cursive;
}

/* Ocean Theme - Blues and teals */
[data-theme="ocean"] {
  --parchment-light: #e0f4ff;
  --parchment-medium: #b7d9f4;
  --parchment-dark: #8ab3d1;
  --parchment-darker: #6893b8;
  
  --ink-dark: #0a2a3a;
  --ink-medium: #1a4a5a;
  --ink-light: #2a6a7a;
  --gold: #ffd700;
  --gold-dark: #ddb700;
  --bronze: #cd853f;
  
  --success: #2a7a6a;
  --warning: #ff8c3f;
  --danger: #c92e3f;
  --info: #1a5a8a;
  
  --font-primary: 'SystemEmoji', 'Arial', 'Helvetica', sans-serif;
  --font-display: 'SystemEmoji', 'Arial Black', 'Gadget', sans-serif;
}

/* Halloween Theme - Orange and black spooky */
[data-theme="halloween"] {
  --parchment-light: #1a1a1a;
  --parchment-medium: #2a1f0a;
  --parchment-dark: #3a2f1a;
  --parchment-darker: #4a3f2a;
  
  --ink-dark: #ff8c00;
  --ink-medium: #ff9d1f;
  --ink-light: #ffae3f;
  --gold: #ff6600;
  --gold-dark: #dd5500;
  --bronze: #8b0000;
  
  --success: #9a4fc9;
  --warning: #ff8c00;
  --danger: #8b0000;
  --info: #6a4fc9;
  
  --font-primary: 'SystemEmoji', 'Courier New', monospace;
  --font-display: 'SystemEmoji', 'Creepster', 'Courier New', monospace;
}

/* === Text Contrast Utilities === */
/* Ensure proper contrast for text on dark backgrounds */
.text-on-dark,
.dark-bg {
  color: white !important;
}

.dark-bg * {
  color: white;
}

/* Ensure proper contrast for text on light backgrounds */
.text-on-light,
.light-bg {
  color: var(--ink-dark) !important;
}

.light-bg * {
  color: var(--ink-dark);
}

/* Specific dark background elements that need white text */
[style*="background: rgba(0, 0, 0,"],
[style*="background: rgba(44, 24, 16, 0.7)"],
[style*="background: rgba(44, 24, 16, 0.8)"],
[style*="background: var(--ink-dark)"],
[style*="background: var(--parchment-dark)"] {
  color: white;
}

/* === Reset & Base Styles === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-stone-color);
  background-image: var(--bg-stone-image);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: var(--bg-stone-size);
  color: var(--ink-bright);
  line-height: 1.65;
  min-height: 100vh;
}

/* ── E-5: Page-type overrides ────────────────────────────────
   Add the matching class to <body> on each page.              */

/* Game / combat pages — void dark so the game board pops */
body.page-game {
  background-image: none !important;
  background: radial-gradient(ellipse at top, #1a0f2e 0%, #0b0813 60%, #050308 100%) !important;
  background-attachment: fixed !important;
  background-color: var(--bg-dungeon-color) !important;
}
body.page-game .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(212, 175, 55, 0.2);
  color: var(--ink-bright);
}

/* Social / management pages — warm amber stone */
body.page-social {
  background-image: var(--bg-stone-image) !important;
  background-size: var(--bg-stone-size) !important;
  background-color: #1a1614 !important;
  background-attachment: fixed !important;
  position: relative;
}
body.page-social::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(139, 82, 16, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
body.page-social .card {
  background: rgba(26, 16, 8, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: var(--ink-bright);
}

/* Merchant / shop pages — stone with dark vignette */
body.page-merchant {
  background-image: var(--bg-stone-image) !important;
  background-size: var(--bg-stone-size) !important;
  background-color: #1a1210 !important;
  background-attachment: fixed !important;
  position: relative;
}
body.page-merchant::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(10, 4, 2, 0.45) 100%);
  pointer-events: none;
  z-index: 0;
}
body.page-merchant .item-card,
body.page-merchant .store-item {
  background-image: url("/images/parchment.png");
  background-size: cover;
  background-color: #f4e8d0;
  color: var(--ink-dark);
}

/* Hub pages — stone wall (same as global base, here for explicitness) */
body.page-hub {
  background-image: var(--bg-stone-image) !important;
  background-size: var(--bg-stone-size) !important;
  background-color: var(--bg-stone-color) !important;
  background-attachment: fixed !important;
}
body.page-hub .card {
  background-image: url("/images/parchment.png");
  background-size: cover;
  background-color: #f4e8d0;
  color: var(--ink-dark);
}

/* Admin pages — flat dark, data-first, no texture */
body.page-admin {
  background-image: none !important;
  background-color: var(--bg-admin-color) !important;
}
body.page-admin .card {
  background: #1a1d24;
  border: 1px solid #2a2d34;
  color: #c8cdd6;
}
body.page-admin h1, body.page-admin h2, body.page-admin h3 {
  color: var(--gold);
  font-family: var(--font-display);
}
body.page-admin td, body.page-admin th, body.page-admin .stat-value {
  font-family: var(--font-mono);
}

/* Auth pages — stone with dark overlay, parchment form card */
body.page-auth {
  background-image: var(--bg-stone-image) !important;
  background-size: var(--bg-stone-size) !important;
  background-color: var(--bg-auth-color) !important;
  background-attachment: fixed !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
}
body.page-auth::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 0;
}
body.page-auth .auth-card {
  position: relative;
  z-index: 1;
  background-image: url("/images/parchment.png");
  background-size: cover;
  background-color: #f4e8d0;
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 420px;
  width: 90%;
  color: var(--ink-dark);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--ink-dark);
}

h1 {
  font-size: 2.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1.125rem;
}

h6 {
  font-size: 1rem;
}

/* Page Header Styling - Dark text for readability */
.page-header h1,
.page-header p {
  color: #2c1810;
  text-shadow: none;
}

.page-header {
  margin-bottom: var(--spacing-lg);
}

p {
  margin-bottom: var(--spacing-md);
}

a {
  color: var(--ink-medium);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--gold-dark);
  text-decoration: underline;
}

/* === Layout === */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  padding-bottom: calc(var(--spacing-xxl) + 60px); /* Extra padding for bottom nav */
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-lg);
}

/* === Grid System === */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(var(--spacing-md) * -0.5);
}

.col {
  flex: 1;
  padding: 0 calc(var(--spacing-md) * 0.5);
}

.col-1 { flex: 0 0 8.333%; max-width: 8.333%; }
.col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5 { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* === Cards === */
.card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--bronze), var(--gold));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card-header {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--parchment-darker);
}

.card-body {
  padding: var(--spacing-sm) 0;
}

.card-footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--parchment-darker);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* === Buttons === */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease-out; /* P1: Faster, smoother transitions */
  background: linear-gradient(180deg, var(--parchment-dark), var(--parchment-darker));
  color: var(--ink-dark);
  box-shadow: var(--shadow-sm);
  min-height: 44px;
  position: relative; /* P1: For shine animation */
  overflow: hidden; /* P1: Contain shine effect */
}

/* P1: Button hover with lift effect */
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/* P1: Button active with tactile press */
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow-inset);
  transition: all 0.1s ease-in;
}

/* P1: Disabled button state */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(1);
  transform: none;
}

.btn-primary {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: var(--ink-dark);
  border-color: var(--gold-dark);
}

/* P1: Primary button shine sweep on hover */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.6s ease;
  z-index: 0;
  pointer-events: none;
}

/* Ensure button text renders above the shine pseudo-element */
.btn-primary {
  isolation: isolate;
}

.btn-primary:hover:not(:disabled)::before {
  left: 100%;
}

.btn-success {
  background: linear-gradient(180deg, #6b9144, var(--success));
  color: white;
}

.btn-danger {
  background: linear-gradient(180deg, #a63a2a, var(--danger));
  color: white;
}

.btn-secondary {
  background: linear-gradient(180deg, var(--parchment-dark), var(--parchment-darker));
  color: var(--ink-dark);
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.875rem;
}

/* Context filter pills (guild switcher on dashboard) */
.context-pill {
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 3px 10px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.context-pill.active {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark)) !important;
  color: var(--ink-dark) !important;
  border-color: var(--gold-dark) !important;
  font-weight: bold;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.125rem;
}

/* === Forms === */
.form-group {
  margin-bottom: var(--spacing-lg);
}

label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  color: var(--ink-medium);
}

.form-control {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-primary);
  font-size: 1rem;
  color: var(--ink-dark);
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
}

select.form-control {
  cursor: pointer;
}

.form-control::placeholder {
  color: var(--parchment-darker);
  opacity: 0.7;
}

/* === Navigation === */
.navbar {
  background: linear-gradient(180deg, #161311 0%, #241a16 55%, #3a2a22 100%);
  color: var(--parchment-light);
  padding: var(--spacing-sm) 0;
  box-shadow: var(--shadow-lg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffe39a;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 227, 154, 0.45);
  background: rgba(255, 227, 154, 0.08);
}

.navbar-brand-icon {
  font-size: 1.5rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.navbar-menu {
  display: none;
}

.navbar-menu a {
  color: var(--parchment-light);
  font-weight: 500;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.navbar-menu a:hover {
  background: rgba(244, 232, 208, 0.1);
  color: var(--gold);
  text-decoration: none;
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.navbar-avatar {
  width: 40px; /* P0 fix: increased from 32px for better touch target */
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.navbar-avatar:hover {
  transform: scale(1.05);
  border-color: var(--gold-dark);
}

.user-avatar-container {
  position: relative;
  min-width: 44px; /* P0 fix: ensure 44x44px touch target */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--parchment-light);
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
  width: 460px;
  max-width: 96vw;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  /* Two-column layout: card left, links right */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}

.user-avatar-container:hover .user-dropdown,
.user-dropdown:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Left column — avatar card */
.dropdown-card-wrap {
  width: 150px;
  flex-shrink: 0;
  padding: var(--spacing-sm);
  border-right: 1px solid var(--parchment-darker);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.25) 0%, rgba(244, 232, 208, 0.35) 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.dropdown-user-card {
  width: 100%;
  display: block;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gold-dark);
  box-shadow: var(--shadow-md);
}

/* Right column — nav links */
.dropdown-links {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
}

.dropdown-item {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--ink-dark);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
  font-weight: 500;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}

.dropdown-item:first-child { border-top: none; }

.dropdown-item:hover {
  background-color: var(--parchment-medium);
}

.dropdown-divider {
  height: 1px;
  background-color: var(--parchment-darker);
  margin: var(--spacing-xs) 0;
}

.navbar-stats {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.82rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.navbar-stat {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.07);
}

.navbar-stat-icon {
  color: var(--gold);
}

/* === Bottom Navigation === */
.bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, var(--ink-dark) 0%, var(--ink-medium) 50%, var(--parchment-darker) 100%);
  border-top: 3px solid var(--gold);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--spacing-sm) 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--parchment-light);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  min-width: 70px;
}

.bottom-nav-item:hover {
  background: rgba(244, 232, 208, 0.1);
  color: var(--gold);
  transform: translateY(-2px);
}

/* More button inherits item styles */
.bottom-nav-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--parchment-light);
}

.bottom-nav-icon {
  font-size: 1.5rem;
}

.bottom-nav-label {
  font-size: 0.75rem;
  font-weight: 600;
}

.bottom-nav-item[aria-current="page"] {
  color: var(--gold);
  background: rgba(200, 168, 75, 0.15);
  border-top: 2px solid var(--gold);
}

/* More drawer */
.bottom-nav-more-panel {
  position: fixed;
  bottom: 65px;
  left: 0;
  right: 0;
  background: linear-gradient(0deg, var(--ink-dark) 0%, var(--ink-medium) 100%);
  border-top: 2px solid var(--gold);
  z-index: 999;
  padding: var(--spacing-sm) 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  transform: translateY(100%);
  transition: transform 0.22s ease;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}

.bottom-nav-more-panel.open {
  transform: translateY(0);
}

.bottom-nav-more-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: none;
}

.bottom-nav-more-overlay.open {
  display: block;
}

/* Add padding to body to prevent content from being hidden behind fixed top nav + bottom nav */
body {
  padding-top: 62px;
  padding-bottom: 65px;
}

/* === Theme Selector === */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-md);
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.theme-option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

.theme-option.active {
  border-color: var(--gold);
  background: var(--parchment-dark);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
}

.theme-preview {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  border: 2px solid var(--ink-light);
}

.parchment-preview {
  background: linear-gradient(135deg, #f4e8d0 0%, #c9b18a 100%);
}

.dungeon-preview {
  background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
}

.forest-preview {
  background: linear-gradient(135deg, #e8f4e0 0%, #6a8368 100%);
}

.unicorn-preview {
  background: linear-gradient(135deg, #ffeef8 0%, #ff93d7 100%);
}

.ocean-preview {
  background: linear-gradient(135deg, #e0f4ff 0%, #6893b8 100%);
}

.halloween-preview {
  background: linear-gradient(135deg, #ff8c00 0%, #1a1a1a 100%);
}

.theme-name {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: var(--spacing-xs);
  color: var(--ink-dark);
}

.theme-desc {
  font-size: 0.85rem;
  color: var(--ink-medium);
}

/* === Modals === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(44, 24, 16, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn var(--transition-normal);
}

.modal-overlay > .modal {
  display: block;
  background: var(--parchment-medium);
  border: 3px solid var(--ink-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn var(--transition-normal);
  position: static;
  z-index: auto;
  left: auto;
  top: auto;
  height: auto;
}

.modal-header {
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink-medium);
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: rgba(44, 24, 16, 0.1);
  color: var(--danger);
}

.modal-body {
  padding: var(--spacing-lg);
}

.modal-footer {
  padding: var(--spacing-lg);
  border-top: 2px solid var(--parchment-darker);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Media Preview for Adventures */

/* Adventure notes and media sections (for display page) */
.adventure-notes-section,
.adventure-media-section {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--surface-alt);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
}

.adventure-notes-section h3,
.adventure-media-section h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.adventure-notes {
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap;
}

.adventure-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}

.adventure-media-grid img,
.adventure-media-grid video {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.adventure-media-grid img:hover,
.adventure-media-grid video:hover {
  transform: scale(1.05);
}

.adventure-media-grid audio {
  width: 100%;
}

/* Media preview grid (for edit modal) */
.media-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  min-height: 60px;
  padding: var(--spacing-sm);
  background: var(--parchment-light);
  border: 1px dashed var(--parchment-darker);
  border-radius: var(--radius-md);
}

.media-item {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--parchment-darker);
  background: var(--parchment-medium);
}

.media-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.media-remove-btn:hover {
  background: var(--danger);
  transform: scale(1.1);
}

.audio-preview,
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: var(--spacing-sm);
}

.media-upload-buttons {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* === Avatar Selector Styles === */
.avatar-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
}

.avatar-tab {
  padding: var(--spacing-sm) var(--spacing-md);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-weight: bold;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.avatar-tab:hover {
  color: var(--text-primary);
  border-bottom-color: var(--gold);
}

.avatar-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.avatar-tab-content {
  display: none;
}

.avatar-tab-content.active {
  display: block;
}

.emoji-avatars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.emoji-avatar-option {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: var(--parchment-light);
  border: 3px solid var(--parchment-darker);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.emoji-avatar-option:hover {
  transform: scale(1.1);
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.avatar-upload-section {
  text-align: center;
  padding: var(--spacing-lg);
}

/* === Utilities === */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.hidden { display: none !important; }
.visible { display: block !important; }

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* === Responsive Design === */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .navbar {
    padding: var(--spacing-xs) 0;
  }
  
  .navbar-container {
    padding: 0 var(--spacing-sm);
  }
  
  .navbar-brand {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .navbar-menu {
    display: none;
  }
  
  .navbar-stats {
    font-size: 0.68rem;
    gap: var(--spacing-xs);
  }
  
  .navbar-avatar {
    width: 36px;
    height: 36px;
  }

  .user-dropdown {
    min-width: 220px;
    right: -4px;
  }
  
  .bottom-navbar {
    padding: 4px 0;
  }
  
  .bottom-nav-item {
    min-width: 50px;
    padding: 4px var(--spacing-xs);
  }
  
  .bottom-nav-icon {
    font-size: 1.1rem;
  }
  
  .bottom-nav-label {
    font-size: 0.6rem;
  }
  
  body {
    padding-bottom: 48px;
  }
  
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .modal {
    width: 95%;
    max-height: 95vh;
  }
}

@media (max-width: 480px) {
  .navbar-brand {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .navbar-container {
    padding: 0 var(--spacing-xs);
  }
  
  .navbar-stats {
    font-size: 0.62rem;
    max-width: calc(100vw - 120px);
  }
  
  .navbar-avatar {
    width: 34px;
    height: 34px;
  }

  .navbar .notification-bell {
    min-height: 36px;
    min-width: 36px;
    padding: 6px 8px;
  }

  .bell-icon {
    font-size: 1.2em;
  }
  
  .bottom-navbar {
    padding: 2px 0;
  }
  
  .bottom-nav-label {
    font-size: 0.55rem;
  }
  
  body {
    padding-bottom: 44px;
  }
}

/* === Daily Quests Widget === */
.daily-quests-widget {
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 100%);
  border: 2px solid var(--parchment-dark);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.quest-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(200,168,75,0.3);
}

.quest-counter {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--gold);
  background: rgba(0,0,0,0.4);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(200,168,75,0.4);
}

.quest-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Compact quest cards inside the narrow dashboard right-column widget */
.dash-daily-quests .quest-card {
  padding: 0.5rem 0.6rem;
  gap: 0.5rem;
  align-items: flex-start;
}

.dash-daily-quests .quest-icon {
  font-size: 1.3rem;
  margin-top: 0.1rem;
}

.dash-daily-quests .quest-icon img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}

.dash-daily-quests .quest-title {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.15rem;
}

.dash-daily-quests .quest-description {
  font-size: 0.72rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.dash-daily-quests .quest-progress {
  margin-bottom: 0.2rem;
}

.dash-daily-quests .quest-rewards {
  gap: 0.2rem;
  flex-wrap: nowrap;
}

.dash-daily-quests .reward-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.3rem;
}

.dash-daily-quests .quest-action {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding-top: 0.1rem;
}

.dash-daily-quests .in-progress-badge {
  font-size: 0.68rem;
  padding: 0.2rem 0.35rem;
  white-space: nowrap;
}

.dash-daily-quests .claimed-badge {
  font-size: 0.68rem;
}

.quest-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--parchment-light);
  border: 1px solid rgba(200,168,75,0.4);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  transition: all var(--transition-normal);
}

.quest-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}

.quest-card.completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: var(--success);
}

.quest-card.claimed {
  opacity: 0.7;
  background: var(--parchment-light);
}

.quest-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.quest-content {
  flex: 1;
  min-width: 0;
}

.quest-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-xs);
}

.quest-description {
  font-size: 0.9rem;
  color: var(--ink-medium);
  margin-bottom: var(--spacing-sm);
}

.quest-progress {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.quest-progress .progress-bar {
  flex: 1;
  height: 8px;
  background: var(--parchment-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.quest-progress .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
  transition: width var(--transition-normal);
}

.quest-card.completed .progress-fill {
  background: linear-gradient(90deg, var(--success) 0%, #4a6b35 100%);
}

.progress-text {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--ink-medium);
  white-space: nowrap;
}

.quest-rewards {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: bold;
  background: var(--parchment-dark);
  color: var(--ink-dark);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.quest-action {
  flex-shrink: 0;
}

.in-progress-badge {
  font-size: 0.85rem;
  color: var(--info);
  font-weight: bold;
  padding: 0.5rem 1rem;
  background: rgba(58, 95, 124, 0.1);
  border-radius: var(--radius-md);
}

.claimed-badge {
  font-size: 0.85rem;
  color: var(--success);
  font-weight: bold;
  padding: 0.5rem 1rem;
  background: rgba(90, 124, 62, 0.1);
  border-radius: var(--radius-md);
}

.empty-message {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--ink-medium);
  background: var(--parchment-light, rgba(245, 235, 210, 0.6));
  border: 1px solid var(--parchment-darker, rgba(180, 150, 100, 0.3));
  border-radius: var(--radius-md);
}

.empty-state {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--ink-medium);
  background: var(--parchment-light, rgba(245, 235, 210, 0.6));
  border: 1px solid var(--parchment-darker, rgba(180, 150, 100, 0.3));
  border-radius: var(--radius-md);
}

.empty-message p,
.empty-state p {
  margin-bottom: var(--spacing-md);
}

/* Quest notification animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* === Dungeon Entry Widget === */
.dungeon-entry-widget {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  color: white;
  text-align: center;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--spacing-xl);
}

.dungeon-entry-widget h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 var(--spacing-sm) 0;
}

.dungeon-entry-widget p {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.95rem;
}

.dungeon-entry-widget .btn-dungeon {
  background: white;
  color: #667eea;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
}

.dungeon-entry-widget .btn-dungeon:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* === Power-Ups & Active Effects === */
.active-effect-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  }
}

.effect-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.effect-info {
  flex: 1;
}

.effect-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: 0.25rem;
}

.effect-description {
  font-size: 0.9rem;
  color: var(--ink-medium);
}

.effect-timer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--gold);
}

.timer-icon {
  font-size: 1.5rem;
}

.timer-text {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--ink-dark);
  font-family: var(--font-mono);
}

.item-duration {
  font-size: 0.85rem;
  color: var(--info);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.item-quantity {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--gold);
  color: var(--ink-dark);
  font-weight: bold;
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.use-powerup-info {
  text-align: center;
  padding: var(--spacing-lg);
}

.powerup-icon-large {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
}

.use-powerup-info h3 {
  margin-bottom: var(--spacing-sm);
  color: var(--ink-dark);
}

.use-powerup-info p {
  color: var(--ink-medium);
  font-size: 1.1rem;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease-out;
}

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

.modal-content {
  background-color: var(--parchment-light);
  margin: 5% auto;
  padding: var(--spacing-xl);
  border: 3px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideDown 0.3s ease-out;
}

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

.modal-actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  justify-content: center;
}

.modal-actions .btn {
  min-width: 120px;
}

/* Notification Bell Styles */
.notification-bell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff2cb;
  min-height: 44px;
  min-width: 44px; /* P0 fix: ensure 44x44px touch target */
}

.notification-bell:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.bell-icon {
  font-size: 1.5em;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background-color: var(--danger);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: bold;
  border: 2px solid var(--parchment-light);
}

.notification-badge.hidden {
  display: none;
}

.navbar-streak-hidden {
  display: none;
}

.notification-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 360px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}

.notification-dropdown.show {
  display: block;
  animation: slideDown 0.3s ease-out;
}

.notification-header {
  padding: var(--spacing-md);
  border-bottom: 2px solid var(--parchment-medium);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-header h3 {
  margin: 0;
  color: var(--ink-dark);
  font-size: 1.1em;
}

.notification-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.notification-actions button {
  background: none;
  border: none;
  color: var(--info);
  cursor: pointer;
  font-size: 0.85em;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background-color 0.3s;
}

.notification-actions button:hover {
  background-color: var(--parchment-light);
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--parchment-medium);
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  gap: var(--spacing-md);
}

.notification-item:hover {
  background-color: var(--parchment-light);
}

.notification-item.unread {
  background-color: rgba(212, 175, 55, 0.1);
}

.notification-icon {
  font-size: 1.5em;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: 4px;
}

.notification-message {
  color: var(--ink-medium);
  font-size: 0.9em;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 0.8em;
  color: var(--ink-light);
}

.notification-empty {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--ink-light);
}

/* Set Bonus Styles */
.set-bonuses-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.set-bonus-card {
  background: var(--parchment-light);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.set-bonus-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  color: var(--ink-dark);
  font-size: 1.1em;
}

.set-pieces {
  color: var(--gold-dark);
  font-weight: bold;
}

.set-bonus-description {
  color: var(--ink-medium);
  font-size: 0.95em;
}

/* Avatar Border Animations */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px currentColor; }
  50% { box-shadow: 0 0 30px currentColor; }
}

@keyframes flame {
  0%, 100% { box-shadow: 0 0 25px rgba(255, 140, 0, 0.9), 0 0 40px rgba(255, 69, 0, 0.5); }
  50% { box-shadow: 0 0 35px rgba(255, 69, 0, 1), 0 0 50px rgba(255, 140, 0, 0.7); }
}

@keyframes rainbow-border {
  0% { border-color: #FF0000; }
  16% { border-color: #FF7F00; }
  33% { border-color: #FFFF00; }
  50% { border-color: #00FF00; }
  66% { border-color: #0000FF; }
  83% { border-color: #4B0082; }
  100% { border-color: #9400D3; }
}

@keyframes mythic-pulse {
  0%, 100% { 
    box-shadow: 0 0 30px rgba(255, 20, 147, 1), 0 0 50px rgba(138, 43, 226, 0.7);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 40px rgba(255, 20, 147, 1), 0 0 60px rgba(138, 43, 226, 0.9);
    transform: scale(1.05);
  }
}

@keyframes celestial-twinkle {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 206, 209, 0.8); }
  25% { box-shadow: 0 0 25px rgba(0, 206, 209, 1), 0 0 35px rgba(255, 255, 255, 0.5); }
  50% { box-shadow: 0 0 20px rgba(0, 206, 209, 0.8); }
  75% { box-shadow: 0 0 30px rgba(0, 206, 209, 1), 0 0 40px rgba(255, 255, 255, 0.6); }
}

/* ===================================
   ACHIEVEMENT MODAL STYLES
   =================================== */

.achievement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 24, 16, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.achievement-modal-overlay.hidden {
  display: none;
}

.achievement-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.achievement-modal {
  position: relative;
  background: var(--parchment-medium);
  border: 4px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-lg), 0 0 40px rgba(212, 175, 55, 0.4);
  transform: scale(0.8) translateY(-20px);
  transition: transform var(--transition-slow);
}

.achievement-modal-overlay.active .achievement-modal {
  transform: scale(1) translateY(0);
}

.achievement-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.sparkle {
  position: absolute;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--gold);
  animation: sparkle-float 2s ease-in-out infinite;
  opacity: 0;
}

@keyframes sparkle-float {
  0% {
    opacity: 0;
    transform: translateY(100%) rotate(0deg);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%) rotate(360deg);
  }
}

.achievement-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.achievement-icon-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--spacing-lg);
}

.achievement-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.6) 0%, transparent 70%);
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}

.achievement-icon {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: icon-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes icon-bounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.achievement-title {
  font-size: 1.8rem;
  color: var(--gold);
  margin-bottom: var(--spacing-sm);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.achievement-name {
  font-size: 1.4rem;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-md);
}

.achievement-description {
  font-size: 1rem;
  color: var(--ink-medium);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

.achievement-rewards {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  align-items: center;
}

.achievement-xp,
.achievement-gold {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--parchment-darker);
  border: 2px solid var(--ink-light);
  border-radius: var(--radius-sm);
  font-weight: bold;
  font-size: 1.1rem;
}

.achievement-xp {
  color: var(--info);
}

.achievement-gold {
  color: var(--gold-dark);
}

.achievement-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--ink-medium);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--transition-fast);
}

.achievement-close:hover {
  background: var(--parchment-darker);
  color: var(--ink-dark);
  transform: rotate(90deg);
}

/* ===================================
   LEVEL UP MODAL STYLES
   =================================== */

.levelup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 24, 16, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--transition-normal);
  pointer-events: none;
}

.levelup-modal-overlay.hidden {
  display: none;
}

.levelup-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.levelup-modal {
  position: relative;
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 100%);
  border: 5px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  max-width: 600px;
  width: 90%;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(212, 175, 55, 0.6);
  transform: scale(0.7) rotateX(20deg);
  transition: transform var(--transition-slow);
}

.levelup-modal-overlay.active .levelup-modal {
  transform: scale(1) rotateX(0deg);
}

.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.confetti {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 10px;
  opacity: 0.9;
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotateZ(720deg);
    opacity: 0;
  }
}

.levelup-content {
  text-align: center;
  position: relative;
  z-index: 1;
}

.levelup-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.level-badge-old,
.level-badge-new {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  border: 4px solid var(--gold);
  box-shadow: var(--shadow-md);
}

.level-badge-old {
  background: var(--parchment-darker);
  color: var(--ink-medium);
  opacity: 0.7;
}

.level-badge-new {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--ink-dark);
  animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6), var(--shadow-md);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 175, 55, 1), var(--shadow-lg);
  }
}

.level-arrow {
  font-size: 2rem;
  color: var(--gold);
  font-weight: bold;
}

.levelup-title {
  font-size: 2.5rem;
  color: var(--gold);
  margin-bottom: var(--spacing-sm);
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  animation: title-shine 3s ease-in-out infinite;
}

@keyframes title-shine {
  0%, 100% {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
  }
  50% {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(212, 175, 55, 0.8);
  }
}

.levelup-message {
  font-size: 1.2rem;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-xl);
}

.stat-increases {
  background: var(--parchment-darker);
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.stat-increases h3 {
  font-size: 1.3rem;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-md);
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border-radius: var(--radius-sm);
}

.stat-label {
  font-weight: bold;
  color: #2c1810;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--gold-dark);
  font-family: var(--font-mono);
}

.stat-old {
  color: var(--ink-medium);
  opacity: 0.7;
}

.stat-arrow {
  color: var(--gold);
  font-weight: bold;
}

.stat-new {
  color: var(--success);
  font-weight: bold;
  animation: stat-pulse 1s ease-in-out 3;
}

@keyframes stat-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.levelup-perks {
  background: var(--parchment-light);
  border: 2px solid var(--info);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.levelup-perks h3 {
  font-size: 1.2rem;
  color: var(--info);
  margin-bottom: var(--spacing-md);
}

.perk-list {
  list-style: none;
  text-align: left;
}

.perk-list li {
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background: var(--parchment-medium);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

.perk-list strong {
  color: var(--gold-dark);
}

.levelup-close {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--ink-dark);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.2rem;
  font-weight: bold;
  font-family: var(--font-display);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-md);
}

.levelup-close:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.levelup-close:active {
  transform: translateY(0);
}

/* ===================================
   ITEM PURCHASE ANIMATION STYLES
   =================================== */

.purchase-animation-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-animation-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.item-glow {
  position: absolute;
  inset: -10px;
  border-radius: 8px;
  opacity: 0.6;
  filter: blur(10px);
}

.item-glow.common {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
}

.item-glow.uncommon {
  background: radial-gradient(circle, rgba(30, 255, 0, 0.4) 0%, transparent 70%);
}

.item-glow.rare {
  background: radial-gradient(circle, rgba(0, 112, 221, 0.4) 0%, transparent 70%);
}

.item-glow.epic {
  background: radial-gradient(circle, rgba(163, 53, 238, 0.4) 0%, transparent 70%);
}

.item-glow.legendary {
  background: radial-gradient(circle, rgba(255, 128, 0, 0.4) 0%, transparent 70%);
}

.purchase-particle {
  animation: particle-burst 0.7s ease-out forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
}

.inventory-flash {
  animation: inventory-flash 0.6s ease-out;
}

@keyframes inventory-flash {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  25% {
    transform: scale(1.3);
    filter: brightness(1.5) drop-shadow(0 0 15px var(--gold));
  }
  50% {
    transform: scale(1.15);
    filter: brightness(1.3);
  }
  75% {
    transform: scale(1.2);
    filter: brightness(1.4);
  }
}

.purchase-success-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--success);
  color: white;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  z-index: 9999;
  transform: translateX(400px);
  transition: transform var(--transition-normal);
  font-weight: bold;
}

.purchase-success-toast.show {
  transform: translateX(0);
}

.toast-icon {
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ===================================
   UI TRANSITION STYLES
   =================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--ink-dark);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.page-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

body.page-transitioning {
  overflow: hidden;
}

body.page-loaded {
  animation: page-fade-in 0.4s ease-out;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-fade-in] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-fade-in].fade-in-active {
  opacity: 1;
  transform: translateY(0);
}

.pulse-animation {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.shake-animation {
  animation: shake 0.6s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.bounce-animation {
  animation: bounce 1s ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

/* ===================================
   ADMIN DASHBOARD STYLES
   =================================== */

.admin-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.admin-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.admin-subtitle {
  color: var(--ink-medium);
  font-size: 1.1rem;
}

/* Admin Stats Grid */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xxl);
}

.stat-card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.stat-icon {
  font-size: 3rem;
  opacity: 0.8;
}

.stat-content h3 {
  font-size: 0.9rem;
  color: var(--ink-medium);
  margin-bottom: var(--spacing-xs);
}

.stat-number {
  font-size: 2rem;
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-xs);
}

.stat-change {
  font-size: 0.85rem;
  color: var(--ink-medium);
}

.stat-change.positive {
  color: var(--success);
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  border-bottom: 3px solid var(--parchment-darker);
  overflow-x: auto;
}

.tab-button {
  background: transparent;
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-medium);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tab-button:hover {
  color: var(--ink-dark);
  background: var(--parchment-light);
}

.tab-button.active {
  color: var(--gold-dark);
  border-bottom-color: var(--gold);
  font-weight: bold;
}

/* Filter Tabs */
.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.filter-tab {
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 100%);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: 0.5rem 1rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink-dark);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, border-color 0.2s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
  font-weight: 500;
}

.filter-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(212, 175, 55, 0.15);
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, var(--parchment-light) 0%, var(--parchment-medium) 50%, var(--parchment-light) 100%);
  background-size: 200% 200%;
  animation: shimmer 2s ease infinite;
}

.filter-tab.active {
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
  border-color: var(--gold-dark);
  color: #2c1810;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.filter-tab.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Tab Content */
.admin-content {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  min-height: 500px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* Search & Filter Bars */
.search-bar {
  display: flex;
  gap: var(--spacing-sm);
  flex: 1;
  max-width: 500px;
}

.search-bar input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
}

.filter-bar {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.filter-bar select {
  padding: 6px 28px 6px 10px;
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 0.9rem;
  background-color: var(--parchment-medium);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a84b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
  color: var(--ink-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-bar select:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 2px 6px rgba(212,175,55,0.2);
}

.filter-bar select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}

/* Data Lists */
.data-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.loading-text,
.error-text {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--ink-medium);
  font-style: italic;
}

.error-text {
  color: var(--danger);
}

/* User Cards */
.user-card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
}

.user-info h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--ink-dark);
}

.user-info p {
  font-size: 0.9rem;
  color: var(--ink-medium);
  margin-bottom: var(--spacing-xs);
}

.user-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Item Cards */
.item-card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.item-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.item-info {
  flex: 1;
}

.item-info h4 {
  margin-bottom: var(--spacing-xs);
}

.item-rarity {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.item-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Rarity borders */
.rarity-common {
  border-color: var(--common);
}

.rarity-uncommon {
  border-color: var(--uncommon);
}

.rarity-rare {
  border-color: var(--rare);
}

.rarity-epic {
  border-color: var(--epic);
}

.rarity-legendary {
  border-color: var(--legendary);
}

/* Achievement Cards */
.achievement-card {
  background: var(--parchment-medium);
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.achievement-card img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.achievement-info h4 {
  margin-bottom: var(--spacing-xs);
  color: var(--gold-dark);
}

.achievement-rewards {
  font-weight: bold;
  color: var(--info);
}

/* Store Cards */
.store-item-card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.store-info {
  background: var(--parchment-darker);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.store-history {
  margin-top: var(--spacing-xl);
}

/* Settings Sections */
.settings-section {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.settings-section h3 {
  color: var(--ink-dark);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--parchment-darker);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-md);
}

.setting-item label {
  flex: 1;
  font-weight: bold;
  color: var(--ink-dark);
}

.setting-item input[type="number"],
.setting-item input[type="text"],
.setting-item textarea {
  max-width: 300px;
  padding: var(--spacing-sm);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
}

.setting-item textarea {
  max-width: 100%;
  font-family: var(--font-primary);
}

/* Admin Modal */
.admin-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(44, 24, 16, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.admin-modal.hidden {
  display: none;
}

.admin-modal .modal-content {
  background: var(--parchment-light);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: transparent;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--ink-medium);
}

.user-detail p {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border-radius: var(--radius-sm);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger {
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: bold;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--gold);
  color: var(--ink-dark);
}

.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--parchment-darker);
  color: var(--ink-dark);
}

.btn-secondary:hover {
  background: var(--parchment-dark);
}

.btn-success {
  background: var(--success);
  color: white;
}

.btn-success:hover {
  background: #4a6332;
}

.btn-warning {
  background: var(--warning);
  color: white;
}

.btn-warning:hover {
  background: #b86f19;
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover {
  background: #6d2418;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===================================
   ITEM WIZARD STYLES
   =================================== */

.wizard-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.wizard-header {
  margin-bottom: var(--spacing-xl);
}

.back-link {
  display: inline-block;
  margin-bottom: var(--spacing-md);
  color: var(--gold-dark);
  text-decoration: none;
  font-weight: bold;
}

.back-link:hover {
  text-decoration: underline;
}

.wizard-content {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--spacing-xl);
}

/* Item Preview */
.item-preview {
  position: sticky;
  top: var(--spacing-lg);
  height: fit-content;
}

.preview-card {
  background: var(--parchment-medium);
  border: 3px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
}

.preview-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto var(--spacing-md);
  background: var(--parchment-darker);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.preview-card h3 {
  margin-bottom: var(--spacing-sm);
}

.preview-rarity {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.preview-type,
.preview-price {
  color: var(--ink-medium);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.preview-stats {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--parchment-light);
  border-radius: var(--radius-sm);
}

.stats-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
}

.stat-badge {
  background: var(--success);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: bold;
}

.no-stats {
  color: var(--ink-medium);
  font-size: 0.85rem;
  font-style: italic;
}

.preview-description {
  margin-top: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--ink-medium);
  font-style: italic;
}

/* Item Form */
.item-form {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.item-form h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--parchment-darker);
  color: var(--gold-dark);
}

.item-form h2:first-child {
  margin-top: 0;
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: bold;
  color: var(--ink-dark);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 1rem;
  background: var(--parchment-medium);
}

.form-group small {
  display: block;
  margin-top: var(--spacing-xs);
  color: var(--ink-medium);
  font-size: 0.85rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 2px solid var(--parchment-darker);
}

/* Responsive */
@media (max-width: 1024px) {
  .wizard-content {
    grid-template-columns: 1fr;
  }

  .item-preview {
    position: relative;
    top: 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Achievement Cards - Compact */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.875rem;
  margin-bottom: 2rem;
}

.achievement-card {
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 100%);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-height: 160px;
  background-size: 200% 200%;
  background-position: 0% 50%;
}

.achievement-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(212, 175, 55, 0.2);
  border-color: var(--gold-dark);
  background: linear-gradient(135deg, var(--parchment-light) 0%, var(--parchment-medium) 50%, var(--parchment-light) 100%);
  background-size: 200% 200%;
  background-position: 100% 50%;
  animation: shimmer 2s ease infinite;
}

@keyframes shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.achievement-card.locked {
  opacity: 0.6;
  filter: grayscale(0.5);
}

.achievement-card.locked:hover {
  opacity: 0.8;
  filter: grayscale(0.3);
}

.unlocked-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--success);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.achievement-icon-large {
  font-size: 3rem;
  margin: 0;
}

.achievement-title {
  font-weight: bold;
  color: var(--ink-dark);
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.achievement-progress-compact {
  width: 100%;
  margin-top: auto;
}

.achievement-progress-bar {
  height: 6px;
  background: var(--parchment-darker);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.achievement-progress-fill {
  height: 100%;
  background: var(--gold-dark);
  transition: width 0.3s ease;
}

.progress-text-compact {
  font-size: 0.75rem;
  color: var(--ink-medium);
}

.category-header {
  color: var(--ink-dark);
  font-size: 1.5rem;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--parchment-darker);
}

.category-header:first-child {
  margin-top: 0;
}

/* Achievement Modal */
.modal {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: var(--parchment-light);
  margin: 5% auto;
  padding: 2rem;
  border: 3px solid var(--gold-dark);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.close {
  color: var(--ink-medium);
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover,
.close:focus {
  color: var(--ink-dark);
}

.achievement-icon-huge {
  font-size: 5rem;
  margin: 1rem 0;
}

.unlocked-badge-large,
.locked-badge-large {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-weight: bold;
  margin-bottom: 1rem;
}

.unlocked-badge-large {
  background: var(--success);
  color: white;
}

.locked-badge-large {
  background: var(--parchment-darker);
  color: var(--ink-medium);
}

.modal-section {
  background: var(--parchment-medium);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin: 1rem 0;
  border: 2px solid var(--parchment-darker);
}

.modal-section h3 {
  color: var(--gold-dark);
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

.modal-rewards {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}

.reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.reward-icon {
  font-size: 2rem;
}

.reward-value {
  font-weight: bold;
  color: var(--ink-dark);
  font-size: 1.1rem;
}

.achievement-progress-modal {
  margin-top: 1rem;
}

.progress-text-modal {
  text-align: center;
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.achievement-progress-bar-modal {
  height: 20px;
  background: var(--parchment-darker);
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--parchment-darker);
}

.achievement-progress-bar-modal .achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

@media (max-width: 768px) {
  .achievements-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
  }
  
  .achievement-card {
    min-height: 140px;
    padding: 0.75rem;
  }
  
  .achievement-icon-large {
    font-size: 2.5rem;
  }
  
  .modal-content {
    width: 95%;
    padding: 1.5rem;
    margin: 10% auto;
  }
  
  .achievement-icon-huge {
    font-size: 4rem;
  }
}

/* ========================================
   PARTIES PAGE
   ======================================== */

.parties-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.parties-header h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* === Page Header Styles === */
.page-header-container {
  background: linear-gradient(135deg, var(--parchment-medium) 0%, var(--parchment-light) 50%, var(--parchment-medium) 100%);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.page-header h1 {
  margin: 0;
  color: var(--ink-dark, #2c1810);
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

/* === Dashboard Layout === */
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(280px,360px) 1fr minmax(240px,320px);
  grid-template-areas: "left center right";
  gap: 12px;
  align-items: start;
  min-height: calc(100vh - 120px);
  /* fill the full available width — override container max-width */
  width: 100%;
  max-width: 100%;
}

/* ── Left column ── */
.dash-left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Centre column (calendar) ── */
.dash-center {
  grid-area: center;
  display: flex;
  flex-direction: column;
}

/* Adventures controls panel — header + filters in one box */
.dash-adventures-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(200,168,75,0.3);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
}

.dash-adv-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-adventures-header h1 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--gold);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  white-space: nowrap;
}

.filter-select-inline {
  padding: 6px 28px 6px 10px;
  border: 2px solid var(--gold-dark);
  border-radius: var(--radius-sm);
  background-color: var(--parchment-medium);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c8a84b' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 8px;
  color: var(--ink-dark);
  font-family: var(--font-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.filter-select-inline:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(212,175,55,0.25);
}

.filter-select-inline:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}

/* Full-height calendar — fills centre column */
.dash-calendar-wrap {
  height: calc(100vh - 140px);
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.dash-calendar-wrap #dashboardCalendar,
.dash-calendar-wrap .calendar-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dash-calendar-wrap .calendar-container .gc-body,
.dash-calendar-wrap .calendar-container .cal-grid {
  flex: 1;
}

/* Active quests list */
.dash-active-quests {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(200,168,75,0.2);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.dash-active-quests h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* ── Right column ── */
.dash-right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 80px;
  /* No inner overflow-y — page itself scrolls */
}

/* Minigame widgets */
.minigame-widget {
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(200,168,75,0.35);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.minigame-widget:hover {
  border-color: rgba(200,168,75,0.7);
  box-shadow: 0 2px 12px rgba(200,168,75,0.15);
}

.minigame-widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.minigame-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.minigame-widget-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--gold);
  flex: 1;
}

.btn-play {
  display: inline-block;
  padding: 5px 14px;
  background: var(--gold);
  color: var(--ink-dark);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.btn-play:hover {
  background: var(--gold-dark);
  color: var(--ink-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

.minigame-desc {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--parchment-light);
  opacity: 0.8;
  line-height: 1.4;
}

.minigame-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  padding: 6px 4px;
}

.mg-label {
  font-size: 0.68rem;
  color: var(--gold);
  opacity: 0.7;
  text-align: center;
  line-height: 1.2;
  margin-bottom: 2px;
}

.mg-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--parchment-light);
}

/* Responsive */
@media (max-width: 1100px) {
  .dashboard-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "center" "right";
    min-height: unset;
  }

  .dash-right {
    position: static;
    max-height: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .dash-calendar-wrap {
    height: 65vh;
  }
}

/* ── Dashboard context tabs (replaces filter selects + guild pills) ── */
.dash-context-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.dash-ctx-tab {
  padding: 5px 14px;
  border: 1.5px solid rgba(200,168,75,0.35);
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  color: var(--parchment-light);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font-display);
}
.dash-ctx-tab:hover {
  background: rgba(200,168,75,0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.dash-ctx-tab.active {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-color: var(--gold-dark);
  color: var(--ink-dark);
  font-weight: 700;
}

/* compact secondary filter row — lives inside .dash-adventures-header */
.dash-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(200,168,75,0.15);
}

/* ── Adventure card quest icon strip ────────────────────────────── */
.adv-quest-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 2px;
}

.adv-quest-icon {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  background: rgba(255,255,255,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-qi-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  image-rendering: pixelated;
  opacity: 0.88;
  pointer-events: none;
}

.adv-quest-icon:hover {
  transform: scale(1.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  z-index: 2;
}

/* Status backgrounds */
.adv-quest-icon.qi-completed,
.adv-quest-icon.qi-done            { background: #2d6e2d; }
.adv-quest-icon.qi-in_progress     { background: #1a5a8a; }
.adv-quest-icon.qi-ready_to_complete { background: #3e6e3e; }
.adv-quest-icon.qi-pending         { background: rgba(200,168,75,0.28); }
.adv-quest-icon.qi-planning,
.adv-quest-icon.qi-todo            { background: rgba(200,168,75,0.16); }
.adv-quest-icon.qi-blocked         { background: #7a1a1a; }

/* Priority borders */
.adv-quest-icon.qi-p-critical { border-color: #e53935; }
.adv-quest-icon.qi-p-high     { border-color: #ff7043; }
.adv-quest-icon.qi-p-medium   { border-color: #c8a84b; }
.adv-quest-icon.qi-p-low      { border-color: #6aaa3a; }

.adv-no-quests {
  font-size: 0.75rem;
  opacity: 0.4;
  font-style: italic;
  margin: 6px 0 2px;
}

/* Footer inside collapsed-card body: rewards + view button */
.adv-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px solid var(--parchment-darker);
}

.adv-rewards {
  font-size: 0.8rem;
  color: var(--parchment-medium);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.adv-description {
  font-size: 0.84rem;
  color: var(--parchment-light);
  margin: 0 0 4px;
  opacity: 0.82;
  line-height: 1.4;
}

/* ── Dropdown character stats panel (below the avatar card) ── */
.dropdown-char-stats {
  padding: 8px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--parchment-darker);
  margin-top: 6px;
}

.dcs-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.dcs-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 0.73rem;
  line-height: 1.3;
}

.dcs-label {
  color: var(--ink-dark);
  opacity: 0.62;
  white-space: nowrap;
}

.dcs-val {
  font-weight: 700;
  color: var(--ink-dark);
  white-space: nowrap;
}

/* ── Badass tooltip ── */
.badass-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  max-width: 340px;
  background: rgba(12, 6, 20, 0.97);
  border: 1px solid rgba(212,175,55,0.55);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,175,55,0.1);
  font-size: 0.82rem;
  line-height: 1.55;
  color: #e8d5b0;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* entrance animation */
  animation: tooltip-in 0.12s ease;
}
.badass-tooltip strong,
.badass-tooltip b { color: var(--gold); }
.badass-tooltip .tt-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold);
  border-bottom: 1px solid rgba(212,175,55,0.25);
  margin-bottom: 6px;
  padding-bottom: 4px;
}
.badass-tooltip .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.badass-tooltip .tt-label { opacity: 0.65; }
.badass-tooltip .tt-val   { font-weight: 600; color: #f0e0b0; }
/* Tooltip icon preview (quest icon full-art above the stat rows) */
.badass-tooltip .tt-icon-preview {
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,175,55,0.25);
}
.badass-tooltip .tt-icon-preview img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(0,0,0,0.35);
  padding: 4px;
  image-rendering: pixelated;
}

@keyframes tooltip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Legacy classes — kept for backward compat in other pages */
.adventures-main { }
.calendar-sidebar { }
.filters-sidebar { display: none; }
.dungeon-entry-widget { display: none; }
.daily-quests-widget { }
.filter-group { }
.filter-select {
  padding: var(--spacing-sm);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  background: var(--parchment-lighter);
  color: var(--text-primary);
  font-family: var(--font-primary);
  cursor: pointer;
}
.filters-header { }
.filter-group label { font-weight: bold; font-size: 0.9rem; color: var(--ink-dark); }

.filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--parchment-darker);
}

.filters-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.filters-sidebar .btn-sm {
  padding: 4px 8px;
  font-size: 0.75rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.filter-group label {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--ink-dark);
}

.filter-select {
  padding: var(--spacing-sm);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  background: var(--parchment-lighter);
  color: var(--text-primary);
  font-family: var(--font-primary);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.filter-select:hover,
.filter-select:focus {
  border-color: var(--gold);
  outline: none;
}

/* === Character Page Layout === */
.character-layout {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

.character-left-column {
  flex: 0 0 380px;
  min-width: 0;
}

.character-right-column {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1024px) {
  .character-layout {
    flex-direction: column;
  }

  .character-left-column,
  .character-right-column {
    flex: 1;
    width: 100%;
  }
}

.adventures-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  min-height: 200px;
  width: 100%;
}

.adventure-card {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Force legible dark text regardless of page theme */
  color: var(--ink-dark);
}

.adventure-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: var(--gold);
}

.adventure-card-header {
  padding: 1rem;
  cursor: pointer;
  user-select: none;
  background: var(--parchment-light);
  transition: background 0.2s ease;
}

.adventure-card-header:hover {
  background: var(--parchment-medium);
}

.adventure-chevron {
  display: inline-block;
  font-size: 0.75rem;
  transition: transform 0.3s ease;
  color: var(--gold-dark);
  flex-shrink: 0;
}

.adventure-card h3 {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.3;
  color: var(--ink-dark);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.adventure-card-body {
  padding: 0 1rem 1rem 1rem;
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  overflow: hidden;
}

.adventure-card.collapsed .adventure-card-body {
  max-height: 0;
  opacity: 0;
  padding: 0 1rem;
}

.adventure-task-info {
  font-size: 0.85rem;
  color: var(--ink-medium);
  margin-top: 0.5rem;
  font-style: italic;
}

.adventure-priority {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  flex-shrink: 0;
}

.priority-low {
  background: var(--info);
  color: white;
}

.priority-medium {
  background: var(--warning);
  color: white;
}

.priority-high {
  background: var(--danger);
  color: white;
}

.priority-critical {
  background: #8b0000;
  color: white;
  animation: pulse 2s infinite;
}

.adventure-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-planning {
  background: var(--parchment-darker);
  color: var(--ink-dark);
}

.status-in_progress {
  background: var(--info);
  color: white;
}

.status-ready_to_complete {
  background: var(--warning);
  color: white;
}

.status-completed {
  background: var(--success);
  color: white;
}

.parties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.party-card {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.party-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  border-color: var(--accent-color);
}

.party-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.party-card-header h3 {
  margin: 0;
  color: var(--ink-dark);
  font-size: 1.25rem;
}

.party-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--gold);
  color: var(--ink-dark);
  border-radius: var(--radius-sm);
  font-weight: bold;
  white-space: nowrap;
}

.party-card-description {
  color: var(--ink-medium);
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  min-height: 2.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.party-card-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--parchment-darker);
}

.party-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-medium);
  font-size: 0.9rem;
}

.stat-icon {
  font-size: 1.1rem;
}

.party-chat-view {
  width: 100%;
}

.party-chat-view .party-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  gap: 1rem;
  flex-wrap: wrap;
}

/* Invite tabs styling */
.tab-btn {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  transition: all 0.3s ease;
  font-size: 0.95em;
}

.tab-btn:hover {
  opacity: 0.8;
}

.tab-btn.active {
  opacity: 1;
  border-bottom-color: var(--gold);
  font-weight: 600;
}

.invite-tab-content label:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* ============================================
   GUILD NAME FLAIR EFFECTS
   ============================================ */

/* Gold glow effect (Level 5 guilds) */
.username-flair-gold {
  color: #FFD700 !important;
  text-shadow: 
    0 0 5px rgba(255, 215, 0, 0.8),
    0 0 10px rgba(255, 215, 0, 0.6),
    0 0 15px rgba(255, 215, 0, 0.4);
  animation: goldPulse 3s ease-in-out infinite;
  font-weight: 600;
}

@keyframes goldPulse {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(255, 215, 0, 0.8),
      0 0 10px rgba(255, 215, 0, 0.6),
      0 0 15px rgba(255, 215, 0, 0.4);
  }
  50% {
    text-shadow: 
      0 0 10px rgba(255, 215, 0, 1),
      0 0 20px rgba(255, 215, 0, 0.8),
      0 0 30px rgba(255, 215, 0, 0.6);
  }
}

/* Sparkle effect (Level 10 guilds) */
.username-flair-sparkle {
  color: #FFD700 !important;
  position: relative;
  font-weight: 600;
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 215, 0, 0.6);
}

.username-flair-sparkle::before,
.username-flair-sparkle::after {
  content: '✨';
  position: absolute;
  font-size: 0.7em;
  animation: sparkleFloat 2s ease-in-out infinite;
}

.username-flair-sparkle::before {
  left: -20px;
  animation-delay: 0s;
}

.username-flair-sparkle::after {
  right: -20px;
  animation-delay: 1s;
}

@keyframes sparkleFloat {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

/* Rainbow effect (Level 25 guilds) */
.username-flair-rainbow {
  font-weight: 700;
  background: linear-gradient(
    90deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbowShift 3s linear infinite;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes rainbowShift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Fire effect (Weekly challenge winner) */
.username-flair-fire {
  color: #FF4500 !important;
  font-weight: 700;
  text-shadow: 
    0 0 5px rgba(255, 69, 0, 0.8),
    0 0 10px rgba(255, 140, 0, 0.6),
    0 0 15px rgba(255, 215, 0, 0.4);
  animation: fireFlicker 1.5s ease-in-out infinite;
}

.username-flair-fire::before {
  content: '🔥';
  position: absolute;
  left: -25px;
  font-size: 0.9em;
  animation: fireFloat 2s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% {
    text-shadow: 
      0 0 5px rgba(255, 69, 0, 0.8),
      0 0 10px rgba(255, 140, 0, 0.6),
      0 0 15px rgba(255, 215, 0, 0.4);
  }
  25% {
    text-shadow: 
      0 0 8px rgba(255, 69, 0, 1),
      0 0 15px rgba(255, 140, 0, 0.8),
      0 0 20px rgba(255, 215, 0, 0.6);
  }
  75% {
    text-shadow: 
      0 0 3px rgba(255, 69, 0, 0.6),
      0 0 8px rgba(255, 140, 0, 0.4),
      0 0 12px rgba(255, 215, 0, 0.3);
  }
}

@keyframes fireFloat {
  0%, 100% {
    opacity: 0.6;
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-8px) rotate(5deg);
  }
}

/* Golden page theme (Level 10+ guilds) */
.guild-theme-golden {
  background: linear-gradient(
    135deg,
    #f4e4c1 0%,
    #f7eed6 25%,
    #fdf6e3 50%,
    #f7eed6 75%,
    #f4e4c1 100%
  );
  background-size: 400% 400%;
  animation: goldenShimmer 10s ease infinite;
}

@keyframes goldenShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Badge color customization */
.guild-badge-pink {
  background: linear-gradient(135deg, #ff6ec4 0%, #ff9fe6 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 110, 196, 0.4);
}

.guild-badge-orange {
  background: linear-gradient(135deg, #ff7043 0%, #ff9e80 100%) !important;
  box-shadow: 0 2px 8px rgba(255, 112, 67, 0.4);
}

/* === Guild Page Redesign === */
.guilds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.guild-card {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all 0.3s;
}

.guild-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.guild-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.guild-card-header h3 {
  margin: 0;
  color: var(--gold-dark);
}

.guild-level {
  background: var(--gold);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: bold;
}

.guild-description {
  color: var(--ink-medium);
  margin-bottom: var(--spacing-md);
}

.guild-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.9rem;
  color: var(--ink-dark);
}

/* Guild View Layout */
.guild-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  height: calc(100vh - 120px);
}

.guild-header {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
}

.guild-header-info {
  flex: 1;
}

.guild-header-info h1 {
  margin: 0 0 0.5rem 0;
  color: var(--gold);
}

.guild-header-info p {
  margin: 0 0 0.5rem 0;
  color: var(--ink-medium);
}

.guild-meta {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--ink-dark);
  flex-wrap: wrap;
  align-items: center;
}

/* Guild Layout: Chat-focused */
.guild-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--spacing-lg);
  flex: 1;
  min-height: 0;
}

.guild-chat-main {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-header {
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
  background: var(--parchment-medium);
  flex-shrink: 0;
}

.chat-header h2 {
  margin: 0;
  color: var(--gold-dark);
}

.chat-roster-cards {
  margin-top: var(--spacing-md);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}

.chat-roster-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.45);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.chat-roster-card:hover {
  border-color: var(--gold-dark);
}

.chat-roster-card.is-you {
  box-shadow: inset 0 0 0 1px var(--gold-dark);
}

.chat-roster-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--parchment-darker);
  flex-shrink: 0;
}

.chat-roster-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-roster-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-roster-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-roster-level {
  font-size: 0.72rem;
  color: var(--ink-medium);
}

.chat-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.chat-messages {
  flex: 1;
  min-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  color: var(--ink-dark);
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-md);
}

.chat-input-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  background: var(--parchment-light);
  color: var(--ink-dark);
  font-size: 0.95rem;
}

.chat-input:focus {
  outline: none;
  border-color: var(--gold);
}

.guild-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-height: 0;
}

.guild-sidebar-section {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
}

.guild-sidebar-section h3 {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--gold);
  font-size: 1.1rem;
}

/* Member List */
.member-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 400px;
  overflow-y: auto;
}

.member-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.member-card:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder,
.avatar-placeholder-small {
  width: 100%;
  height: 100%;
  background: var(--gold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.avatar-placeholder-small {
  font-size: 0.9rem;
}

.member-info {
  flex: 1;
  min-width: 0;
}

.member-name {
  font-weight: 600;
  color: var(--ink-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.member-meta {
  font-size: 0.85rem;
  color: var(--ink-medium);
  display: flex;
  gap: 0.5rem;
}

/* Guild Stats List */
.guild-stats-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border-radius: var(--radius-sm);
}

.guild-sidebar-section .stat-label {
  color: var(--ink-medium);
  font-size: 0.9rem;
  text-transform: none;
  font-weight: normal;
  letter-spacing: 0;
  margin-bottom: 0;
}

.guild-sidebar-section .stat-value {
  font-weight: 600;
  color: var(--ink-dark);
}
/* Chat Messages */
.chat-message {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.chat-message.own-message {
  flex-direction: row-reverse;
}

.chat-message.own-message .message-content {
  background: var(--gold);
  color: white;
}

.chat-message.own-message .message-author {
  color: white;
}

.chat-message.own-message .message-text {
  color: white;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-content {
  flex: 1;
  background: var(--parchment-medium);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  min-width: 0;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.message-author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--gold-dark);
}

.message-timestamp {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.message-text {
  color: var(--ink-dark);
  word-wrap: break-word;
}

/* Responsive */
@media (max-width: 1024px) {
  .guild-layout {
    grid-template-columns: 1fr;
  }
  
  .guild-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .guild-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .guild-sidebar {
    grid-template-columns: 1fr;
  }
  
  .guilds-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .parties-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .parties-grid {
    grid-template-columns: 1fr;
  }
  
  .party-chat-view .party-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .tab-btn {
    padding: 8px 12px;
    font-size: 0.85em;
  }
  
  /* Adjust name flair for mobile */
  .username-flair-sparkle::before,
  .username-flair-sparkle::after {
    display: none; /* Hide sparkles on mobile to save space */
  }
  
  .username-flair-fire::before {
    display: none; /* Hide fire emoji on mobile */
  }
}

/* ============================================
   RANDOM COIN SPAWNER
   ============================================ */

/* Base coin styles */
.random-coin {
  position: fixed;
  font-size: 3em;
  cursor: pointer;
  z-index: 9998;
  user-select: none;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* ============================================
   FORUMS + DIRECT MESSAGES UI REFRESH
   ============================================ */

.forum-page,
.dm-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forum-page-header,
.dm-page-header {
  background: linear-gradient(135deg, var(--parchment-light) 0%, #fff6dc 100%);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.forum-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.forum-page-heading h1,
.dm-page-header h1 {
  margin: 0;
}

.forum-page-heading p,
.dm-page-header p {
  margin: 6px 0 0;
  color: var(--ink-medium);
}

.forum-back-wrap {
  margin-bottom: 6px;
}

.forum-back-link {
  color: var(--gold-dark);
  text-decoration: none;
  font-weight: 700;
}

.forum-back-link:hover {
  text-decoration: underline;
}

.forum-fallback-banner {
  padding: 10px 12px;
  border: 1px solid #b8860b;
  border-radius: 10px;
  background: #fff7d6;
  color: #5e4300;
  box-shadow: inset 0 0 0 1px rgba(184, 134, 11, 0.15);
}

.forum-layout,
.dm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 16px;
  align-items: start;
}

.forum-main-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forum-card,
.dm-card {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.forum-topic-sidebar h2,
.forum-composer-card h2,
.dm-inbox h2 {
  margin-top: 0;
}

.forum-form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.forum-media-block,
.dm-media-block {
  border: 1px dashed var(--parchment-dark);
  border-radius: var(--radius-md);
  padding: 12px;
  background: var(--parchment-lighter);
}

.forum-media-block label,
.dm-media-block label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.forum-media-help {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-medium);
}

.forum-form-actions,
.dm-compose-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.forum-status-text,
.dm-status-text,
.dm-status-text:empty {
  color: var(--ink-medium);
}

.forum-empty-text,
.dm-empty-text {
  color: var(--ink-medium);
  margin: 0;
}

.forum-topic-item,
.dm-thread-item,
.dm-user-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff 0%, #fdf7e9 100%);
  border: 1px solid var(--parchment-dark);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.dm-user-result {
  padding: 8px 10px;
  margin-bottom: 6px;
}

.forum-topic-item:hover,
.dm-thread-item:hover,
.dm-user-result:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.forum-topic-item.is-active,
.dm-thread-item.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 14px rgba(184, 134, 11, 0.15);
}

.forum-topic-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.forum-topic-title,
.dm-thread-name {
  font-weight: 700;
}

.forum-topic-meta,
.dm-thread-preview,
.dm-thread-time,
.forum-reply-time,
.dm-bubble-meta,
.dm-thread-subtitle {
  font-size: 0.85rem;
  color: var(--ink-medium);
}

.dm-thread-preview {
  margin-bottom: 4px;
}

.forum-reply-item {
  padding: 12px 0;
  border-top: 1px solid var(--parchment-dark);
}

.forum-reply-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.forum-reply-author {
  font-weight: 600;
}

.forum-reply-body,
.dm-bubble-body {
  white-space: pre-wrap;
  line-height: 1.5;
}

.forum-error-box p {
  margin: 0;
  color: #8a1a1a;
}

.dm-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.dm-thread-panel {
  min-height: 480px;
}

.dm-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.dm-thread-header h2 {
  margin: 0 0 4px;
}

.dm-participant-cards {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.dm-participant-card {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius-md);
  background: #fff8e8;
  padding: 8px;
}

.dm-participant-card.is-you {
  box-shadow: inset 0 0 0 1px var(--gold-dark);
}

.dm-participant-avatar,
.dm-message-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--parchment-dark);
  flex-shrink: 0;
}

.dm-participant-avatar img,
.dm-message-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-participant-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2c1810;
}

.dm-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--parchment-dark);
  background: var(--parchment-lighter);
}

.dm-compose-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.dm-message {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.dm-message.own {
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.dm-message.other {
  justify-content: flex-start;
}

.dm-bubble {
  max-width: 75%;
  border: 1px solid var(--parchment-dark);
  border-radius: 12px;
  padding: 10px 12px;
  background: white;
}

.dm-message.own .dm-bubble {
  background: linear-gradient(135deg, #f7e7a1 0%, #f0d671 100%);
}

/* Enforce readable contrast in forum/chat surfaces across all themes. */
.forum-card,
.dm-card,
.forum-topic-item,
.forum-reply-item,
.chat-messages,
.chat-message .message-content,
.dm-bubble {
  color: #2c1810 !important;
}

.forum-card,
.dm-card,
.chat-messages,
.chat-message .message-content {
  background: #f4e8d0 !important;
}

.forum-topic-item,
.dm-thread-item,
.dm-user-result,
.forum-reply-item,
.dm-bubble {
  background: #fff8e8 !important;
}

.forum-topic-meta,
.forum-reply-time,
.dm-thread-preview,
.dm-thread-time,
.dm-bubble-meta,
.message-timestamp {
  color: #6b4423 !important;
}

.chat-message.own-message .message-content {
  background: #f0d671 !important;
  color: #2c1810 !important;
}

.chat-message.own-message .message-author,
.chat-message.own-message .message-text {
  color: #2c1810 !important;
}

@media (max-width: 980px) {
  .forum-layout,
  .dm-layout {
    grid-template-columns: 1fr;
  }

  .dm-thread-panel {
    min-height: 420px;
  }

  .dm-bubble {
    max-width: 92%;
  }
}

.random-coin:hover {
  transform: scale(1.2);
}

.random-coin.coin-fade-out {
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease;
}

/* Common coin - subtle bounce */
.coin-common {
  animation: coinBounce 2s ease-in-out infinite;
}

@keyframes coinBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(5deg);
  }
  75% {
    transform: translateY(-10px) rotate(-5deg);
  }
}

/* Uncommon coin - spin and bounce */
.coin-uncommon {
  animation: coinSpin 3s linear infinite, coinFloat 2s ease-in-out infinite;
}

@keyframes coinSpin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes coinFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Rare coin - sparkle and spin */
.coin-rare {
  animation: coinSparkle 1.5s linear infinite, coinRotate 2s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 20px rgba(255, 215, 0, 0.6));
}

@keyframes coinSparkle {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 20px rgba(255, 215, 0, 0.6))
            brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1))
            drop-shadow(0 0 30px rgba(255, 215, 0, 0.8))
            brightness(1.5);
  }
}

@keyframes coinRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(90deg) scale(1.1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  75% {
    transform: rotate(270deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Legendary coin - EXTREME effects */
.coin-legendary {
  animation: 
    coinLegendarySpin 1s linear infinite,
    coinLegendaryPulse 1.5s ease-in-out infinite,
    coinLegendaryFloat 2s ease-in-out infinite,
    coinLegendaryGlow 1s ease-in-out infinite;
  font-size: 4em;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1))
          drop-shadow(0 0 40px rgba(255, 140, 0, 0.8))
          drop-shadow(0 0 60px rgba(255, 69, 0, 0.6));
}

@keyframes coinLegendarySpin {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes coinLegendaryPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

@keyframes coinLegendaryFloat {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-20px);
  }
  75% {
    transform: translateY(-20px);
  }
}

@keyframes coinLegendaryGlow {
  0%, 100% {
    filter: 
      drop-shadow(0 0 20px rgba(255, 215, 0, 1))
      drop-shadow(0 0 40px rgba(255, 140, 0, 0.8))
      drop-shadow(0 0 60px rgba(255, 69, 0, 0.6))
      brightness(1.2)
      hue-rotate(0deg);
  }
  50% {
    filter: 
      drop-shadow(0 0 30px rgba(255, 215, 0, 1))
      drop-shadow(0 0 60px rgba(255, 140, 0, 1))
      drop-shadow(0 0 90px rgba(255, 69, 0, 0.8))
      brightness(1.8)
      hue-rotate(15deg);
  }
}

/* Coin claim modal */
.coin-claim-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.coin-claim-modal.show {
  opacity: 1;
}

.coin-claim-content {
  background: var(--parchment-light);
  border: 3px solid var(--parchment-darker);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.coin-claim-modal.show .coin-claim-content {
  transform: scale(1);
}

.coin-claim-icon {
  font-size: 5em;
  margin-bottom: 20px;
  animation: coinClaimBounce 1s ease-in-out infinite;
}

@keyframes coinClaimBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(10deg);
  }
}

.coin-claim-content h2 {
  margin: 0 0 15px 0;
  color: var(--gold);
  font-size: 2em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.coin-claim-amount {
  font-size: 2.5em;
  font-weight: bold;
  color: var(--gold);
  margin: 10px 0;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.coin-claim-tier {
  font-size: 1.2em;
  margin: 10px 0 30px 0;
  font-weight: 600;
  opacity: 0.9;
}

/* Tier-specific modal styling */
.coin-claim-content.legendary {
  background: linear-gradient(135deg, #fff5e6 0%, #ffe4b3 100%);
  border-color: #ff8c00;
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 60px rgba(255, 215, 0, 0.4),
    inset 0 0 40px rgba(255, 215, 0, 0.1);
  animation: legendaryGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
  0%, 100% {
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.3),
      0 0 60px rgba(255, 215, 0, 0.4),
      inset 0 0 40px rgba(255, 215, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 10px 40px rgba(0, 0, 0, 0.3),
      0 0 80px rgba(255, 215, 0, 0.6),
      inset 0 0 60px rgba(255, 215, 0, 0.2);
  }
}

.coin-claim-content.legendary .coin-claim-icon {
  animation: coinClaimBounce 1s ease-in-out infinite,
             legendaryIconGlow 1.5s ease-in-out infinite;
  font-size: 6em;
}

@keyframes legendaryIconGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(255, 215, 0, 1));
  }
}

.coin-claim-content.rare {
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
  border-color: #4169e1;
}

.coin-claim-content.rare .coin-claim-icon {
  filter: drop-shadow(0 0 15px rgba(65, 105, 225, 0.6));
}

.coin-claim-btn {
  font-size: 1.2em;
  padding: 15px 40px;
  margin-top: 10px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .random-coin {
    font-size: 2.5em;
  }
  
  .coin-legendary {
    font-size: 3em;
  }
  
  .coin-claim-content {
    padding: 30px 20px;
    max-width: 90%;
  }
  
  .coin-claim-amount {
    font-size: 2em;
  }
}

/* ============================================
   TREASURE CHEST SPAWNER STYLES
   ============================================ */

/* Base chest styles */
.treasure-chest {
  position: fixed;
  font-size: 4em;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  user-select: none;
}

.treasure-chest:hover {
  transform: scale(1.15);
}

/* Common chest animation */
.chest-common {
  animation: chestBounce 2.5s ease-in-out infinite;
}

@keyframes chestBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

/* Uncommon chest animation */
.chest-uncommon {
  animation: chestShimmer 3s ease-in-out infinite,
             chestFloat 2.5s ease-in-out infinite;
}

@keyframes chestShimmer {
  0%, 100% { filter: drop-shadow(0 4px 8px rgba(30, 255, 0, 0.4)) brightness(1); }
  50% { filter: drop-shadow(0 6px 16px rgba(30, 255, 0, 0.8)) brightness(1.2); }
}

@keyframes chestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}

/* Rare chest animation */
.chest-rare {
  animation: chestSparkle 2s ease-in-out infinite,
             chestRotate 3s linear infinite,
             chestGlow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(0, 112, 221, 0.7));
}

@keyframes chestGlow {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(0, 112, 221, 0.6)) brightness(1); }
  50% { filter: drop-shadow(0 0 30px rgba(0, 112, 221, 1)) brightness(1.3); }
}

/* Legendary chest animation */
.chest-legendary {
  font-size: 4.5em;
  animation: chestLegendarySpin 2s ease-in-out infinite,
             chestLegendaryPulse 2s ease-in-out infinite,
             chestLegendaryFloat 3s ease-in-out infinite,
             chestLegendaryRainbow 4s linear infinite;
  filter: drop-shadow(0 0 30px rgba(255, 128, 0, 1))
          drop-shadow(0 0 50px rgba(255, 215, 0, 0.8))
          drop-shadow(0 0 70px rgba(255, 255, 0, 0.6));
}

@keyframes chestLegendarySpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.1); }
  75% { transform: rotate(15deg) scale(1.1); }
}

@keyframes chestLegendaryPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes chestLegendaryFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-25px); }
}

@keyframes chestLegendaryRainbow {
  0% { filter: hue-rotate(0deg) drop-shadow(0 0 40px currentColor); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 40px currentColor); }
}

/* Chest modal overlay */
.chest-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

/* Chest modal */
.chest-modal {
  background: linear-gradient(135deg, #f5f5dc 0%, #e8dcc0 100%);
  border: 4px solid #8b7355;
  border-radius: 15px;
  padding: 40px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: modalSlideIn 0.4s ease;
  position: relative;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-50px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Modal header */
.chest-modal-header {
  text-align: center;
  margin-bottom: 30px;
}

.chest-modal-icon {
  font-size: 5em;
  margin-bottom: 15px;
  animation: chestOpen 0.6s ease;
}

@keyframes chestOpen {
  0% { transform: scale(0.5) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.chest-modal-header h2 {
  margin: 10px 0;
  font-family: 'SystemEmoji', 'Cinzel', serif;
  font-size: 2em;
}

.chest-modal-header p {
  color: #666;
  font-size: 1.1em;
}

/* Items list */
.chest-modal-items {
  margin: 25px 0;
  max-height: 400px;
  overflow-y: auto;
}

.chest-modal-item {
  display: flex;
  align-items: center;
  padding: 15px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid #d4af37;
  border-radius: 10px;
  transition: all 0.3s ease;
  animation: itemSlideIn 0.4s ease backwards;
}

.chest-modal-item:nth-child(1) { animation-delay: 0.1s; }
.chest-modal-item:nth-child(2) { animation-delay: 0.2s; }
.chest-modal-item:nth-child(3) { animation-delay: 0.3s; }
.chest-modal-item:nth-child(4) { animation-delay: 0.4s; }
.chest-modal-item:nth-child(5) { animation-delay: 0.5s; }

@keyframes itemSlideIn {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.chest-modal-item:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.chest-modal-item .item-icon {
  font-size: 3em;
  margin-right: 20px;
  flex-shrink: 0;
}

.chest-modal-item .item-details {
  flex: 1;
}

.chest-modal-item .item-name {
  font-weight: bold;
  font-size: 1.2em;
  color: #2c1810;
  margin-bottom: 5px;
}

.chest-modal-item .item-description {
  font-size: 0.9em;
  color: #666;
}

/* Claim button */
.chest-claim-btn {
  width: 100%;
  padding: 18px;
  font-size: 1.3em;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.chest-claim-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Close button */
.chest-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2em;
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.chest-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #000;
  transform: rotate(90deg);
}

/* Tier-specific modal styles */
.chest-modal-common {
  border-color: #808080;
}

.chest-modal-uncommon {
  border-color: #1eff00;
  background: linear-gradient(135deg, #f0fff0 0%, #e0f0e0 100%);
}

.chest-modal-rare {
  border-color: #0070dd;
  background: linear-gradient(135deg, #f0f8ff 0%, #e0efff 100%);
  box-shadow: 0 10px 40px rgba(0, 112, 221, 0.4);
}

.chest-modal-legendary {
  border-color: #ff8000;
  background: linear-gradient(135deg, #fff8dc 0%, #ffe4b5 100%);
  box-shadow: 0 10px 40px rgba(255, 128, 0, 0.6);
  animation: modalLegendaryGlow 2s ease-in-out infinite;
}

@keyframes modalLegendaryGlow {
  0%, 100% {
    box-shadow: 0 10px 40px rgba(255, 128, 0, 0.6),
                0 0 60px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 15px 60px rgba(255, 128, 0, 0.9),
                0 0 80px rgba(255, 215, 0, 0.5);
  }
}

/* Chest notifications */
.chest-notification {
  position: fixed;
  top: 100px;
  right: -400px;
  padding: 20px 30px;
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: bold;
  z-index: 10001;
  transition: right 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chest-notification.show {
  right: 20px;
}

.chest-notification-success {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  color: white;
  border: 2px solid #2e7d32;
}

.chest-notification-error {
  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
  color: white;
  border: 2px solid #c62828;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .treasure-chest {
    font-size: 3em;
  }
  
  .chest-legendary {
    font-size: 3.5em;
  }
  
  .chest-modal {
    padding: 25px;
    max-width: 90%;
  }
  
  .chest-modal-icon {
    font-size: 4em;
  }
  
  .chest-modal-header h2 {
    font-size: 1.5em;
  }
  
  .chest-modal-item .item-icon {
    font-size: 2.5em;
    margin-right: 15px;
  }
  
  .chest-claim-btn {
    font-size: 1.1em;
    padding: 15px;
  }
}

/* === Calendar Styles === */
.calendar-container {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: 0;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.calendar-title {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.calendar-nav-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s;
}

.calendar-nav-btn:hover {
  background: var(--primary-dark);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.calendar-weekday {
  text-align: center;
  font-weight: bold;
  padding: var(--spacing-sm);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  min-height: 120px;
  background: var(--parchment-medium);
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
}

.calendar-day:not(.calendar-day-empty):hover {
  background: var(--parchment-dark);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.calendar-day-empty {
  background: transparent;
  border: none;
  cursor: default;
}

.calendar-day-today {
  background: var(--primary-light);
  border-color: var(--primary);
  font-weight: bold;
}

.calendar-day-number {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.calendar-day-dots {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.calendar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.calendar-dot.completed {
  background: var(--success);
}

.calendar-dot.incomplete {
  background: var(--text-muted);
  opacity: 0.4;
}

.calendar-dot.priority-low {
  background: var(--info);
}

.calendar-dot.priority-medium {
  background: var(--warning);
}

.calendar-dot.priority-high {
  background: var(--danger);
}

.calendar-dot.priority-critical {
  background: var(--error);
}

.calendar-more {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Calendar Tooltip */
.calendar-tooltip {
  position: absolute;
  background: var(--parchment-dark);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  min-width: 200px;
  max-width: 300px;
  pointer-events: none;
}

.calendar-tooltip-header {
  font-weight: bold;
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--parchment-darker);
  padding-bottom: var(--spacing-xs);
}

.calendar-tooltip-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.calendar-tooltip-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.9rem;
}

.calendar-tooltip-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
}

.calendar-tooltip-text {
  color: var(--text-primary);
  line-height: 1.3;
}

/* Calendar Day - 100% Complete State */
.calendar-day-complete {
  background: linear-gradient(135deg, #DAA520 0%, #FFD700 50%, #DAA520 100%) !important;
  border-color: var(--gold) !important;
  font-weight: bold;
}

.calendar-day-complete:hover {
  animation: legendary-pulse 2s ease-in-out infinite;
}

/* Enhanced Calendar Tooltip */
.calendar-tooltip {
  position: absolute;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  min-width: 250px;
  max-width: 350px;
  pointer-events: none;
  color: white;
}

.calendar-tooltip-header {
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: var(--spacing-xs);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.calendar-tooltip-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
  color: white;
}

.calendar-tooltip-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-tooltip-progress {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  overflow: hidden;
  margin-top: var(--spacing-xs);
}

.calendar-tooltip-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
  transition: width 0.3s ease;
}

.calendar-tooltip-progress-bar.complete {
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%);
}

.calendar-tooltip.legendary-tooltip {
  animation: legendary-pulse 2s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.4);
}

.calendar-tooltip-list {
  position: fixed;
  background: linear-gradient(135deg, var(--parchment-dark) 0%, var(--ink-darkest) 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.3);
  z-index: 10000;
  min-width: 240px;
  max-width: 320px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.equipment-tooltip.visible {
  opacity: 1;
}

.equipment-tooltip-content {
  padding: var(--spacing-md);
}

.equipment-tooltip-content.legendary-glow {
  animation: legendary-pulse 2s ease-in-out infinite;
  background: radial-gradient(circle at center, rgba(255, 128, 0, 0.1) 0%, transparent 70%);
}

@keyframes legendary-pulse {
  0%, 100% {
    box-shadow: inset 0 0 20px rgba(255, 128, 0, 0.3);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(255, 128, 0, 0.5);
  }
}

.equipment-tooltip-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 0 10px currentColor;
  font-family: var(--font-fantasy);
}

.equipment-tooltip-type {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  text-transform: capitalize;
}

.equipment-tooltip-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.tooltip-stat {
  color: #1eff00;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.equipment-tooltip-footer {
  font-size: 0.75rem;
  color: var(--ink-light);
  font-style: italic;
  text-align: center;
  margin-top: var(--spacing-sm);
}

/* Calendar Modal */
.calendar-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: var(--spacing-lg);
}

.calendar-modal-container {
  background: var(--parchment-light);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.calendar-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
  background: var(--parchment-medium);
}

.calendar-modal-header h2 {
  margin: 0;
  color: var(--text-primary);
}

.calendar-modal-close {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.calendar-modal-close:hover {
  background: var(--parchment-darker);
  color: var(--text-primary);
}

.calendar-modal-body {
  padding: var(--spacing-lg);
}

.calendar-modal-body h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--gold);
}

.calendar-modal-adventures {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.calendar-modal-adventure {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition: all 0.2s;
}

.calendar-modal-adventure:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.calendar-modal-adventure-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.calendar-modal-adventure-header h4 {
  margin: 0;
}

.calendar-modal-adventure-dates {
  margin-top: var(--spacing-sm);
  color: var(--text-muted);
}

/* Enhanced Calendar Modal */
.calendar-modal-adventures-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--parchment-medium);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: var(--spacing-md);
}

.calendar-modal-adventures-header:hover {
  background: var(--parchment-dark);
  transform: translateX(4px);
}

.calendar-modal-adventures-header h3 {
  margin: 0;
}

.expand-icon {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
}

.calendar-modal-adventures-header.expanded .expand-icon {
  transform: rotate(180deg);
}

.calendar-modal-adventures.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.calendar-modal-adventures:not(.collapsed) {
  max-height: 1000px;
  transition: max-height 0.5s ease;
}

.calendar-modal-adventure-progress {
  margin-top: var(--spacing-sm);
}

.quest-count {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: var(--spacing-xs);
}

.progress-bar-container {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #8BC34A 100%);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.calendar-modal-day-progress {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--parchment-dark) 0%, var(--parchment-medium) 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-lg);
}

.calendar-modal-day-progress h3 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--gold);
  text-align: center;
}

.day-progress-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.progress-label {
  color: var(--text-muted);
}

.progress-value {
  font-weight: bold;
  color: var(--text-primary);
}

.fancy-progress-bar {
  height: 30px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}

.fancy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 50%, #81C784 100%);
  transition: width 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
  animation: progress-shimmer 2s infinite linear;
}

.fancy-progress-fill.complete {
  background: linear-gradient(90deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
  animation: legendary-pulse 2s ease-in-out infinite, progress-shimmer 2s infinite linear;
}

@keyframes progress-shimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.progress-percent {
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.calendar-modal-activities {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.calendar-modal-activity {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--parchment-medium);
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-md);
}

.activity-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.activity-text {
  flex: 1;
  color: var(--text-primary);
}

.activity-time {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* === Questline Styles === */
.questline-section {
  background: var(--parchment-light);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.questline-section.questline-complete {
  border-color: var(--success);
  background: linear-gradient(to right, var(--parchment-light), rgba(76, 175, 80, 0.05));
}

.questline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.questline-header:hover .questline-title {
  color: var(--gold-dark);
}

.questline-collapse-icon {
  font-size: 1.2rem;
  margin-right: var(--spacing-sm);
  transition: transform 0.3s;
  display: inline-block;
}

.questline-section.collapsed .questline-collapse-icon {
  transform: rotate(-90deg);
}

.questline-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.questline-title {
  margin: 0 0 var(--spacing-xs) 0;
  color: var(--gold);
  font-size: 1.5rem;
  transition: color 0.2s;
}

.questline-description {
  margin: var(--spacing-xs) 0 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.questline-progress-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.questline-completion {
  font-weight: bold;
  color: var(--text-primary);
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-gold:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.questline-progress-bar {
  height: 8px;
  background: var(--parchment-darker);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.questline-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width 0.3s ease;
}

/* ===================================================================
   DEEP MAGIC ENHANCEMENTS (Phase 2)
   Penn's audit recommendations implemented May 2026
   =================================================================== */

/* ── Enhancement #1: The Prophecy Scroll ────────────────────────── */
.prophecy-scroll {
  background: linear-gradient(135deg, #f4e8d0 0%, #e8d5b7 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-lg) 0;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
}

.prophecy-scroll::before {
  content: '🔮';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  background: var(--parchment-light);
  padding: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.prophecy-title {
  text-align: center;
  font-size: 1.8rem;
  color: var(--gold-dark);
  margin: 0 0 var(--spacing-md) 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  font-style: italic;
}

.prophecy-description {
  font-size: 1.1rem;
  color: var(--ink-dark);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.prophecy-progress {
  margin: var(--spacing-md) 0;
}

.prophecy-progress-bar {
  height: 16px;
  background: var(--parchment-darker);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.prophecy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #ffd700);
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
}

.prophecy-status {
  text-align: center;
  font-size: 1rem;
  color: var(--ink-medium);
  margin-top: var(--spacing-sm);
  font-weight: bold;
}

.sealed-chest {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: linear-gradient(135deg, #8b4513 0%, #6b3410 100%);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-top: var(--spacing-lg);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  animation: chest-pulse 2s ease-in-out infinite;
}

@keyframes chest-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
  }
}

.sealed-chest-icon {
  font-size: 2rem;
  animation: chest-glow 2s ease-in-out infinite;
}

@keyframes chest-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 1));
  }
}

.chest-countdown {
  color: var(--parchment-light);
  font-size: 1.1rem;
  font-weight: bold;
}

.chest-unlock-button {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--ink-dark);
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
  font-size: 1rem;
}

.chest-unlock-button:hover {
  transform: scale(1.05);
}

/* ── Enhancement #4: Avatar Breathing & Reactions ─────────────────── */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.avatar-breathing {
  animation: breathe 4s ease-in-out infinite;
}

.avatar-low-hp {
  animation: breathe 3s ease-in-out infinite;
  filter: saturate(0.8);
}

@keyframes golden-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  }
  50% {
    box-shadow: 0 0 35px rgba(212, 175, 55, 1);
  }
}

.avatar-streak-glow {
  border-radius: 50%;
  animation: golden-pulse 2s ease-in-out infinite;
}

@keyframes avatar-nod {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-10deg);
  }
}

.avatar-nod {
  animation: avatar-nod 600ms ease-out;
}

/* ── Enhancement #5: Critical Quest Tension Arc ───────────────────── */
@keyframes critical-pulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.6);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 68, 68, 1);
  }
}

.critical-task-warning {
  animation: critical-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(135deg, #8b2e1f, #d32f2f) !important;
  color: white !important;
}

.task-card-critical {
  border-color: #ff4444 !important;
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.6);
}

.task-card-urgent-3d {
  border-color: #ffa500 !important;
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
}

.task-card-urgent-1d {
  border-color: #ff6b00 !important;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
}

@keyframes task-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.task-card-overdue {
  border-color: #d32f2f !important;
  box-shadow: 0 0 15px rgba(211, 47, 47, 0.7);
  animation: task-shake 0.5s ease-in-out infinite;
}

/* ── Enhancement #6: The Quest Oracle ─────────────────────────────── */
.oracle-orb {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle at 30% 30%, #ffd700, #d4af37, #8b6914);
  border-radius: 50%;
  border: 2px solid var(--gold);
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.6);
  animation: orb-pulse 2s ease-in-out infinite;
  transition: transform 0.2s;
}

@keyframes orb-pulse {
  0%, 100% {
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.6);
  }
  50% {
    box-shadow: 0 4px 30px rgba(212, 175, 55, 1);
  }
}

.oracle-orb:hover {
  transform: scale(1.1);
}

.oracle-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.3s ease;
}

.oracle-modal.active {
  display: flex;
}

.oracle-content {
  background: linear-gradient(135deg, #2a0845 0%, #1a0530 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xxl);
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 50px rgba(138, 43, 226, 0.5);
  position: relative;
  overflow: hidden;
}

.oracle-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="2" cy="2" r="1" fill="rgba(255,255,255,0.3)"/></svg>') repeat;
  opacity: 0.2;
  pointer-events: none;
}

.oracle-title {
  font-size: 2.5rem;
  color: var(--gold);
  margin: 0 0 var(--spacing-lg) 0;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.8);
  font-family: var(--font-display);
}

.oracle-message {
  color: #e0e0ff;
  font-size: 1.3rem;
  line-height: 1.8;
  margin: var(--spacing-lg) 0;
  font-style: italic;
  min-height: 100px;
  font-family: var(--font-display);
}

.oracle-message.typewriter {
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.oracle-close {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--ink-dark);
  border: none;
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-weight: bold;
  cursor: pointer;
  margin-top: var(--spacing-lg);
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.oracle-close:hover {
  transform: scale(1.05);
}

/* ── Enhancement #7: Streak Aura Progression ──────────────────────── */
/* Day 7: Flame flicker */
.streak-tier-flame .streak-icon {
  animation: flame-flicker 1.5s ease-in-out infinite;
}

@keyframes flame-flicker {
  0%, 100% {
    filter: brightness(1) drop-shadow(0 0 5px rgba(255, 100, 0, 0.6));
  }
  50% {
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 150, 0, 1));
  }
}

/* Day 14: Golden navbar */
.streak-tier-golden .navbar,
.streak-tier-golden header {
  background: linear-gradient(135deg, #c9b18a 0%, #d4af37 50%, #c9b18a 100%) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.5);
}

/* Day 30: Warm sepia filter */
.streak-tier-warm {
  filter: sepia(10%) saturate(1.1);
}

/* Day 60: Particle ring aura around avatar */
.streak-tier-aura .avatar,
.streak-tier-aura .profile-avatar {
  position: relative;
}

.streak-tier-aura .avatar::after,
.streak-tier-aura .profile-avatar::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.5) 45deg,
    transparent 90deg,
    rgba(212, 175, 55, 0.5) 135deg,
    transparent 180deg,
    rgba(212, 175, 55, 0.5) 225deg,
    transparent 270deg,
    rgba(212, 175, 55, 0.5) 315deg,
    transparent 360deg
  );
  animation: aura-rotate 3s linear infinite;
  pointer-events: none;
}

@keyframes aura-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Day 100: Golden footprint trail */
.streak-tier-legend {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="8" fill="rgba(212,175,55,0.5)"/></svg>') 10 10, auto;
}

.footprint-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* ── Enhancement #3: Coin Waterfall (additional styles) ───────────── */
.gold-counter,
.gold-amount,
[data-gold-counter] {
  transition: transform 0.2s ease;
}

/* ── Emoji Fix ────────────────────────────────────────────────────── */
/* Ensure emoji font is prepended to all text elements */
body,
button,
input,
select,
textarea,
.btn,
.modal,
.card {
  font-family: SystemEmoji, var(--font-primary);
}

h1, h2, h3, h4, h5, h6,
.heading {
  font-family: SystemEmoji, var(--font-display);
}

code,
pre,
.monospace {
  font-family: SystemEmoji, var(--font-mono);
}

/* ─────────────────────────────────────────────────────────────────── */

.questline-tasks {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 5000px;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

.questline-section.collapsed .questline-tasks {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.questline-section.collapsed .questline-progress-bar {
  margin-bottom: 0;
}

/* Updated Task Card Styles */
.task-card {
  background: var(--parchment-medium);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.task-card:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.task-card.completed {
  opacity: 0.7;
  background: var(--parchment-light);
}

.task-header {
  flex: 1;
  min-width: 0;
}

.task-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.task-title.completed {
  text-decoration: line-through;
  color: var(--text-muted);
}

.task-meta {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.task-quick-actions {
  display: flex;
  gap: var(--spacing-xs);
}

.task-completed-badge {
  color: var(--success);
  font-weight: bold;
}

/* Task Modal */
.task-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: var(--spacing-lg);
}

.task-modal-container {
  background: var(--parchment-light);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--ink-dark);
}

.task-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
  background: var(--parchment-medium);
}

.task-modal-header h2 {
  margin: 0;
  color: var(--gold);
}

.task-modal-close {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.task-modal-close:hover {
  background: var(--parchment-darker);
  color: var(--text-primary);
}

.task-modal-body {
  padding: var(--spacing-lg);
}

.task-modal-section {
  margin-bottom: var(--spacing-lg);
}

.task-modal-section h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--text-primary);
}

.task-modal-badges {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.task-questline-badge {
  background: var(--info);
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: bold;
}

.task-modal-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.task-modal-detail-item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm);
  background: var(--parchment-medium);
  border-radius: var(--radius-sm);
}

.detail-label {
  font-weight: bold;
  color: var(--text-muted);
}

.task-modal-rewards {
  display: flex;
  gap: var(--spacing-md);
}

.reward-badge {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: white;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-weight: bold;
}

.task-modal-footer {
  padding: var(--spacing-lg);
  border-top: 2px solid var(--parchment-darker);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

.task-completed-large {
  color: var(--success);
  font-size: 1.2rem;
  font-weight: bold;
}

/* Wizard Modal (reuses task-modal styles) */
.wizard-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: var(--spacing-lg);
}

.wizard-modal-container {
  background: var(--parchment-light);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.wizard-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid var(--parchment-darker);
  background: var(--parchment-medium);
  flex-shrink: 0;
}

.wizard-modal-header h2 {
  margin: 0;
  color: var(--gold);
}

.wizard-modal-close {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.wizard-modal-close:hover {
  background: var(--parchment-darker);
  color: var(--text-primary);
}

.wizard-modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

.wizard-modal-footer {
  padding: var(--spacing-lg);
  border-top: 2px solid var(--parchment-darker);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  flex-shrink: 0;
}

.quest-checkbox-item label:hover {
  border-color: var(--gold);
  transform: translateX(2px);
}

/* Questline Reward Notification */
.questline-reward-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: white;
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 10001;
  animation: slideIn 0.3s ease-out;
  max-width: 400px;
}

.reward-notification-content h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.5rem;
}

.questline-name {
  font-size: 1.1rem;
  margin: 0 0 var(--spacing-md) 0;
  opacity: 0.9;
}

.reward-items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.reward-item {
  background: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-weight: bold;
}

.reward-tier-common { color: #fff; }
.reward-tier-uncommon { color: #4caf50; }
.reward-tier-rare { color: #2196f3; }

/* Quest Objectives Styling */
.objectives-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.objective-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--parchment-light);
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
}

.objective-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.objective-text {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--parchment-darker);
  border-radius: var(--radius-sm);
  background: white;
  font-family: inherit;
}

/* === Bounty Card Styles === */
.bounties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.bounty-card {
  background: linear-gradient(135deg, var(--parchment-light) 0%, var(--parchment-medium) 100%);
  border: 2px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.bounty-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.bounty-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--parchment-darker);
}

.bounty-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink-dark);
}

.bounty-status {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-available { background: var(--success); color: white; }
.status-claimed   { background: var(--warning); color: white; }
.status-completed { background: var(--info);    color: white; }

.bounty-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.bounty-description {
  color: var(--ink-medium);
  font-size: 0.9rem;
  margin: 0;
}

.bounty-objectives {
  font-size: 0.85rem;
  color: var(--ink-dark);
}

.bounty-objectives ul {
  margin: var(--spacing-xs) 0 0 var(--spacing-md);
  padding: 0;
}

.bounty-meta {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-medium);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bounty-rewards {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--parchment-darker);
}

.bounty-rewards .reward-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--gold-dark);
}

.bounty-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.bounty-actions .btn-block {
  width: 100%;
}
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-remove-objective:hover {
  background: #c62828;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.9rem;
}

/* Equipped item slots - hover and click effects */
.slot-item.equipped {
  color: var(--gold);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.slot-item.equipped:hover {
  background: var(--parchment-darker);
  color: var(--gold-dark);
  transform: translateX(2px);
}

/* === Responsive Styles for New Features === */

/* Bounty Board Responsive */
@media (max-width: 1024px) {
  .bounty-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .tabs {
    flex-direction: column;
  }
  
  .tab-button {
    width: 100%;
  }
  
  .bounty-grid {
    grid-template-columns: 1fr;
  }
  
  .bounty-card {
    padding: 1rem;
  }
  
  .modal-content {
    max-width: 95%;
    padding: 1.5rem;
    margin: 1rem;
  }
  
  .modal-header h2 {
    font-size: 1.3rem;
  }
  
  .objectives-list {
    max-height: 200px;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .btn-group .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.2rem;
  }
  
  .bounty-card-header h3 {
    font-size: 1rem;
  }
  
  .bounty-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .modal-content {
    padding: 1rem;
  }
  
  .form-group input,
  .form-group textarea,
  .form-group select {
    font-size: 1rem;
  }
}

/* Options Page Responsive */
@media (max-width: 768px) {
  .settings-card {
    padding: 1rem;
  }
  
  .theme-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .theme-option {
    padding: 0.75rem;
  }
  
  .settings-group {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .danger-zone-actions {
    flex-direction: column;
  }
  
  .danger-zone-actions .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .theme-grid {
    grid-template-columns: 1fr;
  }
  
  .settings-card h2 {
    font-size: 1.2rem;
  }
  
  .settings-card h3 {
    font-size: 1rem;
  }
}

/* Admin Panel Responsive */
@media (max-width: 1024px) {
  .admin-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .sound-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 1.5rem 1rem;
  }
  
  .admin-tab {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .admin-panel {
    padding: 1rem;
  }
  
  .sound-grid {
    grid-template-columns: 1fr;
  }
  
  .items-table {
    font-size: 0.85rem;
  }
  
  .items-table th,
  .items-table td {
    padding: 0.5rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-card {
    padding: 1rem;
  }
  
  .stat-card .stat-value {
    font-size: 1.5rem;
  }
  
  /* Hide some table columns on mobile */
  .items-table th:nth-child(4),
  .items-table td:nth-child(4),
  .items-table th:nth-child(5),
  .items-table td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .admin-header h1 {
    font-size: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .items-table {
    font-size: 0.75rem;
  }
  
  /* Hide more columns on very small screens */
  .items-table th:nth-child(3),
  .items-table td:nth-child(3),
  .items-table th:nth-child(6),
  .items-table td:nth-child(6) {
    display: none;
  }
}

/* General Mobile Navigation Improvements */
@media (max-width: 768px) {
  .navbar-nav {
    gap: 0.5rem;
  }
  
  .navbar-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
  }
  
  .bottom-nav-link {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  .navbar-brand {
    font-size: 1rem;
  }
  
  .navbar-link {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }
  
  .navbar-stat {
    font-size: 0.85rem;
    gap: 0.25rem;
  }
}

/* ===================================
   TEMPLATE SYSTEM STYLES
   =================================== */

.template-section-heading {
  color: var(--gold-dark);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem var(--spacing-md) 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--parchment-darker);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

.template-card {
  background: var(--parchment-medium);
  border: 3px solid var(--parchment-darker);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border-color: var(--gold-dark);
}

.template-card.selected {
  border-color: var(--gold-bright);
  box-shadow: 0 0 20px rgba(218, 165, 32, 0.5);
  background: linear-gradient(135deg, var(--parchment-medium) 0%, rgba(218, 165, 32, 0.1) 100%);
}

.template-icon {
  font-size: 3.5rem;
  margin-bottom: var(--spacing-md);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.template-title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--ink-dark);
  margin-bottom: var(--spacing-sm);
}

.template-description {
  font-size: 0.9rem;
  color: var(--ink-medium);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
}

.template-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: bold;
  margin-top: var(--spacing-sm);
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-bright) 100%);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.template-creator {
  font-size: 0.8rem;
  color: var(--ink-medium);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

.template-save-section {
  background: var(--parchment-light);
  border: 2px dashed var(--parchment-darker);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.template-save-section label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: normal;
}

.template-save-section input[type="checkbox"] {
  margin-right: var(--spacing-sm);
  width: auto;
  cursor: pointer;
}

@media (max-width: 768px) {
  .template-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEXTURE SYSTEM — Phase E-3 / E-4
   Stone wall body + parchment card overlays
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body stone wall: readable headings over dark stone */
body {
  color: var(--parchment-light);
}

/* Parchment texture for adventure cards */
.adventure-card {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f5e5bc'/><line x1='0' y1='15' x2='120' y2='15' stroke='%23c9a052' stroke-width='0.5' opacity='0.25'/><line x1='0' y1='30' x2='120' y2='30' stroke='%23c9a052' stroke-width='0.4' opacity='0.18'/><line x1='0' y1='45' x2='120' y2='45' stroke='%23c9a052' stroke-width='0.5' opacity='0.22'/><line x1='30' y1='0' x2='30' y2='60' stroke='%23c9a052' stroke-width='0.3' opacity='0.1'/><line x1='90' y1='0' x2='90' y2='60' stroke='%23c9a052' stroke-width='0.3' opacity='0.08'/></svg>");
  background-size: 120px 60px;
  background-repeat: repeat;
  color: var(--ink-dark);
}

.adventure-card-header {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f5e5bc'/><line x1='0' y1='15' x2='120' y2='15' stroke='%23c9a052' stroke-width='0.5' opacity='0.25'/><line x1='0' y1='30' x2='120' y2='30' stroke='%23c9a052' stroke-width='0.4' opacity='0.18'/><line x1='0' y1='45' x2='120' y2='45' stroke='%23c9a052' stroke-width='0.5' opacity='0.22'/></svg>");
  background-size: 120px 60px;
  background-repeat: repeat;
  color: var(--ink-dark);
}

/* Parchment texture for quest cards */
.quest-card {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f5e5bc'/><line x1='0' y1='15' x2='120' y2='15' stroke='%23c9a052' stroke-width='0.5' opacity='0.25'/><line x1='0' y1='30' x2='120' y2='30' stroke='%23c9a052' stroke-width='0.4' opacity='0.18'/><line x1='0' y1='45' x2='120' y2='45' stroke='%23c9a052' stroke-width='0.5' opacity='0.22'/><line x1='30' y1='0' x2='30' y2='60' stroke='%23c9a052' stroke-width='0.3' opacity='0.1'/><line x1='90' y1='0' x2='90' y2='60' stroke='%23c9a052' stroke-width='0.3' opacity='0.08'/></svg>");
  background-size: 120px 60px;
  background-repeat: repeat;
  color: var(--ink-dark);
}

/* Quest cards with special states keep their own background (higher specificity) */
.quest-card.completed,
.quest-card.claimed {
  background-image: none;
}

/* Parchment texture for general .card elements */
.card {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><rect width='120' height='60' fill='%23f2e0b0'/><line x1='0' y1='12' x2='120' y2='12' stroke='%23b8924a' stroke-width='0.4' opacity='0.22'/><line x1='0' y1='24' x2='120' y2='24' stroke='%23b8924a' stroke-width='0.5' opacity='0.15'/><line x1='0' y1='36' x2='120' y2='36' stroke='%23b8924a' stroke-width='0.4' opacity='0.2'/><line x1='0' y1='48' x2='120' y2='48' stroke='%23b8924a' stroke-width='0.4' opacity='0.18'/></svg>");
  background-size: 120px 60px;
  background-repeat: repeat;
  color: var(--ink-dark);
}

/* Dark themes: disable parchment texture on cards, restore solid backgrounds */
[data-theme="dungeon"] .adventure-card,
[data-theme="dungeon"] .adventure-card-header,
[data-theme="dungeon"] .quest-card,
[data-theme="dungeon"] .card,
[data-theme="halloween"] .adventure-card,
[data-theme="halloween"] .adventure-card-header,
[data-theme="halloween"] .quest-card,
[data-theme="halloween"] .card {
  background-image: none;
  color: var(--ink-dark);
}

/* Dark themes: restore lighter stone body */
[data-theme="dungeon"] body {
  background-color: #0e0e0e;
}

/* Icon browser page */
.icon-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
}
.icon-browser-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--parchment-darker);
  border-radius: 6px;
  cursor: pointer;
  background: var(--parchment-light);
  transition: all 0.15s ease;
  overflow: hidden;
}
.icon-browser-cell:hover {
  border-color: var(--gold);
  background: var(--parchment-medium);
  transform: scale(1.05);
}
.icon-browser-cell img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.icon-browser-cell span {
  font-size: 9px;
  color: var(--ink-dark);
  text-align: center;
  word-break: break-all;
  line-height: 1.2;
  max-width: 72px;
}

/* ===================================
   HLIWIT — Time Challenge Panel
   =================================== */

.hliwit-panel {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 2px solid #6366f1;
  border-radius: var(--radius-lg);
  color: #e0e7ff;
}

.hliwit-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hliwit-icon { font-size: 1.3rem; }

.hliwit-title { flex: 1; color: #c7d2fe; }

.hliwit-challenge {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fcd34d;
}

.hliwit-timer-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.hliwit-label { color: #a5b4fc; }

.hliwit-elapsed {
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.hliwit-actions { display: flex; align-items: center; gap: 1rem; }

.hliwit-start-btn {
  background: #4f46e5;
  border-color: #6366f1;
  font-size: 1rem;
  padding: 0.5rem 1.25rem;
}

.hliwit-start-btn:hover { background: #4338ca; }

.hliwit-running-label {
  color: #a5b4fc;
  font-size: 0.9rem;
  font-style: italic;
}

/* HLIWIT completion modal */
.hliwit-tier-badge {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.hliwit-flavor-text {
  color: var(--ink-medium);
  font-style: italic;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

.hliwit-result-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
  background: var(--parchment-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}

.hliwit-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
}




















/* ================================================================
   DEEP MAGIC ENHANCEMENTS
   All CSS for Penn's deep magic features (Enhancements #1-#8)
   ================================================================ */

/* Enhancement #1: The Prophecy Scroll ─────────────────────────── */
.prophecy-scroll {
  background: linear-gradient(135deg, #2a1810 0%, #3a2820 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: scroll-appear 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes scroll-appear {
  from {
    transform: translateY(-30px) scale(0.9);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.scroll-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.scroll-icon {
  font-size: 2rem;
}

.scroll-header h3 {
  color: var(--gold);
  margin: 0;
  font-family: var(--font-display);
}

.scroll-content {
  color: var(--parchment-light);
}

.prophecy-text {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.prophecy-progress {
  margin-top: var(--spacing-md);
}

.progress-bar {
  width: 100%;
  height: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  background-size: 200% 100%;
}

/* ───────────────────────────────────────────────────────────────
   Adventure Card Progress Bars & Enhancements
   ─────────────────────────────────────────────────────────────── */

.adventure-progress-container {
  margin-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adventure-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--parchment-dark);
}

.adventure-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-dark));
  background-size: 200% 100%;
  animation: progress-pulse 2s infinite;
  transition: width 0.3s ease;
}

@keyframes progress-pulse {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 100% 0; }
}

.adventure-progress-text {
  font-size: 0.75rem;
  color: var(--parchment-dark);
  text-align: right;
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────
   Active Quests Section
   ─────────────────────────────────────────────────────────────── */

.dash-quests-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.dash-quests-section h2 {
  margin: 0;
  color: var(--gold);
  font-size: 1.3rem;
}

.dash-quests-desc {
  margin: 0;
  font-size: 0.85rem;
  color: var(--parchment-dark);
  font-style: italic;
}

.quests-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* ───────────────────────────────────────────────────────────────
   Quest Card Styling
   ─────────────────────────────────────────────────────────────── */

.quest-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 4px solid var(--gold);
}

.quest-card:hover {
  background: rgba(212, 175, 55, 0.1);
  transform: translateX(4px);
}

.quest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--parchment-dark);
}

.quest-card-header h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--gold);
}

.quest-status-emoji {
  font-size: 1.2rem;
}

.quest-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quest-from-adventure {
  font-size: 0.8rem;
  color: var(--parchment-dark);
  font-weight: 600;
}

.quest-description {
  font-size: 0.8rem;
  color: var(--parchment-light);
  margin: 4px 0;
  line-height: 1.3;
}

.quest-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(212, 175, 55, 0.2);
  color: var(--gold);
  border-radius: 3px;
  font-weight: 600;
  width: fit-content;
}

/* ───────────────────────────────────────────────────────────────
   Arena Promo Widget
   ─────────────────────────────────────────────────────────────── */

.arena-promo-widget {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.05));
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  text-align: center;
}

.arena-promo-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.arena-promo-icon {
  font-size: 1.5rem;
}

.arena-promo-header h3 {
  margin: 0;
  color: var(--gold);
  font-size: 1.1rem;
}

.arena-promo-desc {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 0.9rem;
  color: var(--parchment-light);
}

.btn-block {
  width: 100%;
}
  animation: progress-shimmer 2s ease-in-out infinite;
  transition: width 0.5s ease;
}

@keyframes progress-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.progress-text {
  text-align: center;
  margin-top: var(--spacing-sm);
  font-weight: bold;
  color: var(--gold);
}

.prophecy-chest {
  background: linear-gradient(135deg, #2a1810 0%, #3a2820 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prophecy-chest.chest-locked {
  cursor: not-allowed;
  opacity: 0.7;
}

.prophecy-chest.chest-ready {
  animation: chest-pulse 1.5s ease-in-out infinite;
}

@keyframes chest-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.8);
  }
}

.chest-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  animation: chest-bob 2s ease-in-out infinite;
}

@keyframes chest-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.prophecy-chest h3 {
  color: var(--gold);
  margin: 0 0 var(--spacing-sm) 0;
}

.chest-ready-text {
  color: var(--parchment-light);
  font-size: 1.1rem;
  font-weight: bold;
}

.chest-countdown {
  color: var(--parchment-light);
  font-size: 1rem;
}

.prophecy-rewards-overlay {
  animation: fadeIn 0.3s ease;
}

.prophecy-rewards-modal {
  background: linear-gradient(135deg, #2a1810 0%, #1a0f0a 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  max-width: 500px;
  width: 90%;
  animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.rewards-header h2 {
  color: var(--gold);
  text-align: center;
  margin: 0 0 var(--spacing-lg) 0;
}

.rewards-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.reward-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.reward-icon {
  font-size: 2rem;
}

.reward-text {
  font-size: 1.2rem;
  color: var(--parchment-light);
}

.reward-text.rarity-legendary {
  color: var(--legendary);
  font-weight: bold;
}

.reward-text.rarity-epic {
  color: var(--epic);
  font-weight: bold;
}

.reward-text.rarity-rare {
  color: var(--rare);
  font-weight: bold;
}

/* Enhancement #4: Avatar Breathing & Reactions ──────────────────── */
.avatar-breathing {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.02);
  }
}

.avatar-low-hp {
  animation: breathe-labored 2s ease-in-out infinite;
  filter: saturate(0.8);
}

@keyframes breathe-labored {
  0%, 100% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.01);
  }
}

.avatar-high-streak {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  animation: breathe 4s ease-in-out infinite, golden-glow 2s ease-in-out infinite;
}

@keyframes golden-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.9);
  }
}

.avatar-nod {
  animation: avatarNod 600ms ease-out;
}

@keyframes avatarNod {
  0%, 100% {
    transform: rotateX(0deg);
  }
  50% {
    transform: rotateX(-10deg);
  }
}

.avatar-blink {
  animation: avatarBlink 400ms ease-out;
}

@keyframes avatarBlink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Enhancement #5: Critical Quest Tension Arc ────────────────────── */
.task-card.critical-priority,
.task-card.high-priority {
  animation: redPulse 2s ease-in-out infinite;
}

@keyframes redPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.3);
    border-color: rgba(255, 0, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    border-color: rgba(255, 0, 0, 1);
  }
}

.task-card.overdue {
  animation: redPulse 2s ease-in-out infinite, shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}

.create-task-btn.critical-prompt {
  animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
}

/* Enhancement #6: The Quest Oracle ──────────────────────────────── */
.oracle-orb {
  position: fixed;
  top: 80px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d4af37 0%, #f0d07c 50%, #d4af37 100%);
  border: 3px solid rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  z-index: 900;
  transition: all 0.3s ease;
  animation: orb-pulse 2s ease-in-out infinite;
}

@keyframes orb-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.9);
  }
}

.oracle-orb:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 0 35px rgba(212, 175, 55, 1) !important;
}

.oracle-orb .orb-glow {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.4), transparent);
  animation: glow-expand 2s ease-in-out infinite;
}

@keyframes glow-expand {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

.oracle-modal-overlay {
  animation: fadeIn 0.3s ease;
}

.oracle-modal {
  background: linear-gradient(135deg, #1a0f0a 0%, #2a1035 100%);
  border: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
  overflow: hidden;
}

.oracle-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="50" cy="30" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="80" cy="60" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="30" cy="80" r="1" fill="rgba(255,255,255,0.2)"/><circle cx="70" cy="20" r="1" fill="rgba(255,255,255,0.2)"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

.oracle-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 2px solid rgba(212, 175, 55, 0.3);
  position: relative;
  z-index: 1;
}

.oracle-modal-header h2 {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
}

.oracle-close-btn {
  background: transparent;
  border: none;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}

.oracle-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--gold);
}

.oracle-modal-body {
  padding: var(--spacing-xl);
  position: relative;
  z-index: 1;
}

.oracle-loading {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.oracle-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(212, 175, 55, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  margin: 0 auto var(--spacing-lg) auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.oracle-intro {
  color: var(--parchment-light);
  font-size: 1.2rem;
  font-style: italic;
}

.typewriter {
  overflow: hidden;
  border-right: 0.15em solid var(--gold);
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.05em;
  animation: typing 2s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--gold);
  }
}

.oracle-wisdom {
  text-align: center;
  padding: var(--spacing-lg) 0;
}

.wisdom-icon {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  animation: wisdom-glow 2s ease-in-out infinite;
}

@keyframes wisdom-glow {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 1));
  }
}

.wisdom-title {
  color: var(--parchment-light);
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
}

.wisdom-title.priority-high {
  color: var(--danger);
}

.wisdom-title.priority-medium {
  color: var(--gold);
}

.wisdom-reasoning {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.oracle-action-btn {
  margin-top: var(--spacing-md);
}

.oracle-error {
  color: var(--parchment-light);
  text-align: center;
  padding: var(--spacing-lg);
  font-size: 1.1rem;
}

/* Enhancement #8: Anniversary Letter ────────────────────────────── */
.anniversary-letter-overlay {
  animation: fadeIn 0.5s ease;
}

.anniversary-letter {
  background: linear-gradient(135deg, #f4e8d0 0%, #e8d5b7 100%);
  background-image: 
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><text x="50%" y="50%" text-anchor="middle" fill="rgba(44,24,16,0.05)" font-size="120" font-family="serif">✉</text></svg>'),
    linear-gradient(135deg, #f4e8d0 0%, #e8d5b7 100%);
  background-size: cover, 100%;
  border: 5px double var(--gold);
  border-radius: var(--radius-lg);
  max-width: 700px;
  width: 90%;
  padding: var(--spacing-xxl);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  animation: letter-unfurl 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}

@keyframes letter-unfurl {
  0% {
    transform: scale(0.3) rotateX(90deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotateX(0);
    opacity: 1;
  }
}

.anniversary-letter::before {
  content: '🏆';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.letter-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--gold);
  padding-bottom: var(--spacing-lg);
}

.letter-header h2 {
  font-family: 'Cinzel', serif;
  color: var(--ink-dark);
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 2.5rem;
}

.letter-header p {
  color: var(--ink-medium);
  font-style: italic;
  font-size: 1.1rem;
}

.letter-body {
  color: var(--ink-dark);
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: var(--spacing-xl);
  text-align: justify;
}

.letter-body p {
  margin-bottom: var(--spacing-md);
}

.letter-stats {
  background: rgba(212, 175, 55, 0.1);
  border: 2px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px dotted var(--parchment-darker);
}

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

.stat-label {
  font-weight: bold;
  color: var(--ink-medium);
}

.stat-value {
  color: var(--gold-dark);
  font-weight: bold;
}

.legendary-item-reveal {
  background: linear-gradient(135deg, #2a1810 0%, #1a0f0a 100%);
  border: 3px solid var(--legendary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  text-align: center;
  animation: item-reveal 0.8s ease-out 0.5s both;
}

@keyframes item-reveal {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.item-icon-large {
  font-size: 4rem;
  margin-bottom: var(--spacing-md);
  filter: drop-shadow(0 0 15px rgba(255, 128, 0, 0.8));
  animation: legendary-glow 2s ease-in-out infinite;
}

@keyframes legendary-glow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(255, 128, 0, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(255, 128, 0, 1));
  }
}

.legendary-item-reveal h3 {
  color: var(--legendary);
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.8rem;
}

.item-description {
  color: var(--parchment-light);
  font-style: italic;
  margin-bottom: var(--spacing-md);
}

.item-bonus {
  color: var(--gold);
  font-weight: bold;
  font-size: 1.1rem;
}

.letter-footer {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.wax-seal {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: var(--danger);
  border-radius: 50%;
  position: relative;
  box-shadow: 0 4px 12px rgba(139, 46, 31, 0.6);
}

.wax-seal::before {
  content: 'Q';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: bold;
}

/* Misdirection Features ──────────────────────────────────────────── */

/* XP Bar Lie: Tension slowdown at 95%+ */
.xp-bar.near-level-up .xp-fill {
  transition: width 1s ease !important; /* Slower fill */
}

.xp-bar.level-burst .xp-fill {
  animation: xp-burst 300ms ease-out;
}

@keyframes xp-burst {
  0% {
    width: 100%;
  }
  50% {
    width: 110%; /* Overshoot */
  }
  100% {
    width: 0%;
  }
}

/* Hidden Luck Stat: Lucky roll indicators */
.luck-bonus {
  display: inline-block;
  animation: luck-shimmer 0.5s ease-out;
  color: #4caf50;
}

@keyframes luck-shimmer {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-5px);
  }
}

.critical-bonus {
  display: inline-block;
  animation: critical-shine 0.8s ease-out;
  color: var(--legendary);
  font-weight: bold;
}

@keyframes critical-shine {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.5);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* Fake Loading: Reward spinner with golden sparkles */
.loading-spinner.reward-loading::after {
  content: '✨';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  animation: sparkle-spin 1s linear infinite;
}

@keyframes sparkle-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Cursor trail (streak 100+) canvas overlay */
#streakCursorTrail {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* General utility animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ================================================================
   END DEEP MAGIC ENHANCEMENTS
   ================================================================ */

/* ================================================================
   WoW ICON SYSTEM
   ================================================================ */

/* Base icon image */
.wow-icon {
  display: inline-block;
  border-radius: 4px;
  border: 2px solid #888;
  object-fit: cover;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Size variants */
.wow-icon-sm  { width: 24px;  height: 24px;  border-width: 1px; }
.wow-icon-md  { width: 40px;  height: 40px;  border-width: 2px; }
.wow-icon-lg  { width: 56px;  height: 56px;  border-width: 2px; }
.wow-icon-xl  { width: 72px;  height: 72px;  border-width: 3px; }

/* Rarity glow borders (extends existing .rarity-* vars) */
.wow-icon.rarity-common    { border-color: var(--common);    box-shadow: 0 0 4px var(--common); }
.wow-icon.rarity-uncommon  { border-color: var(--uncommon);  box-shadow: 0 0 6px var(--uncommon); }
.wow-icon.rarity-rare      { border-color: var(--rare);      box-shadow: 0 0 8px var(--rare); }
.wow-icon.rarity-epic      { border-color: var(--epic);      box-shadow: 0 0 10px var(--epic); }
.wow-icon.rarity-legendary {
  border-color: var(--legendary);
  box-shadow: 0 0 12px var(--legendary), 0 0 24px rgba(255,128,0,0.4);
  animation: legendary-pulse 2s ease-in-out infinite;
}

@keyframes legendary-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--legendary), 0 0 24px rgba(255,128,0,0.4); }
  50%       { box-shadow: 0 0 20px var(--legendary), 0 0 40px rgba(255,128,0,0.6); }
}

/* Item card with icon layout */
.item-card-icon-wrap {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Attribute row with icon */
.attr-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.attr-row .wow-icon { margin-right: 4px; }

/* Quest icon inline */
.quest-icon { margin-right: 6px; vertical-align: middle; }

/* Empty slot placeholder */
.slot-empty-icon {
  width: 40px;
  height: 40px;
  border: 2px dashed #666;
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 18px;
}

/* ================================================================
   END WoW ICON SYSTEM
   ================================================================ */

/* ================================================================
   PAPER DOLL — Inventory equip UI
   ================================================================ */

.paper-doll {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-md) 0;
  flex-wrap: wrap;
}

.paper-doll-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.paper-doll-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS character silhouette */
.paper-doll-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0.35;
  pointer-events: none;
}
.figure-head {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink-dark);
  border: 2px solid var(--ink-dark);
}
.figure-torso {
  width: 28px;
  height: 46px;
  background: var(--ink-dark);
  border-radius: 2px 2px 0 0;
  margin-top: 3px;
}
.figure-legs {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}
.figure-leg {
  width: 12px;
  height: 36px;
  background: var(--ink-dark);
  border-radius: 0 0 4px 4px;
}

/* Individual slot tiles */
.paper-doll-slot {
  width: 76px;
  min-height: 76px;
  border: 2px dashed rgba(var(--ink-dark-rgb, 44,24,16), 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 3px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
  position: relative;
  text-align: center;
  user-select: none;
}
.paper-doll-slot:hover {
  border-color: var(--gold);
  background: rgba(200, 168, 75, 0.07);
  transform: translateY(-1px);
}
.paper-doll-slot.filled {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(200, 168, 75, 0.1);
}
.paper-doll-slot.drag-over {
  border-color: #4caf50;
  border-style: solid;
  background: rgba(76, 175, 80, 0.15);
  transform: scale(1.04);
}
.pd-slot-label {
  font-size: 0.58rem;
  color: var(--ink-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 2px;
}
.pd-slot-icon {
  font-size: 1.7rem;
  line-height: 1;
}
.pd-slot-empty {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.3;
}
.pd-slot-item-name {
  font-size: 0.62rem;
  color: var(--ink-dark);
  font-weight: 700;
  margin-top: 3px;
  word-break: break-word;
  line-height: 1.2;
}

/* Unequip ✕ button in top-right of filled slot */
.pd-unequip-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c62828;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: background 0.15s;
}
.pd-unequip-btn:hover {
  background: #b71c1c;
}

/* Draggable inventory items */
.inventory-item[draggable="true"] {
  cursor: grab;
}
.inventory-item[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.75;
}
.inventory-item.dragging {
  opacity: 0.5;
}

/* Inventory item cards (shared base) */
.inventory-item {
  border: 2px solid var(--parchment-darker);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
  text-align: center;
  background: var(--parchment-lighter, #fdf6e3);
  transition: border-color 0.2s, transform 0.1s;
  cursor: pointer;
}
.inventory-item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--spacing-sm);
}
.item-icon-small {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.item-name-small {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-dark);
  margin-bottom: 2px;
  line-height: 1.2;
}
.item-stats-small {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* ================================================================
   END PAPER DOLL
   ================================================================ */

/* ================================================================
   INVENTORY LAYOUT — Paper Doll (2/3) + Backpack (1/3)
   ================================================================ */
.inventory-main {
  display: flex;
  gap: var(--spacing-lg, 1.5rem);
  align-items: flex-start;
}
.inventory-paper-doll {
  flex: 2;
  min-width: 0;
}
.inventory-backpack {
  flex: 1;
  min-width: 0;
}
.inventory-backpack .items-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.inventory-backpack .inventory-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem);
  border: 1px solid var(--ink-dark, #333);
  border-radius: 6px;
  cursor: grab;
  background: var(--parchment-light, #f9f3e8);
}
.inventory-backpack .inventory-item:hover {
  border-color: var(--gold, #c9a227);
  background: var(--parchment-darker, #f0e8d0);
}
.inventory-backpack .inventory-item .item-icon-small {
  font-size: 1.6rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.inventory-backpack .inventory-item .item-name-small {
  font-weight: 600;
  font-size: 0.85rem;
  flex: 1;
}
.inventory-backpack .inventory-item .item-stats-small {
  font-size: 0.72rem;
  color: var(--text-muted, #666);
}
.inventory-backpack .inventory-item .btn {
  display: none;
}
.inventory-backpack .filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.inventory-backpack .filter-tab {
  font-size: 0.75rem;
  padding: 3px 8px;
}
@media (max-width: 768px) {
  .inventory-main {
    flex-direction: column;
  }
  .inventory-paper-doll,
  .inventory-backpack {
    width: 100%;
  }
  .inventory-backpack .items-grid {
    max-height: 260px;
  }
}
/* ================================================================
   END INVENTORY LAYOUT
   ================================================================ */

/* ================================================================
   PENN AUDIT FIXES � June 2026
   All overrides are additive; source rules above remain intact.
   ================================================================ */

/* -- A-1: Missing CSS variables (fixes broken layouts on 5+ pages) -- */
:root {
  --text-muted:       #7a6040;
  --text-primary:     var(--ink-dark);
  --parchment-lighter:#fdf6e3;
  --primary:          #b8941f;
  --border-radius:    8px;
  --wood-dark:        #6b4423;
  --accent-color:     var(--gold);
  --gold-light:       #e8ca5a;
  --surface-alt:      rgba(0,0,0,0.25);
}

/* -- F-1: Navbar gradient � remove the muddy tan bottom band -- */
.navbar {
  background: linear-gradient(180deg, #2c1810 0%, #3d241a 100%);
}

/* -- B-1: Navbar stats � collapse into a single readable pill -- */
.navbar-stats {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.82rem;
}
.navbar-stat { padding: 0 6px; }
.navbar-stat + .navbar-stat { border-left: 1px solid rgba(212,175,55,0.2); }

/* -- A-3: Hide navbar stats entirely on mobile � 9px text is illegible -- */
@media (max-width: 768px) {
  .navbar-stats { display: none; }
  html { font-size: 15px; }
}

/* -- B-1 tablet: tighten menu padding -- */
@media (max-width: 1024px) {
  .navbar-menu { gap: var(--spacing-sm); }
  .navbar-menu a { padding: var(--spacing-xs) var(--spacing-sm); font-size: 0.875rem; }
}

/* -- QW-3 + B-2: Bottom nav � lighter, frosted, smaller border -- */
.bottom-navbar {
  background: rgba(22,14,8,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(212,175,55,0.3);
  padding: 6px 0;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.4);
}
.bottom-nav-icon  { font-size: 1.3rem; }
.bottom-nav-label { font-size: 0.72rem; }

/* Remove confusing border-top on active item; use pill highlight instead */
.bottom-nav-item[aria-current="page"] {
  border-top: none;
  border-radius: var(--radius-sm);
}
.bottom-nav-item[aria-current="page"] .bottom-nav-label { font-weight: 700; }

/* Tap feedback */
.bottom-nav-item:active {
  transform: scale(0.88);
  transition: transform 80ms ease-out;
}

/* Fix More-drawer position to match new nav height */
.bottom-nav-more-panel { bottom: 52px; }

/* -- A-4: Hide nav labels at 480px � 7.7px is not readable -- */
@media (max-width: 480px) {
  .bottom-nav-label { display: none; }
  .bottom-nav-item  { min-width: 44px; padding: 8px 6px; }
  .bottom-nav-icon  { font-size: 1.4rem; }
}

/* -- A-5: Replace opacity-reduced text with explicit colors -- */
.minigame-desc { color: #c8b896; opacity: 1; }
.mg-label      { color: #b8941f; opacity: 1; }

/* -- A-6: Minimum 12px for all dashboard sub-text -- */
.dash-daily-quests .quest-description  { font-size: 0.75rem; }
.dash-daily-quests .reward-badge       { font-size: 0.75rem; }
.dash-daily-quests .in-progress-badge  { font-size: 0.75rem; }
.item-stats-small                      { font-size: 0.75rem; }

/* -- A-7: Legendary text on light backgrounds (too low contrast at #ff8000) -- */
.rarity-legendary, .item-rarity.legendary { color: #cc6400; }

/* -- A-2: Wiki meta � solid color, not opacity-reduced -- */
.wiki-meta { color: #c8b896; }

/* -- C-2: Container padding-bottom too excessive -- */
.container { padding-bottom: calc(var(--spacing-xl) + 60px); }

/* -- C-4: Completed quest card � wrong temperature for RPG theme -- */
.quest-card.completed {
  background: linear-gradient(135deg, #f4f0e8 0%, #e0ecd6 100%);
  border-color: #5a7c3e;
}

/* -- C-1: Oracle orb � move to bottom-right on mobile (above nav) -- */
@media (max-width: 768px) {
  .oracle-orb {
    top: auto;
    bottom: 70px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    line-height: 44px;
    text-align: center;
  }
}

/* -- F-2: Widget dark backgrounds � warm tint instead of pure black -- */
.minigame-widget     { background: rgba(18,12,8,0.55); }
.dash-adventures-header { background: rgba(18,12,8,0.35); border-color: rgba(200,168,75,0.3); }
.dash-active-quests  { background: rgba(18,12,8,0.35); }

/* -- QW-6: Store item card hover -- */
.store-item-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}
.store-item-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(212,175,55,0.25);
  border-color: var(--gold-dark);
}

/* -- D-S2: Store items grid min column wider -- */
.items-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* -- D-S3: Store gold display -- */
.store-gold-display {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-md);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* -- D-B2: form-row (missing � used in bounty modal) -- */
.form-row {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 160px; }

/* -- D-B3: bounties-grid (missing) -- */
.bounties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* -- D-O1: option-row (missing in options.html) -- */
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--parchment-darker);
}
.option-row:last-child { border-bottom: none; }
.option-info { flex: 1; }
.option-info h3 { font-size: 1rem; margin-bottom: var(--spacing-xs); }
.option-info p  { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* -- E-1 QW-8: Fix legendary coin � multiple transforms fighting -- */
@keyframes coinLegendaryAll {
  0%   { transform: rotateY(0deg)   scale(1.0)  translateY(0);      }
  20%  { transform: rotateY(72deg)  scale(1.25) translateY(-12px);   }
  40%  { transform: rotateY(144deg) scale(1.0)  translateY(-20px);   }
  60%  { transform: rotateY(216deg) scale(1.25) translateY(-12px);   }
  80%  { transform: rotateY(288deg) scale(1.0)  translateY(0);       }
  100% { transform: rotateY(360deg) scale(1.0)  translateY(0);       }
}
@keyframes coinLegendaryGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)); }
  50%       { filter: drop-shadow(0 0 18px rgba(255,215,0,1));  }
}
.coin-legendary {
  animation: coinLegendaryAll 1.2s linear infinite,
             coinLegendaryGlow 1s ease-in-out infinite;
  font-size: 4em;
}

/* -- E-2: Define missing pulse keyframe for priority-critical -- */
@keyframes priorityPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(139,0,0,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(139,0,0,0); }
}
.priority-critical { animation: priorityPulse 2s infinite; }

/* -- E-3 QW-9: XP progress fill � slow & satisfying -- */
.quest-progress .progress-fill {
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- E-4: Adventure card expand � compressed max-height + opacity -- */
.adventure-card-body {
  max-height: 600px;
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
}
.adventure-card.collapsed .adventure-card-body {
  max-height: 0;
  opacity: 0;
}

/* -- E-5: Achievement unlock animation -- */
@keyframes achievementUnlock {
  0%   { transform: scale(1);    box-shadow: var(--shadow-md); }
  30%  { transform: scale(1.06); box-shadow: 0 0 24px rgba(212,175,55,0.7); }
  60%  { transform: scale(0.98); }
  100% { transform: scale(1);    box-shadow: var(--shadow-md); }
}
.achievement-card.just-unlocked {
  animation: achievementUnlock 700ms ease-out both;
  border-color: var(--gold);
}

/* -- D-W1 QW-7: Wiki mobile breakpoint -- */
@media (max-width: 768px) {
  .wiki-layout {
    grid-template-columns: 1fr !important;
  }
  .wiki-pane:first-child {
    max-height: 45vh;
    overflow-y: auto;
  }
}

/* -- D-W2: Wiki scrollbar -- */
.wiki-page-list {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) rgba(0,0,0,0.3);
}

/* -- D-G1: Guild flair � GPU-accelerated filter instead of text-shadow -- */
@keyframes goldPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.6)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,215,0,1));  }
}
.username-flair-gold { animation: goldPulse 3s ease-in-out infinite; }

/* -- D-C3: Avatar breathe � make it perceptible -- */
@keyframes breathe {
  0%, 100% { transform: scale(1.0); }
  50%       { transform: scale(1.04); }
}

/* -- D-D1 QW-5: Dungeon page � actually dark -- */
.dungeon-page {
  background: linear-gradient(160deg, #0f0b18 0%, #0d0814 100%) !important;
}

/* -- D-D2: Dungeon header on dark background -- */
.dungeon-header {
  background: rgba(20,12,28,0.85) !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
}
.dungeon-title { color: var(--gold); text-shadow: 0 0 20px rgba(212,175,55,0.4); }

/* -- D-I1: Inventory scrollbar -- */
.inventory-backpack .items-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dark) var(--parchment-dark);
}

/* -- D-A1: Achievement card hover -- */
.achievement-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.achievement-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(212,175,55,0.2);
}

/* -- Dashboard side margin fix (slight claustrophobia) -- */
/* Applied inline on dashboard.html main tag � 16px sides */

/* ================================================================
   END PENN AUDIT FIXES
   ================================================================ */

/* ================================================================
   FOLLOW-UP FIXES � June 2026
   ================================================================ */

/* -- FIX: Double scrollbar � prevent html/body from showing own scrollbar -- */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* -- FIX: Bottom nav � force compact height, remove parchment gradient -- */
.bottom-navbar {
  background: rgba(14,8,4,0.97) !important;
  border-top: 1px solid rgba(212,175,55,0.35) !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
}
.bottom-nav-icon  { font-size: 1.2rem !important; line-height: 1; }
.bottom-nav-label { font-size: 0.68rem !important; }
.bottom-nav-item  {
  gap: 2px !important;
  padding: 5px 8px !important;
  min-width: 54px !important;
}
body  { padding-bottom: 52px !important; }
.bottom-nav-more-panel { bottom: 46px !important; }

/* -- FIX: Active quests section � high contrast text on dark bg -- */
.dash-quests-section {
  background: rgba(18,12,8,0.5);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.dash-quests-section h2  { color: var(--gold) !important; }
.dash-quests-desc        { color: #c8b896 !important; }

.quest-card-header h4    { color: #f0e0b0 !important; font-size: 0.9rem; }
.quest-from-adventure    { color: #d4af37 !important; font-size: 0.78rem; font-weight: 700; }
.quest-description       { color: #d0c4a8 !important; font-size: 0.8rem; }
.quest-status-badge      { color: #f0d060 !important; background: rgba(212,175,55,0.2) !important; }

/* Quest card itself on the dark right column */
.dash-right .quest-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(212,175,55,0.25);
  color: var(--parchment-light);
}
.dash-right .quest-card:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.5);
}

/* -- FIX: Adventure card progress text � make "N/M quests" visible -- */
.adventure-progress-text {
  color: #c8b896 !important;
  font-size: 0.78rem;
}
.adventure-progress-fill {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
}

/* -- FIX: Right column heading contrast -- */
.dash-right h2 { color: var(--gold); }

/* -- FIX: html causing second scrollbar � html gets scroll when body fills -- */
html, body {
  height: 100%;
}

/* ================================================================
   END FOLLOW-UP FIXES
   ================================================================ */

/* ================================================================
   FOLLOW-UP FIXES � June 2026
   ================================================================ */

/* -- FIX: Double scrollbar � prevent html/body from showing own scrollbar -- */
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
}

/* -- FIX: Bottom nav � force compact height, remove parchment gradient -- */
.bottom-navbar {
  background: rgba(14,8,4,0.97) !important;
  border-top: 1px solid rgba(212,175,55,0.35) !important;
  padding: 4px 0 !important;
  min-height: 0 !important;
}
.bottom-nav-icon  { font-size: 1.2rem !important; line-height: 1; }
.bottom-nav-label { font-size: 0.68rem !important; }
.bottom-nav-item  {
  gap: 2px !important;
  padding: 5px 8px !important;
  min-width: 54px !important;
}
body  { padding-bottom: 52px !important; }
.bottom-nav-more-panel { bottom: 46px !important; }

/* -- FIX: Active quests section � high contrast text on dark bg -- */
.dash-quests-section {
  background: rgba(18,12,8,0.5);
  border: 1px solid rgba(212,175,55,0.2);
  border-radius: var(--radius-lg);
  padding: 14px;
}
.dash-quests-section h2  { color: var(--gold) !important; }
.dash-quests-desc        { color: #c8b896 !important; }

.quest-card-header h4    { color: #f0e0b0 !important; font-size: 0.9rem; }
.quest-from-adventure    { color: #d4af37 !important; font-size: 0.78rem; font-weight: 700; }
.quest-description       { color: #d0c4a8 !important; font-size: 0.8rem; }
.quest-status-badge      { color: #f0d060 !important; background: rgba(212,175,55,0.2) !important; }

/* Quest card itself on the dark right column */
.dash-right .quest-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(212,175,55,0.25);
  color: var(--parchment-light);
}
.dash-right .quest-card:hover {
  background: rgba(212,175,55,0.08);
  border-color: rgba(212,175,55,0.5);
}

/* -- FIX: Adventure card progress text � make "N/M quests" visible -- */
.adventure-progress-text {
  color: #c8b896 !important;
  font-size: 0.78rem;
}
.adventure-progress-fill {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
}

/* -- FIX: Right column heading contrast -- */
.dash-right h2 { color: var(--gold); }

/* -- FIX: html causing second scrollbar � html gets scroll when body fills -- */
html, body {
  height: 100%;
}

/* ================================================================
   END FOLLOW-UP FIXES
   ================================================================ */

/* -- Task assignment controls -- */
.task-assign-select {
  padding: 2px 6px;
  font-size: 0.72rem;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.3);
  color: var(--parchment-light);
  cursor: pointer;
  max-width: 110px;
}
.task-assign-select:hover  { border-color: var(--gold); }
.task-assign-select option { background: #1a1008; color: #f4e8d0; }

.task-assignee-badge {
  font-size: 0.7rem;
  background: rgba(212,175,55,0.2);
  color: var(--gold);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* -- Task assignment controls -- */
.task-assign-select {
  padding: 2px 6px;
  font-size: 0.72rem;
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.3);
  color: var(--parchment-light);
  cursor: pointer;
  max-width: 110px;
}
.task-assign-select:hover  { border-color: var(--gold); }
.task-assign-select option { background: #1a1008; color: #f4e8d0; }

.task-assignee-badge {
  font-size: 0.7rem;
  background: rgba(212,175,55,0.2);
  color: var(--gold);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ================================================================
   TEXTURE PASS � parchment.png + stone-wall.png (June 2026)
   ================================================================ */

/* -- Body: real stone wall replaces the SVG placeholder -- */
body {
  background-image: url("/images/stone-wall.png") !important;
  background-size: 512px 512px !important;
  background-attachment: fixed !important;
  background-repeat: repeat !important;
  background-color: #1a1a1a !important;
}

/* -- Adventure cards: parchment texture -- */
.adventure-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
}

.adventure-card .card-header,
.adventure-card .adventure-card-header {
  background: transparent !important;
  background-image: none !important;
}

/* Ensure text on parchment is readable */
.adventure-card h3,
.adventure-card .adventure-priority,
.adventure-card .adventure-status {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.adventure-card .adventure-progress-text {
  color: #3a2000 !important;
  text-shadow: none;
}

/* Progress bar on parchment */
.adventure-card .adventure-progress-bar {
  background: rgba(44,24,16,0.2) !important;
}
.adventure-card .adventure-progress-fill {
  background: linear-gradient(90deg, #8b6914 0%, #b8941f 100%) !important;
}

/* Body of the expanded card on parchment */
.adventure-card .adventure-card-body {
  background: transparent !important;
  background-image: none !important;
  color: #2c1a00 !important;
}
.adventure-card .adventure-card-body strong { color: #3a2000; }
.adventure-card .adventure-card-body span   { color: #4a3020; }

/* Button on parchment */
.adventure-card .btn-primary {
  background: linear-gradient(180deg, #b8941f, #8b6914) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* -- Quest cards in the right column stay dark (they live on dark widgets) -- */
.dash-right .quest-card {
  background-image: none !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ================================================================
   END TEXTURE PASS
   ================================================================ */

/* ================================================================
   TEXTURE PASS � parchment.png + stone-wall.png (June 2026)
   ================================================================ */

/* -- Body: real stone wall replaces the SVG placeholder -- */
body {
  background-image: url("/images/stone-wall.png") !important;
  background-size: 512px 512px !important;
  background-attachment: fixed !important;
  background-repeat: repeat !important;
  background-color: #1a1a1a !important;
}

/* -- Adventure cards: parchment texture -- */
.adventure-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
}

.adventure-card .card-header,
.adventure-card .adventure-card-header {
  background: transparent !important;
  background-image: none !important;
}

/* Ensure text on parchment is readable */
.adventure-card h3,
.adventure-card .adventure-priority,
.adventure-card .adventure-status {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.adventure-card .adventure-progress-text {
  color: #3a2000 !important;
  text-shadow: none;
}

/* Progress bar on parchment */
.adventure-card .adventure-progress-bar {
  background: rgba(44,24,16,0.2) !important;
}
.adventure-card .adventure-progress-fill {
  background: linear-gradient(90deg, #8b6914 0%, #b8941f 100%) !important;
}

/* Body of the expanded card on parchment */
.adventure-card .adventure-card-body {
  background: transparent !important;
  background-image: none !important;
  color: #2c1a00 !important;
}
.adventure-card .adventure-card-body strong { color: #3a2000; }
.adventure-card .adventure-card-body span   { color: #4a3020; }

/* Button on parchment */
.adventure-card .btn-primary {
  background: linear-gradient(180deg, #b8941f, #8b6914) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* -- Quest cards in the right column stay dark (they live on dark widgets) -- */
.dash-right .quest-card {
  background-image: none !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ================================================================
   END TEXTURE PASS
   ================================================================ */

/* ================================================================
   UI POLISH � parchment quest cards + chunky progress bars
   ================================================================ */

/* -- Right-column quest cards get the parchment treatment too -- */
.dash-right .quest-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
  border-color: rgba(139, 105, 20, 0.5) !important;
  border-width: 1.5px !important;
}
.dash-right .quest-card:hover {
  border-color: #8b6914 !important;
  box-shadow: 0 4px 16px rgba(139,105,20,0.35) !important;
  transform: translateX(3px);
}
.dash-right .quest-card-header h4 { color: #3a2000 !important; }
.dash-right .quest-from-adventure  { color: #7a4a10 !important; }
.dash-right .quest-description     { color: #4a3020 !important; }
.dash-right .quest-status-badge    {
  background: rgba(139,105,20,0.2) !important;
  color: #6b3e00 !important;
}

/* -- Adventure progress bar � chunkier, more exciting -- */
.adventure-progress-container {
  margin-top: 8px;
  padding: 0 2px;
}

.adventure-progress-bar {
  height: 10px !important;     /* was ~4px */
  border-radius: 6px !important;
  background: rgba(44,24,16,0.18) !important;
  overflow: hidden;
  border: 1px solid rgba(139,105,20,0.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.adventure-progress-fill {
  height: 100% !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg,
    #7a4a10 0%,
    #b8941f 40%,
    #e8c04a 70%,
    #d4af37 100%) !important;
  box-shadow: 0 0 8px rgba(212,175,55,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
}

/* Animated shimmer sweep on the bar */
.adventure-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s ease-in-out infinite;
}
@keyframes bar-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.adventure-progress-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #3a2000 !important;
  margin-top: 3px;
  display: block;
}

/* -- Daily quests section: also parchment -- */
.minigame-widget.dash-daily-quests .quest-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
}
.minigame-widget.dash-daily-quests .quest-title   { color: #3a2000 !important; }
.minigame-widget.dash-daily-quests .quest-description { color: #4a3020 !important; }

/* ================================================================
   END UI POLISH
   ================================================================ */

/* ================================================================
   COMMUNICATION-FIRST DASHBOARD + RESPONSIVE TUNING
   ================================================================ */

.dash-feed-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  background: rgba(14, 9, 7, 0.58);
  border: 1px solid rgba(212, 175, 55, 0.26);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.dash-feed-section h2 {
  margin: 0;
  color: var(--gold);
  font-size: 1.25rem;
}

.dash-feed-desc {
  margin: 0;
  color: #d2c39b;
  font-size: 0.82rem;
}

.dash-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 45vh;
  overflow-y: auto;
  padding-right: 4px;
}

.dash-feed-empty {
  margin: 0;
  color: #c4b285;
  font-size: 0.86rem;
}

.dash-feed-item {
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, #fff6df 0%, #f3deb2 100%);
  border-radius: 10px;
  border: 1px solid rgba(122, 74, 16, 0.34);
  border-left-width: 5px;
  padding: 9px 10px;
  color: #2a1809 !important;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.dash-feed-item:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.dash-feed-item h4 {
  margin: 4px 0;
  color: #2a1809 !important;
  font-size: 0.95rem;
  line-height: 1.25;
}

.dash-feed-item p {
  margin: 0;
  color: #39240f !important;
  font-size: 0.82rem;
  line-height: 1.35;
}

.dash-feed-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash-feed-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  background: rgba(0, 0, 0, 0.08);
  color: #2f1a08;
  border-radius: 999px;
  padding: 2px 8px;
}

.dash-feed-time {
  font-size: 0.72rem;
  color: #765128;
  white-space: nowrap;
}

.dash-feed-guild {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.74rem;
  color: #5f3e1b;
  font-weight: 700;
}

.dash-feed-item.type-dm {
  border-left-color: #7b2fc9;
  box-shadow: 0 0 0 1px rgba(123, 47, 201, 0.18);
}

.dash-feed-item.type-dm .dash-feed-pill {
  background: rgba(123, 47, 201, 0.15);
  color: #4f1a85;
}

.dash-feed-item.type-forum {
  border-left-color: #2469a6;
}

.dash-feed-item.type-guild {
  border-left-color: #2d8d5f;
}

.dash-feed-item.type-achievement {
  border-left-color: #c4861e;
}

.dash-feed-item.type-system,
.dash-feed-item.type-task,
.dash-feed-item.type-quest {
  border-left-color: #8c5d2f;
}

.quest-assignee-tag {
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  margin-top: 2px;
}

.quest-assignee-tag.is-me {
  background: rgba(37, 123, 217, 0.18);
  color: #0e4f94;
}

.quest-assignee-tag.is-assigned {
  background: rgba(55, 126, 80, 0.16);
  color: #1f6d3d;
}

.quest-assignee-tag.is-open {
  background: rgba(140, 93, 47, 0.15);
  color: #7b4d24;
}

.quest-due-label {
  font-size: 0.74rem;
  color: #6a4822;
}

@media (min-width: 1600px) {
  .container {
    max-width: 1800px;
  }

  .dashboard-layout {
    grid-template-columns: minmax(360px, 460px) 1fr minmax(360px, 480px);
    gap: 16px;
  }

  .dash-calendar-wrap {
    height: calc(100vh - 110px);
    min-height: 700px;
  }

  .forum-layout,
  .dm-layout {
    grid-template-columns: minmax(350px, 430px) 1fr;
  }

  .dm-thread-panel {
    min-height: 620px;
  }
}

@media (max-width: 768px) {
  .dashboard-layout {
    gap: 8px;
  }

  .dash-adventures-header {
    padding: 8px 10px;
    gap: 8px;
  }

  .dash-adventures-header h1 {
    font-size: 1.12rem;
  }

  .dash-filter-row {
    gap: 5px;
  }

  .filter-select-inline {
    font-size: 0.75rem;
    padding: 4px 24px 4px 8px;
  }

  .dash-right {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
  }

  .dash-feed-section,
  .dash-quests-section,
  .minigame-widget,
  .arena-promo-widget {
    padding: 10px;
  }

  .dash-feed-list {
    max-height: 38vh;
  }

  .dash-feed-item {
    padding: 8px;
  }

  .dash-feed-item h4 {
    font-size: 0.86rem;
  }

  .dash-feed-item p {
    font-size: 0.77rem;
  }

  .forum-card,
  .dm-card,
  .forum-page-header,
  .dm-page-header {
    padding: 12px;
  }

  .dm-message-list {
    max-height: 52vh;
    min-height: 220px;
    padding: 8px;
  }

  .dm-bubble {
    max-width: 96%;
    padding: 8px 9px;
  }
}

/* ================================================================
   END COMMUNICATION-FIRST DASHBOARD + RESPONSIVE TUNING
   ================================================================ */

/* ================================================================
   UI POLISH � parchment quest cards + chunky progress bars
   ================================================================ */

/* -- Right-column quest cards get the parchment treatment too -- */
.dash-right .quest-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
  border-color: rgba(139, 105, 20, 0.5) !important;
  border-width: 1.5px !important;
}
.dash-right .quest-card:hover {
  border-color: #8b6914 !important;
  box-shadow: 0 4px 16px rgba(139,105,20,0.35) !important;
  transform: translateX(3px);
}
.dash-right .quest-card-header h4 { color: #3a2000 !important; }
.dash-right .quest-from-adventure  { color: #7a4a10 !important; }
.dash-right .quest-description     { color: #4a3020 !important; }
.dash-right .quest-status-badge    {
  background: rgba(139,105,20,0.2) !important;
  color: #6b3e00 !important;
}

/* -- Adventure progress bar � chunkier, more exciting -- */
.adventure-progress-container {
  margin-top: 8px;
  padding: 0 2px;
}

.adventure-progress-bar {
  height: 10px !important;     /* was ~4px */
  border-radius: 6px !important;
  background: rgba(44,24,16,0.18) !important;
  overflow: hidden;
  border: 1px solid rgba(139,105,20,0.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

.adventure-progress-fill {
  height: 100% !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg,
    #7a4a10 0%,
    #b8941f 40%,
    #e8c04a 70%,
    #d4af37 100%) !important;
  box-shadow: 0 0 8px rgba(212,175,55,0.5), inset 0 1px 1px rgba(255,255,255,0.3);
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  position: relative;
}

/* Animated shimmer sweep on the bar */
.adventure-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s ease-in-out infinite;
}
@keyframes bar-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.adventure-progress-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #3a2000 !important;
  margin-top: 3px;
  display: block;
}

/* -- Daily quests section: also parchment -- */
.minigame-widget.dash-daily-quests .quest-card {
  background-image: url("/images/parchment.png") !important;
  background-size: cover !important;
  background-color: #f4e8d0 !important;
  color: #2c1a00 !important;
}
.minigame-widget.dash-daily-quests .quest-title   { color: #3a2000 !important; }
.minigame-widget.dash-daily-quests .quest-description { color: #4a3020 !important; }

/* ================================================================
   END UI POLISH
   ================================================================ */

/* ================================================================
   E-5: Targeted page-specific fixes (Penn style guide 2026-06)
   ================================================================ */

/* Profile � XP bar gets semantic green + shimmer */
.xp-bar .xp-fill,
.profile-xp-fill {
  background: linear-gradient(90deg, var(--color-xp), #27ae60, var(--color-xp));
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s linear infinite;
}

/* Board � Kanban column cards: dark glass */
body.page-social .kanban-card,
body.page-social .board-card,
body.page-social .column-card {
  background: var(--surface-dark);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--ink-bright);
}

/* Wiki � prose uses readable body font */
body.page-social .wiki-content p,
body.page-social .wiki-body p,
body.page-social article p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
}

/* Rarity item border glows */
.item-card[data-rarity="uncommon"],.store-item[data-rarity="uncommon"]{box-shadow:0 0 8px var(--rarity-uncommon-glow);border-color:var(--rarity-uncommon)}
.item-card[data-rarity="rare"],.store-item[data-rarity="rare"]{box-shadow:0 0 10px var(--rarity-rare-glow);border-color:var(--rarity-rare)}
.item-card[data-rarity="epic"],.store-item[data-rarity="epic"]{box-shadow:0 0 14px var(--rarity-epic-glow);border-color:var(--rarity-epic)}
.item-card[data-rarity="legendary"],.store-item[data-rarity="legendary"]{box-shadow:0 0 18px var(--rarity-legendary-glow);border-color:var(--rarity-legendary)}

/* Semantic stat colours */
.stat-hp,[data-stat="hp"],.hp-value{color:var(--color-hp)}
.stat-xp,[data-stat="xp"],.xp-value{color:var(--color-xp)}
.stat-gold,[data-stat="gold"],.gold-value{color:var(--color-gold)}
.stat-mana,[data-stat="mana"],.mana-value{color:var(--color-mana)}

/* ================================================================
   END E-5
   ================================================================ *//* E-5: XP bar */
.xp-bar .xp-fill, .profile-xp-fill { background: linear-gradient(90deg, var(--color-xp), #27ae60, var(--color-xp)); background-size: 200% 100%; animation: bar-shimmer 2.5s linear infinite; }
/* END E-5 */

/* ================================================================
   E-5: Targeted page-specific fixes (Penn style guide 2026-06)
   ================================================================ */

/* XP bar semantic green + shimmer */
.xp-bar .xp-fill, .profile-xp-fill {
  background: linear-gradient(90deg, var(--color-xp), #27ae60, var(--color-xp));
  background-size: 200% 100%;
  animation: bar-shimmer 2.5s linear infinite;
}
/* Board Kanban cards */
body.page-social .kanban-card, body.page-social .board-card, body.page-social .column-card {
  background: var(--surface-dark);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--ink-bright);
}
/* Wiki prose */
body.page-social .wiki-content p, body.page-social .wiki-body p, body.page-social article p {
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.75;
}
/* Rarity glows */
.item-card[data-rarity=uncommon],.store-item[data-rarity=uncommon]{box-shadow:0 0 8px var(--rarity-uncommon-glow);border-color:var(--rarity-uncommon)}
.item-card[data-rarity=rare],.store-item[data-rarity=rare]{box-shadow:0 0 10px var(--rarity-rare-glow);border-color:var(--rarity-rare)}
.item-card[data-rarity=epic],.store-item[data-rarity=epic]{box-shadow:0 0 14px var(--rarity-epic-glow);border-color:var(--rarity-epic)}
.item-card[data-rarity=legendary],.store-item[data-rarity=legendary]{box-shadow:0 0 18px var(--rarity-legendary-glow);border-color:var(--rarity-legendary)}
/* Stat colours */
.stat-hp,[data-stat=hp],.hp-value{color:var(--color-hp)}
.stat-xp,[data-stat=xp],.xp-value{color:var(--color-xp)}
.stat-gold,[data-stat=gold],.gold-value{color:var(--color-gold)}
.stat-mana,[data-stat=mana],.mana-value{color:var(--color-mana)}

/* ================================================================
   END E-5
   ================================================================ */