/* Repliduel – nytt design.
   OLED-svart, dempet hvit tekst. Farge brukes bare som funksjon:
   mint = fremgang, lilla = sosiale handlinger, gull = mynter/butikk. */

:root {
  /* Designoppgradering (Dashbord.dc.html) */
  --bg: #0B0B0C; --overflate: #16171A; --kant: rgba(255, 255, 255, .05); --radius: 16px;
  --gronn: #26FD9F; --gronn-glod: rgba(38, 253, 159, .25);
  --lilla-gradient: linear-gradient(135deg, #9D6BFF, #C49BFF); --lilla-glod: rgba(157, 107, 255, .30); --pa-lilla: #0B0B0C;
  --tekst-dempet: #94A3B8;
  --svart: var(--bg);
  --tekst: #FFFFFF;
  --dempet: var(--tekst-dempet);
  --svak: var(--tekst-dempet);
  --linje: var(--kant);
  --linje-sterk: rgba(255, 255, 255, 0.18);
  --flate: var(--overflate);
  --mint: var(--gronn);
  --mint-glod: rgba(38, 253, 159, 0.6);
  --lilla: #9D6BFF;
  --lilla-kant: #9D6BFF;
  --lilla-tekst: #C49BFF;
  --gull: #FFD700;
  --feil: #ff7b70;
  --varsel: #f5b544;
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fjaer: cubic-bezier(.34, 1.56, .64, 1);
  --myk: cubic-bezier(.22, 1, .36, 1);
  --nav-hoyde: 72px;
  --sidemeny: 224px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* klasser som .stack og .knapp skal aldri vise skjulte elementer */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--svart); }
body {
  margin: 0; min-height: 100dvh; background: var(--svart); color: var(--tekst);
  font-family: var(--system); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--mono); }
