/* Plumplings brand theme (Nov 2026). Its own palette and look, kept apart from the Extrudio shop styles so the brand can
   move to plumplings.co.uk with this folder (logo.svg, theme.css, page.js). Everything is scoped under .plum or plum-*. */
:root {
  --pl-berry: #FF5D8F; --pl-sun: #FFC83D; --pl-mint: #2EC4B6; --pl-plum: #8A5CF6; --pl-ink: #2B1B4A; --pl-cream: #FFF6E5; --pl-night: #1B1033;
}
.plum { --pl-bg: var(--pl-night); --pl-card: #2A1A4D; --pl-text: #FFF6E5; --pl-muted: #CDBFEA; color: var(--pl-text); }
:root[data-theme="light"] .plum { --pl-bg: #FFF1E0; --pl-card: #FFFFFF; --pl-text: var(--pl-ink); --pl-muted: #6B5A8A; }
.plum { background: radial-gradient(1200px 500px at 10% -10%, rgba(255, 93, 143, .25), transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(46, 196, 182, .22), transparent 60%), var(--pl-bg);
  border-radius: 24px; padding: 18px; margin: 0 -4px 20px; overflow: hidden; font-family: inherit; }
.plum h1, .plum h2, .plum h3 { color: var(--pl-text); letter-spacing: .2px; }
.plum h2 { font-size: 1.6rem; margin: 30px 0 6px; }
.plum .pl-muted { color: var(--pl-muted); }
.plum a { color: inherit; }

/* hero */
.pl-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; padding: 10px 6px 4px; }
.pl-hero .pl-logo { width: min(420px, 100%); height: auto; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .25)); animation: pl-bob 3.2s ease-in-out infinite; }
.pl-hero p.pl-lead { font-size: 1.15rem; line-height: 1.5; margin: 12px 0 14px; }
.pl-hero .pl-by { font-weight: 700; color: var(--pl-muted); font-size: .9rem; margin-top: -4px; }
.pl-mascots { position: relative; height: 260px; }
.pl-mascots img { position: absolute; width: 46%; aspect-ratio: 4/3; object-fit: cover; border-radius: 22px; border: 4px solid var(--pl-ink); box-shadow: 0 10px 0 rgba(0, 0, 0, .25); background: var(--pl-card); }
.pl-mascots img:nth-child(1) { left: 2%; top: 30px; transform: rotate(-7deg); animation: pl-bob 3s ease-in-out infinite; }
.pl-mascots img:nth-child(2) { left: 30%; top: 0; transform: rotate(3deg); z-index: 2; animation: pl-bob 3.4s .4s ease-in-out infinite; }
.pl-mascots img:nth-child(3) { left: 54%; top: 46px; transform: rotate(8deg); animation: pl-bob 2.8s .8s ease-in-out infinite; }
@keyframes pl-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.pl-btn { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--pl-ink); border-radius: 999px; padding: 10px 18px; font-weight: 800;
  background: var(--pl-sun); color: var(--pl-ink) !important; text-decoration: none; box-shadow: 0 5px 0 var(--pl-ink); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.pl-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--pl-ink); }
