:root {
  --bg: #F3F4F6; --flate: #FFFFFF; --flate2: #E3E7ED; --tekst: #0B0F17; --dempet: #475162; --kant: #D3D8E0;
  --gress: #2E7A3A; --p: #1747B5; --onP: #FFFFFF; --sek: #FFFFFF; --a: #7DB3FF; --onA: #0B0F17;
  --overskrift: #1747B5; --knappKant: #1747B5;
  --font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tall: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--tekst); font-family: var(--font); }
body { min-height: 100dvh; overscroll-behavior-y: none; }
/* Appen: skjermen står stille, bare innholdet i midten scrolles, menyen står fast nederst. */
body:has(> main.app) { overflow: hidden; height: 100dvh; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.app { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); background: var(--bg); }
#menyplass { flex-shrink: 0; }
.innhold { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.innhold > * { flex-shrink: 0; }

/* Topptekst */
.hode { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 10px; }
.hode > .tittel { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hode .logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; align-self: center; }
.logoflate { width: 96px; height: 96px; border-radius: 16px; border: 2px dashed var(--kant); display: flex; align-items: center; justify-content: center; padding: 8px; flex-shrink: 0; background: var(--bg); }
.logoflate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.over { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
h1 { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--overskrift); }
h2 { margin: 0 4px; font-size: 17px; font-weight: 800; color: var(--overskrift); }
.chip-info { display: flex; flex-direction: column; align-items: flex-end; padding: 8px 14px; border-radius: 14px; background: var(--flate); border: 1px solid var(--kant); flex-shrink: 0; }
.chip-info .liten { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
.chip-info .stor { font-size: 26px; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; }
.tilbake { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px; font-size: 17px; font-weight: 700; color: var(--dempet); background: none; border: 0; }

.seksjon { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 0; }
.kort { padding: 16px; border-radius: 20px; background: var(--flate); border: 1px solid var(--kant); display: flex; flex-direction: column; gap: 10px; }
.dempet { color: var(--dempet); }
.hint { margin: 0 4px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--dempet); }
.advarsel { padding: 12px 14px; border-radius: 14px; border: 2px solid var(--tekst); background: var(--flate); font-size: 15px; font-weight: 700; line-height: 1.35; }
.advarsel p { margin: 0 0 4px; }

/* Knapper */
.knapp { min-height: 56px; padding: 0 20px; border-radius: 16px; font-size: 19px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--p); color: var(--onP); border: 2px solid var(--knappKant); text-decoration: none; }
.knapp.stor { min-height: 64px; font-size: 21px; border-radius: 18px; }
.knapp.hel { width: 100%; }
.knapp.sekundar { background: transparent; color: var(--tekst); border: 2px solid var(--kant); font-weight: 700; }
.knapp.flate { background: var(--flate); color: var(--tekst); border: 2px solid var(--kant); }
.knapp:disabled { opacity: .45; }
.rad { display: flex; gap: 10px; align-items: center; }
.rad > .vokser { flex: 1; min-width: 0; }
.valg { display: flex; flex-wrap: wrap; gap: 8px; }
.valg button, .segment button { min-height: 48px; padding: 0 16px; border-radius: 14px; font-size: 17px; font-weight: 700; background: var(--flate); color: var(--tekst); border: 2px solid var(--kant); }
.valg button[aria-pressed="true"], .segment button[aria-pressed="true"] { background: var(--p); color: var(--onP); border-color: var(--knappKant); font-weight: 800; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.segment.format button { min-height: 64px; padding: 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.segment.format b { font-size: 21px; line-height: 1.1; }
.segment.format small { font-size: 12px; font-weight: 700; white-space: nowrap; }

input[type=text], input[type=number], input[type=date], input[type=time], select, textarea { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--kant); background: var(--bg); font-size: 18px; font-weight: 600; width: 100%; }
textarea { padding: 12px 14px; line-height: 1.4; resize: vertical; }
label.felt { font-size: 14px; font-weight: 700; color: var(--dempet); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--overskrift); outline-offset: 2px; }

