/* ============================================================
   The Labyrinth of Trials — gamebook site stylesheet
   ============================================================ */
:root {
  --parch: #e8dcc0;
  --parch-dark: #d8c9a8;
  --ink: #2b2118;
  --ink-faded: #5a4a38;
  --gold: #c9a227;
  --gold-bright: #ffd76a;
  --blood: #7a1f1f;
  --stone: #16130f;
  --stone-2: #241e17;
  --stone-3: #332a20;
  --torch: #ff9d3c;
  --font-body: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: "Trattatello", "Papyrus", "Trajan Pro", Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 700px at 20% -10%, #2e2619 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 110%, #262016 0%, transparent 55%),
    var(--stone);
  color: var(--parch);
  min-height: 100vh;
  line-height: 1.7;
}

/* ---------- ambient dust + torch flicker ---------- */
.dust {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.dust i {
  position: absolute; bottom: -10px;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(255, 220, 160, .55);
  filter: blur(.5px);
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .3; }
  100% { transform: translateY(-105vh) translateX(6vw); opacity: 0; }
}
body::after { /* flicker veil */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,157,60,.05), transparent 55%);
  animation: torchflicker 7s ease-in-out infinite;
}
@keyframes torchflicker {
  0%, 100% { opacity: .55; }
  28% { opacity: .8; }
  52% { opacity: .4; }
  71% { opacity: .9; }
}

/* ---------- layout ---------- */
.page-wrap {
  position: relative; z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 20px 90px;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0 22px;
  border-bottom: 1px solid rgba(201,162,39,.25);
  margin-bottom: 26px;
}
.topbar .brand {
  font-family: var(--font-display);
  color: var(--gold);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.topbar .nav a {
  color: var(--parch-dark); text-decoration: none; font-size: .85rem;
  margin-left: 18px; letter-spacing: .06em;
}
.topbar .nav a:hover { color: var(--gold-bright); }

/* ---------- section page ---------- */
.section-no {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 18px;
}
.section-no::after {
  content: ""; display: block; width: 90px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
h1.section-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--parch-dark); margin-bottom: 8px; letter-spacing: .08em; }

.section-img {
  width: 100%;
  border: 3px solid #000;
  outline: 1px solid rgba(201,162,39,.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.6), inset 0 0 60px rgba(0,0,0,.35);
  margin: 4px 0 20px;
  filter: saturate(.92) contrast(1.04);
}

.prose {
  background: var(--parch);
  color: var(--ink);
  padding: 34px 38px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 50px rgba(0,0,0,.55);
  position: relative;
  font-size: 1.08rem;
}
.prose::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid rgba(90,74,56,.25);
  pointer-events: none;
}
.prose p { margin-bottom: 1em; }
.prose .verse { font-style: italic; text-align: center; margin: 1.2em 0; }
.prose strong { letter-spacing: .04em; }

/* widgets inside parchment */
.widget {
  margin: 1.4em 0;
  padding: 16px 18px;
  border: 1px dashed var(--ink-faded);
  border-radius: 4px;
  background: rgba(43,33,24,.04);
}
.widget h4 {
  font-family: var(--font-display);
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faded); margin-bottom: 10px;
}
.widget .result { font-weight: 700; min-height: 1.4em; }
.widget .dice { font-size: 2rem; letter-spacing: .4em; margin: 6px 0; }

