:root {
  --bg: #0a0a0d;
  --amber: #ffb020;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'IBM Plex Mono', monospace;
  color: #e5e5e5;
  background-image:
    radial-gradient(ellipse at top, #16161c 0%, #0a0a0d 55%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 3px);
  min-height: 100vh;
}

/* Vignette overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.85);
}
#root { position: relative; z-index: 2; }

/* Header */
.header-glow {
  background: rgba(10,10,13,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,176,32,0.14);
}

/* Title flicker */
.title-flicker {
  color: #f5f0e6;
  text-shadow: 0 0 12px rgba(255,176,32,0.25);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.55; }
  94% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
}
.flicker { animation: flicker 1.5s infinite; }

.door-icon { filter: drop-shadow(0 0 6px rgba(255,176,32,0.4)); }

/* Nav tabs */
.nav-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  color: #9a9a9a;
}
.nav-tab:hover { color: #ddd; border-color: rgba(255,176,32,0.3); }
.nav-tab[data-active="true"] {
  background: rgba(255,176,32,0.12);
  border-color: rgba(255,176,32,0.55);
  color: #ffcf6b;
  box-shadow: 0 0 16px rgba(255,176,32,0.15);
}
.nav-scroll::-webkit-scrollbar { height: 4px; }
.nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,176,32,0.3); border-radius: 4px; }

/* Section divider */
.section-divider {
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,176,32,0.4) 0 8px, transparent 8px 16px);
}

/* Boss / room cards */
.boss-card, .room-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 40px rgba(0,0,0,0.25);
  transition: box-shadow .3s, transform .3s, border-color .3s;
}
.boss-card:hover, .room-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent);
}

.callout { backdrop-filter: blur(2px); }

.entry-box {
  background: rgba(255,176,32,0.05);
  border: 1px dashed rgba(255,176,32,0.3);
}
.inv-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.badge-glow { backdrop-filter: blur(2px); }

.nomove-box {
  animation: pulse-red 1.6s infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 rgba(255,59,59,0); }
  50% { box-shadow: 0 0 18px rgba(255,59,59,0.35); }
}

.reward-banner {
  background: radial-gradient(ellipse at center, rgba(255,176,32,0.12), rgba(255,176,32,0.02));
  border: 1px solid rgba(255,176,32,0.35);
  box-shadow: 0 0 30px rgba(255,176,32,0.12);
}

.timer-demo {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(57,255,136,0.2);
}
.timer-pulse { animation: tpulse 1s infinite; }
@keyframes tpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

.scroll-top-btn {
  background: rgba(255,176,32,0.15);
  border: 1px solid rgba(255,176,32,0.5);
  box-shadow: 0 0 18px rgba(255,176,32,0.25);
  cursor: pointer;
  transition: transform .2s;
}
.scroll-top-btn:hover { transform: translateY(-3px) scale(1.05); }

button { cursor: pointer; }

/* Entry animation */
.fade-up {
  animation: fadeUp .5s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}