/* noita.css — the Noita page as the game's title screen. Art and font come
   from the game (assets/noita/, see PROVENANCE.md). Sizes are in game pixels
   times --ui, which js/noita/scene.js sets to a whole number of DEVICE pixels
   so the pixel art stays even at any display scaling. */
@font-face {
  font-family: 'NoitaPixel';
  src: url('/assets/noita/fonts/noita-pixel.woff2') format('woff2');
  font-display: block;
}
:root {
  --ui: 2px;                  /* overwritten by scene.js */
  --bg: #2b3f63;
  --text: #ffffff;
  --muted: #a7a19a;
  --accent: #eda949;          /* the gold of the game's 9-piece frames */
  --live: #ff4f30;
  --font-px: 'NoitaPixel', ui-monospace, monospace;
  --idle: rgba(255, 255, 255, 0.62);
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- page + sky ---- */
.nm-body {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(#3e6e9f, #9fc7e6 70%);
  color: var(--text);
  font-family: var(--font-px);
  font-size: calc(var(--ui) * 11);
  line-height: calc(var(--ui) * 11);
  text-shadow: var(--ui) var(--ui) 0 rgba(0, 0, 0, 0.75);
  -webkit-font-smoothing: none;
  font-smooth: never;
}
/* The canvas is a whole number of game pixels, so it can overhang the
   viewport by a pixel or two; the fixed wrapper clips that. */
.nm-world { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.nm-world canvas { display: block; image-rendering: pixelated; }
.nm {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;   /* windows centre like the game's menus */
}
.nm img { image-rendering: pixelated; }
.nm a { color: inherit; text-decoration: none; }
.nm h1, .nm h2, .nm h3 { font: inherit; margin: 0; }
.nm :focus { outline: none; }
.nm :focus-visible { outline: var(--ui) solid var(--accent); outline-offset: var(--ui); }

/* Screens: hidden only once JS is known to run (html.js). */
html.js .nm-screen:not(.is-open) { display: none; }
html:not(.js) .nm-screen { margin-bottom: calc(var(--ui) * 16); }

/* ---- title screen ---- */
.nm-title {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--ui) * 28) calc(var(--ui) * 8) calc(var(--ui) * 8);
}
.nm-logo-sprite {
  display: block;
  width: calc(var(--ui) * 110 * 2); height: calc(var(--ui) * 69 * 2);
  background: url('/assets/noita/logo.png') 0 0 / calc(var(--ui) * 3520 * 2) calc(var(--ui) * 69 * 2) no-repeat;
  image-rendering: pixelated;
  animation: nm-logo 6.4s steps(32, jump-end) infinite; /* 5 fps */
}
@keyframes nm-logo { to { background-position-x: calc(var(--ui) * -3520 * 2); } }

/* The menu draws at its own, slightly larger pixel scale (--ui-menu, set by
   scene.js) so the pixel font stays crisp. */
.nm-menu { --m: var(--ui-menu, calc(var(--ui) * 1.5)); }
.nm-menu ul { list-style: none; margin: calc(var(--ui) * 20) 0 0; padding: 0; text-align: center; }
.nm-menu li { margin: 0 0 calc(var(--m) * 5); }
.nm-menu a {
  display: inline-block; padding: 0 calc(var(--m) * 4); color: var(--idle);
  font-size: calc(var(--m) * 11); line-height: calc(var(--m) * 11);
  text-shadow: var(--m) var(--m) 0 rgba(0, 0, 0, 0.75);
}
.nm-menu a.is-active { color: #fff; }
.nm-menu a.is-active::before, .nm-menu a.is-active::after {
  content: ''; display: inline-block; vertical-align: top;
  width: calc(var(--m) * 3); height: calc(var(--m) * 3);
  margin: calc(var(--m) * 4) calc(var(--m) * 4) 0; background: var(--accent);
  box-shadow: var(--m) var(--m) 0 rgba(0, 0, 0, 0.75);
}
.nm-menu a.is-active:focus-visible { outline: none; }

.nm-status { margin: auto 0 0; color: var(--idle); align-self: flex-start; }
.nm-corner {
  align-self: stretch; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: calc(var(--ui) * 4) calc(var(--ui) * 12); color: var(--idle);
}
.nm-credit { margin: 0; }
.nm-credit a { text-decoration: underline; }
.nm-corner .footer { margin: 0; padding: 0; border: 0; max-width: none; font-size: inherit; color: inherit; gap: calc(var(--ui) * 8); }
.nm-corner .footer a { color: inherit; }

/* ---- windows (map, progress, about, rules): the game's 9-piece frame ---- */
.nm-window {
  position: relative;
  width: min(100% - calc(var(--ui) * 8), calc(var(--ui) * 420));
  margin: auto;
  max-height: calc(100dvh - var(--ui) * 16);
  flex-shrink: 0;
  overflow: auto;
  border: calc(var(--ui) * 2) solid transparent;
  border-image: url('/assets/noita/ui/9piece0.png') 2 fill / calc(var(--ui) * 2) stretch;
  image-rendering: pixelated;
  padding: calc(var(--ui) * 6) calc(var(--ui) * 8);
}
.nm-window h2 { color: var(--accent); margin-bottom: calc(var(--ui) * 6); }
.nm-window h2:focus { outline: none; } /* focused by script on open, not a control */
.nm-text p { margin: 0 0 calc(var(--ui) * 8); max-width: 60ch; }
.nm-text h3 { color: var(--accent); margin: 0 0 calc(var(--ui) * 3); }
.nm-text ul { margin: 0 0 calc(var(--ui) * 8); padding: 0; list-style: none; max-width: 60ch; }
.nm-text li { margin: 0 0 calc(var(--ui) * 3); padding-left: 2ch; text-indent: -2ch; }
.nm-text li::before { content: "- "; }
.nm-dim { color: var(--muted); }
.nm-back { display: inline-block; margin-top: calc(var(--ui) * 4); color: var(--idle); }
.nm-back:hover, .nm-back:focus-visible { color: #fff; }
.nm-back::before { content: '< '; }

/* Map window: as large as the screen allows. */
.nm-map { width: calc(100% - var(--ui) * 8); overflow: visible; max-height: none; }
.nm-map .map-frame {
  height: calc(100dvh - var(--ui) * 84); min-height: 240px;
  border: 0; border-radius: 0; background: rgba(5, 3, 4, 0.55);
  text-shadow: none; font-family: var(--font-body);
}
.nm-map .map-history { color: var(--idle); }
.nm-map .map-history-date { color: #fff; font-weight: normal; }

@media (prefers-reduced-motion: reduce) {
  .nm-logo-sprite { animation: none; }
}

/* ---- progress screen: the game's Progress menu ---- */
.nm-progress { overflow: visible; max-height: none; }
#progress-panel { position: relative; }
.np-head { display: flex; flex-wrap: wrap; gap: 0 calc(var(--ui) * 12); margin-bottom: calc(var(--ui) * 6); }
.np-won { color: var(--accent); }
.np-dim, .np-status { color: var(--muted); }

.np-tabs { display: flex; gap: calc(var(--ui) * 2); align-items: flex-end; }
.np-tabs [role=tab] {
  font: inherit; color: var(--idle); background: none; cursor: pointer; text-shadow: inherit;
  height: calc(var(--ui) * 20); padding: 0 calc(var(--ui) * 6);
  border: solid transparent; border-width: calc(var(--ui) * 3) calc(var(--ui) * 3) 0;
  border-image: url('/assets/noita/ui/tab.png') 3 3 0 3 fill / calc(var(--ui) * 3) calc(var(--ui) * 3) 0 stretch;
  image-rendering: pixelated;
}
.np-tabs [role=tab]:hover, .np-tabs [role=tab]:focus-visible {
  color: #fff; border-image-source: url('/assets/noita/ui/tab_hovered.png'); outline: none;
}
.np-tabs [role=tab][aria-selected=true] {
  color: #fff; height: calc(var(--ui) * 22);
  border-image-source: url('/assets/noita/ui/tab_selected.png');
}
.np-count { color: var(--accent); }

.np-pane {
  background: #111; padding: calc(var(--ui) * 4);
  max-height: calc(100dvh - var(--ui) * 124); overflow-y: auto;
}
.np-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--ui) * 1); }
.np-grid li { display: block; }
.np-tile {
  position: relative; display: block; padding: 0; margin: 0; border: 0; cursor: default;
  width: calc(var(--ui) * 21); height: calc(var(--ui) * 21);
  background: url('/assets/noita/ui/grid_box.png') 0 0 / 100% 100%;
  image-rendering: pixelated; font: inherit; color: #fff;
}
.np-tile[data-i] { cursor: pointer; }
.np-unknown { background-image: url('/assets/noita/ui/icon_unknown.png'), url('/assets/noita/ui/grid_box_unknown.png');
  background-size: calc(var(--ui) * 16) calc(var(--ui) * 16), 100% 100%;
  background-position: calc(var(--ui) * 2) calc(var(--ui) * 2), 0 0; background-repeat: no-repeat; }
.np-tile[class*=np-type-]::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: calc(var(--ui) * 20); height: calc(var(--ui) * 20);
  background: var(--frame) 0 0 / 100% 100%; image-rendering: pixelated;
}
.np-type-projectile { --frame: url('/assets/noita/ui/item_bg_projectile.png'); }
.np-type-static_projectile { --frame: url('/assets/noita/ui/item_bg_static_projectile.png'); }
.np-type-modifier { --frame: url('/assets/noita/ui/item_bg_modifier.png'); }
.np-type-draw_many { --frame: url('/assets/noita/ui/item_bg_draw_many.png'); }
.np-type-material { --frame: url('/assets/noita/ui/item_bg_material.png'); }
.np-type-other { --frame: url('/assets/noita/ui/item_bg_other.png'); }
.np-type-utility { --frame: url('/assets/noita/ui/item_bg_utility.png'); }
.np-type-passive { --frame: url('/assets/noita/ui/item_bg_passive.png'); }
.np-ico {
  position: absolute; left: calc(var(--ui) * 2); top: calc(var(--ui) * 2);
  width: calc(var(--ui) * 16); height: calc(var(--ui) * 16);
  background: var(--atlas) no-repeat;
  background-size: calc(var(--ui) * var(--aw)) calc(var(--ui) * var(--ah));
  background-position: calc(var(--ui) * -16 * var(--c)) calc(var(--ui) * -16 * var(--r));
  image-rendering: pixelated;
}
.np-abbr { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; }
.np-tile[data-i]:hover::after, .np-tile[data-i]:focus-visible::after, .np-tile.is-selected::after {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/noita/ui/grid_highlight_new.png') 0 0 / 100% 100%; image-rendering: pixelated;
}
.np-tile:focus-visible { outline: none; }

.np-tip {
  position: absolute; z-index: 5; pointer-events: none; white-space: nowrap;
  padding: calc(var(--ui) * 3) calc(var(--ui) * 5);
  border: calc(var(--ui) * 2) solid transparent;
  border-image: url('/assets/noita/ui/9piece0.png') 2 fill / calc(var(--ui) * 2) stretch;
  image-rendering: pixelated;
}
.np-tip b { font-weight: normal; color: #fff; }
.np-detail[hidden] { display: none; }
#progress-panel:has(.np-detail:not([hidden])) .np-pane { max-height: calc(100dvh - var(--ui) * 152); }
.np-detail { display: flex; gap: calc(var(--ui) * 6); align-items: center; margin-top: calc(var(--ui) * 6); min-height: calc(var(--ui) * 24); }
.np-detail > .np-ico, .np-detail > .np-abbr { flex: none; position: relative; width: calc(var(--ui) * 16); height: calc(var(--ui) * 16); }
.np-detail b { font-weight: normal; }