/* Floor night: log-cabin entrance, neon party, winter snow.
   Loaded only by the lobby. Play pages stay on arcade.css. */

:root {
  --neon-pink: #ff2bd6;
  --neon-cyan: #3de0ff;
  --neon-amber: #ffc53d;
  --neon-lime: #b8ff3d;
  --night: #071018;
  --moon: #e8eef8;
  --log: #4a2e1a;
  --log-dark: #2a180e;
  --log-lite: #6a4428;
}

body.lobby.night {
  background:
    radial-gradient(ellipse 42% 28% at 78% 10%, #1a2a48 0%, transparent 70%),
    radial-gradient(ellipse 30% 18% at 18% 8%, #1a1430 0%, transparent 60%),
    linear-gradient(#071018 0 38%, #12101c 62%, #1a140e 100%);
  color: var(--ink);
  overflow-x: hidden;
  padding-top: 58px;
}

body.lobby.night .ceiling { display: none; }

/* —— outside: moon, stars, snow —— */
.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.moon {
  position: absolute;
  top: 18px;
  right: 9%;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 34%, #fff, #d8e0f0 46%, #b8c4dc 100%);
  box-shadow:
    0 0 24px #e8eef8,
    0 0 80px rgba(106, 140, 255, 0.35),
    -18px 8px 0 -6px rgba(7, 16, 24, 0.18);
}
.stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 14%, #fff, transparent),
    radial-gradient(1px 1px at 18% 28%, #c8d8ff, transparent),
    radial-gradient(1.4px 1.4px at 32% 10%, #fff, transparent),
    radial-gradient(1px 1px at 46% 22%, #fff, transparent),
    radial-gradient(1px 1px at 62% 8%, #d0e0ff, transparent),
    radial-gradient(1.5px 1.5px at 74% 30%, #fff, transparent),
    radial-gradient(1px 1px at 88% 16%, #fff, transparent),
    radial-gradient(1px 1px at 12% 48%, #fff, transparent),
    radial-gradient(1px 1px at 28% 62%, #c8d8ff, transparent),
    radial-gradient(1px 1px at 54% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 81% 52%, #fff, transparent),
    radial-gradient(1px 1px at 93% 40%, #fff, transparent);
  opacity: 0.85;
}
.snow {
  position: fixed;
  inset: -20% 0 0;
  pointer-events: none;
  z-index: 9;
  background-repeat: repeat;
  background-image:
    radial-gradient(2px 2px at 12px 24px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 48px 8px, #e8eef8, transparent),
    radial-gradient(2px 2px at 88px 52px, #fff, transparent),
    radial-gradient(1px 1px at 132px 18px, #fff, transparent),
    radial-gradient(2px 2px at 170px 70px, #dfe8f8, transparent),
    radial-gradient(1.5px 1.5px at 210px 36px, #fff, transparent);
  background-size: 240px 180px;
  animation: snow-fall 14s linear infinite;
  opacity: 0.7;
}
.snow-b {
  background-size: 180px 140px;
  animation-duration: 9s;
  animation-delay: -4s;
  opacity: 0.5;
}
.snow-c {
  background-size: 320px 220px;
  animation-duration: 20s;
  animation-delay: -8s;
  opacity: 0.35;
}
@keyframes snow-fall {
  from { transform: translate3d(0, -8%, 0); }
  to { transform: translate3d(18px, 42%, 0); }
}

/* —— cabin frame —— */
.cabin {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.eaves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--log-dark) 0 14px,
      var(--log) 14px 36px,
      var(--log-lite) 36px 50px,
      var(--log-dark) 50px 52px
    );
  clip-path: polygon(0 100%, 0 46%, 50% 0, 100% 46%, 100% 100%);
  box-shadow: 0 10px 18px #0008;
}
.snowcap {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(#f4f7fc, #c8d4e8);
  clip-path: polygon(0 78%, 7% 42%, 18% 62%, 50% 6%, 82% 62%, 93% 42%, 100% 78%, 100% 100%, 0 100%);
  filter: drop-shadow(0 3px 0 #9aacc4);
  opacity: 0.95;
}
.gable {
  position: absolute;
  top: 0;
  left: 50%;
  width: 520px;
  height: 96px;
  margin-left: -260px;
  background:
    repeating-linear-gradient(
      90deg,
      var(--log-dark) 0 16px,
      var(--log) 16px 40px,
      var(--log-lite) 40px 54px
    );
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  box-shadow: 0 8px 16px #0008;
}
.gable-snow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 540px;
  height: 78px;
  margin-left: -270px;
  background: linear-gradient(#f4f7fc, #c8d4e8);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  opacity: 0.92;
}
.drift {
  position: absolute;
  bottom: 0;
  height: 56px;
  width: 210px;
  background: radial-gradient(120% 100% at 50% 100%, #f4f7fc 40%, transparent 70%);
  z-index: 7;
}
.drift-l { left: 40px; }
.drift-r { right: 40px; transform: scaleX(-1); }
.log-wall {
  position: absolute;
  top: 48px;
  bottom: 0;
  width: 56px;
  background:
    repeating-linear-gradient(
      #3a2212 0 16px,
      #5a3820 16px 34px,
      #2a180e 34px 38px
    );
  box-shadow: inset -10px 0 14px #0007;
}
.log-wall-l { left: 0; }
.log-wall-r {
  right: 0;
  transform: scaleX(-1);
  box-shadow: inset -10px 0 14px #0007;
}
.log-wall::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 8px;
  width: 10px;
  background: repeating-radial-gradient(circle at 50% 18px, #1a1008 0 4px, transparent 5px 38px);
  opacity: 0.45;
}
.neon-tube {
  position: absolute;
  top: 62px;
  left: 7%;
  right: 7%;
  height: 5px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan), var(--neon-amber), var(--neon-pink));
  background-size: 220% 100%;
  box-shadow:
    0 0 8px var(--neon-pink),
    0 0 18px var(--neon-cyan),
    0 8px 28px rgba(255, 43, 214, 0.25);
  animation: neon-run 7s linear infinite;
}
@keyframes neon-run {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}

.neon-sign {
  position: fixed;
  top: 168px;
  right: 64px;
  z-index: 6;
  pointer-events: none;
  display: grid;
  gap: 2px;
  text-align: center;
  font-family: Palatino, Georgia, ui-serif, serif;
  letter-spacing: 0.18em;
  transform: rotate(3deg);
}
.ns-open {
  color: var(--neon-pink);
  font-size: 22px;
  text-shadow: 0 0 6px var(--neon-pink), 0 0 18px var(--neon-pink);
  animation: neon-pulse 2.8s ease-in-out infinite;
}
.ns-ale {
  color: var(--neon-amber);
  font-size: 11px;
  text-shadow: 0 0 8px var(--neon-amber);
}
.ns-call {
  color: var(--neon-cyan);
  font-size: 12px;
  text-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan);
  animation: neon-pulse 3.4s ease-in-out infinite reverse;
}
@keyframes neon-pulse {
  0%, 100% { opacity: 1; filter: brightness(1); }
  40% { opacity: 0.72; filter: brightness(1.25); }
  46% { opacity: 1; }
}

/* —— neon marquee on the cabin lintel —— */
body.lobby.night .marquee {
  position: relative;
  z-index: 5;
  margin: 0 56px;
  background: linear-gradient(#1a120c, #0a080c);
  border-top: 6px solid #3a2416;
  border-bottom: 2px solid var(--neon-cyan);
  box-shadow:
    0 0 0 1px #000,
    0 12px 40px rgba(255, 43, 214, 0.16),
    inset 0 -8px 18px rgba(61, 224, 255, 0.08);
}
body.lobby.night .marquee h1 {
  color: #fff4ff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px var(--neon-pink),
    0 0 28px var(--neon-pink),
    0 0 48px var(--neon-cyan);
}
body.lobby.night .sticker {
  background: #0a0c12;
  color: var(--neon-cyan);
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 10px var(--neon-cyan), inset 0 0 8px rgba(61, 224, 255, 0.25);
}
body.lobby.night .credits {
  color: var(--neon-amber);
  text-shadow: 0 0 8px var(--neon-amber);
}
body.lobby.night #mute {
  background: #0a0c12;
  border-color: var(--neon-pink);
  color: var(--neon-pink);
  text-shadow: 0 0 8px var(--neon-pink);
}

body.lobby.night .tag {
  position: relative;
  z-index: 5;
  margin: 8px 72px 0;
  color: var(--neon-lime);
  text-shadow: 0 0 8px var(--neon-lime);
}

body.lobby.night .room {
  position: relative;
  z-index: 5;
  padding: 14px 72px 28px;
}

/* chalkboard flyer on a log peg */
body.lobby.night .flyer {
  background: #1a2418;
  color: #e8e0c8;
  border: 7px solid #4a2e1a;
  box-shadow:
    8px 12px 0 #0006,
    0 0 24px rgba(61, 224, 255, 0.12);
  clip-path: none;
  transform: rotate(-1deg);
}
body.lobby.night .flyer::before {
  background: var(--neon-amber);
  box-shadow: 0 0 8px var(--neon-amber);
}
body.lobby.night .flyer h2 {
  color: var(--neon-amber);
  text-shadow: 0 0 8px var(--neon-amber);
}
body.lobby.night .flyer-sub { color: #9aaa88; }
body.lobby.night .flyer li { border-bottom-color: #3a4a38; }
body.lobby.night .fly-aisle {
  color: var(--neon-cyan);
  border-bottom-color: var(--neon-cyan);
}
body.lobby.night .fly-pitch,
body.lobby.night .fly-keys { color: #b8c4a8; }
body.lobby.night .fly-best { color: var(--neon-amber); }
body.lobby.night .fly-play {
  background: #0a0c12;
  color: var(--neon-pink);
  border: 1px solid var(--neon-pink);
  box-shadow: 0 0 8px rgba(255, 43, 214, 0.35);
}

body.lobby.night .floor {
  background:
    linear-gradient(180deg, rgba(61, 224, 255, 0.08), transparent 28%, rgba(0, 0, 0, 0.55)),
    linear-gradient(90deg, rgba(255, 43, 214, 0.05), transparent 42%, rgba(255, 197, 61, 0.06)),
    repeating-linear-gradient(
      90deg,
      #120c08 0 16px,
      #1c140e 16px 18px,
      #24180f 18px 34px,
      #160e0a 34px 36px,
      #2a1c12 36px 52px,
      #0e0a08 52px 54px,
      #1e1510 54px 70px,
      #120c08 70px 72px
    );
  opacity: 1;
  box-shadow: inset 0 70px 90px rgba(0, 0, 0, 0.45);
}

body.lobby.night .aisle-tab {
  background: #0a0c12;
  border-color: #3a2a1c;
  color: #c8b89a;
}
body.lobby.night .aisle-tab.is-on {
  border-color: var(--neon-pink);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 43, 214, 0.4);
}
body.lobby.night .aisle-tab.is-on b { color: var(--neon-pink); }
body.lobby.night .aisle.is-on { border-left-color: var(--neon-cyan); }
body.lobby.night .aisle-letter { color: var(--neon-cyan); }
body.lobby.night .aisle-nudge button {
  background: #0a0c12;
  border-color: #3a2a1c;
}

body.lobby.night .plaque {
  background: #140e0a;
  border-color: var(--neon-amber);
  box-shadow: 0 8px 0 #0006, 0 0 18px rgba(255, 197, 61, 0.18);
}
body.lobby.night .plaque-n { color: var(--neon-amber); }
body.lobby.night #plaque-play {
  background: var(--neon-pink);
  color: #12010e;
  box-shadow: 0 0 14px var(--neon-pink);
}

body.lobby.night .insert {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan);
}
body.lobby.night footer {
  position: relative;
  z-index: 5;
  padding-left: 72px;
  color: #8a9aaa;
}

/* cabinets pick up a little neon bounce when selected */
body.lobby.night .cab.is-on {
  filter: drop-shadow(0 0 10px rgba(61, 224, 255, 0.35));
}

/* —— drunk gnomes —— */
.gnome-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.party-gnomes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8;
}
.gnome {
  position: absolute;
  overflow: visible;
  filter: drop-shadow(0 4px 0 #0006);
}
.g-roof { top: 2px; left: 22%; width: 58px; transform: rotate(-22deg); z-index: 10; }
.g-sign { top: 38px; right: 18%; left: auto; width: 50px; animation: hang 3.2s ease-in-out infinite; }
.g-porch-l { bottom: 8px; left: 58px; width: 72px; transform: rotate(78deg); }
.g-porch-r { bottom: 12px; right: 70px; width: 64px; animation: sway 1.8s ease-in-out infinite; }
.g-flyer { top: 248px; left: 78px; width: 54px; transform: rotate(12deg); }
.g-aisle { top: 58%; left: 48%; width: 52px; animation: bounce 1.1s ease-in-out infinite; }
.g-plaque { bottom: 18px; left: 48%; width: 56px; transform: rotate(16deg); }
.g-peek { top: 38%; left: 6px; width: 48px; }
.g-pair-a { bottom: 10px; left: 36%; top: auto; width: 52px; }
.g-pair-b { bottom: 8px; left: 40%; top: auto; width: 52px; transform: scaleX(-1); }
.g-spill { top: 62%; right: 64px; width: 58px; animation: sway 2.4s ease-in-out infinite; }

@keyframes sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(6deg); }
}
@keyframes hang {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-10deg); }
}

@media (prefers-reduced-motion: reduce) {
  .snow, .neon-tube, .ns-open, .ns-call,
  .g-sign, .g-porch-r, .g-aisle, .g-spill { animation: none; }
}

@media (max-width: 720px) {
  .log-wall, .neon-sign, .gable, .gable-snow, .g-peek, .g-flyer, .g-pair-a, .g-pair-b { display: none; }
  body.lobby.night .marquee,
  body.lobby.night .room { margin-left: 0; margin-right: 0; padding-left: 10px; padding-right: 10px; }
  body.lobby.night .tag,
  body.lobby.night footer { margin-left: 12px; padding-left: 12px; }
  .eaves { height: 48px; }
  .snowcap { height: 36px; }
}