/* รายงานคลิป ขั้นเทพ × Yataliban: น้ำเงินของขั้นเทพ พื้นกรมท่า ตัวเลขใหญ่อ่านง่าย */
:root{
  --bg:#070b18;--bg2:#0b1226;--panel:#101935;--panel2:#16224a;--line:rgba(140,170,255,.12);
  --text:#f2f5ff;--sub:#9fb0d8;--muted:#6f7fa8;
  --brand:#1d6bff;--brand2:#0a4bff;--brand-soft:rgba(29,107,255,.16);
  --gold:#ffc23d;--gold-ink:#241700;--good:#33d69f;--warn:#ffc23d;--bad:#ff6680;--yt:#ff0033;--fb:#4d8dff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 600px at 50% -200px,rgba(29,107,255,.28),transparent 70%),var(--bg);color:var(--text);font:500 15px/1.45 Kanit,system-ui,sans-serif}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
svg{fill:currentColor}
.page{max-width:1080px;margin:0 auto;padding:18px 16px 40px;display:grid;gap:16px}
.page>*{min-width:0}
.loading{padding:80px 0;text-align:center;color:var(--sub)}
.muted{color:var(--sub)}
h1,h2{margin:0;font-weight:800;letter-spacing:-.01em}

/* หัวเว็บ */
.hero{position:relative;overflow:hidden;display:grid;justify-items:center;gap:14px;padding:26px 18px 22px;border-radius:24px;text-align:center;
  background:linear-gradient(160deg,rgba(29,107,255,.35),rgba(10,75,255,.08) 55%,transparent),var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.hero:after{content:"";position:absolute;right:-50px;top:-50px;width:220px;height:220px;background:url(assets/kt-mark.png) center/contain no-repeat;opacity:.08;pointer-events:none}
.pair{display:flex;align-items:center;gap:12px}
.pair img{width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 10px 30px rgba(0,0,0,.45)}
.pair .x{font-size:26px;font-weight:800;color:var(--sub)}
.eyebrow{margin:0;font-size:13px;letter-spacing:.12em;color:#8fb4ff}
.hero h1{font-size:clamp(28px,7.5vw,44px);line-height:1.1}
.hero h1 span{color:var(--brand)}
.sub{margin:4px 0 0;font-size:16px;color:var(--sub)}
.hero-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.yt-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px 0 12px;border-radius:999px;background:#fff;color:#0f0f0f;font-weight:800;text-decoration:none;font-size:14px}
.yt-btn svg{width:24px;height:24px;fill:var(--yt)}
.live{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--sub)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--good);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(51,214,159,.6)}70%{box-shadow:0 0 0 8px rgba(51,214,159,0)}100%{box-shadow:0 0 0 0 rgba(51,214,159,0)}}
.kt-word{display:none}

