:root{
    --bg-1: #0a0a0f;
    --bg-2: #0b132b;
    --fg: #e6e6f0;
    --muted: #96a0b5;
    --neon1: #00e5ff;
    --neon2: #ff3d81;
    --neon3: #aaff00;
    --card: rgba(255,255,255,0.06);
    --blur: blur(10px);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--fg);
    background: radial-gradient(100% 100% at 50% 0%, var(--bg-2), var(--bg-1));
    overflow: hidden;
    cursor: none;
  }
  
  /* Canvas fills page */
  #stage{
    position:fixed; inset:0;
    width:100vw; height:100vh;
    display:block;
    background:
      radial-gradient(80vmax 80vmax at 10% 20%, rgba(0,229,255,0.08), transparent 60%),
      radial-gradient(60vmax 60vmax at 90% 10%, rgba(255,61,129,0.08), transparent 70%),
      radial-gradient(60vmax 60vmax at 50% 90%, rgba(170,255,0,0.06), transparent 70%);
    filter: saturate(1.1);
  }
  
  /* HUD */
  .hud{
    position:fixed; left:50%; top:3rem; transform:translateX(-50%);
    text-align:center; padding:0.6rem 1rem;
    background: var(--card);
    backdrop-filter: var(--blur);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    user-select:none;
  }
  .hud h1{margin:.2rem 0 .2rem; letter-spacing:.5px; font-size:1.2rem}
  .hud p{margin:0; color:var(--muted); font-size:.9rem}
  kbd{background:#1a2238; color:#cbd5e1; padding:.1rem .4rem; border-radius:.4rem; border:1px solid #2a3558}
  
  /* Bottom control panel */
  .panel{
    position:fixed; left:50%; bottom:2rem; transform:translateX(-50%);
    display:flex; flex-direction:column; gap:.75rem; align-items:center;
    background: var(--card);
    backdrop-filter: var(--blur);
    padding: .9rem 1rem;
    border-radius: 16px; border:1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .panel .row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
  .panel .controls{
    justify-content:space-between;
    width:100%;
  }
  .panel .controls button{
    flex:1 1 33%;
    width:100%;
  }
  
  .stat{ display:flex; flex-direction:column; align-items:center; min-width:84px;}
  .stat span{ font-weight:700; font-variant-numeric: tabular-nums; }
  .stat label{ font-size:.78rem; color:var(--muted); margin-top:.15rem; }
  
  button{
    appearance:none; border:none; cursor:none; padding:.6rem .9rem;
    color:var(--fg); font-weight:600; letter-spacing:.3px;
    border-radius:999px; background:linear-gradient(135deg, #1b2b44, #101826);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 6px 18px rgba(0,0,0,0.35);
    transition: transform .08s ease, box-shadow .2s ease;
  }
  button:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,0.45) }
  button:active{ transform:translateY(0) scale(.99) }

  
  .welcome-splash{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.95);
    width: min(420px, 90vw);
    padding: 1.6rem 2rem;
    text-align:center;
    background: rgba(10,12,26,0.82);
    border:1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6);
    backdrop-filter: blur(14px);
    opacity:0;
    pointer-events:none;
    transition: opacity .35s ease, transform .35s ease;
    font-size:1rem;
    line-height:1.4;
  }
  .welcome-splash.visible{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
  }
  .welcome-splash h2{
    margin:0 0 .6rem;
    font-size:1.35rem;
  }
  .welcome-splash .hint{
    margin:.9rem 0 0;
    font-size:.9rem;
    color:var(--muted);
  }
  
  /* Small screens */
  @media (max-width: 600px){
    .hud{ top:1rem; width:calc(100% - 2rem) }
    .panel{ bottom:1rem; width:calc(100% - 2rem) }
  }

  .hidden{ display:none !important; }

  .modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100;
  }
  .modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(4,6,15,0.72);
    backdrop-filter:blur(6px);
  }
  .modal__card{
    position:relative;
    width:min(420px, 90vw);
    padding:1.6rem 1.8rem 1.9rem;
    border-radius:22px;
    background:rgba(8,10,22,0.95);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 30px 60px rgba(0,0,0,0.65);
    text-align:left;
    color:var(--fg);
    z-index:1;
  }
  .modal__card h2{
    margin:0 0 1rem;
    font-size:1.3rem;
  }
  .modal__close{
    position:absolute;
    top:.65rem;
    right:.75rem;
    width:2.2rem;
    height:2.2rem;
    border-radius:50%;
    font-size:1.4rem;
    line-height:1;
    padding:0;
    border:1px solid rgba(255,255,255,0.15);
    background:linear-gradient(135deg,#283756,#101626);
    color:var(--fg);
  }
  .hints-list{
    margin:0 0 1.4rem;
    padding-left:1.1rem;
    color:var(--muted);
    line-height:1.5;
  }
  .hints-list li{
    margin-bottom:.6rem;
  }
  .hints-list strong{
    color:var(--fg);
  }
  .modal__cta{
    width:100%;
  }