/* ═══════════════════════════════════════════════════
   RPG Engine — Dungeon Adventure Visualizer
   Fantasy Dark Theme Stylesheet
   ═══════════════════════════════════════════════════ */

/* ─── CSS Variables ─── */
:root {
  --bg-deep:       #0a0a12;
  --bg-dark:       #0f0f1a;
  --bg-card:       #13131f;
  --bg-panel:      #1a1a2e;
  --bg-elevated:   #1e1e32;

  --gold:          #ffd700;
  --gold-dim:      #b8960f;
  --gold-glow:     rgba(255, 215, 0, 0.3);

  --purple:        #7c3aed;
  --purple-dim:    #5b21b6;
  --purple-glow:   rgba(124, 58, 237, 0.3);

  --fire:          #ef4444;
  --fire-dim:      #b91c1c;
  --fire-glow:     rgba(239, 68, 68, 0.3);

  --rogue-green:   #10b981;
  --rogue-dim:     #059669;
  --rogue-glow:    rgba(16, 185, 129, 0.3);

  --cyan:          #06b6d4;
  --cyan-glow:     rgba(6, 182, 212, 0.25);

  --text-primary:  #e8e8f0;
  --text-secondary:#9ca3af;
  --text-dim:      #6b7280;

  --border:        rgba(255,255,255,0.06);
  --border-glow:   rgba(255,255,255,0.1);

  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     28px;

  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-display:  'Cinzel', 'Inter', serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Reset ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}
body{
  font-family:var(--font-body);
  background:var(--bg-deep);
  color:var(--text-primary);
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
a{color:var(--gold);text-decoration:none}
code{
  font-family:var(--font-mono);
  background:rgba(124,58,237,0.15);
  color:var(--purple);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.85em;
}

/* ─── Particles Canvas ─── */
#particles-canvas{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:0.6;
}

/* ─── Container ─── */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

/* ─── Section ─── */
.section{
  position:relative;
  z-index:1;
  padding:100px 0;
}
.section-title{
  font-family:var(--font-display);
  font-size:2.2rem;
  font-weight:700;
  color:var(--text-primary);
  text-align:center;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
}
.section-icon{font-size:1.5rem}
.section-line{
  display:block;
  width:60px;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--purple));
  border-radius:4px;
}
.section-desc{
  text-align:center;
  color:var(--text-secondary);
  font-size:1.05rem;
  max-width:600px;
  margin:0 auto 48px;
}

/* ═══════════════ HERO ═══════════════ */
.hero{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 24px;
  overflow:hidden;
}
.hero-glow{
  position:absolute;
  width:800px;height:800px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,0.12) 0%,rgba(255,215,0,0.06) 40%,transparent 70%);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  animation:heroGlow 8s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes heroGlow{
  0%{transform:translate(-50%,-50%) scale(1);opacity:0.7}
  100%{transform:translate(-50%,-50%) scale(1.2);opacity:1}
}
.hero-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(255,215,0,0.08);
  border:1px solid rgba(255,215,0,0.2);
  padding:8px 20px;
  border-radius:100px;
  margin-bottom:32px;
  animation:fadeInUp 0.8s var(--ease-out) both;
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,6rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:24px;
  animation:fadeInUp 0.8s var(--ease-out) 0.15s both;
}
.title-icon{
  display:inline-block;
  font-size:0.7em;
  margin-right:8px;
  filter:drop-shadow(0 0 20px rgba(255,215,0,0.5));
  animation:swordSwing 3s ease-in-out infinite;
}
@keyframes swordSwing{
  0%,100%{transform:rotate(-5deg)}
  50%{transform:rotate(5deg)}
}
.title-text{
  background:linear-gradient(135deg,var(--gold) 0%,#fff 40%,var(--gold) 60%,#fff 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}
@keyframes shimmer{
  to{background-position:200% center}
}
.hero-subtitle{
  font-size:clamp(1rem,2.5vw,1.25rem);
  color:var(--text-secondary);
  line-height:1.8;
  max-width:650px;
  margin:0 auto 40px;
  animation:fadeInUp 0.8s var(--ease-out) 0.3s both;
}
.highlight{
  color:var(--gold);
  font-weight:600;
  position:relative;
}
.highlight::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;
  width:100%;height:2px;
  background:var(--gold);
  opacity:0.3;
  border-radius:2px;
}

/* ─── Buttons ─── */
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
  animation:fadeInUp 0.8s var(--ease-out) 0.45s both;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-md);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:600;
  border:none;
  cursor:pointer;
  transition:all 0.3s var(--ease-out);
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15) 0%,transparent 50%);
  opacity:0;
  transition:opacity 0.3s;
}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(0.96)}
.btn-icon{font-size:0.9em}

