:root {
  color-scheme: only light;
  --ink: #17213d;
  --ink-soft: #45546e;
  --paper: #f8fbff;
  --panel-blue: #dceaf7;
  --frame-mid: #8d9eb1;
  --coral: #e35454;
  --coral-dark: #9d303d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #467fc4;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
}

button,
input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #528bd0;
  container-type: size;
}

/* 1 GBA pixel: the console screen is treated as a 240×160 LCD, integer-ish
   scaled. Every Gen-3 UI metric below is a multiple of this unit. */
.title-screen,
.birch,
.role-select,
.main-menu,
.topbar,
footer {
  --u: min(calc(100cqh / 160), calc(100cqw / 240));
}

.game-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.1;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.2) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(9,37,80,.12) 5px 6px);
  mix-blend-mode: soft-light;
}

#ocean {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: manipulation;
  cursor: default;
}

/* ── FireRed-layout title screen: full-black screen, dark-red bars ~12%
   from top and bottom, teal band across the middle behind the logo +
   character zone, logo top-center, version banner below-left, big Juno
   hero on the right, silver PRESS START blinking 16f on / 16f off. ── */
.title-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  color: #ececf2;
  background: #000;
  transform: translateY(-105%);
  animation: title-screen-drop 760ms steps(12, end) 80ms forwards;
  will-change: transform;
}

.title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  opacity: .12;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.16) 3px 4px);
  mix-blend-mode: soft-light;
}

/* One layered gradient paints the whole GBA backdrop: black caps top and
   bottom (~12%), 5u dark-red bars with a 1u lighter top edge, and the teal
   band filling the middle behind the logo and the hero. The lower stops
   anchor to the screen bottom so the portrait (mobile) console keeps the
   bars hugging its edges instead of stranding them in the top 160u. */
.title-stage.title-firered {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--u) * 2), rgba(9, 48 , 45, .12) calc(var(--u) * 2) calc(var(--u) * 3)),
    linear-gradient(180deg,
      #000 0 calc(var(--u) * 19),
      #a13232 calc(var(--u) * 19) calc(var(--u) * 20),
      #7a1818 calc(var(--u) * 20) calc(var(--u) * 24),
      #5ba9a2 calc(var(--u) * 24) calc(var(--u) * 30),
      #4f9f98 calc(var(--u) * 30) calc(100% - var(--u) * 34),
      #43918a calc(100% - var(--u) * 34) calc(100% - var(--u) * 24),
      #7a1818 calc(100% - var(--u) * 24) calc(100% - var(--u) * 20),
      #4c0e0e calc(100% - var(--u) * 20) calc(100% - var(--u) * 19),
      #000 calc(100% - var(--u) * 19) 100%);
}

.title-transition-flash {
  position: absolute;
  z-index: 40;
  inset: 0;
  opacity: 0;
  background: #fff;
  pointer-events: none;
}

.title-screen.starting .press-start span {
  opacity: 1;
  animation: none;
}

.title-screen.flash-out .title-transition-flash {
  /* SE-style fade to WHITE: 16 hard steps over ~270ms. */
  animation: title-white-flash 270ms steps(16, end) both;
}

.title-screen.leaving {
  animation: title-screen-exit 760ms steps(10, end) both;
}

.topbar {
  position: absolute;
  z-index: 12;
  top: 26px;
  left: 34px;
  right: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.route-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--frame-mid), 5px 5px 0 rgba(14, 44, 86, .28);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15em;
}

.route-dot {
  width: 9px;
  height: 9px;
  background: var(--coral);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 2px var(--ink);
}

/* CHANGE TRAINER — small Gen-3 paper option (only shown on the role menu). */
.quiet-button {
  --u: min(calc(100cqh / 160), calc(100cqw / 240));
  pointer-events: auto;
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  color: #606060;
  background: #F8F8F8;
  border: calc(var(--u) * 1) solid #293131;
  box-shadow: inset 0 0 0 calc(var(--u) * 1) #DED5DE;
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
  font-size: calc(var(--u) * 6);
  text-shadow: calc(var(--u) * .7) calc(var(--u) * .7) 0 #D0D0C8;
  cursor: pointer;
}

