/* ==========================================================================
   Vores Quiz – dannebrogsrød, hvid og lyserød i bløde gradienter. Rolig, ren og troværdig.
   Skrift: Anton (overskrifter) og Archivo (tekst) – begge under SIL Open Font License.
   ========================================================================== */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Archivo'; font-weight: 400; font-display: swap; src: url(fonts/archivo-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Archivo'; font-weight: 600; font-display: swap; src: url(fonts/archivo-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Archivo'; font-weight: 700; font-display: swap; src: url(fonts/archivo-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Archivo'; font-weight: 800; font-display: swap; src: url(fonts/archivo-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Archivo'; font-weight: 400; font-display: swap; src: url(fonts/archivo-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Archivo'; font-weight: 700; font-display: swap; src: url(fonts/archivo-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Archivo'; font-weight: 800; font-display: swap; src: url(fonts/archivo-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

:root {
  --red: #C8102E; --red-d: #9E0C22; --red-dd: #6A0717; --rose: #E8344F; --pink: #F59AAE; --pink-l: #FFD3DC; --blush: #FDE7EC; --blush-2: #FFF4F6;
  --bg: #FFF7F8; --card: #FFFFFF; --ink: #2A1418; --ink-2: #57393F; --muted: #8C6F75; --line: #F2DCE1; --ok: #2F8F4E; --gold: #E8A317;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif; --body: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hero: linear-gradient(162deg, #A80B26 0%, #C8102E 34%, #E0384F 68%, #F07E95 100%);
  --deep: radial-gradient(120% 60% at 50% -10%, #E0384F 0%, rgba(224, 56, 79, 0) 60%), linear-gradient(180deg, #A80B26 0%, #7C0A1D 45%, #4E0612 100%);
  --sh: 0 1px 2px rgba(110, 7, 23, .06), 0 10px 28px -14px rgba(110, 7, 23, .28);
  --sh-lg: 0 2px 4px rgba(110, 7, 23, .06), 0 24px 48px -22px rgba(110, 7, 23, .45);
  --r: 20px; --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
html.big { font-size: 112.5% }
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 1rem/1.5 var(--body); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden }
button, input { font: inherit; color: inherit }
button { cursor: pointer; background: none; border: 0; padding: 0 }
a { color: var(--red) }
h1, h2, h3, p { margin: 0 }
img, svg { display: block }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 8px }
h1:focus { outline: none }
[hidden] { display: none !important }

/* ---------------------------------------------------------------- topbjælken og menuen */
#bar { position: sticky; top: 0; z-index: 30; padding-top: var(--safe-t); background: linear-gradient(180deg, #A80B26, #B30D29); color: #fff }
.bar-in { display: flex; align-items: center; gap: 8px; height: 54px; max-width: 760px; margin: 0 auto; padding: 0 12px }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none }
.brand .logo { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2)) }
.brand .logo rect { fill: #fff }
.brand .logo path { fill: var(--red) }
.brand .logo circle:first-of-type { fill: var(--red) }
.brand .logo path[stroke] { stroke: #fff; fill: none }
.brand .logo circle:last-child { fill: #fff }
.bw { font: 400 1.35rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; padding-top: .06em }
.bw b { font-weight: 400; color: var(--pink-l) }
.bar-back, .bar-x { display: grid; place-items: center; width: 42px; height: 42px; margin-left: -6px; border-radius: 50%; color: #fff }
.bar-x { margin: 0 -6px 0 auto }
.bar-back:active, .bar-x:active { background: rgba(255, 255, 255, .15) }
.bar-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.15rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; padding-top: .06em }
#tabs { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 6px 6px calc(6px + var(--safe-b)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--line) }
#tabs a { flex: 1; max-width: 120px; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 14px; color: var(--muted); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .01em }
#tabs a .ic { width: 24px; height: 24px }
#tabs a.on { color: var(--red) }
#tabs a.on .ic { stroke-width: 2.3 }
#tabs a.on::before { content: ''; position: absolute; width: 34px; height: 3px; margin-top: -6px; border-radius: 0 0 3px 3px; background: var(--red) }
#view { padding-bottom: calc(96px + var(--safe-b)) }
body.full #view, body.game #view { padding-bottom: calc(28px + var(--safe-b)) }

/* ---------------------------------------------------------------- byggeklodser */
.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 8px }
.wrap.center { text-align: center; padding-top: 34px }
.kick { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: flex; align-items: center; gap: 6px }
.kick .ic { width: 16px; height: 16px }
.kick.lt { color: rgba(255, 255, 255, .88); justify-content: center }
.sec-t { margin: 26px 2px 12px; font: 400 1.45rem/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); padding-top: .05em; display: flex; align-items: baseline; gap: 10px }
.sec-t .cnt { font: 700 .82rem/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted) }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px }
.sec-h .more { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: .85rem; text-decoration: none; white-space: nowrap }
.sec-h .more .ic { width: 16px; height: 16px }
.note { margin: -4px 2px 12px; color: var(--muted); font-size: .9rem; display: flex; gap: 8px; align-items: flex-start }
.note .ic { width: 18px; height: 18px; margin-top: 2px }
.fine { margin: 26px 0 0; text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.6 }
.big-t { font: 400 clamp(2.1rem, 10vw, 3.1rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; padding-top: .05em; text-wrap: balance }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: 1.02rem; text-decoration: none; transition: transform .12s, box-shadow .2s, background .2s; user-select: none; -webkit-user-select: none }
.btn:active { transform: scale(.97) }
.btn:disabled { opacity: .55; cursor: default }
.btn .ic { width: 20px; height: 20px }
.btn.big { min-height: 58px; padding: 14px 28px; font-size: 1.1rem }
.btn.wide { width: 100% }
.btn.primary { background: linear-gradient(180deg, #DC2440, #B80C28); color: #fff; box-shadow: 0 12px 24px -12px rgba(184, 12, 40, .8), inset 0 -3px 0 rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .25) }
.btn.white { background: #fff; color: var(--red); box-shadow: 0 14px 28px -14px rgba(60, 0, 10, .7), inset 0 -3px 0 rgba(200, 16, 46, .1) }
.btn.glass { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55) }
.btn.ghost { background: #fff; color: var(--red); box-shadow: inset 0 0 0 2px var(--pink-l) }
.btn.danger { background: var(--red-d); color: #fff }
.linkbtn { color: var(--red); font-weight: 800; font-size: .88rem; padding: 6px 4px }
.chipbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; border-radius: 999px; background: var(--red); color: #fff; font-weight: 800; font-size: .9rem }
.chipbtn.ghost { background: var(--blush); color: var(--red-d) }
.chipbtn .ic { width: 18px; height: 18px }
.iconbtn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blush); color: var(--red) }
.iconbtn .ic { width: 19px; height: 19px }
.bar { display: block; height: 8px; border-radius: 99px; background: var(--blush); overflow: hidden }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rose), var(--red)) }
.bar.lt { background: rgba(255, 255, 255, .22); margin-top: 14px }
.bar.lt i { background: #fff }
.empty { display: grid; justify-items: center; gap: 12px; padding: 26px 18px; margin-top: 6px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); text-align: center; color: var(--ink-2) }
.empty > .ic { width: 40px; height: 40px; color: var(--pink) }

/* ---------------------------------------------------------------- heltene øverst (rød gradient med et blødt nordisk kors) */
.hero { position: relative; overflow: hidden; padding: 26px 18px 30px; background: var(--hero); color: #fff; text-align: center; isolation: isolate }
.hero::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background:
  linear-gradient(90deg, transparent 0 30%, rgba(255, 255, 255, .09) 30% 40%, transparent 40%),
  linear-gradient(180deg, transparent 0 43%, rgba(255, 255, 255, .09) 43% 55%, transparent 55%) }
.hero::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -42px; height: 70px; z-index: -1; background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0 }
.hero.sm { padding: 18px 18px 34px }
.hero-t { margin: 8px 0 10px; font: 400 clamp(2.8rem, 15vw, 4.4rem)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 3px 18px rgba(80, 0, 15, .25); padding-top: .04em }
.hero.sm .hero-t { font-size: clamp(2.3rem, 12vw, 3.4rem) }
.hero-t em { font-style: normal; color: var(--pink-l) }
.hero-s { max-width: 30rem; margin: 0 auto; font-size: 1.02rem; line-height: 1.5; color: rgba(255, 255, 255, .92); text-wrap: pretty }
.hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px 0 6px }
.home-hero { padding: 34px 18px 50px }
.home-hero .hero-t { font-size: clamp(3.4rem, 19vw, 5.4rem) }

