/* Distinct shot silhouettes retain the painted rim and depth of the HUD buttons. */
#app .touch-actions #touch-lob{--comic-face:url('./mobile-controls/lob.svg?v=5')}
#app .touch-actions #touch-drop{--comic-face:url('./mobile-controls/drop.svg?v=5')}
#app .touch-actions :is(#touch-lob,#touch-drop){
  background:transparent var(--comic-face) center/contain no-repeat;
  border:0;border-radius:0;box-shadow:none;color:var(--brand-ink);
}

@media(max-height:540px) and (orientation:landscape){
  /* Explicit tracks keep the serving button inside the right-hand control area. */
  #app[data-touch="true"] .touch-controls{
    left:calc(24px + env(safe-area-inset-left));right:calc(24px + env(safe-area-inset-right));
    bottom:calc(22px + env(safe-area-inset-bottom));align-items:flex-end;
  }
  #app[data-touch="true"] #stick{width:88px;height:88px}
  #app[data-touch="true"] #stick-zone{width:min(36vw,300px);height:clamp(110px,38dvh,180px)}
  #app[data-touch="true"] .touch-actions{grid-template-columns:76px 76px;grid-template-rows:76px;gap:10px;align-self:end}
  #app[data-touch="true"] .touch-actions :is(#touch-lob,#touch-drop){grid-row:1;grid-column:auto;width:76px;height:76px;padding:16px;font-size:14px;transform:none}
  #app[data-touch="true"] #touch-controls[data-serving="true"] .touch-actions{grid-template-columns:144px;grid-template-rows:88px}
  #app[data-touch="true"] .touch-actions #touch-serve{grid-column:1;grid-row:1;width:144px;height:88px;padding:16px;font-size:15px}
  #app[data-touch="true"] .serve-meter{bottom:calc(42px + env(safe-area-inset-bottom));width:min(260px,calc(100% - 400px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
  #app[data-touch="true"] .contact-hint{bottom:calc(100px + env(safe-area-inset-bottom));max-width:calc(100% - 360px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  #app .header-actions{flex-direction:row;top:calc(8px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));gap:6px}
  #app .header-actions .icon-button,#app .header-actions #pause{width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;padding:12px}
  #app .home-screen{--home-button-height:96px;padding:12px 24px;gap:8px;justify-content:safe center;overflow:auto}
  #app .home-screen .screen-head .logo .game-logo{width:72px}
  #app .home-links{grid-template-columns:repeat(2,minmax(0,1fr));width:min(760px,100%);gap:8px 16px}
  #app .home-links button{height:96px;min-height:96px;padding:20px 18%;font-size:14px;flex-direction:row;justify-content:space-between;gap:8px}

  /* A fixed heading and footer frame a separately scrolling choice area. */
  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen).setup-screen{
    padding:calc(10px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
    gap:6px;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;
  }
  #app .setup-screen .setup-head{gap:2px;padding:0 110px;width:100%;min-width:0}
  #app .setup-screen .setup-head h2{font-size:23px;line-height:1.15}
  #app .setup-screen .setup-steps{height:20px}
  #app .setup-screen .setup-step{height:20px}
  #app .setup-screen .setup-chips{display:none}
  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen) .setup-content{
    width:100%;min-height:0;align-self:stretch;justify-content:safe center;align-content:safe center;overflow:auto;padding:8px 10px 14px;scroll-padding:10px;
  }
  #app .setup-screen .setup-footer{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;width:min(520px,100%)}
  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen) .setup-footer :is(.text-button,.primary){height:52px;min-height:52px;padding:15px 16px 13px;font-size:14px;gap:8px}
  #app #difficulty-screen .difficulty.setup-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(720px,100%);padding:4px}
  #app #difficulty-screen .diff-card{height:auto;min-height:170px;padding:20px 18px 26px;gap:6px;transform:none}
  #app #difficulty-screen .diff-face{width:54px;height:54px}
  #app #difficulty-screen .diff-copy{gap:4px;width:100%;min-width:0}
  #app #difficulty-screen .diff-text{font-size:11px;line-height:1.3;white-space:normal;max-width:180px;text-wrap:balance}
  #app #character-screen .equipment-content{justify-content:flex-start}
  #app #character-screen .equipment-card{padding:8px 16px}
  #app #character-screen .equipment-card .equipment-model-stage{height:84px}
  #app #character-screen .equipment-card>strong{font-size:20px}
  #app #character-screen .character-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
  #app #character-screen .character-option{height:190px;min-height:190px;--figure-height:70px;padding:26px 8px 30px;gap:4px}
  #app #character-screen .character-option .fighter-stage{height:80px;min-height:0}
  #app #character-screen .character-option strong{font-size:16px}
  #app #opponent-screen .opponent-content{padding:8px 58px 14px;scroll-padding:8px 58px 14px}
  #app #opponent-screen .rival-collectible{width:min(620px,100%);grid-template-columns:minmax(0,1fr);grid-template-rows:auto;--rival-art-height:130px;gap:12px}
  #app #opponent-screen .rival-sheet{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px;padding:12px}
  #app #opponent-screen .fighter-name{font-size:24px}
  #app #opponent-screen .rival-dossier{align-self:center;gap:6px}
  #app #opponent-screen .trait-columns{gap:6px}
  #app #opponent-screen .rival-traits li{font-size:11px}
  #app #opponent-screen .rival-arrow{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;top:calc(55px + var(--rival-art-height)/2)}
  #app #opponent-screen .rival-arrow.previous{left:-50px}
  #app #opponent-screen .rival-arrow.next{right:-50px}
}