.btn-primary{
  background:linear-gradient(135deg,var(--gold) 0%,#f59e0b 100%);
  color:#0a0a12;
  box-shadow:0 4px 24px rgba(255,215,0,0.3),0 0 0 1px rgba(255,215,0,0.1);
}
.btn-primary:hover{
  box-shadow:0 8px 40px rgba(255,215,0,0.45),0 0 0 1px rgba(255,215,0,0.2);
  transform:translateY(-2px);
}
.btn-secondary{
  background:linear-gradient(135deg,var(--purple) 0%,#9333ea 100%);
  color:white;
  box-shadow:0 4px 24px rgba(124,58,237,0.25);
}
.btn-secondary:hover{
  box-shadow:0 8px 40px rgba(124,58,237,0.4);
  transform:translateY(-2px);
}
.btn-ghost{
  background:rgba(255,255,255,0.05);
  color:var(--text-secondary);
  border:1px solid var(--border-glow);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.1);
  color:var(--text-primary);
  border-color:rgba(255,255,255,0.2);
}
.btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none !important;
}

/* Scroll indicator */
.scroll-indicator{
  position:absolute;
  bottom:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-dim);
  font-size:0.8rem;
  animation:fadeInUp 0.8s var(--ease-out) 0.6s both;
}
.scroll-arrow{
  animation:scrollBounce 2s ease-in-out infinite;
  font-size:0.7rem;
}
@keyframes scrollBounce{
  0%,100%{transform:translateY(0);opacity:0.4}
  50%{transform:translateY(8px);opacity:1}
}

/* ═══════════════ CHARACTER CARDS ═══════════════ */
.characters-section{
  background:linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-dark) 100%);
}
.character-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media(max-width:900px){.character-grid{grid-template-columns:1fr}}
@media(min-width:901px) and (max-width:1100px){.character-grid{grid-template-columns:repeat(2,1fr)}}

