/* Norsk kommentar:
   - Mobil: analog -> digital -> settings -> dag/natt
   - Desktop: analog + settings til venstre, digital til høyre, dag/natt nederst
   - Slidere (toggles) er touch-vennlige
   - Nytt: "Lys modus" styres med body.fun-mode (samme navn for å slippe JS-endringer)
   - Viktig: I lys modus gjør vi canvas-klokka mørk for å få kontrast på detaljene (tall/streker/navn)
*/

/* =========================
   THEME VARIABLES (DEFAULT = DARK)
   ========================= */
:root {
  /* Norsk kommentar: Dark modus (default) */
  --bg: #0b0f17;
  --text: #e7eefc;
  --muted: #9db0d0;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 12px 30px rgba(0,0,0,0.35);
  --radius: 16px;

  --page-gradient-a: #1b2b4a;
  --page-gradient-b: #0b0f17;

  --card-grad-a: rgba(255,255,255,0.02);
  --card-grad-b: rgba(255,255,255,0.01);
  --card-bg: rgba(0,0,0,0.00);

  /* Norsk kommentar: Panel-/glass-bakgrunner brukt i badges, wheels, toggles osv. */
  --panel: rgba(0,0,0,0.18);
  --panel-2: rgba(0,0,0,0.22);
  --panel-3: rgba(0,0,0,0.12);
  --glass: rgba(255,255,255,0.06);

  /* Norsk kommentar: Standard tekstfarger i hjulene */
  --wheel-text: rgba(231,238,252,0.72);
  --wheel-text-center: rgba(231,238,252,0.98);
  --wheel-center-glow: 0 0 14px rgba(180,200,255,0.25);

  /* Norsk kommentar: Toggle-knapp (sirkel) */
  --toggle-knob: rgba(231,238,252,0.82);

  /* Norsk kommentar: Markering i hjul */
  --wheel-highlight-bg: rgba(255,255,255,0.04);
  --wheel-highlight-border: rgba(255,255,255,0.14);

  /* Norsk kommentar:
     - Canvas bakgrunn/kant (selve analoge klokka)
     - Default mørk modus: subtil mørk glassflate
  */
  --canvas-bg: rgba(255,255,255,0.03);
  --canvas-border: rgba(255,255,255,0.10);
  --canvas-shadow: 0 10px 24px rgba(0,0,0,0.25);

  /* Norsk kommentar: Quiz */
  --quiz-accent: rgba(120,160,255,0.35);
  --quiz-soft: rgba(255,255,255,0.06);

  /* =========================
     Språkvelger / SELECT (Dark mode fix)
     =========================
     Norsk kommentar:
     - Dette fikser problemet du beskrev: bakgrunn i dropdown var for lik tekst
     - Vi setter egen bakgrunn/tekst for <select> og <option>
     - OBS: Noen nettlesere (særlig iOS) begrenser option-styling, men dette hjelper i Chrome/Edge/Firefox m.fl.
  */
  --select-bg: rgba(0,0,0,0.28);
  --select-text: rgba(231,238,252,0.96);
  --select-border: rgba(255,255,255,0.14);
  --select-option-bg: #0b0f17;
}

/* =========================
   "FUN MODE" = LIGHT MODE (to avoid JS changes)
   ========================= */
