/* Hollow — the UI is the colour of a headlamp on wet limestone, with one
   warm accent: flare red. It stays small and out of the middle of the screen,
   because the middle of the screen is where things come out of the dark. */

:root {
  --ink: #dfe3e6;
  --dim: #8a9299;
  --flare: #ff5a2e;
  --lamp: #fff1d6;
  --panel: rgba(6, 8, 10, 0.94);
  --edge: rgba(223, 227, 230, 0.14);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #020203;
  color: var(--ink);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

body.locked #view {
  cursor: none;
}

.hidden {
  display: none !important;
}

/* ------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(40, 46, 52, 0.55), rgba(1, 1, 2, 0.97));
  backdrop-filter: blur(3px);
  z-index: 20;
  padding: 16px;
  overflow-y: auto;
}

.panel {
  width: min(480px, 100%);
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 32px 28px 24px;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
}

.panel.small {
  width: min(340px, 100%);
}

h1 {
  margin: 0 0 8px;
  font-size: 38px;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  font-weight: 500;
  color: var(--lamp);
}

h2 {
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.tag {
  color: var(--dim);
  line-height: 1.6;
  margin: 0 0 22px;
  font-size: 13px;
}

label {
  display: block;
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}

label.spaced {
  margin-top: 16px;
}

input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--edge);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  padding: 11px 12px;
  outline: none;
}

input:focus {
  border-color: rgba(255, 241, 214, 0.45);
}

.hint {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.55;
  margin: 10px 0 0;
}

button {
  margin-top: 20px;
  width: 100%;
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 13px;
  background: var(--lamp);
  color: #0a0b0c;
  border: 0;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

button.on {
  background: var(--flare);
  color: #fff;
}

button.small {
  margin-top: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 9px 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border: 1px solid var(--edge);
}

.row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.mic {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}

#roster {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  text-align: left;
}

#roster li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  margin-bottom: 6px;
  font-size: 14px;
}

#roster li i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#roster li span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#roster li b {
  font-weight: 400;
  color: var(--dim);
  font-size: 12px;
}

#roster li.ready b {
  color: var(--flare);
}

.controls {
  margin: 22px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: var(--dim);
}

.controls b {
  color: var(--ink);
  font-weight: 500;
}

/* ------------------------------------------------------------------ HUD */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#section {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
}

#bars {
  position: absolute;
  left: 16px;
  bottom: 18px;
  display: grid;
  gap: 6px;
  width: 150px;
}

.bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  transform-origin: left;
  background: rgba(223, 227, 230, 0.55);
}

#battery i {
  background: rgba(255, 241, 214, 0.75);
}

#battery.low i {
  background: var(--flare);
}

#stamina.spent i {
  background: rgba(255, 90, 46, 0.6);
}

.micbar i {
  background: rgba(125, 200, 255, 0.6);
}

.micbar.loud i {
  background: var(--flare);
}

/* (three classes: it has to outrank `.bar[data-key]::after` further down) */
.bar.micbar.loud::after {
  color: var(--flare);
}

#kit {
  position: absolute;
  left: 16px;
  bottom: 50px;
  font-size: 11px;
  color: var(--dim);
  letter-spacing: 0.06em;
}

#reticle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

#toast {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(90vw, 560px);
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink);
  text-shadow: 0 0 12px #000;
  opacity: 0;
  transition: opacity 0.4s;
}

#toast.show {
  opacity: 1;
}

#prompt {
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--dim);
  text-shadow: 0 0 10px #000;
  white-space: nowrap;
}

#prompt b {
  color: var(--lamp);
}

#progress {
  position: absolute;
  top: calc(50% + 58px);
  left: 50%;
  width: 180px;
  margin-left: -90px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
}

#progress i {
  display: block;
  height: 100%;
  background: var(--flare);
  transform-origin: left;
}

.state {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  text-shadow: 0 0 14px #000;
}

#outCard {
  pointer-events: auto;
}

.state small {
  color: var(--dim);
  font-size: 12px;
}

.state.small {
  font-size: 13px;
}

#link {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(125, 255, 140, 0.4);
}

#link.down {
  background: var(--flare);
}

#map {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  border: 1px solid var(--edge);
  pointer-events: none;
}

#cut {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 30;
}

@media (max-width: 520px) {
  h1 {
    font-size: 30px;
  }
  #bars {
    width: 110px;
  }
}

/* ------------------------------------------------------------- the chase */

#countdown {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 56px;
  letter-spacing: 0.2em;
  color: var(--lamp);
  text-shadow: 0 0 24px #000;
}

#exitDist {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--dim);
}

#shove i {
  background: rgba(255, 90, 46, 0.35);
}

#shove.ready i {
  background: var(--flare);
}

