/*
 * Looks: every player picks their own (settings), and the look and the font are picked apart, so any
 * look goes with any font. The owner: "like 12 different types of GUI styles. a classic Pokemon one,
 * a black and white one, a modern PC version one ... everything should be interchangeable".
 *
 * A look only changes how things look. Every screen keeps the same buttons and the same information
 * in every look (the owner: "if I ever tell you to change a look or something, you better make sure
 * all the features work with it"), so a look is colours and frames here and nothing else:
 *   - Black and White (pixel.js puts .bw on the page; bw.css) and modern (the page with no look on it)
 *     are drawn by their own sheets;
 *   - every other look sets the --k-* colours below on the page (data-skin), and the one set of rules
 *     after them paints the windows, the pop-ups, the text over the world and the fight with them
 *     (the fight's own sheet, battle.css, reads the same colours inside its frame).
 * The font is separate (data-font, pixel.js): --uifont is the family and --fz how big it runs, since a
 * Game Boy font is far wider than a modern one.
 */

/* ---- fonts the looks can use (Black and White's DotGothic16 and Tiny5, Pixelify and Bricolage are in bw.css and app.css) ---- */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/pressstart2p-400.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/silkscreen-400.woff2") format("woff2"); }
@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/vt323-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("/fonts/nunito-var.woff2") format("woff2"); }

/* The picked font, everywhere: the menus (--pixel), Black and White's menus (--bwfont), the fight (reads --pixel). */
:root[data-font] { --pixel: var(--uifont); }
:root.bw[data-font] { --bwfont: var(--uifont); }
html[data-font] { font-size: calc(clamp(16px, min(.6vw + 7px, 2.2vh), 21px) * var(--fz, 1)); }