.quiet-button:hover { color: #E00808; }

/* ---------------------------------------------------------------- */
/* Gen-3 UI kit — metrics/colors from POKE-SPEC.md (pret decomps).   */
/* Window frames are border-image SVGs: discrete 1px bands (no       */
/* box-shadow rings — spread grows the corner radius and smears the  */
/* bevel), radius ≈3 logical px, paper flat #F8F8F8.                 */
/* ---------------------------------------------------------------- */

/* frame-1 blue bevel: #293131 → #4A4A6A → #626294 → #7373AC → #8B8BCD → #DED5DE (+1px paper) */
.gen3-frame1 {
  background: #F8F8F8;
  background-clip: padding-box;
  border: calc(var(--u) * 7) solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' rx='3' fill='%23293131'/%3E%3Crect x='1' y='1' width='14' height='14' rx='2.5' fill='%234A4A6A'/%3E%3Crect x='2' y='2' width='12' height='12' rx='2' fill='%23626294'/%3E%3Crect x='3' y='3' width='10' height='10' rx='1.5' fill='%237373AC'/%3E%3Crect x='4' y='4' width='8' height='8' rx='1' fill='%238B8BCD'/%3E%3Crect x='5' y='5' width='6' height='6' rx='.5' fill='%23DED5DE'/%3E%3Crect x='6' y='6' width='4' height='4' fill='%23F8F8F8'/%3E%3C/svg%3E") 7;
}

/* Emerald message-box teal bevel: #10283A outline → #4870A0 → #00C8B8 → #00F898 (+1px paper) */
.gen3-frame-msg {
  background: #F8F8F8;
  background-clip: padding-box;
  border: calc(var(--u) * 5) solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Crect width='12' height='12' rx='3' fill='%2310283A'/%3E%3Crect x='1' y='1' width='10' height='10' rx='2.5' fill='%234870A0'/%3E%3Crect x='2' y='2' width='8' height='8' rx='2' fill='%2300C8B8'/%3E%3Crect x='3' y='3' width='6' height='6' rx='1' fill='%2300F898'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23F8F8F8'/%3E%3C/svg%3E") 5;
}

/* The console glass vignette painted a radial glow over every paper
   window — Gen-3 paper is FLAT #F8F8F8, so keep only the diagonal sheen. */
#console-screen #screen-glass {
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 28%);
}

.birch {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
}

/* Story beats are clean Gen-3 scenes: no web chips over them. The topbar +
   footer hide whenever the intro/story dialogue is up; on the role menu only
   the small Gen-3-framed CHANGE TRAINER option shows (never OCEAN JOURNEY). */
.game-shell:has(.birch:not([hidden])) .topbar,
.game-shell:has(.birch:not([hidden])) footer,
.game-shell:has(.role-select:not([hidden])) footer { visibility: hidden; }

/* Collapse (not just hide) so CHANGE TRAINER sits top-left, clear of the
   role menu window in the top-right. */
.game-shell:has(.role-select:not([hidden])) .route-mark { display: none; }

/* Message box: framed 232×48, bottom-aligned ~8px margin; text inset
   8 logical px from the framed edge (border 5u + padding 3u). */
.gen3-dialogue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 6);
  transform: translateX(-50%);
  width: calc(var(--u) * 232);
  height: calc(var(--u) * 48);
  padding: calc(var(--u) * 3) calc(var(--u) * 3) 0;
  cursor: pointer;
}

.gen3-text {
  display: block;
  color: #606060;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 16);
  letter-spacing: 0;
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
  white-space: pre-wrap;
}

