:root {
  --ink: #2b1d12;
  --ink-soft: #5a4330;
  --parchment: #f3e6c8;
  --parchment-dark: #e2cfa3;
  --blood: #8b1e1e;
  --gold: #b8892b;
  --bg: #1b1410;
  --good: #2f6b2f;
  --bad: #8b1e1e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at top, #3a2a1d 0%, var(--bg) 70%);
  color: var(--ink);
  font-family: "Crimson Text", Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
}

h1, h2, h3, .btn, .section-number { font-family: "Cinzel", Georgia, serif; }

.site-header { text-align: center; padding: 1.5rem 1rem 0.5rem; color: var(--parchment); }
.site-header h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: 0.06em; color: #f0c76a; text-shadow: 0 2px 8px #000; }
.tagline { margin: 0.2rem 0 0; font-style: italic; opacity: 0.8; }
.site-footer { text-align: center; color: #a08a6a; font-size: 0.85rem; padding: 1.5rem; }

#app { max-width: 1150px; margin: 0 auto; padding: 1rem; }
.hidden { display: none !important; }

.parchment {
  background: linear-gradient(135deg, var(--parchment) 0%, var(--parchment-dark) 100%);
  border-radius: 6px;
  box-shadow: 0 0 0 2px #6b4f2a, 0 0 0 6px #2b1d12, 0 10px 30px rgba(0,0,0,0.6), inset 0 0 60px rgba(120, 80, 30, 0.25);
  padding: 1.5rem 1.75rem;
}

.intro { max-width: 760px; margin: 0 auto 1.5rem; text-align: center; }

.class-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; }
.class-card { cursor: pointer; display: flex; flex-direction: column; transition: transform 0.15s; border: none; text-align: left; font: inherit; color: inherit; }
.class-card:hover, .class-card:focus-visible { transform: translateY(-4px); outline: none; box-shadow: 0 0 0 2px var(--gold), 0 0 0 6px #2b1d12, 0 14px 30px rgba(0,0,0,0.7); }
.class-card .icon { font-size: 2.6rem; text-align: center; }
.class-card h3 { margin: 0.2rem 0; text-align: center; color: var(--blood); }
.class-card p { margin: 0.4rem 0; font-size: 0.95rem; }
.class-card .ability { font-size: 0.9rem; color: var(--ink-soft); }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin: 0.5rem 0; }
.stat { background: rgba(255,255,255,0.35); border: 1px solid #a4865a; border-radius: 4px; text-align: center; padding: 0.2rem; }
.stat .label { font-family: "Cinzel", serif; font-size: 0.7rem; color: var(--ink-soft); display: block; }
.stat .value { font-weight: 600; font-size: 1.1rem; }
.stat .mod { font-size: 0.8rem; color: var(--ink-soft); }

#screen-game { display: grid; grid-template-columns: 290px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { #screen-game { grid-template-columns: 1fr; } }

.sheet h2 { margin: 0 0 0.5rem; font-size: 1.15rem; text-align: center; color: var(--blood); }
.sheet .who { text-align: center; font-weight: 600; }
.bar { height: 14px; background: #4a3020; border-radius: 7px; overflow: hidden; border: 1px solid #2b1d12; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, #a52a2a, #e04b3a); transition: width 0.4s; }
.sheet-row { display: flex; justify-content: space-between; margin: 0.3rem 0; }
.items { margin: 0.3rem 0 0.6rem; padding-left: 1.2rem; font-size: 0.95rem; }
.equipment-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: 0.95rem; }
.equipment-row select { min-width: 0; max-width: 65%; font: inherit; font-size: 0.85rem; color: var(--ink); background: rgba(255,255,255,0.55); border: 1px solid #8a6a40; border-radius: 4px; }
.sheet-actions { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; }

.page { position: relative; min-height: 420px; }
.section-number { position: absolute; top: 0.75rem; right: 1rem; font-size: 2rem; color: var(--gold); opacity: 0.8; }
.page h2 { margin: 0 0 0.75rem; color: var(--blood); padding-right: 3rem; }
.story-illustration { margin: 0 0 1rem; }
.story-illustration img { display: block; width: 100%; max-height: 340px; object-fit: cover; border: 3px solid #8a6a40; border-radius: 4px; box-shadow: 0 3px 10px rgba(43, 29, 18, 0.35); }
.story-illustration figcaption { margin-top: 0.35rem; text-align: center; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }
.section-text p:first-child::first-letter { font-family: "Cinzel", serif; font-size: 2.4em; float: left; line-height: 0.9; padding: 0.1em 0.1em 0 0; color: var(--blood); }

.choices { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }

.btn {
  background: linear-gradient(#5b3a22, #3b2414);
  color: #f6e3b4;
  border: 1px solid #b8892b;
  border-radius: 4px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover:not(:disabled) { background: linear-gradient(#7a4d2c, #4d2f1a); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.small { font-size: 0.8rem; padding: 0.4rem 0.6rem; text-align: center; }
.btn.ghost { background: transparent; color: var(--ink); border-color: #8a6a40; }
.btn.ghost:hover:not(:disabled) { background: rgba(0,0,0,0.08); }
.btn.roll { background: linear-gradient(#8b1e1e, #5a1010); text-align: center; font-size: 1.05rem; }
.btn.roll:hover:not(:disabled) { background: linear-gradient(#a52a2a, #6b1414); }
.choice-note { font-style: italic; font-size: 0.85rem; opacity: 0.85; }

.check-box, .combat-box {
  border: 2px dashed #8a6a40;
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  background: rgba(255,255,255,0.25);
}
.check-box h3, .combat-box h3 { margin: 0 0 0.4rem; font-size: 1rem; color: var(--blood); }
.result { font-weight: 600; margin-top: 0.5rem; }
.result.success { color: var(--good); }
.result.failure { color: var(--bad); }
.combat-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.combat-actions .btn { text-align: center; }
.combat-log { max-height: 180px; overflow-y: auto; font-size: 0.92rem; margin-top: 0.6rem; padding-left: 1.1rem; }
.combat-log li { margin-bottom: 0.15rem; }

.ending-banner { text-align: center; font-family: "Cinzel", serif; font-size: 1.6rem; margin: 1rem 0; }
.ending-banner.victory { color: var(--good); }
.ending-banner.death { color: var(--bad); }

.toast { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); background: #2b1d12; color: #f6e3b4; padding: 0.4rem 0.9rem; border-radius: 4px; font-size: 0.9rem; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.toast.show { opacity: 1; }

/* Dice overlay */
.dice-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(10, 6, 3, 0.55); cursor: pointer; }
#dice-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dice-result {
  position: absolute; left: 50%; top: calc(50% + 125px); transform: translateX(-50%);
  background: var(--parchment); color: var(--ink); border: 2px solid var(--gold); border-radius: 6px;
  padding: 0.6rem 1.2rem; text-align: center; font-family: "Cinzel", serif; box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  animation: pop 0.25s ease-out;
}
.dice-result .big { font-size: 1.5rem; display: block; }
.dice-result .hint { font-family: "Crimson Text", serif; font-size: 0.85rem; opacity: 0.75; }
@keyframes pop { from { transform: translateX(-50%) scale(0.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

.name-label { font-family: "Cinzel", serif; }
#hero-name { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid #8a6a40; border-radius: 4px; background: rgba(255,255,255,0.6); width: 12rem; }