/* gui-c.css: the pause menu (Infinite Fusion's), the text box and its frames (Infinite Fusion's white, Uranium's dark,
 * Black and White's, eight of Diamond and Pearl's), the colour themes, the trainer card (Black 2 and White 2's) and
 * the place sign (HeartGold and SoulSilver's). Loaded last, so its rules win over bw.css and ds-b.css.
 *
 * ===== FOR EVERYONE BUILDING SCREENS: THE COLOUR THEMES =====
 * Options → THEME lets each player pick one of ten colour themes (Black, White, Ruby, Sapphire, Emerald, Pikachu,
 * Gengar, Ocean, Sakura, Night). A theme recolours the menus' CHROME only (headers, panels, edges, highlights and the
 * cursor), never Pokémon, items, type colours or art. To have your screen follow it, colour its chrome with these
 * (they're on :root, set by pixel.js applyTheme; <html data-theme="black|white|ruby|…"> says which is on):
 *
 *   --gui-head      header strip, dark end          --gui-head2     header strip, light end (gradient head2 → head)
 *   --gui-head-ink  words on the header             --gui-panel     a panel / window body
 *   --gui-panel2    a second, lighter panel         --gui-edge      a panel's edge line
 *   --gui-hi        the picked/current row's fill   --gui-hi-ink    words on --gui-hi
 *   --gui-hi-edge   the picked row's edge, focus    --gui-cursor    the cursor (the ▶ arrow, a hand, a frame)
 *   --gui-ink       words on a panel                --gui-soft      small/quiet words on a panel, hints
 *   --gui-accent    a value or choice that's on     --gui-row       an Options-style row's fill
 *   --gui-line      a thin rule between rows
 *
 * Example:  .my-head { background: linear-gradient(var(--gui-head2), var(--gui-head)); color: var(--gui-head-ink); }
 *           .my-row.on { background: var(--gui-hi); color: var(--gui-hi-ink); box-shadow: inset 0 0 0 var(--k) var(--gui-hi-edge); }
 * Drawn a pixel at a time (DS.png)? Read the same colours in JS: guiTheme()[2].head, .panel, .cursor … and add the
 * theme to your picture's cache key (guiTheme()[0]) so it's drawn again when the theme changes (see DSB.art).
 * Black is the game's own look: existing screens stay exactly as they were under it. Words must stay readable on
 * every theme, including White (dark words on light panels): use --gui-ink / --gui-head-ink, never a fixed white.
 * The text box's frame is separate: <html data-box="light|dark"> says whether its words are dark or light.
 */
:root {
  --gui-head: #000000; --gui-head2: #606060; --gui-head-ink: #f8f8f8; --gui-panel: #26262c; --gui-panel2: #383848;
  --gui-edge: #5a5a64; --gui-hi: #f8f8f8; --gui-hi-ink: #202028; --gui-hi-edge: #08b0f8; --gui-cursor: #f8f8f8;
  --gui-ink: #f8f8f8; --gui-soft: #a8a8b8; --gui-accent: #60f890; --gui-row: #5840b0; --gui-line: #389068;
}

/* ================= THE PAUSE MENU (town.js drawStart): Infinite Fusion's side list ================= */
/* Down the right side at the top, like Infinite Fusion's, every choice at once. In game pixels (--u), a whole number. */
:root.bw .worldstart:not([hidden]) { display: block !important; }
:root.bw .worldstart { top: calc(var(--u) * 4) !important; right: calc(var(--u) * 4) !important; translate: none !important; padding: 0 !important; width: auto !important; min-width: 0 !important; max-height: none !important; overflow: visible !important; background: none !important; box-shadow: none !important; border: 0 !important; }
.gcs {
  --g: var(--u, 2px);
  position: relative; display: flex; flex-direction: column; min-width: calc(var(--g) * 124); max-width: calc(var(--g) * 170);
  background: color-mix(in srgb, var(--gui-panel) 90%, transparent); border: var(--g) solid #08080c; border-radius: calc(var(--g) * 4);
  box-shadow: inset 0 0 0 calc(var(--g) * 2) color-mix(in srgb, var(--gui-soft) 85%, #fff), inset 0 0 0 calc(var(--g) * 3) color-mix(in srgb, var(--gui-panel) 70%, #000), 0 calc(var(--g) * 3) calc(var(--g) * 10) rgba(0, 0, 0, .45);
  font-family: var(--bwfont, "DotGothic16"), system-ui, sans-serif; font-weight: var(--fw, 400); color: var(--gui-ink); overflow: hidden;
  -webkit-font-smoothing: none; font-synthesis: none; letter-spacing: 0;
}
.gcs-top { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--g) * 8); margin: calc(var(--g) * 3) calc(var(--g) * 3) 0; padding: 0 calc(var(--g) * 5);
  height: calc(var(--g) * 13); background: linear-gradient(var(--gui-head2), var(--gui-head)); color: var(--gui-head-ink); border-radius: calc(var(--g) * 2) calc(var(--g) * 2) 0 0;
  font-size: calc(var(--g) * 9 * var(--fz, 1)); line-height: calc(var(--g) * 13); white-space: nowrap; text-shadow: var(--g) var(--g) 0 rgba(0, 0, 0, .45); }
