/* ===========================================
   Gamified MVP — Bods Journey Palette
   #222 (dark) / #89E900 (green) / #FFFFFF
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  --bg: #0d0d0d;
  --bg-2: #1a1a1a;
  --card: #222222;
  --line: #2d2d2d;
  --green: #89E900;
  --green-dim: #5fa300;
  --orange: #ff8a1f;
  --text: #ffffff;
  --text-dim: #9a9a9a;
  --danger: #ff4d4d;
}

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

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- TOP BAR (antique theme) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #1a1208 0%, #0f0905 100%);
  border-bottom: 1px solid rgba(212, 184, 122, 0.3);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  color: #d4b87a;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 180, 80, 0.3);
}

.nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav a {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(212, 184, 122, 0.65);
  transition: all 0.2s;
}

.nav a:hover,
.nav a.active {
  color: #f5e9c8;
  text-shadow: 0 0 10px rgba(255, 180, 80, 0.6);
}

/* ---------- TOWN (MAIN VIEW) ---------- */
.town-wrap {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  aspect-ratio: 600 / 375;
  background: #000;
  overflow: hidden;
}

.town-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  animation: ambient-zoom 20s ease-in-out infinite;
}

@keyframes ambient-zoom {
  0%, 100% { transform: scale(1.00) translate(0, 0); }
  50%      { transform: scale(1.015) translate(-0.3%, -0.3%); }
}

/* ---------- ATMOSPHERIC FX LAYER ---------- */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* Fire glow — pulsing radial gradient at fire sources */
.fire-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 160, 40, 0.55) 0%,
    rgba(255, 100, 20, 0.25) 30%,
    transparent 70%);
  mix-blend-mode: screen;
  animation: flicker 2.5s ease-in-out infinite;
  filter: blur(2px);
}

.fg-pedestal { left: 46%; top: 71%; width: 160px; height: 160px; animation-duration: 3s; }
.fg-forge    { left: 73%; top: 70%; width: 150px; height: 140px; animation-duration: 2.2s; animation-delay: 0.5s; }
.fg-torch-1  { left: 36%; top: 76%; width: 60px; height: 60px; animation-duration: 1.8s; }
.fg-torch-2  { left: 56%; top: 76%; width: 60px; height: 60px; animation-duration: 2.1s; animation-delay: 0.8s; }
.fg-torch-3  { left: 67%; top: 80%; width: 55px; height: 55px; animation-duration: 1.5s; animation-delay: 1.1s; }

@keyframes flicker {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  25%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.08); }
  50%      { opacity: 0.7;  transform: translate(-50%, -50%) scale(0.95); }
  75%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
}

/* Fireflies / embers — small dots rising and fading */
.firefly {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffb347;
  box-shadow: 0 0 6px 2px rgba(255, 180, 70, 0.8);
  animation: rise 6s ease-in infinite;
  opacity: 0;
}

@keyframes rise {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(8px, -40px) scale(1); opacity: 0.9; }
  90%  { opacity: 0.4; }
  100% { transform: translate(-4px, -90px) scale(0.3); opacity: 0; }
}

/* Twinkling stars */
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.9);
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* Drifting ground mist */
.mist {
  position: absolute;
  inset: 55% 0 0 0;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(180, 200, 220, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 90%, rgba(180, 200, 220, 0.10) 0%, transparent 55%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(180, 200, 220, 0.06) 40%,
      rgba(180, 200, 220, 0.14) 100%);
  filter: blur(10px);
  animation: drift 18s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes drift {
  0%   { transform: translateX(-4%) translateY(0); opacity: 0.6; }
  33%  { transform: translateX(2%) translateY(-1%); opacity: 0.95; }
  66%  { transform: translateX(4%) translateY(0); opacity: 0.7; }
  100% { transform: translateX(-4%) translateY(0); opacity: 0.6; }
}

/* ---------- SKY CLOUDS ---------- */
.sky-cloud {
  position: absolute;
  width: 35%;
  height: 10%;
  background: radial-gradient(ellipse at center,
    rgba(200, 210, 230, 0.18) 0%,
    rgba(200, 210, 230, 0.08) 40%,
    transparent 75%);
  filter: blur(14px);
  pointer-events: none;
  animation: cloud-drift linear infinite;
}

.sc-1 { left: -40%; top: 2%;  animation-duration: 90s;  animation-delay: 0s; }
.sc-2 { left: -40%; top: 9%;  animation-duration: 140s; animation-delay: -30s; opacity: 0.7; }
.sc-3 { left: -40%; top: 15%; animation-duration: 110s; animation-delay: -70s; opacity: 0.5; }
.sc-4 { left: -40%; top: 5%;  animation-duration: 160s; animation-delay: -100s; opacity: 0.6; }

@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(400%); }
}

/* ---------- MOON GLOW ---------- */
.moon-glow {
  position: absolute;
  left: 73%;
  top: 3%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(230, 230, 255, 0.12) 0%,
    rgba(200, 210, 255, 0.06) 30%,
    transparent 70%);
  filter: blur(6px);
  animation: moon-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes moon-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* ---------- CHIMNEY SMOKE ---------- */
.smoke {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(210, 215, 225, 0.28);
  filter: blur(7px);
  animation: smoke-rise 5s ease-out infinite;
  opacity: 0;
  pointer-events: none;
}

.smoke-dark {
  background: rgba(90, 90, 100, 0.45);
  width: 28px;
  height: 28px;
  animation-duration: 6s;
}

@keyframes smoke-rise {
  0%   { transform: translate(0, 0) scale(0.4);  opacity: 0; }
  15%  { opacity: 0.8; }
  40%  { transform: translate(6px, -30px) scale(1.2); opacity: 0.65; }
  70%  { transform: translate(-4px, -60px) scale(1.8); opacity: 0.35; }
  100% { transform: translate(10px, -100px) scale(2.6); opacity: 0; }
}

/* Make sure hotspots and title stay above FX */
.hotspot, .town-title { z-index: 5; }

/* ---------- CHARACTER ---------- */
.character {
  position: absolute;
  left: 46%;
  top: 80%;
  width: 42px;
  height: 62px;
  transform: translate(-50%, -85%);
  z-index: 6;
  pointer-events: none;
  will-change: left, top;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 10px rgba(255, 180, 60, 0.3));
}

.character-sprite {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: transform 0.1s;
  transform-origin: center bottom;
}

.character-sprite img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  user-select: none;
}

.character.facing-left .character-sprite {
  transform: scaleX(-1);
}

/* Walking animation: bob up and down */
.character.walking .character-sprite {
  animation: char-walk 0.4s ease-in-out infinite;
}

@keyframes char-walk {
  0%, 100% { transform: translateY(0) scaleX(var(--sx, 1)); }
  50%      { transform: translateY(-3px) scaleX(var(--sx, 1)); }
}

