/* v37: reserve Toy's native corner toolbar lane; the world stays edge to edge.
   Loaded last so every mobile overlay uses the same safe area, including menus. */
html.mobile-ui{
  --toy-safe-top:max(60px,var(--toy-host-top,0px),env(safe-area-inset-top,0px));
  --toy-safe-right:max(var(--toy-host-right,0px),env(safe-area-inset-right,0px));
  --toy-safe-bottom:max(var(--toy-host-bottom,0px),env(safe-area-inset-bottom,0px));
  --toy-safe-left:max(var(--toy-host-left,0px),env(safe-area-inset-left,0px));
  --toy-ui-top:calc(var(--toy-safe-top) + 4px);
  --toy-ui-left:calc(var(--toy-safe-left) + 14px);
  --toy-ui-right:calc(var(--toy-safe-right) + 14px);
}
.mobile-ui .mobile-game-menus{top:var(--toy-ui-top);right:var(--toy-ui-right)}
.mobile-ui .play-hud{top:var(--toy-ui-top);left:var(--toy-ui-left);right:var(--toy-ui-right)}
.mobile-ui .storage-hud{top:calc(var(--toy-safe-top) + 56px);right:var(--toy-ui-right)}
.mobile-ui .fishing-panel,.mobile-ui .fishing-panel[data-state=searching]{top:calc(var(--toy-safe-top) + 62px)}
.mobile-ui .catch-feed{top:calc(var(--toy-safe-top) + 170px);left:var(--toy-ui-left)}
.mobile-ui .catch-hud{min-width:132px;max-width:150px;padding:4px 9px}
.mobile-ui .catch-hud strong{font-size:18px;margin:1px 0}
.mobile-ui .catch-hud .big-fish-luck{margin-top:5px;padding:4px 6px 3px}
.mobile-ui .catch-hud .big-luck-display{height:40px}
.mobile-ui .catch-hud .big-luck-number{font-size:38px}
.mobile-ui .catch-hud .big-luck-note{font-size:8px}
.mobile-ui .catch-hud #profit-hint{display:block;margin:2px 0 0}
.mobile-ui .catch-hud #round-bonus{font-size:8px;line-height:1.2;white-space:nowrap;letter-spacing:-.1px}
.mobile-ui .playing .play-tip{white-space:normal;text-align:center;line-height:1.4}
.mobile-ui .playing .play-tip{bottom:calc(16px + var(--toy-safe-bottom))!important}
.mobile-ui .joystick{left:calc(24px + var(--toy-safe-left));bottom:calc(22px + var(--toy-safe-bottom))}
.mobile-ui .touch-actions{right:calc(24px + var(--toy-safe-right));bottom:calc(22px + var(--toy-safe-bottom))}
.mobile-ui .toast{max-width:calc(100% - 280px)}
.mobile-ui .unload-button{left:auto;transform:none;right:var(--toy-ui-right);bottom:calc(120px + var(--toy-safe-bottom))}
.mobile-ui .unload-button:active:not(:disabled){transform:translateY(1px)}
.mobile-ui .gear-status{top:auto;bottom:calc(118px + var(--toy-safe-bottom))}

/* The showcase header contains the real fish length; never put it under Toy. */
.mobile-ui .catch-showcase{position:absolute;inset:calc(var(--toy-safe-top) + 4px) calc(var(--toy-safe-right) + 8px) calc(var(--toy-safe-bottom) + 8px) calc(var(--toy-safe-left) + 8px)}
.mobile-ui .held-header{padding:6px 16px;gap:14px}
.mobile-ui .held-header>div:first-child{min-width:0}
.mobile-ui .held-stats{min-width:0}
.mobile-ui .held-stats #held-value{overflow-wrap:anywhere}

