/* === The Potion Cellar — Theme === */

:root {
  --parch: #f2e8d0;
  --parch2: #e8d8b8;
  --ink: #1c1208;
  --ink2: #2e1e0c;
  --bg: #0d0a06;
  --bg2: #14100a;
  --amber: #c8903a;
  --amber2: #e8b060;
  --amber3: #f0c878;
  --amber-dim: rgba(200,144,58,.35);
  --wood: #3e2a10;
  --wood2: #5a3c18;
  --stone: #2a2018;
  --shelf: #1c1408;
  --void: #4a1888;
  --void2: #8040d0;
  --glow: #c87010;
  --glow2: #f0a030;
  --tincture: #205080;
  --tincture2: #4098c0;
  --card: #1a1208;
  --serif: "IM Fell English", "Palatino Linotype", serif;
  --display: "Cinzel", "Palatino Linotype", serif;
  --mono: "Share Tech Mono", "Courier New", monospace;
  --border: rgba(200,144,58,.28);
  --border2: rgba(200,144,58,.48);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--parch);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--amber2);
  letter-spacing: 0.04em;
}

h1 { font-size: 2.4rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; }

p { margin-bottom: 0.5em; }

strong { color: var(--amber3); font-weight: 600; }

.u { text-decoration: underline; text-decoration-color: var(--amber-dim); }

/* Buttons */
.btn-parchment {
  font-family: var(--display);
  font-size: 1rem;
  padding: 0.6em 1.8em;
  background: linear-gradient(180deg, var(--wood2) 0%, var(--wood) 100%);
  color: var(--parch);
  border: 1px solid var(--border2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.05em;
}

.btn-parchment:hover {
  background: linear-gradient(180deg, var(--amber) 0%, var(--wood2) 100%);
  color: #fff;
  border-color: var(--amber2);
  box-shadow: 0 0 12px rgba(200,144,58,.3);
}

.btn-parchment:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-parchment:disabled:hover {
  background: linear-gradient(180deg, var(--wood2) 0%, var(--wood) 100%);
  color: var(--parch);
  border-color: var(--border2);
  box-shadow: none;
}

.btn-close {
  font-size: 1.8rem;
  background: none;
  border: none;
  color: var(--amber);
  cursor: pointer;
  line-height: 1;
  padding: 0 0.3em;
  transition: color 0.2s;
}

.btn-close:hover {
  color: var(--amber3);
}

.btn-side {
  display: block;
  width: 100%;
  font-family: var(--display);
  font-size: 0.95rem;
  padding: 0.5em 0;
  margin-top: 0.5em;
  background: rgba(200,144,58,.08);
  color: var(--amber);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.04em;
}

.btn-side:hover {
  background: rgba(200,144,58,.18);
  border-color: var(--border2);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg2);
}
::-webkit-scrollbar-thumb {
  background: var(--wood);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--wood2);
}

/* Selection */
::selection {
  background: var(--amber-dim);
  color: var(--parch);
}

/* Animations */
@keyframes flicker {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  10% { opacity: 0.85; transform: scaleY(0.96); }
  20% { opacity: 0.95; transform: scaleY(1.02); }
  40% { opacity: 0.88; transform: scaleY(0.98); }
  60% { opacity: 1; transform: scaleY(1.01); }
  80% { opacity: 0.92; transform: scaleY(0.97); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(200,144,58,.2); }
  50% { box-shadow: 0 0 18px rgba(200,144,58,.5); }
}

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

@keyframes critical-pulse {
  0%, 100% { background: #882020; }
  50% { background: #cc3030; }
}

@keyframes text-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}