/* Poketwo.store — events, the trainer menu and the console additions.
   Everything seasonal hangs off html[data-event], which the edge sets before
   the page is sent and plus.js keeps in step with /api/config. With no event
   running none of the themed rules match and the shop is exactly as it was. */

/* ------------------------------------------------------------------ palettes
   Only the three accents move, the same lever the scroll acts already pull,
   so buttons, glows, borders and the progress bar all follow. Each act keeps
   its own mood inside the season instead of the whole page going orange. */
html[data-event="halloween"] {
    --accent1:#ffa23a; --accent2:#ff6a1f; --accent3:#ffe1a6;
    --accent1-rgb:255,162,58; --accent2-rgb:255,106,31; --accent3-rgb:255,225,166;
    --ev-ink:#ffb45e; --ev-ink-rgb:255,180,94; --ev-glow:#8f5bff; --ev-glow-rgb:143,91,255;
}
html[data-event="halloween"][data-theme="ember"]   { --accent1:#ff7a2a; --accent2:#e2471a; --accent3:#ffc76e;
    --accent1-rgb:255,122,42; --accent2-rgb:226,71,26; --accent3-rgb:255,199,110; }
html[data-event="halloween"][data-theme="void"]    { --accent1:#cdb8ff; --accent2:#8d6bff; --accent3:#efe8ff;
    --accent1-rgb:205,184,255; --accent2-rgb:141,107,255; --accent3-rgb:239,232,255; }
html[data-event="halloween"][data-theme="aurora"]  { --accent1:#9dff6e; --accent2:#3fd58c; --accent3:#dcffc0;
    --accent1-rgb:157,255,110; --accent2-rgb:63,213,140; --accent3-rgb:220,255,192; }
html[data-event="halloween"][data-theme="thermal"] { --accent1:#bb6bff; --accent2:#ff4f9a; --accent3:#ff9a45;
    --accent1-rgb:187,107,255; --accent2-rgb:255,79,154; --accent3-rgb:255,154,69; }

html[data-event="winter"] {
    --accent1:#bfe6ff; --accent2:#6cb8ff; --accent3:#f2fbff;
    --accent1-rgb:191,230,255; --accent2-rgb:108,184,255; --accent3-rgb:242,251,255;
    --ev-ink:#cdeaff; --ev-ink-rgb:205,234,255; --ev-glow:#5aa9ff; --ev-glow-rgb:90,169,255;
}
html[data-event="winter"][data-theme="ember"]   { --accent1:#ffd9a8; --accent2:#ff9b6a; --accent3:#fff1de;
    --accent1-rgb:255,217,168; --accent2-rgb:255,155,106; --accent3-rgb:255,241,222; }
html[data-event="winter"][data-theme="void"]    { --accent1:#f4f8ff; --accent2:#a9bfdc; --accent3:#ffffff;
    --accent1-rgb:244,248,255; --accent2-rgb:169,191,220; --accent3-rgb:255,255,255; }
html[data-event="winter"][data-theme="aurora"]  { --accent1:#7ff0e0; --accent2:#5aa9ff; --accent3:#d6fff8;
    --accent1-rgb:127,240,224; --accent2-rgb:90,169,255; --accent3-rgb:214,255,248; }
html[data-event="winter"][data-theme="thermal"] { --accent1:#ff6f8e; --accent2:#7d8cff; --accent3:#ffd0dc;
    --accent1-rgb:255,111,142; --accent2-rgb:125,140,255; --accent3-rgb:255,208,220; }

html[data-event="lights"] {
    --accent1:#ffc23d; --accent2:#ff7b2e; --accent3:#fff0b8;
    --accent1-rgb:255,194,61; --accent2-rgb:255,123,46; --accent3-rgb:255,240,184;
    --ev-ink:#ffd36b; --ev-ink-rgb:255,211,107; --ev-glow:#ff4fa3; --ev-glow-rgb:255,79,163;
}
html[data-event="lights"][data-theme="ember"]   { --accent1:#ff9b2e; --accent2:#ff5a3c; --accent3:#ffe08a;
    --accent1-rgb:255,155,46; --accent2-rgb:255,90,60; --accent3-rgb:255,224,138; }
html[data-event="lights"][data-theme="void"]    { --accent1:#fff2cc; --accent2:#d9b25c; --accent3:#fffaf0;
    --accent1-rgb:255,242,204; --accent2-rgb:217,178,92; --accent3-rgb:255,250,240; }
html[data-event="lights"][data-theme="aurora"]  { --accent1:#ff6fb5; --accent2:#ffb03a; --accent3:#ffd9ec;
    --accent1-rgb:255,111,181; --accent2-rgb:255,176,58; --accent3-rgb:255,217,236; }
html[data-event="lights"][data-theme="thermal"] { --accent1:#ff4fa3; --accent2:#a35bff; --accent3:#ffc23d;
    --accent1-rgb:255,79,163; --accent2-rgb:163,91,255; --accent3-rgb:255,194,61; }

html[data-event="summer"] {
    --accent1:#ffd23d; --accent2:#ff9a2e; --accent3:#fff3b0;
    --accent1-rgb:255,210,61; --accent2-rgb:255,154,46; --accent3-rgb:255,243,176;
    --ev-ink:#ffe27a; --ev-ink-rgb:255,226,122; --ev-glow:#1aa3c8; --ev-glow-rgb:26,163,200;
}
html[data-event="summer"][data-theme="ember"] { --accent1:#ffb347; --accent2:#ff6f3c; --accent3:#ffe3b0;
    --accent1-rgb:255,179,71; --accent2-rgb:255,111,60; --accent3-rgb:255,227,176; }
html[data-event="summer"][data-theme="void"] { --accent1:#bfefff; --accent2:#5ac8e8; --accent3:#ecfbff;
    --accent1-rgb:191,239,255; --accent2-rgb:90,200,232; --accent3-rgb:236,251,255; }
html[data-event="summer"][data-theme="aurora"] { --accent1:#7ff0c8; --accent2:#1aa3c8; --accent3:#d8fff2;
    --accent1-rgb:127,240,200; --accent2-rgb:26,163,200; --accent3-rgb:216,255,242; }
html[data-event="summer"][data-theme="thermal"] { --accent1:#ff7aa8; --accent2:#ffb03a; --accent3:#ffe0ec;
    --accent1-rgb:255,122,168; --accent2-rgb:255,176,58; --accent3-rgb:255,224,236; }

html[data-event="autumn"] {
    --accent1:#f0a04a; --accent2:#d2602a; --accent3:#ffe1b8;
    --accent1-rgb:240,160,74; --accent2-rgb:210,96,42; --accent3-rgb:255,225,184;
    --ev-ink:#ffb867; --ev-ink-rgb:255,184,103; --ev-glow:#b8541c; --ev-glow-rgb:184,84,28;
}
html[data-event="autumn"][data-theme="ember"] { --accent1:#ff8a3d; --accent2:#c8451b; --accent3:#ffd2a3;
    --accent1-rgb:255,138,61; --accent2-rgb:200,69,27; --accent3-rgb:255,210,163; }
html[data-event="autumn"][data-theme="void"] { --accent1:#e8cfa6; --accent2:#a8784a; --accent3:#fff3e2;
    --accent1-rgb:232,207,166; --accent2-rgb:168,120,74; --accent3-rgb:255,243,226; }
html[data-event="autumn"][data-theme="aurora"] { --accent1:#c8d86a; --accent2:#8aa83a; --accent3:#f0f6cf;
    --accent1-rgb:200,216,106; --accent2-rgb:138,168,58; --accent3-rgb:240,246,207; }
html[data-event="autumn"][data-theme="thermal"] { --accent1:#e86a4a; --accent2:#b8541c; --accent3:#ffc9a8;
    --accent1-rgb:232,106,74; --accent2-rgb:184,84,28; --accent3-rgb:255,201,168; }

html[data-event="anniversary"] {
    --accent1:#d9d4ff; --accent2:#9d86ff; --accent3:#f6f3ff;
    --accent1-rgb:217,212,255; --accent2-rgb:157,134,255; --accent3-rgb:246,243,255;
    --ev-ink:#e9e4ff; --ev-ink-rgb:233,228,255; --ev-glow:#6b4fd8; --ev-glow-rgb:107,79,216;
}
html[data-event="anniversary"][data-theme="ember"] { --accent1:#ffd27a; --accent2:#e8a33a; --accent3:#fff1cf;
    --accent1-rgb:255,210,122; --accent2-rgb:232,163,58; --accent3-rgb:255,241,207; }
html[data-event="anniversary"][data-theme="void"] { --accent1:#f1f1f5; --accent2:#b6b9c6; --accent3:#ffffff;
    --accent1-rgb:241,241,245; --accent2-rgb:182,185,198; --accent3-rgb:255,255,255; }
html[data-event="anniversary"][data-theme="aurora"] { --accent1:#8ff0e6; --accent2:#6b8cff; --accent3:#dcfffb;
    --accent1-rgb:143,240,230; --accent2-rgb:107,140,255; --accent3-rgb:220,255,251; }
html[data-event="anniversary"][data-theme="thermal"] { --accent1:#ff8ad0; --accent2:#9d86ff; --accent3:#ffe0f3;
    --accent1-rgb:255,138,208; --accent2-rgb:157,134,255; --accent3-rgb:255,224,243; }

/* ------------------------------------------------------------------ the sky
   The photograph stays; it is re-lit. A colour wash with a blend mode turns
   the same moon into a harvest moon or a winter one without a second image.
   The wash lives inside each sky layer, not over the whole sky: there it is
   blended once into the layer and moves with the photo, where over the sky
   it had to be re-blended across the whole screen on every scroll frame
   (the photo drifts as you scroll), which held scrolling near 20 fps. */
html[data-event] #theme-sky > i::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    transition: opacity 0.75s ease;
}
/* The photo layer is drawn at 1.14x (the scroll film's zoom); undo that for
   the wash so its glow still sits on the moon. */
html[data-event] #sky-midnight::after, html[data-event] #sky-midnight::before { transform: scale(0.877); }
html[data-event="halloween"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(255,120,30,0.62), rgba(255,90,20,0.18) 42%, transparent 70%),
        radial-gradient(90vmax 60vmax at 10% 100%, rgba(120,60,255,0.22), transparent 65%),
        linear-gradient(180deg, rgba(40,10,70,0.30), rgba(10,4,24,0.10) 40%, rgba(20,6,30,0.45));
    mix-blend-mode: color;
}
html[data-event="halloween"] #theme-sky > i::before {
    /* a second, additive pass so the moon actually glows rather than just
       changing hue */
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: radial-gradient(22vmax 20vmax at 86% 4%, rgba(255,140,40,0.22), transparent 70%);
    mix-blend-mode: screen;
}
html[data-event="winter"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(170,215,255,0.45), transparent 70%),
        linear-gradient(180deg, rgba(20,60,120,0.30), rgba(4,12,30,0.10) 45%, rgba(10,30,60,0.40));
    mix-blend-mode: color;
}
html[data-event="lights"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(255,190,70,0.55), transparent 70%),
        radial-gradient(80vmax 60vmax at 12% 100%, rgba(255,70,160,0.20), transparent 65%),
        linear-gradient(180deg, rgba(70,20,60,0.28), rgba(20,6,20,0.08) 45%, rgba(50,14,30,0.40));
    mix-blend-mode: color;
}

html[data-event="summer"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(255,214,90,0.55), transparent 70%),
        linear-gradient(180deg, rgba(20,110,170,0.30), rgba(4,30,50,0.08) 45%, rgba(10,60,90,0.38));
    mix-blend-mode: color;
}
html[data-event="autumn"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(240,150,60,0.55), transparent 70%),
        linear-gradient(180deg, rgba(90,40,10,0.30), rgba(30,12,4,0.08) 45%, rgba(70,30,10,0.40));
    mix-blend-mode: color;
}
html[data-event="anniversary"] #theme-sky > i::after {
    background:
        radial-gradient(34vmax 30vmax at 86% 6%, rgba(220,210,255,0.45), transparent 70%),
        linear-gradient(180deg, rgba(60,40,120,0.30), rgba(12,8,30,0.08) 45%, rgba(40,26,90,0.40));
    mix-blend-mode: color;
}

/* the coin borrows the season's light */
html[data-event="halloween"] .coin-halo {
    background: radial-gradient(circle, rgba(255,128,32,0.30), rgba(143,91,255,0.14) 45%, transparent 70%) !important;
}
html[data-event="winter"] .coin-halo {
    background: radial-gradient(circle, rgba(170,220,255,0.26), rgba(90,169,255,0.12) 45%, transparent 70%) !important;
}
html[data-event="lights"] .coin-halo {
    background: radial-gradient(circle, rgba(255,190,60,0.32), rgba(255,79,163,0.12) 45%, transparent 70%) !important;
}

html[data-event="summer"] .coin-halo {
    background: radial-gradient(circle, rgba(255,214,90,0.30), rgba(26,163,200,0.12) 45%, transparent 70%) !important;
}
html[data-event="autumn"] .coin-halo {
    background: radial-gradient(circle, rgba(240,150,60,0.30), rgba(184,84,28,0.12) 45%, transparent 70%) !important;
}
html[data-event="anniversary"] .coin-halo {
    background: radial-gradient(circle, rgba(220,210,255,0.28), rgba(107,79,216,0.12) 45%, transparent 70%) !important;
}

