/* UNDERSIDENE I LANGHUSET (25.10.2026). KM: «ui på the beacons», «du må og fikse
   the web», «the watchhold må også fikses». Same verd som hovudmenyen (DESIGN.md):
   ei måla 3:2-scene som skalerer til vindauget, skoren Cinzel, Georgia som blekk,
   eik frå planke.webp, frost = spel, glød = det som er ditt. Ingen backdrop-filter.
   Kunst: public/bilete/skjermar/ (tools/meny/lag_skjermar.py). Tekst er alltid HTML. */

.lag.lh-skjerm {
  --bein: #eadcc2;
  --messing: #c9a86a;
  --frost: #9fd8ff;
  --glod: #ffb35c;
  --sot: #0b0807;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sot);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--bein);
}
.lag.lh-skjerm::before {                  /* plata utanfor 3:2-scena: mørk og uskarp */
  content: "";
  position: absolute;
  inset: -80px;
  background: var(--plate) center / cover no-repeat;
  filter: blur(28px) brightness(.4);
  pointer-events: none;
}
.lh-scene {
  position: relative;
  width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  container-type: size;
  font-family: Georgia, 'Times New Roman', serif;
}
.lh-scene::after {                        /* kantane glir ut i det uskarpe */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 5cqw 1.5cqw var(--sot);
  pointer-events: none;
}

/* ── Tittel og line, skore og skrive rett på biletet ── */
.lh-skjermtopp {
  position: absolute;
  left: 22%; right: 22%; top: 2.6%;
  text-align: center;
  z-index: 3;
}
.lh-skjermtittel {
  margin: 0;
  padding-left: .18em;
  font: 700 2.5cqw/1.05 'Cinzel', Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #c9ae84;
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: 0 -.08cqw 0 rgba(0, 0, 0, .92), 0 .07cqw 0 rgba(255, 186, 120, .26), 0 0 1cqw rgba(0, 0, 0, .9);
}
.lh-skjermlina {
  display: flex; align-items: center; justify-content: center; gap: .8cqw;
  margin: .5cqw auto 0;
  max-width: 48cqw;
  font: italic max(12px, .95cqw)/1.35 Georgia, serif;
  color: #c9b99c;
  text-shadow: 0 0 .5cqw #000, 0 .08cqw .15cqw #000;
  text-wrap: balance;
}

/* ── Plankeknappen (eik frå menyen) ── */
.lh-skjerm .lh-plankeknapp {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6cqw;
  height: max(34px, 3.05cqw); padding: 0 2cqw;
  font: 600 max(13px, 1.08cqw)/1 Georgia, serif; letter-spacing: .01em;
  color: #ecdec4;
  text-shadow: 0 .1cqw .2cqw rgba(0, 0, 0, .95);
  background: none; border: none; border-radius: 0; box-shadow: none;
  white-space: nowrap;
  transition: translate .2s cubic-bezier(.2, .8, .2, 1);
}
.lh-skjerm .lh-plankeknapp::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url('/bilete/meny/planke.webp') center / 100% 100% no-repeat;
  filter: brightness(.42) saturate(.72);
  transition: filter .2s;
}
.lh-skjerm .lh-plankeknapp:hover { translate: 0 -.12cqw; color: #fff; background: none; transform: none; }
.lh-skjerm .lh-plankeknapp:hover::before { filter: brightness(.6) saturate(.8); }
.lh-skjerm .lh-plankeknapp:disabled { opacity: .55; }
.lh-skjerm .lh-attende { position: absolute; left: 1.4%; bottom: 2.4%; z-index: 4; }
.lh-skjerm .lh-attende::after { content: none; }
.lh-skjerm button:focus-visible, .lh-skjerm input:focus-visible { outline: .14cqw solid var(--frost); outline-offset: .14cqw; }

/* Overskrift med den innrissa linja (regel.svg) på begge sider */
.lh-skjerm .lh-hovudrad {
  display: flex; align-items: center; justify-content: center; gap: .8cqw;
  margin: 0 0 .7cqw;
  font: 700 max(12px, .9cqw)/1.2 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
  color: #d8c3a0;
  text-shadow: 0 0 .5cqw #000;
}
.lh-skjerm .lh-hovudrad::before, .lh-skjerm .lh-hovudrad::after {
  content: ""; flex: 1 1 0; max-width: 6cqw; height: .5cqw;
  background: url('/bilete/meny/regel.svg') center / contain no-repeat;
}
.lh-skjerm, .lh-skjerm * { scrollbar-width: thin; scrollbar-color: rgba(201, 168, 106, .45) transparent; }
.lh-skjerm ::-webkit-scrollbar { width: 8px; }
.lh-skjerm ::-webkit-scrollbar-thumb { background: rgba(201, 168, 106, .4); border-radius: 4px; }

/* ══ VARDANE ═════════════════════════════════════════════════════════════════ */
#vardar { --plate: url('/bilete/skjermar/vardar.webp'); }
.vd-panorama {
  position: absolute; inset: 0;
  background: var(--plate) center / 100% 100% no-repeat;
}
.vd-flammar { position: absolute; inset: 0; pointer-events: none; }
.vd-varde { position: absolute; width: 0; height: 0; }
/* Elden: måla flammar på svart, lagt på med screen så berre lyset syner */
.vd-eld, .vd-gloer, .vd-skin {
  position: absolute;
  mix-blend-mode: screen;
  pointer-events: none;
  user-select: none;
}
.vd-eld {
  width: 8cqw; left: -4cqw; bottom: -.7cqw;
  transform-origin: 50% 95%;
  animation: vd-flakk 1.1s ease-in-out infinite alternate;
}
.vd-eld.b { opacity: .55; animation-duration: .8s; animation-direction: alternate-reverse; scale: -1 1; }
.vd-gloer {
  width: 3.4cqw; left: -1.7cqw; bottom: -1.36cqw;
  opacity: calc(.3 + var(--fr, 0) * .7);
  animation: vd-ulme 2.6s steps(5, end) infinite;
}
.vd-skin {                                /* lyset kastar seg på steinane og himmelen rundt */
  width: 16cqw; height: 16cqw; left: -8cqw; top: -10cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 60, .5), rgba(255, 110, 40, .14) 55%, transparent);
  animation: vd-puls 2.2s ease-in-out infinite alternate;
}
.vd-varde.gloer .vd-skin { width: 6cqw; height: 6cqw; left: -3cqw; top: -3.4cqw; opacity: calc(.2 + var(--fr, 0) * .6); }
@keyframes vd-flakk {
  0% { transform: scale(.96, .94); opacity: .92; }
  45% { transform: scale(1.03, 1.05); opacity: 1; }
  100% { transform: scale(.98, 1.02); opacity: .95; }
}
@keyframes vd-ulme { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.25); } 70% { filter: brightness(.85); } }
@keyframes vd-puls { from { opacity: .75; } to { opacity: 1; } }

