:root {
  color-scheme: dark;
  --text: #f8f0d2;
  --muted: #b4c4bd;
  --mint: #9bf2cc;
  --panel: #142620;
  --control-size: clamp(44px, 7vmin, 64px);
  font-family: "Avenir Next", "Trebuchet MS", sans-serif;
  color: var(--text);
  background: #08110e;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
.shell { position: relative; width: 100%; height: 100dvh; overflow: hidden; background: #08110e; }
.shell:fullscreen { width: 100vw; height: 100dvh; }
.display-panel { position: absolute; inset: 0; display: grid; place-items: center; }
#screen {
  display: block;
  width: min(100vw, 150dvh);
  height: min(100dvh, 66.666667vw);
  object-fit: contain;
  image-rendering: pixelated;
  background: #08110e;
}
button, summary { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button { color: inherit; border: 0; }
button:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #ff3910; outline-offset: 2px; }
svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* On-screen controls and Settings, in the same Emerald world as the Trainer
   Card: the game's font, its dialog frame, and the card's blue for "pressed".
   Labels use the pixel font at whole multiples (16px or 32px). */
:root { --ui: 2px; --hud-ink: #f8f8f8; --hud-ink-shadow: #283040; --hud-fill: rgb(28 36 52 / 46%); --hud-rim: rgb(255 255 255 / 40%); --hud-press: #6abdff; --hud-press-edge: #418bc5; --hud-gap: max(10px, env(safe-area-inset-top)); }
@media (min-resolution: 1.25dppx) { :root { --ui: 1.6px; } }
@media (min-resolution: 2dppx) { :root { --ui: 1.5px; } }
@media (min-resolution: 3dppx) { :root { --ui: 1.33333px; } }
.pixel-icon { width: 16px; height: 16px; fill: currentColor; fill-rule: evenodd; stroke: none; shape-rendering: crispEdges; }
.controls { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; font-family: "Emerald Normal", monospace; -webkit-font-smoothing: none; }
.controls[hidden] { display: none; }
.controls button, .settings > summary {
  pointer-events: auto; touch-action: none; display: grid; place-items: center; padding: 0;
  color: var(--hud-ink); background: var(--hud-fill); box-shadow: inset 0 0 0 2px var(--hud-rim), 0 2px 6px rgb(0 0 0 / 22%);
  font: 16px / 16px "Emerald Normal", monospace; text-transform: uppercase; text-shadow: 1px 0 var(--hud-ink-shadow), 0 1px var(--hud-ink-shadow), 1px 1px var(--hud-ink-shadow);
  transition: background-color 90ms ease-out, opacity 160ms ease-out, box-shadow 160ms ease-out;
}
.controls button:hover, .settings > summary:hover { background: rgb(28 36 52 / 64%); }
.controls button.pressed, .controls button:active, .settings[open] > summary { background: var(--hud-press); color: #10283c; text-shadow: none; box-shadow: inset 0 0 0 2px var(--hud-press-edge); }
/* Over an open game window, a control fades to an outline but still works. */
.controls .dodge, .settings > summary.dodge, .controls .dpad.dodge .dpad-plate { opacity: .32; background: transparent; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 55%); }
.controls .dpad.dodge { opacity: .5; }

/* Top row: L · SELECT START · R ⚙ */
.shoulders button, .system-controls button { position: absolute; top: var(--hud-gap); height: 28px; border-radius: 14px; }
.shoulders button { width: 46px; }
.shoulders [data-key='l'] { left: max(10px, env(safe-area-inset-left)); }
.shoulders [data-key='r'] { right: calc(max(10px, env(safe-area-inset-right)) + 40px); }
.system-controls { position: absolute; top: var(--hud-gap); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.system-controls button { position: static; width: 60px; height: 24px; margin-top: 2px; }
.settings { position: absolute; z-index: 2; right: max(10px, env(safe-area-inset-right)); top: var(--hud-gap); }
.settings > summary { width: 32px; height: 28px; margin-left: auto; list-style: none; border-radius: 14px; cursor: pointer; }
.settings > summary::-webkit-details-marker { display: none; }

/* Bottom row: D-pad · CHAT · B A */
.dpad {
  --c: clamp(34px, 6.2vmin, 50px);
  position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, var(--c)); grid-template-rows: repeat(3, var(--c)); transition: opacity 160ms ease-out;
}
.dpad-plate { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--hud-fill); stroke: var(--hud-rim); stroke-width: 2px; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 22%)); transition: opacity 160ms ease-out; }
.dpad-plate path { vector-effect: non-scaling-stroke; }
.controls .dpad button { position: relative; width: var(--c); height: var(--c); background: transparent; box-shadow: none; border-radius: 4px; }
.controls .dpad button.pressed, .controls .dpad button:active { background: var(--hud-press); box-shadow: inset 0 0 0 2px var(--hud-press-edge); }
.dpad .arrow { display: block; width: 16px; font-size: 32px; line-height: 32px; }
.dpad [data-key='up'] { grid-column: 2; grid-row: 1; }
.dpad [data-key='left'] { grid-column: 1; grid-row: 2; }
.dpad [data-key='right'] { grid-column: 3; grid-row: 2; }
.dpad [data-key='down'] { grid-column: 2; grid-row: 3; }
.dpad [data-key='up'] .arrow { transform: rotate(-90deg); }
.dpad [data-key='down'] .arrow { transform: rotate(90deg); }
.dpad [data-key='left'] .arrow { transform: scaleX(-1); }
.face { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: end; }
.face button { --size: clamp(40px, 7.4vmin, 58px); width: var(--size); height: var(--size); border-radius: 50%; font-size: 32px; line-height: 32px; text-shadow: 2px 0 var(--hud-ink-shadow), 0 2px var(--hud-ink-shadow), 2px 2px var(--hud-ink-shadow); }
.face [data-key='a'] { margin-bottom: calc(var(--size) * .55); }
.controls .chat-button { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: 14px; }

