/* Window styles
   Every window, menu, dialog and button wears our own pixel frame (ui/pixframe.js draws the pieces) in one of three
   materials: Night (the default), Day, High contrast. <html class="win-<id> pf"> (ui/theme.js); pixframe.js puts the
   material's pieces on <html> as --pf-<piece> (border-image sources) and its colours as --pf-c-<role>.
   --pf is one art pixel in the element's own CSS px (whole device pixels; inside a zoomed window it divides the zoom out).
   No corner radius, gradient, blur or glass inside a window: stepped corners, flat ramps, hard 1-px shadows.
   Every stylesheet writes its window colours as tokens with a fallback (var(--bg-1, #0c1240)): the frame sets the tokens
   on every window (only there: text drawn on the map, the floor title card and the banners keep their colours). The ROM
   UI (F9) sets no class: the sheets' own colours under its own frames.
   Pieces and their slices (art px): win 6 · hud 2 3 3 2 · btn / btnOn / go / tile / tileSel 3 · key / keyOn / well / field
   / row / plate 2 · tab / tabOn 2 2 0 2. The key rules use :where() lists and !important on what makes the shape, so a
   feature sheet's own colours never undo a key, and the states below (picked, primary, tab strips) still outrank them.
   This sheet loads last (index.html). */
html.pf, html.pf * { --pf: calc(var(--pfu, 3px) / var(--pxz, 1)); }

/* The window: outline, rim, inner line, panel, drop
   The corners keep a small radius under the frame only for the modal dim (a box-shadow follows it, so the stepped corners
   are dimmed too); a border image never follows border-radius. */
html.pf :is(.window, .tcard) {
  border-style: solid !important; border-color: transparent !important; border-width: calc(6 * var(--pf)) !important; border-radius: calc(3 * var(--pf)) !important;
  border-image: var(--pf-win) 6 fill / calc(6 * var(--pf)) repeat !important;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  image-rendering: pixelated; color: var(--pf-c-ink);
  --win-a: var(--pf-c-fill); --win-b: var(--pf-c-fill); --hud-a: var(--pf-c-fill); --hud-b: var(--pf-c-fill);
  --win-border: var(--pf-c-line); --rim-rgb: var(--pf-c-faintRgb); --rim-hi: var(--pf-c-line); --hl-rgb: var(--pf-c-hl);
  --bg-0: var(--pf-c-bg0); --bg-1: var(--pf-c-bg1); --bg-2: var(--pf-c-bg2); --bg-3: var(--pf-c-bg3);
  --slot: var(--pf-c-btn); --slot-line: var(--pf-c-line);
  --ink: var(--pf-c-ink); --dim: var(--pf-c-dim); --gold: var(--pf-c-title);
  --tx-hi: var(--pf-c-ink); --tx-dim: var(--pf-c-dim); --tx-faint: var(--pf-c-faint);
  --tx-gold: var(--pf-c-gold); --tx-good: var(--pf-c-good); --tx-info: var(--pf-c-info); --tx-pink: var(--pf-c-pink); --tx-bad: var(--pf-c-bad);
  --acc-1: var(--pf-c-on); --acc-2: var(--pf-c-on); --on-acc: var(--pf-c-onInk); --bg-x: var(--pf-c-btn); --sil: var(--pf-c-sil);
  --win-bw: 0px; --win-r: 0px; --win-shadow: 0 0 #0000;
}
html.pf .tcard { box-shadow: none !important; }
html.pf .tcard::before { content: none; }
/* the HUD's small windows (money, zone bar, round buttons, log, action bar, trackers, tooltip, prompt): a plate, one
   bevel ring and the drop */
