/* ---- cards.css */
/* Goop Cards, Series 1: the card face (drawn in code over each goop's painting, so every number and word on a card comes
   from the game's data), the binder, the deck builder and the card viewer. A card scales as one piece: everything inside
   is sized in cqw, hundredths of the card's own width. */

.gc{ --rc:#cfd9e8; position:relative; width:100%; aspect-ratio:1199/1312; border-radius:6% / 5.5%; isolation:isolate; user-select:none; -webkit-user-select:none;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.gc-img{ display:block; width:100%; height:100%; border-radius:inherit; object-fit:cover; background:#120820; }
/* tier finishes. Platinum: a sheen across the card. Diamond: a holo foil. Mythic: a prism foil and a glow. */
.gc-holo{ position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; mix-blend-mode:color-dodge; opacity:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0) 30%, rgba(160,255,250,.45) 42%, rgba(255,140,240,.45) 50%, rgba(255,240,140,.45) 58%, transparent 72%);
  background-size:250% 250%; background-position:var(--hx, 50%) var(--hy, 50%); }
.gc[data-r="3"]::before{ content:''; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; mix-blend-mode:overlay;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.32) 45%, transparent 60%); background-size:300% 100%; animation:gcSheen 5.5s ease-in-out infinite; }
.gc[data-r="4"] .gc-holo{ opacity:.4; animation:gcHolo 7s ease-in-out infinite; }
.gc[data-r="5"] .gc-holo{ opacity:.6; animation:gcHolo 6s ease-in-out infinite;
  background:linear-gradient(120deg, transparent 15%, rgba(255,79,216,.5) 30%, rgba(255,210,63,.5) 42%, rgba(157,255,46,.45) 54%, rgba(63,224,255,.5) 66%, rgba(180,92,255,.5) 78%, transparent 90%); background-size:300% 300%; }
.gc[data-r="5"]::after{ content:''; position:absolute; inset:-2.5%; z-index:-1; border-radius:8% / 7%; background:conic-gradient(from 0deg, #ff4fd8, #ffd23f, #9dff2e, #3fe0ff, #b45cff, #ff4fd8);
  filter:blur(12px); opacity:.6; }
.gc[data-r="4"]::after{ content:''; position:absolute; inset:-2%; z-index:-1; border-radius:8% / 7%; background:radial-gradient(closest-side, rgba(199,168,255,.65), transparent); filter:blur(8px); }
@keyframes gcSheen{ 0%,100%{ background-position:120% 0; } 50%{ background-position:-20% 0; } }
@keyframes gcHolo{ 0%,100%{ background-position:0% 0%; } 50%{ background-position:100% 100%; } }
@media (prefers-reduced-motion:reduce){ .gc::before, .gc .gc-holo{ animation:none !important; } }
html.calm .gc::before, html.calm .gc .gc-holo{ animation:none !important; }

/* a card not yet in the binder: a dark shadow of it, its number kept so it's something to look for */
.gc.missing .gc-img{ filter:brightness(.16) saturate(0) blur(1.5px); }
.gc.missing::before{ content:'?'; position:absolute; inset:0; z-index:2; display:grid; place-items:center; font:400 clamp(30px, 30cqw, 90px)/1 var(--f-display); color:rgba(255,255,255,.2); animation:none; background:none; mix-blend-mode:normal; }
.gc{ container-type:inline-size; }
.gc-mno{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%); z-index:3; padding:2px 8px; border-radius:99px; background:rgba(0,0,0,.6); font:700 clamp(9px, 7cqw, 14px)/1.4 var(--f-head); color:rgba(255,255,255,.7); white-space:nowrap; }
.gc.missing .gc-holo, .gc.missing::after{ display:none; }

