/* Dungeons & Business Cards: the table, the paper and the pencil.
   Everything is a flat material lying on a wooden table: card stock, a notepad,
   a notebook page, masking tape. Marks are ink or pencil, never gradients. */

/* ---------- tokens ---------- */

:root {
  color-scheme: light;
  /* the table */
  --table: #c4a077;
  --on-table: #2c1f16;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.1' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.12 0 0 0 0 0.05 0.42 0 0 0 -0.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.2' stroke-width='1.5'%3E%3Cpath d='M0 .75H1200M0 150.75H1200M0 300.75H1200M0 450.75H1200'/%3E%3Cpath d='M380 0v150M980 0v150M120 150v150M700 150v150M520 300v150M1110 300v150M260 450v150M840 450v150'/%3E%3C/g%3E%3Cpath d='M0 2.5H1200M0 152.5H1200M0 302.5H1200M0 452.5H1200' fill='none' stroke='%23fff' stroke-opacity='.14'/%3E%3C/svg%3E");
  /* paper */
  --card: #f6f0de;
  --card-shade: #ebe2c8;
  --pad: #fbf8f0;
  --pad-binding: #7a2a1e;
  --notebook: #fbf8ec;
  --tape: rgba(229, 217, 184, 0.86);
  /* ink and pencil */
  --ink: #29231f;
  --ink-soft: #6b6056;
  --red: #6e1b15;
  --red-ink: #8d261b;
  --red-ink-dark: #5c150e;
  --pencil: #4a4853;
  --pencil-red: #a8352a;
  --pencil-green: #3c6b36;
  --pencil-ochre: #946312;
  --crayon-gold: #e6b53f;
  --rule: #3a3531;
  --brass-ink: #9a6a12;
  /* the printed dungeon */
  --stone: #c9c7c0;
  --stone-line: #2e2b28;
  --floor: #dfdac9;
  --floor-shade: #a8957f;
  --focus: #e39b1c;
  /* shadows are crisp: paper lying flat under a lamp, not glowing */
  --shadow-paper: 0 1px 1px rgba(40, 24, 10, 0.28), 3px 4px 0 -1px rgba(40, 24, 10, 0.17);
  --shadow-lift: 0 2px 2px rgba(20, 12, 4, 0.3), 9px 12px 0 -3px rgba(20, 12, 4, 0.24);
  --shadow-tag: 0 1px 1px rgba(40, 24, 10, 0.3), 2px 2px 0 rgba(40, 24, 10, 0.14);
  --f-display: "Alegreya SC", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-serif: "Alegreya", "Palatino Linotype", Palatino, Georgia, serif;
  --f-sans: "Alegreya Sans", "Gill Sans", "Gill Sans MT", "Trebuchet MS", system-ui, sans-serif;
  --f-hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  /* textures: paper fibre, pencil hatching, a pencil tick, notebook rules */
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.16 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke='%234a4853' stroke-linecap='round'%3E%3Cpath d='M-2 8L8-2M-2 32L32-2' stroke-opacity='.34' stroke-width='1.1'/%3E%3Cpath d='M-2 16L16-2M-2 40L40-2' stroke-opacity='.27' stroke-width='1'/%3E%3Cpath d='M-2 24L24-2M-2 48L48-2' stroke-opacity='.31' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10.5c1.6 1.4 3 3.2 4.3 5.5C9.6 10.4 12.6 6 17.5 2.5' fill='none' stroke='%234a4853' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='26'%3E%3Crect y='20.5' width='10' height='1.2' fill='%236a8fb5' fill-opacity='.4'/%3E%3C/svg%3E");
  --margin-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='10'%3E%3Crect width='1.6' height='10' fill='%23c4483c' fill-opacity='.5'/%3E%3C/svg%3E");
  --stubs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='5'%3E%3Cpath d='M0 0H26V1.5L23 4.5 20 1.8 17 4 13.5 1.5 10 4.8 7 2 4 4.2 1.5 1.6 0 3Z' fill='%23e6dfcc'/%3E%3C/svg%3E");
  --grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 11c4-1 6 1 10 0s3-6 5-7c1 3 1 6 4 7s6-2 9-1 3-5 5-6c1 3 0 6 3 6.5s6-1 9-.5 4-4 6-5c.5 3 .5 5 3 5.5' fill='none' stroke='%234a4853' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --table: #2a1f17;
    --on-table: #efe3cb;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.1' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.45 0 0 0 0 0.3 0.34 0 0 0 -0.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1.5'%3E%3Cpath d='M0 .75H1200M0 150.75H1200M0 300.75H1200M0 450.75H1200'/%3E%3Cpath d='M380 0v150M980 0v150M120 150v150M700 150v150M520 300v150M1110 300v150M260 450v150M840 450v150'/%3E%3C/g%3E%3Cpath d='M0 2.5H1200M0 152.5H1200M0 302.5H1200M0 452.5H1200' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
    --shadow-paper: 0 1px 1px rgba(0, 0, 0, 0.55), 3px 4px 0 -1px rgba(0, 0, 0, 0.42);
    --shadow-lift: 0 2px 2px rgba(0, 0, 0, 0.5), 9px 12px 0 -3px rgba(0, 0, 0, 0.45);
    --shadow-tag: 0 1px 1px rgba(0, 0, 0, 0.55), 2px 2px 0 rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --table: #2a1f17;
  --on-table: #efe3cb;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0028 0.1' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.45 0 0 0 0 0.3 0.34 0 0 0 -0.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --planks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='1.5'%3E%3Cpath d='M0 .75H1200M0 150.75H1200M0 300.75H1200M0 450.75H1200'/%3E%3Cpath d='M380 0v150M980 0v150M120 150v150M700 150v150M520 300v150M1110 300v150M260 450v150M840 450v150'/%3E%3C/g%3E%3Cpath d='M0 2.5H1200M0 152.5H1200M0 302.5H1200M0 452.5H1200' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
  --shadow-paper: 0 1px 1px rgba(0, 0, 0, 0.55), 3px 4px 0 -1px rgba(0, 0, 0, 0.42);
  --shadow-lift: 0 2px 2px rgba(0, 0, 0, 0.5), 9px 12px 0 -3px rgba(0, 0, 0, 0.45);
  --shadow-tag: 0 1px 1px rgba(0, 0, 0, 0.55), 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* ---------- base ---------- */

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--table);
  background-image: var(--planks), var(--grain);
  color: var(--on-table);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.4;
}