body.fun-mode {
  /* Norsk kommentar: Lys og tydelig (UI), men klokka (canvas) får mørk plate for kontrast */
  --bg: #f6f8ff;
  --text: #0b1220;
  --muted: rgba(11,18,32,0.70);
  --border: rgba(11,18,32,0.12);
  --shadow: 0 12px 26px rgba(10,20,40,0.12);

  --page-gradient-a: #ffffff;
  --page-gradient-b: #dbeafe;

  --card-grad-a: rgba(255,255,255,0.92);
  --card-grad-b: rgba(255,255,255,0.72);
  --card-bg: rgba(255,255,255,0.75);

  --panel: rgba(255,255,255,0.70);
  --panel-2: rgba(255,255,255,0.80);
  --panel-3: rgba(255,255,255,0.60);
  --glass: rgba(11,18,32,0.06);

  --wheel-text: rgba(11,18,32,0.60);
  --wheel-text-center: rgba(11,18,32,0.95);
  --wheel-center-glow: 0 0 10px rgba(40,90,200,0.18);

  --toggle-knob: rgba(11,18,32,0.78);

  --wheel-highlight-bg: rgba(40,90,200,0.06);
  --wheel-highlight-border: rgba(40,90,200,0.18);

  /* Norsk kommentar:
     - Her er hovedfixen: mørk klokkeplate i lys modus
     - Dette gjør at tall/streker/navn (som ofte tegnes lyst i canvas) blir synlige igjen.
  */
  --canvas-bg: rgba(11,18,32,0.88);
  --canvas-border: rgba(255,255,255,0.22);
  --canvas-shadow: 0 14px 34px rgba(0,0,0,0.22);

  /* Norsk kommentar: Quiz */
  --quiz-accent: rgba(40,90,200,0.20);
  --quiz-soft: rgba(11,18,32,0.06);

  /* Norsk kommentar: Språkvelger i lys modus */
  --select-bg: rgba(255,255,255,0.86);
  --select-text: rgba(11,18,32,0.96);
  --select-border: rgba(11,18,32,0.18);
  --select-option-bg: #ffffff;
}

* { box-sizing: border-box; }

/* Norsk kommentar:
   - Låser bort horisontal scrolling på mobil
   - Hindrer at siden blir litt bredere enn viewport når hjelpelag aktiveres
*/
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 20% 10%, var(--page-gradient-a) 0%, var(--page-gradient-b) 55%);
  color: var(--text);
  overflow-x: hidden; /* Hindrer høyre-kutt og sideveis scroll */
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  width: 100%;        /* Sikrer at page aldri blir bredere enn viewport */
  overflow-x: hidden; /* Ekstra sikkerhet mot mobil-overflow */
}


.header { margin-bottom: 14px; }
.header h1 { margin: 0 0 6px 0; font-size: 26px; }
.header p { margin: 0; color: var(--muted); }

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  grid-template-areas:
    "analog"
    "digital"
    "settings"
    "sunmoon";
}

