/* ==========================================================================
   Studilla – nytt i moderniseringen
   Heltefelt med verdiløfte og direktestart, det sosiale laget
   (følging, meldinger, aktivitet), ukes-/vennerangering, game over-kortet,
   cookie-linja og tilgjengelighetshjelpere.

   Lastes etter style.css (se build/partials/head.html), så alt her kan
   overstyre kjernen der det trengs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tilgjengelighet
   -------------------------------------------------------------------------- */

/* Hopp rett til innholdet – første tabulator-stopp på hver side. Lå ikke i
   den gamle versjonen, så en tastaturbruker måtte gjennom hele toppmenyen på
   hver eneste sidevisning. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent, #2ee87f);
  color: #17141f;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

/* Tekst kun for skjermlesere – brukes på <label> der feltet har en synlig
   plassholder i stedet for en synlig etikett. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Synlig fokusmarkering med god kontrast, likt over hele siden. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #2ee87f);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Respekter systemvalget «mindre bevegelse». Den gamle versjonen hadde én
   slik regel i hele stilarket, mens siden er full av animasjoner. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-kicker-dot { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Heltefelt: verdiløfte + direktestart
   -------------------------------------------------------------------------- */

.hero-section {
  position: relative;
  margin-bottom: 40px;
}

/* Dagens triks dekker hele skjermen under toppmenyen. */
.hero-section .hero-stage {
  min-height: calc(100svh - var(--header-h) - 40px);
}
.hero-section .hero-stage-inner { min-height: 0; }

/* Heltekortet holder plassen sin.
   Bildet bestemte høyden alene, og teksten lå absolutt oppå. Før bildet var
   lastet var kortet 0 px høyt, så alt under hoppet ned når det kom (CLS 0,97
   på mobil). På smale skjermer var teksten høyere enn bildet, og navnet på
   dagens triks ble klippet bort øverst. Nå deler bilde og tekst samme rute
   i et grid: kortet er 16:9, men vokser hvis teksten trenger mer, og
   bildet fyller flaten med object-fit. Coverne er mellom 16:10 og 16:9;
   litt beskjæring oppe og nede er bedre enn at «Start her» havner under
   bretten på en vanlig bærbar (1366 × 768).
   content-box: kortet har en ramme på 1 px, og det fylte kortet er
   .hero-media pluss rammen. Uten den ble det tomme kortet 2 px lavere, og
   hilsenen med topplista under hoppet når trikset kom. */
.hero-card[data-hero]:empty { aspect-ratio: 16 / 9; box-sizing: content-box; }
.hero-media {
  display: grid;
  grid-template: 1fr / 1fr;
  aspect-ratio: 16 / 9;
}
.hero-media > .hero-image,
.hero-media > .hero-content { grid-area: 1 / 1; }
.hero-media-img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}
.hero-content {
  position: relative;
  align-self: end;
}
@media (max-width: 720px) {
  /* Innloggingsknappene i toppmenyen settes inn av js/auth.js. Uten
     reservert høyde vokste menyen fra 58 til 64 px på mobil når de kom, og
     hele siden hoppet ned (CLS ca. 0,2 på alle sider). Knappen er 43,33 px
     høy, så 44 px, ikke 43. */
  .header-right[data-auth-slot] { min-height: 44px; }

  /* Teksten (navn, beskrivelse og knapp) er høyere enn 16:10 på en telefon.
     Plassen reserveres på forhånd, så kortet ikke vokser etter at det kom. */
  .hero-card[data-hero]:empty,
  .hero-media {
    /* Ikke 16:10 her: min-height overført gjennom aspect-ratio ville gitt
       en minstebredde på 512 px og dyttet teksten ut til siden. */
    aspect-ratio: auto;
    min-height: 320px;
  }
}

/* Liten hilsen nede i høyre hjørne, over bildet. Skjules når trikset spilles. */
.hero-greeting {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, calc(100% - 40px));
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.hero-section:has(.hero-card.is-playing) .hero-greeting { display: none; }

.hero-greeting h1 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
  text-wrap: pretty;
}

.hero-greeting .hero-lead { font-size: 13px; line-height: 1.5; }

.hero-byline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8d8799;
}
.hero-byline img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.hero-byline-sep { opacity: .5; }
.hero-byline a { font-weight: 800; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--accent, #2ee87f);
  text-transform: uppercase;
}
.hero-kicker-sep { opacity: .5; }
.hero-kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #2ee87f);
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