/* ---------------------------------------------------------------- the looks' colours ---- */
/* Pokémon Showdown: the PC battle sim, light and plain. */
:root[data-skin="showdown"] {
  --k-bg: #e9edf3; --k-bgart: none; --k-panel: #ffffff; --k-raise: #f3f5f9; --k-line: #a9b3c4;
  --k-ink: #1c1c22; --k-muted: #4d5566; --k-faint: #6e7686;
  --k-frame: 0 0 0 1px #a9b3c4, 0 1px 3px rgba(0,0,0,.1); --k-r: 6px; --k-r2: 4px; --k-rb: 5px;
  --k-head: linear-gradient(#eaf0fa, #cfdcf0); --k-head-ink: #1d3557; --k-head-frame: inset 0 0 0 1px #8fa4c7;
  --k-raise-border: 1px solid #c9d1de;
  --k-btn: linear-gradient(#ffffff, #e3e8f0); --k-btn-ink: #1c1c22; --k-btn-border: 1px solid #98a4b8; --k-btn-lip: none;
  --k-accent: #3f72c8; --k-accent-ink: #ffffff; --k-accent-edge: #2c56a0;
  --k-cursor: #f0a030; --k-bar: #3f72c8; --k-track: #dfe4ec;
  --k-text: #ffffff; --k-text-ink: #1c1c22; --k-text-frame: 0 0 0 1px #98a4b8, 0 6px 18px rgba(0,0,0,.18);
  --k-window: 0 0 0 1px #8b97ab, 0 10px 40px rgba(0,0,0,.35);
  --k-navy: #dde3ec; --k-navy2: #c9d1de; --k-paper: #ffffff; --k-rim: #98a4b8; --k-rim2: #e3e8f0; --k-fink: #1c1c22; --k-em: #2c56a0;
  --k-hpbox: linear-gradient(#fdfdfe, #e9edf3); --k-hpbox-ink: #1c1c22; --k-hpbox-frame: 0 0 0 1px #98a4b8, 0 2px 4px rgba(0,0,0,.2);
  --k-fbtn-r: 5px;
}
/* Showdown dark: the sim's dark mode, greys and its blue. */
:root[data-skin="showdowndark"] {
  --k-bg: #16181d; --k-bgart: none; --k-panel: #22252c; --k-raise: #2b2f37; --k-line: #3d424d;
  --k-ink: #e8eaef; --k-muted: #b2b8c4; --k-faint: #8a91a0;
  --k-frame: 0 0 0 1px #3d424d, 0 1px 3px rgba(0,0,0,.4); --k-r: 6px; --k-r2: 4px; --k-rb: 5px;
  --k-head: linear-gradient(#2e3440, #262b35); --k-head-ink: #e8eaef; --k-head-frame: inset 0 0 0 1px #4a5262;
  --k-raise-border: 1px solid #3a3f4a;
  --k-btn: linear-gradient(#353a45, #2b2f38); --k-btn-ink: #e8eaef; --k-btn-border: 1px solid #4a5060; --k-btn-lip: none;
  --k-accent: #4f86e0; --k-accent-ink: #ffffff; --k-accent-edge: #3566b8;
  --k-cursor: #f0a030; --k-bar: #4f86e0; --k-track: #1a1d23;
  --k-text: #22252c; --k-text-ink: #e8eaef; --k-text-frame: 0 0 0 1px #4a5060, 0 6px 18px rgba(0,0,0,.45);
  --k-window: 0 0 0 1px #4a5060, 0 10px 40px rgba(0,0,0,.55);
  --k-navy: #1d2027; --k-navy2: #16181d; --k-paper: #22252c; --k-rim: #4a5060; --k-rim2: #2b2f37; --k-fink: #e8eaef; --k-em: #7fa8ee;
  --k-hpbox: linear-gradient(#2b2f37, #22252c); --k-hpbox-ink: #e8eaef; --k-hpbox-frame: 0 0 0 1px #4a5060, 0 2px 4px rgba(0,0,0,.4);
  --k-fbtn-r: 5px;
}
/* Red and Blue: the Game Boy's four greens, square boxes with a thick double line. */
:root[data-skin="rby"] {
  --k-bg: #9bbc0f; --k-bgart: none; --k-panel: #9bbc0f; --k-raise: #8bac0f; --k-line: #0f380f;
  --k-ink: #0f380f; --k-muted: #306230; --k-faint: #306230;
  --k-frame: inset 0 0 0 3px #0f380f, inset 0 0 0 6px #9bbc0f, inset 0 0 0 8px #0f380f; --k-r: 0; --k-r2: 0; --k-rb: 0;
  --k-head: #0f380f; --k-head-ink: #9bbc0f; --k-head-frame: none;
  --k-raise-border: 3px solid #306230;
  --k-btn: #9bbc0f; --k-btn-ink: #0f380f; --k-btn-border: 3px solid #0f380f; --k-btn-lip: none;
  --k-accent: #306230; --k-accent-ink: #9bbc0f; --k-accent-edge: #0f380f;
  --k-cursor: #0f380f; --k-bar: #306230; --k-track: #8bac0f;
  --k-text: #9bbc0f; --k-text-ink: #0f380f; --k-text-frame: inset 0 0 0 3px #0f380f, inset 0 0 0 6px #9bbc0f, inset 0 0 0 8px #0f380f, 0 10px 30px rgba(0,0,0,.4);
  --k-window: 0 0 0 4px #0f380f, 0 0 0 8px #306230, 0 10px 40px rgba(0,0,0,.45);
  --k-navy: #8bac0f; --k-navy2: #306230; --k-paper: #9bbc0f; --k-rim: #0f380f; --k-rim2: #8bac0f; --k-fink: #0f380f; --k-em: #306230;
  --k-hpbox: #9bbc0f; --k-hpbox-ink: #0f380f; --k-hpbox-frame: 0 0 0 3px #0f380f;
  --k-fbtn-r: 0;
}
/* Gold and Silver: cream paper, dark brown lines, gold. */
:root[data-skin="gsc"] {
  --k-bg: #efe6cc; --k-bgart: none; --k-panel: #fffaee; --k-raise: #f6eed8; --k-line: #483828;
  --k-ink: #302418; --k-muted: #5e4c38; --k-faint: #7a6850;
  --k-frame: inset 0 0 0 2px #483828, inset 0 0 0 4px #fffaee, inset 0 0 0 6px #c8a858; --k-r: 2px; --k-r2: 2px; --k-rb: 2px;
  --k-head: #483828; --k-head-ink: #f8e8b0; --k-head-frame: inset 0 0 0 2px #c8a858;
  --k-raise-border: 2px solid #d8c8a0;
  --k-btn: #fffaee; --k-btn-ink: #302418; --k-btn-border: 2px solid #483828; --k-btn-lip: inset 0 -3px 0 #e6d6aa;
  --k-accent: #c89020; --k-accent-ink: #201400; --k-accent-edge: #8a6010;
  --k-cursor: #c03030; --k-bar: #c89020; --k-track: #e6d6aa;
  --k-text: #fffaee; --k-text-ink: #302418; --k-text-frame: inset 0 0 0 2px #483828, inset 0 0 0 4px #fffaee, inset 0 0 0 6px #c8a858, 0 10px 30px rgba(0,0,0,.4);
  --k-window: 0 0 0 3px #483828, 0 0 0 6px #c8a858, 0 10px 40px rgba(0,0,0,.45);
  --k-navy: #5a4632; --k-navy2: #3c2e20; --k-paper: #fffaee; --k-rim: #483828; --k-rim2: #c8a858; --k-fink: #302418; --k-em: #8a6010;
  --k-hpbox: #fffaee; --k-hpbox-ink: #302418; --k-hpbox-frame: 0 0 0 2px #483828, inset 0 0 0 2px #c8a858;
  --k-fbtn-r: 2px;
}
/* FireRed and LeafGreen: white boxes with the GBA's rounded blue-grey edge, a red title. */
:root[data-skin="frlg"] {
  --k-bg: #dce8f0; --k-bgart: repeating-linear-gradient(0deg, rgba(255,255,255,.45) 0 4px, transparent 4px 8px); --k-panel: #ffffff; --k-raise: #eef4f8; --k-line: #506878;
  --k-ink: #303840; --k-muted: #4c5a66; --k-faint: #6a7884;
  --k-frame: inset 0 0 0 2px #506878, inset 0 0 0 5px #a8c8e0; --k-r: 10px; --k-r2: 6px; --k-rb: 8px;
  --k-head: linear-gradient(#f86858, #d83030); --k-head-ink: #ffffff; --k-head-frame: inset 0 0 0 2px #902020;
  --k-raise-border: 2px solid #c0d4e2;
  --k-btn: #ffffff; --k-btn-ink: #303840; --k-btn-border: 2px solid #506878; --k-btn-lip: inset 0 -3px 0 #a8c8e0;
  --k-accent: #3878d8; --k-accent-ink: #ffffff; --k-accent-edge: #2050a0;
  --k-cursor: #f05030; --k-bar: #3878d8; --k-track: #d0e0ec;
  --k-text: #ffffff; --k-text-ink: #303840; --k-text-frame: inset 0 0 0 2px #506878, inset 0 0 0 5px #a8c8e0, 0 10px 30px rgba(0,0,0,.35);
  --k-window: 0 0 0 3px #506878, 0 0 0 6px #a8c8e0, 0 10px 40px rgba(0,0,0,.4);
  --k-navy: #5878a0; --k-navy2: #3c5878; --k-paper: #ffffff; --k-rim: #506878; --k-rim2: #a8c8e0; --k-fink: #303840; --k-em: #d83030;
  --k-hpbox: #f8f8e8; --k-hpbox-ink: #303840; --k-hpbox-frame: 0 0 0 2px #506878, inset 0 0 0 3px #d8d8c0;
  --k-fbtn-r: 8px;
}
/* Ruby, Sapphire and Emerald: white boxes with a green edge, on pale green. */
:root[data-skin="rse"] {
  --k-bg: #e2f4dc; --k-bgart: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 6px, transparent 6px 12px); --k-panel: #ffffff; --k-raise: #eef8ea; --k-line: #307850;
  --k-ink: #283828; --k-muted: #405848; --k-faint: #607868;
  --k-frame: inset 0 0 0 2px #307850, inset 0 0 0 5px #90d0a0; --k-r: 8px; --k-r2: 6px; --k-rb: 6px;
  --k-head: linear-gradient(#48a870, #307850); --k-head-ink: #ffffff; --k-head-frame: inset 0 0 0 2px #205838;
  --k-raise-border: 2px solid #b8e0c0;
  --k-btn: #ffffff; --k-btn-ink: #283828; --k-btn-border: 2px solid #307850; --k-btn-lip: inset 0 -3px 0 #b8e0c0;
  --k-accent: #20a060; --k-accent-ink: #ffffff; --k-accent-edge: #107040;
  --k-cursor: #f08030; --k-bar: #20a060; --k-track: #d0ecd4;
  --k-text: #ffffff; --k-text-ink: #283828; --k-text-frame: inset 0 0 0 2px #307850, inset 0 0 0 5px #90d0a0, 0 10px 30px rgba(0,0,0,.35);
  --k-window: 0 0 0 3px #307850, 0 0 0 6px #90d0a0, 0 10px 40px rgba(0,0,0,.4);
  --k-navy: #3c7858; --k-navy2: #285840; --k-paper: #ffffff; --k-rim: #307850; --k-rim2: #90d0a0; --k-fink: #283828; --k-em: #107040;
  --k-hpbox: #f8f8e8; --k-hpbox-ink: #283828; --k-hpbox-frame: 0 0 0 2px #307850, inset 0 0 0 3px #d0e8c8;
  --k-fbtn-r: 6px;
}
/* Diamond, Pearl and Platinum: the touch screen's grey-blue, rounded, with dark title bars. */
:root[data-skin="dppt"] {
  --k-bg: #a8b0c0; --k-bgart: repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 10px, transparent 10px 20px); --k-panel: #eef0f4; --k-raise: #e0e4ea; --k-line: #384050;
  --k-ink: #282c38; --k-muted: #464c5c; --k-faint: #646a7a;
  --k-frame: inset 0 0 0 2px #384050, inset 0 0 0 4px #cfd4dc; --k-r: 12px; --k-r2: 8px; --k-rb: 10px;
  --k-head: linear-gradient(#4c5668, #343c4c); --k-head-ink: #ffffff; --k-head-frame: inset 0 0 0 2px #707a8c;
  --k-raise-border: 2px solid #c4cad4;
  --k-btn: linear-gradient(#ffffff, #e8ebf0); --k-btn-ink: #282c38; --k-btn-border: 2px solid #384050; --k-btn-lip: inset 0 -3px 0 #b8bec8;
  --k-accent: #d0a020; --k-accent-ink: #201800; --k-accent-edge: #8a6a10;
  --k-cursor: #e04070; --k-bar: #4880d0; --k-track: #cfd4dc;
  --k-text: #f8f8fa; --k-text-ink: #282c38; --k-text-frame: inset 0 0 0 2px #384050, inset 0 0 0 4px #cfd4dc, 0 10px 30px rgba(0,0,0,.35);
  --k-window: 0 0 0 3px #384050, 0 0 0 6px #cfd4dc, 0 10px 40px rgba(0,0,0,.4);
  --k-navy: #4c5668; --k-navy2: #343c4c; --k-paper: #f8f8fa; --k-rim: #384050; --k-rim2: #cfd4dc; --k-fink: #282c38; --k-em: #3060b0;
  --k-hpbox: linear-gradient(#fafafc, #e2e6ec); --k-hpbox-ink: #282c38; --k-hpbox-frame: 0 0 0 2px #384050;
  --k-fbtn-r: 10px;
}
/* HeartGold and SoulSilver: light panels with gold edges on a dark ground. */
:root[data-skin="hgss"] {
  --k-bg: #e9e0c6; --k-bgart: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px); --k-panel: #fbf8ee; --k-raise: #f2ecd8; --k-line: #8a6418;
  --k-ink: #2c2418; --k-muted: #5a4a30; --k-faint: #7a6848;
  --k-frame: inset 0 0 0 2px #8a6418, inset 0 0 0 4px #f0d890; --k-r: 10px; --k-r2: 6px; --k-rb: 8px;
  --k-head: linear-gradient(#f0c858, #c89020); --k-head-ink: #301800; --k-head-frame: inset 0 0 0 2px #8a6418;
  --k-raise-border: 2px solid #e2d2a0;
  --k-btn: #fbf8ee; --k-btn-ink: #2c2418; --k-btn-border: 2px solid #8a6418; --k-btn-lip: inset 0 -3px 0 #e8d8a8;
  --k-accent: #c89020; --k-accent-ink: #201400; --k-accent-edge: #8a6418;
  --k-cursor: #e05030; --k-bar: #c89020; --k-track: #e8dcc0;
  --k-text: #fbf8ee; --k-text-ink: #2c2418; --k-text-frame: inset 0 0 0 2px #8a6418, inset 0 0 0 4px #f0d890, 0 10px 30px rgba(0,0,0,.45);
  --k-window: 0 0 0 3px #8a6418, 0 0 0 6px #f0d890, 0 10px 40px rgba(0,0,0,.5);
  --k-navy: #3a3440; --k-navy2: #26222c; --k-paper: #fbf8ee; --k-rim: #8a6418; --k-rim2: #f0d890; --k-fink: #2c2418; --k-em: #a06a10;
  --k-hpbox: #fbf8ee; --k-hpbox-ink: #2c2418; --k-hpbox-frame: 0 0 0 2px #8a6418, inset 0 0 0 3px #f0d890;
  --k-fbtn-r: 8px;
}
/* X and Y: clean white and red, round corners. */
:root[data-skin="xy"] {
  --k-bg: #f6eef0; --k-bgart: linear-gradient(180deg, #fbe4e7 0, #f6eef0 40%); --k-panel: #ffffff; --k-raise: #fbf3f4; --k-line: #e1b4b8;
  --k-ink: #2c2a2e; --k-muted: #5a5458; --k-faint: #7c7478;
  --k-frame: 0 0 0 2px #f0c4c8, 0 3px 10px rgba(160,40,50,.12); --k-r: 16px; --k-r2: 10px; --k-rb: 999px;
  --k-head: linear-gradient(90deg, #e8424c, #c8202c); --k-head-ink: #ffffff; --k-head-frame: none;
  --k-raise-border: 2px solid #f4d6d8;
  --k-btn: #ffffff; --k-btn-ink: #2c2a2e; --k-btn-border: 2px solid #e8a0a6; --k-btn-lip: inset 0 -3px 0 #f8dadc;
  --k-accent: #d8323c; --k-accent-ink: #ffffff; --k-accent-edge: #a01c24;
  --k-cursor: #3070e0; --k-bar: #d8323c; --k-track: #f4dcdf;
  --k-text: #ffffff; --k-text-ink: #2c2a2e; --k-text-frame: 0 0 0 2px #e8a0a6, 0 10px 30px rgba(0,0,0,.3);
  --k-window: 0 0 0 3px #e8424c, 0 10px 40px rgba(0,0,0,.35);
  --k-navy: #3a3238; --k-navy2: #241e22; --k-paper: #ffffff; --k-rim: #e8a0a6; --k-rim2: #fbe4e7; --k-fink: #2c2a2e; --k-em: #c8202c;
  --k-hpbox: linear-gradient(#ffffff, #f6eaec); --k-hpbox-ink: #2c2a2e; --k-hpbox-frame: 0 0 0 2px #e8a0a6, 0 2px 6px rgba(0,0,0,.2);
  --k-fbtn-r: 999px;
}
/* Sun and Moon: deep night blue, glowing cyan and the sunset orange. */
:root[data-skin="sm"] {
  --k-bg: #0d1a2c; --k-bgart: radial-gradient(100% 60% at 50% 0%, #1c3656 0, #0d1a2c 70%); --k-panel: #16304e; --k-raise: #1d3c60; --k-line: #3b6a98;
  --k-ink: #eaf6ff; --k-muted: #b3cbe2; --k-faint: #8aa6c2;
  --k-frame: inset 0 0 0 2px #43c6e8, 0 0 14px rgba(67,198,232,.18); --k-r: 16px; --k-r2: 10px; --k-rb: 12px;
  --k-head: linear-gradient(90deg, #f6903a, #e0601a); --k-head-ink: #ffffff; --k-head-frame: none;
  --k-raise-border: 2px solid #2c5482;
  --k-btn: #234a72; --k-btn-ink: #eaf6ff; --k-btn-border: 2px solid #4d86bc; --k-btn-lip: inset 0 -3px 0 #183656;
  --k-accent: #34c0e8; --k-accent-ink: #062033; --k-accent-edge: #1c8ab0;
  --k-cursor: #f6903a; --k-bar: #34c0e8; --k-track: #10243c;
  --k-text: #f4fbff; --k-text-ink: #16263a; --k-text-frame: 0 0 0 3px #43c6e8, 0 10px 30px rgba(0,0,0,.45);
  --k-window: 0 0 0 3px #43c6e8, 0 0 30px rgba(67,198,232,.25), 0 10px 40px rgba(0,0,0,.5);
  --k-navy: #16304e; --k-navy2: #0d1a2c; --k-paper: #f4fbff; --k-rim: #2c86b0; --k-rim2: #bfe8f6; --k-fink: #16263a; --k-em: #e0601a;
  --k-hpbox: linear-gradient(#1d3c60, #13283f); --k-hpbox-ink: #eaf6ff; --k-hpbox-frame: 0 0 0 2px #43c6e8;
  --k-fbtn-r: 12px;
}
/* Sword and Shield: bold white with navy lines, round pills, Sword's blue and Shield's pink. */
:root[data-skin="swsh"] {
  --k-bg: #e6ebf4; --k-bgart: repeating-linear-gradient(-45deg, rgba(255,255,255,.55) 0 14px, transparent 14px 28px); --k-panel: #ffffff; --k-raise: #f2f5fa; --k-line: #1d2b4f;
  --k-ink: #1d2b4f; --k-muted: #43507a; --k-faint: #66729a;
  --k-frame: 0 0 0 3px #1d2b4f, 4px 4px 0 3px #1d2b4f; --k-r: 18px; --k-r2: 12px; --k-rb: 999px;
  --k-head: linear-gradient(90deg, #00a1e9 0 50%, #e5007f 50%); --k-head-ink: #ffffff; --k-head-frame: 0 0 0 3px #1d2b4f;
  --k-raise-border: 2px solid #c8d0e2;
  --k-btn: #ffffff; --k-btn-ink: #1d2b4f; --k-btn-border: 3px solid #1d2b4f; --k-btn-lip: none;
  --k-accent: #00a1e9; --k-accent-ink: #ffffff; --k-accent-edge: #1d2b4f;
  --k-cursor: #e5007f; --k-bar: #00a1e9; --k-track: #d8deea;
  --k-text: #ffffff; --k-text-ink: #1d2b4f; --k-text-frame: 0 0 0 3px #1d2b4f, 4px 4px 0 3px #1d2b4f;
  --k-window: 0 0 0 4px #1d2b4f, 0 10px 40px rgba(0,0,0,.35);
  --k-navy: #1d2b4f; --k-navy2: #121c36; --k-paper: #ffffff; --k-rim: #1d2b4f; --k-rim2: #c8d0e2; --k-fink: #1d2b4f; --k-em: #e5007f;
  --k-hpbox: #ffffff; --k-hpbox-ink: #1d2b4f; --k-hpbox-frame: 0 0 0 3px #1d2b4f;
  --k-fbtn-r: 999px;
}
/* Scarlet and Violet: dark glass with Scarlet's orange and Violet's purple. */
:root[data-skin="sv"] {
  --k-bg: #16131e; --k-bgart: radial-gradient(90% 60% at 0% 0%, rgba(242,107,29,.18), transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(138,63,252,.2), transparent 60%); --k-panel: rgba(36,31,50,.94); --k-raise: #2c2740; --k-line: #4a4262;
  --k-ink: #f3eefc; --k-muted: #c4bad8; --k-faint: #9a90b0;
  --k-frame: inset 0 0 0 2px #4a4262, 0 6px 20px rgba(0,0,0,.3); --k-r: 16px; --k-r2: 10px; --k-rb: 12px;
  --k-head: linear-gradient(90deg, #f26b1d, #8a3ffc); --k-head-ink: #ffffff; --k-head-frame: none;
  --k-raise-border: 2px solid #3c3554;
  --k-btn: #2c2740; --k-btn-ink: #f3eefc; --k-btn-border: 2px solid #5a5078; --k-btn-lip: none;
  --k-accent: #f26b1d; --k-accent-ink: #ffffff; --k-accent-edge: #b84a0c;
  --k-cursor: #b88cff; --k-bar: #f26b1d; --k-track: #1e1a2a;
  --k-text: #f8f5fd; --k-text-ink: #221c30; --k-text-frame: 0 0 0 2px #8a3ffc, 0 10px 30px rgba(0,0,0,.45);
  --k-window: 0 0 0 2px #5a5078, 0 10px 40px rgba(0,0,0,.55);
  --k-navy: #241f32; --k-navy2: #16131e; --k-paper: #f8f5fd; --k-rim: #8a3ffc; --k-rim2: #ddd0f8; --k-fink: #221c30; --k-em: #d0560c;
  --k-hpbox: linear-gradient(#2c2740, #201b2e); --k-hpbox-ink: #f3eefc; --k-hpbox-frame: 0 0 0 2px #5a5078;
  --k-fbtn-r: 12px;
}

/* ---------------------------------------------------------------- painting with them ---- */
:root[data-skin] :is(.worldwin.game, #mini) {
  --ink: var(--k-ink); --muted: var(--k-muted); --faint: var(--k-faint); --line: var(--k-line);
  --panel: var(--k-panel); --raise: var(--k-raise); --card: var(--k-panel); --card-ink: var(--k-ink); --card-line: var(--k-line);
  --accent: var(--k-accent); --accent-ink: var(--k-accent-ink); --accent-edge: var(--k-accent-edge);
  --title-fill: var(--k-ink); --title-shadow: none; --stage: var(--k-raise);
  background: var(--k-bgart), var(--k-bg); background-attachment: local; color: var(--k-ink);
}
:root[data-skin] .worldwin.over { border-radius: var(--k-r); box-shadow: var(--k-window); }
/* boxes, their headings, the window's title */
:root[data-skin] :is(.worldwin.game, #mini) :is(.box, .lookprev) { background: var(--k-panel); color: var(--k-ink); border: 0; border-radius: var(--k-r); box-shadow: var(--k-frame); }
/* the window's title bar */
:root[data-skin] .worldwin.game .advmain > .hd:first-child { background: var(--k-head); box-shadow: var(--k-head-frame); border-radius: var(--k-r) var(--k-r) 0 0; }
:root[data-skin] .worldwin.game .advmain > .hd:first-child :is(h1, .sub) { color: var(--k-head-ink); text-shadow: none; background: none; box-shadow: none; }
:root[data-skin] .worldwin.game .hd h1 { background: var(--k-head); color: var(--k-head-ink); box-shadow: var(--k-head-frame); border-radius: var(--k-r2); text-shadow: none; }
:root[data-skin] .worldwin.game .hd .sub, :root[data-skin] .worldwin.game h3 .sub { color: var(--k-muted); }
:root[data-skin] .worldwin.game :is(h1, h2, h3, h4) { color: inherit; }
/* rows inside boxes */
:root[data-skin] :is(.worldwin.game, #mini, .pickcard) :is(.field, .item, .inbox, .board5 > div, .prow) { background: var(--k-raise); color: var(--k-ink) !important; border: var(--k-raise-border); border-radius: var(--k-r2); }
/* buttons, tabs and inputs */
:root[data-skin] :is(.worldwin.game, #mini, .card) :is(.pill, .slot, .lookbase, .keycap, .starter, .winbar button, .item .ctl button, .btn, .games button, .way, .bigbtn) {
  background: var(--k-btn); color: var(--k-btn-ink); border: var(--k-btn-border); border-radius: var(--k-rb); box-shadow: var(--k-btn-lip); text-shadow: none; font-family: var(--pixel); }
:root[data-skin] :is(.worldwin.game, #mini, .card) :is(.pill, .slot, .lookbase, .keycap, .starter, .winbar button, .btn, .games button):hover:not(:disabled) { background: var(--k-btn); filter: brightness(1.07); }
:root[data-skin] :is(.worldwin.game, #mini, .card) :is(.pill.main, .pill[aria-pressed="true"], .btn.main, .games button[aria-pressed="true"], .slot[aria-pressed="true"], .lookbase[aria-pressed="true"]) {
  background: var(--k-accent); color: var(--k-accent-ink); border-color: var(--k-accent-edge); box-shadow: none; }
:root[data-skin] :is(.worldwin.game, #mini) :is(.seg, .tabs) { background: var(--k-raise); border: var(--k-btn-border); border-radius: var(--k-rb); box-shadow: none; }
:root[data-skin] :is(.worldwin.game, #mini) :is(.seg, .tabs) button { color: var(--k-muted); border-radius: var(--k-rb); font-family: var(--pixel); background: none; border: 0; box-shadow: none; }
:root[data-skin] :is(.worldwin.game, #mini) :is(.seg, .tabs) button[aria-pressed="true"] { background: var(--k-accent); color: var(--k-accent-ink); box-shadow: none; }
:root[data-skin] .worldwin.game :is(select, input:not([type="range"])) { background: var(--k-btn); color: var(--k-btn-ink); border: var(--k-btn-border) !important; border-radius: var(--k-rb) !important; font-family: var(--pixel); }
:root[data-skin] .worldwin.game select option { background: var(--k-panel); color: var(--k-ink); }
:root[data-skin] :is(.worldwin.game, #mini) :is(.slot.empty, .empty) { background: transparent; border: 2px dashed var(--k-line); color: var(--k-muted); border-radius: var(--k-r2); }
:root[data-skin] :is(.worldwin.game, #mini, .card) :is(button, select, input, summary, [tabindex]):focus-visible { outline-color: var(--k-cursor); }
/* bars */
:root[data-skin] .worldwin.game .bar { background: var(--k-track); }
:root[data-skin] .worldwin.game :is(.stats .bar i, .bar.xp i, .regions .bar i) { background: var(--k-bar); }
:root[data-skin] .worldwin.game :is(.board5, .inbox) .av { background: var(--k-head); color: var(--k-head-ink); }
:root[data-skin] .volrow input { accent-color: var(--k-accent); }
/* pop-ups and the little notes */
:root[data-skin] :is(.card, .toast) { background: var(--k-text); color: var(--k-text-ink); border-radius: var(--k-r); box-shadow: var(--k-text-frame); font-family: var(--pixel); }
:root[data-skin] .card :is(h2, p, .next) { color: var(--k-text-ink); text-shadow: none; }
:root[data-skin] .card .prize span { background: var(--k-accent); color: var(--k-accent-ink); box-shadow: none; }
:root[data-skin] .pickcard .prow { font-family: var(--pixel); }
/* over the world: the talking box, the start menu, the place sign and the menu button */
:root[data-skin] :is(.worldtext, .worldmenu, .worldstart) { background: var(--k-text); color: var(--k-text-ink); border-radius: var(--k-r2); box-shadow: var(--k-text-frame); font-family: var(--pixel); }
:root[data-skin] .worldmenu button { color: var(--k-text-ink); font-family: var(--pixel); }
/* The start menu's buttons (a grid of them): each one a button in the look's own colours, so its words always read. */
:root[data-skin] .worldstart button { background: var(--k-btn); color: var(--k-btn-ink); border: var(--k-btn-border); border-radius: var(--k-rb); box-shadow: var(--k-btn-lip); font-family: var(--pixel); }
:root[data-skin] .worldstart button:hover { color: var(--k-btn-ink); filter: brightness(1.07); }
:root[data-skin] .worldstart button.on { box-shadow: 0 0 0 2px var(--k-cursor); }
:root[data-skin] :is(.worldplace, .worldmenubtn) { background: var(--k-head); color: var(--k-head-ink); border-radius: var(--k-r2); box-shadow: var(--k-head-frame); font-family: var(--pixel); }

/* ---------------------------------------------------------------- the settings pickers ---- */
.lookpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.lookpick button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; min-height: 48px; }
.lookpick .lsw { display: grid; grid-template-columns: 1fr 1fr; width: 26px; height: 26px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.lookpick .lsw i { display: block; }
.fontpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.fontpick button { min-height: 48px; padding: 6px 10px; line-height: 1.2; }
.fontpick button small { display: block; opacity: .75; font-size: .75em; }

/* A wide font (the Game Boy's) wraps a word to its own line rather than splitting it. */
:root[data-font] .worldwin.game :is(.field, .item, .pill, .kv .v, .field .v) { overflow-wrap: break-word; word-break: normal; }
.lookpick button span:last-child { overflow-wrap: normal; word-break: normal; }