.character.facing-left .character-sprite { --sx: -1; }

/* Placeholder grid (shown when no town.png exists) */
.town-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 55%, rgba(255,138,31,0.25) 0%, transparent 35%),
    linear-gradient(180deg, #1a1208 0%, #0a0a0a 100%);
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

.town-placeholder .hint {
  background: rgba(0,0,0,0.6);
  border: 1px dashed var(--green-dim);
  padding: 16px 24px;
  border-radius: 4px;
  max-width: 520px;
}

.town-placeholder strong {
  color: var(--green);
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Central pedestal label (now clickable settings button) */
.town-title {
  position: absolute;
  left: 46%;
  top: 72%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.town-title-btn {
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: #f5e9c8;
  background: rgba(0, 0, 0, 0.78);
  padding: 7px 14px;
  border: 1px solid rgba(255, 180, 80, 0.75);
  border-radius: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255, 180, 80, 0.7);
  box-shadow: 0 0 24px rgba(255, 138, 31, 0.4),
              inset 0 0 10px rgba(255, 138, 31, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: all 0.25s ease;
  font-family-text: inherit;
}

.town-title-btn .tt-hint {
  font-family: 'EB Garamond', serif;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: rgba(245, 233, 200, 0.55);
  text-transform: lowercase;
  font-weight: 500;
  text-shadow: none;
}

.town-title-btn:hover {
  background: rgba(20, 10, 0, 0.9);
  border-color: rgba(255, 200, 100, 1);
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 200, 100, 1);
  box-shadow: 0 0 36px rgba(255, 160, 50, 0.7),
              inset 0 0 14px rgba(255, 180, 60, 0.25);
  transform: translate(0, -2px) scale(1.03);
}

.town-title-btn:hover .tt-hint {
  color: rgba(255, 200, 100, 0.9);
}

.town-title:hover { transform: translate(-50%, -52%); }

/* ---------- MODAL (settings / profile) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: modal-fade 0.25s ease-out;
}

.modal-backdrop[hidden] { display: none; }

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

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1208 0%, #0f0905 100%);
  border: 1px solid rgba(212, 184, 122, 0.35);
  border-radius: 4px;
  padding: 40px 36px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.9),
    0 0 60px rgba(255, 160, 50, 0.15),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
  animation: modal-rise 0.35s ease-out;
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Decorative corners */
.modal-panel::before,
.modal-panel::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(212, 184, 122, 0.7);
}
.modal-panel::before {
  top: 10px; left: 10px;
  border-right: none; border-bottom: none;
}
.modal-panel::after {
  bottom: 10px; right: 10px;
  border-left: none; border-top: none;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: 1px solid rgba(212, 184, 122, 0.3);
  color: rgba(212, 184, 122, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
  font-family: inherit;
}

.modal-close:hover {
  border-color: rgba(255, 180, 80, 1);
  color: #fff;
  background: rgba(255, 160, 50, 0.1);
}

.modal-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 6px;
  color: #d4b87a;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.8;
}

.modal-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 32px;
  font-weight: 900;
  color: #f5e9c8;
  letter-spacing: 1px;
  margin-bottom: 28px;
  text-shadow: 0 0 16px rgba(255, 180, 80, 0.3);
}

/* Profile form */
.profile-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.profile-avatar {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 2px solid rgba(212, 184, 122, 0.6);
  background: rgba(20, 12, 4, 0.8);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s;
  box-shadow: 0 0 20px rgba(255, 160, 50, 0.15);
}

.profile-avatar:hover {
  border-color: rgba(255, 200, 100, 1);
  box-shadow: 0 0 30px rgba(255, 180, 60, 0.4);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.profile-avatar.has-image img { display: block; }
.profile-avatar.has-image .profile-avatar-empty { display: none; }

.profile-avatar-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(212, 184, 122, 0.7);
  font-family: 'EB Garamond', serif;
}

.profile-avatar-empty span {
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
}

.profile-avatar-empty small {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 2px;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #f5e9c8;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.profile-avatar:hover .profile-avatar-overlay { opacity: 1; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #d4b87a;
  text-transform: uppercase;
}

.form-field label .lock {
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
  color: rgba(212, 184, 122, 0.5);
  margin-left: 4px;
}

.form-field input {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(212, 184, 122, 0.3);
  color: #f5e9c8;
  padding: 11px 14px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.2s;
}

.form-field input:focus {
  outline: none;
  border-color: rgba(255, 200, 100, 0.9);
  box-shadow: 0 0 16px rgba(255, 180, 60, 0.25);
  background: rgba(20, 12, 4, 0.9);
}

.form-field input[readonly] {
  color: rgba(245, 233, 200, 0.55);
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.35);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.btn-ghost,
.btn-primary {
  flex: 1;
  padding: 12px 18px;
  border-radius: 2px;
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(212, 184, 122, 0.4);
  color: rgba(212, 184, 122, 0.8);
}

.btn-ghost:hover {
  border-color: rgba(212, 184, 122, 0.8);
  color: #f5e9c8;
  background: rgba(212, 184, 122, 0.08);
}

.btn-primary {
  background: linear-gradient(180deg, #d4a148 0%, #8c6a2a 100%);
  border: 1px solid #d4a148;
  color: #1a1208;
  box-shadow: 0 0 20px rgba(212, 161, 72, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #e8c77a 0%, #b3852f 100%);
  box-shadow: 0 0 30px rgba(232, 199, 122, 0.5);
  transform: translateY(-1px);
}

.toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(212, 184, 122, 0.6);
  color: #f5e9c8;
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 2px;
  z-index: 2000;
  box-shadow: 0 0 30px rgba(255, 180, 60, 0.3);
  animation: toast-in 0.3s ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Hotspots — invisible clickable zones (no visible rectangle) */
.hotspot {
  position: absolute;
  cursor: pointer;
  border: none;
  background: transparent;
  z-index: 5;
}

/* Tooltip label appears near the bottom on hover */
.hotspot::after {
  content: attr(data-label);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--green);
  color: #000;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  text-transform: uppercase;
}

.hotspot:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- SPOTLIGHT OVERLAY ---------- */
.spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, background 0.35s ease;
  z-index: 4;
  background: radial-gradient(
    ellipse var(--sr, 18%) var(--srv, 22%) at var(--cx, 50%) var(--cy, 50%),
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Green accent ring around the spotlight edge */
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse var(--sr, 18%) var(--srv, 22%) at var(--cx, 50%) var(--cy, 50%),
    transparent 55%,
    rgba(137, 233, 0, 0.12) 62%,
    transparent 75%
  );
  mix-blend-mode: screen;
}