/* Settings: an Emerald dialog window with the game font. */
.settings-panel {
  --ink: #484858; --ink-soft: #686878; --ink-shadow: #d8d8d0; --pick: #e04030; --pick-shadow: #f8c8b8;
  position: absolute; right: 0; margin-top: 6px; width: min(calc(var(--ui) * 196), calc(100vw - 20px)); max-height: calc(100dvh - var(--hud-gap) - 44px); overflow: auto; overscroll-behavior: contain;
  padding: calc(var(--ui) * 2) calc(var(--ui) * 4); border: calc(var(--ui) * 6) solid transparent; border-image: url("/web/start/window.png") 8 fill / calc(var(--ui) * 8) / 0 stretch; image-rendering: pixelated;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 35%)); scrollbar-width: thin; scrollbar-color: #8b8bcd transparent;
  color: var(--ink); font: calc(var(--ui) * 16) / calc(var(--ui) * 16) "Emerald Normal", monospace; -webkit-font-smoothing: none;
  text-shadow: var(--ui) 0 var(--ink-shadow), 0 var(--ui) var(--ink-shadow), var(--ui) var(--ui) var(--ink-shadow);
}
.settings-panel ::selection { color: #fff; background: #418bc5; }
.settings-panel :focus-visible { outline: max(2px, var(--ui)) solid var(--pick); outline-offset: 0; }
.settings-panel p, .settings-panel h2 { margin: 0; }
.settings-panel > * + *, .multiplayer-settings > * + * { margin-top: calc(var(--ui) * 2); }
.settings-panel > form, .settings-panel > .account-settings, .settings-panel > .speed-heading, .settings-panel > label[for="show-controls"], .settings-panel > .keys { padding-top: calc(var(--ui) * 4); border-top: var(--ui) solid #e0e0e8; }
.settings-panel > :first-child { padding-top: 0; border-top: 0; }
.setting-row, .speed-heading { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--ui) * 8); min-height: calc(var(--ui) * 18); cursor: pointer; }
.setting-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.setting-row .switch::before { content: "OFF"; color: var(--ink-soft); }
.setting-row input:checked + .switch::before { content: "ON"; color: var(--pick); text-shadow: var(--ui) 0 var(--pick-shadow), 0 var(--ui) var(--pick-shadow), var(--ui) var(--ui) var(--pick-shadow); }
.setting-row:has(input:focus-visible) { outline: max(2px, var(--ui)) solid var(--pick); }
.multiplayer-status, .multiplayer-hint, .keys, .status, .account-hint, .account-saved, .account-form-intro { color: var(--ink-soft); }
.multiplayer-status { color: #3a7a48; }
.multiplayer-field { display: grid; gap: var(--ui); }
.settings-panel input:not([type="checkbox"], [type="file"]) {
  width: 100%; min-width: 0; height: calc(var(--ui) * 16); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: 0 var(--ui) 0 #626273;
  color: var(--ink); font: inherit; text-shadow: inherit; caret-color: #418bc5; -webkit-font-smoothing: none;
}
.settings-panel input::placeholder { color: #8c8c9c; text-shadow: none; }
.settings-panel input:focus-visible { outline: none; box-shadow: 0 var(--ui) 0 var(--pick), 0 calc(var(--ui) * 2) 0 var(--pick); }
.server-settings > summary { list-style: none; color: var(--ink-soft); cursor: pointer; min-height: calc(var(--ui) * 18); }
.server-settings > summary::-webkit-details-marker { display: none; }
.server-settings > summary::after { content: "▶"; display: inline-block; margin-left: calc(var(--ui) * 4); }
.server-settings[open] > summary::after { transform: rotate(90deg); }
/* Panel buttons are menu items: the ▶ cursor marks hover and focus, as in the game. */
.settings-panel button {
  display: block; width: 100%; min-height: calc(var(--ui) * 18); padding: 0 0 0 calc(var(--ui) * 10); position: relative;
  background: transparent; color: var(--ink); font: inherit; text-transform: uppercase; text-align: left; text-shadow: inherit; cursor: pointer;
}
.settings-panel button::before { content: "▶"; position: absolute; left: 0; color: var(--pick); text-shadow: none; opacity: 0; }
.settings-panel button:hover::before, .settings-panel button:focus-visible::before { opacity: 1; }
.settings-panel button:focus-visible { outline: none; }
.settings-panel button.active { color: var(--pick); text-shadow: var(--ui) 0 var(--pick-shadow), 0 var(--ui) var(--pick-shadow), var(--ui) var(--ui) var(--pick-shadow); }
.settings-panel button:disabled { color: #a8a8b4; cursor: default; }
.settings-panel button:disabled::before { opacity: 0; }
.setting-action { margin: 0; }
.speed-heading { cursor: default; }
#speed-value { color: var(--pick); font-variant-numeric: tabular-nums; }
.speed-buttons { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--ui) * 6); }
.keys { font-size: inherit; }
.status { overflow-wrap: anywhere; }
.credit { display: block; color: #418bc5; text-underline-offset: calc(var(--ui) * 2); }
::selection { color: #fff; background: #418bc5; }
/* First visit on a keyboard device: a keycap badge on each control. */
.system-controls button, .face button { position: relative; }
.controls [data-keycap]::after {
  content: attr(data-keycap); position: absolute; top: -7px; right: -7px; z-index: 1; min-width: 16px; height: 18px; padding: 0 3px 2px;
  border-radius: 3px; background: #f8f8f8; color: #484858; box-shadow: inset 0 -2px 0 #c0c0cc, 0 0 0 1px #303848, 0 3px 6px rgb(0 0 0 / 28%);
  font: 16px / 16px "Emerald Normal", monospace; text-align: center; text-transform: none; text-shadow: none; white-space: nowrap; pointer-events: none;
  opacity: 0; scale: .5; transition: opacity 180ms ease-out, scale 320ms cubic-bezier(.34, 1.56, .64, 1);
}
/* Labelled buttons keep their text clear: the keycap sits beside them. */
.shoulders [data-keycap]::after, .system-controls [data-keycap]::after { top: calc(100% + 4px); right: auto; left: 50%; translate: -50% 0; }
.controls .chat-button::after { top: auto; bottom: calc(100% + 4px); right: auto; left: 50%; translate: -50% 0; }
.controls.show-keys [data-keycap]::after { opacity: 1; scale: 1; }
.controls.show-keys .face [data-keycap]::after, .controls.show-keys .chat-button::after { transition-delay: 80ms; }
.controls.show-keys .shoulders [data-keycap]::after, .controls.show-keys .system-controls [data-keycap]::after { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) { .controls button, .settings > summary, .dpad, .dpad-plate, .controls [data-keycap]::after { transition: none; } }

/* Quick start: Emerald's Trainer Card, baked from the game's tiles by
   tools/bake_start_screen.py. Every length is in game pixels times --u, the
   largest whole-device-pixel scale that fits (quick-start-preview.js). */
@font-face { font-family: "Emerald Normal"; src: url("/web/start/emerald.woff") format("woff"); font-display: block; }
.quick-start {
  --u: 2px;
  --ink: #484858; --ink-shadow: #d5d5cd; --card-ink: #293941; --card-shadow: #a4e69c;
  --tab: #6abdff; --tab-edge: #418bc5; --cursor: #ff3910;
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; overflow: auto;
  padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  background: #297ba4 url("/web/start/stripes.png") 0 0 / calc(var(--u) * 8) calc(var(--u) * 8);
  image-rendering: pixelated; scrollbar-color: var(--tab-edge) #297ba4;
  font: calc(var(--u) * 16) / calc(var(--u) * 16) "Emerald Normal", monospace; color: var(--ink);
  -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
}
.quick-start[hidden] { display: none; }
.quick-start ::selection { color: #fff; background: var(--tab-edge); }
.quick-start :focus-visible { outline: max(2px, var(--u)) solid var(--cursor); outline-offset: var(--u); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quick-start-form { display: grid; gap: calc(var(--u) * 4); width: calc(var(--u) * 228); animation: card-in 320ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(calc(var(--u) * 6)); } }
.quick-start p { margin: 0; }

/* The card, front and back, on its own 228 × 140 pixel grid. */
.card-stage { position: relative; height: calc(var(--u) * 140); }
.trainer-card { position: absolute; inset: 0; background: url("/web/start/card.png") 0 0 / 100% 100%; text-shadow: var(--u) 0 var(--card-shadow), 0 var(--u) var(--card-shadow), var(--u) var(--u) var(--card-shadow); }
.trainer-card > * { position: absolute; }
.card-back { background-image: url("/web/start/card-back.png"); visibility: hidden; }
.card-stage[data-face="back"] .card-front { visibility: hidden; }
.card-stage[data-face="back"] .card-back { visibility: visible; }
.card-id { right: calc(var(--u) * 12); top: calc(var(--u) * 10); color: var(--card-ink); text-shadow: none; font-variant-numeric: tabular-nums; }
.card-label { text-transform: uppercase; color: var(--card-ink); }

.card-name { left: calc(var(--u) * 12); top: calc(var(--u) * 31); width: calc(var(--u) * 124); display: flex; gap: calc(var(--u) * 6); align-items: baseline; box-shadow: 0 var(--u) 0 #626273; cursor: text; }
.card-name input {
  flex: 1; min-width: 0; height: calc(var(--u) * 16); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; color: var(--ink); caret-color: var(--tab-edge); text-shadow: var(--u) 0 var(--ink-shadow), 0 var(--u) var(--ink-shadow), var(--u) var(--u) var(--ink-shadow);
  -webkit-font-smoothing: none;
}
.card-name input::placeholder { color: #6a6a78; text-shadow: none; opacity: 1; }
.card-name input:focus { outline: none; }
.card-name:has(input:focus-visible) { box-shadow: 0 var(--u) 0 var(--cursor), 0 calc(var(--u) * 2) 0 var(--cursor); }
.card-name:has(input:user-invalid) { box-shadow: 0 var(--u) 0 var(--cursor); }

.card-partner { left: calc(var(--u) * 12); top: calc(var(--u) * 51); width: calc(var(--u) * 124); height: calc(var(--u) * 54); }
.card-partner > .card-label { position: absolute; left: 0; top: 0; }
.partner-readout { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u) * 3); text-transform: uppercase; }
.partner-readout img { width: calc(var(--u) * 32); height: calc(var(--u) * 16); image-rendering: pixelated; }
.partner {
  position: absolute; top: calc(var(--u) * 18); width: calc(var(--u) * 40); height: calc(var(--u) * 36); cursor: pointer;
  clip-path: polygon(var(--u) 0, calc(100% - var(--u)) 0, 100% var(--u), 100% calc(100% - var(--u)), calc(100% - var(--u)) 100%, var(--u) 100%, 0 calc(100% - var(--u)), 0 var(--u));
  box-shadow: inset 0 0 0 var(--u) #b4e6a4; transition: background-color 120ms ease-out;
}
.partner:nth-of-type(1) { left: 0; --icon: url("/web/start/icon-treecko.png"); }
.partner:nth-of-type(2) { left: calc(var(--u) * 42); --icon: url("/web/start/icon-torchic.png"); }
.partner:nth-of-type(3) { left: calc(var(--u) * 84); --icon: url("/web/start/icon-mudkip.png"); }
.partner:hover { background: #d8f6ce; }
.partner:has(input:checked) { background: #dcf0ff; box-shadow: inset 0 0 0 var(--u) var(--tab-edge), inset 0 0 0 calc(var(--u) * 2) #b4dcff; }
.partner:has(input:focus-visible) { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--cursor); }
.partner input { position: absolute; opacity: 0; pointer-events: none; }
.partner-icon { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 1); width: calc(var(--u) * 32); height: calc(var(--u) * 32); background: var(--icon) 0 0 / calc(var(--u) * 32) calc(var(--u) * 64); image-rendering: pixelated; }
/* The party menu's habit: only the chosen Pokémon's icon hops. */
.partner:has(input:checked) .partner-icon { animation: icon-hop 360ms steps(1) infinite; }
@keyframes icon-hop { 50% { background-position: 0 calc(var(--u) * -32); } }

.card-portrait { left: calc(var(--u) * 138); top: calc(var(--u) * 28); width: calc(var(--u) * 84); height: calc(var(--u) * 78); margin: 0; }
#trainer-preview { position: absolute; left: calc(var(--u) * 10); top: 0; width: calc(var(--u) * 64); height: calc(var(--u) * 64); image-rendering: pixelated; cursor: pointer; }
.look-arrow {
  position: absolute; top: 0; width: calc(var(--u) * 20); height: calc(var(--u) * 64); padding: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--card-ink); font: inherit; text-shadow: var(--u) 0 #fff, 0 var(--u) #fff; -webkit-font-smoothing: none;
}
.look-previous { left: 0; }
.look-previous span { transform: scaleX(-1); }
.look-next { right: 0; }
.look-arrow span { display: block; width: calc(var(--u) * 8); transition: transform 120ms ease-out; }
.look-arrow:hover { color: var(--tab-edge); }
.look-next:hover span { transform: translateX(var(--u)); }
.look-previous:hover span { transform: scaleX(-1) translateX(var(--u)); }
.look-arrow:active span { transform: translateX(calc(var(--u) * 2)); }
.look-previous:active span { transform: scaleX(-1) translateX(calc(var(--u) * 2)); }
#trainer-model-name { position: absolute; left: 0; right: 0; top: calc(var(--u) * 63); text-align: center; white-space: nowrap; color: var(--ink); text-shadow: var(--u) 0 var(--ink-shadow), 0 var(--u) var(--ink-shadow), var(--u) var(--u) var(--ink-shadow); }

.back-name { left: calc(var(--u) * 12); top: calc(var(--u) * 8); color: #000; text-shadow: var(--u) 0 #b4dcff, 0 var(--u) #b4dcff, var(--u) var(--u) #b4dcff; }
.back-id { right: calc(var(--u) * 12); top: calc(var(--u) * 8); color: #000; text-shadow: none; }
.back-rows { left: calc(var(--u) * 20); right: calc(var(--u) * 14); top: calc(var(--u) * 32); margin: 0; }
.back-rows div { display: flex; justify-content: space-between; height: calc(var(--u) * 16); }
.back-rows dt, .back-rows dd { text-transform: uppercase; }
.back-rows .level { text-transform: none; }
.back-rows dd { margin: 0; color: var(--card-ink); }

/* Messages and Start use Emerald's dialog window frame. */
.quick-error, .begin-adventure {
  border: calc(var(--u) * 5) solid transparent; border-image: url("/web/start/window.png") 8 fill / calc(var(--u) * 8) / 0 stretch;
  image-rendering: pixelated; color: var(--ink); text-shadow: var(--u) 0 var(--ink-shadow), 0 var(--u) var(--ink-shadow), var(--u) var(--u) var(--ink-shadow);
}
.quick-error { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--u) calc(var(--u) * 4); line-height: calc(var(--u) * 16); cursor: pointer; }
.begin-adventure {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 4); width: 100%; height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 6);
  font: inherit; text-transform: uppercase; -webkit-font-smoothing: none; cursor: pointer;
}
.begin-adventure:focus-visible { outline-offset: calc(var(--u) * -2); }
.begin-cursor { width: calc(var(--u) * 8); color: var(--cursor); text-shadow: none; transition: transform 160ms cubic-bezier(.16, 1, .3, 1); }
.begin-adventure:hover .begin-cursor { transform: translateX(calc(var(--u) * 2)); }
.begin-adventure:active { filter: brightness(.94); }
.begin-busy { display: none; }
.begin-adventure:disabled { cursor: wait; }
.begin-adventure:disabled .begin-label { display: none; }
.begin-adventure:disabled .begin-busy { display: inline; }
.begin-adventure:disabled .begin-cursor { animation: cursor-wait 480ms steps(1) infinite; }
@keyframes cursor-wait { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .quick-start-form, .partner:has(input:checked) .partner-icon, .begin-adventure:disabled .begin-cursor { animation: none; }
  .partner, .begin-cursor, .look-arrow span { transition: none; }
}