/* PokeBrokers. The look is a GBA overworld rather than a dark crypto terminal:
   grass bands, cream dialogue boxes with the double border every text box in
   those games had, and one pixel display face used sparingly. Press Start 2P is
   unreadable below about 11px, so it is on headings and labels only — body copy
   is a mono that can carry a paragraph. */

:root {
  --grass: #7fbf6a;
  --grass-dk: #6fae5c;
  --grass-lt: #93cd7d;
  --cream: #f6f1df;
  --paper: #fffdf4;
  --ink: #2f2438;
  --ink-soft: #5f5470;
  --line: #2f2438;
  --red: #e2513f;
  --red-dk: #b83a2c;
  --blue: #4f9ec4;
  --gold: #f0c030;
  --good: #3f8a44;
  --bad: #c0492f;

  --box-r: 10px;
  --edge: 4px;
  --shadow: 0 4px 0 rgba(47, 36, 56, .28);
  --wrap: 1180px;

  --display: 'Press Start 2P', ui-monospace, monospace;
  --body: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--grass);
  -webkit-font-smoothing: antialiased;
}

canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

a { color: inherit; }

/* --------------------------------------------------------------- dialogue
   The signature component. Thick dark edge, thin light inset, hard shadow —
   the same three rules every text box in those games followed. */
.dialogue {
  background: var(--paper);
  border: var(--edge) solid var(--line);
  border-radius: var(--box-r);
  box-shadow: var(--shadow), inset 0 0 0 2px #e8e0c8;
  padding: 22px 24px;
}

/* Official sprites sit in the document as plain <img>. Nearest-neighbour keeps
   the edges hard when they scale. */
.pkmn { image-rendering: pixelated; display: block; }

/* -------------------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 55;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 22px;
  background: rgba(246, 241, 223, .94);
  backdrop-filter: blur(6px);
  border-bottom: 4px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13px;
  text-decoration: none; letter-spacing: .02em;
}
/* Backed at 3× (a 60px canvas) and shown at 30px — an exact 2:1 on retina, so
   it stays pixel-sharp. 20px was technically correct and visually wrong: it
   sat well under the cap height of the wordmark next to it and read as a
   bullet point rather than a logo. */
.brand-ball { display: block; width: 30px; height: 30px; }
.brand-ball canvas { width: 30px; height: 30px; }
.nav-links { display: flex; gap: 18px; margin-left: auto; }
.nav-links a {
  font-family: var(--display); font-size: 8px;
  text-decoration: none; color: var(--ink-soft);
  padding: 6px 2px; letter-spacing: .04em;
}
.nav-links a:hover { color: var(--red); }

/* ------------------------------------------------------------------ button */
.btn {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 13px 18px;
  border: 3px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--line);
  transition: transform .06s, box-shadow .06s;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dk); }
.btn-ghost { background: var(--paper); }
.btn-connect { background: var(--gold); }

.x-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 3px solid var(--line); border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 4px 0 var(--line);
  transition: transform .06s, box-shadow .06s;
}
.x-link:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--line); }
.x-link canvas { width: 18px; height: 18px; }
.foot-links .x-link {
  background: transparent; border-color: var(--grass-lt);
  box-shadow: 0 3px 0 var(--grass-lt);
}
.foot-links .x-link:hover { box-shadow: 0 1px 0 var(--grass-lt); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--line); }

