/* ---------------------------------------------------------------------
   /sound/ — poslusanje 1.1 proti 1.2.

   Stran je dokumentna (doc.css) in se bere tudi brez JavaScripta; gumbi
   imajo v HTML `hidden` in jih odkrije sele `js/sound.js`. Gumb, ki ne
   naredi nicesar, je slabsi od gumba, ki ga ni.
   --------------------------------------------------------------------- */

.note { color: var(--dim); font-style: italic; }

/* --- tabela zasedb --------------------------------------------------- */

.bands { min-width: 40rem; }
.bands td:nth-child(2) { white-space: nowrap; }
.bands td:nth-child(3) { width: 9.5rem; }
.bands tr.on td { background: color-mix(in srgb, var(--gold) 8%, transparent); }

/* Gumb za predvajanje: kvadrat v zlati obrobi, kot gumbi v igri. Meri
   2,2 rem in ne 1 — v tabeli na telefonu je to tipna tarca, ne okras. */
button.play, button.fx {
  font: inherit;
  font-size: .78rem;
  line-height: 1;
  color: var(--gold);
  background: var(--bg);
  border: 2px solid var(--gold);
  border-radius: 2px;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .55rem;
  cursor: pointer;
  vertical-align: middle;
}
button.play { margin-right: .7rem; }
button.play:hover, button.fx:hover,
button.fx.on, tr.on button.play {
  background: var(--gold);
  color: var(--outline);
}
button.play:focus-visible, button.fx:focus-visible,
.deck button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --- seznami zvokov -------------------------------------------------- */

ul.sounds { list-style: none; margin: 1rem 0 1.6rem; }
ul.sounds li {
  padding: .35rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
ul.sounds li:last-child { border-bottom: 0; }
ul.sounds button.fx { margin-right: .6rem; }
ul.sounds button.fx + button.fx { margin-left: -.3rem; }
/* Kako je zvenelo prej: isti seznam, a odmaknjeno. */
ul.sounds li.was { opacity: .7; font-style: italic; }
ul.sounds li.was button.fx { border-style: dashed; }

/* --- povezava v App Store -------------------------------------------- */

.cta-row { margin: 2.4rem 0 0; }
.store-link {
  display: inline-block;
  padding: .85rem 1.3rem;
  color: var(--outline);
  background: var(--gold);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .82rem;
  border-radius: 2px;
  box-shadow: 0 3px 0 var(--outline);
}
.store-link:hover { filter: brightness(1.08); }

/* --- predvajalnik ----------------------------------------------------

   Pritrjen na dno okna, da preklop 1.1 / 1.2 ostane pod prstom, medtem ko
   bralec bere naprej. Sirok je kot besedilo in ne kot okno. */

body { padding-bottom: 7rem; }

.deck {
  position: fixed;
  left: 50%;
  bottom: max(.8rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(46rem, calc(100vw - 1.5rem));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .7rem .9rem;
  background: var(--card);
  border: 2px solid var(--gold);
  border-radius: 3px;
  box-shadow: 0 6px 0 var(--outline), 0 10px 30px rgba(0, 0, 0, .45);
  font-size: .8rem;
}
.deck[hidden] { display: none; }

.deck-now {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 1 1 10rem;
  min-width: 0;
}

.deck-ab { display: inline-flex; }
.deck-ab button, .deck-stop {
  font: inherit;
  font-weight: 700;
  color: var(--gold);
  background: transparent;
  border: 2px solid var(--gold);
  min-width: 3.2rem;
  height: 2.4rem;
  cursor: pointer;
}
.deck-ab button + button { border-left: 0; }
.deck-ab button[aria-pressed="true"] { background: var(--gold); color: var(--outline); }
.deck-stop { min-width: 0; padding: 0 .8rem; color: var(--dim); border-color: var(--dim); }

/* Tok skladbe; crtice delijo odseke — vsak odsek je ena stara zanka.
   Crtice so NAD zlatim polnilom, sicer bi jih napredek prekril. */
.deck-bar {
  flex: 1 1 8rem;
  height: .5rem;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  position: relative;
}
.deck-bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); width: 0; }
.deck-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right, transparent 0,
    transparent calc(100% / var(--parts, 1) - 2px),
    var(--card) calc(100% / var(--parts, 1) - 2px),
    var(--card) calc(100% / var(--parts, 1)));
}
.deck-time { color: var(--dim); font-variant-numeric: tabular-nums; min-width: 6.5rem; text-align: right; }

@media (max-width: 30rem) {
  .deck { font-size: .72rem; }
  .deck-now { flex-basis: 100%; }
  .deck-time { min-width: 0; }
}