/* ▼ continue cursor: red w/ dark outline, bounce Y {0,1,2,1} @8f/step. */
.gen3-advance {
  position: absolute;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 4);
  width: 0;
  height: 0;
  border-left: calc(var(--u) * 4) solid transparent;
  border-right: calc(var(--u) * 4) solid transparent;
  border-top: calc(var(--u) * 5) solid #E00808;
  filter:
    drop-shadow(calc(var(--u) * 1) 0 0 #606060)
    drop-shadow(calc(var(--u) * -1) 0 0 #606060)
    drop-shadow(0 calc(var(--u) * 1) 0 #606060);
  animation: gen3-advance-bounce 533ms linear infinite;
}

@keyframes gen3-advance-bounce {
  0%, 24.99% { transform: translateY(0); }
  25%, 49.99% { transform: translateY(calc(var(--u) * 1)); }
  50%, 74.99% { transform: translateY(calc(var(--u) * 2)); }
  75%, 100% { transform: translateY(calc(var(--u) * 1)); }
}

/* Menu window: paper, frame-1 blue bevel. Rows are exactly 16 logical px. */
.gen3-menu {
  position: absolute;
  display: grid;
  align-content: start;
  min-width: calc(var(--u) * 44);
  padding: calc(var(--u) * 1) calc(var(--u) * 1);
}

.gen3-menu-item {
  position: relative;
  height: calc(var(--u) * 16);
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 10);
  color: #606060;
  text-align: left;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 16);
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
  cursor: pointer;
}

/* ▶ selection cursor: instant jump, no blink. */
.gen3-menu-item.selected::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 1);
  top: calc(var(--u) * 4);
  width: 0;
  height: 0;
  border-top: calc(var(--u) * 4) solid transparent;
  border-bottom: calc(var(--u) * 4) solid transparent;
  border-left: calc(var(--u) * 5) solid #606060;
  filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8);
}

.birch-yesno {
  right: calc(var(--u) * 20);
  /* Anchor to the dialogue box's top edge (box = 48u tall, bottom-anchored):
     flush above it like FRLG — never overlapping at any window size. */
  bottom: calc(var(--u) * 58);
  top: auto;
}

.avatar-picker {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: calc(var(--u) * 5);
  padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 15);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(226,239,248,.96)),
    #eef6fb;
}

.avatar-picker h2 {
  max-width: calc(var(--u) * 204);
  margin: 0;
  color: #243b62;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--u) * 8.5);
  line-height: 1.25;
  letter-spacing: calc(var(--u) * .25);
  text-align: center;
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #fff;
}

.avatar-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 14);
}

.avatar-option {
  position: relative;
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 82);
  padding: calc(var(--u) * 5);
  overflow: visible;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  background: #f8f8f5;
  border: calc(var(--u) * 2) solid #8796a9;
  border-radius: calc(var(--u) * 3);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #fff, 0 calc(var(--u) * 3) 0 rgba(41,61,85,.2);
  cursor: pointer;
}

.avatar-option img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  image-rendering: pixelated;
  animation: avatar-float 1.6s steps(2, end) infinite;
}

.avatar-option:nth-child(2) img {
  animation-delay: .22s;
}

.avatar-label {
  align-self: end;
  min-width: calc(var(--u) * 39);
  padding-top: calc(var(--u) * 1);
  color: #344a68;
  border-top: calc(var(--u) * 1) solid #c2ccd5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--u) * 7);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: calc(var(--u) * .45);
  text-align: center;
}

.avatar-cursor {
  position: absolute;
  left: calc(var(--u) * -12);
  top: 50%;
  opacity: 0;
  color: #a71e3d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--u) * 11);
  line-height: 1;
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #e5aab7;
  transform: translateY(-50%);
}

.avatar-option.selected {
  border-color: #a71e3d;
  box-shadow:
    inset 0 0 0 calc(var(--u) * 2) #fff,
    0 0 0 calc(var(--u) * 2) #e5aab7,
    0 calc(var(--u) * 3) 0 rgba(85,21,37,.22);
}

.avatar-option.selected .avatar-cursor {
  opacity: 1;
  animation: avatar-cursor-nudge .8s steps(2, end) infinite;
}

.avatar-option.selected img {
  animation-name: avatar-selected-float;
  animation-duration: 1.15s;
}

.avatar-option.selected .avatar-label {
  color: #8b1732;
  border-color: #d997a6;
}

@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--u) * -1)); }
}

@keyframes avatar-selected-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--u) * -3)); }
}

@keyframes avatar-cursor-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(calc(var(--u) * 2)); }
}

.avatar-option:focus-visible,
.avatar-continue:focus-visible {
  outline: calc(var(--u) * 1.4) solid #245d84;
  outline-offset: calc(var(--u) * 2);
}

