/* THE SHOP (docs/shop-plan.md): the overlay, the top-bar button, the revive prompt, and the dialer skins.
   Motion is transform/opacity (plus a slow background drift on a few small elements for Holographic);
   the tilt runs on one card at a time; everything pauses when the tab is hidden. */

/* ---------- top bar ---------- */
#shopBtn { display: inline-flex; align-items: center; gap: 6px; }
#shopBtn img { width: 20px; height: 20px; }
#shopBtn b { font-variant-numeric: tabular-nums; }

/* the shop button glows (a soft gold halo that breathes; opacity only, so it costs nothing) */
#shopBtn { position: relative; border-color: rgba(255,210,63,.55); color: #ffe27a; }
#shopBtn::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 8px 1px rgba(255,200,60,.45), 0 0 16px 2px rgba(255,170,40,.18); animation: shopglow 6s ease-in-out infinite; }
@keyframes shopglow { 0%, 100% { opacity: .25; } 50% { opacity: .7; } }

/* the booster chip beside the streak pill on the board */
#shopBoost { display: inline-block; margin-top: 6px; margin-left: 6px; cursor: pointer; }
#shopBoost .ch-boost img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
#shopBoost .ch-boost .sep { margin: 0 6px; opacity: .6; }
#shopBoost .ch-boost { display: inline-block; font-size: 12px; white-space: nowrap; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: rgba(124,108,240,.08); }
#shopBoost .ch-boost.on { border-color: #a78bfa; color: #ddd6fe; box-shadow: 0 0 8px rgba(167,139,250,.35); }
#shopBoost:hover .ch-boost { border-color: #ffd23f; color: #ffe27a; }

/* ---------- the broken-streak notice: a small pop-up with an X ---------- */
.revivebar { position: fixed; right: 18px; bottom: 18px; z-index: 800; max-width: 360px; padding: 12px 38px 12px 12px; border-radius: 12px;
  background: #1c140e; border: 1px solid #f97316; box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 13px; font-weight: 600;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; animation: revin .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes revin { from { transform: translateY(16px); opacity: 0; } }
.revivebar img { width: 34px; height: 34px; }
.revivebar button { margin-left: auto; }
.revivebar .rx { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border-radius: 6px; line-height: 1;
  background: transparent; border: 0; color: var(--muted); font-size: 16px; margin: 0; }
.revivebar .rx:hover { color: #fff; background: rgba(255,255,255,.08); }

/* ---------- the overlay ---------- */
#shop { position: fixed; inset: 0; z-index: 900; background: #0b0f19; overflow-y: auto; }
#shop.hidden { display: none; }
#shop .sw { max-width: 1440px; margin: 0 auto; padding: 26px 32px 80px; }
#shop .stop { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#shop h1 { font-family: Anton, Impact, sans-serif; font-size: 52px; line-height: 1; margin: 0; text-transform: uppercase; transform: skewX(-6deg); }
#shop .ssub { color: #6fb6ff; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; margin-top: 6px; }
#shop .srefresh { font-weight: 800; font-size: 16px; margin-top: 8px; }
#shop .swallet { display: flex; gap: 10px; align-items: center; }
#shop .schip { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; }
#shop .schip img { width: 32px; height: 32px; }
#shop .schip small { display: block; color: var(--muted); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
#shop .schip .n { font-family: Anton, sans-serif; font-size: 26px; line-height: 1; }
#shop .sclose { font-size: 15px; padding: 10px 16px; }
#shop .spills { display: flex; gap: 8px; margin: 22px 0 6px; flex-wrap: wrap; }
#shop .spill { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 13px; font-weight: 800; font-size: 13px; }
#shop .spill.on { background: #fff; color: #0f1420; border-color: #fff; }
#shop section { margin-top: 30px; }
#shop h2 { font-family: Anton, sans-serif; font-size: 32px; text-transform: uppercase; margin: 0 0 12px; transform: skewX(-6deg); transform-origin: left; }
#shop h2 small { font-family: inherit; font-size: 12.5px; color: var(--muted); font-weight: 700; text-transform: none; margin-left: 10px; display: inline-block; }
#shop .sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
#shop .sgrid .scard.wide { grid-column: span 2; }
#shop .sbooster-now { margin: 0 0 12px; font-weight: 700; color: #ffd86b; }

.scard { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--panel); display: flex; flex-direction: column;
  min-height: 290px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.scard.live { transition: transform .08s linear, box-shadow .3s; will-change: transform; }
.scard:hover { box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.scard .art { position: relative; flex: 1; display: grid; place-items: start center; overflow: hidden; padding-top: 34px; padding-bottom: 96px; }
.scard .art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, var(--ra) 0%, var(--rb) 72%); }
.scard .art::after { content: ""; position: absolute; inset: -20%;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.09) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); }
.scard .art > img { position: relative; z-index: 1; width: 64%; max-width: 210px; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.scard:hover .art > img { transform: scale(1.06) translateY(-4px); }
.scard.wide .art > img { width: 46%; max-width: 250px; }
.scard .glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: hidden; }
.scard .glare::before { content: ""; position: absolute; width: 160%; height: 160%; left: -30%; top: -30%;
  background: radial-gradient(circle at center, rgba(255,255,255,.28), transparent 40%); transform: translate(var(--gx, 0), var(--gy, 0)); }
