:root { --sat: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #1a1418; color: #f3e9dc;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}
#game {
  position: fixed; inset: 0; display: block; touch-action: none;
}

.hud-btn {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 20;
  width: 46px; height: 46px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(20,14,18,0.6); color: #fff; font-size: 22px;
  cursor: pointer; line-height: 1; padding: 0;
  backdrop-filter: blur(2px);
}
.hud-btn:active { transform: scale(0.94); }
.hud-btn.muted { opacity: 0.6; }

.overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(30,20,28,0.55), rgba(10,6,10,0.85));
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.overlay.hidden { display: none; }
.panel {
  width: min(440px, 100%);
  background: rgba(40,28,34,0.92);
  border: 2px solid rgba(255,220,170,0.25);
  border-radius: 18px;
  padding: 22px 22px 18px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: pop .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
h1 {
  margin: 0 0 6px; font-size: 38px; line-height: 1; letter-spacing: 1px;
  color: #ffd98a; text-shadow: 0 3px 0 #6b3a1e, 0 6px 16px rgba(0,0,0,.6);
}
h1 span { font-size: 52px; color: #fff; display: block; }
h2 { margin: 0 0 4px; font-size: 34px; color: #ffd98a; text-shadow: 0 3px 0 #6b3a1e; }
.tag { margin: 4px 0 14px; opacity: .85; font-size: 15px; }
.legend { list-style: none; padding: 0; margin: 0 auto 10px; text-align: left; font-size: 15px; line-height: 1.5; max-width: 360px; }
.legend li { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.legend b { color: #ffd98a; }
.ic { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-block; }
.ic-move { background: radial-gradient(circle at 50% 50%, #fff 0 25%, transparent 27%), radial-gradient(circle, #3a5b8c, #1d2c45); }
.ic-stam { background: linear-gradient(90deg, #6fd36b 0 70%, #3a2a2a 70%); border-radius: 6px; }
.ic-fly { background: radial-gradient(circle at 50% 50%, #222 0 30%, transparent 32%), radial-gradient(circle at 35% 40%, rgba(255,255,255,.7) 0 20%, transparent 22%), radial-gradient(circle at 65% 40%, rgba(255,255,255,.7) 0 20%, transparent 22%), #7a8f5a; }
.ic-rain { background: linear-gradient(160deg, transparent 45%, #9fc7ff 46%, #9fc7ff 52%, transparent 53%), linear-gradient(160deg, transparent 65%, #9fc7ff 66%, #9fc7ff 72%, transparent 73%), #3c4a6a; }
.ic-hole { background: radial-gradient(circle at 50% 55%, #050303 0 45%, #6a4a3a 50%, #8a6a4a 60%); }
.zones { font-size: 12px; margin: 0 0 14px; line-height: 1.9; opacity: .95; }
.z { padding: 2px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; margin: 1px; }
.z-rough { background: #4a3c33; color: #e9d9c8; }
.z-moss { background: #3f6b34; color: #e4f2d9; }
.z-smooth { background: #b9c8d3; color: #22303a; }
.big-btn {
  font: inherit; font-size: 20px; font-weight: bold; letter-spacing: .5px;
  padding: 14px 30px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(#ffd98a, #f0a640); color: #3a2010;
  box-shadow: 0 5px 0 #8a5620, 0 10px 20px rgba(0,0,0,.4);
  min-width: 220px; min-height: 56px;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a5620; }
.small { font-size: 12px; opacity: .6; margin: 10px 0 0; }
.best { font-size: 14px; color: #ffd98a; margin: 10px 0 0; }
.scores { display: flex; justify-content: center; gap: 36px; margin: 10px 0 8px; }
.scores small { display: block; opacity: .6; font-size: 11px; letter-spacing: 2px; }
.scores div div { font-size: 34px; font-weight: bold; color: #fff; }
.newbest { color: #ffd98a; font-weight: bold; font-size: 18px; margin: 0 0 12px; animation: glow 1s ease-in-out infinite alternate; }
.newbest.hidden { display: none; }
@keyframes glow { from { text-shadow: 0 0 4px #ffd98a; } to { text-shadow: 0 0 18px #ffd98a, 0 0 30px #f0a640; } }

body.touch .desk { display: none; }
body:not(.touch) .touch { display: none; }

@media (max-height: 640px) {
  .panel { padding: 14px 16px 12px; }
  h1 { font-size: 28px; } h1 span { font-size: 38px; }
  .legend { font-size: 13px; line-height: 1.35; }
  .tag { margin: 2px 0 8px; font-size: 13px; }
  .zones { display: none; }
  .big-btn { padding: 10px 24px; font-size: 17px; min-height: 48px; }
}