/* ---- The Nugget Arcade hall (the 3D arcade you walk around in) ----
   The hall itself is a WebGL canvas (js/arcade.js). These styles cover the
   overlay chrome: fade/flash layers, the interact prompt, hints, and mute. */

#arcadeHall {
  position: fixed;
  inset: 0;
  z-index: 9985; /* below the game layers (9990+) — hall hides while a game runs */
  display: none;
  background: #05040a;
}
#arcadeHall.active { display: block; }

#arcadeHall canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#arcadeHall canvas.dragging { cursor: grabbing; }

/* FPS crosshair dot — only while the pointer is locked (mouse-look mode) */
.hall-cross {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 3px rgba(38, 224, 255, 0.8);
  pointer-events: none;
  z-index: 4;
}
#arcadeHall.mlook .hall-cross { display: block; }

/* 🔭 THE LENS moved the vignette into the composite shader (js/arcade.js,
   FS_COMP). It is an EXPOSURE change applied before the tonemap now, not a
   black sheet laid over the finished frame — corners roll down the same curve
   as the rest of the picture instead of losing contrast and colour with the
   light. The element stays as the layer the fade and the flash sit against;
   if it painted a gradient too, the corners would be darkened twice. */
.hall-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* "Press ENTER — play NUGGET KNIGHT" chip above the bottom edge */
.hall-prompt {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(38, 224, 255, 0.65);
  background: rgba(5, 8, 20, 0.82);
  color: #e7f8ff;
  font: 700 0.85rem/1.2 Consolas, 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(38, 224, 255, 0.35), inset 0 0 12px rgba(38, 224, 255, 0.12);
  text-shadow: 0 0 8px rgba(38, 224, 255, 0.8);
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}
.hall-prompt.on { opacity: 1; }
.hall-prompt .key {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  margin-right: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.3rem;
  background: rgba(255, 255, 255, 0.1);
}

/* Controls hint, top-left. Fades itself out after a few seconds. */
.hall-hint {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(5, 8, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(231, 248, 255, 0.85);
  font: 600 0.72rem/1.5 Consolas, 'Courier New', monospace;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s;
  max-width: min(320px, calc(100vw - 2rem));
}
.hall-hint.on { opacity: 1; }

.hall-mute {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 8, 20, 0.7);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.hall-mute:hover { background: rgba(30, 40, 70, 0.8); }

.hall-skip {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  padding: 0.45rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(5, 8, 20, 0.7);
  color: rgba(255, 255, 255, 0.85);
  font: 700 0.72rem/1 Consolas, 'Courier New', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
}
.hall-skip.on { display: block; }
.hall-skip:hover { background: rgba(30, 40, 70, 0.8); }

/* Full-screen fades: black for scene transitions, white for the CRT launch flash */
.hall-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.hall-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.hall-flash.zap { transition: none; opacity: 1; }
.hall-flash.fadeout { transition: opacity 0.45s ease; opacity: 0; }

/* While the hall (or a game launched from it) owns the screen */
body.hall-open { overflow: hidden; }

/* Games launched from the hall: the cabinet IS the mode switch, so hide the
   HUD's mode buttons — Stop returns you to the hall to pick another cabinet. */
body.hall-session #modeSwitch { display: none; }

/* ---- street dialogue panel (talking to the regulars out front) ---- */
.hall-dialog {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%) translateY(12px);
  width: min(620px, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem 0.75rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 209, 102, 0.55);
  background: rgba(5, 8, 20, 0.88);
  box-shadow: 0 0 24px rgba(255, 176, 32, 0.22), inset 0 0 14px rgba(255, 176, 32, 0.07);
  font: 600 0.9rem/1.45 Consolas, 'Courier New', monospace;
  color: #e7f8ff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
}
.hall-dialog.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.hall-dialog .hd-name {
  color: #ffd166;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 209, 102, 0.7);
  margin-bottom: 0.35rem;
}
.hall-dialog .hd-text {
  min-height: 2.6em;
  color: rgba(231, 248, 255, 0.95);
}
.hall-dialog .hd-opts {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.55rem;
}
.hall-dialog .hd-opts button {
  all: unset;
  cursor: pointer;
  padding: 0.32rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(38, 224, 255, 0.35);
  background: rgba(38, 224, 255, 0.06);
  color: #bfefff;
  font: 600 0.82rem/1.3 Consolas, 'Courier New', monospace;
  transition: background 0.12s, border-color 0.12s;
}
.hall-dialog .hd-opts button:hover,
.hall-dialog .hd-opts button:focus-visible {
  background: rgba(38, 224, 255, 0.16);
  border-color: rgba(38, 224, 255, 0.8);
}
.hall-dialog .hd-opts button .num {
  display: inline-block;
  min-width: 1.1rem;
  margin-right: 0.45rem;
  color: #ffd166;
  opacity: 0.85;
}
.hall-dialog .hd-hint {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(231, 248, 255, 0.45);
  text-transform: uppercase;
}