/* Activate spotlight + position per building using :has() */
.town-wrap:has(.hs-tavern:hover)   .spotlight { opacity: 1; --cx: 19%; --cy: 54%; --sr: 13%; --srv: 20%; }
.town-wrap:has(.hs-market:hover)   .spotlight { opacity: 1; --cx: 52%; --cy: 48%; --sr: 15%; --srv: 18%; }
.town-wrap:has(.hs-library:hover)  .spotlight { opacity: 1; --cx: 62%; --cy: 25%; --sr: 10%; --srv: 14%; }
.town-wrap:has(.hs-academy:hover)  .spotlight { opacity: 1; --cx: 76%; --cy: 35%; --sr: 10%; --srv: 26%; }
.town-wrap:has(.hs-clock:hover)    .spotlight { opacity: 1; --cx: 91%; --cy: 55%; --sr: 11%; --srv: 42%; }
.town-wrap:has(.hs-forge:hover)    .spotlight { opacity: 1; --cx: 74%; --cy: 71%; --sr: 11%; --srv: 18%; }

/* Subtle brightness boost on the town image when any hotspot hovered */
.town-wrap:has(.hotspot:hover) .town-img {
  filter: brightness(1.08) contrast(1.05);
}

/* Hotspot positions — larger zones over each building (top/left/width/height) */
.hs-tavern    { left: 8%;  top: 38%; width: 22%; height: 32%; }
.hs-market    { left: 33%; top: 32%; width: 22%; height: 28%; }
.hs-library   { left: 54%; top: 14%; width: 17%; height: 22%; }
.hs-academy   { left: 68%; top: 10%; width: 17%; height: 50%; }
.hs-clock     { left: 83%; top: 20%; width: 15%; height: 55%; }
.hs-forge     { left: 64%; top: 55%; width: 20%; height: 32%; }

/* ---------- PAGE (building interior) — ANTIQUE / PAPYRUS THEME ---------- */
body:has(.page) {
  background:
    radial-gradient(ellipse at top, rgba(60, 35, 10, 0.5) 0%, transparent 60%),
    radial-gradient(ellipse at bottom, rgba(40, 25, 8, 0.4) 0%, transparent 60%),
    #0a0705;
}

/* (topbar antigo agora e global — override removido) */

.page {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 32px 100px;
  min-height: calc(100vh - 50px);
  position: relative;
}

.page::before {
  /* Subtle parchment overlay texture */
  content: "";
  position: fixed;
  inset: 50px 0 0 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212, 161, 72, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(212, 161, 72, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.page > * { position: relative; z-index: 1; }

.page-header {
  border-bottom: 1px solid rgba(212, 184, 122, 0.25);
  padding-bottom: 28px;
  margin-bottom: 48px;
  position: relative;
}

.page-header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #d4a148 0%, transparent 100%);
}

.page-crumb {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(212, 184, 122, 0.6);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}

.page-crumb a {
  color: #d4b87a;
  transition: color 0.2s;
}
.page-crumb a:hover {
  color: #f5e9c8;
  text-shadow: 0 0 10px rgba(255, 180, 80, 0.5);
}

.page-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: clamp(44px, 6vw, 72px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  color: #f5e9c8;
  text-shadow:
    0 0 30px rgba(255, 180, 80, 0.25),
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 4px 12px rgba(0, 0, 0, 0.9);
}

.page-subtitle {
  font-family: 'EB Garamond', serif;
  color: rgba(212, 184, 122, 0.75);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 16px;
}

.todo-box {
  background:
    radial-gradient(ellipse at center, rgba(40, 25, 8, 0.9) 0%, rgba(20, 12, 4, 0.95) 100%);
  border: 1px solid rgba(212, 184, 122, 0.35);
  border-radius: 3px;
  padding: 56px 40px;
  text-align: center;
  position: relative;
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.6),
    inset 0 0 60px rgba(0, 0, 0, 0.5),
    inset 0 0 2px rgba(212, 184, 122, 0.2);
}

/* Decorative corners (like the modal) */
.todo-box::before,
.todo-box::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(212, 184, 122, 0.5);
}
.todo-box::before {
  top: 10px; left: 10px;
  border-right: none; border-bottom: none;
}
.todo-box::after {
  bottom: 10px; right: 10px;
  border-left: none; border-top: none;
}

.todo-box .tag {
  display: inline-block;
  background: linear-gradient(180deg, #d4a148 0%, #8c6a2a 100%);
  color: #1a1208;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  padding: 6px 14px;
  border-radius: 1px;
  text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow:
    0 0 20px rgba(212, 161, 72, 0.35),
    inset 0 1px 0 rgba(255, 220, 140, 0.4);
}

.todo-box h2 {
  font-family: 'EB Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: #f5e9c8;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.todo-box p {
  font-family: 'EB Garamond', serif;
  color: rgba(212, 184, 122, 0.75);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto;
}

.back-link {
  display: inline-block;
  margin-top: 40px;
  font-family: 'EB Garamond', serif;
  color: #d4b87a;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.2s;
}

.back-link:hover {
  color: #f5e9c8;
  border-bottom-color: rgba(212, 184, 122, 0.6);
  text-shadow: 0 0 12px rgba(255, 180, 80, 0.5);
}

/* ========================================
   TAVERN FEED — facebook-group style
   ======================================== */

.tavern-page { max-width: 720px; }

/* Composer */
.composer {
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.85) 0%, rgba(20, 12, 4, 0.95) 100%);
  border: 1px solid rgba(212, 184, 122, 0.3);
  border-radius: 4px;
  padding: 22px 24px 18px;
  margin-bottom: 28px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
  position: relative;
}

.composer::before,
.composer::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(212, 184, 122, 0.4);
}
.composer::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.composer::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

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

.composer-avatar,
.post-avatar,
.comment-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 12, 4, 0.9);
  border: 1px solid rgba(212, 184, 122, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'EB Garamond', serif;
  color: #d4b87a;
  font-weight: 700;
  font-size: 18px;
}

.composer-avatar img,
.post-avatar img,
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-avatar.has-image span,
.post-avatar.has-image span,
.comment-avatar.has-image span { display: none; }

.composer-name,
.post-name {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  font-weight: 700;
  color: #f5e9c8;
  letter-spacing: 1px;
}

.composer-hint,
.post-time {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  color: rgba(212, 184, 122, 0.55);
  font-style: italic;
  margin-top: 2px;
}

.composer-text {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 184, 122, 0.25);
  color: #f5e9c8;
  padding: 12px 14px;
  border-radius: 2px;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 70px;
  transition: all 0.2s;
}

.composer-text::placeholder { color: rgba(212, 184, 122, 0.45); font-style: italic; }
.composer-text:focus {
  outline: none;
  border-color: rgba(255, 200, 100, 0.7);
  box-shadow: 0 0 16px rgba(255, 180, 60, 0.2);
}

.composer-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.composer-media-preview:empty { display: none; }

.media-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid rgba(212, 184, 122, 0.4);
}

