/* Little Big Fish — unified HUD and menu navigation refinements.
   Loaded last intentionally; replaces scattered viewport overrides without changing scene visuals. */
:root { --touch-target:44px; --hud-gap:10px; }
#gameplay .bottom-nav .ui-icon,
#gameplay .flow-tools .flow-art,
#gameplay .flow-tools .ui-icon { object-fit:contain; flex-shrink:0; }
#gameplay .flow-tools .tool-count { top:3px; right:3px; bottom:auto; min-width:20px; height:20px; display:grid; place-items:center; font-size:12px; }
#gameplay button:focus-visible, #modal button:focus-visible { outline:3px solid #448b87; outline-offset:2px; }
#modal.mockup-window .close { width:44px; height:44px; min-width:44px; min-height:44px; top:9px; right:9px; display:grid; place-items:center; padding:0; font-size:0; border:1px solid #d6e4dc!important; border-radius:12px!important; background:#fff!important; color:#36544e!important; box-shadow:none!important; line-height:1; }
#modal.mockup-window .close::after { content:""; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat; }
#modal.mockup-window:not(.view-catch):not(.view-haul):not(.view-story) .close { display:none!important; }
#modal.mockup-window .window-header { padding-right:58px; }
#modal.mockup-window .window-footer #flowBack { min-height:44px; display:inline-flex; align-items:center; gap:7px; }
#modal.mockup-window .window-footer #flowBack::before { content:"←"; font:600 20px/1 system-ui,sans-serif; }
#modal.mockup-window .window-footer button { min-height:44px; }
#modal.mockup-window .window-header h1 .ui-icon { width:26px; height:26px; object-fit:contain; }
#modal.mockup-window .shop-row>.flow-art, #modal.mockup-window .shop-row>.ui-icon { width:54px; height:54px; object-fit:contain; }
#modal.mockup-window .shop-row { gap:12px; }
#modal.mockup-window .flow-tabs button { min-height:44px; }
@media(max-width:900px) {
  #gameplay .nearby-map { right:12px; top:78px; width:136px; padding:7px; border-radius:12px; }
  #gameplay .nearby-map #miniMap { width:120px; height:120px; }
  #gameplay .nearby-map .map-legend { display:none; }
  #gameplay .flow-tools { left:12px; top:145px; gap:7px; }
  #gameplay .flow-tools button { width:60px; height:60px; min-height:60px; padding:7px; }
  #gameplay .flow-tools button .flow-art { width:38px; height:38px; }
  #gameplay .bottom-nav { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-areas:"map hold market"!important; left:12px!important; right:12px!important; bottom:max(10px,env(safe-area-inset-bottom))!important; gap:8px!important; align-items:stretch; }
  #gameplay .bottom-nav>#map { grid-area:map; }
  #gameplay .bottom-nav>#holdButton { grid-area:hold; }
  #gameplay .bottom-nav>#returnMarket { grid-area:market; }
  #gameplay .bottom-nav>#bookButton, #gameplay .bottom-nav>#returnShop { display:none!important; }
  #gameplay .bottom-nav>button:not(#cast) { width:100%!important; min-width:0!important; height:56px!important; min-height:56px!important; display:flex!important; flex-direction:row!important; align-items:center; justify-content:center; padding:6px 8px!important; gap:6px!important; font-size:15px!important; white-space:normal; }
  #gameplay .bottom-nav .ui-icon { width:27px!important; height:27px!important; }
  #gameplay #map small { font-size:15px!important; }
  #gameplay button.cooler { display:flex!important; gap:6px; }
  #gameplay button.cooler .flow-art { width:28px!important; height:28px!important; display:block!important; }
  #gameplay button.cooler strong { font-size:15px!important; }
  #gameplay button.cooler small { display:none!important; }
  #gameplay .bottom-nav>#cast { position:fixed!important; grid-area:auto!important; left:auto!important; right:16px!important; bottom:86px!important; margin:0!important; width:78px!important; height:78px!important; min-height:78px!important; border-radius:50%!important; flex-direction:row!important; gap:0!important; z-index:7; }
  #gameplay #cast .flow-art { width:32px!important; height:32px!important; }
  #gameplay #cast b { font-size:17px!important; }
  #gameplay .joystick { bottom:94px!important; }
  #gameplay #weatherInfo { bottom:175px!important; }
  #gameplay #tutorial { left:82px!important; right:156px!important; top:105px!important; max-width:none!important; }
  #gameplay #storageNotice { bottom:160px!important; }
  #modal.mockup-window .window-header { padding-right:58px!important; }
  #modal.mockup-window .window-header>.ui-money { margin-right:4px; }
  #modal.mockup-window .shop-row { grid-template-columns:54px minmax(0,1fr) auto; min-height:88px; }
  #modal.mockup-window .shop-row>.flow-art { width:50px; height:50px; }
}
@media(max-width:480px) {
  #gameplay .flow-tools { top:128px; }
  #gameplay .nearby-map { width:116px; padding:6px; right:10px; top:79px; }
  #gameplay .nearby-map #miniMap { width:102px; height:102px; }
  #gameplay #tutorial { top:108px!important; left:82px!important; right:135px!important; font-size:12px; }
  #gameplay .bottom-nav { left:9px!important; right:9px!important; gap:6px!important; }
  #gameplay .bottom-nav>button:not(#cast) { padding:6px 4px!important; font-size:13px!important; }
  #gameplay button.cooler .flow-art { width:24px!important; height:24px!important; }
  #gameplay button.cooler strong { font-size:13px!important; }
  #gameplay .bottom-nav .ui-icon { width:24px!important; height:24px!important; }
  #gameplay #map small { font-size:13px!important; }
  #gameplay .bottom-nav>#cast { bottom:82px!important; }
  #modal.mockup-window .window-header h1 { font-size:21px!important; }
  #modal.mockup-window .window-content { padding:14px!important; }
  #modal.mockup-window .shop-row { grid-template-columns:45px minmax(0,1fr) auto; gap:8px; padding:10px; }
  #modal.mockup-window .shop-row>.flow-art { width:44px; height:44px; }
}
@media(max-width:360px) {
  #gameplay #tutorial { position:fixed; display:none!important; }
  #gameplay .bottom-nav>button:not(#cast) { font-size:12px!important; }
  #gameplay .bottom-nav .ui-icon { width:22px!important; height:22px!important; }
}


