/* PokeWorld · the game's website (built by tools/build_site.mjs).
   The REBIRTH teaser's language in daylight: the world itself as the imagery,
   big Hebrew type (Rubik, body in Heebo) in dusk ink on white and morning mist,
   and one hot colour — the sunset — kept for the button that takes you in. */
:root {
  --ink: #1d1838;        /* text: the teaser's dusk, now as ink */
  --muted: #5f5a82;      /* quiet text */
  --ash: #77729a;        /* the quietest text: labels, notes */
  --paper: #ffffff;
  --mist: #f4f1ff;       /* bands and cards: morning mist */
  --mist-2: #e9e4ff;
  --lava: #ff6a3d;
  --peach: #ffc9a3;
  --rose: #d9467a;
  --ember: #c4451f;      /* the sunset as small text on white (kickers, links) */
  --link: #c4451f;
  --sea: #1fa89e;
  --line: rgba(29, 24, 56, .1);
  --sunset: linear-gradient(100deg, var(--peach) 0%, var(--lava) 52%, var(--rose) 100%);
  --lift: 0 24px 60px rgba(45, 30, 110, .14);
  --pad: clamp(18px, 4vw, 96px);   /* the only margin: the site fills the screen */
  --heb: 'Rubik', 'Heebo', Arial, sans-serif;
  --lat: 'Rubik', Arial, sans-serif;
  --r: 28px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Heebo', system-ui, sans-serif; font-size: 18px; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
p, ul, ol, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--peach); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sea); outline-offset: 3px; border-radius: 6px; }
.wrap { width: calc(100% - var(--pad) * 2); margin-inline: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--lat); font-weight: 800; direction: ltr; unicode-bidi: isolate; }
.ic { width: 1.2em; height: 1.2em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -100px; inset-inline-start: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 17px/1 'Heebo', sans-serif; color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 16px 28px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
.btn:hover { background: var(--lava); color: #fff; transform: translateY(-2px); }
.btn.ghost { color: var(--ink); background: rgba(255, 255, 255, .78); border: 1px solid rgba(29, 24, 56, .16); backdrop-filter: blur(12px); }
.btn.ghost:hover { background: #fff; border-color: rgba(29, 24, 56, .35); }
.btn.discord:hover { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn.small { font-size: 15px; padding: 11px 18px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
/* the one button that matters: into the world. One solid red (no fade to
   white), pressed down like a real button, and the arrow in a white bubble
   pointing the way Hebrew reads on: to the left. */
.play { --h: 78px; --b: 58px; display: inline-flex; align-items: center; gap: 18px; height: var(--h); padding-inline: 34px calc((var(--h) - var(--b)) / 2); border-radius: 999px;
  font: 800 clamp(21px, 1.9vw, 26px)/1 var(--heb); color: #fff; text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, #ff5d4d 0%, #ee3b32 55%, #e1302c 100%);
  box-shadow: 0 7px 0 #a8211f, 0 20px 36px rgba(225, 48, 44, .32), inset 0 2px 0 rgba(255, 255, 255, .32);
  text-shadow: 0 2px 0 rgba(140, 20, 20, .25); transition: transform .15s, box-shadow .15s; }
.play .bub { display: grid; place-items: center; width: var(--b); height: var(--b); border-radius: 50%; background: #fff; color: #e1302c; flex: none;
  box-shadow: 0 3px 0 rgba(140, 20, 20, .2); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.play .bub .ic { width: 42%; height: 42%; margin-inline-end: 6%; }
.play:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #a8211f, 0 26px 44px rgba(225, 48, 44, .38), inset 0 2px 0 rgba(255, 255, 255, .32); }
.play:hover .bub { transform: translateX(-5px); }
.play:active { transform: translateY(5px); box-shadow: 0 2px 0 #a8211f, 0 8px 16px rgba(225, 48, 44, .3), inset 0 2px 0 rgba(255, 255, 255, .25); }
.play.compact { --h: 46px; --b: 36px; gap: 10px; padding-inline: 18px 5px; font-size: 16px; box-shadow: 0 4px 0 #a8211f, 0 10px 20px rgba(225, 48, 44, .25), inset 0 1px 0 rgba(255, 255, 255, .3); }
.play.compact:hover { box-shadow: 0 6px 0 #a8211f, 0 14px 24px rgba(225, 48, 44, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.play.compact:active { box-shadow: 0 1px 0 #a8211f; transform: translateY(3px); }
.play.wide { --h: 62px; --b: 46px; width: 100%; justify-content: space-between; font-size: 20px; padding-inline-start: 26px; }

/* ---------- the bar: daylight glass ---------- */
/* before the doors open (main.js LAUNCH_AT): the ways in locked, a countdown at the foot */
.launchbar { position: fixed; inset: auto 0 0; z-index: 60; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #1d1838; color: #fff; font-weight: 700; font-size: 15.5px; text-align: center; box-shadow: 0 -8px 24px rgba(29, 24, 56, .25); }
.launchbar .ic { width: 18px; height: 18px; color: #ffd23f; }
.launchbar b { font-family: var(--lat); font-variant-numeric: tabular-nums; letter-spacing: .5px; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 2px 10px; direction: ltr; }
.launchbar.flash { animation: lb-flash .5s ease 2; }
@keyframes lb-flash { 50% { background: #e1302c; } }
body.prelaunch { padding-bottom: 54px; }
body.prelaunch [data-play], body.prelaunch [data-auth], body.prelaunch [data-buy] { filter: grayscale(.9); opacity: .7; cursor: not-allowed; }
body.prelaunch .play .lbl-t { font-variant-numeric: tabular-nums; }
.bar { position: fixed; inset: 0 0 auto; z-index: 50; background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.bar.solid, body:not(.has-hero) .bar { background: rgba(255, 255, 255, .9); border-color: var(--line); }
.bar-in { display: flex; align-items: center; gap: 22px; height: 72px; }
.bar-logo img { height: 42px; width: auto; }
.bar-nav { display: flex; gap: 4px; margin-inline-start: 8px; }
.bar-nav a { text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s; }
.bar-nav a:hover, .bar-nav a[aria-current] { color: var(--ink); background: var(--mist); }
.bar-nav a.hot, .drawer a.hot { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; box-shadow: 0 4px 12px var(--hg); }
.bar-nav a.hot { margin-inline-start: 4px; padding: 8px 14px; border-radius: 999px; }
.bar-nav a.hot .ic, .drawer a.hot .ic { width: 17px; height: 17px; }
.bar-nav a.hot:hover { color: #fff; filter: brightness(1.08); }
.hot.pass { --hb: linear-gradient(135deg, #ff8a3d, #e8467a); background: var(--hb); --hg: rgba(232, 70, 122, .3); }
.hot.shop { --hb: linear-gradient(135deg, #8b5cf6, #2f6fe8); background: var(--hb); --hg: rgba(108, 63, 224, .3); }
.hot.pro { --hb: linear-gradient(135deg, #ffd23f, #ff9a1a); background: var(--hb); color: #4a2e00 !important; --hg: rgba(255, 154, 26, .35); }
/* the bright pills keep their colour hovered and on their own page (the plain links' light
   background turned them white, with white text on it: his report, 2026-10-08); the page
   you're on gets a white ring inside instead */
.bar-nav a.hot:hover, .bar-nav a.hot[aria-current], .drawer a.hot:hover, .drawer a.hot[aria-current] { background: var(--hb); }
.bar-nav a.hot[aria-current], .drawer a.hot[aria-current] { box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .85), 0 4px 12px var(--hg); }
.drawer a.hot { border: 0; border-radius: 16px; padding: 14px 16px; margin-bottom: 6px; }
.bar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(29, 24, 56, .14); background: rgba(255, 255, 255, .8); cursor: pointer; color: var(--ink); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.icon-btn:hover { background: #5865f2; border-color: #5865f2; color: #fff; }
.icon-btn .ic { width: 20px; height: 20px; }
.who { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 14px; height: 44px; border-radius: 999px; border: 1px solid rgba(29, 24, 56, .14); background: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink); }
.who:hover { border-color: rgba(29, 24, 56, .35); }
/* a Pokémon's party icon: two frames side by side, bobbing like in the old games */
.mi { display: inline-block; width: 34px; height: 34px; flex: none; background: var(--mist) 0 0 / 200% 100% no-repeat; border-radius: 50%; image-rendering: pixelated; animation: bob .6s steps(1) infinite; }
.spr { display: block; image-rendering: pixelated; }
.mi.big { width: 72px; height: 72px; border-radius: 0; background-color: transparent; margin: 0 auto 4px; display: block; }
@keyframes bob { 50% { background-position: 100% 0; } }
.who .lv { font-size: 12px; color: var(--ember); }
.menu-btn { display: none; }
.drawer { position: fixed; inset: 72px 0 auto; z-index: 49; background: rgba(255, 255, 255, .97); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); padding: 10px var(--pad) 22px; display: grid; gap: 2px; box-shadow: var(--lift); }
.drawer a { text-decoration: none; padding: 14px 4px; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--line); }

/* ---------- hero: the world on a bright day ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: #a9dcff; }
.hero video, .hero .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a morning haze where the words sit (bottom, and the right where Hebrew starts), the sky left clear */
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .88) 16%, rgba(255, 255, 255, .35) 40%, transparent 60%),
  radial-gradient(ellipse 62% 62% at 88% 82%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .55) 45%, transparent 72%); }
.hero-in { position: relative; z-index: 1; padding-block: 140px calc(clamp(60px, 9vh, 104px) + 50px); display: grid; gap: 22px; justify-items: start; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #22b866; box-shadow: 0 0 0 0 rgba(34, 184, 102, .5); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(34, 184, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 184, 102, 0); } }
.hero-logo { width: min(230px, 46vw); filter: drop-shadow(0 12px 24px rgba(45, 30, 110, .25)); }
.hero h1 { font-family: var(--heb); font-size: clamp(56px, 9vw, 140px); line-height: 1.02; color: var(--ink); max-width: 12ch; }
/* the headline: the games' own logo lettering, sunny yellow inside a deep
   blue outline that drops into a 3D edge (the outline is a copy of the words
   behind them, so it never eats into the letters) */
.wow, .hero h1.wow { position: relative; font-weight: 900; letter-spacing: 0; padding-bottom: .12em; color: #2148b0; -webkit-text-stroke: .15em #2148b0;
  text-shadow: 0 .045em 0 #183a93, 0 .085em 0 #183a93, 0 .12em 0 #12307d, 0 .2em .3em rgba(18, 40, 110, .35);
  animation: wow-in .9s cubic-bezier(.2, 1.4, .4, 1) both .15s; }
.wow::before { content: attr(data-text); content: attr(data-text) / ''; position: absolute; inset: 0; -webkit-text-stroke: 0; text-shadow: none;
  color: transparent; background: linear-gradient(180deg, #fff6a8 0%, #ffd83a 38%, #ffb81c 72%, #ff9a1a 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes wow-in { from { opacity: 0; transform: translateY(.25em) scale(.92); } }
.hero-lead { max-width: 660px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; color: var(--ink); text-shadow: 0 1px 16px rgba(255, 255, 255, .95); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-top: 10px; }
.hero-cta .btn { height: 64px; padding-inline: 28px; font-size: 18px; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15.5px; font-weight: 600; color: var(--muted); }
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #22b866; color: #fff; stroke-width: 3.2; }
.vid-ctl { position: absolute; z-index: 2; inset-inline-end: var(--pad); bottom: 96px; }

/* ---------- the world right now: coloured cards rising out of the hero ---------- */
.now { position: relative; z-index: 2; margin-top: -64px; }
.now-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.ncard { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; padding: 22px 24px 20px; border-radius: 26px; color: #fff; text-decoration: none;
  display: grid; align-content: start; gap: 2px; box-shadow: 0 18px 40px var(--glow, rgba(45, 30, 110, .2)); transition: transform .25s, box-shadow .25s; }
.ncard:hover { transform: translateY(-4px); }
/* a big pale ring in the corner, like the top of a Poké Ball */
.ncard::before { content: ''; position: absolute; z-index: -1; width: 220px; height: 220px; inset-inline-end: -70px; bottom: -110px; border-radius: 50%;
  border: 26px solid rgba(255, 255, 255, .13); }
.ncard .nl { font-size: 15px; font-weight: 700; opacity: .88; }
.ncard .nv { font-family: var(--heb); font-weight: 800; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.15; }
.ncard .nv .num { font-weight: 900; }
.ncard .nv, .ncard .ns { max-width: calc(100% - 96px); }
.ncard.discord .nv { max-width: none; }
.ncard .ns { font-size: 15px; font-weight: 500; opacity: .92; }
.ncard .ns .num { font-weight: 800; }
.ncard .ns .ic { width: 16px; height: 16px; vertical-align: -3px; }
.ncard .spr { position: absolute; inset-inline-end: 6px; bottom: 4px; width: 104px; height: 104px; border-radius: 0; background-color: transparent; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)); }
/* Discord's mark, big and faint behind the words */
.ncard .nicon { position: absolute; z-index: -1; inset-inline-end: -8px; bottom: -22px; opacity: .2; transform: rotate(-12deg); }
.ncard .nicon .ic { width: 140px; height: 140px; }
.ncard.blue { background: linear-gradient(140deg, #4aa8ff 0%, #2f6fe8 100%); --glow: rgba(47, 111, 232, .32); }
.ncard.violet { background: linear-gradient(140deg, #a77bff 0%, #6c3fe0 100%); --glow: rgba(108, 63, 224, .32); }
.ncard.sunset { background: linear-gradient(140deg, #ffb347 0%, #ff6a3d 55%, #e8467a 100%); --glow: rgba(255, 106, 61, .34); }
.ncard.discord { background: linear-gradient(140deg, #7983ff 0%, #4c57e6 100%); --glow: rgba(88, 101, 242, .32); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(84px, 11vw, 150px); position: relative; }
.kicker { font-size: 15px; font-weight: 700; color: var(--ember); margin-bottom: 14px; letter-spacing: .01em; }
.sec h2 { font-family: var(--heb); font-size: clamp(40px, 5.2vw, 78px); line-height: 1.02; letter-spacing: -.025em; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head p { max-width: 620px; color: var(--muted); font-size: clamp(17px, 1.3vw, 22px); }
.sec-head a { color: var(--link); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s, transform .9s; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- the world: a strip of places ---------- */
.gallery { position: relative; }
.track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; padding-inline: var(--pad); padding-block: 4px 30px; }
.track::-webkit-scrollbar { display: none; }
.place { position: relative; flex: 0 0 min(78vw, 1180px); aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; background: var(--mist); box-shadow: var(--lift); }
.place img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.place:hover img { transform: scale(1.04); }
.place::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(29, 24, 56, .72) 0%, rgba(29, 24, 56, .12) 38%, transparent 55%); }
.place-text { position: absolute; z-index: 1; inset: auto clamp(20px, 3vw, 40px) clamp(20px, 3vw, 36px); color: #fff; }
.place h3 { font-family: var(--heb); font-size: clamp(34px, 4.4vw, 64px); line-height: 1; }
.place p { margin-top: 8px; max-width: 460px; color: rgba(255, 255, 255, .92); font-size: clamp(15px, 1.3vw, 18px); }
.track-ctl { display: flex; gap: 10px; }

/* ---------- what you do: rows of picture and words ---------- */
.feats { display: grid; gap: clamp(70px, 9vw, 130px); }
.feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 110px); align-items: center; }
.feat:nth-child(even) .feat-pic { order: 2; }
.feat-pic { border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--lift); }
.feat-pic img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  .feat-pic img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { transform: scale(1.12) translateY(3%); } to { transform: scale(1.02) translateY(-3%); } }
}
.feat h3 { font-family: var(--heb); font-size: clamp(36px, 4.2vw, 62px); line-height: 1; margin-bottom: 18px; }
.feat p { color: var(--muted); font-size: clamp(17px, 1.3vw, 22px); max-width: 640px; }
.feat ul { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 10px; }
.feat li { display: flex; gap: 12px; align-items: baseline; color: var(--ink); font-weight: 500; }
.feat li::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--sunset); flex: none; transform: translateY(-5px); }

/* ---------- raids ---------- */
.raids { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.tiers { display: grid; gap: 26px; margin-top: 30px; }
.tiers dt { font-family: var(--heb); font-weight: 700; font-size: 26px; display: flex; align-items: center; gap: 12px; }
.tiers dt i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.tiers dd { color: var(--muted); margin-top: 4px; }
.sched { background: var(--paper); border-radius: 24px; padding: 6px 26px; box-shadow: var(--lift); list-style: none; }
.sched li { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.sched li:last-child { border-bottom: 0; }
.sched .t { font-family: var(--lat); font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); direction: ltr; min-width: 4.2ch; }
.sched .n { font-family: var(--heb); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); display: flex; align-items: center; gap: 10px; }
.sched .n i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sched .d { font-size: 14px; color: var(--ash); display: block; font-family: 'Heebo', sans-serif; }
.sched .s { font-size: 15px; color: var(--ash); text-align: end; }
.sched .s.soon { color: var(--ember); font-weight: 700; }
.sched .s.now { color: #178a4a; font-weight: 700; }
.sched-note { margin-top: 18px; font-size: 15px; color: var(--ash); }
.list-empty { padding: 26px 4px; color: var(--ash); list-style: none; }

/* ---------- leaderboards: the top three on a podium, then the rest ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { background: var(--mist); border: 1px solid transparent; color: var(--muted); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 15.5px; font-weight: 600; transition: color .2s, background .2s, border-color .2s; }
.tabs button:hover { color: var(--ink); background: var(--mist-2); }
.tabs button[aria-selected='true'] { color: #fff; background: var(--ink); font-weight: 700; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); align-items: end; margin-bottom: clamp(26px, 3vw, 40px); }
.podium .list-empty { grid-column: 1 / -1; }
.pod { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: 22px 20px 24px; text-align: center; display: grid; justify-items: center; gap: 4px;
  background: var(--tint); box-shadow: 0 16px 36px var(--glow); }
/* a soft light behind the Pokémon */
.pod::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 46%); }
.pod.p1 { --tint: linear-gradient(180deg, #fff3b8 0%, #ffd84a 100%); --glow: rgba(240, 180, 20, .35); --medal: #c98a00; order: 2; padding-block: 36px 34px; }
.pod.p2 { --tint: linear-gradient(180deg, #f3f5fb 0%, #cfd6e8 100%); --glow: rgba(120, 130, 170, .25); --medal: #6a7393; order: 1; }
.pod.p3 { --tint: linear-gradient(180deg, #ffe4d1 0%, #f2a878 100%); --glow: rgba(220, 120, 60, .28); --medal: #b55a24; order: 3; }
.pod .rk { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--medal); font: 900 22px/1 var(--lat); box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.pod .spr { width: 112px; height: 112px; margin: 2px 0 -4px; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .15)); }
.pod.p1 .spr { width: 136px; height: 136px; }
.pod .nm { font-family: var(--heb); font-weight: 800; font-size: clamp(20px, 1.9vw, 28px); line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .v { font: 900 clamp(26px, 2.4vw, 36px)/1 var(--lat); direction: ltr; }
.pod .v small { font: 600 14px/1 'Heebo', sans-serif; color: rgba(29, 24, 56, .62); margin-inline-start: 6px; }
.crown { color: #e0a800; margin-inline-start: 6px; font-size: 14px; }
.board { list-style: none; padding: 0; columns: 2; column-gap: clamp(30px, 5vw, 80px); }
.board li { break-inside: avoid; display: grid; grid-template-columns: 3ch 40px 1fr auto; gap: 14px; align-items: center; min-height: 62px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.board .r { font-family: var(--lat); font-weight: 800; font-size: 19px; color: var(--ash); direction: ltr; }
.board .mi { width: 40px; height: 40px; }
.board .nm { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .v { font-family: var(--lat); font-weight: 800; font-size: 17px; direction: ltr; }
.board .v small { font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 13px; color: var(--ash); margin-inline-start: 6px; }

/* ---------- news: cards with a picture from the world ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 32px); }
.post { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); display: flex; flex-direction: column; }
.post img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.post:hover img { transform: scale(1.04); }
.post .pb { position: relative; padding: 22px clamp(20px, 2vw, 28px) 28px; background: #fff; }
.post time { position: absolute; top: -18px; inset-inline-start: clamp(20px, 2vw, 28px); font: 800 14px/1 var(--lat); color: #fff; background: #ee3b32; padding: 9px 14px; border-radius: 999px; direction: ltr; box-shadow: 0 6px 14px rgba(225, 48, 44, .3); }
.post h3 { font-family: var(--heb); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.15; margin: 10px 0 10px; }
.post p { color: var(--muted); font-size: 16.5px; }

/* ---------- getting started: three coloured steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); padding: 0; }
.steps li { list-style: none; position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r); padding: clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px) 120px; background: var(--tint); }
.steps li::before { content: ''; position: absolute; z-index: -1; width: 300px; height: 300px; inset-inline-start: -120px; bottom: -190px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .5); }
.steps .s1 { --tint: linear-gradient(160deg, #e5f0ff 0%, #c7dcff 100%); --ac: #2f6fe8; }
.steps .s2 { --tint: linear-gradient(160deg, #fff0e2 0%, #ffd2b4 100%); --ac: #ee3b32; }
.steps .s3 { --tint: linear-gradient(160deg, #e3f8ec 0%, #bfeccf 100%); --ac: #1a9a55; }
.steps .big { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ac); color: #fff; font: 900 32px/1 var(--lat); margin-bottom: 20px; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); }
.steps h3 { font-family: var(--heb); font-size: clamp(26px, 2.3vw, 34px); margin-bottom: 8px; }
.steps p { color: #4a4570; }
.steps .mons { position: absolute; inset-inline-end: 16px; bottom: 10px; display: flex; gap: 0; }
.steps .mons .spr { width: 96px; height: 96px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .15)); }
.start-cta { margin-top: clamp(30px, 4vw, 50px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.start-cta .btn { height: 64px; padding-inline: 28px; font-size: 18px; }

/* ---------- questions: cards that open ---------- */
.faq { columns: 2 520px; column-gap: clamp(16px, 2vw, 28px); }
.faq details { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: clamp(12px, 1.4vw, 18px); background: #fff; border-radius: 22px; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(45, 30, 110, .07); transition: border-color .25s, box-shadow .25s; }
.faq details:hover { box-shadow: 0 12px 30px rgba(45, 30, 110, .12); }
.faq summary { font-weight: 700; list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; font-family: var(--heb); font-size: clamp(19px, 1.7vw, 24px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pl { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; transition: transform .3s, background .3s, color .3s; }
.faq summary .pl .ic { width: 20px; height: 20px; }
.faq details:nth-child(6n+1) { --ac: #2f6fe8; } .faq details:nth-child(6n+2) { --ac: #ee3b32; } .faq details:nth-child(6n+3) { --ac: #7c4dea; }
.faq details:nth-child(6n+4) { --ac: #1a9a55; } .faq details:nth-child(6n+5) { --ac: #ff7a1a; } .faq details:nth-child(6n) { --ac: #e8467a; }
.faq summary .pl { background: var(--ac); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
.faq details[open] summary .pl { transform: rotate(45deg); }
.faq details[open] { border-color: var(--ac); }
.faq details p { padding: 0 24px 24px; color: var(--muted); max-width: 820px; }
.faq details a { color: var(--link); }

/* ---------- the community band: the sunset itself ---------- */
.band { position: relative; overflow: hidden; padding-block: clamp(90px, 12vw, 160px); text-align: center; background: var(--sunset); color: #fff; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; mix-blend-mode: soft-light; }
.band .wrap { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; }
.band h2 { font-family: var(--heb); font-size: clamp(46px, 6.4vw, 100px); line-height: .95; text-shadow: 0 4px 30px rgba(150, 40, 30, .25); }
.band p { max-width: 560px; color: rgba(255, 255, 255, .95); font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; }
.band .btn { color: var(--ink); background: #fff; border: 0; }
.band .btn:hover { background: #5865f2; color: #fff; }

/* ---------- footer ---------- */
.foot { background: var(--mist); padding-block: 70px 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.foot-brand img { height: 52px; width: auto; margin-bottom: 16px; }
.foot-brand p { color: var(--muted); font-size: 15px; max-width: 320px; }
.foot h3 { font-size: 15px; font-weight: 700; color: var(--ember); margin-bottom: 14px; font-family: 'Heebo', sans-serif; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.foot ul a { text-decoration: none; color: var(--ink); font-size: 15.5px; }
.foot ul a:hover { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.foot-legal { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13.5px; color: var(--ash); }
.foot-legal p { max-width: 820px; }

/* ---------- the sign-in window ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(29, 24, 56, .35); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
.modal.open { opacity: 1; }
.panel { position: relative; width: min(100%, 470px); max-height: calc(100svh - 32px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: clamp(24px, 4vw, 38px); box-shadow: 0 40px 100px rgba(45, 30, 110, .28); transform: translateY(14px) scale(.98); transition: transform .3s; }
.modal.open .panel { transform: none; }
.panel-x { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--mist); cursor: pointer; display: grid; place-items: center; }
.panel-x:hover { background: var(--mist-2); }
.panel h2 { font-family: var(--heb); font-size: 36px; line-height: 1.05; margin-bottom: 6px; }
.panel .sub { color: var(--muted); font-size: 15.5px; margin-bottom: 22px; }
.seg-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--mist); margin-bottom: 22px; }
.seg-tabs button { border: 0; background: none; padding: 11px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg-tabs button[aria-selected='true'] { background: var(--ink); color: #fff; }
.gbox { min-height: 44px; display: grid; }
/* Google's sign-in button, in Google's own look */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 50px; border-radius: 999px; border: 1px solid #747775; background: #fff; color: #1f1f1f; font: 600 16px/1 'Heebo', Arial, sans-serif; cursor: pointer; transition: background .2s, box-shadow .2s; }
.gbtn:hover { background: #f7f8fa; box-shadow: 0 2px 8px rgba(60, 64, 67, .15); }
.gbtn .g { width: 20px; height: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ash); font-size: 14px; margin: 18px 0; }
.or::before, .or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.form { display: grid; gap: 15px; }
.f { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f > span, .f legend { padding: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.f em { font-style: normal; opacity: .8; margin-inline-start: 6px; font-weight: 500; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid rgba(29, 24, 56, .2); border-radius: 14px; padding: 12px 14px; width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(31, 168, 158, .18); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: 16px 52%, 22px 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.tick { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink); cursor: pointer; line-height: 1.5; }
.tick input { width: 19px; height: 19px; padding: 0; flex: none; margin-top: 2px; accent-color: var(--lava); }
.tick a { color: var(--link); }
.err { color: #c0301f; font-weight: 600; font-size: 15px; min-height: 1.4em; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ok-note { color: #178a4a; font-weight: 700; }

/* ---------- pages: the account, the legal texts, contact ---------- */
.page { padding-block: 130px 90px; min-height: 70svh; background: linear-gradient(180deg, var(--mist) 0, var(--paper) 420px); }
.page-head { margin-bottom: clamp(36px, 5vw, 60px); }
.page-head h1 { font-family: var(--heb); font-size: clamp(46px, 6.6vw, 96px); line-height: .98; }
.page-head p { margin-top: 16px; color: var(--muted); max-width: 640px; font-size: clamp(17px, 1.4vw, 20px); }
.updated { font-size: 14.5px; color: var(--ash); margin-top: 14px; }
.doc-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.toc { position: sticky; top: 100px; font-size: 15px; }
.toc h2 { font-size: 13.5px; color: var(--ember); font-weight: 700; margin-bottom: 12px; font-family: 'Heebo', sans-serif; }
.toc ol { padding: 0; list-style: none; display: grid; gap: 4px; border-inline-start: 1px solid var(--line); }
.toc a { display: block; text-decoration: none; color: var(--muted); padding: 5px 14px; border-inline-start: 2px solid transparent; margin-inline-start: -1px; }
.toc a:hover, .toc a.on { color: var(--ink); border-color: var(--lava); }
.doc { max-width: 920px; font-size: 17.5px; line-height: 1.85; color: #3d3860; }
.doc section { padding-block: 10px 26px; }
.doc h2 { font-family: var(--heb); font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); margin: 22px 0 12px; line-height: 1.2; }
.doc h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 18px 0 6px; }
.doc p + p, .doc p + ul, .doc ul + p, .doc p + ol, .doc ol + p { margin-top: 12px; }
.doc ul, .doc ol { padding-inline-start: 22px; display: grid; gap: 6px; }
.doc li::marker { color: var(--lava); }
.doc a { color: var(--link); text-underline-offset: 3px; }
.doc strong { color: var(--ink); }
.summary { background: var(--mist); border: 1px solid var(--mist-2); border-radius: 22px; padding: 22px 26px; margin-bottom: 18px; }
.summary h2 { margin-top: 0; }
.callout { border-inline-start: 3px solid var(--lava); padding: 6px 18px; margin: 14px 0; color: var(--ink); }

/* ---------- the changelog (/changelog/): the days newest first, a big date over each, every
   change a white card with its kind as a coloured pill (new, better, a fix, an event...) ---------- */
.clog { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.clog-toc small { color: var(--ash); font-size: 13px; margin-inline-start: 4px; }
.clog-days { display: grid; gap: clamp(40px, 5vw, 64px); max-width: 920px; }
.clog-day { scroll-margin-top: 100px; }
.clog-date { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--line); }
.clog-date b { font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.02em; }
.clog-date span { font-family: var(--heb); font-size: 20px; font-weight: 700; }
.clog-date small { color: var(--ash); font-size: 15px; font-weight: 700; }
.clog-list { display: grid; gap: 14px; }
.clog-item { background: #fff; border: 1px solid var(--mist-2); border-radius: 22px; padding: 22px clamp(18px, 2vw, 28px); box-shadow: 0 10px 30px rgba(45, 30, 110, .07); scroll-margin-top: 100px; }
.clog-item:target { outline: 3px solid var(--lava); outline-offset: 2px; }
.clog-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.clog-item h3 { font-family: var(--heb); font-size: clamp(21px, 1.8vw, 25px); line-height: 1.2; }
.clog-item h3 a { text-decoration: none; }
.clog-item h3 a:hover { color: var(--ember); }
.clog-item p { color: #3d3860; font-size: 17px; }
.clog-item ul { margin-top: 10px; padding-inline-start: 22px; display: grid; gap: 4px; color: #3d3860; font-size: 16.5px; }
.clog-item li::marker { color: var(--lava); }
.clog-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.clog-tag.t-new { background: #dff6f3; color: #0f7a72; }
.clog-tag.t-better { background: #e3edff; color: #2c5bb8; }
.clog-tag.t-fix { background: #ffe9df; color: var(--ember); }
.clog-tag.t-event { background: #fde4ee; color: #b5305f; }
.clog-tag.t-balance { background: #fff3b8; color: #8a6400; }
.clog-tag.t-launch { background: var(--sunset); color: #fff; }
.clog-sum { list-style: none; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 900px) { .clog { grid-template-columns: 1fr; } .clog-toc { display: none; } }

/* ---------- the trainer card (account): the character on a sky stage, the card
   beside it, then tabs for the team, the box, the wardrobe, rides, bag, badges ---------- */
.acct { padding-top: 100px; }
.tc { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.tc-info { background: #fff; border-radius: 34px; padding: clamp(24px, 3vw, 44px); box-shadow: var(--lift); display: grid; gap: 20px; align-content: start; min-width: 0; }
.tc-kicker { font-size: 15px; font-weight: 700; color: var(--ember); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.online { display: inline-flex; gap: 8px; align-items: center; color: #178a4a; background: #e3f8ec; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; }
.tc-name { font-family: var(--heb); font-size: clamp(46px, 5.6vw, 92px); line-height: 1.08; overflow-wrap: anywhere; }
.tc-title { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--muted); font-weight: 500; margin-top: -8px; }
.prest { display: inline-flex; gap: 6px; align-items: center; color: #8a6400; background: #fff3b8; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.prest .ic { width: 16px; height: 16px; }
.tc-level { display: flex; align-items: center; gap: 20px; }
.lvl-badge { width: 96px; height: 96px; border-radius: 50%; flex: none; display: grid; place-content: center; text-align: center; color: #fff;
  background: linear-gradient(170deg, #ff5d4d, #e1302c); box-shadow: 0 6px 0 #a8211f, 0 14px 26px rgba(225, 48, 44, .3); }
.lvl-badge b { font: 900 40px/1 var(--lat); }
.lvl-badge small { font-size: 13px; font-weight: 700; opacity: .92; }
.lvl-bar { flex: 1; min-width: 0; }
.xpbar { height: 16px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.xpbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(270deg, #4aa8ff, #6c3fe0); }
.xp-note { margin-top: 8px; font-size: 14px; color: var(--ash); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wallet { display: flex; flex-wrap: wrap; gap: 12px; }
.coin { display: inline-flex; align-items: center; gap: 10px; padding-block: 7px; padding-inline: 7px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(45, 30, 110, .06); }
.coin .ic { width: 40px; height: 40px; padding: 9px; border-radius: 50%; color: #fff; }
.coin.silver .ic { background: linear-gradient(160deg, #c9d3e6, #8592b0); }
.coin.gold .ic { background: linear-gradient(160deg, #6fdcff, #2f8cff); }
.coin b { font-size: 22px; font-weight: 900; }
.coin small { color: var(--ash); font-weight: 600; font-size: 14px; }
.tc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tnum { background: var(--tb); border-radius: 18px; padding: 12px 14px; display: grid; gap: 4px; align-content: start; }
.tnum dt { font-size: 13.5px; font-weight: 700; color: var(--tn); display: flex; gap: 6px; align-items: center; }
.tnum dt .ic { width: 16px; height: 16px; }
.tnum dd { font-family: var(--heb); font-weight: 800; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; }
.tnum dd .num { font-weight: 900; }
.tnum dd small { font-size: 14px; color: var(--ash); font-weight: 600; }
.tnum.red { --tn: #d42a24; --tb: #ffece9; } .tnum.blue { --tn: #2563d9; --tb: #e8f1ff; } .tnum.orange { --tn: #d45a08; --tb: #fff1e3; }
.tnum.green { --tn: #178a4a; --tb: #e4f8ec; } .tnum.violet { --tn: #6232d6; --tb: #f0e9ff; } .tnum.teal { --tn: #0d8780; --tb: #dff6f4; }
.tnum.gold { --tn: #9a6e00; --tb: #fff5cf; } .tnum.pink { --tn: #c92a6f; --tb: #ffe8f2; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; }
/* the stage: a bright sky with the trainer on the game's white disc */
.tc-stage, .wd-stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 34px; min-height: 560px;
  background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(180deg, #7cc6ff 0%, #bfe4ff 52%, #eef8ff 100%); box-shadow: var(--lift); }
.tc-stage::before, .wd-stage::before { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; top: -170px; inset-inline-end: -150px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .28); }
.tc-stage canvas, .wd-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.tc-stage canvas:active, .wd-stage canvas:active { cursor: grabbing; }
.no-3d canvas { display: none; }
.stage-tools { position: absolute; top: 16px; inset-inline-start: 16px; display: flex; gap: 8px; }
.chipbtn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; font: 700 14.5px/1 'Heebo', sans-serif; color: var(--ink); background: rgba(255, 255, 255, .9); padding: 10px 16px; border-radius: 999px; box-shadow: 0 4px 14px rgba(20, 60, 120, .12); transition: background .2s, color .2s; }
.chipbtn .ic { width: 17px; height: 17px; }
.chipbtn:hover { background: #fff; }
.chipbtn[aria-pressed='true'] { background: var(--ink); color: #fff; }
.stage-hint { position: absolute; bottom: 16px; left: 50%; translate: -50% 0; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--muted); background: rgba(255, 255, 255, .85); padding: 7px 14px; border-radius: 999px; pointer-events: none; }
.stage-hint .ic { width: 16px; height: 16px; }
/* the tabs: a floating bar that stays under the site's bar */
.ctabs-wrap { position: sticky; top: 82px; z-index: 6; margin: clamp(26px, 3vw, 40px) 0 clamp(18px, 2vw, 26px); }
.ctabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 10px 30px rgba(45, 30, 110, .12); }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: none; cursor: pointer; white-space: nowrap; padding: 12px 18px; border-radius: 999px; font: 700 16px/1 'Heebo', sans-serif; color: var(--muted); transition: background .2s, color .2s; }
.ctabs button .ic { width: 19px; height: 19px; }
.ctabs button small { font: 800 12.5px/1 var(--lat); padding: 4px 8px; border-radius: 999px; background: var(--mist); color: var(--muted); direction: ltr; }
.ctabs button small:empty { display: none; }
.ctabs button:hover { color: var(--ink); background: var(--mist); }
.ctabs button[aria-selected='true'] { color: #fff; background: var(--tab, var(--ink)); }
.ctabs button[aria-selected='true'] small { background: rgba(255, 255, 255, .22); color: #fff; }
.ctabs [data-tab='party'] { --tab: #ee3b32; } .ctabs [data-tab='box'] { --tab: #6c3fe0; } .ctabs [data-tab='wardrobe'] { --tab: #e8467a; }
.ctabs [data-tab='rides'] { --tab: #2f6fe8; } .ctabs [data-tab='bag'] { --tab: #e8650f; } .ctabs [data-tab='badges'] { --tab: #c99000; }
.cpanel { min-height: 320px; }
.cempty { background: #fff; border-radius: 28px; padding: 54px 24px; text-align: center; display: grid; justify-items: center; gap: 14px; color: var(--muted); box-shadow: var(--lift); }
.cempty .ic { width: 50px; height: 50px; color: #ee3b32; }
.cempty p { max-width: 540px; }
/* a type, a rarity */
.tpill { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--tc); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.tpills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rar { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: var(--rar); padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.rar.rainbow { background: linear-gradient(90deg, #ff3b4e, #ffb21e, #2eb872, #2f8cff, #8b5cf6, #ff3b4e); background-size: 200% 100%; animation: rainbow 3s linear infinite; }
@keyframes rainbow { to { background-position: 200% 0; } }
/* the team */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.mcard { display: grid; text-align: start; border: 0; padding: 0; font: inherit; color: inherit; background: #fff; border-radius: 28px; overflow: hidden; cursor: pointer; box-shadow: var(--lift); transition: transform .2s, box-shadow .2s; }
.mcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(45, 30, 110, .18); }
.mc-art { position: relative; display: block; height: 190px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 50% 20% at 50% 92%, rgba(255, 255, 255, .7), transparent 70%), linear-gradient(140deg, color-mix(in srgb, var(--t1) 62%, white), color-mix(in srgb, var(--t2) 62%, white)); }
.mc-art::before { content: ''; position: absolute; z-index: -1; width: 260px; height: 260px; inset-inline-end: -80px; top: -120px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .25); }
.mc-art .spr { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; width: 160px; height: 160px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); }
.mc-lv { position: absolute; top: 14px; inset-inline-start: 14px; background: rgba(255, 255, 255, .92); padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.mc-lv b { font-size: 17px; font-weight: 900; }
.mc-tag { position: absolute; inset-inline-end: 14px; top: 14px; display: inline-flex; gap: 5px; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.mc-tag .ic { width: 14px; height: 14px; }
.mc-tag.lead { background: #ffd84a; color: #6b4b00; }
.mc-tag.shiny { top: auto; bottom: 14px; background: linear-gradient(90deg, #ff7ab6, #8b5cf6); color: #fff; }
.mc-body { display: grid; gap: 9px; padding: 18px 22px 20px; }
.mc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.mc-name { font-family: var(--heb); font-size: 25px; font-weight: 800; line-height: 1.15; }
.mbar { display: block; height: 10px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.mbar i { display: block; height: 100%; border-radius: inherit; }
.mbar.hp i { background: linear-gradient(270deg, #3be08a, #1fae5f); }
.mbar.xp { height: 6px; }
.mbar.xp i { background: linear-gradient(270deg, #4aa8ff, #6c3fe0); }
.bar-l { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ash); margin-top: -3px; }
.bar-l span { display: inline-flex; gap: 5px; align-items: center; }
.bar-l .ic { width: 14px; height: 14px; color: #e8467a; }
.mc-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.mv { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 15%, white); font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.mv::before, .mvc b::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); flex: none; }
.mc-more { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-top: 2px; }
.mc-more > span { display: inline-flex; gap: 4px; align-items: center; color: #e1302c; font-weight: 700; }
.mc-more .ic { width: 16px; height: 16px; }
/* the box */
.box-tools { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-bottom: 20px; }
.search { position: relative; flex: 1 1 260px; max-width: 400px; }
.search .ic { position: absolute; inset-inline-start: 16px; top: 50%; translate: 0 -50%; width: 19px; height: 19px; color: var(--ash); pointer-events: none; }
.search input { padding-inline-start: 46px; border-radius: 999px; background: #fff; }
.box-tools select { width: auto; border-radius: 999px; background-color: #fff; padding-inline-end: 44px; }
.box-count { margin-inline-start: auto; color: var(--ash); font-size: 15px; font-weight: 600; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.btile { position: relative; border: 0; font: inherit; color: inherit; cursor: pointer; background: #fff; border-radius: 22px; padding: 0 8px 12px; overflow: hidden; text-align: center; display: grid; gap: 2px; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); transition: transform .2s, box-shadow .2s; }
.btile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(45, 30, 110, .14); }
.bt-art { position: relative; display: block; height: 112px; margin: 0 -8px 8px; background: linear-gradient(160deg, color-mix(in srgb, var(--t1) 38%, white), color-mix(in srgb, var(--t2) 38%, white)); }
.bt-art .spr { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; width: 100px; height: 100px; }
.btile b { font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btile small { color: var(--ash); font-size: 13.5px; }
.bt-shiny { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ff7ab6, #8b5cf6); color: #fff; }
.bt-shiny .ic { width: 15px; height: 15px; }
/* one Pokémon's window */
.mon-panel { width: min(100%, 760px); }
.mp-top { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: center; margin: calc(-1 * clamp(24px, 4vw, 38px)); margin-bottom: 20px; padding: 26px clamp(24px, 4vw, 38px) 22px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--t1) 55%, white), color-mix(in srgb, var(--t2) 55%, white)); }
.mp-art .spr { width: 170px; height: 170px; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); }
.mp-where { font-size: 14px; font-weight: 700; color: rgba(29, 24, 56, .7); display: flex; gap: 6px; align-items: center; }
.shiny-t { display: inline-flex; gap: 4px; align-items: center; color: #c92a6f; }
.shiny-t .ic { width: 15px; height: 15px; }
#monTitle { font-family: var(--heb); font-size: clamp(32px, 4vw, 44px); line-height: 1.05; margin: 4px 0 2px; }
.mp-sp { color: rgba(29, 24, 56, .7); font-weight: 600; }
.mp-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.mp-meta .lv { background: rgba(255, 255, 255, .9); padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.mp-meta .lv b { font-weight: 900; font-size: 16px; }
.mp-nature { background: var(--mist); border-radius: 16px; padding: 12px 16px; font-size: 15.5px; }
.mp-nature .up, .srow.up .sn { color: #178a4a; }
.mp-nature .down, .srow.down .sn { color: #c0301f; }
.mp-nature .up, .mp-nature .down { font-weight: 700; }
.mp-stats { display: grid; gap: 7px; margin-top: 14px; }
.srow { display: grid; grid-template-columns: 136px 48px minmax(60px, 1fr) 76px minmax(120px, 160px) 40px; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; background: #faf9ff; }
.srow.up { background: #ebfaf1; } .srow.down { background: #fff1ef; }
.sn { display: inline-flex; gap: 4px; align-items: center; font-size: 15px; }
.sn .ic { width: 15px; height: 15px; stroke-width: 3; }
.sv { font-size: 20px; font-weight: 900; }
.sbar { height: 10px; border-radius: 999px; background: var(--mist-2); overflow: hidden; }
.sbar i { display: block; height: 100%; border-radius: inherit; background: var(--sc); }
.srow:nth-child(1) { --sc: #22b866; } .srow:nth-child(2) { --sc: #ff7a1a; } .srow:nth-child(3) { --sc: #f2b705; }
.srow:nth-child(4) { --sc: #4aa8ff; } .srow:nth-child(5) { --sc: #7c4dea; } .srow:nth-child(6) { --sc: #e8467a; }
.iv { display: inline-flex; justify-content: center; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; padding: 5px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.iv.max { background: #fff3b8; border-color: #ffe17a; color: #7a5800; }
.iv.ring { background: linear-gradient(90deg, #ffd23f, #ff7ab6, #7c4dea); border-color: transparent; color: #fff; }
.iv .ic { width: 12px; height: 12px; }
.ev { position: relative; display: block; height: 24px; border-radius: 999px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.ev i { position: absolute; inset-block: 0; inset-inline-start: 0; background: rgba(124, 77, 234, .2); }
.ev small { position: relative; display: block; text-align: center; font-size: 12.5px; line-height: 22px; font-weight: 600; }
.bonus { color: #178a4a; font-weight: 800; font-size: 14px; }
.mp-ev { margin-top: 12px; font-size: 14.5px; color: var(--ink); }
.mp-ev span { color: var(--ash); }
.mp-h { font-family: var(--heb); font-size: 22px; margin: 22px 0 10px; }
.mp-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mvc { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--tc) 13%, white); display: grid; gap: 7px; }
.mvc b { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.mvc span { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mvc small { color: var(--muted); font-size: 13.5px; }
/* the wardrobe */
.wd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: clamp(16px, 2vw, 26px); align-items: start; }
.wd-stage { order: 2; position: sticky; top: 160px; min-height: 0; height: min(68vh, 600px); }
.wd-sel { position: absolute; inset-inline: 14px; bottom: 14px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-radius: 18px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.wd-sel > div { display: grid; gap: 4px; }
.wd-sel p { color: var(--muted); }
.wd-count { color: var(--muted); margin-bottom: 14px; }
.wd-count b { color: var(--ink); font-size: 1.15em; }
#wdTabs, .bag-tabs { margin-bottom: 18px; }
.tabs button small { font: 800 12px/1 var(--lat); opacity: .7; margin-inline-start: 2px; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.wtile { position: relative; border: 2px solid transparent; font: inherit; color: inherit; background: #fff; border-radius: 22px; padding: 10px 10px 14px; cursor: pointer; display: grid; gap: 7px; justify-items: center; align-content: start; text-align: center; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); transition: transform .2s, border-color .2s, box-shadow .2s; }
.wtile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(45, 30, 110, .14); }
.wtile.sel { border-color: var(--rar); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rar) 22%, transparent), 0 16px 30px rgba(45, 30, 110, .14); }
.wt-pic { display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--rar) 20%, white) 100%); }
.wt-pic img { width: 100%; height: 100%; object-fit: cover; }
.wtile b { font-size: 15px; line-height: 1.3; }
.wt-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.fx { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; font-weight: 700; color: #6c3fe0; }
.fx .ic { width: 12px; height: 12px; }
.worn { position: absolute; top: 16px; inset-inline-start: 16px; display: inline-flex; gap: 4px; align-items: center; background: #22b866; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px 4px 8px; border-radius: 999px; box-shadow: 0 3px 8px rgba(23, 138, 74, .3); }
.worn .ic { width: 13px; height: 13px; stroke-width: 3; }
/* rides */
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.ride { position: relative; background: #fff; border-radius: 26px; padding: 14px 16px 20px; box-shadow: var(--lift); display: grid; gap: 8px; align-content: start; border: 2px solid transparent; }
.ride.on { border-color: var(--rar); }
.ride-pic { display: block; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: radial-gradient(circle at 50% 58%, #fff 0, color-mix(in srgb, var(--rar) 22%, white) 100%); }
.ride-pic img { width: 100%; height: 100%; object-fit: contain; }
.ride-t { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.ride-t b { font-family: var(--heb); font-size: 22px; }
.speed { display: flex; gap: 6px; align-items: center; color: #d45a08; font-weight: 700; font-size: 15px; }
.speed .ic { width: 16px; height: 16px; }
.ride-d { color: var(--muted); font-size: 15px; }
.ride .worn { top: 24px; inset-inline-start: 26px; }
/* the bag */
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 12px; }
.itile { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border-radius: 20px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(45, 30, 110, .07); }
.it-pic { width: 58px; height: 58px; border-radius: 16px; background: color-mix(in srgb, var(--rar) 12%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rar) 55%, white); display: grid; place-items: center; }
.it-pic img { width: 44px; height: 44px; image-rendering: pixelated; object-fit: contain; }
.it-pic .ic { width: 26px; height: 26px; color: var(--muted); }
.it-t { display: grid; gap: 2px; min-width: 0; }
.it-t b { font-size: 15.5px; line-height: 1.3; }
.it-t small { color: var(--ash); font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.it-n { font-size: 17px; font-weight: 900; background: var(--mist); padding: 6px 10px; border-radius: 12px; }
/* badges */
.bcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.bslot { background: #fff; border-radius: 24px; padding: 22px 12px 18px; display: grid; justify-items: center; gap: 12px; text-align: center; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); }
.bimg { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); }
.bimg img { width: 64px; height: 64px; image-rendering: pixelated; object-fit: contain; }
.bslot:not(.got) img { filter: grayscale(1) brightness(.5); opacity: .35; }
.bslot.got .bimg { background: radial-gradient(circle, #fffbe6 0, #ffd84a 100%); box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(240, 180, 20, .35); }
.bslot b { font-size: 15px; }
.bslot:not(.got) b { color: var(--ash); }
/* the account's settings */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 18px; align-items: start; }
.settings h3 { font-family: var(--heb); font-size: 24px; margin-bottom: 12px; }
.settings .btn { margin-top: 14px; }
.set-note { color: var(--muted); margin-top: 12px; font-size: 15.5px; }
.set-note a { color: var(--link); }
.contact-grid { display: grid; grid-template-columns: 1fr minmax(0, 560px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.contact-side { display: grid; gap: 26px; color: var(--muted); }
.contact-side h2 { font-family: var(--heb); font-size: 28px; color: var(--ink); }
.contact-side a { color: var(--link); }
.glass { background: #fff; border: 1px solid var(--mist-2); border-radius: 28px; padding: clamp(22px, 3vw, 36px); box-shadow: var(--lift); }

/* ---------- the home page's door to the pass and the store ---------- */
.promo { padding-block: clamp(10px, 2vw, 30px) clamp(60px, 8vw, 110px); }
.promo-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); }
.pcard { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 10px; min-height: 300px; padding: clamp(26px, 3vw, 44px); border-radius: 34px; color: #fff; text-decoration: none; box-shadow: 0 24px 50px var(--pg); transition: transform .25s; }
.pcard:hover { transform: translateY(-5px); }
.pcard::before { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; inset-inline-end: -120px; bottom: -200px; border-radius: 50%; border: 48px solid rgba(255, 255, 255, .14); }
.pcard.passc { background: linear-gradient(140deg, #ffb347 0%, #ff6a3d 45%, #e8467a 100%); --pg: rgba(232, 70, 122, .3); }
.pcard.shopc { background: linear-gradient(140deg, #a77bff 0%, #6c3fe0 50%, #2f6fe8 100%); --pg: rgba(108, 63, 224, .3); }
.pcard.proc { background: linear-gradient(140deg, #ffe066 0%, #ffb21e 50%, #ff8a1a 100%); color: #3d2600; --pg: rgba(255, 154, 26, .35); }
.pcard.proc .pc-go { background: #3d2600; color: #ffe066; }
.pc-kicker { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 16px; opacity: .95; }
.pc-kicker .ic { width: 20px; height: 20px; }
.pc-title { font-family: var(--heb); font-weight: 900; font-size: clamp(34px, 3.6vw, 56px); line-height: 1.02; max-width: 12ch; }
.pc-text { max-width: min(440px, 76%); font-size: clamp(16px, 1.3vw, 19px); opacity: .95; }
.pc-go { margin-top: 8px; display: inline-flex; gap: 6px; align-items: center; justify-self: start; background: #fff; color: var(--ink); font-weight: 800; padding: 12px 20px; border-radius: 999px; box-shadow: 0 6px 0 rgba(0, 0, 0, .12); }
.pc-go .ic { width: 18px; height: 18px; }
.pcard .pc-mon { position: absolute; z-index: -1; inset-inline-end: 8px; bottom: 6px; width: clamp(110px, 10vw, 170px); height: clamp(110px, 10vw, 170px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .25)); }

/* ---------- the store and the PokéPass: shared bits ---------- */
.shop-hero, .pass-hero { position: relative; overflow: hidden; padding-block: 120px clamp(40px, 5vw, 70px); }
.shop-hero { background: radial-gradient(circle at 12% 18%, #ffe0f0 0, transparent 38%), radial-gradient(circle at 70% 10%, #e0e9ff 0, transparent 42%), radial-gradient(circle at 92% 80%, #efe4ff 0, transparent 40%), linear-gradient(180deg, #f6f3ff, #fff); }
.pass-hero { background: radial-gradient(circle at 85% 15%, #ffd9c2 0, transparent 40%), radial-gradient(circle at 15% 85%, #ffd6e7 0, transparent 40%), radial-gradient(circle at 50% 50%, #fff1d6 0, transparent 60%), linear-gradient(180deg, #fff5ee, #fff); }
.shop-hero-in, .pass-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(20px, 3vw, 50px); align-items: center; }
.sh-kicker { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; color: var(--ember); margin-bottom: 6px; }
.sh-kicker .ic { width: 20px; height: 20px; }
.shop-hero h1.wow, .pass-hero h1.wow { font-family: var(--heb); font-size: clamp(64px, 9vw, 150px); line-height: 1.05; }
.sh-lead { max-width: 560px; font-size: clamp(18px, 1.5vw, 22px); font-weight: 500; margin-top: 6px; }
.sh-timer { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; background: #fff; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 22px rgba(45, 30, 110, .1); font-weight: 600; color: var(--muted); }
.sh-timer .ic { width: 19px; height: 19px; color: #e1302c; }
.sh-timer b { color: var(--ink); font-size: 18px; }
.price { display: inline-flex; gap: 8px; align-items: baseline; font-weight: 900; color: #d62b26; font-size: 18px; }
.price s { color: var(--ash); font-weight: 600; font-size: .78em; }
.owned { display: inline-flex; gap: 6px; align-items: center; color: #178a4a; font-weight: 700; font-size: 15px; }
.owned .ic { width: 17px; height: 17px; stroke-width: 3; }
.btn.buy { background: linear-gradient(180deg, #ff5d4d, #e1302c); box-shadow: 0 5px 0 #a8211f; }
.btn.buy:hover { background: linear-gradient(180deg, #ff6b5c, #e8392f); transform: translateY(-2px); }
.btn.buy:active { transform: translateY(3px); box-shadow: 0 2px 0 #a8211f; }
.paybar { display: flex; gap: 12px; align-items: center; padding: 16px 20px; border-radius: 20px; margin-bottom: 22px; font-size: 16px; font-weight: 500; }
.paybar .ic { width: 22px; height: 22px; flex: none; }
.paybar.wait { background: #e8f1ff; color: #1f4fa8; }
.paybar.ok { background: #e4f8ec; color: #126b39; }
.paybar.off { background: var(--mist); color: var(--muted); }
.paybar a { color: inherit; font-weight: 700; }
.spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 3px solid rgba(31, 79, 168, .25); border-top-color: #1f4fa8; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.try-stage { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; background: radial-gradient(ellipse 60% 22% at 50% 88%, rgba(255, 255, 255, .95), transparent 70%), linear-gradient(180deg, #7cc6ff 0%, #bfe4ff 52%, #eef8ff 100%); box-shadow: var(--lift); }
.try-stage::before { content: ''; position: absolute; z-index: -1; width: 380px; height: 380px; top: -160px; inset-inline-end: -140px; border-radius: 50%; border: 42px solid rgba(255, 255, 255, .28); }
.try-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.stage-cap { position: absolute; inset-inline: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); padding: 10px 14px; border-radius: 18px; font-weight: 600; font-size: 15px; text-align: center; }
.stage-cap .ic { width: 17px; height: 17px; }
.fx { white-space: nowrap; }

/* ---------- the store ---------- */
.deal-card { position: relative; background: #fff; border-radius: 30px; padding: 22px 22px 24px; display: grid; gap: 10px; justify-items: center; text-align: center; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rar) 45%, white), 0 30px 60px rgba(45, 30, 110, .18); max-width: 440px; justify-self: center; width: 100%; }
.deal-off { position: absolute; top: -14px; inset-inline-start: -10px; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #e1302c; color: #fff; font: 900 22px/1 var(--lat); direction: ltr; box-shadow: 0 5px 0 #a8211f; rotate: -10deg; }
.deal-k { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; color: #e1302c; }
.deal-k .ic { width: 18px; height: 18px; }
.deal-pic { display: block; width: 100%; aspect-ratio: 1; max-width: 300px; border-radius: 22px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--rar) 25%, white) 100%); }
.deal-pic img { width: 100%; height: 100%; object-fit: cover; }
.deal-name { font-family: var(--heb); font-size: 26px; font-weight: 800; line-height: 1.15; }
.deal-row { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.deal-btn { margin-top: 4px; }
.shop { padding-block: clamp(30px, 4vw, 60px) clamp(70px, 9vw, 120px); }
.shop-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(18px, 2.4vw, 36px); align-items: start; }
.shop-side { position: sticky; top: 92px; display: grid; gap: 14px; }
.shop-side .try-stage { height: min(62vh, 560px); }
.ride-show { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 30px; z-index: 1; }
.pick-in { background: #fff; border-radius: 24px; padding: 18px 20px; display: grid; gap: 10px; box-shadow: var(--lift); border-top: 4px solid var(--rar); }
.pick-t { display: grid; gap: 6px; }
.pick-t b { font-family: var(--heb); font-size: 24px; line-height: 1.15; }
.pick-d { color: var(--muted); font-size: 15px; }
.pick-buy { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pick-buy .price { font-size: 22px; }
.deal-mini { font-size: 12px; font-weight: 800; color: #fff; background: #e1302c; padding: 3px 9px; border-radius: 999px; }
.shop-sec + .shop-sec { margin-top: clamp(40px, 5vw, 64px); }
.ss-head { margin-bottom: 18px; }
.ss-head h2 { font-family: var(--heb); font-size: clamp(30px, 3vw, 44px); line-height: 1.05; }
.ss-head p { color: var(--muted); margin-top: 4px; }
#shopTabs { margin-bottom: 18px; }
.setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.setcard { position: relative; overflow: hidden; border: 3px solid transparent; font: inherit; color: inherit; text-align: start; cursor: pointer; padding: 0; border-radius: 28px; background: #fff; box-shadow: var(--lift); display: grid; transition: transform .2s, border-color .2s; }
.setcard:hover { transform: translateY(-4px); }
.setcard.sel { border-color: #e1302c; }
.set-pic { display: block; aspect-ratio: 1; background: var(--tg); }
.set-pic img { width: 100%; height: 100%; object-fit: cover; }
.tone-green { --tg: linear-gradient(160deg, #d9fbe6, #8fe3b0); } .tone-blue { --tg: linear-gradient(160deg, #e6f2ff, #9fd0ff); }
.tone-rainbow { --tg: linear-gradient(160deg, #fff3b8, #ffc2d6 50%, #c2e7ff); } .tone-night { --tg: linear-gradient(160deg, #dfe6ff, #8fa4e8); }
.tone-dark { --tg: linear-gradient(160deg, #f1ecff, #b9a8e8); } .tone-pink { --tg: linear-gradient(160deg, #ffe6f1, #b9e3ff); }
.set-body { display: grid; gap: 8px; padding: 16px 18px 18px; }
.set-body b { font-family: var(--heb); font-size: 22px; line-height: 1.15; }
.set-pieces { display: flex; flex-wrap: wrap; gap: 5px; }
.set-pieces i { font-style: normal; font-size: 12.5px; color: var(--muted); background: var(--mist); padding: 3px 9px; border-radius: 999px; }
.set-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.worth { color: var(--ash); font-size: 13.5px; }
.ridegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.ridecard { border: 3px solid transparent; font: inherit; color: inherit; cursor: pointer; background: #fff; border-radius: 24px; padding: 12px 14px 16px; display: grid; gap: 7px; justify-items: start; text-align: start; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); transition: transform .2s, border-color .2s; }
.ridecard:hover { transform: translateY(-3px); }
.ridecard.sel { border-color: var(--rar); }
.rc-pic { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: radial-gradient(circle at 50% 58%, #fff 0, color-mix(in srgb, var(--rar) 22%, white) 100%); }
.rc-pic img { width: 100%; height: 100%; object-fit: contain; }
.ridecard b { font-family: var(--heb); font-size: 20px; }
.rc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
.scard { position: relative; border: 2px solid transparent; font: inherit; color: inherit; background: #fff; border-radius: 22px; padding: 10px 10px 14px; cursor: pointer; display: grid; gap: 7px; justify-items: center; align-content: start; text-align: center; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); transition: transform .2s, border-color .2s, box-shadow .2s; }
.scard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(45, 30, 110, .14); }
.scard.sel { border-color: var(--rar); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rar) 22%, transparent), 0 16px 30px rgba(45, 30, 110, .14); }
.sc-pic { display: block; width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--rar) 22%, white) 100%); }
.sc-pic img { width: 100%; height: 100%; object-fit: cover; }
.scard b { font-size: 15px; line-height: 1.3; }
.sc-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pick-t .sc-tags { justify-content: flex-start; }
.hot-tag { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 1; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff8a3d, #e1302c); padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 8px rgba(225, 48, 44, .3); }
/* the buy window */
.buy-panel { width: min(100%, 540px); }
.buy-top { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin: 8px 0 16px; }
.buy-pic { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 22px; overflow: hidden; background: var(--mist); }
.buy-pic img { width: 100%; height: 100%; object-fit: cover; }
.buy-pic.pass { background: linear-gradient(140deg, #ffb347, #ff6a3d 50%, #e8467a); color: #fff; }
.buy-pic.pass .ic { width: 54px; height: 54px; }
#buyTitle { font-family: var(--heb); font-size: 28px; line-height: 1.1; margin-bottom: 6px; }
.buy-what { color: var(--muted); font-size: 15px; }
.buy-sum { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--mist); margin-bottom: 18px; font-weight: 600; }
.buy-sum b { margin-inline-start: auto; font-size: 30px; font-weight: 900; }
.buy-sum s { margin-inline-start: auto; color: var(--ash); }
.buy-sum s + b { margin-inline-start: 0; }
.btn.paypal { width: 100%; height: 56px; font-size: 18px; color: #142c8e; background: #ffc439; box-shadow: 0 5px 0 #d9a21a; }
.btn.paypal:hover { background: #ffcd52; color: #142c8e; }
.btn.paypal:active { transform: translateY(3px); box-shadow: 0 2px 0 #d9a21a; }
.buy-note { display: flex; gap: 8px; align-items: flex-start; color: var(--ash); font-size: 13.5px; }
.buy-note .ic { width: 17px; height: 17px; flex: none; margin-top: 3px; color: #178a4a; }

/* ---------- the PokéPass ---------- */
.ph-stage { height: min(64vh, 580px); }
.pass-body { padding-block: clamp(30px, 4vw, 60px) clamp(70px, 9vw, 120px); }
.plans { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: clamp(14px, 1.8vw, 24px); align-items: stretch; margin-bottom: clamp(26px, 3vw, 40px); }
.plan { position: relative; background: #fff; border-radius: 30px; padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 12px; align-content: start; box-shadow: var(--lift); }
.plan.ult { color: #fff; background: linear-gradient(150deg, #ffb347 0%, #ff6a3d 45%, #e8467a 100%); box-shadow: 0 24px 50px rgba(232, 70, 122, .26); }
.plan.bundle { box-shadow: 0 0 0 3px #e5dbff, var(--lift); }
.plan-badge { position: absolute; top: -14px; inset-inline-start: 22px; display: inline-flex; gap: 6px; align-items: center; background: #ffd23f; color: #6b4b00; font-weight: 800; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 0 #d9a21a; }
.plan-badge .ic { width: 15px; height: 15px; }
.plan-k { display: inline-flex; gap: 8px; align-items: center; font-family: var(--heb); font-weight: 800; font-size: 22px; }
.plan-k .ic { width: 22px; height: 22px; }
.plan-p { font-family: var(--heb); font-weight: 900; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; display: flex; flex-direction: column; gap: 6px; }
.plan-p small { font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 14px; opacity: .8; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 15.5px; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li .ic { width: 18px; height: 18px; flex: none; margin-top: 3px; padding: 2px; border-radius: 50%; background: #22b866; color: #fff; stroke-width: 3.5; }
.plan.ult li .ic { background: #fff; color: #e8467a; }
.plan-s { margin-top: auto; padding-top: 6px; }
.plan-s .btn { width: 100%; }
.plan.ult .btn.buy { background: #fff; color: #d62b26; box-shadow: 0 5px 0 rgba(120, 20, 40, .35); }
.plan.ult .owned { color: #fff; }
.plan.free .plan-p { color: #178a4a; }
.plan.bundle .plan-k { color: #6c3fe0; }
.mypass { margin-bottom: clamp(30px, 4vw, 50px); }
.mp-card { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 26px; padding: 18px 24px; box-shadow: var(--lift); }
.mp-card.ult { box-shadow: 0 0 0 3px #ffd23f, var(--lift); }
.mp-card.out { justify-content: space-between; flex-wrap: wrap; color: var(--muted); font-weight: 500; }
.mp-card.out p { display: inline-flex; gap: 8px; align-items: center; }
.mp-card .ic { width: 20px; height: 20px; }
.mp-tier { width: 84px; height: 84px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; background: linear-gradient(160deg, #ff8a3d, #e8467a); box-shadow: 0 5px 0 #b02f5c; }
.mp-tier b { font: 900 34px/1 var(--lat); }
.mp-tier small { font-size: 12.5px; font-weight: 700; }
.mp-bar { flex: 1; min-width: 0; display: grid; gap: 10px; }
.mp-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.mp-t > span { font-weight: 500; color: var(--muted); }
.mp-t > b { display: inline-flex; align-items: center; }
.mp-t .ic { width: 18px; height: 18px; vertical-align: -3px; margin-inline-end: 6px; color: #e8467a; }
.mp-card .xpbar i { background: linear-gradient(270deg, #ffb347, #e8467a); }
.track-head { margin-bottom: 16px; align-items: end; }
.rw-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.rw-legend .lg { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 20px; font-size: 15px; color: var(--muted); }
.rw-legend .lg > .ic { width: 26px; height: 26px; flex: none; padding: 5px; border-radius: 50%; color: #fff; }
.rw-legend .lg b { display: block; color: var(--ink); font-size: 16.5px; }
.rw-legend .free { background: #e9f9ef; } .rw-legend .free > .ic { background: #22b866; }
.rw-legend .ult { background: #fff4d1; } .rw-legend .ult > .ic { background: linear-gradient(160deg, #ffb347, #e8467a); }
#rwTabs button { display: inline-flex; gap: 6px; align-items: center; }
#rwTabs .ic { width: 16px; height: 16px; }
.rwgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 14px; }
.rwc { position: relative; display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; background: #fff; border-radius: 24px; padding: 12px 12px 14px; box-shadow: 0 8px 22px rgba(45, 30, 110, .08); border: 2px solid transparent; }
.rwc.ult { border-color: #ffe08a; }
.rwc.free { border-color: #bfeccf; }
.rwc.cur { box-shadow: 0 0 0 4px #ffd23f, 0 12px 26px rgba(232, 70, 122, .18); }
.rwc-tier { justify-self: start; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--mist); padding: 3px 10px; border-radius: 999px; }
.rwc-tier b { color: var(--ink); font-weight: 900; }
.rwc-lock { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #ffd23f; box-shadow: 0 4px 10px rgba(29, 24, 56, .3); }
.rwc-lock .ic { width: 17px; height: 17px; }
.rwc-pic { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 18px; overflow: hidden; cursor: default; background: radial-gradient(circle at 50% 42%, #fff 0, color-mix(in srgb, var(--rar, #ffd23f) 22%, white) 100%); }
.rwc-pic[data-try] { cursor: pointer; }
.rwc-pic[data-try]:hover { box-shadow: inset 0 0 0 3px var(--rar); }
.rwc-pic img { width: 100%; height: 100%; object-fit: cover; }
.rwc.locked .rwc-pic img, .rwc.locked .rwc-pic .rw-ic { filter: saturate(.75); }
.rwc-pic .rw-item { width: 62%; height: 62%; object-fit: contain; image-rendering: pixelated; }
.rw-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #fff; }
.rw-ic .ic { width: 38px; height: 38px; }
.rw-ic.gold { background: linear-gradient(160deg, #6fdcff, #2f8cff); }
.rw-ic.silver { background: linear-gradient(160deg, #c9d3e6, #8592b0); }
.rw-ic:not(.gold):not(.silver) { background: var(--mist-2); color: var(--muted); }
.rwc-name { font-size: 15px; line-height: 1.3; min-height: 2.6em; display: grid; place-items: center; }
.rwc-tag { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.rwc-tag .ic { width: 15px; height: 15px; }
.rwc-tag.free { background: #22b866; color: #fff; }
.rwc-tag.ult { background: linear-gradient(135deg, #ffb347, #e8467a); color: #fff; }
.rwc-state { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.rwc-state .ic { width: 14px; height: 14px; flex: none; }
.rwc-state.got { color: #178a4a; }
.rwc-state.wait { color: #b5427a; }
.rwc-state.next { color: #2563d9; }
.mp-hook { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; padding: 14px 20px; border-radius: 22px; background: linear-gradient(135deg, #fff4d1, #ffe2ec); font-size: 15.5px; }
.mp-hook > .ic { width: 22px; height: 22px; color: #b5427a; flex: none; }
.mp-hook > span { flex: 1; min-width: 240px; }
.howto { margin-bottom: clamp(36px, 4vw, 56px); }
.pass-body .sec-head h2 { font-family: var(--heb); font-size: clamp(36px, 4.2vw, 64px); line-height: 1.03; letter-spacing: -.02em; }
.howto .sec-head { margin-bottom: 18px; }
.hsteps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.hstep { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 20px 22px; border-radius: 26px; background: var(--hb); }
.hstep > .ic { width: 30px; height: 30px; color: var(--hc); }
.hstep b { font-family: var(--heb); font-size: 21px; line-height: 1.2; }
.hstep p { color: #4a4570; font-size: 15.5px; }
.hs-n { position: absolute; top: 16px; inset-inline-end: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hc); color: #fff; font-weight: 900; font-size: 17px; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.hstep.s1 { --hb: #e8f1ff; --hc: #2f6fe8; } .hstep.s2 { --hb: #fff1e3; --hc: #e8650f; }
.hstep.s3 { --hb: #e4f8ec; --hc: #1a9a55; } .hstep.s4 { --hb: #f0e9ff; --hc: #6c3fe0; }
.howto .earn { margin-top: clamp(14px, 1.6vw, 20px); }
.earn { background: #fff; border-radius: 30px; padding: clamp(22px, 3vw, 40px); box-shadow: var(--lift); }
.earn h3 { font-family: var(--heb); font-size: clamp(26px, 2.4vw, 34px); }
.earn-sub { color: var(--muted); margin: 6px 0 18px; }
.earn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.earn-i { display: flex; align-items: center; gap: 12px; background: var(--mist); border-radius: 16px; padding: 12px 16px; font-weight: 500; }
.earn-i .ic { width: 22px; height: 22px; color: #e8467a; flex: none; }
.earn-i b { margin-inline-start: auto; color: #178a4a; font-weight: 900; font-size: 18px; }
/* the trainer card: the pass and the purchases */
.passchip { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 16px; border-radius: 18px; background: linear-gradient(135deg, #fff1e3, #ffe6ef); color: var(--ink); font-weight: 600; }
.passchip.ult { background: linear-gradient(135deg, #fff3b8, #ffd6a8); }
.passchip .ic { width: 20px; height: 20px; color: #e8467a; }
.passchip > .ic:last-child { margin-inline-start: auto; color: var(--muted); }
.hist { list-style: none; padding: 0; display: grid; gap: 8px; }
.hist li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hist li span:first-child { display: grid; }
.hist small { color: var(--ash); font-size: 13px; }
.hist .st { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--muted); }
.hist .st.paid { background: #e4f8ec; color: #126b39; }
.hist .st.refunded { background: #fff1ef; color: #b3261e; }

/* ---------- PokeWorld PRO ---------- */
.protag img { width: 14px; height: 14px; vertical-align: -3px; margin-inline-end: 3px; }
/* the PRO badge case (the badges: tools/make_pro_badges.mjs) */
.pro-case { margin: 10px 0 6px; padding: clamp(16px, 2.4vw, 26px); border-radius: 26px; background: radial-gradient(circle at 30% 0%, #3a2c66, #1b1433); box-shadow: inset 0 3px 14px rgba(0, 0, 0, .5), 0 14px 34px rgba(40, 20, 90, .18); }
.pro-case .pc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px) 10px; }
.pro-case .pc-slot { margin: 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
.pro-case .pc-slot figcaption { display: grid; gap: 1px; }
.pro-case .pc-slot img { width: clamp(58px, 8vw, 84px); height: auto; transition: transform .2s; }
.pro-case .pc-slot.got img:hover { transform: scale(1.08) rotate(-4deg); }
.pro-case .pc-slot b { color: #fff; font-size: 13.5px; font-weight: 900; }
.pro-case .pc-slot small { color: #b9b0dd; font-size: 12px; font-weight: 600; }
.pro-case .pc-slot:not(.got) b { color: #8a82b0; }
.pro-case.narrow .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pro-case.narrow .pc-slot img { width: 60px; }
@media (max-width: 640px) { .pro-case .pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pl-lead { max-width: 720px; color: var(--muted); font-weight: 500; margin: -6px 0 18px; }
.pl-me { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 600; }
.pl-me .ic { width: 18px; height: 18px; color: #e8a400; }
.protag { display: inline-block; margin-inline-start: 6px; font: 900 11px/1 var(--lat); padding: 3px 7px; border-radius: 999px; background: linear-gradient(90deg, #ffd23f, #ff9a1a); color: #4a2e00; vertical-align: 3px; }
.pro-hero { position: relative; overflow: hidden; padding-block: 120px clamp(40px, 5vw, 70px); background: radial-gradient(circle at 85% 15%, #fff0b3 0, transparent 40%), radial-gradient(circle at 15% 85%, #ffe0c2 0, transparent 40%), linear-gradient(180deg, #fff9e6, #fff); }
.pro-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(20px, 3vw, 50px); align-items: center; }
.pro-hero h1.wow { font-family: var(--lat); font-size: clamp(90px, 13vw, 210px); line-height: 1; letter-spacing: .02em; }
.pro-buy { margin-top: 22px; display: grid; gap: 14px; justify-items: start; }
.pro-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pro-price b { font-size: clamp(40px, 4vw, 56px); font-weight: 900; color: var(--ink); }
.pro-price span { color: var(--muted); font-weight: 600; }
.play.pro-join { border: 0; cursor: pointer; }
.pro-on { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 20px; background: #fff3c4; color: #5a3a00; font-weight: 500; }
.pro-on .ic { width: 22px; height: 22px; color: #e8a400; flex: none; }
.btn.pro-once { gap: 8px; }
.pro-once-note { margin: -6px 0 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.plan-once { width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.pro-mine { margin-bottom: clamp(26px, 3vw, 40px); }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
.perk { display: grid; gap: 8px; align-content: start; padding: 22px 20px; border-radius: 26px; background: var(--pb); }
.perk > b { font-family: var(--heb); font-size: 21px; line-height: 1.2; }
.perk p { color: #4a4570; font-size: 15.5px; }
.pk-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--pc); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.pk-ic .ic { width: 28px; height: 28px; }
.pk-pic { display: block; width: 96px; height: 96px; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 42%, #fff 0, #ffe9a8 100%); }
.pk-pic img { width: 100%; height: 100%; object-fit: cover; }
.perk.gold { --pb: #fff5d1; --pc: linear-gradient(160deg, #ffd23f, #ff9a1a); } .perk.sunset { --pb: #fff0e6; --pc: linear-gradient(160deg, #ff8a3d, #e8467a); }
.perk.blue { --pb: #e8f1ff; --pc: linear-gradient(160deg, #4aa8ff, #2f6fe8); } .perk.violet { --pb: #f0e9ff; --pc: linear-gradient(160deg, #a77bff, #6c3fe0); }
.perk.green { --pb: #e4f8ec; --pc: linear-gradient(160deg, #3be08a, #1a9a55); }
.fair { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px 22px; border-radius: 22px; background: #e4f8ec; color: #1d4f33; }
.fair > .ic { width: 28px; height: 28px; color: #1a9a55; flex: none; }
/* PRO, the one in the middle: mustard, lifted, everything in one subscription */
.plan.pro { color: #3b2600; background: linear-gradient(150deg, #f7cf45 0%, #e3ac12 48%, #c98d00 100%); box-shadow: 0 34px 70px rgba(201, 141, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .45); transform: translateY(-12px); }
.plan.pro .plan-badge { background: #3b2600; color: #ffd84a; }
.plan.pro .plan-k { color: #3b2600; }
.plan-h { font-family: var(--heb); font-weight: 900; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; margin-top: -4px; }
.plan.pro .plan-p { color: #2a1b00; }
.plan-v { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 16px; background: rgba(59, 38, 0, .12); font-size: 15px; font-weight: 500; }
.plan-v .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.plan.pro li .ic { background: #3b2600; color: #ffd84a; }
.plan.pro li.ult-li { color: #3b2600; }
.plan.pro .btn.buy { background: #3b2600; color: #ffd84a; box-shadow: 0 5px 0 rgba(30, 18, 0, .45); }
.plan.pro .owned { color: #3b2600; }
.plan-more { display: block; text-align: center; margin-top: 10px; color: #3b2600; font-weight: 700; font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; }
.probar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 22px; border-radius: 20px; background: linear-gradient(135deg, #fff7d6, #ffe7a8); color: #4a2e00; text-decoration: none; font-weight: 500; box-shadow: 0 0 0 2px #ffd56a; }
.probar > .ic { width: 22px; height: 22px; color: #e8a400; flex: none; }
.probar .go { margin-inline-start: auto; display: inline-flex; gap: 4px; align-items: center; font-weight: 800; }
.probar .go .ic { width: 16px; height: 16px; }
.probar.on { background: #fff3c4; }
.passchip.pro { background: linear-gradient(135deg, #fff3b8, #ffd98a); }
.passchip.join { background: #fff9e6; box-shadow: inset 0 0 0 2px #ffe08a; }
.passchip.pro > .ic:first-child, .passchip.join > .ic:first-child { color: #e8a400; }
.mp-card { flex-wrap: wrap; }
.mp-pro { flex-basis: 100%; display: flex; gap: 8px; align-items: center; color: #8a5a00; font-size: 15px; padding-inline-start: 104px; }
.mp-pro .ic { width: 18px; height: 18px; flex: none; }
.buy-pic.pro { background: linear-gradient(140deg, #ffe066, #ffb21e 50%, #ff8a1a); color: #fff; }
.buy-pic.pro .ic { width: 54px; height: 54px; }

/* ---------- motion and small screens ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .dot, .mi, .wow, .rar.rainbow { animation: none; }
  .feat-pic img { animation: none; }
}
@media (max-width: 1100px) {
  .bar-nav { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 900px) {
  .feat, .raids, .contact-grid, .tc, .wd, .shop-hero-in, .pass-hero-in, .pro-hero-in, .shop-in, .promo-in, .plans { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
  .shop-side { order: -1; position: relative; top: 0; }
  .shop-side .try-stage, .ph-stage { height: 400px; }
  .hsteps { grid-template-columns: 1fr 1fr; }
  .plan.pro { transform: none; order: -1; }
  .tc-stage { min-height: 440px; order: -1; }
  .wd-stage { order: 0; position: relative; top: 0; height: 420px; }
  .ctabs-wrap { top: 72px; }
  .feat:nth-child(even) .feat-pic { order: 0; }
  .news, .steps { grid-template-columns: 1fr; }
  .board { columns: 1; }
  .podium { gap: 10px; }
  .pod { padding: 16px 10px 18px; border-radius: 22px; }
  .pod.p1 { padding-block: 26px 24px; }
  .pod .spr { width: 80px; height: 80px; }
  .pod.p1 .spr { width: 96px; height: 96px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .bar-in { gap: 10px; height: 64px; }
  .bar-logo img { height: 34px; }
  .drawer { inset-block-start: 64px; }
  .who .nm-txt, .bar .play.compact .lbl-t { display: none; }
  .bar .play.compact { padding-inline: 5px; }
  .now { margin-top: -40px; }
  .now-in { grid-template-columns: 1fr 1fr; }
  .ncard { min-height: 132px; padding: 16px 16px 62px; border-radius: 22px; }
  .ncard .nv { font-size: 22px; }
  .ncard .nv, .ncard .ns { max-width: none; }
  .ncard .nl, .ncard .ns { font-size: 13.5px; }
  .ncard .spr { width: 56px; height: 56px; bottom: 6px; }
  .vid-ctl { top: 80px; bottom: auto; }
  .ncard .nicon .ic { width: 96px; height: 96px; }
  .hero .play, .start-cta .play { --h: 68px; --b: 50px; width: 100%; justify-content: space-between; }
  .hero-cta .btn, .start-cta .btn { width: 100%; height: 56px; }
  .hero-in { padding-block-end: 84px; }
  .pod .nm { font-size: 16px; }
  .pod .v { font-size: 22px; }
  .pod .v small { display: block; margin: 4px 0 0; }
  .board li { grid-template-columns: 2.6ch 36px 1fr auto; gap: 10px; }
  .board .mi { width: 36px; height: 36px; }
  .bar .lbl { display: none; }
  .bar #who .btn { width: 44px; height: 44px; padding: 0; }
  .hero::after { background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, .9) 40%, rgba(255, 255, 255, .45) 68%, rgba(255, 255, 255, .1) 100%); }
  .hero-cta { width: 100%; }
  .foot-grid { grid-template-columns: 1fr; }
  .sched { padding: 4px 16px; }
  .sched li { grid-template-columns: auto 1fr; }
  .sched .s { grid-column: 2; text-align: start; }
  .place { flex-basis: 86vw; aspect-ratio: 4 / 5; }
  .acct { padding-top: 84px; }
  .shop-hero, .pass-hero { padding-top: 96px; }
  .pcard { min-height: 260px; border-radius: 28px; }
  .pcard .pc-mon { width: 120px; height: 120px; opacity: .9; }
  .sgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .rw-legend { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
  .pro-hero { padding-top: 96px; }
  .hsteps { grid-template-columns: 1fr; }
  .rwgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .mp-card { padding: 14px 16px; gap: 14px; }
  .mp-tier { width: 66px; height: 66px; }
  .mp-tier b { font-size: 26px; }
  .buy-top { grid-template-columns: 84px 1fr; }
  .buy-pic { width: 84px; height: 84px; }
  .tc-info { border-radius: 26px; }
  .tc-nums { grid-template-columns: 1fr 1fr; }
  .tc-level { gap: 14px; }
  .lvl-badge { width: 78px; height: 78px; }
  .lvl-badge b { font-size: 32px; }
  .tc-actions .play { width: 100%; justify-content: space-between; }
  .tc-stage { min-height: 380px; border-radius: 26px; }
  .ctabs-wrap { top: 64px; margin-inline: calc(-1 * var(--pad)); }
  .ctabs { border-radius: 0; }
  .ctabs button { padding: 11px 14px; font-size: 15px; }
  .mon-panel { padding-bottom: 28px; }
  .mp-top { grid-template-columns: 110px 1fr; gap: 14px; }
  .mp-art .spr { width: 110px; height: 110px; }
  .srow { grid-template-columns: 1fr auto auto; grid-template-areas: 'n v i' 'b b b' 'e e x'; gap: 8px 10px; }
  .srow .sn { grid-area: n; } .srow .sv { grid-area: v; } .srow .iv { grid-area: i; } .srow .sbar { grid-area: b; } .srow .ev { grid-area: e; } .srow .bonus { grid-area: x; }
  .mp-moves, .mc-moves { grid-template-columns: 1fr; }
  .bgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .bt-art { height: 92px; }
  .bt-art .spr { width: 84px; height: 84px; }
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .box-count { margin-inline-start: 0; width: 100%; }
}
/* PRO: "PokéPass Ultimate included!" — the thing to see first, in the PokéPass's sunset */
.ult-in { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 12px 22px; border-radius: 999px; background: linear-gradient(135deg, #ff8a3d, #e8467a);
  color: #fff; font: 800 clamp(18px, 1.6vw, 23px)/1 var(--heb); box-shadow: 0 12px 26px rgba(232, 70, 122, .3); }
.ult-in .ic { width: 1.15em; height: 1.15em; }
.perk.ultin { --pb: linear-gradient(160deg, #ff8a3d, #e8467a); color: #fff; box-shadow: 0 14px 30px rgba(232, 70, 122, .28); }
.perk.ultin p { color: rgba(255, 255, 255, .92); }
.perk.ultin .pk-ic { background: #fff; color: #e8467a; }
.plan li.ult-li { color: #c4451f; }
/* tickets to the staff, on the trainer card */
.tk-card { background: #fff; border-radius: 28px; padding: clamp(20px, 2.4vw, 32px); box-shadow: var(--lift); display: grid; gap: 14px; }
.tk-card > .chipbtn { justify-self: start; }
.tk-card h3 { font-size: 22px; }
.tk-top, .tk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tk-head small { color: var(--muted); font-size: 14px; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-radius: 18px; background: var(--mist); text-align: start; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s; }
.tk-row:hover { background: var(--mist-2); }
.tk-row.unread { background: #fff3ea; box-shadow: inset 0 0 0 2px #ffb98a; }
.tk-row > span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.tk-row b { font-weight: 700; }
.tk-row small { color: var(--muted); font-size: 14px; }
.tk-dot { width: 10px; height: 10px; border-radius: 50%; background: #ee3b32; }
.tk-chip { flex: none; padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 13px; background: #ffe3d1; color: #b4371a; }
.tk-chip.answered { background: #dcf5e6; color: #14804a; }
.tk-chip.closed { background: #ececf2; color: #6b6890; }
.tk-msgs { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 16px; border-radius: 20px; background: var(--mist); }
.tk-msg { max-width: 78%; padding: 10px 14px; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(45, 30, 110, .08); }
.tk-msg.me { justify-self: start; background: #e9f1ff; border-start-start-radius: 4px; }
.tk-msg.them { justify-self: end; border-start-end-radius: 4px; }
.tk-who { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: var(--muted); margin-bottom: 4px; }
.tk-msg.them .tk-who { color: #1f4fa8; }
.tk-who .ic { width: 14px; height: 14px; }
.tk-who small { font-weight: 500; }
.tk-text { white-space: pre-wrap; word-break: break-word; }
.tk-note { justify-self: center; padding: 4px 12px; border-radius: 999px; background: rgba(29, 24, 56, .06); color: var(--muted); font-size: 13.5px; }
.tk-reply { display: flex; gap: 10px; align-items: flex-end; }
.tk-reply textarea, .tk-card .fld textarea, .tk-card .fld input { width: 100%; box-sizing: border-box; border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; font: inherit; color: var(--ink); background: #fff; resize: vertical; }
.tk-reply textarea:focus, .tk-card .fld textarea:focus, .tk-card .fld input:focus { outline: none; border-color: #8b5cf6; }
.tk-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-solved { justify-self: start; }
.tk-err { color: #c4302b; font-weight: 600; }
.tk-card .fld { display: grid; gap: 6px; }
.tk-card .fld > span { font-weight: 700; font-size: 15px; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
[data-tk="send"] .ic, [data-tk="reply"] .ic { transform: scaleX(-1); } /* (RTL: the arrow points the way the text goes) */

/* ------------------------------------------------------------------ the news (/news/ and its stories)
   A news front: the masthead on a heavy ink rule, the lead story big beside its photo, three
   more, then the rest by day. A story: its section in its own colour, a big headline, the
   photo across the page, the text in a reading column and "בקצרה" beside it. */
.s-homes { --sec: #c4451f; }
.s-farm { --sec: #23773a; }
.s-battle { --sec: #c42b4b; }
.s-community { --sec: #6a4fd6; }
.s-world { --sec: #1b6f94; }
.s-mons { --sec: #b5305f; }
.s-style { --sec: #9a5414; }
.s-launch { --sec: #c4451f; }
.nz-sec { display: inline-flex; align-items: center; gap: 8px; color: var(--sec, var(--ember)); font: 800 14.5px/1.2 var(--heb); }
.nz-sec::before { content: ''; width: 18px; height: 3px; border-radius: 3px; background: currentColor; flex: none; }
.nz-meta { color: var(--ash); font-size: 14px; font-weight: 600; }
.nz-pic { display: block; overflow: hidden; border-radius: 20px; aspect-ratio: 16 / 9; background: var(--mist-2); }
.nz-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.nz-page a:hover .nz-pic img { transform: scale(1.035); }
.nz-lead a, .nz-card a, .nz-row a { text-decoration: none; color: inherit; }
.nz-lead a:hover h2, .nz-card a:hover h3, .nz-row a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--sec); }
.nz-txt { display: grid; gap: 10px; align-content: start; }

/* the front page */
.nz-mast { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; margin-bottom: clamp(30px, 4vw, 54px); border-bottom: 5px solid var(--ink); }
.nz-mast .kicker { margin-bottom: 6px; }
.nz-mast h1 { font-family: var(--heb); font-size: clamp(66px, 10vw, 156px); line-height: .88; letter-spacing: -.045em; }
.nz-mast-side { max-width: 400px; color: var(--muted); font-size: 17px; line-height: 1.5; }
.nz-mast-side span { display: block; margin-top: 6px; color: var(--ink); font-size: 15px; font-weight: 700; }
.nz-lead { margin-bottom: clamp(48px, 6vw, 84px); }
.nz-lead a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3.6vw, 60px); align-items: center; }
.nz-lead .nz-pic { border-radius: var(--r); box-shadow: var(--lift); }
.nz-lead h2 { font-family: var(--heb); font-size: clamp(34px, 3.8vw, 62px); line-height: 1.04; letter-spacing: -.028em; margin-block: 4px 6px; }
.nz-lead .nz-dek { color: var(--muted); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.55; }
.nz-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); }
.nz-card a { display: grid; gap: 16px; align-content: start; }
.nz-card h3 { font-family: var(--heb); font-size: clamp(22px, 1.75vw, 27px); line-height: 1.2; }
.nz-card p, .nz-row p { color: var(--muted); font-size: 16.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nz-rule { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; font-family: var(--heb); font-size: clamp(26px, 2.4vw, 34px); }
.nz-rule::after { content: ''; flex: 1; height: 2px; background: var(--ink); opacity: .14; }
.nz-feed { margin-top: clamp(72px, 9vw, 120px); }
.nz-group { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px; padding-block: 30px; border-bottom: 1px solid var(--line); }
.nz-day { position: sticky; top: 100px; align-self: start; display: grid; gap: 2px; }
.nz-day b { font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -.02em; }
.nz-day span { font: 700 17px/1.3 var(--heb); color: var(--muted); }
.nz-rows { display: grid; gap: 30px; }
.nz-row a { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: center; }
.nz-row h3 { font-family: var(--heb); font-size: clamp(22px, 1.9vw, 29px); line-height: 1.2; }
.nz-all { display: flex; align-items: center; gap: 10px; margin-top: 34px; font-weight: 600; color: var(--muted); }
.nz-all .ic { width: 20px; height: 20px; color: var(--ember); flex: none; }
.nz-all a { color: var(--link); font-weight: 700; }

/* a story */
.nz-head { max-width: 1080px; margin-bottom: clamp(26px, 3.4vw, 44px); }
.nz-crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 15px; font-weight: 700; color: var(--ash); }
.nz-crumb > a { color: var(--ink); text-decoration: none; }
.nz-crumb > a:hover { text-decoration: underline; }
.nz-head h1 { font-family: var(--heb); font-size: clamp(38px, 5.2vw, 82px); line-height: 1.03; letter-spacing: -.032em; }
.nz-head .nz-dek { margin-top: 20px; max-width: 880px; color: var(--muted); font-size: clamp(19px, 1.55vw, 24px); line-height: 1.5; font-weight: 500; }
.nz-by { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.nz-by img { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(45, 30, 110, .14); }
.nz-by b { display: block; font-size: 16px; }
.nz-by span { color: var(--ash); font-size: 14.5px; font-weight: 600; }
.nz-share { display: flex; gap: 8px; margin-inline-start: auto; }
.nz-share .icon-btn:hover { background: var(--ink); border-color: var(--ink); }
.nz-share .icon-btn.done { background: var(--sea); border-color: var(--sea); color: #fff; }
.nz-hero { margin: 0 0 clamp(40px, 5vw, 70px); }
.nz-hero img { width: 100%; height: auto; max-height: 84svh; object-fit: cover; border-radius: var(--r); box-shadow: var(--lift); }
.nz-hero figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 15.5px; }
.nz-credit { display: inline-flex; align-items: center; gap: 6px; color: var(--ash); font-size: 13.5px; font-weight: 600; }
.nz-credit .ic { width: 15px; height: 15px; }
.nz-grid { display: grid; grid-template-columns: minmax(0, 740px) minmax(270px, 340px); justify-content: space-between; gap: clamp(36px, 6vw, 110px); align-items: start; }
.nz-body { font-size: 19.5px; line-height: 1.8; color: #2b2650; }
.nz-body::after { content: ''; display: block; clear: both; }
.nz-body > * + * { margin-top: 22px; }
.nz-body > p:first-of-type { color: var(--ink); font-size: clamp(20px, 1.6vw, 22.5px); line-height: 1.7; font-weight: 500; }
/* (a story changed since: the note at the top, like a news site's "עדכון") */
.nz-upd { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; border-inline-start: 4px solid var(--sec); background: var(--mist); color: var(--ink); font-size: 16.5px; line-height: 1.55; }
.nz-upd b { color: var(--sec); font: 800 14px/1.3 var(--heb); }
.nz-body h2 { clear: both; margin-top: 50px; font-family: var(--heb); font-size: clamp(27px, 2.3vw, 34px); line-height: 1.2; color: var(--ink); }
.nz-body ul { display: grid; gap: 8px; padding-inline-start: 24px; }
.nz-body li::marker { color: var(--sec); }
.nz-fig { margin: 36px 0 0; }
.nz-body > .nz-fig:not(.side) + * { margin-top: 36px; }
.nz-fig img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 14px 40px rgba(45, 30, 110, .13); }
.nz-fig figcaption { margin-top: 12px; padding-inline-start: 12px; border-inline-start: 3px solid var(--sec); color: var(--muted); font-size: 15px; line-height: 1.5; }
.nz-fig:not(.side), .nz-gal { clear: both; }
.nz-fig.side { float: left; width: min(40%, 290px); margin: 8px 30px 14px 0; }
.nz-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; margin-top: 36px; }
.nz-gal .nz-fig { margin: 0; }
.nz-tip { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 18px; background: var(--mist); color: var(--ink); font-size: 17.5px; line-height: 1.6; font-weight: 600; }
.nz-tip .ic { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--sec); }
.nz-log { clear: both; display: flex; align-items: center; gap: 10px; margin-top: 46px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.nz-log .ic { width: 20px; height: 20px; color: var(--sec); flex: none; }
.nz-log a { color: var(--link); }
.nz-aside { position: sticky; top: 100px; display: grid; gap: 24px; justify-items: start; }
.nz-facts { width: 100%; padding: 22px 26px 8px; border-radius: 24px; border-top: 5px solid var(--sec); background: #fff; box-shadow: var(--lift); }
.nz-facts h2 { margin-bottom: 6px; font-family: var(--heb); font-size: 22px; }
.nz-facts dl > div { padding-block: 12px; border-top: 1px solid var(--line); }
.nz-facts dl > div:first-child { border-top: 0; }
.nz-facts dt { color: var(--ash); font-size: 13.5px; font-weight: 700; }
.nz-facts dd { color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.45; }
.nz-aside .play { --h: 66px; --b: 48px; font-size: 18px; }
.nz-more { margin-top: clamp(76px, 9vw, 124px); }
.nz-more .nz-rule { margin-bottom: 28px; }
.post > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post > a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--lava); }
.post > a .pb { flex: 1; }

@media (max-width: 1100px) {
  .nz-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 48px; }
}
@media (max-width: 900px) {
  .nz-lead a { grid-template-columns: 1fr; }
  .nz-top { grid-template-columns: 1fr; gap: 26px; }
  .nz-card a, .nz-row a { grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); gap: 18px; align-items: start; }
  .nz-group { grid-template-columns: 1fr; gap: 18px; }
  .nz-day { position: static; display: flex; align-items: baseline; gap: 10px; }
  .nz-grid { grid-template-columns: 1fr; }
  .nz-aside { position: static; order: -1; }
  .nz-aside .play { display: none; }
}
@media (max-width: 640px) {
  .nz-mast-side { font-size: 16px; }
  .nz-card a, .nz-row a { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
  .nz-card h3, .nz-row h3 { font-size: 18.5px; }
  .nz-card p, .nz-row p { display: none; }
  .nz-pic { border-radius: 14px; }
  .nz-lead .nz-pic { border-radius: 20px; }
  .nz-body { font-size: 18px; line-height: 1.75; }
  .nz-fig.side { float: none; width: auto; max-width: 340px; margin: 30px auto 0; }
  .nz-gal { grid-template-columns: 1fr; }
  .nz-hero { margin-inline: calc(var(--pad) * -1); }
  .nz-hero img { border-radius: 0; box-shadow: none; }
  .nz-hero figcaption { padding-inline: var(--pad); }
  .nz-by { flex-wrap: wrap; }
}