/* 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) */
.stage {
  position: relative;
  width: min(100vw, 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; }

/* title card, after the Resident Evil remakes: one line of tall condensed capitals, the first letter of each word in red,
   a small plain menu under it, the dim night street behind. Everything is still (the stylesheet has no animations). */
.title {
  justify-content: flex-start;
  padding-top: 25cqh;
  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;
  /* (the padding: the crack mask clips to the box, and at line-height 1 the S's bottom hung outside it, cut off) */
  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);
  /* the crack: a few thin jagged lines cut out of the letters (a mask made in the stylesheet, no picture file) */
  -webkit-mask: var(--crack) 0 0 / 100% 100% no-repeat;
  mask: var(--crack) 0 0 / 100% 100% no-repeat;
  --crack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='1000' height='100' fill='white'/%3E%3Cpath d='M118 0 126 21 117 37 130 60 122 80 129 100 M127 62 150 70 M404 0 397 19 409 41 401 58 411 79 405 100 M410 42 432 36 441 47 M648 100 655 77 645 60 657 40 650 21 658 0 M652 59 628 66 M838 28 861 37 850 53 879 62 893 58 M252 72 271 63 262 49 M955 0 949 24 958 41' stroke='black' stroke-width='1.3' fill='none' stroke-linejoin='bevel'/%3E%3C/mask%3E%3Crect width='1000' height='100' mask='url(%23m)'/%3E%3C/svg%3E");
}
.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; }
.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 with Settings added the third one ran into the Best line: the
   whole card sits higher (2026-11-04) */
html[data-touch] .title { padding-top: 16cqh; }
html[data-touch] .title .menu { margin-top: 6cqh; }
.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);
}

/* buttons: flat dark plates, thin edge, brass for the primary */
.btn {
  font: 700 4.2cqh/1.05 var(--display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.4cqh 4.4cqh;
  min-height: 44px;
  border: 1px solid var(--edge);
  border-radius: 2px;
  background: var(--plate);
  color: var(--text);
  cursor: pointer;
}
.btn:hover { background: rgba(216, 211, 198, 0.14); border-color: rgba(216, 211, 198, 0.5); }
.btn:active { background: rgba(216, 211, 198, 0.24); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.btn-primary { border-color: var(--brass); background: rgba(198, 162, 86, 0.2); color: #ecdcae; font-size: 4.8cqh; }
.btn-primary:hover { background: rgba(198, 162, 86, 0.34); border-color: #dcb96a; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); font-size: 3.2cqh; letter-spacing: 0.14em; }
.btn-ghost:hover { background: rgba(216, 211, 198, 0.1); border-color: var(--edge); color: var(--text); }
.btn: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; }
.panel h2 { margin: 0; font: 700 8cqh/1.05 var(--display); letter-spacing: 0.14em; 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; }

.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 > .btn { 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 brass 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(--brass); }
.store-sec::after { content: ""; flex: 1; height: 1px; background: rgba(216, 211, 198, 0.14); }
.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-card.owned { border-color: rgba(198, 162, 86, 0.45); }
.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(--brass); }
/* 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(--brass); }
.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); }
/* (the store list scrolls and would clip an outside ring) */
.item:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
.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: the brass button, as the panels' primary */
.item.buy { border-color: var(--brass); background: rgba(198, 162, 86, 0.2); }
.item.buy:hover:not([aria-disabled="true"]) { background: rgba(198, 162, 86, 0.34); border-color: #dcb96a; }
.item.buy .item-name { color: #ecdcae; }
.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 */
.tune { justify-content: flex-start; gap: 1.6cqh; padding-top: 3.5cqh; padding-bottom: 3cqh; overflow: hidden; background: rgba(10, 12, 18, 0.66); }
.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:focus-visible { outline: 2px solid var(--brass); outline-offset: -3px; }
.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(--brass); border-radius: 1px; transform: rotate(45deg) scale(0.8); }
.tune-pips i.on { background: var(--brass); }
.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, with a brass edge 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; border-color: rgba(198, 162, 86, 0.55); background: rgba(198, 162, 86, 0.1); }
.tune-exclusive .tune-name { grid-area: name; color: #ecdcae; }
.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 { border-style: solid; border-color: var(--brass); }
.tune-exclusive.maxed .tune-price { color: #ecdcae; }

/* 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 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;
  }
}