/* coin-store.css — the /coin-store/ page (2026-10-10, redesigned as an arcade prize counter).
   Items sit in lit display cases whose glass tells the rarity (common lilac, rare blue, epic violet,
   legendary gold foil); prices are cream redemption tickets. Item looks themselves (chip skins,
   frames, name styles, reel/home themes) come from /css/pip-store.css + /css/pip-looks.css, so a
   preview is exactly what the site will show. Mobile first (390px), no external assets. */
body.cs-body {
  --cs-night: #1f1336; --cs-glass: #2c1d4a; --cs-glass-2: #3a2a5c; --cs-line: #4b3a72;
  --cs-text: #f6f1ff; --cs-soft: #cfc4ea; --cs-ticket: #fff1cf; --cs-ink: #2b1638;
  --cs-gold: #ffc93c; --cs-red: #c8203c; --cs-mint: #3be3b0;
  --t-common: #b9add9; --t-rare: #5aa9ff; --t-epic: #c08bff; --t-legendary: #ffc93c;
  background: var(--cs-night) radial-gradient(ellipse 140% 50% at 50% -12%, #4a2a7a 0, transparent 70%) no-repeat;
  color: var(--cs-text); color-scheme: dark;
}
body.cs-body .nav-slab { background: #261843; border-bottom: 1px solid var(--cs-line); color: var(--cs-text); }
body.cs-body .nav-slab a:not(.btn) { color: var(--cs-text); }
body.cs-body .nav-slab a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--cs-gold); }
body.cs-body :is(.crumb, .crumb a, .foot-index, .foot-index a, .colophon, .caps) { color: var(--cs-soft); }
body.cs-body :is(h1, h2, h3) { color: var(--cs-text); }
body.cs-body a:not(.btn) { color: #ffd76a; }
.cs-main { max-width: 1100px; margin: 0 auto; padding: 0 14px 40px; }

/* ---- shared bits ---- */
.cs-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 30px 0 12px; }
.cs-sechead h2 { margin: 0; font-size: 1.45rem; letter-spacing: -.01em; }
.cs-sechead p { margin: 0; color: var(--cs-soft); font-size: .92rem; }
.cs-art { width: 100%; height: 100%; display: block; overflow: visible; }