.media-thumb img,
.media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(255, 100, 80, 0.7);
  color: #ff8a6a;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.thumb-remove:hover { background: rgba(255, 100, 80, 0.4); color: #fff; }

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 12px;
}

.composer-attach {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(212, 184, 122, 0.35);
  border-radius: 2px;
  color: rgba(212, 184, 122, 0.8);
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.composer-attach:hover {
  border-color: rgba(255, 200, 100, 0.7);
  color: #f5e9c8;
  background: rgba(255, 180, 60, 0.06);
}

.composer-submit {
  flex: 0 0 auto;
  padding: 10px 22px;
}

/* Feed */
.feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.feed-empty {
  text-align: center;
  padding: 60px 20px;
  font-family: 'EB Garamond', serif;
  color: rgba(212, 184, 122, 0.6);
}

.feed-empty p {
  font-size: 18px;
  font-style: italic;
  margin-bottom: 6px;
}

.feed-empty small {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Post */
.post {
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.7) 0%, rgba(20, 12, 4, 0.9) 100%);
  border: 1px solid rgba(212, 184, 122, 0.25);
  border-radius: 3px;
  padding: 20px 22px 16px;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.post::before,
.post::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(212, 184, 122, 0.35);
}
.post::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.post::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

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

.post-author { flex: 1; }

.post-delete {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(212, 184, 122, 0.4);
  font-size: 22px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.post-delete:hover {
  color: #ff8a6a;
  border-color: rgba(255, 120, 80, 0.5);
  background: rgba(255, 80, 40, 0.08);
}

.post-content {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  line-height: 1.65;
  color: #e8dcb8;
  margin-bottom: 14px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.post-media {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  border-radius: 2px;
  overflow: hidden;
}

.post-media-1 { grid-template-columns: 1fr; }
.post-media-2 { grid-template-columns: 1fr 1fr; }
.post-media-3 { grid-template-columns: 2fr 1fr; }
.post-media-3 .media-item:first-child { grid-row: 1 / span 2; }
.post-media-4 { grid-template-columns: 1fr 1fr; }

.media-item {
  position: relative;
  background: #000;
  border: 1px solid rgba(212, 184, 122, 0.2);
  overflow: hidden;
}

.media-item img,
.media-item video {
  width: 100%;
  max-height: 480px;
  display: block;
  object-fit: cover;
}

.media-item video { background: #000; }

.post-stats {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(212, 184, 122, 0.55);
  padding: 8px 0;
  border-top: 1px solid rgba(212, 184, 122, 0.15);
  border-bottom: 1px solid rgba(212, 184, 122, 0.15);
  margin-bottom: 12px;
}

/* Comments */
.post-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.post-comments:empty { margin-bottom: 0; }

.comment {
  display: flex;
  gap: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

.comment-body {
  flex: 1;
  min-width: 0;
}

.comment-bubble {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 184, 122, 0.15);
  padding: 8px 12px;
  border-radius: 2px;
}

.comment-name {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 700;
  color: #d4b87a;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.comment-text {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  color: #e8dcb8;
  line-height: 1.5;
  word-wrap: break-word;
}

.comment-time {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  color: rgba(212, 184, 122, 0.4);
  font-style: italic;
  margin-top: 4px;
  margin-left: 12px;
}

.comment-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.comment-form input {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 184, 122, 0.25);
  color: #f5e9c8;
  padding: 9px 12px;
  border-radius: 2px;
  font-family: 'EB Garamond', serif;
  font-size: 12px;
}

.comment-form input::placeholder {
  color: rgba(212, 184, 122, 0.4);
  font-style: italic;
}

.comment-form input:focus {
  outline: none;
  border-color: rgba(255, 200, 100, 0.6);
}

.comment-form button {
  background: transparent;
  border: 1px solid rgba(212, 184, 122, 0.4);
  color: rgba(212, 184, 122, 0.9);
  padding: 9px 16px;
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
}

.comment-form button:hover {
  border-color: rgba(255, 200, 100, 0.9);
  color: #f5e9c8;
  background: rgba(255, 180, 60, 0.1);
}

/* ========================================
   ACADEMY — course catalog
   ======================================== */

.academy-page { max-width: 1100px; }

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.course-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.85) 0%, rgba(20, 12, 4, 0.95) 100%);
  border: 1px solid rgba(212, 184, 122, 0.25);
  border-radius: 3px;
  overflow: hidden;
  transition: all 0.25s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.course-card::before,
.course-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(212, 184, 122, 0.45);
  z-index: 2;
}
.course-card::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.course-card::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.course-card:hover {
  border-color: rgba(255, 200, 100, 0.7);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7),
              0 0 30px rgba(255, 180, 60, 0.2),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.course-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse at center, rgba(60, 35, 10, 0.9) 0%, rgba(20, 12, 4, 1) 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(212, 184, 122, 0.25);
}

.course-thumb svg {
  width: 50px;
  height: 50px;
  color: rgba(212, 184, 122, 0.4);
}

.course-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.course-card:hover .course-thumb-overlay { opacity: 1; }

.course-play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid rgba(255, 200, 100, 0.9);
  color: #f5e9c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding-left: 5px;
  box-shadow: 0 0 30px rgba(255, 180, 60, 0.5);
}

.course-info {
  padding: 18px 20px 22px;
}

.course-tag {
  display: inline-block;
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #d4a148 0%, #8c6a2a 100%);
  padding: 3px 9px;
  border-radius: 1px;
  margin-bottom: 10px;
  box-shadow: 0 0 14px rgba(212, 161, 72, 0.25);
}

.course-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 18px;
  font-weight: 900;
  color: #f5e9c8;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.course-subtitle {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(212, 184, 122, 0.75);
  line-height: 1.5;
  margin-bottom: 14px;
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 184, 122, 0.6);
}

.course-meta span:first-child { color: #d4b87a; font-weight: 700; }

/* ========================================
   COURSE PLAYER
   ======================================== */

.course-page { max-width: 1280px; }

.course-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  margin-bottom: 32px;
}

@media (max-width: 960px) {
  .course-layout { grid-template-columns: 1fr; }
}

.course-player {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.course-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(212, 184, 122, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(255, 180, 60, 0.1);
  overflow: hidden;
}

.course-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.course-lesson-info {
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.7) 0%, rgba(20, 12, 4, 0.9) 100%);
  border: 1px solid rgba(212, 184, 122, 0.25);
  padding: 20px 24px;
  position: relative;
}

.course-lesson-info::before,
.course-lesson-info::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgba(212, 184, 122, 0.4);
}
.course-lesson-info::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.course-lesson-info::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.lesson-eyebrow,
.sidebar-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #d4b87a;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.85;
}

.lesson-title {
  font-family: 'EB Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  color: #f5e9c8;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.lesson-description {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  font-style: italic;
  color: rgba(212, 184, 122, 0.75);
  line-height: 1.7;
  word-break: break-word;
}