.avatar-continue {
  min-width: calc(var(--u) * 88);
  padding: calc(var(--u) * 3) calc(var(--u) * 8);
  color: #fff;
  background: #a71e3d;
  border: calc(var(--u) * 1) solid #641227;
  border-radius: calc(var(--u) * 2);
  box-shadow: inset 0 calc(var(--u) * 1) 0 #df8497, 0 calc(var(--u) * 2) 0 rgba(71,20,33,.25);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: calc(var(--u) * 8);
  font-weight: 800;
  letter-spacing: calc(var(--u) * .5);
  cursor: pointer;
}

/* Naming window: upper-LEFT like the Gen-3 naming screen, sized so the
   trainer sliding in at the right (x≈132u+) stays fully visible.
   14 per-character underscore slots; the real <input> stays under the
   hood (visually hidden) for typing + accessibility. */
.gen3-namebox {
  position: absolute;
  left: calc(var(--u) * 8);
  top: calc(var(--u) * 14);
  display: grid;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2) calc(var(--u) * 2) calc(var(--u) * 3);
}

.gen3-namebox label {
  color: #606060;
  font-size: calc(var(--u) * 9);
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
}

.gen3-name-slots {
  display: grid;
  grid-template-columns: repeat(14, calc(var(--u) * 7));
  column-gap: calc(var(--u) * 1);
}

.gen3-name-slots i {
  height: calc(var(--u) * 14);
  color: #606060;
  border-bottom: calc(var(--u) * 1) solid #606060;
  font-style: normal;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 13);
  text-align: center;
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
  text-transform: uppercase;
}

.gen3-name-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

.birch-sprite {
  position: absolute;
  left: calc(var(--u) * 132);
  bottom: calc(var(--u) * 56);
  height: calc(var(--u) * 64);
  will-change: transform;
}

.birch-sprite img {
  display: block;
  height: 100%;
  width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 2) 0 rgba(16, 42, 79, .3));
}

.white-fade {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.white-fade.in { animation: white-fade-in 270ms steps(16, end) forwards; }
.white-fade.out { animation: white-fade-out 270ms steps(16, end) forwards; }

@keyframes white-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes white-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* ---------------------------------------------------------------- */
/* Main menu (Emerald main_menu.c): stacked CONTINUE / NEW GAME       */
/* windows top-left over the live ocean; the selected window carries  */
/* the ▶ cursor and the red selection frame.                          */
/* ---------------------------------------------------------------- */

.main-menu {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  align-content: start;
  justify-content: start;
  gap: calc(var(--u) * 4);
  padding: calc(var(--u) * 8) 0 0 calc(var(--u) * 8);
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
  pointer-events: none;
}

.main-menu-option {
  display: block;
  width: calc(var(--u) * 150);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}

/* Emerald highlights the selected window's frame in red. */
.main-menu-option.selected {
  box-shadow: 0 0 0 calc(var(--u) * 1.5) #F86858;
}

.main-menu-title {
  position: relative;
  display: block;
  padding-left: calc(var(--u) * 10);
  color: #606060;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 16);
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
}

.main-menu-option.selected .main-menu-title::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 1);
  top: calc(var(--u) * 4);
  width: 0;
  height: 0;
  border-top: calc(var(--u) * 4) solid transparent;
  border-bottom: calc(var(--u) * 4) solid transparent;
  border-left: calc(var(--u) * 5) solid #606060;
  filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8);
}

.main-menu-info {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 0 calc(var(--u) * 2) calc(var(--u) * 1) calc(var(--u) * 10);
  color: #3050C8;
  font-size: calc(var(--u) * 8.5);
  line-height: calc(var(--u) * 12);
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
}

.main-menu-info b {
  font-weight: 400;
  color: #606060;
  text-align: right;
}

/* Clean Gen-3 scene: no web chrome while the main menu is up. */
.game-shell:has(.main-menu:not([hidden])) .topbar,
.game-shell:has(.main-menu:not([hidden])) footer { visibility: hidden; }

/* ---------------------------------------------------------------- */
/* Role select — a REAL Pokemon menu: paper frame-1 window with the   */
/* 4 roles + ▶ cursor, role sprite beside the window, blurb in the    */
/* standard bottom message box, Gen-3 YES/NO to confirm.              */
/* ---------------------------------------------------------------- */

