:root{
  --bg:#ffffff;        /* white background */
  --card:#f3f4f6;      /* light gray cards */
  --muted:#7a7a7a;     /* medium gray for secondary text */
  --accent:#ff7a18;    /* warm orange accent */
  --text:#111111;      /* primary text (near-black) */
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
/* full-page background image (placed behind everything) */
body{
  background-image: url('BG z ATMRozrywka.tv.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* cover the viewport without distortion */
  background-color: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:stretch;
  justify-content:center;
}
#app{width:100%;max-width:1000px;min-height:100vh;display:flex;flex-direction:column;padding:12px}
#masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border-radius:10px;
  color: #fff;
  /* subtle overlay to keep masthead text readable over page BG */
  background-color: rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
}

/* ensure title logo fits nicely */
#titles { display:flex; flex-direction:column; gap:4px; }
#title-logo{height:40px; object-fit:contain}
#show-info{display:flex;align-items:center;gap:12px}
#logo{height:56px;width:auto;max-width:140px;object-fit:contain;border-radius:0;background:transparent;padding:0}
#show-title{font-weight:700;font-size:1.05rem}
#revival{font-size:0.82rem;color:var(--accent);font-style:italic;margin-top:2px}
#show-sub{color:var(--muted);font-size:0.88rem}
#controls{display:flex;align-items:center;gap:8px}
#controls button{background:transparent;border:0;font-size:18px;padding:8px;border-radius:8px;cursor:pointer;color:inherit}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:9px;
  background:rgba(255,255,255,0.06);
  color:var(--text);
  text-decoration:none;
  padding:6px;
  border:1px solid rgba(255,255,255,0.04);
  transition:transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.icon-btn svg{display:block; width:20px; height:20px}
.icon-btn:hover{transform:translateY(-2px); background:rgba(255,255,255,0.1); box-shadow:0 6px 14px rgba(0,0,0,0.12)}
.icon-btn:active{transform:translateY(0)}
#main{flex:1;display:flex;gap:12px;align-items:stretch}
#player-wrap{flex:2;position:relative;background:var(--card);border-radius:12px;overflow:hidden;min-height:220px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
#player{width:100%;height:100%;min-height:260px;border:0;display:block}
#player-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.big-btn{pointer-events:auto;background:var(--accent);color:white;border:0;padding:14px 20px;border-radius:12px;font-size:16px;cursor:pointer;box-shadow:0 8px 20px rgba(214,69,69,0.18)}
#sidebar{width:320px;background:var(--card);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.panel-title{font-weight:700;font-size:0.96rem}
#episodes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;overflow:auto}
#episodes li button{width:100%;text-align:left;border:0;background:#fafafa;padding:10px;border-radius:8px;cursor:pointer;color:var(--text)}
#episodes li button:hover{background:#f0f0f0}
#description{font-size:0.92rem;color:var(--muted);background:#fbfbfb;padding:10px;border-radius:8px}
#footer{padding:8px 12px;font-size:12px;color:var(--muted);text-align:center}

/* Mobile: single column, player first */
@media (max-width:720px){
  #app{padding:10px}
  #main{flex-direction:column}
  #sidebar{width:100%;order:2}
  #player-wrap{order:1;min-height:48vh;border-radius:12px}
  #logo{width:48px;height:48px}
}