html, body { margin:0; height:100%; background:#1a120a; overflow:hidden; touch-action:none; -webkit-tap-highlight-color:transparent; font-family: system-ui, Arial, sans-serif; }
  #wrap { position:relative; width:100vw; height:100vh; height:100dvh; display:flex; align-items:center; justify-content:center; }
  canvas { display:block; background:linear-gradient(180deg,#2a1f14,#1a120a); max-width:100%; max-height:100%; touch-action:none; }
  #hud { position:absolute; top:20px; left:0; right:0; display:flex; justify-content:space-between; padding:0 24px 0 74px; pointer-events:none; }
  #hud .label { font-size:13px; font-weight:700; letter-spacing:0.08em; color:#c9a876; }
  #hud .val { font-size:28px; font-weight:800; color:#ffd25a; }
  #hint { position:absolute; bottom:26px; left:0; right:0; text-align:center; font-size:16px; font-weight:700; letter-spacing:0.04em; color:#ffd25a; pointer-events:none; }
  .home-btn { position:absolute; top:16px; left:16px; z-index:20; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.08); border:2px solid #ffd25a; color:#e7ecf7; font-size:20px; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,0.4); }
  .home-btn:hover { filter:brightness(1.25); }
  #overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#e7ecf7; background:rgba(26,18,10,0.85); }
  #overlay.hidden { display:none; }
  #overlay h1 { font-size:28px; margin:0 0 10px; color:#ffd25a; }
  #overlay p { max-width:340px; color:#c9a876; font-size:15px; line-height:1.5; margin:0 0 20px; }
  #overlay .final { font-size:22px; color:#a6ffb3; margin-bottom:16px; font-weight:700; }
  button { font-size:20px; padding:12px 34px; border-radius:40px; border:none; background:linear-gradient(135deg,#ffd25a,#ff9f43); color:#2a1a04; font-weight:800; cursor:pointer; box-shadow:0 6px 18px -6px rgba(255,210,90,0.7); }