/* Namn og stode under kvar varde */
.vd-namn {
  position: absolute;
  transform: translateX(-50%);
  isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: .15cqw;
  white-space: nowrap;
  text-align: center;
  text-shadow: 0 0 .5cqw #000, 0 0 .9cqw #000, 0 .08cqw .15cqw #000;
}
.vd-namn::before {                       /* ein mjuk skugge bak namnet, så snø og stein ikkje et opp teksten */
  content: ""; position: absolute; inset: -.6cqw -1.4cqw; z-index: -1;
  background: radial-gradient(closest-side, rgba(6, 5, 4, .78), rgba(6, 5, 4, .4) 60%, transparent);
}
.vd-namn b { font: 700 max(12px, .9cqw)/1 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #b9b2a4; }
.vd-namn i { font: italic max(12px, .85cqw)/1 Georgia, serif; color: #a59c8d; }
.vd-namn.tent b { color: #ffcf8a; }
.vd-namn.tent i { color: var(--glod); font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: max(11px, .72cqw); }
.vd-namn.gloer b { color: #e3c9a6; }
.vd-namn .vd-strek {                      /* kor langt glørne har kome mot denne varden */
  width: 4.6cqw; height: .22cqw; margin-top: .25cqw;
  background: linear-gradient(90deg, var(--glod) calc(var(--fr) * 100%), rgba(234, 220, 194, .18) 0);
  box-shadow: 0 0 .4cqw rgba(255, 150, 60, .5);
}

/* Botnen: tala, korleis glør blir borne, og vardevaktarane */
.vd-innhald { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.vd-innhald > * { pointer-events: auto; }
.vd-tal {
  position: absolute; left: 14%; right: 14%; top: 55.2%;
  display: flex; justify-content: center; gap: 4.2cqw;
  text-align: center;
  text-shadow: 0 0 .6cqw #000, 0 0 1.2cqw #000;
}
.vd-tal > div { display: flex; flex-direction: column; align-items: center; gap: .3cqw; }
.vd-tal b { font: 700 2.7cqw/1 Georgia, serif; color: #ffd08a; letter-spacing: .02em; }
.vd-tal i { font: italic max(12px, .88cqw)/1.2 Georgia, serif; color: #cdbd9f; }
.vd-meg { position: absolute; left: 20%; right: 20%; top: 64.4%; margin: 0; text-align: center; font: italic max(12px, .95cqw) Georgia, serif; color: #e9cfa2; text-shadow: 0 0 .6cqw #000; }
.vd-meg b { color: var(--glod); font-style: normal; }
.vd-korleis, .vd-topp {
  position: absolute; top: 68.5%; bottom: 11%;
  padding: 1.1cqw 1.6cqw;
  background: linear-gradient(180deg, rgba(8, 6, 5, .74), rgba(8, 6, 5, .5));
  border-top: 1px solid rgba(201, 168, 106, .28);
  box-shadow: 0 0 2.4cqw 1.2cqw rgba(8, 6, 5, .45);
}
.vd-korleis { left: 14%; width: 34%; }
.vd-topp { right: 14%; width: 34%; display: flex; flex-direction: column; }
.vd-regel { display: grid; grid-template-columns: 2.6cqw 1fr; gap: .45cqw .8cqw; margin: 0; align-items: baseline; }
.vd-regel dt { font: 700 max(14px, 1.3cqw)/1 Georgia, serif; color: #ffcf8a; text-align: right; }
.vd-regel dd { margin: 0; font: max(12px, .9cqw)/1.35 Georgia, serif; color: #d8cab0; }
.vd-regel dd small { color: #a99c86; font-size: max(11px, .78cqw); font-style: italic; }
.vd-alle { margin: .8cqw 0 0; font: italic max(12px, .86cqw)/1.35 Georgia, serif; color: #c4b498; }
.vd-alle b { color: #ffd08a; font-style: normal; }
.vd-liste { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .15cqw; }
.vd-rad {
  display: grid; grid-template-columns: 1.8cqw minmax(0, 1fr) auto; gap: .8cqw; align-items: baseline;
  padding: .3cqw .4cqw;
  font: max(12px, .95cqw)/1.25 Georgia, serif; color: #e2d4b9;
}
.vd-rad span { font: 700 max(12px, .95cqw) Georgia, serif; color: #a8987d; text-align: right; }
.vd-rad b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-rad b i { font-weight: 400; font-size: max(11px, .78cqw); color: #a99c86; margin-left: .5cqw; }
.vd-rad em { font: 700 max(13px, 1.05cqw) Georgia, serif; font-style: normal; color: #ffcf8a; }
.vd-rad.meg { background: linear-gradient(90deg, rgba(255, 179, 92, .16), transparent); }
.vd-rad:nth-child(1) span { color: #ffd08a; }
.vd-tom, .vd-forrige { margin: .4cqw 0 0; font: italic max(12px, .86cqw)/1.35 Georgia, serif; color: #b1a38b; }
.vd-mobilliste { display: none; }
.vd-feil { position: absolute; left: 25%; right: 25%; top: 56%; text-align: center; font: italic max(13px, 1.1cqw) Georgia, serif; color: #e2cfae; text-shadow: 0 0 .6cqw #000; }

@media (prefers-reduced-motion: reduce) {
  .vd-eld, .vd-gloer, .vd-skin { animation: none; }
}

/* ── Smalt eller ståande: panoramaet øvst, alt anna i éi rekkje under ── */
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .lag.lh-skjerm { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .lag.lh-skjerm::before { position: fixed; inset: 0; filter: blur(18px) brightness(.32); }
  .lh-scene {
    width: 100%; aspect-ratio: auto;
    container-type: inline-size;
    display: flex; flex-direction: column; align-items: stretch; gap: 4cqw;
    padding: 4cqw 4cqw 22cqw;
  }
  .lh-scene::after { display: none; }
  .lh-skjermtopp { position: static; order: 1; }
  .lh-skjermtittel { font-size: 8cqw; }
  .lh-skjermlina { max-width: none; font-size: 3.6cqw; margin-top: 2cqw; }
  .lh-skjerm .lh-hovudrad { font-size: 3.4cqw; gap: 2cqw; margin-bottom: 2cqw; }
  .lh-skjerm .lh-hovudrad::before, .lh-skjerm .lh-hovudrad::after { max-width: 16cqw; height: 1.6cqw; }
  .lh-skjerm .lh-plankeknapp { height: 13cqw; padding: 0 7cqw; font-size: 4.2cqw; }
  /* MÅ vere relative: plankebiletet (::before, inset 0) heng på knappen — med static
     fall det ut og dekte heile skjermen på mobil (KM 25.10: «options … funker ikke på mobil») */
  .lh-skjerm .lh-attende { position: relative; left: auto; bottom: auto; order: 20; align-self: center; }

  .vd-panorama { position: relative; inset: auto; order: 2; aspect-ratio: 3 / 2; margin: 0 -4cqw; container-type: size; }
  .vd-eld { width: 8cqw; left: -4cqw; }
  .vd-namn { display: none; }
  .vd-innhald { position: static; order: 3; display: flex; flex-direction: column; gap: 5cqw; }
  .vd-tal { position: static; flex-wrap: wrap; gap: 4cqw 7cqw; }
  .vd-tal b { font-size: 7cqw; }
  .vd-tal i { font-size: 3.2cqw; }
  .vd-meg { position: static; font-size: 3.6cqw; }
  .vd-korleis, .vd-topp { position: static; width: auto; padding: 4cqw; box-shadow: none; }
  .vd-regel { grid-template-columns: 8cqw 1fr; gap: 2cqw 3cqw; }
  .vd-regel dt { font-size: 4.6cqw; }
  .vd-regel dd, .vd-alle, .vd-tom, .vd-forrige { font-size: 3.5cqw; }
  .vd-regel dd small { font-size: 3.1cqw; }
  .vd-rad { grid-template-columns: 6cqw minmax(0, 1fr) auto; gap: 3cqw; font-size: 3.8cqw; padding: 1.4cqw 1cqw; }
  .vd-rad span, .vd-rad em { font-size: 3.8cqw; }
  .vd-rad b i { font-size: 3cqw; }
  .vd-liste { overflow: visible; }
  .vd-mobilliste { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 4cqw; order: -1; margin: 0; padding: 0; list-style: none; }
  .vd-mobilliste li { display: flex; flex-direction: column; gap: .6cqw; font: 3.6cqw/1.2 Georgia, serif; color: #cdbfa6; }
  .vd-mobilliste li b { font: 700 3.4cqw/1.1 'Cinzel', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #b9b2a4; }
  .vd-mobilliste li.tent b { color: #ffcf8a; }
  .vd-mobilliste li.tent i { color: var(--glod); font-style: normal; font-weight: 700; }
  .vd-mobilliste .vd-strek { width: 100%; height: .8cqw; background: linear-gradient(90deg, var(--glod) calc(var(--fr) * 100%), rgba(234, 220, 194, .16) 0); }
  .vd-feil { position: static; }
}

/* Den faste attende-knappen på mobil (#fastAttende i style.css) i same verd */
#fastAttende.synleg {
  width: 52px; height: 52px;
  font: 700 20px/1 Georgia, serif; color: #ffd9a0;
  background: radial-gradient(circle at 40% 35%, #3a2a1e, #1a120c 70%);
  border: 1px solid rgba(201, 168, 106, .45);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 170, .12);
  text-shadow: 0 0 8px rgba(255, 150, 60, .55);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ══ NETTET (The Watcher's Web) ═══════════════════════════════════════════════
   Kartet fyller heile vindauget; tittel, bonusar, panelet og knappane ligg oppå
   som skilt. Storleikar i px/clamp her — scena er vindauget, ikkje ei 3:2-plate. */
#talentskjerm.lh-skjerm {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--sot);
  --plate: none;
}
#talentskjerm.lh-skjerm.skjult { display: none; }
#talentskjerm.lh-skjerm::before { content: none; }
#talentskjerm.lh-skjerm #webkart { position: absolute; inset: 0; display: block; }
#talentskjerm.lh-skjerm #talentlerret {
  display: block;
  width: 100vw; height: 100dvh;
  border: 0; border-radius: 0;
  background: var(--sot);
}
#talentskjerm.lh-skjerm #webkart::after {     /* kantane av vindauget glir inn i natta */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 110px 30px rgba(8, 6, 5, .85);
}
.web-topp {
  position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); width: min(760px, 70vw);
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
#talentskjerm .lh-skjermtittel { font-size: clamp(22px, 2.2vw, 36px); }
#talentskjerm .lh-skjermlina { font-size: clamp(12.5px, .95vw, 15px); max-width: none; margin-top: 6px; }
#talentskjerm .ti-poeng { font-style: normal; color: var(--glod); }
.web-buff {
  position: absolute; left: 16px; top: max(16px, env(safe-area-inset-top)); z-index: 3;
  width: min(300px, 26vw); max-height: 42vh; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 5px 6px; align-content: flex-start;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10, 8, 6, .82), rgba(10, 8, 6, .6));
  border-top: 1px solid rgba(201, 168, 106, .3);
  box-shadow: 0 0 28px 14px rgba(8, 6, 5, .45);
}
.web-buff:empty { display: none; }
#talentskjerm .buffpille {
  display: inline-block;
  padding: 2px 9px;
  font: 700 12.5px/1.45 Georgia, serif;
  color: #e6d6b8;
  background: rgba(30, 22, 15, .7);
  border: 1px solid rgba(201, 168, 106, .28); border-radius: 999px;
}
#talentskjerm .buffpille.god { color: #f0d9b0; }
#talentskjerm .buffpille.vond { color: #f2a99a; border-color: rgba(200, 90, 70, .4); }
#talentskjerm .buffpille.ks { color: #ffd08a; border-color: rgba(255, 179, 92, .5); font-style: italic; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; text-decoration-color: rgba(255, 179, 92, .45); }
#talentskjerm .buffpille.ks:hover { color: #fff; }
#talentskjerm .buff-tom { font: italic 13px/1.4 Georgia, serif; color: #b6a68b; }
#talentskjerm #buffmeir { display: none; }

/* Panelet for den valde tomta: eit mørkt skinnark til høgre */
#talentskjerm #talentpanel {
  position: absolute; right: 18px; top: 50%; translate: 0 -50%; z-index: 4;
  width: min(340px, 30vw); margin: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(24, 18, 13, .96), rgba(14, 10, 8, .96));
  border: 1px solid rgba(201, 168, 106, .3); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 170, .06);
}
#talentskjerm #talentpanel.skjult { display: none; }
#talentskjerm #talentnamn {
  font: 700 18px/1.2 'Cinzel', Georgia, serif; letter-spacing: .06em; color: #f1e4cc; white-space: normal;
  text-shadow: 0 1px 2px #000;
}
#talentskjerm #talenttekst { font: 14px/1.45 Georgia, serif; color: #d6c7aa; }
#talentskjerm #rangVis { margin: 0; font: italic 13px Georgia, serif; letter-spacing: 0; }
#talentskjerm .rv-tal { color: var(--frost); font-style: normal; font-weight: 700; }
#talentskjerm .rv-bonus { color: var(--glod); }
#talentskjerm .tp-kost { font: italic 13px/1.4 Georgia, serif; color: #f2a99a; }
#talentskjerm #knappLaer, #talentskjerm #rangKnapp {
  position: relative; isolation: isolate; width: 100%; height: 44px; margin: 4px 0 0; padding: 0 14px;
  font: 700 15px/1 Georgia, serif; color: #fff4e2;
  background: none; border: none; border-radius: 0; box-shadow: none;
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(255, 160, 70, .55);
}
#talentskjerm #knappLaer::before, #talentskjerm #rangKnapp::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('/bilete/meny/planke.webp') center / 100% 100% no-repeat;
  filter: brightness(.5) saturate(.85);
}
#talentskjerm #knappLaer:hover::before, #talentskjerm #rangKnapp:hover::before { filter: brightness(.68) saturate(.9); }
#talentskjerm #knappLaer:disabled, #talentskjerm #rangKnapp:disabled { opacity: .45; text-shadow: 0 1px 2px #000; }
#talentskjerm #rangKnapp { color: #ffe2b0; font-size: 14px; height: 40px; }

/* Zoom: tre runde jernknappar nede til høgre */
#talentskjerm #webzoom { right: 18px; bottom: 18px; gap: 8px; z-index: 3; }
#talentskjerm #webzoom button {
  width: 42px; height: 42px; padding: 0;
  font: 700 22px/1 Georgia, serif; color: #f0dfc0;
  background: radial-gradient(circle at 40% 35%, #3a2d22, #17110c 70%);
  border: 1px solid rgba(201, 168, 106, .45); border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 170, .1);
  text-shadow: 0 1px 2px #000;
}
#talentskjerm #webzoom button:hover { color: #fff; border-color: rgba(255, 179, 92, .7); }
#talentskjerm #webzoom button:active { transform: scale(.92); background: radial-gradient(circle at 40% 35%, #4a3828, #1f160f 70%); }
#talentskjerm .wz-heim {                       /* «heile kartet»: ein liten ramme med hjørne */
  display: block; width: 16px; height: 16px; margin: auto;
  border: 2px solid #f0dfc0; border-radius: 2px;
  clip-path: polygon(0 0, 35% 0, 35% 12%, 65% 12%, 65% 0, 100% 0, 100% 35%, 88% 35%, 88% 65%, 100% 65%, 100% 100%, 65% 100%, 65% 88%, 35% 88%, 35% 100%, 0 100%, 0 65%, 12% 65%, 12% 35%, 0 35%);
}

/* Knappane nede til venstre */
.web-knappar {
  position: absolute; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 3;
  display: flex; align-items: center; gap: 12px;
}
#talentskjerm .web-knappar .lh-plankeknapp { height: 44px; padding: 0 22px; font-size: 15px; }
.lh-skjerm .lh-tekstlenke {
  padding: 4px 2px;
  font: italic 14px Georgia, serif; color: #d8c3a0;
  background: none; border: none;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(216, 195, 160, .45);
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.lh-skjerm .lh-tekstlenke:hover { color: #fff; background: none; transform: none; }

@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #talentskjerm.lh-skjerm { overflow: hidden; }
  .web-topp { width: calc(100vw - 132px); top: max(14px, env(safe-area-inset-top)); }
  #talentskjerm .lh-skjermtittel { font-size: 16px; letter-spacing: .1em; white-space: nowrap; }
  #talentskjerm .lh-skjermlina { font-size: 12px; margin-top: 4px; }
  .web-buff { left: 10px; right: 10px; width: auto; top: calc(max(14px, env(safe-area-inset-top)) + 84px); max-height: 60px; overflow: hidden; padding: 8px 10px; }
  .web-buff.open { max-height: 40vh; overflow-y: auto; }
  #talentskjerm #buffmeir { display: inline-block; font: italic 12.5px Georgia, serif; color: #ffd08a; background: none; border: 1px solid rgba(255, 179, 92, .45); border-radius: 999px; padding: 2px 10px; }
  #talentskjerm #talentpanel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; translate: none; width: 100%;
    border-radius: 0; border-width: 1px 0 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    z-index: 41;
  }
  .web-knappar { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px; flex-wrap: wrap; }
  #talentskjerm .web-knappar .lh-plankeknapp { height: 40px; padding: 0 14px; font-size: 14px; }
  #talentskjerm #webzoom { right: 10px; bottom: 74px; }
}

/* ══ OPTIONS ═════════════════════════════════════════════════════════════════
   Hallen bak, dempa; éi tavle med to delar: lyd og bilete. Vala er bokstavar som
   lyser (glød) når dei er valde — ingen brytarar frå nettsider. */
#innstillingar { --plate: url('/bilete/meny/hall.webp'); }
.is-scene { background: linear-gradient(rgba(8, 6, 5, .62), rgba(8, 6, 5, .62)), var(--plate) center / 100% 100% no-repeat; }
.is-tavle {
  position: absolute; left: 50%; top: 17%; translate: -50% 0;
  width: 58cqw;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw;
  padding: 2.2cqw 2.6cqw 2.4cqw;
  background: linear-gradient(180deg, rgba(14, 10, 7, .9), rgba(10, 7, 5, .84));
  border-top: 1px solid rgba(201, 168, 106, .35);
  box-shadow: 0 0 3cqw 1.5cqw rgba(8, 6, 5, .55);
}
.is-del { display: flex; flex-direction: column; gap: 1.1cqw; }
.is-rad {
  display: grid; grid-template-columns: 7.5cqw 1fr auto; align-items: center; gap: .9cqw;
  font: max(13px, 1.05cqw)/1.2 Georgia, serif; color: #e2d4b9;
}
.is-rad > span { color: #cdbd9f; }
.is-rad > b { min-width: 3.4cqw; text-align: right; font: 700 max(12px, .95cqw) Georgia, serif; color: var(--glod); }
.is-rad .is-val { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: .3cqw 1.2cqw; }
.lh-skjerm .is-val button {
  padding: .2cqw 0;
  font: italic max(13px, 1.02cqw)/1.2 Georgia, serif; color: #a99a80;
  background: none; border: none; border-bottom: 1px solid transparent; border-radius: 0;
}
.lh-skjerm .is-val button:hover { color: #f1e4cc; background: none; transform: none; }
.lh-skjerm .is-val button.pa { font-style: normal; font-weight: 700; color: #ffd9a0; border-bottom-color: rgba(255, 179, 92, .7); text-shadow: 0 0 .6cqw rgba(255, 150, 60, .5); }
.is-hjelp { margin: -.3cqw 0 0; font: italic max(12px, .86cqw)/1.4 Georgia, serif; color: #a99c86; }
.is-hjelp b { color: #e2d4b9; font-style: normal; }
/* Glidarane: innrissa line med ei glødrute */
.lh-skjerm input[type="range"] {
  --spor: max(2px, .16cqw); --tomme: max(13px, 1cqw);
  -webkit-appearance: none; appearance: none;
  width: 100%; height: max(24px, 1.8cqw); margin: 0; background: none; border: none; cursor: pointer;
}
.lh-skjerm input[type="range"]::-webkit-slider-runnable-track {
  height: var(--spor);
  background: linear-gradient(90deg, rgba(255, 179, 92, .2), rgba(234, 220, 194, .55) 50%, rgba(255, 179, 92, .2));
  box-shadow: 0 1px 0 rgba(0, 0, 0, .8);
}
.lh-skjerm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--tomme); height: var(--tomme);
  margin-top: calc((var(--spor) - var(--tomme)) / 2);
  background: linear-gradient(135deg, #fff1d6, #ffb35c);
  border: none; border-radius: 0; rotate: 45deg;
  box-shadow: 0 0 .6cqw rgba(255, 150, 60, .9);
}
.lh-skjerm input[type="range"]::-moz-range-track { height: var(--spor); background: rgba(234, 220, 194, .45); }
.lh-skjerm input[type="range"]::-moz-range-thumb { width: var(--tomme); height: var(--tomme); background: #ffcf8a; border: none; border-radius: 0; rotate: 45deg; box-shadow: 0 0 .6cqw rgba(255, 150, 60, .9); }

@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .is-scene { background: none; }
  .is-tavle { position: static; translate: none; order: 2; width: auto; grid-template-columns: 1fr; gap: 7cqw; padding: 5cqw; box-shadow: none; }
  .is-del { gap: 4.4cqw; }
  .is-rad { grid-template-columns: 24cqw 1fr auto; gap: 3cqw; font-size: 4cqw; }
  .is-rad > b { font-size: 3.8cqw; min-width: 12cqw; }
  .lh-skjerm .is-val { gap: 2cqw 5cqw; }
  .lh-skjerm .is-val button { font-size: 4cqw; padding: 1.4cqw 0; }
  .is-hjelp { font-size: 3.4cqw; }
  .lh-skjerm input[type="range"] { height: 9cqw; --spor: .6cqw; --tomme: 4.6cqw; }
}

/* ══ VAKTHALDET (The Watchhold) ══════════════════════════════════════════════ */
#borg { --plate: url('/bilete/skjermar/borg_heil.webp'); }
.bh-plate { position: absolute; inset: 0; background: var(--plate) center / 100% 100% no-repeat; }
.bh-gruve {                              /* eldgropa midt på tunet lever */
  position: absolute; left: 48.8%; top: 55.5%; width: 18%; height: 16%; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 60, .32), rgba(255, 110, 40, .08) 60%, transparent);
  mix-blend-mode: screen;
  animation: lh-flakk 3.3s steps(6, end) infinite;
  pointer-events: none;
}
.bh-hus { position: absolute; inset: 0; }
.bh-bygg {
  position: absolute;
  padding: 0; margin: 0;
  background: none; border: none; border-radius: 0;
  cursor: pointer;
}
.lh-skjerm .bh-bygg:hover, .lh-skjerm .bh-bygg:focus-visible { background: none; transform: none; }
/* Huset er måla inn i plata; flata over det seier kva stode det har. Ubygd: fargelaus
   (saturation-blanding) og mørk, som eit minne om eit hus. Byggjer: halvvegs. */
.bh-flate { position: relative; display: block; width: 100%; }
.bh-flate::before, .bh-flate::after { content: ""; position: absolute; inset: -6% -4%; pointer-events: none; transition: opacity .25s; opacity: 0; }
.bh-flate::before {
  background: #7d7d7d; mix-blend-mode: saturation;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 55%, #000 62%, transparent 100%);
}
.bh-flate::after { background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(4, 6, 12, .78) 55%, rgba(4, 6, 12, 0) 100%); }
.bh-bygg.ubygd .bh-flate::before, .bh-bygg.ubygd .bh-flate::after { opacity: 1; }
.bh-bygg.byggjer .bh-flate::before { opacity: .7; }
.bh-bygg.byggjer .bh-flate::after { opacity: .5; }
.lh-skjerm .bh-bygg.ubygd:hover .bh-flate::after { opacity: .62; }
.bh-bygg.vald .bh-flate { background: radial-gradient(ellipse 52% 46% at 50% 92%, rgba(255, 179, 92, .22), transparent 80%); }
.lh-skjerm .bh-bygg:hover .bh-flate { background: radial-gradient(ellipse 52% 46% at 50% 92%, rgba(255, 220, 170, .14), transparent 80%); }
.bh-ikkje { font: italic max(11px, .74cqw)/1 Georgia, serif; color: #a99c86; }
.bh-skilt {
  position: absolute; left: 50%; top: 100%; translate: -50% .3cqw;
  display: flex; flex-direction: column; align-items: center; gap: .2cqw;
  white-space: nowrap;
  text-shadow: 0 0 .5cqw #000, 0 0 .9cqw #000;
  isolation: isolate;
}
.bh-skilt::before { content: ""; position: absolute; inset: -.4cqw -1.2cqw; z-index: -1; background: radial-gradient(closest-side, rgba(6, 5, 4, .75), transparent); }
.bh-skilt b { font: 700 max(12px, .86cqw)/1 'Cinzel', Georgia, serif; letter-spacing: .08em; text-transform: uppercase; color: #e8d9bd; }
.bh-bygg.ubygd .bh-skilt b { color: #a99c86; }
.bh-bygg.vald .bh-skilt b { color: #ffd9a0; }
.bh-pips { display: inline-flex; gap: .3cqw; }
.bh-pips i { width: .5cqw; height: .5cqw; min-width: 5px; min-height: 5px; rotate: 45deg; border: 1px solid rgba(255, 207, 138, .55); background: transparent; }
.bh-pips i.har { background: #ffcf8a; border-color: #ffcf8a; box-shadow: 0 0 .3cqw rgba(255, 150, 60, .8); }
.bh-stripe { display: block; width: 100%; min-width: 5cqw; height: max(3px, .25cqw); background: rgba(234, 220, 194, .18); }
.bh-stripe i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c46a2a, var(--glod)); box-shadow: 0 0 .4cqw rgba(255, 150, 60, .6); transition: width .9s linear; }

/* Panela under tunet */
.bh-vakt, .bh-kort, .bh-liste {
  position: absolute; top: 66.5%; bottom: 9.5%;
  padding: 1cqw 1.4cqw;
  background: linear-gradient(180deg, rgba(10, 8, 6, .86), rgba(10, 8, 6, .72));
  border-top: 1px solid rgba(201, 168, 106, .3);
  box-shadow: 0 0 2cqw 1cqw rgba(8, 6, 5, .45);
  z-index: 80;
  display: flex; flex-direction: column; gap: .55cqw;
  overflow: hidden;
}
.bh-vakt { left: 1.5%; width: 29.5%; }
#borg #borgstatus, #borg #borgliste { margin: 0; border: none; border-top: 1px solid rgba(201, 168, 106, .3); border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 8, 6, .86), rgba(10, 8, 6, .72)); display: flex; grid-template-columns: none; }
.bh-kort { left: 33%; width: 34%; }
.bh-liste { right: 1.5%; width: 29.5%; gap: .1cqw; overflow-y: auto; }
.lh-skjerm .bh-vakt .lh-hovudrad, .lh-skjerm .bh-liste .lh-hovudrad { margin: 0 0 .2cqw; }
.bh-rate { display: flex; align-items: baseline; gap: .6cqw; flex-wrap: wrap; font: italic max(12px, .9cqw) Georgia, serif; color: #cdbd9f; }
.bh-rate b { font: 700 2.3cqw/1 Georgia, serif; font-style: normal; color: #ffd08a; }
.bh-rate i { color: #a99c86; }
.bh-klokke { display: flex; flex-direction: column; gap: .3cqw; font: max(12px, .88cqw) Georgia, serif; color: #d8cab0; }
.bh-full, .bh-aar, .bh-gjest, .bh-hint, .bh-kortlina { margin: 0; font: italic max(12px, .82cqw)/1.35 Georgia, serif; color: #b6a68b; }
.bh-aar { color: #e9b874; }
.bh-gjest { font-size: max(13px, .95cqw); color: #d8cab0; }
.bh-hent { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.bh-samla { font: max(13px, 1cqw) Georgia, serif; color: #e2d4b9; }
.bh-samla b { font: 700 max(15px, 1.4cqw) Georgia, serif; color: #ffd08a; }
.lh-skjerm .bh-hent .lh-plankeknapp, .lh-skjerm .bh-byggknapp, .lh-skjerm .bh-vakt > .lh-plankeknapp { height: max(36px, 2.7cqw); padding: 0 1.6cqw; }
.bh-kortnamn { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; }
.bh-kortnamn b { font: 700 max(15px, 1.35cqw)/1.1 'Cinzel', Georgia, serif; letter-spacing: .06em; color: #f1e4cc; }
.bh-verd { display: grid; grid-template-columns: 3.4cqw 1fr; gap: .25cqw .8cqw; margin: .2cqw 0; }
.bh-verd dt { font: 700 max(11px, .76cqw)/1.5 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #a99c86; }
.bh-verd dd { margin: 0; font: max(12px, .95cqw)/1.35 Georgia, serif; color: #d8cab0; }
.bh-verd dd.neste { color: #ffd9a0; }
.bh-pris { font: max(12px, .92cqw) Georgia, serif; color: #cdbd9f; }
.bh-pris b { color: #ffd08a; }
.bh-byggjer { display: flex; flex-direction: column; gap: .35cqw; font: max(12px, .95cqw) Georgia, serif; color: #e2d4b9; }
.bh-byggjer b { color: #ffd08a; }
.bh-ferdig { margin: 0; font: italic max(13px, 1cqw) Georgia, serif; color: #e9cfa2; }
.lh-skjerm .bh-byggknapp { align-self: flex-start; margin-top: auto; }
.lh-skjerm .bh-rad {
  display: grid; grid-template-columns: 1fr auto 6.6cqw; align-items: baseline; gap: .8cqw;
  width: 100%; min-height: 0; margin: 0; padding: .22cqw .5cqw;
  font: max(12px, .88cqw)/1.15 Georgia, serif; color: #d8cab0; text-align: left; letter-spacing: 0;
  background: none; border: none; border-radius: 0;
}
.lh-skjerm .bh-rad:hover { background: rgba(255, 179, 92, .08); transform: none; }
.lh-skjerm .bh-rad.vald { background: linear-gradient(90deg, rgba(255, 179, 92, .16), transparent); }
.bh-rad b { font-weight: 700; color: #ecdec4; }
.bh-rad span { font: 700 max(11px, .82cqw) Georgia, serif; color: #a99c86; }
.bh-rad i { text-align: right; font-size: max(11px, .82cqw); color: #a99c86; }
.bh-rad i.raad { color: #ffd08a; font-style: normal; }
.bh-rad.byggjer i { color: var(--glod); }
.bh-knappar { position: absolute; left: 1.4%; bottom: 2.2%; z-index: 80; display: flex; gap: 1cqw; }

/* ══ POPUP: den ståande vakta (#vaktlag) ═════════════════════════════════════ */
.lag.lh-skjerm.lh-modal { background: rgba(6, 5, 4, .72); }
.lag.lh-skjerm.lh-modal::before { content: none; }
.lh-ark {
  width: min(560px, 92vw);
  padding: 28px 32px 26px;
  text-align: center;
  background: linear-gradient(180deg, rgba(26, 19, 13, .97), rgba(14, 10, 8, .97));
  border-top: 1px solid rgba(201, 168, 106, .4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 168, 106, .12);
  animation: opp .3s ease;
}
#vaktlag #vaktover { font: 700 13px 'Cinzel', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; color: var(--glod); }
#vaktlag #vakttittel { margin: 6px 0 8px; font: 700 26px/1.15 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #f1e4cc; text-shadow: 0 1px 2px #000; }
#vaktlag #vakttekst { margin: 0 0 14px; font: italic 15px/1.45 Georgia, serif; color: #cdbd9f; }
#vaktlag #vaktfunn { display: flex; justify-content: center; gap: 30px; margin: 4px 0 10px; }
#vaktlag .vf { display: flex; flex-direction: column; gap: 3px; }
#vaktlag .vft { font: 700 30px/1 Georgia, serif; color: #ffd08a; }
#vaktlag .vfn { font: italic 13px Georgia, serif; color: #b6a68b; }
#vaktlag .hint { font: italic 14px Georgia, serif; color: #e9cfa2; }
.lh-arkknappar { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.lh-skjerm .lh-arkknappar .lh-plankeknapp { height: 44px; padding: 0 28px; font-size: 16px; }

/* ══ MELDINGA (lhMelding) ══ */
.lh-melding {
  position: fixed; left: 50%; top: 18px; z-index: 90;
  translate: -50% -140%;
  padding: 10px 22px;
  font: italic 15px Georgia, serif; color: #f1e4cc;
  background: linear-gradient(180deg, rgba(26, 19, 13, .96), rgba(14, 10, 8, .96));
  border-top: 1px solid rgba(255, 179, 92, .5);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  pointer-events: none;
  transition: translate .35s cubic-bezier(.2, .8, .2, 1);
}
.lh-melding.vis { translate: -50% 0; }

@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .bh-plate { display: none; }
  .bh-hus { position: relative; inset: auto; order: 2; aspect-ratio: 3 / 2; margin: 0 -4cqw 8cqw; background: var(--plate) center / 100% 100% no-repeat; }
  .bh-skilt b { font-size: 2.4cqw; }
  .bh-skilt .bh-pips { display: none; }
  .bh-vakt, .bh-kort, .bh-liste { position: static; width: auto; padding: 4cqw; gap: 2.4cqw; box-shadow: none; order: 3; }
  .bh-kort { order: 4; } .bh-liste { order: 5; overflow: visible; }
  .bh-rate b { font-size: 9cqw; }
  .bh-rate, .bh-klokke, .bh-full, .bh-hint, .bh-kortlina, .bh-aar, .bh-gjest, .bh-samla, .bh-pris, .bh-byggjer, .bh-verd dd { font-size: 3.6cqw; }
  .bh-samla b { font-size: 5cqw; }
  .bh-kortnamn b { font-size: 5cqw; }
  .bh-verd { grid-template-columns: 12cqw 1fr; gap: 1.2cqw 3cqw; }
  .bh-verd dt { font-size: 3cqw; }
  .lh-skjerm .bh-rad { grid-template-columns: 1fr auto 24cqw; font-size: 3.8cqw; padding: 2cqw 1cqw; }
  .bh-rad span, .bh-rad i { font-size: 3.4cqw; }
  .bh-pips i { width: 2cqw; height: 2cqw; }
  .bh-knappar { position: static; order: 20; justify-content: center; flex-wrap: wrap; gap: 3cqw; }
  .lh-skjerm .bh-hent .lh-plankeknapp, .lh-skjerm .bh-byggknapp, .lh-skjerm .bh-vakt > .lh-plankeknapp { height: 12cqw; padding: 0 6cqw; }
  #vaktlag #vaktfunn { gap: 20px; }
}

/* ══ LOBBYEN: samlinga framfor riftporten ════════════════════════════════════ */
#lobby { --plate: url('/bilete/skjermar/lobby.webp'); }
.lb-plate { position: absolute; inset: 0; background: var(--plate) center / 100% 100% no-repeat; }
.lb-portal {                              /* portalen pulserer */
  position: absolute; left: 50%; top: 34%; width: 22%; height: 46%; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 210, 255, .22), rgba(110, 180, 255, .06) 60%, transparent);
  mix-blend-mode: screen;
  animation: lh-puls 3.2s ease-in-out infinite alternate;
  pointer-events: none;
}
.lb-kode { position: absolute; left: 50%; top: 18%; translate: -50% 0; width: 30%; text-align: center; z-index: 3; }
.lb-kodeover { font: 700 max(12px, .9cqw) 'Cinzel', Georgia, serif; letter-spacing: .3em; text-transform: uppercase; color: #cfeaff; text-shadow: 0 0 .6cqw #000, 0 0 1cqw rgba(0, 0, 0, .9); }
#lobby #kodevisning {
  margin: .2cqw 0 .4cqw; padding-left: .3em;
  font: 700 4.6cqw/1 'Cinzel', Georgia, serif; letter-spacing: .3em;
  color: #f4fbff;
  text-shadow: 0 .1cqw .2cqw #000, 0 0 1.2cqw rgba(159, 216, 255, .95), 0 0 3cqw rgba(110, 190, 255, .7);
  background: none; -webkit-text-fill-color: currentColor;
}
.lb-kode .lh-tekstlenke { font-size: max(13px, 1cqw); color: #e8f5ff; }
.lb-kodehint { margin: .3cqw 0 0; font: italic max(12px, .82cqw)/1.35 Georgia, serif; color: #b9d6ea; text-shadow: 0 0 .5cqw #000; }

#lobby #lobbyliste.lb-laget { margin: 0; gap: 0; flex-direction: row; }
.lb-laget { position: absolute; left: 15%; right: 24.5%; top: 58%; height: 26%; display: flex; justify-content: space-around; align-items: flex-end; z-index: 3; }
.lb-plass { position: relative; display: flex; flex-direction: column; align-items: center; width: 17%; text-align: center; }
.lb-helt { height: 13.5cqw; width: auto; filter: drop-shadow(0 .5cqw .5cqw rgba(0, 0, 0, .7)); pointer-events: none; }
.lb-plass.meg .lb-helt { filter: drop-shadow(0 0 .8cqw rgba(159, 216, 255, .55)) drop-shadow(0 .5cqw .5cqw rgba(0, 0, 0, .7)); }
.lb-fot { width: 8cqw; height: 1.2cqw; margin-top: -1.2cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.lb-namn {
  margin-top: .4cqw;
  font: 700 max(13px, 1.1cqw)/1.1 'Cinzel', Georgia, serif; letter-spacing: .06em;
  color: #f1e4cc;
  text-shadow: 0 0 .5cqw #000, 0 0 1cqw #000, 0 0 1.4cqw color-mix(in srgb, var(--hf, #9fd8ff) 50%, transparent);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.lb-status { font: italic max(12px, .82cqw)/1.3 Georgia, serif; color: #c4b498; text-shadow: 0 0 .5cqw #000; }
.lb-plass.klar .lb-status { color: #b7e8c4; }
.lb-plass.tom { cursor: pointer; opacity: .78; }
.lb-plass.tom:hover { opacity: 1; }
.lb-plass.tom .lb-namn { color: #a99c86; font-style: italic; font-family: Georgia, serif; font-weight: 400; letter-spacing: 0; }
.lb-tomring {
  width: 6cqw; height: 2cqw; margin-bottom: .2cqw;
  border-radius: 50%;
  border: 1px dashed rgba(201, 168, 106, .45);
  background: radial-gradient(closest-side, rgba(255, 179, 92, .08), transparent);
}
.lb-hint { position: absolute; left: 15%; right: 24.5%; top: 85.5%; margin: 0; text-align: center; font: italic max(12px, .9cqw) Georgia, serif; color: #d6c9b2; text-shadow: 0 0 .6cqw #000; z-index: 3; }
.lb-handling { position: absolute; left: 50%; bottom: 2.6%; translate: -50% 0; display: flex; align-items: center; gap: 1.4cqw; z-index: 4; }
.lh-skjerm .lb-start { color: #f4fbff; text-shadow: 0 .1cqw .2cqw #000, 0 0 .9cqw rgba(159, 216, 255, .95); font-size: max(15px, 1.3cqw); padding: 0 2.6cqw; }
.lh-skjerm .lb-start::before { filter: brightness(.55) saturate(.8); }
.lh-skjerm .lb-start:disabled { opacity: .5; }

#lobby #lobbyriftboks .ld-kolonnar { flex-direction: column; gap: .5cqw; }
#lobby #lobbyriftboks .ld-side + .ld-side { border: none; padding: 0; margin: 0; }
.lb-side {
  position: absolute; top: 4%; bottom: 46%; width: 22%;
  padding: 1cqw 1.3cqw;
  display: flex; flex-direction: column; gap: .6cqw;
  background: linear-gradient(180deg, rgba(10, 8, 6, .84), rgba(10, 8, 6, .68));
  border-top: 1px solid rgba(201, 168, 106, .3);
  box-shadow: 0 0 2cqw 1cqw rgba(8, 6, 5, .4);
  overflow-y: auto; z-index: 4;
}
.lb-venstre { left: 1.4%; }
.lb-hogre { right: 1.4%; bottom: 27%; }
.lb-gull { font: max(12px, .9cqw) Georgia, serif; color: #cdbd9f; }
.lb-gull b { color: #ffd08a !important; }
.lb-meny { display: flex; flex-wrap: wrap; gap: .2cqw 1.1cqw; margin-top: auto; }
.lh-skjerm .lb-meny .lh-tekstlenke { font-size: max(12px, .86cqw); }
/* helten din (visValtHelt i standardform) i same blekk */
#lobby .valthelt { display: grid; grid-template-columns: 4.4cqw 1fr; align-items: center; gap: .5cqw .9cqw; margin: 0; padding: 0; background: none; border: none; text-align: left; width: 100%; }
#lobby .valthelt > :nth-child(2) { min-width: 0; font: max(12px, .84cqw)/1.35 Georgia, serif; color: #cdbd9f; }
#lobby .valthelt > :nth-child(2) :first-child { font: 700 max(13px, 1.05cqw) 'Cinzel', Georgia, serif; }
#lobby .valthelt .vh-knappar { grid-column: 1 / -1; display: flex; gap: .6cqw; }
#lobby .valthelt canvas, #lobby .valthelt img { width: 4.4cqw !important; height: auto !important; }
#lobby .valthelt * { font-family: Georgia, serif; }
#lobby .valthelt button {
  padding: .25cqw .8cqw; font: 600 max(12px, .84cqw) Georgia, serif; color: #eadcc2;
  background: rgba(30, 22, 15, .7); border: 1px solid rgba(201, 168, 106, .35); border-radius: 0;
}
/* djupna og «fyll laget» */
#lobby .lobbyrift { gap: .6cqw; margin: 0; font: 700 max(12px, .86cqw) 'Cinzel', Georgia, serif; letter-spacing: .12em; color: #cfe3f5; }
#lobby .lobbyrift b { font: 700 max(14px, 1.3cqw) Georgia, serif; color: #fff; }
#lobby .lobbyrift button { padding: 0; font: italic max(12px, .84cqw) Georgia, serif; color: #ffd99a; background: none; border: none; text-decoration: underline; text-transform: lowercase; letter-spacing: 0; }
#lobby #lobbybotar { display: flex; flex-wrap: wrap; align-items: center; gap: .3cqw .5cqw; margin-top: .4cqw; }
#lobby #lobbybotar .bsu { width: 100%; font: 700 max(11px, .76cqw) 'Cinzel', Georgia, serif; letter-spacing: .14em; color: #a99c86; }
#lobby .botknapp { padding: .2cqw .6cqw; font: max(12px, .82cqw) Georgia, serif; color: #e2d4b9; background: rgba(30, 22, 15, .65); border: 1px solid rgba(201, 168, 106, .3); border-radius: 0; }
#lobby .botknapp.valt { color: #ffd9a0; border-color: rgba(255, 179, 92, .7); background: rgba(80, 50, 20, .5); }
#lobby .botknapp.laast { opacity: .5; }

/* Odds-boksen (riftBoksHtml) — i lobbyen og bak «Odds & Nightmare» i menyen */
#lobby #lobbyriftboks, #meny.langhus #dybdebonus {
  margin: .4cqw 0 0; padding: .7cqw .8cqw;
  background: rgba(6, 5, 4, .55); border: none; border-top: 1px solid rgba(201, 168, 106, .25); border-radius: 0;
  font-family: Georgia, serif;
}
#lobby #lobbyriftboks .ld-tittel, #meny.langhus #dybdebonus .ld-tittel { font: 700 max(11px, .76cqw) 'Cinzel', Georgia, serif; letter-spacing: .12em; color: #cdbd9f; }
#lobby #lobbyriftboks h4, #meny.langhus #dybdebonus h4 { font: 700 max(11px, .74cqw) 'Cinzel', Georgia, serif; letter-spacing: .12em; }
#lobby #lobbyriftboks li b, #meny.langhus #dybdebonus li b { font: 700 max(12px, .9cqw) Georgia, serif; min-width: 3.2cqw; }
#lobby #lobbyriftboks li span, #meny.langhus #dybdebonus li span { font: max(11px, .8cqw)/1.3 Georgia, serif; color: #cdbd9f; }
#lobby #lobbyriftboks .ld-botn, #meny.langhus #dybdebonus .ld-botn,
#lobby #lobbyriftboks .ll-fot, #meny.langhus #dybdebonus .ll-fot { font: italic max(11px, .78cqw)/1.4 Georgia, serif; color: #a99c86; }
#lobby #lobbyriftboks .nm-brytar, #meny.langhus #dybdebonus .nm-brytar {
  padding: .15cqw .6cqw; font: 700 max(11px, .72cqw) 'Cinzel', Georgia, serif; letter-spacing: .1em;
  color: #e9a99a; background: rgba(60, 14, 10, .5); border: 1px solid rgba(200, 80, 60, .45); border-radius: 0;
}
#lobby #lobbyriftboks .nm-brytar.valt, #meny.langhus #dybdebonus .nm-brytar.valt { color: #fff; background: rgba(140, 30, 20, .7); }
#lobby #lobbyriftboks .ll-tit, #meny.langhus #dybdebonus .ll-tit { font: italic max(11px, .78cqw) Georgia, serif; color: #d8c3a0; background: none; border: none; padding: 0; }

@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .lb-plate { position: relative; inset: auto; order: 2; aspect-ratio: 3 / 2; margin: 0 -4cqw; }
  .lb-kode { position: absolute; top: 4cqw; left: 50%; width: 80%; }
  #lobby #kodevisning { font-size: 13cqw; }
  .lb-kodeover { font-size: 3.4cqw; }
  .lb-kodehint { font-size: 3.2cqw; }
  .lb-laget, #lobby #lobbyliste.lb-laget { position: static; order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 5cqw 3cqw; height: auto; }
  .lb-plass { width: auto; }
  .lb-helt { height: 34cqw; }
  .lb-fot { width: 20cqw; height: 3cqw; margin-top: -3cqw; }
  .lb-namn { font-size: 4.2cqw; }
  .lb-status { font-size: 3.2cqw; }
  .lb-tomring { width: 24cqw; height: 8cqw; }
  .lb-hint { position: static; order: 4; font-size: 3.4cqw; }
  .lb-handling { position: static; translate: none; order: 5; flex-wrap: wrap; justify-content: center; gap: 3cqw; }
  .lh-skjerm .lb-start { font-size: 4.6cqw; }
  .lb-side { position: static; width: auto; order: 6; padding: 4cqw; gap: 2.4cqw; box-shadow: none; overflow: visible; }
  .lb-hogre { order: 7; }
  .lb-gull, .lh-skjerm .lb-meny .lh-tekstlenke { font-size: 3.6cqw; }
  #lobby .valthelt { grid-template-columns: 16cqw 1fr; gap: 2cqw 3cqw; }
  #lobby .valthelt canvas, #lobby .valthelt img { width: 16cqw !important; }
  #lobby .valthelt > :nth-child(2) { font-size: 3.4cqw; }
  #lobby .valthelt > :nth-child(2) :first-child { font-size: 4.2cqw; }
  #lobby .valthelt button { font-size: 3.4cqw; padding: 1cqw 3cqw; }
}

/* ══ THE WATCH ROLL (#dagleg) og andre ark ═══════════════════════════════════ */
.lh-ark-brei { width: min(760px, 94vw); }
.lh-arkover { font: 700 13px 'Cinzel', Georgia, serif; letter-spacing: .2em; text-transform: uppercase; color: var(--glod); }
.lh-arktittel { margin: 6px 0 8px; font: 700 28px/1.15 'Cinzel', Georgia, serif; letter-spacing: .06em; color: #f1e4cc; text-shadow: 0 1px 2px #000; }
.lh-arklina { margin: 0 auto 14px; max-width: 560px; font: italic 15px/1.45 Georgia, serif; color: #cdbd9f; }
#dagleg #daglegnett { max-width: none; margin: 8px 0 6px; gap: 6px; }
#dagleg .dagrute {
  padding: 8px 4px 9px; border-radius: 0;
  background: linear-gradient(180deg, rgba(40, 30, 21, .9), rgba(20, 15, 11, .9));
  border: 1px solid rgba(201, 168, 106, .22);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .05);
}
#dagleg .dagrute:hover { border-color: rgba(201, 168, 106, .5); }
#dagleg .dagrute .dr-dag { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .1em; color: #a99c86; text-transform: uppercase; }
#dagleg .dagrute .dr-lon { margin-top: 3px; font: 700 16px/1.1 Georgia, serif; color: #ffd08a; }
#dagleg .dagrute .dr-lon span { display: block; font: italic 11px Georgia, serif; color: #a99c86; }
#dagleg .dagrute .dr-ekstra { margin-top: 3px; font: italic 11.5px Georgia, serif; color: #e9b874; }
#dagleg .dagrute.stor { border-color: rgba(255, 179, 92, .65); background: linear-gradient(180deg, rgba(70, 44, 20, .9), rgba(30, 20, 12, .9)); }
#dagleg .dagrute.idag { border-color: var(--frost); box-shadow: 0 0 16px -3px rgba(159, 216, 255, .8); transform: scale(1.05); }
#dagleg .dagrute.tatt { opacity: .45; }
#dagleg .dagrute .dr-hake { inset: auto 0 4px 0; font: italic 11px Georgia, serif; color: #b7e8c4; background: none; }
#dagleg #dagdetalj { max-width: 600px; margin: 8px auto 0; min-height: 34px; font: italic 13.5px/1.45 Georgia, serif; color: #b6a68b; }
#dagleg #dagdetalj b { color: #f1e4cc; font-style: normal; }
#dagleg .dd-stor { color: var(--glod); font-style: normal; font-weight: 700; }
@media (max-width: 560px) {
  #dagleg #daglegnett { grid-template-columns: repeat(4, 1fr); }
  .lh-arktittel { font-size: 22px; }
}

/* Leigesoldatane i lobbyen: den måla helten, rolla og namnet */
#lobby #lobbybotar { display: grid; grid-template-columns: 1fr 1fr; gap: .35cqw; }
#lobby #lobbybotar .bsu { grid-column: 1 / -1; }
#lobby .botknapp { display: flex; align-items: center; gap: .5cqw; padding: .2cqw .5cqw .2cqw .2cqw; text-align: left; }
#lobby .botknapp .bk-bilde { height: 3.2cqw; width: 3.2cqw; object-fit: cover; object-position: 50% 12%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2d22, #120c08); box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .45); }
#lobby .botknapp .bk-bilde.ukjend { filter: brightness(.15) sepia(1); }
#lobby .botknapp .bk-tekst { display: flex; flex-direction: column; line-height: 1.15; }
#lobby .botknapp .bk-tekst b { font: 700 max(12px, .84cqw) Georgia, serif; color: #eadcc2; }
#lobby .botknapp .bk-tekst i { font: italic max(11px, .74cqw) Georgia, serif; color: #a99c86; }
#lobby .botknapp.valt .bk-tekst b { color: #ffd9a0; }
#lobby .botknapp.laast .bk-bilde { filter: grayscale(1) brightness(.5); }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #lobby .botknapp { gap: 2cqw; padding: 1cqw 2cqw 1cqw 1cqw; }
  #lobby .botknapp .bk-bilde { height: 11cqw; width: 11cqw; }
  #lobby .botknapp .bk-tekst b { font-size: 3.8cqw; }
  #lobby .botknapp .bk-tekst i { font-size: 3.2cqw; }
}

/* Distrikta og neste mål (The Web) */
.web-maal {
  position: absolute; right: 18px; top: max(16px, env(safe-area-inset-top)); z-index: 3;
  width: min(270px, 24vw);
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(10, 8, 6, .84), rgba(10, 8, 6, .64));
  border-top: 1px solid rgba(201, 168, 106, .3);
  box-shadow: 0 0 28px 14px rgba(8, 6, 5, .45);
}
.lh-skjerm .web-maal .lh-hovudrad { font-size: 12px; margin: 0; }
.lh-skjerm .wm-maal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 10px; text-align: left;
  background: linear-gradient(90deg, rgba(255, 179, 92, .14), rgba(255, 179, 92, .03));
  border: none; border-left: 2px solid rgba(255, 179, 92, .7); border-radius: 0;
}
.lh-skjerm .wm-maal:hover { background: linear-gradient(90deg, rgba(255, 179, 92, .22), rgba(255, 179, 92, .05)); transform: none; }
.wm-maal span { font: 700 10.5px 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--glod); }
.wm-maal b { font: 700 15px/1.15 'Cinzel', Georgia, serif; letter-spacing: .03em; color: #f1e4cc; }
.wm-maal i { font: italic 12.5px Georgia, serif; color: #cdbd9f; }
.wm-alt { margin: 0; font: italic 13px Georgia, serif; color: #e9cfa2; }
.wm-liste { display: flex; flex-direction: column; gap: 1px; }
.lh-skjerm .wm-rad {
  display: grid; grid-template-columns: 1fr 64px 34px; align-items: center; gap: 8px;
  padding: 3px 4px; text-align: left; background: none; border: none; border-radius: 0;
  font: 12.5px Georgia, serif; color: #d8cab0;
}
.lh-skjerm .wm-rad:hover { background: rgba(255, 179, 92, .08); transform: none; }
.wm-rad b { font-weight: 700; color: #e8d9bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-rad.ferdig b { color: #ffd9a0; }
.wm-strek { height: 3px; background: rgba(234, 220, 194, .14); }
.wm-strek i { display: block; height: 100%; background: var(--gf, #c9a86a); }
.wm-rad em { font: 700 11.5px Georgia, serif; font-style: normal; color: #a99c86; text-align: right; }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .web-maal { left: 10px; right: auto; width: auto; max-width: calc(100vw - 80px); top: auto; bottom: 64px; padding: 6px 8px; gap: 0; box-shadow: none; background: rgba(10, 8, 6, .82); }
  .web-maal .lh-hovudrad, .web-maal .wm-liste { display: none; }
  .lh-skjerm .wm-maal { padding: 4px 8px; }
  .wm-maal b { font-size: 13px; }
  .wm-maal i { font-size: 11.5px; }
}

/* ══ ALLE DEI ANDRE SKJERMANE (KM 25.10: «gå over alle de andre menyene også») ══
   Éin hud over dei gamle .lag-skjermane: same langhus-natt, skoren Cinzel, Georgia
   som blekk, tre og glød i staden for blått glas og neon. Variablane frå style.css
   blir omdefinerte her, så alle panela som brukar dei, følgjer med. */
.lag:not(.lh-skjerm):not(#meny) {
  --bg: #0b0807; --bg2: #15100c; --lys: #eadcc2; --dim: #a99c86;
  --neon: #9fd8ff; --neon2: #c9a86a; --varm: #ffb35c; --god: #b7e8c4; --fare: #e9806a;
  --kant: rgba(201, 168, 106, .26); --glas: rgba(24, 18, 13, .84);
  background: linear-gradient(rgba(8, 6, 5, .88), rgba(8, 6, 5, .95)), url('/bilete/meny/hall.webp') center / cover no-repeat;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--lys);
  font-family: Georgia, 'Times New Roman', serif;
}
.lag:not(.lh-skjerm):not(#meny) h2, .lag:not(.lh-skjerm):not(#meny) h3 {
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .14em;
  color: #e3cda4; -webkit-text-fill-color: currentColor; background: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .9);
}
.lag:not(.lh-skjerm):not(#meny) .hint { font-family: Georgia, serif; font-style: italic; color: #b6a68b; }
.lag:not(.lh-skjerm):not(#meny) button {
  font-family: Georgia, serif; font-weight: 600; letter-spacing: .01em;
  color: #eadcc2;
  background: linear-gradient(180deg, #2e241b, #1a140f);
  border: 1px solid rgba(201, 168, 106, .32); border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 220, 170, .06);
}
.lag:not(.lh-skjerm):not(#meny) button:hover { background: linear-gradient(180deg, #3a2d21, #211912); border-color: rgba(255, 179, 92, .55); }
.lag:not(.lh-skjerm):not(#meny) button.primer {
  color: #fff2de;
  background: linear-gradient(180deg, #5c3a1c, #3a2412);
  border-color: rgba(255, 179, 92, .65);
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(255, 160, 70, .45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 16px -6px rgba(255, 150, 60, .7);
}
.lag:not(.lh-skjerm):not(#meny) button.primer:hover { background: linear-gradient(180deg, #6e4622, #44291a); }
.lag:not(.lh-skjerm):not(#meny) button.lenkeknapp {
  font-style: italic; font-weight: 400; color: #d8c3a0;
  background: none; border: none; box-shadow: none;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(216, 195, 160, .4);
}
.lag:not(.lh-skjerm):not(#meny) button.lenkeknapp:hover { color: #fff; background: none; }
.lag:not(.lh-skjerm):not(#meny) button:disabled { opacity: .45; }
.lag:not(.lh-skjerm):not(#meny) input:not([type="range"]):not([type="checkbox"]) {
  font-family: Georgia, serif; color: #eadcc2;
  background: rgba(10, 7, 5, .7); border: 1px solid rgba(201, 168, 106, .32); border-radius: 3px;
}
.lag:not(.lh-skjerm):not(#meny) input[type="range"] { accent-color: #ffb35c; }
.lag:not(.lh-skjerm):not(#meny) .knapperad { background: none; }
.lag > .midt > .knapperad:last-child, .lag > .midt > .knapperad:last-of-type { background: linear-gradient(transparent, rgba(8, 6, 5, .92) 40%); }
.lag:not(.lh-skjerm):not(#meny) ::-webkit-scrollbar-thumb { background: rgba(201, 168, 106, .4); }
#talentskjerm #talentinfo { display: block; }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .web-maal { bottom: 118px; }
}

/* Skjermretning finst berre på touch (Options › Picture › Screen) */
@media (pointer: fine) { .berreTouch { display: none !important; } }

/* ── SAGAEN (fase 8a): glaset med dei fem ved elden ──────────────────────────
   Måleriet fyller scena; dei som ikkje er vekte, står under sitt eige frostlag
   (saga_frost_<id>.webp, same storleik). Tavla ligg nedst over golvet. */
#saga { --plate: url('/bilete/skjermar/saga_glas.webp'); }
.sg-glas { position: absolute; inset: 0; z-index: 0; }
.sg-glas .sg-maaleri, .sg-glas .sg-frost {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; user-select: none;
}
.sg-glas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 5, .6) 0%, rgba(8, 6, 5, 0) 17%, rgba(8, 6, 5, 0) 60%, rgba(8, 6, 5, .86) 79%, rgba(8, 6, 5, .94) 100%);
}
.sg-figur {
  position: absolute; z-index: 2; padding: 0;
  background: none; border: 0; border-radius: 40% 40% 6% 6%; cursor: pointer;
}
.sg-figur::after {
  content: attr(data-namn);
  position: absolute; left: 50%; top: -1.9cqw; translate: -50% 0;
  font: 700 max(11px, .8cqw)/1 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
  color: #e9d3a8; white-space: nowrap; text-shadow: 0 0 .5cqw #000, 0 .08cqw .15cqw #000;
  opacity: 0; transition: opacity .2s;
}
.sg-figur:not(.vaken)::after { color: var(--frost); }
.sg-figur:hover::after, .sg-figur:focus-visible::after { opacity: 1; }
.lh-skjerm .sg-figur:focus-visible { outline: none; }

.sg-tavle {
  position: absolute; left: 15%; right: 3%; bottom: 3.2%; z-index: 3;
  display: grid; grid-template-columns: 1.15fr 1.3fr 1fr; gap: 2.2cqw;
  padding: 1.3cqw 1.8cqw 1.2cqw;
  background: linear-gradient(180deg, rgba(14, 10, 7, .9), rgba(10, 7, 5, .86));
  border-top: 1px solid rgba(201, 168, 106, .35);
  box-shadow: 0 0 3cqw 1.5cqw rgba(8, 6, 5, .55);
}
.sg-del { min-width: 0; }
.sg-kap, .sg-oppdrag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35cqw; }
.sg-kap li {
  display: grid; grid-template-columns: 2cqw 1fr auto; align-items: baseline; gap: .7cqw;
  font: max(11px, .8cqw)/1.25 Georgia, serif; color: #a99c86;
}
.sg-kap .sg-nr { font: 700 max(11px, .78cqw)/1 'Cinzel', Georgia, serif; color: #7d6f5c; }
.sg-kap .sg-kn { color: #cdbd9f; }
.sg-kap .sg-kn i { margin-left: .5cqw; font-size: .88em; color: #7d6f5c; }
.sg-kap .sg-st { font-style: italic; color: var(--frost); opacity: .7; text-align: right; }
.sg-kap li.vaken .sg-nr, .sg-kap li.vaken .sg-st { color: var(--glod); opacity: 1; }
.sg-kap li.vaken .sg-st { font-style: normal; }
.sg-kap .sg-siste .sg-st { color: #8a7c66; opacity: 1; }
.sg-kap .sg-siste.open .sg-st { color: #e89a86; }
.sg-oppdrag li { display: grid; grid-template-columns: auto 1fr; gap: .7cqw; font: max(11px, .8cqw)/1.32 Georgia, serif; color: #cdbd9f; }
.sg-oppdrag .sg-kven { font: 700 max(10px, .7cqw)/1.6 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--glod); }
.sg-oppdrag .sg-q b { color: #ecdec4; }
.sg-oppdrag li.ferdig { opacity: .5; }
.sg-oppdrag li.ferdig .sg-q b::before { content: '\2713\00a0'; }
.sg-oppdrag .sg-tom { display: block; font-style: italic; color: #a99c86; }
.sg-sider { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6cqw; }
.sg-side {
  display: flex; flex-direction: column; align-items: center; gap: .3cqw; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: italic max(10px, .68cqw)/1.2 Georgia, serif; color: #8a7c66; text-align: center;
}
.sg-side img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: grayscale(.85) brightness(.45); transition: translate .2s; }
.sg-side.funnen { color: #e9d3a8; font-style: normal; }
.sg-side.funnen img { filter: none; }
.sg-side:hover img { translate: 0 -.15cqw; }
.sg-les {
  position: absolute; left: 50%; top: 17%; translate: -50% 0; z-index: 6;
  width: min(44cqw, 92%); padding: 2cqw 2.4cqw 1.5cqw;
  background: linear-gradient(180deg, rgba(30, 22, 15, .97), rgba(16, 11, 8, .97));
  border: 1px solid rgba(201, 168, 106, .45); box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, .7);
}
.sg-les[hidden] { display: none; }
.sg-les h3 { margin: 0 0 1cqw; font: 700 max(13px, 1.1cqw)/1.2 'Cinzel', Georgia, serif; letter-spacing: .12em; color: #e9d3a8; }
.sg-les p { margin: 0 0 1.1cqw; font: max(13px, 1cqw)/1.55 Georgia, serif; color: #e2d4b9; white-space: pre-line; text-shadow: none; }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .sg-glas { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 3 / 2; }
  .sg-figur::after { opacity: 1; top: -3.6cqw; font-size: 2.6cqw; }
  .sg-tavle { position: static; order: 3; display: flex; flex-direction: column; gap: 6cqw; padding: 4cqw; }
  .sg-kap, .sg-oppdrag { gap: 2cqw; }
  .sg-kap li { grid-template-columns: 6cqw 1fr; font-size: 3.6cqw; gap: 2.4cqw; }
  .sg-kap .sg-st { grid-column: 2; text-align: left; }
  .sg-oppdrag li { font-size: 3.6cqw; gap: 2.4cqw; }
  .sg-oppdrag .sg-kven { font-size: 2.9cqw; }
  .sg-sider { gap: 2cqw; }
  .sg-side { font-size: 2.8cqw; }
  .sg-les { position: fixed; top: 16%; width: 90vw; padding: 5cqw; }
  .sg-les h3 { font-size: 4.4cqw; }
  .sg-les p { font-size: 3.8cqw; }
}
/* Låg og liggjande (telefon på tvers): biletet til venstre, tavla til høgre, sida rullar */
@media (max-height: 500px) and (min-width: 761px) and (min-aspect-ratio: 10/11) {
  #saga.lag.lh-skjerm { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #saga .lh-scene {
    width: 100%; aspect-ratio: auto; container-type: inline-size;
    display: grid; grid-template-columns: 54% 1fr; gap: 2cqw; align-items: start;
    padding: 1.6cqw max(3cqw, env(safe-area-inset-right)) 3cqw max(3cqw, env(safe-area-inset-left));
  }
  #saga .lh-scene::after { display: none; }
  #saga .lh-skjermtopp { position: static; grid-column: 1 / -1; }
  #saga .lh-skjermtittel { font-size: 3.4cqw; }
  #saga .lh-skjermlina { max-width: none; font-size: 1.6cqw; }
  #saga .sg-glas { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 2; }
  #saga .sg-figur::after { opacity: 1; top: -2.2cqw; font-size: 1.3cqw; }
  #saga .sg-tavle { position: static; display: flex; flex-direction: column; gap: 2.2cqw; padding: 1.8cqw 2cqw; }
  #saga .lh-hovudrad { font-size: 1.5cqw; }
  #saga .sg-kap li, #saga .sg-oppdrag li { font-size: 1.55cqw; gap: 1cqw; }
  #saga .sg-kap li { grid-template-columns: 2.6cqw 1fr auto; }
  #saga .sg-oppdrag .sg-kven { font-size: 1.3cqw; }
  #saga .sg-side { font-size: 1.3cqw; }
  #saga .lh-attende { position: relative; left: auto; bottom: auto; grid-column: 1 / -1; justify-self: center; height: 5.4cqw; font-size: 1.9cqw; }
  #saga .sg-les { position: fixed; top: 10%; width: min(70vw, 560px); padding: 2.4cqw; }
  #saga .sg-les h3 { font-size: 1.9cqw; }
  #saga .sg-les p { font-size: 1.75cqw; }
}

/* ── Sagaen 8b: døra, slutten på glaset og valet ─────────────────────────── */
.sg-kap .sg-dor { display: flex; align-items: center; gap: 1.2cqw; margin-top: .5cqw; grid-template-columns: none; }
.sg-kap .sg-dor .lh-plankeknapp { height: max(30px, 2.4cqw); padding: 0 1.6cqw; font-size: max(12px, .9cqw); }
.sg-kap .sg-siste.valt .sg-st { color: #e9d3a8; font-style: normal; }
.sg-glas.lukk::before, .sg-glas.krone::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sg-glas.lukk::before { background: radial-gradient(ellipse at 8% 30%, rgba(255, 214, 160, .38), rgba(255, 190, 120, .08) 45%, transparent 70%); mix-blend-mode: screen; }
.sg-glas.krone::before { background: radial-gradient(ellipse at 50% 70%, rgba(120, 90, 220, .1), rgba(30, 20, 70, .55) 75%); }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .sg-kap .sg-dor { gap: 4cqw; margin-top: 2cqw; }
  .sg-kap .sg-dor .lh-plankeknapp { height: 11cqw; font-size: 3.8cqw; padding: 0 6cqw; }
}
.sv-skjerm {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at center, rgba(16, 11, 9, .96), rgba(4, 3, 2, .99) 70%);
}
.sv-skjerm.skjult { display: none; }
.sv-boks { width: min(640px, 100%); text-align: center; color: #e2d4b9; font-family: Georgia, serif; }
.sv-tittel { font: 700 clamp(22px, 4vw, 34px)/1.1 'Cinzel', Georgia, serif; letter-spacing: .26em; color: #c9ae84; text-transform: uppercase; }
.sv-line { margin: 14px 0 26px; font: italic clamp(15px, 2.2vw, 19px)/1.5 Georgia, serif; color: #b6a68b; }
.sv-val { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sv-val[hidden] { display: none; }
.sv-knapp {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; border-radius: 3px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, rgba(30, 22, 15, .96), rgba(16, 11, 8, .96)); border: 1px solid rgba(201, 168, 106, .4); color: #e2d4b9;
  transition: border-color .2s, translate .2s;
}
.sv-knapp b { font: 700 clamp(16px, 2.4vw, 21px)/1.2 'Cinzel', Georgia, serif; letter-spacing: .12em; }
.sv-knapp span { font: italic 14px/1.45 Georgia, serif; color: #b6a68b; }
.sv-knapp:hover { translate: 0 -2px; }
.sv-lukk b { color: #ffd6a0; }
.sv-lukk:hover { border-color: rgba(255, 200, 140, .75); }
.sv-krone b { color: #b9a6ff; }
.sv-krone:hover { border-color: rgba(170, 150, 255, .75); }
.sv-knapp:disabled { opacity: .5; cursor: default; }
.sv-tekst p { margin: 0 0 12px; font: clamp(15px, 2vw, 18px)/1.6 Georgia, serif; color: #e2d4b9; }
.sv-tekst[hidden] { display: none; }
.sv-vidare {
  margin-top: 14px; padding: 10px 28px; border-radius: 3px; font: 700 15px Georgia, serif; color: #fff2de; cursor: pointer;
  background: linear-gradient(180deg, #5c3a1c, #3a2412); border: 1px solid rgba(255, 179, 92, .65);
}
.sv-vidare[hidden] { display: none; }
@media (max-width: 560px) { .sv-val { grid-template-columns: 1fr; } }

/* ══ TYPESKALA FOR DEI ELDRE UNDERSIDENE (28.10.2026) ═══════════════════════════
   KM: «for smått og kjedelige fonts». Dei gamle .lag-skjermane hadde 8,5–13 px
   Inter og blåleg grått på brunt. No: éin skala med faste roller —
     tittel   Cinzel 700, 30–42 px, sperra .16em, med messinglina under
     rubrikk  Cinzel 700 14 px versalar (seksjonar: «Grade», «Career» …)
     namn     Cinzel 700 15–18 px (ting med namn: trofé, relikvie, side i boka)
     tekst    Georgia 15–16 px/1.45 i pergament (skildringar)
     stemme   Georgia kursiv 17 px (introlina under tittelen)
     merke    Cinzel 700 11,5–12 px versalar i oske (status, metadata)
   Berre storleik, font og farge her — layouten frå style.css står. */
.lag:not(.lh-skjerm):not(#meny) {
  --pergament: #cdbfa6;
  --oske: #a6967e;
  --messing: #c9a86a;
  --rubrikk: 700 14px/1.2 'Cinzel', Georgia, serif;
  --merke: 700 11.5px/1.2 'Cinzel', Georgia, serif;
}
.lag:not(.lh-skjerm):not(#meny) ::selection { background: rgba(255, 179, 92, .35); color: #fff; }
.lag:not(.lh-skjerm):not(#meny) .midt { width: min(640px, 94vw); }
.lag:not(.lh-skjerm):not(#meny) .midt.breid { width: min(1040px, 94vw); }
.lag:not(.lh-skjerm):not(#meny) .midt > h2 {
  margin: 0 0 6px; padding-left: .16em;
  font-size: clamp(30px, 1.25vw + 18px, 42px); line-height: 1.1; letter-spacing: .16em;
  color: #dcc395; text-wrap: balance;
}
.lag:not(.lh-skjerm):not(#meny) .midt > h2::after {
  content: ""; display: block; width: min(300px, 64%); height: 10px; margin: 10px auto 0;
  background: url('/bilete/meny/regel.svg') center / contain no-repeat;
}
.lag:not(.lh-skjerm):not(#meny) .midt > .hint {
  max-width: 64ch; margin: 0 auto 18px;
  font-size: 17px; line-height: 1.5; color: var(--pergament); text-wrap: pretty;
}
.lag:not(.lh-skjerm):not(#meny) .hint .hint, .lag:not(.lh-skjerm):not(#meny) .midt > div .hint { font-size: 16px; line-height: 1.5; color: var(--pergament); }
.lag:not(.lh-skjerm):not(#meny) .midt h3 { font: var(--rubrikk); letter-spacing: .16em; text-transform: uppercase; color: var(--messing); }
.lag:not(.lh-skjerm):not(#meny) .knapperad button { font-size: 17px; padding: 11px 24px; min-height: 46px; }
.lag:not(.lh-skjerm):not(#meny) .knapperad button.stor { font-size: 19px; padding: 13px 30px; }
.lag:not(.lh-skjerm):not(#meny) .knapperad button.lenkeknapp { padding: 11px 14px; }
/* fanene (Hallen, Galleriet, Tavla, Relikviekammeret) */
.lag:not(.lh-skjerm):not(#meny) .fane { font-size: 16px; padding: 9px 18px; border-radius: 3px; letter-spacing: .02em; }
.lag:not(.lh-skjerm):not(#meny) .fane.valt { background: linear-gradient(180deg, #4a3520, #2a1d13); border-color: rgba(255, 179, 92, .7); color: #fff2de; }
.lag:not(.lh-skjerm):not(#meny) .fanar button { font: 600 15px Georgia, serif; padding: 7px 13px; border-radius: 3px; }
.lag:not(.lh-skjerm):not(#meny) .fanar button.valt { border-color: rgba(255, 179, 92, .75); background: rgba(255, 179, 92, .12); }
.lag:not(.lh-skjerm):not(#meny) .fanar button .fn { font-weight: 700; }
.lag:not(.lh-skjerm):not(#meny) .tvfane { font: 700 15px Georgia, serif; padding: 8px 16px; border-radius: 3px; letter-spacing: .04em; }
.lag:not(.lh-skjerm):not(#meny) .tvfane .tvtal { font-weight: 600; }
.lag:not(.lh-skjerm):not(#meny) .tvfane { color: #d8c8aa; background: linear-gradient(180deg, #2e241b, #1a140f); border-color: rgba(201, 168, 106, .32); }
.lag:not(.lh-skjerm):not(#meny) .tvfane:hover { color: #fff2de; border-color: rgba(255, 179, 92, .55); }
.lag:not(.lh-skjerm):not(#meny) .tvfane.paa { color: #fff2de; background: linear-gradient(180deg, #4a3520, #2a1d13); border-color: rgba(255, 179, 92, .75); }

/* ── Hallen ── */
#hall .hallhint2 { font-size: 15.5px; color: var(--pergament); }
#hall .hallval { font-size: 15px; padding: 7px 16px; border-radius: 3px; }
#hall .hallrutenett { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
#hall .hallkort { border-radius: 4px; padding: 12px; gap: 6px; }
#hall .hk-namn { font: 700 16px/1.2 'Cinzel', Georgia, serif; letter-spacing: .03em; }
#hall .hk-merke, #hall .hk-sjeldan { font: var(--merke); letter-spacing: .12em; }
#hall .hk-tekst { font-size: 14.5px; line-height: 1.42; color: var(--pergament); }
#hall .hk-tekst i { color: var(--oske); }
#hall .hallkort .kjop { font-size: 15px; padding: 7px 14px; }
#hall .halltittel { padding: 12px 16px; border-radius: 4px; gap: 14px; }
#hall .halltittel b, #hall .hr-tekst b { font: 700 17px/1.2 'Cinzel', Georgia, serif; letter-spacing: .02em; }
#hall .ht-sj { font: var(--merke); letter-spacing: .14em; }
#hall .halltittel i, #hall .hr-tekst i { font-size: 15px; color: var(--pergament); }
#hall .hr-tekst i.hr-kj { color: var(--oske); }
#hall .ht-fr, #hall .hr-tal { font: 700 15px Georgia, serif; font-variant-numeric: tabular-nums; }
#hall .hallrune { grid-template-columns: 48px 1fr auto; padding: 12px 16px; border-radius: 4px; }
#hall .hr-knappar button { font-size: 15px; padding: 7px 14px; }
#hall .hallrek { border-radius: 4px; padding: 14px; }
#hall .hrk-namn { font: 700 16px/1.2 'Cinzel', Georgia, serif; margin-bottom: 8px; }
#hall .hrk-tom { font-size: 15px; color: var(--oske); font-style: italic; }
#hall .hrk-rad { grid-template-columns: 26px 1fr auto; font-size: 15.5px; font-variant-numeric: tabular-nums; }
#hall .hrk-rad em { font-size: 13.5px; color: var(--oske); }

/* ── Smia og Gjenfødinga (same rader) ── */
#smie .midt { width: min(700px, 94vw); }
#smiegull { font: 700 24px Georgia, serif; font-variant-numeric: tabular-nums; }
#smiehint { font-size: 15px; gap: 12px; }
#smie .sh-mark, #smie .sh-brenn { font-size: 15px; }
#smie .smieskil, #gjenfodsel .smieskil { font: var(--rubrikk); letter-spacing: .16em; color: var(--messing); padding: 10px 0 4px; }
.lag:not(.lh-skjerm):not(#meny) .smierad { padding: 14px 18px; gap: 16px; border-radius: 4px; }
.lag:not(.lh-skjerm):not(#meny) .smierad .tittel { font: 700 18px/1.25 'Cinzel', Georgia, serif; letter-spacing: .02em; }
.lag:not(.lh-skjerm):not(#meny) .smierad .tittel .niva { font-family: Georgia, serif; }
.lag:not(.lh-skjerm):not(#meny) .smierad .sub { font-size: 15.5px; line-height: 1.4; color: var(--pergament); margin-top: 2px; }
.lag:not(.lh-skjerm):not(#meny) .smierad .sub.kravlinje { color: #ffb3a1; }
.lag:not(.lh-skjerm):not(#meny) .smierad .sub.kravlinje.kravok { color: #b7e8c4; }
.lag:not(.lh-skjerm):not(#meny) .smierad > button { font-size: 16px; padding: 9px 16px; min-width: 104px; font-variant-numeric: tabular-nums; }
.lag:not(.lh-skjerm):not(#meny) .smierad canvas { width: 40px; height: 40px; }
.lag:not(.lh-skjerm):not(#meny) .smierad .utstyrt { font: var(--merke); letter-spacing: .12em; }
.evigrang { font: var(--merke); letter-spacing: .12em; }
.smeltxp { font-size: 14px; }

/* ── Loadout ── */
#utval .merkelinje { gap: 12px; padding: 10px 14px; }
#utval .merkelinje .ml-tit { font: 700 13px 'Cinzel', Georgia, serif; letter-spacing: .16em; }
#utval .merkelinje .ml-sub { font: italic 15px/1.4 Georgia, serif; color: var(--pergament); }
#utval .merkelinje b { font: 700 15px Georgia, serif; }
#utvalliste { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
#utval .uvkort { border-radius: 4px; padding-bottom: 8px; }
#utval .uvkort .n { font-size: 13px; line-height: 1.25; color: var(--pergament); }
#utval .uvkort.merkt .n { color: #ffe2a6; }
#utval .uvkort .uv-stjerne { width: 26px; height: 26px; font-size: 15px; }
#utval .utvaltittel { margin: 22px 0 10px; }
#utval .utvaltittel h3 { font: var(--rubrikk); letter-spacing: .16em; color: var(--messing); }
#utval .utvaltittel span { font: italic 15px Georgia, serif; color: var(--oske); }

/* ── Boka (The Ledger) ── */
#bok .bokside { max-width: 720px; gap: 16px; padding: 16px 18px; border-radius: 4px; }
#bok .bs-ikon { width: 44px; height: 44px; }
#bok .bs-tittel { font: 700 18px/1.25 'Cinzel', Georgia, serif; letter-spacing: .02em; margin-bottom: 6px; }
#bok .bs-ny { font: 700 11px/1.4 'Cinzel', Georgia, serif; letter-spacing: .1em; border-radius: 2px; padding: 2px 7px; vertical-align: 3px; }
#bok .bs-tekst { font-size: 16px; line-height: 1.55; color: var(--pergament); }
#bok .bokside.laast .bs-tekst { color: var(--oske); font-style: italic; }
#bok .bs-sam-tittel { font: var(--merke); letter-spacing: .16em; }
#bok .bs-sam-rad { font-size: 15px; }
#bok .bs-sam-rad i { font-size: 14px; }

/* ── Statistikken ── */
#statsinnhald { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
#stats .stblokk { border-radius: 4px; padding: 16px 18px; }
#stats .stblokk h3 { margin: 0 0 10px; }
#stats .strad { padding: 5px 0; }
#stats .strad span { font-size: 15.5px; color: var(--pergament); }
#stats .strad b { font: 700 16px Georgia, serif; font-variant-numeric: tabular-nums; }
#stats .stnote { font: italic 14px/1.45 Georgia, serif; color: var(--oske); }
#stats table { font-size: 15px; font-variant-numeric: tabular-nums; }
#stats th { font: var(--merke); letter-spacing: .1em; color: var(--oske); }
#stats tr + tr th { font: 15px Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--pergament); text-align: left; padding-right: 10px; }
#stats td { font-size: 15.5px; padding: 3px 6px; }

/* ── Tavla ── */
#tavle .tavlerad { padding: 12px 16px; gap: 14px; border-radius: 4px; }
#tavle .tavlerad .plass { width: 30px; font-size: 17px; }
#tavle .tavlerad .tnamn { font: 700 17px 'Cinzel', Georgia, serif; letter-spacing: .02em; }
#tavle .tavlerad .rift { font: 700 15.5px 'Cinzel', Georgia, serif; letter-spacing: .06em; }
#tavle .tavlerad .meta { font-size: 14.5px; color: var(--oske); }

/* ── How to play ── */
#hjelp .hjelpgrid { gap: 34px; margin: 18px 0; }
#hjelp .hjelpgrid ul { gap: 10px; padding: 0; }
#hjelp .hjelpgrid li { font-size: 16px; line-height: 1.55; color: var(--pergament); padding-left: 18px; }
#hjelp .hjelpgrid li::before { color: var(--messing); }
#hjelp .kombotal { font: var(--merke); letter-spacing: .1em; }

/* ── Prologen: lesetekst ── */
#prolog #prologtekst { max-width: 62ch; margin: 22px auto 10px; gap: 16px; }
#prolog #prologtekst p { font-size: 18px; line-height: 1.65; }
/* fargane berre når forteljaren ikkje les — då styrer .pl-aktiv/.pl-les i style.css */
#prolog #prologtekst:not(.pl-aktiv) p { color: var(--pergament); }
#prolog #prologtekst:not(.pl-aktiv) p:last-child { color: #eadcc2; }

/* ── Galleriet ── */
#galleriinnhald { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
#galleri .gkort { border-radius: 4px; padding-bottom: 8px; }
#galleri .gkort .gn { font-size: 13.5px; line-height: 1.25; }
#galleri .gkort .gs { font: var(--merke); font-size: 11px; letter-spacing: .1em; color: var(--oske); }
#galleri .gkort .gt { font-size: 13px; line-height: 1.4; color: var(--pergament); }

/* ── Relikviekammeret ── */
#relliste { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
#relikvie .relhylle { font: var(--rubrikk); letter-spacing: .16em; color: var(--messing); padding-top: 8px; }
#relikvie .relkort { border-radius: 4px; padding: 14px 16px; }
#relikvie .relkort .rn { font: 700 17px/1.25 'Cinzel', Georgia, serif; letter-spacing: .02em; }
#relikvie .relkort .rt { font-size: 15px; color: var(--pergament); margin-top: 4px; }
#relikvie .relkort .rstat { font: var(--merke); letter-spacing: .12em; color: var(--oske); }

/* ── Gjenfødinga ── */
#gjenfodsel .pt-stor { font: 700 44px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
#gjenfodsel .pt-under { font: var(--merke); letter-spacing: .18em; margin-top: 4px; }
#gjenfodsel .prestats { gap: 8px; margin: 12px 0; }
#gjenfodsel .prestats span { font: 600 14.5px Georgia, serif; color: var(--pergament); padding: 4px 10px; border-radius: 3px; }
#gjenfodsel .prestats b { font-weight: 700; }
#gjenfodsel .prekrav { font-size: 15.5px; color: var(--pergament); }
#gjenfodsel #kviforKnapp { font-size: 15.5px; }
#gjenfodsel .glodrad { font: 700 19px Georgia, serif; }
#gjenfodsel .glodtal { font-size: 26px; font-variant-numeric: tabular-nums; }

/* ── Vennene ── */
#vener .vengruppe h4 { font: var(--rubrikk); letter-spacing: .16em; color: var(--messing); margin: 0 0 8px; }
#vener .vknapp { font: 600 15px Georgia, serif; padding: 7px 14px; border-radius: 3px; }
#vener .venlegg input { font-size: 16px; padding: 10px 12px; }

/* ── Midnattskista ── */
#kiste .kistetel { font: 700 18px Georgia, serif; }
#kiste .kistetel b { font-size: 24px; font-variant-numeric: tabular-nums; }
#kiste .pb-tekst { font: var(--merke); font-size: 12.5px; letter-spacing: .12em; margin-bottom: 6px; }
#kiste .pb-tekst b { font: 700 15px Georgia, serif; }
#kiste .pb-hint { font: italic 15px/1.45 Georgia, serif; letter-spacing: 0; color: var(--pergament); margin-top: 4px; }
#kiste .kiste-slag .ks-sub { font: 15px/1.45 Georgia, serif; color: var(--pergament); }
#kiste #pitybar { max-width: 520px; margin-inline: auto; }

/* ══ RUSTKAMMERET (31.10.2026): Equipment-fana i heltevindauget ═══════════════
   KM: «sets tar for stor plass. slik at bagene blir skubbet ned. gjøre en helt ny rework her».
   PC: éin skjerm utan scrolling. Helten med dei 13 plagga rundt seg til venstre, sekken som
   rutenett til høgre, og den valde tingen i lina nedst i sekken. Setta er sju merke med fire
   prikkar, juvelane tre sokklar; kvar opnar eit lite kort. Mobil: éi kolonne, sett og juvelar
   på éi line, den valde tingen klistra over Back-lina. Hudregelen for knappar har ID-vekt
   (1,2,1), så alt her går gjennom to ID-ar (#helt #heltpanel …). */
#helt #heltpanel { text-align: center; }
#helt.utstyrfane.lag .midt.breid { width: min(1240px, calc(100vw - 40px)); }
@media (min-width: 761px) and (min-aspect-ratio: 10/11) {
  /* Hovudet på éi line: namn og rolle til venstre, fanene i midten (alle tre fanene) */
  #helt.lag .midt.breid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "namn faner ." "rolle faner ." "panel panel panel" "knapp knapp knapp";
    column-gap: 20px; align-items: center; text-align: left;
  }
  #helt #hellttittel { grid-area: namn; margin: 0; padding: 0; font-size: 30px; letter-spacing: .14em; text-align: left; }
  #helt #hellttittel::after { display: none; }
  #helt #heltrolle { grid-area: rolle; margin: 3px 0 0; max-width: none; font-size: 14.5px; line-height: 1.35; text-align: left; }
  #helt #heltfaner { grid-area: faner; margin: 0; }
  #helt #heltpanel { grid-area: panel; }
  #helt .midt.breid > .knapperad { grid-area: knapp; }
}
#helt #heltrolle b { font-style: normal; color: #ffd99a; }

#helt #heltpanel .ut-flate {
  --s: clamp(44px, calc((100dvh - 600px) / 4.6), 62px);
  display: grid; grid-template-columns: minmax(400px, 470px) minmax(0, 1fr); gap: 16px;
  height: clamp(540px, calc(100dvh - 240px), 860px); margin-top: 12px; text-align: left;
}
#helt #heltpanel .ut-panel {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(#1c140f, #110c09); border: 1px solid rgba(201, 168, 106, .36); border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
}
#helt #heltpanel .ut-venstre { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }

/* ── Sokklane og rutene (felles for helten og sekken) ── */
#helt #heltpanel .ut-sokk {
  --rf: #8f8775;
  position: relative; display: grid; place-items: center; width: var(--s); height: var(--s); min-height: 0;
  padding: 0; margin: 0; color: var(--rf); cursor: pointer; border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rf) 20%, #120d0a), #0b0806 74%);
  border: 1px solid color-mix(in srgb, var(--rf) 62%, #2a2016);
  transition: transform .15s ease-out, border-color .15s ease-out;
}
#helt #heltpanel .ut-sokk:hover { transform: translateY(-2px); border-color: var(--rf); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rf) 30%, #120d0a), #0b0806 74%); }
#helt #heltpanel .ut-sokk:disabled { opacity: 1; cursor: default; transform: none; }
#helt #heltpanel .ut-sokk.tom { color: rgba(166, 150, 126, .42); border: 1px dashed rgba(201, 168, 106, .3); background: #0c0907; }
#helt #heltpanel .ut-sokk.skrot { opacity: .5; }
#helt #heltpanel .ut-sokk.skrot:hover { opacity: .8; }
#helt #heltpanel .ut-sokk.vald { outline: 2px solid #ffb35c; outline-offset: 3px; }
#helt #heltpanel .ut-ik { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#helt #heltpanel .ut-sokk.tom .ut-ik { stroke-width: 1.4; }
#helt #heltpanel .ut-pil { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#helt #heltpanel .ut-lvl { position: absolute; right: 4px; bottom: 1px; font: 700 10.5px 'Cinzel', Georgia, serif; color: rgba(234, 220, 194, .75); }
#helt #heltpanel .ut-opp { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: #163120; border: 1px solid #8fe8a6; color: #8fe8a6; }
#helt #heltpanel .ut-ny { position: absolute; top: -6px; right: -6px; padding: 2px 4px; border-radius: 3px; font: 700 9px 'Cinzel', Georgia, serif; letter-spacing: .06em; background: #12303a; color: #9fd8ff; border: 1px solid rgba(159, 216, 255, .6); }
#helt #heltpanel .ut-laas { position: absolute; top: 3px; left: 4px; color: #ffd99a; display: grid; }
#helt #heltpanel .ut-settmerke { position: absolute; left: -5px; bottom: -5px; width: 15px; height: 15px; transform: rotate(45deg); background: var(--sf); border: 1.5px solid #0b0806; }
#helt #heltpanel button:focus-visible { outline: 2px solid #ffb35c; outline-offset: 2px; }

/* ── Helten med plagga ── */
#helt #heltpanel .ut-dokke { display: grid; grid-template-columns: var(--s) minmax(0, 1fr) var(--s); grid-template-rows: repeat(5, var(--s)); gap: 8px 14px; padding: 16px 18px 4px; }
#helt #heltpanel .ut-dokke [data-side="v"] { grid-column: 1; grid-row: var(--r); }
#helt #heltpanel .ut-dokke [data-side="h"] { grid-column: 3; grid-row: var(--r); }
#helt #heltpanel .ut-figur { grid-column: 2; grid-row: 1 / 6; position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; }
#helt #heltpanel .ut-figur::after { content: ""; position: absolute; bottom: 0; left: 20%; right: 20%; height: 16px; background: radial-gradient(ellipse, rgba(0, 0, 0, .65), transparent 70%); z-index: -1; }
#helt #heltpanel .ut-figur canvas { height: 100%; width: auto; max-width: 100%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .75)); }
#helt #heltpanel .ut-vaapen { display: flex; justify-content: center; gap: 14px; padding: 6px 0 4px; }
#helt #heltpanel .ut-statar { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 4px 16px 14px; }
#helt #heltpanel .ut-statar span { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .05em; text-transform: uppercase; color: #a6967e; padding: 3px 8px; border: 1px solid rgba(201, 168, 106, .24); border-radius: 3px; background: rgba(10, 7, 5, .5); white-space: nowrap; }
#helt #heltpanel .ut-statar b { color: #eadcc2; margin-left: 5px; letter-spacing: .02em; }
#helt #heltpanel .ut-statar .tom { text-transform: none; font: italic 14px Georgia, serif; letter-spacing: 0; border: 0; background: none; white-space: normal; }

/* ── Sett og juvelar ── */
#helt #heltpanel .ut-settjuvel { position: relative; margin-top: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px 14px; border-top: 1px solid rgba(201, 168, 106, .16); }
#helt #heltpanel .ut-settrad { flex: 1; min-width: 0; }
#helt #heltpanel .ut-radtittel { font: 700 12px 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #b89c72; }
#helt #heltpanel .ut-radtittel span { margin-left: 8px; font: italic 400 13px Georgia, serif; letter-spacing: 0; text-transform: none; color: #a6967e; }
#helt #heltpanel .ut-settrad .ut-rekkje { display: flex; justify-content: space-between; margin-top: 9px; }
#helt #heltpanel .ut-juvelrad { flex: none; padding-left: 12px; border-left: 1px solid rgba(201, 168, 106, .2); }
#helt #heltpanel .ut-juvelrad .ut-rekkje { display: flex; align-items: flex-start; gap: 2px; margin-top: 9px; }
#helt #heltpanel .ut-radtittel { white-space: nowrap; }
#helt #heltpanel .ut-sigil, #helt #heltpanel .ut-gem {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 0; width: 40px; padding: 2px 0;
  background: none; border: 0; box-shadow: none; cursor: pointer;
}
#helt #heltpanel .ut-sigil:hover, #helt #heltpanel .ut-gem:hover { background: none; }
#helt #heltpanel .ut-merke {
  width: 34px; height: 34px; display: grid; place-items: center; color: var(--sf);
  clip-path: polygon(50% 0, 100% 22%, 100% 74%, 50% 100%, 0 74%, 0 22%); background: linear-gradient(#2a2017, #0e0a08);
  transition: transform .15s ease-out;
}
#helt #heltpanel .ut-sigil:hover .ut-merke, #helt #heltpanel .ut-sigil[aria-expanded="true"] .ut-merke { transform: translateY(-2px); }
#helt #heltpanel .ut-sigil.lys .ut-merke { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sf) 38%, #1a130d), #0e0a08 80%); }
#helt #heltpanel .ut-sigil.av .ut-merke { color: color-mix(in srgb, var(--sf) 45%, #3a3125); }
#helt #heltpanel .ut-mik { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#helt #heltpanel .ut-prikkar { display: flex; gap: 2px; }
#helt #heltpanel .ut-prikkar i { width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid rgba(166, 150, 126, .35); }
#helt #heltpanel .ut-prikkar i.paa { background: var(--sf); border-color: var(--sf); }
#helt #heltpanel .ut-prikkar i.funne { border-color: var(--sf); box-shadow: inset 0 0 0 1.5px #0d0907; }
#helt #heltpanel .ut-n { font: 700 11px 'Cinzel', Georgia, serif; color: #a6967e; }
#helt #heltpanel .ut-sigil.lys .ut-n { color: #eadcc2; }
#helt #heltpanel .ut-ring {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--jf, #8f8775);
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--jf, #3a3125) 30%, #16100b), #0b0806 74%);
  border: 1px solid rgba(201, 168, 106, .5); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}
#helt #heltpanel .ut-ring .ut-mik { fill: color-mix(in srgb, currentColor 30%, transparent); stroke-width: 1.5; }
#helt #heltpanel .ut-gem.tom .ut-ring { border-style: dashed; color: rgba(166, 150, 126, .42); background: #0c0907; }
#helt #heltpanel .ut-gem.tom .ut-ring .ut-mik { fill: none; }
#helt #heltpanel .ut-gem.stengd { opacity: .55; }
#helt #heltpanel .ut-gem { width: 44px; }
#helt #heltpanel .ut-gem .ut-n { color: #cdbfa6; font-size: 10px; white-space: nowrap; }
#helt #heltpanel .ut-fleire {
  min-height: 0; margin-left: 6px; padding: 0 2px; background: none; border: 0; box-shadow: none;
  font: italic 400 13px Georgia, serif; letter-spacing: 0; text-transform: none; color: #e2c48c; text-decoration: underline; text-underline-offset: .2em;
}
#helt #heltpanel .ut-fleire:hover { color: #ffd99a; background: none; }

/* Korta over rada */
#helt #heltpanel .ut-pop {
  position: absolute; z-index: 6; bottom: calc(100% + 10px); width: min(350px, 100%); max-height: min(440px, 62vh); overflow-y: auto;
  padding: 14px 16px; text-align: left; font: 14.5px/1.4 Georgia, serif; color: #cdbfa6;
  background: linear-gradient(#211811, #120d0a); border: 1px solid rgba(201, 168, 106, .55); border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .75); scrollbar-width: thin;
}
#helt #heltpanel .ut-pop::after {
  content: ""; position: absolute; bottom: -7px; left: var(--pil, 40px); width: 12px; height: 12px; transform: rotate(45deg);
  background: #130e0a; border-right: 1px solid rgba(201, 168, 106, .55); border-bottom: 1px solid rgba(201, 168, 106, .55);
}
#helt #heltpanel .ut-pop:has(.ut-juvelkort) { width: min(400px, 100%); overflow-y: auto; }
#helt #heltpanel .ut-pop:has(.ut-juvelkort)::after { display: none; }
#helt #heltpanel .ut-pop h4 { margin: 0; font: 700 16px 'Cinzel', Georgia, serif; letter-spacing: .06em; color: #e3cda4; }
#helt #heltpanel .ut-popsub { margin: 2px 0 10px; font: italic 13.5px Georgia, serif; color: #a6967e; }
#helt #heltpanel .ut-del { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 3px 0; color: #eadcc2; }
#helt #heltpanel .ut-delik { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 3px; border: 1px solid rgba(201, 168, 106, .25); color: rgba(166, 150, 126, .5); background: #0c0907; }
#helt #heltpanel .ut-delik.paa { color: var(--sf); border-color: color-mix(in srgb, var(--sf) 65%, #2a2016); background: radial-gradient(circle, color-mix(in srgb, var(--sf) 22%, #120d0a), #0b0806 74%); }
#helt #heltpanel .ut-delik.sekk { color: var(--sf); border: 1px dashed color-mix(in srgb, var(--sf) 60%, #2a2016); }
#helt #heltpanel .ut-del em { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .08em; font-style: normal; text-transform: uppercase; }
#helt #heltpanel .ut-del em.paa { color: #8fe8a6; }
#helt #heltpanel .ut-del em.sekk { color: #9fd8ff; }
#helt #heltpanel .ut-del em.mangel { color: #a6967e; }
#helt #heltpanel .ut-bonus { margin: 9px 0 0; color: #a6967e; }
#helt #heltpanel .ut-bonus.paa { color: #eadcc2; }
#helt #heltpanel .ut-bonus b { margin-right: 6px; font-family: 'Cinzel', Georgia, serif; color: var(--sf); }
#helt #heltpanel .ut-kjelde { margin: 10px 0 0; font: italic 13.5px Georgia, serif; color: #a6967e; }
#helt #heltpanel .ut-jrad { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(201, 168, 106, .12); }
#helt #heltpanel .ut-jik { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--jf); border: 1px solid rgba(201, 168, 106, .45); background: radial-gradient(circle, color-mix(in srgb, var(--jf) 26%, #16100b), #0b0806 74%); }
#helt #heltpanel .ut-jik .ut-mik { width: 17px; height: 17px; fill: color-mix(in srgb, currentColor 30%, transparent); }
#helt #heltpanel .ut-jnamn { font: 700 11.5px 'Cinzel', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #a6967e; }
#helt #heltpanel .ut-jnamn b { margin-right: 6px; font: 700 15px Georgia, serif; text-transform: none; letter-spacing: 0; }
#helt #heltpanel .ut-jtekst { font-size: 13.5px; color: #cdbfa6; }
#helt #heltpanel .ut-jbar { height: 4px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#helt #heltpanel .ut-jbar i { display: block; height: 100%; background: var(--jf); }
#helt #heltpanel .ut-jrad.paa .ut-jnamn::after { content: "socketed"; margin-left: 6px; color: #8fe8a6; }

/* ── Sekken ── */
#helt #heltpanel .ut-topp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 10px; border-bottom: 1px solid rgba(201, 168, 106, .16); }
#helt #heltpanel .ut-topp h3 { margin: 0; font: 700 15px 'Cinzel', Georgia, serif; letter-spacing: .14em; color: #e3cda4; }
#helt #heltpanel .ut-tal { font: 700 14px 'Cinzel', Georgia, serif; color: #a6967e; white-space: nowrap; }
#helt #heltpanel .ut-tal.nesten { color: #ffb35c; }
#helt #heltpanel .ut-filter { display: flex; flex-wrap: wrap; gap: 4px; }
#helt #heltpanel .ut-filt {
  min-height: 0; padding: 5px 9px; background: none; border: 0; border-radius: 3px; box-shadow: none;
  font: 700 12px 'Cinzel', Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #a6967e;
}
#helt #heltpanel .ut-filt b { margin-left: 5px; color: #cdbfa6; }
#helt #heltpanel .ut-filt.opp b { color: #8fe8a6; }
#helt #heltpanel .ut-filt:hover { color: #eadcc2; background: rgba(201, 168, 106, .08); }
#helt #heltpanel .ut-filt.paa { color: #eadcc2; background: rgba(201, 168, 106, .14); box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .42); }
#helt #heltpanel .ut-filt:disabled { opacity: .4; background: none; }
#helt #heltpanel .ut-skrotalt { margin-left: auto; }
#helt #heltpanel .ut-rutenett {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: grid; grid-template-columns: repeat(auto-fill, 64px); justify-content: space-between; align-content: start;
  gap: 12px 10px; padding: 16px;
}
#helt #heltpanel .ut-rutenett .ut-sokk { --s: 64px; }
#helt #heltpanel .ut-rutenett .tomsekk { grid-column: 1 / -1; padding: 30px 0; font: italic 15px Georgia, serif; color: #a6967e; text-align: center; }

/* Knappane: plankeved frå menyen */
#helt #heltpanel .ut-knapp {
  position: relative; isolation: isolate; min-height: 0; padding: 8px 16px; border: 0; border-radius: 0; box-shadow: none; background: none;
  font: 700 14.5px Georgia, serif; color: #eadcc2; white-space: nowrap; cursor: pointer;
}
#helt #heltpanel .ut-knapp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url('/bilete/meny/planke.webp') center / cover; filter: brightness(.42) saturate(.72); transition: filter .15s ease-out; }
#helt #heltpanel .ut-knapp:hover { color: #fff; background: none; }
#helt #heltpanel .ut-knapp:hover::before { filter: brightness(.6) saturate(.8); }
#helt #heltpanel .ut-knapp.primer { color: #fff6e4; box-shadow: inset 0 0 0 1px rgba(255, 179, 92, .6); text-shadow: 0 1px 2px #000; }
#helt #heltpanel .ut-knapp.primer::before { filter: brightness(.62) saturate(.85); }
#helt #heltpanel .ut-knapp.lite { padding: 6px 12px; font-size: 13.5px; }
#helt #heltpanel .ut-knapp.laast { color: #ffd99a; }
#helt #heltpanel .ut-knapp:disabled { opacity: .45; cursor: default; }
#helt #heltpanel .ut-knapp .ut-pil { vertical-align: -1px; }
#helt #heltpanel .ut-gull { color: #ffd99a; }

/* Den valde tingen */
#helt #heltpanel .ut-detalj {
  position: relative; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 16px;
  padding: 14px 16px; border-top: 1px solid rgba(201, 168, 106, .22); background: linear-gradient(rgba(201, 168, 106, .05), rgba(17, 12, 9, .96));
  max-height: 46%; overflow-y: auto; scrollbar-width: thin;
}
#helt #heltpanel .ut-detalj.tom { display: block; padding: 12px 16px; }
#helt #heltpanel .ut-hint { margin: 0; font: italic 14.5px Georgia, serif; color: #a6967e; }
#helt #heltpanel .ut-hintopp { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; vertical-align: -3px; background: #163120; border: 1px solid #8fe8a6; color: #8fe8a6; }
#helt #heltpanel .ut-hintopp .ut-pil { width: 11px; height: 11px; }
#helt #heltpanel .ut-sokk.stor { --s: 72px; }
#helt #heltpanel .ut-dnamn { font: 700 17px/1.2 Georgia, serif; padding-right: 26px; }
#helt #heltpanel .ut-dmeta { margin-top: 3px; font: 700 11.5px 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #a6967e; }
#helt #heltpanel .ut-dmeta b { margin-left: 10px; letter-spacing: .08em; }
#helt #heltpanel .ut-dmeta b.opp { color: #8fe8a6; }
#helt #heltpanel .ut-dmeta b.ny { color: #9fd8ff; }
#helt #heltpanel .ut-dmeta b.ned { color: #a6967e; }
#helt #heltpanel .ut-dmeta b.paa { color: #ffb35c; }
#helt #heltpanel .ut-uni { margin: 8px 0 0; color: #ffd99a; font-size: 14.5px; }
#helt #heltpanel .ut-linjer { list-style: none; margin: 8px 0 0; padding: 0; columns: 2; column-gap: 22px; font-size: 14.5px; color: #cdbfa6; }
#helt #heltpanel .ut-linjer li { break-inside: avoid; padding: 1px 0; }
#helt #heltpanel .ut-linjer i { display: inline-block; width: 16px; font-style: normal; font-size: 11px; color: #a6967e; }
#helt #heltpanel .ut-linjer i.opp { color: #8fe8a6; }
#helt #heltpanel .ut-linjer i.ned { color: #ff9b8a; }
#helt #heltpanel .ut-saman { margin: 8px 0 0; font: italic 14px Georgia, serif; color: #a6967e; }
#helt #heltpanel .ut-saman b { font-style: normal; font-weight: 700; }
#helt #heltpanel .ut-vaar { font-style: normal; color: #ffb3a1; }
#helt #heltpanel .ut-dknappar { display: flex; flex-direction: column; gap: 8px; align-self: start; min-width: 150px; }
#helt #heltpanel .ut-lukk {
  position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center;
  background: none; border: 0; box-shadow: none; font: 400 22px/1 Georgia, serif; color: #a6967e;
}
#helt #heltpanel .ut-lukk:hover { color: #fff; background: none; }
#helt #heltpanel .ut-detalj .ut-dknappar { margin-top: 26px; }

/* ── Smalt eller ståande: éi kolonne, sida rullar ── */
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #helt.utstyrfane.lag .midt.breid { width: 100%; }
  #helt #hellttittel { font-size: 24px; margin-bottom: 2px; }
  #helt #hellttittel::after { display: none; }
  #helt #heltrolle { margin-bottom: 8px; font-size: 14.5px; }
  #helt #heltfaner button { padding: 6px 12px; }
  #helt .ut-rollemidt { display: none; }
  #helt #heltpanel .ut-flate { --s: 46px; display: flex; flex-direction: column; gap: 10px; height: auto; margin: 10px -4px 0; }
  #helt #heltpanel .ut-venstre { overflow: visible; }
  /* Helten til venstre, dei 13 plagga i eit rutenett med fire kolonnar ved sida av */
  #helt #heltpanel .ut-kropp { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, var(--s)); gap: 8px; padding: 12px 14px 8px; }
  #helt #heltpanel .ut-dokke, #helt #heltpanel .ut-vaapen { display: contents; }
  #helt #heltpanel .ut-kropp .ut-sokk { grid-column: auto; grid-row: auto; }
  #helt #heltpanel .ut-figur { grid-column: 1; grid-row: 1 / 5; }
  #helt #heltpanel .ut-gem .ut-n { display: none; }
  /* Stats på éi line som kan sveipast */
  #helt #heltpanel .ut-statar { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 12px 12px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  #helt #heltpanel .ut-statar::-webkit-scrollbar { display: none; }
  #helt #heltpanel .ut-statar span { font-size: 10.5px; padding: 3px 7px; }
  /* Setta over heile breidda, juvelane på eiga line under */
  #helt #heltpanel .ut-settjuvel { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 14px 12px; }
  #helt #heltpanel .ut-settrad .ut-rekkje { margin-top: 7px; }
  #helt #heltpanel .ut-juvelrad { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(201, 168, 106, .14); }
  #helt #heltpanel .ut-juvelrad .ut-rekkje { margin: 0; gap: 8px; }
  #helt #heltpanel .ut-sigil .ut-n { display: none; }
  #helt #heltpanel .ut-pop { width: 100%; max-height: 60vh; }
  #helt #heltpanel .ut-topp { padding: 10px 12px 8px; }
  #helt #heltpanel .ut-filter { order: 3; width: 100%; }
  #helt #heltpanel .ut-filt { font-size: 11px; padding: 5px 7px; }
  #helt #heltpanel .ut-rutenett { overflow: visible; grid-template-columns: repeat(auto-fill, 56px); gap: 10px 6px; padding: 12px; }
  #helt #heltpanel .ut-rutenett .ut-sokk { --s: 56px; }
  /* Den valde tingen: eit fast ark over Back-lina, knappane rett under namnet. Sekken får luft
     nedst, så dei siste rutene kan rullast fram over arket. (Sticky kunne ikkje lyfte arket over
     toppen av sekkpanelet, så det låg under kanten til du hadde rulla langt ned.) */
  #helt #heltpanel .ut-detalj {
    position: fixed; left: 8px; right: 8px; bottom: 76px; z-index: 5; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px;
    max-height: 46vh; padding: 12px 14px; border: 1px solid rgba(201, 168, 106, .5); border-radius: 8px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .7); background: linear-gradient(#231a12, #120d0a);
  }
  #helt #heltpanel .ut-detalj.tom { display: none; }
  #helt #heltpanel .ut-flate:has(.ut-detalj:not(.tom)) .ut-rutenett { padding-bottom: 46vh; }
  #helt #heltpanel .ut-detalj .ut-dmidt { display: contents; }
  #helt #heltpanel .ut-detalj .ut-sokk.stor { --s: 52px; grid-column: 1; grid-row: 1 / 3; align-self: start; }
  #helt #heltpanel .ut-detalj .ut-dnamn { grid-column: 2; grid-row: 1; font-size: 16px; padding-right: 30px; }
  #helt #heltpanel .ut-detalj .ut-dmeta { grid-column: 2; grid-row: 2; font-size: 10.5px; }
  #helt #heltpanel .ut-detalj .ut-dknappar { grid-column: 1 / -1; grid-row: 3; flex-direction: row; min-width: 0; margin: 8px 0 2px; }
  #helt #heltpanel .ut-detalj .ut-dknappar .ut-knapp { flex: 1; padding: 9px 6px; font-size: 14px; }
  #helt #heltpanel .ut-detalj .ut-uni, #helt #heltpanel .ut-detalj .ut-linjer, #helt #heltpanel .ut-detalj .ut-saman { grid-column: 1 / -1; }
  #helt #heltpanel .ut-linjer { columns: 1; font-size: 14px; margin-top: 4px; }
  #helt #heltpanel .ut-saman { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #helt #heltpanel .ut-sokk, #helt #heltpanel .ut-merke { transition: none; }
}

/* ══ THE MAPS (28.10.2026) ═════════════════════════════════════════════════════
   Den valde akta er eit stort måla panel (kunsten, endebossen, namnet skore i
   Cinzel nedst) med ordrane ved sida av: grad, forbanningar, relikviar og start.
   Dei andre aktene ligg som smale måla band. Frost = spel (grad, Play solo),
   blodraudt = forbanning. Ingen avrunding og ingen blur. Markup: public/js/kart.js. */
#kartval .midt.breid { width: min(1180px, 95vw); }
#kartinnhald { display: flex; flex-direction: column; gap: 14px; text-align: left; }
#kartval #kartinnhald .kartakta {
  position: relative;
  display: grid; grid-template-columns: minmax(300px, 36%) 1fr;
  border: 1px solid color-mix(in srgb, var(--kf) 30%, rgba(201, 168, 106, .25));
  background: linear-gradient(180deg, rgba(24, 18, 13, .92), rgba(14, 10, 8, .95));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
#kartval #kartinnhald .kartakta.valt { border-color: color-mix(in srgb, var(--kf) 55%, transparent); }

/* Måleriet */
#kartval #kartinnhald .kartmaaleri {
  position: relative; overflow: hidden; min-height: 132px;
  background: #0c0f1a center 38% / cover no-repeat;
}
#kartval #kartinnhald .kartakta.valt .kartmaaleri { min-height: 440px; }
#kartval #kartinnhald .kartmaaleri::after {             /* sota nedst så namnet står på mørkt */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 5, 0) 38%, rgba(8, 6, 5, .62) 66%, rgba(8, 6, 5, .94) 100%),
              linear-gradient(90deg, transparent 70%, rgba(14, 10, 8, .9));
}
#kartval #kartinnhald .kartboss {
  position: absolute; z-index: 1; right: 4%; bottom: 0; left: auto; top: auto;
  height: 70%; max-width: 58%; object-fit: contain; object-position: bottom right;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .75));
  pointer-events: none; user-select: none;
}
#kartval #kartinnhald .kartakta.valt .kartboss { bottom: 118px; height: 60%; }   /* han står i porten, namnet under føtene */
#kartval #kartinnhald .kartskilt { position: absolute; z-index: 2; left: 26px; right: 22px; bottom: 22px; }
#kartval #kartinnhald .kartnamn {
  margin: 0; padding: 0;
  font: 700 clamp(30px, 1.6vw + 18px, 46px)/1.02 'Cinzel', Georgia, serif;
  letter-spacing: .06em; text-transform: none; color: #f3e6cc;
  -webkit-text-fill-color: currentColor; background: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 2px 4px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .8);
}
#kartval #kartinnhald .kartunder { margin: 6px 0 0; font: italic 19px/1.3 Georgia, serif; color: #e4d6bc; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0, 0, 0, .9); }
#kartval #kartinnhald .kartnr {
  font: 700 14px/1 'Cinzel', Georgia, serif; font-style: normal; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kf); margin-right: 4px;
}
#kartval #kartinnhald .kartframgang { margin: 10px 0 0; font: 700 13px/1.2 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #e2c48c; text-shadow: 0 1px 3px #000; }

/* Band: opne akter du ikkje har valt, og forsegla akter */
#kartval #kartinnhald .kartakta:not(.valt) { grid-template-columns: minmax(300px, 36%) 1fr; align-items: center; }
#kartval #kartinnhald .kartakta:not(.valt) .kartmaaleri { min-height: 128px; }
#kartval #kartinnhald .kartakta:not(.valt) .kartboss { height: 112%; bottom: -6%; }
#kartval #kartinnhald .kartakta:not(.valt) .kartskilt { left: 22px; bottom: 16px; }
#kartval #kartinnhald .kartakta:not(.valt) .kartnamn { font-size: clamp(24px, .9vw + 16px, 32px); }
#kartval #kartinnhald .kartakta:not(.valt) .kartunder { font-size: 17px; }
#kartval #kartinnhald .kartakta.open:not(.valt) { cursor: pointer; transition: border-color .2s, translate .2s cubic-bezier(.2, .8, .2, 1); }
#kartval #kartinnhald .kartakta.open:not(.valt) .kartmaaleri { filter: brightness(.78) saturate(.85); transition: filter .2s; }
#kartval #kartinnhald .kartakta.open:not(.valt):hover, #kartval #kartinnhald .kartakta.open:not(.valt):focus-visible { border-color: color-mix(in srgb, var(--kf) 60%, transparent); translate: 0 -2px; }
#kartval #kartinnhald .kartakta.open:not(.valt):hover .kartmaaleri, #kartval #kartinnhald .kartakta.open:not(.valt):focus-visible .kartmaaleri { filter: none; }
#kartval #kartinnhald .kartakta:focus-visible { outline: 2px solid #9fd8ff; outline-offset: 3px; }
#kartval #kartinnhald .kartvel { margin: 0; padding: 0 28px; font: italic 17px/1.4 Georgia, serif; color: var(--pergament); }
#kartval #kartinnhald .kartvel::after { content: " — choose this act"; color: var(--oske); }
#kartval #kartinnhald .kartakta.lukka .kartmaaleri { filter: grayscale(1) brightness(.32); }
#kartval #kartinnhald .kartakta.lukka .kartboss { filter: brightness(0) drop-shadow(0 0 6px rgba(159, 216, 255, .35)); }
#kartval #kartinnhald .kartakta.lukka .kartnamn { color: #9b8e78; }
#kartval #kartinnhald .kartgaate { margin: 0; padding: 18px 28px; max-width: 62ch; font: italic 17px/1.5 Georgia, serif; color: var(--pergament); }

/* Ordrane */
#kartval #kartinnhald .kartordre { display: flex; flex-direction: column; gap: 18px; padding: 22px 28px 24px; }
#kartval #kartinnhald .kartrad { margin: 0; }
#kartval #kartinnhald .kartrubrikk {
  display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
  font: var(--rubrikk); letter-spacing: .18em; text-transform: uppercase; color: var(--messing);
}
#kartval #kartinnhald .kartrubrikk::after { content: ""; flex: 1; height: 10px; background: url('/bilete/meny/regel.svg') left center / auto 100% no-repeat; opacity: .75; }
#kartval #kartinnhald .kartval { display: grid; gap: 10px; }
#kartval #kartinnhald .kartval.grader { grid-template-columns: repeat(3, 1fr); }
#kartval #kartinnhald .kartval.forb { grid-template-columns: repeat(3, 1fr); gap: 8px; }

#kartval #kartinnhald .kartgrad, #kartval #kartinnhald .kartforb {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0;
  text-align: left; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg, #261d15, #17110d);
  border: 1px solid rgba(201, 168, 106, .3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 220, 170, .05);
  transition: border-color .15s, background .15s, translate .15s;
}
#kartval #kartinnhald .kartgrad { padding: 11px 15px 12px; min-height: 0; }
#kartval #kartinnhald .kartgrad b { font: 700 19px/1.15 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #eadcc2; }
#kartval #kartinnhald .kartgrad b::after { content: none; }
#kartval #kartinnhald .kartspenn { font: 15.5px/1.3 Georgia, serif; color: var(--pergament); font-variant-numeric: tabular-nums; }
#kartval #kartinnhald .kartbest { font: 700 14.5px/1.3 Georgia, serif; color: #e2c48c; margin-top: auto; font-variant-numeric: tabular-nums; }
#kartval #kartinnhald .kartlaas { font: italic 14.5px/1.3 Georgia, serif; color: var(--oske); margin-top: auto; }
#kartval #kartinnhald .kartgrad:hover:not(:disabled), #kartval #kartinnhald .kartforb:hover { border-color: rgba(255, 220, 170, .55); translate: 0 -1px; }
#kartval #kartinnhald .kartgrad.valt {
  border-color: #9fd8ff;
  background: linear-gradient(180deg, #1b2a3a, #101823);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(159, 216, 255, .28);
}
#kartval #kartinnhald .kartgrad.valt b { color: #f4fbff; text-shadow: 0 0 12px rgba(159, 216, 255, .55); }
#kartval #kartinnhald .kartgrad.valt .kartspenn { color: #d5e6f4; }
#kartval #kartinnhald .kartgrad:disabled { opacity: 1; cursor: default; background: rgba(14, 10, 8, .7); border-style: dashed; border-color: rgba(201, 168, 106, .22); }
#kartval #kartinnhald .kartgrad:disabled b { color: #8f826e; }
#kartval #kartinnhald .kartgrad:disabled .kartspenn { color: #7d715f; }

#kartval #kartinnhald .kartforb { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; }
#kartval #kartinnhald .kartforb b { font: 700 16.5px/1.2 Georgia, serif; color: #eadcc2; }
#kartval #kartinnhald .kartforb.eigen b { font-style: italic; }
#kartval #kartinnhald .kartvekt { display: flex; flex: none; gap: 6px; padding-left: 2px; }
#kartval #kartinnhald .kartvekt i {                       /* vekta: små ruter, som tommelen på djupnevelgaren */
  width: 7px; height: 7px; rotate: 45deg;
  background: rgba(233, 128, 106, .38); border: 1px solid rgba(233, 128, 106, .7);
}
#kartval #kartinnhald .kartforb.valt {
  border-color: #d0624a;
  background: linear-gradient(180deg, #3d1912, #210d09);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 140, 110, .22);
}
#kartval #kartinnhald .kartforb.valt b { color: #ffe3d8; }
#kartval #kartinnhald .kartforb.valt .kartvekt i { background: #ff8a6e; border-color: #ffc0ad; }
#kartval #kartinnhald .kartforklaring { min-height: 1.5em; margin: 10px 0 0; font: italic 16px/1.5 Georgia, serif; color: var(--pergament); }
#kartval #kartinnhald .kartforklaring b { font-style: normal; color: #f1d3c4; }
#kartval #kartinnhald .kartforklaring-tom { color: var(--oske); }
#kartval #kartinnhald .kartsum { margin: 2px 0 0; font: 17px/1.4 Georgia, serif; color: var(--oske); }
#kartval #kartinnhald .kartsum.paa { color: #ffcf8a; }
#kartval #kartinnhald .kartsum b { font: 700 15px 'Cinzel', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #ff9c80; }

#kartval #kartinnhald .kartrelikviar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
#kartval #kartinnhald .kartrelikvie {
  display: grid; grid-template-columns: 12px 1fr; column-gap: 14px; row-gap: 2px; align-items: baseline;
  padding: 0; border: 0; border-radius: 0; background: none;
}
#kartval #kartinnhald .kartrelikvie::before {
  content: ""; grid-row: 1 / 3; width: 9px; height: 9px; rotate: 45deg; margin: 0 0 0 1px; align-self: start; translate: 0 6px;
  border: 1px solid rgba(201, 168, 106, .55);
}
#kartval #kartinnhald .kartrelikvie.eig::before { background: var(--rf); border-color: var(--rf); box-shadow: 0 0 8px color-mix(in srgb, var(--rf) 60%, transparent); }
#kartval #kartinnhald .kartrelikvie b { font: 700 16px/1.25 'Cinzel', Georgia, serif; letter-spacing: .03em; color: #8f826e; }
#kartval #kartinnhald .kartrelikvie.eig b { color: var(--rf); }
#kartval #kartinnhald .kartrelikvie span { grid-column: 2; font: 15.5px/1.4 Georgia, serif; color: var(--pergament); }
#kartval #kartinnhald .kartrelikvie:not(.eig) span { font-style: italic; color: var(--oske); }

/* Start: eik frå menyen, frost på Play solo */
#kartval #kartinnhald .kartstart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 0; padding-top: 16px; border-top: 1px solid rgba(201, 168, 106, .16); }
#kartval #kartinnhald .kartspel, #kartval #kartinnhald .kartlag {
  position: relative; isolation: isolate; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
  transition: translate .2s cubic-bezier(.2, .8, .2, 1);
}
#kartval #kartinnhald .kartspel::before, #kartval #kartinnhald .kartlag::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url('/bilete/meny/planke.webp') center / 100% 100% no-repeat;
  filter: brightness(.46) saturate(.72); transition: filter .2s;
}
#kartval #kartinnhald .kartspel { min-width: 230px; height: 62px; padding: 0 34px; font: 700 23px Georgia, serif; letter-spacing: .02em; color: #f4fbff; text-shadow: 0 0 12px rgba(159, 216, 255, .85), 0 0 26px rgba(110, 190, 255, .45), 0 1px 3px #000; }
#kartval #kartinnhald .kartlag { height: 52px; padding: 0 26px; font: 600 18px Georgia, serif; color: #d5e6f4; }
#kartval #kartinnhald .kartspel:hover, #kartval #kartinnhald .kartlag:hover { translate: 0 -2px; background: none; }
#kartval #kartinnhald .kartspel:hover::before, #kartval #kartinnhald .kartlag:hover::before { filter: brightness(.64) saturate(.82); }
#kartval #kartinnhald .kartspel:focus-visible, #kartval #kartinnhald .kartlag:focus-visible, #kartval #kartinnhald .kartgrad:focus-visible, #kartval #kartinnhald .kartforb:focus-visible { outline: 2px solid #9fd8ff; outline-offset: 2px; }
#kartval #kartinnhald .kartmeir { margin: 6px auto 0; max-width: 62ch; text-align: center; font: italic 16px/1.5 Georgia, serif; color: var(--oske); }

@media (prefers-reduced-motion: reduce) {
  #kartval #kartinnhald .kartakta, #kartval #kartinnhald .kartgrad, #kartval #kartinnhald .kartforb, #kartval #kartinnhald .kartspel, #kartval #kartinnhald .kartlag { transition: none; }
}

/* Smalt: måleriet øvst, ordrane under */
@media (max-width: 900px), (max-aspect-ratio: 10/11) {
  #kartval #kartinnhald .kartakta, #kartval #kartinnhald .kartakta:not(.valt) { grid-template-columns: 1fr; }
  #kartval #kartinnhald .kartakta.valt .kartmaaleri { min-height: 0; aspect-ratio: 4 / 3; }
  #kartval #kartinnhald .kartakta:not(.valt) .kartmaaleri { min-height: 0; aspect-ratio: 16 / 7; }
  #kartval #kartinnhald .kartmaaleri::after { background: linear-gradient(180deg, rgba(8, 6, 5, 0) 34%, rgba(8, 6, 5, .6) 64%, rgba(8, 6, 5, .95) 100%); }
  #kartval #kartinnhald .kartvel { padding: 12px 18px 16px; }
  #kartval #kartinnhald .kartakta.valt .kartmaaleri { min-height: 0; }
  #kartval #kartinnhald .kartakta.valt .kartboss { bottom: 0; height: 84%; }
  #kartval #kartinnhald .kartgaate { padding: 14px 18px 18px; }
}
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  .lag:not(.lh-skjerm):not(#meny) .midt > .hint { font-size: 16px; }
  #kartval .midt.breid { width: 100%; }
  #kartval #kartinnhald .kartordre { padding: 20px 16px 22px; gap: 18px; }
  #kartval #kartinnhald .kartskilt { left: 16px; right: 14px; bottom: 14px; }
  #kartval #kartinnhald .kartnamn { font-size: 32px; }
  #kartval #kartinnhald .kartakta:not(.valt) .kartnamn { font-size: 25px; }
  #kartval #kartinnhald .kartunder { font-size: 17px; }
  #kartval #kartinnhald .kartval.grader { grid-template-columns: 1fr; gap: 8px; }
  #kartval #kartinnhald .kartgrad { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  #kartval #kartinnhald .kartgrad .kartbest, #kartval #kartinnhald .kartgrad .kartlaas { margin: 0 0 0 auto; }
  #kartval #kartinnhald .kartrelikviar { grid-template-columns: 1fr; gap: 12px; }
  #kartval #kartinnhald .kartgrad b { font-size: 17px; }
  #kartval #kartinnhald .kartspenn { font-size: 14.5px; }
  #kartval #kartinnhald .kartbest { font-size: 14px; }
  #kartval #kartinnhald .kartlaas { font-size: 13.5px; }
  #kartval #kartinnhald .kartval.forb { grid-template-columns: repeat(2, 1fr); }
  #kartval #kartinnhald .kartforb { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }
  #kartval #kartinnhald .kartforb b { font-size: 16px; }
  #kartval #kartinnhald .kartstart { flex-direction: column; align-items: stretch; }
  #kartval #kartinnhald .kartspel, #kartval #kartinnhald .kartlag { width: 100%; }
  #hjelp .hjelpgrid { grid-template-columns: 1fr; gap: 22px; }
  #hall .halltittel { grid-template-columns: 1fr auto; row-gap: 4px; padding: 11px 14px; }
  #hall .halltittel i { text-align: left; }
  #hall .hallrutenett { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  #utvalliste { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  #galleriinnhald { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  #statsinnhald, #relliste { grid-template-columns: 1fr; }
  .lag:not(.lh-skjerm):not(#meny) .smierad { padding: 12px 14px; gap: 12px; }
  .lag:not(.lh-skjerm):not(#meny) .smierad .tittel { font-size: 16.5px; }
  .lag:not(.lh-skjerm):not(#meny) .smierad .sub { font-size: 15px; }
  .lag:not(.lh-skjerm):not(#meny) .smierad > button { min-width: 0; font-size: 15px; padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE FORGE + THE WARDROBE (28.10.2026)
   KM: «fiks også the forge … se de cosmetic vi kan unlocke og hvordan
   karakteren vår vil se ut med den på». To faner (ui.js byggSmie): Upgrades
   som kort i rutenett, og Wardrobe med helten på ei scene (garderobe.js).
   Heile sida rullar — lista er ikkje lenger ein boks i boksen.
   Knappane treng to ID-ar for å slå huda (.lag:not(...) button).
   ═══════════════════════════════════════════════════════════════════════════ */
/* breidda: ui.js gjev .midt klassen .breid (1040 px) */
#smie #smiegull {
  font: 700 clamp(26px, .9vw + 18px, 32px)/1.1 'Cinzel', Georgia, serif;
  letter-spacing: .05em; color: #ffcf6e; margin: 2px 0 8px;
  font-variant-numeric: lining-nums tabular-nums;
}
#smie #smiehint { margin-bottom: 16px; }
#smie #smiefaner { display: flex; justify-content: center; gap: 8px; margin: 0 0 20px; }
#smie #smiefaner .fane { font-size: 17px; padding: 10px 22px; min-width: 132px; }
#smie #smieliste { display: block; max-height: none; overflow: visible; padding-right: 0; }

/* ── Skiljelinene: rubrikk med messinglinjer på begge sider ── */
#smie #smieliste .smieskil {
  display: flex; align-items: center; gap: 14px; text-align: center;
  margin: 22px 0 12px; padding: 0;
}
#smie #smieliste .smieskil::before,
#smie #smieliste .smieskil::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(201, 168, 106, 0), rgba(201, 168, 106, .45));
}
#smie #smieliste .smieskil::after { background: linear-gradient(90deg, rgba(201, 168, 106, .45), rgba(201, 168, 106, 0)); }

/* ── Upgrades: korta ── */
#smie .smierutenett { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#smie .smierutenett.maksa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#smie #smieliste .smierad {
  align-items: center; gap: 16px; min-height: 96px; padding: 14px 16px;
  background: linear-gradient(180deg, rgba(40, 29, 20, .9), rgba(20, 14, 10, .92));
  border: 1px solid rgba(201, 168, 106, .24); border-radius: 3px;
}
#smie #smieliste .smierad canvas { width: 48px; height: 48px; }
#smie #smieliste .smierad .tittel { font-size: 18px; color: #f0e2c4; }
#smie #smieliste .smierad .sub { font-size: 15.5px; line-height: 1.42; }
#smie #smieliste .smierad.smeltkunst {
  min-height: 0; padding: 16px 20px; margin-bottom: 2px;
  border-color: rgba(255, 207, 110, .4);
  background: linear-gradient(90deg, rgba(255, 207, 110, .1), rgba(20, 14, 10, .9) 60%);
}
#smie #smieliste .smierad.smeltkunst canvas { width: 56px; height: 56px; }
#smie #smieliste .smierad.smeltkunst .tittel { font-size: 20px; color: #ffe2a8; }
#smie #smieliste .smeltbar { height: 8px; border-radius: 0; margin: 10px 0 6px; background: rgba(255, 255, 255, .08); }
#smie #smieliste .smeltxp { font-size: 14.5px; color: var(--oske); }
/* Rangane: små rutar på kant — fylte er gull */
#smie #smieliste .prikkar { gap: 5px; margin-top: 10px; flex-wrap: wrap; }
#smie #smieliste .prikkar i {
  width: 11px; height: 11px; border-radius: 0; transform: rotate(45deg) scale(.8);
  background: transparent; border: 1.5px solid rgba(201, 168, 106, .5); box-shadow: none;
}
#smie #smieliste .prikkar i.pa { background: #ffcf6e; border-color: #ffcf6e; box-shadow: 0 0 6px rgba(255, 190, 90, .5); }
#smie #smieliste .evigrang { color: #ffcf6e; }
/* Pris-knappen: gull når du har råd, matt når du ikkje har det */
#smie #smieliste .smierad > button {
  flex: none; min-width: 120px; padding: 11px 14px;
  font: 700 16px/1.1 Georgia, serif; font-variant-numeric: tabular-nums;
  color: #ffe2a8; background: linear-gradient(180deg, #4d3619, #2b1d0e);
  border: 1px solid rgba(255, 207, 110, .7);
}
#smie #smieliste .smierad > button:hover:not(:disabled) { color: #fff3d6; border-color: #ffcf6e; background: linear-gradient(180deg, #5e4220, #34230f); }
#smie #smieliste .smierad > button:disabled { opacity: 1; color: #8f816b; background: rgba(16, 11, 8, .7); border-color: rgba(201, 168, 106, .2); box-shadow: none; }
/* Dei maksa: kortare, utan knapp og utan skildring */
#smie .smierutenett.maksa .smierad { min-height: 0; padding: 10px 14px; opacity: .82; }
#smie .smierutenett.maksa .smierad canvas { width: 36px; height: 36px; }
#smie .smierutenett.maksa .smierad .sub,
#smie .smierutenett.maksa .smierad > button { display: none; }
#smie .smierutenett.maksa .smierad .tittel { font-size: 16px; }
#smie .smierutenett.maksa .prikkar { margin-top: 6px; }

/* ── Wardrobe ── */
#smie .gd { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; text-align: left; }
#smie .gd-vis { position: sticky; top: 0; min-width: 0; }
#smie .gd-val { min-width: 0; }
#smie .gd-scene {
  position: relative; height: 340px; overflow: hidden;
  border: 1px solid rgba(201, 168, 106, .32);
  background: radial-gradient(120% 75% at 40% 100%, #2c1e12 0%, #140d08 58%, #0a0705 100%);
}
#smie .gd-scene::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .7);
}
#smie .gd-lerret { display: block; width: 100%; height: 100%; }
#smie .gd-scenetekst { padding: 14px 2px 0; }
#smie .gd-prov { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
#smie .gd-provmerke { font: var(--merke); letter-spacing: .14em; text-transform: uppercase; color: var(--messing); }
#smie .gd-prov b { font: 700 22px/1.25 'Cinzel', Georgia, serif; color: #f0e2c4; }
#smie .gd-provkrav { flex-basis: 100%; font: italic 15.5px/1.45 Georgia, serif; color: var(--pergament); }
#smie #smieliste .gd-attende {
  margin-top: 8px; padding: 6px 0; background: none; border: 0; box-shadow: none;
  font: italic 15px Georgia, serif; color: #9fd8ff; text-decoration: underline; text-underline-offset: 3px;
}
#smie #smieliste .gd-attende:hover { color: #fff; background: none; }
#smie .gd-paa {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(201, 168, 106, .22);
}
#smie .gd-paa dt { font: var(--merke); letter-spacing: .12em; text-transform: uppercase; color: var(--oske); }
#smie .gd-paa dd { margin: 0; font: 15.5px/1.35 Georgia, serif; color: #eadcc2; }
#smie .gd-paa dd.tom { color: var(--oske); font-style: italic; }

#smie .gd-katar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#smie #smieliste .gd-kat { font: 600 15.5px/1 Georgia, serif; padding: 10px 14px; }
#smie #smieliste .gd-kat.valt { color: #fff2de; border-color: rgba(255, 179, 92, .75); background: linear-gradient(180deg, #4a3520, #2a1d13); }
#smie .gd-tal { font: var(--merke); letter-spacing: .06em; color: var(--oske); margin-left: 2px; }
#smie .gd-kat.valt .gd-tal { color: #ffcf6e; }

#smie .gd-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#smie .gd-kort {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 4px 12px;
  padding: 13px 14px; cursor: pointer;
  background: rgba(24, 17, 12, .88); border: 1px solid rgba(201, 168, 106, .2); border-radius: 3px;
  transition: border-color .15s, background-color .15s;
}
#smie .gd-kort:hover,
#smie .gd-kort.prov { border-color: var(--gf); background: rgba(44, 31, 20, .95); }
#smie .gd-kort[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--gf); }
#smie .gd-kort.paa { border-color: rgba(255, 207, 110, .6); }
#smie .gd-kort:focus-visible { outline: 2px solid #9fd8ff; outline-offset: 2px; }
#smie .gd-swatch {
  width: 16px; height: 16px; justify-self: center; margin-top: 4px; transform: rotate(45deg);
  border: 1px solid rgba(255, 245, 225, .45); box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}
#smie .gd-namnrad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
#smie .gd-namn { font: 700 16.5px/1.25 'Cinzel', Georgia, serif; color: #f0e2c4; }
#smie .gd-kort.laast .gd-namn { color: #c2b39a; }
#smie .gd-sjeldan { font: var(--merke); letter-spacing: .12em; text-transform: uppercase; }
#smie .gd-status { display: block; margin-top: 3px; font: 14.5px/1.38 Georgia, serif; color: var(--pergament); }
#smie .gd-kort.paa .gd-status { color: #ffcf6e; font-weight: 700; }
#smie .gd-kort.eig .gd-status { color: #b7e8c4; }
#smie .gd-kort.laast .gd-status { color: var(--oske); }
#smie .gd-skildring { display: block; margin-top: 2px; font: italic 14px/1.38 Georgia, serif; color: var(--oske); }
#smie #smieliste .gd-knapp { grid-column: 2; justify-self: start; margin-top: 6px; min-width: 88px; padding: 8px 14px; font: 700 15px/1 Georgia, serif; }
#smie #smieliste .gd-knapp.kjop { color: #ffe2a8; background: linear-gradient(180deg, #4d3619, #2b1d0e); border-color: rgba(255, 207, 110, .7); }
#smie #smieliste .gd-knapp.kjop:hover:not(:disabled) { color: #fff3d6; border-color: #ffcf6e; }
#smie #smieliste .gd-knapp.kjop:disabled { opacity: 1; color: #8f816b; background: rgba(16, 11, 8, .7); border-color: rgba(201, 168, 106, .2); box-shadow: none; }
#smie #smieliste .gd-knapp.av { color: var(--oske); }
#smie .gd-fot { margin: 16px 0 0; font: italic 15px/1.5 Georgia, serif; color: var(--oske); }

@media (prefers-reduced-motion: reduce) {
  #smie .gd-kort { transition: none; }
}

@media (max-width: 900px) {
  #smie .gd { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 18px; }
  #smie .gd-liste { grid-template-columns: 1fr; }
  #smie .smierutenett.maksa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #smie #smiefaner .fane { min-width: 0; flex: 1; padding: 10px 12px; }
  #smie .smierutenett,
  #smie .smierutenett.maksa { grid-template-columns: 1fr; }
  #smie #smieliste .smierad { min-height: 0; flex-wrap: wrap; gap: 12px; }
  #smie #smieliste .smierad .info { flex: 1 1 60%; }
  #smie #smieliste .smierad > button { min-width: 0; width: 100%; }
  #smie #smieliste .smierad.smeltkunst { flex-wrap: nowrap; }
  #smie .smierutenett.maksa .smierad { flex-wrap: nowrap; }
  /* Garderoben: scena står fast øvst medan du blar i lista under */
  #smie .gd { grid-template-columns: 1fr; gap: 12px; }
  #smie .gd-vis { top: -24px; z-index: 2; padding: 0 0 10px; background: #0d0907; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9); }
  #smie .gd-scenetekst { padding-top: 10px; }
  #smie .gd-prov b { font-size: 19px; }
  #smie .gd-provkrav { font-size: 14.5px; }
  /* «Det du har på» som éi line: Wearing Emberborn · Raven Wings · … */
  #smie .gd-paa { display: block; margin-top: 8px; padding-top: 8px; font: 14px/1.45 Georgia, serif; }
  #smie .gd-paa::before { content: 'Wearing '; font: var(--merke); letter-spacing: .12em; text-transform: uppercase; color: var(--oske); margin-right: 4px; }
  #smie .gd-paa dt, #smie .gd-paa dd.tom { display: none; }
  #smie .gd-paa dd { display: inline; font-size: 14px; }
  #smie .gd-paa dd:not(.tom) ~ dd:not(.tom)::before { content: '\00b7'; margin: 0 6px; color: var(--oske); }
  #smie .gd-scene { height: 190px; }
  #smie .gd-paa dd { font-size: 14px; }
  #smie .gd-katar { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 12px; padding: 0 0 4px; scrollbar-width: none; }
  #smie #smieliste .gd-kat { flex: none; }
  #smie .gd-liste { grid-template-columns: 1fr; }
  #smie .gd-kort { grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 11px 12px; }
  #smie #smieliste .gd-knapp { grid-column: 3; grid-row: 1; margin-top: 0; justify-self: end; }
  #smie .gd-swatch { margin-top: 0; }
}

/* ── The First Watch (fase B2): akt I og kapitla, Langhus-stil ── */
#kampanjeinnhald { display: flex; flex-direction: column; gap: 12px; text-align: left; font: 14px Georgia, serif; color: #d8cab0; }
#kampanjeinnhald .fw-aktnr { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .2em; color: #e7a94b; }
#kampanjeinnhald h3 { margin: 2px 0 4px; font: 700 20px 'Cinzel', Georgia, serif; color: #f0dcb0; }
#kampanjeinnhald .fw-intro { margin: 0; font-style: italic; color: #a89a80; }
#kampanjeinnhald .fw-film { margin-top: 8px; background: none; border: 1px solid rgba(231,169,75,.45); color: #e7a94b; font: 600 13px Georgia, serif; letter-spacing: .04em; padding: 6px 14px; border-radius: 3px; cursor: pointer; }
#kampanjeinnhald .fw-film:hover { background: rgba(231,169,75,.12); }
#kampanjeinnhald .fw-kap { padding: 12px 14px; border: 1px solid rgba(201, 168, 106, .4); border-left: 3px solid #e7a94b; background: rgba(20, 15, 10, .6); }
#kampanjeinnhald .fw-kap.vunne { border-left-color: #7dffa8; }
#kampanjeinnhald .fw-kaptopp b { font: 700 15px 'Cinzel', Georgia, serif; color: #f0dcb0; margin-right: 8px; }
#kampanjeinnhald .fw-kaptopp span { color: #a89a80; font-size: 12px; }
#kampanjeinnhald .fw-steg { list-style: none; margin: 8px 0; padding: 0; line-height: 1.6; }
#kampanjeinnhald .fw-steg i { display: inline-block; width: 18px; font-style: normal; color: #8f8068; }
#kampanjeinnhald .fw-steg li.gjort { color: #8f8068; }
#kampanjeinnhald .fw-steg li.gjort i { color: #7dffa8; }
#kampanjeinnhald .fw-line { margin: 4px 0; font-size: 13px; }
#kampanjeinnhald .fw-line b { font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #c9a86a; margin-right: 6px; }
#kampanjeinnhald .fw-tom { color: #7a6f5c; font-style: italic; }
#kampanjeinnhald .fw-laast { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #6f6656; font: 12px Georgia, serif; }
#kampanjeinnhald .fw-laast b { color: #8f8068; margin-right: 4px; }
#kampanjeinnhald .fw-akter { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .14em; }
/* fase B7: gradveljaren, vaktdjupna og The Bell Roll */
#kampanjeinnhald .fw-grader { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
#kampanjeinnhald .fw-grader button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: rgba(20,15,10,.5); border: 1px solid rgba(201,168,106,.35); color: #c9b48a; font: 700 12px 'Cinzel', Georgia, serif; letter-spacing: .08em; padding: 6px 12px; border-radius: 3px; cursor: pointer; }
#kampanjeinnhald .fw-grader button.valt { border-color: #e7a94b; color: #f0dcb0; background: rgba(231,169,75,.14); }
#kampanjeinnhald .fw-grader button:disabled { cursor: default; color: #6f6656; border-color: rgba(111,102,86,.35); }
#kampanjeinnhald .fw-grader button small { font: italic 400 10px Georgia, serif; letter-spacing: 0; color: #7a6f5c; }
#kampanjeinnhald .fw-grader button:focus-visible { outline: 2px solid #e7a94b; outline-offset: 2px; }
#kampanjeinnhald .fw-bell { padding: 10px 14px; border: 1px solid rgba(201,168,106,.25); background: rgba(20,15,10,.45); font-size: 13px; }
#kampanjeinnhald .fw-bell > b { display: block; font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #c9a86a; margin-bottom: 4px; }
#kampanjeinnhald .fw-bell ol { margin: 0; padding-left: 1.4em; }
#kampanjeinnhald .fw-bell li span { display: inline-block; min-width: 0; }
#kampanjeinnhald .fw-bell li span:nth-child(2), #kampanjeinnhald .fw-bell li span:nth-child(3) { margin-left: 10px; color: #e7a94b; font-variant-numeric: tabular-nums; }
.fw-kiste { display: block; margin: 10px auto 0; max-width: 320px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--tf); background: rgba(20, 15, 10, .75); font: 12px Georgia, serif; color: #d8cab0; }
.fw-kiste b { display: block; font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .16em; color: #e7a94b; }
.fw-kiste .fw-kistenamn { display: block; font: 700 14px 'Cinzel', Georgia, serif; color: var(--tf); margin-top: 4px; }
.fw-kiste .fw-kisteslag { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8f8068; }
.fw-kiste .fw-kistelinjer { display: block; margin-top: 4px; line-height: 1.45; }

/* Dykket (31.10): portane etter vakta i rift-boksen — erstattar Nightmare-brytaren */
#dybdebonus .ld-portar, #lobbyriftboks .ld-portar { margin: 6px 0 8px; font: 12.5px/1.5 Georgia, serif; color: #cdbd9f; text-align: left; }
#dybdebonus .ld-portar b, #lobbyriftboks .ld-portar b { font-family: 'Cinzel', Georgia, serif; letter-spacing: .08em; font-weight: 700; }
#dybdebonus .ld-portar .lp-tit, #lobbyriftboks .ld-portar .lp-tit { display: block; color: #e8c27a; font-size: 11px; letter-spacing: .06em; }
#dybdebonus .ld-portar .lp-laas, #lobbyriftboks .ld-portar .lp-laas { display: block; margin-top: 2px; color: #a99c86; font-size: 11.5px; font-style: italic; }
/* ── RETTINGAR 31.10.2026 (menygjennomgangen) ───────────────────────────── */
/* Back-lina nedst i undermenyane: gradienten over tapte mot `.lag:not(…) .knapperad { background: none }`
   (1,3,0 mot 0,4,0), så korta og prisane synte gjennom bak Back/Reset progress. */
.lag:not(.lh-skjerm):not(#meny) > .midt > .knapperad:last-child,
.lag:not(.lh-skjerm):not(#meny) > .midt > .knapperad:last-of-type {
  background: linear-gradient(rgba(8, 6, 5, 0), rgba(8, 6, 5, .94) 34%);
}
/* Leaderboard på mobil: meta-lina («2 rebirths · this life: rift 32») klemde namnet ned til éin bokstav.
   No får ho si eiga line under namnet. */
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #tavle .tavlerad { flex-wrap: wrap; row-gap: 2px; }
  #tavle .tavlerad .tnamn { min-width: 0; }
  #tavle .tavlerad .meta { flex-basis: 100%; padding-left: 44px; white-space: normal; font-size: 13px; }
}

/* ══ THE EMBER MARKET, runde 2 (31.10.2026) ═══════════════════════════════════
   KM: «går over ember market igjen og lagder den med ny grafikk. enda flere ting å kjøpe. full pakke»,
   og om retningane: «likte egentlig b best» — teltet til Sigrid. Ei rullbar side: teltet øvst, fanene som
   teltduk som står att øvst, varene som kort med eige måla ikon og ein pris-lapp. Glød = det som blir ditt.
   Kunst: bilete/marknad/ (tools/marknad/lag_marknad.py). Varer og prisar: shared/marknad.js. */
#marknad.lh-skjerm {
  --gilt: #e2c48c; --gilt-lys: #ffd99a; --perg: #d2c3a6; --mk-bak-h: min(72vh, 56vw);
  display: block;
  place-items: normal;                  /* .lh-skjerm sentrerer; i blokk-layout krympar Chrome då sida til innhaldet */
  overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--sot);
}
#marknad.lh-skjerm::before { content: none; }
#marknad ::selection { background: rgba(255, 179, 92, .35); color: #fff; }
#marknad .mk-bak {
  position: absolute; left: 0; right: 0; top: 0;
  height: var(--mk-bak-h);
  background: url('/bilete/marknad/telt.webp') center 26% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 100%);
  pointer-events: none;
}
#marknad .mk-bak::after {                 /* sot øvst (tittel og lommebok) og eit mjukt fall inn mot varene */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 8, 7, .62), rgba(11, 8, 7, 0) 16%, rgba(11, 8, 7, 0) 60%, rgba(11, 8, 7, .5));
}
#marknad .mk-glo {                        /* gruva i teltet blaffar under fanene */
  position: absolute; left: 50%; top: calc(var(--mk-bak-h) * .66);
  width: min(54vw, 760px); height: calc(var(--mk-bak-h) * .5);
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(255, 150, 60, .2), rgba(255, 120, 40, .07) 55%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: mkBlaff 3.7s steps(6) infinite;
}
@keyframes mkBlaff { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .7; } 80% { opacity: .95; } }
#marknad .mk-side {
  position: relative; z-index: 1;
  max-width: 1380px; margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 44px) 64px;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--bein);
}

/* ── Toppen: Back, tittelen og lommeboka ── */
#marknad .mk-topp {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 18px;
  padding-top: 18px;
}
#marknad .mk-attende { position: relative; margin-top: 2px; }
#marknad .mk-tittel {
  margin: 4px 0 0; padding-left: .2em;
  font: 700 clamp(22px, 2.1vw, 34px)/1.05 'Cinzel', Georgia, serif;
  letter-spacing: .2em; text-transform: uppercase;
  color: #d4b98d;
  -webkit-text-fill-color: currentColor; background: none;
  text-shadow: 0 -.06em 0 rgba(0, 0, 0, .92), 0 .05em 0 rgba(255, 186, 120, .26), 0 0 18px rgba(0, 0, 0, .9);
}
#marknad .mk-lomme { display: grid; justify-items: end; gap: 6px; max-width: 420px; }
#marknad .mk-saldoar {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px;
  padding: 7px 14px;
  background: linear-gradient(180deg, rgba(24, 16, 11, .82), rgba(12, 8, 6, .86));
  border: 1px solid rgba(201, 168, 106, .32);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
#marknad .mk-saldo { display: inline-flex; align-items: center; gap: 4px; font: 700 17px/1 Georgia, serif; color: var(--gilt-lys); font-variant-numeric: tabular-nums; }
#marknad .mk-saldo i { font-weight: 400; font-size: 14px; color: var(--perg); margin-left: 2px; }
#marknad .mk-s-glod { color: var(--glod); }
#marknad .mk-mynt { width: auto; height: 22px; margin-right: 3px; vertical-align: -5px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
#marknad .mk-kjelder { margin: 0; text-align: right; font: italic 12.5px/1.35 Georgia, serif; color: #c2b296; text-shadow: 0 1px 3px #000, 0 0 8px #000; }

/* ── Sigrid ── */
#marknad .mk-kremmar {
  margin-top: calc(var(--mk-bak-h) * .34);
  display: grid; justify-items: center; gap: 4px;
  text-align: center; text-shadow: 0 2px 5px #000, 0 0 14px rgba(0, 0, 0, .9);
}
#marknad .mk-kremmar b { font: 700 19px/1.1 'Cinzel', Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #f1d3a4; }
#marknad .mk-kremmar i { font: italic 15.5px/1.35 Georgia, serif; color: #dccdb0; max-width: 56ch; text-wrap: balance; }

/* ── Fanene: teltduk som står att øvst når du rullar ── */
#marknad .mk-faner {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin: 18px calc(-1 * clamp(16px, 3vw, 44px)) 0; padding: 12px clamp(16px, 3vw, 44px) 14px;
  background: linear-gradient(180deg, rgba(11, 8, 7, .93), rgba(11, 8, 7, .93) 80%, rgba(11, 8, 7, 0));
}
#marknad #marknadFaner .mk-fane {
  position: relative;
  padding: 10px 17px 15px;
  font: 700 13.5px/1 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bein);
  background: linear-gradient(180deg, #33241a, #1c130d 70%, #140d09);
  border: none; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .34), inset 0 1px 0 rgba(255, 220, 160, .12);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
  cursor: pointer;
  transition: translate .2s cubic-bezier(.2, .8, .2, 1), color .2s, background .2s;
}
#marknad #marknadFaner .mk-fane:hover { color: #fff; translate: 0 2px; background: linear-gradient(180deg, #45301f, #24180f 70%, #180f0a); }
#marknad #marknadFaner .mk-fane.valt {
  color: #fff3d6; translate: 0 4px;
  background: linear-gradient(180deg, #7a4a1d, #4a2b11 65%, #2c190a);
  box-shadow: inset 0 0 0 1px #ffb35c, inset 0 1px 0 rgba(255, 230, 180, .3);
  filter: drop-shadow(0 0 10px rgba(255, 160, 70, .45));
}
#marknad #marknadFaner .mk-fane-sesong::after {   /* voksegl: sesongen ventar ikkje */
  content: ""; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c44a36, #7a1a10 70%);
}
#marknad .mk-hint {
  margin: 6px auto 16px; max-width: 72ch;
  text-align: center; font: italic 15px/1.45 Georgia, serif; color: var(--perg); text-wrap: balance;
}

/* ── Varene ── */
#marknad .mk-varer {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px;
  align-items: stretch;
}
#marknad .mk-skil {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 14px 0 2px;
  font: 700 13px/1.2 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
  color: #d8c3a0;
}
#marknad .mk-skil:first-child { margin-top: 0; }
#marknad .mk-skil::before, #marknad .mk-skil::after { content: ""; flex: 1 1 0; max-width: 90px; height: 8px; background: url('/bilete/meny/regel.svg') center / contain no-repeat; }
#marknad .mk-vare {
  position: relative;
  display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: start;
  padding: 14px 16px 13px 12px;
  background: linear-gradient(160deg, rgba(38, 26, 18, .95), rgba(17, 12, 9, .97));
  border: 1px solid rgba(201, 168, 106, .26);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 220, 160, .06);
  transition: border-color .2s, translate .25s cubic-bezier(.2, .8, .2, 1);
}
#marknad .mk-vare.kan:hover { border-color: rgba(255, 179, 92, .6); translate: 0 -2px; }
#marknad .mk-vare.eigd { border-color: rgba(226, 196, 140, .42); background: linear-gradient(160deg, rgba(34, 27, 18, .92), rgba(16, 12, 9, .95)); }
#marknad .mk-vare.mk-dag { border-color: rgba(255, 179, 92, .5); }
#marknad .mk-ikon {
  width: 76px; height: 76px; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--vf, #ffb35c) 24%, transparent), transparent 78%);
}
#marknad .mk-ikon img { max-width: 70px; max-height: 70px; width: auto; height: auto; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .85)); transition: scale .3s cubic-bezier(.2, .8, .2, 1); }
#marknad .mk-vare.kan:hover .mk-ikon img { scale: 1.06; }
#marknad .mk-vare.dyr .mk-ikon img { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .85)) saturate(.7) brightness(.82); }
#marknad .mk-slag-helt, #marknad .mk-slag-klasseskin { grid-template-columns: 112px 1fr; }
#marknad .mk-slag-helt .mk-ikon, #marknad .mk-slag-klasseskin .mk-ikon { width: 112px; height: 132px; }
#marknad .mk-slag-klasseskin .mk-ikon img { max-height: 128px; max-width: 108px; }
#marknad .mk-slag-helt .mk-ikon img, #marknad .mk-portrett img { max-height: 128px; max-width: 108px; }
#marknad .mk-slag-pet .mk-ikon img { max-height: 74px; max-width: 74px; }
#marknad .mk-namn { margin: 2px 0 4px; padding-right: 44px; font: 700 16.5px/1.2 'Cinzel', Georgia, serif; letter-spacing: .04em; color: #f3e1bd; }
#marknad .mk-gjer { margin: 0; font: 14.5px/1.4 Georgia, serif; color: var(--perg); }
#marknad .mk-linje2 { margin-top: 5px; font: italic 13.5px/1.3 Georgia, serif; color: var(--gilt); }
#marknad .mk-tittelprov { font: 700 13.5px/1.3 'Cinzel', Georgia, serif; font-style: normal; letter-spacing: .04em; }
#marknad .mk-rad { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
#marknad .mk-tekst .mk-pris {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 34px; padding: 5px 15px 5px 18px;
  font: 700 15.5px/1 Georgia, serif; font-variant-numeric: tabular-nums;
  color: #fff2d4;
  background: linear-gradient(180deg, #74461b, #432610);
  border: none; border-radius: 0;
  box-shadow: inset 0 0 0 1px #c98a3c, inset 0 1px 0 rgba(255, 230, 180, .25);
  clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%);
  cursor: pointer;
  transition: translate .15s, background .2s;
}
#marknad .mk-tekst .mk-pris::before {     /* hòlet i lappen */
  content: ""; position: absolute; left: 9px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: #120c08; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8);
}
#marknad .mk-tekst .mk-pris:hover:not(:disabled) { translate: 0 -1px; background: linear-gradient(180deg, #8c5522, #522f13); }
#marknad .mk-tekst .mk-pris:disabled { cursor: not-allowed; color: #b3a283; background: linear-gradient(180deg, #2a1d13, #1b130d); box-shadow: inset 0 0 0 1px rgba(201, 168, 106, .28); }
#marknad .mk-tekst .mk-pris:disabled .mk-mynt { filter: grayscale(.5) brightness(.8); }
#marknad .mk-tekst .mk-pris.vaapna { background: linear-gradient(180deg, #a8641f, #6a3a12); box-shadow: inset 0 0 0 1px #ffcf7a; animation: mkVaapna 1s ease-in-out infinite alternate; }
#marknad .mk-pris b { font-family: 'Cinzel', Georgia, serif; letter-spacing: .06em; margin-right: 4px; }
#marknad .mk-pris s { font-weight: 400; color: #c9ad86; margin-right: 4px; }
#marknad .mk-pris .mk-mynt { height: 20px; vertical-align: -4px; }
@keyframes mkVaapna { from { filter: drop-shadow(0 0 0 rgba(255, 190, 90, 0)); } to { filter: drop-shadow(0 0 7px rgba(255, 190, 90, .7)); } }
#marknad .mk-mangel { font: italic 13.5px/1.2 Georgia, serif; color: #e6aa8c; }
#marknad .mk-slagord { margin-left: auto; font: 700 10.5px/1 'Cinzel', Georgia, serif; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--vf, #c9a86a) 55%, #b89c72); }
#marknad .mk-eig { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gilt-lys); }
#marknad .mk-sjekk { width: 15px; height: 15px; }
#marknad .mk-varer .mk-lenkje {
  padding: 0; background: none; border: none; box-shadow: none; border-radius: 0;
  font: italic 14px/1.2 Georgia, serif; color: var(--gilt);
  text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(226, 196, 140, .5);
  cursor: pointer;
}
#marknad .mk-varer .mk-lenkje:hover { color: var(--gilt-lys); text-decoration-color: currentColor; }
#marknad .mk-ny {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 8px 2px;
  font: 700 10px/1 'Cinzel', Georgia, serif; letter-spacing: .12em;
  color: #fbe9cc;
  background: radial-gradient(circle at 35% 30%, #a83826, #7a1a10 72%);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
#marknad .mk-lenkjerad, #marknad .mk-gjestlina { grid-column: 1 / -1; text-align: center; margin: 10px 0 0; }
#marknad .mk-gjestlina { font: italic 14px/1.4 Georgia, serif; color: var(--perg); }
#marknad .mk-vare.seld { animation: mkSeld 1.3s cubic-bezier(.2, .8, .2, 1); }
#marknad .mk-vare.seld .mk-ikon img { animation: mkSeldIkon .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes mkSeld { 0% { border-color: #ffd27a; box-shadow: 0 0 0 2px rgba(255, 200, 110, .8), 0 0 30px rgba(255, 160, 70, .55); } 100% { box-shadow: 0 8px 18px rgba(0, 0, 0, .5); } }
@keyframes mkSeldIkon { 0% { scale: 1; } 35% { scale: 1.18; } 100% { scale: 1; } }
#marknad button:focus-visible { outline: 2px solid var(--frost); outline-offset: 2px; }

/* ── Mobil: teltet som eit stort bilete øvst, fanene som ei rullerad, eitt kort i breidda ── */
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #marknad.lh-skjerm { --mk-bak-h: 118vw; }
  #marknad .mk-bak { top: 46px; background-position: 50% 16%; }
  #marknad .mk-glo { width: 90vw; }
  #marknad .mk-side { padding: 0 16px 80px; }
  #marknad .mk-topp { grid-template-columns: auto 1fr; gap: 8px 12px; padding-top: 10px; }
  #marknad .mk-tittel { font-size: 18px; letter-spacing: .12em; align-self: center; white-space: nowrap; }
  #marknad .mk-attende { height: 34px; padding: 0 14px; }
  #marknad .mk-lomme { grid-column: 1 / -1; justify-items: start; max-width: none; }
  #marknad .mk-saldoar { justify-content: flex-start; flex-wrap: nowrap; gap: 12px; padding: 5px 10px; }
  #marknad .mk-saldo { font-size: 15px; }
  #marknad .mk-saldo i { display: none; }
  #marknad .mk-mynt { height: 19px; }
  #marknad .mk-topp .mk-kjelder { display: none; }
  #marknad .mk-kremmar { margin-top: calc(var(--mk-bak-h) * .5); }
  #marknad .mk-kremmar b { font-size: 16px; }
  #marknad .mk-kremmar i { font-size: 14.5px; }
  #marknad .mk-faner {
    justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 14px -16px 0; padding: 10px 16px 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  #marknad .mk-faner::-webkit-scrollbar { display: none; }
  #marknad #marknadFaner .mk-fane { flex: none; padding: 10px 14px 14px; font-size: 13px; }
  #marknad .mk-hint { font-size: 14.5px; margin-bottom: 12px; }
  #marknad .mk-varer { grid-template-columns: 1fr; gap: 10px; }
  #marknad .mk-vare { grid-template-columns: 62px 1fr; gap: 10px; padding: 12px 12px 12px 10px; }
  #marknad .mk-ikon { width: 62px; height: 62px; }
  #marknad .mk-ikon img { max-width: 58px; max-height: 58px; }
  #marknad .mk-slag-helt, #marknad .mk-slag-klasseskin { grid-template-columns: 86px 1fr; }
  #marknad .mk-slag-helt .mk-ikon, #marknad .mk-slag-klasseskin .mk-ikon { width: 86px; height: 110px; }
  #marknad .mk-namn { font-size: 15.5px; }
  #marknad .mk-gjer { font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #marknad .mk-glo, #marknad .mk-pris.vaapna, #marknad .mk-vare.seld, #marknad .mk-vare.seld .mk-ikon img { animation: none; }
}
#marknad .mk-kjelder-botn { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 10/11) {
  #marknad .mk-kjelder-botn { display: block; grid-column: 1 / -1; margin: 14px 0 0; text-align: center; font: italic 13px/1.45 Georgia, serif; color: #bfae92; }
}