:root{
  --bg1:#667eea;
  --bg2:#764ba2;
  --board:#1f1f1f;
  --paddle:#33c060;
  --ball:#e74c3c;
  --hazard:#ff5252;
  --text:#ffffff;
  --shadow:0 12px 28px rgba(0,0,0,.35);
  --vh: 1vh;          /* JS updates for mobile safe viewport */
  --hudGap: 0px;      /* JS updates to HUD height when playing on mobile */
}

* { box-sizing: border-box; }
html { overflow-anchor: none; } /* prevent scroll anchoring jumps */

body {
  margin: 0;
  font-family: 'Press Start 2P', cursive;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  min-height: calc(var(--vh) * 100);
  display: grid;
  place-items: center;
  animation: bgShift 28s linear infinite alternate;
}

button, input, select, textarea, ::placeholder {
  font-family: 'Press Start 2P', cursive;
}

.container { text-align: center; width: 100%; }

/* ---- Title + icon alignment fix ---- */
h1{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
h1 .icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.0em;
  font-size: 1.35em;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: 0.06em;
}
h1 .title{ line-height: 1; }

/* ---- CRT wrapper (padding around board) ---- */
.crt { position: relative; padding: 10px; border-radius: 18px; }

/* ---- Game Area ---- */
#gameArea{
  position:relative;
  width:540px; max-width:92vw; aspect-ratio:4/5;
  background:var(--board); border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden;
  margin: 0 auto calc(8px + var(--hudGap, 0px)); /* dynamic gap below for HUD */
}

/* Stable CRT scanlines + vignette directly on the board */
#gameArea::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px
  );
  mix-blend-mode: overlay; border-radius:16px; z-index:5;
  animation: flicker 1.4s steps(2) infinite;
}
#gameArea::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background: radial-gradient(circle at center,
    rgba(0,0,0,0) 62%, rgba(0,0,0,.25) 100%);
  border-radius:16px;
}

#pauseOverlay.overlay{
  position:absolute; inset:0; display:none; place-items:center; z-index:7;
  background:rgba(0,0,0,.5); color:#fff; font-size:1.2rem;
}
#pauseOverlay.show{ display:grid; }

#paddle{
  position:absolute; bottom:12px; left:calc(50% - 50px);
  width:100px; height:16px; background:var(--paddle);
  border-radius:999px; transition:width .5s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,.2) inset;
  z-index:4;
}

.ball{
  position:absolute; top:0; width:20px; height:20px; border-radius:50%;
  background:var(--ball); box-shadow:0 0 10px rgba(231,76,60,.4);
  z-index:3;
}

