/* ==========================================================================
   Gamarium · Arcade Bright: Vault (+ holder, pool, buy, positions, pay, wallet), Quests (+ share, X), Ranks,
   Farm Race, Friends (+ Ambassador), Arena (+ deck editor), the battle screen
   ========================================================================== */

/* ==================================================================== VAULT */
.ph-holder { flex: none; display: flex; align-items: center; gap: 6px; height: 46px; padding: 0 12px 0 4px; border-radius: 15px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: left; }
.ph-holder svg { width: 36px; height: 36px; }
.ph-holder b { display: block; font-size: 15px; line-height: 1; }
.ph-holder small { display: block; margin-top: 2px; font: 900 10px/1 var(--f-ui); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.ph-holder:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.vb { padding: 14px; }
.vb-top { display: flex; align-items: center; gap: 12px; }
.vb-tok { flex: none; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(42, 22, 82, .25)); }
.vb-main { flex: 1; min-width: 0; }
.vb-main > b { display: block; margin-top: 6px; font-size: 32px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vb-main .vv { margin-top: 6px; font: 800 12px/1.2 var(--f-ui); color: var(--ink-2); }
.vb-hint { display: block; margin-top: 6px; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.vbcs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.vbc { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; border-radius: 10px; border: 2px solid var(--ink); color: #fff; box-shadow: 0 2px 0 var(--ink); }
.vbc svg { width: 14px; height: 14px; filter: drop-shadow(.8px .8px 0 var(--ink)) drop-shadow(-.8px -.8px 0 var(--ink)); }
.vbc b { font: 400 14px/1 var(--f-d); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.vbc span { font: 900 10.5px/1 var(--f-ui); text-shadow: 0 1px 0 rgba(42, 22, 82, .5); }
.vbc--v { background: var(--g-violet); } .vbc--g { background: var(--g-gold); } .vbc--s { background: var(--g-sky); } .vbc--o { background: var(--g-green); }
.vb .stats3 { margin-top: 12px; }
.vb .vbcs + .stats3 { margin-top: 0; }
.vb-cap { margin: 12px 0 14px; }
.vb-cap .bar { height: 12px; }
.vb-cap-row { display: flex; justify-content: space-between; margin-top: 6px; font: 800 11.5px/1 var(--f-ui); color: var(--ink-2); }
.vb-cap-row b { color: var(--ink); }
/* holder card */
.hl { display: block; width: 100%; padding: 13px; text-align: left; }
.hl:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.hl-top { display: flex; align-items: center; gap: 12px; }
.hl-badge { flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--lilac); border: 2px solid var(--ink); }
.hl-meta { flex: 1; min-width: 0; }
.hl-meta > b { display: block; margin-top: 4px; font-size: 22px; line-height: 1; }
.hl-meta > span:last-child { display: block; margin-top: 4px; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.hl-meta > span b { color: var(--ink); }
.hl-top > svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); stroke-width: 3; }
.hl-bar { margin-top: 12px; }
.hl-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.hl-perks div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 12px; background: var(--lilac); border: 2px solid var(--ink); }
.hl-perks b { font-size: 16px; line-height: 1; color: var(--violet-d); }
.hl-perks span { font: 900 9.5px/1 var(--f-ui); color: var(--ink-2); text-align: center; }
.hlt-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; }
.hlt-row.is-on { background: #FFF6D8; }
.hlt-name b { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 1; }
.hlt-name b .t { height: 17px; font-size: 9px; padding: 0 4px; border-width: 1.5px; }
.hlt-name > span { display: block; margin-top: 3px; font: 800 11.5px/1 var(--f-ui); color: var(--ink-2); }
.hlt-p { text-align: right; }
.hlt-p b { display: block; font: 900 12.5px/1 var(--f-ui); color: var(--green-d); }
.hlt-p span { display: block; margin-top: 4px; font: 800 10.5px/1.2 var(--f-ui); color: var(--ink-3); }
.hl-rv { margin-top: 18px; filter: drop-shadow(0 8px 0 rgba(10, 4, 30, .45)); animation: rv-rise .95s cubic-bezier(.2, .8, .25, 1.05) .22s both; }
.hl-rv-perks, .amb-rv-perks { display: flex; gap: 8px; margin-top: 16px; animation: rv-pop .5s cubic-bezier(.2, .9, .3, 1.4) .9s both; }
.hl-rv-perks span, .amb-rv-perks span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 66px; padding: 9px 8px; border-radius: 14px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink);
  font: 900 10.5px/1 var(--f-ui); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.hl-rv-perks b, .amb-rv-perks b { font-size: 20px; line-height: 1; color: var(--violet-d); text-transform: none; letter-spacing: 0; }
