/* หน้าประกาศผล — โพเดียม ถ้วยรางวัล ผลล่าสุด ผลโหวต */
.ann-hero { position: relative; overflow: hidden; color: #fff; text-align: center; padding: 8.5rem 0 5.6rem; background: radial-gradient(1000px 460px at 50% -10%, #23469e 0, #0a1f4d 52%, #011A41 100%); }
.ann-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, transparent, #ff3d9a, #ff9ccc, #ff3d9a, transparent); box-shadow: 0 0 24px 4px rgba(255, 61, 154, .6); }
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ann-wm { position: absolute; right: -4%; top: 50%; width: min(46vw, 520px); transform: translateY(-50%); opacity: .07; pointer-events: none; filter: grayscale(1) brightness(2); }
.ann-hero h1 { font-weight: 800; font-size: clamp(1.8rem, 4.6vw, 2.9rem); margin: .7rem 0 .3rem; background: linear-gradient(90deg, #fff 30%, #ff9ccc 75%, #ffb48a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ann-sub { color: #c9d6ff; margin: 0 0 1.4rem; }
.ann-stats { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; justify-content: center; align-items: center; }
.ann-ring { position: relative; width: 92px; height: 92px; }
.ann-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ann-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.ann-ring .bg { stroke: rgba(255, 255, 255, .15); }
.ann-ring .fg { stroke: #ff3d9a; filter: drop-shadow(0 0 6px rgba(255, 61, 154, .9)); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.ann-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; }
.ann-st { display: grid; text-align: center; min-width: 84px; }
.ann-st b { font-size: 2rem; font-weight: 800; line-height: 1; text-shadow: 0 0 18px rgba(255, 61, 154, .55); }
.ann-st span { font-size: .82rem; color: #c9d6ff; }
.ann-stamp { display: inline-block; margin: 1.4rem auto 0; padding: .35rem 1rem; border-radius: 999px; font-size: .82rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #dfe7ff; }
.ann-stamp.ok i { color: #4ade80; } .ann-stamp.bad i { color: #fbbf24; }

.sum-body { margin-top: -2.4rem; }
.ann-card { background: #fff; border-radius: 28px; padding: 1.4rem 1.4rem 0; margin-bottom: 1.4rem; border: 1px solid #e8ecf8; box-shadow: 0 30px 60px -36px rgba(1, 26, 65, .55); overflow: hidden; }
.ann-ch { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.ann-ch .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-size: 1.2rem; background: linear-gradient(135deg, #ff3d9a, #E93C05); box-shadow: 0 0 18px rgba(255, 61, 154, .5); }
.ann-ch h2 { margin: 0; font-size: 1.3rem; font-weight: 800; } .ann-ch small { color: #5a6b86; }

/* reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.rv.in { opacity: 1; transform: none; }

/* โพเดียม */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; padding: 1rem .2rem 0; max-width: 760px; margin: 0 auto; }
.pod { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; transition: transform .25s ease-out; will-change: transform; }
.pod-medal { font-size: 2.4rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); animation: podFloat 3.2s ease-in-out infinite; }
.pod.p1 .pod-medal { font-size: 3.2rem; }
@keyframes podFloat { 50% { transform: translateY(-6px); } }
.pod-name { font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.pod-pts { line-height: 1; margin: .3rem 0; } .pod-pts b { font-size: 2.1rem; font-weight: 800; color: var(--tc, #355EFC); } .pod-pts small { color: #5a6b86; margin-left: .25rem; }
.pod.p1 .pod-pts b { font-size: 2.8rem; }
.pod-md { font-size: .82rem; color: #4a5a7a; margin-bottom: .6rem; }
.pod-step { width: 100%; border-radius: 16px 16px 0 0; background: linear-gradient(180deg, var(--tc, #355EFC), color-mix(in srgb, var(--tc, #355EFC) 55%, #011A41)); display: grid; place-items: start center; padding-top: .5rem; color: rgba(255, 255, 255, .92); font-size: 2rem; font-weight: 800; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.pod.p1 .pod-step { height: 150px; } .pod.p2 .pod-step { height: 110px; } .pod.p3 .pod-step { height: 78px; }
.pod.p4 .pod-step, .pod.p5 .pod-step { height: 50px; }
.pod.p1 { filter: drop-shadow(0 0 22px rgba(255, 61, 154, .35)); }

/* ถ้วยรางวัล */
.cups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.cup { position: relative; overflow: hidden; background: linear-gradient(160deg, #0a1f4d, #011A41); color: #fff; border-radius: 24px; padding: 1.2rem 1.2rem 1rem; box-shadow: 0 24px 44px -28px rgba(1, 26, 65, .9); border: 1px solid rgba(255, 255, 255, .08); }
.cup::before { content: ""; position: absolute; width: 180px; height: 180px; right: -50px; top: -60px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc, #355EFC) 70%, transparent), transparent); }
.cup-ico { font-size: 1.5rem; color: #ffd34d; filter: drop-shadow(0 0 10px rgba(255, 211, 77, .7)); }
.cup-t { font-size: .85rem; color: #c9d6ff; margin: .3rem 0 .2rem; font-weight: 600; }
.cup-w { font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .cup-w.muted { color: #8fa0c8; font-weight: 600; }
.cup-p { color: #ffb3d7; margin-bottom: .5rem; } .cup-p b { font-size: 1.6rem; color: #fff; }
.cup-s { display: inline-block; font-size: .72rem; border-radius: 999px; padding: .12rem .7rem; background: rgba(255, 255, 255, .12); color: #dbe5ff; }
.cup-s.fin { background: #1fc26b; color: #05341c; font-weight: 700; }
.cup .skp-dot, .pod .skp-dot, .lt .skp-dot { background: var(--tc, #355EFC); }

/* ผลล่าสุด */
.latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin-bottom: 1.8rem; }
.lt { background: #fff; border: 1px solid #e3e8f6; border-radius: 20px; padding: 1rem 1.1rem; transition: transform .25s, box-shadow .25s, border-color .25s; }
.lt:hover { transform: translateY(-4px); border-color: #ffb3d7; box-shadow: 0 22px 40px -26px rgba(255, 61, 154, .6); }
.lt header { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem; }
.lt header .code { font-size: .72rem; font-weight: 800; color: #fff; background: #355EFC; border-radius: 8px; padding: .1rem .5rem; }
.lt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.lt li { display: flex; align-items: center; gap: .45rem; font-weight: 600; } .lt li small { margin-left: auto; color: #11693a; font-weight: 800; } .lt li.muted { color: #8794ad; }
.lt li .m { width: 1.4rem; }

/* รายละเอียดที่มาของคะแนน */
.sum-row { cursor: pointer; } .sum-row:focus-visible { outline: 3px solid #ff3d9a; outline-offset: 2px; }
.sum-row[aria-expanded="true"] { box-shadow: 0 0 0 2px #ff3d9a, 0 12px 28px -16px rgba(255, 61, 154, .7); }
.sum-hint { font-size: .8rem; color: #6a7a96; margin: .6rem 0 0; }
.sum-detail { margin-top: .8rem; border-radius: 18px; background: #f6f8ff; border: 1px solid #dbe2f5; padding: .8rem 1rem; animation: sdIn .35s ease; }
@keyframes sdIn { from { opacity: 0; transform: translateY(-8px); } }
.sd-head { font-size: 1.05rem; margin-bottom: .4rem; }
.sd-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.sd-list li { display: grid; grid-template-columns: 52px 1fr 54px 44px; gap: .5rem; align-items: center; padding: .32rem 0; border-bottom: 1px dashed #dbe2f5; font-size: .9rem; }
.sd-list .code { font-size: .72rem; font-weight: 800; color: #355EFC; } .sd-list .rk { text-align: center; } .sd-list .p { text-align: right; color: #5a6b86; }
.sd-list li.pl .p { color: #11693a; } .sd-list li.no .p, .sd-list li.no .rk { color: #b3261e; }
.sd-foot { display: flex; justify-content: space-between; padding-top: .6rem; font-weight: 600; } .sd-foot b { color: #d6247f; font-size: 1.1rem; }

.ann-warn { border: 1px solid #f5c26b; background: #fff8e8; border-radius: 16px; padding: .9rem 1.1rem; margin: 1rem 0; color: #6b4a00; }
.ann-warn ul { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; }

/* ผลโหวต */
.vres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.8rem; }
.vr { background: linear-gradient(160deg, #fff, #f8faff); border: 1px solid #e3e8f6; border-radius: 24px; padding: 1.1rem 1.2rem; box-shadow: 0 24px 44px -34px rgba(1, 26, 65, .6); }
.vr header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.vst { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .12rem .7rem; } .vst.open { background: #e0f8ec; color: #11693a; } .vst.closed { background: #fde7e9; color: #b3261e; }
.vr-wait { padding: 1.4rem 0; text-align: center; color: #5a6b86; } .vr-wait a { margin-left: .5rem; font-weight: 700; color: #d6247f; }
.vr-win { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; }
.vr-ph { position: relative; flex: 0 0 96px; height: 96px; border-radius: 50%; background: #dfe4fd center / cover no-repeat; display: grid; place-items: center; color: #8fa0c8; font-size: 2rem; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff3d9a, 0 0 28px rgba(255, 61, 154, .6); }
.vr-ph .crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 1.7rem; animation: podFloat 3s ease-in-out infinite; }
.vr-win h3 { margin: 0; font-size: 1.4rem; font-weight: 800; } .vr-win small { color: #d6247f; font-weight: 700; }
.vr-n b { font-size: 1.6rem; color: #0a1f4d; }
.vr-list { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .4rem; }
.vr-list li { display: grid; grid-template-columns: 24px minmax(70px, 1.2fr) 2fr 36px; gap: .5rem; align-items: center; font-size: .88rem; }
.vr-list .no { font-weight: 800; color: #5a6b86; } .vr-list .v { text-align: right; font-weight: 700; }
.vr-list .bar { height: 8px; border-radius: 999px; background: #e8ecf8; overflow: hidden; } .vr-list .bar i { display: block; height: 100%; background: linear-gradient(90deg, #355EFC, #ff3d9a); border-radius: 999px; }

@media (max-width: 575px) {
    .ann-hero { padding-top: 7rem; }
    .podium { gap: .4rem; } .pod-name { font-size: .88rem; } .pod-pts b { font-size: 1.5rem; } .pod.p1 .pod-pts b { font-size: 2rem; }
    .pod-md { font-size: .7rem; } .pod.p1 .pod-step { height: 110px; } .pod.p2 .pod-step { height: 80px; } .pod.p3 .pod-step { height: 56px; }
    .sd-list li { grid-template-columns: 44px 1fr 46px 38px; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .pod-medal, .crown { animation: none; } }

/* หน้ารายการแข่งขันรายประเภท */
.lst-body { padding: 2.2rem 0 4rem; background: #f3f6ff; }
.lst-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.lst-head h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; margin: .5rem 0 .2rem; }
.lst-prog { position: relative; min-width: 190px; padding: .6rem 1rem .9rem; background: #fff; border: 1px solid #e3e8f6; border-radius: 16px; display: grid; }
.lst-prog b { font-size: 1.5rem; line-height: 1.1; color: #0a1f4d; } .lst-prog span { font-size: .8rem; color: #5a6b86; }
.lst-prog i { position: absolute; left: 12px; bottom: 8px; height: 5px; max-width: calc(100% - 24px); border-radius: 999px; background: linear-gradient(90deg, #355EFC, #ff3d9a); }
.lst-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1rem; }
.lst-tabs a { padding: .5rem 1.1rem; border-radius: 999px; background: #fff; color: #0a1f4d; border: 1px solid #dbe2f5; font-weight: 700; font-size: .92rem; text-decoration: none; transition: .2s; }
.lst-tabs a:hover { border-color: #ff3d9a; }
.lst-tabs a.on { background: linear-gradient(135deg, #ff3d9a, #E93C05); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(255, 61, 154, .45); }
.lst-rule { background: #fff; border: 1px dashed #c9d1e6; border-radius: 14px; padding: .6rem 1rem; font-size: .9rem; color: #33425f; margin-bottom: 1.2rem; }
.lst-rule a { margin-left: .6rem; font-weight: 700; color: #d6247f; }
.lst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; align-items: start; }
.ev { background: #fff; border: 1px solid #e3e8f6; border-radius: 22px; padding: 1rem 1.1rem 1.1rem; transition: transform .25s, box-shadow .25s, border-color .25s; }
.ev:hover { transform: translateY(-4px); border-color: #ffb3d7; box-shadow: 0 24px 44px -28px rgba(255, 61, 154, .6); }
.ev.done { border-top: 4px solid #1fc26b; }
.ev header { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.ev header .code { font-size: .74rem; font-weight: 800; color: #fff; background: #355EFC; border-radius: 8px; padding: .1rem .55rem; }
.ev header h3 { margin: 0; font-size: 1.05rem; font-weight: 800; flex: 1 1 100%; order: 2; }
.ev header .st { margin-left: auto; font-size: .74rem; font-weight: 700; color: #8a5a00; background: #fff3da; border-radius: 999px; padding: .12rem .7rem; }
.ev header .st.ok { color: #11693a; background: #e0f8ec; }
.ev header .skp-tag { order: 1; }
.res { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.res li { display: grid; grid-template-columns: 34px 1fr auto 40px; gap: .4rem; align-items: center; padding: .38rem .6rem; border-radius: 12px; background: #f6f8ff; font-weight: 600; }
.res li.rk1 { background: linear-gradient(90deg, #fff3c4, #fff9e3); } .res li.rk2 { background: #eef1f6; } .res li.rk3 { background: #fbeadf; }
.res .sc { font-size: .8rem; color: #5a6b86; } .res .pt { text-align: right; color: #11693a; }
.res .skp-dot { background: var(--tc, #6B7280); }
.reg { display: grid; gap: .3rem; }
.reg details { border-radius: 12px; background: #f6f8ff; padding: .35rem .7rem; }
.reg summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; list-style: none; }
.reg summary::-webkit-details-marker { display: none; }
.reg summary small { margin-left: auto; color: #5a6b86; font-weight: 600; }
.reg .skp-dot { background: var(--tc, #6B7280); }
.reg ul { list-style: none; margin: .4rem 0 .2rem; padding: 0; font-size: .88rem; max-height: 220px; overflow: auto; }
.reg li { display: flex; gap: .5rem; padding: .18rem 0; border-bottom: 1px dashed #dbe2f5; } .reg li .n { width: 1.5rem; color: #8794ad; } .reg li small { margin-left: auto; color: #5a6b86; }