.lesson-description a {
  color: #f5e9c8;
  text-decoration: underline;
  text-decoration-color: rgba(212, 184, 122, 0.5);
  text-underline-offset: 3px;
  transition: all 0.2s;
  font-style: normal;
  font-weight: 700;
}

.lesson-description a:hover {
  color: #ffe0a0;
  text-decoration-color: #ffe0a0;
  text-shadow: 0 0 10px rgba(255, 200, 100, 0.5);
}

.lesson-description:empty { display: none; }

/* Sidebar */
.course-sidebar {
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.7) 0%, rgba(20, 12, 4, 0.9) 100%);
  border: 1px solid rgba(212, 184, 122, 0.25);
  padding: 18px 18px 22px;
  align-self: flex-start;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.course-sidebar::-webkit-scrollbar { width: 6px; }
.course-sidebar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.course-sidebar::-webkit-scrollbar-thumb {
  background: rgba(212, 184, 122, 0.3);
  border-radius: 3px;
}
.course-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(212, 184, 122, 0.5); }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(212, 184, 122, 0.2);
}

.sidebar-progress {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 700;
  color: #d4b87a;
  letter-spacing: 1px;
}

.lesson-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lesson-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 184, 122, 0.15);
  cursor: pointer;
  transition: all 0.2s;
}

.lesson-list li:hover {
  border-color: rgba(255, 200, 100, 0.6);
  background: rgba(40, 25, 8, 0.7);
}

.lesson-list li.active {
  border-color: rgba(255, 200, 100, 0.95);
  background: linear-gradient(90deg, rgba(212, 161, 72, 0.18) 0%, rgba(40, 25, 8, 0.7) 100%);
  box-shadow: inset 3px 0 0 #d4a148;
}

.lesson-num {
  flex-shrink: 0;
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 14px;
  font-weight: 900;
  color: rgba(212, 184, 122, 0.5);
  width: 26px;
  text-align: center;
}

.lesson-list li.active .lesson-num { color: #f5e9c8; }

.lesson-meta { flex: 1; min-width: 0; }

.lesson-name {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  font-weight: 700;
  color: #e8dcb8;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.lesson-list li.active .lesson-name { color: #f5e9c8; }

.lesson-desc {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  color: rgba(212, 184, 122, 0.55);
  font-style: italic;
  margin-top: 3px;
  line-height: 1.4;
}

.lesson-icon {
  flex-shrink: 0;
  color: rgba(212, 184, 122, 0.4);
  font-size: 12px;
}

.lesson-list li.active .lesson-icon { color: #d4a148; }

.course-description-box {
  padding-top: 14px;
  border-top: 1px solid rgba(212, 184, 122, 0.2);
}

.course-description-box p {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  color: rgba(232, 220, 184, 0.75);
  line-height: 1.6;
  font-style: italic;
  margin-top: 6px;
}

/* Module groups inside sidebar */
.lesson-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.module-group {
  display: flex;
  flex-direction: column;
}

.module-header {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d4b87a;
  padding: 10px 4px 8px;
  border-bottom: 1px solid rgba(212, 184, 122, 0.25);
  margin-bottom: 8px;
  text-shadow: 0 0 8px rgba(255, 180, 80, 0.25);
}

.module-group .lesson-list {
  gap: 4px;
}

/* Text content in player (for lessons without video) */
.course-video-wrap.is-text {
  background: linear-gradient(180deg, rgba(26, 18, 8, 0.98) 0%, rgba(15, 9, 5, 1) 100%);
  aspect-ratio: auto;
  min-height: 400px;
  border: 1px solid rgba(212, 184, 122, 0.35);
}

.course-text-content {
  position: relative;
  padding: 48px 56px;
  font-family: 'EB Garamond', serif;
  color: #e8dcb8;
  line-height: 1.75;
  max-width: 100%;
  height: 100%;
  overflow-y: auto;
}

.course-text-content h1,
.course-text-content h2,
.course-text-content h3 {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  color: #f5e9c8;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(255, 180, 80, 0.25);
}

.course-text-content h2 { font-size: 28px; }
.course-text-content h3 { font-size: 20px; margin-top: 22px; }

.course-text-content p {
  font-size: 15px;
  color: rgba(232, 220, 184, 0.9);
  margin-bottom: 14px;
}

.course-text-content strong { color: #f5e9c8; }

.course-text-content em {
  color: rgba(212, 184, 122, 0.7);
  font-size: 13px;
}

.course-text-content code {
  font-family: 'SF Mono', Menlo, monospace;
  background: rgba(212, 161, 72, 0.12);
  color: #ffe0a0;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.course-text-content a {
  color: #ffe0a0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.course-text-content a:hover {
  text-shadow: 0 0 10px rgba(255, 200, 100, 0.5);
}

.course-text-content ul,
.course-text-content ol {
  margin-left: 20px;
  margin-bottom: 14px;
}

.course-text-content li {
  margin-bottom: 6px;
}

/* ========================================
   LIBRARY — catalog of scrolls
   ======================================== */

.library-page { max-width: 900px; }

.scrolls-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.scroll-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(40, 25, 8, 0.85) 0%, rgba(20, 12, 4, 0.95) 100%);
  border: 1px solid rgba(212, 184, 122, 0.3);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.scroll-card::before,
.scroll-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(212, 184, 122, 0.4);
}
.scroll-card::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.scroll-card::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.scroll-card:hover {
  border-color: rgba(255, 200, 100, 0.7);
  transform: translateX(4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7),
              0 0 30px rgba(255, 180, 60, 0.18),
              inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.scroll-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4b87a;
  border: 1px solid rgba(212, 184, 122, 0.4);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}

.scroll-card-icon svg {
  width: 28px;
  height: 28px;
}

.scroll-card-body {
  flex: 1;
  min-width: 0;
}

.scroll-card-tag {
  display: inline-block;
  font-family: 'EB Garamond', serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #d4a148 0%, #8c6a2a 100%);
  padding: 3px 9px;
  border-radius: 1px;
  margin-bottom: 8px;
  box-shadow: 0 0 14px rgba(212, 161, 72, 0.25);
}

.scroll-card-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 18px;
  font-weight: 900;
  color: #f5e9c8;
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-bottom: 6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.scroll-card-subtitle {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(212, 184, 122, 0.75);
  line-height: 1.5;
  margin-bottom: 8px;
}

.scroll-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(212, 184, 122, 0.55);
}

.scroll-card-meta span:first-child { color: #d4b87a; font-weight: 700; }

.scroll-card-arrow {
  flex-shrink: 0;
  font-family: 'EB Garamond', serif;
  font-size: 24px;
  color: rgba(212, 184, 122, 0.5);
  transition: all 0.25s;
}

.scroll-card:hover .scroll-card-arrow {
  color: #f5e9c8;
  transform: translateX(4px);
  text-shadow: 0 0 12px rgba(255, 200, 100, 0.6);
}

/* ========================================
   SCROLL VIEWER — parchment document
   ======================================== */

.scroll-page { max-width: 860px; }

.parchment {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(180, 130, 60, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(180, 130, 60, 0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, #f4e5c4 0%, #e8d4a0 60%, #d4be88 100%);
  color: #3a2610;
  padding: 70px 80px 90px;
  margin-bottom: 28px;
  border: 3px double #8b6f3a;
  border-radius: 2px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.8),
    0 0 80px rgba(255, 160, 50, 0.2),
    inset 0 0 100px rgba(139, 111, 58, 0.25),
    inset 0 0 4px rgba(139, 111, 58, 0.5);
  font-family: 'EB Garamond', serif;
  line-height: 1.75;
  overflow: hidden;
}

/* Aged parchment texture using gradient noise */
.parchment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 10% 20%, transparent 0, transparent 2px, rgba(139, 111, 58, 0.03) 2px, rgba(139, 111, 58, 0.03) 4px),
    repeating-radial-gradient(circle at 90% 80%, transparent 0, transparent 3px, rgba(139, 111, 58, 0.02) 3px, rgba(139, 111, 58, 0.02) 6px);
  pointer-events: none;
}

/* Burnt/aged edges */
.parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(80, 40, 10, 0.15) 0%, transparent 25%),
    radial-gradient(ellipse at top right, rgba(80, 40, 10, 0.12) 0%, transparent 25%),
    radial-gradient(ellipse at bottom left, rgba(80, 40, 10, 0.18) 0%, transparent 30%),
    radial-gradient(ellipse at bottom right, rgba(80, 40, 10, 0.14) 0%, transparent 25%);
  pointer-events: none;
}

