/**
 * KVISVIK TØMMERHOTELL — hotell.css
 * Utseendet: varmt kveldsmørke, messing og tømmer. Scenene skalerer med
 * skjermen (container-enheter), så nøkler og skilt passer på mobil og PC.
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell.css
 * Versjon    : 1.9.0
 * Dato       : 20.10.2026 kl. 14:16 · v1.1.0 kl. 17:20 · v1.2.0 kl. 19:35 · v1.3.0 kl. 20:45 · v1.4.0 kl. 23:40 · v1.5.0 21.10.2026 kl. 00:05 · v1.6.0 kl. 00:50 · v1.6.1 kl. 07:30 · v1.7.0 kl. 10:00 · v1.8.0 kl. 11:20 · v1.9.0 kl. 14:55
 * Utviklet av: Tormod Kvisvik
 * Firma      : Kvisvik Nettutvikling · org.nr 981309820
 * Web        : https://kvisvik.no
 * E-post     : kundeservice@kvisvik.no
 * Kvisvik Tømmerhotell er et produkt av Kvisvik Nettutvikling.
 * Et webhotell du kan gå inn i: hvert nettsted har sitt eget rom.
 * https://hotell.kvisvik.no
 *
 * v1.1.0 (20.10.2026 kl. 17:20): 3D-resepsjonen — fullskjerm som fasaden,
 * nøkkelrad, merkelapp og infopanel. 2D-stilene står igjen som reserve.
 *
 * v1.2.0 (20.10.2026 kl. 19:35): Gemini-stillbilder i overgangene (zoom),
 * bilde i Trekløveret-panelet og bildegalleri i romoversikten.
 * v1.3.0 (20.10.2026 kl. 20:45): den tegnede låsen skjules når Gemini-filmen spilles.
 * v1.4.0 (20.10.2026 kl. 23:40): fasade-fotoet som toner over i 3D (.levende).
 * v1.5.0 (21.10.2026 kl. 00:05): Maskinrommet — lysdioder, skjerm, lapp, tavle
 * og mørk trappeovergang.
 * v1.6.0 (21.10.2026 kl. 00:50): kjelleren i 3D — fullskjerm, romknapper,
 * infopanel for rom og hjelpere, og radartavla som flytende panel.
 * v1.6.1 (21.10.2026 kl. 07:30): runde portretter på hjelperkortene.
 * v1.7.0 (21.10.2026 kl. 10:00): 2. etasje — korridoren i fullskjerm, dørknapper,
 * skiltet i rommet med ekte status, lista uten 3D og overgangen opp/ned trappa.
 *
 * v1.8.0 (21.10.2026 kl. 11:20): live-visning på storskjermen i kontoret —
 * en iframe som ligger nøyaktig oppå skjermen i 3D-bildet, med «● LIVE»-linje
 * under. Mens den er åpen, skjules skiltet, dørknappene og hintet.
 *
 * v1.9.0 (21.10.2026 kl. 14:55): annekset — lenka på fasaden, butikklokalet i
 * fullskjerm (som 2. etasje), «Anbefalt for»-linja og teksten uten 3D.
 *
 * LÆRING: «cqw» betyr prosent av bredden til nærmeste container (her
 * .scene-ramme). 1cqw = 1 % av scenens bredde. Da blir romnummer og lapper
 * på nøklene alltid like store i forhold til bildet, uansett skjerm.
 */

:root {
  --natt: #0e0805;
  --tre-mork: #2a1a0e;
  --tre: #3b2615;
  --messing: #d6ab55;
  --messing-lys: #f0cf86;
  --krem: #f4e4c2;
  --tekst: #efe3cc;
  --dempet: #b9a383;
  --glod: #ffb35a;
  --papir: #f6efe2;
  --blekk: #2a1d12;
  --skrift-tittel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --skrift: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--natt); }