.cs-btn {
  font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; border: 0; border-radius: 10px; padding: 0 16px; min-height: 40px;
  background: var(--cs-gold); color: var(--cs-ink); box-shadow: 0 3px 0 #9a6a00; transition: transform .08s;
}
.cs-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a6a00; }
.cs-btn:focus-visible, .cs-tab:focus-visible, .cs-item__art:focus-visible, .cs-feat__art:focus-visible, .cs-deal__art:focus-visible,
.cs-trophy:focus-visible, .cs-sheet__close:focus-visible, .cs-linkbtn:focus-visible { outline: 3px solid #8fe9ff; outline-offset: 2px; }
.cs-btn[disabled] { cursor: not-allowed; background: var(--cs-glass-2); color: var(--cs-soft); box-shadow: none; }
.cs-btn--equip { background: var(--cs-mint); color: #062a20; box-shadow: 0 3px 0 #13896a; }
.cs-btn--on[disabled] { background: transparent; color: var(--cs-mint); box-shadow: inset 0 0 0 2px var(--cs-mint); }
.cs-btn--confirm { background: var(--cs-red); color: #fff; box-shadow: 0 3px 0 #6e0c1f; animation: cs-pulse 1s infinite; }
@keyframes cs-pulse { 50% { filter: brightness(1.18); } }
.cs-btn--ghost { background: transparent; color: var(--cs-text); box-shadow: inset 0 0 0 2px var(--cs-line); }
.cs-note { font-size: .85rem; color: var(--cs-soft); text-align: right; }
.cs-linkbtn { border: 0; padding: 0; background: none; font: inherit; color: #ffd76a; text-decoration: underline; cursor: pointer; }

/* the price: a cream redemption ticket with punched ends */
.cs-ticket {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px 5px 9px; min-height: 30px; box-sizing: border-box;
  background: var(--cs-ticket); color: var(--cs-ink); font-weight: 900; font-variant-numeric: tabular-nums; font-size: .95rem;
  -webkit-mask: radial-gradient(circle 5px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 5px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 5px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  border-radius: 3px;
}
.cs-ticket .cs-art { width: 18px; height: 18px; }
.cs-ticket s { font-weight: 600; color: #6b4a6e; font-size: .8rem; }
.cs-ticket--free { color: #0b5a45; }
.cs-ticket--gone { background: var(--cs-glass-2); color: var(--cs-soft); }

/* rarity label: sentence case, a small gem in the tier colour */
.cs-tier { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--tc, var(--t-common)); }
.cs-tier::before { content: ""; width: 9px; height: 9px; background: currentColor; transform: rotate(45deg); border-radius: 1px; }
.cs-tier--rare { --tc: var(--t-rare); } .cs-tier--epic { --tc: var(--t-epic); } .cs-tier--legendary { --tc: var(--t-legendary); }

/* ---- hero + wallet (a big ticket stub) ---- */
.cs-hero { display: grid; gap: 16px; margin: 6px 0 0; }
.cs-hero h1 { margin: 0 0 6px; font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1; letter-spacing: -.035em; font-weight: 900; color: var(--cs-gold); text-shadow: 0 3px 0 #6e3d00; }
.cs-hero p { margin: 0; max-width: 52ch; color: var(--cs-soft); }
.cs-wallet {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 16px 18px;
  background: var(--cs-ticket); color: var(--cs-ink); border-radius: 6px;
  -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.cs-wallet::after { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; border-top: 2px dashed #2b163833; pointer-events: none; display: none; }
.cs-wallet__bal { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
.cs-wallet__icon { font-size: 1.9rem; align-self: center; }
.cs-wallet__bal b { font-size: clamp(2.2rem, 10vw, 2.8rem); line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cs-wallet__bal small { font-weight: 700; color: #5a3d63; }
.cs-wallet__lvl { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: .9rem; }
.cs-xp { width: 110px; height: 8px; border-radius: 4px; background: #2b16381f; overflow: hidden; }
.cs-xp i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: #7a3df0; }
.cs-wallet__meta { grid-column: 1; margin: 0; font-size: .85rem; color: #5a3d63 !important; }
.cs-wallet .cs-btn--ghost { grid-column: 2; grid-row: 2 / span 2; color: var(--cs-ink); box-shadow: inset 0 0 0 2px var(--cs-ink); padding: 0 12px; font-size: .85rem; }
.cs-wallet.is-bump .cs-wallet__bal b { animation: cs-bump .5s; }
@keyframes cs-bump { 40% { transform: scale(1.1); color: #7a3df0; } }
.cs-active { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-active span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 8px; background: var(--cs-glass); box-shadow: inset 0 0 0 1px var(--cs-line); font-size: .85rem; }
.cs-active .cs-art { width: 22px; height: 22px; }
@media (min-width: 760px) {
  .cs-hero { grid-template-columns: 1fr 380px; align-items: end; }
  .cs-active { grid-column: 1 / -1; }
}

/* ---- power-ups: the three things you actually use, up front ---- */
.cs-power__row { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
@media (min-width: 760px) { .cs-power__row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.cs-power__card {
  scroll-snap-align: start; display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto auto; gap: 8px 12px; padding: 14px;
  border-radius: 16px; background: linear-gradient(160deg, #33215a, #24173f); box-shadow: inset 0 0 0 1.5px var(--cs-line);
}
.cs-power__art { grid-row: 1 / span 2; width: 76px; height: 76px; padding: 8px; box-sizing: border-box; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #ffe36b33, transparent 70%), var(--cs-glass-2); }
.cs-power__text h3 { margin: 0 0 2px; font-size: 1.1rem; }
.cs-power__text p { margin: 0; color: var(--cs-soft); font-size: .86rem; line-height: 1.4; }
.cs-power__text .cs-power__where { margin-top: 6px; color: var(--cs-text); font-weight: 700; }
.cs-power__hold { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--cs-soft); }
.cs-pips { display: inline-flex; gap: 3px; }
.cs-pips i { width: 7px; height: 7px; border-radius: 2px; background: var(--cs-glass-2); box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs-pips i.is-full { background: var(--cs-mint); box-shadow: none; }
.cs-power__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---- featured this week + the daily deal ---- */
.cs-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-feat { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--cs-glass); box-shadow: inset 0 0 0 1.5px var(--tc, var(--cs-line)); }
.cs-feat--rare { --tc: var(--t-rare); } .cs-feat--epic { --tc: var(--t-epic); } .cs-feat--legendary { --tc: var(--t-legendary); }
.cs-feat--hero { grid-column: 1 / -1; grid-template-columns: 1fr; padding: 14px; background: radial-gradient(ellipse 80% 70% at 50% 20%, color-mix(in srgb, var(--tc, #b9add9) 34%, transparent), transparent 70%), var(--cs-glass); }
.cs-feat__art { display: grid; place-items: center; height: 104px; border: 0; padding: 10px; border-radius: 12px; background: #00000026; cursor: pointer; color: inherit; font: inherit; }
.cs-feat--hero .cs-feat__art { height: 150px; }
.cs-feat__text h3 { margin: 2px 0 0; font-size: 1.05rem; }
.cs-feat--hero .cs-feat__text h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.cs-feat__text p { margin: 4px 0 0; color: var(--cs-soft); font-size: .9rem; }
@media (min-width: 760px) {
  .cs-feats { grid-template-columns: 1.4fr 1fr 1fr; }
  .cs-feat--hero { grid-column: auto; grid-row: span 1; }
}
.cs-deal {
  display: grid; grid-template-columns: 72px 1fr; gap: 10px 14px; align-items: center; margin-top: 14px; padding: 14px 18px;
  background: var(--cs-ticket); color: var(--cs-ink); border-radius: 6px;
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.cs-deal__art { width: 72px; height: 72px; padding: 8px; border: 0; border-radius: 12px; background: var(--cs-night); cursor: pointer; }
.cs-deal__art .cs-plate { font-size: .7rem; }
.cs-deal :is(h2, p) { margin: 0; color: var(--cs-ink) !important; }
.cs-deal__tag { font-weight: 900; color: #a3122e !important; font-size: .9rem; }
.cs-deal h2 { font-size: 1.3rem; line-height: 1.15; }
.cs-deal__price s { color: #6b4a6e; }
.cs-deal__price b { font-size: 1.1rem; }
.cs-deal__timer { font-size: .85rem; font-variant-numeric: tabular-nums; }
.cs-deal__act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.cs-deal .cs-note { color: #4a2d55; font-weight: 700; }
.cs-deal .cs-btn[disabled] { background: #2b16381a; color: #4a2d55; }
@media (min-width: 760px) { .cs-deal { grid-template-columns: 72px 1fr auto; } .cs-deal__act { grid-column: auto; } }

/* ---- section tabs ---- */
.cs-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; overflow-x: auto; margin: 30px -14px 8px; padding: 0 14px; background: var(--cs-night); box-shadow: inset 0 -1px 0 var(--cs-line); scrollbar-width: none; }
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab { flex: none; min-height: 46px; padding: 0 12px; border: 0; background: none; color: var(--cs-soft); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; box-shadow: inset 0 -3px 0 transparent; }
.cs-tab[aria-pressed="true"] { color: var(--cs-text); box-shadow: inset 0 -3px 0 var(--cs-gold); }

/* ---- the display cases ---- */
.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.cs-cathead { grid-column: 1 / -1; margin: 18px 0 0; }
.cs-cathead h2 { margin: 0; font-size: 1.25rem; }
.cs-cathead p { margin: 2px 0 0; color: var(--cs-soft); font-size: .88rem; }
.cs-empty { grid-column: 1 / -1; color: var(--cs-soft); }
.cs-item {
  --tc: var(--t-common); --well: #3a2a5c;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 8px 8px 10px; border-radius: 14px;
  background: var(--cs-glass); box-shadow: inset 0 0 0 1px #ffffff14;
}
.cs-item--rare { --tc: var(--t-rare); --well: #1d3566; }
.cs-item--epic { --tc: var(--t-epic); --well: #3d1f6e; }
.cs-item--legendary { --tc: var(--t-legendary); --well: #4a3108; }
.cs-item--util { --tc: var(--cs-mint); --well: #183f45; }
.cs-item__art {
  position: relative; display: grid; place-items: center; aspect-ratio: 5 / 4; width: 100%; padding: 9%; box-sizing: border-box; border: 0; cursor: pointer; color: inherit; font: inherit;
  border-radius: 10px; background: radial-gradient(ellipse 70% 60% at 50% 38%, color-mix(in srgb, var(--tc) 40%, transparent), transparent 72%), var(--well);
  box-shadow: inset 0 -10px 0 #00000030, inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 55%, transparent);
  overflow: hidden;
}
/* epic: faceted glass; legendary: a gold foil rim with a slow sweep (the one ambient motion on the page) */
.cs-item--epic .cs-item__art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, #ffffff14 30% 46%, transparent 46% 62%, #ffffff0d 62% 70%, transparent 70%); pointer-events: none; }
.cs-item--legendary { box-shadow: inset 0 0 0 2px var(--t-legendary), 0 0 18px #ffc93c33; }
.cs-item--legendary .cs-item__art::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, #fff3c466 50%, transparent 58%); animation: cs-foil 5s ease-in-out infinite;
}
@keyframes cs-foil { from { transform: translateX(-60%); } 60%, to { transform: translateX(60%); } }
.cs-item.is-locked .cs-item__art > :not(.cs-plate) { filter: grayscale(.5) brightness(.8); }
.cs-item__body h3 { margin: 2px 0 2px; font-size: 1rem; line-height: 1.2; }
.cs-item__body p { margin: 0; color: var(--cs-soft); font-size: .82rem; line-height: 1.35; }
.cs-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cs-item__foot .cs-btn { flex: 1 1 auto; }
.cs-flag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 800; pointer-events: none; }
.cs-flag--deal { background: var(--cs-red); color: #fff; }
.cs-flag--own { background: var(--cs-mint); color: #062a20; }
.cs-flag--lock { background: #120a24e6; color: var(--cs-text); }
.cs-flag--gone { background: var(--cs-soft); color: var(--cs-ink); }

/* a name style shows as itself */
.cs-plate { display: grid; place-items: center; width: 100%; font-size: clamp(1.05rem, 5.4vw, 1.4rem); color: var(--cs-text); }
.cs-plate .pipn { font-size: inherit; }
.cs-plate--big { font-size: 1.9rem; }

/* ---- trophy case ---- */
.cs-shelf {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 8px; padding: 16px 12px 22px; border-radius: 16px;
  background: linear-gradient(180deg, #2a1810, #1c100a); box-shadow: inset 0 -10px 0 #4a2c16, inset 0 0 0 2px #00000055;
}
@media (min-width: 640px) { .cs-shelf { grid-template-columns: repeat(8, 1fr); } }
.cs-trophy { display: grid; justify-items: center; gap: 4px; padding: 4px; border: 0; background: none; color: #f3dfc1; font: inherit; font-size: .75rem; cursor: pointer; border-radius: 10px; }
.cs-trophy .cs-art { width: 100%; max-width: 70px; aspect-ratio: 1; height: auto; }
.cs-trophy.is-empty .cs-art { filter: brightness(0) opacity(.35); }
.cs-trophy b { font-weight: 700; }
.cs-trophy.is-empty b { color: #cdb894; font-weight: 600; }

/* ---- earn + faq (light text on the counter) ---- */
.cs-earn { margin: 30px 0 0; }
.cs-earn__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cs-earn__list li { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--cs-glass); }
.cs-earn__list span { font-size: .88rem; color: var(--cs-soft); }
.cs-play { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cs-play a { padding: 8px 14px; border-radius: 10px; background: var(--cs-glass-2); color: var(--cs-gold); font-weight: 700; text-decoration: none; }
.cs-faq { margin-top: 30px; }
body.cs-body .cs-faq :is(p, li) { color: var(--cs-soft); }

/* ---- preview sheet ---- */
.cs-sheet {
  width: min(520px, 100%); max-height: 92vh; margin: auto auto 0; padding: 18px 16px 20px; box-sizing: border-box; border: 0; border-radius: 20px 20px 0 0;
  background: #24173f; color: var(--cs-text); box-shadow: 0 -10px 40px #000a;
}
@media (min-width: 640px) { .cs-sheet { margin: auto; border-radius: 20px; } }
.cs-sheet::backdrop { background: #0d0718b3; }
.cs-sheet[open] { animation: cs-up .22s ease-out; }
@keyframes cs-up { from { transform: translateY(24px); opacity: 0; } }
.cs-sheet__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--cs-glass-2); color: var(--cs-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cs-sheet__stage {
  --tc: var(--t-common); display: grid; place-items: center; gap: 12px; min-height: 180px; padding: 22px 14px; margin: 26px 0 14px; border-radius: 14px;
  background: radial-gradient(ellipse 70% 70% at 50% 35%, color-mix(in srgb, var(--tc) 30%, transparent), transparent 72%), #170e2a;
}
.cs-sheet__stage--rare { --tc: var(--t-rare); } .cs-sheet__stage--epic { --tc: var(--t-epic); } .cs-sheet__stage--legendary { --tc: var(--t-legendary); } .cs-sheet__stage--util { --tc: var(--cs-mint); }
.cs-sheet__text h2 { margin: 4px 0 4px; font-size: 1.5rem; }
.cs-sheet__text p { margin: 0 0 8px; color: var(--cs-soft); }
.cs-sheet__text .cs-sheet__seen { color: var(--cs-text); font-weight: 600; font-size: .9rem; }
.cs-sheet .cs-item__foot { margin-top: 12px; }
.cs-sheet .cs-item__foot .cs-btn { flex: 0 1 200px; min-height: 46px; }
.cs-bigart { width: 140px; height: 140px; }
/* previews */
.cs-board { width: 100%; max-width: 330px; padding: 10px 12px; border-radius: 12px; background: #fff7ea; color: #1f2328; font-size: .95rem; }
.cs-board p { margin: 0 0 6px; font-size: .8rem; color: #5d6168 !important; font-weight: 600; }
.cs-board ol { list-style: none; margin: 0; padding: 0; }
.cs-board li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #e5d6b8; font-variant-numeric: tabular-nums; }
.cs-board li:last-child { border: 0; }
.cs-board li.is-you { background: #fbefd9; font-weight: 700; }
.cs-board__who { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cs-headbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 330px; padding: 10px 12px; border-radius: 12px; background: #261843; box-shadow: inset 0 0 0 1px var(--cs-line); }
.cs-headbar__mark { font-weight: 900; font-size: .85rem; }
.cs-headbar .pipa-chip__coins { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px; border-radius: 999px; background: #fff; color: #1b1b1b; font-weight: 800; }
.cs-reels { display: grid; grid-template-columns: repeat(3, 64px); gap: 4px; padding: 6px; border-radius: 12px; background: #111827; }
.cs-reels__col { display: grid; gap: 2px; border-radius: 6px; background: linear-gradient(90deg, #cbd5e1, #fff 22%, #fff 78%, #cbd5e1); overflow: hidden; }
.cs-reels__col span { display: grid; place-items: center; height: 46px; font-size: 1.6rem; font-weight: 900; color: #c8203c; opacity: .55; }
.cs-reels__col span.is-line { opacity: 1; }
.cs-homedemo { width: 100%; max-width: 330px; padding: 14px; border-radius: 12px; box-sizing: border-box; background: var(--color-console, #2a1840); color: var(--color-console-text, #f7f2ff); box-shadow: inset 0 0 0 1px var(--color-console-3, #4b3a72); position: relative; overflow: hidden; }
.cs-homedemo b { display: block; font-size: 1.05rem; line-height: 1.2; }
.cs-homedemo p { margin: 4px 0 10px; font-size: .82rem; color: var(--color-console-muted, #cfc4ea) !important; }
.cs-homedemo div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cs-homedemo span { height: 40px; border-radius: 8px; background: var(--color-console-2, #3b2560); box-shadow: inset 0 0 0 1px var(--color-console-3, #4b3a72); }
.cs-homedemo span:first-child { background: var(--color-accent, #ffd23f); }
.cs-homedemo.pip-theme-demo--crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, #00000030 0 1px, transparent 1px 3px); }
.cs-framedemo { display: grid; place-items: center; width: 70%; max-width: 240px; aspect-ratio: 4 / 3; border-radius: 14px; background: linear-gradient(160deg, #2b3a67, #0f1630); color: #ffffffb3; font-weight: 700; font-size: .85rem; }
.cs-titledemo { display: grid; justify-items: center; gap: 4px; }
.cs-titledemo b { font-size: 1.3rem; }

/* toast */
.cs-toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000; padding: 10px 16px; border-radius: 12px; background: var(--cs-ticket); color: var(--cs-ink); box-shadow: 0 8px 24px #0008; font-weight: 800; animation: cs-in .25s; }
@keyframes cs-in { from { opacity: 0; transform: translate(-50%, 10px); } }

@media (prefers-reduced-motion: reduce) {
  .cs-btn--confirm, .cs-wallet.is-bump .cs-wallet__bal b, .cs-item--legendary .cs-item__art::after, .cs-sheet[open], .cs-toast { animation: none; }
}

/* art sizing: the square SVG fills the height of its well, never its width */
.cs-item__art, .cs-feat__art, .cs-deal__art, .cs-power__art { display: flex; align-items: center; justify-content: center; }
:is(.cs-item__art, .cs-feat__art, .cs-deal__art, .cs-power__art, .cs-bigart) > .cs-art { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; }
body.cs-body .cs-hero h1 { color: var(--cs-gold); }
.cs-wallet__lvl span:first-child { white-space: nowrap; }