#endStats {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 4px 0 6px;
}

#endStats th {
  font-weight: 400;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px;
}

#endStats td {
  padding: 7px 4px;
  border-top: 1px solid var(--edge);
  text-align: center;
}

#endStats td:first-child {
  text-align: left;
}

#endStats td i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
}

/* the chaser closing in: the edges of the world go dark and red */
/* the nursery: an eye that opens as more faces see you (it hunts the most watched) */
#watched {
  --w: 0;
  position: absolute;
  top: 18px;
  left: 50%;
  width: 46px;
  height: 22px;
  margin-left: -23px;
  pointer-events: none;
  border-radius: 50% / 50%;
  border: 2px solid rgba(232, 220, 203, calc(0.25 + var(--w) * 0.75));
  transform: scaleY(calc(0.15 + var(--w) * 0.85));
  transition: transform 0.25s, border-color 0.25s;
  box-shadow: 0 0 calc(var(--w) * 18px) rgba(255, 90, 46, calc(var(--w) * 0.6));
}
#watched i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(20, 16, 14, 0.9);
  box-shadow: 0 0 0 3px rgba(58, 36, 20, 0.9);
}
#watched.hidden {
  display: none;
}

#breath i {
  background: #9fc4d8;
}
#breath.on i {
  background: #e8f4ff;
}
#breath.hidden {
  display: none;
}

#carry {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  pointer-events: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ffe9c4;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 38%, rgba(20, 0, 0, 0.75) 78%, rgba(0, 0, 0, 0.97) 100%);
  transition: opacity 0.25s;
}

#fps {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 11px;
  color: var(--dim);
}


/* =====================================================================
   2026-11-10 — the full-game pass: title screen, tale cards, HUD dressing.
   Display type is a quiet serif; everything functional stays monospace.
   ===================================================================== */
:root {
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
  --gold: #d9b46a;
}

.overlay.title {
  background: linear-gradient(90deg, rgba(2, 2, 3, 0.96) 0%, rgba(2, 2, 3, 0.86) 34%, rgba(2, 2, 3, 0.25) 62%, rgba(2, 2, 3, 0.1) 100%), url('/assets/ui/title.jpg') center / cover no-repeat #020203;
  backdrop-filter: none;
  place-items: center start;
  padding: 0;
}
.menu {
  width: min(430px, 100%);
  max-height: 100%;
  overflow-y: auto;
  margin-left: clamp(16px, 7vw, 120px);
  padding: 28px 8px 28px 0;
  text-align: left;
  animation: rise 0.9s ease both;
}
.menu.wide {
  width: min(560px, 100%);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.menu h1 {
  font-family: var(--serif);
  font-size: clamp(54px, 8vw, 92px);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0;
  margin: 0 0 6px -4px;
  color: var(--lamp);
  text-shadow: 0 0 40px rgba(255, 190, 110, 0.25);
}
.kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.menu .tag {
  text-align: left;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: #b9b2a4;
  margin-bottom: 22px;
}
.menu label {
  text-align: left;
}
.field {
  display: inline-block;
  width: calc(50% - 6px);
  vertical-align: top;
}
.field + .field {
  margin-left: 8px;
}
.menu .hint {
  text-align: left;
}
button.primary {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #120d06;
  background: linear-gradient(180deg, #f1dcae, #cda55c);
  border: 0;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
button.primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
button.primary.on {
  background: linear-gradient(180deg, #3a2f1c, #241c10);
  color: var(--gold);
}
button.ghost {
  width: 100%;
  margin-top: 8px;
  background: none;
}

/* who are you */
.looks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.look {
  padding: 8px 8px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--edge);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
}
.look:hover {
  opacity: 0.85;
}
.look.on {
  opacity: 1;
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(217, 180, 106, 0.35);
}
.look .faces {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}
.look .faces img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: sepia(0.35) contrast(1.05);
}
.look b {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

/* roster with faces */
#roster li img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid currentColor;
  flex: none;
}

/* tabs under the menu */
.tabs {
  display: flex;
  gap: 18px;
  margin-top: 22px;
  border-top: 1px solid var(--edge);
  padding-top: 12px;
}
.tab {
  background: none;
  border: 0;
  padding: 0 0 4px;
  width: auto;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.tab:hover,
.tab.on {
  color: var(--lamp);
  border-bottom-color: var(--gold);
  background: none;
}
.tabpane {
  margin-top: 12px;
}
.taleRow {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.taleRow img {
  width: 84px;
  height: 48px;
  object-fit: cover;
  object-position: left center;
  border: 1px solid var(--edge);
}
.taleRow b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--lamp);
}
.taleRow small {
  color: var(--gold);
  letter-spacing: 0.14em;
  font-size: 10px;
  text-transform: uppercase;
  margin-left: 6px;
}
.taleRow p {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--dim);
}
.keys {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px 10px;
  margin: 0;
  font-size: 12px;
}
.keys dt {
  color: var(--lamp);
  border: 1px solid var(--edge);
  padding: 2px 6px;
  text-align: center;
  font-size: 11px;
}
.keys dd {
  margin: 0;
  color: var(--dim);
  align-self: center;
}
input[type='range'] {
  width: 100%;
  padding: 0;
  accent-color: var(--gold);
  background: none;
  border: 0;
}

/* the card that opens each tale */
#tale {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  display: grid;
  place-items: center end;
  background: #020203 center / cover no-repeat;
  animation: taleIn 0.7s ease both;
}
#tale.out {
  animation: taleOut 1.1s ease both;
}
@keyframes taleIn {
  from {
    opacity: 0;
  }
}
@keyframes taleOut {
  to {
    opacity: 0;
  }
}
.taleText {
  width: min(430px, 44vw);
  margin-right: clamp(16px, 7vw, 120px);
  animation: rise 1.2s 0.25s ease both;
}
.taleText h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  letter-spacing: 0.16em;
  margin: 0;
  color: var(--lamp);
}
/* the House's buildings have longer names than the tales: two lines, smaller */
.taleText h2.long {
  font-size: clamp(26px, 3.1vw, 42px);
  letter-spacing: 0.12em;
  line-height: 1.08;
  white-space: normal;
}
.taleText .origin {
  margin: 4px 0 18px;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--dim);
}
.taleText .legend {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: #c9c1b2;
  margin: 0 0 18px;
}
.taleText .rule {
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  background: rgba(0, 0, 0, 0.45);
  font-size: 13px;
  line-height: 1.5;
}
.taleText .rule span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.taleText .rule b {
  font-weight: 400;
  color: var(--ink);
}

