:root {
  --bg: #1b1622;
  --metal-1: #d9d6cf;
  --metal-2: #a9a59c;
  --metal-dark: #3a3631;
  --shell: #2a2a2e;
  --label: #f3e9cf;
  --accent: #ff5a36;
  --accent-2: #ffb400;
  --teal: #29b6a5;
  --lcd-bg: #1f2b1c;
  --lcd-fg: #9dff6b;
  --ink: #1d1a24;
  --marker: #1d3a8f;              /* modrý lihový fix: logo i štítek kazety */
  --font-marker: "Permanent Marker", cursive;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;   /* klidné psací písmo na text písně */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  color: #eee;
  background:
    radial-gradient(circle at 15% 10%, #3b2550 0, transparent 45%),
    radial-gradient(circle at 85% 90%, #123b3f 0, transparent 45%),
    repeating-linear-gradient(45deg, #1d1825 0 12px, #1a1521 12px 24px),
    var(--bg);
}

button { font: inherit; cursor: pointer; }

.layout {
  display: grid;
  grid-template-columns: minmax(540px, 820px) minmax(300px, 1fr);
  grid-template-areas: "deck lyrics" "list list";
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* ---------- Přehrávač ---------- */
.deck {
  grid-area: deck;
  padding: 30px 34px 34px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--metal-1), var(--metal-2));
  box-shadow: 0 2px 0 #fff8 inset, 0 -3px 0 #0003 inset, 0 30px 60px #0008;
  color: var(--ink);
  position: relative;
}
.deck::before { /* broušený hliník */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 3px);
}

.deck-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.brand .logo {
  display: inline-block; font-family: var(--font-marker); font-size: 50px; line-height: 1;
  color: var(--marker); transform: rotate(-2deg);
  text-shadow: 0 0 1px #1d3a8f99;
}

.lcd {
  min-width: 210px; padding: 8px 12px; border-radius: 6px;
  background: var(--lcd-bg); color: var(--lcd-fg);
  font-family: Inter, sans-serif; font-weight: 600; font-size: 22px; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  box-shadow: 0 0 0 3px var(--metal-dark), 0 3px 8px #0006 inset;
  text-shadow: 0 0 6px #9dff6b88;
}
.lcd-row { display: flex; justify-content: space-between; gap: 12px; }
.lcd-row.small { font-size: 13px; opacity: .85; margin-top: 6px; }

/* Kazeta (SVG tělo + HTML vrstvy v souřadnicích viewBoxu 760×480) */
.bay { perspective: 1200px; }
.cassette {
  position: relative; aspect-ratio: 760 / 480; container-type: inline-size;
  transform-style: preserve-3d; transition: transform .35s ease-in;
  filter: drop-shadow(0 10px 14px #000a);
}
.cassette.flipping-out { transform: rotateY(90deg) scale(.92); }
.cassette.flipping-in { transition: transform .35s ease-out; }
.shell { position: absolute; inset: 0; width: 100%; height: 100%; }

.hand {
  position: absolute; left: 13.68%; width: 77.6%;
  display: flex; align-items: flex-end; overflow: hidden; white-space: nowrap;
  font-family: var(--font-marker); font-weight: 400; color: var(--marker); line-height: 1.15;
  transform: rotate(-.6deg); transform-origin: left bottom;
}
.hand.line1 { top: 9%; height: 7.7%; width: 70.5%; font-size: 4.1cqw; padding-left: 1cqw; }
.hand.line2 { top: 16.8%; height: 6.5%; font-size: 3.2cqw; padding-left: 3cqw; transform: rotate(.4deg); }
.side-letter {
  position: absolute; left: 6.2%; top: 9.6%;
  font-family: Inter, sans-serif; font-weight: 800; font-size: 8.4cqw; line-height: 1; color: #d8342c;
}

.window {
  position: absolute; left: 15.789%; top: 27.083%; width: 68.421%; height: 37.917%;
  border-radius: 1.4cqw; overflow: hidden;
  background: linear-gradient(180deg, #3a3633cc, #1d1b1acc);
}
.spool { position: absolute; top: 19.23%; width: 21.54%; height: 61.54%; display: grid; place-items: center; }
.spool.left { left: -0.77%; }
.spool.right { left: 79.23%; }
.tape {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  width: var(--d, 60%); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-radial-gradient(circle, #3b2418 0 1px, #2a170f 1px 2.5px);
  box-shadow: 0 0 0 1px #0006;
}
.tape.animate { transition: width var(--wind, 6s) linear; }
.hub { position: relative; width: 41%; height: auto; aspect-ratio: 1; }
.cassette.playing .hub { animation: spin 2.4s linear infinite; }
.cassette.winding .hub { animation: spin .28s linear infinite reverse; }
.cassette.forwarding .hub { animation: spin .28s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.screen {
  position: absolute; left: 20.58%; top: 2.75%; width: 58.85%; height: 94.5%;
  background: #000; border-radius: .8cqw; overflow: hidden;
  box-shadow: 0 0 0 .4cqw #0009;
}
.screen iframe, #player { width: 100%; height: 100%; display: block; border: 0; }
.glare {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, #ffffff1a 0 18%, transparent 30% 70%, #ffffff0d 82%);
}

/* Klávesy */
.controls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 30px; }
.key {
  height: 64px; border: 0; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #4a4741, #2c2a26);
  color: #f2efe8; font-size: 20px; line-height: 1;
  box-shadow: 0 6px 0 #161513, 0 8px 12px #0006;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  transition: transform .06s, box-shadow .06s;
}
.key small { font-size: 10px; letter-spacing: .2em; opacity: .7; font-weight: 600; }
.key:active, .key.down { transform: translateY(5px); box-shadow: 0 1px 0 #161513, 0 2px 4px #0006; }
.key-play { color: var(--lcd-fg); }
.key-flip { font-size: 16px; }
.key.locked { transform: translateY(5px); box-shadow: 0 1px 0 #161513, 0 2px 4px #0006; color: var(--accent-2); }
.key:focus-visible, .chip:focus-visible, .filters button:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.thumbs { display: flex; justify-content: center; gap: 18px; }
.thumb {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  border: 2px solid #0000002e; background: linear-gradient(180deg, #f3f1ec, #cfcbc2);
  font-size: 26px; line-height: 1; box-shadow: 0 3px 0 #0000003d;
  transition: transform .08s, background .15s, box-shadow .08s;
}
.thumb:hover { transform: translateY(-1px); }
.thumb:active { transform: translateY(2px); box-shadow: 0 1px 0 #0000003d; }
.thumb.up.on { background: var(--teal); border-color: var(--teal); }
.thumb.down.on { background: var(--accent); border-color: var(--accent); }
.thumb:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.thumb::after {                       /* vysvětlivka při najetí */
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px); white-space: nowrap;
  background: var(--ink); color: #fff; font: 600 13px/1.2 Inter, sans-serif;
  padding: 7px 11px; border-radius: 8px; box-shadow: 0 6px 16px #0006;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.thumb:hover::after, .thumb:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Text ---------- */
.lyrics {
  grid-area: lyrics;
  color: #2b2a33;
  border-radius: 18px;                  /* stejně jako přehrávač */
  padding: 26px 30px;
  box-shadow: 0 30px 60px #0008;
  /* čistý papír: jemné zrno + světlo shora vlevo, bez linek */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 15% 0%, #fffdf6 0, transparent 60%),
    linear-gradient(170deg, #fbf6ea 0%, #f3ead6 100%);
  display: flex; flex-direction: column;
  height: 0; min-height: 100%;          /* výška řádku = výška přehrávače, text se scrolluje uvnitř */
}
.lyrics header { display: flex; justify-content: space-between; align-items: baseline; }
.lyrics h2 { font-family: var(--font-marker); color: var(--marker); font-weight: 400; margin: 0 0 10px; font-size: 26px; }
#lyrics-source { font-size: 11px; opacity: .55; }
#lyrics-source a { color: inherit; }
.lyrics-body { overflow-y: auto; flex: 1; scroll-behavior: smooth; padding-right: 6px; }
.lyrics-body p { margin: 0; line-height: 1.5; padding: 2px 0; font-family: var(--font-hand); font-size: 21px; transition: color .2s, opacity .2s; }
.lyrics-body.synced p { opacity: .45; }
.lyrics-body.synced p.past { opacity: .7; }
.lyrics-body.synced p.now { opacity: 1; color: var(--marker); }
.lyrics-body p.gap { height: 18px; }
.muted { opacity: .55; font-style: italic; }

/* ---------- Seznam ---------- */
.tracklist {
  grid-area: list;
  background: #0006; border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 0 0 1px #ffffff14;
}
.tracklist header { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button {
  border: 1px solid #ffffff30; background: transparent; color: #ddd;
  padding: 7px 12px; border-radius: 999px; font-size: 14px;
}
.filters button.active { background: var(--accent-2); color: var(--ink); border-color: var(--accent-2); font-weight: 600; }
.filters b { font-weight: 800; margin-left: 4px; opacity: .8; }
#search {
  min-width: 260px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #ffffff30; background: #0005; color: #eee; font: inherit;
}

#tracks {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2px 18px;
  max-height: 520px; overflow-y: auto;
}
#tracks li {
  display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
}
#tracks li:hover { background: #ffffff12; }
#tracks li.current { background: #ff5a3633; box-shadow: 0 0 0 1px var(--accent) inset; }
#tracks li.unknown .t-name { opacity: .4; text-decoration: line-through; }
#tracks li.dead .t-name { opacity: .35; }
.t-pos { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .55; text-align: right; }
.t-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-name b { font-weight: 600; }
.t-name span { opacity: .65; }
.t-year { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .65; }
.t-flag { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.known .t-flag { background: var(--teal); }
.unknown .t-flag { background: var(--accent); }

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "deck" "lyrics" "list"; }
  .lyrics { height: 60vh; min-height: 0; }
}

.tools { display: flex; gap: 8px; align-items: center; }
.hidden-bar { margin-top: 12px; font-size: 14px; opacity: .8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hidden-bar button { border: 1px solid #ffffff30; background: transparent; color: #ddd; padding: 5px 12px; border-radius: 999px; font-size: 13px; }
#tracks li .t-restore { border: 1px solid #ffffff40; background: transparent; color: #eee; border-radius: 999px; font-size: 12px; padding: 2px 10px; }
.credits { text-align: center; font-size: 12px; opacity: .55; padding: 0 20px 30px; }
.credits a { color: inherit; }

@media (max-width: 600px) {
  .layout { padding: 12px 10px 40px; gap: 16px; }
  .deck { padding: 14px 12px 18px; }
  .deck-top { flex-wrap: wrap; }
  .lcd { min-width: 0; flex: 1 1 100%; font-size: 18px; overflow: hidden; }
  .lcd-row.small { font-size: 12px; }
  .brand { font-size: 17px; }
  .bay { padding: 8px; }
  .controls { gap: 5px; }
  .key { height: 54px; font-size: 16px; }
  .key small { font-size: 8px; letter-spacing: .1em; }
  .key-flip { font-size: 13px; }
  .brand .logo { font-size: 36px; }
  #search { min-width: 0; flex: 1; }
  .tools { width: 100%; }
  #tracks { grid-template-columns: minmax(0, 1fr); }
  #tracks li { grid-template-columns: 30px minmax(0, 1fr) auto auto; }
}

/* ztlumení hudby i zvuků, vedle displeje */
.deck-right { display: flex; align-items: center; gap: 14px; }
.mute {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 0; color: #f2efe8; background: linear-gradient(180deg, #4a4741, #2c2a26);
  box-shadow: 0 4px 0 #161513, 0 6px 10px #0005;
  transition: transform .06s, box-shadow .06s, color .15s;
}
.mute:active { transform: translateY(3px); box-shadow: 0 1px 0 #161513; }
.mute:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.mute .ico { width: 26px; height: 26px; }
.mute .ico-off, .mute.muted .ico-on { display: none; }
.mute.muted .ico-off { display: block; }
.mute.muted { color: var(--accent); }
@media (max-width: 600px) {
  .deck-right { flex: 1 1 100%; }
  .mute { width: 44px; height: 44px; flex: none; }
}

/* ---------- Režimy zobrazení: kazeta / kino / celá obrazovka ----------
   Okno YouTube se v DOM nikdy nepřesouvá (přesun = nové načtení videa), režimy mění jen CSS. */
.bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.modes { display: flex; padding: 4px; gap: 4px; border-radius: 999px; background: #0000001f; box-shadow: 0 1px 0 #fff6 inset; }
.mode-btn {
  display: flex; align-items: center; gap: 7px; border: 0; border-radius: 999px; padding: 8px 13px;
  background: transparent; color: #3a3631; font-weight: 600; font-size: 13px;
}
.mode-btn svg { width: 18px; height: 18px; flex: none; }
.mode-btn:hover { background: #ffffff55; }
.mode-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mode-btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }

.window { transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease; }
.screen { transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease; }
.spool, .glare { transition: opacity .3s; }
.fs-bar, .fs-catcher { display: none; }

/* Kino: okénko zabere skoro celou kazetu, z grafiky zůstane jen rámeček se šroubky */
@media (min-width: 1001px) {
  body.mode-cinema .layout { grid-template-columns: minmax(540px, 1080px) minmax(280px, 1fr); }
}
body.mode-cinema .window { left: 2.6%; top: 4.2%; width: 94.8%; height: 91.6%; background: #000; z-index: 2; }
body.mode-cinema .screen { left: 0; top: 0; width: 100%; height: 100%; border-radius: 1cqw; box-shadow: none; }
body.mode-cinema .spool, body.mode-cinema .glare { opacity: 0; }

/* Celá obrazovka: video přes celý displej, nahoře info, dole ovládání */
body.mode-full { overflow: hidden; }
body.mode-full .bay { perspective: none; }
body.mode-full .cassette { filter: none; transform: none; transform-style: flat; container-type: normal; }
body.mode-full .window {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh;
  border-radius: 0; background: #000; z-index: 100; transition: none;
}
body.mode-full .screen { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none; transition: none; }
body.mode-full .spool, body.mode-full .glare { display: none; }
/* vrstva nad videem: iframe YouTube jinak spolkne pohyb myši (lišty by se neukázaly) */
body.mode-full .fs-catcher { display: block; position: absolute; inset: 0; z-index: 1; }
body.mode-full .fs-bar {
  display: flex; align-items: center; gap: 14px;
  position: fixed; left: 0; right: 0; top: 0; z-index: 101;
  padding: 22px 30px 60px; color: #fff;
  background: linear-gradient(180deg, #000000d9, #00000000);
}
.fs-info { flex: 1; min-width: 0; }
.fs-title { font-family: var(--font-marker); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-sub { margin-top: 6px; font-size: clamp(14px, 1.2vw, 18px); opacity: .8; }
.fs-exit {
  width: 52px; height: 52px; border-radius: 50%; border: 0; flex: none;
  background: #ffffff1f; color: #fff; font-size: 22px;
}
.fs-exit:hover { background: #ffffff38; }
body.mode-full .transport {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 101;
  display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap;
  padding: 60px 30px 22px; background: linear-gradient(0deg, #000000d9, #00000000);
}
body.mode-full .controls { margin-top: 0; width: min(620px, 92vw); }
body.mode-full .key { height: 54px; }
body.mode-full .bottom-row { margin-top: 0; }
body.mode-full .modes { background: #ffffff1a; box-shadow: none; }
body.mode-full .mode-btn { color: #ddd; }
body.mode-full .mode-btn span { display: none; }
body.mode-full .mode-btn[aria-pressed="true"] { background: #fff; color: var(--ink); }
body.mode-full .fs-bar, body.mode-full .transport { transition: opacity .4s; }
body.mode-full.idle .fs-bar, body.mode-full.idle .transport { opacity: 0; }
body.mode-full.idle { cursor: none; }

@media (max-width: 600px) {
  .bottom-row { flex-direction: column-reverse; gap: 14px; }
  .mode-btn span { display: none; }
  body.mode-full .fs-bar { padding: 14px 16px 40px; }
  body.mode-full .transport { padding: 40px 12px 14px; gap: 12px; }
}

/* odkazy na YouTube a Spotify */
.links { display: flex; gap: 8px; }
.ext {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px;
  background: #0000001f; color: #3a3631; text-decoration: none; font-weight: 600; font-size: 13px;
  box-shadow: 0 1px 0 #fff6 inset; transition: background .15s;
}
.ext:hover { background: #ffffff66; }
.ext:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.ext svg { width: 20px; height: 20px; flex: none; }
.fs-links .ext { background: #ffffff1f; color: #fff; box-shadow: none; }
.fs-links .ext:hover { background: #ffffff38; }
@media (max-width: 1200px) { .bottom-row .ext span { display: none; } .bottom-row .ext { padding: 8px 10px; } }
@media (max-width: 600px) { .fs-links .ext span { display: none; } }

/* náhodné pořadí (stejný vzhled jako ztlumení, zapnuté = svítí) */
.shuffle.on { color: var(--lcd-fg); text-shadow: 0 0 6px #9dff6b88; }