/* Mobilní verze: stejný přehrávač a stejná data, jen tři obrazovky pod sebou (body.m, data-screen = start | list | play).
   Na počítači se z toho nic nezobrazí. */
.m-flags, .m-panel, .m-browse, .m-play, .m-bottom, .m-land, .m-only { display: none; }
body.m .m-only { display: flex; }

body.m { overflow: hidden; --mh: 58px; } /* všechna tlačítka mají stejnou výšku */
body.m #app { display: block; height: 100dvh; padding: 6px; }
body.m #cabinet, body.m #listbox { height: 100%; padding: 10px 9px; gap: 8px; border-width: 4px; border-radius: 24px; }
body.m .copy { display: none; }
body.m .arrowrow, body.m .bulbs { display: none; }

/* které obrazovky jsou vidět */
body.m[data-screen="list"] #cabinet { display: none; }
body.m[data-screen="play"] #listbox { display: none; }

/* nápis a okno */
body.m .sign h1 { margin: 0; font-size: clamp(15px, 5.2vw, 22px); letter-spacing: .03em; }
body.m #screen-wrap { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; border-width: 6px; border-radius: 12px; }
body.m .idle span { font-size: 56px; } body.m .idle p { font-size: 16px; }
body.m .note-screen span { font-size: 56px; } body.m .note-screen p { font-size: 15px; }
body.m .infobar { padding: 6px 8px; border-width: 2px; border-radius: 10px; }
body.m .status { font-size: 17px; min-height: 1.3em; line-height: 1.25; }
body.m .substatus { font-size: 13px; }

