/* Poketrap: one GBA route. Native grid 16 px tiles, scale x4 (x3 on phones). Every size is a multiple of --px (one
   native pixel). Light comes from tile shading and sprite highlights only: no gradients, no glow, no blur. */
:root {
  --grass: #58B848; --grass-dk: #389028; --grass-lt: #98D870; --tallgrass: #2F8A3A;
  --path: #E8D8A0; --path-dk: #C8B070; --water: #58A8E8; --tree: #206838; --sky: #A8E0F8;
  --box: #F8F8F8; --box-line: #5870A8; --box-lt: #B8C8E8; --ink: #383838; --ink-2: #707070;
  --ball: #F8C838; --ball-dk: #D89818; --ball-cream: #F8F0D8; --latch: #30A8A0; --latch-dk: #207870;
  --caught: #F8C838; --fled: #9088D8; --dusk: #3E7A52; --red: #E04838;
  --px: 4px; --t: calc(var(--px) * 16);
  --f-name: "Jersey 10", "Pixelify Sans", system-ui, sans-serif;
  --f-ui: "Pixelify Sans", system-ui, sans-serif;
  --f-num: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}
@media (max-width: 719px) { :root { --px: 3px; } }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--tree); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 500 20px/1.35 var(--f-ui); color: var(--ink); background: var(--grass); overflow-x: hidden; }
a, button, [role=button], [role=radio], summary, label, .ca { cursor: pointer; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
.num { font-family: var(--f-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.muted { color: var(--ink-2); }
:focus-visible { outline: var(--px) solid var(--ball-dk); outline-offset: var(--px); }
canvas.map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; visibility: hidden; }
canvas.map.ready { visibility: visible; }

/* ---------- scenes */
.scene { position: relative; overflow: hidden; isolation: isolate; background: var(--grass); }
.scene > :not(canvas) { position: relative; z-index: 1; }
.s-end { background: var(--dusk); }

/* ---------- the GBA box: white fill, frame in --box-line with a light inner line, stepped corners */
.box {
  background: var(--box); color: var(--ink);
  border: calc(var(--px) * 1.5) solid var(--box-line);
  box-shadow: inset 0 0 0 var(--px) var(--box), inset 0 0 0 calc(var(--px) * 1.5) var(--box-lt);
  clip-path: polygon(0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px), calc(var(--px) * 2) 0,
    calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2),
    100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%,
    calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2));
}
.dialog { padding: calc(var(--px) * 5) calc(var(--px) * 6); position: relative; }
.dialog h2 { font: 600 26px/1.15 var(--f-ui); margin: 0 0 8px; letter-spacing: .02em; }
.dialog p { margin: 0; }
.lbl { font: 600 13px/1 var(--f-ui); letter-spacing: .12em; color: var(--ink-2); }

/* the black triangle cursor (slides in, 2 frames) */
.tri { display: inline-block; width: 0; height: 0; border-style: solid; border-width: calc(var(--px) * 2) 0 calc(var(--px) * 2) calc(var(--px) * 2.5);
  border-color: transparent transparent transparent var(--ink); margin-right: calc(var(--px) * 2); opacity: 0; transform: translateX(calc(var(--px) * -2)); transition: transform .12s steps(2), opacity .12s steps(2); flex: none; }
.choice { display: inline-flex; align-items: center; min-height: 40px; padding: 2px 6px 2px 0; text-decoration: none; color: var(--ink); font: 500 20px/1.1 var(--f-ui); letter-spacing: .03em; white-space: nowrap; }
.choice:hover .tri, .choice:focus-visible .tri, .choice[aria-current=true] .tri, .yn-o[aria-checked=true] .tri, .gbtn .tri { opacity: 1; transform: none; }
.choice:active { transform: translateY(var(--px)); }
.choice:disabled { color: var(--ink-2); cursor: default; }
.choice:disabled .tri { opacity: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; }
.more { position: absolute; right: calc(var(--px) * 5); bottom: calc(var(--px) * 3); width: 0; height: 0; border-style: solid; border-width: calc(var(--px) * 2.5) calc(var(--px) * 2) 0 calc(var(--px) * 2); border-color: var(--ink) transparent transparent transparent; animation: more 0.66s steps(1) infinite; }
@keyframes more { 50% { transform: translateY(var(--px)); } }

