/* Bettcat mini 09-en: neon speakeasy sign over a back-alley door */
:root {
  --night: #101319;
  --brick: #1d2129;
  --mortar: #15181e;
  --oak: #2a2f3a;
  --oak-dk: #20242d;
  --tube: #5be5f3;
  --tube-glow: rgba(91,229,243,.55);
  --pink: #ff5c8a;
  --brass: #e2b53a;
  --chalk: #eef0f5;
  --smoke: #9aa2b1;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; color: var(--chalk); font: 400 15px/1.55 "Outfit", system-ui, sans-serif;
  background-color: var(--night);
  background-image:
    radial-gradient(520px 300px at 50% 12%, rgba(91,229,243,.16), transparent 70%),
    linear-gradient(var(--mortar) 2px, transparent 2px),
    linear-gradient(90deg, var(--mortar) 2px, transparent 2px);
  background-size: auto, 64px 30px, 64px 60px;
}
a { color: inherit; }

.alley { max-width: 440px; margin: 0 auto; padding: 30px 16px 24px; text-align: center; }

.sign {
  display: inline-block; padding: 14px 26px 12px; border-radius: 16px;
  border: 3px solid var(--tube); background: rgba(10,14,20,.8);
  box-shadow: 0 0 14px var(--tube-glow), inset 0 0 14px var(--tube-glow);
}
.sign p { margin: 0; }
.sign-small { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--smoke); }
.sign-big {
  font: 400 44px/1.05 "Bungee", sans-serif; color: #e9fcff;
  text-shadow: 0 0 6px var(--tube), 0 0 18px var(--tube), 0 0 36px var(--tube-glow);
  animation: hum 4s infinite;
}
.sign-big span { color: #ffe4ec; text-shadow: 0 0 6px var(--pink), 0 0 18px var(--pink); }
.sign-tube { font: 400 15px/1 "Bungee", sans-serif; letter-spacing: .32em; color: var(--brass); text-shadow: 0 0 10px rgba(226,181,58,.7); margin-top: 4px !important; }
@keyframes hum { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .55; } 96% { opacity: 1; } 97% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .sign-big { animation: none; } }

.door {
  position: relative; margin-top: 24px; padding: 30px 22px 26px;
  background: repeating-linear-gradient(90deg, var(--oak) 0 54px, var(--oak-dk) 54px 56px);
  border: 4px solid #0c0e12; border-radius: 160px 160px 10px 10px;
  box-shadow: 0 0 0 8px #262a33, 0 26px 50px rgba(0,0,0,.6);
}
.door-slot { width: 150px; margin: 22px auto 16px; padding: 7px; background: var(--brass); border-radius: 10px; box-shadow: inset 0 -3px 0 #a37c1a; }
.door-slot svg { display: block; width: 100%; height: auto; }
.door-h { margin: 0; font-weight: 600; font-size: 15px; color: var(--smoke); }
.door-h strong { display: block; margin-top: 6px; font: 400 27px/1.15 "Bungee", sans-serif; color: var(--brass); text-shadow: 0 2px 0 #000; }
.door-p { margin: 12px 0 0; font-size: 14px; color: #cfd4de; }
.door-p a { color: var(--tube); font-weight: 700; }
.door-list { list-style: none; margin: 14px 0 0; padding: 12px 14px; background: rgba(8,10,14,.55); border-radius: 12px; text-align: left; font-size: 13.5px; }
.door-list li { padding: 3px 0 3px 20px; position: relative; }
.door-list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--tube); box-shadow: 0 0 8px var(--tube); }
.door-knob { position: absolute; right: 18px; top: 56%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, var(--brass) 60%, #8e6a12); }

.knock {
  display: block; margin-top: 18px; padding: 15px; text-decoration: none; border-radius: 12px;
  font: 400 19px/1 "Bungee", sans-serif; color: #04262b;
  background: linear-gradient(180deg, #7aeef8, #26b7c8); box-shadow: 0 0 22px var(--tube-glow), 0 4px 0 #13808e;
}
.knock:hover { filter: brightness(1.08); }

.alley-foot { margin-top: 26px; font-size: 11.5px; color: #7c8494; }
.alley-foot p { margin: 3px 0; }
.alley-foot a { color: #bfc6d2; }

@media (max-width: 380px) {
  .sign-big { font-size: 36px; }
  .door-h strong { font-size: 23px; }
  .door { padding: 26px 16px 22px; }
}