.card {
  background: linear-gradient(180deg, var(--card-grad-a), var(--card-grad-b));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.card h2 { margin: 0; font-size: 16px; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.badge {
  font-size: 12px;
  letter-spacing: 0.8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--panel);
  user-select: none;
}

/* =========================
   Språkvelger / SELECT styling (Dark mode fix)
   =========================
   Norsk kommentar:
   - Vi styler både <select> og <option> slik at tekst blir synlig i dark mode
   - Vi treffer flere mulige selectors for å unngå at vi må vite eksakt ID/class:
     - #languageSelect (vanlig)
     - .language-select select (vanlig wrapper)
     - select[aria-label*="Language"] / select[name*="lang"] (fallback)
*/
select,
#languageSelect,
.language-select select,
select[name*="lang"],
select[id*="lang"],
select[aria-label*="Language"],
select[aria-label*="Språk"],
select[aria-label*="language"],
select[aria-label*="språk"]{
  background: var(--select-bg);
  color: var(--select-text);
  border: 1px solid var(--select-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Norsk kommentar:
   - Fokus: tydelig men diskret
*/
select:focus,
#languageSelect:focus,
.language-select select:focus{
  border-color: rgba(120,160,255,0.55);
  box-shadow: 0 0 0 3px rgba(120,160,255,0.18);
}

/* Norsk kommentar:
   - Option-styling: fungerer i mange nettlesere (Chrome/Edge/Firefox),
     men ikke 100% på alle plattformer (iOS kan ignorere).
*/
select option{
  background: var(--select-option-bg);
  color: var(--select-text);
}

/* Norsk kommentar:
   - Hvis nettleseren viser “inverted” option highlight, kan dette hjelpe litt
*/
select optgroup{
  background: var(--select-option-bg);
  color: var(--select-text);
}

/* Norsk kommentar:
   - Grid-areas: Analog og Hjelpere og Dag/natt er cards direkte i layout
   - Digital-kolonnen er nå en wrapper (.right-col-stack) som inneholder digital + quiz
*/


/* Norsk kommentar:
   - Tillat normal vertikal scrolling når man toucher utenfor klokkesirkelen
   - Selve klokka (clock-wrap/canvas) har fortsatt touch-action: none og tar drag riktig
*/
.card-analog {
  grid-area: analog;
  touch-action: pan-y; /* Tillater vertikal scroll */
  overscroll-behavior: auto;
}

.right-col-stack { grid-area: digital; }
.card-settings { grid-area: settings; }
.card-sunmoon { grid-area: sunmoon; }

/* Norsk kommentar:
   - Mobil: vi gjør right-col-stack til en fleks-kolonne
   - Da kan vi endre rekkefølge mellom Quiz og Digital uten å endre HTML
*/
.right-col-stack{
  display: flex;
  flex-direction: column;
  gap: 14px; /* Norsk kommentar: samme luft som i grid */
}

/* Norsk kommentar:
   - Mobil (default): Quiz skal ligge OVER Digital
   - (Quiz-kortet skjules helt når quiz er AV, så da blir digital automatisk øverst)
*/
.right-col-stack .card-quiz{ order: 1; margin-top: 0; }
.right-col-stack .card-digital{ order: 2; }

/* Norsk kommentar:
   - Desktop: Digital skal ligge OVER Quiz (som i dag)
*/
@media (min-width: 900px){
  .right-col-stack .card-digital{ order: 1; }
  .right-col-stack .card-quiz{ order: 2; }
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas:
      "analog digital"
      "settings digital"
      "sunmoon sunmoon";
  }
}

/* Analog canvas */
.clock-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 6px 0;

  touch-action: pan-y;              /* Norsk kommentar: hindrer iOS scroll/back-swipe når man bommer litt */
  overscroll-behavior: none;       /* Norsk kommentar: hindrer “rubber band” / pull-to-refresh i området */
  position: relative;              /* Norsk kommentar: nødvendig for at overlay kan ligge oppå canvas */
}

canvas {
  width: min(360px, calc(100vw - 36px));
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background: var(--canvas-bg);
  border: 1px solid var(--canvas-border);
  box-shadow: var(--canvas-shadow);
  touch-action: none;
}

/* Norsk kommentar: Expanded canvas kan bli “usynlig” for å unngå ytre ring */
.clock-wrap.expanded canvas {
  width: min(560px, calc(100vw - 36px));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Digital readout */
.digital-readout { display: flex; justify-content: center; margin: 8px 0 14px 0; }
#digitalText { font-size: 36px; letter-spacing: 1px; }

/* Norsk kommentar:
   - Tekstlinje over digitalt klokkeslett
*/
.clock-text-phrase{
  text-align: center;
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 14px;
  min-height: 18px;
  line-height: 18px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

/* Wheels row */
.wheel-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.colon { font-size: 28px; color: var(--muted); text-align: center; width: 12px; }

.wheel-lock {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  background: var(--panel);
  touch-action: none;
  user-select: none;
}


.wheel-title {
  font-size: 12px;
  color: var(--muted);

  /* Norsk kommentar:
     - Sørger for at "Timer" + lås alltid ligger på samme linje
     - Hindrer at låsen havner under teksten og skyver hjulet ned
  */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}


/* Norsk kommentar:
   - Pen og minimalistisk lås
   - Diskret når AV, tydelig når PÅ
   - Ingen hvit bakgrunn / firkantet ramme fra browser default
*/
.wheel-title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Norsk kommentar: nullstill default button-stil */
.wheel-lock-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  margin: 0;
  border-radius: 999px;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  /* Norsk kommentar: diskret når ulåst */
  opacity: 0.35;
  transform: translateY(1px);
  transition: opacity 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

/* Norsk kommentar: litt mer synlig ved hover */
.wheel-lock-btn:hover {
  opacity: 0.65;
}

/* Norsk kommentar: tydelig tastaturfokus uten å ødelegge design */
.wheel-lock-btn:focus-visible {
  outline: 2px solid var(--border);
  outline-offset: 2px;
  opacity: 0.9;
}

/* Norsk kommentar:
   - Når PÅ: tydelig chip med panel/border
   - Bruker både class + aria/data for robusthet
*/
.wheel-lock-btn.is-locked,
.wheel-lock-btn[aria-pressed="true"],
.wheel-lock-btn[data-locked="true"] {
  opacity: 1;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--border);
  transform: translateY(1px) scale(1.18);
}


.wheel-window {
  position: relative;
  margin: 10px auto 8px auto;
  width: 100%;
  max-width: 180px;
  height: 160px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--panel-2);
  overflow: hidden;
}

body.fun-mode .wheel-window {
  border-color: var(--border);
}

.wheel-window::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.10) 30%,
    rgba(0,0,0,0.10) 70%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

