/* Touch devices only. The desktop comic layout keeps its existing proportions. */
@media (pointer: coarse) {
  #startScreen .select-panel {
    grid-template-rows:38px minmax(0,1fr) auto;
    gap:5px;padding:8px 13px 10px;
  }
  #startScreen .select-panel h2 {
    margin:0;font-size:clamp(21px,5dvh,30px)!important;
    padding:3px 16px 5px;box-shadow:2px 2px 0 #33271c;
  }
  #startScreen .fighter-grid {
    width:calc(100% - 12px);height:100%;min-height:0;max-height:none;
    align-self:stretch;gap:12px;padding:5px 0 7px;
  }
  #startScreen .fighter-card {border-width:3px;outline-width:2px;touch-action:manipulation;}
  #startScreen .fighter-card strong,
  #startScreen .fighter-card[data-hero="heroine"] strong {
    top:3px!important;font-size:clamp(22px,3.2vw,32px)!important;
    -webkit-text-stroke-width:1px;
  }
  #startScreen .fighter-art,
  #startScreen .fighter-card[data-hero="rista"] .fighter-art,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art {
    inset:31px 2px 53px!important;filter:drop-shadow(3px 3px 0 #211b1c88);
  }
  #startScreen .fighter-art img,
  #startScreen .fighter-card[data-hero="boki"] .fighter-art img,
  #startScreen .fighter-card[data-hero="rista"] .fighter-art img,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art img {
    position:absolute;top:0;left:50%;width:auto!important;height:210%!important;
    max-width:none;max-height:none;object-fit:contain;object-position:center top;
    transform:translateX(-50%)!important;
  }
  #startScreen .fighter-stats {
    height:49px;bottom:-3px!important;padding:3px 6px!important;
    border-width:2px!important;gap:0;
  }
  #startScreen .fighter-card .fighter-stats .stat-row {font-size:8px!important;min-height:8px;line-height:1;}
  #startScreen .fighter-bios {display:block;width:calc(100% - 12px);margin:0 auto;}
  #startScreen .fighter-bio,#startScreen .fighter-bio[data-bio] {
    display:none;min-height:0;height:32px;padding:4px 9px;border-width:2px;border-left-width:4px;
    font-size:10px;line-height:1.2;
    align-items:center;gap:8px;
  }
  #startScreen .select-panel:has([data-hero="boki"].selected) [data-bio="boki"],
  #startScreen .select-panel:has([data-hero="rista"].selected) [data-bio="rista"],
  #startScreen .select-panel:has([data-hero="heroine"].selected) [data-bio="heroine"] {display:flex;}
  #startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong {
    display:block;font-size:clamp(6px,1.1vw,10px);border:0;padding:0;margin:0;
    flex:none;white-space:nowrap;letter-spacing:.025em;
  }
  #startScreen .fighter-bio p {display:block;font-size:clamp(6px,1.1vw,10px);line-height:1.2;margin:0;white-space:nowrap;}
  #startScreen .fighter-bios::after {content:none;display:none;}
}
@media (pointer: coarse) and (orientation: landscape) and (max-height:310px) {
  #startScreen .select-panel {grid-template-rows:30px minmax(0,1fr) auto;gap:4px;padding:6px 11px 8px;}
  #startScreen .select-panel h2 {font-size:21px!important;padding:2px 14px 4px;}
  #startScreen .fighter-art,#startScreen .fighter-card[data-hero="rista"] .fighter-art,#startScreen .fighter-card[data-hero="heroine"] .fighter-art {inset:27px 2px 40px!important;}
  #startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong {font-size:22px!important;}
  #startScreen .fighter-stats {height:36px;padding:2px 5px!important;}
  #startScreen .fighter-card .fighter-stats .stat-row {font-size:7px!important;min-height:6px;line-height:1;}
}
@media (pointer: coarse) and (orientation: portrait) {
  #startScreen .select-panel {
    height:min(520px,calc(100dvh - 24px));grid-template-rows:48px minmax(0,1fr) auto;
    gap:10px;padding:12px;
  }
  #startScreen .fighter-grid {gap:7px;}
  #startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong {font-size:21px!important;}
  #startScreen .fighter-art,#startScreen .fighter-card[data-hero="rista"] .fighter-art,#startScreen .fighter-card[data-hero="heroine"] .fighter-art {inset:31px 0 57px!important;}
  #startScreen .fighter-stats {height:53px;padding:4px 3px!important;}
  #startScreen .fighter-card .fighter-stats .stat-row {font-size:6px!important;min-height:9px;}
  #startScreen .fighter-bio,#startScreen .fighter-bio[data-bio] {height:100px;padding:8px 9px;flex-direction:column;align-items:stretch;justify-content:center;gap:0;}
  #startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong {display:block;font-size:12px;margin:0 0 4px;}
  #startScreen .fighter-bio p {display:block;font-size:11px;line-height:1.25;white-space:normal;}
}