.hero-lead {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.65;
  color: #a9a3b6;
}

.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

.btn-lg {
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 12px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 15px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: #ece8f2;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }

/* Sekundærknappen på et trikskort («Se rangering») står på samme linje som
   den grønne start-knappen og må ha en mindre høyde enn den store
   .btn-ghost-en i heltefeltet. */
.btn-card-secondary {
  flex: 1;
  justify-content: center;
  padding: 10px;
  border-radius: var(--radius-sm, 10px);
  font-size: 14px;
}

.hero-desc {
  margin: 0 0 16px;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* Spillflaten som erstatter bildet når man trykker start. */
.hero-card.is-playing { background: #17141f; }

.hero-stage {
  display: flex;
  flex-direction: column;
  min-height: 460px;
  border-radius: inherit;
  overflow: hidden;
}

.hero-stage-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}
.hero-stage-title { font-size: 15px; font-weight: 800; color: #fff; }
.hero-stage-full {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
  text-decoration: none;
  white-space: nowrap;
}
.hero-stage-full:hover { text-decoration: underline; }

.hero-stage-inner {
  position: relative;
  flex: 1;
  min-height: 400px;
  padding: 16px;
}

@media (max-width: 900px) {
  /* På smale skjermer ligger hilsenen under bildet i stedet for oppå. */
  .hero-greeting { position: static; width: auto; margin-top: 12px; }
  .hero-section .hero-stage { min-height: calc(100svh - var(--header-h) - 160px); }
}

/* --------------------------------------------------------------------------
   Konto-stripe og ressurskort
   -------------------------------------------------------------------------- */

.signup-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .08), rgba(var(--accent-rgb), .02));
}
.signup-strip-text { display: flex; flex-direction: column; gap: 4px; }
.signup-strip-text strong { font-size: 15px; color: #fff; }
.signup-strip-text span { font-size: 14px; line-height: 1.55; color: #a9a3b6; }

.section-link {
  font-size: 14px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
  text-decoration: none;
}
.section-link:hover { text-decoration: underline; }

.resource-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: var(--surface, #201c2b);
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.resource-card:hover { transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .35); }
.resource-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent, #2ee87f);
}
.resource-title { font-size: 15px; font-weight: 800; color: #fff; }
.resource-text { font-size: 13px; line-height: 1.55; color: #8d8799; }

/* --------------------------------------------------------------------------
   Game over-kortet
   -------------------------------------------------------------------------- */

.game-over-card { position: relative; overflow: hidden; }

.game-over-eyebrow {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  background: rgba(var(--accent-rgb), .16);
  color: var(--accent, #2ee87f);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
}

.game-over-figure { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 4px; }
.game-over-figure-num {
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.game-over-figure-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #8d8799;
}

.game-over-facts {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 4px;
}
.game-over-fact {
  flex: 1;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}
.game-over-fact-num { font-size: 18px; font-weight: 800; color: #ece8f2; }
.game-over-fact-num.is-accent { color: var(--accent, #2ee87f); }
.game-over-fact-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #8d8799;
}

.game-over-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #a9a3b6;
}

.game-over-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.game-over-actions .game-over-again { flex: 1.4; }
.game-over-actions .game-over-next {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
}

.game-over-share {
  margin-top: 12px;
  padding: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: #8d8799;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.game-over-share:hover { color: var(--accent, #2ee87f); }

/* Menyen som åpnes fra «Utfordre en venn»: del lenke, eller send til en venn
   / gruppe direkte fra kortet. */
.share-modal-card {
  max-width: 380px;
  align-items: stretch;
  gap: 14px;
  text-align: left;
}

.share-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.share-menu-btn { width: 100%; }

.share-picker { display: flex; flex-direction: column; gap: 10px; }
.share-picker-back {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: #8d8799;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 0;
}
.share-picker-back:hover { color: var(--accent, #2ee87f); }

.share-picker-list {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  gap: 2px;
}
.share-picker-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.share-picker-item:hover { background: rgba(255, 255, 255, .05); }
.share-picker-item:disabled { opacity: .6; cursor: default; }
.share-picker-name { font-size: 14px; font-weight: 800; color: #ece8f2; }

.share-status { margin: 0; font-size: 13px; color: #8d8799; text-align: center; }

.game-over-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.game-over-confetti-bit {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall 1.9s ease-in forwards;
}
@keyframes confettiFall {
  to { transform: translateY(460px) rotate(540deg); opacity: 0; }
}

@media (max-width: 420px) {
  .game-over-actions { flex-direction: column; }
  .game-over-facts { gap: 6px; }
}

/* --------------------------------------------------------------------------
   Toppmeny: uleste meldinger
   -------------------------------------------------------------------------- */

.nav-link { position: relative; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 99px;
  background: #ff5a7a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Venner: aktivitet + meldinger

   Meldingene er ett samlet panel – tråd-lista til venstre, den åpne
   samtalen til høyre i samme kort – i stedet for to separate lister og en
   dialog som legger seg over resten av siden.
   -------------------------------------------------------------------------- */

.social-main { display: block; }

/* Toppraden: overskrift til venstre, søk-etter-spiller + ny gruppechat til
   høyre, på samme rad som før men uten den faste to-kolonne-rammen som lå i
   .social-main. */
.venner-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-new-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: var(--surface, #201c2b);
  overflow: hidden;
}

/* Ett samlet Messenger-stil kort: sidepanelet (søk + faner + tråd-/venne-
   /forespørselslister) til venstre, den åpne samtalen til høyre. Faner
   erstatter det som før var to seksjoner ved siden av hverandre, slik at
   forespørsler og vennelista ikke lenger trenger sin egen kolonne. */
.venner-panel {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  /* Skal få plass i vinduet sammen med menyen, så skrivefeltet nederst ikke
     havner under skjermkanten. */
  height: clamp(440px, calc(100vh - 150px), 660px);
  height: clamp(440px, calc(100dvh - 150px), 660px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: var(--surface, #201c2b);
  overflow: hidden;
}

.venner-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, .06);
}

.venner-sidebar-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.venner-thread-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: var(--bg, #17141f);
  color: var(--text, #ece8f2);
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
.venner-thread-search:focus { border-color: var(--accent, #2ee87f); }

.venner-tabs { display: flex; gap: 6px; }
.venner-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 8px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  color: var(--muted, #a9a3b6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  white-space: nowrap;
}
.venner-tab:hover { background: rgba(255, 255, 255, .07); }
.venner-tab.is-active {
  background: var(--accent-soft, rgba(var(--accent-rgb), .12));
  color: var(--accent, #2ee87f);
}
.venner-tab-badge {
  min-width: 17px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #ff5a7a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.venner-tab-badge.is-info { background: #38bdf8; }
.venner-tab-badge[hidden] { display: none; }

.venner-tab-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.venner-tab-panel[hidden] { display: none; }
.venner-tab-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-3, #7c768a);
}
.venner-tab-panel-heading .section-sub { font-size: 13px; text-transform: none; letter-spacing: 0; }

.dm-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.venner-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.venner-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #8d8799;
}
.venner-chat-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.venner-chat-active[hidden] { display: none; }

/* Mobil: ett panel om gangen. Lista er full bredde til man åpner en
   samtale, da bytter kortet til å vise bare den – med en tilbake-knapp i
   samtaletoppen (dm-thread-back) for å komme tilbake til lista igjen. */
@media (max-width: 720px) {
  .venner-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    height: 74vh;
    min-height: 460px;
  }
  .venner-sidebar { border-right: none; }
  .venner-chat { display: none; }
  .venner-panel.is-chat-open .venner-sidebar { display: none; }
  .venner-panel.is-chat-open .venner-chat { display: flex; }
}
@media (min-width: 721px) {
  .dm-thread-back { display: none; }
}

.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  transition: background .12s ease;
}
.feed-row:last-child { border-bottom: none; }
.feed-row:hover { background: rgba(255, 255, 255, .03); }
.feed-text { flex: 1; font-size: 14px; line-height: 1.5; color: #a9a3b6; }
.feed-text strong { color: #ece8f2; font-weight: 800; }
.feed-score {
  margin-left: 6px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
}
.feed-time { font-size: 13px; color: #6e687c; white-space: nowrap; }

.dm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease;
}
.dm-row:last-child { border-bottom: none; }
.dm-row:hover { background: rgba(255, 255, 255, .03); }
.dm-row.is-unread .dm-row-name { color: #fff; }
.dm-row.is-unread .dm-row-last { color: #c3ccda; font-weight: 800; }
.dm-row.is-open { background: rgba(var(--accent-rgb), .1); box-shadow: inset 3px 0 0 var(--accent, #2ee87f); }

.dm-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-row-name { font-size: 14px; font-weight: 800; color: #ece8f2; }
.dm-row-last {
  font-size: 13px;
  color: #8d8799;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.dm-row-time { font-size: 13px; color: #6e687c; white-space: nowrap; }
.dm-row-badge {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 99px;
  background: #ff5a7a;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

/* Samtalepanelet – del av .venner-chat-active, ikke lenger en dialog over
   resten av siden. */
.dm-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.dm-thread-back {
  display: inline-flex;
  padding: 7px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: transparent;
  color: #a9a3b6;
  cursor: pointer;
}
.dm-thread-name {
  /* Navnet tar bare plassen det trenger – .dm-thread-sub (medlemslista i en
     gruppe) får resten, og skyver knappene helt ut til høyre. min-width: 0
     og ellipsis gjør at et langt gruppenavn krymper i stedet for å dytte
     handlingsknappene ut av kortet på smale skjermer. */
  flex: 0 1 auto;
  min-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.dm-thread-name:hover { text-decoration: underline; }
.dm-thread-block {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 90, 122, .3);
  background: transparent;
  color: #ff8fa5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.dm-thread-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
}
.dm-empty { margin: auto; font-size: 14px; color: #8d8799; }

.dm-bubble {
  max-width: 78%;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 13px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, .06);
}
.dm-bubble.is-mine {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: rgba(var(--accent-rgb), .15);
}
.dm-bubble-body { font-size: 14px; line-height: 1.5; color: #ece8f2; word-break: break-word; }
.dm-bubble-time { font-size: 13px; color: #8d8799; }

.dm-compose {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.dm-thread-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}

/* --------------------------------------------------------------------------
   Vedlegg i meldinger: triks, guider og rekorder
   -------------------------------------------------------------------------- */

/* De tre knappene til venstre for skrivefeltet – samme ikoner som toppmenyen. */
.dm-attach-bar { display: flex; gap: 2px; }
.dm-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #a9a3b6;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dm-attach-btn:hover { background: rgba(255, 255, 255, .06); color: #ece8f2; }
.dm-attach-btn.is-active {
  background: rgba(var(--accent-rgb), .14);
  color: var(--accent, #2ee87f);
}

/* Lista man velger fra. Legger seg over samtalen i stedet for å dytte den. */
.dm-attach-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 1px);
  z-index: 2;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #201c2b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.dm-attach-panel[hidden] { display: none; }
.dm-attach-panel-head {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8d8799;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.dm-attach-options { max-height: 260px; overflow-y: auto; }
.dm-attach-option {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.dm-attach-option:last-child { border-bottom: none; }
.dm-attach-option:hover { background: rgba(255, 255, 255, .04); }
.dm-attach-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-attach-option-title { font-size: 14px; font-weight: 800; color: #ece8f2; }
.dm-attach-option-sub {
  font-size: 13px;
  color: #8d8799;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rundt ikon der triksene har coverbildet sitt. */
.dm-attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent, #2ee87f);
}

/* Det valgte vedlegget, over skrivefeltet. */
.dm-attach-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-rgb), .3);
  background: rgba(var(--accent-rgb), .08);
}
.dm-attach-chip[hidden] { display: none; }
.dm-attach-chip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dm-attach-chip-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent, #2ee87f);
}
.dm-attach-chip-title {
  font-size: 13px;
  font-weight: 800;
  color: #ece8f2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-attach-chip-remove {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #a9a3b6;
  cursor: pointer;
}
.dm-attach-chip-remove:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Vedlegget slik det ser ut inne i en sendt melding. */
.dm-bubble.has-attachment { max-width: 90%; }
.dm-attach-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .25);
  text-decoration: none;
}
.dm-attach-card:hover { border-color: rgba(var(--accent-rgb), .4); }
.dm-attach-card-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dm-attach-card-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent, #2ee87f);
}
.dm-attach-card-title { font-size: 14px; font-weight: 800; color: #ece8f2; }
.dm-attach-card-sub {
  font-size: 13px;
  color: #a9a3b6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-attach-card-action {
  flex: none;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .dm-attach-btn { width: 32px; height: 32px; }
  .dm-attach-card-action { display: none; }
}
.dm-thread-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #17141f;
  color: #ece8f2;
  font-family: inherit;
  font-size: 14px;
}
.dm-thread-error {
  margin: 0;
  padding: 0 14px 12px;
  font-size: 13px;
  color: #ff8fa5;
}

.rank-search-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  text-decoration: none;
}
.btn-small { padding: 6px 14px; font-size: 13px; }

.public-profile-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.public-profile-follow-counts { font-size: 13px; color: #8d8799; }

/* --------------------------------------------------------------------------
   Cookie-linja
   Var tidligere en dialog med mørklagt bakgrunn som dekket hele siden, slik
   at det første en ny besøkende så var et samtykkeskjema og ingenting annet.
   Nå ligger førstevalget som en linje nederst, og bare «Tilpass» åpner en
   ekte dialog.
   -------------------------------------------------------------------------- */

#scb-overlay { display: none; }
#scb-overlay.is-open { display: flex; }

#scb-overlay.scb-mode-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9998;
  padding: 14px;
  align-items: center;
  justify-content: center;
}
#scb-overlay.scb-mode-bar #scb-backdrop { display: none; }

#scb-overlay.scb-mode-bar #scb-initial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 960px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: var(--surface);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  font-family: "Figtree", system-ui, sans-serif;
}

.scb-bar-text {
  flex: 1;
  min-width: 240px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #a9a3b6;
}
.scb-bar-text a { color: var(--accent, #2ee87f); }

.scb-bar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Alle tre valgene har samme størrelse og vekt – «Avvis alle» skal ikke være
   vanskeligere å finne eller trykke på enn «Godta alle». */
.scb-btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: transparent;
  color: #ece8f2;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.scb-btn-primary {
  border-color: transparent;
  background: var(--accent, #2ee87f);
  color: #17141f;
  font-weight: 800;
}
.scb-btn-quiet { color: #a9a3b6; border-color: transparent; }

#scb-overlay.scb-mode-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#scb-overlay.scb-mode-modal #scb-backdrop {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 18, .82);
  backdrop-filter: blur(3px);
}

@media (max-width: 640px) {
  #scb-overlay.scb-mode-bar #scb-initial { flex-direction: column; align-items: stretch; }
  .scb-bar-actions { justify-content: stretch; }
  .scb-btn { flex: 1; text-align: center; }
}

/* --------------------------------------------------------------------------
   Justeringer av heltekortet nå som det står ved siden av verdiløftet i
   stedet for i full bredde: navnet var 52px og la seg oppå motivet, og
   beskrivelsen som kom til gjorde teksten enda vanskeligere å lese.
   -------------------------------------------------------------------------- */


.hero-section .hero-content { padding: 80px 32px 28px; gap: 10px; }

.hero-section .hero-content h2 {
  font-size: clamp(28px, 3.4vw, 42px);
}

/* Seksjonene sto med den gamle luften beregnet for et heltefelt i full
   bredde, og ga et stort tomrom under det nye. */
.hero-section + .signup-strip { margin-top: 0; }

/* --------------------------------------------------------------------------
   Game over-kortet trenger nå en egen flate.
   Før besto det av tre korte linjer sentrert på et uklart bakteppe, og det
   holdt. Med skår, rekord, rekke og to knapper ble brettet under lesende
   gjennom teksten (se skjermbildet i vurderingen), så kortet får et ekte
   kort-underlag i stedet.
   -------------------------------------------------------------------------- */

.game-over-card {
  max-width: 360px;
  width: min(360px, 88%);
  padding: 28px 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(19, 26, 37, .97);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}

.game-over-overlay { background: rgba(23, 20, 31, .88); }

/* Knappeteksten brøt over to linjer i den smale kolonnen. */
.game-over-actions .btn-primary,
.game-over-actions .btn-outline {
  padding: 13px 16px;
  font-size: 15px;
  white-space: nowrap;
}

/* Konfettien skal ligge bak innholdet, ikke midt oppi tallene. */
.game-over-confetti { z-index: 0; }
.game-over-card > *:not(.game-over-confetti) { position: relative; z-index: 1; }

/* En <a> stylet som knapp. Erstatter mønsteret <a href><button></button></a>,
   som er ugyldig HTML (klikkbart element inni et klikkbart element) og ga to
   tabulator-stopp for det samme målet. */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Venner: forespørsler, vennelista og gruppechatter
   -------------------------------------------------------------------------- */

/* Radene i vennelista og forespørselslista er ikke lenker i seg selv lenger –
   selve navnet lenker til profilen, mens knappene til høyre gjør noe annet.
   Derfor er .feed-identity den klikkbare delen, ikke hele raden. */
.feed-row.is-request,
.feed-row.is-friend { cursor: default; }
.feed-row.is-request:hover,
.feed-row.is-friend:hover { background: transparent; }

.feed-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  border-radius: 10px;
  padding: 2px;
  transition: background .12s ease;
}
.feed-identity:hover { background: rgba(255, 255, 255, .04); }

.feed-sub { display: block; font-size: 13px; color: #6e687c; }

.feed-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .09));
  background: transparent;
  color: #a9a3b6;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.icon-btn:hover { color: var(--accent, #2ee87f); border-color: rgba(var(--accent-rgb), .5); }
.icon-btn.is-danger:hover { color: #ff9385; border-color: rgba(255, 147, 133, .5); }

.btn-outline.is-danger-outline:hover { border-color: rgba(255, 147, 133, .5); color: #ff9385; }

/* Gruppechatter har ikke profilbilde – de får forbokstaven i en farget boks
   med samme form som avatarene, så lista ser lik ut uansett samtaletype. */
.group-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(var(--accent-rgb), .16);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--accent, #2ee87f);
  font-weight: 800;
  line-height: 1;
}

.group-member-picker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, .06));
}
.group-member-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text, #ece8f2);
  cursor: pointer;
}
.group-member-option:hover { background: rgba(255, 255, 255, .03); }
.group-member-option input { accent-color: var(--accent, #2ee87f); }

/* Hvem som skrev hva. Bare i grupper – i en tomannssamtale er det åpenbart. */
.dm-bubble-sender {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
}

/* Medlemslista i toppen av en gruppesamtale. Kuttes med ellipse i stedet for
   å dytte knappene ut av panelet når gruppa blir stor. */
.dm-thread-sub {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #6e687c;
}

/* --------------------------------------------------------------------------
   Sprettoppvarsel for nye meldinger (js/dm-popup.js)

   Ligger fast nede til høyre på alle sider, slik at man ser at noen har
   skrevet uten å stå på Venner-siden. Kan skrus av under Innstillinger.
   -------------------------------------------------------------------------- */
.dm-popup-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(340px, calc(100vw - 36px));
  pointer-events: none;
}

.dm-popup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .09));
  background: var(--surface, #201c2b);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, border-color .12s ease;
}
.dm-popup.is-in { opacity: 1; transform: translateY(0); }
.dm-popup:hover { border-color: rgba(var(--accent-rgb), .45); }

.dm-popup-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-popup-name { font-size: 14px; font-weight: 800; color: var(--text-strong, #fff); }
.dm-popup-body {
  font-size: 13px;
  color: #a9a3b6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* «Gå til chatten» er skjult til man holder musa over kortet – ellers tar
   den plassen fra selve meldingen. */
.dm-popup-go {
  grid-column: 2;
  grid-row: 2;
  font-size: 13px;
  font-weight: 800;
  color: var(--accent, #2ee87f);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .18s ease, opacity .18s ease;
}
.dm-popup:hover .dm-popup-go,
.dm-popup:focus-visible .dm-popup-go { max-height: 20px; opacity: 1; }

.dm-popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: #6e687c;
  cursor: pointer;
}
.dm-popup-close:hover { color: var(--text, #ece8f2); background: rgba(255, 255, 255, .06); }

@media (max-width: 520px) {
  .dm-popup-stack { left: 18px; right: 18px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-popup { transition: opacity .01s linear; transform: none; }
}

/* Nøytrale knapper i samtaletoppen («Legg til venn», «Forlat» i en gruppe).
   Samme form som .dm-thread-block, men uten den røde blokker-fargen. */
.dm-thread-action {
  flex: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-strong, rgba(255, 255, 255, .09));
  background: transparent;
  color: #a9a3b6;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.dm-thread-action:hover { color: var(--accent, #2ee87f); border-color: rgba(var(--accent-rgb), .5); }

/* Kortet ble kuttet av i bunnen på lave skjermer: overlegget sentrerte et
   kort som var høyere enn seg selv. margin:auto sentrerer når det er plass og
   lar overlegget scrolle når det ikke er det. */
.game-over-overlay {
  overflow-y: auto;
  align-items: flex-start;
  padding: 12px 0;
  box-sizing: border-box;
}
.game-over-overlay .game-over-card { margin: auto; max-width: min(360px, 92%); }