/* ---------- Black and White's menus, pixel for pixel ----------
 * The owner: "i want the whole game menu designed as similar and as 1:1 to
 * pokemon black and white", then "make sure to inspect ever pixel, i don't
 * want to feel like it's pokemon from wish". Black and White's own menus are
 * dark: charcoal buttons with a folder tab on white grid paper (the X menu), a
 * black grid with octagonal blue panels (the party), black title bars edged in
 * teal and two-tone label rows (the summary), white text boxes, and a black
 * bar along the bottom with a red ✕ and a blue U-turn.
 *
 * Everything is measured in game pixels: --fp for text and frames, --fs for
 * small print, both a whole number of the screen's own pixels (pixel.js). The
 * frames and icons are drawn a pixel at a time in tools/pixel-icons.mjs
 * (icons.css). The text is DotGothic16, a pixel font with Black and White's
 * thin strokes, sized only at whole multiples of its 16-pixel grid. Loaded
 * after app.css; every rule starts with :root.bw so it wins.
 */
@font-face { font-family: "DotGothic16"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dotgothic16-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DotGothic16"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/dotgothic16-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root.bw {
  --bwfont: "DotGothic16", "Tiny5", system-ui, sans-serif;
  /* the one text size, as on the DS, and the small print */
  --t: calc(var(--fp) * 16); --tl: calc(var(--fp) * 20);
  --ts: calc(var(--fs) * 16); --tsl: calc(var(--fs) * 20);
  /* white text's grey shadow (right, down, and the corner between), dark text's light one */
  --sd: var(--fp) 0 0 #3a3a44, 0 var(--fp) 0 #3a3a44, var(--fp) var(--fp) 0 #3a3a44;
  --sl: var(--fp) 0 0 #c8c8d2, 0 var(--fp) 0 #c8c8d2, var(--fp) var(--fp) 0 #c8c8d2;
  --sds: var(--fs) 0 0 #3a3a44, 0 var(--fs) 0 #3a3a44, var(--fs) var(--fs) 0 #3a3a44;
  --teal: #40d0b8; --cyan: #68d0f8; --blue: #2a88e0; --red: #e83838; --orange: #f89830;
  --paper: #ececf0; --paperline: #d4d4dc; --slate: #4a4a5c; --ink-dark: #404048;
  --g: calc(var(--fp) * 4);
}

