/* ---- GAME COLOUR: Limegrøn #A8E02E (set once as --game; every accent below derives from the --gc-* values) ---- */
html.sd-page {
  --game: #A8E02E;
  --sd-orange: #A8E02E; --sd-primary: #A8E02E;
  --sd-cream: #D4F096; --sd-amber: #BEE862;
  --sd-bg: #BBE75C; --sd-bg-2: #C6EB75;
  --sd-panel: #F7FCEC; --sd-panel-2: #E8F7C9;
}
html.sd-page:root[data-theme="dark"] {
  --sd-primary: #A8E02E; --sd-line: #A8E02E; --sd-focus: #D4F096;
  --sd-bg: #1B1F12; --sd-bg-2: #1F2513;
  --sd-panel: #252D14; --sd-panel-2: #344217; --sd-grid: rgba(168,224,46,.16);
}
@media (prefers-color-scheme: dark) { html.sd-page:root:not([data-theme="light"]) {
  --sd-primary: #A8E02E; --sd-line: #A8E02E; --sd-focus: #D4F096;
  --sd-bg: #1B1F12; --sd-bg-2: #1F2513;
  --sd-panel: #252D14; --sd-panel-2: #344217; --sd-grid: rgba(168,224,46,.16);
} }
/* Sjovt Dansk theme — FORBINDEORD (game-id: forbindeord) */
html.sd-page {
  --bg: var(--sd-bg); --bg2: var(--sd-bg-2); --grid: var(--sd-grid);
  --cyan: var(--sd-ink); --cyan-dim: var(--sd-ink); --orange: var(--sd-orange); --orange-hot: var(--sd-orange);
  --text: var(--sd-text); --muted: var(--sd-text-soft); --good: var(--sd-ok); --bad: var(--sd-bad);
  --panel: var(--sd-panel);
}
html.sd-page, html.sd-page body { height: auto; }
html.sd-page body {
  font-family: var(--sd-font-body); font-size: 16px; line-height: 1.6;
  min-height: calc(100dvh - var(--sd-bar-h)); padding: 0;
  display: block; overflow-x: hidden;
}
html.sd-page .wrap { width: min(712px, 100%); margin: 0 auto; padding: 24px 16px 56px; }