.role-select {
  position: absolute;
  inset: 0;
  z-index: 15;
  font-family: 'PokeDialogue', 'PokeText', "Courier New", monospace;
  pointer-events: none;
}

.role-select > * { pointer-events: auto; }

.role-topright {
  position: absolute;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 8);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3);
}

.role-topright .gen3-menu { position: static; }

/* Pokemon-style resting state: 2 identical frames, 1px vertical shift,
   hard steps — no easing, no rubber-band. */
.role-sprite {
  height: calc(var(--u) * 52);
  width: auto;
  margin-bottom: calc(var(--u) * 2);
  image-rendering: pixelated;
  filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 2) 0 rgba(16, 42, 79, .3));
  animation: gen3-idle .9s steps(2, jump-none) infinite;
}

/* YES/NO floats above the message box on the right, like name confirm.
   The list window steps aside while confirming so windows never collide. */
.role-yesno {
  right: calc(var(--u) * 12);
  bottom: calc(var(--u) * 58);
}

.role-select.confirming .role-topright { visibility: hidden; }

.role-dialogue-box { cursor: default; }

.role-select.active .role-topright { animation: role-panel-in 260ms steps(4, end) both; }
.role-select.closing { animation: role-screen-out 360ms steps(5, end) both; }

footer {
  position: absolute;
  z-index: 6;
  right: 26px;
  bottom: 19px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 2px 2px 0 rgba(16,42,79,.28);
  pointer-events: none;
}

.footer-wave { color: #ffe66d; font-size: 18px; }

[hidden] { display: none !important; }

@keyframes title-screen-drop {
  0% { transform: translateY(-105%); }
  78% { transform: translateY(2.5%); }
  100% { transform: translateY(0); }
}

@keyframes title-screen-exit {
  0% { transform: translateY(0); }
  100% { transform: translateY(110%); }
}

@keyframes press-start-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes title-white-flash {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes role-panel-in {
  from { opacity: 0; transform: translateX(54px); }
}

@keyframes role-screen-out {
  to { opacity: 0; }
}

/* 2-frame Pokemon resting state: identical frames, 1px apart, hard steps. */
@keyframes gen3-idle {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--u) * -1)); }
}

@media (max-width: 720px) {
  .topbar { top: 16px; left: 16px; right: 16px; }
  .route-mark { padding: 8px 10px; font-size: 10px; }
  footer { right: 14px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Studio splash (BW-intro homage, Gen-3 simplified): black card,
   stepped © lines, a shooting star with a particle tail, an impact burst
   that scatters the SHARED GENES letters into place, presents beneath.
   shell.js drives the beats via .beat-* classes on #intro-card. ── */
.intro-card,
.title-screen {
  --u: min(calc(100cqh / 160), calc(100cqw / 240));
}

.intro-card {
  position: absolute;
  inset: 0;
  z-index: 36;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.intro-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(214, 224, 255, .05) 3px 4px);
}

.intro-card.leaving { animation: intro-card-out 340ms steps(8, end) both; }

/* Beat 1 — © card: two left-aligned rows, small crisp white pixel text. */
.splash-copyright {
  display: none;
  gap: calc(var(--u) * 4);
  color: #f8f8f8;
  font-family: 'PokeText', "Courier New", monospace;
  font-size: calc(var(--u) * 6);
  line-height: 1;
}

.intro-card.beat-copyright .splash-copyright {
  display: grid;
  animation: splash-fade-in 260ms steps(6, end) both;
}

.splash-copyright p {
  display: flex;
  gap: calc(var(--u) * 6);
  margin: 0;
}

.splash-copyright span { width: calc(var(--u) * 26); }
.splash-copyright b { font-weight: 400; }

/* Beat 2 — shooting star: a bright pop where the star ignites, then a
   4-point star sweeping down-right in hard steps, dotted tail behind it. */
.splash-comet {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.intro-card.beat-comet .splash-comet { display: block; }

.splash-flash {
  position: absolute;
  top: calc(var(--u) * 6);
  left: calc(var(--u) * 10);
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, rgba(199, 180, 255, .8) 36%, rgba(120, 90, 200, .3) 58%, transparent 70%);
  opacity: 0;
}

.intro-card.beat-comet .splash-flash { animation: splash-flash-pop 480ms steps(8, end) both; }

.splash-star {
  position: absolute;
  top: calc(var(--u) * 18);
  left: calc(var(--u) * 22);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  opacity: 0;
}

/* Star head: the clip-path lives on ::before so it can't clip the tail. */
.splash-star::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #eaf6ff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 calc(var(--u) * 2) rgba(190, 225, 255, .9));
}

