/* ═══════════════════════════════════════════════════════════════
   CHANGING DOORS — style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --fog:        #c8b8d8;
  --mist:       #e8d8f0;
  --parchment:  #f2eef8;
  --dusk:       #9b80b8;
  --shadow:     #5c4880;
  --arch:       #7a5e9e;
  --warm:       #e8c060;
  --accent:     #9b72c4;
  --gold:       #d4a830;
  --gold-light: #f0cc60;
  --glow:       rgba(220, 180, 80, 0.4);
  --text-dark:  #2e1f48;
  --text-mid:   #5c4880;
  --text-soft:  #9b80b8;
  --door-w:     96px;
  --door-h:     160px;
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── BASE ── */
html, body {
  width: 100%;
  min-height: 100vh;
  font-family: 'Jost', sans-serif;
  color: var(--text-dark);
  background: #1a0e2e;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════
   FIXED BACKGROUND
══════════════════════════════════════════════════ */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Base deep purple + gold gradient */
.bg-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 50% 48%, rgba(240,210,100,0.22) 0%, rgba(200,150,60,0.10) 28%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(130,80,180,0.55) 0%, rgba(80,40,130,0.7) 45%, transparent 75%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #2e1448 0%, #1a0a30 55%, #12082a 100%);
}

/* Painting-style light rays from center */
.bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg at 50% 48%,
    transparent 0deg,   rgba(240,200,80,0.04) 8deg,
    transparent 16deg,  rgba(240,200,80,0.03) 26deg,
    transparent 34deg,  rgba(240,200,80,0.05) 44deg,
    transparent 52deg,  rgba(240,200,80,0.03) 62deg,
    transparent 70deg,  rgba(240,200,80,0.04) 82deg,
    transparent 90deg,  rgba(240,200,80,0.03) 104deg,
    transparent 114deg, rgba(240,200,80,0.05) 124deg,
    transparent 134deg, rgba(240,200,80,0.03) 148deg,
    transparent 158deg, rgba(240,200,80,0.04) 170deg,
    transparent 180deg, rgba(240,200,80,0.03) 194deg,
    transparent 204deg, rgba(240,200,80,0.05) 216deg,
    transparent 226deg, rgba(240,200,80,0.03) 240deg,
    transparent 250deg, rgba(240,200,80,0.04) 262deg,
    transparent 272deg, rgba(240,200,80,0.03) 286deg,
    transparent 296deg, rgba(240,200,80,0.05) 308deg,
    transparent 320deg, rgba(240,200,80,0.03) 334deg,
    transparent 344deg, rgba(240,200,80,0.04) 354deg,
    transparent 360deg
  );
  mask: radial-gradient(ellipse 70% 70% at 50% 48%, black 0%, transparent 100%);
  -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 48%, black 0%, transparent 100%);
  animation: rotateRays 40s linear infinite;
}

@keyframes rotateRays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Central golden glow orb */
.bg-glow-center {
  position: absolute;
  width: 420px;
  height: 420px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,230,120,0.28) 0%,
    rgba(220,170,60,0.15) 30%,
    rgba(160,100,40,0.06) 55%,
    transparent 70%
  );
  filter: blur(18px);
  animation: pulseGlow 5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { transform: translate(-50%, -46%) scale(1);    opacity: 1;   }
  50%       { transform: translate(-50%, -46%) scale(1.12); opacity: 0.8; }
}

/* Canvas for animated hands */
#handsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Canvas-like grain texture */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 160px;
}

/* ══════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════ */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 3rem;
  background: rgba(18, 8, 40, 0.55);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(180, 140, 220, 0.12);
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(240, 220, 255, 0.95);
  text-transform: uppercase;
}

.nav-logo em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 300;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(200, 170, 240, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--gold-light);
}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 2rem 4rem;
  gap: 1.4rem;
}

.hero-tag {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(220, 180, 80, 0.85);
  background: rgba(220, 170, 50, 0.1);
  border: 1px solid rgba(220, 170, 50, 0.25);
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
}

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4rem, 10vw, 7.5rem);
  font-weight: 600;
  line-height: 1.0;
  color: rgba(240, 225, 255, 0.97);
  letter-spacing: -0.01em;
  text-shadow: 0 0 60px rgba(200, 150, 255, 0.3);
}

