/* Pokémon Black DS screens, part B (ds-b.js): options, trainer card, Day Care, black market, mall, trade, trainers,
   map, trainer creator. Every size is game pixels × var(--k). The window's own rules size every span, div and
   button, so the sizes here are !important. */

/* ---------- shared ---------- */
:root.bw .ds.zb { font-family: var(--bwfont); color: #f8f8f8; font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; line-height: calc(var(--k) * 12) !important; image-rendering: pixelated; overflow: hidden; }
:root.bw .ds.zb > * { position: absolute; margin: 0; }
:root.bw .ds.zb :is(p, ul) { margin: 0; }
:root.bw .ds.zb button:not(.dsrow) { margin: 0; padding: 0 !important; border: 0 !important; border-image: none !important; border-radius: 0 !important; box-shadow: none !important; min-height: 0 !important; min-width: 0 !important; background-color: transparent; color: #f8f8f8; font-family: var(--bwfont); cursor: pointer; transform: none; translate: none; text-transform: none; letter-spacing: 0; }
:root.bw .ds.zb button:disabled { cursor: default; }
:root.bw .ds.zb button::after, :root.bw .ds.zb button::before { content: none !important; }
:root.bw .ds.zb small { font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: inherit !important; }
:root.bw .ds.zb b { font-weight: inherit !important; }
/* Drawn parts: their picture, lit when the cursor's on them or they're the one picked, dimmed when they can't be used. */
:root.bw .ds.zb [data-zart] { background: var(--art) center / 100% 100% no-repeat !important; image-rendering: pixelated; }
:root.bw .ds.zb [data-zart]:is(:hover, :focus-visible, .on, [aria-pressed="true"]):not(:disabled) { background-image: var(--arton) !important; outline: none; }
:root.bw .ds.zb [data-zart]:disabled { background-image: var(--artdis) !important; color: #8a8a94 !important; }
:root.bw .ds.zb button:not([data-zart]):focus-visible { outline: var(--k) solid #f8f8f8; outline-offset: 0; }
/* Pointed buttons (Black's YES/NO): white words with a grey shadow, in the middle. */
:root.bw .ds.zb button[data-zart^="hex"] { display: inline-flex; align-items: center; justify-content: center; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #202028 !important; white-space: nowrap; }
/* The header strip's title, and its small words on the right. */
:root.bw .ds.zb .zb-title { left: calc(var(--k) * 43); top: calc(var(--k) * 3); font-size: calc(var(--k) * 13 * var(--fz, 1)) !important; line-height: calc(var(--k) * 14) !important; color: #f8f8f8; text-shadow: var(--k) var(--k) 0 #888888; white-space: nowrap; }
:root.bw .ds.zb .zb-thint { right: calc(var(--k) * 8); top: calc(var(--k) * 5); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 9) !important; color: #a8a8b8; white-space: nowrap; }
/* The bottom bar: « page », the ✕ and the U-turn (ds.js/bw.css). */
:root.bw .ds.zb .zb-pg { bottom: calc(var(--k) * 5); width: calc(var(--k) * 16); height: calc(var(--k) * 16); font-size: calc(var(--k) * 16) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #000 !important; }
:root.bw .ds.zb .zb-pg.prev { left: calc(var(--k) * 6); } :root.bw .ds.zb .zb-pg.next { left: calc(var(--k) * 146); }
:root.bw .ds.zb .zb-pgl { left: calc(var(--k) * 24); width: calc(var(--k) * 120); bottom: calc(var(--k) * 7); text-align: center; font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: 1 !important; letter-spacing: var(--k); text-shadow: var(--k) var(--k) 0 #000; white-space: nowrap; }
:root.bw .ds.zb .zb-pgl.solo { left: calc(var(--k) * 8); width: auto; text-align: left; letter-spacing: 0; }
/* The white message box's words (ds.js), two lines where needed. */
:root.bw .ds.zb .dsmsg { white-space: nowrap; }
/* Small grey words when there's nothing to show. */
:root.bw .ds.zb .zb-pnone { color: #c8c8d0; font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; line-height: calc(var(--k) * 13) !important; padding: calc(var(--k) * 4); text-shadow: var(--k) var(--k) 0 #000; }
:root.bw .ds.zb > .zb-pnone { left: calc(var(--k) * 8); top: calc(var(--k) * 30); width: calc(var(--k) * 236); }
/* A Pokémon's menu icon (40×30), at the screen's size. */
:root.bw .ds.zb .dspic { position: absolute; width: 40px; height: 30px; transform-origin: 0 0; image-rendering: pixelated; }
/* Black's dark-on-white writing (the Save screen's): #585050 with a grey shadow. */

/* ---------- OPTIONS ---------- */
:root.bw .ds.zb .zb-orow { left: 0; width: calc(var(--k) * 256); height: calc(var(--k) * 19); }
:root.bw .ds.zb .zb-orow:is(:hover, :focus-within) { background-image: var(--arton) !important; }
:root.bw .ds.zb .zb-ol { position: absolute; left: calc(var(--k) * 8); top: calc(var(--k) * 3); font-size: calc(var(--k) * 12 * var(--fz, 1)) !important; line-height: calc(var(--k) * 13) !important; color: #60f890; text-shadow: var(--k) 0 0 #209088, 0 var(--k) 0 #209088, var(--k) var(--k) 0 #209088; white-space: nowrap; }
:root.bw .ds.zb .zb-ochs { position: absolute; left: calc(var(--k) * 98); right: calc(var(--k) * 8); top: 0; bottom: 0; display: flex; align-items: center; gap: calc(var(--k) * 2); }
:root.bw .ds.zb .zb-orow.many .zb-ochs { left: calc(var(--k) * 80); gap: calc(var(--k) * 6); }
:root.bw .ds.zb .zb-orow:is(.many, .rules) .zb-ch { flex: 0 1 auto; }
:root.bw .ds.zb .zb-orow.rules .zb-ochs { left: calc(var(--k) * 50); gap: calc(var(--k) * 5); }
:root.bw .ds.zb .zb-orow.fonts .zb-ochs { left: calc(var(--k) * 12); gap: calc(var(--k) * 6); }
:root.bw .ds.zb .zb-ch { flex: 1 1 0; min-width: 0; height: calc(var(--k) * 16); display: flex; align-items: center; gap: calc(var(--k) * 2); font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: 1 !important; color: #308850 !important; text-shadow: var(--k) 0 0 #207068, 0 var(--k) 0 #207068, var(--k) var(--k) 0 #207068 !important; white-space: nowrap; overflow: hidden; text-align: left; }
:root.bw .ds.zb .zb-ch i { flex: none; width: calc(var(--k) * 5); height: calc(var(--k) * 14); background: var(--mkoff) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
:root.bw .ds.zb .zb-ch[aria-pressed="true"] { color: #60f890 !important; text-shadow: var(--k) 0 0 #209088, 0 var(--k) 0 #209088, var(--k) var(--k) 0 #209088 !important; }
:root.bw .ds.zb .zb-ch[aria-pressed="true"] i { background-image: var(--mkon); }
:root.bw .ds.zb .zb-ch:is(:hover, :focus-visible) { color: #f8f8f8 !important; outline: none; }
:root.bw .ds.zb .zb-orow.rules .zb-ch, :root.bw .ds.zb .zb-orow.many .zb-ch { font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; }
:root.bw .ds.zb .zb-font { font-size: calc(var(--k) * 11 * var(--ffz, 1)) !important; font-weight: 400 !important; }
:root.bw .ds.zb .zb-key { width: calc(var(--k) * 60); height: calc(var(--k) * 15); margin-right: calc(var(--k) * 6) !important; }
:root.bw .ds.zb .zb-key.wide { width: calc(var(--k) * 124); }
:root.bw .ds.zb .zb-key.wait { color: #60f890 !important; background-image: var(--arton) !important; }
:root.bw .ds.zb .zb-vol { flex: 1 1 auto; min-width: 0; height: calc(var(--k) * 14); margin: 0 calc(var(--k) * 4) 0 0 !important; padding: 0 !important; appearance: none; -webkit-appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; cursor: pointer; }
:root.bw .ds.zb .zb-vol::-webkit-slider-runnable-track { height: calc(var(--k) * 6); background: linear-gradient(90deg, #60f890 var(--v), #303040 var(--v)); box-shadow: 0 0 0 var(--k) #209088; border-radius: 0; }
:root.bw .ds.zb .zb-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: calc(var(--k) * 5); height: calc(var(--k) * 14); margin-top: calc(var(--k) * -4); background: var(--mkon) 0 0 / 100% 100% no-repeat; border: 0; border-radius: 0; image-rendering: pixelated; }
:root.bw .ds.zb .zb-vol::-moz-range-track { height: calc(var(--k) * 6); background: linear-gradient(90deg, #60f890 var(--v), #303040 var(--v)); border: 0; border-radius: 0; }
:root.bw .ds.zb .zb-vol::-moz-range-thumb { width: calc(var(--k) * 5); height: calc(var(--k) * 14); background: var(--mkon) 0 0 / 100% 100% no-repeat; border: 0; border-radius: 0; }
:root.bw .ds.zb .zb-vol:focus-visible { outline: var(--k) solid #f8f8f8; }
:root.bw .ds.zb .zb-voln { width: calc(var(--k) * 18); text-align: right; font-size: calc(var(--k) * 11) !important; line-height: 1 !important; color: #60f890; text-shadow: var(--k) var(--k) 0 #209088; }
:root.bw .ds.zb .zb-ohint { left: calc(var(--k) * 12); width: calc(var(--k) * 232); height: calc(var(--k) * 19); display: flex; align-items: center; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 9) !important; color: #b8b8d0; text-shadow: var(--k) var(--k) 0 #202030; }

/* ---------- THE TRAINER CARD ---------- */
:root.bw .ds.zb-tc .zb-new { right: calc(var(--k) * 6); top: calc(var(--k) * 4); padding: 0 calc(var(--k) * 4) !important; height: calc(var(--k) * 14); background: #c03028 !important; box-shadow: inset 0 0 0 var(--k) #f8a8a0 !important; font-size: calc(var(--k) * 9) !important; line-height: calc(var(--k) * 14) !important; animation: zbblink 1s steps(2) infinite; }
@keyframes zbblink { 50% { background: #e85040; } }
:root.bw .ds.zb-tc .zb-band { top: calc(var(--k) * 28); font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: calc(var(--k) * 13) !important; text-shadow: var(--k) var(--k) 0 #18301c; white-space: nowrap; }
:root.bw .ds.zb-tc .zb-band.l { left: calc(var(--k) * 14); } :root.bw .ds.zb-tc .zb-band.r { right: calc(var(--k) * 14); }
:root.bw .ds.zb-tc .zb-tcrows { left: calc(var(--k) * 12); top: calc(var(--k) * 45); width: calc(var(--k) * 158); box-shadow: 0 0 0 var(--k) #383838; }
:root.bw .ds.zb-tc .zb-tcrows > div { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--k) * 4); height: calc(var(--k) * 15); padding: 0 calc(var(--k) * 4); background: #f8f8f8; box-shadow: inset 0 calc(var(--k) * -1) 0 #c0c0b0; color: #585050; text-shadow: var(--k) var(--k) 0 #c8c8d0; font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: 1 !important; white-space: nowrap; }
:root.bw .ds.zb-tc .zb-tcrows > div > span { color: #3870c0; text-shadow: var(--k) var(--k) 0 #b8c8e0; }
:root.bw .ds.zb-tc .zb-tcrows small { color: #787070; }
:root.bw .ds.zb-tc .zb-tcrows.back > div { font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; }
:root.bw .ds.zb-tc .zb-tcrows.back { width: calc(var(--k) * 232); }
:root.bw .ds.zb-tc .zb-balls { display: inline-flex; gap: calc(var(--k) * 6); align-items: center; }
:root.bw .ds.zb-tc .zb-balls span { display: inline-flex; align-items: center; gap: calc(var(--k) * 1); }
:root.bw .ds.zb-tc .zb-balls img { width: calc(var(--k) * 12); height: calc(var(--k) * 12); image-rendering: pixelated; object-fit: contain; }
:root.bw .ds.zb-tc .zb-photo { left: calc(var(--k) * 176); top: calc(var(--k) * 45); width: calc(var(--k) * 68); height: calc(var(--k) * 68); }
:root.bw .ds.zb-tc .zb-photo canvas { position: absolute; left: calc(var(--k) * 2); top: calc(var(--k) * 2); width: calc(var(--k) * 64); height: calc(var(--k) * 64); image-rendering: pixelated; box-shadow: none; border: 0; border-radius: 0; background: none; }
:root.bw .ds.zb-tc .zb-stars { left: calc(var(--k) * 176); top: calc(var(--k) * 116); width: calc(var(--k) * 68); text-align: center; color: #f8e070; text-shadow: var(--k) var(--k) 0 #403010; font-size: calc(var(--k) * 12) !important; line-height: 1 !important; letter-spacing: var(--k); }
:root.bw .ds.zb-tc .zb-minibadges { left: calc(var(--k) * 12); top: calc(var(--k) * 142); display: flex; gap: calc(var(--k) * 4); align-items: center; }
:root.bw .ds.zb-tc .zb-minibadges i { width: calc(var(--k) * 10); height: calc(var(--k) * 10); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
:root.bw .ds.zb-tc .zb-minibadges span { margin-left: calc(var(--k) * 4); font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #18301c; white-space: nowrap; }
:root.bw .ds.zb-tc .zb-plabel { left: calc(var(--k) * 14); top: calc(var(--k) * 95); font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #18301c; }
:root.bw .ds.zb-tc .zb-party { left: calc(var(--k) * 12); top: calc(var(--k) * 107); display: flex; gap: calc(var(--k) * 1); }
:root.bw .ds.zb-tc .zb-pslot { position: relative; width: calc(var(--k) * 38); height: calc(var(--k) * 34); overflow: hidden; }
:root.bw .ds.zb-tc .zb-pslot .dspic { left: calc(var(--k) * -1); top: calc(var(--k) * 0); }
:root.bw .ds.zb-tc .zb-pslot b { position: absolute; left: calc(var(--k) * 3); bottom: calc(var(--k) * 2); color: #585050; text-shadow: none; font-size: calc(var(--k) * 8) !important; line-height: 1 !important; }
:root.bw .ds.zb-tc .zb-pslot em { position: absolute; right: calc(var(--k) * 3); top: calc(var(--k) * 2); font-style: normal; color: #e0a000; font-size: calc(var(--k) * 8) !important; line-height: 1 !important; }
:root.bw .ds.zb-tc .zb-pslot .grade { position: absolute; right: calc(var(--k) * 3); bottom: calc(var(--k) * 2); min-width: calc(var(--k) * 8); height: calc(var(--k) * 8); padding: 0 !important; font-size: calc(var(--k) * 7) !important; line-height: calc(var(--k) * 8) !important; text-align: center; }
:root.bw .ds.zb-tc .zb-pslot.empty { color: #a0a0a8 !important; font-size: calc(var(--k) * 16) !important; line-height: 1 !important; }
:root.bw .ds.zb-tc .zb-case { inset: 0; }
:root.bw .ds.zb-tc .zb-bslot { position: absolute; text-align: center; }
:root.bw .ds.zb-tc .zb-bslot i { display: block; width: calc(var(--k) * 24); height: calc(var(--k) * 24); margin: calc(var(--k) * 6) auto calc(var(--k) * 3); background: center / 100% 100% no-repeat; image-rendering: pixelated; }
:root.bw .ds.zb-tc .zb-bslot span { display: block; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 9) !important; color: #786048; }
:root.bw .ds.zb-tc .zb-bslot.got span { color: #f8e8c8; text-shadow: var(--k) var(--k) 0 #201408; }
:root.bw .ds.zb-tc .zb-inbox { left: calc(var(--k) * 4); top: calc(var(--k) * 4); width: calc(var(--k) * 248); height: calc(var(--k) * 136); overflow-y: auto; display: grid; gap: calc(var(--k) * 3); align-content: start; scrollbar-width: thin; }
:root.bw .ds.zb-tc .zb-ibox { position: relative; min-height: calc(var(--k) * 34); display: flex; align-items: center; gap: calc(var(--k) * 4); padding: calc(var(--k) * 2) calc(var(--k) * 4); background: #f8f8f8; box-shadow: inset 0 0 0 var(--k) #606068, inset 0 0 0 calc(var(--k) * 2) #e0e0e8; color: #505050; text-shadow: var(--k) var(--k) 0 #c8c8d0; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; }
:root.bw .ds.zb-tc .zb-ibox p { flex: 1; min-width: 0; }
:root.bw .ds.zb-tc .zb-iav { flex: none; width: calc(var(--k) * 14); height: calc(var(--k) * 14); background: #5868a8; color: #f8f8f8; text-shadow: none; text-align: center; font-size: calc(var(--k) * 10) !important; line-height: calc(var(--k) * 14) !important; }
:root.bw .ds.zb-tc .zb-ibtn { display: grid; gap: calc(var(--k) * 2); flex: none; }
:root.bw .ds.zb-tc .zb-ibtn button { width: calc(var(--k) * 44); height: calc(var(--k) * 15); }
:root.bw .ds.zb-tc .zb-iempty { color: #c8c8d0; font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; line-height: calc(var(--k) * 13) !important; padding: calc(var(--k) * 6); text-shadow: var(--k) var(--k) 0 #000; }
:root.bw .ds.zb-tc .zb-ibig { top: calc(var(--k) * 144); width: calc(var(--k) * 96); height: calc(var(--k) * 17); font-size: calc(var(--k) * 10) !important; }
:root.bw .ds.zb-tc .zb-ibig.t { left: calc(var(--k) * 24); } :root.bw .ds.zb-tc .zb-ibig.c { left: calc(var(--k) * 136); }

/* ---------- THE DAY CARE ---------- */
:root.bw .ds.zb-dc .zb-dcsay { left: calc(var(--k) * 8); top: calc(var(--k) * 6); width: calc(var(--k) * 240); height: calc(var(--k) * 34); overflow: hidden; color: #585050; text-shadow: var(--k) var(--k) 0 #a0a0a8; font-size: calc(var(--k) * 12 * var(--fz, 1)) !important; line-height: calc(var(--k) * 16) !important; }
:root.bw .ds.zb-dc .zb-dccard { left: calc(var(--k) * 8); top: calc(var(--k) * 52); width: calc(var(--k) * 177); height: calc(var(--k) * 111); color: #585050; text-shadow: var(--k) var(--k) 0 #c8c8d0; }
:root.bw .ds.zb-dc .zb-dccard > * { position: absolute; }
:root.bw .ds.zb-dc .zb-dchead { left: calc(var(--k) * 4); top: calc(var(--k) * 1); width: calc(var(--k) * 168); display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: calc(var(--k) * 12) !important; }
:root.bw .ds.zb-dc .zb-dchead span + span { font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; }
:root.bw .ds.zb-dc .zb-dchead em { font-style: normal; color: #e05868; }
:root.bw .ds.zb-dc .zb-dcrows { left: calc(var(--k) * 4); top: calc(var(--k) * 14); width: calc(var(--k) * 170); }
:root.bw .ds.zb-dc .zb-dcrow { position: relative; height: calc(var(--k) * 30); }
:root.bw .ds.zb-dc .zb-dcrow > * { position: absolute; white-space: nowrap; }
:root.bw .ds.zb-dc .zb-dcrow .dspic { left: 0; top: 0; }
:root.bw .ds.zb-dc .zb-dcrow b { left: calc(var(--k) * 42); top: calc(var(--k) * 2); font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; }
:root.bw .ds.zb-dc .zb-dcrow b i { font-style: normal; } :root.bw .ds.zb-dc .zb-dcrow b i.m { color: #3878e0; } :root.bw .ds.zb-dc .zb-dcrow b i.f { color: #e05868; }
:root.bw .ds.zb-dc .zb-dclv { left: calc(var(--k) * 42); top: calc(var(--k) * 13); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 8) !important; }
:root.bw .ds.zb-dc .zb-dchold { left: calc(var(--k) * 42); top: calc(var(--k) * 21); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 8) !important; color: #787070; }
:root.bw .ds.zb-dc .zb-dcrow button { right: 0; top: calc(var(--k) * 7); width: calc(var(--k) * 58); height: calc(var(--k) * 15); }
:root.bw .ds.zb-dc .zb-dcrow .zb-dcfree { left: calc(var(--k) * 10); top: calc(var(--k) * 6); width: calc(var(--k) * 150); height: calc(var(--k) * 17); }
:root.bw .ds.zb-dc .zb-dcfee { left: calc(var(--k) * 4); top: calc(var(--k) * 96); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 9) !important; white-space: nowrap; }
:root.bw .ds.zb-dc .zb-dchelp { left: calc(var(--k) * 4); top: calc(var(--k) * 15); width: calc(var(--k) * 168); height: calc(var(--k) * 93); overflow-y: auto; padding: 0 0 0 calc(var(--k) * 8) !important; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 10) !important; scrollbar-width: thin; }
:root.bw .ds.zb-dc .zb-dchelp li { margin-bottom: calc(var(--k) * 3); }
:root.bw .ds.zb-dc .zb-dcside { left: calc(var(--k) * 190); top: calc(var(--k) * 52); display: grid; gap: calc(var(--k) * 4); }
:root.bw .ds.zb-dc .zb-side { width: calc(var(--k) * 62); height: calc(var(--k) * 23); white-space: normal !important; text-align: center; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: calc(var(--k) * 9) !important; text-shadow: var(--k) var(--k) 0 #888888 !important; }

/* ---------- LIST SCREENS (black market, mall): the card on the left, the rows on the right ---------- */
:root.bw .ds.zb-list .zb-card { left: calc(var(--k) * 5); top: calc(var(--k) * 5); width: calc(var(--k) * 116); height: calc(var(--k) * 157); }
:root.bw .ds.zb-list .zb-card > * { position: absolute; }
:root.bw .ds.zb-list .zb-cn { left: 0; top: calc(var(--k) * 2); width: calc(var(--k) * 116); text-align: center; font-size: calc(var(--k) * 12 * var(--fz, 1)) !important; line-height: calc(var(--k) * 13) !important; text-shadow: var(--k) var(--k) 0 rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; }
:root.bw .ds.zb-list .zb-cpic { left: calc(var(--k) * 4); top: calc(var(--k) * 16); width: calc(var(--k) * 44); height: calc(var(--k) * 32); background: #f8f8f8; box-shadow: inset 0 0 0 var(--k) #606068; overflow: hidden; }
:root.bw .ds.zb-list .zb-cpic .dspic { left: calc(var(--k) * 2); top: calc(var(--k) * 1); }
:root.bw .ds.zb-list .zb-cpic canvas { position: absolute; left: calc(var(--k) * 6); top: 0; width: calc(var(--k) * 32); height: calc(var(--k) * 32); image-rendering: pixelated; border: 0; box-shadow: none; background: none; border-radius: 0; }
:root.bw .ds.zb-list .zb-cpic .zb-shiny { position: absolute; right: calc(var(--k) * 2); top: 0; font-style: normal; color: #e0a000; font-size: calc(var(--k) * 9) !important; line-height: 1 !important; }
:root.bw .ds.zb-list .zb-trash { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; color: #a02838; font-size: calc(var(--k) * 11) !important; }
:root.bw .ds.zb-list .zb-cside { left: calc(var(--k) * 52); top: calc(var(--k) * 16); width: calc(var(--k) * 62); font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; text-shadow: var(--k) var(--k) 0 rgba(0, 0, 0, .55); white-space: nowrap; overflow: hidden; }
:root.bw .ds.zb-list .zb-cbody { left: calc(var(--k) * 3); top: calc(var(--k) * 51); width: calc(var(--k) * 110); height: calc(var(--k) * 104); overflow-y: auto; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; text-shadow: var(--k) var(--k) 0 #000; scrollbar-width: thin; display: grid; align-content: start; gap: calc(var(--k) * 3); }
:root.bw .ds.zb-list .zb-cbody .zb-k { color: #f8a0a8; }
:root.bw .ds.zb-list .zb-cbody .zb-faint { color: #b8b0b8; }
:root.bw .ds.zb-list .zb-moves { display: flex; flex-wrap: wrap; gap: calc(var(--k) * 2); }
:root.bw .ds.zb-list .zb-mv { padding: 0 calc(var(--k) * 2); background: var(--tc); color: #f8f8f8; text-shadow: var(--k) var(--k) 0 rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 var(--k) rgba(0, 0, 0, .45); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; }
:root.bw .ds.zb-list .zb-rows { left: calc(var(--k) * 126); top: calc(var(--k) * 20); width: calc(var(--k) * 130); height: calc(var(--k) * 144); overflow-y: auto; overflow-x: hidden; display: grid; align-content: start; gap: calc(var(--k) * 2); scrollbar-width: thin; }
:root.bw .ds.zb-list .dsrow { font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; }
:root.bw .ds.zb-list .dsrow small { margin-left: calc(var(--k) * 4); white-space: nowrap; }
:root.bw .ds.zb-list .dsrow.zb-dim { color: #9090a0 !important; }
:root.bw .ds.zb-list .zb-money { left: calc(var(--k) * 128); top: calc(var(--k) * 3); width: calc(var(--k) * 124); height: calc(var(--k) * 14); padding: 0 calc(var(--k) * 4); box-sizing: border-box; background: #f8f8f8; box-shadow: inset 0 0 0 var(--k) #606068, inset 0 0 0 calc(var(--k) * 2) #e0e0e8; color: #505050; text-shadow: var(--k) var(--k) 0 #c8c8d0; text-align: right; font-size: calc(var(--k) * 10) !important; line-height: calc(var(--k) * 14) !important; }
:root.bw .ds.zb-list .zb-cmd { right: auto; left: calc(var(--k) * 46); bottom: calc(var(--k) * 30); }
:root.bw .ds.zb-list .zb-cmd button:disabled { color: #8a8a94 !important; cursor: default; }

/* ---------- TRADE, CHALLENGE: people ---------- */
:root.bw .ds.zb .zb-plist { left: calc(var(--k) * 4); top: calc(var(--k) * 28); width: calc(var(--k) * 250); height: calc(var(--k) * 132); overflow-y: auto; overflow-x: hidden; display: grid; gap: calc(var(--k) * 2); align-content: start; scrollbar-width: thin; }
:root.bw .ds.zb .zb-plist.two { top: calc(var(--k) * 72); height: calc(var(--k) * 90); }
:root.bw .ds.zb .zb-plist.up { top: calc(var(--k) * 50); height: calc(var(--k) * 112); }
:root.bw .ds.zb :is(.zb-prow, .zb-prow2) { position: relative; height: calc(var(--k) * 18); display: flex; align-items: center; gap: calc(var(--k) * 4); padding-left: calc(var(--k) * 15) !important; font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #18181c !important; white-space: nowrap; text-align: left; }
:root.bw .ds.zb .zb-prow { width: calc(var(--k) * 200); }
:root.bw .ds.zb .zb-prow small { margin-left: auto; margin-right: calc(var(--k) * 14); }
:root.bw .ds.zb .zb-prow2 { width: calc(var(--k) * 248); }
:root.bw .ds.zb .zb-prow2 .zb-pn { flex: 1; min-width: 0; overflow: hidden; }
:root.bw .ds.zb .zb-prow2 button { flex: none; margin-right: calc(var(--k) * 12) !important; width: calc(var(--k) * 64); height: calc(var(--k) * 15); }
:root.bw .ds.zb .zb-pav { flex: none; width: calc(var(--k) * 12); height: calc(var(--k) * 12); background: #5868a8; box-shadow: inset 0 0 0 var(--k) #202028; text-align: center; font-size: calc(var(--k) * 9) !important; line-height: calc(var(--k) * 12) !important; }
:root.bw .ds.zb-people .zb-orow { left: 0; }
:root.bw .ds.zb-people .dsmsg.zb-rule { top: calc(var(--k) * 165); height: calc(var(--k) * 22); white-space: normal; overflow: hidden; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; }
:root.bw .ds.zb-trade .zb-tside { top: calc(var(--k) * 4); width: calc(var(--k) * 96); display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * 2); }
:root.bw .ds.zb-trade > .zb-tside:nth-of-type(1) { left: calc(var(--k) * 10); }
:root.bw .ds.zb-trade > .zb-tside:nth-of-type(2) { left: calc(var(--k) * 150); }
:root.bw .ds.zb-trade .zb-twho { font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; line-height: calc(var(--k) * 11) !important; text-shadow: var(--k) var(--k) 0 #000; white-space: nowrap; }
:root.bw .ds.zb-trade .zb-tpic { position: relative; width: calc(var(--k) * 96); height: calc(var(--k) * 96); background: #0c3050; box-shadow: inset 0 0 0 var(--k) #08b0f8, inset 0 0 0 calc(var(--k) * 2) #0a4c7c; display: grid; place-items: center; }
:root.bw .ds.zb-trade .zb-tpic img { width: calc(var(--k) * 96); height: calc(var(--k) * 96); image-rendering: pixelated; }
:root.bw .ds.zb-trade .zb-tpic span { color: #88b8d8; font-size: calc(var(--k) * 9) !important; }
:root.bw .ds.zb-trade .zb-tname { height: calc(var(--k) * 10); width: calc(var(--k) * 110); text-align: center; overflow: hidden; white-space: nowrap; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 10) !important; text-shadow: var(--k) var(--k) 0 #000; }
:root.bw .ds.zb-trade .zb-tside button { width: calc(var(--k) * 96); height: calc(var(--k) * 15); font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; }
:root.bw .ds.zb-trade .zb-tarrow { left: calc(var(--k) * 106); top: calc(var(--k) * 52); width: calc(var(--k) * 44); text-align: center; color: #90f8f8; text-shadow: var(--k) var(--k) 0 #084870; font-size: calc(var(--k) * 22) !important; line-height: 1 !important; }
:root.bw .ds.zb-trade .zb-offer { left: calc(var(--k) * 88); top: calc(var(--k) * 146); width: calc(var(--k) * 80); height: calc(var(--k) * 15); font-size: calc(var(--k) * 10) !important; }

/* ---------- THE MAP ---------- */
:root.bw .ds.zb-map .zb-rm { left: 0; top: 0; width: 100%; height: 100%; display: block !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
:root.bw .ds.zb-map .zb-rm .rm-col { position: absolute; display: block; overflow: hidden; }
:root.bw .ds.zb-map .zb-rm .rm-stage { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
:root.bw .ds.zb-map .zb-rm .rm-side { position: absolute; display: block; overflow-y: auto; padding: calc(var(--k) * 4) calc(var(--k) * 5); box-sizing: border-box; color: #f8f8f8; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 10) !important; scrollbar-width: thin; text-shadow: var(--k) var(--k) 0 #101018; }
:root.bw .ds.zb-map .zb-rm .rm-info { padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; gap: calc(var(--k) * 3); }
:root.bw .ds.zb-map .zb-rm .rm-side :is(*, .small, small) { font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 10) !important; }
:root.bw .ds.zb-map .zb-rm .rm-side .rm-name { font-size: calc(var(--k) * 11 * var(--fz, 1)) !important; line-height: calc(var(--k) * 12) !important; color: #60f890; }
:root.bw .ds.zb-map .zb-rm .rm-side .faint { color: #a8a8c0 !important; }
:root.bw .ds.zb-map .zb-rm .rm-chip { padding: 0 calc(var(--k) * 3); border-width: var(--k); border-radius: 0; }
:root.bw .ds.zb-map .zb-rm .rm-list { gap: calc(var(--k) * 2); }
:root.bw .ds.zb-map .zb-rm .rm-list li { gap: calc(var(--k) * 3); }
:root.bw .ds.zb-map .zb-rm .rm-list .ic { width: calc(var(--k) * 7); height: calc(var(--k) * 7); border-width: var(--k); }
:root.bw .ds.zb-map .zb-rm .rm-type { padding: 0 calc(var(--k) * 2); border-width: var(--k); border-radius: 0; }
:root.bw .ds.zb-map .zb-legend { position: absolute; left: calc(var(--k) * 6); bottom: calc(var(--k) * 6); display: flex; flex-wrap: nowrap; gap: calc(var(--k) * 5); color: #d0d0d8; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: 1 !important; }
:root.bw .ds.zb-map .zb-legend span { gap: calc(var(--k) * 2); }
:root.bw .ds.zb-map .zb-legend :is(span, b) { font-size: inherit !important; line-height: inherit !important; }
:root.bw .ds.zb-map .zb-legend i { width: calc(var(--k) * 6) !important; height: calc(var(--k) * 6) !important; border-width: var(--k); }
:root.bw .ds.zb-map .zb-legend i:is(.lg-city, .lg-new) { width: calc(var(--k) * 8) !important; }

/* ---------- THE TRAINER CREATOR ---------- */
:root.bw .ds.zb-cr .zb-crprev { left: calc(var(--k) * 6); top: calc(var(--k) * 28); width: calc(var(--k) * 74); height: calc(var(--k) * 74); }
:root.bw .ds.zb-cr .zb-crprev canvas { position: absolute; left: calc(var(--k) * 5); top: calc(var(--k) * 5); width: calc(var(--k) * 64); height: calc(var(--k) * 64); image-rendering: pixelated; border: 0; box-shadow: none; background: none; border-radius: 0; }
:root.bw .ds.zb-cr .zb-spin { top: calc(var(--k) * 105); width: calc(var(--k) * 34); height: calc(var(--k) * 15); font-size: calc(var(--k) * 12) !important; }
:root.bw .ds.zb-cr .zb-spin.l { left: calc(var(--k) * 6); } :root.bw .ds.zb-cr .zb-spin.r { left: calc(var(--k) * 46); }
:root.bw .ds.zb-cr .zb-crnote { left: calc(var(--k) * 5); top: calc(var(--k) * 123); width: calc(var(--k) * 78); height: calc(var(--k) * 20); overflow: hidden; color: #c8c8d0; font-size: calc(var(--k) * 8 * var(--fz, 1)) !important; line-height: calc(var(--k) * 10) !important; text-shadow: var(--k) var(--k) 0 #000; }
:root.bw .ds.zb-cr .zb-crdone { left: calc(var(--k) * 5); top: calc(var(--k) * 145); width: calc(var(--k) * 76); height: calc(var(--k) * 19); font-size: calc(var(--k) * 9) !important; }
:root.bw .ds.zb-cr .zb-crbody { left: calc(var(--k) * 89); top: calc(var(--k) * 29); width: calc(var(--k) * 162); height: calc(var(--k) * 132); overflow-y: auto; overflow-x: hidden; display: grid; gap: calc(var(--k) * 2); align-content: start; scrollbar-width: thin; }
:root.bw .ds.zb-cr .zb-crbase { width: calc(var(--k) * 160); height: calc(var(--k) * 18); display: flex; align-items: center; gap: calc(var(--k) * 3); padding-left: calc(var(--k) * 13) !important; text-align: left; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; text-shadow: var(--k) var(--k) 0 #18181c !important; white-space: nowrap; overflow: hidden; }
:root.bw .ds.zb-cr .zb-crbase canvas { width: calc(var(--k) * 16); height: calc(var(--k) * 16); image-rendering: pixelated; flex: none; border: 0; box-shadow: none; background: none; }
:root.bw .ds.zb-cr .zb-crpart { display: grid; gap: calc(var(--k) * 2); padding: calc(var(--k) * 2) calc(var(--k) * 3); }
:root.bw .ds.zb-cr .zb-crpart b { color: #60f890; text-shadow: var(--k) var(--k) 0 #209088; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; }
:root.bw .ds.zb-cr .zb-crpart > div { display: flex; flex-wrap: wrap; gap: calc(var(--k) * 1); }
:root.bw .ds.zb-cr .zb-sw { width: calc(var(--k) * 10); height: calc(var(--k) * 10); box-shadow: inset 0 0 0 var(--k) #101018 !important; font-size: calc(var(--k) * 8) !important; line-height: calc(var(--k) * 10) !important; color: #202028 !important; text-shadow: none !important; }
:root.bw .ds.zb-cr .zb-sw.orig { background: #e0e0e8 !important; }
:root.bw .ds.zb-cr .zb-sw[aria-pressed="true"] { outline: var(--k) solid #60f890; outline-offset: var(--k); }
:root.bw .ds.zb-cr .zb-sw:focus-visible { outline: var(--k) solid #f8f8f8; outline-offset: var(--k); }
:root.bw .ds.zb-cr .zb-crgrid { display: grid; grid-template-columns: repeat(4, calc(var(--k) * 38)); gap: calc(var(--k) * 2); }
:root.bw .ds.zb-cr .zb-crcl { position: relative; width: calc(var(--k) * 38); height: calc(var(--k) * 44); background: #303040 !important; box-shadow: inset 0 0 0 var(--k) #505060 !important; overflow: hidden; }
:root.bw .ds.zb-cr .zb-crcl[aria-pressed="true"], :root.bw .ds.zb-cr .zb-crcl:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 var(--k) #90f8f8, inset 0 0 0 calc(var(--k) * 2) #08b0f8 !important; outline: none; }
:root.bw .ds.zb-cr .zb-crcl canvas { display: block; margin: calc(var(--k) * 1) auto 0; width: calc(var(--k) * 32); height: calc(var(--k) * 32); image-rendering: pixelated; border: 0; box-shadow: none; background: none; }
:root.bw .ds.zb-cr .zb-crcl span { display: block; width: calc(var(--k) * 36); margin: 0 auto; overflow: hidden; white-space: nowrap; font-size: calc(var(--k) * 6 * var(--fz, 1)) !important; line-height: calc(var(--k) * 8) !important; }
:root.bw .ds.zb-cr .zb-crcl small { position: absolute; top: calc(var(--k) * 1); right: calc(var(--k) * 1); padding: 0 calc(var(--k) * 1); background: #c03040; font-size: calc(var(--k) * 6) !important; line-height: calc(var(--k) * 7) !important; }
:root.bw .ds.zb-cr .zb-crcl.locked canvas { opacity: .75; }