/* The wiki (js/screens/wiki.js): a full-screen window over the sky with four tabs that join
   it, on the kit in css/pixel.css. HEROES is a rail of heads, the chosen hero alive on their
   colour, and their file; the other tabs are cards. The pixel art is drawn on canvases at
   whole device pixels by the screen; this file places boxes. DESIGN.md is the contract. */
body[data-screen="wiki"] { background: var(--sky3); }
body[data-screen="wiki"] #app { background: var(--sky-bands, var(--sky3)); background-color: var(--sky3); }
.wk-screen {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: calc(var(--px) * 3) calc(var(--px) * 5) calc(var(--px) * 5);
  box-sizing: border-box;
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1.15;
  color: var(--ink);
}
.wk-screen *, .wk-screen *::before, .wk-screen *::after { border-radius: 0 !important; box-sizing: border-box; }
.wk-screen canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.wk-screen .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the top: BACK, the title, and the tabs sitting on the window */
.wk-top { display: flex; align-items: flex-end; gap: calc(var(--fp) * 8); flex-wrap: wrap; }
.wk-back.px-btn { gap: calc(var(--fp) * 3); min-height: calc(var(--fp) * 18); margin-bottom: calc(var(--fp) * 5); padding-inline: calc(var(--fp) * 5) calc(var(--fp) * 6); font-size: var(--t1); }
.wk-back-arrow { display: block; width: calc(var(--fp) * 5); height: calc(var(--fp) * 5); margin-top: calc(var(--fp) * -1); fill: currentColor; }
.wk-title { margin: 0 auto calc(var(--fp) * 5) 0; font-size: var(--t2); }
.wk-tabs { margin: 0; }
.wk-tabs .px-tab { font-size: var(--t15); }

/* the window */
.wk-body {
  position: relative;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: calc(var(--fp) * 10);
  border: var(--fp) solid var(--ink);
  border-bottom-width: calc(var(--fp) * 3);
  background: var(--cloud);
  box-shadow: inset 0 calc(var(--fp) * -2) 0 var(--cloud-shade);
  outline: none;
  scrollbar-color: var(--slate) var(--cloud);
}
.wk-body[data-tab="heroes"] { overflow: hidden; padding: calc(var(--fp) * 8); }
.wk-body p { margin: 0 0 calc(var(--fp) * 4); }
.wk-body a { color: #1f5fb8; text-decoration-thickness: var(--fp); text-underline-offset: calc(var(--fp) * 1.5); }
.wk-body a:hover { color: var(--ink); background: var(--gold-hi); }
.wk-body a.px-btn { color: var(--ink); text-decoration: none; }
.wk-lead { max-width: 70ch; color: var(--plum); font-size: var(--t15); line-height: 1.1; }
.wk-note { color: var(--slate); margin-top: calc(var(--fp) * 8); }
.wk-tag.px-badge { min-height: calc(var(--fp) * 11); padding: var(--fp) calc(var(--fp) * 3) 0; vertical-align: 1px; }
.wk-prop { flex: none; width: calc(var(--fp) * 18); height: calc(var(--fp) * 18); }
.wk-body kbd {
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--fp) * 11);
  height: calc(var(--fp) * 11);
  padding: var(--fp) calc(var(--fp) * 2) 0;
  border: var(--fp) solid var(--ink);
  background: var(--paper);
  box-shadow: inset 0 calc(var(--fp) * -1) 0 var(--stone);
  font-family: var(--font-pixel);
  font-size: var(--t1);
  line-height: 1;
}
.wk-body .gf-arrow { display: block; width: calc(var(--fp) * 5); height: calc(var(--fp) * 6); margin-top: calc(var(--fp) * -1); fill: currentColor; }