.hero-title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-light);
  text-shadow: 0 0 40px rgba(240, 200, 80, 0.5);
}

.hero-sub {
  font-size: 1.15rem;
  font-weight: 400;
  color: rgba(200, 175, 230, 0.8);
  max-width: 440px;
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.hero-cta {
  margin-top: 0.8rem;
  padding: 1rem 3rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #1a0a2e;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(220,170,50,0.35), 0 2px 8px rgba(220,170,50,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(220,170,50,0.45), 0 4px 12px rgba(220,170,50,0.25);
}

/* Decorative gold line under title */
.arch-deco {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 2px;
}

/* ── Decorative hero doors ── */
.hero-door-row {
  display: flex;
  gap: 1.8rem;
  align-items: flex-end;
  margin: 1rem 0;
}

.deco-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.55;
  animation: floatDoor var(--fd, 6s) ease-in-out infinite;
}

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

.deco-door .door-frame {
  width: 38px;
  height: 68px;
  border: 2.5px solid rgba(200, 160, 240, 0.5);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  position: relative;
  background: rgba(160, 100, 200, 0.15);
}

.deco-door .door-frame::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}

.deco-door .door-step {
  width: 48px;
  height: 5px;
  background: rgba(200, 160, 240, 0.3);
  border-radius: 1px;
  opacity: 0.5;
}

.deco-door.large .door-frame {
  width: 52px;
  height: 90px;
  border-width: 3px;
  border-color: rgba(220, 170, 50, 0.6);
}

.deco-door.large .door-step { width: 66px; }
.deco-door.large             { opacity: 0.8; }

/* ══════════════════════════════════════════════════
   GAME SECTION
══════════════════════════════════════════════════ */
.game-section {
  padding: 2rem 2rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* ── Level Map ── */
.level-map {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.level-pip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.level-pip:hover { transform: translateY(-3px); }

.pip-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(180, 140, 220, 0.3);
  background: rgba(40, 20, 70, 0.6);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(200, 170, 240, 0.7);
  transition: all 0.2s;
}

.pip-icon.done   { background: var(--gold);   border-color: var(--gold);   color: #1a0a2e; }
.pip-icon.active { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 0 20px rgba(155,114,196,0.5); }
.pip-icon.locked { opacity: 0.3; cursor: not-allowed; }

.pip-connector {
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, rgba(180,140,220,0.3), transparent);
  margin-bottom: 1.4rem;
}

.pip-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(180, 155, 220, 0.5);
}

/* ── Game Arena ── */
#gameArena {
  width: 100%;
  max-width: 860px;
  background: rgba(28, 14, 50, 0.72);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(180, 140, 220, 0.2);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0,0,0,0.4),
    0 0 0 1px rgba(220,170,50,0.06),
    inset 0 1px 0 rgba(220,180,255,0.08);
  overflow: hidden;
}

/* ── Arena Header ── */
.arena-header {
  padding: 1.6rem 2.5rem 1.2rem;
  border-bottom: 1px solid rgba(180, 140, 220, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.arena-level-tag {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(200, 160, 240, 0.65);
}

.arena-round-info {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(220, 190, 255, 0.8);
}

/* ── Timer Strip ── */
.timer-strip {
  width: 100%;
  height: 3px;
  background: rgba(180, 140, 220, 0.12);
}

.timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transition: width 0.1s linear;
  border-radius: 2px;
}

/* ── Game Prompt ── */
.game-prompt {
  padding: 2rem 2.5rem 1.5rem;
  text-align: center;
}

.prompt-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 600;
  color: rgba(235, 215, 255, 0.95);
  letter-spacing: 0.06em;
  min-height: 3rem;
  line-height: 1.3;
}

.prompt-text .highlight {
  font-style: italic;
  font-weight: 600;
  padding: 0 0.2em;
  border-radius: 4px;
}

/* ── Door Grid ── */
#doorGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.5rem 2rem 2.5rem;
  min-height: 220px;
  align-items: flex-end;
}

/* ── Individual Door ── */
.door-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s;
}

.door-wrap:hover               { transform: translateY(-4px); }
.door-wrap:hover .door-body    { transform: perspective(400px) rotateY(-12deg); box-shadow: 8px 0 24px rgba(107,99,130,0.2); }

