/* Spot the threat. Portert fra docs/prototype.html. Ingen inline-stiler (CSP: style-src 'self'). */
:root {
  --bg: #E9EEF2; --surface: #FFFFFF; --ink: #16222E; --muted: #566573; --line: #CBD5DE;
  --buoy: #F2B636; --buoy-top: #D8432B;
  --threat: #B3361F; --threat-soft: #FBE7E2; --safe: #1C7A69; --safe-soft: #DFF3EE;
  --check: #9A5B0B; --check-soft: #FCEFD9; --focus: #2F6FDE;
  --m-bg: #FFFFFF; --m-chrome: #F4F5F7; --m-ink: #1C1C1E; --m-muted: #5B6270; --m-line: #E3E6EA;
  --m-link: #1A5FD0; --m-bubble: #E9E9EB; --m-ext: #FFF1D6; --m-ext-ink: #6B4A00;
  --m-btn: #1A5FD0; --m-btn-ink: #FFFFFF; --m-water: #8A7656; --m-sky: #B9C6CF; --m-house: #6E7881;
  --m-lock: #263544; --m-lock-ink: #F2F5F8; --m-notif: rgba(255,255,255,.88); --m-notif-ink: #1C1C1E;
  color-scheme: light; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1620; --surface: #162230; --ink: #E5ECF2; --muted: #9DAAB7; --line: #2B3A4A;
    --threat: #F2826B; --threat-soft: #3A1E19; --safe: #52C4AE; --safe-soft: #12302A;
    --check: #E8B04B; --check-soft: #3A2C12; --focus: #7FA8F5;
    --m-bg: #1C1F24; --m-chrome: #24282E; --m-ink: #ECEDEF; --m-muted: #A0A7B1; --m-line: #343A42;
    --m-link: #86B4FF; --m-bubble: #2E3238; --m-ext: #3B2F17; --m-ext-ink: #F3D08A;
    --m-btn: #2B67CC; --m-btn-ink: #FFFFFF; --m-water: #6B5C44; --m-sky: #3C4852; --m-house: #59636C;
    --m-lock: #0B1219; --m-lock-ink: #E8EDF2; --m-notif: rgba(40,46,54,.92); --m-notif-ink: #ECEDEF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1620; --surface: #162230; --ink: #E5ECF2; --muted: #9DAAB7; --line: #2B3A4A;
  --threat: #F2826B; --threat-soft: #3A1E19; --safe: #52C4AE; --safe-soft: #12302A;
  --check: #E8B04B; --check-soft: #3A2C12; --focus: #7FA8F5;
  --m-bg: #1C1F24; --m-chrome: #24282E; --m-ink: #ECEDEF; --m-muted: #A0A7B1; --m-line: #343A42;
  --m-link: #86B4FF; --m-bubble: #2E3238; --m-ext: #3B2F17; --m-ext-ink: #F3D08A;
  --m-btn: #2B67CC; --m-btn-ink: #FFFFFF; --m-water: #6B5C44; --m-sky: #3C4852; --m-house: #59636C;
  --m-lock: #0B1219; --m-lock-ink: #E8EDF2; --m-notif: rgba(40,46,54,.92); --m-notif-ink: #ECEDEF;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.page { max-width: 28rem; margin: 0 auto; padding: 1.5rem 1.1rem 3rem; }
h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .35rem; letter-spacing: -.01em; }
.lead { color: var(--muted); margin: 0 0 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.1rem; margin-bottom: 1rem; }
.card h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.card p { margin: 0 0 .75rem; }
.domain { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.note { color: var(--muted); font-size: .85rem; }
.btn { display: inline-block; padding: .75rem 1.1rem; border-radius: .8rem; border: 2px solid var(--ink); background: var(--ink); color: var(--bg); font-weight: 600; cursor: pointer; }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.round-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.round-head strong { font-weight: 600; }
.score { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.buoys { display: flex; gap: .35rem; margin-bottom: .75rem; }
.buoy { width: .8rem; height: .8rem; border-radius: 50%; border: 1.5px solid var(--muted); }
.buoy.done { background: var(--muted); }
.buoy.now { border-color: var(--buoy-top); background: linear-gradient(var(--buoy-top) 0 50%, var(--buoy) 50% 100%); transform: scale(1.25); }
.korr-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.korr-bar select { flex: 1; min-width: 0; padding: .45rem .5rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--surface); }
.inaktiv { display: inline-block; font-size: .75rem; padding: .05rem .5rem; border-radius: 999px; background: var(--check-soft); color: var(--check); margin-left: .4rem; }

.kontekst { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--muted); border-radius: .7rem; padding: .6rem .8rem; margin-bottom: .7rem; font-size: .95rem; }