/* ---- HEROES: the rail, the stand, the file */
.wk-heroes { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); gap: calc(var(--fp) * 10); height: 100%; min-height: 0; }
.wk-rail { min-height: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--fp) * 4); margin: calc(var(--fp) * -4); scrollbar-width: thin; }
.wk-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), var(--tile, 56px)); gap: calc(var(--fp) * 3); align-content: start; }
.wk-tile {
  appearance: none;
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: var(--fp) solid var(--ink);
  background: var(--night);
  color: var(--paper);
  font-family: var(--font-pixel);
  cursor: pointer;
  box-shadow: 0 var(--fp) 0 var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.wk-face { width: var(--tile, 56px); height: var(--tile, 56px); }
.wk-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
@media (hover: hover) { .wk-tile:hover::after { box-shadow: inset 0 0 0 var(--fp) var(--paper); } }
.wk-tile:focus-visible { outline: none; }
.wk-tile:focus-visible::after { box-shadow: inset 0 0 0 calc(var(--fp) * 2) var(--gold); }
/* the one on show: a gold frame (the kit's "you are here") */
.wk-tile.is-on { z-index: 1; box-shadow: 0 0 0 var(--fp) var(--ink), 0 0 0 calc(var(--fp) * 3) var(--gold), 0 0 0 calc(var(--fp) * 4) var(--ink); }

.wk-stand {
  --hero: var(--sky2);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border: var(--fp) solid var(--ink);
  box-shadow: 0 calc(var(--fp) * 2) 0 var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' fill-opacity='.13' d='M0 0h5v1h-5zM15 0h1v1h-1zM0 1h4v1h-4zM14 1h2v1h-2zM0 2h3v1h-3zM13 2h3v1h-3zM0 3h2v1h-2zM12 3h4v1h-4zM0 4h1v1h-1zM11 4h5v1h-5zM10 5h6v1h-6zM9 6h6v1h-6zM8 7h6v1h-6zM7 8h6v1h-6zM6 9h6v1h-6zM5 10h6v1h-6zM4 11h6v1h-6zM3 12h6v1h-6zM2 13h6v1h-6zM1 14h6v1h-6zM0 15h6v1h-6z'/%3E%3C/svg%3E") 0 0 / calc(var(--fp) * 16) calc(var(--fp) * 16),
    var(--hero);
}
/* the floor under the hero, above the move buttons */
.wk-stand::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: var(--demos-h, calc(var(--fp) * 30));
  height: calc(var(--fp) * 12);
  border-top: var(--fp) solid var(--ink);
  background: color-mix(in srgb, var(--hero) 56%, var(--ink));
  box-shadow: inset 0 var(--fp) 0 color-mix(in srgb, var(--hero) 78%, var(--paper));
}
.wk-stand-name { position: relative; z-index: 2; padding: calc(var(--fp) * 5) calc(var(--fp) * 6) 0; }
.wk-hero { position: relative; z-index: 1; align-self: end; justify-self: center; margin-bottom: calc(var(--fp) * 4); }
.wk-demos { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--fp) * 32), 1fr)); gap: calc(var(--fp) * 3); padding: calc(var(--fp) * 5) calc(var(--fp) * 5) calc(var(--fp) * 6); border-top: var(--fp) solid var(--ink); background: var(--night); }
.wk-demo.px-btn { min-height: calc(var(--fp) * 16); padding-inline: calc(var(--fp) * 5); font-size: var(--t1); }
.wk-demo.is-on { background: var(--gold); box-shadow: 0 var(--drop) 0 var(--ink), inset 0 calc(var(--fp) * -1) 0 var(--gold-deep); }

