/* HexaDribble — UI refresh: pixel-arcade basketball vibe (offline, no external fonts) */
:root{
  /*
    Updated colour palette for a brighter, more inviting mood. The previous
    palette was very dark and moody which could feel gloomy on some
    displays. These tones bring a dusk-like vibrancy while still being
    grounded in the original neon‑street aesthetic. You can tweak these
    values to fine tune the mood further. Colours are expressed in
    hex or rgba for ease of editing.
  */
  --bg: #0f244a;           /* dark navy with a hint of purple */
  --ink: #eef7ff;          /* pale off‑white for crisp text */
  --muted: #a8b8d8;        /* muted lavender‑blue for labels */
  --cyan: #89f3fe;         /* gentle cyan glow for highlights */
  --pink: #ff7ceb;         /* soft magenta accent */
  --orange: #ffa84d;       /* warm orange accent */
  --panel: rgba(24,29,58,0.88); /* slightly lighter panel background */
  --stroke: rgba(255,255,255,0.20); /* subtle border stroke */
  --shadow: 0 16px 36px rgba(0,0,0,0.48);
}

html,body{
  height:100%;
  margin:0;
  background: var(--bg);
  overflow:hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: var(--ink);
}

#wrap{ position:fixed; inset:0; }
#game{ width:100vw; height:100vh; display:block; touch-action:none; }

.ui{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#hud{ padding: max(10px, env(safe-area-inset-top)) 12px 12px 12px; }

.hudRow{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}

/* Score badges: lighten the gradient and border to feel less oppressive */
.pixelBadge{
  pointer-events:none;
  background: linear-gradient(180deg, rgba(30,38,78,0.90), rgba(18,24,56,0.82));
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 0 rgba(0,0,0,0.26);
  padding: 10px 12px 9px 12px;
  image-rendering: pixelated;
}

.pixelBadge.small{ padding: 10px 10px 9px 10px; opacity:.95; }

.pixelLabel{
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--muted);
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  margin-bottom: 4px;
}

.pixelValue{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .06em;
  /* Soften the drop shadow for improved legibility on lighter backgrounds */
  text-shadow:
    0 2px 0 rgba(0,0,0,0.60),
    0 0 14px rgba(137,243,254,0.22);
}

/* Buttons: brighter gradient and increased contrast for call‑to‑actions */
.pixelBtn{
  pointer-events:auto;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(45,55,105,0.94), rgba(24,32,70,0.88));
  border: 2px solid rgba(255,255,255,0.20);
  box-shadow: 0 10px 0 rgba(0,0,0,0.32);
  color: var(--ink);
  padding: 10px 12px 9px 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  user-select:none;
}

.pixelBtn:active{ transform: translateY(2px); box-shadow: 0 8px 0 rgba(0,0,0,.34); }

/* Primary button uses the updated orange accent for a pop of colour */
.pixelBtn.primary{
  border-color: rgba(255,168,77,0.60);
  box-shadow: 0 10px 0 rgba(0,0,0,0.32), 0 0 18px rgba(255,168,77,0.18);
}

.pixelBtn.big{ padding: 12px 16px 11px 16px; }

.overlay{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
}
.overlay[hidden]{ display:none; }

/* Main overlay panel: soften the gradient and lighten the border */
.pixelPanel{
  width: min(720px, 92vw);
  background: linear-gradient(180deg, rgba(26,32,70,0.92), rgba(20,25,58,0.86));
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow);
  padding: 16px 16px 14px 16px;
  text-align:center;
}

.pixelTitle{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: .22em;
  /* Brighter text shadow for a clean neon glow on the lighter panel */
  text-shadow:
    0 3px 0 rgba(0,0,0,0.60),
    0 0 18px rgba(137,243,254,0.22),
    0 0 18px rgba(255,124,235,0.14);
}

.pixelSub{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(240,250,255,0.90);
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.hi{
  color: var(--orange);
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 14px rgba(255,154,60,.22);
  font-weight: 900;
}

.pixelHintRow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top: 14px;
}

.pixelHint{
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(40,44,86,0.32);
  padding: 8px 10px 7px 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

.pixelCtaRow{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}

.pixelTiny{
  margin-top: 12px;
  font-size: 11px;
  color: rgba(240,250,255,0.76);
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}

@media (max-width: 420px){
  .pixelTitle{ font-size: 28px; }
  .pixelValue{ font-size: 18px; }
}