/* pip-store.css — Coin Store cosmetics on every page (2026-10-10). Injected next to
   pip-account.css by src/account/inject.js. The store page's own layout: /coin-store/coin-store.css. */

/* ---- coin chip skins (pip-store.js sets data-skin on .pipa-chip__coins) ---- */
.pipa-chip__coins[data-skin] { padding: 1px 7px; border-radius: 999px; }
.pipa-chip__coins[data-skin="neon"] { background: #16062a; color: #ffe9ff; box-shadow: inset 0 0 0 1.5px #ff3df2, 0 0 8px #22e6ff; }
.pipa-chip__coins[data-skin="ruby"] { background: linear-gradient(135deg, #ff6b81, #a4133c 60%, #ff8fa3); color: #fff; }
.pipa-chip__coins[data-skin="emerald"] { background: linear-gradient(135deg, #52d18a, #0b6e4f 60%, #74e3a6); color: #fff; }
.pipa-chip__coins[data-skin="gold"] { background: linear-gradient(135deg, #fff3b0, #e8b923 50%, #fff3b0); color: #3b2a00; background-size: 200% 100%; animation: pips-shine 3.5s linear infinite; }
.pipa-chip__coins[data-skin="diamond"] { background: linear-gradient(110deg, #e8f7ff 30%, #fff 45%, #bfe9ff 50%, #e8f7ff 65%); background-size: 250% 100%; color: #08324a; box-shadow: inset 0 0 0 1.5px #8fd3ff; animation: pips-shine 2.6s linear infinite; }
.pipa-chip__coins[data-skin="obsidian"] { background: linear-gradient(135deg, #111, #2b2b2b 55%, #111); color: #ffd76a; box-shadow: inset 0 0 0 1.5px #d4a017; }
.pipa-chip__coins[data-skin] b { color: inherit !important; }
@keyframes pips-shine { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---- Coin Store game frames (bought; equipped through the rewards panel like streak frames) ----
   [data-pip-demo="<id>"] is the store page's preview tile (no data-pip-skinned, so the page's
   own equipped frame never bleeds onto a preview). */
[data-pip-frame="marquee"] [data-pip-skinned], [data-pip-demo="marquee"] {
  border-radius: 16px;
  box-shadow: 0 0 0 6px #7a1020, 0 0 0 9px #ffd23f, 0 0 18px 6px #ffb70388;
  outline: 3px dotted #fff6c4; outline-offset: 4px; animation: pips-marquee 0.9s steps(2) infinite;
}
@keyframes pips-marquee { 50% { outline-color: #ffb703; } }
[data-pip-frame="ruby"] [data-pip-skinned], [data-pip-demo="ruby"] { border-radius: 16px; box-shadow: 0 0 0 3px #e8b923, 0 0 0 7px #a4133c, 0 0 0 9px #e8b923, 0 8px 24px #a4133c55; }
[data-pip-frame="emerald"] [data-pip-skinned], [data-pip-demo="emerald"] { border-radius: 18px; box-shadow: 0 0 0 7px #0b6e4f, 0 0 0 10px #c9a227, 0 8px 22px #0b6e4f66; }
[data-pip-frame="rainbow"] [data-pip-skinned], [data-pip-demo="rainbow"] { border-radius: 16px; animation: pips-rainbow 4s linear infinite; }
@keyframes pips-rainbow {
  0%, 100% { box-shadow: 0 0 0 4px #ff4d6d, 0 0 20px #ff4d6d88; }
  25% { box-shadow: 0 0 0 4px #ffd23f, 0 0 20px #ffd23f88; }
  50% { box-shadow: 0 0 0 4px #3bceac, 0 0 20px #3bceac88; }
  75% { box-shadow: 0 0 0 4px #5e60ce, 0 0 20px #5e60ce88; }
}
[data-pip-frame="aurora"] [data-pip-skinned], [data-pip-demo="aurora"] { border-radius: 18px; animation: pips-aurora 9s ease-in-out infinite; }
@keyframes pips-aurora {
  0%, 100% { box-shadow: 0 0 0 4px #0b1d3a, 0 0 26px 6px #3bceac99; }
  50% { box-shadow: 0 0 0 4px #0b1d3a, 0 0 26px 6px #9b5de599; }
}
[data-pip-frame="royal"] [data-pip-skinned], [data-pip-demo="royal"] { border-radius: 18px; box-shadow: 0 0 0 3px #f5d061, 0 0 0 9px #4a1466, 0 0 0 11px #f5d061, 0 10px 30px #4a146688; }
@media (prefers-reduced-motion: reduce) {
  [data-pip-frame] [data-pip-skinned], .pipa-chip__coins[data-skin] { animation: none !important; }
}

/* swatches for those frames in the rewards panel */
.pipa-frame--marquee { background: #7a1020; color: #ffd23f; outline: 2px dotted #ffd23f; outline-offset: -6px; }
.pipa-frame--ruby { background: linear-gradient(135deg, #ff8fa3, #a4133c); color: #fff; }
.pipa-frame--emerald { background: linear-gradient(135deg, #74e3a6, #0b6e4f); color: #fff; }
.pipa-frame--rainbow { background: linear-gradient(90deg, #ff4d6d, #ffd23f, #3bceac, #5e60ce); color: #fff; }
.pipa-frame--aurora { background: linear-gradient(160deg, #0b1d3a, #1b6f6a, #6a3d9a); color: #fff; }
.pipa-frame--royal { background: radial-gradient(circle at 30% 20%, #8e3bb3, #4a1466 70%); color: #f5d061; }
.pipa-panel :is(.pipa-frame--marquee, .pipa-frame--ruby, .pipa-frame--emerald, .pipa-frame--rainbow, .pipa-frame--aurora, .pipa-frame--royal) :is(span, small) { color: inherit !important; }

/* ---- rewards panel: store bits ---- */
.pipa-title { display: inline-block; margin-top: 2px; padding: 0 8px; border-radius: 999px; background: #1e1b4b; color: #ffe08a !important; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.pipa-store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pipa-boost { display: inline-flex; gap: 4px; align-items: center; padding: 2px 9px; border-radius: 999px; background: #e9f9ef; border: 1px solid #9fdcb6; font-size: .78rem; }
a.pipa-btn { text-decoration: none; display: inline-block; }

/* ---- big-win celebration canvas ---- */
.pips-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9600; }
.pip-stage > .pips-fx, :fullscreen > .pips-fx { position: absolute; }