/* The sticker look, shared by /guides/, /vaporeon/ and the blog.

   Pink wisteria banner up top, then everything is a pastel "sticker": a thick white edge, a little
   tilt, and tiny hearts printed tone on tone. Pink and lilac take turns. The Mystery Gift page is the
   original and still carries its own copy of these rules inline.

   Pictures inside tilted stickers are turned back against the tilt so they're drawn perfectly
   straight; a tilted picture gets resampled and looks blurry, which matters for her sticker art.

   Works on top of either base stylesheet (styles.css or guide.css + chrome.css). */

:root {
  --stk-pink: #f6a5dc;
  --stk-lilac: #c9b6ff;
  --stk-soft: #e6ddff;
  --stk-blush: #ffd3ee;
  --stk-plum: #2b1d4a;
  --stk-plum-soft: rgba(43, 29, 74, .78);
  --stk-ground: #0a0717;
  --stk-note: #1a1024;
  --stk-print: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path fill='%23000' fill-opacity='.06' d='M11 17s-6-3.7-7.7-7.3C2.1 7.2 3.5 4 6.4 4c1.7 0 2.7 1 3.3 1.9L11 7.5l1.3-1.6C12.9 5 13.9 4 15.6 4c3 0 4.3 3.2 3.1 5.7C17 13.3 11 17 11 17z'/><path fill='%23fff' fill-opacity='.2' d='M33 39s-6-3.7-7.7-7.3c-1.2-2.5.2-5.7 3.1-5.7 1.7 0 2.7 1 3.3 1.9l1.3 1.6 1.3-1.6c.6-.9 1.6-1.9 3.3-1.9 2.9 0 4.3 3.2 3.1 5.7C39 35.3 33 39 33 39z'/></svg>") 0 0 / 44px 44px;
  --stk-print-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path fill='%23f6a5dc' fill-opacity='.09' d='M11 17s-6-3.7-7.7-7.3C2.1 7.2 3.5 4 6.4 4c1.7 0 2.7 1 3.3 1.9L11 7.5l1.3-1.6C12.9 5 13.9 4 15.6 4c3 0 4.3 3.2 3.1 5.7C17 13.3 11 17 11 17z'/><path fill='%23c9b6ff' fill-opacity='.07' d='M33 39s-6-3.7-7.7-7.3c-1.2-2.5.2-5.7 3.1-5.7 1.7 0 2.7 1 3.3 1.9l1.3 1.6 1.3-1.6c.6-.9 1.6-1.9 3.3-1.9 2.9 0 4.3 3.2 3.1 5.7C39 35.3 33 39 33 39z'/></svg>") 0 0 / 44px 44px;
  --stk-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M12 21s-7.6-4.6-9.7-9.1C.8 8.7 2.6 4.8 6.4 4.8c2.1 0 3.5 1.2 4.2 2.4L12 9.1l1.4-1.9c.7-1.2 2.1-2.4 4.2-2.4 3.8 0 5.6 3.9 4.1 7.1C19.6 16.4 12 21 12 21z'/></svg>");
}

/* No dot grid, no purple wash: the banner carries the atmosphere. */
body::before, body::after { display: none; }
body { background: var(--stk-ground); }

/* ------------------------------------------------------------------ banner */
.lg-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 470px; padding: 96px 0 56px; }
.lg-banner::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("assets/images/wisteria-pink-hero.webp") center 22% / cover no-repeat; }
.lg-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(20,9,30,.86) 0%, rgba(20,9,30,.62) 42%, rgba(20,9,30,.22) 78%, rgba(20,9,30,.1) 100%),
  linear-gradient(180deg, rgba(10,7,23,0) 0%, rgba(10,7,23,.18) 55%, var(--stk-ground) 100%); }
