/* Shared reward palette: violet, peach and mint. One visual family for every prize. */
:root {
  --prize-panel:radial-gradient(ellipse at 12% 5%,#8150db50,transparent 53%),radial-gradient(ellipse at 100% 22%,#ef76ae2c,transparent 46%),linear-gradient(155deg,#32234e,#241936 72%);
  --prize-button:linear-gradient(105deg,#ffd9ad,#ffb0b9 60%,#eea4e7);
}
/* Reward ceremony. The dialog's native top layer keeps the player and other sheets inert. */
.reward-dialog {
  --reward-accent:#ffcbb0; --reward-rgb:255,151,154;
  width:min(440px,calc(100vw - 24px)); max-width:none;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  margin:auto; padding:0; border:1px solid #dcb5ff57; border-radius:30px;
  color:#fff9ff; background:#241936; color-scheme:dark;
  box-shadow:0 24px 100px #0009,0 0 70px rgba(var(--reward-rgb),.12);
  overflow:hidden; font-family:var(--font-ui);
}
.reward-dialog::backdrop { background:rgba(14,9,30,.74); backdrop-filter:blur(6px); }
.reward-dialog[data-tone="violet"] { --reward-accent:#ddd0ff; --reward-rgb:183,124,255; }
.reward-card { position:relative; display:flex; flex-direction:column; max-height:inherit; isolation:isolate; background:var(--prize-panel); }
.reward-card::before { content:""; position:absolute; pointer-events:none; top:0; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,var(--reward-accent),transparent); }
.reward-scroll { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:28px 26px 12px; text-align:center; }
.reward-close { position:absolute; z-index:3; top:9px; right:9px; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#ffffff0c; color:#e7ddff; }
.reward-close:hover { background:#ffffff15; color:#fff; }
.reward-close svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.reward-eyebrow { margin:0 26px; color:var(--reward-accent); font-size:10px; font-weight:700; line-height:1.5; text-transform:uppercase; letter-spacing:1.5px; }
.reward-stage { position:relative; height:184px; display:grid; place-items:center; margin:0 -12px; pointer-events:none; }
.reward-stage::before { content:""; position:absolute; width:220px; height:180px; background:radial-gradient(ellipse,rgba(var(--reward-rgb),.4),rgba(var(--reward-rgb),.06) 50%,transparent 70%); }
.reward-rays { position:absolute; width:250px; height:250px; opacity:.28; background:repeating-conic-gradient(from 12deg,transparent 0deg 15deg,rgba(var(--reward-rgb),.45) 18deg 22deg,transparent 25deg 36deg); mask-image:radial-gradient(circle,#0002 12%,#000 35%,transparent 68%); }
.reward-orbit { position:absolute; width:200px; height:62px; bottom:13px; border:1px solid rgba(var(--reward-rgb),.25); border-radius:50%; background:radial-gradient(ellipse,rgba(var(--reward-rgb),.14),transparent 65%); box-shadow:0 0 20px rgba(var(--reward-rgb),.12); }
.reward-hero { position:relative; width:180px; height:180px; display:grid; place-items:center; filter:drop-shadow(0 16px 17px #0007); }
.reward-hero > img { width:100%; height:100%; min-height:0; object-fit:contain; }
.reward-hero > .skin-stage { width:140px; height:160px; }
.reward-hero > .buy-bg { width:152px; height:132px; }
.reward-spark { position:absolute; z-index:1; width:11px; height:11px; background:#fff4cf; clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.reward-spark.s1 { left:16%; top:29%; }
.reward-spark.s2 { right:17%; top:56%; width:16px; height:16px; }
.reward-spark.s3 { right:27%; top:16%; width:6px; height:6px; }
.reward-tag { display:inline-block; border:1px solid rgba(var(--reward-rgb),.27); border-radius:99px; padding:5px 12px; color:var(--reward-accent); background:rgba(var(--reward-rgb),.08); font-size:11px; font-weight:600; }
#reward-title { margin:14px 0 9px; color:#fff9f0; font-size:30px; font-weight:800; line-height:1.14; letter-spacing:-1px; text-wrap:balance; overflow-wrap:anywhere; }
#reward-description { margin:0 auto; max-width:330px; color:#c6b9ce; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.reward-detail { margin:17px 0 0; padding:12px; border-radius:13px; border:1px solid #ffffff10; background:#ffffff05; font-size:12px; line-height:1.5; color:#eadcf0; }
.reward-items { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; list-style:none; padding:0; margin:20px 0 0; text-align:center; }
.reward-items li { min-width:0; padding:12px; border-radius:16px; background:linear-gradient(135deg,#a788ff1c,#ffffff06); border:1px solid #d5c0ff26; }
.reward-items li:only-child { grid-column:1/-1; text-align:center; }
.reward-items li:last-child:nth-child(odd):not(:first-child) { grid-column:1/-1; }
.reward-item-art { height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.reward-item-art > img { width:52px; height:52px; object-fit:contain; }
.reward-item-art > .buy-stage { width:56px; height:56px; }
.reward-item-art > .buy-frame { width:52px; height:52px; }
.reward-item-art .buy-frame .framed .ava { width:calc(48px / var(--fs,1.8)); height:calc(48px / var(--fs,1.8)); font-size:12px; }
.reward-item-art > .buy-bg { width:64px; height:48px; border-radius:8px; }
.reward-item-art > .nick-sample { max-width:100%; font-size:17px; overflow:hidden; }
.reward-item-art > .enter-art { transform:scale(.5); }
.reward-items b { display:block; color:#fff5e5; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.reward-items small { display:block; color:#c6b9ce; font-size:11px; line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
.reward-perks { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:16px 0 0; }
.reward-perks span { border-radius:8px; padding:6px 9px; background:#ffffff07; border:1px solid #ffffff0c; color:#d4c7dd; font-size:11px; }
.reward-footer { flex:0 0 auto; padding:4px 26px 22px; background:linear-gradient(0deg,#241936 78%,#24193600); text-align:center; }
.reward-receipt { display:flex; align-items:center; justify-content:center; gap:6px; margin:10px 0 15px; font-size:11px; line-height:1.4; color:#a5c8b2; }
.reward-receipt svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:#a2d5b5; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.reward-confirm { width:100%; min-height:52px; padding:12px 18px; border:1px solid #ffd6c2; border-radius:16px; color:#411d38; background:var(--prize-button); box-shadow:0 7px 20px #ff8d9b24,inset 0 1px #fff7; font-size:15px; font-weight:800; transition:filter .15s,transform .15s; }
.reward-confirm:hover { filter:brightness(1.06); }
.reward-confirm:active { transform:scale(.985); }
.reward-dialog button:focus-visible { outline:2px solid #d8baff; outline-offset:2px; }
.reward-enter .reward-card { animation:reward-arrive .45s cubic-bezier(.16,1,.3,1) both; }
.reward-enter .reward-hero { animation:reward-reveal .7s cubic-bezier(.16,1,.3,1) both; }
.reward-enter .reward-rays { animation:reward-rays 9s ease-out 1; }
.reward-enter .reward-spark { animation:reward-spark 1.6s ease-in-out 2; }
.reward-enter .reward-spark.s2 { animation-delay:.3s; }
.reward-enter .reward-spark.s3 { animation-delay:.6s; }
@keyframes reward-arrive { from { opacity:0; transform:translateY(16px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes reward-reveal { from { opacity:0; transform:translateY(18px) scale(.72) rotate(-7deg); } to { opacity:1; transform:none; } }
@keyframes reward-rays { to { transform:rotate(90deg); } }
@keyframes reward-spark { 0%,100% { opacity:.35; transform:scale(.7); } 50% { opacity:1; transform:scale(1.2); } }
@media (max-width:359px) { .reward-scroll { padding:28px 18px 10px; } .reward-footer { padding:4px 18px 18px; } #reward-title { font-size:26px; } .reward-stage { height:170px; } .reward-hero { width:150px; height:150px; } }
@media (max-height:650px) { .reward-stage { height:140px; } .reward-hero { width:130px; height:130px; } .reward-scroll { padding-top:22px; } .reward-footer { padding-bottom:16px; } }
@media (prefers-reduced-motion:reduce) { .reward-dialog *, .reward-dialog::backdrop { animation:none!important; transition:none!important; } }
:root.perf-low .reward-dialog * { animation:none!important; transition:none!important; }
:root.perf-noblur .reward-dialog::backdrop { backdrop-filter:none; }
.reward-dialog [hidden] { display:none!important; }
.reward-text .reward-hero { width:100%; min-width:0; filter:none; }
.reward-text .nick-sample.big { font-size:clamp(22px,7vw,30px); padding:12px; max-width:100%; line-height:1.5; }
.reward-text .reward-rays { opacity:.13; }
.reward-text .reward-stage::before { opacity:.45; }
.reward-dismiss { margin-top:5px; width:100%; min-height:40px; color:#cbbdde; background:none; font-size:13px; }
.reward-vip .reward-card { background:radial-gradient(ellipse at 84% 12%,#ed74ce38,transparent 42%),var(--prize-panel); }
.reward-vip .reward-stage { height:152px; margin-top:5px; }
.reward-vip .reward-hero { width:192px; height:176px; filter:drop-shadow(0 12px 13px #170b324d); }
.reward-vip .reward-stage::before { width:250px; height:200px; background:radial-gradient(ellipse,#a576ee65,transparent 66%); }
.reward-vip .reward-rays { opacity:.2; background:repeating-conic-gradient(from 12deg,transparent 0deg 15deg,#d69fff66 18deg 22deg,transparent 25deg 36deg); }
.reward-vip .reward-spark.s1 { background:#8ef1dd; left:18%; top:38%; }
.reward-vip .reward-spark.s2 { background:#ffc292; right:17%; top:65%; }
.reward-vip .reward-spark.s3 { background:#f9bfff; right:20%; top:15%; }
.reward-vip #reward-title { margin:9px 0 8px; font-size:29px; letter-spacing:-.8px; }
.reward-vip #reward-description { max-width:290px; font-size:13px; color:#d5c7e8; line-height:1.5; }
.vip-pass { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:18px 0 14px; padding:15px 16px; border:1px solid #d6baff2e; border-radius:18px; background:linear-gradient(110deg,#b092ed1c,#eba3d911); text-align:left; }
.vip-pass-main { min-width:0; }
.vip-pass-term { display:block; color:#fff5e8; font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.8px; overflow-wrap:anywhere; }
.vip-pass-bottom { display:flex; flex-direction:column; flex-shrink:0; gap:5px; max-width:52%; font-size:10px; color:#c3addc; text-align:right; }
.vip-pass-until { color:#f1e2ff; font-size:11px; font-weight:600; overflow-wrap:anywhere; }
.reward-vip .reward-perks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0 0 7px; }
.vip-benefit { display:flex; flex-direction:column; align-items:flex-start; gap:9px; min-width:0; text-align:left; padding:12px; border-radius:16px; border:1px solid #a5efe21c; background:linear-gradient(145deg,#62d6c81c,#a98ee108); }
.vip-benefit:nth-child(2) { border-color:#f4b3e321; background:linear-gradient(145deg,#e38db521,#a98ee108); }
.vip-benefit-icon { display:grid; place-items:center; width:28px; height:28px; color:#a5f4df; border-radius:9px; background:#6fe5d315; flex-shrink:0; }
.vip-benefit:nth-child(2) .vip-benefit-icon { color:#ffc3e0; background:#ef87c91c; }
.vip-benefit-icon svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.vip-benefit b { display:block; font-size:12px; font-weight:700; color:#fff0fc; }
.vip-benefit small { display:block; font-size:10px; line-height:1.4; color:#c3b6d6; margin-top:4px; }
.reward-vip .reward-footer { padding-top:10px; padding-bottom:12px; }
.reward-vip .reward-receipt { display:none; }
.reward-vip .reward-confirm { min-height:50px; }
/* Selection, gifts and the VIP overview use the same surface and action colours. */
.bonus-card, .gotgift-card, .vip-sheet-card {
  --text:#fff3ff; --muted:#c9bcdb; --card-2:#453557; --sheet:#2b2040; --card:#302344;
  color:#fff3ff; background:var(--prize-panel); border:1px solid #dcb5ff57; border-radius:30px; box-shadow:0 20px 70px #110c2959; color-scheme:dark;
}
.bonus-card .bonus-top { background:#2b2040; }
.bonus-card .bonus-day { background:#9c7cc61c; border:1px solid #cdb1ed26; }
.bonus-card .bonus-day.now { background:linear-gradient(140deg,#ad7acb55,#e899a530); border-color:#f9b9d266; }
.bonus-card .bonus-note, .bonus-card .bonus-day small { color:#c9bcdb; }
.bonus-card .bonus-btn, .gotgift-card .primary, .vip-sheet-card .vip-buy, .vip-mini .vip-more {
  color:#411d38; background:var(--prize-button); border:1px solid #ffd6c2; border-radius:16px; box-shadow:0 7px 20px #ff8d9b24,inset 0 1px #fff7;
}
.bonus-card .bonus-btn::after, .vip-sheet-card .vip-buy::after { animation:none; display:none; }
.bonus-card .bonus-btn:disabled { opacity:.55; box-shadow:none; }
.gotgift-card { max-width:400px!important; padding:24px!important; }
.gotgift-card .gg-top { color:#dfbaff; font-size:10px; letter-spacing:1.5px; }
.gotgift-card .gg-name { font-size:27px; }
.gotgift-card .gg-art::before { background:radial-gradient(ellipse,#ac77ff44,#f79acb1c 50%,transparent 70%); animation:none; }
/* Light behind a gifted / bought item in its rarity colour. Own glow colours (not the shop --tint):
   epic is a magenta-violet so it stands out from the violet card. Shop card colours are untouched. */
.gg-art.rar-common, .reward-stage.rar-common { --glow-rgb:226,232,248; }
.gg-art.rar-rare, .reward-stage.rar-rare { --glow-rgb:64,166,255; }
.gg-art.rar-epic, .reward-stage.rar-epic { --glow-rgb:220,84,255; }
.gg-art.rar-legendary, .reward-stage.rar-legendary { --glow-rgb:255,190,60; }
.gotgift-card .gg-art[class*="rar-"]::before { inset:-22%; background:radial-gradient(ellipse,rgba(var(--glow-rgb),.68),rgba(var(--glow-rgb),.27) 42%,transparent 70%); }
.reward-stage[class*="rar-"]::before { width:280px; height:230px; background:radial-gradient(ellipse,rgba(var(--glow-rgb),.68),rgba(var(--glow-rgb),.27) 42%,transparent 70%); }
.gotgift-card .gg-from, .gotgift-card .gg-txt small { color:#c9bcdb; }
.gotgift-card .gg-from b, .gotgift-card .gg-txt b { color:#fff3ff; }
:root[data-theme="light"] .gotgift-card .gg-row, .gotgift-card .gg-row { background:#ae91df16; }
.vip-sheet-card { padding:8px 16px calc(16px + var(--safe-b)); }
.vip-sheet-card .pf-vip { padding:0; background:none; box-shadow:none; }
.vip-sheet-card .pf-vip-art { height:140px; margin:0; }
.vip-sheet-card .pf-vip-art img { width:160px; height:148px; margin:0; filter:none; }
.vip-sheet-card .pf-vip-title { margin:0; max-width:300px; font-size:26px; line-height:1.13; letter-spacing:-.6px; color:#fff3ff; background:none; -webkit-text-fill-color:currentColor; }
.vip-sheet-card .pf-vip-sub { color:#dbc9ec; font-size:13px; margin:4px 0 6px; }
.vip-sheet-card .pf-vip.active .pf-vip-sub { color:#9ef0d7; }
.vip-sheet-card .vip-perk { border:1px solid #d4bbfa30; background:linear-gradient(140deg,#9b7ae524,#ffffff07); box-shadow:none; }
.vip-sheet-card .vip-perk:nth-child(4n+2) { background:linear-gradient(140deg,#f597aa27,#ffffff07); }
.vip-sheet-card .vip-perk:nth-child(4n+3) { background:linear-gradient(140deg,#78dfca20,#ffffff07); }
.vip-sheet-card .perk-text b { color:#f4e6ff; font-size:13px; }
.vip-sheet-card .perk-text small { color:#c3b4d7; }
.vip-sheet-card .pf-vip.active .vip-perk::after { background:#92e7cf; box-shadow:none; }
.vip-sheet-card .pf-vip.active .vip-perk::before { border-color:#224f4c; }
.vip-sheet-card .vip-buy { box-shadow:0 -9px 20px #261a3c,0 7px 20px #ff8d9b24; width:100%; }
.vip-mini { background:radial-gradient(ellipse at 0 0,#a367ef58,transparent 70%),linear-gradient(110deg,#48306b,#61315c); border:1px solid #dcb5ff57; box-shadow:none; }
.vip-mini .pf-vip-title { background:none; -webkit-text-fill-color:currentColor; color:#fff3ff; }
.vip-mini-art { width:62px; height:62px; }
.vip-mini-art img { width:66px; height:62px; margin:0; filter:none; }
.vip-mini.active small { color:#a5f0da; font-weight:500; }
.shop-tab.vip.on { color:#411d38; background:var(--prize-button); }
.vip-gift-button { background:linear-gradient(120deg,#9169d438,#ed89b524); border-color:#d6acff55; }
.vip-gift-button:disabled { opacity:.55; }
.vip-categories [aria-pressed="true"] { color:#f2c2eb; border-color:#dca4ed77; background:#bb77cc26; }
:root.perf-norewardfx .reward-dialog * { animation:none!important; transition:none!important; }
:root.perf-norewardfx .reward-rays, :root.perf-norewardfx .reward-spark { display:none; }
:root.perf-low .gotgift-card *, :root.perf-norewardfx .gotgift-card * { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .gotgift-card * { animation:none!important; } }
@media(max-height:700px) { .reward-vip .reward-stage { height:126px; } .reward-vip .reward-hero { width:157px; height:144px; } .reward-vip .vip-pass { margin-top:14px; } }
@media(max-width:359px) { .reward-vip #reward-title { font-size:26px; } .vip-benefit { padding:10px; } .vip-pass { padding:12px 14px; } .vip-pass-term { font-size:27px; } }
@media(max-height:620px) and (max-width:500px) {
 .reward-vip .reward-scroll { padding-top:20px; }
 .reward-vip .reward-stage { height:80px; }
 .reward-vip .reward-hero { width:110px; height:101px; }
 .reward-vip #reward-description { font-size:12px; line-height:1.4; }
 .reward-vip .vip-pass { margin:10px 0; padding:10px 13px; }
 .reward-vip .vip-pass-term { font-size:24px; }
 .reward-vip .vip-benefit { gap:7px; padding:10px; }
 .reward-vip .vip-benefit-icon { width:22px; height:22px; }
 .reward-vip .vip-benefit b { font-size:10px; }
 .reward-vip .vip-benefit small { font-size:10px; line-height:1.35; }
 .reward-vip .reward-footer { padding-top:8px; padding-bottom:8px; }
 .reward-vip .reward-confirm { min-height:46px; }
 .reward-vip .reward-dismiss { min-height:32px; }
}