/* Ny lobby på web og i Capacitor-appen — bryter og designgrunnmur
   (BIN-2092, lobbyen på spillorama.no fase 2 A1).

   Bryteren er `data-lobby-design` på <html>, satt av theme-fouc.js før første
   paint: "ny" bare når flagget er på OG enheten ikke er en hallterminal,
   ellers "dagens". ALLE regler her er avgrenset under
   html[data-lobby-design="ny"] — hallterminalen og dagens lobby treffes av null
   regler og ser nøyaktig ut som før.

   Avgrensningen går helt ned til lobbyen: bortsett fra token-blokka (som bare
   deklarerer --ln-* på <html>) starter hver selektor med
   html[data-lobby-design="ny"] .lobby-screen. Spillene (#web-game-container)
   og spillbaren (#lobby-back-bar, .game-bar-*) er søsken av lobbyen og nevnes
   aldri her, heller ikke body eller :root — ellers endrer "ny" Spill 1–3 og
   spillbaren på web og i appen. webShellLobbyDesign.static.test.ts håndhever
   alt dette; trenger A2 en ny lobbyrot, legges den i LOBBY_ROOTS der.

   Fila rører aldri spillenes tema: ingen variabler eller selektorer fra
   theme.css (Spill 1–3 leser dem). Den nye lobbyen har sitt eget token-lag,
   --ln-*. Lenket som siste stilark i <head>, etter inline-CSS-en og
   responsive-accessibility.css, så den vinner ved lik spesifisitet.

   A2 (selve den nye lobbyvisningen) bygger videre her. */

/* ── Fonter ──────────────────────────────────────────────────────────────
   Anton er kopiert byte for byte fra apps/marketing-web/public/fonts/ (apper
   kryss-importerer aldri; drift-testen låser hash og unicode-range mot kilden).
   Egen familie «LN Anton»: spillklienten har sin egen «Anton» (Fargekladden,
   bonushjulet), og en global «Anton» her kunne blandet seg inn i den — også på
   terminalen. Nettleseren laster bare ned en @font-face som faktisk brukes, så
   filene hentes bare i den nye lobbyen.
   Inter kopieres ikke: skallet har allerede variabel Inter 100–900
   (fonts/fonts.css), med samme familienavn som marketing-web bruker. */
