/* Evolution: one held stage. The world and the things in it are WebGL (one canvas); over it, the
   words, set like a printed card's: Instrument Serif for everything that speaks (titles, years,
   narration), Instrument Sans for labels, small and spaced. evolution.js fades each part's layer
   and sets --ink (light on dark worlds, dark on light ones). Lines rise into place from a mask. */
.evolution_wrap {
  --ink: #fbf7ee; --ink-2: rgba(251, 247, 238, .72); --rule: rgba(251, 247, 238, .28);
  --ev-serif: 'PK Serif', 'Instrument Serif', Georgia, serif;
  --ev-sans: 'PK Sans', 'Instrument Sans', system-ui, sans-serif;
  --ev-gutter: clamp(18px, 2.6vw, 40px);
  --ev-ease: cubic-bezier(.2, .7, .1, 1);
  --ev-gold: #f2d38a;
  position: relative; color: var(--ink); font-family: var(--ev-sans);
}
.evolution_wrap .evolution_contain { position: relative; height: 100vh; height: 100svh; }   /* one screen until the module lays the journey out: nothing to scroll behind the loader */
.evolution_wrap .evolution_stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; background: #12100c; color: var(--ink); user-select: none; -webkit-user-select: none; }
.evolution_wrap .evolution_gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.evolution_wrap button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.evolution_wrap a { color: inherit; }
.evolution_wrap .evolution_stage[data-hot="1"] .evolution_gl { cursor: pointer; }
.evolution_wrap .evolution_stage[data-hot="2"] .evolution_gl { cursor: grab; }

/* behind the words: a soft shade where they sit, dark under light ink, pale under dark ink */
.evolution_wrap .evolution_scrim { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: var(--scrim, 0); transition: opacity .8s;
  background: radial-gradient(62% 58% at var(--scrim-x, 80%) var(--scrim-y, 78%), var(--scrim-c, rgba(8, 6, 3, .6)), transparent 72%), linear-gradient(0deg, var(--scrim-c, rgba(8, 6, 3, .55)), transparent 40%), linear-gradient(180deg, rgba(8, 6, 3, .5), transparent 24%), linear-gradient(90deg, rgba(8, 6, 3, calc(.62 * var(--index-o, 0))), transparent 24%); }
.evolution_wrap .evolution_flash { position: absolute; z-index: 6; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #fffdf4, #fff3d4 60%, #ffe8b0); opacity: var(--flash, 0); }

/* shared type */
.evolution_wrap .evolution_eyebrow, .evolution_wrap .evolution_hint, .evolution_wrap .evolution_chip, .evolution_wrap .evolution_brand_sub, .evolution_wrap .evolution_specs dt,
.evolution_wrap .evolution_cue, .evolution_wrap .evolution_play, .evolution_wrap .evolution_source, .evolution_wrap .evolution_dex_seen, .evolution_wrap .evolution_index {
  font-family: var(--ev-sans); font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin: 0; line-height: 1.5;
}
.evolution_wrap .evolution_eyebrow { display: flex; gap: 18px; color: var(--ink); }
.evolution_wrap .evolution_head { margin: 0; font-family: var(--ev-serif); font-weight: 400; font-size: clamp(40px, 4.8vw, 86px); line-height: .98; letter-spacing: -.015em; }
.evolution_wrap .evolution_head.is-center { text-align: center; }
.evolution_wrap .evolution_body { margin: 0; max-width: 34ch; font-family: var(--ev-serif); font-size: clamp(19px, 1.55vw, 26px); line-height: 1.28; color: var(--ink-2); }
.evolution_wrap .evolution_body.is-center { margin: 0 auto; text-align: center; }
.evolution_wrap .evolution_hint, .evolution_wrap .evolution_play { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink-2); }
.evolution_wrap .evolution_key { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--rule); font-size: 11px; letter-spacing: .04em; color: var(--ink); }
.evolution_wrap .evolution_play .evolution_key { margin-left: 8px; }
.evolution_wrap .evolution_play .evolution_key:first-child { margin-left: 0; }
.evolution_wrap .evolution_specs { margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 0 28px; justify-content: start; }
.evolution_wrap .evolution_specs.is-tight { grid-template-columns: repeat(2, auto); }
.evolution_wrap .evolution_specs div { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rule); }
.evolution_wrap .evolution_specs dt { color: var(--ink-2); font-size: 10px; }
.evolution_wrap .evolution_specs dd { margin: 0; font-family: var(--ev-serif); font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* lines rise into place out of a mask (the script splits them into words, .is-in shows them) */
.evolution_wrap .evolution_w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.evolution_wrap .evolution_w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ev-ease); transition-delay: calc(var(--i, 0) * 28ms); }
.evolution_wrap .is-in .evolution_w > span { transform: none; }

