/* Keep legacy controls in DOM for compatibility; steering now belongs to canvas. */
#controls,#controls.hidden,#left,#right{display:none!important}
#playTools{grid-column:1/-1;display:flex;gap:8px;align-items:center;justify-content:center;width:100%;margin-top:3px}
#panel #playTools>button{flex:1;min-width:0;min-height:32px!important;padding:7px 9px!important;margin:1px 0!important;font-size:11px!important}
#playGuide{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#213b3c;color:#f0e9cb;border:2px solid #9bb77b;border-radius:14px;padding:20px;box-shadow:0 20px 80px #0008;font:14px/1.55 system-ui,sans-serif}
#playGuide::backdrop{background:#0b192acc;backdrop-filter:blur(5px)}
#playGuide header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #91ad7555;padding-bottom:13px}
#playGuide .guide-kicker{font:700 10px/1.4 monospace;letter-spacing:2px;color:#b8cf94}
#playGuide h2{font:700 24px/1.12 ui-rounded,system-ui,sans-serif;margin:7px 0 0;color:#fff1bf}
#playGuide h3{font-size:15px;color:#e0eab8;margin:0 0 6px}#playGuide section{padding-top:16px}#playGuide p{font-size:13px;line-height:1.6;color:#d4dfcc;margin:5px 0 9px}
#playGuide button{font:700 13px system-ui,sans-serif;width:auto;border:1px solid #a7bf83;border-radius:8px;background:#c3d69a;color:#213b36;padding:10px 15px;box-shadow:none;min-height:40px}
#playGuide #closePlayGuide{width:40px;flex:none;padding:6px;font-size:24px;line-height:1}#playGuide #backPlayGuide{width:100%;margin-top:14px}
#playGuide kbd{display:inline-block;padding:1px 6px;border:1px solid #91ad75;border-bottom-width:3px;border-radius:4px;background:#2c4b44;color:#fff1bf;font:700 12px monospace}
#playGuide :focus-visible,#howToPlayButton:focus-visible{outline:3px solid #fff0b0;outline-offset:3px}
@media(max-width:420px){#playGuide{padding:16px}#playGuide h2{font-size:22px}}
body:has(#playGuide[open]){touch-action:pan-y}

#firstClimbHint {
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 9px 16px;
  border-radius: 16px;
  background: #30283aee;
  color: #fff8e9;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s, visibility 0s .16s;
}
#firstClimbHint.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#recapGoal {
  display: block;
  margin-top: .65rem;
  font-weight: 800;
}
@media (prefers-reduced-motion: reduce) {
  #firstClimbHint { transition: none; }
}