/* Direct tap selection with always-visible, spring-animated stats. */
.stat-track{overflow:hidden;border-radius:2px}
.stat-fill{transform-origin:left center}
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell{height:auto;min-height:100dvh;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .shell .main{flex:1;grid-template-rows:minmax(250px,1fr) auto}
  .shell .character-hud{inset:auto 5% 9px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
  .shell .character-info{position:relative;inset:auto;bottom:auto!important;visibility:visible}
  .shell .attributes{display:block;position:relative;inset:auto;bottom:auto!important;overflow:visible;pointer-events:auto;clip-path:none;border:1px solid rgba(var(--rgb),.5);border-left:2px solid var(--accent);padding:10px 12px;background:linear-gradient(110deg,#060c18ed,#0b1522d9);border-radius:3px;backdrop-filter:blur(8px)}
  .shell .attributes-body{display:block}
  .shell .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
  .shell .stat{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:auto 8px;gap:4px 6px;align-items:center}
  .shell .stat-label{grid-column:1;grid-row:1;font-size:10px;letter-spacing:1px}
  .shell .stat-value{grid-column:2;grid-row:1;font-size:11px;font-weight:700;color:#e5f3ff;line-height:1}
  .shell .stat-track{grid-column:1/-1;grid-row:2;height:8px;background:#7893b033}
  .shell .style-heading,.shell .quote-block{display:none}
  .shell .art-region{inset:6px 12% calc(var(--hud-height,144px) + 23px)}
  .shell.confirmed .art-region{inset:25px 8% calc(var(--hud-height,195px) + 26px)}
  .shell.confirmed .main{grid-template-rows:minmax(400px,1fr)}
  .shell.confirmed .style-heading{display:block;padding:0 0 9px;margin:0 0 10px}
  .shell.confirmed .style-label strong{font-size:16px;letter-spacing:1px}
  .shell.confirmed .profile{margin-top:5px;font-size:11px;line-height:1.6}
  .shell .character-card{height:clamp(48px,7.2dvh,68px)}
  .shell .roster{gap:7px 8px}
  #mobile-prev,#mobile-next{top:20%;height:44px;font-size:31px}
  .shell .footer{height:calc(62px + env(safe-area-inset-bottom,0px));padding:8px 4% calc(8px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center}
  .shell .footer .confirm{display:none}
  .shell .footer .back{position:static;flex:none;width:auto;min-width:130px;height:44px;min-height:44px;padding:8px 12px;flex-direction:row;gap:8px;font-size:11px;border-color:rgba(var(--rgb),.45)}
  .shell .footer .back:disabled{display:none}
  .shell .footer .back kbd{display:none}
  .shell .mobile-help{position:static;flex:1;min-width:0;font-size:10px;letter-spacing:0;line-height:1.6}
  .selected-seal{top:4%;right:6%}.selected-seal strong{font-size:27px}.selected-seal>span{font-size:6px}
}
@media(max-width:760px) and (max-height:710px){
  .shell .main{grid-template-rows:minmax(250px,1fr) auto}
  .shell .character-card{height:48px}.shell .roster{gap:6px 8px}
  .shell.confirmed .main{grid-template-rows:minmax(400px,1fr)}
  .shell h1{font-size:27px}.shell .name-jp>span:first-child{font-size:15px}
}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .shell{min-height:100dvh;height:auto;padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}
  .shell .main{grid-template-columns:43% 57%;grid-template-rows:minmax(260px,1fr)}
  .shell .selector{overflow:visible}
  .shell .roster{--roster-columns:6;grid-template-columns:repeat(var(--roster-columns),minmax(0,1fr))}
  .shell .character-card{height:61px}.shell.versus-picking .character-card{height:44px}
  .shell .character-hud{inset:auto 6% 7px;gap:5px}
  .shell .attributes{padding:7px 10px}.shell .stats{gap:8px 14px}
  .shell .art-region{inset:0 14% calc(var(--hud-height,135px) + 16px)}
  .shell .footer{height:calc(54px + env(safe-area-inset-bottom,0px));padding-top:5px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
  .shell.confirmed .main{grid-template-columns:1fr;grid-template-rows:minmax(260px,1fr)}
  .shell.confirmed .character-hud{left:49%;right:6%;bottom:12px}
  .shell.confirmed .art-region{inset:8px 54% 8px 5%}
  .shell.confirmed .selected-seal{top:4%;right:6%}.shell.confirmed .selected-seal strong{font-size:22px}
}