/* TavernKeeper – parchment & ink. Fonts: Cinzel (headings), Crimson Pro (text), both SIL OFL, see static/fonts/. */

@font-face { font-family: "Cinzel"; src: url(fonts/cinzel-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url(fonts/crimson-pro-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url(fonts/crimson-pro-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  --parchment: #efe2c4;
  --sheet: #fbf4e2;
  --sheet-2: #f4e8cc;
  --ink: #2a1c10;
  --muted: #5b4631;
  --line: #c4ab7f;
  --line-strong: #8a6a40;
  --seal: #8e1f1a;
  --seal-dark: #5a100c;
  --seal-light: #b8392c;
  --gold: #b48a2c;
  --gold-light: #ecd08a;
  --wood: #3a2314;
  --wood-dark: #24150b;
  --ok: #2d5a1e;
  --ok-bg: #e3ebcf;
  --warn-bg: #f3ddc0;
  --focus: #1d4f91;
  --head: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Crimson Pro", Georgia, "Times New Roman", serif;
  --radius: .5rem;
  --shadow: 0 1px 2px rgba(58, 35, 20, .18), 0 4px 14px rgba(58, 35, 20, .12);
  /* line – diamond – line, used under headings */
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cg fill='none' stroke='%23946d2a' stroke-width='1.5'%3E%3Cpath d='M4 8h92M144 8h92'/%3E%3Cpath d='M120 2l8 6-8 6-8-6z' fill='%238e1f1a' stroke='none'/%3E%3Ccircle cx='103' cy='8' r='2.5' fill='%23946d2a' stroke='none'/%3E%3Ccircle cx='137' cy='8' r='2.5' fill='%23946d2a' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font: 1.15rem/1.55 var(--body); color: var(--ink);
  background-color: var(--parchment);
  background-image: var(--noise),
    radial-gradient(ellipse at 50% 0, rgba(255, 248, 225, .7), transparent 60%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 80, 30, .22) 100%);
}

/* ---------- Header: a wooden beam ---------- */
body > header {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; justify-content: space-between;
  padding: .55rem 1rem; color: #f3e5c4;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 3px, transparent 3px 9px), linear-gradient(var(--wood), var(--wood-dark));
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
body > header a { color: #f3e5c4; }
body > header nav { display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: center; }
body > header nav a, body > header nav button { padding: .3rem 0; }
body > header form { margin: 0; }
body > header button { font: inherit; background: none; color: #f3e5c4; border: 0; padding: 0; min-height: 0; text-decoration: underline; box-shadow: none; cursor: pointer; }
body > header button:hover { background: none; color: #fff; }
body > header :focus-visible { outline-color: var(--gold-light); }
.brand { display: inline-flex; gap: .45rem; align-items: center; font: 700 1.3rem var(--head); letter-spacing: .06em; color: var(--gold-light) !important; text-decoration: none; }
.brand .emblem { width: 1.6rem; height: 1.6rem; }

main { max-width: 52rem; margin: 0 auto; padding: 1rem 1rem 3rem; }

/* ---------- Type ---------- */
h1, h2 { font-family: var(--head); font-weight: 700; color: var(--wood); line-height: 1.2; letter-spacing: .02em; }
h1 { font-size: 1.55rem; text-align: center; margin: 1rem 0 1.2rem; }
h1::after { content: ""; display: block; width: min(15rem, 70%); height: 1rem; margin: .5rem auto 0; background: var(--divider) center / contain no-repeat; }
h2 { font-size: 1.3rem; margin: 1.8rem 0 .8rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
h2 small { display: inline-block; margin-left: .4rem; font: italic 400 1rem var(--body); letter-spacing: 0; color: var(--muted); }
h3 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
@media (min-width: 40rem) { h1 { font-size: 2.1rem; } }

a { color: var(--seal); text-underline-offset: .15em; }
a:hover { color: var(--seal-dark); }
p { margin: .6rem 0; }
.hint, small { color: var(--muted); }
small { display: block; font-size: .9em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.error { color: var(--seal); font-weight: 700; }
p.error { padding: .45rem .7rem; border-left: 4px solid var(--seal); background: rgba(142, 31, 26, .08); border-radius: 0 .3rem .3rem 0; }
.ok { color: var(--ok); }
p.ok, div.ok { padding: .45rem .7rem; border-left: 4px solid var(--ok); background: var(--ok-bg); border-radius: 0 .3rem .3rem 0; }
.ok input { color: var(--ink); }

.intro { white-space: pre-line; margin: 0 0 1.4rem; }

/* ---------- Parchment sheets ---------- */
.sheet, .question {
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 0 0 4px var(--sheet), inset 0 0 0 5px rgba(180, 138, 44, .35);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2rem;
}
.sheet > h2:first-child { margin-top: .2rem; }
.sheet.narrow { max-width: 26rem; margin-inline: auto; }
.sheet.narrow h1 { margin-top: .2rem; font-size: 1.5rem; }

/* ---------- Forms ---------- */
label { display: block; margin: .6rem 0; }
input, select, textarea, button { font: inherit; }
input:not([type=radio]):not([type=checkbox]):not([type=range]), select, textarea {
  width: 100%; min-height: 2.75rem; padding: .45rem .6rem; margin-top: .2rem;
  color: var(--ink); background: #fffdf6; border: 1px solid var(--line-strong); border-radius: .35rem;
  box-shadow: inset 0 1px 2px rgba(58, 35, 20, .15);
}
input::placeholder { color: #7a6650; }
textarea { line-height: 1.45; resize: vertical; }
input[type=radio], input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--seal); transform: translateY(.2em); }

/* Buttons: stamped by default, wax seal for primary actions */
button, .buttons a {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 2.75rem; padding: .45rem 1.1rem;
  font: 600 .95rem var(--head); letter-spacing: .04em; line-height: 1.2; text-decoration: none;
  color: var(--wood); background: linear-gradient(#fbf3de, #e8d6ad);
  border: 1px solid var(--line-strong); border-radius: .4rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(58, 35, 20, .3);
  cursor: pointer;
}
button:hover, .buttons a:hover { background: linear-gradient(#fff8e6, #efdfba); color: var(--ink); }
button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(58, 35, 20, .3); }
button:disabled { opacity: .45; cursor: default; transform: none; }
button.seal {
  min-height: 3rem; padding: .55rem 1.5rem; border-radius: 999px;
  color: #fdf1d8; border: 2px solid var(--seal-dark);
  background: radial-gradient(circle at 35% 28%, var(--seal-light), var(--seal) 50%, var(--seal-dark) 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 214, 170, .22), inset 0 -3px 6px rgba(0, 0, 0, .35), 0 2px 5px rgba(60, 10, 5, .45);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
button.seal:hover { color: #fff; background: radial-gradient(circle at 35% 28%, #c9473a, #9c241e 50%, var(--seal-dark) 100%); }
button.danger { color: var(--seal); background: transparent; border-color: var(--seal); box-shadow: none; }
button.danger:hover { color: #fdf1d8; background: var(--seal); }
form > button.seal { margin-top: .6rem; }

.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0; }
.inline input, .inline select { flex: 1 1 10rem; width: auto !important; margin: 0; }

/* ---------- Progress over the sections ---------- */
.progress { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: 0; margin: 1rem 0; list-style: none; }
.progress li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; align-items: center;
  padding: .45rem .6rem; line-height: 1.25;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
}
.progress li::before {
  content: counter(step); grid-row: span 2;
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font: 700 1.05rem var(--body); color: var(--muted); border: 1.5px solid var(--line-strong); background: var(--sheet-2);
}
.progress li a { font-weight: 600; text-decoration: none; color: var(--ink); hyphens: auto; overflow-wrap: break-word; }
.progress li a::after { content: ""; position: absolute; inset: 0; } /* whole tile clickable */
.progress li a:hover { text-decoration: underline; }
.progress li small { font-size: .85rem; }
.progress li.begonnen::before { border-color: var(--gold); background: var(--gold-light); color: var(--wood); }
.progress li.abgeschlossen::before { content: "✓"; color: #fdf1d8; border-color: var(--seal-dark); background: radial-gradient(circle at 35% 30%, var(--seal-light), var(--seal) 60%, var(--seal-dark)); }
.progress li.optional::before { border-style: dashed; }
.progress li.current { border: 2px solid var(--seal); background: #fff9ea; box-shadow: var(--shadow); }
@media (max-width: 40rem) {
  .progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
  .progress li { padding: .35rem .45rem; column-gap: .4rem; font-size: 1rem; }
  .progress li::before { width: 1.6rem; height: 1.6rem; font-size: .85rem; }
}

/* ---------- Questions ---------- */
.question { min-width: 0; }
.question legend { float: left; width: 100%; padding: 0; margin-bottom: .4rem; font-weight: 700; font-size: 1.2rem; line-height: 1.3; }
.question > :not(legend) { clear: both; }
.question > .hint:first-of-type { margin-top: 0; }
.question.missing { border: 2px solid var(--seal); box-shadow: var(--shadow), inset 5px 0 0 var(--seal); }
.option { display: flex; gap: .6rem; align-items: flex-start; margin: .15rem 0; padding: .35rem .5rem; border-radius: .35rem; cursor: pointer; }
.option:hover { background: var(--sheet-2); }
.option:has(input:checked) { background: #f1e1bd; }
.status { display: block; min-height: 1.4em; margin-top: .3rem; text-align: right; font-style: italic; font-size: 1rem; color: var(--ok); }
.buttons { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-top: 1.5rem; }
@media (max-width: 40rem) {
  .buttons button.seal { order: -1; flex: 1 0 100%; }
  .buttons a { flex: 1 1 0; }
}

/* Matrix: table on wide screens, one choice per line on narrow ones */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: .4rem .3rem; border-bottom: 1px solid var(--line); text-align: center; }
.matrix thead th { font: 600 .85rem var(--head); letter-spacing: .03em; color: var(--wood); vertical-align: bottom; }
.matrix tbody th { text-align: left; font-weight: 600; }
.matrix tbody th small { font-weight: 400; }
.matrix tbody tr:nth-child(even) { background: rgba(196, 171, 127, .14); }
.matrix tbody tr:hover { background: rgba(196, 171, 127, .28); }
.matrix tr.missing th { color: var(--seal); }
.matrix tr.missing th::before { content: "✦ "; }
.matrix label { margin: 0; cursor: pointer; }
.matrix td label { display: grid; place-items: center; min-height: 2.5rem; }
.matrix .col { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 40rem) {
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead { display: none; }
  .matrix tbody tr, .matrix tbody tr:nth-child(even), .matrix tbody tr:hover { background: none; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .matrix tbody tr:last-child { border-bottom: 0; }
  .matrix th, .matrix td { border: 0; text-align: left; padding: 0; }
  .matrix tbody th { margin-bottom: .3rem; }
  .matrix .col { position: static; width: auto; height: auto; clip: auto; }
  .matrix td label { display: flex; gap: .6rem; align-items: flex-start; place-items: initial; min-height: 0; padding: .4rem .5rem; margin: .15rem 0; border: 1px solid transparent; border-radius: .35rem; }
  .matrix td label:has(input:checked) { background: #f1e1bd; border-color: var(--line); }
}

/* Points widget */
.points .item { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin: 0; padding: .55rem 0; border-bottom: 1px dashed var(--line); }
.points .item span { flex: 1 1 12rem; }
.points .item input { width: 4.2rem !important; min-height: 2.6rem; margin: 0; text-align: center; font-weight: 700; font-size: 1.15rem; }
.points .item button { width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0; border-radius: 50%; font: 700 1.3rem/1 var(--body); }
@media (max-width: 40rem) { .points .item span { flex-basis: 100%; } }
.remaining {
  display: table; margin: .8rem auto .2rem; padding: .3rem 1.1rem;
  font: 700 1.1rem var(--body); color: var(--wood);
  background: linear-gradient(#f6e3a8, var(--gold-light)); border: 1px solid var(--gold); border-radius: .3rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* Range widget: two wax-seal handles on a leather strap */
.range select { margin-top: .2rem; }
.dual { position: relative; height: 2.6rem; margin: .8rem .2rem .2rem; }
.dual::before { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 6px; border-radius: 3px; background: linear-gradient(#8a6a40, #5b4631); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .3); }
.dual input { position: absolute; left: 0; top: .1rem; width: 100%; height: 2.2rem; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dual input:focus-visible { outline: none; }
.dual input::-webkit-slider-runnable-track { background: none; }
.dual input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid var(--seal-dark); background: radial-gradient(circle at 35% 30%, var(--seal-light), var(--seal) 55%, var(--seal-dark)); box-shadow: inset 0 0 0 3px rgba(255, 214, 170, .25), 0 1px 3px rgba(0, 0, 0, .4); cursor: pointer; }
.dual input::-moz-range-thumb { pointer-events: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--seal-dark); background: radial-gradient(circle at 35% 30%, var(--seal-light), var(--seal) 55%, var(--seal-dark)); box-shadow: inset 0 0 0 3px rgba(255, 214, 170, .25), 0 1px 3px rgba(0, 0, 0, .4); cursor: pointer; }
.dual input::-moz-range-track { background: none; }
.dual input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--focus); }
.dual input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--focus); }
.range-label { white-space: pre-line; margin: .2rem 0 0; padding: .4rem .7rem; background: var(--sheet-2); border-radius: .35rem; }

/* ---------- Admin ---------- */
.players { width: 100%; border-collapse: collapse; }
.players th, .players td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.players thead th, .grid thead th { font: 600 .85rem var(--head); letter-spacing: .03em; color: var(--muted); }
.roster { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.roster tbody tr:nth-child(even) { background: rgba(196, 171, 127, .12); }
.roster td:first-child a { font-weight: 700; font-size: 1.1rem; }
.roster td.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.roster .actions .inline { margin: 0; }
.roster .actions .inline:first-child { flex: 1 1 100%; }
@media (max-width: 40rem) {
  .roster, .roster tbody { display: block; background: none; border: 0; box-shadow: none; }
  .roster thead { display: none; }
  .roster tr { display: block; margin-bottom: .9rem; padding: .7rem .8rem; background: var(--sheet) !important; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .roster td { display: block; border: 0; padding: .2rem 0; }
  .roster td.actions { display: flex; }
  .roster td:nth-child(2)::before { content: "⚑ "; color: var(--gold); }
}

.ledger { list-style: none; padding: 0; margin: .8rem 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.ledger:empty { display: none; }
.ledger li { padding: .5rem .9rem; border-bottom: 1px solid var(--line); }
.ledger li:last-child { border-bottom: 0; }
.ledger .inline { margin: 0; justify-content: space-between; }
.ledger .inline a { font-weight: 600; }

.table-scroll { overflow-x: auto; margin: .5rem 0 1rem; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.grid thead th { white-space: normal; vertical-align: bottom; }
.grid tbody th { text-align: left; position: sticky; left: 0; background: var(--sheet); }
.grid tbody tr:last-child > * { border-bottom: 0; }

.notices { padding-left: 1.2rem; }
.notices li { margin: .3rem 0; }
.toc { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-family: var(--head); font-size: .95rem; }

.results { width: 100%; border-collapse: collapse; margin: .3rem 0 1rem; }
.results td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.results td:first-child { font-weight: 600; }
.results td:last-child { color: var(--muted); }
.results tr:nth-child(even) { background: rgba(196, 171, 127, .12); }
.results tr.error { color: var(--seal); background: rgba(142, 31, 26, .08); }
.results tr.error td:first-child::before { content: "✦ "; }
.results tr.error td:last-child { color: var(--seal); }
@media (max-width: 40rem) {
  .results, .results tbody, .results tr, .results td { display: block; }
  .results tr { padding: .4rem .2rem; border-bottom: 1px solid var(--line); }
  .results td { border: 0; padding: .05rem 0; }
  .results td:empty { display: none; }
}

/* Safety text to copy: a small scroll */
.scroll { position: relative; margin: .5rem 0 1rem; }
.scroll textarea { font-size: 1.05rem; background: #fffaf0 !important; border: 1px dashed var(--line-strong) !important; padding: .8rem !important; }
.scroll button { margin-top: .5rem; }

.text { white-space: pre-line; }
.answers { margin: 0; }
.answers dt { font-weight: 700; margin-top: .6rem; }
.answers dd { margin: .1rem 0 .6rem 1rem; padding-left: .6rem; border-left: 2px solid var(--line); }

/* ---------- Login: the tavern sign ---------- */
.sign { position: relative; max-width: 21rem; margin: .8rem auto 1.6rem; padding-top: 2rem; text-align: center;
  background: linear-gradient(#3d3d3d, #1f1f1f) 22% 0 / 3px 2.1rem no-repeat, linear-gradient(#3d3d3d, #1f1f1f) 78% 0 / 3px 2.1rem no-repeat; }
.sign::before { content: ""; position: absolute; top: -.2rem; left: 8%; right: 8%; height: .45rem; border-radius: .3rem; background: linear-gradient(#4a4a4a, #1c1c1c); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
.sign-board {
  padding: 1rem 1rem 1.1rem; color: var(--gold-light);
  background: repeating-linear-gradient(178deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px), linear-gradient(160deg, #6a4222, #43291a 55%, #2e1b0f);
  border: 5px solid #24150b; border-radius: 1.4rem / 2.2rem;
  box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 18px rgba(0, 0, 0, .55), 0 8px 18px rgba(40, 20, 5, .4);
}
.sign-board .emblem { width: 2.6rem; height: 2.6rem; }
.sign-name { margin: .1rem 0 0; font: 700 1.9rem/1.1 var(--head); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
.sign-tagline { margin: .4rem 0 0; font-style: italic; font-size: 1.05rem; color: #f3e5c4; }

@media (prefers-reduced-motion: no-preference) {
  button, .option, .matrix td label { transition: background-color .15s, color .15s; }
}