.parchment > * { position: relative; z-index: 1; }

/* Wax seal */
.parchment-seal {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #d63a1f 0%, #8a1b10 55%, #4a0d08 100%);
  color: #f5e9c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow:
    inset 4px 4px 10px rgba(255, 200, 180, 0.35),
    inset -4px -4px 10px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.5);
  transform: rotate(-8deg);
  border: 2px solid #5a0f08;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.parchment-seal::before {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 18px;
  color: rgba(245, 233, 200, 0.8);
}

.parchment-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #8b6f3a;
  position: relative;
}

.parchment-header::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 1px;
  background: #8b6f3a;
}

.parchment-tag {
  display: inline-block;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #6b4a20;
  border: 1px solid #8b6f3a;
  padding: 4px 12px;
  margin-bottom: 16px;
  background: rgba(255, 240, 200, 0.3);
}

.parchment-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 42px;
  font-weight: 900;
  color: #3a2610;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 12px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}

.parchment-meta {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-style: italic;
  color: #6b4a20;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  gap: 6px;
  align-items: center;
}

.parchment-intro {
  font-size: 15px;
  color: #3a2610;
  margin-bottom: 24px;
  font-style: italic;
  padding-left: 16px;
  border-left: 3px solid #8b6f3a;
}

.parchment-intro p {
  margin-bottom: 12px;
}

.parchment-intro strong {
  color: #2a1810;
  font-weight: 900;
  font-style: normal;
}

.parchment-divider {
  text-align: center;
  margin: 32px 0;
  position: relative;
}

.parchment-divider::before,
.parchment-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #8b6f3a 100%);
}

.parchment-divider::before { left: 0; }
.parchment-divider::after {
  right: 0;
  background: linear-gradient(270deg, transparent 0%, #8b6f3a 100%);
}

.parchment-divider span {
  color: #8b6f3a;
  font-size: 20px;
  padding: 0 12px;
  background: transparent;
  position: relative;
  z-index: 1;
}

.parchment-content h2 {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 22px;
  font-weight: 900;
  color: #2a1810;
  margin-top: 28px;
  margin-bottom: 14px;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(139, 111, 58, 0.4);
  padding-bottom: 6px;
}

.parchment-content h3 {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-weight: 700;
  color: #3a2610;
  margin-top: 18px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.parchment-content p {
  font-size: 14px;
  color: #3a2610;
  margin-bottom: 12px;
  line-height: 1.75;
}

.parchment-content strong {
  color: #2a1810;
  font-weight: 900;
}

.parchment-content em {
  color: #5a3a15;
  font-style: italic;
}

.parchment-content code {
  font-family: 'SF Mono', Menlo, monospace;
  background: rgba(139, 111, 58, 0.18);
  color: #5a2610;
  padding: 2px 8px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(139, 111, 58, 0.3);
}

.parchment-content ul,
.parchment-content ol {
  margin-left: 22px;
  margin-bottom: 14px;
}

.parchment-content li {
  font-size: 14px;
  color: #3a2610;
  margin-bottom: 8px;
  line-height: 1.7;
}

.scroll-block {
  background: rgba(255, 240, 200, 0.4);
  border: 1px solid rgba(139, 111, 58, 0.5);
  padding: 14px 18px;
  margin-bottom: 12px;
  border-radius: 2px;
}

.scroll-block-label {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #6b4a20;
  margin-bottom: 6px;
  font-style: italic;
}

.scroll-block-label em {
  font-size: 10px;
  font-weight: 500;
  color: #8b6f3a;
  margin-left: 4px;
}

.scroll-block-body {
  font-size: 14px;
  color: #2a1810;
  line-height: 1.6;
}

.scroll-example {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  color: #2a1810;
  background: rgba(255, 240, 200, 0.55);
  border-left: 4px solid #8b6f3a;
  padding: 12px 18px;
  margin: 10px 0 18px;
  font-style: italic;
}

.scroll-warning {
  background: rgba(200, 80, 30, 0.12);
  border: 1px solid rgba(180, 60, 20, 0.5);
  border-left: 4px solid #b53c14;
  padding: 14px 18px;
  margin-top: 22px;
  color: #5a1d08;
  font-size: 13px;
  line-height: 1.65;
}

.scroll-warning strong {
  color: #8a1a05;
}

.scroll-suggestion {
  background: rgba(120, 180, 50, 0.18);
  border: 1px solid rgba(80, 140, 30, 0.55);
  border-left: 4px solid #5a9a1a;
  padding: 14px 18px;
  margin-top: 14px;
  color: #2e4d10;
  font-size: 13px;
  line-height: 1.65;
}

.scroll-suggestion strong {
  color: #1e3d05;
}

.scroll-suggestion em {
  color: #2e4d10;
  font-style: italic;
  font-weight: 700;
}

.scroll-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(139, 111, 58, 0.4);
}
.scroll-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.parchment-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid #8b6f3a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  color: #6b4a20;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.parchment-signature {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 14px;
  color: #3a2610;
  font-weight: 900;
}

.parchment-date {
  font-style: italic;
}

