html, body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      background: radial-gradient(circle at center, #1a1a1a 0%, #0b0b0b 45%, #000 70%);
      color: white;
      font-family: "Roboto Condensed", sans-serif;
      overflow:hidden;
    }

.ball-lanes{
  position: relative;
  width: 100%;
  height: 34px;              /* lane area height */
  margin: 6px 0 12px;        /* space between header and menu */
  overflow: hidden;
  pointer-events: none;

  /* subtle “track” feel */
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.02),
    rgba(0,0,0,0)
  );
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Golf ball */
.golf-ball{
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;

  /* golf-ish shading */
  background:
    radial-gradient(circle at 30% 30%, #fff 25%, #dedede 55%, #bdbdbd 100%);
  box-shadow:
    inset -2px -2px 3px rgba(0,0,0,0.35),
    0 0 8px rgba(255,255,255,0.25);

  will-change: transform, left;
}
.account-form {
  width: 80vw;          /* 80% of viewport width */
  max-width: 420px;     /* keeps it nice on desktop */
  min-width: 280px;     /* prevents it getting too narrow */
  margin-top:-25%;
  background:
	linear-gradient(
		100deg,
		rgba(0,255,153,0.08) 45%,
		rgba(0,255,153,0.18) 50%,
		rgba(0,255,153,0.08) 55%
	),
	linear-gradient(
		135deg,
		rgba(0,0,0,0.8),
		rgba(10,20,10,0.8)
	);


  border: 1px solid rgba(0, 255, 153, 0.35);
  border-radius: 14px;

  padding: 22px 20px;
  box-shadow:
    0 0 20px rgba(0, 255, 153, 0.35),
    0 20px 40px rgba(0,0,0,0.8);

}

@keyframes tableSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateX(120%); opacity: 1; }
  60%  { opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}

.account-form h2 {
  margin-top: 0;
  margin-bottom: 16px;
  text-align: centre;
  letter-spacing: 0.12em;
}

.account-form label {
  display: block;
  margin-bottom: 14px;
}

.account-form span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.account-form input {
  width: 100%;
  padding: 10px 12px;

  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 153, 0.3);
  border-radius: 8px;

  color: #eafff6;
  font-size: 15px;

  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;

  box-sizing: border-box;

}

.account-form input:focus {
  border-color: #00ff99;
  box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);

}

