:root {
    --bg:     #0a0a1a;
    --panel:  #12122a;
    --border: #2a2a5a;
    --neon1:  #ff4fcb;
    --neon2:  #4ff0ff;
    --neon3:  #ffe94f;
    --text:   #e8e8ff;
    --font-h: 'Boogaloo', cursive;
    --font-b: 'Nunito', sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body {
    background: var(--bg); color: var(--text); font-family: var(--font-b);
    display: flex; flex-direction: column; align-items: center;
    padding:
      env(safe-area-inset-top,6px) env(safe-area-inset-right,0px)
      env(safe-area-inset-bottom,6px) env(safe-area-inset-left,0px);
  }
  body::before {
    content:''; position:fixed; inset:0;
    background-image:
      radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.5) 0%,transparent 100%),
      radial-gradient(1px 1px at 30% 70%,rgba(255,255,255,.4) 0%,transparent 100%),
      radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,.6) 0%,transparent 100%),
      radial-gradient(1px 1px at 75% 85%,rgba(255,255,255,.3) 0%,transparent 100%),
      radial-gradient(1px 1px at 90% 40%,rgba(255,255,255,.5) 0%,transparent 100%),
      radial-gradient(1px 1px at 20% 50%,rgba(255,255,255,.3) 0%,transparent 100%),
      radial-gradient(1px 1px at 65% 60%,rgba(255,255,255,.4) 0%,transparent 100%);
    pointer-events:none; z-index:0;
  }
  #hdr {
    text-align:center; position:relative; z-index:1;
    flex-shrink:0; width:100%; padding:4px 0 2px;
  }
  #hdr h1 {
    font-family:var(--font-h); font-size:clamp(1.3rem,5vw,3rem);
    letter-spacing:4px; color:var(--neon2);
    text-shadow:0 0 12px var(--neon2),0 0 40px var(--neon2);
    animation:pulse 3s ease-in-out infinite; line-height:1.1;
  }
  #hdr p { font-size:clamp(.58rem,2vw,.85rem); color:#888; }
  @keyframes pulse {
    0%,100%{ text-shadow:0 0 12px var(--neon2),0 0 40px var(--neon2); }
    50%    { text-shadow:0 0 20px var(--neon2),0 0 70px var(--neon2),0 0 100px var(--neon2); }
  }
  #scoreboard {
    display:flex; gap:clamp(6px,2vw,20px); flex-shrink:0;
    position:relative; z-index:1; padding:4px 0;
  }
  .score-box {
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:clamp(3px,1.2vw,8px) clamp(10px,3vw,22px); text-align:center;
  }
  .score-box .label {
    font-size:clamp(.52rem,1.4vw,.7rem); text-transform:uppercase;
    letter-spacing:2px; color:#666;
  }
  .score-box .value {
    font-family:var(--font-h); font-size:clamp(1rem,4vw,1.8rem);
    color:var(--neon3); text-shadow:0 0 8px var(--neon3);
  }
  .score-box .value.pop { animation:scorePop .3s ease; }
  @keyframes scorePop {
    0%  { transform:scale(1); }
    50% { transform:scale(1.4); color:#fff; }
    100%{ transform:scale(1); }
  }
  .score-box--balance { border-color:#2a5a3a; }
  .score-box--balance .value { color:#4fff91 !important; text-shadow:0 0 8px #4fff91 !important; }
  .score-box--balance.in-loss { border-color:#5a2a2a; }
  .score-box--balance.in-loss .value { color:#ff4f4f !important; text-shadow:0 0 8px #ff4f4f !important; }
  /* Ball Selector */
  #ball-selector {
    display:flex; gap:clamp(4px,1.5vw,10px); flex-shrink:0;
    position:relative; z-index:1; padding:2px 0 2px; align-items:center;
  }
  #ball-selector .sel-label {
    font-size:clamp(.52rem,1.4vw,.68rem); text-transform:uppercase;
    letter-spacing:2px; color:#555; margin-right:2px;
  }
  .ball-btn {
    font-family:var(--font-h); font-size:clamp(.7rem,2.2vw,1rem);
    letter-spacing:1px; padding:clamp(3px,1vw,6px) clamp(8px,2.5vw,16px);
    border-radius:50px; border:2px solid transparent; cursor:pointer;
    transition:transform .12s,box-shadow .12s,border-color .12s;
    background:var(--panel); color:#aaa; -webkit-tap-highlight-color:transparent;
  }
  .ball-btn:active { transform:scale(.9); }
  .ball-btn.active { color:#fff; transform:scale(1.08); }
  /* Qty Selector */
  #qty-selector {
    display:flex; gap:clamp(6px,2vw,12px); flex-shrink:0;
    position:relative; z-index:1; padding:2px 0 2px; align-items:center;
  }
  #qty-selector .sel-label {
    font-size:clamp(.52rem,1.4vw,.68rem); text-transform:uppercase;
    letter-spacing:2px; color:#555;
  }
  #qty-select {
    font-family:var(--font-h); font-size:clamp(.75rem,2.5vw,1.05rem);
    background:var(--panel); color:var(--neon2);
    border:2px solid var(--neon2); border-radius:50px;
    padding:clamp(3px,1vw,6px) clamp(10px,3vw,18px);
    cursor:pointer; outline:none; appearance:none;
    box-shadow:0 0 8px var(--neon2)55;
    text-align:center;
  }
  #qty-select:focus { box-shadow:0 0 14px var(--neon2)99; }
  /* Carousel indicator */
  #carousel-hint {
    font-size:clamp(.48rem,1.3vw,.62rem); color:#444; letter-spacing:1px;
    flex-shrink:0; position:relative; z-index:1; padding:0 0 2px;
    text-align:center; font-family:var(--font-b);
  }
  #carousel-hint span { color:#ff6b6b; }
  #gameWrap {
    position:relative; z-index:1; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    flex:1 1 auto; width:100%; min-height:0;
  }
  canvas {
    border-radius:12px; border:2px solid var(--border);
    box-shadow:0 0 30px rgba(79,240,255,.15),0 0 60px rgba(79,240,255,.05);
    display:block; touch-action:manipulation;
  }
  #controls {
    flex-shrink:0; display:flex; gap:clamp(8px,2vw,12px); align-items:center;
    padding:4px 0 4px; position:relative; z-index:1;
  }
  .btn {
    font-family:var(--font-h); font-size:clamp(.85rem,3vw,1.25rem);
    letter-spacing:2px; padding:clamp(5px,1.5vw,10px) clamp(14px,4vw,32px);
    border:none; border-radius:50px; cursor:pointer;
    transition:transform .1s,box-shadow .1s; -webkit-tap-highlight-color:transparent;
  }
  .btn:active { transform:scale(.93); }
  .btn-drop {
    background:var(--neon1); color:#fff;
    box-shadow:0 0 16px var(--neon1),0 4px 0 #8a1465;
  }
  .btn-drop:hover { box-shadow:0 0 28px var(--neon1),0 4px 0 #8a1465; }
  .btn-reset { background:transparent; color:#666; border:1px solid var(--border); }
  .btn-reset:hover { color:var(--text); border-color:#555; }
  .popup {
    position:absolute; font-family:var(--font-h); font-size:clamp(.85rem,3vw,1.4rem);
    pointer-events:none; animation:floatUp .9s ease forwards;
    z-index:10; text-shadow:0 0 10px currentColor;
  }
  @keyframes floatUp {
    0%  { opacity:1; transform:translateY(0) scale(1); }
    100%{ opacity:0; transform:translateY(-60px) scale(1.3); }
  }