.scroll-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.scroll-actions .btn-primary {
  flex: 0 0 auto;
  padding: 12px 24px;
}

.scroll-actions .btn-ghost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 12px 20px;
  text-decoration: none;
}

/* ---------- PRINT STYLES (for PDF export) ---------- */
@media print {
  body { background: #fff !important; }
  .topbar, .back-link, .scroll-actions,
  .page-header, .music-btn, .logout-btn,
  .hint-bar { display: none !important; }

  .page.scroll-page { padding: 0; max-width: 100%; }

  .parchment {
    box-shadow: none;
    border: 2px double #8b6f3a;
    page-break-inside: avoid;
    padding: 50px 60px;
  }

  .parchment-content h2 { page-break-after: avoid; }
  .scroll-block, .scroll-warning, .scroll-example { page-break-inside: avoid; }
}

/* ---------- FOOTER HINT ---------- */
.hint-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  z-index: 50;
}
.hint-bar strong { color: var(--green); }

/* ---------- LOGIN PAGE ---------- */
body.login-page {
  min-height: 100vh;
  overflow: hidden;
  background: #000;
}

.login-bg {
  position: fixed;
  inset: -20px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(14px) brightness(0.5) saturate(0.9);
  transform: scale(1.08);
  animation: login-bg-drift 30s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes login-bg-drift {
  from { transform: scale(1.08) translate(-1%, -1%); }
  to   { transform: scale(1.12) translate(1%, 1%); }
}

.login-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 10%, rgba(0, 0, 0, 0.65) 80%),
    linear-gradient(180deg, rgba(20, 10, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.login-fx .star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.9);
  animation: twinkle 3s ease-in-out infinite;
}

.login-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(26, 18, 8, 0.96) 0%, rgba(15, 9, 5, 0.98) 100%);
  border: 1px solid rgba(212, 184, 122, 0.45);
  border-radius: 4px;
  padding: 44px 40px 38px;
  text-align: center;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 80px rgba(255, 160, 50, 0.18),
    inset 0 0 50px rgba(0, 0, 0, 0.5),
    inset 0 0 2px rgba(212, 184, 122, 0.2);
  animation: login-rise 0.6s ease-out;
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Decorative corners */
.login-panel::before,
.login-panel::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(212, 184, 122, 0.7);
}
.login-panel::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}
.login-panel::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}

/* Character avatar */
.login-avatar {
  position: relative;
  width: 140px;
  height: 140px;
  margin: -90px auto 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.login-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.9))
          drop-shadow(0 0 20px rgba(255, 180, 60, 0.45));
  animation: avatar-breathe 4s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

@keyframes avatar-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.login-avatar-glow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 140px;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 160, 50, 0.55) 0%, transparent 65%);
  filter: blur(8px);
  animation: glow-pulse 3s ease-in-out infinite;
  z-index: 1;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

.login-eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 6px;
  color: #d4b87a;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.85;
}

.login-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: 32px;
  font-weight: 900;
  color: #f5e9c8;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-shadow:
    0 0 20px rgba(255, 180, 80, 0.35),
    0 2px 0 rgba(0, 0, 0, 0.9);
  animation: title-flicker 4s ease-in-out infinite;
}

.login-tagline {
  font-family: 'EB Garamond', serif;
  font-size: 12px;
  font-style: italic;
  color: rgba(212, 184, 122, 0.7);
  margin-bottom: 30px;
  line-height: 1.5;
  padding: 0 14px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.login-btn {
  width: 100%;
  margin-top: 4px;
  padding: 14px 18px;
  font-size: 12px;
  letter-spacing: 3px;
}

.login-extras {
  margin-top: 12px;
  text-align: center;
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.login-extras a {
  color: rgba(212, 184, 122, 0.65);
  transition: color 0.2s;
}

.login-extras a:hover {
  color: #f5e9c8;
  text-shadow: 0 0 10px rgba(255, 180, 80, 0.5);
}

.login-divider {
  color: rgba(212, 184, 122, 0.3);
  margin: 0 10px;
}

/* ---------- LOGOUT BUTTON (topbar) ---------- */
.logout-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 20px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid rgba(212, 184, 122, 0.3);
  border-radius: 2px;
  color: rgba(212, 184, 122, 0.65);
  font-family: 'EB Garamond', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}

.logout-btn:hover {
  border-color: rgba(255, 120, 80, 0.9);
  color: #ffa07a;
  background: rgba(255, 80, 40, 0.08);
  text-shadow: 0 0 10px rgba(255, 120, 80, 0.5);
}

.logout-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ---------- LOADING SCREEN ---------- */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Background image slot — replace assets/loading-{building}.png per page */
.loading-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
  filter: blur(0.5px) brightness(0.7);
  animation: loading-zoom 8s ease-in-out infinite alternate;
}

@keyframes loading-zoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.06); }
}

/* Dark vignette + warm spotlight from above */
.loading-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 180, 80, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.88) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Warm light beam from top */
.loading-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 70%;
  background: linear-gradient(180deg,
    rgba(255, 220, 160, 0.22) 0%,
    rgba(255, 160, 60, 0.1) 40%,
    transparent 100%);
  clip-path: polygon(45% 0, 55% 0, 80% 100%, 20% 100%);
  filter: blur(10px);
  animation: beam-pulse 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes beam-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Loading content */
.loading-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: #fff;
  padding: 20px;
  animation: content-rise 0.6s ease-out;
}

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

.loading-eyebrow {
  display: block;
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 10px;
  color: #d4b87a;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  opacity: 0.9;
}

.loading-title {
  font-family: 'Cinzel Decorative', 'EB Garamond', serif;
  font-size: clamp(56px, 10vw, 140px);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 44px;
  color: #f5e9c8;
  text-shadow:
    0 0 18px rgba(255, 180, 80, 0.35),
    0 0 40px rgba(255, 140, 40, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.95),
    0 6px 20px rgba(0, 0, 0, 0.9);
  animation: title-flicker 4s ease-in-out infinite;
}

@keyframes title-flicker {
  0%, 100% { text-shadow:
    0 0 18px rgba(255, 180, 80, 0.35),
    0 0 40px rgba(255, 140, 40, 0.2),
    0 3px 0 rgba(0, 0, 0, 0.95),
    0 6px 20px rgba(0, 0, 0, 0.9); }
  50%      { text-shadow:
    0 0 28px rgba(255, 200, 100, 0.55),
    0 0 56px rgba(255, 160, 60, 0.35),
    0 3px 0 rgba(0, 0, 0, 0.95),
    0 6px 20px rgba(0, 0, 0, 0.9); }
}

/* Loading bar — medieval warm amber */
.loading-bar-wrap {
  width: min(420px, 75vw);
  margin: 0 auto 16px;
  background: rgba(20, 12, 4, 0.85);
  border: 1px solid rgba(212, 184, 122, 0.5);
  padding: 3px;
  border-radius: 1px;
  box-shadow: 0 0 20px rgba(212, 184, 122, 0.15),
              inset 0 0 8px rgba(0, 0, 0, 0.9);
}