.char-card{
  position:relative;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 24px;
  text-align:center;
  transition:all 0.4s var(--ease-out);
  overflow:hidden;
}
.char-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.char-card.barbarian::before{background:linear-gradient(90deg,var(--fire),#f97316)}
.char-card.wizard::before{background:linear-gradient(90deg,var(--purple),#a855f7)}
.char-card.rogue::before{background:linear-gradient(90deg,var(--rogue-green),#34d399)}

.char-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-glow);
}
.char-card.barbarian:hover{box-shadow:0 20px 60px rgba(239,68,68,0.15),0 0 0 1px rgba(239,68,68,0.15)}
.char-card.wizard:hover{box-shadow:0 20px 60px rgba(124,58,237,0.15),0 0 0 1px rgba(124,58,237,0.15)}
.char-card.rogue:hover{box-shadow:0 20px 60px rgba(16,185,129,0.15),0 0 0 1px rgba(16,185,129,0.15)}

.char-card.active-char{
  border-color:var(--gold) !important;
  box-shadow:0 0 40px var(--gold-glow),0 0 0 2px var(--gold) !important;
}
.char-card.active-char .char-glow{opacity:1}

.char-glow{
  position:absolute;
  inset:-50%;
  opacity:0;
  transition:opacity 0.6s;
  pointer-events:none;
  z-index:0;
}
.barbarian .char-glow{background:radial-gradient(circle at 50% 30%,rgba(239,68,68,0.08),transparent 60%)}
.wizard .char-glow{background:radial-gradient(circle at 50% 30%,rgba(124,58,237,0.08),transparent 60%)}
.rogue .char-glow{background:radial-gradient(circle at 50% 30%,rgba(16,185,129,0.08),transparent 60%)}

.char-pid{
  position:absolute;
  top:14px;right:16px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--text-dim);
  background:rgba(255,255,255,0.04);
  padding:3px 8px;
  border-radius:6px;
  z-index:1;
}
.char-avatar{
  font-size:3.5rem;
  margin-bottom:12px;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.char-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  margin-bottom:4px;
  position:relative;z-index:1;
}
.char-role{
  font-size:0.8rem;
  color:var(--text-dim);
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:20px;
  position:relative;z-index:1;
}

/* Stats */
.char-stats{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
  position:relative;z-index:1;
}
.stat{
  display:flex;
  align-items:center;
  gap:10px;
}
.stat-label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--text-dim);
  width:32px;
  text-align:right;
}
.stat-bar{
  flex:1;
  height:6px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:hidden;
}
.stat-fill{
  height:100%;
  border-radius:10px;
  transition:width 0.8s var(--ease-out);
}
.hp-fill{background:linear-gradient(90deg,var(--fire),#f97316)}
.atk-fill{background:linear-gradient(90deg,#f97316,var(--gold))}
.int-fill{background:linear-gradient(90deg,var(--purple),#a855f7)}
.dex-fill{background:linear-gradient(90deg,var(--rogue-green),#34d399)}
.stat-val{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-secondary);
  width:28px;
}

.char-ability{
  font-size:0.8rem;
  color:var(--text-dim);
  padding:10px;
  background:rgba(255,255,255,0.02);
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  margin-bottom:16px;
  position:relative;z-index:1;
  text-align:left;
}
.ability-label{
  font-weight:600;
  color:var(--text-secondary);
}

.char-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--text-secondary);
  position:relative;z-index:1;
}
.status-dot{
  width:8px;height:8px;
  border-radius:50%;
  display:inline-block;
}
.status-dot.idle{background:var(--text-dim)}
.status-dot.active{background:var(--gold);box-shadow:0 0 10px var(--gold-glow);animation:pulse 1.2s ease-in-out infinite}
.status-dot.done{background:var(--rogue-green);box-shadow:0 0 10px var(--rogue-glow)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.3)}}

/* ═══════════════ DUNGEON MAP ═══════════════ */
.dungeon-section{
  background:var(--bg-dark);
}

/* Narration */
.narration-box{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  background:linear-gradient(135deg,rgba(255,215,0,0.04),rgba(124,58,237,0.04));
  border:1px solid rgba(255,215,0,0.12);
  border-radius:var(--radius-md);
  margin-bottom:48px;
  font-size:0.95rem;
  color:var(--text-primary);
  line-height:1.7;
  transition:all 0.4s var(--ease-out);
}
.narration-icon{font-size:1.5rem;flex-shrink:0;margin-top:2px}

/* Map */
.dungeon-map{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  padding:40px 0 60px;
  margin-bottom:48px;
}
.map-track{
  position:absolute;
  top:50%;left:10%;right:10%;
  height:4px;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  transform:translateY(-10px);
  z-index:0;
}
.map-progress{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--gold),var(--purple));
  border-radius:4px;
  transition:width 0.8s var(--ease-out);
  box-shadow:0 0 12px var(--gold-glow);
}

.stage-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  position:relative;
  z-index:1;
  flex:1;
}
.stage-marker{
  width:64px;height:64px;
  border-radius:50%;
  background:var(--bg-card);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:all 0.4s var(--ease-out);
}
.stage-icon{font-size:1.5rem;position:relative;z-index:1}
.stage-pulse{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid transparent;
  opacity:0;
  transition:all 0.4s;
}

.stage-node.active .stage-marker{
  border-color:var(--gold);
  background:rgba(255,215,0,0.1);
  box-shadow:0 0 24px var(--gold-glow);
}
.stage-node.active .stage-pulse{
  border-color:var(--gold);
  opacity:0.5;
  animation:stagePulse 2s ease-in-out infinite;
}
@keyframes stagePulse{
  0%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.3);opacity:0}
  100%{transform:scale(1);opacity:0.5}
}
.stage-node.completed .stage-marker{
  border-color:var(--rogue-green);
  background:rgba(16,185,129,0.1);
  box-shadow:0 0 16px var(--rogue-glow);
}
.stage-node.completed .stage-icon::after{
  content:'✓';
  position:absolute;
  bottom:-4px;right:-8px;
  font-size:0.7rem;
  background:var(--rogue-green);
  color:white;
  width:16px;height:16px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}

.stage-label{
  font-family:var(--font-display);
  font-size:0.95rem;
  font-weight:600;
  color:var(--text-primary);
}
.stage-sub{
  font-size:0.75rem;
  color:var(--text-dim);
}

/* ─── Stage Detail Panels ─── */
.detail-panel{
  display:none;
  animation:panelIn 0.5s var(--ease-out) both;
}
.detail-panel.visible{display:block}
@keyframes panelIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.panel-header h3{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
}
.panel-badge{
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:100px;
  letter-spacing:0.5px;
}
.barbarian-bg{background:rgba(239,68,68,0.15);color:var(--fire)}
.wizard-bg{background:rgba(124,58,237,0.15);color:var(--purple)}
.rogue-bg{background:rgba(16,185,129,0.15);color:var(--rogue-green)}
.treasure-bg{background:rgba(255,215,0,0.15);color:var(--gold)}