body.fun-mode .wheel-window::before {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.75) 0%,
    rgba(255,255,255,0.12) 30%,
    rgba(255,255,255,0.12) 70%,
    rgba(255,255,255,0.75) 100%
  );
}

.wheel-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}

.wheel-item {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--wheel-text);
}

.wheel-item.center {
  color: var(--wheel-text-center);
  text-shadow: var(--wheel-center-glow);
  font-weight: 700;
}

.wheel-highlight {
  position: absolute;
  left: 10px;
  right: 10px;
  top: calc(50% - 16px);
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--wheel-highlight-border);
  background: var(--wheel-highlight-bg);
  pointer-events: none;
}

.wheel-hint { font-size: 12px; color: var(--muted); }

.hint { margin-top: 10px; color: var(--muted); font-size: 13px; text-align: center; }

/* =========================
   Quiz spinner (NY LAYOUT)
   ========================= */

/* Norsk kommentar:
   - Quiz-området vises bare når JS fjerner [hidden]
*/
.quiz-area{
  margin-top: 12px;
  padding-top: 10px;
  border-top: none;
}

/* Norsk kommentar:
   - Hele quiz-kortet skjules når #quizArea er hidden
   - Krever :has()-støtte (moderne nettlesere)
*/
.card-quiz:has(#quizArea[hidden]) {
  display: none;
}

/* Norsk kommentar:
   - Vi ønsker quiz tett under digital, men uten rare dobbelt-regler.
   - (Du hadde to .card-quiz blokker før som kranglet. Nå er det bare én.)
*/
.card-quiz {
  margin-top: 14px;
}

/* =========================
   QUIZ TOP ROW
   ========================= */

.quiz-top-row{
  display: grid;
  grid-template-columns: 1fr 90px;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
}

.quiz-title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.6px;
}

.quiz-spin-invite{
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* =========================
   VERTICAL SLOT LEVER
   ========================= */

/* Norsk kommentar:
   - Vertikal slot-spake: ingen padding som kan “knekke” stanga visuelt
   - Innholdet (stang + kule) posisjoneres inni med absolute
*/
.quiz-lever-vertical{
  position: relative;
  width: 66px;
  height: 118px;
  border-radius: 16px;
  border: 1px solid var(--border);

  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  box-shadow: 0 10px 20px rgba(0,0,0,0.14);

  cursor: pointer;
  touch-action: none;

  /* Norsk kommentar: viktig – ingen padding her */
  padding: 0;

  /* Norsk kommentar: klipp innhold inni rundingen (gir clean look) */
  overflow: hidden;
}

body.fun-mode .quiz-lever-vertical{
  background: linear-gradient(180deg, rgba(11,18,32,0.05), rgba(11,18,32,0.02));
  box-shadow: 0 10px 18px rgba(10,20,40,0.10);
}

/* Stanga */
/* Norsk kommentar:
   - Stanga er nå ABSOLUTT posisjonert og alltid én sammenhengende strek
   - Vi lar den ha litt luft oppe/nede via top/bottom
*/
.quiz-lever-rod{
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 10px;
  transform: translateX(-50%);
  border-radius: 999px;

  background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.10));
  border: 1px solid rgba(255,255,255,0.14);
}