.loading-bar {
  height: 6px;
  background: linear-gradient(90deg, #8c6a2a 0%, #e8c77a 50%, #f5e9c8 100%);
  width: 0%;
  animation: bar-fill 1.5s ease-out forwards;
  box-shadow: 0 0 10px rgba(232, 199, 122, 0.6);
}

@keyframes bar-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

.loading-status {
  font-family: 'EB Garamond', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 6px;
  color: rgba(212, 184, 122, 0.7);
  text-transform: uppercase;
  animation: loading-blink 1.6s ease-in-out infinite;
}

@keyframes loading-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ---------- MUSIC BUTTON ---------- */
.music-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.music-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.music-btn .music-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.3s;
}

.music-btn.playing {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 16px rgba(137,233,0,0.3);
}

.music-btn.playing .music-icon {
  animation: music-pulse 1.5s ease-in-out infinite;
}

@keyframes music-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

/* Auth guard — hide page until Supabase auth check completes */
body:not(.auth-ready) { opacity: 0; pointer-events: none; }
body.auth-ready { opacity: 1; transition: opacity 0.2s ease; }

/* Login error message */
.login-error {
  background: rgba(255, 77, 77, 0.15);
  border: 1px solid rgba(255, 77, 77, 0.4);
  color: #ff6b6b;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-top: 8px;
  text-align: center;
}

/* Post action bar (like, comment buttons) */
.post-actions {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin: 8px 0;
}
.post-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  color: #9a9a9a;
  font-size: 13px;
  padding: 8px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.post-action-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.post-action-btn.liked {
  color: #ff4d4d;
}
.post-action-btn.liked:hover {
  background: rgba(255,77,77,0.1);
}

/* Login tabs */
.login-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(212, 184, 122, 0.25);
}
.login-tab {
  flex: 1;
  padding: 10px 0;
  background: rgba(255,255,255,0.04);
  border: none;
  color: rgba(212, 184, 122, 0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.login-tab.active {
  background: rgba(212, 184, 122, 0.15);
  color: #f5e9c8;
}
.login-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  color: rgba(212, 184, 122, 0.85);
}

/* Login divider line */
.login-divider-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: rgba(212, 184, 122, 0.4);
  font-size: 12px;
  letter-spacing: 1px;
}
.login-divider-line::before,
.login-divider-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(212, 184, 122, 0.2);
}

/* Google login button */
.login-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 18px;
  background: #fff;
  border: none;
  border-radius: 8px;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.login-google-btn:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Fix: ensure hidden forms stay hidden */
.login-form[hidden] { display: none !important; }

/* Onboarding modal */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: onb-in 0.4s ease;
}
#onboarding-overlay.onboarding-fade-out {
  opacity: 0;
  transition: opacity 0.4s;
}
@keyframes onb-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.onboarding-modal {
  background: linear-gradient(180deg, #1a1208 0%, #0f0905 100%);
  border: 1px solid rgba(212,184,122,0.3);
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.onboarding-icon {
  font-size: 48px;
  color: #d4b87a;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(212,184,122,0.4);
}
.onboarding-title {
  font-family: 'Georgia', serif;
  color: #f5e9c8;
  font-size: 26px;
  margin: 0 0 8px;
  text-shadow: 0 0 15px rgba(212,184,122,0.3);
}
.onboarding-desc {
  color: rgba(212,184,122,0.7);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 24px;
}
.onboarding-form .form-field {
  text-align: left;
}
.onboarding-avatar-wrap {
  margin-bottom: 20px;
}
.onboarding-avatar-label {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(212,184,122,0.4);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s;
}
.onboarding-avatar-label:hover {
  border-color: #d4b87a;
}
.onboarding-avatar-label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onboarding-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(212,184,122,0.5);
  gap: 4px;
}
.onboarding-avatar-placeholder span {
  font-size: 11px;
}
.onboarding-avatar-hint {
  color: rgba(212,184,122,0.4);
  font-size: 12px;
  text-align: center;
}
.onboarding-error {
  background: rgba(255,77,77,0.15);
  border: 1px solid rgba(255,77,77,0.4);
  color: #ff6b6b;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin: 8px 0;
  text-align: center;
}
.onboarding-btn {
  width: 100%;
  margin-top: 8px;
  padding: 14px 18px;
}

/* Phone input with country selector */
.phone-wrap {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(212,184,122,0.25);
}
.phone-wrap .phone-country {
  flex: 0 0 auto;
  width: 100px;
  padding: 10px 8px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-right: 1px solid rgba(212,184,122,0.25);
  color: #f5e9c8;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d4b87a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}
.phone-wrap .phone-country option {
  background: #1a1a1a;
  color: #f5e9c8;
}
.phone-wrap input[type="tel"] {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  margin: 0;
}

/* Music controls wrapper */
.music-wrap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.music-wrap .music-btn {
  position: static;
}

/* Volume slider panel */
.music-volume {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(20, 18, 14, 0.95);
  border: 1px solid rgba(212, 184, 122, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  backdrop-filter: blur(8px);
}
.music-wrap:hover .music-volume,
.music-btn.playing ~ .music-volume {
  display: flex;
}
.vol-icon {
  color: rgba(212, 184, 122, 0.5);
  flex-shrink: 0;
}
.vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  background: rgba(212, 184, 122, 0.2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4b87a;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 6px rgba(212, 184, 122, 0.4);
}
.vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #d4b87a;
  cursor: pointer;
  border: none;
}

@media print {
  .music-wrap { display: none !important; }
}

/* Video thumbnail overlay */
.video-thumb-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play-btn {
  position: absolute;
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding-left: 6px;
}
.video-play-btn:hover {
  background: rgba(0,0,0,0.7);
  transform: scale(1.1);
}

/* Fix: ensure hidden overlay stays hidden */
.video-thumb-overlay[hidden] { display: none !important; }

/* Mark as completed button */
.btn-complete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 24px;
  background: rgba(137, 233, 0, 0.1);
  border: 1px solid rgba(137, 233, 0, 0.3);
  color: #89E900;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-complete:hover {
  background: rgba(137, 233, 0, 0.2);
  border-color: #89E900;
}
.btn-complete.is-completed {
  background: rgba(137, 233, 0, 0.15);
  border-color: #89E900;
  color: #89E900;
}
.btn-complete:disabled {
  opacity: 0.5;
  cursor: wait;
}

/* Completed lesson in sidebar */
.lesson-list li.completed {
  opacity: 0.7;
}
.lesson-list li.completed .lesson-icon {
  color: #89E900;
}
.lesson-list li.completed .lesson-num {
  color: #89E900;
}