/* ------------------------------------------------------------- decorations */
#ev-layer {
    position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
    contain: strict;
}
#ev-layer .ev-fog {
    position: absolute; left: -20%; right: -20%; height: 46vh; bottom: -8vh;
    background:
        radial-gradient(40% 60% at 20% 70%, rgba(170,150,220,0.20), transparent 70%),
        radial-gradient(35% 55% at 55% 80%, rgba(150,130,210,0.16), transparent 70%),
        radial-gradient(40% 60% at 85% 70%, rgba(170,150,220,0.18), transparent 70%);
    /* soft by its gradients alone: a blur filter on a layer this size costs
       more than the whole page on a weak phone */
    animation: evFog 48s linear infinite alternate;
    opacity: 0.85;
    will-change: transform;
}
@keyframes evFog { from { transform: translate3d(-6%, 0, 0); } to { transform: translate3d(6%, 0, 0); } }

#ev-layer .ev-bat {
    position: absolute; width: 26px; height: 14px; color: #0b0614;
    animation: evBatFly var(--dur, 11s) linear forwards;
    will-change: transform;
}
/* The glow is on the wings, not the bat's box: a filter on the box kept the
   flapping inside it on the main thread. */
#ev-layer .ev-bat svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(255,140,40,0.35));
    animation: evFlap 0.22s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes evFlap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
@keyframes evBatFly {
    0%   { transform: translate3d(var(--x0), var(--y0), 0) scale(var(--s, 1)); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate3d(calc((var(--x0) + var(--x1)) / 2), calc(var(--y0) - 6vh), 0) scale(var(--s, 1)); }
    92%  { opacity: 1; }
    100% { transform: translate3d(var(--x1), var(--y1), 0) scale(var(--s, 1)); opacity: 0; }
}

#ev-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-event="winter"] #ev-layer::before {
    /* frost creeping in from the top corners */
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(28vmax 18vmax at 0% 0%, rgba(210,235,255,0.10), transparent 70%),
        radial-gradient(28vmax 18vmax at 100% 0%, rgba(210,235,255,0.08), transparent 70%);
}
#ev-layer .ev-leaf {
    position: absolute; top: -4vh; width: 16px; height: 16px; border-radius: 0 70% 0 70%;
    background: linear-gradient(135deg, #f0a04a, #c8451b);
    filter: hue-rotate(var(--hue, 0deg));
    opacity: 0.75; will-change: transform;
    animation: evLeaf var(--dur, 16s) linear forwards;
}
@keyframes evLeaf {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--s, 1)); }
    50%  { transform: translate3d(var(--sway, 40px), 54vh, 0) rotate(200deg) scale(var(--s, 1)); }
    100% { transform: translate3d(0, 110vh, 0) rotate(400deg) scale(var(--s, 1)); }
}

#ev-layer .ev-lantern {
    position: absolute; bottom: -60px; width: 18px; height: 24px; border-radius: 7px 7px 9px 9px;
    background: radial-gradient(60% 60% at 50% 55%, #fff1b0, #ffb13a 55%, #e2601e 100%);
    box-shadow: 0 0 18px 6px rgba(255,170,60,0.35), 0 0 40px 14px rgba(255,120,60,0.12);
    animation: evRise var(--dur, 26s) linear forwards;
    opacity: 0.9;
}
#ev-layer .ev-lantern::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 6px; height: 5px; margin-left: -3px;
    background: #6b2a12; border-radius: 0 0 3px 3px;
}
@keyframes evRise {
    0%   { transform: translate3d(0, 0, 0) scale(var(--s, 1)); opacity: 0; }
    10%  { opacity: 0.9; }
    50%  { transform: translate3d(var(--sway, 20px), -60vh, 0) scale(var(--s, 1)); }
    100% { transform: translate3d(calc(var(--sway, 20px) * -0.5), -125vh, 0) scale(var(--s, 1)); opacity: 0; }
}

/* ---------------------------------------------------------------- ribbon */
.ev-ribbon {
    position: relative; z-index: 9;
    display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.55rem 2.6rem 0.55rem 1rem;
    font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.01em;
    color: var(--text-primary);
    background:
        linear-gradient(90deg, rgba(var(--ev-glow-rgb, 255,194,77),0.16), rgba(var(--ev-ink-rgb, 255,194,77),0.12) 50%, rgba(var(--ev-glow-rgb, 255,194,77),0.16));
    border-bottom: 1px solid rgba(var(--ev-ink-rgb, 255,194,77),0.22);
}
.ev-ribbon[hidden] { display: none; }
.ev-ribbon .ev-r-mark { width: 18px; height: 21px; flex: none; margin-right: -0.35rem; }
.ev-ribbon b { color: var(--ev-ink, var(--accent1)); font-weight: 700; }
.ev-ribbon .ev-r-sep { opacity: 0.35; }
.ev-ribbon .ev-r-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.08em; color: #0b0d14; background: var(--ev-ink, var(--accent1));
    border: 0; border-radius: 6px; padding: 0.2rem 0.5rem; cursor: pointer;
}
.ev-ribbon .ev-r-code:hover { filter: brightness(1.08); }
.ev-ribbon .ev-r-time { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ev-ribbon .ev-r-close {
    position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
    background: transparent; color: var(--text-muted); font-size: 1rem; line-height: 1;
}
.ev-ribbon .ev-r-close:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
@media (max-width: 640px) {
    .ev-ribbon { font-size: 0.72rem; gap: 0.4rem 0.6rem; padding: 0.5rem 2.4rem 0.5rem 0.8rem; }
    .ev-ribbon .ev-r-sep, .ev-ribbon .ev-r-tag { display: none; }
}

/* ------------------------------------------------- event Pokémon in the hero
   Three of the season's Pokémon stand on the coin's outer ring: points on
   that ellipse (radius --r, squashed 0.8, turned -19deg like .stage-ring-2),
   so they keep their places at every width and stay clear of the coin. */
.ev-hero-cast { position: absolute; inset: 0; pointer-events: none; --r: min(22vw, 260px); }
.ev-hero-cast img {
    position: absolute; width: clamp(84px, 8.6vw, 120px); height: auto; image-rendering: pixelated;
    left: calc(50% + var(--x) * var(--r)); top: calc(50% + var(--y) * var(--r));
    transform: translate(-50%, -78%);
    filter: drop-shadow(0 10px 12px rgba(0,0,0,0.5));
    animation: evHeroBob 6s ease-in-out infinite;
    transform-origin: 50% 74%;
}
.ev-hero-cast img:nth-child(1) { --x: -0.93; --y: -0.19; }
.ev-hero-cast img:nth-child(2) { --x: 0.70;  --y: 0.45;  animation-delay: -2s; }
.ev-hero-cast img:nth-child(3) { --x: -0.07; --y: 0.86;  animation-delay: -4s; }
/* a slow bob, and once a cycle a little hop, each on its own beat */
@keyframes evHeroBob {
    0%, 100% { transform: translate(-50%, -78%); }
    35%      { transform: translate(-50%, calc(-78% - 6px)); }
    70%      { transform: translate(-50%, -78%) scale(1, 1); }
    74%      { transform: translate(-50%, -78%) scale(1.08, 0.92); }
    80%      { transform: translate(-50%, calc(-78% - 20px)) scale(0.96, 1.05); }
    86%      { transform: translate(-50%, -78%) scale(1.05, 0.95); }
    90%      { transform: translate(-50%, -78%) scale(1, 1); }
}
@media (max-width: 860px) { .ev-hero-cast { --r: min(36vw, 170px); } .ev-hero-cast img { width: 76px; } }
html[data-fx="low"] .ev-hero-cast img { animation: none; }
.hero-chips li[hidden] { display: none; }

/* During an event the season's own scene replaces the site's everyday
   background sequence (Gengar and Marshadow peeking, the burst). */
html[data-event] #advanced-bg { display: none !important; }

/* ------------------------------------------------------------ the scenes
   Sky pieces live in the fixed #ev-layer; ground pieces in the strip under
   the hero. Transform and opacity only. */

/* sky: a Pokémon behind the moon (Halloween, Anniversary) */
.ev-peek { position: absolute; pointer-events: none; transition: opacity 0.6s ease; }
.ev-peek.is-away { opacity: 0; }
.ev-peek-who {
    position: absolute; left: 50%; top: 50%; width: var(--sz, 200px); height: var(--sz, 200px);
    transform: translate(-50%, -50%); opacity: 0;
    transition: transform 2.6s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 1.1s ease;
}
.ev-peek-who.is-out { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(-5deg); opacity: 1; }
.ev-peek-who img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5)); }
.ev-peek-who.is-flip img { transform: scaleX(-1); }
.ev-peek-who.is-shadow img, .rayquaza-patrol.is-shadow {
    filter: brightness(0.16) sepia(0.7) hue-rotate(225deg) saturate(3)
            drop-shadow(0 0 2px rgba(190,120,255,0.9)) drop-shadow(0 0 14px rgba(140,60,240,0.55));
}

/* sky: Santa Delibird across the moon (Winter) */
.ev-cross { position: absolute; pointer-events: none; animation: evCross 8s linear forwards; }
.ev-cross img { display: block; width: 100%; height: auto; transform: scaleX(-1); image-rendering: pixelated;
    filter: brightness(0) drop-shadow(0 0 1px rgba(220,235,255,0.6)); }
@keyframes evCross {
    0%   { transform: translate(0, 0); opacity: 0; }
    8%   { opacity: 1; }
    50%  { transform: translate(calc(var(--run) / 2), var(--lift)); }
    92%  { opacity: 1; }
    100% { transform: translate(var(--run), 0); opacity: 0; }
}

/* sky: the setting sun (Summer) */
.ev-sun {
    position: absolute; border-radius: 50%; pointer-events: none; transition: opacity 0.6s ease;
    /* solid out past the moon's rim (the moon is 87% of this radius), then a glow */
    background: radial-gradient(circle at 50% 50%, #fff6d8 0%, #ffe08a 34%, #ffb347 66%, #ff8a3c 86%, rgba(255,120,60,0.45) 90%, rgba(255,110,60,0) 100%);
    box-shadow: 0 0 80px 30px rgba(255,150,60,0.35), 0 0 200px 80px rgba(255,120,60,0.15);
}
.ev-sun.is-away { opacity: 0; }

/* sky: fireworks (Anniversary, Lights) */
.ev-fw { position: absolute; width: 0; height: 0; pointer-events: none; }
.ev-fw i {
    position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
    box-shadow: 0 0 8px currentColor; opacity: 0;
    animation: evSpark 1.6s cubic-bezier(0.15, 0.6, 0.3, 1) forwards;
}
.ev-fw i.is-in { width: 4px; height: 4px; left: -2px; top: -2px; animation-delay: 0.18s; }
.ev-fw b { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.9), currentColor 30%, transparent 70%);
    animation: evFlash 0.7s ease-out forwards; }
