/* Mobile-first layout of the tower scenes.
   Keep this separate from the desktop layout: fitting without scrolling is
   not equivalent to providing readable touch targets on a narrow screen. */
@media (max-width:700px) and (orientation:portrait) {
  html,body{font-size:14px}
  #game-screen{height:100dvh;width:100%;border:0}
  #hud{height:52px;padding:0 12px;gap:6px}
  .brand small{letter-spacing:.3px;font-size:8px}
  .brand strong{font-size:16px}
  .hud-center{gap:5px;font-size:11px}
  .hud-right{gap:5px;font-size:10px}
  .hud-menu{width:40px;height:40px}
  .scene{height:calc(100% - 52px);padding:14px 13px;min-height:0}
  .action-primary,.action-secondary{min-height:46px;padding:10px 14px;font-size:14px}
  .quiet-link,.plain-action{font-size:13px;min-height:40px}
  .scene-caption{font-size:11px;letter-spacing:1px;margin-bottom:8px}

  /* Put the actual game entry above the fold, not below a huge empty sky. */
  .home-scene{display:flex;align-items:flex-start;padding-top:clamp(38px,7dvh,78px)}
  .home-intro{flex:1;justify-content:flex-start}
  .home-intro h1{font-size:clamp(43px,12vw,58px);margin:15px 0 18px;line-height:1.15}
  .home-intro>p{font-size:13px;line-height:1.75;max-width:320px;margin-bottom:22px}
  .home-stats{gap:8px;margin-bottom:23px}
  .home-stats small{font-size:11px}
  .home-stats strong{font-size:21px}
  .home-scene .action-row{width:min(330px,100%)}
  .home-scene .action-row button{min-height:50px;font-size:14px}
  .home-tower{top:5%;right:-100px;height:95%;width:72%;opacity:.18}

  /* Give the trainer a visible upper panel, and give the Pokémon names
     two rows so a six-member team is legible. */
  .encounter-scene{overflow:auto}
  .encounter-main{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:9px;flex:initial}
  .portrait-platform{flex:0 0 145px;min-height:145px;height:145px;max-height:none;
    border:1px solid #37687c;border-radius:13px;
    background:radial-gradient(ellipse at 50% 67%,#427c9870,transparent 70%)}
  .trainer-silhouette{width:160px;height:100%;filter:drop-shadow(0 0 23px #7dc6fa60) brightness(1.5)}
  .trainer-silhouette .silhouette-head{top:11%}
  .portrait-foot{bottom:3%}
  .encounter-info{flex:none;min-height:0;overflow:visible}
  .encounter-info h1{font-size:34px;margin:5px 0 8px}
  .encounter-info blockquote{font-size:13px;margin:8px 0 12px}
  .roster-title{font-size:13px;margin:0 0 8px}
  .pokemon-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .pokemon-card{gap:5px;padding:7px 4px 6px}
  .pokemon-card img{height:47px;width:60px}
  .pokemon-card strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}
  .pokemon-card strong{display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;
    line-height:1.3;max-height:2.6em}
  .pokemon-card small{font-size:10px}
  .reward-promise{font-size:12px;padding:9px;margin:11px 0 13px}
  .encounter-info .action-row{display:grid;grid-template-columns:1.25fr 1fr;gap:8px}
  .encounter-info .action-row button{width:100%}

  /* Team selection: three sprites per row, not six unreadable thumbnails.
     A selected team's detailed move information remains scrollable. */
  .team-scene h2{font-size:25px}
  .team-scene .scene-description{font-size:12px;line-height:1.5;margin-bottom:10px}
  .team-list{display:flex;flex-direction:column;gap:10px;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;align-items:stretch}
  .team-option{flex:0 0 auto;min-height:0;gap:10px;padding:12px;overflow:visible}
  .team-option h3{font-size:17px}
  .team-roster{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .team-option .pokemon-card{min-height:80px}
  .team-option .pokemon-card img{height:43px;width:64px}
  .team-option .pokemon-card strong{font-size:11px}
  .team-option .team-detail{font-size:12px;line-height:1.65}
  .team-detail span{padding:6px 0;border-bottom:1px solid #42637a;overflow-wrap:anywhere}
  .team-detail span:last-child{border-bottom:0}
  .team-scene .scene-footer{border-top:1px solid #3d6076;background:#0e2032;
    margin:8px -13px -14px;padding:10px 13px calc(10px + env(safe-area-inset-bottom))}
  .team-scene .scene-footer>span{flex:1;font-size:11px}
  .team-scene .scene-footer .action-primary{min-width:164px;font-size:12px}

  /* Stop reserving half of the screen for each list regardless of content.
     Keep both recruit panels in one scroll region, with fixed action footer. */
  .recruit-scene{overflow:hidden}
  .recruit-heading{margin-bottom:9px}
  .recruit-heading h2{font-size:26px}
  .recruit-heading p{font-size:12px;line-height:1.5}
  .recruit-panels{display:block;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:9px}
  .recruit-panels>div{display:block;min-height:0;margin-bottom:18px}
  .recruit-panels h3{font-size:13px;margin:0 0 8px}
  .recruit-panels h3 span{font-size:11px}
  .recruit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    align-content:start;overflow:visible}
  .recruit-item{min-height:78px;padding:8px;gap:8px}
  .recruit-item img{width:48px;height:51px}
  .recruit-item strong{font-size:12px;line-height:1.3}
  .recruit-item small{font-size:10px;line-height:1.45;margin-top:4px;
    white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2}
  .recruit-item .slot{font-size:10px}
  .recruit-scene .scene-footer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;
    border-top:1px solid #37586e;padding:9px 0 calc(7px + env(safe-area-inset-bottom))}
  .recruit-scene .scene-footer>span{grid-column:1/-1;order:-1;
    min-width:0;text-align:left;font-size:11px}
  .recruit-scene .scene-footer button{min-height:46px;padding:9px 12px}

  .battle-scene{overflow:hidden;padding:4px 3px 5px}
  .battle-header{min-height:37px;font-size:12px;gap:6px}
  .battle-header #battle-trainer-name{min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .battle-header .battle-header-actions{flex:0 0 auto;gap:4px}
  .battle-header .quiet-link{min-height:36px;padding:6px 9px;font-size:12px}
  .battle-continue{font-size:12px;padding:9px 11px}
  .battle-scene iframe{border-radius:9px}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .collection-item{min-height:105px}
  .collection-item strong{font-size:13px}
  .dialog-panel{max-height:calc(100dvh - 36px)}
}
@media (max-width:380px) and (orientation:portrait) {
  .hud-center{font-size:10px}
  #hud-score{display:none}
  .recruit-item img{width:40px;height:46px}
}