/* Dagmaryo (30-09-2026, v2 - mindre barnligt, 8-16 år). Lexend til alt (skabt til let læsning, også ved ordblindhed). Dyb violet, koral, rav og mint.
   Knapperne er "spilknapper" med en kant under, der trykkes ned. Formen (afstande, 16px i siden, ingen vandret rulning)
   kommer fra skabelonerne (skabelon.css). Barnets tema sætter --p, --a, --bg og --ink på .dy-world. */
:root {
  --ink: #1A1733; --ink-soft: #55536B; --faint: #8B8AA0; --line: #E4E2EE; --surface: #FFFFFF; --ground: #F5F4FA;
  --purple: #6D4BFF; --purple-deep: #4E2FE0; --coral: #FF5A76; --sun: #FFB21E; --mint: #22C993; --sky: #2D9CFF;
  --ok: #1E9E6A; --ok-soft: #DFF7EC; --warn: #B7791F; --warn-soft: #FFF4DB; --bad-soft: #FFE5EA;
  --p: var(--purple); --a: var(--coral); --bg: var(--ground);
  --shadow: 0 1px 2px rgba(26,23,51,.06), 0 8px 24px rgba(26,23,51,.06);
  --display: "Lexend", system-ui, sans-serif;
  --body: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html, body { background: var(--ground); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
h1, h2, h3, .dy-display { font-family: var(--display) !important; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { font-family: var(--display) !important; font-weight: 700 !important; }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }

.dy-word { font-family: var(--display); font-weight: 800; line-height: 1; white-space: nowrap; letter-spacing: -.02em; }
.dy-word b { color: var(--ink); font-weight: 800; }
.dy-word i { color: var(--purple); font-style: normal; font-weight: 800; }
.dy-muted { color: var(--ink-soft); }
.dy-faint { color: var(--faint); font-size: 13px; }
.dy-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--p); }
.dy-page { max-width: 980px; margin: 0 auto; padding: 16px 16px 120px; }
.dy-card { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.dy-card + .dy-card { margin-top: 14px; }
.dy-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.dy-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dy-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--line); }
.dy-chip button { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--faint); padding: 0 0 0 2px; }
.dy-chip.ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.dy-chip.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.dy-note { border-radius: 16px; padding: 14px 16px; background: var(--warn-soft); }
.dy-okbox { border-radius: 16px; padding: 14px 16px; background: var(--ok-soft); }
a.dy-link { color: var(--purple-deep); font-weight: 800; }

