* { box-sizing: border-box; }
:root {
  --green: #2f5f2f;
  --dark: #172217;
  --cream: #fff7df;
  --soil: #6e4728;
  --yellow: #f7ce46;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #95d7ff; color: #1d241c; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-user-select: none; user-select: none; touch-action: none; }
.game-shell { position: fixed; inset: 0; min-height: 100dvh; background: linear-gradient(#8fd2ff 0 48%, #81bd62 48% 100%); }
#game { display: block; width: 100%; height: 100%; }
.hud { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; pointer-events: none; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.hud strong { display: block; font-size: clamp(20px, 6vw, 34px); line-height: 1; color: #143514; }
.hud span { display: block; font-weight: 800; font-size: 13px; }
.scorebox { min-width: 112px; padding: 8px 10px; border: 2px solid rgba(23,34,23,.22); border-radius: 8px; background: rgba(255,247,223,.88); text-align: right; box-shadow: 0 6px 18px rgba(41, 31, 19, .18); }
.jump { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 92px; height: 92px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff08a, var(--yellow) 58%, #c99012); color: #253017; font-weight: 950; letter-spacing: 0; box-shadow: 0 10px 0 #7e5a16, 0 18px 26px rgba(0,0,0,.24); touch-action: manipulation; }
.jump:active { transform: translateY(5px); box-shadow: 0 5px 0 #7e5a16, 0 12px 20px rgba(0,0,0,.22); }
.panel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100vw - 32px)); padding: 18px; border: 2px solid rgba(23,34,23,.18); border-radius: 8px; background: rgba(255,247,223,.96); box-shadow: 0 18px 50px rgba(31, 23, 12, .3); text-align: center; }
.panel[hidden] { display: none; }
.panel h1 { margin: 0 0 8px; font-size: clamp(34px, 12vw, 56px); line-height: .9; color: var(--green); }
.panel p { margin: 0 0 16px; font-weight: 750; }
.panel button { width: 100%; min-height: 52px; border: 0; border-radius: 8px; background: linear-gradient(#3d7d39, #245423); color: white; font-size: 18px; font-weight: 900; box-shadow: inset 0 -3px 0 rgba(0,0,0,.22); }
@media (max-height: 520px) { .jump { width: 74px; height: 74px; } .panel { top: 54%; padding: 14px; } .panel h1 { font-size: 34px; } }

.menu-link { position: fixed; left: 12px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 4; min-height: 46px; padding: 12px 15px; border-radius: 8px; background: rgba(255,247,223,.9); color: #173217; text-decoration: none; font-weight: 900; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
@media (max-width: 360px) { .menu-link { padding: 10px 12px; } }