/* Keep the game inside the visible viewport, including phone browser chrome. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
html,body{overscroll-behavior:none}
#game{position:fixed;height:100dvh}
.intro-panel,.modal,.settings-panel{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.settings-panel{max-height:calc(100dvh - 100px - var(--safe-bottom));overflow-y:auto}
.mobile-note,.steer-caption,.wave-compact{display:none}
.pump-button,.steer-controls button{-webkit-user-select:none;-webkit-touch-callout:none}
.pump-button.pressed{box-shadow:0 0 0 6px #d6efb025}

/* Also support tablets and laptops with a touch screen. */
.touch-ui .steer-controls:not(.hidden){display:flex!important}
.touch-ui .icon-btn{width:44px;height:44px}
.touch-ui .steer-controls{left:calc(18px + var(--safe-left));bottom:calc(30px + var(--safe-bottom));gap:12px}
.touch-ui .steer-controls button{width:64px;height:64px;font-size:28px}
.touch-ui .steer-caption{display:block;position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1.6px;color:#e3efdbb8;pointer-events:none}
.touch-ui .rhythm{left:auto;right:calc(24px + var(--safe-right));bottom:calc(25px + var(--safe-bottom));transform:none;flex-direction:column;gap:13px;width:112px}
.touch-ui .rhythm-copy{text-align:center;max-width:120px;gap:5px;pointer-events:none}
.touch-ui .rhythm-copy>span{font-size:9px;letter-spacing:.5px}
.touch-ui .rhythm-copy>b{font-size:10px;line-height:1.45;max-width:120px}
.touch-ui .pump-button{width:88px;height:88px}
.touch-ui .beat-svg{width:100px;height:100px}
.touch-ui .pump-button>span{font-size:9px;letter-spacing:.7px}
.touch-ui .pump-icon{width:29px;height:29px}
.touch-ui .rhythm-ticks,.touch-ui .playing-footer,.touch-ui .mini-controls{display:none}
.touch-ui .mobile-note{display:block;font-size:11px;line-height:1.55;color:#c5dacc;margin:14px 0 0}
.touch-ui .settings-panel select{font-size:16px;min-height:44px}
.touch-ui .panel-heading button{min-width:44px;min-height:44px}
.touch-ui .text-btn,.touch-ui .secondary-btn,.touch-ui .start-btn{min-height:44px}
.touch-ui .stance-switch button{min-height:44px}
.touch-ui .session-option{min-height:50px}
.touch-ui .wave-option{min-height:48px}
.touch-ui .first-run{white-space:normal;line-height:1.5;font-size:10px}
.touch-ui .settings-panel{top:calc(68px + var(--safe-top));right:calc(12px + var(--safe-right));max-width:calc(100vw - 24px - var(--safe-left) - var(--safe-right))}

@media(max-width:720px){
  .topbar{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));top:calc(10px + var(--safe-top));gap:8px}
  .brand{font-size:10px;letter-spacing:1px;min-width:0;gap:5px}
  .brand svg{width:25px;height:25px;flex-shrink:0}
  .brand-lockup small{font-size:7px;letter-spacing:1.7px}
  .top-actions{gap:3px;flex-shrink:0}
  .top-actions .icon-btn{width:44px;height:44px}
  .intro-panel{left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));max-width:420px;width:auto;padding:20px;max-height:calc(100dvh - 90px - var(--safe-top) - var(--safe-bottom))}
  .intro-panel h1{font-size:40px;margin:14px 0 12px;line-height:1.03}
  .intro-copy{font-size:12px;line-height:1.55;margin-bottom:14px}
  .stance-switch button{font-size:12px;padding:10px 8px}
  .stance-hint{font-size:9px;line-height:1.5}
  .session-option{font-size:10px;padding:9px 8px}
  .option-top{font-size:9px;letter-spacing:.6px}
  .wave-option b{font-size:12px}
  .wave-option small{font-size:9px}
  .wave-option input{width:20px;height:20px}
  .start-btn{font-size:14px}
  .bottom-left{display:none}
  .map-card{right:calc(12px + var(--safe-right));top:calc(70px + var(--safe-top));width:112px}
  .map-footer{min-height:44px;padding:0 0 0 8px;font-size:7px;letter-spacing:0}
  .map-footer button{width:44px;height:44px;flex-shrink:0;border:0;border-left:1px solid #bfd2cc33;border-radius:0;font-size:16px}
  .hud{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));top:calc(67px + var(--safe-top));padding:12px 14px;min-height:65px;gap:10px}
  .stat-label{font-size:8px;letter-spacing:.6px;margin-bottom:6px}
  .stat b{font-size:23px}.primary-stat b{font-size:27px}
  .flight-status{display:none}
  .challenge{left:calc(12px + var(--safe-left));right:auto;top:calc(143px + var(--safe-top));width:calc(100% - 144px - var(--safe-left) - var(--safe-right));padding:10px;gap:8px}
  .challenge-number{font-size:25px}.challenge div>span{font-size:7px;letter-spacing:.5px}.challenge>span:last-child{margin-left:auto}
  body.playing .map-card{right:calc(12px + var(--safe-right));top:calc(143px + var(--safe-top))!important;bottom:auto;width:108px}
  body.playing #minimap{height:72px}
  body.playing .map-footer>span{font-size:7px}
  .wave-status,.wave-status.with-course{left:calc(12px + var(--safe-left));right:auto;top:calc(143px + var(--safe-top));width:calc(100% - 144px - var(--safe-left) - var(--safe-right));max-width:none;padding:10px;gap:6px}
  .wave-status.with-course{top:calc(211px + var(--safe-top))}
  .wave-status>span{font-size:8px;letter-spacing:.4px}.wave-status>b{font-size:10px;line-height:1.4}.wave-status>small{font-size:8px;line-height:1.4}
  .touch-ui .rhythm{right:calc(12px + var(--safe-right));bottom:calc(24px + var(--safe-bottom));width:108px}
  .touch-ui .steer-controls{left:calc(16px + var(--safe-left));bottom:calc(36px + var(--safe-bottom));gap:10px}
  .feedback{top:42%;max-width:calc(100% - 32px);white-space:normal;text-align:center;font-size:15px}
  .feedback small{font-size:9px;line-height:1.5}
  .help-toast{top:48%;width:calc(100% - 32px);font-size:12px;line-height:1.5}
  .modal-backdrop{padding:calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left))}
  .modal{padding:24px;max-height:100%;max-width:390px}
  .modal p{font-size:13px}.result-modal>p{font-size:12px}
}
@media(max-width:370px){
  .brand svg{display:none}.brand{font-size:9px}.brand-lockup small{font-size:6px}
  .intro-panel{padding:16px}.intro-panel h1{font-size:35px}
  .touch-ui .mobile-note{font-size:10px;margin-top:10px}
  .touch-ui .steer-controls button{width:60px;height:60px}
}
@media(max-width:720px) and (max-height:740px){
  body:not(.playing) .map-card{display:none}
  .intro-panel{bottom:calc(12px + var(--safe-bottom));padding:16px}
  .intro-panel h1{font-size:34px;margin:9px 0}
  .intro-copy{font-size:11px;margin-bottom:10px}
  .stance-hint{margin-bottom:8px}.session-select{margin-bottom:9px}
  .touch-ui .mobile-note{font-size:10px;margin-top:9px}
}
/* Short, wide phones keep the water visible and both thumb controls clear. */
@media(max-height:540px) and (min-width:500px) and (max-width:1100px){
  .topbar{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));top:calc(8px + var(--safe-top))}
  .spot-label,.bottom-left,.mini-controls,.prototype-note{display:none}
  .intro-panel{top:auto;left:calc(16px + var(--safe-left));right:auto;bottom:calc(12px + var(--safe-bottom));transform:none;width:360px;max-width:55%;max-height:calc(100dvh - 78px - var(--safe-top) - var(--safe-bottom));padding:16px}
  .intro-panel .eyebrow,.intro-copy,.touch-ui .mobile-note,.first-run{display:none}
  .intro-panel h1{font-size:29px;margin:0 0 10px;letter-spacing:-1.5px}
  .intro-panel h1 br{display:none}
  .stance-switch{margin-bottom:5px}.stance-hint{font-size:8px;margin-bottom:8px}
  .touch-ui .stance-switch button{min-height:36px;padding:7px}
  .session-select{margin-bottom:8px}.touch-ui .session-option{min-height:44px;padding:7px}
  .touch-ui .wave-option{min-height:40px;margin-bottom:9px;padding:6px 9px}
  .start-btn{padding:12px 16px}
  .hud{top:calc(62px + var(--safe-top));left:calc(12px + var(--safe-left));right:auto;gap:18px;padding:10px 14px;min-height:0}
  .stat-label{font-size:7px;margin-bottom:5px}.stat b{font-size:22px}.primary-stat b{font-size:25px}.flight-status{display:none}
  .challenge{top:calc(62px + var(--safe-top));left:auto;right:calc(12px + var(--safe-right));width:220px;padding:9px 12px}
  .challenge-number{font-size:23px}
  .wave-status,.wave-status.with-course{top:calc(122px + var(--safe-top));right:calc(12px + var(--safe-right));left:auto;width:220px;padding:9px 12px;gap:4px}
  .wave-status>span{font-size:7px}.wave-status>b{font-size:9px;line-height:1.4}.wave-status>small{font-size:7px}
  .map-card{right:calc(18px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));top:auto!important;width:145px}
  body.playing .map-card{display:none}
  .touch-ui .rhythm{right:calc(18px + var(--safe-right));bottom:calc(17px + var(--safe-bottom));width:102px;gap:10px}
  .touch-ui .rhythm-copy{display:none}
  .touch-ui .pump-button{width:80px;height:80px}.touch-ui .beat-svg{width:92px;height:92px}
  .touch-ui .steer-controls{bottom:calc(24px + var(--safe-bottom));left:calc(18px + var(--safe-left))}
  .feedback{top:46%;font-size:15px}.help-toast{top:48%;max-width:360px;font-size:11px}
  .settings-panel{max-height:calc(100dvh - 83px - var(--safe-top) - var(--safe-bottom));padding:16px}
  .settings-panel label{margin-top:10px}.panel-heading{margin-bottom:8px}
}
@media(max-width:720px) and (max-height:640px) and (orientation:portrait){
  .intro-copy,.touch-ui .mobile-note{display:none}
  .intro-panel h1{font-size:32px;margin:10px 0 12px}
}
@media(max-height:360px) and (min-width:500px) and (max-width:1100px){
  .intro-panel{padding:12px}
  .intro-panel h1,.stance-hint{display:none}
}