/* Native dialogs are in the top layer; position them within the same safe box. */
.mobile-ui #modal{position:fixed;top:calc(var(--toy-safe-top) + 8px);bottom:calc(var(--toy-safe-bottom) + 8px);left:calc(var(--toy-safe-left) + 8px);right:calc(var(--toy-safe-right) + 8px);margin:auto;width:min(1040px,calc(100vw - var(--toy-safe-left) - var(--toy-safe-right) - 24px));max-height:calc(100dvh - var(--toy-safe-top) - var(--toy-safe-bottom) - 16px);overscroll-behavior:contain}
.mobile-ui #modal .modal-head{position:sticky;top:0;z-index:8;background:#eee5c2;padding:9px 16px 8px;border-bottom:1px solid #b7b087}
.mobile-ui #modal .modal-body{padding-top:10px}
.mobile-ui #modal .modal-close{flex-shrink:0;min-width:40px;min-height:40px}
.mobile-ui .qte-panel{top:calc(var(--toy-safe-top) + 56px);max-height:calc(100dvh - var(--toy-safe-top) - var(--toy-safe-bottom) - 64px);overflow:auto;overscroll-behavior:contain}
.mobile-ui .pond-unlock-banner{top:calc(var(--toy-safe-top) + (100dvh - var(--toy-safe-top) - var(--toy-safe-bottom))/2);max-height:calc(100dvh - var(--toy-safe-top) - var(--toy-safe-bottom) - 16px)}

/* Camp shortcuts share a clear top band; the illustrated sign/truck stay below. */
.mobile-ui .home-career{top:var(--toy-ui-top);left:var(--toy-ui-left);padding:7px 10px;width:134px;transform:none}
.mobile-ui .home-career strong{font-size:16px}
.mobile-ui .home-career small{font-size:10px;margin-top:4px}
.mobile-ui .home-supply{top:calc(var(--toy-safe-top) + 64px);left:var(--toy-ui-left);right:auto;width:134px;min-height:58px;padding:7px;gap:7px}
.mobile-ui .home-supply strong{font-size:16px}
.mobile-ui .home-supply small{font-size:8px}
.mobile-ui .home-supply em{display:none}
.mobile-ui .home-supply .supply-art{width:28px;height:34px}
.mobile-ui .home-heading{display:none}
.mobile-ui .home-sanctuary{top:var(--toy-ui-top);left:calc(38% + var(--toy-safe-left)*.75);width:18%;min-width:120px;max-width:180px}
.mobile-ui .home-sanctuary-water{height:68px;border-width:6px}
.mobile-ui .home-sanctuary-label{padding:3px 5px;gap:1px}
.mobile-ui .home-sanctuary-label b{font-size:12px}
.mobile-ui .home-sanctuary-label small{font-size:8px}
.mobile-ui .home-menu .home-orders{top:calc(var(--toy-safe-top) + 6px);left:calc(59% + var(--toy-safe-left)*.25);right:auto;width:164px;padding:15px 10px 9px;gap:3px}
.mobile-ui .home-orders strong{font-size:21px}
.mobile-ui .home-orders small{font-size:8px;letter-spacing:1px}
.mobile-ui .home-orders>span:last-child{font-size:9px;padding-top:5px}
.mobile-ui .at-home #mobile-tools-button{display:none}
.mobile-ui .home-sign{left:calc(var(--toy-safe-left) + 17%);bottom:calc(var(--toy-safe-bottom) + 2%);width:21%;min-width:0;max-width:180px}
.mobile-ui .home-truck{right:8%;bottom:5%;width:32%;min-width:0;max-width:350px}
.mobile-ui .home-support{bottom:calc(8px + var(--toy-safe-bottom))}
.mobile-ui .home-support strong{font-size:14px}
.mobile-ui .home-support small{font-size:9px}

