/* Jejak Seni Sarah — gaya menu utama (index.html). Fon dan warna tema: base.css */

body{
 /* Warna langit dipaparkan sementara gambar latar dimuatkan */
 background:#8ED3F5 url("../images/background.jpg") center 40% / cover no-repeat;
}

/* Susun atur landskap: senarai di kiri (atas kertas), logo dan watak di kanan.
   Saiz ikut tinggi/lebar skrin supaya muat dari telefon (landskap) hingga skrin besar. */
#menu{
 position:fixed;
 inset:0;
 overflow:auto;
 display:grid;
 grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
 grid-template-rows:auto 1fr;
 grid-template-areas:"list logo" "list chars";
 padding:4vh 3vw 0 10vw;
 box-sizing:border-box;
 --ep-size:clamp(16px,min(4.6vh,2.6vw),60px);
}
/* Had tinggi ≈ 115% saiz asal gambar (logo 430px, watak 597px) supaya tidak kabur pada skrin besar */
.logo{grid-area:logo;justify-self:center;margin:0}
.logo img{height:min(38vh,22vw,495px);width:auto}
.chars{grid-area:chars;align-self:end;justify-self:end;height:min(55vh,31vw,690px);width:auto}
.list{grid-area:list;align-self:center;justify-self:start;font-size:var(--ep-size)}

/* Label "Senarai Episod" — gaya sapuan berus biru */
.label{
 display:inline-block;
 margin:0 0 .6em;
 padding:.2em 1.1em .25em;
 background:var(--blue);
 color:#fff;
 font-family:var(--font-subtitle);
 font-size:.85em;
 font-weight:700;
 border-radius:.5em 1.4em .6em 1.2em / 1em .6em 1.1em .7em;
 transform:rotate(-2deg);
 box-shadow:0 .08em 0 rgba(0,0,0,.15);
}

.episodes{list-style:none;margin:0;padding:0;display:grid;gap:.25em}
.ep{
 display:flex;
 align-items:center;
 gap:.4em;
 min-height:max(44px,1.5em);
 padding:.1em .6em .1em .3em;
 border-radius:999px;
 color:#fff;
 font-family:var(--font-title);
 font-weight:800;
 line-height:1.1;
 text-decoration:none;
 /* teks putih bergaris biru, seperti reka bentuk asal */
 -webkit-text-stroke:.16em var(--blue);
 paint-order:stroke fill;
 filter:drop-shadow(0 .06em 0 rgba(0,0,0,.15));
 transition:transform .2s ease,background-color .2s ease;
}
/* Landskap ada ruang mendatar: tajuk kekal satu baris */
.ep span{white-space:nowrap}
.ep svg{flex:none;width:1em;height:1em}
.ep:hover{transform:scale(1.04);background:rgba(24,140,240,.12)}
.ep:focus-visible{outline:4px solid var(--sun);outline-offset:2px;background:rgba(24,140,240,.12)}
.ep:active,.ep.is-opening{transform:scale(.97);background:rgba(24,140,240,.2)}

