:root{
    --neon-cyan:#4dd8ff;
    --neon-pink:#ff5fd6;
    --bg-deep:#05060f;
    --sa-top: env(safe-area-inset-top, 0px);
    --sa-bottom: env(safe-area-inset-bottom, 0px);
    --sa-left: env(safe-area-inset-left, 0px);
    --sa-right: env(safe-area-inset-right, 0px);
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{
    margin:0; padding:0; width:100%;
    height:100vh; height:100dvh;
    background:var(--bg-deep);
    overflow:hidden;
    overscroll-behavior:none;
    touch-action:none;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none;
    font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
  }
  #wrap{
    position:fixed; inset:0;
    width:100%; height:100vh; height:100dvh;
    display:flex; align-items:center; justify-content:center;
  }
  canvas{

    display:block;
    touch-action:none;
  }
  #hud{
    position:absolute; top:0; left:0; right:0;
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:calc(10px + var(--sa-top)) calc(10px + var(--sa-right)) 10px calc(10px + var(--sa-left));
    gap:8px;
    pointer-events:none;
    z-index:5;
  }
  .hud-box{
    background:rgba(10,14,35,0.55);
    border:1px solid rgba(77,216,255,0.35);
    border-radius:10px;
    padding:5px 10px;
    color:#e8f6ff;
    backdrop-filter: blur(3px);
    box-shadow:0 0 12px rgba(77,216,255,0.15) inset;
    min-width:0;
  }
  .label{
    font-size:clamp(8px,2.4vw,10px);
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--neon-cyan);
    opacity:0.85;
    margin-bottom:2px;
    white-space:nowrap;
  }
  .value{
    font-size:clamp(15px,4.5vw,20px);
    font-weight:700;
    text-shadow:0 0 8px rgba(77,216,255,0.6);
  }
  #nextBox{ text-align:center; }
  #nextCanvas{ display:block; margin:2px auto 0; width:38px; height:38px; }

  #titleScreen, #gameOverScreen{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:radial-gradient(ellipse at 50% 30%, rgba(30,20,70,0.85), rgba(2,3,10,0.96));
    z-index:20;
    text-align:center;
    padding:calc(20px + var(--sa-top)) calc(20px + var(--sa-right)) calc(20px + var(--sa-bottom)) calc(20px + var(--sa-left));
    box-sizing:border-box;
    overflow-y:auto;
  }
  .game-title{
    font-size:clamp(24px,8vw,44px);
    font-weight:800;
    background:linear-gradient(135deg,#4dd8ff,#ff5fd6,#ffd24d);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:0 0 30px rgba(120,180,255,0.35);
    letter-spacing:1px;
    margin-bottom:6px;
  }
  .sub{
    color:#a9c4e8; font-size:clamp(12px,3.6vw,14px); margin-bottom:18px; max-width:340px; line-height:1.5;
  }
  .planet-strip{
    display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; justify-content:center; max-width:360px;
  }
  .planet-strip canvas{ display:block; width:34px; height:34px; }
  button.bigbtn{
    background:linear-gradient(135deg,#4dd8ff,#2a6fe0);
    border:none; color:#04101f; font-weight:800; font-size:clamp(14px,4vw,16px);
    padding:14px 38px; border-radius:30px; cursor:pointer;
    box-shadow:0 0 25px rgba(77,216,255,0.5);
    letter-spacing:0.5px;
    min-height:48px;
    touch-action:manipulation;
  }
  button.bigbtn:active{ transform:scale(0.96); }
  #finalScore{
    font-size:clamp(32px,10vw,42px); font-weight:800; color:#ffd24d;
    text-shadow:0 0 20px rgba(255,210,77,0.6);
    margin:6px 0 4px;
  }
  #bestScoreLine{ color:#8fb0d9; font-size:13px; margin-bottom:20px; }
  .hidden{ display:none !important; }
  #howtoLink{
    position:absolute; bottom:calc(10px + var(--sa-bottom)); right:calc(12px + var(--sa-right));
    color:#7fb8e0; font-size:11px; opacity:0.6; z-index:6; pointer-events:none;
    max-width:44vw; text-align:right;
  }
  #muteBtn{
    position:absolute; top:calc(10px + var(--sa-top)); left:50%;
    transform:translateX(-50%);
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(10,14,35,0.55);
    border:1px solid rgba(77,216,255,0.35);
    color:#e8f6ff;
    font-size:16px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:6;
    box-shadow:0 0 12px rgba(77,216,255,0.15) inset;
    backdrop-filter: blur(3px);
    touch-action:manipulation;
  }
  #muteBtn:active{ transform:translateX(-50%) scale(0.92); }
  #creditLine{
    position:absolute; bottom:calc(10px + var(--sa-bottom)); left:calc(12px + var(--sa-left));
    color:#5f7fa8; font-size:11px; opacity:0.55; z-index:6; pointer-events:none;
  }
  @media (max-width:380px){
    .hud-box{ padding:4px 7px; }
    #howtoLink, #creditLine{ font-size:10px; }
  }
  @media (max-height:560px){
    .planet-strip{ margin-bottom:12px; }
    .sub{ margin-bottom:12px; }
    .game-title{ margin-bottom:2px; }
  }