/* Mobile menu density: compact cards/art/spacing, without scaling the world,
   fish centimetres, DOM hit coordinates, or desktop layout. Load last. */
.mobile-scroll-hint{display:none}
.mobile-ui #modal[open]{display:flex;overflow:hidden}
.mobile-ui #modal-content{display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - var(--toy-safe-top,60px) - var(--toy-safe-bottom,0px) - 22px);width:100%;flex:1 1 auto}
.mobile-ui #modal .modal-head{position:relative;top:auto;flex:0 0 auto;gap:10px;padding:6px 12px;min-height:48px}
.mobile-ui #modal .modal-head h2{font-size:18px;line-height:1.25;margin-top:2px;letter-spacing:1px}
.mobile-ui #modal .modal-head .eyebrow{font-size:10px;line-height:1.3;letter-spacing:1px}
.mobile-ui #modal .modal-close{align-self:center;min-width:40px;min-height:40px;padding:0 7px;font-size:25px}
.mobile-ui #modal .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:9px 12px 12px;overscroll-behavior:contain;scroll-padding-block:10px;scrollbar-width:thin;scrollbar-color:#7b8854 #d8d3ac;-webkit-overflow-scrolling:touch}
.mobile-ui #modal .modal-body::-webkit-scrollbar{width:5px}
.mobile-ui #modal .modal-body::-webkit-scrollbar-thumb{background:#7b8854;border-radius:5px}
.mobile-ui #modal .modal-body::-webkit-scrollbar-track{background:#d8d3ac}
.mobile-ui #modal .modal-intro{font-size:12px;line-height:1.55;margin-bottom:10px}
.mobile-ui #modal .modal-actions{gap:8px;margin-top:12px}
.mobile-ui #modal .primary-button,.mobile-ui #modal .secondary-button{min-height:40px;font-size:12px;padding:8px 12px;letter-spacing:0}
.mobile-ui #modal .mobile-scroll-hint:not([hidden]){display:flex;flex:0 0 auto;justify-content:center;align-items:center;gap:7px;min-height:36px;margin:0;padding:7px 12px;border:0;border-top:1px solid #93986d80;border-radius:0;background:linear-gradient(#e8e0b566,#d8d9a899);box-shadow:inset 0 1px #fff5d577;color:#415934;font-size:12px;font-weight:700;line-height:1.35;letter-spacing:.3px;touch-action:manipulation}
.mobile-ui #modal .mobile-scroll-hint:hover{background:#d6dfb5b8}
.mobile-ui #modal .mobile-scroll-hint:active{transform:none;background:#c7d59d}
.mobile-ui #modal .mobile-scroll-hint::after{content:'↓';font-size:17px;line-height:1}
.mobile-ui #modal .mobile-scroll-hint[data-position=middle]::after{content:'↕'}
.mobile-ui #modal .mobile-scroll-hint[data-position=bottom]::after{content:'↑'}

/* Collection: 75px desktop fish art -> 53px; card padding 10px -> 7px.
   Four compact columns expose more entries while names/body text stay >=12px. */
.mobile-ui #modal .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mobile-ui #modal .fish-card{padding:7px;border-radius:7px;min-width:0}
.mobile-ui #modal .fish-card .fish-art{height:53px}
.mobile-ui #modal .fish-card h3{font-size:14px;margin:4px 0;line-height:1.3}
.mobile-ui #modal .fish-card p,.mobile-ui #modal .fish-card small{font-size:12px;line-height:1.45;margin:4px 0}
.mobile-ui #modal .fish-card .rarity{font-size:11px;padding:2px 6px}
.mobile-ui #modal .fish-card .species-lore{min-height:0}
.mobile-ui #modal .collection-heading{font-size:16px;margin:14px 0 8px}
.mobile-ui #modal .collection-trophies{margin-top:7px;padding-top:5px}
.mobile-ui #modal .trophy-pair{gap:12px;margin:5px 0}
.mobile-ui #modal .trophy-token svg{width:20px;height:20px}
.mobile-ui #modal .trophy-token b{font-size:11px}
.mobile-ui #modal .collection-trophies>small{font-size:11px;line-height:1.45}
.mobile-ui #modal .collection-stats{margin-top:12px;padding-top:10px;font-size:12px;gap:10px;flex-wrap:wrap}