/* the small card used for item icons and inside slabs */
.gc-mini{ display:block; position:relative; width:100%; height:100%; border-radius:12%; overflow:hidden; background:#120820;
  box-shadow:inset 0 0 0 2px var(--rc, #fff), 0 2px 6px rgba(0,0,0,.4); }
.gc-mini img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.gc-mini::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--rc, #fff); }
/* the tier name, as a little medal */
.tierp{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px; font:800 12px/1 var(--f-head); letter-spacing:.08em; text-transform:uppercase; color:#170b26;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow:0 0 0 1.5px rgba(0,0,0,.5), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.tierp[data-t="5"]{ background:linear-gradient(90deg, #ff4fd8, #ffd23f, #9dff2e, #3fe0ff, #b45cff); }

/* ---------- the Card Shop */
.ccs-wrap{ display:grid; gap:20px; min-width:0; }
.ccs-packs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap:18px; }
.ccs-pack{ display:grid; gap:14px; justify-items:start; min-width:0; }
.ccs-pack h2{ font:400 clamp(26px, 4vw, 34px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.ccs-h{ font:400 clamp(28px, 4vw, 40px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); margin:6px 0 0; }
.ccs-slot{ position:relative; perspective:900px; width:100%; aspect-ratio:1199/1312; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; }
.ccs-inner{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,1.35,.5,1); }
.ccs-slot.up .ccs-inner{ transform:rotateY(180deg); }
.ccs-back, .ccs-card-face{ position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ccs-card-face{ transform:rotateY(180deg); }
.ccs-back{ display:grid; place-items:center; border:3px solid var(--lime); box-shadow:0 10px 22px rgba(0,0,0,.45);
  background:radial-gradient(circle at 50% 36%, #c8ff86 0 9%, transparent 10%), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 6px, transparent 6px 12px), linear-gradient(160deg, #4a1a96, #1a0f2a);
  font:400 17px/.95 var(--f-display); color:var(--lime); text-align:center; }
.ccs-slot.glow .ccs-card-face{ box-shadow:0 0 0 2px var(--rc), 0 0 26px 6px color-mix(in srgb, var(--rc) 60%, transparent); animation:ccs-glow 1.4s ease-out 1; }
@keyframes ccs-glow{ 0%{ filter:brightness(1.7); } 100%{ filter:brightness(1); } }
@media (prefers-reduced-motion:reduce){ .ccs-inner{ transition-duration:.01s; } .ccs-slot.glow .ccs-card-face{ animation:none; } }

/* ---------- Card Shop tabs */
.cs-tabs{ display:flex; gap:6px; padding:5px; border-radius:18px; background:var(--panel); border:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.cs-tabs::-webkit-scrollbar{ display:none; }
.cs-tabs button{ flex:1 0 auto; min-height:44px; padding:10px 16px; border:0; border-radius:14px; background:none; color:var(--mute); font:700 15px/1 var(--f-head); cursor:pointer; white-space:nowrap; }
.cs-tabs button[aria-selected="true"]{ background:linear-gradient(180deg, var(--lime2), var(--lime)); color:var(--limeink); box-shadow:0 4px 0 #4e8f12; }
.cs-tabs button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.cs-tabs b{ display:inline-block; min-width:22px; margin-left:6px; padding:3px 6px; border-radius:99px; background:rgba(0,0,0,.25); font-size:12px; }

/* singles and binder grids */
.cs-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap:16px; }
@media (max-width:420px){ .cs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } }
.cs-cell{ display:grid; gap:8px; padding:0; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; min-width:0; -webkit-tap-highlight-color:transparent; }
.cs-cell .gc{ transition:transform .18s cubic-bezier(.3,1.4,.5,1), filter .18s; }
.cs-cell:hover .gc, .cs-cell:focus-visible .gc{ transform:translateY(-4px) rotate(-.6deg); }
.cs-cell:focus-visible{ outline:none; } .cs-cell:focus-visible .gc{ outline:3px solid var(--lime); outline-offset:3px; }
.cs-meta{ display:flex; justify-content:space-between; align-items:center; gap:6px; flex-wrap:wrap; font:700 13px/1.1 var(--f-head); }
.cs-own{ position:absolute; top:-7px; right:-7px; z-index:5; min-width:28px; padding:5px 8px; border-radius:99px; background:var(--lime); color:var(--limeink); font:800 12px/1 var(--f-head); text-align:center; box-shadow:0 3px 8px rgba(0,0,0,.45); }
.cs-cardwrap{ position:relative; }
.cs-filter{ display:flex; flex-wrap:wrap; gap:6px; }
.cs-filter button{ min-height:36px; padding:8px 12px; border-radius:99px; border:1px solid var(--line2); background:var(--panel2); color:var(--mute); font:700 13px/1 var(--f-head); cursor:pointer; }
.cs-filter button[aria-pressed="true"]{ background:var(--panel3); color:var(--ink); border-color:var(--c, var(--lime)); box-shadow:inset 0 0 0 1px var(--c, var(--lime)); }

/* binder progress */
.cs-prog{ display:grid; gap:12px; }
.cs-bar{ position:relative; height:14px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line2); }
.cs-bar i{ position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, var(--lime), #5af0ff, #c77dff, var(--gold)); }
.cs-rars{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-rars span{ padding:6px 10px; border-radius:12px; background:var(--panel2); border:1px solid color-mix(in srgb, var(--c) 50%, transparent); color:var(--c); font:700 13px/1 var(--f-head); }
.cs-rars span.done{ background:color-mix(in srgb, var(--c) 18%, var(--panel2)); }

/* the card viewer */
.gcv{ display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:24px; align-items:start; text-align:left; }
.gcv-stage{ perspective:1000px; }
.gcv-card{ transform-style:preserve-3d; transition:transform .25s ease-out; will-change:transform; }
.gcv-card .gc[data-r="2"] .gc-holo, .gcv-card .gc[data-r="3"] .gc-holo{ opacity:.3; }
.gcv h2{ margin:0; font-size:28px; }
.gcv-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; }
.gcv-stats div{ padding:10px 12px; border-radius:14px; background:var(--panel2); border:1px solid var(--line); }
.gcv-stats small{ display:block; font:700 11px/1 var(--f-head); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.gcv-stats b{ font:700 17px/1.1 var(--f-head); }
.gcv-rules{ margin:0; padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--tc) 10%, var(--panel2)); border:1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.gcv-rules b{ color:var(--tc); }
@media (max-width:640px){ .gcv{ grid-template-columns:minmax(0, 1fr); justify-items:center; text-align:center; } .gcv-stage{ width:min(260px, 72vw); } .gcv .row{ justify-content:center; } }

/* the deck builder */
.dk-slots{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:8px; }
@media (max-width:760px){ .dk-slots{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.dk-slot{ position:relative; display:grid; place-items:center; aspect-ratio:1199/1312; padding:0; border-radius:14px; border:2px dashed var(--line2); background:rgba(0,0,0,.2); color:var(--dim); font:700 13px/1.2 var(--f-head); cursor:pointer; min-width:0; }
.dk-slot .gc{ position:absolute; inset:0; height:100%; }
.dk-slot:focus-visible{ outline:3px solid var(--lime); outline-offset:3px; }
.dk-x{ position:absolute; top:-8px; right:-8px; z-index:6; width:26px; height:26px; border-radius:50%; background:#2a1747; border:2px solid #fff; color:#fff; font:800 14px/20px var(--f-head); text-align:center; }
.dk-meter{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.dk-meter .chip b{ color:var(--lime); }
.dk-warn{ margin:0; padding:10px 12px; border-radius:12px; background:rgba(255,210,63,.1); border:1px solid rgba(255,210,63,.4); color:var(--gold); font:600 14px/1.35 var(--f-body); }
.dk-pick .cs-cell[aria-pressed="true"] .gc{ outline:3px solid var(--lime); outline-offset:3px; }
.dk-pick .cs-cell[disabled]{ cursor:not-allowed; } .dk-pick .cs-cell[disabled] .gc{ filter:saturate(.55) brightness(.72); }
@media (max-width:440px){ .cs-tabs button{ padding:10px 10px; font-size:14px; } }
@media (max-width:520px){ .dk-slots{ gap:6px; } .dk-slot{ border-radius:10px; font-size:11px; } }

/* bigger cards where the card is the star */
.ccs-reveal{ grid-auto-columns:minmax(0, 176px); }
/* the Starter Pack's eight cards deal in two rows of four on a wide screen */
@media (min-width:761px){ .ccs-reveal.many{ grid-auto-flow:row; grid-template-columns:repeat(4, minmax(0, 168px)); } }
@media (max-width:760px){ .ccs-reveal .ccs-slot{ flex:0 0 176px; } .ccs-reveal{ padding-left:calc(50% - 88px); padding-right:calc(50% - 88px); } }
.ccs-buy{ grid-template-columns:210px minmax(0, 1fr); }
.ccs-buy-card{ width:210px; }
.ccs-buy-card.got .gc{ animation:ccsGot .8s cubic-bezier(.2,.8,.3,1.2) both; }
@media (max-width:640px){ .ccs-buy{ grid-template-columns:132px minmax(0, 1fr); } .ccs-buy-card{ width:132px; } }
.ccs-card-face .gc{ height:100%; }
.ccs-slot.glow .ccs-card-face{ border-radius:5.5%; }

/* a card in a slab */
.slab .sl-card .gc-mini{ width:100%; height:100%; border-radius:5cqw; box-shadow:none; }
.slab .sl-card .gc-mini img{ object-fit:cover; }
.slab .sl-card.full{ padding:0; background:transparent; }
.slab .sl-card.full .gc{ width:auto; height:100%; max-width:100%; margin:0 auto; }
.sb-pick .sb-im .gc-mini{ width:62px; height:44px; }
.sb-empty .gc-mini, .cab-sil .gc-mini{ width:74%; height:auto; aspect-ratio:3/4; }
.sb-empty .gc-mini{ filter:brightness(.35) saturate(0) blur(1px); }

/* the NEW and ×2 badges sit at the bottom of a dealt card, clear of its printed Energy */
.ccs-card-face .ccs-badge{ top:auto; right:0; left:0; bottom:-10px; width:max-content; margin:0 auto; }

/* ---------- Shiny and Full Art cards.
   Shiny: a rainbow foil that moves across the card (and follows the pointer in the viewer), a fine glitter, and a small stamp.
   Full Art: a softer foil and a gold glow. Both stay still for keepers who asked for less motion. */
.gc.foil .gc-holo, .gc.full .gc-holo{ opacity:.5; mix-blend-mode:color-dodge; animation:gcFoil 6s ease-in-out infinite;
  background:
    linear-gradient(115deg, transparent 8%, rgba(255,80,200,.55) 22%, rgba(255,220,90,.55) 34%, rgba(120,255,140,.5) 46%, rgba(80,220,255,.55) 58%, rgba(170,110,255,.55) 70%, transparent 86%);
  background-size:260% 260%; background-position:var(--hx, 50%) var(--hy, 50%); }
.gc.full .gc-holo{ opacity:.32; }
.gc-glitter{ position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none; mix-blend-mode:screen; opacity:.55;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.6px) 0 0 / 23px 29px,
    radial-gradient(circle, rgba(255,240,170,.9) 0 1px, transparent 1.5px) 11px 7px / 31px 23px,
    radial-gradient(circle, rgba(170,240,255,.9) 0 1.2px, transparent 1.8px) 5px 17px / 37px 41px;
  -webkit-mask:linear-gradient(115deg, transparent 15%, #000 35%, transparent 55%, #000 75%, transparent 95%) 0 0 / 300% 300%;
          mask:linear-gradient(115deg, transparent 15%, #000 35%, transparent 55%, #000 75%, transparent 95%) 0 0 / 300% 300%;
  animation:gcGlitter 4.5s linear infinite; }
.gc.full .gc-glitter{ opacity:.35; }
.gc-stamp{ position:absolute; left:4%; top:50%; z-index:5; padding:3px 9px 3px 7px; border-radius:99px; font:800 clamp(8px, 4.4cqw, 13px)/1.2 var(--f-head); letter-spacing:.1em; text-transform:uppercase;
  color:#1b0c22; background:linear-gradient(100deg, #ff9ae0, #ffe27a 35%, #9dffb0 60%, #8fe6ff 85%); box-shadow:0 0 0 1.5px rgba(0,0,0,.55), 0 0 12px rgba(255,220,120,.6); }
.gc-stamp::before{ content:'✦ '; }
.gc.foil{ filter:drop-shadow(0 0 7px rgba(255,214,120,.45)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.gc.full{ filter:drop-shadow(0 0 10px rgba(255,200,90,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.gc.missing.full, .gc.missing.foil{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.gc.missing .gc-glitter, .gc.missing .gc-stamp{ display:none; }
@keyframes gcFoil{ 0%,100%{ background-position:0% 30%; } 50%{ background-position:100% 70%; } }
@keyframes gcGlitter{ from{ -webkit-mask-position:0% 0%; mask-position:0% 0%; } to{ -webkit-mask-position:300% 300%; mask-position:300% 300%; } }
@media (prefers-reduced-motion:reduce){ .gc .gc-glitter, .gc.foil .gc-holo, .gc.full .gc-holo{ animation:none !important; } }
html.calm .gc .gc-glitter, html.calm .gc.foil .gc-holo, html.calm .gc.full .gc-holo{ animation:none !important; }
.gc-mini.foil::after, .gc-mini.full::after{ box-shadow:inset 0 0 0 2px #ffd76a, 0 0 8px rgba(255,214,106,.7); }

/* binder marks for the versions you own, and the version buttons in the viewer */
.cs-vm{ position:absolute; z-index:6; bottom:-7px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font:800 14px/1 var(--f-head); box-shadow:0 0 0 2px #170b26, 0 3px 8px rgba(0,0,0,.5); }
.cs-vm.foil{ left:-7px; color:#3a2600; background:linear-gradient(135deg, #ff9ae0, #ffe27a, #8fe6ff); } .cs-vm.foil svg{ width:15px; height:15px; }
.cs-vm.full{ left:22px; color:#3a2600; background:linear-gradient(135deg, #ffe9a3, #ffb52e); }
.cs-rars .vs{ border-style:dashed; }
.gcv-vs{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:12px; }
.gcv-vs button{ min-height:36px; padding:7px 12px; border-radius:99px; border:1px solid var(--line2); background:var(--panel2); color:var(--ink); font:700 13px/1 var(--f-head); cursor:pointer; }
.gcv-vs button.none{ color:var(--dim); }
.gcv-vs button[aria-pressed="true"]{ border-color:#ffd76a; box-shadow:inset 0 0 0 1px #ffd76a; background:var(--panel3); }
.gcv-vs b{ color:#ffd76a; }
.vchip.foil{ background:linear-gradient(100deg, #ff9ae0, #ffe27a 40%, #8fe6ff); color:#1b0c22; border:0; }
.vchip.full{ background:linear-gradient(100deg, #ffe9a3, #ffb52e); color:#2a1600; border:0; }
.ccs-badge.foil{ background:linear-gradient(100deg, #ff9ae0, #ffe27a 40%, #8fe6ff); color:#1b0c22; }
.ccs-badge.full{ background:linear-gradient(100deg, #ffe9a3, #ffb52e); color:#2a1600; }
.ccs-sealed-row{ border:1px solid rgba(255,210,63,.4); background:linear-gradient(120deg, rgba(255,210,63,.12), transparent 60%), var(--panel); }
.ccs-sealed-row h3{ margin:2px 0 4px; }

/* ---------- Chapter 2, Goop Dust, the wishlist and collection goals */
.dust-ic{ width:1em; height:1em; vertical-align:-.14em; color:#b9a2ff; filter:drop-shadow(0 0 4px rgba(185,162,255,.6)); }
.chip.dust{ border-color:rgba(185,162,255,.45); color:#e3d8ff; }
.dust-n{ display:flex; align-items:center; gap:10px; margin:2px 0 0; font-size:clamp(30px, 6vw, 44px); }
.dust-n .dust-ic{ width:.9em; height:.9em; }
.dust-t{ width:100%; border-collapse:collapse; font-size:14px; }
.dust-t th{ text-align:left; padding:6px 8px; color:var(--muted); font:700 12px/1.2 var(--f-head); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line2); }
.dust-t td{ padding:8px; border-bottom:1px solid var(--line); }
@media (max-width:520px){ .dust-t th:nth-child(3), .dust-t td:nth-child(3), .dust-t th:nth-child(5), .dust-t td:nth-child(5){ display:none; } }
.gcv-dust{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, #b9a2ff 8%, var(--panel2)); border:1px solid rgba(185,162,255,.28); }
.gcv-dust #gcv-wish[aria-pressed="true"]{ color:#3a2600; background:linear-gradient(135deg, #fff3b0, #ffd23f); border-color:transparent; }
.gcv-evo{ display:flex; align-items:center; gap:12px; margin:0; padding:10px 12px; border-radius:14px; background:linear-gradient(100deg, color-mix(in srgb, #c48aff 16%, var(--panel2)), var(--panel2)); border:1px solid rgba(196,138,255,.4); font-size:14px; }
.gcv-evo.up{ background:linear-gradient(100deg, color-mix(in srgb, var(--lime) 12%, var(--panel2)), var(--panel2)); border-color:color-mix(in srgb, var(--lime) 40%, transparent); }
.gcv-evo b{ color:#e2c8ff; } .gcv-evo.up b{ color:var(--lime); }
.gcv-evoic{ flex:none; width:46px; } .gcv-evoic .gc-mini{ width:46px; }
.cs-evo{ position:absolute; z-index:6; top:-7px; left:-7px; padding:4px 7px; border-radius:99px; background:linear-gradient(135deg, #8f4bff, #ff5fd2); color:#fff; font:800 10px/1 var(--f-head); letter-spacing:.06em; box-shadow:0 0 0 2px #170b26, 0 3px 8px rgba(0,0,0,.5); }
.cs-wm{ position:absolute; z-index:6; bottom:-7px; right:-7px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#3a2600; background:linear-gradient(135deg, #fff3b0, #ffd23f); font:800 15px/1 var(--f-head); box-shadow:0 0 0 2px #170b26, 0 0 14px rgba(255,210,63,.6); }
.cs-chbar{ display:grid; gap:6px; }
.cs-bar.full i{ box-shadow:0 0 16px rgba(255,210,63,.6); }
.cs-bar.my i{ background:linear-gradient(90deg, #ff6fe0, #ffe066, #b6ff5a, #6fe8ff); }
.cs-wish{ background:linear-gradient(160deg, rgba(255,210,63,.09), transparent 60%), var(--panel); }
.cs-wrow{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; scroll-snap-type:x mandatory; }
.cs-wcard{ flex:0 0 112px; display:grid; gap:6px; justify-items:center; text-align:center; scroll-snap-align:start; background:none; border:0; color:inherit; padding:0; cursor:pointer; }
.cs-wcard .gc{ width:112px; }
.cs-goalgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:10px; }
.cs-goal{ display:grid; gap:7px; padding:12px 14px; border-radius:14px; background:var(--panel2); border:1px solid var(--line2); }
.cs-goal .cs-bar{ height:9px; }
.cs-goal.done{ border-color:color-mix(in srgb, var(--gold) 55%, transparent); background:linear-gradient(140deg, rgba(255,210,63,.12), transparent 70%), var(--panel2); }
.cs-goal.done b{ color:var(--gold); }
.ccs-pity{ display:grid; gap:8px; }
.ccs-pity-row{ display:grid; grid-template-columns:minmax(110px, auto) 1fr auto; align-items:center; gap:12px; font-size:14px; }
.ccs-pity-row .cs-bar{ height:10px; }
@media (max-width:520px){ .ccs-pity-row{ grid-template-columns:1fr auto; } .ccs-pity-row .cs-bar{ grid-column:1 / -1; grid-row:2; } }
.ccs-new{ position:relative; background:radial-gradient(120% 80% at 50% 0%, rgba(143,75,255,.22), transparent 60%), var(--panel); border-color:rgba(196,138,255,.45); }