/* GBA choice-box button (the main action) */
.gbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: calc(var(--px) * 2) calc(var(--px) * 5);
  background: var(--box); color: var(--ink); font: 600 20px/1 var(--f-ui); letter-spacing: .04em;
  border: calc(var(--px) * 1.5) solid var(--box-line); box-shadow: inset 0 0 0 var(--px) var(--box), inset 0 0 0 calc(var(--px) * 1.5) var(--box-lt), 0 var(--px) 0 var(--box-line);
  transition: transform .06s steps(1); }
.gbtn:hover { background: var(--ball-cream); }
.gbtn:active, .gbtn.pressed { transform: translateY(var(--px)); box-shadow: inset 0 0 0 var(--px) var(--box), inset 0 0 0 calc(var(--px) * 1.5) var(--box-lt), 0 0 0 var(--box-line); }
.gbtn:active .tri, .gbtn.pressed .tri { animation: blink .24s steps(1) infinite; }
.gbtn:disabled { color: var(--ink-2); background: var(--box); cursor: default; transform: none; }
.gbtn:disabled .tri { opacity: 0; }
.gbtn.big { font-size: 24px; min-height: 56px; padding: 0 calc(var(--px) * 7); }
@keyframes blink { 50% { opacity: 0; } }

/* YES / NO style option boxes */
.yn { display: inline-flex; flex-wrap: wrap; gap: 2px 14px; padding: calc(var(--px) * 1.5) calc(var(--px) * 3); border: var(--px) solid var(--box-lt); }
.yn-o { display: inline-flex; align-items: center; min-height: 40px; font: 500 18px/1 var(--f-ui); letter-spacing: .03em; color: var(--ink-2); }
.yn-o[aria-checked=true] { color: var(--ink); }
.yn-o b { margin-left: 6px; font-size: 18px; }
.yn-o:hover { color: var(--ink); }

/* sprite slots: one flat palette colour until the art arrives (art.css swaps in the sheet) */
.sprite { background-color: var(--slot, var(--ball)); background-repeat: no-repeat; image-rendering: pixelated; }
.ball { --slot: var(--ball); --bs: 32; width: calc(var(--px) * var(--bs)); height: calc(var(--px) * var(--bs)); will-change: transform; }
.star { --slot: var(--ball-cream); width: calc(var(--px) * 8); height: calc(var(--px) * 8); position: absolute; left: 0; top: 0; }
.creature { --slot: var(--fled); width: calc(var(--px) * 32); height: calc(var(--px) * 32); position: absolute; left: 0; top: 0; }
.throw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.throw-layer .ball { position: absolute; left: 0; top: 0; }

/* ---------- 1. hero */
.s-hero { min-height: 100svh; display: grid; }
.hero-in { display: grid; justify-items: center; align-content: start; gap: calc(var(--px) * 4); padding: calc(var(--t) * 1.6) 16px calc(var(--t) * 0.8); min-height: 100svh; grid-template-rows: auto 1fr auto; }
.sign { --slot: var(--path-dk); width: min(calc(var(--px) * 176), 94vw); aspect-ratio: 176 / 64; display: grid; place-items: center; background-size: 100% 100%; }
.name { margin: 0; height: .9em; display: flex; align-items: center; font: 400 clamp(64px, 12vw, 156px)/.8 var(--f-name); color: var(--box); letter-spacing: .01em; padding-bottom: .06em;
  text-shadow: var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    var(--px) var(--px) 0 var(--ink), calc(var(--px) * -1) var(--px) 0 var(--ink), var(--px) calc(var(--px) * -1) 0 var(--ink), calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--ink),
    0 calc(var(--px) * 2) 0 var(--ink), var(--px) calc(var(--px) * 2) 0 var(--ink), calc(var(--px) * -1) calc(var(--px) * 2) 0 var(--ink); }
