/* 2026-10-22: the Google Fonts stylesheet above is only PRELOADED (fetched early, holds nothing up); src/05-core.js applies it
   (fontsApply). A plain <link rel="stylesheet"> here held up the whole page AND app.js while fonts.googleapis.com was slow or
   blocked (15 s in a test). Until the fonts arrive, every text uses the phone's own fonts (the --f-* lists below end with them). */
/* ===== Style A · 霓虹游戏厅 (luckybox-tg/docs/visual-style-a.md): the only player look. The console's old theme / accent
   settings no longer change it (src/11-boot.js applyTheme keeps them as harmless saved values). =====
   Fonts: numbers and the logo in Baloo 2; Chinese headlines in ZCOOL KuaiLe; body text per language, so Vietnamese,
   Malay, Indonesian and English never fall into PingFang (which draws loose accent marks on iPhone). Chinese body text
   uses the phone's own font (no multi-MB Chinese web font on first paint). */
:root{
  color-scheme:dark;
  --bg:#140838; --tg-head:#21104f; --tg-bg:#0e0628; --tg-bar:#0c0526;
  --page-bg:radial-gradient(120% 60% at 50% 0%,#3b1a8f 0%,#1a0b45 45%,#0e0628 100%);
  --surface:#24125c; --surface-2:#2e1872; --surface-3:#3a2188;
  --ink:#FFFFFF; --ink-2:#B7A8E6; --ink-3:#A395D4; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.18);
  --accent:#FF3CAC; --accent-2:#FF9A3C; --on-accent:#FFFFFF; --accent-ink:#FF7CCC; --accent-soft:rgba(255,60,172,.16);
  --btn-a:#FF6BD6; --btn-b:#C21FD0; --btn-sh:#7D0A87;
  --gold:#FFE66D; --gold-2:#FFB703; --gold-sh:#B26B00; --on-gold:#3B1A00; --money:#FFE66D;
  --blue:#2B86C5; --info:#5FB4EF; --dark:#0C0526; --on-dark:#FFFFFF;
  --good:#3DDC84; --good-soft:rgba(61,220,132,.15); --warn:#FFB547; --warn-soft:rgba(255,181,71,.15); --bad:#FF6B8F; --bad-bg:#FF3D71; --bad-soft:rgba(255,61,113,.16);
  --sp:#FFD166; --sp-bg:rgba(255,209,102,.16); --sp-line:rgba(255,209,102,.6);
  --ta:#AB82FF; --ta-bg:rgba(171,130,255,.16); --tb:#4CC9F0; --tb-bg:rgba(76,201,240,.15); --tc:#A79FD0; --tc-line:#7D73A8; --tc-bg:rgba(125,115,168,.2);
  --holo:linear-gradient(120deg,#FFE66D,#FF6BD6,#AB82FF,#4CC9F0,#FFE66D,#FF6BD6);
  --tone-slate:radial-gradient(70% 62% at 50% 44%,rgba(171,130,255,.32),transparent 72%),#2a1668;
  --tone-mist:radial-gradient(70% 62% at 50% 44%,rgba(76,201,240,.32),transparent 72%),#221a6a;
  --tone-sage:radial-gradient(70% 62% at 50% 44%,rgba(61,220,160,.28),transparent 72%),#1f1b62;
  --tone-sand:radial-gradient(70% 62% at 50% 44%,rgba(255,183,3,.30),transparent 72%),#2d1762;
  --tone-rose:radial-gradient(70% 62% at 50% 44%,rgba(255,60,172,.32),transparent 72%),#2c1464;
  --tone-ink:radial-gradient(70% 62% at 50% 44%,rgba(255,230,109,.30),transparent 72%),#28155e;
  --glow-card:0 0 18px -4px rgba(140,90,255,.6); --glow-gold:0 0 22px -2px rgba(255,209,102,.7); --glow-pink:0 0 14px rgba(255,60,172,.6);
  --shadow:0 10px 30px -10px rgba(5,0,20,.7);
  --accent-ink-2:var(--accent-ink); --glow:transparent; --bar:rgba(33,16,79,.94); --bar-2:rgba(12,5,38,.92);
  --hero-a:#2e1872; --hero-b:#1a0b45; --wm:rgba(255,255,255,.05); --scrim:rgba(8,2,26,.78);
  --card-r:18px; --price-ink:var(--money); --head-bg:var(--bar); --head-ink:#fff;
  --f-num:"Baloo 2","Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-latin:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  --f-cjk:"PingFang SC","HarmonyOS Sans SC","MiSans","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC";
  --f-body:var(--f-latin),var(--f-cjk),"Noto Sans Thai",sans-serif;
  --f-display:"Baloo 2",var(--f-latin),var(--f-cjk),sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --r:18px; --r-sm:12px; --r-pill:999px;
}
/* per language: Chinese reads best in the phone's Chinese font with ZCOOL KuaiLe headlines; Thai in Noto Sans Thai */
:root:lang(zh){--f-body:var(--f-cjk),var(--f-latin),sans-serif; --f-display:"Baloo 2","ZCOOL KuaiLe",var(--f-cjk),sans-serif}
/* text marked with its own language (the language list) uses that language's font, e.g. "Tiếng Việt" on a Chinese page */
:not(html)[lang="vi"],:not(html)[lang="en"],:not(html)[lang="ms"],:not(html)[lang="id"]{font-family:var(--f-latin),sans-serif}
:not(html)[lang="zh"]{font-family:var(--f-cjk),var(--f-latin),sans-serif}
:not(html)[lang="th"]{font-family:"Noto Sans Thai",var(--f-latin),sans-serif}
:root:lang(th){--f-body:"Noto Sans Thai",var(--f-latin),var(--f-cjk),sans-serif; --f-display:"Noto Sans Thai",var(--f-latin),sans-serif}
/* Khmer (km, the Cambodia market): Kantumruy Pro for body and headlines (Baloo 2 stays for numbers). Khmer stacks
   vowels and subscript consonants above and below the line, so it needs more line height, and letter-spacing breaks
   its shaping */
:not(html)[lang="km"]{font-family:"Kantumruy Pro",var(--f-latin),sans-serif}
:root:lang(km){--f-body:"Kantumruy Pro",var(--f-latin),var(--f-cjk),sans-serif; --f-display:"Kantumruy Pro",var(--f-latin),sans-serif}
:root:lang(km) body{line-height:1.75}
:root:lang(km) :is(h1,h2,h3,h4,h5,.btn,.sticker,.eyebrow,.pill,.chip,.tag,.bnav button,.notice,.sub,.small,small){line-height:1.5;letter-spacing:0}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
html{background:var(--tg-bg)}
/* the purple glow stays put while the page scrolls (a fixed layer: iPhone ignores background-attachment:fixed) */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--page-bg);pointer-events:none}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;text-align:inherit;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
/* one number style: Baloo 2 for money and big numbers, tabular body figures in tables and lists */
.mono{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:0;line-height:1.1}
.muted{color:var(--ink-3)}
.small{font-size:12.5px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px}
.stack{display:grid;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.sp-between{justify-content:space-between}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.sticker{display:inline-block;justify-self:start;padding:3px 10px;border-radius:var(--r-pill);background:var(--gold);color:var(--on-gold);font-weight:800;font-size:12px}
.money,.gold{color:var(--money)}

/* top bar: gradient logo, language pill and the balance pill with its gold "+" */
.top{position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top,0px);background:var(--head-bg);color:var(--head-ink);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:10px;height:58px}
.brand{display:flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;overflow:hidden;min-height:44px;white-space:nowrap;font-family:"Baloo 2",var(--f-latin),sans-serif;font-weight:800;font-size:23px;line-height:1;letter-spacing:.02em}
/* WOWBOX logo (brand/): the WB emblem + the WOWBOX wordmark, small WebP copies inlined so every build has them */
.brand-mark{width:33px;height:30px;flex:none;background:url(data:image/webp;base64,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) center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(255,107,214,.45))}
#brandName{display:block;flex:none;width:121px;height:20px;background:url(data:image/webp;base64,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) left center/contain no-repeat;font-size:0;color:transparent;overflow:hidden}
.srv-logo{display:block;width:66px;height:60px;margin:0 auto 6px;background:url(data:image/webp;base64,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) center/contain no-repeat;filter:drop-shadow(0 0 14px rgba(255,107,214,.5))}
#searchBox{display:none}
.topnav{display:none;gap:4px}
.topnav button{padding:8px 14px;border-radius:var(--r-pill);font-weight:700;color:var(--ink-2)}
.topnav button:hover{background:rgba(255,255,255,.08);color:#fff}
.topnav button.on{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:var(--glow-pink)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.langbtn{flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;height:44px;min-width:44px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-weight:800;font-size:12.5px;color:#fff;background:rgba(255,255,255,.08)}
.langbtn .flag{font-size:18px;line-height:1}
.bal{flex:none;display:flex;align-items:center;gap:6px;height:44px;padding:0 5px 0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:rgba(255,255,255,.1)}
.bal .num{font-size:18px;color:var(--money);padding-top:2px}
.bal .unit{font-size:12px;color:var(--ink-2)}
.bal .unit:empty{display:none}
.bal .cur{font-family:var(--f-num);font-weight:800;font-size:13px;color:var(--money);margin-right:-3px;padding-top:2px}
.cur{font-family:var(--f-num);font-weight:800;letter-spacing:0}
.bal .btn.primary{width:32px;height:32px;min-height:0;padding:0;border-radius:50%;background:linear-gradient(180deg,var(--gold),var(--gold-2));border:0;color:var(--on-gold);box-shadow:0 3px 0 var(--gold-sh)}
.bal .btn.primary::before{display:none}
.bal .btn svg{width:16px;height:16px}
.bal .bt-t{display:none}
.bal .guest-t{display:none}
.bal.guest{padding:0 16px;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border:0;box-shadow:0 3px 0 var(--btn-sh);font-weight:800;color:#fff}
.bal.guest>*{display:none}
.bal.guest>.guest-t{display:inline}
.notice{background:rgba(255,230,109,.1);color:var(--gold);font-size:11.5px;line-height:1.4;text-align:center;border-bottom:1px solid rgba(255,230,109,.25)}
.notice .wrap{padding-block:6px}
@media (min-width:760px){.topnav{display:flex}.bal .bt-t{display:inline}.bal .btn.primary{width:auto;padding:0 12px;border-radius:var(--r-pill)}}
/* phones: the language pill shrinks to its flag so the balance always fits next to the logo */
@media (max-width:440px){.langbtn{width:44px;padding:0;justify-content:center}.langbtn .lc{display:none}.langbtn .flag{font-size:20px}}
/* fitTop() (src/05-core.js): no room → the wordmark hides (the emblem stays), then the balance and language pill shrink */
.top.tight #brandName{display:none}
.top.tighter .top-in{gap:6px}.top.tighter .top-r{gap:6px}.top.tighter .langbtn{width:38px;min-width:38px;padding:0}.top.tighter .langbtn .flag{font-size:16px}
.top.tighter .bal{padding-left:9px;gap:4px}.top.tighter .bal .num{font-size:14.5px}.top.tighter .bal .cur{font-size:11.5px}
@media (max-width:380px){.brand{font-size:20px}.brand-mark{width:28px;height:25px}#brandName{width:103px;height:17px}.top-in{gap:6px}.top-r{gap:6px}.langbtn{padding:0 8px}.langbtn .flag{font-size:16px}.bal{padding-left:10px}.bal .num{font-size:16px}}

/* bottom nav: dark glass, gold when active */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bar-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-in{display:grid;grid-template-columns:repeat(4,1fr);max-width:600px;margin:0 auto}
.bnav button{display:grid;justify-items:center;gap:2px;min-height:56px;padding:8px 0 6px;font-size:11.5px;font-weight:700;color:#9A8DCC}
.bnav svg{width:23px;height:23px}
.bnav button.on{color:var(--gold)}
.bnav button.on svg{filter:drop-shadow(0 0 6px rgba(255,230,109,.65))}
.page{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
.page.enter{animation:pagein .22s ease}
@keyframes pagein{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (min-width:760px){.bnav{display:none}.page{padding-bottom:48px}}

/* buttons: chunky and pressable (2 px down on tap); every one at least 44 px to touch */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;height:auto;padding:0 16px;border-radius:14px;font-weight:800;white-space:nowrap;background:rgba(255,255,255,.1);color:#fff;border:1px solid var(--line-2);transition:transform .08s,box-shadow .08s,filter .15s,background .15s}
.btn:hover{background:rgba(255,255,255,.16)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border:0;color:#fff;box-shadow:0 3px 0 var(--btn-sh);text-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.primary:hover{filter:brightness(1.08);background:linear-gradient(180deg,var(--btn-a),var(--btn-b))}
.btn.primary:active{box-shadow:0 1px 0 var(--btn-sh)}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-2));border:0;color:var(--on-gold);box-shadow:0 3px 0 var(--gold-sh)}
.btn.gold:active{box-shadow:0 1px 0 var(--gold-sh)}
.btn.dark{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border:0;color:#fff;box-shadow:0 3px 0 var(--btn-sh)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.quiet:hover{background:rgba(255,255,255,.08);color:#fff}
.btn.danger{color:var(--bad);border-color:rgba(255,61,113,.45);background:rgba(255,61,113,.08)}
/* a small button keeps a 44 px touch area around it */
.btn.sm{min-height:36px;padding:0 13px;font-size:13px;border-radius:12px}
.btn.sm::before{content:"";position:absolute;inset:-4px -2px}
.btn.lg{min-height:52px;padding:0 24px;font-size:16px;border-radius:16px}
.btn.block{width:100%}
.btn svg{width:17px;height:17px;flex:none}
.btn[disabled]{background:rgba(255,255,255,.06);border:1px dashed var(--line-2);color:var(--ink-3);box-shadow:none;text-shadow:none;pointer-events:none;filter:none}
.input,.select,.textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:rgba(10,4,30,.45);color:#fff;font-size:15px}
.select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.select option{background:#24125c;color:#fff}
.textarea{height:auto;min-height:72px;padding:10px 14px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:rgba(183,168,230,.5);font-style:italic;font-weight:400}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input.sm,.select.sm{height:36px;font-size:13px;padding:0 10px}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field .hint{font-size:12px;color:var(--ink-3)}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink-2)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.14);position:relative;transition:background .15s;flex:none}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.switch input:checked+i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.switch input:checked+i::after{transform:translateX(18px)}
.switch input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
/* segment buttons (tabs inside a page) */
.seg{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid var(--line);gap:2px;flex-wrap:wrap;max-width:100%}
.seg button{position:relative;min-height:38px;padding:0 14px;border-radius:var(--r-pill);font-size:13.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.seg button.on{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:var(--glow-pink)}
/* small toggles keep a 44 px touch area around them */
.seg button::after,.cd-sw button::after{content:"";position:absolute;inset:-4px -1px}
/* page tabs with 2–3 choices: equal columns that may wrap their words instead of the whole pill */
.seg.full{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;border-radius:18px}
.seg.full button{white-space:normal;line-height:1.2;padding:4px 8px;text-align:center}
/* payment methods: an even grid instead of a pill that wraps */
.seg.pay-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));width:100%;border-radius:18px}
.seg.pay-seg button{white-space:normal;line-height:1.2;padding:4px 10px}

/* category chips */
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;min-height:44px;padding:0 16px;border-radius:var(--r-pill);font-weight:800;color:var(--ink-2);border:1px solid var(--line-2);background:rgba(255,255,255,.06)}
.tabs button:hover{color:#fff}
.tabs button.on{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;box-shadow:var(--glow-pink)}

/* rarity chips & pills */
.tier{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 6px;border-radius:7px;font-family:var(--f-num);font-weight:800;font-size:12px;line-height:1;padding-top:1px;border:1px solid transparent}
.tier.SP{background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00;border-color:transparent}
.tier.A{background:var(--ta-bg);color:var(--ta);border-color:rgba(171,130,255,.5)} .tier.B{background:var(--tb-bg);color:var(--tb);border-color:rgba(76,201,240,.45)} .tier.C{background:var(--tc-bg);color:var(--tc);border-color:rgba(125,115,168,.6)}
.pill{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:0 9px;border-radius:var(--r-pill);font-size:12px;font-weight:700;background:rgba(255,255,255,.1);color:var(--ink-2);white-space:nowrap}
.pill.good{background:var(--good-soft);color:var(--good)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.accent{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:800}
.pill.gold{background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00;font-weight:800}
.pill.blue{background:rgba(76,201,240,.18);color:var(--tb);font-weight:800}

/* product thumbs: real photos are the hero; drawn art sits on the same dark tile */
.thumb{position:relative;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--tone-slate);color:var(--ink-2);overflow:hidden;flex:none}
.thumb svg{width:62%;height:62%}
.thumb.has-art svg{width:100%;height:100%}
.thumb img{width:100%;height:100%;object-fit:cover}
.tone-slate{background:var(--tone-slate)} .tone-sand{background:var(--tone-sand)} .tone-sage{background:var(--tone-sage)} .tone-mist{background:var(--tone-mist)} .tone-rose{background:var(--tone-rose)} .tone-ink{background:var(--tone-ink)}
/* a photo that fails to load is swapped for the item's drawing or the LuckyBox star (src/05-core.js), never a broken icon */
img.img-x{visibility:hidden}
.img-fb{position:absolute;inset:0;display:grid;place-items:center;background:var(--tone-slate)}
.img-fb svg{width:64%;height:64%;max-width:160px;max-height:160px}
/* ===== Style A: pages, panels, lists, pop-ups, the draw reveal and results ===== */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* guide */
.guide-link{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--accent-soft);border:1px solid rgba(255,60,172,.35);text-align:left;font-size:13px}
.guide-link svg{width:18px;height:18px;color:var(--accent-ink);flex:none}
.guide-link .gl-t{flex:1;min-width:0}
.guide-link .gl-a{color:var(--accent-ink);font-weight:800;white-space:nowrap}
.g-toc{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:16px;padding-bottom:4px}
.g-toc::-webkit-scrollbar{display:none}
.g-toc button{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.06);font-weight:800;font-size:13px}
.g-toc .num{color:var(--gold);font-size:16px}
.g-sec{margin-top:16px;padding:18px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(171,130,255,.3);box-shadow:var(--glow-card);scroll-margin-top:80px}
.g-head{display:flex;gap:14px;align-items:flex-start}
.g-no{font-size:40px;line-height:.9;color:var(--gold);text-shadow:0 0 14px rgba(255,230,109,.4)}
.g-head h2{font-family:var(--f-display);font-size:22px;font-weight:800}
:root:lang(zh) .g-head h2{font-weight:400;font-size:24px}
.g-head p{margin:4px 0 0;color:var(--ink-2)}
.g-block{margin-top:16px}
.g-block h4{margin:0 0 8px;font-size:14px;font-weight:800}
.g-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g-steps li{display:flex;gap:10px;padding:12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.g-n{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:#fff;display:grid;place-items:center;font-size:15px}
.g-steps b{display:block;font-size:14px}
.g-steps p{margin:2px 0 0;color:var(--ink-2);font-size:13px;line-height:1.6}
.g-list{margin:0;padding-left:18px;display:grid;gap:7px;color:var(--ink-2);font-size:13px;line-height:1.6}
.g-list li::marker{color:var(--accent-ink)}
.g-list b{color:#fff}
.g-callout{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:rgba(255,230,109,.08);border:1px solid rgba(255,230,109,.35)}
.g-callout svg{width:18px;height:18px;color:var(--gold);flex:none;margin-top:2px}
.g-callout p{margin:0;font-size:13px;line-height:1.6}
.g-faq{display:grid;gap:8px}
.g-faq details{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:0 14px}
.g-faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.g-faq p{margin:0 0 12px;color:var(--ink-2);font-size:13px;line-height:1.6}
.g-toc button svg{width:16px;height:16px;color:var(--accent-ink);flex:none}
/* the owner's rules / info pages (ops-0002.md §18): neon cards at the top of the guide, small links on the home page */
.g-pages{display:grid;gap:10px;margin-top:16px}
.g-page{border-radius:var(--r);background:var(--surface);border:1px solid rgba(255,60,172,.35);box-shadow:var(--glow-card);scroll-margin-top:80px;overflow:hidden}
.g-page > summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;cursor:pointer;list-style:none;font-size:16px}
.g-page > summary::-webkit-details-marker{display:none}
.g-page-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.g-page-ic svg{width:20px;height:20px}
.g-page summary b{flex:1;min-width:0;font-weight:800;overflow-wrap:anywhere}
.g-page-c{display:grid;place-items:center;flex:none}
.g-page-c svg{width:18px;height:18px;color:var(--ink-2);transition:transform .2s}
.g-page[open] .g-page-c svg{transform:rotate(180deg)}
.g-page-b{padding:0 16px 16px;font-size:14px;line-height:1.7;color:var(--ink-2);overflow-wrap:anywhere}
.g-page-one .g-page-b{padding:16px}
.g-page-b h3{font-size:17px;margin:14px 0 6px;color:#fff;font-weight:800}
.g-page-b h4{font-size:15px;margin:12px 0 4px;color:var(--gold);font-weight:800}
.g-page-b p{margin:0 0 10px}
.g-page-b ul,.g-page-b ol{margin:0 0 10px;padding-left:20px;display:grid;gap:4px}
.g-page-b li::marker{color:var(--accent-ink)}
.g-page-b b{color:#fff}
.pg-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pg-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(255,255,255,.06);font-size:13px;font-weight:700}
.pg-link svg{width:16px;height:16px;color:var(--accent-ink);flex:none}
.pg-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (prefers-reduced-motion:reduce){.g-page-c svg{transition:none}}
.bn-dots i{transition:width .2s}
.empty{display:grid;justify-items:center;gap:12px;padding:36px 16px;text-align:center;color:var(--ink-2);background:rgba(255,255,255,.04);border:1.5px dashed rgba(171,130,255,.35);border-radius:var(--r);font-weight:600}
.empty svg{width:44px;height:44px;color:var(--ta);filter:drop-shadow(0 0 10px rgba(171,130,255,.5))}

/* page heads, back button, panels */
.crumb{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--ink-3);font-size:13px;min-width:0}
.crumb button{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding-right:10px;color:#fff;font-weight:800}
.crumb svg{width:18px;height:18px}
.crumb span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail{display:grid;gap:12px;margin-top:12px}
.detail>*{min-width:0}
@media (min-width:900px){.detail{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}
.panel{background:var(--surface);border:1px solid rgba(171,130,255,.28);border-radius:var(--r);padding:16px;box-shadow:0 0 18px -8px rgba(140,90,255,.55)}
.panel+.panel{margin-top:12px}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.panel-h h3{font-size:16px;font-weight:800}
.panel-h small{font-size:12px;color:var(--ink-3);text-align:right}
.pagehead{margin-top:6px;display:grid;gap:2px}
.pagehead h1{font-family:var(--f-display);font-size:26px;font-weight:800;line-height:1.15}
:root:lang(zh) .pagehead h1{font-weight:400;font-size:28px}
.pagehead p{margin:0;color:var(--ink-2);font-size:13px}
.alert{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;font-weight:600}
.alert svg{width:16px;height:16px;flex:none;margin-top:1px}
.alert.bad{background:var(--bad-soft);color:var(--bad)}
.alert.warn{background:var(--warn-soft);color:var(--warn)}
.alert.good{background:var(--good-soft);color:var(--good)}
.form-grid{display:grid;gap:12px}
@media (min-width:560px){.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid .full{grid-column:1/-1}}
.sumlist{display:grid;gap:0}
.sumlist div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.sumlist div:first-child{border-top:0}
.sumlist .mono{color:var(--money);font-family:var(--f-num);font-weight:800}
.iconbtn{width:44px;height:44px;border-radius:12px;display:inline-grid;place-items:center;color:var(--ink-2);flex:none}
.iconbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.iconbtn svg{width:19px;height:19px}

/* box page */
.dhero{display:grid;gap:14px}
@media (min-width:600px){.dhero{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center}}
.dhero>.thumb{width:100%;max-width:100%;aspect-ratio:1.15;border-radius:16px;border:1.5px solid rgba(171,130,255,.45);box-shadow:var(--glow-card)}
.dhero>.thumb.sp{border-color:var(--sp);box-shadow:var(--glow-gold)}
.dhero h1{font-family:var(--f-display);font-size:27px;font-weight:800;line-height:1.15}
:root:lang(zh) .dhero h1{font-weight:400;font-size:30px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}
.facts div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:2px}
.facts small{font-size:12px;color:var(--ink-2)}
.facts .num{font-size:24px;color:var(--money)}
.facts div+div .num{color:var(--sp)}
.oddsbar{display:flex;height:10px;border-radius:5px;overflow:hidden;background:rgba(255,255,255,.08);gap:2px}
.oddsbar i{display:block;height:100%}
.odds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.odds div{display:grid;gap:4px;justify-items:start}
.odds .mono{font-size:13.5px}
.rtp-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.rtp-line b{font-family:var(--f-num);font-weight:800;font-size:16px;color:#fff;white-space:nowrap}
.rtp-line small{display:block;font-size:12px;color:var(--ink-3)}
.pity-track{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:10px}
.pity-track i{display:block;height:100%;min-width:6px;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px rgba(255,60,172,.6)}
.plist{display:grid}
.prow{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.prow:first-child{border-top:0;padding-top:0}
.prow .thumb{width:56px;height:56px}
.prow .nm{font-weight:700;line-height:1.35}
.prow .sub{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.prow .sub b{font-family:var(--f-num);font-weight:800;color:var(--money)}
.prow .pr{text-align:right;font-family:var(--f-num);font-weight:800;font-size:15px}
.prow .pr small{display:block;font-family:var(--f-body);font-weight:500;font-size:11px;color:var(--ink-3)}
.recs{display:grid;font-size:13px}
.recs div{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);min-width:0}
.recs div:first-child{border-top:0}
.recs .t{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12px}
.recs .m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* top-up history: the amount and the bonus each stay whole (never cut inside a number) and wrap as pieces; the points sit on their own line */
.recs.tp .m{overflow:visible;white-space:normal;line-height:1.4}
.recs.tp .m .a{white-space:nowrap}
.recs.tp .m small{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap}
.drawpanel{display:none}
@media (min-width:900px){.drawpanel{display:grid;gap:12px;position:sticky;top:76px}}
.dopt{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;padding:12px 14px;border:1px solid var(--line-2);border-radius:16px;background:rgba(255,255,255,.08);transition:transform .08s,filter .15s}
.dopt:active{transform:translateY(2px)}
.dopt b{font-weight:800}
.dopt .num{font-size:20px;text-align:right;color:var(--money)}
.dopt small{grid-column:1/-1;font-size:12px;color:var(--ink-2)}
.dopt.main{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border-color:transparent;color:#fff;box-shadow:0 3px 0 var(--btn-sh)}
.dopt.main .num{color:#fff}
.dopt.main small{color:rgba(255,255,255,.8)}
.dopt .off{position:absolute;top:-8px;right:-4px;padding:0 6px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-2));color:var(--on-gold);font:800 10.5px/1.6 var(--f-num);box-shadow:0 2px 0 var(--gold-sh)}
.drawbar{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--bar-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:12px 12px calc(10px + env(safe-area-inset-bottom,0px))}
.drawbar .in{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:8px;max-width:600px;margin:0 auto}
.drawbar .dopt{grid-template-columns:1fr;justify-items:center;text-align:center;min-height:56px;padding:6px 2px;gap:0;border-radius:14px}
/* labels and prices never leave their button: long local prices (Rp1.415.000, 2.445.000 ₫) start smaller (long / xlong) and
   fitText() (src/05-core.js, after every render) shrinks anything still wider than the button, down to 9px */
.drawbar .dopt b{display:block;font-size:clamp(11.5px,3.3vw,13.5px);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.drawbar .dopt .num{display:block;max-width:100%;overflow:hidden;font-size:clamp(14px,4.4vw,18px);text-align:center;white-space:nowrap}
.drawbar .dopt .num.long{font-size:clamp(12px,3.7vw,16px)}
.drawbar .dopt .num.xlong{font-size:clamp(10.5px,3.2vw,14px);letter-spacing:-.01em}
.drawbar .dopt small{display:none}
@media (min-width:900px){.drawbar{display:none}}

/* warehouse rows: the whole row selects; the buy-back price sits on its own line */
.lrow{position:relative;display:grid;grid-template-columns:28px 64px minmax(0,1fr) 44px;gap:10px;align-items:center;padding:10px 6px 10px 12px;background:var(--surface);border:1.5px solid rgba(171,130,255,.28);border-radius:16px;width:100%;text-align:left;cursor:pointer}
.lrow.ro{grid-template-columns:64px minmax(0,1fr) 44px;cursor:default}
.lrow.on{border-color:var(--accent);box-shadow:var(--glow-pink);background:linear-gradient(90deg,rgba(255,60,172,.14),var(--surface) 60%)}
.lrow .thumb{width:64px;height:64px;border-radius:12px}
.lrow .nm{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:800;line-height:1.3;font-size:14px;overflow-wrap:anywhere}
/* QA round 3: the source label wraps (up to 3 lines) instead of "…"; the red packet's "sell only" is its own tag */
.lrow .meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;margin-top:3px;font-size:12px;color:var(--ink-2);min-width:0}
.lrow .meta .from{min-width:0;flex:1 1 8em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}
.lrow .meta .sell-only{flex:none;white-space:nowrap;font-size:11px;padding:1px 7px}
.lrow .bb{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-2)}
.lrow .bb b{font-family:var(--f-num);font-weight:800;font-size:15px;color:var(--money)}
.check{width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff}
.check.on{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));border-color:transparent}
.check svg{width:14px;height:14px}
.actbar{position:fixed;left:0;right:0;z-index:29;bottom:calc(64px + env(safe-area-inset-bottom,0px));padding-inline:12px}
@media (min-width:760px){.actbar{bottom:20px}}
.actbar .in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-radius:18px;background:rgba(46,24,114,.97);border:1px solid var(--line-2);box-shadow:0 10px 30px rgba(5,0,20,.6)}
.actbar .sum{flex:1;min-width:0;font-size:12px;line-height:1.35;color:var(--ink-2)}
.actbar .sum .num{display:block;font-size:19px;color:var(--money)}
.menu{background:var(--surface);border:1px solid rgba(171,130,255,.28);border-radius:var(--r);overflow:hidden}
.menu button,.menu a{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 16px;border-top:1px solid var(--line);font-weight:700;color:#fff;text-decoration:none}
.menu button:first-child,.menu a:first-child{border-top:0}
.menu button:hover{background:rgba(255,255,255,.05)}
.menu svg{width:20px;height:20px;color:var(--accent-ink);flex:none}
.menu .r{margin-left:auto;color:var(--ink-2);font-weight:500;font-size:12.5px;line-height:1.3;text-align:right;min-width:0;max-width:52%;overflow-wrap:break-word}   /* wraps instead of "Pahami dalam 1 hala…" (QA round 2) */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.kv div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.kv small{font-size:12px;color:var(--ink-2)}
.kv .num{font-size:22px;line-height:1.15;white-space:nowrap;min-width:0}   /* money never breaks ("550.000 ₫" stays one piece); fitAll() shrinks it */
/* "me" page: wallet card on top */
.wcard{position:relative;display:grid;gap:12px;margin-top:12px;padding:16px;border-radius:20px;overflow:hidden;background:linear-gradient(120deg,#FF3CAC,#784BA0 55%,#2B86C5);box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 10px 30px -8px rgba(255,60,172,.7)}
.wcard small{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.88)}
.wcard .big{font-family:var(--f-num);font-weight:800;font-size:36px;line-height:1;color:var(--gold);text-shadow:0 2px 0 rgba(0,0,0,.2)}
.wcard .wc-row{display:flex;gap:8px}
.wcard .wc-row .btn{flex:1}
.wcard .btn:not(.gold){background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35)}
.wcard .wc-stats{display:flex;gap:16px;font-size:12px;color:rgba(255,255,255,.9)}
.wcard .wc-stats b{font-family:var(--f-num);font-size:15px;color:#fff;margin-left:3px}
.lvcard{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;text-align:left}
.lvcard .lv-n{font-family:var(--f-num);font-weight:800;font-size:34px;line-height:1;color:var(--gold);text-shadow:0 0 14px rgba(255,230,109,.35)}
.task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 14px 14px 16px;background:var(--surface);border:1px solid rgba(171,130,255,.28);border-radius:var(--r)}
.task.ready{border-color:var(--sp);box-shadow:var(--glow-gold)}
.task .btn{min-width:84px}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px;max-width:240px}
.bar i{display:block;height:100%;min-width:4px;border-radius:4px;background:linear-gradient(90deg,var(--good),#7CF2B0)}
.rank{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;background:var(--surface);border:1px solid rgba(171,130,255,.25);border-radius:16px}
.rank .pos{font-family:var(--f-num);font-weight:800;font-size:20px;color:var(--ink-3);text-align:center}
.rank:nth-child(1) .pos{color:var(--gold)} .rank:nth-child(2) .pos{color:#E3E6F0} .rank:nth-child(3) .pos{color:#FFB37A}
.rank:nth-child(1){border-color:var(--sp);box-shadow:var(--glow-gold)}
.rank .av{width:36px;height:36px;border-radius:50%;background:var(--surface-3);display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff}
.rank .num{color:var(--money);font-size:17px}
.rank.me{border-color:var(--accent);box-shadow:var(--glow-pink)}
.code{font-family:var(--f-mono);font-size:26px;font-weight:700;letter-spacing:.1em;text-align:center;padding:14px;border:1.5px dashed rgba(255,230,109,.5);border-radius:var(--r-sm);background:rgba(255,230,109,.08);color:var(--gold);user-select:all}
.pkgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.pkgs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pkg{position:relative;display:grid;gap:2px;min-width:0;padding:14px 12px;border:1.5px solid rgba(171,130,255,.35);border-radius:16px;background:var(--surface-2);text-align:left;transition:transform .08s}
.pkg:active{transform:translateY(2px)}
.pkg .num{font-size:26px;line-height:1.05;color:var(--money)}
.pkg .num{white-space:nowrap;min-width:0}
.pkg .num.long{font-size:19px}
.pkg .bonus{font-size:12px;color:var(--accent-ink);font-weight:800;min-height:18px}
.pkg .pay{margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-weight:900}
.pkg.on{border-color:var(--gold);box-shadow:var(--glow-gold);background:linear-gradient(180deg,rgba(255,230,109,.14),var(--surface-2))}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.citem{position:relative;display:grid;justify-items:center;gap:6px;padding:10px 8px 12px;border:1.5px solid rgba(171,130,255,.28);border-radius:14px;background:var(--surface);text-align:center;min-width:0}
.citem .thumb{width:72px;height:64px}
.citem b{font-size:12px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.citem .mono{font-size:12px;color:var(--money)}
.citem.on{border-color:var(--accent);box-shadow:var(--glow-pink)}
.citem.on::after{content:"";position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
table.t{width:100%;border-collapse:collapse;font-size:13px;background:transparent}
table.t th{text-align:left;font-weight:700;font-size:12px;color:var(--ink-2);background:rgba(255,255,255,.05);padding:9px 12px;white-space:nowrap;border-bottom:1px solid var(--line)}
table.t td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
table.t tr:first-child td{border-top:0}
table.t .r{text-align:right}
table.t td.mono{white-space:nowrap}
.t tr.aff-on td{background:var(--accent-soft)}
/* on phones a table becomes a list of small cards: each cell shows its column name (data-l) */
@media (max-width:599.98px){
  .table-wrap.cards{border:0;overflow:visible}
  .table-wrap.cards table.t,.table-wrap.cards tbody,.table-wrap.cards tr,.table-wrap.cards td{display:block;width:100%}
  .table-wrap.cards tr:first-child:has(th){display:none}
  .table-wrap.cards th{display:none}
  .table-wrap.cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;padding:12px 14px;margin-top:8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
  .table-wrap.cards tr.aff-on{border-color:var(--accent);box-shadow:var(--glow-pink);background:var(--accent-soft)}
  .table-wrap.cards tr.aff-on td{background:none}
  .table-wrap.cards td{padding:0;border:0;text-align:left!important;white-space:normal!important;min-width:0;overflow-wrap:anywhere}
  .table-wrap.cards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink-3)}
  .table-wrap.cards td.wide{grid-column:1/-1;font-size:14px}
  .table-wrap.cards td.act{grid-column:1/-1}
  .table-wrap.cards td.act .btn{width:100%}
}
/* level ladder: ten ranks as chips */
.ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ladder div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 8px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13px;font-weight:700;min-width:0}
/* long rank names (Đại cao thủ, Huyền thoại) are never cut: the level range moves under the name when both do not fit */
.ladder div span:first-child{min-width:0;overflow-wrap:anywhere}
.ladder div small{flex:none;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ladder div.on{border-color:var(--gold);background:rgba(255,230,109,.12);color:var(--gold);box-shadow:var(--glow-gold)}
/* withdraw rules folded away */
.rules{margin-top:12px;border-top:1px solid var(--line)}
.rules summary{min-height:44px;display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;color:var(--ink-2);font-size:13px;list-style:none}
.rules summary::-webkit-details-marker{display:none}
.rules summary::after{content:"›";margin-left:auto;font-size:18px;transition:transform .15s}
.rules[open] summary::after{transform:rotate(90deg)}
.rules p,.rules li{font-size:12.5px;color:var(--ink-2);line-height:1.6}
.ship-eta{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;border-radius:12px;background:rgba(76,201,240,.1);border:1px solid rgba(76,201,240,.3);font-size:12.5px;color:#CDEFFF;line-height:1.5}
.ship-eta svg{width:18px;height:18px;flex:none;color:var(--tb)}

/* pop-ups: sheets with 24 px top corners */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;overflow-y:auto;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{position:relative;width:100%;max-width:440px;display:grid;gap:14px;padding:22px 18px 18px;border-radius:24px;background:linear-gradient(180deg,#2e1872,#24125c);border:1px solid rgba(171,130,255,.4);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 20px 50px rgba(5,0,20,.7),0 0 30px -10px rgba(140,90,255,.7);animation:rise .2s ease}
@media (max-width:599.98px){.modal:has(>.sheet){place-items:end center;padding:0}.modal>.sheet{max-width:none;border-radius:24px 24px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));max-height:92vh;overflow-y:auto}}
.sheet.wide{max-width:640px}
.sheet h2{font-family:var(--f-display);font-size:21px;font-weight:800;padding-right:40px;line-height:1.25}
:root:lang(zh) .sheet h2{font-weight:400;font-size:23px}
.sheet p{margin:0;color:var(--ink-2)}
.sheet p b{color:#fff}
.xbtn{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);z-index:3}
.xbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.xbtn svg{width:18px;height:18px}
.topup-list{display:grid;gap:8px}
.topup-list button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:10px 14px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.07);font-weight:700;text-align:left}
.topup-list button:hover{border-color:var(--accent)}
.topup-list .num{font-size:19px;color:var(--money)}
/* draw confirm with the best coupon already applied */
.cp-box{display:grid;gap:6px;padding:14px;border-radius:16px;background:rgba(255,230,109,.08);border:1.5px dashed rgba(255,230,109,.5)}
.cp-line{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;color:var(--ink-2)}
.cp-line b{font-family:var(--f-num);font-weight:800;font-size:16px;color:#fff;white-space:nowrap}
.cp-line s{font-family:var(--f-num);color:var(--ink-3)}
.cp-line.cp b{color:var(--good)}
.cp-line.pay{padding-top:6px;border-top:1px solid rgba(255,230,109,.25);color:#fff;font-weight:800}
.cp-line.pay b{font-size:24px;color:var(--money)}

/* ===== the draw reveal (src/07-actions.js; owner 2026-10-22 "开盒还不够突出" → redesigned): wait (the card floats) → charge (it
   shakes and swells, light leaks from its seam and rim, neutral white, the screen dims) → hot (the light takes the REAL tier's
   colour: soft white C / balance back, blue B, violet A, gold SP) → open (flash, shock ring, sparks, rays and glints for B+, the
   flip with a shine sweep, the value counting up). ×N: a quick stagger, then the best one highlighted and (B+) brought forward.
   2026-10-23 build-up (the same for every draw until hot; --bu = ms from the answer to hot, set by rvPlay): the card comes closer
   (1 → 1.12), the shake speeds up (charge → b2 → b3), the seam light and rim grow, the vignette closes in, a soft pulse of light
   behind the card on every heartbeat tick (p1 / p2: two identical animations, so each beat restarts it without a reflow).
   Transforms + opacity only; the stage is opaque, so no backdrop blur behind it. ===== */
.modal.rv-wrap{background:radial-gradient(85% 60% at 50% 42%,#2b1173 0,#13072f 58%,#07021a 100%);padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.rv{position:relative;display:grid;justify-items:center;align-content:center;gap:16px;width:100%;min-height:100vh;min-height:100dvh;padding:24px 16px;color:#fff;text-align:center;cursor:pointer;overflow:hidden;
  --c:#ECE8F8;--c2:rgba(236,232,248,.4);--fo:.45;--ro:0}
.rv.t-B{--c:#4CC9F0;--c2:rgba(76,201,240,.5);--fo:.8;--ro:.5} .rv.t-A{--c:#B48CFF;--c2:rgba(171,130,255,.58);--fo:.95;--ro:.75} .rv.t-SP{--c:#FFD166;--c2:rgba(255,209,102,.72);--fo:1;--ro:1}
.rv.v{--fo:.25}
/* the screen's edges darken while it builds up — the vignette closes in (a larger layer that scales down) — and open up after */
.rv::before{content:"";position:absolute;inset:-25%;pointer-events:none;background:radial-gradient(40% 29% at 50% 44.7%,transparent 32%,rgba(3,0,12,.9) 100%);
  opacity:0;transform:scale(1.4);transform-origin:50% 44.7%;transition:opacity .5s,transform .6s}
.rv.charge::before{opacity:.95;transform:scale(1);transition:opacity var(--bu,900ms) ease-in,transform var(--bu,900ms) cubic-bezier(.45,0,.85,.6)}
.rv.hot::before{opacity:1;transform:scale(.9);transition:opacity .3s,transform .5s ease-in}
.rv.open::before{opacity:.3;transform:scale(1.25);transition:opacity .9s,transform .9s}
.rv-hint{position:relative;z-index:3;font-size:13px;font-weight:600;color:var(--ink-2);min-height:20px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
/* the play screens' burst (rvBurst, src/29-play.js) */
.rv-burst{position:absolute;left:50%;top:44%;width:0;height:0;z-index:2;pointer-events:none}
.rv-burst i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:3px;background:var(--c);opacity:0}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(540deg) scale(.4)}}
/* one box: a big mystery card */
.rv-one{position:relative;z-index:3;width:min(70vw,280px,calc(44vh * .75));aspect-ratio:3/4;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.rv.wait .rv-one,.rv.charge .rv-one{animation:rvIn .45s cubic-bezier(.2,.9,.3,1) both}
/* the card comes slowly closer until the hot beat (ease-in: faster and faster), a little more once hot, a short inhale, the pop */
.rv.charge .rv-one{transform:scale(1.12);transition:transform var(--bu,900ms) cubic-bezier(.4,0,.7,.7)}
.rv.charge.hot .rv-one{transform:scale(1.14);transition:transform .4s ease-out}
.rv.charge.inhale .rv-one{transform:scale(1.03);transition:transform .1s ease-in}
.rv-one.go{transform:none;animation:rvPop .6s cubic-bezier(.2,.9,.3,1.25)}
/* the rise-in uses translate / scale (not transform), so it can keep running while the build-up's transform transition starts */
@keyframes rvIn{from{opacity:0;translate:0 26px;scale:.9}}
@keyframes rvPop{0%{transform:scale(1.03)}35%{transform:scale(1.1)}100%{transform:none}}
/* motes of light drawn in towards the card while it builds up (they vanish behind it), faster near the end; the tier's colour once hot */
.rv-gather{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .4s}
.rv-gather i{position:absolute;left:-1.5px;top:-11px;width:3px;height:22px;border-radius:3px;background:linear-gradient(to bottom,#fff,var(--c) 40%,transparent);opacity:0}
.rv.charge .rv-gather{opacity:1}
.rv.charge .rv-gather i{animation:rvGather .95s cubic-bezier(.55,0,.9,.6) infinite;animation-delay:var(--d)}
.rv.charge.b3 .rv-gather i{animation-duration:.62s}
.rv.lite .rv-gather i:nth-child(2n){display:none}
.rv-one.go .rv-gather{opacity:0;transition-duration:.1s}
@keyframes rvGather{0%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scaleY(.4)}30%{opacity:.9}100%{opacity:0;transform:rotate(var(--a)) translateY(-70px) scaleY(1.3)}}
/* the heartbeat: a soft pulse of light behind the card and a tiny thump of the card on every tick */
.rv-beat{position:absolute;inset:-16%;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(236,232,248,.2) 55%,transparent)}
.rv-one.p1 .rv-beat{animation:rvBeat1 .36s ease-out} .rv-one.p2 .rv-beat{animation:rvBeat2 .36s ease-out}
.rv-one.p1 .rv-card{animation:rvThump1 .26s ease-out} .rv-one.p2 .rv-card{animation:rvThump2 .26s ease-out}
@keyframes rvBeat1{0%{opacity:0;transform:scale(.92)}28%{opacity:.6}100%{opacity:0;transform:scale(1.12)}}
@keyframes rvBeat2{0%{opacity:0;transform:scale(.92)}28%{opacity:.6}100%{opacity:0;transform:scale(1.12)}}
@keyframes rvThump1{0%,100%{scale:1}30%{scale:1.035}}
@keyframes rvThump2{0%,100%{scale:1}30%{scale:1.035}}
.rv-one.go .rv-card{animation:none}
.rv-shk{position:absolute;inset:0;perspective:1100px}
.rv.wait .rv-shk{animation:rvFloat 2.6s ease-in-out infinite}
.rv.charge .rv-shk{animation:rvShake .3s linear infinite}
.rv.charge.b2 .rv-shk{animation-duration:.19s}
.rv.charge.b3 .rv-shk{animation:rvShakeB .13s linear infinite}
.rv.charge.hot .rv-shk,.rv.hot .rv-shk{animation:rvShake2 .1s linear infinite}
@keyframes rvFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-7px) rotate(.6deg)}}
@keyframes rvShake{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-1.2deg)}75%{transform:translate(2px,-1px) rotate(1.2deg)}}
@keyframes rvShakeB{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2.8px,1.2px) rotate(-1.7deg)}75%{transform:translate(2.8px,-1.2px) rotate(1.7deg)}}
@keyframes rvShake2{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-3.5px,1.5px) rotate(-2.2deg)}75%{transform:translate(3.5px,-1.5px) rotate(2.2deg)}}
.rv-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,0,.2,1.12)}
.rv-face{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.rv-back{background:radial-gradient(70% 60% at 50% 38%,rgba(255,107,214,.45),transparent 70%),linear-gradient(160deg,#3b1a8f,#1a0b45);border:2px solid rgba(255,255,255,.25);box-shadow:0 0 30px -4px var(--c2),inset 0 0 0 6px rgba(255,255,255,.05)}
.rv-back{align-content:center;justify-items:center;gap:4px;background:radial-gradient(70% 60% at 50% 38%,rgba(255,107,214,.45),transparent 70%),repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px),linear-gradient(160deg,#3b1a8f,#1a0b45)}
.rv-back svg{position:absolute;left:50%;bottom:9%;width:22%;height:auto;transform:translateX(-50%);filter:drop-shadow(0 0 8px rgba(255,214,90,.6))}
.rv-q{font:800 96px/1 var(--f-num);color:var(--gold);text-shadow:0 4px 0 #B26B00,0 0 24px rgba(255,214,90,.7);margin-top:-14%}
.rv-one .rv-q{font-size:min(29vw,112px)}
/* the rim light: the card's edges glow brighter as it charges (the WOW card's back too, 36-wow.css) */
.rv-back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 0 26px 2px rgba(255,255,255,.4);opacity:0;transition:opacity .45s}
.rv.charge .rv-back::after{opacity:.85;transition:opacity var(--bu,900ms) ease-in} .rv.hot .rv-back::after{opacity:1;transition-duration:.25s}
.rv-front{transform:rotateY(180deg);background:var(--tone-slate);border:3px solid var(--c);box-shadow:0 0 40px -2px var(--c2)}
.rv-front img{width:100%;height:100%;object-fit:cover}
.rv-front>svg{width:92%;height:auto}
.rv-front .tier{position:absolute;left:10px;top:10px;height:24px;min-width:34px;font-size:14px;z-index:3}
.rv-one.go .rv-card,.rv-best .rv-card{transform:rotateY(180deg)}
/* balance back: its own words under the card say what it is, no tier word on it */
.rv.v .rv-one .rv-front .tier,.rv-sm.v .rv-front .tier{display:none}
/* the light leaking from the card's seam: neutral white, the tier's colour once hot; it spills past the edges and is gone at the open */
.rv-leak{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s}
.rv-leak::before,.rv-leak::after{content:"";position:absolute;left:-18%;right:-18%;top:calc(40% - 18px);height:36px;border-radius:50%}
.rv-leak::before{background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.95) 0,rgba(244,240,255,.55) 28%,transparent 70%)}
.rv-leak::after{background:radial-gradient(50% 50% at 50% 50%,#fff 0,var(--c) 26%,transparent 70%);opacity:0;transition:opacity .22s}
.rv-leak i{position:absolute;left:3%;right:3%;top:40%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff 15%,#fff 85%,transparent)}
/* the seam light grows while it builds up (from a thin line to a wide glow), then takes the tier's colour */
.rv .rv-leak{transform-origin:50% 40%;transform:scale(.7,.45)}
.rv.charge .rv-leak{opacity:1;transform:scale(1.04,1.6);transition:opacity var(--bu,900ms) cubic-bezier(.3,0,.7,.6),transform var(--bu,900ms) cubic-bezier(.4,0,.8,.55)}
.rv.charge.hot .rv-leak{transform:scale(1.1,1.9);transition:opacity .2s,transform .35s ease-out}
.rv.hot .rv-leak,.rv.hot .rv-leak::after{opacity:1}
.rv.hot .rv-leak::before,.rv.hot .rv-leak::after{animation:rvLeak .14s ease-in-out infinite alternate}
.rv-one.go .rv-leak{opacity:0;transition-duration:.12s}
@keyframes rvLeak{to{transform:scaleY(1.4)}}
/* the light behind the card: neutral, then the tier's colour */
.rv-halo{position:absolute;inset:-42%;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(236,232,248,.42),transparent);opacity:0;transform:scale(.7);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1)}
.rv-halo::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--c2),transparent);opacity:0;transition:opacity .25s}
.rv.wait .rv-halo{opacity:.35} .rv.charge .rv-halo{opacity:.9;transform:scale(1);transition:opacity var(--bu,900ms) ease-in,transform var(--bu,900ms) ease-in}
.rv.hot .rv-halo{opacity:1;transform:scale(1);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1)}
.rv.hot .rv-halo::after,.rv-one.go .rv-halo::after{opacity:1}
.rv-one.go .rv-halo{opacity:1;transform:scale(1.12)} .rv.v.hot .rv-halo,.rv.v .rv-one.go .rv-halo{opacity:.5;transform:scale(1)}
/* light rays (B and above: --ro), a hint of them once hot */
.rv-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .5s,transform .9s cubic-bezier(.15,.9,.3,1)}
.rv-rays::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,var(--c2) 0 5deg,transparent 5deg 17deg);-webkit-mask-image:radial-gradient(closest-side,#000 10%,transparent 62%);mask-image:radial-gradient(closest-side,#000 10%,transparent 62%)}
.rv.hot .rv-rays{opacity:calc(var(--ro) * .35);transform:scale(.7)}
.rv-one.go .rv-rays{opacity:var(--ro);transform:scale(1)}
.rv-one.go .rv-rays::before{animation:spin 16s linear infinite}
.rv.lite .rv-rays::before{animation:none}
/* the flash (over the card: the prize turns into view through it) and the shock ring */
.rv-flash{position:absolute;left:50%;top:50%;z-index:4;width:260%;aspect-ratio:1;margin-left:-130%;transform:translateY(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#fff 0,var(--c) 28%,transparent 70%);opacity:0}
.rv-one.go .rv-flash{animation:rvFlash .6s ease-out}
@keyframes rvFlash{0%{opacity:0}14%{opacity:var(--fo,1)}100%{opacity:0}}
.rv-ring{position:absolute;left:50%;top:50%;z-index:4;width:110%;aspect-ratio:1;margin-left:-55%;border-radius:50%;pointer-events:none;border:2px solid var(--c);box-shadow:0 0 24px 2px var(--c2),inset 0 0 24px 2px var(--c2);opacity:0;transform:translateY(-50%) scale(.3)}
.rv-one.go .rv-ring{animation:rvRing .75s cubic-bezier(.15,.75,.3,1) forwards}
.rv.v .rv-ring{display:none}
@keyframes rvRing{0%{opacity:.95;transform:translateY(-50%) scale(.3)}100%{opacity:0;transform:translateY(-50%) scale(2.2)}}
/* sparks: thin light streaks flying out (round gold dust among them for SP) */
.rv-sparks{position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
.rv-sparks i{position:absolute;left:-1.5px;top:-10px;width:3px;height:20px;border-radius:3px;background:linear-gradient(to top,transparent,var(--c) 45%,#fff);opacity:0;animation:rvSpark .8s cubic-bezier(.1,.75,.3,1) var(--d,0s) forwards}
.rv-sparks i.d{left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff 0,#FFE9A8 38%,rgba(255,209,102,0) 72%);animation-name:rvDust;animation-duration:1.4s}
@keyframes rvSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(-36px) scaleY(1.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scaleY(.3)}}
@keyframes rvDust{0%{opacity:1;transform:rotate(var(--a)) translateY(-30px)}75%{opacity:.85}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -.75))}}
/* glints that keep twinkling around a B+ card */
.rv-glints{position:absolute;inset:-7%;z-index:5;pointer-events:none}
.rv-glints i{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;background:radial-gradient(circle,#fff 0 10%,var(--c2) 24%,transparent 46%),linear-gradient(#fff,#fff) 50%/1.5px 100% no-repeat,linear-gradient(#fff,#fff) 50%/100% 1.5px no-repeat;
  animation:rvGlint 1.8s ease-in-out infinite;animation-delay:calc(.55s + var(--i) * .27s)}
@keyframes rvGlint{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
/* the shine sweep across the prize after the flip */
.rv-shine{position:absolute;inset:-2px;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.12) 54%,transparent 64%);transform:translateX(-115%)}
.rv-one.go .rv-shine{animation:rvShine .95s .42s cubic-bezier(.3,.6,.3,1) both}
.rv.v .rv-shine{opacity:.45}
@keyframes rvShine{to{transform:translateX(115%)}}
@keyframes rvShine2{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
/* the name and the value (counting up) */
.rv-name{position:relative;z-index:3;display:grid;align-content:start;gap:4px;min-height:124px;opacity:0;transform:translateY(12px);transition:opacity .3s .3s,transform .45s .3s cubic-bezier(.2,.9,.3,1)}
.rv.open .rv-name,.rv.best .rv-name{opacity:1;transform:none}
.rv-name b{font-family:var(--f-display);font-size:22px;font-weight:800;line-height:1.2;max-width:320px}
:root:lang(zh) .rv-name b{font-weight:400;font-size:24px}
.rv-name .num{font-size:30px;color:var(--money);font-variant-numeric:tabular-nums}
.rv.p.t-B .rv-name .num,.rv.t-A .rv-name .num,.rv.t-SP .rv-name .num{font-size:34px;text-shadow:0 0 18px var(--c2)}
.rv-tag{justify-self:center;padding:2px 12px;border-radius:var(--r-pill);font-weight:900;font-size:13px;background:var(--c);color:#1a0b45}
.rv-sub{font-size:12.5px;font-weight:600;color:var(--ink-2)}
/* several boxes: the cards flip one after another (a B+ card flashes its colour), then the best one is highlighted, the rest dim */
.rv-ten{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(100%,420px);transition:opacity .35s}
.rv-ten.n2{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,250px);gap:14px}
.rv-ten.n3{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,330px);gap:12px}
.rv-ten.n4{grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,380px);gap:10px}
.rv-ten .rv-sm{position:relative;aspect-ratio:3/4;perspective:600px;--fo:.9;transition:opacity .35s,transform .4s cubic-bezier(.2,.9,.3,1.25)}
.rv-ten .rv-face{border-radius:10px}
.rv-ten .rv-back{border-width:1.5px}
.rv-ten .rv-back svg{width:30%;bottom:7%}
.rv-ten .rv-q{font-size:34px;text-shadow:0 2px 0 #B26B00,0 0 12px rgba(255,214,90,.7)}
.rv-ten.n2 .rv-q,.rv-ten.n3 .rv-q{font-size:52px}
.rv-ten .rv-front{border-width:2px}
.rv-ten .rv-front .tier{left:3px;top:3px;height:16px;min-width:22px;font-size:10px;padding:0 3px}
.rv-ten.n2 .rv-front .tier,.rv-ten.n3 .rv-front .tier{left:6px;top:6px;height:20px;font-size:12px;padding:0 5px}
.rv-sm.t-C{--c:#ECE8F8;--c2:rgba(236,232,248,.35)} .rv-sm.t-B{--c:#4CC9F0;--c2:rgba(76,201,240,.5)} .rv-sm.t-A{--c:#B48CFF;--c2:rgba(171,130,255,.6)} .rv-sm.t-SP{--c:#FFD166;--c2:rgba(255,209,102,.8)}
.rv-sm .rv-card{transition:transform .5s cubic-bezier(.3,0,.2,1.2)}
.rv.wait .rv-sm .rv-card{animation:rvFloat 2.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.22s)}
.rv.charge .rv-sm .rv-card{animation:rvShake .26s linear infinite;animation-delay:calc(var(--i) * -.05s)}
.rv.charge.b2 .rv-sm .rv-card{animation:rvShakeB .15s linear infinite;animation-delay:calc(var(--i) * -.03s)}
.rv-sm.fl .rv-card{transform:rotateY(180deg);animation:none!important}
.rv-sm.fl.t-SP,.rv-sm.fl.t-A{z-index:2;animation:pop .5s ease-out}
@keyframes pop{50%{transform:scale(1.18)}}
.rv-sm::before{content:"";position:absolute;inset:-30%;z-index:4;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,#fff,var(--c2) 45%,transparent);opacity:0}
.rv-sm.fl:not(.t-C)::before{animation:rvFlash .5s .14s ease-out}
.rv-sm.fl:not(.t-C) .rv-shine{animation:rvShine .7s .3s ease-out both}
.rv.picked .rv-sm:not(.hi){opacity:.36;transform:scale(.92)}
.rv-sm.hi{z-index:3;transform:scale(1.14)}
.rv-sm.hi .rv-front{box-shadow:0 0 0 2px var(--c),0 0 28px 6px var(--c2)}
.rv-sm.hi .rv-shine{animation:rvShine2 .8s .1s ease-out both}
/* a B+ best comes forward, large, with its own burst */
.rv-best{position:absolute;inset:0;z-index:5;display:grid;justify-items:center;align-content:center;gap:16px;padding:24px 16px;background:radial-gradient(60% 45% at 50% 42%,rgba(28,10,74,.55),rgba(6,1,20,.9) 72%);opacity:0;pointer-events:none;transition:opacity .3s}
.rv.best .rv-best{opacity:1}
.rv.best .rv-ten{opacity:.2}
.rv-best .rv-one,.rv-best .rv-one.go{animation:rvFwd .5s cubic-bezier(.2,1.25,.4,1) both}
@keyframes rvFwd{from{opacity:.3;transform:scale(.5)}}
@media (max-height:640px){.rv{gap:10px}.rv-name{min-height:100px}.rv-name b{font-size:18px}:root:lang(zh) .rv-name b{font-size:20px}.rv-name .num{font-size:26px}}
/* results */
.sheet.res{padding-top:52px}
.res-hero{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:18px;background:rgba(255,255,255,.06);border:1.5px solid var(--c,rgba(171,130,255,.5));box-shadow:0 0 24px -6px var(--c2,rgba(140,90,255,.6));overflow:hidden;--c:#AB82FF;--c2:rgba(171,130,255,.55)}
.res-hero.t-C{--c:#7D73A8;--c2:rgba(125,115,168,.35)} .res-hero.t-B{--c:#4CC9F0;--c2:rgba(76,201,240,.45)} .res-hero.t-SP{--c:#FFD166;--c2:rgba(255,209,102,.8);background:linear-gradient(120deg,rgba(255,209,102,.2),rgba(255,60,172,.12))}
.res-hero>.thumb{width:104px;height:104px;border-radius:14px}
.res-hero .eyebrow{color:var(--c)}
.res-hero h2{padding-right:0;margin-top:2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.res-hero .num{font-size:24px;color:var(--money);margin-top:4px}
.res-hero.t-SP.shine::after{border-radius:18px}
.res-notes{font-size:13px;line-height:1.5}
.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:44vh;overflow-y:auto;padding:4px 2px 2px}
@media (min-width:600px){.results{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
.rc{position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 6px 10px;border:1.5px solid var(--tc-line);border-radius:14px;background:rgba(255,255,255,.05);text-align:center;min-width:0;animation:rise .3s ease both}
.rc .thumb{width:100%;aspect-ratio:1.15;height:auto;border-radius:10px}
.rc .tier{position:absolute;left:10px;top:10px}
.rc b{font-size:12px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.rc .mono{font-family:var(--f-num);font-weight:800;font-size:13px;color:var(--money)}
.rc .x{position:absolute;right:6px;top:6px;padding:0 7px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:#fff;font:800 12px/1.6 var(--f-num);box-shadow:0 2px 0 var(--btn-sh)}
.rc.B{border-color:rgba(76,201,240,.6)}
.rc.A{border-color:var(--ta);box-shadow:var(--glow-card)}
.rc.SP{border-color:var(--sp);box-shadow:var(--glow-gold);background:linear-gradient(180deg,rgba(255,209,102,.18),rgba(255,255,255,.04))}
.rc.bonus{border-color:var(--accent);box-shadow:var(--glow-pink)}
.hit{display:grid;justify-items:center;gap:6px;padding:4px 0 2px}
.res-acts{display:flex;gap:8px}
.res-acts .btn{flex:1;min-width:0;white-space:normal;line-height:1.25;padding-block:6px;text-align:center}
.sheet>*{min-width:0}
.sheet .row .btn{white-space:normal;line-height:1.25;text-align:center}
.res-links{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
/* old reveal classes kept for the demo admin preview */
.reveal{display:grid;justify-items:center;gap:18px;color:var(--ink-2);text-align:center;cursor:pointer}
.flip{width:170px;aspect-ratio:3/4;perspective:900px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:flip .9s cubic-bezier(.5,0,.2,1) forwards}
.flip-f{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;display:grid;place-items:center;overflow:hidden}
.flip-back{background:linear-gradient(160deg,#3b1a8f,#1a0b45);border:1.5px solid var(--line-2)}
.flip-back svg{width:52px;height:52px;color:var(--gold)}
.flip-front{transform:rotateY(180deg);border:2px solid var(--sp);background:var(--tone-slate)}
.flip-front svg{width:96%;height:auto}
@keyframes flip{0%{transform:rotateY(0)}35%{transform:rotateY(0) scale(1.05)}100%{transform:rotateY(180deg)}}
.lvgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.lv{display:grid;justify-items:center;gap:3px;padding:10px 6px;border-radius:14px;border:1.5px solid rgba(171,130,255,.3);background:rgba(255,255,255,.05);text-align:center;min-width:0}
.lv .thumb{width:100%;max-width:100%;aspect-ratio:1.2}
.lv b{font-size:13px;font-weight:800}
.lv .mono{font-size:12px;color:var(--ink-2)}
.lv em{font-style:normal;font-size:15px;color:var(--money);max-width:100%;overflow-wrap:anywhere;line-height:1.2}
.lv small{font-size:11px;color:var(--ink-3)}
.lv.on{border-color:var(--accent);box-shadow:var(--glow-pink);background:var(--accent-soft)}
/* 2026-10-22: 2 columns whenever the panel is narrower than 560 px (4 columns did not fit a VN / ID price like 28.990.000 ₫ at a
   430 px phone); the media query is for browsers without container queries. A long price may wrap, it never spills out. */
.lv-panel{container-type:inline-size}
@media (max-width:600px){.lvgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:560px){.lvgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* toasts: one style, just under the header; amber = waiting, green = done, red = failed */
#toastHost{position:fixed;left:0;right:0;top:calc(66px + env(safe-area-inset-top,0px));z-index:70;display:grid;justify-items:center;padding:0 16px;pointer-events:none}
#toastHost.low{top:auto;bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.toast{display:flex;align-items:center;gap:8px;max-width:min(100%,460px);padding:11px 16px;border-radius:16px;background:rgba(46,24,114,.97);border:1px solid rgba(171,130,255,.55);color:#fff;font-size:13.5px;font-weight:700;line-height:1.4;box-shadow:0 10px 30px rgba(5,0,20,.6),var(--glow-card);animation:tin .22s ease;pointer-events:auto}
.toast::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ta);box-shadow:0 0 8px var(--ta)}
.toast.good{border-color:rgba(61,220,132,.6)} .toast.good::before{background:var(--good);box-shadow:0 0 8px var(--good)}
.toast.warn{border-color:rgba(255,181,71,.65)} .toast.warn::before{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.toast.bad{border-color:rgba(255,61,113,.75);background:rgba(70,14,52,.97)} .toast.bad::before{background:var(--bad-bg);box-shadow:0 0 8px var(--bad-bg)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* reduced motion: stop movement but never hide content (photos, prizes, banners); display:none only for pure decoration */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition:none!important}.shine::after,.rv-rays{display:none}.st-art .bob,.fb .fb-art svg{animation:none!important}}
/* 图片来源 / Photo credits (src/15-guide.js vCredits) */
.cr-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cr-list li{display:flex;gap:12px;align-items:center;min-width:0}
.cr-list img{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;background:#2e1872}
.cr-list div{min-width:0}
.cr-list b{display:block;overflow-wrap:anywhere}
.cr-list small{color:#b7a8e6;overflow-wrap:anywhere}
.cr-list a{color:#ff7ccc}
.cr-link{margin-top:8px;color:#ff7ccc;font-weight:700}
/* ===== Style A home (src/19-store.js): promo banner, picture shortcuts, winners strip, box tabs and grid ===== */
.st-banner{position:relative;margin-top:12px;border-radius:20px;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 10px 30px -8px rgba(255,60,172,.75)}
.st-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}
.st-track::-webkit-scrollbar{display:none}
.st-slide{flex:0 0 100%;scroll-snap-align:start;position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;min-height:148px;padding:14px 8px 22px 18px;text-align:left;color:#fff;overflow:hidden}
.st-slide>span:first-child{position:relative;z-index:2;display:grid;justify-items:start;gap:6px;min-width:0}
.st-slide.gold{background:linear-gradient(120deg,#FF9A3C,#FF3CAC 55%,#784BA0)}
.st-slide.red{background:linear-gradient(120deg,#FF3CAC,#784BA0 55%,#2B86C5)}
.st-slide.violet{background:linear-gradient(120deg,#7B2FF7,#C21FD0 55%,#FF3CAC)}
.st-when{display:inline-block;padding:3px 9px;border-radius:var(--r-pill);background:var(--gold);color:#4A1B00;font-size:11.5px;font-weight:800;white-space:nowrap}
.st-title{display:block;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1.08;text-shadow:0 3px 0 rgba(0,0,0,.22);overflow-wrap:anywhere}
:root:lang(zh) .st-title{font-weight:400;font-size:29px}
.st-title em{font-style:normal;color:var(--gold)}
.st-sub{display:block;font-size:12.5px;font-weight:700;line-height:1.35;color:rgba(255,255,255,.92);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.st-cta{display:inline-flex;align-items:center;gap:4px;margin-top:2px;min-height:34px;padding:0 14px;border-radius:var(--r-pill);background:#fff;color:#7A1FA2;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 3px 0 #C9A3FF}
.st-art{position:relative;display:grid;place-items:center;height:124px}
.st-art svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px rgba(0,0,0,.3))}
.st-art img{width:128px;height:128px;object-fit:cover;border-radius:20px;transform:rotate(-8deg);box-shadow:0 10px 24px rgba(20,0,50,.45),0 0 0 3px rgba(255,255,255,.25)}
.st-art .bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-6px)}}
.st-dots{position:absolute;left:0;right:0;bottom:7px;display:flex;justify-content:center;gap:4px;pointer-events:none}
.st-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.5)}
.st-dots i.on{width:16px;background:#fff}
@media (min-width:760px){.st-slide{min-height:220px;padding:24px 40px}.st-title{font-size:40px}.st-art{height:190px}.st-art img{width:180px;height:180px}}
/* four glass shortcut tiles */
.st-icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.st-ic{display:grid;justify-items:center;gap:6px;min-width:0;min-height:44px;text-align:center}
.st-ic .pic{position:relative;width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);box-shadow:0 0 16px rgba(140,90,255,.35)}
.st-ic .pic svg{width:36px;height:36px}
.st-ic .pic i{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--bad-bg);color:#fff;font-size:10.5px;font-weight:900;font-style:normal;display:grid;place-items:center;box-shadow:0 0 0 2px #1a0b45}
.st-ic .lab{font-size:12.5px;font-weight:700;line-height:1.25;color:#fff;max-width:100%;overflow-wrap:anywhere;padding:1px 6px;border-radius:10px}   /* "Hộp mù miễn phí" may take two lines, never "…" */
.st-ic .lab.hi{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:var(--on-gold)}
.st-ic .lab.timer{background:rgba(255,230,109,.14);color:var(--gold);font-family:var(--f-num);font-weight:800;font-size:12.5px;padding-top:2px}
/* winners strip */
.st-cg{margin-top:14px}
.st-cg-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st-cg-h h2{font-family:var(--f-display);font-size:18px;font-weight:800;display:flex;align-items:center;gap:6px}
:root:lang(zh) .st-cg-h h2{font-weight:400;font-size:20px}
.st-cg-h h2 span{color:var(--accent-ink);font-size:12px;letter-spacing:-.15em}
.st-more{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 4px 0 10px;font-size:13px;font-weight:700;color:var(--ink-2)}
.st-cg-row{margin-top:4px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.st-cg-in{display:flex;gap:8px;width:max-content;animation:stcg 40s linear infinite}
.st-cg-row:hover .st-cg-in{animation-play-state:paused}
@keyframes stcg{to{transform:translateX(-50%)}}
.st-win{flex:none;width:240px;height:64px;display:grid;grid-template-columns:40px minmax(0,1fr) 52px;gap:8px;align-items:center;padding:6px;border-radius:14px;color:#fff;text-align:left;background:linear-gradient(100deg,rgba(255,209,102,.2),rgba(255,60,172,.12));border:1px solid rgba(255,209,102,.55);box-shadow:0 0 14px -4px rgba(255,209,102,.6);position:relative;overflow:hidden}
.st-win.a{background:linear-gradient(100deg,rgba(171,130,255,.24),rgba(76,201,240,.1));border-color:rgba(171,130,255,.55);box-shadow:var(--glow-card)}
.st-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff;border:2px solid rgba(255,255,255,.8);background:var(--c,#7A4DFF);flex:none}
.st-win .who{min-width:0;display:grid;gap:3px}
.st-win .nm{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden}
.st-win .nm span{overflow:hidden;text-overflow:ellipsis}
.st-v{flex:none;font:800 11px/1.3 var(--f-num);padding:0 5px;border-radius:5px;background:rgba(76,201,240,.25);color:#BFEFFF}
.st-amt{display:inline-flex;align-items:center;justify-self:start;gap:5px;font-size:12px;font-weight:800}
.st-amt b{padding:0 5px;border-radius:5px;background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00;font:800 11px/1.5 var(--f-num)}
.st-win.a .st-amt b{background:var(--ta);color:#fff}
.st-amt span{font-family:var(--f-num);color:var(--money);font-size:13.5px}
.st-win .pz{width:52px;height:52px;border-radius:10px;background:var(--tone-slate);display:grid;place-items:center;overflow:hidden;position:relative}
.st-win .pz svg{width:90%;height:auto}.st-win .pz img{width:100%;height:100%;object-fit:cover}
/* box tabs: pills that scroll; a fade and an arrow on the right edge say there are more */
.st-tabs-w{position:relative;margin-top:14px}
.st-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 34px 4px 0;scroll-snap-type:x proximity}
.st-tabs::-webkit-scrollbar{display:none}
.st-tabs-w:not(.end) .st-tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 14px));mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent calc(100% - 14px))}
.st-tabs-w::after{content:"›";position:absolute;right:0;top:0;bottom:4px;width:22px;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--accent-ink);text-shadow:0 0 8px rgba(255,60,172,.7);pointer-events:none;transition:opacity .2s;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(3px)}}
.st-tabs-w.end::after{opacity:0}
.st-tabs button{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 15px;border-radius:var(--r-pill);font-size:14.5px;font-weight:800;color:var(--ink-2);background:rgba(255,255,255,.06);border:1px solid var(--line)}
.st-tabs button svg{width:16px;height:16px}
.st-tabs button.on{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;box-shadow:var(--glow-pink)}
/* box grid: neon cards; the SP-topped box gets the gold frame and a shine every few seconds */
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
@media (min-width:760px){.st-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
.sc{position:relative;display:flex;flex-direction:column;min-width:0;text-align:left;border-radius:18px;overflow:hidden;background:var(--surface);border:1.5px solid rgba(171,130,255,.45);box-shadow:var(--glow-card);transition:transform .08s}
.sc:active{transform:translateY(2px)}
.sc.gold{border-color:var(--sp);box-shadow:var(--glow-gold)}
.sc-img{position:relative;display:grid;place-items:center;aspect-ratio:1/.86;overflow:hidden}
.sc-img>svg{width:86%;height:auto}
.sc-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-tags{position:absolute;left:8px;top:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;gap:4px;z-index:2;pointer-events:none}
.sc-tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px;border-radius:8px;font-size:11px;font-weight:900;line-height:1.5;background:rgba(14,6,40,.72);color:#fff}
.sc-tag.SP{background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00}
.sc-tag.A{background:var(--ta);color:#fff} .sc-tag.B{background:#1E8FB8;color:#fff}
.sc-tag.hot{background:var(--bad-bg);color:#fff}
/* the tier tag shows "SP · category" when it fits, else just "SP" (fitAll adds .short), never "SP · Ca…" */
.sc-tag.fit{flex:0 1 auto;min-width:0}
.sc-tag.short .sc-cat{display:none}
.sc-info{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:4px;padding:8px 10px 10px}
/* box names take up to two lines (every card keeps two lines' height so the grid stays even) */
.sc-t{font-size:14px;font-weight:800;line-height:1.3;color:#fff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;min-height:2.6em}
.sc-max{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-max b{font-family:var(--f-num);font-weight:800;color:var(--sp)}
/* long prices (79.000₫ / lượt, Rp350.000) wrap the 开盒 button onto its own line instead of pushing it out of the card */
.sc-f{align-self:end;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:2px;min-width:0}
.sc-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px;min-width:0;color:var(--money);font-family:var(--f-num);font-weight:800;font-size:18px;line-height:1.1;white-space:nowrap}
.sc-p small{font-size:11.5px;font-weight:800}
.sc-p .per{font-family:var(--f-body);font-weight:600;font-size:11px;color:var(--ink-2);margin-left:2px}
.sc-go{flex:none;margin-left:auto;display:inline-grid;place-items:center;min-height:30px;padding:0 11px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:#fff;font-size:12.5px;font-weight:900;box-shadow:0 3px 0 var(--btn-sh);white-space:nowrap}
.sc-king{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:22px 8px 7px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);background:linear-gradient(180deg,transparent,rgba(14,6,40,.85))}
.sc-king .st-av{width:28px;height:28px;font-size:12px;border-width:2px}
.sc-king b{display:block;font-size:12px;line-height:1.2;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-king small{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;color:var(--money)}
.sc-king small i{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF2A8,#F2B70C);display:inline-block}
.sc-crown{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(14,6,40,.8);display:grid;place-items:center;z-index:2}
.sc-crown svg{width:16px;height:16px;color:var(--gold)}
/* shine on SP cards (style spec: a sweep every ~3 s) */
.shine::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);animation:sh 3.2s infinite;pointer-events:none}
@keyframes sh{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.st-top{position:fixed;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:46px;height:46px;border-radius:50%;background:rgba(36,18,92,.92);border:1px solid var(--line-2);box-shadow:var(--glow-card);display:grid;place-items:center;z-index:25;color:#fff}
.st-top svg{width:20px;height:20px;transform:rotate(90deg)}
.st-note{margin:10px 2px 0;font-size:12.5px;color:var(--ink-2)}
/* free box pop-up */
.fb{position:relative;width:min(100%,360px);border-radius:24px;overflow:hidden;color:#fff;text-align:center;background:radial-gradient(80% 50% at 50% 92%,rgba(76,201,240,.45),transparent 70%),radial-gradient(70% 45% at 50% 18%,rgba(255,107,214,.55),transparent 70%),linear-gradient(180deg,#5B1FA8 0%,#3A1890 45%,#24157A 100%);padding:26px 22px 22px;box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 18px 50px rgba(0,0,0,.5),0 0 40px -6px rgba(255,60,172,.6)}
.fb::before{content:"";position:absolute;left:-10%;right:-10%;bottom:58px;height:120px;background:repeating-linear-gradient(90deg,transparent 0 34px,rgba(120,200,255,.35) 34px 36px),repeating-linear-gradient(0deg,transparent 0 22px,rgba(120,200,255,.35) 22px 24px);transform:perspective(220px) rotateX(55deg);transform-origin:bottom;opacity:.55}
.fb h2{position:relative;font-family:var(--f-display);font-weight:800;font-size:30px;line-height:1.08;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 18px rgba(255,107,214,.5)}
:root:lang(zh) .fb h2{font-weight:400;font-size:32px}
.fb h2 em{font-style:normal;color:var(--gold)}
.fb p{position:relative;margin:10px 0 0;font-size:14px;font-weight:600}
.fb .fb-art{position:relative;height:190px;display:grid;place-items:center;margin:8px 0 6px}
.fb .fb-art svg{width:72%;height:auto;filter:drop-shadow(0 0 24px rgba(255,214,90,.65));animation:fbbob 2.4s ease-in-out infinite}
@keyframes fbbob{50%{transform:translateY(-6px) rotate(2deg)}}
.fb .fb-go{position:relative;display:block;width:100%;min-height:52px;border-radius:16px;background:linear-gradient(180deg,var(--gold),var(--gold-2));color:var(--on-gold);font-size:17px;font-weight:900;box-shadow:0 4px 0 var(--gold-sh)}
.fb .fb-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-sh)}
.fb-x{display:grid;place-items:center;width:44px;height:44px;margin:14px auto 0;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid var(--line-2);color:#fff}
.fb-x svg{width:18px;height:18px}
.modal.fb-wrap{flex-direction:column}
/* cards page */
.cd-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}
.cd-h h2{font-family:var(--f-display);font-size:20px;font-weight:800}
:root:lang(zh) .cd-h h2{font-weight:400;font-size:22px}
.cd-sw{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.07);border:1px solid var(--line)}
.cd-sw button{position:relative;min-height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:800;color:var(--ink-2);display:inline-flex;align-items:center;gap:4px}
.cd-sw button.on{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.cd-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:10px;padding:2px 0 6px}
.cd-strip::-webkit-scrollbar{display:none}
.cd-pull{flex:none;width:88px;display:grid;gap:0;text-align:center;border-radius:12px;overflow:hidden;background:var(--surface);border:1.5px solid var(--sp);box-shadow:0 0 12px -3px rgba(255,209,102,.6)}
.cd-pull.y{border-color:rgba(171,130,255,.6);box-shadow:var(--glow-card)}
.cd-pull .art{position:relative;height:104px;overflow:hidden;display:grid;place-items:center;background:var(--tone-slate)}
.cd-pull .art svg{width:86%;height:auto}
.cd-pull .s{position:absolute;top:4px;left:4px;min-width:20px;height:20px;padding:0 4px;border-radius:6px;background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00;font:800 12px/20px var(--f-num)}
.cd-pull.y .s{background:var(--ta);color:#fff}
.cd-pull .av{width:28px;height:28px;margin:-14px auto 0;position:relative;font-size:12px}
.cd-pull .nm{font-size:11.5px;font-weight:700;padding:2px 4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.cd-pull .vl{font:800 13px/1.4 var(--f-num);padding:0 4px 5px;color:var(--money)}
.cd-tabs{display:flex;align-items:center;gap:6px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.cd-tabs::-webkit-scrollbar{display:none}
.cd-tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font-size:14px;font-weight:800;color:var(--ink-2);background:rgba(255,255,255,.06);border:1px solid var(--line);white-space:nowrap}
.cd-tabs button svg{width:17px;height:17px}
.cd-tabs button.on{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-color:transparent;box-shadow:var(--glow-pink)}
.cd-tabs .flt{margin-left:auto}
.coll{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.coll .ci{display:grid;gap:4px;text-align:left;min-width:0}
.coll .ci .thumb{width:100%;aspect-ratio:3/4;height:auto;border-radius:12px;border:1px solid var(--line-2)}
.coll .ci b{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.coll .ci span{font:800 13px/1.2 var(--f-num);color:var(--money)}
.cd-sec{margin-top:22px}
.cd-sec h3{font-size:15px;font-weight:800;margin:0 0 2px}
/* battles */
.bt-rec{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:12px;padding:10px 14px;border-radius:16px;background:linear-gradient(100deg,rgba(255,60,172,.22),rgba(120,75,160,.25));border:1px solid rgba(255,107,214,.4);color:#fff;font-size:13px;width:100%;text-align:left}
.bt-rec .lg{display:inline-flex;align-items:center;gap:6px;font-weight:900;font-size:14px}
.bt-rec .lg i{width:22px;height:22px;border-radius:7px;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));display:grid;place-items:center;font-style:normal}
.bt-rec .lg i svg{width:13px;height:13px}
.bt-rec span{color:var(--ink-2)}
.bt-rec span b{color:var(--money);font-family:var(--f-num)}
.bt-rec .go{margin-left:auto;font-size:18px}
.bt-new{display:flex;justify-content:flex-end;margin-top:10px}
.bt-list{display:grid;gap:10px;margin-top:8px}
.bt-row{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:18px;background:var(--surface);border:1.5px solid rgba(171,130,255,.4);box-shadow:var(--glow-card);text-align:left;width:100%;overflow:hidden}
.bt-row::after{content:"";position:absolute;right:-10px;top:10px;width:110px;height:110px;opacity:.06;background:#fff;-webkit-mask:var(--x-swords) center/contain no-repeat;mask:var(--x-swords) center/contain no-repeat}
.bt-row .th{width:84px;height:84px;border-radius:12px;overflow:hidden}
.bt-row .th .thumb{width:100%;height:100%;border-radius:12px}
.bt-seats{display:flex;gap:6px;margin-bottom:6px}
.bt-seat{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;background:var(--c,#7A4DFF);border:2px solid rgba(255,255,255,.8);flex:none}
.bt-seat.open{background:rgba(255,255,255,.06);color:var(--ink-3);border:1.5px dashed rgba(255,255,255,.35)}
.bt-seat.open svg{width:15px;height:15px}
/* the box name may take two lines (long Malay / Indonesian names) and the player count has its own line; the mode badge sits
   beside the seats row above, so the name needs no room kept free on the right */
.bt-row b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:14px;font-weight:800;line-height:1.3;overflow:hidden;overflow-wrap:anywhere}
.bt-row .np{display:block;margin-top:2px;font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-row .pr{margin-top:6px;display:flex;align-items:center;justify-content:space-between}
.bt-row .pr .p{color:var(--money);font-family:var(--f-num);font-weight:800;font-size:17px}
.bt-row .pr small{color:var(--ink-2);font-size:12.5px;display:inline-flex;align-items:center;gap:3px}
.bt-row .pr small svg{width:13px;height:13px}
.bt-mode{position:absolute;top:10px;right:10px;padding:2px 9px;border-radius:var(--r-pill);font-size:11.5px;font-weight:800}
.bt-mode.lucky{background:linear-gradient(90deg,#FFD166,#FF9F1C);color:#3B1A00}
.bt-mode.unlucky{background:var(--ta);color:#fff}
.bt-mode.random{background:var(--tb);color:#05233A}
.bt-room{display:grid;gap:14px;margin-top:12px}
.bt-arena{display:grid;gap:8px;grid-template-columns:repeat(var(--n,2),minmax(0,1fr))}
.bt-p{display:grid;gap:6px;justify-items:center;align-content:start;padding:12px 6px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line-2);text-align:center;min-width:0}
.bt-p.me{border-color:var(--accent);box-shadow:var(--glow-pink)}
.bt-p.win{border-color:var(--sp);box-shadow:var(--glow-gold);background:linear-gradient(180deg,rgba(255,209,102,.18),var(--surface) 60%)}
.bt-p .bt-seat{width:44px;height:44px;font-size:16px}
.bt-p .nm{font-size:12.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-p .tot{font-family:var(--f-num);font-weight:800;color:var(--money);font-size:16px}
.bt-pulls{display:grid;gap:4px;width:100%}
.bt-pull{display:flex;align-items:center;gap:4px;padding:3px 4px;border-radius:8px;background:rgba(255,255,255,.07);font-size:11px;min-width:0;animation:btin .35s ease}
.bt-pull .thumb{width:26px;height:26px;border-radius:6px;flex:none}
.bt-pull span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
@keyframes btin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bt-res{display:grid;gap:4px;padding:14px;border-radius:16px;text-align:center;font-weight:800}
.bt-res b{font-family:var(--f-display);font-size:22px}
:root:lang(zh) .bt-res b{font-weight:400;font-size:24px}
.bt-res small{font-weight:600;font-size:13px;color:var(--ink-2)}
.bt-res.win{background:linear-gradient(180deg,rgba(255,209,102,.25),rgba(255,154,60,.12));border:1.5px solid var(--sp);color:var(--gold);box-shadow:var(--glow-gold)}
.bt-res.lose{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--ink-2)}
.bt-opt{display:grid;gap:8px}
.bt-opt .seg{width:100%}
.bt-opt .seg button{flex:1}
:root{--x-swords:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3l7 7-2 2L2 6V3zm18 0v3l-6 6-2-2 7-7zM5 15l4 4-2 2-1.5-1.5L3 21l-1-1 1.5-2.5L2 16l2-2zm14 0l1 1-1.5 1.5L20 20l-1 1-2.5-1.5L15 21l-2-2 4-4z'/%3E%3C/svg%3E")}
/* Demon King panel on the box page: title row, then a full-width claim button; the rule sits behind "?" */
.kg{display:grid;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(110deg,#3A1278,#5B1A6E 55%,#7A2A3A);border:1.5px solid rgba(255,209,102,.55);box-shadow:0 0 18px -4px rgba(255,209,102,.5);color:#fff;margin-top:12px}
.kg-top{display:flex;align-items:center;gap:12px;min-width:0}
.kg .st-av{width:46px;height:46px;font-size:18px;border-color:var(--gold)}
.kg-t{flex:1;min-width:0;display:grid;gap:2px}
.kg-t b{font-size:15px;font-weight:800;line-height:1.3}
.kg-t small{color:#F3DFA8;font-size:12.5px}
.kg-t small .num{color:var(--money);font-size:14px}
.kg-q{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid var(--line-2);font-weight:900;font-size:17px;color:#fff}
.kg .claim{width:100%}
.kg-rule{margin:0;font-size:13px;line-height:1.55;color:#F3DFA8}
/* (the shared .form-grid, .sumlist, .alert and .iconbtn styles live in src/02-style.html) */
/* admin console: the section menu is always a vertical column on the far left; narrow screens get icons with small names */
.wrap.adm-wrap{max-width:none;padding-left:0}
.adm{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;margin-top:0;align-items:start}
@media (min-width:900px){.adm{grid-template-columns:220px minmax(0,1fr);gap:28px}}
.adm-side{display:flex;flex-direction:column;gap:2px;position:sticky;top:61px;max-height:calc(100vh - 61px);overflow-y:auto;scrollbar-width:none;padding:14px 6px 24px;background:var(--surface);border-right:1px solid var(--line);min-height:calc(100vh - 61px)}
.adm-side::-webkit-scrollbar{display:none}
.adm-side .ttl{display:none}
.adm-side button{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:9px 2px;border-radius:8px;font-weight:600;font-size:11px;line-height:1.25;text-align:center;color:var(--ink-2)}
.adm-side button svg{width:20px;height:20px}
.adm-side button:hover{background:var(--surface-2);color:var(--ink)}
.adm-side button.on{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 3px 0 0 var(--accent)}
.adm > div{padding-top:16px;min-width:0}
/* admin tables keep readable columns and scroll sideways in a narrow window */
.adm .table-wrap{overflow-x:auto}
.adm .table-wrap > table.t{min-width:640px}
@media (min-width:900px){
  .adm-side{padding:16px 12px 24px}
  .adm-side .ttl{display:block;padding:4px 12px 10px}
  .adm-side button{flex-direction:row;gap:10px;padding:9px 12px;font-size:14px;font-weight:500;text-align:left}
  .adm-side button svg{width:18px;height:18px}
}
.adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.adm-head h1{font-size:22px;font-weight:700}
.adm-head p{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);display:grid;gap:4px}
.kpi small{font-size:12px;color:var(--ink-3)}
.kpi .num{font-size:32px;line-height:1.05}
.kpi.alert{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.kpi.alert .num{color:var(--bad)}
.form-grid.three{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.savebar{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.savebar .muted{margin-right:auto;font-size:12px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line-2)}
.swatch.on{box-shadow:0 0 0 2px var(--ink)}
.adm-side button svg{color:var(--accent-ink)}
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:260px;overflow-y:auto}
.iconpick button{aspect-ratio:1.2;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--ink-2);background:var(--tone-slate)}
.iconpick button svg{width:100%;height:100%}
.iconpick button.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.photo{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.photo .thumb{width:96px;height:96px}
.tonepick{display:flex;gap:8px;flex-wrap:wrap}
.tonepick button{width:44px;height:32px;border-radius:6px;border:1px solid var(--line-2)}
.tonepick button.on{box-shadow:0 0 0 2px var(--ink)}
.editor{display:grid;gap:16px}
@media (min-width:1040px){.editor{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.editor .side{position:sticky;top:76px}}
.alerts{display:grid;gap:6px;margin-top:12px}
.prize-ed td .input.sm{width:92px}
.prize-ed td .select.sm{width:84px}
.prize-ed .it{display:flex;align-items:center;gap:10px;min-width:180px}
.prize-ed .it .thumb{width:36px;height:36px}
.iconbtn.bad:hover{color:var(--bad);background:var(--bad-soft)}
.acts{display:flex;gap:2px;justify-content:flex-end}
.tlink{font-weight:500;text-align:left}
.tlink:hover{text-decoration:underline}
.picklist{display:grid;gap:6px;max-height:50vh;overflow-y:auto}
.pick{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-align:left}
.pick:hover{border-color:var(--ink-3)}
.pick .thumb{width:40px;height:40px}
.pick.added{opacity:.45;pointer-events:none}
.simres{display:grid;gap:10px;margin-top:14px}
.lock{max-width:520px;margin:48px auto}
.danger-zone{border-color:color-mix(in srgb,var(--bad) 30%,var(--line))}
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.theme-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);font-weight:700}
.theme-opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.theme-sw{width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);flex:none}
/* ===== server build only: status screens, browse-only bar, busy buttons, support tickets (style A) ===== */
.srv-state{display:grid;justify-items:center;gap:10px;text-align:center;padding:72px 16px;color:var(--ink-2)}
.srv-state.sm{padding:18px 0}
.srv-state h2{margin:0;color:#fff;font-family:var(--f-display);font-weight:800;font-size:21px}
:root:lang(zh) .srv-state h2{font-weight:400;font-size:23px}
.srv-state p{margin:0;max-width:340px}
.srv-spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:srvspin .8s linear infinite;box-shadow:0 0 14px rgba(255,60,172,.35)}
@keyframes srvspin{to{transform:rotate(360deg)}}
/* 2026-10-22: "still trying in the background" under 重试 on the no-connection screen */
.srv-trying{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;opacity:.8}
.srv-trying .srv-spin{flex:none;width:14px;height:14px;border-width:2px;box-shadow:none}
.srv-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);margin:0 auto;box-shadow:0 0 18px -2px rgba(255,60,172,.5)}
.srv-ic svg{width:26px;height:26px}
/* one slim bar under the header (login, or the owner's country preview) */
.tgonly{background:linear-gradient(90deg,rgba(255,60,172,.22),rgba(120,75,160,.3));color:#fff;font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,107,214,.35)}
.tgonly .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding-block:6px;text-align:left}
.tgonly svg{width:18px;height:18px;flex:none;color:var(--accent-ink)}
.tgonly .wrap span{flex:1;min-width:0;line-height:1.35}
.tgonly .wrap .btn{flex:none;min-height:38px;padding:0 14px;font-size:13px}
.srv-tgpanel{display:flex;gap:12px;align-items:flex-start}
.srv-tgpanel>svg{width:24px;height:24px;flex:none;color:var(--accent-ink);margin-top:2px}
.browse-only .dopt,.browse-only [data-act="btJoin"],.browse-only [data-act="giftOpen"],.browse-only [data-act="sellAsk"],.browse-only [data-act="shipAsk"]{opacity:.55}
[aria-busy="true"]{opacity:.6;pointer-events:none;cursor:progress}
.srv-mkt{white-space:nowrap}
.textarea.tk-area{height:auto;min-height:112px;padding:10px 12px;line-height:1.5;resize:vertical;font:inherit}
.tk-row{display:grid;gap:6px;width:100%;text-align:left}
.tk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.tk-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-last{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.tk-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tk-thread{display:grid;gap:10px}
.tk-msg{max-width:86%;padding:9px 12px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.5}
.tk-msg small{display:block;color:var(--ink-3);font-size:11.5px;margin-bottom:2px;white-space:normal}
.tk-msg.me{justify-self:end;background:linear-gradient(180deg,rgba(255,107,214,.3),rgba(194,31,208,.25));border-color:rgba(255,107,214,.4)}
.tk-msg.system{justify-self:center;background:transparent;border-style:dashed;font-size:12.5px;color:var(--ink-2)}
@media (max-width:899.98px){.detail{grid-template-columns:minmax(0,1fr)}}
/* long button labels in side panels (e.g. "change server seed" in Malay) wrap instead of widening the page */
.detail .panel.stack>.btn{white-space:normal;line-height:1.3;text-align:center;padding-block:8px}
.pkg{min-width:0}
/* ===== login outside Telegram (src/26-login.js) ===== */
.lg-panel{display:grid;gap:12px}
.lg-top{display:flex;gap:12px;align-items:flex-start}
.lg-top>svg{width:26px;height:26px;flex:none;color:var(--accent-ink);margin-top:2px}
.lg-top p{margin:4px 0 0;color:var(--ink-2)}
.lg-list{display:grid;gap:10px}
.lg-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;font-size:15px;font-weight:800;text-decoration:none;white-space:normal;line-height:1.25;text-align:center}
.lg-btn svg{width:22px;height:22px;flex:none}
.lg-hint,.lg-note{margin:0;text-align:center;color:var(--ink-2)}
.lg-note{margin:14px 4px 0;font-size:12.5px}
.lg-form{display:grid;gap:12px}
.lg-tel{display:flex;gap:8px;align-items:stretch;min-width:0}
.lg-cc{display:inline-flex;align-items:center;gap:6px;flex:none;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:rgba(10,4,30,.45);font-weight:800;white-space:nowrap}
.lg-tel .input{flex:1;min-width:0}
.lg-code{font-family:var(--f-num);font-size:26px;letter-spacing:.4em;text-align:center;font-variant-numeric:tabular-nums}
.lg-sent{margin:0;overflow-wrap:anywhere}
.lg-to{white-space:nowrap}
.lg-err{margin:0;color:var(--bad);font-size:13px;font-weight:700}
.lg-panel .btn.quiet[disabled]{opacity:.6}
/* ===== home-screen app (src/27-pwa.js) ===== */
.pwa-card{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:29;display:flex;align-items:center;gap:10px;max-width:460px;margin:0 auto;padding:10px 4px 10px 12px;border-radius:18px;background:rgba(46,24,114,.97);border:1px solid rgba(171,130,255,.5);box-shadow:0 10px 30px rgba(5,0,20,.6),var(--glow-card);animation:rise .2s ease}
.pwa-card[hidden]{display:none}
.pwa-card img{width:40px;height:40px;border-radius:10px;flex:none}
.pwa-tx{flex:1;min-width:0;display:grid;gap:1px}
.pwa-tx b{font-size:14px}
.pwa-tx small{color:var(--ink-2);font-size:12px;line-height:1.3}
.pwa-card .btn{flex:none}
.pwa-x{flex:none;width:44px;height:44px;display:grid;place-items:center;color:var(--ink-2);border-radius:12px}
.pwa-x svg{width:16px;height:16px}
.pwa-on .page{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}
@media (min-width:760px){.pwa-card{bottom:16px}.pwa-on .page{padding-bottom:110px}}
.pwa-head{display:flex;gap:12px;align-items:center;padding-right:28px}
.pwa-head img{width:48px;height:48px;border-radius:12px;flex:none}
.pwa-head h2{margin:0}
.pwa-head p{margin:2px 0 0}
.pwa-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pwa-steps li{display:flex;gap:10px;align-items:center;line-height:1.45}
.pwa-n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:#fff;font-weight:800;font-size:13px}
.pwa-share{display:inline-block;width:20px;height:20px;vertical-align:-4px;color:#5FB4EF;margin:0 2px}
/* 2026-10-21 (docs/apk.md): in the home-screen app and the Android app a pull at the top no longer reloads the whole app (a half-filled
   KYC or bank form lives in memory only; the app refreshes itself every 60 s and when it comes back). Telegram and browser tabs unchanged. */
@media (display-mode:standalone){html,body{overscroll-behavior-y:none}}
html.in-apk,html.in-apk body{overscroll-behavior-y:none}
/* the Android app download page (src/27-pwa.js vApk) */
.apk-p{margin-top:14px}
.apk-p .panel-h h3{margin:0}
.apk-btns{display:grid;gap:10px}
.apk-ver{text-align:center;margin:8px 0 0}
.apk-safe{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.apk-safe svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--good)}
.apk-sha{margin:10px 0 0;line-height:1.5}
.apk-sha code{display:block;margin-top:4px;font-size:11px;word-break:break-all;color:var(--ink-2)}
/* ===== top-up by bank transfer (src/22-server-play.js, docs/bank-topup.md) ===== */
.bk-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:14px 0 12px;padding:0}
.bk-steps li{display:flex;align-items:center;gap:7px;min-width:0;min-height:44px;padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-3)}
.bk-steps li span:last-child{min-width:0;line-height:1.2;overflow-wrap:anywhere}   /* "Chuyển khoản" wraps instead of being cut */
@media (max-width:400px){.bk-steps li{padding:6px 7px;gap:5px;font-size:12px}}
.bk-steps .bk-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--ink-2);font:800 12px var(--f-num)}
.bk-steps .bk-n svg{width:13px;height:13px}
.bk-steps li.on{border-color:var(--accent);color:#fff;box-shadow:var(--glow-pink)}
.bk-steps li.on .bk-n{background:linear-gradient(180deg,var(--btn-a),var(--btn-b));color:#fff}
.bk-steps li.done{color:var(--ink-2)}
.bk-steps li.done .bk-n{background:var(--good-soft);color:var(--good)}
.bk-center{text-align:center}
.bk-main>.panel+.panel{margin-top:12px}
.bk-copy{flex:none;gap:5px}
.bk-copy svg{width:14px;height:14px}
.bk-amt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,230,109,.08);border:1px solid rgba(255,230,109,.3)}
.bk-amt>div,.bk-f>div{display:grid;gap:2px;min-width:0}
.bk-amt small,.bk-f small,.bk-ref small,.bk-qr small{font-size:12px;color:var(--ink-2)}
.bk-amt .num{font-size:30px;line-height:1.1;color:var(--money);white-space:nowrap;min-width:0}
.bk-fields{display:grid;margin-top:10px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.bk-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);min-width:0}
.bk-f:first-child{border-top:0}
.bk-f b{font-size:16px;overflow-wrap:anywhere}
/* the account number stays on one line (QA round 7: VN wrapped at 360 px): no wrapping, the text shrinks with the screen */
.bk-f>div:has(.bk-acct){flex:1 1 0;container-type:inline-size}
.bk-acct{font-family:var(--f-mono);font-size:clamp(12px,4vw,19px)!important;font-size:clamp(12px,calc(100cqi / 10),19px)!important;letter-spacing:.02em;white-space:nowrap;overflow-wrap:normal!important;min-width:0}
.bk-ref{margin-top:12px;padding:14px;border-radius:16px;border:2px dashed var(--gold);background:rgba(255,230,109,.08);display:grid;gap:8px;box-shadow:0 0 18px -6px rgba(255,230,109,.5)}
.bk-refrow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.bk-code{font-family:var(--f-mono);font-size:30px;line-height:1.1;font-weight:900;letter-spacing:.08em;color:var(--gold);user-select:all;overflow-wrap:anywhere;min-width:0}
.bk-warn{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13.5px;font-weight:700;color:var(--bad);line-height:1.45}
.bk-warn svg{width:16px;height:16px;flex:none;margin-top:2px}
.bk-qr{display:grid;justify-items:center;gap:8px;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:14px;text-align:center}
.bk-qr img{width:min(240px,100%);height:auto;border-radius:10px;background:#fff}
/* 0022: several QR codes: neon chips, one big QR at a time */
.bk-qtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:100%}
.bk-qtabs button{min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-weight:800;font-size:13px;max-width:100%;overflow-wrap:anywhere}
.bk-qtabs button.on{border-color:var(--accent);color:var(--ink);background:rgba(0,229,255,.12);box-shadow:0 0 12px -2px var(--accent)}
.bk-qimg{display:block;padding:0;border:0;background:none;max-width:100%;cursor:zoom-in;-webkit-touch-callout:default}
.bk-qname{font-size:14px}
.bk-qbig{text-align:center}
.bk-qbig img{display:block;width:min(340px,100%);margin:6px auto 10px;border-radius:12px;background:#fff;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
.bk-qr p{margin:0}
.bk-exp,.bk-safe{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.bk-exp{font-weight:700;color:var(--warn)}
.bk-exp svg,.bk-safe svg{width:15px;height:15px;flex:none;margin-top:2px}
.bk-safe svg{color:var(--good)}
.bk-up .field{margin-bottom:12px}
.bk-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bk-pick{display:flex;align-items:center;justify-content:center;gap:8px;white-space:normal;min-height:56px;padding-block:10px;line-height:1.3;text-align:center;cursor:pointer}
.bk-pick svg{width:20px;height:20px;flex:none}
.bk-spin{width:18px;height:18px;border-width:2px;border-color:color-mix(in srgb,currentColor 35%,transparent);border-top-color:currentColor}
.bk-status{display:grid;gap:12px}
.bk-head{display:grid;justify-items:center;gap:8px;text-align:center;padding:6px 0 2px}
.bk-head h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:21px}
:root:lang(zh) .bk-head h2{font-weight:400;font-size:23px}
.bk-head p{margin:0;max-width:360px;color:var(--ink-2);line-height:1.5}
.bk-head.good .srv-ic{background:var(--good-soft);color:var(--good);box-shadow:0 0 18px -2px rgba(61,220,132,.5)}
.bk-head.bad .srv-ic{background:var(--bad-soft);color:var(--bad);box-shadow:0 0 18px -2px rgba(255,61,113,.5)}
.bk-head.review .srv-ic{background:var(--warn-soft);color:var(--warn);box-shadow:0 0 18px -2px rgba(255,181,71,.5)}
.bk-status .sumlist div{font-size:14px}
.bk-status .btn{white-space:normal;min-height:44px;padding-block:8px}
.bk-list{display:grid;gap:8px}
.bk-row{display:grid;gap:4px;width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);text-align:left;color:inherit;font:inherit;cursor:pointer}
.bk-row.on{border-color:var(--accent);box-shadow:var(--glow-pink)}
.bk-r1,.bk-r2{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.bk-r1 .num{font-size:17px;color:var(--money)}
.bk-r2{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bk-r2>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-re{flex:none;color:var(--accent-ink);font-family:inherit;font-weight:700}
.bk-r3{font-size:12.5px;color:var(--bad);overflow-wrap:anywhere}
@media (max-width:380px){.bk-code{font-size:25px}.bk-steps li{padding:6px;gap:5px;font-size:12px}}
/* ===== the owner's country preview (?preview=VN) ===== */
.tgonly.pv-bar{background:linear-gradient(90deg,rgba(255,230,109,.2),rgba(255,154,60,.18));border-bottom-color:rgba(255,230,109,.4)}
.tgonly.pv-bar svg{color:var(--gold)}
.tgonly.priv-bar{background:linear-gradient(90deg,rgba(171,130,255,.22),rgba(120,75,160,.3));border-bottom-color:rgba(171,130,255,.42);font-weight:600}
.tgonly.priv-bar svg{color:#ab82ff}

/* 0023: the player's own daily withdrawal limit, and what the next rank allows */
.wd-limit{display:grid;gap:4px;margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
.wd-limit b{font-size:14px;line-height:1.4}
.wd-limit small{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.wd-limit .wd-next{display:flex;gap:6px;align-items:flex-start;color:var(--gold)}
.wd-limit .wd-next svg{width:15px;height:15px;flex:none;margin-top:1px}
/* ================= play styles (src/29-play.js): neon style A ================= */
.detail.solo{grid-template-columns:minmax(0,1fr)!important}
.pl{position:relative;display:grid;gap:12px;padding:14px 14px 16px;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%,#4a1fa8 0%,#24125c 55%,#170a40 100%);border:2px solid rgba(255,107,214,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 26px -6px rgba(255,60,172,.7),0 0 18px -4px rgba(140,90,255,.6)}
.pl.th-gold{border-color:rgba(255,209,102,.75);box-shadow:0 0 26px -6px rgba(255,183,3,.75),0 0 0 1px rgba(255,255,255,.06) inset}
.pl.th-ice{border-color:rgba(76,201,240,.7);background:radial-gradient(120% 80% at 50% 0%,#1e4fa8 0%,#152a6b 55%,#0b1440 100%);box-shadow:0 0 26px -6px rgba(76,201,240,.75)}
.pl-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.pl-badge{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:var(--r-pill,999px);font-size:12px;font-weight:800;color:var(--on-gold,#3B1A00);background:linear-gradient(90deg,var(--gold,#FFE66D),var(--gold-2,#FFB703));white-space:nowrap}
.pl-title{margin:0;font-size:18px;line-height:1.2;font-weight:900;min-width:0;overflow-wrap:anywhere}
.pl-snd{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid var(--line-2,rgba(255,255,255,.18));color:#b7a8e6}
.pl-snd.on{color:#fff;background:rgba(255,60,172,.3);border-color:rgba(255,60,172,.7)}
.pl-snd svg{width:22px;height:22px}
.pl-lights{position:absolute;inset:4px;border-radius:18px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#FFE66D 0 2.5px,transparent 3.5px) 0 0/22px 22px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px}
.pl.jp .pl-lights{opacity:1;animation:plBlink .45s steps(2) infinite}
@keyframes plBlink{50%{filter:hue-rotate(160deg) brightness(1.6)}}
.pl-stage{position:relative;display:grid;place-items:center;min-height:200px;border-radius:16px;background:rgba(8,2,26,.55);border:1px solid rgba(255,255,255,.1);padding:12px;overflow:hidden}
.pl-msg{min-height:20px;text-align:center;font-size:14px;font-weight:700;color:#e9e2ff}
.pl-log{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pl-log:empty{display:none}
.pl-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 9px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-chip.t-SP{border-color:#FFD166;color:#FFE66D}.pl-chip.t-A{border-color:#AB82FF}.pl-chip.t-B{border-color:#4CC9F0}
.pl-chip.v{color:#c9c6da;background:rgba(255,255,255,.04)}
.pl-ns{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.pl-n{position:relative;display:grid;justify-items:center;gap:1px;min-height:52px;padding:6px 4px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff}
.pl-n b{font-family:var(--f-num);font-size:16px;line-height:1}
.pl-n .num{font-size:11.5px;color:var(--gold,#FFE66D);white-space:nowrap}
.pl-n i{position:absolute;top:-7px;right:-4px;font-style:normal;font-size:10px;font-weight:800;padding:1px 5px;border-radius:999px;background:#ff3d71;color:#fff}
.pl-n.on{background:linear-gradient(180deg,rgba(255,107,214,.45),rgba(194,31,208,.45));border-color:#ff6bd6;box-shadow:var(--glow-pink)}
.pl-go{display:grid;justify-items:center;gap:2px;min-height:58px;width:100%;border-radius:18px;font-size:20px;font-weight:900;letter-spacing:.02em;color:var(--on-gold,#3B1A00);
  background:linear-gradient(180deg,var(--gold,#FFE66D),var(--gold-2,#FFB703));box-shadow:0 4px 0 var(--gold-sh,#B26B00),0 0 18px -2px rgba(255,183,3,.7)}
.pl-go small{font-size:13px;font-weight:800;opacity:.85}
.pl-go:active{transform:translateY(2px);box-shadow:0 2px 0 var(--gold-sh,#B26B00)}
.pl-go[disabled]{filter:grayscale(.4) brightness(.8)}
.pl-note,.pl-same{margin:0;font-size:12px;line-height:1.45;color:#b7a8e6;text-align:center}
.pl-note{color:#ffe0a3;font-weight:700}
/* symbols */
.pl-sym{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:10px;background:#fff}
.pl-sym img{width:100%;height:100%;object-fit:cover}
.pl-sym svg{width:78%;height:78%}
.pl-sym.empty{background:rgba(255,255,255,.04)}
.pl-sym.t-SP{box-shadow:0 0 0 2px #FFD166}.pl-sym.t-A{box-shadow:0 0 0 2px #AB82FF}.pl-sym.t-B{box-shadow:0 0 0 2px #4CC9F0}
.pl-sym.v{background:#e6e4ef}
/* slot */
.pm-slot .pl-stage{grid-template-columns:minmax(0,1fr) 30px;gap:8px}
.pl-win{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;padding:6px;border-radius:14px;background:linear-gradient(180deg,#0e0628,#1d0d4f 50%,#0e0628);border:2px solid rgba(255,230,109,.5)}
.pl-reel{position:relative;height:clamp(180px,52vw,240px);overflow:hidden;border-radius:10px;background:#fff1}
.pl-strip{display:grid;grid-template-rows:repeat(3,1fr);gap:6px;height:100%;padding:4px}
.pl-strip .pl-sym{aspect-ratio:auto}
.pl-strip.roll{grid-template-rows:none;grid-auto-rows:calc((clamp(180px,52vw,240px) - 20px) / 3);height:auto;animation:plRoll var(--d,.35s) linear infinite;filter:blur(1.5px)}
@keyframes plRoll{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.pl-strip.land{animation:plLand .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes plLand{from{transform:translateY(-14%)}to{transform:none}}
.pl-strip .mid{outline:2px solid transparent}
.pl-line{position:absolute;left:2px;right:2px;top:50%;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,transparent,#ff3cac,#ffe66d,#ff3cac,transparent);box-shadow:0 0 10px #ff3cac;pointer-events:none;opacity:.85}
/* QA round 5: the win line's glow grows with the tier (none for C; a balance voucher never makes a line) */
.pl.cel.t-B .pl-strip .mid{outline-color:#4CC9F0}
.pl.cel.t-A .pl-strip .mid{outline-color:#AB82FF;box-shadow:0 0 12px #AB82FF}
.pl.cel.t-SP .pl-strip .mid{outline-color:#FFE66D;box-shadow:0 0 18px #FFE66D}
.pl-lever{position:relative;width:30px;height:180px;align-self:center}
.pl-lever::before{content:"";position:absolute;left:12px;top:30px;bottom:10px;width:6px;border-radius:3px;background:linear-gradient(90deg,#999,#eee,#999)}
.pl-lever i{position:absolute;left:3px;top:6px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8ad8,#c21fd0);box-shadow:0 0 10px #ff3cac;transition:transform .2s}
.pl-lever.pull i{animation:plPull .6s ease-in-out}
@keyframes plPull{40%{transform:translateY(120px)}100%{transform:none}}
/* wheel */
.pl-wheelw{position:relative;width:min(100%,320px);aspect-ratio:1}
.pl-wheel{position:absolute;inset:0;border-radius:50%;border:6px solid #FFE66D;box-shadow:0 0 0 4px #7d0a87,0 0 24px rgba(255,183,3,.6);will-change:transform}
.pl-sep{position:absolute;left:50%;top:0;width:2px;height:50%;margin-left:-1px;background:rgba(14,6,40,.7);transform-origin:50% 100%;transform:rotate(var(--a))}
.pl-seg{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;margin:-9.5% 0 0 -9.5%;transform:rotate(var(--a)) translateY(-150%) rotate(calc(-1 * var(--a)))}
.pl-seg .pl-sym{border-radius:50%;border:2px solid #fff}
.pl-seg.v{display:grid;justify-items:center;gap:2px}
.pl-seg.v em{font-style:normal;font-size:10px;font-weight:800;line-height:1.1;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pl-seg.sm{width:9%;margin:-4.5% 0 0 -4.5%;display:grid;place-items:center;transform:rotate(var(--a)) translateY(-390%) rotate(calc(-1 * var(--a)))}
.pl-seg.sm b{font-family:var(--f-num);font-size:10px;font-weight:800;line-height:1;color:#170a40}
.pl-wheelw .pl-prize{z-index:4}
.pl-hub{position:absolute;left:50%;top:50%;width:16%;aspect-ratio:1;margin:-8% 0 0 -8%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c2,#ffb703);box-shadow:0 0 0 3px #7d0a87}
.pl-pointer{position:absolute;left:50%;top:-10px;width:0;height:0;margin-left:-14px;border:14px solid transparent;border-top:28px solid #ff3cac;filter:drop-shadow(0 0 6px #ff3cac);z-index:2}
/* gacha */
.pl-gm{position:relative;display:grid;justify-items:center;width:min(100%,300px);padding-bottom:6px}
.pl-dome{position:relative;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(255,255,255,.06) 60%);border:3px solid rgba(255,255,255,.4);overflow:hidden}
.pl-cball{position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:linear-gradient(180deg,var(--c1) 50%,#fff 50%);border:2px solid var(--c2)}
.pl-cball:nth-child(1){left:8%;top:52%}.pl-cball:nth-child(2){left:36%;top:60%}.pl-cball:nth-child(3){left:64%;top:54%}.pl-cball:nth-child(4){left:20%;top:30%}
.pl-cball:nth-child(5){left:50%;top:34%}.pl-cball:nth-child(6){left:72%;top:28%}.pl-cball:nth-child(7){left:30%;top:8%}.pl-cball:nth-child(8){left:56%;top:10%}.pl-cball:nth-child(9){left:12%;top:72%}
.pl-dome.shake .pl-cball{animation:plShake .3s ease-in-out infinite alternate}
@keyframes plShake{to{transform:translate(4px,-6px) rotate(25deg)}}
.pl-gbody{position:relative;width:86%;height:70px;margin-top:-8px;border-radius:12px 12px 18px 18px;background:linear-gradient(180deg,#ff6bd6,#c21fd0);box-shadow:0 4px 0 #7d0a87}
.pl-knob{position:absolute;left:14%;top:12px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fff6c2,#ffb703);box-shadow:0 3px 0 #b26b00}
.pl-knob i{position:absolute;left:50%;top:6px;bottom:6px;width:8px;margin-left:-4px;border-radius:4px;background:#b26b00}
.pl-knob.turn{animation:plTurn .7s ease-in-out}
@keyframes plTurn{to{transform:rotate(360deg)}}
.pl-chute{position:absolute;right:14%;top:16px;width:44px;height:38px;border-radius:10px;background:#0e0628}
.pl-cap{position:absolute;right:20%;top:52%;width:56px;height:56px;opacity:0;z-index:2}
.pl-cap span{position:absolute;left:0;right:0;height:50%;border:2px solid var(--c2,#7D8AA6)}
.pl-ctop{top:0;border-radius:28px 28px 0 0;background:var(--c1,#C9D3E6)}
.pl-cbot{bottom:0;border-radius:0 0 28px 28px;background:#fff}
.pl-cap.drop{opacity:1;animation:plDrop .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes plDrop{from{transform:translateY(-40px) scale(.6)}to{transform:translate(-80px,40px) scale(1.2)}}
.pl-cap.open .pl-ctop{transition:transform .4s;transform:translateY(-30px) rotate(-30deg)}
.pl-cap.open{opacity:0;transition:opacity .4s .3s}
/* claw */
.pl-cm{position:relative;width:100%;height:250px}
.pl-rail{position:absolute;left:4%;right:4%;top:4px;height:6px;border-radius:3px;background:linear-gradient(90deg,#999,#eee,#999)}
.pl-claw{position:absolute;left:var(--x);top:8px;width:56px;margin-left:-28px;transform:translateY(var(--y));transition:left .65s ease-in-out,transform .65s ease-in-out;z-index:2}
.pl-cable{position:absolute;left:50%;bottom:100%;width:2px;height:calc(var(--y) + 8px);margin-left:-1px;background:#ccc}
.pl-arm{position:absolute;top:10px;width:10px;height:34px;border-radius:5px;background:#e6e6f0;transition:transform .2s}
.pl-arm.l{left:6px;transform:rotate(22deg)}.pl-arm.r{right:6px;transform:rotate(-22deg)}
.pl-claw.shut .pl-arm.l{transform:rotate(-6deg)}.pl-claw.shut .pl-arm.r{transform:rotate(6deg)}
.pl-claw::before{content:"";display:block;width:36px;height:14px;margin:0 auto;border-radius:6px;background:linear-gradient(180deg,#ff6bd6,#c21fd0)}
.pl-grab{position:absolute;left:12px;top:24px;width:32px;height:32px}
.pl-claw.wiggle{animation:plWig 1s ease-in-out infinite alternate}
@keyframes plWig{to{left:62%}}
.pl-pit{position:absolute;left:4%;right:4%;bottom:6px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.pl-pbox{aspect-ratio:1;border-radius:10px;padding:3px;background:linear-gradient(180deg,#ffe66d,#ffb703)}
.pl-pbox.gone{visibility:hidden}
.pl-hole{position:absolute;left:2%;top:58px;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:800;background:#0e0628;border:1px dashed rgba(255,255,255,.4)}
/* the prize card: a solid, opaque card on top of the machine (QA round 5: it read poorly over the gacha dome) */
.pl-prize{position:absolute;left:50%;top:50%;z-index:5;isolation:isolate;display:none;width:min(78%,230px);transform:translate(-50%,-50%);padding:12px;border-radius:18px;text-align:center;color:#fff;background:#1d0f4a;border:2px solid #7d73a8;box-shadow:0 0 0 4px rgba(14,6,40,.85),0 0 30px rgba(0,0,0,.6)}
.pl-prize.show{display:grid;justify-items:center;gap:6px;animation:plPop .35s cubic-bezier(.2,1.5,.4,1)}
.pl-prize .pl-sym{width:96px;height:96px}
.pl-prize b{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.pl-prize .num{color:var(--gold,#FFE66D);font-family:var(--f-num);font-weight:800}
.pl-prize.t-SP{border-color:#FFD166;box-shadow:0 0 0 4px rgba(14,6,40,.85),0 0 34px rgba(255,209,102,.8)}.pl-prize.t-A{border-color:#AB82FF;box-shadow:0 0 0 4px rgba(14,6,40,.85),0 0 22px rgba(171,130,255,.6)}.pl-prize.t-B{border-color:#4CC9F0}
/* a balance voucher: a plain grey card, no tier, no glow */
.pl-prize.v{background:#2b2840;border-color:#6b6880;box-shadow:0 0 0 4px rgba(14,6,40,.85)}
.pl-prize.v .pl-sym{width:64px;height:44px;background:transparent}
.pl-prize.v b{font-family:var(--f-num);font-size:16px;color:#e6e4ef}
@keyframes plPop{from{transform:translate(-50%,-50%) scale(.6)}}
/* scratch */
.pl-sc{display:grid;justify-items:center;gap:8px;width:100%}
.pl-scard{position:relative;width:min(100%,300px);aspect-ratio:300/190;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#fff8d6,#ffe1f4);border:3px solid #FFE66D}
.pl-sprize{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:4px;padding:8px;color:#24125c;text-align:center}
.pl-sprize .pl-sym{width:72px;height:72px}
.pl-sprize b{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.pl-sprize .num{font-family:var(--f-num);font-weight:800;color:#b26b00}
.pl-sq{font-family:var(--f-num);font-size:64px;font-weight:800;color:#c21fd0}
.pl-scard canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .4s}
.pl-scard canvas.gone{opacity:0;pointer-events:none}
.pl-sc.print .pl-scard{animation:plPrint 1s ease-in-out infinite alternate}
@keyframes plPrint{to{filter:brightness(1.25)}}
.pl-sacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;min-height:36px}
/* flip */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,330px)}
.pl-card{position:relative;aspect-ratio:3/4;perspective:600px;border-radius:12px;min-height:44px}
.pl-cin{position:absolute;inset:0;transition:transform .45s;transform-style:preserve-3d}
.pl-cback,.pl-cfront{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;overflow:hidden}
.pl-cback{background:linear-gradient(160deg,#7a3cff,#c21fd0);border:2px solid #ffe66d}
.pl-cback svg{width:58%}
.pl-cfront{transform:rotateY(180deg);background:#24125c;border:2px solid #ffe66d;padding:4px}
.pl-cfront em{position:absolute;left:0;right:0;bottom:0;padding:2px;font-style:normal;font-size:10px;font-weight:700;line-height:1.2;background:rgba(14,6,40,.82);color:#d6ccff}
.pl-card.up .pl-cin{transform:rotateY(180deg)}
.pl-card.lift{transform:translateY(-6px);filter:drop-shadow(0 0 10px #ff3cac)}
.pl-card.me .pl-cfront{box-shadow:0 0 18px #FFE66D}
/* celebration */
.pl-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
.pl-burst .rv-burst{top:0}
.pl-burst .rv-burst i{animation:burst 1.3s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--d,0s)}
.pl-burst.sm{transform:scale(.6)}
.pl.cel.t-SP{border-color:#FFD166;box-shadow:0 0 40px -4px rgba(255,209,102,.9)}
.pl.cel.t-A{box-shadow:0 0 34px -6px rgba(171,130,255,.9)}
.pl.cel.t-B{box-shadow:0 0 22px -8px rgba(76,201,240,.8)}
/* home card tag */
.sc-mode{position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:3px;max-width:calc(100% - 12px);padding:2px 8px 2px 5px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;background:rgba(194,31,208,.88);box-shadow:0 0 8px rgba(255,60,172,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-mode svg{flex:none;width:14px;height:14px}
/* QA11 polish: a long mode name ("Roda keberuntungan" in a 360 px price-ladder card) wraps to a second line instead of being cut */
.sc-mode>span{min-width:0;white-space:normal;line-height:1.15;overflow-wrap:anywhere}
.st-tabs button svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){
  .pl *,.pl{animation:none!important;transition:none!important}
  .pl-strip.roll{filter:none}
}
@media (max-width:380px){.pl{padding:12px 10px 14px}.pl-title{font-size:16px}.pl-go{font-size:18px}.pm-slot .pl-stage{grid-template-columns:minmax(0,1fr) 24px}.pl-lever{width:24px}}
/* ---------- 实名认证 (KYC) and the same-name rule (src/30-kyc.js) ---------- */
.kyc-main>.panel+.panel,.kyc-main>section+section{margin-top:12px}
.kyc-why{margin:12px 0 0}
.kyc-main{margin-top:12px}
.kyc-status .sumlist b{text-align:right;min-width:0;overflow-wrap:anywhere}
.kyc-need{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kyc-need li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--warn)}
.kyc-need svg{width:15px;height:15px;flex:none;margin-top:2px}
.kyc-fields{display:grid;gap:14px}
.kyc-fields .field>span small{font-weight:500}
.kyc-fields .field small.muted{font-size:12px;line-height:1.4}
.kyc-fields .input[aria-invalid="true"],.kyc-check input[aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.kyc-err{display:flex;gap:6px;align-items:flex-start;margin:2px 0 0;font-size:12.5px;font-weight:700;line-height:1.4;color:var(--bad)}
.kyc-err svg{width:14px;height:14px;flex:none;margin-top:1px}
.kyc-phone{gap:8px}
.kyc-tgbtn{display:flex;align-items:center;justify-content:center;gap:8px;white-space:normal;min-height:48px;line-height:1.3;text-align:center}
.kyc-tgbtn svg{width:18px;height:18px;flex:none}
.kyc-tg{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--good-soft);color:var(--good);font-weight:700;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere}
.kyc-tg svg{width:15px;height:15px;flex:none;margin-top:2px}
.kyc-switch{justify-self:start;font-size:13px;color:var(--accent-ink);text-decoration:underline;min-height:32px}
.kyc-types{display:flex;width:100%;border-radius:18px}
.kyc-types button{flex:1 1 auto;white-space:normal;line-height:1.25;padding:6px 12px;min-width:0;overflow-wrap:anywhere}
.kyc-hint{margin:-6px 0 12px;line-height:1.5}
.kyc-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kyc-ph{position:relative;min-width:0}
.kyc-ph-btn{display:grid;justify-items:center;align-content:start;gap:4px;height:100%;padding:8px 6px 10px;border:1px dashed var(--line-2);border-radius:14px;background:rgba(255,255,255,.04);text-align:center;cursor:pointer;min-width:0}
.kyc-ph-btn b{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.kyc-ph-btn small{font-size:11.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.kyc-ph-img{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;border-radius:10px;background:rgba(10,4,30,.45);overflow:hidden;color:var(--accent-ink)}
.kyc-ph-img>svg{width:34px;height:34px;opacity:.85}
.kyc-ph-img img{width:100%;height:100%;object-fit:cover}
.kyc-ph-img .bk-spin{position:absolute}
.kyc-ok{position:absolute;right:4px;bottom:4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--good);color:#06210f}
.kyc-ok svg{width:13px;height:13px}
.kyc-ph.done .kyc-ph-btn{border-style:solid;border-color:var(--good)}
.kyc-ph.done small{color:var(--good);font-weight:700}
.kyc-ph.fail .kyc-ph-btn,.kyc-ph.miss .kyc-ph-btn{border-style:solid;border-color:var(--bad)}
.kyc-ph.fail small{color:var(--bad);font-weight:700}
.kyc-ph input:focus-visible+.kyc-ph-btn{outline:2px solid var(--accent);outline-offset:2px}
.kyc-ctext{display:flex;gap:8px;align-items:flex-start;margin:-4px 0 12px;line-height:1.55;color:var(--ink-2)}
.kyc-ctext svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--good)}
.kyc-check{display:flex;gap:10px;align-items:flex-start;font-weight:700;line-height:1.4;cursor:pointer}
.kyc-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent)}
.kyc-wd{margin-top:12px;align-items:center;flex-wrap:wrap}
.kyc-wd span{flex:1 1 160px;min-width:0}
.kyc-wd .btn{flex:none}
.kyc-same,.bk-name-note,.kyc-tophint{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13px;font-weight:700;line-height:1.45;color:var(--warn)}
.kyc-same svg,.bk-name-note svg,.kyc-tophint svg{width:15px;height:15px;flex:none;margin-top:2px}
.kyc-tophint{font-weight:500;color:var(--ink-2)}
.bk-up .bk-name-note{margin:-4px 0 12px}
.bk-namerule{margin-top:12px}
.bk-flag{margin:0;justify-content:center;text-align:left}
.bk-rflag{color:var(--warn)}
/* ================= 一番赏 (src/31-kuji.js): neon style A ================= */
.kj-note{margin:10px 2px 0}
.kj-grid{display:grid;gap:12px;margin-top:12px}
.kj-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;width:100%;padding:10px;text-align:left;color:#fff;border-radius:18px;
  background:linear-gradient(160deg,#2e1872,#24125c);border:1.5px solid rgba(255,107,214,.45);box-shadow:0 0 18px -6px rgba(255,60,172,.55)}
.kj-card:active{transform:translateY(2px)}
.kj-card.st-sold_out,.kj-card.st-closed{border-color:rgba(255,255,255,.14);box-shadow:none}
.kj-cv{position:relative;display:block;width:112px;height:112px;border-radius:14px;overflow:hidden;background:#170a40}
.kj-cv img,.kj-hcv img,.kj-lcv img,.kj-ph img,.kj-tf img{width:100%;height:100%;object-fit:cover;display:block}
.kj-cv>svg,.kj-hcv>svg,.kj-lcv>svg,.kj-ph>svg,.kj-tf>svg{width:100%;height:100%}
.kj-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.02em;white-space:nowrap;
  color:#fff;background:linear-gradient(90deg,#ff3cac,#ff9a3c);box-shadow:0 0 12px -2px rgba(255,60,172,.8)}
.kj-cv .kj-badge{position:absolute;left:6px;top:6px}
.kj-st{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap;background:rgba(8,2,26,.72);color:#e9e2ff;border:1px solid rgba(255,255,255,.2)}
.kj-cv .kj-st{position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis}
.kj-st.live{color:#3ddc84;border-color:rgba(61,220,132,.6)}
.kj-st.so{color:#3B1A00;background:linear-gradient(90deg,#ffe66d,#ffb703);border-color:transparent}
.kj-st.end,.kj-st.pa{color:#b7a8e6}
.kj-st.soon{color:#4cc9f0;border-color:rgba(76,201,240,.6)}
.kj-info{display:grid;gap:6px;min-width:0;align-content:start}
.kj-t{font-weight:900;font-size:15.5px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kj-left{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12.5px}
.kj-left b{font-family:var(--f-num);color:#ffe66d;white-space:nowrap}
.kj-bar{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.kj-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff3cac,#ff9a3c)}
.kj-left.big{font-size:15px}.kj-left.big .kj-bar{height:10px}
.kj-big{display:grid;gap:3px;font-size:12px;color:#e9e2ff}
.kj-big>span{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center}
.kj-big .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kj-big small{font-family:var(--f-num);white-space:nowrap;color:#b7a8e6}
.kj-big .gone{opacity:.45}
.kj-rk{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:20px;padding:0 6px;border-radius:7px;font-style:normal;font-size:11.5px;font-weight:900;
  white-space:nowrap;color:#fff;background:#7d73a8}
.kj-rk.r-SP{color:#3B1A00;background:linear-gradient(90deg,#ffe66d,#ffb703)}
.kj-rk.r-A{background:#ab82ff}.kj-rk.r-B{background:#2b86c5}.kj-rk.r-LAST{color:#3B1A00;background:linear-gradient(90deg,#ff9a3c,#ffe66d)}
.kj-f{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kj-p{display:flex;align-items:baseline;gap:3px;min-width:0}
.kj-p b{font-size:17px;color:var(--money,#ffe66d);white-space:nowrap}
.kj-p small{font-size:11.5px;color:#b7a8e6}
.kj-go{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;font-weight:900;font-size:13px;color:#fff;
  background:linear-gradient(180deg,#ff6bd6,#c21fd0);box-shadow:0 3px 0 #7d0a87}
/* the series page */
.kj-page{display:grid;gap:12px}
.kj-hero{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;padding:12px;border-radius:22px;color:#fff;
  background:radial-gradient(120% 80% at 50% 0%,#4a1fa8 0%,#24125c 55%,#170a40 100%);border:2px solid rgba(255,107,214,.55);box-shadow:0 0 26px -6px rgba(255,60,172,.7)}
.kj-hcv{display:block;width:132px;height:132px;border-radius:16px;overflow:hidden;background:#170a40}
.kj-hi{display:grid;gap:6px;min-width:0;align-content:start;justify-items:start}
.kj-hi h1{margin:0;font-size:19px;line-height:1.25;font-weight:900;overflow-wrap:anywhere}
.kj-hp{display:flex;align-items:baseline;gap:4px}
.kj-hp b{font-size:22px;color:var(--money,#ffe66d)}
.kj-hp small{color:#b7a8e6;font-size:12.5px}
.kj-hi .kj-left{width:100%}
.kj-when{color:#b7a8e6;font-size:12px}
@media (max-width:389.98px){.kj-hero{grid-template-columns:104px minmax(0,1fr)}.kj-hcv{width:104px;height:104px}.kj-hi h1{font-size:17px}}
.kj-last{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:10px 12px;border-radius:18px;color:#fff;
  background:linear-gradient(120deg,rgba(255,154,60,.22),rgba(255,230,109,.12));border:1.5px solid rgba(255,209,102,.7);box-shadow:0 0 18px -6px rgba(255,183,3,.7)}
.kj-last>div{display:grid;gap:2px;min-width:0}
.kj-last b{overflow-wrap:anywhere;line-height:1.25}
.kj-last .num{color:var(--money,#ffe66d);font-weight:800}
.kj-last small{color:#e9e2ff;font-size:12px}
.kj-last.won{opacity:.92}
.kj-lcv{display:block;width:72px;height:72px;border-radius:12px;overflow:hidden;background:#170a40}
.kj-ltag{justify-self:start;font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;color:#3B1A00;background:linear-gradient(90deg,#ff9a3c,#ffe66d)}
.kj-draw{display:grid;gap:10px;padding:12px;border-radius:20px;background:#24125c;border:1px solid rgba(171,130,255,.3)}
.kj-ns{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px}
.kj-n{display:grid;justify-items:center;gap:2px;min-height:58px;padding:6px 4px;border-radius:16px;color:#3B1A00;font-weight:900;
  background:linear-gradient(180deg,#ffe66d,#ffb703);box-shadow:0 3px 0 #b26b00,0 0 14px -4px rgba(255,183,3,.7)}
.kj-n b{font-size:14px;line-height:1.15;text-align:center}
.kj-n .num{font-size:12px;font-weight:800;white-space:nowrap}
.kj-n:active{transform:translateY(2px);box-shadow:0 1px 0 #b26b00}
.kj-n[aria-busy]{opacity:.6}
.kj-stamp{justify-self:center;padding:6px 22px;border-radius:12px;font-size:22px;font-weight:900;letter-spacing:.06em;color:#ffe66d;border:3px solid #ffe66d;transform:rotate(-4deg);
  text-shadow:0 0 12px rgba(255,183,3,.8)}
.kj-msg{margin:0;text-align:center;color:#e9e2ff;font-weight:700}
.kj-lim{margin:0;font-size:12.5px;color:#b7a8e6;text-align:center}
.kj-same{margin:0;font-size:12px;color:#8f82bd;text-align:center}
.kj-rows,.kj-rlist{display:grid;gap:8px}
.kj-row,.kj-rr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.kj-row.t-SP,.kj-rr.t-SP{border-color:rgba(255,209,102,.7)}.kj-row.t-A,.kj-rr.t-A{border-color:rgba(171,130,255,.6)}.kj-row.t-B,.kj-rr.t-B{border-color:rgba(76,201,240,.5)}
.kj-row.gone{opacity:.42;filter:grayscale(1)}
.kj-ph{display:block;width:56px;height:56px;border-radius:10px;overflow:hidden;background:#170a40}
.kj-rt{display:grid;gap:2px;min-width:0;justify-items:start}
.kj-rt b{font-size:13.5px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kj-rt b.kj-nm{cursor:pointer}.kj-rt b.kj-nm.open{-webkit-line-clamp:unset;display:block}   /* QA round 9 (P1): 3 lines, a tap shows the whole name */
.kj-myser .kj-frow{display:flex;align-items:center;justify-content:space-between;gap:10px}.kj-myser .kj-frow b{min-width:0;overflow-wrap:anywhere}
.kj-rt .num{font-size:12.5px;color:var(--money,#ffe66d)}
.kj-q{display:grid;justify-items:end;gap:2px;text-align:right}
.kj-q b{font-family:var(--f-num);font-size:13px;color:#fff;white-space:nowrap}
.kj-q small{font-size:11px;color:#b7a8e6;white-space:nowrap}
.kj-q .num{color:var(--money,#ffe66d);font-size:13px;white-space:nowrap}
.kj-frows{display:grid;gap:6px}
.kj-frows>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.kj-frows>div:last-child{border-bottom:0}
.kj-fn{min-width:0;overflow-wrap:anywhere}
.kj-frows .mono{font-size:12px;color:#b7a8e6;white-space:nowrap}
.kj-frows small{font-size:11.5px;color:#8f82bd;white-space:nowrap}
.kj-mine .kj-frows>div{grid-template-columns:minmax(0,1fr) auto auto}
.kj-mine .kj-v{grid-column:1/-1}
.kj-v{margin:0;font-size:12.5px;font-weight:700;color:#e9e2ff}
.kj-v.ok{color:#3ddc84}.kj-v.bad{color:#ff3d71}
.kj-fair{display:grid;gap:10px}
.kj-hash{word-break:break-all;color:var(--ink-2)}
.kj-order summary{cursor:pointer;font-weight:700;min-height:32px}
.kj-fairlist{display:grid;gap:10px}
.kj-frow{display:grid;gap:6px;justify-items:start;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
/* the neon ticket peel: tickets wait face down, then each cover strip peels away in the same time (whatever is under it) */
.modal.kj-peel-m{background:radial-gradient(70% 50% at 50% 45%,rgba(59,26,143,.9),rgba(8,2,26,.95));padding:16px}
.kj-peel{display:grid;gap:14px;justify-items:center;width:100%;max-width:440px;color:#fff;cursor:pointer}
.kj-pt{font-weight:900;font-size:18px;text-shadow:0 0 12px rgba(255,60,172,.8)}
.kj-tks{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:10px;width:100%}
.kj-peel.n1 .kj-tks{grid-template-columns:minmax(0,180px);justify-content:center}
.kj-peel.n3 .kj-tks{grid-template-columns:repeat(3,minmax(0,1fr))}
.kj-tk{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#170a40;border:1.5px solid rgba(255,107,214,.6);box-shadow:0 0 16px -4px rgba(255,60,172,.7)}
.kj-tf{position:absolute;inset:0;display:block}
.kj-tf .kj-rk{position:absolute;left:6px;bottom:6px}
.kj-tc{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;color:#fff;
  background:repeating-linear-gradient(135deg,#ff3cac 0 10px,#c21fd0 10px 20px);transform-origin:top right;transition:transform .46s cubic-bezier(.4,.1,.4,1),opacity .46s}
.kj-tc i{font-style:normal;font-size:11px;font-weight:900;padding:2px 6px;border-radius:999px;background:rgba(8,2,26,.55)}
.kj-tc b{font-family:var(--f-num);font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.kj-tk.wait .kj-tc{animation:kjWait 1.1s ease-in-out infinite}
@keyframes kjWait{50%{filter:brightness(1.25)}}
.kj-tk.peeled .kj-tc{transform:translate(70%,-70%) rotate(28deg);opacity:0}
.kj-tk.peeled.t-SP{border-color:#ffd166;box-shadow:0 0 22px -2px rgba(255,209,102,.9)}
.kj-tk.peeled.t-A{border-color:#ab82ff}.kj-tk.peeled.t-B{border-color:#4cc9f0}.kj-tk.peeled.t-C{border-color:rgba(255,255,255,.25);box-shadow:none}
.kj-skip{font-size:12.5px;color:#b7a8e6}
.kj-res .res-hero .thumb{display:block;width:104px;height:104px;border-radius:14px;overflow:hidden}
.kj-res .res-hero .thumb img{width:100%;height:100%;object-fit:cover}
.kj-sheet .btn{white-space:normal;line-height:1.25}
@media (prefers-reduced-motion:reduce){.kj-tc,.kj-tk.wait .kj-tc{transition:none;animation:none}.kj-card:active,.kj-n:active{transform:none}}
/* ================= ideas-90s (src/32-extras.js, 33-share.js, 34-community.js, 35-music.js): neon style A ================= */
/* 1. value bands */
.vb .vb-rows{display:grid;gap:11px}
.vb-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:10px;row-gap:5px;font-size:13.5px}
.vb-r{font-family:var(--f-num);font-weight:700;color:#e9e2ff;overflow-wrap:anywhere}
.vb-bar{grid-column:1/-1;grid-row:2;display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.vb-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff3cac,#ff9a3c);box-shadow:0 0 10px -2px rgba(255,60,172,.7)}
.vb-p{font-family:var(--f-num);color:#ffe66d;min-width:52px;text-align:right;white-space:nowrap}
.vb-floor{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:14px;line-height:1.45;color:#fff}
.vb-ev{display:block;margin:10px 0 0;font-size:13.5px;line-height:1.5}
.vb-floor svg{width:18px;height:18px;flex:none;margin-top:1px;color:#3ddc84}
.vb-floor b,.vb-ev b{font-family:var(--f-num);color:#ffe66d;white-space:nowrap}
.vb-ev{color:#e9e2ff;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.vb-note{margin:10px 0 0}
.vb-vch .vb-r{color:#b7a8e6;font-weight:600}.vb-vch .vb-bar i{background:linear-gradient(90deg,#8f82bd,#b7a8e6);box-shadow:none}
@media (max-width:380px){.vb-row{font-size:12.5px}.vb-p{min-width:44px}}
/* 2. reference market price under a prize */
.ref-line{margin-top:3px;font-size:11.5px;line-height:1.35;color:#b7a8e6;overflow-wrap:anywhere}
.illus-line{display:block;margin-top:3px;font-size:11px;line-height:1.3;color:#b7a8e6;letter-spacing:.01em}   /* 示意图 / Illustration (2026-10-15) */
/* 2026-10-21: bought new from an official store after the win · ships in about N–M days (stockLine) */
.stock-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;font-weight:600;color:#9fe6c8;letter-spacing:.01em;overflow-wrap:anywhere}
.rc .stock-line{margin-top:0;font-size:10px;line-height:1.25}
.rv-name .stock-line{justify-self:center;max-width:320px;margin-top:0;font-size:12px}
.wow-stock{max-width:100%;font-size:12.5px;line-height:1.35;overflow-wrap:anywhere;opacity:0;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.wow-stock .stock-line{margin:0;font-size:inherit;color:#c9f5e2}
.wow.wx-reveal .wow-stock{opacity:1;transition:opacity .35s}
/* 2026-10-21: the box page's compact group of everyday prizes (tier C), after the dear ones (boxPrizeList) */
.pc-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 4px}
.pc-h b{font-size:13px;color:#e9e2ff}
.pc-h small{font-size:11px;color:#8f82bd;white-space:nowrap}
.pc-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.pc-row .thumb.pc-ic{width:28px;height:28px;border-radius:8px}
.pc-m{display:grid;min-width:0}
.pc-nm{font-weight:600;line-height:1.3;color:#e9e2ff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pc-v{font-family:var(--f-num);color:#b7a8e6;white-space:nowrap}
.pc-p{min-width:46px;font-family:var(--f-num);font-weight:800;text-align:right;white-space:nowrap}
@media (max-width:380px){.pc-row{gap:6px;font-size:12px}.pc-p{min-width:40px}}
/* 3. just sold back */
.sb{margin:16px 0 4px;padding:12px 12px 10px;border-radius:18px;background:linear-gradient(160deg,#2e1872,#24125c);border:1px solid rgba(255,255,255,.1)}
.sb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sb-h h2{margin:0;font-size:17px}
.sb-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:#3ddc84;white-space:nowrap}
.sb-live i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.sb-rows{display:grid;gap:6px}
.sb-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px}
.sb-row .st-av{width:30px;height:30px;font-size:13px}
.sb-m{display:grid;min-width:0;line-height:1.3}
.sb-m b{font-size:13px}
.sb-p{font-size:12px;line-height:1.3;color:#b7a8e6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.sb-a{display:grid;justify-items:end;line-height:1.25}
.sb-a b{font-family:var(--f-num);color:#ffe66d;font-size:14px;white-space:nowrap}
.sb-a small{font-size:11px;color:#8f82bd;white-space:nowrap}
.sb-empty{margin:2px 0 4px}
/* 6. price ladder */
.ld{display:grid;gap:16px;margin-top:12px}
.ld-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 8px}
.ld-h h3{margin:0;font-size:16px;background:linear-gradient(90deg,#ffe66d,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.ld-h small{font-family:var(--f-num);color:#b7a8e6;font-size:12.5px;white-space:nowrap}
/* 5. community */
.cm-home{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:10px 14px;min-height:52px;border-radius:16px;
  color:#fff;text-align:left;background:linear-gradient(120deg,rgba(255,60,172,.18),rgba(76,201,240,.12));border:1px solid rgba(255,107,214,.4)}
.cm-home svg{width:26px;height:26px;color:#ff9ad8}
.cm-home span{display:grid;min-width:0;line-height:1.3}
.cm-home b{font-size:14.5px}.cm-home small{font-size:12px;color:#b7a8e6}
.cm-home i{font-style:normal;font-size:20px;color:#b7a8e6}
.cm-sec{margin-top:16px}
.cm-sec h2{font-size:17px;margin:0 2px 10px}
.cm-ev{margin-bottom:12px;border-radius:18px;overflow:hidden;background:linear-gradient(160deg,#2e1872,#24125c);border:1px solid rgba(255,107,214,.35);box-shadow:0 0 18px -8px rgba(255,60,172,.55)}
.cm-ev.ended{border-color:rgba(255,255,255,.12);box-shadow:none;opacity:.85}
.cm-cv{position:relative;aspect-ratio:16/9;background:#170a40}
.cm-cv img{width:100%;height:100%;object-fit:cover;display:block}
.cm-cv .cm-st{position:absolute;left:10px;top:10px}
.cm-in{padding:12px 14px 14px;display:grid;gap:8px}
.cm-in h3{margin:0;font-size:16.5px;line-height:1.3;overflow-wrap:anywhere}
.cm-st{justify-self:start;display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:900;white-space:nowrap}
.cm-st.on{color:#06210f;background:#3ddc84}.cm-st.end{color:#e9e2ff;background:rgba(8,2,26,.72);border:1px solid rgba(255,255,255,.2)}
.cm-dt{font-family:var(--f-num);color:#b7a8e6}
.cm-body{font-size:13.5px;line-height:1.55;color:#e9e2ff;max-height:5.2em;overflow:hidden;position:relative}
.cm-body.open{max-height:none}
.cm-body:not(.open)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.6em;background:linear-gradient(transparent,#27135f)}
.cm-body p{margin:0 0 6px}.cm-body ul,.cm-body ol{margin:0 0 6px;padding-left:18px}
.cm-go{justify-self:start;gap:6px;text-decoration:none}.cm-go small{opacity:.75;font-weight:600}
.cm-kols{display:grid;gap:12px}
.cm-kol{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px;border-radius:18px;background:linear-gradient(160deg,#2e1872,#24125c);border:1px solid rgba(255,255,255,.12)}
.cm-ph{width:72px;height:72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#170a40;border:2px solid #ff6bd6;box-shadow:0 0 14px -4px rgba(255,60,172,.8)}
.cm-ph img{width:100%;height:100%;object-fit:cover}
.cm-ph .st-av.cm-av{width:100%;height:100%;font-size:28px;border-radius:50%}
.cm-kin{display:grid;gap:8px;min-width:0}
.cm-kin>b{font-size:15.5px;overflow-wrap:anywhere}
.cm-pfs{display:flex;flex-wrap:wrap;gap:6px}
.cm-pf{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 4px;border-radius:999px;font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.cm-pf svg{width:24px;height:24px}
.cm-code{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:#b7a8e6}
.cm-code b{font-size:15px;color:#ffe66d;letter-spacing:.04em}
/* 4. share to earn */
.sh-sheet{max-width:440px}
.sh-pic{display:grid;place-items:center;gap:8px;min-height:220px;margin:6px 0 4px;border-radius:16px;background:rgba(255,255,255,.05);overflow:hidden}
.sh-pic img{display:block;width:100%;height:auto;max-height:52vh;object-fit:contain}
.sh-hint{margin:6px 0 10px}
.sh-row{display:flex;gap:8px}
.sh-row .btn{min-width:0}
.sh-to{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0 8px}
.sh-pf{display:grid;justify-items:center;gap:4px;min-height:58px;padding:6px 2px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e9e2ff;font-size:10.5px;font-weight:700}
.sh-pf span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-pfi svg,.sh-pfc svg{width:28px;height:28px;display:block}
.sh-earn{display:grid;gap:6px;margin-top:12px;padding:12px;border-radius:16px;background:linear-gradient(120deg,rgba(255,230,109,.14),rgba(255,154,60,.1));border:1px solid rgba(255,183,3,.45)}
.sh-earn b{color:#ffe66d}.sh-earn small{color:#e9e2ff}
.sh-rules ol{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}
.sh-use{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px}
.sh-use b{font-family:var(--f-num);font-size:20px;color:#ffe66d;white-space:nowrap}
.sh-full{margin:10px 2px 0;font-size:13px;color:#ffd166}
.sh-list{display:grid;gap:10px}
.sh-pr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:10px}
.sh-pr .thumb{width:56px;height:56px}
.sh-pm{display:grid;gap:3px;min-width:0}
.sh-pm b{font-size:13.5px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.sh-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:#b7a8e6}
.sh-cl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.sh-cl small,.sh-why{font-size:11.5px;color:#ffb4c8}
.sh-pa{display:flex;gap:6px;align-items:center}
.sh-pa .btn svg{width:18px;height:18px}
.sh-st{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap}
.sh-st.ok{color:#06210f;background:#3ddc84}.sh-st.no{color:#fff;background:#ff3d71}.sh-st.wait{color:#3B1A00;background:linear-gradient(90deg,#ffe66d,#ffb703)}
.sh-form{max-width:440px}
.sh-form .fld-l{display:block;margin:12px 0 6px;font-size:13px;font-weight:700;color:#e9e2ff}
.sh-pfs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sh-pfc{display:grid;justify-items:center;gap:3px;min-height:56px;padding:6px 2px;border-radius:12px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);color:#e9e2ff;font-size:10.5px;font-weight:700}
.sh-pfc span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-pfc.on{border-color:#ff6bd6;box-shadow:0 0 12px -2px rgba(255,60,172,.8);background:rgba(255,107,214,.14)}
.sh-or{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:#8f82bd;font-size:12px}
.sh-or::before,.sh-or::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.14)}
.sh-file{gap:8px}
.sh-resbtn{color:#ffe66d}
@media (max-width:380px){.sh-to,.sh-pfs{gap:4px}.sh-pf,.sh-pfc{font-size:9.5px}.sh-pr{grid-template-columns:48px minmax(0,1fr) auto;gap:8px}.sh-pr .thumb{width:48px;height:48px}}
/* 7. the header sound switch */
.sndbtn{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:12px;color:#b7a8e6;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.sndbtn svg{width:20px;height:20px}
.sndbtn.on{color:#ffe66d;border-color:rgba(255,230,109,.45);box-shadow:0 0 10px -3px rgba(255,230,109,.7)}
@media (max-width:380px){.sndbtn{width:30px;height:30px;border-radius:10px}.sndbtn svg{width:18px;height:18px}}
/* ===== live room (src/28-live.js), style A · 霓虹游戏厅 (docs/visual-style-a.md). NOT WIRED YET: tools/build.sh appends
   this after src/21-server.css (docs/live-integration.md §5). Uses the page's tokens only. ===== */
#main.lv-hide{display:none}
.lv-root{max-width:560px;margin:0 auto;padding:10px 14px 110px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.lv-top{display:flex;align-items:center;gap:10px;min-height:44px}
.lv-ib{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);color:#fff}
.lv-ib svg{width:22px;height:22px}
.lv-ib[hidden]{display:none}
.lv-ttl{flex:1;min-width:0;display:flex;align-items:center;gap:8px}
.lv-ttl b{font-family:var(--f-display);font-weight:800;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-live{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;padding:3px 10px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:var(--glow-pink)}
.lv-live i{width:8px;height:8px;border-radius:50%;background:#fff;animation:lvPulse 1.2s ease-in-out infinite}
/* QA12: on a narrow phone the LIVE badge next to the room title is only its pulsing dot, so the title stays readable */
@media (max-width:400px){.lv-ttl .lv-live{gap:0;padding:6px;font-size:0;letter-spacing:0}.lv-ttl .lv-live i{width:10px;height:10px}}
@keyframes lvPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.lv-eye{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-pill);background:rgba(0,0,0,.35);color:#fff;font-family:var(--f-num);font-size:14px}
.lv-eye svg{width:16px;height:16px}

/* the stage: the video with everything that floats over it */
.lv-stage{position:relative;width:100%;aspect-ratio:9/16;max-height:62vh;margin:0 auto;border-radius:22px;overflow:hidden;background:#05010f;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 0 26px -6px rgba(255,60,172,.55)}
@media (min-aspect-ratio:3/4){.lv-stage{aspect-ratio:16/9;max-height:none}}
/* nothing to watch here (offline, Telegram channel, log in, room closed): a shorter card instead of a tall video frame */
.lv-stage:is([data-state="offline"],[data-state="telegram"],[data-state="guest"],[data-state="off"],[data-state="error"],[data-state="fallback"]){aspect-ratio:auto;min-height:300px}
/* live on the Telegram channel or stuck: the host card and the pinned message stay on top, the text starts below them */
.lv-stage:is([data-state="telegram"],[data-state="fallback"]){min-height:400px}
.lv-stage:is([data-state="telegram"],[data-state="fallback"]) .lv-cover{padding-top:120px;padding-bottom:70px}
.lv-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#05010f}
.lv-stage[data-state="stalled"]::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;
  border:4px solid rgba(255,255,255,.25);border-top-color:var(--accent);animation:lvSpin .9s linear infinite}
.lv-cover{position:absolute;inset:0;z-index:1;display:grid;align-content:center;justify-items:center;gap:10px;padding:24px;text-align:center;color:var(--ink-2);
  background:radial-gradient(90% 60% at 50% 30%,rgba(255,60,172,.22),transparent 70%),linear-gradient(180deg,#2e1872,#140838)}
.lv-cover[hidden]{display:none}
.lv-cover h3{margin:0;color:#fff;font-family:var(--f-display);font-weight:800;font-size:21px}
.lv-cover p{margin:0;max-width:300px}
.lv-cover .lv-cd{font-family:var(--f-num);font-size:28px;font-weight:800;color:var(--gold)}
.lv-cover .lv-big{font-size:44px;line-height:1}
.lv-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lv-spin{width:40px;height:40px;border-radius:50%;border:4px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:lvSpin .9s linear infinite}
@keyframes lvSpin{to{transform:rotate(360deg)}}
.lv-hostcard{position:absolute;z-index:2;left:10px;top:10px;display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--r-pill);background:rgba(10,3,30,.55);backdrop-filter:blur(6px);color:#fff;max-width:70%}
.lv-hostcard b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-hostcard small{display:block;font-size:11px;color:var(--ink-2)}
.lv-av,.lv-bav{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.lv-ini{display:grid;place-items:center;background:linear-gradient(135deg,var(--btn-a),var(--btn-b));color:#fff;font-weight:800}
.lv-pin{position:absolute;z-index:2;left:10px;right:10px;top:56px;padding:8px 12px;border-radius:14px;background:rgba(255,230,109,.92);color:var(--on-gold);font-size:13px;font-weight:700;line-height:1.35}
.lv-pin-t{margin-right:6px;font-weight:900}
.lv-unmute{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);min-height:44px;padding:0 16px;border-radius:var(--r-pill);border:0;background:rgba(10,3,30,.75);color:#fff;font-weight:700}
.lv-q{position:absolute;right:10px;bottom:10px;display:flex;gap:4px;padding:3px;border-radius:var(--r-pill);background:rgba(10,3,30,.6)}
.lv-q button{min-width:44px;min-height:32px;padding:0 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-2);font-family:var(--f-num);font-size:13px;font-weight:700}
.lv-q button.on{background:var(--accent);color:#fff}
.lv-mini-x{display:none}

/* win flashes: slide in from the left, SP in gold */
.lv-flash{position:absolute;z-index:3;left:10px;right:10px;bottom:56px;display:grid;pointer-events:none}
.lv-fl{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:rgba(46,24,114,.92);border:1px solid var(--line-2);color:#fff;
  box-shadow:var(--glow-card);animation:lvIn .35s cubic-bezier(.2,.9,.3,1.2)}
.lv-fl.sys{justify-content:center;font-weight:700;font-size:13px}
.lv-fl.sp{background:linear-gradient(110deg,#5a3a00,#b26b00 40%,#ffb703 60%,#5a3a00);border-color:var(--sp-line);box-shadow:var(--glow-gold);color:#fff}
.lv-fl-pic{width:44px;height:44px;flex:none;border-radius:12px;overflow:hidden;background:var(--surface-2);display:grid;place-items:center}
.lv-fl-pic img,.lv-fl-pic svg{width:100%;height:100%;object-fit:cover}
.lv-fl-t{flex:1;min-width:0;display:grid;font-size:12px;line-height:1.3}
.lv-fl-t i{font-style:normal;font-weight:900;color:var(--gold)}
.lv-fl-t b{font-size:13px}
.lv-fl-t span{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-fl.sp .lv-fl-t span{color:#fff}
.lv-fl-t em{font-style:normal;font-family:var(--f-num);color:var(--money);font-weight:800}
@keyframes lvIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}

/* the featured box and 跟抽 */
.lv-feat{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--card-r);background:var(--surface);border:1px solid rgba(255,209,102,.35);box-shadow:var(--glow-card)}
.lv-feat.none{justify-content:center;color:var(--ink-3);font-size:13px;border-color:var(--line)}
.lv-feat.none svg{width:20px;height:20px}
.lv-feat-img{width:58px;height:58px;flex:none;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.lv-feat-img img,.lv-feat-img svg{width:100%;height:100%;object-fit:cover}
.lv-feat-t{flex:1;min-width:0;display:grid;gap:1px}
.lv-feat-t small{color:var(--ink-2);font-size:12px}
.lv-feat-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-price{font-family:var(--f-num);font-weight:800;color:var(--money)}
.lv-go{min-height:44px;padding:0 18px;font-size:16px;font-weight:900}

/* chat */
.lv-chat{display:grid;gap:8px;padding:10px;border-radius:var(--card-r);background:var(--surface);border:1px solid var(--line)}
.lv-msgs{height:min(34vh,260px);overflow-y:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:4px;padding-right:2px}
.lv-msg{font-size:14px;line-height:1.45;color:#fff;word-break:break-word}
.lv-msg b{color:var(--ink-2);font-weight:700;margin-right:6px}
.lv-msg.mine b{color:var(--accent-ink)}
.lv-msg.host b{color:var(--gold)}
.lv-msg.staff,.lv-msg.system{color:var(--info)}
.lv-role{display:inline-block;margin-right:6px;padding:0 6px;border-radius:6px;background:var(--surface-3);color:#fff;font-size:11px;font-weight:800;vertical-align:1px}
.lv-role.host{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:var(--on-gold)}
.lv-send{display:flex;gap:8px}
.lv-in{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--dark);color:#fff;font:inherit;font-size:15px}
.lv-in:disabled{opacity:.6}
.lv-hint{font-size:12px;color:var(--ink-2)}
.lv-hint.bad{color:var(--bad)}

/* schedule */
.lv-sched{display:grid;gap:10px}
.lv-sh{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px}
/* QA12: a long "notify me" (ms) wraps instead of pushing the page sideways at 360 px */
.lv-sh .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;min-height:36px;height:auto;padding-top:6px;padding-bottom:6px}
.lv-sh h3{margin:0;font-family:var(--f-display);font-size:18px}
.lv-list{display:grid;gap:8px}
.lv-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.lv-item.live,.lv-item.soon{border-color:rgba(255,60,172,.55)}
.lv-when{flex:none;min-width:84px;font-family:var(--f-num);font-weight:800;color:var(--gold);font-size:14px}
.lv-it{flex:1;min-width:0;display:grid}
.lv-it b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-it small{color:var(--ink-3);font-size:12px}
.lv-item .btn{flex:none;min-height:36px;max-width:46%;white-space:normal;line-height:1.25;height:auto}
.lv-empty{margin:0;color:var(--ink-3);font-size:13px}
.lv-tg{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:var(--r-pill);border:1px dashed var(--line-2);color:var(--info);font-weight:700;text-decoration:none}
.lv-tg svg{width:18px;height:18px}

/* the small window while 跟抽 (the video keeps playing over the box page) */
.lv-mini{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;width:116px}
.lv-mini .lv-stage{aspect-ratio:9/16;max-height:none;border-radius:16px;box-shadow:0 10px 30px rgba(5,0,20,.7),0 0 0 2px var(--accent)}
.lv-mini .lv-hostcard,.lv-mini .lv-pin,.lv-mini .lv-q,.lv-mini .lv-unmute,.lv-mini .lv-cover{display:none}
.lv-mini .lv-flash{left:4px;right:4px;bottom:4px}
.lv-mini .lv-fl{padding:4px;gap:4px}
.lv-mini .lv-fl-t,.lv-mini .tier{display:none}
.lv-mini .lv-mini-x{display:grid;place-items:center;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:transparent}

/* 🔴 直播中 on the home page */
.lv-banner{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px;border:0;border-radius:20px;text-align:left;color:#fff;
  background:linear-gradient(100deg,#ff3cac,#c21fd0 55%,#7d0a87);box-shadow:0 0 0 2px rgba(255,255,255,.15) inset,0 10px 26px -8px rgba(255,60,172,.8)}
.lv-banner.soon{background:linear-gradient(100deg,#2e1872,#3a2188);box-shadow:0 0 0 1px rgba(255,209,102,.5) inset,var(--glow-card)}
.lv-banner .lv-bav{width:44px;height:44px;border-color:#fff}
.lv-bic{font-size:26px;flex:none}
.lv-bt{flex:1;min-width:0;display:grid;gap:2px}
.lv-bt .lv-live{justify-self:start;background:#fff;color:var(--accent);box-shadow:none}
.lv-bt .lv-live i{background:var(--accent)}
.lv-bt b{font-family:var(--f-display);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-bt small{color:rgba(255,255,255,.85);font-size:12px}
.lv-bgo{flex:none;font-weight:800;font-size:13px}

:root:lang(km) .lv-live,:root:lang(km) .lv-role{letter-spacing:0;line-height:1.6}
@media (prefers-reduced-motion:reduce){.lv-live i,.lv-fl,.lv-spin,.lv-stage[data-state="stalled"]::after{animation:none}}
/* ================= the WOW moment (src/36-wow.js): neon style A, transforms + opacity only (60 fps on low-end phones) =================
   2026-10-23: B gets its own smaller moment (t-B: blue, "GREAT!", fewer / thinner rays, a softer flash, a smaller ring, a gentle nudge,
   a smaller card and word) — B < A < SP at a glance. wx-cut: the overlay is opaque at once (it starts at the burst, after the card
   reveal's build-up); wx-fly: the card flies from the reveal card's place into its own while it turns. */
.wow{position:fixed;inset:0;z-index:90;display:grid;place-items:center;overflow:hidden;color:#fff;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;--c:#AB82FF;--c2:rgba(171,130,255,.55);--glow:#FF6BD6}
.wow,.wow *{box-sizing:border-box}
.wow.t-SP{--c:#FFD166;--c2:rgba(255,209,102,.75);--glow:#FFB703}
.wow.t-B{--c:#4CC9F0;--c2:rgba(76,201,240,.5);--glow:#4CC9F0}
.wow-bg,.wow-gold{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.wow-bg{background:radial-gradient(75% 55% at 50% 42%,rgba(59,26,143,.92),rgba(8,2,26,.97))}
.wow.wx-on .wow-bg{opacity:1}
.wow.wx-cut .wow-bg{transition:none}
.wow.t-B .wow-bg{background:radial-gradient(75% 55% at 50% 42%,rgba(16,58,128,.92),rgba(4,8,30,.97))}
.wow-gold{background:radial-gradient(85% 62% at 50% 40%,#fff2c2 0,#ffd166 16%,#ffb703 30%,#c2410c 56%,#4a0f1c 80%,#14040c 100%);transition:opacity .6s}
.wow.t-SP.wx-burst .wow-gold{opacity:1}
.wow-rays{position:absolute;left:50%;top:var(--cy,40%);width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,var(--ray,var(--c2)) 0 8deg,transparent 8deg 20deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 6%,transparent 62%);mask-image:radial-gradient(closest-side,#000 6%,transparent 62%);
  opacity:0;transform:scale(.55);transition:opacity .4s,transform .7s cubic-bezier(.2,1.4,.4,1);will-change:transform}
.wow.t-SP .wow-rays{background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 7deg,transparent 7deg 18deg)}
.wow.wx-charge .wow-rays{opacity:.22}
/* 2026-10-22: neutral light while it charges; the tier's colour only in the last 40 % ("hot"): the rarity tease */
.wow.wx-charge:not(.wx-hot){--ray:rgba(244,240,255,.4)}
.wow.wx-hot .wow-rays{opacity:.4}
.wow.wx-burst .wow-rays{opacity:.85;transform:scale(1);animation:wowSpin 11s linear infinite}
.wow.t-SP.wx-burst .wow-rays{opacity:1;animation-duration:7s}
/* B: fewer, thinner blue rays, dimmer and slower */
.wow.t-B .wow-rays{background:repeating-conic-gradient(from 0deg,var(--ray,var(--c2)) 0 5deg,transparent 5deg 24deg)}
.wow.t-B.wx-burst .wow-rays{opacity:.6;animation-duration:16s}
.wow-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.wow-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% var(--cy,40%),#fff 0,rgba(255,240,190,.85) 22%,transparent 64%)}
/* the shock ring from the card at the burst */
.wow-ring{position:absolute;left:50%;top:var(--cy,40%);z-index:5;width:80vmin;aspect-ratio:1;margin-left:-40vmin;border-radius:50%;pointer-events:none;border:2px solid var(--c);
  box-shadow:0 0 30px 4px var(--c2),inset 0 0 30px 4px var(--c2);opacity:0;transform:translateY(-50%) scale(.25)}
.wow.wx-burst .wow-ring{animation:wowRing .9s cubic-bezier(.15,.75,.3,1) forwards}
@keyframes wowRing{0%{opacity:1;transform:translateY(-50%) scale(.25)}100%{opacity:0;transform:translateY(-50%) scale(2.4)}}
.wow.t-B.wx-burst .wow-ring{animation:wowRingB .75s cubic-bezier(.15,.75,.3,1) forwards}
@keyframes wowRingB{0%{opacity:.9;transform:translateY(-50%) scale(.25)}100%{opacity:0;transform:translateY(-50%) scale(1.8)}}
.wow.wx-burst .wow-flash{animation:flash .8s ease-out}
.wow.t-SP.wx-burst .wow-flash{animation-duration:1.2s}
.wow.t-B .wow-flash{background:radial-gradient(circle at 50% var(--cy,40%),#fff 0,rgba(196,238,255,.8) 18%,transparent 52%)}
.wow.t-B.wx-burst .wow-flash{animation:wowFlashB .6s ease-out}
@keyframes wowFlashB{0%{opacity:0}14%{opacity:.6}100%{opacity:0}}
.wow-stage{position:relative;z-index:3;display:grid;justify-items:center;align-content:center;gap:10px;width:min(100%,420px);max-height:100%;overflow-x:hidden;overflow-y:auto;
  padding:max(56px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}
/* the brand word: same in every language */
.wow-word{font:800 clamp(64px,21vw,96px)/.95 var(--f-num,'Baloo 2'),system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;color:#fff;
  background:linear-gradient(180deg,#fff 0,#ffd6f4 38%,#ff6bd6 70%,#ab82ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 0 #4a0a6e) drop-shadow(0 0 16px var(--glow));opacity:0;transform:scale(1.8)}
.wow.t-SP .wow-word{font-size:clamp(42px,13.2vw,70px);background-image:linear-gradient(180deg,#fff 0,#fff2a8 35%,#ffd166 62%,#ff9a3c 100%);filter:drop-shadow(0 4px 0 #7a2e00) drop-shadow(0 0 18px #ffb703)}
.wow.t-B .wow-word{font-size:clamp(40px,13vw,60px);background-image:linear-gradient(180deg,#fff 0,#e2f8ff 38%,#86ddff 70%,#4cc9f0 100%);filter:drop-shadow(0 3px 0 #0b3a6e) drop-shadow(0 0 12px #4cc9f0)}
.wow.wx-burst .wow-word{animation:wowSlam .6s cubic-bezier(.2,1.6,.4,1) forwards}
.wow.t-SP.wx-burst .wow-word{animation-duration:.9s}
.wow.t-B.wx-burst .wow-word{animation:wowSlamB .45s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes wowSlamB{0%{opacity:0;transform:scale(1.35)}60%{opacity:1;transform:scale(.98)}100%{opacity:1;transform:none}}
.wow.wx-final .wow-word{opacity:1;transform:none;animation:none}
/* the localized label (SP: 超级大奖 in the player's language; A: "A 级大奖" / the 一番赏 rank) */
.wow-sub{max-width:100%;padding:5px 18px;border-radius:999px;font-weight:900;font-size:clamp(18px,5.4vw,24px);line-height:1.25;overflow-wrap:anywhere;
  color:#fff;background:linear-gradient(90deg,#ff6bd6,#ab82ff);box-shadow:0 0 20px rgba(255,107,214,.7);opacity:0;transform:scale(.4)}
.wow.t-SP .wow-sub{color:#3B1A00;background:linear-gradient(90deg,#ffe66d,#ffb703);box-shadow:0 3px 0 #b26b00,0 0 26px rgba(255,183,3,.9)}
.wow.t-B .wow-sub{padding:4px 14px;font-size:clamp(15px,4.4vw,19px);color:#04213f;background:linear-gradient(90deg,#8fe3ff,#4cc9f0);box-shadow:0 0 14px rgba(76,201,240,.6)}
.wow.wx-burst .wow-sub{animation:wowPop .5s .25s cubic-bezier(.2,1.6,.4,1) forwards}
.wow.wx-final .wow-sub{opacity:1;transform:none}
/* the card: mystery back (same as the card reveal) → the prize, tier-coloured neon */
.wow-cw{position:relative;width:min(56vw,230px,calc(34vh * .75));aspect-ratio:3/4;perspective:1100px;transition:scale .1s ease-out}
.wow.t-B .wow-cw{width:min(50vw,206px,calc(31vh * .75))}
.wow-cw.wx-fly{transition:translate .5s cubic-bezier(.2,.85,.25,1),scale .5s cubic-bezier(.2,.85,.25,1)}
/* a short inhale just before the burst (scale: it adds to the shake), then the card pops */
.wow.wx-inhale .wow-cw{scale:.93}
.wow.wx-burst .wow-cw{animation:wowCardPop .6s cubic-bezier(.2,.9,.3,1.25)}
@keyframes wowCardPop{0%{transform:none}40%{transform:scale(1.06)}100%{transform:none}}
.wow-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.5,0,.2,1.15);will-change:transform}
.wow.t-SP .wow-card{transition-duration:1.25s}
/* the shake is on the card's holder (2026-10-22: on the card itself, its last shake frame and the flip were blended into one matrix and
   the prize jumped into view without turning) */
.wow.wx-charge .wow-cw{animation:wowCharge .42s ease-in-out infinite}
.wow.wx-charge.wx-hot .wow-cw{animation-duration:.17s}
.wow.wx-flip .wow-card{transform:rotateY(180deg)}
.wow-face{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wow.wx-charge .wow-back{box-shadow:0 0 34px 2px rgba(244,240,255,.45),inset 0 0 0 6px rgba(255,255,255,.05);transition:box-shadow .5s}
/* the rim light and the light leaking from the seam (07-actions .rv-back::after / .rv-leak): neutral, then the tier's colour */
.wow.wx-charge .wow-back::after{opacity:.55} .wow.wx-charge.wx-hot .wow-back::after{opacity:1}
.wow.wx-charge .wow-leak{opacity:.5} .wow.wx-hot .wow-leak,.wow.wx-hot .wow-leak::after{opacity:1}
.wow.wx-hot .wow-leak::before,.wow.wx-hot .wow-leak::after{animation:rvLeak .14s ease-in-out infinite alternate}
.wow.wx-burst .wow-leak{opacity:0;transition-duration:.12s}
.wow.wx-charge.wx-hot .wow-back{box-shadow:0 0 70px 14px var(--c),inset 0 0 0 6px rgba(255,255,255,.12)}
.wow-front{transform:rotateY(180deg);background:#24125c;border:3px solid var(--c);box-shadow:0 0 0 4px rgba(14,6,40,.55),0 0 46px 6px var(--c2)}
.wow.t-B .wow-front{background:#10264f;box-shadow:0 0 0 3px rgba(4,12,36,.55),0 0 30px 3px var(--c2)}
.wow-ph{position:absolute;inset:0;display:grid;place-items:center}
.wow-ph img{width:100%;height:100%;object-fit:cover}
.wow-ph>svg{width:90%;height:auto}
.wow.wx-reveal .wow-ph{animation:wowZoom 1.5s cubic-bezier(.15,.85,.25,1) both}
.wow.wx-reveal .wow-front .rv-shine{animation:rvShine 1s .15s cubic-bezier(.3,.6,.3,1) both}
.wow-front .tier{position:absolute;left:10px;top:10px;height:26px;min-width:36px;padding:0 8px;font-size:14px;z-index:1}
.wow.wx-final .wow-cw{animation:wowFloat 2.4s ease-in-out infinite}
.wow-name{max-width:100%;font-weight:800;font-size:17px;line-height:1.3;overflow-wrap:anywhere;opacity:0;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.wow-val{font:800 clamp(30px,9vw,40px)/1.05 var(--f-num,'Baloo 2'),system-ui,sans-serif;color:var(--gold,#FFE66D);white-space:nowrap;opacity:0;
  text-shadow:0 3px 0 #b26b00,0 0 18px rgba(255,183,3,.65)}
.wow.t-SP .wow-val{color:#fff;text-shadow:0 3px 0 #b26b00,0 0 20px #ffb703}
.wow.t-B .wow-val{font-size:clamp(26px,7.6vw,34px);text-shadow:0 2px 0 #b26b00,0 0 12px rgba(255,183,3,.45)}
.wow-note{font-size:13px;line-height:1.4;color:#e9e2ff;opacity:0}
.wow-note b{color:var(--gold,#FFE66D);font-family:var(--f-num)}
.wow.wx-reveal .wow-name,.wow.wx-reveal .wow-val,.wow.wx-reveal .wow-note{opacity:1;transition:opacity .35s}
.wow-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px;opacity:0;pointer-events:none}
.wow-acts .btn{min-height:46px;white-space:normal;line-height:1.2}
.wow-acts .btn svg{flex:none}
.wow-acts .wow-wide{grid-column:1/-1}
.wow-acts .btn:only-of-type{grid-column:1/-1}
.wow-acts .btn.quiet{color:#fff;background:rgba(14,6,40,.45);border-color:rgba(255,255,255,.3)}
.wow-tap{grid-column:1/-1;font-size:13px;font-weight:700;color:#e9e2ff}
.wow.wx-final .wow-acts{opacity:1;pointer-events:auto;transition:opacity .3s}
.wow-skip{position:absolute;z-index:6;top:max(12px,env(safe-area-inset-top));right:12px;min-height:44px;min-width:64px;padding:0 16px;border-radius:999px;
  font-weight:800;font-size:14px;color:#fff;background:rgba(14,6,40,.55);border:1px solid rgba(255,255,255,.35);opacity:0;pointer-events:none;transition:opacity .3s}
.wow.wx-can-skip .wow-skip{opacity:1;pointer-events:auto}
.wow.wx-final .wow-skip{display:none}
/* the optional WOWBOX mascot / sticker (WOW.mascot): empty and hidden unless something is put in it */
.wow-mascot{position:absolute;z-index:6;left:8px;bottom:max(8px,env(safe-area-inset-bottom));width:min(28vw,120px);aspect-ratio:1;pointer-events:none}
.wow-mascot:empty{display:none}
.wow-mascot>*{width:100%;height:100%;object-fit:contain}
.wow.wx-shake .wow-stage{animation:wowQuake .6s linear}
/* A: one camera-like punch at the burst */
.wow.wx-punch .wow-stage{animation:wowPunch .45s cubic-bezier(.2,.8,.3,1)}
@keyframes wowPunch{0%{transform:scale(1.05)}100%{transform:none}}
/* B: a gentle nudge (smaller than A's punch) */
.wow.wx-nudge .wow-stage{animation:wowNudge .35s cubic-bezier(.2,.8,.3,1)}
@keyframes wowNudge{0%{transform:scale(1.022)}100%{transform:none}}
.wow.wx-out{opacity:0;transition:opacity .25s;pointer-events:none}
/* skip: straight to the final picture, no transitions on the way */
.wow.wx-quick .wow-card,.wow.wx-quick .wow-word,.wow.wx-quick .wow-sub,.wow.wx-quick .wow-name,.wow.wx-quick .wow-val,.wow.wx-quick .wow-ph,.wow.wx-quick .wow-gold,.wow.wx-quick .wow-rays{transition:none!important}
.wow.wx-quick .wow-word{opacity:1;transform:none}
.wow.wx-quick .wow-ph,.wow.wx-quick .rv-shine,.wow.wx-quick .wow-ring{animation:none}
@keyframes wowSpin{from{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(360deg)}}
@keyframes wowSlam{0%{opacity:0;transform:scale(1.8)}55%{opacity:1;transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes wowPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes wowCharge{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,2px) rotate(-4deg)}75%{transform:translate(4px,-2px) rotate(4deg)}}
@keyframes wowZoom{from{transform:scale(1.75)}to{transform:scale(1)}}
@keyframes wowFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wowQuake{0%,100%{transform:translate(0,0)}10%{transform:translate(-9px,4px)}20%{transform:translate(8px,-6px)}30%{transform:translate(-7px,-3px)}40%{transform:translate(6px,5px)}
  55%{transform:translate(-4px,2px)}70%{transform:translate(3px,-2px)}85%{transform:translate(-1px,1px)}}
/* the card reveal underneath (×1): its own card and hint hide while the moment plays */
.rv.wow-under .rv-one,.rv.wow-under .rv-hint,.rv.wow-under>.rv-name{opacity:0}
/* B: a blue glow and a few twinkling sparkles on the results card */
.res-hero.wow-b{position:relative;box-shadow:0 0 0 2px #4CC9F0,0 0 28px -2px rgba(76,201,240,.7)}
.wow-spark{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.wow-spark i{position:absolute;width:10px;height:10px;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 20%),linear-gradient(#fff,#fff) 50%/2px 100% no-repeat,linear-gradient(#fff,#fff) 50%/100% 2px no-repeat;
  filter:drop-shadow(0 0 4px #4CC9F0);animation:wowTwinkle 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes wowTwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
/* B on the card reveal: its own rays, sparks and glints (src/02-style.html, 2026-10-22) */
/* Reduce Motion (the phone's setting) or "skip opening animation": no movement, the final picture at once, still glowing */
.wow.wx-rm *,.wow.wx-rm{animation:none!important;transition:none!important}
.wow.wx-rm .wow-rays{opacity:.55;transform:none}
.wow.wx-rm .wow-word,.wow.wx-rm .wow-sub{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wow *,.wow{animation:none!important;transition:none!important}
  .wow .wow-word,.wow .wow-sub{opacity:1;transform:none}
  .wow-spark i{opacity:.8;transform:none;animation:none}
}
@media (max-height:640px){.wow-stage{gap:7px;padding-top:max(50px,env(safe-area-inset-top))}.wow-name{font-size:15px}.wow-acts .btn{min-height:44px;padding-top:6px;padding-bottom:6px}}
/* SP on a short phone (360×640): a smaller card, so its four buttons fit without scrolling (2026-10-23) */
@media (max-height:700px){.wow.t-SP .wow-cw{width:min(56vw,230px,calc(28vh * .75))}}
/* ================= every action feels alive (src/37-fx.js): presses, pops, coins; transforms + opacity only ================= */
/* presses: buttons sink a little and glow; box cards and chips give a small squeeze */
.btn,.pl-go,.pl-n,.sh-pf,.kj-n,.bnav button,#balBtn{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.btn:active:not([disabled]){transform:translateY(2px) scale(.97);filter:brightness(1.12)}
.btn.primary:active:not([disabled]),.btn.gold:active:not([disabled]){box-shadow:0 1px 0 var(--btn-sh,#7d0a87),0 0 18px rgba(255,107,214,.65)}
.pl-n:active,.kj-n:active,.sh-pf:active{transform:scale(.95);filter:brightness(1.15)}
[data-act="open"]{transition:transform .14s ease,filter .14s ease}
[data-act="open"]:active{transform:scale(.975);filter:brightness(1.1) drop-shadow(0 0 10px rgba(171,130,255,.6))}
/* tabs: the new tab's icon bounces */
.bnav button.on svg{animation:fxTab .38s cubic-bezier(.2,1.6,.4,1)}
@keyframes fxTab{0%{transform:scale(.7) translateY(3px)}60%{transform:scale(1.18) translateY(-2px)}100%{transform:none}}
/* ×3 / ×5 / ×10: the cards are dealt in one after another */
.rv-ten .rv-sm{animation:fxDeal .34s cubic-bezier(.2,1.3,.4,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes fxDeal{from{opacity:0;transform:translateY(-60px) rotate(-14deg) scale(.6)}}
/* the layer for pops and coins: never catches a tap */
#fxLayer{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
.fx-pop{position:absolute;left:50%;top:calc(118px + env(safe-area-inset-top,0px));display:grid;justify-items:center;gap:4px;transform:translateX(-50%);animation:fxPop .8s cubic-bezier(.2,1.5,.4,1) forwards}
.fx-pop .fx-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(36,18,92,.0) 70%)}
.fx-pop .fx-ic svg{width:48px;height:48px;filter:drop-shadow(0 0 10px rgba(255,214,90,.55))}
.fx-pop b{padding:4px 12px;border-radius:999px;font-weight:900;font-size:14px;color:#3B1A00;background:linear-gradient(90deg,#ffe66d,#ffb703);box-shadow:0 0 18px rgba(255,183,3,.7);white-space:nowrap}
@keyframes fxPop{0%{opacity:0;transform:translateX(-50%) scale(.3)}25%{opacity:1;transform:translateX(-50%) scale(1.12)}40%{transform:translateX(-50%) scale(1)}75%{opacity:1;transform:translateX(-50%) translateY(-10px)}100%{opacity:0;transform:translateX(-50%) translateY(-34px) scale(.9)}}
.fx-ship .fx-ic svg{animation:fxDrive .8s ease-in forwards}
@keyframes fxDrive{0%,45%{transform:none}55%{transform:translateY(-2px)}100%{transform:translateX(90px)}}
.fx-send .fx-ic svg{animation:fxFly .8s ease-in forwards}
@keyframes fxFly{0%,35%{transform:none}100%{transform:translate(70px,-50px) rotate(12deg) scale(.6);opacity:0}}
.fx-packet .fx-ic svg{animation:fxOpen .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes fxOpen{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
.fx-level{top:34%;animation-duration:1.6s}
.fx-level .fx-ic,.fx-crown .fx-ic{width:96px;height:96px;background:radial-gradient(circle,rgba(255,214,90,.55),rgba(255,183,3,0) 70%);animation:fxGlow .8s ease-in-out 2 alternate}
.fx-level .fx-ic svg,.fx-crown .fx-ic svg{width:72px;height:72px}
@keyframes fxGlow{to{filter:brightness(1.4) drop-shadow(0 0 22px #ffd166)}}
.fx-crown{top:34%;animation-duration:1.4s}
/* coins into the balance */
.fx-coin{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6c2,#ffd166 45%,#ffb703 70%,#b26b00);
  box-shadow:0 0 8px rgba(255,183,3,.8);animation:fxCoin .62s cubic-bezier(.5,0,.75,.4) both}
@keyframes fxCoin{0%{opacity:0;transform:scale(.4)}15%{opacity:1;transform:scale(1.1)}100%{opacity:.9;transform:translate(var(--tx),var(--ty)) scale(.55)}}
#balBtn.fx-bal{animation:fxBal .7s ease-out}
@keyframes fxBal{0%{transform:scale(1)}30%{transform:scale(1.14);box-shadow:0 0 0 2px #ffe66d,0 0 22px rgba(255,183,3,.9)}100%{transform:scale(1)}}
/* a refused action: the message shakes once */
.toast.fx-shake{animation:fxShake .4s linear}
@keyframes fxShake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
/* Reduce Motion: fades and glows only */
@media (prefers-reduced-motion:reduce){
  .btn:active:not([disabled]),.pl-n:active,.kj-n:active,.sh-pf:active,[data-act="open"]:active{transform:none}
  .bnav button.on svg,.rv-ten .rv-sm,.fx-pop .fx-ic,.fx-pop .fx-ic svg,#balBtn.fx-bal,.toast.fx-shake{animation:none}
  .fx-pop{animation:fxFade .9s ease forwards}
  .fx-level,.fx-crown{animation-duration:1.6s}
  #balBtn.fx-bal{box-shadow:0 0 0 2px #ffe66d,0 0 18px rgba(255,183,3,.8)}
}
@keyframes fxFade{0%{opacity:0;transform:translateX(-50%)}20%,70%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
/* ================= player app simplification (src/38-onboard.js; docs/ux-plan.md) — style A tokens only ================= */
/* home: one big box card */
.ob-hero{position:relative;overflow:hidden;margin-top:12px;padding:18px 16px 18px;min-height:190px;border-radius:22px;background:linear-gradient(135deg,#ff3cac 0%,#a42bd6 48%,#3b2ad1 100%);box-shadow:0 0 30px -6px rgba(255,60,172,.6)}
.ob-hero h2{position:relative;z-index:2;max-width:58%;margin:10px 0 6px;font-family:var(--f-display);font-size:23px;line-height:1.15;font-weight:800;overflow-wrap:anywhere}
.ob-hero p{position:relative;z-index:2;max-width:56%;margin:0 0 14px;font-size:13px;line-height:1.45;color:#ffe9fb}
.ob-kick{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--r-pill);background:rgba(255,230,109,.95);color:var(--on-gold);font-size:12px;font-weight:800}
.ob-kick svg{width:14px;height:14px}
.ob-cta{position:relative;z-index:2;max-width:60%;min-height:48px;white-space:normal;line-height:1.2}
.ob-stack{position:absolute;right:-10px;top:26px;width:44%;max-width:180px;height:160px;pointer-events:none}
.ob-ph{position:absolute;display:block;overflow:hidden;border-radius:16px;border:3px solid rgba(255,255,255,.85);box-shadow:0 12px 28px rgba(0,0,0,.35);background:var(--surface-2)}
.ob-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ob-ph.p1{right:14px;top:0;width:58%;aspect-ratio:1;transform:rotate(8deg)}
.ob-ph.p2{right:46%;top:62px;width:50%;aspect-ratio:1;transform:rotate(-8deg)}
.ob-ph.p3{right:2px;top:92px;width:44%;aspect-ratio:1;transform:rotate(3deg)}
/* home: the 新手三步 checklist */
.ob-cl{position:relative;margin-top:12px;padding:16px 16px 6px;border-radius:22px;background:linear-gradient(135deg,rgba(255,60,172,.28),rgba(59,42,209,.38));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 30px -8px rgba(255,60,172,.6)}
.ob-cl-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding-right:34px}
.ob-cl-h h2{margin:0;font-family:var(--f-display);font-size:19px;font-weight:800}
.ob-cl-h span{font-size:12px;color:var(--ink-2);white-space:nowrap}
.ob-bar{height:8px;margin:10px 0 6px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden}
.ob-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .4s}
.ob-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ob-row:first-of-type{border-top:0}
.ob-ck{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-2);font:800 14px/1 var(--f-num);color:var(--ink-2)}
.ob-ck.on{background:var(--ok,#3ddc84);border-color:var(--ok,#3ddc84);color:#052b16}
.ob-ck svg{width:16px;height:16px}
.ob-tx{flex:1;min-width:0}
.ob-tx b{display:block;font-size:14px;line-height:1.3}
.ob-tx small{display:block;font-size:12px;color:var(--ink-2);line-height:1.35}
.ob-row.done .ob-tx b{color:var(--ink-3);text-decoration:line-through}
.ob-row .btn{flex:none;min-width:64px}
.ob-x{position:absolute;right:10px;top:10px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--ink-2)}
.ob-x svg{width:16px;height:16px}
.ob-cl.done{display:flex;align-items:center;gap:12px;padding:14px 16px}
.ob-cl.done b{flex:1}
/* section heads */
.ob-sec{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 2px 8px}
.ob-sec h2{margin:0;font-family:var(--f-display);font-size:18px;font-weight:800}
.ob-more{font-size:13px;font-weight:700;color:var(--ink-2);min-height:32px}
/* how it works */
.ob-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ob-st{position:relative;display:grid;align-content:start;gap:3px;min-height:104px;padding:12px 10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.ob-st svg{position:absolute;right:9px;top:12px;width:20px;height:20px;color:var(--ink-3)}
.ob-st b{font-size:13.5px;line-height:1.25;margin-top:4px;overflow-wrap:anywhere}
.ob-st small{font-size:11.5px;line-height:1.3;color:var(--ink-2);overflow-wrap:anywhere}
.ob-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 13px/1 var(--f-num);background:linear-gradient(180deg,var(--gold),var(--gold-2));color:var(--on-gold)}
/* rewards row */
.ob-rw-g{display:grid;gap:8px}
.ob-rw-i{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:12px;font-weight:700;line-height:1.2;text-align:center}
.ob-rw-i svg{width:22px;height:22px;color:var(--gold)}
.ob-rw-i span{overflow-wrap:anywhere}
.ob-dot{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--hot,#ff3d71);box-shadow:0 0 0 2px var(--bg,#1a0b45)}
/* QA15 (S6): rewards that wait for the first top-up: a small lock instead of the red dot, and one line saying so */
.ob-lk{position:absolute;top:5px;right:6px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--ink-2)}
.ob-lk svg{width:10px;height:10px;color:var(--ink-2)}
.ob-rw-i.lk svg:first-child{opacity:.75}
.ob-rw-lock{display:flex;align-items:flex-start;gap:6px;margin:8px 2px 0;font-size:12px;line-height:1.4;color:var(--ink-2)}
.ob-rw-lock svg{flex:none;width:14px;height:14px;margin-top:1px}
.btn.ob-tlk{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.25;font-size:12px;padding-left:10px;padding-right:10px}
.btn.ob-tlk svg{flex:none;width:13px;height:13px}
/* QA15 (P5): the "Unlimited box" pill explains itself on a tap */
.ob-tpill{display:inline-flex;align-items:center;gap:5px;border:0;cursor:pointer;font:inherit}
.ob-tpill .ob-i{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;border:1px solid currentColor;font-size:10px;font-weight:900;font-style:italic;line-height:1;opacity:.85}
/* filters, second-level choices, the one-line ticker */
.ob-pick{margin-bottom:0}
.ob-home .st-tabs-w{margin-top:4px}
.ob-sub{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px;padding-bottom:2px}
.ob-sub::-webkit-scrollbar{display:none}
.ob-sub button{flex:none;min-height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--ink-2);background:rgba(255,255,255,.05);border:1px solid var(--line)}
.ob-sub button.on{color:#fff;border-color:var(--accent,#ff3cac);background:rgba(255,60,172,.16)}
.ob-tick{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;margin-top:10px;padding:6px 12px;border-radius:12px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.25);font-size:12.5px;color:#ffe9b0;text-align:left;overflow:hidden}
.ob-tick svg{flex:none;width:18px;height:18px;color:var(--sp)}
.ob-tick span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-below{margin-top:22px}
/* box page: a shorter photo on phones, so price, best prize, chance and the honest line are on the first screen */
@media (max-width:599.98px){.dhero>.thumb{aspect-ratio:1.7}}
.ob-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.ob-facts div{padding:8px 10px}
.ob-facts .num{font-size:clamp(15px,4.6vw,20px);white-space:nowrap}
/* QA15 (P3): a price never breaks ("6.790.000 ₫" on one line): long amounts are set smaller */
.ob-facts .num.sm{font-size:clamp(13px,3.8vw,17px)}
.ob-facts .num.xs{font-size:clamp(11px,3.2vw,15px);letter-spacing:-.2px}
.facts.ob-facts div+div+div .num{color:#fff}
.ob-honest{display:flex;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:rgba(43,134,197,.16);border:1px solid rgba(76,201,240,.4);font-size:13.5px;line-height:1.45;color:#d8f3ff}
.ob-honest svg{flex:none;width:20px;height:20px;color:var(--tb);margin-top:1px}
.ob-fold{padding:0}
.ob-fold>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;font-weight:800;color:var(--ink-2);cursor:pointer;list-style:none}
.ob-fold>summary::-webkit-details-marker{display:none}
.ob-fold>summary svg{width:20px;height:20px;flex:none}
.ob-fold>summary span{flex:1;min-width:0}
.ob-fold>summary svg:last-child{transition:transform .2s}
.ob-fold[open]>summary svg:last-child{transform:rotate(180deg)}
.ob-fold-b{display:grid;gap:12px;padding:0 16px 16px}
.ob-fold-b .panel{box-shadow:none;margin:0;padding:12px;background:rgba(255,255,255,.03)}
.ob-sw{flex-wrap:wrap;gap:10px}
/* the draw bar: how many + one big button, above the bottom nav */
.drawbar.ob-dbar{display:grid;gap:8px;padding:10px 12px 10px}
body.ob-onbox .drawbar.ob-dbar{bottom:calc(57px + env(safe-area-inset-bottom,0px));padding-bottom:10px}
body.ob-onbox #main.page{padding-bottom:calc(220px + env(safe-area-inset-bottom,0px))}
.ob-q{display:flex;gap:6px;max-width:600px;width:100%;margin:0 auto}
.ob-qn{position:relative;flex:1;display:grid;place-items:center;text-align:center;padding:0;min-height:40px;border-radius:12px;font:800 15px/1 var(--f-num);color:var(--ink-2);background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.ob-qn.on{color:#fff;border-color:var(--accent,#ff3cac);background:rgba(255,60,172,.16);box-shadow:0 0 12px rgba(255,60,172,.35)}
.ob-qn i{position:absolute;top:-9px;right:3px;padding:2px 5px;border-radius:6px;background:var(--gold-2);color:var(--on-gold);font:800 10px/1.2 var(--f-ui,system-ui);font-style:normal}
.drawbar .dopt.ob-go{display:flex;justify-content:center;align-items:center;max-width:600px;width:100%;margin:0 auto;min-height:54px}
.drawbar .dopt.ob-go b{font-size:clamp(15px,4.4vw,18px);white-space:normal;text-align:center;line-height:1.2}
@media (min-width:760px){body.ob-onbox .drawbar.ob-dbar{bottom:0}}
/* results: ship it / sell it back */
.ob-choice{display:grid;gap:8px}
.ob-q-t{font-size:15px}
.ob-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ob-c{display:grid;align-content:start;gap:4px;min-height:96px;padding:12px;border-radius:16px;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.ob-c svg{width:24px;height:24px}
.ob-c.ship svg{color:var(--tb)}
.ob-c.sell{border-color:rgba(255,209,102,.5)}
.ob-c.sell svg{color:var(--gold)}
.ob-c b{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.ob-c small{font-size:12px;line-height:1.35;color:var(--ink-2)}
.ob-later{margin:0;font-size:12.5px;color:var(--ink-2);text-align:center}
.ob-back{display:grid;gap:4px;padding:12px;border-radius:14px;background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.3);text-align:center}
.ob-back b{color:var(--money)}
.ob-back small{font-size:12.5px;color:var(--ink-2);line-height:1.4}
/* 我的奖品: one tap per prize */
.ob-ba{display:flex;gap:6px;margin-top:8px}
.ob-ba .btn{min-height:34px;padding:0 12px;font-size:12.5px;white-space:nowrap}
/* 我的 */
.ob-g{margin:18px 4px 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
:root:lang(zh) .ob-g,:root:lang(km) .ob-g,:root:lang(th) .ob-g{letter-spacing:0}
.ob-wd{display:block;width:100%;margin-top:8px;padding:6px 4px;font-size:12.5px;color:var(--ink-2);text-align:center;line-height:1.4}
.ob-wd u{color:#fff;text-underline-offset:2px}
.ob-mh-r{display:flex;gap:10px;margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ob-mh-r svg{flex:none;width:20px;height:20px;color:var(--gold);margin-top:2px}
/* the guide: 30 seconds first */
.ob-gs{margin-top:12px;padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(255,209,102,.35)}
.ob-gs h2{margin:0 0 10px;font-family:var(--f-display);font-size:19px;font-weight:800}
.ob-gs ol{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:10px}
.ob-gs li{display:flex;gap:10px}
.ob-gs li b{display:block;font-size:14.5px}
.ob-gs li small{display:block;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ob-gfull{margin-top:14px}
.ob-gfull>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-weight:800;cursor:pointer;list-style:none}
.ob-gfull>summary::-webkit-details-marker{display:none}
.ob-gfull>summary svg{width:20px;height:20px;transition:transform .2s}
.ob-gfull[open]>summary svg{transform:rotate(180deg)}
/* the 一番赏 / 更多玩法 tab */
.ob-ways{display:grid;gap:8px}
.ob-way{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px;border-radius:16px;text-align:left;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.ob-way svg{flex:none;width:28px;height:28px;padding:8px;box-sizing:content-box;border-radius:14px;color:#d6c5ff;background:rgba(171,130,255,.18)}
.ob-way b{display:block;font-size:15px}
.ob-way small{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
/* the first-time tour */
.ob-tour{position:fixed;inset:0;z-index:80}
.ob-tour[hidden]{display:none}
.ob-hole{position:fixed;border-radius:18px;box-shadow:0 0 0 9999px rgba(7,3,26,.8),0 0 0 3px var(--gold),0 0 24px 6px rgba(255,209,102,.55);transition:all .3s;pointer-events:none}
.ob-tip{position:fixed;left:16px;right:16px;max-width:440px;margin:0 auto;padding:16px;border-radius:20px;background:linear-gradient(180deg,#341a86,#24125c);border:1px solid rgba(255,230,109,.5);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.ob-tip.center{top:50%;transform:translateY(-50%);text-align:center}
.ob-tip-t{display:block;margin-bottom:4px;font-family:var(--f-display);font-size:19px;font-weight:800}
.ob-tip p{margin:0;font-size:14px;line-height:1.5;color:#e2d9ff}
.ob-tip-r{display:flex;align-items:center;gap:10px;margin-top:14px}
.ob-dots{display:flex;gap:5px;flex:1}
.ob-dots i{width:7px;height:7px;border-radius:9px;background:rgba(255,255,255,.25)}
.ob-dots i.on{width:20px;background:var(--gold)}
.ob-skip{min-height:40px;padding:0 6px;font-weight:700;color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.ob-hole,.ob-bar i,.ob-fold>summary svg,.ob-gfull>summary svg{transition:none}}
/* QA15 (S4): the cards strip's badge shows the tier's word */
.cd-pull .s{max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
/* QA15 (P5): the box card's chip is the category only; a long one wraps to a second line instead of being cut */
.sc-tag.cat{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3;padding:2px 7px;overflow-wrap:anywhere}
/* ================= 留住顾客 + 负责任玩法 (src/39-retention.js) — style A tokens only, calm and premium (no cartoon) ================= */
.rt-h2{display:flex;align-items:center;gap:8px;margin:18px 2px 0;font-family:var(--f-display);font-size:18px;font-weight:800}
.rt-h2 svg{width:20px;height:20px;color:var(--gold)}
.rt-err{color:var(--hot,#ff3d71);margin:6px 0 0}
.rt-err[hidden]{display:none}
/* banners: a protection that is running */
.rt-banner{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);font-size:13px;line-height:1.45}
.rt-banner svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--gold)}
.rt-banner span{flex:1;min-width:0;overflow-wrap:anywhere}
.rt-banner.soft{background:rgba(255,255,255,.04)}
.rt-banner .btn{flex:none;align-self:center}
/* 18+ */
.rt-age h2{margin:10px 0 6px}
.rt-age p{color:var(--ink-2);line-height:1.5}
.rt-age-ic{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font:800 18px/1 var(--f-num)}
.rt-age .btn + .btn{margin-top:8px}
/* 连续签到 */
.rt-streak{margin-top:16px}
.rt-sh h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px}
.rt-sh svg{width:18px;height:18px;color:var(--gold)}
.rt-streak > p{margin:6px 0 10px;line-height:1.45}
.rt-sg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.rt-sd{position:relative;display:grid;justify-items:center;align-content:center;gap:2px;min-height:62px;padding:6px 2px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line);text-align:center}
.rt-sd small{font-size:10.5px;line-height:1.15;color:var(--ink-3);overflow-wrap:anywhere}
.rt-sd b{font:800 13px/1.1 var(--f-num);overflow-wrap:anywhere}
.rt-sd svg{width:16px;height:16px;color:var(--gold)}
.rt-sd.cp{border-color:rgba(255,230,109,.45)}
.rt-sd.cp b{font-size:11.5px;color:var(--money)}
.rt-sd.got{background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.45)}
.rt-sd.now{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.rt-sd i{position:absolute;top:-6px;right:-4px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok,#3ddc84);color:#052b16}
.rt-sd i svg{width:11px;height:11px;color:#052b16}
.rt-sf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;min-height:40px}
.rt-sf > span,.rt-sf .rt-lk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.rt-sf small{color:var(--ink-2);font-size:12px;line-height:1.35;flex:1;min-width:0}
.rt-sf svg{width:15px;height:15px}
.rt-sf .btn{flex:none}
/* 段位特权 */
.rt-perks{display:grid;gap:8px;width:100%;margin-top:12px;text-align:left}
.rt-ph{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px}
.rt-ph b{font-size:15px}
.rt-ph small{color:var(--gold);font-weight:700;font-size:12px}
.rt-pl{display:grid;gap:6px}
.rt-pl span{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.35}
.rt-pl svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--gold)}
.rt-pnext{margin:0}
.rt-pt{display:grid;gap:0;font-size:12.5px}
.rt-tr{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));align-items:center;gap:6px;padding:8px 4px;border-top:1px solid var(--line)}
.rt-pt:not(:has(.rt-tr > :nth-child(5))) .rt-tr{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.rt-tr > span{min-width:0;overflow-wrap:anywhere;text-align:center}
.rt-tr > span:first-child{text-align:left}
.rt-tr small{display:block;color:var(--ink-3);font-size:11px}
.rt-th{border-top:0;color:var(--ink-2);font-size:11px;font-weight:700}
.rt-tr.on{background:rgba(255,230,109,.08);border-radius:10px}
.rt-y svg{width:15px;height:15px;color:var(--ok,#3ddc84)}
.rt-n{color:var(--ink-3)}
.rt-bd p{line-height:1.45}
.rt-bd-ok{display:flex;align-items:flex-start;gap:8px;font-weight:700}
.rt-bd-ok svg{flex:none;width:18px;height:18px;color:var(--gold)}
/* 理性消费 */
.rt-sec{margin-top:12px}
.rt-sec .panel-h h3,.rt-bd .panel-h h3{display:flex;align-items:center;gap:8px}
.rt-sec .panel-h svg,.rt-bd .panel-h svg{width:17px;height:17px;color:var(--gold)}
.rt-lims{display:grid;gap:10px}
.rt-lin{display:flex;align-items:center;gap:8px}
.rt-cur{flex:none;font-weight:700;color:var(--ink-2)}
.rt-lin .input{flex:1;min-width:0}
.rt-next{display:flex;align-items:flex-start;gap:6px;color:var(--gold)}
.rt-next svg{flex:none;width:14px;height:14px;margin-top:2px}
.rt-btns{display:flex;flex-wrap:wrap;gap:8px}
.rt-btns .btn{flex:1 1 30%;min-width:96px}
.rt-on{margin:0 0 8px;padding:8px 10px;border-radius:12px;background:rgba(255,230,109,.1);font-weight:700;font-size:13px;line-height:1.4}
.rt-link{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;text-align:left;font-weight:700}
.rt-link svg{width:18px;height:18px;color:var(--gold)}
.rt-link span:nth-child(2){flex:1}
.rt-help{margin-top:12px;display:flex;align-items:center;gap:10px}
.rt-help p{flex:1;margin:0;line-height:1.45}
.rt-help .btn{flex:none}
/* reality check */
.rt-rc-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,230,109,.12);color:var(--gold)}
.rt-rc-ic svg{width:28px;height:28px}
.rt-rc p{line-height:1.5}
.rt-rc .btn.block + .btn.block{margin-top:8px}
.rt-rc .btn.quiet{margin-top:8px}
/* 本月账单 */
.rt-months{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rt-months button{flex:none;min-height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.rt-months button.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.rt-sm{margin-top:12px}
.rt-sr{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.rt-sr:first-child{border-top:0}
.rt-sr span{min-width:0;overflow-wrap:anywhere;font-size:14px}
.rt-sr small{display:block;font-size:11.5px;color:var(--ink-3)}
.rt-sr b{flex:none;font-size:15px}
.rt-sr.sub{padding:5px 0 5px 12px;border-top:0}
.rt-sr.sub span{font-size:12.5px;color:var(--ink-2)}
.rt-sr.sub b{font-size:13px;color:var(--ink-2)}
.rt-sr.tot b{color:var(--money)}
.rt-sr.net{margin-top:4px;border-top:1px solid var(--line-2)}
.rt-sr.net b{color:var(--money)}
.rt-sr.net.neg b{color:var(--ink)}
/* 收集图鉴 */
.rt-set{margin-top:12px}
.rt-seth{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rt-seth h3{margin:0;font-size:16px;min-width:0;overflow-wrap:anywhere}
.rt-seth .pill{flex:none}
.rt-set > p{margin:6px 0 10px}
.rt-ag{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.rt-ai{display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 6px 10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px dashed var(--line-2);text-align:center;min-width:0}
.rt-ai.have{border-style:solid;border-color:rgba(61,220,132,.45);background:rgba(61,220,132,.07)}
.rt-aim{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.rt-aim img{width:100%;height:100%;object-fit:cover}
.rt-aim svg{width:30px;height:30px;color:var(--ink-3)}
.rt-ai:not(.have) .rt-aim img{filter:grayscale(1);opacity:.55}
.rt-aim i{position:absolute;right:3px;bottom:3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok,#3ddc84)}
.rt-aim i svg{width:11px;height:11px;color:#052b16}
.rt-ai b{font-size:12px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rt-ai small{font-size:10.5px;line-height:1.3;color:var(--ink-3);overflow-wrap:anywhere}
.rt-ai .btn{margin-top:2px;font-size:11px;padding:0 8px;min-height:30px;white-space:normal;line-height:1.2}
.rt-set .btn.block{margin-top:12px}
.rt-bl{display:flex;flex-wrap:wrap;gap:8px}
.rt-badge{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:2px 12px;border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold);font-size:12.5px;font-weight:700}
.rt-badge svg{width:14px;height:14px}
/* 盒王名人堂 */
.rt-hall .panel{margin-top:10px}
.rt-hk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.rt-hk:first-of-type{border-top:0}
.rt-hk b{display:block;font-size:14px}
.rt-hk small{display:block;font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere}
.rt-hk > span:last-child{text-align:right;white-space:nowrap}
.rt-hk .pos{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:800 12px/1 var(--f-num);background:rgba(255,255,255,.08)}
.rt-crown svg{width:18px;height:18px;color:var(--ink-3)}
.rt-hk.now .rt-crown svg{color:var(--gold)}
/* 收到了吗？ */
.rt-rcv{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.rt-rim{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.rt-rim img{width:100%;height:100%;object-fit:cover}
.rt-rim svg{width:26px;height:26px;color:var(--gold)}
.rt-rtx{flex:1;min-width:0}
.rt-rtx b{display:block;font-size:15px}
.rt-rtx small{display:block;margin:2px 0 8px;font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.rt-rtx .row{gap:8px;flex-wrap:wrap}
#retRcvSheet textarea{width:100%;resize:vertical;min-height:80px}
/* ===== 排行榜 as a real leaderboard (2026-10-23, src/39-retention.js vRank): header strip with the countdown, a podium for the top 3,
   numbered rows, a sticky "my rank" bar, the hall as ranked lists. Scoped to .lbx; transforms + opacity only; static under Reduce Motion. ===== */
.lbx{--m-gold:conic-gradient(from 200deg,#fff6c8,#e6b85c,#a8741f,#ffe7a0,#e6b85c,#fff6c8);--m-silver:conic-gradient(from 200deg,#ffffff,#c9cfdc,#7f889c,#eef1f6,#b3bac9,#ffffff);
  --m-bronze:conic-gradient(from 200deg,#ffd9b5,#c8834a,#7d4520,#f0b07c,#c8834a,#ffd9b5)}
.lbx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbx-sec,.lbx-hall,.lbx-mine{max-width:640px;margin-left:auto;margin-right:auto}
.lbx-sec{margin-top:14px}
.lbx-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0 2px 10px}
.lbx-head>svg{flex:none;width:24px;height:24px;color:var(--gold);filter:drop-shadow(0 0 6px rgba(255,209,102,.45))}
.lbx-head h2{flex:1 1 auto;min-width:0;margin:0;font-family:var(--f-display);font-size:19px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.lbx-reset{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.3;color:var(--ink-2);
  background:rgba(255,255,255,.06);border:1px solid var(--line-2)}
.lbx-reset svg{flex:none;width:15px;height:15px;color:var(--gold)}
.lbx-reset b{color:#fff;font-size:13px;white-space:nowrap;letter-spacing:.03em}
/* the podium: #2 · #1 · #3, each standing on its step (#1 the tallest) */
.lbx-board{position:relative}
.lbx-pod{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;padding-top:4px}
.lbx-pod.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:400px;margin:0 auto}
.lbx-pod.n1{grid-template-columns:minmax(0,220px);justify-content:center}
.lbx .rank.lbx-p{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:0;text-align:center;background:none;border:0;border-radius:0;box-shadow:none}
.lbx-p.p1{order:2} .lbx-p.p2{order:1} .lbx-p.p3{order:3}
.lbx-p>*{position:relative;z-index:1;max-width:100%}
.lbx-p .lbx-badge{display:grid;place-items:center;width:26px;height:26px;margin-bottom:-6px;z-index:2;border-radius:50%;font:800 13px/1 var(--f-num);color:#2a1606;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.lbx-p .lbx-badge i{font-style:normal}
.lbx-p.m-silver .lbx-badge{background:var(--m-silver)} .lbx-p.m-bronze .lbx-badge{background:var(--m-bronze)}
.lbx-p .lbx-badge.crown{width:40px;height:30px;margin-bottom:-8px;border-radius:0;box-shadow:none;color:#ffd166}
.lbx-p .lbx-badge.crown svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,209,102,.6))}
.lbx-p .lbx-badge.crown svg path{fill:#ffd166;stroke:#a8741f}
/* the initial in a metallic ring */
.lbx .lbx-p .av{width:58px;height:58px;font-size:22px;border:3px solid transparent;background:linear-gradient(160deg,#4a2ca0,#24125c) padding-box,var(--m-silver) border-box;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.lbx .lbx-p.m-gold .av{width:70px;height:70px;font-size:26px;border-width:3.5px;background:linear-gradient(160deg,#5a35b8,#2a1468) padding-box,var(--m-gold) border-box;box-shadow:0 0 0 4px rgba(255,209,102,.16),0 0 26px rgba(255,209,102,.45),0 8px 18px rgba(0,0,0,.4)}
.lbx .lbx-p.m-bronze .av{background:linear-gradient(160deg,#4a2ca0,#24125c) padding-box,var(--m-bronze) border-box}
.lbx .lbx-p.me .av{box-shadow:0 0 0 3px var(--bg,#160a3d),0 0 0 5px var(--accent),0 0 18px rgba(255,60,172,.55)}
.lbx-p b{display:block;width:100%;margin-top:4px;font-size:14px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx .lbx-p.me b{color:var(--accent-ink)}
.lbx-prize{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;min-height:2.5em;font-size:11.5px;line-height:1.25;color:var(--ink-3);overflow-wrap:anywhere}
.lbx-p .num{font-size:15px;color:var(--money);white-space:nowrap}
.lbx-p.m-gold b{color:#ffe7a0}
.lbx-p.m-gold .num{font-size:17px;text-shadow:0 0 12px rgba(255,209,102,.45)}
.lbx-step{display:grid;place-items:center;width:100%;margin-top:6px;border-radius:14px 14px 4px 4px;font:800 26px/1 var(--f-num);color:rgba(255,255,255,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border-top:2px solid #c9cfdc;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.lbx-p.m-gold .lbx-step{height:66px;font-size:32px;color:#ffe7a0;background:linear-gradient(180deg,rgba(255,209,102,.34),rgba(255,209,102,.05));border-top-color:#e6b85c;box-shadow:inset 0 1px 0 rgba(255,246,200,.35),0 -6px 24px -8px rgba(255,209,102,.6)}
.lbx-p.m-silver .lbx-step{height:48px}
.lbx-p.m-bronze .lbx-step{height:36px;border-top-color:#c8834a;background:linear-gradient(180deg,rgba(200,131,74,.3),rgba(200,131,74,.04))}
/* #1: a soft gold glow and slow light rays behind the avatar */
.lbx-rays{position:absolute!important;z-index:0!important;left:50%;top:-34px;width:210px;height:210px;margin-left:-105px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,222,140,.24) 0 6deg,transparent 6deg 20deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);mask-image:radial-gradient(closest-side,#000 18%,transparent 72%);animation:lbxSpin 28s linear infinite}
.lbx-rays::after{content:"";position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,209,102,.45),transparent)}
@keyframes lbxSpin{to{transform:rotate(360deg)}}
/* ranks 4+: a number pill, alternating backgrounds, my row highlighted */
.lbx-list{list-style:none;display:grid;gap:6px;margin:14px 0 0;padding:0}
.lbx .rank.lbx-r{grid-template-columns:auto 36px minmax(0,1fr) auto;gap:10px;padding:9px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);box-shadow:none}
.lbx .rank.lbx-r:nth-child(even){background:rgba(255,255,255,.075)}
.lbx .lbx-r .pos{display:grid;place-items:center;min-width:30px;height:24px;padding:0 7px;border-radius:999px;font:800 13px/1 var(--f-num);color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line-2)}
.lbx .lbx-r .av{width:36px;height:36px;font-size:14px}
.lbx-who{min-width:0}
.lbx-who b{display:block;font-size:14px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx-who small{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx .lbx-r .num{font-size:15px;white-space:nowrap}
.lbx .rank.lbx-r.me{border-color:var(--accent);background:linear-gradient(90deg,rgba(255,60,172,.2),rgba(255,60,172,.05));box-shadow:0 0 14px -4px rgba(255,60,172,.6)}
.lbx .lbx-r.me .pos{background:var(--accent);border-color:var(--accent)}
.lbx .lbx-r.me b{color:var(--accent-ink)}
/* "my rank": sticks above the bottom bar while my row is off screen; a tap scrolls to it */
.lbx-mine{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:6;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;width:100%;
  margin-top:14px;padding:9px 14px;border-radius:16px;color:#fff;text-align:left;cursor:pointer;background:linear-gradient(90deg,#561f97,#2e1872);border:1px solid var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 16px -4px rgba(255,60,172,.6)}
.lbx-mine[hidden]{display:none}
.lbx-mine .pos{grid-row:span 2;display:grid;place-items:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;font:800 14px/1 var(--f-num);background:var(--accent)}
.lbx-mine>span:nth-child(2){font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbx-mine .num{color:var(--money);font-size:16px}
.lbx-mine small{grid-column:2/-1;font-size:11.5px;color:var(--ink-2)}
@media (min-width:760px){.lbx-mine{bottom:16px}}
/* 盒王名人堂 with the same feel */
.lbx-hall{margin-top:26px}
.lbx-hall>p{margin:-4px 2px 0}
.lbx-hlist{list-style:none;margin:0;padding:0}
.lbx-hk{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line)}
.lbx-hk:first-child{border-top:0}
.lbx-hm{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:800 12px/1 var(--f-num);color:#fff;background:rgba(255,255,255,.1)}
.lbx-hm.medal{color:#2a1606;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.lbx-hk.m-gold .lbx-hm{background:var(--m-gold)} .lbx-hk.m-silver .lbx-hm{background:var(--m-silver)} .lbx-hk.m-bronze .lbx-hm{background:var(--m-bronze)}
.lbx-hk.m-gold{background:linear-gradient(90deg,rgba(255,209,102,.12),transparent 70%);border-radius:10px}
.lbx-crown svg{width:15px;height:15px;margin-right:4px;vertical-align:-2px;color:var(--gold)}
.lbx-crown svg path{fill:var(--gold)}
.lbx-days{font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.lbx-hb .rt-hk.now{margin:0 -8px;padding-inline:8px;border-radius:10px;background:linear-gradient(90deg,rgba(255,209,102,.13),transparent 75%)}
.lbx-hb .rt-hk.now .rt-crown svg path{fill:var(--gold)}
/* the entrance: the podium rises (#3, #2, #1), then the rows slide in — the first time the page opens */
.lbx.lbx-in .lbx-p{animation:lbxRise .36s cubic-bezier(.2,.85,.3,1) both;animation-delay:calc(var(--i,0) * 40ms - var(--lbx-el,0ms))}
.lbx.lbx-in .lbx-r{animation:lbxIn .32s cubic-bezier(.2,.85,.3,1) both;animation-delay:calc(var(--i,0) * 35ms - var(--lbx-el,0ms))}
@keyframes lbxRise{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes lbxIn{from{opacity:0;transform:translateX(-12px)}}
@media (prefers-reduced-motion:reduce){.lbx .lbx-p,.lbx .lbx-r,.lbx-rays{animation:none!important}}
@media (max-width:370px){.lbx-pod{gap:5px}.lbx .lbx-p .av{width:50px;height:50px;font-size:19px}.lbx .lbx-p.m-gold .av{width:60px;height:60px;font-size:23px}.lbx-p b{font-size:13px}.lbx-p .num{font-size:14px}.lbx-p.m-gold .num{font-size:15.5px}}
/* ================= 我的 → 账户: the 震动反馈 switch (src/40-haptics.js), drawn like the box page's switches ================= */
#hapRow .r{display:flex;align-items:center;justify-content:flex-end}
.hap-sw{position:relative;display:inline-block;flex:none;width:42px;height:24px;border-radius:12px;background:rgba(255,255,255,.14);transition:background .15s}
.hap-sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s}
.hap-sw.on{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.hap-sw.on::after{transform:translateX(18px)}
#hapRow:focus-visible .hap-sw{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.hap-sw,.hap-sw::after{transition:none}}
/* ================= 离线小游戏 · 宝石合成 (src/41-offgame.js): full screen over the page, the app's violet + gold ================= */
html.og-on,html.og-on body{overflow:hidden;overscroll-behavior:none}
.og{position:fixed;inset:0;z-index:85;display:flex;justify-content:center;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  background:var(--tg-bg);background-image:var(--page-bg);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  --bs:min(calc(100vw - 32px),408px,max(232px,calc(100vh - 292px)))}
@supports (height:100dvh){.og{--bs:min(calc(100vw - 32px),408px,max(232px,calc(100dvh - 292px)))}}
.og:focus{outline:none}
/* centred on tall screens (the board under the thumb); a short screen scrolls from the top (auto margins never cut it off) */
.og-in{width:100%;max-width:440px;min-width:0;margin:auto 0;display:flex;flex-direction:column;gap:12px;padding:12px 16px 18px}
/* back online */
.og-back{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:7px 7px 7px 12px;border-radius:14px;overflow:hidden;
  background:rgba(61,220,132,.13);border:1px solid rgba(61,220,132,.45);animation:ogFade .25s ease-out}
.og-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good)}
.og-bt{flex:1;min-width:0;font-weight:700;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}
.og-back .btn{flex:none;min-height:36px;max-width:60%;white-space:normal;line-height:1.2;padding:4px 12px}
.og-idle{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--good);transform-origin:left;transform:scaleX(0)}
.og-idle.run{animation:ogIdle 8s linear forwards}
/* header */
.og-top{display:flex;align-items:center;gap:12px;min-width:0}
.og-h{flex:1;min-width:0}
.og-h h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.2;color:#fff;overflow-wrap:anywhere}
:root:lang(zh) .og-h h2{font-weight:400;font-size:24px}
.og-free{display:inline-block;margin:3px 0 0;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.6;color:var(--gold);
  background:rgba(255,230,109,.09);border:1px solid rgba(255,230,109,.32)}
.og-x,.og-re{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.06);color:#fff;cursor:pointer;font:inherit}
.og-x svg{width:18px;height:18px}
.og-x:focus-visible,.og-re:focus-visible,.og .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* score, best, restart */
.og-bar{display:flex;gap:8px;align-items:stretch;min-width:0}
.og-sc{position:relative;flex:1 1 0;min-width:0;padding:6px 12px 5px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.og-sc small{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-sc b{display:block;font-family:var(--f-num);font-weight:800;font-size:22px;line-height:1.15;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.og-hi b{color:var(--gold)}
.og-hi.hot{border-color:rgba(255,230,109,.6);box-shadow:var(--glow-gold)}
.og-plus{position:absolute;right:10px;top:6px;font:800 13px/1 var(--f-num);font-style:normal;color:var(--gold);opacity:0;pointer-events:none}
.og-plus.on{animation:ogPlus .7s ease-out}
.og-re{width:52px;height:auto;min-height:44px;border-radius:14px}
.og-re svg{width:22px;height:22px}
/* the board: 4×4, tiles slide with transforms only */
.og-stage{position:relative;align-self:center;width:var(--bs);touch-action:none}
.og-board{--g:8px;position:relative;width:var(--bs);height:var(--bs);border-radius:20px;
  background:linear-gradient(180deg,#2c176c,#1b0c4b);border:1px solid rgba(255,230,109,.24);
  box-shadow:0 14px 34px -14px rgba(5,0,20,.85),inset 0 1px 0 rgba(255,255,255,.08),0 0 26px -8px rgba(171,130,255,.55)}
.og-board.gold{animation:ogGold 1.8s ease-out}
.og-cells,.og-tiles{position:absolute;inset:var(--g)}
.og-cells{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--g)}
.og-cells i{border-radius:12px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.og-t{--tc:rgba(180,140,255,.35);position:absolute;left:0;top:0;z-index:1;width:calc((100% - 3 * var(--g)) / 4);height:calc((100% - 3 * var(--g)) / 4);
  transform:translate(calc(var(--c) * (100% + var(--g))),calc(var(--r) * (100% + var(--g))));transition:transform .11s ease-out}
.og-t.gone{z-index:0}
.og-t>i{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;
  background:radial-gradient(78% 78% at 50% 36%,var(--tc),transparent 74%),#2b1670;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 0 rgba(0,0,0,.28),0 4px 10px -4px rgba(0,0,0,.65)}
.og-t svg{display:block;width:76%;height:76%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.og-t>b{position:absolute;right:6px;bottom:4px;font:800 10px/1 var(--f-num);color:rgba(255,255,255,.5)}
.og-v1{--tc:rgba(180,140,255,.38)} .og-v2{--tc:rgba(77,155,255,.38)} .og-v3{--tc:rgba(47,211,138,.34)} .og-v4{--tc:rgba(255,177,61,.36)}
.og-v5{--tc:rgba(255,77,126,.38)} .og-v6{--tc:rgba(241,230,255,.3)} .og-v7{--tc:rgba(255,211,77,.4)} .og-v8{--tc:rgba(189,244,255,.36)} .og-v9{--tc:rgba(255,201,60,.45)}
.og-v10{--tc:rgba(255,230,109,.62)}
.og-v10>i{box-shadow:inset 0 0 0 1.5px rgba(255,230,109,.75),0 0 16px -2px rgba(255,209,102,.8)}
.og-t.new>i{animation:ogIn .17s ease-out .09s backwards}
.og-t.pop>i{animation:ogPop .19s ease-out}
.og-t.glow{z-index:2}
.og-t.glow::after{content:"";position:absolute;inset:-3px;border-radius:15px;pointer-events:none;box-shadow:0 0 0 2px var(--gold),0 0 22px 5px rgba(255,209,102,.75);animation:ogGlow 1.6s ease-out forwards}
/* messages over the board */
.og-msg{position:absolute;left:50%;top:12px;z-index:3;max-width:calc(100% - 24px);padding:8px 14px;border-radius:14px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--gold),var(--gold-2));color:var(--on-gold);font-weight:800;font-size:13.5px;line-height:1.35;text-align:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.25),var(--glow-gold);pointer-events:none}
.og-msg.on{animation:ogFade .25s ease-out}
.og-over{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:8px;padding:18px;text-align:center;border-radius:20px;
  background:rgba(14,6,40,.84);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:ogFade .3s ease-out}
.og-over h3{margin:0;font-family:var(--f-display);font-size:21px;font-weight:800;line-height:1.25;color:#fff}
.og-over p{margin:0;color:var(--ink-2);font-weight:700}
.og-over .og-nb{color:var(--gold)}
.og-over .btn{margin-top:6px;min-width:150px}
/* the gem ladder: what is reached is lit, the goal is the golden WOWBOX */
.og-lad{display:grid;grid-template-columns:repeat(10,minmax(0,28px));justify-content:center;gap:4px}
.og-lad i{display:block;padding:2px;border-radius:8px;opacity:.26;filter:grayscale(1);transition:opacity .3s,filter .3s}
.og-lad i.on{opacity:1;filter:none}
.og-lad i.cur{background:rgba(255,230,109,.14);box-shadow:0 0 0 1px rgba(255,230,109,.55)}
.og-lad svg{display:block;width:100%;height:auto}
.og-hint{margin:0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
:root:lang(km) .og-h h2,:root:lang(km) .og-over h3{line-height:1.5}
/* the "no connection" screen: a quiet gold button under 重试 */
.btn.og-wait{gap:8px;max-width:100%;white-space:normal;line-height:1.3;background:rgba(255,230,109,.08);border:1px solid rgba(255,230,109,.45);color:var(--gold)}
.btn.og-wait svg{flex:none;width:18px;height:18px}
@keyframes ogIn{from{transform:scale(.2);opacity:0}}
@keyframes ogPop{50%{transform:scale(1.15)}}
@keyframes ogGlow{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@keyframes ogGold{30%{box-shadow:0 14px 34px -14px rgba(5,0,20,.85),0 0 0 2px var(--gold),0 0 40px 6px rgba(255,209,102,.6)}}
@keyframes ogPlus{0%{opacity:0;transform:translateY(4px)}25%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes ogFade{from{opacity:0}}
@keyframes ogIdle{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){
  .og-t{transition:none}
  .og-t>i,.og-board.gold,.og-over,.og-back,.og-msg.on{animation:none!important}
  .og-plus.on{animation-name:ogFade;animation-direction:reverse}
  .og-idle{display:none}
}