/* คะแนนรวม */
.score{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:18px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.ring-box{position:relative;width:118px;height:118px}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:14}
.ring-bg{stroke:rgba(255,102,128,.22)}
.ring-fg{stroke:var(--brand);stroke-linecap:round}
.ring-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ring-num b{font-size:38px;font-weight:800}
.ring-num span{font-size:13px;color:var(--sub);margin-top:2px}
.label{margin:0;font-size:14px;color:var(--sub)}
.score h2{font-size:clamp(22px,5.5vw,30px);line-height:1.2;margin:2px 0 4px}
.score h2 em{font-style:normal;color:var(--bad)}
.score p{margin:0;font-size:14px}
.bonus{margin-top:8px!important;display:inline-block;padding:5px 11px;border-radius:999px;background:var(--brand-soft);color:#9cc0ff}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stats div{display:grid;gap:1px;padding:13px 14px;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.stats span{font-size:13px;color:var(--sub)}
.stats b{font-size:28px;font-weight:800;line-height:1.15}
.stats small{font-size:12px;color:var(--muted)}

/* เลือกเดือน */
.sec-head{margin:0 2px 10px}
.sec-head h2{font-size:20px}
.sec-head p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mcard{display:grid;gap:4px;justify-items:start;align-content:start;text-align:left;padding:11px 10px 10px;min-width:0;border:0;border-radius:18px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:transform .12s,box-shadow .12s}
.mcard:hover{transform:translateY(-2px)}
.mcard.on{background:linear-gradient(160deg,var(--brand),var(--brand2));box-shadow:0 10px 26px rgba(29,107,255,.4)}
.mname{font-size:15px;font-weight:800}
.mcount{font-size:13px;color:var(--sub)}
.mcount b{font-size:24px;font-weight:800;color:var(--text);line-height:1}
.dots{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:100%}
.dots i{height:5px;border-radius:3px;background:rgba(255,102,128,.35)}
.dots i.y{background:var(--good)}
.mstate{font-size:13px;font-weight:800}
.full .mstate{color:var(--good)}.miss .mstate{color:var(--bad)}
.mviews{font-size:12px;color:var(--muted)}
.mcard.on .mcount,.mcard.on .mviews{color:rgba(255,255,255,.8)}
.mcard.on .mstate{color:#fff}
.mcard.on .dots i{background:rgba(255,255,255,.3)}.mcard.on .dots i.y{background:#fff}
.mcard.extra .mstate{color:#9cc0ff}

/* รายละเอียดเดือน */
.detail{padding:16px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:12px}
.detail-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center;text-align:center}
.detail-title h2{font-size:clamp(20px,5vw,26px)}
.detail-title p{margin:2px 0 6px;font-size:14px;color:var(--sub)}
.nav{width:44px;height:44px;border:0;border-radius:14px;background:var(--panel2);font-size:24px;line-height:1}
.nav:disabled{opacity:.3;cursor:default}
.badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:800}
.badge.green{background:rgba(51,214,159,.16);color:var(--good)}.badge.red{background:rgba(255,102,128,.16);color:var(--bad)}.badge.blue{background:var(--brand-soft);color:#9cc0ff}
.detail-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0 12px;padding-top:12px;border-top:1px solid var(--line)}
.detail-bar p{margin:0;color:var(--sub);font-size:14px}
.detail-bar b{color:var(--text);font-size:20px}
.seg{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--panel2)}
.seg button{min-height:36px;padding:0 13px;border:0;border-radius:10px;background:none;color:var(--sub);font-size:14px}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}