/* ── Spilknapper ── */
.dy-btn { font-family: var(--display); font-weight: 800; font-size: 16px; border: 0; border-radius: 12px; padding: 12px 22px; cursor: pointer; color: #fff;
  background: var(--p); box-shadow: 0 4px 0 color-mix(in srgb, var(--p) 65%, #000); transform: translateY(0); transition: transform .08s, box-shadow .08s, filter .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 52px; }
.dy-btn:hover { filter: brightness(1.06); }
.dy-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--p) 70%, #000); }
.dy-btn:disabled { opacity: .55; cursor: default; }
.dy-btn.big { font-size: 20px; padding: 16px 30px; border-radius: 14px; min-height: 64px; }
.dy-btn.accent { background: var(--a); box-shadow: 0 5px 0 color-mix(in srgb, var(--a) 70%, #000); }
.dy-btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 #C98A10; }
.dy-btn.mint { background: var(--mint); box-shadow: 0 5px 0 #1EA07D; }
.dy-btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 5px 0 var(--line); border: 2px solid var(--line); }
.dy-btn.full { width: 100%; }
.dy-btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* ── Landing ── */
.dy-hero { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 28px; align-items: center; padding: 28px 0 12px; }
.dy-hero h1 { font-size: clamp(40px, 7vw, 68px); }
.dy-hero h1 span { color: var(--ink); }
.dy-hero .lead { font-size: clamp(18px, 2.4vw, 22px); color: var(--ink-soft); line-height: 1.45; }
.dy-hero-art { position: relative; display: grid; place-items: center; min-height: 280px; }
.dy-hero-art .blob { position: absolute; inset: 8% 6%; border-radius: 28px; background: radial-gradient(circle at 25% 25%, rgba(255,178,30,.45), transparent 50%), radial-gradient(circle at 75% 80%, rgba(255,90,118,.45), transparent 55%), #1A1733; }
.dy-hero-art .floaty { position: absolute; font-size: 34px; animation: dy-float 5s ease-in-out infinite; }
@media (max-width: 760px) { .dy-hero { grid-template-columns: 1fr; } .dy-hero-art { min-height: 220px; } }
.dy-feature { text-align: left; }
.dy-feature .ico { font-size: 34px; }
.dy-feature h3 { font-size: 22px; margin: 6px 0 4px; }

/* ── Profilvælgeren ── */
.dy-profiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dy-profile { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 18px 10px; text-align: center; cursor: pointer; transition: transform .12s, border-color .12s; text-decoration: none; color: var(--ink); }
.dy-profile:hover { transform: translateY(-3px); border-color: var(--purple); }
.dy-profile .ava { font-size: 64px; line-height: 1.1; }
.dy-profile .name { font-family: var(--display); font-weight: 800; font-size: 22px; margin-top: 6px; }

/* ── Barnets verden ── */
.dy-world { background: var(--bg); min-height: 100vh; color: var(--ink);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--p) 10%, var(--bg)) 0, var(--bg) 320px); }
.dy-world .dy-card { border-color: color-mix(in srgb, var(--p) 18%, #fff); }
.dy-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 2px solid color-mix(in srgb, var(--p) 12%, #fff); }
.dy-topbar .ava { font-size: 30px; }
.dy-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: 17px; background: #fff; border-radius: 999px; padding: 4px 12px; border: 2px solid var(--line); }
.dy-xp { height: 16px; border-radius: 999px; background: color-mix(in srgb, var(--p) 14%, #fff); overflow: hidden; border: 2px solid #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.dy-xp i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p), var(--a)); transition: width .6s cubic-bezier(.2,.9,.3,1.3); }
.dy-level { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, var(--p), var(--a)); color: #fff; font-family: var(--display); font-weight: 800; font-size: 26px; box-shadow: 0 4px 0 color-mix(in srgb, var(--p) 70%, #000); }
.dy-level small { display: block; font-size: 10px; letter-spacing: .1em; margin-bottom: -8px; opacity: .9; }
.dy-goal { display: flex; gap: 6px; }
.dy-goal span { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; }
.dy-goal span.on { background: var(--sun); border-color: #E3AE2A; }

.dy-islands { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dy-island { position: relative; border-radius: 16px; padding: 16px 12px 14px; color: #fff; text-align: center; cursor: pointer; border: 0; font-family: var(--body);
  background: var(--c); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 65%, #000); transition: transform .1s; }
.dy-island:hover { transform: translateY(-3px); }
.dy-island:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 65%, #000); }
.dy-island .e { font-size: 42px; line-height: 1; }
.dy-island .n { font-family: var(--display); font-weight: 800; font-size: 17px; margin-top: 6px; line-height: 1.1; }
.dy-island .s { font-size: 13px; letter-spacing: 2px; margin-top: 4px; }

.dy-badges { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.dy-badge { text-align: center; padding: 10px 6px; border-radius: 14px; background: #fff; border: 2px solid var(--line); }
.dy-badge .e { font-size: 32px; }
.dy-badge .n { font-size: 12px; font-weight: 800; margin-top: 2px; }
.dy-badge.off { opacity: .35; filter: grayscale(1); }

/* ── Opgaven ── */
.dy-task { max-width: 760px; margin: 0 auto; }
.dy-task-img { width: 100%; aspect-ratio: 4/3; border-radius: 16px; object-fit: cover; background: linear-gradient(135deg, color-mix(in srgb, var(--p) 20%, #fff), color-mix(in srgb, var(--a) 20%, #fff)); display: grid; place-items: center; font-size: 80px; border: 3px solid #fff; box-shadow: var(--shadow); }
.dy-task-img.loading { animation: dy-pulse 1.6s ease-in-out infinite; }
.dy-story { font-size: 18px; line-height: 1.6; }
.dy-question { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.2; margin: 12px 0; }
.dy-options { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dy-option { font-family: var(--display); font-weight: 600; font-size: 18px; padding: 14px 16px; min-height: 60px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 5px 0 var(--line); transition: transform .08s, border-color .12s; text-align: center; }
.dy-option:hover { border-color: var(--p); }
.dy-option:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line); }
.dy-option.picked { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, #fff); }
.dy-option.right { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 5px 0 #9FDDC3; }
.dy-option.wrong { border-color: #F3A6B6; background: var(--bad-soft); }
.dy-answer-input input { font-family: var(--display) !important; font-size: 26px !important; font-weight: 800 !important; text-align: center; }
.dy-result { border-radius: 16px; padding: 18px; text-align: center; animation: dy-pop .35s cubic-bezier(.2,.9,.3,1.4); }
.dy-result.good { background: var(--ok-soft); }
.dy-result.try { background: var(--warn-soft); }
.dy-result.learn { background: color-mix(in srgb, var(--p) 10%, #fff); }
.dy-result .big { font-family: var(--display); font-weight: 700; font-size: 24px; }
.dy-gain { display: inline-flex; gap: 10px; margin-top: 8px; }
.dy-gain span { font-family: var(--display); font-weight: 800; font-size: 20px; background: #fff; border-radius: 999px; padding: 4px 12px; animation: dy-rise .8s ease-out both; }

/* ── Samtalen med Dagmar ── */
.dy-chat { display: grid; gap: 10px; }
.dy-bub { max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; }
.dy-bub.me { margin-left: auto; background: var(--p); color: #fff; border-bottom-right-radius: 6px; }
.dy-bub.dagmar { background: #fff; border: 2px solid var(--line); border-bottom-left-radius: 6px; }
.dy-bub.thinking { color: var(--faint); font-style: italic; }
.dy-mic { width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; font-size: 36px; background: var(--a); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--a) 65%, #000); }
.dy-mic.on { animation: dy-ring 1.2s ease-out infinite; background: var(--coral); }
.dy-mic:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--a) 65%, #000); }

/* ── Interesse-fliser ── */
.dy-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.dy-tile { border-radius: 14px; border: 2px solid var(--line); background: #fff; padding: 12px 8px; text-align: center; cursor: pointer; font-weight: 800; color: var(--ink); font-family: var(--body); font-size: 15px; }
.dy-tile .e { font-size: 34px; display: block; }
.dy-tile.on { border-color: var(--p); background: color-mix(in srgb, var(--p) 10%, #fff); }

/* ── Forælder og admin ── */
.dy-stat { text-align: center; }
.dy-stat b { display: block; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--purple-deep); }
.dy-stat span { font-size: 13px; color: var(--ink-soft); }
.dy-bars { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.dy-bars div { flex: 1; background: linear-gradient(180deg, var(--purple), var(--coral)); border-radius: 6px 6px 2px 2px; min-height: 3px; position: relative; }
.dy-bars div span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--faint); }
.dy-taskrow { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dy-taskrow:last-child { border-bottom: 0; }
.dy-taskrow img, .dy-taskrow .ph { width: 56px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--ground); display: grid; place-items: center; font-size: 22px; }
.dy-levelbar { height: 10px; border-radius: 99px; background: var(--ground); overflow: hidden; }
.dy-levelbar i { display: block; height: 100%; border-radius: 99px; }
.dy-adminbar .cg-toplinje-menu, .dy-adminbar .mud-icon-button, .dy-adminbar .mud-icon-button .mud-icon-root { color: #FFFFFF !important; }
.dy-ude .cg-toplinje-menu { display: none !important; }
.dy-feedback { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1300; }
.dy-draw-wrap { position: relative; width: 100%; display: flex; justify-content: center; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 6px; touch-action: none; }
.dy-draw-wrap canvas { display: block; max-width: 100%; max-height: 42vh; width: auto; height: auto; cursor: crosshair; touch-action: none; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.dy-steps { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 14px; }
.dy-steps li { display: flex; gap: 8px; align-items: center; }
.dy-steps b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--purple); color: #fff; align-items: center; justify-content: center; font-size: 12px; flex: 0 0 auto; }

/* PIN-tastaturet */
.dy-pin { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.dy-pin button { height: 64px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.dy-pin-dots { display: flex; gap: 10px; justify-content: center; margin: 12px 0; }
.dy-pin-dots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--purple); }
.dy-pin-dots span.on { background: var(--purple); }

/* ── Bevægelse (slås fra i rolig tilstand og hos dem, der har bedt om færre animationer) ── */
@keyframes dy-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes dy-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes dy-morph { 0%,100% { border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; } 50% { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; } }
@keyframes dy-twinkle { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.7); opacity: .6; } }
@keyframes dy-pop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dy-rise { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes dy-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes dy-ring { 0% { box-shadow: 0 0 0 0 rgba(255,107,139,.6); } 100% { box-shadow: 0 0 0 26px rgba(255,107,139,0); } }
.dy-bob { animation: dy-bob 3.2s ease-in-out infinite; }
.dy-twinkle { animation: dy-twinkle 2.2s ease-in-out infinite; transform-origin: 101px 19px; }
.dy-calm *, .dy-calm *::before, .dy-calm *::after { animation: none !important; transition: none !important; }
.dy-calm .dy-btn, .dy-calm .dy-option, .dy-calm .dy-island { box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.dy-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5000; }