/* Layout only: world coordinates, camera and canvas dimensions are unchanged. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
:is(.shop-modal,.fish-result-modal,.guild-chat-modal,#characterSetup){padding:max(12px,var(--safe-top)) max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left))}
:is(.shop-modal-card,.fish-result-card,.character-panel){max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);overflow-y:auto;overscroll-behavior:contain}
.character-grid{min-height:0}.character-form{flex-shrink:0}
.guild-chat-card{max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px)}
@media(max-width:1100px),(pointer:coarse){
  .hud{top:var(--ui-top,0px);bottom:auto;height:var(--ui-height,100dvh)}
  .top-left{left:calc(8px + var(--safe-left));top:calc(8px + var(--safe-top));padding:8px;max-width:calc(100% - 190px)}
  .top-left .small{display:none}.brand{font-size:12px}
  .zone{left:calc(8px + var(--safe-left));top:calc(48px + var(--safe-top));transform:none;min-width:0;max-width:calc(100% - 190px);font-size:12px;padding:8px;overflow-wrap:anywhere}
  .right{top:calc(8px + var(--safe-top));right:calc(8px + var(--safe-right));width:164px;padding:8px;max-height:calc(var(--ui-height,100dvh) - 330px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto}
  .profile{gap:5px}.profile>div:last-child{min-width:0}.name{font-size:12px;overflow-wrap:anywhere}.avatar{width:34px;height:34px;flex-shrink:0}.minimap{height:112px}
  .bottom,.tip{display:none}
  .chat-composer{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));width:auto;transform:none;display:grid;grid-template-columns:minmax(0,1fr) 100px 50px;gap:5px;padding:6px}
  .chat-composer input{width:100%;font-size:16px;padding:0 8px}.chat-effect-label{display:none}.chat-composer select{min-width:0;width:100%;font-size:12px}.chat-composer button{padding:0 6px}
  .chat-composer :is(input,select,button){height:44px}
  .mobile{display:block;position:absolute;left:calc(8px + var(--safe-left));bottom:calc(76px + var(--safe-bottom));width:136px;height:136px;pointer-events:auto}
  .mobile button{position:absolute;width:44px;height:44px;border:1px solid #7a5a34;border-radius:12px;background:#17130fdd;color:white;font-size:20px;touch-action:none;user-select:none;-webkit-user-select:none}
  .mobile .u{left:46px;top:0}.mobile .d{left:46px;bottom:0}.mobile .l{left:0;top:46px}.mobile .r{right:0;top:46px}
  .emotion-controls{left:auto;right:calc(8px + var(--safe-right));bottom:calc(76px + var(--safe-bottom));width:164px;padding:8px;max-height:150px;overflow-y:auto}
  .emotion-controls :is(button,select),.map-toggle-btn,.change-character-btn,.sound-toggle-btn{min-height:44px}
  .fishing-panel{left:calc(8px + var(--safe-left));right:auto;bottom:calc(220px + var(--safe-bottom));width:180px;max-height:calc(var(--ui-height,100dvh) - 320px);overflow-y:auto;padding:8px}
  .fishing-actions-row button{min-height:44px}
  .character-panel{width:min(940px,100%);padding:14px}.character-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}.character-choice{min-height:135px}
  .shop-modal-card{width:min(520px,100%);padding:16px}.shop-modal-title{font-size:clamp(20px,5vw,28px)}
  :is(.shop-modal,.guild-chat-modal,#characterSetup) :is(input,textarea,select){font-size:16px}
  .shop-view-icon{width:44px;height:44px}
}
@media(max-width:380px){.chat-composer{grid-template-columns:minmax(0,1fr) 86px 44px}.right,.emotion-controls{width:152px}.top-left,.zone{max-width:calc(100% - 176px)}}
@media(max-height:540px) and (min-width:600px){
  .right{width:170px;max-height:calc(var(--ui-height,100dvh) - 84px)}
  .chat-composer{left:calc(160px + var(--safe-left));right:calc(190px + var(--safe-right))}
  .mobile{bottom:calc(10px + var(--safe-bottom))}
  .emotion-controls{right:calc(188px + var(--safe-right));bottom:calc(72px + var(--safe-bottom));max-height:145px}
  .fishing-panel{left:calc(8px + var(--safe-left));bottom:calc(155px + var(--safe-bottom));max-height:calc(var(--ui-height,100dvh) - 250px)}
}
@media(max-height:540px) and (min-width:600px) and (max-width:740px){.chat-composer{right:calc(8px + var(--safe-right))}.right{max-height:calc(var(--ui-height,100dvh) - 92px)}}
/* Keep the chat field visible while the software keyboard occupies the screen. */
.ui-keyboard-open .hud>.card:not(.chat-composer),.ui-keyboard-open .mobile{visibility:hidden}
.ui-keyboard-open .chat-composer{left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:8px}
@media(max-width:1100px),(pointer:coarse){
  :is(.shop-modal,.fish-result-modal,.guild-chat-modal,#characterSetup){top:var(--ui-top,0px);bottom:auto;height:var(--ui-height,100dvh)}
  :is(.shop-modal-card,.fish-result-card,.character-panel,.guild-chat-card,#foodReviewsModal .food-reviews-card,.fortune-modal .fortune-card){max-height:calc(var(--ui-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px)}
  .guild-chat-card{height:min(680px,calc(var(--ui-height,100dvh) - 24px))}
}