.amb-rv-perks b svg { width: 20px; height: 20px; color: var(--gold-d); }
/* airdrop pool */
.pool { padding: 12px; }
.pool-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pool-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--g-green); border: 2px solid var(--ink); color: #fff; }
.pool-ic svg { width: 18px; height: 18px; filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }
.pool-t { flex: 1; min-width: 0; }
.pool-t b { display: block; font-size: 16px; line-height: 1; }
.pool-t small { display: block; margin-top: 3px; font: 800 11px/1.2 var(--f-ui); color: var(--ink-2); }
.pool-pct { font-size: 20px; line-height: 1; color: var(--green-d); }
.pool-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font: 800 11px/1.2 var(--f-ui); color: var(--ink-3); }
.pool--c { margin-top: 14px; padding: 12px; border-radius: 18px; background: #fff; border: 2px solid var(--ink); }
.rc-row { display: flex; width: 100%; margin-top: 12px; text-align: left; }
.rc-row:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
/* presale + buy */
.pr { position: relative; border-radius: 24px; border: var(--bw) solid var(--ink); box-shadow: 0 5px 0 var(--ink); overflow: hidden; background: linear-gradient(180deg, #7E52FF, #5326D9); color: #fff; }
.pr .rays { position: absolute; right: -80px; top: 50%; width: 300px; height: 300px; margin-top: -150px; border-radius: 50%; background: var(--corona-w); opacity: .6; }
.pr-in { position: relative; padding: 14px; }
.pr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pr-top .k { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--gold); border: 2px solid var(--ink); font: 900 10.5px/1 var(--f-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.pr-buyers { font: 900 11.5px/1 var(--f-ui); color: #E8E0FF; }
.pr-price { margin-top: 10px; font-size: 24px; line-height: 1; color: #fff; }
.pr-price em { font-style: normal; color: var(--gold); }
.pr .pbar { margin-top: 10px; height: 19px; }
.pr .pbar span { line-height: 15px; }
.pr-row { margin-top: 6px; font: 800 11.5px/1.2 var(--f-ui); color: #E8E0FF; }
.pr-row b { color: #fff; }
.pr-next { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(20, 6, 70, .35); border: 2px solid rgba(42, 22, 82, .6); font: 800 11.5px/1.3 var(--f-ui); color: #F1EBFF; }
.pr-next svg { flex: none; width: 16px; height: 16px; color: var(--gold); stroke-width: 2.8; }
.pr-next b { color: #fff; }
.buy { margin-top: 14px; padding: 14px; }
.buy-lbl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 900 11px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.amt { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px 0 8px; border-radius: 17px; background: var(--lilac); border: var(--bw) solid var(--ink); box-shadow: inset 0 3px 0 rgba(42, 22, 82, .08); }
.amt .gi { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--ton); border: 2px solid var(--ink); color: #fff; }
.amt .gi svg { width: 22px; height: 22px; }
.amt input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 28px/1 var(--f-d); color: var(--ink); }
.amt-u { font: 900 13px/1 var(--f-ui); color: var(--ink-2); }
.picks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.picks button { height: 34px; border-radius: 11px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--ink); font: 400 15px/1 var(--f-d); color: var(--ink); text-align: center; }
.picks button.is-on { background: var(--gold); }
.picks button:active { transform: translateY(2px); box-shadow: 0 .5px 0 var(--ink); }
.get { margin-top: 16px; }
.get-val { display: flex; align-items: center; gap: 8px; }
.get-val b { font-size: 34px; line-height: 1; color: var(--violet-d); }
.get-val > span { font: 900 13px/1 var(--f-ui); color: var(--ink-2); margin-top: 8px; }
.split { margin-top: 10px; border-radius: 12px; border: 2px dashed #CFC2EA; padding: 2px 10px; }
.split div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); }
.split div + div { border-top: 2px dashed #E6DDF5; }
.split b { color: var(--ink); font-weight: 900; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plan { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: center; }
.plan .p-name { font: 900 12px/1 var(--f-ui); color: var(--ink-2); }
.plan .p-apr { font-size: 26px; line-height: 1; color: var(--violet-d); }
.plan .p-lock { font: 800 10.5px/1 var(--f-ui); color: var(--ink-3); }
.plan.is-on { background: var(--g-gold); }
.plan.is-on .p-apr { color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.plan.is-on .p-name, .plan.is-on .p-lock { color: var(--ink); }
.boost-note, .gp-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font: 800 12px/1.4 var(--f-ui); color: var(--ink-2); }
.boost-note > svg { flex: none; width: 16px; height: 16px; color: var(--gold-d); margin-top: 1px; }
.boost-note b, .gp-note b { color: var(--ink); font-weight: 900; }
.gp-note { align-items: center; padding: 9px 10px; border-radius: 12px; background: #FFF6D8; border: 2px solid var(--ink); margin-bottom: 14px; }
.closed { padding: 22px 16px 16px; text-align: center; }
.closed-ic { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: var(--g-orange); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: #fff; }
.closed-ic.is-ok { background: var(--g-green); }
.closed-ic svg { width: 28px; height: 28px; filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1.2px -1.2px 0 var(--ink)); }
.closed h3 { margin-top: 12px; font-size: 24px; line-height: 1; }
.closed p { margin: 8px 0 16px; font: 800 13px/1.45 var(--f-ui); color: var(--ink-2); }
/* positions */
.pos-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; }
.ring { flex: none; position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--ink);
  background: conic-gradient(var(--violet) calc(var(--p) * 1%), #E9E2F4 0); }
.ring > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.ring svg { width: 13px; height: 13px; stroke-width: 3; }
.ring.is-flex { background: var(--green); }
.ring.is-flex svg { color: var(--green-d); }
.pos-main { flex: 1; min-width: 0; }
.pos-main b { display: block; font-size: 18px; line-height: 1; }
.pos-main > span { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 800 11.5px/1 var(--f-ui); color: var(--ink-2); }
.pos-main .t { height: 18px; font-size: 9.5px; padding: 0 5px; border-width: 1.5px; }
.pos-side { text-align: right; }
.pos-side b { display: block; font-size: 18px; line-height: 1; color: var(--green-d); }
.pos-side span { display: block; margin-top: 5px; font: 800 11px/1 var(--f-ui); color: var(--ink-3); }
.steps { padding: 4px 14px; }
.step { display: flex; gap: 12px; padding: 12px 0; }
.step + .step { border-top: 2px dashed #E6DDF5; }
.step > em { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--g-violet); border: 2px solid var(--ink); font-size: 17px; font-style: normal; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.step b { display: block; font-size: 16px; line-height: 1.1; }
.step span { display: block; margin-top: 3px; font: 800 12px/1.4 var(--f-ui); color: var(--ink-2); }
/* pay sheet */
.pay { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 4px; }
.pay-ic { position: relative; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; background: var(--g-violet); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: #fff; margin-top: 10px; }
.pay-ic svg { width: 32px; height: 32px; filter: drop-shadow(1.3px 1.3px 0 var(--ink)) drop-shadow(-1.3px -1.3px 0 var(--ink)); }
.pay-ic.is-spin i { position: absolute; inset: -10px; border-radius: 31px; border: 4px solid transparent; border-top-color: var(--violet); border-right-color: var(--violet); animation: spin 1s linear infinite; }
.pay-ic.is-bad { background: var(--g-red); }
.pay-ic.is-warn { background: var(--g-orange); }
.pay h3 { margin-top: 18px; font-size: 25px; line-height: 1; }
.pay > p { margin: 8px 6px 16px; font: 800 13px/1.45 var(--f-ui); color: var(--ink-2); }
.pay-box { width: 100%; text-align: left; margin-bottom: 14px; }
.pay-box > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; font: 800 12.5px/1.2 var(--f-ui); color: var(--ink-2); }
.pay-box b { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; color: var(--ink); }
.pay-box b svg { width: 15px; height: 15px; color: var(--ton); }
/* wallet sheet */
.wl-token { position: relative; overflow: hidden; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, #8C62FF, #5326D9); color: #fff; text-align: left; }
.wl-rays { position: absolute; right: -61px; top: -51px; width: 230px; height: 230px; border-radius: 50%; background: var(--corona-w); opacity: .8; }
.wl-coin { position: absolute; right: -6px; top: 4px; width: 120px; filter: drop-shadow(0 5px 0 rgba(20, 6, 60, .45)); }
.wl-t { position: relative; max-width: 220px; }
.wl-t > b { display: block; margin-top: 10px; font-size: 36px; line-height: 1; color: #fff; }
.wl-t > span:last-child { display: block; margin-top: 6px; font: 800 12.5px/1.4 var(--f-ui); color: #EFE8FF; }
.wl-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.wl-steps span { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border-radius: 11px; background: rgba(20, 6, 70, .35); border: 2px solid var(--ink); font: 900 11.5px/1 var(--f-ui); color: #fff; white-space: nowrap; }
.wl-steps em { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 7px; background: #fff; border: 1.5px solid var(--ink); font-size: 12px; font-style: normal; color: var(--ink); }
.wl-steps .is-on { background: var(--gold); color: var(--ink); }
.wl-gp { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; height: 32px; padding: 0 12px 0 5px; border-radius: 16px; background: #fff; border: 2px solid var(--ink); font: 800 12.5px/1 var(--f-ui); color: var(--ink-2); }
.wl-gp b { color: var(--ink); font-weight: 900; }
.wl-conn { margin-top: 14px; padding: 14px; }
.wl-conn-top { display: flex; align-items: flex-start; gap: 12px; }
.wl-conn-t { flex: 1; min-width: 0; }
.wl-conn-t b { display: block; font-size: 19px; line-height: 1.05; }
.wl-conn-t span { display: block; margin-top: 4px; font: 800 12px/1.4 var(--f-ui); color: var(--ink-2); }
.wl-perks { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.wl-perks > span { display: flex; align-items: center; gap: 8px; font: 800 12.5px/1.3 var(--f-ui); color: var(--ink-2); }
.wl-perks svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.4; border: 1.5px solid var(--ink); }
.wl-perks b { color: var(--ink); }
.addr { display: flex; align-items: center; gap: 8px; margin: 14px 0 12px; height: 46px; padding: 0 5px 0 12px; border-radius: 14px; background: var(--lilac); border: 2px solid var(--ink); font: 900 13.5px/1 var(--f-ui); }
.addr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wl-conn .cb + .cb { margin-top: 10px; }

/* ==================================================================== QUESTS + SHARE + X */
.ck { padding: 14px; }
.ck-top { display: flex; align-items: center; gap: 12px; }
.ck-t { flex: 1; min-width: 0; }
.ck-t b { display: block; font-size: 20px; line-height: 1; }
.ck-t span { display: block; margin-top: 4px; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 16px 0 14px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 0 8px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--ink); min-width: 0; }
.day-l { font: 900 9px/1 var(--f-ui); color: var(--ink-3); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.day-ic { display: grid; place-items: center; height: 24px; }
.day-ic .gpc { width: 22px; height: 22px; }
.day-ic > svg { width: 20px; height: 20px; }
.day b { font-size: 13px; line-height: 1; }
.day.is-done { background: #E2F9EC; border-color: var(--green-d); box-shadow: 0 2.5px 0 var(--green-d); }
.day.is-done .day-ic > svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.6; }
.day.is-done b, .day.is-done .day-l { color: var(--green-d); }
.day.is-today { background: var(--g-gold); transform: translateY(-3px); }
.day.is-today .day-l { color: var(--ink); }
.day.is-chest { background: var(--lilac); }
.day.is-chest .day-ic > svg { color: var(--violet); stroke-width: 2.6; }
.qlist { display: flex; flex-direction: column; gap: 10px; }
.quest { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 20px; }
.quest.is-done { background: #FAF7FF; }
.quest.is-done .q-title { color: var(--ink-2); }
.quest.is-claim { background: #FFF8DF; }
.q-main { flex: 1; min-width: 0; }
.q-title { font: 400 15.5px/1.15 var(--f-d); letter-spacing: .01em; color: var(--ink); }
.q-desc { margin-top: 4px; font: 800 11.5px/1.35 var(--f-ui); color: var(--ink-2); }
.q-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.q-meta .bar { flex: 1; height: 11px; }
.q-meta > span { font: 900 11.5px/1 var(--f-ui); color: var(--ink-2); }
.q-side { flex: none; }
.q-checking { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 800 11px/1 var(--f-ui); color: var(--sky-d); }
.q-note { margin-top: 5px; font: 800 10.5px/1.25 var(--f-ui); color: var(--ink-3); }
.rw { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font: 900 11.5px/1 var(--f-ui); color: var(--ink); }
.rw > span { display: inline-flex; align-items: center; gap: 4px; }
.rw .gmc { width: 17px; height: 17px; }
.rw-g { color: var(--violet-d); }
.rw em { font-style: normal; color: var(--ink-3); font-weight: 800; }
.dly { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; }
.dly-ring { flex: none; position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: var(--bw) solid var(--ink); background: conic-gradient(var(--green) calc(var(--p) * 1%), #E9E2F4 0); }
.dly-ring > span { display: flex; align-items: baseline; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); padding-top: 10px; }
.dly-ring b { font-size: 18px; line-height: 1; }
.dly-ring small { font: 900 10px/1 var(--f-ui); color: var(--ink-3); }
.dly-main { flex: 1; min-width: 0; }
.dly-main b { display: block; font-size: 17px; line-height: 1; }
.dly-main > span:not(.rw) { display: block; margin-top: 4px; font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); }
.dly-gift { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--lilac); border: 2px solid var(--ink); color: var(--violet); }
.dly-gift svg { width: 20px; height: 20px; }
.shc { padding: 13px; background: linear-gradient(180deg, #E4F4FF, #FFFFFF 60%); }
.shc-top { display: flex; align-items: center; gap: 12px; }
.shc-vid { position: relative; flex: none; width: 92px; height: 56px; border-radius: 12px; overflow: hidden; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); transform: rotate(-3deg); background: var(--ink); }
.shc-vid img { width: 100%; height: 100%; object-fit: cover; }
.shc-vid i { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); display: grid; place-items: center; color: var(--sky-d); }
.shc-vid i svg { width: 10px; height: 10px; margin-left: 2px; }
.shc-main { flex: 1; min-width: 0; }
.shc-main > b { display: block; font-size: 19px; line-height: 1; }
.shc-main > span { display: block; margin-top: 4px; font: 800 11.5px/1.3 var(--f-ui); color: var(--ink-2); }
.shc-main > span.rw { display: inline-flex; flex-wrap: nowrap; gap: 4px; margin-top: 6px; color: var(--ink); font-weight: 900; }
.shc-main > span.rw em { margin-left: 1px; }
.shc-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.shc-row .bar { flex: 1; }
.shc-row > span { font: 900 12px/1 var(--f-ui); color: var(--ink-2); }
.shc-note { margin: 8px 0 0; font: 800 11px/1.25 var(--f-ui); color: var(--ink-3); }
.x-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.x-rw { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 11px 0 6px; border-radius: 16px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--ink); font: 900 12px/1 var(--f-ui); }
.x-rw i { width: 2px; height: 14px; background: #E6DDF5; margin: 0 2px; }
.x-rw .gmc { width: 18px; height: 18px; }
.x-handle { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 16px; background: var(--ink); color: #fff; font: 900 12px/1 var(--f-ui); }
.x-handle svg { width: 13px; height: 13px; }
.x-handle svg:last-child { color: var(--green); stroke-width: 3.4; }
.x-first { margin: -4px 2px 12px; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.x-post { padding: 13px; }
.x-post p { margin-top: 8px; font: 800 13.5px/1.5 var(--f-ui); color: var(--ink); word-break: break-word; }
.x-post mark { padding: 1px 6px; border-radius: 6px; background: var(--gold); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 900; }
.x-post em { font-style: normal; color: var(--violet-d); font-weight: 900; }
.x-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 12px; }
.x-verify { margin-top: 16px; }
.x-step { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 900 13px/1 var(--f-ui); }
.x-step em { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--violet); border: 2px solid var(--ink); font-size: 13px; font-style: normal; color: #fff; }
.x-link { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 5px 0 12px; border-radius: 15px; background: #fff; border: var(--bw) solid var(--ink); box-shadow: inset 0 3px 0 rgba(42, 22, 82, .06); }
.x-link input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 800 13px/1 var(--f-ui); color: var(--ink); }
.x-link input::placeholder { color: var(--ink-3); }
.x-err { display: flex; gap: 10px; margin-top: 10px; padding: 11px 12px; background: #FFECEE; border-color: var(--red); box-shadow: 0 3px 0 var(--red); }
.x-err > svg { flex: none; width: 20px; height: 20px; color: var(--red); stroke-width: 2.6; }
.x-err b { display: block; font-size: 15px; line-height: 1.1; }
.x-err span { display: block; margin-top: 3px; font: 800 12px/1.35 var(--f-ui); color: var(--ink-2); }
.x-err.is-review { background: #FFF4E2; border-color: var(--orange); box-shadow: 0 3px 0 var(--orange); }
.x-err.is-review > svg { color: var(--orange); }
.x-done { display: flex; gap: 12px; align-items: center; padding: 13px; background: #E2F9EC; }
.x-done > svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 12px; background: var(--green); border: 2px solid var(--ink); color: #fff; stroke-width: 3.4; }
.x-done b { display: block; font-size: 18px; line-height: 1; }
.x-done span { display: block; margin-top: 3px; font: 800 12px/1.35 var(--f-ui); color: var(--ink-2); }
.x-perk { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 11px; border-radius: 13px; background: #FFF4E2; border: 2px dashed var(--orange); font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.x-perk svg { flex: none; width: 17px; height: 17px; color: var(--orange); }
.x-perk b { color: var(--ink); }
.x-viral { margin-top: 14px; padding: 13px; }
.x-viral-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.x-viral-top b { font-size: 17px; line-height: 1; }
.x-viral-top span { font: 800 11px/1.2 var(--f-ui); color: var(--ink-3); text-align: right; }
.x-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.x-tiers span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--lilac); border: 2px solid var(--ink); }
.x-tiers b { font-size: 17px; line-height: 1; color: var(--violet-d); }
.x-tiers em { font: 900 10px/1 var(--f-ui); font-style: normal; color: var(--ink-2); }
.x-vrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 2px dashed #E6DDF5; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.x-vrow > svg { flex: none; width: 17px; height: 17px; color: var(--violet); }
.x-vrow span { flex: 1; min-width: 0; }
.x-vrow b { color: var(--ink); }

/* ==================================================================== RANKS + RACE + LISTS */
.lbl { overflow: hidden; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.lrow.is-me { background: #FFF6D8; }
.rk { flex: none; min-width: 30px; height: 26px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--lilac); border: 2px solid var(--ink); font: 400 13px/1 var(--f-d); color: var(--ink); }
.rk1 { background: var(--g-gold); } .rk2 { background: linear-gradient(180deg, #F2F4FA, #C5CBDA); } .rk3 { background: linear-gradient(180deg, #FFC79A, #E58A4A); }
.lrow-main { flex: 1; min-width: 0; }
.lrow-main b { display: flex; align-items: center; gap: 2px; font: 900 13.5px/1.1 var(--f-ui); color: var(--ink); white-space: nowrap; overflow: hidden; }
.lrow-main b .t { margin-left: 4px; height: 17px; font-size: 9.5px; padding: 0 5px; border-width: 1.5px; }
.lrow-main > span { display: block; margin-top: 3px; font: 800 11px/1 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow-v { flex: none; font-size: 16px; line-height: 1; color: var(--ink); }
.lrow-v small { font: 900 10px/1 var(--f-ui); color: var(--ink-3); }
.podium { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin-top: 6px; padding-top: 30px; isolation: isolate; }
.podium-rays { position: absolute; left: 50%; top: 42%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; pointer-events: none; z-index: -1; background: var(--corona-w); }
.pod { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.pod .crown { position: absolute; top: -27px; left: 50%; transform: translateX(-50%) rotate(-8deg); width: 36px; height: 36px; color: var(--gold); z-index: 2;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink)) drop-shadow(-1.5px -1.5px 0 var(--ink)) drop-shadow(1.5px -1.5px 0 var(--ink)) drop-shadow(-1.5px 1.5px 0 var(--ink)); }
.pod .crown svg { width: 100%; height: 100%; }
.pod-name { display: flex; align-items: center; justify-content: center; max-width: 100%; margin-top: 8px; font: 400 15px/1.1 var(--f-d); white-space: nowrap; overflow: hidden; }
.pod-gp { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font: 900 12px/1 var(--f-ui); }
.pod-block { width: 100%; margin-top: 8px; display: grid; place-items: center; border-radius: 16px 16px 6px 6px; border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.pod-block span { font-size: 30px; line-height: 1; color: #fff; }
.pod--1 .pod-block { height: 92px; background: var(--g-gold); }
.pod--2 .pod-block { height: 68px; background: linear-gradient(180deg, #F2F4FA, #B9C0D2); }
.pod--3 .pod-block { height: 52px; background: linear-gradient(180deg, #FFC79A, #DD7A38); }
.an { display: flex; align-items: center; gap: 12px; margin: 22px 0 14px; padding: 12px; }
.an img { flex: none; width: 52px; height: 52px; object-fit: contain; }
.an b { display: block; font-size: 18px; line-height: 1.1; }
.an > div > span { display: block; margin-top: 3px; font: 800 12px/1.35 var(--f-ui); color: var(--ink-2); }
.an > div > span b { display: inline; font: 900 12px/1 var(--f-ui); color: var(--ink); }
.view[data-view="ranks"] { padding-bottom: 96px; }
.me-row { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--tab-bottom) + 34px); width: min(calc(100% - 24px), 456px);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--g-gold); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.me-row .rk { background: #fff; }
.me-row .lrow-main > span { color: var(--ink); opacity: .75; }
.rc-hero { position: relative; overflow: hidden; padding: 14px; background: linear-gradient(180deg, #FFE27A, #FFB20C); }
.rc-rays { position: absolute; left: -54px; top: -56px; width: 210px; height: 210px; border-radius: 50%; background: var(--corona-w); opacity: .9; pointer-events: none; }
.rc-top { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rc-top img { width: 88px; margin: -18px -6px -8px -8px; filter: drop-shadow(0 4px 0 rgba(42, 22, 82, .3)); }
.rc-top .cap { color: var(--ink); opacity: .7; }
.rc-top b { display: block; margin-top: 4px; font-size: 40px; line-height: 1; color: #fff; }
.rc-hero .stats3 > * { background: #fff; }
.prz { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.prz span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 2px solid var(--ink); }
.prz em { font: 900 10px/1 var(--f-ui); font-style: normal; color: var(--ink-2); }
.prz b { font-size: 15px; line-height: 1; color: var(--ink); }
.prz .is-me { background: var(--violet); }
.prz .is-me em { color: #E8E0FF; }
.prz .is-me b { color: #fff; }

/* ==================================================================== FRIENDS + AMBASSADOR */
.amb-card { position: relative; overflow: hidden; padding: 14px; border-radius: 24px; background: linear-gradient(180deg, #FFF0B8 0%, #FFFFFF 64%); scroll-margin-top: 120px; }
.amb-card.is-on { background: linear-gradient(180deg, #FFE27A, #FFB20C); }
.amb-rays { position: absolute; left: 66px; top: 86px; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; pointer-events: none; background: var(--corona-g); }
.amb-card.is-on .amb-rays { background: var(--corona-w); }
.amb-top { position: relative; display: flex; align-items: center; gap: 14px; }
.amb-cardprev { flex: none; width: 104px; transform: rotate(-5deg); margin: 2px 0 6px 2px; }
.amb-head { flex: 1; min-width: 0; }
.amb-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px 0 3px; border-radius: 8px; background: var(--ink); color: #FFE27A; font: 400 11.5px/1 var(--f-d); letter-spacing: .06em; }
.amb-tag .amb { margin: 0; width: 16px; height: 16px; border-width: 1.5px; box-shadow: none; vertical-align: 0; }
.amb-tag .amb svg { width: 10px; height: 10px; }
.amb-head > b { display: block; margin-top: 8px; font-size: 23px; line-height: 1.05; color: #fff; }
.amb-head > span:last-child { display: block; margin-top: 6px; font: 900 12px/1.3 var(--f-ui); color: var(--ink); }
.amb-count { display: flex; align-items: baseline; gap: 5px; margin: 8px 0 6px; }
.amb-count b { font-size: 30px; line-height: 1; color: var(--violet-d); }
.amb-count span { font: 900 12.5px/1 var(--f-ui); color: var(--ink-2); }
.amb-rule { position: relative; display: flex; align-items: flex-start; gap: 7px; margin-top: 12px; padding: 9px 11px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); font: 800 12px/1.4 var(--f-ui); color: var(--ink-2); }
.amb-rule svg { flex: none; width: 15px; height: 15px; color: var(--violet); margin-top: 2px; }
.amb-rule b { color: var(--ink); }
.amb-perks { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.amb-card:not(.is-on) .ap:not(.is-head) { flex-direction: column; justify-content: center; text-align: center; gap: 5px; padding: 9px 4px; }
.amb-card:not(.is-on) .ap:not(.is-head) b { font-size: 11px; }
.amb-card.is-on .amb-perks { grid-template-columns: 1fr 1fr; }
.amb-lock { position: absolute; z-index: 10; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(5deg); display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 8px;
  background: var(--ink); color: #fff; font: 900 10.5px/1 var(--f-ui); white-space: nowrap; }
.amb-lock svg { width: 11px; height: 11px; stroke-width: 3; color: var(--gold); }
.amb-cardprev { position: relative; }
.ap { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 9px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--ink); }
.ap > svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--g-violet); color: #fff; border: 1.5px solid var(--ink); }
.ap > span { min-width: 0; }
.ap b { display: block; font: 900 11.5px/1.15 var(--f-ui); color: var(--ink); }
.ap small { display: block; margin-top: 2px; font: 800 10px/1.2 var(--f-ui); color: var(--ink-3); }
.ap.is-head { grid-column: 1 / -1; background: var(--g-gold); }
.ap.is-head > svg { background: var(--g-pink); width: 32px; height: 32px; }
.ap.is-head b { font: 400 17px/1 var(--f-d); letter-spacing: .02em; }
.ap.is-head small { color: var(--ink); opacity: .75; font-size: 10.5px; }
.ap.is-on b { flex: 1; }
.ap.is-on > svg:last-child { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green); stroke-width: 3.4; }
.fx-hero { margin-top: 14px; padding: 14px; }
.fx-hero-top { display: flex; align-items: center; gap: 12px; }
.fx-hero-top img { flex: none; width: 58px; height: 58px; object-fit: contain; }
.fx-hero-top > div { flex: 1; min-width: 0; }
.fx-hero-top b { display: block; margin-top: 5px; font-size: 30px; line-height: 1; }
.fx-hero-top .vv { margin-top: 5px; font: 800 12px/1.2 var(--f-ui); color: var(--ink-2); }
.fx-hint { display: block; margin-top: 5px; font: 800 12px/1 var(--f-ui); color: var(--ink-3); }
.fx-gp { align-self: flex-start; }
.fx-hero .live { margin: 12px 0; }
.fx-tier { display: block; width: 100%; margin-top: 14px; padding: 13px; text-align: left; }
.fx-tier:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.fx-tier-top { display: flex; align-items: center; gap: 12px; }
.fx-tier-meta { flex: 1; min-width: 0; }
.fx-tier-meta b { display: block; margin-top: 4px; font-size: 22px; line-height: 1; }
.fx-tier-meta > span:last-child { display: block; margin-top: 4px; font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.fx-tier-top > svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); stroke-width: 3; }
.fx-prog { margin-top: 12px; }
.fx-prog-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; font: 800 12px/1.2 var(--f-ui); color: var(--ink-2); }
.fx-prog-row b { color: var(--ink); }
.fx-next { margin-top: 12px; }
.fx-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 7px; }
.fx-next-grid div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; background: var(--lilac); border: 2px solid var(--ink); }
.fx-next-grid b { font-size: 18px; line-height: 1; color: var(--violet-d); }
.fx-next-grid span { font: 900 10px/1 var(--f-ui); color: var(--ink-2); }
.fx-inv { padding: 13px; }
.fx-link { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 5px 0 12px; margin-bottom: 12px; border-radius: 15px; background: var(--lilac); border: 2px solid var(--ink); font: 900 13px/1 var(--f-ui); }
.fx-link > svg { flex: none; width: 17px; height: 17px; color: var(--violet); }
.fx-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats3--big > * { padding: 12px 8px; }
.stats3--big b { font-size: 24px; }
.fx-ms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; }
.fx-m { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px; border-radius: 14px; border: 2px solid transparent; }
.fx-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); font-size: 15px; color: var(--ink-2); }
.fx-dot svg { width: 20px; height: 20px; stroke-width: 3.4; color: #fff; }
.fx-m b { font-size: 16px; line-height: 1; }
.fx-m > span:last-child { font: 900 10px/1 var(--f-ui); color: var(--ink-3); }
.fx-m.is-done .fx-dot { background: var(--green); }
.fx-m.is-next { background: #FFF6D8; border: 2px dashed var(--gold-d); }
.fx-m.is-next .fx-dot { background: var(--gold); color: var(--ink); }
.fx-fr { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.fx-fr-main { flex: 1; min-width: 0; }
.fx-fr-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.fx-fr-name > b { font: 900 14px/1.1 var(--f-ui); margin-right: 2px; }
.fx-fr-name .t { height: 18px; font-size: 9.5px; padding: 0 5px; border-width: 1.5px; }
.fx-fr-name .amb { margin-left: 0; }
.fx-fr-main > span { display: block; margin-top: 4px; font: 800 11.5px/1.25 var(--f-ui); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-earn { flex: none; text-align: right; }
.fx-earn b { display: block; font-size: 15px; line-height: 1; color: var(--green-d); }
.fx-earn span { font: 900 10px/1 var(--f-ui); color: var(--ink-3); }
.fx-sent { display: inline-flex; align-items: center; gap: 4px; font: 900 11.5px/1 var(--f-ui); color: var(--green-d); }
.fx-sent svg { width: 14px; height: 14px; stroke-width: 3.4; }
.fx-more { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 44px; font: 900 13px/1 var(--f-ui); color: var(--violet-d); }
.fx-more svg { width: 16px; height: 16px; stroke-width: 3; }
.tt-row { display: grid; grid-template-columns: 38px 1fr 54px 58px 58px; align-items: center; gap: 6px; padding: 9px 10px; }
.tt-row.is-on { background: #FFF6D8; }
.tt-head { font: 900 10px/1 var(--f-ui); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.tt-head .tt-name { grid-column: 1 / 3; }
.tt-name b { display: flex; align-items: center; gap: 5px; font-size: 15px; line-height: 1; }
.tt-name b .t { height: 17px; font-size: 9px; padding: 0 4px; border-width: 1.5px; }
.tt-name > span { display: block; margin-top: 3px; font: 800 10.5px/1.2 var(--f-ui); color: var(--ink-3); }
.tt-v { text-align: center; font-size: 15px; color: var(--violet-d); }
.tt-head .tt-v { color: var(--ink-3); font: 900 9.5px/1.1 var(--f-ui); }

/* ==================================================================== ARENA */
.ar-hero { position: relative; overflow: hidden; padding: 14px; border-radius: 24px; background: linear-gradient(180deg, #9C78FF, #5A2EE0); color: #fff; }
.ar-rays { position: absolute; left: 60px; top: 60px; width: 270px; height: 270px; margin: -135px 0 0 -135px; border-radius: 50%; pointer-events: none; background: var(--corona-w); opacity: .65; animation: cr-breathe 6s ease-in-out infinite; }
.ar-top { position: relative; display: flex; align-items: center; gap: 12px; }
.ar-badge { flex: none; filter: drop-shadow(0 4px 0 rgba(20, 6, 60, .5)); }
.ar-meta { flex: 1; min-width: 0; }
.ar-lg { display: inline-flex; height: 21px; padding: 0 8px; align-items: center; border-radius: 8px; background: rgba(20, 6, 70, .4); border: 2px solid var(--ink); font: 900 10.5px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; }
.ar-meta > b { display: block; margin-top: 6px; font-size: 40px; line-height: 1; color: #fff; }
.ar-rl { display: block; margin-top: 2px; font: 900 11px/1 var(--f-ui); color: #E8E0FF; }
.ar-rec { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ar-rec > b { display: block; height: 30px; padding: 0 10px; border-radius: 11px; background: #fff; border: 2px solid var(--ink); font-size: 16px; line-height: 26px; color: var(--ink); }
.ar-rec em { font-style: normal; color: var(--green-d); }
.ar-wr { font: 900 11px/1 var(--f-ui); color: #E8E0FF; }
.ar-prog { position: relative; margin-top: 14px; }
.ar-prog-row { display: flex; justify-content: space-between; margin-top: 6px; font: 800 11.5px/1 var(--f-ui); color: #E8E0FF; }
.ar-prog-row b { color: #fff; }
.ar-tix { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 2px 10px; }
.ar-tickets { display: flex; gap: 4px; }
.ar-tickets i { display: grid; place-items: center; width: 30px; height: 24px; border-radius: 7px; background: #E9E2F4; border: 2px solid var(--ink-4); color: var(--ink-4); }
.ar-tickets i svg { width: 15px; height: 15px; }
.ar-tickets i.on { background: var(--g-gold); border-color: var(--ink); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.ar-tix-t { font: 800 11.5px/1.2 var(--f-ui); color: var(--ink-2); text-align: right; }
.ar-tix-t b { color: var(--ink); font-weight: 900; }
.ar-battle { width: 100%; height: 72px; border-radius: 22px; gap: 10px; box-shadow: 0 6px 0 var(--ink); }
.ar-battle > svg { width: 30px; height: 30px; }
.ar-battle > .d { font-size: 32px; letter-spacing: .05em; -webkit-text-stroke-width: 5.5px; }
.ar-battle small { position: absolute; right: 14px; bottom: 8px; font: 900 10px/1 var(--f-ui); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 0 var(--ink), 0 0 4px rgba(42, 22, 82, .6); }
.ar-battle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%); background-size: 300% 100%; animation: gold-sweep 3s ease-in-out infinite; pointer-events: none; }
.ar-out { margin-top: 16px; padding: 18px 16px 16px; text-align: center; }
.ar-out-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #E9E2F4; border: var(--bw) solid var(--ink); color: var(--ink-2); }
.ar-out-ic svg { width: 28px; height: 28px; }
.ar-out > b { display: block; margin-top: 10px; font-size: 23px; line-height: 1; }
.ar-out p { margin: 8px 0 14px; font: 800 12.5px/1.45 var(--f-ui); color: var(--ink-2); }
.ar-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; padding-left: 4px; }
.ar-dc { position: relative; }
.ar-dc > em { position: absolute; z-index: 9; left: -13px; top: -12px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font-size: 14px; font-style: normal; color: var(--ink); }
.ar-traits { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ar-traits .tr { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); font: 800 12px/1.3 var(--f-ui); color: var(--ink-2); }
.ar-traits .tr > svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--g-orange); color: #fff; border: 1.5px solid var(--ink); }
.ar-traits .tr-colony > svg { background: var(--g-green); }
.ar-traits .tr-aura > svg { background: var(--g-violet); }
.ar-traits .tr b { color: var(--ink); margin-right: 4px; font-weight: 900; }
.tr-none { font: 800 12px/1.4 var(--f-ui); color: var(--ink-3); text-align: center; }
.ar-week { padding: 12px; }
.ar-week .prz { margin: 10px 0 6px; }
.ar-week .prz span { background: var(--lilac); }
.ar-week .prz .is-me { background: var(--violet); }
.ar-week .lbl .lrow { padding: 9px 2px; }
.ar-week > .cb { margin-top: 10px; }
.dk-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dk-slot { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); min-width: 0; }
.dk-slot > em { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font-size: 12px; font-style: normal; }
.dk-slot > div { min-width: 0; }
.dk-slot b { display: block; font: 900 11.5px/1.1 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-slot span { display: flex; gap: 5px; margin-top: 3px; font: 900 10.5px/1 var(--f-ui); color: var(--ink-2); }
.dk-slot span i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; }
.dk-slot span svg { width: 11px; height: 11px; }
.dk-slot .f-a svg { color: var(--orange); } .dk-slot .f-h svg { color: var(--green-d); }
.dk-slot.is-empty { border-style: dashed; background: var(--lilac); }
.dk-slot.is-empty > em { background: #fff; }
.dk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; margin-top: 14px; padding-bottom: 6px; }
.dk-card { position: relative; border-radius: 12px; }
.dk-card.is-on .kc { outline: 3px solid var(--violet); outline-offset: 3px; }
.dk-n { position: absolute; z-index: 9; right: -6px; top: -8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 2px solid var(--ink); font-size: 14px; font-style: normal; }
.dk-foot { position: sticky; bottom: calc(var(--safe-bottom) * -1 - 20px); padding: 12px 0 calc(var(--safe-bottom) + 4px); margin-top: 6px; background: linear-gradient(180deg, rgba(255, 247, 236, 0), #FFF7EC 30%); }

/* ==================================================================== BATTLE */
.bt { position: fixed; inset: 0; z-index: 320; overflow: hidden; display: flex; flex-direction: column; animation: rv-fade .25s ease-out both; touch-action: none; -webkit-user-select: none; user-select: none; color: #fff; }
.bt.is-out { animation: rv-out .25s ease-in both; }
.bt-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(circle, rgba(255, 255, 255, .07) 1.5px, transparent 2px) 0 0 / 22px 22px, radial-gradient(70% 45% at 50% 50%, #7B4DFF, #3B1F86 60%, #1E0F48); }
.bt-bg::before { content: ""; position: absolute; inset: 0; background: var(--dust); opacity: .45; }
.bt-find { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding-bottom: 8vh; }
.bt-radar { position: relative; width: 170px; height: 170px; display: grid; place-items: center; margin-bottom: 14px; }
.bt-radar .av { position: relative; z-index: 2; }
.bt-radar i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 226, 122, .8); animation: radar 1.8s ease-out infinite; }
.bt-radar i:nth-child(2) { animation-delay: .6s; }
.bt-radar i:nth-child(3) { animation-delay: 1.2s; }
@keyframes radar { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.bt-find > b { font-size: 26px; line-height: 1; color: #fff; }
.bt-find > span { font: 800 13px/1 var(--f-ui); color: #E8E0FF; }
.bt-mini { display: flex; gap: 10px; margin-top: 22px; }
.bt-mini .kc { width: 62px; }
.bt-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + var(--ca-top) + 8px) 16px 0; }
.bt-round { height: 32px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; font-size: 16px; letter-spacing: .03em; color: var(--ink); background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.bt-ctl { display: flex; gap: 6px; }
.bt-btn { height: 34px; min-width: 44px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: 900 13px/1 var(--f-ui); color: var(--ink);
  background: #fff; border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.bt-btn svg { width: 14px; height: 14px; }
.bt-btn.is-on { background: var(--gold); }
.bt-field { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 4px 16px calc(var(--safe-bottom) + 20px); }
.bf-side { display: flex; flex-direction: column; gap: 10px; }
.bf-side.is-you { flex-direction: column-reverse; }
.bf-who { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.bf-who > div:not(.av) { display: flex; flex-direction: column; gap: 3px; }
.bf-who b { display: flex; align-items: center; font: 400 17px/1 var(--f-d); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.bf-who span { display: inline-flex; align-items: center; gap: 4px; font: 900 12px/1 var(--f-ui); color: #E8E0FF; font-variant-numeric: tabular-nums; }
.bf-side.is-you .bf-who { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }
.bf-side.is-you .bf-who > div:not(.av) { align-items: flex-end; }
.bf-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 0 6px; }
.bf-slot { position: relative; transition: opacity .3s, filter .3s; }
.bf-hp { height: 12px; margin: 8px 2px 0; border-radius: 7px; background: #fff; border: 2px solid var(--ink); overflow: hidden; }
.bf-hp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #6BEEA5, #1FBF67); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.bf-hp.is-low i { background: linear-gradient(180deg, #FF7A86, #EE3349); }
.bf-slot.is-ko { opacity: .3; filter: grayscale(1); transform: scale(.92); transition: opacity .4s, filter .4s, transform .4s; }
.bt-mid { position: relative; height: 70px; display: grid; place-items: center; }
.bt-vs { font-size: 46px; line-height: 1; color: var(--gold); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); opacity: 0; transform: scale(2.4); }
.bt.is-intro .bt-vs { animation: vs 1.5s cubic-bezier(.2, .9, .3, 1.2) .25s both; font-size: 64px; }
.bt.is-intro .bf-side.is-foe { animation: from-top .6s cubic-bezier(.2, .9, .3, 1) both; }
.bt.is-intro .bf-side.is-you { animation: from-bottom .6s cubic-bezier(.2, .9, .3, 1) both; }
.bt.is-fight .bt-vs { opacity: .55; transform: scale(1); transition: opacity .4s, transform .4s; }
.bt.is-intro .bt-top .bt-ctl { opacity: 0; }
@keyframes vs { 0% { opacity: 0; transform: scale(2.4); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes from-top { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
@keyframes from-bottom { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
.bt-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bt-num { position: absolute; font-size: 28px; line-height: 1; white-space: nowrap; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--ink); }
.bt-num.is-crit { color: var(--gold); font-size: 34px; }
.bt-num.is-heal { color: #7DF0B4; }
.bt-shard { position: absolute; width: 13px; height: 11px; clip-path: polygon(50% 0, 100% 60%, 30% 100%, 0 40%); }
.bt-res { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; background: rgba(30, 15, 72, .6); opacity: 0; transition: opacity .3s; }
.bt-res.in { opacity: 1; }
.bt-res-in { position: relative; width: 100%; max-width: 340px; padding: 26px 16px 16px; border-radius: 28px; text-align: center; isolation: isolate; overflow: hidden; color: var(--ink);
  background: linear-gradient(180deg, #F3ECFF, #FFF7EC 50%); border: var(--bw) solid var(--ink); box-shadow: 0 6px 0 var(--ink); transform: translateY(16px) scale(.96); transition: transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.bt-res.in .bt-res-in { transform: none; }
.is-win .bt-res-in { background: linear-gradient(180deg, #FFE27A, #FFF7EC 46%); }
.bt-rays { position: absolute; left: 50%; top: 40px; width: 320px; height: 320px; margin: -160px 0 0 -160px; z-index: -1; border-radius: 50%; background: var(--corona-w); animation: cr-breathe 4s ease-in-out infinite; }
.bt-title { font-size: 46px; line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); letter-spacing: .02em; }
.is-loss .bt-title { color: #C9D2E8; }
.bt-sub { margin-top: 10px; font: 800 13px/1.35 var(--f-ui); color: var(--ink-2); }
.bt-rate { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: left; }
.bt-rate b { display: block; font-size: 22px; line-height: 1; }
.bt-rate span { display: block; margin-top: 3px; font: 900 12px/1 var(--f-ui); }
.bt-rate .up { color: var(--green-d); } .bt-rate .down { color: var(--red); }
.bt-gp { margin-top: 14px; text-align: left; border-radius: 16px; background: #fff; border: 2px solid var(--ink); padding: 0 12px; }
.bt-gp div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; font: 800 13px/1.2 var(--f-ui); color: var(--ink-2); }
.bt-gp div > span { display: inline-flex; align-items: center; gap: 6px; }
.bt-gp div + div { border-top: 2px dashed #E6DDF5; }
.bt-gp b { font-size: 17px; color: var(--ink); }
.bt-gp .is-bonus span { color: var(--orange); font-weight: 900; }
.bt-gp .is-bonus svg { width: 16px; height: 16px; color: var(--gold-d); }
.bt-gp .gmc { width: 18px; height: 18px; }
.bt-tk { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font: 800 12px/1 var(--f-ui); color: var(--ink-3); }
.bt-tk svg { width: 15px; height: 15px; }
.bt-acts { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 14px; }

@media (max-width: 370px) {
  .cgrid { gap: 12px 8px; }
  .bf-row { gap: 10px; }
  .ar-meta > b { font-size: 34px; }
  .amb-cardprev { width: 92px; }
  .amb-head > b { font-size: 20px; }
  .tt-row { grid-template-columns: 34px 1fr 46px 52px 52px; }
}
@media (prefers-reduced-motion: reduce) { .ar-battle::after, .bt-rays, .ar-rays { animation: none; } }

/* ---------- presale closed: a small "coming soon" sticker in place of the buy panel ---------- */
.ps-soon { position: relative; overflow: hidden; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, #F1EBFF, #FFFFFF 70%); }
.pss-rays { position: absolute; left: 34px; top: 34px; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; pointer-events: none; background: var(--corona-v); }
.pss-top { position: relative; display: flex; align-items: center; gap: 12px; }
.pss-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--g-violet); border: var(--bw) solid var(--ink); box-shadow: 0 3px 0 var(--ink); color: #fff; transform: rotate(-5deg); }
.pss-ic.is-ok { background: var(--g-green); }
.pss-ic svg { width: 24px; height: 24px; filter: drop-shadow(1.2px 1.2px 0 var(--ink)) drop-shadow(-1.2px -1.2px 0 var(--ink)); }
.pss-t { flex: 1; min-width: 0; }
.pss-t b { display: block; font-size: 20px; line-height: 1.05; }
.pss-t span { display: block; margin-top: 4px; font: 800 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
.pss-ways { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.pss-w { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 2px 7px; border-radius: 13px; background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--ink);
  font: 900 10.5px/1 var(--f-ui); color: var(--ink); }
.pss-w i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 2px solid var(--ink); color: #fff; }
.pss-w i svg { width: 15px; height: 15px; --icf: rgba(255, 255, 255, .25); filter: drop-shadow(1px 1px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }
.pss-w:active { transform: translateY(2px) scale(.95); box-shadow: 0 .5px 0 var(--ink); }