/* ============================================================
   Kozmos Kosovel — galerijski predvajalnik
   Naprava: BOOX Go 10.3 (Gen II), E Ink Carta 1200,
   2480 x 1860, 300 ppi, SIVINSKI zaslon.

   Načela za E Ink:
   - samo črno-belo / sivine, NAJVIŠJI kontrast
   - brez animacij / prehodov (sledi / ghosting)
   - diskretne menjave, velike berljive tipografije
   ============================================================ */

:root {
  --bg:        #ffffff;
  --fg:        #000000;
  --muted:     #666666;
  --line:      #000000;
  --line-soft: #cfcfcf;
  --bar-h:     clamp(64px, 8vh, 120px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: none !important;
  animation: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
  touch-action: none;         /* brez zoom; menuji spodaj dovolijo pan-y */
  cursor: default;            /* kazalec viden (na tablici miške ni) */
  -webkit-font-smoothing: antialiased;
}
body { position: fixed; inset: 0; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
[hidden] { display: none !important; }

/* Osnova zaslonov */
.screen { position: fixed; inset: 0; background: var(--bg); }

/* ============================================================
   ZAČETNI ZASLON
   ============================================================ */
.start { display: flex; align-items: center; justify-content: center; z-index: 40; }
.start__inner { text-align: center; padding: 4vmin; }
.start__title { font-size: clamp(2.6rem, 6.5vw, 6.5rem); font-weight: 700; letter-spacing: 0.02em; }
.start__subtitle {
  margin-top: 1.2vmin; font-size: clamp(1rem, 2.4vw, 2.2rem);
  color: var(--muted); font-family: Arial, Helvetica, sans-serif;
}
.start__btn {
  margin-top: 6vmin; padding: clamp(0.9rem, 2vw, 1.6rem) clamp(2.2rem, 6vw, 4.5rem);
  font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.2rem, 2.8vw, 2.6rem);
  font-weight: 700; border: 3px solid var(--fg); background: var(--bg); color: var(--fg);
}
.start__btn:active { background: var(--fg); color: var(--bg); }
.start__hint {
  margin-top: 4vmin; font-size: clamp(0.9rem, 1.8vw, 1.5rem);
  color: var(--muted); font-family: Arial, Helvetica, sans-serif;
}

/* ============================================================
   MENIJI (dovoljeno navpično drsenje)
   ============================================================ */
.menu {
  z-index: 30;
  bottom: var(--bar-h);
  overflow-y: auto;
  touch-action: pan-y;
  padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 5rem);
  font-family: Arial, Helvetica, sans-serif;
}
.menu__head { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.menu__head--row { display: flex; align-items: center; gap: 2rem; }
.menu__title { font-family: Georgia, serif; font-size: clamp(2rem, 4.5vw, 4.5rem); font-weight: 700; }
.menu__sub { margin-top: 0.6rem; font-size: clamp(1rem, 2.2vw, 2rem); color: var(--muted); }

.nav-back {
  font-size: clamp(1.1rem, 2.4vw, 2.2rem); font-weight: 700;
  border: 3px solid var(--fg); padding: 0.5rem 1.4rem; white-space: nowrap;
}
.nav-back:active { background: var(--fg); color: var(--bg); }

/* Seznam ZT */
.ztlist { list-style: none; display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.8rem); }
.zt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  width: 100%; text-align: left; border: 3px solid var(--fg);
  padding: clamp(1.2rem, 2.6vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem);
}
.zt:active { background: var(--fg); color: var(--bg); }
.zt__name { font-family: Georgia, serif; font-size: clamp(1.5rem, 3.4vw, 3.2rem); font-weight: 700; }
.zt__meta { font-size: clamp(0.9rem, 1.8vw, 1.5rem); color: var(--muted); white-space: nowrap; }
.zt:active .zt__meta { color: var(--bg); }

/* Seznam terminov s skladbami */
.terminlist { display: flex; flex-direction: column; gap: clamp(1.4rem, 3vw, 2.6rem); }
.termin {
  display: block; width: 100%; text-align: left; border: 3px solid var(--fg);
  padding: clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.termin:active { background: #f0f0f0; }
.termin__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(0.8rem, 1.6vw, 1.4rem); padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--line-soft);
}
.termin__title { font-family: Georgia, serif; font-size: clamp(1.3rem, 3vw, 2.8rem); font-weight: 700; }
.termin__play { font-size: clamp(0.95rem, 2vw, 1.7rem); font-weight: 700; }
.termin__play::before { content: "▷ "; }

