/* ===== เซียมซี · ธีมแดง–ทอง ===== */
:root{
  --bg:#f7efe1; --paper:#fffaf0; --card:#fffdf7; --ink:#2b1610; --mute:#7d6553; --line:#e8d5b5;
  --red:#b5121b; --red-dk:#7e0b11; --gold:#d4a21c; --gold-lt:#f6e3a6; --gold-dk:#8a6410;
  --acc:var(--red); --acc2:#b27a12; --hot:#c4161f; --cold:#2f6688; --ok:#2e7d46; --warn:#b06a00;
  --head-ink:#fff6dc;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#150b08; --paper:#1d100b; --card:#21130d; --ink:#f6ead6; --mute:#b49c86; --line:#3d2619;
  --red:#d9333b; --red-dk:#5c0a0e; --gold:#e8bd48; --gold-lt:#4a3712; --gold-dk:#f0cd6a;
  --acc2:#e0a83a; --hot:#ec5a60; --cold:#69a7cf; --ok:#6cc58b; --warn:#e8a93c;
}}
:root[data-theme="dark"]{
  --bg:#150b08; --paper:#1d100b; --card:#21130d; --ink:#f6ead6; --mute:#b49c86; --line:#3d2619;
  --red:#d9333b; --red-dk:#5c0a0e; --gold:#e8bd48; --gold-lt:#4a3712; --gold-dk:#f0cd6a;
  --acc2:#e0a83a; --hot:#ec5a60; --cold:#69a7cf; --ok:#6cc58b; --warn:#e8a93c;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Sarabun",system-ui,sans-serif;
  background-image:radial-gradient(color-mix(in srgb,var(--gold) 14%,transparent) 1px,transparent 1.5px);background-size:22px 22px}
h1,h2,h3,.brand,.big,.ball,button,.btn{font-family:"Kanit","Sarabun",sans-serif}
h1{font-size:30px;line-height:1.25;margin:0 0 6px;font-weight:600}
h2{font-size:20px;margin:0 0 6px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card>h2::before{content:"";width:6px;height:22px;border-radius:2px;background:linear-gradient(var(--gold),var(--red))}
a{color:var(--red)}
.wrap{max-width:1080px;margin:0 auto;padding:24px 16px 64px}
.sub{color:var(--mute);margin:0 0 20px}
.muted{color:var(--mute);font-size:14px}
.center{text-align:center}

/* header */
.top{background:var(--red);background-image:linear-gradient(180deg,var(--red),var(--red-dk));border-bottom:4px solid var(--gold);color:var(--head-ink)}
.top .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:22px;color:var(--head-ink);text-decoration:none;letter-spacing:.5px}
.brand .logo{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold) 55%,#9c6f0c);
  color:#6b0a0f;display:grid;place-items:center;font-size:17px;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.brand small{display:block;font:400 12px/1 "Sarabun",sans-serif;color:var(--gold-lt);opacity:.9;letter-spacing:0}
