#app{height:100%; display:flex; flex-direction:column;}

    /* HUD */
    header.hud{
      display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
      gap:12px; padding:12px clamp(12px, 2vw, 24px);
      backdrop-filter:saturate(140%) blur(8px);
      background:linear-gradient(180deg, rgba(10,14,20,.65), rgba(10,14,20,.25));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    header .left, header .right{display:flex; align-items:center; gap:8px;}
    .stats{display:flex; gap:14px; font-size:clamp(12px, 1.8vw, 16px); color:#9fb0c7;}
    .stats strong{color:#e7eef7; font-weight:700; font-variant-numeric: tabular-nums;}

    .icon-btn{
      width:clamp(32px, 9vw, 40px); height:clamp(32px, 9vw, 40px); border-radius:clamp(10px, 3vw, 14px); background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08); box-shadow: 0 10px 30px rgba(0,0,0,.35);
      display:grid; place-items:center; cursor:pointer; color:#cfe0ff; transition:.18s ease;
      touch-action:manipulation; -webkit-tap-highlight-color: transparent;
    }
    .icon-btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.1)}
    .icon-btn:active{transform:translateY(0)}

    /* Game area */
    main.game{position:relative; flex:1; overflow:hidden;}

    /* Goals */
    .goal{position:absolute; left:0; width:100%; display:grid; place-items:center; pointer-events:none;}
    .goal .label{ 
      padding:6px 10px; border-radius:999px; font-size:clamp(10px, 1.5vw, 14px); letter-spacing:.1em; text-transform:uppercase;
      border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25);
    }
    #goalTop{top:0; background:#fff; border-bottom:1px dashed rgba(0,0,0,.2);}
    #goalTop .label{color:#000; background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.25);}
    #goalBottom{bottom:0; background:#000; border-top:1px dashed rgba(255,255,255,.12);}
    #goalBottom .label{color:#fff; background:rgba(0,0,0,.5);}

    /* Field */
    #field{position:absolute;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 40px),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.12)),
        url('./images/background.png');
      background-size: auto, auto, cover;
      background-position: top left, top left, center;
      outline:1px solid rgba(255,255,255,.06); box-shadow: inset 0 10px 30px rgba(0,0,0,.35);
    }

    /* Spawners */
    .spawner{position:absolute; top:14px; bottom:14px; width:52px; display:grid; place-items:center; opacity:.9}
    .spawner.left{left:10px; border-right:1px dashed rgba(255,255,255,.12);} 
    .spawner.right{right:10px; border-left:1px dashed rgba(255,255,255,.12);} 

    /* Balls */
    .ball{position:absolute; width:36px; height:36px; border-radius:999px; pointer-events:auto; cursor:grab;
      box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 2px 6px rgba(255,255,255,.25);
      display:grid; place-items:center; 
      will-change: transform;
    }
    .ball.red{
      background: url('./images/red.png');
      background-size: cover; background-position:center;
    }
    .ball.black{
      background: url('./images/black.png');
      background-size: cover; background-position:center;
    }
    .ball.grab{cursor:grabbing; box-shadow:0 18px 40px rgba(0,0,0,.65), inset 0 2px 10px rgba(255,255,255,.35);}

    /* Timer ring */
    .ball .ring{position:absolute; inset:-5px; border-radius:999px; background:
      conic-gradient(#9ad1ff 360deg, rgba(255,255,255,.08) 0);
      -webkit-mask: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 62%);
              mask: radial-gradient(circle, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 62%);
      pointer-events:none; filter: drop-shadow(0 0 10px rgba(150,200,255,.35));
    }

    .ball .count{position:absolute; font-size:clamp(9px, 1.2vw, 13px); font-weight:700; color:#000; text-shadow:0 1px 2px rgba(0,0,0,.45)}
    .ball.black .count{color:#fff}

    .ball.sink{transition: transform .22s ease, opacity .22s ease; opacity:.15; transform:scale(.55)}
    .ball.explode{animation: boom .28s ease forwards}
    @keyframes boom{0%{transform:scale(1); filter:brightness(1)} 50%{transform:scale(1.4); filter:brightness(2)} 100%{transform:scale(.6); opacity:0; filter:brightness(3)}}

    /* Overlays */
    .overlay{position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(5,8,12,.7), rgba(5,8,12,.55));}
    .overlay.hidden{display:none}
    .panel{width:min(680px, 92vw); padding:clamp(16px, 5vw, 22px); border-radius:clamp(12px, 4vw, 18px); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.35); max-height:100vh; overflow-y:auto}
    .panel h2{margin:6px 0 14px; font-size: clamp(20px, 3vw, 28px)}
    .panel p{margin:8px 0; color:#d1deef}
    .panel .row{display:flex; gap:10px; flex-wrap:wrap}

    .primary, .ghost{padding:clamp(8px, 2.5vw, 12px) clamp(12px, 4vw, 16px); border-radius:clamp(8px, 3vw, 12px); font-weight:700; letter-spacing:.06em; cursor:pointer; border:1px solid transparent; transition:.15s}
    .primary{background:linear-gradient(180deg, #5db1ff, #3884ff); color:#03060c}
    .primary:hover{filter:brightness(1.05)}
    .ghost{background:rgba(255,255,255,.06); color:#d5e3ff; border-color:rgba(255,255,255,.12)}

    /* Drop target highlights while dragging */
    .hilite-top #goalTop{box-shadow: inset 0 -30px 60px rgba(255,255,255,.6)}
    .hilite-bottom #goalBottom{box-shadow: inset 0 20px 50px rgba(0,0,0,.7)}

    /* Tiny toast */
    .toast{position:absolute; left:50%; top:82px; transform:translateX(-50%) translateY(-10px); padding:10px 14px; border-radius:10px; background:rgba(0,0,0,.65); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.2s}
    .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

    /* Help list */
    .help-list{display:grid; gap:10px; margin-top:8px}
    .help-item{display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:10px}
    .help-item .dot{width:14px; height:14px; border-radius:999px; margin-top:3px}
    .help-item .dot.black{background:#020203}
    .help-item .dot.white{background:#fff}

    /* Accessibility: reduced motion */
    @media (prefers-reduced-motion: reduce){
      .ball.explode{animation:none}
      .ball.sink{transition:none}
      .toast{transition:none}
    }