:root{--bg:#0b0813;--fg:#f4efe6;--ac:#f5b83d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,"Noto Sans Thai",sans-serif}
#w{position:relative;max-width:900px;margin:0 auto}
canvas{width:100%;height:auto;display:block;background:#000;touch-action:none}
#sk{position:absolute;right:10px;bottom:76px;display:none;z-index:3;background:#241a3d;color:#fff;border:1px solid #6b5aa0;border-radius:8px;padding:8px 14px}
#ti{position:absolute;left:0;bottom:0;width:2px;height:2px;opacity:0;border:0;padding:0}
.hb{position:absolute;bottom:8px;z-index:3;background:rgba(20,15,40,.7);color:#fff;border:1px solid #6b5aa0;border-radius:8px;padding:4px 10px}#mt{right:8px}#pb{right:58px}
#op{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap;justify-content:center}#op button,#op select{background:#241a3d;color:#fff;border:1px solid #6b5aa0;border-radius:8px;padding:6px 12px;font-size:14px}
.up{display:block;width:min(420px,90vw);margin:6px auto;background:#241a3d;color:#fff;border:2px solid #6b5aa0;border-radius:10px;padding:10px 14px;font-size:16px;text-align:left}.up:hover{border-color:var(--ac)}
#ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(10,7,4,.86);padding:16px}
#ov h1{margin:0 0 10px;font-size:clamp(20px,5vw,34px);color:var(--ac)}
#ov p{max-width:560px;line-height:1.6;font-size:clamp(13px,2.6vw,16px);margin:0 0 16px}
button{font:inherit;cursor:pointer}
#go{background:var(--ac);color:#1a1205;border:0;border-radius:10px;padding:12px 28px;font-weight:700;font-size:18px}
#tc{display:flex;justify-content:space-between;align-items:flex-end;padding:10px;gap:8px;touch-action:none;user-select:none;-webkit-user-select:none}
#dp{display:grid;grid-template-columns:repeat(3,52px);gap:6px}
#ab{display:flex;gap:8px}
#tc button{width:52px;height:52px;border-radius:50%;border:2px solid #5b4a86;background:#1d1631;color:var(--fg);font-size:20px;touch-action:none}
#tc button:active{background:#3b2d63}
@media(hover:hover) and (pointer:fine){#tc{display:none}}
kbd{background:#281e12;border-radius:4px;padding:1px 6px}
#op{display:none!important}.lv{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:min(660px,94vw);margin:0 auto 10px}.lv button{background:#241a3d;color:#fff;border:2px solid #6b5aa0;border-radius:10px;padding:6px 2px;font-size:11px;line-height:1.35}.lv button:disabled{opacity:.35}.lv button b{display:block;font-size:22px}.lv button:not(:disabled):hover{border-color:var(--ac)}#ob small{opacity:.8}

body{background:radial-gradient(ellipse at 50% 0,#1d1238 0,#0b0813 65%) fixed;min-height:100vh}
#w{margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px #3b2d63,0 12px 50px rgba(120,80,255,.25)}
#ov{background:radial-gradient(ellipse at 50% 40%,rgba(48,30,12,.82),rgba(7,5,4,.94));padding:12px}
#pn{width:min(540px,94%);max-height:94%;overflow:auto;box-sizing:border-box;padding:22px 20px 18px;background:linear-gradient(180deg,rgba(32,22,60,.92),rgba(14,10,28,.94));border:1px solid #6b5aa0;border-radius:18px;box-shadow:0 0 40px rgba(245,184,61,.12),inset 0 1px 0 rgba(255,255,255,.08);scrollbar-width:thin}
#ov h1{font-size:clamp(22px,5.4vw,34px);text-shadow:0 0 18px rgba(245,184,61,.55),0 2px 0 #000;letter-spacing:.02em;line-height:1.25}
#ov p{max-width:none;color:#e6dcc2;margin:0 0 14px}
#ob .up{width:100%;text-align:center;margin:7px 0;border-radius:12px;padding:11px 14px;background:linear-gradient(180deg,#2f2354,#241a3d);transition:transform .12s,border-color .12s,box-shadow .12s}
#ob .up:hover,#ob .up:focus-visible{transform:translateY(-1px);border-color:var(--ac);box-shadow:0 4px 16px rgba(245,184,61,.2);outline:0}
#ob .up:active{transform:scale(.98)}
#ob .up.pri{background:linear-gradient(180deg,#ffd36b,#f5a623);color:#1a1205;border-color:#ffe29a;font-weight:800;font-size:18px;padding:13px 14px}
#go{box-shadow:0 4px 18px rgba(245,184,61,.35)}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}.chips span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 10px;font-size:12px}
.lv{width:100%;grid-template-columns:repeat(5,1fr);margin:8px 0 12px}.lv button{background:linear-gradient(180deg,#2f2354,#1d1631);border-radius:12px;padding:8px 2px}.lv .sr{color:#ffd24a;letter-spacing:1px}
kbd{border:1px solid #6b4f22;border-bottom-width:2px;background:#281e12;margin:0 1px}
.hb{top:52px;bottom:auto;width:36px;height:36px;border-radius:50%;padding:0;font-size:16px;background:rgba(14,10,28,.72);backdrop-filter:blur(4px)}#mt{right:10px}#pb{right:54px}
#sk{bottom:74px;right:12px;border-radius:999px;background:rgba(30,20,60,.9);padding:9px 18px;font-weight:700}
#tc{padding:8px 14px calc(12px + env(safe-area-inset-bottom,0px));align-items:flex-end}
#tc button{width:58px;height:58px;font-size:22px;background:radial-gradient(circle at 35% 30%,#2b2150,#171028);box-shadow:0 3px 10px rgba(0,0,0,.4)}
#dp{grid-template-columns:repeat(3,58px);gap:7px}
#ab{display:grid;grid-template-columns:58px 58px 84px;grid-template-rows:58px 58px;gap:8px;align-items:end}
#ab button:nth-child(1){grid-area:2/1}#ab button:nth-child(2){grid-area:2/2}#ab button:nth-child(3){grid-area:1/2;border-color:#f5b83d}
#ab button:nth-child(4){grid-area:1/3/3/4;width:84px;height:84px;align-self:end;font-size:30px;background:radial-gradient(circle at 35% 30%,#c2410c,#7a2a0c);border-color:#f5b83d}
html,body{height:100%;overflow:hidden}
body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh}
#w{margin:0;max-width:none;width:min(100vw,calc(100dvh*800/520));border-radius:0;box-shadow:none}
@media(min-width:1000px) and (min-height:700px){#w{width:min(100vw - 24px,calc((100dvh - 24px)*800/520));border-radius:16px;box-shadow:0 0 0 1px #3b2d63,0 12px 50px rgba(120,80,255,.25)}}
@media(min-width:1100px){#pn{width:640px;padding:28px 26px 22px}#ov h1{font-size:42px}#ov p{font-size:17px}#ob .up{font-size:18px;padding:13px 16px}}
#tc{width:100%;max-width:900px;box-sizing:border-box}
@media(pointer:coarse) and (orientation:landscape){#tc{position:fixed;left:0;right:0;bottom:0;max-width:none;pointer-events:none;z-index:5;padding:6px 18px calc(8px + env(safe-area-inset-bottom,0px))}#tc button,#dp,#ab{pointer-events:auto}#tc button{opacity:.82}}
#fs{right:98px}
#pn{position:relative}
.tw{display:flex;flex-direction:column;gap:7px;margin:4px 0 12px}
.tw .rf{font-size:34px;line-height:1;filter:drop-shadow(0 0 12px rgba(245,184,61,.6))}.tw .dr{font-size:13px;opacity:.7;letter-spacing:.2em;border-top:3px double #4b3d78;padding-top:6px}
.fl{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border-radius:10px;padding:8px 12px;color:#fff;border:2px solid #4b3d78;font:inherit;position:relative;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 26px),repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 52px),linear-gradient(180deg,#3a2f5a,#251d3d);transition:transform .12s,border-color .12s}
.fl:not(:disabled):hover{transform:translateX(3px);border-color:#ffd24a}
.fl .n{flex:0 0 38px;height:38px;border-radius:8px;background:#120d22;border:1px solid #6b5aa0;display:grid;place-items:center;font-weight:800;font-size:16px;color:#ffd24a}
.fl .em{font-size:28px;flex:0 0 34px;text-align:center}.fl .tx{flex:1;min-width:0}.fl .tx b{display:block;font-size:15px}.fl .tx small{display:block;opacity:.85;font-size:12px}
.fl .rt{text-align:right;font-size:12px;color:#ffd24a;white-space:nowrap;line-height:1.35}
.fl:disabled{opacity:.45;filter:grayscale(.8);cursor:not-allowed}
.fl.bs{border-color:#b91c1c;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 2px,transparent 2px 26px),linear-gradient(180deg,#5a2230,#33121c)}
.fl.cur{border-color:#ffd24a;animation:pu 1.6s ease-in-out infinite}
@keyframes pu{0%,100%{box-shadow:0 0 0 2px rgba(255,210,74,.2),0 0 14px rgba(255,170,50,.3)}50%{box-shadow:0 0 0 3px rgba(255,210,74,.35),0 0 28px rgba(255,170,50,.6)}}
.tw{position:relative;align-items:center;gap:0;margin:2px 0 12px;padding:8px 0 0;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 20% 15%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 28%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 62% 9%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 35% 40%,#fff 0 1px,transparent 1.5px),linear-gradient(#0c0820,#2a1d52 75%,#3b2a63)}
.tw .mn{position:absolute;left:12px;top:8px;font-size:26px;opacity:.9}.tw .mn2{position:absolute;right:14px;top:10px;font-size:11px;letter-spacing:4px;color:#cdbbff;opacity:.8}
.tw .fg{font-size:28px;line-height:1;margin-bottom:-8px;z-index:1;filter:drop-shadow(0 0 8px rgba(255,200,80,.7))}
.tw .roof{width:84%;height:58px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(#e2562c,#7a2230);margin-bottom:-1px}
.fl{border-radius:2px;margin:0;padding:7px 10px;gap:8px;border:2px solid #1d1631;border-top-color:#5b4a86;justify-content:center;max-width:100%}
.fl .wn{flex:0 0 10px;height:18px;border-radius:5px 5px 0 0;background:#ffd24a;box-shadow:0 0 10px rgba(255,200,80,.8)}
.fl:disabled .wn{background:#1b1530;box-shadow:none}
.fl .tx{text-align:left;flex:1;min-width:0}.fl .tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl:not(:disabled):hover{transform:scale(1.02)}
.tw .base{width:100%;display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:8px 0 10px;background:linear-gradient(#2a1d3e,#150f22);border-top:3px solid #5b4a86}
.base .tc{font-size:26px}.base .gate{width:54px;height:62px;border-radius:30px 30px 0 0;background:#0b0716;border:3px solid #6b5aa0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px}.gate small{font-size:9px;opacity:.7}
.tw .dr{display:none}
@media(max-width:480px){.fl{padding:6px 7px;gap:6px}.fl .n{flex-basis:30px;height:30px;font-size:14px}.fl .em{font-size:22px;flex-basis:26px}.fl .tx b{font-size:13px}.fl .tx small{font-size:11px}}

/* ===== UI refresh ===== */
button:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
#pn{border-radius:20px;border-color:#4b3d78;box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
#ov h1{font-size:clamp(22px,5vw,32px);text-shadow:0 2px 0 #000;margin-bottom:8px}
#ov p{font-size:clamp(13px,2.4vw,15px);color:#e6dcc2;margin:0 0 16px}
#ob .up{width:100%;margin:8px 0;min-height:48px;padding:12px 14px;border:1px solid #4b3d78;border-radius:12px;background:#271d46;box-shadow:none;transform:none;text-align:center}
#ob .up:hover,#ob .up:focus-visible{border-color:var(--ac);background:#2f2356;transform:none;box-shadow:none}
#ob .up.pri{font-size:18px;min-height:54px}
#ob .up.gh{background:transparent;border-color:transparent;color:#cfc4ee;min-height:40px}
#ob .up.gh:hover{background:rgba(255,255,255,.06);color:#fff}
#ob .rw{display:flex;gap:8px}#ob .rw .up{flex:1;margin:8px 0}
#ob .mg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}#ob .mg.two{grid-template-columns:1fr 1fr}#ob .mg .up{margin:0}
#ob .tl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;padding:12px 6px;min-height:72px}#ob .tl span{font-size:24px;line-height:1}
#ob .dg{margin-top:14px;color:#ff9a9a;border-color:#5a2536;background:transparent;min-height:44px;font-size:14px}#ob .dg.arm{background:#7a1f2e;color:#fff;border-color:#b91c1c}
.chips{margin:0 0 16px}
#pn.pp{display:flex;flex-direction:column}#pn.pp #ot{order:0}#pn.pp #go{order:1;width:100%;margin:0 0 8px;padding:14px;border-radius:12px;font-size:18px}#pn.pp #ob{order:2}
.set{text-align:left;display:flex;flex-direction:column;gap:12px}
.sg{background:rgba(255,255,255,.04);border:1px solid #3b2d63;border-radius:14px;overflow:hidden}
.sg h3{margin:0;padding:8px 14px;font-size:12px;font-weight:600;color:#b9a9e6;background:rgba(0,0,0,.25)}
.sr2{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid #2e2450}.sg h3+.sr2{border-top:0}
.sr2 .lb{flex:1;min-width:0}.sr2 .lb b{display:block;font-size:15px;font-weight:600}.sr2 .lb small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:#c4b494}
.sw{flex:none;width:50px;height:30px;padding:0;border:0;border-radius:99px;background:#4a3a22;position:relative;transition:background .15s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.sw[aria-checked=true]{background:var(--ac)}.sw[aria-checked=true]::after{transform:translateX(20px);background:#1a1205}
.seg{flex:none;display:flex;gap:2px;padding:3px;border-radius:10px;background:#1c150c}
.seg button{border:0;background:transparent;color:#e3d7b8;padding:6px 12px;min-height:34px;border-radius:8px;font-size:13px}
.seg button.on{background:var(--ac);color:#1a1205;font-weight:700}
@media(max-width:520px){.sr2.stk{flex-direction:column;align-items:stretch}.seg button{flex:1}}
.hb{width:38px;height:38px;font-size:16px;border-color:#4b3d78}.hb:hover{border-color:var(--ac)}
#mt{right:10px}#pb{right:56px}#fs{right:102px}

/* ปุ่มเล็กที่มุมบน: เสียง (ซ้าย) · เต็มจอ+พัก (ขวา) — HUD ถูกเลื่อนลงให้พ้นแถบนี้ */
#w{container-type:inline-size}
#hbs{position:absolute;top:3px;left:0;right:0;z-index:3;display:flex;gap:4px;padding:0 1%;pointer-events:none}
#hbs .hb{pointer-events:auto;position:static;inset:auto;width:clamp(22px,3.4cqw,28px);height:clamp(22px,3.4cqw,28px);font-size:clamp(11px,1.9cqw,14px);display:grid;place-items:center;padding:0;border-radius:8px;background:rgba(14,10,28,.6);opacity:.85}
#hbs .hb:hover{opacity:1}
#mt{order:0;margin-right:auto}#fs{order:1}#pb{order:2}
#ov{padding-top:clamp(30px,4.6cqw,38px)}

/* ===== Dark-gothic UI skin ===== */
#w #pn{border:48px solid transparent;border-image:url(assets/img/a_d88b413a.png) 130 130 130 130 fill / 48px / 0 stretch;background:none;border-radius:0;box-shadow:none;padding:14px 8px 8px;filter:drop-shadow(0 10px 28px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(150,70,220,.25));width:min(600px,98%)}
@media(min-width:1100px){#w #pn{width:700px;padding:18px 14px 10px}}
#ov h1{color:#e8c36a;text-shadow:0 0 16px rgba(232,195,106,.45),0 2px 0 #000}
#ob .up,.lv button{background:linear-gradient(180deg,#2a1d3a,#17101f);border:1px solid #9a7430;box-shadow:inset 0 0 0 1px #0c0710,inset 0 0 10px rgba(240,170,60,.10);border-radius:6px}
#ob .up:hover,#ob .up:focus-visible,.lv button:not(:disabled):hover{border-color:#f0c868;box-shadow:inset 0 0 0 1px #0c0710,0 0 14px rgba(240,170,60,.45)}
#ob .up.pri,#go{background:linear-gradient(180deg,#e9c26a,#a8741f);color:#1a0d05;border:1px solid #ffe3a0;border-radius:6px;box-shadow:0 0 18px rgba(240,170,60,.4)}
.chips span{border-color:#9a743066;background:rgba(44,29,12,.5)}
#tc button{border:2px solid #a8782f;background:radial-gradient(circle at 35% 30%,#2e2040,#140c1c);box-shadow:inset 0 0 0 2px #0c0710,0 3px 10px rgba(0,0,0,.5)}
#tc button:active{background:#5a3a1c}
#hbs .hb,#sk{border-color:#a8782f}

/* ===== Tower select sprites ===== */
.tw{background:radial-gradient(circle at 20% 15%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 82% 28%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 62% 9%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 35% 40%,#fff 0 1px,transparent 1.5px),linear-gradient(#0c0820,#1f1540 80%,#2a1d52);padding:8px 0 0;gap:0}
.tw .roof{width:50%;height:auto;aspect-ratio:360/434;clip-path:none;background:url(assets/img/a_051650b3.webp) center/100% 100% no-repeat;margin:0 0 -2px;filter:drop-shadow(0 0 14px rgba(240,180,80,.30))}
.tw .gate{width:100%;max-width:100%;aspect-ratio:520/238;background:url(assets/img/a_893975fc.webp) center/100% 100% no-repeat;margin-top:-1px}
.tw .fl{container-type:inline-size;position:relative;display:block;padding:0;margin:0 0 -3px;border:0;border-radius:0;background:transparent center/100% 100% no-repeat;filter:none;opacity:1;cursor:pointer;transition:filter .15s}
.tw .fl:disabled{opacity:1;filter:none;cursor:not-allowed}
.tw .fl.f-gold{background-image:url(assets/img/a_0ae97d5c.webp);aspect-ratio:520/202}
.tw .fl.f-chain{background-image:url(assets/img/a_3d0e4c21.webp);aspect-ratio:520/205}
.tw .fl.f-green{background-image:url(assets/img/a_a65baf1b.webp);aspect-ratio:520/202}
.tw .fl.f-red{background-image:url(assets/img/a_c2c673a7.webp);aspect-ratio:520/204}
.tw .fl:not(:disabled):hover,.tw .fl:not(:disabled):focus-visible{transform:none;filter:brightness(1.25) drop-shadow(0 0 8px rgba(255,200,90,.6));outline:0}
.tw .fl.cur{animation:flg 1.8s ease-in-out infinite}
@keyframes flg{0%,100%{filter:drop-shadow(0 0 2px rgba(255,190,70,.2))}50%{filter:drop-shadow(0 0 12px rgba(255,190,70,.9))}}
.tw .fl .pl{position:absolute;left:30%;width:40%;top:33%;height:49%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;line-height:1.25;color:#f1e6c8;text-shadow:0 1px 3px #000,0 0 6px #000}
.tw .fl.f-red .pl{left:29.5%;width:41%;top:38%;height:50%;color:#ffd9d0}
.tw .fl.f-chain .pl{top:16%;height:30%}
.tw .fl .pl b{font-size:max(10px,3.1cqw);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tw .fl .pl small{font-size:max(9px,2.3cqw);color:#e8c36a;opacity:.95;white-space:nowrap}

/* back button -> top-left, tower bg removed */
#ov .bk{position:absolute;top:36px;left:8px;z-index:5;width:auto;margin:0;padding:7px 16px;min-height:36px;font-size:14px;font-weight:700;color:#f1e6c8;background:linear-gradient(180deg,#2a1d3a,#17101f);border:1px solid #9a7430;border-radius:6px;box-shadow:inset 0 0 0 1px #0c0710,0 2px 10px rgba(0,0,0,.6);cursor:pointer}
#ov .bk:hover,#ov .bk:focus-visible{border-color:#f0c868;box-shadow:inset 0 0 0 1px #0c0710,0 0 14px rgba(240,170,60,.45);outline:0}
.tw{background:none!important;box-shadow:none;overflow:visible;border-radius:0}
.tw .mn,.tw .mn2{display:none}
:root{--pn:url(assets/img/pn_fefa4693.webp);--pg:url(assets/img/pg_b2f7ca19.webp);--pgr:url(assets/img/pgr_9b96038e.webp);--pl:url(assets/img/pl_3bb820ba.webp);--sd:url(assets/img/sd_3bc2d445.webp);--sd2:url(assets/img/sd_3bc2d445.webp)2;--bp:url(assets/img/bp_12f9974c.webp)}
:root{--gold_L:url(assets/img/gold_l_a7d09008.webp);--gold_LM:url(assets/img/gold_lm_4fb38385.webp);--gold_C:url(assets/img/gold_c_4c840e37.webp);--gold_RM:url(assets/img/gold_rm_d0925241.webp);--gold_R:url(assets/img/gold_r_d9ff1ed2.webp);--goldD_L:url(assets/img/gold_d_l_8a36c5c1.webp);--goldD_LM:url(assets/img/gold_d_lm_58c5432f.webp);--goldD_C:url(assets/img/gold_d_c_3034befe.webp);--goldD_RM:url(assets/img/gold_d_rm_5b85cc29.webp);--goldD_R:url(assets/img/gold_d_r_c30740f0.webp);--goldG_L:url(assets/img/gold_g_l_e13f90e1.webp);--goldG_LM:url(assets/img/gold_g_lm_1565f7ef.webp);--goldG_C:url(assets/img/gold_g_c_7cfc1728.webp);--goldG_RM:url(assets/img/gold_g_rm_382ce39a.webp);--goldG_R:url(assets/img/gold_g_r_60894747.webp);--purp_L:url(assets/img/purp_l_ba9910c4.webp);--purp_LM:url(assets/img/purp_lm_272ecebd.webp);--purp_C:url(assets/img/purp_c_633d42b6.webp);--purp_RM:url(assets/img/purp_rm_ad39ba4f.webp);--purp_R:url(assets/img/purp_r_01cd90b1.webp);--purpD_L:url(assets/img/purp_d_l_41a2caf2.webp);--purpD_LM:url(assets/img/purp_d_lm_35dd920d.webp);--purpD_C:url(assets/img/purp_d_c_98468339.webp);--purpD_RM:url(assets/img/purp_d_rm_8db4ff71.webp);--purpD_R:url(assets/img/purp_d_r_95b7d44d.webp);--purpG_L:url(assets/img/purp_g_l_6983d814.webp);--purpG_LM:url(assets/img/purp_g_lm_d47c4657.webp);--purpG_C:url(assets/img/purp_g_c_10c74506.webp);--purpG_RM:url(assets/img/purp_g_rm_9933eefd.webp);--purpG_R:url(assets/img/purp_g_r_1be5d18a.webp);--line_L:url(assets/img/line_l_401ccb7c.webp);--line_LM:url(assets/img/line_lm_2a88efa8.webp);--line_C:url(assets/img/line_c_6a9045e0.webp);--line_RM:url(assets/img/line_rm_7d6141f8.webp);--line_R:url(assets/img/line_r_e9c82d57.webp);--lineD_L:url(assets/img/line_d_l_cd66b4e7.webp);--lineD_LM:url(assets/img/line_d_lm_8c48506e.webp);--lineD_C:url(assets/img/line_d_c_e59bd509.webp);--lineD_RM:url(assets/img/line_d_rm_24da5c48.webp);--lineD_R:url(assets/img/line_d_r_14d7cbe7.webp);--lineG_L:url(assets/img/line_g_l_c4f4c027.webp);--lineG_LM:url(assets/img/line_g_lm_2ac351f5.webp);--lineG_C:url(assets/img/line_g_c_c99ec7ed.webp);--lineG_RM:url(assets/img/line_g_rm_346ca4f5.webp);--lineG_R:url(assets/img/line_g_r_5bcaad40.webp);--gold_r:2.333;--goldD_r:2.258;--goldG_r:2.325;--purp_r:2.383;--purpD_r:2.300;--purpG_r:2.375;--line_r:2.767;--lineD_r:2.683;--lineG_r:2.775;--ff:'Cinzel','Noto Serif Thai','Sarabun',Georgia,serif}
/* ===== Gothic sprite skin v2 ===== */
#ov,#ov button,#ov small,#ov kbd,#ov h1,#ov p,.fl,.sg,.chips span{font-family:var(--ff)!important;letter-spacing:0!important;font-style:normal!important}
#ov h1{font-size:clamp(24px,5vw,34px)!important;letter-spacing:.01em!important;line-height:1.3}
#ov p,#ov .sr2 .lb small{font-size:15px;line-height:1.65}#ov small{font-size:12.5px}.chips span{font-size:12px!important}
#ob .up,.lv button,#ov .bk,#go,#sk{--L:var(--purp_L);--LM:var(--purp_LM);--C:var(--purp_C);--RM:var(--purp_RM);--R:var(--purp_R);--r:var(--purp_r);--h:60px;--u:calc(var(--h)*var(--r)*.2);height:var(--h)!important;min-height:0!important;min-width:calc(var(--u)*5);box-sizing:border-box;padding:0 calc(var(--u)*.85)!important;display:flex;align-items:center;justify-content:center;gap:8px;margin:6px auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
background-color:transparent!important;background-image:var(--L),var(--C),var(--R),var(--LM),var(--RM)!important;background-repeat:no-repeat!important;
background-size:auto 100%,auto 100%,auto 100%,max(0px,calc(50% - var(--u)*1.5 + 2px)) 100%,max(0px,calc(50% - var(--u)*1.5 + 2px)) 100%!important;
background-position:left top,center top,right top,calc(var(--u) - 1px) top,right calc(var(--u) - 1px) top!important;
color:#f3e2b8;font-size:16px;font-weight:700;line-height:1.1;text-shadow:0 1px 0 #000,0 0 6px rgba(0,0,0,.7);transition:filter .12s}
#ob .up{width:100%;max-width:340px}#sk{display:none}
#ob .up.pri,#go{--L:var(--gold_L);--LM:var(--gold_LM);--C:var(--gold_C);--RM:var(--gold_RM);--R:var(--gold_R);--r:var(--gold_r);--h:68px;font-size:18px;color:#fff6de!important;text-shadow:0 1px 1px rgba(28,12,2,.9),0 0 9px rgba(28,12,2,.6)!important}
#go{margin:0 auto 8px!important;width:min(340px,100%)}
#ob .up.gh,#ov .bk{--L:var(--line_L);--LM:var(--line_LM);--C:var(--line_C);--RM:var(--line_RM);--R:var(--line_R);--r:var(--line_r);--h:48px;color:#e8d6a8}#ov .bk{--h:42px;font-size:14px;width:auto}
#ob .up.dg{--L:var(--line_L);--LM:var(--line_LM);--C:var(--line_C);--RM:var(--line_RM);--R:var(--line_R);--r:var(--line_r);--h:48px;color:#ffb4b4}
#ob .up.tl{--h:60px;flex-direction:row;font-size:14px;padding:0 calc(var(--u)*.7)!important;width:100%;max-width:none;margin:0!important}#ob .tl .ic{height:28px;width:28px;margin:0}
#ob .up:disabled,.lv button:disabled{--L:var(--purpG_L);--LM:var(--purpG_LM);--C:var(--purpG_C);--RM:var(--purpG_RM);--R:var(--purpG_R);--r:var(--purpG_r);color:#8d8a94;filter:none!important}
#ob .up.pri:disabled{--L:var(--goldG_L);--LM:var(--goldG_LM);--C:var(--goldG_C);--RM:var(--goldG_RM);--R:var(--goldG_R);--r:var(--goldG_r);}
#ob .up,.lv button,#ov .bk,#go,#sk:active:not(:disabled){--L:var(--purpD_L);--LM:var(--purpD_LM);--C:var(--purpD_C);--RM:var(--purpD_RM);--R:var(--purpD_R);--r:var(--purpD_r);filter:none}#ob .up.pri:active,#go:active{--L:var(--goldD_L);--LM:var(--goldD_LM);--C:var(--goldD_C);--RM:var(--goldD_RM);--R:var(--goldD_R);--r:var(--goldD_r);}#ob .up.gh:active,#ov .bk:active{--L:var(--lineD_L);--LM:var(--lineD_LM);--C:var(--lineD_C);--RM:var(--lineD_RM);--R:var(--lineD_R);--r:var(--lineD_r);}
#ob .up:not(:disabled):hover,#ob .up:focus-visible,.lv button:not(:disabled):hover,#ov .bk:hover,#go:hover{filter:brightness(1.2) drop-shadow(0 0 7px rgba(240,170,60,.6));outline:0}
#ob .mg,#ob .rw{align-items:center}
.ic{display:inline-block;height:1.5em;width:1.5em;vertical-align:-.4em;margin:0 .12em;object-fit:contain}
#hbs .hb{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none;width:clamp(26px,4.2cqw,34px)!important;height:clamp(26px,4.2cqw,34px)!important;opacity:.95}
#hbs .hb .ic{width:100%;height:100%;margin:0;vertical-align:top}#hbs .hb:hover{filter:brightness(1.35)}
#tc button{background:var(--sd) center/contain no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#e8c36a}#tc button:active{filter:brightness(1.7)}
#ab button{background:none!important}#ab .ic{width:100%;height:100%;margin:0;vertical-align:top}
#ab button:nth-child(4){background:var(--bp) center/contain no-repeat!important}#ab button:nth-child(4) .ic{width:56%;height:56%;margin:0 auto}
#tc button:active .ic{filter:brightness(1.5)}
#ob .up{--h:76px;margin:0 auto!important}#ob .up.pri,#go{--h:88px}
#ob .up.gh,#ob .up.dg{--h:64px}#ov .bk{--h:56px}#ob .up.tl{--h:58px}#sk{--h:60px}
#ob .up .ic,#ov .bk .ic,#sk .ic{height:1.15em;width:1.15em;vertical-align:-.2em;margin:0 .1em 0 0}#ob .tl .ic{height:24px;width:24px}
#ob .up,#ov .bk,#sk{padding-top:2px!important}
#ob .up.pri,#go{padding-top:4px!important}
#ob .up,#ov .bk,#sk{padding-top:6px!important}#ob .up.pri,#go{padding-top:8px!important}#ob .up.tl{padding-top:6px!important}
.tw .fl .pl{top:36%}.tw .fl.f-red .pl{top:41%}

/* ===== UI refresh v3: หน้าเริ่มต้น / วิธีเล่น / หน้าอื่นๆ ===== */
#ot::after{content:"";display:block;height:9px;margin:12px auto 2px;width:min(280px,72%);background:radial-gradient(circle,#e8c36a 0 2.5px,transparent 3px) center/9px 9px no-repeat,linear-gradient(90deg,transparent,#9a7430 25%,#9a7430 42%,transparent 42%,transparent 58%,#9a7430 58%,#9a7430 75%,transparent) center/100% 1px no-repeat}
#ov b{color:#f1d38a}
.tg2{display:block;max-width:400px;margin:0 auto 4px;font-size:15px;line-height:1.6;color:#eadec0}
.stt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0 6px}
.stt div{padding:8px 4px 7px;border:1px solid #6b4f22;border-radius:6px;background:linear-gradient(180deg,rgba(66,44,18,.5),rgba(24,16,8,.6));box-shadow:inset 0 0 0 1px #0c0710}
.stt b{display:block;font-size:clamp(17px,4.4cqw,22px);line-height:1.15;color:#ffd88a!important}
#ov .stt small{display:block;margin-top:2px;font-size:11.5px;color:#cfc0a2}
.stm{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin:0 0 6px;font-size:12.5px;color:#c4b494}
.tpg{display:flex;justify-content:center;gap:8px;margin:2px 0 14px}
.tpg button{width:34px;height:8px;padding:0;border:1px solid #9a7430;border-radius:99px;background:#1f1712;transition:background .2s,width .2s}
.tpg button.dn{background:#6b4f22}.tpg button.on{width:56px;background:#e8c36a}
.tk{display:grid;gap:8px;text-align:left;animation:tkin .25s ease-out}
@keyframes tkin{from{opacity:0;transform:translateX(12px)}}
.tk>div{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid #5a4220;border-radius:8px;background:rgba(0,0,0,.28)}
.tk .ky{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;font-size:15px;color:#ffd88a}
.tk kbd{min-width:26px;padding:3px 8px;text-align:center;font-size:13px;color:#ffd88a}
.tk .ds{font-size:14.5px;line-height:1.55}
.tkn,.pzs{margin-top:10px;padding:9px 12px;border-left:3px solid #e8c36a;background:rgba(232,195,106,.08);text-align:left;font-size:13.5px;line-height:1.6;color:#ece1c2}
.tipb{padding:10px 14px;border:1px solid #3b2d63;border-radius:8px;background:rgba(0,0,0,.28);text-align:left;line-height:1.65}
@media(max-width:420px){.tk>div{grid-template-columns:1fr;gap:5px}.tk .ky{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.tk{animation:none}}
.rc{border:1px solid #9a7430!important;border-radius:8px!important;background:linear-gradient(180deg,#2a1d3a,#120b1b)!important;box-shadow:inset 0 0 0 1px #0c0710}
.rc.sel{border-color:#ffe3a0!important;box-shadow:inset 0 0 0 1px #0c0710,0 0 18px rgba(240,170,60,.45)}.rc.sel b::after{content:' ✓';color:#ffd88a}
#ov .lv{gap:8px}#ov .lv button{--h:82px}
.sg{border-color:#6b4f22;border-radius:8px}.sg h3{padding:9px 14px;font-size:13px;color:#e8c36a;border-bottom:1px solid #5a4220}
/* ===== UI skin v4: dark-gothic sheet ===== */
:root{--k-fr:url(assets/img/a_e95cc2fd.webp);--k-bd:url(assets/img/a_e6db2110.webp);--k-br:url(assets/img/a_2c2c686e.webp);--k-bp:url(assets/img/a_61fde799.webp);--k-ci:url(assets/img/a_846ae26a.webp);--k-cb:url(assets/img/a_54b778bc.webp);--k-sq:url(assets/img/a_882f5de6.webp);--k-dv:url(assets/img/a_284c5428.webp)}
/* กรอบหลัก */
#w #pn{border:46px solid transparent;border-image:var(--k-fr) 50 fill/46px stretch;padding:6px 6px 4px}
@media(min-width:1100px){#w #pn{padding:10px 10px 6px}}
/* เส้นคั่นใต้ชื่อ */
#ot::after{content:"";display:block;width:min(300px,78%);aspect-ratio:584/57;height:auto;margin:10px auto 0;background:var(--k-dv) center/100% 100% no-repeat}
/* ปุ่ม: ใช้แถบ 3 ส่วน (ปลายซ้าย-กลางยืด-ปลายขวา) */
#ob .up,#ov .bk,#go,#sk{--bi:var(--k-bd);--e:calc(var(--h)*.92);background:none!important;border-style:solid!important;border-width:0!important;border-image:var(--bi) 0 44 0 44 fill/0 var(--e) 0 var(--e) stretch!important;padding:0 var(--e)!important;min-width:calc(var(--e)*2.6);box-shadow:none!important;color:#ecdcb4}
#ob .up{--h:54px}#ob .up.pri,#go{--h:62px;--bi:var(--k-bp);color:#fff6de!important;text-shadow:0 1px 1px rgba(28,12,2,.9),0 0 9px rgba(28,12,2,.6),0 -1px 0 rgba(255,244,214,.3)!important;font-weight:800}
#ob .up.gh,#ov .bk{--h:46px}#ob .up.dg{--h:46px;--bi:var(--k-br);color:#ffd9cf}
#ob .up.tl{--h:52px;--e:calc(var(--h)*.55);padding:0 var(--e)!important;min-width:0}
#sk{--h:48px}#ov .bk{--h:42px}
#ob .up:disabled{filter:grayscale(1) brightness(.55)!important}
#ob .up:not(:disabled):hover,#ob .up:focus-visible,#ov .bk:hover,#go:hover{filter:brightness(1.22) drop-shadow(0 0 8px rgba(255,120,60,.55))!important}
#ob .up:not(:disabled):active,#go:active{filter:brightness(.85)!important}
/* ปุ่มเลือกด่าน / การ์ดโรล */
#ov .lv button{--h:auto;height:auto!important;min-height:78px!important;background:none!important;border:18px solid transparent!important;border-image:var(--k-sq) 28 fill/18px stretch!important;padding:0!important;margin:0!important;min-width:0;color:#ecdcb4;display:block;font-size:11px;line-height:1.3;text-shadow:0 1px 2px #000}
#ov .lv button:disabled{filter:grayscale(1) brightness(.5)!important}
#ov .lv{gap:4px}
.rc{border:20px solid transparent!important;border-image:var(--k-fr) 50 fill/20px stretch!important;background:none!important;border-radius:0!important;box-shadow:none!important;padding:0 !important}
.rc.sel{filter:drop-shadow(0 0 8px rgba(240,170,60,.7))}.rc:hover,.rc:focus-visible{box-shadow:none!important;filter:brightness(1.2)}
/* ปุ่มควบคุมบนจอสัมผัส */
#tc button{background:var(--k-ci) center/contain no-repeat!important}
#ab button:nth-child(4){background:var(--k-cb) center/contain no-repeat!important}
/* ปรับรายละเอียด */
.tk>div{grid-template-columns:minmax(150px,36%) 1fr;border-radius:3px;border-color:#5a4220;background:rgba(0,0,0,.34)}
.tk .ky{flex-wrap:nowrap}.tk kbd{border-radius:3px;min-width:24px;padding:3px 7px}
.tkn,.tipb,.pzs{border-radius:0 3px 3px 0}.tipb{border-radius:3px;border-color:#5a4220}
.sg{border-radius:3px!important;border-color:#5a4220!important}.seg,.seg button{border-radius:3px!important}
#ov .lv button:disabled{filter:grayscale(1) brightness(.85)!important;opacity:.7!important}
@media(max-width:420px){.tk>div{grid-template-columns:1fr}}
@media(max-width:600px){#w #pn{border-width:22px;border-image-width:22px;padding:0 2px 2px;max-height:97%}
#ob .up{--h:42px}#ob .up.pri,#go{--h:48px}#ob .up.gh,#ob .up.dg{--h:38px}#ob .up.tl{--h:40px;font-size:12px}#ov .bk{--h:34px;top:34px}
#ot::after{display:none}#ov h1{font-size:19px!important;margin-bottom:6px}#ov p,#ob .tg2{font-size:13px;line-height:1.45;margin-bottom:6px}
#ob .up{margin:3px auto!important}.tk>div{padding:7px 9px}.tk .ds{font-size:13px}.tkn{font-size:12px;margin-top:6px}.tpg{margin-bottom:8px}
.rc{border-width:14px!important;border-image-width:14px!important}}
@media(max-width:600px){#ob .up.tl{--e:calc(var(--h)*.3);gap:4px;font-size:11.5px;white-space:nowrap}#ob .tl .ic{width:18px;height:18px}}
@media(max-width:600px){.tk{gap:5px}.tk>div{grid-template-columns:minmax(64px,auto) 1fr!important;gap:8px;padding:5px 8px}.tk .ky{justify-content:flex-start;flex-wrap:wrap;font-size:12px}.tk kbd{font-size:11px;padding:2px 5px}.tk .ds{font-size:12px;line-height:1.4}.tpg{margin:0 0 6px}}
/* ===== พื้นหลังหน้าแรก ===== */
#ov.ttl{background:radial-gradient(ellipse at 50% 58%,rgba(4,3,12,.62) 0,rgba(4,3,12,.22) 48%,rgba(4,3,12,.5) 100%),url(assets/img/a_f4cd5d11.webp) center 30%/cover no-repeat!important}
#ov.ttl #pn{border:0!important;border-image:none!important;background:none!important;filter:none!important;width:min(520px,94%);padding:0 8px}
#ov.ttl h1{font-size:clamp(34px,8.5vw,64px)!important;letter-spacing:.04em!important;text-shadow:0 0 28px rgba(232,195,106,.4),0 3px 0 #000,0 6px 22px #000}
#ov.ttl h1 small{font-size:.3em!important;letter-spacing:.35em!important;color:#f1e6c8!important;text-shadow:0 2px 8px #000}
#ov.ttl #ot::after{width:min(360px,80%)}
#ov.ttl #ob .tg2{color:#f3ecd2;text-shadow:0 2px 10px #000,0 0 3px #000}
#ov.ttl #pn{width:min(680px,96%)!important}#ov.ttl h1{white-space:nowrap;font-size:clamp(28px,6.4vw,58px)!important}#ov.ttl h1 .ic{height:1.05em;width:1.05em;vertical-align:-.12em;margin-right:.2em}
#ov.ttl #ob .up{max-width:360px}
#ov.ttl #ob .mg{max-width:520px;margin-left:auto;margin-right:auto}
#ov.ttl #ob .up.pri{--h:76px}
@media(max-width:600px){#ov.ttl h1{font-size:clamp(24px,8vw,34px)!important}#ov.ttl #ot::after{display:block;width:70%}#ov.ttl #ob .up.pri{--h:58px}}
@media(max-width:600px){#ov.ttl{padding-top:30px;padding-bottom:6px}#ov.ttl #ot::after,#ov.ttl #ob .tg2{display:none}
#ov.ttl h1{font-size:clamp(22px,7vw,30px)!important;margin:0 0 8px}#ov.ttl h1 small{margin-top:2px!important;font-size:.36em!important}
#ov.ttl #ob .up.pri{--h:46px}#ov.ttl #ob .up{--h:40px}#ov.ttl #ob .up.tl{--h:36px;font-size:11px}#ov.ttl #ob .mg{gap:4px;margin:4px 0 0}#ov.ttl #ob .up{margin:2px auto!important}}
@media(max-height:430px){#ov.ttl{padding-top:28px}#ov.ttl #ot::after,#ov.ttl #ob .tg2{display:none}#ov.ttl h1{font-size:26px!important;margin-bottom:4px}#ov.ttl #ob .up.pri{--h:44px}#ov.ttl #ob .up.tl{--h:36px}}
/* ===== หน้าเลือกชั้น: หอคอยตั้งบนพื้น เลื่อนขึ้นไปสู่ท้องฟ้า ===== */
#ov.twr{padding:0!important;justify-content:stretch;background:#3a3c48!important}
#ov.twr #pn{border:0!important;border-image:none!important;background:url(assets/img/a_63c2c49e.webp) center bottom/max(100%,calc(var(--hc,2000)*.5px)) calc(var(--hc,2000)*.78px) no-repeat local,url(assets/img/a_63933081.webp) center top/max(100%,1100px) auto no-repeat local,#03050a!important;filter:none!important;width:100%!important;max-width:none;height:100%;max-height:100%;padding:0!important;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#ov.twr #pn::-webkit-scrollbar{display:none}
#ov.twr #ot{position:sticky;top:8px;z-index:4;align-self:center;width:auto;margin:8px 0 0;padding:7px 26px 8px;font-size:clamp(17px,3.6vw,24px)!important;white-space:nowrap;background:rgba(10,8,18,.84);border:1px solid #6b4f22;border-radius:3px;box-shadow:0 4px 18px rgba(0,0,0,.55),inset 0 0 0 1px #0c0710}
#ov.twr #ot::after{display:none}
#ov.twr #ot .ic{height:1.1em;width:1.1em}
#ov.twr .ts{display:block;margin-top:3px;font-size:12.5px!important;font-weight:400;color:#d6d9ee;text-shadow:0 1px 4px #000}
#ov.twr #ob{width:min(560px,92%);margin:auto 0 0;padding:0;font-size:0;line-height:0}
#ov.twr #ob .tw{container-type:inline-size;width:100%;margin:0;padding:0;gap:0;font-size:16px;line-height:normal}
#ov.twr .tw .roof{margin:0 0 -6.8cqw}
#ov.twr .tw .fl{margin:0 0 calc(var(--w,94)*-.0641cqw)}
#ov.twr .tw .gate{margin:0}
#ov.twr .tw .fl.cur{z-index:auto}
#ov.twr #ov .bk,#ov.twr .bk{top:34px}
@media(max-width:600px){#ov.twr #ob{width:96%}#ov.twr #ot{padding:5px 14px 6px;margin-top:30px;top:30px;font-size:17px!important}#ov.twr .ts{font-size:10.5px!important}}
@media(max-width:600px){#ov.twr .ts{display:none}#ov.twr .bk{--h:34px!important;font-size:12px;top:30px!important;left:4px!important;min-width:0!important}#ov.twr #ot{padding:4px 12px 5px;font-size:16px!important}}
@media(max-height:430px){#ov.twr .ts{display:none}#ov.twr #ot{top:6px;margin-top:6px;padding:3px 14px 4px}#ov.twr .bk{--h:34px!important;top:30px!important}}



/* ===== สรุปผลด่าน (แบบมีกรอบ) ===== */
#ob .rs-st{display:flex;justify-content:center;gap:clamp(6px,1.4vw,16px);font-size:clamp(46px,6.4vw,72px)!important;line-height:1.05;margin:4px 0 2px}
#ob .rs-st span{display:inline-block;color:#4a3d28;text-shadow:0 2px 0 #000}
#ob .rs-st span.on{color:#ffd24a;text-shadow:0 3px 0 #7a4a06,0 0 18px rgba(255,190,60,.7);animation:rsPop .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--k)*.22s)}
#ob .rs-sc{font-size:clamp(18px,2.4vw,24px);color:#e6dcc2;margin:2px 0 10px}
#ob .rs-sc b{font-size:1.9em;color:#fff3c4;margin:0 .15em;text-shadow:0 2px 0 #000,0 0 14px rgba(255,200,80,.5);font-variant-numeric:tabular-nums}
#ob .rs-sc em{display:block;font-style:normal;font-size:.62em;color:#bfb394;margin-top:0}
#ob .rs-sc em.nw{color:#ffe27a;font-weight:700}
#ob .rs-ck{list-style:none;margin:0 auto 8px;padding:8px 14px;max-width:420px;text-align:left;background:rgba(0,0,0,.28);border:1px solid rgba(154,116,48,.45);border-radius:6px}
#ob .rs-ck li{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:15px;color:#cfc4a6}
#ob .rs-ck li+li{border-top:1px solid rgba(255,255,255,.06)}
#ob .rs-ck li i{font-style:normal;width:1.2em;text-align:center;font-size:17px}
#ob .rs-ck li.ok{color:#fff3d0}#ob .rs-ck li.ok i{color:#ffd24a}
#ob .rs-ck li.no i{color:#6b5d44}
#ob .rs-ck small{margin-left:auto;font-size:13px;opacity:.75}
#ob .rs-cb{font-size:14px;color:#bfb394;margin-bottom:6px}#ob .rs-cb b{color:#fff3c4}
@keyframes rsPop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}



/* ===== จอเตี้ย (แล็ปท็อป ≤ 820px สูง): บีบกรอบ/ระยะห่างให้เนื้อหาพอดี ไม่ต้องเลื่อน ===== */
@media (min-width:700px) and (max-height:820px){
 #w #pn{border-width:32px!important;border-image-width:32px!important;max-height:98%!important}
 #ov.cdfree #pn{border:0!important}
 #ov h1#ot{margin-bottom:4px!important}
 #ob .tk>div{padding-top:7px!important;padding-bottom:7px!important}
 #ob .tpg{margin:4px 0 8px!important}
 #ob .tkn{margin:8px 0!important;padding:7px 12px!important}
 #ob .up{margin:4px 0!important}
 #ob img[style*="margin:0 auto 12px"]{margin-bottom:6px!important;max-height:84px!important;width:auto!important;height:auto!important}
 #ob .tipb{padding:8px 12px!important;line-height:1.5!important}#ob .pzs{margin-top:6px!important;padding:6px 12px!important}
 #ob .rcs .rc canvas{width:100%!important;height:auto!important;max-height:25vh!important;object-fit:contain!important}
 #ob .rcs .rc{padding-top:4px!important;padding-bottom:6px!important;gap:2px!important}
 #ob .rcs .rc small{font-size:10.5px!important;line-height:1.35!important}
 #ob .rcs .rc .sb{font-size:9.5px!important}#ob .rcs .rc .sb i{height:4px!important}
 #ob .rcs{margin:4px 0 6px!important}
}



/* ===== Boss intro (ด่าน 10) — เน้นแอนิเมชันที่ใช้ GPU (transform/opacity) ===== */
#bi{position:fixed;inset:0;z-index:98;background:#000;overflow:hidden;opacity:0;transition:opacity .5s;font-family:var(--ff,inherit);user-select:none;-webkit-user-select:none;cursor:pointer;contain:strict}
#bi.on{opacity:1}#bi.out{opacity:0;transition:opacity .5s}
#bi .sh{position:absolute;inset:0;will-change:transform}
#bi .im{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform,opacity;backface-visibility:hidden}
#bi .im img{display:block;width:100%;height:100%;pointer-events:none}
#bi .dk{position:absolute;inset:0;background:#000;opacity:.7;will-change:opacity}
#bi .fog{position:absolute;inset:-10%;opacity:0;will-change:transform,opacity;background:radial-gradient(40% 30% at 20% 70%,rgba(190,190,200,.20),transparent 70%),radial-gradient(45% 30% at 80% 55%,rgba(170,170,190,.16),transparent 70%),radial-gradient(50% 25% at 50% 90%,rgba(200,190,170,.18),transparent 70%)}
#bi.go .fog{animation:biFog 16s linear .6s both}
#bi .vg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 38%,rgba(0,0,0,.55) 78%,#000 100%)}
#bi .bar{position:absolute;left:0;right:0;height:12%;background:#000;z-index:3;transition:transform 1s cubic-bezier(.2,.8,.2,1);will-change:transform}
#bi .bt{top:0;transform:translateY(-100%)}#bi .bb{bottom:0;transform:translateY(100%)}
#bi.go .bt,#bi.go .bb{transform:none}
#bi .fl{position:absolute;inset:0;background:#fff;opacity:0;z-index:4;pointer-events:none;will-change:opacity}
#bi.go .fl{animation:biFlash 1.1s 5.2s ease-out backwards}
#bi.go .fl{animation-fill-mode:none}
#bi.go .sh{animation:biShake .8s 5.2s linear}
#bi .tx{position:absolute;left:0;right:0;bottom:15%;z-index:5;text-align:center;padding:0 12px;pointer-events:none}
#bi .pre{position:absolute;left:0;right:0;top:44%;text-align:center;z-index:5;color:#d8b25a;letter-spacing:.5em;font-size:clamp(12px,2.6vw,18px);text-shadow:0 0 12px #000;opacity:0;pointer-events:none;will-change:opacity,transform}
#bi.go .pre{animation:biPre 2.4s .2s both}
#bi .nmw{display:block;opacity:0;will-change:transform,opacity;transform-origin:50% 60%}
#bi.go .nmw{animation:biName 1.3s 5.2s cubic-bezier(.16,.9,.3,1) both}
#bi .nm{display:inline-block;font-weight:900;white-space:nowrap;font-size:clamp(30px,9vw,84px);line-height:1.15;letter-spacing:.06em;
 background:linear-gradient(180deg,#fff6d0 8%,#f3c24c 48%,#9a6410 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 3px 0 #2a1402) drop-shadow(0 0 10px #000) drop-shadow(0 0 26px rgba(255,170,40,.55))}
#bi .sb{display:block;margin-top:6px;color:#e9dcc0;letter-spacing:.42em;font-size:clamp(11px,2.5vw,20px);font-weight:700;opacity:0;text-shadow:0 0 8px #000,0 0 18px #000;will-change:opacity,transform}
#bi.go .sb{animation:biUp .8s 5.8s both}
#bi .ep{display:block;margin:12px auto 0;max-width:min(820px,94vw);color:#fff;font-size:clamp(13px,2.6vw,19px);line-height:1.5;font-weight:700;font-style:italic;text-shadow:0 1px 0 #000,0 0 6px #000,0 0 14px #000,0 0 26px rgba(0,0,0,.9)}
#bi .ep .w{opacity:0;display:inline-block;white-space:pre;will-change:opacity,transform}
#bi.go .ep .w{animation:biW .28s forwards;animation-delay:calc(6.15s + var(--k))}
#bi .hint{position:absolute;left:0;right:0;bottom:3.2%;text-align:center;z-index:6;color:#cbbd9a;font-size:13px;opacity:0;pointer-events:none}
#bi.go .hint{animation:biHint 1.4s 8s ease-in-out infinite}
#bi .skip{position:absolute;right:12px;top:calc(12% + 8px);z-index:7;background:rgba(0,0,0,.45);color:#e9dcc0;border:1px solid rgba(232,195,106,.5);border-radius:6px;padding:6px 14px;font-size:14px;font-family:inherit;cursor:pointer}
#bi .skip:hover{border-color:#f0c868;color:#fff}
#bi .em{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#ffcf6a;box-shadow:0 0 6px 2px rgba(255,170,50,.7);opacity:0;z-index:2;will-change:transform,opacity}
#bi.go .em{animation:biEm var(--d,8s) linear var(--w,0s) infinite}
@keyframes biFog{0%{opacity:0;transform:translate3d(-4%,0,0)}20%{opacity:1}100%{opacity:.9;transform:translate3d(5%,0,0)}}
@keyframes biFlash{0%{opacity:.9}100%{opacity:0}}
@keyframes biShake{0%,100%{transform:none}12%{transform:translate3d(-8px,5px,0)}28%{transform:translate3d(7px,-5px,0)}44%{transform:translate3d(-5px,-3px,0)}60%{transform:translate3d(4px,4px,0)}78%{transform:translate3d(-2px,2px,0)}}
@keyframes biPre{0%{opacity:0;transform:scale(1.08)}25%{opacity:1}75%{opacity:1}100%{opacity:0;transform:scale(.97)}}
@keyframes biName{0%{opacity:0;transform:scale(1.7)}35%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes biUp{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes biW{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
@keyframes biHint{50%{opacity:.25}0%,100%{opacity:.85}}
@keyframes biEm{0%{opacity:0;transform:translate3d(0,0,0)}10%{opacity:1}100%{opacity:0;transform:translate3d(var(--x,20px),-95vh,0)}}
@media(prefers-reduced-motion:reduce){#bi.go .sh,#bi.go .em{animation:none!important}}



/* ===== หน้าผ่านด่าน/เลือกการ์ด: ไม่มีพื้นหลัง ให้ตัวเกมเห็นด้านหลัง แต่ตัวอักษร/การ์ดเด่น ===== */
#ov.cdfree{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
#ov.cdfree #pn{border:0!important;border-image:none!important;background:none!important;box-shadow:none!important;filter:none!important;overflow:visible!important;padding:0 8px!important;width:min(680px,96%)!important}
#ov.cdfree #ot{color:#ffe27a!important;font-size:clamp(18px,4.6vw,46px)!important;white-space:nowrap;font-weight:900;line-height:1.25;margin:34px 0 6px;
 -webkit-text-stroke:3px #1a0d05;paint-order:stroke fill;
 text-shadow:0 4px 0 #3a1c04,0 0 6px #000,0 0 12px #000,0 0 22px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.9),0 0 50px rgba(255,190,60,.6)!important}
@media(max-width:760px){#ov.cdfree #ot{white-space:normal!important;max-width:94vw}}
#ov.cdfree #ob{color:#fff;font-weight:700;font-size:clamp(19px,4.4vw,30px);font-weight:800;line-height:1.55;
 -webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 0 #000,0 0 6px #000,0 0 12px #000,0 0 22px #000,0 0 36px rgba(0,0,0,.95)}
#ov.cdfree #ob div[style*="32px"]{font-size:clamp(46px,12vw,84px)!important;line-height:1.1;letter-spacing:.08em;
 -webkit-text-stroke:3px #2a1802;paint-order:stroke fill;
 text-shadow:0 5px 0 #5a3a05,0 0 8px #000,0 0 18px #000,0 0 34px rgba(0,0,0,.95),0 0 48px rgba(255,200,60,.8)!important;animation:cdStar .7s cubic-bezier(.2,1.4,.4,1) both}
#ov.cdfree #ob>b,#ov.cdfree #ob>div>b{font-size:1.7em;color:#fff6c8}
#ov.cdfree #ob>small,#ov.cdfree #ob>div>small{display:block;color:#f3e8c8;font-size:clamp(14px,3vw,17px);font-weight:700;opacity:1;-webkit-text-stroke:.8px #000;paint-order:stroke fill;text-shadow:0 1px 0 #000,0 0 8px #000,0 0 14px #000}
#ov .cdhint{opacity:.8;margin-top:14px;font-size:14px;animation:cdBlink 1.4s ease-in-out infinite}
#ov.cdfree .cdhint{margin-top:14px;font-size:16px;-webkit-text-stroke:.8px #000;paint-order:stroke fill;color:#ffe9a8;animation:cdBlink 1.4s ease-in-out infinite}
#ov.cdfree .cdcap{font-size:16px;color:#fff;font-weight:700;text-shadow:0 2px 0 #000,0 0 8px #000,0 0 16px #000,0 0 24px rgba(0,0,0,.9)}
#ov.cdfree .cdcap small{color:#ffe9a8}
#ov.cdfree .cdk{filter:drop-shadow(0 0 3px rgba(0,0,0,.95)) drop-shadow(0 10px 18px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(255,200,90,.55))}
#ov.cdfree #ob .cfr,#ov.cdfree #ob .cfr *{-webkit-text-stroke:0;font-weight:inherit;overflow-wrap:anywhere}
#ov.cdfree #ob .cfr{text-shadow:none;overflow:hidden}
#ov.cdfree #ob .cfr b{font-size:clamp(9px,1.7cqw,12px)!important;font-weight:700;color:#fff6de}
#ov.cdfree #ob .cfr em{font-size:clamp(9px,1.7cqw,12px)!important;font-weight:800}
#ov.cdfree #ob .cfr small{font-size:clamp(8px,1.3cqw,9.5px)!important;color:#cdbfa0}
@keyframes cdStar{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes cdBlink{50%{opacity:.35}}



/* ===== Buff card draw: back-face deck -> pick -> flip ===== */
#ob .cdw{position:relative;margin:2px 0 0}
#ob .cdk{position:relative;display:flex;justify-content:center;align-items:center;gap:clamp(4px,1.5cqw,12px);padding:26px 2px 16px;perspective:none}
#ob .cd{position:relative;flex:1 1 0;min-width:0;max-width:clamp(64px,calc((100dvh - 240px)*.69),112px);aspect-ratio:5/7.2;padding:0;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
 transform:translateY(var(--ty,0px)) rotate(var(--rt,0deg));transition:transform .3s cubic-bezier(.2,.8,.3,1),filter .25s,opacity .3s;
 animation:cdIn .75s cubic-bezier(.2,.9,.3,1.15) var(--dl,0ms) backwards;will-change:transform}
#ob .cdk:not(.lock) .cd:hover,#ob .cdk:not(.lock) .cd:focus-visible{transform:translateY(-14px) rotate(0deg) scale(1.08);z-index:3;outline:0}
#ob .cdk:not(.lock):hover .cd:not(:hover){filter:brightness(.72)}
#ob .cd:focus-visible .cbk{outline:2px solid var(--ac);outline-offset:2px}
#ob .cf{display:block;position:relative;width:100%;height:100%;perspective:650px;animation:cdFl 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.7s)}
#ob .ci{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out}
#ob .cbk,#ob .cfr{position:absolute;inset:0;display:block;border-radius:9px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-sizing:border-box}
#ob .cbk{background:radial-gradient(circle at 50% 50%,rgba(240,190,90,.20),transparent 62%),repeating-linear-gradient(45deg,rgba(232,195,106,.08) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(232,195,106,.08) 0 2px,transparent 2px 9px),linear-gradient(160deg,#3a2556,#160d24 72%);
 border:2px solid #c9a24d;box-shadow:inset 0 0 0 3px #120a1c,inset 0 0 0 4px rgba(232,195,106,.55),0 8px 18px rgba(0,0,0,.6);display:grid;place-items:center}
#ob .cbk svg{width:66%;height:auto;filter:drop-shadow(0 0 6px rgba(240,190,90,.55))}
#ob .cbk::before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,240,190,.30) 50%,transparent 65%);transform:translateX(-130%);animation:cdSh 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.35s + 1.4s)}
#ob .cbk::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,236,170,.30),transparent 55%);opacity:0;transition:opacity .2s}
#ob .cdk:not(.lock) .cd:hover .cbk::after{opacity:1}
#ob .cdk:not(.lock) .cd:hover .cbk{border-color:#ffe3a0;box-shadow:inset 0 0 0 3px #120a1c,inset 0 0 0 4px rgba(255,227,160,.8),0 0 20px rgba(240,170,60,.65),0 10px 20px rgba(0,0,0,.6)}
#ob .cfr{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 4px;text-align:center;
 background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--c) 42%,#1b1229),#120b1b 72%);border:2px solid var(--c);box-shadow:inset 0 0 0 3px #120a1c,inset 0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent),0 8px 18px rgba(0,0,0,.6)}
#ob .cfr .cem{font-style:normal;font-size:clamp(26px,5.4cqw,42px);line-height:1;filter:drop-shadow(0 0 8px var(--c))}
#ob .cfr b{display:block;font-size:clamp(10px,1.9cqw,13px);line-height:1.2;color:#fff6de;text-shadow:0 1px 2px #000}
#ob .cfr em{display:block;font-style:normal;font-weight:800;font-size:clamp(10px,1.9cqw,13px);line-height:1.2;color:var(--c);text-shadow:0 1px 2px #000}
#ob .cfr small{display:block;font-size:clamp(8px,1.4cqw,10px);color:#cdbfa0;margin-top:2px}
#ob .cd.pick{z-index:6;transform:translate(var(--dx,0px),-4px) rotate(0deg) scale(1.34);transition:transform .7s cubic-bezier(.2,.9,.25,1.12)}
#ob .cd.pick .cf{animation:none}
#ob .cd.flip .ci{transform:rotateX(0deg) rotateY(180deg);transition:transform 1s cubic-bezier(.3,1.45,.5,1)}
#ob .cd.flip .cfr{animation:cdFlash 1.1s .32s ease-out both,cdGlow 2.2s 1.4s ease-in-out infinite}
#ob .cd.out{opacity:0;pointer-events:none;transform:translateY(54px) rotate(calc(var(--rt,0deg)*3)) scale(.78);transition:transform .5s ease-in var(--od,0ms),opacity .42s ease-in var(--od,0ms)}
#ob .cdk.lock .cd{cursor:default}
#ob .cdcap{min-height:3.3em;margin:2px 0 4px;font-size:14px;line-height:1.5;color:#e6dcc2;transition:opacity .3s}
#ob .cdcap.fade{opacity:0}
#ob .cdcap.show{animation:cdUp .5s ease-out both}
#ob .cdcap small{display:block;color:#b9a9e6}
#ob .cdgo{min-height:92px}
#ob .cdgo .up{animation:cdUp .55s ease-out both}
#ob .cdfx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:8}
#ob .cdfx i{position:absolute;display:block}
#ob .cdfx .r1,#ob .cdfx .r2{left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:3px solid var(--c);box-shadow:0 0 14px var(--c);animation:cdRing .85s ease-out forwards}
#ob .cdfx .r2{border-width:2px;animation-delay:.14s;opacity:0;animation-fill-mode:both}
#ob .cdfx .rays{left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;background:repeating-conic-gradient(rgba(255,232,160,.6) 0 5deg,transparent 5deg 20deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 30%,transparent 72%);mask:radial-gradient(circle,transparent 18%,#000 30%,transparent 72%);animation:cdRays 1.2s ease-out forwards}
#ob .cdfx .sp{left:0;top:0;width:var(--s);height:var(--s);margin:-2px 0 0 -2px;border-radius:50%;background:#fff1bf;box-shadow:0 0 8px 2px var(--c);animation:cdSp var(--t) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes cdIn{from{opacity:0;transform:translate(calc((var(--n) - 1)/2*100% - var(--i)*100%),70px) rotate(0deg) scale(.45)}60%{opacity:1}}
@keyframes cdFl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cdSh{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
@keyframes cdFlash{0%{filter:brightness(2.6) saturate(.4)}100%{filter:none}}
@keyframes cdGlow{0%,100%{box-shadow:inset 0 0 0 3px #120a1c,inset 0 0 0 4px color-mix(in srgb,var(--c) 55%,transparent),0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}50%{box-shadow:inset 0 0 0 3px #120a1c,inset 0 0 0 4px color-mix(in srgb,var(--c) 80%,transparent),0 0 30px var(--c)}}
@keyframes cdUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cdRing{from{transform:scale(.4);opacity:1}to{transform:scale(9);opacity:0}}
@keyframes cdRays{0%{transform:rotate(0) scale(.3);opacity:0}25%{opacity:1}100%{transform:rotate(50deg) scale(1.2);opacity:0}}
@keyframes cdSp{0%{transform:rotate(var(--a)) translateX(0) scale(1);opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) scale(.2);opacity:0}}
@media(prefers-reduced-motion:reduce){#ob .cd,#ob .cf,#ob .cbk::before,#ob .cd.flip .cfr{animation:none!important}#ob .cdfx{display:none}#ob .cd.flip .ci{transition-duration:.25s}#ob .cd.pick{transition-duration:.2s}}


#hbs .hb{width:clamp(30px,5cqw,40px)!important;height:clamp(30px,5cqw,40px)!important;opacity:1}#hbs .hb .ic.ft{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}#hbs .hb:active .ic{transform:scale(.92)}


#hbs{justify-content:flex-end!important}
#bkb{order:0!important;margin:0 auto 0 0!important}#fs{order:1!important;margin:0!important}#mt{order:2!important;margin:0!important}#pb{order:3!important;margin:0!important}
#ov .bk,#ov.twr .bk,#ov.twr #ov .bk{top:6px!important;left:8px!important}


#ov.ttl h1 .logo{display:block;width:min(92%,560px);height:auto;margin:0 auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(110,90,255,.35));pointer-events:none;user-select:none}@media(max-width:600px){#ov.ttl h1 .logo{width:min(66%,260px)}}@media(max-height:430px){#ov.ttl h1 .logo{width:min(60%,300px)}}
/* ===== Game juice v2 ===== */
#irisFx{position:fixed;inset:0;z-index:99;display:none;pointer-events:none;background:#05030a;opacity:0;will-change:opacity}
@keyframes pgIn{from{opacity:0;transform:translateY(8px) scale(.988)}to{opacity:1;transform:none}}
@keyframes pgItem{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#pn.pgIn{animation:pgIn .34s cubic-bezier(.16,.84,.3,1) backwards}
#pn.pgIn #ob>*{animation:pgItem .42s cubic-bezier(.16,.84,.3,1) backwards;animation-delay:calc(var(--i,0)*45ms + 50ms)}
#pn.pgOut{opacity:0;transform:translateY(-4px) scale(.992);transition:opacity .13s ease-in,transform .13s ease-in}
@keyframes tap{0%{transform:scale(1);filter:brightness(1)}38%{transform:translateY(2px) scale(.93);filter:brightness(.7)}72%{transform:translateY(0) scale(1.035);filter:brightness(1.45) drop-shadow(0 0 12px rgba(255,200,90,.85))}100%{transform:scale(1);filter:brightness(1.1)}}
@keyframes tap2{0%{transform:scale(1);filter:brightness(1)}38%{transform:scale(.95);filter:brightness(.72)}75%{transform:scale(1.02);filter:brightness(1.4) drop-shadow(0 0 10px rgba(255,200,90,.8))}100%{transform:scale(1);filter:brightness(1.1)}}
#ob .up.press,#ov .bk.press,#go.press{animation:tap .24s ease-out both}
.tw .fl.press,.rc.press{animation:tap2 .24s ease-out both}
#toastFx{position:fixed;left:50%;bottom:11%;transform:translate(-50%,-14px) scale(.92);background:linear-gradient(180deg,#3a2a66,#1d1631);color:#ffe9b8;border:1px solid #c9973a;border-radius:999px;padding:10px 26px;font-weight:800;font-size:15px;white-space:nowrap;opacity:0;pointer-events:none;z-index:100;box-shadow:0 8px 28px rgba(0,0,0,.65),0 0 24px rgba(240,170,60,.35);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
#toastFx.on{opacity:1;transform:translate(-50%,0) scale(1)}
#ov.seq .fl,#ov.seq .bk,#ov.seq .up{pointer-events:none}
.tw .fl.sp{animation:jxClr 1.1s ease .3s backwards}
@keyframes jxClr{0%{filter:brightness(1)}35%{filter:brightness(1.55) drop-shadow(0 0 16px rgba(120,230,140,.8))}100%{filter:brightness(1)}}
.tw .fl.sp .pl small{display:inline-block;animation:jxStar .75s cubic-bezier(.34,1.56,.64,1) .5s both;color:#ffe9a0;text-shadow:0 0 10px #ffd24a}
@keyframes jxStar{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
.tw .fl.rtl{animation:jxRtl .45s linear}
@keyframes jxRtl{0%,100%{transform:translateX(0) rotate(0)}10%{transform:translateX(-5px) rotate(-.5deg)}25%{transform:translateX(5px) rotate(.5deg)}40%{transform:translateX(-4px) rotate(-.4deg)}55%{transform:translateX(4px) rotate(.4deg)}70%{transform:translateX(-2px)}85%{transform:translateX(2px)}}
.tw .fl.unl{animation:jxUnl .8s cubic-bezier(.34,1.56,.64,1) both}
@keyframes jxUnl{0%{transform:scale(.88);filter:brightness(2.6) drop-shadow(0 0 34px #ffd978)}38%{transform:scale(1.07);filter:brightness(1.55) drop-shadow(0 0 24px rgba(255,210,90,.95))}100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 4px rgba(255,190,70,.3))}}
.tw .fl.unl .pl{animation:jxPl .55s ease .22s both}
@keyframes jxPl{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tw .fl.unl .pl b::after{content:' NEW';color:#ffd24a;font-size:.8em;letter-spacing:.1em}
.jx-lk{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);z-index:4;font-size:clamp(20px,6cqw,36px);line-height:1;filter:drop-shadow(0 2px 6px #000);pointer-events:none;animation:jxLkIn .4s ease-out both}
@keyframes jxLkIn{from{opacity:0;transform:translate(-50%,-30%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.jx-lk.brk{animation:jxLkBrk .65s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes jxLkBrk{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.6) rotate(-14deg);opacity:1}100%{transform:translate(-50%,-150%) scale(1.1) rotate(12deg);opacity:0}}
.jx-rg{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:2/1;border-radius:50%;border:3px solid #ffd978;box-shadow:0 0 22px rgba(255,200,90,.9),inset 0 0 18px rgba(255,200,90,.55);pointer-events:none;z-index:3}
.jx-sh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.jx-sh i{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,240,180,.55),transparent);mix-blend-mode:screen}
.jx-sp{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#ffe08a;box-shadow:0 0 9px #f5b83d;pointer-events:none;z-index:4}
.jx-sp.st{width:auto;height:auto;background:none;box-shadow:none;color:#ffe9a0;font-size:15px;line-height:1;text-shadow:0 0 8px #f5b83d}
@media(prefers-reduced-motion:reduce){#pn.pgIn #ob>*,#pn.pgIn,.tw .fl.unl,.tw .fl.rtl{animation:none}}