/* Draft ticket UI kit (players/draft-wallet.js), loaded on every page: the reward popup in the format TeeO approved
   on 16 Oct 2026 (gold frame, moving pack fan, gold ticket, "ได้รับตั๋วดราฟต์แล้ว!"), the shared dialog shell, the
   header "ฉัน" picture and the notice toast. Classes carry the m5- prefix (added by the scripts) and live under .me5,
   so page styles never leak in. The Me page adds its own layout in /me/me.css. */
.me5 section,.me5 header,.me5 nav,.me5 h2,.me5 h3,.me5 p{margin:0}
/* pages with global button rules (My Team) must not pad or size the kit's buttons */
:where(.me5) button{min-height:0;padding:0;font-family:inherit;transition:none}
:where(.me5) a{-webkit-tap-highlight-color:transparent}
dialog.m5-layer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:inherit}
dialog.m5-layer::backdrop{background:transparent;backdrop-filter:none}
.me5{--bg:#051922;--bg2:#0b3340;--ln:#1f5566;--ln4:#1f556666;--t1:#fff;--t2:#b9d3d9;--t3:#8fb0b8;--ac:#7fe9ff;--act:#08dcff;--gold:#f1c84d;--ok:#24e3a0}
/* base icon at low specificity so every '.box .m5-i' size rule wins regardless of file order */
:where(.me5) .m5-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.m5-ms-ic.m5-star{background:linear-gradient(140deg,#f6c445,#c88a10)}
.m5-ms-ic.m5-like{background:linear-gradient(140deg,#3fa2ff,#2557d6)}
.m5-ms-ic.m5-write{background:linear-gradient(140deg,#24e3a0,#0e9a6c)}
.m5-fan{position:absolute;inset:0}
.m5-fp.m5-f0{transform:translateX(-50%) rotate(-32deg)}
.m5-fp.m5-f1{transform:translateX(-50%) rotate(-16deg)}
.m5-fp.m5-f2{transform:translateX(-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.m5-fp.m5-f3{transform:translateX(-50%) rotate(16deg)}
.m5-fp.m5-f4{transform:translateX(-50%) rotate(32deg)}
.m5-tk{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(-4deg);display:grid;grid-template-columns:1fr auto;width:232px;height:82px;border-radius:12px;background:linear-gradient(120deg,#6eeaff,#08dcff 45%,#05b8d6);color:#03161c;box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 26px rgba(8,220,255,.45);-webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.m5-tk-l{display:grid;align-content:center;justify-items:start;padding-left:22px}
.m5-tk-l small{font:700 10.5px 'Chakra Petch',Chakra,sans-serif;letter-spacing:.08em;opacity:.75}
.m5-tk-l small:last-child{font:600 11px 'Anuphan',sans-serif;letter-spacing:0}
.m5-tk-l b{font:800 25px/1 'Chakra Petch',Chakra,sans-serif;letter-spacing:.06em}
.m5-tk-r{display:grid;align-content:center;justify-items:center;padding:0 20px 0 16px;border-left:2px dashed rgba(3,22,28,.35)}
.m5-tk-r b{font:800 30px/1 'Chakra Petch',Chakra,sans-serif}
.m5-tk-r small{font:700 11px 'Anuphan',sans-serif}
.m5-mb h3{margin:0;font:700 19px 'Anuphan',sans-serif;color:#fff}
.m5-bonusln .m5-i{width:15px;height:15px;vertical-align:-3px}
.m5-mb .m5-mx .m5-i{width:20px;height:20px}
.m5-ms-ic{display:grid;place-items:center;color:#fff;width:34px!important;height:34px!important;border-radius:10px!important}
.m5-ms-ic .m5-i{width:18px!important;height:18px!important}
.m5-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(1,8,11,.75);backdrop-filter:blur(3px)}
.m5-mx .m5-i{width:16px!important;height:16px!important}
.m5-gpm{max-width:340px!important}
.m5-gp{display:grid;justify-items:center;gap:6px;text-align:center}
.m5-gp-art{position:relative;width:100%;height:132px}
.m5-gp-art .m5-fp{width:58px!important;top:0!important}
.m5-gp-art .m5-tk{width:190px!important;height:64px!important}
.m5-gp-art .m5-tk-l{padding-left:18px}
.m5-gp-art .m5-tk-l b{font-size:20px}
.m5-gp-art .m5-tk-r b{font-size:24px}
.m5-gp h3{margin:2px 0 0;font:700 17px 'Anuphan',sans-serif;color:#fff}
.m5-gp-why{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--t2)}
.m5-ms-ic.m5-sm{width:22px!important;height:22px!important;border-radius:7px!important}
.m5-ms-ic.m5-sm .m5-i{width:13px!important;height:13px!important}
.m5-ms-ic.m5-tk{background:linear-gradient(140deg,#08dcff,#0590a8)}
.m5-gp-bal{display:flex;align-items:baseline;gap:8px;margin:2px 0 4px;font:700 15px 'Chakra Petch',Chakra,sans-serif;color:var(--t3)}
.m5-gp-bal b{font-size:26px;color:var(--ac)}
.m5-gp-bal small{font:600 12px 'Anuphan',sans-serif;color:var(--t3)}
.m5-gp-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.m5-go,.m5-go2{display:flex!important;align-items:center;justify-content:center;gap:6px;height:40px!important;border-radius:20px!important;font:700 13.5px 'Anuphan',sans-serif!important;text-decoration:none;cursor:pointer}
.m5-go{border:0;background:var(--act)!important;color:#03161c!important}
.m5-go2{border:1px solid var(--ln)!important;background:none!important;color:var(--ac)!important}
.m5-go .m5-i,.m5-go2 .m5-i{width:16px;height:16px}
.m5-bonusln{padding:6px 10px;border-radius:10px;background:#a35bff26;color:#e6ccff;font-size:13px;font-weight:600;margin:0}
@keyframes cmSpin{to{transform:rotate(360deg)}}
.m5-ms-ic.m5-cal{background:linear-gradient(140deg,#ff7a93,#d43d62)}
.m5-mx::before{content:'';position:absolute;inset:-5px}
.m5-gp-bal .m5-i{width:14px;height:14px;align-self:center;color:var(--t3)}
.m5-gp-art .m5-tk-l small:last-child{font-size:12px}
.m5-mb{position:relative;display:grid;width:100%;max-width:400px;border-radius:20px;background:linear-gradient(180deg,#0b2a35,#051922);text-align:center;padding:16px 16px 14px!important;gap:6px!important;border:1px solid #f1c84d99!important;box-shadow:0 0 0 1px #f1c84d22,0 18px 50px rgba(0,0,0,.6),0 0 34px rgba(241,200,77,.14)}
.m5-mx{position:absolute;font-size:18px;display:grid;place-items:center;width:34px!important;height:34px!important;right:8px!important;top:8px!important;border-radius:50%!important;background:#03111799!important;border:1px solid var(--ln)!important;color:var(--t2)!important;z-index:5;border-color:#f1c84d55!important}
.m5-rwd .m5-fp{animation:fpSway 3.4s ease-in-out infinite}
.m5-rwd .m5-fp.m5-f0{--r:-32deg;animation-delay:-.2s}
.m5-rwd .m5-fp.m5-f1{--r:-16deg;animation-delay:-.9s}
.m5-rwd .m5-fp.m5-f2{--r:0deg;animation-delay:-1.6s}
.m5-rwd .m5-fp.m5-f3{--r:16deg;animation-delay:-2.3s}
.m5-rwd .m5-fp.m5-f4{--r:32deg;animation-delay:-3s}
@keyframes fpSway{0%,100%{transform:translateX(-50%) rotate(var(--r)) translateY(0)}50%{transform:translateX(-50%) rotate(calc(var(--r) + 3deg)) translateY(-6px)}}
.m5-mb .m5-tk{overflow:hidden;background:linear-gradient(115deg,#fff4c6 0,#f6d977 22%,#f1c84d 48%,#d9a72c 72%,#f6d977 100%)!important;color:#2a1d02!important;box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 28px rgba(241,200,77,.5)!important}
.m5-mb .m5-tk-r{border-left-color:rgba(42,29,2,.35)!important}
.m5-mb .m5-tk-l small{opacity:.7}
.m5-rwd .m5-tk{animation:tkFloat 3.4s ease-in-out infinite}
@keyframes tkFloat{0%,100%{transform:translateX(-50%) rotate(-4deg) translateY(0)}50%{transform:translateX(-50%) rotate(-3deg) translateY(-4px)}}
.m5-rwd h3{margin:0;font:800 19px 'Anuphan',sans-serif;color:#fff}
.m5-rwd .m5-gp-why{margin:0}
.m5-rwd .m5-gp-bal{display:block;margin:2px 0 6px;font:500 13.5px 'Anuphan',sans-serif;color:var(--t2)}
.m5-rwd .m5-gp-bal span{font:700 16px 'Chakra Petch',Chakra,sans-serif;color:var(--t3)}
.m5-rwd .m5-gp-bal b{font:800 24px 'Chakra Petch',Chakra,sans-serif;color:var(--gold)}
.m5-go .m5-i{width:17px!important;height:17px!important;fill:none;stroke:currentColor;stroke-width:2}
.m5-ms-ic.m5-gift{background:linear-gradient(140deg,#f6d977,#d9a72c)}
.m5-ms-ic.m5-gift .m5-i{color:#2a1d02}
.m5-wl-g{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font:700 12.5px 'Anuphan',sans-serif;color:#ffe08a}
.m5-wl-g .m5-i{width:15px;height:15px;color:var(--gold)}
.m5-shn{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;border-radius:inherit}
.m5-shn::after{content:'';position:absolute;top:-10%;bottom:-10%;left:0;width:55%;background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.6) 50%,transparent 100%);transform:translateX(-130%) skewX(-14deg);animation:shnLR 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes shnLR{0%,55%{transform:translateX(-130%) skewX(-14deg)}100%{transform:translateX(300%) skewX(-14deg)}}
.m5-fp{position:absolute;left:50%;top:4px;width:84px;border-radius:4px;transform-origin:50% 120%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)) brightness(.8);display:block;overflow:hidden}
.m5-fp img{display:block;width:100%}
.m5-mb .m5-tk::after{content:'';position:absolute;pointer-events:none;top:-10%;bottom:-10%;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 50%,transparent);transform:translateX(-130%) skewX(-14deg);animation:shnLR 3.4s ease-in-out infinite}
.m5-rwd .m5-gp{isolation:isolate}
.m5-rwd .m5-gp-art{height:136px;margin-bottom:14px;margin-top:8px}
.m5-gp-glow{position:absolute;left:50%;top:56px;z-index:-1;width:300px;height:220px;margin:-110px 0 0 -150px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,224,138,.42),rgba(241,200,77,.16) 55%,transparent);filter:blur(6px);animation:gpPulse 3.4s ease-in-out infinite}
.m5-gp-rays{position:absolute;left:50%;top:60px;z-index:-1;width:420px;height:420px;margin:-210px 0 0 -210px;background:repeating-conic-gradient(rgba(241,200,77,.14) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 58%);mask:radial-gradient(circle,#000 0 18%,transparent 58%);animation:cmSpin 30s linear infinite}
@keyframes gpPulse{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.m5-rwd{padding-top:26px!important;box-shadow:0 0 0 1px #f1c84d22,0 18px 50px rgba(0,0,0,.6),0 0 60px rgba(241,200,77,.22)!important;overflow:hidden}
@media (prefers-reduced-motion:reduce){.m5-rwd .m5-fp,.m5-rwd .m5-tk,.m5-mb .m5-tk::after,.m5-gp-glow,.m5-gp-rays{animation:none!important}.m5-shn::after{animation:none!important;opacity:0}}

.m5-mb{box-sizing:border-box}
.m5-mx:focus-visible,.m5-go:focus-visible,.m5-go2:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.m5-flash{animation:msFlash 1.6s ease-out}
@keyframes msFlash{0%{box-shadow:0 0 0 2px #08dcff,0 0 24px rgba(8,220,255,.5)}100%{box-shadow:0 0 0 0 transparent}}
/* header nav: the signed-in "ฉัน" item shows the profile picture, 20px with a gold ring, the same size on every page;
   the -2px margins keep its label on the same line as the 16px icons next to it */
.product-nav .fdw-navav{display:block!important;flex:none;width:20px!important;height:20px!important;min-width:20px;margin:-2px auto!important;padding:0!important;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1.5px #f1c84d;background:#0b3340;filter:none!important}
.product-nav .fdw-navav img{display:block;width:20px!important;height:20px!important;object-fit:cover;border-radius:50%}
.product-nav .fdw-navini{display:grid!important;place-items:center;color:#7fe9ff;font:700 11px/1 'Chakra Petch',Chakra,sans-serif}
/* notices (not enough tickets, cards added to the Showcase) */
#fdwToast{position:fixed;left:50%;top:12px;z-index:90;transform:translate(-50%,-140%);width:max-content;max-width:calc(100% - 24px);text-align:center;box-sizing:border-box;padding:10px 14px;border:1px solid #f1c84d88;border-radius:14px;background:#1a1405f2;color:#ffe08a;font:600 13px/1.45 'Anuphan',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.6);transition:transform .25s ease;pointer-events:none}
#fdwToast.on{transform:translate(-50%,0);pointer-events:auto}
#fdwToast a{color:#7fe9ff;margin-left:6px;font-weight:700;text-decoration:none;white-space:nowrap}

/* Card popup (moved here from me/me.css so the Draft Simulator can show it too: first OVR 122) */
.m5-cm{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}
.m5-cm-stage{position:relative;display:grid;place-items:center;width:100%;height:230px;margin:-4px 0 2px;isolation:isolate}
.m5-cm-rays{position:absolute;left:50%;top:50%;z-index:-2;width:420px;height:420px;margin:-210px 0 0 -210px;background:repeating-conic-gradient(rgba(8,220,255,.16) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 25%,transparent 62%);mask:radial-gradient(circle,#000 0 25%,transparent 62%);animation:cmSpin 24s linear infinite}
.m5-cm-glow{position:absolute;left:50%;top:50%;z-index:-1;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:radial-gradient(circle,rgba(8,220,255,.35),transparent 65%)}
.m5-cm.m5-gold .m5-cm-rays{background:repeating-conic-gradient(rgba(241,200,77,.22) 0 6deg,transparent 6deg 18deg)}
.m5-cm.m5-gold .m5-cm-glow{background:radial-gradient(circle,rgba(241,200,77,.45),transparent 65%)}
.m5-cm-card{width:176px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));animation:cmFloat 3.2s ease-in-out infinite}
@keyframes cmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.m5-cm.m5-gold .m5-cm-kick{color:var(--gold)}
.m5-cm h3{margin:0;font:800 22px/1.2 'Anuphan',sans-serif;color:#fff}
.m5-cm-meta{margin:0 0 6px;font-size:12.5px;color:var(--t2)}
.m5-cm-meta b{color:var(--ac);font-family:'Chakra Petch'}
.m5-cm.m5-gold .m5-cm-meta b{color:var(--gold)}
.m5-cm.m5-gold h3{background:linear-gradient(180deg,#fff3c4,#f1c84d);-webkit-background-clip:text;background-clip:text;color:transparent}
.m5-cm-act{display:grid;gap:8px;width:100%}
.m5-cm.m5-gold .m5-go{background:linear-gradient(90deg,#f6d977,#f1c84d)!important;color:#2a1d02!important}
.m5-cm.m5-isav .m5-go{background:none!important;border:1px solid #24e3a088!important;color:#24e3a0!important}
.m5-cm-kick{margin:0;color:var(--ac);font:700 12px 'Anuphan',sans-serif;letter-spacing:.02em;text-transform:none}
.m5-cm-cur{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px solid #24e3a055;border-radius:20px;background:#24e3a014;color:var(--ok);font:700 13.5px 'Anuphan',sans-serif}
.m5-cm-cur .m5-i{width:16px;height:16px;stroke-width:2.4}
.m5-cm-no{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px dashed var(--ln);border-radius:20px;color:var(--t3);font:600 12.5px 'Anuphan',sans-serif}
.m5-cm-no .m5-i{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.m5-cm-rays,.m5-cm-card,.m5-cm-shine{animation:none}}
.m5-cm-shine{position:absolute;left:50%;top:50%;margin:-88px 0 0 -88px;pointer-events:none;width:176px!important;height:176px!important;border-radius:0!important;background:linear-gradient(105deg,transparent 38%,rgba(241,200,77,.35) 46%,rgba(255,240,190,.6) 50%,rgba(241,200,77,.35) 54%,transparent 62%) 200% 0/250% 100% no-repeat!important;mix-blend-mode:screen;animation:cmGold 7s ease-in-out infinite!important}
@keyframes cmGold{0%,30%{background-position:200% 0}90%,100%{background-position:-200% 0}}
.m5-cmm{max-width:340px!important;overflow:hidden;isolation:isolate}
.m5-cmm .m5-cm{position:static}
.m5-cm-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(255,224,138,.28),transparent 70%),linear-gradient(180deg,rgba(241,200,77,.30),rgba(120,84,10,.25) 50%,rgba(4,20,27,.55))}
.m5-cmm .m5-cm-rays{opacity:.7}
.m5-cm-bg{position:absolute;left:0;right:0;top:0;height:64%;z-index:-1;pointer-events:none;background:center 30%/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);filter:sepia(.55) saturate(1.35) brightness(.62) contrast(1.05) blur(3px)!important;transform:scale(1.08);transform-origin:50% 0}
.m5-f122-why{margin:2px 0 8px;color:#ffe08a;font:600 13.5px/1.5 'Anuphan',sans-serif;text-align:center}
.m5-f122-off{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;color:var(--t3);font:500 12.5px 'Anuphan',sans-serif;cursor:pointer;min-height:32px}
.m5-f122-off input{width:18px;height:18px;margin:0;accent-color:#f1c84d;cursor:pointer}
.m5-tip-fan{height:210px!important}
.m5-tip-fan .m5-tf{position:absolute;left:50%;top:50%;width:120px;margin:-82px 0 0 -60px;filter:drop-shadow(0 12px 16px rgba(0,0,0,.6));transform-origin:50% 100%}
.m5-tip-fan .m5-tf0{transform:translateX(-62px) rotate(-14deg) scale(.86);z-index:1}
.m5-tip-fan .m5-tf2{transform:translateX(62px) rotate(14deg) scale(.86);z-index:1}
.m5-tip-fan .m5-tf1{z-index:2;animation:cmFloat 3.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.m5-tip-fan .m5-tf1{animation:none}}
/* symmetric fan for 1 / 2 / 3 top cards */
.m5-tip-fan.m5-n1 .m5-tf0{transform:none;z-index:2}
.m5-tip-fan.m5-n2 .m5-tf0{transform:translateX(-46px) rotate(-9deg) scale(.92)}
.m5-tip-fan.m5-n2 .m5-tf1{transform:translateX(46px) rotate(9deg) scale(.92);animation:none}
.m5-tipc h3{font-size:20px!important;line-height:1.35!important}
/* Share a 122 / invite friends (TeeO 2026-10-18): two equal buttons, a quiet "later" link, one sheet for sharing */
.m5-cm-act.m5-two{grid-template-columns:1fr 1fr}
.m5-cm-act.m5-two .m5-cm-cur{font-size:13px}
.m5-f122-inv{margin:8px 0 0;color:var(--t2);font:500 12.5px/1.5 'Anuphan',sans-serif;text-align:center}
.m5-later{margin:6px auto 0;min-height:32px;padding:0 14px;border:0;background:none;color:var(--t3);font:600 13px 'Anuphan',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.m5-cm.m5-inv .m5-tk{margin:6px 0 2px}
.m5-shs{display:grid;gap:10px;text-align:center}
.m5-shs-img{display:grid;place-items:center;aspect-ratio:4/5;width:min(100%,300px);margin:0 auto;border-radius:14px;overflow:hidden;background:#061016;border:1px solid var(--ln)}
.m5-shs-img img{width:100%;height:100%;object-fit:cover;display:block}
.m5-shs-wait{color:var(--t3);font:600 13px 'Anuphan',sans-serif}
.m5-shs-deal{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border:1px solid #f1c84d55;border-radius:12px;background:#f1c84d12;color:#ffe08a;font:600 12.5px/1.5 'Anuphan',sans-serif;text-align:left}
.m5-shs-deal .m5-i{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;margin-top:1px}
.m5-shs-act{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m5-shs-act .m5-go{background:linear-gradient(90deg,#f6d977,#f1c84d)!important;color:#2a1d02!important}
.m5-shs-act .m5-i{fill:none;stroke:currentColor;stroke-width:2}
.m5-shs-act [disabled]{opacity:.5;cursor:default}
.m5-shs-tip,.m5-shs-sum{margin:0;color:var(--t3);font:500 12px/1.5 'Anuphan',sans-serif}
.m5-inv-gift{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;padding:6px 16px;border-radius:999px;background:linear-gradient(90deg,#f6d977,#f1c84d);color:#2a1d02}
.m5-inv-gift .m5-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.m5-inv-gift b{font:800 22px 'Chakra Petch',Chakra,sans-serif}
.m5-inv-gift span{font:700 14px 'Anuphan',sans-serif}
.m5-f122-foot{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px;flex-wrap:wrap}
.m5-f122-foot .m5-later,.m5-f122-foot .m5-f122-off{margin:0}
/* Claim step (TeeO 2026-10-18, design A): one gold button, the ticket flies into the header "ฉัน" icon, the balance rolls */
.m5-rwd.m5-wait .m5-tk{animation:tkWig 1.6s ease-in-out infinite}
@keyframes tkWig{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(-1deg) translateY(-5px)}}
.m5-gp-bal2{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:2px 0 8px;font:500 14px 'Anuphan',sans-serif;color:var(--t2)}
.m5-gp-bal2 b{display:inline-block;min-width:2ch;font:800 30px/1 'Chakra Petch',Chakra,sans-serif;color:#f6d977;font-variant-numeric:tabular-nums}
.m5-gp-bal2 b.m5-bump{animation:wlBump .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes wlBump{50%{transform:scale(1.35)}}
.m5-claim{grid-column:1/-1;height:50px;border:0;border-radius:25px;background:linear-gradient(90deg,#f6d977,#f1c84d);color:#2a1d02;font:800 16px 'Anuphan',sans-serif;cursor:pointer;animation:wlPing 1.6s ease-out infinite}
.m5-claim:disabled{animation:none;opacity:.85}
.m5-claim:focus-visible,.m5-dismiss:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@keyframes wlPing{0%{box-shadow:0 0 0 0 rgba(246,217,119,.6)}70%,100%{box-shadow:0 0 0 12px rgba(246,217,119,0)}}
.m5-dismiss{margin:6px auto 0;min-height:34px;padding:0 10px;border:0;background:none;color:var(--t3);font:500 13px 'Anuphan',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.m5-gp-act .m5-go2 .m5-i,.m5-gp-act .m5-go .m5-i{fill:none;stroke:currentColor;stroke-width:1.8}
.fdw-fly{position:fixed!important;z-index:1000;pointer-events:none;background:linear-gradient(115deg,#fff4c6 0,#f6d977 22%,#f1c84d 48%,#d9a72c 72%,#f6d977 100%)!important;color:#2a1d02!important}
.fdw-fly .m5-tk-l{padding-left:18px}.fdw-fly .m5-tk-l b{font-size:20px}.fdw-fly .m5-tk-r b{font-size:24px}.fdw-fly .m5-tk-r{border-left-color:rgba(42,29,2,.35)}
.fdw-spark{position:fixed;z-index:999;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:radial-gradient(circle,#fff6cf,#f6d977 50%,transparent 70%);pointer-events:none;animation:fdwSpk .6s ease-out forwards}
@keyframes fdwSpk{to{opacity:0;transform:scale(.2)}}
.fdw-ring{position:fixed;z-index:1001;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px #f6d977,0 0 22px 6px rgba(246,217,119,.8);animation:fdwRing .7s ease-out forwards}
@keyframes fdwRing{0%{transform:scale(.6);opacity:1}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1.5);opacity:0}}
.fdw-plus{position:fixed;z-index:1002;transform:translateX(-50%);font:800 16px 'Chakra Petch',Chakra,sans-serif;color:#f6d977;text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none;animation:fdwPlus 1.1s ease-out forwards}
@keyframes fdwPlus{0%{opacity:0;transform:translate(-50%,6px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-28px)}}
.fdw-hit{animation:fdwHit .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes fdwHit{40%{transform:scale(1.4)}}
@media (prefers-reduced-motion:reduce){.m5-rwd.m5-wait .m5-tk,.m5-claim,.fdw-hit{animation:none!important}}
/* after the claim the ticket has gone into the "ฉัน" icon, so the popup keeps only the packs */
.m5-rwd.m5-got .m5-tk{visibility:hidden}
.m5-rwd.m5-got .m5-gp-art{height:96px}