/**
 * KVISVIK TØMMERHOTELL — hotell-sjofloy.css
 * Utseendet til Sjøbaren: fullskjerm-scenen i 3D og panelet over biljardbordet
 * (støt, kuler igjen, rekord, kraftmåler og knappene).
 * Plassering : /home/kvisvik/public_html/hotell.kvisvik.no/hotell-sjofloy.css
 * Versjon    : 1.4.0
 * Dato       : 26.10.2026 kl. 13:11 · v1.1.0 31.10.2026 kl. 09:06 · v1.2.0 kl. 23:24 · v1.3.0 01.11.2026 kl. 00:11 · v1.4.0 kl. 00:49
 * 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.0.0 (26.10.2026 kl. 13:11): ny fil.
 *
 * v1.1.0 (31.10.2026 kl. 09:06): panelet til Jukeboksen (.sjo-juke) nederst til venstre: spilleliste, «spilles nå»
 * med kreditering, knapper og volum, og en liten «♪»-knapp når panelet er lukket mens musikken spiller. Mens du
 * spiller biljard krymper panelet til bare knappene, så bordet ikke dekkes. Hintet nederst skjules når panelet er åpent.
 *
 * v1.2.0 (31.10.2026 kl. 23:24): YouTube-video i panelet (.sjo-juke-video, minst 200 px høy som YouTube krever, og alltid
 * synlig mens den spiller), personvernlinje (.sjo-juke-pers), gruppeoverskrifter og sperrede sanger i lista, ⟲-knapp for
 * løkke (.sjo-juke-lokke) og tapp-takt-raden (.sjo-juke-takt, bare med ?takt=1). I biljard står videoen igjen på PC. På
 * smal skjerm skjules den (og sangen pauses av hotell-sjofloy.js). Panelet får egen rulling hvis skjermen er lav.
 *
 * v1.3.0 (01.11.2026 kl. 00:11): filterknapper for sjanger og tiår over spillelista (.sjo-juke-filter, .sjo-juke-frad,
 * .sjo-juke-fchip, .sjo-juke-fantall). Raden skjules mens du spiller biljard, så panelet ikke vokser.
 *
 * v1.4.0 (01.11.2026 kl. 00:49): storskjermen på gavlveggen. Knappen «⛶ Storskjerm» oppå videoen (.sjo-skjerm-knapp),
 * plassholder i panelet mens videoen står på veggen (.sjo-juke-plass), og to klasser på scenen: .skjerm-paa (videoen har
 * position: fixed oppå veggskjermen, panelet er smalt og uten sangliste) og .skjerm-kino (mørk bakgrunn .sjo-skjerm-bak,
 * videoen midt på skjermen). Størrelsen og plasseringen til videoen settes av hotell-sjofloy.js (inline left/top/width/height),
 * og --sjo-plass er bredden panelet kan bruke til venstre for videoen. «Tilbake til baren»-knappen er .sjo-skjerm-tilbake.
 *
 * LÆRING: scenen følger samme oppskrift som annekset i hotell.css (lerretet skjult
 * til hotell.js har satt .har-3d). Når du står ved biljardbordet, setter
 * hotell-sjofloy.js klassen .spiller på scenen: da skjules hintet nederst, og
 * panelet øverst tar over.
 */

#sjofloy-lerret { display: none; }
.scene-sjofloy.har-3d {
  position: relative;
  padding: 0;
  height: 100vh; height: 100svh;
  min-height: 540px; max-height: 1000px;
  overflow: hidden;
  background: #120a05;
}
.scene-sjofloy.har-3d .sjofloy-liste { display: none; }
.har-3d #sjofloy-lerret {
  display: block;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.har-3d #sjofloy-lerret:active { cursor: grabbing; }
#sjofloy-hint { white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); }
.scene-sjofloy.spiller #sjofloy-hint { display: none; }

.sjofloy-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; }
.sjofloy-liste h2 { margin: 0 0 .6rem; font-family: var(--skrift-tittel); color: var(--krem); }
.sjofloy-liste ul { margin: 0 0 1rem; padding-left: 1.2rem; }

