:root{
  --bg:#0b1220;--bg2:#0f1830;--panel:#131d36;--line:#23304f;
  --gold:#c9a24b;--gold2:#e3c37a;--text:#e8ecf4;--muted:#8d9ab5;--onaccent:#16120a;
  --ok:#4fbf8b;--bad:#d8605f;
  --head:'Noto Serif Thai','Noto Serif',Georgia,serif;
  --sans:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;--nav:64px;--top:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.6;
  padding-top:calc(var(--top) + env(safe-area-inset-top));padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 12px)}
a{color:var(--gold2);text-decoration:none}
h1,h2,h3{font-family:var(--head);margin:0 0 .4em;line-height:1.3}
h1{font-size:2rem}h2{font-size:1.35rem}h3{font-size:1.05rem}
p{margin:.3em 0 .8em}
img{max-width:100%}
.muted{color:var(--muted)}.sm{font-size:.85rem}
.loading,.empty{padding:48px 16px;text-align:center;color:var(--muted)}

/* announcement */
.announce{background:var(--gold);color:var(--onaccent);text-align:center;padding:6px 14px;font-size:.88rem;font-weight:700}
.announce a{color:inherit;text-decoration:underline}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;height:calc(var(--top) + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);min-width:0}
.brand img{width:36px;height:36px;object-fit:contain;flex:none}
.brand img.rounded{border-radius:9px}.brand img.circle{border-radius:50%;object-fit:cover}.brand img.square{border-radius:0}
.brand span{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand b{font-family:var(--head);letter-spacing:.14em;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand small{color:var(--gold);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .acts{display:flex;gap:8px;align-items:center}
.livechip{display:inline-flex;align-items:center;gap:6px;background:var(--bad);color:#fff;border-radius:99px;padding:4px 12px;font-size:.78rem;font-weight:700;letter-spacing:.08em}
.livechip::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.2s infinite}

/* nav */
#nav{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;height:calc(var(--nav) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
#nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:.7rem}
#nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#nav a.on{color:var(--gold2)}

/* layout */
main{max-width:var(--w,1080px);margin:0 auto;padding:0 16px}
section{margin:32px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.sec-h h2{margin:0}.sec-h a{font-size:.85rem}
.kicker{color:var(--gold);letter-spacing:.28em;font-size:.72rem;text-transform:uppercase}

/* hero */
.hero{margin:20px 0 8px;padding:40px 22px;border:1px solid var(--line);border-radius:calc(var(--r) + 2px);position:relative;overflow:hidden;
  background:radial-gradient(900px 300px at 85% -20%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 60%),linear-gradient(160deg,var(--bg2),var(--bg))}
.hero.img{background-size:cover;background-position:center;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.hero.img::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) calc(var(--ov)*1%),transparent),color-mix(in srgb,var(--bg) calc(var(--ov)*.55%),transparent))}
.hero>*{position:relative}
.hero h1{font-size:2.6rem;letter-spacing:.12em;margin:.2em 0}
.hero .rule{width:64px;height:3px;background:var(--gold);margin:12px 0 16px;border-radius:2px}
.hero p{color:color-mix(in srgb,var(--text) 72%,var(--bg));max-width:560px}
.hero.center{text-align:center;align-items:center}.hero.center .rule{margin-left:auto;margin-right:auto}
.hero.center .btns{justify-content:center}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.socials a{border:1px solid var(--line);border-radius:99px;padding:3px 14px;font-size:.85rem}

/* buttons / forms */
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:var(--onaccent);
  padding:10px 18px;border-radius:calc(var(--r) - 4px);font-weight:700;display:inline-block;text-align:center}