/* ---------------------------------------------------------------- forsiden */
.dgc { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-top: -30px; padding: 18px; border-radius: var(--r); background: linear-gradient(135deg, #fff 0%, #fff 55%, var(--blush) 100%); box-shadow: var(--sh-lg); color: var(--ink); text-decoration: none; border: 1px solid #fff }
.dgc:active { transform: scale(.99) }
.dgc-l { flex: 1; min-width: 0; display: grid; gap: 4px }
.dgc-t { font: 400 1.45rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; padding-top: .05em }
.dgc-s { color: var(--ink-2); font-size: .92rem; letter-spacing: .05em }
.dgc-r { display: grid; justify-items: center; gap: 2px; color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center }
.flame { display: inline-flex; align-items: center; gap: 3px; color: #D9B9BF; font: 400 1.9rem/1 var(--display) }
.flame .ic { width: 30px; height: 30px; stroke-width: 1.7 }
.flame.on { color: var(--red) }
.flame.on .ic { fill: var(--pink-l) }
.mtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.mtile { position: relative; display: grid; align-content: start; gap: 4px; min-height: 128px; padding: 14px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .12s }
.mtile:active { transform: scale(.98) }
.mtile > .ic { width: 40px; height: 40px; padding: 9px; margin-bottom: 4px; border-radius: 14px; background: var(--blush); color: var(--red) }
.mtile b { font: 400 1.18rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-top: .05em }
.mtile small { color: var(--ink-2); font-size: .82rem; line-height: 1.35 }
.mtile.m-familie > .ic, .mtile.m-mix > .ic { background: linear-gradient(160deg, var(--rose), var(--red)); color: #fff }
.mtile.m-mix { background: linear-gradient(150deg, #fff 40%, var(--blush)) }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 58%); gap: 12px; margin: 0 -16px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain }
.rail::-webkit-scrollbar { display: none }
.rail > div { scroll-snap-align: start }
@media (min-width: 640px) { .rail { grid-auto-columns: 232px } }
.qcd { position: relative; display: grid; gap: 4px; height: 100%; padding: 10px 12px 14px; border-radius: var(--r); background: linear-gradient(170deg, var(--qzp1) 0%, #fff 70%); box-shadow: var(--sh); color: var(--ink); text-decoration: none; transition: transform .12s; border: 1px solid rgba(255, 255, 255, .8) }
.qcd:active { transform: scale(.98) }
.qcd .qz-fan { height: 150px; transform: scale(.84); transform-origin: 50% 0; margin: 4px auto -18px }
.qcd-t { display: grid; gap: 3px; text-align: center }
.qcd-t b { font: 400 1.12rem/1.08 var(--display); text-transform: uppercase; letter-spacing: .015em; color: var(--qz); padding-top: .05em; text-wrap: balance }
.qcd-t b em { font-style: normal; color: var(--ink) }
.qcd-t small { color: var(--muted); font-size: .8rem; font-weight: 600 }
.qcd-p { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-size: .78rem; font-weight: 800; color: var(--ink-2) }
.qcd-p .medal { width: 22px; height: 22px }
.new { position: absolute; z-index: 3; top: 10px; left: 10px; padding: 5px 10px 4px; border-radius: 999px; background: var(--red); color: #fff; font: 400 .78rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 12px -6px rgba(184, 12, 40, .8) }
.qgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
@media (min-width: 640px) { .qgrid { grid-template-columns: repeat(3, 1fr) } }
.map-card { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none }
.map-card > .ic:first-child { width: 42px; height: 42px; padding: 9px; border-radius: 14px; background: var(--blush); color: var(--red) }
.map-card > span { flex: 1; display: grid; gap: 2px }
.map-card b { font: 400 1.2rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-top: .05em }
.map-card small { color: var(--ink-2); font-size: .86rem }
.map-card > .ic:last-child { color: var(--pink) }
.map-card.big { margin-top: 26px; background: linear-gradient(120deg, #fff 30%, var(--blush)) }
.map-card .dkmap.mini { width: 74px; height: 72px; flex: none }
.trust { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none }
.trust li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--blush-2); border: 1px solid var(--line) }
.trust .ic { width: 26px; height: 26px; color: var(--red) }
.trust span { display: grid }
.trust b { font-size: .95rem }
.trust small { color: var(--muted); font-size: .82rem }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(3, 1fr) } }

/* ---------------------------------------------------------------- Danmarkskortet */
.dkmap .land { fill: #F7C5CF; stroke: #fff; stroke-width: .5; stroke-linejoin: round }
.dkmap .pin .halo { fill: #fff; opacity: .95 }
.dkmap .pin .dot { fill: #D9B9BF }
.dkmap .pin.t1 .dot, .dkmap .pin.t2 .dot, .dkmap .pin.t3 .dot { fill: var(--red) }
.dkmap .pin.t2 .halo { fill: #E9EEF3; stroke: #A9B4C0; stroke-width: .6 }
.dkmap .pin.t3 .halo { fill: #FFE7A8; stroke: var(--gold); stroke-width: .6 }
.dkmap text { font: 800 4px var(--body); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 1.4px; stroke-linejoin: round }
.map-big { margin: -6px auto 10px; max-width: 520px; padding: 10px; border-radius: var(--r); background: linear-gradient(180deg, #fff, var(--blush-2)); box-shadow: var(--sh) }
.map-big .dkmap { width: 100%; height: auto }
.cities { display: grid; gap: 8px }
.city { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none }
.city > span:not(.medal) { flex: 1; display: grid }
.city small { color: var(--muted); font-size: .84rem }
.city > .ic { color: var(--pink) }

/* ---------------------------------------------------------------- medaljer, mærker, statistik */
.medal { position: relative; flex: none; display: inline-block; width: 40px; height: 40px; border-radius: 50%; padding: 3px; background: #EEDDE1 }
.medal .qz-mini { width: 100%; height: 100%; border-radius: 50% }
.medal.t0 { filter: grayscale(.85) opacity(.55) }
.medal.t1 { background: linear-gradient(140deg, #F1B98A, #B66A34) }
.medal.t2 { background: linear-gradient(140deg, #F4F6F8, #9AA6B2) }
.medal.t3 { background: linear-gradient(140deg, #FFE7A8, #E8A317 60%, #B97B06) }
.qz-mini { position: relative; display: block; width: 46px; height: 46px; border-radius: 10px; overflow: hidden }
.qz-mini .qc-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; border-radius: inherit; display: grid; place-items: center; box-shadow: none }
.qz-mini .qcb-frame, .qz-mini .qc-flag { display: none }
.qz-mini .qz-emb { width: 84%; height: 84%; filter: none }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 14px }
.kpis div { display: grid; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .14) }
.kpis b { font: 400 clamp(1.25rem, 6vw, 1.7rem)/1 var(--display); padding-top: .05em }
.kpis small { font-size: .7rem; line-height: 1.2; color: rgba(255, 255, 255, .86) }
.oev-card { display: flex; align-items: center; gap: 12px; margin-top: -24px; position: relative; z-index: 2; padding: 14px 16px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-lg); color: var(--ink); text-decoration: none }
.oev-card span:not(.oev-ic) { flex: 1; display: grid }
.oev-card small { color: var(--ink-2); font-size: .85rem }
.oev-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(160deg, var(--rose), var(--red)); color: #fff }
.lvst { display: grid; gap: 8px }
.lvst div { display: grid; grid-template-columns: 74px 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh) }
.lvst b { grid-row: span 2 }
.lvst small { color: var(--muted); font-size: .8rem }
.lvst .bar { grid-column: 2 }
.lvst span:last-child { grid-row: 1 / span 2; grid-column: 3; font-weight: 800 }
.crows { display: grid; gap: 8px }
.crow { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none }
.crow-pic { flex: none; width: 76px; height: 40px; border-radius: 10px; overflow: hidden }
.crow-pic .qf-pic { display: grid; width: 100%; height: 100%; place-items: center }
.crow-pic .qc-art { width: 100%; height: 100% }
.crow-t { flex: 1; display: grid; min-width: 0 }
.crow-t small { color: var(--muted); font-size: .8rem }
.crow-p { font: 400 1.3rem/1 var(--display); color: var(--qz) }
.qst { display: grid; gap: 8px }
@media (min-width: 640px) { .qst { grid-template-columns: 1fr 1fr } }
.qst-r { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none }
.qst-r .medal { width: 48px; height: 48px }
.qst-t { flex: 1; display: grid; gap: 3px; min-width: 0 }
.qst-t small { color: var(--muted); font-size: .8rem }
.qst-t .bar { height: 6px }
.qst-t .bar i { background: var(--qz) }
.qst-t .nx { font-size: .74rem; font-weight: 700 }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px }
@media (min-width: 560px) { .badges { grid-template-columns: repeat(3, 1fr) } }
.badge { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: #fff; box-shadow: var(--sh); text-align: center; opacity: .62 }
.badge.on { opacity: 1; background: linear-gradient(170deg, #fff 50%, var(--blush)) }
.badge b { font-size: .92rem; line-height: 1.2 }
.badge small { color: var(--muted); font-size: .76rem; line-height: 1.3 }
.bic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #F1E5E8; color: #B79CA2 }
.badge.on .bic, .bchip .bic { background: linear-gradient(150deg, #FFE7A8, var(--gold)); color: #6A4A05; box-shadow: 0 8px 16px -8px rgba(232, 163, 23, .9) }
.recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.recs div { display: grid; justify-items: center; gap: 2px; padding: 14px 6px; border-radius: 16px; background: #fff; box-shadow: var(--sh); text-align: center }
.recs .ic { color: var(--red) }
.recs b { font: 400 1.8rem/1 var(--display); padding-top: .05em }
.recs small { color: var(--muted); font-size: .74rem; line-height: 1.25 }

/* ---------------------------------------------------------------- én quiz */
.qhero { position: relative; overflow: hidden; padding: 12px 18px 34px; text-align: center; color: #fff; isolation: isolate;
  background: radial-gradient(90% 60% at 50% 0%, var(--qz-l) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(170deg, var(--qz) 0%, var(--qz-d) 100%) }
.qhero::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: -42px; height: 70px; z-index: -1; background: var(--bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0 }
.qh-t { margin: 0 0 8px; font: 400 clamp(2rem, 10vw, 3rem)/.95 var(--display); text-transform: uppercase; padding-top: .04em; text-wrap: balance }
.qh-t em { font-style: normal; opacity: .75 }
.qh-s { max-width: 30rem; margin: 0 auto 10px; color: rgba(255, 255, 255, .92); text-wrap: pretty }
.qh-m { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 18px; font-size: .8rem; font-weight: 700 }
.qh-m span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .16) }
.qhero .btn.white { color: var(--qz) }
.qp-st { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 6px; margin-top: -22px; position: relative; z-index: 2; padding: 12px; border-radius: var(--r); background: #fff; box-shadow: var(--sh-lg) }
.qp-st > div { display: grid; justify-items: center; align-content: center; text-align: center; gap: 1px }
.qp-st > div:first-child { display: flex; gap: 8px; justify-content: flex-start; text-align: left }
.qp-st > div:first-child span { display: grid }
.qp-st b { font: 400 1.35rem/1 var(--display); padding-top: .05em }
.qp-st > div:first-child b { font: 800 .92rem/1.2 var(--body) }
.qp-st small { color: var(--muted); font-size: .72rem; line-height: 1.2 }
@media (max-width: 400px) { .qp-st { grid-template-columns: 1fr 1fr 1fr } .qp-st > div:first-child { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px } }
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
@media (min-width: 640px) { .cats { grid-template-columns: repeat(3, 1fr) } }
.cat { display: grid; gap: 2px; padding: 0 0 10px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--sh); color: var(--ink); text-decoration: none; text-align: center }
.cat .qf-pic { display: grid; place-items: center; height: 74px; padding: 4px 6px }
.cat .qc-art { width: 100%; height: 100% }
.cat b { padding: 6px 8px 0; font-size: .88rem; line-height: 1.2 }
.cat small { color: var(--muted); font-size: .76rem }
.srcnote { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; color: var(--ink-2); font-size: .86rem }
.srcnote .ic { width: 18px; height: 18px; color: var(--ok); margin-top: 1px }

/* ---------------------------------------------------------------- kortfanet (fra Vores Leg) */
.qz-fan { position: relative; height: 176px; max-width: 330px; margin: 4px auto 10px }
.qz-fan .qf { position: absolute; top: 12px; left: 50%; width: 112px; height: 152px; margin-left: -56px; border-radius: 14px; overflow: hidden; background: #FFFCF6; box-shadow: 0 18px 30px -18px rgba(60, 0, 10, .75) }
.qz-fan .qf.l { transform: translateX(-62px) rotate(-11deg) }
.qz-fan .qf.r { transform: translateX(62px) rotate(11deg) }
.qz-fan .qf.m { z-index: 2; top: 2px }
.qz-fan .qf-pic { display: grid; place-items: center; height: 66px; padding: 4px }
.qz-fan .qf-pic .qc-art { width: 100%; height: 100% }
.qz-fan .qf-l { display: block; height: 7px; margin: 10px 12px 0; border-radius: 4px; background: #EFE3E6 }
.qz-fan .qf-l.s { width: 55% }
.qz-fan .qc-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 10px; border-radius: 14px }
.qz-fan .qc-back .qz-emb { width: 78px; height: 78px }
.qz-fan .qc-back .qc-flag { width: 16px; height: 18px; top: 9px; right: 9px; padding: 2px; border-radius: 6px }
.qz-fan .qcb-frame { top: 6px; right: 6px; bottom: 6px; left: 6px; border-width: 1.5px; border-radius: 10px }
.qz-fan.lg { margin-top: 10px }
.qz-fan.sm { width: 150px; height: 110px; margin: 0; flex: none }
.qz-fan.sm .qf { width: 70px; height: 96px; margin-left: -35px; border-radius: 10px }
.qz-fan.sm .qf.l { transform: translateX(-36px) rotate(-11deg) }
.qz-fan.sm .qf.r { transform: translateX(36px) rotate(11deg) }
.qz-fan.sm .qf-pic { height: 42px }
.qz-fan.sm .qf-l { height: 5px; margin: 7px 8px 0 }
.qz-fan.sm .qc-back .qz-emb { width: 50px; height: 50px }
.qz-fan.sm .qc-back .qc-flag { display: none }
.qz-rotor { animation: qzSpin 7s linear infinite }
.qz-rotor.slow { animation-duration: 10s }
@keyframes qzSpin { to { transform: rotate(360deg) } }

/* ---------------------------------------------------------------- opsætning af et spil */
.su-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r); background: linear-gradient(150deg, #fff 50%, var(--blush)); box-shadow: var(--sh) }
.su-q { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0 }
.su-q > div:last-child { display: grid; gap: 2px; min-width: 0 }
.su-q b { font: 400 1.2rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-top: .05em }
.su-q small { color: var(--muted); font-size: .84rem }
.su-stack { position: relative; width: 88px; height: 64px; flex: none }
.su-stack .qz-mini { position: absolute; top: 4px; width: 44px; height: 58px; border-radius: 8px; box-shadow: 0 6px 12px -6px rgba(60, 0, 10, .6) }
.su-stack .qz-mini:nth-child(1) { left: 0; transform: rotate(-9deg) }
.su-stack .qz-mini:nth-child(2) { left: 14px; transform: rotate(-3deg) }
.su-stack .qz-mini:nth-child(3) { left: 28px; transform: rotate(3deg) }
.su-stack .qz-mini:nth-child(4) { left: 42px; transform: rotate(9deg) }
.su-qb { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
@media (max-width: 520px) { .su-card { flex-wrap: wrap } .su-qb { width: 100%; justify-content: flex-start } }
.su-h { margin: 22px 2px 10px; font: 400 1.15rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; padding-top: .05em }
.su-h3 { margin: 14px 0 8px; font-size: .9rem; font-weight: 800 }
.su-note { display: flex; gap: 8px; align-items: center; margin: 14px 2px 0; color: var(--ink-2); font-size: .92rem }
.su-note .ic { color: var(--red) }
.su-go { position: sticky; bottom: calc(76px + var(--safe-b)); z-index: 5; margin-top: 22px; padding: 10px 0 4px; background: linear-gradient(180deg, rgba(255, 247, 248, 0), var(--bg) 30%) }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.mode { display: grid; align-content: start; justify-items: start; gap: 3px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--sh); text-align: left; border: 2px solid transparent; transition: border-color .15s, background .15s }
.mode .ic { width: 34px; height: 34px; padding: 7px; border-radius: 11px; background: var(--blush); color: var(--red); margin-bottom: 4px }
.mode b { font-size: .98rem }
.mode small { color: var(--muted); font-size: .78rem; line-height: 1.3 }
.mode[aria-checked="true"] { border-color: var(--red); background: linear-gradient(160deg, #fff 40%, var(--blush)) }
.mode[aria-checked="true"] .ic { background: var(--red); color: #fff }
.pl { padding: 10px; margin-bottom: 8px; border-radius: 16px; background: #fff; box-shadow: var(--sh); border-left: 5px solid var(--pc) }
.pl1 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.pl-no { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pc); color: #fff; font-weight: 800; flex: none }
.pl-no .ic { width: 17px; height: 17px }
.pl-n { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--blush-2); font-weight: 700; font-size: 1rem }
.pl-n:focus { outline: none; border-color: var(--rose); background: #fff }
.pl-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted) }
.lvseg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px }
.lvseg button { display: grid; gap: 1px; padding: 8px 4px; border-radius: 12px; background: var(--blush-2); border: 2px solid var(--line); text-align: center }
.lvseg b { font-size: .92rem }
.lvseg small { color: var(--muted); font-size: .72rem }
.lvseg [aria-checked="true"] { background: var(--red); border-color: var(--red); color: #fff }
.lvseg [aria-checked="true"] small { color: rgba(255, 255, 255, .85) }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--sh) }
.seg button { flex: 1; min-height: 42px; border-radius: 999px; font-weight: 800; font-size: .92rem; color: var(--ink-2) }
.seg [aria-checked="true"] { background: var(--red); color: #fff; box-shadow: 0 6px 12px -6px rgba(184, 12, 40, .8) }
.add { margin-top: 2px }
.adv { margin-top: 16px; padding: 4px 14px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh) }
.adv summary { display: flex; align-items: center; gap: 8px; padding: 10px 0 4px; font-weight: 800; color: var(--ink-2); cursor: pointer; list-style: none }
.adv summary::-webkit-details-marker { display: none }
.adv summary .ic { width: 19px; height: 19px; color: var(--red) }
.adv .seg { box-shadow: inset 0 0 0 1.5px var(--line) }
.tgl { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer }
.tgl + .tgl { border-top: 1px solid var(--line) }
.tgl input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 50px; height: 30px; margin: 0; border-radius: 99px; background: #E7D3D8; transition: background .2s; order: 2 }
.tgl input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: transform .2s }
.tgl input:checked { background: var(--red) }
.tgl input:checked::after { transform: translateX(20px) }
.tgl span { flex: 1; display: grid; gap: 1px }
.tgl.sel select { order: 2; height: 40px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--blush-2); font-weight: 800; color: var(--ink) }
.tgl small { color: var(--muted); font-size: .82rem; line-height: 1.3 }

/* vælg quizzer (ark) */
.pk-all { display: flex; gap: 6px; margin: 12px 0 4px }
.pk-g { margin-top: 14px }
.pk-gh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px }
.pk-gh h3 { font: 400 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; padding-top: .05em }
.pk-l { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
.pk-l.cats { margin-top: 12px }
.pk { position: relative; isolation: isolate; display: flex; align-items: center; gap: 9px; padding: 6px 30px 6px 6px; border-radius: 14px; background: #fff; border: 2px solid var(--line); font-weight: 700; font-size: .9rem; line-height: 1.2; cursor: pointer }
.pk input { position: absolute; opacity: 0; pointer-events: none }
.pk .qz-mini { width: 34px; height: 44px; border-radius: 7px }
.pk .pk-c { position: absolute; right: 8px; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--line); color: transparent; stroke-width: 3 }
.pk.on { border-color: var(--qz); background: var(--qzp1) }
.pk.on .pk-c { background: var(--qz); color: #fff }
.pk input:focus-visible ~ span { outline: 3px solid var(--rose); border-radius: 6px }
.pk.cat { padding: 6px 30px 6px 6px }
.pk-pic { flex: none; width: 64px; height: 34px; border-radius: 8px; overflow: hidden }
.pk-pic .qf-pic { display: grid; width: 100%; height: 100% }
.pk-pic .qc-art { width: 100%; height: 100% }

/* ---------------------------------------------------------------- ark og beskeder */
.sheet-wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center }
.sheet-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(42, 6, 14, .45); opacity: 0; transition: opacity .25s }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 88vh; max-height: 88dvh; overflow: auto; padding: 10px 16px calc(18px + var(--safe-b)); border-radius: 24px 24px 0 0; background: var(--bg); box-shadow: 0 -20px 40px -20px rgba(42, 6, 14, .5); transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1) }
.sheet-wrap.on .sheet-bg { opacity: 1 }
.sheet-wrap.on .sheet { transform: none }
.grab { display: block; width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 9px; background: #E4CDD2 }
.sh-t { font: 400 1.5rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-top: .05em }
.sh-p { margin: 6px 0 0; color: var(--ink-2) }
.sh-btns { display: flex; gap: 8px; margin-top: 18px }
.sh-btns .btn { flex: 1 }
.sh-btns.sticky { z-index: 5; position: sticky; bottom: calc(-18px - var(--safe-b)); margin: 18px -16px calc(-18px - var(--safe-b)); padding: 12px 16px calc(14px + var(--safe-b)); background: linear-gradient(180deg, rgba(255, 247, 248, 0), var(--bg) 26%) }
#toast { position: fixed; z-index: 90; left: 50%; bottom: calc(92px + var(--safe-b)); max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: .92rem; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center }
#toast.on { opacity: 1; transform: translate(-50%, 0) }
.upd { position: fixed; z-index: 85; left: 12px; right: 12px; top: calc(62px + var(--safe-t)); display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--red); color: #fff; font-weight: 700; box-shadow: var(--sh-lg) }
.upd span { flex: 1 }
.upd .btn { min-height: 40px; padding: 8px 16px }

/* ---------------------------------------------------------------- spillet (mørk rød bund, så kortene står frem) */
body.dark { background: #4E0612 }
body.dark #view { min-height: calc(100vh - 54px); min-height: calc(100dvh - 54px - var(--safe-t)); background: var(--deep); color: #fff }
body.dark #bar { background: #A80B26 }
.play { padding-top: 14px }
.score { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 5px 4px 6px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .92rem; transition: background .2s, color .2s }
.chip::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7) }
.chip b { font-weight: 800 }
.chip .pt { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 800 }
.chip.on { background: #fff; color: var(--ink) }
.chip.on .pt { background: var(--blush) }
.chip.bump .pt { animation: bump .6s cubic-bezier(.2, .8, .3, 1.6) }
@keyframes bump { 40% { transform: scale(1.45); background: var(--ok); color: #fff } }
.prog { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px }
.prog .dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center }
.prog .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25) }
.prog .dots i.cur { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3) }
.prog .dots i.ok { background: #6FD08C }
.prog .dots i.no { background: var(--pink) }
.prog-n { font-weight: 800; font-size: .88rem; color: rgba(255, 255, 255, .85) }
/* kortet: bagside og forside – det vendes som et rigtigt kort */
.qcard { width: 100%; max-width: 480px; margin: 0 auto; perspective: 1700px }
.qc-in { position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .8, .2, 1) }
.qcard.open .qc-in { transform: rotateY(180deg) }
.qcard.noflip .qc-in, .qcard.noflip.open .qc-in { transform: none; transition: none }
.qcard.noflip .qc-front { transform: none }
.qc-front, .qc-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 24px; overflow: hidden }
.qc-front { position: relative; transform: rotateY(180deg); background: #FFFCFA; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85) }
.qc-back { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 18px; cursor: pointer; color: #fff; text-align: center;
  background: radial-gradient(90% 60% at 50% 38%, var(--qz-l, #E5293F) 0%, var(--qz, #C8102E) 58%, var(--qz-d, #9E0C22) 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(0, 0, 0, .15) }
.qcb-frame { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 16px; pointer-events: none }
.qc-back .qc-flag { position: absolute; top: 18px; right: 18px; padding: 3px 4px 2px 2px; border-radius: 9px; background: #FFF8EC; box-sizing: content-box }
.qz-emb { width: min(44vw, 160px); height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)) }
@media (max-height: 760px) { .qcard .qc-back { justify-content: flex-start; padding-top: 34px } .qcard .qz-emb { width: min(34vw, 120px) } }
.qcb-who { display: grid; gap: 3px; margin: 0 }
.qcb-to { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8) }
.qcb-who b { font: 400 2rem/1 var(--display); text-transform: uppercase; padding-top: .05em; word-break: break-word }
.qcb-who span:last-child { font-size: .9rem; font-weight: 700; color: rgba(255, 255, 255, .86) }
.qc-back .btn.qcb-go { min-width: 200px; background: #fff; color: var(--qz, #C8102E); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .7), inset 0 -3px 0 rgba(0, 0, 0, .08) }
.qc-pic { position: relative; display: grid; place-items: center; height: clamp(120px, 34vw, 160px); padding: 8px 10px 2px }
.qc-art { width: 100%; height: 100%; max-width: 400px }
.qc-flag { position: absolute; top: 9px; right: 11px; width: 30px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)) }
.qc-mark { position: absolute; top: 12px; left: 14px; font: 400 .74rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: rgba(43, 33, 24, .5) }
.qc-timer { height: 6px; background: var(--blush) }
.qc-timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--red), var(--pink)); transform-origin: 0 50% }
.qc-body { padding: 14px 16px 16px; border-top: 3px solid var(--qz, #C8102E) }
.qc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px }
.qc-kick { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qz, #C8102E) }
.qc-say { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--blush); color: var(--red-d); font-size: .8rem; font-weight: 800; flex: none }
.qc-say .ic { width: 18px; height: 18px }
.qc-tf { margin: 0 0 2px; font-weight: 800; font-size: .92rem; color: var(--ink-2) }
.qc-q { margin: 0 0 14px; font: 800 clamp(1.1rem, 4.8vw, 1.32rem)/1.3 var(--body); color: var(--ink); text-wrap: pretty }
.qc-opts { display: grid; gap: 8px }
.qc-opts.two { grid-template-columns: 1fr 1fr }
.qc-o { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 9px; border: 2px solid #F0DDE1; border-radius: 16px; background: #fff; color: var(--ink); text-align: left; font-weight: 700; font-size: 1rem; line-height: 1.25; transition: transform .12s, border-color .2s, background .2s, opacity .2s }
.qc-o:not(:disabled):active { transform: scale(.98) }
.qc-o:not(:disabled):hover { border-color: var(--pink) }
.qc-l { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blush); color: var(--red-d); font-weight: 800 }
.qc-l .ic { width: 18px; height: 18px }
.qc-o.ok { border-color: var(--ok); background: #E7F4EA; opacity: 1 }
.qc-o.ok .qc-l { background: var(--ok); color: #fff }
.qc-o.no { border-color: var(--red); background: #FCE8EA }
.qc-o.no .qc-l { background: var(--red); color: #fff }
.qc-o.dim { opacity: .5 }
.qc-o.gone { opacity: .18; text-decoration: line-through }
.qc-o:disabled { cursor: default }
.qc-tools { display: flex; justify-content: center; margin-top: 10px }
.jk { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: var(--blush); color: var(--red-d); font-weight: 800; font-size: .88rem }
.jk .ic { width: 18px; height: 18px }
.qc-res:empty { display: none }
.qc-res { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--blush-2); border: 1.5px solid var(--line) }
.qc-res.on { animation: res .45s cubic-bezier(.2, .8, .2, 1) both }
@keyframes res { from { opacity: 0; transform: translateY(8px) } }
.qc-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 10px; font-size: 1rem }
.qc-verdict .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; color: #fff; background: var(--ok) }
.qc-verdict.no .ic { background: var(--red) }
.qc-verdict.ans .ic { background: var(--qz) }
.qc-verdict b { font: 400 1.5rem/1 var(--display); text-transform: uppercase; padding-top: .05em; color: var(--ok) }
.qc-verdict.no b { color: var(--red) }
.qc-verdict.ans b { color: var(--qz) }
.qc-verdict span { font-weight: 700; color: var(--ink-2) }
.qc-did { margin: 0 0 8px; line-height: 1.5; color: var(--ink-2) }
.qc-did b { color: var(--ink) }
.qc-src { margin: 0; font-size: .82rem; color: var(--muted); word-break: break-word }
.qc-src a { color: var(--red-d); font-weight: 700 }
.qc-err { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 700; color: var(--muted) }
.qc-next { margin-top: 14px }
.qc-foot { display: flex; justify-content: space-between; gap: 10px; padding: 9px 16px 12px; border-top: 1px dashed #F0DDE1; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #B0959B }
.qcard.enter { animation: cardIn .5s cubic-bezier(.2, .8, .2, 1) both }
.qcard.leave { animation: cardOut .3s ease-in both }
.qcard.pop { animation: pop .28s cubic-bezier(.2, .8, .2, 1) both }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) rotate(2.5deg) scale(.96) } }
@keyframes cardOut { to { opacity: 0; transform: translateX(-115%) rotate(-9deg) } }
@keyframes pop { from { opacity: 0; transform: scale(.94) } }
/* Lynrunden */
.lyn-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 480px; margin: 0 auto 14px }
.lyn-clock { position: relative; width: 66px; height: 66px }
.lyn-clock svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.lyn-clock circle { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 4 }
.lyn-clock circle.rest { stroke: #fff; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--p))); transition: stroke-dashoffset .25s linear }
.lyn-clock b { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; font: 400 1.6rem/1 var(--display); padding-top: .08em }
.lyn-clock.hot circle.rest { stroke: var(--pink-l) }
.lyn-clock.pen { animation: shake .4s }
@keyframes shake { 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }
.lyn-sc { display: grid; justify-items: center }
.lyn-sc b { font: 400 2.6rem/1 var(--display); padding-top: .05em }
.lyn-sc span { font-size: .8rem; font-weight: 700; color: rgba(255, 255, 255, .8) }
.lyn-best { display: grid; justify-items: center; gap: 2px; font-size: .78rem; font-weight: 700; color: rgba(255, 255, 255, .8); width: 66px; text-align: center }
.lyn-ready { max-width: 420px; margin: 20px auto 0; text-align: center; display: grid; justify-items: center; gap: 12px }
.lyn-ready .kick { color: rgba(255, 255, 255, .85) }
.lyn-ready p:not(.kick) { color: rgba(255, 255, 255, .9) }
.lyn .qc-pic { height: clamp(90px, 26vw, 120px) }
/* Quizmester */
.m-tip { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; color: rgba(255, 255, 255, .88); font-weight: 700; font-size: .92rem; text-align: center }
.m-ctl { display: grid; gap: 10px; max-width: 480px; margin: 14px auto 0 }
.m-ctl .btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45) }
.m-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px }
.m-team { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 16px; background: rgba(255, 255, 255, .1); border-top: 4px solid var(--pc) }
.m-team b { font-size: .85rem }
.m-team .pt { font: 400 1.7rem/1 var(--display); padding-top: .05em }
.m-team small { font-size: .74rem; font-weight: 800; color: rgba(255, 255, 255, .75) }
.m-team.bump .pt { animation: bump .6s }
.master .qc-o { cursor: default }
/* slut */
.end { text-align: center; max-width: 520px }
.trophy { display: grid; place-items: center; width: 96px; height: 96px; margin: 8px auto 12px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff 0%, var(--pink-l) 45%, var(--pink) 100%); color: var(--red-d); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6) }
.trophy .ic { width: 48px; height: 48px }
.trophy.gold { background: radial-gradient(circle at 36% 30%, #FFF3C9 0%, #FFD36A 45%, #E8A317 100%); color: #6A4A05 }
.trophy.soft { background: linear-gradient(160deg, var(--blush), var(--pink-l)); box-shadow: var(--sh) }
.end-sub { margin: 10px auto 18px; max-width: 26rem; color: rgba(255, 255, 255, .9); font-size: 1.05rem }
.oev .end-sub { color: var(--ink-2) }
.rank { display: grid; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; text-align: left; counter-reset: r }
.rank li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .1); counter-increment: r }
.rank li::before { content: counter(r); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pc); color: #fff; font-weight: 800; font-size: .9rem; flex: none }
.rank li b { flex: 1 }
.rank li span { font-size: .82rem; color: rgba(255, 255, 255, .7) }
.rank li .pt { font-weight: 800; color: #fff; font-size: 1rem }
.rank li.w { background: #fff; color: var(--ink) }
.rank li.w span { color: var(--muted) }
.rank li.w .pt { color: var(--red) }
.btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }
.end .btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45) }
.newb { display: grid; justify-items: center; gap: 8px; margin: 0 0 18px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .1) }
.newb .kick { color: #FFE7A8 }
.bchip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; color: var(--ink); font-size: .92rem }
.bchip .bic, .bchip .medal { width: 34px; height: 34px }
.bchip .bic .ic { width: 18px; height: 18px }
.review { margin: 22px 0 0; text-align: left; border-radius: 18px; background: rgba(255, 255, 255, .08) }
.review summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 800; cursor: pointer; list-style: none }
.review summary::-webkit-details-marker { display: none }
.qrs { display: grid; gap: 6px; margin: 0; padding: 0 10px 12px; list-style: none }
.qr { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--ink); border-left: 4px solid var(--qz) }
.qr-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ok); color: #fff; flex: none }
.qr.no .qr-ic { background: var(--red) }
.qr-ic .ic { width: 16px; height: 16px; stroke-width: 2.6 }
.qr-q { font-weight: 700; font-size: .92rem; line-height: 1.35 }
.qr-a { margin-top: 2px; font-size: .84rem; color: var(--ink-2) }
.qr-a span { color: var(--qz); font-weight: 700 }
/* Dagens quiz */
.dg-res { display: grid; justify-items: center; gap: 10px; margin: 0 0 18px; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .1) }
.dg-grid { font-size: 1.6rem; letter-spacing: .06em; line-height: 1 }
.dg-grid.sm { font-size: .92rem; letter-spacing: 0 }
.dg-st { display: flex; align-items: center; gap: 6px; font-weight: 700 }
.dg-st b { font: 400 1.6rem/1 var(--display); padding-top: .05em }
.dg-res .btn.ghost { background: #fff; color: var(--red); box-shadow: none }
.dg-next { font-size: .86rem; color: rgba(255, 255, 255, .8) }
.dg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 420px; margin: 18px auto 0 }
.dg-stats div { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: rgba(255, 255, 255, .14) }
.dg-stats b { font: 400 1.7rem/1 var(--display); padding-top: .05em }
.dg-stats small { font-size: .72rem; color: rgba(255, 255, 255, .86) }
.dg-stats .flame { color: #fff; font-size: 1.7rem }
.dg-stats .flame .ic { width: 24px; height: 24px; fill: rgba(255, 255, 255, .3) }
.dg-lvs { display: grid; gap: 8px }
.dg-lv { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--sh) }
.dg-lv > div:first-child { display: grid }
.dg-lv > div:first-child b { font: 400 1.25rem/1 var(--display); text-transform: uppercase; padding-top: .05em }
.dg-lv small { color: var(--muted); font-size: .8rem }
.dg-lv .btn { min-height: 44px; padding: 8px 18px }
.dg-lr { display: flex; align-items: center; gap: 8px; font-weight: 800 }
.dg-lv.done { background: linear-gradient(150deg, #fff 50%, var(--blush)) }
.dg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 360px }
.dg-cal i { aspect-ratio: 1; border-radius: 8px; background: #F3E3E7 }
.dg-cal i.h1 { background: var(--pink-l) }
.dg-cal i.h2 { background: var(--pink) }
.dg-cal i.h3 { background: var(--red) }
.dg-cal i.today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink) }
.dg-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 18px; font-size: .78rem; color: var(--muted) }
.dg-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-left: 6px }
.dg-key i.h1 { background: var(--pink-l); margin-left: 0 }
.dg-key i.h2 { background: var(--pink) }
.dg-key i.h3 { background: var(--red) }