/* choices */
.choices { margin-top: 26px; }
.choices .hint {
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
a.turn {
  display: block;
  background: linear-gradient(180deg, #2c241a, #201a13);
  border: 1px solid rgba(201,162,39,.45);
  color: var(--parch);
  text-decoration: none;
  padding: 13px 20px;
  margin-bottom: 10px;
  border-radius: 3px;
  font-size: 1rem;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  position: relative;
}
a.turn:hover {
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, #3a2f21, #261f16);
  transform: translateX(4px);
}
a.turn .n {
  color: var(--gold);
  font-family: var(--font-display);
  margin-left: auto; float: right; letter-spacing: .08em;
}
a.turn .req-tag {
  display: inline-block; font-size: .72rem; letter-spacing: .1em;
  color: var(--gold-bright); border: 1px solid rgba(255,215,106,.4);
  padding: 1px 7px; border-radius: 10px; margin-left: 8px; vertical-align: 1px;
}

/* death / victory styling */
.page-death .prose {
  background: linear-gradient(180deg, #200a0a, #170707);
  color: #e8c9b5;
}
.page-death .section-no { color: #b34040; }
.page-death .prose::before { border-color: rgba(179,64,64,.35); }
.page-death .title-woe {
  font-family: var(--font-display); color: #b34040; letter-spacing: .3em;
  text-transform: uppercase; font-size: .85rem; margin-bottom: 14px;
}
.page-victory .section-no { color: var(--gold-bright); }
.page-victory .title-triumph {
  font-family: var(--font-display); color: var(--gold-bright); letter-spacing: .3em;
  text-transform: uppercase; font-size: .85rem; margin-bottom: 14px;
}

/* ---------- page transitions ---------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.page-anim { animation: pageIn .55s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes pageOut {
  to { opacity: 0; transform: translateY(-14px) scale(.99); filter: blur(2px); }
}
.page-exit { animation: pageOut .28s ease both; }

/* ---------- buttons ---------- */
button {
  font-family: var(--font-body);
  background: linear-gradient(180deg, #3a2f21, #261f16);
  border: 1px solid rgba(201,162,39,.5);
  color: var(--parch);
  padding: 9px 18px;
  border-radius: 3px;
  cursor: pointer;
  font-size: .95rem;
  transition: border-color .15s, transform .1s;
}
button:hover { border-color: var(--gold-bright); }
button:active { transform: scale(.97); }
button:disabled { opacity: .45; cursor: default; }
button.small { padding: 5px 12px; font-size: .82rem; }

/* on parchment, invert button palette */
.prose button {
  background: linear-gradient(180deg, #efe4c9, #e2d4b2);
  color: var(--ink);
  border: 1px solid var(--ink-faded);
}
.prose button:hover { border-color: var(--ink); background: linear-gradient(180deg, #f7eed8, #e8dcc0); }

/* ---------- adventure sheet drawer ---------- */
.sheet-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  width: 66px; height: 66px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #54432e, #2c2317);
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 1.5rem; line-height: 1;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.sheet-toggle span { font-size: .58rem; letter-spacing: .18em; }
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
  width: min(370px, 94vw);
  background: linear-gradient(180deg, #efe4c9, #ddcfae);
  color: var(--ink);
  box-shadow: -14px 0 50px rgba(0,0,0,.55);
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
  padding: 22px 22px 40px;
  border-left: 3px solid var(--gold);
}
.sheet.open { transform: none; }
.sheet h2 {
  font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  font-size: 1rem; color: var(--ink); margin-bottom: 4px;
}
.sheet .sub { font-size: .78rem; color: var(--ink-faded); margin-bottom: 14px; }
.sheet-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--ink-faded); font-size: 1.3rem;
}
.stat-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.stat-row .lbl { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faded); width: 84px; }
.stat-val { font-size: 1.25rem; font-weight: 700; min-width: 60px; }
.bar { flex: 1; height: 9px; background: rgba(43,33,24,.15); border-radius: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; transition: width .3s; }
.bar .st { background: linear-gradient(90deg, #9c2f2f, #d15b5b); }
.bar .sk { background: linear-gradient(90deg, #2f6a9c, #5b9dd1); }
.bar .lk { background: linear-gradient(90deg, #2f9c52, #7bd18e); }
.sheet .divider { border-top: 1px solid rgba(43,33,24,.25); margin: 16px 0; }
.sheet .items li { font-size: .92rem; margin-bottom: 4px; }
.sheet .dice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sheet .note { font-size: .8rem; color: var(--ink-faded); margin-top: 8px; }

/* combat block in sheet */
.combat-monster { border: 1px solid rgba(43,33,24,.3); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px; background: rgba(255,255,255,.25); }
.combat-monster .m-name { font-weight: 700; font-size: .95rem; }
.combat-monster .m-stats { font-size: .82rem; color: var(--ink-faded); }
.combat-log { font-size: .82rem; background: rgba(43,33,24,.06); padding: 8px 10px; border-radius: 4px; max-height: 180px; overflow-y: auto; margin-top: 10px; }
.combat-log div { margin-bottom: 3px; }
.combat-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- cover page ---------- */
.cover {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px;
}
.cover .over { letter-spacing: .5em; text-transform: uppercase; font-size: .8rem; color: var(--parch-dark); }
.cover h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  color: var(--gold-bright);
  text-shadow: 0 4px 30px rgba(0,0,0,.8), 0 0 60px rgba(201,162,39,.25);
  margin: 10px 0 6px;
}
.cover .author { color: var(--parch-dark); font-style: italic; margin-bottom: 30px; }
.cover-img {
  width: min(560px, 90vw);
  border: 4px solid #000;
  outline: 1px solid rgba(201,162,39,.5);
  box-shadow: 0 20px 80px rgba(0,0,0,.75);
  margin-bottom: 36px;
}
.cover .cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cover .cta a {
  text-decoration: none; padding: 14px 30px; font-size: 1rem;
  background: linear-gradient(180deg, #3a2f21, #261f16);
  border: 1px solid var(--gold); color: var(--parch); border-radius: 3px;
  transition: all .2s;
}
.cover .cta a:hover { border-color: var(--gold-bright); transform: translateY(-2px); }

/* rules page */
.rules-cols { column-gap: 40px; }
.rules-cols h3 {
  font-family: var(--font-display); color: var(--ink);
  letter-spacing: .08em; margin: 1.2em 0 .4em;
  break-after: avoid;
}

/* footer */
.foot {
  text-align: center; color: rgba(216,201,168,.4); font-size: .75rem;
  margin-top: 60px; letter-spacing: .08em;
}

@media (max-width: 640px) {
  .prose { padding: 24px 20px; }
  .section-no { font-size: 2rem; }
}