button:active,.btn:active{transform:scale(.98)}
button.ghost,.btn.ghost{background:transparent;color:var(--gold2)}
button.danger{background:transparent;border-color:var(--bad);color:var(--bad)}
button.sm,.btn.sm{padding:6px 12px;font-size:.85rem;border-radius:8px}
button:disabled{opacity:.45;cursor:not-allowed}
input,textarea,select{width:100%;font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none}
input[type=color]{padding:2px;height:42px;cursor:pointer}
input[type=range]{padding:0;accent-color:var(--gold)}
input:focus,textarea:focus,select:focus{border-color:var(--gold)}
textarea{min-height:110px;resize:vertical}
label{display:block;font-size:.85rem;color:var(--muted);margin:12px 0 4px}
label.chk{display:flex;gap:8px;align-items:center;color:var(--text);margin:12px 0}
label.chk input{width:auto}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.card .pad,.pad{padding:14px}
.vid{cursor:pointer}
.thumb{position:relative;aspect-ratio:16/9;background:#000 center/cover no-repeat}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.55))}
.play{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
  background:color-mix(in srgb,var(--bg) 75%,transparent);border:2px solid var(--gold);display:grid;place-items:center}
.play::before{content:'';border-left:16px solid var(--gold2);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.06em;color:var(--gold2);border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);padding:1px 9px;border-radius:99px}
.tag.live{color:#fff;background:var(--bad);border-color:var(--bad);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.55}}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.chips button{white-space:nowrap}
.news-item{display:flex;gap:12px;color:var(--text);padding:14px 16px;border-bottom:1px solid var(--line)}
.news-item:last-child{border:0}
.news-item .nt{flex:1;min-width:0}
.news-item img.nth{width:84px;height:84px;object-fit:cover;border-radius:10px;flex:none}
.news-item h3{margin:4px 0}
.pin{color:var(--gold)}
.article{white-space:pre-wrap;word-break:break-word}
.media{display:grid;gap:10px;margin:14px 0}
.media.n2,.media.n4,.media.n6{grid-template-columns:1fr 1fr}
.media.n3{grid-template-columns:repeat(3,1fr)}
.media img{width:100%;border-radius:10px;cursor:zoom-in;display:block;object-fit:cover;max-height:520px}
.media:not(.n1) img{aspect-ratio:4/3;max-height:none}
.article a{color:var(--gold2);text-decoration:underline}
.media .ratio{grid-column:1/-1}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.member{text-align:center;padding:18px 10px}
.avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;overflow:hidden;
  font-family:var(--head);font-size:1.5rem;color:var(--gold2);background:var(--bg2);border:1px solid var(--gold)}
.avatar img{width:100%;height:100%;object-fit:cover}
.about{white-space:pre-wrap}
footer.f{margin:40px 0 8px;text-align:center;color:var(--muted);font-size:.8rem}

/* bracket */
.bracket-wrap{overflow-x:auto;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.bracket{display:flex;gap:22px;min-width:max-content}
.round{display:flex;flex-direction:column;justify-content:space-around;gap:12px;width:220px}
.round h3{text-align:center;color:var(--gold);font-size:.8rem;letter-spacing:.14em;margin:0 0 4px}
.match{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.match.open{border-color:var(--bad)}
.match .p{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);font-size:.92rem}
.match .p:last-of-type{border-bottom:0}
.match .p span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.match .p em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.match .p.win{background:color-mix(in srgb,var(--ok) 15%,transparent);font-weight:700}
.match .p.win em{color:var(--ok)}
.match .p.lose{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent)}
.match .st{padding:4px 10px;font-size:.72rem;background:color-mix(in srgb,var(--bad) 20%,transparent);color:#ffb3b2}
.mini{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;background:var(--bg2);border:1px solid var(--line)}
.champ{margin:18px 0;padding:24px;text-align:center;border:1px solid var(--gold);border-radius:calc(var(--r) + 2px);
  background:radial-gradient(500px 200px at 50% 0,color-mix(in srgb,var(--gold) 24%,transparent),transparent 70%),var(--panel)}
.champ .n{font-family:var(--head);font-size:2rem;color:var(--gold2)}
.champ img.ph{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);margin:10px auto;display:block}
.cl{display:flex;flex-wrap:wrap;gap:10px}
.cl .c{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:4px 14px 4px 4px;font-size:.9rem}
.cl .c .mini{width:34px;height:34px}
.poster{width:100%;border-radius:var(--r);margin:10px 0}

/* judge */
.vote-card{margin:14px 0}
.vote-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.vote-btns button{padding:14px 8px;font-size:1.05rem;background:var(--bg2);color:var(--text);border-color:var(--line);display:flex;flex-direction:column;align-items:center;gap:8px}
.vote-btns button img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--line)}
.vote-btns button.sel{background:var(--gold);color:var(--onaccent);border-color:var(--gold)}