.gcs-clock { display: inline-flex; align-items: center; gap: calc(var(--g) * 3); letter-spacing: var(--g); }
.gcs-sun { display: inline-block; width: calc(var(--g) * 6); height: calc(var(--g) * 6); border-radius: 50%; background: #f8c030; }
.gcs-sun.night { background: none; box-shadow: inset calc(var(--g) * -2) calc(var(--g) * -1) 0 0 #f8e070; }
.gcs-net { opacity: .85; }
.gcs-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: calc(var(--g) * 3) calc(var(--g) * 6) calc(var(--g) * 3) calc(var(--g) * 14); }
:root.bw .worldstart .gcs .gcs-item {
  all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: calc(var(--g) * 6); height: calc(var(--g) * 18); min-height: 0 !important; margin: 0 !important; padding: 0 calc(var(--g) * 3) !important;
  border: 0 !important; border-image: none !important; background: none !important; box-shadow: none !important; text-transform: none; letter-spacing: 0;
  color: var(--gui-ink) !important; font: var(--fw, 400) calc(var(--g) * 13 * var(--fz, 1)) / calc(var(--g) * 18) var(--bwfont, "DotGothic16"), system-ui, sans-serif !important;
  text-shadow: var(--g) 0 0 rgba(0, 0, 0, .55), 0 var(--g) 0 rgba(0, 0, 0, .55), var(--g) var(--g) 0 rgba(0, 0, 0, .55) !important; white-space: nowrap; cursor: pointer; border-radius: calc(var(--g) * 2) !important;
}
/* The one you're on: the ▶ beside it, in the theme's cursor colour (Infinite Fusion's is white). */
:root.bw .worldstart .gcs .gcs-item::after { content: none !important; }
:root.bw .worldstart .gcs .gcs-item.on::before { content: ""; position: absolute; left: calc(var(--g) * -10); top: 50%; width: calc(var(--g) * 6); height: calc(var(--g) * 10); margin-top: calc(var(--g) * -5);
  background: var(--gui-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(var(--g) var(--g) 0 rgba(0, 0, 0, .6)); }
/* The mouse over one only lights it softly; the ▶ stays where it is (town.js, the cursor in a window). */
:root.bw .worldstart .gcs .gcs-item:hover { background: rgba(255, 255, 255, .1) !important; }
:root.bw .worldstart .gcs .gcs-item:focus-visible { outline: none; }
.gcs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.gcs-key { flex: none; color: var(--gui-soft); font-size: calc(var(--g) * 9 * var(--fz, 1)); text-shadow: none; opacity: .9; }
.gcs-count { flex: none; min-width: calc(var(--g) * 10); height: calc(var(--g) * 10); padding: 0 calc(var(--g) * 2); border-radius: calc(var(--g) * 5); background: #e03030; color: #fff;
  font-weight: inherit; font-size: calc(var(--g) * 8 * var(--fz, 1)); line-height: calc(var(--g) * 10); text-align: center; text-shadow: none; box-shadow: inset 0 0 0 var(--g) #f89090; }
:root.bw .worldstart .gcs .gcs-item.close { color: var(--gui-soft) !important; }
.gcs-foot { display: flex; gap: calc(var(--g) * 8); justify-content: center; padding: calc(var(--g) * 2) calc(var(--g) * 6) calc(var(--g) * 4); border-top: var(--g) solid color-mix(in srgb, var(--gui-soft) 40%, transparent);
  margin: 0 calc(var(--g) * 4); color: var(--gui-soft); font-size: calc(var(--g) * 8 * var(--fz, 1)); line-height: calc(var(--g) * 10); white-space: nowrap; }
.gcs-foot b { font-weight: inherit; color: var(--gui-accent); }
/* On the White theme the words are dark: a light shadow under them instead. */
:root.bw[data-theme="white"] .worldstart .gcs .gcs-item, :root.bw[data-theme="white"]:is([data-frame="if"], [data-frame="uranium"]) .worldmenu button { text-shadow: var(--u) var(--u) 0 rgba(255, 255, 255, .85) !important; }
:root.bw[data-theme="white"] .gcs-top { text-shadow: var(--u) var(--u) 0 rgba(255, 255, 255, .6); }

/* ================= THE TEXT BOX (town.js talk) and its frames (pixel.js GUI_FRAMES) ================= */
/* Infinite Fusion's white box: dark grey words with a soft light shadow, room round them. */
:root.bw[data-frame="if"] .worldtext, :root.bw[data-frame="if"] .worldtext .txt { color: #404048 !important; text-shadow: var(--fp) 0 0 #d0d0d8, 0 var(--fp) 0 #d0d0d8, var(--fp) var(--fp) 0 #d0d0d8 !important; }
:root.bw[data-frame="if"] .worldtext, :root.bw[data-frame="uranium"] .worldtext { padding: calc(var(--fp) * 1) calc(var(--fp) * 6) !important; filter: drop-shadow(0 var(--fp) calc(var(--fp) * 2) rgba(0, 0, 0, .3)); }
/* A dark box (Uranium's): white words with a dark shadow. */
:root.bw[data-box="dark"] .worldtext, :root.bw[data-box="dark"] .worldtext .txt { color: #f8f8f8 !important; text-shadow: var(--fp) 0 0 #202028, 0 var(--fp) 0 #202028, var(--fp) var(--fp) 0 #202028 !important; }
:root.bw[data-box="dark"] .worldtext .more { color: #f8f8f8; }
/* The story's own boxes (story.js) use the same frame: on a dark one, light words there too. */
:root[data-box="dark"] .storystage :is(.ssproftext, .ssdtext) { color: #f8f8f8; text-shadow: calc(var(--k) * .6) calc(var(--k) * .6) 0 #202028; }

/* A choice (town.js menu) with Infinite Fusion's or Uranium's box: Infinite Fusion's dark list, the ▶ beside the one you're on. */
:root.bw:is([data-frame="if"], [data-frame="uranium"]) .worldmenu {
  border: var(--fp) solid #08080c !important; border-image: none !important; border-radius: calc(var(--fp) * 4) !important;
  background: color-mix(in srgb, var(--gui-panel) 90%, transparent) !important; box-shadow: inset 0 0 0 var(--fp) var(--gui-soft), 0 calc(var(--fp) * 3) calc(var(--fp) * 10) rgba(0, 0, 0, .4) !important;
  padding: calc(var(--fp) * 3) calc(var(--fp) * 8) calc(var(--fp) * 3) calc(var(--fp) * 16) !important; gap: 0 calc(var(--fp) * 12) !important;
}
:root.bw:is([data-frame="if"], [data-frame="uranium"]) .worldmenu button {
  min-width: calc(var(--fp) * 56); text-align: left; padding: 0 calc(var(--fp) * 4) !important; height: calc(var(--fp) * 15); min-height: 0 !important;
  background: none !important; box-shadow: none !important; clip-path: none; border-radius: calc(var(--fp) * 2); position: relative; display: flex; align-items: center;
  color: var(--gui-ink) !important; text-shadow: var(--fp) 0 0 rgba(0, 0, 0, .55), 0 var(--fp) 0 rgba(0, 0, 0, .55), var(--fp) var(--fp) 0 rgba(0, 0, 0, .55) !important;
}
:root.bw:is([data-frame="if"], [data-frame="uranium"]) .worldmenu button.on::before { content: ""; position: absolute; left: calc(var(--fp) * -10); top: 50%; width: calc(var(--fp) * 5); height: calc(var(--fp) * 9); margin-top: calc(var(--fp) * -4.5);
  border: 0; background: var(--gui-cursor); clip-path: polygon(0 0, 100% 50%, 0 100%); }
:root.bw:is([data-frame="if"], [data-frame="uranium"]) .worldmenu button:hover { background: rgba(255, 255, 255, .1) !important; }
:root.bw:is([data-frame="if"], [data-frame="uranium"]) .worldmenu button.off { color: color-mix(in srgb, var(--gui-ink) 45%, transparent) !important; }
/* Every frame: a choice's words never wrap; a long one shrinks to fit (fitNames). */
:root.bw .worldmenu button { white-space: nowrap; max-width: calc(var(--fp) * 150); }
:root.bw .worldmenu button > .fitname { display: block; min-width: 0; overflow: hidden; }
:root.bw .worldmenu button:focus-visible { outline: none; }

/* ================= THE PLACE SIGN (town.js showPlace): HeartGold and SoulSilver's ================= */
/* A sign that slides down at the top left: a patterned frame (leaves on a route, wood in a town, stone inside …),
   a dark panel, white words, and a little ornament at its right end. In game pixels (--u). */
:root.bw .worldplace[data-sign] {
  --g: var(--u, 2px);
  left: calc(var(--g) * 4) !important; top: calc(var(--g) * 4) !important; display: flex; align-items: center; min-width: calc(var(--g) * 112); height: calc(var(--g) * 24);
  padding: 0 calc(var(--g) * 16) 0 calc(var(--g) * 8) !important; box-sizing: border-box; border: calc(var(--g) * 3) solid transparent; border-radius: calc(var(--g) * 5) !important;
  background: linear-gradient(var(--sp), var(--sp)) padding-box, repeating-linear-gradient(45deg, var(--sa) 0 calc(var(--g) * 2), var(--sb) calc(var(--g) * 2) calc(var(--g) * 4)) border-box !important;
  box-shadow: 0 0 0 var(--g) var(--sd), inset 0 0 0 var(--g) var(--sd), 0 calc(var(--g) * 2) calc(var(--g) * 6) rgba(0, 0, 0, .35) !important;
  color: #f8f8f8 !important; font: var(--fw, 400) calc(var(--g) * 13 * var(--fz, 1)) / 1 var(--bwfont, "DotGothic16"), system-ui, sans-serif !important; white-space: nowrap; letter-spacing: 0;
  text-shadow: var(--g) 0 0 var(--sd), 0 var(--g) 0 var(--sd), var(--g) var(--g) 0 var(--sd) !important;
  transform: translateY(calc(-100% - var(--g) * 12)); animation: none;
}
:root.bw .worldplace[data-sign]::after { content: ""; position: absolute; right: calc(var(--g) * 3); top: 50%; width: calc(var(--g) * 9); height: calc(var(--g) * 6); margin-top: calc(var(--g) * -3);
  background: radial-gradient(circle at 30% 50%, var(--so) 0 calc(var(--g) * 2), transparent calc(var(--g) * 2.2)), radial-gradient(circle at 75% 40%, var(--so) 0 calc(var(--g) * 2), transparent calc(var(--g) * 2.2)); }
:root.bw .worldplace[data-sign].show { animation: gcpin 2.8s ease both; }
@keyframes gcpin { 0% { transform: translateY(calc(-100% - var(--g) * 12)); } 12%, 84% { transform: none; } 100% { transform: translateY(calc(-100% - var(--g) * 12)); } }
:root[data-motion="calm"].bw .worldplace[data-sign].show { animation: gcpincalm 2.8s steps(1) both; }
@keyframes gcpincalm { 0% { transform: none; } 100% { transform: translateY(calc(-100% - var(--g) * 12)); } }
.worldscreen:has(.worldstart:not([hidden])) .worldplace[data-sign] { transform: none !important; animation: none !important; }
/* --sa, --sb: the frame's two stripes; --sp: the panel; --sd: the dark edge and the words' shadow; --so: the ornament. */
:root.bw .worldplace[data-sign="leaf"] { --sa: #68b850; --sb: #3c8c38; --sp: #2a6a30; --sd: #0c2810; --so: #e83838; }
:root.bw .worldplace[data-sign="wood"] { --sa: #d09858; --sb: #a86c34; --sp: #6c4020; --sd: #2a1408; --so: #f0d070; }
:root.bw .worldplace[data-sign="stone"] { --sa: #b0b0ba; --sb: #84848e; --sp: #44444e; --sd: #18181e; --so: #d0d0d8; }
:root.bw .worldplace[data-sign="water"] { --sa: #78b8f8; --sb: #4880d8; --sp: #1c4884; --sd: #081c40; --so: #f8f8f8; }
:root.bw .worldplace[data-sign="snow"] { --sa: #f0f6fc; --sb: #c4d4e4; --sp: #4a6890; --sd: #142640; --so: #88d0f8; }
:root.bw .worldplace[data-sign="sand"] { --sa: #f0d088; --sb: #c8a050; --sp: #8a6428; --sd: #301e08; --so: #e86030; }

/* ================= THE COLOUR THEMES on the screens that were already there ================= */
/* (Black is the game's own: nothing here changes it.) The tabs down a screen's left side, and a header's words. */
:root.bw:not([data-theme="black"]) .ds .dstab { background: var(--gui-panel) !important; box-shadow: inset 0 0 0 var(--k) var(--gui-edge) !important; color: var(--gui-soft) !important; text-shadow: none !important; }
:root.bw:not([data-theme="black"]) .ds .dstab:hover, :root.bw:not([data-theme="black"]) .ds .dstab:focus-visible { background: var(--gui-panel2) !important; color: var(--gui-ink) !important; }
:root.bw:not([data-theme="black"]) .ds .dstab.on { background: var(--gui-hi) !important; box-shadow: inset 0 0 0 var(--k) var(--gui-hi-edge) !important; color: var(--gui-hi-ink) !important; }
:root.bw:not([data-theme="black"]) .ds.zb .zb-title { color: var(--gui-head-ink); text-shadow: var(--k) var(--k) 0 color-mix(in srgb, var(--gui-head) 70%, #000); }
:root.bw[data-theme="white"] .ds.zb .zb-title { text-shadow: var(--k) var(--k) 0 #ffffff; }
:root.bw:not([data-theme="black"]) .ds.zb .zb-thint { color: color-mix(in srgb, var(--gui-head-ink) 70%, transparent); }
:root.bw:not([data-theme="black"]) .ds.zb .zb-ch { color: color-mix(in srgb, var(--gui-ink) 62%, var(--gui-row)) !important; text-shadow: var(--k) var(--k) 0 color-mix(in srgb, var(--gui-row) 50%, #000) !important; }
:root.bw:not([data-theme="black"]) .ds.zb .zb-ch[aria-pressed="true"] { color: var(--gui-accent) !important; }
:root.bw:not([data-theme="black"]) .ds.zb .zb-ch:is(:hover, :focus-visible) { color: var(--gui-ink) !important; }
:root.bw:not([data-theme="black"]) .ds.zb .zb-ol { color: var(--gui-accent); }
/* Options' words on a light theme's rows. */
:root.bw[data-theme="white"] .ds.zb-opt :is(.zb-ch, .zb-ol, .zb-ohint) { text-shadow: none !important; }
:root.bw[data-theme="white"] .ds.zb-opt .zb-ch { color: #e8eaf2 !important; }
:root.bw[data-theme="white"] .ds.zb-opt .zb-ch[aria-pressed="true"] { color: #ffffff !important; text-shadow: var(--k) var(--k) 0 #1850a0 !important; }
:root.bw[data-theme="white"] .ds.zb-opt .zb-ohint { color: #303038; }
/* The cursor's frame on buttons with no drawn picture follows the theme too. */
:root.bw:not([data-theme="black"]) .ds.zb button:not([data-zart]):focus-visible { outline-color: var(--gui-cursor); }

/* ================= OPTIONS: TEXT BOX and THEME (ds-b.js settings) ================= */
:root.bw .ds.zb .zb-orow.frames .zb-ochs, :root.bw .ds.zb .zb-orow.themes .zb-ochs { left: calc(var(--k) * 10); right: calc(var(--k) * 8); gap: calc(var(--k) * 4); }
:root.bw .ds.zb .zb-frame2, :root.bw .ds.zb .zb-theme { flex: 1 1 0; gap: calc(var(--k) * 3); font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; }
:root.bw .ds.zb .zb-frame2 > i, :root.bw .ds.zb .zb-theme > i { display: none; }
:root.bw .ds.zb .zb-frame2 > i.zb-fsw, :root.bw .ds.zb .zb-theme > i.zb-tsw { display: block; flex: none; }
/* A frame's little box: its picture as the edge, at half the text box's size. */
:root.bw .ds.zb .zb-ch > i.zb-fsw { width: calc(var(--k) * 20); height: calc(var(--k) * 13); box-sizing: border-box; border-style: solid; border-width: calc(var(--k) * 4); border-image: var(--fr) 16 fill / calc(var(--k) * 4) stretch; image-rendering: pixelated; background: none !important; }
:root.bw .ds.zb .zb-ch > i.zb-fsw.bw { border: 0; border-image: none; background: #f8f8f8 !important; box-shadow: inset 0 0 0 var(--k) #505058, inset 0 0 0 calc(var(--k) * 2) #f8f8f8, inset 0 0 0 calc(var(--k) * 3) #c8c8d0; }
/* A theme's swatch: its header colour over its panel, its cursor at the side. */
:root.bw .ds.zb .zb-ch > i.zb-tsw { width: calc(var(--k) * 20); height: calc(var(--k) * 13); background: linear-gradient(var(--a) 0 45%, var(--b) 45%) !important; box-shadow: inset 0 0 0 var(--k) #000, inset calc(var(--k) * -5) 0 0 0 var(--c), inset 0 0 0 calc(var(--k) * 2) var(--d); }
:root.bw .ds.zb .zb-ch:is(.zb-frame2, .zb-theme)[aria-pressed="true"] > i { outline: var(--k) solid var(--gui-accent); outline-offset: var(--k); }
/* The preview: a line in the frame that's on, as people will talk. */
:root.bw .ds.zb .zb-orow.zb-fprev { left: 0; width: calc(var(--k) * 256); height: calc(var(--k) * 22); }
:root.bw .ds.zb .zb-fbox { position: absolute; left: calc(var(--k) * 12); right: calc(var(--k) * 12); top: 0; height: calc(var(--k) * 22); box-sizing: border-box; display: flex; align-items: center;
  padding: 0 calc(var(--k) * 4); border-style: solid; border-width: calc(var(--k) * 3); border-image: var(--pxf-text); border-image-width: calc(var(--k) * 3);
  color: #505050; text-shadow: var(--k) var(--k) 0 #c8c8d0; font-size: calc(var(--k) * 9 * var(--fz, 1)) !important; line-height: 1 !important; white-space: nowrap; overflow: hidden; }
:root.bw[data-frame] .ds.zb .zb-fbox { border-width: calc(var(--k) * 6); border-image: var(--gframe) 16 fill / calc(var(--k) * 6) stretch; padding: 0 calc(var(--k) * 2); }
:root.bw[data-frame="if"] .ds.zb .zb-fbox { color: #404048; text-shadow: var(--k) var(--k) 0 #d0d0d8; }
:root.bw[data-box="dark"] .ds.zb .zb-fbox { color: #f8f8f8; text-shadow: var(--k) var(--k) 0 #202028; }

/* ================= THE TRAINER CARD (ds-b.js home): Black 2 and White 2's ================= */
/* The card's colours come from its stars (DSB.CARD, as --c-*). Every size in game pixels (--k). */
:root.bw .ds.zb-tc .gcc-title { left: calc(var(--k) * 8); top: calc(var(--k) * 5); height: calc(var(--k) * 13); display: flex; align-items: center; gap: calc(var(--k) * 4); padding: 0 calc(var(--k) * 6);
  background: var(--c-bar); border-radius: calc(var(--k) * 7); box-shadow: inset 0 0 0 var(--k) var(--c-ring), 0 0 0 var(--k) var(--c-dark);
  color: #f8f8f8; 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 var(--c-dark); white-space: nowrap; }
:root.bw .ds.zb-tc .gcc-title i { font-style: normal; color: var(--c-ring); letter-spacing: 0; }
:root.bw .ds.zb-tc.p0 .zb-new, :root.bw .ds.zb-tc.p1 .zb-new { top: calc(var(--k) * 4); right: calc(var(--k) * 8); height: calc(var(--k) * 13); line-height: calc(var(--k) * 13) !important; border-radius: calc(var(--k) * 2) !important; }
/* A line of writing: a light top edge, a mark at its left end (yellow on the first), the label, the value on the right. */
:root.bw .ds.zb-tc .gcc-row { position: relative; min-width: 0; overflow: hidden; height: calc(var(--k) * 13); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--k) * 4); padding: 0 calc(var(--k) * 4) 0 calc(var(--k) * 9);
  background: linear-gradient(var(--c-rowhi) 0 var(--k), var(--c-row) var(--k)); border-radius: 0 calc(var(--k) * 2) calc(var(--k) * 2) 0;
  color: #f8f8f8; text-shadow: var(--k) var(--k) 0 var(--c-dark); font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; line-height: 1 !important; white-space: nowrap; }
:root.bw .ds.zb-tc .gcc-row::before { content: "" !important; position: absolute; left: calc(var(--k) * 2); top: calc(var(--k) * 3); bottom: calc(var(--k) * 2); width: calc(var(--k) * 3); background: var(--c-bar); }
:root.bw .ds.zb-tc .gcc-row.hi::before { background: #f8c830; }
:root.bw .ds.zb-tc .gcc-row > span { flex: none; color: color-mix(in srgb, #ffffff 82%, var(--c-row)); }
:root.bw .ds.zb-tc .gcc-row > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-align: right; }
:root.bw .ds.zb-tc .gcc-row small { color: color-mix(in srgb, #ffffff 75%, var(--c-row)); }
:root.bw .ds.zb-tc .gcc-left { left: calc(var(--k) * 8); top: calc(var(--k) * 22); width: calc(var(--k) * 152); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--k) * 1); }
:root.bw .ds.zb-tc .gcc-photo { left: calc(var(--k) * 166); top: calc(var(--k) * 18); width: calc(var(--k) * 80); height: calc(var(--k) * 80); }
:root.bw .ds.zb-tc .gcc-photo canvas { display: block; width: calc(var(--k) * 80); height: calc(var(--k) * 80); image-rendering: pixelated; border: 0; border-radius: 0; background: none; box-shadow: none; }
:root.bw .ds.zb-tc .gcc-stars { left: calc(var(--k) * 168); top: calc(var(--k) * 20); width: calc(var(--k) * 76); text-align: right; letter-spacing: 0 !important; font-size: calc(var(--k) * 10 * var(--fz, 1)) !important; text-shadow: var(--k) var(--k) 0 var(--c-dark); }
:root.bw .ds.zb-tc .gcc-stars small { color: color-mix(in srgb, #ffffff 70%, var(--c-body)); font-size: calc(var(--k) * 7 * var(--fz, 1)) !important; letter-spacing: 0; }
:root.bw .ds.zb-tc .gcc-wide { left: calc(var(--k) * 8); top: calc(var(--k) * 101); width: calc(var(--k) * 238); }
:root.bw .ds.zb-tc .gcc-half { top: calc(var(--k) * 116); width: calc(var(--k) * 117); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--k) * 1); }
:root.bw .ds.zb-tc .gcc-half.l { left: calc(var(--k) * 8); } :root.bw .ds.zb-tc .gcc-half.r { left: calc(var(--k) * 129); }
:root.bw .ds.zb-tc .gcc-badges { left: calc(var(--k) * 10); top: calc(var(--k) * 146); }
:root.bw .ds.zb-tc .gcc-badges span { text-shadow: var(--k) var(--k) 0 var(--c-dark); }
/* MORE: your name and number under the title, then the same lines of writing. */
:root.bw .ds.zb-tc.p1 .zb-band { top: calc(var(--k) * 22); text-shadow: var(--k) var(--k) 0 var(--c-dark); }
:root.bw .ds.zb-tc.p1 .zb-tcrows { top: calc(var(--k) * 38); box-shadow: none; display: grid; gap: calc(var(--k) * 1); }
:root.bw .ds.zb-tc.p1 .zb-tcrows > div { position: relative; height: calc(var(--k) * 14); padding: 0 calc(var(--k) * 4) 0 calc(var(--k) * 9); background: linear-gradient(var(--c-rowhi) 0 var(--k), var(--c-row) var(--k)); box-shadow: none; color: #f8f8f8; text-shadow: var(--k) var(--k) 0 var(--c-dark); }
:root.bw .ds.zb-tc.p1 .zb-tcrows > div::before { content: "" !important; position: absolute; left: calc(var(--k) * 2); top: calc(var(--k) * 3); bottom: calc(var(--k) * 2); width: calc(var(--k) * 3); background: var(--c-bar); }
:root.bw .ds.zb-tc.p1 .zb-tcrows > div > span { color: color-mix(in srgb, #ffffff 82%, var(--c-row)); text-shadow: var(--k) var(--k) 0 var(--c-dark); }
:root.bw .ds.zb-tc.p1 .zb-tcrows small { color: color-mix(in srgb, #ffffff 75%, var(--c-row)); }
:root.bw .ds.zb-tc.p1 .zb-plabel { top: calc(var(--k) * 92); text-shadow: var(--k) var(--k) 0 var(--c-dark); }
:root.bw .ds.zb-tc.p1 .zb-party { top: calc(var(--k) * 104); }