/* tlačítka: menší než na počítači, pořád s 3D stiskem */
body.m .btn { min-height: var(--mh); padding: 14px 2px 5px; font-size: 13px; border-radius: 14px; gap: 2px; margin-bottom: 0;
  box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, inset 0 -3px 0 #0003; }
body.m .btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #5a3d0e, 0 2px 3px #000c, inset 0 4px 8px #0009; }
body.m .btn .ico { width: 24px; height: 24px; }
body.m .btn .lamp { top: 6px; height: 6px; }
body.m .btn[data-lit] { box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, 0 0 14px 3px var(--glow), 0 0 30px 6px color-mix(in srgb, var(--glow) 40%, transparent); }
body.m .btn[data-lit] .lamp { box-shadow: 0 0 10px 3px var(--glow); }
body.m .btn:disabled { filter: grayscale(.8) brightness(.7); }
.m-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
body.m .btn.grey { background: linear-gradient(#cfc8bb, #9b9385); box-shadow: 0 6px 0 #5f594e, 0 9px 9px #000b, inset 0 2px 0 #fffa; }
body.m .btn.grey[data-lit] { background: linear-gradient(#fff3b0, #ffd34d); box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, 0 0 14px 3px var(--glow); }
body.m .btn.go { background: linear-gradient(#cfe9c9, #7fb878); }
body.m .btn.go[data-lit] { background: linear-gradient(#fff3b0, #ffd34d); }

/* oválné přepínače se dvěma stavy */
body.m .m-flags { display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.flag { min-height: 32px; padding: 3px 4px; font: inherit; font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; color: #8a7a60;
  background: #33261a; border: 2px solid #4a3622; border-radius: 14px; box-shadow: 0 3px 0 #1a120b; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.flag:active { transform: translateY(3px); box-shadow: none; }
.flag.on { color: #9dff9d; background: #1d3a1f; border-color: var(--green); box-shadow: 0 3px 0 #0e2410, 0 0 10px var(--green); }

/* obrazovka 1 */

/* obrazovka 3 */
body.m[data-screen="play"] .m-flags { display: grid; }
body.m[data-screen="play"] .m-panel { display: block; }
body.m[data-screen="play"] .m-browse { display: block; }
body.m[data-screen="play"] .m-play .m-row { grid-template-columns: repeat(3, 1fr); }
body.m .m-browse .btn { width: 100%; flex-direction: row; gap: 10px; padding-top: 13px; }
body.m .m-browse .btn .lbl { font-size: 17px; }
body.m .m-browse .btn .ico { width: 24px; height: 24px; }
body.m[data-screen="play"] .m-play { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
body.m[data-screen="play"] .m-bottom { display: grid; }
body.m[data-screen="play"] .infobar { padding-bottom: 8px; }
body.m .btn.pwr { background: linear-gradient(#fff3b0, #ffd34d); color: #d6291d; --glow: var(--green); }
body.m .btn.pwr .lamp { background: var(--green); box-shadow: 0 0 10px 3px var(--green); }
body.m .btn.pwr { box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, 0 0 14px 3px var(--green), 0 0 30px 6px #35d35f66; }

/* obrazovka 2 */
body.m #listbox .marquee { font-size: 24px; }
body.m .crumbs { font-size: 14px; text-align: center; padding: 4px 8px; }
body.m .list { gap: 8px; padding: 6px; scroll-snap-type: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.m .list::-webkit-scrollbar { width: 10px; } body.m .list::-webkit-scrollbar-thumb { border-width: 2px; }
body.m .item { padding: 10px 12px; border-width: 3px; border-radius: 14px; }
body.m .item h3 { font-size: 19px; margin-bottom: 4px; }
body.m .item p { font-size: 14px; margin-bottom: 8px; }
body.m .item .badge { font-size: 12px; padding: 1px 7px; }
body.m .item .btn { font-size: 15px; padding-top: 14px; flex-direction: row; }
body.m .navrow { display: flex; justify-content: center; gap: 14px; }
body.m .btn.nav { flex: 1 1 0; min-width: 0; font-size: 17px; flex-direction: row; padding-top: 14px; }
body.m .btn.nav .ico { width: 22px; height: 22px; }
body.m .btn.nav { background: linear-gradient(#fff3b0, #ffd34d); color: #000; box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, inset 0 -3px 0 #0003; }
body.m .btn.nav[data-lit] { box-shadow: 0 6px 0 #5a3d0e, 0 9px 9px #000b, inset 0 2px 0 #fffb, 0 0 14px 3px var(--glow); }
body.m .btn.nav:disabled { background: linear-gradient(#8f897d, #6b665c); box-shadow: 0 6px 0 #403c34, 0 9px 9px #000b; filter: none; color: #3b372f; }
body.m .btn.nav:disabled .lamp { background: #3b372f; box-shadow: none; }

/* vypnuto: vše zhasne a zešedne, svítí jen jemně červený Zapnout */
body.m[data-power="off"] #cabinet { background: linear-gradient(145deg, #4a3a2c, #33261b); border-color: #7a6a45; }
body.m[data-power="off"] .sign { filter: grayscale(1) brightness(.6); }
body.m[data-power="off"] .infobar, body.m[data-power="off"] .m-flags { opacity: .5; }
body.m[data-power="off"] #screen-wrap { filter: brightness(.3) grayscale(1); }
body.m[data-power="off"] .btn, body.m[data-power="off"] .btn[data-lit] { background: linear-gradient(#8f897d, #6b665c); color: #3b372f; opacity: .6; pointer-events: none;
  box-shadow: 0 6px 0 #403c34, 0 9px 9px #000b, inset 0 2px 0 #fff3; }
body.m[data-power="off"] .btn .lamp, body.m[data-power="off"] .btn[data-lit] .lamp { background: #3b372f; box-shadow: none; }
body.m[data-power="off"] .btn.pwr { opacity: 1; pointer-events: auto; color: #1f9a45; box-shadow: 0 6px 0 #403c34, 0 9px 9px #000b, inset 0 2px 0 #fff3, 0 0 12px 2px #ff4a3d88; }
body.m[data-power="off"] .btn.pwr .lamp { background: #ff4a3d99; box-shadow: 0 0 8px 2px #ff4a3d88; }
body.m[data-power="off"] .flag { pointer-events: none; }

/* Domů a Zpět jsou dole pod seznamem */
body.m #listbox .navrow { order: 9; }
body.m #listbox .list { flex: 1 1 0; }
body.m .list { max-height: none; }

/* pevná výška, aby dvouřádkový nápis („Celá obrazovka“) nezvětšil řadu */
body.m .btn { height: var(--mh); padding-top: 13px; }
body.m .btn .ico { width: 20px; height: 20px; }
body.m .btn .lbl { font-size: 12.5px; }
body.m .btn.nav .lbl { font-size: 16px; }

/* zvýrazněný panel: Vypnout, Pustit, Pozastavit, Ukončit */
.m-panel { padding: 10px 10px 16px; border-radius: 22px; background: linear-gradient(#120804, #2a1408); border: 3px solid var(--brass);
  box-shadow: inset 0 0 18px #000c, 0 0 0 3px #0008, 0 0 18px 2px #ffb52e44; }
.m-panel { --mh: 76px; } /* panel hlavního ovládání je o 30 % vyšší */
.m-panel .m-row { gap: 10px; grid-template-columns: repeat(3, 1fr); }
body.m[data-screen="play"] #cabinet { gap: 14px; } /* větší mezery mezi řadami */
body.m[data-power="off"] .m-panel { border-color: #7a6a45; box-shadow: inset 0 0 18px #000c; }

/* strom programů */
body.m .list { gap: 6px; padding: 6px; }
.trow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px; text-align: left; font: inherit; font-size: 18px; font-weight: 700; color: var(--cream);
  background: #3b1e0c; border: 3px solid #6e4220; border-radius: 14px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; }
.trow:active { filter: brightness(.85); }
.trow.folder { background: #2b2a45; border-color: #5b5aa0; color: #e3e4ff; }
.trow.playing { border-color: var(--green); background: #1d3a1f; box-shadow: 0 0 14px var(--green); }
.trow .mark { flex: none; width: 22px; text-align: center; font-size: 20px; color: var(--brass); }
.trow.folder .mark { color: #b9baf0; }
.trow .tt { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.trow .count { font-weight: 400; font-size: .8em; color: #b9baf0; }
.trow .badge { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 9px; font-size: 12px; font-weight: 800; background: var(--orange); color: #000; vertical-align: middle; }
.trow.d1 { margin-left: 16px; width: calc(100% - 16px); } .trow.d2 { margin-left: 32px; width: calc(100% - 32px); }
.trow.d3 { margin-left: 48px; width: calc(100% - 48px); } .trow.d4 { margin-left: 64px; width: calc(100% - 64px); } .trow.d5 { margin-left: 80px; width: calc(100% - 80px); }
body.m #crumbs { display: none; }
body.m[data-power="off"] .trow { pointer-events: none; }

body.m .btn.nav { font-size: 14px; flex-direction: column; padding-top: 13px; gap: 2px; }
body.m .navrow { gap: 8px; }

/* dva řádky pod videem */
body.m .infobar { padding: 5px 8px; }
body.m .status, body.m .substatus { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m .status { font-size: 17px; }

/* na šířku: video, dva řádky a jedna řada tlačítek: Vypnout, Pustit, Pozastavit, Ukončit, Celá obrazovka, Titulky, Programy */
@media (orientation: landscape) and (max-height: 560px) {
  body.m { --mh: 64px; }
  body.m #cabinet { padding: 6px 10px; gap: 6px; }
  body.m[data-screen="play"] .sign, body.m[data-screen="play"] .m-flags, body.m[data-screen="play"] .m-panel,
  body.m[data-screen="play"] .m-browse, body.m[data-screen="play"] .m-play, body.m[data-screen="play"] .m-bottom { display: none; }
  body.m[data-screen="play"] .m-land { display: flex; gap: 8px; margin-top: auto; }
  .m-land .btn { flex: 1 1 0; min-width: 0; }
  body.m[data-screen="play"] .infobar { display: none; }
  .m-land .btn.wide { flex: 2 1 0; flex-direction: row; gap: 8px; }
  body.m #screen-wrap { flex: 1 1 0; min-height: 0; aspect-ratio: 16 / 9; align-self: center; max-width: 100%; border-width: 5px; }
  body.m .infobar { padding: 3px 8px; }
  body.m .status { font-size: 15px; } body.m .substatus { font-size: 12px; min-height: 0; }
  body.m #listbox { padding: 6px 10px; gap: 6px; }
  body.m #listbox .marquee { font-size: 18px; }
  body.m .trow { min-height: 44px; font-size: 16px; padding: 4px 10px; }
  body.m .btn.nav { flex-direction: row; padding-top: 12px; flex: 0 0 150px; }
}
body.m[data-power="off"] .m-land .btn { pointer-events: none; }
body.m[data-power="off"] .m-land .btn.pwr { pointer-events: auto; }