/* ------------------------------------------------------------------- gate */
.gate {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(29, 22, 38, .82);
  display: grid; place-items: center;
  padding: 20px; overflow-y: auto;
}
.gate[hidden] { display: none; }
.gate-box { max-width: 700px; max-height: 88vh; overflow-y: auto; font-size: 14px; }
.gate-title { font-family: var(--display); font-size: 12px; color: var(--red); line-height: 1.7; margin: 0 0 14px; }
.gate-sub { font-family: var(--display); font-size: 10px; margin: 20px 0 8px; }
.gate-box ul { padding-left: 18px; margin: 10px 0; }
.gate-box li { margin-bottom: 8px; }
.gate-warn {
  border: 3px solid var(--red); border-radius: 8px;
  padding: 12px 14px; margin: 16px 0; color: var(--red-dk);
  background: #fdf0ec;
}
#gate-accept { width: 100%; margin-top: 18px; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
  gap: 28px;
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 34px 22px 26px;
}
/* Sized to the canvas, not the column. The world is blitted at a whole-number
   scale so the pixels stay square, which means its width lands on a multiple of
   256 and almost never equals the column width. Stretching the canvas to fill
   would resample and soften every edge; letting the frame shrink to the canvas
   and centring it keeps the art exact. */
.world-col { min-width: 0; }

.world-frame {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border: var(--edge) solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--grass);
  line-height: 0;
}
.world-frame canvas { display: block; height: auto; }
.world-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(47, 36, 56, .22);
}
/* Nobody tries arrow keys on a canvas unless told. Fades once the canvas has
   focus, so it stops nagging the moment it has done its job. */
.world-hint {
  position: absolute; left: 8px; bottom: 8px; margin: 0;
  pointer-events: none;
  font-family: var(--display); font-size: 7px; letter-spacing: .06em;
  color: var(--cream);
  background: rgba(29, 22, 38, .72);
  border-radius: 4px; padding: 5px 7px;
  transition: opacity .25s;
}
.world-frame:focus-within .world-hint { opacity: 0; }
.hero-title {
  font-family: var(--display);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.22;
  margin: 0 0 14px;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--gold);
}
.hero-lede { margin: 0 0 18px; color: var(--ink-soft); }
.hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-foot { font-size: 12px; color: var(--ink-soft); margin: 12px 0 0; }

