/* =====================================================================
   VIKINGMAFIA – utseende (versjon 4: mørkt og skummelt)
   Endre fargene her for å gi spillet et nytt preg.
   ===================================================================== */

:root {
  --bakgrunn: #050506;
  --brett: rgba(9, 9, 11, 0.94);
  --panel: #0e0e11;
  --panel-lys: #16151a;
  --kant: #2a1c1e;
  --kant-lys: #3d2427;
  --tekst: #e9e3dc;
  --dempet: #8e8580;
  --gull: #cfa64b;
  --rod: #8e1014;
  --rod-lys: #e0262b;
  --blod: #5c0709;
  --gronn: #43b066;
  --neon: #ff2a2a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--bakgrunn);
  color: var(--tekst);
  font-family: "Inter", Arial, sans-serif;
  font-size: 14px;
}

body.spillside {
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(140, 10, 14, 0.35), transparent 60%),
    linear-gradient(rgba(4, 4, 6, 0.85), rgba(4, 4, 6, 0.93)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23120f10'/%3E%3Cpath d='M0 0h80M0 20h80M0 40h80M20 0v20M60 0v20M0 20v20M40 20v20' stroke='%23070606' stroke-width='3'/%3E%3C/svg%3E");
  background-attachment: fixed;
  padding-bottom: 60px;
}

/* Mørke kanter rundt skjermen */
body.spillside::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, 0.6) 100%);
}

/* Rød puls rundt skjermen når helsen er lav */
body.lav-helse::before {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(120, 0, 0, 0.6) 100%);
  animation: puls 1.6s ease-in-out infinite;
}
@keyframes puls { 50% { opacity: 0.45; } }

/* ---------- Effekter ---------- */
.regn {
  position: fixed; inset: -200px 0 0 0; pointer-events: none; z-index: 41; opacity: 0.5;
  background-image:
    repeating-linear-gradient(100deg, transparent 0 37px, rgba(160, 170, 190, 0.07) 37px 38px),
    repeating-linear-gradient(100deg, transparent 0 61px, rgba(160, 170, 190, 0.05) 61px 62px);
  background-size: 100% 220px;
  animation: regn 0.45s linear infinite;
}
@keyframes regn { to { background-position: -40px 220px, -40px 220px; } }

.korn {
  position: fixed; inset: -50%; pointer-events: none; z-index: 42; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: korn 0.6s steps(4) infinite;
}
@keyframes korn {
  25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, 3%); } 100% { transform: translate(3%, -1%); }
}
body.uten-effekter .regn, body.uten-effekter .korn { display: none; }

.blits { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0; }
.blits.rod { background: radial-gradient(ellipse at center, rgba(200, 0, 0, 0.15), rgba(150, 0, 0, 0.55)); animation: blits 0.7s ease-out; }
.blits.gull { background: radial-gradient(ellipse at center, rgba(255, 210, 120, 0.12), rgba(207, 166, 75, 0.25)); animation: blits 0.6s ease-out; }
@keyframes blits { from { opacity: 1; } to { opacity: 0; } }

