/* pip-looks.css — Coin Store looks other people (or other pages) see (2026-10-10).
   Injected on every page next to pip-store.css by src/account/inject.js.
     .pipn--*            leaderboard name styles (public/js/pip-cosmetics.js)
     .pipb               leaderboard badges (same module)
     html[data-pip-reels] reel themes on the six slots games (public/js/pip-themes.js)
     body.pip-theme--*   home page themes (same module)
   [data-pip-reels-demo] = the Coin Store preview of a reel theme (same rules).
   Every animation stops under prefers-reduced-motion. */

/* ---- name styles: self-contained nameplates, readable on light and dark boards ---- */
.pipn { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pipn[class*="pipn--"] { position: relative; padding: 0 .45em; border-radius: 5px; font-weight: 800; letter-spacing: .01em; line-height: 1.5; }
/* gold + flame: the plate is the outer span, the foil/fire is clipped to the inner text span */
.pipn--gold { background: #2a1a05; box-shadow: inset 0 0 0 1px #b8860b; color: #ffd76a; }
.pipn--gold .pipn__t {
  background-image: linear-gradient(100deg, #e9b23a 0%, #fff1b8 22%, #f2c14e 40%, #d9a520 60%, #ffe28a 80%, #e9b23a 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: pipn-sheen 4s linear infinite;
}
@keyframes pipn-sheen { to { background-position: -220% 0; } }
.pipn--neon {
  background: #17061f; color: #ff8be0; box-shadow: inset 0 0 0 1px #ff3df266;
  text-shadow: 0 0 4px #ff3df2, 0 0 10px #ff3df2aa; animation: pipn-flicker 5s steps(1) infinite;
}
@keyframes pipn-flicker { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .55; } 93% { opacity: 1; } 95% { opacity: .7; } 96% { opacity: 1; } }
.pipn--flame { background: #1d0903; box-shadow: inset 0 -6px 8px -4px #ff4b2b88; color: #ffb02e; }
.pipn--flame .pipn__t {
  background-image: linear-gradient(0deg, #ff5a36 0%, #ff8a1f 35%, #ffd84a 65%, #fff4c2 100%);
  background-size: 100% 200%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: pipn-burn 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px #ff6a00aa);
}
@keyframes pipn-burn { from { background-position: 0 0; } to { background-position: 0 100%; } }
.pipn--glitch { background: #0c0c1c; color: #f4f4ff; box-shadow: inset 0 0 0 1px #3d3d6b; }
.pipn--glitch::before, .pipn--glitch::after {
  content: attr(data-text); position: absolute; inset: 0; padding: 0 .45em; overflow: hidden; pointer-events: none; background: #0c0c1c;
}
.pipn--glitch::before { color: #22e6ff; transform: translate(-1px, 0); clip-path: inset(0 0 60% 0); animation: pipn-glitch-a 2.8s steps(1) infinite; }
.pipn--glitch::after { color: #ff3df2; transform: translate(1px, 0); clip-path: inset(55% 0 0 0); animation: pipn-glitch-b 2.8s steps(1) infinite; }
@keyframes pipn-glitch-a { 0%, 86%, 100% { opacity: 0; } 87% { opacity: 1; transform: translate(-2px, 0); } 90% { opacity: 1; transform: translate(2px, 0); clip-path: inset(20% 0 40% 0); } 92% { opacity: 0; } }
@keyframes pipn-glitch-b { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; transform: translate(2px, 0); } 91% { opacity: 1; transform: translate(-2px, 0); clip-path: inset(70% 0 5% 0); } 93% { opacity: 0; } }

/* ---- badges ---- */
.pipb { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: middle; line-height: 0; }
.pipb svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 0 #0003); }

/* ---- reel themes: the six slots games, themed from outside (no game file edits) ---- */
html[data-pip-reels] :is(.lss-reels, .gv-window, .thh-window, .dpl-board, .nq-reels, .lwd-window), [data-pip-reels-demo] { border-radius: 12px; transition: filter .3s; }
html[data-pip-reels="neon"] :is(.lss-reels, .gv-window, .thh-window, .dpl-board, .nq-reels, .lwd-window), [data-pip-reels-demo="neon"] {
  box-shadow: 0 0 0 2px #fff0fb, 0 0 0 5px #ff3df2, 0 0 0 7px #14061f, 0 0 0 9px #22e6ff, 0 0 22px 6px #22e6ff66 !important;
}
html[data-pip-reels="gilded"] :is(.lss-reels, .gv-window, .thh-window, .dpl-board, .nq-reels, .lwd-window), [data-pip-reels-demo="gilded"] {
  box-shadow: 0 0 0 2px #fff3c4, 0 0 0 5px #d9a520, 0 0 0 7px #7a5200, 0 0 0 10px #f2c14e, 0 8px 22px #7a520088 !important;
}
html[data-pip-reels="frost"] :is(.lss-reels, .gv-window, .thh-window, .dpl-board, .nq-reels, .lwd-window), [data-pip-reels-demo="frost"] {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #9fdcff, 0 0 0 7px #2a6fa8, 0 0 0 9px #d8f2ff, 0 0 20px 6px #9fdcff88 !important;
}
html[data-pip-reels="neon"] .pip-reelwin, [data-pip-reels-demo="neon"].pip-reelwin { animation: pip-reel-neon 1.3s ease-out; }
html[data-pip-reels="gilded"] .pip-reelwin, [data-pip-reels-demo="gilded"].pip-reelwin { animation: pip-reel-gilded 1.3s ease-out; }
html[data-pip-reels="frost"] .pip-reelwin, [data-pip-reels-demo="frost"].pip-reelwin { animation: pip-reel-frost 1.3s ease-out; }
@keyframes pip-reel-neon {
  0% { filter: brightness(1.5) saturate(1.4); box-shadow: 0 0 0 2px #fff, 0 0 0 5px #22e6ff, 0 0 0 7px #14061f, 0 0 0 9px #ff3df2, 0 0 40px 14px #ff3df2aa !important; }
  50% { filter: brightness(1.2); box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff3df2, 0 0 0 7px #14061f, 0 0 0 9px #22e6ff, 0 0 40px 14px #22e6ffaa !important; }
}
@keyframes pip-reel-gilded {
  0% { filter: brightness(1.6) sepia(.35); box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ffe28a, 0 0 0 7px #7a5200, 0 0 0 10px #fff3c4, 0 0 44px 16px #ffd23fcc !important; }
  60% { filter: brightness(1.15); }
}
@keyframes pip-reel-frost {
  0% { filter: brightness(1.5) hue-rotate(-12deg) saturate(.7); box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ffffff, 0 0 0 7px #2a6fa8, 0 0 0 9px #ffffff, 0 0 44px 16px #d8f2ffdd !important; }
  60% { filter: brightness(1.1) saturate(.9); }
}

/* ---- home themes (body.pip-home only; catalog.css paints the home from these tokens).
   .pip-theme-demo--* = the Coin Store preview tile, same tokens. ---- */
body.pip-home.pip-theme--night, .pip-theme-demo--night {
  --color-console: #0a0f24; --color-console-2: #131a3a; --color-console-3: #27306a;
  --color-console-glow: #ff3df255; --color-console-text: #f1f4ff; --color-console-muted: #b5bde6;
  --color-accent: #3ff0ff;
  background-image: radial-gradient(ellipse 120% 40% at 50% -8%, #ff3df255, transparent 70%),
    linear-gradient(transparent 0 calc(100% - 1px), #27306a66 0), linear-gradient(90deg, transparent 0 calc(100% - 1px), #27306a44 0);
  background-size: 100% 100%, 100% 48px, 48px 100%; background-repeat: no-repeat, repeat, repeat;
}
body.pip-home.pip-theme--candy, .pip-theme-demo--candy {
  color-scheme: light;
  --color-console: #ffe1ee; --color-console-2: #fff4f9; --color-console-3: #f7a8cc;
  --color-console-glow: #7ff2d066; --color-console-text: #3a0b2b; --color-console-muted: #6e2752;
  --color-accent: #c2185b; --color-accent-deep: #8e0f43;
  background-image: radial-gradient(ellipse 120% 44% at 50% -10%, #7ff2d066, transparent 70%),
    radial-gradient(circle at 12px 12px, #ff9cc733 3px, transparent 4px);
  background-size: 100% 100%, 28px 28px; background-repeat: no-repeat, repeat;
}
body.pip-home.pip-theme--crt, .pip-theme-demo--crt {
  --color-console: #03170b; --color-console-2: #062412; --color-console-3: #11512a;
  --color-console-glow: #2bff7a33; --color-console-text: #b9ffcb; --color-console-muted: #7fe39a;
  --color-accent: #ffc23d;
  text-shadow: 0 0 6px #2bff7a40;
}
body.pip-home.pip-theme--crt::after {
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: repeating-linear-gradient(0deg, #00000030 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, #00000066 100%);
}

@media (prefers-reduced-motion: reduce) {
  .pipn, .pipn::before, .pipn::after, .pipn__t, .pip-reelwin { animation: none !important; }
  .pipn--glitch::before, .pipn--glitch::after { opacity: 0; }
}