/* Lister */
.liste { list-style: none; margin: 0; padding: 0; border-radius: 20px; overflow: hidden; background: var(--flate); border: 1px solid var(--kant); }
.liste li { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px 6px 16px; border-top: 1px solid var(--kant); }
.liste li:first-child { border-top: 0; }
.liste .navn { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bryter { width: 60px; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.bryter span { width: 54px; height: 32px; border-radius: 16px; display: flex; align-items: center; padding: 3px; background: var(--flate2); border: 2px solid var(--kant); justify-content: flex-start; }
.bryter span::after { content: ''; width: 24px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.bryter[aria-pressed="true"] span { background: var(--p); border-color: var(--knappKant); justify-content: flex-end; }
.ikonknapp { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--flate2); border: 0; color: var(--tekst); flex-shrink: 0; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 72px; padding: 0 12px 0 16px; border-top: 1px solid var(--kant); }
.stepper:first-child { border-top: 0; }
.stepper .tekst { font-size: 18px; font-weight: 700; }
.stepper .verdi { min-width: 86px; white-space: nowrap; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stepper button { width: 50px; height: 50px; flex-shrink: 0; border-radius: 14px; border: 0; background: var(--flate2); font-size: 28px; font-weight: 700; }

/* Navigasjon */
nav.meny { position: relative; z-index: 20; background: var(--flate); border-top: 1px solid var(--kant); padding: 6px 4px calc(10px + env(safe-area-inset-bottom)); }
nav.meny div { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
nav.meny button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--dempet); }
nav.meny button[aria-current="page"] { color: var(--overskrift); font-weight: 800; }

/* Kampmodus */
.perioder { display: flex; gap: 6px; }
.perioder span { flex: 1; height: 10px; border-radius: 5px; background: var(--flate2); }
.perioder span.ferdig { background: var(--overskrift); }
.perioder span.na { background: var(--overskrift); opacity: .45; }
.timer { font-family: var(--tall); font-size: clamp(96px, 34vw, 140px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.under-timer { text-align: center; font-size: 18px; font-weight: 600; color: var(--dempet); }
.varsel { margin: 10px 16px 0; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 14px; background: var(--p); color: var(--onP); border: 3px solid var(--knappKant); }
.varsel .topp { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.varsel .linje { display: flex; align-items: center; gap: 14px; }
.varsel .merke { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 76px; height: 38px; border-radius: 19px; font-size: 18px; font-weight: 800; flex-shrink: 0; }
.varsel .merke.inn { background: var(--onP); color: var(--p); }
.varsel .merke.ut { border: 2.5px solid var(--onP); }
.varsel .navn { font-size: 28px; line-height: 1.15; font-weight: 800; }
.varsel .skille { height: 2px; background: var(--onP); opacity: .25; }
.varsel .bekreft { min-height: 64px; border-radius: 16px; border: 0; background: var(--onP); color: var(--p); font-size: 22px; font-weight: 800; }
.blink { animation: blink .5s ease-in-out 6 alternate; }
@keyframes blink { from { filter: none; } to { filter: invert(1); } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; outline: 6px solid var(--tekst); } }
.nedtelling .stortall { font-family: var(--tall); font-size: 60px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--overskrift); }
.fremdrift { height: 12px; border-radius: 6px; overflow: hidden; background: var(--flate2); }
.fremdrift span { display: block; height: 100%; border-radius: 6px; background: var(--overskrift); }
.innut { display: flex; flex-direction: column; gap: 6px; font-size: 20px; font-weight: 700; }
.innut .etikett { display: inline-block; min-width: 44px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dempet); }
.kontroller { display: flex; gap: 12px; padding: 16px; position: sticky; bottom: 0; background: var(--bg); }
.kontroller .start { flex: 1; min-height: 80px; border-radius: 20px; font-size: 24px; }
.kontroller .notatknapp { width: 104px; min-height: 80px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--flate); color: var(--tekst); border: 2px solid var(--kant); font-size: 16px; font-weight: 700; }

/* Bytteskjema */
.rutenett { overflow-x: auto; }
.rutenett table { border-collapse: separate; border-spacing: 4px; width: 100%; }
.rutenett th { font-size: 13px; font-weight: 800; color: var(--dempet); text-align: center; white-space: nowrap; }
.rutenett th.na span { display: inline-block; padding: 1px 6px; border-radius: 8px; background: var(--p); color: var(--onP); }
.rutenett td.navn { font-size: 16px; font-weight: 700; white-space: nowrap; max-width: 96px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rutenett td.tid { font-size: 16px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.celle { width: 100%; min-width: 34px; height: 40px; border-radius: 8px; border: 0; background: var(--flate2); font-size: 14px; font-weight: 800; position: relative; }
.celle.pa { background: var(--p); color: var(--onP); border: 1px solid var(--knappKant); }
.celle.keeper { background: var(--a); color: var(--onA); }
.celle.last { outline: 3px dashed var(--tekst); outline-offset: -3px; }
.celle.spilt { opacity: .55; }
.bytterad { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--flate); border: 1px solid var(--kant); }
.bytterad.neste { background: var(--p); color: var(--onP); border: 2px solid var(--knappKant); }
.bytterad .t { min-width: 58px; font-family: var(--tall); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bytterad .e { font-size: 13px; font-weight: 800; text-transform: uppercase; opacity: .75; }

/* Bane */
.banerad { display: flex; gap: 10px; padding: 0 16px; }
.bane { position: relative; flex: 1; border-radius: 16px; overflow: hidden; background: var(--gress); aspect-ratio: 0.6; touch-action: none; }
.bane.stor { aspect-ratio: 0.72; }
.bane svg.linjer { position: absolute; inset: 0; width: 100%; height: 100%; }
.brikke { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; touch-action: none; }
.brikke .pille { min-height: 42px; padding: 0 14px; border-radius: 21px; display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 700; white-space: nowrap; background: var(--p); color: var(--onP); border: 3px solid var(--sek); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.brikke.keeper .pille { background: var(--a); color: var(--onA); }
.brikke .k { width: 24px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--onA); color: var(--a); margin-left: -6px; }
.brikke .rund { width: 42px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; background: var(--p); color: var(--onP); border: 3px solid var(--sek); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.brikke.keeper .rund { background: var(--a); color: var(--onA); }
.brikke .lapp { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 7px; border-radius: 8px; background: rgba(11,15,23,.8); color: #fff; font-size: 14px; font-weight: 700; }
.brikke.mal .pille, .brikke.mal .rund { outline: 3px dashed #fff; outline-offset: 4px; }
.benk { display: flex; flex-direction: column; gap: 10px; }
.benk.side { width: 112px; flex-shrink: 0; }
.benk.under { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px; }
.benkkort { padding: 10px; border-radius: 14px; background: var(--flate); border: 1px solid var(--kant); display: flex; flex-direction: column; gap: 4px; text-align: left; touch-action: none; user-select: none; -webkit-user-select: none; }
.benkkort[aria-pressed="true"] { outline: 3px solid var(--overskrift); outline-offset: 2px; }
.benkkort .navn { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.benkkort .info { font-size: 14px; font-weight: 600; color: var(--dempet); }
.benkkort .info b { color: var(--tekst); }
.benkkort .inn { white-space: nowrap; align-self: flex-start; padding: 3px 9px; border-radius: 11px; font-size: 13px; font-weight: 800; background: var(--flate2); }
.benkkort .inn.snart { background: var(--p); color: var(--onP); }
.drahjelp { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%) rotate(-5deg) scale(1.08); }
.drahjelp .pille { box-shadow: 0 14px 28px rgba(0,0,0,.45); }

/* Ark (bunnvindu) */
.ark-bak { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; }
.ark { width: 100%; max-width: 520px; max-height: 92dvh; overflow: auto; background: var(--bg); border-radius: 24px 24px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.ark h2 { margin: 0; font-size: 22px; }
.mic { width: 124px; height: 124px; border-radius: 62px; align-self: center; display: flex; align-items: center; justify-content: center; background: var(--p); color: var(--onP); border: 2px solid var(--knappKant); box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.mic[aria-pressed="true"] { background: var(--flate); color: var(--tekst); border: 4px solid var(--overskrift); }
.hurtig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hurtig button { min-height: 64px; border-radius: 16px; font-size: 18px; font-weight: 800; background: var(--flate); border: 2px solid var(--kant); }
.tolket { font-size: 24px; line-height: 1.2; font-weight: 800; }

/* Statistikk */
.fliser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.flis { padding: 12px 6px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; background: var(--flate); border: 1px solid var(--kant); }
.flis b { font-family: var(--tall); font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.flis span { font-size: 14px; font-weight: 700; color: var(--dempet); }
.tabell { width: 100%; border-collapse: collapse; }
.tabell th { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--dempet); text-align: right; padding: 6px 4px; }
.tabell th:first-child { text-align: left; }
.tabell td { border-top: 1px solid var(--kant); padding: 8px 4px; text-align: right; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tabell td:first-child { text-align: left; font-weight: 700; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-radius: 16px; background: var(--flate); border: 1px solid var(--kant); }
.resultat .score { font-family: var(--tall); font-size: 28px; font-weight: 700; }
.utfall { min-width: 78px; text-align: center; padding: 4px 8px; border-radius: 12px; font-size: 14px; font-weight: 800; border: 2px solid var(--tekst); }
.utfall.seier { background: var(--p); color: var(--onP); border-color: var(--knappKant); }
.utfall.tap { background: var(--flate2); border-color: var(--flate2); }

/* Farger */
.fargeprikk { width: 44px; height: 44px; border-radius: 22px; border: 1.5px solid rgba(0,0,0,.25); }
.palett { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.palett button { height: 48px; border-radius: 14px; border: 1.5px solid rgba(0,0,0,.25); }
.palett button[aria-pressed="true"] { outline: 3px solid var(--tekst); outline-offset: 2px; }
.forhand { padding: 16px; border-radius: 20px; background: var(--flate); border: 1px solid var(--kant); display: flex; flex-direction: column; gap: 12px; }

.melding { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; max-width: 92vw; padding: 12px 18px; border-radius: 14px; background: var(--tekst); color: var(--bg); font-size: 16px; font-weight: 700; display: flex; gap: 12px; align-items: center; }
.melding button { background: none; border: 0; color: inherit; font-weight: 800; text-decoration: underline; min-height: 40px; }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.luft { height: 16px; }

.oppmote { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; padding-bottom: 6px; }
.oppmote button { min-height: 46px; border-radius: 12px; font-size: 16px; font-weight: 700; background: var(--flate); color: var(--tekst); border: 2px solid var(--kant); }
.oppmote button[aria-pressed="true"] { background: var(--p); color: var(--onP); border-color: var(--knappKant); font-weight: 800; }

.favknapp { min-height: 32px; padding: 2px 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--overskrift); text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lagvelger { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 18px; background: var(--flate); border: 1px solid var(--kant); color: var(--tekst); }

.lagbar { display: flex; padding: 6px 12px 0; }
.lagknapp { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 0 8px; border: 0; border-radius: 12px; background: none; color: var(--dempet); font-size: 15px; font-weight: 700; }
.lagknapp .lagnavn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tekst); }
.lagknapp img, .lagknapp > span[aria-hidden] { width: 24px !important; height: 24px !important; }
.hode { padding-top: 6px; }

/* Rader med etikett til venstre og verdi til høyre (dato, sted, tid, bane) */
.radliste { border-radius: 16px; background: var(--flate); border: 1px solid var(--kant); overflow: hidden; }
.kort .radliste { background: var(--bg); }
.radfelt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px 0 16px; border-top: 1px solid var(--kant); cursor: pointer; }
.radfelt:first-child { border-top: 0; }
.radfelt .etikett { flex-shrink: 0; font-size: 17px; font-weight: 700; }
.radfelt .verdi { flex: 1; min-width: 0; text-align: right; font-size: 17px; font-weight: 600; color: var(--overskrift); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radfelt .verdi.tom { color: var(--dempet); }
.radfelt > svg { flex-shrink: 0; color: var(--dempet); }
.radfelt .radinput { flex: 1; min-width: 0; min-height: 52px; padding: 0; border: 0; background: transparent; text-align: right; font-size: 17px; font-weight: 600; color: var(--tekst); }
.radfelt .radinput:focus-visible { outline: none; }
.radfelt:focus-within { box-shadow: inset 0 0 0 3px var(--overskrift); }
.radfelt .skjult-velger { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; border: 0; padding: 0; margin: 0; -webkit-appearance: none; appearance: none; cursor: pointer; }

.radfelt .radvalg { flex: 1; min-width: 0; min-height: 52px; padding: 0; border: 0; background: transparent; text-align: right; text-align-last: right; font-size: 17px; font-weight: 600; color: var(--overskrift); -webkit-appearance: none; appearance: none; cursor: pointer; }
.radfelt .radvalg:focus-visible { outline: none; }
.radfelt .bryter { margin-right: -8px; }
.radfelt .radinput::placeholder { color: var(--dempet); font-weight: 600; }

.stepper .verdi.minutter { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.stepper .verdi.minutter input { width: 62px; min-height: 48px; padding: 0 4px; text-align: center; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; border: 2px solid var(--kant); border-radius: 12px; background: var(--bg); }
.stepper .verdi.minutter span { font-size: 15px; font-weight: 700; color: var(--dempet); }

.minisegment { flex: 1; display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--flate2); }
.minisegment button { flex: 1; min-height: 40px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--tekst); font-size: 15px; font-weight: 700; white-space: nowrap; }
.minisegment button[aria-pressed="true"] { background: var(--p); color: var(--onP); font-weight: 800; }

.privatrad { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 2px 0 8px; }
.privatvalg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--dempet); }
.privatvalg select { width: 62px; min-height: 44px; padding: 0 8px; font-size: 17px; }
.privatrad .minisegment button { font-size: 13px; padding: 0 4px; min-height: 44px; }
.lenkeknapp { display: inline; padding: 0; border: 0; background: none; color: var(--overskrift); font: inherit; font-weight: 800; text-decoration: underline; min-height: 0; }

.navnknapp { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: var(--overskrift); font: inherit; font-size: 16px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planprikk { width: 8px; height: 8px; flex-shrink: 0; border-radius: 4px; background: var(--overskrift); }

.anbefalinger { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 14px; border-top: 1px solid var(--kant); }
.anbefaling { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--kant); background: var(--bg); color: var(--tekst); text-align: left; font-size: 18px; }
.anbefaling[aria-pressed="true"] { border: 3px solid var(--overskrift); background: var(--flate); }
.anbefaling:disabled { opacity: .7; }
.merkelapp { padding: 2px 8px; border-radius: 10px; background: var(--p); color: var(--onP); font-size: 13px; font-weight: 800; }

.avkrysning { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; background: none; color: var(--tekst); font-size: 18px; font-weight: 700; text-align: left; }
.avkrysning .boks { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; border: 2px solid var(--kant); display: flex; align-items: center; justify-content: center; background: var(--bg); }
.avkrysning[aria-pressed="true"] .boks { background: var(--p); border-color: var(--knappKant); color: var(--onP); }
.avkrysning[aria-pressed="false"] span:last-child { color: var(--dempet); }

.typelapp { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 8px; background: var(--flate2); color: var(--tekst); font-size: 12px; font-weight: 800; }
.privatrad { flex-wrap: wrap; }
.privatrad .minisegment { flex-basis: 100%; }

.navnknapp svg { flex-shrink: 0; }
.tabell .navnknapp { font-size: 16px; }

/* Hjelp */
.lagbar { align-items: center; padding-right: 12px; }
.hjelpknapp { margin-left: auto; min-height: 40px; padding: 0 14px; flex-shrink: 0; border-radius: 20px; border: 2px solid var(--kant); background: var(--flate); color: var(--overskrift); font-size: 16px; font-weight: 800; }
.faq { border-radius: 16px; background: var(--flate); border: 1px solid var(--kant); }
.faq summary { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 10px 44px 10px 16px; font-size: 17px; font-weight: 800; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 16px; font-size: 24px; color: var(--overskrift); }
.faq[open] summary::after { content: '−'; }
.faqinnhold { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; font-size: 16px; line-height: 1.45; }
.faqinnhold p, .faqinnhold ol, .faqinnhold ul { margin: 0; }
.faqinnhold ol, .faqinnhold ul { padding: 0 0 0 24px; list-style: decimal; }
.faqinnhold ul { list-style: disc; }
.faqinnhold li { display: list-item; padding: 2px 0; border: 0; margin: 0; min-height: 0; background: none; }
.faqinnhold img { width: 100%; max-width: 390px; height: auto; border-radius: 14px; border: 1px solid var(--kant); align-self: center; }
.faq.nytt summary { font-size: 16px; color: var(--overskrift); }
.hjelpliste h2 { margin-top: 8px; }
input[type=search] { min-height: 52px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--kant); background: var(--flate); font-size: 18px; font-weight: 600; width: 100%; color: var(--tekst); }
.vis-meg { outline: 4px solid var(--overskrift) !important; outline-offset: 4px; border-radius: 12px; animation: vismeg 1s ease-in-out 4; }
@keyframes vismeg { 50% { outline-offset: 10px; outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .vis-meg { animation: none; } }

/* Kampprogram */
.programkort { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; margin-bottom: 10px; padding: 14px 16px; border-radius: 18px; border: 2px solid var(--kant); background: var(--flate); color: var(--tekst); text-align: left; font: inherit; }
button.programkort { cursor: pointer; }
.programkort .over { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--overskrift); }
.programkort .hoved { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.programkort .dempet { font-size: 15px; font-weight: 600; }
.programkort .lenke { display: inline-flex; align-items: center; gap: 4px; align-self: flex-end; color: var(--overskrift); font-weight: 800; font-size: 15px; }
.programkort .rad { margin-top: 8px; }
.programrad { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 64px; padding: 10px 4px; border: 0; background: none; color: var(--tekst); text-align: left; font: inherit; cursor: pointer; }
.programrad .tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.programrad .tekst .dempet { font-size: 14px; font-weight: 700; }
.programrad b { font-size: 17px; overflow-wrap: anywhere; }
.programrad .score { font-family: var(--tall); font-size: 22px; font-weight: 700; }
.faqinnhold ul.liste { list-style: none; padding: 0; }
.faqinnhold ul.liste li { display: flex; }
.programrad .merkelapp, .programrad .typelapp { display: inline-block; white-space: nowrap; }

/* Kamp: klokke, stilling og neste bytte fast øverst, banen under */
.hode.kompakt { padding-bottom: 6px; }
.hode.kompakt h1 { font-size: 26px; }
.kampstripe { position: sticky; top: 0; z-index: 15; margin: 0 0 10px; padding: 8px 16px 10px; background: var(--bg); border-bottom: 1px solid var(--kant);
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 12px; align-items: center; }
.kampstripe .klokke { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; color: var(--tekst); text-align: left; cursor: pointer; }
.kampstripe .tid { font-family: var(--tall); font-size: 48px; line-height: .95; font-weight: 700; font-variant-numeric: tabular-nums; }
.kampstripe .status { font-size: 13px; font-weight: 700; color: var(--dempet); white-space: nowrap; }
.kampstripe .liten { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); white-space: nowrap; }
.kampstripe .nestebytte { justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 4px 12px; border-radius: 14px; border: 2px solid transparent; }
.kampstripe.snart .nestebytte { border-color: var(--overskrift); background: var(--flate); }
.kampstripe .nestebytte .til { font-family: var(--tall); font-size: 34px; line-height: 1; font-weight: 700; color: var(--overskrift); font-variant-numeric: tabular-nums; }
.kampstripe .stilling { display: flex; flex-direction: column; align-items: flex-end; padding: 4px 12px; border-radius: 14px; background: var(--flate); border: 1px solid var(--kant); }
.kampstripe .stilling .stor { font-family: var(--tall); font-size: 28px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; }
.kampstripe .innutlinje { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 17px; font-weight: 700; }
.kampstripe .innutlinje .etikett { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
.kampstripe .perioder { grid-column: 1 / -1; }
.kampstripe .perioder span { height: 6px; }
.kontroller .notatknapp.mer { width: 72px; }
.kontroller .notatknapp .prikker { font-size: 30px; line-height: .8; font-weight: 800; }
.klokkeknapp { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 6px 16px 0; padding: 6px 0; border: 0; background: none; color: var(--tekst); cursor: pointer; }
.klokkeknapp .tilbake { font-size: 14px; font-weight: 700; color: var(--overskrift); }
.varsel { margin-bottom: 10px; }
.kampstripe ~ .kontroller .start, .kampstripe ~ .kontroller .notatknapp { min-height: 68px; }
.kontroller { flex-wrap: wrap; }
.statknapper { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.statknapper button { min-height: 48px; padding: 0 4px; border-radius: 14px; border: 2px solid var(--kant); background: var(--flate); color: var(--tekst); font: inherit; font-size: 15px; font-weight: 800; white-space: nowrap; }
.statknapper button:active { background: var(--flate2); }
.oppdaterer { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 700; color: var(--dempet); }
.oppdaterer::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; border: 2px solid var(--overskrift); border-right-color: transparent; vertical-align: -1px; animation: snurr .8s linear infinite; }
@keyframes snurr { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oppdaterer::before { animation: none; } }
/* Banen på Kamp: ikke høyere enn omtrent halve skjermen */
.banerad .bane { max-height: 50vh; }
.kampstripe .nestebytte .benknavn { font-size: 17px; font-weight: 800; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kampstripe { grid-template-columns: auto minmax(0, 1fr) auto; }
.kampstripe .nestebytte { min-width: 0; max-width: 100%; }
.kampstripe .nestebytte .benknavn { max-width: 100%; }
/* Ny versjon er klar */
.nyversjon { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 16px 0; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--p); color: var(--onP); font-size: 15px; font-weight: 700; }
.nyversjon button { flex-shrink: 0; min-height: 40px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--onP); color: var(--p); font: inherit; font-weight: 800; }

/* Egen bytteplan */
.egenrad { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 0; border-top: 1px solid var(--kant); background: none; color: var(--tekst); text-align: left; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.egenrad:first-child { border-top: 0; }
.egenrad .t { min-width: 46px; font-family: var(--tall); font-size: 20px; color: var(--overskrift); }
.egenrad .e { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); }
.egenrad.gjort { opacity: .55; }
.egenrad.legg { color: var(--overskrift); justify-content: center; }
.varsel .merknad { font-size: 19px; font-weight: 700; line-height: 1.3; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.14); }
.varsel .hoppover { min-height: 44px; border-radius: 14px; border: 2px solid var(--onP); background: transparent; color: var(--onP); font-size: 16px; font-weight: 800; }
.sprakknapp { flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 18px; border: 2px solid var(--kant); background: var(--flate); color: var(--tekst); font: inherit; font-size: 14px; font-weight: 700; }

/* Hendelser: liste som kan trykkes på, og enkel redigering */
.hendelsesliste { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--flate); border: 1px solid var(--kant); }
.hendelsesrad { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 0; border-top: 1px solid var(--kant); border-left: 5px solid transparent; background: none; color: var(--tekst); text-align: left; font: inherit; }
.hendelsesrad:first-child { border-top: 0; }
.hendelsesrad .tid { min-width: 46px; font-family: var(--tall); font-size: 19px; font-weight: 700; color: var(--dempet); font-variant-numeric: tabular-nums; }
.hendelsesrad .tekst { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.hendelsesrad svg { color: var(--dempet); flex-shrink: 0; }
.hendelsesrad.mal { border-left-color: #2E9E4A; }
.hendelsesrad.malMot { border-left-color: #D64545; }
.hendelsesrad.redning { border-left-color: var(--overskrift); }
.typevalg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.typevalg button { padding: 0 4px; font-size: 15px; }
.spillerknapper button { min-height: 52px; font-size: 18px; }
.gruppenavn { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); margin-bottom: -4px; }
details.flere > summary { min-height: 44px; display: flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--overskrift); cursor: pointer; }
details.flere[open] > summary { margin-bottom: 8px; }
.tidsteg { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr; gap: 6px; align-items: stretch; }
.tidsteg button { min-height: 52px; border-radius: 14px; border: 2px solid var(--kant); background: var(--flate); font-size: 15px; font-weight: 800; padding: 0 2px; }
.tidsteg input { min-width: 0; text-align: center; font-family: var(--tall); font-size: 24px; font-weight: 700; }
.arkknapper { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); margin: 0 -16px calc(-20px - env(safe-area-inset-bottom)); padding: 10px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--kant); z-index: 2; }

/* Kampreferat (livescore) */
.referat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; background: var(--flate); border: 1px solid var(--kant); }
.referattopp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.referattopp .lag { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.referattopp .lag.deres { text-align: right; }
.referattopp .stilling { font-family: var(--tall); font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.referatunder { text-align: center; font-size: 14px; font-weight: 700; color: var(--dempet); margin-bottom: 8px; }
.referatlinje { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border: 0; border-top: 1px solid var(--kant); background: none; color: var(--tekst); font: inherit; text-align: left; }
.referatlinje .min { min-width: 38px; font-family: var(--tall); font-size: 19px; font-weight: 700; color: var(--dempet); }
.referatlinje .ball { font-size: 15px; }
.referatlinje .hvem { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; display: flex; flex-direction: column; }
.referatlinje .hvem small { font-size: 14px; font-weight: 600; color: var(--dempet); }
.referatlinje.deres { flex-direction: row-reverse; text-align: right; }
.referatlinje.deres .hvem { align-items: flex-end; color: var(--dempet); }
.referatlinje.deres .min { text-align: right; }
.referatpause { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); padding: 6px 0; border-top: 1px solid var(--kant); }
.referatredn { padding-top: 8px; border-top: 1px solid var(--kant); font-size: 15px; font-weight: 600; color: var(--dempet); }
.seksjon .referat + .referat { margin-top: 10px; }
.brikke.valgt .pille, .brikke.valgt .rund { outline: 4px solid #FFD84D; outline-offset: 3px; box-shadow: 0 0 0 9px rgba(255,216,77,.35); }