body {
  margin: 0;
  background: var(--natt);
  color: var(--tekst);
  font-family: var(--skrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
a { color: var(--messing-lys); }
a:focus-visible, button:focus-visible, canvas:focus-visible, .scene:focus-visible {
  outline: 3px solid var(--messing-lys);
  outline-offset: 3px;
}
.scene:focus { outline: none; }

.hopp {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--messing); color: var(--blekk); padding: 10px 16px;
  border-radius: 8px; font-weight: 600; text-decoration: none;
}
.hopp:focus { top: 12px; }

.knapp {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 1rem/1 var(--skrift);
  padding: .95em 1.5em; border-radius: 999px;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.knapp-hoved {
  background: linear-gradient(180deg, var(--messing-lys), var(--messing));
  color: var(--blekk);
  box-shadow: 0 6px 24px rgba(255, 170, 70, .28), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.knapp-hoved:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 170, 70, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* ═══ Hotellet ═══ */
.hotell { position: relative; background: var(--natt); }

/* ── Fasaden ── */
.scene-fasade {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  max-height: 1000px;
  overflow: hidden;
}
#fasade-lerret {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;          /* loddrett sveip ruller siden, vannrett snur hotellet */
}
#fasade-lerret:active { cursor: grabbing; }
.fasade-reserve { position: absolute; inset: 0; }
.fasade-reserve img, .fasade-reserve svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.har-3d .fasade-reserve { display: none; }

/* Bildet våkner: fotoet ligger over 3D-lerretet til noen tar tak.
   pointer-events: none — draget går gjennom fotoet til lerretet under.
   Uten 3D vises ikke fotoet (reservebildet tar over). */
.fasade-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  pointer-events: none;
  display: none;
  transition: opacity .9s ease, transform 1.4s ease;
}
.har-3d .fasade-foto { display: block; }
.levende .fasade-foto { opacity: 0; transform: scale(1.04); }

.scene-fasade::after {           /* mørk glød bak teksten så den alltid kan leses */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 12% 18%, rgba(10, 5, 2, .62), rgba(10, 5, 2, 0) 70%);
}
.fasade-tekst {
  position: absolute; z-index: 2;
  left: clamp(18px, 5vw, 80px);
  top: clamp(22px, 9vh, 110px);
  max-width: 34rem;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.fasade-tekst .knapp { pointer-events: auto; text-shadow: none; }
.overtittel {
  margin: 0 0 .4rem;
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--messing-lys);
}
.fasade-tekst h1 {
  margin: 0;
  font-family: var(--skrift-tittel);
  font-weight: 700;
  font-size: clamp(2.3rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  color: var(--krem);
  letter-spacing: -.01em;
}
.fasade-anneks { margin: 1rem 0 0; font-size: .95rem; }
.fasade-anneks a {
  pointer-events: auto; color: var(--krem); text-decoration: none; font-weight: 600;
  padding: .45em .9em; border-radius: 999px; border: 1px solid rgba(214, 171, 85, .45);
  background: rgba(20, 12, 6, .55); text-shadow: none; display: inline-block;
}
.fasade-anneks a:hover { background: rgba(59, 38, 21, .9); }
.ingress { margin: .8rem 0 1.4rem; font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: var(--tekst); max-width: 28rem; }
.hint {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
  margin: 0; padding: .5em 1.1em; border-radius: 999px;
  background: rgba(14, 8, 5, .62); border: 1px solid rgba(214, 171, 85, .35);
  font-size: .9rem; color: var(--krem); white-space: nowrap;
  pointer-events: none; backdrop-filter: blur(4px);
}

/* ── Resepsjon og rom (2D-scener) ── */
.scene-2d {
  min-height: 100vh; min-height: 100svh;
  padding: 14px clamp(10px, 3vw, 32px) 40px;
  background:
    radial-gradient(ellipse 80% 55% at 50% 40%, rgba(120, 66, 26, .35), rgba(14, 8, 5, 0) 70%),
    var(--natt);
}
.scene-topp {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1500px; margin: 0 auto 12px;
}
.tilbake {
  color: var(--krem); text-decoration: none; font-weight: 600;
  padding: .45em .9em; border-radius: 999px; border: 1px solid rgba(214, 171, 85, .35);
  background: rgba(59, 38, 21, .5);
}
.tilbake:hover { background: rgba(59, 38, 21, .9); }
.sted {
  font-family: var(--skrift-tittel); font-size: 1.15rem; color: var(--messing-lys);
}
.melding {
  max-width: 1500px; margin: 0 auto 12px; padding: .6em 1em; border-radius: 10px;
  background: rgba(214, 171, 85, .14); border: 1px solid rgba(214, 171, 85, .4);
}

.scene-ramme {
  position: relative;
  width: min(100%, 1500px, calc((100svh - 150px) * 16 / 9));
  min-width: min(100%, 320px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: #1a0f08;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(214, 171, 85, .18);
}
.scene-innhold {
  position: absolute; inset: 0;
  container-type: inline-size;     /* 1cqw = 1 % av bildets bredde */
  transform-origin: 0 0;
  transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.scene-tegning, .scene-bilde {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Rommet: litt lavere scene på PC, så skiltet og «Gå inn»-knappen synes uten rulling */
.scene-rom .scene-ramme { width: min(100%, 1500px, calc((100svh - 320px) * 16 / 9)); min-width: min(100%, 560px); }

.scene-hint {
  text-align: center; margin: 14px auto 0; color: var(--dempet); font-size: .95rem;
}

/* Peisild og stearinlys i plassholdertegningen */
.flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: flakk .55s ease-in-out infinite alternate; }
.flamme.f2 { animation-duration: .7s; animation-delay: -.2s; }
.flamme.f3 { animation-duration: .48s; animation-delay: -.35s; }
@keyframes flakk {
  0%   { transform: scale(1, 1) skewX(0deg); opacity: .95; }
  50%  { transform: scale(.94, 1.08) skewX(-3deg); opacity: 1; }
  100% { transform: scale(1.04, .93) skewX(3deg); opacity: .88; }
}

/* ── Nøkkeltavla ── */
.tavle {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(var(--kolonner, 4), 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1.1cqw 1cqw .4cqw;
  gap: .3cqw .6cqw;
}
.krok {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: var(--blekk);
  border-radius: .6cqw;
  outline-offset: 0;
}
.krok::before {                    /* messingkroken */
  content: ''; display: block;
  width: .9cqw; height: .9cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbe3a6, #a77a2a 70%);
  box-shadow: 0 .15cqw .25cqw rgba(0, 0, 0, .5);
  margin-top: .15cqw;
}
.krok-nr {
  position: absolute; top: -.05cqw; left: .3cqw;
  font: 700 .85cqw/1 var(--skrift);
  color: var(--messing-lys); opacity: .85;
}
.krok.tom .krok-nr { opacity: .45; }
.nokkel {
  display: block; height: 3.6cqw; margin-top: -.25cqw;
  color: #e2b85a;
  filter: drop-shadow(0 .25cqw .25cqw rgba(0, 0, 0, .55));
  transform-origin: 50% 0;
  transition: transform .3s ease;
}
.nokkel svg { height: 100%; width: auto; display: block; }
.lapp {
  position: absolute; left: 55%; top: 2.2cqw;
  max-width: 5.4cqw;
  padding: .2cqw .45cqw;
  font: 700 .9cqw/1.1 var(--skrift);
  background: #f2e6c9; color: var(--blekk);
  border-radius: .2cqw;
  box-shadow: 0 .2cqw .4cqw rgba(0, 0, 0, .45);
  transform: rotate(-7deg);
  transform-origin: 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.krok:hover .nokkel, .krok:focus-visible .nokkel { transform: rotate(9deg); }
.krok:hover .lapp, .krok:focus-visible .lapp { background: #fff7e2; }
.krok.tatt .nokkel { transition: transform .38s ease, opacity .38s ease; transform: translateY(-1.4cqw) rotate(-25deg) scale(1.25); opacity: 0; }
.krok.tatt .lapp { transition: opacity .3s ease; opacity: 0; }

.tavle-zoom {
  position: absolute; display: none;
  background: transparent; border: 0; padding: 0; cursor: zoom-in;
  border-radius: 1cqw;
}
.trenger-zoom:not(.zoomet) .tavle-zoom { display: block; }
.trenger-zoom:not(.zoomet) .tavle-zoom:hover,
.trenger-zoom:not(.zoomet) .tavle-zoom:focus-visible { box-shadow: 0 0 0 .4cqw rgba(255, 207, 120, .55); }
.zoomet .scene-innhold { cursor: zoom-out; }
.zoomet .tavle { cursor: default; }

/* ── Rommet ── */
.ramme { position: absolute; overflow: hidden; background: #1a120c; }
.ramme img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nettleser { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f4efe6; }
.nettleser-topp {
  display: flex; align-items: center; gap: .5cqw;
  padding: .55cqw .8cqw; background: #e3dccf; border-bottom: 1px solid #cfc6b6;
  font: 600 .9cqw/1 var(--skrift); color: #5b5048;
}
.nettleser-topp i { width: .75cqw; height: .75cqw; border-radius: 50%; background: #c8bfb0; display: block; }
.nettleser-topp span { margin-left: .8cqw; padding: .3cqw 1cqw; background: #f7f3ec; border-radius: 999px; }
.nettleser-flate {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .6cqw;
  background: linear-gradient(160deg, #2f2013, #5b3a20);
  color: var(--krem); text-align: center; padding: 2cqw;
}
.nettleser-flate strong { font: 700 2.6cqw/1.1 var(--skrift-tittel); }
.nettleser-flate span { font-size: 1.2cqw; color: var(--messing-lys); }

.rom-skilt {
  position: relative; z-index: 2;
  max-width: 640px; margin: -34px auto 0;
  padding: 22px 26px 24px;
  text-align: center;
  background: linear-gradient(180deg, #3b2615, #2a1a0e);
  border: 2px solid rgba(214, 171, 85, .55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.rom-nr { margin: 0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing-lys); }
.rom-skilt h2 { margin: .25rem 0 .4rem; font-family: var(--skrift-tittel); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--krem); }
.rom-skilt p:not(.rom-nr) { margin: 0 0 1.1rem; color: var(--tekst); }

/* ── Overganger ── */
.overgang {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.overgang.aktiv { opacity: 1; pointer-events: auto; }
.overgang.ut { opacity: 0; transition-duration: .5s; }
.overgang.varm { background: radial-gradient(circle at 50% 55%, #fff1d2 0%, #ffc276 35%, #c4621f 75%, #3b1a08 100%); }
.overgang.laas-aktiv { background: rgba(14, 8, 5, .92); }
.overgang.med-film { background: #000; }
.overgang video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gemini-stillbildet i overgangen. transform-origin = punktet vi zoomer mot. */
.overgang.med-bilde { background: #0b0604; }
.overgang.med-bilde .laas, .overgang.med-film .laas { display: none !important; }
#overgang-bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zoom-dor #overgang-bilde { transform-origin: 50.5% 50%; animation: zoomDor 1s cubic-bezier(.5, 0, .9, .6) forwards; }
.zoom-laas #overgang-bilde { transform-origin: 50% 47%; animation: zoomLaas 1.25s ease-in-out forwards; }
.zoom-dor::after {            /* varmt lys som fyller skjermen når vi «går gjennom» døra */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50.5% 50%, #fff1d2 0%, #ffc276 30%, rgba(196, 98, 31, 0) 70%);
  opacity: 0; animation: varmtLys 1s ease-in forwards;
}
@keyframes zoomDor { from { transform: scale(1.03); } to { transform: scale(2.3); } }
@keyframes zoomLaas { from { transform: scale(1.06) rotate(0deg); } to { transform: scale(1.32) rotate(-1.5deg); } }
@keyframes varmtLys { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
.laas { display: none; width: min(200px, 46vw); filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .6)); }
.laas svg { width: 100%; overflow: visible; }
.laas-aktiv .laas { display: block; }
.laas-nokkel { transform-box: view-box; transform-origin: 60px 68px; }
.laas-aktiv .laas-nokkel { animation: vri .85s ease-in-out forwards; }
@keyframes vri {
  0%   { transform: translateY(-50px) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  45%  { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(0) rotate(90deg); }
}

/* ═══ 3D-resepsjonen ═══
   Klassen .har-3d settes av hotell.js når WebGL virker. Uten den vises
   2D-tegningen som før, og alt under her er skjult. */
#resepsjon-lerret, .nokkelrad, .hint-3d, .merkelapp { display: none; }
.scene-resepsjon.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.har-3d .scene-ramme, .har-3d #resepsjon-hint { display: none; }
.har-3d #resepsjon-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;          /* loddrett sveip ruller siden, vannrett snur deg */
}
.har-3d #resepsjon-lerret:active { cursor: grabbing; }
.har-3d .scene-topp {
  position: absolute; z-index: 3;
  top: 14px; left: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 32px);
  margin: 0; max-width: none;
  pointer-events: none;
}
.har-3d .scene-topp > * { pointer-events: auto; }
.har-3d .sted { text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.har-3d .tilbake { background: rgba(20, 12, 6, .7); backdrop-filter: blur(4px); }
.har-3d .melding { position: absolute; z-index: 3; top: 64px; left: 50%; transform: translateX(-50%); margin: 0; background: rgba(20, 12, 6, .85); }
.har-3d .hint-3d { display: block; }
.har-3d .merkelapp:not([hidden]) {
  display: block;
  position: absolute; z-index: 4;
  transform: translate(-50%, calc(-100% - 16px));
  padding: .38em .8em;
  background: rgba(14, 8, 5, .88);
  border: 1px solid rgba(214, 171, 85, .55);
  border-radius: 8px;
  color: var(--krem);
  font-size: .92rem; font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.har-3d .nokkelrad {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  position: absolute; z-index: 3;
  left: 50%; bottom: 66px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
}
.nokkel-chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .95em .5em .55em;
  border-radius: 999px;
  background: rgba(20, 12, 6, .78);
  border: 1px solid rgba(214, 171, 85, .5);
  color: var(--krem); font-weight: 600; font-size: .92rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background .2s ease, transform .15s ease;
}
.nokkel-chip span {
  display: inline-grid; place-items: center;
  min-width: 2.3em; height: 1.75em; padding: 0 .4em; border-radius: 999px;
  background: linear-gradient(180deg, var(--messing-lys), var(--messing));
  color: var(--blekk); font-size: .8rem;
}
.nokkel-chip:hover, .nokkel-chip:focus-visible { background: rgba(59, 38, 21, .95); transform: translateY(-1px); }

.infopanel {
  position: absolute; z-index: 5;
  top: 70px; right: clamp(12px, 3vw, 32px);
  width: min(380px, calc(100% - 24px));
  padding: 20px 22px 18px;
  background: linear-gradient(180deg, rgba(59, 38, 21, .97), rgba(42, 26, 14, .97));
  border: 2px solid rgba(214, 171, 85, .55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.infopanel { max-height: calc(100% - 90px); overflow-y: auto; }
.infopanel-bilde { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin: 0 0 12px; border: 1px solid rgba(214, 171, 85, .35); }
.infopanel h2 { margin: .1rem 0 .5rem; font-family: var(--skrift-tittel); font-size: 1.6rem; color: var(--krem); }
.infopanel p { margin: 0 0 .6rem; }
.infopanel ul { margin: 0; padding-left: 1.1rem; }
.infopanel li { margin: 0 0 .45rem; }
.infopanel li strong { color: var(--messing-lys); }
.infopanel-lukk {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(214, 171, 85, .4);
  color: var(--krem); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.infopanel-lukk:hover { background: rgba(214, 171, 85, .15); }

/* ═══ Maskinrommet (kjelleren) ═══ */
.scene-maskinrom .scene-ramme { width: min(100%, 1500px, calc((100svh - 320px) * 16 / 9)); min-width: min(100%, 560px); }
.maskin-tom { background: radial-gradient(ellipse at 60% 50%, #1d2a2a, #0b0806 70%); }
.maskin-dioder { position: absolute; inset: 0; pointer-events: none; }
.diode {
  position: absolute;
  width: .55cqw; height: .32cqw; border-radius: 1px;
  background: #39ff95;
  box-shadow: 0 0 .5cqw #39ff95, 0 0 1.2cqw rgba(57, 255, 149, .45);
  animation: blinke 2s steps(2, jump-none) infinite;
}
.diode.bla { background: #5cc8ff; box-shadow: 0 0 .5cqw #5cc8ff, 0 0 1.2cqw rgba(92, 200, 255, .45); }
@keyframes blinke { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.skap-glod {
  position: absolute; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 50, 40, .55), rgba(255, 50, 40, .18) 45%, rgba(255, 50, 40, 0) 72%);
  mix-blend-mode: screen;
}
.skap-glod.vis { animation: skapAlarm 1.6s ease-out forwards; }
@keyframes skapAlarm { 0% { opacity: 1; } 20% { opacity: .85; } 100% { opacity: 0; } }
/* Et stoppet forsøk: dioden lyser sterkt rødt og «slår ut» rødt lys rundt seg */
.diode.stoppet {
  background: #ff3b30;
  box-shadow: 0 0 .7cqw #ff3b30, 0 0 3cqw rgba(255, 59, 48, .7), 0 0 7cqw rgba(255, 59, 48, .35);
  animation: alarm 1.8s ease-out forwards;
  z-index: 2;
}
@keyframes alarm {
  0% { transform: scale(2.6); opacity: 1; }
  25% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1); opacity: .9; }
}
.maskin-skjerm {
  position: absolute; left: 2.6%; top: 44%; width: 15%; height: 15%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  background: linear-gradient(180deg, #071a10, #03100a);
  border: .35cqw solid #2a1c12; border-radius: .6cqw;
  box-shadow: 0 0 2.4cqw rgba(57, 255, 149, .25), inset 0 0 1.5cqw rgba(57, 255, 149, .2);
  color: #7dffb5; font-family: 'Courier New', ui-monospace, monospace; text-align: center;
  transform: perspective(40cqw) rotateY(18deg);
}
.maskin-skjerm span { font-size: .78cqw; letter-spacing: .12em; opacity: .8; }
.maskin-skjerm strong { font-size: 2.6cqw; line-height: 1.1; text-shadow: 0 0 1cqw rgba(125, 255, 181, .7); }
.maskin-lapp {
  position: absolute; left: 50%; top: 5%; transform: translateX(-50%);
  margin: 0; padding: .5em 1em; border-radius: 999px;
  background: rgba(40, 6, 4, .85); border: 1px solid rgba(255, 90, 80, .6);
  color: #ffd9d4; font-weight: 600; font-size: clamp(.78rem, 1.2cqw, 1rem); white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.maskin-lapp.vis { animation: lapp 2.8s ease forwards; }
@keyframes lapp { 0% { opacity: 0; transform: translate(-50%, -6px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

.maskin-tavle {
  position: relative; z-index: 2;
  max-width: 760px; margin: -34px auto 0;
  padding: 22px 26px 24px;
  background: linear-gradient(180deg, #1b231c, #11160f);
  border: 2px solid rgba(57, 255, 149, .35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.maskin-tavle .rom-nr { color: #7dffb5; }
.maskin-tavle h2 { margin: .25rem 0 .4rem; font-family: var(--skrift-tittel); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--krem); }
.maskin-tavle h3 { margin: 1.2rem 0 .5rem; font-size: 1rem; color: var(--messing-lys); }
.maskin-tavle > p { margin: 0 0 .9rem; }
.maskin-melding { color: var(--dempet); font-style: italic; }
.maskin-tall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.maskin-tall div { padding: 10px 12px; border-radius: 10px; background: rgba(57, 255, 149, .06); border: 1px solid rgba(57, 255, 149, .18); }
.maskin-tall dt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dempet); }
.maskin-tall dd { margin: .15rem 0 0; font-size: 1.6rem; font-weight: 700; color: #7dffb5; font-variant-numeric: tabular-nums; }
.maskin-siste { list-style: none; margin: 0 0 .8rem; padding: 0; }
.maskin-siste li { display: grid; grid-template-columns: 3.2em 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .95rem; }
.maskin-siste .kl { color: var(--dempet); font-variant-numeric: tabular-nums; }
.maskin-siste .type { font-size: .82rem; font-weight: 600; padding: .1em .6em; border-radius: 999px; }
.maskin-siste .type.sperring { background: rgba(255, 59, 48, .18); color: #ffb0a8; }
.maskin-siste .type.felle { background: rgba(214, 171, 85, .18); color: var(--messing-lys); }
.maskin-land { color: var(--dempet); font-size: .92rem; }
.maskin-tavle.nede .maskin-tall, .maskin-tavle.nede h3, .maskin-tavle.nede .maskin-siste, .maskin-tavle.nede .maskin-land { display: none; }
.maskin-tavle:not(.nede) .maskin-melding { display: none; }

/* ═══ Kjelleren i 3D ═══
   .har-3d settes av hotell.js når WebGL virker. Da skjules Gemini-bildet, og
   lerretet fyller skjermen. Uten den er alt under her skjult. */
#kjeller-lerret, .kjeller-rom, .kjeller-hele, .tavle-lukk { display: none; }
.scene-maskinrom.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #0d0906;
}
.scene-maskinrom.har-3d .scene-ramme { display: none; }
.har-3d #kjeller-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.har-3d #kjeller-lerret:active { cursor: grabbing; }
.har-3d .kjeller-hele:not([hidden]) { display: inline-block; font: inherit; font-weight: 600; cursor: pointer; }
.har-3d .kjeller-rom {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  position: absolute; z-index: 3;
  left: 50%; bottom: 66px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
}
.kjeller-rom .nokkel-chip { padding: .5em 1em; cursor: pointer; font-family: inherit; }
/* Radartavla blir et flytende panel i 3D, og vises når du trykker på serverne */
.scene-maskinrom.har-3d .maskin-tavle { display: none; }
.scene-maskinrom.har-3d .maskin-tavle.apen {
  display: block;
  position: absolute; z-index: 5;
  top: 70px; right: clamp(12px, 3vw, 32px);
  width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 90px); overflow-y: auto;
  margin: 0;
}
.har-3d .maskin-tavle .tavle-lukk { display: block; }
.kjeller-panel .merke {
  display: inline-block; margin: 0 0 .6rem; padding: .15em .7em; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(214, 171, 85, .16); color: var(--messing-lys); border: 1px solid rgba(214, 171, 85, .4);
}
.kjeller-panel .merke.ekte { background: rgba(57, 255, 149, .1); color: #7dffb5; border-color: rgba(57, 255, 149, .4); }
.romkort-portrett { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin: 0 0 12px; box-shadow: 0 4px 14px rgba(60, 35, 10, .25); }
.kjeller-portrett { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin: 0 0 10px; border: 2px solid rgba(214, 171, 85, .55); }
.kjeller-levende { padding: .6em .8em; border-radius: 10px; background: rgba(57, 255, 149, .07); border: 1px solid rgba(57, 255, 149, .25); color: #c9f5dc; font-size: .95rem; }
.kjeller-valg { display: flex; flex-wrap: wrap; gap: 10px; margin: .4rem 0 0 !important; }
.kjeller-valg .knapp { padding: .75em 1.2em; font-size: .95rem; }
.kjeller-valg:empty { display: none; }

/* ═══ 2. etasje ═══ */
.topp-hoyre { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
#etasje-lerret, .etasje-dorer, .etasje-rom { display: none; }
.scene-etasje.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.scene-etasje.har-3d .etasje-liste { display: none; }
.har-3d #etasje-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.har-3d #etasje-lerret:active { cursor: grabbing; }
.har-3d .etasje-dorer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  position: absolute; z-index: 3;
  left: 50%; bottom: 66px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px);
}
.har-3d .etasje-rom:not([hidden]) {
  display: block;
  position: absolute; z-index: 4;
  left: clamp(12px, 3vw, 32px); bottom: 110px;
  width: min(420px, calc(100% - 24px));
  padding: 18px 20px 20px;
  background: linear-gradient(180deg, rgba(59, 38, 21, .95), rgba(42, 26, 14, .95));
  border: 2px solid rgba(214, 171, 85, .55);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.etasje-rom h2 { margin: .2rem 0 .35rem; font-family: var(--skrift-tittel); font-size: 1.6rem; color: var(--krem); }
.etasje-rom p { margin: 0 0 .7rem; }
.etasje-status {
  display: inline-block; padding: .3em .8em; border-radius: 999px;
  background: rgba(57, 255, 149, .08); border: 1px solid rgba(57, 255, 149, .3);
  color: #c9f5dc; font-size: .9rem; font-weight: 600;
}
.etasje-liste { max-width: 720px; margin: 20px auto 0; padding: 22px 26px; background: rgba(59, 38, 21, .6); border: 1px solid rgba(214, 171, 85, .35); border-radius: 14px; }
.etasje-liste h2 { margin: 0 0 .8rem; font-family: var(--skrift-tittel); color: var(--krem); }
.etasje-liste ul { list-style: none; margin: 0; padding: 0; }
.etasje-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.etasje-liste .ledig { color: var(--dempet); }
.etasje-liste-status { color: #9dffbf; font-size: .9rem; }
/* Live på storskjermen (hotell-etasje.js regner ut plassen) */
.etasje-live { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.etasje-live.vis { opacity: 1; }
.etasje-live-ramme {
  position: absolute; overflow: hidden; pointer-events: auto;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(214, 171, 85, .65), 0 0 46px rgba(255, 200, 120, .28);
}
.etasje-live-ramme iframe { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.etasje-live-linje {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  max-width: calc(100% - 24px); padding: 6px 6px 6px 16px;
  pointer-events: auto; white-space: nowrap;
  background: rgba(42, 26, 14, .94); border: 1px solid rgba(214, 171, 85, .55); border-radius: 999px;
  color: var(--krem); font-size: .9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.etasje-live-merke { color: #ff6b5e; font-weight: 700; letter-spacing: .06em; animation: live-puls 1.6s ease-in-out infinite; }
@keyframes live-puls { 50% { opacity: .45; } }
.etasje-live-domene { font-weight: 600; }
.etasje-live-ny { color: #f0cf86; text-decoration: none; }
.etasje-live-ny:hover { text-decoration: underline; }
.etasje-live-lukk {
  font: inherit; font-weight: 700; color: #2a1d12; cursor: pointer;
  background: linear-gradient(180deg, #f0cf86, #d6ab55); border: 0; border-radius: 999px; padding: .45em 1em;
}
.scene-etasje.live .etasje-rom, .scene-etasje.live .etasje-dorer,
.scene-etasje.live #etasje-hint, .scene-etasje.live #etasje-merkelapp { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .etasje-live { transition: none; }
  .etasje-live-merke { animation: none; }
}
@media (max-width: 700px) {
  .etasje-live-linje { bottom: 10px; top: auto !important; font-size: .82rem; }
  .etasje-live-ny { display: none; }
}

/* ═══ Annekset (butikklokalet på tunet) ═══ */
#anneks-lerret { display: none; }
.scene-anneks.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.scene-anneks.har-3d .anneks-liste { display: none; }
.har-3d #anneks-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.har-3d #anneks-lerret:active { cursor: grabbing; }
.anneks-forslag {
  display: inline-block; padding: .35em .9em; border-radius: 999px;
  background: rgba(57, 255, 149, .08); border: 1px solid rgba(57, 255, 149, .3);
  color: #c9f5dc; font-weight: 600;
}
.anneks-forslag a { color: #9dffbf; }
.anneks-liste { max-width: 720px; margin: 20px auto 0; padding: 22px 26px; background: rgba(59, 38, 21, .6); border: 1px solid rgba(214, 171, 85, .35); border-radius: 14px; }
.anneks-liste h2 { margin: 0 0 .6rem; font-family: var(--skrift-tittel); color: var(--krem); }
.anneks-liste ul { margin: 0 0 1rem; padding-left: 1.2rem; }

/* Opp og ned trappa til 2. etasje: varmt lampelys */
.overgang.opp { background: radial-gradient(ellipse at 50% 30%, #6a3a16 0%, #2a160a 55%, #0e0805 100%); }

/* Trappa ned til kjelleren: mørkt, med grønt serverlys nederst */
.overgang.kjeller { background: linear-gradient(180deg, #050302 0%, #0a0805 55%, #0b2a1c 100%); }

/* ═══ Romoversikt (vanlig tekst) ═══ */
.romoversikt { background: var(--papir); color: var(--blekk); }
.romoversikt-indre { max-width: 1100px; margin: 0 auto; padding: 64px clamp(18px, 4vw, 40px) 72px; }
.romoversikt h2 { font-family: var(--skrift-tittel); font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 0 0 .5rem; }
.romoversikt h2:not(:first-child) { margin-top: 3rem; }
.romoversikt-ingress { max-width: 46rem; margin: 0 0 2rem; font-size: 1.08rem; }
.romoversikt a { color: #7a3322; font-weight: 600; }
.romliste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.romkort {
  height: 100%; padding: 20px 22px; border-radius: 14px;
  background: #fffaf0; border: 1px solid #e6d8bd;
  box-shadow: 0 4px 16px rgba(60, 35, 10, .08);
}
.romkort-nr { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8a6a3a; }
.romkort h3 { font-family: var(--skrift-tittel); font-size: 1.3rem; margin: .2rem 0 .4rem; }
.romkort p { margin: 0 0 .8rem; }
.romkort-lenker { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 !important; }

/* Bildegalleri i romoversikten */
.bildegalleri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 1rem; }
.bildegalleri-inne { grid-template-columns: repeat(3, 1fr); }
.bildegalleri figure { margin: 0; }
.bildegalleri img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(60, 35, 10, .18);
}
.bildegalleri figcaption { margin-top: .4rem; font-size: .9rem; font-weight: 600; color: #6b4b2a; }
@media (max-width: 900px) { .bildegalleri, .bildegalleri-inne { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bildegalleri, .bildegalleri-inne { grid-template-columns: 1fr; } }

.bunn { padding: 28px 18px 36px; text-align: center; color: var(--dempet); font-size: .92rem; }
.bunn p { margin: .2rem 0; }

/* ═══ Mobil ═══ */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .scene-fasade::after { background: linear-gradient(180deg, rgba(10, 5, 2, .75), rgba(10, 5, 2, 0) 45%); }
  .fasade-tekst { left: 18px; right: 18px; top: 22px; }
  .fasade-anneks { margin-top: .7rem; font-size: .85rem; }
  .ingress { margin-bottom: 1rem; }
  .hint { font-size: .82rem; bottom: 16px; }
  .scene-2d { padding-top: 10px; }
  .scene-ramme { border-radius: 10px; }
}
/* Mobil på høykant: høyere scene, midtpartiet av bildet (hotell.js forskyver det) */
@media (max-width: 700px) and (orientation: portrait) {
  .scene-ramme, .scene-rom .scene-ramme, .scene-maskinrom .scene-ramme { aspect-ratio: auto; width: 100%; min-width: 0; height: 64svh; max-height: 640px; }
  .scene-rom .scene-ramme, .scene-maskinrom .scene-ramme { height: 52svh; }
  .maskin-tavle { margin-top: 14px; padding: 18px; }
  .maskin-tall dd { font-size: 1.25rem; }
  .rom-skilt { margin-top: 14px; padding: 18px; }
}
@media (max-width: 700px) {
  .har-3d .nokkelrad { bottom: 56px; gap: 6px; }
  .har-3d .kjeller-rom { bottom: 52px; gap: 5px; }
  .har-3d .etasje-dorer { bottom: 52px; gap: 5px; }
  .har-3d .etasje-rom:not([hidden]) { left: 12px; right: 12px; width: auto; bottom: 96px; padding: 14px 16px 16px; }
  .etasje-rom h2 { font-size: 1.3rem; }
  .etasje-rom #etasje-rom-tekst { display: none; }
  body[data-scene="rom"] .har-3d #etasje-hint { display: none; }
  .topp-hoyre .tilbake { font-size: .85rem; padding: .4em .75em; }
  .kjeller-rom .nokkel-chip { font-size: .8rem; padding: .42em .75em; }
  .scene-maskinrom.har-3d .maskin-tavle.apen { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 70%; }
  .har-3d .kjeller-hele { font-size: .85rem; padding: .4em .75em; }
  .nokkel-chip { font-size: .86rem; padding: .45em .8em .45em .45em; }
  .infopanel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .har-3d .sted { font-size: 1rem; }
}

/* Den som har skrudd av animasjoner, får rolige overganger */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}