body.fun-mode .quiz-lever-rod{
  background: linear-gradient(180deg, rgba(11,18,32,0.18), rgba(11,18,32,0.06));
  border-color: rgba(11,18,32,0.14);
}

/* Rød kule */
.quiz-lever-handle{
  position: absolute;
  left: 50%;
  top: 10px;                      /* Norsk kommentar: startposisjon (samme som stang-top) */
  transform: translateX(-50%);    /* Norsk kommentar: JS styrer kun top */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,80,80,0.85));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 24px rgba(0,0,0,0.25);
  z-index: 2;                     /* Norsk kommentar: kula alltid over stanga */
}

.quiz-lever-handle::after{
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
}

.quiz-lever-vertical:active{
  transform: scale(0.98);
}

/* Norsk kommentar: Fallback “Spinn” knapp */
.quiz-spin-btn{
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
  min-width: 92px;
}

.quiz-spin-btn:active{
  transform: scale(0.985);
  filter: brightness(0.98);
}

/* Norsk kommentar: Når vi spinner, legger JS på .is-spinning */
.quiz-spin-btn.is-spinning{
  filter: brightness(1.03);
}

/* Norsk kommentar: Stor midtstilt tekst */
.quiz-question-big{
  margin-top: 12px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  /* Norsk kommentar: litt “leken” følelse */
  text-shadow: 0 10px 18px rgba(0,0,0,0.18);
}

/* Norsk kommentar: Linjer for hint og svar */
.quiz-line{
  margin-top: 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
}

/* Norsk kommentar: Små knapper brukt i quiz-linjene */
.quiz-mini-btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.quiz-mini-btn:active{
  transform: scale(0.985);
}

/* Norsk kommentar: Svar-knappen (gjenbruker din stil, men passer i linje) */
.quiz-reveal-btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.quiz-reveal-btn[disabled]{
  opacity: 0.45;
  cursor: not-allowed;
}

.quiz-line-text{
  font-size: 14px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.2px;
  min-height: 18px;
}

/* Norsk kommentar: Når svaret er skjult ønsker vi at teksten ser “nøytral” ut */
.quiz-answer-inline{
  opacity: 0.92;
}

/* ===== Slidere (toggles) ===== */
.toggle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 520px) {
  .toggle-grid { grid-template-columns: 1fr 1fr; }
}

.toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: var(--panel-3);
  user-select: none;
}

body.fun-mode .toggle {
  border-color: var(--border);
}

.toggle:active { filter: brightness(0.97); }

.toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.toggle-ui {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: var(--glass);
  position: relative;
  flex: 0 0 auto;
}

body.fun-mode .toggle-ui {
  border-color: var(--border);
}

.toggle-ui::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--toggle-knob);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  transition: left 160ms ease;
}

.toggle-text {
  font-size: 14px;
  color: rgba(231,238,252,0.92);
}

body.fun-mode .toggle-text {
  color: var(--text);
}

.toggle input:checked + .toggle-ui::after { left: 25px; }

.toggle input:checked + .toggle-ui {
  background: rgba(157,176,208,0.25);
  border-color: rgba(157,176,208,0.35);
}

body.fun-mode .toggle input:checked + .toggle-ui {
  background: rgba(40,90,200,0.18);
  border-color: rgba(40,90,200,0.28);
}

