:root{
      --bg:#0b0f14;
      --panel:#11161d;
      --glass:rgba(255,255,255,.06);
      --text:#e7eef7;
      --muted:#9fb0c7;
      --accent:#6aa9ff;
      --green:#3fd8a5;
      --red:#ff4d5a;
      --dark:#0f0f10;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box;}
    html,body{height:100%; overscroll-behavior:none;}
    body{
      margin:0; 
      background: radial-gradient(1200px 600px at 15% 10%, #142034 0%, #0b0f14 60%),
                  radial-gradient(800px 500px at 85% 90%, #1a2740 0%, #0b0f14 55%);
      color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Apple Color Emoji", "Segoe UI Emoji";
      font-size: clamp(14px, 1.6vw, 18px); 
      letter-spacing:.02em;
      overflow:hidden;
      -webkit-user-select:none;
      -khtml-user-select: none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
    }
    #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;}
    h1.logo{margin:0; font-weight:800; font-size: clamp(16px, 2.4vw, 22px); letter-spacing:.08em; text-transform:uppercase; color:#eaf3ff;}
    .stats{display:flex; gap:14px; font-size:clamp(12px, 1.8vw, 16px); color:var(--muted);}
    .stats strong{color:var(--text); 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:var(--glass);
      border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
      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)),
        var(--field-bg-image, none);
      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;
      user-select:none; touch-action:none;
    }
    .ball.red{
      background: var(--ball-red-bg, radial-gradient(circle at 30% 30%, #ff8a94, #ff4d5a 60%, #b7111f 100%));
      background-size: cover; background-position:center;
    }
    .ball.black{
      background: var(--ball-black-bg, radial-gradient(circle at 30% 30%, #696c72, #2a2c31 60%, #0f0f12 100%));
      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(var(--ring-color,#9ad1ff) var(--deg,360deg), var(--ring-bg, 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.red .ring{--ring-color:#fff; --ring-bg:rgba(0,0,0,.2)}
    .ball.black .ring{--ring-color:#000; --ring-bg:rgba(255,255,255,.15)}

    .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: var(--shadow); 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:var(--glass); color:#d5e3ff; border-color:rgba(255,255,255,.12)}

    .kbd{display:inline-grid; place-items:center; padding:2px 8px; border-radius:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:clamp(10px, 1.5vw, 14px)}

    /* 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: var(--shadow); 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}
    }