/* During play, give the water most of the phone screen. */
@media(max-width:720px), (max-height:540px) and (max-width:1100px){
  body.playing .hud{
    top:calc(58px + var(--safe-top));left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));
    min-height:0;height:36px;padding:6px 10px;gap:12px;align-items:center;border-radius:9px;
    background:#143d448f;pointer-events:none
  }
  body.playing .hud .stat{display:flex;align-items:baseline;gap:3px;min-width:0}
  body.playing .hud .stat>div{white-space:nowrap}
  body.playing .hud .stat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
  body.playing .hud .stat b{font-size:18px;line-height:1;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
  body.playing .hud .primary-stat b{font-size:20px}
  body.playing .hud .unit{font-size:8px;margin-left:3px}
  body.playing #flightTime{font-size:16px}
  body.playing .challenge{
    top:calc(100px + var(--safe-top));left:calc(10px + var(--safe-left));right:auto;
    width:max-content;max-width:calc(100% - 108px - var(--safe-left) - var(--safe-right));
    padding:5px 8px;gap:7px;border-radius:8px;min-height:26px;pointer-events:none
  }
  body.playing .challenge-number{font-size:14px;letter-spacing:0}
  body.playing .challenge-number::before{content:'BOYA ';font-size:8px;letter-spacing:.6px;color:#d5e5d8}
  body.playing .challenge>div{display:block}
  body.playing .challenge div>span{display:none}
  body.playing .challenge div>b{font-size:10px}
  body.playing .challenge>span:last-child{font-size:9px;margin-left:0;white-space:nowrap}
  body.playing .wave-status{
    top:calc(100px + var(--safe-top));left:calc(10px + var(--safe-left));right:auto;
    display:block;width:max-content;max-width:calc(100% - 108px - var(--safe-left) - var(--safe-right));
    min-height:26px;padding:6px 9px;border-radius:8px;background:#173e4499;pointer-events:none
  }
  body.playing .wave-status.with-course{top:calc(132px + var(--safe-top))}
  body.playing .wave-status>:not(.wave-compact){display:none}
  body.playing .wave-status .wave-compact{display:block;font-size:10px;line-height:14px;letter-spacing:.1px;color:#e3f4eb;white-space:nowrap}
  body.playing .wave-status.riding{background:#17454bc9}
  body.playing .map-card{
    top:calc(100px + var(--safe-top))!important;right:calc(10px + var(--safe-right));
    bottom:auto;width:78px;height:76px;border-radius:9px;background:#173e4480;box-shadow:none;pointer-events:none
  }
  body.playing .map-card .map-header,body.playing .map-card .map-footer{display:none}
  body.playing #minimap{height:74px}
}
@media(max-height:540px) and (min-width:500px) and (max-width:1100px){
  body.playing .hud{top:calc(58px + var(--safe-top));right:auto;width:230px;justify-content:space-between;gap:12px}
  body.playing .challenge{top:calc(58px + var(--safe-top));left:auto;right:calc(12px + var(--safe-right))}
  body.playing .wave-status{top:calc(58px + var(--safe-top));left:auto;right:calc(12px + var(--safe-right))}
  body.playing .wave-status.with-course{top:calc(90px + var(--safe-top))}
  body.playing .map-card{display:none}
}