.panel-body{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px;
  overflow:hidden;
}

/* ─── Enemy Encounter ─── */
.encounter-arena{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.arena-entity{
  text-align:center;
  min-width:120px;
}
.entity-icon{
  font-size:3rem;
  margin-bottom:8px;
  transition:all 0.3s;
}
.entity-icon.attack-anim{
  animation:attackShake 0.4s ease-in-out;
}
@keyframes attackShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(20px) rotate(10deg)}
  75%{transform:translateX(-10px) rotate(-5deg)}
}
.entity-icon.hit-anim{
  animation:hitFlash 0.3s;
}
@keyframes hitFlash{
  0%{filter:brightness(1)}
  50%{filter:brightness(3) hue-rotate(30deg)}
  100%{filter:brightness(1)}
}
.entity-name{
  font-family:var(--font-display);
  font-weight:600;
  margin-bottom:8px;
  font-size:0.95rem;
}
.entity-hp-bar{
  width:140px;
  height:8px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:hidden;
  margin:0 auto;
}
.entity-hp-fill{
  height:100%;
  border-radius:10px;
  transition:width 0.5s var(--ease-out);
}
.barb-hp{background:linear-gradient(90deg,var(--fire),#f97316)}
.enemy-hp{background:linear-gradient(90deg,#ef4444,#991b1b)}
.enemy-hp-text{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-dim);
  margin-top:6px;
}
.arena-vs{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:900;
  color:var(--gold);
  text-shadow:0 0 20px var(--gold-glow);
}

/* ─── Shared Memory Panel ─── */
.shm-panel{
  background:rgba(124,58,237,0.05);
  border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-md);
  padding:18px 20px;
  margin-top:20px;
}
.shm-title{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--purple);
  margin-bottom:14px;
  font-weight:600;
}
.shm-fields{display:flex;flex-direction:column;gap:8px}
.shm-field{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.8rem;
  flex-wrap:wrap;
}
.shm-key{color:var(--cyan);min-width:100px}
.shm-arrow{color:var(--text-dim);font-size:1rem}
.shm-value{
  color:var(--gold);
  font-weight:600;
  background:rgba(255,215,0,0.08);
  padding:3px 10px;
  border-radius:6px;
  transition:all 0.3s;
  min-width:40px;
  text-align:center;
}
.shm-value.flash{
  background:rgba(255,215,0,0.25);
  box-shadow:0 0 12px var(--gold-glow);
}
.shm-note{
  color:var(--text-dim);
  font-size:0.7rem;
  font-style:italic;
  margin-left:auto;
}

/* ─── Cipher Arena ─── */
.cipher-arena{margin-bottom:24px}
.cipher-label{
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--purple);
  margin-bottom:20px;
}
.cipher-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.cipher-block{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 24px;
  min-width:200px;
  text-align:center;
}
.cipher-title{
  font-size:0.75rem;
  color:var(--text-dim);
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:10px;
}
.cipher-text{
  font-family:var(--font-mono);
  font-size:1.3rem;
  font-weight:600;
  color:var(--fire);
  letter-spacing:3px;
  min-height:1.6em;
}
.cipher-text.decoded{color:var(--rogue-green)}
.cipher-arrow-box{font-size:2rem;color:var(--purple)}
.cipher-arrow-anim{
  display:inline-block;
  animation:arrowPulse 1.5s ease-in-out infinite;
}
@keyframes arrowPulse{
  0%,100%{opacity:0.4;transform:translateX(0)}
  50%{opacity:1;transform:translateX(6px)}
}
.cursor-blink{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ─── Lock Arena ─── */
.lock-arena{
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.lock-visual{
  text-align:center;
  min-width:120px;
}
.lock-icon{
  font-size:4rem;
  transition:all 0.5s var(--ease-spring);
}
.lock-icon.unlocked{
  filter:hue-rotate(100deg) brightness(1.3);
  transform:scale(1.2);
}
.lock-target{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--text-dim);
  margin-top:8px;
}
.binary-search-viz{flex:1;min-width:260px}
.bs-title{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--rogue-green);
  margin-bottom:14px;
  font-weight:600;
}
.bs-range{
  height:32px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:12px;
  position:relative;
  overflow:hidden;
}
.bs-marker{
  position:absolute;
  top:0;height:100%;
  width:3px;
  background:var(--rogue-green);
  box-shadow:0 0 8px var(--rogue-glow);
  transition:left 0.4s var(--ease-out);
  z-index:2;
}
.bs-range-fill{
  position:absolute;
  top:0;height:100%;
  background:rgba(16,185,129,0.1);
  transition:all 0.4s var(--ease-out);
}
.bs-status{
  display:flex;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--text-dim);
  margin-bottom:12px;
}
.bs-status strong{color:var(--rogue-green)}
.bs-guess-log{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.bs-guess-tag{
  font-family:var(--font-mono);
  font-size:0.7rem;
  padding:3px 8px;
  border-radius:6px;
  animation:tagIn 0.3s var(--ease-spring) both;
}
@keyframes tagIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
.bs-guess-tag.too-low{background:rgba(59,130,246,0.15);color:#60a5fa}
.bs-guess-tag.too-high{background:rgba(239,68,68,0.15);color:#f87171}
.bs-guess-tag.correct{background:rgba(16,185,129,0.2);color:var(--rogue-green);font-weight:600}

/* ─── Treasure Arena ─── */
.treasure-arena{text-align:center}
.sem-door{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:32px;
  height:120px;
}
.door-left,.door-right{
  width:80px;height:100px;
  background:linear-gradient(180deg,#4a3728,#2d1f14);
  border:2px solid #6b4c30;
  display:flex;align-items:center;justify-content:center;
  font-size:2.5rem;
  transition:all 0.8s var(--ease-out);
  position:relative;
  z-index:2;
}
.door-left{
  border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  transform-origin:left center;
}
.door-right{
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  transform-origin:right center;
}
.door-left.open{transform:perspective(800px) rotateY(-70deg);opacity:0.6}
.door-right.open{transform:perspective(800px) rotateY(70deg);opacity:0.6}
.door-gap{
  width:0;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:width 0.8s var(--ease-out);
  position:relative;
  z-index:1;
}
.door-gap.open{width:80px}
.treasure-chest{
  font-size:2.5rem;
  opacity:0;
  transform:scale(0);
  transition:all 0.6s var(--ease-spring) 0.3s;
}
.treasure-chest.visible{
  opacity:1;
  transform:scale(1);
  filter:drop-shadow(0 0 20px rgba(255,215,0,0.6));
  animation:treasureGlow 1.5s ease-in-out infinite alternate;
}
@keyframes treasureGlow{
  from{filter:drop-shadow(0 0 10px rgba(255,215,0,0.4))}
  to{filter:drop-shadow(0 0 30px rgba(255,215,0,0.8))}
}

.sem-levers{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.lever{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 24px;
  min-width:160px;
  transition:all 0.4s var(--ease-out);
}
.lever.holding{
  border-color:var(--gold);
  box-shadow:0 0 20px var(--gold-glow);
  background:rgba(255,215,0,0.05);
}
.lever-char{font-size:1.8rem;margin-bottom:6px}
.lever-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.9rem;
  margin-bottom:6px;
}
.lever-action{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--purple);
  margin-bottom:8px;
}
.lever-status{
  font-size:0.75rem;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.sem-indicator{
  width:8px;height:8px;
  border-radius:50%;
  display:inline-block;
  transition:all 0.3s;
}
.sem-indicator.off{background:var(--text-dim)}
.sem-indicator.on{background:var(--rogue-green);box-shadow:0 0 10px var(--rogue-glow)}

.sem-diagram{
  background:rgba(124,58,237,0.05);
  border:1px solid rgba(124,58,237,0.15);
  border-radius:var(--radius-md);
  padding:18px 24px;
  display:inline-block;
}
.sem-title{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--purple);
  margin-bottom:14px;
  font-weight:600;
}
.sem-slots{
  display:flex;
  justify-content:center;
  gap:24px;
  margin-bottom:12px;
}
.sem-slot{
  text-align:center;
}
.sem-slot-label{
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--text-dim);
  margin-bottom:6px;
}
.sem-slot-val{
  font-family:var(--font-mono);
  font-size:1.6rem;
  font-weight:700;
  color:var(--gold);
  transition:all 0.3s;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,215,0,0.06);
  border:1px solid rgba(255,215,0,0.2);
  border-radius:var(--radius-sm);
  margin:0 auto;
}
.sem-slot-val.zero{color:var(--fire);border-color:rgba(239,68,68,0.3);background:rgba(239,68,68,0.06)}
.sem-rogue-status{
  font-family:var(--font-mono);
  font-size:0.8rem;
  color:var(--text-secondary);
  margin-top:4px;
}

/* ═══════════════ IPC LOG ═══════════════ */
.ipc-section{
  background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-deep) 100%);
}
.ipc-log{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:20px;
  max-height:400px;
  overflow-y:auto;
  font-family:var(--font-mono);
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ipc-log::-webkit-scrollbar{width:6px}
.ipc-log::-webkit-scrollbar-track{background:transparent}
.ipc-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:10px}

