/* ---- GAME COLOUR: Koralrød #FF4D5E (set once as --game; every accent below derives from the --gc-* values) ---- */
html.sd-page {
  --game: #FF4D5E;
  --sd-orange: #FF4D5E; --sd-primary: #FF4D5E;
  --sd-cream: #FFA6AE; --sd-amber: #FF7A86;
  --sd-bg: #FF7481; --sd-bg-2: #FF8A95;
  --sd-panel: #FFEFF1; --sd-panel-2: #FFD1D5;
}
html.sd-page:root[data-theme="dark"] {
  --sd-primary: #FF4D5E; --sd-line: #FF4D5E; --sd-focus: #FFA6AE;
  --sd-bg: #211415; --sd-bg-2: #281618;
  --sd-panel: #31191B; --sd-panel-2: #491F23; --sd-grid: rgba(255,77,94,.16);
}
@media (prefers-color-scheme: dark) { html.sd-page:root:not([data-theme="light"]) {
  --sd-primary: #FF4D5E; --sd-line: #FF4D5E; --sd-focus: #FFA6AE;
  --sd-bg: #211415; --sd-bg-2: #281618;
  --sd-panel: #31191B; --sd-panel-2: #491F23; --sd-grid: rgba(255,77,94,.16);
} }
/* Sjovt Dansk theme — danish-antonyms-game.html (game-id: antonyms) */

html.sd-page {
  /* map the game's own tokens onto the design system */
  --bg: var(--sd-bg); --card: var(--sd-panel); --ink: var(--sd-text); --muted: var(--sd-text-soft); --line: var(--sd-line);
  --brand: var(--sd-orange); --brand-dark: var(--sd-text); --brand-soft: var(--sd-panel-2);
  --blue: var(--sd-focus); --blue-soft: var(--sd-cream); --purple: var(--sd-text); --amber: var(--sd-text);
  --red: var(--sd-bad); --red-soft: var(--sd-bad-bg); --green: var(--sd-ok); --green-soft: var(--sd-ok-bg);
  --radius: 0; --radius-sm: 0; --shadow: none; --shadow-lg: none;
  --font: var(--sd-font-body);
}
html.sd-page body {
  font-family: var(--sd-font-body); color: var(--sd-text); overflow-wrap: anywhere; hyphens: auto;
  -webkit-font-smoothing: auto;
}
html.sd-page body { min-height: 100dvh; }
html.sd-page button { font-family: var(--sd-font-display); }
html.sd-page .app { padding: 16px 16px 96px; }

/* ---- top bar / HUD -------------------------------------------------- */
html.sd-page header.topbar {
  position: static; background: var(--sd-panel); backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 16px; margin: 8px 4px 20px; box-shadow: var(--sd-box), var(--sd-drop);
}
html.sd-page .brand { font-family: var(--sd-font-display); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; gap: 12px; }
html.sd-page .brand .logo { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; display: inline-flex; }
html.sd-page .brand small { font-family: var(--sd-font-body); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--sd-text-soft); margin-top: 4px; }
html.sd-page .hud { gap: 16px; margin-top: 16px; }
html.sd-page .chip {
  margin: 4px; padding: 6px 12px; min-height: 36px; border: 0; border-radius: 0; background: var(--sd-panel-2); color: var(--sd-text);
  box-shadow: var(--sd-box); font-family: var(--sd-font-body); font-size: 15px; font-weight: 700;
}
html.sd-page .chip .ic { display: inline-flex; font-size: 0; }
html.sd-page .xpbar {
  height: 20px; margin: 16px 4px 4px; border-radius: 0; background: var(--sd-panel-2); box-shadow: var(--sd-box); overflow: hidden;
}
html.sd-page .xpbar > i { background: var(--sd-orange); transition: width .4s steps(8); box-shadow: inset 0 -6px 0 rgba(16,16,16,.25); }