.top nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:15px}
.top nav a{color:var(--head-ink);text-decoration:none}
.top nav a:hover{color:#ffe08a}
.top nav .hello{color:#ffe08a}

/* buttons */
.btn{display:inline-block;background:var(--red);color:#fff!important;border:0;border-radius:6px;padding:8px 18px;text-decoration:none;font-weight:500;cursor:pointer;box-shadow:0 2px 0 var(--red-dk)}
.btn:hover{filter:brightness(1.08)}
.btn.gold,.top nav a.btn{background:linear-gradient(180deg,#ffe28a,var(--gold));color:#5a0a0d!important;box-shadow:0 2px 0 #8a6410}
.big-btn{font-size:19px;padding:12px 26px}
button,select{font:inherit;font-size:15px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;padding:6px 14px;cursor:pointer}
button.on{background:var(--red);color:#fff;border-color:var(--red)}

/* hero */
.hero{margin:-24px -16px 24px;padding:40px 16px 44px;text-align:center;color:var(--head-ink);
  background:radial-gradient(ellipse at 50% 0%,#d42a33 0%,var(--red) 40%,var(--red-dk) 100%);border-bottom:4px solid var(--gold);position:relative;overflow:hidden}
.hero::before,.hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--gold) 45%,transparent);top:-120px}
.hero::before{left:-90px}.hero::after{right:-90px}
.hero h1{font-size:38px;color:#fff}
.hero h1 em{font-style:normal;color:#ffd965}
.hero .sub{color:#f8dcc0;max-width:620px;margin:0 auto 22px;font-size:17px}
.hero .chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:14px}
.hero .chips span{border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:99px;padding:3px 12px;color:#ffe9b0}
@media (max-width:600px){.hero h1{font-size:29px}}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px;margin-bottom:18px;box-shadow:0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent)}
.note{border:1px solid color-mix(in srgb,var(--gold) 60%,var(--line));background:color-mix(in srgb,var(--gold-lt) 45%,var(--card));border-left:5px solid var(--gold)}
.feature-card{border-top:4px solid var(--red)}
.section-title{font-family:"Kanit",sans-serif;font-size:24px;font-weight:600;margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.section-title::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}

/* ticket (latest result) */
.ticket{position:relative;background:var(--paper);border:2px solid var(--gold);border-radius:10px;padding:22px 22px 22px 34px;margin-bottom:18px;
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--gold-lt) 50%,transparent) 0 25%,transparent 25% 75%,color-mix(in srgb,var(--gold-lt) 50%,transparent) 75%);background-size:14px 14px;background-color:var(--paper)}
.ticket::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;border-left:3px dotted var(--gold)}
.ticket-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ticket-head h2{margin:0;color:var(--red)}
.ticket-head .date{font-family:"Kanit",sans-serif;font-size:17px;color:var(--gold-dk);background:var(--card);border:1px solid var(--gold);border-radius:99px;padding:2px 14px}
.ticket .prize1{text-align:center;padding:6px 0 16px;border-bottom:1px dashed var(--gold);margin-bottom:14px}
.ticket .prize1 .label{font-family:"Kanit",sans-serif;color:var(--mute);font-size:15px;margin-bottom:6px}
.balls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.ball{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:600;color:#fff;
  background:radial-gradient(circle at 35% 30%,#ff6b70,var(--red) 55%,#6e070c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.2)}
.ball.gold{background:radial-gradient(circle at 35% 30%,#fff2b8,var(--gold) 55%,#8a6410);color:#4d0a0d}
.ball.sm{width:40px;height:40px;font-size:21px}
@media (max-width:480px){.balls{gap:5px}.ball{width:38px;height:38px;font-size:21px}.ball.sm{width:32px;height:32px;font-size:17px}
  .ticket{padding:18px 14px 18px 26px}.ticket::before{left:9px}}
.ticket .subprizes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center}
.ticket .subprizes .label{font-family:"Kanit",sans-serif;font-size:14px;color:var(--mute);margin-bottom:4px}
.ticket .subprizes .nums{font-family:"Kanit",sans-serif;font-size:26px;font-weight:600;letter-spacing:2px;color:var(--ink)}

/* stats */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.stat b{display:block;font-family:"Kanit",sans-serif;font-size:25px;font-weight:600;color:var(--red);font-variant-numeric:tabular-nums}
.stat span{color:var(--mute);font-size:13px}
.stat .big{font-size:28px;font-weight:600;letter-spacing:2px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.heat{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.heat div{aspect-ratio:1.3;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;font-family:"Kanit",sans-serif;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;cursor:default;border:1px solid var(--line)}
.heat small{font-family:"Sarabun",sans-serif;font-weight:400;font-size:10px;opacity:.85;line-height:1}
@media (max-width:520px){.heat{gap:2px}.heat div{font-size:12px;border-radius:6px}}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mute);font-weight:500;font-size:13px;background:color-mix(in srgb,var(--gold-lt) 35%,transparent)}
td b{font-family:"Kanit",sans-serif;font-size:17px}
.two{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.two>.card{margin-bottom:0}.two{margin-bottom:18px}
.pill{display:inline-block;padding:3px 12px;border-radius:99px;font-family:"Kanit",sans-serif;font-weight:500;font-variant-numeric:tabular-nums;margin:3px;border:1px solid var(--gold);background:var(--paper)}
.pill.big{font-size:26px;padding:6px 18px;background:radial-gradient(circle at 35% 30%,#fff2b8,var(--gold) 60%,#a87a14);color:#4d0a0d;border:0}
.big{font-size:30px;font-weight:700;letter-spacing:2px}
.legend{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mute);margin-top:10px}
.legend i{display:inline-block;width:80px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cold),var(--card),var(--hot))}
.verdict{font-weight:600}
.scroll{overflow-x:auto}
.predict{border:2px solid var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-lt) 40%,var(--card)),var(--card) 140px)}
.predict h3{font-family:"Kanit",sans-serif;font-weight:500}

/* forms */
.narrow{max-width:460px}
.auth{border-top:5px solid var(--red)}
.form{display:grid;gap:12px;margin:12px 0}
.form label{display:grid;gap:4px;font-size:15px}
.form label.check{display:flex;gap:8px;align-items:flex-start;color:var(--mute);font-size:14px}
.form input[type=email],.form input[type=password],.form input:not([type]){font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.form input:focus{outline:2px solid var(--gold);outline-offset:1px}
.form .btn{font-size:17px;padding:10px}
.alert{background:color-mix(in srgb,var(--hot) 12%,var(--card));border:1px solid var(--hot);border-radius:6px;padding:8px 12px}
.features{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.features li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:6px}
.features li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,var(--gold) 60%,#8a6410)}
footer.foot{border-top:3px solid var(--gold);background:var(--red-dk);color:#f3d9b8;font-size:13px;text-align:center;padding:18px 16px}

/* ===== ระบบสมาชิก / ชำระเงิน / ผลรางวัล ===== */
.lock{display:inline-block;font:600 11px/1 "Kanit",sans-serif;background:linear-gradient(180deg,#ffe28a,var(--gold));color:#5a0a0d;border-radius:4px;padding:3px 6px;vertical-align:2px}
.vipbar{margin:0;padding:8px 14px;border:1px solid var(--gold);background:color-mix(in srgb,var(--gold-lt) 50%,var(--card));border-radius:6px;font-size:14px}
.okbox{background:color-mix(in srgb,var(--ok) 12%,var(--card));border:1px solid var(--ok);border-radius:6px;padding:10px 14px}
.winbox{border:2px solid var(--ok);background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.checkform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.checkform label{display:grid;gap:4px;font-size:14px}
.checkform input,.checkform select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);min-width:160px}
.checkform input[name=n]{font-family:"Kanit",sans-serif;font-size:20px;letter-spacing:3px;width:190px}
.yearbar{gap:6px}
.yr{display:inline-block;padding:4px 12px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink);background:var(--card);font-size:14px}
.yr.on{background:var(--red);border-color:var(--red);color:#fff}
table.results td b{color:var(--red)}
table.results b.two{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2b8,var(--gold) 60%,#8a6410);color:#4d0a0d}
.nums-list{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:"Kanit",sans-serif;font-size:18px;letter-spacing:1px;margin:6px 0}
.nums-list span{min-width:76px}
.nums-list .hit{background:var(--gold);color:#4d0a0d;border-radius:4px;padding:0 6px}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
.crumbs{margin:0 0 8px}
.buy-grid{display:grid;gap:18px;grid-template-columns:240px 1fr;align-items:start;margin:12px 0}
@media (max-width:560px){.buy-grid{grid-template-columns:1fr;justify-items:center;text-align:center}}
.qrbox{background:#fff;border:2px solid var(--gold);border-radius:10px;padding:10px;width:240px;text-align:center}
.qrbox #qr{display:flex;justify-content:center}
.qrbox .pp{font:600 14px "Kanit",sans-serif;color:#1d3f72;margin-top:6px}
.price{font:600 40px/1.1 "Kanit",sans-serif;color:var(--red);margin:0 0 8px}
.price small{font-size:16px;color:var(--mute);font-weight:400}
ul.plain{padding-left:18px;margin:8px 0}
.plan{display:flex;flex-direction:column}.plan .btn{margin-top:auto;align-self:flex-start}
.plan.vip{border:2px solid var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-lt) 45%,var(--card)),var(--card) 160px)}
.payrow{display:grid;grid-template-columns:110px 1fr auto;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.payrow img{width:110px;height:150px;object-fit:cover;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.payact{display:grid;gap:8px}.payact form{display:flex;gap:6px;flex-wrap:wrap}
.payact input{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
@media (max-width:640px){.payrow{grid-template-columns:90px 1fr}.payrow img{width:90px;height:120px}.payact{grid-column:1/-1}}
.legal h2{margin-top:18px}.legal table{font-size:14px}
footer.foot div{margin:3px 0}footer.foot a{color:#ffe08a}

/* ===== ผลตรวจหวย: ถูกรางวัล ===== */
.win-hero{position:relative;overflow:hidden;border-radius:14px;margin:6px 0 22px;text-align:center;color:#fff6dc;
  background:radial-gradient(ellipse at 50% 30%,#e0343d 0%,#b5121b 45%,#5c070b 100%);border:3px solid var(--gold);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 25%,transparent),0 18px 40px -18px rgba(90,6,10,.6)}
.win-hero #confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.win-rays{position:absolute;left:50%;top:42%;width:1400px;height:1400px;margin:-700px 0 0 -700px;z-index:0;opacity:.22;
  background:repeating-conic-gradient(from 0deg,#ffd965 0 6deg,transparent 6deg 18deg);animation:spin 40s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%)}
@keyframes spin{to{transform:rotate(360deg)}}
.win-inner{position:relative;z-index:2;padding:30px 18px 22px}
.win-kicker{margin:0;font:500 18px "Kanit",sans-serif;color:#ffe9b0;letter-spacing:.5px}
.win-title{display:block;margin:2px 0 14px;font:700 44px/1.15 "Kanit",sans-serif;color:#ffd965;text-shadow:0 3px 0 #6e070c,0 0 24px rgba(255,217,101,.45)}
.win-title::before{display:none}
.win-title small{font-size:20px;color:#ffe9b0;font-weight:500}
.win-balls{margin:4px 0 10px}
.win-balls .ball{width:60px;height:60px;font-size:32px;animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i)*90ms)}
.win-balls .ball.hit{box-shadow:0 0 0 3px #fff6dc,0 0 22px 6px rgba(255,217,101,.75)}
.ball.dim{background:radial-gradient(circle at 35% 30%,#d9cfc4,#a7998b 60%,#6f6359);color:#fff;opacity:.75}
@keyframes pop{0%{transform:scale(0) rotate(-40deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.win-amount{font:700 64px/1.1 "Kanit",sans-serif;color:#fff;margin:6px 0 10px;text-shadow:0 3px 0 #6e070c;font-variant-numeric:tabular-nums}
.win-amount small{font-size:26px;color:#ffe9b0;font-weight:500}
.jackpot .win-amount{font-size:76px;color:#ffd965}
.win-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.win-tags span{background:rgba(0,0,0,.22);border:1px solid rgba(255,217,101,.6);border-radius:99px;padding:4px 14px;font:500 15px "Kanit",sans-serif}
.win-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.win-actions .btn{font-size:17px;padding:10px 22px}
.btn.ghost{background:transparent;border:1px solid #ffe9b0;box-shadow:none;color:#ffe9b0!important}
.win-note{margin:0 auto;max-width:640px;font-size:13px;color:#f3d4b5;opacity:.9}
@media (max-width:520px){.win-title{font-size:32px}.win-amount{font-size:46px}.jackpot .win-amount{font-size:52px}
  .win-balls .ball{width:44px;height:44px;font-size:24px}.win-balls{gap:5px}}
@media (prefers-reduced-motion:reduce){.win-rays,.win-balls .ball{animation:none}}
/* ไม่ถูกรางวัล */
.lose-box{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:16px 20px;margin:6px 0 18px}
.lose-box h2{margin:0 0 4px;font-size:19px}.lose-box h2::before{display:none}.lose-box .balls{gap:5px}
.verify-box{max-width:620px;margin:4px auto 12px;padding:12px 16px 12px 46px;position:relative;text-align:left;border-radius:10px;
  background:#fff8e1;color:#4a2a05;border:2px solid #ffd965;font-size:14px;line-height:1.6}
.verify-box::before{content:"!";position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#b06a00;color:#fff;
  display:grid;place-items:center;font:700 15px "Kanit",sans-serif}
.verify-box b{display:block;font:600 16px "Kanit",sans-serif;color:#8a1209;margin-bottom:2px}
.verify-box a{color:#8a1209;font-weight:600}
.qrhead{background:#0e3a6e;color:#fff;font:600 13px "Kanit",sans-serif;letter-spacing:1px;border-radius:6px 6px 0 0;margin:-10px -10px 10px;padding:6px}
.qrbox .pp{font-size:18px;color:#1b1b1b}
.qramt{font:500 14px "Kanit",sans-serif;color:#555;border-top:1px dashed #ddd;margin-top:6px;padding-top:6px}
.qramt b{font-size:24px;color:#b5121b}
.buy-grid.has-poster{grid-template-columns:280px 1fr}
.qrposter{display:block;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px -10px rgba(0,0,0,.35)}
.qrposter img{display:block;width:100%;height:auto}
@media (max-width:560px){.buy-grid.has-poster{grid-template-columns:1fr}.qrposter{max-width:300px;margin:0 auto}}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px 14px;margin:14px 0 4px;
  background:#fff;color:#1f1f1f!important;border:1px solid #747775;border-radius:6px;text-decoration:none;font:500 16px "Sarabun",sans-serif}
.gbtn:hover{background:#f6f8fc}
.or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px;margin:10px 0 2px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

/* ===== เซียมซีประจำวัน ===== */
.ss-stage{text-align:center;padding:26px 16px 10px}
.ss-cup{position:relative;width:150px;height:210px;margin:0 auto 18px;transform-origin:50% 90%}
.ss-body{position:absolute;bottom:0;left:15px;width:120px;height:150px;border-radius:10px 10px 18px 18px;
  background:linear-gradient(90deg,#7e0b11,#c4161f 40%,#e0343d 55%,#7e0b11);border:3px solid var(--gold);display:grid;place-items:center;box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.ss-body span{writing-mode:vertical-rl;font:600 26px "Kanit",sans-serif;color:#ffd965;letter-spacing:4px}
.ss-sticks{position:absolute;left:30px;right:30px;top:6px;height:80px}
.ss-sticks i{position:absolute;bottom:0;left:calc(var(--k)*10px);width:7px;height:calc(62px + var(--k)*3px);border-radius:3px 3px 0 0;
  background:linear-gradient(#d8b35a,#a77a1c);transform:rotate(calc((var(--k) - 4)*3deg));transform-origin:bottom}
.ss-cup.shaking{animation:ssShake .18s ease-in-out infinite alternate}
@keyframes ssShake{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(10deg) translateY(-6px)}}
.ss-cup.drop .ss-sticks i:nth-child(5){animation:ssDrop .6s ease-in forwards}
@keyframes ssDrop{to{transform:translateY(-70px) rotate(25deg);opacity:0}}
.ss-result{text-align:center}
.ss-paper{max-width:520px;margin:10px auto 0;padding:24px 22px;background:#fff6e0;color:#3a1d0f;border:2px solid var(--gold);border-radius:6px;
  box-shadow:0 14px 30px -14px rgba(90,6,10,.45);background-image:repeating-linear-gradient(0deg,transparent 0 30px,rgba(212,162,28,.12) 30px 31px)}
.ss-result.reveal .ss-paper{animation:ssUnroll .7s cubic-bezier(.2,1.2,.4,1) both}
@keyframes ssUnroll{from{transform:scaleY(.05);opacity:0}to{transform:none;opacity:1}}
.ss-no{font:500 16px "Kanit",sans-serif;color:#8a1209}.ss-no b{font-size:30px}
.ss-lvl{display:inline-block;margin:6px 0 4px;padding:2px 14px;border-radius:99px;font:600 15px "Kanit",sans-serif;color:#fff;background:#8a6410}
.ss-lvl.lvl-ดีมาก{background:#b5121b}.ss-lvl.lvl-ดี{background:#c07a10}.ss-lvl.lvl-ระวัง{background:#5a5a5a}
.ss-title{display:block;font:600 22px "Kanit",sans-serif;color:#7e0b11;margin:6px 0}.ss-title::before{display:none}
.ss-text{font-size:16px;margin:0 0 14px}
.ss-lucky{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;border-top:1px dashed #d4a21c;padding-top:12px}
.ss-lucky .balls{margin-top:4px}
@media (prefers-reduced-motion:reduce){.ss-cup.shaking,.ss-result.reveal .ss-paper{animation:none}}

/* ===== ทายเลข / สรุปงวด ===== */
.pick-card{border-top:4px solid var(--gold)}
.pickform{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.pickform label{display:grid;gap:4px;font-size:14px}
.pickform input{font:600 26px "Kanit",sans-serif;letter-spacing:6px;width:130px;text-align:center;padding:6px;border:2px solid var(--gold);border-radius:8px;background:var(--paper);color:var(--ink)}
tr.me td{background:color-mix(in srgb,var(--gold-lt) 60%,transparent);font-weight:600}
.hitpts{color:var(--ok)}
.sumgrid{margin-bottom:18px}
a.card.promo{display:block;text-decoration:none;color:var(--ink);border-top:4px solid var(--gold);transition:transform .15s}
a.card.promo:hover{transform:translateY(-2px)}
a.card.promo p{margin:6px 0 12px}
.promo2{margin-bottom:12px}

/* ===== เครื่องสุ่มเลข ===== */
.roller{border:2px solid var(--gold);background:linear-gradient(180deg,color-mix(in srgb,var(--gold-lt) 40%,var(--card)),var(--card) 150px)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.seg button{border-radius:99px;padding:7px 16px}
.seg.small button{font-size:13px;padding:5px 12px}
.roll-stage{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;padding:14px 0 6px}
.roll-balls .ball{width:66px;height:66px;font-size:34px}
.roll-balls .ball.spin{filter:blur(.6px);transform:translateY(-3px)}
.roll-balls .ball.land{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.roll-info{text-align:center}.roll-info p{margin:6px 0}
@media (max-width:480px){.roll-balls .ball{width:50px;height:50px;font-size:26px}}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#ffd965;color:#7e0b11;font:700 12px "Kanit",sans-serif;vertical-align:2px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(255,217,101,.35)}}
@media (prefers-reduced-motion:reduce){.badge{animation:none}}
/* ทบทวนรางวัลที่ 1 */
.f1review{border-top:2px dashed var(--gold);margin-top:18px;padding-top:4px}
.digits{white-space:nowrap}
.digit{display:inline-grid;place-items:center;width:30px;height:38px;margin:0 1px;border:1px solid var(--line);border-radius:6px;font:600 18px/1 "Kanit",sans-serif;background:var(--paper)}
.digit small{font:400 10px/1 "Sarabun",sans-serif;color:var(--mute)}
.digit.hit{background:var(--gold);border-color:var(--gold-dk);color:#4d0a0d}.digit.hit small{color:#4d0a0d}