.scard:hover .glare { opacity: 1; }
.scard .label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 12px 10px;
  background: linear-gradient(to top, rgba(8,12,22,.78), rgba(8,12,22,.45) 70%, transparent); }
.scard .nm { font-family: Anton, sans-serif; font-size: 21px; line-height: 1.05; text-transform: uppercase; transform: skewX(-6deg); text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.scard.wide .nm { font-size: 29px; }
.scard .pr { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: Anton, sans-serif; font-size: 19px; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.scard .pr img { width: 23px; height: 23px; flex: none; }
.scard .was { text-decoration: line-through; opacity: .6; font-size: 15px; margin-left: 3px; }
.scard .raise { margin-top: 4px; display: inline-block; font-weight: 800; font-size: 12.5px; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 6px; }
.scard .raise b { color: #ffe27a; }
.scard .meta { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.scard .tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.45); }
.scard .tag.save { background: #16a34a; }
.scard .strip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #121826; font-weight: 800; font-size: 12.5px; }
.scard .strip.ok { color: #6ee07a; } .scard .strip.next { color: #ffd86b; } .scard .strip.lock { color: var(--muted); } .scard .strip.short { color: #ff9b7a; }
.scard.locked .art > img { filter: grayscale(.7) brightness(.75) drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.scard .lockbadge { position: absolute; z-index: 2; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%;
  background: rgba(8,12,22,.72); display: grid; place-items: center; font-size: 28px; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
/* bundles and skin previews sit in the middle of the space above the label */
.scard .art > .duo, .scard .art > .minid { align-self: center; }
.scard .duo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 4px; width: 88%; }
.scard .duo img { width: 48%; max-width: 165px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.scard .duo .plus { font-family: Anton, sans-serif; font-size: 32px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.scard .duoskin { width: 32%; } .scard .duoskin .minid { width: 100%; }
.scard.r-free     { --ra: #33415c; --rb: #1a2233; }
.scard.r-uncommon { --ra: #7fd22e; --rb: #1f6b14; }
.scard.r-rare     { --ra: #4fb6ff; --rb: #1b3f9a; }
.scard.r-epic     { --ra: #c86bff; --rb: #4a1a93; }
.scard.r-legend   { --ra: #ffc24b; --rb: #a8520a; }
.scard.r-mythic .art::before { background: #1a1030; }
.scard.r-mythic { box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 8px 26px rgba(160,90,255,.35); }
.scard .rainbow { position: absolute; inset: -50%; z-index: 0; background: conic-gradient(#ff4d6d, #ffb84d, #f9ff4d, #4dff88, #4dd2ff, #7a4dff, #ff4dd8, #ff4d6d);
  opacity: .75; animation: shopspin 8s linear infinite; }
@keyframes shopspin { to { transform: rotate(360deg); } }
.scard .pulse { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.35), transparent 55%);
  animation: shoppulse 3.2s ease-in-out infinite; }
@keyframes shoppulse { 0%, 100% { opacity: .15; } 50% { opacity: .55; } }
/* the mini dialer wearing a skin (skin cards) */
.minid { position: relative; z-index: 1; width: 84%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0f1420;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 22px rgba(0,0,0,.5); display: grid; grid-template-rows: 16% 5% 1fr; }
.minid .mt { background: #111827; display: flex; align-items: center; padding: 0 8%; font-family: Anton, sans-serif; font-size: 11px; letter-spacing: .5px;
  color: transparent; background-clip: text; -webkit-background-clip: text; }
.minid .mtw { background: #111827; }
.minid .mb, .minid .fill { background: var(--fill); background-size: var(--fsize); background-position: center; background-repeat: var(--frep); }
.minid .mbody { display: grid; grid-template-columns: 26% 1fr 34%; gap: 5%; padding: 7% 6%; }
.minid .col i { display: block; height: 5px; border-radius: 3px; background: #26304a; margin-bottom: 6px; }
.minid .btnm { width: 60%; height: 12px; border-radius: 4px; margin-top: 8px; }
.minid .cardm { position: relative; background: #151c2b; border-radius: 4px; padding: 5px 5px 5px 8px; }
.minid .cardm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fill); background-size: var(--fsize); background-position: center; }
.scard .prev { position: absolute; z-index: 4; right: 10px; top: 10px; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }
.scard .prev:hover { background: #fff; color: #0f1420; }

/* buy dialog */
#shopModal, #nonoModal { position: fixed; inset: 0; z-index: 950; background: rgba(5,8,15,.72); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
#shopModal.on, #nonoModal.on { opacity: 1; pointer-events: auto; }
#shopModal .box, #nonoModal .box { width: min(440px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transform: scale(.94); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
#shopModal.on .box, #nonoModal.on .box { transform: scale(1); }
#smArt .smcard .art { padding: 0; place-items: center; }
#smArt .smcard { min-height: 0; height: 240px; border-radius: 0; box-shadow: none; transform: none; cursor: default; }
#smArt .smcard .art > img { width: auto; height: 86%; max-width: 86%; }
#smArt .smcard .duo { height: 80%; }
#smArt .smcard .duo img { height: 100%; width: auto; }
#smArt .smcard .minid { width: 70%; }
#shopModal .body, #nonoModal .body { padding: 18px 20px 20px; }
#shopModal h3, #nonoModal h3 { font-family: Anton, sans-serif; font-size: 28px; margin: 0; text-transform: uppercase; transform: skewX(-6deg); }
#shopModal p, #nonoModal p { color: var(--muted); margin: 8px 0 16px; font-weight: 600; line-height: 1.45; }
#shopModal .row, #nonoModal .row { display: flex; gap: 10px; }
#shopModal .row button, #nonoModal .row button { flex: 1; padding: 12px; font-weight: 800; }
/* the board's no-no's pop-up (Chase 10/8) borrows this dialog: same box, title, line and button */
#nonoModal .box { width: min(520px, 92vw); max-height: 88vh; overflow-y: auto; }
#nonoModal .nn-list { margin: 0 0 18px; padding-left: 22px; line-height: 1.45; font-size: 14.5px; }
#nonoModal .nn-list li { margin: 0 0 6px; }
.chrow.haspop .ch-pop-i { color: var(--muted); font-size: 13px; margin-left: 4px; }
#shopModal .buy { background: #ffd23f; color: #1a1300; border-color: #ffd23f; }
#shopModal .buy[disabled] { background: #3a4254; color: var(--muted); border-color: #3a4254; cursor: not-allowed; }
.shopburst { position: fixed; z-index: 960; pointer-events: none; width: 12px; height: 12px; border-radius: 50%; background: #ffd23f; animation: shopburst .7s ease-out forwards; }
@keyframes shopburst { to { transform: translate(var(--bx), var(--by)) scale(.2); opacity: 0; } }

/* ---------- DIALER SKINS: only the frame changes; the script stays on its dark panel ---------- */
:root.skinned { --primary: var(--sk); --primary-hi: var(--sk2); }
:root.skinned #topbar { position: relative; }
:root.skinned #topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; z-index: 5; pointer-events: none;
  background: var(--fill); background-size: var(--bsize); background-position: center; background-repeat: var(--frep); }
:root.skinned button.primary, :root.skinned .chip.active, :root.skinned .acctoffer .acctyes, :root.skinned .chrow .ch-bar i, :root.skinned .pathbar i.on {
  background: var(--fill) !important; background-size: var(--fsize) !important; background-position: center !important; background-repeat: var(--frep) !important; }
:root.skinned button.primary, :root.skinned .chip.active, :root.skinned .acctoffer .acctyes {
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5); border-color: var(--sk2) !important; }
:root.skinned .chrow .ch-bar i, :root.skinned .pathbar i.on { box-shadow: 0 0 8px var(--sk) !important; }
:root.skinned #callerName { color: transparent; background: var(--fill); background-size: var(--fsize); background-position: center; background-repeat: var(--frep);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
:root.skinned.sk-glow #callerName { color: #e0fbff; background: none; text-shadow: 0 0 8px var(--sk), 0 0 18px var(--sk); filter: none; }
:root.skinned .mcard { border-left: 0; position: relative; padding-left: 4px; }
:root.skinned .mcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1;
  background: var(--fill); background-size: var(--fsize); background-position: center; background-repeat: var(--frep); }
:root.skinned.sk-dark button.primary, :root.skinned.sk-dark .chip.active { border-color: rgba(255,255,255,.55) !important; }
:root.skinned.sk-dark .chrow .ch-bar i, :root.skinned.sk-dark .pathbar i.on { box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 8px var(--sk) !important; }
:root.skinned.sk-dark #callerName { filter: drop-shadow(0 0 1px rgba(255,255,255,.7)) drop-shadow(0 0 6px var(--sk)); }
:root.skinned.sk-anim #topbar::after, :root.skinned.sk-anim button.primary, :root.skinned.sk-anim .chrow .ch-bar i, :root.skinned.sk-anim .pathbar i.on,
:root.skinned.sk-anim #callerName, :root.skinned.sk-anim .mcard::before { background-size: 200% auto !important; animation: skdrift 6s ease-in-out infinite alternate; }
@keyframes skdrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

body.tabhidden *, body.tabhidden *::before, body.tabhidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { #shop *, :root.skinned * { animation: none !important; transition: none !important; } }