.pot-box { border: 3px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--cream); }
.pot-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--display); font-size: 8px; margin-bottom: 9px;
}
.pot-head b { color: var(--red); }
.pot-bar { height: 14px; border: 3px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; }
.pot-bar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--grass) 0 6px, var(--grass-dk) 6px 8px);
  transition: width .5s;
}
.pot-note { font-size: 12px; margin: 8px 0 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ stats */
.stats {
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px 26px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.stats div {
  background: var(--ink); color: var(--paper);
  border-radius: 8px; padding: 14px 16px;
  border: 3px solid #1b1424;
}
.stats span { display: block; font-family: var(--display); font-size: 7px; color: var(--grass-lt); margin-bottom: 9px; letter-spacing: .06em; }
.stats b { font-family: var(--display); font-size: 15px; }

/* ------------------------------------------------------------------ strip */
.strip-wrap { background: var(--ink); border-top: 4px solid #1b1424; border-bottom: 4px solid #1b1424; padding: 8px 0; overflow: hidden; }
.strip-wrap canvas { width: 100%; }

/* ------------------------------------------------------------------ bands */
.band { padding: 62px 22px; }
.band > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.band-cream { background: var(--cream); border-top: 4px solid var(--line); border-bottom: 4px solid var(--line); }
.band-grass {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.16) 0 2px, transparent 2px) 0 0/26px 26px,
    radial-gradient(circle at 62% 68%, rgba(47,36,56,.06) 0 2px, transparent 2px) 0 0/34px 34px,
    var(--grass);
}

.eyebrow { font-family: var(--display); font-size: 8px; color: var(--red); letter-spacing: .12em; margin: 0 0 12px; }
.h2 { font-family: var(--display); font-size: clamp(15px, 2.1vw, 22px); line-height: 1.6; margin: 0 0 16px; }
.lede { max-width: 68ch; color: var(--ink-soft); margin: 0 0 16px; }
.band-grass .lede { color: #2f3c2c; }
.band-grass .h2, .band-grass .eyebrow { color: var(--ink); }
.band-grass .eyebrow { color: #8a2f1f; }

/* ------------------------------------------------------------------ steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.step { position: relative; padding-top: 30px; }
.step-n {
  position: absolute; top: -14px; left: 18px;
  font-family: var(--display); font-size: 11px;
  background: var(--red); color: #fff;
  border: 3px solid var(--line); border-radius: 6px;
  padding: 6px 9px;
}
.step h3 { font-family: var(--display); font-size: 10px; margin: 4px 0 12px; letter-spacing: .04em; }
.step p { margin: 0; font-size: 14px; color: var(--ink-soft); }

/* ------------------------------------------------------------------ split */
.split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 26px; align-items: start; }

.loop { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.loop-step {
  flex: 1 1 150px;
  background: var(--paper); border: 3px solid var(--line); border-radius: 8px;
  padding: 12px; box-shadow: 0 3px 0 var(--line);
}
.loop-step b { display: block; font-family: var(--display); font-size: 9px; margin-bottom: 8px; color: var(--red); }
.loop-step span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.loop-arrow { align-self: center; font-family: var(--display); font-size: 12px; color: var(--ink); }

.balls-card .card-title { font-family: var(--display); font-size: 10px; margin: 0 0 10px; }
.balls-card .card-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 14px; }
.ball-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ball-list li {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  border-top: 2px dashed #ddd6bd; padding-top: 10px;
}
.ball-list li:first-child { border-top: 0; padding-top: 0; }
/* 20px sprite at 2×, shown at its backing size — no resample. */
.ball-list canvas { width: 40px; height: 40px; }
.ball-name { font-family: var(--display); font-size: 8px; display: block; margin-bottom: 5px; }
.ball-cost { font-size: 12px; color: var(--ink-soft); }
.ball-odds { font-family: var(--display); font-size: 10px; color: var(--good); }

/* ------------------------------------------------------------------ table */
.table-wrap {
  overflow-x: auto;
  border: var(--edge) solid var(--line);
  border-radius: var(--box-r);
  background: var(--paper);
  box-shadow: var(--shadow);
  margin: 22px auto;
}
.table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.table th {
  text-align: left; font-family: var(--display); font-size: 7.5px;
  letter-spacing: .07em; padding: 14px 16px;
  background: var(--ink); color: var(--grass-lt);
}
.table td { padding: 13px 16px; border-top: 2px solid #e8e0c8; vertical-align: top; }
.table tbody tr:nth-child(even) { background: #faf7ea; }
.table .w { font-family: var(--display); font-size: 11px; }
.table .status { font-family: var(--display); font-size: 8px; }
.st-good { color: var(--good); }
.st-warn { color: #b8860b; }
.st-bad { color: var(--bad); }
.compare td:first-child { font-weight: 500; white-space: nowrap; }
.compare .bad { color: var(--bad); }
.compare .good { color: var(--good); }

.kicker {
  font-family: var(--display); font-size: clamp(11px, 1.5vw, 14px);
  line-height: 2; text-align: center; margin: 30px auto 0; max-width: 42ch;
}

/* ----------------------------------------------------------------- badges */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.badge-card {
  background: var(--paper); border: var(--edge) solid var(--line); border-radius: var(--box-r);
  padding: 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center;
}
.badge-card.is-next { border-color: var(--red); box-shadow: 0 4px 0 var(--red-dk); }
.badge-card canvas { width: 44px; height: 44px; }
.badge-ticker { font-family: var(--display); font-size: 11px; display: block; }
.badge-co { font-size: 12px; color: var(--ink-soft); display: block; margin: 5px 0 4px; }
.badge-gym { font-size: 11px; color: #8a7f9c; display: block; }
.badge-addr {
  display: block; margin-top: 6px; font-size: 11px;
  color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted #bdb5a0;
}
.badge-addr:hover { color: var(--red); }
.badge-flag { font-family: var(--display); font-size: 7px; color: var(--red); display: block; margin-top: 6px; }
.badge-flag.warn { color: #b8860b; }
.badge-flag.off { color: var(--ink-soft); }
.badge-card.is-off { opacity: .62; }

/* ---------------------------------------------------------------- sources */
.sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.source-n { font-family: var(--display); font-size: 22px; color: var(--red); display: block; margin-bottom: 10px; }
.source h3 { font-family: var(--display); font-size: 9px; margin: 0 0 10px; }
.source p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.split-note { text-align: center; margin: 26px auto 0; max-width: 60ch; color: var(--ink-soft); }

/* ----------------------------------------------------------------- guards */
.guards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.guard h3 { font-family: var(--display); font-size: 9px; margin: 0 0 10px; }
.guard p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.bell-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
#bell-note { font-size: 13px; color: #2f3c2c; }

/* ---------------------------------------------------------------- trainer */
.trainer-card { margin-top: 24px; }
.trainer-head {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  padding-bottom: 16px; border-bottom: 3px solid #e8e0c8; margin-bottom: 16px;
}
.tc-label { display: block; font-family: var(--display); font-size: 7px; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: .06em; }
.trainer-head b { font-family: var(--display); font-size: 11px; }
.team { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; min-height: 70px; }
.team-empty { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13.5px; margin: 0; align-self: center; }
.team-slot {
  border: 3px solid var(--line); border-radius: 8px; background: var(--cream);
  padding: 10px; text-align: center;
}
.team-slot .pkmn { width: 100%; max-width: 84px; height: auto; margin: 0 auto; }
.team-slot span { display: block; font-family: var(--display); font-size: 7px; margin-top: 8px; }
.trainer-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.trainer-note { font-size: 13px; color: var(--ink-soft); }

/* ----------------------------------------------------------------- verify */
#verify-table td { font-size: 13px; }
#verify-table .addr { font-size: 12.5px; word-break: break-all; }
.pending { color: var(--ink-soft); font-style: italic; }

/* ------------------------------------------------------------------- foot */
.foot { background: var(--ink); color: var(--cream); padding: 42px 22px 28px; border-top: 4px solid #1b1424; }
.foot-inner { max-width: var(--wrap); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-inner b { font-family: var(--display); font-size: 12px; }
.foot-inner p { margin: 10px 0 0; font-size: 13px; color: #b9b2c8; }
.foot-links { display: flex; gap: 18px; align-items: flex-start; }
.foot-links a { font-family: var(--display); font-size: 8px; color: var(--grass-lt); text-decoration: none; }
.foot-links a:hover { color: var(--gold); }
.foot-fine { max-width: var(--wrap); margin: 26px auto 0; font-size: 11.5px; color: #8f88a0; line-height: 1.75; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 300; max-width: min(560px, 92vw);
  background: var(--paper); border: var(--edge) solid var(--line); border-radius: 10px;
  padding: 14px 18px; box-shadow: var(--shadow);
  font-size: 13.5px; line-height: 1.6;
}
.toast[hidden] { display: none; }
.toast.err { border-color: var(--red); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .steps, .sources, .guards, .badges { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .trainer-head { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  /* The links go, so the auto margin that used to push the right-hand controls
     over has to move onto the first of them. */
  .nav-links { display: none; }
  .x-link { margin-left: auto; }
}

@media (max-width: 560px) {
  .band { padding: 44px 16px; }
  .steps, .sources, .guards, .badges, .stats { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 22px 16px; }
  .loop-arrow { display: none; }

  /* Brand, X and Connect together are wider than a phone. Everything in the
     bar shrinks rather than letting one of them push off the edge. */
  .nav { gap: 10px; padding: 10px 14px; }
  .brand { font-size: 11px; gap: 8px; }
  .brand-ball, .brand-ball canvas { width: 26px; height: 26px; }
  .x-link { width: 34px; height: 34px; }
  .x-link canvas { width: 16px; height: 16px; }
  .btn-connect { font-size: 9px; padding: 11px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}