/* Dotted particle tail trailing up-left of the flight direction. */
.splash-star::after {
  content: "";
  position: absolute;
  inset: 38%;
  background: rgba(214, 236, 255, .9);
  box-shadow:
    calc(var(--u) * -5) calc(var(--u) * -4) 0 rgba(206, 225, 255, .75),
    calc(var(--u) * -10) calc(var(--u) * -8) 0 rgba(189, 189, 255, .55),
    calc(var(--u) * -16) calc(var(--u) * -12) 0 rgba(166, 148, 235, .4),
    calc(var(--u) * -22) calc(var(--u) * -17) 0 rgba(140, 116, 210, .25);
}

.intro-card.beat-comet .splash-star { animation: splash-star-sweep 940ms steps(14, end) 300ms both; }

/* Beat 3/4 — impact burst, spark scatter, letters fly into the wordmark. */
.splash-studio {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

.intro-card.beat-studio .splash-studio { display: block; }

.splash-nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 48% 38%, rgba(120, 90, 190, .34) 0%, rgba(80, 58, 140, .18) 42%, transparent 68%),
    radial-gradient(circle at 24% 22%, rgba(214, 224, 255, .12) 0 2%, transparent 3%),
    radial-gradient(circle at 71% 16%, rgba(214, 224, 255, .14) 0 1.4%, transparent 2.4%),
    radial-gradient(circle at 83% 47%, rgba(214, 224, 255, .1) 0 1.6%, transparent 2.6%),
    radial-gradient(circle at 15% 55%, rgba(214, 224, 255, .1) 0 1.2%, transparent 2.2%);
  animation: splash-fade-in 700ms steps(8, end) both;
}

.splash-ground {
  position: absolute;
  top: 66%;
  left: 12%;
  right: 12%;
  height: calc(var(--u) * 10);
  background: radial-gradient(ellipse at 50% 50%, rgba(173, 216, 230, .28), rgba(120, 150, 190, .1) 55%, transparent 72%);
  animation: splash-fade-in 900ms steps(6, end) 500ms both;
}

.splash-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 90);
  height: calc(var(--u) * 90);
  margin: calc(var(--u) * -45) 0 0 calc(var(--u) * -45);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 26%, rgba(199, 214, 255, .75) 44%, rgba(130, 110, 220, .3) 62%, transparent 74%);
  animation: splash-burst-pop 420ms steps(8, end) both;
}

/* Impact sparks: pixel squares thrown outward by scaling the shadow set. */
.splash-sparks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
  background: transparent;
  box-shadow:
    calc(var(--u) * 14) calc(var(--u) * -20) 0 #eef2ff,
    calc(var(--u) * -22) calc(var(--u) * -12) 0 #cdd9ff,
    calc(var(--u) * 26) calc(var(--u) * 6) 0 #b9a6f2,
    calc(var(--u) * -14) calc(var(--u) * 18) 0 #eef2ff,
    calc(var(--u) * 4) calc(var(--u) * -28) 0 #cdb9f2,
    calc(var(--u) * -30) calc(var(--u) * 2) 0 #dfe7ff,
    calc(var(--u) * 20) calc(var(--u) * 22) 0 #cdd9ff,
    calc(var(--u) * -6) calc(var(--u) * 28) 0 #b9a6f2;
  animation: splash-sparks-out 560ms steps(9, end) both;
}

.splash-letters {
  position: absolute;
  top: calc(50% - var(--u) * 16);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  color: #f3f1fb;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--u) * 14);
  font-weight: 700;
  line-height: 1;
  letter-spacing: calc(var(--u) * 1.4);
  text-shadow:
    0 calc(var(--u) * 1) 0 #6b5aa0,
    0 0 calc(var(--u) * 4) rgba(167, 143, 255, .55);
}