/* ---- THE BOOT SCREEN -------------------------------------------------------
   The arcade's art is megabytes now (Blender paint, Blender geometry, and the
   material maps that came with THE POWER PLANT) and it all loads AFTER first
   paint so the converter — the actual product — never waits on it. Which means
   the waiting has to happen somewhere, and this is it: the door.

   Deliberately a piece of the game rather than a spinner. If someone is going
   to look at a loading screen, it should be worth looking at. */
.hall-booting {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background:
    radial-gradient(120% 90% at 50% 42%, #16112a 0%, #0a0817 45%, #04030a 100%);
  color: #e7f8ff;
  font: 700 0.78rem/1.4 Consolas, 'Courier New', monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
  z-index: 40;
}
/* CRT scanlines + a slow rolling bar, so the black is never dead black */
.hall-booting::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px);
  pointer-events: none;
}
.hall-booting::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(to bottom,
    rgba(120, 200, 255, 0) 0%,
    rgba(120, 200, 255, 0.05) 50%,
    rgba(120, 200, 255, 0) 100%);
  animation: hallRoll 7s linear infinite;
  pointer-events: none;
}
@keyframes hallRoll {
  from { top: -25%; }
  to { top: 105%; }
}

.hb-mark {
  position: relative;
  font-size: clamp(1.5rem, 6vw, 3.1rem);
  letter-spacing: 0.16em;
  line-height: 1;
  color: #fff2c4;
  text-shadow:
    0 0 6px rgba(255, 196, 92, 0.9),
    0 0 22px rgba(255, 146, 40, 0.55),
    0 0 54px rgba(255, 120, 20, 0.35);
  animation: hallNeon 4.2s ease-in-out infinite;
}
.hb-mark span {
  display: block;
  font-size: 0.36em;
  letter-spacing: 0.42em;
  margin-top: 0.5em;
  color: #ff7ad9;
  text-shadow: 0 0 8px rgba(255, 90, 200, 0.9), 0 0 26px rgba(255, 60, 180, 0.5);
}
/* the flicker a real sign has: mostly steady, two quick stumbles */
@keyframes hallNeon {
  0%, 43%, 46%, 62%, 64%, 100% { opacity: 1; }
  44.5% { opacity: 0.45; }
  63% { opacity: 0.62; }
}

.hb-bar {
  position: relative;
  width: min(420px, 62vw);
  height: 10px;
  border: 1px solid rgba(140, 220, 255, 0.35);
  border-radius: 6px;
  background: rgba(8, 10, 22, 0.85);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
.hb-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #26e0ff, #7af0c0 55%, #ffe27a);
  box-shadow: 0 0 12px rgba(38, 224, 255, 0.75);
  transition: width 0.45s cubic-bezier(0.22, 0.9, 0.3, 1);
}
/* the moving sheen that says "still working" even between steps */
.hb-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0) 100%);
  animation: hallSheen 1.5s linear infinite;
}
@keyframes hallSheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.hb-stage {
  position: relative;
  display: flex;
  gap: 0.9em;
  align-items: baseline;
  color: rgba(231, 248, 255, 0.62);
  font-size: 0.72rem;
}
.hb-pct { color: #26e0ff; font-variant-numeric: tabular-nums; }

.hb-tip {
  position: relative;
  max-width: min(560px, 82vw);
  margin-top: 0.4rem;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.04em;
  font: italic 400 0.78rem/1.5 Georgia, 'Times New Roman', serif;
  color: rgba(210, 226, 255, 0.42);
  transition: opacity 0.5s ease;
}
.hb-tip.swap { opacity: 0; }

/* Coin-op courtesy: tell them it is safe to leave, once it has been a while. */
.hb-slow {
  position: relative;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(255, 190, 120, 0.55);
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hb-slow.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hall-booting::after,
  .hb-mark,
  .hb-fill::after { animation: none; }
}