@keyframes evFlash { 0% { transform: scale(0.2); opacity: 0.9; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes evSpark {
    0%   { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; }
    70%  { opacity: 0.9; }
    100% { transform: rotate(var(--a)) translateX(var(--d)) translateY(14px) scale(0.6); opacity: 0; }
}

/* sky: a gust of leaves (Autumn) */
.ev-gust { position: absolute; left: 0; width: 260px; height: 0; pointer-events: none; animation: evGust 3.4s cubic-bezier(0.4, 0.1, 0.5, 1) forwards; }
.ev-gust i {
    position: absolute; width: 14px; height: 14px; border-radius: 0 70% 0 70%;
    background: linear-gradient(135deg, #f0a04a, #c8451b); opacity: 0.85;
    animation: evGustLeaf 3.4s ease-in-out forwards;
}
@keyframes evGust { from { transform: translateX(-280px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes evGustLeaf {
    0%   { transform: translateY(0) rotate(0); }
    50%  { transform: translateY(-26px) rotate(calc(var(--r) / 2)); }
    100% { transform: translateY(18px) rotate(var(--r)); }
}

/* ground: the strip under the hero */
.ev-grass {
    position: relative; height: 104px; pointer-events: none;
    /* clipped at the sides (so nothing widens the page) and open upward for
       leaps and the tree; browsers without overflow: clip just clip all round */
    overflow: hidden; overflow-x: clip; overflow-y: visible;
    clip-path: inset(-260px 0 0 0);
    margin: -36px 0 -1px; z-index: 0;
}
.ev-grass svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.ev-g-back { z-index: 1; }
.ev-walk { position: absolute; inset: 0; z-index: 2; }
.ev-g-front { z-index: 3; }
.ev-walker {
    position: absolute; left: 0; bottom: -4px; width: 108px;
    transform: translateX(var(--x0, 0)); animation: evWalk var(--dur, 24s) linear forwards; will-change: transform;
}
.ev-walker.is-still { animation: none; }
@keyframes evWalk { from { transform: translateX(var(--x0)); } to { transform: translateX(var(--x1)); } }
.ev-face { display: block; }
.ev-walker.is-right .ev-face { transform: scaleX(-1); }
.ev-face img {
    display: block; width: 100%; height: auto; image-rendering: pixelated;
    filter: brightness(0.82) drop-shadow(0 0 6px rgba(0,0,0,0.6));
    animation: evStep 0.42s ease-in-out infinite alternate;
}
.ev-walker.is-still .ev-face img { animation: none; }
@keyframes evStep { to { transform: translateY(-4px); } }
.ev-walker.is-roll .ev-face img { animation: evRoll 1.2s linear infinite; }
@keyframes evRoll { to { transform: rotate(-360deg); } }
.ev-grass.is-paused *, .ev-grass.is-paused *::before, .ev-grass.is-paused *::after { animation-play-state: paused !important; }

/* Halloween: eyes in the dark grass */
.ev-eyes { position: absolute; display: flex; gap: 9px; z-index: 4; animation: evEyes 3.6s ease forwards; }
.ev-eyes { gap: 11px; }
.ev-eyes i { width: 10px; height: 7px; border-radius: 50% 50% 45% 45%; background: var(--c, #ffd34d); box-shadow: 0 0 10px 2px var(--c, #ffd34d), 0 0 22px var(--c, #ffd34d); }
@keyframes evEyes {
    0% { opacity: 0; transform: scaleY(1); } 18% { opacity: 1; } 46% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); } 54% { transform: scaleY(1); } 82% { opacity: 1; } 100% { opacity: 0; }
}

/* Winter: skating on the pond, with a reflection, and heads in the snow */
/* gen5 sprites keep ~30% empty space under the feet; this puts feet on the ice */
.ev-grass.is-ice .ev-walker { bottom: -9px; }
.ev-walker.is-skate .ev-face img { animation: none; transform: rotate(-7deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.ev-walker.is-skate { animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); }
.ev-reflect { position: absolute; left: 0; top: 36%; width: 100%; opacity: 0.2; transform: scaleY(-1); }
.ev-walker.is-right .ev-reflect { transform: scale(-1, -1); }
.ev-reflect img { filter: blur(0.5px); }
.ev-pop { position: absolute; bottom: 30px; width: 120px; height: 120px; overflow: hidden; z-index: 2; }
.ev-pop svg { position: absolute; left: 0; bottom: 0; width: 120px; height: 40px; z-index: 2; }
.ev-pop-who { position: absolute; left: 12px; bottom: 6px; display: block; z-index: 1; animation: evPop 5s ease-in-out forwards; }
.ev-pop-who img { display: block; width: 96px; height: auto; image-rendering: pixelated; }
@keyframes evPop {
    0% { transform: translateY(105%); } 16% { transform: translateY(14%); } 30% { transform: translateY(14%) rotate(-8deg); }
    46% { transform: translateY(14%) rotate(8deg); } 62% { transform: translateY(14%) rotate(0); } 80%, 100% { transform: translateY(105%); }
}
.ev-snowcap {
    position: absolute; left: -1px; right: -1px; top: -1px; height: 16px; pointer-events: none; z-index: 3;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0h200v6c-8 7-16 3-24 6s-14 4-22 0-16-5-26 1-18 3-26 0-14-6-24 1-16 4-26 0-16-4-26 2-12 3-26-2V0z' fill='%23eef6ff'/%3E%3C/svg%3E") top / 100% 100% no-repeat;
    border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

/* Summer: waves, swimmers, and Greninja leaping */
.ev-wave { width: 200% !important; animation: evWave 26s linear infinite; }
.ev-wave.is-slow { animation-duration: 40s; animation-direction: reverse; }
@keyframes evWave { to { transform: translateX(-50%); } }
.ev-grass.is-sea .ev-walker { bottom: -28px; }
.ev-walker.is-swim .ev-face img { animation: evBob 2.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)); }
@keyframes evBob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-5px) rotate(3deg); } }
.ev-leap { position: absolute; bottom: 8px; width: 110px; z-index: 2; }
.ev-leap.is-right { transform: scaleX(-1); }
.ev-leap-who { display: block; animation: evLeap 1.7s cubic-bezier(0.3, 0.5, 0.6, 1) forwards; opacity: 0; }
.ev-leap-who img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@keyframes evLeap {
    0%   { transform: translate(0, 60px) rotate(26deg); opacity: 1; }
    50%  { transform: translate(-90px, -110px) rotate(-6deg); opacity: 1; }
    100% { transform: translate(-180px, 70px) rotate(-38deg); opacity: 1; }
}
.ev-ripple { position: absolute; left: 20px; bottom: 26px; width: 70px; height: 14px; border-radius: 50%; border: 2px solid rgba(190,240,255,0.7);
    opacity: 0; animation: evRipple 1s ease-out forwards; }
.ev-ripple.is-late { left: -160px; animation-delay: 1.45s; }
@keyframes evRipple { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

/* Autumn: a tree, and someone behind it */
.ev-tree { position: absolute; right: 5%; bottom: 0; width: 150px; height: 244px; z-index: 4; }
.ev-tree svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; z-index: 2; }
.ev-tree-who { position: absolute; left: 36px; bottom: 4px; width: 92px; z-index: 1; transition: transform 1.1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ev-tree-who img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: brightness(0.85); }
.ev-tree-who.is-out { transform: translateX(-58px) rotate(-6deg); }

/* Anniversary: bunting over the grass */
.ev-bunting { position: absolute; left: 0; top: 0; width: 100%; height: 60px; z-index: 4; }

/* Lights: diyas along the ground */
.ev-diyas { position: absolute; inset: auto 0 0 0; height: 40px; z-index: 4; }
.ev-diya { position: absolute; bottom: 6px; width: 26px; height: 12px; margin-left: -13px; border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, #e8a33a, #8a3a0c); box-shadow: 0 0 18px rgba(255,170,60,0.45); }
.ev-diya i { position: absolute; left: 50%; bottom: 9px; width: 8px; height: 14px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: radial-gradient(circle at 50% 70%, #fffbe6, #ffd36b 45%, #ff8f2e 80%); box-shadow: 0 0 10px #ffb347, 0 0 22px rgba(255,150,40,0.6);
    transform-origin: 50% 100%; animation: evFlame var(--f, 0.16s) ease-in-out infinite alternate; animation-delay: inherit; }
@keyframes evFlame { from { transform: scale(1, 1); opacity: 1; } to { transform: scale(0.88, 1.12) skewX(3deg); opacity: 0.86; } }

/* ------------------------------------------------------------ set pieces
   Each is made, plays once and is removed; transform and opacity only. */

/* Halloween: a stone someone hides behind */
.ev-grave { position: absolute; left: 56%; bottom: 4px; width: 70px; height: 86px; z-index: 2; }
.ev-grave > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
.ev-grave.is-far { left: 83%; width: 52px; height: 64px; opacity: 0.85; }
.ev-grave-who { position: absolute; left: -2px; bottom: -6px; width: 84px; z-index: 1;
    transform: translateX(0) rotate(0); transition: transform 1s cubic-bezier(0.3, 0.7, 0.2, 1); }
.ev-grave-who img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.ev-grave-who.is-out { transform: translateX(-46px) rotate(-9deg); }
/* jack-o'-lanterns whose light breathes */
.ev-jack { position: absolute; bottom: 6px; width: 46px; height: 38px; margin-left: -23px; z-index: 2; }
.ev-jack.is-small { width: 34px; height: 28px; margin-left: -17px; }
.ev-jack svg { position: relative; width: 100%; height: 100%; display: block; z-index: 1; }
.ev-jack i { position: absolute; left: -60%; right: -60%; top: -70%; bottom: -40%; border-radius: 50%; z-index: 0;
    background: radial-gradient(closest-side, rgba(255,170,50,0.45), rgba(255,120,30,0.12) 60%, transparent);
    animation: evGlowBreathe 2.6s ease-in-out infinite alternate; }
.ev-jack:nth-of-type(odd) i { animation-delay: -1.3s; }
@keyframes evGlowBreathe { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } }
/* a ghost rising out of the grass, flickering in and out of sight */
.ev-ghost { position: absolute; bottom: 2px; width: 124px; z-index: 2; }
.ev-ghost-who { display: block; opacity: 0; animation: evGhost 7.4s ease-in-out forwards; }
.ev-ghost-who img { display: block; width: 100%; height: auto; image-rendering: pixelated;
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(190,140,255,0.95)) drop-shadow(0 0 22px rgba(150,90,255,0.6)); }
.ev-ghost.is-right img { transform: scaleX(-1); }
@keyframes evGhost {
    0%   { transform: translate(0, 46px) scale(0.8); opacity: 0; }
    12%  { opacity: 1; }
    30%  { transform: translate(20px, -36px) scale(1); opacity: 1; }
    40%  { opacity: 0.25; }
    52%  { transform: translate(-18px, -96px) scale(1); opacity: 1; }
    66%  { opacity: 0.35; }
    80%  { transform: translate(14px, -152px) scale(1.02); opacity: 0.95; }
    100% { transform: translate(-8px, -205px) scale(1.06); opacity: 0; }
}
/* Pumpkaboo hops: squash, spring, land */
.ev-walker.is-hop .ev-face img { transform-origin: 50% 76%; animation: evHop 0.9s cubic-bezier(0.33, 0, 0.67, 1) infinite; filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }
@keyframes evHop {
    0%, 100% { transform: translateY(0) scale(1.1, 0.9); }
    14%      { transform: translateY(-6px) scale(0.94, 1.07); }
    50%      { transform: translateY(-34px) scale(1, 1); }
    86%      { transform: translateY(-4px) scale(0.98, 1.03); }
}

/* sky: someone behind the big coin, leaning out past its rim (the coin's
   own layer sits above the sky, so it hides whatever is behind it) */
#ev-layer .ev-coinpeek { position: absolute; width: 0; height: 0; transition: opacity 0.5s ease; }
#ev-layer .ev-coinpeek.is-away { opacity: 0; }
.ev-coinpeek-who {
    position: absolute; left: 0; top: 0; width: var(--sz); height: var(--sz);
    transform: translate(-50%, -50%) rotate(0); opacity: 0;
    transition: transform 1.4s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.6s ease;
}
.ev-coinpeek-who.is-out { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 1; }
.ev-coinpeek-who img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55)); }
.ev-coinpeek-who img.is-flip { transform: scaleX(-1); }
/* Lights: Volcarona's wings open behind the coin like a sun */
.ev-coinpeek.is-halo .ev-coinpeek-who { transition: transform 2.2s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 1.4s ease; }
.ev-coinpeek.is-halo img { filter: drop-shadow(0 0 16px rgba(255,180,70,0.85)) drop-shadow(0 0 60px rgba(255,120,40,0.45)); }

/* Halloween: will-o'-wisps over the graves */
.ev-wisp { position: absolute; width: 12px; height: 16px; margin-left: -6px; z-index: 3; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(circle at 50% 65%, #f2ecff, #a98bff 45%, rgba(120,80,255,0) 75%);
    box-shadow: 0 0 14px 4px rgba(150,110,255,0.45);
    animation: evWisp 7s ease-in-out infinite, evWispFlicker 2.2s ease-in-out infinite alternate; }
@keyframes evWisp {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(22px, -14px); }
    50%      { transform: translate(4px, -26px); }
    75%      { transform: translate(-20px, -10px); }
}
@keyframes evWispFlicker { from { opacity: 0.35; } to { opacity: 0.95; } }
/* Halloween: a ghost sneaks up behind a walker, who jumps */
.ev-ghost.is-sneak { width: 110px; }
.ev-ghost.is-sneak .ev-ghost-who { animation: evSneak 4.4s ease-in-out forwards; }
@keyframes evSneak {
    0%   { transform: translateY(54px) scale(0.85); opacity: 0; }
    22%  { transform: translateY(-8px) scale(1); opacity: 0.95; }
    34%  { transform: translateY(-16px) scale(1.12); opacity: 1; }
    60%  { transform: translateY(-20px) scale(1.05); opacity: 0.9; }
    100% { transform: translateY(-140px) scale(1); opacity: 0; }
}
.ev-walker.is-spooked .ev-face img { animation: evSpook 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) 2; }
@keyframes evSpook { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px) rotate(-6deg); } }
.ev-bang { position: absolute; left: 50%; top: 0; margin-left: -6px; font: 900 22px/1 var(--font-display), sans-serif; color: #ffd34d;
    text-shadow: 0 0 8px rgba(255,180,40,0.9), 0 2px 0 #3a1200; animation: evBang 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes evBang { from { transform: scale(0) translateY(10px); } to { transform: scale(1) translateY(0); } }

/* Halloween: the hill behind the graveyard, a house with its lights on */
.ev-hill { position: absolute; left: 0; right: 0; bottom: 18px; height: 170px; z-index: 0; pointer-events: none; }
/* the hero's small print stays above whatever the season stands there */
html[data-event] .hero-micro { position: relative; z-index: 1; }
.ev-hill svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* a tapped lantern flares and throws sparks; sometimes a Pumpkaboo pops up */
.ev-grass.is-grass .ev-jack { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ev-flare { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 3; }
.ev-flare::before { content: ""; position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,222,140,0.8), rgba(255,140,40,0.32) 45%, transparent 70%);
    animation: evFlare 0.9s ease-out forwards; }
