/* Living 80s — neon, mobile-first */
/* Rooted paths so backgrounds always load from /images */
/* Global neon background */
:root{
  --text:#fff;
  --muted:rgba(255,255,255,.8);
  --border:rgba(255,255,255,.18);
  --cyan:#00fff7;
  --magenta:#ff4dff;
  --card:rgba(8,8,24,.7);
  --shadow:0 8px 30px rgba(0,0,0,.45);
}

*,
*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:#000 url('/images/neon_bg.jpg') center/cover fixed no-repeat;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,"Noto Sans",sans-serif;
  line-height:1.5;
}

body.page-arcade{ background-image:url('/images/Arcade-bg.jpg'); }

.container{ width:min(100% - 24px, 1100px); margin-inline:auto; }

.site-header{ padding:16px 0 6px; }
.site-header .brand{ display:grid; justify-items:center; gap:8px; }
.brand__logo{ height:110px; max-width:100%; filter: drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 16px var(--magenta)); }
.brand__title{
  font-size:clamp(26px,6vw,46px); font-weight:800; text-transform:uppercase; text-align:center; color:#fff;
  text-shadow:0 0 6px var(--cyan),0 0 14px var(--magenta),0 0 28px rgba(255,77,255,.5);
}
.page-title{ margin:8px auto 14px; text-align:center; font-size:clamp(22px,5.2vw,36px); font-weight:700; color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.35),0 0 16px rgba(0,255,247,.25);
}

.nav-buttons{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px;
  margin:12px auto 22px; width:min(100% - 24px, 900px);
}
.nav-buttons .btn{
  display:inline-block; text-align:center; padding:12px 16px; border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), var(--magenta)); color:#000; font-weight:800; text-decoration:none;
  border:1px solid var(--border);
  box-shadow:0 0 12px rgba(0,255,255,.35), 0 0 16px rgba(255,77,255,.3);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.nav-buttons .btn:hover{ transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 14px rgba(0,255,255,.45),0 0 18px rgba(255,77,255,.4);
}
@keyframes neon-flicker{0%,100%{filter:brightness(1)}92%{filter:brightness(1.08)}95%{filter:brightness(.96)}97%{filter:brightness(1.1)}}
.nav-buttons .btn:hover{ animation: neon-flicker .6s linear 1; }

.card{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:16px; box-shadow:var(--shadow); }
.center{text-align:center}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}

label{ display:block; margin:10px 0 4px; color:var(--muted); font-weight:700; }
input[type="text"],input[type="email"],input[type="password"],input[type="file"]{
  width:100%; background:#0d0d20; color:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:16px;
}

img,video{ max-width:100%; height:auto; display:block; }

/* Arcade cabinets */
.arcade-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; align-items:start; }
.arcade-cabinet{ background:rgba(10,10,28,.6); border:1px solid var(--border); border-radius:18px; padding:12px; box-shadow:var(--shadow); }
.arcade-cabinet .screen{
  position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.2);
}
.arcade-cabinet .screen img, .arcade-cabinet .screen video, .arcade-cabinet .screen canvas{
  max-width:100%; max-height:100%; object-fit:contain;
}
.arcade-cabinet .title{ margin-top:10px; text-align:center; font-weight:700; font-size:16px; color:#fff; text-shadow:0 0 8px rgba(0,255,247,.25); }

.page-section{ margin:18px auto; width:min(100% - 24px, 1000px); }
footer.site-footer{ text-align:center; padding:20px 0 28px; color:var(--muted); font-size:14px; }

/* Make sure the page can show a full-viewport background */
html, body { min-height: 100%; }

/* Force the global neon background (absolute path avoids relative path quirks) */
body.auth {
  background: url("/images/neon_bg.jpg") center center / cover fixed no-repeat !important;
}

/* If any wrappers try to “paint over” the background, neutralize them here */
.container, .page-section, .card, .site-header {
  background: transparent !important;
}

/* Give the login card a readable “glass” look on top of neon */
.auth-card {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 24px;
  color: #fff;
  max-width: 520px;
  margin: 48px auto;
}

/* Inputs and button contrast on dark background */
.auth-card label { color: #fff; display:block; margin: 8px 0 4px; }
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
}
.auth-card input::placeholder { color: rgba(255,255,255,0.75); }

.auth-card .btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(45deg,#0ff,#f0f);
  color: #000;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0,255,255,.35), 0 0 16px rgba(255,0,255,.25);
}

/* Optional: center the whole auth section vertically */
.auth-wrap {
  min-height: calc(100dvh - 140px); /* leaves room for the header */
  display: flex;
  align-items: flex-start; /* or center */
  justify-content: center;
  padding: 24px;
}