.splash-letters span {
  animation: splash-letter-in 460ms steps(8, end) both;
  animation-delay: calc(var(--d) * 1ms);
}

.splash-gap { width: calc(var(--u) * 6); }

/* Scatter start poses (translate GBA px / rotate), staggered like the BW
   letters tumbling out of the explosion before settling into the line. */
.splash-letters span:nth-child(1) { --d: 60; --fx: -62; --fy: -30; --fr: -150deg; }
.splash-letters span:nth-child(2) { --d: 140; --fx: -34; --fy: 26; --fr: 120deg; }
.splash-letters span:nth-child(3) { --d: 30; --fx: -18; --fy: -44; --fr: -80deg; }
.splash-letters span:nth-child(4) { --d: 200; --fx: -46; --fy: 12; --fr: 200deg; }
.splash-letters span:nth-child(5) { --d: 100; --fx: -6; --fy: 34; --fr: -110deg; }
.splash-letters span:nth-child(6) { --d: 240; --fx: -26; --fy: -18; --fr: 90deg; }
.splash-letters span:nth-child(7) { --d: 0; --fx: 0; --fy: 0; --fr: 0deg; }
.splash-letters span:nth-child(8) { --d: 80; --fx: 20; --fy: -36; --fr: 130deg; }
.splash-letters span:nth-child(9) { --d: 180; --fx: 34; --fy: 24; --fr: -190deg; }
.splash-letters span:nth-child(10) { --d: 50; --fx: 48; --fy: -14; --fr: 70deg; }
.splash-letters span:nth-child(11) { --d: 220; --fx: 26; --fy: 40; --fr: -120deg; }
.splash-letters span:nth-child(12) { --d: 120; --fx: 58; --fy: -26; --fr: 160deg; }

.splash-presents {
  position: absolute;
  top: calc(50% + var(--u) * 6);
  left: 0;
  right: 0;
  color: #cfc6ec;
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--u) * 6.4);
  font-style: italic;
  letter-spacing: calc(var(--u) * 1.6);
  text-align: center;
  animation: splash-fade-in 280ms steps(6, end) 1150ms both;
}

@keyframes splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes splash-flash-pop {
  0% { opacity: 0; transform: scale(.3); }
  25% { opacity: 1; transform: scale(1); }
  60% { opacity: .7; transform: scale(.75); }
  100% { opacity: 0; transform: scale(.4); }
}

@keyframes splash-star-sweep {
  0% { opacity: 0; transform: translate(0, 0) scale(1.5); }
  7% { opacity: 1; }
  30% { transform: translate(calc(var(--u) * 30), calc(var(--u) * 16)) scale(1.2); }
  60% { transform: translate(calc(var(--u) * 62), calc(var(--u) * 44)) scale(1); }
  85% { transform: translate(calc(var(--u) * 84), calc(var(--u) * 68)) scale(.9); }
  100% { opacity: 1; transform: translate(calc(var(--u) * 96), calc(var(--u) * 82)) scale(.8); }
}