@keyframes evFlare { 0% { transform: scale(0.3); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.ev-flare i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffe08a; opacity: 0;
    box-shadow: 0 0 6px 1px rgba(255,170,60,0.9); animation: evSpark 1.05s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes evSpark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
.ev-jack-pop { position: absolute; left: 50%; bottom: 26%; width: 76px; margin-left: -38px; z-index: 0;
    animation: evJackPop 2.6s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
.ev-jack-pop img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@keyframes evJackPop {
    0%   { transform: translateY(36px) scale(0.6); opacity: 0; }
    20%  { transform: translateY(-30px) scale(1); opacity: 1; }
    36%  { transform: translateY(-24px) rotate(-7deg); }
    52%  { transform: translateY(-26px) rotate(7deg); }
    72%  { transform: translateY(-24px) rotate(0); opacity: 1; }
    100% { transform: translateY(28px) scale(0.7); opacity: 0; }
}
/* sky: bats pouring out of the moon as the page opens */
#ev-layer .ev-bat.is-swarm { animation-name: evBatOut; animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1); }
@keyframes evBatOut {
    0%   { transform: translate3d(var(--x0), var(--y0), 0) scale(calc(var(--s, 1) * 0.15)); opacity: 0; }
    10%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { transform: translate3d(var(--x1), var(--y1), 0) scale(var(--s, 1)); opacity: 0; }
}
/* sky, further down the page: a ghost drifting past behind the cards */
#ev-layer .ev-haunt { position: absolute; left: 0; width: 92px; animation: evHaunt 16s linear forwards; will-change: transform; }
#ev-layer .ev-haunt > span { display: block; animation: evHauntBob 2.8s ease-in-out infinite alternate, evHauntFlicker 3.4s ease-in-out infinite; }
#ev-layer .ev-haunt img { display: block; width: 100%; height: auto; image-rendering: pixelated;
    filter: brightness(1.12) drop-shadow(0 0 8px rgba(180,130,255,0.85)); }
#ev-layer .ev-haunt.is-right img { transform: scaleX(-1); }
@keyframes evHaunt { 0% { transform: translateX(var(--x0)); opacity: 0; } 6% { opacity: 0.85; } 94% { opacity: 0.85; } 100% { transform: translateX(var(--x1)); opacity: 0; } }
@keyframes evHauntBob { from { transform: translateY(-16px); } to { transform: translateY(16px); } }
@keyframes evHauntFlicker { 0%, 100% { opacity: 1; } 38% { opacity: 0.3; } 52% { opacity: 0.95; } 70% { opacity: 0.45; } }

/* the pumpkin hunt: five small pumpkins in quiet corners down the page */
.ev-hunt { position: absolute; z-index: 5; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none;
    cursor: pointer; opacity: 0.94; transition: transform 0.25s ease, opacity 0.25s ease; -webkit-tap-highlight-color: transparent; }
.ev-hunt::after { content: ""; position: absolute; inset: -12px; }   /* a larger target for a thumb */
.ev-hunt svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 7px rgba(255,140,40,0.5)); }
.ev-hunt:hover, .ev-hunt:focus-visible { transform: scale(1.18) rotate(-6deg); opacity: 1; }
.ev-hunt:focus-visible { outline: 2px solid var(--accent1); outline-offset: 4px; }
.ev-hunt.is-caught { pointer-events: none; animation: evCaught 0.85s cubic-bezier(0.3, 0.7, 0.3, 1) forwards; }
@keyframes evCaught {
    0%   { transform: scale(1); opacity: 1; }
    35%  { transform: translateY(-12px) scale(1.55) rotate(-10deg); opacity: 1; }
    100% { transform: translateY(-46px) scale(0.2) rotate(24deg); opacity: 0; }
}
.ev-hunt.is-pass   { bottom: 6%; right: 4%; }
.ev-hunt.is-coin   { bottom: 7%; left: 16%; }
.ev-hunt.is-market { top: 8%; right: 5%; }
.ev-hunt.is-steps  { top: -44px; right: 3%; }
.ev-hunt.is-footer { top: 46%; left: 15%; }
@media (max-width: 640px) {
    .ev-hunt { width: 30px; height: 25px; }
    .ev-hunt.is-pass   { bottom: 1.5%; right: 5%; }
    .ev-hunt.is-coin   { bottom: 2%; left: auto; right: 5%; }
    .ev-hunt.is-market { top: 2%; right: 4%; }
    .ev-hunt.is-steps  { top: -36px; right: 2%; }
    .ev-hunt.is-footer { top: 22px; left: auto; right: 6%; }
}
.ev-ribbon .ev-r-hunt { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--text-secondary); }
.ev-ribbon .ev-r-hunt svg { width: 17px; height: 14px; display: block; }
.ev-ribbon .ev-r-hunt:hover { color: var(--text-primary); }
.ev-hunt-done { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1rem; background: rgba(4,2,10,0.62); }
.ev-hunt-card { width: min(380px, 100%); padding: 1.4rem 1.4rem 1.2rem; border-radius: 22px; text-align: center;
    background: linear-gradient(160deg, #1d1230, #0d0816 70%); border: 1px solid rgba(255,176,74,0.35);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(255,120,30,0.12); animation: evHuntIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
@keyframes evHuntIn { from { transform: translateY(16px) scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-hunt-medal { display: block; width: 104px; margin: 0 auto 0.5rem; }
.ev-hunt-medal .pc-badge, .ev-hunt-medal svg { display: block; width: 100%; height: auto; }
.ev-hunt-card h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--text-primary); }
.ev-hunt-card p { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.ev-hunt-card p b { color: #ffc46e; }
.ev-hunt-card .ev-hunt-in { margin-top: 0.7rem; }
.ev-hunt-actions { display: flex; justify-content: center; gap: 0.5rem; }

/* Lights: the diyas wait dark until the lamplighter passes */
.ev-diya.is-unlit i { opacity: 0; animation-delay: var(--lit); }
.ev-diya.is-unlit::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,180,0.95), rgba(255,170,60,0.4) 40%, transparent 70%);
    opacity: 0; pointer-events: none; animation: evLightUp 0.8s ease-out var(--lit) both; }
@keyframes evLightUp { 0% { transform: scale(0.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.ev-walker.is-lamplighter .ev-face img { filter: drop-shadow(0 0 10px rgba(255,180,80,0.85)); }

/* sky: rising from the bottom (Drifloon, Lampent, balloons) */
#ev-layer .ev-drift { position: absolute; bottom: -130px; width: 84px; animation: evDriftUp 16s linear forwards; will-change: transform; }
#ev-layer .ev-drift > span { display: block; position: relative; animation: evSway 3.4s ease-in-out infinite alternate; }
#ev-layer .ev-drift img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
#ev-layer .ev-drift.is-lamp img { filter: drop-shadow(0 0 10px rgba(255,190,90,0.9)) drop-shadow(0 0 26px rgba(255,140,50,0.45)); }
#ev-layer .ev-drift.is-balloon { width: 78px; }
#ev-layer .ev-drift.is-balloon .ev-balloons { display: block; width: 58%; margin: 0 auto -16%; }
@keyframes evDriftUp {
    0%   { transform: translateY(0); opacity: 0; }
    8%   { opacity: 0.96; }
    86%  { opacity: 0.96; }
    100% { transform: translateY(-128vh); opacity: 0; }
}
@keyframes evSway { from { transform: translateX(-24px) rotate(-6deg); } to { transform: translateX(24px) rotate(6deg); } }
/* sky: gliding across (Volcarona, Wingull) */
#ev-layer .ev-glide { position: absolute; left: 0; width: 104px; animation: evGlide var(--dur, 11s) linear forwards; will-change: transform; }
#ev-layer .ev-glide > span { display: block; animation: evFloat 1.8s ease-in-out infinite alternate; }
#ev-layer .ev-glide img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
#ev-layer .ev-glide.is-right img { transform: scaleX(-1); }
#ev-layer .ev-glide.is-glow img { filter: drop-shadow(0 0 10px rgba(255,170,60,0.85)) drop-shadow(0 0 28px rgba(255,110,40,0.4)); }
#ev-layer .ev-glide.is-gull { width: 80px; }
@keyframes evGlide { from { transform: translateX(var(--x0)); } to { transform: translateX(var(--x1)); } }
@keyframes evFloat { from { transform: translateY(-9px) rotate(-3deg); } to { transform: translateY(9px) rotate(3deg); } }
#ev-layer .ev-ember { position: absolute; width: 6px; height: 6px; border-radius: 50%;
    background: radial-gradient(circle, #fff6c8, #ffb347 55%, rgba(255,120,40,0));
    animation: evEmber 1.4s ease-in forwards; }
@keyframes evEmber { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx, 0), 54px) scale(0.3); opacity: 0; } }
/* sky: a rocket climbing, a shooting star */
#ev-layer .ev-rocket { position: absolute; width: 3px; height: 18px; margin-left: -1.5px; border-radius: 2px;
    background: linear-gradient(to bottom, #fffbe6, #ffd36b 35%, rgba(255,140,40,0)); box-shadow: 0 0 8px rgba(255,180,70,0.9);
    animation: evRocket 1.05s cubic-bezier(0.2, 0.6, 0.35, 1) forwards; }
@keyframes evRocket { from { transform: translateY(0); opacity: 1; } 85% { opacity: 1; } to { transform: translateY(var(--h)); opacity: 0.4; } }
#ev-layer .ev-shoot { position: absolute; width: 130px; height: 2px; border-radius: 2px;
    background: linear-gradient(to left, #fff, rgba(255,240,200,0.6) 30%, rgba(255,240,200,0));
    transform-origin: 100% 50%; opacity: 0; animation: evShoot 1.3s ease-out forwards; }
@keyframes evShoot {
    0%   { transform: rotate(-24deg) translateX(0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: rotate(-24deg) translateX(-42vw); opacity: 0; }
}

/* Lights: a rangoli on the ground, Litwick among the lamps, a wish */
.ev-rangoli { position: absolute; left: 50%; bottom: 3px; width: 230px; height: 230px; margin-left: -115px; z-index: 1;
    transform: scaleY(0.2); transform-origin: 50% 100%; opacity: 0.92; }
.ev-rangoli svg { display: block; width: 100%; height: 100%; }
.ev-sit { position: absolute; bottom: 2px; width: 74px; margin-left: -37px; z-index: 3; }
.ev-sit img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255,170,80,0.7)); }
.ev-sit.is-flip img { transform: scaleX(-1); }
.ev-grass.is-diyas .ev-walker { bottom: -12px; }
.ev-grass.is-diyas .ev-face img { filter: drop-shadow(0 0 6px rgba(0,0,0,0.6)); }
.ev-wish { position: absolute; left: 50%; bottom: 10px; width: 92px; margin-left: -46px; z-index: 2; }
.ev-wish-who { display: block; position: relative; opacity: 0; animation: evWish 6.2s ease-in-out forwards; }
.ev-wish-who img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(255,236,150,0.9)); }
.ev-wish-who i { position: absolute; width: 12px; height: 12px; background: #fff3b0;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: evStar 0.9s ease-in-out infinite alternate; }
@keyframes evStar { from { transform: scale(0.4) rotate(0); opacity: 0.4; } to { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes evWish {
    0%   { transform: translateY(40px) scale(0.85); opacity: 0; }
    18%  { transform: translateY(-22px) scale(1); opacity: 1; }
    65%  { transform: translateY(-48px) scale(1); opacity: 1; }
    100% { transform: translateY(-36px) scale(0.95); opacity: 0; }
}
/* a Pokémon that steps in for a moment (a rocket, a party popper) */
.ev-walker.is-cameo .ev-face { animation: evCameoIn 0.5s ease both; }
.ev-walker.is-gone { opacity: 0; transition: opacity 0.5s ease; }
@keyframes evCameoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ev-walker.is-right.is-cameo .ev-face { animation-name: evCameoInR; }
@keyframes evCameoInR { from { opacity: 0; transform: translateY(10px) scaleX(-1); } to { opacity: 1; transform: scaleX(-1); } }
.ev-walker.is-launch .ev-face img { animation: evLaunch 4s ease forwards; }
@keyframes evLaunch {
    0%, 22% { transform: translateY(0); }
    27%     { transform: translateY(-14px); }
    32%     { transform: translateY(0); }
    100%    { transform: translateY(0); }
}

/* Summer: Lapras with a Pikachu on its back */
.ev-face { position: relative; }
/* the rider bobs with its mount: both start on the same frame, same rhythm */
.ev-rider { position: absolute; left: 36%; top: -10%; width: 58%; }
.ev-rider img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ev-walker.is-surf { width: 128px; }

/* Autumn: someone bursts out of a leaf pile */
.ev-pile { position: absolute; bottom: 4px; width: 120px; height: 120px; z-index: 2; }
.ev-pile .ev-pop { left: 0; bottom: 0; }
.ev-pop.is-pile .ev-pop-who img { filter: drop-shadow(0 0 4px rgba(0,0,0,0.6)); }
.ev-fly { position: absolute; left: 60px; bottom: 26px; width: 0; height: 0; }
.ev-fly i, .ev-confetti i { position: absolute; width: 12px; height: 7px; border-radius: 0 70% 0 70%; opacity: 0;
    animation: evFling 1.7s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes evFling {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    45%  { transform: translate(calc(var(--dx) * 0.7), var(--dy)) rotate(calc(var(--r) * 0.5)); opacity: 1; }
    100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)); opacity: 0; }
}

/* Anniversary: a party popper */
.ev-confetti { position: absolute; bottom: 52px; width: 0; height: 0; z-index: 3; }
.ev-confetti i { width: 6px; height: 9px; border-radius: 1px; animation-duration: 2.1s; }

@media (max-width: 860px) {
    .ev-grass { height: 88px; margin-top: -20px; }
    .ev-hill { height: 128px; bottom: 12px; }
    .ev-walker { width: 84px; }
    .ev-tree { width: 116px; height: 190px; right: 2%; }
    .ev-tree-who { left: 26px; width: 74px; }
    .ev-grave { width: 54px; height: 66px; left: 58%; }
    .ev-grave.is-far { width: 40px; height: 50px; left: 86%; }
    .ev-grave-who { width: 66px; }
    .ev-grave-who.is-out { transform: translateX(-34px) rotate(-9deg); }
    .ev-jack { width: 36px; height: 30px; margin-left: -18px; }
    .ev-jack.is-small { width: 28px; height: 23px; margin-left: -14px; }
    .ev-ghost { width: 96px; }
    .ev-wish { width: 76px; }
    .ev-wish { margin-left: -38px; }
    .ev-rangoli { width: 170px; height: 170px; margin-left: -85px; }
    .ev-sit { width: 58px; margin-left: -29px; }
    .ev-walker.is-surf { width: 104px; }
    #ev-layer .ev-drift { width: 66px; }
    #ev-layer .ev-glide { width: 82px; }
}

/* --------------------------------------------------------------- badges */
/* the badge case in the trainer menu */
.pc-case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.pc-case-tile {
    position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 0.18rem;
    padding: 1rem 0.7rem 0.95rem; border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(75% 55% at 50% 32%, rgba(var(--tile-rgb, 255,194,77), 0.22), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border: 1px solid rgba(var(--tile-rgb, 255,194,77), 0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.pc-case-tile .pc-case-medal { width: 92px; margin-bottom: 0.35rem;
    filter: drop-shadow(0 12px 14px rgba(0,0,0,0.55)); transition: transform 0.3s var(--ease-out, ease); }
.pc-case-tile.is-earned:hover .pc-case-medal { transform: translateY(-3px) rotate(-3deg); }
.pc-case-tile b { font: 800 0.86rem/1.25 var(--font-display); color: #fff; }
.pc-case-no { font: 700 0.64rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgb(var(--tile-rgb, 255,194,77)); }
.pc-case-tile small { font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }
.pc-case-tile.is-todo { border-style: dashed; background: rgba(255,255,255,0.02); }
.pc-case-tile.is-todo .pc-case-medal { opacity: 0.55; filter: saturate(0.6) drop-shadow(0 12px 14px rgba(0,0,0,0.5)); }
.pc-case-tile.is-missed { background: rgba(255,255,255,0.015); border-color: rgba(255,255,255,0.06); }
.pc-case-tile.is-missed .pc-case-medal { opacity: 0.38; filter: grayscale(1); }
.pc-case-tile.is-missed b { color: var(--text-secondary); }
.pc-case-tile.is-missed .pc-case-no { color: var(--text-muted); }

.pc-badge { display: inline-block; width: 56px; height: auto; aspect-ratio: 5 / 6; flex: none; }
.pc-badge.is-mini, .pc-badge.ev-r-mark { aspect-ratio: 1; }
.pc-badge svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pc-badge-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pc-badge-card {
    display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.8rem; border-radius: 14px;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
}
.pc-badge-card b { display: block; font-family: var(--font-display); font-size: 0.88rem; color: #fff; }
.pc-badge-card span { font-size: 0.74rem; color: var(--text-muted); }
.pc-badge.is-big { width: 96px; }
.pc-badge-card .pc-badge-no { display: block; margin: 0.1rem 0 0.15rem; font: 700 0.7rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.08em; color: var(--accent1); }
.pc-badge-card.is-locked { opacity: 0.55; filter: grayscale(0.6); }
.pc-badge-mini { width: 22px; height: 22px; vertical-align: -6px; margin-left: 0.25rem; }

/* ----------------------------------------------------- checkout additions */
.ev-code { margin-top: 0.9rem; padding: 0.8rem 0.85rem; border-radius: 12px;
    background: rgba(var(--ev-ink-rgb, 255,194,77), 0.06); border: 1px dashed rgba(var(--ev-ink-rgb, 255,194,77), 0.35); }
.ev-code[hidden] { display: none; }
.ev-code label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.45rem; }
.ev-code label .pc-badge { width: 20px; height: 20px; }
.ev-code-row { display: flex; gap: 0.5rem; }
.ev-code-row .input-box { margin-top: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ev-code-row .btn { margin-top: 0; white-space: nowrap; }
.ev-code-msg { margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--text-muted); min-height: 1em; }
.ev-code-msg.is-good { color: #8ff0b4; }
.ev-code-msg.is-bad { color: #ffaaa0; }
.ev-code.is-applied { border-style: solid; border-color: rgba(143,240,180,0.45); background: rgba(16,185,129,0.07); }
.ev-bonus-tag {
    display: inline-block; margin-left: 0.4rem; font-family: var(--font-display); font-size: 0.36em; font-weight: 700;
    letter-spacing: 0.02em; vertical-align: middle; border-radius: 999px; padding: 0.3em 0.7em;
    /* the amount above it is drawn with a text-clipped gradient; this must not inherit it */
    -webkit-text-fill-color: #0b0d14; color: #0b0d14;
    background: var(--ev-ink, var(--accent1)); -webkit-background-clip: border-box; background-clip: border-box;
}
.ev-xp-tag { color: var(--ev-ink, var(--accent1)); font-weight: 700; }
.ev-news { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.7rem; cursor: pointer;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-secondary); }
.ev-news input { width: 16px; height: 16px; margin-top: 0.15rem; accent-color: var(--accent1); flex: none; }

/* ------------------------------------------- the menu, inside the name chip */
.profile-chip { position: relative; }
.profile-chip .menu-ico { display: inline-grid; place-items: center; color: var(--accent1); margin-right: -0.1rem; }
.profile-chip .menu-dot {
    position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent2); box-shadow: 0 0 0 2px #05070d;
}
.profile-chip .menu-dot[hidden] { display: none; }
.profile-chip:focus-visible { outline: 2px solid var(--accent1); outline-offset: 2px; }
body.pc-drawer-open #back-to-top { opacity: 0 !important; pointer-events: none !important; }
/* Signed in, the right side of the bar carries four controls, and between
   1080 and ~1240px the section links used to wrap to two lines. They keep to
   one line, tighten a little, and step aside when there is no room. */
.header-nav a { white-space: nowrap; }
@media (max-width: 1400px) {
    body:has(#profileActions:not(.hidden)) .header-nav { gap: 0.8rem; }
    body:has(#profileActions:not(.hidden)) .header-nav a { letter-spacing: 0.1em; }
}
@media (max-width: 1260px) {
    body:has(#profileActions:not(.hidden)) .header-nav { display: none; }
}

/* ------------------------------------------------------- trainer drawer */
.pc-drawer-scrim {
    position: fixed; inset: 0; z-index: 380; background: rgba(2,4,10,0.55);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.pc-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.pc-drawer {
    --dr-bg: #0a0d16; --dr-raise: #0f131e; --dr-line: rgba(255,255,255,0.075); --dr-line-2: rgba(255,255,255,0.13);
    --dr-fill: rgba(255,255,255,0.032); --dr-fill-2: rgba(255,255,255,0.06);
    --dr-ink: #edf1f7; --dr-ink-2: #b6bfce; --dr-muted: #8590a5; --dr-good: #4ade80; --dr-bad: #f87171;
    /* the trainer's own colour, or the shop's */
    --dr-hi: var(--card-a, var(--accent1));
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 390;
    width: min(460px, 100vw); display: flex; flex-direction: column;
    background: var(--dr-bg); border-left: 1px solid var(--dr-line);
    box-shadow: -30px 0 80px rgba(0,0,0,0.55);
    transform: translate3d(104%, 0, 0); transition: transform 0.38s var(--ease-out, cubic-bezier(.22,1,.36,1));
    color: var(--dr-ink); font-family: var(--font-body, 'Inter', sans-serif);
}
.pc-drawer.is-open { transform: none; }
.pc-drawer:focus { outline: none; }
.pc-drawer button { font-family: inherit; }

/* the slim bar: clear over the banner, solid once the name has gone under it */
.pc-dr-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6; height: 52px;
    display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px; pointer-events: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.pc-dr-top > * { pointer-events: auto; }
.pc-drawer.is-compact .pc-dr-top { background: var(--dr-raise); box-shadow: 0 1px 0 var(--dr-line); }
.pc-dr-mini { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translate3d(0, 6px, 0);
    transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.pc-drawer.is-compact .pc-dr-mini { opacity: 1; transform: none; }
.pc-dr-mini img { width: 30px; height: 30px; border-radius: 50%; background: var(--dr-fill-2); image-rendering: pixelated; object-fit: contain; flex: none; }
.pc-dr-mini b { min-width: 0; font: 700 14px/1.2 var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-dr-ib {
    width: 34px; height: 34px; margin-left: auto; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
    color: #fff; background: rgba(6,8,14,0.52); border: 1px solid rgba(255,255,255,0.16);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pc-dr-ib:hover { background: rgba(6,8,14,0.78); border-color: rgba(255,255,255,0.3); }
.pc-drawer.is-compact .pc-dr-ib { background: var(--dr-fill-2); }
.pc-dr-ib:focus-visible, .pc-dr-pill:focus-visible { outline: 2px solid var(--dr-hi); outline-offset: 2px; }

.pc-dr-scroll {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent;
}

/* the banner and who you are */
.pc-dr-head { position: relative; padding: 0 20px 20px; }
.pc-dr-banner {
    --ban-a: #6b5216; --ban-b: #12141d;
    position: relative; height: 116px; margin: 0 -20px; overflow: hidden;
    background:
        radial-gradient(80% 130% at 92% -20%, rgba(255,255,255,0.24), transparent 58%),
        linear-gradient(140deg, var(--ban-b) 8%, var(--ban-a) 100%);
}
.pc-drawer.has-color .pc-dr-banner { --ban-a: var(--card-a); --ban-b: var(--card-b); }
.pc-dr-banner::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.17) 1px, transparent 1.5px); background-size: 13px 13px;
    -webkit-mask-image: linear-gradient(205deg, #000 5%, transparent 72%); mask-image: linear-gradient(205deg, #000 5%, transparent 72%);
}
.pc-dr-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--dr-bg) 100%); }
.pc-dr-trim { position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 1; display: none; }
html[data-event] .pc-dr-trim { display: block; background: var(--ev-trim, none) repeat-x 0 0; }

.pc-dr-idrow { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -52px; }
.pc-dr-ring {
    --p: 0; position: relative; flex: none; width: 98px; height: 98px; border-radius: 50%; padding: 4px;
    background: conic-gradient(var(--dr-hi) calc(var(--p) * 1%), rgba(255,255,255,0.14) 0);
    box-shadow: 0 0 0 4px var(--dr-bg), 0 14px 30px rgba(0,0,0,0.45);
}
.pc-dr-avatar {
    width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: radial-gradient(circle at 50% 32%, #232b40, #0c0f18 72%); box-shadow: inset 0 0 0 3px var(--dr-bg);
}
.pc-dr-avatar img { width: 86px; height: 86px; margin-top: 6px; image-rendering: pixelated; object-fit: contain; }
.pc-dr-lv {
    display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: 99px;
    font: 800 11px/1 var(--font-display); letter-spacing: 0.02em; color: #0b0d14; background: var(--dr-hi); white-space: nowrap;
}
.pc-dr-ring .pc-dr-lv { position: absolute; right: -4px; bottom: 4px; height: 24px; padding: 0 9px; font-size: 12px; box-shadow: 0 0 0 3px var(--dr-bg); }
.pc-dr-hacts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-bottom: 8px; }
.pc-dr-pill {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 99px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--dr-ink); background: rgba(255,255,255,0.05); border: 1px solid var(--dr-line-2);
    white-space: nowrap; transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pc-dr-pill:hover { background: var(--dr-fill-2); border-color: rgba(255,255,255,0.26); }
.pc-dr-name { margin: 12px 0 0; font: 700 23px/1.2 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pc-dr-title { margin: 5px 0 0; font: 700 11px/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dr-hi); }
.pc-dr-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--dr-muted); }
.pc-dr-bio { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--dr-ink-2); overflow-wrap: anywhere; }
.pc-dr-title[hidden], .pc-dr-bio[hidden], .pc-dr-badges[hidden] { display: none; }
.pc-dr-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.pc-dr-badges .pc-badge { width: 30px; height: 30px; }
.pc-dr-bmore { height: 26px; padding: 0 9px; border-radius: 99px; cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--dr-ink-2); background: var(--dr-fill-2); border: 1px solid var(--dr-line); }
.pc-dr-qs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-fill); }
.pc-dr-qs > div { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; padding: 10px 12px; }
.pc-dr-qs > div + div { border-left: 1px solid var(--dr-line); }
.pc-dr-qs dt { font-size: 12px; color: var(--dr-muted); }
.pc-dr-qs dd { margin: 0; font: 700 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* tabs, pinned under the slim bar */
.pc-dr-tabs {
    position: sticky; top: 52px; z-index: 5; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0 6px; background: var(--dr-raise); border-top: 1px solid var(--dr-line); border-bottom: 1px solid var(--dr-line);
}
.pc-dr-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 10px 2px 9px;
    font-size: 11.5px; font-weight: 600; line-height: 1.1; color: var(--dr-muted); background: none; border: 0; cursor: pointer;
    transition: color 0.15s ease;
}
.pc-dr-tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-dr-tab:hover, .pc-dr-tab[aria-selected="true"] { color: var(--dr-ink); }
.pc-dr-tab[aria-selected="true"] svg { color: var(--dr-hi); }
.pc-dr-tab::after {
    content: ''; position: absolute; left: 20%; right: 20%; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0;
    background: var(--dr-hi); transform: scaleX(0); transition: transform 0.2s ease;
}
.pc-dr-tab[aria-selected="true"]::after { transform: none; }
.pc-dr-tab:focus-visible { outline: 2px solid var(--dr-hi); outline-offset: -3px; border-radius: 10px; }
.pc-dr-tab .n {
    position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px;
    display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #0b0d14; background: var(--accent2); box-shadow: 0 0 0 2px var(--dr-raise);
}

.pc-dr-main { padding: 20px 20px 28px; }
.pc-dr-pane[hidden], .pc-dr-gate[hidden] { display: none; }
.pc-dr-gate { margin-bottom: 18px; }
.pc-dr-sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.pc-dr-pane > .pc-dr-sh:first-child { margin-top: 0; }
.pc-dr-h { margin: 0; font: 700 15px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--dr-ink); }
.pc-dr-meta { font-size: 12.5px; color: var(--dr-muted); text-align: right; }
.pc-dr-more { flex: none; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dr-hi); }
.pc-dr-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pc-dr-note { margin: -2px 0 12px; font-size: 13px; line-height: 1.5; color: var(--dr-muted); }
.pc-dr-note.is-center { margin: 10px 0 0; text-align: center; font-size: 12.5px; }
.pc-dr-empty { margin: 0; padding: 22px 8px; text-align: center; color: var(--dr-muted); font-size: 13.5px; }
.pc-dr-locked { display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5;
    color: var(--dr-muted); background: var(--dr-fill); border: 1px dashed var(--dr-line-2); }