/* ---- the window: Black and White's black grid, going navy at the bottom ---- */
:root.bw .worldwin.game, :root.bw #mini {
  --font: var(--bwfont); --title-font: var(--bwfont); --pixel: var(--bwfont);
  --ink: #f8f8f8; --muted: #c0c0cc; --faint: #9a9aa8; --line: #3a3a44;
  --panel: #26262c; --raise: #34343c; --card: #26262c; --card-ink: #f8f8f8; --card-line: #3a3a44;
  --accent: var(--blue); --accent-ink: #fff; --go: var(--red);
  font-family: var(--bwfont); font-size: var(--t); line-height: var(--tl); font-weight: 400; letter-spacing: 0;
  font-synthesis: none; -webkit-font-smoothing: none; color: #f8f8f8; text-shadow: var(--sd);
  background-color: #0a0a0e;
  background-image:
    linear-gradient(#26262e var(--fp), transparent var(--fp)),
    linear-gradient(90deg, #26262e var(--fp), transparent var(--fp)),
    linear-gradient(#0a0a0e 0%, #0a0a0e 45%, #0c1a2e 100%);
  background-size: calc(var(--fp) * 32) calc(var(--fp) * 32), calc(var(--fp) * 32) calc(var(--fp) * 32), 100% 100%;
  background-attachment: local;
}
:root.bw .worldwin.game *, :root.bw #mini *, :root.bw .card, :root.bw .card *, :root.bw .toast { font-family: var(--bwfont); font-weight: 400 !important; letter-spacing: 0; font-synthesis: none; }
:root.bw .worldwin.game :is(h1, h2, h3, h4, b, strong, .nm, .v, .k, .d, .sub, .small, .faint, small, .lv, .cnt, .meta, .tag, .num, .iv, .pp, button, select, input, span, div, label, summary) { font-size: inherit; line-height: inherit; }
/* The window's edge: the DS screen's dark bezel. */
:root.bw .worldwin.over, :root.bw .worldwin.game:not(.over) { border-radius: 0; box-shadow: 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) #5a5a64, 0 0 0 calc(var(--fp) * 3) #18181c, 0 0 0 calc(var(--fp) * 4) #000, 0 calc(var(--fp) * 8) calc(var(--fp) * 24) rgba(0,0,0,.5); }
:root.bw .worldwin.over { scrollbar-width: auto; scrollbar-color: auto; }
:root.bw .worldwin.game .advmain { padding: 0 calc(var(--fp) * 8) calc(var(--fp) * 6); gap: calc(var(--fp) * 6); }

/* Scrollbars: Black and White's list bar, a light block in a dark groove. */
:root.bw :is(.worldwin.game, #mini, .plist)::-webkit-scrollbar { width: calc(var(--fp) * 6); }
:root.bw :is(.worldwin.game, #mini, .plist)::-webkit-scrollbar-track { background: #18181c; box-shadow: inset var(--fp) 0 0 #000; }
:root.bw :is(.worldwin.game, #mini, .plist)::-webkit-scrollbar-thumb { background: #d8d8e0; box-shadow: inset 0 0 0 var(--fp) #000, inset calc(var(--fp) * 2) var(--fp) 0 #fff; }

/* ---- the title bar: black, edged in teal, its name in spaced capitals ---- */
:root.bw .worldwin.game .advmain > .hd:first-child {
  position: sticky; top: 0; z-index: 3; margin: 0 calc(var(--fp) * -8) 0; min-height: 0; border-radius: 0;
  padding: calc(var(--fp) * 5) calc(var(--fp) * 64) calc(var(--fp) * 5) calc(var(--fp) * 8);
  background: #08080a; box-shadow: inset 0 var(--fp) 0 #000, inset 0 calc(var(--fp) * 2) 0 var(--teal), inset 0 calc(var(--fp) * -1) 0 #000, inset 0 calc(var(--fp) * -2) 0 var(--teal);
  display: flex; align-items: baseline; gap: calc(var(--fp) * 8); flex-wrap: wrap;
}
:root.bw .worldwin.game:has(.winback:not([hidden])) .advmain > .hd:first-child { padding-left: calc(var(--fp) * 30); }
:root.bw .worldwin.game .advmain > .hd:first-child h1 { font-size: var(--t); line-height: var(--tl); text-transform: uppercase; letter-spacing: calc(var(--fp) * 2); color: #f8f8f8; text-shadow: var(--sd); padding: 0; background: none; box-shadow: none; }
:root.bw .worldwin.game .advmain > .hd:first-child .sub { color: var(--teal); text-shadow: var(--sd); font-size: var(--t); }
:root.bw .worldwin.game .advmain > .hd:first-child .sub::before { content: "«"; } :root.bw .worldwin.game .advmain > .hd:first-child .sub::after { content: "»"; }
:root.bw .worldwin.game .hd .sub { color: var(--teal); }

/* ✕ and back: Black and White's red ✕ and blue U-turn, in the title bar. */
:root.bw .worldwin.game .winbar { position: sticky; top: 0; height: 0; z-index: 4; }
:root.bw .worldwin.game .winbar button { position: absolute; top: calc(var(--fp) * 2); width: calc(var(--fp) * 22); height: calc(var(--fp) * 22); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: center / calc(var(--fp) * 16) calc(var(--fp) * 16) no-repeat; font-size: 0 !important; color: transparent; text-shadow: none; }
:root.bw .worldwin.game .winbar .winx { right: calc(var(--fp) * 4); background-image: var(--icon-x); }
:root.bw .worldwin.game .winbar .winback { left: calc(var(--fp) * 4); background-image: var(--icon-back); }
:root.bw .worldwin.game .winbar .winback::after { content: none; }
:root.bw .worldwin.game .winbar button:hover { background-color: #2a2a32; }
:root.bw .worldwin.game .winbar button:focus-visible { outline: calc(var(--fp) * 2) solid var(--orange); outline-offset: 0; }

/* ---- the bottom bar: what A and B do, as the DS's bar ---- */
:root.bw .dsfoot { position: sticky; bottom: calc(var(--fp) * -6); z-index: 3; margin: auto calc(var(--fp) * -8) calc(var(--fp) * -6); padding: calc(var(--fp) * 4) calc(var(--fp) * 8); gap: calc(var(--fp) * 12); border: 0;
  background: linear-gradient(#3c3c44 0, #3c3c44 var(--fp), #26262c var(--fp), #08080a 100%); box-shadow: inset 0 var(--fp) 0 #000; color: #f8f8f8; font-size: var(--t); }
:root.bw .dsfoot span { gap: calc(var(--fp) * 4); }
:root.bw .dsfoot i { width: calc(var(--fp) * 12); height: calc(var(--fp) * 12); border-radius: 0; font-style: normal; font-size: var(--ts); line-height: calc(var(--fp) * 12); box-shadow: none; text-shadow: none;
  clip-path: polygon(0 calc(var(--fp) * 3), var(--fp) calc(var(--fp) * 3), var(--fp) var(--fp), calc(var(--fp) * 3) var(--fp), calc(var(--fp) * 3) 0, calc(100% - var(--fp) * 3) 0, calc(100% - var(--fp) * 3) var(--fp), calc(100% - var(--fp)) var(--fp), calc(100% - var(--fp)) calc(var(--fp) * 3), 100% calc(var(--fp) * 3), 100% calc(100% - var(--fp) * 3), calc(100% - var(--fp)) calc(100% - var(--fp) * 3), calc(100% - var(--fp)) calc(100% - var(--fp)), calc(100% - var(--fp) * 3) calc(100% - var(--fp)), calc(100% - var(--fp) * 3) 100%, calc(var(--fp) * 3) 100%, calc(var(--fp) * 3) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp)), var(--fp) calc(100% - var(--fp) * 3), 0 calc(100% - var(--fp) * 3)); }
:root.bw .dsfoot .ba { background: #d83838; } :root.bw .dsfoot .bb { background: #5868a8; }
:root.bw .dsfoot small { color: var(--faint); font-size: var(--t); }

/* ---- boxes: dark panels with a bevel, a label band like the summary's ---- */
:root.bw .worldwin.game :is(.box, .lookprev), :root.bw #mini .box { border-radius: 0; box-shadow: none; background: none; border-style: solid; border-image: var(--pxf-box); padding: calc(var(--fp) * 4); border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game .box > h3, :root.bw .worldwin.game h3 { font-size: var(--t); line-height: var(--tl); margin: calc(var(--fp) * -4) calc(var(--fp) * -4) calc(var(--fp) * 4); padding: calc(var(--fp) * 2) calc(var(--fp) * 6); border: 0; background: var(--slate); box-shadow: inset 0 calc(var(--fp) * -1) 0 #24242e, inset 0 var(--fp) 0 #6a6a80; color: #f8f8f8; display: flex; justify-content: flex-start; align-items: baseline; gap: calc(var(--fp) * 6); flex-wrap: wrap; }
:root.bw .worldwin.game h3::before { content: ""; width: calc(var(--fp) * 3); height: calc(var(--fp) * 3); background: #f8f8f8; box-shadow: var(--fp) var(--fp) 0 #24242e; align-self: center; margin-right: calc(var(--fp) * -2); }
:root.bw .worldwin.game h3 .sub { color: #c8d8f0; margin-left: auto; font-size: var(--ts); line-height: var(--tsl); text-shadow: var(--sds); }
:root.bw .worldwin.game h4 { font-size: var(--t); color: var(--teal); margin: calc(var(--fp) * 6) 0 calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.small, .faint.small, small) { font-size: var(--ts) !important; line-height: var(--tsl) !important; text-shadow: var(--sds); }
:root.bw .worldwin.game .faint { color: var(--faint); }

/* ---- buttons: Black and White's charcoal buttons; blue for the main one ---- */
:root.bw .worldwin.game :is(.pill, .btn, .ctl button, .qty button, .keycap, .bigbtn, .starter, .way, .lookbase, .lookprev .spin button, select),
:root.bw #mini :is(.pill, .games button, .seg button, .btn, .bigbtn, .slotgo), :root.bw .card .btn, :root.bw .growbtn {
  border-style: solid; border-image: var(--pxf-btn); border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: #f8f8f8 !important; text-shadow: var(--sd); font-size: var(--t) !important; line-height: var(--tl); min-height: calc(var(--fp) * 22); padding: calc(var(--fp) * 1) calc(var(--fp) * 6) !important;
  transform: none !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.pill, .btn, .ctl button, .qty button, .keycap, .bigbtn, .starter, .way, .lookbase, select):is(:hover, :focus-visible):not(:disabled),
:root.bw #mini :is(.pill, .games button, .seg button, .btn):is(:hover, :focus-visible):not(:disabled), :root.bw .card .btn:is(:hover, :focus-visible), :root.bw .growbtn:is(:hover, :focus-visible) { border-image: var(--pxf-btn-hi); border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.pill, .ctl button, .btn).main, :root.bw .card .btn.main, :root.bw .growbtn.main, :root.bw #mini .pill.main,
:root.bw .worldwin.game :is(.seg, .tabs) button[aria-pressed="true"], :root.bw #mini :is(.games button, .seg button)[aria-pressed="true"],
:root.bw .worldwin.game .lookbase[aria-pressed="true"], :root.bw .worldwin.game .pockets button[aria-pressed="true"] { border-image: var(--pxf-btn-main) !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.pill, .ctl button, .btn).main:is(:hover, :focus-visible):not(:disabled), :root.bw .card .btn.main:is(:hover, :focus-visible) { border-image: var(--pxf-btn-main-hi) !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.pill, .ctl button).red, :root.bw .worldwin.game .pill.redsolid { border-image: var(--pxf-btn-red) !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game :is(.pill, .ctl button, .btn, .keycap, select):disabled, :root.bw #mini .pill:disabled, :root.bw .card .btn:disabled { border-image: var(--pxf-btn-off) !important; color: #8a8a94 !important; opacity: 1; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game .pill.on { border-image: var(--pxf-btn-hi); color: var(--orange) !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--fp) * 16) !important;
  background: linear-gradient(135deg, transparent 50%, #f8f8f8 50%) right calc(var(--fp) * 7) center / calc(var(--fp) * 4) calc(var(--fp) * 4) no-repeat !important; }
:root.bw .worldwin.game select option { background: #26262c; color: #f8f8f8; font-family: var(--bwfont); }
:root.bw .worldwin.game input:not([type="range"]) { border-style: solid !important; border-image: var(--pxf-text) !important; border-radius: 0 !important; background: none !important; color: var(--ink-dark) !important; text-shadow: var(--sl); font-size: var(--t) !important; min-height: calc(var(--fp) * 22); padding: 0 calc(var(--fp) * 4) !important; border-width: calc(var(--fp) * 3); }
:root.bw .worldwin.game input::placeholder { color: #9a9aa4; text-shadow: none; }
/* The cursor: an orange frame, blinking like the games'. Square, a game pixel thick. */
:root.bw .worldwin.game :is(button, select, input, summary, [tabindex]):focus-visible, :root.bw #mini :is(button, input):focus-visible, :root.bw .card :is(button):focus-visible {
  outline: calc(var(--fp) * 2) solid var(--orange) !important; outline-offset: var(--fp) !important; animation: bwcursor 1s steps(1) infinite; }
@keyframes bwcursor { 50% { outline-color: #f8d070; } }

/* Switches (on/off, filters): a row of buttons, the picked one blue. */
:root.bw .worldwin.game :is(.seg, .tabs), :root.bw #mini .seg { display: inline-flex; flex-wrap: wrap; gap: calc(var(--fp) * 2); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root.bw .worldwin.game :is(.seg, .tabs) button { border-style: solid; border-image: var(--pxf-btn); border-radius: 0; background: none; box-shadow: none; color: #f8f8f8; text-shadow: var(--sd); min-height: calc(var(--fp) * 22); padding: var(--fp) calc(var(--fp) * 6); border-width: calc(var(--fp) * 2); }

/* ---- type badges: Black and White's labels, a colour box with capitals ---- */
:root.bw .worldwin.game .type, :root.bw .card .type, :root.bw #mini .type { border-radius: 0 !important; padding: 0 calc(var(--fs) * 4) !important; font-size: var(--ts) !important; line-height: calc(var(--fs) * 16) !important; text-transform: uppercase; letter-spacing: var(--fs);
  color: #fff !important; text-shadow: var(--sds); box-shadow: inset 0 0 0 var(--fs) rgba(0,0,0,.45), inset var(--fs) var(--fs) 0 var(--fs) rgba(255,255,255,.3); vertical-align: middle; }
/* Grades: a square badge. */
:root.bw .worldwin.game .grade, :root.bw .card .grade { border-radius: 0 !important; font-size: var(--ts) !important; line-height: calc(var(--fs) * 14) !important; min-width: calc(var(--fs) * 14); height: calc(var(--fs) * 14); padding: 0 calc(var(--fs) * 2) !important; text-align: center; text-shadow: none; box-shadow: inset 0 0 0 var(--fs) rgba(0,0,0,.5); }
:root.bw .worldwin.game .tag { border-radius: 0; border: 0; background: #34343c; box-shadow: inset 0 0 0 var(--fs) #000; color: #d8d8e0; padding: 0 calc(var(--fs) * 4); font-size: var(--ts) !important; line-height: calc(var(--fs) * 16) !important; text-shadow: var(--sds); }
:root.bw .worldwin.game .tag.lead { background: var(--blue); color: #fff; }

/* ---- lists of things (bag, shop, market, people, moves to teach): BW's list rows ---- */
:root.bw .worldwin.game :is(.item, .inbox, .board5 > div:not(.faint):not(.empty), .prow, .outfit, .wantmove, .confirm, .fusionline) {
  border-style: solid; border-image: var(--pxf-row); border-radius: 0; background: none; box-shadow: none; padding: var(--fp) calc(var(--fp) * 4); color: #f8f8f8; border-width: calc(var(--fp) * 4); }
:root.bw .worldwin.game :is(.item, .inbox, .board5 > div, .prow):is(:hover, :focus-within):not(.gone) { border-image: var(--pxf-row-on); border-width: calc(var(--fp) * 4); }
:root.bw .worldwin.game .board5 > div.me { border-image: var(--pxf-party); border-width: calc(var(--fp) * 6); }
:root.bw .worldwin.game .item .ic { width: calc(var(--fs) * 32); height: calc(var(--fs) * 32); border-radius: 0; display: grid; place-items: center; }
:root.bw .worldwin.game .item .ic img { --box: 32; image-rendering: pixelated; width: calc(var(--fs) * 24); height: calc(var(--fs) * 24); }
:root.bw .worldwin.game .item .ic img.px { --box: 48; }
:root.bw .worldwin.game .item .cnt { color: var(--teal); margin-left: calc(var(--fp) * 4); }
:root.bw .worldwin.game .item .d { color: #c8c8d4; font-size: var(--ts); line-height: var(--tsl); text-shadow: var(--sds); }
:root.bw .worldwin.game :is(.items, .bagitems, .board5) { gap: calc(var(--fp) * 2); }
:root.bw .worldwin.game .av { border-radius: 0 !important; width: calc(var(--fp) * 14) !important; height: calc(var(--fp) * 14) !important; background: #5868a8 !important; color: #fff !important; border: 0 !important; box-shadow: inset 0 0 0 var(--fp) #000; font-size: var(--ts); text-shadow: var(--sds); }
:root.bw .worldwin.game .empty { border: 0; border-radius: 0; border-style: solid; border-image: var(--pxf-btn-off); background: none; color: #a0a0aa; border-width: calc(var(--fp) * 2); }

/* The game talking, and the description under the bag: Black and White's white text box. */
:root.bw .dstext, :root.bw .toast, :root.bw .worldtext {
  border-style: solid; border-image: var(--pxf-text); border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--ink-dark) !important; text-shadow: var(--sl); font: 400 var(--t) / var(--tl) var(--bwfont) !important; padding: calc(var(--fp) * 3) calc(var(--fp) * 6) !important; min-height: 0; border-width: calc(var(--fp) * 3); }
:root.bw .worldtext { border-image: var(--pxf-text); min-height: calc(var(--fp) * 54); padding: calc(var(--fp) * 6) calc(var(--fp) * 10) !important; border-width: calc(var(--fp) * 3); }
:root.bw .worldtext .txt { text-shadow: var(--sl); }
:root.bw .toast { box-shadow: 0 calc(var(--fp) * 4) calc(var(--fp) * 12) rgba(0,0,0,.45) !important; }

/* Yes / no over the world: the same box, a black arrow on the picked one. */
:root.bw .worldmenu { border-style: solid; border-image: var(--pxf-text); border-radius: 0; background: none !important; box-shadow: none !important; padding: calc(var(--fp) * 4) calc(var(--fp) * 10) calc(var(--fp) * 4) calc(var(--fp) * 16) !important; border-width: calc(var(--fp) * 3); }
:root.bw .worldmenu button { font: 400 var(--t) / var(--tl) var(--bwfont) !important; color: var(--ink-dark) !important; text-shadow: var(--sl); padding: var(--fp) 0 !important; min-height: 0; }
:root.bw .worldmenu button.on::before { content: ""; left: calc(var(--fp) * -10); width: calc(var(--fp) * 5); height: calc(var(--fp) * 8); background: var(--ink-dark); clip-path: polygon(0 0, 100% 50%, 0 100%); font-size: 0; }
:root.bw .worldmenu button.off { color: #a0a0a8 !important; }

/* ---- the X menu: Black and White's tabbed buttons, two across, on grid paper ---- */
:root.bw .worldstart {
  padding: calc(var(--fp) * 6) !important; gap: calc(var(--fp) * 4) calc(var(--fp) * 4); border-radius: 0; min-width: min(calc(var(--fp) * 260), calc(100% - 16px));
  background-color: #f4f4f6 !important;
  background-image: linear-gradient(#d8d8e0 var(--fp), transparent var(--fp)), linear-gradient(90deg, #d8d8e0 var(--fp), transparent var(--fp)) !important;
  background-size: calc(var(--fp) * 8) calc(var(--fp) * 8) !important; background-position: calc(var(--fp) * 3) calc(var(--fp) * 3) !important;
  box-shadow: 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) #5a5a64, 0 0 0 calc(var(--fp) * 3) #000, 0 calc(var(--fp) * 4) calc(var(--fp) * 16) rgba(0,0,0,.45) !important;
}
:root.bw .worldstart button {
  position: relative; overflow: visible;
  border-style: solid; border-image: var(--pxf-start); border-radius: 0; background: none !important; box-shadow: none !important;
  padding: calc(var(--fp) * 2) calc(var(--fp) * 4) calc(var(--fp) * 2) calc(var(--fp) * 4) !important; margin-top: calc(var(--fp) * var(--cap-r)); gap: calc(var(--fp) * 6); min-height: calc(var(--fp) * 28);
  font: 400 var(--t) / var(--tl) var(--bwfont) !important; text-transform: uppercase; letter-spacing: var(--fp); color: #f8f8f8 !important; text-shadow: var(--sd); border-width: calc(var(--fp) * 2); }
/* The folder tab, drawn on top of the button's top-left corner. */
:root.bw .worldstart button::after { content: ""; position: absolute; pointer-events: none; left: calc(var(--fp) * -2); top: calc(var(--fp) * (-2 - var(--cap-r))); width: calc(var(--fp) * var(--cap-w)); height: calc(var(--fp) * var(--cap-h)); background: var(--img-startcap) 0 0 / 100% 100% no-repeat; }
:root.bw .worldstart button.on { border-image: var(--pxf-start-on); border-width: calc(var(--fp) * 2); }
:root.bw .worldstart button.on::after { background-image: var(--img-startcap-on); }
:root.bw .worldstart button:hover { color: #fff !important; }
:root.bw .worldstart .sic { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; position: relative; z-index: 1; margin-top: calc(var(--fp) * -4); }
:root.bw .worldstart .sic i.pxi { background-color: transparent; clip-path: none; border-radius: 0; box-shadow: none; width: calc(var(--fp) * 16) !important; height: calc(var(--fp) * 16) !important; }
:root.bw .worldstart .sl { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }

/* ---- Black and White's party: octagonal blue panels, two across ---- */
:root.bw .pgrid { gap: calc(var(--fp) * 3); }
:root.bw .ppanel, :root.bw .ppanel.lead {
  border-style: solid; border-image: var(--pxf-party); border-radius: 0; background: none; box-shadow: none; padding: 0 calc(var(--fp) * 2) 0 0; min-height: calc(var(--fp) * 40);
  grid-template-columns: calc(var(--fs) * 72) minmax(0, 1fr) auto; gap: calc(var(--fp) * 3); color: #f8f8f8; border-width: calc(var(--fp) * 6); }
:root.bw .ppanel:is(:hover, :focus-visible, .lead:hover) { border-image: var(--pxf-party-on); filter: none; outline: 0 !important; animation: none; border-width: calc(var(--fp) * 6); }
:root.bw .ppanel:focus-visible { border-image: var(--pxf-party-on); border-width: calc(var(--fp) * 6); }
:root.bw .ppanel img.px { --box: 72; width: calc(var(--fs) * 72); height: calc(var(--fs) * 72); object-fit: none; filter: none; justify-self: center; }
:root.bw .ppanel .nm { font-size: var(--t); text-shadow: var(--sd); }
:root.bw .ppanel .plead { color: #f8e070; }
:root.bw .ppanel .meta { gap: calc(var(--fs) * 4); margin-top: var(--fp); }
:root.bw .ppanel .plv { color: #f8f8f8; font-size: var(--t); text-shadow: var(--sd); margin-right: calc(var(--fp) * 2); }
:root.bw .ppanel .plv::first-letter { text-transform: uppercase; }
:root.bw .php { gap: calc(var(--fp) * 2); margin-top: calc(var(--fp) * 2); max-width: calc(var(--fp) * 100); }
:root.bw .php b { font-size: var(--ts) !important; line-height: calc(var(--fs) * 10) !important; padding: 0 var(--fs); border-radius: 0; background: #183020; color: #58f058; text-shadow: none; box-shadow: inset 0 0 0 var(--fs) #000; }
:root.bw .php i { height: calc(var(--fp) * 4); border-radius: 0; background: linear-gradient(#a0f8a0 0, #a0f8a0 var(--fp), #48d048 var(--fp)); box-shadow: 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) #505058; }
:root.bw .ppanel .grade { top: calc(var(--fp) * 3); right: calc(var(--fp) * 3); }
:root.bw .ppanel .ctl { gap: calc(var(--fp) * 2); margin-top: calc(var(--fp) * 10); }
:root.bw .worldwin.game .ppanel .ctl button { width: calc(var(--fp) * 18); height: calc(var(--fp) * 16); min-height: 0; padding: 0 !important; font-size: var(--ts) !important; }
:root.bw .ppanel.empty { border-image: var(--pxf-btn-off); color: #a0a0aa; border-width: calc(var(--fp) * 2); }

/* ---- the PC and party strips: little panels ---- */
:root.bw .worldwin.game .slot { border-style: solid; border-image: var(--pxf-party); border-radius: 0; background: none !important; box-shadow: none !important; padding: var(--fp) !important; color: #f8f8f8 !important; border-width: calc(var(--fp) * 6); }
:root.bw .worldwin.game .slot:is(:hover, :focus-visible, [aria-pressed="true"]) { border-image: var(--pxf-party-on); border-width: calc(var(--fp) * 6); }
:root.bw .worldwin.game .slot img.px { --box: 64; }
:root.bw .worldwin.game .slot b { font-size: var(--ts) !important; line-height: var(--tsl); text-shadow: var(--sds); }
:root.bw .worldwin.game .slot .lv { font-size: var(--ts) !important; color: #c8e8f8; text-shadow: var(--sds); }
:root.bw .worldwin.game .slot .star { color: #f8e070; }
:root.bw .worldwin.game .slot.empty { border-image: var(--pxf-btn-off); color: #a0a0aa !important; border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game .slot .grade { position: absolute; }
:root.bw .worldwin.game .slot .inparty { border-radius: 0; background: var(--teal); box-shadow: 0 0 0 var(--fs) #000; }

/* ---- the summary: two-tone rows, a label band and a light value ---- */
:root.bw .worldwin.game .monhead { gap: calc(var(--fp) * 6); }
:root.bw .worldwin.game .pedestal { border-radius: 0; border-style: solid; border-image: var(--pxf-box); box-shadow: none; padding: 0;
  background: #1a1a20 linear-gradient(160deg, rgba(255,255,255,.05) 0 40%, transparent 40% 60%, rgba(255,255,255,.04) 60%); border-width: calc(var(--fp) * 2); }
:root.bw .worldwin.game .pedestal img.px { --box: 224; max-width: none; max-height: none; zoom: 1; }
:root.bw .worldwin.game .monname { font-size: var(--t) !important; line-height: var(--tl); text-shadow: var(--sd); }
:root.bw .worldwin.game .kv { gap: calc(var(--fp) * 2); grid-template-columns: minmax(0, 1fr) !important; }
:root.bw .worldwin.game .kv > div, :root.bw .worldwin.game .field { border-radius: 0; border: 0; padding: 0; display: grid; grid-template-columns: calc(var(--fp) * 92) minmax(0, 1fr); align-items: stretch;
  background: var(--paper); box-shadow: inset 0 0 0 var(--fp) #000; overflow: hidden; }
:root.bw .worldwin.game .kv .k, :root.bw .worldwin.game .field .k { background: var(--slate); color: #f8f8f8; text-shadow: var(--sd); padding: var(--fp) calc(var(--fp) * 4); box-shadow: inset calc(var(--fp) * -1) 0 0 #000, inset 0 var(--fp) 0 #6a6a80; font-size: var(--t) !important; display: flex; align-items: center; gap: calc(var(--fp) * 3); white-space: nowrap; }
:root.bw .worldwin.game .kv .k::before, :root.bw .worldwin.game .field .k::before { content: ""; width: calc(var(--fp) * 2); height: calc(var(--fp) * 2); background: #f8f8f8; flex: none; }
:root.bw .worldwin.game .kv .v, :root.bw .worldwin.game .field > :not(.k) { color: var(--ink-dark); text-shadow: var(--sl); padding: var(--fp) calc(var(--fp) * 4); background: var(--paper);
  background-image: linear-gradient(var(--paperline) var(--fp), transparent var(--fp)), linear-gradient(90deg, var(--paperline) var(--fp), transparent var(--fp)); background-size: calc(var(--fp) * 8) calc(var(--fp) * 8); }
:root.bw .worldwin.game .kv .v .faint, :root.bw .worldwin.game .kv .v .small { color: #6a6a78 !important; text-shadow: none; }
:root.bw .worldwin.game .bar { height: calc(var(--fp) * 4); border-radius: 0 !important; background: #18181c !important; box-shadow: 0 0 0 var(--fp) #000; overflow: hidden; }
:root.bw .worldwin.game .bar i { border-radius: 0 !important; background: linear-gradient(#80c8ff 0, #80c8ff var(--fp), #2a78e0 var(--fp)) !important; }
:root.bw .worldwin.game .bar.xp i { background: linear-gradient(#a0b8ff 0, #a0b8ff var(--fp), #2848d8 var(--fp)) !important; }
:root.bw .worldwin.game .bars { font-size: var(--t) !important; color: var(--teal) !important; }
:root.bw .worldwin.game .stats { gap: calc(var(--fp) * 2) calc(var(--fp) * 6); }
:root.bw .worldwin.game .stats .n { color: #f8f8f8; } :root.bw .worldwin.game .stats .up { color: #f87878; } :root.bw .worldwin.game .stats .dn { color: #78a8f8; }
:root.bw .worldwin.game .stats .num { color: #f8f8f8; } :root.bw .worldwin.game .stats .iv { color: var(--teal); font-size: var(--ts); }
/* Moves: Black and White's teal-edged move panels. */
:root.bw .worldwin.game .mv { border-style: solid; border-image: var(--pxf-move); border-radius: 0; background: none !important; box-shadow: none !important; padding: var(--fp) calc(var(--fp) * 6); color: #f8f8f8; border-width: calc(var(--fp) * 4); }
:root.bw .worldwin.game .mv .pp { color: #f8f8f8; }
:root.bw .worldwin.game .mv .d { color: #b8d8d0; font-size: var(--ts); line-height: var(--tsl); text-shadow: var(--sds); }
:root.bw .worldwin.game .mv .d.note { color: #88c8ff; }
:root.bw .worldwin.game .btnrow { gap: calc(var(--fp) * 3); }

/* ---- the trainer card: grid paper, two-tone rows, you in the corner ---- */
:root.bw .tcard { border-radius: 0; border-style: solid; border-image: var(--pxf-paper); box-shadow: none; background: none; padding: calc(var(--fp) * 4); gap: calc(var(--fp) * 4);
  background-image: linear-gradient(var(--paperline) var(--fp), transparent var(--fp)), linear-gradient(90deg, var(--paperline) var(--fp), transparent var(--fp)); background-size: calc(var(--fp) * 8) calc(var(--fp) * 8); background-origin: padding-box; border-width: calc(var(--fp) * 2); }
:root.bw .tcrows { gap: calc(var(--fp) * 2); }
:root.bw .tcrow { border: 0 !important; padding: var(--fp); gap: 0; display: grid; grid-template-columns: calc(var(--fp) * 64) minmax(0, 1fr); align-items: stretch; background: #000; }
:root.bw .tcrow .k { display: flex; align-items: center; background: var(--slate); color: #f8f8f8 !important; text-shadow: var(--sd); padding: var(--fp) calc(var(--fp) * 4); font-size: var(--t) !important; }
:root.bw .tcrow .v { display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--fp) * 2); color: var(--ink-dark); text-shadow: var(--sl); padding: var(--fp) calc(var(--fp) * 4); background: #f8f8fa; }
:root.bw .tcrow .v small { color: #6a6a78; text-shadow: none; }
:root.bw .tcme { border-radius: 0; background: #1a1a20; box-shadow: inset 0 0 0 var(--fp) #000, inset 0 0 0 calc(var(--fp) * 2) #5a5a64; padding: calc(var(--fp) * 4); }
:root.bw .tcme canvas { width: calc(var(--fs) * 96 * 1.5); height: calc(var(--fs) * 96 * 1.5); }
:root.bw .tcbadges { border-radius: 0; background: #1a1a20; box-shadow: inset 0 0 0 var(--fp) #000; padding: calc(var(--fp) * 3); gap: calc(var(--fp) * 2); }
:root.bw .tcbadges .gymbadge, :root.bw .worldwin.game .gymbadge { border-radius: 0; font-size: var(--ts) !important; text-shadow: var(--sds); }

/* ---- the bag: pockets along the top, the list, the description box ---- */
:root.bw .worldwin.game .pockets { gap: calc(var(--fp) * 3); }
:root.bw .worldwin.game .pockets button { flex-direction: row; min-width: 0; font-size: var(--t) !important; padding: var(--fp) calc(var(--fp) * 6) !important; }
:root.bw .worldwin.game .pockets img { --box: 30; image-rendering: pixelated; width: calc(var(--fs) * 24); height: calc(var(--fs) * 24); }
:root.bw .worldwin.game .pockets .tmdisc { border-radius: 0; width: calc(var(--fs) * 16); height: calc(var(--fs) * 16); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

/* ---- the Game Corner: the same window ---- */
:root.bw #mini { border-radius: 0; box-shadow: 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) #5a5a64, 0 0 0 calc(var(--fp) * 3) #18181c, 0 0 0 calc(var(--fp) * 4) #000; }
:root.bw #mini .minibar { border-radius: 0; background: #08080a; box-shadow: inset 0 calc(var(--fp) * 2) 0 var(--teal), inset 0 calc(var(--fp) * -2) 0 var(--teal); min-height: 0; padding: calc(var(--fp) * 4) calc(var(--fp) * 8); }
:root.bw #mini .minibar b { font-size: var(--t); text-transform: uppercase; letter-spacing: calc(var(--fp) * 2); text-shadow: var(--sd); }
:root.bw #mini .game .top h1 { font-size: var(--t); border-left: 0; padding: calc(var(--fp) * 2) calc(var(--fp) * 6); background: var(--slate); box-shadow: inset 0 var(--fp) 0 #6a6a80; text-shadow: var(--sd); }
:root.bw #mini .games button { display: inline-flex; }

/* ---- pop-ups (a new Pokémon, a fusion, a question): a dark panel with the title bar ---- */
:root.bw .card { border-radius: 0 !important; border-style: solid; border-image: var(--pxf-box); background: #1a1a20 !important; color: #f8f8f8 !important; text-shadow: var(--sd);
  box-shadow: 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) #5a5a64, 0 0 0 calc(var(--fp) * 3) #000, 0 calc(var(--fp) * 8) calc(var(--fp) * 24) rgba(0,0,0,.5) !important;
  font: 400 var(--t) / var(--tl) var(--bwfont) !important; padding: calc(var(--fp) * 6) !important; border-width: calc(var(--fp) * 2); }
:root.bw .card h2 { font-size: var(--t) !important; line-height: var(--tl) !important; text-transform: uppercase; letter-spacing: var(--fp); color: #f8f8f8 !important; margin: calc(var(--fp) * -6) calc(var(--fp) * -6) calc(var(--fp) * 4) !important; padding: calc(var(--fp) * 4) calc(var(--fp) * 8);
  background: #08080a; box-shadow: inset 0 calc(var(--fp) * 2) 0 var(--teal), inset 0 calc(var(--fp) * -2) 0 var(--teal); text-shadow: var(--sd) !important; }
:root.bw .card p, :root.bw .card .next { color: #d0d0d8 !important; font-size: var(--t); line-height: var(--tl); }
:root.bw .card img.big { --box: 192; }
:root.bw .card .acts { gap: calc(var(--fp) * 4); }
:root.bw .nocompat .pair img { --box: 96; }
:root.bw .nocompat .pair b { color: var(--teal); font-size: var(--t); }
:root.bw .fusioncard .fstats span { border-radius: 0; background: var(--paper); color: var(--ink-dark); text-shadow: var(--sl); box-shadow: inset 0 0 0 var(--fp) #000; }
:root.bw .fusioncard .fstats i { color: #6a6a78; text-shadow: none; }
:root.bw .pickcard .prow { color: #f8f8f8 !important; }
:root.bw .pickcard .prow img.px { --box: 48; }
:root.bw .pickcard .prow .nm, :root.bw .pickcard .prow .lv, :root.bw .pickcard .prow .meta { color: #f8f8f8 !important; font-size: var(--t); }
:root.bw .veil { background: rgba(0,0,0,.6); }

:root.bw .worldwin.game .ppanel:focus-visible { outline: 0 !important; animation: none; }

/* ---- second pass ---- */
/* Long subtitles in the title bar: the small print, so the bar stays one line. */
:root.bw .worldwin.game .advmain > .hd:first-child .sub { font-size: var(--ts); line-height: var(--tsl); text-shadow: var(--sds); }
/* Outfits and trainer choices: their names in the small print, so a name fits its tile. */
:root.bw .worldwin.game :is(.lookbase, .outfit) { font-size: var(--ts) !important; line-height: var(--tsl) !important; text-shadow: var(--sds); }
:root.bw .worldwin.game .outfit b { font-size: var(--ts) !important; }
:root.bw .worldwin.game .outfit .pill { font-size: var(--ts) !important; min-height: calc(var(--fp) * 16); }
:root.bw .worldwin.game .lookprev canvas { border-radius: 0; box-shadow: inset 0 0 0 var(--fp) #000; }
:root.bw .worldwin.game .swatch { border-radius: 0; border: 0; box-shadow: inset 0 0 0 var(--fp) #000, inset 0 0 0 calc(var(--fp) * 2) rgba(255,255,255,.35); width: calc(var(--fp) * 16); height: calc(var(--fp) * 16); }
:root.bw .worldwin.game .swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--fp) #000, 0 0 0 var(--fp) #000, 0 0 0 calc(var(--fp) * 2) var(--orange); }
/* The Pokédex's regions: the count on one line. */
:root.bw .worldwin.game .regions span, :root.bw .worldwin.game .regions b { white-space: nowrap; }
/* Stats: the name on one line, the nature arrow beside it. */
:root.bw .worldwin.game .stats .n { white-space: nowrap; }
/* Pop-ups: a title bar only when the title comes first; otherwise the name, in capitals. */
:root.bw .card > h2:not(:first-child) { margin: calc(var(--fp) * 2) 0 !important; padding: 0; background: none; box-shadow: none; }
:root.bw .fusioncard .fstats span { font-size: var(--ts); line-height: var(--tsl); padding: var(--fp) calc(var(--fp) * 3); }
/* The Game Corner's cards: list-row panels. */
:root.bw #mini :is(.card4, .who, .tile .front, .opt, .pay, .chip.ghost) { border-radius: 0 !important; }
:root.bw #mini .card4 { border-style: solid; border-image: var(--pxf-row); border-width: calc(var(--fp) * 4); background: none; box-shadow: none; }
:root.bw #mini .card4[aria-pressed="true"] { border-image: var(--pxf-party-on); border-width: calc(var(--fp) * 4); background: none; transform: none; }
:root.bw #mini .card4 span { font-size: var(--ts); line-height: var(--tsl); text-shadow: var(--sds); }
:root.bw #mini .chip { border-radius: 0; }
:root.bw #mini .games button img { image-rendering: pixelated; }
:root.bw #mini .minibar .pill { order: 1; }
/* Over the world: the place sign and the menu button, as Black and White's black plaques. */
:root.bw .worldplace { font: 400 var(--t) / var(--tl) var(--bwfont) !important; border-radius: 0; background: #08080a; color: #f8f8f8; text-shadow: var(--sd);
  box-shadow: inset 0 calc(var(--fp) * 2) 0 var(--teal), inset 0 calc(var(--fp) * -2) 0 var(--teal), 0 0 0 var(--fp) #000; padding: calc(var(--fp) * 4) calc(var(--fp) * 10) !important; }
:root.bw .worldmenubtn { font: 400 var(--t) / var(--tl) var(--bwfont) !important; border-style: solid; border-image: var(--pxf-btn); border-width: calc(var(--fp) * 2); border-radius: 0; background: none; box-shadow: none; color: #f8f8f8; text-shadow: var(--sd); padding: 0 calc(var(--fp) * 6) !important; text-transform: uppercase; }
:root.bw .worldmenubtn:hover { border-image: var(--pxf-btn-hi); }
:root.bw .worldupdate, :root.bw .worldraid { font: 400 var(--ts) / var(--tsl) var(--bwfont) !important; border-radius: 0; text-shadow: var(--sds); }
:root.bw .worldupdate b, :root.bw .worldraid b { font-size: var(--t); line-height: var(--tl); font-weight: 400; }
:root.bw .worldwin.game .regions { grid-template-columns: max-content minmax(0, 1fr) max-content; gap: calc(var(--fp) * 3) calc(var(--fp) * 6); }
:root.bw .worldwin.game .regions .n { color: #f8f8f8; }
:root.bw .worldwin.game .regions .c { color: var(--teal); }
:root.bw .worldwin.game .lookbases .lookbase, :root.bw .worldwin.game .lookclassic .lookbase { font-size: var(--ts) !important; line-height: var(--tsl) !important; text-shadow: var(--sds); padding: calc(var(--fp) * 2) calc(var(--fp) * 4) !important; }
:root.bw .worldwin.game .lookbase canvas { image-rendering: pixelated; }
:root.bw .worldwin.game .lookrow .sw { border-radius: 0; border-style: solid; border-image: var(--pxf-box); border-width: calc(var(--fp) * 2); background: none; padding: calc(var(--fp) * 2); gap: calc(var(--fp) * 2); }
/* The HP tag on a party panel: green capitals in a little black plate, as in the party screen. */
:root.bw .php b { font-size: var(--ts) !important; line-height: calc(var(--fs) * 12) !important; height: calc(var(--fs) * 12); padding: 0 calc(var(--fs) * 2) !important; overflow: visible; letter-spacing: 0; }

/* ---- a fusion's drawings, to pick from ---- */
:root.bw .artpick { width: min(760px, calc(100vw - 24px)); max-width: none !important; max-height: calc(100vh - 40px); overflow-y: auto; }
:root.bw .artgrid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--fs) * 200), 1fr)); gap: calc(var(--fp) * 3); margin: calc(var(--fp) * 4) 0; }
:root.bw .artopt { display: grid; justify-items: center; gap: calc(var(--fp) * 2); border-style: solid; border-image: var(--pxf-party); border-width: calc(var(--fp) * 6); background: none; padding: 0; color: #f8f8f8; text-shadow: var(--sds); font: 400 var(--ts) / var(--tsl) var(--bwfont); cursor: pointer; }
:root.bw .artopt:is(:hover, :focus-visible, [aria-pressed="true"]) { border-image: var(--pxf-party-on); border-width: calc(var(--fp) * 6); outline: 0; }
:root.bw .artopt img.big { --box: 192; }
@media (max-width: 560px) { :root.bw .artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root.bw .artopt img.big { --box: 96; } }
:root.bw .artopt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root.bw .worldwin.game .lookbases button.lookbase, :root.bw .worldwin.game .lookclassic button.lookbase { font-size: var(--ts) !important; line-height: var(--tsl) !important; }
/* A Pokémon in a list row (the market, the dealer): room for its sprite at its own size. */
:root.bw .worldwin.game .item .ic:has(img.px) { width: calc(var(--fs) * 64); height: calc(var(--fs) * 56); overflow: visible; }
:root.bw .worldwin.game .item .ic img.px { --box: 64; width: auto; height: auto; }
:root.bw .worldwin.game .item:has(> .ic img.px) { grid-template-columns: calc(var(--fs) * 64) minmax(0, 1fr) auto; }