/* ==========================================================================
   Pald Earn — Spin Wheel, Redeem, Bonus task, Piggy cards (2026-10-29)
   One file for the new screens. Uses the design tokens from pald.css only.
   ========================================================================== */

/* ---------- home: goals card + spin chip ---------- */
.h-row{display:flex;gap:8px;align-items:stretch}
.h-row>.goal-card{flex:1 1 auto;min-width:0}
.spin-chip{position:relative;flex:none;display:flex;align-items:center;gap:8px;min-height:50px;padding:6px 12px 6px 7px;border-radius:16px;color:var(--ink);
 background:radial-gradient(90px 60px at 20% 30%,rgba(124,108,255,.35),transparent 70%),linear-gradient(150deg,#2B2273,#161C44);
 box-shadow:inset 0 0 0 1px rgba(124,108,255,.42),0 6px 18px rgba(30,20,90,.45);overflow:hidden;isolation:isolate;transition:transform var(--t-press) var(--ease)}
.spin-chip::after{content:"";position:absolute;inset:-40% -10%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,214,110,.28) 80%,transparent 90%);animation:spin-sweep 4.5s linear infinite}
.spin-chip:active{transform:scale(.96)}
.spin-mini{display:block;width:36px;height:36px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.spin-mini svg{width:100%;height:100%}
.spin-mini .mw-rot,.side-wheel .mw-rot{transform-origin:20px 20px;animation:mw-turn 9s linear infinite}
.spin-chip.has .mw-rot{animation-duration:2.6s}
.spin-tt{display:grid;line-height:1.1}
.spin-tt b{font-size:14px;font-weight:850;letter-spacing:-.01em}
.spin-tt small{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--gold-ink)}
.spin-tt small .art{width:15px;height:15px}
.spin-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#FF5E7A;box-shadow:0 0 0 2px #161C44,0 0 10px #FF5E7A;animation:dot-pulse 1.6s ease-in-out infinite}
.spin-chip.jp{box-shadow:inset 0 0 0 1px rgba(62,200,255,.6),0 0 18px rgba(62,200,255,.28)}
@keyframes mw-turn{to{transform:rotate(360deg)}}
@keyframes spin-sweep{to{transform:rotate(360deg)}}
@keyframes dot-pulse{50%{transform:scale(1.35);opacity:.75}}
@media (max-width:399px){.goal-card .segs{display:none}.goal-card{grid-template-columns:30px minmax(0,1fr) auto;gap:7px}.spin-chip{padding-right:9px;gap:6px}.spin-mini{width:32px;height:32px}}
.shell.is-home.fit-2 .spin-chip{min-height:44px;padding-block:4px}
.shell.is-home.fit-2 .spin-mini{width:30px;height:30px}
/* side navigation (desktop) */
.side-wheel{display:block;width:22px;height:22px;flex:none}
.side-wheel svg{width:100%;height:100%}
.side .side-badge{margin-left:auto;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#FFB547,#F07A2A);color:#2A1300;font-style:normal;font-size:11.5px;font-weight:900;display:inline-grid;place-items:center}

/* ---------- Spin Wheel page ---------- */
.wh{width:100%;max-width:560px;margin:0 auto}
.wh-grid{display:grid;gap:12px}
.wh-main{display:grid;gap:10px;justify-items:center}
.wh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}
.wh-stat{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;min-height:52px;padding:7px 9px;border-radius:15px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);text-align:left;color:var(--ink);overflow:hidden}
.wh-stat .ic{grid-row:1/3;display:grid;place-items:center}
.wh-stat .ic .art{width:30px;height:30px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.wh-stat b{font-size:15px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-stat small{font-size:11px;font-weight:700;color:var(--ink-2);line-height:1.15;white-space:nowrap}
.wh-stat.tk b{color:var(--gold-ink)}
.wh-stat.tk.pop{animation:wh-pop .7s var(--ease-spring)}
@keyframes wh-pop{40%{transform:scale(1.1);box-shadow:inset 0 0 0 1px var(--gold),0 0 22px rgba(247,197,78,.5)}}
.wh-stat.pity .ring{grid-row:1/3;position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--cyan) calc(var(--p)*1%),rgba(255,255,255,.09) 0)}
.wh-stat.pity .ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:#16204A}
.wh-stat.pity .ring .ic{position:relative}
.wh-stat.pity .ring .art{width:20px;height:20px}
.wh-stat.pity b{font-size:12.5px}
.wh-stat.jp.live{box-shadow:inset 0 0 0 1px rgba(62,200,255,.55),0 0 20px rgba(62,200,255,.22)}
.wh-stat.jp.live::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(160,230,255,.22) 50%,transparent 65%) -150% 0/250% 100% no-repeat;animation:btn-sheen 3.2s ease-in-out infinite}
.wh-live{font-style:normal;display:inline-flex;align-items:center;gap:4px;color:#7FE3FF;font-weight:900;letter-spacing:.06em}
.wh-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#3EC8FF;box-shadow:0 0 8px #3EC8FF;animation:dot-pulse 1.2s infinite}

.wh-stage{position:relative;display:grid;place-items:center;width:100%;padding:8px 0 4px}
.wh-stage.sk{min-height:340px}
.wh-halo{position:absolute;inset:-6% -2% 0;pointer-events:none;background:radial-gradient(closest-side,rgba(124,108,255,.42),rgba(62,200,255,.12) 55%,transparent 75%);filter:blur(6px);animation:wh-breathe 4s ease-in-out infinite}
@keyframes wh-breathe{50%{opacity:.6;transform:scale(.97)}}
.wh-wheel{position:relative;width:min(84vw,340px);aspect-ratio:1;user-select:none;-webkit-user-select:none}
.wh-rot{position:absolute;inset:0;will-change:transform;filter:drop-shadow(0 18px 30px rgba(6,4,30,.6))}
.wh-svg{width:100%;height:100%;display:block}
.wh-svg .wh-slice{stroke:rgba(255,231,160,.18);stroke-width:1}

.wh-svg .wh-sep{stroke:rgba(255,226,140,.55);stroke-width:2}
.wh-svg .wh-lab image{filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}

.wh-svg .wh-lab.jp image{animation:wh-jp 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes wh-jp{50%{transform:scale(1.12);filter:drop-shadow(0 0 8px #6FE0FF)}}
.wh-svg .wh-amt{font:900 23px/1 var(--font-display);fill:#FFFFFF;paint-order:stroke;stroke:rgba(17,10,58,.65);stroke-width:4px;letter-spacing:.01em}

.wh-svg .wh-led{fill:#FFF3C4;animation:wh-led 1.6s steps(1) infinite;animation-delay:calc(var(--i)*-.1s)}
.wh-svg .wh-led:nth-child(odd){animation-delay:calc(var(--i)*-.1s - .8s)}
@keyframes wh-led{0%{fill:#FFF8DC;filter:drop-shadow(0 0 3px #FFE58A)}50%{fill:#C0782A;filter:none}}
.wh.spinning .wh-svg .wh-led{animation-duration:.4s}
.wh-pointer{position:absolute;left:50%;top:-15px;width:32px;height:38px;margin-left:-16px;z-index:3;transform-origin:50% 22%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,200,80,.55))}
.wh-pointer i{position:absolute;inset:0;background:linear-gradient(180deg,#FFF4C2,#FFC24A 45%,#E67A16);clip-path:polygon(50% 100%,6% 22%,22% 4%,78% 4%,94% 22%)}
.wh-pointer i::after{content:"";position:absolute;left:50%;top:9px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#FFD25A)}
.wh-pointer.kick{animation:wh-kick .16s ease-out}
@keyframes wh-kick{30%{transform:rotate(-16deg)}}
.wh-hub{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;border-radius:50%;padding:5px;background:linear-gradient(145deg,#FFE7A0,#F0A22E 50%,#B4610E);box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 4px rgba(22,15,67,.85),0 0 26px rgba(255,190,80,.55);transition:transform var(--t-press) var(--ease)}
.wh-hub:active{transform:translate(-50%,-50%) scale(.94)}
.wh-hub-in{display:grid;place-items:center;align-content:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFD27A,#F08A1F 60%,#C45F0C);box-shadow:inset 0 -6px 10px rgba(120,50,0,.45),inset 0 4px 8px rgba(255,255,255,.45);color:#3B1700}
.wh-hub-in b{font:900 clamp(13px,4.2vw,18px)/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:0 2px 0 rgba(140,60,0,.65)}
.wh-hub-in small{display:inline-flex;align-items:center;gap:2px;margin-top:3px;font-size:11px;font-weight:900;color:#4A1F00}
.wh-hub-in small .art{width:14px;height:14px}
.wh.spinning .wh-hub{pointer-events:none;animation:wh-hub-glow .8s ease-in-out infinite alternate}
@keyframes wh-hub-glow{to{box-shadow:0 8px 22px rgba(0,0,0,.55),0 0 0 4px rgba(22,15,67,.85),0 0 40px rgba(255,200,90,.9)}}
.wh-go{width:min(100%,340px);height:52px;font-size:16.5px;gap:8px}
.wh-go .wh-go-n{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.22);font-size:14px;font-weight:900}
.wh-go .wh-go-n .art{width:20px;height:20px}
.wh-go.is-empty{background:linear-gradient(135deg,#3EC8FF,#5B5CF0);}

.wh-side{display:grid;gap:10px;align-content:start;min-width:0}
.wh-card{position:relative;border-radius:18px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);padding:11px 12px;min-width:0}
.wh-tk{background:radial-gradient(220px 90px at 0% 0%,rgba(247,197,78,.16),transparent 70%),var(--glass)}
.wh-tk-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px}
.wh-tk-ic .art{width:34px;height:34px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));animation:wh-float 3.4s ease-in-out infinite}
@keyframes wh-float{50%{transform:translateY(-3px) rotate(-4deg)}}
.wh-tk-top .tt b{display:block;font-size:14.5px;font-weight:850}
.wh-tk-top .tt small{display:flex;align-items:center;gap:4px;color:var(--ink-2);font-size:11.5px;font-weight:700}
.wh-tk-today{height:24px;padding:0 9px;border-radius:999px;background:var(--inset);color:var(--ink-2);font-size:11.5px;font-weight:800;display:inline-grid;place-items:center;white-space:nowrap}
.wh-tk-today.cap{background:var(--mint-soft);color:var(--mint-ink)}
.wh-tk-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.wh-pairs{display:flex;flex:1 1 auto;gap:6px;min-width:0;flex-wrap:wrap}
.wh-pair{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--inset);box-shadow:inset 0 0 0 1px var(--line)}
.wh-pair i{width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);transition:background .3s,box-shadow .3s}
.wh-pair.half i.m,.wh-pair.full i{background:linear-gradient(135deg,#FFD776,#F59E2B);box-shadow:0 0 8px rgba(247,197,78,.6)}
.wh-pair.full{box-shadow:inset 0 0 0 1px rgba(247,197,78,.6)}
.wh-watch{flex:none}
.wh-watch .wh-watch-n{opacity:.8;font-variant-numeric:tabular-nums}
.wh-goals{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.wh-goal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;min-height:42px;padding:5px 9px;border-radius:12px;background:var(--inset);color:var(--ink);text-align:left}
.wh-goal b{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:900;color:var(--gold-ink)}
.wh-goal b .art{width:14px;height:14px}
.wh-goal small{display:block;font-size:11px;color:var(--ink-2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh-goal em{font-style:normal;font-size:10.5px;font-weight:900;color:var(--mint-ink);background:var(--mint-soft);padding:2px 6px;border-radius:999px}
.wh-goal.done{opacity:.7}
.wh-goal.done .glyph{color:var(--mint-ink)}
.wh-goal-ic .art{width:22px;height:22px}
.wh-jp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding-bottom:16px;overflow:hidden}
.wh-jp.live{background:radial-gradient(240px 100px at 0% 50%,rgba(62,200,255,.2),transparent 70%),var(--glass);box-shadow:inset 0 0 0 1px rgba(62,200,255,.4),var(--sh-1)}
.wh-jp-ic .art{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(88,166,255,.6))}
.wh-jp .tt b{display:block;font-size:14px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-jp .tt small{font-size:11.5px;color:var(--ink-2);font-weight:700}
.wh-jp-next{display:grid;justify-items:end;font-size:13px;font-weight:900;color:#7FE3FF}
.wh-jp-next .art{width:12px;height:12px;display:inline-block;vertical-align:-1px}
.wh-jp-next small{font-size:10.5px;color:var(--ink-3);font-weight:700}
.wh-jp-bar{position:absolute;left:12px;right:12px;bottom:7px;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.wh-jp-bar::after{content:"";position:absolute;inset:0;width:var(--p);border-radius:5px;background:linear-gradient(90deg,#5B5CF0,#3EC8FF);box-shadow:0 0 8px rgba(62,200,255,.7)}
.wh-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;border-radius:12px;background:var(--inset)}
.wh-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:32px;border-radius:9px;color:var(--ink-2);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden}
.wh-tabs button .art{width:18px;height:18px}
.wh-tabs button[aria-selected="true"]{background:var(--seg-on);color:var(--action-ink);box-shadow:var(--sh-1)}
.wh-panel{margin-top:8px;min-height:120px}
.wh-top-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);font-weight:700;margin:0 2px 6px}
.wh-top-head span{display:inline-flex;align-items:center;gap:4px}
.wh-top-head b{color:var(--ink);font-variant-numeric:tabular-nums}
.wh-draw{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:6px 9px;border-radius:10px;background:rgba(62,200,255,.1);font-size:12px;font-weight:700;color:#BDEFFF}
.wh-draw .art{width:16px;height:16px;flex:none}
.wh-rank,.wh-feed,.wh-odds{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wh-rank li{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:34px;padding:0 6px;border-radius:9px;font-size:13px}
.wh-rank li.me{background:var(--action-soft);box-shadow:inset 0 0 0 1px rgba(124,108,255,.35)}
/* Keep leaderboard cells separate from the rankings (.rk) and full-height chat (.ch) pages. */
.wh-rank .wh-rank-position{text-align:center;font-weight:900;color:var(--ink-2)}
.wh-rank b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-rank .wh-rank-spins{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.wh-rank .wh-rank-chance{min-width:52px;text-align:right;font-size:11.5px;font-weight:800;color:var(--mint-ink);white-space:nowrap}
.wh-feed li,.wh-odds li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;min-height:40px;padding:2px 6px;border-radius:9px}
.wh-odds li{grid-template-columns:auto minmax(0,1fr) auto}
.wh-feed li .art,.wh-odds li .art{width:28px;height:28px}
.wh-feed .tt b,.wh-odds .tt b{display:block;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wh-feed .tt small,.wh-odds .tt small{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);font-weight:700}
.wh-feed .v{display:inline-flex;align-items:center;gap:2px;font-weight:900;font-size:13px;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.wh-feed .v .art{width:13px;height:13px}
.wh-feed time{font-size:11px;color:var(--ink-3);font-weight:700;min-width:26px;text-align:right}
.wh-feed li.big{background:linear-gradient(90deg,rgba(62,200,255,.12),transparent)}
.wh-feed li.me .tt b{color:var(--action-ink)}
.wh-odds .v{font-weight:900;font-size:13px;font-variant-numeric:tabular-nums}

.wh-note{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.wh-note .glyph{flex:none;margin-top:1px}
.wh-empty{display:grid;justify-items:center;gap:6px;padding:16px 8px;text-align:center;color:var(--ink-2);font-size:13px}
.wh-empty .art{width:40px;height:40px;opacity:.85}
.wh-mine{margin:6px 6px 0;font-size:12px;font-weight:800;color:var(--action-ink)}
@media (min-width:1024px){
 .wh{max-width:1040px}
 .wh-grid{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:22px;align-items:start}
 .wh-main{position:sticky;top:70px}
 .wh-wheel{width:min(100%,420px)}
 .wh-go{width:min(100%,420px)}
}
@media (max-width:359px){.wh-stat{padding:6px 7px;column-gap:5px}.wh-stat .ic .art{width:24px;height:24px}.wh-stat b{font-size:13px}.wh-tabs button span{font-size:11px}.wh-goals{grid-template-columns:1fr}}
@media (max-height:700px) and (max-width:1023px){.wh-wheel{width:min(76vw,300px)}}

/* win reveal */
.sheet.wh-win-sheet .sheet-top{min-height:0;padding-bottom:0}
.whw{position:relative;display:grid;justify-items:center;gap:6px;padding:8px 0 4px;text-align:center;overflow:hidden}
.whw-rays{position:absolute;left:50%;top:44%;width:340px;height:340px;margin:-170px 0 0 -170px;background:repeating-conic-gradient(from 0deg,rgba(255,214,110,.22) 0 9deg,transparent 9deg 22deg);border-radius:50%;mask:radial-gradient(closest-side,#000 30%,transparent 72%);-webkit-mask:radial-gradient(closest-side,#000 30%,transparent 72%);animation:whw-rays 12s linear infinite;pointer-events:none}
.whw.jack .whw-rays{background:repeating-conic-gradient(from 0deg,rgba(110,220,255,.3) 0 9deg,transparent 9deg 22deg)}
@keyframes whw-rays{to{transform:rotate(360deg)}}
.whw-k{position:relative;font:900 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.whw.jack .whw-k{font-size:26px;background:linear-gradient(90deg,#7FE3FF,#FFFFFF,#7FE3FF);-webkit-background-clip:text;background-clip:text;color:transparent;animation:btn-sheen 2.4s linear infinite;background-size:200% 100%}
.whw-art{position:relative;animation:whw-in .7s var(--ease-spring) both}
.whw-art .art{filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(255,214,110,.35))}
@keyframes whw-in{0%{transform:scale(.2) rotate(-25deg);opacity:0}60%{transform:scale(1.12) rotate(6deg);opacity:1}}
.whw-amt{position:relative;display:flex;align-items:baseline;gap:6px;font:900 40px/1 var(--font-display);letter-spacing:-.02em;animation:whw-up .5s .25s var(--ease-out) both}
.whw-amt small{font-size:15px;font-weight:800;color:var(--ink-2)}
.whw p{position:relative;color:var(--ink-2);font-size:13.5px;font-weight:700}
@keyframes whw-up{from{transform:translateY(12px);opacity:0}}
.whw-conf{position:absolute;inset:0;pointer-events:none}
.whw-conf i{position:absolute;top:-10px;left:var(--x);width:7px;height:12px;border-radius:2px;background:hsl(var(--h) 90% 65%);animation:whw-fall 2.2s var(--d) ease-in both}
@keyframes whw-fall{0%{transform:translateY(-10px) rotate(0)}100%{transform:translateY(330px) rotate(540deg);opacity:0}}

/* ---------- Redeem ---------- */
.rd{display:grid;gap:12px;width:100%;max-width:760px;margin:0 auto}
.rd-bal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:radial-gradient(260px 110px at 0% 0%,rgba(88,166,255,.25),transparent 70%),var(--glass);box-shadow:inset 0 0 0 1px rgba(88,166,255,.3),var(--sh-1)}
.rd-bal-ic .art{width:40px;height:40px;filter:drop-shadow(0 0 12px rgba(88,166,255,.55));animation:wh-float 3.6s ease-in-out infinite}
.rd-bal .tt small{display:block;font-size:11.5px;color:var(--ink-2);font-weight:700}
.rd-bal .tt b{display:block;font:900 24px/1.15 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rd-bal .tt b em{font:800 13px var(--font);color:#9FD0FF;font-style:normal}
.rd-hist{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--inset);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.rd-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px;border-radius:16px;background:var(--inset)}
.rd-cat{display:grid;justify-items:center;gap:3px;min-height:62px;padding:6px 4px;border-radius:12px;color:var(--ink-2);font-size:12px;font-weight:800;transition:background .2s,color .2s,transform var(--t-press)}
.rd-cat .art{width:30px;height:30px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.rd-cat[aria-selected="true"]{background:var(--seg-on);color:var(--ink);box-shadow:var(--sh-1),inset 0 0 0 1px rgba(124,108,255,.4)}
.rd-cat:active{transform:scale(.95)}
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.rd-opt{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-height:132px;padding:10px 6px 9px;border-radius:16px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line),var(--sh-1);color:var(--ink);text-align:center;overflow:hidden;isolation:isolate;animation:rd-in .35s var(--ease-out) both;animation-delay:calc(var(--i)*25ms);transition:transform var(--t-press) var(--ease),box-shadow .2s}
.rd-opt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90px 70px at 50% 18%,rgba(124,108,255,.26),transparent 72%)}
.rd-grid.c-mlbb .rd-opt::before{background:radial-gradient(90px 70px at 50% 18%,rgba(88,180,255,.28),transparent 72%)}
.rd-grid.c-codm .rd-opt::before{background:radial-gradient(90px 70px at 50% 18%,rgba(247,197,78,.24),transparent 72%)}
.rd-grid.c-roblox .rd-opt::before{background:radial-gradient(90px 70px at 50% 18%,rgba(61,124,255,.28),transparent 72%)}
.rd-grid.c-cash .rd-opt{min-height:108px}
.rd-grid.c-cash .rd-opt-art{height:40px}
.rd-grid.c-cash .rd-opt-art .art{width:40px!important;height:40px!important}
@keyframes rd-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
.rd-opt:hover{box-shadow:inset 0 0 0 1px var(--line-hi),0 0 18px rgba(124,108,255,.22)}
.rd-opt:active{transform:scale(.96)}
.rd-opt-art{display:grid;place-items:center;height:50px}
.rd-opt-art .art{filter:drop-shadow(0 5px 7px rgba(0,0,0,.4));transition:transform .3s var(--ease-spring)}
.rd-opt:hover .rd-opt-art .art{transform:translateY(-2px) scale(1.06)}
.rd-opt-name{font-size:12.5px;font-weight:850;line-height:1.2;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rd-grid.c-cash .rd-opt-name{font:900 20px/1.1 var(--font-display);letter-spacing:-.01em}
.rd-opt-sub{font-size:11px;color:var(--ink-3);font-weight:700;line-height:1.2}
.rd-cp{display:inline-flex;align-items:center;gap:3px;font-weight:800;color:var(--gold-ink)}
.rd-cp b{font-weight:900}
.rd-cp .art{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rd-opt-cost{margin-top:auto;display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 9px;border-radius:999px;background:rgba(88,166,255,.16);color:#A9D4FF;font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums}
.rd-opt-cost .art{width:14px;height:14px}
.rd-opt.short{opacity:.62}
.rd-opt.short .rd-opt-cost{background:var(--inset);color:var(--ink-3)}
.rd-opt-need{position:absolute;top:6px;right:6px;font-size:9.5px;font-weight:800;color:var(--coral-ink);background:var(--coral-soft);padding:1px 5px;border-radius:999px}
.rd-row{background:var(--surface);border-radius:16px;padding:6px 14px;box-shadow:var(--sh-1)}
.sheet.rd-sheet .sheet-body{display:grid;gap:10px}
.rd-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--inset)}
.rd-pick-art .art{filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.rd-pick .tt b{display:block;font-size:16px;font-weight:900}
.rd-pick .tt small{font-size:12px;color:var(--ink-2);font-weight:700}
.rd-pick-cost{display:inline-flex;align-items:center;gap:4px;font:900 17px var(--font-display);color:#A9D4FF}
.rd-pick-cost .art{width:18px;height:18px}
.rd-form{display:grid;gap:10px}
.rd-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:8px}
.rd-match{position:relative;display:block}
.rd-match i{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:900;font-size:15px}
.rd-match i.ok{color:var(--success)}
.rd-match i.bad{color:var(--danger)}
.rd-hint{display:flex;gap:7px;align-items:flex-start;padding:8px 10px;border-radius:12px;background:var(--action-soft);color:var(--ink-2);font-size:12.5px;line-height:1.4}
.rd-hint.warn{background:var(--gold-soft);color:var(--gold-ink)}
.rd-hint .glyph{flex:none;margin-top:1px}
.rd-check{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;padding:9px 10px;border-radius:12px;background:var(--coral-soft);color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.35}
.rd-check input{width:20px;height:20px;margin:0;accent-color:var(--action)}
.rd-seg{margin-bottom:2px}
.rd-seg button[aria-checked="true"]{background:var(--seg-on);color:var(--action-ink);box-shadow:var(--sh-1)}
.rd-err{min-height:0;color:var(--danger);font-size:12.5px;font-weight:700}
.rd-err:empty{display:none}
.rd-ok{display:grid;justify-items:center;gap:6px;text-align:center;padding:6px 0}
.rd-ok-art{animation:whw-in .7s var(--ease-spring) both}
.rd-ok b{font:900 21px var(--font-display)}
.rd-ok p{font-size:13px;color:var(--ink-2)}
.rd-steps{padding:10px 12px;border-radius:14px;background:var(--inset)}
.rd-steps h3{font-size:13.5px;font-weight:850;margin-bottom:6px}
.rd-steps p{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.rd-steps ol{margin:0;padding-left:18px;display:grid;gap:5px;font-size:12.5px;line-height:1.4;color:var(--ink-2)}
.rd-h .art{width:34px;height:34px}
@media (min-width:1024px){.rd-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}.rd-opt{min-height:132px;padding-top:12px}.rd-opt-art{height:58px}.rd-opt-art .art{width:54px!important;height:54px!important}.rd-grid.c-cash .rd-opt-art .art{width:42px!important;height:42px!important}}

/* ---------- game page: two columns on wide screens (hero left, controls right) ---------- */
@media (min-width:1180px){
 .gp{max-width:1040px;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:20px;row-gap:10px;align-items:start;
  grid-template-areas:"hero prize" "hero mode" "hero play" "hero meta" "facts note" "tiles how"}
 .gp>.gp-hero{grid-area:hero;height:auto;min-height:288px;align-self:stretch}
 .gp>.gp-facts{grid-area:facts}.gp>.gp-prize{grid-area:prize}.gp>.gp-mode{grid-area:mode}.gp>.gp-play{grid-area:play}.gp>.gp-meta{grid-area:meta}
 .gp>#ov-note{grid-area:note;min-width:0}.gp>.gp-tiles{grid-area:tiles}.gp>.gp-how{grid-area:how;align-self:start}
 .gp>#ov-note .gp-chest-goal{margin:8px 4px 0;justify-content:flex-start}
}
@media (max-width:359px){.rd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rd-cat{font-size:11px}}

/* ---------- Bonus task (AdsGram Task) ---------- */
.ptask{position:relative;display:grid;gap:8px;padding:11px 12px 9px;border-radius:18px;background:linear-gradient(150deg,rgba(94,230,200,.12),rgba(124,108,255,.1) 60%,transparent),var(--glass);box-shadow:inset 0 0 0 1px rgba(94,230,200,.32),var(--sh-1);overflow:hidden;isolation:isolate;width:100%;max-width:640px;margin:0 auto}
.ptask-glow{position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(closest-side,rgba(94,230,200,.3),transparent);z-index:-1;animation:wh-breathe 4s ease-in-out infinite}
.ptask-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.ptask-ic .art{width:26px;height:26px}
.ptask-head b{font-size:14px;font-weight:850}
.ptask-pts{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px;border-radius:999px;background:var(--mint-soft);color:var(--mint-ink);font-weight:900;font-size:13px}
.ptask-pts .art{width:16px;height:16px}
.ptask-body{min-height:44px}
.ptask-el{display:block;--adsgram-task-font-size:14px;--adsgram-task-icon-size:40px;--adsgram-task-icon-title-gap:10px;--adsgram-task-icon-border-radius:12px;--adsgram-task-button-width:78px;color:var(--ink)}
.ptask-btn{min-height:34px;padding:0 14px;border-radius:10px;background:linear-gradient(135deg,var(--action-2),var(--action));color:#fff;font-weight:800;font-size:13px;box-shadow:var(--sh-act)}
.ptask-btn.claim{background:linear-gradient(135deg,#5EE6C8,#2BB592);color:#05261E}
.ptask-reward{font-weight:900;color:var(--mint-ink)}
.ptask-done{font-weight:800;color:var(--mint-ink)}
.ptask-foot{font-size:11px;color:var(--ink-3);font-weight:700}
.ptask-demo{display:grid;gap:8px}
.ptask-demo span{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-2)}
.ptask.compact{padding:9px 11px 7px}

/* ---------- lounge wheel card, goals tickets, optional tag ---------- */
.lw-media.wheel{background:radial-gradient(circle at 50% 40%,rgba(247,197,78,.35),rgba(124,108,255,.18) 60%,transparent 75%)}
.gl-tk{color:var(--gold-ink);font-weight:900}
.sx-tag.opt,.tag.opt{height:18px;padding:0 6px;font-size:10px;font-weight:800;background:rgba(255,255,255,.07);color:var(--ink-3);vertical-align:2px;letter-spacing:.02em}

/* ---------- Piggy Boink team cards (all teams; full ones marked) ---------- */
.pg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pg-card{animation:rd-in .35s var(--ease-out) both;animation-delay:calc(var(--i,0)*30ms)}
.pg-card-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px}
.pg-card-count{font-size:11.5px;font-weight:900;color:var(--ink-2);background:var(--inset);padding:2px 7px;border-radius:999px}
.pg-card.full .pg-card-count{background:var(--gold-soft);color:var(--gold-ink)}
.pg-card-faces{display:flex;gap:3px;margin:8px 0 4px}
.pg-face{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px var(--surface)}
.pg-face .art{width:28px!important;height:28px!important}
.pg-face.open{background:var(--inset);color:var(--ink-3);border:1.5px dashed var(--line-2);box-shadow:none}
.pg-face.open .glyph{width:13px;height:13px}
.pg-full{display:inline-flex;align-items:center;gap:3px;color:var(--gold-ink);font-weight:800}
.pg-card-full{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;border-radius:9px;background:var(--gold-soft);color:var(--gold-ink);font-size:12px;font-weight:800}
.pg-card.full{box-shadow:inset 0 0 0 1px rgba(247,197,78,.35),var(--sh-1)}

/* ---------- light theme ---------- */
:root[data-theme="light"] .spin-chip{background:linear-gradient(150deg,#ECEBFF,#FFFFFF);box-shadow:inset 0 0 0 1px rgba(91,92,240,.3),0 6px 16px rgba(84,89,201,.15)}
:root[data-theme="light"] .wh-stat.pity .ring::before{background:#FFFFFF}
:root[data-theme="light"] .wh-draw{color:#145E86}
:root[data-theme="light"] .rd-opt-cost,:root[data-theme="light"] .rd-pick-cost{color:#1F5FB8}
:root[data-theme="light"] .wh-live,:root[data-theme="light"] .wh-jp-next{color:#0B7FAE}
:root[data-theme="light"] .rd-bal .tt b em{color:#1F5FB8}

/* ---------- reduced motion / light devices ---------- */
html.reduce-motion .spin-chip::after,html.reduce-motion .mw-rot,html.reduce-motion .wh-halo,html.reduce-motion .wh-svg .wh-led,html.reduce-motion .wh-tk-ic .art,html.reduce-motion .rd-bal-ic .art,html.reduce-motion .whw-rays,html.reduce-motion .ptask-glow{animation:none!important}
@media (prefers-reduced-motion:reduce){.spin-chip::after,.mw-rot,.wh-halo,.wh-svg .wh-led,.wh-tk-ic .art,.rd-bal-ic .art,.whw-rays,.ptask-glow,.rd-opt,.pg-card{animation:none!important}}
html.performance-lite .wh-halo,html.performance-lite .spin-chip::after,html.performance-lite .ptask-glow{display:none}
html.performance-lite .wh-rot{filter:none}

/* ---------- design pass (2026-10-29) ---------- */
/* (2026-10-30, operator) No docking band for the floating Bonus and Pald Raffle cards any more: reserving 84–166 px
   under the fixed home left an empty strip and squeezed the home until the shortcut labels were hidden. The cards
   float over the page and the player closes them with ×. */
/* Watch Lounge: one compact row per offer (art · text · action) instead of tall tiles. */
.lw-cards{grid-template-columns:1fr;gap:8px}
.lw-card{grid-template-columns:78px minmax(0,1fr);align-items:stretch}
.lw-media{aspect-ratio:auto;min-height:74px;height:100%}
.lw-media>.art{width:46px!important;height:46px!important}
.lw-play{width:22px;height:22px;right:5px;bottom:5px}
.lw-play .glyph{width:11px;height:11px}
.lw-body{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 10px;padding:8px 10px 8px 12px}
.lw-body b{grid-column:1;font-size:14px}
.lw-body small{grid-column:1;font-size:11.5px;display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.lw-body small .art{width:14px!important;height:14px!important}
.lw-body .btn{grid-column:2;grid-row:1/3;min-height:36px;white-space:nowrap}
@media (min-width:700px){.lw-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Invite: the four counters in one row. */
.iv-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.iv-stat{padding:7px 2px;font-size:10.5px;text-align:center;line-height:1.2}
.iv-stat b{font-size:15px}
/* Piggy team cards: two names lines, stacked earned row, smaller faces on phones. */
.pg-card{padding:10px;gap:7px}
.pg-card-top b{font-size:13.5px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2}
.pg-card-earned{display:grid;gap:1px;padding:6px 9px}
.pg-card-earned small{font-size:9.5px}
.pg-card-earned .amt-s{font-size:15px}
.pg-card-faces{gap:2px;margin:4px 0 2px}
.pg-face,.pg-face .art{width:25px!important;height:25px!important}
/* AdsGram task cards below a page (2026-10-30: Rankings, Room Ranking, Pald Raffle, Piggy Boink). */
.pt-host:not(:empty){margin-top:12px}
/* Long local prices (Rp 14,400,000 · ₫ …) shrink to stay inside their tile (2026-10-31). */
.rd-grid.c-cash .rd-opt-name.long{font-size:16.5px}.rd-grid.c-cash .rd-opt-name.longer{font-size:14px}