.wk-file { min-width: 0; min-height: 0; overflow-y: auto; padding-right: calc(var(--fp) * 4); scrollbar-width: thin; }
.wk-kicker { display: flex; gap: calc(var(--fp) * 4); align-items: center; flex-wrap: wrap; margin: 0 0 calc(var(--fp) * 5); }
.wk-kicker-note { color: var(--slate); text-transform: uppercase; }
.wk-lab.px-badge { color: var(--paper); background: color-mix(in srgb, var(--hero) 72%, var(--ink)); }
.wk-name { margin: 0 0 calc(var(--fp) * 4); font-family: var(--font-pixel); font-weight: 400; font-size: var(--t3); line-height: .9; text-transform: uppercase; }
.wk-bio { max-width: 52ch; color: var(--plum); font-size: var(--t15); line-height: 1.05; }
.wk-stats { display: grid; gap: calc(var(--fp) * 3); max-width: calc(var(--fp) * 190); margin: calc(var(--fp) * 6) 0; }
.wk-stat { display: grid; grid-template-columns: minmax(calc(var(--fp) * 34), max-content) minmax(0, 1fr); align-items: center; gap: calc(var(--fp) * 4); }
.wk-stat span { color: var(--slate); text-transform: uppercase; line-height: 1; padding-top: var(--fp); }
.wk-stat i { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--fp); }
.wk-stat b { height: calc(var(--fp) * 6); border: var(--fp) solid var(--ink); background: var(--paper); }
.wk-stat.is-pow b.on { background: var(--p1); box-shadow: inset 0 var(--fp) 0 #ff8a8a; }
.wk-stat.is-spd b.on { background: var(--gold); box-shadow: inset 0 var(--fp) 0 var(--gold-hi); }
.wk-stat.is-def b.on { background: var(--grass3); box-shadow: inset 0 var(--fp) 0 var(--grass1); }
.wk-skill {
  display: flex;
  gap: calc(var(--fp) * 6);
  align-items: flex-start;
  margin: calc(var(--fp) * 6) 0;
  padding: calc(var(--fp) * 5) calc(var(--fp) * 6) calc(var(--fp) * 5) calc(var(--fp) * 5);
  border: var(--fp) solid var(--ink);
  border-left: calc(var(--fp) * 3) solid var(--skill, var(--gold));
  background: var(--paper);
  box-shadow: 0 var(--fp) 0 var(--ink);
}
.wk-skill-name { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--fp) * 2) calc(var(--fp) * 4); margin-bottom: calc(var(--fp) * 3); text-transform: uppercase; }
.wk-skill-name b { font-size: var(--t15); line-height: 1; }
.wk-skill-desc { color: var(--plum); }
.wk-tip { color: var(--slate); margin: 0 !important; }
.wk-tip b { color: var(--ink); }
.wk-moves { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--fp) * 3) calc(var(--fp) * 6); align-items: center; margin: 0; }
.wk-moves dt { display: flex; gap: var(--fp); justify-self: start; }
.wk-moves dd { margin: 0; padding-top: calc(var(--fp) * 2); }
.wk-moves small { color: var(--slate); font-size: var(--t1); }
.wk-moves .px-badge { min-height: calc(var(--fp) * 11); padding: var(--fp) calc(var(--fp) * 3) 0; }

/* ---- SUPER UPS: crates */
.wk-ups { list-style: none; margin: calc(var(--fp) * 6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(260px, calc(var(--fp) * 150)), 1fr)); gap: calc(var(--fp) * 6); }
.wk-up { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--fp) * 6); align-items: start; padding: calc(var(--fp) * 5); border: var(--fp) solid var(--ink); background: var(--paper); box-shadow: 0 var(--fp) 0 var(--ink); }
.wk-crate { display: grid; place-items: center; width: calc(var(--fp) * 28); height: calc(var(--fp) * 28); border: var(--fp) solid var(--ink); background: var(--up, var(--gold)); box-shadow: inset 0 calc(var(--fp) * -2) 0 color-mix(in srgb, var(--up, var(--gold)) 60%, var(--ink)), inset 0 var(--fp) 0 color-mix(in srgb, var(--up, var(--gold)) 60%, var(--paper)); }
.wk-up p { margin: 0 0 calc(var(--fp) * 2); }
.wk-up-name { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--fp) * 2) calc(var(--fp) * 4); text-transform: uppercase; }
.wk-up-name b { font-size: var(--t15); line-height: 1; }
.wk-up-desc { color: var(--plum); }
.wk-up-repo { overflow-wrap: anywhere; }
.wk-stars { display: inline-flex; align-items: center; gap: calc(var(--fp) * 2); color: var(--slate); white-space: nowrap; }
.wk-star { display: block; width: calc(var(--fp) * 7); height: calc(var(--fp) * 7); margin-top: calc(var(--fp) * -1); fill: var(--gold-deep); }