/* Maler */
.mockup { position: relative; background: var(--m-bg); color: var(--m-ink); border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .95rem; }
.ovingsmerke { position: absolute; top: .5rem; right: .5rem; z-index: 2; font-size: .7rem; font-weight: 600; padding: .15rem .55rem; border-radius: 999px; background: rgba(200,208,215,.85); color: #1C1C1E; pointer-events: none; }
.m-bar { background: var(--m-chrome); border-bottom: 1px solid var(--m-line); padding: .7rem 1rem; padding-right: 7rem; display: flex; align-items: center; gap: .65rem; min-height: 3rem; }
.m-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 600; background: var(--m-line); color: var(--m-ink); overflow: hidden; }
.m-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m-muted { color: var(--m-muted); font-size: .85rem; }
.m-body { padding: 1rem; }
.m-link { border: 0; background: none; padding: 0; color: var(--m-link); text-decoration: underline; cursor: pointer; font: inherit; text-align: left; overflow-wrap: anywhere; }
.m-btnlink { display: inline-block; margin: .5rem 0; padding: .6rem 1.1rem; border-radius: .4rem; border: 0; background: var(--m-btn); color: var(--m-btn-ink); font: inherit; font-weight: 600; cursor: pointer; }
.mail-subject { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; line-height: 1.35; }
.mail-from { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1rem; }
.mail-from > div { min-width: 0; }
.addr { overflow-wrap: anywhere; }
.mail-body p { margin: 0 0 .65rem; }
.mail-file { display: inline-block; padding: .45rem .7rem; border: 1px solid var(--m-line); border-radius: .4rem; font-weight: 500; }
.qr { display: block; width: 8rem; height: 8rem; margin: .3rem 0; background: #fff; padding: .4rem; border-radius: .3rem; }
.draft-field { display: flex; gap: .5rem; border-bottom: 1px solid var(--m-line); padding: .55rem 1rem; }
.draft-field .lbl { color: var(--m-muted); flex: 0 0 3rem; }
.draft-field > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.draft-send { margin: 0 1rem 1rem; padding: .5rem 1rem; border-radius: .4rem; border: 0; background: var(--m-btn); color: var(--m-btn-ink); font-weight: 600; opacity: .9; }
.sms-head { flex-direction: column; gap: .15rem; text-align: center; padding-right: 1rem; padding-top: 1.6rem; }
.sms-thread { padding: 1rem; display: flex; flex-direction: column; gap: .4rem; min-height: 9rem; }
.sms-time { text-align: center; }
.sms-bubble { background: var(--m-bubble); padding: .6rem .8rem; border-radius: 1.1rem 1.1rem 1.1rem .3rem; max-width: 85%; }
.chat-ext-banner { background: var(--m-ext); color: var(--m-ext-ink); padding: .5rem 1rem; font-size: .85rem; }
.pill { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; background: var(--m-ext); color: var(--m-ext-ink); margin-left: .35rem; vertical-align: .1em; }
.chat-msg { display: flex; gap: .6rem; margin-bottom: .75rem; }
.chat-msg .m-avatar { width: 1.9rem; height: 1.9rem; font-size: .8rem; }
.chat-msg p { margin: .1rem 0 0; }
.call-head { flex-direction: column; text-align: center; gap: .2rem; padding: 1.6rem 1rem 1rem; }
.call-head .m-avatar { width: 3.2rem; height: 3.2rem; font-size: 1.4rem; }
.call-merknad { font-style: italic; color: var(--m-muted); margin: 0 0 .7rem; }
.call-line { background: var(--m-bubble); padding: .6rem .8rem; border-radius: .9rem; margin-bottom: .5rem; }
.lock { background: var(--m-lock); color: var(--m-lock-ink); padding: 2.2rem 1rem 1.4rem; text-align: center; min-height: 15rem; }
.lock-clock { font-size: 3.2rem; font-weight: 300; line-height: 1; margin: 0 0 .2rem; }
.lock-date { font-size: .9rem; opacity: .8; margin-bottom: 1.2rem; }
.notif { background: var(--m-notif); color: var(--m-notif-ink); border-radius: 1rem; padding: .65rem .8rem; text-align: left; margin: 0 auto .5rem; max-width: 22rem; }
.notif-head { display: flex; justify-content: space-between; font-size: .78rem; opacity: .75; margin-bottom: .15rem; }
.notif-stack { font-size: .8rem; margin-top: .3rem; }
.post-head { display: flex; gap: .65rem; align-items: center; margin-bottom: .6rem; }
.post-head > div { min-width: 0; }
.post-img { display: block; width: 100%; height: auto; border-radius: .6rem; margin: .65rem 0; }
.post-foot { display: flex; justify-content: space-between; border-top: 1px solid var(--m-line); padding-top: .6rem; }
.url-bar { display: flex; align-items: center; gap: .4rem; background: var(--m-bg); border: 1px solid var(--m-line); border-radius: 999px; padding: .35rem .8rem; width: 100%; font-size: .85rem; }
.news-mast { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; padding: .8rem 1rem 0; }
.news-title { font-size: 1.3rem; line-height: 1.25; margin: .25rem 0 .6rem; font-weight: 700; }
.news-lead { margin: 0 0 .6rem; }
.foto img { display: block; width: 100%; height: auto; }
.foto-plass { display: grid; place-items: center; text-align: center; aspect-ratio: 4 / 3; padding: 1.2rem; border: 2px dashed var(--m-line); margin: .8rem; border-radius: .8rem; color: var(--m-muted); font-size: .88rem; }
.foto-plass strong { display: block; color: var(--m-ink); margin-bottom: .3rem; }
.peekbar { display: flex; gap: .5rem; align-items: center; margin: .8rem; padding: .55rem .8rem; border-radius: 999px; background: var(--m-chrome); border: 1px solid var(--m-line); font-size: .9rem; }

[data-flag].flagged { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: .25rem; background-color: var(--mark-soft); }
[data-flag].flagged::after { content: attr(data-n); display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-left: .3rem; border-radius: 50%; background: var(--mark); color: var(--m-bg); font: 600 .7rem/1 system-ui, sans-serif; vertical-align: .15em; }
.post-img.flagged::after, .qr.flagged::after { content: none; }
.img-wrap { position: relative; }
.img-wrap .img-badge { position: absolute; top: 1.1rem; right: .5rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--mark); color: var(--m-bg); font-weight: 600; font-size: .8rem; }
.is-threat { --mark: var(--threat); --mark-soft: var(--threat-soft); }
.is-safe { --mark: var(--safe); --mark-soft: var(--safe-soft); }
.is-check { --mark: var(--check); --mark-soft: var(--check-soft); }

