/* Kanit 400/500/600 (SIL Open Font License 1.1, see OFL.txt) — self-hosted copies of the files
   Google Fonts serves, same unicode-range subsets: a browser downloads only the subsets a page uses. */
/* thai */
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kanit-400-thai-v17.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
/* vietnamese */
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kanit-400-vietnamese-v17.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kanit-400-latin-ext-v17.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Kanit';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/kanit-400-latin-v17.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* thai */
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-thai-v17.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
/* vietnamese */
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-vietnamese-v17.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-latin-ext-v17.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Kanit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/kanit-500-latin-v17.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* thai */
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-thai-v17.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
/* vietnamese */
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-vietnamese-v17.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
/* latin-ext */
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-latin-ext-v17.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* latin */
@font-face{font-family:'Kanit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/kanit-600-latin-v17.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{color-scheme:dark;--bg:#0d0d12;--panel:rgba(32,31,39,.68);--glass:rgba(35,34,43,.58);--line:rgba(255,255,255,.10);--pink:#d7a1b7;--pink-soft:rgba(215,161,183,.16);--text:#f5f3f6;--muted:#aaa5b1;--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--bg);font:14px/1.65 "IBM Plex Sans Thai","Manrope",system-ui,sans-serif;min-height:100dvh}button,input,select{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:disabled{opacity:.5;cursor:not-allowed}img{display:block;max-width:100%}:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.shell{max-width:1480px;width:100%;margin:0 auto;padding-left:clamp(16px,4.3vw,62px);padding-right:clamp(16px,4.3vw,62px)}.muted{color:var(--muted)}.kicker{letter-spacing:.18em;font-size:11px;font-weight:700;color:var(--pink);font-family:Manrope,sans-serif}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);background:#27252d;color:var(--text);font-weight:600;padding:11px 19px;border-radius:13px;min-height:43px;transition:background .18s,transform .18s}.btn:hover{background:#34313b}.btn:active{transform:scale(.97)}.btn.primary{background:var(--pink);border-color:var(--pink);color:#261823}.btn.primary:hover{background:#e2b2c6}.btn.ghost{background:rgba(255,255,255,.045)}.btn.small{padding:7px 13px;min-height:36px;font-size:12px}

.section{margin-top:39px;margin-bottom:47px}.catalog{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px 15px}.card{min-width:0;cursor:pointer;border:0;background:transparent;padding:0;text-align:left;color:var(--text)}.poster{aspect-ratio:2/3;overflow:hidden;position:relative;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:#23202a;display:grid;place-items:center}.poster img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.card:hover .poster img{transform:scale(1.045)}.poster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 73%,rgba(0,0,0,.24))}.card-title{font-weight:600;font-size:13px;line-height:1.55;margin:10px 2px 3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}.card-sub{color:var(--muted);font-size:11px;margin:0 2px}.skeleton{background:linear-gradient(90deg,#25222b,#2d2831,#25222b);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}.skeleton-card .poster{border:0}.skeleton-card .line{height:11px;border-radius:5px;margin-top:10px;width:82%}.skeleton-card .line.short{width:56%;height:8px}@keyframes shimmer{to{background-position-x:-200%}}.notice{padding:34px 15px;text-align:center;color:var(--muted);grid-column:1/-1;background:#1a1920;border:1px solid var(--line);border-radius:17px}.footer{padding:30px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;margin-top:70px}.footer .shell{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.tags{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 14px}.tag{font-size:11px;border-radius:9px;background:rgba(215,161,183,.10);color:#dfb5c7;padding:4px 9px}
.search-intro{padding:43px 0 19px}.search-intro h1{font-size:clamp(30px,4.3vw,48px);letter-spacing:-.055em;line-height:1.2;margin:0 0 9px}.search-input-wrap{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:15px;max-width:780px;width:100%}.search-input-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:16px;min-width:0}.filterbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 27px}.filterbar select{background:#26242c;color:var(--text);border:1px solid var(--line);padding:10px 16px;border-radius:12px;min-width:132px;max-width:100%;outline:none}.filterbar select:focus{border-color:#d7a1b7}.filterbar .btn{padding:10px 14px}
.player-shell{border:1px solid var(--line);border-radius:19px;overflow:hidden;background:#08090d}.player-stage{aspect-ratio:16/9;position:relative;display:grid;place-items:center;background:#07080d;overflow:hidden}.player-stage video,.player-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.player-stage video{object-fit:contain}.player-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.46)}.player-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.45));text-align:center;padding:18px}.play-button{border:1px solid rgba(255,255,255,.23);background:var(--pink);color:#2c1826;border-radius:50%;width:76px;height:76px;font-size:26px;display:grid;place-items:center;transition:transform .2s}.play-button:active{transform:scale(.92) rotate(-4deg)}.player-status{color:#e5dce6;font-size:12px}.fullscreen{position:absolute;z-index:5;right:10px;bottom:11px;border:1px solid var(--line);background:#0b0c0edb;color:#fff;border-radius:9px;padding:6px 10px;min-width:34px}.player-error{display:grid;place-items:center;gap:9px;text-align:center;padding:20px;height:100%;color:#d3cbd4}.player-error .btn{margin-top:6px}.video-choice{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.choice{font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#26252c;color:#c6bfc8;transition:transform .17s}.choice:active{transform:scale(1.06) rotate(-2deg)}.choice.active{background:var(--pink);color:#261721;border-color:var(--pink)}.episode-grid{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 0}.watch-details{margin:17px 0;padding:10px 0}.watch-details h1{font-size:23px;line-height:1.45;letter-spacing:-.03em;margin:7px 0}.watch-details p{color:var(--muted);line-height:1.9}.recommendations{margin-top:18px}.recommendations h2{font-size:24px;margin:0 0 20px}
@media(max-width:1150px){.catalog{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:850px){.catalog{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.section{margin-top:27px}.catalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 9px}.poster{border-radius:10px}.card-title{font-size:11px;min-height:34px;margin-top:7px}.card-sub{font-size:10px}.search-intro{padding-top:30px}.search-input-wrap{padding:9px 13px}.filterbar{gap:7px}.filterbar select{flex:1;min-width:calc(50% - 7px);padding:10px}.filterbar .btn{flex:1}.player-shell{border-radius:13px}.watch-details h1{font-size:18px}.play-button{width:63px;height:63px;font-size:23px}.recommendations h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Seamless playback: keep the poster visible only while media starts. */
.player-stage video,.player-stage iframe{z-index:1}
.player-poster{z-index:0}
.player-overlay{z-index:2}
.player-loading{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:12px;flex-direction:column;padding:15px;color:#fff;background:rgba(8,9,15,.54);text-align:center;font-weight:600;pointer-events:none}
.loading-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.19);border-top-color:var(--pink);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.player-failure{position:absolute;inset:0;z-index:4;background:rgba(8,9,15,.82);align-content:center;justify-items:center}
.player-failure p{margin:0 0 8px}


.choice{transition:transform .16s ease,background .16s ease}
.choice:active{transform:scale(1.08) rotate(-2deg)}


/* Dark pink liquid glass theme */
:root{
 color-scheme:dark;
 --bg:#09050a;
 --panel:rgba(48,18,39,.62);
 --glass:rgba(52,17,42,.48);
 --line:rgba(255,190,222,.16);
 --pink:#ff5fa8;
 --pink-soft:rgba(255,95,168,.17);
 --text:#fff7fb;
 --muted:#bda8b5;
 --r:22px;
}
html{background:#09050a}
body{
 background:
  radial-gradient(900px 650px at 8% -10%,rgba(255,57,151,.20),transparent 64%),
  radial-gradient(900px 700px at 96% 4%,rgba(163,34,119,.19),transparent 62%),
  radial-gradient(850px 700px at 45% 110%,rgba(255,73,151,.10),transparent 62%),
  linear-gradient(180deg,#0a050a 0%,#10070e 48%,#080509 100%);
 background-attachment:fixed;
}
body:before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(340px 220px at 21% 17%,rgba(255,119,186,.08),transparent 72%),
  radial-gradient(400px 260px at 77% 58%,rgba(255,51,148,.07),transparent 76%);
 filter:blur(8px);
}
.kicker{color:#ff78b7}


.btn{
 background:linear-gradient(145deg,rgba(76,34,62,.78),rgba(40,20,35,.74));
 border-color:rgba(255,193,224,.16);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.btn:hover{background:linear-gradient(145deg,rgba(97,39,77,.88),rgba(54,23,45,.84))}
.btn.primary{
 background:linear-gradient(145deg,#ff78b8,#ff4f9e);
 border-color:rgba(255,171,213,.75);
 color:#250b1b;
 box-shadow:0 12px 32px rgba(255,58,150,.23),inset 0 1px 0 rgba(255,255,255,.48);
}
.btn.primary:hover{background:linear-gradient(145deg,#ff91c6,#ff63a9)}


.catalog{align-items:start}
.card{border-radius:16px}
.poster{
 border-radius:16px;
 border:1px solid rgba(255,206,229,.11);
 background:linear-gradient(145deg,#29101f,#150b13);
 box-shadow:0 12px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
 transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.card:hover .poster{
 transform:translateY(-3px);
 border-color:rgba(255,125,184,.30);
 box-shadow:0 18px 44px rgba(0,0,0,.34),0 0 0 1px rgba(255,85,162,.05);
}
.card:hover .poster img{transform:scale(1.035)}
.poster:after{
 background:linear-gradient(180deg,rgba(12,3,10,.02) 48%,rgba(9,3,8,.15) 70%,rgba(10,3,9,.68) 100%);
}
.card-ep,.card-language{
 position:absolute;z-index:3;
 border:1px solid rgba(255,220,236,.15);
 background:rgba(21,7,17,.68);
 color:#fff6fb;
 backdrop-filter:blur(18px) saturate(145%);
 -webkit-backdrop-filter:blur(18px) saturate(145%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 18px rgba(0,0,0,.18);
 font:700 10px/1.2 Manrope,"IBM Plex Sans Thai",sans-serif;
 letter-spacing:.01em;
 padding:5px 8px;
 border-radius:9px;
}
.card-ep{left:8px;top:8px}
.card-language{right:8px;bottom:8px;color:#ffd7e9;background:rgba(69,18,52,.73)}
.card-title{
 color:#fff8fc;
 font-weight:650;
 margin-top:10px;
 min-height:40px;
}
.card-sub{
 color:#c9a8ba;
 margin-top:2px;
 font-size:11px;
 min-height:18px;
}
.skeleton{background:linear-gradient(90deg,#25111f,#3c1930,#25111f);background-size:200% 100%}
.notice{
 background:linear-gradient(145deg,rgba(60,23,48,.42),rgba(22,11,20,.55));
 border-color:rgba(255,198,225,.13);
 backdrop-filter:blur(20px);
}
.tag{
 background:rgba(255,91,167,.105);
 border:1px solid rgba(255,151,199,.12);
 color:#efbad3;
}
.search-input-wrap{
 border:1px solid rgba(255,194,224,.16);
 background:linear-gradient(145deg,rgba(63,23,50,.5),rgba(24,11,22,.48));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 34px rgba(0,0,0,.18);
}
.filterbar select{
 background:linear-gradient(145deg,#311426,#21101c);
 border-color:rgba(255,188,219,.14);
 color:#fff7fb;
}
.filterbar select:focus{border-color:#ff6caf;box-shadow:0 0 0 3px rgba(255,91,167,.1)}
.player-shell{
 background:rgba(9,4,8,.86);
 border-color:rgba(255,184,217,.14);
 box-shadow:0 24px 60px rgba(0,0,0,.34);
}
.player-stage{background:#060306}
.player-overlay{background:linear-gradient(180deg,rgba(12,3,10,.07),rgba(13,4,11,.62))}
.play-button{
 position:relative;
 background:linear-gradient(145deg,#ff85bd,#ff4a99);
 color:transparent;
 border-color:rgba(255,223,238,.46);
 box-shadow:0 16px 40px rgba(255,59,149,.30),inset 0 1px 0 rgba(255,255,255,.55);
}
.play-button:before{
 content:"";
 display:block;
 width:0;height:0;
 border-top:10px solid transparent;
 border-bottom:10px solid transparent;
 border-left:16px solid #2a0b1d;
 margin-left:4px;
}
.choice{
 background:linear-gradient(145deg,rgba(58,24,47,.78),rgba(31,15,27,.78));
 border-color:rgba(255,188,219,.14);
 color:#e6c8d7;
}
.choice.active{
 background:linear-gradient(145deg,#ff75b6,#ff4e9d);
 color:#260b1b;
 border-color:rgba(255,196,224,.7);
 box-shadow:0 9px 24px rgba(255,61,150,.18);
}
.player-loading,.player-failure{background:rgba(13,4,11,.72);backdrop-filter:blur(10px)}
.loading-spinner{border-color:rgba(255,255,255,.16);border-top-color:#ff68ad}


.footer{border-top-color:rgba(255,191,222,.10)}
@media(max-width:620px){
 .poster{border-radius:12px}
 .card-ep,.card-language{font-size:8.5px;padding:4px 6px;border-radius:7px}
 .card-ep{left:6px;top:6px}.card-language{right:6px;bottom:6px}
 .card-title{font-size:11px;line-height:1.45;min-height:32px}
 .card-sub{font-size:9.5px}

}.player-stage video.preloaded-media{opacity:0;transition:opacity .16s ease}.player-stage video.preloaded-media.is-visible{opacity:1}


/* Guide and FAQ */
.info-page{max-width:980px;padding-top:48px;padding-bottom:60px}
.info-hero{padding:30px 0 26px}
.info-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.18;letter-spacing:-.055em;margin:8px 0 12px}
.info-hero p{max-width:720px;color:var(--muted);font-size:14px}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.info-card{
 padding:22px;border-radius:20px;
 background:linear-gradient(145deg,rgba(70,24,56,.52),rgba(24,11,22,.52));
 border:1px solid rgba(255,198,225,.13);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
 backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.info-card h2,.info-card h3{margin:0 0 8px;font-size:18px}
.info-card p{margin:0;color:var(--muted);line-height:1.85}
.info-step{font:800 11px Manrope,sans-serif;color:#ff83bd;letter-spacing:.11em;margin-bottom:9px}
.faq-list{display:grid;gap:11px}
.faq-item{
 padding:19px 21px;border-radius:18px;
 background:linear-gradient(145deg,rgba(66,22,52,.48),rgba(22,10,20,.50));
 border:1px solid rgba(255,198,225,.12);
}
.faq-item h2{font-size:16px;margin:0 0 7px}
.faq-item p{margin:0;color:var(--muted);line-height:1.8}
@media(max-width:700px){
 .info-page{padding-top:24px}
 .info-grid{grid-template-columns:1fr}
 .info-card{padding:18px}
}


/* MUANIME brand: pastel neon, retaining existing interactions */
:root{--bg:#0b0d1b;--glass:rgba(22,21,49,.65);--line:rgba(190,163,255,.18);--pink:#eaa0f4;--muted:#b6b4cc}
body{background:radial-gradient(ellipse at 50% 0,rgba(116,55,178,.16),transparent 55%),#0b0d1b}


.btn.primary,.choice.active{background:linear-gradient(115deg,#d963c8,#8c71ed 65%,#6ac8f3);color:#fff;border-color:#a77ce8}
.btn.primary:hover{background:linear-gradient(115deg,#f086e1,#9b80f5 65%,#79d5ff)}

.kicker{color:#eba7ee}
.poster{background:#171933;border-color:rgba(174,150,248,.18)}
.card:hover .poster{border-color:#be8cff;box-shadow:0 0 16px rgba(167,85,225,.19)}
.tag,.card-ep,.card-language{background:rgba(31,22,59,.8);border:1px solid rgba(177,131,245,.2);color:#f6ccf3}
.play-button{background:linear-gradient(140deg,#eda2ec,#9271ec 70%,#72d2ec);border-color:#f1c6ff;color:#fff;box-shadow:0 0 16px rgba(178,102,233,.35)}


/* Preserve line breaks in watch page summary */
#watchSummary{
 white-space:pre-line;
}


/* Header quick search with inline filters */






/* MUANIME generated artwork - responsive, isolated from the media engine */


.play-button{width:90px;height:90px;border:0!important;background:transparent url('/assets/muanime-play-real.avif') center/contain no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:none!important;filter:drop-shadow(0 0 12px rgba(174,81,252,.35))}
.play-button:hover{filter:drop-shadow(0 0 18px rgba(200,91,255,.55));transform:scale(1.06)}
.loading-spinner{border:0!important;width:54px!important;height:54px!important;background:transparent url('/assets/muanime-loading-real.avif') center/contain no-repeat;animation:none!important}
@media(max-width:620px){.play-button{width:74px;height:74px}}

/* Preserve visible startup feedback without duplicating source-player controls */
@keyframes muanLoadingPulse{0%,100%{transform:scale(.98);filter:brightness(.9)}50%{transform:scale(1.05);filter:brightness(1.35)}}
.loading-spinner{animation:muanLoadingPulse 1.35s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none!important}}


/* Muanime-owned fallback visual for titles without a real poster */
.muanime-no-poster{
 position:relative;
 isolation:isolate;
 width:100%;
 height:100%;
 min-height:100%;
 overflow:hidden;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:16px;
 text-align:center;
 background:
  radial-gradient(circle at 70% 20%,rgba(255,113,181,.20),transparent 28%),
  radial-gradient(circle at 20% 82%,rgba(117,91,255,.14),transparent 32%),
  linear-gradient(160deg,#21101d 0%,#120912 48%,#090609 100%);
 color:#fff7fb;
}
.muanime-no-poster:before{
 content:"";
 position:absolute;
 z-index:-1;
 inset:-20%;
 background:
  linear-gradient(125deg,transparent 0 37%,rgba(255,255,255,.035) 38% 42%,transparent 43% 100%);
 transform:rotate(-8deg);
}
.muanime-no-poster-glow{
 position:absolute;
 z-index:-1;
 width:72%;
 aspect-ratio:1;
 border-radius:50%;
 background:rgba(255,76,160,.11);
 filter:blur(34px);
}
.muanime-no-poster-mark{
 width:46px;
 height:46px;
 border-radius:14px;
 display:grid;
 place-items:center;
 font:800 24px/1 Manrope,sans-serif;
 color:#2a0a1e;
 background:linear-gradient(145deg,#ff8ac1,#ff4f9f 58%,#8f79ff);
 box-shadow:0 14px 34px rgba(255,65,153,.22),inset 0 1px 0 rgba(255,255,255,.45);
}
.muanime-no-poster-brand{
 font:800 13px/1 Manrope,sans-serif;
 letter-spacing:.10em;
 color:#ffe8f3;
}
.muanime-no-poster-line{
 max-width:88%;
 font-size:10px;
 line-height:1.45;
 color:#c8aebb;
}
.poster>.muanime-no-poster{
 position:absolute;
 inset:0;
}

@media(max-width:620px){
 .muanime-no-poster{gap:6px;padding:12px}
 .muanime-no-poster-mark{
  width:38px;height:38px;border-radius:11px;font-size:20px;
 }
 .muanime-no-poster-brand{font-size:10px}
 .muanime-no-poster-line{font-size:8.5px}
}


/* Subtle badge for series with missing episode numbers */
.card-incomplete{
 position:absolute;
 z-index:3;
 left:8px;
 bottom:8px;
 padding:4px 7px;
 border:1px solid rgba(255,255,255,.10);
 border-radius:8px;
 background:rgba(45,45,52,.72);
 color:rgba(241,241,245,.72);
 backdrop-filter:blur(12px);
 -webkit-backdrop-filter:blur(12px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
 font:650 9px/1.15 Manrope,"IBM Plex Sans Thai",sans-serif;
 letter-spacing:.01em;
 white-space:nowrap;
}
@media(max-width:620px){
 .card-incomplete{
  left:6px;
  bottom:6px;
  padding:3px 6px;
  border-radius:7px;
  font-size:8px;
 }
}


/* Supplied artwork: subtle site background + soft hero-left atmosphere */
html{
 background:#090812;
}
body{
 position:relative;
 isolation:isolate;
 background:transparent;
}
body::before{
 content:"";
 position:fixed;
 z-index:-2;
 inset:-18px;
 pointer-events:none;
 background-image:url("/assets/muanime-bg-desktop.webp");
 background-size:cover;
 background-position:center 38%;
 background-repeat:no-repeat;
 filter:blur(7px) saturate(.92) brightness(.68);
 transform:scale(1.035);
 opacity:.20;
}
body::after{
 content:"";
 position:fixed;
 z-index:-1;
 inset:0;
 pointer-events:none;
 background:
  linear-gradient(180deg,rgba(9,8,18,.76) 0%,rgba(10,8,17,.82) 38%,rgba(9,8,16,.90) 100%),
  radial-gradient(900px 520px at 50% 0%,rgba(117,63,147,.08),transparent 72%);
}

/* Use the supplied artwork softly on the left half of the hero.
   Dynamic title artwork on the right remains untouched. */


@media(max-width:620px){
 body::before{
  inset:-14px;
  background-image:url("/assets/muanime-bg-mobile.webp");
  background-size:cover;
  background-position:center 24%;
  filter:blur(5px) saturate(.94) brightness(.66);
  transform:scale(1.04);
  opacity:.18;
 }
 body::after{
  background:
   linear-gradient(180deg,rgba(9,8,18,.73) 0%,rgba(10,8,17,.84) 43%,rgba(9,8,16,.92) 100%),
   radial-gradient(520px 390px at 50% 0%,rgba(128,61,153,.09),transparent 72%);
 }

}


/* Background visibility fix: keep supplied artwork above page paint, below UI */
body{
 background:
  linear-gradient(180deg,rgba(9,8,18,.68) 0%,rgba(10,8,17,.78) 42%,rgba(9,8,16,.86) 100%),
  url("/assets/muanime-bg-desktop.webp") center 34% / cover fixed no-repeat,
  #090812!important;
}
body::before,
body::after{
 display:none!important;
}

/* Hero left artwork must sit above hero background, not behind it */


@media(max-width:620px){
 body{
  background:
   linear-gradient(180deg,rgba(9,8,18,.64) 0%,rgba(10,8,17,.80) 44%,rgba(9,8,16,.88) 100%),
   url("/assets/muanime-bg-mobile.webp") center 20% / cover fixed no-repeat,
   #090812!important;
 }

}


/* Fast-load baseline: Kanit (display=swap, system fallback) and defer below-fold rendering */
html,body,button,input,select,textarea{
 font-family:var(--font-main)!important;
}
/* Footer is excluded: a 900px placeholder collapsing at the page bottom made the
   page jump right where the pagination sits. */
.recommendations{
 content-visibility:auto;
 contain-intrinsic-size:auto 900px;
}
.catalog .card{
 contain:layout paint style;
}


/* Cards link straight to the watch page: keyboard, touch and reduced-motion feedback */
.card{
 display:block;
 -webkit-tap-highlight-color:transparent;
 touch-action:manipulation;
}
.card-title{transition:color .2s ease}
.card:hover .card-title,
.card:focus-visible .card-title{color:#ffd7f0}
.card:focus-visible{outline:none}
.card:focus-visible .poster{
 outline:2px solid var(--pink);
 outline-offset:-2px;
 border-color:#be8cff;
 box-shadow:0 0 16px rgba(167,85,225,.19);
}
.card:focus-visible .poster img{transform:scale(1.035)}
.card:active .poster{transform:scale(.985);transition-duration:.08s}
@media(hover:none){
 .card:hover .poster,
 .card:hover .poster img{transform:none}
 .card:active .poster{transform:scale(.97)}
}
@media(prefers-reduced-motion:reduce){
 .card .poster,
 .card .poster img,
 .card-title{transition:none}
 .card:hover .poster,
 .card:active .poster,
 .card:hover .poster img,
 .card:focus-visible .poster img{transform:none}
}


/* =====================================================================
   MUANIME V2: catalog-first homepage, sidebar categories and pagination
   ===================================================================== */
:root{
 --bg:#0B0918;
 --bg-2:#141025;
 --surface:#21152F;
 --surface-2:#2A1B3B;
 --border:#49305F;
 --border-soft:rgba(73,48,95,.62);
 --pink:#F451B5;
 --purple:#9D61EF;
 --text:#F7F1FF;
 --muted:#B9A9C8;
 --line:rgba(73,48,95,.62);
 --grad:linear-gradient(120deg,#F451B5,#9D61EF);
 --font-main:'Kanit',"Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
 --font-editorial:'Times New Roman',Times,serif;
 --header-h:64px;
}
html{background:var(--bg);scroll-padding-top:calc(var(--header-h) + 16px)}
body{
 background:
  linear-gradient(180deg,rgba(11,9,24,.84) 0%,rgba(11,9,24,.92) 45%,rgba(11,9,24,.97) 100%),
  url("/assets/muanime-bg-desktop.webp") center 30% / cover fixed no-repeat,
  var(--bg)!important;
 color:var(--text);
 font-weight:400;
 line-height:1.6;
}
h1,h2,h3{font-weight:600;letter-spacing:0}
.editorial-english{font-family:var(--font-editorial)}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Buttons ---- */
.btn{border-radius:10px;font-weight:500;background:var(--bg-2);border:1px solid var(--border);box-shadow:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.btn:hover{background:var(--surface);border-color:rgba(244,81,181,.55)}
.btn.primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(244,81,181,.24)}
.btn.primary:hover{background:var(--grad);filter:brightness(1.08)}

/* ---- Sticky header ---- */
.site-header{position:sticky;top:0;z-index:40;background:#0E0B1D;border-bottom:1px solid var(--border-soft);box-shadow:0 8px 24px rgba(0,0,0,.22)}
.site-header-inner{position:relative;display:flex;align-items:center;gap:22px;height:var(--header-h)}
.site-logo{display:flex;align-items:center;flex:0 0 auto}
.site-logo img{display:block;height:38px;width:auto}
.site-nav{display:flex;align-items:center;gap:2px;min-width:0}
.site-nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:15px;font-weight:500;white-space:nowrap;transition:color .2s ease,background .2s ease}
.site-nav a:hover{color:var(--text);background:rgba(157,97,239,.12)}
.site-nav a[aria-current=page]{color:#fff;background:rgba(244,81,181,.14);box-shadow:inset 0 -2px 0 var(--pink)}
.site-search{position:relative;margin-left:auto;width:min(380px,34vw)}
.site-search-box{display:flex;align-items:center;gap:4px;height:42px;padding:0 4px 0 14px;border:1px solid var(--border);border-radius:11px;background:var(--bg-2);transition:border-color .2s ease,box-shadow .2s ease}
.site-search-box:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(244,81,181,.16)}
.site-search-box input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}
.site-search-box input::placeholder{color:#8f7fa3}
.site-filter-toggle{border:0;background:transparent;color:var(--muted);font-size:13px;padding:6px 9px;border-radius:7px;cursor:pointer}
.site-filter-toggle:hover,.site-filter-toggle.is-open{color:var(--text);background:rgba(157,97,239,.16)}
.site-filter-toggle.has-filter{color:var(--pink)}
.site-search-submit{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:8px;background:var(--grad);color:#fff;cursor:pointer}
.site-filter-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:min(440px,92vw);padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.site-filter-panel[hidden]{display:none}
.site-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.site-filter-grid label{display:grid;gap:5px;font-size:12px;color:var(--muted)}
.site-filter-grid select{width:100%;min-height:38px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--bg-2);color:var(--text)}
.site-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.site-filter-actions button{min-height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--text);cursor:pointer}
.site-filter-actions button[type=submit]{background:var(--grad);border-color:transparent;color:#fff}
.site-header-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.site-icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text);font-size:22px;line-height:1;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.site-icon-btn:hover{border-color:rgba(244,81,181,.6)}
.site-search-toggle,.site-cat-toggle{display:none}
.site-menu-toggle{gap:4px;align-content:center}
.site-menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.site-menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-menu-toggle.is-open span:nth-child(2){opacity:0}
.site-menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.site-menu{position:absolute;right:clamp(16px,4.3vw,62px);top:calc(100% + 6px);z-index:50;display:flex;flex-direction:column;width:230px;padding:8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.site-menu[hidden]{display:none}
.site-menu a{padding:9px 12px;border-radius:8px;color:var(--text);font-size:14px}
.site-menu a:hover,.site-menu a[aria-current=page]{background:rgba(244,81,181,.13)}
.site-menu-section{padding:6px 12px 4px;font-size:12px;color:var(--muted)}
.site-menu-divider{height:1px;margin:6px 4px;background:var(--border-soft)}

/* ---- Section headings ---- */
.section-kicker{margin:0 0 2px;font-family:var(--font-editorial);font-style:italic;font-size:15px;color:#d9a6ff;letter-spacing:.01em}
.home-v2{padding-top:22px}

/* ---- Featured (compact) ---- */
.featured{margin:0 0 26px}
.featured[hidden]{display:none}
.featured-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:12px}
/* Listing headings (V14): the featured heading is the page H1; section titles are H2 (the list title is the H1 on filtered listings) */
.featured-head-text{min-width:0}
.section-title .nobr{white-space:nowrap}
.featured-head .section-title{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:600;line-height:1.35;text-wrap:balance;overflow-wrap:anywhere}
.featured-stats{display:flex;gap:16px;margin:0;color:var(--muted);font-size:13px}
.featured-stats strong{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.featured-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(108px,9vw,130px);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.featured-row .card{scroll-snap-align:start}

/* ---- Thai dubbed anime (carousel under the pagination) ---- */
.dub-section{margin:40px 0 8px;padding-top:26px;border-top:1px solid var(--border-soft)}
.dub-section[hidden]{display:none}
.dub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 16px;margin-bottom:14px}
.dub-head-text{position:relative;padding-left:14px;min-width:0}
.dub-head-text:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)}
.dub-head .section-title{margin:0;font-size:clamp(18px,1.8vw,23px);font-weight:600;line-height:1.35;text-wrap:balance}
.dub-intro{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.dub-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* 6 per view on desktop, 4 on tablet, 2 on phones; the row scrolls on its own (touch, trackpad, buttons).
   No inline padding: the first card already sits on its snap point, so the browser never scrolls the
   row on load (that automatic scroll counts as a user scroll and stops Chrome's LCP measurement). */
.dub-row{--dub-n:6;--dub-gap:14px;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--dub-n) - 1) * var(--dub-gap)) / var(--dub-n));gap:var(--dub-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 0 12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;outline:none}
.dub-row:focus-visible{box-shadow:0 0 0 2px rgba(244,81,181,.5);border-radius:10px}
.dub-row .card{scroll-snap-align:start;contain:layout style;min-width:0}
.dub-empty{margin:0}

/* ---- Main layout: grid + right sidebar ---- */
.home-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.catalog-main{min-width:0}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--border-soft)}
.catalog-head-text{position:relative;padding-left:14px;min-width:0}
.catalog-head-text:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--grad)}
.catalog-head .section-title{margin:0;font-size:clamp(18px,1.8vw,23px);font-weight:600;line-height:1.35;outline:none;text-wrap:balance;overflow-wrap:anywhere}
.cat-open-btn{display:none;flex:0 0 auto}
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.active-filters[hidden]{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 12px;border:1px solid rgba(244,81,181,.38);border-radius:999px;background:rgba(244,81,181,.11);color:#ffd9f0;font-size:13px;transition:background .2s ease}
.filter-chip:hover{background:rgba(244,81,181,.2)}
.filter-chip-x{font-size:16px;line-height:1;opacity:.8}
.filter-chip-reset{border-color:var(--border);background:transparent;color:var(--muted)}
.range-note{margin:0 0 14px;padding:10px 14px;border:1px solid rgba(157,97,239,.4);border-radius:10px;background:rgba(157,97,239,.12);font-size:13px}
.range-note[hidden]{display:none}

/* ---- Poster grid ---- */
.catalog.catalog-v2{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 14px}
.catalog.catalog-v2.catalog-wide{grid-template-columns:repeat(6,minmax(0,1fr))}
.catalog-v2 .card,.featured-row .card{contain:layout style}
.catalog-main.is-loading .pager{opacity:.65}

/* ---- Cards (all lists) ---- */
.card{border-radius:10px}
.poster{aspect-ratio:2/3;border-radius:10px;border:1px solid var(--border-soft);background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.poster img{width:100%;height:100%;object-fit:cover;transition:transform .22s ease}
.card:hover .poster{transform:translateY(-2px);border-color:rgba(244,81,181,.55);box-shadow:0 12px 28px rgba(0,0,0,.38),0 0 0 1px rgba(244,81,181,.16)}
.card:hover .poster img,.card:focus-visible .poster img{transform:scale(1.03)}
.card:focus-visible .poster{outline:2px solid var(--pink);outline-offset:-2px;border-color:var(--pink);box-shadow:0 0 0 1px rgba(244,81,181,.3)}
.card-title{margin-top:8px;min-height:2.9em;color:var(--text);font-size:14px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.card-sub{margin:2px 0 0;color:var(--muted);font-size:12px;min-height:0}
.card-ep,.card-language,.card-incomplete{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border:0;border-radius:6px;padding:3px 7px;font:500 11px/1.3 var(--font-main);letter-spacing:0}
.card-ep{background:rgba(11,9,24,.82);color:var(--text)}
.card-language{background:rgba(244,81,181,.9);color:#fff}
.card-incomplete{background:rgba(42,27,59,.9);color:var(--muted)}
.skeleton{background:linear-gradient(90deg,#1a1430,#2a1d42,#1a1430);background-size:200% 100%}
.skeleton-card .poster{border:0;border-radius:10px;box-shadow:none}
.skeleton-card .line{height:12px;margin-top:10px;border-radius:6px}
.catalog-v2 .notice{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);backdrop-filter:none}

/* ---- Pagination ---- */
.pager{margin:30px 0 6px}
.pager[hidden]{display:none}
.pager-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.pager-item{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text);font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;transition:background .2s ease,border-color .2s ease,transform .2s ease}
a.pager-item:hover{border-color:var(--pink);background:rgba(244,81,181,.12)}
a.pager-item:active{transform:scale(.96)}
.pager-item.is-current{border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(244,81,181,.28)}
.pager-item.is-disabled{opacity:.38;cursor:default}
.pager-gap{min-width:22px;padding:0;border-color:transparent;background:transparent;color:var(--muted)}
.pager-counting{animation:pagerPulse 1.2s ease-in-out infinite}
@keyframes pagerPulse{50%{opacity:.35}}

/* ---- Category sidebar ---- */
/* Sticky with CSS only, never an inner scrollbar: every category is listed at full height. A sidebar
   shorter than the viewport sticks under the header; a taller one (--cat-sidebar-h, measured by
   home.js with a ResizeObserver) sticks once its bottom reaches the viewport, so all of it stays
   reachable. It sticks only within .home-layout, so it can never cover the sections below. */
.cat-sidebar{position:sticky;top:min(calc(var(--header-h) + 16px),calc(100vh - var(--cat-sidebar-h,0px) - 16px));align-self:start;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-2)}
.cat-sidebar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.cat-sidebar-head h2{margin:0;font-size:18px;font-weight:600}
.cat-close{display:none}
.cat-group{padding:12px 0;border-top:1px solid var(--border-soft)}
.cat-group:first-child{border-top:0}
.cat-group-title{margin:0 0 8px;color:#d9a6ff;font-size:13px;font-weight:500}
.cat-list{display:flex;flex-direction:column;gap:2px}
.cat-link{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;color:var(--text);font-size:14px;transition:background .18s ease}
.cat-link:hover{background:rgba(157,97,239,.14)}
.cat-link[aria-current]{background:linear-gradient(120deg,rgba(244,81,181,.22),rgba(157,97,239,.22));box-shadow:inset 3px 0 0 var(--pink)}
.cat-name{display:flex;align-items:baseline;gap:7px;min-width:0}
.cat-en{color:var(--muted);font-size:12.5px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-count{flex:0 0 auto;padding:1px 8px;border-radius:999px;background:rgba(11,9,24,.7);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
/* Tag chips (sidebar years / popular tags, watch-page tags): dark purple, pink on hover, gradient when active */
.cat-group.is-chips .cat-list{flex-direction:row;flex-wrap:wrap;gap:6px}
.cat-group.is-chips .cat-link,a.tag,span.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid rgba(177,131,245,.24);border-radius:10px;background:#1d1636;color:#eadcff;font:400 13px/1.4 var(--font-main);transition:background .18s ease,border-color .18s ease,color .18s ease}
.cat-group.is-chips .cat-link:hover,a.tag:hover,a.tag:focus-visible{border-color:rgba(244,81,181,.7);background:rgba(244,81,181,.16);color:#ffd9f0}
.cat-group.is-chips .cat-link[aria-current]{border-color:transparent;background:var(--grad);color:#fff;box-shadow:none}
.cat-group.is-chips .cat-link[aria-current] .cat-count{background:rgba(11,9,24,.35);color:#fff}
.cat-group.is-chips .cat-count{padding:0 6px;font-size:11px}
span.tag{color:#cdbbe8}
.cat-note{margin:10px 0 0;color:var(--muted);font-size:12px}
.cat-backdrop{position:fixed;inset:0;z-index:55;background:rgba(5,3,12,.62)}
.cat-backdrop[hidden]{display:none}

/* ---- Search page ---- */
.search-v2 .search-intro{padding:28px 0 14px}
.search-v2 .search-intro h1{margin:0 0 4px;font-size:clamp(22px,3vw,30px)}
.search-controls{margin-bottom:22px}
.search-v2 .search-input-wrap{max-width:none;padding:0 14px;min-height:48px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2);box-shadow:none}
.search-v2 .search-input-wrap:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(244,81,181,.16)}
.search-v2 .search-input-wrap input{width:100%;min-height:46px;border:0;outline:0;background:transparent;color:var(--text);font-size:15px}
.search-v2 .filterbar{margin:12px 0 0}
.search-v2 .filterbar select{min-height:42px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text)}

/* ---- Footer (V10: brand + 3 link columns, copyright bar) ---- */
.site-footer{
 --footer-bg:#100C20;--footer-surface:#1D142D;--footer-heading:#F8EDFF;--footer-text:#C4B3D8;--footer-border:#3A2A4F;
 margin-top:64px;padding:0;border-top:1px solid var(--footer-border);background:var(--footer-bg);color:var(--footer-text);font-size:14px;line-height:1.6
}
.site-footer .shell{display:block} /* the legacy .footer .shell rule is a flex row */
.footer-main{padding-top:44px;padding-bottom:36px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer-logo{display:inline-block;border-radius:8px}
.footer-logo img{width:auto;height:40px}
.footer-about{max-width:380px;margin:14px 0 0;color:var(--footer-text);font-size:14px;line-height:1.75}
.footer-heading{margin:0 0 16px;color:var(--footer-heading);font-size:16px;font-weight:600;line-height:1.4}
.footer-heading::after{content:"";display:block;width:28px;height:3px;margin-top:9px;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--purple))}
.footer-links{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.site-footer a{color:var(--footer-text);transition:color .2s ease}
.site-footer a:hover,.site-footer a:focus-visible{color:#FF9AD5}
.footer-links a{display:inline-block;padding:2px 0}
.footer-social{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#F3DDFF;background:linear-gradient(145deg,#2C1E48,#191129);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 0 rgba(0,0,0,.35),0 6px 14px rgba(157,97,239,.22);transition:transform .2s ease,box-shadow .2s ease,color .2s ease}
.footer-social a:hover,.footer-social a:focus-visible{color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.3),0 8px 18px rgba(244,81,181,.32)}
.footer-bottom{border-top:1px solid var(--footer-border);padding:18px 0 22px;text-align:center;color:#A895C0;font-size:13px}
.footer-bottom p{margin:0}
.footer-bottom p+p{margin-top:4px}
@media(max-width:1023px){
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px}
}
@media(max-width:767px){
 .site-footer{margin-top:44px}
 .footer-main{padding-top:32px;padding-bottom:24px}
 .footer-grid{grid-template-columns:minmax(0,1fr);gap:26px}
 .footer-logo img{height:34px}
 .footer-about{max-width:none}
 .footer-heading{margin-bottom:12px}
 .footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .footer-links a{display:flex;align-items:center;min-height:40px}
 .footer-bottom{padding:16px 0 18px}
}
@media(prefers-reduced-motion:reduce){
 .site-footer a,.footer-social a{transition:none}
 .footer-social a:hover,.footer-social a:focus-visible{transform:none}
}
/* ---- Responsive ---- */
@media(max-width:1199px){
 .home-layout{grid-template-columns:minmax(0,1fr) 240px;gap:22px}
 .catalog.catalog-v2{gap:20px 12px}
 .catalog.catalog-v2.catalog-wide{grid-template-columns:repeat(5,minmax(0,1fr))}
 .site-nav a{padding:8px 9px;font-size:14px}
}
/* Tablet / phone: 3 then 2 columns; the sidebar becomes a drawer (a panel, so it scrolls itself) */
@media(max-width:999px){
 .home-layout{grid-template-columns:minmax(0,1fr)}
 .catalog.catalog-v2,.catalog.catalog-v2.catalog-wide{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}
 .dub-row{--dub-n:4}
 .cat-open-btn{display:inline-flex}
 .site-cat-toggle{display:inline-grid}
 .cat-sidebar{position:fixed;top:0;right:0;bottom:0;align-self:auto;z-index:60;width:min(340px,88vw);padding:16px 16px 32px;overflow-y:auto;overscroll-behavior:contain;border-width:0 0 0 1px;border-radius:0;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
 .cat-sidebar.is-open{transform:none;visibility:visible;transition:transform .25s ease}
 .cat-close{display:inline-grid}
 html.drawer-open{overflow:hidden}
}
@media(max-width:899px){
 .site-nav{display:none}
 .site-search{width:min(420px,52vw)}
}
@media(max-width:759px){
 :root{--header-h:58px}
 .site-header-inner{gap:10px}
 .site-logo img{height:32px}
 .site-header-actions{margin-left:auto}
 .site-search-toggle{display:inline-grid}
 .site-search{display:none;position:absolute;left:0;right:0;top:100%;width:auto;margin:0;padding:10px 16px 12px;background:#0E0B1D;border-bottom:1px solid var(--border-soft)}
 .site-header.search-open .site-search{display:block}
 .site-filter-panel{left:16px;right:16px;width:auto}
 .site-menu{right:16px}
 .catalog.catalog-v2,.catalog.catalog-v2.catalog-wide{gap:18px 12px}
 .home-v2{padding-top:16px}
 .featured-head{align-items:center}
 .featured-head .section-title{font-size:19px;line-height:1.4}
 .catalog-head .section-title,.dub-head .section-title{font-size:17px}
 .featured-row{grid-auto-columns:clamp(104px,28vw,130px);gap:10px}
 body{background:linear-gradient(180deg,rgba(11,9,24,.86),rgba(11,9,24,.96) 50%,var(--bg)),url("/assets/muanime-bg-mobile.webp") center top / cover no-repeat,var(--bg)!important}
}
@media(max-width:599px){
 .catalog.catalog-v2,.catalog.catalog-v2.catalog-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .dub-row{--dub-n:2;--dub-gap:12px}
 .dub-head{flex-wrap:wrap;align-items:flex-start}
 .dub-actions{width:100%;justify-content:flex-end}
 .dub-actions .btn{margin-right:auto}
}
@media(max-width:559px){
 .card-title{font-size:13.5px}
 .site-filter-grid{grid-template-columns:1fr}
 .featured-stats{display:none}
 .catalog-head{align-items:center}
 .pager-list{gap:4px}
 .pager-item{min-width:34px;height:38px;padding:0 8px;font-size:13px}
 .pager-gap{min-width:16px;padding:0}
 .pager-prev,.pager-next{font-size:0;min-width:38px}
 .pager-prev:before{content:"«";font-size:17px}
 .pager-next:before{content:"»";font-size:17px}
 .search-v2 .filterbar{display:grid;grid-template-columns:1fr 1fr}
 .search-v2 .filterbar .btn{grid-column:1/-1}
}
@media(hover:none){
 .card:hover .poster,.card:hover .poster img{transform:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .poster,.poster img,.pager-item,.cat-sidebar,.site-menu-toggle span,.filter-chip,.cat-link{transition:none!important}
 .card:hover .poster,.card:hover .poster img,.card:focus-visible .poster img{transform:none}
 .skeleton,.pager-counting{animation:none}
}


/* =====================================================================
   MUANIME V3: watch page — full-width player, every control below it
   ===================================================================== */
/* .watch-v3 is also a .shell (side padding), so the cap leaves ~1200px for the player itself. */
.watch-v3{--player-bg:#05040C;--watch-surface:#1B1129;max-width:calc(1200px + 2 * clamp(16px,4.3vw,62px));margin:0 auto;padding-top:16px}
.watch-breadcrumb{display:flex;align-items:center;gap:10px;min-width:0;margin:0 0 10px;color:var(--muted);font-size:13px}
.watch-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0;margin:0;padding:0;list-style:none}
.watch-breadcrumb li{display:flex;align-items:center;gap:4px;min-width:0}
.watch-breadcrumb li+li:before{content:"›";margin-right:2px;color:#6f5c86}
.watch-breadcrumb a{color:var(--muted);transition:color .2s ease}
.watch-breadcrumb a:hover{color:var(--pink)}
#crumbTitle{display:inline-block;max-width:min(58vw,560px);overflow:hidden;color:var(--text);text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.watch-back{display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--bg-2);color:var(--text);font-size:20px;line-height:1;transition:border-color .2s ease}
.watch-back:hover{border-color:var(--pink)}
.watch-head{margin:0 0 14px}
.watch-head h1{margin:0;font-size:clamp(20px,2.4vw,28px);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.watch-facts{display:flex;flex-wrap:wrap;gap:4px 10px;margin:6px 0 0;color:var(--muted);font-size:13px}
.watch-facts:empty{display:none}
.watch-facts span+span:before{content:"•";margin-right:10px;color:#6f5c86}

/* Player: full content width, 16:9, black stage, thin dark-purple frame */
.watch-v3 .player-shell{width:100%;border:1px solid #2a1c3d;border-radius:12px;background:var(--player-bg);box-shadow:0 18px 44px rgba(0,0,0,.4);overflow:hidden}
.watch-v3 .player-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--player-bg)}
.watch-v3 .player-stage>.player-error:only-child{position:absolute;inset:0;margin:0}
.watch-v3 .player-poster{filter:brightness(.42) saturate(.9)}
.watch-v3 .player-overlay{background:linear-gradient(180deg,rgba(5,4,12,.05),rgba(5,4,12,.55))}
.watch-v3 .player-loading{background:rgba(5,4,12,.7);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--text)}
.watch-v3 .player-failure{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:10px;padding:20px;background:rgba(5,4,12,.86);backdrop-filter:none;-webkit-backdrop-filter:none;text-align:center}
.watch-v3 .player-failure p{flex:0 0 100%;max-width:none;margin:0 0 4px;color:var(--text);font-size:15px;line-height:1.6}
.watch-v3 .player-failure .btn{min-height:42px}
.watch-v3 .player-error{color:var(--muted)}

/* Controls: language → player → episodes → prev/next */
.watch-controls{display:grid;gap:14px;margin:14px 0 0;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--watch-surface)}
.control-row{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:start;gap:12px}
.control-row[hidden]{display:none}
.control-label{margin:0;padding-top:9px;color:#d9a6ff;font-size:14px;font-weight:500}
.control-options{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0}
.control-episodes{grid-template-columns:minmax(0,1fr);gap:0}
.control-head{display:flex;align-items:baseline;gap:10px}
.control-head .control-label{padding-top:0}
.control-note{color:var(--muted);font-size:12.5px}
.watch-v3 .choice{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg-2);color:var(--text);font:500 14px/1.25 var(--font-main);cursor:pointer;box-shadow:none;transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.watch-v3 .choice:hover{border-color:rgba(244,81,181,.6);background:#22163a}
.watch-v3 .choice:active{transform:scale(.97)}
.watch-v3 .choice.active{border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(244,81,181,.28)}
.watch-v3 .choice[hidden]{display:none}
.language-chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 13px;border:1px solid var(--border);border-radius:999px;background:rgba(157,97,239,.1);color:var(--text);font-size:14px}
.episode-ranges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.episode-ranges[hidden]{display:none}
.watch-v3 .episode-ranges .choice{min-height:34px;padding:6px 12px;font-size:13px}
.watch-v3 .episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;margin:12px 0 0}
.watch-v3 .episode-grid .choice{width:100%;min-width:0;padding:8px 6px}
.episode-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--border-soft)}
.episode-nav[hidden]{display:none}
.episode-nav .btn{min-width:150px;min-height:42px}
.episode-nav .btn:disabled{opacity:.4;cursor:default;filter:none;box-shadow:none}
.episode-now{color:var(--muted);font-size:13px;text-align:center}

/* Details: small portrait poster beside the text, so the player stays the focus */
.watch-info{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;margin:22px 0 0;padding:18px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(20,16,37,.72)}
.watch-poster{position:relative;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--border-soft);border-radius:10px;background:var(--surface)}
.watch-poster img{display:block;width:100%;height:100%;object-fit:cover}
.watch-poster>.muanime-no-poster{position:absolute;inset:0}
.watch-info-title{margin:0 0 4px;font-size:18px;font-weight:600}
.watch-v3 .watch-details{min-width:0;margin:0;padding:0}
.watch-v3 .tags{margin:6px 0 10px}
.watch-v3 #watchSummary{margin:0;color:#d4c6e0;font-size:14.5px;line-height:1.8}
.watch-v3 .recommendations{margin-top:34px}
.watch-v3 .recommendations h2{margin:0 0 14px;font-size:20px;font-weight:600}

@media(max-width:759px){
 .watch-v3{padding-top:10px}
 .watch-v3 .player-shell{border-radius:10px}
 .watch-controls{padding:14px}
 .control-row{grid-template-columns:minmax(0,1fr);gap:8px}
 .control-label{padding-top:0}
 .watch-v3 .episode-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .episode-nav .btn{flex:1;min-width:0;padding-left:8px;padding-right:8px}
 .episode-now{display:none}
 .watch-info{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px}
}
@media(max-width:400px){
 .watch-v3 .episode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
 .watch-v3 .choice,.watch-back,.watch-breadcrumb a{transition:none}
 .watch-v3 .choice:active{transform:none}
}

/* ================= V9: mobile (below 768px) — category section + 3D bottom navigation ================= */
.cat-title-all{display:none}
.mnav{display:none}
/* Header menu entry for phones only (categories are a homepage section there) */
.site-menu a.site-menu-mobile{display:none}
/* iPhone notch in landscape (viewport-fit=cover): 0 on devices without insets, so nothing moves elsewhere */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media(max-width:767px){
 :root{--mnav-h:64px}
 .site-menu a.site-menu-mobile{display:block}
 /* Room for the fixed bar, so the footer, pagination and episode list are never under it */
 body{padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px))}
 /* Anything the browser scrolls into view (focus, anchors, scrollIntoView) stops above the bar */
 html{scroll-padding-bottom:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px) + 8px)}
 /* Only the category drawer's openers go; the header hamburger, search and nav stay as on desktop */
 .site-cat-toggle,.cat-open-btn{display:none!important}
 .catalog.catalog-v2,.catalog.catalog-v2.catalog-wide{grid-template-columns:repeat(2,minmax(0,1fr))}

 /* Page order: Featured → 35 titles + pagination → Thai dub → all categories (same server HTML as the
    desktop sidebar, re-ordered; nothing is rendered twice) */
 .home-v2{display:flex;flex-direction:column}
 .home-layout{display:contents}
 .home-v2>.featured{order:1}
 .catalog-main{order:2}
 .home-v2>.dub-section{order:3}
 .cat-sidebar{order:4}
 .cat-backdrop{display:none!important}

 /* The former drawer, as a normal full-width section: no fixed position, no inner scroll, no max-height */
 .cat-sidebar,.cat-sidebar.is-open{position:static;top:auto;right:auto;bottom:auto;z-index:auto;width:auto;align-self:stretch;max-height:none;overflow:visible;transform:none;visibility:visible;transition:none;margin:34px 0 8px;padding:18px 14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--bg-2)}
 .cat-sidebar-head{margin-bottom:6px}
 .cat-sidebar-head h2{font-size:20px}
 .cat-title-all{display:inline}
 .cat-close{display:none!important}
 .cat-group{padding:14px 0}
 .cat-group-title{font-size:14px;margin-bottom:10px}
 .cat-group .cat-list,.cat-group.is-chips .cat-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .cat-group .cat-link,.cat-group.is-chips .cat-link{min-height:44px;padding:8px 10px;border:1px solid rgba(177,131,245,.24);border-radius:10px;background:#1d1636;color:#fff;font:400 14px/1.35 var(--font-main);box-shadow:none}
 .cat-group .cat-link:hover{border-color:rgba(244,81,181,.7);background:rgba(244,81,181,.16)}
 .cat-group .cat-link[aria-current]{border-color:transparent;background:var(--grad);color:#fff;box-shadow:none}
 .cat-group .cat-link[aria-current] .cat-count{background:rgba(11,9,24,.35);color:#fff}
 .cat-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .cat-en{display:none}

 /* Fixed bottom bar */
 .mnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:1000;height:calc(var(--mnav-h) + env(safe-area-inset-bottom,0px));padding:5px max(6px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(6px,env(safe-area-inset-left,0px));background:rgba(16,10,31,.97);border-top:1px solid rgba(179,100,221,.35);box-shadow:0 -10px 26px rgba(0,0,0,.38)}
 .mnav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:44px;padding:0 2px;border:0;border-radius:12px;background:transparent;color:#cbbbe6;font:500 11px/1.25 var(--font-main);text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,color .16s ease}
 .mnav-item:active{transform:scale(.96)}
 .mnav-icon{display:grid;place-items:center;width:46px;height:32px;border-radius:12px;transition:background .18s ease}
 .mnav-svg{width:28px;height:28px;filter:drop-shadow(0 2px 3px rgba(76,29,149,.55)) saturate(.88);opacity:.9;transition:filter .18s ease,opacity .18s ease}
 .mnav-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mnav-item[aria-current="page"],.mnav-item[aria-expanded="true"]{color:#fff}
 .mnav-item[aria-current="page"] .mnav-icon,.mnav-item[aria-expanded="true"] .mnav-icon{background:linear-gradient(135deg,rgba(244,81,181,.34),rgba(157,97,239,.38));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(214,70,200,.25)}
 .mnav-item[aria-current="page"] .mnav-svg,.mnav-item[aria-expanded="true"] .mnav-svg{opacity:1;filter:drop-shadow(0 2px 4px rgba(214,70,200,.55)) brightness(1.12) saturate(1.08)}
 .mnav-item:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}

 /* Fullscreen video: nothing over the player */
 html.is-fullscreen .mnav{display:none!important}
}
@media(prefers-reduced-motion:reduce){
 .mnav-item,.mnav-icon,.mnav-svg{transition:none}
 .mnav-item:active{transform:none}
}
/* ================= V15: card titles (up to 3 lines) + featured carousel ================= */
/* Visual truncation only: the full title stays in the HTML and in the link's aria-label. Lines break at
   word boundaries (Thai and English); a single word longer than the card may still wrap. */
.card-title{-webkit-line-clamp:3;line-clamp:3;line-height:1.45;font-weight:500;white-space:normal;overflow-wrap:break-word;word-break:normal;min-height:0;margin:8px 0 0}
.card-sub{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
/* Every card spans three rows of its grid (poster / title / year) through subgrid, so the cards of one
   row share the title height of the longest title in that row and all years line up — without
   reserving three empty lines under short titles. Spacing between rows moves from row-gap to padding. */
.catalog.catalog-v2{row-gap:0}
/* contain:none — layout containment (set on cards earlier in this file) turns a subgrid back into a plain grid */
.catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card,.featured-row>.card,.dub-row>.card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;contain:none}
.catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{padding-bottom:22px}
@supports not (grid-template-rows:subgrid){.card-title{min-height:2.9em}}
.dub-row{grid-template-rows:repeat(3,auto);row-gap:0}

/* Featured row: whole cards on wide screens, a peek of the next one on phones; no visible scrollbar
   (touch, trackpad, Shift+wheel, keyboard and the ‹ › buttons all scroll it). */
.featured-row{--feat-n:9;--feat-gap:14px;grid-template-rows:repeat(3,auto);grid-auto-columns:calc((100% - (var(--feat-n) - 1) * var(--feat-gap)) / var(--feat-n));gap:0 var(--feat-gap);padding:4px 0;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:none;outline:none}
.featured-row::-webkit-scrollbar{display:none}
.featured-row:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:10px}
.featured-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.featured-actions .featured-stats{margin-right:8px}
.row-nav,.dub-nav{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(177,131,245,.32);border-radius:12px;background:#1d1636;color:#efe2ff;font-size:24px;line-height:1;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}
.row-nav:hover,.row-nav:focus-visible,.dub-nav:hover,.dub-nav:focus-visible{border-color:var(--pink);background:rgba(244,81,181,.16);color:#fff}
.row-nav:disabled,.dub-nav:disabled{opacity:.35;cursor:default;border-color:rgba(177,131,245,.32);background:#1d1636;color:#efe2ff}
@media(max-width:1199px){.featured-row{--feat-n:7}}
@media(max-width:999px){.featured-row{--feat-n:5}.catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{padding-bottom:20px}}
@media(max-width:767px){
 .featured-row{--feat-n:3.6;--feat-gap:10px}
 .featured-head{align-items:center}
 .featured-actions{gap:6px}
 .catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{padding-bottom:18px}
 .card-title{font-size:13px}
 .card-compact .card-title{font-size:12.5px}
 .card-sub{font-size:11.5px}
}
@media(max-width:599px){.featured-row{--feat-n:2.6}}
@media(prefers-reduced-motion:reduce){.featured-row{scroll-behavior:auto}.row-nav,.dub-nav{transition:none}}
/* ================= V16: soft panel behind the card title + year (CSS only) ================= */
/* The title and the year share one faint purple panel (about 12% opacity) under the poster: the title
   is its top part, the year its bottom part, flush together. The title has no bottom padding so a
   clipped fourth line can never show inside the panel; the panel's bottom padding lives on the year. */
.card-title,.card-sub{background:rgba(124,84,204,.12);box-shadow:inset 1px 0 0 rgba(177,131,245,.10),inset -1px 0 0 rgba(177,131,245,.10)}
.card-title{margin:8px 0 0;padding:7px 9px 0;border-radius:10px 10px 0 0;color:#f4ecfd;box-shadow:inset 1px 0 0 rgba(177,131,245,.10),inset -1px 0 0 rgba(177,131,245,.10),inset 0 1px 0 rgba(177,131,245,.12);transition:background .2s ease,color .2s ease}
.card-sub{margin:0;padding:4px 9px 8px;border-radius:0 0 10px 10px;color:#a998c4;line-height:1.4;box-shadow:inset 1px 0 0 rgba(177,131,245,.10),inset -1px 0 0 rgba(177,131,245,.10),inset 0 -1px 0 rgba(177,131,245,.12);transition:background .2s ease}
.card:hover .card-title,.card:hover .card-sub,.card:focus-visible .card-title,.card:focus-visible .card-sub{background:rgba(244,81,181,.10)}
/* Narrow cards (featured / Thai dub rows) keep more width for the text */
.card-compact .card-title{padding:6px 7px 0}
.card-compact .card-sub{padding:3px 7px 7px}
@media(max-width:767px){
 .card-title{padding:6px 8px 0}
 .card-sub{padding:3px 8px 7px}
 .card-compact .card-title{padding:6px 7px 0}
 .card-compact .card-sub{padding:3px 7px 7px}
}
@media(prefers-reduced-motion:reduce){.card-title,.card-sub{transition:none}}
/* ================= V17: one-piece card — poster on top, title + year in the same card below ================= */
/* The card itself carries a soft translucent black background and the outline; the poster keeps only its
   top corners rounded so it flows straight into the text area. Replaces the V16 title panel. */
.card{position:relative;border-radius:12px;background:rgba(0,0,0,.38);box-shadow:0 0 0 1px rgba(177,131,245,.13),0 8px 22px rgba(0,0,0,.28);transition:transform .22s ease,box-shadow .22s ease}
.card .poster{border:0;border-radius:12px 12px 0 0;box-shadow:none}
.card:hover,.card:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(244,81,181,.5),0 12px 28px rgba(0,0,0,.36)}
.card:hover .poster,.card:focus-visible .poster{transform:none;border-color:transparent;box-shadow:none}
.card:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.card:focus-visible .poster{outline:0}
.card-title,.card-sub,.card:hover .card-title,.card:hover .card-sub,.card:focus-visible .card-title,.card:focus-visible .card-sub{background:transparent;box-shadow:none;border-radius:0}
.card-title,.card-compact .card-title{font-size:.8rem;line-height:1.5;margin:0;padding:9px 10px 0;color:#f3ebfc}
.card-sub,.card-compact .card-sub{margin:0;padding:4px 10px 10px;font-size:11.5px;line-height:1.4;color:#9f90b8}
.card:hover .card-title,.card:focus-visible .card-title{color:#ffd1ee}
/* Space between card rows sits outside the card now (it used to be padding inside the subgrid card). */
.catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{padding-bottom:0;margin-bottom:22px}
@media(max-width:999px){.catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{margin-bottom:20px}}
@media(max-width:767px){
 .catalog.catalog-v2>.card,.catalog.catalog-v2>.skeleton-card{margin-bottom:16px}
 .card-title,.card-compact .card-title{font-size:.8rem;padding:8px 8px 0}
 .card-sub,.card-compact .card-sub{padding:3px 8px 9px;font-size:11px}
}
@media(hover:none){.card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover,.card:focus-visible{transform:none}}
/* ===== V18.1 watch page: one control panel (restyle only), player states, details card, related ===== */
/* Control panel: one purple-black box, faint purple border; same rows and order as before. */
.watch-controls{gap:16px;margin:14px 0 0;padding:18px;border:1px solid rgba(157,97,239,.22);border-radius:12px;background:linear-gradient(180deg,rgba(26,16,40,.96),rgba(15,10,26,.96));box-shadow:none}
.control-row{grid-template-columns:88px minmax(0,1fr);gap:12px}
.control-row.control-episodes{grid-template-columns:minmax(0,1fr);gap:0}
.control-label{padding-top:10px;color:#cdb3f2;font:500 14px/1.3 var(--font-main)}
.control-head{gap:10px;margin-bottom:2px}
.control-note{color:#a897bf;font-size:12.5px}
.control-options{gap:8px}
.watch-v3 .choice{min-height:40px;padding:8px 14px;border:1px solid rgba(157,97,239,.28);border-radius:10px;background:#160e24;color:#eadff7;font:500 14px/1.25 var(--font-main);box-shadow:none;transition:background .15s ease,border-color .15s ease,color .15s ease}
.watch-v3 .choice:hover{border-color:rgba(244,81,181,.55);background:#211433;color:#fff}
.watch-v3 .choice:active{transform:none}
.watch-v3 .choice.active{border-color:rgba(244,81,181,.7);background:linear-gradient(120deg,#e14fae,#8f5be6);color:#fff;box-shadow:none}
.watch-v3 .choice:focus-visible{outline:2px solid #f6a6dc;outline-offset:2px}
.language-chip{min-height:40px;padding:8px 14px;border:1px solid rgba(157,97,239,.28);border-radius:10px;background:#160e24;color:#eadff7;font-size:14px}
.watch-v3 .episode-ranges{gap:8px;margin-top:12px}
.watch-v3 .episode-ranges .choice{min-height:36px;padding:6px 12px;font-size:13px}
.watch-v3 .episode-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:12px 0 0}
.watch-v3 .episode-grid .choice{min-height:40px;padding:8px 6px;font-size:13.5px}
.episode-nav{gap:12px;padding-top:16px;border-top:1px solid rgba(157,97,239,.18)}
.watch-v3 .episode-nav .btn{min-width:150px;min-height:42px;border-radius:10px;font:500 14px/1.25 var(--font-main);box-shadow:none;transform:none}
.watch-v3 .episode-nav .btn.ghost{border:1px solid rgba(157,97,239,.28);background:#160e24;color:#eadff7}
.watch-v3 .episode-nav .btn.primary{border:1px solid rgba(244,81,181,.7);background:linear-gradient(120deg,#e14fae,#8f5be6);color:#fff}
.watch-v3 .episode-nav .btn:not(:disabled):hover{filter:brightness(1.08)}
.watch-v3 .episode-nav .btn:disabled{opacity:.42;cursor:default;filter:none}
.episode-now{color:#b9a9c8;font-size:13px}

/* Player: same 16:9 stage; calmer loading / failure layers. */
.watch-v3 .player-shell{border-color:rgba(157,97,239,.22);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.watch-v3 .player-loading{gap:10px;background:rgba(8,5,16,.66);font:500 14px/1.5 var(--font-main);color:#eadff7}
.watch-v3 .player-failure{gap:10px;background:rgba(8,5,16,.84)}
.watch-v3 .player-failure p{flex:0 0 100%;max-width:none;margin:0 0 6px;padding:0 6%;color:#f0e6fb;font-size:15px}
.watch-v3 .player-failure .btn{min-height:42px;padding:9px 18px;border-radius:10px;font:500 14px/1.25 var(--font-main);box-shadow:none;transform:none}
.watch-v3 .player-failure .btn.primary{border:1px solid rgba(244,81,181,.7);background:linear-gradient(120deg,#e14fae,#8f5be6);color:#fff}
.watch-v3 .player-failure .btn.ghost{border:1px solid rgba(157,97,239,.3);background:#160e24;color:#eadff7}

/* Details card: poster left, title + facts + genres + synopsis right. */
.watch-info{grid-template-columns:160px minmax(0,1fr);align-items:start;gap:22px;margin:18px 0 0;padding:20px;border:1px solid rgba(157,97,239,.2);border-radius:12px;background:rgba(20,12,34,.72)}
.watch-poster{border-color:rgba(157,97,239,.22);border-radius:10px}
.watch-info-title{margin:0 0 2px;color:#cdb3f2;font-size:13px;font-weight:500;letter-spacing:.02em}
.info-name{margin:0 0 12px;color:#fff;font-size:clamp(17px,1.6vw,21px);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.info-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 12px}
.info-facts:empty{display:none}
.info-facts div{min-width:0}
.info-facts dt{color:#a897bf;font-size:12px;line-height:1.4}
.info-facts dd{margin:2px 0 0;color:#f0e6fb;font-size:14px;font-weight:500;line-height:1.4}
.watch-v3 .watch-info .tags{margin:0 0 14px}
.info-synopsis{padding-top:12px;border-top:1px solid rgba(157,97,239,.15)}
.info-sub{margin:0 0 6px;color:#cdb3f2;font-size:14px;font-weight:500}
.info-sub[hidden]{display:none}
.watch-v3 #watchSummary{margin:0;color:#d9cce6;font-size:14.5px;line-height:1.8;white-space:pre-line}
.info-synopsis.is-clamped #watchSummary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.read-more{margin:8px 0 0;padding:4px 0;border:0;background:none;color:#f39bd6;font:500 14px/1.4 var(--font-main);cursor:pointer}
.read-more:hover{color:#ffc4ea;text-decoration:underline}
.read-more:focus-visible{outline:2px solid #f6a6dc;outline-offset:2px;border-radius:4px}
.read-more[hidden]{display:none}

/* Related */
.watch-v3 .recommendations{margin-top:30px}
.watch-v3 .recommendations h2{margin:0 0 14px;font-size:clamp(18px,1.8vw,21px);font-weight:600}

@media(max-width:767px){
 .watch-controls{gap:14px;padding:14px}
 .control-row{grid-template-columns:minmax(0,1fr);gap:8px}
 .control-label{padding-top:0}
 .watch-v3 .choice{min-height:42px}
 .watch-v3 .episode-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .watch-v3 .episode-nav .btn{flex:1;min-width:0;padding-left:8px;padding-right:8px}
 .watch-info{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 14px;padding:14px}
 .info-facts{gap:8px 16px}
 .watch-v3 .watch-details{display:contents}
 .watch-poster{grid-column:1;grid-row:1/span 3}
 .watch-info-title,.info-name,.info-facts{grid-column:2;margin:0}
 .watch-v3 .watch-info .tags,.info-synopsis{grid-column:1/-1;margin:8px 0 0}
 .info-name{font-size:17px}
}
@media(max-width:420px){.watch-v3 .episode-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.watch-v3 .choice,.read-more{transition:none}}