/* The camera scene keeps world coordinates independent from the viewport. */
.world-scene{position:absolute;inset:0}
/* A shared gamepad stays above the field, and inside the active modal. */
.touch-controls,.field-toolbar .mobile-team-button{display:none}
.touch-selection{display:none}
.touch-pad{display:none!important}
.touch-controls{gap:12px;align-items:end;justify-content:space-between;padding:8px 16px;background:#f7f8f2;z-index:20;touch-action:none;user-select:none;-webkit-user-select:none}
.touch-dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}
.touch-controls button{touch-action:none;min-width:44px;min-height:44px;border:1px solid #b8c9ac;border-bottom:3px solid #9bab91;border-radius:12px;background:#eaf0df;color:#264c38;font-weight:700;font-size:22px;padding:0;box-shadow:0 2px 5px #193b2510}
.touch-dpad [data-control=up]{grid-column:2}
.touch-dpad [data-control=left]{grid-column:1}
.touch-buttons{display:flex;align-items:end;gap:12px}
.touch-controls .touch-back{font-size:12px;padding:0 12px;min-width:58px}
.touch-controls .touch-confirm{width:80px;height:72px;background:#255940;border-color:#194430;color:#f5ffdf;font-size:14px}
.touch-controls button:active{background:#d1e4b1;transform:translateY(2px)}
.touch-controls .touch-confirm:active{background:#36744f}

@media(any-pointer:coarse),(max-width:900px),(orientation:landscape) and (max-height:600px) and (max-width:1100px){
  .touch-controls{display:flex}
  .field-toolbar .mobile-team-button{display:flex}
  .touch-controls--field{position:fixed;bottom:0;left:0;right:0;padding-bottom:max(8px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));border-top:1px solid var(--line)}
  .main{padding-bottom:112px}
  dialog[open]:not(.battle-dialog){display:flex;flex-direction:column;max-height:96dvh;overflow:hidden}
  .dialog-head{flex:none}
  .dialog-body{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:8px}
  .touch-controls--dialog{flex:none;border-top:1px solid var(--line)}
  dialog button:not([data-control]):focus,.starter-option:focus,dialog input:focus,dialog select:focus,dialog a:focus{outline:3px solid #c0811d;outline-offset:-3px;box-shadow:inset 0 0 0 5px #fff6c2}
  .battle-dialog[open]:not(.result-mode){display:flex;flex-direction:column;overflow:hidden}
  .battle-dialog:not(.result-mode) .battle-arena{flex:none;height:min(305px,32dvh)}
  .battle-bottom{min-height:0;overflow:auto;overscroll-behavior:contain}
  .toast{bottom:116px}
}

/* Landscape exploration fills the available screen. The larger scene follows
   the player; controls overlay the corners. dvh follows browser chrome. */
@media(orientation:landscape) and (max-height:600px) and (max-width:1100px),(orientation:landscape) and (any-pointer:coarse){
  html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  #app{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:0;position:relative;display:flex;flex-direction:column}
  .main{width:100%;flex:1;min-height:0;margin:0;padding:0;display:flex;flex-direction:column}
  .topbar,.field-toolbar,.area-heading,.sidebar,.world-controls,.below-map,.footer{display:none}
  .game-layout{display:block;flex:1;min-height:0;padding:0;position:relative}
  .adventure{position:absolute;inset:0;min-width:0;width:100%}
  .world-frame{height:100%;padding:0;border-radius:0;box-shadow:none}
  .world{width:100%;height:100%;aspect-ratio:auto;border-radius:0;container-type:size;overflow:clip}
  .world-scene{inset:auto;left:0;top:0;width:max(100cqw,150cqh);height:max(100cqh,66.666667cqw)}
  .world .location-chip{font-size:10px;top:8px;left:8px;padding:7px 9px;gap:4px;letter-spacing:.3px}
  .world .location-chip svg{width:12px;height:12px}
  .world[data-region] .map-status{display:flex;font-size:11px;max-width:calc(100% - 330px);padding:6px 9px;bottom:8px;left:50%;transform:translateX(-50%);line-height:1.3;justify-content:center;text-align:center}
  .world .map-status svg{display:none}
  .world .npc-label{font-size:11px;padding:3px 5px}
  .world .player{width:7.2%}.world .faced-npc{width:7%}.player:after{font-size:8px;padding:1px 3px}
  .world .map-marker{font-size:11px;padding:5px 7px;gap:3px}.world .map-marker svg{width:12px;height:12px}
  .world .field-find{width:20px;height:20px}.world .field-find .item-art{width:21px;height:21px}
  .touch-controls--field{position:absolute;inset:0;pointer-events:none;background:none;border:0;padding:8px;align-items:end}
  .touch-controls--field .touch-dpad,.touch-controls--field .touch-buttons{pointer-events:auto}
  .touch-controls--field button{background:#173e33d9;color:#f7ffe9;border-color:#efffd080;box-shadow:0 2px 5px #142a3260}
  .touch-controls--field button:active{background:#3a704a}
  .touch-controls--field .touch-buttons{width:auto;align-items:center;gap:0}
  .touch-controls--field .touch-back{position:absolute;top:8px;right:8px;min-width:60px;height:44px;pointer-events:auto}
  .touch-controls--field .touch-confirm{height:64px;width:80px;background:#255940ed}
  .starter-overlay{padding:6px;align-items:center}.starter-card{width:min(420px,70%);padding:12px;border-radius:10px}
  .starter-card .eyebrow,.starter-card p,.starter-hint{display:none}
  .starter-card h2{font-size:16px;margin:0 0 8px;letter-spacing:-.3px}
  .starter-options{gap:6px}.starter-option{padding:4px 2px 7px}
  .starter-option .sprite,.starter-card .sprite{width:58px;height:50px;margin:0}
  .starter-option strong{font-size:12px}.starter-option .type{font-size:9px;letter-spacing:.5px}
  dialog[open],dialog.battle-dialog.result-mode{width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));height:calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-width:none;max-height:none;margin:auto;border-radius:12px;overflow:hidden}
  .dialog-head{padding:4px 12px;min-height:40px}.dialog-head h2{font-size:16px}.close{width:40px;height:32px;border-radius:8px}
  .dialog-body{flex:1;padding:10px 16px;font-size:13px}
  .dialog-body p{font-size:13px;line-height:1.5;margin:8px 0}
  .dialog-body .primary,.dialog-body .ghost{min-height:44px;font-size:13px;padding:8px 12px}
  .touch-controls--dialog{padding:4px 12px;min-height:100px;background:#f2f5e9}
  .touch-controls--dialog .touch-confirm{height:64px}
  .touch-controls--dialog .touch-buttons{align-items:center}
  .touch-controls--dialog .touch-selection{display:block;flex:1;min-width:0;align-self:center;margin:0;padding:4px 8px;font-size:12px;line-height:1.5;color:#4f6357}
  .face-portrait{padding:6px 10px;gap:10px;margin-bottom:8px}
  .face-portrait .npc-face{width:42px;height:42px}.face-portrait strong{font-size:17px}.face-portrait span:not(.npc-face){font-size:12px;margin-top:2px}
  .npc-actions{margin:10px 0 4px;gap:8px}
  .menu-actions{gap:8px}.help-rows{gap:12px}.help-row{font-size:13px}
  .lore-dialog .dialog-body{display:grid;grid-template-columns:100px minmax(0,1fr);align-content:start;gap:8px 14px}
  .lore-dialog .lore-profile{grid-column:1;grid-row:1/3;margin:0}.lore-dialog .lore-profile .sprite{width:80px;height:80px}
  .lore-dialog .lore-story,.lore-dialog .lore-locked,.lore-dialog .dialog-body>button{grid-column:2;margin:0}
  .lore-story{margin:8px 0;padding:10px 14px}.lore-story p{font-size:14px;line-height:1.6}
  .evolution-celebration{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:16px;align-items:center}
  .evolution-stage{grid-column:1;grid-row:1/6;height:150px;margin:0}.evolution-stage .sprite{width:140px;height:140px}.evolution-halo{width:105px;height:105px}
  .evolution-celebration>.eyebrow,.evolution-celebration>h3,.evolution-celebration>p,.evolution-celebration>.primary{grid-column:2}
  .evolution-celebration h3{font-size:18px;margin:4px 0}.evolution-reason{padding:6px 10px}
  .battle-dialog[open]:not(.result-mode){display:grid;grid-template-columns:38% minmax(0,1fr);grid-template-rows:30px minmax(0,1fr) 100px}
  .battle-heading{grid-column:1/-1;padding:6px 12px;font-size:10px;letter-spacing:.5px;gap:12px}
  .battle-dialog:not(.result-mode) .battle-arena{grid-column:1;grid-row:2;height:100%;min-height:0}
  .battle-bottom{grid-column:2;grid-row:2;padding:8px 10px;display:flex;flex-direction:column;overflow:hidden}
  .battle-message{flex:none;min-height:0;font-size:12px;line-height:1.4;margin:0 0 6px}
  .battle-moves{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;scroll-padding:4px;align-content:start;grid-auto-rows:max-content;margin:0 0 6px;padding:3px;gap:6px}
  .move-button{min-height:48px;padding:6px 7px;gap:3px;grid-template-columns:1fr;font-size:12px;border-bottom-width:2px}
  .move-button>span{font-size:12px}.move-button>small{font-size:10px;text-align:left;padding:0;white-space:normal}
  .move-button>em{display:none}.move-button kbd{display:none}
  .battle-actions{flex:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .battle-actions button{min-height:44px;display:block;font-size:11px;padding:5px 3px;text-align:center}
  .battle-actions button>span{justify-content:center;gap:3px}.battle-actions button small{display:none}.battle-actions .item-art{width:17px;height:17px}
  .battle-footer{display:none}
  .battle-dialog>.touch-controls{grid-column:1/-1;grid-row:3}
  .battle-stat{width:68%;padding:6px 8px;border-radius:7px;border-bottom-width:2px}
  .battle-stat.enemy-stat{top:6px;left:6px}.battle-stat.ally-stat{right:6px;bottom:6px;width:68%}
  .battle-stat .name-row{font-size:12px;gap:3px;margin:0}.battle-stat .level{font-size:10px;white-space:nowrap}
  .battle-type-row .type{font-size:8px;letter-spacing:0;line-height:1.4}.battle-type-row{margin:0}
  .battle-stat .hp-track{height:5px;margin:4px 0 3px}.battle-stat .hp-text{font-size:10px;margin:0}
  .battle-stat .xp-text,.battle-stat .xp-track,.caught-badge{display:none}
  .battle-status-tags{font-size:10px;margin-top:3px}
  .battle-sprite.enemy,.battle-arena:has(.battle-trainer) .enemy{width:100px;height:100px;right:0;top:24%;}
  .battle-sprite.ally{width:110px;height:110px;left:2px;bottom:6px}
  .battle-arena:before{width:110px;height:20px;right:0;top:58%}.battle-arena:after{width:120px;height:20px;left:0;bottom:8px}
  .battle-trainer{right:0;top:2px;width:42px;height:50px}.battle-trainer .npc-face{width:40px;height:40px}.battle-trainer>span:last-child{font-size:9px;padding:1px 3px}
  .trainer-encouragement{display:none}.move-word{font-size:18px}.battle-arena[data-force="5"] .move-word{font-size:22px}
  .battle-dialog.result-mode .battle-heading{min-height:30px;flex:none}
  .battle-aftermath{padding:6px 12px;gap:10px}.battle-aftermath .sprite{width:38px;height:38px}.battle-aftermath>div{gap:8px}.battle-aftermath strong{font-size:12px}.battle-aftermath small{font-size:10px;margin-top:3px}
  .battle-dialog.result-mode .battle-result{padding:10px 16px}.battle-result h3{font-size:18px}.battle-result p{font-size:13px;margin:6px 0}
  .battle-dialog.result-mode .growth-events{margin:8px auto;padding:6px;font-size:12px}
  .toast{bottom:110px;max-width:60vw;font-size:12px;padding:8px 12px}
}

/* Leave one complete move row visible when mobile browser chrome reduces the
   landscape viewport. Directional navigation brings the other rows into view. */
@media(orientation:landscape) and (max-height:300px){
  .battle-dialog[open]:not(.result-mode){grid-template-rows:26px minmax(0,1fr) 92px}
  .battle-heading{padding:4px 10px}
  .touch-controls--dialog{padding-top:0;padding-bottom:0;min-height:92px}
  .battle-bottom{padding:4px 8px}
  .battle-message{line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
  .battle-moves{margin-bottom:4px;padding:0 2px;scroll-padding:0}
  .battle-stat{padding:4px 6px}.battle-stat .battle-type-row{display:none}
  .battle-sprite.enemy,.battle-arena:has(.battle-trainer) .enemy{width:72px;height:72px}
  .battle-sprite.ally{width:82px;height:82px}
  .touch-controls--dialog .touch-selection{font-size:11px;line-height:1.4;padding:2px 4px}
}