/* Pond cards: 176px desktop rows -> 124px; 102px UP circles -> 72px. */
.mobile-ui #modal .pond-refresh-toolbar{gap:8px;margin-bottom:10px}
.mobile-ui #modal .pond-refresh-toolbar>div{gap:7px}
.mobile-ui #modal .pond-refresh-toolbar strong{font-size:15px}
.mobile-ui #modal .pond-refresh-toolbar small{font-size:12px}
.mobile-ui #modal .destination-grid{grid-template-columns:minmax(0,1fr);gap:9px}
.mobile-ui #modal .destination-card{grid-template-columns:minmax(98px,19%) minmax(120px,1fr) auto;min-height:124px;border-width:2px;border-radius:8px}
.mobile-ui #modal .destination-info{padding:8px 10px;gap:4px}
.mobile-ui #modal .destination-info strong{font-size:18px;line-height:1.25}
.mobile-ui #modal .destination-info small,.mobile-ui #modal .destination-info>span{font-size:12px;line-height:1.35}
.mobile-ui #modal .destination-info .pond-price-detail{font-size:11px!important}
.mobile-ui #modal .destination-info .pond-offer-name{font-size:12px}
.mobile-ui #modal .destination-number{font-size:13px;left:7px;top:6px}
.mobile-ui #modal .destination-status{font-size:11px;padding:3px 5px;bottom:5px;right:5px}
.mobile-ui #modal .destination-lock{font-size:13px;gap:5px}
.mobile-ui #modal .destination-lock svg{width:23px;height:26px}
.mobile-ui #modal .destination-card.destination-locked{min-height:88px}
.mobile-ui #modal .pond-up-list{padding:9px 8px;gap:7px}
.mobile-ui #modal .pond-up{width:76px;gap:3px}
.mobile-ui #modal .up-circle{width:72px;height:72px;border-width:2px}
.mobile-ui #modal .up-circle .fish-art{width:61px;height:48px}
.mobile-ui #modal .up-circle>b{font-size:22px;line-height:23px;top:-4px;padding:0 3px}
.mobile-ui #modal .pond-up strong,.mobile-ui #modal .pond-up small{font-size:12px;line-height:1.25}
.mobile-ui #modal .pond-up small{width:100%;white-space:normal}
.mobile-ui #modal .departure-footer{padding-top:12px;gap:10px}
.mobile-ui #modal .departure-footer strong{font-size:16px}
.mobile-ui #modal .departure-footer small,.mobile-ui #modal .departure-note,.mobile-ui #modal .departure-loadout{font-size:12px;line-height:1.5}
.mobile-ui #modal .departure-footer button{min-width:130px}

/* Sanctuary detail uses a compact two-column readout instead of stacking
   the fish name, length and score into three tall rows. */
