/* ======================================================================================================================
   Fix-and-polish round (November 2026). Each part of the site has its own section below; overrides of older rules
   live in the section of the part they belong to.
   ====================================================================================================================== */
/* ---- shell, navigation, settings, core loop */
/* motion: html.calm (core.js G.applyMotion) twins of the reduced-motion rules in the other sections of this file */
html.calm .toast, html.calm .notice, html.calm .item, html.calm .btn, html.calm img.fadein{ transition:none !important; } html.calm .toast .tbar, html.calm .coinpill.gain, html.calm .coinpill.loss{ animation:none; } html.calm .btn:active{ transform:none; }
html.calm #splash, html.calm #splash img, html.calm #splash .sp-goo i, html.calm #view.enter > *, html.calm #view.enter > .stack > *, html.calm .rstage .rtitle, html.calm .rstage .rmood{ animation:none !important; }
html.calm .kcard::after, html.calm .chest-tile .chest-svg{ animation:none; }
html.calm .rpeek .pk-in{ transition:none; } html.calm .rpeek.up .pk-in, html.calm .rpeek.caught .pk-in{ animation:none !important; }
html.calm .xpatch svg, html.calm .xpatch.near svg, html.calm .xg-ring .xg-goop, html.calm .xme .xalert{ animation:none; }
html.calm .xbars i{ transition:none; } html.calm .xg-ring.shimmer .xg-goop{ animation:none; }
html.calm .jobslip{ animation:none; }
html.calm .pit-crowd img{ animation:none; } html.calm .pitb-clash.go .clc, html.calm .pitb-clash.go .clv{ animation-duration:.01s; opacity:1; }
html.calm .fest-hero::after, html.calm .gdoor.today{ animation:none !important; }
html.calm .say.pop, html.calm .goopfig.bounce .body, html.calm .goopfig.nope .body, html.calm .heart{ animation:none !important; }
html.calm .gstage *, html.calm .gstage *::before, html.calm .gstage *::after, html.calm .coinpill.gr-hit{ animation:none !important; transition:none !important; }

/* the splash leaves as soon as the page is ready, with a short fade */
#splash{ transition:opacity .22s ease, visibility .22s; }

/* ---------- top bar: compact on phones, every part at least 44px to tap */
.coinpill{ gap:0; padding:0 2px 0 2px; height:40px; }
.coinpill .essl{ display:inline-flex; align-items:center; gap:7px; height:44px; margin:-3px 0; padding:0 8px 0 4px; color:inherit; text-decoration:none; border-radius:999px; }
.coinpill .essl:hover{ background:rgba(255,210,63,.08); }
.coinpill .coin{ width:28px; height:28px; display:grid; place-items:center; } .coinpill .coin svg{ width:28px; height:28px; }
.coinpill .essn .short{ display:none; }
.coinpill .plus{ width:44px; height:44px; margin:-3px -2px -3px 0; background:none; box-shadow:none; display:grid; place-items:center; border-radius:50%; }
.coinpill .plus span{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:var(--limeink); font:800 20px/1 var(--f-head); box-shadow:0 2px 0 var(--limedark); transition:transform .15s; }
.coinpill .plus:hover span{ transform:scale(1.08); }
.topbar .iconbtn#sndbtn{ width:44px; height:44px; border-radius:14px; }
.mebtn{ min-height:44px; }
.mebtn[aria-current="page"]{ border-color:var(--lime); box-shadow:0 0 0 2px rgba(157,255,46,.25); }
@media (max-width:1060px){ .mebtn{ width:44px; height:44px; padding:3px; justify-content:center; } .mebtn .ava{ width:36px; height:36px; } }
@media (max-width:640px){
  .topbar .in{ gap:8px; padding-left:max(12px, env(safe-area-inset-left, 0px)); padding-right:max(12px, env(safe-area-inset-right, 0px)); }
  .topbar .brand{ flex:0 1 auto; min-width:0; }
  .topbar .brand img{ height:26px; max-width:100%; object-fit:contain; object-position:left center; }
  .tb-right{ gap:6px; flex:0 0 auto; }
  .coinpill{ height:38px; font-size:15px; }
  .coinpill .essl{ gap:5px; padding:0 6px 0 3px; }
  .coinpill .coin, .coinpill .coin svg{ width:26px; height:26px; }
  .coinpill .essn .full{ display:none; } .coinpill .essn .short{ display:inline; }
}
/* the narrowest phones keep the speaker in the More sheet and in Settings, so the keeper button always fits */
@media (max-width:379px){ .topbar .iconbtn#sndbtn{ display:none; } }

/* ---------- phone tab bar: six sections and More */
@media (max-width:1060px){
  .tabbar{ --tabs:7; padding-top:4px; }
  .tabbar > a, .tabbar > button{ position:relative; display:grid; justify-items:center; align-content:center; gap:3px; min-height:54px; padding:4px 0; border:0; border-radius:14px; background:none;
    color:var(--dim); font:700 11px/1.1 var(--f-head); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .tabbar > a svg, .tabbar > button svg{ width:25px; height:25px; transition:transform .2s cubic-bezier(.3,1.5,.5,1); }
  .tabbar > [aria-current="page"]{ color:var(--lime); }
  .tabbar > [aria-current="page"] svg{ transform:translateY(-1px); filter:drop-shadow(0 0 8px rgba(157,255,46,.55)); }
  .tabbar > [aria-current="page"]::before{ content:""; position:absolute; top:-4px; left:50%; width:26px; height:3px; border-radius:0 0 4px 4px; transform:translateX(-50%); background:var(--lime); box-shadow:0 0 10px var(--lime); }
  .tabbar > button[aria-expanded="true"]{ color:var(--ink); }
  .tabbar > a:active svg, .tabbar > button:active svg{ transform:scale(.9); }
}

/* ---------- dialogs: Close stays in view (sticky header), the page behind holds still */
html.modal-open, html.modal-open body{ overflow:hidden; }
.modal{ overscroll-behavior:contain; }
.modal > .mhead{ position:sticky; top:-22px; z-index:5; display:flex; justify-content:flex-end; margin:-8px -8px 0 0; pointer-events:none; }
.modal > .mhead .x{ pointer-events:auto; width:44px; height:44px; margin:0; border-radius:14px; background:rgba(30,16,48,.92); backdrop-filter:blur(10px); border:1px solid var(--line2); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.modal:focus{ outline:none; }

/* the More sheet slides up from the bottom */
.scrim.sheet{ place-items:end center; padding:0; padding-top:max(24px, env(safe-area-inset-top, 0px)); }
.modal.sheet{ width:min(560px, 100%); max-height:min(88dvh, 780px); border-radius:28px 28px 0 0; border-bottom:0; padding:14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); gap:12px;
  animation:sheetup .34s cubic-bezier(.2,.9,.25,1); box-shadow:0 -20px 60px rgba(0,0,0,.6); }
.modal.sheet > .mhead{ top:-14px; margin:-6px -6px -50px 0; }
.modal.sheet > .mhead::before{ content:""; position:absolute; left:50%; top:-4px; width:44px; height:5px; border-radius:3px; background:rgba(214,190,255,.3); transform:translateX(-50%); }
@keyframes sheetup{ from{ transform:translateY(40%); opacity:.4; } to{ transform:none; opacity:1; } }
.modal.sheet, .more-sheet{ grid-template-columns:minmax(0, 1fr); }
.more-sheet{ display:grid; gap:14px; min-width:0; } .more-sheet > *{ min-width:0; }
.ms-goop{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:12px; align-items:center; margin-right:52px; padding:10px 12px; border-radius:22px; color:inherit; text-decoration:none;
  background:linear-gradient(135deg, rgba(157,255,46,.12), rgba(63,224,192,.05) 55%, rgba(164,107,255,.08)); border:1px solid rgba(157,255,46,.28); }
.ms-goop .btn{ pointer-events:none; }
.ms-fig .goopfig{ width:76px; max-width:76px; margin:0; }
.ms-gtx{ display:grid; gap:4px; min-width:0; }
.ms-gtx b{ font:700 19px/1.1 var(--f-head); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ms-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.ms-grid a{ display:grid; justify-items:center; align-content:start; text-align:center; gap:5px; min-height:92px; padding:12px 4px 10px; border-radius:18px; color:var(--ink); text-decoration:none;
  background:rgba(12,7,20,.5); border:1px solid var(--line); transition:border-color .15s, background .15s, transform .15s; }
.ms-grid a:hover{ border-color:var(--line2); background:rgba(30,16,48,.7); }
.ms-grid a:active{ transform:scale(.97); }
.ms-grid a[aria-current="page"]{ border-color:var(--lime); background:rgba(157,255,46,.08); }
.ms-ic{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:rgba(164,107,255,.18); color:var(--lime); flex:0 0 auto; }
.ms-ic svg{ width:22px; height:22px; }
.ms-grid b{ font:700 12.5px/1.15 var(--f-head); }
.ms-grid .small{ font-size:10.5px; line-height:1.15; }
.ms-today .kick{ margin-bottom:8px; }
.ms-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:2px 16px 4px; }
.ms-chips::-webkit-scrollbar{ display:none; }
.ms-chips a{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:999px; color:var(--ink); text-decoration:none; white-space:nowrap;
  background:rgba(30,16,48,.8); border:1px solid rgba(214,190,255,.16); font:600 14px/1 var(--f-head); }
.ms-chips a svg{ width:16px; height:16px; color:var(--lime); }
.ms-chips a.done{ opacity:.55; } .ms-chips a.done svg{ color:var(--dim); }
.ms-rows{ display:grid; border-radius:20px; background:rgba(12,7,20,.45); border:1px solid var(--line); overflow:hidden; }
.ms-row{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:62px; padding:8px 12px 8px 14px; color:inherit; text-decoration:none; }
.ms-row + .ms-row{ border-top:1px solid var(--line); }
.ms-row > span:nth-child(2){ display:grid; gap:2px; }
.ms-row .ava{ width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--panel3); display:grid; place-items:center; } .ms-row .ava img{ width:120%; height:120%; object-fit:contain; }
.ms-foot{ display:flex; justify-content:center; gap:4px; margin:0; }
.ms-foot a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--mute); }