.peek { margin-top: .6rem; padding: .65rem .85rem; border-radius: .75rem; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; }
.peek code { overflow-wrap: anywhere; font-size: .9rem; }
.peek button { border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; margin-top: .25rem; }

.ask { margin-top: 1.1rem; }
.ask h2 { font-size: 1.1rem; margin: 0 0 .6rem; font-weight: 600; }
.answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.answers button { padding: .8rem .3rem; border-radius: .9rem; font-weight: 600; font-size: 1rem; cursor: pointer; background: var(--surface); border: 2px solid var(--line); line-height: 1.2; }
.answers [data-v="trygg"] { border-color: var(--safe); }
.answers [data-v="trussel"] { border-color: var(--threat); }
.answers [data-v="sjekk"] { border-color: var(--check); }
.answers button[aria-pressed="true"] { color: var(--surface); }
.answers [data-v="trygg"][aria-pressed="true"] { background: var(--safe); }
.answers [data-v="trussel"][aria-pressed="true"] { background: var(--threat); }
.answers [data-v="sjekk"][aria-pressed="true"] { background: var(--check); }
.answers button:disabled { cursor: default; }
.answers button:disabled:not([aria-pressed="true"]) { opacity: .45; }
.verdict { margin-top: .9rem; padding: .7rem .9rem; border-radius: .8rem; background: var(--mark-soft); border-left: 4px solid var(--mark); }
.verdict strong { color: var(--mark); }
.tiltak-list { display: grid; gap: .5rem; }
.tiltak-list button { display: flex; gap: .7rem; align-items: flex-start; text-align: left; padding: .75rem .85rem; border-radius: .9rem; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.tiltak-list .ikon { font-size: 1.3rem; line-height: 1.2; }
.tiltak-list .navn { display: block; font-weight: 600; }
.tiltak-list .besk { display: block; color: var(--muted); font-size: .88rem; }
.tiltak-list button.riktig { border-color: var(--safe); background: var(--safe-soft); }
.tiltak-list button.feil { border-color: var(--threat); background: var(--threat-soft); }
.tiltak-list button:disabled { cursor: default; }
.tiltak-list button:disabled:not(.riktig):not(.feil) { opacity: .45; }
.reveal { margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; background: var(--surface); border: 1px solid var(--line); overflow-wrap: anywhere; }
.reveal h3 { margin: 0 0 .4rem; font-size: 1.1rem; }
.reveal p { margin: 0 0 .75rem; }
.reveal h4 { margin: 0 0 .35rem; font-size: 1rem; }
.reveal ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.reveal li { margin-bottom: .25rem; }
.reveal ol li::marker { color: var(--mark); font-weight: 700; }
.dev { margin-top: 1.5rem; }
.dev summary { cursor: pointer; color: var(--muted); }
.dev pre { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; padding: .85rem; overflow-x: auto; font-size: .78rem; line-height: 1.45; max-width: 100%; }
.big-score { font-size: 2.6rem; font-weight: 700; line-height: 1; margin: .2rem 0 .4rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0 1rem; }
.stats div { background: var(--bg); border-radius: .7rem; padding: .6rem .7rem; }
.stats b { display: block; font-size: 1.3rem; }
.stats span { color: var(--muted); font-size: .85rem; }
.end h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
.end ul { margin: 0; padding-left: 1.2rem; }
.end li { margin-bottom: .3rem; }
@media (prefers-reduced-motion: no-preference) {
  .reveal, .verdict, #tiltak { animation: rise .25s ease-out; }
  @keyframes rise { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
}

/* ---- Tillegg til prototypen ---- */
.visuelt-skjult { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.round-head h2 { font-size: 1rem; font-weight: 600; margin: 0; }
.round-head h2:focus { outline: none; }
.round-head h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.m-who { min-width: 0; }
.sosial-body { padding-top: 2rem; }
.post-tekst { margin: 0; }
.news-tid { margin: 0; }
.news-andre { margin: .6rem 0 0; }
.mockup.er-bilde { background: var(--surface); }
.end-actions { margin-top: 1.2rem; }
.score-enhet { margin: 0; }
.draft-send:disabled { cursor: default; }

.feilmelding { margin-top: 1rem; padding: .8rem 1rem; border-radius: .8rem; background: var(--threat-soft); border-left: 4px solid var(--threat); }
.feilmelding p { margin: 0 0 .6rem; }
.feilmelding .btn { padding: .5rem .9rem; }

.topplisteinfo { background: var(--bg); border-radius: .7rem; padding: .7rem .8rem; margin: 0 0 1rem; }
.topplisteinfo p { margin: 0; }
.kallenavn { font-weight: 600; }

.korr-merker { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.korr-merke { display: inline-block; font-size: .75rem; font-weight: 500; padding: .05rem .5rem; border-radius: 999px; background: var(--check-soft); color: var(--check); }
.korr-merke.ikke-godkjent { background: var(--threat-soft); color: var(--threat); }

.qr-side .lenke-knapp { display: inline-block; text-decoration: none; }
a { color: var(--focus); }

/* Nummermerket på kontoblokken i sosial-malen legges i hjørnet, ikke på egen linje. */
.post-head > [data-flag].flagged { position: relative; }
.post-head > [data-flag].flagged::after { position: absolute; bottom: -.55rem; right: -.55rem; margin: 0; }

/* Markerte knapper beholder sin egen bakgrunn, ellers blir hvit tekst lite lesbar. */
.m-btnlink.flagged { background-color: var(--m-btn); }

/* Stor tekst (150–200 %): svarknappene går over flere rader i stedet for å
   presse seg ut av siden, og lange adresser brytes i stedet for å klippes. */
.answers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
.answers button { overflow-wrap: anywhere; }
.peekbar { border-radius: 1rem; }
.peekbar > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mockup { overflow-wrap: anywhere; }
.m-bar { padding-right: min(7rem, 40%); }
.korr-bar { flex-wrap: wrap; }
.round-head { flex-wrap: wrap; row-gap: .2rem; }
.round-head h2 { min-width: 0; overflow-wrap: anywhere; }
.tiltak-list { grid-template-columns: minmax(0, 1fr); }
.tiltak-list button > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.fullpott { margin: .9rem 0 1rem; padding: .8rem 1rem; border-radius: .8rem; background: var(--safe-soft); border-left: 4px solid var(--safe); }
.fullpott p { margin: 0; }
.fullpott strong { color: var(--safe); }

/* ---- Standskjerm (/skjerm): stor skjerm i liggende format ---- */
body.skjerm { font-size: clamp(1rem, min(1.35vw, 2.4vh), 2.2rem); }
.skjerm-side { display: grid; grid-template-columns: 1fr; gap: 1em 1.5em; padding: 1em 2em; min-height: 100vh; box-sizing: border-box; }
@media (min-width: 900px) {
  .skjerm-side { grid-template-columns: 2fr 1fr; grid-template-rows: auto 1fr auto; }
  .skjerm-topp, .skjerm-status { grid-column: 1 / -1; }
}
.skjerm-topp { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5em 2em; }
.skjerm-topp h1 { font-size: 2.2em; margin: 0; }
.skjerm-dato { font-size: 1.2em; color: var(--muted); margin: 0; }
.skjerm-liste, .skjerm-fullpott { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1em 1.25em; }
.skjerm-liste h2, .skjerm-fullpott h2 { font-size: 1.3em; margin: 0 0 .6em; }
.skjerm-liste table { width: 100%; border-collapse: collapse; font-size: 1.15em; }
.skjerm-liste th { text-align: left; color: var(--muted); font-weight: 600; font-size: .75em; padding: 0 .4em .4em; border-bottom: 1px solid var(--line); }
.skjerm-liste td { padding: .25em .4em; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.skjerm-liste .plass { width: 3.5em; font-weight: 700; }
.skjerm-liste .tall { text-align: right; font-variant-numeric: tabular-nums; }
.skjerm-tom { font-size: 1.2em; color: var(--muted); }
.skjerm-fullpott p { margin: 0 0 .6em; }
.skjerm-tall { font-size: 4em; font-weight: 800; line-height: 1; color: var(--safe); margin: .1em 0 .3em !important; }
.skjerm-spillere { color: var(--muted); }
.skjerm-status { color: var(--muted); font-size: .8em; }
.skjerm-status.feil { color: var(--check); }

/* ---- Statistikk (/statistikk) ---- */
.page.bred { max-width: 64rem; }
.periode { margin-bottom: 1rem; }
.periode label { display: inline-flex; gap: .4rem; align-items: center; }
.periode input { font: inherit; padding: .4rem .5rem; border-radius: .5rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.tabell-tittel { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.tabell-ramme { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; }
.tabell { width: 100%; border-collapse: collapse; }
.tabell tbody tr:last-child td { border-bottom: 0; }
.tabell th, .tabell td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: anywhere; }
.tabell th { color: var(--muted); font-weight: 600; font-size: .9rem; }
.tabell .tall { text-align: right; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .page.bred .stats { grid-template-columns: repeat(4, 1fr); } }

/* ---- Forklaringssiden etter sikkerhetsuken (bygg med --etter-uken) ---- */
.etter-uken h1 { margin-bottom: 1.25rem; }
.etter-uken ul { margin: 0; padding-left: 1.2rem; }
.etter-uken li { margin-bottom: .4rem; }

/* Kallenavnet: tydelig etter runde null, diskret i toppen under spillet. */
.kallenavn-intro { padding: .6rem .8rem; border-radius: .7rem; background: var(--bg); }
.topp-status { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: .1rem .4rem; min-width: 0; }
.spiller { color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.skille { color: var(--muted); font-size: .9rem; }