@media(max-width:700px) and (orientation:landscape){
  .mobile-ui .home-career,.mobile-ui .home-supply{width:104px}
  .mobile-ui .home-career{padding:6px 5px}
  .mobile-ui .home-career strong{font-size:13px}
  .mobile-ui .home-career small{font-size:9px}
  .mobile-ui .home-supply{top:calc(var(--toy-safe-top) + 58px);padding:6px 4px;gap:3px;min-height:52px}
  .mobile-ui .home-supply strong{font-size:13px}
  .mobile-ui .home-supply .supply-art{width:23px;height:29px}
  .mobile-ui .home-sanctuary{left:auto;right:calc(var(--toy-safe-right) + 228px);width:106px;min-width:100px}
  .mobile-ui .home-sanctuary-water{height:51px}
  .mobile-ui .home-sanctuary-label b{font-size:10px}
  .mobile-ui .home-sanctuary-label small{display:none}
  .mobile-ui .sanctuary-water-empty{font-size:10px}
  .mobile-ui .home-menu .home-orders{left:auto;right:calc(var(--toy-safe-right) + 94px);width:106px;padding:14px 7px 7px}
  .mobile-ui .home-orders strong{font-size:19px}
  .mobile-ui .home-orders small{display:none}
  .mobile-ui .home-orders>span:last-child{font-size:8px}
  .mobile-ui .home-sign{left:calc(var(--toy-safe-left) + 20%);width:min(22vw,calc((100dvh - var(--toy-safe-top) - var(--toy-safe-bottom) - 72px)*2/3));bottom:calc(var(--toy-safe-bottom) + 2%)}
  .mobile-ui .home-sign button{font-size:16px;letter-spacing:1px}
  .mobile-ui .home-truck{right:calc(var(--toy-safe-right) + 5%);width:33%;bottom:calc(var(--toy-safe-bottom) + 5%)}
  .mobile-ui .home-support{width:150px;min-height:40px;padding:4px 8px}
  .mobile-ui .home-support strong{font-size:12px}
  .mobile-ui .home-support small{font-size:8px}
  .mobile-ui .toast{max-width:calc(100% - 250px);font-size:10px;padding:8px 12px}
}
@media(max-height:360px) and (orientation:landscape){
  .mobile-ui .joystick{bottom:calc(14px + var(--toy-safe-bottom))}
  .mobile-ui .touch-actions{bottom:calc(14px + var(--toy-safe-bottom))}
  .mobile-ui .catch-hud{min-width:124px;max-width:134px;padding:5px 7px}
  .mobile-ui .catch-hud>.hud-label{font-size:8px;letter-spacing:0}
  .mobile-ui .catch-hud strong{font-size:17px;margin:1px 0}
  .mobile-ui .catch-hud>div{font-size:9px}
  .mobile-ui .catch-hud .big-fish-luck{margin-top:4px;padding-top:3px;padding-bottom:2px}
  .mobile-ui .catch-hud .big-luck-display{height:37px}
  .mobile-ui .catch-hud .big-luck-number{font-size:34px}
  .mobile-ui .catch-hud .big-luck-heading,.mobile-ui .catch-hud .big-luck-note{font-size:8px}
  .mobile-ui .catch-hud .big-luck-percent{font-size:21px}
  .mobile-ui .catch-hud .big-luck-plus{font-size:16px}
  .mobile-ui .fishing-panel,.mobile-ui .fishing-panel[data-state=searching]{top:calc(var(--toy-safe-top) + 58px);padding:7px 9px}
  .mobile-ui .fishing-panel .reaction-strip{margin-top:5px;padding:4px 0}
  .mobile-ui .fishing-panel .reaction-strip img{width:26px;height:26px}
  .mobile-ui .fishing-panel .reaction-strip span{font-size:10px}
  .mobile-ui .fishing-panel small{font-size:8px}
  .mobile-ui .fishing-panel .fishing-meter{margin:5px 0}
  .mobile-ui .qte-panel{padding:6px 10px;top:calc(var(--toy-safe-top) + 54px);width:min(350px,calc(100% - 24px))}
  .mobile-ui .qte-title{font-size:16px}.mobile-ui .qte-clock{font-size:20px}
  .mobile-ui .qte-instruction{margin:4px 0 2px;font-size:9px}
  .mobile-ui .qte-visual{height:36px;margin-bottom:5px}
  .mobile-ui .qte-mash-art{height:36px}.mobile-ui .qte-mash-art svg{height:33px}
  .mobile-ui .qte-sequence span{height:28px;width:33px;font-size:20px}
  .mobile-ui .qte-controls{margin-bottom:5px}.mobile-ui .qte-panel button{min-height:44px}
  .mobile-ui .qte-progress{height:8px}.mobile-ui .qte-footer{min-height:12px;margin-top:4px}
  .mobile-ui .qte-feedback{min-height:12px;font-size:9px}.mobile-ui .qte-input-hint{display:none}
  .mobile-ui .held-header{padding:5px 12px}.mobile-ui .held-footer{padding:4px 12px}
  .mobile-ui .held-header h2{font-size:16px}.mobile-ui .held-stats b{font-size:20px}
  .mobile-ui .held-footer .primary-button{padding:8px 12px;min-height:40px}
}