/* HUD dressing */
#section {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--lamp);
  opacity: 0.85;
}
#ruleChip {
  position: absolute;
  top: 40px;
  left: 18px;
  max-width: 300px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--dim);
  border-left: 2px solid var(--gold);
  padding-left: 8px;
  opacity: 0.8;
}
.bar[data-key]::after {
  content: attr(data-key);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: pre;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
}
.bar[data-key] {
  position: relative;
}
#countdown {
  font-family: var(--serif);
}

/* end screen */
#end .menu h1 {
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 0.14em;
}
#end #endStats {
  width: 100%;
  margin: 12px 0;
}

@media (max-width: 720px) {
  .overlay.title {
    background: linear-gradient(180deg, rgba(2, 2, 3, 0.9), rgba(2, 2, 3, 0.96)), url('/assets/ui/title.jpg') center / cover no-repeat #020203;
    place-items: start center;
  }
  .menu {
    margin: 0 auto;
    padding: 20px 16px;
  }
  #tale {
    place-items: end center;
  }
  .taleText {
    width: auto;
    margin: 0 16px 24px;
  }
  #ruleChip {
    display: none;
  }
}

.bar[data-key] {
  overflow: visible;
  height: 4px;
}

/* title-screen fixes */
.menu {
  width: min(460px, 100%);
  overflow-x: hidden;
}
.menu h1 {
  font-size: clamp(44px, 5.2vw, 76px);
  letter-spacing: 0.16em;
  margin-left: 0;
  white-space: nowrap;
}
.field {
  width: calc(50% - 9px);
}
.look,
.look.on,
.look:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}
.taleText h2 {
  font-size: clamp(30px, 3.9vw, 58px);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.menu.wide {
  width: min(640px, 100%);
}
#end .menu h1 {
  font-size: clamp(34px, 4.2vw, 62px);
  letter-spacing: 0.12em;
}

.diff {
  flex: 1;
}
.diff.on {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(217, 180, 106, 0.08);
}
#waiting .row {
  margin-top: 6px;
}

/* in a wardrobe: you see the room through the gap between its doors */
#hideMask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* two louvred doors, ajar: dark either side, slats across the opening */
  background:
    linear-gradient(90deg, #020203 0%, #020203 24%, rgba(2, 2, 3, 0.6) 30%, rgba(2, 2, 3, 0) 40%, rgba(2, 2, 3, 0) 60%, rgba(2, 2, 3, 0.6) 70%, #020203 76%, #020203 100%),
    repeating-linear-gradient(0deg, rgba(2, 2, 3, 0) 0 26px, rgba(2, 2, 3, 0.82) 26px 34px);
}
.diff.mode {
  flex: 1;
}
.mode {
  flex: 1;
}
.mode.on {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(217, 180, 106, 0.08);
}
#end .menu h1 {
  white-space: normal;
  line-height: 1.1;
}