.ipc-entry{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.02);
  animation:logIn 0.3s var(--ease-out) both;
  flex-wrap:wrap;
}
@keyframes logIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

.ipc-time{
  color:var(--text-dim);
  min-width:72px;
  font-size:0.7rem;
}
.ipc-badge{
  padding:2px 8px;
  border-radius:4px;
  font-size:0.65rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  min-width:56px;
  text-align:center;
}
.ipc-badge.sys{background:rgba(107,114,128,0.2);color:#9ca3af}
.ipc-badge.signal{background:rgba(255,215,0,0.15);color:var(--gold)}
.ipc-badge.shm{background:rgba(124,58,237,0.15);color:var(--purple)}
.ipc-badge.sem{background:rgba(6,182,212,0.15);color:var(--cyan)}
.ipc-badge.fork{background:rgba(16,185,129,0.15);color:var(--rogue-green)}
.ipc-badge.action{background:rgba(239,68,68,0.15);color:var(--fire)}
.ipc-msg{
  color:var(--text-secondary);
  flex:1;
  min-width:0;
}

/* ═══════════════ ARCHITECTURE ═══════════════ */
.arch-section{
  background:var(--bg-deep);
}
.arch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
@media(max-width:900px){.arch-grid{grid-template-columns:1fr}}
@media(min-width:901px) and (max-width:1100px){.arch-grid{grid-template-columns:repeat(2,1fr)}}

.arch-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:all 0.4s var(--ease-out);
}
.arch-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-glow);
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.arch-icon{
  font-size:2rem;
  margin-bottom:14px;
}
.arch-card h3{
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:10px;
  color:var(--text-primary);
}
.arch-card p{
  font-size:0.85rem;
  color:var(--text-secondary);
  line-height:1.7;
}