button { font: inherit; }

:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.app { display: flex; flex-direction: column; min-height: 100vh; }

/* Paper surfaces share the fibre texture and a flat shadow. */
.card, .tray, .log, .modal-card, .menu, .creator, .nav-btn, .item-menu {
  background-image: var(--paper);
}

/* ---------- top bar: a strip of masking tape and a few paper tags ---------- */

.topbar {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 14px 20px 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.wordmark {
  border: 0;
  padding: 7px 20px 6px;
  background-color: var(--tape);
  color: var(--red);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transform: rotate(-1.3deg);
  clip-path: polygon(0 10%, 2% 0, 5% 8%, 8% 1%, 93% 0, 96% 9%, 98.5% 1%, 100% 14%, 99% 52%, 100% 90%, 97% 100%, 94% 91%, 91% 100%, 7% 99%, 4% 90%, 1.5% 100%, 0 88%, 1% 50%);
}
.wordmark .wm-2 { font-size: 0.74em; }
.wordmark:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--focus); }
[data-screen="title"] .wordmark { display: none; }

.topnav { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.nav-btn {
  position: relative;
  padding: 5px 13px 4px;
  border: 1.5px solid var(--ink);
  border-radius: 12px 190px 14px 170px / 170px 14px 190px 12px;
  background-color: var(--pad);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--shadow-tag);
  transform: rotate(-1.2deg);
}
.nav-btn:nth-child(2n) { transform: rotate(1deg); }
.nav-btn:nth-child(3n) { transform: rotate(-0.4deg); }
.nav-btn:hover { background-image: var(--hatch), var(--paper); }
.nav-btn:active { transform: translate(1px, 1px); }
/* the one tag in red ink: the printed game */
.nav-buy {
  border-color: var(--red-ink-dark);
  background-color: var(--red-ink);
  color: #fcf5e6;
  text-decoration: none;
}
.nav-buy:hover { background-color: #7a1f16; background-image: var(--paper); }
/* Settings are boxes to tick in pencil. */
.nav-btn.toggle { padding-left: 32px; }
.nav-btn.toggle::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 1.5px solid currentColor;
  border-radius: 2px 4px 2px 3px;
}
.nav-btn.toggle[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -12px;
  background: var(--check) center / contain no-repeat;
}

/* ---------- buttons: boxes drawn in ink ---------- */

