/* Old-homepage look: twinkling star background, boxes floating on top. */
:root {
  --sky: #000033;
  --star: #ffffff;
  --ink: #ffff00;
  --text: #ffffff;
  --link: #00ffff;
  --panel: #000080;
  --edge: #c0c0c0;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: var(--text);
  font: 16px/1.4 "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Times New Roman", serif;
  background-color: var(--sky);
  /* the starfield lives on a fixed layer behind everything (see body::before) */
}

/* Fixed star background: stays put while the page scrolls over it.
   A fixed layer works on phones too, where background-attachment: fixed often doesn't. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--sky) url("deco/stars.gif");
  image-rendering: pixelated;
}

main { max-width: 720px; margin: 0 auto; padding: 16px; }

.center { text-align: center; }
.small { font-size: 13px; }

.banner-head { text-align: center; }
.banner-head .small { margin: 0; color: var(--link); }
h1 {
  margin: 4px 0;
  font-family: "Times New Roman", Times, serif;
  font-size: 48px;
  color: var(--ink);
  text-shadow: 3px 3px 0 #ff00ff;
}
.subtitle { margin: 0; color: #ff99ff; font-weight: bold; }

h2 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }

hr.rainbow {
  border: 0;
  height: 6px;
  margin: 16px 0;
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
}

.uc-bar { max-width: 100%; height: auto; image-rendering: pixelated; }

table.layout { width: 100%; border-spacing: 8px; }
table.layout td { vertical-align: top; width: 50%; }

.panel {
  background: var(--panel);
  border: 3px ridge var(--edge);
  padding: 10px;
  margin: 12px 0;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
}
table.layout .panel { margin: 0; }

label { display: block; margin-bottom: 8px; }
input {
  width: 100%; margin-top: 4px; padding: 4px;
  font: 14px "Courier New", Courier, monospace;
  color: #000; background: #fff; border: 2px inset var(--edge);
}
button {
  font: bold 14px Arial, Helvetica, sans-serif;
  padding: 3px 10px; cursor: pointer;
  color: #000; background: var(--edge); border: 2px outset #fff;
}
button:active { border-style: inset; }

.code {
  font: bold 20px "Courier New", Courier, monospace; letter-spacing: 1px; text-align: center;
  word-break: break-all; color: #000; background: #ffffcc; padding: 8px; border: 2px dashed #ff00ff;
}
.save { border-color: #ff00ff; }

#codes { padding-left: 20px; }
#codes li { margin-bottom: 4px; }
#codes button { font-size: 12px; padding: 0 6px; margin-left: 6px; }

#msg { min-height: 1.4em; font-weight: bold; color: #ff6666; }

.counter-box { margin: 8px 0; }
.counter {
  display: inline-block; margin-top: 4px; padding: 2px 6px;
  font: bold 20px "Courier New", Courier, monospace; letter-spacing: 4px;
  color: #00ff00; background: #000; border: 2px inset var(--edge);
}

table.webring {
  width: 100%; margin: 12px 0; border: 3px ridge var(--edge);
  background: var(--panel); border-collapse: collapse;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
}
table.webring td { padding: 6px; color: var(--link); }
table.webring td:last-child { text-align: right; }

/* ---------- logged-in views ---------- */

