* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  html, body {
    margin:0; padding:0; overflow:hidden; height:100%; background:#d8c9a3; font-family:'Inter',sans-serif;
    overscroll-behavior:none; touch-action:none; user-select:none; -webkit-user-select:none;
    position:fixed; width:100%;
  }
  #sky {
    position:fixed; inset:0;
    background: linear-gradient(to bottom, #cdbc90 0%, #d9c9a1 35%, #e6d9b3 70%, #eee0bf 100%);
  }
  #sun {
    position:fixed; top:10%; right:14%; width:150px; height:150px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,246,222,0.85) 0%, rgba(255,232,178,0.4) 45%, rgba(255,232,178,0) 72%);
    filter: blur(1px); pointer-events:none;
  }
  canvas { display:block; position:relative; z-index:1; }
  .font-display { font-family:'Fredoka', sans-serif; }
  .hud-panel {
    background: rgba(255,255,255,0.62);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 8px 24px -8px rgba(31,68,90,0.25);
  }
  #crosshair {
    width:26px; height:26px; border-radius:9999px; border:2.5px solid rgba(23,74,94,0.55);
    transition: transform .08s ease, border-color .08s ease, background .08s ease;
  }
  #crosshair.hit { border-color:#ff7a45; background:rgba(255,122,69,0.25); transform: translate(-50%,-50%) scale(1.35); }
  #crosshair::before, #crosshair::after {
    content:''; position:absolute; background:rgba(23,74,94,0.55);
  }
  #crosshair::before { left:50%; top:-9px; width:2px; height:8px; transform:translateX(-50%); }
  #crosshair::after { left:50%; bottom:-9px; width:2px; height:8px; transform:translateX(-50%); }
  .health-fill { transition: width .25s ease, background-color .3s ease; }
  .heat-arc { transition: stroke-dashoffset .1s linear; }
  .pop-in { animation: popIn .35s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes popIn { 0% { opacity:0; transform: scale(.85) translateY(8px);} 100% { opacity:1; transform:scale(1) translateY(0);} }
  .float-slow { animation: floatY 4s ease-in-out infinite; }
  @keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
  .btn-primary {
    background: linear-gradient(180deg, #ff9a56 0%, #ff7a45 100%);
    box-shadow: 0 10px 24px -8px rgba(255,122,69,0.7), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { transform: translateY(1px); }
  #scorePop { pointer-events:none; }
  .score-fly { animation: scoreFly .7s ease-out forwards; }
  @keyframes scoreFly { 0%{ opacity:1; transform:translateY(0) scale(1);} 100%{ opacity:0; transform:translateY(-40px) scale(1.3);} }
  ::selection { background: #ffd6a5; }