/* ---- headings / cards ----------------------------------------------- */
html.sd-page .section-title {
  font-family: var(--sd-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 22px; line-height: 1.3;
  margin: 32px 4px 16px; display: inline-block; background: var(--sd-ink); color: var(--sd-cream); padding: 4px 12px;
}
html.sd-page .section-title.first { margin-top: 8px; }
html.sd-page .card { border: 0; border-radius: 0; background: var(--sd-panel); box-shadow: var(--sd-box), var(--sd-drop); margin: 4px; padding: 20px; }
html.sd-page .grid { gap: 20px; }
html.sd-page .modes { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
html.sd-page .mode-btn {
  margin: 4px; border: 0; border-radius: 0; background: var(--sd-panel); color: var(--sd-text); padding: 16px; gap: 8px; min-height: 48px;
  box-shadow: var(--sd-box), var(--sd-drop); transition: transform .1s steps(2), box-shadow .1s steps(2);
}
html.sd-page .mode-btn:hover { transform: translate(-4px, -4px); box-shadow: var(--sd-box), 12px 12px 0 0 var(--sd-ink); background: var(--sd-cream); color: #101010; }
html.sd-page .mode-btn:active { transform: translate(2px, 2px); box-shadow: var(--sd-box), 4px 4px 0 0 var(--sd-ink); }
html.sd-page .mode-btn .emoji { font-size: 0; line-height: 0; min-height: 64px; display: flex; align-items: flex-start; }
html.sd-page .mode-btn .t { font-family: var(--sd-font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0; line-height: 1.2; }
html.sd-page .mode-btn .d { font-family: var(--sd-font-body); font-size: 14px; color: inherit; opacity: .85; line-height: 1.4; }
/* clickable cue: orange "Spil" tab at the foot of each game card */
html.sd-page .mode-btn::after {
  content: "Spil \2192"; align-self: flex-start; margin-top: auto; padding: 4px 10px;
  background: var(--sd-orange); color: #101010; font-family: var(--sd-font-display); font-size: 14px; text-transform: uppercase; letter-spacing: .04em; box-shadow: var(--sd-box);
}
/* games first: tighter intro + cards so the grid sits above the fold on desktop */
@media (min-width: 821px) {
  html.sd-page .mode-btn .emoji { min-height: 40px; }
  html.sd-page .modes { gap: 12px; }
}
html.sd-page .stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
html.sd-page .stat { margin: 4px; border: 0; border-radius: 0; background: var(--sd-panel); box-shadow: var(--sd-box), var(--sd-drop); padding: 12px 14px; }
html.sd-page .stat .n { font-family: var(--sd-font-body); font-weight: 700; font-size: 28px; line-height: 1.2; }
html.sd-page .stat .l { font-family: var(--sd-font-display); font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; color: var(--sd-text-soft); }

/* ---- buttons -------------------------------------------------------- */
html.sd-page .btn, html.sd-page .back-link {
  margin: 4px; min-height: 48px; min-width: 48px; padding: 12px 18px; border: 0; border-radius: 0;
  background: var(--sd-orange); color: #101010; font-family: var(--sd-font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.2;
  box-shadow: var(--sd-box), var(--sd-bevel), 0 12px 0 -4px var(--sd-ink); text-decoration: none;
  transition: transform .08s steps(2), box-shadow .08s steps(2), background .08s steps(2);
}
html.sd-page .btn:hover:not(:disabled), html.sd-page .back-link:hover { background: var(--sd-cream); transform: translateY(-2px); }
html.sd-page .btn:active:not(:disabled), html.sd-page .back-link:active { transform: translateY(4px); box-shadow: var(--sd-box), var(--sd-bevel), 0 4px 0 -4px var(--sd-ink); }
html.sd-page .btn.alt { background: var(--sd-cream); }
html.sd-page .btn.alt:hover:not(:disabled) { background: var(--sd-white); }
html.sd-page .btn.ghost, html.sd-page .back-link { background: var(--sd-panel); color: var(--sd-text); border: 0; box-shadow: var(--sd-box), var(--sd-bevel), 0 12px 0 -4px var(--sd-ink); }
html.sd-page .btn.ghost:hover:not(:disabled), html.sd-page .back-link:hover { background: var(--sd-cream); color: #101010; }
html.sd-page .btn.danger { background: var(--sd-bad); color: #101010; }
html.sd-page .btn.small { font-size: 15px; padding: 10px 14px; min-height: 44px; border-radius: 0; }
html.sd-page .btn:disabled { background: #CFC6AA; color: #5b5646; cursor: not-allowed; box-shadow: var(--sd-box), 0 8px 0 -4px #5b5646; }
html.sd-page .back-link { margin-bottom: 20px; font-size: 16px; display: inline-flex; align-items: center; }
html.sd-page .row { gap: 16px; }

/* ---- pills ---------------------------------------------------------- */
html.sd-page .pills { gap: 16px; }
html.sd-page .pill {
  margin: 4px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 0; background: var(--sd-panel-2); color: var(--sd-text); box-shadow: var(--sd-box), var(--sd-bevel);
  font-family: var(--sd-font-display); font-weight: 700; font-size: 16px; letter-spacing: .02em;
}
html.sd-page .pill:hover { background: var(--sd-cream); color: #101010; }
html.sd-page .pill.active { background: var(--sd-orange); color: #101010; border: 0; }
html.sd-page .pill.active::before { content: "✓ "; }

/* ---- question screen ------------------------------------------------ */
html.sd-page .q-head { gap: 16px; margin: 4px 4px 24px; flex-wrap: wrap; }
html.sd-page .progress-line { height: 20px; border-radius: 0; background: var(--sd-panel); box-shadow: var(--sd-box); min-width: 80px; }
html.sd-page .progress-line > i { background: var(--sd-orange); transition: width .3s steps(6); box-shadow: inset 0 -6px 0 rgba(16,16,16,.25); }
html.sd-page .run-streak { font-family: var(--sd-font-body); font-weight: 700; font-size: 16px; color: var(--sd-text); background: var(--sd-panel); padding: 6px 10px; box-shadow: var(--sd-box); }
html.sd-page .timer { font-family: var(--sd-font-body); font-weight: 700; font-size: 22px; padding: 4px 10px; background: var(--sd-bad-bg); color: var(--sd-text); box-shadow: var(--sd-box-bad); min-width: 60px; text-align: center; }
html.sd-page .timer::before { content: "TID "; }
html.sd-page .timer.calm { background: var(--sd-ok-bg); box-shadow: var(--sd-box-ok); }

html.sd-page .prompt {
  margin: 4px; padding: 24px 16px; border: 0; border-radius: 0; background: var(--sd-cream); color: #101010; box-shadow: var(--sd-box), var(--sd-drop);
}
html.sd-page .prompt .label { font-family: var(--sd-font-display); font-size: 15px; font-weight: 700; color: #101010; letter-spacing: .06em; }
html.sd-page .prompt .word { font-family: var(--sd-font-body); font-weight: 700; font-size: clamp(28px, 7vw, 40px); line-height: 1.25; margin: 10px 0; flex-wrap: wrap; justify-content: center; color: #101010; }
html.sd-page .prompt .sub { color: #3A3326; font-size: 16px; font-weight: 700; }


html.sd-page .options { gap: 20px; margin-top: 24px; }
html.sd-page .option {
  margin: 4px; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 0; background: var(--sd-panel-2); color: var(--sd-text);
  font-family: var(--sd-font-body); font-weight: 700; font-size: 18px; line-height: 1.4; box-shadow: var(--sd-box), var(--sd-bevel);
  transition: transform .08s steps(2), background .08s steps(2);
}
html.sd-page .option:hover:not(:disabled) { background: var(--sd-cream); color: #101010; transform: translateY(-2px); }
html.sd-page .option.correct { background: var(--sd-ok-bg); color: var(--sd-text); box-shadow: var(--sd-box-ok); border: 0; }
html.sd-page .option.correct::before { content: "✓ "; color: var(--sd-ok); }
html.sd-page .option.wrong { background: var(--sd-bad-bg); color: var(--sd-text); box-shadow: var(--sd-box-bad); border: 0; }
html.sd-page .option.wrong::before { content: "✗ "; color: var(--sd-bad); }
html.sd-page .option:disabled { color: var(--sd-text); opacity: 1; }
html.sd-page .option:disabled:not(.correct):not(.wrong) { opacity: .7; }

html.sd-page .typebox { gap: 16px; margin-top: 24px; flex-wrap: wrap; }
html.sd-page .typebox input {
  flex: 1 1 200px; min-width: 0; min-height: 56px; margin: 4px; padding: 10px 14px; border: 0; border-radius: 0; background: var(--sd-white); color: #101010;
  font-family: var(--sd-font-body); font-weight: 700; font-size: 20px; text-align: center; box-shadow: var(--sd-box), inset 4px 4px 0 rgba(16,16,16,.12);
}
html.sd-page .typebox input::placeholder { color: #6b6350; opacity: 1; }
html.sd-page .typebox input:disabled { background: var(--sd-panel-2); color: var(--sd-text); }

/* match mode */
html.sd-page .match-grid { gap: 20px; margin-top: 24px; }
html.sd-page .match-col { gap: 20px; }
html.sd-page .match-item {
  margin: 4px; min-height: 56px; padding: 12px 10px; border: 0; border-radius: 0; background: var(--sd-panel-2); color: var(--sd-text);
  font-family: var(--sd-font-body); font-weight: 700; font-size: 17px; line-height: 1.3; box-shadow: var(--sd-box), var(--sd-bevel); transition: none;
}
html.sd-page .match-item:hover:not(.done) { background: var(--sd-cream); color: #101010; }
html.sd-page .match-item.selected { background: var(--sd-orange); color: #101010; border: 0; box-shadow: var(--sd-box-focus), var(--sd-bevel); }
html.sd-page .match-item.selected::before { content: "● "; }
html.sd-page .match-item.done { background: var(--sd-ok-bg); color: var(--sd-text); box-shadow: var(--sd-box-ok); opacity: 1; }
html.sd-page .match-item.done::before { content: "✓ "; color: var(--sd-ok); }
html.sd-page .match-item.bad { background: var(--sd-bad-bg); color: var(--sd-text); box-shadow: var(--sd-box-bad); animation: sd-shake .36s steps(6); }
html.sd-page .match-item.bad::before { content: "✗ "; color: var(--sd-bad); }

/* feedback panel */
html.sd-page .feedback { margin: 24px 4px 4px; padding: 18px; border: 0; border-radius: 0; box-shadow: var(--sd-box); font-size: 16px; }
html.sd-page .feedback.ok { background: var(--sd-ok-bg); box-shadow: var(--sd-box-ok); color: var(--sd-text); }
html.sd-page .feedback.no { background: var(--sd-bad-bg); box-shadow: var(--sd-box-bad); color: var(--sd-text); }
html.sd-page .feedback .verdict { font-family: var(--sd-font-display); font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
html.sd-page .feedback.ok .verdict, html.sd-page .feedback.no .verdict { color: var(--sd-text); }
html.sd-page .pairline { font-family: var(--sd-font-body); font-size: 20px; gap: 12px; }
html.sd-page .pairline .arrow { color: var(--sd-text); }
html.sd-page .trans { color: var(--sd-text-soft); font-weight: 700; font-size: 15px; }
html.sd-page .examples { font-size: 16px; }
html.sd-page .examples .ex { gap: 8px; flex-wrap: wrap; }
html.sd-page .examples .ex em { color: var(--sd-text); font-style: normal; }
html.sd-page .explain { color: var(--sd-text-soft); font-size: 15px; }
html.sd-page #nextWrap { margin-top: 24px; }

/* summary */
html.sd-page .summary { padding: 32px 16px; }
html.sd-page .summary .big { font-size: 0; line-height: 0; margin-bottom: 16px; }
html.sd-page .summary .score { font-family: var(--sd-font-display); font-size: clamp(28px, 7vw, 40px); text-transform: uppercase; letter-spacing: .02em; }

/* settings: pixel switches (the real checkbox is kept focusable on top of the track) */
html.sd-page .toggle-row { gap: 16px; padding: 16px 0; border-bottom: 4px solid var(--sd-line); }
html.sd-page .toggle-row .t { font-family: var(--sd-font-display); line-height: 1.3; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
html.sd-page .toggle-row .d { font-size: 14px; color: var(--sd-text-soft); }
html.sd-page .switch { width: 84px; height: 44px; }
html.sd-page .switch input { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
html.sd-page .switch label { border-radius: 0; background: var(--sd-panel-2); box-shadow: var(--sd-box); transition: none; font-family: var(--sd-font-body); font-weight: 700; font-size: 14px; color: var(--sd-text); }
html.sd-page .switch label::before { content: "FRA"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
html.sd-page .switch label::after { width: 28px; height: 28px; border-radius: 0; background: var(--sd-ink); top: 8px; left: 8px; box-shadow: none; transition: none; }
html.sd-page .switch input:checked + label { background: var(--sd-orange); color: #101010; }
html.sd-page .switch input:checked + label::before { content: "TIL"; right: auto; left: 12px; }
html.sd-page .switch input:checked + label::after { left: auto; right: 8px; }
html.sd-page .switch input:focus-visible + label { outline: 4px solid var(--sd-focus); outline-offset: 3px; box-shadow: 0 0 0 7px var(--sd-ink); }
html.sd-page .switch input:focus-visible { outline: none !important; box-shadow: none !important; }

/* review */
html.sd-page .review-item { border-bottom: 4px solid var(--sd-line); padding: 14px 0; gap: 16px; }
html.sd-page .review-item .w { font-family: var(--sd-font-body); font-size: 18px; }
html.sd-page .review-item .e { font-size: 14px; color: var(--sd-text-soft); }
html.sd-page .badge { border-radius: 0; font-family: var(--sd-font-body); font-size: 13px; padding: 4px 8px; box-shadow: var(--sd-box); margin: 4px; background: var(--sd-panel-2); color: var(--sd-text); white-space: nowrap; }
html.sd-page .badge.weak { background: var(--sd-bad-bg); color: var(--sd-text); box-shadow: var(--sd-box-bad); }
html.sd-page .badge.master { background: var(--sd-ok-bg); color: var(--sd-text); box-shadow: var(--sd-box-ok); }

/* toast */
html.sd-page #toast {
  border-radius: 0; background: var(--sd-ink); color: var(--sd-cream); font-family: var(--sd-font-display); font-size: 17px; text-align: center; max-width: calc(100% - 32px);
  box-shadow: 0 0 0 4px var(--sd-cream), 8px 8px 0 4px #101010; transition: opacity .15s steps(2), transform .15s steps(2); bottom: 32px;
}

@media (max-width: 560px) {
  html.sd-page .app { padding: 12px 12px 96px; }
  html.sd-page .brand { font-size: 22px; }
  html.sd-page .match-item { font-size: 16px; }
  html.sd-page .stats-grid { grid-template-columns: 1fr 1fr; }
  html.sd-page .modes { grid-template-columns: 1fr 1fr; }
  html.sd-page .mode-btn .t { font-size: 16px; }
  html.sd-page .mode-btn { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.sd-page .match-item.bad, html.sd-page .xpbar > i, html.sd-page .progress-line > i, html.sd-page #toast { animation: none !important; transition: none !important; }
  html.sd-page .mode-btn, html.sd-page .option { transition: none !important; }
}

/* compact header (more room for questions on phones) */
html.sd-page header.topbar > .row.between { flex-wrap: nowrap; gap: 12px; }
@media (max-width: 560px) {
  html.sd-page header.topbar { padding: 12px; margin: 4px 0 16px; }
  html.sd-page .brand small { display: none; }
  html.sd-page .hud { gap: 4px; margin-top: 8px; flex-wrap: nowrap; }
  html.sd-page .chip { padding: 4px 8px; gap: 4px; font-size: 14px; margin: 4px 2px; }
  html.sd-page .xpbar { height: 16px; margin-top: 8px; }
}
html.sd-page body:has(#screen-play:not(.hidden)) header.topbar .xpbar { display: none; }
html.sd-page body:has(#screen-play:not(.hidden)) header.topbar { margin-bottom: 16px; }

/* US-037: headings wrap at word boundaries, never mid-word; confetti stays behind the results */
html.sd-page .brand > span:last-child, html.sd-page .mode-btn .t, html.sd-page .section-title, html.sd-page .summary .score {
  overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 0;
}
html.sd-page .sd-conf { z-index: 0; }
html.sd-page .summary { position: relative; z-index: 1; }
/* US-037 retry: the entry animation's persistent fill-mode kept a stacking context on the screen, trapping .summary below the confetti */
html.sd-page .screen.sd-enter { animation-fill-mode: none; }
html.sd-page header.topbar { position: relative; z-index: 2; }