/* Let wide setup screens use both the available height and width. Pickers keep
   their compact overview and independent scrolling list. */
@media(orientation:landscape){
  #app #character-screen .equipment-content{width:min(1600px,100%)}
  #app #character-screen .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-summary{
    flex:1;min-height:200px;
  }
  #app #character-screen .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-card{
    min-height:0;
  }
  #app #character-screen .equipment-content:not(:has(.equipment-picker:not([hidden]))) .equipment-model-stage{
    flex:1;height:auto;min-height:80px;
  }
  #app #character-screen .equipment-summary .racket-preview{max-width:100%}
}

/* Size the difficulty cards as a group; keep the painted shapes proportional. */
#app #difficulty-screen .setup-content{
  /* Reserve room for the frame glow inside the scrolling container. */
  container-type:size;width:min(1064px,100%);padding:16px 56px 24px;justify-content:center;
}
#app #difficulty-screen .difficulty.setup-choices{
  --difficulty-card-height:min(380px,calc(100cqh - 36px),calc((100cqw - 52px) / 3 * 1.22));
  flex:none;min-height:0;width:calc(var(--difficulty-card-height) * 3 / 1.22 + 52px);
  height:var(--difficulty-card-height);margin:0;padding:0;gap:26px;grid-template-rows:minmax(0,1fr);
}
#app #difficulty-screen .difficulty .diff-card{
  position:relative;height:100%;min-height:0;max-height:none;justify-content:center;
  padding:24px 28px 42px;gap:12px;
}
#app #difficulty-screen .difficulty .diff-card::before{background-size:contain}
#app #difficulty-screen .diff-face{width:64px;height:64px}
#app #difficulty-screen .diff-copy{gap:8px}
#app #difficulty-screen .difficulty-note{
  display:grid;right:4px;bottom:-16px;transform:rotate(-6deg);width:154px;
  grid-template-columns:44px minmax(0,1fr);padding:7px 8px;font-size:14px;
}
#app #difficulty-screen .note-skull{width:44px;height:46px}
#app #difficulty-screen .difficulty-note b{font-size:18px}
#app #difficulty-screen .difficulty-note::before{left:55px}
#app #difficulty-screen .selection-mark{top:18px;right:18px;width:30px;height:30px;font-size:21px}
@media(max-height:540px) and (orientation:landscape){
  #app #difficulty-screen .setup-content{padding:8px 48px 16px}
  #app #difficulty-screen .difficulty.setup-choices{
    --difficulty-card-height:min(300px,calc(100cqh - 26px),calc((100cqw - 24px) / 3 * 1.22));
    width:calc(var(--difficulty-card-height) * 3 / 1.22 + 24px);gap:12px;
  }
  #app #difficulty-screen .difficulty .diff-card{padding:12px 14px 40px;gap:5px}
  #app #difficulty-screen .diff-face{width:32px;height:32px}
  #app #difficulty-screen .diff-copy{gap:3px}
  #app #difficulty-screen .diff-card strong{font-size:20px;line-height:1.1}
  #app #difficulty-screen .diff-kicker{font-size:9px;padding:2px 5px}
  #app #difficulty-screen .diff-text{font-size:11px;line-height:1.3;margin:0}
  #app #difficulty-screen .pips{height:16px}
  #app #difficulty-screen .difficulty-note{right:-4px;bottom:-14px;width:116px;grid-template-columns:28px minmax(0,1fr);padding:4px 5px;font-size:10px}
  #app #difficulty-screen .difficulty-note b{font-size:13px}
  #app #difficulty-screen .note-skull{width:28px;height:30px}
  #app #difficulty-screen .difficulty-note::before{left:42px;width:28px;height:10px;top:-5px}
  #app #difficulty-screen .selection-mark{width:22px;height:22px;font-size:15px;top:10px;right:12px}
}
@media(max-width:760px) and (orientation:portrait){
  #app #difficulty-screen .setup-content{padding:8px 10px 14px}
  #app #difficulty-screen .difficulty.setup-choices{
    width:100%;height:auto;flex:none;grid-template-rows:auto auto auto;gap:12px;
  }
  #app #difficulty-screen .difficulty .diff-card{
    height:clamp(90px,16cqh,112px);padding:12px 20px;gap:12px;justify-content:flex-start;
  }
  #app #difficulty-screen .difficulty .diff-card[data-level="pro"]{
    height:calc(clamp(90px,16cqh,112px) + 48px);padding-bottom:60px;
  }
  #app #difficulty-screen .diff-card .diff-face{width:44px;height:44px}
  #app #difficulty-screen .diff-copy{gap:3px}
  #app #difficulty-screen .diff-card strong{font-size:21px;line-height:1.1}
  #app #difficulty-screen .diff-text{font-size:11px;line-height:1.35}
  #app #difficulty-screen .difficulty-note{right:12px;bottom:6px;width:124px;grid-template-columns:28px minmax(0,1fr);padding:4px 6px;font-size:10px}
  #app #difficulty-screen .difficulty-note b{font-size:13px}
  #app #difficulty-screen .note-skull{width:28px;height:30px}
  #app #difficulty-screen .difficulty-note::before{left:45px;width:30px;height:10px;top:-5px}
  #app #difficulty-screen .selection-mark{width:22px;height:22px;font-size:15px;top:8px;right:8px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:620px){
  #app #difficulty-screen .difficulty.setup-choices{gap:8px}
  #app #difficulty-screen .difficulty .diff-card{height:80px;padding:10px 18px}
  #app #difficulty-screen .difficulty .diff-card[data-level="pro"]{height:128px;padding-bottom:58px}
  #app #difficulty-screen .diff-card .diff-face{width:38px;height:38px}
  #app #difficulty-screen .diff-card strong{font-size:19px}
  #app #difficulty-screen .diff-text{font-size:10px;line-height:1.3}
}
#app[data-touch="true"] .touch-actions :is(#touch-lob,#touch-drop){
  font-family:var(--font-display);font-weight:400;font-size:14px;line-height:1;
  letter-spacing:.1px;white-space:nowrap;transition:filter .12s ease,scale .12s ease;
}
#app[data-touch="true"] .touch-actions :is(#touch-lob,#touch-drop)[aria-pressed="true"]{
  filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 4px #ffb33399);scale:.95;
}
#app .touch-actions #touch-serve{background-image:url('./mobile-controls/serve.svg')}