.hero-ball-spot { position: relative; align-self: center; width: calc(var(--px) * 32); height: calc(var(--px) * 32); touch-action: none; }
.hero-ball { position: absolute; inset: 0; cursor: grab; }
.hero-ball:active { cursor: grabbing; }
.aim { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.aim i { position: absolute; width: calc(var(--px) * 2); height: calc(var(--px) * 2); background: var(--box); margin: calc(var(--px) * -1); }
.hero-dialog { width: min(960px, 100%); min-height: calc(var(--px) * 30); }
.hero-dialog .type { font-size: clamp(20px, 2.2vw, 26px); max-width: 44ch; }
.demo-tag { position: absolute; top: calc(var(--px) * 2); right: calc(var(--px) * 4); font: 600 12px/1 var(--f-ui); letter-spacing: .16em; color: var(--ink-2); }
.s-hero > .startmenu { position: absolute; }
.startmenu { top: 16px; right: 16px; z-index: 5; width: 232px; padding: calc(var(--px) * 3) calc(var(--px) * 4); }
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sm-list > li { display: flex; align-items: center; }
.sm-list .choice { width: 100%; min-height: 36px; font-size: 19px; text-transform: none; }
.sm-sep { height: var(--px); background: var(--box-lt); margin: 6px 0; }
.sm-ca { margin-top: 8px; display: grid; gap: 4px; }
.ca { text-align: left; color: var(--ink); padding: 4px 0; }
.ca-v { font-size: 16px; overflow-wrap: anywhere; word-break: break-all; line-height: 1.2; }
.ca:hover .ca-v { color: var(--box-line); }
.ca.copied .ca-v { color: var(--latch-dk); }
.ticker { font-size: 16px; }
.start-fab { position: fixed; top: 12px; right: 12px; z-index: 40; opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(-8px); transition: opacity .2s steps(3), transform .2s steps(3); }
body.past-hero .start-fab { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.startmenu.floating { position: fixed; top: 64px; right: 12px; }
@media (min-width: 720px) { body.past-hero .startmenu:not(.floating) { visibility: visible; } }
@media (max-width: 719px) {
  .start-fab { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
  .s-hero > .startmenu:not(.floating) .nav { display: none; }
  .s-hero > .startmenu:not(.floating) .sm-sep { display: none; }
  .hero-dialog { min-height: 0; }
  .hero-dialog .choices { gap: 0 18px; }
  .hero-in { padding-top: 12px; grid-template-rows: auto 1fr auto; }
  .startmenu { position: relative; top: auto; right: auto; width: 100%; order: -1; margin: 0; }
  .sm-list { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .sm-list .choice { min-height: 40px; font-size: 17px; }
  .sm-sep { grid-column: 1 / -1; }
  .startmenu.floating { width: calc(100% - 24px); left: 12px; top: 64px; }
  .s-hero { display: block; }
  .s-hero > .startmenu:not(.floating) { position: relative; top: auto; right: auto; margin: 12px 140px 0 16px; width: auto; }
  .hero-in { min-height: calc(100svh - 150px); }
  .hof-list .frame:nth-child(n+5) { display: none; }
}

/* ---------- 2. PC Box */
.s-pc { display: grid; grid-template-columns: minmax(0, 820px) minmax(300px, 420px); justify-content: center; gap: 24px; padding: calc(var(--t) * 1.2) max(16px, calc(50% - 680px)); align-items: start; }
.pc { padding: calc(var(--px) * 4); min-width: 0; }
.pc-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 10px; }
.pc-name { flex: 1; text-align: center; margin: 0; font: 400 44px/1 var(--f-name); letter-spacing: .04em; }
.pc-count { font-size: 15px; color: var(--ink-2); min-width: 9ch; text-align: right; }
.arrow { flex: none; width: 48px; height: 48px; display: grid; place-items: center; touch-action: manipulation; }
.arrow::before { content: ""; width: 0; height: 0; border-style: solid; border-width: calc(var(--px) * 3) calc(var(--px) * 3.5) calc(var(--px) * 3) 0; border-color: transparent var(--box-line) transparent transparent; }
.arrow.r::before { border-width: calc(var(--px) * 3) 0 calc(var(--px) * 3) calc(var(--px) * 3.5); border-color: transparent transparent transparent var(--box-line); }
.arrow:active { transform: translateY(var(--px)); }
.pc-search { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; min-width: 0; }
.field-in { display: flex; align-items: center; gap: 10px; padding: 0 10px; border: var(--px) solid var(--box-lt); background: var(--box); position: relative; }
.field-in input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; font: 500 19px var(--f-ui); color: var(--ink); outline: 0; caret-color: transparent; }
.field-in input::-webkit-search-cancel-button { display: none; }
.caret { width: calc(var(--px) * 3); height: var(--px); background: var(--ink); animation: blink 1s steps(1) infinite; }
.naming { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; }
.naming button { height: 32px; font: 500 16px/1 var(--f-ui); color: var(--ink); }
.naming button:hover, .naming button:focus-visible { background: var(--ball-cream); }
.naming button.wide { grid-column: span 2; font-size: 13px; letter-spacing: .08em; }
@media (max-width: 899px) { .naming { display: none; } }
.pc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--px) * 2); background: #E8ECF4; padding: calc(var(--px) * 2); min-height: 420px; align-content: start; }
.slot { position: relative; aspect-ratio: 5 / 7; background: var(--box); display: grid; place-items: center; overflow: hidden; border: var(--px) solid transparent; }
.slot img { width: 100%; height: 100%; object-fit: contain; }
.slot:hover, .slot:focus-visible { border-color: var(--box-lt); }
.slot[aria-selected=true] { border-color: var(--ball-dk); }
.slot[aria-selected=true]::after { content: ""; position: absolute; left: 50%; top: 2px; transform: translateX(-50%); border-style: solid; border-width: calc(var(--px) * 2.5) calc(var(--px) * 2) 0; border-color: var(--ink) transparent transparent; animation: more .66s steps(1) infinite; }
.slot .p { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(248, 248, 248, .94); font-size: 14px; text-align: center; padding: 2px 0; }
.slot.skel { background: #F0F2F8; }
.pc-pages { display: flex; align-items: center; justify-content: center; gap: 22px; padding-top: 8px; }
.pc-pages .num { font-size: 18px; min-width: 3ch; text-align: center; }
.pc-card { padding: calc(var(--px) * 5); position: sticky; top: 16px; min-height: 420px; display: grid; align-content: start; gap: 12px; }
.pick-empty { color: var(--ink-2); margin: 40px 0; text-align: center; }
.pk-img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #F0F2F8; }
.pk-name { font: 600 20px/1.2 var(--f-ui); margin: 0; overflow-wrap: anywhere; }
.pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 0; }
.pk-grid dt { font: 600 12px/1 var(--f-ui); letter-spacing: .12em; color: var(--ink-2); }
.pk-grid dd { margin: 2px 0 6px; font-size: 22px; }
.pk-links { display: flex; gap: 18px; flex-wrap: wrap; }
.pk-links a { font-size: 16px; color: var(--box-line); display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 899px) {
  .s-pc { grid-template-columns: minmax(0, 1fr); padding: calc(var(--t) * 0.8) 16px; }
  .pc-grid { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 30%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; min-height: 0; }
  .pc-grid .slot { scroll-snap-align: start; }
  .pc-card { position: relative; top: 0; min-height: 0; }
  .pk-img { aspect-ratio: 1; }
}