.lg-banner-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.lg-copy { max-width: 640px; min-width: 0; }
.lg-eyebrow { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; font-size: .72rem;
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #3a1b4a; background: var(--stk-blush); }
.lg-banner h1 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-style: normal; color: #fff;
  font-size: clamp(3rem, 7vw, 5.6rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance;
  text-shadow: 0 4px 30px rgba(20,9,30,.55); }
.lg-banner h1 em { color: #ffb8e1; text-shadow: 0 0 28px rgba(255,150,210,.55); }
.lg-copy p { margin: 18px 0 0; max-width: 46ch; color: #f6eef9; font-size: 1.08rem; line-height: 1.6;
  text-shadow: 0 2px 14px rgba(20,9,30,.7); }
.lg-copy p strong { color: #fff; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.lg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 5px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; color: var(--stk-plum); background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.lg-chip img { width: 24px; height: 24px; object-fit: contain; }
.lg-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 13px 22px; border-radius: 999px;
  font-weight: 800; color: var(--stk-plum); background: var(--stk-pink); border: 3px solid #fff; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); transition: transform .18s ease; }
.lg-btn:hover { transform: translateY(-2px); }

/* Text sticker (guides) or a Pokemon sticker (raid pages) on the right of the banner. */
.lg-sticker { flex: none; display: flex; flex-direction: column; max-width: 300px; padding: 16px 24px 18px;
  border-radius: 20px; border: 3px solid #fff; color: var(--stk-plum); transform: rotate(-3deg);
  background: var(--stk-pink) var(--stk-print); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.lg-sticker:empty { display: none; }
.st-top { font-size: .74rem; font-weight: 800; letter-spacing: .04em; }
.st-big { margin-top: 6px; font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 2.2rem; line-height: 1; white-space: nowrap; }
.st-sub { margin-top: 6px; font-size: .9rem; font-weight: 700; opacity: .8; }
.lg-mon { flex: none; width: 250px; margin-bottom: -8px; }
.lg-mon img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); }

/* -------------------------------------------- big link stickers (guides, blog) */
.gs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 56px 28px;
  padding: 64px 6px 6px; }
.gs { --c: var(--stk-pink); --plum: var(--stk-plum); --tilt: -1.4deg;
  position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 22px 24px 18px;
  border-radius: 22px; border: 4px solid #fff; color: var(--plum); text-decoration: none;
  background: var(--c) var(--stk-print); box-shadow: 0 16px 34px rgba(0,0,0,.45); transform: rotate(var(--tilt));
  transition: transform .22s cubic-bezier(.2,.9,.3,1.3), box-shadow .22s ease; }
.gs.purple { --c: var(--stk-lilac); }
.gs-list .gs:nth-child(even) { --tilt: 1.2deg; }
.gs:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.gs:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.gs-art { position: absolute; top: -58px; right: 14px; width: 170px; height: 170px; pointer-events: none;
  transform: rotate(calc(var(--tilt) * -1)); transition: transform .22s cubic-bezier(.2,.9,.3,1.3); }
.gs:hover .gs-art { transform: none; }
.gs-art.vap { width: 177px; height: 190px; top: -80px; }
.gs-art.sq { width: 190px; height: 190px; top: -84px; right: 8px; }
.gs-art img { position: absolute; filter: drop-shadow(0 10px 14px rgba(43,29,74,.4)); transition: transform .3s cubic-bezier(.2,.9,.3,1.4); }
.gs-art .main { inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gs:hover .gs-art .main { transform: translateY(-6px); }
.gs-head { padding-right: 150px; }
.gs-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.gs-kind { font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.gs-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .62rem;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--plum); }
.gs-badge::before, .gs-go .hint::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--stk-heart) center / contain no-repeat; }
.gs-title { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-style: italic;
  font-size: 2.2rem; line-height: 1.05; color: var(--plum); }
.gs-detail { margin: 8px 0 0; text-wrap: pretty; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--stk-plum-soft); }
.gs-date { margin: 10px 0 0; font-size: .74rem; font-weight: 800; letter-spacing: .06em; color: var(--stk-plum-soft); }
.gs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 18px; }
.gs-chips > span:first-child { margin-right: 2px; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.gs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px;
  font-size: .8rem; font-weight: 800; background: rgba(255,255,255,.6); }
.gs-chip img { width: 26px; height: 26px; object-fit: contain; }
.gs-go { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; margin-top: auto;
  padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 4px 12px rgba(43,29,74,.15); }
.gs-go .hint { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--plum);
  transition: transform .18s ease; }
.gs:hover .gs-go .hint { transform: translateX(3px); }