.pc-dr-locked svg { flex: none; }
.pc-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 18px; text-align: center; border-radius: 16px; border: 1px dashed var(--dr-line-2); }
.pc-empty-ic { width: 48px; height: 48px; margin-bottom: 4px; border-radius: 14px; display: grid; place-items: center; color: var(--dr-hi); background: var(--dr-fill-2); }
.pc-empty b { font: 700 16px/1.3 var(--font-display); }
.pc-empty p { margin: 0; max-width: 32ch; font-size: 13.5px; line-height: 1.5; color: var(--dr-muted); }
.pc-empty .btn { margin-top: 10px; }
.pc-skel { display: grid; gap: 8px; }
.pc-skel i { display: block; height: 52px; border-radius: 14px; background: var(--dr-fill-2); animation: pcSkel 1.2s ease-in-out infinite alternate; }
.pc-skel i:nth-child(2) { height: 36px; width: 80%; }
.pc-skel i:nth-child(3) { height: 36px; width: 60%; }
@keyframes pcSkel { from { opacity: 0.5; } to { opacity: 1; } }

/* the sign-in-once box */
.pc-reauth { padding: 16px; border-radius: 16px; border: 1px solid rgba(var(--accent1-rgb), 0.35); background: rgba(var(--accent1-rgb), 0.06); }
.pc-reauth p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--dr-ink-2); }
.pc-reauth p b { display: block; margin-bottom: 3px; font: 700 15px/1.3 var(--font-display); color: var(--dr-ink); }