.clips{display:grid;gap:10px}
.clip{position:relative;display:grid;grid-template-columns:minmax(0,1fr);border-radius:18px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.rank{position:absolute;left:10px;top:10px;z-index:1;display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:10px;background:rgba(0,0,0,.72);font-weight:800;font-size:15px;pointer-events:none}
.clip:nth-child(1) .rank{background:var(--gold);color:var(--gold-ink)}
.thumb{position:relative;display:block;aspect-ratio:16/9;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .15s;background:rgba(0,0,0,.25)}
.play svg{width:54px;height:54px;padding:12px;border-radius:50%;background:rgba(0,0,0,.6);fill:#fff}
.thumb:hover .play{opacity:1}
.clip-body{display:grid;gap:8px;padding:12px 14px 14px;align-content:start}
.title{font-size:16px;font-weight:800;line-height:1.35;text-decoration:none}
.title:hover{text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:13px;color:var(--sub)}
.kind{padding:1px 9px;border-radius:999px;font-weight:800;font-size:12px}
.k-rov{background:var(--gold);color:var(--gold-ink)}.k-roblox{background:var(--brand);color:#fff}.k-other{background:var(--muted);color:#fff}
.nums{display:flex;flex-wrap:wrap;gap:6px}
.nums>*{display:inline-flex;align-items:baseline;gap:5px;padding:6px 11px;border-radius:12px;background:var(--panel2);text-decoration:none;font-size:13px;color:var(--sub)}
.nums b{font-size:17px;color:var(--text)}
.v-yt svg{width:18px;height:18px;fill:var(--yt);align-self:center}
.v-fb b{color:var(--fb)}
.proof{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:5px 12px 5px 8px;border-radius:999px;background:rgba(51,214,159,.13);color:var(--good);font-size:13px;text-decoration:none}
.proof svg{width:16px;height:16px}
.proof:hover{text-decoration:underline}
.note{margin:0;font-size:13px;color:var(--muted)}
.hole{display:grid;gap:2px;margin-top:10px;padding:18px;border-radius:18px;border:2px dashed rgba(255,102,128,.5);text-align:center}
.hole b{color:var(--bad);font-size:20px}
.hole span{font-size:13px;color:var(--sub)}

/* สรุปทุกเดือน */
.card{padding:16px;border-radius:22px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.sumlist{display:grid;gap:8px}
.srow{display:grid;grid-template-columns:minmax(0,1.3fr) auto;grid-template-areas:"m c" "v v";gap:8px 12px;align-items:center;padding:12px 14px;border:0;border-radius:16px;background:var(--bg2);text-align:left;box-shadow:inset 0 0 0 1px var(--line)}
.srow.on{box-shadow:inset 0 0 0 2px var(--brand)}
.srow:hover{background:var(--panel2)}
.s-month{grid-area:m;display:grid}
.s-month b{font-size:16px}
.s-month small,.s-clips small,.s-views small{font-size:12px;color:var(--muted)}
.s-clips{grid-area:c;display:grid;justify-items:end;gap:2px}
.s-views{grid-area:v;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.vbar{height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.vbar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand2),#5aa0ff)}
.pill{display:inline-grid;place-items:center;min-width:46px;padding:2px 10px;border-radius:999px;font-weight:800}
.pill.good{background:rgba(51,214,159,.16);color:var(--good)}.pill.warn{background:rgba(255,194,61,.16);color:var(--warn)}.pill.bad{background:rgba(255,102,128,.16);color:var(--bad)}.pill.blue{background:var(--brand-soft);color:#9cc0ff}
.foot{padding:4px;font-size:12px;color:var(--muted);text-align:center}

@media (min-width:720px){
  .page{padding:30px 24px 50px;gap:18px}
  .hero{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;padding:30px 32px;gap:26px;align-items:center}
  .hero-links{justify-content:flex-start}
  .pair img{width:92px;height:92px}
  .score{padding:24px 28px;gap:26px}
  .ring-box{width:140px;height:140px}
  .ring-num b{font-size:46px}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .picker{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
  .mcard{padding:13px 13px 12px}
  .mcount b{font-size:28px}
  .detail,.card{padding:22px}
  .clip{grid-template-columns:260px minmax(0,1fr)}
  .thumb{height:100%;aspect-ratio:auto;min-height:146px}
  .srow{grid-template-columns:minmax(0,1.2fr) 120px minmax(0,1.6fr);grid-template-areas:"m c v"}
}
@media (prefers-reduced-motion:reduce){.live i{animation:none}.mcard{transition:none}}

/* คอมจอกว้าง 16:9 ใช้เต็มจอ */
@media (min-width:1100px){
  .page{max-width:none;padding:28px clamp(24px,3vw,56px) 48px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
  .hero,.score{grid-column:auto}
  .hero{height:100%}
  .score{height:100%}
  .stats,.picker-wrap,.detail,.card,.foot{grid-column:1/-1}
  .clips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clip{grid-template-columns:minmax(0,1fr)}
  .thumb{aspect-ratio:16/9;height:auto;min-height:0}
  .sumlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1500px){
  .clips{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sumlist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats b{font-size:34px}
}
@media (min-width:1900px){.clips{grid-template-columns:repeat(4,minmax(0,1fr))}}

.mcard.later{opacity:.5}.later .mstate{color:var(--muted)}
.mcard.now{box-shadow:inset 0 0 0 2px var(--gold)}
.mcard.on.now{box-shadow:0 10px 26px rgba(29,107,255,.4),inset 0 0 0 2px var(--gold)}
.past{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.past span{font-size:13px;color:var(--muted);margin-right:4px}
.pchip{min-height:34px;padding:0 12px;border:0;border-radius:999px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);color:var(--sub);font-size:13px}
.pchip.on{background:var(--brand);color:#fff}
.group{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:16px 2px 10px;font-size:17px;font-weight:800}
.group span{font-size:13px;font-weight:500;color:var(--sub)}
.empty{margin:0;padding:22px;text-align:center;color:var(--sub);border-radius:16px;background:var(--bg2)}
.srow.later{opacity:.5}
.red{color:var(--bad)}
.s-month em{font-style:normal;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--gold);color:var(--gold-ink);margin-left:4px;vertical-align:middle}
@media (min-width:1100px){.picker{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* โทนนุ่ม: ขาด ROV เป็นสีส้มอ่อน คลิปเกมอื่นเป็นสีเขียว */
.ring-bg{stroke:rgba(255,255,255,.08)}
.ring-oth{fill:none;stroke-width:14;stroke:var(--good);stroke-linecap:round}
.ring-fg{stroke:var(--gold)}
.score h2 small{font-size:15px;font-weight:500;color:var(--sub)}
.split{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
.split span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:14px;background:var(--panel2)}
.split i{width:10px;height:10px;border-radius:50%}
.split b{font-size:17px}
.sp-rov i{background:var(--gold)}
.sp-oth{background:rgba(51,214,159,.14)!important;color:var(--good)}.sp-oth i{background:var(--good)}
.sp-miss{background:rgba(255,170,90,.14)!important;color:#ffb36b}
.dots i{background:rgba(255,255,255,.12)}
.dots i.y{background:var(--gold)}
.dots i.g{background:var(--good)}
.miss .mstate{color:#ffb36b}
.full .mstate{color:var(--gold)}
.gpill{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(51,214,159,.16);color:var(--good);font-size:12px;font-weight:800}
.mcard.on .gpill{background:rgba(255,255,255,.2);color:#fff}
.mcard.on .dots i{background:rgba(255,255,255,.25)}.mcard.on .dots i.y{background:var(--gold)}.mcard.on .dots i.g{background:#7dffcf}
.badge.amber{background:rgba(255,170,90,.16);color:#ffb36b}
.hole{border-color:rgba(255,170,90,.45)}
.hole b{color:#ffb36b}
.group.g{color:var(--good)}
.s-clips{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.picker{grid-template-columns:repeat(3,minmax(0,1fr))}
.gpill,.mstate{white-space:nowrap;font-size:12px}
.mname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (min-width:720px){.picker{grid-template-columns:repeat(4,minmax(0,1fr))}.gpill,.mstate{font-size:13px}}
@media (min-width:1100px){.picker{grid-template-columns:repeat(7,minmax(0,1fr))}}

.lg{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 4px 0 6px;vertical-align:middle}
.lg.y{background:var(--gold)}.lg.g{background:var(--good)}

/* 16:9 คอมพิวเตอร์เป็นหลัก */
@media (min-width:1100px){
  body{font-size:16px}
  .page{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;padding:32px clamp(28px,3.2vw,64px) 56px}
  .hero{grid-template-columns:auto minmax(0,1fr);padding:34px 36px}
  .hero h1{font-size:clamp(36px,2.8vw,52px)}
  .score{grid-template-columns:auto minmax(0,1fr);padding:30px 36px;gap:34px}
  .ring-box{width:190px;height:190px}
  .ring-num b{font-size:60px}
  .score h2{font-size:clamp(30px,2.4vw,42px)}
  .split span{font-size:16px;padding:7px 14px}.split b{font-size:20px}
  .stats div{padding:18px 20px}
  .stats b{font-size:clamp(30px,2.4vw,42px)}
  .sec-head h2{font-size:24px}
  .sec-head p{font-size:14px}
  .mcard{padding:16px 16px 14px;gap:7px}
  .mname{font-size:17px}
  .mcount b{font-size:36px}
  .dots i{height:7px}
  .gpill,.mstate{font-size:14px}
  .detail,.card{padding:26px 28px}
  .detail-title h2{font-size:30px}
  .clips{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .sumlist{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1700px){.clips{grid-template-columns:repeat(4,minmax(0,1fr))}.sumlist{grid-template-columns:repeat(4,minmax(0,1fr))}}

.gts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gt{display:grid;gap:2px;padding:16px 18px;border-radius:18px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.gt span{font-size:14px;color:var(--sub)}
.gt b{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.15}
.gt small{font-size:14px;color:var(--sub)}
.gt.rov b{color:var(--gold)}.gt.oth b{color:var(--good)}.gt.miss b{color:#ffb36b}
.gt.all{background:linear-gradient(160deg,rgba(29,107,255,.35),rgba(10,75,255,.12));box-shadow:inset 0 0 0 1px rgba(29,107,255,.5)}
@media (min-width:1100px){.gts{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.gt{padding:22px 24px}}

.v-fb svg{width:17px;height:17px;fill:#1877f2;align-self:center}
.v-fb{box-shadow:inset 0 0 0 1px rgba(77,141,255,.35)}
.v-fb:hover{background:rgba(24,119,242,.2)}
.vsplit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.vsplit .yt,.vsplit .fb{display:inline-flex;align-items:center;gap:5px;color:var(--text);font-weight:800}
.vsplit svg{width:18px;height:18px}
.vsplit .yt svg{fill:var(--yt)}.vsplit .fb svg{fill:#1877f2}