/* UI-EN INNE I SPELET i langhus-stil (25.10.2026, KM: «gå over UI-en inne i spelet:
   kortvalet, pausemenyen og HUD-en»). Same verd som menyen (DESIGN.md): skoren Cinzel,
   Georgia som blekk, mørk eik og messing, glød for det som er ditt, frost for rifta.
   Ytinga først: ingen backdrop-filter, ingen filter: blur, og ingen glødeskuggar på
   stolpar som endrar breidd kvar ramme (dei måla om heile stolpen kvar gong). */

/* ── Toppen: rifta, nivået, tala ── */
#riftmerke { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .2em; color: #cfe3f5; text-shadow: 0 1px 3px #000; }
#riftmerke b { font: 700 16px Georgia, serif; color: #fff; }
#riftstolpe {
  height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(10, 8, 6, .88), rgba(20, 15, 11, .88));
  border: 1px solid rgba(201, 168, 106, .4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
#riftfyll { border-radius: 0; background: linear-gradient(90deg, #2e6a96, #7fc3ef, #d6efff); box-shadow: none; }
#rifttekst { font: 700 10px Georgia, serif; letter-spacing: .1em; color: #f4fbff; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#rifttid { font: 700 14px Georgia, serif; color: #d8cab0; text-shadow: 0 1px 3px #000; }
#rifttid.hast { color: #f08a6a; }
#riftstolpe.full { border-color: rgba(255, 179, 92, .8); }
#riftstolpe.full #riftfyll { background: linear-gradient(90deg, #b8641e, #ffb35c, #ffe2b0); box-shadow: none; }
#xpstolpe {
  height: 10px; border-radius: 2px;
  background: rgba(10, 8, 6, .82); border: 1px solid rgba(201, 168, 106, .3);
}
#xpfyll { border-radius: 0; background: linear-gradient(90deg, #8a5a22, #d9a24e, #f3d08a); box-shadow: none; }
#nivatekst { font: 700 9px 'Cinzel', Georgia, serif; letter-spacing: .2em; color: #fff4de; text-shadow: 0 1px 2px #000, 0 0 5px #000; }
#tal { font: 12.5px Georgia, serif; color: #b6a68b; letter-spacing: .02em; text-shadow: 0 1px 3px #000; }
#tal span { color: #efe2c8; font-weight: 700; }
#tal .skil { color: #7d6f5c; }
#rekkje b { font-family: Georgia, serif; color: #ffcf8a; text-shadow: 0 1px 3px #000, 0 0 12px rgba(255, 150, 60, .55); }
#rekkje span { font-family: 'Cinzel', Georgia, serif; color: #d8c3a0; }
#lagmaalar span { font-family: 'Cinzel', Georgia, serif; color: #d8c3a0; }
#daadrad, #evoklar, #modusrad > * { font-family: Georgia, serif; }

/* ── Bossen ── */
#bossnamn { font: 700 13px 'Cinzel', Georgia, serif; letter-spacing: .2em; color: #f2a08a; text-shadow: 0 1px 3px #000, 0 0 10px rgba(180, 40, 20, .6); }
#bosstolpe { height: 9px; border-radius: 1px; background: rgba(10, 8, 6, .88); border: 1px solid rgba(160, 60, 40, .6); }
#bossfyll { background: linear-gradient(90deg, #6e1410, #b8321e, #e2603a); box-shadow: none; }
#bosstittel { font: italic 13px Georgia, serif; color: #e2d4b9; text-shadow: 0 1px 3px #000; }

/* ── Hendinga (oppdrag) ── */
#oppdrag {
  background: linear-gradient(180deg, rgba(24, 18, 13, .9), rgba(14, 10, 8, .86));
  border: 1px solid rgba(201, 168, 106, .3); border-radius: 3px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#oppdragnamn { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .16em; color: #ffcf8a; }
#oppdragtekst { font: 13px/1.4 Georgia, serif; color: #e2d4b9; }
#oppdragstolpe { border-radius: 0; background: rgba(234, 220, 194, .14); }
#oppdragfyll { background: #e9a24e; box-shadow: none; }