/* ---- STAGES: each map at exactly half its pixels, its song, who fights there */
.wk-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(322px, 1fr)); gap: calc(var(--fp) * 8); }
.wk-stage { border: var(--fp) solid var(--ink); background: var(--paper); box-shadow: 0 var(--fp) 0 var(--ink); }
.wk-stage-frame { display: grid; place-items: center; background: var(--night); border-bottom: var(--fp) solid var(--ink); }
.wk-stage-art { width: 320px; height: 180px; max-width: none; background: var(--sky1); }
.wk-stage-text { padding: calc(var(--fp) * 5) calc(var(--fp) * 6) calc(var(--fp) * 6); }
.wk-stage-name { margin: 0 0 calc(var(--fp) * 3); font-family: var(--font-pixel); font-weight: 400; font-size: var(--t15); line-height: 1; text-transform: uppercase; }
.wk-stage-desc { color: var(--plum); }
.wk-stage-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--fp) * 3); color: var(--slate); margin: 0 !important; }
@media (min-width: 1400px) and (min-height: 800px) { .wk-stages { grid-template-columns: repeat(auto-fill, minmax(642px, 1fr)); } .wk-stage-art { width: 640px; height: 360px; } }

/* ---- ABOUT: the story beside the post */
.wk-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--fp) * 16); align-items: start; }
.wk-about-text { display: grid; gap: calc(var(--fp) * 12); }
.wk-about section > p { max-width: 62ch; }
.wk-h { margin: 0 0 calc(var(--fp) * 4); padding-bottom: calc(var(--fp) * 2); border-bottom: var(--fp) solid var(--cloud-shade); font-family: var(--font-pixel); font-weight: 400; font-size: var(--t15); line-height: 1; text-transform: uppercase; }
.wk-social { display: flex; flex-wrap: wrap; gap: calc(var(--fp) * 4); }
.wk-social .px-btn { font-size: var(--t1); text-transform: none; }
.wk-body a.px-btn.is-x, .wk-body a.px-btn.is-x:hover { color: #ffffff; }
.wk-body a.px-btn.is-buy:hover { background: var(--gold-hi); }
.wk-social .px-btn.is-buy { text-transform: uppercase; }
.wk-credits { margin: 0; padding: 0; list-style: none; }
.wk-credits li { position: relative; margin: calc(var(--fp) * 3) 0; padding-left: calc(var(--fp) * 8); }
.wk-credits li::before { content: ""; position: absolute; left: var(--fp); top: .45em; width: calc(var(--fp) * 3); height: calc(var(--fp) * 3); background: var(--gold); box-shadow: 0 0 0 var(--fp) var(--ink); }
.wk-about .tp-card { margin: calc(var(--fp) * 4) 0 calc(var(--fp) * 6); max-width: 580px; }

/* a finger gets 44 CSS px */
@media (pointer: coarse), (max-width: 760px), (max-height: 540px) {
  .wk-back.px-btn { min-height: 44px; min-width: 44px; margin-bottom: calc(var(--fp) * 3); }
  .wk-back-arrow { width: 10px; height: 10px; }
  .wk-demo.px-btn { min-height: 44px; }
}
/* short landscape screens: the file under the stand scrolls with the page */
@media (max-height: 540px) and (orientation: landscape) {
  .wk-screen { padding: 6px 12px 8px; }
  .wk-title { font-size: var(--t15); }
  .wk-tabs .px-tab { font-size: var(--t1); }
  .wk-body { padding: 8px; }
  .wk-heroes { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .wk-name { font-size: var(--t2); }
  .wk-bio { font-size: var(--t1); }
}
/* phones held upright: one column that scrolls; the heads run in a strip across the top */
@media (max-width: 760px) and (orientation: portrait) {
  .wk-screen { padding: 10px 12px 12px; }
  .wk-top { column-gap: 12px; }
  .wk-tabs { flex: 1 0 100%; flex-wrap: nowrap; }
  .wk-tabs .px-tab { flex: 1 1 auto; padding-inline: 4px; font-size: var(--t1); text-align: center; }
  .wk-body, .wk-body[data-tab="heroes"] { overflow: auto; padding: 10px; }
  .wk-heroes { grid-template-columns: minmax(0, 1fr); height: auto; }
  .wk-rail { overflow-x: auto; overflow-y: hidden; margin: 0; padding: 2px 2px 6px; }
  .wk-grid { --cols: 14; grid-template-columns: repeat(14, var(--tile, 56px)); }
  .wk-stand { min-height: 300px; }
  .wk-file { overflow: visible; padding: 0; }
  .wk-name { font-size: var(--t2); }
  .wk-about { grid-template-columns: minmax(0, 1fr); }
  .wk-stages { grid-template-columns: minmax(0, 1fr); }
}