html.pf :is(#hud-coins, #zonebar, .hic, #objective, #jobtrack, #logbox, #actionbar, #prompt, #tooltip, #mm-legend, .t-fan, .rs-tick, #party) {
  border-width: calc(2 * var(--pf)) calc(3 * var(--pf)) calc(3 * var(--pf)) calc(2 * var(--pf)) !important;
  border-image: var(--pf-hud) 2 3 3 2 fill / calc(2 * var(--pf)) calc(3 * var(--pf)) calc(3 * var(--pf)) calc(2 * var(--pf)) !important;
  border-radius: calc(2 * var(--pf)) !important;
}
/* the buttons beside the minimap: a black face like the minimap's body */
html.pf #hud-icons > .hic { border-image-source: var(--pf-dark) !important; }
html.pf .t-sys .touch-btn .tc { background: #000; border-color: var(--pf-c-rimHi); color: #fff; }
html.pf .t-sys .touch-btn { background: #000 !important; border-color: var(--pf-c-rimHi) !important; box-shadow: 0 0 0 2px #000, 0 3px 0 2px rgba(0, 0, 0, 0.55) !important; }
/* the log is a plate only while it is in use: idle or closed it is its lines over the map */
html.pf #logbox:is(.closed, :not(.active):not(.expanded):not(:focus-within):not(:hover)) { border-image: none !important; }

/* Inside every window: square corners, no glass, pixel scrollbars, a square one-pixel focus ring, the rules engraved */
html.pf :is(.window, .tcard) *:not(.hring) { border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.pf :is(.window, .tcard) :focus-visible { outline: var(--pf) solid var(--pf-c-focus) !important; outline-offset: var(--pf) !important; }
html.pf :is(.window, .tcard) ::-webkit-scrollbar { width: calc(4 * var(--pf)); height: calc(4 * var(--pf)); }
html.pf :is(.window, .tcard) ::-webkit-scrollbar-track { background: var(--pf-c-well); border-radius: 0; box-shadow: inset var(--pf) var(--pf) 0 var(--pf-c-wellLo); }
html.pf :is(.window, .tcard) ::-webkit-scrollbar-thumb { background: var(--pf-c-btn); border: var(--pf) solid var(--pf-c-line); border-radius: 0; box-shadow: none; }
@supports not selector(::-webkit-scrollbar) { html.pf :is(.window, .tcard) * { scrollbar-color: var(--pf-c-btn) var(--pf-c-well); } }
html.pf .window .win-head { border-bottom: var(--pf) solid var(--pf-c-line); box-shadow: 0 var(--pf) 0 var(--pf-c-groove); margin-bottom: calc(4 * var(--pf)); }
html.pf .window :is(.win-foot, .mkeys) { border-top: var(--pf) solid var(--pf-c-line); box-shadow: inset 0 var(--pf) 0 var(--pf-c-groove); }

/* Keys: every button of the windows (tools/checks/button-audit.mjs lists them; a new button class goes here). Raised, with
   a lip at the bottom */
html.pf :where(
  .sbtn, .shop-btn, .tgo, .tback, .tchip, .ttab, .tc-back, .nbtns button, #sos button, .jback, .jgo, .jr-next, .jreplay,
  .jw-tab, .jw-track, .jw-btn, .jw-replay, .jw-back, .sn-btns button, .lok, .ord-chip, .ord-lead,
  .dxseg button, .dxmore, .dxanims button, .dxev, .dxback, .pt-fav, .pt-fold, .pt-sos, .pt-sort, .kp-select, #quiz .qname button,
  #quiz .qshow button, #quiz .qbtns button, .snt-ask button, .snt-choices button, .ctab, .sw-tab, .sw-chip, .sw-fold, .tw-sort, .tw-btn,
  .tw-iqt, .se-go, .se-role, .pepisodes, #cutscene .cs-ok, #cutscene .cs-confirm button,
  .tc-foot button, .qb, .qtab, .dxshinybtn, .win-tab, .win-btn, .win-back, .pf-keycap,
  .win-x, .pmd-menu .mclose, .bp-x, .set-x, .help-x, .sw-x, .jclose, .dxclose, .jb-close, .shop-x, .lclose, .tw-x, .snt-close
) {
  border-style: solid !important; border-color: transparent !important; border-width: calc(3 * var(--pf)) !important;
  border-image: var(--pf-btn) 3 fill / calc(3 * var(--pf)) !important;
  background: none !important; box-shadow: none !important; text-shadow: none !important; filter: none; transform: none;
  color: var(--pf-c-btnInk) !important; --tx-hi: var(--pf-c-btnInk); --tx-dim: var(--pf-c-btnInk); --tx-gold: var(--pf-c-btnInk); --on-acc: var(--pf-c-btnInk);
}
/* small keys (key caps, steppers, tiny crosses): one ring */
html.pf :where(.keycap, .qk, .sx, .ord-x, .ord-arr, .bk-step, .dstep, #logbox .loghead button, .ob-fold) {
  border-style: solid !important; border-color: transparent !important; border-width: calc(2 * var(--pf)) !important;
  border-image: var(--pf-key) 2 fill / calc(2 * var(--pf)) !important;
  background: none !important; box-shadow: none !important; text-shadow: none !important;
  color: var(--pf-c-btnInk) !important; --tx-hi: var(--pf-c-btnInk); --tx-dim: var(--pf-c-btnInk); --tx-gold: var(--pf-c-btnInk);
}
html.pf :where(.keycap, .qk, .sx, .ord-x, .ord-arr, .bk-step, .dstep, #logbox .loghead button):is(.on, .sel, .cap, :active) { border-image-source: var(--pf-keyOn) !important; color: var(--pf-c-onInk) !important; --tx-hi: var(--pf-c-onInk); }
html.pf :where(.sbtn, .shop-btn, .tback, .tchip, .tc-back, .jw-btn, .tw-btn, .win-btn, .win-back, .win-x, .mclose, .tc-foot button, .pf-keycap, .dxmore, .qb):hover:not(:disabled) { filter: brightness(1.06); }
/* picked (a toggle that is on, the open tab of a row of keys) and held down: sunk in, the accent */
html.pf :where(
  .sbtn, .shop-btn, .tchip, .ttab, .jw-tab, .jw-track, .dxseg button, .dxanims button, .ctab, .sw-tab, .sw-chip,
  .tw-sort, .tw-btn, .snt-choices button, .se-role, .ord-chip, .qtab, .dxshinybtn, .win-tab, .win-btn
):is(.on, .sel, .right, [aria-selected="true"], [aria-pressed="true"]),
html.pf :where(.sbtn, .shop-btn, .tback, .tchip, .tc-back, .jw-btn, .tw-btn, .win-btn, .win-back, .win-x, .mclose, .tc-foot button, .pf-keycap, .qb, .jback, .jw-back, .dxback):active {
  border-image-source: var(--pf-btnOn) !important; color: var(--pf-c-onInk) !important;
  --tx-hi: var(--pf-c-onInk); --tx-dim: var(--pf-c-onInk); --tx-gold: var(--pf-c-onInk); --on-acc: var(--pf-c-onInk);
}
/* the primary (go, confirm, yes): the accent, raised */
html.pf :where(.tgo:not(.tdanger), .jgo.go, .jr-next, .sbtn.go, .shop-btn.ok, .se-go, .lok, .pt-sos, #quiz .qbtns .ok, .sn-btns .sn-ok, #cutscene .cs-ok, .nbtns .yes, .qb.ok, .win-btn.go):not(#pf-x) {
  border-image-source: var(--pf-go) !important; color: var(--pf-c-onInk) !important; font-weight: 600;
  --tx-hi: var(--pf-c-onInk); --tx-dim: var(--pf-c-onInk); --tx-gold: var(--pf-c-onInk); --on-acc: var(--pf-c-onInk);
}
html.pf :where(.tgo, .jgo.go, .sbtn.go, .shop-btn.ok, .win-btn.go, .nbtns .yes):active:not(#pf-x) { border-image-source: var(--pf-btnOn) !important; }
/* leave, give up, decline, sell everything: the danger ink */
html.pf :where(.nbtns .no, #sos button, .tgo.tdanger, .shop-btn.leave, .shop-btn.warn, .shop-btn.switch, .win-btn.bad):not(#pf-x) { --bad-key: color-mix(in srgb, var(--pf-c-bad) 60%, var(--pf-c-btnInk)); color: var(--bad-key) !important; --tx-hi: var(--bad-key); --tx-dim: var(--bad-key); }
/* the labels the code writes inside a key (ui.js T() spans, figures) take the key's ink */
html.pf :where(.sbtn, .shop-btn, .tgo, .ttab, .jw-tab, .jw-track, .sw-tab, .sw-chip, .ctab, .tw-btn, .nbtns button, #sos button, .win-tab, .win-btn) :is(.t, .num) { color: inherit !important; }
html.pf :is(.win-btn, .shop-btn, .sbtn):disabled, html.pf :is(.win-btn, .shop-btn).dis { opacity: 0.5; }

/* Tab strips: the tabs stand on a 1-px line, the open one is the panel itself (it covers the line and runs into the
   window); a rail of tabs (Settings) stays a column of keys */
html.pf :is(.win-tabs:not(.rail), .tc-tabs) {
  display: flex; align-items: flex-end; gap: var(--pf); padding-bottom: 0; -webkit-mask-image: none; mask-image: none;
  box-shadow: inset 0 calc(-1 * var(--pf)) 0 var(--pf-c-line);
}
html.pf :is(.win-tabs:not(.rail) > .win-tab, .tc-tabs > .ttab) {
  border-width: calc(2 * var(--pf)) calc(2 * var(--pf)) 0 !important;
  border-image: var(--pf-tab) 2 2 0 fill / calc(2 * var(--pf)) calc(2 * var(--pf)) 0 !important;
  margin-bottom: var(--pf); animation: none; color: var(--pf-c-tabInk) !important; --tx-hi: var(--pf-c-tabInk); --tx-dim: var(--pf-c-tabInk);
}
html.pf :is(.win-tabs:not(.rail) > .win-tab.on, .tc-tabs > .ttab[aria-selected="true"]) {
  border-image-source: var(--pf-tabOn) !important; margin-bottom: 0; padding-bottom: var(--pf); color: var(--pf-c-ink) !important; --tx-hi: var(--pf-c-ink); --tx-dim: var(--pf-c-ink);
}
html.pf .win-tabs:not(.rail) > .win-tab:hover:not(.on) { filter: brightness(1.06); }
html.pf .win-n { background: none !important; padding: 0 0 0 var(--pf); color: inherit !important; line-height: 0; }
/* the stepped fade on a strip that scrolls: two bands, no gradient */
html.pf .win-tabs:not(.rail).more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(100% - 6 * var(--pf)), transparent 0); mask-image: linear-gradient(90deg, #000 calc(100% - 12 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(100% - 6 * var(--pf)), transparent 0); }
html.pf .win-tabs:not(.rail).more-l { -webkit-mask-image: linear-gradient(90deg, transparent calc(6 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(12 * var(--pf)), #000 0); mask-image: linear-gradient(90deg, transparent calc(6 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(12 * var(--pf)), #000 0); }
html.pf .win-tabs:not(.rail).more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent calc(6 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(12 * var(--pf)), #000 0 calc(100% - 12 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(100% - 6 * var(--pf)), transparent 0); mask-image: linear-gradient(90deg, transparent calc(6 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(12 * var(--pf)), #000 0 calc(100% - 12 * var(--pf)), rgba(0, 0, 0, 0.5) 0 calc(100% - 6 * var(--pf)), transparent 0); }

/* Sunken panels: lists, details, portraits, chips */
html.pf :where(.win-chip, .win-face, .mpage, .shop-list, .shop-detail, .shop-say, .tperks, .tcard .tmsg, #dialog .dportrait img, .lb-ico, .le-ico, .le-card, .gf-box, .gf-row, .rc-face, .rc-pips) {
  border-style: solid !important; border-color: transparent !important; border-width: calc(2 * var(--pf)) !important;
  border-image: var(--pf-well) 2 fill / calc(2 * var(--pf)) !important; background: none !important; box-shadow: none !important;
}
html.pf .win-chip { color: var(--pf-c-dim); }
html.pf .win-chip b { color: var(--pf-c-ink); line-height: 0; }
/* text fields and pickers: sunk in, a darker (Night) or lighter (Day) face; a slider: a sunken track and a key */
html.pf :is(.window, .tcard) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), textarea, select),
html.pf :where(.kp-search, .msearch) {
  border-style: solid !important; border-color: transparent !important; border-width: calc(2 * var(--pf)) !important;
  border-image: var(--pf-field) 2 fill / calc(2 * var(--pf)) !important; background: none !important; box-shadow: none !important;
  color: var(--pf-c-ink); caret-color: var(--pf-c-ink);
}
html.pf :where(.kp-search, .msearch) input { border: 0 !important; border-image: none !important; }
html.pf :is(.window, .tcard) :is(input, textarea)::placeholder { color: var(--pf-c-faint); }
/* a saved login the browser fills in: Chrome and Edge force their own dark text (color: FieldText !important), so the
   glyphs are painted with -webkit-text-fill-color instead; the dark materials also declare color-scheme dark, so FieldText
   is light there too */
html.pf:is(.win-night, .win-contrast) :is(.window, .tcard) :is(input, textarea, select) { color-scheme: dark; }
html.pf :is(.window, .tcard) :is(input, textarea, select):is(:autofill, :-webkit-autofill) { -webkit-text-fill-color: var(--pf-c-ink); caret-color: var(--pf-c-ink); }
html.pf :is(.window, .tcard) select option { background: var(--pf-c-field); color: var(--pf-c-ink); }
html.pf :is(.window, .tcard) input[type="range"] { -webkit-appearance: none; appearance: none; height: calc(8 * var(--pf)); background: none; accent-color: var(--pf-c-on); }
html.pf :is(.window, .tcard) input[type="range"]::-webkit-slider-runnable-track { height: calc(4 * var(--pf)); border: calc(2 * var(--pf)) solid transparent; border-image: var(--pf-well) 2 fill / calc(2 * var(--pf)); }
html.pf :is(.window, .tcard) input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: calc(6 * var(--pf)); height: calc(8 * var(--pf)); margin-top: calc(-4 * var(--pf)); border: calc(2 * var(--pf)) solid transparent; border-image: var(--pf-keyOn) 2 fill / calc(2 * var(--pf)); background: none; }

/* The cursor row: a band with stepped ends (room kept on every row, so the picked one never shifts) */
html.pf .mitem { border: calc(2 * var(--pf)) solid transparent; background: none; }
html.pf :is(.mitem.sel, .win-row.on, .tbtn:focus, .tbtn:focus-visible, .shop-row.sel) {
  background: none !important; border: calc(2 * var(--pf)) solid transparent; border-image: var(--pf-row) 2 fill / calc(2 * var(--pf)); box-shadow: none !important;
  color: var(--pf-c-rowInk) !important; --tx-hi: var(--pf-c-rowInk); --tx-dim: var(--pf-c-rowInk); --tx-gold: var(--pf-c-rowInk); --gold: var(--pf-c-rowInk); --dim: var(--pf-c-rowInk);
}
html.pf :is(.mitem.sel, .win-row.on, .tbtn:focus) :is(.t, .msub, .mlabel, .sub, .wr-s, .wr-v) { color: var(--pf-c-rowInk) !important; }
/* a key on the cursor row keeps its own ink: the row's is for the row (High contrast: black on the white row, and the
   key's face is black too) */
html.pf :is(.mitem.sel, .win-row.on, .tbtn:focus) :is(.sbtn, .shop-btn, .win-btn, .win-tab, .tgo, .ttab) :is(.t, .num) { color: inherit !important; }
html.pf .mitem .msub { color: var(--pf-c-dim); line-height: 0; }

/* Tinyfont labels (pixframe.js tinyLabels): a mask in the text colour, one font pixel = one art pixel */
html.pf .pf-t { display: inline-block; width: calc(var(--w) * var(--pf)); height: calc(var(--h) * var(--pf)); background: currentColor;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; image-rendering: pixelated; vertical-align: calc((5 - var(--h)) * var(--pf)); }
/* the pixel font (pixelText): words as masks, a space a tinyfont space wide; a rim where the host had a text shadow (four
   hard drop shadows: an 8-neighbour rim); a word tinyfont can't draw stays in --head */
html.pf .pf-sp { display: inline-block; width: calc(4 * var(--pf)); height: 1px; }
html.pf .pf-t.pf-o { filter: drop-shadow(var(--pf) 0 0 var(--o)) drop-shadow(calc(-1 * var(--pf)) 0 0 var(--o)) drop-shadow(0 var(--pf) 0 var(--o)) drop-shadow(0 calc(-1 * var(--pf)) 0 var(--o)); }
html.pf .pf-w { text-shadow: none; }
html.pf .pf-x { font-family: var(--head); }
html.pf .pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The cursor menus, the dialog box: the speaker on a plate */
html.pf .pmd-menu .mtitle { color: var(--pf-c-title); }
html.pf :is(#dialog .dname, #cutscene .cs-name) {
  align-self: flex-start; background: none !important; border: calc(2 * var(--pf)) solid transparent; border-image: var(--pf-plate) 2 fill / calc(2 * var(--pf));
  padding: var(--pf) calc(3 * var(--pf)); line-height: 0; margin-bottom: calc(3 * var(--pf));
}
html.pf #dialog :is(.dname, .dname .t), html.pf #cutscene :is(.cs-name, .cs-name span) { color: var(--pf-c-onInk) !important; }

/* The shops (keeper windows): the Buy / Sell keys, the shelf's tiles (the own count in the top corner, the icon and the
   name, the price along the bottom) */
html.pf .kp-seg { gap: var(--pf); }
html.pf .kp-seg .shop-btn { margin: 0 !important; }
html.pf :is(.window, .tcard) .gv-tile {
  border-style: solid; border-color: transparent; border-width: calc(3 * var(--pf)); border-image: var(--pf-tile) 3 fill / calc(3 * var(--pf));
  background: none; box-shadow: none; animation: none; color: var(--pf-c-btnInk);
}
html.pf :is(.window, .tcard) .gv-tile.sel { border-image-source: var(--pf-tileSel); box-shadow: none; animation: none; }
html.pf :is(.window, .tcard) .gv-tile.empty { border-image-source: var(--pf-well); border-width: calc(2 * var(--pf)); border-image-slice: 2 fill; border-image-width: calc(2 * var(--pf)); }
html.pf #shop .gv-tile { justify-content: flex-start; padding-top: calc(6 * var(--pf)); gap: var(--pf); }
html.pf .gv-tag { background: none; border-top: 0; padding: 0 calc(2 * var(--pf)) var(--pf); color: var(--pf-c-ink); line-height: 0; }
html.pf .gv-tag.no { color: var(--pf-c-bad); }
html.pf .gv-own { color: var(--pf-c-dim) !important; line-height: 0; top: var(--pf); right: calc(2 * var(--pf)); }
html.pf .gv-name { color: var(--pf-c-btnInk); }
/* quiet shops: no count bubbles on the shelf tabs, one key cap for the keys, the price on the button in the button's ink */
html.pf .shop-win .win-tab .win-n { display: none; }
html.pf :is(.shop-win, .twwin) .win-foot { position: relative; }
html.pf :is(.shop-win, .twwin) .win-foot .win-keys { display: none; }
html.pf :is(.shop-win, .twwin) .pf-keycap { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: calc(13 * var(--pf)); padding: 0 calc(2 * var(--pf)); line-height: 0; cursor: pointer; }
html.pf :is(.shop-win, .twwin) .win-foot.pf-open .win-keys, html.pf:not(.touch) :is(.shop-win, .twwin) .pf-keycap:hover + .win-keys {
  display: flex; flex-direction: column; gap: var(--pf); position: absolute; left: 0; bottom: calc(100% + 2 * var(--pf)); z-index: 4; min-width: 0; white-space: nowrap;
  padding: calc(2 * var(--pf)) calc(3 * var(--pf)); color: var(--pf-c-dim);
  border: calc(6 * var(--pf)) solid transparent; border-image: var(--pf-win) 6 fill / calc(6 * var(--pf)) repeat; image-rendering: pixelated;
}
html.pf :is(.shop-win, .twwin) .pf-kl b { color: var(--pf-c-ink); font-weight: 600; }
html.touch .pf-keycap { display: none !important; }
html.pf .shop-win .win-btn .num { color: inherit !important; font-weight: inherit !important; }

/* The title screen's card */
html.pf .tcard .tc-head { color: var(--pf-c-title); text-shadow: none; }
html.pf .tcard .tc-head::after { left: 0; right: 0; height: calc(2 * var(--pf)); background: linear-gradient(var(--pf-c-line) 50%, var(--pf-c-groove) 0); animation: none; }
html.pf .tcard .tc-star { filter: none; }
html.pf .tcard .tc-tabs { margin: calc(4 * var(--pf)) 0 0; padding: 0 calc(4 * var(--pf)); }
html.pf .tcard .ttab { flex: 1 1 0; min-height: calc(14 * var(--pf)); }
html.pf .tcard .tperk + .tperk { border-top: var(--pf) solid var(--pf-c-wellLo); }
html.pf .tcard .tperk b { color: var(--pf-c-title); }
html.pf .tcard :is(.tperk small, .tc-alt, .tfield) { color: var(--pf-c-dim); }
html.pf .tcard .tgo { font-family: var(--head); }
html.pf .tcard .tgo::after { content: none; }
html.pf .tcard .tlink { color: var(--pf-c-ink); text-decoration-color: currentColor; text-decoration-thickness: var(--pf); }
html.pf .tcard .tc-foot { background: none; border-top: var(--pf) solid var(--pf-c-line); box-shadow: inset 0 var(--pf) 0 var(--pf-c-groove); }
html.pf .tcard .tslot { border: calc(3 * var(--pf)) solid transparent; border-image: var(--pf-btn) 3 fill / calc(3 * var(--pf)); background: none; box-shadow: none; }
html.pf .tcard .tslot.primary, html.pf .tcard .tslot:is(:hover, :focus) { border-image-source: var(--pf-tileSel); }

/* Settings > Display > Window style: each card draws a small window in its material, a title line and a key */
.ws-pv { position: relative; display: block; height: calc(54px * var(--k)); box-sizing: border-box; overflow: hidden; image-rendering: pixelated; }
html.pf .ws-pv { border: 12px solid transparent !important; border-image: var(--pv) 6 fill / 12px repeat !important; }
.ws-pv::before { content: ""; position: absolute; left: 6%; top: 10%; width: 50%; height: 4px; background: var(--pv-ink); }
.ws-pv::after { content: ""; position: absolute; left: 6%; bottom: 8%; width: 44%; height: 8px; background: var(--pv-on); box-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000; }
.ws-night { --pv: var(--pf-pv-night); --pv-ink: var(--pf-pv-night-ink); --pv-on: var(--pf-pv-night-on); }
.ws-day { --pv: var(--pf-pv-day); --pv-ink: var(--pf-pv-day-ink); --pv-on: var(--pf-pv-day-on); }
.ws-contrast { --pv: var(--pf-pv-contrast); --pv-ink: var(--pf-pv-contrast-ink); --pv-on: var(--pf-pv-contrast-on); }

/* The action bar: no back panel, the moves, Attack, the quick items and the Bag stand on the map as keys; a move keeps
   its type as a stripe at its left, a linked set its gold band, the key letter sits on a gold plate */
html.pf #hud #actionbar { border-image: none !important; border-width: 0 !important; background: none !important; box-shadow: none !important; }
html.pf :is(.mslot, .aslot, .islot, #bagbtn) {
  border: calc(3 * var(--pf)) solid transparent !important; border-image: var(--pf-btn) 3 fill / calc(3 * var(--pf)) !important;
  background: none !important; box-shadow: none !important; --slot-shadow: none;
}
html.pf .mslot { box-shadow: inset calc(2 * var(--pf)) 0 0 var(--tc) !important; }
html.pf .mslot.none { box-shadow: none !important; }
html.pf .mslot:is(.lk, .lk-in) { box-shadow: inset calc(2 * var(--pf)) 0 0 var(--tc), inset 0 var(--pf) 0 #f7b707, inset 0 calc(-1 * var(--pf)) 0 #f7b707 !important; }
html.pf .islot.empty { border-image: var(--pf-well) 2 fill / calc(2 * var(--pf)) !important; border-width: calc(2 * var(--pf)) !important; }
html.pf .kc { border: calc(2 * var(--pf)) solid transparent !important; border-image: var(--pf-plate) 2 fill / calc(2 * var(--pf)) !important; background: none !important; padding: var(--pf) calc(2 * var(--pf)) !important;
  color: var(--pf-c-onInk) !important; line-height: 0; text-shadow: none !important; }
html.pf .kc :is(.t, .pf-w) { color: inherit !important; }   /* the code writes the key in gold: the plate's ink */
html.pf .veil { border-radius: 0 !important; }

/* Card grids (the Pokédex, the Mystic Portal's places, the Team's squad): tiles, the picked one with the accent ring; an
   empty or unseen one sunk in */
html.pf :is(.dxcard, .pt-card, .tw-slot, .sw-pcard) {
  border: calc(3 * var(--pf)) solid transparent !important; border-image: var(--pf-tile) 3 fill / calc(3 * var(--pf)) !important; background: none !important; box-shadow: none !important;
}
html.pf :is(.dxcard, .pt-card, .tw-slot).sel, html.pf .sw-pcard.lead { border-image-source: var(--pf-tileSel) !important; }
html.pf :is(.dxcard.unseen, .tw-slot.empty, .sw-pcard.empty) { border-width: calc(2 * var(--pf)) !important; border-image: var(--pf-well) 2 fill / calc(2 * var(--pf)) !important; }
/* the Team window's active squad: violet tiles (tileSq), a violet chip for a squad member on the roster */
html.pf .tw-board .tw-slot:not(.empty) { border-image-source: var(--pf-tileSq) !important; color: var(--pf-c-sqInk); --ink: var(--pf-c-sqInk); }
html.pf .tw-board .tw-slot:not(.empty).sel { border-image-source: var(--pf-tileSqSel) !important; }
html.pf .tw-board .tw-slot .tw-sl { color: var(--pf-c-sqInk); }
html.pf .twwin .tw-list .gv-tile:is(.you, .squad) { border-image-source: var(--pf-tileSq); color: var(--pf-c-sqInk); --ink: var(--pf-c-sqInk); --dim: var(--pf-c-sqInk); }
html.pf .twwin .tw-list .gv-tile:is(.you, .squad).sel { border-image-source: var(--pf-tileSqSel); }
html.pf .tw-bhead { color: var(--pf-c-sqText); }
html.pf .tw-chip.sq { background: var(--pf-c-sq) !important; border-color: var(--pf-c-sqHi) !important; color: var(--pf-c-sqInk) !important; }

/* Outside the windows and inside their props: flat fills, hard 1-px outlines and drops, no blur or soft glow
   (tools/checks/frame-audit.mjs lists what still has a web look). The cinematic stages (the boss card's band, the legend's
   rays, the results and treasure stages) are effects: they keep theirs. */
/* the dim behind the big windows: flat */
html.pf :is(#jobs, #episodes, #legend-hall, #sentry) { background: rgba(0, 0, 0, 0.45) !important; }

/* The touch controls: flat discs, a light rim and a black outline, a hard drop; a move keeps its type colour, Attack its
   orange, the Interact key its gold, the quick item its cream */
html.pf .touch-btn { background: #000 !important; border: 2px solid var(--pf-c-rimHi) !important; box-shadow: 0 0 0 2px #000, 0 3px 0 2px rgba(0, 0, 0, 0.55) !important; animation: none; }
html.pf .t-move { background: color-mix(in srgb, var(--tc) 62%, #000) !important; }
html.pf .t-attack { background: #c75f0f !important; border-color: #ffbf57 !important; }
html.pf .t-interact { background: #efc717 !important; border-color: #ffffaf !important; color: #3f1f0f; }
html.pf .t-item { background: #f7efbf !important; border-color: #ffffff !important; }
html.pf .t-turn.on { background: #ffd747 !important; border-color: #ffffff !important; }
html.pf .t-bag.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--pf-c-on), 0 3px 0 4px rgba(0, 0, 0, 0.55) !important; }
html.pf .touch-btn.held { filter: brightness(1.25); }
html.pf .t-stick { background: rgba(0, 0, 0, 0.3) !important; border-color: color-mix(in srgb, var(--pf-c-rimHi) 45%, transparent) !important; }
html.pf .t-knob { background: var(--pf-c-rimHi) !important; border: 2px solid #000 !important; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5) !important; }
html.pf .t-dpad { background: rgba(0, 0, 0, 0.3) !important; }
html.pf .t-dpad .t-cross { fill: rgba(0, 0, 0, 0.75); stroke: var(--pf-c-rimHi); stroke-linejoin: miter; }
html.pf :is(.touch-btn .tl, .t-move .tn) { text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 0 2px 0 #000; }
html.pf :is(.touch-btn .tc, .t-move .tp, .t-fslot .tc, .t-cap) { border-radius: 0 !important; background: #000 !important; border: 1px solid var(--pf-c-rimHi) !important; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6); }
html.pf .t-item .why { border-radius: 0; box-shadow: 1px 1px 0 #000; }
html.pf .t-fslogin { border-radius: 0 !important; }

/* The badges on the HUD's buttons (counts, the whisper, the "!"): square plates, a 1-px outline and drop */
html.pf :is(.hbadge, .dex-badge) { border-radius: 0 !important; border-width: 1px !important; box-shadow: 0 0 0 1px #000, 2px 2px 0 rgba(0, 0, 0, 0.5) !important; }
html.pf .dot { border-radius: 0; box-shadow: none !important; }
html.pf .held-badge { border-radius: 0 !important; }

/* The job boards: cork in a wooden frame and paper notes pinned on it, as flat pixel props; no tilt (it would smear the
   pixels), a hard drop under each note */
html.pf #jobs.cork .jgrid { background: var(--pf-cork) 0 0 / calc(16 * var(--pf)) calc(16 * var(--pf)) repeat, #b7975f !important; border: calc(2 * var(--pf)) solid #6f3f1f !important;
  box-shadow: inset 0 0 0 var(--pf) #3f1f0f, 0 0 0 var(--pf) #000 !important; image-rendering: pixelated; }
html.pf #jobs.wanted .jgrid { background: #57678f !important; border: calc(2 * var(--pf)) solid #1f2737 !important; box-shadow: inset 0 0 0 var(--pf) #8797bf, 0 0 0 var(--pf) #000 !important; }
html.pf .jnote { background: #fff7e7 !important; box-shadow: 0 0 0 var(--pf) #3f1f0f, calc(2 * var(--pf)) calc(2 * var(--pf)) 0 rgba(0, 0, 0, 0.35) !important; transform: none !important; }
html.pf .jnote.outlaw { background: #fff7d7 !important; }
/* a note on the cork is paper in every material: the paper's own inks (Day's), not the window's light ones (too faint on
   the cream) */
html.pf #jobs.cork .jnote { --tx-pink: #9f1f5f; --tx-bad: #af1f17; --tx-info: #1f4f9f; --tx-good: #2f6f17; --tx-gold: #8f5707; --tx-faint: #977757; }
html.pf .jnote:hover { transform: translateY(calc(-1 * var(--pf))) !important; }
html.pf .jnote.sel { box-shadow: 0 0 0 var(--pf) #000, 0 0 0 calc(3 * var(--pf)) var(--pf-c-on), 0 0 0 calc(4 * var(--pf)) #000 !important; }
html.pf #jobs:not(.cork) .jnote { background: none !important; border: calc(3 * var(--pf)) solid transparent !important; border-image: var(--pf-tile) 3 fill / calc(3 * var(--pf)) !important; box-shadow: none !important; }
html.pf #jobs:not(.cork) .jnote.sel { border-image-source: var(--pf-tileSel) !important; }
html.pf .jpin { background: #e7473f !important; box-shadow: 0 0 0 1px #3f0f07, 1px 2px 0 rgba(0, 0, 0, 0.4) !important; }
html.pf .jnote.accepted .jpin { background: #3f77e7 !important; }
html.pf :is(.jnote.done, .jnote.claim) .jpin { background: #4fbf37 !important; }
html.pf .jnote.locked .jpin { background: #9f9fa7 !important; }
html.pf .jnote.story .jpin { background: #efc717 !important; }
html.pf .jnote.outlaw .jpin { background: #cfcfcf !important; }

/* Special Episodes, the Hall of Legends, the Link shop, the Pokédex, Wigglytuff's shop, sentry duty: flat panels in the
   material, their own colour as a tint; bars and coloured keys as a flat face with a lit band on top */
html.pf .se-banner { background: color-mix(in srgb, var(--c) 40%, var(--pf-c-well)) !important; }
html.pf .se-box.obj b { background: #bf97f7 !important; }
html.pf :is(.se-go, .pepisodes) { background: #ffb7d7 !important; color: #3f0f27 !important; }
html.pf .se-ep.sel { box-shadow: 0 0 0 var(--pf) #000 !important; }
html.pf .lcard2.owned { background: color-mix(in srgb, var(--lc) 28%, var(--pf-c-well)) !important; box-shadow: none !important; }
html.pf :is(.lbig, .lpic.shadow) { background: color-mix(in srgb, var(--lc) 30%, var(--pf-c-well)) !important; }
html.pf .lstar { text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000; }
html.pf .lk-slot.in-set { background: color-mix(in srgb, #ffd747 14%, var(--pf-c-well)) !important; }
html.pf .dxbig { background: var(--pf-c-well) !important; }
html.pf .as-group { background: var(--pf-c-fill) !important; border-bottom: var(--pf) solid var(--pf-c-line) !important; box-shadow: 0 var(--pf) 0 var(--pf-c-groove); }
html.pf .as-mon.no img { background: var(--pf-c-well) !important; }
html.pf .as-ribbon.locked { background: var(--pf-c-btn) !important; }
html.pf .as-ribbon.owned { background: #87e75f !important; }
html.pf .sd-actions { background: var(--pf-c-fill) !important; }
html.pf .snt-clock i { background: linear-gradient(#c7ff9f 0 34%, #4fbf37 34%) !important; }
html.pf .snt-clock i.low { background: linear-gradient(#ffc7a7 0 34%, #e7473f 34%) !important; }
html.pf .snt-choices button.right { border-image-source: var(--pf-ok) !important; color: #0f2f07 !important; }
/* the dungeon's name on its picture: white on the dark band in every material */
html.pf .pt-bigname { background: linear-gradient(transparent 0 35%, rgba(0, 0, 0, 0.4) 35% 65%, rgba(0, 0, 0, 0.7) 65%) !important; color: #ffffff; --tx-hi: #ffffff; }
/* the gold tags: flat (their gradient's two stops were the one accent already); the Hall's portrait without its glow */
html.pf :is(.se-tag.feat, .se-box.feat b, .dxbadge.owned, #results .rs-tag.up, #results .rs-stamp, .tw-chip.you, #social .sw-tag.you, .snt-choices button.sel) { background: var(--pf-c-on) !important; color: var(--pf-c-onInk) !important; }
html.pf .pt-detail { background: var(--pf-c-fill) !important; }
html.pf .lbig { box-shadow: 0 0 0 var(--pf) #000 !important; }

/* Live events and gifts, the raid call: the gold plates (a banner's effect, an event's tag, the RAID strip), the GIFT tag
   in red */
html.pf :is(#live-banner .lb-plate, .le-tag) { border: calc(2 * var(--pf)) solid transparent !important; border-image: var(--pf-plate) 2 fill / calc(2 * var(--pf)) !important; background: none !important; color: var(--pf-c-onInk) !important; line-height: 1.2; }
html.pf .le-gift .le-tag { border-image: none !important; border: 0 !important; background: #e7473f !important; color: #ffffff !important; box-shadow: 0 0 0 var(--pf) #000, inset 0 var(--pf) 0 #ff876f; }
html.pf .le-card.live { border-image-source: var(--pf-tile) !important; border-width: calc(3 * var(--pf)) !important; border-image-slice: 3 fill !important; border-image-width: calc(3 * var(--pf)) !important; }