/* ── Botnen: liv, dash, våpen ── */
#livstolpe {
  height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(10, 8, 6, .9), rgba(22, 14, 10, .9));
  border: 1px solid rgba(201, 168, 106, .45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7);
}
#livfyll { background: linear-gradient(90deg, #6e1410, #b8321e, #d9573a); box-shadow: none; }
#livtekst { font: 700 11px Georgia, serif; color: #fff1e4; text-shadow: 0 1px 2px #000, 0 0 5px #000; }
#dashboks { border-radius: 1px; background: rgba(10, 8, 6, .85); border: 1px solid rgba(201, 168, 106, .3); }
#dashfyll { background: linear-gradient(90deg, #4f8fbf, #bfe3fb); box-shadow: none; }
.vslot {
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(36, 27, 19, .9), rgba(18, 13, 9, .9));
  border: 1px solid rgba(201, 168, 106, .38);
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .06);
}
.vslot .lvl { font-family: Georgia, serif; background: #1a120c; border-color: rgba(201, 168, 106, .45); color: #ffdca0; border-radius: 2px; }
.vslot.maks { border-color: rgba(255, 179, 92, .85); box-shadow: inset 0 0 8px rgba(255, 150, 60, .35); }
.vslot.kombo { border-color: #f1e4cc; box-shadow: inset 0 0 8px rgba(255, 240, 210, .3); }
.evneknapp {
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a2d22, #150f0a 72%);
  border-color: rgba(201, 168, 106, .45);
}
.evneknapp.klar { box-shadow: 0 0 0 1px var(--ef) inset, 0 0 12px -2px var(--ef); }
#knappPauseHud, #knappGiOpp {
  font-family: 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%;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#knappGiOpp.varsla { background: radial-gradient(circle at 40% 35%, #7a2418, #3a0e08 70%); border-color: #e9806a; }

/* ── Meldingane over slagmarka ── */
#varsel { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .12em; text-shadow: 0 2px 4px #000, 0 0 18px #000; }
.varselrad.lang { font-family: Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: .01em; }

/* ── KORTVALET ── */
#kortlag {
  background: radial-gradient(ellipse at center, rgba(28, 20, 14, .72), rgba(6, 5, 4, .92));
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#kortoverskrift {
  font: 700 18px 'Cinzel', Georgia, serif; letter-spacing: .32em; color: #e8d2a6;
  text-shadow: 0 -1px 0 #000, 0 0 18px rgba(0, 0, 0, .9), 0 0 24px rgba(255, 170, 80, .25);
}
#kortforklaring { font: italic 14px Georgia, serif; color: #c4b498; letter-spacing: 0; }
.kort {
  border-radius: 4px;
  background: linear-gradient(180deg, #2b2119 0%, #1b140e 55%, #120d09 100%);
  border: 1px solid rgba(201, 168, 106, .38);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 170, .08);
}
.kort::before {                           /* ein mjuk lysflekk i fargen til tingen, utan blur-filter */
  inset: -10% -20% auto; height: 150px; filter: none; opacity: .16;
  background: radial-gradient(ellipse at 50% 30%, var(--kf, #c9a86a), transparent 68%);
}
.kort:hover { transform: translateY(-6px); border-color: rgba(255, 179, 92, .8); box-shadow: 0 16px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 179, 92, .35); }
.kort canvas { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.kort .kn { font: 700 16px/1.15 'Cinzel', Georgia, serif; letter-spacing: .03em; color: #f1e4cc; text-shadow: 0 1px 2px #000; }
.kort .kt { font: 13px/1.45 Georgia, serif; color: #cdbd9f; }
.kort .kmerke {
  font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .14em;
  padding: 2px 9px; border-radius: 2px;
  color: #e2d4b9; background: rgba(10, 7, 5, .55); border: 1px solid rgba(201, 168, 106, .4);
}
.kort.erny .kmerke { color: #d6efff; background: rgba(20, 40, 60, .55); border-color: rgba(159, 216, 255, .55); }
.kort.eroppgradering .kmerke { color: #ffd9a0; border-color: rgba(255, 179, 92, .6); }
.kort.erkombo .kmerke { color: #1a120c; background: var(--tf, #f1e4cc); border-color: transparent; }
.kort.erkombo { border-color: var(--tf, #f1e4cc); box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 22px -10px var(--tf, #f1e4cc); }
.kort.evo-smelt { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px -10px #ffcf8a; }
.kort.evo-fusjon { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px -10px #b48ad8; }
.kort.evo-trans { box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 30px -8px #b7e8c4; }
.kort.erloyndom {
  border-color: rgba(190, 150, 230, .6);
  background: radial-gradient(120% 90% at 50% 0%, rgba(110, 70, 150, .32), #150f12 64%);
}
.kort.erloyndom .kmerke { color: #1a120c; background: linear-gradient(90deg, #c9a8e8, #ffd9a0); border-color: transparent; }
.kort.erloyndom .kn { color: #f3e8ff; text-shadow: 0 1px 2px #000, 0 0 10px rgba(160, 110, 220, .5); }
.kort.ervekk { border-color: rgba(255, 157, 92, .8); }
.kort.ersignatur { border-color: rgba(255, 207, 138, .9); box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 207, 138, .5); }
.kstige i { height: 4px; border-radius: 0; background: rgba(234, 220, 194, .14); }
.kstige i.har { background: var(--kf, #c9a86a); }
.kstige i.neste { background: #fff4de; box-shadow: 0 0 6px rgba(255, 220, 170, .9); }
.kstigetekst { font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .1em; color: #a99c86; }
/* Kva rangen gjev (passivDelta), og krafttaket når det et halvparten (KM 30.10) */
.kort .kdelta { font: 12.5px/1.35 Georgia, serif; color: #eadcc2; position: relative; font-variant-numeric: tabular-nums; }
.kort .kdelta.ktak { font: italic 11.5px/1.3 Georgia, serif; color: #d9a46a; }
/* Mobil: på oppgraderingskort står tala i staden for skildringa du alt har lese — elles dytta
   tala det fjerde kortet under kanten (KM 30.10, våpentala) */
@media (max-width:560px){ .kort.eroppgradering:has(.kdelta) .kt{display:none} }
.kort .knapp { font: 700 11px Georgia, serif; letter-spacing: .1em; color: #a99c86; border-color: rgba(201, 168, 106, .3); border-radius: 2px; }
.kort .kevo { font-family: Georgia, serif; }
.kort .koppskrift { font: italic 11px/1.45 Georgia, serif; color: #b7e8c4; }
#korttid { height: 3px; border-radius: 0; background: rgba(234, 220, 194, .12); }
#korttidfyll { background: linear-gradient(90deg, #b8641e, #ffb35c); box-shadow: none; }
#kortskip button, #kortreroll button, #vaapenval button {
  font-family: Georgia, serif; color: #eadcc2;
  background: linear-gradient(180deg, #2e241b, #1a140f);
  border: 1px solid rgba(201, 168, 106, .35); border-radius: 3px;
}
#skiptal, #rerolltal { font: italic 12px Georgia, serif; color: #a99c86; }

/* ── PAUSEMENYEN ── */
.pm-boks {
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(26, 19, 13, .97), rgba(14, 10, 8, .97));
  border: 1px solid rgba(201, 168, 106, .35);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .65);
}
.pm-boks h3 { font: 700 14px 'Cinzel', Georgia, serif; letter-spacing: .22em; color: #e3cda4; }
.pm-boks button {
  font-family: Georgia, serif; font-weight: 600; color: #eadcc2;
  background: linear-gradient(180deg, #2e241b, #1a140f);
  border: 1px solid rgba(201, 168, 106, .32); border-radius: 3px;
}
.pm-boks button:hover { border-color: rgba(255, 179, 92, .6); background: linear-gradient(180deg, #3a2d21, #211912); }
.pm-boks button.primer { color: #fff2de; background: linear-gradient(180deg, #5c3a1c, #3a2412); border-color: rgba(255, 179, 92, .65); }
.pm-fare { color: #f2a99a !important; border-color: rgba(200, 90, 70, .5) !important; }
#pmVolRad, #pmFxRad { border-radius: 3px; }
#pmHint { font: italic 11px Georgia, serif; color: #a99c86; }

/* ── Fall, nede, handelsmannen ── */
#doedskjerm h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; color: #d4462e; text-shadow: 0 0 40px rgba(160, 30, 15, .8), 0 4px 0 rgba(0, 0, 0, .7); }
#doedskjerm p { font-family: Georgia, serif; font-style: italic; letter-spacing: .08em; text-transform: none; color: #e2b4a4; font-size: 16px; }
#knappDoedForlat { font-family: Georgia, serif; color: #eadcc2; background: linear-gradient(180deg, #2e241b, #1a140f); border: 1px solid rgba(201, 168, 106, .4); border-radius: 3px; }
#nedeskjerm h2 { font-family: 'Cinzel', Georgia, serif; color: #e9806a; text-shadow: 0 0 24px rgba(160, 40, 20, .7); }
#nedeskjerm p { font: italic 15px Georgia, serif; color: #cdbd9f; }
#butikk {
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(26, 19, 13, .96), rgba(14, 10, 8, .96));
  border: 1px solid rgba(201, 168, 106, .4);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#butikkhode .tittel { font-family: 'Cinzel', Georgia, serif; color: #ffcf8a; }
#butikkhode .sub { font-family: Georgia, serif; font-style: italic; }
#butikkgull { font-family: Georgia, serif; color: #ffcf8a; }
#butikk button { font-family: Georgia, serif; }
/* løyndomskortet og transcendensen pulserte med animert skugge — dyrt å teikne; no stilt */
.kort.erloyndom { animation: opp .34s backwards; box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 24px -10px rgba(180, 130, 230, .8); }
.kort.evo-trans { animation: opp .34s backwards; }

/* ── Fellebeltet (fase 4): over evneknappane ── */
#fellebelte {
  position: absolute; right: 12px; bottom: calc(96px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 6px; pointer-events: auto;
}
#fellebelte.skjult { display: none; }
#knappFelle {
  position: relative; width: 58px; height: 58px; padding: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a2d22, #150f0a 72%);
  border: 1px solid rgba(255, 179, 92, .55);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
}
#knappFelle img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
#knappFelle b {
  position: absolute; right: -2px; bottom: -2px; min-width: 18px; padding: 0 4px;
  font: 700 12px/18px Georgia, serif; color: #fbe9cc; text-align: center;
  background: radial-gradient(circle at 38% 32%, #b8412a, #7a1a10 70%); border-radius: 9px;
}
#knappFelle .fb-tast { position: absolute; left: -2px; top: -4px; font: 700 10px 'Cinzel', Georgia, serif; color: #d8c3a0; text-shadow: 0 1px 2px #000; }
#knappFelleByt {
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  font: 700 18px/1 Georgia, serif; color: #f0dfc0;
  background: radial-gradient(circle at 40% 35%, #3a2d22, #17110c 70%); border: 1px solid rgba(201, 168, 106, .45);
}
#knappFelleByt.skjult { display: none; }
#felleNamn { position: absolute; right: 0; bottom: 62px; white-space: nowrap; font: italic 12px Georgia, serif; color: #d8cab0; text-shadow: 0 1px 2px #000, 0 0 6px #000; pointer-events: none; }
#butikkrad .vfelle { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
@media (pointer: coarse) { #knappFelle .fb-tast { display: none; } }

/* ── Laget (lagkameratane) ── */
.lagkort {
  background: linear-gradient(180deg, rgba(24, 18, 13, .9), rgba(14, 10, 8, .86));
  border: 1px solid rgba(201, 168, 106, .3); border-radius: 3px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.lagkort .lport { border-radius: 2px; background: rgba(10, 8, 6, .6); }
.lagkort .lnamn { font: 700 12px Georgia, serif; }
.lagkort .llv { font: 700 10px Georgia, serif; color: #a99c86; }
.lagkort .lhp { border-radius: 0; background: rgba(234, 220, 194, .14); }
.lagkort.nede { border-color: #d9573a; }
.moduschip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 8, .82); }

/* Mobil (KM 25.10: «info om allies tar for stor plass på skjermen, eg adda 3 bots og
   det tok 1/2 skjermen»): kvar lagkamerat blir ei portrettbrikke på 40 px med liv
   under og fargen sin øvst. Namna står alt over figurane i verda. */
@media (max-width: 760px), (max-height: 500px) {
  #lagrad { left: max(12px, env(safe-area-inset-left)); gap: 5px; }
  .lagkort {
    position: relative; width: 40px; min-width: 0; padding: 0; gap: 0;
    flex-direction: column; overflow: hidden; border-top: 2px solid var(--lk, #c9a86a);
  }
  .lagkort.nede { animation: none; border-color: #d9573a; }
  .lagkort .lport { width: 40px; height: 40px; border-radius: 0; background: transparent; }
  .lagkort .linfo { position: absolute; left: 0; right: 0; bottom: 0; gap: 0; }
  .lagkort .lnamn, .lagkort .lsw, .lagkort .lgull, .lagkort .llv { display: none; }
  .lagkort .lhp { width: 100%; height: 4px; }
  .lagkort .llv.nede, .lagkort .llv.daud {
    display: flex; position: absolute; inset: 0 0 4px; align-items: center; justify-content: center;
    font: 700 13px Georgia, serif; color: #fff4de; text-shadow: 0 1px 3px #000, 0 0 6px #000;
  }
  .lagkort .llv.nede { background: rgba(110, 20, 16, .5); }
  .lagkort .llv .lord { display: none; }
}

/* Liggjande telefon (KM 25.10: «hadde vært bedre om vi hadde snudd skjermen på mobil?
   eller iallefall gitt spillerene mulighet til det»): toppen blir smalare og lågare så
   helten ikkje står under tala, laget ligg som ei rad øvst til venstre, og fellebeltet
   flyttar ned ved evneknappane så det ikkje kolliderer med hendingsboksen. */
@media (max-height: 500px) and (orientation: landscape) {
  #topp { gap: 3px; padding-top: max(6px, env(safe-area-inset-top)); }
  #riftlinje, #xpstolpe { width: min(520px, 52vw); }
  #riftstolpe { height: 14px; }
  #xpstolpe { height: 10px; }
  #tal { font-size: 10.5px; }
  .moduschip { padding: 1px 8px; font-size: 9.5px; }
  #rekkje { top: 70px; }
  #rekkje b { font-size: 19px; }
  #lagmaalar { top: 96px; }
  #lagrad { top: max(8px, env(safe-area-inset-top)); flex-direction: row; }
  .lagkort, .lagkort .lport { width: 36px; }
  .lagkort .lport { height: 36px; }
  #livboks { width: min(240px, 30vw); }
  #vaapenrad { padding-right: 160px; }
  #hud:has(#fellebelte:not(.skjult)) #vaapenrad { padding-right: 262px; }
  #fellebelte { right: calc(max(12px, env(safe-area-inset-right)) + 146px); bottom: calc(18px + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (orientation: landscape) {
  #rekkje { top: 84px; }
  #lagmaalar { top: 110px; }
  #livboks { width: min(220px, 28vw); }
  #vaapenrad { gap: 4px; }
}

/* ── Pauseskjermen i solo (stod att i neon etter HUD-runden) ── */
#pauseskjerm {
  background: radial-gradient(ellipse at center, rgba(14, 10, 8, .6), rgba(6, 4, 3, .86) 75%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#pauseskjerm h2 {
  font: 700 clamp(28px, 5.5vw, 44px) 'Cinzel', Georgia, serif; letter-spacing: .32em;
  color: #e9d3a8; text-shadow: 0 2px 6px #000; margin-bottom: 20px;
}
#knappFortset {
  min-width: 200px; padding: 13px 34px; border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
  font: 700 16px Georgia, serif; letter-spacing: .04em; color: #fff2de;
  background: linear-gradient(180deg, #5c3a1c, #3a2412); border: 1px solid rgba(255, 179, 92, .65);
}
#knappFortset:hover { background: linear-gradient(180deg, #6c4522, #432a15); }
#pauseskjerm p { font: italic 14px Georgia, serif; letter-spacing: .02em; color: #b6a68b; }
#pauseskjerm p b { font-style: normal; color: #e3cda4; }
#knappPauseMeny, #knappGiOppPause {
  margin-top: 14px; font: 15px Georgia, serif; text-decoration: none;
  color: #e3cda4; border-bottom: 1px solid rgba(201, 168, 106, .4); border-radius: 0; padding: 4px 2px;
}
#knappGiOppPause { color: #e89a86; border-bottom-color: rgba(200, 90, 70, .45); }
@media (max-height: 500px) { #pauseskjerm h2 { margin-bottom: 12px; } #knappPauseMeny, #knappGiOppPause { margin-top: 8px; } }
/* Sagaen (fase 8a): oppdraget du held på med, i pausemenyen (ingen fast HUD-sporar) */
.pm-saga { margin: -2px 0 6px; max-width: 300px; font: italic 13px/1.4 Georgia, serif; color: #e9c89a; text-align: center; }

/* ── Ta på med ein gong (fase B1): kortet nede til høgre, over evnene og fellebeltet ── */
.tp-kort {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: calc(166px + env(safe-area-inset-bottom));
  width: 236px; padding: 10px 12px 8px; pointer-events: auto; cursor: pointer;
  background: linear-gradient(180deg, rgba(26, 19, 13, .94), rgba(12, 9, 6, .94));
  border: 1px solid rgba(201, 168, 106, .42); border-left: 3px solid var(--tf);
  border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6);
  font: 12px Georgia, serif; color: #d8cab0;
  transform-origin: 100% 100%; animation: tp-inn .18s ease-out;
}
.tp-kort.stor { transform: scale(1.4); border-color: var(--tf); }
.tp-kort.laast { cursor: default; }
.tp-kort.sendt { opacity: .55; }
.tp-topp { display: flex; gap: 8px; align-items: center; }
.tp-ikon { flex: none; width: 24px; font-size: 20px; text-align: center; color: var(--tf); }
.tp-namn { display: block; font: 700 13px 'Cinzel', Georgia, serif; letter-spacing: .04em; color: var(--tf); }
.tp-slag { display: block; margin-top: 1px; font: 700 9px 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #8f8068; }
.tp-uni { margin: 6px 0 2px; font: italic 12px Georgia, serif; line-height: 1.35; color: #ffcf8a; }
.tp-linjer { margin-top: 6px; line-height: 1.45; }
.tp-linjer i { display: inline-block; width: 15px; font-style: normal; color: #8f8068; }
.tp-linjer i.opp { color: #7dffa8; }
.tp-linjer i.ned { color: #ff8a7a; }
.tp-no { margin-top: 6px; font-size: 11px; color: #8f8068; }
.tp-tast { margin-top: 7px; font: 700 10px 'Cinzel', Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #f0dcb0; }
.tp-tast kbd { display: inline-block; margin-right: 4px; padding: 0 5px; border: 1px solid rgba(240, 220, 176, .55); border-radius: 3px; font: inherit; }
.tp-tid { margin-top: 6px; height: 2px; background: rgba(201, 168, 106, .18); }
.tp-tid i { display: block; height: 100%; background: var(--tf); transform-origin: 0 50%; animation: tp-tid linear forwards; }
@keyframes tp-tid { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes tp-inn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (max-height: 500px) and (orientation: landscape) {
  .tp-kort { bottom: calc(96px + env(safe-area-inset-bottom)); width: 210px; }
  .tp-kort.stor { transform: scale(1.15); }
}

/* ── Mål-panelet i kampanjen (fase B2): oppdraget og stega, under minikartet ── */
#kampmaal {
  position: absolute; right: max(12px, env(safe-area-inset-right)); top: calc(300px + env(safe-area-inset-top));
  width: 230px; padding: 8px 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 19, 13, .86), rgba(12, 9, 6, .86));
  border: 1px solid rgba(201, 168, 106, .35); border-radius: 3px;
  font: 12px Georgia, serif; color: #b9ab92;
}
#kampmaal.skjult { display: none; }
#kampmaal .op-tittel { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #e7a94b; margin-bottom: 4px; }
#kampmaal .op-line { position: relative; line-height: 1.5; }
#kampmaal .op-line i { display: inline-block; width: 15px; font-style: normal; }
#kampmaal .op-line.gjort { color: #6f6656; text-decoration: line-through; text-decoration-color: rgba(111, 102, 86, .6); }
#kampmaal .op-line.gjort i { color: #7dffa8; }
#kampmaal .op-line.aktiv { color: #f0dcb0; }
#kampmaal .op-line.aktiv i { color: #e7a94b; }
#kampmaal .op-fram { display: block; height: 2px; margin: 2px 0 2px 15px; background: rgba(201, 168, 106, .2); }
#kampmaal .op-fram s { display: block; height: 100%; background: #e7a94b; text-decoration: none; }
@media (max-width: 560px), (max-height: 500px) and (orientation: landscape) {
  #kampmaal { top: calc(196px + env(safe-area-inset-top)); width: 190px; font-size: 11px; }
}
/* Våpenvegar (29.10): vegvalet og UNTRIED-kortet — her, etter dei andre kortreglane */
.kort.erveg{border-color:var(--kf,#ffd166);box-shadow:0 0 22px color-mix(in srgb,var(--kf,#ffd166) 45%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--kf,#ffd166) 20%,transparent),rgba(12,9,6,.96) 62%)}
.kort.erveg .kmerke{background:var(--kf,#ffd166);color:#140c06;border-color:transparent;letter-spacing:.18em}
.kort.eruntried{box-shadow:0 0 18px rgba(125,255,168,.28);border-color:rgba(125,255,168,.55)}
.kort.eruntried .kmerke{background:linear-gradient(90deg,#7dffa8,#8fd8ff);color:#06140c;border-color:transparent}
.kort .kstigetekst.kuprovd{color:#7dffa8;font-style:italic}

/* Butikkheltane (30.10): Ashborn sitt opningsval «THE ASH CHOOSES» */
.kort.eraske{border-color:#ff7a3d;box-shadow:0 0 24px rgba(255,122,61,.45);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--kf,#ff7a3d) 22%,transparent),rgba(14,8,5,.96) 62%)}
.kort.eraske .kmerke{background:linear-gradient(90deg,#ff7a3d,#ffd166);color:#1a0a04;border-color:transparent;letter-spacing:.16em}

/* ── Dykket (31.10): bandet øvst og infostripa for runeporten du går mot. Stripa tek aldri imot klikk. ── */
#portalband{position:fixed;left:50%;top:calc(max(8px, env(safe-area-inset-top)) + 64px);transform:translateX(-50%);z-index:44;
  min-width:min(420px,86vw);padding:8px 64px 9px;text-align:center;border-radius:12px;pointer-events:none;
  background:rgba(8,8,20,.88);border:1px solid rgba(232,194,122,.55);box-shadow:0 6px 30px rgba(0,0,0,.5);animation:portalinn .3s ease}
@keyframes portalinn{from{opacity:0}to{opacity:1}}   /* berre opasitet: transform held bandet midtstilt */
#portalband .pb-lit{font:600 10px 'Cinzel',Georgia,serif;letter-spacing:.32em;color:#e8c27a}
#portalband .pb-stor{font:600 clamp(15px,2.2vw,20px) 'Cinzel',Georgia,serif;letter-spacing:.14em;color:#fff;margin-top:2px}
#portalband .pb-tid{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:2px solid #e8c27a;display:grid;place-items:center;font:600 17px 'Cinzel',Georgia,serif;color:#e8c27a}
#portalstripe{--pf:#9fd8ff;position:fixed;left:50%;bottom:calc(max(10px, env(safe-area-inset-bottom)) + 92px);transform:translateX(-50%);
  z-index:19;   /* under #hud (20): utstyrskortet og fellebeltet står alltid oppå */
width:min(760px,92vw);display:grid;grid-template-columns:auto 1fr 1fr;gap:18px;align-items:center;padding:12px 18px;
  border-radius:12px;pointer-events:none;background:rgba(8,8,20,.9);border:1px solid var(--pf);
  box-shadow:0 0 34px color-mix(in srgb, var(--pf) 30%, transparent)}
#portalstripe .ps-namn{font:600 clamp(18px,2.6vw,26px) 'Cinzel',Georgia,serif;letter-spacing:.12em;color:#fff;text-shadow:0 0 16px var(--pf);line-height:1}
#portalstripe .ps-djup{margin-top:5px;font:700 12.5px Georgia,serif;color:var(--pf)}
#portalstripe .ps-kol{font:13px/1.45 Georgia,serif;color:#cdbd9f}
#portalstripe .ps-kol b{display:block;font:600 9.5px 'Cinzel',Georgia,serif;letter-spacing:.22em;color:#e8c27a}
#portalstripe.laast{filter:saturate(.35)}
#portalstripe .ps-kort{display:none}
#portalband.skjult,#portalstripe.skjult{display:none}
/* Mobil (Dykket 2, KM 31.10: «info menyen i bunn tar halve skjermen»): éi smal stripe rett over livet, bandet rett
   over stripa, og oppdragssporet viker medan portalane står — midten av skjermen er portalane sin */
@media (max-width:560px){ #portalstripe{grid-template-columns:1fr;gap:3px;bottom:calc(max(10px, env(safe-area-inset-bottom)) + 124px);padding:7px 12px;width:min(340px,92vw)}
  #portalstripe .ps-kol{display:none}
  #portalstripe .ps-kort{display:block;font:12px/1.3 Georgia,serif;color:#cdbd9f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #portalstripe .ps-hovud{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  #portalstripe .ps-namn{font-size:17px} #portalstripe .ps-djup{margin-top:0;font-size:11.5px}
  #portalband{top:auto;bottom:calc(max(10px, env(safe-area-inset-bottom)) + 186px);padding:5px 40px 6px 14px;min-width:0;width:min(300px,84vw)}
  #portalband .pb-lit{display:none}
  #portalband .pb-stor{font-size:13px;letter-spacing:.08em} #portalband .pb-tid{width:26px;height:26px;font-size:13px;right:6px}
  body:has(#portalband:not(.skjult)) #questspor{display:none!important} }
/* Mara tek natta: raud vignett i tre sekund */
body.marablod::after{content:"";position:fixed;inset:0;z-index:43;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,rgba(140,0,20,.55) 80%,rgba(90,0,10,.85));animation:marablod 3s ease-out forwards}
@keyframes marablod{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
#riftmerke.nv2{color:#ff8a4c} #riftmerke.nv3{color:#ff4d6d}
/* ══ TOPPEN I RIFTA + OPPDRAGSSPORET (31.10.2026) ══════════════════════════════════════════
   KM: «se på design hvor det står buffs osv i toppen … pass på at det ikke tar hele skjermen
   på mobil» og «mange av questene er litt defuse». Før: tre rader med buffar, streak og BOND
   og jobbtavla på faste px-høgder oppå kvarandre (mobil rift 34: 24 % av skjermen, 10 overlapp).
   No: éin straum (rift · nivå · buffar · tal+streak · BOND · vakta) og alle oppdrag i
   #questspor til høgre. --topp-h (ui.js toppHogd) er kor langt ned toppen går. */
#topp { gap: 4px; }
#statsrad { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-width: 0; }
#statsrad #rekkje { position: static; transform: none; top: auto; left: auto; }
#statsrad #rekkje b { font-size: 18px; }
#statsrad #rekkje span { font-size: 9px; letter-spacing: .22em; }
#topp #lagmaalar { position: static; transform: none; top: auto; left: auto; }
#topp #bosslinje { position: static; transform: none; top: auto; left: auto; width: min(560px, 86vw); margin-top: 2px; }
#topp #bosslinje.skjult { display: none; }

#hud #buffrad {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5px;
  max-width: min(1000px, 94vw); width: auto; height: auto; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  font: inherit; letter-spacing: normal; text-transform: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#hud #buffrad.skjult { display: none; }
#buffrad .bk {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--bf) 55%, transparent); background: rgba(14, 10, 8, .82);
  color: var(--bf); font: 700 12px/1.3 Georgia, serif; letter-spacing: .02em; white-space: nowrap;
}
#buffrad .bk i { font-style: normal; font-size: 12px; }
#buffrad .bk canvas { width: 14px; height: 14px; }
#buffrad .bk-kort { display: none; }
#buffrad .bk.puls { animation: evoklarpuls 1.2s ease-in-out infinite alternate; }
#buffinfo {
  width: min(380px, 92vw); padding: 7px 10px; pointer-events: none; text-align: left;
  background: linear-gradient(180deg, rgba(26, 19, 13, .94), rgba(12, 9, 6, .94));
  border: 1px solid rgba(201, 168, 106, .4); border-radius: 3px;
}
#buffinfo.skjult { display: none; }
#buffinfo .bi { display: flex; flex-direction: column; padding: 3px 0; }
#buffinfo .bi + .bi { border-top: 1px solid rgba(201, 168, 106, .14); }
#buffinfo .bi b { font: 700 12px Georgia, serif; color: var(--bf); }
#buffinfo .bi span { font: 11.5px/1.35 Georgia, serif; color: #cdbfa6; }

/* Oppdragssporet: PC til høgre under minikartet (minikartet er min(178px, 22vmin), render.js) */
#questspor {
  position: absolute; right: max(16px, env(safe-area-inset-right));
  top: calc(var(--topp-h, 120px) + min(178px, 22vmin) + 22px);
  width: 270px; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
#questspor.skjult { display: none; }
#oppdrag { display: none !important; }
.qk {
  padding: 8px 11px 9px; text-align: left; border-radius: 3px;
  background: linear-gradient(180deg, rgba(24, 18, 13, .9), rgba(14, 10, 8, .86));
  border: 1px solid rgba(201, 168, 106, .3);
}
.qk-topp { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.qk-namn { font: 700 11px 'Cinzel', Georgia, serif; letter-spacing: .14em; color: var(--qf); text-transform: uppercase; }
.qk-meta { font: 700 12px Georgia, serif; color: #f0dfc0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qk-maal { font: 13px/1.35 Georgia, serif; color: #e2d4b9; margin-top: 3px; }
.qk-tal { color: #fff4de; font-weight: 700; white-space: nowrap; }
.qk-skil { color: #7d6f5c; }
.qk-bar { height: 4px; margin-top: 6px; background: rgba(234, 220, 194, .14); }
.qk-bar i { display: block; height: 100%; background: var(--qf); transform-origin: left; transition: transform .18s; }
.qk-steg { display: flex; gap: 4px; margin-top: 5px; }
.qk-steg i { width: 20px; height: 3px; background: rgba(255, 255, 255, .15); }
.qk-steg i.gjort { background: var(--qf); }
.qk-steg i.no { background: #fff4de; }
.qk-lon { font: italic 11.5px/1.3 Georgia, serif; color: #b9ab92; margin-top: 5px; }
.qk-lon.qk-ekstra { font-style: normal; font-size: 10.5px; margin-top: 2px; color: #a3967e; }   /* kongsordren: vending, pause, kroner */

/* Det som ligg under toppen, følgjer han (før: faste px-høgder) */
#bonusrad { top: calc(var(--topp-h, 120px) + 6px); }
#veljarvis { top: calc(var(--topp-h, 112px) + 8px); }
#nedevarsel { top: calc(var(--topp-h, 64px) + 6px); }
#varsel { top: max(22%, calc(var(--topp-h, 120px) + 14px)); }

/* Mobil (stående): pause og flagg i ein smal kolonne til venstre, toppen ved sida av,
   merka viser berre teikn + tal (trykk på rada for lista), oppdraga over evneknappane */
@media (max-width: 560px) {
  #knappPauseHud, #knappGiOpp { width: 32px; height: 32px; min-width: 0; padding: 0; font-size: 13px; left: max(8px, env(safe-area-inset-left)); }
  #knappPauseHud { top: calc(max(6px, env(safe-area-inset-top))); }
  #knappGiOpp { top: calc(max(6px, env(safe-area-inset-top)) + 38px); }
  #topp { gap: 3px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 0 calc(max(8px, env(safe-area-inset-left)) + 40px); }
  #riftlinje, #xpstolpe { width: 100%; }
  #riftlinje { gap: 7px; }
  #xpstolpe { height: 9px; }
  #hud #buffrad { flex-wrap: nowrap; gap: 4px; max-width: 100%; overflow: hidden; }
  #buffrad .bk { padding: 1px 6px; gap: 3px; font-size: 10.5px; }
  #buffrad .bk i { font-size: 10.5px; }
  #buffrad .bk canvas { width: 12px; height: 12px; }
  #buffrad .bk-lang { display: none; }
  #buffrad .bk-kort { display: inline; }
  #buffrad .bk.berreikon { padding: 1px 5px; }
  #statsrad { gap: 8px; }
  #tal { padding: 0; flex-wrap: nowrap; white-space: nowrap; font-size: 10.5px; }
  #tal .tal-pc { display: none; }
  #statsrad #rekkje b { font-size: 14px; }
  #statsrad #rekkje span { font-size: 8px; letter-spacing: .16em; }
  #topp #bosslinje { width: 100%; }
  #bossnamn { font-size: 11px; margin-bottom: 2px; }
  #bosstittel { display: none; }
  #haervis { top: calc(var(--topp-h, 80px) + 8px); }
  #petvis { top: calc(var(--topp-h, 80px) + 52px); }
  #questspor { top: auto; bottom: calc(150px + env(safe-area-inset-bottom)); right: max(10px, env(safe-area-inset-right)); width: min(220px, 58vw); gap: 6px; }
  .qk { padding: 6px 8px 7px; }
  .qk-namn { font-size: 10px; letter-spacing: .1em; }
  .qk-meta { font-size: 11px; }
  .qk-maal { font-size: 11.5px; margin-top: 2px; }
  .qk-lon { font-size: 10.5px; margin-top: 3px; }
  .qk-bar { margin-top: 4px; }
}
/* Liggjande telefon: same kompakte merke, oppdraga over evneknappane */
@media (max-height: 500px) and (orientation: landscape) {
  #hud #buffrad { flex-wrap: nowrap; gap: 4px; overflow: hidden; max-width: min(520px, 52vw); }
  #buffrad .bk { padding: 1px 6px; gap: 3px; font-size: 10px; }
  #buffrad .bk-lang { display: none; }
  #buffrad .bk-kort { display: inline; }
  #tal .tal-pc { display: none; }
  #statsrad #rekkje b { font-size: 14px; }
  #bosstittel { display: none; }
  #topp #bosslinje { width: min(520px, 52vw); margin-top: 0; }
  #bossnamn { font-size: 10px; margin-bottom: 1px; }
  #bosstolpe { height: 7px; }
  #questspor { top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); right: calc(12px + env(safe-area-inset-right)); width: 220px; gap: 6px; }
  .qk { padding: 5px 8px 6px; }
  .qk-maal { font-size: 11.5px; margin-top: 1px; }
  .qk-lon { font-size: 10px; margin-top: 2px; }
}

/* Byggvariasjon (31.10): startkorta — omen-valet og opningsvalet — og omenen i TAB og på sluttskjermen */
.kort.eromen{border-color:var(--kf,#c084fc);box-shadow:0 0 24px color-mix(in srgb,var(--kf,#c084fc) 45%,transparent);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--kf,#c084fc) 24%,transparent),rgba(10,7,14,.96) 62%)}
.kort.eromen .kmerke{background:var(--kf,#c084fc);color:#0e0814;border-color:transparent;letter-spacing:.2em}
.kort.eropning{border-color:var(--kf,#ffd166);box-shadow:0 0 18px color-mix(in srgb,var(--kf,#ffd166) 35%,transparent)}
.kort.eropning .kmerke{background:linear-gradient(90deg,#ffd166,var(--kf,#ffd166));color:#140c06;border-color:transparent;letter-spacing:.16em}
#oversyn .ov-omen{max-width:560px;margin:0 auto 9px;box-sizing:border-box;padding:8px 10px;border:1px solid color-mix(in srgb,var(--kf,#c084fc) 60%,transparent);border-radius:8px;
  background:color-mix(in srgb,var(--kf,#c084fc) 10%,rgba(10,7,14,.9));font-size:13px;line-height:1.4}
#oversyn .ov-omen b{color:var(--kf,#c084fc);margin-right:4px}
#oversyn .ov-omen span{color:#ff8a8a}
.sluttomen{margin:2px 0 6px;font-size:13px;color:#d9c8ff;letter-spacing:.04em}
.kort.erbytt{border-color:#9ad27a;box-shadow:0 0 18px rgba(154,210,122,.35)}
.kort.erbytt .kmerke{background:linear-gradient(90deg,#9ad27a,#7dd3fc);color:#06140c;border-color:transparent;letter-spacing:.18em}
.kort .kstigetekst.kbytt{color:#cfe8bf}

/* ── Portalkorta (touch, KM 31.10: «så på mobil er det slt for vanskelig å velge … via kort form?»). Under kortvalet
   (#kortlag, z 50), over bandet (z 44). Toppen er open, så du ser portalane og laget medan du vel. ── */
#portkort{position:fixed;inset:0;z-index:48;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;
  padding:16px max(14px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  background:linear-gradient(180deg,rgba(6,5,4,0) 0%,rgba(6,5,4,.5) 26%,rgba(6,5,4,.93) 50%);touch-action:manipulation;animation:portalinn .25s ease}
#portkort.skjult{display:none}
.pk-hovud{display:flex;align-items:center;gap:12px;width:min(560px,100%);padding:6px 8px 6px 14px;border-radius:12px;
  background:rgba(8,8,20,.88);border:1px solid rgba(232,194,122,.55);box-shadow:0 6px 24px rgba(0,0,0,.5)}   /* same som bandet: HUD-en skin aldri gjennom */
.pk-tittel{flex:1;min-width:0}
.pk-lit{font:600 10px 'Cinzel',Georgia,serif;letter-spacing:.32em;color:#e8c27a}
.pk-stor{font:700 clamp(14px,4vw,18px) 'Cinzel',Georgia,serif;letter-spacing:.08em;color:#fff;text-shadow:0 2px 6px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pktid{width:38px;height:38px;flex:none;border-radius:50%;border:2px solid #e8c27a;display:grid;place-items:center;
  font:600 17px 'Cinzel',Georgia,serif;color:#e8c27a;background:rgba(8,8,20,.7)}
#pktidbar{width:min(560px,100%);height:3px;border-radius:2px;overflow:hidden;background:rgba(232,194,122,.18)}
#pktidbar i{display:block;height:100%;width:100%;background:#e8c27a;transition:width .2s linear}
#pkrad{display:flex;flex-direction:column;gap:8px;width:min(560px,100%)}
.pk-kort{--pf:#9fd8ff;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:74px;margin:0;padding:8px 12px 8px 8px;
  text-align:left;color:inherit;font:inherit;cursor:pointer;border-radius:6px;border:1px solid color-mix(in srgb,var(--pf) 55%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--pf) 18%,#120d09),#1b140e 46%,#120d09);
  box-shadow:0 8px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,220,170,.06);-webkit-tap-highlight-color:transparent;
  transition:transform .12s,border-color .12s,box-shadow .12s}
#pkrad.inn .pk-kort{animation:opp .28s backwards}
#pkrad.inn .pk-kort:nth-child(2){animation-delay:.05s}#pkrad.inn .pk-kort:nth-child(3){animation-delay:.1s}#pkrad.inn .pk-kort:nth-child(4){animation-delay:.15s}
.pk-kort:active{transform:scale(.98)}
.pk-kort.valt{border-color:var(--pf);box-shadow:0 0 0 2px var(--pf),0 0 28px color-mix(in srgb,var(--pf) 45%,transparent)}
.pk-kort.laast{filter:saturate(.2);opacity:.6;cursor:default}
.pk-bilete{width:50px;height:70px;flex:none;object-fit:contain;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--pf) 55%,transparent))}
.pk-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pk-topp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pk-namn{font:700 16px 'Cinzel',Georgia,serif;letter-spacing:.1em;color:#fff;text-shadow:0 0 14px var(--pf)}
.pk-synk{font:700 13px Georgia,serif;letter-spacing:.04em;color:var(--pf)}
.pk-vakt{font:italic 12px Georgia,serif;color:#cdbd9f}
.pk-stutt{display:flex;flex-direction:column;font:12.5px/1.35 Georgia,serif;color:#e4d6bb}
.pk-lang{display:none;flex-direction:column;gap:3px;font:12.5px/1.4 Georgia,serif;color:#d9cbb0}
.pk-lang i{display:block;font:600 9px 'Cinzel',Georgia,serif;font-style:normal;letter-spacing:.22em;color:#e8c27a}
.pk-merke{display:flex;align-items:center;gap:8px;margin-top:3px}
.pk-merke em{font:700 9.5px 'Cinzel',Georgia,serif;font-style:normal;letter-spacing:.18em;color:#140c06;background:var(--pf);padding:2px 6px;border-radius:2px}
.pk-kort.laast .pk-merke em{background:#8a8f99}
.pk-royst{font:700 11px Georgia,serif;letter-spacing:.08em;color:var(--pf)}
#pkhint{width:min(560px,100%);text-align:center;font:italic 12.5px/1.4 Georgia,serif;color:#cdbd9f;text-shadow:0 1px 3px #000}
#pkgaa{font:12px Georgia,serif;color:#a99c86;background:rgba(14,10,8,.6);border:1px solid rgba(201,168,106,.3);border-radius:3px;padding:7px 14px}
#pbkort{pointer-events:auto;position:absolute;left:8px;top:50%;transform:translateY(-50%);font:600 11px 'Cinzel',Georgia,serif;letter-spacing:.14em;
  color:#140c06;background:#e8c27a;border:0;border-radius:3px;padding:6px 8px}
#pbkort.skjult{display:none}
body:has(#pbkort:not(.skjult)) #portalband{padding-left:84px}
body:has(#portkort:not(.skjult)) #questspor{display:none!important}
/* Nettbrett og liggjande telefon: korta side om side; med plass står heile Danger- og Reward-teksten */
@media (min-width:700px),(max-height:500px){
  #pkrad{flex-direction:row;align-items:stretch;width:min(1000px,100%)}
  .pk-kort{flex:1;min-width:0;flex-direction:column;align-items:center;text-align:center;padding:10px 10px 12px}
  .pk-topp{flex-direction:column;align-items:center;gap:1px}
  .pk-merke{justify-content:center}
  .pk-hovud,#pktidbar,#pkhint{width:min(1000px,100%)}
}
@media (min-width:700px) and (min-height:501px){
  .pk-stutt{display:none} .pk-lang{display:flex}
  .pk-bilete{width:72px;height:100px}
}
/* Låg telefon (iPhone SE) med fire kort: tettare, så hovudet ikkje kryp opp i HUD-en */
@media (max-width:699px) and (max-height:700px){
  .pk-lit{display:none}
  #pkrad{gap:6px}
  .pk-kort{min-height:0;padding:6px 10px 6px 6px}
  .pk-bilete{width:40px;height:56px}
}
@media (max-height:500px){
  #portkort{gap:5px;padding-top:8px;background:linear-gradient(180deg,rgba(6,5,4,0) 0%,rgba(6,5,4,.6) 22%,rgba(6,5,4,.93) 42%)}
  .pk-bilete{width:34px;height:48px}
  .pk-lit{display:none} .pk-stor{font-size:14px}
  #pktid{width:30px;height:30px;font-size:14px}
  .pk-stutt{font-size:11.5px} .pk-namn{font-size:14px}
}
/* Våpenstigen (31.10): rollefargane på vegkorta, kva vegen gjer på rangkortet, rolleprikken og stigen i ARSENAL */
.kort.erveg.mer{--kf:#8ff0ff}.kort.erveg.storre{--kf:#ffb35c}.kort.erveg.villere{--kf:#c99bff}
.kort .kneste{font:italic 11.5px/1.35 Georgia,serif;color:color-mix(in srgb,var(--kf,#c9a86a) 70%,#eadcc2);position:relative}
.kort.ervekst{border-color:color-mix(in srgb,#ffd9a0 70%,transparent)}
.kort.ervekst .kmerke{color:#140c06;background:#ffd9a0;border-color:transparent}
.vslot .vrolle{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;border:2px solid #0b0806;box-shadow:0 0 6px rgba(0,0,0,.6)}
#oversyn .ov-stige{display:grid;gap:0;margin:6px 0 2px;padding-left:2px}
#oversyn .ov-steg{position:relative;display:grid;gap:1px;padding:4px 0 6px 18px;border-left:2px solid rgba(201,168,106,.25);margin-left:5px;font:12px/1.35 Georgia,serif;color:#cdbd9f}
#oversyn .ov-steg:last-child{border-left-color:transparent}
#oversyn .ov-steg::before{content:"";position:absolute;left:-7px;top:6px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(201,168,106,.55);background:#120d09}
#oversyn .ov-steg b{font:700 10px 'Cinzel',Georgia,serif;letter-spacing:.12em;color:#a99c86}
#oversyn .ov-steg.ferdig{border-left-color:#c9a86a;color:#a99c86}
#oversyn .ov-steg.ferdig::before{background:#c9a86a;border-color:#c9a86a}
#oversyn .ov-steg.ferdig b{color:#d9c49a}
#oversyn .ov-steg.her{color:#eadcc2}
#oversyn .ov-steg.her::before{background:#ffb35c;border-color:#fff4de;box-shadow:0 0 8px #ffb35c}
#oversyn .ov-steg.her b{color:#ffb35c}
/* Carvings (Tusen våpenvegar fase 2): ramma i fargen til slaget, merket seier kvar kortet kjem frå */
.kort.erriss .kmerke{letter-spacing:.16em}
.kort.erriss.kj-heim .kmerke{background:#e9dcc2;color:#1a1208}
.kort.erriss.kj-kjend .kmerke{background:#bfb29a;color:#1a1208}
.kort.erriss.kj-merka .kmerke{background:#ffd166;color:#241503;box-shadow:0 0 12px rgba(255,209,102,.55)}
.kort.erriss.kj-ny .kmerke{background:#cdb6ff;color:#170d2b}
.kort.erriss .kstigetekst{color:var(--kf);letter-spacing:.12em;text-transform:uppercase}
.vslot .vriss{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);display:flex;gap:3px}
.vslot .vriss i{width:7px;height:7px;border-radius:50%;border:1px solid rgba(233,220,194,.55);background:rgba(10,7,5,.85)}
.vslot .vriss i.fylt{background:var(--rf);border-color:var(--rf);box-shadow:0 0 4px var(--rf)}
/* Kenningar (Tusen våpenvegar fase 3): ruta gløder i fargen, ARSENAL seier kva han gjer, sluttskjermen kan merke */
.vslot.kenning{border-color:var(--kc);box-shadow:0 0 10px color-mix(in srgb,var(--kc) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--kc) 30%,transparent)}
.ov-kenning{margin:4px 0 6px;padding:5px 8px;border-left:3px solid var(--kc);background:color-mix(in srgb,var(--kc) 10%,transparent);font-size:12px;color:#e8dcc4}
.ov-kenning b{color:var(--kc);font-family:'Cinzel',Georgia,serif;letter-spacing:.06em;margin-right:4px}
.ov-kenning span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a99c86;margin-top:2px}
.sluttmerk{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.sluttmerk .ttit{font-size:10px;letter-spacing:.16em;color:#a99c86;margin-right:4px}
.merkknapp{border:1px solid var(--kc);background:color-mix(in srgb,var(--kc) 12%,rgba(12,9,6,.9));color:#f1e4cc;border-radius:8px;padding:6px 10px;font:600 12px/1.2 'Cinzel',Georgia,serif;cursor:pointer;text-align:left}
.merkknapp span{display:block;font:500 10px/1.3 Inter,system-ui,sans-serif;letter-spacing:.06em;color:#cbbfa8;margin-top:2px}
.merkknapp.merka{background:color-mix(in srgb,var(--kc) 30%,rgba(12,9,6,.9));box-shadow:0 0 12px color-mix(in srgb,var(--kc) 50%,transparent)}
.merkknapp:focus-visible{outline:2px solid #ffd166;outline-offset:2px}
/* Kenning-banneret og kortlina (fase 3) */
#kenningBanner{position:fixed;top:max(128px,21vh);left:50%;transform:translate(-50%,-14px) scale(.96);opacity:0;pointer-events:none;z-index:69;
  text-align:center;padding:14px 26px 12px;min-width:min(420px,88vw);max-width:92vw;border-radius:12px;
  background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--kc) 30%,#0b0807),rgba(10,7,5,.97) 70%);
  border:1px solid color-mix(in srgb,var(--kc) 70%,transparent);box-shadow:0 0 34px color-mix(in srgb,var(--kc) 40%,transparent);
  transition:opacity .28s ease,transform .38s cubic-bezier(.2,1.4,.4,1)}
#kenningBanner.paa{opacity:1;transform:translate(-50%,0) scale(1)}
#kenningBanner .kb-lab{font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.32em;color:var(--kc)}
#kenningBanner .kb-namn{font:700 clamp(26px,4.6vh,42px)/1.05 'Cinzel',Georgia,serif;letter-spacing:.06em;color:#fff6e4;
  text-shadow:0 0 18px var(--kc),0 2px 2px #000;margin:4px 0 6px}
#kenningBanner .kb-tekst{font:600 clamp(14px,2.1vh,18px)/1.3 Georgia,serif;color:#f3ead8}
#kenningBanner .kb-vaapen{margin-top:6px;font:500 11px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cbbfa8}
#kenningBanner.ny .kb-namn{animation:kbPuls 1.4s ease-in-out 2}
@keyframes kbPuls{50%{text-shadow:0 0 34px var(--kc),0 0 6px #fff,0 2px 2px #000}}
@media (prefers-reduced-motion:reduce){#kenningBanner{transition:opacity .2s}#kenningBanner.ny .kb-namn{animation:none}}
.kort .kkenning{margin-top:4px;font:700 11px 'Cinzel',Georgia,serif;letter-spacing:.12em;color:var(--kc);text-shadow:0 0 8px color-mix(in srgb,var(--kc) 60%,transparent)}