/* ---------------------------------------------------------------- Mere og tekstsider */
.box { padding: 4px 16px; border-radius: var(--r); background: #fff; box-shadow: var(--sh) }
.links { display: grid; border-radius: var(--r); background: #fff; box-shadow: var(--sh); overflow: hidden }
.links > a, .links > button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: var(--ink); text-decoration: none; font-weight: 700; text-align: left; width: 100% }
.links > * + * { border-top: 1px solid var(--line) }
.links > * > .ic:first-child { color: var(--red) }
.links > * > span { flex: 1 }
.links > * > .ic:last-child { color: #D9B9BF; width: 18px; height: 18px }
.links .danger, .links .danger .ic:first-child { color: var(--red-d) }
.prose { max-width: 640px; line-height: 1.6 }
.prose h1 { font: 400 clamp(2rem, 9vw, 2.8rem)/1 var(--display); text-transform: uppercase; padding-top: .05em; margin: 6px 0 14px }
.prose h2 { margin: 22px 0 6px; font-size: 1.1rem; font-weight: 800 }
.prose p { margin: 0 0 10px; color: var(--ink-2) }
.prose .lead { font-size: 1.08rem; color: var(--ink) }
.om-logo .logo { width: 72px; height: 72px; margin: 8px 0 0 }

/* ---------------------------------------------------------------- effekter */
.fx-dot { position: fixed; z-index: 95; width: 8px; height: 8px; margin: -4px; border-radius: 50%; pointer-events: none; animation: fxDot .65s cubic-bezier(.2, .8, .2, 1) forwards }
@keyframes fxDot { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0 } }
.fx-conf { position: fixed; z-index: 95; top: -14px; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); animation: fxConf 2.4s cubic-bezier(.25, .6, .4, 1) forwards }
@keyframes fxConf { to { transform: translate(var(--x), 105vh) rotate(var(--r)); opacity: .9 } }

