/*
  JayBearATL.com - The BARE CAVE (enter page)
  Tokens live in /css/tokens.css
*/

*{ box-sizing:border-box; }
html{ scroll-behavior: smooth; }
html,body { min-height:100vh; height:auto; }
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% 0%, var(--bg-radial-1), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, var(--bg-radial-2), transparent 55%),
    radial-gradient(1000px 700px at 50% 110%, var(--bg-radial-3), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
  font-family: var(--font-body);
  letter-spacing: var(--tracking-body);
  overflow-x:hidden;
  padding-bottom: 52px;
}

h1, h2, h3, .headline-font {
  font-family: var(--font-display);
}

/* --- Status Banner (OPEN/CLOSED) --- */
.status-banner {
  padding: 12px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.status-banner::before {
  content: none;
}

.status-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .8; }
}

.status-text {
  letter-spacing: .08em;
  line-height: 1.2;
}

.status-indicator::selection,
.status-indicator *::selection {
  background: transparent;
  color: inherit;
}

.status-indicator::-moz-selection,
.status-indicator *::-moz-selection {
  background: transparent;
  color: inherit;
}

.status-time {
  font-size: 12px;
  color: rgba(246,242,255,.7);
  user-select: none;
  -webkit-user-select: none;
}

.status-join-btn {
  /* look unified via /css/components.css - keep size tweaks */
  padding: 8px 16px;
  font-size: 12px;
}

.status-join-btn[hidden],
.btn[hidden],
.pill[hidden] {
  display: none !important;
}

.room-state-disabled {
  cursor: default;
  opacity: .62;
  pointer-events: none;
}

/* --- Neon Logo Styles --- */
.neon-logo{
  width: min(680px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  padding: 14px 14px 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,.55);
  position:relative;
  overflow:hidden;
}

.neon-logo:before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(380px 240px at 25% 20%, rgba(49,227,255,.14), transparent 62%),
    radial-gradient(420px 260px at 72% 30%, rgba(255,59,212,.16), transparent 65%),
    radial-gradient(520px 320px at 50% 110%, rgba(155,92,255,.14), transparent 70%);
  filter: blur(2px);
  pointer-events:none;
}

.svg-glow{ filter: drop-shadow(0 0 10px rgba(49,227,255,.26)) drop-shadow(0 0 18px rgba(255,59,212,.22)); }

.flicker{ animation: flicker 4.8s infinite; }
@keyframes flicker{
  0%, 100%{ opacity: .98; }
  2%{ opacity: .75; }
  4%{ opacity: .96; }
  6%{ opacity: .82; }
  8%{ opacity: .98; }
  10%{ opacity: .92; }
  12%{ opacity: .98; }
  22%{ opacity: .90; }
  24%{ opacity: .98; }
  58%{ opacity: .96; }
  60%{ opacity: .80; }
  62%{ opacity: .98; }
}

@keyframes ambient-shift{
  0%{ filter: hue-rotate(0deg) brightness(1); }
  50%{ filter: hue-rotate(5deg) brightness(1.05); }
  100%{ filter: hue-rotate(0deg) brightness(1); }
}

.zoom-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246,242,255,.88);
  width: fit-content;
}
.zoom-pill i{ font-style: normal; color: var(--blue); text-shadow: var(--glow-blue); }

.mini-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 860px){ .mini-grid{ grid-template-columns: 1fr; } }

.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(246,242,255,.80);
  white-space: nowrap;
}

a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ 
  outline:none; 
  box-shadow: var(--ring); 
  border-color: rgba(49,227,255,.55) !important;
  transform: translateY(-2px);
}

input, textarea{
  transition: all 0.3s ease;
}

input:hover, textarea:hover{
  border-color: rgba(255,255,255,.22) !important;
}

/* background sparkles */
.stars{
  position:fixed; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(1px 1px at 82% 70%, rgba(255,255,255,.65), transparent 70%),
    radial-gradient(2px 2px at 55% 20%, rgba(255,255,255,.35), transparent 75%),
    radial-gradient(2px 2px at 25% 45%, rgba(255,255,255,.25), transparent 75%),
    radial-gradient(2px 2px at 75% 55%, rgba(255,255,255,.22), transparent 75%);
  filter: blur(.1px);
  mix-blend-mode: screen;
  animation: star-twinkle 8s ease-in-out infinite;
}

@keyframes star-twinkle{
  0%, 100%{ opacity: .55; }
  50%{ opacity: .72; }
}