/* Second pass: icon semantics, menu density and restricted viewport composition. */
#gameplay #map img, #gameplay #holdButton img, #gameplay #returnMarket img,
#gameplay #cast img, #gameplay .flow-tools img {
  object-fit:contain!important; filter:none!important; image-rendering:auto!important;
}
#gameplay #map small, #gameplay #returnMarket span { display:inline!important; }
#gameplay #holdButton .flow-art { display:block!important; }
#gameplay .flow-tools button { border-radius:14px!important; }
#gameplay .flow-tools button[disabled] { opacity:.52; }
#gameplay .flow-tools button .tool-count { box-shadow:0 1px 4px #27423b21; }
#modal.mockup-window .window-header h1 { min-width:0; }
#modal.mockup-window .window-footer { gap:10px; }
#modal.mockup-window .window-footer button:only-child { min-width:120px; }
#modal.mockup-window .window-footer #flowBack { flex:0 0 auto; }
#modal.mockup-window .shop-row h2 { line-height:1.2; }
#modal.mockup-window .shop-row p { line-height:1.4; }
#modal.mockup-window .shop-row .shop-price { white-space:normal; }
#modal.mockup-window .close[aria-label] { touch-action:manipulation; }
@media(max-width:900px) {
  #gameplay .place-label { top:57px; left:14px; max-width:calc(100vw - 165px); }
  #gameplay .place-label strong { font-size:16px; }
  #gameplay .nearby-map { box-shadow:0 3px 10px #173c331c; }
  #gameplay .flow-tools button .tool-count { font-size:12px!important; }
  #gameplay #returnMarket span { display:inline!important; }
  #gameplay #map small { display:inline!important; }
  #gameplay #holdButton .flow-art { display:block!important; }
  #gameplay #weatherInfo { right:auto; left:14px; max-width:150px; }
  #gameplay #eventNotice, #gameplay #supplyPrompt, #gameplay #trapPrompt {
    max-width:calc(100vw - 24px); box-sizing:border-box;
  }
  #modal.mockup-window .window-footer { position:sticky; bottom:0; z-index:4; background:#fff; }
  #modal.mockup-window .window-content { overflow-y:auto; min-height:0; }
}
@media(max-width:700px) {
  #gameplay #cast { width:78px!important; height:78px!important; }
  #gameplay .flow-tools { top:136px!important; }
  #gameplay #tutorial { top:106px!important; left:80px!important; right:145px!important; padding:8px!important; }
  #gameplay #tutorial strong { font-size:13px!important; }
  #gameplay #tutorial p { font-size:12px!important; line-height:1.25!important; }
  #gameplay #tutorial>b { flex-shrink:0; }
  #gameplay #eventNotice { bottom:172px!important; right:10px!important; max-width:calc(100vw - 100px); }
  #gameplay #supplyPrompt { bottom:164px!important; }
  #gameplay #trapPrompt { bottom:165px!important; }
  #gameplay #storageNotice { bottom:170px!important; }
  #modal.mockup-window .window-footer { flex-wrap:wrap; }
  #modal.mockup-window .window-footer button { flex:1 1 auto; }
  #modal.mockup-window .flow-tabs { overflow-x:auto; scrollbar-width:thin; }
  #modal.mockup-window .flow-tabs button { flex:1 0 auto; padding-inline:12px; }
  #modal.mockup-window .window-header h1 .ui-icon { width:26px; height:26px; }
  #modal.mockup-window .window-header>.ui-money { font-size:14px; }
}
@media(max-width:480px) {
  #gameplay .hud { left:10px; right:10px; top:8px; }
  #gameplay .level-info { max-width:145px; }
  #gameplay #tutorial { top:103px!important; right:131px!important; left:76px!important; }
  #gameplay .nearby-map { top:86px; }
  #gameplay .flow-tools { top:153px!important; }
  #gameplay .flow-tools button { width:54px!important; height:54px!important; min-height:54px!important; }
  #gameplay .flow-tools button img { width:34px!important; height:34px!important; }
  #gameplay .bottom-nav>button:not(#cast) { gap:4px!important; }
  #gameplay #returnMarket span { font-size:13px; }
  #modal.mockup-window .window-header h1 { font-size:20px!important; }
  #modal.mockup-window .window-header>.ui-money { font-size:13px; }
  #modal.mockup-window .window-header { padding-right:48px!important; }
  #modal.mockup-window .window-footer { padding:10px!important; }
}
@media(max-width:380px) {
  #gameplay #tutorial { display:none!important; }
  #gameplay .place-label { top:53px; max-width:calc(100vw - 135px); }
  #gameplay .place-label small { display:none; }
  #gameplay .nearby-map { width:100px; padding:5px; }
  #gameplay .nearby-map #miniMap { width:88px; height:88px; }
  #gameplay .flow-tools { top:122px!important; }
  #gameplay #returnMarket span { font-size:12px; }
  #gameplay button.cooler strong { font-size:12px!important; }
}
@media(max-height:650px) and (max-width:900px) {
  #gameplay .nearby-map { width:96px; }
  #gameplay .nearby-map #miniMap { width:84px; height:84px; }
  #gameplay .flow-tools { top:95px!important; }
  #gameplay #tutorial { display:none!important; }
  #gameplay .place-label small { display:none; }
}


