/* Lamplight Tavern — the whole site's stylesheet.
   Self-contained on purpose: no font CDN, no analytics, no third-party anything.
   The privacy policy says nothing leaves the visitor, and a page that quietly
   handed an IP address to a font host would make that untrue — which is exactly
   what German courts have found actionable. The five faces sit in fonts/. */

@font-face{font-family:"IM Fell English";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/im-fell-english-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IM Fell English";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/im-fell-english-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/alegreya-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/alegreya-sans-latin-700-normal.woff2) format("woff2")}

/* The light palette is complete on bare :root, so a page renders correctly for a
   visitor whose browser expresses no preference at all. Dark only re-states the
   same tokens. */
:root{
  --ground:#f7f3ec; --raised:#fffdf9; --ink:#1b1611; --muted:#6d6355;
  --rule:#e2d9cb; --accent:#a8651a; --board:#17100a; --boardink:#e9dcc2;
  --boardaccent:#d99a3d;
  --measure:38rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#141009; --raised:#1c160e; --ink:#ece2d2; --muted:#9a8d7a;
    --rule:#332b20; --accent:#d99a3d;
  }
}

*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.65 "Alegreya Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
main{max-width:var(--measure);margin:0 auto;padding:44px 20px 72px}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

h1,h2,h3,.wordmark{font-family:"IM Fell English",Georgia,"Times New Roman",serif;font-weight:400}
h1{font-size:2rem;line-height:1.15;margin:0 0 6px;text-wrap:balance}
h2{font-size:1.35rem;margin:40px 0 10px;color:var(--accent);text-wrap:balance}
h3{font-size:1.08rem;margin:24px 0 6px;text-wrap:balance}
p,li{margin:0 0 14px}
.sub{color:var(--muted);font-size:.95rem;margin:0 0 32px}
.lede{border-left:3px solid var(--accent);padding-left:14px}
hr{border:0;border-top:1px solid var(--rule);margin:48px 0}
code{background:rgba(128,128,128,.14);padding:1px 5px;border-radius:4px;font-size:.9em}
small{color:var(--muted)}

/* ---- the masthead: the one place the tavern shows its own colours ---- */
.masthead{background:var(--board);color:var(--boardink);padding:52px 20px 44px;text-align:center}
.masthead .wordmark{font-size:2.6rem;line-height:1.05;margin:0;color:var(--boardink)}
.masthead .flame{color:var(--boardaccent)}
.masthead .tagline{
  font-family:"IM Fell English",Georgia,serif;font-style:italic;
  color:var(--boardaccent);margin:10px 0 0;font-size:1.12rem;
}
.masthead .count{
  display:block;margin-top:18px;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(233,220,194,.62);font-family:"Alegreya Sans",sans-serif;
}

/* ---- the shelf: thirty real games, so a plain list is the honest shape ---- */
.shelf{list-style:none;padding:0;margin:22px 0 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:2px 26px}
.shelf li{margin:0;padding:11px 0;border-bottom:1px solid var(--rule)}
.shelf .g{font-family:"IM Fell English",Georgia,serif;font-size:1.12rem;display:block}
.shelf .e{display:block;color:var(--muted);font-size:.86rem;line-height:1.4}

/* ---- footer, carrying the links German law expects to find ---- */
.foot{border-top:1px solid var(--rule);margin-top:56px;padding:22px 20px 60px;
  max-width:var(--measure);margin-left:auto;margin-right:auto;
  color:var(--muted);font-size:.88rem}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}
.foot a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{border-bottom-color:var(--accent)}

.back{display:inline-block;margin-bottom:26px;font-size:.9rem;text-decoration:none}
.back:hover{text-decoration:underline}

table.plain{border-collapse:collapse;width:100%;font-size:.94rem}
table.plain td{padding:7px 14px 7px 0;vertical-align:top;border-bottom:1px solid var(--rule)}
/* The label column is a label, not prose: keep it on one line so "Legal basis"
   and "Support · Hilfe" do not break in half and leave the value hanging. The
   longest label in any of these tables is "Rechtsgrundlage", which still fits
   beside its value on a 390px phone. */
table.plain td:first-child{white-space:nowrap;color:var(--muted)}
table.plain td:first-child a{color:var(--accent)}
.scroller{overflow-x:auto}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* the dated line the legal pages end on — not the site footer, which is .foot */
.stamp{color:var(--muted);font-size:.85rem;margin-top:44px}