/* Shared FNF look */
:root {
  --ink: #111;
  --paper: #fff8e7;
  --pink: #ff4d9a;
  --yellow: #ffe566;
  --purple: #6c5ce7;
  --lane0: #c44cff;
  --lane1: #49b6ff;
  --lane2: #5dff7a;
  --lane3: #ff5c7a;
  --panel: #1a1220;
  --muted: #b8a7c8;
}

* { box-sizing: border-box; }
/* Author display:flex/grid beats the UA [hidden] rule — force it */
[hidden] { display: none !important; }
.fnf-screen { display: none !important; }
.fnf-screen.is-on { display: flex !important; }
#playStage.fnf-screen.is-on { display: block !important; }
html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  font-family: 'Nunito', system-ui, sans-serif;
  background: #0b0710;
  color: #fff;
}

.fnf-frame {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  position: relative;
  overflow: hidden;
  border: none;
  box-shadow: none;
  background: #111;
}

.fnf-btn {
  border: 3px solid #111;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  background: var(--yellow);
  color: #111;
}
.fnf-btn:hover { filter: brightness(1.05); }
.fnf-btn.secondary { background: #fff; }
.fnf-btn.danger { background: #ff6b6b; color: #fff; }
.fnf-btn.pink { background: var(--pink); color: #fff; }
.fnf-btn:disabled { opacity: .45; cursor: not-allowed; }

.fnf-title {
  font-family: 'Bangers', Impact, sans-serif;
  letter-spacing: .04em;
  text-shadow: 3px 3px 0 #111, -1px -1px 0 #fff;
}

.coming-soon {
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.15), transparent 40%),
    linear-gradient(160deg, #ffe566, #ff8fab 55%, #c77dff);
  color: #111;
  text-align: center;
  padding: 24px;
}
.coming-soon h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
}
.coming-soon p { margin: 0; font-weight: 800; max-width: 420px; }

#resultsScreen.fnf-screen.is-on {
  display: flex !important;
}