/* mini need bars (More sheet, care picker) */
.mneeds{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.mneed{ display:flex; align-items:center; gap:4px; min-width:0; }
.mneed i{ display:grid; place-items:center; color:var(--c); } .mneed i svg{ width:14px; height:14px; }
.mneed b{ flex:1; display:block; height:6px; border-radius:6px; background:rgba(0,0,0,.45); overflow:hidden; }
.mneed u{ display:block; height:100%; border-radius:inherit; background:var(--c); box-shadow:0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.mneed.low b{ box-shadow:0 0 0 1px rgba(255,107,122,.7); }

/* ---------- toasts and the event notice: one managed dock */
.gdock, .gdock .gd-notes{ display:contents; }
.gdock .toasts{ z-index:88; }
.toast .tclose{ width:44px; height:44px; margin:-8px -6px -8px 0; }
.notice .btn{ min-height:44px !important; padding:8px 18px !important; }
@media (max-width:640px){
  .gdock{ position:fixed; z-index:88; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:8px; pointer-events:none; }
  .gdock .gd-notes{ display:block; }
  .gdock .gd-notes:empty{ display:none; }
  .gdock .toasts, .gdock .notice{ position:static !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:auto !important; }
  .gdock .notice, .gdock .toast{ pointer-events:auto; }
}

/* ---------- tap targets: footer links, breadcrumbs, Home's follow-up chips */
.foot .footlinks{ display:flex; flex-wrap:wrap; gap:0 4px; margin:-12px -10px; }
.foot .footlinks a{ display:inline-flex; align-items:center; min-height:44px; padding:0 10px; text-decoration:none; }
.foot .footlinks a:hover{ color:var(--lime); }
.ptitle .crumbs a{ display:inline-block; padding:15px 4px; margin:-15px -4px; }
.also{ min-height:44px; }

/* ---------- Settings: a polished panel with big switches */
.setpanel{ display:grid; gap:18px; max-width:720px; }
.set-sec{ padding:10px 22px 10px !important; }
.set-sec h3{ margin:12px 0 2px; }
.set-sec > p{ margin:8px 0 12px; } .set-sec > .row{ margin-bottom:12px; }
.set-row{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:14px; align-items:center; min-height:68px; padding:10px 0; color:inherit; text-decoration:none; }
.set-row + .set-row, .set-links .set-row + .set-row{ border-top:1px solid var(--line); }
.set-links .set-row{ grid-template-columns:minmax(0,1fr) auto; min-height:56px; }
.set-row.link{ border-radius:14px; transition:background .15s; } .set-row.link:hover{ background:rgba(214,190,255,.05); }
.set-ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(164,107,255,.16); color:var(--lime); }
.set-ic svg{ width:22px; height:22px; }
.set-ic.ava{ border-radius:50%; overflow:hidden; background:var(--panel3); } .set-ic.ava img{ width:120%; height:120%; object-fit:contain; }
.set-tx{ display:grid; gap:3px; min-width:0; }
.set-tx b{ font:700 16.5px/1.2 var(--f-head); }
.set-go{ color:var(--dim); display:grid; } .set-go svg{ width:20px; height:20px; }
.danger-zone{ border-color:rgba(255,107,122,.22) !important; }
.set-row.compact{ grid-template-columns:minmax(0,1fr) auto; min-height:0; padding:12px 14px; border-radius:16px; background:rgba(12,7,20,.4); border:1px solid var(--line); cursor:pointer; }
/* the switch: a 64x44 button, a 56x32 track */
.gswitch{ position:relative; width:64px; height:44px; display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
.gs-track{ position:relative; width:56px; height:32px; border-radius:999px; background:rgba(12,7,20,.85); border:1.5px solid var(--line2); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); transition:background .2s, border-color .2s, box-shadow .2s; }
.gs-knob{ position:absolute; top:2.5px; left:3px; width:24px; height:24px; border-radius:50%; background:#cfc3e6; box-shadow:0 2px 6px rgba(0,0,0,.5); transition:transform .24s cubic-bezier(.3,1.45,.5,1), background .2s; }
.gswitch[aria-checked="true"] .gs-track{ background:var(--lime); border-color:var(--lime); box-shadow:0 0 16px rgba(157,255,46,.35), inset 0 2px 4px rgba(0,0,0,.18); }
.gswitch[aria-checked="true"] .gs-knob{ transform:translateX(23px); background:#fff; }
.gswitch:focus-visible{ outline:none; } .gswitch:focus-visible .gs-track{ outline:3px solid #fff; outline-offset:3px; }
.gswitch:active .gs-knob{ width:28px; }
input.gswitch-cb{ appearance:none; -webkit-appearance:none; width:56px; height:32px; margin:6px 4px; flex:0 0 auto; border-radius:999px; cursor:pointer; border:1.5px solid var(--line2);
  background:radial-gradient(circle at 15px 50%, #cfc3e6 11px, transparent 12px), rgba(12,7,20,.85); box-shadow:inset 0 2px 6px rgba(0,0,0,.45); }
input.gswitch-cb:checked{ border-color:var(--lime); background:radial-gradient(circle at calc(100% - 15px) 50%, #fff 11px, transparent 12px), var(--lime); box-shadow:0 0 16px rgba(157,255,46,.35); }
input.gswitch-cb:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------- inventory: one scrolling strip of kinds on phones, a quantity stepper and a confirm step for selling */
.tabs .tn{ margin-left:7px; font-size:12px; opacity:.65; font-variant-numeric:tabular-nums; }
.tabs [aria-current="page"] .tn{ opacity:.8; }
@media (max-width:640px){
  .tabs.scroller{ display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%; scrollbar-width:none; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent); }
  .tabs.scroller::-webkit-scrollbar{ display:none; }
  .tabs.scroller a{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; scroll-snap-align:start; }
}
.fxrow{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.fxrow.big{ justify-content:flex-start; gap:6px; }
.fx{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; font:700 11.5px/1 var(--f-head); white-space:nowrap;
  color:var(--c, var(--lime)); background:color-mix(in srgb, var(--c, #9dff2e) 16%, transparent); border:1px solid color-mix(in srgb, var(--c, #9dff2e) 40%, transparent); }
.fxrow.big .fx{ font-size:13.5px; padding:6px 11px; }
.fx.xp{ --c:#b9a2ff; } .fx.free{ --c:#d6beff; } .fx.full{ --c:#ffd23f; } .fx.fav{ --c:#ff6fd8; }
.fx svg{ width:12px; height:12px; fill:currentColor; }
.picker.care{ grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); }
.picker.care .item{ gap:6px; }
.picker .item.isfull{ opacity:.62; }
.carehead{ display:grid; gap:8px; margin-top:-4px; }
.sellbox{ display:grid; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.qstep{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.qstep .iconbtn{ width:44px; height:44px; font:800 22px/1 var(--f-head); color:var(--ink); }
.qstep output{ min-width:30px; text-align:center; font:800 18px/1 var(--f-head); font-variant-numeric:tabular-nums; }
.confirm{ display:grid; gap:8px; padding:14px 16px; border-radius:18px; background:rgba(255,210,63,.07); border:1px solid rgba(255,210,63,.35); }
.confirm[hidden]{ display:none; }
.confirm p{ margin:0; }

/* ---------- the buy window */
.buyrow{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.buyrow #buynow{ flex:1 1 220px; gap:8px; } .buyrow #buynow svg{ width:24px; height:24px; }
.buyrow #hagglebtn[aria-expanded="true"]{ border-color:var(--grape); color:var(--ink); }

/* ---------- care: the bars slide, a +N floats up, the goop bounces (or shakes its head when full) */
.need{ position:relative; }
.need.changed .bar{ box-shadow:0 0 0 2px color-mix(in srgb, var(--c2) 45%, transparent), 0 0 14px color-mix(in srgb, var(--c2) 40%, transparent); transition:box-shadow .3s; }
.need .bar i{ transition:width .9s cubic-bezier(.2,.9,.25,1); }
.dtag{ position:absolute; right:2px; top:-12px; font:800 15px/1 var(--f-head); color:var(--c2); text-shadow:0 2px 6px rgba(0,0,0,.7); pointer-events:none; animation:dtag 2.1s ease-out forwards; }
.dtag.neg{ color:#ffb0b8; }
@keyframes dtag{ 0%{ opacity:0; transform:translateY(8px) scale(.8); } 15%{ opacity:1; transform:none; } 70%{ opacity:1; } 100%{ opacity:0; transform:translateY(-12px); } }
.goopfig.nope .body{ animation:nope .55s cubic-bezier(.3,.7,.4,1); }
@keyframes nope{ 0%,100%{ transform:none; } 20%{ transform:translateX(-5%) rotate(-4deg); } 45%{ transform:translateX(4%) rotate(3deg); } 70%{ transform:translateX(-2%) rotate(-1deg); } }
.heart.carefx{ width:26px; height:26px; }
.prog i{ transition:width .9s cubic-bezier(.2,.9,.25,1); }

/* ---------- level-up: a short full-screen moment */
.lvl-moment{ position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:16px; cursor:pointer; background:rgba(6,3,12,.58); backdrop-filter:blur(8px) saturate(1.15); -webkit-backdrop-filter:blur(8px) saturate(1.15);
  opacity:0; transition:opacity .28s ease; }
.lvl-moment.in{ opacity:1; } .lvl-moment.out{ opacity:0; }
.lm-card{ position:relative; isolation:isolate; display:grid; justify-items:center; gap:8px; text-align:center; max-width:360px; transform:scale(.82); transition:transform .5s cubic-bezier(.2,1.5,.4,1); }
.lvl-moment.in .lm-card{ transform:none; }
.lm-burst{ position:absolute; z-index:-1; left:50%; top:96px; width:min(560px, 140vw); aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; opacity:.95;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tc) 60%, transparent) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image:radial-gradient(circle, #000 18%, transparent 68%); mask-image:radial-gradient(circle, #000 18%, transparent 68%); animation:lmspin 9s linear infinite; }
.lm-burst::after{ content:""; position:absolute; inset:30%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tc) 70%, #fff) 0%, transparent 70%); filter:blur(10px); }
@keyframes lmspin{ to{ transform:translate(-50%, -50%) rotate(360deg); } }
.lm-fig{ width:190px; } .lm-fig .goopfig{ margin:0; filter:drop-shadow(0 0 24px color-mix(in srgb, var(--tc) 70%, transparent)); }
.lvl-moment.in .lm-fig .goopfig .body{ animation:bounce .8s cubic-bezier(.3,1.6,.5,1) .15s; }
.lm-n{ font:400 clamp(52px, 13vw, 72px)/1 var(--f-display); }
.lm-sub{ font:600 16px/1.35 var(--f-head); color:var(--ink); }
.lvl-moment .btn{ margin-top:4px; }
.lvl-moment.calm .lm-burst{ animation:none; }
.lvl-moment.calm .lm-card{ transform:none; transition:none; }
html.calm .lvl-moment{ transition-duration:.3s !important; }

/* ---------- evolution: dim and blur, a silhouette, a burst in the new type's colour, then before and after */
.scrim:has(> .evo-modal){ background:radial-gradient(ellipse at 50% 40%, rgba(30,14,52,.75), rgba(4,2,10,.92) 70%); backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); }
.scrim:has(> .evo-modal){ overflow-y:auto; overflow-x:hidden; place-items:safe center; }
.modal.evo-modal{ width:min(620px, 100%); max-height:none; overflow:visible; background:transparent; border:0; box-shadow:none; padding:12px 8px; }
.evo-moment{ display:grid; justify-items:center; gap:14px; text-align:center; }
.evo-stage{ position:relative; width:min(300px, 68vw); aspect-ratio:1; transition:width .6s cubic-bezier(.2,.9,.25,1); }
.evo-from, .evo-to{ position:absolute; inset:0; display:grid; place-items:center; transition:opacity .7s ease, transform .9s cubic-bezier(.2,.9,.25,1), filter 1s ease; }
.evo-from .goopfig, .evo-to .goopfig{ width:100%; margin:0; }
.evo-to{ opacity:0; transform:scale(.7); }
.evo-rays{ position:absolute; left:50%; top:50%; width:240%; aspect-ratio:1; transform:translate(-50%, -50%) scale(.2); border-radius:50%; opacity:0;
  background:repeating-conic-gradient(from 10deg, color-mix(in srgb, var(--tc) 75%, #fff) 0deg 5deg, transparent 5deg 16deg);
  -webkit-mask-image:radial-gradient(circle, #000 12%, transparent 62%); mask-image:radial-gradient(circle, #000 12%, transparent 62%); transition:opacity .5s, transform 1.2s cubic-bezier(.2,.9,.25,1); }
.evo-ring{ position:absolute; left:50%; top:50%; width:40%; aspect-ratio:1; border-radius:50%; transform:translate(-50%, -50%) scale(.3); opacity:0; border:6px solid var(--tc); box-shadow:0 0 40px var(--tc), inset 0 0 30px var(--tc); }
.evo-moment.p1 .evo-from{ filter:brightness(0) drop-shadow(0 0 14px var(--tc)) drop-shadow(0 0 30px var(--tc)); animation:evoswell 1.7s ease-in-out forwards; }
@keyframes evoswell{ 0%{ transform:scale(1); } 30%{ transform:scale(1.06); } 50%{ transform:scale(.97); } 75%{ transform:scale(1.12); } 100%{ transform:scale(1.18); } }
.evo-moment.p2 .evo-from{ opacity:0; transform:scale(1.35); animation:none; }
.evo-moment.p2 .evo-to{ opacity:1; transform:scale(1.04); filter:brightness(0) drop-shadow(0 0 22px var(--tc)); }
.evo-moment.p2 .evo-rays{ opacity:1; transform:translate(-50%, -50%) scale(1) rotate(25deg); }
.evo-moment.p2 .evo-ring{ animation:evoring 1s ease-out forwards; }
@keyframes evoring{ 0%{ opacity:1; transform:translate(-50%, -50%) scale(.3); } 100%{ opacity:0; transform:translate(-50%, -50%) scale(3.2); } }
.evo-moment.p3 .evo-to{ transform:none; filter:drop-shadow(0 0 26px color-mix(in srgb, var(--tc) 55%, transparent)); }
.evo-moment.p3 .evo-rays{ opacity:.45; transform:translate(-50%, -50%) scale(.85) rotate(60deg); }
.evo-moment.p3 .evo-stage{ width:min(210px, 52vw); }
.evo-t{ font-size:clamp(30px, 6vw, 40px) !important; margin:0; }
.evo-after{ display:grid; justify-items:center; gap:14px; animation:rise .45s cubic-bezier(.2,1.2,.4,1); }
.evo-after[hidden]{ display:none; }
.evo-ba{ display:flex; align-items:center; justify-content:center; gap:12px; }
.evo-ba figure{ margin:0; display:grid; justify-items:center; gap:6px; width:min(132px, 34vw); }
.evo-ba figure .goopfig{ width:100%; margin:0; }
.evo-ba figure:first-child{ opacity:.7; }
.evo-ba figcaption{ display:grid; justify-items:center; gap:4px; font:700 14px/1.2 var(--f-head); }
.evo-arrow{ color:var(--tc); } .evo-arrow svg{ width:30px; height:30px; }
.evo-moment.calm .evo-from, .evo-moment.calm .evo-to{ transition:opacity .6s ease; transform:none !important; filter:none !important; animation:none !important; }
.evo-moment.calm .evo-rays, .evo-moment.calm .evo-ring{ display:none; }
.evo-moment.calm.p2 .evo-from{ opacity:0; } .evo-moment.calm.p2 .evo-to{ opacity:1; }
html.calm .evo-moment.calm .evo-from, html.calm .evo-moment.calm .evo-to{ transition-duration:.6s !important; }
.evo-flash{ display:none; }

/* ---------- Home on phones: the daily chest on the first screen, as a slim strip between your goop and today's goal */
@media (max-width:640px){
  body[data-view="home"] .chest-tile{ order:1; grid-template-columns:52px minmax(0,1fr); gap:12px; padding:8px 14px !important; min-height:64px; }
  body[data-view="home"] .chest-tile .chest-svg{ width:52px; height:46px; }
  body[data-view="home"] .chest-tile b{ font-size:16px; } body[data-view="home"] .chest-tile .kick{ font-size:11px; }
  body[data-view="home"] .goal{ order:2; } body[data-view="home"] .alsorow{ order:3; } body[data-view="home"] details.more{ order:4; }
  body[data-view="home"] #view > .stack.lg{ gap:14px; }
  body[data-view="home"] .chest-tile:not(.big) .kick{ display:none; }   /* "A gift is waiting" says it; the Big Chest keeps its label */
  body[data-view="home"] .chest-tile{ min-height:58px; padding:7px 14px !important; }
  /* today's goal: the progress ring sits beside the words instead of on a row of its own */
  body[data-view="home"] .goal{ grid-template-columns:60px minmax(0, 1fr); align-items:start; justify-items:stretch; gap:14px; padding:18px 16px !important; }
  body[data-view="home"] .goal .gring{ width:60px; height:60px; }
  body[data-view="home"] .goal .gtitle{ font-size:clamp(24px, 7vw, 30px); }
}

/* ---------- the Daily Drip: the kicker and the issue's date sit side by side and never strand a word */
.nkick{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.nkick time, .nw{ white-space:nowrap; }

/* ---------- About, Privacy, Terms */
.legal ul{ margin:0; padding-left:20px; display:grid; gap:8px; }
.legal h3{ margin-top:6px; }
/* ---------- touch screens: every small button, the logo link and the inventory kinds are 44px tall (phones and tablets) */
@media (pointer:coarse){
  .btn.sm{ min-height:44px; }
  .topbar a.brand{ min-height:44px; }
  .tabs.scroller a{ display:inline-flex; align-items:center; min-height:44px; }
}
/* the sidebar fades out at the bottom while there is more of it to scroll to (views.js sets .more-below) */
.side.more-below{ -webkit-mask-image:linear-gradient(#000 calc(100% - 64px), transparent); mask-image:linear-gradient(#000 calc(100% - 64px), transparent); }
/* Settings on a wide screen: two columns, like the other main pages use the width */
@media (min-width:1100px){ .setpanel{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:none; align-items:start; } }
/* ---- end shell */
/* ---- world, Sandbox Pit, Card Shop */
/* ---------- world map: every town keeps its name at the full view (worldmap.js moves a crowded name above or beside its pin) */
.wm-label{ transition:opacity .2s; }
/* touch targets: 44px on every touch screen (tablets too), not only at phone widths */
@media (max-width:640px), (pointer:coarse){ .wm-zoom button{ min-width:44px; min-height:44px; } }
.rstage .crumbs a{ display:inline-block; padding:13px 6px; margin:-13px -6px; }
.wm-all summary{ display:flex; align-items:center; min-height:44px; } .wm-all summary h3{ flex:1; }
.pit-how summary{ min-height:44px; }

/* ---------- towns: signs share the row with a gap on phones; residents are big enough to tap and wear name tags */
@media (max-width:640px){
  .rsign{ width:var(--pw, 22%); }
  .rwalker{ width:52px; bottom:22%; }
  .rwalker img{ width:48px; height:48px; margin:0 auto; }
  .rwalker span{ display:block; max-width:64px; margin:2px -6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
}
/* a resident you tap stops walking and turns to face you while you chat */
.rwalker.talking, .rwalker.talking img{ animation-play-state:paused; }
.rwalker.talking img{ border-color:var(--lime); transform:scale(1.12); transition:transform .2s; }
/* the street chatter bubble hangs over whoever is speaking, follows them, and lets every tap through */
.rbubble{ pointer-events:none; }
.rbubble.anchored{ transform:none; max-width:min(72%, 320px); width:max-content; padding:8px 13px; font-size:14px; line-height:1.3; text-align:left; }
.rbubble.anchored::after{ content:''; position:absolute; left:var(--tx, 50%); bottom:-11px; width:16px; height:16px; margin-left:-8px; background:#fff; border:3px solid #0b0516; border-top:0; border-left:0; transform:rotate(45deg); border-radius:0 0 4px 0; }
@media (max-width:640px){ .rbubble.anchored{ font-size:12.5px; padding:7px 11px; max-width:min(78%, 280px); } }

/* ---------- the stamp press: the seal drops onto the journal, ink spreads, the page jolts; a rank-up glows */
.journal.pressing .jseal{ position:relative; }
.journal.pressing .seal{ animation:stampPress .62s cubic-bezier(.2,.9,.25,1.2) both; }
.journal.pressing .jseal::after{ content:''; position:absolute; left:50%; top:46px; width:92px; height:92px; margin:-46px 0 0 -46px; border-radius:50%; border:3px solid var(--lime); opacity:0; animation:stampInk .9s ease-out .38s both; pointer-events:none; }
.journal.pressing{ animation:stampJolt .32s ease-out .36s both; }
@keyframes stampPress{ 0%{ transform:translateY(-70px) scale(1.9) rotate(-24deg); opacity:0; filter:drop-shadow(0 30px 18px rgba(0,0,0,.5)); } 55%{ transform:translateY(0) scale(.9) rotate(-6deg); opacity:1; filter:none; } 75%{ transform:scale(1.04) rotate(-9deg); } 100%{ transform:rotate(-8deg); } }
@keyframes stampInk{ 0%{ opacity:.9; transform:scale(.7); } 100%{ opacity:0; transform:scale(1.9); } }
@keyframes stampJolt{ 0%{ transform:translateY(0); } 35%{ transform:translateY(3px); } 100%{ transform:translateY(0); } }
@media (max-width:640px){ .journal.pressing .jseal::after{ top:28px; width:56px; height:56px; margin:-28px 0 0 -28px; } }
.rankp.rankup{ animation:rankGlow 1.8s ease-out both; }
@keyframes rankGlow{ 0%{ box-shadow:0 0 0 0 rgba(157,255,46,.7); } 40%{ box-shadow:0 0 0 6px rgba(157,255,46,.35), 0 0 40px rgba(157,255,46,.35); } 100%{ box-shadow:none; } }
@media (prefers-reduced-motion:reduce){ .journal.pressing, .journal.pressing .seal, .journal.pressing .jseal::after, .rankp.rankup{ animation:none; } }
html.calm .journal.pressing, html.calm .journal.pressing .seal, html.calm .journal.pressing .jseal::after, html.calm .rankp.rankup{ animation:none; }

/* ---------- phone tap targets: house spots, the Pen's waiting list */
@media (max-width:640px){ .hslot > span{ width:44px; height:44px; font-size:22px; } }
.pen-wait .chip{ min-height:44px; display:inline-flex; align-items:center; padding:0 14px; }
.pen-item .row .btn{ min-height:44px; }
/* ---------- the Card Shop: opening a pack is an event (cards.js reveal): a foil pack you tear, cards dealt face down, turned by you */
.ccs-om{ text-align:center; }
.ccs-open{ display:grid; gap:12px; justify-items:center; min-width:0; }
.ccs-open .ccs-h{ margin:0; }
.ccs-pk{ display:grid; gap:10px; justify-items:center; padding:4px 0; }
.ccs-pk[hidden], .ccs-reveal[hidden], .ccs-sum[hidden], .ccs-swipe[hidden]{ display:none; }
.ccs-foil{ position:relative; width:min(200px, 50vw); aspect-ratio:5/7; padding:0; border:0; background:none; cursor:pointer; touch-action:pan-y; -webkit-tap-highlight-color:transparent; border-radius:18px; transition:transform .25s; }
.ccs-foil:hover{ transform:translateY(-4px) rotate(-1.5deg); }
.ccs-foil:focus-visible{ outline:3px solid var(--lime); outline-offset:6px; }
.ccs-foil-top, .ccs-foil-body{ position:absolute; left:0; right:0; overflow:hidden; background:linear-gradient(118deg, #c8ff86 0%, #5af0ff 24%, #c77dff 48%, #ffd23f 70%, #9dff2e 100%); box-shadow:0 14px 30px rgba(0,0,0,.5); transition:transform .5s cubic-bezier(.3,.7,.2,1), opacity .45s; }
.ccs-foil-top{ top:0; height:16%; border-radius:18px 18px 0 0; clip-path:polygon(0 0, 100% 0, 100% 80%, 92% 100%, 84% 82%, 76% 100%, 68% 82%, 60% 100%, 52% 82%, 44% 100%, 36% 82%, 28% 100%, 20% 82%, 12% 100%, 4% 82%, 0 100%); }
.ccs-foil-top::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(26,15,42,.35) 0 3px, transparent 3px 9px); }
.ccs-foil-body{ top:14.5%; bottom:0; border-radius:0 0 18px 18px; display:grid; place-items:center; align-content:center; gap:8px; }
.ccs-foil-body::before{ content:''; position:absolute; inset:9px; border-radius:12px; background:radial-gradient(circle at 50% 30%, #4a1a96, #1a0f2a 75%); box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }
.ccs-foil-body b{ position:relative; font:400 clamp(30px, 8vw, 40px)/.9 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum), 0 0 22px rgba(157,255,46,.45); }
.ccs-foil-body small{ position:relative; font:700 11px/1.2 var(--f-head); letter-spacing:.1em; text-transform:uppercase; color:#e9dcff; padding:0 14px; }
.ccs-foil-shine{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 62%); background-size:260% 100%; animation:ccsShine 2.8s ease-in-out infinite; }
@keyframes ccsShine{ 0%{ background-position:130% 0; } 60%, 100%{ background-position:-40% 0; } }
/* Card Shop pack tiles: the sealed foil pack from the pack-opening window, on a lit shelf with two card backs fanned behind it */
.ccs-packart{ --ph:168px; --pa-glow:var(--lime); position:relative; width:100%; height:calc(var(--ph) + 30px); isolation:isolate; border-radius:16px;
  background:radial-gradient(55% 80% at 50% 42%, color-mix(in srgb, var(--pa-glow) 22%, transparent), transparent 72%); }
.ccs-packart::after{ content:''; position:absolute; left:50%; bottom:2px; width:62%; max-width:230px; height:18px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent); z-index:-1; }
.ccs-pa-card{ position:absolute; top:24px; left:50%; height:calc(var(--ph) * .84); aspect-ratio:5/7; transition:transform .35s cubic-bezier(.3,.7,.2,1); }
.ccs-pa-card .ccs-back{ font-size:13px; border-width:2.5px; border-radius:11px; } .ccs-pa-card .ccs-back-logo{ display:none; }   /* half-hidden behind the pack, the words would read as cut off */
.ccs-pa-card.c1{ transform:translateX(-122%) rotate(-15deg); } .ccs-pa-card.c2{ transform:translateX(22%) rotate(14deg); }
.ccs-pa-foil{ position:absolute; top:8px; left:50%; z-index:1; height:var(--ph); aspect-ratio:5/7; transform:translateX(-50%) rotate(-3deg); transition:transform .35s cubic-bezier(.3,.7,.2,1); filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.ccs-pa-foil .ccs-foil-top{ border-radius:13px 13px 0 0; } .ccs-pa-foil .ccs-foil-body{ border-radius:0 0 13px 13px; gap:6px; }
.ccs-pa-foil .ccs-foil-body::before{ inset:6px; border-radius:8px; }
.ccs-pa-foil .ccs-foil-body{ text-align:center; justify-items:center; } .ccs-pa-foil .ccs-foil-body b{ font-size:25px; } .ccs-pa-foil .ccs-foil-body small{ font-size:8px; letter-spacing:.06em; padding:0 4px; white-space:nowrap; }
.ccs-pack:hover .ccs-pa-foil{ transform:translateX(-50%) translateY(-6px) rotate(-1deg); }
.ccs-pack:hover .ccs-pa-card.c1{ transform:translateX(-130%) rotate(-19deg); } .ccs-pack:hover .ccs-pa-card.c2{ transform:translateX(30%) rotate(18deg); }
.ccs-packart.ch2{ --pa-glow:#c48aff; }
.ccs-packart.ch2 .ccs-foil-top, .ccs-packart.ch2 .ccs-foil-body{ background:linear-gradient(118deg, #3b1d6e 0%, #8f4bff 24%, #ff5fd2 48%, #3fd8ff 72%, #9dff2e 100%); }
.ccs-packart.ch2 .ccs-foil-body b{ color:#fff; text-shadow:0 3px 0 #2a0f55, 0 0 22px rgba(196,138,255,.7); }
.ccs-packart.starter{ --pa-glow:var(--gold); }
.ccs-packart.starter .ccs-foil-top, .ccs-packart.starter .ccs-foil-body{ background:linear-gradient(118deg, #fff3b0 0%, #ffd23f 26%, #ff9a3c 52%, #ffe27a 74%, #c8ff86 100%); }
.ccs-packart.starter .ccs-foil-body b{ color:#ffd23f; text-shadow:0 3px 0 #6a2c00, 0 0 22px rgba(255,210,63,.45); }
.ccs-packart.starter .ccs-back{ border-color:#ffd23f; color:#ffd23f; }
.ccs-packart.claimed .ccs-pa-foil, .ccs-packart.claimed .ccs-pa-card{ filter:saturate(.35) brightness(.75); }
.ccs-pa-tag{ position:absolute; z-index:2; top:2px; left:calc(50% + var(--ph) * .22); transform:rotate(12deg); padding:5px 11px; border-radius:999px; background:var(--lime); color:#1a0f2a; font:800 12px/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 3px 0 #2f6b22, 0 6px 14px rgba(0,0,0,.4); }
@media (max-width:420px){ .ccs-packart{ --ph:150px; } }
@media (prefers-reduced-motion:reduce){ .ccs-pa-foil, .ccs-pa-card{ transition:none; } }
html.calm .ccs-pa-foil, html.calm .ccs-pa-card{ transition:none; }
.ccs-open[data-stage="torn"] .ccs-foil-top{ transform:translate(70px, -90px) rotate(32deg); opacity:0; }
.ccs-open[data-stage="torn"] .ccs-foil-body{ transform:translateY(40px) scale(.9); opacity:0; transition-delay:.12s; }
.ccs-open[data-stage="torn"] .ccs-foil::after{ content:''; position:absolute; inset:-30%; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(157,255,46,.4) 30%, transparent 62%); animation:ccsFlash .5s ease-out both; pointer-events:none; }
@keyframes ccsFlash{ from{ opacity:1; transform:scale(.4); } to{ opacity:0; transform:scale(1.2); } }
/* the cards: one row of five on a computer; a swipeable row on phones */
.ccs-reveal{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 150px); justify-content:center; gap:14px; width:100%; margin:2px 0; padding:10px 4px 12px; }
.ccs-reveal .ccs-slot{ animation:ccsDeal .55s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:calc(var(--i) * 110ms); }
@keyframes ccsDeal{ from{ transform:translateY(-80px) rotate(-10deg) scale(.6); opacity:0; } to{ transform:none; opacity:1; } }
@media (max-width:700px){
  .ccs-reveal{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; gap:12px; padding:10px calc(50% - 72px) 14px; overscroll-behavior-x:contain; scrollbar-width:none; }
  .ccs-reveal::-webkit-scrollbar{ display:none; }
  .ccs-reveal .ccs-slot{ flex:0 0 144px; scroll-snap-align:center; }
}
.ccs-back{ overflow:hidden; }
.ccs-reveal .ccs-slot{ isolation:isolate; }
.ccs-back-logo{ font-style:normal; position:relative; }
.ccs-slot:focus-visible{ outline:none; } .ccs-slot:focus-visible .ccs-inner{ outline:3px solid var(--lime); outline-offset:4px; border-radius:16px; }
/* rare and better build up before they turn: the back glows in the rarity colour and trembles, longer for Epic and up */
.ccs-slot.charging .ccs-back{ animation:ccsCharge var(--charge, 600ms) ease-in both; }
.ccs-slot.charging .ccs-back::after{ content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--rc) 70%, #fff) 48%, transparent 66%); background-size:260% 100%; animation:ccsShine .5s linear infinite; }
@keyframes ccsCharge{ 0%{ box-shadow:0 10px 22px rgba(0,0,0,.45); transform:none; } 30%{ transform:translateX(-2px) rotate(-1deg); } 50%{ transform:translateX(2px) rotate(1deg); } 70%{ transform:translateX(-3px) rotate(-1.5deg); } 90%{ transform:translateX(3px) rotate(1.5deg) scale(1.03); }
  100%{ box-shadow:0 0 0 3px var(--rc), 0 0 40px 10px color-mix(in srgb, var(--rc) 70%, transparent); transform:scale(1.04); } }
.ccs-slot.burst::after{ content:''; position:absolute; inset:-35%; z-index:-1; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--rc) 60%, transparent) 10% 12%, transparent 14% 33%, color-mix(in srgb, var(--rc) 60%, transparent) 35% 37%, transparent 39% 58%, color-mix(in srgb, var(--rc) 60%, transparent) 60% 62%, transparent 64% 83%, color-mix(in srgb, var(--rc) 60%, transparent) 85% 87%, transparent 89%);
  animation:ccsRays 1.4s ease-out both; }
@keyframes ccsRays{ 0%{ opacity:0; transform:scale(.4) rotate(0); } 25%{ opacity:1; } 100%{ opacity:0; transform:scale(1.3) rotate(50deg); } }
.ccs-badge{ position:absolute; top:-9px; right:-9px; z-index:3; padding:5px 9px; border-radius:999px; font:800 11px/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; box-shadow:0 4px 10px rgba(0,0,0,.4); }
.ccs-badge.new{ background:var(--lime); color:#10200a; }
.ccs-badge.dup{ background:#2a1747; color:#e9dcff; border:2px solid rgba(214,190,255,.5); }
.ccs-slot.up .ccs-badge{ animation:ccsBadge .4s cubic-bezier(.2,.9,.3,1.5) .45s both; }
@keyframes ccsBadge{ from{ transform:scale(0); } to{ transform:scale(1); } }
.ccs-sum{ margin:0; font-size:15px; } .ccs-sum .num{ font-weight:800; color:var(--lime); }
.ccs-btns{ justify-content:center; }
.ccs-swipe{ margin:-6px 0 0; }
/* buying a single: a sheet with the card; rare ones shimmer; bought, it turns over once */
.ccs-buy{ display:grid; grid-template-columns:160px minmax(0, 1fr); gap:20px; align-items:start; text-align:left; }
.ccs-buy-card{ position:relative; width:160px; perspective:900px; }
.ccs-buy-card .ccs-card{ font-size:inherit; }
.ccs-buy-card.foil .ccs-card::after{ background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 46%, color-mix(in srgb, var(--rc) 40%, transparent) 52%, transparent 64%); background-size:260% 100%; animation:ccsShine 2.6s ease-in-out infinite; }
.ccs-buy-card.got .ccs-card{ animation:ccsGot .8s cubic-bezier(.2,.8,.3,1.2) both; box-shadow:0 0 0 3px var(--rc), 0 0 36px 8px color-mix(in srgb, var(--rc) 55%, transparent); }
@keyframes ccsGot{ 0%{ transform:rotateY(0) scale(1); } 50%{ transform:rotateY(180deg) scale(1.1); } 100%{ transform:rotateY(360deg) scale(1); } }
.ccs-buy-tx h2{ margin:0; font-size:26px; } .ccs-buy-act{ gap:10px; }
@media (max-width:640px){ .ccs-buy{ grid-template-columns:112px minmax(0, 1fr); gap:14px; } .ccs-buy-card{ width:112px; } .ccs-buy-tx h2{ font-size:22px; } .ccs-buy-act .btn{ flex:1 1 auto; } }
@media (prefers-reduced-motion:reduce){ .ccs-foil-shine, .ccs-reveal .ccs-slot, .ccs-slot.charging .ccs-back, .ccs-slot.charging .ccs-back::after, .ccs-slot.burst::after, .ccs-slot.up .ccs-badge, .ccs-buy-card.foil .ccs-card::after, .ccs-buy-card.got .ccs-card, .ccs-open[data-stage="torn"] .ccs-foil::after{ animation:none; } .ccs-foil-top, .ccs-foil-body, .ccs-foil{ transition:none; } }
html.calm .ccs-foil-shine, html.calm .ccs-reveal .ccs-slot, html.calm .ccs-slot.charging .ccs-back, html.calm .ccs-slot.charging .ccs-back::after, html.calm .ccs-slot.burst::after, html.calm .ccs-slot.up .ccs-badge, html.calm .ccs-buy-card.foil .ccs-card::after, html.calm .ccs-buy-card.got .ccs-card, html.calm .ccs-open[data-stage="torn"] .ccs-foil::after{ animation:none; }
html.calm .ccs-foil-top, html.calm .ccs-foil-body, html.calm .ccs-foil, html.calm .ccs-inner{ transition:none; }
/* ---------- the Sandbox Pit */
/* the foe faces your goop: its idle wobble is the flipped one */
.ftr.foe .goopfig.idle .body{ animation-name:wobf; }
/* locked rungs stay readable: the picture fades, the words keep their contrast */
.pit-foe.locked{ opacity:1; filter:none; }
/* locked foes: only the pictures fade; the rung badge stays crisp (a dusk-purple disc with a light number) so every rung reads */
.pit-foe.locked .pfo-art > img{ opacity:.45; filter:grayscale(.8); }
.pit-foe.locked .pfo-scout, .pit-foe.locked .pfo-meta .chip{ color:#cfc3e6; }
.pit-foe.locked .pfo-rung{ background:#3a2f52; color:#f1eaff; box-shadow:0 0 0 1.5px #8d7bb3, 0 2px 6px rgba(0,0,0,.4); }
.pit-foe.locked .pfo-name{ color:#e6dcf7; }
/* the moves picker: Save stays in view at the bottom of the window */
.pit-pick .mv-foot{ position:sticky; bottom:-22px; z-index:2; margin:0 -22px -22px; padding:12px 22px 16px; align-items:center; background:linear-gradient(180deg, rgba(36,20,58,.92), rgba(24,13,40,.99)); border-top:1px solid rgba(214,190,255,.16); border-radius:0 0 28px 28px; }
.pit-pick .mv-foot .small{ margin-left:auto; }
@media (max-width:640px){ .pit-pick .mv-list{ max-height:none; overflow:visible; } }
.gear-note{ min-height:1.3em; margin:4px 0 8px; color:var(--gold); }
/* the bout tray: while a round plays the buttons dim but keep focus; key hints on a computer */
.pt-moves.busy [data-move], .pt-row.busy button{ opacity:.45; cursor:default; }
.pt-key{ position:absolute; right:8px; bottom:6px; min-width:20px; padding:2px 5px; border-radius:6px; border:1px solid rgba(214,190,255,.35); background:rgba(13,7,22,.5); color:var(--mute); font:700 11px/1.2 var(--f-head); text-align:center; }
.mv-sp, .mv-mini{ position:relative; }
.mv-mini .pt-key{ position:static; margin-top:2px; }
.mv-sp .pt-key{ position:static; margin-left:auto; flex:0 0 auto; }
.pt-keys{ margin:8px 0 0; text-align:center; }
@media (hover:none), (pointer:coarse), (max-width:640px){ .pt-key{ display:none; } .pt-keys{ display:none; } }
/* the face-off: fighters slide in, VS slams, the foe's style shows */
.pitb-intro{ position:absolute; inset:0; z-index:9; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:4% 5%; cursor:pointer;
  background:radial-gradient(ellipse at 50% 55%, rgba(30,14,50,.82), rgba(8,4,16,.96) 75%); animation:piFade .25s ease-out both; }
.pitb-stage .ftr, .pitb-stage .hpbox{ transition:opacity .35s, transform .35s; }
.pitb-stage.intro .ftr, .pitb-stage.intro .hpbox{ opacity:0; }
.pitb-stage.intro .ftr.me{ transform:translateX(-30px); } .pitb-stage.intro .ftr.foe{ transform:translateX(30px); }
.pitb-intro.out{ animation:piOut .32s ease-in both; }
.pitb-intro:focus-visible{ outline:3px solid var(--lime); outline-offset:-3px; }
.pi-side{ display:grid; justify-items:center; gap:6px; text-align:center; min-width:0; }
.pi-side.me{ animation:piInL .5s cubic-bezier(.2,.9,.25,1.15) .05s both; }
.pi-side.foe{ animation:piInR .5s cubic-bezier(.2,.9,.25,1.15) .15s both; }
.pi-fig{ position:relative; width:min(150px, 26vw); }
.pi-side.foe .pi-fig .goopfig .body{ transform:scaleX(-1); }
.pi-face{ position:absolute; right:-6px; bottom:-4px; width:38%; aspect-ratio:1; border-radius:50%; object-fit:cover; border:3px solid #ff7a59; box-shadow:0 4px 10px rgba(0,0,0,.5); }
.pi-side b{ font:400 clamp(18px, 3.4vw, 30px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.pi-side.foe b{ color:#ff9a6b; }
.pi-side small{ max-width:28ch; font-size:12.5px; line-height:1.3; color:#e9dcff; animation:piFade .4s ease-out .8s both; }
.pi-side .chip.style{ animation:piFade .4s ease-out .7s both; border-color:#ff9a6b; }
.pi-vs{ font:400 clamp(44px, 9vw, 92px)/1 var(--f-display); color:#fff; text-shadow:0 0 24px rgba(255,210,63,.8), 0 5px 0 #b8860b; animation:piSlam .45s cubic-bezier(.3,1.6,.5,1) .45s both; }
@keyframes piFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes piOut{ to{ opacity:0; transform:scale(1.04); } }
@keyframes piInL{ from{ transform:translateX(-120%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes piInR{ from{ transform:translateX(120%); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes piSlam{ 0%{ transform:scale(3) rotate(-12deg); opacity:0; } 60%{ transform:scale(.88) rotate(3deg); opacity:1; } 100%{ transform:none; opacity:1; } }
@media (max-width:640px){ .pitb-intro{ gap:4px; padding:3%; } .pi-side small{ display:none; } .pi-side .chip{ font-size:11px; padding:3px 8px; } }
/* the result card: a round-by-round strip, the XP bar filling, the level-up and new moves */
.pit-result:focus{ outline:none; }
.pr-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:5px; max-width:520px; }
.prs{ display:grid; justify-items:center; gap:2px; padding:4px 5px 5px; border-radius:10px; border:2px solid rgba(214,190,255,.2); background:rgba(13,7,22,.45); min-width:34px; }
.prs.me{ border-color:var(--lime); background:rgba(157,255,46,.12); }
.prs.foe{ border-color:#ff7a8a; background:rgba(255,122,138,.12); }
.prs .sti, .prs svg{ width:18px; height:18px; }
.prs-n{ font:700 10px/1 var(--f-head); font-style:normal; color:var(--mute); }
.prs-foe{ opacity:.85; }
.pit-result.enter .prs{ animation:prsIn .3s ease-out both; animation-delay:calc(.35s + var(--i) * 45ms); }
@keyframes prsIn{ from{ opacity:0; transform:translateY(6px) scale(.8); } to{ opacity:1; transform:none; } }
.pr-key{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.pr-key .k{ width:10px; height:10px; border-radius:3px; display:inline-block; border:2px solid var(--lime); } .pr-key .k.foe{ border-color:#ff7a8a; margin-left:6px; }
.pr-xp{ width:100%; max-width:440px; display:grid; gap:6px; text-align:left; }
.pr-xp .bar{ display:block; height:10px; border-radius:999px; background:rgba(214,190,255,.14); overflow:hidden; }
.pr-xp .bar i{ display:block; height:100%; width:var(--x2); border-radius:inherit; background:linear-gradient(90deg, var(--lime), #5af0ff); }
.pit-result.enter .pr-xp .bar i{ animation:prXp 1.1s cubic-bezier(.3,.8,.3,1) .3s both; }
.pit-result.enter .pr-xp.up .bar i{ animation:prXpUp 1.5s cubic-bezier(.3,.8,.3,1) .3s both; }
@keyframes prXp{ from{ width:var(--x0); } to{ width:var(--x1); } }
@keyframes prXpUp{ 0%{ width:var(--x0); } 55%{ width:100%; } 56%{ width:0; } 100%{ width:var(--x2); } }
.pr-lvup{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:center; padding:10px 12px; border-radius:14px; text-align:center;
  background:linear-gradient(135deg, rgba(255,210,63,.18), rgba(157,255,46,.12)); border:1px solid rgba(255,210,63,.55); }
.pr-lvup b{ font:400 24px/1 var(--f-display); color:var(--gold); text-shadow:0 2px 0 #7a5200; }
.pit-result.enter .pr-lvup{ animation:prLv .6s cubic-bezier(.3,1.6,.5,1) 1.1s both; }
@keyframes prLv{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.pr-newmv{ display:inline-flex; align-items:center; gap:4px; font-style:normal; font-weight:700; color:var(--sc); }
.pr-newmv .sti{ width:16px; height:16px; }
@media (prefers-reduced-motion:reduce){ .pitb-intro, .pitb-intro.out, .pi-side, .pi-vs, .pi-side small, .pi-side .chip.style, .pit-result.enter .prs, .pit-result.enter .pr-xp .bar i, .pit-result.enter .pr-lvup{ animation:none; } }
html.calm .pitb-intro, html.calm .pitb-intro.out, html.calm .pi-side, html.calm .pi-vs, html.calm .pi-side small, html.calm .pi-side .chip.style, html.calm .pit-result.enter .prs, html.calm .pit-result.enter .pr-xp .bar i, html.calm .pit-result.enter .pr-lvup{ animation:none; }
@media (max-width:380px){ .rsign span{ -webkit-line-clamp:3; font-size:10px; } .rsign img{ width:24px; height:24px; } }
/* ---- end world */
/* ---- dailies, festivals, community, Shadow Over Goopville */
/* ---------- one-tap dailies: a short reveal, then the prize stays as a card (dailies.js dailyResult) */
.rv{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; align-items:center; padding:14px; border-radius:22px; background:linear-gradient(150deg, rgba(58,28,92,.7), rgba(16,8,30,.85)); border:1px solid rgba(214,190,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.rv-stage{ position:relative; width:120px; height:120px; border-radius:20px; overflow:hidden; display:grid; place-items:center; background:radial-gradient(circle at 50% 38%, rgba(255,233,163,.28), rgba(30,16,48,.9) 72%); }
.rv-ic{ position:relative; z-index:2; width:62px; height:62px; display:grid; place-items:center; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.rv-ic > svg, .rv-ic > img{ width:100%; height:100%; }
.rv-shine{ position:absolute; inset:0; z-index:3; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 48%, transparent 60%); transform:translateX(-120%); pointer-events:none; }
.rv-plate{ position:absolute; left:14%; right:14%; bottom:20px; height:22px; border-radius:50%; background:radial-gradient(ellipse at 50% 35%, #ffffff, #d9d2f2 55%, #8f86ad); box-shadow:0 6px 10px rgba(0,0,0,.4); }
.rv-puddle .rv-ic{ margin-top:-14px; }
.rv-dip .rv-stage{ background:linear-gradient(180deg, rgba(150,230,255,.22), rgba(20,60,90,.6) 58%, #0d3550); }
.rv-water{ position:absolute; left:-10%; right:-10%; bottom:0; height:44%; z-index:4; background:linear-gradient(180deg, rgba(90,210,240,.55), rgba(20,90,130,.85)); border-radius:46% 54% 0 0 / 14px 14px 0 0; pointer-events:none; }
.rv-jar{ position:absolute; z-index:1; bottom:18px; width:58px; height:72px; }
.rv-jar svg{ width:100%; height:100%; }
.rv-dip .rv-ic{ width:48px; height:48px; margin-top:-46px; z-index:5; }
.rv-tx{ display:grid; gap:4px; justify-items:start; min-width:0; }
.rv-name{ font:400 clamp(24px, 4vw, 30px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); overflow-wrap:anywhere; }
.rv-fortune{ display:block; padding:0; background:none; border:0; box-shadow:none; perspective:900px; }
.rv-card{ position:relative; display:grid; gap:8px; justify-items:center; text-align:center; padding:22px 20px 20px; border-radius:20px; transform-origin:50% 0;
  background:linear-gradient(170deg, #fff9e6, #f3e3b8); color:#2a1546; border:1px solid #e1c27a; box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 6px rgba(255,255,255,.35); }
.rv-card .kick{ color:#8a5a12; }
.rv-seal{ position:absolute; top:-16px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #ffe9a3, #c48a17); color:#4a2a00; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.rv-seal svg{ width:18px; height:18px; }
.rv-quote{ margin:0; font:600 clamp(18px, 3.4vw, 22px)/1.35 var(--f-head); color:#2a1546; text-wrap:balance; }
.rv-bonus{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:999px; background:#2a1546; color:#ffe9a3; font-size:14px; }
.rv-bonus svg{ width:22px; height:22px; }
.rv-back{ display:flex; align-items:center; gap:6px; margin:0; } .rv-back svg{ width:16px; height:16px; flex:0 0 auto; }
@media (max-width:420px){ .rv{ grid-template-columns:96px minmax(0,1fr); gap:12px; padding:12px; } .rv-stage{ width:96px; height:96px; } .rv-ic{ width:52px; height:52px; } .rv-jar{ width:48px; height:60px; bottom:14px; } .rv-dip .rv-ic{ width:40px; height:40px; margin-top:-38px; } }
.rv.fresh .rv-shine{ animation:rvShine 1s .75s ease-out both; }
.rv.fresh .rv-tx{ animation:rvText .5s .55s ease-out both; }
.rv-puddle.fresh .rv-ic{ animation:rvDrop .75s cubic-bezier(.3,1.5,.5,1) both; }
.rv-puddle.fresh .rv-plate{ animation:rvPlate .75s ease-out both; }
.rv-dip.fresh .rv-jar{ animation:rvRise .9s cubic-bezier(.2,.9,.3,1.15) both; }
.rv-dip.fresh .rv-ic{ animation:rvPopOut .55s .7s cubic-bezier(.3,1.6,.5,1) both; }
.rv-dip.fresh .rv-water{ animation:rvRipple 1.2s ease-out both; }
.rv-fortune.fresh .rv-card{ animation:rvUnfold .85s cubic-bezier(.2,.9,.3,1.1) both; }
.rv-fortune.fresh .rv-quote{ animation:rvText .5s .55s ease-out both; }
.rv-fortune.fresh .rv-bonus{ animation:rvPopOut .5s .95s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes rvDrop{ 0%{ transform:translateY(-110px) scale(.7); opacity:0; } 55%{ transform:translateY(6px) scale(1.06, .92); opacity:1; } 100%{ transform:none; } }
@keyframes rvPlate{ 0%, 50%{ transform:scale(1); } 62%{ transform:scale(1.08, .82); } 100%{ transform:none; } }
@keyframes rvRise{ 0%{ transform:translateY(90px); } 100%{ transform:none; } }
@keyframes rvPopOut{ 0%{ transform:translateY(26px) scale(.2); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes rvRipple{ 0%{ transform:translateY(4px) scaleX(1.1); } 40%{ transform:translateY(-3px) scaleX(.96); } 100%{ transform:none; } }
@keyframes rvUnfold{ 0%{ transform:rotateX(88deg) scale(.9); opacity:0; } 60%{ opacity:1; } 100%{ transform:none; } }
@keyframes rvText{ from{ opacity:0; transform:translateY(8px); } }
@keyframes rvShine{ to{ transform:translateX(120%); } }

/* ---------- the Wobble Wheel (dailies.js wheelHtml): an SVG disc that turns, upright labels, a gold rim with bulbs and pegs,
   a hub with the Original Goop, a pointer the pegs knock, confetti */
.wob-panel{ align-items:center; }
.wob{ position:relative; width:min(420px, 100%); aspect-ratio:1; margin:6px auto 0; overflow:clip; overflow-clip-margin:14px; }   /* the turning square's corners never widen the page */
.wob-disc{ position:absolute; inset:0; transform:rotate(var(--a, 0deg)); will-change:transform; filter:drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.wob-disc svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.wob-seps line{ stroke:rgba(255,233,163,.75); stroke-width:1.1; }
.wob-pegs circle{ fill:#fff3c4; stroke:#8a5a12; stroke-width:.9; }
.wob-bulbs circle{ fill:#ffe9a3; } .wob-bulbs circle.b1{ fill:#9dff2e; }
.wob-hi{ fill:#ffffff; opacity:0; pointer-events:none; }
.wob-hi.on{ opacity:.24; animation:wobHi 1.1s ease-in-out 3; }
.wob-lab{ position:absolute; display:grid; justify-items:center; gap:1px; width:22%; transform:translate(-50%, -50%) rotate(calc(var(--a, 0deg) * -1)); pointer-events:none; }
.wl-ic{ width:clamp(26px, 9vw, 40px); height:clamp(26px, 9vw, 40px); display:grid; place-items:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.wl-ic > svg, .wl-ic > img{ width:100%; height:100%; }
.wob-lab b{ font:800 clamp(13px, 3.7vw, 17px)/1 var(--f-head); color:#1a0f2a; text-shadow:0 1px 0 rgba(255,255,255,.65); white-space:nowrap; }
.wob-hub{ position:absolute; left:50%; top:50%; width:23%; aspect-ratio:1; transform:translate(-50%, -50%); border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 40% 30%, #3a1c5c, #0d0716 70%); border:4px solid var(--lime); box-shadow:0 0 0 3px #2a1546, 0 0 0 5px #ffd23f, 0 8px 18px rgba(0,0,0,.55), inset 0 -6px 12px rgba(0,0,0,.5); }
.wob-hub img{ width:82%; height:82%; object-fit:contain; margin-top:8%; }
.wob-ptr{ position:absolute; left:50%; top:-12px; width:34px; height:46px; margin-left:-17px; z-index:3; transform-origin:50% 12px; transform:rotate(var(--d, 0deg));
  background:linear-gradient(180deg, #fff6c8, #ffd23f 45%, #b8862b); clip-path:polygon(50% 100%, 0 26%, 14% 0, 86% 0, 100% 26%); filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.wob-ptr::after{ content:""; position:absolute; left:50%; top:7px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#2a1546; box-shadow:inset 0 0 0 2px #fff3c4; }
.wob-fx{ position:absolute; left:50%; top:46%; width:0; height:0; z-index:4; pointer-events:none; }
.wob-fx i{ position:absolute; width:9px; height:14px; border-radius:2px; opacity:0; animation:wobConf 1.6s cubic-bezier(.15,.7,.3,1) both; }
#wout{ justify-items:center; text-align:center; }
.wob-res{ width:fit-content; max-width:100%; margin-inline:auto; text-align:left; display:flex; align-items:center; gap:14px; padding:10px 18px 10px 10px; border-radius:20px; background:linear-gradient(135deg, color-mix(in srgb, var(--wc) 28%, transparent), rgba(16,8,30,.9) 70%); border:1.5px solid color-mix(in srgb, var(--wc) 70%, transparent); box-shadow:0 10px 26px rgba(0,0,0,.35); }
.wr-ic{ width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:rgba(0,0,0,.28); } .wr-ic > svg, .wr-ic > img{ width:78%; height:78%; }
.wob-res b{ font:400 26px/1.05 var(--f-display); color:var(--ink); }
@keyframes wobHi{ 50%{ opacity:.42; } }
@keyframes wobConf{ 0%{ opacity:1; transform:translate(0, 0) rotate(0); } 70%{ opacity:1; } 100%{ opacity:0; transform:translate(var(--x), calc(var(--y) + 140px)) rotate(var(--r)); } }

/* ---------- Deep Scratch: a foil card, flakes, the winning three glow, the prize card, the odds */
.scard{ position:relative; width:min(380px, 100%); margin:0 auto; padding:14px 14px 12px; border-radius:24px; display:grid; gap:12px;
  background:linear-gradient(145deg, #3a1c5c, #1a0d2e 55%, #2a1546); border:2px solid rgba(255,210,63,.55); box-shadow:0 0 0 4px rgba(26,13,46,.9), 0 18px 40px rgba(0,0,0,.5), inset 0 0 40px rgba(142,123,255,.18); }
.scard::before{ content:""; position:absolute; inset:6px; border-radius:18px; border:1px dashed rgba(255,233,163,.25); pointer-events:none; }
.scard-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:0 4px; }
.scard-head b{ font:400 22px/1 var(--f-display); color:var(--gold); text-shadow:0 2px 0 var(--plum); }
.scard .scratch{ width:100%; gap:8px; }
.scard .scratch .cell{ border-radius:14px; background:radial-gradient(circle at 50% 40%, #fff9e6, #e9dcff 70%); border:1px solid rgba(255,255,255,.4); transition:box-shadow .3s, transform .3s; }
.scard .scratch .cell canvas:focus-visible{ outline:3px solid var(--lime); outline-offset:-3px; border-radius:14px; }
.scard .scratch.won .cell:not(.win){ opacity:.45; filter:saturate(.5); transition:opacity .4s, filter .4s; }
.scard .scratch .cell.win{ box-shadow:0 0 0 3px var(--gold), 0 0 22px rgba(255,210,63,.7); animation:scWin 1s ease-in-out 3; }
.scard .scratch.lost .cell{ opacity:.8; }
.sflake{ position:absolute; z-index:5; width:6px; height:6px; border-radius:1px; pointer-events:none; background:linear-gradient(135deg, #ffffff, #b9aed6); animation:scFlake .7s ease-in both; }
.sprize{ display:flex; align-items:center; gap:14px; padding:12px 18px 12px 12px; border-radius:22px; background:linear-gradient(135deg, rgba(255,210,63,.24), rgba(16,8,30,.92) 70%); border:1.5px solid var(--gold); box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 30px rgba(255,210,63,.18); }
.sprize b{ font:400 26px/1.05 var(--f-display); color:var(--gold); text-shadow:0 2px 0 var(--plum); }
.sp-ic{ width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:rgba(0,0,0,.3); } .sp-ic > svg, .sp-ic > img{ width:80%; height:80%; }
.sprize.pop{ animation:scPrize .6s var(--d, 0s) cubic-bezier(.3,1.6,.5,1) both; }
.sodds{ border-radius:16px; background:rgba(12,7,20,.4); border:1px solid var(--line); padding:0 14px; }
.sodds summary{ min-height:44px; display:flex; align-items:center; cursor:pointer; font:700 14px/1.2 var(--f-head); color:var(--mute); }
.sodds table{ width:100%; border-collapse:collapse; font-size:14px; }
.sodds td{ padding:6px 4px; border-top:1px solid var(--line); vertical-align:middle; } .sodds td.num{ text-align:right; font-weight:700; color:var(--gold); white-space:nowrap; }
.sodds tr.dim td{ color:var(--dim); } .sodds tr.dim td.num{ color:var(--dim); }
.sodds .ss{ display:inline-grid; width:22px; height:22px; vertical-align:middle; margin-right:6px; } .sodds .ss > svg{ width:100%; height:100%; }
.sodds p{ margin:6px 0 12px; }
@keyframes scWin{ 50%{ transform:scale(1.05); box-shadow:0 0 0 3px #fff3c4, 0 0 30px rgba(255,210,63,.95); } }
@keyframes scFlake{ 0%{ transform:translate(-50%, -50%) rotate(0); opacity:1; } 100%{ transform:translate(calc(-50% + var(--x)), 60px) rotate(var(--r)); opacity:0; } }
@keyframes scPrize{ 0%{ transform:scale(.6); opacity:0; } 100%{ transform:none; opacity:1; } }

/* ---------- the Vault: the message under the field, quick-fill chips */
.vmsg{ margin:-4px 0 0; min-height:0; color:#ffb3bd; font-weight:600; } .vmsg:empty{ display:none; }
#amt[aria-invalid="true"]{ border-color:#ff6b7a; box-shadow:0 0 0 3px rgba(255,107,122,.2); }
.vquick{ gap:8px; } .vquick:empty{ display:none; } .vquick .chip{ min-height:44px; cursor:pointer; font:inherit; font-size:14px; }

/* ---------- Glimmer Calendar: names stay on opened doors, doors from before you joined, the progress bar, door 24 as
   the grand door, and the door swinging open on the redraw after you tap it */
.gcal-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
.gprog{ display:grid; gap:6px; }
.gbar{ height:10px; border-radius:999px; background:rgba(12,7,20,.6); border:1px solid var(--line); overflow:hidden; }
.gbar > span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #b8f0ff, #a46bff 60%, #ffd23f); box-shadow:0 0 12px rgba(184,240,255,.5); }
.gprog .small{ display:flex; align-items:center; gap:6px; color:var(--mute); } .gprog .small svg{ width:16px; height:16px; color:var(--gold); }
.gdoor{ perspective:600px; }
.gcal-grid > .gdoor{ aspect-ratio:4/5; }
.gdoor.opened{ align-content:center; gap:3px; padding:20px 4px 6px; }
.gdoor.opened .gift{ display:grid; place-items:center; width:100%; }
.gdoor.opened .gd-it{ width:44%; height:auto; aspect-ratio:1; margin:0; }
.gdoor.opened .gd-ess{ margin:0; } .gdoor.opened .gd-ess b{ display:none; }
.gdoor .gname{ font:700 11px/1.15 var(--f-head); color:var(--ink); text-align:center; overflow-wrap:break-word; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; }
.gdoor.before{ opacity:.5; border-style:dashed; } .gdoor.before .gst{ text-align:center; letter-spacing:.04em; line-height:1.15; text-transform:none; font-size:11px; }
.gdoor.missed .gst{ text-align:center; }
.gdoor .leaf{ position:absolute; inset:-1.5px; z-index:3; border-radius:inherit; transform-origin:0 50%; backface-visibility:hidden; pointer-events:none;
  background:linear-gradient(160deg, #5a2c90, #2a1546); border:2px solid var(--gold); box-shadow:inset -6px 0 10px rgba(0,0,0,.35); }
.gdoor .leaf::after{ content:""; position:absolute; right:12%; top:50%; width:7px; height:7px; margin-top:-3px; border-radius:50%; background:var(--gold); }
.gdoor.just{ animation:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(255,210,63,.18), 0 0 26px rgba(255,210,63,.35); }
.gdoor.just .leaf{ animation:gdSwing .9s cubic-bezier(.5,0,.3,1) forwards; }
.gdoor.just .gift{ animation:gdFloat .8s .35s cubic-bezier(.3,1.5,.5,1) both; }
.gdoor.just .gname{ animation:rvText .4s .8s ease-out both; }
.gcal-grid > .gdoor.last{ grid-column:1 / -1; aspect-ratio:auto; min-height:92px; padding:14px 18px 14px 64px; display:flex; align-items:center; justify-content:flex-start; gap:14px; text-align:left;
  background:linear-gradient(110deg, rgba(255,210,63,.32), rgba(90,44,144,.9) 40%, rgba(42,21,70,.95)); border:2px solid var(--gold); }
.gdoor.last .gn{ top:50%; left:16px; transform:translateY(-50%); font:400 34px/1 var(--f-display); color:var(--gold); text-shadow:0 2px 0 var(--plum); }
.gdoor.last .gst, .gdoor.last .gcta{ margin:0; font-size:13px; letter-spacing:.04em; color:#ffe9a3; text-transform:none; }
.gdoor.last.today .gcta{ font-size:16px; text-transform:uppercase; }
.gdoor.last .gbow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:linear-gradient(90deg, transparent calc(78% - 7px), rgba(255,92,140,.85) calc(78% - 7px), rgba(255,140,180,.85) calc(78% + 7px), transparent calc(78% + 7px)),
    linear-gradient(180deg, transparent calc(50% - 6px), rgba(255,92,140,.7) calc(50% - 6px), rgba(255,140,180,.7) calc(50% + 6px), transparent calc(50% + 6px)); }
.gdoor.last .gbow::after{ content:""; position:absolute; left:78%; top:50%; width:34px; height:22px; transform:translate(-50%, -50%);
  background:radial-gradient(ellipse at 25% 50%, #ff8cb4 45%, transparent 47%), radial-gradient(ellipse at 75% 50%, #ff8cb4 45%, transparent 47%), radial-gradient(circle at 50% 50%, #ffd23f 22%, transparent 24%); }
.gdoor.last.opened{ flex-direction:row; }
.gdoor.last.opened .gift{ width:auto; } .gdoor.last.opened .gd-it{ width:52px; height:52px; } .gdoor.last.opened .gname{ font:400 clamp(17px, 5vw, 22px)/1.1 var(--f-display); color:var(--gold); -webkit-line-clamp:2; text-align:left; }
/* phones under 400px: three doors a row, so a three-word gift name ('Glimmer Bubblo Plushie') has room under its picture */
@media (max-width:400px){ .gcal-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:340px){ .gdoor.opened .gd-it{ width:40%; } }
@media (max-width:520px){ .gdoor .gn{ top:6px; left:8px; font-size:13px; } .gdoor.opened{ padding-top:20px; } .gdoor .gname{ font-size:10.5px; } }
@keyframes gdSwing{ 0%{ transform:rotateY(0); opacity:1; } 70%{ opacity:1; } 100%{ transform:rotateY(-112deg); opacity:0; } }
@keyframes gdFloat{ 0%{ transform:translateY(18px) scale(.4); opacity:0; filter:drop-shadow(0 0 0 rgba(255,233,163,0)); } 60%{ filter:drop-shadow(0 0 14px rgba(255,233,163,.9)); } 100%{ transform:none; opacity:1; } }

/* ---------- peeking goops: they slide to a clear spot (dailies.js picks heights with nothing tappable under them) */
.peek{ transition:transform .5s cubic-bezier(.3,1.5,.5,1), top .35s ease; }

/* ---------- community pages offline: each page's host, what it offers online, an example of how it looks, ways on */
.onote{ gap:14px; align-items:center; } .onote img{ width:56px; height:56px; border-radius:16px; object-fit:cover; flex:0 0 auto; }
.oempty{ display:grid; gap:16px; padding:22px; background:linear-gradient(160deg, rgba(58,28,92,.55), rgba(16,8,30,.85)) !important; }
.oe-host{ display:grid; grid-template-columns:112px minmax(0, 1fr); gap:18px; align-items:center; }
.oe-host img{ width:112px; height:112px; border-radius:30px; object-fit:cover; border:3px solid rgba(157,255,46,.45); box-shadow:0 12px 28px rgba(0,0,0,.45); background:var(--panel3); }
.oe-host h2{ margin:0; font:400 clamp(24px, 3.4vw, 32px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }
.oe-host .say{ font-size:15px; padding:10px 14px; }
.oe-host .kick svg{ width:14px; height:14px; vertical-align:-2px; }
.oe-body{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:center; }
.oe-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.oe-list li{ display:flex; gap:10px; align-items:center; }
.oe-ic{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:rgba(157,255,46,.12); color:var(--lime); } .oe-ic svg{ width:20px; height:20px; }
.oe-prev{ position:relative; padding:16px 12px 12px; border-radius:18px; background:rgba(12,7,20,.5); border:1px dashed rgba(214,190,255,.25); }
.oe-tag{ position:absolute; top:-10px; left:12px; padding:2px 8px; border-radius:999px; background:#2a1546; border:1px solid var(--line2); font:700 11px/1.4 var(--f-head); letter-spacing:.08em; text-transform:uppercase; color:var(--mute); }
.oe-items{ display:grid; grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); gap:8px; }
.oe-item{ display:grid; justify-items:center; gap:5px; padding:8px 6px; border-radius:14px; background:rgba(214,190,255,.05); border:1px solid var(--line); }
.oe-item .ic{ width:40px; height:40px; display:grid; place-items:center; opacity:.85; } .oe-item .ic > svg, .oe-item .ic > img{ width:100%; height:100%; }
.oe-item.k img{ width:44px; height:44px; object-fit:contain; opacity:.85; }
.oe-item i, .oe-row i{ display:block; height:7px; width:80%; border-radius:4px; background:rgba(214,190,255,.18); }
.oe-item i.s, .oe-row i.s{ width:50%; background:rgba(214,190,255,.1); }
.oe-rows{ display:grid; gap:8px; }
.oe-row{ display:grid; grid-template-columns:24px minmax(0, 1fr) 40px; gap:8px; align-items:center; padding:8px 10px; border-radius:12px; background:rgba(214,190,255,.05); border:1px solid var(--line); }
.oe-row b{ font:800 14px/1 var(--f-head); color:var(--gold); } .oe-row.t svg{ width:18px; height:18px; color:var(--mute); } .oe-row i.s{ width:100%; }
.oe-foot{ margin:0; }
@media (max-width:700px){ .oe-body{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:520px){ .oempty{ padding:16px; gap:14px; } .oe-host{ grid-template-columns:76px minmax(0, 1fr); gap:12px; align-items:start; } .oe-host img{ width:76px; height:76px; border-radius:22px; } .oe-host .say{ font-size:14px; } }

/* ---------- leaderboards: one strip of boards (it scrolls sideways on phones), a header with your best */
.lbtabs{ display:flex; align-items:center; }
.lbtabs a{ min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.lbgrp{ display:inline-flex; align-items:center; min-height:44px; padding:0 4px 0 10px; font:700 11px/1 var(--f-head); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.lbgrp:first-child{ padding-left:6px; }
@media (max-width:760px){ .lbtabs{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; max-width:100%; } .lbtabs::-webkit-scrollbar{ display:none; } }
.lbhead{ display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:16px 18px !important; }
.lbhead img{ width:72px; height:72px; object-fit:contain; border-radius:20px; background:radial-gradient(circle at 50% 40%, rgba(157,255,46,.18), rgba(12,7,20,.6) 70%); }
.lbhead h2{ margin:0; font:400 clamp(22px, 3vw, 30px)/1.05 var(--f-display); color:var(--lime); text-shadow:0 2px 0 var(--plum); }
.lbmine{ color:var(--mute); } .lbmine b{ font-size:20px; color:var(--gold); }
@media (max-width:520px){ .lbhead{ grid-template-columns:56px minmax(0, 1fr); gap:12px; } .lbhead img{ width:56px; height:56px; } .lbhead .btn{ grid-column:1 / -1; } }

/* ---------- motion off: every animation above calms down (OS setting and the Settings switch) */
@media (prefers-reduced-motion:reduce){
  .rv *, .rv, .wob-hi.on, .wob-fx i, .scard .scratch .cell.win, .sflake, .sprize.pop, .gdoor.just, .gdoor.just *{ animation:none !important; }
  .gdoor.just .leaf, .wob-fx, .sflake{ display:none; } .peek{ transition:none; } }
html.calm .rv *, html.calm .rv, html.calm .wob-hi.on, html.calm .wob-fx i, html.calm .scard .scratch .cell.win, html.calm .sflake, html.calm .sprize.pop, html.calm .gdoor.just, html.calm .gdoor.just *{ animation:none !important; }
html.calm .gdoor.just .leaf, html.calm .wob-fx, html.calm .sflake{ display:none; } html.calm .peek{ transition:none; }
/* ---- end dailies */
/* ---- arcade and jobs */
/* The game stage: one frame around every arcade game and job shift. A tool strip on top (name, how to play, sound,
   pause), the game fitted to the screen under it (16:10 on wide screens, the full height between the bars on phones),
   and the results or pay slip in its place. Sizes: --gs-bar is the strip, --gs-tab the phone tab bar under the stage. */
.gstage{ --gs-bar:46px; --gs-tab:0px; --gsc:var(--job, var(--lime)); position:relative; border-radius:calc(var(--r2) + 4px); padding:0 8px 8px;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--gsc) 9%, transparent), transparent 60%), linear-gradient(180deg, rgba(30,17,48,.92), rgba(12,6,22,.96));
  border:1px solid color-mix(in srgb, var(--gsc) 22%, rgba(255,255,255,.08)); box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); scroll-margin-top:calc(var(--topbar) + 8px); }
.gstage .gs-bar{ height:var(--gs-bar); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 0 8px; }
.gstage .gs-name{ display:inline-flex; align-items:center; gap:9px; min-width:0; font:600 15px/1.2 var(--f-head); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; }
.gstage .gs-dot{ width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:var(--gsc); box-shadow:0 0 0 3px color-mix(in srgb, var(--gsc) 22%, transparent), 0 0 12px var(--gsc); }
.gstage .gs-tools{ display:inline-flex; gap:6px; flex:0 0 auto; }
.gstage .gs-info{ display:flex; gap:6px; min-width:0; flex:1 1 auto; justify-content:center; overflow:hidden; }
.gstage .gs-chip{ display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px; white-space:nowrap; font:600 12.5px/1 var(--f-head); color:var(--mute);
  background:color-mix(in srgb, var(--gsc) 9%, rgba(255,255,255,.03)); border:1px solid color-mix(in srgb, var(--gsc) 22%, transparent); }
.gstage .gs-chip svg, .gstage .gs-chip img{ width:14px; height:14px; flex:0 0 auto; } .gstage .gs-chip svg{ color:var(--gsc); }
.gstage .gs-chip.gs-left{ color:var(--ink); } .gstage .gs-chip.gs-left.none{ color:var(--dim); }
@media (max-width:900px){ .gstage .gs-info .gs-chip:nth-child(3){ display:none; } }
@media (max-width:640px){ .gstage .gs-info .gs-chip:not(.gs-left){ display:none; } .gstage .gs-info{ justify-content:flex-end; } .gstage .gs-chip.gs-left > span{ display:none; } }
.gstage .gs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; min-width:34px; padding:0 13px; border-radius:999px; cursor:pointer;
  font:600 13px/1 var(--f-head); color:var(--ink); background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); transition:background .15s, border-color .15s, transform .12s; }
.gstage .gs-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); }
.gstage .gs-btn:active{ transform:scale(.96); }
.gstage .gs-btn:focus-visible{ outline:2px solid var(--gsc); outline-offset:2px; }
.gstage .gs-btn svg{ width:17px; height:17px; flex:0 0 auto; }
.gstage .gs-btn[hidden]{ display:none; }
.gstage .gs-pause{ border-color:color-mix(in srgb, var(--gsc) 45%, transparent); color:var(--gsc); }
.gstage .gs-pause.on{ background:var(--gsc); color:#140a20; border-color:transparent; box-shadow:0 0 18px color-mix(in srgb, var(--gsc) 45%, transparent); }
.gstage .gs-fit{ display:grid; justify-items:center; }
/* the game: 16:10, as wide as the column, but never taller than the screen under the top bar (the rest is frame) */
.gstage .gamehost{ width:min(100%, calc((100dvh - var(--topbar) - var(--gs-bar) - var(--gs-tab) - 34px) * 1.6)); min-width:min(100%, 560px, max(240px, calc((100dvh - var(--topbar) - var(--gs-bar) - var(--gs-tab) - 34px) * 1.6))); aspect-ratio:16/10; height:auto; margin:0;
  border-radius:var(--r2); border-color:rgba(255,255,255,.1); box-shadow:0 10px 30px rgba(0,0,0,.4); }
@media (max-width:1060px){ .gstage{ --gs-tab:calc(66px + env(safe-area-inset-bottom, 0px)); } }
/* touch screens (phones, tablets, and any narrow window): the strip's buttons are full 44 px targets */
@media (max-width:1060px), (pointer:coarse){ .gstage{ --gs-bar:52px; } .gstage .gs-btn{ height:44px; min-width:44px; } }
/* phones: the game takes the whole height between the top bar and the tab bar */
@media (max-width:640px){
  .gstage{ --gs-bar:50px; padding:0 4px 4px; border-radius:20px; margin-inline:-6px; }
  .gstage .gamehost, .jobwork .gstage .gamehost.jobhost{ width:100%; min-width:0; aspect-ratio:auto; max-height:none;
    height:max(400px, calc(100dvh - var(--topbar) - var(--gs-bar) - var(--gs-tab) - 22px)); border-radius:16px; }
  .gstage .gs-btn{ width:44px; height:44px; padding:0; } .gstage .gs-btn > span{ display:none; }
  .gstage .gs-pause.on{ width:auto; padding:0 14px; } .gstage .gs-pause.on > span{ display:inline; }
  .gstage .gs-name{ font-size:14px; }
}
/* how to play: a sheet over the game (the game is paused while it is open) */
.gstage .gs-how{ position:absolute; inset:var(--gs-bar) 0 0; z-index:6; display:grid; padding:14px; overflow:auto; border-radius:0 0 calc(var(--r2) + 4px) calc(var(--r2) + 4px);
  background:rgba(9,4,17,.74); backdrop-filter:blur(8px); animation:gsFade .2s ease-out both; }
.gstage .gs-howcard{ margin:auto; width:min(460px, 100%); display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; border-radius:20px;
  background:linear-gradient(180deg, rgba(44,26,68,.98), rgba(26,14,42,.98)); border:1px solid color-mix(in srgb, var(--gsc) 35%, transparent); box-shadow:0 24px 60px rgba(0,0,0,.55); animation:gsUp .28s cubic-bezier(.2,.9,.3,1.1) both; }
.gstage .gs-howcard h3{ margin:0; font:400 30px/1.05 var(--f-display); color:var(--gsc); }
.gstage .gs-howcard ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; line-height:1.45; }
.gstage .gs-howcard li::marker{ color:var(--gsc); }
.gstage .gs-howcard p{ margin:0; } .gstage .gs-howcard .btn{ align-self:center; min-width:160px; }
.gstage .gs-howcard .kick{ color:var(--gsc); }
/* clocking in for the next shift */
.gstage .gs-clock{ position:absolute; inset:0; z-index:7; display:grid; place-items:center; background:rgba(9,4,17,.6); backdrop-filter:blur(3px); animation:gsFade .18s ease-out both; }
.gstage .gs-card{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:18px 30px 16px; border-radius:16px; background:#fbf6ee; color:#2a1b33; box-shadow:0 20px 50px rgba(0,0,0,.5);
  border-top:7px solid var(--gsc); animation:gsPunch .7s cubic-bezier(.2,.9,.3,1.2) both; }
.gstage .gs-card b{ font:400 34px/1 var(--f-label); letter-spacing:.06em; }
.gstage .gs-card .kick{ color:color-mix(in srgb, var(--gsc) 60%, #2a1b33); }
.gstage .gs-punch{ font:600 13px/1 var(--f-head); padding:4px 10px; border:2px solid #c4433a; color:#c4433a; border-radius:6px; transform:rotate(-4deg); animation:gsStamp .35s .28s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes gsFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes gsUp{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes gsPunch{ 0%{ opacity:0; transform:translateY(30px) rotate(-3deg); } 55%{ opacity:1; transform:translateY(-4px) rotate(1deg); } 100%{ transform:none; } }
@keyframes gsStamp{ from{ opacity:0; transform:rotate(-4deg) scale(2.2); } to{ opacity:1; transform:rotate(-4deg) scale(1); } }

/* results: count-up score, how it compares with your best, stat chips, Essence flying to the wallet */
.gres{ position:absolute; inset:0; display:grid; overflow:auto; padding:18px 14px; overscroll-behavior:contain;
  background:radial-gradient(80% 60% at 50% 32%, rgba(124,64,190,.42), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(157,255,46,.08), transparent 70%), linear-gradient(180deg, #1c0f30, #0b0614); }
.gres.is-best{ background:radial-gradient(80% 60% at 50% 30%, rgba(255,201,60,.26), transparent 70%), radial-gradient(60% 50% at 50% 100%, rgba(157,255,46,.1), transparent 70%), linear-gradient(180deg, #24132e, #0b0614); }
.gr-card{ margin:auto; width:min(480px, 100%); display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.gr-card > *{ animation:grIn .5s cubic-bezier(.2,.9,.3,1.1) both; }
.gr-card > :nth-child(2){ animation-delay:.06s; } .gr-card > :nth-child(3){ animation-delay:.1s; } .gr-card > :nth-child(4){ animation-delay:.5s; }
.gr-card > :nth-child(5){ animation-delay:.62s; } .gr-card > :nth-child(6){ animation-delay:.74s; } .gr-card > :nth-child(7){ animation-delay:.86s; }
.gr-goop{ width:118px; filter:drop-shadow(0 12px 22px rgba(0,0,0,.5)); }
.gres .kick{ color:var(--mute); letter-spacing:.16em; } .gres.is-best .kick{ color:var(--gold); }
.gr-score{ font:400 88px/.9 var(--f-label); color:var(--lime); letter-spacing:.02em; text-shadow:0 0 30px rgba(157,255,46,.35), 0 4px 0 rgba(0,0,0,.35); font-variant-numeric:tabular-nums; }
.gres.is-best .gr-score{ color:var(--gold); text-shadow:0 0 34px rgba(255,201,60,.45), 0 4px 0 rgba(0,0,0,.35); }
.gr-vs{ font:600 14px/1.2 var(--f-head); color:var(--mute); padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.gr-vs.up{ color:#1b0f04; background:linear-gradient(180deg, #ffe08a, var(--gold)); border-color:transparent; box-shadow:0 6px 18px rgba(255,201,60,.3); }
.gr-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:4px 0 2px; }
.gr-chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); font-size:13px; color:var(--mute); }
.gr-chip b{ color:var(--ink); font-size:15px; }
.gr-ic{ width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--lime) 16%, transparent); color:var(--lime); }
.gr-ic svg{ width:14px; height:14px; }
.gr-pay{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 16px; }
.gr-ess{ display:inline-flex; align-items:center; gap:8px; font:600 18px/1 var(--f-head); color:var(--ink); padding:8px 16px 8px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,201,60,.18), rgba(255,201,60,.06)); border:1px solid rgba(255,201,60,.35); }
.gr-ess b{ font-size:24px; color:var(--gold); } .gr-ess svg, .gr-ess img{ width:24px; height:24px; }
.gr-xp{ font-size:13px; color:var(--dim); }
.gr-acts{ display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.gr-acts .btn.primary{ width:auto; min-width:min(320px, 100%); max-width:100%; white-space:nowrap; justify-content:center; }
.gr-acts .btn svg{ width:18px; height:18px; }
.gr-fly{ position:fixed; z-index:130; width:22px; height:22px; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.gr-fly svg, .gr-fly img{ width:22px; height:22px; display:block; }
.coinpill.gr-hit{ animation:grHit .45s ease-out; }
@keyframes grIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes grHit{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); box-shadow:0 0 0 4px rgba(255,201,60,.35); } 100%{ transform:scale(1); } }
/* when the keeper's last tap (the game's Continue) is where a results button would be, the host (clearOfTap in dailies.js)
   moves the buttons up under the score, so another tap on that spot lands on text and not on Play again */
.gstage .gr-card.acts-up > *{ order:3; }
.gstage .gr-card.acts-up > .gr-goop, .gstage .gr-card.acts-up > .kick, .gstage .gr-card.acts-up > .gr-score, .gstage .gr-card.acts-up > .gr-vs{ order:0; }
.gstage .gr-card.acts-up > .gr-acts{ order:1; margin:6px 0 10px; }
.gstage .jobslip.acts-up > *{ order:3; }
.gstage .jobslip.acts-up > .sl-top, .gstage .jobslip.acts-up > h2, .gstage .jobslip.acts-up > .sl-scorerow{ order:0; }
.gstage .jobslip.acts-up > .sl-acts{ order:1; margin:2px 0 6px; }
@media (max-width:640px){ .gr-acts .btn.primary{ font-size:15.5px; white-space:nowrap; padding-inline:14px; } .gr-score{ font-size:72px; } .gr-goop{ width:92px; } .gr-chip{ font-size:12px; } .gr-chip b{ font-size:14px; } .gr-card{ gap:7px; } }

/* jobs: the brief is one compact strip; the slip scrolls inside the stage when it is taller than the box */
.jobwork .jobbrief{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:10px 14px !important; margin-bottom:12px; }
.jobwork .jb-who{ align-items:center; } .jobwork .jb-who img{ width:44px; height:44px; }
.jobwork .jb-who p{ font-size:14px; line-height:1.35; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.jobwork .jb-stats{ grid-template-columns:repeat(4, auto); gap:8px; }
.jobwork .jb-stats > div{ padding:6px 12px; gap:1px; min-width:86px; }
.jobwork .jb-stats b{ font-size:15px; } .jobwork .jb-stats .small.dim{ font-size:11px; letter-spacing:.04em; }
.jobwork .gstage{ --gsc:var(--job); }
@media (max-width:900px){ .jobwork .jobbrief{ grid-template-columns:1fr; gap:8px; } .jobwork .jb-stats{ grid-template-columns:repeat(4, minmax(0,1fr)); } .jobwork .jb-stats > div{ min-width:0; } }
@media (max-width:640px){ .jobwork .jb-who p{ -webkit-line-clamp:1; font-size:13px; } .jobwork .jb-who img{ width:34px; height:34px; } .jobwork .jb-who .kick{ font-size:10px; }
  .jobwork .jb-stats > div{ padding:5px 4px; } .jobwork .jb-stats b{ font-size:13px; } .jobwork .jb-stats .small.dim{ font-size:9.5px; } .jobwork .jobbrief{ padding:8px 10px !important; margin-bottom:8px; } }
.jobslip-wrap{ place-items:start center; overscroll-behavior:contain; }
.jobslip{ margin:auto; }
.sl-acts{ justify-content:center; }
/* the slip gets a rubber stamp, and the pay counts up */
.sl-scorerow{ position:relative; }
.sl-stamp{ position:absolute; top:50%; right:2px; z-index:2; margin-top:-17px; padding:5px 9px 3px; font:400 20px/1 var(--f-label); letter-spacing:.12em; color:#2f8f3a; border:3px solid currentColor; border-radius:8px;
  transform:rotate(-12deg); opacity:.85; mix-blend-mode:multiply; animation:slStamp .42s .55s cubic-bezier(.3,1.7,.5,1) both; pointer-events:none; }
.sl-stamp.no{ color:#b2453b; }
.jobslip.is-promo{ box-shadow:0 0 0 3px var(--job), 0 20px 60px rgba(0,0,0,.5), 0 0 60px color-mix(in srgb, var(--job) 45%, transparent); }
.sl-promo{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--job) 30%, #fff8e6), #fff4d6); border:1px solid color-mix(in srgb, var(--job) 45%, #e8d7b8); animation:slPromo .6s .3s cubic-bezier(.2,.9,.3,1.3) both; }
.sl-promo::after{ content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform:translateX(-100%); animation:slShine 1.4s .9s ease-out both; }
.sl-promo b{ font-size:16px; } .sl-promo .kick{ font-size:10.5px; }
.sl-badge{ width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:var(--job); color:#1a0f2a; box-shadow:0 0 0 4px #fff, 0 6px 16px rgba(0,0,0,.25); }
.sl-badge svg{ width:22px; height:22px; }
@keyframes slStamp{ from{ opacity:0; transform:rotate(-12deg) scale(2.4); } to{ opacity:.85; transform:rotate(-12deg) scale(1); } }
@keyframes slPromo{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:none; } }
@keyframes slShine{ to{ transform:translateX(100%); } }
@media (max-width:640px){ .sl-stamp{ font-size:16px; margin-top:-14px; padding:4px 7px 2px; border-width:2.5px; } }

/* while a game is on screen (body.inrun), toasts and notices stay off the stage: over the top bar on wide screens, over
   the tab bar on tablets and phones (where they sit in the managed dock, .gdock) */
@media (min-width:1061px){
  body.inrun .toasts{ top:calc(env(safe-area-inset-top, 0px) + 6px) !important; bottom:auto !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:min(940px, calc(100vw - 24px)) !important; z-index:120; display:flex !important; flex-direction:row; justify-content:center; align-items:flex-start; gap:10px; }
  body.inrun .toast{ flex:0 1 460px; min-width:0; min-height:0; max-height:56px; padding-top:6px !important; padding-bottom:6px !important; }
  body.inrun .notice{ top:calc(env(safe-area-inset-top, 0px) + 6px); bottom:auto; left:50%; right:auto; transform:translateX(-50%); width:min(460px, calc(100vw - 24px)); z-index:120; }
}
@media (min-width:641px) and (max-width:1060px){
  body.inrun .toasts{ top:auto !important; bottom:calc(env(safe-area-inset-bottom, 0px) + 4px) !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:min(460px, calc(100vw - 24px)) !important; z-index:120; }
  body.inrun .notice{ top:auto; bottom:calc(env(safe-area-inset-bottom, 0px) + 4px); left:50%; right:auto; transform:translateX(-50%); width:min(460px, calc(100vw - 24px)); z-index:120; }
}
@media (max-width:640px){
  body.inrun .gdock{ bottom:calc(env(safe-area-inset-bottom, 0px) + 4px); left:8px; right:8px; z-index:120; }
}
/* tablets and phones: the newest toast covers the tab bar, the one before it the top bar (never more than two show) */
@media (max-width:1060px){
  body.inrun .toasts{ transform:none !important; }
  body.inrun .toast{ position:fixed !important; z-index:121; left:50%; width:min(460px, calc(100vw - 16px)); margin-left:calc(min(460px, calc(100vw - 16px)) / -2); box-sizing:border-box;
    min-height:0; max-height:58px; padding-top:6px !important; padding-bottom:6px !important; }
  body.inrun .toast:nth-last-child(1){ top:auto; bottom:calc(env(safe-area-inset-bottom, 0px) + 4px); }
  body.inrun .toast:nth-last-child(2){ bottom:auto; top:calc(env(safe-area-inset-top, 0px) + 4px); }
  body.inrun .notice{ max-height:60px; overflow:hidden; padding:8px 12px; }
}
/* the Arcade page: the Shadow Over Goopville banner's goop is a dark silhouette on a night scene, so it gets a violet rim
   light and a glow behind it to read as clearly as the other banners */
.featcard.fc-shadow img{ background:radial-gradient(closest-side, rgba(176,120,255,.55), rgba(124,58,237,.22) 60%, transparent);
  border-radius:50%; filter:drop-shadow(0 0 1.5px #d9c2ff) drop-shadow(0 0 10px rgba(176,120,255,.9)) drop-shadow(0 8px 14px rgba(0,0,0,.55)) brightness(1.25); }
.featcard.fc-shadow:hover img{ filter:drop-shadow(0 0 2px #e6d6ff) drop-shadow(0 0 16px rgba(190,140,255,1)) drop-shadow(0 8px 14px rgba(0,0,0,.55)) brightness(1.35); }
/* motion off (the Settings switch sets .still on the stage) or asked for less by the device */
.gstage.still *, .gstage.still *::before, .gstage.still *::after{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){ .gstage *, .gstage *::before, .gstage *::after, .coinpill.gr-hit{ animation:none !important; transition:none !important; } }
/* ---- end arcade */
/* ---- Chase Da Goop: The Goopacalypse (beta): its page and the full-screen stage the game runs in */
.gq-hero{ position:relative; overflow:hidden; border-radius:var(--r2); border:1px solid rgba(201,173,114,.35); min-height:340px; display:grid; place-items:center; text-align:center;
  background:linear-gradient(180deg, rgba(6,8,10,.35) 0%, rgba(6,8,10,.55) 55%, rgba(6,8,10,.92) 100%), var(--bg) center 30%/cover no-repeat, #06080a; box-shadow:var(--shadow-lg); }
.gq-heroin{ position:relative; display:grid; justify-items:center; gap:12px; padding:28px 18px 24px; max-width:760px; }
.gq-logo{ width:min(520px, 86%); height:auto; filter:drop-shadow(0 10px 28px rgba(0,0,0,.7)); }
.gq-title{ margin:-4px 0 0; font-family:'Bebas Neue', var(--f-head); font-weight:400; font-size:clamp(34px, 7vw, 60px); line-height:1; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg, #fff6d6 0%, #ffd25a 45%, #c9ad72 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 10px rgba(0,0,0,.85)); }
.gq-tag{ margin:0; font-size:18px; color:#f0eedd; text-shadow:0 2px 10px rgba(0,0,0,.8); letter-spacing:.01em; }
.gq-chips{ justify-content:center; flex-wrap:wrap; gap:8px; }
.gq-chips .chip{ background:rgba(18,22,15,.78); border:1px solid rgba(201,173,114,.45); color:#f0eedd; padding:6px 12px; border-radius:999px; font-size:13px; backdrop-filter:blur(4px); }
.gq-chips .gq-beta{ background:linear-gradient(135deg, #ffd25a, #c9ad72); color:#1a1408; border-color:transparent; font-weight:800; }
.gq-heroin .row{ justify-content:center; flex-wrap:wrap; }
.gq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.gq-side{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.gq-side img{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:#12160f; flex:none; }
.gq-side.none img{ filter:grayscale(.7) brightness(.8); }
.gq-list{ margin:0; padding-left:20px; display:grid; gap:6px; }
.gq-note{ margin-top:16px; }
@media (max-width:760px){ .gq-grid{ grid-template-columns:1fr; } .gq-hero{ min-height:300px; } .gq-tag{ font-size:16px; } }
/* the stage covers the whole screen, the site's top bar, tab bar and notices included */
body.gq-open{ overflow:hidden; }
body.gq-open .gdock{ display:none !important; }
.gq-stage{ position:fixed; inset:0; z-index:1100; display:grid; grid-template-rows:auto 1fr; background:#06080a; color:#f0eedd;
  padding:env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.gq-bar{ display:flex; align-items:center; gap:10px; min-height:48px; padding:2px 8px; background:linear-gradient(180deg, #12160f, #0b0e09); border-bottom:1px solid rgba(201,173,114,.3); }
.gq-bar button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; min-width:44px; padding:0 12px; border-radius:12px;
  border:1px solid rgba(201,173,114,.4); background:rgba(255,255,255,.04); color:#f0eedd; font:inherit; font-weight:700; cursor:pointer; }
.gq-bar button:hover{ background:rgba(201,173,114,.16); }
.gq-bar button:focus-visible{ outline:3px solid #b4f53a; outline-offset:2px; }
.gq-mini{ height:34px; width:auto; margin-right:auto; }
.gq-status{ font-size:13px; color:#a9ae98; white-space:nowrap; }
.gq-status[data-kind="good"]{ color:#b4f53a; } .gq-status[data-kind="bad"]{ color:#ff8a9a; }
.gq-wrap{ position:relative; min-height:0; }
.gq-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#06080a; }
.gq-load{ position:absolute; inset:0; z-index:1; display:grid; place-content:center; justify-items:center; gap:14px; background:#06080a; transition:opacity .35s ease; }
.gq-load img{ width:min(360px, 70vw); height:auto; }
.gq-load .gq-slow{ max-width:300px; text-align:center; line-height:1.4; padding:0 16px; }
.gq-spin{ width:34px; height:34px; border-radius:50%; border:3px solid rgba(180,245,58,.25); border-top-color:#b4f53a; animation:gqspin .9s linear infinite; }
@keyframes gqspin{ to{ transform:rotate(360deg); } }
.gq-stage.ready .gq-load{ opacity:0; pointer-events:none; }
@media (max-width:520px){ .gq-mini{ height:26px; } .gq-bar button span{ display:none; } }
@media (prefers-reduced-motion:reduce){ .gq-spin{ animation-duration:2.4s; } .gq-load{ transition:none; } }
html.calm .gq-spin{ animation-duration:2.4s; } html.calm .gq-load{ transition:none; }
.featcard.fc-goopa{ border-color:rgba(201,173,114,.55); }
.featcard.fc-goopa img{ object-fit:contain; filter:drop-shadow(0 0 14px rgba(180,245,58,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.featcard.fc-goopa .kick{ color:#ffd25a; }
.legal h2{ font-size:20px; line-height:1.25; margin:6px 0 0; }
.legal p a, .legal li a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.gq-h{ font-size:20px; line-height:1.25; margin:0; }
.gq-heroin .gq-logo{ max-height:min(300px, 36vh); width:auto; max-width:86%; }
.gq-ask{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:16px; background:rgba(6,8,10,.72); backdrop-filter:blur(3px); }
.gq-ask[hidden]{ display:none; }
.gq-askbox{ width:min(420px, 100%); display:grid; gap:10px; padding:20px; border-radius:16px; background:#12160f; border:1px solid rgba(201,173,114,.55); box-shadow:0 20px 50px rgba(0,0,0,.6); }
.gq-askbox b{ font-size:19px; } .gq-askbox p{ margin:0; color:#a9ae98; }
.gq-askbox .row{ gap:10px; flex-wrap:wrap; }
.gq-askbox button{ min-height:44px; padding:0 18px; border-radius:12px; font:inherit; font-weight:800; cursor:pointer; border:1px solid rgba(201,173,114,.5); background:rgba(255,255,255,.05); color:#f0eedd; }
.gq-askbox .gq-askno{ background:linear-gradient(180deg, #c6ff5e, #8fd422); color:#10200a; border-color:transparent; }
.gq-askbox button:focus-visible{ outline:3px solid #b4f53a; outline-offset:2px; }
.gq-bar .gq-reload[hidden]{ display:none; }
/* a phone turned sideways: the bar becomes a slim rail on the left, so the game keeps the whole height */
@media (orientation:landscape) and (max-height:540px){
  .gq-stage{ grid-template-columns:auto 1fr; grid-template-rows:1fr; }
  .gq-bar{ flex-direction:column; justify-content:flex-start; min-height:0; width:56px; padding:6px 4px; border-bottom:0; border-right:1px solid rgba(201,173,114,.3); }
  .gq-bar button{ padding:0; width:46px; } .gq-bar button span{ display:none; }
  .gq-mini{ display:none; } .gq-status{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; margin:auto 0; white-space:nowrap; overflow:hidden; max-height:60%; }
  /* the page: logo on the left, title and Play on the right, so Play is on the first screen */
  .gq-hero{ min-height:0; place-items:stretch; text-align:left; }
  .gq-heroin{ grid-template-columns:auto 1fr; justify-items:start; align-items:center; column-gap:16px; row-gap:6px; padding:12px 16px; max-width:none; }
  .gq-heroin .gq-logo{ grid-row:1 / span 3; max-height:132px; max-width:34vw; }
  .gq-title{ font-size:30px; margin:0; } .gq-tag{ font-size:14px; } .gq-chips{ display:none; } .gq-heroin .row{ justify-content:flex-start; }
}
/* ---- end Goopacalypse */

/* ---- the daily Prize Pot meter (Arcade, Jobs) */
.potmeter{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; align-items:center; padding:12px 14px; border-radius:16px; background:rgba(255,210,63,.08); border:1px solid rgba(255,210,63,.28); }
.potmeter .pm-ic{ grid-row:span 2; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:rgba(255,210,63,.18); color:var(--gold, #ffd23f); }
.potmeter .pm-ic svg{ width:18px; height:18px; }
.potmeter .pm-tx{ display:grid; gap:2px; min-width:0; }
.potmeter .pm-bar{ grid-column:2; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.potmeter .pm-bar i{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #ffb02e, #ffd23f); transition:width .4s ease; }
.gr-pot{ display:block; width:100%; text-align:center; }

/* ======================================================================================================================
   THE SLAB LAB AND THE COLLECTOR'S CABINET
   ====================================================================================================================== */
/* a slab: a clear acrylic case, a printed label on top with the grade, the card sealed in the window below */
.slab{ position:relative; display:grid; grid-template-rows:auto minmax(0,1fr); gap:5%; width:100%; aspect-ratio:5/7.4; padding:7% 8% 8%; border-radius:12%/8.5%;
  background:linear-gradient(155deg, rgba(255,255,255,.34), rgba(214,228,255,.12) 38%, rgba(255,255,255,.06) 62%, rgba(255,255,255,.22)), rgba(30,22,48,.55);
  border:1.5px solid rgba(255,255,255,.62); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12), inset 0 -10px 18px rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.45); container-type:inline-size; overflow:hidden; }
.slab::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(115deg, rgba(255,255,255,.45) 0%, transparent 24%, transparent 72%, rgba(255,255,255,.16) 100%); }
.slab .sl-lbl{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:4%; padding:5% 6%; border-radius:6cqw; background:var(--lb); color:var(--lf);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18); }
.slab .sl-lbl b{ font:800 9cqw/1 var(--f-head); letter-spacing:.04em; color:#c8102e; }
.slab.gem .sl-lbl b{ color:#8a1200; }
.slab .sl-lbl i{ font:700 7.4cqw/1.05 var(--f-head); font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slab .sl-lbl em{ font:800 13cqw/1 var(--f-head); font-style:normal; }
.slab .sl-card{ position:relative; display:grid; place-items:center; min-height:0; border-radius:7cqw; border:3px solid var(--rc); overflow:hidden;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--tc) 55%, transparent), transparent 80%), linear-gradient(170deg, color-mix(in srgb, var(--rc) 30%, #1a0f2a), #130a1f 70%); }
.slab .sl-card img{ width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
.slab.gem{ border-color:rgba(255,226,120,.9); box-shadow:inset 0 0 0 2px rgba(255,226,120,.25), 0 0 18px rgba(255,210,63,.35), 0 8px 18px rgba(0,0,0,.45); }
.slab.gem::before{ content:""; position:absolute; inset:-40%; pointer-events:none; z-index:2; background:linear-gradient(105deg, transparent 42%, rgba(255,240,170,.55) 50%, transparent 58%);
  transform:translateX(-60%); animation:slabsheen 4.2s ease-in-out infinite; }
@keyframes slabsheen{ 0%,55%{ transform:translateX(-60%); } 85%,100%{ transform:translateX(60%); } }
html.calm .slab.gem::before{ animation:none; display:none; }
.slab.big{ max-width:230px; margin:0 auto; }
.ic .slab, .cab-ic .slab, .sb-mi .slab{ width:auto; height:100%; margin:0 auto; }

/* the Slab Lab page */
.sb-split{ align-items:start; }
.sb-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
.sb-pick{ display:grid; gap:4px; justify-items:center; padding:10px 8px; border-radius:16px; border:2px solid color-mix(in srgb, var(--rc) 45%, transparent); background:var(--panel2, rgba(46,27,70,.8));
  color:var(--ink); font:inherit; cursor:pointer; text-align:center; transition:transform .15s, border-color .15s; min-width:0; }
.sb-pick:hover{ transform:translateY(-2px); border-color:var(--rc); }
.sb-pick.on{ border-color:var(--lime); box-shadow:0 0 0 3px rgba(157,255,46,.25); }
.sb-pick .sb-im{ width:62px; height:62px; display:grid; place-items:center; }
.sb-pick img{ width:100%; height:100%; object-fit:contain; }
.sb-pick .sb-nm{ font:700 13px/1.15 var(--f-head); overflow-wrap:anywhere; }
.sb-pick .sb-meta{ display:flex; gap:6px; font-size:12px; color:var(--mute); }
.sb-pick .rarline{ color:var(--rc); font-weight:700; }
.sb-desk{ position:sticky; top:84px; }
@media (max-width:899px){ .sb-desk{ position:static; } }
.sb-preview{ display:grid; place-items:center; padding:6px 0 2px; }
.sb-preview .slab em{ color:#8b7daa; }
.sb-odds{ display:grid; gap:4px; }
.sb-odd{ display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:6px 10px; border-radius:10px; background:rgba(255,255,255,.04); font-size:14px; }
.sb-g{ display:grid; place-items:center; width:28px; height:22px; border-radius:6px; background:#cfc6e6; color:#2a1a40; font:800 13px/1 var(--f-head); }
.sb-g[data-g="10"]{ background:#ffd23f; color:#3a2600; } .sb-g[data-g="9"]{ background:#e9e3ff; }
.sb-reg{ display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:10px; }
.sb-cell{ display:grid; gap:4px; justify-items:center; text-align:center; min-width:0; }
.sb-cell .sb-cn{ font-size:11px; line-height:1.15; color:var(--mute); overflow-wrap:anywhere; }
.sb-empty{ display:grid; place-items:center; width:100%; aspect-ratio:5/7.4; border-radius:12%/8.5%; border:1.5px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03); }
.sb-empty img{ width:60%; filter:brightness(0) opacity(.35); }
.sb-miles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:8px; }
.sb-mile{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; padding:8px 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line, rgba(255,255,255,.1)); }
.sb-mile .sb-mi{ width:44px; height:52px; display:grid; place-items:center; }
.sb-mile:not(.got) .sb-mi{ filter:grayscale(1) brightness(.6); }
.sb-mile.got{ border-color:rgba(255,210,63,.45); background:rgba(255,210,63,.08); }
.sb-mine{ display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:14px; }
.sb-own{ display:grid; gap:6px; justify-items:center; text-align:center; }
.sb-own .slab{ max-width:118px; }

/* grading: the card under the loupe, then the subgrades and the stamp */
.sbmodal .sbr-stage{ position:relative; width:min(230px, 62vw); }
.sbr-stage .slab .sl-lbl em, .sbr-stage .slab .sl-lbl b{ transition:opacity .3s; }
.sbr-stage:not(.done) .slab .sl-lbl em{ opacity:0; }
.sbr-loupe{ position:absolute; left:50%; top:58%; width:46%; aspect-ratio:1; margin:-23% 0 0 -23%; border-radius:50%; border:5px solid #2a1a40; background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(200,230,255,.12) 55%, transparent 70%);
  box-shadow:0 0 0 2px rgba(255,255,255,.4), 0 10px 20px rgba(0,0,0,.4); animation:sbloupe 2.2s ease-in-out infinite; }
.sbr-loupe::after{ content:""; position:absolute; right:-28%; bottom:-28%; width:38%; height:12%; border-radius:6px; background:#2a1a40; transform:rotate(45deg); }
@keyframes sbloupe{ 0%{ transform:translate(-30%, -20%); } 25%{ transform:translate(30%, -25%); } 50%{ transform:translate(25%, 25%); } 75%{ transform:translate(-30%, 20%); } 100%{ transform:translate(-30%, -20%); } }
.sbr-stage.done .sbr-loupe{ display:none; }
.sbr-stage.done .slab{ animation:sbstamp .5s cubic-bezier(.3,1.6,.5,1) 1; }
@keyframes sbstamp{ 0%{ transform:scale(1.08); filter:brightness(1.5); } 100%{ transform:none; filter:none; } }
html.calm .sbr-loupe, html.calm .sbr-stage.done .slab{ animation:none; }
.sbr-subs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; width:100%; max-width:340px; }
.sbr-sub{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.05); overflow:hidden; opacity:.35; transition:opacity .25s; }
.sbr-sub.on{ opacity:1; }
.sbr-sub i{ position:absolute; left:0; bottom:0; height:3px; width:calc(var(--v) * 100%); background:linear-gradient(90deg, #9dff2e, #ffd23f); transform-origin:left; transform:scaleX(0); transition:transform .4s ease; }
.sbr-sub.on i{ transform:scaleX(1); }
.sbr-grade{ margin:0; font:400 clamp(26px, 6vw, 34px)/1 var(--f-display); color:var(--lime); text-shadow:0 3px 0 var(--plum); }

/* the Collector's Cabinet: lit glass shelves */
.cab-head{ gap:16px; flex-wrap:wrap; }
.cab-meter{ display:block; flex:1 1 200px; max-width:320px; height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.cab-meter > span{ display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #ffb02e, #ffd23f); }
.cab-shelf{ display:grid; gap:10px; }
.cab-sh-head h3{ margin:0; }
.cab-glass{ position:relative; padding:18px 16px 0; border-radius:20px 20px 10px 10px; border:1px solid rgba(255,255,255,.14);
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,240,200,.14), transparent 60%), linear-gradient(180deg, rgba(40,26,64,.9), rgba(24,14,40,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 40px rgba(0,0,0,.35); }
.cab-glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(105deg, rgba(255,255,255,.08) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.05) 100%); }
.cab-row{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:16px 12px; align-items:end; padding-bottom:12px; }
.cab-piece{ display:grid; gap:6px; justify-items:center; text-align:center; min-width:0; outline-offset:4px; border-radius:10px; }
.cab-piece .cab-ic{ width:72px; height:84px; display:grid; place-items:center; filter:drop-shadow(0 8px 6px rgba(0,0,0,.45)); }
.cab-piece .slab{ max-width:72px; }
.cab-piece .cab-nm{ font:600 11.5px/1.15 var(--f-head); color:var(--mute); overflow-wrap:anywhere; }
.cab-piece.miss .cab-ic, .cab-piece.miss .cab-sil{ filter:brightness(0) opacity(.32); }
.cab-sil{ display:grid; place-items:center; width:72px; aspect-ratio:5/7.4; border-radius:9px; border:1.5px dashed rgba(255,255,255,.4); }
.cab-sil img{ width:70%; }
.cab-plank{ height:14px; margin:0 -16px; border-radius:0 0 10px 10px; background:linear-gradient(180deg, #8a5a2e, #5a3415 60%, #3a1f0a); box-shadow:0 6px 14px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,220,160,.35); }

/* ---- Back up your goops (Settings) */
.bk-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.bk-codebox{ display:grid; gap:6px; }
.bk-codebox textarea, .bk-restore textarea{ width:100%; font:500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break:break-all; resize:vertical; }
.bk-restore summary{ cursor:pointer; font-weight:700; color:var(--mute); padding:4px 0; }
/* My House bar: Arrange, Carpenter and Cabinet fit a phone; on the narrowest screens the buttons drop under the room name */
.hbar{ flex-wrap:wrap; row-gap:8px; }
.hbar > .stack{ flex:1 1 140px; }
.hbtns{ flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:480px){ .hbtns{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; } .hbtns .btn{ padding-left:6px; padding-right:6px; justify-content:center; min-width:0; } }

/* keyboard players: a game's canvas shows where focus is, like every other control */
#gamehost canvas:focus-visible, .gstage canvas:focus-visible{ outline:3px solid var(--lime) !important; outline-offset:-3px; }   /* (the games set outline:none inline) */
/* a phone held sideways, on a game: the game gets the whole screen height (the top bar and the tab bar step aside until the phone
   turns back), instead of a 280 × 175 box between them */
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
  :root:has(.gstage){ --topbar:0px; }
  body:has(.gstage) .topbar, body:has(.gstage) .tabbar{ display:none !important; }
  .gstage{ --gs-tab:0px; }
  .gstage .gamehost, .jobwork .gstage .gamehost.jobhost{ width:100%; min-width:0; aspect-ratio:auto; max-height:none; height:calc(100dvh - var(--gs-bar) - 12px); border-radius:16px; }
}

/* the goop page: a needs strip right by the care buttons (phones; wide screens show the full needs panel beside), a wish line */
.gn-strip{ padding:10px 12px; border-radius:14px; background:rgba(13,7,22,.5); border:1px solid rgba(255,255,255,.08); }
.gn-strip .mneed b{ height:8px; }
.gn-strip .mneed.changed b{ box-shadow:0 0 0 2px color-mix(in srgb, var(--c) 50%, transparent), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.gn-strip .mneed u{ transition:width .9s cubic-bezier(.2,.9,.25,1); }
@media (min-width:901px){ .gn-strip{ display:none; } }
.gwish{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:16px; background:linear-gradient(135deg, rgba(255,210,63,.16), rgba(164,107,255,.12)); border:1px solid rgba(255,210,63,.45); }
.gwish > span:last-child{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.gwish .gw-ic{ flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgba(255,210,63,.2); color:var(--gold, #ffd23f); animation:gwBob 2.4s ease-in-out infinite; }
.gwish .gw-ic svg{ width:18px; height:18px; }
@keyframes gwBob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.actions .btn.wished{ border-color:var(--gold, #ffd23f); box-shadow:0 0 0 2px rgba(255,210,63,.35), 0 0 16px rgba(255,210,63,.3); }
@media (prefers-reduced-motion:reduce){ .gwish .gw-ic{ animation:none; } }

/* Goop Jobs: the next rank's perk, the top of the ladder; a Legend's title in gold on the keeper card */
.job-perk{ margin:0; } .job-perk.top{ display:flex; align-items:center; gap:6px; color:var(--gold, #ffd23f); font-weight:700; } .job-perk.top svg{ width:16px; height:16px; }
.kc-title.legend{ display:inline-flex; align-items:center; gap:6px; color:var(--gold, #ffd23f); text-shadow:0 0 12px rgba(255,210,63,.4); } .kc-title.legend svg{ width:18px; height:18px; }

/* a phone held sideways, in a game: the tab bar has stepped aside, so a toast at the bottom would sit on the game (the hand of
   cards, the chutes). The newest toast sits small over the game's title instead, clear of Pause and the game itself. */
@media (orientation:landscape) and (max-height:540px) and (pointer:coarse){
  body.inrun .toast{ left:8px !important; right:auto !important; margin-left:0 !important; width:min(320px, calc(45vw - 12px)) !important; max-height:none !important; overflow:hidden; padding-top:5px !important; padding-bottom:5px !important; }
  body.inrun .toast:nth-last-child(1){ top:calc(env(safe-area-inset-top, 0px) + 4px) !important; bottom:auto !important; }
  body.inrun .toast:not(:nth-last-child(1)){ display:none !important; }
  body.inrun .toast .tx{ min-width:0; font-size:13px; line-height:1.25; }
  body.inrun .toast .tx > *{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* ---------- Slab Lab: Shiny and Full Art slabs, the slab viewer, the Gem Mint moment */
.slab .sl-lbl i small{ display:block; font:800 5.6cqw/1 var(--f-head); letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:2px; }
.slab.v-foil{ border-color:transparent; background:linear-gradient(var(--slab-bg, rgba(225,235,255,.14)), var(--slab-bg, rgba(225,235,255,.14))) padding-box, linear-gradient(135deg, #ff9ae0, #ffe27a, #8fe6ff, #c48aff) border-box; }
.slab.v-foil .sl-lbl{ background:linear-gradient(100deg, #ffd6f3, #fff3c4 45%, #d4f6ff); }
.slab.v-full{ border-color:transparent; background:linear-gradient(var(--slab-bg, rgba(225,235,255,.14)), var(--slab-bg, rgba(225,235,255,.14))) padding-box, linear-gradient(135deg, #fff3b0, #ffb52e, #ff4fd8, #ffe27a) border-box; }
.slab.v-full .sl-lbl{ background:linear-gradient(100deg, #fff3c4, #ffd76a); }
button.sb-own{ background:none; border:0; color:inherit; padding:0; cursor:pointer; text-align:center; font:inherit; }
button.sb-own:focus-visible{ outline:3px solid var(--lime); outline-offset:4px; border-radius:12px; }
.sb-pick.v-foil{ background:linear-gradient(120deg, rgba(255,154,224,.12), rgba(143,230,255,.12)), var(--panel2); }
.sb-pick.v-full{ background:linear-gradient(120deg, rgba(255,215,106,.16), rgba(255,79,216,.1)), var(--panel2); }
.sbv{ display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:24px; align-items:center; }
@media (max-width:640px){ .sbv{ grid-template-columns:1fr; } }
.sbv-stage{ perspective:900px; display:grid; place-items:center; }
.sbv-tilt{ position:relative; width:min(280px, 70vw); transition:transform .18s ease-out; transform-style:preserve-3d; }
.sbv-tilt .slab.big{ max-width:none; }
.sbv-glare{ position:absolute; inset:0; border-radius:12%/8.5%; pointer-events:none; opacity:0; transition:opacity .2s; background:radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.45), transparent 45%); mix-blend-mode:overlay; }
.sbv-pop{ display:grid; gap:8px; padding:12px 14px; border-radius:14px; background:var(--panel2); border:1px solid var(--line2); }
.sbv-pops{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.sbv-pops span{ display:grid; justify-items:center; gap:2px; padding:8px 4px; border-radius:10px; background:rgba(0,0,0,.25); }
.sbv-pops span.on{ background:color-mix(in srgb, var(--gold) 22%, rgba(0,0,0,.25)); box-shadow:inset 0 0 0 1px var(--gold); }
.sbv-pops b{ font:800 18px/1 var(--f-head); } .sbv-pops small{ font-size:11px; color:var(--muted); }
.sbr-stage{ position:relative; }
.sbr-gemfx{ position:absolute; left:50%; top:45%; width:0; height:0; pointer-events:none; z-index:5; }
.sbr-gemfx i{ position:absolute; width:10px; height:10px; margin:-5px; border-radius:2px; background:linear-gradient(135deg, #fff, #ffd23f); transform:rotate(var(--a)) translateY(0) scale(0); opacity:0; }
.gem .sbr-gemfx i{ animation:sbr-burst 1.3s cubic-bezier(.2,.7,.3,1) var(--d) both; }
@keyframes sbr-burst{ 0%{ transform:rotate(var(--a)) translateY(0) scale(.2); opacity:1; } 70%{ opacity:1; } 100%{ transform:rotate(var(--a)) translateY(-190px) scale(1) rotate(160deg); opacity:0; } }
.gem .sbr-grade{ background:linear-gradient(90deg, #fff3b0, #ffd23f, #ff9ad8, #ffd23f); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 14px rgba(255,210,63,.6)); font-size:clamp(26px, 6vw, 38px); }
.gem .sbr-stage .slab{ animation:sbr-gemglow 1.6s ease-in-out infinite alternate; }
@keyframes sbr-gemglow{ from{ filter:drop-shadow(0 0 8px rgba(255,210,63,.4)); } to{ filter:drop-shadow(0 0 26px rgba(255,210,63,.85)); } }
html.calm .gem .sbr-gemfx i, html.calm .gem .sbr-stage .slab{ animation:none; }

/* the shelf packs use their printed wrappers */
.ccs-packart{ --ph:196px; }
@media (max-width:420px){ .ccs-packart{ --ph:176px; } }
.ccs-pa-foil.img{ aspect-ratio:5/8; height:calc(var(--ph) * 1.02); top:4px; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 26px color-mix(in srgb, var(--pa-glow) 40%, transparent); }
.ccs-pa-foil.img img{ display:block; width:100%; height:100%; object-fit:cover; }
.ccs-pa-sheen{ position:absolute; inset:-40% -60%; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.38) 48%, rgba(255,240,200,.15) 52%, transparent 60%); transform:translateX(-60%); animation:ccsSheen 4.5s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes ccsSheen{ 0%, 55%{ transform:translateX(-60%); } 85%, 100%{ transform:translateX(60%); } }
.ccs-pack:nth-child(2) .ccs-pa-sheen{ animation-delay:1.5s; } .ccs-pack:nth-child(3) .ccs-pa-sheen{ animation-delay:3s; }
html.calm .ccs-pa-sheen{ animation:none; display:none; }
@media (prefers-reduced-motion:reduce){ .ccs-pa-sheen{ animation:none; display:none; } }
.ccs-pa-card img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:9px; box-shadow:0 4px 12px rgba(0,0,0,.45); }
.ccs-pa-card{ top:30px; }