:root{
    --pool-deep:#0B4F6C;
    --pool-mid:#146A8C;
    --pool-light:#2E9CB8;
    --foam:#F4FBFF;
    --gold:#F7D060;
    --danger:#FF5D6C;
    --ink:#04283A;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; padding:0;
    height:100%;
    background:
      radial-gradient(120% 90% at 50% -10%, var(--pool-light) 0%, var(--pool-mid) 45%, var(--pool-deep) 100%);
    font-family:'Poppins',sans-serif;
    color:var(--foam);
    overflow:hidden;
    overscroll-behavior:none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }
  #app{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    height:100dvh;
    height:100vh;
    width:100%;
    padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow:hidden;
  }
  h1{
    font-family:'Baloo 2',sans-serif;
    font-weight:800;
    font-size:clamp(16px,4.5vw,28px);
    margin:0 0 6px;
    flex:0 0 auto;
    letter-spacing:0.5px;
    color:var(--foam);
    text-shadow:0 2px 0 rgba(4,40,58,0.4);
  }
  #hud{
    width:100%;
    max-width:480px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(8px,2.5vw,16px);
    padding:0 10px;
    margin-bottom:clamp(6px,1.5vh,10px);
    font-family:'Baloo 2',sans-serif;
  }
  .hud-box{
    background:rgba(4,40,58,0.35);
    border:2px solid rgba(244,251,255,0.25);
    border-radius:14px;
    padding:clamp(4px,1vh,6px) clamp(10px,3vw,14px);
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:68px;
  }
  #sound-toggle{
    cursor:pointer;
    user-select:none;
    -webkit-tap-highlight-color: transparent;
  }
  #sound-toggle:active{ transform:translateY(1px); }
  #sound-icon{ font-size:18px; line-height:1.2; }
  .hud-label{
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    opacity:0.7;
    font-family:'Poppins',sans-serif;
  }
  .hud-value{
    font-size:clamp(15px,3.6vw,20px);
    font-weight:700;
    line-height:1.2;
  }
  #next-preview{
    width:36px;height:36px;
    border-radius:50%;
    margin-top:2px;
  }
  #canvas-wrap{
    position:relative;
    flex:1 1 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    width:100%;
  }
  #canvas-inner{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 4px rgba(244,251,255,0.15);
    line-height:0;
  }
  canvas{ display:block; touch-action:none; }
  #overlay{
    position:absolute; inset:0;
    display:none;
    align-items:center; justify-content:center;
    flex-direction:column;
    background:rgba(4,40,58,0.78);
    text-align:center;
    padding:20px;
  }
  #overlay h2{
    font-family:'Baloo 2',sans-serif;
    font-size:28px;
    margin:0 0 6px;
    color:var(--gold);
  }
  #overlay p{ margin:2px 0 16px; opacity:0.85; font-size:14px; }
  button{
    font-family:'Baloo 2',sans-serif;
    font-weight:700;
    font-size:16px;
    background:var(--gold);
    color:var(--ink);
    border:none;
    border-radius:12px;
    padding:10px 22px;
    cursor:pointer;
    box-shadow:0 4px 0 #b8942e;
    transition:transform 0.06s ease;
  }
  button:active{ transform:translateY(3px); box-shadow:0 1px 0 #b8942e; }
  #hint{
    flex:0 0 auto;
    margin-top:6px;
    font-size:clamp(10px,2.8vw,12px);
    opacity:0.65;
    text-align:center;
    max-width:400px;
    padding:0 12px;
  }
  @media (max-height: 560px){
    h1{ display:none; }
  }