/* Sjøkyndig – Leia 3D, prototype */
.s3d-wrap{max-width:900px;margin:0 auto;font-family:inherit}
.s3d-hud{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#12395f;color:#fff;border-radius:14px 14px 0 0;padding:10px 16px;
}
.s3d-tittel{font-weight:700;font-size:15px}
.s3d-proto{
  background:#f4c542;color:#3a2a08;font-size:10.5px;font-weight:800;
  border-radius:99px;padding:2px 9px;margin-left:8px;letter-spacing:.04em;
  text-transform:uppercase;vertical-align:2px;
}
.s3d-tall{font-size:14px;opacity:.92}
.s3d-riktig{color:#7fe0a7;font-weight:800}
.s3d-feil{color:#ff9d9d;font-weight:800}
.s3d-scene{position:relative;line-height:0;background:#cfe3f4}
/* aspect-ratio reserverer høyden JS-en setter (bredde x 0,62), så
   styreknappene under ikke hopper når skriptet er ferdig. */
.s3d-canvas{width:100%;display:block;touch-action:none;aspect-ratio:100/62}
/* Portrett-telefon: JS-en gir scenen 1,5 x bredden (se tilpass()). */
@media (max-width:759px) and (orientation:portrait){.s3d-canvas{aspect-ratio:2/3}}
/* Startpanelet er en vanlig blokk OVER scenen, ikke et overlegg i den –
   samme regler som spill3d.js legger på med !important, slik at siden
   ser lik ut før og etter at skriptet kjører. Fullskjerm styres av JS. */
.s3d-start{position:static;display:block;background:none;padding:0;margin:0 0 12px;line-height:1.5}
.s3d-start[hidden]{display:none}
.s3d-ovelser{margin:0 0 8px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.s3d-ovelser b{margin-right:6px;font-size:14px}
.s3d-ovknapp{padding:6px 12px;margin:0;border-radius:8px;border:1px solid #2b6cb0;background:#fff;color:#17344f;cursor:pointer;font:inherit}
.s3d-ovknapp.valgt{background:#2b6cb0;color:#fff}
.s3d-ovknapp.s3d-laast{opacity:.45;border-style:dashed;cursor:help}
.s3d-smakebit{flex-basis:100%;margin:6px 0 0;font-size:12.5px;color:#4a5b6c;text-align:left}
.s3d-smakebit a{color:#1f5c9e}
@media (pointer:coarse){.s3d-ovknapp{min-width:44px;min-height:44px;padding:0 10px}.s3d-ovelser{gap:6px}}
.s3d-regelboks{font-size:13px;line-height:1.45;background:rgba(43,108,176,0.12);border-radius:10px;padding:10px 12px;margin:8px 0;text-align:left}
.s3d-startkort{
  background:#fff;border-radius:16px;padding:22px 28px;max-width:680px;text-align:center;
  box-shadow:0 14px 40px rgba(10,28,46,.35);margin:0 auto;
}
.s3d-startkort h2,.s3d-startkort h3{margin:0 0 8px;color:#12395f;font-size:1.35em;line-height:1.3}
.s3d-startkort p{margin:0 0 10px;font-size:15px;color:#233240}
/* Fast farge, ikke opacity: 4,37:1 ble for lite. #4a5b6c gir 6,9:1 på hvitt. */
.s3d-mute{color:#4a5b6c;font-size:13.5px}
.s3d-startknapp{
  background:#1f5c9e;color:#fff;border:0;border-radius:12px;font:inherit;font-weight:700;
  font-size:16px;padding:11px 34px;cursor:pointer;margin-top:4px;
}
.s3d-startknapp:hover{background:#174a82}
.s3d-kort{
  position:absolute;left:12px;right:12px;bottom:12px;line-height:1.45;z-index:3;
  border-radius:12px;padding:10px 16px;font-size:14.5px;font-weight:600;
  background:#fff;color:#233240;box-shadow:0 8px 24px rgba(10,28,46,.3);
}
.s3d-kort.ok{background:#e2f4e9;color:#0b5232}
.s3d-kort.nei{background:#fde8e8;color:#8f1d28}
.s3d-kort.ferdig{background:#fff;color:#12395f;font-size:16px;text-align:center}
.s3d-kort[hidden]{display:none}
.s3d-igjen{
  background:#1f5c9e;color:#fff;border:0;border-radius:10px;font:inherit;font-weight:700;
  padding:8px 20px;margin-left:10px;cursor:pointer;
}
.s3d-par{
  background:rgba(255,255,255,.14);border-radius:99px;padding:2px 10px;
  margin-right:10px;font-weight:700;font-size:12.5px;
}
.s3d-pil{
  position:absolute;left:50%;bottom:72px;width:52px;height:52px;margin-left:-26px;
  background:rgba(10,28,46,.55);border:2px solid rgba(255,255,255,.75);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:23px;line-height:1;pointer-events:none;z-index:2;
  transition:opacity .3s;
}
.s3d-pil span{display:block;transition:transform .25s}
.s3d-kart{
  position:absolute;right:10px;bottom:10px;width:150px;height:200px;
  border:7px solid #23282d;border-radius:14px;box-shadow:0 6px 16px rgba(10,28,46,.5),inset 0 0 0 1px rgba(255,255,255,.08);
  z-index:2;pointer-events:none;background:#10171d;
}
@media (max-width:600px){
  .s3d-kart{width:96px;height:128px;border-width:4px}
}
.s3d-fullknapp{
  background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:8px;
  font-size:15px;padding:4px 10px;cursor:pointer;margin-left:10px;line-height:1;
}
.s3d-fullknapp:hover{background:rgba(255,255,255,.28)}
.s3d-batvalg{display:flex;gap:10px;justify-content:center;margin:0 0 12px}
.s3d-batknapp{
  flex:1;max-width:170px;background:#eef3f8;border:2px solid #c9d6e2;border-radius:12px;
  padding:10px 8px;font:inherit;font-size:14px;font-weight:700;color:#12395f;
  cursor:pointer;line-height:1.3;
}
.s3d-batknapp span{display:block;font-weight:400;font-size:12px;color:#3f5670}
.s3d-batknapp.valgt{border-color:#1f5c9e;background:#e2eefb;box-shadow:0 0 0 2px rgba(31,92,158,.25)}
.s3d-wrap:fullscreen{max-width:none;display:flex;flex-direction:column;background:#0a1826}
.s3d-wrap:fullscreen .s3d-hud{border-radius:0}
.s3d-wrap:fullscreen .s3d-kontroller{border-radius:0}
.s3d-wrap:fullscreen .s3d-scene{flex:1}
.s3d-kontroller{
  display:flex;gap:10px;justify-content:center;background:#12395f;
  border-radius:0 0 14px 14px;padding:12px;
}
.s3d-knapp{
  flex:1;max-width:220px;background:#1f5c9e;border:0;border-radius:12px;color:#fff;
  font-size:26px;padding:12px 0;cursor:pointer;touch-action:none;user-select:none;
  box-shadow:0 3px 0 rgba(0,0,0,.3);
}
.s3d-knapp:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.s3d-gassknapp{max-width:120px;background:#177a55;font-size:22px}
.s3d-gassknapp:active{background:#116043}
.s3d-gassmaaler{
  position:absolute;left:10px;bottom:10px;width:26px;height:104px;
  background:rgba(10,28,46,.62);border:2px solid rgba(255,255,255,.5);
  border-radius:8px;overflow:hidden;z-index:2;pointer-events:none;
}
.s3d-gassmaaler i{
  position:absolute;left:0;right:0;bottom:0;height:75%;
  background:linear-gradient(180deg,#f4c542,#2fae72);
  transition:height .12s linear;
}
.s3d-gassmaaler span{
  position:absolute;left:0;right:0;bottom:3px;text-align:center;
  color:#0a1c2e;font-size:8.5px;font-weight:800;letter-spacing:.05em;line-height:1;
}
@media (max-width:600px){
  .s3d-gassmaaler{width:20px;height:78px}
}
.s3d-lydknapp{margin-left:6px}
/* Styreknappene skjules bare når det finnes en ekte pekeenhet. Med bare
   bredde som kriterium forsvant de på telefon i liggende (844 px bred), og
   da var det ingen måte å styre på uten tastatur. */
@media (min-width:760px) and (pointer:fine){
  .s3d-kontroller{display:none}
}

/* ---- Sammenstøt og synking ---- */
.s3d-synk{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
  transition:opacity .18s linear;
  background:linear-gradient(180deg,rgba(26,74,96,.25) 0%,rgba(12,45,64,.82) 55%,rgba(6,26,40,.97) 100%);
}
.s3d-kort.s3d-sank{background:#12303f;color:#e6eef2}
.s3d-kort.s3d-sank b{color:#ffd7c2}
.s3d-kort.s3d-sank .s3d-igjen{background:#2f7fbf}
.s3d-kikkert{font-size:12.5px;font-weight:700;padding:4px 12px;line-height:1.35}
.s3d-kikkert[aria-pressed="true"]{background:#f4c542;color:#12395f}

/* ---- Mobil ----------------------------------------------------------
   Målt før endring på iPhone 14: spillflaten fikk 366x227 px, altså 27 %
   av skjermhøyden, og knappene var nede i 23 px. Her får flaten plass og
   berøringsflatene minst 44 px, som er grensen for å treffe med tommelen. */
@media (max-width:760px){
  .s3d-hud{padding:6px 8px;gap:4px;flex-wrap:nowrap;justify-content:flex-end}
  /* Tittelen ryker på telefon. Den står allerede i startkortet og i
     øvelsesvelgeren, mens «Situasjon N av 7» og tellerne er det man
     trenger under spilling. Med tittelen inne ble kikkertknappen dyttet
     utenfor skjermkanten. */
  .s3d-tittel{display:none}
  .s3d-proto{display:none}
  .s3d-par{padding:2px 7px;font-size:11.5px;margin-right:5px;flex:0 0 auto}
  .s3d-tall{font-size:12.5px;flex:1 1 auto;min-width:0;white-space:nowrap;
            display:flex;align-items:center;justify-content:flex-end;gap:3px}
  .s3d-kikkert{font-size:0}
  .s3d-kikkert::before{content:"🔭";font-size:20px;line-height:1}
  .s3d-kart{width:112px;height:150px;border-width:5px}
  .s3d-kort{font-size:14px;padding:9px 13px;left:8px;right:8px;bottom:8px}
}

/* Berøringsflater følger pekeenheten, ikke bredden: et nettbrett og en
   telefon i liggende er brede, men styres fortsatt med tommelen. 44 px er
   grensen for å treffe uten å bomme. */
@media (pointer:coarse){
  .s3d-fullknapp,.s3d-lydknapp,.s3d-kikkert,.s3d-byttknapp{
    min-width:44px;min-height:44px;padding:0 6px;margin-left:3px;flex:0 0 auto;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .s3d-knapp{font-size:30px;padding:15px 0;min-height:58px}
  .s3d-gassknapp{font-size:26px}
  .s3d-batknapp{min-height:54px;font-size:15px}
}

/* ---- Liggende telefon --------------------------------------------------
   Målt før endring på 844x390: HUD 111 + scene 265 + knapper 94 = 470 px på
   en 390 px skjerm, så scene og styreknapper kunne ikke være synlige
   samtidig. Kartplotteren dekket 21 % av scenen og lå oppå kompasset. */
@media (pointer:coarse) and (max-height:560px){
  .s3d-hud{padding:5px 8px;gap:4px;flex-wrap:nowrap;justify-content:flex-end}
  .s3d-tittel{display:none}
  .s3d-proto{display:none}
  .s3d-par{padding:2px 7px;font-size:11.5px;margin-right:5px;flex:0 0 auto}
  .s3d-tall{font-size:12.5px;flex:1 1 auto;min-width:0;white-space:nowrap;
            display:flex;align-items:center;justify-content:flex-end;gap:3px}
  .s3d-kikkert{font-size:0}
  .s3d-kikkert::before{content:"🔭";font-size:20px;line-height:1}
  .s3d-kontroller{padding:7px;gap:8px}
  .s3d-knapp{min-height:48px;padding:9px 0;font-size:25px}
  .s3d-kart{width:100px;height:132px;border-width:4px}
  .s3d-gassmaaler{width:18px;height:66px}
  /* Kompasset ligger inline på top/right og ville ellers ligge oppå kartet.
     Her flyttes det til venstre, der det er ledig. */
  .s3d-kompass{left:10px!important;right:auto!important;width:54px!important;height:54px!important}
  .s3d-startkort h3{font-size:16px;margin:4px 0}
  .s3d-regelboks{max-height:96px;overflow:auto}
}