/* Mobile tutorial: guide attention to the actual control, not a second action button. */
#firstTripCoach.target-guidance .lesson-hint { font-size:12px; font-weight:700; color:#2d6a58; }
#firstTripCoach .lesson-progress { display:flex; align-items:center; gap:8px; }
#firstTripCoach .lesson-progress progress { flex:1; min-width:36px; }
#firstTripCoach .lesson-actions .link-button { min-height:32px; }
@media(max-width:700px) {
  #firstTripCoach, #firstTripCoach[data-menu=true] {
    inset:calc(env(safe-area-inset-top) + 8px) 10px auto 10px!important;
    width:auto!important; max-width:none!important; max-height:125px!important;
    overflow:auto; padding:9px 12px!important; border-radius:12px!important;
    box-shadow:0 3px 14px #123b4f30!important;
  }
  #firstTripCoach h2 { font:600 16px/1.15 Georgia,serif!important; margin:4px 0!important; }
  #firstTripCoach p { font-size:12px!important; line-height:1.25!important; margin:0 0 5px!important; }
  #firstTripCoach .lesson-progress { font-size:10px!important; }
  #firstTripCoach .lesson-actions { gap:8px; justify-content:space-between; }
  #firstTripCoach .lesson-actions .gold { min-height:34px!important; padding:5px 12px!important; font-size:12px!important; }
  #firstTripCoach .lesson-actions .link-button { font-size:11px!important; padding:4px!important; }
  #firstTripCoach[data-menu=true] { top:auto!important; bottom:calc(env(safe-area-inset-bottom) + 8px)!important; max-height:105px!important; }
  .lesson-target { position:relative; z-index:20!important; outline:3px solid #f5b849!important; outline-offset:2px!important; box-shadow:0 0 0 5px #fff8!important; }
  /* Real controls are horizontally aligned and roomy enough for icon + label. */
  #gameplay .bottom-nav { grid-template-columns:repeat(3,minmax(0,1fr))!important; }
  #gameplay .bottom-nav>button:not(#cast) {
    min-height:64px!important; height:64px!important; min-width:0!important;
    box-sizing:border-box!important; display:flex!important; flex-direction:column!important;
    align-items:center!important; justify-content:center!important; gap:5px!important;
    padding:5px 4px!important; text-align:center!important; line-height:1.05!important;
  }
  #gameplay .bottom-nav>button:not(#cast) img {
    width:30px!important; height:30px!important; max-width:100%!important;
    object-fit:contain!important; flex:none!important;
  }
  #gameplay .bottom-nav>button:not(#cast) small,
  #gameplay .bottom-nav>button:not(#cast) span,
  #gameplay .bottom-nav>button:not(#cast) strong {
    display:block!important; font-size:12px!important; line-height:1.1!important;
    margin:0!important; white-space:nowrap!important; text-align:center!important;
  }
  #gameplay #holdButton small { display:none!important; }
  #gameplay #cast { bottom:94px!important; }
  #gameplay .joystick { bottom:106px!important; }
  #modal.mockup-window .window-footer button { display:inline-flex; align-items:center; justify-content:center; gap:7px; text-align:center; line-height:1.2; }
  #modal.mockup-window .window-footer button img { flex:none; }
  #modal.mockup-window .shop-row button { display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.2; }
}
@media(max-width:380px) {
  #gameplay .bottom-nav>button:not(#cast) { height:62px!important; min-height:62px!important; }
  #gameplay .bottom-nav>button:not(#cast) img { width:26px!important; height:26px!important; }
  #gameplay .bottom-nav>button:not(#cast) small,
  #gameplay .bottom-nav>button:not(#cast) span,
  #gameplay .bottom-nav>button:not(#cast) strong { font-size:11px!important; }
  #firstTripCoach, #firstTripCoach[data-menu=true] { max-height:112px!important; }
}