.mobile-ui #modal .sanctuary-toolbar{padding-bottom:8px;gap:10px}
.mobile-ui #modal .sanctuary-toolbar strong{font-size:15px}
.mobile-ui #modal .sanctuary-toolbar small{font-size:12px;line-height:1.4}
.mobile-ui #modal .sanctuary-feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;margin-bottom:10px}
.mobile-ui #modal .sanctuary-feature-water{min-height:126px;border-width:2px}
.mobile-ui #modal .sanctuary-feature-water>.sanctuary-fish-art{height:105px;width:82%}
.mobile-ui #modal .sanctuary-water-caption{font-size:11px;left:8px;bottom:6px}
.mobile-ui #modal .sanctuary-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;align-items:center;gap:4px 8px}
.mobile-ui #modal .sanctuary-detail>.specimen-card-badges{grid-column:1/-1}
.mobile-ui #modal .sanctuary-detail>h3{grid-column:1;grid-row:2;font-size:19px;line-height:1.25}
.mobile-ui #modal .sanctuary-detail>.sanctuary-measure{grid-column:1;grid-row:3;font-size:12px;line-height:1.4}
.mobile-ui #modal .sanctuary-detail>.sanctuary-total-score{grid-column:2;grid-row:2/4;font-size:25px;white-space:nowrap;line-height:1.2}
.mobile-ui #modal .sanctuary-detail>.sanctuary-total-score small{font-size:12px}
.mobile-ui #modal .sanctuary-detail>.sanctuary-score-detail,.mobile-ui #modal .sanctuary-detail>.sanctuary-network-note,.mobile-ui #modal .sanctuary-detail>.sanctuary-upload-status{grid-column:1/-1;font-size:12px;line-height:1.45}
.mobile-ui #modal .sanctuary-detail>button{grid-column:1/-1;justify-self:start;min-height:40px}
.mobile-ui #modal .specimen-card-badges{gap:3px;min-height:16px}
.mobile-ui #modal .specimen-badge{font-size:11px;padding:1px 4px;line-height:1.4}
.mobile-ui #modal .sanctuary-specimens{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mobile-ui #modal .specimen-card{padding:5px;gap:3px}
.mobile-ui #modal .specimen-card-art{height:40px}
.mobile-ui #modal .specimen-card-name{font-size:12px}
.mobile-ui #modal .specimen-card-score{font-size:14px}
.mobile-ui #modal .sanctuary-pagination{margin:10px 0 5px;gap:12px}
.mobile-ui #modal .sanctuary-pagination span,.mobile-ui #modal .sanctuary-rules{font-size:12px}
.mobile-ui #modal .sanctuary-empty{padding:9px 8px}
.mobile-ui #modal .sanctuary-empty-water{height:70px;max-width:217px}
.mobile-ui #modal .sanctuary-empty h3{font-size:18px;margin:9px 0}
.mobile-ui #modal .sanctuary-empty p{font-size:12px;line-height:1.5}
.mobile-ui #modal .fish-rank-row{grid-template-columns:26px 70px 1fr auto;gap:8px;padding:7px 9px}
.mobile-ui #modal .fish-rank-art{height:44px}
.mobile-ui #modal .fish-rank-info>b,.mobile-ui #modal .fish-rank-info>span{font-size:12px}
.mobile-ui #modal .fish-rank-score{font-size:18px}
.mobile-ui #modal .options-grid button{min-height:72px;gap:4px;padding:7px 5px}
.mobile-ui #modal .options-grid b,.mobile-ui #modal .options-grid small{font-size:12px}
.mobile-ui #modal .option-symbol{height:23px;font-size:22px}
.mobile-ui #modal .mobile-tool-card{min-height:82px;padding:6px 4px;gap:3px}
.mobile-ui #modal .mobile-tool-card b,.mobile-ui #modal .mobile-tool-card small{font-size:12px}
.mobile-ui #modal .mobile-tool-card b{min-height:28px}
.mobile-ui #modal .mobile-tool-card .tool-art{width:43px;height:28px}
.mobile-ui #modal .tool-menu-note{font-size:12px;line-height:1.5}

@media(max-width:620px){
 .mobile-ui #modal .modal-body{padding-right:9px;padding-left:9px}
 .mobile-ui #modal .collection-grid{gap:6px}
 .mobile-ui #modal .fish-card{padding:6px 4px}
 .mobile-ui #modal .destination-card{grid-template-columns:88px minmax(120px,1fr) auto;min-height:124px}
 .mobile-ui #modal .destination-info{padding:7px;gap:3px}
 .mobile-ui #modal .destination-info strong{font-size:16px}
 .mobile-ui #modal .pond-up-list{padding:8px 5px;gap:4px}
 .mobile-ui #modal .pond-up{width:62px}
 .mobile-ui #modal .up-circle{width:56px;height:56px}
 .mobile-ui #modal .up-circle .fish-art{width:48px;height:38px}
 .mobile-ui #modal .pond-up small{white-space:normal}
 .mobile-ui #modal .sanctuary-feature{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:9px}
 .mobile-ui #modal .sanctuary-detail>.sanctuary-total-score{font-size:22px}
 .mobile-ui #modal .sanctuary-detail>h3{font-size:17px}
 .mobile-ui #modal .sanctuary-toolbar>div{min-width:0}
}