.songs { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.song { display: flex; align-items: center; gap: 1rem; }
.song__idx { color: var(--muted); font-size: clamp(0.8rem, 1.5vw, 1.2rem); min-width: 2.2ch; }
.song__title {
  flex: 1; font-size: clamp(1rem, 2vw, 1.7rem);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.song__perf { color: var(--muted); font-size: clamp(0.8rem, 1.5vw, 1.2rem); white-space: nowrap; }

/* Oznaki jezika (razpoložljivost besedila) */
.badges { display: flex; gap: 0.4rem; }
.badge {
  font-size: clamp(0.7rem, 1.3vw, 1.05rem); font-weight: 700; letter-spacing: 0.04em;
  border: 2px solid var(--fg); padding: 0.12em 0.5em; line-height: 1.1;
}
.badge--off { color: var(--line-soft); border-color: var(--line-soft); text-decoration: line-through; }

/* ============================================================
   PREDVAJALNIK
   ============================================================ */
.player {
  z-index: 10; bottom: var(--bar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4vmin 7vmin;
}
.note {
  font-family: Arial, Helvetica, sans-serif; color: var(--muted);
  font-size: clamp(0.9rem, 1.8vw, 1.5rem); margin-bottom: 1.5vmin; text-align: center;
}
.text {
  max-width: 46ch; text-align: center;
  white-space: pre-wrap; word-break: normal; hyphens: none;
  line-height: 1.3;                 /* razmik 130 % */
  font-family: 'Archivo', Arial, sans-serif;   /* SLO: Archivo Medium */
  font-weight: 500;                 /* Medium */
  font-stretch: 100%;
  font-size: 48px;   /* začetna; app.js samodejno prilagodi, da pade na zaslon */
}
/* ENG: Archivo Condensed Medium (ožja različica prek font-stretch) */
.text.text--en {
  font-family: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  font-stretch: 62.5%;
}
/* Sporočilo (npr. ni angleškega prevoda) — fiksna, umirjena velikost. */
.text--msg {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.6; color: var(--muted); max-width: 30ch;
}

/* ============================================================
   SPODNJA VRSTICA
   ============================================================ */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--bar-h);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(0.6rem, 2.5vw, 2.5rem);
  border-top: 2px solid var(--line); background: var(--bg); z-index: 50;
}

/* Puščici za hiter prehod med skladbami (‹ prejšnja, › naslednja). */
.nav-arrow {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1.8rem, 4vw, 3.4rem); font-weight: 700; line-height: 1;
  color: var(--fg); padding: 0.1rem clamp(0.7rem, 1.8vw, 1.4rem);
}
.nav-arrow:active { background: var(--fg); color: var(--bg); }
/* Kotna gumba (izhod = krog levo, meni = kvadrat desno).
   ODMAKNJENA od roba, da se izogneta robnim gestam Androida/BOOX,
   z veliko dotično površino (celotna višina vrstice). */
.bar__exit, .bar__menu {
  position: absolute; bottom: 0; height: var(--bar-h);
  width: clamp(88px, 9vw, 128px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0.3;
}
.bar__exit { left: clamp(24px, 5vw, 80px); }
.bar__exit::after {
  content: ""; width: 16px; height: 16px;
  border: 2px solid var(--fg); border-radius: 50%;
}
.bar__exit:active, .bar__menu:active { opacity: 0.6; }

/* Meni — vizualno skrit, diskreten (kot izhodna kroglica), za osebje.
   V spodnjem desnem kotu; obiskovalci ga ne opazijo. */
.bar__menu { right: clamp(24px, 5vw, 80px); }
.bar__menu::after {
  content: ""; width: 16px; height: 16px; border: 2px solid var(--fg);
}

.lang { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.6rem); font-family: Arial, Helvetica, sans-serif; }
.lang__btn {
  font-size: clamp(1.1rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: 0.06em;
  padding: 0.4rem clamp(0.8rem, 2vw, 1.6rem); color: var(--muted); border: 3px solid transparent;
}
.lang__btn.is-active { color: var(--fg); border-color: var(--fg); }
.lang__btn:disabled { color: var(--line-soft); }
.lang__sep { width: 2px; height: clamp(1.4rem, 3vw, 2.6rem); background: var(--line-soft); }

/* ============================================================
   TIPKOVNICA ZA KODO
   ============================================================ */
.keypad {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 80;
}
.keypad__box { text-align: center; border: 3px solid var(--fg); padding: clamp(2rem, 4vw, 4rem); background: var(--bg); }
.keypad__label { font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.1rem, 2.2vw, 2rem); margin-bottom: 2.4vmin; }
.keypad__label.is-error { font-weight: 700; }
.keypad__dots { display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 3vmin; min-height: 28px; }
.keypad__dots .dot { width: 20px; height: 20px; border: 2px solid var(--fg); border-radius: 50%; }
.keypad__dots .dot.is-filled { background: var(--fg); }
.keypad__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.key {
  font-family: Arial, Helvetica, sans-serif; font-size: clamp(1.4rem, 2.8vw, 2.6rem); font-weight: 700;
  min-width: clamp(70px, 8vw, 120px); min-height: clamp(70px, 8vw, 120px); border: 2px solid var(--fg);
}
.key:active { background: var(--fg); color: var(--bg); }
.key--muted { font-size: clamp(1rem, 2vw, 1.8rem); color: var(--muted); border-color: var(--line-soft); }