/* Sun/Moon */
.sunmoon .sky {
  position: relative;
  height: 110px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(120,160,255,0.22), rgba(10,20,40,0.35));
  overflow: hidden;
}

body.fun-mode .sunmoon .sky {
  background: linear-gradient(180deg, rgba(130,190,255,0.55), rgba(255,255,255,0.85));
}

.sun, .moon {
  position: absolute;
  top: 55%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.sun {
  left: 20%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,220,100,0.9));
  box-shadow: 0 0 22px rgba(255,220,100,0.35);
}

.moon {
  left: 80%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(180,200,255,0.8));
  box-shadow: 0 0 18px rgba(180,200,255,0.25);
  opacity: 0.8;
}

.sunmoon-text { margin-top: 10px; color: var(--muted); }

/* Norsk kommentar:
  iOS: Hindrer at hele siden “dras” når man interagerer med klokka.
  (Påvirker ikke vanlige klikk, men stopper overscroll-jank.)
*/
html, body {
  overscroll-behavior: none;
}

/* =========================
   Skjul/Vis klokker (overlays)
   ========================= */

/* Norsk kommentar:
   - Diskré knapp brukt både på analog og digital
   - Ligger i card-head (oppe til høyre)
*/
.hide-btn{
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
}

.hide-btn:active{
  transform: scale(0.98);
}

/* Norsk kommentar:
   - Felles tekststil brukt inni dummy-visningen "SKJULT"
*/
.clock-hide-text{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.75;
}

/* Norsk kommentar:
   - Analog overlay: dekker canvas uten å endre layout
   - Skjules som default (vises kun når JS setter .is-hidden på container)
*/
.clock-hide-overlay{
  position: absolute;
  inset: 10px 0 6px 0;        /* Norsk kommentar: matcher paddingen i .clock-wrap */
  display: none;              /* Norsk kommentar: default av */
  align-items: center;
  justify-content: center;
  pointer-events: none;       /* Norsk kommentar: når synlig skal den ikke “stjele” events (vi styrer via JS) */
}

.clock-hide-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--canvas-bg);
  border: 1px solid var(--canvas-border);
  box-shadow: var(--canvas-shadow);
  opacity: 0.95;
}

.clock-hide-overlay .clock-hide-text{
  position: relative;
  z-index: 1;
}

/* Norsk kommentar:
   - Digital overlay: dekker digitalt innhold uten å flytte layout
   - Vi legger den absolutt i card-digital (krever position:relative der)
*/
.card-digital{
  position: relative; /* Norsk kommentar: gjør at digital overlay kan posisjoneres inni kortet */
}

.digital-hide-overlay{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 48px;                 /* Norsk kommentar: under header-raden */
  bottom: 14px;
  display: none;             /* Norsk kommentar: default av */
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--panel);
  pointer-events: none;
}

/* Norsk kommentar:
   - Når analog er skjult:
     - Canvas blir usynlig (men tar plass)
     - Overlay vises
*/
.clock-wrap.is-hidden canvas{
  visibility: hidden;
}
.clock-wrap.is-hidden .clock-hide-overlay{
  display: flex;
}

/* Norsk kommentar:
   - Når digital er skjult:
     - Innholdet blir usynlig (men tar plass)
     - Overlay vises
*/
.card-digital.is-hidden #digitalContent{
  visibility: hidden;
}
.card-digital.is-hidden .digital-hide-overlay{
  display: flex;
}


/* Norsk kommentar:
   - Mobil: gjør sidepadding litt mindre og helt symmetrisk
   - Dette gjør at alle kortene "sentrerer" bedre og ikke ser forskjøvet mot høyre ut
*/
@media (max-width: 520px) {
  .page {
    padding-left: clamp(10px, 3.5vw, 14px);
    padding-right: clamp(10px, 3.5vw, 14px);
  }
}