.game-hud {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  container-type: inline-size;
  color: #ddd;
  font-family: ui-monospace, monospace;
}
.game-hud[hidden], .game-dialogue[hidden] { display: none; }
/* Keep only the dialogue arrow visible until its entire exit has finished.
   Hiding is immediate on every opening; revealing fades without moving layout. */
:is(#entrancePosterBack, #centerTapBack, #hookahClueBack, #lollipopBack, #elderCardBack) {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease-out;
}
.game-viewport[data-clue-return-blocked="true"] :is(#entrancePosterBack, #centerTapBack, #hookahClueBack, #lollipopBack, #elderCardBack) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  :is(#entrancePosterBack, #centerTapBack, #hookahClueBack, #lollipopBack, #elderCardBack) { transition: none; }
}
.game-death-curtain { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 1; opacity: 0; background: #000; pointer-events: none; }
.game-viewport[data-failed="true"] .game-death-curtain { pointer-events: auto; }
.game-viewport[data-failed="true"] .game-dialogue { z-index: 2; }
.game-danger-vignette {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 44%, transparent 36%, rgba(95, 0, 0, .18) 65%, rgba(100, 0, 0, .58) 100%);
  transition: opacity .3s ease;
}
.game-hud[data-vignette="true"] .game-danger-vignette { opacity: 1; }
.game-clock { position: absolute; top: 4.1%; left: 4%; width: 92%; }
.is-burger-interior .game-clock { display: none; }
.game-clock-labels { display: flex; justify-content: space-between; margin: 0 1% 1%; font-size: clamp(10px, calc(var(--legacy-game-width) * 0.032), 17px); font-size: clamp(10px, 3.2cqw, 17px); line-height: 1.15; }
.game-time-track {
  height: clamp(8px, calc(var(--legacy-game-width) * 0.025), 14px);
  height: clamp(8px, 2.5cqw, 14px);
  position: relative; padding: 3px 6px;
}
.game-time-outline { position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 100%; overflow: visible; }
.game-time-outline polygon { fill: #20201e; stroke: #d9d9d2; stroke-width: 1.3px; vector-effect: non-scaling-stroke; }
.game-time-fill { height: 100%; background: #c8c8bc; transform: scaleX(var(--time-left, 1)); transform-origin: left; }
.game-hud[data-urgent="true"] .game-time-fill { background: #d53332; }
.game-logo { position: absolute; width: 47%; height: auto; left: 26.5%; bottom: 1.6%; filter: brightness(0) invert(.7); opacity: .52; }
.game-dialogue { --content-start: 11.2%; position: absolute; left: 3%; right: 3%; bottom: calc(3.9% + 0.5cm); pointer-events: none; }
.game-portrait { position: absolute; width: 33%; left: var(--content-start); bottom: 76%; overflow: hidden; }
.game-portrait canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.game-dialogue-panel { position: relative; width: 100%; aspect-ratio: 1974 / 260; }
.game-dialogue-art { position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; inset: 0; }
.game-dialogue-text {
  position: absolute; left: var(--content-start); right: 12%; top: 18%; bottom: 18%;
  margin: 0; display: flex; align-items: center;
  font: clamp(10px, calc(var(--legacy-game-width) * 0.031), 17px)/1.25 system-ui, sans-serif;
  font: clamp(10px, 3.1cqw, 17px)/1.25 system-ui, sans-serif;
  color: #e4e4df; text-shadow: 0 1px 1px #000;
}
.game-dialogue-next {
  position: absolute; right: 3%; top: 0; bottom: 0; width: 10%; min-width: 44px; min-height: 44px;
  border: 0; background: transparent; pointer-events: auto; cursor: pointer;
  display: grid; place-items: center; padding: 0; touch-action: manipulation;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.game-dialogue-next::after { content: ''; width: 0; height: 0; border-left: calc(var(--legacy-game-width) * 0.02) solid transparent; border-left: 2cqw solid transparent; border-right: calc(var(--legacy-game-width) * 0.02) solid transparent; border-right: 2cqw solid transparent; border-top: calc(var(--legacy-game-width) * 0.023) solid #d4d4cd; border-top: 2.3cqw solid #d4d4cd; }
.game-dialogue-next:focus-visible::after { border-top-color: #fff; filter: brightness(1.25); }
@media (prefers-reduced-motion: reduce) { .game-danger-vignette { transition-duration: .01s; } }
/* Game surfaces are controls/art, not selectable documents. Keep this scoped:
   the separate share fallback dialog's URL input must still allow copying. */
:is(.loading-screen, .character-screen, .opening-screen, .game-viewport, #gameSoundControls),
:is(.loading-screen, .character-screen, .opening-screen, .game-viewport, #gameSoundControls) * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}