/* forms */
.pc-dr-form { display: grid; gap: 8px; }
.pc-dr-form > label:not(.pc-dr-toggle) { font-size: 13px; font-weight: 600; color: var(--dr-ink); }
.pc-dr-form .input-box { margin-top: 0; }
.pc-dr-form .hint { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dr-muted); }
.pc-dr-form .msg { margin: 0; font-size: 12.5px; min-height: 0; }
.pc-dr-form .msg:empty { display: none; }
.pc-dr-form .msg.is-good { color: #8ff0b4; }
.pc-dr-form .hint.is-good { display: flex; align-items: center; gap: 6px; justify-content: flex-start; color: #8ff0b4; }
.pc-dr-form .hint .pc-dr-link { margin: 0 0 0 4px; font-size: inherit; }
.pc-dr-form .hint.is-block { display: block; }
.pc-dr-form .msg.is-bad { color: #ffaaa0; }
.pc-inline { display: flex; gap: 8px; }
.pc-inline .input-box { flex: 1; min-width: 0; margin: 0; }
.pc-inline .btn { flex: none; margin: 0; }
.pc-fit { justify-self: start; }
.pc-dr-select { width: 100%; margin: 0; }
.pc-dr-toggle { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--dr-ink-2); cursor: pointer; }
.pc-dr-toggle b { display: block; color: var(--dr-ink); font-weight: 600; }
.pc-dr-toggle input {
    -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 99px; cursor: pointer;
    background: rgba(255,255,255,0.16); transition: background-color 0.15s ease;
}
.pc-dr-toggle input::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: transform 0.15s ease;
}
.pc-dr-toggle input:checked { background: var(--dr-hi); }
.pc-dr-toggle input:checked::after { transform: translateX(16px); }
.pc-dr-toggle input:disabled { opacity: 0.45; cursor: not-allowed; }
.pc-dr-toggle input:focus-visible { outline: 2px solid var(--dr-hi); outline-offset: 2px; }
.pc-dr-toggle.is-locked { color: var(--dr-muted); cursor: not-allowed; }
.pc-dr-link { margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--dr-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.pc-dr-row2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pc-dr-row2 .btn, .pc-again, .pc-rc-acts .btn, .pc-card-acts .btn, .pc-set-row .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 0;
}
.pc-dr-row2 .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* cards the panes are made of */
.pc-row-card { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-row-card > svg { flex: none; color: var(--dr-muted); }
.pc-row-card > div { flex: 1; min-width: 0; }
.pc-row-card b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row-card span { display: block; font-size: 12.5px; color: var(--dr-muted); }

.pc-ev {
    display: flex; align-items: flex-start; gap: 14px; padding: 15px; border-radius: 16px;
    border: 1px solid rgba(var(--ev-ink-rgb, 255,194,77), 0.3);
    background: radial-gradient(120% 120% at 100% 0%, rgba(var(--ev-glow-rgb, 255,194,77), 0.14), transparent 60%), var(--dr-fill);
}
.pc-ev .pc-badge { width: 48px; height: 48px; }
.pc-ev b { font: 700 15.5px/1.3 var(--font-display); }
.pc-ev p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dr-ink-2); }
.pc-ev p b { font: inherit; font-weight: 600; color: var(--dr-ink); }
.pc-code {
    padding: 1px 8px; border-radius: 6px; cursor: pointer; font: 700 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em;
    color: var(--ev-ink, var(--accent1)); background: rgba(var(--ev-ink-rgb, 255,194,77), 0.12); border: 1px dashed rgba(var(--ev-ink-rgb, 255,194,77), 0.5);
}

.pc-lvl {
    padding: 16px; border-radius: 16px; border: 1px solid var(--dr-line);
    background: radial-gradient(120% 110% at 100% 0%, rgba(var(--accent1-rgb), 0.1), transparent 62%), var(--dr-fill);
}
.pc-lvl-top { display: flex; align-items: center; gap: 12px; }
.pc-lvl-top img { flex: none; width: 56px; height: 56px; margin: -6px -2px; image-rendering: pixelated; }
.pc-lvl-top img.is-next { margin-left: auto; opacity: 0.5; filter: grayscale(0.5); }
.pc-lvl-top b { display: block; font: 700 17px/1.25 var(--font-display); }
.pc-lvl-top span { font-size: 13px; color: var(--dr-muted); }
.pc-meter { height: 8px; margin-top: 14px; border-radius: 99px; background: rgba(255,255,255,0.08); overflow: hidden; }
.pc-meter i { display: block; height: 100%; border-radius: inherit; background: var(--dr-hi); }
.pc-meter.is-thin { height: 4px; margin-top: 8px; }
.pc-lvl-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--dr-muted); }
.pc-lvl-foot b { color: var(--dr-ink); font-weight: 600; }
.pc-lvl-next { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--dr-line); font-size: 13px; color: var(--dr-ink-2); }
.pc-lvl-next svg { flex: none; color: var(--dr-hi); }
.pc-lvl-next b { color: var(--dr-ink); font-weight: 600; }
.pc-again { width: 100%; margin-top: 14px !important; }

.pc-achs { display: grid; gap: 8px; }
.pc-ach { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-ach-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--dr-ink-2); background: var(--dr-fill-2); }
.pc-ach.is-done .pc-ach-ic { color: #0b0d14; background: var(--dr-hi); }
.pc-ach-b { min-width: 0; }
.pc-ach-b b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pc-ach-b span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--dr-muted); }
.pc-ach-n { font-size: 12.5px; font-weight: 600; color: var(--dr-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-ach.is-done .pc-ach-n { color: var(--dr-good); }

.pc-feed { list-style: none; margin: 0; padding: 2px 0 0; }
.pc-feed li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding-bottom: 14px; }
.pc-feed li:last-child { padding-bottom: 0; }
.pc-feed li:not(:last-child)::before { content: ''; position: absolute; left: 14.5px; top: 32px; bottom: 2px; width: 1px; background: var(--dr-line-2); }
.pc-feed-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--dr-ink-2); background: var(--dr-raise); border: 1px solid var(--dr-line-2); }
.pc-feed li.is-good .pc-feed-ic { color: var(--dr-good); }
.pc-feed li.is-bad .pc-feed-ic { color: var(--dr-bad); }
.pc-feed li.is-accent .pc-feed-ic { color: var(--dr-hi); }
.pc-feed p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--dr-ink-2); }
.pc-feed p b { color: var(--dr-ink); font-weight: 600; }
.pc-feed time { margin-top: 6px; font-size: 12px; color: var(--dr-muted); white-space: nowrap; }