/* the top */
.evolution_wrap .evolution_top { position: absolute; z-index: 8; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--ev-gutter); pointer-events: none; }
.evolution_wrap .evolution_top > * { pointer-events: auto; }
.evolution_wrap .evolution_brand { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.evolution_wrap .evolution_brand_name { font-family: var(--ev-serif); font-weight: 400; font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.evolution_wrap .evolution_brand_sub { color: var(--ink-2); font-size: 10px; }
.evolution_wrap .evolution_controls { display: flex; gap: 8px; }
.evolution_wrap .evolution_chip {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 15px; border-radius: 99px; text-decoration: none; font-size: 10px;
  background: var(--glass, rgba(18, 14, 10, .3)); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--rule); transition: background .3s;
}
.evolution_wrap .evolution_chip:hover { filter: brightness(1.1); }
.evolution_wrap .evolution_chip.is-hire { background: #fbf7ee; color: #17120b; box-shadow: none; }
.evolution_wrap .evolution_chip_bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.evolution_wrap .evolution_chip_bars i { width: 2px; height: 30%; background: currentColor; transition: height .3s; }
.evolution_wrap .evolution_chip[aria-pressed="true"] .evolution_chip_bars i { animation: evolution-bars 1s ease-in-out infinite; }
.evolution_wrap .evolution_chip[aria-pressed="true"] .evolution_chip_bars i:nth-child(2) { animation-delay: -.3s; }
.evolution_wrap .evolution_chip[aria-pressed="true"] .evolution_chip_bars i:nth-child(3) { animation-delay: -.6s; }
@keyframes evolution-bars { 50% { height: 100%; } }

/* the index of the thirty years, down the left edge */
.evolution_wrap .evolution_index { position: absolute; z-index: 7; left: var(--ev-gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; font-size: 10px; opacity: var(--index-o, 0); transition: opacity .6s; }
.evolution_wrap .evolution_index a { display: flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--ink-2); transition: color .3s; }
.evolution_wrap .evolution_index a::before { content: ''; width: 10px; height: 1px; background: currentColor; transition: width .5s var(--ev-ease); }
.evolution_wrap .evolution_index a:hover { color: var(--ink); }
.evolution_wrap .evolution_index a.is-here { color: var(--ink); }
.evolution_wrap .evolution_index a.is-here::before { width: 30px; background: var(--ev-gold); }

/* layers */
.evolution_wrap .evolution_layer { position: absolute; z-index: 4; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }

/* the prologue: one line at a time, in the middle, then the title */
.evolution_wrap .evolution_prologue { display: grid; place-items: center; text-align: center; padding: 0 var(--ev-gutter); }
.evolution_wrap .evolution_line { grid-area: 1 / 1; margin: 0; max-width: 24ch; font-family: var(--ev-serif); font-size: clamp(28px, 3vw, 52px); line-height: 1.14; text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 30px rgba(0, 0, 0, .5); }
.evolution_wrap .evolution_title { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.evolution_wrap .evolution_title_word { margin: 0; font-family: var(--ev-serif); font-size: clamp(88px, 15vw, 270px); line-height: .82; letter-spacing: -.035em; text-shadow: 0 4px 60px rgba(0, 0, 0, .3); }
.evolution_wrap .evolution_title_sub { margin: 0; font-family: var(--ev-serif); font-size: clamp(19px, 1.6vw, 27px); color: var(--ink-2); }
/* a close halo under every HUD line, so a lamp post or a tree crossing behind it never breaks a letter */
.evolution_wrap .evolution_layer, .evolution_wrap .evolution_top, .evolution_wrap .evolution_index { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 22px rgba(0, 0, 0, .35); }
.evolution_wrap .evolution_cue { position: absolute; left: 0; right: 0; bottom: var(--ev-gutter); display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-2); }
.evolution_wrap .evolution_cue_line { width: 1px; height: 44px; background: linear-gradient(var(--ink), transparent); transform-origin: top; }
.evolution_wrap .evolution_stage[data-part="prologue"] .evolution_cue_line { animation: evolution-cue 2.2s var(--ev-ease) infinite; }
@keyframes evolution-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* the link cable: words at the bottom left, the Game Boys above them */
.evolution_wrap .evolution_link, .evolution_wrap .evolution_era { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding: var(--ev-gutter) var(--ev-gutter) calc(var(--ev-gutter) * 1.4) calc(var(--ev-gutter) * 4); }
.evolution_wrap .evolution_link .evolution_head { max-width: 12ch; }
.evolution_wrap .evolution_pika {
  position: absolute; z-index: 6; left: 0; top: 0; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  transform: translate(var(--pkx, -999px), var(--pky, -999px)); opacity: var(--pk-o, 0); pointer-events: var(--pk-pe, none); display: grid; place-items: center; touch-action: none; cursor: grab;
  background: radial-gradient(closest-side, rgba(255, 252, 230, .95), rgba(255, 240, 190, .45) 60%, rgba(255, 240, 190, 0));
}
.evolution_wrap .evolution_pika::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .8); }
.evolution_wrap .evolution_stage[data-part="link"] .evolution_pika::after { animation: evolution-ping 1.8s ease-out infinite; }
@keyframes evolution-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.evolution_wrap .evolution_pika_img { width: 56px; height: 56px; image-rendering: pixelated; }