/* Lencana episod: bintang terbaik (sudah tamat) atau "Sambung" (separuh jalan). Tanpa garis teks biru .ep */
.ep-badge{flex:none;margin-left:.3em;-webkit-text-stroke:0;filter:none}
.ep-stars{display:flex;gap:.04em}
.ep-stars svg{width:.62em;height:.62em;fill:rgba(30,42,90,.18);stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.ep-stars svg.on{fill:var(--sun)}
.ep-resume{
 padding:.12em .6em;
 border-radius:999px;
 background:var(--sun);
 color:var(--ink);
 font-family:var(--font-subtitle);
 font-size:.5em;
 font-weight:700;
 line-height:1.2;
 white-space:nowrap;
}

/* Butang tetapan (gear) di penjuru kanan atas, dan dialog padam data */
.settingsBtn{
 position:fixed;
 z-index:10;
 top:max(10px,env(safe-area-inset-top));
 right:max(10px,env(safe-area-inset-right));
 display:flex;
 align-items:center;
 justify-content:center;
 box-sizing:border-box;
 width:clamp(44px,6.5vh,64px);
 height:clamp(44px,6.5vh,64px);
 padding:0;
 border:3px solid #fff;
 border-radius:50%;
 background:var(--sky);
 color:#fff;
 box-shadow:0 4px 12px rgba(0,0,0,.25);
 cursor:pointer;
 transition:transform .2s ease,background-color .2s ease;
}
.settingsBtn svg{width:58%;height:58%}
.settingsBtn:hover{transform:rotate(30deg) scale(1.06)}
.settingsBtn:active{transform:scale(.94)}
.settingsBtn:focus-visible{outline:4px solid var(--sun);outline-offset:3px}

#settings{
 position:fixed;
 inset:0;
 z-index:20;
 display:none;
 align-items:center;
 justify-content:center;
 box-sizing:border-box;
 padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
 background:rgba(0,0,0,.5);
 overflow:auto;
}
#settings.show{display:flex;animation:setFade .2s ease}
.settingsCard{
 position:relative;
 box-sizing:border-box;
 width:min(520px,100%);
 margin:auto;
 padding:clamp(18px,3vh,32px) clamp(18px,4vw,36px);
 border:6px solid #fff;
 border-radius:28px;
 background:var(--paper);
 box-shadow:0 12px 34px rgba(0,0,0,.35);
 color:var(--ink);
 text-align:center;
 animation:setPop .4s cubic-bezier(.34,1.56,.64,1);
}
.settingsView{display:flex;flex-direction:column;gap:12px}
.settingsView[hidden]{display:none}
.settingsCard h2{margin:0;font-family:var(--font-title);font-size:clamp(28px,4vh,40px);font-weight:800;color:var(--sky)}
.settingsCard h2.warn{color:#E3203F}
.settingsCard p{margin:0 0 6px;font-family:var(--font-body);font-size:clamp(16px,2.4vh,20px);line-height:1.4}
.sRow{display:flex;gap:12px}
.sRow .sBtn{flex:1}
.sBtn{
 min-height:52px;
 padding:0 1.2em;
 border:3px solid var(--sky-soft);
 border-radius:999px;
 background:#fff;
 color:#0A6FB5;
 font-family:var(--font-subtitle);
 font-size:clamp(16px,2.4vh,20px);
 font-weight:700;
 cursor:pointer;
}
.sBtn:hover{background:#EAF4FD}
.sBtn.danger{border-color:#E3203F;color:#E3203F}
.sBtn.danger:hover{background:#FDECEE}
.sBtn.danger.solid{background:#E3203F;border-color:#fff;color:#fff;box-shadow:0 0 0 3px #E3203F}
.sBtn.danger.solid:hover{background:#C81A35}
.sBtn:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
@keyframes setFade{from{opacity:0}to{opacity:1}}
@keyframes setPop{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:none}}

/* Susun atur potret (telefon/tablet tegak): logo di atas, senarai di tengah, watak di bawah */
@media (max-aspect-ratio:1/1){
 #menu{
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"logo" "list" "chars";
  padding:3vh 5vw 0;
  --ep-size:clamp(18px,5.4vw,34px);
 }
 .logo img{height:min(24vh,60vw)}
 .list{justify-self:center;max-width:100%;margin:2.5vh 0 1vh}
 .ep span{white-space:normal} /* skrin sempit: tajuk panjang boleh dua baris */
 /* watak mengisi ruang yang tinggal di bawah (mengecil pada skrin pendek supaya tiada skrol) */
 .chars{justify-self:center;height:100%;max-height:min(30vh,80vw);min-height:0}
}

@media (prefers-reduced-motion:reduce){
 .ep,.settingsBtn{transition:none}
 #settings.show,.settingsCard{animation:none}
}