/* Keep the in-game overlays compact too. Physical fish/hand drawing and the
   canvas remain untouched; only chrome, icons and padding change. */
.mobile-ui .mobile-game-menus{gap:6px}
.mobile-ui .mobile-game-menus button{min-height:40px;padding:4px 7px;gap:5px}
.mobile-ui .mobile-game-menus b{font-size:12px}
.mobile-ui .mobile-game-menus small{display:none}
.mobile-ui #mobile-tools-button{min-width:80px}
.mobile-ui #mobile-options-button{min-width:64px}
.mobile-ui #mobile-tool-art{width:24px;height:24px}
.mobile-ui #mobile-tool-art .tool-art,.mobile-ui #mobile-tool-art svg{width:25px;height:23px}
.mobile-ui .storage-hud{top:calc(var(--toy-safe-top) + 50px);gap:5px}
.mobile-ui .storage-hud button{min-height:40px;padding:5px 8px;font-size:12px}
.mobile-ui .timer-hud{padding:4px 7px;min-width:86px}
.mobile-ui .timer-hud strong{font-size:22px;line-height:1.1;margin:2px 0}
.mobile-ui .timer-hud .hud-label{font-size:12px;letter-spacing:0}
.mobile-ui .catch-hud{padding:4px 7px;min-width:138px;max-width:154px}
.mobile-ui .catch-hud>.hud-label{font-size:10px;letter-spacing:0}
.mobile-ui .catch-hud>strong{font-size:17px;margin:0;line-height:1.2}
.mobile-ui .catch-hud>div{font-size:12px;line-height:1.25}
.mobile-ui .catch-hud #profit-hint{font-size:10px;line-height:1.2;margin:0}
.mobile-ui .catch-hud .vitals-strip{gap:8px;margin-top:2px;padding-top:2px;font-size:10px}
.mobile-ui .catch-hud #round-bonus{font-size:10px;line-height:1.2;white-space:normal}
.mobile-ui .catch-hud .big-fish-luck{margin-top:3px;padding:3px 5px 2px}
.mobile-ui .catch-hud .big-luck-display{height:32px}
.mobile-ui .catch-hud .big-luck-number{font-size:31px}
.mobile-ui .catch-hud .big-luck-heading{font-size:12px;letter-spacing:0}
.mobile-ui .catch-hud .big-luck-cap{font-size:9px}
.mobile-ui .catch-hud .big-luck-plus{font-size:15px}
.mobile-ui .catch-hud .big-luck-percent{font-size:20px}
.mobile-ui .catch-hud .big-luck-note{font-size:9px;line-height:1.2}
.mobile-ui .home-career{padding:5px 8px}
.mobile-ui .home-career strong{font-size:14px}
.mobile-ui .home-career small{font-size:12px;margin-top:2px}
.mobile-ui .home-supply{min-height:52px;padding:5px 6px;gap:5px}
.mobile-ui .home-supply strong{font-size:14px}
.mobile-ui .home-supply small{font-size:12px;line-height:1.25}
.mobile-ui .home-supply .supply-art{width:25px;height:29px}
.mobile-ui .home-sanctuary-water{height:48px;border-width:4px}
.mobile-ui .home-sanctuary-label{padding:3px 4px}
.mobile-ui .home-sanctuary-label b{font-size:12px}
.mobile-ui .home-sanctuary-label small{display:none}
.mobile-ui .home-menu .home-orders{padding:12px 8px 6px;gap:2px}
.mobile-ui .home-orders strong{font-size:18px}
.mobile-ui .home-orders>span:last-child{font-size:12px;padding-top:3px;line-height:1.25}
.mobile-ui .home-orders>small{display:none}
.mobile-ui .home-support{min-height:40px;padding:4px 8px}
.mobile-ui .home-support strong{font-size:12px}
.mobile-ui .home-support small{font-size:10px}
.mobile-ui .held-header{padding:4px 10px;gap:10px;min-height:44px}
.mobile-ui .held-header h2{font-size:17px;line-height:1.25;margin:0 0 0 7px}
.mobile-ui .held-header #held-rarity{font-size:11px;letter-spacing:0}
.mobile-ui .held-stats{gap:1px}
.mobile-ui .held-stats b{font-size:20px;line-height:1.15}
.mobile-ui .held-stats span,.mobile-ui .held-stats #held-length{font-size:12px;line-height:1.3}
.mobile-ui .held-special{margin-top:2px;padding:1px 5px;font-size:12px;line-height:1.25}
.mobile-ui .held-footer{padding:3px 10px;gap:7px;flex-wrap:nowrap;min-height:46px}
.mobile-ui .held-footer img{width:28px;height:28px}
.mobile-ui .held-footer>div{gap:2px;min-width:0}
.mobile-ui .held-footer b{font-size:12px;line-height:1.3}
.mobile-ui .held-footer small{font-size:12px;line-height:1.3}
.mobile-ui .held-footer .primary-button{min-height:40px;width:auto;padding:7px 10px;font-size:12px;margin:0 0 0 auto}
.mobile-ui .held-timer{height:3px}
.mobile-ui .career-detail-layer{padding-top:calc(var(--toy-safe-top) + 8px);padding-bottom:calc(var(--toy-safe-bottom) + 8px)}
.mobile-ui .career-detail-popover{max-height:calc(100dvh - var(--toy-safe-top) - var(--toy-safe-bottom) - 16px)}
.mobile-ui .career-detail-popover{display:flex;flex-direction:column;overflow:hidden}
.mobile-ui .career-detail-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#7b8854 #d8d3ac}
.mobile-ui .career-detail-effect p,.mobile-ui .career-detail-requirements p,.mobile-ui .career-detail-actions .career-detail-blocked{font-size:12px}