.dempet { color: var(--dempet); }
.liten { font-size: 14px; }
.skjult-visuelt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp { position: absolute; left: -999px; top: 8px; z-index: 100; display: flex; align-items: center; min-height: 44px; background: #fff; color: #000; padding: 0 14px; border-radius: 8px; }
.hopp:focus { left: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }

/* ---------- Skall: mobil (meny nederst), PC (sidemeny) ---------- */
.skall {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.innhold {
  width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 0 16px calc(var(--nav-hoyde) + 24px + env(safe-area-inset-bottom));
}
body.uten-meny .innhold { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
body.uten-meny .hovedmeny { display: none; }

.hovedmeny {
  position: fixed; z-index: 40;
  left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 6px 4px; border-radius: 20px;
  border: 1px solid var(--linje); background: rgba(20, 22, 26, 0.78);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.hovedmeny .merke { display: none; }
.meny-lenke {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--svak); font-size: 12px;
}
.meny-lenke svg { width: 22px; height: 22px; }
.meny-lenke[aria-current="page"] { color: #fff; font-weight: 600; }
.meny-lenke[aria-current="page"]::after { content: ""; width: 4px; height: 4px; border-radius: 999px; background: #fff; }
.meny-lenke.butikk { color: var(--gull); }
.meny-lenke.butikk svg { filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55)); }
.meny-lenke.butikk[aria-current="page"]::after { background: var(--gull); }

@media (min-width: 1024px) {
  :root { --nav-hoyde: 0px; }
  .skall { display: grid; grid-template-columns: var(--sidemeny) minmax(0, 1fr); }
  .hovedmeny, body.uten-meny .hovedmeny {
    display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; left: auto; right: auto; bottom: auto;
    height: 100dvh; padding: 20px 12px; border-radius: 0; border: 0; border-right: 1px solid var(--linje);
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
  .hovedmeny .merke { display: flex; margin: 0 8px 18px; }
  .meny-lenke { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 10px; font-size: 15px; }
  .meny-lenke[aria-current="page"] { background: rgba(255, 255, 255, 0.06); }
  .meny-lenke[aria-current="page"]::after { display: none; }
  .meny-lenke.butikk { order: 10; margin-top: auto; }
  .innhold { padding: 8px 40px 48px; }
  body.uten-meny .innhold { padding-bottom: 48px; }
}

/* ---------- Merke / topptekst ---------- */
.merke { align-items: center; gap: 10px; }
.merke-p { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.merke-navn { font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.topp { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; }
.topp .merke { display: flex; }
.topp-hoyre { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (min-width: 1024px) { .topp .merke { display: none; } }
.skjermtopp { display: flex; align-items: center; gap: 6px; padding: 6px 0 10px; margin-left: -10px; }
.skjermtopp h1 { font-size: 20px; font-weight: 700; }
.skjermtopp .mono-tittel { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; }
.ikonknapp { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.ikonknapp svg { width: 20px; height: 20px; }

/* ---------- Piller ---------- */
.pille { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linje-sterk); background: rgba(255, 255, 255, 0.04); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; cursor: pointer; }
.pille.gull { border-color: rgba(255, 215, 0, 0.45); background: rgba(255, 215, 0, 0.08); color: #fff; font-size: 13px; letter-spacing: 0; box-shadow: 0 0 18px -6px rgba(255, 215, 0, 0.6); }
.punkt { width: 7px; height: 7px; border-radius: 999px; background: var(--mint); box-shadow: 0 0 8px rgba(38, 253, 159, 0.7); }
.demo-merke { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(245, 181, 68, 0.55); color: var(--varsel); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(245, 181, 68, 0.35); background: rgba(245, 181, 68, 0.06); color: var(--varsel); font-size: 14px; }

/* ---------- Knapper med fysisk trykk ---------- */
.knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 18px; border-radius: 14px; cursor: pointer;
  font-size: 16px; font-weight: 600; border: 1px solid var(--linje-sterk); background: var(--flate); color: var(--tekst);
  transition: transform .5s var(--fjaer), box-shadow .3s ease, background-color .2s ease, opacity .2s;
  -webkit-tap-highlight-color: transparent; text-align: center;
}
.knapp:active:not(:disabled) { transform: scale(.97); transition-duration: .12s; }
.knapp:disabled { opacity: .45; cursor: not-allowed; }
.knapp.bred { width: 100%; }
.knapp.stor { min-height: 52px; font-size: 17px; }
.knapp.hvit { background: linear-gradient(180deg, #fff, #dfe2e7); color: #000; border-color: transparent; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15), 0 10px 26px -12px rgba(255, 255, 255, 0.45); }
/* Grønn glød (design-skisser/Prototype.dc.html): 0 0 0 1px + 0 0 18px rgba(38, 253, 159,.25) */
.knapp.neste { border: 1.5px solid var(--gronn); box-shadow: 0 4px 20px var(--gronn-glod); }
.knapp.lilla { background: var(--lilla-gradient); color: var(--pa-lilla); border-color: transparent; box-shadow: 0 4px 20px var(--lilla-glod); }
.knapp.lilla-kant { border-color: rgba(152, 94, 255, 0.7); background: rgba(152, 94, 255, 0.1); }
.knapp.mint { background: var(--mint); color: #000; border-color: transparent; }
.knapp.mono-knapp { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; border-radius: 10px; }
.knapp.liten-knapp { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 10px; }
.knapp .spinn { display: none; width: 18px; height: 18px; border-radius: 999px; border: 2.5px solid currentColor; border-right-color: transparent; animation: spinn .8s linear infinite; }
.knapp.laster .spinn { display: inline-block; }
@keyframes spinn { to { transform: rotate(360deg); } }
@media (hover: hover) {
  .knapp:hover:not(:disabled) { transform: translateY(-1px); }
  .knapp.lilla:hover:not(:disabled) { box-shadow: 0 6px 26px var(--lilla-glod); }
  .meny-lenke:hover { color: #fff; }
  a.rad:hover { background: rgba(255, 255, 255, 0.03); }
}

/* ---------- Flater: bare den viktigste får dybde ---------- */
.dybde {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--kant);
  background: var(--overflate);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 30px 60px -28px rgba(0, 0, 0, 1), 0 18px 50px -30px rgba(120, 150, 190, 0.35);
}
.ramme { border: 1px solid var(--kant); border-radius: var(--radius); padding: 14px; background: var(--overflate); }
.ramme.mint-kant { border-color: rgba(38, 253, 159, 0.3); }
.etikett { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--svak); }
.etikett.mint { color: var(--mint); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack.tett { gap: 8px; }
.rad { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.rad:last-child { border-bottom: 0; }
.rad .tekst { flex: 1; min-width: 0; }
.rad .tittel { font-weight: 600; }
.rad .under { font-size: 14px; color: var(--dempet); }
.rund-ikon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 14px; }
.rund-ikon.lilla { background: rgba(152, 94, 255, 0.16); color: var(--lilla-tekst); }
.rund-ikon.mint { background: rgba(38, 253, 159, 0.1); color: var(--mint); }
.rund-ikon svg { width: 18px; height: 18px; }
.tom { padding: 14px; border: 1px dashed var(--linje); border-radius: 12px; color: var(--dempet); font-size: 14px; }

/* ---------- Bilder: uskarpt → skarpt ---------- */
.bilde-ramme { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.03); }
.bilde-ramme img { width: 100%; height: 100%; object-fit: cover; }
.avduk { opacity: 0; filter: blur(18px) saturate(.3); transform: scale(1.06); }
.avduk.klar { opacity: 1; filter: none; transform: none; transition: opacity .4s ease, filter 1.1s var(--myk), transform 1.1s var(--myk); }
.bilde-etikett { position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 12px; font-weight: 600; }
.bilde-etikett.hoyre { left: auto; right: 12px; }
.bilde-tone { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.82) 100%); pointer-events: none; }

/* ---------- Skjermer ---------- */
.skjerm { display: none; }
.skjerm.aktiv { display: block; animation: inn .45s var(--myk) both; }
@keyframes inn { from { opacity: 0; transform: translateY(8px); } }
.stor-tittel { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.niva-tittel { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.fremdrift { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.fremdrift span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.fremdrift span.fylt { height: 5px; background: var(--mint); box-shadow: 0 0 10px var(--mint-glod); }

/* Hjem */
.helt-bilde { height: 200px; } /* som i design-skisser/Prototype.dc.html, så «Aktive dueller» synes tidlig */
.helt-tekst { position: absolute; left: 16px; bottom: 14px; right: 16px; }
.helt-tekst .t { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.helt-knapper { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.hjem-grid { display: grid; gap: 32px; }
@media (min-width: 640px) { .helt-bilde { height: 340px; } }
@media (min-width: 1024px) {
  .hjem-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: 32px; }
  .helt-bilde { height: 380px; }
}

/* Nivåstige */
.ferdig-rad { display: flex; align-items: center; gap: 12px; padding: 0 4px 12px; }
.hake { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--mint); color: #000; display: flex; align-items: center; justify-content: center; }
.hake svg { width: 14px; height: 14px; }
.niva-kort { padding: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 26px 60px -30px rgba(38, 253, 159, 0.35); }
.niva-nr { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: 1.5px solid var(--mint); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; }
.kommende { display: flex; gap: 12px; color: rgba(255, 255, 255, 0.62); }
.kommende svg { width: 28px; height: 28px; flex-shrink: 0; }
.utf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.utf-knapp { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linje); background: var(--flate); cursor: pointer; text-align: left; color: var(--tekst); transition: transform .5s var(--fjaer); }
.utf-knapp:active { transform: scale(.98); transition-duration: .12s; }
.utf-knapp .poeng { font-family: var(--mono); font-size: 13px; }
.utf-knapp .poeng.mestret { color: var(--mint); }
.niva-grid { display: grid; gap: 18px; }
@media (min-width: 1024px) { .niva-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; gap: 32px; } }

/* Runde */
.runde-grid { display: grid; gap: 14px; }
.malbilde { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 50px -30px rgba(0, 0, 0, 1); aspect-ratio: 1 / 1; max-height: 52dvh; margin: 0 auto; width: 100%; }
.malbilde img { width: 100%; height: 100%; object-fit: cover; }
.forsok-kort { display: flex; gap: 12px; }
.forsok-kort .tommel { width: 84px; height: 84px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: var(--flate); }
.forsok-kort .tommel img { width: 100%; height: 100%; object-fit: cover; }
.forsok-kort .topp-linje { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.poengtall { font-family: var(--mono); font-size: 18px; }
.poengtall small { font-size: 12px; color: var(--svak); }
.prompt-felt {
  width: 100%; resize: none; padding: 12px 14px; border-radius: 12px; min-height: 76px;
  border: 1px solid rgba(38, 253, 159, 0.55); background: rgba(255, 255, 255, 0.03); color: #fff;
  font-family: inherit; font-size: 16px; line-height: 1.45; box-shadow: 0 0 0 4px rgba(38, 253, 159, 0.08);
  scroll-margin-bottom: 120px;
}
.prompt-felt:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 4px rgba(38, 253, 159, 0.16); }
.prompt-felt[aria-invalid="true"], .prompt-felt.over { border-color: var(--feil); box-shadow: 0 0 0 4px rgba(255, 123, 112, 0.12); }
.prompt-felt:disabled { opacity: .55; }
.tekst-felt { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linje-sterk); background: rgba(255, 255, 255, 0.03); color: #fff; font: inherit; font-size: 16px; }
.tekst-felt:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); }
.ordmaler { display: flex; align-items: center; gap: 10px; position: relative; }
.ordmaler .celler { flex: 1; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
/* Tom plass: mørkegrå. Brukt: lys. Bekreftet treff (fra serverens vurdering av denne teksten): grønn. */
.ordmaler .celler span { height: 6px; border-radius: 2px; background: #2a2b30; transition: background-color .25s, box-shadow .25s; }
.ordmaler .celler span.fylt { background: rgba(255, 255, 255, 0.85); }
.ordmaler .celler span.fylt.treff { background: var(--mint); box-shadow: 0 0 8px rgba(38, 253, 159, 0.45); }
.ordmaler.over .celler span.fylt { background: var(--feil); }
.ordmaler .tall { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.ordmaler.over .tall { color: var(--feil); }
.feilmelding { padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 123, 112, 0.4); background: rgba(255, 123, 112, 0.07); color: #ffc2bc; font-size: 15px; }
.status { font-family: var(--mono); font-size: 13px; color: var(--dempet); }
.forsok-merke { font-family: var(--mono); font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--linje-sterk); white-space: nowrap; }
.valg-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.valg { position: relative; }
.valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.valg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--linje); color: var(--dempet); font-size: 15px; }
.valg input:checked + span { background: var(--tekst); color: #000; border-color: #fff; }
.valg input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
@media (min-width: 640px) {
  .runde-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px; }
  .runde-grid .malbilde { position: sticky; top: 12px; max-height: none; }
}

/* Avsløring */
.to-kolonner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.spillerkort { border-radius: 16px; overflow: hidden; border: 1px solid var(--linje); background: rgba(255, 255, 255, 0.02); }
.spillerkort.vinner { border-color: rgba(38, 253, 159, 0.55); background: rgba(255, 255, 255, 0.03); box-shadow: 0 22px 46px -26px rgba(38, 253, 159, 0.55); }
.spillerkort .bilde-ramme { aspect-ratio: 1 / 1; }
.spillerkort .fot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 8px 12px; }
.spillerkort .fot .poeng { font-family: var(--mono); font-size: 24px; }
.spillerkort.vinner .fot .poeng { color: var(--mint); }
.tabell { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabell caption { text-align: left; padding-bottom: 4px; font-size: 13px; color: var(--svak); }
.tabell th { font-size: 12px; color: var(--svak); font-weight: 400; padding: 6px 0; text-align: left; }
.tabell td { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); vertical-align: top; }
.tabell .tall { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; padding-left: 10px; }
.tabell .tall.mint { color: var(--mint); }
.fasit-rad { display: flex; gap: 12px; align-items: center; }
.fasit-rad .tommel { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); }
.fasit-rad .tommel img { width: 100%; height: 100%; object-fit: cover; }
.mestring { display: flex; gap: 10px; align-items: flex-start; }
.mestring svg { flex-shrink: 0; margin-top: 2px; }
.knapperad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avs-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .avs-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: start; } }

/* Stigebattle / RepliStrike / Resultat */
.mot-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; text-align: center; }
.avatar { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: center; font-family: var(--mono); }
.avatar.deg { border-color: #fff; background: none; }
.kurve { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; }
.kurve span { border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, 0.45); }
.kurve span:last-child { background: var(--mint); box-shadow: 0 0 18px rgba(38, 253, 159, 0.35); }
.kurve-navn { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.75); }
.strike { text-align: center; background: radial-gradient(ellipse 70% 45% at 50% 32%, rgba(38, 253, 159, 0.12), transparent 70%); padding: 12px 0; }
.strike .tittel { font-family: var(--mono); font-size: 34px; font-weight: 600; letter-spacing: .06em; color: var(--mint); }
.runder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-family: var(--mono); font-size: 11px; text-align: center; }
.runder li { padding: 8px 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.72); }
.runder li.seier { background: var(--mint); color: #000; border-color: var(--mint); }
.delekort { padding: 18px; border-radius: 16px; border: 1px solid var(--mint); background: linear-gradient(160deg, rgba(38, 253, 159, 0.12), rgba(0, 0, 0, 0.9) 55%); box-shadow: 0 0 0 4px rgba(38, 253, 159, 0.08), 0 30px 60px -30px rgba(38, 253, 159, 0.45); }
.delekort .bilde-ramme { aspect-ratio: 1 / 1; border-radius: 8px; }
.smal { max-width: 560px; }
@media (min-width: 1024px) { .smal { margin: 0 auto; } }

/* Dueller / profil */
.modus-kort { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modus-kort a, .modus-kort button { padding: 14px; text-align: left; min-height: 76px; }
.profil-tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profil-tall .v { font-weight: 600; }
.historikk { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.historikk li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.historikk .tall { font-family: var(--mono); color: var(--dempet); }
.seier { color: var(--mint); }
.duell-grid { display: grid; gap: 20px; }
@media (min-width: 1024px) { .duell-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.romkode { font-family: var(--mono); font-size: 34px; letter-spacing: .2em; }
.felt-rad { display: flex; gap: 8px; }
.felt-rad .tekst-felt { flex: 1; min-width: 0; }
.butikk-pris { font-family: var(--mono); font-size: 32px; font-weight: 600; color: var(--gull); }
.innholdsliste { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Dialog */
.dialog { max-width: 460px; width: calc(100% - 32px); padding: 22px; border-radius: 18px; color: var(--tekst); background: #0b0c0f; border: 1px solid var(--linje-sterk); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.75); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-hoyde) + 24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: #16181c; border: 1px solid var(--linje-sterk); font-size: 15px; box-shadow: 0 20px 40px -20px #000; }

/* Redusert bevegelse: alt av */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .avduk { opacity: 1; filter: none; transform: none; }
}

/* Stilvelgeren: tre like brede valg på én rad, både på mobil og PC */
#runde-stil, #lag-stil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 420px; }
#runde-stil .valg span, #lag-stil .valg span { width: 100%; justify-content: center; padding: 0 8px; }

/* Øving: små sekundærlenker under skjemaet */
.runde-lenker { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 4px; }
.runde-lenke { display: inline-flex; flex-direction: column; min-height: 44px; justify-content: center; color: var(--tekst); }
.runde-lenke .tittel { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.runde-lenke .under { font-size: 13px; color: var(--dempet); }

/* Delingskort (forhåndsvisning) */
.delekort-forhand img { display: block; width: 100%; max-width: 420px; aspect-ratio: 1080 / 1350; margin: 0 auto; border-radius: 16px; border: 1px solid var(--linje); background: #0a0a0a; }
.delekort-forhand figcaption { text-align: center; margin-top: 8px; }

/* Et godt resultat (beregnet poeng ≥ 60) får en rolig glød. Ingen bevegelse ved redusert bevegelse. */
.spillerkort.godt .bilde-ramme { box-shadow: 0 0 0 2px var(--mint), 0 0 28px rgba(38, 253, 159, .35); animation: glod 1.6s ease-out 1; }
@keyframes glod { from { box-shadow: 0 0 0 0 var(--mint), 0 0 0 rgba(38, 253, 159, 0); } }
@media (prefers-reduced-motion: reduce) { .spillerkort.godt .bilde-ramme { animation: none; } }

/* Frist og status i duellrommet */
.frist { font-family: var(--mono); font-size: 13px; color: var(--mint); }

/* ---------- Logo: «repli» tynn mint, «duel» fet lilla (Sora) ---------- */
:root { --logo: "Sora", var(--system); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.logo-symbol { width: 30px; height: 30px; flex-shrink: 0; }
.logo-ord { font-family: var(--logo); font-size: 20px; letter-spacing: -.03em; line-height: 1; }
.logo-repli { font-weight: 300; color: var(--mint); }
.logo-duel { font-weight: 700; color: var(--lilla-tekst); }

/* ---------- Testversjon: butikk skjult (VIS_BUTIKK = false i pf/innstillinger.js) ---------- */
body.uten-butikk .meny-lenke.butikk, body.uten-butikk #hjem-kreditter, body.uten-butikk .bare-butikk { display: none !important; }
body.uten-butikk .hovedmeny { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- «Reduser effekter» slår av blink, risting og animasjoner ---------- */
body.rolig *, body.rolig *::before, body.rolig *::after { animation: none !important; transition: none !important; }
.bryter-rad { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; }
.bryter-rad input { width: 22px; height: 22px; accent-color: var(--mint); flex-shrink: 0; }

/* ---- Regelversjon 2: teksttreff, valg av svar, lås ---- */
.treff-rad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.treff { padding: 6px 2px; border-radius: 10px; text-align: center; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.72); border: 1px dashed rgba(255, 255, 255, 0.3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.treff.ja { background: rgba(38, 253, 159, 0.16); color: #b9f5d6; border: 1px solid rgba(38, 253, 159, 0.6); }
.lyn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(38, 253, 159, 0.12); border: 1px solid rgba(38, 253, 159, 0.55); box-shadow: 0 0 18px rgba(38, 253, 159, 0.25); font-family: var(--sora, inherit); font-weight: 800; color: #e9fff4; text-align: center; animation: lyn .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes lyn { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.08); } 45% { transform: scale(1); } 100% { opacity: 1; } }
.send-rad { display: flex; gap: 8px; }
.send-rad #runde-send { flex: 1; }
.send-rad #runde-hint { min-height: 48px; padding: 0 14px; flex-shrink: 0; }
.info-boks { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); font-size: 14px; }
.svar-valg { text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.02); color: #fff; cursor: pointer; font: inherit; width: 100%; min-height: 44px; }
.svar-valg[aria-pressed="true"] { border: 2px solid var(--mint); background: rgba(38, 253, 159, 0.07); box-shadow: 0 0 14px rgba(38, 253, 159, 0.25); }
.svar-valg .topp { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.svar-valg .merke { font-weight: 700; }
.svar-valg[aria-pressed="true"] .merke { color: var(--mint); }
.svar-valg .tekst { display: block; overflow-wrap: anywhere; }
.svar-valg .tilbake { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.zoom-knapp { position: absolute; right: 8px; bottom: 8px; padding: 3px 10px; min-height: 32px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.72); color: #fff; font: inherit; font-size: 12px; cursor: zoom-in; }
.zoom-lag { position: fixed; inset: 0; z-index: 60; padding: 16px; border: 0; background: rgba(0, 0, 0, 0.94); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: zoom-out; font: inherit; }
.zoom-lag[hidden] { display: none; }
.zoom-lag img { max-width: 100%; max-height: 80dvh; object-fit: contain; }

/* Resultat (regelversjon 2) */
.res2 { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.res2-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.res2-bilder figure { margin: 0; }
.res2-bilder img, .res2-tom { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); display: block; box-sizing: border-box; }
.res2-tom { border-style: dashed; border-color: rgba(255, 255, 255, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.res2-bilder figcaption { margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.75); }
.res2-poeng { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.res2-poeng small { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.res2-venn { padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(152, 94, 255, 0.5); background: rgba(152, 94, 255, 0.07); }
.res2-venn.venter { border-style: dashed; background: none; }
.res2-to { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

/* Korte regler før første runde */
.regler-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.regler-liste li { display: flex; gap: 12px; }
.regler-liste .nr { font-family: var(--mono); color: var(--mint); text-shadow: 0 0 10px rgba(38, 253, 159, 0.3); }
@media (prefers-reduced-motion: reduce) { .lyn { animation: none; } }

/* Bildekreditter (fase 2) */
.knapp.gull-kant { border: 1px solid rgba(255, 215, 0, 0.6); background: rgba(255, 215, 0, 0.1); color: #fff; }
.res2-feil { padding: 10px 12px; border-radius: 12px; border: 1px solid #ff8a7e; background: rgba(255, 138, 126, 0.08); font-size: 14px; }
.res2-bilder img.res2-eget { border: 2px solid var(--mint); box-shadow: 0 0 20px rgba(38, 253, 159, 0.25); }
.skjelett { position: relative; overflow: hidden; }
.skjelett::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .1) 45%, transparent 70%); transform: translateX(-100%); animation: glans 1.6s ease-in-out infinite; }
@keyframes glans { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skjelett::after { animation: none; } }
#hjem-bildekreditter[hidden] { display: none; }

/* Aktive dueller (fase 3) – merker som i design-skisser/Prototype.dc.html */
.duell-merke { padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.duell-merke.din_tur { background: var(--lilla-gradient); color: var(--pa-lilla); box-shadow: 0 4px 20px var(--lilla-glod); }
.duell-merke.venter { border: 1px dashed rgba(152, 94, 255, 0.7); color: #e2d4ff; }
.duell-merke.ferdig { border: 1px solid var(--mint); color: #b9f5d6; box-shadow: 0 0 12px rgba(38, 253, 159, 0.25); }
.duell-merke.utlopt, .duell-merke.feil { border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.75); }

/* «Nytt treff!»: kort, lokal lyn-effekt ved ordlinjen (bare etter et forsøk sendt på denne siden). */
.nytt-treff { position: absolute; right: 0; bottom: calc(100% + 6px); margin: 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px; background: rgba(38, 253, 159, 0.14); border: 1px solid rgba(38, 253, 159, 0.6);
  box-shadow: 0 0 18px rgba(38, 253, 159, 0.25); color: #e9fff4; font-size: 13px; font-weight: 800; white-space: nowrap; pointer-events: none; }
.nytt-treff .lyn-ikon { color: var(--mint); }
.nytt-treff.spill { animation: nyttTreff 2.2s ease-out both; }
.nytt-treff.spill .lyn-ikon { display: inline-block; animation: lynSlag .6s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes nyttTreff { 0% { opacity: 0; transform: translateY(4px) scale(.9); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lynSlag { 0% { transform: scale(.4) rotate(-12deg); } 50% { transform: scale(1.35) rotate(6deg); } 100% { transform: none; } }
.treff.ny { animation: treffNy 1s ease-out both; }
@keyframes treffNy { 0% { box-shadow: 0 0 0 0 rgba(38, 253, 159, 0.7); } 100% { box-shadow: 0 0 0 8px rgba(38, 253, 159, 0); } }
.skjult-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Redusert bevegelse (system eller «Reduser effekter»): bare en rolig, statisk merkelapp. */
@media (prefers-reduced-motion: reduce) { .nytt-treff.spill, .nytt-treff.spill .lyn-ikon, .treff.ny { animation: none; } }
body.rolig .nytt-treff.spill, body.rolig .nytt-treff.spill .lyn-ikon, body.rolig .treff.ny { animation: none; }

/* Liten metadata (dato, frist) i pilleformede bokser */
.meta-pille { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 4px 10px; border-radius: 999px;
  background: var(--overflate); border: 1px solid rgba(255, 255, 255, .08); color: var(--tekst-dempet); font-size: 13px; }
.meta-pille:empty { display: none; }
.res2-venn, .svar-valg, .info-boks, .utf-knapp { background: var(--overflate); border-radius: var(--radius); }

/* Mine resultater */
.mres-bilde { width: 52px; height: 52px; flex-shrink: 0; border-radius: 10px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); }
.tom-bilde { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 10px; color: var(--tekst-dempet); }

/* Annonseplasser (av til annonser og samtykke er klart) */
.annonseplass { min-height: 58px; border: 1px dashed rgba(255, 255, 255, .15); border-radius: var(--radius); }

/* Annonseplass under resultatet: tydelig adskilt fra spillknappene */
.resultat-annonse { margin-top: 32px; padding: 8px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--kant); }
.resultat-annonse[hidden] { display: none; }
.annonse-merke { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-dempet); }

/* Ord-for-ord-sjekk: låste ord (maskert), lyn på ordlinjen og grønn glød. Ingen AI-kall, bare CSS. */
.laast-rad { display: flex; flex-wrap: wrap; gap: 6px; }
.laast-brikke { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: 999px; background: rgba(38, 253, 159, 0.12);
  border: 1px solid rgba(38, 253, 159, 0.55); color: #e9fff4; font-size: 13px; user-select: none; box-shadow: 0 0 12px rgba(38, 253, 159, 0.25); }
.laast-brikke .maske { letter-spacing: 1px; margin-right: 6px; }
.ordmaler .celler span { position: relative; }
.ordmaler .celler span.last { background: var(--mint); box-shadow: 0 0 8px rgba(38, 253, 159, 0.55); }
.ordmaler .celler span.slag { animation: ordLyn .9s ease-out both; }
.ordmaler .celler span.slag::after { content: "⚡"; position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 14px; line-height: 1; animation: ordLynIkon .9s ease-out both; }
@keyframes ordLyn { 0%, 30% { background: #fff6a8; box-shadow: 0 0 14px 4px rgba(255, 246, 168, 0.95); } 100% { background: var(--mint); box-shadow: 0 0 8px rgba(38, 253, 159, 0.55); } }
@keyframes ordLynIkon { 0% { opacity: 0; transform: translateX(-50%) scale(.4); } 25% { opacity: 1; transform: translateX(-50%) scale(1.3); } 100% { opacity: 0; transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ordmaler .celler span.slag, .ordmaler .celler span.slag::after { animation: none; } .ordmaler .celler span.slag::after { display: none; } }
body.rolig .ordmaler .celler span.slag, body.rolig .ordmaler .celler span.slag::after { animation: none; }
body.rolig .ordmaler .celler span.slag::after { display: none; }

/* Profil 2028: nesten svart, mørke kort, diskret grønn/lilla glød. Mobil først. */
.profil2 { display: grid; gap: 28px; max-width: 760px; margin: 0 auto; padding: 8px 0 32px; }
.seksjon { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-dempet, #94A3B8); margin: 0 0 10px; }
.spillerkort { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 24px; background: var(--overflate);
  border: 1px solid var(--kant); box-shadow: 0 0 0 1px rgba(157, 107, 255, .15), 0 8px 40px rgba(157, 107, 255, .18), 0 0 30px rgba(38, 253, 159, .08); }
.avatar { flex: none; width: 88px; height: 88px; border-radius: 22px; padding: 6px; background: #0B0B0C; border: 1px solid rgba(38, 253, 159, .4); box-shadow: 0 0 20px rgba(38, 253, 159, .25); }
.spillerkort-tekst { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.profil-navn { font-size: clamp(26px, 8vw, 38px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; overflow-wrap: anywhere; margin: 0; }
.prestasjoner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kort { border: 1px solid var(--kant); border-radius: var(--radius); padding: 16px; background: var(--overflate); }
.liten-kort { display: grid; gap: 4px; }
.liten-kort.gronn { box-shadow: 0 4px 20px rgba(38, 253, 159, .15); border-color: rgba(38, 253, 159, .3); }
.liten-kort.lilla { box-shadow: 0 4px 20px var(--lilla-glod); border-color: rgba(157, 107, 255, .4); }
.tall-stor { font-size: 30px; font-weight: 800; font-family: var(--mono); line-height: 1.1; margin: 0; }
.kredittkort { display: grid; gap: 12px; box-shadow: 0 4px 24px rgba(38, 253, 159, .1); }
.kreditt-tall { display: flex; align-items: baseline; gap: 6px; }
.kortliste { display: grid; gap: 10px; }
.rad-kort { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.rad-kort .tekst { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tom-kort { display: grid; gap: 12px; text-align: center; justify-items: stretch; }
.pille-merke { justify-self: start; padding: 2px 10px; border-radius: 999px; background: rgba(38, 253, 159, .12); color: var(--mint); font-size: 12px; }
.navn-rad { display: flex; gap: 8px; align-items: center; }
.navn-rad .tekst-felt { flex: 1; min-width: 0; }
.terning { font-size: 20px; min-width: 44px; min-height: 44px; }
.dempet-knapp { background: transparent; color: var(--tekst-dempet, #94A3B8); border-color: transparent; }
@media (min-width: 720px) { .prestasjoner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spillerkort { justify-content: flex-start; }

/* RepliRise: luftigere seksjoner, regelliste med ikoner, kurve som vokser én gang. */
.stige-side { gap: 28px; }
.stige-side .dempet, .stige-side .kurve-navn { color: #94A3B8; }
.regelliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.regelliste li { display: flex; align-items: flex-start; gap: 12px; }
.regelliste svg { flex: none; width: 22px; height: 22px; color: var(--mint); margin-top: 1px; }
.stige-side .kurve span { transform-origin: bottom; animation: kurveOpp .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.stige-side .kurve span:nth-child(2) { animation-delay: .07s; }
.stige-side .kurve span:nth-child(3) { animation-delay: .14s; }
.stige-side .kurve span:nth-child(4) { animation-delay: .21s; }
.stige-side .kurve span:nth-child(5) { animation-delay: .28s; }
@keyframes kurveOpp { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .stige-side .kurve span { animation: none; } }
body.rolig .stige-side .kurve span { animation: none; }

/* Intro: to firkanter skyter inn fra hver sin side og kolliderer. Lysglimt, sjokkbølge, gnister og et kort
   skjermrist setter logoen sammen; «repli» og «duel» stemples inn. Maks 2,5 s, bare CSS. */
#intro { position: fixed; inset: 0; z-index: 9999; background: radial-gradient(circle at 50% 42%, rgba(157, 107, 255, .14), rgba(38, 253, 159, .05) 35%, rgba(11, 11, 12, 0) 65%), #0B0B0C;
  display: flex; align-items: center; justify-content: center; overflow: hidden; animation: introUt .35s ease 2s forwards; }
#intro.slutt, html.uten-intro #intro { display: none; }
.intro-scene { display: flex; flex-direction: column; align-items: center; gap: 22px; animation: introRist .32s linear .54s both; }
.intro-logo { position: relative; width: 150px; height: 150px; }
.intro-logo svg { overflow: visible; }
.intro-logo svg rect, .intro-logo svg path { transform-box: fill-box; transform-origin: center; }
.intro-gronn { animation: introGronn .95s cubic-bezier(.5, 0, .75, 1) both; }
.intro-lilla { animation: introLilla .95s cubic-bezier(.5, 0, .75, 1) both; }
.intro-pop { animation: introPop .45s cubic-bezier(.34, 1.56, .64, 1) .62s both; }
.intro-glimt, .intro-bolge, .intro-gnist { position: absolute; left: 50%; top: 50%; border-radius: 999px; pointer-events: none; opacity: 0; }
.intro-glimt { width: 120px; height: 120px; margin: -60px 0 0 -60px; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); animation: introGlimt .6s ease-out .54s both; }
.intro-bolge { width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 3px solid rgba(38, 253, 159, .8); box-shadow: 0 0 24px rgba(157, 107, 255, .6); animation: introBolge .8s cubic-bezier(.2, .8, .3, 1) .54s both; }
.intro-gnist { width: 7px; height: 7px; margin: -3px 0 0 -3px; background: #fff; animation: introGnist .75s cubic-bezier(.15, .8, .3, 1) .54s both; }
.intro-gnister { position: absolute; inset: 0; }
.intro-gnist:nth-child(3n) { background: #26FD9F; box-shadow: 0 0 8px #26FD9F; }
.intro-gnist:nth-child(3n+1) { background: #C49BFF; box-shadow: 0 0 8px #985EFF; }
.intro-gnist:nth-child(1) { --x: 120px; --y: -40px; } .intro-gnist:nth-child(2) { --x: 90px; --y: 80px; } .intro-gnist:nth-child(3) { --x: -110px; --y: -60px; }
.intro-gnist:nth-child(4) { --x: -80px; --y: 90px; } .intro-gnist:nth-child(5) { --x: 20px; --y: -130px; } .intro-gnist:nth-child(6) { --x: -30px; --y: 130px; }
.intro-gnist:nth-child(7) { --x: 150px; --y: 30px; } .intro-gnist:nth-child(8) { --x: -150px; --y: 20px; } .intro-gnist:nth-child(9) { --x: 60px; --y: -100px; }
.intro-gnist:nth-child(10) { --x: -60px; --y: -110px; } .intro-gnist:nth-child(11) { --x: 100px; --y: 110px; } .intro-gnist:nth-child(12) { --x: -100px; --y: 110px; }
.intro-ord { margin: 0; font-size: 46px; letter-spacing: -.03em; font-family: var(--system); }
.intro-repli, .intro-duel { display: inline-block; animation: introAvdekk .4s cubic-bezier(.22, 1, .36, 1) both; }
.intro-repli { font-weight: 300; color: #26FD9F; animation-delay: .9s; }
.intro-duel { font-weight: 700; color: #C49BFF; animation-delay: 1.05s; }
@keyframes introGronn { 0% { opacity: 0; transform: translate(-220px, 0) rotate(-25deg); } 10% { opacity: 1; } 57% { transform: translate(13px, 13px) rotate(0); } 100% { transform: none; opacity: 1; } }
@keyframes introLilla { 0% { opacity: 0; transform: translate(220px, 0) rotate(25deg); } 10% { opacity: 1; } 57% { transform: translate(-13px, -13px) rotate(0); } 100% { transform: none; opacity: 1; } }
@keyframes introPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes introGlimt { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes introBolge { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(5); } }
@keyframes introGnist { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0); } }
@keyframes introRist { 0%, 100% { transform: translate(0, 0); } 15% { transform: translate(-7px, 4px); } 35% { transform: translate(6px, -5px); } 55% { transform: translate(-4px, -3px); } 75% { transform: translate(3px, 3px); } }
/* Ordene avdekkes fra venstre med blur. Ingen sprett. */
@keyframes introAvdekk { from { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(6px); } to { opacity: 1; clip-path: inset(0 0 0 0); filter: none; } }
/* Slagordet: bokstavavstanden trekker seg sammen. */
@keyframes introSammen { from { opacity: 0; letter-spacing: .16em; } to { opacity: 1; letter-spacing: -.02em; } }
/* Undertittelen: rolig blur-inn. */
@keyframes introBlurInn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }
@keyframes introUt { to { opacity: 0; visibility: hidden; } }
/* Redusert bevegelse: ferdig logo uten effekter. Den globale regelen slår av animasjoner, og et skript lukker introen etter 0,5 s. */
@media (prefers-reduced-motion: reduce) { .intro-glimt, .intro-bolge, .intro-gnist { display: none; } }
html.intro-rolig .intro-glimt, html.intro-rolig .intro-bolge, html.intro-rolig .intro-gnist { display: none; }
html.intro-rolig #intro, html.intro-rolig #intro * { animation: none !important; }

/* RepliRival (duellskjermen etter oppretting): enkel, sentrert og fyller skjermhøyden. */
[data-skjerm="duell"] .skjermtopp { border-bottom: 0; }
.rival-vent { min-height: calc(100dvh - 190px); justify-content: center; text-align: center; gap: 18px; }
.rival-navn { margin: 0; font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.rival-pille { justify-self: center; display: inline-block; margin: 0 auto; padding: 6px 14px; border-radius: 999px; background: rgba(157, 107, 255, .14); border: 1px solid rgba(157, 107, 255, .4); color: #C49BFF; font-size: 14px; letter-spacing: .08em; }
.rival-tilbud { margin: 0; }
.meny-dots { align-self: center; margin-top: 8px; }
.meny-dots summary { list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--tekst-dempet); border-radius: 999px; }
.meny-dots summary::-webkit-details-marker { display: none; }
.meny-dots[open] summary { color: #fff; }

/* Regler: sentrert, uskarpt målbilde bak et glasskort. */
.skjerm.aktiv[data-skjerm="regler"] { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100dvh - 130px); isolation: isolate; }
.regler-bg { position: fixed; inset: 0; z-index: -1; background: #0B0B0C center / cover no-repeat; filter: blur(28px) brightness(.55); transform: scale(1.15); }
.regler-bg::after { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 12, .55), rgba(11, 11, 12, .85)); }
.glass-kort { width: min(560px, 100%); padding: 28px 24px; border-radius: 24px; background: rgba(22, 23, 26, .6); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 8px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(38, 253, 159, .08); }

/* Spillskjerm og resultat: fyller høyden og sentrerer; på PC er bilde og skrivefelt like høye. */
.skjerm.aktiv[data-skjerm="runde"], .skjerm.aktiv[data-skjerm="avsloring"] { display: flex; flex-direction: column; justify-content: center; min-height: calc(100dvh - 120px); }
@media (min-width: 1024px) {
  .skjerm.aktiv[data-skjerm="runde"], .skjerm.aktiv[data-skjerm="avsloring"] { min-height: calc(100dvh - 70px); }
  .runde-grid { align-items: stretch; }
  .runde-grid .malbilde { position: relative; height: 100%; }
  .runde-grid .malbilde img { height: 100%; object-fit: cover; }
}
.min-tekst { margin: 0 0 6px; } .min-tekst summary { cursor: pointer; color: var(--tekst-dempet); min-height: 32px; display: flex; align-items: center; }
@media (min-width: 1024px) {
  .runde-grid > :last-child { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; border-radius: 24px; background: var(--overflate); border: 1px solid var(--kant); }
  .runde-grid { max-width: 1040px; margin: 0 auto; width: 100%; }
  .res2 { margin: 0 auto; }
}
.skjerm.aktiv[data-skjerm="regler"] { min-height: calc(100dvh - 90px); }

/* Intro-slagord: stor tekst, og rett under en mindre, dempet linje som toner inn like etter. */
.intro-scene { gap: 14px; }
.intro-slagord { white-space: nowrap; height: 1.25em; line-height: 1.25; margin: 10px 0 0; font-size: clamp(24px, 7vw, 32px); font-weight: 700; letter-spacing: -.02em; text-align: center; color: #fff; animation: introSammen .45s cubic-bezier(.22, 1, .36, 1) 1.3s both; }
.intro-under { white-space: nowrap; height: 1.4em; line-height: 1.4; margin: -6px 0 0; font-size: 16px; text-align: center; color: #94A3B8; animation: introBlurInn .4s ease 1.6s both; }

/* Lynet i logoen kommer med det hvite feltet i introen. */
.intro-lyn { animation: introPop .4s cubic-bezier(.34, 1.56, .64, 1) .72s both; transform-box: fill-box; transform-origin: center; }
.del-via { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* QR-deling: lys flate i mørk glassramme med gradientkant grønn → lilla og svak glød. */
.qr-boks { display: grid; gap: 10px; justify-items: center; }
.qr-ramme { padding: 12px; border: 0; border-radius: 28px; cursor: pointer; line-height: 0;
  background: linear-gradient(rgba(22, 23, 26, .92), rgba(22, 23, 26, .92)) padding-box, linear-gradient(135deg, #26FD9F, #9D6BFF) border-box; border: 3px solid transparent;
  box-shadow: 0 0 36px rgba(157, 107, 255, .3), 0 0 16px rgba(38, 253, 159, .15); }
.qr-ramme canvas { width: min(280px, 70vw); height: auto; aspect-ratio: 1; border-radius: 18px; display: block; }
.qr-full { position: fixed; inset: 0; z-index: 9998; background: #0B0B0C; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; cursor: pointer; }
.qr-full[hidden] { display: none; }
.qr-full canvas { width: min(92vw, 78vh); height: auto; aspect-ratio: 1; border-radius: 28px; box-shadow: 0 0 60px rgba(157, 107, 255, .35); }

/* ---------- RepliRival (etter oppretting) – etter design-skisser/RivalVent.dc.html ---------- */
.skjerm.aktiv[data-skjerm="duell"] .rv:not([hidden]) { display: block; }
.rv { position: relative; overflow: hidden; isolation: isolate; border-radius: 0; min-height: calc(100dvh - 100px); display: flex; justify-content: center; align-items: center; font-family: "Sora", var(--system); color: #fff; }
.rv[hidden] { display: none; }
.rv-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) saturate(1.2); opacity: .35; z-index: -2; }
.rv-skygge { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(11, 11, 12, .3), rgba(11, 11, 12, .95) 75%); }
.rv-innhold { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding: 24px 16px 110px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rv-topp { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.rv-tittel { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .08em; color: #C49BFF; }
.rv-rund { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #fff; font-size: 18px; cursor: pointer; list-style: none; text-decoration: none; }
.rv-rund::-webkit-details-marker { display: none; }
.rv-meny { position: relative; }
.rv-meny-boks { position: absolute; right: 0; top: 52px; z-index: 5; width: 260px; padding: 8px; border-radius: 16px; background: #16171A; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
.rv a:focus-visible, .rv button:focus-visible, .rv summary:focus-visible { outline: 2px solid #26FD9F; outline-offset: 3px; }
.rv-spillere { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.rv-spiller { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.rv-avatar, .rv-avatar-liten { width: 76px; height: 76px; border-radius: 999px; padding: 2px; background: linear-gradient(135deg, #26FD9F, #9D6BFF); box-shadow: 0 0 24px rgba(38, 253, 159, .25); display: flex; }
.rv-avatar span, .rv-avatar-liten { align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }
.rv-avatar span { flex: 1; border-radius: 999px; background: #16171A; display: flex; align-items: center; justify-content: center; }
.rv-ukjent { width: 76px; height: 76px; border-radius: 999px; border: 1px dashed rgba(196, 155, 255, .6); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #C49BFF; animation: rvPuls 2.2s ease-out infinite; }
.rv-navn { font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.rv-dempet { color: #94A3B8; } .rv-liten { font-size: 13px; } .rv-sentrert { text-align: center; margin: 0; }
.rv-status { font-size: 12px; } .rv-gronn { color: #26FD9F; } .rv-lilla { color: #C49BFF; }
.rv-vs { font-size: 30px; font-weight: 800; letter-spacing: .02em; background: linear-gradient(135deg, #26FD9F, #C49BFF); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(157, 107, 255, .4)); }
.rv-bilde { margin: 0; width: 100%; position: relative; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(38, 253, 159, .7), rgba(157, 107, 255, .7)); box-shadow: 0 20px 60px -20px rgba(157, 107, 255, .45); }
.rv-bilde img { display: block; width: 100%; height: 230px; object-fit: cover; border-radius: 19px; background: #16171A; }
.rv-bilde figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 6px; }
.rv-bilde figcaption span { padding: 5px 10px; border-radius: 999px; background: rgba(11, 11, 12, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); font-size: 12px; }
.rv-frist { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(22, 23, 26, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08); }
#rom-ring-fyll { filter: drop-shadow(0 0 4px rgba(38, 253, 159, .6)); }
.rv-frist-tekst { font-weight: 600; }
.rv-kode { font-family: "Geist Mono", monospace; font-size: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(157, 107, 255, .15); color: #C49BFF; }
.rv-handling { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rv-del { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 8px 0 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; color: #fff; font-family: "Sora", var(--system); font-size: 16px; font-weight: 600;
  background: linear-gradient(#141418, #141418) padding-box, linear-gradient(135deg, #26FD9F, #9D6BFF) border-box; box-shadow: 0 0 24px rgba(38, 253, 159, .18), 0 0 32px rgba(157, 107, 255, .2); transition: transform .3s ease, box-shadow .3s; }
.rv-del:hover { transform: translateY(-1px); } .rv-del:active { transform: scale(.97); }
.rv-del-ikon { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(135deg, #9D6BFF, #C49BFF); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px rgba(157, 107, 255, .55); }
.rv-qr { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(22, 23, 26, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08); max-width: 100%; }
.rv-qr-knapp { flex: none; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 12px; background: #F4F4F6; cursor: pointer; line-height: 0; overflow: hidden; }
.rv-qr-knapp canvas { width: 100%; height: 100%; display: block; }
.rv-qr-tekst { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
.rv-qr-tittel { font-weight: 600; }
.rv-lenke { margin-top: 6px; padding: 6px 0; min-height: 32px; background: none; border: 0; color: #C49BFF; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.rv-sek { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.rv-sek[hidden], .rv-del[hidden], .rv-qr[hidden] { display: none; }
.rv-inn { animation: rvInn .8s cubic-bezier(.16, 1, .3, 1) both; } .rv-i2 { animation-delay: .1s; } .rv-i3 { animation-delay: .2s; } .rv-i4 { animation-delay: .3s; }
@keyframes rvInn { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes rvPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(157, 107, 255, .45); } 50% { box-shadow: 0 0 0 14px rgba(157, 107, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .rv-inn, .rv-ukjent { animation: none; } .rv-del { transition: none; } }
body.rolig .rv-inn, body.rolig .rv-ukjent { animation: none; }
@media (min-width: 720px) { .rv-innhold { max-width: 520px; } .rv-bilde img { height: 280px; } }
.rv-avatar-liten { background: linear-gradient(#16171A, #16171A) padding-box, linear-gradient(135deg, #26FD9F, #9D6BFF) border-box; border: 2px solid transparent; padding: 0; box-sizing: border-box; }
#runde-prompt { min-height: 48px; padding-top: 12px; padding-bottom: 12px; resize: none; overflow-y: auto; }

/* Konkurranserunden: statuslinje, låste (grønne) ord og haster-farge. */
.runde-status2 { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--tekst-dempet); }
.runde-status2.haster { color: #ffb4a8; }
.laast-brikke { background: rgba(38, 253, 159, .16); border-color: #26FD9F; color: #eafff5; font-size: 15px; user-select: auto; }

/* Ledertavle (Dagens bilde): kort, faner og liste. Paletten som ellers. */
.ledertavle { background: var(--overflate); border: 1px solid var(--kant); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.ledertavle h2 { margin: 0; font-size: 18px; }
.faner { display: flex; gap: 8px; }
.fane { flex: 1; min-height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.fane[aria-pressed="true"] { background: linear-gradient(135deg, #9D6BFF, #C49BFF); color: #0B0B0C; border-color: transparent; }
.tavle-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tavle-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.tavle-liste li.meg { background: rgba(38, 253, 159, .1); box-shadow: inset 0 0 0 1px rgba(38, 253, 159, .45); }
.tavle-liste .plass { font-family: var(--mono); color: var(--mint); }
.tavle-liste .navn { overflow-wrap: anywhere; font-weight: 600; }
.tavle-liste .tall { font-size: 13px; color: var(--tekst-dempet); text-align: right; }
.venneliste { display: grid; gap: 6px; }
.venn { display: flex; justify-content: space-between; align-items: center; gap: 8px; }