/* Pokémon Beyond Hub, prototype. Night-dusk title screen, then a clamshell handheld whose screen is the Hub. */

:root {
  /* the Hub's own colours (from the current site): league red, card cream, ink, teal, gold, store neon */
  --red: #d9433f;
  --red-dark: #a92f2c;
  --cream: #f4ecdc;
  --cream-2: #e9dcc3;
  --ink: #2b2b2b;
  --ink-2: #5d5a55;
  --teal: #187c8d;
  --gold: #9a7621;
  --neon: #b026ff;
  --neon-soft: #e0b1ff;
  /* the title's night */
  --night: #2b2550;
  --violet: #4a3f8c;
  --peri: #8a86e0;
  --lav: #b9b2f2;
  --peach: #ffd59a;
  --mint: #7fd6c8;
  --pixel: 'Press Start 2P', monospace;
  --body: 'DotGothic16', system-ui, sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font: 16px/1.35 var(--body);
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
img {
  image-rendering: pixelated;
}
ul {
  list-style: none;
}
[hidden] {
  display: none !important;
}

/* ================= title screen ================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.title {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--night);
  cursor: pointer;
}
/* the art blurred and stretched behind the square, so wide and tall screens have no bare bands */
.t-backdrop {
  position: absolute;
  inset: -40px;
  background: url('assets/titulo-fundo.webp') center / cover;
  filter: blur(28px) saturate(1.2) brightness(0.7);
}
.title {
  container-type: size;
}
/* the art covers the whole screen (still square, so the animated spots stay on it); a tall screen crops its
   sides, the crop leaning right so the logo, the creature and PRESS START stay whole */
.t-art {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.t-defs {
  position: absolute;
  width: 0;
  height: 0;
}
.t-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}
/* the moving parts are copies of the art, cut to their region and warped by a wind filter */
.t-layer {
  pointer-events: none;
}
.t-clouds {
  clip-path: polygon(44% 34%, 100% 30%, 100% 46%, 44% 47%);
  filter: url(#t-drift);
}
.t-leaves {
  /* the plants along the bottom */
  clip-path: polygon(0 62%, 22% 58%, 38% 76%, 62% 80%, 100% 66%, 100% 100%, 0 100%);
  filter: url(#t-wind);
}
.t-sun {
  position: absolute;
  top: 40%;
  left: 86%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 170, 0.55), rgba(255, 190, 150, 0.18) 45%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: t-glow 4.5s ease-in-out infinite;
}
@keyframes t-glow {
  50% { transform: scale(1.12); opacity: 0.65; }
}
.t-fx i {
  position: absolute;
  pointer-events: none;
}
/* twinkling stars */
.t-fx .star {
  width: var(--s);
  aspect-ratio: 1;
  translate: -50% -50%;
  background:
    linear-gradient(#fff, #fff) center / 100% 30% no-repeat,
    linear-gradient(#fff, #fff) center / 30% 100% no-repeat;
  filter: drop-shadow(0 0 3px #fff);
  animation: t-twinkle var(--d) steps(4) infinite;
}
@keyframes t-twinkle {
  50% { opacity: 0.1; transform: scale(0.4) rotate(45deg); }
}
/* the creature's rings glow and fade */
.t-fx .ring {
  width: 7.5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 140, 0.75), rgba(255, 222, 140, 0) 65%);
  mix-blend-mode: screen;
  animation: t-ring 3.2s ease-in-out infinite;
}
@keyframes t-ring {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}
/* the lit windows flicker */
.t-fx .win {
  width: 1.6%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.9), transparent 70%);
  mix-blend-mode: screen;
  animation: t-win var(--d) steps(2) infinite;
}
@keyframes t-win {
  50% { opacity: 0.2; }
}
/* fireflies over the plants */
.t-fx .fly {
  width: 0.7%;
  aspect-ratio: 1;
  background: #fff3c0;
  box-shadow: 0 0 6px 2px rgba(255, 228, 150, 0.85);
  animation: t-fly var(--d) ease-in-out infinite;
}
@keyframes t-fly {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  20%, 80% { opacity: 1; }
  50% { transform: translate(3cqw, -4cqw); }
}
/* the new texts, written where the old ones were, in the art's pixel style */
.t-name {
  position: absolute;
  top: 4.6%;
  left: 45.6%;
  width: 38.8%;
  font: 2.35cqw/1 var(--pixel);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  color: #f9c9c4;
  text-shadow: 0.25cqw 0 0 #2b2550, -0.25cqw 0 0 #2b2550, 0 0.25cqw 0 #2b2550, 0 -0.25cqw 0 #2b2550, 0.3cqw 0.4cqw 0 #2b2550;
  animation: t-shine 3.5s ease-in-out infinite;
}
@keyframes t-shine {
  50% { color: #fff1d6; }
}
.t-year {
  position: absolute;
  top: 7.9%;
  left: 6.3%;
  width: 12.2%;
  font: 2.3cqw/1 var(--pixel);
  text-align: center;
  color: #7fd6c8;
}
/* PRESS START: a plate over the painted words, blinking like an old cartridge */
.t-press {
  position: absolute;
  top: 95.2%;
  left: 49.2%;
  width: 30.8%;
  height: 4.4%;
  border: 0.3cqw solid #2b2550;
  background: #4a3f8c;
  box-shadow: 0 0 0 0.3cqw #7fd6c8;
  font: 2.2cqw/1 var(--pixel);
  color: #ffd59a;
  text-shadow: 0.25cqw 0.25cqw 0 #2b2550;
  animation: t-pulse 2.2s ease-in-out infinite;
}
.t-press span {
  animation: t-blinkp 1.1s steps(2, start) infinite;
}
@keyframes t-blinkp {
  to { visibility: hidden; }
}
@keyframes t-pulse {
  50% { box-shadow: 0 0 0 0.3cqw #7fd6c8, 0 0 2cqw rgba(127, 214, 200, 0.8); }
}
.t-press:hover,
.t-press:focus-visible {
  outline: 0;
  background: #5b4fa6;
}
/* pressing start: the button flashes fast, then the screen goes white */
.title.starting .t-press span {
  animation: t-fastblink 0.12s steps(2, start) infinite;
}
.title.starting .t-press {
  transform: scale(1.06);
}
@keyframes t-fastblink {
  to { visibility: hidden; }
}
.title.starting::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  animation: t-flash 1.1s ease-in forwards;
}
@keyframes t-flash {
  0% { opacity: 0; }
  15% { opacity: 0.9; }
  30% { opacity: 0.1; }
  100% { opacity: 1; }
}

/* ================= the Pokédex ================= */
/* the classic red Pokédex: a left panel (lens, screen, controls) and a cover that opens like a book */
.dex {
  /* skin tokens; each data-skin below overrides them */
  --body: #dc0a2d;
  --body-hi: #ff3f57;
  --body-lo: #a3061f;
  --edge: #4a0010;
  --lens: #33a6e8;
  --lens-hi: #bfe9ff;
  --lens-lo: #0f5fa8;
  --bezel-c: #dedede;
  --pad: #1f1f24;
  --key: #2b9be0;
  --key-lo: #156aa8;
  --L: min(calc(100vw - 20px), calc((100dvh - 20px) * 0.66), 460px);
  position: fixed;
  top: 50%;
  left: 50%;
  width: var(--L);
  aspect-ratio: 0.66;
  translate: -50% -50%;
  perspective: 2200px;
  transition: translate 1.1s cubic-bezier(0.3, 0.05, 0.25, 1.1);
  container-type: inline-size;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}
/* the site's background: a bright route, a pale sky with drifting clouds over a pixel grass field */
body:has(.dex) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%235fae4a' d='M3 10h1v3H3zM5 9h1v4H5zM7 10h1v3H7zM15 19h1v3h-1zM17 18h1v4h-1zM19 19h1v3h-1z'/%3E%3Cpath fill='%233f8f3a' d='M2 13h7v1H2zM14 22h7v1h-7z'/%3E%3Cpath fill='%23fff3a8' d='M11 4h1v1h-1zM21 9h1v1h-1z'/%3E%3Cpath fill='%23ff9db8' d='M10 4h1v1h-1zM12 4h1v1h-1zM11 3h1v1h-1zM11 5h1v1h-1z'/%3E%3C/svg%3E") 0 0 / 96px 96px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%2392d36e'/%3E%3Cpath fill='%2382c45e' d='M0 0h2v1H0zM8 8h2v1H8zM12 3h1v2h-1zM4 11h1v2H4zM14 13h2v1h-2z'/%3E%3Cpath fill='%23a8e284' d='M5 2h1v1H5zM11 10h1v1h-1zM1 7h1v1H1zM9 14h1v1H9z'/%3E%3C/svg%3E") 0 0 / 32px 32px;
  background-color: #92d36e;
  background-attachment: fixed;
}
body:has(.dex)::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 34vh;
  pointer-events: none;
  background: linear-gradient(180deg, #bfe9ff 0%, #d9f3ff 65%, rgba(217, 243, 255, 0) 100%);
}
/* the sky and the clouds stay behind the Pokédex */
body:has(.dex)::before,
body:has(.dex)::after {
  z-index: 0;
}
.dex {
  z-index: 2;
}
.keys-help {
  z-index: 3;
  color: #1f3d14;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(31, 61, 20, 0.25);
}
.keys-help b {
  color: #2f6f22;
}
.keys-help kbd {
  border-color: rgba(31, 61, 20, 0.4);
}
/* pixel clouds drifting across the sky */
body:has(.dex)::after {
  content: '';
  position: fixed;
  top: 6vh;
  left: -30vw;
  width: 120px;
  height: 16px;
  pointer-events: none;
  background: #fff;
  box-shadow:
    16px -16px 0 #fff, 48px -16px 0 #fff, 32px -24px 0 #fff, 80px 0 0 #fff,
    45vw 9vh 0 #fff, calc(45vw + 24px) calc(9vh - 12px) 0 #fff, calc(45vw + 56px) 9vh 0 #fff,
    85vw 3vh 0 #fff, calc(85vw + 20px) calc(3vh - 10px) 0 #fff;
  opacity: 0.9;
  animation: bg-cloud 70s linear infinite;
}
@keyframes bg-cloud {
  to { transform: translateX(130vw); }
}

.dex[data-skin='pikachu'] { --body: #f5c518; --body-hi: #ffe066; --body-lo: #c79a00; --edge: #5a4300; }
.dex[data-skin='sombra'] { --body: #2c2c35; --body-hi: #4a4a58; --body-lo: #19191f; --edge: #050507; --pad: #0b0b0e; }
.dex[data-skin='mare'] { --body: #187c8d; --body-hi: #2fa6b8; --body-lo: #0f5865; --edge: #032a32; }
.dex[data-skin='champion'] {
  --body: #51107a; --body-hi: #7c2cb2; --body-lo: #340852; --edge: #14021f;
  --lens: #b026ff; --lens-hi: #f0d2ff; --lens-lo: #5a0b8f; --key: #b026ff; --key-lo: #6d10a8;
}
.dex[data-skin='perola'] { --body: #ece6da; --body-hi: #fffdf8; --body-lo: #cbc1ad; --edge: #6e6555; --bezel-c: #ffffff; }

/* ---------- left panel ---------- */
.dex-l {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0 6% 6%;
  /* the top steps down after the lens, as on the original */
  clip-path: polygon(3% 0, 48% 0, 56% 7%, 100% 7%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 0 3%);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(180deg, var(--body-hi), var(--body) 25%, var(--body-lo));
  transition: background 0.3s;
}
/* the dark line that follows the step */
.dex-l::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: var(--edge);
  clip-path: polygon(0 75%, 46% 75%, 54% 95%, 100% 95%, 100% 100%, 54% 100%, 46% 80%, 0 80%);
  pointer-events: none;
}
.dex-l::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 4px solid var(--edge);
  clip-path: inherit;
  pointer-events: none;
}
.dex-top {
  position: relative;
  display: flex;
  flex: 0 0 15%;
  align-items: center;
  gap: 5%;
  padding-left: 1%;
}
/* the big blue lens: START */
.lens {
  position: relative;
  width: 21cqw;
  aspect-ratio: 1;
  border: 0.8cqw solid var(--edge);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.6cqw 0 var(--body-lo), inset 0 -0.6cqw 0 #cfcfcf;
}
.lens i {
  position: absolute;
  inset: 13%;
  border: 0.6cqw solid var(--edge);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--lens-hi) 0 12%, var(--lens) 30%, var(--lens-lo) 85%);
  animation: lens-glow 3s ease-in-out infinite;
}
@keyframes lens-glow {
  50% { box-shadow: 0 0 2.5cqw var(--lens), inset 0 0 1.5cqw rgba(255, 255, 255, 0.5); }
}
.lens.pressed i,
.lens:active i {
  filter: brightness(1.35);
}
.leds {
  display: flex;
  align-self: flex-start;
  gap: 2.2cqw;
  margin-top: 3%;
}
.leds i {
  width: 4.2cqw;
  aspect-ratio: 1;
  border: 0.5cqw solid var(--edge);
  border-radius: 50%;
}
.led-r { background: radial-gradient(circle at 35% 30%, #ffb3b3, #e8132b 60%); }
.led-y { background: radial-gradient(circle at 35% 30%, #fff7c2, #f2c40f 60%); }
.led-g { background: radial-gradient(circle at 35% 30%, #c9ffc2, #2dbb3c 60%); }
.dex.busy .led-r { animation: led-blink 0.25s steps(2) infinite; }
.dex.talking .led-y { animation: led-blink 0.18s steps(2) infinite; }
@keyframes led-blink {
  50% { filter: brightness(0.5); }
}
/* the screen bezel: light grey, the bottom-left corner cut, two red dots, a red light and a speaker */
.bezel {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  margin-top: 3%;
  padding: 5% 7% 12%;
  background: var(--bezel-c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%, 0 88%);
  box-shadow: inset 0 0 0 0.8cqw var(--edge);
}
.bezel::before {
  /* the dark outline, kept inside the cut shape */
  content: '';
  position: absolute;
  inset: 0;
  border: 0.8cqw solid var(--edge);
  clip-path: inherit;
  pointer-events: none;
}
.bezel-dots {
  position: absolute;
  top: 1.8%;
  left: 50%;
  display: flex;
  gap: 4cqw;
  translate: -50% 0;
}
.bezel-dots i {
  width: 2.2cqw;
  aspect-ratio: 1;
  border: 0.4cqw solid var(--edge);
  border-radius: 50%;
  background: #e8132b;
}
.glass {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border: 1cqw solid #2a2a2a;
  border-radius: 1.4cqw;
  background: #111;
}
.bezel-led {
  position: absolute;
  bottom: 3%;
  left: 20%;
  width: 6cqw;
  aspect-ratio: 1;
  border: 0.6cqw solid var(--edge);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb3b3, #e8132b 60%);
}
.bezel-speaker {
  position: absolute;
  right: 8%;
  bottom: 3.5%;
  display: flex;
  width: 16cqw;
  flex-direction: column;
  gap: 0.9cqw;
}
.bezel-speaker i {
  height: 0.8cqw;
  border-radius: 1cqw;
  background: var(--edge);
}
/* the controls: black round button (skin), the pills (B red, A blue), the green screen, the d-pad */
.controls {
  position: relative;
  display: grid;
  flex: 0 0 29%;
  grid-template: auto 1fr / 33% 1fr 22%;
  align-items: center;
  column-gap: 4%;
  padding-top: 5%;
}
.round {
  grid-area: 1 / 3 / 3 / 4;
  align-self: start;
  width: 100%;
  aspect-ratio: 1;
  margin-top: 6%;
  border: 0.8cqw solid #000;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #555, #1c1c1c 60%);
  box-shadow: 0 0.8cqw 0 #000;
}
.round.pressed,
.round:active {
  transform: translateY(0.6cqw);
  box-shadow: 0 0.2cqw 0 #000;
}
.pills {
  grid-area: 1 / 2;
  display: flex;
  gap: 5%;
  justify-content: center;
}
.pill {
  display: grid;
  width: 30%;
  height: 4.4cqw;
  place-items: center;
  border: 0.6cqw solid var(--edge);
  border-radius: 4cqw;
  box-shadow: 0 0.6cqw 0 var(--edge);
}
.pill span {
  font: 2cqw var(--pixel);
  color: #fff;
  text-shadow: 0.25cqw 0.25cqw 0 rgba(0, 0, 0, 0.4);
}
.pill-b { background: linear-gradient(180deg, #ff6b6b, #e8132b); }
.pill-a { background: linear-gradient(180deg, #7fd0ff, #1f8fd6); }
.pill.pressed,
.pill:active {
  transform: translateY(0.5cqw);
  box-shadow: 0 0.1cqw 0 var(--edge);
}
.lcd {
  grid-area: 2 / 2;
  align-self: stretch;
  display: grid;
  margin: 8% 0 10%;
  place-items: center;
  border: 0.8cqw solid var(--edge);
  border-radius: 1cqw;
  background:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px) 0 0 / 100% 3px,
    linear-gradient(180deg, #74d36b, #3fae3c);
  box-shadow: inset 0 0 1.5cqw rgba(0, 0, 0, 0.25);
}
.lcd span {
  max-width: 94%;
  overflow: hidden;
  font: 2.3cqw/1.3 var(--pixel);
  color: #0d3b0f;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dpad {
  position: relative;
  grid-area: 1 / 1 / 3 / 2;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}
.dpad button,
.d-mid {
  background: linear-gradient(180deg, #3a3a42, var(--pad));
  box-shadow: 0 0.7cqw 0 #000;
}
.d-up { grid-area: 1 / 2; border-radius: 1.2cqw 1.2cqw 0 0; }
.d-left { grid-area: 2 / 1; border-radius: 1.2cqw 0 0 1.2cqw; }
.d-right { grid-area: 2 / 3; border-radius: 0 1.2cqw 1.2cqw 0; }
.d-down { grid-area: 3 / 2; border-radius: 0 0 1.2cqw 1.2cqw; }
.d-mid { grid-area: 2 / 2; }
.dpad button::after {
  content: '';
  display: block;
  width: 34%;
  aspect-ratio: 1;
  margin: auto;
  background: #55555f;
  clip-path: polygon(50% 15%, 90% 85%, 10% 85%);
}
.d-down::after { rotate: 180deg; }
.d-left::after { rotate: -90deg; }
.d-right::after { rotate: 90deg; }
.dpad button {
  display: grid;
}
.dpad button.pressed,
.dpad button:active {
  filter: brightness(1.4);
  transform: translateY(0.4cqw);
  box-shadow: 0 0.3cqw 0 #000;
}
.hinge-l {
  position: absolute;
  top: 11%;
  right: 0;
  bottom: 4%;
  width: 3.2%;
  background: repeating-linear-gradient(180deg, var(--body-lo) 0 18%, var(--edge) 18% 19%, var(--body) 19% 33%, var(--edge) 33% 34%);
  border-left: 0.4cqw solid var(--edge);
}
.skin-name {
  position: absolute;
  bottom: 31%;
  left: 50%;
  z-index: 4;
  translate: -50% 0;
  padding: 1cqw 2.4cqw;
  border-radius: 99px;
  font: 2cqw var(--pixel);
  white-space: nowrap;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}
.skin-name.show {
  animation: c-toast 1.6s ease-out;
}
@keyframes c-toast {
  10%, 70% { opacity: 1; transform: translateY(0); }
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 0; }
}

/* ---------- the cover / right panel ---------- */
.dex-r {
  position: absolute;
  top: 7%;
  left: 100%;
  z-index: 2;
  width: 100%;
  height: 93%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.3, 0.05, 0.25, 1.1);
}
.dex.closed .dex-r {
  transform: rotateY(-180deg);
}
.dex.instant,
.dex.instant .dex-r {
  transition: none;
}
.cover-out,
.cover-in {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 4px solid var(--edge);
  clip-path: polygon(0 0, 100% 0, 100% 95%, 96% 100%, 4% 100%, 0 95%);
  background:
    linear-gradient(255deg, rgba(255, 255, 255, 0.25), transparent 30%),
    linear-gradient(180deg, var(--body-hi), var(--body) 20%, var(--body-lo));
}
/* the outside of the cover: seen while closed (mirrored onto the left panel) */
.cover-out {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 2cqw var(--body-lo), inset 0 0 0 2.6cqw var(--edge);
}
.cover-tri {
  width: 22cqw;
  aspect-ratio: 1;
  border: 0;
  background: #f2c40f;
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  filter: drop-shadow(0 0 0 var(--edge));
  animation: tri 1.4s ease-in-out infinite;
}
@keyframes tri {
  50% { transform: translateX(2cqw); }
}
.cover-hint {
  padding: 1.6cqw 3cqw;
  border: 0.6cqw solid var(--edge);
  font: 2.6cqw var(--pixel);
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  animation: t-blinkp 1.1s steps(2, start) infinite;
}
.dex.closed {
  cursor: pointer;
}
/* the inside: the black info screen, the blue keypad of shortcuts, white buttons and two mini screens */
.cover-in {
  display: flex;
  flex-direction: column;
  gap: 4%;
  padding: 10% 8% 8%;
}
.info {
  display: flex;
  min-height: 22%;
  flex-direction: column;
  justify-content: center;
  gap: 1.2cqw;
  padding: 3cqw 4cqw;
  border: 0.8cqw solid var(--edge);
  border-radius: 1cqw;
  font: 2.2cqw/1.5 var(--pixel);
  color: #7cf28a;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 100% 3px,
    #0c0f0c;
  box-shadow: inset 0 0 2cqw rgba(0, 255, 100, 0.12);
}
.info b {
  font-size: 2.8cqw;
  color: #c9ffd0;
}
.info span {
  font: 3.2cqw/1.35 var(--body);
  color: #9ff7a8;
}
.keypad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8cqw;
  padding: 0.8cqw;
  border: 0.8cqw solid var(--edge);
  background: #fff;
}
.keypad button {
  aspect-ratio: 1.1;
  font: 1.7cqw var(--pixel);
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--key) 75%, #fff), var(--key));
  box-shadow: inset 0 -0.6cqw 0 var(--key-lo);
}
.keypad button:hover {
  filter: brightness(1.15);
}
.keypad button:active,
.keypad button.pressed {
  box-shadow: inset 0 0.4cqw 0 var(--key-lo);
}
.cover-row {
  display: flex;
  align-items: center;
  gap: 5%;
}
.w-btn {
  width: 22%;
  height: 4cqw;
  border: 0.6cqw solid var(--edge);
  border-radius: 0.8cqw;
  background: #f4f4f4;
}
.y-led {
  width: 7cqw;
  aspect-ratio: 1;
  margin-left: auto;
  border: 0.6cqw solid var(--edge);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7c2, #f2c40f 60%);
}
.minis {
  display: flex;
  gap: 6%;
}
.minis i {
  flex: 1;
  padding: 2cqw;
  border: 0.8cqw solid var(--edge);
  border-radius: 0.8cqw;
  font: 2.6cqw var(--pixel);
  font-style: normal;
  text-align: center;
  color: #7cf28a;
  background: #0c0f0c;
}
/* wide screens: open, the Pokédex shows both panels side by side */
@media (min-width: 900px) {
  .dex:not(.closed) {
    translate: -100% -50%;
  }
}
/* phones: open, the cover swings out of the way and only the screen panel stays */
@media (max-width: 899px) {
  .dex:not(.closed) .dex-r {
    transform: rotateY(-8deg) translateX(30%);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.3, 0.05, 0.25, 1.1), opacity 0.5s 0.8s;
    pointer-events: none;
  }
}
.keys-help {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font: 13px var(--body);
  color: #e9e6ff;
  background: rgba(0, 0, 0, 0.25);
}
.keys-help b {
  font: 9px var(--pixel);
  color: var(--peach);
}
kbd {
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  font: 12px var(--body);
}
@media (max-width: 1599px) {
  .keys-help {
    display: none;
  }
}
/* the screen powers on like a small CRT: a line, then the picture */
.glass.off::after,
.glass.poweron::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #111;
}
.glass.poweron::after {
  animation: c-power 0.55s steps(10) forwards;
}
@keyframes c-power {
  0% { clip-path: inset(0); }
  30% { clip-path: inset(0); background: linear-gradient(transparent 48%, #fff 48% 52%, transparent 52%), #111; }
  100% { clip-path: inset(50% 0); }
}


/* the controls live outside the screen panel, so the laptop's lid can swing without them */
.ctl-space {
  flex: 0 0 29%;
}
.dex > .controls {
  position: absolute;
  right: 6%;
  bottom: 5%;
  left: 6%;
  z-index: 1;
  height: 24%;
  padding-top: 0;
}
.lid-out {
  display: none;
}

/* ================= computer: the Pokédex as a laptop ================= */
@media (min-width: 900px) {
  .dex {
    --W: min(1120px, calc(100vw - 80px), calc((100dvh - 40px) * 1.32));
    width: var(--W);
    aspect-ratio: 1.32;
    translate: -50% -50% !important;
    perspective: 3200px;
    transition: translate 1.15s cubic-bezier(0.3, 0.05, 0.25, 1.1);
  }
  /* closed, the folded lid hangs below the hinge: lift the whole thing so the closed laptop is centred */
  .dex.closed {
    translate: -50% -81% !important;
  }
  /* the lid: screen, lens and lights */
  .dex-l {
    inset: 0 0 auto;
    height: 63%;
    padding: 2.4% 3% 2.2%;
    clip-path: none;
    border: 4px solid var(--edge);
    border-radius: 2.4cqw 2.4cqw 0.8cqw 0.8cqw;
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    /* it stays in front of the base until it has swung past upright */
    transition: transform 1.15s cubic-bezier(0.3, 0.05, 0.25, 1.1), z-index 0s 0.55s;
    box-shadow: inset 0 0 0 0.4cqw var(--body-hi);
  }
  .dex-l::before,
  .dex-l::after,
  .ctl-space,
  .hinge-l {
    display: none;
  }
  /* shut: the lid lies folded over the base, its outside facing you */
  .dex.closed .dex-l {
    z-index: 5;
    transform: rotateX(-180deg);
  }
  .dex-l > *:not(.lid-out) {
    backface-visibility: hidden;
  }
  .dex-top {
    position: absolute;
    top: 2.5%;
    left: 2.2%;
    z-index: 2;
    gap: 1.2cqw;
  }
  .lens {
    width: 7.4cqw;
    border-width: 0.45cqw;
  }
  .lens i {
    border-width: 0.35cqw;
  }
  .dex-top {
    flex-direction: column;
  }
  .leds {
    gap: 0.9cqw;
    margin-top: 0.6cqw;
    align-self: center;
  }
  .leds i {
    width: 1.8cqw;
    border-width: 0.3cqw;
  }
  .bezel {
    margin: 0 0 0 9.5%;
    padding: 2.2% 4% 4.2%;
  }
  .bezel-dots i {
    width: 1cqw;
    border-width: 0.25cqw;
  }
  .bezel-dots {
    gap: 2cqw;
  }
  .bezel-led {
    left: 9%;
    width: 2.4cqw;
    border-width: 0.3cqw;
  }
  .bezel-speaker {
    width: 7cqw;
    gap: 0.4cqw;
  }
  .bezel-speaker i {
    height: 0.4cqw;
  }
  .glass {
    border-width: 0.5cqw;
  }
  /* the outside of the lid, seen while it lies closed */
  .lid-out {
    position: absolute;
    inset: -4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3%;
    border: 4px solid var(--edge);
    border-radius: inherit;
    transform: rotateX(180deg) translateZ(1px);
    backface-visibility: hidden;
    background:
      linear-gradient(200deg, rgba(255, 255, 255, 0.3), transparent 40%),
      linear-gradient(0deg, var(--body-hi), var(--body) 40%, var(--body-lo));
    font: 1.4cqw var(--pixel);
    color: #fff;
  }
  .lid-out i {
    width: 12cqw;
    aspect-ratio: 1;
    border: 0.7cqw solid var(--edge);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 46%, var(--edge) 46% 54%, #fff 54%);
    box-shadow: inset 0 0 0 1.4cqw var(--body-hi);
  }
  .lid-out span {
    padding: 0.6cqw 1.4cqw;
    border: 0.3cqw solid var(--edge);
    background: rgba(0, 0, 0, 0.35);
    animation: t-blinkp 1.1s steps(2, start) infinite;
  }
  /* the base: the controls on the left, the blue keys as a keyboard, the black screens on the right */
  .dex-r {
    top: 63%;
    left: 0;
    width: 100%;
    height: 37%;
    transform: none !important;
    transition: none;
  }
  .cover-out {
    display: none;
  }
  .cover-in {
    display: grid;
    grid-template: 1fr auto / 1.35fr 1fr;
    gap: 6% 3%;
    padding: 3.5% 3% 4% 34%;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 98% 100%, 2% 100%, 0 88%);
    border-radius: 0 0 2cqw 2cqw;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 12%),
      linear-gradient(180deg, var(--body), var(--body-lo));
  }
  .keypad {
    grid-area: 1 / 1 / 3 / 2;
    align-self: stretch;
    grid-template-rows: 1fr 1fr;
    gap: 0.5cqw;
    padding: 0.5cqw;
    border-width: 0.4cqw;
  }
  .keypad button {
    aspect-ratio: auto;
    font-size: 0.95cqw;
  }
  .info {
    grid-area: 1 / 2;
    min-height: 0;
    padding: 1.2cqw 1.6cqw;
    border-width: 0.4cqw;
    font-size: 0.95cqw;
  }
  .info b {
    font-size: 1.15cqw;
  }
  .info span {
    font-size: 1.4cqw;
  }
  .cover-row {
    display: none;
  }
  .minis {
    grid-area: 2 / 2;
    gap: 4%;
  }
  .minis i {
    padding: 0.8cqw;
    border-width: 0.4cqw;
    font-size: 1.1cqw;
  }
  .dex > .controls {
    top: 66%;
    right: auto;
    bottom: 4%;
    left: 3%;
    z-index: 3;
    width: 29%;
    height: auto;
    grid-template-columns: 32% 1fr 20%;
    column-gap: 4%;
  }
  .round {
    border-width: 0.4cqw;
    box-shadow: 0 0.4cqw 0 #000;
  }
  .pill {
    height: 2cqw;
    border-width: 0.3cqw;
    box-shadow: 0 0.3cqw 0 var(--edge);
  }
  .pill span {
    font-size: 0.9cqw;
  }
  .pills {
    gap: 4%;
  }
  .dex .startbtn {
    width: 30%;
    height: 2cqw;
    border-width: 0.3cqw;
    box-shadow: 0 0.3cqw 0 var(--edge);
  }
  .dex .startbtn span {
    font-size: 0.75cqw;
  }
  /* the black skin button stays inside its column, clear of the blue keys */
  .dex .round {
    width: min(100%, 4.4cqw);
    justify-self: center;
    margin-top: 0.6cqw;
  }
  .lcd {
    border-width: 0.4cqw;
  }
  .lcd span {
    font-size: 1cqw;
  }
  .dpad button,
  .d-mid {
    box-shadow: 0 0.35cqw 0 #000;
  }
  .skin-name {
    bottom: 3%;
    font-size: 1cqw;
  }
}
@media (max-width: 899px) {
  .hints {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}


/* ================= the buttons, polished ================= */
/* the lens: a chrome ring, a deep blue glass, two reflections */
.lens {
  background: conic-gradient(from 200deg, #f4f4f4, #9aa0a8, #ffffff, #b9bec6, #f4f4f4);
}
.lens i {
  box-shadow: inset 0 -0.8cqw 1.4cqw rgba(0, 0, 40, 0.45);
}
.lens i::before,
.lens i::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.lens i::before {
  top: 16%;
  left: 20%;
  width: 26%;
  height: 18%;
  rotate: -30deg;
}
.lens i::after {
  right: 22%;
  bottom: 18%;
  width: 10%;
  height: 10%;
  background: rgba(255, 255, 255, 0.5);
}
/* the black round button: a dark ring, a glossy dome */
.round {
  position: relative;
  background: radial-gradient(circle at 38% 30%, #6a6a72 0, #2a2a30 38%, #0d0d10 70%);
  box-shadow: 0 0.8cqw 0 #000, 0 0 0 1cqw rgba(0, 0, 0, 0.25);
}
.round::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  rotate: -25deg;
}
/* the pills: candy gloss with an engraved letter */
.pill {
  position: relative;
  overflow: hidden;
}
.pill::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 12%;
  right: 12%;
  height: 34%;
  border-radius: 4cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
}
.pill span {
  position: relative;
  z-index: 1;
}
/* the d-pad: a raised cross in a round well, bevelled arms, embossed arrows, a concave centre */
.dpad::before {
  content: '';
  position: absolute;
  inset: -7%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.12) 65%, transparent 71%);
  box-shadow: inset 0 0.6cqw 1cqw rgba(0, 0, 0, 0.25);
}
.dpad button,
.d-mid {
  background: linear-gradient(180deg, #4a4a54 0, #2a2a31 45%, #18181d 100%);
}
.d-up { background: linear-gradient(180deg, #55555f, #26262c) !important; }
.d-down { background: linear-gradient(0deg, #1a1a1f, #2c2c33) !important; }
.d-left { background: linear-gradient(90deg, #4d4d57, #26262c) !important; }
.d-right { background: linear-gradient(270deg, #1d1d22, #2c2c33) !important; }
.dpad button::after {
  width: 38%;
  background: #6d6d78;
  filter: drop-shadow(0 0.25cqw 0 #0a0a0c);
}
.d-mid::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #0e0e12, #33333b);
  box-shadow: inset 0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.7);
}
.d-mid {
  position: relative;
}
/* the green screen: a pixel grid, an inner shadow and a tiny label */
.lcd {
  position: relative;
  background:
    linear-gradient(90deg, rgba(0, 40, 0, 0.07) 1px, transparent 1px) 0 0 / 3px 100%,
    linear-gradient(rgba(0, 40, 0, 0.07) 1px, transparent 1px) 0 0 / 100% 3px,
    radial-gradient(circle at 50% 40%, #8be07f, #3fae3c 80%);
  box-shadow: inset 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.35), 0 0.3cqw 0 var(--body-hi);
}
.lcd::before {
  content: 'BEYOND OS';
  position: absolute;
  top: 6%;
  left: 7%;
  font: 1.3cqw var(--pixel);
  color: rgba(13, 59, 15, 0.55);
}
/* small engraved labels under the controls */
.round::before {
  content: 'SKIN';
  position: absolute;
  top: 112%;
  left: 50%;
  translate: -50% 0;
  font: 1.5cqw var(--pixel);
  color: var(--edge);
  opacity: 0.7;
}
/* the blue keys: a white grid, glossy keys, an icon and a label each */
.keypad button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
  overflow: hidden;
}
.keypad button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.keypad img {
  width: 5.2cqw;
  height: 5.2cqw;
  image-rendering: pixelated;
  filter: drop-shadow(0 0.25cqw 0 rgba(0, 0, 0, 0.35));
}
/* the info screen: scanlines and a soft glow */
.info {
  position: relative;
  overflow: hidden;
}
.info::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(124, 242, 138, 0.08), transparent 40%);
  pointer-events: none;
}
/* the bezel gets a soft bevel */
.bezel {
  background: linear-gradient(160deg, #f6f6f6, var(--bezel-c) 40%, #c4c4c4);
}

/* the game screen reads larger on wide screens */
@media (min-width: 900px) {
  .screen {
    zoom: 1.3;
  }
}
@media (min-width: 1300px) and (min-height: 760px) {
  .screen {
    zoom: 1.55;
  }
}

/* ================= bigger screen ================= */
/* phone: a taller body and less room for the controls, so the screen is larger */
.dex {
  --L: min(calc(100vw - 16px), calc((100dvh - 16px) * 0.6), 470px);
  aspect-ratio: 0.6;
}
.dex-top {
  flex-basis: 12%;
}
.lens {
  width: 18cqw;
}
.ctl-space {
  flex-basis: 25%;
}
.dex > .controls {
  bottom: 4%;
  height: 21%;
}
.bezel {
  padding: 4.5% 5% 11%;
}

@media (min-width: 900px) {
  /* computer: a wider laptop, the lid taking most of the height */
  .dex {
    --W: min(1320px, calc(100vw - 48px), calc((100dvh - 28px) * 1.5));
    aspect-ratio: 1.5;
  }
  .dex.closed {
    translate: -50% -85% !important;
  }
  .dex-l {
    height: 71%;
    padding: 2% 2.4% 1.8%;
  }
  .bezel {
    margin-left: 8%;
    padding: 1.8% 3% 3.6%;
  }
  .lens {
    width: 6.4cqw;
  }
  .dex-r {
    top: 71%;
    height: 29%;
  }
  .cover-in {
    grid-template: 1fr auto / 1.45fr 1fr;
    padding: 2.4% 2.4% 2.8% 33%;
    gap: 7% 2.4%;
  }
  .dex > .controls {
    top: 73%;
    bottom: 3%;
    left: 2.6%;
    width: 28%;
  }
  .keypad img {
    width: 2.4cqw;
    height: 2.4cqw;
  }
  .keypad button {
    gap: 0.2cqw;
    font-size: 0.85cqw;
  }
  .lcd::before {
    font-size: 0.6cqw;
  }
  .round::before {
    font-size: 0.7cqw;
  }
  .round::after {
    rotate: -25deg;
  }
  .info {
    padding: 1cqw 1.4cqw;
  }
  /* the base: speaker grilles at both ends and a power light */
  .cover-in::before,
  .cover-in::after {
    content: '';
    position: absolute;
    top: 30%;
    width: 0.9%;
    height: 40%;
    background: repeating-linear-gradient(180deg, var(--edge) 0 0.35cqw, transparent 0.35cqw 0.8cqw);
    opacity: 0.6;
  }
  .cover-in::before { left: 1%; }
  .cover-in::after { right: 1%; }
}


/* the extra START key for the laptop (on a phone the lens is START) */
.startbtn {
  display: grid;
  width: 30%;
  height: 4.4cqw;
  place-items: center;
  border: 0.6cqw solid var(--edge);
  border-radius: 4cqw;
  background: linear-gradient(180deg, #ffffff, #d6d6d6);
  box-shadow: 0 0.6cqw 0 var(--edge);
  animation: start-pulse 1.6s ease-in-out infinite;
}
.startbtn span {
  font: 1.7cqw var(--pixel);
  color: var(--edge);
}
.startbtn.pressed,
.startbtn:active {
  transform: translateY(0.5cqw);
  box-shadow: 0 0.1cqw 0 var(--edge);
}
/* it calls for attention while the title waits, and calms down once the game has started */
@keyframes start-pulse {
  50% { box-shadow: 0 0.6cqw 0 var(--edge), 0 0 2cqw rgba(255, 240, 170, 0.9); }
}
.dex.playing .startbtn {
  animation: none;
}

/* ================= phone: the Pokédex fills the whole screen ================= */
@media (max-width: 899px) {
  .dex {
    --L: 100vw;
    width: 100vw;
    height: 100dvh;
    aspect-ratio: auto;
    filter: none;
  }
  .dex-l {
    padding: 0 4.5% 4%;
    clip-path: polygon(0 0, 48% 0, 56% 4.2%, 100% 4.2%, 100% 100%, 0 100%);
  }
  .dex-l::before {
    height: 12%;
    clip-path: polygon(0 32%, 46% 32%, 54% 37%, 100% 37%, 100% 39%, 54% 39%, 46% 34%, 0 34%);
  }
  .dex-l::after {
    border-width: 0;
  }
  .dex-top {
    flex-basis: 9.5%;
  }
  .lens {
    width: 16cqw;
  }
  .bezel {
    margin-top: 2%;
    padding: 3.5% 4% 10%;
  }
  .ctl-space {
    flex-basis: 19%;
  }
  .dex > .controls {
    right: 5%;
    bottom: 2.5%;
    left: 5%;
    height: 17%;
  }
  .dex-r {
    top: 4.2%;
    height: 95.8%;
  }
  .cover-out,
  .cover-in {
    clip-path: none;
    border-width: 0;
  }
  .hinge-l {
    top: 6%;
    bottom: 0;
  }
  /* the safe areas of notched phones */
  .dex-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* the title's string lights */
.t-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.t-wire {
  fill: none;
  stroke: #1a1430;
  stroke-width: 0.35;
  vector-effect: non-scaling-stroke;
  stroke-opacity: 0.85;
}
.t-bulbs i {
  position: absolute;
  width: 1.5%;
  aspect-ratio: 0.8;
  translate: -50% -20%;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 35%, #fff, var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000) 100%);
  box-shadow: 0 0 0.8cqw 0.3cqw var(--c), 0 0 2.6cqw 0.8cqw color-mix(in srgb, var(--c) 55%, transparent);
  animation: bulb var(--d) ease-in-out infinite;
  pointer-events: none;
}
.t-bulbs i::before {
  content: '';
  position: absolute;
  top: -28%;
  left: 30%;
  width: 40%;
  height: 32%;
  border-radius: 1px;
  background: #2a2140;
}
@keyframes bulb {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.45; filter: saturate(0.7); }
  55% { opacity: 1; }
}

/* ================= controls: START + skin on top, the tall A/B keys on the right ================= */
.dex .pills {
  grid-area: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
}
.dex .startbtn {
  width: 52%;
}
.dex .round {
  position: relative;
  grid-area: auto;
  width: 6cqw;
  aspect-ratio: 1;
  margin: 0;
  justify-self: auto;
  align-self: center;
  border-width: 0.6cqw;
  box-shadow: 0 0.5cqw 0 #000;
}
.dex .round::before {
  top: 50%;
  left: 115%;
  translate: 0 -50%;
}
.ab {
  grid-area: 1 / 3 / 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12%;
  height: 100%;
}
.key {
  display: grid;
  width: 40%;
  height: 72%;
  place-items: center;
  border: 0.7cqw solid var(--edge);
  border-radius: 5cqw;
  box-shadow: 0 0.8cqw 0 var(--edge), inset 0 0.6cqw 0 rgba(255, 255, 255, 0.45);
  position: relative;
  overflow: hidden;
}
.key::after {
  content: '';
  position: absolute;
  top: 7%;
  left: 18%;
  width: 34%;
  height: 32%;
  border-radius: 5cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.key span {
  position: relative;
  z-index: 1;
  font: 3.6cqw var(--pixel);
  color: #fff;
  text-shadow: 0.3cqw 0.3cqw 0 rgba(0, 0, 0, 0.35);
}
.key-b {
  translate: 0 12%;
  background: linear-gradient(180deg, #ff6b6b, #e8132b 60%, #b80d22);
}
.key-a {
  translate: 0 -12%;
  background: linear-gradient(180deg, #7fd0ff, #1f8fd6 60%, #136aa6);
}
.key.pressed,
.key:active {
  box-shadow: 0 0.15cqw 0 var(--edge), inset 0 0.6cqw 0 rgba(255, 255, 255, 0.45);
  margin-top: 1.2cqw;
}
@media (min-width: 900px) {
  .dex .startbtn {
    width: 52%;
  }
  .dex .round {
    width: 2.6cqw;
    border-width: 0.3cqw;
    box-shadow: 0 0.3cqw 0 #000;
  }
  .key {
    border-width: 0.35cqw;
    border-radius: 2.4cqw;
    box-shadow: 0 0.4cqw 0 var(--edge), inset 0 0.3cqw 0 rgba(255, 255, 255, 0.45);
  }
  .key span {
    font-size: 1.5cqw;
  }
  /* wider keys on the laptop: the action column gets more room */
  .dex > .controls {
    grid-template-columns: 30% 1fr 27% !important;
  }
  .key {
    width: 44%;
    height: 78%;
  }
  .key.pressed,
  .key:active {
    box-shadow: 0 0.1cqw 0 var(--edge);
    margin-top: 0.6cqw;
  }
}

/* START fits its label on every phone: a fixed, roomy pill and a font sized to it */
@media (max-width: 899px) {
  .dex .pills {
    gap: 5%;
  }
  .dex .startbtn {
    width: 58%;
    min-width: 0;
    height: auto;
    padding: 1.6cqw 0;
    border-width: 0.5cqw;
  }
  .dex .startbtn span {
    font-size: 2.6cqw;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .dex .round {
    width: 7.5cqw;
  }
  /* the SKIN label sits under the black button instead of running off to the side */
  .dex .round::before {
    top: 112%;
    left: 50%;
    translate: -50% 0;
    font-size: 1.7cqw;
  }
}
@media (min-width: 1600px) {
  .keys-help {
    display: flex;
  }
}

@media (max-width: 899px) {
  .t-art {
    width: max(100cqw, 100cqh);
    translate: -60% -50%;
  }
}

/* ================= the game screen ================= */
.screen {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  outline: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px) 0 0 / 100% 3px,
    var(--cream);
}
.bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 3px solid var(--red-dark);
  font: 10px var(--pixel);
  color: #fff;
  background: var(--red);
}
.bar-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bar-bat {
  width: 20px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff 70%, transparent 70%) 2px 2px / calc(100% - 4px) calc(100% - 4px) no-repeat;
}
.view {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  animation: v-in 0.25s steps(4);
}
@keyframes v-in {
  from { opacity: 0.2; }
}
.hints {
  flex-shrink: 0;
  padding: 6px 10px;
  border-top: 3px solid #1b1b1b;
  font: 13px var(--body);
  color: #e8e2d4;
  background: var(--ink);
}
.hints b {
  display: inline-block;
  margin: 0 3px 0 8px;
  padding: 0 4px;
  border-radius: 3px;
  font: 9px var(--pixel);
  color: var(--ink);
  background: var(--cream);
}
.hints b:first-child {
  margin-left: 0;
}
/* the screen change: a pixel blind wipe */
.wipe {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 24px);
  animation: wipe 0.38s steps(6) forwards;
  pointer-events: none;
}
.wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--ink) 12px 24px);
  animation: wipe 0.38s steps(6) 0.06s forwards;
}
@keyframes wipe {
  0% { clip-path: inset(0 100% 0 0); }
  45%, 55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
.wipe-back,
.wipe-back::after {
  animation-direction: reverse;
}

/* the cursor: a thick ink frame and a bouncing arrow */
.view [data-i] {
  position: relative;
  transition: transform 0.08s;
}
.view [data-i].on {
  z-index: 1;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* the cursor: a small red arrow bouncing over the top-right corner of the selected card */
.view [data-i].on::before {
  content: '▼';
  position: absolute;
  top: 0;
  right: 6px;
  z-index: 2;
  translate: 0 -70%;
  font-size: 11px;
  color: var(--red);
  text-shadow: 1px 1px 0 var(--ink);
  animation: cur 0.6s steps(2) infinite;
}
@keyframes cur {
  50% { transform: translateY(3px); }
}
/* the view gets a little room on top so the arrow of the first row is never cut */
.view {
  padding-top: 14px;
}

/* boot */
.boot {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.boot-logo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--pixel);
  animation: boot-drop 1.3s steps(12) both;
}
.boot-logo span {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.boot-logo b {
  font-size: clamp(22px, 5vh, 34px);
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--cream-2);
}
@keyframes boot-drop {
  from { transform: translateY(-120px); opacity: 0; }
  70% { transform: translateY(0); opacity: 1; }
}
.boot-sub {
  font: 8px var(--pixel);
  color: var(--ink-2);
}
.boot-press {
  padding: 8px 14px;
  font: 10px var(--pixel);
  animation: t-blinkp 1s steps(2, start) infinite;
}
.boot-press.on {
  outline: 0 !important;
}
.boot-press.on::before {
  display: none;
}

/* main menu: a grid of tiles and a line describing the one under the cursor */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  font: 9px var(--pixel);
  text-align: left;
  background: #fff;
  box-shadow: 3px 3px 0 var(--cream-2);
}
.tile img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.tile.on {
  color: #fff;
  background: var(--red);
  outline-color: var(--red-dark) !important;
}
.menu-desc {
  margin-top: 12px;
  padding: 8px 10px;
  border: 3px double var(--ink);
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
}

/* journey: the trainer card */
.card {
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #fbf6ea;
  box-shadow: 4px 4px 0 var(--cream-2);
}
.card-top {
  position: relative;
  padding: 8px 10px 6px 34px;
  border-bottom: 3px solid var(--ink);
  background: linear-gradient(90deg, var(--red) 0 22px, #fbf6ea 22px);
}
.card-top b {
  display: block;
  font: 9px var(--pixel);
  color: var(--red);
}
.card-top small {
  font: 7px var(--pixel);
  color: var(--ink-2);
}
.card-pkm {
  position: absolute;
  top: 50%;
  left: 3px;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  font: 7px var(--pixel);
  color: #fff;
}
.card-body {
  display: flex;
  gap: 10px;
  padding: 10px;
}
.card-photo {
  display: grid;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 55%, #f0e3c7 56%);
}
.card-photo img {
  max-width: 70px;
  max-height: 70px;
}
.card-name {
  font: 700 22px var(--body);
}
.card-title {
  font-size: 13px;
  color: var(--red);
}
.card-info dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin-top: 6px;
}
.card-info dt {
  font: 7px var(--pixel);
  color: var(--ink-2);
}
.card-info dd {
  font: 600 13px var(--body);
  color: var(--red-dark);
}
.badges {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  border-top: 2px dashed var(--cream-2);
}
.badge {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink-2);
  clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background: var(--cream-2);
}
.badge.got {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fff2b0, #e2b23c 60%, #9a7621);
}
.card-dex {
  display: flex;
  justify-content: space-around;
  padding: 6px;
  font: 7px var(--pixel);
  color: var(--ink-2);
  background: var(--cream-2);
}
.card-dex b {
  color: var(--ink);
}
.row-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  font: 7px var(--pixel);
  background: #fff;
}
.link img {
  width: 30px;
  height: 30px;
}

/* lists: benefits, bag, radio, options */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  text-align: left;
  background: #fff;
}
.row img {
  width: 30px;
  height: 30px;
}
.row-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.row-main b {
  font-weight: 700;
}
.row-main small {
  font-size: 13px;
  color: var(--ink-2);
}
.row.off {
  opacity: 0.6;
}
.pill {
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 7px var(--pixel);
}
.pill-on {
  color: #fff;
  background: var(--teal);
}
.qty,
.opt {
  font: 9px var(--pixel);
}
.row.on {
  background: #fff7e3;
}

/* pokédex grid */
.dex-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dex-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0 4px;
  border: 3px solid var(--cream-2);
  border-radius: 6px;
  background: #fff;
}
.dex-cell img {
  width: 100%;
  max-width: 72px;
  aspect-ratio: 1;
  filter: brightness(0) opacity(0.25);
}
.dex-cell.own img {
  filter: none;
}
.dex-cell small {
  font: 7px var(--pixel);
  color: var(--ink-2);
}
.dex-cell.own {
  border-color: var(--ink);
}
.dex-cell.on {
  background: #fff1d6;
}

/* species / summary */
.sp {
  position: relative;
  display: grid;
  grid-template-columns: 44% 1fr;
  gap: 12px;
  align-items: center;
  min-height: 100%;
}
.sp-art {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(180deg, #cdeef0 0 62%, #a9d482 62%);
}
.sp-art img {
  position: relative;
  z-index: 1;
  width: 70%;
  max-height: 80%;
  object-fit: contain;
  animation: sp-bob 1.4s steps(2) infinite;
}
.sp-floor {
  position: absolute;
  bottom: 18%;
  width: 54%;
  height: 12%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
}
@keyframes sp-bob {
  50% { transform: translateY(-3px); }
}
.sp-name {
  font: 700 24px var(--body);
}
.sp-name small {
  font-size: 14px;
  color: var(--ink-2);
}
.sp-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.type {
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font: 7px var(--pixel);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: var(--t, #888);
}
.sp-meta {
  font-size: 13px;
  color: var(--ink-2);
}
.sp-stats {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}
.stat {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  align-items: center;
  gap: 6px;
  font: 7px var(--pixel);
}
.stat i {
  height: 8px;
  border: 2px solid var(--ink);
  background: #fff;
}
.stat b {
  display: block;
  width: var(--v);
  height: 100%;
  background: var(--teal);
  animation: grow 0.5s steps(8);
}
@keyframes grow {
  from { width: 0; }
}
.stat em {
  font-style: normal;
  text-align: right;
}
.sp-owned {
  position: absolute;
  top: 0;
  right: 0;
  font: 7px var(--pixel);
  color: var(--teal);
}
.moves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.moves li {
  padding: 5px 6px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

/* party */
.party {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mon {
  display: grid;
  width: 100%;
  grid-template-columns: 48px 1fr auto;
  grid-template-areas: 'img main lv' 'img hp num';
  align-items: center;
  column-gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 3px solid var(--ink);
  border-radius: 24px 8px 8px 24px;
  text-align: left;
  background: linear-gradient(90deg, #dff2f4, #fff 60%);
}
.mon img {
  grid-area: img;
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.mon-main {
  grid-area: main;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mon-main small {
  font-size: 12px;
  color: var(--ink-2);
}
.mon-lv {
  grid-area: lv;
  font: 8px var(--pixel);
}
.hp {
  grid-area: hp;
  height: 8px;
  border: 2px solid var(--ink);
  background: #fff;
}
.hp i {
  display: block;
  width: calc(var(--k) * 100%);
  height: 100%;
  background: var(--c);
}
.mon-hp {
  grid-area: num;
  font: 7px var(--pixel);
}
.mon.moving {
  background: #ffe3a3;
  animation: mv 0.5s steps(2) infinite;
}
@keyframes mv {
  50% { transform: translateX(4px); }
}
.mon.fainted {
  background: #f0d6d6;
}
.mon.fainted img {
  filter: grayscale(1);
}

/* bag */
.pockets {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.pockets span {
  padding: 4px 8px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font: 7px var(--pixel);
  background: #fff;
}
.pockets .on {
  color: #fff;
  background: var(--teal);
}
.pockets::before,
.pockets::after {
  align-self: center;
  font: 9px var(--pixel);
  color: var(--red);
}
.pockets::before { content: '◀'; }
.pockets::after { content: '▶'; }
.bag-desc {
  position: sticky;
  bottom: 0;
  margin-top: 10px;
  padding: 8px 10px;
  border: 3px double var(--ink);
  border-radius: 6px;
  font-size: 15px;
  background: #fff;
}

/* store: the neon of the Champion Store */
.view-store {
  background:
    radial-gradient(circle at 20% 0, rgba(176, 38, 255, 0.35), transparent 50%),
    linear-gradient(180deg, #24063a, #12021f);
}
.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.pass {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 2px solid var(--neon);
  border-radius: 8px;
  font: 600 14px var(--body);
  text-align: left;
  color: #fff;
  background: rgba(81, 16, 122, 0.6);
  box-shadow: 0 0 10px rgba(176, 38, 255, 0.45), inset 0 0 10px rgba(176, 38, 255, 0.25);
}
.pass img {
  width: 30px;
  height: 30px;
}
.pass em {
  position: absolute;
  top: -8px;
  right: 6px;
  padding: 2px 5px;
  font: 6px var(--pixel);
  font-style: normal;
  color: #12021f;
  background: var(--neon-soft);
}
.view-store [data-i].on {
  outline-color: var(--neon-soft);
}
.view-store [data-i].on::before {
  color: var(--neon-soft);
}
.view-store .menu-desc {
  color: #fff;
  border-color: var(--neon);
  background: rgba(18, 2, 31, 0.8);
}

/* radio */
.fm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fm-cover {
  position: relative;
  height: 90px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px;
}
.fm-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fm-onair {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 6px;
  font: 7px var(--pixel);
  color: #fff;
  background: var(--red);
}
.fm-eq {
  display: flex;
  height: 34px;
  align-items: flex-end;
  gap: 3px;
  padding: 0 4px;
}
.fm-eq i {
  flex: 1;
  height: calc(var(--h, 0.1) * 100%);
  background: linear-gradient(0deg, var(--teal), var(--mint));
  transition: height 0.08s steps(2);
}
.fm-n {
  font: 9px var(--pixel);
  color: var(--ink-2);
}
.row.playing {
  background: #dff2f4;
}

/* dialog and choice boxes */
.dialog {
  position: absolute;
  right: 8px;
  bottom: 40px;
  left: 8px;
  z-index: 10;
  min-height: 72px;
  padding: 18px 14px 12px;
  border: 4px double var(--ink);
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  animation: d-in 0.18s steps(3);
  cursor: pointer;
}
@keyframes d-in {
  from { transform: translateY(20px); opacity: 0; }
}
.dialog-who {
  position: absolute;
  top: -12px;
  left: 12px;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font: 7px var(--pixel);
  color: #fff;
  background: var(--red);
}
.dialog-next {
  position: absolute;
  right: 10px;
  bottom: 6px;
  font-size: 11px;
  font-style: normal;
  color: var(--red);
  opacity: 0;
}
.dialog.done .dialog-next {
  opacity: 1;
  animation: cur 0.6s steps(2) infinite;
}
.choice {
  position: absolute;
  right: 10px;
  bottom: 44px;
  z-index: 11;
  display: flex;
  min-width: 130px;
  flex-direction: column;
  padding: 6px;
  border: 4px double var(--ink);
  border-radius: 8px;
  background: #fff;
  animation: d-in 0.15s steps(3);
}
.choice button {
  position: relative;
  padding: 6px 8px 6px 22px;
  font: 9px var(--pixel);
  text-align: left;
}
.choice button.on::before {
  content: '▶';
  position: absolute;
  left: 6px;
  color: var(--red);
}

/* ================= detail page ================= */
.view-detail {
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.025) 0 6px, transparent 6px 12px),
    var(--cream);
}
.dt {
  display: grid;
  grid-template-columns: minmax(0, 40%) 1fr;
  grid-template-areas:
    'card head'
    'card box'
    'inc  inc'
    'shop shop'
    'acts acts';
  gap: 10px 14px;
  align-items: start;
}
/* the collectible card: a double pixel frame, a category ribbon, the art, stars and the code */
.dt-card {
  grid-area: card;
  position: relative;
  padding: 7px 7px 6px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background:
    linear-gradient(135deg, #ffe58a, #f2b33a 45%, #fff0b8 60%, #e0a12a);
  box-shadow: inset 0 0 0 3px #fff6d2, 4px 4px 0 rgba(0, 0, 0, 0.18);
}
.dt-pass .dt-card {
  background: linear-gradient(135deg, #e0b1ff, #8a1fd6 45%, #f0d2ff 60%, #6d10a8);
  box-shadow: inset 0 0 0 3px #f4e2ff, 0 0 14px rgba(176, 38, 255, 0.45), 4px 4px 0 rgba(0, 0, 0, 0.2);
}
.dt-benefit .dt-card {
  background: linear-gradient(135deg, #bff0ff, #2fa6c9 45%, #e6fbff 60%, #187c8d);
  box-shadow: inset 0 0 0 3px #e9fbff, 4px 4px 0 rgba(0, 0, 0, 0.18);
}
.dt-cat {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  font: 7px var(--pixel);
  white-space: nowrap;
  color: #fff;
  background: var(--red);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}
.dt-pic {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 40%, #fff, #ffe9b8 40%, #f2c06a);
}
.dt-art {
  width: 82%;
  max-height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
  animation: dt-float 3s ease-in-out infinite;
}
.dt-pixel {
  width: 58%;
  image-rendering: pixelated;
}
.dt-photo {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  animation: dt-zoom 9s ease-in-out infinite alternate;
  filter: none;
}
@keyframes dt-zoom {
  to { transform: scale(1.08); }
}
/* the holographic shine sweeping across the card */
.dt-shine {
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 40%;
  rotate: 20deg;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  mix-blend-mode: screen;
  animation: dt-shine 3.4s ease-in-out infinite;
}
@keyframes dt-float {
  50% { transform: translateY(-5px); }
}
@keyframes dt-shine {
  0%, 55% { translate: 0 0; }
  100% { translate: 440% 0; }
}
.dt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 2px 4px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #fff;
}
.dt-stars {
  font-size: 13px;
  letter-spacing: 1px;
  color: #f2a900;
  text-shadow: 1px 1px 0 var(--ink);
}
.dt-code {
  font: 7px var(--pixel);
  color: var(--ink-2);
}
/* the title bar: the name in the pixel face, the price on a coin tag */
.dt-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dt-name {
  padding: 7px 9px 6px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  font: 12px/1.35 var(--pixel);
  color: #fff;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 3px 3px 0 var(--cream-2);
}
.dt-pass .dt-name {
  background: linear-gradient(180deg, #9b2cff, #51107a);
}
.dt-benefit .dt-name {
  background: linear-gradient(180deg, #2fa6c9, #187c8d);
}
.dt-price {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font: 10px var(--pixel);
  color: var(--ink);
  background: #fff7d6;
  box-shadow: 2px 2px 0 var(--cream-2);
}
.dt-coin {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid #8a5a00;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #f2c40f 55%, #c79a00);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  animation: dt-coin 2.4s steps(6) infinite;
}
@keyframes dt-coin {
  50% { transform: scaleX(0.35); }
}
.dt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dt-facts div {
  padding: 3px 7px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
}
.dt-facts dt {
  font: 6px var(--pixel);
  color: var(--ink-2);
}
.dt-facts dt {
  margin-bottom: 2px;
}
.dt-facts dd {
  font: 8px var(--pixel);
  color: var(--red-dark);
}
/* the description: a game dialog box, one page at a time */
.dt-box {
  grid-area: box;
  position: relative;
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 16px 12px 18px;
  border: 4px double var(--ink);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  background: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.dt-box-who {
  position: absolute;
  top: -11px;
  left: 10px;
  padding: 2px 7px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  font: 7px var(--pixel);
  color: #fff;
  background: var(--red);
}
.dt-box-page {
  position: absolute;
  right: 26px;
  bottom: 4px;
  font: 7px var(--pixel);
  color: var(--ink-2);
}
.dt-box-next {
  position: absolute;
  right: 9px;
  bottom: 4px;
  font-size: 11px;
  font-style: normal;
  color: var(--red);
  opacity: 0;
}
.dt-box.done .dt-box-next {
  opacity: 1;
  animation: cur 0.6s steps(2) infinite;
}
.dt-sec {
  margin-bottom: 5px;
  font: 8px var(--pixel);
  color: var(--red-dark);
}
.dt-sec::before {
  content: '◆ ';
  color: var(--gold);
}
/* what it includes: an item list with pixel markers */
.dt-inc {
  grid-area: inc;
  padding: 9px 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: #fffaf0;
}
.dt-inc ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 10px;
}
.dt-inc li {
  position: relative;
  padding-left: 14px;
  font-size: 14px;
}
.dt-inc li::before {
  content: '';
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--red);
  box-shadow: 1px 1px 0 var(--ink);
}
/* variants: a small shop list */
.dt-shop {
  grid-area: shop;
  display: grid;
  gap: 6px;
}
.dt-var {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 7px 10px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  text-align: left;
  background: #fff;
}
.dt-var b {
  font: 9px var(--pixel);
}
.dt-price-s {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 8px var(--pixel);
}
.dt-var small {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink-2);
}
.dt-var.on {
  background: #fff7e3;
}
/* actions: a small game menu */
.dt-acts {
  grid-area: acts;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}
.dt-btn {
  min-width: 96px;
  padding: 9px 14px;
  border: 3px solid var(--ink);
  border-radius: 6px;
  font: 9px var(--pixel);
  color: #fff;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  box-shadow: 0 3px 0 var(--ink);
}
.dt-pass .dt-btn:not(.dt-back) {
  background: linear-gradient(180deg, #9b2cff, #51107a);
}
.dt-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
.dt-back {
  color: var(--ink);
  background: #fff !important;
}
.screen {
  container-type: inline-size;
}
/* narrow screens: everything in one column, the card smaller and centred */
@container (max-width: 460px) {
  .dt {
    grid-template-columns: 1fr;
    grid-template-areas: 'card' 'head' 'box' 'inc' 'shop' 'acts';
  }
  .dt-card {
    width: 66%;
    justify-self: center;
  }
  .dt-head {
    align-items: stretch;
  }
  .dt-price {
    align-self: center;
  }
  .dt-facts {
    justify-content: center;
  }
  .dt-acts {
    justify-content: stretch;
  }
  .dt-btn {
    flex: 1;
  }
}

/* the store cards: category on top, name and price */
.pass {
  padding-top: 14px;
}
.pass em {
  top: 4px;
  right: auto;
  left: 8px;
  max-width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pass-txt {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.pass-txt b {
  font-weight: 600;
  line-height: 1.15;
}
.pass-txt small {
  font: 7px var(--pixel);
  color: var(--neon-soft);
}

/* the store grid: two equal columns that never overflow, compact cards */
.store-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pass {
  min-width: 0;
  gap: 6px;
  padding: 16px 8px 8px;
  font-size: 13px;
}
.pass img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.pass-txt b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  hyphens: auto;
}
.pass-txt small {
  font-size: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pass em {
  font-size: 6px;
}
/* the description box shows the page turn keys */
.dt-box-page::before {
  content: '◀ ';
  color: var(--red);
}
.dt-box-page::after {
  content: ' ▶';
  color: var(--red);
}
.dt-box-page:empty::before,
.dt-box-page:empty::after {
  content: '';
}
.dt-box-page {
  right: 26px;
}

/* every grid and row shrinks to the screen instead of pushing past its right edge */
.menu-grid,
.row-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.row-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dex-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tile,
.link,
.row,
.mon,
.pass,
.dt-var,
.dt-btn {
  min-width: 0;
}
.tile span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dt-acts {
  flex-wrap: wrap;
}
.dt-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
@container (max-width: 340px) {
  .tile {
    gap: 5px;
    padding: 7px 6px;
    font-size: 8px;
  }
  .tile img {
    width: 24px;
    height: 24px;
  }
  .dt-btn {
    font-size: 8px;
  }
}

/* the page never moves sideways: nothing may reach past the viewport */
html,
body {
  overflow-x: clip;
  overscroll-behavior: none;
}
@media (max-width: 899px) {
  /* the cover and its hinge belong to the laptop; on a phone they would sit off-screen to the right */
  .dex-r,
  .hinge-l {
    display: none !important;
  }
  .dex {
    overflow: clip;
  }
}

/* ================= phones ================= */
@media (max-width: 640px), (max-height: 640px) {
  .view [data-i].on::before {
    font-size: 10px;
  }
  .dex-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .sp {
    grid-template-columns: 1fr;
  }
  .sp-art {
    width: 62%;
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}