/* admin */
.tabs{display:flex;gap:6px;overflow-x:auto;margin:16px 0;padding-bottom:6px}
.tabs a{white-space:nowrap;padding:8px 14px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.9rem}
.tabs a.on{background:var(--gold);border-color:var(--gold);color:var(--onaccent);font-weight:700}
.list-i{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.list-i:last-child{border:0}
.list-i .t{min-width:0;flex:1}
.list-i .t b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-i img.lt{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.admin-m{padding:12px 0;border-bottom:1px solid var(--line)}
.admin-m .vs{font-weight:700}
.admin-m .vl{font-size:.8rem;color:var(--muted);margin-top:4px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cbox{border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--bg2)}
.cbox label{margin:0 0 4px}
.imgf{margin:12px 0}
.imgf .imgs{display:flex;gap:8px;flex-wrap:wrap}
.imgf .im{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.imgf .im img{width:100%;height:100%;object-fit:cover}
.imgf .im button{position:absolute;top:2px;right:2px;padding:0;width:22px;height:22px;border-radius:50%;line-height:20px;font-size:.75rem;background:rgba(0,0,0,.7);border-color:transparent;color:#fff}
.imgf .row-actions{margin-top:8px}
.imgf.compact .im{width:64px;height:64px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.swatch{width:84px;padding:6px;border-radius:10px;border:2px solid var(--line);cursor:pointer;background:transparent;color:var(--text);font-size:.75rem;text-align:center}
.swatch.on{border-color:var(--gold)}
.swatch i{display:block;height:30px;border-radius:6px;margin-bottom:4px}
.secrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.secrow span{flex:1}
.pickbg{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.8);display:flex;align-items:flex-end;justify-content:center}
.pick{background:var(--bg);border:1px solid var(--line);border-radius:18px 18px 0 0;width:100%;max-width:760px;max-height:82vh;overflow:auto;padding:16px}
.pick .grid3 .it{position:relative;cursor:pointer;aspect-ratio:1;border-radius:10px;overflow:hidden;border:2px solid var(--line)}
.pick .grid3 .it img{width:100%;height:100%;object-fit:cover}
.pick .grid3 .it:hover{border-color:var(--gold)}
.pick .grid3 .it b{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.7);font-size:.65rem;padding:0 6px;border-radius:99px;color:#fff;font-weight:400}

/* modal / toast */
#modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.88);display:flex;flex-direction:column;justify-content:center;padding:14px}
#modal .box{max-width:900px;width:100%;margin:0 auto}
#modal .box img.full{width:100%;max-height:80vh;object-fit:contain;border-radius:10px}
#modal .x{align-self:flex-end;margin:0 auto 10px;max-width:900px;width:100%;text-align:right}
.ratio{position:relative;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#toast{position:fixed;left:50%;bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 18px);transform:translateX(-50%) translateY(20px);
  background:var(--panel);border:1px solid var(--gold);color:var(--text);padding:10px 18px;border-radius:99px;opacity:0;
  pointer-events:none;transition:.25s;z-index:80;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
#toast.err{border-color:var(--bad)}

/* ===== LIVE (จอใหญ่) ===== */
body.live{padding:0;overflow-x:hidden}
body.live .top,body.live #nav{display:none}
body.live main{max-width:none;padding:0}
.lv{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:18px 24px;
  background:radial-gradient(1200px 600px at 50% -10%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 65%),var(--bg)}
.lv-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lv-top .l{display:flex;align-items:center;gap:12px;min-width:0}
.lv-top img.logo{width:44px;height:44px;object-fit:contain}
.lv-top h1{font-size:clamp(1.1rem,2.4vw,1.8rem);margin:0;letter-spacing:.06em}
.lv-top .r{display:flex;gap:8px;align-items:center}
.lv-banner{margin:14px 0 0;background:var(--gold);color:var(--onaccent);border-radius:12px;padding:10px 18px;text-align:center;font-weight:700;font-size:clamp(1rem,2vw,1.5rem)}
.lv-stage{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.5vh,28px);padding:12px 0}
.lv-round{text-align:center;color:var(--gold);letter-spacing:.3em;font-size:clamp(.9rem,1.6vw,1.3rem);text-transform:uppercase}
.vsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(8px,2vw,32px)}
.fighter{position:relative;text-align:center;padding:clamp(14px,2.6vw,30px) 14px;border:2px solid var(--line);border-radius:22px;background:var(--panel);transition:.5s}
.fighter .ph{width:clamp(110px,22vw,300px);height:clamp(110px,22vw,300px);border-radius:50%;object-fit:cover;border:4px solid var(--line);background:var(--bg2);display:grid;place-items:center;margin:0 auto 14px;
  font-family:var(--head);font-size:clamp(2.5rem,8vw,6rem);color:var(--gold2)}
.fighter .nm{font-family:var(--head);font-size:clamp(1.4rem,4vw,3.4rem);font-weight:700;line-height:1.15;word-break:break-word}
.fighter .sc{font-family:var(--head);font-size:clamp(2.6rem,9vw,8rem);line-height:1;color:var(--gold2);height:0;opacity:0;overflow:hidden;transition:.6s}
.fighter.win{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 30%,transparent),0 0 80px color-mix(in srgb,var(--gold) 35%,transparent);transform:scale(1.04)}
.fighter.win .ph{border-color:var(--gold)}
.fighter.lose{opacity:.45;filter:grayscale(.7)}
.fighter.show .sc{height:auto;opacity:1;margin-top:8px}
.fighter .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:clamp(1.6rem,4vw,3rem);opacity:0;transition:.5s}
.fighter.win .crown{opacity:1}
.vs{font-family:var(--head);font-size:clamp(1.6rem,5vw,4.5rem);color:var(--gold);letter-spacing:.1em}
.jrow{display:flex;justify-content:center;gap:clamp(8px,2vw,22px);flex-wrap:wrap}
.jc{perspective:700px;width:clamp(120px,18vw,220px);height:clamp(78px,11vh,120px)}
.jc .in{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.3,.1,.2,1);transform-style:preserve-3d}
.jc.flip .in{transform:rotateY(180deg)}
.jc .f,.jc .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:2px solid var(--line);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
.jc .b{transform:rotateY(180deg);border-color:var(--gold)}
.jc .jn{font-size:clamp(.75rem,1.4vw,1.05rem);color:var(--muted)}
.jc .st{font-size:clamp(.9rem,1.8vw,1.4rem);font-weight:700}
.jc .st.ok{color:var(--ok)}.jc .st.wait{color:var(--muted)}
.jc .pick{font-family:var(--head);font-size:clamp(.95rem,2vw,1.6rem);color:var(--gold2);font-weight:700;line-height:1.2;word-break:break-word;max-height:none;border:0;background:none;padding:0;overflow:visible;border-radius:0;width:auto}
.lv-note{text-align:center;color:var(--muted);font-size:clamp(.9rem,1.6vw,1.3rem)}
.lv-next{text-align:center;color:var(--text);font-size:clamp(1rem,2vw,1.6rem)}
.lv-champ{text-align:center}
.lv-champ .ph{width:clamp(160px,30vw,380px);height:clamp(160px,30vw,380px);border-radius:50%;object-fit:cover;border:6px solid var(--gold);margin:12px auto;display:grid;place-items:center;box-shadow:0 0 120px color-mix(in srgb,var(--gold) 45%,transparent);background:var(--bg2);font-size:6rem;color:var(--gold2)}
.lv-champ .nm{font-family:var(--head);font-size:clamp(2.4rem,8vw,7rem);color:var(--gold2);line-height:1.1}
.lv-champ .tt{font-size:clamp(3rem,10vw,8rem)}
.lv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;flex-wrap:wrap}
.lv-ov{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--bg) 96%,transparent);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:12px}
.pop{animation:pop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.wall .w{text-align:center}
.wall .w .ph{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--line);margin:0 auto 6px;display:grid;place-items:center;background:var(--bg2);color:var(--gold2);font-size:2rem}

