/*
 * slitspace-player-arculat.css — a lejátszó illesztése a SlitSpace oldalhoz
 *
 * A `slitspace-player.css` UTÁN töltendő be. Csak a CSS-változókat és néhány
 * illesztési szabályt ír felül — a lejátszó saját logikáját nem érinti, így
 * a lejátszó frissítésekor ez a fájl változatlan maradhat.
 *
 * A színek és betűk a te `stilus.css`-ed tokenjeiből jönnek (--bg, --surface,
 * --text, --muted-2, --accent, --border, --ff-body, --ff-mono), tehát ha az
 * arculatot módosítod, a lejátszó AUTOMATIKUSAN követi.
 */

.slitspace-player {
  /* a te palettád — nem külön színvilág, hanem az oldalé */
  --ssp-hatter: var(--surface, #131113);
  --ssp-elem: var(--bg, #0a0a0b);
  --ssp-szoveg: var(--text, #ece8df);
  --ssp-halvany: var(--muted-2, #948f86);
  --ssp-kiemeles: var(--accent, #c8a96e);
  --ssp-keret: var(--border, rgba(255, 255, 255, .09));

  font-family: var(--ff-body, 'Jost', system-ui, sans-serif);

  /* A `.sp-media` doboznak MÁR van kerete és lekerekítése — a lejátszó ne
     rajzoljon másodikat. Így a médiakeret egységes marad az oldalon. */
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* A kép a médiakeret teljes szélességét kitölti, mint a többi médium */
.slitspace-player .ssp-kep-doboz {
  border-radius: 0;
}

/* Vezérlők: a te belső paddingod, hogy ne érjenek a kerethez */
.slitspace-player .ssp-vezerlok,
.slitspace-player .ssp-elo,
.slitspace-player .ssp-csatornak {
  padding-inline: .7rem;
}
.slitspace-player .ssp-vezerlok { padding-top: .6rem; }
.slitspace-player .ssp-csatornak { padding-bottom: .2rem; }

/* A számok és a státusz a te mono betűddel — mint a képfeliratok */
.slitspace-player .ssp-ido,
.slitspace-player .ssp-elo-ertek,
.slitspace-player .ssp-allapot {
  font-family: var(--ff-mono, 'DM Mono', ui-monospace, monospace);
  letter-spacing: .04em;
}

.slitspace-player .ssp-allapot {
  font-size: 9px;
  color: var(--muted, #6b6762);
  padding: .5rem .7rem .7rem;
  margin-top: 0;
}

.slitspace-player .ssp-elo-cimke,
.slitspace-player .ssp-csat-nev {
  font-family: var(--ff-mono, 'DM Mono', ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: lowercase;
}

/* A lejátszás gomb visszafogottabb, az oldal hangulatához */
.slitspace-player .ssp-gomb {
  width: 34px;
  height: 34px;
  font-size: 14px;
  border-color: var(--border-2, rgba(255, 255, 255, .16));
}

/* A mozgó fej a te "slit" vörösöddel — ez a projekt jelzőszíne */
.slitspace-player {
  --ssp-fej: var(--slit, #e0362f);
}

@media (max-width: 700px) {
  .slitspace-player .ssp-vezerlok,
  .slitspace-player .ssp-elo,
  .slitspace-player .ssp-csatornak { padding-inline: .5rem; }
}