/* orders */
.pc-of { display: grid; gap: 10px; }
.pc-search {
    display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 13px; border-radius: 12px; cursor: text;
    color: var(--dr-muted); background: var(--dr-fill); border: 1px solid var(--dr-line-2); transition: border-color 0.15s ease;
}
.pc-search:focus-within { border-color: var(--dr-hi); }
.pc-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--dr-ink); font: 14px/1 var(--font-body, sans-serif); }
.pc-search input::placeholder { color: var(--dr-muted); }
.pc-seg { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pc-seg::-webkit-scrollbar { display: none; }
.pc-seg button {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--dr-ink-2); background: var(--dr-fill); border: 1px solid var(--dr-line);
}
.pc-seg button b { font-size: 12px; font-weight: 600; color: var(--dr-muted); }
.pc-seg button:hover { border-color: var(--dr-line-2); color: var(--dr-ink); }
.pc-seg button[aria-pressed="true"] { color: #0b0d14; background: var(--dr-ink); border-color: var(--dr-ink); }
.pc-seg button[aria-pressed="true"] b { color: rgba(11,13,20,0.6); }
.pc-of-sum { margin: 14px 0 10px; font-size: 12.5px; color: var(--dr-muted); }
.pc-oc { padding: 15px 16px; border-radius: 16px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-oc + .pc-oc { margin-top: 10px; }
.pc-oc.is-live { border-color: rgba(var(--accent1-rgb), 0.32); background: radial-gradient(120% 100% at 100% 0%, rgba(var(--accent1-rgb), 0.07), transparent 60%), var(--dr-fill); }
.pc-oc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-oc-amt { font: 700 21px/1.2 var(--font-display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pc-oc-amt small { margin-left: 7px; font: 600 12.5px/1 var(--font-body, sans-serif); letter-spacing: 0; color: var(--ev-ink, var(--accent1)); }
.pc-oc-id { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 12.5px; color: var(--dr-muted); }
.pc-oc-id code { font: 12.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--dr-ink-2); }
.pc-oc-id > span { margin-left: auto; white-space: nowrap; }
.pc-icon-btn {
    width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; cursor: pointer; flex: none;
    color: var(--dr-muted); background: none; border: 1px solid transparent;
}
.pc-icon-btn:hover { color: var(--dr-ink); background: var(--dr-fill-2); border-color: var(--dr-line); }
.pc-oc-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--dr-line); }
.pc-oc-dl > div { min-width: 0; }
.pc-oc-dl dt { font-size: 12px; color: var(--dr-muted); }
.pc-oc-dl dd { margin: 2px 0 0; font-size: 13.5px; color: var(--dr-ink); overflow-wrap: anywhere; }
.pc-oc-dl code { font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.pc-oc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.pc-oc-acts button {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--dr-ink-2); background: var(--dr-fill); border: 1px solid var(--dr-line-2);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pc-oc-acts button:hover { color: var(--dr-ink); background: var(--dr-fill-2); border-color: rgba(255,255,255,0.26); }

/* where an order is */
.pc-steps { list-style: none; margin: 16px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.pc-steps li { position: relative; padding-top: 20px; font-size: 11.5px; line-height: 1.35; color: var(--dr-muted); text-align: center; }
.pc-steps li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: rgba(255,255,255,0.1); }
.pc-steps li:first-child::before { display: none; }
.pc-steps li i { position: absolute; top: 0; left: 50%; z-index: 1; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
    background: var(--dr-bg); border: 2px solid rgba(255,255,255,0.2); }
.pc-steps li b { display: block; font-weight: 600; color: var(--dr-ink-2); }
.pc-steps li span { display: block; margin-top: 2px; }
.pc-steps li.is-done::before, .pc-steps li.is-now::before { background: var(--accent1); }
.pc-steps li.is-done i { background: var(--accent1); border-color: var(--accent1); }
.pc-steps li.is-now i { border-color: var(--accent1); box-shadow: 0 0 0 4px rgba(var(--accent1-rgb), 0.2); }
.pc-steps li.is-now b { color: var(--dr-ink); }

/* order states, shared with the receipt */
.pc-pill {
    --pill: #ffc24d; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; white-space: nowrap;
    font-size: 12px; font-weight: 600; line-height: 1; color: var(--pill);
    background: color-mix(in srgb, var(--pill) 13%, transparent); border: 1px solid color-mix(in srgb, var(--pill) 30%, transparent);
}
.pc-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pc-pill.s-paid { --pill: #7cc7ff; }
.pc-pill.s-processing { --pill: #c4a6ff; }
.pc-pill.s-confirmed { --pill: #4ade80; }
.pc-pill.s-cancelled { --pill: #f87171; }

/* rewards */
.pc-titles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-tt { display: grid; align-content: start; gap: 3px; padding: 11px 12px; border-radius: 12px; text-align: left; font: inherit; color: var(--dr-ink); border: 1px solid var(--dr-line); background: var(--dr-fill); }
button.pc-tt { cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
button.pc-tt:hover { border-color: rgba(255,255,255,0.24); background: var(--dr-fill-2); }
.pc-tt b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.pc-tt span { font-size: 12px; line-height: 1.35; color: var(--dr-muted); }
.pc-tt.is-on { border-color: var(--dr-hi); background: var(--dr-fill-2); }
.pc-tt.is-on b svg, .pc-tt.is-on span { color: var(--dr-hi); }
.pc-tt.is-locked { opacity: 0.55; }
.pc-tt.is-locked b { color: var(--dr-ink-2); }
.pc-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pc-ladder li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border-radius: 12px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-ladder img { width: 46px; height: 46px; margin: -4px -3px; image-rendering: pixelated; }
.pc-ladder b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pc-ladder span { font-size: 12.5px; color: var(--dr-muted); }
.pc-ladder em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12.5px; color: var(--dr-muted); white-space: nowrap; }
.pc-ladder li.is-done em { color: var(--dr-good); }
.pc-ladder li.is-now { border-color: var(--dr-hi); background: var(--dr-fill-2); }
.pc-ladder li.is-now em { color: var(--dr-hi); font-weight: 600; }
.pc-ladder li.is-next img { opacity: 0.55; filter: grayscale(0.6); }

/* support */
.pc-sup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-sup-ava { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #0b0d14; background: var(--accent1); }
.pc-sup-head b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.pc-sup-head span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--dr-muted); }
.pc-sup-head span i { width: 7px; height: 7px; border-radius: 50%; background: var(--dr-good); box-shadow: 0 0 0 3px rgba(74,222,128,0.18); }
.pc-chat { display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
.pc-day { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-size: 12px; font-weight: 600; color: var(--dr-muted); }
.pc-day::before, .pc-day::after { content: ''; flex: 1; height: 1px; background: var(--dr-line); }
.pc-bubble { max-width: 84%; padding: 9px 13px 7px; border-radius: 18px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-bubble time { display: block; margin-top: 3px; font-size: 11px; opacity: 0.65; text-align: right; }
.pc-bubble.from-user { align-self: flex-end; color: #14110a; background: var(--accent1); border-bottom-right-radius: 6px; }
.pc-bubble.from-owner { align-self: flex-start; color: var(--dr-ink); background: var(--dr-fill-2); border: 1px solid var(--dr-line); border-bottom-left-radius: 6px; }
.pc-bubble.from-owner b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--accent1); }
.pc-chat-empty { display: grid; justify-items: center; gap: 6px; padding: 26px 12px; text-align: center; color: var(--dr-muted); }
.pc-chat-empty b { font: 700 16px/1.3 var(--font-display); color: var(--dr-ink); }
.pc-chat-empty p { margin: 0; max-width: 32ch; font-size: 13.5px; line-height: 1.5; }
.pc-chat-box {
    position: sticky; bottom: 0; z-index: 2; display: grid; gap: 8px; margin: 14px -20px -28px; padding: 12px 20px 18px;
    background: var(--dr-bg); border-top: 1px solid var(--dr-line);
}
.pc-topics { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pc-topics::-webkit-scrollbar { display: none; }
.pc-topic {
    flex: none; height: 30px; padding: 0 12px; border-radius: 99px; cursor: pointer; font-size: 12.5px; font-weight: 600;
    color: var(--dr-ink-2); background: var(--dr-raise); border: 1px solid var(--dr-line-2);
}
.pc-topic:hover { color: var(--dr-ink); border-color: rgba(255,255,255,0.26); }
.pc-chat-box textarea { width: 100%; min-height: 78px; margin: 0; resize: vertical; }
.pc-chat-box .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-chat-box small { font-size: 12px; line-height: 1.4; color: var(--dr-muted); overflow-wrap: anywhere; }
.pc-chat-box .btn { flex: none; margin: 0; }
.pc-chat-box .msg { margin: 0; font-size: 12.5px; color: #ffaaa0; }
.pc-chat-box .msg:empty { display: none; }

/* style */
.pc-preview {
    display: grid; place-items: center; padding: 20px 16px; border-radius: 18px; border: 1px solid var(--dr-line);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px), var(--dr-fill);
}
.pc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.pc-swatch {
    display: grid; justify-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 12px; cursor: pointer;
    background: var(--dr-fill); border: 1px solid var(--dr-line); color: var(--dr-muted);
    font-size: 12px; font-weight: 600; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pc-swatch i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a), var(--sw-b)); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.pc-swatch.is-none i { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.2) 0 3px, transparent 3px 7px); }
.pc-swatch:hover { border-color: var(--dr-line-2); color: var(--dr-ink-2); }
.pc-swatch.is-on { border-color: var(--sw-a, var(--dr-ink)); color: var(--dr-ink); background: var(--dr-fill-2); box-shadow: 0 0 0 1px var(--sw-a, var(--dr-ink)); }
.pc-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.pc-partner {
    position: relative; aspect-ratio: 1; padding: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
    background: var(--dr-fill); border: 1px solid var(--dr-line); transition: border-color 0.15s ease, background-color 0.15s ease;
}
.pc-partner img { display: block; width: 120%; height: 120%; margin: -10%; image-rendering: pixelated; }
.pc-partner:hover:not(:disabled) { border-color: var(--dr-line-2); background: var(--dr-fill-2); }
.pc-partner.is-on { border-color: var(--dr-hi); background: var(--dr-fill-2); box-shadow: 0 0 0 1px var(--dr-hi); }
.pc-partner.is-locked { cursor: not-allowed; }
.pc-partner.is-locked img { filter: brightness(0) opacity(0.4); }
.pc-partner span { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 700; color: var(--dr-muted); }
.pc-shiny-pair { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; padding: 6px; border-radius: 14px; color: var(--dr-hi); background: var(--dr-fill); border: 1px solid var(--dr-line); }
.pc-shiny-pair img { width: 72px; height: 72px; image-rendering: pixelated; }
.pc-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pc-show {
    position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 6px 9px; border-radius: 12px; cursor: pointer;
    background: var(--dr-fill); border: 1px solid var(--dr-line); color: var(--dr-muted); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center;
}
.pc-show .pc-badge { width: 42px; height: 42px; }
.pc-show span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-show b { position: absolute; top: 6px; right: 7px; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center;
    font-size: 11px; color: #0b0d14; background: var(--dr-hi); }
.pc-show:hover { border-color: var(--dr-line-2); }
.pc-show.is-on { border-color: var(--dr-hi); background: var(--dr-fill-2); color: var(--dr-ink); }

/* settings */
.pc-set { padding: 16px; border-radius: 16px; border: 1px solid var(--dr-line); background: var(--dr-fill); }
.pc-set-sep { height: 1px; margin: 16px -16px; background: var(--dr-line); }
.pc-set-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.pc-set-row > .btn { grid-column: 2; justify-self: start; margin-top: 8px !important; }
.pc-set-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--dr-ink-2); background: var(--dr-fill-2); }
.pc-set-row b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.pc-set-row p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--dr-muted); }
.btn.is-armed { color: #fff !important; background: #b91c1c !important; border-color: #b91c1c !important; }
.pc-signout {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 26px; border-radius: 12px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #ff9b9b; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.3);
    transition: background-color 0.15s ease;
}
.pc-signout:hover { background: rgba(248,113,113,0.12); }

/* the receipt: paper colours, so it prints the way it looks */
.pc-receipt-modal { position: fixed; inset: 0; z-index: 430; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(2,4,10,0.72); }
.pc-receipt {
    width: min(400px, 100%); padding: 22px 22px 18px; border-radius: 18px; color: #141821; background: #fbfaf7;
    font-family: var(--font-body, 'Inter', sans-serif); box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    animation: pcCardIn 0.24s cubic-bezier(.22,1,.36,1) both;
}
.pc-receipt:focus { outline: none; }
.pc-rc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px dashed #cdc7ba; }
.pc-rc-brand { display: inline-flex; align-items: center; gap: 6px; font: 700 16px/1 var(--font-display); color: #141821; }
.pc-rc-brand svg { color: #d69e2e; fill: rgba(214,158,46,0.25); }
.pc-rc-brand b { font: inherit; }
.pc-rc-brand b span { color: #a8711c; }
.pc-rc-k { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6b7280; }
.pc-rc-amt { padding: 18px 0 8px; text-align: center; }
.pc-rc-amt b { display: block; font: 700 36px/1.1 var(--font-display); letter-spacing: -0.02em; }
.pc-rc-amt span { font-size: 13px; color: #6b7280; }
.pc-receipt > .pc-pill { display: flex; width: max-content; margin: 2px auto 0; }
.pc-receipt .pc-pill { --pill: #a16207; }
.pc-receipt .pc-pill.s-paid { --pill: #1d4ed8; }
.pc-receipt .pc-pill.s-processing { --pill: #6d28d9; }
.pc-receipt .pc-pill.s-confirmed { --pill: #15803d; }
.pc-receipt .pc-pill.s-cancelled { --pill: #b91c1c; }
.pc-rc-dl { display: grid; gap: 9px; margin: 16px 0 0; padding: 14px 0; border-top: 1px dashed #cdc7ba; border-bottom: 1px dashed #cdc7ba; }
.pc-rc-dl > div { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.pc-rc-dl dt { color: #6b7280; }
.pc-rc-dl dd { margin: 0; text-align: right; font-weight: 600; color: #141821; overflow-wrap: anywhere; }
.pc-rc-dl code { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pc-rc-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: #4b5563; }
.pc-rc-site { margin: 10px 0 0; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: #9ca3af; }
.pc-rc-acts { display: flex; gap: 8px; margin-top: 16px; }
.pc-rc-acts .btn { flex: 1; }
.pc-receipt .btn-outline { color: #141821; border-color: #d1d5db; background: transparent; }
.pc-receipt .btn-outline:hover { border-color: #9ca3af; }
@media print {
    body.pc-print > *:not(#pcReceipt) { display: none !important; }
    body.pc-print { background: #fff !important; }
    body.pc-print::before, body.pc-print::after { display: none !important; }
    body.pc-print #pcReceipt { position: static; display: block; padding: 0; background: none; overflow: visible; }
    body.pc-print .pc-receipt { width: 100%; max-width: 440px; margin: 0 auto; box-shadow: none; animation: none; border: 1px solid #ddd; }
    body.pc-print .pc-rc-acts { display: none; }
}

/* the trainer card */
.pc-card-modal { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 16px; overflow-y: auto;
    background: rgba(2,4,10,0.66); }
.pc-card {
    --card-a: #ffc24d; --card-b: #2a1d05;
    position: relative; width: min(340px, 100%); padding: 1rem 1.1rem 1.15rem; border-radius: 22px; text-align: center; overflow: hidden;
    color: var(--text-primary); border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(90% 55% at 50% 22%, rgba(255,255,255,0.08), transparent 70%), linear-gradient(165deg, var(--card-b), #080a12 78%);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    animation: pcCardIn 0.28s cubic-bezier(.22,1,.36,1) both;
}
.pc-card.is-inline { width: min(300px, 100%); animation: none; box-shadow: 0 18px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
.pc-card:focus { outline: none; }
.pc-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--card-a); }
.pc-card.is-loading { min-height: 160px; display: grid; place-items: center; gap: 0.6rem; align-content: center; }
.pc-card-wait { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.pc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 30px; }
.pc-card-brand { font: 700 0.6rem/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pc-card-brand span { color: var(--card-a); }
.pc-card-x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-primary); }
.pc-card-art { position: relative; width: 132px; height: 132px; margin: 0.6rem auto 0.3rem; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle, var(--card-a) 0%, transparent 68%); }
.pc-card-art::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(8,10,18,0.55); }
.pc-card-art::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--card-a); opacity: 0.5; }
.pc-card-art img { position: relative; width: 120px; height: 120px; image-rendering: pixelated; object-fit: contain; }
.pc-card-shine { position: absolute; top: 10px; right: 14px; font-style: normal; font-size: 1.1rem; color: #fff6c8;
    text-shadow: 0 0 10px rgba(255,240,170,0.8); animation: pcShine 1.4s ease-in-out 2; }
.pc-card-name { margin: 0; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pc-card-title { margin: 0.25rem 0 0; font: 700 0.66rem/1.2 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-a); }
.pc-card-title[hidden], .pc-card-bio[hidden] { display: none; }
.pc-card-meta { margin: 0.35rem 0 0; font-size: 0.74rem; color: var(--text-muted); }
.pc-card-bio { margin: 0.7rem auto 0; max-width: 26ch; font-size: 0.86rem; line-height: 1.45; color: var(--text-secondary); overflow-wrap: anywhere; }
.pc-card-badges { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.85rem; }
.pc-card-badge { display: grid; justify-items: center; gap: 0.15rem; }
.pc-card-badge .pc-badge { width: 60px; height: 60px; }
.pc-card-badge span { font: 700 0.58rem/1 var(--font-display); color: var(--text-muted); letter-spacing: 0.06em; }
.pc-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.9rem; }
.pc-card-stats div { padding: 0.55rem 0.3rem; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.pc-card-stats b { display: block; font-family: var(--font-display); font-size: 1.05rem; color: #fff; font-variant-numeric: tabular-nums; }
.pc-card-stats span { display: block; margin-top: 0.2rem; font-size: 0.58rem; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-display); }
.pc-card-note { margin: 0.85rem 0 0; font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.pc-card-acts { display: flex; gap: 8px; margin-top: 0.9rem; }
.pc-card-acts .btn { flex: 1; }
/* asking an older account for its email */
.pc-ask-wrap { z-index: 425; }
.pc-ask {
    width: min(390px, 100%); display: grid; gap: 10px; padding: 22px; border-radius: 20px;
    color: #edf1f7; background: #0f131e; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6); font-family: var(--font-body, 'Inter', sans-serif);
    animation: pcCardIn 0.24s cubic-bezier(.22,1,.36,1) both;
}
.pc-ask-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #0b0d14; background: var(--accent1); }
.pc-ask h3 { margin: 4px 0 0; font: 700 19px/1.25 var(--font-display); }
.pc-ask p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #b6bfce; }
.pc-ask .input-box { margin: 4px 0 0; }
.pc-ask .ev-news { margin-top: 0; }
.pc-ask .pc-ask-msg { color: #ffaaa0; font-weight: 600; }
.pc-ask-msg:empty { display: none; }
.pc-ask-acts { display: flex; gap: 8px; margin-top: 4px; }
.pc-ask-acts .btn { flex: 1; margin: 0; }
@media (prefers-reduced-motion: reduce) { .pc-ask { animation: none; } }
@keyframes pcCardIn { from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes pcShine { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
    .pc-card, .pc-card-shine, .pc-receipt, .pc-skel i { animation: none; }
    .pc-dr-top, .pc-dr-mini, .pc-dr-tab::after { transition: none; }
}

@media (max-width: 520px) {
    .pc-drawer { width: 100vw; border-left: 0; }
    .pc-dr-head { padding: 0 16px 18px; }
    .pc-dr-banner { margin: 0 -16px; height: 104px; }
    .pc-dr-main { padding: 18px 16px 26px; }
    .pc-chat-box { margin: 14px -16px -26px; padding: 14px 16px 18px; }
    .pc-dr-tabs { padding: 0 2px; }
    .pc-dr-qs > div { padding: 9px 10px; }
    .pc-dr-qs dd { font-size: 16px; }
    .pc-titles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
    .pc-dr-pill { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .pc-dr-pill > span { display: none; }
    .pc-dr-ring { width: 88px; height: 88px; }
    .pc-dr-avatar img { width: 76px; height: 76px; }
    .pc-oc-dl { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
    #ev-layer .ev-fog, .ev-hero-cast img, .ev-face img { animation: none !important; }
    .ev-peek, .ev-cross, .ev-fw, .ev-gust, .ev-eyes, .ev-pop, .ev-leap { display: none; }
    .ev-wave, .ev-diya i { animation: none !important; }
    #ev-layer .ev-bat, #ev-layer .ev-lantern, #ev-layer .ev-leaf { display: none; }
    .ev-ghost, .ev-pile, .ev-confetti, .ev-wish, #ev-layer .ev-drift, #ev-layer .ev-glide, #ev-layer .ev-ember,
    #ev-layer .ev-rocket, #ev-layer .ev-shoot, #ev-layer .ev-coinpeek, .ev-wisp, .ev-bang { display: none; }
    .ev-diya.is-unlit i { opacity: 1; }
    .ev-jack i { animation: none !important; }
    .ev-grave-who { transition: none; }
    .pc-drawer { transition: none; }
    #ev-layer .ev-haunt, .ev-flare, .ev-jack-pop { display: none; }
    .ev-hunt { transition: none; }
    .ev-hunt.is-caught { animation: none; opacity: 0; }
    .ev-hunt-card { animation: none; }
}
html[data-fx="low"] #ev-layer .ev-fog, html[data-fx="low"] .ev-jack i { animation: none; }
html[data-fx="low"] #ev-layer .ev-bat, html[data-fx="low"] #ev-layer .ev-lantern, html[data-fx="low"] #ev-layer .ev-leaf,
html[data-fx="low"] #ev-layer .ev-haunt { display: none; }

/* ---------------------------------------------- the rest of the page
   The season carried past the hero: a trim under the header, something on
   the logo coin, the corners of the cards, checkout, the trainer pass, the
   FAQ and the footer. Static drawings; the few that move use transform or
   opacity and stop for reduced motion and on the low tier. */
.ev-trim { position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none; z-index: 2;
    background-repeat: repeat-x; background-position: 0 0; }
.ev-trim.is-summer { height: 12px; }
.ev-trim.is-anniversary { height: 22px; }
.ev-trim.is-lights { height: 20px; }
.ev-trim .ev-glow { position: absolute; inset: 0; background-repeat: repeat-x; opacity: 0;
    animation: evTwinkle 2.6s ease-in-out infinite alternate; }
.ev-trim .ev-glow.is-b { animation-delay: -1.3s; }
@keyframes evTwinkle { from { opacity: 0.05; } to { opacity: 0.95; } }
/* The cobwebs sit in the header's own top corners; below hang a string of
   pumpkin lanterns and the spider. */
.ev-trim.is-halloween { height: 20px; }
.ev-hweb { position: absolute; top: 0; pointer-events: none; z-index: 0; }
.ev-hweb svg { display: block; }
.ev-hweb.is-r { right: 0; }
.ev-hweb.is-l { left: 0; transform: scaleX(-1); }
.ev-spider { position: absolute; top: 0; left: 4.2%; width: 17px; display: flex; flex-direction: column; align-items: center;
    transform-origin: 50% 0; animation: evSpider 4.8s ease-in-out infinite alternate; }
.ev-spider i { display: block; width: 1px; height: 30px; background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.45)); }
@keyframes evSpider { from { transform: translateY(-10px); } to { transform: translateY(4px); } }
.ev-trim-leaf { position: absolute; top: -9px; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); }
.ev-trim-leaf svg { display: block; width: 100%; height: 100%; }

.ev-hat { position: absolute; pointer-events: none; display: block; z-index: 1; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.5)); }
.ev-hat svg { display: block; width: 100%; height: 100%; }
html[data-event] .header .logo { position: relative; }
.ev-hat.is-halloween   { width: 22px; height: 19px; left: -2px; top: calc(50% - 25px); transform: rotate(-14deg); }
.ev-hat.is-winter      { width: 22px; height: 19px; left: -1px; top: calc(50% - 24px); transform: rotate(-10deg); }
.ev-hat.is-summer      { width: 22px; height: 9px; left: 1px; top: calc(50% - 5px); }
.ev-hat.is-autumn      { width: 13px; height: 13px; left: 15px; top: calc(50% - 17px); transform: rotate(35deg); }
.ev-hat.is-anniversary { width: 14px; height: 17px; left: 3px; top: calc(50% - 26px); transform: rotate(-12deg); }
.ev-hat.is-lights      { width: 15px; height: 12px; left: 14px; top: calc(50% + 2px); }
.ev-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: evFlame 0.18s ease-in-out infinite alternate; }

.ev-corner, .strip-card > .ev-corner, .strip-card > .ev-snowcap { position: absolute; top: 0; right: 0; width: 46px; height: 46px; pointer-events: none; z-index: 2;
    margin: 0; padding: 0; font: inherit; letter-spacing: 0; color: inherit; }
.strip-card > .ev-snowcap { left: -1px; right: -1px; top: -1px; width: auto; height: 16px; }
.ev-corner.is-autumn > span { margin: 0; padding: 0; }
.ev-corner > svg { display: block; width: 100%; height: 100%; }
.ev-corner.is-summer { width: 30px; height: 30px; top: 8px; right: 8px; transform: rotate(18deg); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.ev-corner.is-autumn { width: 56px; height: 56px; }
.ev-corner.is-autumn > span { position: absolute; top: 5px; right: 6px; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45)); }
.ev-corner.is-autumn > span.is-2 { top: 18px; right: 26px; width: 21px; height: 21px; }
.ev-corner.is-autumn svg { display: block; width: 100%; height: 100%; }
.ev-corner.is-lights { width: 68px; height: 68px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* checkout */
.ev-co { position: absolute; right: 3.5rem; top: 0.1rem; width: 66px; height: 66px; pointer-events: none; }
.ev-co img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); }
html[data-event="halloween"] .ev-co img, html[data-event="anniversary"] .ev-co img { animation: evCoBob 3.2s ease-in-out infinite; }
@keyframes evCoBob { 50% { transform: translateY(-3px); } }
.ev-co-band { position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none; background-repeat: repeat-x; }
.ev-co-band.is-halloween { height: 52px; }
.ev-co-band .ev-trim-leaf { top: -8px; }
@media (max-width: 480px) { .ev-co { right: 3rem; width: 56px; height: 56px; } }

/* the trainer pass: this season's badge, next to the levels */
.ev-pass { display: flex; align-items: center; gap: 1.2rem; margin: 1.4rem 0 0.4rem; padding: 1rem 1.3rem;
    border-radius: 18px; border: 1px solid rgba(var(--ev-ink-rgb, 255,194,77), 0.32);
    background: linear-gradient(110deg, rgba(var(--ev-glow-rgb, 255,194,77), 0.12), rgba(255,255,255,0.02) 60%); }
.ev-pass-medal { flex: none; width: 74px; }
.ev-pass-medal .pc-badge, .ev-pass-medal svg { width: 74px; height: auto; display: block; }
.ev-pass-copy { flex: 1; min-width: 0; }
.ev-pass-k { margin: 0 0 0.2rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-ink, var(--accent1)); font-weight: 600; }
.ev-pass h3 { margin: 0 0 0.25rem; font-family: var(--font-display); font-size: 1.12rem; color: var(--text-primary); }
.ev-pass p:last-child { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); }
.ev-pass-cta { flex: none; padding: 0.7rem 1.2rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.9rem;
    color: var(--text-primary); border: 1px solid rgba(var(--ev-ink-rgb, 255,194,77), 0.45); transition: background 0.25s, border-color 0.25s; }
.ev-pass-cta:hover { background: rgba(var(--ev-ink-rgb, 255,194,77), 0.12); border-color: var(--ev-ink, var(--accent1)); }
@media (max-width: 640px) {
    .ev-pass { flex-wrap: wrap; gap: 0.9rem; padding: 1rem; }
    .ev-pass-medal { width: 58px; } .ev-pass-medal .pc-badge, .ev-pass-medal svg { width: 58px; }
    .ev-pass-copy { flex-basis: calc(100% - 74px); }
    .ev-pass-cta { width: 100%; text-align: center; }
}
.ev-faq .faq-question { color: var(--ev-ink, var(--accent1)); }

/* the order screen */
.ev-success { display: flex; align-items: center; gap: 0.8rem; text-align: left; margin-bottom: 0.8rem; padding: 0.7rem 0.85rem;
    border-radius: 10px; border: 1px solid rgba(var(--ev-ink-rgb, 255,194,77), 0.3);
    background: linear-gradient(110deg, rgba(var(--ev-glow-rgb, 255,194,77), 0.12), rgba(255,255,255,0.02) 70%); }
.ev-success-medal .pc-badge { width: 40px; }
.ev-success p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); }
.ev-success b { color: var(--text-primary); }

/* the footer: a strip of ground along its top edge */
html[data-event] .footer-section { position: relative; }
.ev-foot { position: absolute; left: 0; right: 0; bottom: 100%; height: 56px; pointer-events: none; overflow: hidden; }
.ev-foot svg { display: block; width: 100%; height: 100%; }
.ev-foot.is-lights { height: 44px; }
.ev-foot.is-lights .ev-diya { bottom: 4px; }

@media (max-width: 560px) {
    .ev-hweb svg { width: 40px; height: 40px; }
    .ev-spider { display: none; }
    .ev-foot { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .ev-trim .ev-glow, .ev-spider, .ev-flame, .ev-co img { animation: none !important; }
    .ev-trim .ev-glow { opacity: 0.6; }
}
html[data-fx="low"] .ev-trim .ev-glow, html[data-fx="low"] .ev-spider, html[data-fx="low"] .ev-flame,
html[data-fx="low"] .ev-co img, html[data-fx="low"] .ev-foot .ev-diya i { animation: none; }
html[data-fx="low"] .ev-trim .ev-glow { opacity: 0.6; }