.door-body {
  border: 3px solid rgba(107, 99, 130, 0.35);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  overflow: hidden;
  will-change: transform;
}

.door-body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.25) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

.door-knob {
  position: absolute;
  bottom: 22%;
  right: 18%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(107, 99, 130, 0.55);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.door-panel {
  position: absolute;
  border: 1.5px solid rgba(107, 99, 130, 0.18);
  border-radius: 3px;
  pointer-events: none;
}

.door-step {
  height: 8px;
  border-radius: 1px 1px 4px 4px;
  background: rgba(107, 99, 130, 0.25);
  margin-top: -1px;
  transition: background 0.2s;
}

/* Door feedback states */
.door-wrap.correct .door-body {
  border-color: #6abf9c;
  box-shadow: 0 0 0 3px rgba(106,191,156,0.3), 0 10px 30px rgba(106,191,156,0.25);
  animation: correctDoor 0.5s ease;
}

.door-wrap.wrong .door-body {
  border-color: #cc7777;
  box-shadow: 0 0 0 3px rgba(200,100,100,0.3);
  animation: wrongDoor 0.4s ease;
}

@keyframes correctDoor {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08) translateY(-6px); }
  100% { transform: scale(1); }
}

@keyframes wrongDoor {
  0%, 100% { transform: translateX(0);  }
  20%      { transform: translateX(-8px); }
  60%      { transform: translateX(8px);  }
}

/* ── Idle Screen ── */
#idleScreen {
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.idle-arch svg { width: 80px; opacity: 0.6; }

.idle-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(220, 200, 255, 0.9);
}

.idle-sub {
  font-size: 1rem;
  color: rgba(180, 155, 220, 0.65);
  max-width: 320px;
  line-height: 1.7;
  font-weight: 400;
}

.start-level-btn {
  padding: 0.95rem 2.8rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  color: #1a0a2e;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(220,170,50,0.3);
  transition: transform 0.18s, box-shadow 0.18s;
}

.start-level-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(220,170,50,0.4);
}

/* ── Overlays ── */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(18, 8, 40, 0.88);
  backdrop-filter: blur(8px);
  z-index: 20;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.show {
  opacity: 1;
  pointer-events: all;
}

.overlay-emoji {
  font-size: 3.5rem;
  animation: bounceIn 0.4s ease;
}

@keyframes bounceIn {
  0%   { transform: scale(0.4);  }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1);    }
}

.overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(235, 215, 255, 0.95);
}

.overlay-sub {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(180, 155, 220, 0.7);
  letter-spacing: 0.06em;
}

.overlay-btn {
  margin-top: 0.5rem;
  padding: 0.9rem 2.6rem;
  font-family: 'Jost', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #1a0a2e;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.18s;
}

.overlay-btn:hover { transform: translateY(-2px); }

/* ── Progress Chart ── */
#chartSection {
  width: 100%;
  max-width: 860px;
  background: rgba(28, 14, 50, 0.72);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(180, 140, 220, 0.2);
  border-radius: 20px;
  padding: 2rem 2.5rem;
  display: none;
}

#chartSection.show {
  display: block;
  animation: fadeUp 0.5s ease;
}

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

.chart-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(230, 210, 255, 0.92);
  margin-bottom: 0.4rem;
}

.chart-sub {
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(180, 155, 220, 0.6);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

canvas#rtChart {
  width: 100% !important;
  border-radius: 8px;
}

.chart-legend {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.leg-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: rgba(180, 155, 220, 0.6);
  letter-spacing: 0.06em;
}

.leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ══════════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════════ */
.about-section {
  padding: 3rem 2rem 6rem;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.about-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(220, 170, 50, 0.6);
  margin-bottom: 1rem;
}

.about-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(200, 175, 240, 0.65);
  font-style: italic;
}

/* ══════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════ */
button:focus-visible,
.door-wrap:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 600px) {
  nav                { padding: 1rem 1.2rem; }
  .nav-links         { display: none; }
  .game-section      { padding: 1.5rem 1rem 4rem; }
  .arena-header      { padding: 1.2rem 1.5rem 1rem; }
  .game-prompt       { padding: 1.5rem 1.5rem 1rem; }
  #doorGrid          { padding: 1rem 1rem 2rem; gap: 1rem; }
}