/* ═══ Panelet over biljardbordet ═══ */
.sjo-hud {
  position: absolute; z-index: 3;
  top: 64px; left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 10px 14px 12px;
  background: rgba(20, 12, 6, .86);
  border: 1px solid rgba(214, 171, 85, .4);
  border-radius: 14px;
  color: var(--krem);
  font-family: var(--skrift);
  backdrop-filter: blur(4px);
}
.sjo-hud[hidden] { display: none; }
.sjo-hud-topp {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px;
  font-weight: 600; font-size: .95rem;
}
.sjo-rekord { color: var(--messing-lys); }
.sjo-kraft {
  height: 6px; margin: 8px 0 6px; border-radius: 999px;
  background: rgba(244, 228, 194, .15); overflow: hidden;
}
.sjo-kraft span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #9dffbf, #f0cf86 55%, #ff8a5a);
  border-radius: inherit;
}
.sjo-melding { margin: 0 0 10px; font-size: .92rem; line-height: 1.35; color: var(--tekst); min-height: 1.35em; }
.sjo-knapper { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.sjo-knapper .knapp { font-size: .9rem; padding: .45em 1em; }

/* ═══ Jukeboksen: musikk med fri lisens ═══ */
.sjo-juke {
  position: absolute; z-index: 3;
  left: 16px; bottom: 16px;
  width: min(380px, calc(100% - 32px));
  pointer-events: none;                      /* beholderen blokkerer aldri klikk på lerretet */
  font-family: var(--skrift);
  color: var(--krem);
}
.sjo-juke-panel, .sjo-juke-chip { pointer-events: auto; }
.sjo-juke-panel[hidden], .sjo-juke-chip[hidden] { display: none; }
.sjo-juke-panel {
  box-sizing: border-box;
  padding: 10px 14px 12px;
  background: rgba(20, 12, 6, .88);
  border: 1px solid rgba(214, 171, 85, .4);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.sjo-juke-topp { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .98rem; }
.sjo-juke-x {
  background: none; border: 0; color: var(--krem); cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 4px;
}
.sjo-juke-x:hover, .sjo-juke-x:focus-visible { color: var(--messing-lys); }
.sjo-juke-liste { list-style: none; margin: 0 0 8px; padding: 0; max-height: 168px; overflow-y: auto; }
.sjo-juke-liste button {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 6px 8px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  color: var(--krem); font: inherit; font-size: .92rem;
}
.sjo-juke-liste button:hover, .sjo-juke-liste button:focus-visible { background: rgba(244, 228, 194, .1); }
.sjo-juke-liste .er-aktiv button { background: rgba(214, 171, 85, .22); color: var(--messing-lys); }
.sjo-juke-liste .nr { opacity: .6; font-variant-numeric: tabular-nums; }
.sjo-juke-liste .tit { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjo-juke-liste .art { opacity: .75; font-size: .84rem; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjo-juke-info { margin: 0 0 4px; min-height: 1.2em; font-size: .88rem; color: var(--tekst); }
.sjo-juke-kred { margin: 0 0 8px; font-size: .8rem; line-height: 1.4; color: var(--tekst); overflow-wrap: anywhere; }
.sjo-juke-kred:empty { display: none; }
.sjo-juke-kred a { color: var(--messing-lys); }
.sjo-juke-kontroll { display: flex; align-items: center; gap: 8px; }
.sjo-juke-kontroll .knapp { font-size: .9rem; padding: .4em .9em; }
.sjo-juke-volum { flex: 1 1 auto; min-width: 70px; accent-color: #d6ab55; }
.sjo-juke-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 7px 14px; cursor: pointer;
  background: rgba(20, 12, 6, .88); color: var(--krem);
  border: 1px solid rgba(214, 171, 85, .5); border-radius: 999px;
  font: inherit; font-size: .88rem;
}
.sjo-juke-chip:hover, .sjo-juke-chip:focus-visible { border-color: var(--messing-lys); }
.sjo-juke-chip-tekst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.scene-sjofloy.juke-apen #sjofloy-hint { display: none; }
/* Biljard: panelet krymper til tre knapper, så bordet ikke dekkes */
.scene-sjofloy.spiller .sjo-juke { width: auto; }
.scene-sjofloy.spiller .sjo-juke-panel { padding: 8px 10px; }
.scene-sjofloy.spiller .sjo-juke-topp,
.scene-sjofloy.spiller .sjo-juke-liste,
.scene-sjofloy.spiller .sjo-juke-kred,
.scene-sjofloy.spiller .sjo-juke-info,
.scene-sjofloy.spiller .sjo-juke-volum { display: none; }

/* ═══ Jukeboksen: YouTube-video, løkke og tapp-takt (v1.2.0) ═══ */
.sjo-juke-panel { max-height: calc(100vh - 56px); overflow-y: auto; }
.sjo-juke-video { display: none; height: 200px; margin: 0 0 8px; border-radius: 8px; overflow: hidden; background: #000; }
.sjo-juke.har-video .sjo-juke-video { display: block; }
.sjo-juke-video iframe, .sjo-juke-video > div { display: block; width: 100%; height: 200px; border: 0; }
.sjo-juke-pers { display: none; margin: 0 0 8px; font-size: .74rem; line-height: 1.35; color: var(--tekst); opacity: .85; }
.sjo-juke.har-video .sjo-juke-pers { display: block; }
.sjo-juke-liste .gruppe { padding: 6px 8px 2px; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; opacity: .65; }
.sjo-juke-liste .er-sperret button { opacity: .45; text-decoration: line-through; }
.sjo-juke-lokke.er-paa { background: rgba(214, 171, 85, .28); border-color: var(--messing-lys); color: var(--messing-lys); }
.sjo-juke-takt { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .8rem; color: var(--tekst); }
.sjo-juke-takt[hidden] { display: none; }
.sjo-juke-takt-ut { overflow-wrap: anywhere; user-select: all; }
/* ═══ Jukeboksen: velg sjanger og tiår (v1.3.0) ═══ */
.sjo-juke-filter { margin: 0 0 8px; }
.sjo-juke-filter[hidden] { display: none; }
.sjo-juke-frad { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 4px; }
.sjo-juke-fchip {
  padding: 3px 9px; cursor: pointer; font: inherit; font-size: .76rem; line-height: 1.35;
  background: rgba(244, 228, 194, .07); color: var(--krem);
  border: 1px solid rgba(214, 171, 85, .3); border-radius: 999px;
}
.sjo-juke-fchip:hover, .sjo-juke-fchip:focus-visible { border-color: var(--messing-lys); }
.sjo-juke-fchip.er-paa { background: rgba(214, 171, 85, .28); border-color: var(--messing-lys); color: var(--messing-lys); }
.sjo-juke-fantall { margin: 2px 0 0; min-height: 1.1em; font-size: .74rem; color: var(--tekst); opacity: .85; }
.sjo-juke-liste li[hidden] { display: none; }
@media (max-height: 620px) { .sjo-juke-filter { display: none; } }

/* Biljard: videoen må fortsatt være synlig (minst 200 px høy), så panelet beholder bredden mens en YouTube-sang spiller */
.scene-sjofloy.spiller .sjo-juke.har-video { width: min(356px, calc(100% - 32px)); }
.scene-sjofloy.spiller .sjo-juke-pers,
.scene-sjofloy.spiller .sjo-juke-filter,
.scene-sjofloy.spiller .sjo-juke-takt { display: none; }
@media (max-width: 820px) { .scene-sjofloy.spiller .sjo-juke-video { display: none; } }
@media (max-height: 620px) { .sjo-juke-liste { max-height: 72px; } }

/* Mobil: lenkene øverst skjules mens du spiller (panelet har «Gå fra bordet»), så bordet får plassen */
@media (max-width: 700px) {
  .scene-sjofloy.spiller .scene-topp { display: none; }
  .sjo-hud { top: 12px; padding: 8px 12px 10px; }
  .sjo-hud-topp { font-size: .86rem; }
  .sjo-melding { font-size: .84rem; margin-bottom: 8px; }
  .sjo-knapper .knapp { font-size: .82rem; }
  .sjo-juke { left: 12px; bottom: 12px; width: calc(100% - 24px); }
  .sjo-juke-liste { max-height: 110px; }
  .sjo-juke-kontroll .knapp { font-size: .82rem; }
}

/* ═══ Storskjermen på gavlveggen (v1.4.0) ═══
   Videoen er det samme elementet hele tida (ellers lastes YouTube på nytt). Når skjermen åpnes, får .sjo-juke-video
   position: fixed og en størrelse som hotell-sjofloy.js regner ut. Klassen .skjerm-paa ligger på scenen mens det pågår,
   og .skjerm-kino i tillegg når flata på veggen blir for liten eller det mangler plass til panelet. */
.sjo-juke-video { position: relative; }
.sjo-skjerm-knapp {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 4px 11px; cursor: pointer; font: inherit; font-size: .78rem; line-height: 1.35;
  color: var(--krem); background: rgba(20, 12, 6, .8);
  border: 1px solid rgba(214, 171, 85, .55); border-radius: 999px;
}
.sjo-skjerm-knapp:hover, .sjo-skjerm-knapp:focus-visible { border-color: var(--messing-lys); color: var(--messing-lys); }
.sjo-juke-plass {
  display: none; margin: 0 0 8px; padding: 9px 12px;
  font-size: .8rem; line-height: 1.4; color: var(--tekst);
  border: 1px dashed rgba(214, 171, 85, .4); border-radius: 8px;
}
.scene-sjofloy.skjerm-paa .sjo-juke-plass { display: block; }
.scene-sjofloy.skjerm-paa .sjo-skjerm-knapp { display: none; }
/* backdrop-filter gjør panelet til «ramme» for fixed-elementer inni seg. Den slås av mens videoen står på veggen. */
.scene-sjofloy.skjerm-paa .sjo-juke-panel { backdrop-filter: none; background: rgba(20, 12, 6, .94); }
.scene-sjofloy.skjerm-paa .sjo-juke-video {
  position: fixed; z-index: 4; margin: 0; pointer-events: auto;
  border-radius: 2px; background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 0 56px rgba(255, 190, 110, .2);
}
.scene-sjofloy.skjerm-paa .sjo-juke-video iframe,
.scene-sjofloy.skjerm-paa .sjo-juke-video > div { width: 100%; height: 100%; }
/* Veggvisning: panelet krymper til tittel og knapper på venstre side, så det ikke dekker videoen */
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke { width: min(300px, var(--sjo-plass, 300px)); }
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke-liste,
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke-filter,
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke-takt { display: none; }
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke-kontroll { flex-wrap: wrap; }
.scene-sjofloy.skjerm-paa:not(.skjerm-kino) .sjo-juke-volum { flex: 1 1 100%; }
/* Kinovisning: mørk bakgrunn, videoen midt i bildet og bare det viktigste i panelet under */
.sjo-skjerm-bak { display: none; position: absolute; inset: 0; z-index: 2; background: rgba(6, 3, 1, .92); }
.scene-sjofloy.skjerm-kino .sjo-skjerm-bak { display: block; }
.scene-sjofloy.skjerm-kino .sjo-juke-video { border-radius: 6px; box-shadow: none; }
.scene-sjofloy.skjerm-kino .sjo-juke-liste,
.scene-sjofloy.skjerm-kino .sjo-juke-filter,
.scene-sjofloy.skjerm-kino .sjo-juke-pers,
.scene-sjofloy.skjerm-kino .sjo-juke-info,
.scene-sjofloy.skjerm-kino .sjo-juke-takt,
.scene-sjofloy.skjerm-kino .sjo-juke-plass { display: none; }
.scene-sjofloy.skjerm-paa #sjofloy-hint { display: none; }
.sjo-skjerm-tilbake { position: absolute; z-index: 5; top: 64px; left: 50%; transform: translateX(-50%); font-size: .9rem; padding: .45em 1.1em; }
.sjo-skjerm-tilbake[hidden] { display: none; }
@media (max-width: 700px) {
  .sjo-skjerm-tilbake { top: 12px; font-size: .84rem; }
}