/* the choice */
.evolution_wrap .evolution_choose { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 16px; padding-bottom: calc(var(--ev-gutter) * 1.2); }
.evolution_wrap .evolution_picks { display: flex; gap: 14px; pointer-events: auto; }
.evolution_wrap .evolution_pick {
  position: relative; width: clamp(130px, 11vw, 170px); padding: 10px 10px 14px; border-radius: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: var(--glass, rgba(20, 16, 10, .32)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 0 0 1px var(--rule);
  transition: transform .5s var(--ev-ease), box-shadow .4s, background .4s;
}
.evolution_wrap .evolution_pick:hover { transform: translateY(-4px); }
.evolution_wrap .evolution_pick[aria-checked="true"] { transform: translateY(-10px); background: rgba(251, 247, 238, .16); box-shadow: inset 0 0 0 1px var(--ev-gold), 0 20px 50px -20px rgba(0, 0, 0, .6); }
.evolution_wrap .evolution_pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.evolution_wrap .evolution_pick_art { aspect-ratio: 1; border-radius: 8px; background-repeat: no-repeat; image-rendering: pixelated; background-color: rgba(255, 255, 255, .88); }
.evolution_wrap .evolution_pick_name { font-family: var(--ev-serif); font-size: 21px; line-height: 1; }
.evolution_wrap .evolution_pick_no { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* an era: the year, enormous; the games; the line; the specs; how to play */
.evolution_wrap .evolution_era { align-items: flex-end; text-align: right; padding-right: var(--ev-gutter); }
.evolution_wrap .evolution_era .evolution_eyebrow { justify-content: flex-end; }
.evolution_wrap .evolution_era .evolution_body { text-align: right; }
.evolution_wrap .evolution_year { margin: 0; font-family: var(--ev-serif); font-size: clamp(110px, 15vw, 260px); line-height: .8; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: 0 6px 60px rgba(0, 0, 0, .25); }
.evolution_wrap .evolution_games { margin: 0; font-family: var(--ev-serif); font-weight: 400; font-size: clamp(30px, 2.8vw, 48px); line-height: 1; }
.evolution_wrap .evolution_era .evolution_specs { justify-content: end; text-align: left; }
.evolution_wrap .evolution_era .evolution_play { justify-content: flex-end; }

/* 2026: the fan */
.evolution_wrap .evolution_fanlayer { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 14vh; }
.evolution_wrap .evolution_fanlayer .evolution_head { max-width: 15ch; }
.evolution_wrap .evolution_fan { position: absolute; z-index: 5; inset: 0; pointer-events: none; perspective: 1200px; visibility: hidden; }
.evolution_wrap .evolution_fancard {
  position: absolute; left: 50%; top: 0; width: var(--fw, 180px); aspect-ratio: 63 / 88; margin-left: calc(var(--fw, 180px) / -2); border-radius: 12px; padding: 7px;
  background: linear-gradient(140deg, #fff8e8, #d8c49a 30%, #fff3d8 52%, #cdb78a 74%, #fff6e2); box-shadow: 0 30px 60px -26px rgba(40, 24, 0, .6);
  transform-origin: 50% 120%; pointer-events: auto; cursor: pointer;
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .7s var(--ev-ease), box-shadow .4s, opacity .6s; opacity: var(--o, 0);
}
.evolution_wrap .evolution_fancard.is-held { box-shadow: 0 50px 90px -30px rgba(40, 24, 0, .7), 0 0 80px -10px rgba(255, 220, 140, .7); }
.evolution_wrap .evolution_fancard_inner { position: relative; height: 100%; border-radius: 7px; padding: 9px; display: flex; flex-direction: column; gap: 6px; background: linear-gradient(160deg, #fffdf6, #fbf1dc); color: #1b140a; overflow: hidden; }
.evolution_wrap .evolution_fancard_year { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ev-serif); font-size: clamp(20px, 1.6vw, 28px); line-height: 1; }
.evolution_wrap .evolution_fancard_year small { font-family: var(--ev-sans); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.evolution_wrap .evolution_fancard_art { flex: 1 1 auto; border-radius: 5px; background-repeat: no-repeat; background-color: #fff; box-shadow: inset 0 0 0 1px rgba(60, 40, 0, .1); }
.evolution_wrap .evolution_fancard_art.is-pixel { image-rendering: pixelated; }
.evolution_wrap .evolution_fancard_name { font-family: var(--ev-serif); font-size: clamp(14px, 1.1vw, 18px); line-height: 1; }
.evolution_wrap .evolution_fancard_dev { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.evolution_wrap .evolution_foil {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: color-dodge; opacity: .32;
  background-image: repeating-linear-gradient(110deg, #ff7ab8 0%, #ffd36b 6%, #7af0c8 12%, #78b8ff 18%, #c58bff 24%, #ff7ab8 30%), radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .1) 28%, rgba(0, 0, 0, .35) 95%);
  background-size: 360% 360%, cover; background-position: var(--fx, 50%) var(--fy, 50%), center; background-blend-mode: overlay; filter: brightness(.75) contrast(1.35);
}

/* the Vault: an index on the left (as a studio lists its work), a frame in the middle, the card's story on the right */
.evolution_wrap .evolution_vault_head { position: absolute; left: var(--ev-gutter); top: 13vh; display: flex; flex-direction: column; gap: 14px; max-width: 30vw; }
.evolution_wrap .evolution_vault_head .evolution_head { font-size: clamp(34px, 3.2vw, 58px); }
.evolution_wrap .evolution_vault_list { position: absolute; left: var(--ev-gutter); bottom: calc(var(--ev-gutter) * 1.2); margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; pointer-events: auto; }
.evolution_wrap .evolution_vault_item { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline; width: min(24vw, 320px); padding: 4px 0; font-size: 12px; color: var(--ink-2); cursor: pointer; transition: color .3s, padding .5s var(--ev-ease); }
.evolution_wrap .evolution_vault_item b { font-weight: 500; font-size: 9.5px; letter-spacing: .14em; }
.evolution_wrap .evolution_vault_item span { font-family: var(--ev-serif); font-size: 17px; line-height: 1.1; }
.evolution_wrap .evolution_vault_item em { font-style: normal; font-size: 10px; letter-spacing: .12em; }
.evolution_wrap .evolution_vault_item:hover { color: var(--ink); }
.evolution_wrap .evolution_vault_item.is-here { color: var(--ink); padding-left: 14px; }
.evolution_wrap .evolution_vault_item.is-here span { color: var(--ev-gold); }
.evolution_wrap .evolution_vault_frame { position: absolute; left: 50%; top: 50%; width: var(--vf-w, 300px); height: var(--vf-h, 420px); transform: translate(-50%, -50%); }
.evolution_wrap .evolution_vault_frame i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--ev-gold); }
.evolution_wrap .evolution_vault_frame i:nth-child(1) { left: -22px; top: -22px; border-width: 1px 0 0 1px; }
.evolution_wrap .evolution_vault_frame i:nth-child(2) { right: -22px; top: -22px; border-width: 1px 1px 0 0; }
.evolution_wrap .evolution_vault_frame i:nth-child(3) { right: -22px; bottom: -22px; border-width: 0 1px 1px 0; }
.evolution_wrap .evolution_vault_frame i:nth-child(4) { left: -22px; bottom: -22px; border-width: 0 0 1px 1px; }
.evolution_wrap .evolution_vault_card { position: absolute; right: var(--ev-gutter); bottom: calc(var(--ev-gutter) * 1.2); width: min(26vw, 380px); display: flex; flex-direction: column; gap: 14px; }
.evolution_wrap .evolution_vault_name { margin: 0; font-family: var(--ev-serif); font-weight: 400; font-size: clamp(40px, 3.6vw, 64px); line-height: .95; }
.evolution_wrap .evolution_hint.is-vault { position: absolute; left: 50%; bottom: calc(var(--ev-gutter) * 1.2); transform: translateX(-50%); justify-content: center; white-space: nowrap; }

/* where you are, as the games put it up when you walk into a town */
.evolution_wrap .evolution_place { position: absolute; z-index: 7; left: 50%; top: calc(var(--ev-gutter) + 54px); margin: 0 0 0 -130px; width: 260px; padding: 12px 18px; text-align: center; border-radius: 10px;
  font-family: var(--ev-serif); font-size: 24px; line-height: 1; color: #1b1408; background: linear-gradient(180deg, #fffdf6, #f1e8d2); box-shadow: 0 0 0 2px #2a2418 inset, 0 0 0 5px #fffdf6 inset, 0 0 0 6px #2a2418 inset, 0 18px 40px -18px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(-16px); transition: opacity .5s, transform .7s var(--ev-ease); pointer-events: none; }
/* the games' text box: what a landmark says, what jumped out of the grass */
/* the game's text box: bottom left on desktop, clear of the era copy on the right; on tablets and phones it takes the place sign's spot at the top */
.evolution_wrap .evolution_say { position: absolute; z-index: 7; left: calc(var(--ev-gutter) * 4); bottom: calc(var(--ev-gutter) * 1.4); width: min(520px, 40vw); padding: 18px 46px 18px 24px; border-radius: 12px;
  background: #fffdf6; color: #1b1408; box-shadow: 0 0 0 3px #2a2418 inset, 0 0 0 7px #fffdf6 inset, 0 0 0 9px #6a6a8a inset, 0 24px 60px -24px rgba(0, 0, 0, .7); opacity: 0; transition: opacity .3s; pointer-events: none; }
.evolution_wrap .evolution_say_text { margin: 0; font-family: var(--ev-sans); font-weight: 600; font-size: 17px; letter-spacing: .01em; line-height: 1.35; }
.evolution_wrap .evolution_say_arrow { position: absolute; right: 20px; bottom: 14px; font-size: 12px; color: #c8302a; }
.evolution_wrap .evolution_stage[data-part="era"] .evolution_say_arrow, .evolution_wrap .evolution_stage[data-part="fan"] .evolution_say_arrow { animation: evolution-bob 0.8s steps(2) infinite; }
@keyframes evolution-bob { 50% { transform: translateY(3px); } }
.evolution_wrap .evolution_hover { position: absolute; z-index: 7; left: 0; top: 0; margin: 0; padding: 6px 12px; border-radius: 99px; background: rgba(255, 253, 246, .94); color: #1b1408; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transform: translate(var(--hx, -999px), var(--hy, -999px)); opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }

/* thirty Pikachu: a wall that rises in a wave */
.evolution_wrap .evolution_pikalayer { --cols: 10; --rows: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vh, 32px); padding: 92px var(--ev-gutter) 22px; }
.evolution_wrap .evolution_pika_head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 12px 4vw; }
.evolution_wrap .evolution_pika_head .evolution_eyebrow { grid-column: 1 / -1; }
.evolution_wrap .evolution_pika_head .evolution_head { font-size: clamp(36px, 3.6vw, 64px); }
.evolution_wrap .evolution_pika_head .evolution_body { justify-self: end; }
.evolution_wrap .evolution_wall { --gap: clamp(5px, .6vw, 10px); display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); align-self: center; justify-self: center; width: min(100%, calc((100svh - 330px) / var(--rows) * 63 / 88 * var(--cols))); perspective: 1400px; pointer-events: none; }
.evolution_wrap .evolution_wallcard { position: relative; aspect-ratio: 63 / 88; border-radius: 6px; background-repeat: no-repeat; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7);
  transform: translateY(calc((1 - var(--wv, 0)) * 60px)) rotateX(calc((1 - var(--wv, 0)) * 60deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); opacity: var(--wv, 0); transition: transform .35s var(--ev-ease), box-shadow .3s; }
.evolution_wrap .evolution_wallcard:hover { --sc: 1.12; z-index: 2; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8), 0 0 30px -6px rgba(255, 220, 120, .7); }
.evolution_wrap .evolution_wallcard:focus-visible { outline: 2px solid var(--ev-gold); outline-offset: 3px; }
.evolution_wrap .evolution_wall_credit { margin: 0; text-align: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* a closer look */
.evolution_wrap .evolution_peek { position: absolute; z-index: 12; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); padding: var(--ev-gutter); background: rgba(10, 8, 5, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fbf7ee; opacity: 0; transition: opacity .4s; }
.evolution_wrap .evolution_peek.is-open { opacity: 1; }
.evolution_wrap .evolution_peek[hidden] { display: none; }
.evolution_wrap .evolution_peek_card { position: relative; flex: none; height: min(64vh, 520px); aspect-ratio: 63 / 88; border-radius: 14px; overflow: hidden; background-repeat: no-repeat; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(242, 211, 138, .5); transform: scale(.92); transition: transform .6s var(--ev-ease); }
.evolution_wrap .evolution_peek.is-open .evolution_peek_card { transform: none; }
.evolution_wrap .evolution_peek_card.is-dex { display: grid; grid-template-rows: auto 1fr auto; padding: 16px; background: linear-gradient(160deg, #fff7dd, #efd99a 55%, #e3c271); color: #1d1508; }
.evolution_wrap .evolution_peek_no { font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.evolution_wrap .evolution_peek_art { align-self: center; width: 100%; aspect-ratio: 1; margin: 10px 0; border-radius: 8px; background-color: #f4f1df; background-repeat: no-repeat; image-rendering: pixelated; box-shadow: inset 0 0 0 3px #c9a85a; }
.evolution_wrap .evolution_peek_cap { font-family: var(--ev-serif); font-size: 30px; line-height: 1; }
.evolution_wrap .evolution_peek_txt { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.evolution_wrap .evolution_peek_txt .evolution_eyebrow { color: var(--ev-gold); }
.evolution_wrap .evolution_peek_name { margin: 0; font-family: var(--ev-serif); font-size: clamp(40px, 4.4vw, 72px); line-height: .95; letter-spacing: -.02em; }
.evolution_wrap .evolution_peek_body { margin: 0; font-family: var(--ev-serif); font-size: clamp(18px, 1.4vw, 22px); line-height: 1.3; color: rgba(251, 247, 238, .78); }
.evolution_wrap .evolution_peek_close { align-self: flex-start; margin-top: 8px; color: #fbf7ee; border-color: rgba(251, 247, 238, .35); cursor: pointer; }
@media (max-width: 767px) { .evolution_wrap .evolution_peek { flex-direction: column; justify-content: center; text-align: center; gap: 20px; } .evolution_wrap .evolution_peek_card { height: min(50vh, 420px); } .evolution_wrap .evolution_peek_txt { align-items: center; } .evolution_wrap .evolution_peek_close { align-self: center; } }

/* who's that Pokémon? the anime's burst, the silhouette, three names */
.evolution_wrap .evolution_quiz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; overflow: hidden; }
.evolution_wrap .evolution_quiz_burst { position: absolute; left: 50%; top: 50%; width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 50%, #123f86 0deg 9deg, #1b56ad 9deg 18deg); animation: evolution-spin 30s linear infinite; }
.evolution_wrap .evolution_quiz_burst::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 232, 120, .95) 0, rgba(255, 210, 60, .7) 12%, transparent 34%); }
@keyframes evolution-spin { to { transform: rotate(1turn); } }
.evolution_wrap .evolution_quiz .evolution_eyebrow, .evolution_wrap .evolution_quiz .evolution_quiz_score { color: #10296a; text-shadow: none; font-weight: 600; }
.evolution_wrap .evolution_quiz_title { margin: 0; font-family: var(--ev-serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 96px); line-height: .95; color: #ffe34a; -webkit-text-stroke: 2px #1a3a8a; text-shadow: 0 6px 0 #1a3a8a; }
.evolution_wrap .evolution_quiz_sil { width: min(42vh, 360px); height: min(42vh, 360px); image-rendering: pixelated; transition: transform .6s var(--ev-ease), filter .6s; filter: drop-shadow(0 0 0 #fff); }
.evolution_wrap .evolution_quiz_sil.is-shown { transform: scale(1.06); filter: drop-shadow(0 0 24px rgba(255, 255, 255, .9)); }
.evolution_wrap .evolution_quiz_options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.evolution_wrap .evolution_quiz_opt { min-width: 160px; height: 52px; padding: 0 22px; border-radius: 99px; background: #fffdf6; color: #1b1408; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 3px #1a3a8a inset, 0 6px 0 #1a3a8a; transition: transform .2s; }
.evolution_wrap .evolution_quiz_opt:hover, .evolution_wrap .evolution_quiz_opt:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 0 0 3px #1a3a8a inset, 0 6px 0 #1a3a8a, 0 0 0 4px #ffe34a; }
.evolution_wrap .evolution_quiz_next { display: block; height: 3px; margin: 8px auto 0; width: 120px; background: rgba(255, 253, 240, .25); border-radius: 2px; overflow: hidden; }
.evolution_wrap .evolution_quiz_next::after { content: ''; display: block; height: 100%; background: #ffe34a; transform-origin: left; animation: evolution-next 2.6s linear forwards; }
@keyframes evolution-next { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.evolution_wrap .evolution_quiz_opt.is-right { background: #ffe34a; }
.evolution_wrap .evolution_quiz_opt.is-wrong { background: #ff9a8a; }
.evolution_wrap .evolution_quiz_score { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #fffdf0; }

/* why thirty: lines running across the page as the scroll moves */
.evolution_wrap .evolution_thirty { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 0 4vh; overflow: hidden; }
.evolution_wrap .evolution_thirty > .evolution_eyebrow { justify-content: center; margin-bottom: 18px; }
.evolution_wrap .evolution_runline { margin: 0; display: flex; gap: .5em; white-space: nowrap; font-family: var(--ev-serif); font-size: clamp(56px, 8vw, 150px); line-height: 1.08; letter-spacing: -.03em; transform: translateX(var(--run, 0px)); will-change: transform; }
.evolution_wrap .evolution_runline span:nth-child(2) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.evolution_wrap .evolution_runline.is-alt span:nth-child(2) { color: var(--ink); -webkit-text-stroke: 0; }
.evolution_wrap .evolution_runline.is-alt span:nth-child(1), .evolution_wrap .evolution_runline.is-alt span:nth-child(3) { color: transparent; -webkit-text-stroke: 1px var(--ink); }
.evolution_wrap .evolution_thirty .evolution_body { margin-top: 28px; }
.evolution_wrap .evolution_source { text-align: center; color: var(--ink-2); font-size: 9px; }
.evolution_wrap .evolution_source.is-left { order: 3; margin: 0; text-align: left; }
.evolution_wrap .evolution_dexlayer .evolution_dex_seen { order: 2; }

/* less motion, when asked: nothing spins, pulses or rises; the words simply appear */
@media (prefers-reduced-motion: reduce) {
  .evolution_wrap .evolution_quiz_burst, .evolution_wrap .evolution_cue_line, .evolution_wrap .evolution_pika::after, .evolution_wrap .evolution_loader.is-ready .evolution_boot_logo { animation: none !important; }
  .evolution_wrap .evolution_w > span { transform: none !important; transition: none !important; }
  .evolution_wrap .evolution_boot { transition: none; }
}

/* 2026: the Pokédex */
.evolution_wrap .evolution_dexlayer { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 0 var(--ev-gutter) calc(var(--ev-gutter) * 1.4) calc(var(--ev-gutter) * 4); }
.evolution_wrap .evolution_dex_count { margin: 0 0 .1em; font-family: var(--ev-serif); font-size: clamp(100px, 14vw, 250px); line-height: .92; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.evolution_wrap .evolution_dex_seen { color: var(--ink-2); }
.evolution_wrap .evolution_dex_seen b { font-weight: 500; color: var(--ev-gold); }
.evolution_wrap .evolution_regions { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: var(--regions-o, 0); }
.evolution_wrap .evolution_region { position: absolute; left: 0; top: 0; font-family: var(--ev-serif); font-size: 17px; color: rgba(255, 248, 230, .7); white-space: nowrap; }
.evolution_wrap .evolution_tip {
  position: absolute; z-index: 7; left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 99px;
  background: rgba(251, 247, 238, .95); color: #17120b; transform: translate(var(--tipx, -999px), var(--tipy, -999px)); white-space: nowrap; opacity: var(--tip-o, 0); transition: opacity .15s; pointer-events: none;
}
.evolution_wrap .evolution_tip_img { width: 40px; height: 40px; border-radius: 50%; background-repeat: no-repeat; image-rendering: pixelated; background-color: #efe7d4; }
.evolution_wrap .evolution_tip b { font-family: var(--ev-serif); font-weight: 400; font-size: 18px; }
.evolution_wrap .evolution_tip span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }

/* the catch and Hire */
.evolution_wrap .evolution_caught { position: absolute; z-index: 5; left: 0; right: 0; top: 14vh; margin: 0; text-align: center; font-family: var(--ev-serif); font-size: clamp(48px, 6vw, 110px); color: #fff3d2; opacity: var(--caught-o, 0); pointer-events: none; text-shadow: 0 0 50px rgba(255, 210, 120, .7); }
.evolution_wrap .evolution_hire { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: clamp(120px, 15vh, 160px) var(--ev-gutter) clamp(130px, 15vh, 160px) calc(var(--ev-gutter) * 3.2); width: min(44vw, 600px); }
.evolution_wrap .evolution_hire .evolution_eyebrow { color: var(--ev-gold); margin-bottom: clamp(18px, 2.6vh, 28px); }
.evolution_wrap .evolution_hire_title { margin: 0 0 clamp(22px, 3.4vh, 36px); font-family: var(--ev-serif); font-weight: 400; font-size: clamp(60px, 6.4vw, 118px); line-height: .88; letter-spacing: -.03em; }
.evolution_wrap .evolution_trainer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--rule); }
.evolution_wrap .evolution_trainer > div { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); }
.evolution_wrap .evolution_trainer > div:not(:nth-child(3n + 1)) { padding-left: 18px; border-left: 1px solid var(--rule); }
.evolution_wrap .evolution_trainer dt { font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.evolution_wrap .evolution_trainer dd { margin: 0; font-family: var(--ev-serif); font-size: clamp(20px, 1.7vw, 26px); line-height: 1; font-variant-numeric: tabular-nums; }
.evolution_wrap .evolution_trainer .evolution_trainer_item.is-badges dd { display: flex; gap: 5px; padding-top: 4px; }
.evolution_wrap .evolution_badge { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--rule); }
.evolution_wrap .evolution_badge.is-on { border-color: transparent; background: radial-gradient(circle at 35% 30%, #fff6dc, #f2d38a 55%, #a8853a); box-shadow: 0 0 10px rgba(242, 211, 138, .6); }
.evolution_wrap .evolution_hire_line { margin: clamp(24px, 3.4vh, 36px) 0 0; font-family: var(--ev-serif); font-size: clamp(19px, 1.5vw, 24px); line-height: 1.25; color: var(--ink-2); }
.evolution_wrap .evolution_hire_row { margin: clamp(22px, 3vh, 32px) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.evolution_wrap .evolution_again { height: 58px; padding: 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); pointer-events: auto; cursor: pointer; transition: border-color .3s; }
.evolution_wrap .evolution_again:hover, .evolution_wrap .evolution_again:focus-visible { border-color: var(--ev-gold); outline: none; }
.evolution_wrap .evolution_hint.is-card { position: absolute; z-index: 5; left: 72%; transform: translateX(-50%); bottom: clamp(96px, 12vh, 132px); white-space: nowrap; opacity: var(--cardhint-o, 0); pointer-events: none; }
.evolution_wrap .evolution_cta {
  display: inline-flex; align-items: center; height: 58px; padding: 0 32px; border-radius: 99px; text-decoration: none; pointer-events: auto;
  font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #17120b; background: linear-gradient(100deg, #fff6dc, #f2d38a 50%, #fff6dc); background-size: 200% 100%;
  box-shadow: 0 0 50px -10px rgba(242, 211, 138, .8); transition: background-position .8s var(--ev-ease), transform .4s var(--ev-ease);
}
.evolution_wrap .evolution_cta:hover { background-position: 100% 0; transform: translateY(-2px); }

/* the loader is a Game Boy switching on: the whole screen is its LCD, the name scrolls down to the
   middle as the thirty years load, then it chimes; entering, the LCD becomes the world behind it */
.evolution_wrap .evolution_loader { --lcd-ink: #0f380f; --lcd-2: rgba(15, 56, 15, .62); position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; color: var(--lcd-ink); background: #9bbc0f; transition: opacity 1.1s var(--ev-ease) .15s, visibility 1.3s; }
.evolution_wrap .evolution_lcd { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(15, 56, 15, .28)),
  repeating-linear-gradient(0deg, rgba(15, 56, 15, .07) 0 1px, transparent 1px 4px),
  repeating-linear-gradient(90deg, rgba(15, 56, 15, .07) 0 1px, transparent 1px 4px),
  linear-gradient(170deg, #a7c71a, #8bac0f); transition: transform 1.4s var(--ev-ease), filter 1.2s; }
.evolution_wrap .evolution_loader.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.evolution_wrap .evolution_loader.is-gone .evolution_lcd { transform: scale(1.12); filter: brightness(1.5) blur(6px); }
.evolution_wrap .evolution_boot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translateY(calc((1 - var(--k, 0)) * -36vh)); transition: transform .5s steps(6, end); }
.evolution_wrap .evolution_boot_logo { margin: 0; font-family: var(--ev-serif); font-size: clamp(56px, 8vw, 128px); line-height: .9; letter-spacing: -.03em; }
.evolution_wrap .evolution_boot_logo sup { font-family: var(--ev-sans); font-size: .14em; vertical-align: super; margin-left: .1em; }
.evolution_wrap .evolution_loader.is-ready .evolution_boot_logo { animation: evolution-chime .5s steps(2, end) 2; }
@keyframes evolution-chime { 50% { color: #306230; } }
.evolution_wrap .evolution_eyebrow.is-loader { justify-content: center; color: var(--lcd-2); }
.evolution_wrap .evolution_loader.is-gone .evolution_boot { transform: translateY(-4vh); opacity: 0; transition: transform 1s var(--ev-ease), opacity .6s; }
.evolution_wrap .evolution_loader_years { position: absolute; top: calc(50% + clamp(78px, 9vw, 120px)); display: flex; gap: 4px; }
.evolution_wrap .evolution_loader_years i { width: 6px; height: 6px; background: rgba(15, 56, 15, .16); }
.evolution_wrap .evolution_loader_years i.is-on { background: var(--lcd-ink); }
.evolution_wrap .evolution_loader.is-ready .evolution_loader_years { opacity: 0; transition: opacity .4s .6s; }
.evolution_wrap .evolution_loader_count { position: absolute; left: var(--ev-gutter); bottom: var(--ev-gutter); margin: 0; font-size: 11px; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--lcd-2); }
.evolution_wrap .evolution_loader_count::before { content: 'Year '; }
.evolution_wrap .evolution_loader_keys { position: absolute; bottom: calc(var(--ev-gutter) * 1.6); display: flex; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s .5s, transform .6s var(--ev-ease) .5s; pointer-events: none; }
.evolution_wrap .evolution_loader.is-ready .evolution_loader_keys { opacity: 1; transform: none; pointer-events: auto; }
.evolution_wrap .evolution_enter { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 9px; border-radius: 99px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lcd-ink, inherit); box-shadow: inset 0 0 0 1px rgba(15, 56, 15, .35); transition: background .3s; }
.evolution_wrap .evolution_enter:hover, .evolution_wrap .evolution_enter:focus-visible { background: rgba(15, 56, 15, .1); outline: none; }
@media (max-width: 600px) { .evolution_wrap .evolution_loader_keys { flex-direction: column; left: var(--ev-gutter); right: var(--ev-gutter); } .evolution_wrap .evolution_loader_count { display: none; } }
.evolution_wrap .evolution_enter b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c94a80, #8a1f4c 70%); color: #fff; font-family: var(--ev-serif); font-weight: 400; font-size: 18px; letter-spacing: 0; }

@media (max-width: 991px) {
  .evolution_wrap .evolution_index { display: none; }
  .evolution_wrap .evolution_say { left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - var(--ev-gutter) * 2)); bottom: auto; top: 76px; }
  .evolution_wrap .evolution_link, .evolution_wrap .evolution_era, .evolution_wrap .evolution_dexlayer { padding-left: var(--ev-gutter); }
  .evolution_wrap .evolution_era { align-items: flex-start; text-align: left; }
  .evolution_wrap .evolution_era .evolution_eyebrow, .evolution_wrap .evolution_era .evolution_play, .evolution_wrap .evolution_era .evolution_specs { justify-content: flex-start; }
  .evolution_wrap .evolution_era .evolution_body { text-align: left; }
  .evolution_wrap .evolution_year { font-size: 130px; }
  .evolution_wrap .evolution_vault_head { max-width: none; right: var(--ev-gutter); top: 96px; }
  .evolution_wrap .evolution_vault_list { display: none; }
  .evolution_wrap .evolution_vault_card { left: var(--ev-gutter); width: auto; }
  .evolution_wrap .evolution_hint.is-vault { display: none; }
  .evolution_wrap .evolution_hire { width: auto; justify-content: flex-end; padding: 0 var(--ev-gutter) 140px; }
  .evolution_wrap .evolution_pikalayer { --cols: 6; --rows: 5; padding: 84px var(--ev-gutter) 24px; }
  .evolution_wrap .evolution_pika_head { grid-template-columns: 1fr; }
  .evolution_wrap .evolution_pika_head .evolution_body { justify-self: start; }
  .evolution_wrap .evolution_wall { width: min(100%, calc((100svh - 400px) / var(--rows) * 63 / 88 * var(--cols))); }
  .evolution_wrap .evolution_trainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evolution_wrap .evolution_hint.is-card { display: none; }
  .evolution_wrap .evolution_trainer > div:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .evolution_wrap .evolution_trainer > div:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--rule); }
}
@media (max-width: 767px) {
  .evolution_wrap .evolution_top { padding: 14px var(--ev-gutter); }
  .evolution_wrap .evolution_brand_sub { display: none; }
  .evolution_wrap .evolution_brand_name { font-size: 22px; }
  .evolution_wrap .evolution_chip { height: 30px; padding: 0 11px; font-size: 9px; letter-spacing: .1em; }
  .evolution_wrap .evolution_chip.is-hire { display: none; }
  .evolution_wrap .evolution_line { font-size: 26px; }
  .evolution_wrap .evolution_title_word { font-size: 22vw; }
  .evolution_wrap .evolution_head { font-size: 38px; }
  .evolution_wrap .evolution_body { font-size: 18px; }
  .evolution_wrap .evolution_link, .evolution_wrap .evolution_era { gap: 12px; padding-bottom: var(--ev-gutter); }
  .evolution_wrap .evolution_year { font-size: 92px; }
  .evolution_wrap .evolution_games { font-size: 28px; }
  .evolution_wrap .evolution_specs { grid-template-columns: repeat(2, auto); gap: 8px 22px; }
  .evolution_wrap .evolution_specs dd { font-size: 17px; }
  .evolution_wrap .evolution_play { font-size: 9px; gap: 6px; }
  .evolution_wrap .evolution_play .evolution_key { margin-left: 4px; min-width: 24px; height: 24px; }
  .evolution_wrap .evolution_picks { gap: 8px; }
  .evolution_wrap .evolution_pick { width: calc((100vw - var(--ev-gutter) * 2 - 16px) / 3); }
  .evolution_wrap .evolution_pick_name { font-size: 17px; }
  .evolution_wrap .evolution_fanlayer { padding-top: 86px; }
  .evolution_wrap .evolution_vault_head .evolution_head { font-size: 30px; }
  .evolution_wrap .evolution_vault_name { font-size: 34px; }
  .evolution_wrap .evolution_vault_card { gap: 8px; }
  .evolution_wrap .evolution_vault_card .evolution_body { font-size: 16px; }
  .evolution_wrap .evolution_runline { font-size: 17vw; }
  .evolution_wrap .evolution_dex_count { font-size: 96px; }
  .evolution_wrap .evolution_hire_title { font-size: 68px; }
  .evolution_wrap .evolution_cta { height: 50px; padding: 0 24px; }
  .evolution_wrap .evolution_hint.is-card { display: none; }
    .evolution_wrap .evolution_hire { padding-bottom: 128px; }
  .evolution_wrap .evolution_place { top: 60px; width: 220px; margin-left: -110px; font-size: 20px; }
  .evolution_wrap .evolution_say { left: var(--ev-gutter); right: var(--ev-gutter); width: auto; transform: none; bottom: auto; top: 60px; padding: 14px 40px 14px 18px; }
  .evolution_wrap .evolution_say_text { font-size: 14px; }
  .evolution_wrap .evolution_pika_head .evolution_body { display: none; }
  .evolution_wrap .evolution_wall { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .evolution_wrap .evolution_quiz_opt { min-width: 120px; height: 46px; font-size: 13px; }
}