.btn {
  --edge: 255px 15px 225px 15px / 15px 225px 15px 255px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 42px;
  padding: 0.4em 1.1em;
  border: 2px solid var(--line, var(--ink));
  border-radius: var(--edge);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1.1;
  cursor: pointer;
  transition: transform 0.08s, opacity 0.15s;
}
/* a second, fainter stroke makes the outline look drawn twice by hand */
.btn::after {
  content: "";
  position: absolute;
  inset: -3px -1px -1px -3px;
  border: 1.3px solid var(--line, var(--ink));
  border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
  opacity: 0.38;
  pointer-events: none;
}
.btn:nth-child(2n) { --edge: 15px 255px 15px 225px / 225px 15px 255px 15px; }
.btn:nth-child(3n) { --edge: 225px 15px 255px 15px / 15px 255px 15px 225px; }
.btn:hover:not(:disabled) { background-image: var(--hatch); }
.btn:active:not(:disabled) { transform: translate(1px, 1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary { --line: var(--red-ink-dark); background-color: var(--red-ink); color: #fcf5e6; }
.btn-primary:hover:not(:disabled) { background-color: #7a1f16; background-image: none; }
.btn-primary::after { opacity: 0.55; }

.btn-big { font-size: 19px; min-height: 48px; padding: 0.45em 1.35em; }
.btn-ink { color: var(--red); }
.btn-danger { --line: var(--red-ink-dark); background-color: var(--red-ink); color: #fcf5e6; }

/* numbers to circle, like picking an option on a form */
.btn.btn-round {
  --edge: 52% 48% 50% 46% / 48% 54% 46% 52%;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 27px;
}
.btn.btn-round::after { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; inset: -3px -1px -2px -3px; }

.link-btn {
  background: none;
  border: 0;
  padding: 4px 2px;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(74, 72, 83, 0.55);
  text-underline-offset: 4px;
  cursor: pointer;
}
.link-btn:hover { text-decoration-style: wavy; text-decoration-color: var(--pencil-red); }

/* ---------- cards ---------- */

.card {
  position: relative;
  box-sizing: border-box;
  color: var(--ink);
  background-color: var(--card);
  border-radius: 7px;
  box-shadow: var(--shadow-paper);
  container-type: inline-size;
}

.card-h {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--red);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.pencil { font-family: var(--f-hand); font-weight: 600; color: var(--pencil); }

.write { animation: pencil-in 0.55s ease-out both; }

@keyframes pencil-in {
  from { clip-path: inset(-30% 100% -30% -2%); }
  to { clip-path: inset(-30% -8% -30% -2%); }
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.rt { position: relative; display: inline-block; }

.ring { position: absolute; overflow: visible; pointer-events: none; }
.ring path { fill: none; stroke: var(--pencil); stroke-width: 1.7; stroke-linecap: round; opacity: 0.92; }
.ring.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.6s ease-out forwards; }
.ring.bad path { stroke: var(--pencil-red); }
.ring.die-ring { z-index: 2; }
.ring.die-ring path { stroke-width: 2.1; }

/* crossed out in pencil */
.struck {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(74, 72, 83, 0.9);
  color: var(--ink-soft);
}

/* hearts drawn in ink; lost ones crossed out in pencil */
.mini-hearts { display: inline-flex; align-items: center; gap: 1px; vertical-align: -2px; }
.mini-hearts svg { width: 1.05em; height: 1.05em; overflow: visible; }
.mini-hearts .h-line { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.mini-hearts.filled .h-line { fill: var(--ink); }
.mini-hearts .x { fill: none; stroke: var(--pencil); stroke-width: 2.2; stroke-linecap: round; }
.mini-hearts.filled .x { stroke: var(--pencil-red); }

/* ---------- the character sheet (front of the card) ---------- */

.sheet-body { container-type: inline-size; font-family: var(--f-sans); }

.sheet-body .card-h { font-size: clamp(14px, 4.2cqi, 21px); }

.races {
  list-style: none;
  margin: 0.3em 0 0.9em;
  padding: 0;
  display: grid;
  gap: 0.1em;
  font-size: clamp(12.5px, 3.3cqi, 17px);
  font-variant-numeric: oldstyle-nums;
}
.races li { white-space: nowrap; transition: color 0.3s; }
.races li.other { color: var(--ink-soft); }

.name-line {
  position: relative;
  height: clamp(30px, 8.6cqi, 42px);
  border-bottom: 1.3px solid var(--rule);
  margin-top: 0.1em;
}
.name-line .name,
.name-input {
  position: absolute;
  left: 0.1em;
  right: 0;
  bottom: -0.16em;
  box-sizing: border-box;
  font-size: clamp(22px, 6.4cqi, 33px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.1em 0.12em;
}
.name-line .name.long { font-size: clamp(18px, 5cqi, 26px); }
.name-input {
  width: 100%;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  background-image: var(--hatch);
  outline: none;
  color: var(--pencil);
}
.name-input:focus-visible { box-shadow: 0 0 0 2px var(--focus); }

.hearts { display: flex; align-items: center; gap: 8%; padding: 0.45em 0 0.7em 7%; font-size: clamp(12.5px, 3.3cqi, 17px); }
.heart { display: block; width: 2.2em; aspect-ratio: 26 / 24; }
.heart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h-line { fill: none; stroke: var(--ink); stroke-width: 1.35; }
.heart .x {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  /* healing rubs the cross out rather than undrawing it */
  transition: stroke-dashoffset 0.26s ease-in, opacity 0.35s ease-out;
}
.heart .x2 { transition-delay: 0.2s, 0s; }
.heart.wounded .x { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 0.26s ease-in, opacity 0s; }
.heart.wounded .x2 { transition-delay: 0.2s, 0.2s; }
.heart.instant .x { transition: none; }

.inv {
  list-style: none;
  margin: 0.35em 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8%;
  font-size: clamp(12.5px, 3.3cqi, 17px);
}
.inv-line { position: relative; height: 2.05em; border-bottom: 1.3px solid var(--rule); }
.inv-line.wide { grid-column: 1 / -1; }
.inv-line.wide .inv-item { color: var(--brass-ink); }
.inv-item {
  position: absolute;
  left: 0;
  bottom: -0.18em;
  max-width: 108%;
  padding: 0 0.15em;
  border: 0;
  background: none;
  font-size: 1.36em;
  line-height: 1.25;
  white-space: nowrap;
  text-align: left;
}
.inv-item .struck { margin-right: 0.25em; }
.inv-item.gone { color: var(--ink-soft); }
button.inv-item { cursor: pointer; border-radius: 5px; text-decoration: underline dotted rgba(74, 72, 83, 0.45); text-underline-offset: 3px; }
button.inv-item:hover { background-image: var(--hatch); color: var(--red); }

/* In play: two columns on one card. */
.sheet { padding: 4.2% 4.8% 4.4%; aspect-ratio: 90 / 50; }
.sheet-body.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 6%; }
.sheet-body.two .card-h { font-size: clamp(14px, 3.8cqi, 19px); }
.sheet-body.two .races { font-size: clamp(12px, 3.4cqi, 15.5px); }
.sheet-body.two .races .vs { font-size: 0.86em; }
.sheet-body.two .hearts { padding-left: 4%; font-size: clamp(13px, 3.9cqi, 18px); }
.sheet-body.two .inv { font-size: clamp(13px, 3.6cqi, 17px); }

/* A fallen hero's card gets a big pencil cross. */
.cross-out { display: none; position: absolute; inset: 4% 3%; width: 94%; height: 92%; overflow: visible; pointer-events: none; z-index: 2; }
.sheet.is-fallen .cross-out { display: block; }
.cross-out path { fill: none; stroke: var(--pencil); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; }
.sheet.is-fallen .cross-out path { animation: draw 0.45s ease-out forwards; }
.sheet.is-fallen .cross-out .c2 { animation-delay: 0.35s; }

@container (max-width: 380px) {
  .sheet-body.two .races li.other { display: none; }
  .sheet-body.two .races li { white-space: normal; }
}

/* ---------- party tabs: index tabs on top of the sheet ---------- */

.sheet-wrap { position: relative; }
.party-tabs { display: flex; gap: 6px; padding: 0 12px; margin-bottom: -8px; }
.ptab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 6px 9px 14px;
  border: 0;
  border-radius: 9px 9px 0 0;
  background-color: var(--card-shade);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: -1px -1px 0 rgba(40, 24, 10, 0.12), 2px -1px 0 rgba(40, 24, 10, 0.1);
}
.ptab[aria-selected="true"] { background-color: var(--card); }
.ptab:hover { background-image: var(--hatch); }
.ptab .ppawn { flex: none; width: 11px; height: 16px; overflow: visible; }
.ptab .ppawn path { fill: var(--c); stroke: #1d1612; stroke-width: 1.4; }
.ptab .pname { flex: 1 1 auto; min-width: min(3.6em, 100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; text-align: left; }
.ptab .phearts { margin-left: auto; font-size: 12px; }
.ptab.turn { box-shadow: inset 0 3px 0 var(--c), -1px -1px 0 rgba(40, 24, 10, 0.12); }
.ptab.fallen .pname { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink-soft); }
.sheet-wrap .sheet { z-index: 1; }
.has-tabs .sheet { border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* ---------- the level card (back of the card) ---------- */

.level-card {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  column-gap: 2%;
  padding: 2.8% 2.4% 2.2% 3.6%;
  aspect-ratio: 90 / 50;
}

.tables {
  display: flex;
  flex-direction: column;
  gap: 2.1cqw;
  font-size: clamp(11.5px, 1.85cqw, 17px);
  min-width: 0;
}
.ctable .card-h { font-size: 1.3em; margin-bottom: 0.25em; }
.tcols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); column-gap: 1em; }
.tcols ul, .ctable .sub { list-style: none; margin: 0; padding: 0; }
.tcols > ul { display: grid; gap: 0.12em; align-content: start; }
.ctable li { font-size: 1.08em; white-space: nowrap; font-variant-numeric: oldstyle-nums; }
.ctable small { display: block; margin: -0.1em 0 0 1.1em; font-size: 0.78em; }
.ctable .sub { margin: 0.12em 0 0 0.55em; display: grid; gap: 0.08em; }
.ctable .sub li { font-size: 0.86em; }
.card-version {
  margin: auto 0 0;
  font-family: var(--f-display);
  font-size: 0.8em;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: lowercase;
}

.map-wrap { position: relative; min-width: 0; display: flex; align-items: center; container-type: inline-size; }

.map { display: block; width: 100%; height: auto; overflow: visible; user-select: none; -webkit-user-select: none; }
.map .stones rect { fill: var(--stone); stroke: var(--stone-line); stroke-width: 1.1; }
.map .floor { fill: var(--floor); }
.map .shade { fill: var(--floor-shade); }
.map .wall { fill: none; stroke: var(--stone-line); stroke-width: 1.8; }
.map .corner { fill: var(--stone-line); }
.map .tread { stroke: var(--stone-line); stroke-width: 1.6; }
.map .room-name { font-family: var(--f-sans); font-size: 16px; fill: var(--ink); text-anchor: middle; }
.map .room-rule { font-family: var(--f-sans); font-size: 12.5px; fill: var(--ink); text-anchor: middle; }
.map .caption { font-family: var(--f-serif); font-size: 15.5px; fill: var(--ink); }
.map .level-num.pencil { font-family: var(--f-hand); font-size: 23px; font-weight: 700; fill: var(--pencil); }
.map .arrow { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.map .credit { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.12em; fill: var(--red); }
.map a:hover .credit { text-decoration: underline; }
.map .pencil { font-size: 21px; fill: var(--pencil); text-anchor: middle; }
.map .pencil.star { font-size: 23px; fill: var(--brass-ink); }
.map .note-body.write { animation: pencil-in 0.6s ease-out both; }
.map .mheart { fill: var(--ink); }
.map .strike, .map .slain { fill: none; stroke: var(--pencil); stroke-width: 2.3; stroke-linecap: round; }
.map .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.35s ease-out forwards; }
/* the way the party has walked, in pencil */
.map .trail path { fill: none; stroke: var(--pencil); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; opacity: 0.7; }
.map .trail path.fresh { animation: trail-in 0.5s ease-out both; }
@keyframes trail-in { from { opacity: 0; } }
/* rooms you can walk to: a dashed red pencil outline, shaded with hatching on hover */
.map .reach { fill: none; stroke: var(--pencil-red); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 5; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.map .reach.on { opacity: 0.9; animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -22; } }
.map .hit { fill: transparent; }
.map .hit.go { cursor: pointer; }
.map .hit.go:hover { fill: var(--map-hatch, transparent); }
.map .hit:focus { outline: none; }
.map .hit:focus-visible { stroke: var(--focus); stroke-width: 3; }
.map .pawn { transition: transform var(--walk, 0.3s) ease-in-out; }
.map .pawn-body { stroke: #1d1612; stroke-width: 1.1; }
.map .pawn-shadow { fill: rgba(30, 20, 10, 0.35); }
.map .pawn-shine { fill: rgba(255, 255, 255, 0.45); }
.map .pawn.active .pawn-inner { animation: bob 1.1s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }

@container (max-width: 400px) {
  .map .room-rule { display: none; }
  .map .room-name { font-size: 19px; }
  .map .caption { font-size: 18px; }
  .map .pencil { font-size: 24px; }
}

/* A pile of finished level cards under the current one. */
.pile { position: relative; }
.pile > .card { z-index: 1; }
.pile::before,
.pile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background-color: var(--card-shade);
  box-shadow: var(--shadow-paper);
  opacity: 0;
  transition: opacity 0.4s;
}
.pile:not([data-depth="0"])::before { opacity: 1; transform: translate(8px, 7px) rotate(1.1deg); }
.pile[data-depth="2"]::after, .pile[data-depth="3"]::after { opacity: 1; transform: translate(-7px, 11px) rotate(-1.3deg); }

/* ---------- the dice pad: a glued notepad the dice are rolled on ---------- */

.tray {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 28px 18px 18px;
  border-radius: 3px 3px 4px 4px;
  color: var(--ink);
  background-color: var(--pad);
  box-shadow: var(--shadow-paper);
}
/* the glued strip along the top, with stubs of sheets torn off before */
.tray::before,
.menu::before,
.creator::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 11px;
  border-radius: 3px 3px 0 0;
  background: var(--pad-binding);
}
.tray::after,
.menu::after,
.creator::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 5px;
  background: var(--stubs) repeat-x;
}
.tray > * { position: relative; }
/* the bottom padding holds glyphs that reach past a tight line box, so no scrollbar appears for nothing */
.tray-text { display: flex; flex-direction: column; gap: 9px; padding-bottom: 4px; }

.tray-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 12px;
  font-size: 14px;
  color: var(--ink-soft);
}
.tray-where { font-family: var(--f-display); letter-spacing: 0.05em; color: var(--red); }
.tray-who { display: inline-flex; align-items: center; gap: 6px; }
.who-pawn { width: 10px; height: 15px; overflow: visible; }
.who-pawn path { fill: var(--c); stroke: #1d1612; stroke-width: 1.4; }
.who-name { color: var(--ink); font-weight: 500; }
.who-note { color: var(--ink-soft); font-weight: 400; }
.who-hearts { font-size: 15px; }

/* what just happened, jotted in pencil */
.tray-result { margin: 0 0 2px; min-height: 1.3em; font-family: var(--f-hand); font-weight: 600; font-size: 21px; line-height: 1.25; color: var(--pencil); text-wrap: pretty; }
.tray-result.good { color: var(--pencil-green); }
.tray-result.bad { color: var(--pencil-red); }
.tray-result.loot, .tray-result.win { color: var(--pencil-ochre); }

.tray-prompt {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.tray-detail { margin: 0; font-size: 15px; color: var(--ink-soft); text-wrap: pretty; }

.foe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.foe-name { font-family: var(--f-display); font-size: 19px; color: var(--red); }
.foe-hearts { font-size: 20px; }
.foe-note { font-size: 13.5px; color: var(--ink-soft); }

.tray-table { display: none; }
.chips { list-style: none; margin: 0; padding: 2px 0; display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 14px; color: var(--ink-soft); }
.chips b { color: var(--ink); font-weight: 700; font-variant-numeric: lining-nums; }

/* A narrow pad keeps the essentials: the Attack button already says how many dice. */
@container (max-width: 360px) {
  .tray-detail, .tray-where { display: none; }
  .tray-top { justify-content: flex-end; }
}

.tray-actions, .tray-extra { display: flex; flex-wrap: wrap; gap: 10px; }
.tray-extra { order: 1; padding-top: 2px; }
.tray-actions { order: 2; }
.tray-extra .btn { font-size: 15.5px; min-height: 36px; padding: 0.3em 0.9em; border-style: dashed; }

/* ---------- dice: flat bone-coloured cubes ---------- */

.dice {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 86px;
  padding: 6px 0;
}
.die { --s: 50px; position: relative; flex: none; width: var(--s); height: var(--s); perspective: 700px; transition: opacity 0.3s, scale 0.3s; }
.die::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6px;
  height: 8px;
  border-radius: 50%;
  background: rgba(40, 26, 12, 0.24);
  filter: blur(1.5px);
  z-index: -1;
}
.die .cube { position: absolute; inset: 0; transform-style: preserve-3d; transition-property: transform; transition-timing-function: cubic-bezier(0.16, 0.66, 0.24, 1); }
.die .core { position: absolute; inset: 4%; border-radius: 12%; background: #ddd2ba; }
.die .core.cx { transform: rotateX(90deg); }
.die .core.cy { transform: rotateY(90deg); }
.die .face {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 13%;
  border-radius: 18%;
  background: #f4eee0;
  box-shadow: inset 0 0 0 1.5px rgba(60, 40, 20, 0.3);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.die .pip {
  align-self: center;
  justify-self: center;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #221b17;
}
.die .f1 .pip { width: 92%; background: #9e2418; }
.die .f1 { transform: translateZ(calc(var(--s) / 2)); }
.die .f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.die .f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die .f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.die .f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }

.die.tossing { animation: toss var(--dur, 1s) cubic-bezier(0.3, 0.5, 0.4, 1); }
@keyframes toss {
  0% { transform: translate(0, 0); }
  28% { transform: translate(var(--drift, 0px), var(--lift, -30px)) scale(1.1); }
  60% { transform: translate(0, 0) scale(1); }
  74% { transform: translate(0, -7px); }
  86% { transform: translate(0, 0); }
  93% { transform: translate(0, -2px); }
  100% { transform: translate(0, 0); }
}
/* the die that counts gets circled on the pad; the others are pushed aside */
.die.dropped { opacity: 0.45; scale: 0.86; }

/* ---------- the adventure log: a ruled notebook page taped to the table ---------- */

.log {
  position: relative;
  box-sizing: border-box;
  padding: 12px 16px 8px 50px;
  border-radius: 2px;
  background-color: var(--notebook);
  background-image: var(--margin-line), var(--paper);
  background-repeat: repeat-y, repeat;
  background-position: 36px 0, 0 0;
  color: var(--pencil);
  box-shadow: var(--shadow-paper);
}
.log::before,
.log::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 84px;
  height: 24px;
  background-color: var(--tape);
  clip-path: polygon(0 12%, 4% 0, 9% 10%, 14% 0, 86% 2%, 92% 0, 96% 12%, 100% 4%, 99% 50%, 100% 92%, 95% 100%, 90% 91%, 84% 100%, 12% 98%, 7% 90%, 3% 100%, 0 90%, 1% 55%);
  z-index: 3;
}
.log::before { left: -18px; transform: rotate(-32deg); }
.log::after { right: -18px; transform: rotate(30deg); }
.log-h { margin: 0 0 2px; font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: 0.03em; color: var(--red); }
.log-list {
  list-style: none;
  margin: 0;
  padding: 0 6px 0 0;
  max-height: 234px;
  overflow-y: auto;
  font-family: var(--f-hand);
  font-weight: 500;
  font-size: 19px;
  line-height: 26px;
  background-image: var(--rules);
  background-attachment: local;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 72, 83, 0.4) transparent;
}
.log-list li { position: relative; }
.log-list li::before {
  content: "–";
  position: absolute;
  left: -30px;
  width: 20px;
  text-align: center;
  color: var(--pencil);
}
.log-list .t-good::before { content: "✓"; color: var(--pencil-green); }
.log-list .t-bad::before, .log-list .t-danger::before { content: "✗"; color: var(--pencil-red); }
.log-list .t-loot::before { content: "+"; color: var(--pencil-ochre); font-weight: 700; }
.log-list .t-hero::before { content: "☺"; }
.log-list .t-death { color: var(--red); }
.log-list .t-death::before { content: "✝"; color: var(--red); }
.log-list .t-win { color: var(--pencil-ochre); font-weight: 700; }
.log-list .t-win::before { content: "★"; color: var(--pencil-ochre); }
.log-list .t-quiet { color: var(--ink-soft); }
.log-list .t-level {
  font-weight: 700;
  font-size: 23px;
  color: var(--red);
  text-decoration: underline wavy rgba(168, 53, 42, 0.55) 1.5px;
  text-underline-offset: 5px;
}
.log-list .t-level::before { content: none; }

/* ---------- item menu: a small slip of paper ---------- */

.item-menu {
  position: absolute;
  z-index: 60;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 3px 6px 4px 5px;
  background-color: var(--pad);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
}
.item-menu button {
  padding: 8px 11px;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.item-menu button:hover, .item-menu button:focus-visible { background-image: var(--hatch); outline: none; }

/* ---------- title card ---------- */

.screen {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: 8px 44px;
}

.screen-title { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 18px; }

.cover-stage { position: relative; z-index: 2; width: min(100%, 880px); }
.cover-holder { position: relative; width: 100%; perspective: 2200px; }
.flipper { display: grid; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.1, 0.2, 1); }
.flipper > .card { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flipper > .card-back { transform: rotateY(180deg); }
.flipper.flipped { transform: rotateY(180deg); }

/* a pencil left lying on the table, across the corner of the card */
.table-pencil {
  position: absolute;
  right: -7%;
  bottom: 5%;
  width: 38%;
  height: auto;
  overflow: visible;
  transform: rotate(-17deg);
  transform-origin: 80% 50%;
  pointer-events: none;
  z-index: 3;
}

.cover {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 5%;
  padding: 3.4% 4% 3% 4.2%;
  aspect-ratio: 90 / 50;
}
.title { margin: 0 0 0.55em; display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 500; color: var(--red); line-height: 0.92; }
.title .t1 { font-size: 6.4cqw; letter-spacing: 0.01em; }
.title .t2 { align-self: flex-end; font-size: 3.7cqw; margin-top: 0.05em; }
.intro, .rules-text { margin: 0 0 0.95em; font-family: var(--f-serif); font-size: 2.2cqw; line-height: 1.38; }

.cover-sheet { display: flex; flex-direction: column; gap: 0; }
.cover-sheet .card-h { font-size: clamp(15px, 5.9cqi, 24px); }
.cover-sheet .races { font-size: clamp(13px, 5.5cqi, 21px); margin-bottom: 1.1em; }
.cover-sheet .hearts { font-size: clamp(13px, 4.7cqi, 20px); padding-left: 14%; gap: 10%; }
.cover-sheet .inv { font-size: clamp(13px, 4.6cqi, 19px); }
.cover-sheet .inv-line:nth-child(n+5) { display: none; }
.cover-sheet .name-line { height: clamp(32px, 11cqi, 46px); margin-bottom: 0.6em; }
.cover-sheet .name-line .name, .cover-sheet .name-input { font-size: clamp(22px, 8.5cqi, 36px); }

/* the menu and the character maker sit on the same notepad as the dice */
.menu,
.creator {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 580px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 24px 16px;
  border-radius: 3px 3px 4px 4px;
  background-color: var(--pad);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-paper);
}
.menu { gap: 14px; }
.menu-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
.party-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.party-label { font-family: var(--f-display); font-size: 19px; margin-right: 2px; }
.btn-continue { flex-direction: column; gap: 2px; font-size: 18px; padding: 0.5em 1.4em; }
.btn-continue span { font-family: var(--f-hand); font-weight: 600; font-size: 19px; letter-spacing: 0; color: var(--pencil); }
.menu-quiet { gap: 4px 10px; font-size: 15.5px; }
.menu-dot { opacity: 0.6; }
.menu-note { margin: 0; min-height: 1.3em; font-family: var(--f-hand); font-weight: 600; font-size: 19px; color: var(--pencil); }

.creator { gap: 10px; }
.create-step { margin: 0; font-family: var(--f-display); font-size: 20px; letter-spacing: 0.04em; color: var(--red); }
.creator-dice { min-height: 74px; }
.create-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.create-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rolled { margin: 0; font-family: var(--f-hand); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--pencil); max-width: 46ch; text-wrap: balance; }
.rolled b { color: var(--red); }
.creating .races li.picked { color: var(--ink); }

/* ---------- game layout ---------- */

.screen-game {
  display: grid;
  grid-template-columns: minmax(340px, 450px) minmax(0, 1fr);
  gap: 20px 26px;
  align-items: start;
}
.side, .board { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---------- dialogs: sheets of paper taped down ---------- */

dialog.modal {
  box-sizing: border-box;
  width: min(720px, calc(100% - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}
dialog.modal::before,
dialog.modal::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 104px;
  height: 26px;
  background-color: var(--tape);
  clip-path: polygon(0 12%, 4% 0, 9% 10%, 14% 0, 86% 2%, 92% 0, 96% 12%, 100% 4%, 99% 50%, 100% 92%, 95% 100%, 90% 91%, 84% 100%, 12% 98%, 7% 90%, 3% 100%, 0 90%, 1% 55%);
  z-index: 2;
}
dialog.modal::before { left: 8%; transform: rotate(-4deg); }
dialog.modal::after { right: 8%; transform: rotate(3deg); }
dialog.modal::backdrop { background: rgba(18, 11, 6, 0.6); }
dialog.modal[open] { animation: rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rise { from { transform: translateY(14px) rotate(-0.6deg); opacity: 0; } }

.modal-card {
  position: relative;
  box-sizing: border-box;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 30px 30px 26px;
  border-radius: 3px;
  background-color: var(--pad);
  box-shadow: var(--shadow-lift);
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 72, 83, 0.4) transparent;
}
.modal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--pencil);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.modal-x:hover { background-image: var(--hatch); color: var(--red); }
.modal h2 { margin: 0 0 8px; padding-right: 36px; font-family: var(--f-display); font-weight: 500; font-size: 29px; color: var(--red); text-wrap: balance; }
.modal h3 { margin: 22px 0 6px; font-family: var(--f-display); font-weight: 500; font-size: 19px; color: var(--red); }

.prose p, .prose li { font-family: var(--f-serif); font-size: 17px; line-height: 1.5; max-width: 64ch; }
.prose p { margin: 0 0 10px; }
.prose .lede { font-size: 18px; }
.prose blockquote { margin: 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--pencil-red); }
.prose blockquote p { font-style: italic; }
.room-rules { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px 18px; }
.room-rules b { display: inline-block; min-width: 3.2em; font-family: var(--f-display); font-weight: 500; color: var(--red); }
.clarify { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 6px; }
.clarify li::marker { font-family: var(--f-hand); font-weight: 700; color: var(--pencil); }
.prose kbd {
  display: inline-block;
  padding: 0 7px;
  border: 1.5px solid var(--ink);
  border-radius: 4px 6px 4px 5px;
  font-family: var(--f-sans);
  font-size: 14px;
  box-shadow: 1px 1px 0 var(--ink);
}
.credits { margin-top: 20px !important; padding-top: 14px; border-top: 1.5px dashed rgba(74, 72, 83, 0.35); font-size: 15px !important; color: var(--ink-soft); }
.prose a, .modal a { color: var(--red); }

.modal-new .modal-card { padding-bottom: 22px; }
.new-lede { margin: 0 0 14px; font-family: var(--f-serif); font-size: 17px; }
.new-sheet { padding: 4.2% 4.8% 4.4%; }
.modal-new .creator-dice { margin-top: 8px; }
.modal-new .rolled { margin: 0 auto; }
.modal-new .create-actions { color: var(--ink); }

.modal-end .modal-card { text-align: center; padding-top: 32px; }
/* a star doodled in pencil and filled with crayon */
.end-star { display: block; width: 104px; height: 100px; margin: 0 auto 2px; overflow: visible; }
.end-star .fill { fill: var(--crayon-gold); opacity: 0; animation: crayon 0.4s 0.55s ease-out forwards; }
.end-star .line { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.7s ease-out forwards; }
.end-star .shade { fill: var(--hatch); }
@keyframes crayon { to { opacity: 0.9; } }
.end-kicker { margin: 4px 0 2px; font-family: var(--f-display); font-size: 16px; letter-spacing: 0.08em; color: var(--ink-soft); }
.modal-end h2.end-title { padding: 0; font-size: 36px; }
.end-line { margin: 4px auto 10px; max-width: 46ch; font-family: var(--f-serif); font-size: 18px; text-wrap: balance; }
/* the epitaph goes on a tombstone drawn in pencil */
.tomb {
  position: relative;
  width: min(100%, 440px);
  margin: 12px auto 0;
  padding: 34px 26px 22px;
  box-sizing: border-box;
  border: 2px solid var(--pencil);
  border-bottom: 0;
  border-radius: 50% 50% 4px 6px / 34% 34% 4px 6px;
}
.tomb::before {
  content: "";
  position: absolute;
  inset: -4px -2px 0 -4px;
  border: 1.2px solid var(--pencil);
  border-bottom: 0;
  border-radius: 48% 52% 6px 4px / 36% 32% 6px 4px;
  opacity: 0.4;
}
.tomb-ground { height: 14px; width: min(100%, 520px); margin: -6px auto 12px; background: var(--grass) repeat-x 0 0; }
.tomb .end-title { margin-top: 0; }
.epitaphs { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 12px; }
.epi-name { display: block; font-size: 36px; line-height: 1.05; }
.epi-line { font-family: var(--f-serif); font-size: 16.5px; }
.end-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 14px 0; padding: 12px 0; border-block: 1.5px dashed rgba(74, 72, 83, 0.3); }
.end-stats div { display: flex; flex-direction: column-reverse; align-items: center; }
.end-stats dt { font-size: 13.5px; color: var(--ink-soft); }
.end-stats dd { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--pencil); }
.end-quote { margin: 8px 0 18px; font-family: var(--f-serif); font-style: italic; font-size: 17px; }
.end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* the Hall of the Fallen is a ledger kept in pencil */
.hall-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.hall-totals div {
  display: flex;
  flex-direction: column-reverse;
  padding: 8px 12px 10px;
  border: 1.5px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}