/* ═══════════════ FOOTER ═══════════════ */
.footer{
  position:relative;
  z-index:1;
  border-top:1px solid var(--border);
  padding:40px 0;
  background:var(--bg-deep);
}
.footer-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.footer-logo{font-size:1.4rem}
.footer-name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
}
.footer-sep{color:var(--text-dim)}
.footer-tagline{font-size:0.85rem;color:var(--text-dim)}
.footer-link{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--text-secondary);
  transition:color 0.3s;
}
.footer-link:hover{color:var(--gold)}
.footer-bottom{
  text-align:center;
  font-size:0.8rem;
  color:var(--text-dim);
}

/* ═══════════════ ANIMATIONS ═══════════════ */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* Victory overlay */
.victory-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,18,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  animation:fadeIn 0.5s both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.victory-content{
  text-align:center;
  animation:victoryIn 0.8s var(--ease-spring) both;
}
@keyframes victoryIn{from{opacity:0;transform:scale(0.7)}to{opacity:1;transform:scale(1)}}
.victory-icon{font-size:6rem;margin-bottom:20px;animation:treasureGlow 1.5s ease-in-out infinite alternate}
.victory-title{
  font-family:var(--font-display);
  font-size:2.5rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--gold),#fff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:12px;
}
.victory-sub{
  color:var(--text-secondary);
  font-size:1.1rem;
  margin-bottom:28px;
}
.victory-close{
  padding:12px 32px;
  background:var(--gold);
  color:var(--bg-deep);
  border:none;
  border-radius:var(--radius-md);
  font-family:var(--font-body);
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:all 0.3s;
}
.victory-close:hover{transform:scale(1.05);box-shadow:0 0 30px var(--gold-glow)}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:640px){
  .section{padding:60px 0}
  .section-title{font-size:1.6rem}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .dungeon-map{flex-direction:column;gap:20px}
  .map-track{display:none}
  .encounter-arena{flex-direction:column;gap:20px}
  .lock-arena{flex-direction:column}
  .cipher-row{flex-direction:column}
  .panel-body{padding:20px 16px}
  .sem-levers{flex-direction:column;align-items:center}
  .ipc-entry{font-size:0.7rem;gap:8px}
}