/* Phone controls live inside each viewer; the uncovered canvas remains interactive. */
.viewer-phone-controls{display:none;position:absolute;inset:0;z-index:6;pointer-events:none}
.viewer-phone-controls[hidden]{display:none!important}
.viewer-phone-pad{position:absolute;left:12px;bottom:16px;display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:46px 46px;gap:5px;pointer-events:none}
.viewer-phone-tag{position:absolute;left:0;bottom:calc(100% + 6px);padding:3px 6px;background:#081711c9;color:#f0edd7;font:9px/1.3 var(--sans,Arial,sans-serif);letter-spacing:.09em;white-space:nowrap;pointer-events:none;border-radius:3px}
.viewer-phone-controls button{display:grid;place-items:center;width:46px;height:46px;min-width:46px;min-height:46px;margin:0;padding:0;border:1px solid #c3d1c391;border-radius:8px;background:#0c211bea;color:#f2f7ee;font:25px/1 Arial,sans-serif;box-shadow:0 2px 8px #0006;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.viewer-phone-controls button.is-held,.viewer-phone-controls button[aria-pressed=true]{background:#507755f2;border-color:#e4f0d0;box-shadow:inset 0 0 0 1px #e4f0d0}
.viewer-phone-controls button:focus-visible{outline:2px solid #f1dc9b;outline-offset:2px}
.viewer-phone-controls button:disabled{opacity:.35;cursor:default}
.viewer-phone-pad .viewer-arrow-up{grid-column:2;grid-row:1}
.viewer-phone-pad .viewer-arrow-left{grid-column:1;grid-row:2}
.viewer-phone-pad .viewer-arrow-down{grid-column:2;grid-row:2}
.viewer-phone-pad .viewer-arrow-right{grid-column:3;grid-row:2}
.viewer-phone-turn{position:absolute;right:12px;bottom:118px;display:flex;gap:5px;pointer-events:none}
.viewer-phone-turn .viewer-phone-tag{left:auto;right:0}
@media(max-width:760px),(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .viewer-phone-controls:not([hidden]){display:block}
  .rover-stage,.map-rainforest .map-scene,.map-water-cycle .map-scene,.sf-stage,.bh-stage,[data-saturn-map] #saturn-scene{height:clamp(260px,70svh,450px);min-height:0}
  .coal-controls .coal-movement,.rover-dashboard .rover-drive{display:none}
  .rover-controls{grid-template-columns:minmax(0,1fr)}
  [data-rover-active=drive] .rover-image-credit{bottom:132px;left:12px;font-size:8px;max-width:calc(100% - 86px)}
  [data-map-active=carboniferous] .coal-credit{bottom:3px;left:12px;right:12px;max-width:none;font-size:7px;text-align:right}
  .map-rainforest .map-zoom,.map-water-cycle .map-zoom,.rover-zoom{z-index:7}
  .sf-watermark,.bh-watermark{left:auto;right:12px;bottom:16px;max-width:calc(100% - 174px)}
  .sf-watermark img,.bh-watermark img{display:none}
  .sf-watermark span,.sf-watermark small,.bh-watermark span,.bh-watermark small{font-size:7px;letter-spacing:.02em;overflow-wrap:anywhere}
}
@media(max-width:350px){
  .viewer-phone-pad{left:8px;bottom:14px;grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:4px}
  .viewer-phone-controls button{width:44px;height:44px;min-width:44px;min-height:44px}
  .viewer-phone-turn{right:8px}
}
@media(max-width:960px) and (max-height:500px) and (pointer:coarse){
  .viewer-phone-pad{grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:4px}
  .viewer-phone-controls button{width:44px;height:44px;min-width:44px;min-height:44px}
}