@media(max-width:700px) { #gameplay .bottom-nav>button:not(#cast) img { width:28px!important; height:28px!important; } #gameplay .bottom-nav>button:not(#cast) { flex-wrap:nowrap!important; } }


/* HUD polish: reserve a small fixed icon slot, give labels the remaining width. */
@media(max-width:900px){
 #gameplay .bottom-nav>button:not(#cast){height:64px!important;min-height:64px!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:5px!important;padding:8px 6px!important;overflow:hidden!important}
 #gameplay .bottom-nav>button:not(#cast) img,
 #gameplay .bottom-nav>button:not(#cast) .ui-icon,
 #gameplay #holdButton .flow-art{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;max-height:24px!important;flex:0 0 24px!important;object-fit:contain!important}
 #gameplay .bottom-nav>button:not(#cast) small,
 #gameplay .bottom-nav>button:not(#cast) span,
 #gameplay .bottom-nav>button:not(#cast) strong{display:block!important;min-width:0!important;max-width:100%!important;white-space:nowrap!important;font:600 12px/1.15 system-ui,sans-serif!important;letter-spacing:-.2px!important;flex:0 1 auto!important}
 #gameplay #holdButton strong{font-variant-numeric:tabular-nums!important}
}
@media(max-width:380px){
 #gameplay .bottom-nav>button:not(#cast){gap:3px!important;padding:7px 3px!important}
 #gameplay .bottom-nav>button:not(#cast) img,
 #gameplay .bottom-nav>button:not(#cast) .ui-icon,
 #gameplay #holdButton .flow-art{width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;flex-basis:20px!important}
 #gameplay .bottom-nav>button:not(#cast) small,
 #gameplay .bottom-nav>button:not(#cast) span,
 #gameplay .bottom-nav>button:not(#cast) strong{font-size:11px!important}
}


/* Icon-only navigation: larger artwork, no cramped labels. */
@media(max-width:900px) {
 #gameplay .bottom-nav>#map,
 #gameplay .bottom-nav>#returnMarket { display:flex!important; align-items:center!important; justify-content:center!important; padding:4px!important; }
 #gameplay .bottom-nav>#map img,
 #gameplay .bottom-nav>#returnMarket img { width:52px!important; height:52px!important; min-width:0!important; max-width:calc(100% - 4px)!important; max-height:calc(100% - 4px)!important; flex:0 1 auto!important; object-fit:contain!important; }
}
@media(max-width:380px) {
 #gameplay .bottom-nav>#map img,
 #gameplay .bottom-nav>#returnMarket img { width:48px!important; height:48px!important; }
}


/* Tutorial V3: non-modal miniature hint and tactile pointer. No popover top-layer churn. */
#firstTripCoach[hidden], #lessonTapMarker[hidden] { display:none!important; }
#firstTripCoach, #firstTripCoach[data-menu=true] {
  position:fixed!important; inset:auto!important; left:50%!important; top:96px!important;
  bottom:auto!important; transform:translateX(-50%)!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  gap:8px!important; width:max-content!important; max-width:min(82vw,370px)!important;
  min-height:34px!important; max-height:48px!important; padding:6px 9px!important;
  margin:0!important; border:1px solid #c4d8ca!important; border-radius:999px!important;
  background:#fffef0f2!important; color:#214e4c!important; box-shadow:0 3px 12px #12413f30!important;
  overflow:visible!important; z-index:100!important; font:600 12px/1.25 system-ui,sans-serif!important;
  pointer-events:auto!important;
}
#firstTripCoach .lesson-compact-progress { flex:none; color:#448e8a; font-size:11px; }
#firstTripCoach .lesson-compact-message { min-width:0; max-width:240px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#firstTripCoach .lesson-continue { flex:none; border:0; padding:5px 8px; border-radius:14px; background:#ffe19a; color:#2a514c; font:700 11px/1.2 system-ui,sans-serif; }
#firstTripCoach .lesson-skip { flex:none; padding:0; width:22px; height:24px; border:0; background:transparent; color:#5b7776; font:700 19px/1 system-ui,sans-serif; }
#lessonTapMarker { position:fixed; z-index:120; transform:translate(-28%, -14%); pointer-events:none; color:#ffdf8b; text-shadow:-2px -2px #235756,2px -2px #235756,-2px 2px #235756,2px 2px #235756,0 4px 5px #1c4848aa; }
#lessonTapMarker span { display:block; font-size:33px; animation:lessonFingerTap 1.3s ease-in-out infinite; }
#lessonTapMarker:before { content:""; position:absolute; left:-3px; top:-5px; width:37px; height:37px; border:2px solid #ffcf6c; border-radius:50%; animation:lessonTapPulse 1.3s ease-out infinite; }
@keyframes lessonFingerTap {0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-5px) scale(1.05)}}
@keyframes lessonTapPulse {0%{transform:scale(.65);opacity:.95}95%,100%{transform:scale(1.65);opacity:0}}
#gameplay #tutorial { display:none!important; }
body[data-screen="game"] #gameplay { background:#248a96; }
@media(max-width:700px) {
 #firstTripCoach, #firstTripCoach[data-menu=true] { top:max(116px, env(safe-area-inset-top))!important; bottom:auto!important; max-width:80vw!important; min-height:30px!important; max-height:44px!important; padding:5px 8px!important; font-size:11px!important; }
 #firstTripCoach[data-menu=true] { top:calc(env(safe-area-inset-top) + 12px)!important; }
 .lesson-target { outline:3px solid #f5bf58!important; outline-offset:3px!important; box-shadow:0 0 0 6px #fffbdf8a!important; }
}
@media(prefers-reduced-motion:reduce) { #lessonTapMarker span,#lessonTapMarker:before { animation:none!important; } }

#firstTripCoach[hidden],#firstTripCoach[data-menu=true][hidden],#lessonTapMarker[hidden]{display:none!important}

#gameplay .nearby-map.lesson-target{pointer-events:auto!important;cursor:pointer;touch-action:manipulation}