@font-face {
  font-family: "LN Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/web/fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: "LN Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/web/fonts/anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Token-laget ─────────────────────────────────────────────────────────
   Eksakt kopi av apps/marketing-web/src/styles/tokens.css med prefikset
   --ln- (eneste avvik: visningsfonten heter «LN Anton», se over). Endres
   tokens der, endres de her i samme PR — drift-testen feiler ellers. */
html[data-lobby-design="ny"] {
  /* Merkefarger */
  --ln-brand-burgundy: #6a2330;
  --ln-brand-burgundy-deep: #451623;
  --ln-brand-burgundy-deepest: #280d13;
  --ln-brand-gold: #ffd76a;
  --ln-brand-gold-deep: #e6a817;
  --ln-brand-cream: #fff4d6;

  /* Grunnflater og tekst */
  --ln-bg: #f8f6f3;
  --ln-surface: #fff;
  --ln-text: #2a1218;
  --ln-text-soft: #6b5a5e;
  --ln-cta: #c5333d;
  --ln-positive: #1e7e45;

  /* Per-spill-aksenter (hvert spill: aksent + pastell-tvilling) */
  --ln-game-papirbingo: #8a2a3a;
  --ln-game-papirbingo-pastel: #f9e9ec;
  --ln-game-lynbingo: #690c11;
  --ln-game-lynbingo-gold: #f2ca6a;
  --ln-game-lynbingo-pastel: #fdeee6;
  --ln-game-superbingo: #6d1a1e;
  --ln-game-superbingo-green: #4ad490;
  --ln-game-superbingo-pastel: #e8f8ef;
  --ln-game-spinngo: #0e6b3a;
  --ln-game-spinngo-red: #dc2626;
  --ln-game-spinngo-pastel: #e7f3ec;
  --ln-game-candy: #d63384;
  --ln-game-candy-pastel: #fce8f1;
  --ln-game-hall: #5f6a72;
  --ln-game-hall-pastel: #eef1f4;

  /* Bongfargene (dekor-element, kjent for kundene) */
  --ln-ball-red: #c5333d;
  --ln-ball-blue: #2f5fa8;
  --ln-ball-green: #1e7e45;
  --ln-ball-purple: #6d4a9e;
  --ln-ball-yellow: #ffd76a;

  /* Typografi */
  --ln-font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ln-font-display: "LN Anton", Inter, system-ui, sans-serif;

  /* Form og flater (piller, 12–16 px kort-radius, skygge kun ved hover) */
  --ln-radius-card: 14px;
  --ln-radius-pill: 9999px;
  --ln-shadow-hover: 0 6px 24px rgb(42 18 24 / 14%);
  --ln-shadow-raised: 0 2px 10px rgb(42 18 24 / 8%);

  /* Layout */
  --ln-container-max: 1200px;
  --ln-topbar-height: 64px;
}

/* ── Basisflate ──────────────────────────────────────────────────────────
   Lys flate bak lobbyen. Toppbaren beholder sin egen bakgrunn og tekstfarge
   (den arver fargen fra .lobby-screen, som derfor ikke settes her); bare
   innholdsflaten og tekst som står rett på den får mørk tekst. Dagens
   spillkort står urørt til A2 erstatter dem. */
html[data-lobby-design="ny"] .lobby-screen {
  background: var(--ln-bg);
  font-family: var(--ln-font-body);
  color-scheme: light;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-main {
  color: var(--ln-text);
}

html[data-lobby-design="ny"] .lobby-screen :is(.lobby-loading, .lobby-empty, .lobby-open-count) {
  color: var(--ln-text-soft);
}

html[data-lobby-design="ny"] .lobby-screen .lobby-error {
  color: var(--ln-cta);
}

/* ── Temavelgerne ────────────────────────────────────────────────────────
   Tobias-vedtak tor 01.10: den nye lobbyen er en lys flate, og fargetemaet
   velges i spillene. Lobbyens to velgere skjules derfor: toppbarens
   (#theme-picker-lobby) og den i mobilens hallrad (#theme-picker-lobby-mobile,
   BIN-4661). Begge ligger inne i #lobby-screen.
   Spillbarens velger (#theme-picker-game) ligger i #lobby-back-bar, utenfor
   lobbyen, og nevnes aldri her: den virker som før i Spill 1–3, og det valgte
   temaet (eid av theme-fouc.js/theme.js) gjelder fortsatt i spillene.
   theme.js bygger alle tre velgerne som før; menyene er body-montert og åpnes
   bare fra knappen, som her ikke vises.
   Spesifisitet (1,2,1) slår #theme-picker-lobby-mobile { display: flex } (1,0,0)
   i responsive-accessibility.css — låst av webShellLobbyDesign.static.test.ts. */
html[data-lobby-design="ny"] .lobby-screen #theme-picker-lobby,
html[data-lobby-design="ny"] .lobby-screen #theme-picker-lobby-mobile {
  display: none;
}

/* ── Desktop ≥1501×761 ───────────────────────────────────────────────────
   Dagens lobby fyller skjermen uten scroll og skjuler varslingsbjella i denne
   blokka (inline-CSS-en i index.html, vedtak 02.08 — gjelder terminalen og
   står urørt). Den nye lobbyen er en side som scroller (lobbyskjermen er
   rullebeholderen på alle bredder, se «Rulling» lenger ned): rutenettet får
   innholdshøyde (ellers presses alt inn i skjermhøyden og det finnes aldri
   noe å scrolle til), og bjella er tilbake.
   Selektorene her (0,3,1 / 1,2,1) slår blokkas (0,1,0 / 1,1,0). */
@media (min-width: 1501px) and (min-height: 761px) {
  html[data-lobby-design="ny"] .lobby-screen .lobby-game-grid {
    flex: 0 0 auto;
    grid-auto-rows: auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .lobby-tile {
    height: auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .lobby-tile-icon {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    max-height: none;
  }

  html[data-lobby-design="ny"] .lobby-screen #lobby-notification-btn {
    display: flex;
  }
}

/* ══ A2: spillene i den nye lobbyen (lobby-web.js) ══════════════════════════
   Fasit: lerretet «Lobbyen på spillorama.no» (Lobby-innlogget-mobil/-desktop,
   Venter-mobil) og GRUNNLAG.md §1 (farger), §3 (mål og rutenett) og §4.8–4.9
   (kortet). lobby-web.js lager elementene (klassene .ln-*) bare under "ny";
   dagens fliser (.lobby-tile) og terminalen treffes ikke av noe her.
   Fargene som ikke finnes i token-laget, står som hex fra GRUNNLAG.md. */

/* Tema-støyen (fraktal-støy over lobbyflaten, theme.css) er laget for de
   mørke temaflatene. Den nye lobbyen er lys og eier ikke temaet. */
html[data-lobby-design="ny"] .lobby-screen::before {
  content: none;
}

/* Dagens overskriftsrad («Velg spill · N åpne») erstattes av «Spillene» fra
   lobby-web.js. Elementene står (lobby.js skriver fortsatt telleren). */
html[data-lobby-design="ny"] .lobby-screen .lobby-mobile-heading-row {
  display: none;
}

/* Innholdsflaten: 1 160 px innhold på desktop (GRUNNLAG.md §3: max-width
   1 200 px med 20 px padding), 16 px marg på mobil.
   A4: flaten går i full bredde, og margen («gutter») ligger i sidepaddingen.
   Bunnen (.ln-footer) står rett etter flaten og bruker NØYAKTIG samme
   uttrykk som padding (desktop: 100vw i begge, så de går opp i opp også med
   rullefelt). Ingen bunnpadding — bunnen står rett under innholdet. */
html[data-lobby-design="ny"] .lobby-screen .lobby-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

/* ── Overskriften «Spillene» ── */
html[data-lobby-design="ny"] .lobby-screen .ln-games-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 16px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-games-title {
  margin: 0;
  color: var(--ln-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

html[data-lobby-design="ny"] .lobby-screen .ln-games-intro {
  margin: 0;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Rutenettet: én kolonne på mobil, to på nettbrett, tre på desktop.
   Papir Bingo er flaggskipet (2 × 2 på desktop). `dense` fyller hullene når
   et spill er skrudd av, så første rad aldri står med et tomt felt. ── */
html[data-lobby-design="ny"] .lobby-screen .lobby-game-grid {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row dense;
  grid-auto-rows: auto;
  align-content: start;
  align-items: stretch;
  gap: 16px;
  min-height: auto;
}

/* ── Kortet ── */
html[data-lobby-design="ny"] .lobby-screen .ln-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ece6e0;
  border-radius: var(--ln-radius-card);
  background: var(--ln-surface);
  box-shadow: var(--ln-shadow-raised);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  box-sizing: border-box;
  background: linear-gradient(160deg, #78858e, #5f6a72);
  color: #fff;
}

/* Hodets gradient per spill (GRUNNLAG.md §1.2; SpinnGo og Candy er justert
   for 4,5:1 med hvit tekst). */
html[data-lobby-design="ny"] .lobby-screen .ln-card--papir .ln-card-head {
  background: linear-gradient(160deg, #8a2a3a, #5c1c28);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card--lyn .ln-card-head {
  background: linear-gradient(160deg, #8c1218, #690c11);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card--super .ln-card-head {
  background: linear-gradient(160deg, #8a2328, #6d1a1e);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card--spinngo .ln-card-head {
  background: linear-gradient(160deg, #0e6b3a, #0a5530);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card--candy .ln-card-head {
  background: linear-gradient(160deg, #b0236b, #8f1c57);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card--j10k .ln-card-head {
  background: linear-gradient(160deg, #6a4aa8, #4a2f7a);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-head-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/* Statusmerket på kortets hode. */
html[data-lobby-design="ny"] .lobby-screen .ln-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--ln-radius-pill);
  background: rgb(40 13 19 / 38%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

html[data-lobby-design="ny"] .lobby-screen .ln-pill-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9bdc0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-pill--open .ln-pill-dot {
  background: #7be09a;
}

html[data-lobby-design="ny"] .lobby-screen .ln-pill--live .ln-pill-dot {
  background: #ff8a8a;
}

html[data-lobby-design="ny"] .lobby-screen .ln-pill--opens .ln-pill-dot {
  background: var(--ln-brand-gold);
}

/* Bildet (Tobias-regel tor 01.10, FORMAT-REGLER «Spillbilder» og GRUNNLAG.md
   §3): alle bilderammer for spill er 16:9 og viser hele bildet uten zoom —
   spillbildene lages i 1920 × 1080. Bildet er cover og sentrert, aldri
   transform/scale og aldri en egen object-position per spill.
   ETT unntak (Tobias 01.10 ca. kl. 14:45): Papir Bingo beholder formatet sitt.
   På desktop fyller flaggskipets bilde 2 × 2-kortet, med motivet øverst (se
   @media (min-width: 901px) under). På mobil og nettbrett er det 16:9 som de
   andre. Låst av webShellLobbyWebRenderer.dom.test.ts («spillbilder: …»). */
html[data-lobby-design="ny"] .lobby-screen .ln-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ln-brand-burgundy-deepest);
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-img[hidden] {
  display: none;
}

/* Papir Bingo: trekningen pågår (live-linjen under bildet). */
html[data-lobby-design="ny"] .lobby-screen .ln-card-live {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid #f0e3bd;
  background: #fdf4e0;
  color: #7a5a10;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ln-cta);
  box-shadow: 0 0 0 3px rgb(197 51 61 / 18%);
}

/* Radene. */
html[data-lobby-design="ny"] .lobby-screen .ln-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-desc {
  margin: 0;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-row-value {
  min-width: 0;
  color: var(--ln-text);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Flaggskipets beskrivelse og «Spilles»-raden vises bare på desktop, der
   kortet er 2 × 2 (Lobby-innlogget-desktop.dc.html). */
html[data-lobby-design="ny"] .lobby-screen .ln-card-wide-only,
html[data-lobby-design="ny"] .lobby-screen .ln-card-body--wide-only {
  display: none;
}

/* Handlingene: egne knapper og 18+ ved hver CTA. */
html[data-lobby-design="ny"] .lobby-screen .ln-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding: 0 16px 16px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-media + .ln-card-actions,
html[data-lobby-design="ny"] .lobby-screen .ln-card-live + .ln-card-actions,
html[data-lobby-design="ny"] .lobby-screen .ln-card-body--wide-only + .ln-card-actions {
  padding-top: 16px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 2px solid var(--ln-cta);
  border-radius: var(--ln-radius-pill);
  background: var(--ln-cta);
  color: #fff;
  font-family: var(--ln-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-btn--primary:hover {
  border-color: #a92832;
  background: #a92832;
}

html[data-lobby-design="ny"] .lobby-screen .ln-btn--outline {
  border-color: var(--ln-brand-burgundy);
  background: transparent;
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-btn--outline:hover {
  background: var(--ln-game-papirbingo-pastel);
}

/* Papir Bingo har to knapper: smalere luft så begge får plass på 360 px. */
html[data-lobby-design="ny"] .lobby-screen .ln-card--papir .ln-btn {
  padding: 0 12px;
}

/* Sperret: deaktivert med hengelås (Venter-mobil.dc.html). #6e5f63 på
   #ece6e0 er 4,87:1 (GRUNNLAG.md §1.4). */
html[data-lobby-design="ny"] .lobby-screen .ln-btn:disabled {
  border-color: #ece6e0;
  background: #ece6e0;
  color: #6e5f63;
  cursor: not-allowed;
}

html[data-lobby-design="ny"] .lobby-screen .ln-age {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 2px solid #b3261e;
  border-radius: var(--ln-radius-pill);
  background: #fff;
  color: #b3261e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-card-lock {
  margin: 0;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.4;
}

/* ── Sperrebeskjedene over spillene (lobby.js eier innholdet) ──
   Sperre (§ 66, pause, utestengt): rosa flate. «Vi vet ikke»: nøytral grå —
   aldri rød, det er ikke en sperre. Legitimering: ventevarselets krem-flate
   (GRUNNLAG.md §1.1 «Funksjonsflater»). `display` settes ikke her: [hidden]
   skal fortsatt skjule dem. */
html[data-lobby-design="ny"] .lobby-screen .lobby-compliance-warning {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid #ebc0c0;
  border-radius: 12px;
  background: #fbeaea;
  color: #6e1b22;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-compliance-warning--unknown {
  border-color: #d6dde3;
  background: #eef1f4;
  color: #4b555c;
  font-weight: 500;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-compliance-retry {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--ln-brand-burgundy);
  border-radius: var(--ln-radius-pill);
  background: transparent;
  color: var(--ln-brand-burgundy);
  font-family: var(--ln-font-body);
  font-size: 14px;
  font-weight: 600;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-banner {
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid #f0dc9c;
  border-radius: var(--ln-radius-card);
  background: var(--ln-brand-cream);
  color: var(--ln-text);
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-banner-title {
  margin: 0 0 6px;
  color: var(--ln-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-banner-text {
  margin: 0 0 12px;
  color: var(--ln-text);
  font-size: 15px;
  line-height: 1.55;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-banner-facts {
  gap: 8px 22px;
  color: var(--ln-text);
  font-size: 14px;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-fact-k {
  color: var(--ln-text-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-legit-banner-map {
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  border: 2px solid var(--ln-brand-gold);
  border-radius: var(--ln-radius-pill);
  background: var(--ln-brand-gold);
  color: var(--ln-brand-burgundy-deepest);
  font-family: var(--ln-font-body);
  font-size: 14px;
  font-weight: 700;
}

/* ══ A3/A4: tall på kortene, spillevett-kortet og bunnen ════════════════════
   Fasit: Lobby-innlogget-mobil/-desktop og Venter-mobil på lerretet,
   GRUNNLAG.md §4.12 (spillevett), §4.14 (bunnen) og §1 (farger). */

/* Beløp i radene står med tabelltall, så prisene ikke danser. */
html[data-lobby-design="ny"] .lobby-screen .ln-card-row--prices .ln-card-row-value {
  font-variant-numeric: tabular-nums;
}

/* Bare for skjermleser: «(åpnes i ny fane)» etter eksterne lenker. */
html[data-lobby-design="ny"] .lobby-screen .ln-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Spillevett-kortet (rett etter spillene) ── */
html[data-lobby-design="ny"] .lobby-screen .ln-spillevett {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 32px 0 0;
  padding: 18px 20px;
  border: 1.5px solid #ece6e0;
  border-radius: var(--ln-radius-card);
  background: var(--ln-surface);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ln-game-papirbingo-pastel);
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-text {
  flex: 1 1 240px;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-title {
  margin: 0;
  color: var(--ln-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-rule {
  margin: 2px 0 0;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.5;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-usage {
  margin: 10px 0 6px;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-usage b {
  color: var(--ln-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Måleren er pynt (aria-hidden): teksten over sier tallene. */
html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #ece6e0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ln-brand-gold-deep), var(--ln-brand-gold));
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--ln-brand-burgundy);
  border-radius: var(--ln-radius-pill);
  background: transparent;
  color: var(--ln-brand-burgundy);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-link-btn:hover {
  background: var(--ln-game-papirbingo-pastel);
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-pause,
html[data-lobby-design="ny"] .lobby-screen .ln-helpline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--ln-brand-burgundy);
  font-size: 14px;
  font-weight: 700;
}

html[data-lobby-design="ny"] .lobby-screen .ln-spillevett-pause {
  text-decoration: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-helpline {
  gap: 8px;
  text-decoration: underline;
}

html[data-lobby-design="ny"] .lobby-screen .ln-helpline-icon {
  display: inline-flex;
  flex: none;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-link-btn, .ln-spillevett-pause, .ln-helpline):focus-visible {
  border-radius: var(--ln-radius-pill);
}

/* ── Bunnen: rett etter innholdet (<main>), mørk og kant til kant ──
   Bunnen står i #lobby-screen, ikke i main (lobby-web.js renderFooter), så den
   går i full bredde av seg selv. Samme gutter som .lobby-main (se der) som
   padding, så innholdet i bunnen står i flukt med spillene. flex 1 0 auto:
   når siden er kort, fyller den mørke flaten resten av høyden, som på
   lerretet. */
html[data-lobby-design="ny"] .lobby-screen .ln-footer {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 14px;
  margin: 32px 0 0;
  padding: 24px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left));
  background: var(--ln-brand-burgundy-deepest);
  color: var(--ln-brand-cream);
  font-family: var(--ln-font-body);
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

/* Merkeplaten (tillit-merker.js): egen rad øverst på mobil. Tom til begge
   PR-ene er landet — da tar den ingen plass. */
html[data-lobby-design="ny"] .lobby-screen .ln-footer-merker {
  flex: 0 0 100%;
  min-width: 0;
  margin-bottom: 4px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-merker:empty {
  display: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-merker .tillit-merker-rad {
  justify-content: flex-start;
  margin: 0;
}

/* tillit-merker.js setter også en plate sist i lobbyens innhold. I den nye
   lobbyen står platen i bunnen (GRUNNLAG.md §4.14: «I lobbyen … står logoene
   bare i bunnen»), så den raden skjules her. Dagens lobby beholder den. */
html[data-lobby-design="ny"] .lobby-screen .tillit-merker-rad--lobby {
  display: none;
}

/* Logoen har hvitt ordmerke og står rett på den mørke bunnen (GRUNNLAG.md §3). */
html[data-lobby-design="ny"] .lobby-screen .ln-footer-logo {
  display: block;
  width: auto;
  height: 18px;
}

/* 18+ på mørk flate: gull uten kant. */
html[data-lobby-design="ny"] .lobby-screen .ln-age--dark {
  min-width: 32px;
  height: 32px;
  border: 0;
  background: var(--ln-brand-gold);
  color: var(--ln-brand-burgundy-deepest);
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-help {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ln-brand-cream);
  font-weight: 700;
  text-decoration: underline;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ln-brand-cream);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

html[data-lobby-design="ny"] .lobby-screen .ln-footer-link:hover {
  text-decoration: underline;
}

/* #d8cab3 på #280d13 er 11,25:1 (GRUNNLAG.md §1.3). */
html[data-lobby-design="ny"] .lobby-screen .ln-footer-legal {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgb(255 244 214 / 20%);
  color: #d8cab3;
  font-size: 12px;
}

/* ── Smale telefoner (under 360 px): «Forhåndskjøp» får egen linje i full
   bredde — to knapper og 18+ på én linje ville kuttet teksten ved 320 px. ── */
@media (max-width: 359px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-card--papir .ln-card-cta {
    flex-wrap: wrap;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--papir .ln-btn--outline {
    flex: 1 0 100%;
    order: 1;
  }
}

/* ── Nettbrett: to kolonner, flaggskipet over hele bredden ── */
@media (min-width: 601px) {
  html[data-lobby-design="ny"] .lobby-screen .lobby-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship {
    grid-column: span 2;
  }
}

/* ── Desktop: tre kolonner, flaggskipet 2 × 2 ── */
@media (min-width: 901px) {
  /* Gutter: minst 20 px, ellers det som gir 1 160 px innhold i midten. */
  html[data-lobby-design="ny"] .lobby-screen .lobby-main {
    padding: 40px max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2)) 0 max(20px, env(safe-area-inset-left), calc((100vw - 1160px) / 2));
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-spillevett {
    margin-top: 44px;
  }

  /* Samme gutter som .lobby-main over, som padding. */
  html[data-lobby-design="ny"] .lobby-screen .ln-footer {
    margin-top: 44px;
    padding: 24px max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left), calc((100vw - 1160px) / 2));
  }

  /* Merkeplaten sist i øverste rad, høyrejustert (lerretet, 36 px logoer). */
  html[data-lobby-design="ny"] .lobby-screen .ln-footer-merker {
    flex: 0 1 auto;
    order: 1;
    margin: 0 0 0 auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-footer-merker .tillit-merker-rad {
    justify-content: flex-end;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-games-head {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 24px;
    margin-bottom: 20px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-games-title {
    font-size: 24px;
  }

  html[data-lobby-design="ny"] .lobby-screen .lobby-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship {
    grid-row: span 2;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-title {
    font-size: 20px;
  }

  /* Papir Bingo-unntaket fra 16:9-regelen (Tobias 01.10 ca. kl. 14:45,
     Lobby-innlogget-desktop.dc.html): bildet fyller høyden kortet får av de to
     radene ved siden av, så 2 × 2-kortet aldri får et hvitt hull. Motivet står
     øverst (50% 0%). Bare her — testen tillater akkurat disse to reglene. */
  html[data-lobby-design="ny"] .lobby-screen .ln-card--papir.ln-card--flagship .ln-card-media {
    flex: 1 1 auto;
    min-height: 300px;
    aspect-ratio: auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--papir.ln-card--flagship .ln-card-img {
    position: absolute;
    inset: 0;
    object-position: 50% 0%;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-body {
    flex: none;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-body--wide-only,
  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-row.ln-card-wide-only {
    display: flex;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-desc.ln-card-wide-only {
    display: block;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-desc {
    margin: 0 0 4px;
    color: var(--ln-text);
    font-size: 15px;
    line-height: 1.55;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--flagship .ln-card-body--wide-only + .ln-card-actions {
    padding-top: 0;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-card--papir.ln-card--flagship .ln-btn {
    padding: 0 20px;
  }
}

/* ══ A8: toppbaren, hallraden og kontomenyen ════════════════════════════════
   Fasit: Lobby-innlogget-mobil/-desktop og Lobby-innlogget-mobil-meny på
   lerretet, GRUNNLAG.md §4.3–4.4 (toppbar), §3 (mål) og §1 (farger).
   lobby-web.js setter den nye toppen (.ln-topbar) først i #lobby-screen og
   hallraden (.ln-hallbar) først i innholdet. Dagens toppbar og hallrad står i
   DOM-en (ID-ene auth.js, panels.js, shell-init.js og profile.js bruker) og
   skjules bare når den nye toppen står foran dem: mangler lobby-web.js, står
   dagens topp som før. Spesifisitet (0,4,1) slår dagens regler for raden
   (0,1,0 / 0,2,0 i index.html og responsive-accessibility.css). */
html[data-lobby-design="ny"] .lobby-screen .ln-topbar ~ .lobby-topbar,
html[data-lobby-design="ny"] .lobby-screen .ln-topbar ~ .lobby-mobile-wallet-row {
  display: none;
}

/* Mens kontomenyen står, ruller ikke lobbyen bak den (skjermen er
   rullebeholderen på alle bredder, se «Rulling» lenger ned). */
html[data-lobby-design="ny"] .lobby-screen.ln-menu-open {
  overflow: hidden;
}

/* ── Toppen: hvit, 56 px på mobil og 64 px fra nettbrett (GRUNNLAG.md §3).
   Står fast øverst mens siden ruller (lerretet: position sticky). ── */
html[data-lobby-design="ny"] .lobby-screen .ln-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: 0 0 auto;
  padding-top: env(safe-area-inset-top, 0);
  border-bottom: 1px solid #ece6e0;
  background: var(--ln-surface);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
}

html[data-lobby-design="ny"] .lobby-screen .ln-topbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}

/* Logoen har hvitt ordmerke: alltid på burgunder plate (GRUNNLAG.md §3). */
html[data-lobby-design="ny"] .lobby-screen .ln-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  border-radius: 10px;
  text-decoration: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-logo-plate {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-logo-img {
  display: block;
  width: auto;
  height: 20px;
}

/* Hovedmenyen til markedssidene: bare når valget mainMenu er på, og bare på
   brede skjermer (fem lenker får ikke plass ved siden av kontoen før det). */
html[data-lobby-design="ny"] .lobby-screen .ln-mainnav {
  display: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-mainnav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--ln-radius-pill);
  color: var(--ln-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

html[data-lobby-design="ny"] .lobby-screen .ln-mainnav-link[aria-current="page"] {
  background: var(--ln-game-papirbingo-pastel);
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

/* «Spillepause» står i toppen på desktop; på mobil står den i menyen. */
html[data-lobby-design="ny"] .lobby-screen .ln-topbar-pause {
  display: none;
}

/* Saldoen i Anton, gull på burgunder (vedtak valg-anton 16.09). Den krymper
   aldri: et klippet beløp («12 345,5» for 12 345,50 kr) leses som et annet
   tall. Når plassen er knapp, gir navnet på kontoknappen fra seg plass
   (ellipse), og fra 601 til 771 px er kontoknappen rund med initialene. */
html[data-lobby-design="ny"] .lobby-screen .ln-saldo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  min-height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--ln-radius-pill);
  background: linear-gradient(165deg, var(--ln-brand-burgundy), var(--ln-brand-burgundy-deepest));
  color: var(--ln-brand-gold);
  font-family: var(--ln-font-display);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-saldo-chev, .ln-account-chev, .ln-hall-limits-chev) {
  display: inline-flex;
  flex: none;
}

/* Bjella står på desktop; på mobil er telleren på kontoknappen (r5q nr. 1). */
html[data-lobby-design="ny"] .lobby-screen .ln-bell {
  position: relative;
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #ece6e0;
  border-radius: 50%;
  background: var(--ln-bg);
  color: var(--ln-brand-burgundy);
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-account {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  border: 1.5px solid #ece6e0;
  border-radius: var(--ln-radius-pill);
  background: var(--ln-surface);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-account[aria-expanded="true"] {
  border-color: var(--ln-brand-burgundy);
}

/* Med navn: det eneste i toppen som krymper (navnet får ellipse). */
html[data-lobby-design="ny"] .lobby-screen .ln-account--wide {
  display: none;
  flex: 0 1 auto;
  gap: 8px;
  min-width: 0;
  padding: 0 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
}

html[data-lobby-design="ny"] .lobby-screen .ln-account--compact {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
}

html[data-lobby-design="ny"] .lobby-screen .ln-account-name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-lobby-design="ny"] .lobby-screen .ln-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ln-brand-burgundy);
  color: #fff;
  font-family: var(--ln-font-body);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

html[data-lobby-design="ny"] .lobby-screen .ln-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 13px;
}

/* Telleren: rød prikk med tall i hjørnet, skjult ved 0 (GRUNNLAG.md §4.3). */
html[data-lobby-design="ny"] .lobby-screen .ln-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ln-cta);
  color: #fff;
  font-family: var(--ln-font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-badge, .ln-menu-badge)[hidden] {
  display: none;
}

/* ── Hallraden: først i innholdet, hvit og kant til kant ──
   Samme gutter som .lobby-main, som negativ marg ut og padding inn. Den
   negative toppmargen tar bort innholdets toppadding over raden,
   og bunnmargen gir den tilbake under. */
html[data-lobby-design="ny"] .lobby-screen .ln-hallbar {
  flex: 0 0 auto;
  margin: -28px calc(-1 * max(16px, env(safe-area-inset-right))) 28px calc(-1 * max(16px, env(safe-area-inset-left)));
  padding: 12px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid #ece6e0;
  background: var(--ln-surface);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-hallbar, .ln-hall, .ln-hall-used, .ln-hall-meter, .ln-menu-hall)[hidden] {
  display: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hallbar-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* «Overfør penger» (mobil): rolig omriss i full bredde (r5q nr. 3). */
html[data-lobby-design="ny"] .lobby-screen .ln-transfer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--ln-brand-burgundy);
  border-radius: var(--ln-radius-pill);
  background: transparent;
  color: var(--ln-brand-burgundy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-transfer--primary {
  border-color: var(--ln-cta);
  background: var(--ln-cta);
  color: #fff;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-icon {
  display: none;
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-label {
  flex: none;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.3;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-select-wrap {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* 16 px på mobil: iOS zoomer inn på skjemafelt under 16 px. */
html[data-lobby-design="ny"] .lobby-screen .ln-hall-select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 40px 0 16px;
  border: 1.5px solid #ecd4da;
  border-radius: var(--ln-radius-pill);
  background: var(--ln-game-papirbingo-pastel);
  color: var(--ln-brand-burgundy);
  font-family: var(--ln-font-body);
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  cursor: pointer;
  box-sizing: border-box;
  appearance: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-select-chev {
  position: absolute;
  top: 50%;
  right: 14px;
  display: inline-flex;
  color: var(--ln-brand-burgundy);
  pointer-events: none;
  transform: translateY(-50%);
}

/* Én hall (ingen å bytte til) eller laster: navnet som tekst, uten pil. */
html[data-lobby-design="ny"] .lobby-screen .ln-hall-name {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  overflow: hidden;
  border: 1.5px solid #ecd4da;
  border-radius: var(--ln-radius-pill);
  background: var(--ln-game-papirbingo-pastel);
  color: var(--ln-brand-burgundy);
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* Dagens grense: tekst og «Grenser» på én linje, måleren under (mobil). */
html[data-lobby-design="ny"] .lobby-screen .ln-hall-usage {
  display: grid;
  grid-template-areas:
    "used limits"
    "meter meter";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-used {
  grid-area: used;
  margin: 0;
  color: var(--ln-text-soft);
  font-size: 14px;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-used b {
  color: var(--ln-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-limits {
  display: inline-flex;
  grid-area: limits;
  align-items: center;
  justify-self: end;
  gap: 4px;
  min-height: 44px;
  color: var(--ln-brand-burgundy);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

/* Måleren er pynt (aria-hidden): teksten ved siden av sier tallene. */
html[data-lobby-design="ny"] .lobby-screen .ln-hall-meter {
  display: block;
  grid-area: meter;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #ece6e0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-hall-meter-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ln-brand-gold-deep), var(--ln-brand-gold));
}

/* ── Kontomenyen: ark fra høyre på mobil (Lobby-innlogget-mobil-meny),
   meny under kontoknappen fra nettbrett. Modal: flaten bak tar trykket som
   lukker menyen. ── */
html[data-lobby-design="ny"] .lobby-screen .ln-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  background: rgb(40 13 19 / 65%);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-layer[hidden] {
  display: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu {
  display: flex;
  flex-direction: column;
  width: min(342px, calc(100vw - 24px));
  height: 100%;
  max-height: 100%;
  padding-top: env(safe-area-inset-top, 0);
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  background: var(--ln-surface);
  box-shadow: -6px 0 24px rgb(42 18 24 / 14%);
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid #ece6e0;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-who {
  flex: 1;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-name {
  margin: 0;
  color: var(--ln-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-hall {
  margin: 0;
  color: var(--ln-text-soft);
  font-size: 13px;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--ln-brand-burgundy);
  border-radius: 50%;
  background: var(--ln-surface);
  color: var(--ln-brand-burgundy);
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-wallet {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: var(--ln-radius-card);
  background: linear-gradient(165deg, var(--ln-brand-burgundy), var(--ln-brand-burgundy-deepest));
  color: var(--ln-brand-cream);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-wallet-text {
  display: flex;
  flex-direction: column;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-wallet-label {
  color: var(--ln-brand-cream);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-wallet-amount {
  color: var(--ln-brand-gold);
  font-family: var(--ln-font-display);
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-wallet-actions {
  display: flex;
  gap: 10px;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-btn {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--ln-radius-pill);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-btn--gold {
  border: 2px solid var(--ln-brand-gold);
  background: var(--ln-brand-gold);
  color: var(--ln-brand-burgundy-deepest);
  font-weight: 700;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-btn--outline {
  border: 2px solid var(--ln-brand-cream);
  background: transparent;
  color: var(--ln-brand-cream);
  font-weight: 600;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid #ecd4da;
  border-radius: 12px;
  background: var(--ln-game-papirbingo-pastel);
  color: var(--ln-text);
  text-decoration: none;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-menu-pause-icon, .ln-menu-row-icon) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ln-bg);
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause-icon {
  background: var(--ln-surface);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause-text b {
  color: var(--ln-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause-sub {
  color: var(--ln-text-soft);
  font-size: 13px;
  line-height: 1.4;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-menu-pause-chev, .ln-menu-row-chev) {
  display: inline-flex;
  flex: none;
  color: var(--ln-text-soft);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-pause-chev {
  color: var(--ln-brand-burgundy);
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid #ece6e0;
  list-style: none;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-item {
  border-bottom: 1px solid #ece6e0;
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-menu-row, .ln-menu-logout) {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--ln-text);
  font-family: var(--ln-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-row-text {
  flex: 1;
  min-width: 0;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--ln-cta);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  box-sizing: border-box;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-logout {
  flex: none;
  color: #a92832;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-logout .ln-menu-row-icon {
  background: #fbeaea;
  color: #a92832;
}

html[data-lobby-design="ny"] .lobby-screen .ln-menu-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #ece6e0;
}

/* ── Rulling: lobbyskjermen er rullebeholderen på alle bredder ──
   Som dagens lobby på telefon (BIN-4665, responsive-accessibility.css), men
   også fra 601 px: siden ruller under den faste toppen (position sticky), og
   innholdet (<main>) vokser med det som står i det. Da kan bunnen stå rett
   etter <main> og være et contentinfo-landemerke på toppnivå, og den ruller
   likevel med siden (lobby-web.js renderFooter). Dagens lobby lar <main>
   rulle fra 601 px; det gjelder fortsatt under «dagens» og på terminalen.

   Når tastaturet flytter fokus (Tab og Shift+Tab), ruller nettleseren
   elementet fram UNDER toppen, ikke bak den (WCAG 2.2 SC 2.4.11), og med
   8 px luft øverst og nederst, så hele fokusringen (3 px utenfor en 2 px
   avstand, 5 px i alt) står innenfor kanten. Toppen er 56 px på telefon og
   64 px fra 601 px, pluss kanten under (1 px).
   Spesifisitet (0,2,1 / 0,3,1) slår dagens regler for skjermen og main
   (0,1,0 / 0,2,0); menyens .ln-menu-open (0,3,1) slår denne. */
html[data-lobby-design="ny"] .lobby-screen {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-top: calc(57px + env(safe-area-inset-top, 0px) + 8px);
  scroll-padding-bottom: 8px;
}

html[data-lobby-design="ny"] .lobby-screen .lobby-main {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

@media (min-width: 601px) {
  html[data-lobby-design="ny"] .lobby-screen {
    scroll-padding-top: calc(65px + env(safe-area-inset-top, 0px) + 8px);
  }
}

/* ── Smale telefoner (under 360 px): logoen og saldoen krymper litt, så
   logo, saldo og kontoknapp står på én linje også ved 320 px. ── */
@media (max-width: 359px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-logo-plate {
    padding: 0 8px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-logo-img {
    height: 16px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-saldo {
    padding: 0 10px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-saldo-chev {
    display: none;
  }
}

/* ── Fra nettbrett: desktoptoppen (GRUNNLAG.md §4.4) og hallraden på én
   linje; kontomenyen henger under kontoknappen. ── */
@media (min-width: 601px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-inner {
    gap: 24px;
    height: 64px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-logo-plate {
    height: 40px;
    padding: 0 12px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-logo-img {
    height: 24px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-actions {
    gap: 10px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-pause {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: var(--ln-text-soft);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-saldo {
    gap: 7px;
    padding: 0 16px;
    font-size: 18px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-bell,
  html[data-lobby-design="ny"] .lobby-screen .ln-account--wide {
    display: inline-flex;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-account--compact {
    display: none;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hallbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hallbar-inner {
    flex-flow: row wrap;
    align-items: center;
    gap: 12px 24px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-transfer {
    display: none;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-icon {
    display: inline-flex;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-label {
    color: var(--ln-text);
    font-size: 15px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-select-wrap {
    flex: 0 1 auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-select,
  html[data-lobby-design="ny"] .lobby-screen .ln-hall-name {
    max-width: 360px;
    font-size: 14px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-usage {
    display: flex;
    gap: 14px;
    margin-left: auto;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hall-meter {
    flex: none;
    width: 140px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-menu-layer {
    align-items: flex-start;
    padding: calc(72px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 16px 16px;
    background: transparent;
    box-sizing: border-box;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-menu {
    width: 360px;
    height: auto;
    padding-top: 0;
    border: 1px solid #ece6e0;
    border-radius: 12px;
    box-shadow: var(--ln-shadow-hover);
  }
}

/* ── Smalt nettbrett (601–771 px): kontoknappen er rund med initialene ──
   «Spillepause» står med synlig tekst fra 601 px, og saldoen krymper aldri.
   Da er det ikke plass til navnet på kontoknappen på iPad mini på høykant
   (744 px), iPad (768 px) og telefoner på tvers: det ble «Ma…». Knappen er
   derfor rund med initialene, som på mobil. Navnet står øverst i menyen og i
   knappens navn for skjermleseren («{navn}, profilmeny og Min side»). Bjella
   har telleren som ellers fra 601 px. Litt mindre luft mellom delene gir
   plass til et vanlig rullefelt (17 px, Windows) ved 601 px også med
   «1 234 567,89 kr» (18 px til overs, målt i Chromium). Fra 772 px får
   navnet minst 140 px ved siden av «123 456,78 kr». ── */
@media (min-width: 601px) and (max-width: 771px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-inner {
    gap: 12px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-actions {
    gap: 8px;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-account--wide {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-account--wide :is(.ln-account-name, .ln-account-chev) {
    display: none;
  }
}

/* ── Desktop: samme gutter som innholdet (1 160 px i midten) ── */
@media (min-width: 901px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-topbar-inner {
    padding: 0 max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2)) 0 max(20px, env(safe-area-inset-left), calc((100vw - 1160px) / 2));
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-hallbar {
    margin: -40px calc(-1 * max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2))) 40px calc(-1 * max(20px, env(safe-area-inset-left), calc((100vw - 1160px) / 2)));
    padding: 8px max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2)) 8px max(20px, env(safe-area-inset-left), calc((100vw - 1160px) / 2));
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-menu-layer {
    padding-right: max(20px, env(safe-area-inset-right), calc((100vw - 1160px) / 2));
  }
}

/* Hovedmenyen (valget mainMenu) når fem lenker får plass ved siden av
   saldo, bjelle og konto. */
@media (min-width: 1101px) {
  html[data-lobby-design="ny"] .lobby-screen .ln-mainnav {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  html[data-lobby-design="ny"] .lobby-screen .ln-mainnav + .ln-topbar-actions {
    margin-left: 0;
  }
}

/* ══ Fokusringen — valgt ETT sted (WCAG 1.4.11 og 2.4.7) ═══════════════════
   GRUNNLAG.md §1.1 tegner gull (#e6a817, 3 px, 2 px avstand). Gull på lys
   flate er bare 2,10:1 mot hvitt og 1,95:1 mot flaten #f8f6f3, og WCAG 1.4.11
   krever 3:1 for fokusmarkeringen. På lys flate er ringen derfor tofarget:
   3 px burgunder (#6a2330, 11:1 mot hvitt, 10,3:1 mot flaten) utenfor en
   2 px gull kant (box-shadow under outline-offset). På mørk flate (bunnen og
   saldo-kortet i menyen) står gull alene: 8,62:1 mot #280d13.
   Tegningens gull overalt = bytt de to verdiene i den første regelen til
   outline-fargen var(--ln-brand-gold-deep) og box-shadow: none.
   Merkeplaten (tillit-merker.js) har sin egen ring på den hvite platen. */
html[data-lobby-design="ny"] .lobby-screen :is(
  .ln-btn,
  .lobby-compliance-retry,
  .lobby-legit-banner-map,
  .ln-link-btn,
  .ln-spillevett-pause,
  .ln-helpline,
  .ln-logo,
  .ln-mainnav-link,
  .ln-topbar-pause,
  .ln-saldo,
  .ln-bell,
  .ln-account,
  .ln-transfer,
  .ln-hall-select,
  .ln-hall-limits,
  .ln-menu-close,
  .ln-menu-pause,
  .ln-menu-row,
  .ln-menu-logout
):focus-visible {
  outline: 3px solid var(--ln-brand-burgundy);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--ln-brand-gold);
}

html[data-lobby-design="ny"] .lobby-screen :is(.ln-footer-help, .ln-footer-link, .ln-menu-btn):focus-visible {
  outline: 3px solid var(--ln-brand-gold-deep);
  outline-offset: 2px;
}