/* Shared styles for all pages. Fonts are self-hosted (no requests to Google = no consent needed). */

@font-face {
  font-family: "DM Sans";
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/dmsans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-weight: 100 1000;
  font-display: swap;
  src: url(fonts/dmsans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/outfit-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/outfit-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette: Ink Black #0d1821 · Yale Blue #344966 · Powder Blue #b4cded · Porcelain #f0f4ef · Dry Sage #bfcc94 */
  --bg: #f0f4ef;            /* Porcelain */
  --card: #ffffff;
  --text: #0d1821;          /* Ink Black */
  --muted: #506079;         /* Yale Blue, lighter (for secondary text) */
  --line: #d5e0ec;          /* Powder Blue, lighter */
  --accent: #344966;        /* Yale Blue: buttons, links */
  --on-accent: #f0f4ef;     /* text on accent */
  --highlight: #bfcc94;     /* Dry Sage: marker under headings */
  --good: #bfcc94;          /* game feedback: right / very close */
  --mid: #b4cded;           /* game feedback: close / wrong place */
  --far: #d3dae3;           /* game feedback: far away */
  --good-text: #56642c;     /* Dry Sage, darker: readable as text */
  --bar-opacity: 1;
  --track: #e4ebf3;
  --shadow: 0 1px 2px rgb(13 24 33 / 6%), 0 4px 16px rgb(13 24 33 / 7%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1821;          /* Ink Black */
    --card: #152335;
    --text: #f0f4ef;        /* Porcelain */
    --muted: #b4cded;       /* Powder Blue */
    --line: #26374f;
    --accent: #bfcc94;      /* Dry Sage */
    --on-accent: #0d1821;
    --highlight: #344966;   /* Yale Blue */
    --good: #bfcc94;
    --mid: #b4cded;
    --far: #4a5b72;
    --good-text: #bfcc94;
    --bar-opacity: 0.42;    /* light bars under light text: keep text readable */
    --track: #1c2c42;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 "DM Sans", system-ui, sans-serif;
}

a { color: var(--accent); }

.app {
  max-width: 520px;
  margin: 0 auto;
  padding: 12px 16px 32px;
}
.app.wide { max-width: 760px; }

/* header */
.brand {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.brand:hover { color: var(--text); }

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1 {
  font: 700 2rem/1 "Outfit", system-ui, sans-serif;
  margin: 4px 0 8px;
  letter-spacing: -0.02em;
}
h1 span {
  color: var(--accent);
  background: linear-gradient(transparent 62%, var(--highlight) 62%, var(--highlight) 88%, transparent 88%);
}

.icon-btn {
  font-size: 1.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.icon-btn:hover { background: var(--track); }

.menu-wrap { position: relative; }
.menu {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 10;
  min-width: 200px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.menu button, .menu a {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu button:hover, .menu a:hover { background: var(--track); }

.stats {
  margin: 4px 0 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.stats b { color: var(--text); }

.message {
  min-height: 1.5em;
  margin: 8px 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.secondary { color: var(--text); background: var(--track); }

dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: 80vh;
  padding: 20px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}
dialog::backdrop { background: rgb(0 0 0 / 45%); }
dialog h2 { font: 700 1.4rem "Outfit", system-ui, sans-serif; margin-top: 0; }
dialog form { text-align: right; margin-top: 12px; }

/* ads: fixed height so the page doesn't jump when an ad loads */
.ad-slot {
  min-height: 120px;
  margin: 24px 0 0;
  text-align: center;
}
.ad-slot::before {
  content: "Anzeige";
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ad-slot[hidden] { display: none; }

/* footer */
.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.site-footer a, .site-footer button {
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* legal pages */
.legal h1 { font-size: 1.8rem; margin: 16px 0; }
.legal h2 { font: 700 1.2rem "Outfit", system-ui, sans-serif; margin: 28px 0 8px; }
.legal h3 { font-size: 1rem; margin: 20px 0 6px; }
.legal p, .legal li { color: var(--text); }
.todo {
  background: #bfcc94;
  color: #0d1821;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 700;
}

/* statistics */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 12px 0; }
.stat { padding: 12px 8px; text-align: center; background: var(--track); border-radius: 12px; }
.stat b { display: block; font: 700 1.6rem/1.1 "Outfit", system-ui, sans-serif; }
.stat span { font-size: 0.8rem; color: var(--muted); }
.streak { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 99px; background: var(--track); font-weight: 700; }
.small { font-size: 0.85rem; color: var(--muted); }

/* article pages (guides, about) */
.article h1 { font-size: 2.2rem; margin: 16px 0 8px; }
.article .lead { font-size: 1.1rem; color: var(--muted); margin-top: 0; }
.article h2 { font: 700 1.35rem "Outfit", system-ui, sans-serif; margin: 32px 0 8px; }
.article p, .article li { line-height: 1.65; }
.article li { margin-bottom: 6px; }
.article .cta { margin: 28px 0; text-align: center; }
.article .example {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
}
.article table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.95rem; }
.article th, .article td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.article th { color: var(--muted); font-weight: 500; }

/* ===== Halloween look: active when <html> has class "halloween" (see SITE.halloween in site.js) ===== */
html.halloween {
  --bg: #0b141c;
  --card: #142233;
  --text: #f0f4ef;
  --muted: #b4cded;
  --line: #26374f;
  --accent: #bfcc94;
  --on-accent: #0d1821;
  --highlight: #344966;
  --good: #bfcc94;
  --mid: #b4cded;
  --far: #4a5b72;
  --good-text: #bfcc94;
  --bar-opacity: 0.42;
  --track: #1c2c42;
  --shadow: none;
  color-scheme: dark;
}
html.halloween body {
  background: radial-gradient(1200px 520px at 50% -220px, rgb(191 204 148 / 14%), transparent 70%) fixed, var(--bg);
}
html.halloween h1 span { text-shadow: 0 0 18px rgb(191 204 148 / 35%); }
html.halloween .app, html.halloween .site-footer { position: relative; z-index: 1; }
/* spider web (top right) and bats (drawn for this site) */
html.halloween body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  width: min(34vw, 190px);
  aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M200 0L0.0 -0.0M200 0L14.6 74.9M200 0L58.6 141.4M200 0L125.1 185.4M200 0L200.0 200.0M156.0 -0.0Q162.7 7.3 159.2 16.5Q168.4 20.9 168.9 31.1Q179.1 31.6 183.5 40.8Q192.7 37.3 200.0 44.0M116.0 -0.0Q128.8 13.8 122.1 31.5Q139.6 40.0 140.6 59.4Q160.0 60.4 168.5 77.9Q186.2 71.2 200.0 84.0M76.0 -0.0Q94.9 20.4 85.0 46.5Q110.8 59.0 112.3 87.7Q141.0 89.2 153.5 115.0Q179.6 105.1 200.0 124.0M36.0 -0.0Q60.9 27.0 47.9 61.4Q82.1 78.1 84.0 116.0Q121.9 117.9 138.6 152.1Q173.0 139.1 200.0 164.0' fill='none' stroke='%23b4cded' stroke-width='1.1'/%3E%3Cpath d='M142 58v26' stroke='%23b4cded' stroke-width='1'/%3E%3Ccircle cx='142' cy='88' r='5' fill='%23b4cded'/%3E%3Cpath d='M135 84l-5-3M135 88h-6M135 92l-5 3M149 84l5-3M149 88h6M149 92l5 3' stroke='%23b4cded' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat top right / contain;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
html.halloween body::after {
  content: "";
  position: fixed;
  top: 70px;
  left: -340px;
  width: 320px;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 120'%3E%3Cpath d='M32 10C29 4 26 6 26 10C20 4 10 4 2 12C8 12 12 16 12 20C16 16 22 16 24 20C27 16 30 18 32 24C34 18 37 16 40 20C42 16 48 16 52 20C52 16 56 12 62 12C54 4 44 4 38 10C38 6 35 4 32 10Z' fill='%23b4cded' transform='translate%2820 20%29 scale%28.9%29'/%3E%3Cpath d='M32 10C29 4 26 6 26 10C20 4 10 4 2 12C8 12 12 16 12 20C16 16 22 16 24 20C27 16 30 18 32 24C34 18 37 16 40 20C42 16 48 16 52 20C52 16 56 12 62 12C54 4 44 4 38 10C38 6 35 4 32 10Z' fill='%23b4cded' transform='translate%28150 60%29 scale%28.6%29'/%3E%3Cpath d='M32 10C29 4 26 6 26 10C20 4 10 4 2 12C8 12 12 16 12 20C16 16 22 16 24 20C27 16 30 18 32 24C34 18 37 16 40 20C42 16 48 16 52 20C52 16 56 12 62 12C54 4 44 4 38 10C38 6 35 4 32 10Z' fill='%23b4cded' transform='translate%28240 10%29 scale%28.75%29'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  animation: bats-fly 38s linear infinite;
}
@keyframes bats-fly {
  0% { transform: translate(0, 0); }
  50% { transform: translate(calc(50vw + 170px), 40px); }
  100% { transform: translate(calc(100vw + 340px), 0); }
}
@media (prefers-reduced-motion: reduce) {
  html.halloween body::after { animation: none; left: auto; right: 12px; top: 180px; width: 160px; }
}
/* seasonal banner (only visible in the Halloween look) */
.season-banner { display: none; }
html.halloween .season-banner {
  display: block;
  margin: 8px 0 16px;
  padding: 14px 16px;
  text-align: center;
  font-weight: 700;
  color: #0d1821;
  background: linear-gradient(90deg, #bfcc94, #b4cded);
  border-radius: 14px;
  text-decoration: none;
}
html.halloween .season-banner span { font-weight: 400; }