/* Aswang Barrio. No transitions or keyframes here: all motion is in JavaScript (workspace rule). */
/* Bangers is only for the canvas (house signs, the sleeping z); the game's screens are Barlow Condensed; the title and How to Play use Antonio and Barlow Semi Condensed */
@font-face {
  font-family: "Bangers";
  src: url("fonts/bangers-latin.woff2") format("woff2");
  font-display: swap;
}
/* Antonio 700 (SIL OFL, fonts/antonio-OFL.txt): the title logo and the How to Play headings */
@font-face {
  font-family: "Antonio";
  src: url("fonts/antonio-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Barlow Semi Condensed 500 (SIL OFL, fonts/barlow-semi-condensed-OFL.txt): the title menu and the How to Play text */
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fonts/barlow-semi-condensed-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* the noir look: the HUD's colours and Barlow Condensed.
   Off-white #d8d3c6, dim #9a958a, brass #c6a256, blood #c4544a, good #8fbf7e. */
:root {
  --ink: #0a0c12;
  --night: #0b0820;
  --text: #d8d3c6;
  --muted: #9a958a;
  --brass: #c6a256;
  --warn: #c4544a;
  --good: #8fbf7e;
  --edge: rgba(216, 211, 198, 0.28);
  --plate: rgba(10, 12, 18, 0.62);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow Condensed", "Arial Narrow", sans-serif;
  --menu: "Barlow Semi Condensed", "Barlow Condensed", "Arial Narrow", sans-serif; /* the title menu and the How to Play text */
  --logo: "Antonio", "Arial Narrow", Impact, sans-serif; /* the title logo and the How to Play headings only */
  --red: #c8161e; /* the logo's B and R, the menu's focus line */
  --bone: #e9e6df;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body { display: grid; place-items: center; }

/* the game keeps 16:9 and letterboxes; everything inside sizes off it (cqh). On a phone it is as wide as the
   screen (--aspect, set by main.js from config.js VIEW), less an iPhone's notch or Dynamic Island at the sides */
.stage {
  position: relative;
  width: min(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px), 100dvh * var(--aspect, 16 / 9));
  aspect-ratio: var(--aspect, 16 / 9);
  container-type: size;
  overflow: hidden;
  background: var(--night);
}
#game, #hud { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hud { pointer-events: none; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2cqh;
  padding: 4cqh 4cqw;
  text-align: center;
  font-weight: 600;
}
.screen[hidden], .pad[hidden], [hidden] { display: none !important; }

/* the loading bar: on screen from the page's first paint until the title (and while a later night waits for its
   pictures, art.js LATER); main.js sets the fill's width (for CrazyGames' "show feedback while it loads") */
.loading { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4cqh; background: var(--night); }
.loading-name { margin: 0; font: 700 7cqh/1 var(--logo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.loading-name .red { color: var(--red); }
.loading-bar { width: min(60cqh, 70cqw); height: max(4px, 0.9cqh); background: rgba(216, 211, 198, 0.14); }
.loading-bar i { display: block; height: 100%; width: 0; background: var(--brass); }
/* the achievement toast off the street (main.js menuToast): the HUD toast's look, top right over the menus */
.ach-toast { position: absolute; top: 2.5cqh; right: 2.5cqh; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4cqh; padding: 1.4cqh 2cqh 1.4cqh 2.6cqh; border-left: 2px solid var(--red); background: rgba(10, 12, 18, 0.88); pointer-events: none; transition: opacity 0.25s; }
.ach-toast[hidden] { display: none; }
.ach-toast span { font: 700 max(10px, 1.9cqh)/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }
.ach-toast b { font: 700 max(13px, 2.9cqh)/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.ach-toast i { font: 500 max(11px, 2.2cqh)/1.1 var(--display); font-style: normal; color: var(--muted); }
.loading-word { margin: 0; font: 600 max(11px, 2.6cqh)/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }

/* title card: one line of tall condensed capitals, BARRIO in bone and NIGHTS in red, a small plain menu under it, the
   dim night street behind. No cracks and no red initials: together with the old name they read as Resident Evil's logo
   (Ernest, 2026-11-05, renamed for CrazyGames). Everything is still (the stylesheet has no animations). */
/* the logo and the menu are one block centred on the screen, kept clear of the Best line under it (Ernest, 2026-11-05:
   on a phone the card sat high with a big gap under Settings, on a desktop it sat low; it was pinned from the top).
   The padding under it evens the drawn letters' space: as much dark above the logo as under the last item, with or
   without Continue (Ernest, 2026-11-05: "the top and bottom space are not balance"; 9cqh left 5% more under it). A short
   screen less still: its items keep a finger's 44px, taller than their text */
.title {
  padding-bottom: 4.4cqh;
  gap: 0;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.66) 80%),
    rgba(0, 0, 0, 0.5);
}
.logo {
  margin: 0;
  padding: 0.02em 0.05em 0.08em;
  font: 700 min(8.9cqw, 25cqh)/1 var(--logo);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
  text-shadow: 0 0.5cqh 2.4cqh rgba(0, 0, 0, 0.8);
}
.logo .red { color: var(--red); }
/* the title's and How to Play's sizes go with the screen (cqh), a px floor for small phones and no cap: capped, they
   stayed phone-sized on a desktop (Ernest, 2026-11-03: "it looks too small on desktop view") */
.subtitle {
  margin: 1.6cqh 0 0;
  padding-left: 0.35em;
  font: 600 max(11px, 3.6cqh)/1 var(--logo);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(233, 230, 223, 0.7);
}
.menu { display: flex; flex-direction: column; align-items: center; gap: 2.4cqh; margin-top: 10cqh; }
/* plain small text: the focused item is full white with a short red line under it (the line a third of an em
   under the text and the items well apart: Ernest, 2026-11-03, "too close") */
.menu-item {
  position: relative;
  min-height: 44px;
  padding: 0.6cqh 2cqh 1.4cqh;
  border: 0;
  background: none;
  font: 500 max(15px, 3.8cqh)/1.1 var(--menu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 230, 223, 0.7);
  cursor: pointer;
}
.menu-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1.8em;
  height: max(2px, 0.3cqh);
  margin-left: -0.9em;
  background: var(--red);
  display: none;
}
.menu-item:focus { outline: none; color: #fff; }
.menu-item:focus::after { display: block; }
/* the pause screen: the title's heading face and menu items (Ernest, 2026-11-03: "the style of the main menu or the HUD") */
.pause { gap: 0; }
/* (.panel too, so it wins over the panels' h2 rule: both screens are panels) */
.panel .pause-title {
  margin: 0;
  font: 700 max(22px, 9cqh)/1 var(--logo);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 0 0.5cqh 2.4cqh rgba(0, 0, 0, 0.8);
}
.pause .menu { margin-top: 5cqh; }
/* a phone's title: its items keep a finger's 44px, so the menu sits closer under the logo to fit over the Best line;
   with Continue too (a save haven: four items) closer still, and the items touch, each still 44px */
html[data-touch] .title .menu { margin-top: 6cqh; }
html[data-touch] .title.has-continue .menu { margin-top: 3cqh; gap: 0; }
@media (max-height: 500px) { .title { padding-bottom: 2.4cqh; } }
/* Settings' gear, the top right corner of the title: the menu's bone, white with the red line when focused */
.title-gear {
  position: absolute;
  top: 2.5cqh;
  right: 3cqw;
  display: grid;
  place-items: center;
  width: max(44px, 7cqh);
  height: max(44px, 7cqh);
  padding: 0 0 0.8cqh;
  border: 0;
  background: none;
  color: rgba(233, 230, 223, 0.7);
  cursor: pointer;
}
.title-gear svg { width: 100%; height: 100%; padding: 12%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.title-gear::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 60%; height: max(2px, 0.3cqh); margin-left: -30%; background: var(--red); display: none; }
.title-gear:focus { outline: none; color: #fff; }
.title-gear:focus::after { display: block; }
/* Settings' Reset progress question, between its menu items */
.reset-ask { margin: 0; padding: 1.4cqh 2cqh 0; font: 500 max(15px, 3.8cqh)/1.1 var(--menu); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone); }
.best { position: absolute; left: 0; right: 0; bottom: 3cqh; margin: 0; min-height: 1.2em; font: 500 max(10px, 2.4cqh) var(--menu); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(233, 230, 223, 0.4); }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35em;
  margin: 0 0.1em;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: rgba(10, 12, 18, 0.55);
  font: 700 0.9em/1.3 var(--display);
  letter-spacing: 0.06em;
  color: var(--text);
}

/* the screens' buttons are the main menu's .menu-item (Ernest, 2026-11-06: every screen like the main menu); only the death
   screen's revive is a box, the one big red button */
.menu-item:disabled { opacity: 0.35; cursor: default; }
.btn-red {
  font: 700 4.8cqh/1.05 var(--menu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.4cqh 4.4cqh;
  min-height: 44px;
  border: 1px solid var(--red);
  border-radius: 2px;
  background: rgba(200, 22, 30, 0.78);
  color: #fff;
  cursor: pointer;
}
.btn-red:hover, .btn-red:focus { outline: none; background: #e0202a; border-color: #fff; }
.btn-red:active { background: #a8121a; }
.btn-red:disabled { opacity: 0.35; cursor: default; }

/* panels: see-through like the HUD plates (main.js leaves the HUD off while a panel is open) */
.panel { background: rgba(10, 12, 18, 0.55); }
.panel > * { max-width: 92cqw; }
/* (the logo's face, as .pause-title and How to Play's headings: Ernest, 2026-11-06) */
.panel h2 { margin: 0; font: 700 8cqh/1.05 var(--logo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); -webkit-text-stroke: 0; text-shadow: 0 0.3cqh 1.6cqh rgba(0, 0, 0, 0.7); }
.panel p { margin: 0; font-size: 3.4cqh; font-weight: 600; letter-spacing: 0.04em; }
.panel .sub { color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
/* what the night earned (main.js showEarned): one line of achievement names, in the brass of the prices */
.panel .earned { font: 600 max(11px, 2.8cqh)/1.25 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); text-align: center; }
.panel .earned[hidden] { display: none; }

/* the pre-run screen: four rows (the label, an arrow each side of the choice that shows what it gives and costs, or the
   achievement that unlocks it), then Back and Start. The focused row gets the menu's focus (see "a focused box" below);
   a locked choice is dimmed. */
.prerun { gap: 1.4cqh; padding: 2.6cqh 4cqw; background: rgba(10, 12, 18, 0.72); }
.prerun h2 { font-size: 5.4cqh; }
.pr-rows { list-style: none; margin: 0; padding: 0; width: min(150cqh, 92cqw); max-width: none; display: flex; flex-direction: column; gap: 1.1cqh; }
.pr-row { display: grid; grid-template-columns: max(66px, 11cqh) 44px minmax(0, 1fr) 44px; align-items: stretch; gap: 0.8cqh; }
.pr-label { align-self: center; text-align: left; font: 700 max(11px, 2.4cqh)/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
/* (no box, the menu item's colour: Ernest, 2026-11-06) */
.pr-arrow { min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; color: rgba(233, 230, 223, 0.7); font: 700 max(20px, 4.2cqh)/1 var(--display); cursor: pointer; }
.pr-arrow:hover, .pr-arrow:focus { outline: none; color: #fff; }
.pr-main { display: flex; flex-direction: column; justify-content: center; gap: 0.3cqh; min-height: 44px; padding: 0.7cqh 1.6cqh; border: 1px solid var(--edge); border-radius: 2px; background: var(--plate); color: var(--text); text-align: left; font-family: var(--display); cursor: pointer; }
.pr-main:hover { border-color: rgba(216, 211, 198, 0.5); }
.pr-name { display: flex; align-items: center; gap: 1cqh; font: 700 max(14px, 3.4cqh)/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; }
.pr-swatch { flex: none; width: 1.1em; height: 1.1em; border: 1px solid rgba(233, 230, 223, 0.6); border-radius: 50%; }
.pr-tag { margin-left: auto; font-size: 0.7em; letter-spacing: 0.18em; color: var(--warn); }
.pr-note { font: 600 max(11px, 2.4cqh)/1.2 var(--display); letter-spacing: 0.04em; color: var(--muted); }
.pr-note .pr-cost { color: var(--warn); }
.pr-main.locked { background: rgba(10, 12, 18, 0.4); }
.pr-main.locked .pr-name { color: var(--muted); }
.pr-hint { display: flex; justify-content: center; gap: 2.4cqh; font: 600 max(10px, 2.2cqh)/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pr-acts { display: flex; gap: 2cqh; }
.pr-warn { display: flex; flex-direction: column; align-items: center; gap: 2cqh; width: min(110cqh, 92cqw); text-align: center; }
.pr-warn h3 { margin: 0; font: 700 max(20px, 4.6cqh)/1.1 var(--logo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); }
.pr-warn p { margin: 0; font: 600 max(14px, 3.2cqh)/1.35 var(--display); letter-spacing: 0.04em; color: var(--text); text-wrap: balance; }
@media (pointer: coarse) { .pr-hint { display: none; } }

.rows { border-collapse: collapse; font-size: 3.6cqh; min-width: 62cqh; }
.rows tr + tr { border-top: 1px solid rgba(216, 211, 198, 0.14); }
.rows th { text-align: left; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.8cqh 3cqh 0.8cqh 0; }
.rows td { text-align: right; font-weight: 700; color: var(--text); letter-spacing: 0.04em; white-space: nowrap; }

/* the store: a sign and the wallet across the top, the four guns as cards (the painted gun, four brass bars, its
   buttons), the supplies in a row under them, Next at the bottom. The same plates, edges, brass and Barlow Condensed
   as the other panels; a button that can't be bought now stays focusable (aria-disabled) so the arrow keys pass over it. */
.store { justify-content: flex-start; gap: 1.1cqh; padding: 3.2cqh 4cqw 2.6cqh; background: rgba(10, 12, 18, 0.7); }
.store > * { width: min(152cqh, 92cqw); max-width: none; }
.store > .menu-item { width: auto; flex: none; }
.store-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqh; padding-bottom: 1.2cqh; border-bottom: 1px solid var(--edge); flex: none; text-align: left; }
.store-head h2 { font-size: 5.8cqh; }
.panel .store-tonight { margin-top: 0.6cqh; font: 600 max(10px, 2.6cqh)/1.2 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* the sari-sari's hand-lettered "no credit" sign by the name, and what Tessie says as the store opens (config.js TESSIE) */
.store-utang { display: inline-block; margin-left: 1.4cqh; padding: 0.3cqh 0.9cqh; border: 1px solid var(--warn); vertical-align: middle; font: 700 max(9px, 2.1cqh)/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--warn); transform: rotate(-2deg); }
.store-utang small { font-size: 0.85em; letter-spacing: 0.08em; text-transform: none; }
.panel .store-quip { margin-top: 0.5cqh; font: italic 500 max(10px, 2.5cqh)/1.25 var(--display); color: var(--bone); opacity: 0.85; }
.store-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6cqh; flex: none; }
.panel .store-money { font: 700 6cqh/1 var(--display); letter-spacing: 0.04em; color: var(--brass); }
.panel .store-hp { font: 600 max(10px, 2.6cqh)/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); }
.store-list { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2cqh; text-align: left; scrollbar-width: thin; scrollbar-color: rgba(216, 211, 198, 0.25) transparent; }
/* a section's name: small spaced capitals with a red tick, a hairline running out to the right */
.store-sec { display: flex; align-items: center; gap: 1.4cqh; margin: 0.4cqh 0 0; font: 700 max(10px, 2.4cqh)/1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.store-sec::before { content: ""; width: 0.5cqh; min-width: 2px; height: 1.1em; background: var(--red); }
.store-sec::after { content: ""; flex: 1; height: 1px; background: rgba(216, 211, 198, 0.14); }
/* a teaser for the updates at the line's far end (Ernest, 2026-11-06) */
.store-sec::after { order: 1; }
.store-soon { order: 2; padding-right: 0.6em; letter-spacing: 0.18em; color: rgba(233, 230, 223, 0.62); }
.store-guns, .store-supplies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4cqh; }
.store-supplies { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* a gun's card */
.gun-card { display: flex; flex-direction: column; gap: 0.7cqh; padding: 1.2cqh 1.6cqh 1.4cqh; border: 1px solid var(--edge); border-radius: 2px; background: rgba(10, 12, 18, 0.6); min-width: 0; }
.gun-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqh; }
.gun-name { font: 700 max(11px, 3cqh)/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gun-tag { flex: none; font: 700 max(9px, 2.2cqh)/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.gun-card.owned .gun-tag { color: var(--bone); }
/* the picture on a soft pool of light, as a gun laid out on the counter */
.gun-pic { height: 11.5cqh; flex: none; padding: 0.8cqh 1cqh; background: radial-gradient(ellipse at 50% 55%, rgba(216, 211, 198, 0.13), rgba(216, 211, 198, 0) 70%), rgba(0, 0, 0, 0.25); border-radius: 2px; }
.gun-pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.6cqh 0.8cqh rgba(0, 0, 0, 0.6)); }
.gun-card.for-sale .gun-pic img { filter: drop-shadow(0 0.6cqh 0.8cqh rgba(0, 0, 0, 0.6)) brightness(0.8); }
.gun-bars { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.5cqh 1.4cqh; margin: 0; }
.gun-bars dt { font: 600 max(9px, 2.2cqh)/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.gun-bars dd { margin: 0; height: 1cqh; min-height: 4px; background: rgba(216, 211, 198, 0.1); }
.gun-bars dd i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--bone); }
.gun-note { min-height: 2.4em; margin: 0;font: 600 max(10px, 2.4cqh)/1.2 var(--display) !important; letter-spacing: 0.03em !important; color: var(--muted); }
.gun-acts { display: flex; flex-direction: column; gap: 0.8cqh; margin-top: auto; }

/* the store's buttons: a plate with its name on the left and its price (or count) in brass on the right */
.item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "note price";
  align-items: center;
  gap: 0.2cqh 1.2cqh;
  padding: 0.7cqh 1.4cqh;
  text-align: left;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: rgba(10, 12, 18, 0.6);
  color: var(--text);
  cursor: pointer;
  font-family: var(--body);
}
.item:hover:not([aria-disabled="true"]) { background: rgba(216, 211, 198, 0.12); border-color: rgba(216, 211, 198, 0.5); }
.item[aria-disabled="true"] { cursor: default; background: rgba(10, 12, 18, 0.35); border-color: rgba(216, 211, 198, 0.12); }
.item-name { grid-area: name; font: 700 max(10px, 2.6cqh)/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-note { grid-area: note; font: 600 max(9px, 2.2cqh)/1.15 var(--display); letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-price { grid-area: price; font: 700 max(11px, 3cqh)/1 var(--display); letter-spacing: 0.04em; color: var(--brass); white-space: nowrap; }
.item[aria-disabled="true"] .item-name { color: rgba(216, 211, 198, 0.4); }
.item[aria-disabled="true"] .item-note { color: rgba(154, 149, 138, 0.5); }
.item[aria-disabled="true"] .item-price { color: rgba(198, 162, 86, 0.4); }
/* a gun for sale: a plain plate like the others, only its price brass (Ernest, 2026-11-06: gold is money only) */
.item.buy .item-price { color: #ecdcae; }
/* the pistol's ammo: never bought, only shown */
.item.still { cursor: default; background: none; border-style: dashed; border-color: rgba(216, 211, 198, 0.16); }
/* a supply: its icon, its name and note, its price */
.item.supply { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon name price" "icon note price"; column-gap: 1.6cqh; padding: 0.8cqh 1.8cqh; }
.supply .item-note { white-space: normal; }
/* a short screen (a phone on its side): the px floors make the words bigger than the cards were sized for, so the
   gun's line and some of the picture go */
@container (max-height: 460px) {
  .gun-note { display: none; }
  .gun-pic { height: 9.5cqh; }
  .store-head h2 { font-size: 5cqh; }
}
.supply .gi { grid-area: icon; width: max(22px, 5.4cqh); height: max(22px, 5.4cqh); margin: 0; background: rgba(216, 211, 198, 0.75); }
.supply[aria-disabled="true"] .gi { background: rgba(216, 211, 198, 0.3); }

/* a gun's Tune Up sheet: the gun and the pesos, four stat rows (pips, now -> next, price), the exclusive set apart under them,
   in the middle of the screen for every gun (auto margins rather than justify-content: center, so a short screen still
   keeps the head in view) */
.tune { justify-content: flex-start; gap: 1.6cqh; padding-block: 3cqh; overflow: hidden; background: rgba(10, 12, 18, 0.66); }
.tune > :first-child { margin-top: auto; }
.tune > :last-child { margin-bottom: auto; }
.tune-head { display: flex; align-items: center; gap: 3cqh; flex: none; }
.tune-head h2 { font-size: 6.4cqh; }
.tune-gun { width: 24cqh; height: 11cqh; flex: none; object-fit: contain; filter: drop-shadow(0 0.6cqh 0.8cqh rgba(0, 0, 0, 0.6)); }
.tune-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2cqh; width: min(150cqh, 92cqw); overflow-y: auto; min-height: 0; flex: 0 1 auto; }
.tune-row {
  width: 100%;
  display: grid;
  grid-template-columns: 24% 1fr 30% 12%;
  align-items: center;
  gap: 1cqh 2cqh;
  padding: 1.3cqh 2.4cqh;
  text-align: left;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: rgba(10, 12, 18, 0.6);
  color: var(--text);
  cursor: pointer;
  font-family: var(--body);
}
.tune-row:hover:not(.off) { background: rgba(216, 211, 198, 0.12); border-color: rgba(216, 211, 198, 0.5); }
.tune-row.off { cursor: default; background: rgba(10, 12, 18, 0.35); border-color: rgba(216, 211, 198, 0.12); }
.tune-name { font: 700 3.6cqh/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.tune-pips { display: flex; gap: 0.9cqh; flex-wrap: wrap; }
.tune-pips i { width: 2.4cqh; height: 2.4cqh; border: 1px solid var(--bone); border-radius: 1px; transform: rotate(45deg) scale(0.8); }
.tune-pips i.on { background: var(--bone); }
.tune-vals { font: 600 3cqh/1.1 var(--display); letter-spacing: 0.04em; color: var(--muted); }
.tune-price { font: 700 3.8cqh/1 var(--display); letter-spacing: 0.04em; color: var(--brass); text-align: right; white-space: nowrap; }
.tune-row.off .tune-name { color: rgba(216, 211, 198, 0.55); }
.tune-row.off .tune-price { color: rgba(198, 162, 86, 0.45); }
.tune-row.maxed .tune-price { color: var(--muted); font-size: 3cqh; letter-spacing: 0.12em; }
.tune-row.maxed .tune-vals { color: var(--text); }
/* the exclusive: apart from the four, a plain plate once it can be had and a padlock look while it can't */
.tune-exclusive { grid-template-columns: 1fr auto; grid-template-areas: "name price" "note price"; margin-top: 1.2cqh; }
.tune-exclusive .tune-name { grid-area: name; }
.tune-exclusive .tune-note { grid-area: note; font: 600 2.8cqh/1.15 var(--display); letter-spacing: 0.03em; color: var(--muted); }
.tune-exclusive .tune-price { grid-area: price; }
.tune-exclusive.locked { border-style: dashed; border-color: rgba(216, 211, 198, 0.25); background: rgba(10, 12, 18, 0.35); }
.tune-exclusive.locked .tune-name { color: rgba(216, 211, 198, 0.5); }
.tune-exclusive.locked .tune-name::before { content: "🔒 "; filter: grayscale(1); font-size: 0.8em; }
.tune-exclusive.maxed .tune-price { color: #ecdcae; }
/* a focused box (pre-run rows, Tune Up rows, the store's buttons): the menu's focus in a frame, the edge light, the name
   white and a short red bar inside the left edge, as How to Play's list marker (Ernest, 2026-11-06). After the rows'
   own rules so it wins over their dimmed names. */
.pr-main, .tune-row, .item { position: relative; }
.pr-main:focus, .tune-row:focus-visible, .item:focus-visible { outline: none; border-color: rgba(233, 230, 223, 0.6); }
.pr-main:focus::before, .tune-row:focus-visible::before, .item:focus-visible::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; background: var(--red); }
.pr-main:focus .pr-name, .tune-row:focus-visible .tune-name, .item:focus-visible .item-name { color: #fff; }

/* How to Play: an options screen like the Resident Evil 2 remake's. The title scene dimmed behind it; a header, a column of
   sections on the left, the open one's rows on the right, a hint bar at the bottom. Flat, no decoration. */
.howto-panel {
  --fs: max(13px, 2.8cqh);
  display: grid;
  grid-template-columns: minmax(0, 24fr) minmax(0, 76fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "head head" "list right" "hint hint";
  column-gap: 4cqw;
  row-gap: 2.4cqh;
  align-items: stretch;
  justify-content: stretch;
  padding: 4.5cqh 5cqw 3.2cqh;
  background: rgba(6, 9, 12, 0.85);
  overflow: hidden;
  text-align: left;
  font-weight: 500;
  font-size: var(--fs);
  color: rgba(233, 230, 223, 0.85);
}
.ht-head { grid-area: head; display: flex; align-items: center; gap: 1.6cqh; }
.ht-head h2 { margin: 0; font: 700 max(22px, 5.6cqh)/1 var(--logo); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.ht-back {
  min-width: 44px;
  min-height: 44px;
  margin-left: -1.2cqh;
  border: 0;
  background: none;
  font: 700 max(26px, 6.4cqh)/1 var(--logo);
  color: rgba(233, 230, 223, 0.7);
  cursor: pointer;
}
.ht-back:hover, .ht-back:focus { outline: none; color: #fff; }
.file-list { grid-area: list; display: flex; flex-direction: column; align-items: stretch; align-self: start; gap: 0.4cqh; min-width: 0; padding-top: 1cqh; }
.file {
  position: relative;
  width: 100%;
  min-height: 40px;
  padding: 0.6cqh 0 0.6cqh 1.6cqh;
  border: 0;
  background: none;
  text-align: left;
  font: 500 var(--fs)/1.2 var(--menu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(233, 230, 223, 0.55);
  cursor: pointer;
}
.file:hover, .file:focus { outline: none; color: rgba(255, 255, 255, 0.9); }
.file[aria-pressed="true"] { color: #fff; transform: translateX(6px); }
.file[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; background: var(--red); }

.ht-right { grid-area: right; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.2cqh; }
/* the open section scrolls inside itself; the header and the hint bar stay put */
.ht-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 1.6cqh 1cqh 0;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 230, 223, 0.25) transparent;
}
.doc[hidden] { display: none; }
.doc h3 { margin: 0; padding-bottom: 1.2cqh; border-bottom: 1px solid rgba(233, 230, 223, 0.3); font: 700 max(20px, 4.8cqh)/1.1 var(--logo); letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone); }
.doc h3 small { font: 500 var(--fs) var(--menu); letter-spacing: 0.04em; text-transform: none; color: rgba(233, 230, 223, 0.55); }
.doc ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs); line-height: 1.35; letter-spacing: 0.02em; }
.doc li { display: grid; grid-template-columns: max(28px, 1.6em) minmax(0, 1fr); align-items: start; column-gap: 1.6cqh; padding: 1.5cqh 0; border-top: 1px solid rgba(255, 255, 255, 0.08); overflow-wrap: anywhere; }
.doc li:first-child { border-top: 0; }
.gi { display: block; width: max(24px, 1.35em); height: max(24px, 1.35em); margin: -2px 2px 0; background: rgba(233, 230, 223, 0.85); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
/* controls: the action on the left, its keys as small outlined caps on the right */
.doc .howto-keys li, .doc .howto-pad li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3cqh; align-items: center; }
.howto-panel kbd { min-width: 1.7em; margin: 0 0.15em; padding: 0.05em 0.45em; border: 1px solid rgba(233, 230, 223, 0.45); border-radius: 3px; background: none; font: 500 0.9em/1.3 var(--menu); letter-spacing: 0.06em; text-align: center; color: var(--bone); }
.keys { text-align: right; }
.excl { display: grid; grid-template-columns: auto 1fr; gap: 0.5cqh 3cqh; margin: 1cqh 0 0; }
.excl dt { color: rgba(233, 230, 223, 0.6); }
.excl dd { margin: 0; color: var(--bone); text-transform: uppercase; letter-spacing: 0.1em; }
.doc .doc-note { margin: 0; padding: 1.5cqh 0 0 calc(max(28px, 1.6em) + 1.6cqh); border-top: 1px solid rgba(255, 255, 255, 0.08); font: 500 var(--fs) var(--menu); color: rgba(233, 230, 223, 0.6); }
html:not([data-touch]) .howto-pad, html[data-touch] .howto-keys { display: none; }
.credit { flex: none; margin: 0; font: 500 max(10px, 2cqh) var(--menu) !important; letter-spacing: 0.06em; color: rgba(233, 230, 223, 0.45); }

/* the Journal: the tabs, and under Bestiary the four monsters, on the left; the open page on the right. Earned entries
   are lit with a red line, the rest dimmed. */
.j-monsters { display: flex; flex-direction: column; margin-top: 1.4cqh; padding-top: 1cqh; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.j-monsters[hidden] { display: none; }
/* a teaser for the updates under the monsters (Ernest, 2026-11-06) */
.j-soon { margin: 1cqh 0 0; padding-top: 1.4cqh; border-top: 1px solid rgba(255, 255, 255, 0.08); font: italic 600 max(11px, 2.6cqh)/1.3 var(--display); letter-spacing: 0.06em; color: rgba(233, 230, 223, 0.62); }
.journal .doc h4 { margin: 0; padding: 1.8cqh 0 0.6cqh; font: 600 var(--fs) var(--menu); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(233, 230, 223, 0.55); }
.journal .doc h4:first-of-type { padding-top: 0.6cqh; }
.journal .doc li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3cqh; align-items: center; position: relative; padding-left: 1.6cqh; opacity: 0.45; }
.journal .doc li.earned { opacity: 1; }
.journal .doc li.earned::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; background: var(--red); }
.j-name { display: block; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
/* each line its own colour (Ernest, 2026-11-05: "so that the player knows that it is the reward"): the name bone, the
   goal a softer grey, the reward brass under a small "Reward" label, the progress bone, the date earned green */
.j-goal { display: block; color: rgba(233, 230, 223, 0.78); }
.j-reward { display: block; font-size: 0.9em; color: var(--brass); }
.j-reward::before { content: "Reward  "; font-size: 0.8em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(198, 162, 86, 0.7); white-space: pre; }
.j-side { text-align: right; font-size: 0.9em; letter-spacing: 0.06em; color: var(--bone); white-space: nowrap; }
.j-side small { display: block; font-size: 0.85em; color: var(--good); }
.j-side small::before { content: "Earned "; }
.j-page p { margin: 0; padding: 1.5cqh 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: var(--fs); line-height: 1.45; letter-spacing: 0.02em; }
.j-page p:first-of-type { border-top: 0; }
.j-page .j-count { color: var(--bone); }
.j-page .j-count b { letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233, 230, 223, 0.6); }
.j-page .j-more { color: rgba(233, 230, 223, 0.6); }

/* the hint bar, bottom right: the keys on a pointer device, a Back button on touch */
.ht-hint { grid-area: hint; display: flex; justify-content: flex-end; align-items: center; gap: 4cqh; font: 500 max(11px, 2.2cqh) var(--menu); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(233, 230, 223, 0.55); }
.hint-touch { min-height: 40px; padding: 0 1cqh; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
html:not([data-touch]) .hint-touch, html[data-touch] .hint-keys { display: none; }
.ht-hint kbd { font-size: 1em; }

/* the top right corner, past the place name and the night's objective (gfx/hud.js PLACE_R); the top centre is the message line's */
.btn-pause {
  position: absolute;
  top: 1.2cqh;
  right: 3cqh;
  width: 6cqh;
  height: 6cqh;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid rgba(216, 211, 198, 0.45);
  border-radius: 50%;
  background: rgba(10, 12, 18, 0.55);
  color: var(--bone);
  font: 700 3.2cqh/1 var(--logo);
  letter-spacing: 0.06em;
  cursor: pointer;
}

/* touch controls: round plates, their words in the title menu's letters (spaced caps), as the HUD's (gfx/hud.js) */
.pad { position: absolute; inset: auto 0 0 0; display: none; justify-content: space-between; align-items: flex-end; padding: 0 3cqw 3cqh; pointer-events: none; }
html[data-touch] .pad:not([hidden]) { display: flex; }
.pad-move, .pad-fight { display: flex; gap: 2.4cqh; align-items: flex-end; pointer-events: auto; }
.pad-btn {
  width: 19cqh;
  height: 19cqh;
  border-radius: 50%;
  border: 1px solid rgba(216, 211, 198, 0.45);
  background: rgba(10, 12, 18, 0.55);
  color: var(--bone);
  font: 500 5.6cqh/1 var(--menu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  touch-action: none;
}
.pad-btn[data-down] { background: rgba(216, 211, 198, 0.28); }
.pad-fire { width: 25cqh; height: 25cqh; background: rgba(124, 38, 34, 0.5); border-color: rgba(196, 84, 74, 0.6); font-size: 5.2cqh; }
.pad-small { width: 13cqh; height: 13cqh; font-size: 5cqh; }
.pad-action { width: auto; min-width: 22cqh; height: 13cqh; border-radius: 6.5cqh; padding: 0 2.6cqh; background: rgba(10, 12, 18, 0.7); border-color: rgba(233, 230, 223, 0.55); color: var(--bone); font-size: 4cqh; margin-bottom: 6cqh; }
/* greyed out: the jeepney won't leave until the night's objective is done (it still says why when tapped) */
.pad-action.off { opacity: 0.45; }

.rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .rotate {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ink);
    color: var(--text);
    font: 700 30px/1.15 var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
  }
}