/* The desktop top bar already owns its wallet. Mobile keeps a separate camp
   balance beneath supplies, clear of native Toy controls and the wooden sign. */
.home-wallet{display:none}
.mobile-ui .at-home .home-wallet{position:absolute;z-index:5;top:calc(var(--toy-safe-top) + 126px);left:var(--toy-ui-left);display:grid;grid-template-columns:19px minmax(0,1fr);align-items:center;gap:2px 5px;width:134px;min-height:48px;padding:5px 8px;border:2px solid #6e5427;border-radius:9px;background:linear-gradient(120deg,#f9e7aa,#edcb70);box-shadow:2px 3px #372f2066;color:#4a361c;pointer-events:none}
.mobile-ui .home-wallet-coin{font:900 19px/1 Georgia,serif;color:#a57520;text-align:center}
.mobile-ui .home-wallet-label{font-size:12px;line-height:1.2;font-weight:700}
.mobile-ui #home-coins{grid-column:1/-1;display:block;min-width:0;max-width:100%;font:800 16px/1.2 Georgia,'Microsoft YaHei',serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:normal;letter-spacing:0}
@media(max-width:700px) and (orientation:landscape){
 .mobile-ui .at-home .home-wallet{width:104px;top:calc(var(--toy-safe-top) + 118px);padding:5px 6px}
 .mobile-ui #home-coins{font-size:14px}
 .mobile-ui .home-career strong{font-size:12px;line-height:1.3;white-space:nowrap}
 .mobile-ui .home-supply>span:last-child{min-width:0;flex:1}
 .mobile-ui .home-supply strong{font-size:12px;line-height:1.3;white-space:nowrap}
 .mobile-ui .home-supply strong b{display:none}
 .mobile-ui .home-supply small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media(min-height:541px){
 .mobile-ui .at-home .home-wallet{top:calc(var(--toy-safe-top) + 150px)}
}