@media (min-width: 760px) { .mtiles { grid-template-columns: repeat(3, 1fr) } .modes { grid-template-columns: repeat(4, 1fr) } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .qz-rotor { animation: none !important }
}

/* ==========================================================================
   Vores Quiz Live: quizrum, værtens skærm, deltagernes telefoner og storskærmen
   ========================================================================== */
.bar-more { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 -6px 0 auto; border-radius: 50%; color: #fff }
.bar-more.on, .bar-more:active { background: rgba(255, 255, 255, .16) }
.livec { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(120deg, #2A1418 0%, #5A0B1C 55%, #A80B26 100%); color: #fff; text-decoration: none; box-shadow: var(--sh-lg) }
.livec-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .14); flex: none }
.livec-t { flex: 1; display: grid; gap: 2px }
.livec-t b { font: 400 1.25rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; padding-top: .05em }
.livec-t small { color: rgba(255, 255, 255, .85); font-size: .84rem; line-height: 1.35 }
.livec-go { display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px 6px 12px; border-radius: 999px; background: #fff; color: var(--red); font-weight: 800; font-size: .86rem }
.livec-go .ic { width: 16px; height: 16px }
.live-hero { background: linear-gradient(162deg, #2A1418 0%, #6A0717 40%, #C8102E 80%, #E8344F 100%) }
.join-f { display: flex; justify-content: center; gap: 8px; margin: 12px auto 6px; max-width: 320px }
.join-f input { width: 150px; height: 54px; padding: 0 14px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); color: #fff; text-align: center; font: 400 1.6rem/1 var(--display); letter-spacing: .25em; text-transform: uppercase }
.join-f input::placeholder { color: rgba(255, 255, 255, .6) }
.join-f input:focus { outline: none; background: rgba(255, 255, 255, .24); border-color: #fff }
.steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: s }
.steps li { position: relative; display: grid; gap: 2px; padding: 14px 14px 14px 58px; border-radius: 16px; background: #fff; box-shadow: var(--sh); counter-increment: s }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800 }
.steps span { color: var(--ink-2); font-size: .9rem }
.modes.two { grid-template-columns: 1fr 1fr }
/* deltager og vært */
.lroom .wrap, .lhost .wrap { max-width: 560px }
.lwait { display: grid; justify-items: center; gap: 10px; padding: 30px 10px 10px; text-align: center; color: rgba(255, 255, 255, .9) }
.lpulse { display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: rgba(255, 255, 255, .14); animation: lpulse 1.8s ease-in-out infinite }
.lpulse .ic { width: 40px; height: 40px }
@keyframes lpulse { 50% { box-shadow: 0 0 0 16px rgba(255, 255, 255, .06); transform: scale(1.04) } }
.lnames { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px }
.lnames span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-weight: 700; font-size: .9rem; animation: pop .3s both }
.lnames span.me { background: #fff; color: var(--red) }
.lhead { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: .82rem; font-weight: 800; color: rgba(255, 255, 255, .8); letter-spacing: .04em; text-transform: uppercase }
.ltimer { position: relative; height: 30px; margin: 0 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden }
.ltimer i { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, var(--pink-l)); border-radius: inherit; transition: transform .2s linear }
.ltimer b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 400 1.1rem/1 var(--display); color: var(--red-d) }
.lpre { display: grid; justify-items: center; gap: 6px; padding: 18px; border-radius: 24px; background: #FFFCFA; color: var(--ink); text-align: center }
.lpre .qc-pic { width: 100%; height: 130px; border-radius: 16px }
.lpre .kick { color: var(--qz) }
.lpre-n { font: 400 5rem/1 var(--display); color: var(--qz); padding-top: .05em }
.qc-opts.live .qc-o { border-color: color-mix(in srgb, var(--oc) 35%, #fff) }
.qc-opts.live .qc-l { background: var(--oc); color: #fff }
.qc-o.picked { border-color: var(--ink); background: #F3ECEE; opacity: 1 }
.lres { display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 24px; background: #fff; color: var(--ink); text-align: center }
.lres-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff }
.lres-ic .ic { width: 34px; height: 34px; stroke-width: 2.6 }
.lres.no .lres-ic { background: var(--red) }
.lres.ok .big-t { color: var(--ok) }
.lres.no .big-t { color: var(--red) }
.lpts { font-weight: 800; font-size: 1.1rem }
.lrank { color: var(--muted); font-weight: 700 }
.lfact { margin-top: 10px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .95); color: var(--ink) }
.lfact .qc-did { margin: 0 0 6px }
.reacts { display: flex; justify-content: center; gap: 6px; margin: 16px 0 0 }
.reacts button { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 1.5rem; line-height: 1 }
.reacts button.pop { animation: rpop .45s cubic-bezier(.2, .8, .3, 1.6) }
@keyframes rpop { 40% { transform: scale(1.35) translateY(-6px) } }
.lboard { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none }
.lboard li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); animation: res .35s both }
.lboard li:nth-child(2) { animation-delay: .05s } .lboard li:nth-child(3) { animation-delay: .1s } .lboard li:nth-child(4) { animation-delay: .15s } .lboard li:nth-child(5) { animation-delay: .2s }
.lboard li.me { background: #fff; color: var(--ink) }
.lboard li.tm0 { box-shadow: inset 4px 0 0 var(--red) } .lboard li.tm1 { box-shadow: inset 4px 0 0 #fff }
.lr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-weight: 800; font-size: .88rem; flex: none }
.lboard li.me .lr { background: var(--red); color: #fff }
.lboard b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.lg { font-size: .82rem; font-weight: 800; color: #9BE3B0 }
.lboard li.me .lg { color: var(--ok) }
.lp { font: 400 1.2rem/1 var(--display); padding-top: .05em }
.lme { margin-top: 8px; text-align: center; font-weight: 700; color: rgba(255, 255, 255, .85) }
.tbar { display: flex; gap: 4px; margin: 14px 0 0; border-radius: 16px; overflow: hidden }
.tbar > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; padding: 12px 14px; transition: flex .6s }
.tb0 { background: var(--red); color: #fff } .tb1 { background: #fff; color: var(--red) }
.tbar span { font: 400 1.3rem/1 var(--display) }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; max-width: 440px; margin: 14px auto 6px }
.pod { display: grid; justify-items: center; gap: 4px; text-align: center; animation: podin .7s cubic-bezier(.2, .8, .2, 1) both }
.pod.p1 { animation-delay: .5s } .pod.p2 { animation-delay: .25s }
@keyframes podin { from { opacity: 0; transform: translateY(40px) } }
.pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem }
.pp { font-weight: 800; font-size: .86rem; opacity: .85 }
.pstep { display: grid; place-items: start center; width: 100%; padding-top: 10px; border-radius: 14px 14px 4px 4px; font: 400 2.2rem/1 var(--display) }
.p1 .pstep { height: 130px; background: linear-gradient(180deg, #FFE7A8, var(--gold)); color: #6A4A05 }
.p2 .pstep { height: 96px; background: linear-gradient(180deg, #F4F6F8, #9AA6B2); color: #39424B }
.p3 .pstep { height: 72px; background: linear-gradient(180deg, #F1B98A, #B66A34); color: #4A2810 }
.getapp { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none }
.getapp .logo { width: 46px; height: 46px; flex: none }
.getapp span { display: grid; text-align: left }
.getapp small { color: var(--muted) }
.lend { text-align: center }
.jbox { padding: 18px 16px; border-radius: 24px; background: var(--bg); color: var(--ink) }
.jbox .kick { justify-content: center }
.big-t.ink, .end-sub.ink { color: var(--ink); text-align: center }
.pl-n.big { width: 100%; height: 54px; font-size: 1.15rem }
.jgo { margin-top: 18px }
.jbox .note { margin-top: 12px }
.sh-join .jbox { padding: 0; background: none }
.hlobby { display: grid; justify-items: center; gap: 8px; text-align: center; color: #fff }
.hqr { width: min(70vw, 280px); padding: 10px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6) }
.hqr.sm { width: 220px; margin: 12px auto 0; box-shadow: var(--sh) }
.qr { width: 100%; height: auto }
.hcode { font-size: 1rem; font-weight: 700 }
.hcode b { display: block; font: 400 3.4rem/1 var(--display); letter-spacing: .14em; padding-top: .05em }
.hurl { color: rgba(255, 255, 255, .85); font-size: .92rem }
.hbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 }
.sec-t.lt { color: #fff; margin: 14px 2px 4px; justify-content: center }
.sec-t.lt .cnt { color: rgba(255, 255, 255, .8) }
.hplayers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none }
.hplayers li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); animation: pop .3s both }
.hplayers li.tm0 { box-shadow: inset 0 0 0 2px var(--pink) } .hplayers li.tm1 { box-shadow: inset 0 0 0 2px #fff }
.hplayers small { font-size: .74rem; opacity: .8 }
.hkick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: rgba(255, 255, 255, .8) }
.hkick .ic { width: 15px; height: 15px }
.hlobby .btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); margin-top: 6px }
.hlobby .btn.white.big { margin-top: 6px }
.hbar { margin: 0 0 10px; text-align: center }
.hcards { display: grid; gap: 8px }
.hcard { padding: 14px; border-radius: 18px; background: #fff; color: var(--ink); border-left: 5px solid var(--qz) }
.hcard .kick { color: var(--qz); margin-bottom: 4px }
.hq { font-weight: 800; line-height: 1.35 }
.ha { display: flex; gap: 6px; align-items: center; margin-top: 6px; color: var(--ok); font-weight: 800 }
.hctl { position: sticky; bottom: calc(10px + var(--safe-b)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; padding: 10px; border-radius: 20px; background: rgba(42, 6, 14, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-weight: 700; font-size: .9rem }
.hctl .btn { min-height: 46px; padding: 10px 18px }
.hctl .btn.wide { width: 100% }
.tvurl { margin: 12px 0 0; padding: 12px; border-radius: 14px; background: #fff; text-align: center; font: 400 1.5rem/1.1 var(--display); letter-spacing: .03em; color: var(--red); word-break: break-all }

/* ---------------------------------------------------------------- storskærmen (stor skrift, læses på afstand) */
body.tv { background: #3A0610; overflow: hidden }
body.tv #view { min-height: 100vh; min-height: 100dvh; padding: 0 !important; background: radial-gradient(90% 70% at 15% 0%, rgba(232, 52, 79, .55) 0%, rgba(232, 52, 79, 0) 60%), radial-gradient(80% 60% at 100% 100%, rgba(245, 154, 174, .35) 0%, rgba(245, 154, 174, 0) 60%), linear-gradient(160deg, #A80B26 0%, #6A0717 55%, #3A0610 100%); color: #fff }
.tvwrap { font-size: 24px; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding: clamp(16px, 3vw, 44px) clamp(16px, 4vw, 64px); font-size: clamp(16px, 1.6vw, 30px) }
.tvhead { display: flex; align-items: center; gap: 1.2em; margin-bottom: 1em }
.tvlogo { display: flex; align-items: center; gap: .5em; font: 400 1.4em/1 var(--display); text-transform: uppercase; letter-spacing: .03em }
.tvlogo .logo { width: 1.7em; height: 1.7em }
.tvlogo b { font-weight: 400; color: var(--pink-l) }
.tvtitle { flex: 1; text-align: center; font-weight: 800; opacity: .9 }
.tvjoin { padding: .4em .9em; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 700 }
.tvjoin b { letter-spacing: .12em }
.tv-t { font: 400 3.2em/1 var(--display); text-transform: uppercase; text-align: center; padding-top: .05em }
.tv-s { margin: .4em 0; opacity: .9; font-size: 1.05em }
.tv-s.center { text-align: center; margin-top: 1em }
.tv-k { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8em; opacity: .9 }
.tv-k.qz { color: var(--qz); opacity: 1 }
.tv-big { font: 400 6em/1 var(--display); letter-spacing: .14em; padding-top: .05em }
.tv-help { margin-top: 1.4em; opacity: .8; text-align: center }
.tv-back { margin-top: 1em; color: #fff; text-align: center }
.tvstart { align-items: center; justify-content: center; text-align: center }
.tvform { display: flex; gap: .6em; margin-top: 1em }
.tvform input { width: 7em; height: 2.4em; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .14); color: #fff; text-align: center; font: 400 1.6em/1 var(--display); letter-spacing: .2em }
.tvlobby { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4vw; flex-wrap: wrap }
.tvqr { width: min(38vw, 62vh); padding: 1em; border-radius: 1.4em; background: #fff; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7) }
.tvjoinbox { max-width: 34em }
.tvnames { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .6em }
.tvnames span { padding: .35em .9em; border-radius: 999px; background: rgba(255, 255, 255, .16); font-weight: 800; animation: pop .35s both }
.tvnames span.tm0 { box-shadow: inset 0 0 0 3px var(--pink) } .tvnames span.tm1 { background: #fff; color: var(--red) }
.tvq { flex: 1; display: flex; flex-direction: column }
.tvqtop { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 1em; margin-bottom: 1em }
.tvqtop > :last-child { text-align: right }
.tvq .ltimer { height: 1.4em; margin: 0 }
.tvq .ltimer b { font-size: .95em }
.tvpre { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center }
.tvpre b { font: 400 10em/1 var(--display); padding-top: .05em }
.tvcard { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.4em; padding: 1.2em; border-radius: 1.4em; background: #FFFCFA; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8) }
.tvpic { display: grid; place-items: center; border-radius: 1em; padding: .6em; min-height: 8em }
.tvpic .qc-art { width: 100%; height: 100% }
.tvbody { display: flex; flex-direction: column; gap: .6em; min-width: 0 }
.tvqq { font: 800 1.9em/1.25 var(--body); text-wrap: balance }
.tvopts { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: auto }
.tvo { position: relative; display: flex; align-items: center; gap: .7em; min-height: 3.2em; padding: .5em .9em .5em .5em; border-radius: .9em; background: var(--oc); color: #fff; font-weight: 800; font-size: 1.1em; overflow: hidden; transition: opacity .4s, transform .4s }
.tvl { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: rgba(255, 255, 255, .25); flex: none }
.tvot { flex: 1; position: relative; z-index: 1 }
.tvc { position: relative; z-index: 1; font: 400 1.3em/1 var(--display) }
.tvbar { position: absolute; left: 0; bottom: 0; height: .35em; background: rgba(255, 255, 255, .7) }
.tvo.dim { opacity: .28 }
.tvo.ok { transform: scale(1.03); box-shadow: 0 0 0 .2em #fff, 0 0 0 .4em var(--ok) }
.tvfact { margin-top: .4em; padding: .7em .9em; border-radius: .8em; background: var(--blush-2); color: var(--ink-2); line-height: 1.45 }
.tvfact.sm { font-size: .8em; background: none; padding: 0 }
.tvlv { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em }
.tvlc { display: flex; flex-direction: column; gap: .5em; padding: 1em; border-radius: 1.2em; background: #FFFCFA; color: var(--ink) }
.tvlc .tvpic { min-height: 6em; flex: none; height: 9em }
.tvlk { font: 400 1.6em/1.1 var(--display); text-transform: uppercase; color: var(--ink); padding-top: .05em }
.tvlq { font-weight: 800; line-height: 1.3 }
.tvla { display: flex; gap: .4em; align-items: center; color: var(--ok); font-weight: 800; font-size: 1.1em }
.tvla .ic { width: 1.2em; height: 1.2em }
.tvboard, .tvend { flex: 1; max-width: 46em; width: 100%; margin: 0 auto }
.tvboard .lboard li { padding: .6em 1em; font-size: 1.1em }
.tvboard .lr { width: 1.6em; height: 1.6em }
.tvend .podium { max-width: 34em; margin-top: 1.4em }
.tvend .pn { font-size: 1.3em }
.tvend .p1 .pstep { height: 9em } .tvend .p2 .pstep { height: 6.5em } .tvend .p3 .pstep { height: 5em }
.tvreacts { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; z-index: 50 }
.tvr { position: absolute; bottom: -10vh; font-size: clamp(36px, 5vw, 90px); animation: tvr 3s ease-out forwards }
@keyframes tvr { 0% { transform: translateY(0) scale(.6); opacity: 0 } 15% { opacity: 1; transform: translateY(-15vh) scale(1.1) } 100% { transform: translateY(-95vh) scale(1); opacity: 0 } }
@media (max-width: 760px) { .tvcard { grid-template-columns: 1fr } .tvlv { grid-template-columns: 1fr } .tvqtop { grid-template-columns: 1fr 1fr } .tvqtop > :nth-child(2) { grid-column: 1 / -1; grid-row: 2 } .tvopts { grid-template-columns: 1fr } }
.pod.empty { visibility: hidden }
.lboard { text-align: left }
.tvlobby { flex-wrap: nowrap; gap: 5vw }
.tvqr { width: min(32vw, 58vh); flex: none }
.tvjoinbox .tv-big { font-size: 5em }
@media (max-aspect-ratio: 1/1) { .tvlobby { flex-wrap: wrap } .tvqr { width: min(70vw, 40vh) } }
.duel-hero .hero-t { font-size: clamp(2.2rem, 11vw, 3.4rem) }
.duelcmp { display: grid; gap: 8px; width: 100% }
.duelcmp > div { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .12); text-align: left }
.duelcmp strong { font: 400 1.6rem/1 var(--display) }
.league { display: grid; gap: 4px; padding: 8px; border-radius: var(--r); background: #fff; box-shadow: var(--sh) }
.lgh, .lgr { display: grid; grid-template-columns: 34px 1fr 54px 64px 44px; align-items: center; gap: 6px; padding: 8px 6px; text-align: right }
.lgh { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.lgh span:nth-child(2), .lgr b { text-align: left }
.lgr { border-radius: 12px; font-weight: 700 }
.lgr .lr { background: var(--blush); color: var(--red-d) }
.lgr.top { background: linear-gradient(90deg, #FFF3D1, #fff) }
.lgr.top .lr { background: var(--gold); color: #fff }

.jn-row { display: flex; gap: 8px }
.iconbtn.big { width: 54px; height: 54px; font-size: 1.5rem; flex: none }

/* nedtællingen 3-2-1 hopper for hvert tal */
[data-pre].tick { display: inline-block; animation: pretick .5s cubic-bezier(.2, .8, .3, 1.4) }
@keyframes pretick { 0% { transform: scale(1.5); opacity: .4 } 100% { transform: none; opacity: 1 } }
/* reaktionerne: emoji og navn flyver op over skærmen – på storskærmen og på telefonerne */
.tvr { display: grid; justify-items: center; line-height: 1; pointer-events: none }
.tvr i { font-style: normal }
.tvr small { margin-top: .15em; padding: .15em .55em; border-radius: 999px; background: rgba(42, 6, 14, .55); color: #fff; font: 700 clamp(11px, 1vw, 20px)/1.2 var(--body); white-space: nowrap }
.tvreacts.phone { z-index: 60 }
.tvreacts.phone .tvr { font-size: 44px; bottom: 80px }

/* Baggrunde bag quizzernes tegninger (fra Vores Leg) */
.c-natur { background: #DDEFF5 }
.c-historie { background: #E3EEF6 }
.c-geografi { background: #E4F1FA }
.c-traditioner { background: #FBE6E1 }
.c-sprog { background: #FFF1D6 }
.c-mad { background: #FCEBDD }
.c-opfindelser { background: #E1EEF7 }
.c-kultur { background: #F1E6F4 }
.c-kongehus { background: #F7EBD3 }
.c-sport { background: #E6F1F8 }
.c-dyr-have { background: #E8F4DE }
.c-dyr-skov { background: #E3EFDD }
.c-dyr-fugle { background: #E3F0F8 }
.c-dyr-hav { background: #DDEFF8 }
.c-dyr-vand { background: #E1F1F3 }
.c-dyr-kryb { background: #FFF3D9 }
.c-dyr-landet { background: #E6F1F8 }
.c-dyr-rekord { background: #FFF1D6 }
.c-dyr-spor { background: #ECE6F6 }
.c-dyr-aaret { background: #FBEBDD }
.c-natur-skov { background: #E3EFDD }
.c-natur-blomster { background: #E6F1F8 }
.c-natur-svampe { background: #F6EBDD }
.c-natur-kyst { background: #DDEFF8 }
.c-natur-landskab { background: #E3F0F8 }
.c-natur-vand { background: #E8F4DE }
.c-natur-vejr { background: #E4EEF8 }
.c-natur-himmel { background: #DAD6EE }
.c-natur-parker { background: #EFE8F5 }
.c-natur-ude { background: #E8F4DE }
.c-hav-havene { background: #DDEFF8 }
.c-hav-kyst { background: #E3F0F8 }
.c-hav-strande { background: #FFF1D6 }
.c-hav-sikker { background: #FBE6E1 }
.c-hav-dyr { background: #E1F1F3 }
.c-hav-fund { background: #F6EBDD }
.c-hav-klit { background: #E8F4DE }
.c-hav-fyr { background: #E4EEF8 }
.c-hav-vejr { background: #E6E9EF }
.c-hav-leg { background: #FFF3D9 }
.c-musik-dkklassik { background: #FBEBDD }
.c-musik-dknyt { background: #F1E6F4 }
.c-musik-verden { background: #FFF1D6 }
.c-musik-hits { background: #ECE6F6 }
.c-musik-mgp { background: #FFF0DC }
.c-musik-boern { background: #E8F4DE }
.c-musik-faelles { background: #FFF3D9 }
.c-musik-klassisk { background: #E9EEF6 }
.c-musik-instr { background: #F6EBDD }
.c-musik-festival { background: #FBE6E1 }
.c-sport-haandbold { background: #FFF1D6 }
.c-sport-cykling { background: #E8F4DE }
.c-sport-ol { background: #E4EEF8 }
.c-sport-fodbold { background: #E3F0F8 }
.c-sport-ketsjer { background: #F1E6F4 }
.c-sport-vand { background: #DDEFF8 }
.c-sport-motor { background: #E6E9EF }
.c-sport-is { background: #E3EEF6 }
.c-sport-regler { background: #FBE6E1 }
.c-sport-nyt { background: #FFF3D9 }
.c-historie-oldtid { background: #E8F4DE }
.c-historie-vikinger { background: #E3F0F8 }
.c-historie-middelalder { background: #E4EEF8 }
.c-historie-konger { background: #F7EBD3 }
.c-historie-krig { background: #E6F1F8 }
.c-historie-demokrati { background: #ECE6F6 }
.c-historie-opdagelser { background: #E9EEF6 }
.c-historie-verden { background: #E4EEF8 }
.c-historie-hverdag { background: #FBEBDD }
.c-historie-nyere { background: #DDEFF8 }
.c-fodbold-start { background: #F6EBDD }
.c-fodbold-dynamite { background: #E9EEF1 }
.c-fodbold-em92 { background: #FFF1D6 }
.c-fodbold-slutrunder { background: #E6E9EF }
.c-fodbold-damer { background: #E8F4DE }
.c-fodbold-legender { background: #FFF3D9 }
.c-fodbold-rekorder { background: #E3F0F8 }
.c-fodbold-traenere { background: #FBEBDD }
.c-fodbold-parken { background: #FBE6E1 }
.c-fodbold-nyt { background: #E4EEF8 }
.c-kbh-historie { background: #E3F0F8 }
.c-kbh-kongehus { background: #F7EBD3 }
.c-kbh-taarne { background: #E4EEF8 }
.c-kbh-havn { background: #DDEFF8 }
.c-kbh-parker { background: #E8F4DE }
.c-kbh-kultur { background: #F1E6F4 }
.c-kbh-tivoli { background: #FBE6E1 }
.c-kbh-byliv { background: #E6F1F8 }
.c-kbh-personer { background: #FFF1D6 }
.c-kbh-bydele { background: #ECE6F6 }
.c-aarhus-vikinger { background: #E8F4DE }
.c-aarhus-historie { background: #F3E7F8 }
.c-aarhus-kirker { background: #E3F0F8 }
.c-aarhus-slot { background: #E4EEF8 }
.c-aarhus-huse { background: #E6F1F8 }
.c-aarhus-museer { background: #FFF1D6 }
.c-aarhus-natur { background: #E3EFDD }
.c-aarhus-havn { background: #DDEFF8 }
.c-aarhus-kultur { background: #FFF3D9 }
.c-aarhus-sjov { background: #E8F4DE }
.c-odense-eventyr { background: #FFF1D6 }
.c-odense-museer { background: #FBEBDD }
.c-odense-historie { background: #E8F4DE }
.c-odense-kirker { background: #E3F0F8 }
.c-odense-slot { background: #E4EEF8 }
.c-odense-natur { background: #E3EFDD }
.c-odense-zoo { background: #FFF3D9 }
.c-odense-musik { background: #F3E7F8 }
.c-odense-byliv { background: #E6F1F8 }
.c-odense-sport { background: #E8F4DE }
.c-aalborg-vikinger { background: #FBEBDD }
.c-aalborg-historie { background: #DDEFF8 }
.c-aalborg-kirker { background: #E3F0F8 }
.c-aalborg-slot { background: #FFF1D6 }
.c-aalborg-huse { background: #E4EEF8 }
.c-aalborg-fjord { background: #DDEFF8 }
.c-aalborg-zoo { background: #E8F4DE }
.c-aalborg-byliv { background: #FBE6E1 }
.c-aalborg-sport { background: #E6F1F8 }
.c-aalborg-viden { background: #F1E6F4 }
.c-esbjerg-historie { background: #FFF1D6 }
.c-esbjerg-havn { background: #DDEFF8 }
.c-esbjerg-energi { background: #E1EEF7 }
.c-esbjerg-vadehav { background: #F6EBDD }
.c-esbjerg-kyst { background: #DDEFF8 }
.c-esbjerg-mennesket { background: #E8F4DE }
.c-esbjerg-museum { background: #E1F1F3 }
.c-esbjerg-huse { background: #E4EEF8 }
.c-esbjerg-sport { background: #FBEBDD }
.c-esbjerg-byliv { background: #F3E7F8 }
.c-roskilde-skibe { background: #DDEFF8 }
.c-roskilde-museum { background: #E6F1F8 }
.c-roskilde-domkirke { background: #E3F0F8 }
.c-roskilde-konger { background: #F7EBD3 }
.c-roskilde-historie { background: #E8F4DE }
.c-roskilde-freden { background: #E9EEF6 }
.c-roskilde-festival { background: #FFF0DC }
.c-roskilde-huse { background: #FBEBDD }
.c-roskilde-natur { background: #E3EFDD }
.c-roskilde-byliv { background: #FFF1D6 }

/* Baggrundene bag Vores Søer-, Vores Øer- og Vores Fugle-quizzens tegninger – skrives af build/quiz_art_nye.py */
.c-soeer-store { background: #E3F0F8 } .c-soeer-hoejland { background: #E8F4DE } .c-soeer-byen { background: #E6F1F8 } .c-soeer-istid { background: #E4EEF8 } .c-soeer-fisk { background: #DDEFF8 } .c-soeer-liv { background: #E1F1F3 } .c-soeer-sagn { background: #DAD6EE } .c-soeer-miljoe { background: #E3F0F8 } .c-soeer-aktiv { background: #FFF3D9 } .c-soeer-aaret { background: #E9EEF6 }
.c-oeer-store { background: #DDEFF8 } .c-oeer-bornholm { background: #E4EEF8 } .c-oeer-sydfyn { background: #E3F0F8 } .c-oeer-kattegat { background: #FFF1D6 } .c-oeer-vadehav { background: #F6EBDD } .c-oeer-broer { background: #E6E9EF } .c-oeer-rige { background: #E9EEF6 } .c-oeer-historie { background: #F7EBD3 } .c-oeer-natur { background: #E8F4DE } .c-oeer-liv { background: #FBEBDD }
.c-fugle-have { background: #E8F4DE } .c-fugle-skov { background: #E3EFDD } .c-fugle-vand { background: #E1F1F3 } .c-fugle-kyst { background: #DDEFF8 } .c-fugle-rov { background: #FFF1D6 } .c-fugle-traek { background: #FBEBDD } .c-fugle-sang { background: #F1E6F4 } .c-fugle-rede { background: #E6F1F8 } .c-fugle-rekord { background: #FFF3D9 } .c-fugle-kend { background: #E4EEF8 }

/* Baggrundene bag Vores Horsens-, Vores Randers-, Vores Vejle- og Vores Kolding-quizzens tegninger – skrives af build/quiz_art_byer3.py */
.c-horsens-historie { background: #E3F0F8 } .c-horsens-faengsel { background: #FFF1D6 } .c-horsens-kirker { background: #E4EEF8 } .c-horsens-bering { background: #E4EEF8 } .c-horsens-fjord { background: #DDEFF8 } .c-horsens-kultur { background: #F1E6F4 } .c-horsens-middelalder { background: #FFF1D6 } .c-horsens-natur { background: #E8F4DE } .c-horsens-sport { background: #E6F1F8 } .c-horsens-byen { background: #E6F1F8 }
.c-randers-historie { background: #E3F0F8 } .c-randers-regnskov { background: #E1F1F3 } .c-randers-gudenaa { background: #E3F0F8 } .c-randers-kirker { background: #E4EEF8 } .c-randers-huse { background: #FBEBDD } .c-randers-kultur { background: #DAD6EE } .c-randers-industri { background: #F6EBDD } .c-randers-natur { background: #E8F4DE } .c-randers-sport { background: #E6F1F8 } .c-randers-byen { background: #DDEFF8 }
.c-vejle-historie { background: #E8F4DE } .c-vejle-jelling { background: #E3F0F8 } .c-vejle-fjord { background: #DDEFF8 } .c-vejle-aadal { background: #E3EFDD } .c-vejle-cykling { background: #FFF3D9 } .c-vejle-gunhild { background: #E9EEF6 } .c-vejle-industri { background: #FBEBDD } .c-vejle-kultur { background: #F3E7F8 } .c-vejle-sport { background: #E8F4DE } .c-vejle-byen { background: #E6F1F8 }
.c-kolding-historie { background: #FFF1D6 } .c-kolding-koldinghus { background: #E4EEF8 } .c-kolding-graense { background: #FFF3D9 } .c-kolding-fjord { background: #DDEFF8 } .c-kolding-design { background: #F1E6F4 } .c-kolding-natur { background: #E3EFDD } .c-kolding-have { background: #E8F4DE } .c-kolding-kirker { background: #E3F0F8 } .c-kolding-sport { background: #FBEBDD } .c-kolding-byen { background: #FBE6E1 }

/* Baggrundene bag Vores Fisk- og Vores Planter-quizzens tegninger – skrives af build/quiz_art_natur2.py */
.c-fisk-hav { background: #DDEFF8 } .c-fisk-soe { background: #E1F1F3 } .c-fisk-strand { background: #E3F0F8 } .c-fisk-lyst { background: #E8F4DE } .c-fisk-fiskeri { background: #E4EEF8 } .c-fisk-mad { background: #FFF1D6 } .c-fisk-kroppen { background: #E6F1F8 } .c-fisk-laks { background: #E3EFDD } .c-fisk-sjaeldne { background: #DFE8F2 } .c-fisk-rekord { background: #FFF3D9 }
.c-planter-have { background: #E6F1F8 } .c-planter-blomster { background: #FFF6E0 } .c-planter-traeer { background: #E3EFDD } .c-planter-urter { background: #FBEBDD } .c-planter-koekken { background: #E8F4DE } .c-planter-giftige { background: #F1E6F4 } .c-planter-vand { background: #E1F1F3 } .c-planter-aaret { background: #F4EEE4 } .c-planter-saadan { background: #E4EEF8 } .c-planter-rekord { background: #FFF3D9 }

/* Baggrundene bag Vores Demokrati-quizzens tegninger – skrives af build/quiz_art_demokrati.py */
.c-demokrati-grundlov { background: #F7EBD3 } .c-demokrati-folketinget { background: #E9EEF6 } .c-demokrati-valg { background: #E1EEF0 } .c-demokrati-regering { background: #F1ECE3 } .c-demokrati-kommune { background: #E3F0F8 } .c-demokrati-rettigheder { background: #FFF3D9 } .c-demokrati-domstole { background: #ECE6F2 } .c-demokrati-verden { background: #DDEFF8 } .c-demokrati-historie { background: #E4EEF8 } .c-demokrati-hverdag { background: #E8F4DE }

/* Baggrundene bag Vores Christiansborg-, Vores Kongefamilie- og Vores Fodboldklubber-quizzens tegninger – skrives af build/quiz_art_tre.py */
.c-christiansborg-historie { background: #E3F0F8 } .c-christiansborg-brande { background: #2F3A63 } .c-christiansborg-ruiner { background: #ECE6DA } .c-christiansborg-taarn { background: #E3F0F8 } .c-christiansborg-folketinget { background: #E9EEF6 } .c-christiansborg-kongelig { background: #F7EBD3 } .c-christiansborg-hoejesteret { background: #ECE6F2 } .c-christiansborg-stalde { background: #F6EBDD } .c-christiansborg-kirke { background: #E4EEF8 } .c-christiansborg-slotsholmen { background: #DDEFF8 }
.c-kongefamilie-kongen { background: #F7EBD3 } .c-kongefamilie-dronningen { background: #F3E7F8 } .c-kongefamilie-kronprinsen { background: #E6F1F8 } .c-kongefamilie-margrethe { background: #FFF3D9 } .c-kongefamilie-slotte { background: #E4EEF8 } .c-kongefamilie-traditioner { background: #FBE6E1 } .c-kongefamilie-raekken { background: #F7EBD3 } .c-kongefamilie-garden { background: #E3F0F8 } .c-kongefamilie-symboler { background: #FFF1D6 } .c-kongefamilie-hverdag { background: #DDEFF8 }
.c-klubber-superliga { background: #E6F1F8 } .c-klubber-kbh { background: #E3F0F8 } .c-klubber-jylland { background: #E3F0F8 } .c-klubber-oerne { background: #DDEFF8 } .c-klubber-mestre { background: #FFF3D9 } .c-klubber-pokal { background: #F7EBD3 } .c-klubber-europa { background: #E3ECF8 } .c-klubber-stadion { background: #E3F0F8 } .c-klubber-fans { background: #F1E6F4 } .c-klubber-kvinder { background: #E8F4DE }