/* ---------- 3. throw */
.s-throw { padding: calc(var(--t) * 1.4) 16px; }
.throw-in { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 0; max-width: 1280px; margin: 0 auto; }
.throwbox { display: grid; gap: 16px; }
.dlg-q { font: 600 30px/1.1 var(--f-ui) !important; }
.tb-card { display: flex; gap: 14px; align-items: center; min-height: 72px; }
.tb-card img { width: 52px; height: 86px; object-fit: contain; background: #F0F2F8; flex: none; }
.tb-card b { display: block; font: 600 18px/1.2 var(--f-ui); overflow-wrap: anywhere; }
.tb-card .num { font-size: 17px; color: var(--ink-2); }
.tb-row { display: grid; grid-template-columns: auto auto 1fr; gap: 20px; align-items: center; }
.stepper { display: grid; justify-items: center; gap: 2px; }
.st-up, .st-dn { width: 64px; height: 36px; display: grid; place-items: center; touch-action: none; }
.st-up::before { content: ""; border-style: solid; border-width: 0 calc(var(--px) * 3.5) calc(var(--px) * 3); border-color: transparent transparent var(--box-line); }
.st-dn::before { content: ""; border-style: solid; border-width: calc(var(--px) * 3) calc(var(--px) * 3.5) 0; border-color: var(--box-line) transparent transparent; }
.st-up:active, .st-dn:active { transform: translateY(var(--px)); }
.st-val { display: flex; align-items: baseline; gap: 2px; border-bottom: var(--px) solid var(--box-lt); padding: 0 6px; }
.st-val .cur { font-size: 30px; color: var(--ink-2); }
.st-val input { width: 6.2ch; font-size: 44px; border: 0; background: none; color: var(--ink); text-align: right; outline: 0; padding: 0; }
.meter { position: relative; width: calc(var(--px) * 16); height: calc(var(--px) * 32); background: var(--grass); overflow: hidden; }
.m-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--tallgrass); transition: height .2s steps(4); }
.m-ball { --slot: var(--ball); position: absolute; left: calc(var(--px) * 4); width: calc(var(--px) * 8); height: calc(var(--px) * 8); bottom: 30%; transition: bottom .2s steps(4); }
.gap { margin: 0; font-size: 17px; color: var(--ink-2); }
.gap b { color: var(--ink); font-size: 19px; }
.tb-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.tb-sum { font-size: 16px; color: var(--ink-2); margin: 0; }
.tb-sum .num { color: var(--ink); font-size: 17px; }
.tb-go { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.tb-say { min-height: 1.4em; font-size: 20px; margin: 0; }
.tb-say.err { color: var(--red); }
.landing { min-height: calc(var(--t) * 3); }
@media (max-width: 899px) { .throw-in { grid-template-columns: minmax(0, 1fr); } .tb-row { grid-template-columns: auto auto; } .tb-row .gap { grid-column: 1 / -1; } }

/* ---------- 4. field */
.s-field { padding: calc(var(--t) * 1.2) 16px calc(var(--t) * 1.4); }
.fld-in { max-width: 1280px; margin: 0 auto; display: grid; gap: 22px; }
.field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.field-head h2 { margin: 0; }
.patches { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--px) * 56), 1fr)); gap: calc(var(--px) * 6) calc(var(--px) * 4); }
.patch { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.patch .grass { --slot: var(--tallgrass); width: calc(var(--px) * 48); height: calc(var(--px) * 24); overflow: hidden; align-items: end; display: grid; place-items: center; position: relative; }
.patch .ball { position: relative; --bs: 16; margin-bottom: calc(var(--px) * 3); }
.patch.mine .grass { outline: var(--px) solid var(--ball); outline-offset: 0; }
.patch .plate { background: var(--box); padding: 4px 10px; font-size: 18px; border-bottom: var(--px) solid var(--box-lt); }
.patch .plate small { display: block; font: 500 13px/1.2 var(--f-ui); color: var(--ink-2); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patch button.grass { cursor: pointer; }
.patch.shake .ball { animation: shake3 1.14s steps(1) 1; }
@keyframes shake3 { 0%, 33%, 66% { transform: rotate(-22.5deg); } 7%, 40%, 73% { transform: rotate(0); } 14%, 47%, 80% { transform: rotate(22.5deg); } 21%, 54%, 87%, 100% { transform: rotate(0); } }
.invite { justify-self: center; max-width: 560px; text-align: center; padding: calc(var(--px) * 6); }
.invite .sign-post { --slot: var(--path-dk); width: calc(var(--px) * 32); height: calc(var(--px) * 24); margin: 0 auto 12px; }

/* ---------- 5. walls */
.s-walls { padding: calc(var(--t) * 1.2) 16px calc(var(--t) * 1.6); }
.walls-in { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; }
.wall { display: grid; gap: 16px; min-width: 0; }
.wall-head h2 { margin: 0 0 4px; }
.wall-head h2 b { font-size: 24px; color: var(--box-line); margin-left: 6px; }
.wall-head p { color: var(--ink-2); font-size: 17px; }
.hof-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.frame { --slot: var(--caught); padding: calc(var(--px) * 3); display: grid; gap: 8px; background-color: var(--caught); }
.frame .in { background: var(--box); padding: 8px; display: grid; gap: 6px; }
.frame img, .frame .in > .sprite { width: 100%; aspect-ratio: 5 / 7; object-fit: contain; background: #F0F2F8; }
.frame .nm { font: 500 14px/1.25 var(--f-ui); display: block; overflow-wrap: anywhere; }
.frame .pr { font-size: 20px; }
.frame .pr small { font-size: 14px; color: var(--ink-2); display: block; }
.frame .share { font-size: 16px; min-height: 36px; }
.ledge-list { display: grid; gap: 12px; }
.away { display: grid; grid-template-columns: auto 52px 1fr; gap: 12px; align-items: center; background: var(--box); padding: 10px 12px; border-bottom: var(--px) solid var(--box-lt); }
.away .creature { position: relative; --slot: var(--fled); width: calc(var(--px) * 12); height: calc(var(--px) * 12); }
.away.free .creature { --slot: var(--latch); }
.away img { width: 52px; height: 86px; object-fit: contain; background: #F0F2F8; }
.away .nm { font: 500 15px/1.25 var(--f-ui); margin: 0 0 4px; overflow-wrap: anywhere; }
.away .ln { font-size: 16px; color: var(--ink-2); margin: 0; }
.away .ln b { color: var(--ink); }
.away.hop .creature { animation: hop .36s steps(2) 3; }
@keyframes hop { 50% { transform: translateY(calc(var(--px) * -3)); } }
.wall .invite { width: 100%; max-width: none; }
@media (max-width: 899px) { .walls-in { grid-template-columns: 1fr; } .hof-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 6. Trap Center at dusk */
.s-end { padding: calc(var(--t) * 1.4) 16px calc(var(--t) * 1); }
.end-in { display: grid; justify-items: center; gap: 22px; }
.center { --slot: #D8C8D8; position: relative; width: min(calc(var(--px) * 160), 92vw); aspect-ratio: 160 / 128; background-size: 100% 100%; }
.door { position: absolute; left: 50%; bottom: 0; width: 12.5%; height: 18.75%; transform: translateX(-50%); background: none; overflow: hidden; }
/* the glass door slides open on hover: two dark halves grow from the middle in three steps */
.door::before, .door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: #282838; transform: scaleX(0); transition: transform .18s steps(3); }
.door::before { left: 0; transform-origin: 100% 50%; } .door::after { right: 0; transform-origin: 0 50%; }
.door:hover::before, .door:hover::after, .door:focus-visible::before, .door:focus-visible::after { transform: scaleX(1); }
.end-box { width: min(960px, 100%); display: grid; gap: 12px; }
.end-line { font-size: 20px; }
.end-ca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.warp { position: fixed; inset: 0; background: #F8F8F8; opacity: 0; pointer-events: none; z-index: 90; }

/* ---------- dialogs, tooltip, toasts */
.dlg { padding: calc(var(--px) * 6); width: min(640px, calc(100vw - 24px)); max-height: calc(100svh - 32px); overflow: auto; }
.dlg::backdrop { background: rgba(32, 56, 40, .55); }
.dlg h2 { font: 400 40px/1 var(--f-name); margin: 0 0 12px; letter-spacing: .04em; }
.dlg-x { position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; font: 400 32px/1 var(--f-ui); color: var(--ink); }
.dlg-x:hover { color: var(--box-line); }
.wpick .wp-list { display: grid; gap: 6px; margin: 8px 0 14px; }
.wpick .wp-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 8px; text-align: left; font: 500 19px var(--f-ui); }
.wpick .wp-item:hover { background: var(--ball-cream); }
.wpick .wp-dot { width: 32px; height: 32px; background: var(--ball); }
.wpick .wp-get { display: flex; gap: 16px; flex-wrap: wrap; font-size: 16px; }
.wpick .wp-get a { color: var(--box-line); }
.wpick .wp-err { color: var(--red); }
.wpick .btn.ghost { margin-top: 12px; font: 500 18px var(--f-ui); text-decoration: underline; }
.wpick .mono { font-family: var(--f-num); }
.bag-body { display: grid; gap: 14px; }
.bag-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: var(--px) solid #E8ECF4; }
.bag-row img { width: 44px; height: 72px; object-fit: contain; background: #F0F2F8; }
.bag-row .nm { font: 500 15px/1.2 var(--f-ui); overflow-wrap: anywhere; }
.bag-row .num { font-size: 17px; }
.bag-acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bag-bal { display: flex; gap: 22px; flex-wrap: wrap; font-size: 18px; }
.bag-bal span { color: var(--ink-2); font: 600 12px/1 var(--f-ui); letter-spacing: .12em; display: block; }
.tip-box { position: fixed; z-index: 70; padding: 10px 14px 18px; max-width: 280px; pointer-events: none; font-size: 16px; }
.tip-box b { display: block; font: 600 16px/1.2 var(--f-ui); margin-bottom: 4px; }
.tip-box .num { font-size: 17px; }
.tip-box .more { right: 10px; bottom: 6px; }
.toasts { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 95; display: grid; gap: 8px; width: min(560px, calc(100vw - 24px)); }
.toast { background: var(--box); border: calc(var(--px) * 1.5) solid var(--box-line); padding: 10px 14px; font-size: 18px; }
.toast.error { border-color: var(--red); }

/* ---------- inner pages (stats, docs, 404) */
.page { min-height: 100svh; position: relative; }
.page-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.brand { font: 400 44px/1 var(--f-name); color: var(--box); text-decoration: none; text-shadow: var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink), 0 calc(var(--px) * 2) 0 var(--ink); }
.page-nav { display: flex; gap: 4px 18px; flex-wrap: wrap; padding: 4px calc(var(--px) * 4); }
.page-main { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 16px 16px calc(var(--t) * 1.5); display: grid; gap: 22px; }
.killer { font: 400 clamp(40px, 6vw, 72px)/.95 var(--f-name); margin: 0; }
.killer .num { font-size: .62em; font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.stat { padding: calc(var(--px) * 4) calc(var(--px) * 5); }
.stat dt { font: 600 12px/1 var(--f-ui); letter-spacing: .12em; color: var(--ink-2); }
.stat dd { margin: 8px 0 0; font-size: 34px; }
.feed { display: grid; gap: 0; }
.feed-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: var(--px) solid #E8ECF4; align-items: baseline; font-size: 17px; }
.feed-row .k { font: 600 13px/1 var(--f-ui); letter-spacing: .1em; color: var(--ink-2); }
.feed-row a { color: var(--box-line); }
.doc h2 { font: 400 40px/1 var(--f-name); margin: 0 0 10px; letter-spacing: .03em; }
.doc h3 { font: 600 20px/1.2 var(--f-ui); margin: 18px 0 6px; }
.doc p, .doc li { font-size: 18px; line-height: 1.5; }
.doc code, .doc .addr { font-family: var(--f-num); font-weight: 600; overflow-wrap: anywhere; word-break: break-all; }
.doc table { width: 100%; border-collapse: collapse; font-size: 17px; }
.doc td, .doc th { text-align: left; padding: 8px 6px; border-bottom: var(--px) solid #E8ECF4; vertical-align: top; }
.doc th { font: 600 12px/1 var(--f-ui); letter-spacing: .12em; color: var(--ink-2); }
.lost { min-height: 100svh; display: grid; place-items: center; padding: 16px; position: relative; }
.lost .box { max-width: 620px; position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; }
.lost h1 { font: 400 clamp(48px, 8vw, 88px)/.9 var(--f-name); margin: 0; }
.lost .bubble { --slot: var(--box); width: calc(var(--px) * 12); height: calc(var(--px) * 12); display: grid; place-items: center; font: 400 40px/1 var(--f-name); color: var(--red); }
@media (max-width: 719px) { .feed-row { grid-template-columns: 1fr; gap: 2px; } .brand { font-size: 36px; } }
.more-link { grid-column: 1 / -1; justify-self: start; background: var(--box); padding: 4px 14px 4px 8px; }
@media (max-width: 719px) { .patches { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.patch { min-width: 0; }
.patch .plate { max-width: 100%; min-width: 0; }
.patch .plate small { max-width: 100%; }
.frame, .frame .in, .frame figcaption { min-width: 0; }
.frame .in > img, .frame .in > .sprite { width: 100%; max-width: 100%; }
.frame .share { justify-self: start; max-width: 100%; }
.gbtn { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 400px) { .gbtn.big { padding: 0 calc(var(--px) * 4); font-size: 21px; } .tb-go { gap: 8px 14px; } }
.frame .share { align-self: end; height: auto; }
@media (max-width: 719px) { .s-hero > .startmenu:not(.floating) .sm-list { display: flex; flex-wrap: wrap; gap: 0 14px; } .s-hero > .startmenu:not(.floating) .sm-list .choice { width: auto; } }
.scene > .startmenu { z-index: 6; }
.hof-list > .invite { grid-column: 1 / -1; }

/* ---------- polish 20.10: throws stay inside their scene, shadow + dust, GBA cursor feel on every choice */
.throw-layer.in-scene { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.ball-shadow { position: absolute; left: 0; top: 0; width: calc(var(--px) * 22); height: calc(var(--px) * 6); background: rgba(24, 64, 32, .32); pointer-events: none;
  clip-path: polygon(0 33%, 9% 33%, 9% 0, 91% 0, 91% 33%, 100% 33%, 100% 67%, 91% 67%, 91% 100%, 9% 100%, 9% 67%, 0 67%); will-change: transform; }
.dust { position: absolute; left: 0; top: 0; width: calc(var(--px) * 2); height: calc(var(--px) * 2); background: var(--ball-cream); box-shadow: var(--px) var(--px) 0 var(--path-dk); pointer-events: none; }
/* the cursor triangle bobs one native pixel, two frames, like the GBA menu cursor */
@keyframes cur { 50% { transform: translateX(var(--px)); } }
.choice:hover .tri, .choice:focus-visible .tri, .gbtn:hover .tri, .gbtn:focus-visible .tri { animation: cur .5s steps(1) infinite; }
.choice { transition: color .1s steps(1); }
.choice:hover { color: #202020; }
.choice:active .tri { transform: translateX(var(--px)); animation: none; }
.yn-o .tri { transition: transform .12s steps(2), opacity .12s steps(2); }
.yn-o:hover:not([aria-checked=true]):not(:disabled) .tri { opacity: .3; transform: none; }
.yn-o:active:not(:disabled) { transform: translateY(var(--px)); }
.yn-o:disabled { opacity: .45; cursor: default; }
/* main button: hover lifts one pixel (shadow grows), press sinks two; the cream fill flashes once on press */
.gbtn { transition: transform .08s steps(1), box-shadow .08s steps(1), background-color .08s steps(1); }
.gbtn:hover:not(:disabled) { transform: translateY(calc(var(--px) * -1)); box-shadow: inset 0 0 0 var(--px) var(--box), inset 0 0 0 calc(var(--px) * 1.5) var(--box-lt), 0 calc(var(--px) * 2) 0 var(--box-line); }
.gbtn:active:not(:disabled), .gbtn.pressed { transform: translateY(var(--px)); background: var(--ball); }
/* PC box: arrows nudge outward, card slots lift a pixel, the naming grid gets the GBA highlight box */
.arrow { transition: transform .1s steps(1); }
.arrow.l:hover { transform: translateX(calc(var(--px) * -1)); } .arrow.r:hover { transform: translateX(var(--px)); }
.arrow:active { transform: translateY(var(--px)) !important; }
.slot { transition: transform .1s steps(1), border-color .1s steps(1); }
.slot:hover:not(.skel) { transform: translateY(calc(var(--px) * -1)); }
.slot:active:not(.skel) { transform: translateY(var(--px)); }
.naming button:hover, .naming button:focus-visible { background: none; box-shadow: inset 0 0 0 calc(var(--px) * .75) var(--box-line); }
.naming button:active { background: var(--ball-cream); transform: translateY(1px); }
.st-up, .st-dn { transition: transform .08s steps(1); }
.st-up:hover { transform: translateY(calc(var(--px) * -1)); } .st-dn:hover { transform: translateY(var(--px)); }
.pk-links a:hover { color: var(--ink); }
.dlg-x { transition: transform .08s steps(1); } .dlg-x:active { transform: translateY(var(--px)); }
/* hall of fame frames: the card sits on top, the caption under it, no stretched empty boxes */
.frame .in { align-content: start; grid-template-rows: auto 1fr auto; }
.frame .in > img, .pk-img { height: auto; }
@media (prefers-reduced-motion: reduce) { .choice:hover .tri, .gbtn:hover .tri, .choice:focus-visible .tri, .gbtn:focus-visible .tri { animation: none; } }
/* field: the ball patches sit centred on the route, not hugging the left edge */
.patches { display: flex; flex-wrap: wrap; justify-content: center; }
.patches > .patch { width: calc(var(--px) * 56); }
@media (max-width: 719px) { .patches > .patch { width: calc(50% - var(--px) * 2); } }
.patches > .invite { width: 100%; }
@media (max-width: 420px) { .pc-head { flex-wrap: wrap; row-gap: 0; } .pc-count { order: 3; flex-basis: 100%; text-align: center; min-width: 0; } }
.patch .grass { max-width: 100%; }