/* Keep the original desktop HUD. On phones, the water gets the whole middle. */
#mobileHud,#mobileActionHint,.mobileControlHint{display:none}
@media (max-width:760px), (max-width:1024px) and (max-height:540px){
  #hud,#menu{display:none}
  #app canvas,#actionButton,#fightControl{-webkit-touch-callout:none}
  #mobileHud{display:contents}
  .mobileTop{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}
  .mobileTop button,#mobileBait{border:1px solid #aacfc74d;background:#0c2032c9;color:#edf3dc;box-shadow:0 3px 10px #08111b33;border-radius:15px;min-height:44px;cursor:pointer}
  #mobileStatus{min-width:0;max-width:calc(100% - 122px);padding:8px 12px;text-align:left;border-left:2px solid var(--place-accent);line-height:1.25}
  #mobileLocation{display:block;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eef4dd}
  #mobileCollection{display:block;font-size:10px;color:var(--place-accent);margin-top:3px}
  .mobileTopActions{display:flex;gap:6px;flex-shrink:0}
  #mobilePause{width:44px;font-size:17px}#mobileMenu{padding:0 14px;font-size:14px}
  #mobileBait{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(14px,env(safe-area-inset-bottom)) + 67px);max-width:calc(100vw - 32px);padding:8px 15px;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  body:not([data-state=idle]) #mobileBait{display:none}
  body:not([data-state=idle]) #mobileCollection{display:none}
  body:not([data-state=idle]) #mobileStatus{display:flex;align-items:center}
  body[data-state=traveling] #mobileHud{display:none}
  #actionButton{bottom:max(14px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 32px));min-height:56px;padding:12px 18px;white-space:normal;border:1px solid #b8dcd27a;border-radius:19px;background:linear-gradient(#214849e6,#153139ed);color:#f4f1d5;text-shadow:0 1px 3px #061725;box-shadow:0 4px 0 #091a2d80;font-size:15px;line-height:1.35}
  #actionButton #actionHint{display:none}#mobileActionHint{display:inline}
  body[data-state=charging] #actionButton{border-color:#ffe2a3;background:#4c5745ed}
  #powerWrap{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 76px);width:min(340px,calc(100vw - 28px));padding:13px 18px 9px;border-radius:20px}
  .castHeading{margin-bottom:16px;font-size:13px}#powerText{font-size:15px}.castInstruction{display:none}
  .castScale{font-size:9px}.castScale>:nth-child(2){left:60%}.castScale>:last-child{right:-10px}
  #reelWrap,#fightWrap{left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));width:min(320px,calc(100vw - 28px));padding:12px 16px 10px;border-radius:21px}
  #reelWrap .reelTop,#fightJudgments,#fightOdds,#fightControl small,#reelWrap .gaugeTip{display:none}
  #reelSvg{max-height:148px}.reelMeta{margin:2px 0 7px}.reelClock{margin-bottom:6px}
  #gaugeCaption{bottom:36px;font-size:11px}#captureChance{bottom:53px;font-size:21px}#judgeLabel{font-size:17px;min-height:22px;margin:5px 0 0}
  .fightHeading{font-size:17px}.fightHeading b{font-size:12px}#fightSvg{max-height:148px}
  .fightScore{top:43px}.fightScore small{display:none}.fightScore strong{font-size:27px}.fightScore span{font-size:10px}
  #fightEvent{font-size:14px;min-height:20px;margin:3px 0 7px}.fightRiskRow{margin:7px 0 10px}#fightControl{min-height:56px}#fightControlText{font-size:14px}
  #fightControl .mobileControlHint{display:block;font-size:11px;margin-top:3px}
  .doubleChanceBanner{margin:-2px -3px 7px;padding:4px 6px}.doubleChanceBanner strong{font-size:15px}.doubleChanceBanner strong b{font-size:16px}.doubleChanceBanner span{font-size:9px}
  body:is([data-state=reeling],[data-state=striking],[data-state=fighting]) #hint{display:none}
  #hint{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 4px);max-width:calc(100vw - 40px);width:max-content;font-size:13px;padding:7px 12px;border-radius:12px;background:#0b2035b3;line-height:1.6}
  #approachTip{display:none}#biteAlert{font-size:68px;top:39%}#biteAlert small{font-size:16px}
  #floatLabel{font-size:11px}#floatLabel span{padding:4px 8px}
  #toast{top:calc(max(10px,env(safe-area-inset-top)) + 64px);max-width:calc(100vw - 36px);font-size:12px;padding:9px 14px;pointer-events:none}
  #gameDialog .card .closeBtn{width:44px;height:44px;right:8px;top:8px}
  #gameDialog.mobileMenuDialog:not(.collectionDialog):not(.titleDialog){width:min(430px,calc(100vw - 20px));max-width:none;max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - env(safe-area-inset-bottom));margin:auto auto max(10px,env(safe-area-inset-bottom));overflow:hidden;border-radius:23px}
  #gameDialog .card.mobileMenu{width:100%;max-height:inherit;padding:20px 16px 14px;overflow:auto;border-radius:23px;background:linear-gradient(#213d4a,#102538);overscroll-behavior:contain}
  #gameDialog .card.mobileMenu #modalTitle{font-size:23px;margin:0;padding-right:44px}
  .mobileMenuNotice{font:11px/1.7 'Gowun Dodum',sans-serif;color:#bbd0d8;margin:6px 0 13px;padding-right:13px}
  .mobileSummary{padding:12px 13px;border:1px solid #adcfc535;border-left:2px solid var(--place-accent);border-radius:13px;background:#091e30a3}
  .mobileSummary>div,.mobileSummary>p{display:flex;justify-content:space-between;gap:8px;align-items:center}.mobileSummary strong{font-size:16px;font-weight:400;color:var(--place-accent)}.mobileSummary span{font-size:11px;color:#c4d7d8}.mobileSummary p{margin:9px 0}.mobileSummary b{font-size:17px;font-weight:400;color:#ffe3a1}.mobileSummary small{font:11px/1.7 'Gowun Dodum',sans-serif;color:#b9d0d6}
  .mobileMenuGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:13px 0}
  .mobileMenuGrid button{min-height:66px;padding:9px 3px;border:1px solid #91b9c140;border-radius:13px;background:#27445480;text-align:center;cursor:pointer}
  .mobileMenuGrid button strong{display:block;font-size:15px;font-weight:400;color:#f4e7bd}.mobileMenuGrid button small{display:block;font:9px/1.4 'Gowun Dodum',sans-serif;color:#c5d8db;margin-top:5px}
  .mobileMenuGrid button:disabled{opacity:.4}.mobileMenuGrid button:active{background:#467477}
  #mobileResume{width:100%;min-height:50px;margin:0;font-size:17px}
  .shopExploreTop{top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));gap:8px;flex-wrap:nowrap}
  .shopExploreTop h1{font-size:16px;margin:0}.shopExploreTop small,.shopMoveHelp small{display:none}
  .shopExploreTop>button{min-height:44px;padding:8px 10px;font-size:12px}.shopExploreTop>b{position:static;margin-left:auto;font-size:14px;padding:9px 10px;white-space:nowrap}
  .shopMoveHelp{bottom:max(12px,env(safe-area-inset-bottom));padding:9px 12px;width:calc(100% - 24px)}.shopMoveHelp p{font-size:12px;line-height:1.5;margin:0}
  .shopDpad{display:grid;left:max(12px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 66px);grid-template-columns:repeat(3,44px)}.shopDpad button{width:44px;height:44px}
}
@media (max-width:1024px) and (max-height:540px){
  #mobileBait{left:max(12px,env(safe-area-inset-left));transform:none;bottom:max(12px,env(safe-area-inset-bottom))}
  #actionButton{width:300px;left:auto;right:max(12px,env(safe-area-inset-right));transform:none;min-height:48px}
  #powerWrap{left:auto;right:12px;transform:none;width:330px;bottom:78px}
  #reelWrap,#fightWrap{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;width:290px;padding:8px 14px}
  #reelSvg,#fightSvg{max-height:106px}.fightScore{top:28px}.fightScore strong{font-size:23px}.fightScore span{display:none}
  #fightControl{min-height:44px}.fightRiskRow{margin:5px 0 7px}#fightEvent{font-size:13px;margin:2px 0 5px}.fightHeading{font-size:15px}
  #gaugeCaption{bottom:25px;font-size:10px}#captureChance{bottom:39px;font-size:18px}#judgeLabel{font-size:15px}.doubleChanceBanner{margin-bottom:4px}.doubleChanceBanner span{display:none}
  #hint{left:12px;transform:none;max-width:calc(100vw - 350px);font-size:12px}
  .shopDpad{bottom:max(12px,env(safe-area-inset-bottom))}.shopMoveHelp{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;width:min(420px,calc(100vw - 190px))}
  #gameDialog.mobileMenuDialog:not(.collectionDialog):not(.titleDialog){width:min(580px,calc(100vw - 30px))}.mobileSummary small{display:none}.mobileMenuGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.mobileMenuGrid button{min-height:44px}.mobileMenuGrid small{display:none!important}
}