.pl-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--pl-ink); }
.pl-btn.berry { background: var(--pl-berry); color: #fff !important; }
.pl-btn.mint { background: var(--pl-mint); }
.pl-btn[aria-disabled="true"] { background: #9c93b3; cursor: default; }

/* how it works */
.pl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pl-step { background: var(--pl-card); border: 3px solid var(--pl-ink); border-radius: 20px; padding: 14px; position: relative; box-shadow: 0 6px 0 rgba(0, 0, 0, .25); }
.pl-step b.n { position: absolute; top: -14px; left: 14px; background: var(--pl-berry); color: #fff; border: 3px solid var(--pl-ink); border-radius: 999px; width: 34px; height: 34px; display: grid; place-items: center; }
.pl-step:nth-child(2) b.n { background: var(--pl-mint); color: var(--pl-ink); }
.pl-step:nth-child(3) b.n { background: var(--pl-plum); }

/* the collector card that flips over */
.pl-flip { perspective: 900px; width: 100%; max-width: 260px; aspect-ratio: 85.6 / 54; margin: 10px auto 4px; cursor: pointer; }
.pl-flip .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: pl-flip 6s ease-in-out infinite; }
.pl-flip:hover .in, .pl-flip:focus .in { animation-play-state: paused; }
.pl-flip .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; border: 3px solid #D9A93B; background: #22305E; color: #fff; padding: 8px 10px;
  display: grid; grid-template-columns: 42% 1fr; gap: 8px; align-items: center; font-weight: 800; font-size: .72rem; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
.pl-flip .face img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.pl-flip .face.back { transform: rotateY(180deg); display: grid; grid-template-columns: 1fr; text-align: center; color: var(--pl-sun); }
.pl-flip .face.back code { font-size: .8rem; letter-spacing: 1px; color: var(--pl-sun); }
/* the game card stats: W / B / G pips out of 5 and the special move */
.pl-stats > div { display: flex; align-items: center; gap: 6px; line-height: 1.5; }
.pl-stats > div > b { width: 1.1em; }
.pl-stats p { margin: 4px 0 0; }
.pl-pips { display: inline-flex; gap: 3px; }
.pl-pips i { width: .7em; height: .7em; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.pl-pips i.on { background: currentColor; }
.pl-flip .pl-stats { font-size: .62rem; margin-top: 2px; }
.pl-flip .pl-stats > div { line-height: 1.25; }
.pl-flip .pl-stats p { margin: 1px 0 0; }
/* "In the game": the Holo Clash power card and its move */
.pl-power { margin: 14px 0; padding: 14px; border-radius: 18px; background: #1f1229; color: #FFF6E5; }
.pl-power h2 { margin: 0 0 10px; font-size: 1.25rem; color: #FFF6E5; }
.pl-power h3 { margin: 0 0 8px; color: #FFF6E5; }
.pl-power .pl-muted { color: #CDBFEA; }
.pl-power-row { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 16px; align-items: start; }
.pl-power-card { position: relative; }
.pl-power-card svg, .pl-power-card img { width: 100%; height: auto; aspect-ratio: 5 / 7; display: block; }
.pl-power-card picture { display: block; }
.pl-power-card.pl-power-imgs { display: grid; gap: 8px; }
.pl-power-card .pl-pending { position: absolute; inset: 0; visibility: hidden; }
.pl-power.special .pl-power-card svg { filter: drop-shadow(0 0 14px rgba(226, 166, 42, .8)); }
.pl-power-svg text { font-family: Fredoka, 'Fredoka One', Rubik, 'Arial Rounded MT Bold', system-ui, sans-serif; font-weight: 700; }
.pl-power-svg .top { font-size: 13px; fill: #FFF6E5; letter-spacing: .5px; }
.pl-power-svg .top.sp { fill: #FFC93C; }
.pl-power-svg .nm-path { fill: #FFF6E5; stroke: #2B1B4A; stroke-width: 22px; paint-order: stroke; stroke-linejoin: round; }
.pl-power-svg .nm { font-size: 27px; fill: #FFF6E5; stroke: #2B1B4A; stroke-width: 6px; paint-order: stroke; stroke-linejoin: round; }
.pl-power-svg .lab { font-size: 11.5px; fill: #CDBFEA; letter-spacing: 1px; }
.pl-power-svg .mv { font-size: 20px; fill: #FFC93C; stroke: #2B1B4A; stroke-width: 5px; paint-order: stroke; stroke-linejoin: round; }
.pl-move { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.pl-move img { flex: none; width: 48px; height: 48px; background: #FFF6E5; border-radius: 12px; padding: 4px; box-sizing: border-box; }
@media (max-width: 560px) { .pl-power-row { grid-template-columns: 1fr; } .pl-power-card { max-width: 260px; margin: 0 auto; } }
.plum-card-panel { border: 2px solid #D9A93B; border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.plum-card-panel .pl-pips { color: #D9A93B; }
@keyframes pl-flip { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

/* figure grids */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pl-fig { background: var(--pl-card); border: 3px solid var(--pl-ink); border-radius: 20px; padding: 8px; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25); transition: transform .15s; position: relative; }
.pl-fig:hover { transform: translateY(-4px) rotate(-1deg); }
.pl-fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; background: #fff2; }
.pl-fig .no { font-size: .75rem; font-weight: 800; color: var(--pl-muted); }
.pl-fig b { font-size: 1.05rem; }
.pl-fig .price { font-weight: 800; color: var(--pl-sun); }
.pl-fig.soon img { filter: brightness(0) opacity(.45); }
.pl-fig.soon { border-style: dashed; }
.pl-fig.soon .tag { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--pl-plum); color: #fff; border: 2px solid var(--pl-ink); border-radius: 999px; font-size: .7rem; font-weight: 800; padding: 3px 8px; }
/* number, name and price each on their own line (the link wraps them) */
.pl-fig > a { display: flex; flex-direction: column; gap: 4px; }
.pl-fig .tag.gold { align-self: flex-start; }
/* the festive "Christmas Edition is here" button at the top, while an edition is on show */
.pl-btn.pl-btn-ltd { background: linear-gradient(110deg, #C8102E, #E1B049 50%, #1D7A4A); color: #fff; }
/* Compare powers: a plain table lower on the page (collapsed on phones), the power picture small on each row */
.pl-compare > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.pl-compare > summary::-webkit-details-marker { display: none; }
.pl-compare > summary h3 { margin: 0; } .pl-compare > summary h3::after { content: " ▾"; font-size: .8em; }
.pl-compare:not([open]) > summary h3::after { content: " ▸"; }
.pl-compare-wrap { overflow-x: auto; margin: 6px 0; }
.pl-compare table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .9rem; }
.pl-compare th { text-align: left; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; padding: 6px; border-bottom: 2px solid var(--pl-ink); }
.pl-compare td { padding: 6px; border-bottom: 1px solid rgba(43, 27, 74, .15); vertical-align: middle; }
.pl-compare tr.sp td { background: rgba(255, 201, 60, .12); }
.pl-compare td.pw { width: 64px; } .pl-compare td.pw svg, .pl-compare td.pw img { width: 64px; height: auto; display: block; }
.pl-compare .pl-pips { white-space: nowrap; }
/* phones: each figure is a little card (picture left; name, W B G and the move beside it), no sideways scrolling */
@media (max-width: 640px) {
  .pl-compare table { min-width: 0; } .pl-compare thead { display: none; }
  .pl-compare tr { display: grid; grid-template-columns: 64px 1fr; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(43, 27, 74, .15); }
  .pl-compare td { border: 0; padding: 2px 0; }
  .pl-compare td.pw { grid-row: 1 / span 5; }
  .pl-compare td.st { display: flex; align-items: center; gap: 8px; font-size: .8rem; }
  .pl-compare td.st::before { content: attr(data-l); font-weight: 800; width: 1em; }
}
/* an edition's ★ Holo Special: a rainbow foil tag and a slow holo sheen round the card */
.pl-fig .tag.holo { background: linear-gradient(100deg, #E53935, #FDD835 30%, #43A047 50%, #1E88E5 70%, #8E24AA); background-size: 200% 100%; color: #1a1020; text-shadow: 0 0 3px #fff; animation: pl-holo 6s linear infinite; }
.pl-fig.special:has(.tag.holo) { box-shadow: 0 0 0 3px rgba(229, 57, 53, .35), 0 0 22px rgba(30, 136, 229, .35); }
@keyframes pl-holo { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .pl-fig .tag.holo { animation: none; } }
.pl-fig label { font-size: .8rem; display: flex; gap: 6px; align-items: center; }
.pl-fig.have { border-color: var(--pl-sun); box-shadow: 0 0 0 3px rgba(255, 200, 61, .35), 0 0 18px rgba(255, 200, 61, .55); }
.pl-fig.have::after { content: "✓"; position: absolute; top: -10px; right: -8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pl-sun); color: var(--pl-ink); font-weight: 900; border: 3px solid var(--pl-ink); animation: pl-glow 2s ease-in-out infinite; }
@keyframes pl-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 200, 61, .7); } 50% { box-shadow: 0 0 0 8px rgba(255, 200, 61, 0); } }
.pl-series-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pl-series-head .pill { font-size: .8rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; border: 2px solid var(--pl-ink); background: var(--pl-mint); color: var(--pl-ink); }
.pl-series-head .pill.soon { background: var(--pl-plum); color: #fff; }
/* limited editions: a festive band with a slow red, green and gold foil shimmer and falling snowflakes */
.pl-series-head .pill.ltd { background: linear-gradient(110deg, #C8102E, #E1B049 45%, #1D7A4A); color: #fff; }
.pl-ltd { position: relative; margin: 26px 0; padding: 4px 18px 20px; border: 3px solid var(--pl-ink); border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 12% 0%, rgba(225, 176, 73, .25), transparent 40%), linear-gradient(160deg, #3b0d16, #14321f); color: #fff8ec; }
.pl-ltd::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 90px 80px, #fff, transparent), radial-gradient(2px 2px at 160px 20px, #fff, transparent), radial-gradient(1.5px 1.5px at 240px 110px, #fff, transparent);
  background-size: 260px 140px; animation: pl-snow 12s linear infinite; }
@keyframes pl-snow { from { background-position: 0 -140px; } to { background-position: 40px 140px; } }
.pl-ltd > * { position: relative; }
.pl-ltd .pl-muted, .pl-ltd .pl-ltd-when { color: #f5e6c8; }
.pl-ltd .pl-series-head { color: #fff8ec; }
.pl-ltd .pl-fig { color: var(--pl-ink); }
.pl-ltd .pl-fig .pl-muted, .pl-ltd .pl-fig .small { color: var(--pl-muted); }
.pl-ltd .pl-fig { border-image: linear-gradient(120deg, #C8102E, #E1B049, #1D7A4A, #E1B049, #C8102E) 1; border-width: 3px; background-size: 300% 300%; }
.pl-ltd .pl-fig { box-shadow: 0 0 0 2px rgba(225, 176, 73, .4), 0 0 18px rgba(225, 176, 73, .35); }
.pl-teaser { border-style: dashed; }
@media (prefers-reduced-motion: reduce) { .pl-ltd::before { animation: none; } }

/* progress */
.pl-progress { background: var(--pl-card); border: 3px solid var(--pl-ink); border-radius: 20px; padding: 14px; }
.pl-bar { height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 3px solid var(--pl-ink); overflow: hidden; margin: 8px 0; }
.pl-bar i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--pl-berry) 0 14px, #ff7aa4 14px 28px); border-radius: 999px; transition: width .6s; }
.pl-panel { background: var(--pl-card); border: 3px solid var(--pl-ink); border-radius: 20px; padding: 14px; margin-top: 14px; }
.pl-official { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: center; }
.pl-tag { width: 100%; max-width: 260px; aspect-ratio: 50 / 26; border-radius: 12px; background: var(--pl-plum); border: 3px solid var(--pl-ink); color: var(--pl-sun); display: grid; place-items: center;
  text-align: center; font-weight: 900; font-size: .78rem; line-height: 1.25; padding: 6px; margin: 0 auto; }
.pl-tag img { width: 70%; }
.pl-notify { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-notify input[type=email] { flex: 1; min-width: 200px; border-radius: 999px; border: 3px solid var(--pl-ink); padding: 9px 14px; }
.pl-safety { font-size: .85rem; color: var(--pl-muted); margin-top: 16px; }
.plum-banner { display: flex; align-items: center; gap: 12px; background: var(--pl-night); color: #fff; border-radius: 16px; padding: 10px 14px; margin: 10px 0; text-decoration: none; border: 3px solid var(--pl-ink); }
.plum-banner img { width: 150px; height: auto; }
.plum-crumb img { vertical-align: middle; height: 30px; width: auto; }
.plum-soon-tag { display: inline-block; background: var(--pl-plum); color: #fff; border-radius: 999px; font-weight: 800; padding: 3px 10px; font-size: .8rem; margin-left: 8px; }
#nav-plum img { height: 26px; width: auto; display: block; }

@media (max-width: 760px) {
  .plum { padding: 12px; border-radius: 18px; }
  .pl-hero { grid-template-columns: 1fr; }
  .pl-mascots { height: 190px; }
  .pl-steps, .pl-official { grid-template-columns: 1fr; }
  .pl-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-hero .pl-logo, .pl-mascots img, .pl-flip .in, .pl-fig.have::after { animation: none; }
}

/* Specials: the last number of every series, locked until the rest of the series is collected */
.pl-fig .tag.gold { background: linear-gradient(135deg, #FFE27A, #D9A93B); color: var(--pl-ink); }
.pl-fig.special { border-color: #D9A93B; box-shadow: 0 0 0 3px rgba(255, 210, 90, .35), 0 0 22px rgba(255, 200, 61, .55); animation: pl-shine 3s ease-in-out infinite; }
.pl-fig.special.locked img { filter: saturate(.85) brightness(.85); }
.pl-fig.special.locked::before { content: "🔒"; position: absolute; z-index: 2; left: 14px; top: 40px; font-size: 1.3rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.pl-fig.special-sil { border: 3px solid #D9A93B; border-style: solid; box-shadow: 0 0 18px rgba(255, 200, 61, .5); }
.pl-fig.special-sil img { filter: drop-shadow(0 0 6px rgba(255, 200, 61, .9)) brightness(0) opacity(.6); }
.pl-fig.soon img { background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.12), transparent 70%); }
@keyframes pl-shine { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 210, 90, .35), 0 0 14px rgba(255, 200, 61, .4); } 50% { box-shadow: 0 0 0 3px rgba(255, 210, 90, .6), 0 0 28px rgba(255, 200, 61, .8); } }
@media (prefers-reduced-motion: reduce) { .pl-fig.special { animation: none; } }
.plum .pl-h1 { margin: 0; line-height: 0; }