/* hero */
html.sd-page .hero { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
html.sd-page h1 {
  font-family: var(--sd-font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(28px, 8vw, 48px); line-height: 1.1; margin: 0; text-align: left;
  color: var(--sd-text); text-shadow: 3px 3px 0 var(--sd-cream); overflow-wrap: anywhere;
}
html.sd-page h1 .o { color: var(--sd-text); text-shadow: 3px 3px 0 var(--sd-primary); }
html.sd-page .sub { text-align: left; color: var(--sd-text); font-family: var(--sd-font-display); letter-spacing: .06em; font-size: 15px; margin: 4px 0 0; }
html.sd-page .hero .sd-sprite { flex: none; }
@media (max-width: 420px) { html.sd-page .hero .sd-sprite svg { width: 64px; height: 64px; } html.sd-page .hero { gap: 12px; } }

/* hud */
html.sd-page .hud { gap: 4px; margin: 0 0 20px; }
@media (max-width: 430px) { html.sd-page .chip { min-width: 74px !important; padding: 6px 8px 8px !important; } html.sd-page .chip.lives { min-width: 110px !important; } }
html.sd-page .chip {
  border: 0; border-radius: 0; background: var(--sd-panel); color: var(--sd-text); margin: 4px;
  box-shadow: var(--sd-box), 4px 4px 0 0 var(--sd-ink); padding: 6px 12px 8px; min-width: 84px; min-height: 44px;
  font-family: var(--sd-font-display); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
}
html.sd-page .chip b { font-family: var(--sd-font-body); font-weight: 700; font-size: 20px; color: var(--sd-text); margin-top: 0; display: block; }
html.sd-page .chip.score b, html.sd-page .chip.streak b, html.sd-page .chip.best b { color: var(--sd-text); }
html.sd-page .chip.streak { background: var(--sd-cream); color: #101010; }
html.sd-page .chip.streak b { color: #101010; }
html.sd-page .chip.lives b { color: var(--sd-bad); letter-spacing: .05em; }
html.sd-page .chip b.sd-fx-bump { display: block; }

/* panel */
html.sd-page .panel {
  background: var(--sd-panel); color: var(--sd-text); border: 0; border-radius: 0; margin: 4px;
  box-shadow: var(--sd-box), var(--sd-drop); padding: 24px 20px; backdrop-filter: none;
}
html.sd-page .cat {
  font-family: var(--sd-font-display); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: #101010; margin-bottom: 16px; gap: 10px;
}
html.sd-page .cat > span:first-child { padding: 4px 10px; margin: 4px; }
html.sd-page .cat::before { display: none; }
html.sd-page .sentence { font-family: var(--sd-font-body); font-size: clamp(18px, 4.6vw, 22px); line-height: 1.7; color: var(--sd-text); overflow-wrap: anywhere; }
/* options */
html.sd-page .opts { gap: 16px; margin-top: 24px; }
html.sd-page .opt {
  margin: 4px; min-height: 52px; border: 0; border-radius: 0; background: var(--sd-white); color: #101010;
  font-family: var(--sd-font-body); font-weight: 700; font-size: 17px; letter-spacing: 0; padding: 12px 14px; overflow-wrap: anywhere;
  box-shadow: var(--sd-box), 4px 4px 0 0 var(--sd-ink); transition: none;
}
html.sd-page .opt::before { color: var(--sd-orange); font-family: var(--sd-font-display); margin-right: 10px; }
html.sd-page .opt:hover:not(:disabled) { transform: translate(-2px, -2px); background: var(--sd-cream); border: 0; box-shadow: var(--sd-box), 6px 6px 0 0 var(--sd-ink); }
html.sd-page .opt:disabled { color: #101010; opacity: 1; }
html.sd-page .opt:disabled:not(.correct):not(.wrong) { background: #E8DFC6; color: #4a4434; box-shadow: var(--sd-box); }
html.sd-page .opt.correct { background: #CFF1C9; color: #0b3d1a; box-shadow: var(--sd-box-ok), 4px 4px 0 0 var(--sd-ok); }
html.sd-page .opt.correct::before { color: var(--sd-ok); }
html.sd-page .opt.wrong { background: #FFD0DE; color: #5a0a26; box-shadow: var(--sd-box-bad), 4px 4px 0 0 var(--sd-bad); animation: none; }
html.sd-page .opt.wrong::before { color: var(--sd-bad); }
html.sd-page .opt.correct::after { content: " RIGTIGT"; font-family: var(--sd-font-display); font-size: 14px; letter-spacing: .04em; margin-left: 8px; }
html.sd-page .opt.wrong::after { content: " FORKERT"; font-family: var(--sd-font-display); font-size: 14px; letter-spacing: .04em; margin-left: 8px; }
html.sd-page .opt.sd-fx-correct { animation: sd-pop .32s steps(4); }
html.sd-page .opt.sd-fx-wrong { animation: sd-shake .36s steps(6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .opt.wrong::before { color: #D4145A; } }

/* reveal */
html.sd-page .reveal { margin-top: 24px; border-top: 4px dashed var(--sd-text); padding-top: 16px; animation: none; }
html.sd-page .reveal.show { animation: sd-enter .28s steps(4) both; }
html.sd-page .reveal .lbl { font-family: var(--sd-font-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--sd-text); }
html.sd-page .reveal .tr { color: var(--sd-text); font-size: 17px; font-style: normal; margin: 4px 0 12px; }
html.sd-page .reveal .note { color: var(--sd-text-soft); font-size: 16px; line-height: 1.6; }
html.sd-page .reveal .note b { background: var(--sd-cream); padding: 0 4px; color: #101010; }

/* buttons */
html.sd-page .btn, html.sd-page .weak-btn, html.sd-page .back-btn {
  border: 0; border-radius: 0; font-family: var(--sd-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--sd-orange); color: #101010; min-height: 48px; cursor: pointer; transition: none;
  box-shadow: var(--sd-box), var(--sd-bevel), 0 12px 0 -4px var(--sd-ink);
}
html.sd-page .btn { width: calc(100% - 8px); margin: 20px 4px 16px; font-size: 20px; padding: 14px; }
html.sd-page .btn:hover { background: var(--sd-cream); transform: translateY(-2px); box-shadow: var(--sd-box), var(--sd-bevel), 0 12px 0 -4px var(--sd-ink); }
html.sd-page .btn:active { transform: translateY(4px); box-shadow: var(--sd-box), var(--sd-bevel), 0 4px 0 -4px var(--sd-ink); }
html.sd-page .weak-btn { background: var(--sd-cream); font-size: 15px; padding: 10px 14px; margin: 4px 4px 12px; }
html.sd-page .weak-btn:hover { background: var(--sd-white); transform: translateY(-2px); box-shadow: var(--sd-box), var(--sd-bevel), 0 12px 0 -4px var(--sd-ink); }
html.sd-page .back-btn { background: var(--sd-panel); color: var(--sd-text); font-size: 14px; padding: 8px 14px; margin: 4px 4px 10px; }
html.sd-page .back-btn:hover { background: var(--sd-cream); color: #101010; }
/* reset (US-030) */
html.sd-page .tools { margin: 20px 4px 0; }
html.sd-page .reset-btn {
  border: 0; border-radius: 0; font-family: var(--sd-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--sd-panel); color: var(--sd-text); min-height: 48px; min-width: 48px; padding: 10px 16px; font-size: 14px; cursor: pointer;
  box-shadow: var(--sd-box), 4px 4px 0 0 var(--sd-ink);
}
html.sd-page .reset-btn:hover { background: var(--sd-cream); color: #101010; }
html.sd-page .reset-btn:active { transform: translate(2px, 2px); box-shadow: var(--sd-box); }
html.sd-page .weak-banner {
  background: var(--sd-cream); color: #101010; border: 0; border-radius: 0; margin: 4px 4px 16px; padding: 12px 14px;
  box-shadow: var(--sd-box), 4px 4px 0 0 var(--sd-ink); font-size: 15px; letter-spacing: 0; font-family: var(--sd-font-body);
}
html.sd-page .weak-banner b { color: #101010; font-family: var(--sd-font-display); letter-spacing: .06em; font-size: 16px; }
html.sd-page .weak-banner .back-btn { background: #FFF4D6; color: #101010; margin-bottom: 14px; }

/* progress */
html.sd-page .bar { height: 20px; background: var(--sd-panel-2); border-radius: 0; margin: 20px 4px 4px; box-shadow: var(--sd-box); overflow: hidden; }
html.sd-page .bar > i { background: repeating-linear-gradient(90deg, var(--sd-orange) 0 12px, #101010 12px 16px); box-shadow: none; transition: width .3s steps(5); }
html.sd-page .count { color: var(--sd-text-soft); font-size: 14px; letter-spacing: .02em; margin-top: 10px; }

/* end */
html.sd-page .end-sprites { display: flex; align-items: flex-end; justify-content: center; gap: 20px; margin: 4px 0 8px; }
html.sd-page .end h2 { font-family: var(--sd-font-display); font-weight: 700; letter-spacing: .06em; color: var(--sd-text); text-shadow: none; font-size: 32px; }
html.sd-page .end .big { font-family: var(--sd-font-body); font-weight: 700; font-size: clamp(48px, 14vw, 72px); color: var(--sd-orange); text-shadow: 4px 4px 0 #101010; }
html.sd-page .end p { color: var(--sd-text); letter-spacing: 0; font-size: 17px; }
@media (max-width: 420px) { html.sd-page .end-sprites .sd-sprite svg { width: 56px; height: auto; } }

html.sd-page .foot { color: var(--sd-text); opacity: 1; font-family: var(--sd-font-display); font-size: 14px; letter-spacing: .06em; margin-top: 24px; }

/* toast */
html.sd-page .toast {
  top: calc(var(--sd-bar-h) + 24px); background: #101010; color: var(--sd-cream); border: 0; border-radius: 0;
  box-shadow: 0 0 0 4px var(--sd-cream), 8px 8px 0 4px #101010; font-family: var(--sd-font-display); font-weight: 700; font-size: 18px; letter-spacing: .06em; max-width: 92vw; white-space: normal; text-align: center;
}
html.sd-page .toast.show { animation: sd-toast 1.7s steps(10) forwards; }
@keyframes sd-toast { 0% { opacity: 0; transform: translate(-50%, 12px) } 12% { opacity: 1; transform: translate(-50%, 0) } 80% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -12px) } }

@media (prefers-reduced-motion: reduce) {
  html.sd-page .toast.show { animation: sd-fadeout 1.2s linear forwards; }
  html.sd-page .reveal.show { animation: none; }
  html.sd-page .bar > i { transition: none; }
}
html[data-sd-motion="off"] .toast.show { animation: sd-fadeout 1.2s linear forwards; }
@keyframes sd-fadeout { 0%, 70% { opacity: 1 } 100% { opacity: 0 } }