/* Button uses your existing menu style */
.account-form button {
  flex: 1;
      margin-top: 24px;
      width: 100%;
      height: 46px;
      font-size: 18px;
      letter-spacing: .05em;
      color: white;
      background: linear-gradient(#222, #111);
      border: 1px solid #666;
      border-radius: 8px;
      cursor: pointer;
      font-family: "Roboto Condensed", sans-serif;
}
.account-form button:hover {
      border-color: #aaa;
      box-shadow: 0 0 10px rgba(255,255,255,0.35);
    }

.account-form button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.8),
    0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.page-center {
  position:relative;
  display: flex;
  align-items: center;        /* vertical centring */
  justify-content: center;    /* horizontal centring */
  padding: 20px;              /* safe spacing on small screens */
  width:calc(100vw - 40px);
  height:75vh;
  overflow:hidden;
  z-index:2;
}
.form-popup {
  position: fixed;
  inset: 0;
  z-index: 3000;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.form-popup.hidden {
  display: none;
}

.popup-card {
  width: 80vw;
  max-width: 360px;

  background: linear-gradient(#121212, #0b0b0b);
  border: 1px solid rgba(0, 255, 153, 0.35);
  border-radius: 14px;
  padding: 20px;

  text-align: center;

  box-shadow:
    0 0 25px rgba(0, 255, 153, 0.35),
    0 20px 50px rgba(0,0,0,0.9);

  animation: popupIn 0.18s ease-out;
}

.popup-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.popup-card p {
  margin-bottom: 16px;
  line-height: 1.4;
}

.popup-card button {
  flex: 1;
      margin-top: 24px;
      width: 100%;
      height: 46px;
      font-size: 18px;
      letter-spacing: .05em;
      color: white;
      background: linear-gradient(#222, #111);
      border: 1px solid #666;
      border-radius: 8px;
      cursor: pointer;
      font-family: "Roboto Condensed", sans-serif;
}
.popup-card button:hover {
      border-color: #aaa;
      box-shadow: 0 0 10px rgba(255,255,255,0.35);
    }
.popup-card button:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 12px rgba(0,0,0,0.8),
    0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* small entrance animation */
@keyframes popupIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
    /* -------- HEADER -------- */
.header {
  position: relative;
  padding: 20px 0px;
  text-align: center;
  font-family: "Monoton", cursive;
  font-size: clamp(42px, 10vw, 64px);
  color: white;
  overflow: hidden;          /* clip balls inside header area */
}

/* Text always on top */
.header-text {
  position: relative;
  z-index: 2;
  animation:
    titleEnter 700ms cubic-bezier(.2,.8,.3,1) 1,
    titleGlow 5s ease-in-out infinite;
}

.header-text::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.9;
  color: white;
  text-shadow:
    -3px 0 12px rgba(0,255,0,0.9),
     3px 0 12px rgba(0,0,255,0.9);
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      -2px 0 6px rgba(0,255,0,0.9),   /* green left */
       2px 0 6px rgba(255,0,0,0.9),   /* red right */
       0 2px 6px rgba(0,0,0,0.7);
  }
  50% {
    text-shadow:
      -3px 0 10px rgba(0,255,0,0.95),
       3px 0 10px rgba(255,0,0,0.95),
       0 3px 8px rgba(0,0,0,0.8);
  }
}

@keyframes titleEnter {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* Invisible ball layer */
.header-balls {
  position: absolute;
  inset: 0;                  /* same size & position as header */
  z-index: 1;
  pointer-events: none;
}
#message{
	position:fixed;
	display:none;
	z-index:20000;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	background:rgba(0,0,0,.8);
}
#message1{
	position:absolute;
	top:5%;
	left:5%;
	width:90%;
	height:90%;
	border: 1px solid rgba(0, 255, 153,1);
	border-radius: 8px;
	color: #fff;
	box-shadow:
		0 0 0 1px rgba(0,255,120,.15),
		0 0 30px rgba(0,255,120,.25);
}

.layout {
	height: 100%;
	display: grid;
	grid-template-rows: 1fr 25%;
}

.cell {
	display: flex;
	align-items: center;     /* vertical centring */
	justify-content: center; /* horizontal centring */
	font-family: "Roboto Condensed", sans-serif;
}

.layout button{
	width: 90%;
	height: 45px;
	font-size: 18px;
	letter-spacing: .05em;
	color: white;
	background: linear-gradient(#222, #111);
	border: 1px solid #666;
	border-radius: 8px;
	cursor: pointer;
	font-family: "Roboto Condensed", sans-serif;
}
.layout  button:active {
	transform: translateY(2px);
	box-shadow:
		inset 0 4px 12px rgba(0,0,0,0.8),
		0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.fireworks{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;  
}

.wave {
    white-space: nowrap;
    font-size: clamp(24px, 10vw, 100px);
    text-align: center;
}

.wave span {
    display: inline-block;
    margin: 0 4px;

    animation: wave 1.5s ease-in-out infinite;
}

/* wave movement */
@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
.wave span:nth-child(1) { animation-delay: 0s; }
.wave span:nth-child(2) { animation-delay: 0.1s; }
.wave span:nth-child(3) { animation-delay: 0.2s; }
.wave span:nth-child(4) { animation-delay: 0.3s; }
.wave span:nth-child(5) { animation-delay: 0.4s; }
.wave span:nth-child(6) { animation-delay: 0.5s; }
.wave span:nth-child(7) { animation-delay: 0.6s; }
.wave span:nth-child(8) { animation-delay: 0.7s; }