@keyframes splash-burst-pop {
  0% { opacity: 0; transform: scale(.2); }
  20% { opacity: 1; transform: scale(.7); }
  55% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes splash-sparks-out {
  0% { opacity: 1; transform: scale(.2); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes splash-letter-in {
  0% { opacity: 0; transform: translate(calc(var(--u) * var(--fx)), calc(var(--u) * var(--fy))) rotate(var(--fr)) scale(1.8); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes intro-card-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── FireRed title elements over the .title-firered stage. ── */

/* The hackathon-lettering logo art IS the title — the h1/p are bare
   positioning frames around the images. Logo top-center at ~70% width. */
.launch-title {
  position: absolute;
  z-index: 8;
  top: calc(var(--u) * 12);
  left: 50%;
  width: min(70%, calc(var(--u) * 168));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: title-control-in 420ms steps(7, end) 320ms both;
}

.launch-title img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 calc(var(--u) * 1.6) 0 rgba(0, 0, 0, .4));
}

/* JUNO VERSION banner settles centered under the logo. */
.launch-subtitle {
  position: absolute;
  z-index: 9;
  top: calc(var(--u) * 78);
  left: 50%;
  width: min(38%, calc(var(--u) * 88));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: title-banner-in 360ms steps(6, end) 560ms both;
}

.launch-subtitle img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated; /* Ruby-style pixel banner stays crisp */
}

/* The big Juno hero holds Charizard's spot: right side, mid to lower,
   feet planted just above the bottom red bar. */
.title-hero {
  position: absolute;
  z-index: 5;
  right: calc(var(--u) * 14);
  bottom: calc(var(--u) * 26);
  width: calc(var(--u) * 58);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(calc(var(--u) * 2) calc(var(--u) * 2) 0 rgba(0, 24, 22, .3));
  opacity: 0;
  animation: title-hero-in 520ms steps(8, end) 640ms both;
}

/* FireRed PRESS START: bare silver GBA lettering centered at ~78% height,
   square-wave blink 16 frames on / 16 off @60fps = 533ms, no fade. */
.press-start {
  position: absolute;
  z-index: 10;
  bottom: calc(var(--u) * 25); /* ≈78% height on the 160u landscape screen */
  left: 50%;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  text-align: center;
  background: transparent;
  border: 0;
  outline: 0;
  transform: translateX(-50%);
  cursor: pointer;
  opacity: 0;
  animation: splash-fade-in 60ms steps(1, end) 1160ms both;
}

.press-start span {
  display: block;
  color: #ececf2;
  font-family: 'PokeText', "Courier New", monospace;
  font-size: calc(var(--u) * 9);
  font-weight: 400;
  letter-spacing: .04em;
  /* single dark drop shadow — a second (white) layer reads as a ghost
     duplicate of the lettering at PokeText's blocky sizes */
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #4c4f66;
  animation: press-start-blink 533ms steps(1, end) 1.22s infinite;
}

.press-start:disabled { cursor: default; }
.press-start:focus-visible {
  outline: calc(var(--u) * 1) solid #ececf2;
  outline-offset: calc(var(--u) * 2);
}

@keyframes title-control-in {
  from { opacity: 0; transform: translateX(-50%) translateY(calc(var(--u) * -4)); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes title-banner-in {
  from { opacity: 0; transform: translate(-50%, calc(var(--u) * 3)); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes title-hero-in {
  from { opacity: 0; transform: translateX(calc(var(--u) * 6)); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------------------------------------------------------------- */
/* Access-code gate (game.js / access-gate.js) — the Gen-3 naming-   */
/* screen idiom, centered: frame-1 paper window, per-character        */
/* underscore slots over a hidden real input, CONFIRM row with the    */
/* standard ▶ cursor. Inherits the namebox/slot metrics above.        */
/* ---------------------------------------------------------------- */

.gate-codebox {
  left: 50%;
  top: calc(var(--u) * 34);
  transform: translateX(-50%);
  justify-items: center;
  padding: calc(var(--u) * 4) calc(var(--u) * 6);
  text-align: center;
}

.gate-code-slots {
  grid-template-columns: repeat(12, calc(var(--u) * 9));
  column-gap: calc(var(--u) * 2);
}

/* CONFIRM reads as a one-row Gen-3 menu item, cursor always on. */
.gate-confirm {
  position: relative;
  justify-self: center;
  height: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 1);
  padding: 0 calc(var(--u) * 2) 0 calc(var(--u) * 10);
  color: #606060;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 16);
  text-shadow: calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8;
  cursor: pointer;
}

.gate-confirm::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 1);
  top: calc(var(--u) * 4);
  width: 0;
  height: 0;
  border-top: calc(var(--u) * 4) solid transparent;
  border-bottom: calc(var(--u) * 4) solid transparent;
  border-left: calc(var(--u) * 5) solid #E00808;
  filter: drop-shadow(calc(var(--u) * 1) calc(var(--u) * 1) 0 #D0D0C8);
}

.gate-confirm:focus-visible {
  outline: calc(var(--u) * 1) solid #606060;
  outline-offset: calc(var(--u) * 1);
}

/* Third main-menu window: longer label than the Emerald window fits at
   menu size — the window grows and the lettering drops a step. */
.main-menu-login {
  width: auto;
  min-width: calc(var(--u) * 150);
}

.main-menu-login .main-menu-title {
  font-size: calc(var(--u) * 9);
  white-space: nowrap;
}