.hall-totals div:nth-child(2n) { border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px; }
.hall-totals dt { font-size: 13.5px; color: var(--ink-soft); }
.hall-totals dd { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 34px; line-height: 1; color: var(--pencil); }
.hall-list { list-style: none; margin: 0; padding: 0; }
.hall-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1.5px dashed rgba(74, 72, 83, 0.25); }
.hall-cross { color: var(--pencil); font-size: 18px; }
.hall-star { color: var(--pencil-ochre); font-size: 18px; }
.hall-name { font-family: var(--f-hand); font-weight: 600; font-size: 25px; line-height: 1; color: var(--pencil); margin-right: 6px; }
.hall-race { font-size: 14px; color: var(--ink-soft); }
.hall-cause { display: block; margin-top: 2px; font-size: 15px; }
.hall-list time { font-family: var(--f-hand); font-size: 17px; color: var(--ink-soft); white-space: nowrap; }
.hall-empty { font-family: var(--f-hand); font-size: 22px; color: var(--pencil); }
.hall-clear { margin: 18px 0 0; text-align: right; font-size: 14px; color: var(--ink-soft); }

.modal-small { width: min(460px, calc(100% - 32px)); }
.confirm-text { margin: 0 0 18px; font-family: var(--f-serif); font-size: 18px; line-height: 1.45; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }

/* ---------- desktop: the whole table fits the window ---------- */

@media (min-width: 1000px) and (min-height: 600px) {
  html, body { height: 100%; }
  .app {
    /* top bar plus the screen's own padding */
    --chrome: 76px;
    /* the sheet column gives way on short windows so the dice pad keeps its room */
    --tray-room: 390px;
    --side: clamp(330px, min(30vw, calc((100vh - var(--chrome) - var(--tray-room)) * 1.8)), 540px);
    /* wide enough for the level card to fill the height, no wider */
    --fit-width: clamp(1000px, calc(var(--side) + 64px + (100vh - var(--chrome) - 166px) * 1.78), 2200px);
    height: 100%;
    min-height: 0;
  }
  .app:has(.party-tabs:not([hidden])) { --tray-room: 475px; }
  .app[data-screen="game"] { overflow: hidden; }
  .app[data-screen="game"] .topbar { max-width: var(--fit-width); }

  .screen-game {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: var(--side) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 16px 24px;
    max-width: var(--fit-width);
    padding-block: 6px 16px;
  }
  .side { min-height: 0; gap: 16px; }
  .sheet-wrap { flex: none; }
  /* If words run long, they scroll inside the pad; the dice and the buttons always stay in view. */
  .tray { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .tray-text { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(74, 72, 83, 0.4) transparent; }
  /* Dice and buttons sit at the bottom of the pad, so nothing jumps when this line appears. */
  .tray-result:empty { display: none; }

  /* The level card takes the height that is left above a short log. */
  .board { min-height: 0; gap: 16px; align-items: center; container-type: size; }
  .pile, .board > .log { width: min(100cqw, calc((100cqh - 166px) * 1.78)); }
  .pile { flex: none; }
  .board > .log { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .log-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .tables { font-size: clamp(11.5px, 1.85cqw, 25px); }

  /* Title: the card takes whatever height the menu or the character maker leaves. */
  .screen-title { flex: 1 1 auto; min-height: 0; gap: 22px; padding-block: 8px 24px; }
  .cover-stage { flex: 1 1 auto; min-height: 0; width: 100%; container-type: size; display: flex; align-items: center; justify-content: center; }
  .cover-holder { width: min(100cqw, 880px, 100cqh * 1.78); }
  /* Same room below the card for the menu and the character maker, so the card holds still. */
  .menu, .creator { flex: none; min-height: 250px; justify-content: center; }
  .creator-dice { min-height: 60px; padding: 0; }
  .rolled { max-width: 60ch; }
  /* Everything on the title card scales with the card, so it keeps the card's shape at any size. */
  .cover-sheet .card-h { font-size: min(5.9cqi, 24px); }
  .cover-sheet .races { font-size: min(5.5cqi, 21px); }
  .cover-sheet .hearts { font-size: min(4.7cqi, 20px); }
  .cover-sheet .inv { font-size: min(4.6cqi, 19px); }
  .cover-sheet .name-line { height: min(11cqi, 46px); }
  .cover-sheet .name-line .name, .cover-sheet .name-input { font-size: min(8.5cqi, 36px); }
  #cover-back .tables { font-size: min(1.85cqw, 17px); }
}

@media (min-width: 1000px) and (min-height: 600px) and (max-height: 780px) {
  .tray, .tray-text { gap: 7px; }
  .tray { padding: 24px 16px 14px; }
  .tray-prompt { font-size: 21px; }
  .tray-detail { font-size: 14px; }
  .tray-result { font-size: 19px; }
  .dice { min-height: 66px; padding: 0; gap: 14px; }
  .tray .die { --s: 44px; }
}

@media (min-width: 1000px) and (min-height: 600px) and (max-height: 680px) {
  .tray, .tray-text { gap: 6px; }
  .tray-where, .tray-detail, .log-h { display: none; }
  .tray-top { justify-content: flex-end; }
  .tray-prompt { font-size: 19px; }
  .dice { min-height: 58px; }
  .tray .die { --s: 40px; }
}

/* ---------- smaller screens ---------- */

/* Smaller tags keep the top bar on one line down to the narrowest desktop window. */
@media (max-width: 1180px) {
  .wordmark { font-size: 20px; padding: 6px 16px 5px; }
  .topnav { gap: 8px; }
  .nav-btn { padding: 4px 10px 3px; font-size: 14px; }
  .nav-btn.toggle { padding-left: 29px; }
  .nav-btn.toggle::before { left: 10px; }
  .nav-btn.toggle[aria-pressed="true"]::after { left: 9px; }
}

@media (max-width: 999px) {
  .screen-game { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 940px; gap: 18px; }
  .side, .board { display: contents; }
  .pile { grid-column: 1 / -1; order: 1; }
  .sheet-wrap { order: 2; }
  .tray { order: 3; }
  .log { grid-column: 1 / -1; order: 4; }
}

@media (max-width: 759px) {
  .topbar { padding: 12px 16px 6px; }
  .wordmark { font-size: 19px; padding: 6px 16px 5px; }
  .nav-btn { padding: 4px 10px 3px; font-size: 13.5px; }
  .nav-btn.toggle { padding-left: 28px; }
  .nav-btn.toggle::before { left: 9px; }
  .nav-btn.toggle[aria-pressed="true"]::after { left: 8px; }
  .screen { padding-inline: 16px; }

  .screen-game { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .side, .board { display: contents; }
  .pile { order: 1; }
  .sheet-wrap { order: 2; }
  .log { order: 3; }
  .tray-text { gap: 7px; }
  .tray {
    order: 4;
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    gap: 7px;
    padding: 24px 14px 14px;
    box-shadow: 0 -1px 0 rgba(40, 24, 10, 0.25), 0 -4px 0 -1px rgba(40, 24, 10, 0.14), var(--shadow-paper);
  }
  .tray-prompt { font-size: 20px; }
  .tray-detail { font-size: 14px; }
  .tray:has(.chips) .tray-detail { display: none; }
  .tray-result:empty { display: none; }
  .tray-result { font-size: 19px; }
  .tray-table { display: block; }
  .dice { min-height: 62px; gap: 14px; padding: 2px 0; }
  .tray .die { --s: 40px; }
  .log-list { max-height: 182px; }

  .level-card.in-game { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; padding: 12px 10px 8px; }
  .level-card.in-game .tables { display: none; }
}

@media (max-width: 640px) {
  .screen-title { gap: 16px; padding-top: 8px; }
  .table-pencil { display: none; }
  .menu, .creator {
    position: sticky;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    width: 100%;
    padding: 24px 14px 16px;
    box-shadow: 0 -1px 0 rgba(40, 24, 10, 0.25), 0 -4px 0 -1px rgba(40, 24, 10, 0.14), var(--shadow-paper);
  }
  .menu { gap: 12px; }
  .screen-title.creating .cover-text { display: none; }
  .creator-dice { min-height: 60px; }
  .cover { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; padding: 26px 22px 22px; row-gap: 18px; }
  .title .t1 { font-size: 40px; }
  .title .t2 { font-size: 23px; }
  .intro, .rules-text { font-size: 16px; }
  .cover-sheet .card-h { font-size: 19px; }
  .cover-sheet .races { font-size: 16px; }
  .cover-sheet .races li { white-space: normal; }
  .cover-sheet .hearts, .cover-sheet .inv { font-size: 16px; }

  .level-card:not(.in-game) { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; padding: 22px 16px 14px; row-gap: 16px; }
  .level-card:not(.in-game) .tables { font-size: 14px; gap: 14px; }

  .modal-card { padding: 26px 18px 20px; }
  .modal h2 { font-size: 25px; }
  .new-sheet { padding: 16px 14px; }
}

@media (max-width: 420px) {
  .party-label { font-size: 16px; }
  .btn.btn-round { width: 42px; height: 42px; font-size: 25px; }
  .menu-row { gap: 10px 14px; }
  .ptab { padding: 6px 7px 14px; font-size: 13px; }
  .ptab .phearts { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}