/* Power-ups */
.powerup{
  position:absolute; top:0; width:20px; height:20px; border-radius:4px; z-index:3;
}
.powerup.expand{ background:#4caf50; }
.powerup.slow  { background:#2196f3; border-radius:50%; }
.powerup.coin  { background:gold; border-radius:50%; }
.powerup.life  { background:pink; }

/* Hazards */
.hazard{
  position:absolute; top:0; width:22px; height:22px; border-radius:50%;
  background:var(--hazard); box-shadow:0 0 10px rgba(255,82,82,.5);
  z-index:3;
}
.hazard::after{
  content:"✖"; color:#111; position:absolute; inset:0;
  display:grid; place-items:center; font-size:14px;
}

/* Catch particles (inside the board) */
.particle{
  position:absolute; width:6px; height:6px; border-radius:2px; pointer-events:none; z-index:8;
}

/* ---- HUD ---- */
.info{
  display:flex; gap:18px; align-items:center; justify-content:center;
  flex-wrap:wrap; font-weight:500; padding-bottom:10px;
}
.controls{ display:flex; gap:10px; flex-wrap:wrap; }

button{
  background:var(--paddle); color:#fff; border:none; padding:10px 18px;
  border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}
#pauseBtn, #settingsBtn { background:#2bb1d6; }
button:disabled{ opacity:.65; cursor:not-allowed; }

/* Compact icon button for settings */
.btn-icon{
  width:40px; height:40px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
}
.btn-icon svg{ width:20px; height:20px; stroke:#fff; fill:none; }

/* ---------- Modals ---------- */
.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px); z-index:1000;
}
.modal.open{ display:grid; }

.modal__card{
  width:min(92vw,420px); background:#fff; color:#222; border-radius:16px;
  box-shadow:var(--shadow); padding:22px; text-align:center;
  animation:popIn .28s ease forwards;
}
.modal__card h2{ margin:0 0 6px; color:#e74c3c; }
.modal__card p{ margin:6px 0; }
.modal__actions{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.btn-primary, .btn-ghost{
  font-weight:600; padding:10px 16px; border-radius:10px; border:0; cursor:pointer;
}
.btn-primary{ background:#33c060; color:#fff; }
.btn-ghost{ background:#eee; color:#222; }

/* Settings specifics */
.setting{ margin:14px 0; }
.setting .label{ margin-bottom:8px; }
.setting .inline{ margin-right:14px; display:inline-flex; gap:8px; align-items:center; }

/* New High Score banner */
.new-high-score{
  display:none; font-size:1.1rem; font-weight:700; color:#ff9800;
  text-shadow:0 0 10px rgba(255,152,0,.8), 0 0 20px rgba(255,152,0,.6);
  margin-bottom:10px; animation:pulse 1s infinite;
}

/* Confetti */
.confetti{
  position:fixed; width:8px; height:8px; top:-10px; z-index:2000;
  border-radius:2px; animation:fall linear forwards;
}

/* Juicy feedback */
.shake{ animation:shake .3s linear; }
.flash{ animation:flash .18s linear; }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); }
  50%{ transform:translateX(6px); }
  75%{ transform:translateX(-3px); }
}
@keyframes flash{
  from{ box-shadow:0 0 0 0 rgba(255,255,255,.0); }
  to  { box-shadow:0 0 0 6px rgba(255,255,255,.2) inset; }
}

/* Animations */
@keyframes popIn { from{ transform:scale(.95); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes pulse { 0%{transform:scale(1);} 50%{transform:scale(1.1);} 100%{transform:scale(1);} }
@keyframes fall { to{ transform:translateY(100vh) rotate(360deg); opacity:0; } }
@keyframes bgShift { 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(25deg); } }
@keyframes flicker { 0%{ opacity:.9; } 50%{ opacity:1; } 100%{ opacity:.9; } }

/* ===== Mobile layout polish ===== */
@media (max-width: 768px) {
  /* Lock scroll only while playing, with proper viewport height */
  body.noscroll {
    position: fixed; inset: 0;
    overflow: hidden;
    height: calc(var(--vh) * 100);
    width: 100%;
  }

  /* Keep the title always visible on top */
  h1{
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 50%; transform: translateX(-50%);
    margin: 0;
    z-index: 30;
    padding: 4px 8px;
  }
  .container { padding-top: 64px; } /* space under sticky title */

  /* Game area sits between title and bottom overlay */
  #gameArea { margin: 8px auto calc(8px + var(--hudGap, 0px)); }

  /* HUD becomes a floating overlay; single-line layout */
  .info{
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 30;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 6px 8px;                  /* tighter */
    gap: 8px 12px;

    /* grid makes stats (left) + controls (right) on one line */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    /* don't block game touches except on HUD content */
    pointer-events: none;
  }
  .info > * { pointer-events: auto; }

  .info p{ margin: 0; font-size: 12px; display:inline-block; }
  .controls{ gap: 8px; flex-wrap: nowrap; justify-content: flex-end; }
  .controls button{ padding: 8px 10px; font-size: 12px; }
  .controls .btn-icon{ width:36px; height:36px; } /* even tighter on mobile */
  .controls .btn-icon svg{ width:18px; height:18px; }
}