/* --------------------------------------------- closing banner: big pink sticker */
.gift-cta { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin: 72px 0 12px; padding: 30px 34px; border-radius: 26px; border: 4px solid #fff; color: var(--stk-plum);
  background: var(--stk-pink) var(--stk-print); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.gift-cta p { margin: 0; color: var(--stk-plum); }
.gift-cta .cta-title { display: block; font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-size: 2rem; line-height: 1.1; }
.gift-cta .cta-sub { display: block; margin-top: 6px; font-size: 1rem; font-weight: 600; color: var(--stk-plum-soft); }
.gift-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-weight: 800;
  color: #fff; background: var(--stk-plum); text-decoration: none; box-shadow: 0 8px 20px rgba(43,29,74,.35); transition: transform .18s ease; }
.gift-cta a:hover { transform: translateY(-2px); }
.gift-cta a svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------- raid pages: the guide.css pieces as stickers */
.persistent-content .section { padding: 36px 0; }
.persistent-content .section:first-child { padding-top: 40px; }
.persistent-content .section-head { margin-bottom: 26px; }
.persistent-content .kicker { padding: 5px 12px; border-radius: 999px; font-size: .68rem; letter-spacing: .16em;
  color: #3a1b4a; background: var(--stk-blush); }
.persistent-content .section h2 { color: #fff; }
.persistent-content .section-copy { color: #ddd0ea; }
.persistent-content .section-copy strong { color: #fff; }
.persistent-content .section-copy + .section-copy { margin-top: 12px; }

/* Every panel becomes a sticker. --c is its colour, --tilt its lean. */
.persistent-content .pokemon-card, .persistent-content .step, .persistent-content .reward-box, .persistent-content .details-card {
  --c: var(--stk-pink); --tilt: -1deg;
  border: 4px solid #fff; border-radius: 22px; color: var(--stk-plum);
  background: var(--c) var(--stk-print); box-shadow: 0 14px 30px rgba(0,0,0,.42); transform: rotate(var(--tilt)); }
.persistent-content .pair-grid { gap: 26px; }
.persistent-content .timeline, .persistent-content .reward-grid { gap: 20px; }
.persistent-content .pokemon-card:nth-child(even), .persistent-content .step:nth-child(even),
.persistent-content .reward-box:nth-child(even) { --c: var(--stk-lilac); --tilt: 1deg; }
.persistent-content .step:nth-child(3n) { --c: var(--stk-soft); }

.persistent-content .pokemon-card { --tilt: -.6deg; overflow: visible; }
.persistent-content .pokemon-card:nth-child(even) { --tilt: .6deg; }
.persistent-content .pokemon-image { background: none; }
.persistent-content .pokemon-image img, .persistent-content .reward-box img {
  transform: rotate(calc(var(--tilt) * -1)); filter: drop-shadow(0 8px 12px rgba(43,29,74,.3)); }
/* Wide art (Iron Hands) gets extra width so it fills about as much space as a tall one (Umbreon). */
.persistent-content .pokemon-image img.wide { width: 156px; height: auto; max-width: none; max-height: none; margin-inline: -14px; }
@media (max-width: 720px) { .persistent-content .pokemon-image img.wide { width: 108px; margin-inline: -10px; } }
@media (max-width: 470px) { .persistent-content .pokemon-image img.wide { width: 200px; margin-inline: 0; } }
.persistent-content .role { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .62rem;
  letter-spacing: .14em; color: #fff; background: var(--stk-plum); }
.persistent-content .pokemon-info h3 { font-style: italic; color: var(--stk-plum); }
.persistent-content .buildline { color: var(--stk-plum-soft); font-weight: 600; }
.persistent-content .buildline strong { color: var(--stk-plum); }
.persistent-content .move { border: 0; border-radius: 14px; background: rgba(255,255,255,.7); }
.persistent-content .move strong { color: var(--stk-plum); }
.persistent-content .move span { color: var(--stk-plum-soft); font-weight: 700; }
.persistent-content .move.core { background: var(--stk-plum); }
.persistent-content .move.core strong { color: #fff; }
.persistent-content .move.core span { color: var(--stk-blush); }

.persistent-content .step-num { background: var(--stk-plum); color: #fff; }
.persistent-content .step h3 { color: var(--stk-plum); font-size: 1.05rem; }
.persistent-content .step p { color: var(--stk-plum-soft); font-weight: 600; }
.persistent-content .step strong { color: var(--stk-plum); }

/* Text-heavy stickers stay straight. Next to the live player the browser flattens each card into a
   picture and turns the picture, which blurs the text; small reward stickers keep their tilt. */
.persistent-content .pokemon-card, .persistent-content .pokemon-card:nth-child(even),
.persistent-content .step, .persistent-content .step:nth-child(even),
.persistent-content .details-card { --tilt: 0deg; transform: none; }

/* The one warning reads as a note pinned under the turns, not another sticker. */
.persistent-content .warning { margin-top: 26px; padding: 16px 20px; border-radius: 18px; background: var(--stk-note);
  border: 2px dashed rgba(246,165,220,.5); }
.persistent-content .warning strong { color: var(--stk-blush); }

.persistent-content .reward-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px; }
.persistent-content .reward-box { padding: 16px 8px 14px; }
.persistent-content .timeline .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
.persistent-content .reward-box img { display: block; width: 56px; height: 56px; object-fit: contain; margin: 0 auto 8px;
  border-radius: 0; box-shadow: none; }
.persistent-content .reward-box strong { color: var(--stk-plum); }
.persistent-content .reward-box strong { font-size: 1.7rem; }
.persistent-content .reward-box span { color: var(--stk-plum-soft); font-weight: 700; font-size: .74rem; }

.persistent-content .details-card { --c: var(--stk-soft); --tilt: -.4deg; padding: 4px 24px; }
.persistent-content .details-card details { border-bottom: 1px solid rgba(43,29,74,.14); }
.persistent-content .details-card summary { color: var(--stk-plum); }
.persistent-content .details-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.persistent-content .details-card summary::after { float: none; flex: none; line-height: 1; color: var(--stk-plum); }
.persistent-content .details-body { color: var(--stk-plum-soft); font-weight: 600; }
.persistent-content .details-body strong { color: var(--stk-plum); }
.persistent-content .details-body .attacker-why { margin: 12px 0 0; }
.persistent-content .attacker-summary img { background: rgba(255,255,255,.6); transform: rotate(calc(var(--tilt) * -1)); }
/* Her sticker art already has a white edge, so it goes without the grey bubble (and without the bob,
   which softens it). */
.persistent-content .attacker-summary img.stk { padding: 0; background: none; border-radius: 0; }
.persistent-content .attacker-summary img.stk.wide { width: 80px; height: auto; margin-inline: -6px; }
.persistent-content .attacker-summary img.stk.tall { width: 68px; height: 80px; object-fit: contain; margin-block: -6px; }
@media (max-width: 620px) { .persistent-content .attacker-summary img.stk.tall { width: 58px; height: 68px; margin-block: -5px; } }
@media (max-width: 620px) { .persistent-content .attacker-summary img.stk.wide { width: 68px; margin-inline: -5px; } }
.persistent-content .attacker-summary span { color: var(--stk-plum); font-style: italic; }

/* The live player on the side gets a white sticker edge too. */
.stream-rail { margin-top: 40px; }
.stream-rail .live-card { border: 4px solid #fff; border-radius: 22px; background: var(--stk-note); }
.stream-rail .live-head { border-bottom-color: rgba(255,255,255,.12); }
.stream-rail .live-head a { color: var(--stk-blush); }

/* ------------------------------------------- FAQ and Privacy: Q&A stickers */
/* Kept straight: these are the most text-heavy stickers on the site. */
.qa { padding: 12px 0 18px; }
.qa-head { margin: 34px 0 16px; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; font-style: normal;
  color: #fff; background: none; -webkit-text-fill-color: currentColor; }
.qa-card, .qa > .qa-body { --c: var(--stk-pink); position: relative; border: 4px solid #fff; border-radius: 22px;
  color: var(--stk-plum); background: var(--c) var(--stk-print); box-shadow: 0 14px 30px rgba(0,0,0,.42); }
.qa:nth-of-type(3n+2) .qa-card { --c: var(--stk-lilac); }
.qa:nth-of-type(3n) .qa-card { --c: var(--stk-soft); }
.qa > .qa-body { padding: 20px 24px; }
.qa > .qa-body:nth-of-type(3n+2) { --c: var(--stk-lilac); }
.qa > .qa-body:nth-of-type(3n) { --c: var(--stk-soft); }
.qa-card { padding: 4px 22px; }
.qa-card details { margin: 0; border: 0; border-radius: 0; background: none; overflow: visible;
  border-bottom: 1px solid rgba(43,29,74,.14); }
.qa-card details:last-child { border-bottom: 0; }
.qa-card summary { padding: 18px 40px 18px 0; color: var(--stk-plum); font-weight: 800; }
.qa-card summary:hover { color: var(--stk-plum); }
.qa-card summary::after { right: 2px; color: var(--stk-plum); }
.qa-card .qa-body { padding: 0 0 18px; }
.qa-card .qa-body, .qa > .qa-body { color: var(--stk-plum-soft); font-weight: 600; }
.qa-card .qa-body strong, .qa > .qa-body strong, .qa > .qa-body em { color: var(--stk-plum); }
.qa-card .qa-body a, .qa > .qa-body a { color: var(--stk-plum); font-weight: 800; text-decoration: underline;
  text-decoration-color: rgba(43,29,74,.35); text-underline-offset: 3px; }
.qa-card .qa-body a:hover, .qa > .qa-body a:hover { text-decoration-color: var(--stk-plum); }
.qa-card .qa-body p, .qa > .qa-body p, .qa > .qa-body ul { max-width: 72ch; }
.qa-card .qa-body code { display: inline-block; white-space: nowrap; padding: 1px 9px; line-height: 1.6;
  border-radius: 999px; background: #fff; color: var(--stk-plum); font-weight: 800; }

/* ------------------------------------------------------------------ home page */
.home-banner .lg-copy { max-width: 740px; }
.home-banner h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); }
.lg-copy p a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,184,225,.7);
  text-underline-offset: 3px; }
.lg-copy p code { padding: 1px 9px; border-radius: 999px; white-space: nowrap; font-size: .92em; font-weight: 800;
  color: var(--stk-plum); background: #fff; text-shadow: none; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.lg-btn svg { width: 17px; height: 17px; fill: currentColor; }
.lg-btn-white { background: #fff; border-color: #fff; }

/* The example command on a sticker, copyable like every code on the site. */
.home-try { gap: 10px; max-width: none; align-self: center; }
.home-try .st-sub { margin-top: 0; text-align: center; }
.try-copy { container-type: normal; width: auto; margin: 0; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 48px; padding: 5px 5px 5px 16px; border: 0; border-radius: 999px; background: #fff; color: var(--stk-plum);
  font: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(43,29,74,.15); }
.try-copy code { flex: none; min-width: auto; overflow: visible; padding: 0; background: none; color: var(--stk-plum);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 1rem; font-weight: 800; white-space: nowrap; }
.try-copy .hint { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--stk-plum); }
.try-copy .hint::before { content: ""; width: 10px; height: 10px; background: var(--stk-heart) center / contain no-repeat; }
.try-copy.copied .hint { background: #fff; color: var(--stk-plum); box-shadow: inset 0 0 0 2px var(--stk-plum); }
.try-copy.copied .hint::before { display: none; }
.try-copy:focus-visible { outline: 3px solid var(--stk-plum); outline-offset: 3px; }

.home-sec { padding: 56px 0 6px; }
.home-sec:first-child { padding-top: 48px; }
.home-h2 { margin: 6px 0 22px; font-family: "DM Serif Display", Georgia, serif; font-weight: 400; color: #fff;
  font-size: clamp(2.2rem, 4.6vw, 3.2rem); line-height: 1.08; }
.home-copy { margin: -10px 0 0; color: #ddd0ea; }
.home-sec .gs-list { padding-top: 100px; }

/* How it works: numbered stickers, because it really is a sequence. */
.home-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 26px;
  margin: 0; padding: 8px 4px 0; list-style: none; }
.home-step { --c: var(--stk-pink); --tilt: -1deg; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 24px;
  border: 4px solid #fff; border-radius: 22px; color: var(--stk-plum); background: var(--c) var(--stk-print);
  box-shadow: 0 14px 30px rgba(0,0,0,.42); transform: rotate(var(--tilt)); }
.home-step:nth-child(2) { --c: var(--stk-lilac); --tilt: .9deg; }
.home-step:nth-child(3) { --c: var(--stk-soft); --tilt: -.7deg; }
.home-num { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 6px; border-radius: 50%;
  font-family: "DM Serif Display", Georgia, serif; font-size: 1.3rem; color: #fff; background: var(--stk-plum); }
.home-step h3 { margin: 0; font-family: "DM Serif Display", Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 1.6rem; line-height: 1.1; color: var(--stk-plum); }
.home-step p { margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.55; color: var(--stk-plum-soft); }
.home-step a { color: var(--stk-plum); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(43,29,74,.35);
  text-underline-offset: 3px; }

/* The live player in a white sticker frame. */
.home-live { overflow: hidden; border: 4px solid #fff; border-radius: 24px; background: var(--stk-note);
  box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.home-live .live-head { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.12); font-weight: 700; color: #fff; }
.home-live .live-head a { color: var(--stk-blush); font-weight: 800; }

/* Support: the big pink sticker banner, Ko-fi in plum and Subscribe in white. */
.home-support { margin-top: 80px; }
.home-support .cta-sub { max-width: 62ch; line-height: 1.55; }
.home-support-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.gift-cta .home-support-actions a.white { color: var(--stk-plum); background: #fff; }

/* ------------------------------------------------------------------ request page */
.req-banner .lg-copy p.req-note { margin-top: 10px; font-size: .95rem; color: #ead9f2; }
.req-adv { max-width: none; align-self: center; text-decoration: none; transition: transform .2s cubic-bezier(.2,.9,.3,1.3); }
.req-adv .st-big { font-size: 1.75rem; white-space: nowrap; }
.req-banner .lg-copy { max-width: 740px; }
.req-banner h1 { font-size: clamp(2.6rem, 5.4vw, 4.5rem); }
.req-adv:hover { transform: rotate(0deg) translateY(-3px); }
.req-adv:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.req-page .searchbar { padding: 34px 0 6px; }
.req-page .search-field .icon { left: 20px; width: 20px; height: 20px; color: var(--stk-plum); opacity: .75; }
.req-page .search-field .icon svg { display: block; width: 100%; height: 100%; }
.req-page #q { min-height: 62px; padding-left: 54px; border: 4px solid #fff; border-radius: 999px; background: #fff;
  color: var(--stk-plum); font-weight: 600; box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.req-page #q::placeholder { color: rgba(43,29,74,.5); }
.req-page #q:focus { border-color: var(--stk-pink); box-shadow: 0 0 0 5px rgba(246,165,220,.3), 0 14px 30px rgba(0,0,0,.4); }
.req-page .clear-q { right: 14px; background: rgba(43,29,74,.08); color: var(--stk-plum); }
.req-page .clear-q:hover { background: rgba(43,29,74,.16); color: var(--stk-plum); }

.req-page .filters { margin-top: 16px; gap: 10px; }
.req-page .filter-group > .label { color: var(--stk-blush); }
.req-page .chip { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: #f1e9f7; font-weight: 700; }
.req-page .chip:hover { background: rgba(255,255,255,.12); }
.req-page .chip[aria-pressed="true"] { background: var(--stk-pink); border-color: #fff; color: var(--stk-plum); font-weight: 800;
  box-shadow: 0 4px 12px rgba(246,165,220,.3); }
.req-page .divider { background: rgba(255,255,255,.16); }
.req-page .result-line { padding: 16px 2px 8px; color: #ddd0ea; }
.req-page .result-line strong { color: #fff; }

/* The cards: night stickers. Dark plum so every sprite pops (pastel cards washed out the pale ones),
   with a thin soft edge (a thick white one was too loud across hundreds of cards), tone-on-tone hearts
   and pink/lilac names. Kept straight so sprites stay sharp. */
.req-page .grid { gap: 20px; padding: 10px 2px 24px; }
.req-page .card { --name: #ffb8e1; gap: 12px; padding: 16px 16px 14px; border: 2px solid rgba(255,255,255,.3); border-radius: 22px;
  color: #fff; background: #20142f var(--stk-print-night); box-shadow: 0 12px 26px rgba(0,0,0,.4);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.3), box-shadow .2s ease; }
.req-page .card:nth-child(even) { --name: #d6c8ff; }
.req-page .card:hover { border-color: rgba(255,255,255,.55); transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0,0,0,.48); }
.req-page .card-name { font-style: italic; color: var(--name); }
/* Italic letters lean past their box, so give the name room at the end and size long names for italic widths. */
.req-page .card-head .card-name { padding-right: .18em;
  font-size: min(1.45rem, calc((100cqi - 112px) / (var(--len, 10) * .6))); }
.req-page .card-name .form { color: #e6dcf2; }
.req-page .card-sprite img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.req-page .tag { border: 0; padding: 4px 10px; font-weight: 800; color: var(--stk-plum); background: rgba(255,255,255,.7); }
/* Stars keep the original soft yellow pill. */
.req-page .tag.star { color: #fff1b5; border: 1px solid rgba(255,241,181,.28); background: rgba(255,241,181,.07); }
.req-page .tag.map { color: #fff; background: rgba(255,255,255,.14); }
.req-page .tag.ver { display: inline-flex; align-items: center; gap: 5px; color: var(--stk-plum); background: #fff; }
.req-page .tag.ver::before { content: ""; width: 9px; height: 9px; background: var(--stk-heart) center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(1800%) hue-rotate(235deg); }
.req-page .copy { position: relative; overflow: visible; justify-content: space-between; gap: 10px; min-height: 50px;
  padding: 5px 5px 5px 16px; border: 2px solid rgba(255,255,255,.28); border-radius: 999px; background: #120a1d;
  color: #fff; box-shadow: none; }
.req-page .copy:hover { background: #170d25; border-color: rgba(255,255,255,.5); }
.req-page .copy code { color: #fff; font-weight: 800; text-align: left;
  font-size: min(1.02rem, calc((100cqi - 104px) / (var(--len, 24) * .6))); }
.req-page .copy .hint { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  opacity: 1; font-size: .7rem; letter-spacing: .12em; color: var(--stk-plum); background: var(--name, var(--stk-pink)); }
.req-page .copy .hint::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--stk-heart) center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(13%) sepia(30%) saturate(1800%) hue-rotate(235deg); }
.req-page .copy.copied { background: #120a1d; border-color: var(--name, var(--stk-pink)); }
.req-page .copy.copied .hint { color: var(--stk-plum); background: #fff; box-shadow: none; }
.req-page .copy.copied .hint::before { display: none; }
.req-page .empty { color: #ddd0ea; }
.req-page .empty h3 { color: #fff; }

/* How it works: the dashed note card from the Gift Codes page. */
.req-page .note { margin: 26px 0 0; padding: 20px 22px; border-radius: 18px; border: 2px dashed rgba(246,165,220,.45);
  background: var(--stk-note); color: #e2d6ee; font-size: .92rem; line-height: 1.65; }
.req-page .note strong { color: #fff; }
.req-page .note code { padding: 1px 9px; border-radius: 999px; white-space: nowrap; font-weight: 800; color: var(--stk-plum); background: #fff; }

/* ------------------------------------------------------------------ advanced search */
/* Uses every .req-page rule (chips, night cards, copy pills, note) plus the form below. */
/* The search form: plain plum with the same thin soft edge as the result cards (hearts made it too busy). */
.adv-page .adv { margin: 34px 0 8px; padding: 26px 26px 24px; gap: 22px; border: 2px solid rgba(255,255,255,.3); border-radius: 26px;
  background: linear-gradient(160deg, #2a1b3e, #1b1129); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.adv-page .adv-label { color: var(--stk-blush); }
.adv-page .adv input, .adv-page .adv select { min-height: 48px; border: 2px solid rgba(255,255,255,.28); border-radius: 12px;
  background: #2c1e44; color: #fff; font-weight: 600; color-scheme: dark; }
.adv-page .adv select option { background: #20142f; color: #fff; }
.adv-page .adv input::placeholder { color: rgba(255,255,255,.45); }
.adv-page .adv input:focus, .adv-page .adv select:focus { border-color: var(--stk-pink); box-shadow: 0 0 0 4px rgba(246,165,220,.35); }
.adv-page .adv select { padding-right: 34px; cursor: pointer; }
/* A locked box looks like the others; only its text is softer, and it says why it's locked. */
.adv-page .adv select:disabled { opacity: 1; color: rgba(255,255,255,.6); cursor: not-allowed; }
.adv-page .adv select.locked { color: var(--stk-blush); border-color: rgba(246,165,220,.6); background: #2c1e44; }
.adv-page #fPokemon { min-height: 54px; padding-left: 16px; font-size: 1.02rem; }
.adv-page .combo-menu { background: #20142f; border: 2px solid rgba(255,255,255,.35); border-radius: 12px; color: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); scrollbar-color: rgba(246,165,220,.45) transparent; }
.adv-page .combo-menu li { border-radius: 8px; font-weight: 600; }
.adv-page .combo-menu li:hover, .adv-page .combo-menu li.active { background: rgba(246,165,220,.2); color: #fff; }
.adv-page .combo-menu .combo-empty, .adv-page .combo-menu .combo-empty:hover { color: #cdbfdc; background: none; }
/* 6IV sits in the IVs label but is a normal chip, so it lights up pink like Tiny/Jumbo. */
.adv-page .adv-label .iv-chip { min-height: 30px; padding: 0 12px; font-size: .74rem; letter-spacing: .04em; text-transform: none; }
.adv-page .linkish { padding: 3px 10px; border-radius: 999px; color: var(--stk-plum); background: var(--stk-blush); }
.adv-page .linkish:hover { text-decoration: none; background: #fff; }
.adv-page .ivrow > span:first-child { color: var(--stk-blush); }
.adv-page .ivrow input { min-height: 42px; }
.adv-page .ivdash { color: #cdbfdc; }
.adv-page .adv-actions { gap: 12px; padding-top: 4px; }
.adv-page .adv-actions .btn { min-height: 50px; padding: 0 24px; border-radius: 12px; font-weight: 800; }
.adv-page .adv-actions .btn-primary { border: 3px solid #fff; background: var(--stk-pink); color: var(--stk-plum);
  box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.adv-page .adv-actions .btn-primary:hover { background: var(--stk-pink); filter: brightness(1.04); }
.adv-page .adv-actions .btn:not(.btn-primary) { border: 2px solid rgba(255,255,255,.7); background: transparent; color: #fff; }
.adv-page .adv-actions .btn:not(.btn-primary):hover { background: rgba(255,255,255,.1); }
.adv-page .search-progress { border: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.08); }
.adv-page .search-progress-fill { background: linear-gradient(90deg, #f6a5dc, #c9b6ff, #f6a5dc); background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(246,165,220,.6); }
.adv-page .adv-more .btn { min-height: 48px; padding: 0 26px; border: 3px solid #fff; border-radius: 999px;
  background: #fff; color: var(--stk-plum); font-weight: 800; }

/* Result cards: night stickers like the request list, with the raid's details laid out on them. */
.adv-page .tag.tera { color: #e6dcff; background: rgba(201,182,255,.16); }
/* Result cards carry a lot of detail, so they drop the heart print and keep it calm: plain plum, white edge. */
.adv-page .card { background: linear-gradient(160deg, #2a1b3e, #1b1129); }
.adv-page .tag.ver { color: #fff; background: rgba(255,255,255,.12); }
.adv-page .tag.ver::before { filter: none; }
.adv-page .traits dt { color: #cdbfdc; }
.adv-page .traits dd { color: #fff; }
/* IVs: every box the same quiet tile; only a perfect 31's number lights up, in the original gold. */
.adv-page .iv { border: 1px solid rgba(255,255,255,.12); color: #fff; background: rgba(255,255,255,.05); }
.adv-page .iv b { color: #a99bbd; }
.adv-page .iv.max { color: #fff1b5; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.adv-page .iv.zero { color: #9fddff; }

/* ------------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .adv-page .adv { padding: 18px 16px; }
  .lg-banner { min-height: 0; padding: 64px 0 40px; }
  .lg-banner-in { flex-direction: column; align-items: flex-start; gap: 26px; }
  .lg-sticker { transform: rotate(-2deg); }
  .lg-mon { width: 170px; align-self: center; margin-bottom: 0; }
  .req-adv { align-self: stretch; max-width: none; transform: rotate(-1.5deg); }
  .home-try { align-self: stretch; min-width: 0; transform: rotate(-1.5deg); }
  .home-step { --tilt: 0deg; }
  .gift-cta { padding: 24px 22px; transform: none; } .gift-cta .cta-title { font-size: 1.6rem; }
}
@media (max-width: 520px) {
  .gs-list { padding: 56px 2px 6px; gap: 64px; }
  .gs { --tilt: -.8deg; } .gs-list .gs:nth-child(even) { --tilt: .8deg; }
  .gs-art { width: 120px; height: 120px; top: -50px; right: 6px; }
  .gs-art.vap { width: 112px; height: 120px; top: -56px; }
  .gs-art.sq { width: 120px; height: 120px; top: -58px; right: 4px; }
  .gs-head { padding-right: 104px; }
  .gs-title { font-size: 1.8rem; }
  .persistent-content .reward-box { --tilt: -.5deg; }
  .persistent-content .reward-box:nth-child(even) { --tilt: .5deg; }
}
@media (max-width: 380px) {
  .req-page .copy .hint { display: none; }
  .req-page .copy code { font-size: min(1.02rem, calc((100cqi - 24px) / (var(--len, 24) * .6))); }
  .try-copy { padding-left: 12px; gap: 6px; }
  .try-copy code { font-size: .84rem; }
  .try-copy .hint { padding: 7px 10px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .gs, .gs:hover, .gs-art, .gs:hover .gs-art img { transform: none; }
}