@media(min-width:720px){
  .hero{padding:56px 44px}.hero h1{font-size:3.4rem}
  body{padding-bottom:calc(var(--nav) + 24px)}
}
.lv-top .r>*{white-space:nowrap}
@media(max-width:560px){
  .lv{padding:14px}
  .lv-top{flex-wrap:wrap;row-gap:10px}
  .lv-top .l,.lv-top .r{flex:1 1 100%}
  .lv-top .r{flex-wrap:wrap}
  .lv-foot span:first-child{display:none}
  .vsrow{grid-template-columns:1fr;gap:6px}.vs{text-align:center}
  .fighter{display:flex;align-items:center;gap:14px;text-align:left}
  .fighter .ph{width:84px;height:84px;margin:0;flex:none;font-size:2rem}
  .fighter .nm{font-size:1.4rem}.fighter .sc{font-size:3rem}
}
@media(max-width:420px){.grid2{grid-template-columns:1fr}.news-item img.nth{width:64px;height:64px}}

/* ===== v2: ทันสมัย ===== */
html{font-size:calc(16px*var(--fs,1))}
html[data-bg=glow] body{background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 60%),radial-gradient(700px 400px at -10% 35%,color-mix(in srgb,var(--gold) 8%,transparent),transparent 60%),var(--bg);background-attachment:fixed}
html[data-bg=grid] body{background-color:var(--bg);background-image:linear-gradient(color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 50%,transparent) 1px,transparent 1px);background-size:40px 40px}
html[data-card=glass] .card,html[data-card=glass] .form,html[data-card=glass] .match{background:color-mix(in srgb,var(--panel) 55%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-card=outline] .card,html[data-card=outline] .form,html[data-card=outline] .match{background:transparent}
html[data-btn=gradient] button:not(.ghost):not(.danger),html[data-btn=gradient] .btn:not(.ghost){background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:transparent}
html[data-btn=outline] button:not(.ghost):not(.danger),html[data-btn=outline] .btn:not(.ghost){background:transparent;color:var(--gold2)}
.top{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.card{transition:transform .25s,border-color .25s,box-shadow .25s}
.vid:hover,.member:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 36px -16px color-mix(in srgb,var(--gold) 60%,transparent)}
.vid:hover .play{transform:translate(-50%,-50%) scale(1.12)}.play{transition:transform .25s}
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}.rv.in{opacity:1;transform:none}
.hero h1{background:linear-gradient(135deg,var(--text) 30%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero.h-sm{padding:24px 22px}.hero.h-sm.img{min-height:200px}
.hero.h-lg{padding:84px 28px;min-height:420px}.hero.h-lg.img{min-height:540px}
.prow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:10px}
.pz{text-align:center;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg2)}
.pz .medal{font-size:2rem}.pz .pl{font-size:.75rem;color:var(--muted)}.pz .pa{font-family:var(--head);font-size:1.25rem;color:var(--gold2)}.pz .pw{margin-top:4px;font-weight:700}
.lv.hasbg{background-size:cover;background-position:center}
.lv .vs img{height:clamp(60px,12vw,160px);width:auto;display:block}
.lv.frame-rounded .fighter .ph,.lv.frame-rounded .lv-champ .ph{border-radius:24px}
.lv.frame-square .fighter .ph,.lv.frame-square .lv-champ .ph{border-radius:0}
.lv-pod{display:flex;justify-content:center;gap:clamp(12px,3vw,44px);flex-wrap:wrap;margin-top:14px}
.lv-pod div{text-align:center}.lv-pod span{display:block;font-size:clamp(1.6rem,3.5vw,3rem)}
.lv-pod b{display:block;font-size:clamp(1rem,2.2vw,1.8rem)}.lv-pod i{font-style:normal;color:var(--gold2);font-size:clamp(.9rem,1.8vw,1.4rem)}
.lv-sp{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;padding:8px 0}
.lv-sp img{height:clamp(28px,5vh,56px);width:auto;opacity:.9}
@media(min-width:900px){
  #nav{top:0;bottom:auto;left:50%;right:auto;transform:translateX(-50%);height:calc(var(--top) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 0 0;background:none;border:0;backdrop-filter:none;gap:4px}
  #nav a{flex:none;flex-direction:row;gap:8px;padding:0 16px;font-size:.92rem;border-radius:99px;height:38px;align-self:center}
  #nav a svg{width:18px;height:18px}#nav a.on{background:color-mix(in srgb,var(--gold) 16%,transparent)}
  body{padding-bottom:24px}#toast{bottom:24px}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}