a { color: var(--link); }
a:visited { color: #ff99ff; }

.nav { text-align: center; }
.top-bar { text-align: center; font-size: 18px; margin: 0 0 8px; padding: 6px 0; }
.dash h2 { margin-bottom: 6px; }
.dash-list { margin: 0 0 8px; padding-left: 22px; }
.dash-list li { margin-bottom: 3px; }
.dash-cols { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.dash-side { border-left: 2px dashed var(--edge); padding-left: 12px; font-weight: bold; }
.dash-side input { font-weight: normal; }
.dash-side p { margin: 0 0 3px; }
.dash-side .visit { margin-top: 6px; }
.dash-side input { width: 150px; display: block; margin: 4px 0 6px; }
.dash-pic { display: inline-block; vertical-align: middle; margin-left: 4px; }
.dash-pic img.banner { display: block; }
@media (max-width: 560px) {
  .dash-cols { grid-template-columns: 1fr; }
  .dash-side { border-left: 0; border-top: 2px dashed var(--edge); padding: 8px 0 0; }
}
.top-ticker { margin: 0 0 14px; }
.ticker-label { position: relative; z-index: 1; float: left; padding: 0 6px; margin-right: 4px; color: #000; background: #ffff00; }
.collection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.collection-head h2 { margin: 0; }
.visit { margin-top: 8px; }
.visit input { display: inline-block; width: 140px; }

textarea, select {
  width: 100%; margin-top: 4px; padding: 4px;
  font: 14px "Courier New", Courier, monospace;
  color: #000; background: #fff; border: 2px inset var(--edge);
}

img.banner { display: block; image-rendering: pixelated; border: 2px solid transparent; }
img.rarity-uncommon { border-color: #00ffff; }
img.rarity-rare { border-color: #ffff00; }
img.rarity-ultra { border-color: #ff00ff; outline: 1px solid #ffffff; }
.card.rarity-ultra b, .variant { color: #ff99ff; font-weight: bold; }

.grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { display: flex; flex-direction: column; align-items: center; text-decoration: none; }

.pull-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 196px; padding: 8px; text-align: center;
  background: #000033; border: 3px ridge var(--edge);
}
.card.back {
  height: 120px; justify-content: center;
  font: bold 48px "Times New Roman", serif; color: var(--ink);
  background: repeating-linear-gradient(45deg, #000080 0 8px, #000060 8px 16px);
}
.card.pickable { cursor: pointer; }
.card.chosen {
  border: 4px solid #ffff00;
  background: #000066;
  box-shadow: 0 0 0 3px #ff00ff, 0 0 18px 6px #ffff00;
  animation: glow 0.8s ease-in-out infinite alternate;
}
.card.chosen::before {
  content: "\2605 KEEPING THIS 1 \2605";
  font: bold 13px Arial, Helvetica, sans-serif;
  color: #000; background: #ffff00; padding: 1px 6px; margin-top: -2px;
}
@keyframes glow {
  to { box-shadow: 0 0 0 3px #00ffff, 0 0 28px 10px #ff00ff; }
}
.radio { padding: 3px 6px; border: 2px solid transparent; }
.radio:has(input:checked) { border: 2px dashed #ffff00; background: #000066; }
.card.rarity-rare b { color: var(--ink); }
.bonus-card { justify-content: center; min-height: 120px; background: repeating-linear-gradient(45deg, #330066 0 8px, #220044 8px 16px); border-color: #ff00ff; }
.bonus-card b { color: #ffff00; }
.bonus-star { font-size: 32px; line-height: 1; }
.bonus-head b { color: #ffff00; }
.pull-form { max-width: 420px; margin: 8px auto 0; }
.gift-choices { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.radio { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.radio input { width: auto; margin: 0; }
.radio img.banner { display: inline-block; }

.sign-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.gift-chosen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; padding: 4px 6px; border: 2px dashed #ffff00; background: #000066; }
.gift-chosen img.banner { display: inline-block; }
button.mini { font-size: 12px; padding: 0 6px; }
.gift-picker { margin: 8px 0; background: #000033; }
.pick-tile { background: transparent; border: 2px solid transparent; padding: 2px; color: var(--text); cursor: pointer; }
.pick-tile:hover, .pick-tile:focus { border-color: #ffff00; }
h3 { margin: 10px 0 6px; font-size: 15px; color: var(--link); }
.pick-tile.picked { border-color: #ffff00; background: #000066; box-shadow: 0 0 6px #ffff00; }
.pick-tile.busy { opacity: 0.6; cursor: not-allowed; }
.trade-note { border-top-style: solid; }
.trade-note > p:first-child { color: #ffff00; font-weight: bold; }
.tr-item { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; vertical-align: middle; }
.tr-item img.banner { display: inline-block; }
#nav-trades.has-offers { color: #ffff00; font-weight: bold; }
.entry { border-top: 2px dashed var(--edge); padding-top: 6px; margin-top: 8px; }
.entry p { margin: 4px 0; }
.stamp { display: flex; align-items: center; gap: 6px; }
.log { padding-left: 24px; }
.ledger-list { font-size: 14px; padding-left: 32px; }
.ledger-list li { margin-bottom: 6px; overflow-wrap: anywhere; }
.led-meta { font: 12px "Courier New", Courier, monospace; color: #aaaaff; }
.led-meta .hash { font-size: 12px; }
.led-what { line-height: 1.3; }
.hide-bots .from-bot { display: none; }
.bot-toggle { margin: 8px 0 0; }
.bot-toggle label { display: inline; }
.bot-toggle input { width: auto; display: inline; margin: 0 4px 0 0; }
.bot-badge, .bot-note { color: #00ff00; font-family: "Courier New", Courier, monospace; }
.credit { margin: 4px 0; }
.credits { list-style: none; padding: 0; }
.credits li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.credits .credit { display: inline; }
.hash { font-family: "Courier New", Courier, monospace; word-break: break-all; color: #00ff00; }
#ledger-ok.ok, .ok-text { color: #00ff00; }
#ledger-ok.bad, .bad-text { color: #ff6666; }
.danger-head { margin-top: 20px; color: #ff6666; }
#delete-account { color: #fff; background: #990000; border-color: #ff6666; }

/* ---------- homepage, arrange, use box, checker ---------- */
.homepage-link { font-weight: bold; color: var(--ink); }
.home-form { text-align: center; margin: 4px 0 10px; font-size: 14px; }
.home-form input { display: inline-block; width: 240px; max-width: 60%; }
.arrange-bar { margin: 10px 0 0; text-align: right; }
.zoom-bar { margin: 0 0 6px; text-align: right; }
#zoom-bar { margin-bottom: 1.2em; }   /* (v0.45.8) a blank line between the collection's zoom buttons and its first row */
.grid.arranging .tile { cursor: grab; border: 2px dashed #ffff00; padding: 2px; touch-action: none; user-select: none; }
.grid.arranging .tile.dragging { opacity: 0.5; cursor: grabbing; }
.use-box { margin: 10px 0; padding: 8px; border: 2px dashed var(--edge); }
.btn-link { display: inline-block; padding: 3px 10px; color: #000 !important; background: var(--edge); border: 2px outset #fff; text-decoration: none; font: bold 14px Arial, Helvetica, sans-serif; }
.snippet { font-size: 12px; }
.drop { display: block; margin: 10px 0; padding: 18px; text-align: center; border: 3px dashed var(--edge); cursor: pointer; }
.drop.over { border-color: #ffff00; background: #000066; }
.drop input { display: none; }
img.check-pic { display: inline-block; width: 176px; height: 62px; }

/* ---------- guestbook color themes (on the guestbook page's panels) ---------- */
#view-page .panel { background: var(--gb-panel, var(--panel)); color: var(--gb-text, var(--text)); border-color: var(--gb-edge, var(--edge)); }
#view-page h2, #view-page h3 { color: var(--gb-ink, var(--ink)); }
#view-page a { color: var(--gb-link, var(--link)); }
.gb-starry { }
.gb-geo { --gb-panel: #c0c0c0; --gb-text: #000000; --gb-ink: #000080; --gb-link: #0000ee; --gb-edge: #808080; }
.gb-geo .panel { font-family: "Times New Roman", Times, serif; }
.gb-hacker { --gb-panel: #000000; --gb-text: #33ff33; --gb-ink: #00ff00; --gb-link: #00ffaa; --gb-edge: #008800; }
.gb-hacker .panel { font-family: "Courier New", Courier, monospace; }
.gb-bubblegum { --gb-panel: #ff99cc; --gb-text: #4b0033; --gb-ink: #ffffff; --gb-link: #990066; --gb-edge: #ff66b3; }
.gb-ocean { --gb-panel: #006680; --gb-text: #ffffff; --gb-ink: #aaffff; --gb-link: #ffff99; --gb-edge: #66ccff; }
.gb-goth { --gb-panel: #1a0010; --gb-text: #ddccdd; --gb-ink: #ff3355; --gb-link: #b388ff; --gb-edge: #550022; }
.gb-construction { --gb-panel: #ffcc00; --gb-text: #000000; --gb-ink: #000000; --gb-link: #003399; --gb-edge: #000000; }
.gb-construction .panel { border-style: dashed; }
.gb-vapor { --gb-panel: #2d1b4e; --gb-text: #fffb96; --gb-ink: #ff71ce; --gb-link: #01cdfe; --gb-edge: #b967ff; }
.theme-picker { margin-top: 10px; text-align: right; }
.swatch { margin: 2px; font-size: 12px; padding: 2px 6px; border: 2px outset #fff; cursor: pointer; }
.swatch.on { border-style: inset; outline: 2px solid #ffff00; }
.sw-starry { background: #000080; color: #ffff00; }
.sw-geo { background: #c0c0c0; color: #000080; }
.sw-hacker { background: #000; color: #00ff00; }
.sw-bubblegum { background: #ff99cc; color: #4b0033; }
.sw-ocean { background: #006680; color: #aaffff; }
.sw-goth { background: #1a0010; color: #ff3355; }
.sw-construction { background: #ffcc00; color: #000; }
.sw-vapor { background: #2d1b4e; color: #ff71ce; }
/* readable inputs/notes on light themes */
.gb-geo .bot-note, .gb-bubblegum .bot-note, .gb-construction .bot-note { color: #006600; }
.gb-geo .homepage-link, .gb-bubblegum .homepage-link, .gb-construction .homepage-link { color: inherit; }

/* ---------- sets & cool links ---------- */
.set-row { padding: 2px 0; }
.set-row summary { cursor: pointer; }
.set-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px 16px; }
.set-item img.banner { display: block; }
.set-item.missing img { filter: grayscale(1) brightness(0.45); }
.set-badge { color: #ffff00; font-weight: bold; }
.claim-btn { background: #ffff00; }
.secret-hint { font-style: italic; opacity: 0.8; margin: 6px 0 0; }
.no-card { display: inline-block; width: 88px; height: 31px; line-height: 31px; text-align: center; font-size: 11px; border: 1px dashed var(--edge); }
.hot { color: #ffff00; }

/* ---------- Wall of Buttons ---------- */
.wall-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 10px 0; }
.wall-tile img.banner { display: block; }
.wall-tile:hover img.banner, .wall-tile:hover .mystery-tile { outline: 2px solid #ffff00; }
.mystery-tile { display: block; width: 88px; height: 31px; line-height: 31px; text-align: center; font: bold 22px "Times New Roman", serif;
  color: #ffff00; border: 2px dashed #888; background: repeating-linear-gradient(45deg, #222 0 6px, #111 6px 12px); }
.mystery-tile.big { display: inline-block; width: 176px; height: 62px; line-height: 62px; font-size: 40px; }
.wall-tile.on .mystery-tile { outline: 3px solid #ffff00; }
.lg { display: inline-block; padding: 0 6px; border: 2px solid; margin: 0 2px; }
.lg-common { border-color: transparent; }
.lg-uncommon { border-color: #00ffff; }
.lg-rare { border-color: #ffff00; }
.lg-ultra { border-color: #ff00ff; }
.lg-special { border-color: #ff9900; }
img.rarity-special { border-color: #ff9900; }
.wall-cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
#info-win.info-window { width: 100%; max-width: none; display: flex; flex-direction: column; min-width: 0; box-sizing: border-box; }
.info-empty { color: #333; font-style: italic; padding: 20px 4px; }
.wall-tile.on img.banner { outline: 3px solid #ffff00; }
.info-window .owners { columns: 3; }
.info-body .hash, .info-body a { overflow-wrap: anywhere; }
.wall-cols > * { min-width: 0; }
.info-body img.banner { max-width: 100%; height: auto; }
@media (max-width: 560px) { .info-window .owners { columns: 2; } }
.info-window .dialog-title { display: flex; justify-content: space-between; align-items: center; }
.win-x { padding: 0 6px; font-size: 12px; line-height: 14px; }
.info-body { overflow-y: auto; padding: 10px 12px; font: 14px/1.4 Arial, Helvetica, sans-serif; }
.info-body p { margin: 4px 0; }
.info-body h3 { color: #000080; margin: 10px 0 4px; }
.info-body a { color: #0000ee; }
.info-body .hash { color: #006600; }
.info-body .bot-badge { color: #007700; }
.info-body .variant { color: #990099; }
.info-body img.banner { display: inline-block; }
.owners { columns: 2; padding-left: 18px; margin: 4px 0; font-size: 13px; }

/* ---------- player pages: pared down ---------- */
.page-only { display: none; }
body.on-page .page-only { display: block; }
body.on-page .site-extra { display: none !important; }
.page-banner { text-align: center; margin: 14px 0; font-size: 28px; color: var(--ink); text-shadow: 2px 2px 0 #ff00ff; }
/* public view: title moves between the rainbows, collection comes before the homepage link */
body.on-page .own-title { display: none; }
body.on-page #view-page > .panel:first-child { display: flex; flex-direction: column; }
body.on-page #view-page > .panel:first-child > * { order: 1; }
body.on-page #view-page > .panel:first-child > .pub-last { order: 2; margin-top: 10px; }

/* ---------- in-game dialog window ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialog-window {
  width: 100%; max-width: 340px;
  background: #c0c0c0; color: #000; border: 3px outset #ffffff;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
  font-family: Arial, Helvetica, sans-serif;
}
.dialog-title { background: #000080; color: #fff; font-weight: bold; padding: 3px 6px; font-size: 14px; }
.dialog-body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; }
.dialog-body p { margin: 0; }
.dialog-pic img.banner { display: block; }
#dialog-input { width: 100%; }
.dialog-buttons { display: flex; justify-content: center; gap: 10px; margin: 0 0 12px; }

/* ---------- moving bits ---------- */

.marquee {
  overflow: hidden; white-space: nowrap;
  margin: 12px 0 0; padding: 2px 0;
  color: #00ff00; background: #000; border: 2px inset var(--edge);
  font: bold 14px "Courier New", Courier, monospace;
}
.marquee span { display: inline-block; padding-left: 100%; animation: scroll-left 18s linear infinite; }
@keyframes scroll-left { to { transform: translateX(-100%); } }

.ticker {
  overflow: hidden; white-space: nowrap; margin: 0 0 12px; padding: 3px 0;
  color: #ffff00; background: #000000; border: 2px inset var(--edge);
  font: bold 14px "Courier New", Courier, monospace;
}
.ticker span { display: inline-block; padding-left: 100%; animation: scroll-left 40s linear infinite; }

.button-strip { overflow: hidden; border: 3px ridge var(--edge); background: #000; padding: 4px 0; }
.strip-track { display: flex; gap: 6px; width: max-content; animation: strip 30s linear infinite; }
.strip-track img { display: block; image-rendering: pixelated; }
/* 10 buttons x (88px + 6px gap) = one full set */
@keyframes strip { to { transform: translateX(-50%); } }   /* (v0.37) half the track: it holds every button twice, so the loop is seamless */

/* people who ask their system for less motion get a still page */
@media (prefers-reduced-motion: reduce) {
  /* the two scrolling text lines keep scrolling (phones often have Reduce Motion on, and then they showed the whole line) */
  /* (v0.37) the button strip keeps moving too: with Reduce Motion on, phones showed it standing still */
  .card.chosen { animation: none; }
  body::before { background-image: none; }
}

/* phones: stack the two boxes */
@media (max-width: 560px) {
  table.layout, table.layout tr, table.layout td { display: block; width: 100%; }
  table.layout { border-spacing: 0; }
  table.layout td { margin-bottom: 12px; }
  h1 { font-size: 36px; }
}

/* ---------- foils, patterns, effects (v0.19) ----------
   Layers, bottom to top: the button art, its FOIL (the material, on .foil-wrap::after), the
   PATTERN (cuts the foil's shine: a mask on that same layer, or an extra burst for Surge), then
   the EFFECT (on the outer .fx, so it plays on the foiled button as one picture).
   Nothing is drawn on top of the art: foils and patterns only change how light hits it.
   Each copy's --foil-angle / --foil-delay come from its own seed. */
.foil-wrap, .fx { position: relative; display: inline-block; vertical-align: top; line-height: 0; }
.wall-tile .foil-wrap, .dash-pic .foil-wrap, .set-item .foil-wrap,
.wall-tile .fx, .dash-pic .fx, .set-item .fx { display: block; }
.foil-wrap::after, .foil-wrap::before { content: ""; position: absolute; inset: 2px; pointer-events: none; }
.foil-wrap::before { display: none; }

/* --- base tier: a little something --- */
/* Glitter: scattered pixels of the button catch the light and twinkle */
.foil-glitter::after {
  background:
    radial-gradient(circle, #fff 0 0.6px, transparent 1px) 0 0 / 17px 11px,
    radial-gradient(circle, #fff 0 0.6px, transparent 1px) 7px 4px / 23px 13px,
    radial-gradient(circle, #fff 0 0.5px, transparent 0.9px) 12px 7px / 29px 17px;
  mix-blend-mode: overlay; opacity: 0.5;
  animation: glitter-twinkle 1.8s steps(3) infinite; animation-delay: var(--foil-delay);
}
@keyframes glitter-twinkle {
  0% { opacity: 0.2; background-position: 0 0, 7px 4px, 12px 7px; }
  50% { opacity: 0.6; background-position: 5px 3px, 2px 9px, 21px 2px; }
  100% { opacity: 0.2; background-position: 11px 6px, 15px 1px, 4px 12px; }
}
/* Sheen: a soft white glint glides across now and then */
.foil-sheen::after {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.6) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%; mix-blend-mode: soft-light;
  animation: sheen-glide 7s ease-in-out infinite; animation-delay: var(--foil-delay);
}
@keyframes sheen-glide { 0% { background-position: 120% 0; } 30%, 100% { background-position: -20% 0; } }

/* --- tier 1 --- */
.foil-holo::after {
  background: linear-gradient(var(--foil-angle, 115deg),
    transparent 15%, rgba(255, 0, 255, 0.45) 30%, rgba(0, 255, 255, 0.5) 42%,
    rgba(255, 255, 0, 0.45) 54%, rgba(0, 255, 128, 0.4) 66%, transparent 85%);
  background-size: 250% 250%; mix-blend-mode: screen;
  animation: foil-sweep 3.2s linear infinite; animation-delay: var(--foil-delay);
}
@keyframes foil-sweep { from { background-position: 100% 100%; } to { background-position: 0% 0%; } }
/* Galaxy: the shine scattered into tiny colored specks, like stars */
.foil-galaxy::after {
  background:
    radial-gradient(circle, rgba(255, 140, 255, 0.85) 0 0.6px, transparent 1px) 0 0 / 19px 12px,
    radial-gradient(circle, rgba(140, 255, 255, 0.85) 0 0.6px, transparent 1px) 8px 5px / 25px 15px,
    radial-gradient(circle, rgba(255, 255, 170, 0.8) 0 0.5px, transparent 0.9px) 3px 9px / 31px 19px,
    linear-gradient(var(--foil-angle), rgba(110, 30, 200, 0.3), rgba(0, 110, 220, 0.3));
  mix-blend-mode: screen;
  animation: galaxy-drift 12s linear infinite; animation-delay: var(--foil-delay);
}
@keyframes galaxy-drift {
  from { background-position: 0 0, 4px 3px, 2px 5px, 0 0; }
  to { background-position: 36px 12px, -44px 19px, 30px -25px, 0 0; }
}
/* Ripple: the shine moves across in waves */
.foil-ripple::after {
  background: repeating-linear-gradient(var(--foil-angle),
    rgba(255, 0, 200, 0.35) 0 4px, rgba(0, 255, 255, 0.35) 4px 8px, rgba(255, 255, 0, 0.3) 8px 12px, transparent 12px 20px);
  background-size: 200% 200%; mix-blend-mode: screen;
  animation: foil-sweep 4.5s linear infinite; animation-delay: var(--foil-delay);
}

/* --- tier 2 --- */
/* Chrome: a cool metallic shine slides across, beveled silver edge */
.foil-chrome::after {
  background: linear-gradient(var(--foil-angle), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.85) 48%,
    rgba(120, 130, 150, 0.6) 55%, rgba(255, 255, 255, 0) 70%);
  background-size: 250% 250%; mix-blend-mode: overlay;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), inset -1px -1px 0 rgba(90, 100, 120, 0.9);
  animation: foil-sweep 3s linear infinite; animation-delay: var(--foil-delay);
}
/* Gold: a warm gold sheen with a gold edge */
.foil-gold::after {
  background: linear-gradient(var(--foil-angle), rgba(255, 190, 40, 0.35) 0%, rgba(255, 240, 160, 0.9) 45%,
    rgba(200, 130, 0, 0.5) 55%, rgba(255, 190, 40, 0.35) 100%);
  background-size: 250% 250%; mix-blend-mode: overlay;
  box-shadow: inset 1px 1px 0 rgba(255, 236, 140, 0.95), inset -1px -1px 0 rgba(150, 90, 0, 0.95);
  animation: foil-sweep 3.6s linear infinite; animation-delay: var(--foil-delay);
}
/* --- signature foils: each belongs to one ultra and nothing else --- */
/* Phosphor Glow: green CRT phosphor that breathes, with a soft halo round the edge */
.foil-phosphor { border-radius: 2px; box-shadow: 0 0 4px rgba(80, 255, 120, 0.7); animation: phosphor-halo 3.2s ease-in-out infinite; animation-delay: var(--foil-delay); }
.foil-phosphor::after {
  background: radial-gradient(ellipse at 50% 50%, rgba(140, 255, 160, 0.6) 0%, rgba(40, 220, 100, 0.3) 60%, rgba(0, 120, 40, 0.15) 100%);
  mix-blend-mode: screen;
  box-shadow: inset 0 0 0 1px rgba(110, 255, 150, 0.9);
  animation: phosphor-breathe 3.2s ease-in-out infinite; animation-delay: var(--foil-delay);
}
@keyframes phosphor-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes phosphor-halo { 0%, 100% { box-shadow: 0 0 3px 1px rgba(80, 255, 120, 0.6); } 50% { box-shadow: 0 0 10px 3px rgba(80, 255, 120, 1); } }
/* Scanline Shimmer: fine scanlines with a bright line rolling down, like a picture loading from disk */
.foil-scanline::before {
  display: block;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, rgba(0, 0, 0, 0) 1px 2px);
}
.foil-scanline::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(160, 255, 255, 0) 40%, rgba(220, 255, 255, 0.95) 50%,
    rgba(160, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 300%; mix-blend-mode: screen;
  box-shadow: inset 1px 1px 0 rgba(200, 255, 255, 0.9), inset -1px -1px 0 rgba(0, 120, 140, 0.9);
  animation: scan-roll 2.6s linear infinite; animation-delay: var(--foil-delay);
}
@keyframes scan-roll { from { background-position: 0 100%; } to { background-position: 0 0%; } }
/* Oil Slick: a dark, swirly iridescent sheen */
.foil-oil-slick::after {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(120, 0, 200, 0.55), transparent 60%),
    radial-gradient(ellipse at 70% 60%, rgba(0, 160, 140, 0.55), transparent 60%),
    radial-gradient(ellipse at 50% 20%, rgba(220, 60, 160, 0.5), transparent 55%);
  background-size: 160% 160%; mix-blend-mode: overlay;
  animation: oil-swirl 8s ease-in-out infinite alternate; animation-delay: var(--foil-delay);
}
@keyframes oil-swirl {
  from { background-position: 0% 0%, 100% 100%, 50% 0%; }
  to { background-position: 100% 60%, 0% 20%, 20% 100%; }
}

/* --- tier 3 --- */
/* Prismatic: the full rainbow, bright and always moving */
.foil-prismatic::after {
  background: linear-gradient(var(--foil-angle), #ff0080, #ff8c00, #ffee00, #00ff80, #00c8ff, #8000ff, #ff0080);
  background-size: 300% 300%; mix-blend-mode: color-dodge; opacity: 0.6;
  animation: foil-sweep 2.4s linear infinite; animation-delay: var(--foil-delay);
}
/* Double Rainbow: two rainbows crossing in opposite directions */
.foil-double-rainbow::after {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 0, 128, 0.5), rgba(255, 238, 0, 0.5), rgba(0, 200, 255, 0.5), transparent 70%),
    linear-gradient(-65deg, transparent 30%, rgba(0, 255, 128, 0.5), rgba(128, 0, 255, 0.5), rgba(255, 140, 0, 0.5), transparent 70%);
  background-size: 300% 300%, 300% 300%; mix-blend-mode: screen;
  animation: double-cross 3.4s linear infinite; animation-delay: var(--foil-delay);
}
@keyframes double-cross { from { background-position: 100% 100%, 0% 0%; } to { background-position: 0% 0%, 100% 100%; } }
/* Liquid Metal: flowing mercury */
.foil-liquid-metal::after {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 255, 255, 0.95), transparent 35%),
    radial-gradient(ellipse at 60% 30%, rgba(170, 180, 200, 0.9), transparent 40%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.9), transparent 35%),
    linear-gradient(rgba(140, 150, 170, 0.6), rgba(220, 225, 235, 0.6));
  background-size: 180% 180%, 200% 200%, 170% 170%, 100% 100%; mix-blend-mode: hard-light; opacity: 0.75;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #667;
  animation: mercury 5s ease-in-out infinite alternate; animation-delay: var(--foil-delay);
}
@keyframes mercury {
  from { background-position: 0% 50%, 100% 0%, 50% 100%, 0 0; }
  to { background-position: 100% 30%, 0% 100%, 0% 0%, 0 0; }
}

/* --- patterns: how a real foil's shine is cut --- */
/* Fracture: the shine breaks into shards */
.pat-fracture::after {
  -webkit-mask-image:
    repeating-linear-gradient(calc(var(--foil-angle) + 28deg), #000 0 9px, rgba(0,0,0,0.25) 9px 16px),
    repeating-linear-gradient(calc(var(--foil-angle) - 52deg), #000 0 12px, rgba(0,0,0,0.25) 12px 19px),
    repeating-linear-gradient(calc(var(--foil-angle) + 97deg), #000 0 7px, rgba(0,0,0,0.25) 7px 15px);
  mask-image:
    repeating-linear-gradient(calc(var(--foil-angle) + 28deg), #000 0 9px, rgba(0,0,0,0.25) 9px 16px),
    repeating-linear-gradient(calc(var(--foil-angle) - 52deg), #000 0 12px, rgba(0,0,0,0.25) 12px 19px),
    repeating-linear-gradient(calc(var(--foil-angle) + 97deg), #000 0 7px, rgba(0,0,0,0.25) 7px 15px);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Etched: the shine only shows in fine lines */
.pat-etched::after {
  -webkit-mask-image: repeating-linear-gradient(calc(var(--foil-angle) + 45deg), #000 0 1px, rgba(0,0,0,0.15) 1px 3px);
  mask-image: repeating-linear-gradient(calc(var(--foil-angle) + 45deg), #000 0 1px, rgba(0,0,0,0.15) 1px 3px);
}
/* Surge: bright rainbow bursts pulse through */
.pat-surge::before {
  display: block;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 0, 200, 0.5) 30%, rgba(0, 220, 255, 0.4) 55%, transparent 75%);
  mix-blend-mode: color-dodge; opacity: 0;
  animation: surge-burst 2.6s ease-out infinite; animation-delay: var(--foil-delay);
}
@keyframes surge-burst { 0%, 55% { opacity: 0; transform: scale(0.3); } 70% { opacity: 0.85; } 100% { opacity: 0; transform: scale(1.4); } }

/* --- effects: how the whole button plays on screen --- */
/* CRT: scanlines and a soft glow */
.fx-crt { border-radius: 3px; box-shadow: 0 0 5px rgba(160, 255, 255, 0.55); }
.fx-crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 3px;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
  animation: crt-flicker 4s steps(2) infinite;
}
@keyframes crt-flicker { 0%, 92% { opacity: 1; } 96% { opacity: 0.8; } }
/* VHS: now and then the picture slips sideways, with a slight color fringe */
.fx-vhs {
  filter: drop-shadow(1px 0 rgba(255, 0, 60, 0.55)) drop-shadow(-1px 0 rgba(0, 170, 255, 0.55));
  animation: vhs-slip 6s steps(1) infinite; animation-delay: var(--foil-delay);
}
@keyframes vhs-slip {
  0%, 88%, 100% { transform: none; }
  89% { transform: translateX(2px) skewX(-3deg); }
  91% { transform: translateX(-1px); }
  93% { transform: translateX(3px) skewX(2deg); }
  95% { transform: none; }
}
/* Dial-Up: loads in top to bottom like a slow modem, holds, then reloads */
.fx-dialup > .foil-wrap { animation: dialup-load 9s steps(1) infinite; animation-delay: var(--foil-delay); }
@keyframes dialup-load {
  0% { clip-path: inset(0 0 100% 0); } 3% { clip-path: inset(0 0 85% 0); } 6% { clip-path: inset(0 0 70% 0); }
  9% { clip-path: inset(0 0 55% 0); } 12% { clip-path: inset(0 0 40% 0); } 15% { clip-path: inset(0 0 25% 0); }
  18% { clip-path: inset(0 0 10% 0); } 21%, 100% { clip-path: inset(0); }
}
/* Marquee: the picture scrolls sideways and wraps around */
.fx-marquee { width: var(--w); height: var(--h); overflow: hidden; }
.fx-marquee .fx-track { display: flex; width: calc(var(--w) * 2); animation: marquee-roll 12s linear infinite; animation-delay: var(--foil-delay); }
.fx-marquee .fx-track > .foil-wrap { flex: none; }
@keyframes marquee-roll { from { transform: translateX(0); } to { transform: translateX(calc(var(--w) * -1)); } }

/* Respect "reduce motion": every foil holds still, effects stop moving */
@media (prefers-reduced-motion: reduce) {
  .foil-wrap, .foil-wrap::after, .foil-wrap::before, .fx, .fx::after, .fx > .foil-wrap, .fx-track { animation: none !important; }
  .fx-dialup > .foil-wrap { clip-path: none; }
}

.first-print { color: #ffcc66; font-weight: bold; }

/* ---------- archive buttons, webmaster box, adding buttons ---------- */
.archive-note { border: 1px dashed #999999; padding: 4px 8px; margin: 8px 0; }
.archive-note p { margin: 4px 0; }
.admin-box { border: 2px solid #ff3333; background: rgba(255, 0, 0, 0.08); padding: 6px 8px; margin: 10px 0; }
.admin-box p { margin: 0 0 6px; }
.add-button { border: 2px ridge #c0c0c0; padding: 8px 10px; margin: 14px 0; }
.add-button input[type="text"], .add-button input[type="url"] { width: 100%; max-width: 280px; box-sizing: border-box; }

/* v0.18.1: the info window keeps one height so the page doesn't jump when you click a button */
#info-win .info-body { height: auto; }

.add-status { min-height: 1.3em; font-weight: bold; }
#add-preview img.banner { margin: 0 auto; }
.ledger-more summary { cursor: pointer; font-weight: bold; margin: 8px 0; }
.drop.busy { opacity: 0.6; pointer-events: none; }

/* v0.18.2: info window in two columns on wide screens, one fixed height that fits everything */
.info-cols { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
@media (min-width: 700px) { .info-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .info-window .owners { columns: 2; } }
/* one fixed height that fits the tallest button's info (measured), so the page never shifts */
#info-win .info-body { height: 760px; overflow-y: auto; box-sizing: border-box; }
@media (min-width: 700px) { #info-win .info-body { height: 560px; } }

/* fuse box on your own copy's page */
.fuse-box { border: 2px ridge #ff99ff; padding: 8px 10px; margin: 14px 0; }
.fuse-grid { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fuse-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; background: transparent; border: 2px solid transparent; cursor: pointer; color: inherit; }
.fuse-pick.on { border-color: #ffff00; background: rgba(255, 255, 0, 0.12); }
.fuse-pick img.banner, .fuse-pick .foil-wrap, .fuse-pick .fx { display: block; }

/* Who has one: tiny copy previews with their finish */
.info-window .owners.copies { list-style: none; padding: 0; margin: 4px 0; }
.owners.copies li { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; break-inside: avoid; line-height: 1.2; }
.owners.copies .copy-pic { flex: none; line-height: 0; }
.owners.copies .copy-pic img.banner { border-width: 1px; }
.owners.copies .fin { font-size: 11px; color: #555; }
.owners.copies .fin.special { color: #990099; font-weight: bold; }
.owners.copies li > span { min-width: 0; flex: 1; }
.owners.copies .who-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sets: show-off checkbox and visitors' trophies */
.show-off { display: block; margin: 4px 0 8px; }
.set-row.trophy { margin: 6px 0; }
.set-item .mystery-tile { width: 88px; height: 31px; line-height: 31px; font-size: 18px; }
@media (max-width: 560px) { .top-bar { font-size: 15px; } }

.add-skipped { max-height: 160px; overflow-y: auto; margin: 6px 0 0; text-align: left; }
.add-batch { margin: 4px 0; }

/* ---------- sealed packs (v0.22) ---------- */
.packs-shelf { margin: 0 0 14px; }
.packs-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pack-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 120px; text-align: center; }
/* (v0.45.7) zoomed out: every pack on one row, each overlapping the one before by all but --visible, the hovered one on top */
.packs-grid.stacked { flex-wrap: nowrap; gap: 0; justify-content: safe center; overflow-x: auto; padding: 20px 0 1.2em; touch-action: pan-y; }   /* (v0.45.9) room for the bigger front pack, and a blank line under the row; (v0.45.10) a sideways finger drag picks packs instead of scrolling */
.packs-grid.stacked .pack-slot { flex: 0 0 auto; width: 100px; max-width: none; position: relative; z-index: 0; }   /* each pack its own layer, so its art's z-indexes can't poke through the pack on top of it */
.packs-grid.stacked .pack-slot + .pack-slot { margin-left: calc(var(--visible, 40px) - 100px); }
.packs-grid.stacked .pack-slot > .small { display: none; }
.packs-grid.stacked .pack-slot:hover { z-index: 20; }
.packs-grid.stacked .pack-slot { transition: transform .15s ease-out; }
.packs-grid.stacked .pack-slot.front { z-index: 15; transform: scale(1.25); }   /* (v0.45.9) the pack a click brought forward, bigger; a click on it opens it */
.card.small-card { min-width: 0; }
.pack-give input { width: 140px; }
.series-tag { color: #0066cc; }

/* webmaster: give packs */
.givepacks { margin-top: 10px; border-top: 1px dashed #ff6666; padding-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.givepacks p { margin: 0; color: #ff9999; }
.givepacks input[type="number"] { width: 48px; }

/* logged-out Wall: pictures only */
.wall-tile.still { cursor: default; }
.wall-tile.still:hover img.banner, .wall-tile.still:hover .mystery-tile { outline: none; }
/* [ ? ] tiles in the Buttons you can collect strip */
.strip-track .strip-q { display: inline-block; width: 88px; height: 31px; line-height: 31px; vertical-align: top; font-size: 18px; }

/* request board + open trades (v0.23) */
.board-post { margin: 6px 0 10px; }
.board-post summary { cursor: pointer; font-weight: bold; }
.board-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.board-row .board-pic { line-height: 0; }
.board-act select { max-width: 160px; }
.wanted-line { color: #ffcc66; }

/* Packs section (v0.23.1): daily packs look different from sealed ones; used ones go grey */
.pack-open:empty { display: none; }
.pack-open { margin-top: 0; scroll-margin-top: 8px; }

/* ---------- front-page free pack (v0.24) ---------- */
.freepack-box .pull-row { margin: 6px 0; }
.sig-form { text-align: center; margin: 8px 0 0; }
.sig-line { display: inline-flex; align-items: baseline; gap: 6px; font-style: italic; }
.sig-input { border: 0; border-bottom: 2px solid currentColor; background: transparent; color: inherit;
  font: italic 20px "Comic Sans MS", "Brush Script MT", cursive; width: 11em; padding: 0 4px; outline: none; }
.sig-check { border: 0; background: transparent; color: #66ff66; font-size: 22px; cursor: pointer; padding: 0 4px; }
.fp-human { display: flex; justify-content: center; margin-top: 6px; }
/* printing the save code: just the card */
@media print {
  body.printing-code > *:not(main), body.printing-code main > *:not(#code-card) { display: none !important; }
  body.printing-code #code-card .center button { display: none; }
}
.sig-line { white-space: nowrap; max-width: 100%; }
.sig-input { width: 9em; max-width: 55vw; }
.fp-note { margin-top: 2px; }

/* Wall of Buttons: show / order choices */
#wall .panel { position: relative; }
.wall-controls { position: absolute; top: 8px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  font-size: 10px; line-height: 1; }
.wall-controls span { white-space: nowrap; }
.wall-controls button { font-size: 10px; padding: 1px 4px; margin: 0 0 0 2px; }
.wall-controls button.on { background: #ffff00; color: #000080; font-weight: bold; }
@media (max-width: 700px) { .wall-controls { position: static; align-items: center; margin-bottom: 6px; } }

/* signing the free pack: what went wrong, right under the line */
.sig-oops { color: #ff6666; font-weight: bold; min-height: 1em; margin: 4px 0; }
.sig-oops:empty { display: none; }
.sig-check:disabled { opacity: .45; cursor: wait; filter: grayscale(1); }

.card-finish { color: #ff99ff; font-weight: bold; }

/* webmaster series panel */
.series-panel { margin-top: 14px; border: 2px dashed #808080; padding: 8px; }
.series-table { margin: 0 auto; border-collapse: collapse; font-size: 12px; }
.series-table td { padding: 3px 8px; border-bottom: 1px dotted #808080; }
.series-status { padding: 0 4px; font-weight: bold; }
.st-active { background: #00cc00; color: #fff; }
.st-upcoming { background: #ffcc00; color: #000; }
.st-retired { background: #808080; color: #fff; }
.loose-item { display: inline-block; margin: 2px 10px 2px 0; }
#series-new { margin-top: 8px; }
#series-new input, .loose-item select { width: auto; display: inline-block; }
#series-new input { width: 140px; }
.series-look.on { background: #ffff00; color: #000080; font-weight: bold; }
.st-oop { background: #cc0000; color: #fff; }
.run-cell { white-space: nowrap; font-size: 11px; }
.run-bar { display: inline-block; width: 60px; height: 7px; border: 1px solid #c0c0c0; background: #000040; vertical-align: middle; }
.run-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #00cc66, #ffff00); }
#series-new input[name="special"] { width: 130px; }
#series-new .run-input { width: 70px; }
.pk-or { margin-top: 8px; }
.pk-card { margin: 10px 0; }
#passkeys li { margin: 3px 0; }
.series-table td.nw { white-space: nowrap; }
#view-codes h2 { margin-top: 18px; }

/* ---------- pack art (v0.27) ----------
   Series packs are crimped foil pouches, each series with its own look and its own shine
   (Alpha twinkles, Beta has a CRT refresh line). Everything else (daily, welcome, free, mixed)
   keeps the rounded outline with a little picture and a soft gleam.
   .pack-tile is the outer link (shadow, hover); .pack-art is the wrapper itself. */
.pack-tile { display: inline-block; position: relative; width: 100px; height: 136px; text-decoration: none; vertical-align: top;
  transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.pack-tile:hover { transform: translateY(-3px) rotate(-1deg); }
/* pressing a pack squishes it; letting go pops it bigger, then it settles (.pop is added on release) */
.pack-tile:active { transform: scale(.88); transition: transform .08s ease-out; }
.pack-tile.pop { animation: pack-pop .35s ease-out; }
@keyframes pack-pop { 0% { transform: scale(.88); } 45% { transform: scale(1.12); } 100% { transform: none; } }
.pack-tile.used:active, .open-stage .pack-tile:active { transform: none; }
.pack-tile.used.pop, .open-stage .pack-tile.pop { animation: none; }
.pack-tile .pack-art { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  padding: 8px 6px 10px; box-sizing: border-box; color: #fff; font: bold 11px Arial, sans-serif; text-shadow: 1px 1px 0 #000; }
.pack-art > span { display: block; }
.pack-top { font-size: 7.5px; letter-spacing: 0; opacity: .9; white-space: nowrap; position: relative; z-index: 3; }
.pack-name { font-size: 13px; color: #ffff00; text-align: center; line-height: 1.05; position: relative; z-index: 3; }
.pack-sub { font-size: 9px; font-style: italic; position: relative; z-index: 3; }
.pack-name.long { font-size: 9px; line-height: 1.1; }
.pack-tile.revealed .pack-art { filter: saturate(0.5); }

/* the rounded outline (shelf packs) */
.pack-tile.flat .pack-art { border: 2px solid #c0c0c0; border-radius: 4px 4px 10px 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 3px 3px 0 #000; background-size: 200% 200%; animation: pack-shine 4s ease-in-out infinite alternate; }
.pack-tile.flat.glow .pack-art { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 0 14px 3px rgba(120, 220, 255, .55); }
@keyframes pack-shine { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.pack-art .gleam { position: absolute; top: -20%; left: 0; width: 26px; height: 140%; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: pack-gleam 3.6s ease-in-out infinite; }
@keyframes pack-gleam { from { transform: translateX(-140%) rotate(20deg); } to { transform: translateX(260%) rotate(20deg); } }

/* the crimped pouch (series packs) */
.pack-tile.pouch { filter: drop-shadow(3px 3px 0 #000); }
.pack-tile.pouch.glow-gold { filter: drop-shadow(0 0 7px rgba(255, 215, 90, .75)) drop-shadow(3px 3px 0 #000); }
.pack-tile.pouch.glow-holo { filter: drop-shadow(0 0 7px rgba(255, 190, 255, .8)) drop-shadow(3px 3px 0 #000); }
.pack-tile.pouch .pack-art { padding: 14px 6px 12px;
  clip-path: polygon(0 4px,4% 0,8% 4px,12% 0,16% 4px,20% 0,24% 4px,28% 0,32% 4px,36% 0,40% 4px,44% 0,48% 4px,52% 0,56% 4px,60% 0,64% 4px,68% 0,72% 4px,76% 0,80% 4px,84% 0,88% 4px,92% 0,96% 4px,100% 0,
    100% calc(100% - 4px),96% 100%,92% calc(100% - 4px),88% 100%,84% calc(100% - 4px),80% 100%,76% calc(100% - 4px),72% 100%,68% calc(100% - 4px),64% 100%,60% calc(100% - 4px),56% 100%,52% calc(100% - 4px),48% 100%,44% calc(100% - 4px),40% 100%,36% calc(100% - 4px),32% 100%,28% calc(100% - 4px),24% 100%,20% calc(100% - 4px),16% 100%,12% calc(100% - 4px),8% 100%,4% calc(100% - 4px),0 100%); }
.pack-art .crimp { position: absolute; left: 0; right: 0; height: 10px; z-index: 4; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 2px, rgba(0, 0, 0, .12) 2px 4px); }
.pack-art .crimp.t { top: 0; } .pack-art .crimp.b { bottom: 0; }

/* Alpha: homepage night sky, twinkling */
.th-alpha .pack-art { background:
    radial-gradient(1px 1px at 12px 24px, #fff 99%, transparent), radial-gradient(1px 1px at 70px 40px, #fff 99%, transparent),
    radial-gradient(1px 1px at 30px 80px, #ffff99 99%, transparent), radial-gradient(1px 1px at 82px 96px, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 50px 18px, #fff 99%, transparent), radial-gradient(1px 1px at 20px 104px, #fff 99%, transparent),
    linear-gradient(180deg, #000033 0%, #1a0066 60%, #330066 100%); }
.th-alpha .rainbow { position: absolute; left: 0; right: 0; top: 30px; height: 6px; background: linear-gradient(90deg, #f00, #f90, #ff0, #0c0, #09f, #60f, #c0f); }
.th-alpha .pack-name { margin-top: 26px; font: bold 18px "Comic Sans MS", "Chalkboard SE", cursive; text-shadow: 2px 2px 0 #000; }
.th-alpha .hazard { position: absolute; left: 0; right: 0; bottom: 9px; height: 12px; z-index: 3; background: repeating-linear-gradient(-45deg, #000 0 6px, #ffcc00 6px 12px); }
.pack-art .spark { position: absolute; width: 11px; height: 11px; z-index: 6; pointer-events: none; background: #fff; opacity: 0;
  clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); animation: pack-twinkle 2.6s ease-in-out infinite; }
.pack-art .spark.s { width: 7px; height: 7px; }
@keyframes pack-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 60% { opacity: 0; transform: scale(.3) rotate(60deg); } }
/* (v0.45.12) Series Alpha's holo: a rainbow sheen drifting back and forth, like holographic foil */
.pack-art .holo { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; background-size: 300% 300%;
  background-image: linear-gradient(115deg, transparent 20%, rgba(255,80,180,.35) 32%, rgba(255,230,90,.35) 40%, rgba(90,255,170,.35) 48%, rgba(80,200,255,.35) 56%, rgba(180,110,255,.35) 64%, transparent 76%);
  animation: pack-holo 4s ease-in-out infinite alternate; }
@keyframes pack-holo { from { background-position: 100% 100%; } to { background-position: 0% 0%; } }
/* (v0.45.12) the webmaster's gift packs: white and gold specks that catch the light, two layers blinking out of step */
.pack-art .glitter { position: absolute; inset: 0; z-index: 5; pointer-events: none; mix-blend-mode: screen; }
.pack-art .glitter::before, .pack-art .glitter::after { content: ""; position: absolute; inset: 0; animation: pack-glitter 1.3s ease-in-out infinite; }
.pack-art .glitter::before { background: radial-gradient(#fff 0 .8px, transparent 1.4px) 2px 3px / 13px 11px, radial-gradient(#ffe27a 0 .8px, transparent 1.4px) 8px 7px / 17px 15px; }
.pack-art .glitter::after { background: radial-gradient(#fff 0 .7px, transparent 1.3px) 6px 1px / 11px 14px, radial-gradient(#ffe27a 0 .9px, transparent 1.5px) 1px 9px / 19px 13px; animation-delay: -.65s; }
@keyframes pack-glitter { 0%, 100% { opacity: .1; } 50% { opacity: 1; } }

/* Alpha special (Cool Site of the Day): holo with an award rosette */
.th-alpha-sp .pack-art, .th-special .pack-art { background: linear-gradient(135deg, #c0c0c0 0%, #fff 18%, #ff66cc 34%, #66ccff 50%, #ffff66 66%, #fff 82%, #a0a0a0 100%);
  background-size: 300% 300%; animation: pack-shine 3s ease-in-out infinite alternate; color: #000080; text-shadow: 0 0 3px #fff; }
.th-alpha-sp .pack-top, .th-alpha-sp .pack-sub, .th-special .pack-top, .th-special .pack-sub { color: #330066; text-shadow: 0 0 2px #fff; }
.th-alpha-sp .pack-name, .th-special .pack-name { font-size: 10px; color: #000080; text-shadow: 0 0 3px #fff; }
.th-special .pack-name { font-size: 13px; margin-top: 20px; }
.pack-art .rosette { position: relative; width: 46px; height: 46px; border-radius: 50%; z-index: 2; margin: 3px 0 9px; box-sizing: border-box; padding: 0 6px;
  background: radial-gradient(circle, #fff6a0 0 40%, #ffcc00 41% 62%, #cc8800 63% 66%, #ffdd33 67%);
  box-shadow: 0 0 0 2px #996600, 0 2px 4px rgba(0, 0, 0, .5); display: flex !important; align-items: center; justify-content: center;
  font: bold 7px Arial, sans-serif; color: #663300; text-shadow: none; line-height: 1; text-align: center; }
.pack-art .rosette::before, .pack-art .rosette::after { content: ""; position: absolute; bottom: -12px; width: 10px; height: 16px; background: #cc0000; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.pack-art .rosette::before { left: 10px; transform: rotate(12deg); } .pack-art .rosette::after { right: 10px; transform: rotate(-12deg); }

/* Beta: green terminal, matrix rain, a CRT refresh line */
.th-beta .pack-art { background: linear-gradient(180deg, #002200, #004d1a 60%, #001a00); }
.th-beta .crimp, .th-beta-sp .crimp { background: repeating-linear-gradient(90deg, rgba(51, 255, 102, .45) 0 2px, rgba(0, 0, 0, .25) 2px 4px); }
.th-beta-sp .crimp { background: repeating-linear-gradient(90deg, rgba(255, 215, 0, .6) 0 2px, rgba(0, 0, 0, .3) 2px 4px); }
.th-beta .pack-top { color: #66ff99; }
.pack-art .scan { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.pack-art .rain { position: absolute; top: -90px; z-index: 1; font: bold 8px/9px "Courier New", monospace; color: #66ff99; opacity: .55; letter-spacing: -1px;
  writing-mode: vertical-rl; text-orientation: upright; text-shadow: 0 0 4px #33ff66; animation: pack-rain linear infinite; }
@keyframes pack-rain { from { top: -90px; } to { top: 140px; } }
.pack-art .win { position: relative; z-index: 3; width: 88px; height: 31px; margin-top: 3px; line-height: 0; background: #000; border: 2px solid #33ff66;
  box-shadow: 0 0 0 1px #000, 0 0 8px rgba(51, 255, 102, .6); }
.pack-art .win img { width: 88px; height: 31px; image-rendering: pixelated; }
.th-beta .pack-name { margin-top: 4px; color: #33ff66; font: bold 14px "Courier New", monospace; letter-spacing: 2px; text-shadow: 0 0 6px #33ff66; }
.th-beta .prompt { position: relative; z-index: 3; font: bold 9px "Courier New", monospace; color: #33ff66; text-shadow: 0 0 4px #33ff66; }
.th-beta .pack-sub { color: #ccffdd; }
.pack-art .cur { animation: pack-blink 1s steps(1) infinite; }
@keyframes pack-blink { 50% { opacity: 0; } }
.pack-art .refresh { position: absolute; left: 0; right: 0; height: 16px; z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(140, 255, 170, .4) 50%, transparent); animation: pack-refresh 2.6s linear infinite; }
.pack-art .refresh.gold { background: linear-gradient(180deg, transparent, rgba(255, 230, 140, .45) 50%, transparent); }
@keyframes pack-refresh { from { top: -16px; } to { top: 136px; } }

/* Beta special (Gold Master): a gold disc on a circuit board */
.th-beta-sp .pack-art { background: #07120a url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='136'><g stroke='%23b8902a' stroke-width='1.2' fill='none' opacity='.8'><path d='M0 30h8l6 6v16'/><path d='M100 26h-8l-6 6v12'/><path d='M0 118h10l4-4v-14'/><path d='M100 114h-8l-4 4v8'/><path d='M0 70h6'/><path d='M100 78h-6'/></g><g fill='%23ffd34d'><circle cx='14' cy='53' r='2'/><circle cx='86' cy='45' r='2'/><circle cx='14' cy='99' r='2'/><circle cx='88' cy='127' r='1.6'/><circle cx='7' cy='70' r='1.6'/><circle cx='93' cy='78' r='1.6'/></g></svg>") center / 100% 100%; }
.th-beta-sp .pack-top { color: #ffd966; }
.pack-art .disc { position: relative; z-index: 2; width: 50px; height: 50px; border-radius: 50%; margin: 4px 0 3px;
  background: conic-gradient(from 0deg, #b8860b, #ffe680, #d4a017, #fff4b0, #b8860b, #ffd34d, #ff99cc, #99ddff, #ffe680, #b8860b);
  box-shadow: 0 0 0 1px #6b4f00, 0 0 10px rgba(255, 210, 80, .6); animation: pack-spin 6s linear infinite; }
.pack-art .disc::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: #2a2a2a; box-shadow: 0 0 0 4px rgba(255, 255, 255, .55); }
@keyframes pack-spin { to { transform: rotate(360deg); } }
.th-beta-sp .pack-name { color: #ffd700; font: bold 10px "Courier New", monospace; letter-spacing: 1px; text-shadow: 0 0 5px #000, 0 0 2px #000; }
.th-beta-sp .bar { position: relative; z-index: 3; font: bold 7px "Courier New", monospace; color: #33ff66; text-shadow: 0 0 3px #33ff66; }
.th-beta-sp .ser2 { position: relative; z-index: 3; font: bold 8px Arial, sans-serif; color: #fff; letter-spacing: 1px; }
.th-beta-sp .pack-sub { color: #ffe9a8; }

/* a series without its own look yet */
.th-series .pack-art { background: linear-gradient(160deg, #ff00cc 0%, #6600ff 45%, #00ccff 100%); background-size: 200% 200%; animation: pack-shine 4s ease-in-out infinite alternate; }
.th-series .pack-name { margin-top: 26px; }

/* the shelf: daily (sunrise), welcome (cursive), free (a gift), mixed (a grab bag) */
.th-daily .pack-art { background-image: linear-gradient(160deg, #ffcc00 0%, #ff6600 50%, #ff0066 100%); }
.th-daily .pack-name { color: #fff; }
.pack-art .rays { position: absolute; left: 50%; top: 30px; width: 84px; height: 84px; margin-left: -42px; border-radius: 50%; z-index: 1;
  background: repeating-conic-gradient(rgba(255, 255, 200, .35) 0 10deg, transparent 10deg 20deg); animation: pack-spin 30s linear infinite; }
.pack-art .sun { position: relative; z-index: 2; width: 44px; height: 22px; margin-top: 8px; border-radius: 44px 44px 0 0; background: #ffee66; box-shadow: 0 0 10px 3px rgba(255, 240, 120, .8); }
.pack-art .horizon { position: relative; z-index: 2; width: 100%; height: 3px; background: rgba(255, 255, 255, .2); margin-bottom: 6px; }
.th-welcome .pack-art { background-image: linear-gradient(160deg, #ff99cc 0%, #ff3399 50%, #9933ff 100%); }
.pack-art .confetti { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(2px 2px at 14px 26px, #ffff66 99%, transparent), radial-gradient(2px 2px at 80px 34px, #66ffff 99%, transparent),
  radial-gradient(2px 2px at 26px 112px, #fff 99%, transparent), radial-gradient(2px 2px at 74px 104px, #ffff66 99%, transparent),
  radial-gradient(2px 3px at 52px 20px, #66ffcc 99%, transparent), radial-gradient(3px 2px at 88px 72px, #fff 99%, transparent),
  radial-gradient(2px 2px at 10px 80px, #66ffff 99%, transparent); }
.pack-art .script { position: relative; z-index: 2; margin: 26px 0 10px; color: #fff; transform: rotate(-6deg);
  font: bold 21px "Snell Roundhand", "Segoe Script", "Brush Script MT", "Lucida Handwriting", "Apple Chancery", cursive;
  text-shadow: 2px 2px 0 #990066, 0 0 8px rgba(255, 255, 255, .6); }
.th-free .pack-art { background-image: linear-gradient(160deg, #00cc99 0%, #0066ff 55%, #9900ff 100%); }
.pack-art .ribbon-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 12px; margin-left: -6px; z-index: 1; background: #ff3366; box-shadow: inset 3px 0 0 #ff6699, inset -3px 0 0 #cc0033; }
.pack-art .ribbon-h { position: absolute; left: 0; right: 0; top: 60px; height: 12px; z-index: 1; background: #ff3366; box-shadow: inset 0 3px 0 #ff6699, inset 0 -3px 0 #cc0033; }
.pack-art .bow { position: absolute; top: 46px; left: 50%; width: 44px; height: 24px; margin-left: -22px; z-index: 2; }
.pack-art .bow::before, .pack-art .bow::after { content: ""; position: absolute; top: 2px; width: 20px; height: 16px; background: #ff3366; border: 2px solid #cc0033; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.pack-art .bow::before { left: 0; transform: rotate(-18deg); } .pack-art .bow::after { right: 0; transform: rotate(18deg); }
.pack-art .nmwrap { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 3; display: flex !important; flex-direction: column; align-items: center; }
/* the ~*~ cLuB ~*~ pack (no series): three looks, picked by pack number */
.pack-art .club-name { position: relative; z-index: 3; color: #ffff00; font: bold 10px Arial, sans-serif; letter-spacing: -.2px; white-space: nowrap; }
/* A: starry logo */
.th-club-a .pack-art { background:
  radial-gradient(1px 1px at 10px 30px, #fff 99%, transparent), radial-gradient(1px 1px at 84px 22px, #fff 99%, transparent),
  radial-gradient(1.5px 1.5px at 22px 112px, #fff 99%, transparent), radial-gradient(1px 1px at 78px 104px, #ff9 99%, transparent),
  radial-gradient(1px 1px at 50px 120px, #fff 99%, transparent), radial-gradient(1px 1px at 66px 60px, #9ff 99%, transparent), #000; }
.th-club-a .logo { position: relative; z-index: 3; margin-top: 30px; font: 900 26px "Arial Black", Arial, sans-serif; line-height: 1; text-shadow: none;
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0c0, #09f, #c0f, #f00); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1px 1px 0 #fff) drop-shadow(2px 2px 0 #000); animation: club-rainbow 3s linear infinite; }
@keyframes club-rainbow { to { background-position: 200% 0; } }
.th-club-a .club-name { margin-top: 12px; font-size: 10.5px; }
.th-club-a .sticker { position: absolute; right: -4px; top: 26px; z-index: 6; padding: 2px 5px; transform: rotate(14deg); background: #f00; color: #fff;
  font: bold 8px Arial, sans-serif; text-shadow: none; border: 1px solid #fff; box-shadow: 1px 1px 0 #000; animation: club-sticker 1s steps(1) infinite; }
@keyframes club-sticker { 50% { background: #ff0; color: #f00; } }
/* B: the cLuB's own button */
.th-club-b .pack-art { background: repeating-linear-gradient(45deg, #000080 0 8px, #000066 8px 16px); }
.pack-art .club-btn { position: relative; z-index: 3; margin-top: 16px; width: 88px; height: 31px; box-sizing: border-box; display: flex !important; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #e8e8e8, #a8a8a8); border: 2px outset #fff; color: #000080; text-shadow: none; font: bold 10px Arial, sans-serif; white-space: nowrap; overflow: hidden; }
.pack-art .club-btn i { font-style: normal; color: #f0c; }
.pack-art .club-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%);
  background-size: 250% 100%; animation: club-glint 2.8s ease-in-out infinite; }
@keyframes club-glint { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.th-club-b .club-name { margin-top: 12px; }
.th-club-b .stars3 { position: relative; z-index: 3; color: #ff0; font-size: 12px; letter-spacing: 4px; margin-top: 4px; }
/* C: a little homepage window */
.th-club-c .pack-art { background: linear-gradient(160deg, #008080, #004d66 60%, #002b40); }
.pack-art .win95 { position: relative; z-index: 3; margin-top: 6px; width: 82px; background: #c0c0c0; border: 2px outset #fff; text-shadow: none; }
.pack-art .win95 .tb { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font: bold 6.5px Arial, sans-serif; padding: 1px 2px; }
.pack-art .win95 .tb i { font-style: normal; background: #c0c0c0; color: #000; width: 7px; height: 6px; font-size: 6px; line-height: 6px; text-align: center; }
.pack-art .win95 .addr { display: block; background: #fff; color: #000; font: 6.5px "Courier New", monospace; margin: 2px; padding: 0 2px; border: 1px inset #888; text-align: left; }
.pack-art .win95 .pg { display: block; position: relative; margin: 2px; height: 36px; overflow: hidden;
  background: radial-gradient(1px 1px at 8px 8px, #fff 99%, transparent), radial-gradient(1px 1px at 60px 12px, #fff 99%, transparent), radial-gradient(1px 1px at 30px 30px, #ff9 99%, transparent), #000; }
.pack-art .win95 .pg b { display: block; text-align: center; color: #ff0; font: bold 8px "Comic Sans MS", cursive; margin-top: 4px; }
.pack-art .win95 .pg em { display: block; text-align: center; font: bold 7px Arial, sans-serif; font-style: normal; margin-top: 3px;
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0c0, #09f, #c0f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack-art .win95 .pg .uc { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-45deg, #000 0 4px, #fc0 4px 8px); }
.th-club-c .club-name { margin-top: 6px; }

/* v0.33: three more ~*~cLuB~*~ looks */
/* D: kawaii (pastel, hearts, a little cat) */
.th-club-d .pack-art { background:
  radial-gradient(circle at 15% 20%, rgba(255,255,255,.7) 0 2px, transparent 3px), radial-gradient(circle at 80% 70%, rgba(255,255,255,.6) 0 2px, transparent 3px),
  linear-gradient(170deg, #ffd1ec 0%, #ffb3de 40%, #d9c2ff 100%); color: #ff3fa4; text-shadow: 0 1px 0 #fff; }
.pack-art .hearts { position: absolute; inset: 0; z-index: 1; color: rgba(255,255,255,.75); font-size: 9px; line-height: 17px; letter-spacing: 9px; white-space: pre; text-shadow: none; overflow: hidden; }
.pack-art .kitty { position: relative; z-index: 3; margin-top: 18px; width: 64px; height: 44px; display: flex !important; align-items: center; justify-content: center;
  background: #fff; border-radius: 50% 50% 46% 46%; color: #ff3fa4; font: bold 11px Arial, sans-serif; text-shadow: none; box-shadow: 0 2px 0 #ff9dd2, 0 0 0 2px #ffe3f3; }
.pack-art .kitty::before, .pack-art .kitty::after { content: ""; position: absolute; top: -7px; width: 0; height: 0; border: 9px solid transparent; border-bottom-color: #fff; }
.pack-art .kitty::before { left: 6px; transform: rotate(-18deg); } .pack-art .kitty::after { right: 6px; transform: rotate(18deg); }
.pack-art .kitty i { position: absolute; bottom: 9px; width: 7px; height: 4px; border-radius: 50%; background: #ffb3d6; font-style: normal; }
.pack-art .kitty i.l { left: 8px; } .pack-art .kitty i.r { right: 8px; }
.th-club-d .club-name { margin-top: 10px; color: #ff3fa4; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.th-club-d .pack-sub { color: #b04dff; text-shadow: 0 1px 0 #fff; }
.th-club-d .pack-top { color: #b04dff; text-shadow: 0 1px 0 #fff; }
.pack-art .twinkle { position: absolute; z-index: 4; color: #fff; font-size: 12px; text-shadow: 0 0 4px #ff8ad0; animation: club-twinkle 1.8s ease-in-out infinite; }
.pack-art .twinkle.t2 { animation-delay: .6s; font-size: 9px; } .pack-art .twinkle.t3 { animation-delay: 1.2s; font-size: 10px; }
@keyframes club-twinkle { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1.1); opacity: 1; } }

/* E: bling (rhinestones on black velvet, chrome letters) */
.th-club-e .pack-art { background: radial-gradient(ellipse at 50% 35%, #3a1450 0%, #14051c 70%); }
.pack-art .gems { position: absolute; inset: 3px; z-index: 2; border-radius: 3px 3px 8px 8px; pointer-events: none;
  background:
    radial-gradient(circle, #fff 0 1px, #c9f 1.6px, transparent 2.6px) 0 0 / 8px 8px repeat-x,
    radial-gradient(circle, #fff 0 1px, #9ff 1.6px, transparent 2.6px) 0 100% / 8px 8px repeat-x,
    radial-gradient(circle, #fff 0 1px, #fcf 1.6px, transparent 2.6px) 0 0 / 8px 8px repeat-y,
    radial-gradient(circle, #fff 0 1px, #ff9 1.6px, transparent 2.6px) 100% 0 / 8px 8px repeat-y; }
.pack-art .bling { position: relative; z-index: 3; margin-top: 24px; font: 900 25px "Arial Black", Arial, sans-serif; letter-spacing: -1px; line-height: 1; text-shadow: none;
  background: linear-gradient(180deg, #fff 0%, #e6e6e6 30%, #8c8c8c 50%, #fff 52%, #d4af37 80%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 200, 255, .8)) drop-shadow(1px 1px 0 #000); }
.th-club-e .gem { position: relative; z-index: 3; margin-top: 4px; width: 16px; height: 16px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff, #9ff 40%, #c6f 70%, #fff); box-shadow: 0 0 8px #fff, 0 0 2px #c6f; animation: club-gem 2.4s ease-in-out infinite; }
@keyframes club-gem { 50% { box-shadow: 0 0 14px #fff, 0 0 6px #9ff; filter: brightness(1.3); } }
.th-club-e .club-name { margin-top: 10px; color: #ffd700; text-shadow: 0 0 4px #ff00cc, 1px 1px 0 #000; }
.th-club-e .pack-sub { color: #ffccff; }
.th-club-e .sparkle { position: absolute; z-index: 5; width: 9px; height: 9px; background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: club-twinkle 1.6s ease-in-out infinite; }

/* F: holo heart sticker book */
.th-club-f .pack-art { background: linear-gradient(130deg, #c6f7ff, #ffd6f5 25%, #fff6c4 45%, #d4ffd9 65%, #e0d1ff 85%, #c6f7ff);
  background-size: 300% 300% !important; animation: pack-shine 3s ease-in-out infinite alternate; color: #6a2ca0; text-shadow: 0 1px 0 #fff; }
.pack-art .holo-heart { position: relative; z-index: 3; margin-top: 18px; width: 58px; height: 52px; display: grid !important; place-items: center; }
.pack-art .holo-heart::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #ff5fc8, #ff9ad5 40%, #c77dff 70%, #ff5fc8);
  clip-path: path("M29 50 C 6 34, 0 22, 4 12 C 9 0, 24 0, 29 11 C 34 0, 49 0, 54 12 C 58 22, 52 34, 29 50 Z");
  filter: drop-shadow(0 2px 0 #fff); }
.pack-art .holo-heart b { position: relative; margin-top: -6px; color: #fff; font: 900 12px "Arial Black", Arial, sans-serif; text-shadow: 1px 1px 0 #b0006a; }
.pack-art .stk { position: absolute; z-index: 4; padding: 1px 4px; font: bold 7.5px Arial, sans-serif; color: #fff; text-shadow: none; border: 1px solid #fff; border-radius: 6px; box-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.pack-art .stk.xo { right: 4px; top: 22px; background: #ff4fa8; transform: rotate(12deg); }
.pack-art .stk.qt { left: 3px; top: 66px; background: #6c8cff; transform: rotate(-10deg); }
.pack-art .star { position: absolute; z-index: 4; color: #ffd400; font-size: 13px; text-shadow: 0 0 0 #fff, 1px 1px 0 #fff, -1px -1px 0 #fff; }
.th-club-f .club-name { margin-top: 8px; color: #ff2fa0; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
.th-club-f .pack-sub, .th-club-f .pack-top { color: #6a2ca0; text-shadow: 0 1px 0 #fff; }
@media (prefers-reduced-motion: reduce) { .pack-art .twinkle, .th-club-e .gem, .th-club-e .sparkle { animation: none; } }

/* opened for today: grey and completely still */
.pack-tile.used { cursor: default; }
.pack-tile.used:hover { transform: none; }
.pack-tile.used .pack-art { filter: grayscale(1) brightness(.6); }
.pack-tile.used, .pack-tile.used * { animation: none !important; }
.pack-tile.used .gleam { display: none; }

/* ---------- opening a pack (v0.27) ----------
   Alpha (and new series): the top rips off, then the cards are dealt face down and flip.
   Beta: the pack switches off like an old TV, and each card powers on.
   Shelf packs: the pack glows and fades, then deal & flip. Rares and ultras flip last. */
.open-stage { position: relative; min-height: 150px; }
.open-stage.animating { pointer-events: none; }
.open-stage .packbox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; pointer-events: none; }
.open-stage .packbox .pack-tile:hover { transform: none; }
.open-stage .packbody { position: relative; }
.open-stage .flipcard, .open-stage .tv-card { opacity: 0; }
.open-stage.go .packbox { animation: pack-gone 0s forwards; animation-delay: 2s; }
@keyframes pack-gone { to { visibility: hidden; } }
/* rip */
.op-rip .tearpiece { position: absolute; left: 0; top: 0; width: 100%; height: 20px; overflow: hidden; visibility: hidden; }
.op-rip.go .tearpiece { visibility: visible; animation: op-tear .55s ease-in forwards; }
.op-rip.go .packbody { clip-path: inset(20px -12px -12px -12px); animation: op-sink .45s .35s ease-in forwards; }
@keyframes op-tear { 30% { transform: translate(6px, -8px) rotate(6deg); } to { transform: translate(70px, -90px) rotate(35deg); opacity: 0; } }
@keyframes op-sink { to { transform: translateY(50px) scale(.9); opacity: 0; } }
/* reveal */
.op-reveal.go .packbody { animation: op-glowfade .7s ease-out forwards; }
@keyframes op-glowfade { 40% { filter: brightness(1.6) drop-shadow(0 0 14px #fff); transform: scale(1.04); } to { filter: brightness(2) drop-shadow(0 0 20px #fff); transform: scale(1.08); opacity: 0; } }
/* deal & flip */
.flipcard { position: relative; perspective: 800px; }
.flip-inner { position: relative; transform-style: preserve-3d; transform: rotateY(180deg); }
.flip-inner > .card:first-child { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-inner > .flip-back { position: absolute; inset: 0; width: auto; height: auto; margin: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: rotateY(180deg); }
.open-stage.go .flipcard { animation: op-deal .55s ease-out forwards; animation-delay: calc(var(--d0) + var(--i) * .22s); }
@keyframes op-deal { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(-10deg) scale(.8); } to { opacity: 1; transform: none; } }
.open-stage.go .flip-inner { animation: op-flip .8s ease-in-out forwards; animation-delay: calc(var(--f0) + var(--k) * .85s); }
@keyframes op-flip { to { transform: rotateY(0deg); } }
.open-stage.go .flipcard.is-rare::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  animation: op-rare 1.2s forwards; animation-delay: calc(var(--f0) + var(--k) * .85s + .8s); }
@keyframes op-rare { 0% { opacity: 0; box-shadow: none; } 30% { opacity: 1; box-shadow: 0 0 0 3px #ff0, 0 0 40px 16px #ff0; } 100% { opacity: 1; box-shadow: 0 0 0 2px #ff0, 0 0 12px 3px #ff0; } }
/* CRT off / on */
.op-tv.go .packbody { animation: op-tvoff .6s ease-in forwards; }
@keyframes op-tvoff { 55% { transform: scale(1.06, .02); filter: brightness(4); opacity: 1; } 85% { transform: scale(.04, .02); filter: brightness(6); opacity: 1; } to { transform: scale(0, .02); opacity: 0; } }
.open-stage .tv-card { position: relative; }
.op-tv.go .tv-card { animation: op-tvon .55s ease-out forwards; animation-delay: calc(var(--d0) + var(--i) * .2s); }
@keyframes op-tvon { 0% { opacity: 1; transform: scale(.05, .02); filter: brightness(5); } 45% { transform: scale(1, .02); filter: brightness(4); } 100% { opacity: 1; transform: none; filter: none; } }
.op-tv .tv-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .45) 0 1px, transparent 1px 3px), linear-gradient(rgba(51, 255, 102, .15), rgba(51, 255, 102, .15)); }
.op-tv.go .tv-card::after { animation: op-scanfade 1.1s ease-out forwards; animation-delay: calc(var(--d0) + .15s + var(--i) * .2s); }
@keyframes op-scanfade { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pack-tile, .pack-tile * { animation: none !important; }
  .pack-art .gleam, .pack-art .refresh, .pack-art .rain, .pack-art .spark, .pack-art .holo, .pack-art .glitter { display: none; }
}

/* ---------- How to Play & Fair Play (v0.28) ---------- */
.toc { columns: 2; column-gap: 24px; margin: 8px 0 4px; padding-left: 24px; }
.toc li { margin: 2px 0; break-inside: avoid; }
@media (max-width: 600px) { .toc { columns: 1; } }
#howto .panel, #fair .panel { scroll-margin-top: 8px; }
.odds-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.odds-table th, .odds-table td { border: 1px solid #4040a0; padding: 4px 6px; text-align: left; vertical-align: top; }
.odds-table thead th { background: #000040; color: var(--ink); }
.odds-table tbody th { white-space: nowrap; }
.odds-table tbody th small { display: block; font-weight: normal; white-space: normal; }
.odds-table td:not(:last-child) { white-space: nowrap; }
.fair-series h3 { margin: 10px 0 4px; color: #00ffff; }
.fair-series p { margin: 3px 0; }
.fair-bar { display: inline-block; width: 140px; max-width: 40vw; height: 9px; border: 1px solid #c0c0c0; background: #000040; vertical-align: middle; }
.fair-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #00ff66, #ffff00, #ff6600); }
@media (max-width: 600px) { .odds-table { font-size: 12px; } .odds-table tbody th { white-space: normal; } .odds-table td:not(:last-child) { white-space: normal; } }
#fair-odds, #fair-packs, #fair-foils { overflow-x: auto; }

/* v0.30: starter quests, trade-in, request picker */
.quest-list { list-style: none; margin: 4px 0 0; padding-left: 8px; }
.quest.done { color: #99ff99; text-decoration: line-through; }
.tradein { margin-top: 8px; }
.tradein summary { cursor: pointer; color: #ffff99; }
.pick-grid, .design-pick-grid { display: flex; flex-wrap: wrap; gap: 4px; max-height: 260px; overflow-y: auto; margin: 6px 0; }
.design-pick { display: flex; flex-direction: column; align-items: center; width: 104px; }
.design-pick .small { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-search { width: 100%; max-width: 260px; }

/* v0.30.1: dashboard spacing and the streak track */
.dash-gap { height: 1em; }
.streak-chart { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; margin: 4px 0 6px; }
.sk-day { display: flex; flex-direction: column; align-items: center; min-width: 0; position: relative; }
/* the dashed path between days, behind the packs */
.sk-day:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: 50%; right: -50%; border-top: 1px dashed #6666aa; z-index: 0; }
.sk-pack { height: 40px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.sk-none { color: #555577; background: var(--panel); padding: 0 3px; }
.sk-mini { display: inline-block; width: 28px; height: 38px; overflow: hidden; pointer-events: none; position: relative; }
.sk-mini .pack-tile { transform: scale(0.28); transform-origin: top left; }
.sk-mini .pack-tile:hover, .sk-mini .pack-tile:active { transform: scale(0.28); }
.sk-real { pointer-events: auto; cursor: pointer; }
.sk-real:hover { outline: 1px solid #ffff00; }
/* two packs on one day sit stacked, the second peeking out */
.sk-stack .sk-mini + .sk-mini { margin-left: -14px; margin-top: 8px; }
.sk-future .sk-mini { opacity: 0.85; }
.sk-num { font-size: 13px; color: #9999cc; margin-top: 3px; min-width: 20px; height: 20px; line-height: 20px; text-align: center; position: relative; }
/* days already behind you: crossed out */
.sk-past .sk-num { color: #8888aa; }
.sk-past .sk-num::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 2px solid #ff5555; transform: rotate(-35deg); }
/* today: circled */
.sk-today .sk-num { color: #ffff00; font-weight: bold; border: 2px solid #ffff00; border-radius: 50%; width: 20px; min-width: 0; line-height: 16px; box-sizing: border-box; }
/* day 100 and up: the circle stretches to fit */
.sk-today .sk-num.sk-wide { width: auto; padding: 0 3px; border-radius: 10px; }

/* v0.31: prototype tier (only 4 of each) */
img.rarity-prototype { border-color: #c8c8d0; outline: 1px dashed #6a6a78; }
.lg-prototype { border-color: #c8c8d0; border-style: dashed; }
.proto-tag { display: inline-block; background: #fbfaf6; color: #3a3a44; padding: 0 5px; font-weight: bold; letter-spacing: 1px;
  border: 1px solid #55555f; border-radius: 3px 6px 2px 7px / 6px 2px 7px 3px; transform: rotate(-1.5deg);
  box-shadow: 1px 1px 0 #9a9aa6, -1px 0 0 #b8b8c2 inset;
  background-image: repeating-linear-gradient(-35deg, transparent 0 3px, rgba(90,90,100,.08) 3px 4px); }
.proto-note { color: #d8d8e8; font-style: italic; }

/* v0.31.1: gifts in the dashboard's right column, folding panels */
.dash-gifts { margin-top: 8px; font-weight: normal; }
.dash-gift { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; max-width: 190px; }
.dash-gift .dash-pic { zoom: 2; image-rendering: pixelated; }   /* the last gift you got / gave, twice the size */
.dash-gift .dash-pic { margin-left: 0; }

/* v0.31.2: opened packs lose their shine and color; the All the Packs page */
.pack-tile.spent { filter: grayscale(1) brightness(0.8) contrast(0.9); }
.pack-tile.spent, .pack-tile.spent * { animation: none !important; }
.pack-tile.spent .gleam, .pack-tile.spent .sparkle, .pack-tile.spent .twinkle, .pack-tile.spent .sparks, .pack-tile.spent .spark, .pack-tile.spent .holo, .pack-tile.spent .glitter, .pack-tile.spent .refresh, .pack-tile.spent .scan { display: none !important; }
.pack-tile.spent:hover { transform: none; }
.allpacks { justify-content: flex-start; }
.allpacks .pack-slot .small { text-align: center; }

/* v0.32: hold-to-open windows and tearing pouches */
.ho-shade { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 40, .55); display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.ho-win { width: min(340px, 100%); background: #c3c3c3; color: #111; border: 2px solid; border-color: #fff #1c1c1c #1c1c1c #fff;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf, 6px 6px 0 rgba(0,0,0,.35); font-family: Tahoma, "MS Sans Serif", sans-serif; }
.ho-tb { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 3px 4px 3px 6px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 8px; }
.ho-win.gold .ho-tb { background: linear-gradient(90deg, #6a4a00, #d4a017); }
.ho-x { background: #c3c3c3; color: #111; width: 18px; height: 16px; padding: 0; font-size: 11px; line-height: 1; border: 1px solid; border-color: #fff #1c1c1c #1c1c1c #fff; cursor: pointer; }
.ho-body { padding: 12px; display: grid; gap: 9px; }
.ho-status { font-family: "Courier New", monospace; font-size: 15px; min-height: 2.4em; line-height: 1.2; }
.ho-well { border: 2px solid; border-color: #808080 #fff #fff #808080; background: #fff; height: 20px; position: relative; overflow: hidden; }
.ho-fill { position: absolute; inset: 2px auto 2px 2px; width: 0; background: #000080; }
.ho-well.blocks .ho-fill { background: repeating-linear-gradient(90deg, #000080 0 9px, transparent 9px 11px); }
.ho-win.gold .ho-well.blocks .ho-fill { background: repeating-linear-gradient(90deg, #b8860b 0 9px, transparent 9px 11px); }
.ho-pct { display: flex; justify-content: space-between; gap: 8px; font-family: "Courier New", monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.ho-row { display: flex; gap: 10px; align-items: center; }
.ho-btn { font: inherit; font-size: 14px; padding: 7px 16px; background: #c3c3c3; color: #111; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  border: 2px solid; border-color: #fff #1c1c1c #1c1c1c #fff; box-shadow: inset -1px -1px 0 #808080; }
.ho-btn.down { border-color: #1c1c1c #fff #fff #1c1c1c; box-shadow: inset 1px 1px 0 #808080; }
.ho-btn:focus-visible { outline: 1px dotted #111; outline-offset: -5px; }
.ho-row .small { color: #333; }
.ho-modem { display: flex; gap: 6px; }
.ho-modem span { width: 10px; height: 10px; border-radius: 50%; background: #3b4a3b; border: 1px solid #1c1c1c; }
.ho-modem span.on { background: #39ff6a; box-shadow: 0 0 6px #39ff6a; }
.ho-term { background: #000; color: #c0c0c0; font-family: "Courier New", monospace; font-size: 14px; padding: 6px 8px; min-height: 5.4em; white-space: pre-wrap; line-height: 1.2;
  border: 2px solid; border-color: #808080 #fff #fff #808080; }
.ho-term.gold { color: #ffcf3a; }
.ho-cassette { width: 100%; height: auto; display: block; }
/* tearing pouches */
.pack-tile .tear-cut { position: absolute; left: 0; top: 13%; height: 3px; width: 0; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(90deg, #fff 0 3px, transparent 3px 5px); filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.pack-tile .tear-hint { position: absolute; left: 4px; top: 9%; z-index: 6; font-size: 9px; color: rgba(255,255,255,.75); text-shadow: 0 1px 0 #000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pack-tile.pouch:hover .tear-hint, .pack-tile.tearing .tear-hint { opacity: 1; }
.pack-tile.tearing { cursor: grabbing; }
.pack-tile.torn .pack-art { clip-path: polygon(0 16%, 8% 13%, 17% 16%, 26% 12%, 35% 16%, 44% 13%, 53% 16%, 62% 12%, 71% 16%, 80% 13%, 89% 16%, 100% 13%, 100% 100%, 0 100%); transition: clip-path .2s; }
.pack-tile.torn::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16%; background: inherit; animation: tear-off .45s ease-in forwards; pointer-events: none; }
@keyframes tear-off { to { transform: translate(30px, -40px) rotate(18deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pack-tile.torn::after { animation: none; display: none; } }

/* v0.32.1: a smaller loader window that sits over the pack; breathing room on the dashboard */
.ho-shade { background: transparent; }   /* no dimming: the page stays as it is */
.ho-win { width: min(250px, calc(100vw - 16px)); }
.ho-tb { font-size: 11px; padding: 2px 3px 2px 5px; }
.ho-body { padding: 8px; gap: 6px; }
.ho-status { font-size: 12px; min-height: 2.5em; }
.ho-well { height: 15px; }
.ho-pct { font-size: 11px; }
.ho-btn { font-size: 12px; padding: 5px 12px; }
.ho-row .small { font-size: 10px; }
.ho-term { font-size: 12px; min-height: 4.8em; }
.ho-modem span { width: 8px; height: 8px; }
.dash-list li.dash-gap-after { margin-bottom: 1.1em; }
.pack-tile.tear-ready .tear-cut { background: repeating-linear-gradient(90deg, #ffff66 0 3px, transparent 3px 5px); }
.pack-tile.tear-ready .tear-hint { color: #ffff66; }
.pack-tile.tear-ready .pack-art { animation: tear-shake .12s linear infinite; }
@keyframes tear-shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1px, 0) rotate(-1deg); } 75% { transform: translate(1px, 0) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .pack-tile.tear-ready .pack-art { animation: none; outline: 2px dashed #ffff66; } }
.tear-flap { position: absolute; inset: 0; z-index: 7; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)); transition: transform .06s linear; }
.tear-flap > .pack-art { position: absolute; inset: 0; }
.tear-flap.gone { transition: transform .45s ease-in, opacity .45s; transform: translate(26px, -46px) rotate(-40deg) !important; opacity: 0; }
.pack-tile .tear-cut { top: 15% !important; }
.pack-tile.torn::after { display: none; }

/* v0.34: sealed packs in trades and guestbook stamps, at half size */
.pk-mini { display: inline-block; width: 50px; height: 68px; overflow: hidden; pointer-events: none; vertical-align: middle; }
.pk-mini .pack-tile, .pk-mini .pack-tile:hover { transform: scale(0.5); transform-origin: top left; }
.tb-packs { margin-top: 6px; }
.pack-tile.in-trade { opacity: .55; }
.pack-tile.in-trade:hover { transform: none; }

/* v0.34.3: Print Runs with pack pictures */
.fair-series { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dotted #808080; }
.fair-series:last-child { border-bottom: 0; }
.fs-packs { display: flex; gap: 12px; flex: none; }
.fs-packs figure { margin: 0; text-align: center; }
.fs-packs figcaption { margin-top: 4px; max-width: 110px; }
.fs-info { flex: 1 1 240px; min-width: 0; }
.fs-info h3 { margin-top: 0; }
.pack-tile.still, .pack-tile.still:hover, .pack-tile.still:active { transform: none; cursor: default; }

/* v0.34.11: Fair Play "LIMITED" tag under each series' limited pack */
.limited-tag { display: inline-block; margin-top: 2px; padding: 0 4px; border: 1px solid currentColor; font-size: 10px; letter-spacing: 1px; }

/* travel (v0.36): a button away in 4Dungeon, and dungeon items visiting */
.tile.away img { opacity: .45; filter: grayscale(.6); }
.visitor-card { display: inline-block; vertical-align: top; width: 220px; margin: 6px; padding: 8px 10px; border: 1px dashed currentColor; text-align: left; }
.visitor-card button { display: block; margin-top: 6px; }

/* ---------- the ~*~cLuB~*~ Single (v0.45): three 90s Blingee kawaii looks, glitter fill, rhinestone edge, twinkles ---------- */
.bl .pack-art{justify-content:center;gap:2px;text-shadow:none;border:0!important;border-radius:6px!important}
.bl .glit{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(#fff 0.7px,transparent 1.3px) 0 0/7px 7px,radial-gradient(rgba(255,255,255,.8) 0.6px,transparent 1.2px) 3px 4px/9px 9px,radial-gradient(rgba(255,255,255,.55) 0.5px,transparent 1px) 1px 2px/5px 5px;
  animation:bl-glit .45s steps(2) infinite;mix-blend-mode:screen}
@keyframes bl-glit{50%{background-position:1px 1px,4px 3px,2px 1px;opacity:.75}}
.bl .stones{position:absolute;inset:2px;z-index:3;pointer-events:none;border-radius:5px;
  background:radial-gradient(circle,#fff 0 1.2px,var(--st) 1.8px 2.6px,transparent 3px) 0 0/9px 9px repeat-x,radial-gradient(circle,#fff 0 1.2px,var(--st) 1.8px 2.6px,transparent 3px) 0 100%/9px 9px repeat-x,
             radial-gradient(circle,#fff 0 1.2px,var(--st) 1.8px 2.6px,transparent 3px) 0 0/9px 9px repeat-y,radial-gradient(circle,#fff 0 1.2px,var(--st) 1.8px 2.6px,transparent 3px) 100% 0/9px 9px repeat-y}
.bl .tw{position:absolute;z-index:4;color:#fff;font:12px/1 Arial;animation:bl-tw 1.1s ease-in-out infinite}
@keyframes bl-tw{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.bl .t{z-index:2;position:relative}
.bl .top{font:bold 7px Verdana,Arial,sans-serif;letter-spacing:.3px}
.bl .chrome{font:900 italic 23px/1 "Arial Black",Impact,Arial,sans-serif;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff 0%,#ffd6f2 30%,#ff4fb8 52%,#ffe6f7 56%,#ff8fd6 80%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.6px #b0006e;filter:drop-shadow(1px 1px 0 #fff)}
.bl .stamp{display:inline-block;padding:1px 5px;border-radius:8px;font:bold 8px Verdana,Arial,sans-serif;transform:rotate(-6deg)}

/* A: Glitter Bunny (hot pink) */
.th-bl-a .pack-art{background:linear-gradient(160deg,#ff5fb7,#ff9bd6 45%,#ff63c0);--st:#ff2f9e;--tw:#fff}
.th-bl-a .top{color:#fff;text-shadow:1px 1px 0 #d4007a}
.th-bl-a .heart{width:46px;height:40px;position:relative;margin:2px 0 -2px}
.th-bl-a .heart::before,.th-bl-a .heart::after{content:"";position:absolute;top:0;width:24px;height:37px;border-radius:24px 24px 0 0;background:linear-gradient(#fff,#ffe1f3);box-shadow:0 0 0 1.5px #ff2f9e}
.th-bl-a .heart::before{left:23px;transform:rotate(-45deg);transform-origin:0 100%}.th-bl-a .heart::after{left:-1px;transform:rotate(45deg);transform-origin:100% 100%}
.th-bl-a .face{position:absolute;left:0;right:0;top:13px;z-index:1;text-align:center;font:bold 11px/1 Arial;color:#c2006f;white-space:nowrap}
.th-bl-a .chrome{margin-top:2px}
.th-bl-a .stamp{background:#fff;color:#ff2f9e;box-shadow:0 0 0 1px #ff2f9e}

/* B: (v0.45.2) back to the v0.37 white link page (look c then): a plain white page with a link, a rainbow line and a webring, no shine */
.pack-tile.still-art .pack-art { animation: none; }
.th-fp-c .pack-art { text-shadow: none; justify-content: center; gap: 4px; }
.th-fp-c .pack-art { background: #ffffff; border-color: #000; color: #000; box-shadow: 3px 3px 0 #000; }
.th-fp-c .fp-top { font: bold 8px "Times New Roman", serif; }
.th-fp-c .fp-link { font: 16px "Times New Roman", serif; color: #0000ee; text-decoration: underline; margin-top: 10px; }
.th-fp-c .fp-visited { font: 10px "Times New Roman", serif; color: #551a8b; text-decoration: underline; }
.th-fp-c .fp-ring { font: 7px "Times New Roman", serif; color: #0000ee; margin-top: 12px; white-space: nowrap; }
.th-fp-c .fp-rainbow { width: 76px; height: 4px; margin: 4px 0; background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #00cc00, #0066ff, #9900cc); }
.th-fp-c .fp-mail { font: 8px "Times New Roman", serif; color: #0000ee; margin-top: 6px; }
.th-fp-c .fp-ring { margin-top: 6px; }
.th-fp-c .fp-link { font-size: 18px; font-weight: bold; }
.th-fp-c .fp-link { font-size: 20px; }
.th-fp-c .fp-club { font: bold 9px "Times New Roman", serif; color: #0000ee; margin: 6px 0 -4px; }
.th-fp-c .fp-link { margin-top: 0; }
.th-fp-c .fp-rainbow { flex-shrink: 0; }

/* C: Midnight Tiara (black + pink glitter) */
.th-bl-c .pack-art{background:radial-gradient(circle at 50% 42%,#5a1263,#1a0420 70%);--st:#ff7ad1;--tw:#ff7ad1}
.th-bl-c .glit{background:radial-gradient(#ff9ad9 0.7px,transparent 1.3px) 0 0/11px 11px,radial-gradient(#fff 0.6px,transparent 1.2px) 5px 4px/17px 17px}
.th-bl-c .top{color:#ffb3e6}
.th-bl-c .tiara{font:14px/1 Arial;color:#fff;letter-spacing:-1px;margin-bottom:-6px}
.th-bl-c .chrome{background:linear-gradient(180deg,#fff,#ffc4ec 40%,#ff3fae 55%,#fff 100%);-webkit-background-clip:text;background-clip:text}
.th-bl-c .xo{font:italic bold 11px Georgia,serif;color:#ff7ad1}
.th-bl-c .stamp{background:linear-gradient(90deg,#ff3fae,#b04fff);color:#fff}

/* (v0.37) the bottom menu, the same size as the top one */
.bottom-bar { font-size: 18px; }
@media (max-width: 560px) { .bottom-bar { font-size: 15px; } }
.bottom-bar a { white-space: nowrap; }

/* (v0.37) packs are pictures: no selecting their words, no long-press menu on phones */
.pack-tile, .pack-tile * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* --- Theme Wall (v0.38): your ring's wall for the week --- */
.tw-theme { color: var(--ink); font-size: 20px; letter-spacing: 1px; }
.tw-warn { color: var(--ink); font-weight: bold; }
.tw-scroll { overflow-x: auto; padding: 4px 0; }
.tw-canvas {
  position: relative; margin: 0 auto; background-color: #000044; border: 3px inset var(--edge);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.22) 1px, transparent 1.6px);
  background-size: var(--g) var(--g);
}
.tw-pin { position: absolute; display: flex; align-items: center; justify-content: center; }
.tw-pin > img, .tw-pin > .foil-wrap, .tw-pin > .fx { flex: none; }
.tw-pin.tw-link { cursor: pointer; }
.tw-pin.tw-link:hover { outline: 2px solid var(--ink); z-index: 2; }
.tw-pin.tw-empty { border: 2px dashed #666; background: rgba(255, 255, 255, 0.04); }
.tw-pin.tw-empty.tw-mine { border-color: var(--ink); }
.tw-ghost { font: 11px Arial, Helvetica, sans-serif; color: var(--ink); text-align: center; }
.tw-mine { cursor: grab; touch-action: none; user-select: none; outline: 2px dashed var(--ink); outline-offset: 1px; z-index: 3; }
.tw-mine.tw-drag { cursor: grabbing; opacity: 0.85; z-index: 4; }
.tw-mine:focus-visible { outline-style: solid; }
.tw-star { position: absolute; top: -7px; right: -5px; z-index: 5; font: bold 13px Arial, Helvetica, sans-serif; color: #000; background: var(--ink);
  border: 1px solid #000; border-radius: 50%; width: 16px; height: 16px; line-height: 14px; text-align: center; pointer-events: none; }
.tw-none { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: #aaa; }
.tw-controls button.mini { margin: 0 1px; }
.tw-tray { margin: 8px 0; padding: 8px; border: 2px dashed var(--edge); background: #000033; }
.tw-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; justify-content: center; position: relative; height: 130px; overflow-y: auto; overscroll-behavior: contain; }   /* fixed height; scrolls if you have more buttons than fit */
.tw-pick { position: relative; }
.tw-pick.tw-off { opacity: 0.4; cursor: not-allowed; }
.tw-roster { list-style: none; padding: 0; margin: 0; }
.tw-roster li { padding: 2px 0; }
.tw-stars { margin: 4px auto; text-align: right; }
.tw-starrow { color: var(--ink); font-size: 22px; letter-spacing: 3px; line-height: 1.2; overflow-wrap: anywhere; }
.tw-starrow.dim { color: #8888aa; }
.ring-box { margin: 10px 0; padding: 8px; border: 2px ridge var(--edge); background: #000033; }
.ring-box h3 { margin-top: 0; }
.rings-make input, .ring-box input { max-width: 200px; }
.tw-head{margin-top:1.6em}
table.webring td.wr-side { width: 20%; vertical-align: middle; }
table.webring td { padding: 12px 6px; }
.wr-logo { width: 100px; height: 100px; margin: 0 auto 8px; border: 2px dashed var(--edge); display: flex; align-items: center; justify-content: center; font-size: 11px; opacity: .7; }
#wr-rings a { display: inline-block; margin: 2px 6px; }
.tw-carried { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; transform-origin: 0 0; opacity: .85; filter: drop-shadow(3px 3px 3px #000); }
.tw-preview { position: absolute; border: 2px dashed #ffff00; background: rgba(255,255,0,.12); pointer-events: none; box-sizing: border-box; }
.tw-tray { margin-top: 10px; }
.tw-tray.over { outline: 3px dashed #ff6666; }
.tw-tray-hint { text-align: center; margin: 4px 0; }
.tw-pick, .tw-pin { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
body.tw-carrying { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.tw-carrying * { cursor: grabbing !important; }
.tw-lock { margin-bottom: 1.6em; }
/* (v0.45.6) the collection is a grid of equal columns, one per button on a row (--cols), the buttons centred in them (see drawCollection) */
#page-collection { margin-bottom: 1.2em; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--rowgap, 8px) 0; }
.stamp img.banner { image-rendering: pixelated; }