.rist { animation: rist 0.4s; }
@keyframes rist {
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* ---------- Skrift ---------- */
h2, h3, h4, .seksjon-tittel { font-family: "Bebas Neue", "Oswald", sans-serif; letter-spacing: 2px; font-weight: 400; }
h2 { margin: 0 0 4px; font-size: 34px; color: var(--tekst); font-weight: 400; line-height: 1.1; text-shadow: 0 2px 0 #000, 0 0 18px rgba(224, 38, 43, 0.25); }
h2::after { content: ""; display: block; width: 46px; height: 2px; background: var(--rod-lys); margin-top: 6px; box-shadow: 0 0 8px var(--neon); }
h3 { margin: 24px 0 8px; font-size: 22px; color: #d9cfc6; }
p { line-height: 1.55; }
a { color: var(--gull); cursor: pointer; text-decoration: none; }
a:hover { color: #fff; }
.ingress { color: var(--dempet); margin: 10px 0 18px; }
.dempet { color: var(--dempet); }
.liten { font-size: 12px; }
.skjult { display: none !important; }
.skrivemaskin, .sitat, .radio-tekst { font-family: "Special Elite", "Courier New", monospace; }
.penger { color: var(--gull); }

/* ---------- Brettet ---------- */
.brett {
  max-width: 1260px; margin: 0 auto; background: var(--brett);
  border-left: 1px solid #1a1112; border-right: 1px solid #1a1112;
  min-height: 100vh; box-shadow: 0 0 80px rgba(0, 0, 0, 0.9);
}

/* ---------- Hode ---------- */
.hode {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 26px 28px 46px;
  background: linear-gradient(to bottom, #08080a 0%, #1a0507 85%, #2a0709 100%);
  overflow: hidden;
}
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 56px; fill: #030304; pointer-events: none; }
.skyline .vinduer rect { fill: #e8b04a; opacity: 0.7; animation: vindu 7s infinite; }
.skyline .vinduer rect:nth-child(3n) { animation-delay: 2s; }
.skyline .vinduer rect:nth-child(4n) { animation-delay: 4.5s; fill: #ff4a3a; }
@keyframes vindu { 0%, 60% { opacity: 0.7; } 65%, 90% { opacity: 0.05; } }

.logo {
  font-family: "UnifrakturMaguntia", "Oswald", serif; font-size: 30px; color: var(--tekst);
  cursor: pointer; user-select: none; position: relative; z-index: 1;
}
.logo.neon {
  font-size: 58px; line-height: 1; color: #ffe3e3;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--neon), 0 0 22px var(--neon), 0 0 46px rgba(255, 42, 42, 0.7);
  animation: flimmer 6s infinite;
}
@keyframes flimmer {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.35; text-shadow: none; }
}

.hode-info { display: flex; gap: 26px; align-items: center; font-size: 13px; position: relative; z-index: 1; }
.avatar-liten {
  width: 50px; height: 50px; border-radius: 4px; background: #000;
  border: 1px solid var(--kant-lys); display: flex; align-items: center; justify-content: center;
  font-family: "UnifrakturMaguntia", serif; font-size: 30px; color: var(--rod-lys);
  box-shadow: 0 0 14px rgba(224, 38, 43, 0.3);
}
.hode-kol div { line-height: 1.65; white-space: nowrap; }
.hode-kol b { font-weight: 600; color: var(--tekst); }
.hode-kol .navn { color: var(--rod-lys); font-weight: 600; }
.prikk { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #555; margin-left: 4px; }
.prikk.pa { background: var(--gronn); box-shadow: 0 0 6px var(--gronn); }
.stjerner { letter-spacing: 2px; cursor: pointer; }
.stjerner .pa { color: var(--rod-lys); text-shadow: 0 0 6px var(--neon); }
.stjerner .av { color: #3a3335; }

/* ---------- Politiradio ---------- */
.radio {
  display: flex; align-items: center; background: #000; border-top: 1px solid var(--blod);
  font-size: 12.5px; height: 30px; overflow: hidden;
}
.radio-merke {
  flex-shrink: 0; padding: 0 12px; height: 100%; display: flex; align-items: center; gap: 6px;
  background: var(--rod); color: #fff; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 17px; letter-spacing: 1.5px;
  animation: blinkLys 2s infinite;
}
@keyframes blinkLys { 50% { background: #1d3fa0; } }
.radio-vindu { flex: 1; overflow: hidden; white-space: nowrap; }
.radio-tekst { display: inline-block; padding-left: 100%; color: #d9cfc7; animation: rull 60s linear infinite; }
@keyframes rull { to { transform: translateX(-100%); } }

/* ---------- Toppmeny ---------- */
.toppmeny {
  display: flex; border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant);
  background: linear-gradient(#111013, #0a0a0c); overflow-x: auto;
}
.toppmeny button {
  flex: 1 0 auto; min-width: 96px; background: none; border: none; border-right: 1px solid #1c1416;
  color: var(--tekst); padding: 11px 6px 9px; cursor: pointer; font: inherit; text-align: center; transition: background 0.15s;
}
.toppmeny button:last-child { border-right: none; }
.toppmeny button:hover { background: #1a1013; }
.toppmeny button.aktiv { background: #1d0b0d; box-shadow: inset 0 -3px 0 var(--rod-lys), inset 0 -14px 18px -12px rgba(224, 38, 43, 0.5); }
.toppmeny .tittel { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 19px; letter-spacing: 1px; white-space: nowrap; line-height: 1.1; }
.toppmeny .under { display: block; font-size: 11px; color: var(--dempet); margin-top: 2px; white-space: nowrap; }
.under.klar, .klar { color: var(--gronn) !important; font-weight: 600; }
.under.ny, .ny { color: var(--gull) !important; font-weight: 600; }
.under.fare, .fare { color: var(--rod-lys) !important; font-weight: 600; }

/* ---------- Kolonner ---------- */
.ramme { display: grid; grid-template-columns: 200px minmax(0, 1fr) 232px; gap: 22px; padding: 22px 24px; }

.seksjon { margin-bottom: 22px; }
.seksjon-tittel {
  font-size: 21px; letter-spacing: 1.5px; color: #d9cfc6;
  border-bottom: 1px solid var(--kant-lys); padding-bottom: 6px; margin-bottom: 8px;
}
.seksjon-tittel::before { content: "▍"; color: var(--rod-lys); margin-right: 4px; }
.seksjon a { display: flex; justify-content: space-between; color: var(--tekst); padding: 4px 0; font-size: 13.5px; transition: color 0.15s, padding 0.15s; }
.seksjon a:hover { color: var(--rod-lys); padding-left: 4px; }
.seksjon .info { color: var(--dempet); font-size: 12.5px; padding: 3px 0; }
.teller { background: var(--rod-lys); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; line-height: 18px; box-shadow: 0 0 8px var(--neon); }

.kort-liten { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 1.6; }
.kort-liten .ikon { font-size: 30px; opacity: 0.85; filter: grayscale(0.4); }
.nyhet { font-size: 12.5px; padding: 7px 0; border-bottom: 1px dashed var(--kant-lys); line-height: 1.45; font-family: "Special Elite", monospace; }
.nyhet:last-child { border-bottom: none; }
.nyhet small { display: block; color: var(--dempet); font-size: 11px; font-family: "Inter", sans-serif; }

/* ---------- Innhold ---------- */
.innhold {
  background: linear-gradient(180deg, #121115 0%, #0c0c0f 100%);
  border: 1px solid var(--kant); border-top: 2px solid var(--rod);
  border-radius: 3px; padding: 24px; min-height: 320px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.panel { background: var(--panel); border: 1px solid var(--kant); border-radius: 4px; padding: 18px; }

.faner { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--kant); }
.faner button { background: none; border: none; color: var(--dempet); padding: 8px 14px; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; }
.faner button.aktiv { color: var(--tekst); border-bottom-color: var(--rod-lys); }

.rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.flis {
  background: linear-gradient(160deg, #18161b, #0f0e12); border: 1px solid var(--kant); border-radius: 3px; padding: 14px;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.flis:hover { border-color: var(--rod-lys); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(224, 38, 43, 0.15); }
.flis .flis-ikon { font-size: 22px; margin-bottom: 6px; filter: grayscale(0.3); }
.flis b { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: 1px; margin-bottom: 2px; }

.boks { background: var(--panel-lys); border: 1px solid var(--kant); border-radius: 3px; padding: 16px; margin: 12px 0; }
.boks.fare { border-color: var(--rod); background: linear-gradient(160deg, #1d0a0c, #120a0b); }
.to-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Meldinger og banner ---------- */
.melding { padding: 11px 15px; border-radius: 3px; margin-bottom: 14px; border: 1px solid; border-left-width: 4px; }
.melding.ok { background: #0f1d14; border-color: #2c5a3a; border-left-color: var(--gronn); color: #9be6b2; }
.melding.feil { background: #210b0d; border-color: #5a1f22; border-left-color: var(--rod-lys); color: #f5a0a0; }
.banner {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #1a0a0b; border: 1px solid var(--rod); padding: 12px 15px; border-radius: 3px; margin-bottom: 14px;
}
.banner.fengsel {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(0, 0, 0, 0.55) 34px 40px),
    linear-gradient(#1e1f24, #121317);
  border-color: #444;
}

/* ---------- Rader og tabeller ---------- */
.rad { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #1d1719; }
.rad:last-child { border-bottom: none; }
.rad small { color: var(--dempet); }
.rad .hoyre-del { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.vent { color: var(--gull); margin-bottom: 8px; }
.billig { color: var(--gronn); }
.dyr { color: var(--rod-lys); }

.stat { display: flex; justify-content: space-between; padding: 5px 0; }
.stat span:first-child { color: var(--dempet); }
.stat b { color: var(--gull); }
.stolpe { height: 6px; background: #000; border-radius: 3px; overflow: hidden; margin: 3px 0 8px; border: 1px solid #1d1719; }
.stolpe div { height: 100%; background: linear-gradient(90deg, #8a6a2a, var(--gull)); }
.stolpe.helse div { background: linear-gradient(90deg, #2a7a45, var(--gronn)); }
.stolpe.helse.lav div { background: linear-gradient(90deg, var(--blod), var(--rod-lys)); }
.stolpe.heat div { background: linear-gradient(90deg, #6b0a0d, var(--rod-lys)); box-shadow: 0 0 8px var(--neon); }

table.tabell { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabell th { text-align: left; color: var(--dempet); font-weight: 600; padding: 7px 6px; border-bottom: 1px solid var(--kant-lys); text-transform: uppercase; font-size: 11px; letter-spacing: 1px; }
.tabell td { padding: 7px 6px; border-bottom: 1px solid #1d1719; }
.tabell tr.her td { background: rgba(224, 38, 43, 0.08); }
.tabell-rull { overflow-x: auto; }

/* ---------- Knapper og felt ---------- */
button.knapp {
  background: linear-gradient(#a3161b, #7a0d11); color: #fff; border: 1px solid #b81d22; padding: 8px 15px;
  border-radius: 3px; cursor: pointer; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 17px; letter-spacing: 1.2px; padding-top: 7px;
  text-transform: uppercase; white-space: nowrap; transition: box-shadow 0.15s, filter 0.15s;
}
button.knapp:hover { box-shadow: 0 0 12px rgba(224, 38, 43, 0.6); filter: brightness(1.15); }
button.knapp.graa { background: linear-gradient(#2e2a2f, #1f1c20); border-color: #3e383f; }
button.knapp.graa:hover { box-shadow: 0 0 10px rgba(255, 255, 255, 0.08); }
button.knapp.gronn { background: linear-gradient(#2f7d48, #22603a); border-color: #3a9658; }
button.knapp.gronn:hover { box-shadow: 0 0 12px rgba(67, 176, 102, 0.5); }
button.knapp.gull { background: linear-gradient(#a7822f, #7d5f1e); border-color: #c49a3d; }
button.knapp:disabled { background: #1a181b; border-color: #262226; color: #554e52; cursor: not-allowed; box-shadow: none; filter: none; }
input.felt, textarea.felt, select.felt {
  background: #070708; border: 1px solid var(--kant-lys); color: var(--tekst);
  padding: 8px 10px; border-radius: 3px; font: inherit; width: 100px;
}
input.felt:focus, textarea.felt:focus { outline: none; border-color: var(--rod-lys); box-shadow: 0 0 8px rgba(224, 38, 43, 0.35); }
input.felt.bred, select.felt.bred { width: 190px; }
textarea.felt { width: 100%; min-height: 80px; resize: vertical; }
.skjema { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }

/* ---------- Oppdragsgiver ---------- */
.oppdrag-kort {
  display: flex; gap: 16px; background: linear-gradient(160deg, #1b1417, #0f0d10);
  border: 1px solid var(--kant); border-left: 3px solid var(--gull); border-radius: 3px; padding: 16px; margin: 14px 0;
}
.avatar {
  width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2a20, #0b0807);
  border: 2px solid var(--gull); display: flex; align-items: center; justify-content: center;
  font-family: "UnifrakturMaguntia", serif; font-size: 28px; color: var(--gull); flex-shrink: 0;
}
.sitat { margin: 4px 0 10px; color: #dcd2c8; }

/* ---------- Spesialisering ---------- */
.spes-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 12px 0; }
.spes-kort {
  display: flex; flex-direction: column; gap: 4px; background: linear-gradient(160deg, #18161b, #0e0d11);
  border: 1px solid var(--kant); border-radius: 3px; padding: 16px;
}
.spes-kort.valgt { border-color: var(--rod-lys); box-shadow: 0 0 18px rgba(224, 38, 43, 0.25); }
.spes-kort .spes-ikon { font-size: 30px; }
.spes-kort b { font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 26px; font-weight: 400; letter-spacing: 1px; }
.spes-kort small { color: var(--gull); }
.spes-kort p { color: var(--dempet); font-size: 13px; margin: 6px 0; flex: 1; }
.spes-kort button, .spes-kort .klar { align-self: flex-start; margin-top: 8px; }
ul.fordeler { margin: 6px 0; padding-left: 18px; font-size: 13px; }
ul.fordeler li { margin: 3px 0; }
ul.fordeler li::marker { color: var(--rod-lys); }

/* ---------- Medaljer ---------- */
.medaljer { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.medalje { text-align: center; background: var(--panel-lys); border: 1px solid var(--kant); border-radius: 3px; padding: 12px 6px; }
.medalje .ikon { font-size: 26px; }
.medalje b { display: block; font-size: 12px; margin-top: 4px; }
.medalje small { display: block; font-size: 11px; color: var(--dempet); margin-top: 2px; }
.medalje.laast { opacity: 0.35; filter: grayscale(1); }
.medalje:not(.laast) { border-color: #6d5420; box-shadow: inset 0 0 18px rgba(207, 166, 75, 0.12); }

/* ---------- Kart ---------- */
.kart-oppsett { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.kart { width: 100%; background: radial-gradient(circle at 40% 70%, #10181a, #050708); border: 1px solid #1c2a2c; border-radius: 3px; }
.kart .rutenett-linje { stroke: #12302c; stroke-width: 0.5; }
.kart .kyst { fill: #0a1614; stroke: #2fb38a; stroke-width: 1; filter: drop-shadow(0 0 3px rgba(47, 179, 138, 0.6)); }
.kart .by-prikk { fill: #2fb38a; cursor: pointer; }
.kart .by-prikk.kontroll { fill: var(--gull); }
.kart .by-prikk.her { fill: var(--rod-lys); }
.kart .ring { fill: none; stroke: var(--rod-lys); stroke-width: 1.5; animation: ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { from { transform: scale(0.5); opacity: 1; } to { transform: scale(3); opacity: 0; } }
.kart text { fill: #bfe9da; font-size: 9px; font-family: "Oswald", sans-serif; letter-spacing: 0.5px; cursor: pointer; }
.kart .sveip { transform-origin: 77px 256px; animation: sveip 5s linear infinite; }
@keyframes sveip { to { transform: rotate(360deg); } }

/* ---------- Kasino ---------- */
.hjul { font-size: 46px; letter-spacing: 10px; text-align: center; padding: 10px 0; min-height: 76px; }
.rulett-tall {
  width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 10px;
  display: flex; align-items: center; justify-content: center; font-family: "Oswald", sans-serif; font-size: 26px;
  border: 3px solid var(--gull); box-shadow: 0 0 14px rgba(207, 166, 75, 0.3);
}
.rulett-tall.rod { background: #a3201f; } .rulett-tall.svart { background: #0a0a0a; } .rulett-tall.gronn { background: #1d7a3b; }

/* ---------- Chat ---------- */
.chat-liste { height: 380px; overflow-y: auto; background: #050506; border: 1px solid var(--kant); border-radius: 3px; padding: 10px; margin-bottom: 10px; }
.chat-linje { padding: 4px 0; line-height: 1.45; word-wrap: break-word; }
.chat-linje small { color: var(--dempet); margin-right: 6px; }

/* ---------- Dødsskjerm ---------- */
.dodsskjerm {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(60, 0, 0, 0.85), rgba(0, 0, 0, 0.97));
  animation: blits 0.8s ease-out reverse;
}
.dod-boks { text-align: center; max-width: 440px; padding: 20px; }
.dod-boks p { color: #d9cfc7; font-family: "Special Elite", monospace; margin-bottom: 22px; }
.dod-tittel {
  font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 72px; color: var(--rod-lys);
  text-shadow: 0 0 20px var(--neon), 0 6px 0 var(--blod); position: relative;
}
.dod-tittel::after {
  content: ""; position: absolute; left: 30%; top: 82%; width: 6px; height: 40px; border-radius: 0 0 4px 4px;
  background: linear-gradient(var(--rod-lys), var(--blod)); animation: drypp 3s ease-in infinite;
}
@keyframes drypp { 0% { height: 0; opacity: 1; } 80% { height: 60px; opacity: 1; } 100% { height: 60px; opacity: 0; } }

/* ---------- Bunnlinje ---------- */
.bunnlinje {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; gap: 6px; align-items: center; padding: 6px 16px;
  background: linear-gradient(#0c0a0b, #000); border-top: 1px solid var(--blod); font-size: 13px;
}
.bunnlinje button {
  background: none; border: none; color: var(--tekst); font: inherit; font-weight: 600; cursor: pointer;
  padding: 6px 10px; border-radius: 3px; display: flex; gap: 6px; align-items: center;
}
.bunnlinje button:hover { background: #1a1013; }
.bunnlinje .mellomrom { flex: 1; }
.bunnlinje .rangmaler { width: 150px; display: flex; flex-direction: column; gap: 3px; margin-left: 10px; }
.bunnlinje .rangmaler .stolpe { margin: 0; width: 100%; }

/* ---------- Mobil ---------- */
@media (max-width: 1000px) {
  .ramme { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .midt { order: 1; }
  .venstre { order: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 18px; }
  .hoyre { order: 3; }
  .hode { flex-direction: column; align-items: flex-start; padding: 16px 16px 46px; }
  .logo.neon { font-size: 40px; }
  .hode-info { flex-wrap: wrap; gap: 14px; }
  .to-kol, .kart-oppsett { grid-template-columns: 1fr; }
  .rad { flex-wrap: wrap; }
  .bunnlinje .rangmaler, .bunnlinje .skjul-mobil { display: none; }
  .dod-tittel { font-size: 52px; }
}

/* =====================================================================
   IKONER (versjon 6)
   ===================================================================== */
.ikon { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex-shrink: 0; }
.flis .flis-ikon { color: var(--rod-lys); filter: drop-shadow(0 0 6px rgba(224, 38, 43, 0.45)); margin-bottom: 8px; }
.flis .flis-ikon .ikon { width: 30px; height: 30px; }
.flis:hover .flis-ikon { color: #ff5a5a; }
.kort-liten .kort-ikon { color: #6f6264; }
.kort-liten .kort-ikon .ikon { width: 36px; height: 36px; }
.avatar .ikon { width: 30px; height: 30px; }
.spes-kort .spes-ikon { color: var(--rod-lys); }
.spes-kort .spes-ikon .ikon { width: 38px; height: 38px; }
.medalje .medalje-ikon { color: var(--gull); }
.medalje .medalje-ikon .ikon { width: 32px; height: 32px; }
.medalje.laast .medalje-ikon { color: var(--dempet); }
.stor-ikon { color: var(--gull); margin-bottom: 10px; }
.stor-ikon .ikon { width: 64px; height: 64px; }
.hjul { display: flex; justify-content: center; gap: 10px; }
.hjul-rute {
  width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; color: var(--gull);
  background: linear-gradient(#0a0a0c, #1a1418 50%, #0a0a0c); border: 2px solid #6d5420; border-radius: 6px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 0 10px rgba(207, 166, 75, 0.15);
}
.hjul-rute .ikon { width: 46px; height: 46px; }
.vent .ikon, .banner .ikon, .boks .ikon { color: var(--rod-lys); }
.bunnlinje .ikon { color: var(--rod-lys); }
.prikk-forklaring { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: 0; }
.prikk-forklaring.rod { background: var(--rod-lys); }
.prikk-forklaring.gull { background: var(--gull); }
.prikk-forklaring.gronn { background: #2fb38a; }

/* =====================================================================
   VERSJON 9: hotell, utfordringer, børs, blackjack, guide
   ===================================================================== */
.banner.hotell { background: linear-gradient(90deg, #14161d, #1b1a24); border-color: #3b3f55; }
.utfordringer { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.utfordring { display: flex; align-items: center; gap: 14px; background: var(--panel-lys); border: 1px solid var(--kant); border-radius: 3px; padding: 10px 14px; }
.utfordring.ferdig { opacity: 0.55; }
.utf-tekst { flex: 1; }
.utf-tekst small { display: block; color: var(--dempet); margin: 2px 0 4px; }
.utf-tekst .stolpe { margin-bottom: 0; }
.aksje { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #1d1719; }
.aksje:last-child { border-bottom: none; }
.aksje-info b { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 20px; letter-spacing: 1px; font-weight: 400; }
.aksje-kurs { display: block; color: var(--gull); }
.aksje-info small { color: var(--dempet); }
.minigraf { width: 130px; height: 34px; }
.bord { background: radial-gradient(ellipse at center, #123422, #0a1a12); border-color: #1f4a32; }
.hand { margin: 10px 0; }
.hand small { color: #b9d6c4; }
.kortrad { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kortrad.tom { margin: 10px 0 14px; }
.spillkort {
  width: 56px; height: 80px; border-radius: 5px; background: #f3efe6; color: #111;
  display: flex; flex-direction: column; justify-content: space-between; padding: 5px 7px;
  font-family: Georgia, serif; font-size: 20px; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
.spillkort .farge { align-self: flex-end; font-size: 24px; }
.spillkort.rodt { color: #b3121a; }
.spillkort.bakside {
  background: repeating-linear-gradient(45deg, #7a0d11 0 6px, #5c0709 6px 12px);
  border: 3px solid #f3efe6;
}
.guide-del { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #1d1719; }
.guide-del:last-of-type { border-bottom: none; }
.guide-del h3 { margin: 0 0 4px; }
.guide-del p { margin: 0; color: #cfc6be; }
.guide-ikon { color: var(--rod-lys); flex-shrink: 0; }
.guide-ikon .ikon { width: 34px; height: 34px; }
h3 .ikon { color: var(--rod-lys); }
@media (max-width: 1000px) {
  .aksje { grid-template-columns: 1fr; }
  .utfordring { flex-wrap: wrap; }
}

/* Versjon 10: små detaljer */
i.detalj { color: #a99d93; font-family: "Special Elite", monospace; font-style: normal; font-size: 12px; }
.nowrap { white-space: nowrap; }
.kart-oppsett { grid-template-columns: 260px minmax(0, 1fr); }
.stolpe.energi div { background: linear-gradient(90deg, #2a5a9a, #4a8fe0); }

/* Versjon 13: forum */
.innlegg { background: var(--panel-lys); border: 1px solid var(--kant); border-radius: 3px; padding: 12px 14px; margin: 10px 0; line-height: 1.5; }
.innlegg-hode { margin-bottom: 6px; }

/* ---------- Versjon 14: Keno, terninger og meny ---------- */
.toppmeny { flex-wrap: wrap; }
.toppmeny button { min-width: 88px; }
@media (max-width: 1000px) { .toppmeny { flex-wrap: nowrap; } }

.keno-brett { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 10px 0; max-width: 560px; }
.keno-tall {
  aspect-ratio: 1; border: 1px solid var(--kant); background: #121014; color: var(--tekst); border-radius: 50%;
  font: 600 14px "Oswald", sans-serif; cursor: pointer; padding: 0; transition: transform 0.1s, background 0.15s;
}
.keno-tall:hover { border-color: var(--gull); transform: scale(1.08); }
.keno-tall.valgt { border: 2px solid var(--gull); color: var(--gull); }
.keno-tall.trukket { background: #4a1416; }
.keno-tall.treff { background: var(--gull); color: #111; box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }

.terning-bord { display: flex; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.terning-bord small { display: block; color: var(--dempet); margin-bottom: 6px; }
.terning-vis {
  display: inline-grid; grid-template-columns: repeat(3, 1fr); width: 46px; height: 46px; padding: 6px; gap: 2px; margin: 0 3px;
  background: #ece6dc; border-radius: 8px; box-shadow: inset 0 -3px 0 #b9ae9c;
}
.terning-vis i { border-radius: 50%; }
.terning-vis i.p { background: #8b0f12; }

/* ---------- Versjon 15: Historien ---------- */
.hist-kapitler { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0; }
.hist-kapchip {
  border: 1px solid var(--kant); background: var(--panel); padding: 8px 8px 7px; border-radius: 3px; position: relative; min-width: 0;
}
.hist-kapchip span { display: block; font-family: "Oswald", sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dempet); }
.hist-kapchip b { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-kapchip small { color: var(--dempet); font-size: 11px; white-space: nowrap; }
.hist-kapchip small .ikon { width: 11px; height: 11px; vertical-align: -1px; }
.hist-kapchip.ferdig { border-color: #2b3a2f; }
.hist-kapchip.ferdig b { color: var(--gronn); }
.hist-kapchip.aktiv { border-color: var(--gull); box-shadow: 0 0 14px rgba(207, 166, 75, 0.18); background: #17130c; }
.hist-kapchip.aktiv b { color: var(--gull); }
.hist-kapchip.laast { opacity: 0.55; }

.hist-kort {
  background: linear-gradient(180deg, #121014, #0b0a0c); border: 1px solid var(--kant); border-top: 2px solid var(--gull);
  border-radius: 3px; padding: 20px 22px; margin: 12px 0 18px; scroll-margin-top: 12px;
}
.hist-tittelkort { text-align: center; padding: 10px 0 18px; margin-bottom: 14px; border-bottom: 1px solid var(--kant); }
.hist-tittelkort small { color: var(--gull); font-family: "Oswald", sans-serif; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; }
.hist-tittelkort h2 { margin: 6px 0 8px; font-size: 40px; }
.hist-tittelkort h2::after { margin-left: auto; margin-right: auto; }
.hist-tittelkort p { color: #cfc6bd; font-family: "Special Elite", monospace; max-width: 560px; margin: 0 auto; line-height: 1.6; }
.hist-sted { font-family: "Special Elite", monospace; color: var(--gull); font-size: 13px; margin-bottom: 14px; letter-spacing: 0.5px; }
.hist-sted .ikon { width: 14px; height: 14px; vertical-align: -2px; }

.hist-linjer { display: flex; flex-direction: column; gap: 12px; }
.hist-forteller { margin: 0; color: #c9c0b7; font-style: italic; line-height: 1.65; font-size: 15px; }
.hist-replikk { display: flex; gap: 12px; align-items: flex-start; }
.hist-replikk.du { justify-content: flex-end; }
.hist-avatar {
  flex: 0 0 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rod); background: radial-gradient(circle, #2a0c0e, #0c0809);
  display: flex; align-items: center; justify-content: center; color: var(--rod-lys); box-shadow: 0 0 10px rgba(224, 38, 43, 0.25);
}
.hist-avatar .ikon { width: 22px; height: 22px; }
.hist-boble {
  background: var(--panel-lys); border: 1px solid var(--kant-lys); border-radius: 3px 12px 12px 12px; padding: 9px 13px;
  line-height: 1.55; font-size: 15px; max-width: 82%;
}
.hist-boble small { display: block; color: var(--rod-lys); font-family: "Oswald", sans-serif; letter-spacing: 1px; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; }
.hist-replikk.du .hist-boble { background: #17130c; border-color: #4a3a1a; border-radius: 12px 3px 12px 12px; }
.hist-replikk.du .hist-boble small { color: var(--gull); text-align: right; }

.hist-valgliste { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.hist-valg {
  text-align: left; background: #0c0a0b; border: 1px solid var(--kant-lys); border-left: 3px solid var(--rod-lys); color: var(--tekst);
  padding: 11px 14px; font: 15px "Inter", sans-serif; cursor: pointer; border-radius: 2px; transition: background 0.15s, transform 0.1s;
}
.hist-valg:hover:not(:disabled) { background: #1d0b0d; transform: translateX(3px); }
.hist-valg:disabled { opacity: 0.45; cursor: not-allowed; border-left-color: #444; }
.hist-valg small { display: block; color: var(--dempet); font-size: 12px; margin-top: 3px; }
.hist-valg small .ikon { width: 12px; height: 12px; vertical-align: -1px; }

.hist-mal { margin-top: 20px; border: 1px dashed var(--kant-lys); padding: 12px 14px; border-radius: 3px; background: #0d0b0c; }
.hist-mal.ferdig { border-color: var(--gronn); border-style: solid; }
.hist-mal-tittel { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hist-mal-tittel > span { margin-left: auto; color: var(--dempet); }
.hist-mal-tittel .ikon { color: var(--gull); }
.hist-videre { margin-top: 20px; text-align: right; }
.hist-belonning { margin-top: 22px; text-align: center; border-top: 1px solid var(--kant); padding-top: 16px; }
.hist-kap-slutt { font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 28px; color: var(--gull); }
.hist-sjekk { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 2px; margin-bottom: 12px; }
.hist-sjekk.ok { color: var(--gronn); border: 1px solid #2b3a2f; }
.hist-sjekk.feil { color: var(--rod-lys); border: 1px solid var(--rod); }
.hist-sjekk .ikon { width: 13px; height: 13px; vertical-align: -2px; }
.hist-mini { color: var(--rod-lys); }
.hist-mini .ikon { width: 16px; height: 16px; vertical-align: -3px; }
.hist-tittel-merke { color: var(--gull); font-family: "Oswald", sans-serif; letter-spacing: 1px; margin: -6px 0 10px; }

/* Nye scener toner fram linje for linje */
.ny-scene .hist-linjer > * { opacity: 0; animation: histInn 0.5s ease forwards; }
.ny-scene .hist-linjer > *:nth-child(1) { animation-delay: 0.05s; }
.ny-scene .hist-linjer > *:nth-child(2) { animation-delay: 0.35s; }
.ny-scene .hist-linjer > *:nth-child(3) { animation-delay: 0.65s; }
.ny-scene .hist-linjer > *:nth-child(4) { animation-delay: 0.95s; }
.ny-scene .hist-linjer > *:nth-child(5) { animation-delay: 1.25s; }
.ny-scene .hist-linjer > *:nth-child(6) { animation-delay: 1.55s; }
.ny-scene .hist-linjer > *:nth-child(n+7) { animation-delay: 1.85s; }
@keyframes histInn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hist-hjem {
  display: flex; align-items: center; gap: 14px; cursor: pointer; margin: 14px 0; padding: 14px 16px;
  border: 1px solid #4a3a1a; border-left: 3px solid var(--gull); background: linear-gradient(90deg, #17130c, #0e0d10); border-radius: 3px;
}
.hist-hjem:hover { border-color: var(--gull); }
.hist-hjem > div:nth-child(2) { flex: 1; }
.hist-hjem small { display: block; color: var(--gull); font-family: "Oswald", sans-serif; letter-spacing: 2px; text-transform: uppercase; font-size: 11px; }
.hist-hjem b { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 24px; font-weight: 400; }
.hist-hjem-ikon { color: var(--gull); }
.hist-hjem-ikon .ikon { width: 34px; height: 34px; }

@media (max-width: 700px) {
  .hist-kapitler { grid-template-columns: repeat(3, 1fr); }
  .hist-kort { padding: 16px 14px; }
  .hist-tittelkort h2 { font-size: 32px; }
  .hist-boble { max-width: 100%; }
  .hist-hjem { flex-wrap: wrap; }
}

/* ---------- Versjon 16: popups og telefon ---------- */
.popup-lag {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: radial-gradient(circle at center, rgba(20, 6, 8, 0.75), rgba(0, 0, 0, 0.92)); backdrop-filter: blur(3px);
  animation: popupInn 0.25s ease;
}
.popup-lag.skjult { display: none; }
.popup-lag.rod { background: radial-gradient(circle at center, rgba(70, 4, 8, 0.7), rgba(10, 0, 0, 0.95)); }
.popup-lag.fengsel { background: rgba(4, 6, 10, 0.92); }
@keyframes popupInn { from { opacity: 0; } to { opacity: 1; } }

.popup-boks {
  position: relative; z-index: 2; width: 100%; max-width: 440px; text-align: center; padding: 26px 24px 20px;
  background: linear-gradient(180deg, #151217, #0b0a0c); border: 1px solid var(--kant-lys); border-top: 3px solid var(--dempet);
  border-radius: 4px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9); animation: boksInn 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes boksInn { from { transform: scale(0.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.rod .popup-boks { border-top-color: var(--rod-lys); box-shadow: 0 0 60px rgba(224, 38, 43, 0.35), 0 30px 80px rgba(0, 0, 0, 0.9); }
.gull .popup-boks { border-top-color: var(--gull); box-shadow: 0 0 60px rgba(207, 166, 75, 0.3), 0 30px 80px rgba(0, 0, 0, 0.9); }
.gronn .popup-boks { border-top-color: var(--gronn); }
.fengsel .popup-boks { border-top-color: #4a8fe0; }

.popup-ikon {
  width: 74px; height: 74px; margin: -60px auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #0b0a0c; border: 2px solid var(--dempet); color: var(--tekst);
}
.popup-ikon .ikon { width: 38px; height: 38px; }
.rod .popup-ikon { border-color: var(--rod-lys); color: var(--rod-lys); box-shadow: 0 0 24px rgba(224, 38, 43, 0.6); animation: puls 1s infinite; }
.gull .popup-ikon { border-color: var(--gull); color: var(--gull); box-shadow: 0 0 24px rgba(207, 166, 75, 0.5); }
.gronn .popup-ikon { border-color: var(--gronn); color: var(--gronn); }
.fengsel .popup-ikon { border-color: #4a8fe0; color: #4a8fe0; box-shadow: 0 0 24px rgba(74, 143, 224, 0.5); }
@keyframes puls { 50% { box-shadow: 0 0 40px rgba(224, 38, 43, 0.9); } }
.popup-merke { font-family: "Oswald", sans-serif; letter-spacing: 3px; text-transform: uppercase; font-size: 12px; color: var(--dempet); }
.popup-tittel { font-size: 34px; margin: 6px 0 10px; }
.popup-tittel::after { margin-left: auto; margin-right: auto; }
.rod .popup-tittel { color: #ff4a4a; text-shadow: 0 0 18px rgba(224, 38, 43, 0.6); }
.gull .popup-tittel { color: var(--gull); }
.popup-tekst { font-family: "Special Elite", monospace; color: #d9cfc7; line-height: 1.6; margin: 0 0 6px; }
.popup-tid { color: var(--dempet); font-size: 12px; margin-bottom: 16px; }
.popup-knapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Fengselsgitter som faller ned */
.gitter {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 54px, #2a2f38 54px 62px, #4a525e 62px 64px, transparent 64px 118px);
  animation: gitterNed 0.6s cubic-bezier(.5, 0, .7, 1.3) both; opacity: 0.85;
}
@keyframes gitterNed { from { transform: translateY(-100%); } to { transform: none; } }

/* Kulehull i skjermen */
.kulehull {
  position: absolute; z-index: 1; width: 70px; height: 70px; pointer-events: none; animation: hullInn 0.15s ease both;
  background:
    radial-gradient(circle, #000 0 6px, #2a2a2a 7px, transparent 10px),
    linear-gradient(20deg, transparent 48%, rgba(255,255,255,0.35) 49%, transparent 51%),
    linear-gradient(100deg, transparent 48%, rgba(255,255,255,0.3) 49%, transparent 51%),
    linear-gradient(160deg, transparent 48%, rgba(255,255,255,0.25) 49%, transparent 51%);
  border-radius: 50%;
}
.kulehull:nth-of-type(2) { animation-delay: 0.12s; }
.kulehull:nth-of-type(3) { animation-delay: 0.24s; }
@keyframes hullInn { from { opacity: 0; transform: scale(1.6); } }

body.skjelv .brett { animation: skjelv 0.5s; }
@keyframes skjelv {
  10%, 50%, 90% { transform: translate(-6px, 3px); }
  30%, 70% { transform: translate(6px, -3px); }
}

/* SMS-varsler nede i hjørnet */
.sms-stabel { position: fixed; right: 16px; bottom: 64px; z-index: 300; display: flex; flex-direction: column; gap: 8px; width: 320px; max-width: calc(100vw - 32px); }
.sms-varsel {
  background: rgba(30, 30, 34, 0.96); border: 1px solid #3a3a42; border-radius: 16px; padding: 10px 14px 12px; cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); animation: smsInn 0.35s cubic-bezier(.2, 1.2, .4, 1);
  font-family: "Inter", sans-serif; transition: opacity 0.4s, transform 0.4s;
}
.sms-varsel.ut { opacity: 0; transform: translateX(40px); }
@keyframes smsInn { from { transform: translateX(110%); opacity: 0; } to { transform: none; opacity: 1; } }
.sms-topp { display: flex; align-items: center; gap: 6px; color: #9a9aa5; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.sms-topp .ikon { width: 14px; height: 14px; color: #43c06a; }
.sms-tid { margin-left: auto; text-transform: none; }
.sms-fra { font-weight: 600; margin-top: 4px; color: #fff; }
.sms-tekst { color: #d8d8de; font-size: 13px; line-height: 1.4; margin-top: 1px; }

/* Telefonsiden */
.mobil { display: flex; justify-content: center; margin: 10px 0; }
.mobil-skjerm {
  width: 360px; max-width: 100%; min-height: 560px; background: #0d0d10; border: 10px solid #1c1c20; border-radius: 34px;
  box-shadow: 0 0 0 1px #34343a, 0 20px 50px rgba(0, 0, 0, 0.8); overflow: hidden; font-family: "Inter", sans-serif;
}
.mobil-status { display: flex; justify-content: space-between; align-items: center; padding: 8px 18px 4px; font-size: 12px; color: #ddd; }
.batteri { display: inline-block; width: 24px; height: 11px; border: 1px solid #aaa; border-radius: 3px; padding: 1px; }
.batteri i { display: block; height: 100%; background: #43c06a; border-radius: 1px; }
.mobil-hode { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 10px 14px; border-bottom: 1px solid #222; }
.mobil-hode b { text-align: center; font-size: 16px; }
.mobil-hode a { color: #4a9fff; cursor: pointer; }
.mobil-rad { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1a1a1e; cursor: pointer; }
.mobil-rad:hover { background: #17171b; }
.mobil-avatar {
  flex: 0 0 40px; height: 40px; border-radius: 50%; background: linear-gradient(#6b6b75, #4a4a52); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.mobil-avatar.spiller { background: linear-gradient(var(--rod-lys), var(--rod)); }
.mobil-midt { flex: 1; min-width: 0; }
.mobil-midt b { display: block; font-size: 14px; }
.mobil-midt span { display: block; color: #9a9aa5; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobil-rad small { color: #77777f; font-size: 11px; align-self: flex-start; margin-top: 3px; }
.mobil-traad { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.mobil-boble {
  align-self: flex-start; max-width: 85%; background: #26262c; color: #eee; padding: 8px 12px; border-radius: 16px 16px 16px 4px;
  font-size: 14px; line-height: 1.4;
}
.mobil-boble small { display: block; color: #8a8a92; font-size: 10px; margin-top: 3px; }
.mobil-svar { padding: 10px 14px 16px; text-align: center; }
@media (max-width: 520px) {
  .bunnlinje .bunn-tekst { display: none; }
  .bunnlinje button .ikon { width: 22px; height: 22px; }
  .bunnlinje { justify-content: space-around; }
  .sms-stabel { bottom: 70px; right: 10px; left: 10px; width: auto; }
}

/* ---------- Versjon 17: lydinnstillinger ---------- */
.volum { width: 220px; accent-color: var(--rod-lys); }
.lydprove { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lydprove .knapp { padding: 6px 10px; font-size: 14px; }

/* =====================================================================
   VERSJON 20 – ryddigere oppsett: grupperte menyer, én kolonne
   ===================================================================== */
.ramme { display: block; max-width: 1000px; margin: 0 auto; padding: 22px 24px 40px; }

/* Toppen */
.hode { padding: 22px 28px 44px; }
.hode-info { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hode-stat { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--dempet); white-space: nowrap; }
.hode-stat b { color: var(--tekst); font-size: 15px; font-weight: 600; }
.hode-stat b.penger { color: var(--gull); }
.hode-stat.stolpe-stat { width: 120px; }
.hode-stat.stolpe-stat b { font-size: 12px; }
.hode-stat .stolpe { margin: 0; height: 5px; }

/* Menyen */
.toppmeny { display: flex; flex-wrap: nowrap; overflow: visible; position: relative; z-index: 150; }
.menygruppe { position: relative; flex: 1 1 0; min-width: 0; border-right: 1px solid #1c1416; }
.menygruppe:last-child { border-right: none; }
.menyknapp {
  width: 100%; background: none; border: none; color: var(--tekst); padding: 11px 6px 9px; cursor: pointer;
  font: inherit; text-align: center; transition: background 0.15s;
}
.menyknapp:hover, .menygruppe.apen .menyknapp { background: #1a1013; }
.menygruppe.aktiv .menyknapp { background: #1d0b0d; box-shadow: inset 0 -3px 0 var(--rod-lys), inset 0 -14px 18px -12px rgba(224, 38, 43, 0.5); }
.menyknapp .tittel { display: block; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 19px; letter-spacing: 1px; white-space: nowrap; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.menyknapp .pil { font-size: 11px; color: var(--dempet); }
.menyknapp .under { display: block; font-size: 11px; color: var(--dempet); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nedtrekk {
  display: none; position: absolute; top: 100%; left: 0; min-width: 250px; z-index: 200;
  background: #0d0b0d; border: 1px solid var(--kant-lys); border-top: 2px solid var(--rod-lys);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85); padding: 6px 0;
}
.menygruppe:nth-last-child(-n+3) .nedtrekk { left: auto; right: 0; }
.menygruppe.apen .nedtrekk { display: block; }
@media (hover: hover) and (min-width: 1001px) {
  .menygruppe:hover .nedtrekk { display: block; }
}
.nedtrekk a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 8px 16px;
  color: var(--tekst); font-size: 14px; cursor: pointer; white-space: nowrap;
}
.nedtrekk a:hover { background: #1d0b0d; color: #fff; }
.nedtrekk a.aktiv { color: var(--rod-lys); }
.nedtrekk a .under { font-size: 11.5px; color: var(--dempet); margin: 0; }
.meny-info { padding: 8px 16px 10px; border-bottom: 1px solid var(--kant); margin-bottom: 4px; font-size: 12.5px; }
.meny-info div { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; color: var(--dempet); }
.meny-info b { color: var(--tekst); font-weight: 600; text-align: right; }

/* Hjem: «Klar nå» */
.handlinger { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.handling {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; cursor: pointer; text-align: left;
  background: var(--panel-lys); border: 1px solid var(--kant); border-radius: 3px; color: var(--tekst); font: inherit;
  transition: border-color 0.15s, transform 0.1s;
}
.handling .ikon { color: var(--dempet); width: 20px; height: 20px; }
.handling span { font-weight: 600; font-size: 14px; }
.handling small { color: var(--dempet); font-size: 12px; }
.handling.klar { border-color: #2b5a3a; background: linear-gradient(160deg, #0f1a12, #101012); }
.handling.klar .ikon, .handling.klar small { color: var(--gronn); }
.handling:hover:not(:disabled) { border-color: var(--rod-lys); transform: translateY(-1px); }
.handling:disabled { opacity: 0.45; cursor: not-allowed; }
.snart { margin: 4px 0 18px; }
.snart summary { cursor: pointer; color: var(--dempet); font-size: 13px; padding: 4px 0; }
.snart .handling { opacity: 0.8; }
.liten-boks { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Mobil */
@media (max-width: 1000px) {
  .ramme { padding: 14px; }
  .hode-info { justify-content: flex-start; gap: 14px 18px; }
  .hode-stat.stolpe-stat { width: 100px; }
  .toppmeny { flex-wrap: wrap; overflow: visible; }
  .menygruppe { position: static; flex: 1 1 25%; border-bottom: 1px solid #1c1416; }
  .menyknapp .tittel { font-size: 17px; }
  .nedtrekk { left: 8px !important; right: 8px !important; min-width: 0; }
  .nedtrekk a { padding: 11px 16px; font-size: 15px; }
}
.toppmeny .menyknapp { flex: none; min-width: 0; border-right: none; }
@media (max-width: 1000px) {
  .menygruppe { flex: 1 1 33.33%; max-width: 33.34%; }
  .menyknapp .tittel { font-size: 16px; }
}

/* =====================================================================
   VERSJON 21 – tre kolonner med paneler (som Mafiaens Hevn)
   ===================================================================== */
.brett { max-width: 1240px; }

/* Smal topplinje: logo – politiradio – deg */
.topplinje {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: 12px 22px 18px; background: linear-gradient(to bottom, #08080a, #1a0507);
  border-bottom: 1px solid var(--blod); overflow: hidden;
}
.topplinje .logo.neon { font-size: 40px; position: relative; z-index: 1; }
.topplinje .skyline { height: 26px; opacity: 0.9; }
.topplinje .radio { position: relative; z-index: 1; border: 1px solid #2a1416; border-radius: 3px; height: 30px; background: rgba(0, 0, 0, 0.6); }
.topp-bruker { position: relative; z-index: 1; }
.topp-navn { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.topp-navn .avatar-liten { width: 42px; height: 42px; font-size: 24px; }
.topp-navn b { display: block; font-size: 15px; }
.topp-navn small { color: var(--dempet); font-size: 12px; }
.topp-navn:hover b { color: var(--rod-lys); }

/* Kolonnene */
.ramme { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 16px; max-width: none; padding: 16px 16px 40px; align-items: start; }
.sidepanel {
  background: rgba(14, 12, 15, 0.92); border: 1px solid var(--kant); border-radius: 3px; position: sticky; top: 12px;
  max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin;
}
.panel-tittel {
  font-family: "Oswald", sans-serif; font-size: 17px; letter-spacing: 1px; padding: 10px 14px;
  border-bottom: 1px solid var(--kant); background: linear-gradient(#1a1114, #110c0e); color: #eee;
}
.lenker { list-style: none; margin: 0; padding: 6px 0; border-bottom: 1px solid #22171a; }
.lenker:last-child { border-bottom: none; }
.lenker a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 14px 3px 24px; position: relative;
  color: #e4ddd6; font-size: 13.5px; cursor: pointer; line-height: 1.55;
}
.lenker a::before { content: "▸"; position: absolute; left: 12px; color: var(--rod-lys); font-size: 10px; top: 5px; }
.lenker a:hover { background: #1d0b0d; color: #fff; }
.lenker a.aktiv { color: var(--rod-lys); background: #1a0a0c; }
.lenker .under { font-size: 12px; color: var(--dempet); white-space: nowrap; }
.lenker .under.klar { color: var(--gronn); font-weight: 600; }

/* Tallene dine i høyre panel */
.mine-tall { padding: 8px 0 6px; border-bottom: 1px solid #22171a; }
.tall-rad { display: flex; gap: 10px; align-items: flex-start; padding: 4px 14px; cursor: pointer; }
.tall-rad:hover { background: #160c0e; }
.tall-ikon { color: var(--rod-lys); padding-top: 2px; }
.tall-ikon .ikon { width: 16px; height: 16px; }
.tall-rad small { display: block; color: var(--dempet); font-size: 12px; line-height: 1.3; }
.tall-rad b { font-size: 13.5px; font-weight: 600; }
.tall-rad .penger { color: var(--gull); }

/* Hovedkvarteret */
.hk-topp { position: relative; border: 1px solid var(--kant-lys); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.hk-bilde { display: block; width: 100%; height: 200px; }
.hk-overskrift {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 44px;
  color: #fff; text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.9);
}
.hk-sentrert { text-align: center; }
.hk-knapprad { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 14px; }
.hk-rutenett { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; }
.hk-panel { border: 1px solid var(--kant); border-radius: 3px; background: #0f0d10; margin-bottom: 14px; }
.hk-tittel { font-family: "Oswald", sans-serif; font-size: 16px; letter-spacing: 0.5px; padding: 9px 14px; border-bottom: 1px solid var(--kant); background: #141013; }
.hk-innhold { padding: 12px 14px; }
.hk-hoy .hk-innhold { padding: 0; }
.hk-rangbar { position: relative; height: 34px; background: #050405; border: 1px solid #2a2024; border-radius: 4px; overflow: hidden; }
.hk-rangbar div { height: 100%; background: linear-gradient(90deg, #6b0a0d, var(--rod-lys)); box-shadow: 0 0 12px var(--neon); }
.hk-rangbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; text-shadow: 0 1px 2px #000; }
.hk-panel p { margin: 8px 0 0; font-size: 13px; }
.hk-liste { list-style: none; margin: 0; padding: 0; }
.hk-liste li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #1d1719; font-size: 14px; }
.hk-liste li:last-child { border-bottom: none; }
.hk-oppgave { margin-bottom: 10px; }
.hk-oppgave:last-child { margin-bottom: 0; }
.hk-oppgave-topp { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.hk-oppgave-topp .knapp { padding: 3px 10px; font-size: 13px; }
.hk-oppgave .stolpe { margin: 0; height: 8px; }
.hk-faner { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--kant); }
.hk-faner button { background: #130f12; border: none; border-right: 1px solid var(--kant); color: var(--dempet); padding: 10px; cursor: pointer; position: relative; }
.hk-faner button:last-child { border-right: none; }
.hk-faner button.aktiv { background: #2a0c10; color: #fff; }
.hk-faner .ikon { width: 18px; height: 18px; }
.hk-faner .teller { position: absolute; top: 4px; right: 10px; }
.hk-hendelser { max-height: 520px; overflow-y: auto; scrollbar-width: thin; }
.hk-hendelse { padding: 10px 14px; border-bottom: 1px solid #1d1719; font-size: 14px; line-height: 1.45; }
.hk-hendelse small { display: block; color: var(--dempet); font-size: 12px; margin-top: 2px; }

/* Bunnlinjen trengs bare på mobil */
@media (min-width: 1001px) {
  .bunnlinje { display: none; }
  body.spillside { padding-bottom: 0; }
}

/* Mobil: sidepanelene blir skuffer som glir inn */
.skuff-bakgrunn { display: none; }
@media (max-width: 1000px) {
  .topplinje { grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px 14px; }
  .topplinje .logo.neon { font-size: 30px; }
  .topplinje .radio { grid-column: 1 / -1; order: 3; }
  .ramme { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .sidepanel {
    position: fixed; top: 0; bottom: 0; width: 280px; max-height: none; z-index: 260; border-radius: 0;
    transition: transform 0.25s ease; background: #0d0b0e;
  }
  .sidepanel.venstre { left: 0; transform: translateX(-105%); }
  .sidepanel.hoyre { right: 0; transform: translateX(105%); }
  body.vis-venstre .sidepanel.venstre, body.vis-hoyre .sidepanel.hoyre { transform: none; box-shadow: 0 0 40px #000; }
  body.vis-venstre .skuff-bakgrunn, body.vis-hoyre .skuff-bakgrunn { display: block; position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, 0.6); }
  .lenker a { padding: 7px 16px 7px 26px; font-size: 15px; }
  .hk-rutenett { grid-template-columns: minmax(0, 1fr); }
  .hk-bilde { height: 150px; }
  .hk-overskrift { font-size: 34px; }
  .bunnlinje { justify-content: space-around; }
}
@media (max-width: 520px) {
  .bunnlinje .bunn-tekst { display: inline; font-size: 10px; }
  .bunnlinje button { flex-direction: column; display: flex; align-items: center; gap: 2px; padding: 6px 4px; position: relative; }
  .bunnlinje .teller { position: absolute; top: 0; right: 0; }
}
@media (min-width: 1001px) { .sms-stabel { bottom: 16px; } }
.hk-overskrift { left: 26px; right: auto; top: 18px; bottom: auto; text-align: left; font-size: 46px; }
@media (max-width: 1000px) { .hk-overskrift { left: 16px; top: 10px; font-size: 32px; } }

/* ===================== Versjon 22: oppdragslinje og gangster-preg ===================== */
.oppdragslinje {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(207,166,75,.16), rgba(14,14,17,.9) 60%);
  border: 1px solid rgba(207,166,75,.45); border-left: 4px solid var(--gull);
  font-size: 14px;
}
.oppdragslinje .ol-kap { font-family: "Bebas Neue", "Oswald", sans-serif; letter-spacing: 1.5px; font-size: 17px; color: var(--gull); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.oppdragslinje .ol-tekst { flex: 1; min-width: 180px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oppdragslinje .ol-tall { background: #000; border: 1px solid var(--kant-lys); border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--gull); }
.oppdragslinje .knapp { margin: 0; padding: 6px 12px; font-size: 13px; }
.oppdragslinje.klar { border-color: var(--gull); box-shadow: 0 0 14px rgba(207,166,75,.25); animation: olPuls 2.4s ease-in-out infinite; }
.oppdragslinje.laast { background: rgba(14,14,17,.9); border-color: var(--kant-lys); border-left-color: var(--dempet); color: var(--dempet); }
.oppdragslinje.laast .ol-kap { color: var(--dempet); }
@keyframes olPuls { 50% { box-shadow: 0 0 22px rgba(207,166,75,.45); } }

/* Gullkant og tyngre skrift på Hovedkvarteret */
.hk-topp { border-bottom: 2px solid var(--gull); }
.hk-overskrift { font-family: "UnifrakturMaguntia", serif !important; color: var(--gull) !important; text-shadow: 0 2px 0 #000, 0 0 18px rgba(0,0,0,.9) !important; }
.hk-tittel { font-family: "Bebas Neue", "Oswald", sans-serif; letter-spacing: 2px; color: var(--gull); }
@media (max-width: 700px) {
  .oppdragslinje { gap: 8px; padding: 8px 10px; }
  .oppdragslinje .ol-tekst { min-width: 0; flex-basis: 100%; order: 2; }
  .oppdragslinje .knapp { order: 3; }
}
@media (max-width: 700px) {
  .hk-overskrift { top: auto !important; bottom: 8px !important; left: 12px !important; font-size: 28px !important; }
}

/* =====================================================================
   VERSJON 23 – oppsett som Mafiaspillet
   Logo og tall øverst, mest brukte i menyen, resten på sidene, fast bunnlinje
   ===================================================================== */
body.spillside {
  background-color: #0a0708;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(150, 14, 20, 0.28), transparent 55%),
    linear-gradient(rgba(6, 4, 6, 0.55), rgba(6, 4, 6, 0.72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%23070505'/%3E%3Cg fill='%232b1414'%3E%3Crect x='2' y='2' width='44' height='20' rx='1'/%3E%3Crect x='50' y='2' width='44' height='20' rx='1' fill='%23331817'/%3E%3Crect x='-22' y='26' width='44' height='20' rx='1' fill='%23261212'/%3E%3Crect x='26' y='26' width='44' height='20' rx='1'/%3E%3Crect x='74' y='26' width='44' height='20' rx='1' fill='%23261212'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  padding-bottom: 52px;
}
.brett { max-width: 1180px; margin: 0 auto; background: none; border: none; box-shadow: none; min-height: 0; padding: 0 0 20px; }

/* Toppen */
.hode {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 28px 10px 18px; background: none; overflow: visible;
}
.hode .logo.neon { font-size: 66px; white-space: nowrap; }
.hode-meg { display: flex; gap: 22px; align-items: flex-start; font-size: 13px; line-height: 1.6; position: relative; z-index: 1; }
.hm-avatar {
  width: 54px; height: 54px; flex-shrink: 0; border: 1px solid var(--kant-lys); border-radius: 3px; background: #000; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-family: "UnifrakturMaguntia", serif; font-size: 32px; color: var(--rod-lys);
  box-shadow: 0 0 14px rgba(224, 38, 43, 0.35);
}
.hm-kol { min-width: 150px; }
.hm-navn { font-weight: 600; color: #fff; cursor: pointer; }
.hm-navn:hover { color: var(--rod-lys); }
.hm-rad { white-space: nowrap; cursor: pointer; }
.hm-rad span { color: var(--gull); font-weight: 600; }
.hm-rad b { font-weight: 500; color: #ece6df; }
.hm-rad:hover b { color: #fff; text-decoration: underline; }
.hm-rad .fare { color: var(--rod-lys); }

/* Menyen øverst */
.toppnav {
  display: flex; background: linear-gradient(#141114, #0b090b); border: 1px solid var(--kant);
  border-bottom: 2px solid var(--rod); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.toppnav a {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 11px 4px 8px; cursor: pointer;
  border-right: 1px solid #221a1c; color: #eee; transition: background 0.15s;
}
.toppnav a:last-child { border-right: none; }
.toppnav a:hover { background: #1f0c0f; }
.toppnav a.aktiv { background: linear-gradient(#2c0b0f, #180709); box-shadow: inset 0 -3px 0 var(--rod-lys); }
.tn-navn { display: block; font-family: "Oswald", sans-serif; font-size: 15px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toppnav .under { display: block; font-size: 11px; color: var(--dempet); min-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.under.klar { color: var(--gronn) !important; font-weight: 600; }
.under.ny { color: var(--gull) !important; font-weight: 600; }
.under.fare { color: var(--rod-lys) !important; }

/* Tre kolonner i ett mørkt brett */
.ramme {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 20px; align-items: start;
  max-width: none; margin: 0; padding: 18px 18px 30px;
  background: rgba(11, 10, 12, 0.96); border: 1px solid var(--kant); border-top: none;
}
.sidepanel { background: none; border: none; border-radius: 0; position: static; max-height: none; overflow: visible; }
.v-gruppe { margin-bottom: 16px; }
.v-tittel {
  font-family: "Oswald", sans-serif; font-size: 16px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--gull);
  padding: 0 2px 5px; margin-bottom: 4px; border-bottom: 1px solid #2a2022;
}
.sidepanel .lenker { padding: 0; border-bottom: none; }
.sidepanel .lenker a { padding: 2px 4px 2px 16px; font-size: 13.5px; line-height: 1.5; color: #d8d1ca; }
.sidepanel .lenker a::before { left: 3px; top: 4px; }
.sidepanel .lenker a.aktiv { color: var(--rod-lys); background: none; font-weight: 600; }
.sidepanel .lenker .under { font-size: 11.5px; }
.v-knapper { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.v-knapp {
  width: 100%; padding: 9px 10px; border: 1px solid #3a2a2d; border-radius: 3px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: linear-gradient(#24191c, #150f11); color: #f0e8e0; font-family: "Inter", sans-serif;
}
.v-knapp small { font-weight: 400; font-size: 11.5px; opacity: 0.85; }
.v-knapp:hover { filter: brightness(1.2); }
.v-knapp.gronn { background: linear-gradient(#2f8a46, #1d5e2e); border-color: #3fae5c; color: #fff; }
.v-knapp.gull { background: linear-gradient(#b58d35, #7d5e1f); border-color: var(--gull); color: #111; animation: olPuls 2.4s ease-in-out infinite; }

/* Høyre side */
.h-blokk { margin-bottom: 18px; }
.h-linje { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; line-height: 1.6; }
.h-linje span { color: var(--dempet); }
.h-linje b { font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-utstyr { display: flex; gap: 8px; align-items: center; }
.h-utstyr > div { flex: 1; min-width: 0; }
.h-bilde .ikon { width: 42px; height: 42px; color: #5a4a4d; }
.h-tom { font-size: 12.5px; margin: 2px 0; }
.h-energi small { display: block; color: var(--dempet); font-size: 12px; margin-top: 4px; }
.h-energi .stolpe { margin: 3px 0 0; height: 7px; }
.h-liste { list-style: none; margin: 0; padding: 0; }
.h-liste li { font-size: 12.5px; line-height: 1.4; padding: 4px 0; border-bottom: 1px solid #1c1618; color: #cfc7c0; }
.h-liste li:last-child { border-bottom: none; }
.h-liste a { cursor: pointer; color: #e4ddd6; display: flex; gap: 6px; align-items: flex-start; }
.h-liste a:hover { color: var(--rod-lys); }
.h-liste .ikon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--rod-lys); }

/* Fast linje i bunnen */
.bunn {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; height: 40px; display: flex; align-items: stretch;
  background: linear-gradient(#141114, #070607); border-top: 1px solid var(--rod); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.7);
}
.bunn-del { display: flex; align-items: stretch; }
.bunn button {
  background: none; border: none; border-right: 1px solid #221a1c; color: #eee; font-weight: 600; font-size: 13px;
  padding: 0 14px; display: flex; align-items: center; gap: 7px; cursor: pointer; position: relative; font-family: "Inter", sans-serif; white-space: nowrap;
}
#bunn-hoyre button { border-right: none; border-left: 1px solid #221a1c; }
.bunn button:hover { background: #1f0c0f; }
.bunn button .ikon { width: 16px; height: 16px; color: var(--rod-lys); }
.bunn button.gronn-tekst .ikon { color: var(--gronn); }
.bunn .teller { position: static; }
.bunn-rang {
  width: 130px; margin: 8px 12px; position: relative; background: #000; border: 1px solid #2a2024; border-radius: 3px; overflow: hidden; cursor: pointer;
}
.bunn-rang div { height: 100%; background: linear-gradient(90deg, #6b0a0d, var(--rod-lys)); }
.bunn-rang span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px #000; }
.bunn .radio { flex: 1; min-width: 0; height: auto; border: none; background: rgba(0, 0, 0, 0.45); }
.bunn .radio-merke { font-size: 15px; }
.sms-stabel { bottom: 52px !important; }

/* Mellomstore skjermer */
@media (max-width: 1180px) {
  .hode .logo.neon { font-size: 50px; }
  .hm-kol { min-width: 0; }
  .tn-navn { font-size: 13.5px; }
}

/* Mobil */
@media (max-width: 1000px) {
  .hode { padding: 12px 12px 10px; gap: 10px; flex-wrap: wrap; }
  .hode .logo.neon { font-size: 34px; }
  .hode-meg { gap: 10px; font-size: 12px; line-height: 1.5; width: 100%; justify-content: space-between; }
  .hm-avatar { width: 40px; height: 40px; font-size: 22px; }
  .hm-kol { flex: 1; }
  .skjul-mobil { display: none !important; }
  .toppnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .toppnav::-webkit-scrollbar { display: none; }
  .toppnav a { flex: 0 0 auto; padding: 9px 12px 7px; }
  .ramme { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .sidepanel {
    position: fixed; top: 0; bottom: 0; width: 280px; z-index: 260; overflow-y: auto; max-height: none;
    background: #0d0b0e; padding: 16px 14px 70px; transition: transform 0.25s ease;
  }
  .sidepanel .lenker a { padding: 6px 4px 6px 18px; font-size: 15px; }
  .bunn { height: 56px; }
  .bunn .radio { display: none; }
  #bunn-venstre { flex: 1; justify-content: space-around; }
  #bunn-hoyre { display: none; }
  .bunn button { flex-direction: column; justify-content: center; gap: 2px; padding: 4px 6px; border: none !important; font-size: 10.5px; font-weight: 500; flex: 1; }
  .bunn button .ikon { width: 21px; height: 21px; }
  .bunn .teller { position: absolute; top: 4px; right: calc(50% - 20px); }
  body.spillside { padding-bottom: 64px; }
  .sms-stabel { bottom: 66px !important; }
}

/* ===================== Versjon 24: jakt, hotell og startbeskyttelse ===================== */
.v-knapp.alarm {
  background: linear-gradient(#c8161c, #7a0a0e); border-color: #ff4a4a; color: #fff; letter-spacing: 0.5px;
  animation: alarmPuls 0.9s ease-in-out infinite;
}
.v-knapp.alarm small { display: block; font-weight: 500; }
@keyframes alarmPuls { 50% { box-shadow: 0 0 22px rgba(255, 40, 40, 0.8); filter: brightness(1.25); } }
.v-info {
  border: 1px solid #2c2427; border-radius: 3px; padding: 7px 10px; font-size: 12.5px; color: var(--dempet); cursor: pointer;
  background: rgba(20, 16, 18, 0.9); line-height: 1.45;
}
.v-info b { color: #eee; font-weight: 600; }
.v-info .ikon { width: 14px; height: 14px; color: var(--gull); vertical-align: -2px; }
.v-info.jakt { border-color: var(--rod); }
.v-info.jakt .ikon { color: var(--rod-lys); }
.banner.alarm { background: linear-gradient(90deg, #5a070b, #1a0507); border-color: var(--rod-lys); animation: alarmPuls 1.2s ease-in-out infinite; }
.jakt-boks { border-color: var(--rod) !important; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.jakt-boks .ikon { color: var(--rod-lys); }
.jakt-boks .knapp { margin-left: auto; }
.jakt-tekst { flex: 1; min-width: 200px; }
.v-knapp small.blokk { display: block; }
.bunn button.alarm { background: linear-gradient(#c8161c, #7a0a0e); color: #fff; animation: alarmPuls 0.9s ease-in-out infinite; }
.bunn button.alarm .ikon { color: #fff; }
.bunn button.hotell-inne .ikon { color: var(--gronn); }
.v-knapp.rod { background: linear-gradient(#7a0a0e, #4a0508); border-color: #a3201f; color: #f3dede; }
.v-knapp.gronn-kant { border-color: #3fae5c; color: #bfe8c9; }