/* Keep character artwork on the in-game sprite grid at every display size. */
#app :is(.vs-face img,.pause-face img,.diff-face,.event-duel img){image-rendering:pixelated}
/* Fit the complete artwork, including ears and horns, inside each pause slot. */
#app .pause-face img{position:static;display:block;width:100%;height:100%;object-fit:contain;transform:none}
/* Respect source direction so the two players always look toward each other. */
#app .pause-face:not(.rival) img[data-facing="left"],
#app .pause-face.rival img[data-facing="right"]{transform:scaleX(-1)}
#app .pause-face.rival img[data-facing="left"]{transform:none}
#app #difficulty-screen .diff-card[data-level="pro"] .diff-face{filter:drop-shadow(0 0 12px #ff4938aa)}

/* Portrait phones: reserve one header row, then scroll choices from their start.
   Keep these rules after the shared comic theme and the rival deck. */
@media(max-width:759px) and (orientation:portrait){
  #app .rally-title{display:none}
  #app{--phone-top:calc(10px + env(safe-area-inset-top));--phone-bottom:calc(12px + env(safe-area-inset-bottom))}
  #app .topbar{height:calc(64px + env(safe-area-inset-top));padding:var(--phone-top) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));align-items:flex-start}
  #app .header-actions,#app[data-touch="true"] .header-actions{display:flex;flex-direction:row;align-items:center;gap:6px;margin-left:auto}
  #app .header-actions :is(.icon-button,#pause){width:48px;height:48px;min-width:48px;min-height:48px;max-width:48px;padding:13px;flex-shrink:0}
  #app .header-actions svg{width:22px;height:22px}
  #app:not([data-tutorial="true"]):not(:has(.screen:not([hidden]),#online-panel:not([hidden]))) .header-actions{
    position:static;flex-direction:row;align-items:center;
  }
  #app:not([data-tutorial="true"]):not(:has(.screen:not([hidden]),#online-panel:not([hidden]))) .callout{
    left:50%;max-width:calc(100% - 24px);
  }
  #app:not([data-tutorial="true"]):not(:has(.screen:not([hidden]),#online-panel:not([hidden]))) .rally-label{
    right:12px;top:calc(146px + env(safe-area-inset-top));
  }

  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen).setup-screen{
    padding:calc(66px + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) var(--phone-bottom) max(14px,env(safe-area-inset-left));
    grid-template-rows:auto minmax(0,1fr) auto;gap:10px;
  }
  #app .setup-screen .setup-head{width:100%;padding:0;gap:4px}
  #app .setup-screen .setup-head h2{font-size:clamp(23px,6.3vw,29px);line-height:1.15;text-wrap:balance}
  #app .setup-screen .setup-steps{align-self:center;gap:2px}
  #app #arena-screen .setup-steps{align-self:center}
  #app .setup-screen .setup-step{height:32px}
  #app .setup-screen button.setup-step{height:44px;min-width:44px}
  #app .setup-screen .setup-chips{gap:5px;margin:0}
  #app .setup-screen .setup-chips li{font-size:11px;padding:3px 9px}
  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen) .setup-content{
    align-self:stretch;align-content:start;justify-content:flex-start;width:100%;margin:0;
    padding:10px 8px 18px;scroll-padding:10px 8px 18px;overflow-x:hidden;overflow-y:auto;
  }
  #app .setup-screen .setup-footer{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;padding-top:4px}
  #app :is(#character-screen,#opponent-screen,#difficulty-screen,#arena-screen,#length-screen) .setup-footer :is(.text-button,.primary){
    height:62px;min-height:62px;padding:16px 10px 16px;font-size:14px;gap:7px;
  }
  #app #character-screen #online-skin-footer{grid-template-columns:1fr}

  #app #character-screen .character-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #app #character-screen .character-option{
    --figure-height:clamp(74px,11dvh,104px);width:100%;height:clamp(150px,22dvh,186px);min-height:0;
    padding:22px 10px 28px;gap:4px;
  }
  #app #character-screen .fighter-stage{height:clamp(88px,13dvh,116px);min-height:0;flex-shrink:0}
  #app #character-screen .character-option strong{font-size:clamp(17px,4.6vw,21px)}
  #app #character-screen .selection-mark{width:24px;height:24px;font-size:17px;border-width:2px;top:14px;right:10px}

  /* Three little challenge tickets, with room for the taped warning. */
  #app #difficulty-screen .difficulty.setup-choices{grid-template-columns:1fr;width:100%;margin:0;padding:6px 2px 26px;gap:17px}
  #app #difficulty-screen .difficulty .diff-card{
    display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;justify-content:stretch;
    width:100%;height:auto;min-height:128px;padding:13px 18px 13px 12px;gap:12px;
    background:radial-gradient(circle at 14% 38%,#ffffff99 0 34px,transparent 35px),var(--level-tint);border:3px solid var(--brand-ink);border-radius:22px 12px 20px 14px;
    box-shadow:0 4px 0 var(--brand-ink),inset 0 0 0 3px #fff7;overflow:visible;transform:rotate(-1deg);
  }
  #app #difficulty-screen .diff-card[data-level="club"]{transform:rotate(1deg)}
  #app #difficulty-screen .diff-card[data-level="pro"]{padding-bottom:38px;transform:rotate(-.7deg)}
  #app #difficulty-screen .diff-card[aria-pressed="true"]{outline:3px solid var(--brand-ball);outline-offset:3px}
  #app #difficulty-screen .diff-card::before{content:none}
  #app #difficulty-screen .diff-card .diff-face{width:64px;height:64px;object-fit:contain}
  #app #difficulty-screen .diff-card .diff-copy{align-items:flex-start;text-align:left;width:100%;gap:4px}
  #app #difficulty-screen .diff-card strong{font-size:24px;line-height:1.1}
  #app #difficulty-screen .diff-card .diff-kicker{font-size:9px;padding:2px 6px;letter-spacing:.7px}
  #app #difficulty-screen .diff-card .pips{position:absolute;right:0;top:28px;height:17px;gap:3px}
  #app #difficulty-screen .diff-card .pips b{width:8px;border-width:1.5px}
  #app #difficulty-screen .diff-card .pips b:nth-child(2){height:13px}
  #app #difficulty-screen .diff-card .pips b:nth-child(3){height:17px}
  #app #difficulty-screen .diff-text{font-size:13px;line-height:1.4;margin:2px 0 0;padding:0;color:var(--brand-ink)}
  #app #difficulty-screen .selection-mark{width:22px;height:22px;font-size:15px;border-width:2px;top:8px;right:8px}
  #app #difficulty-screen .difficulty-note{position:absolute;right:10px;bottom:-18px;grid-template-columns:39px auto;width:144px;gap:5px;padding:7px 9px;transform:rotate(-7deg);font-size:12px;border-radius:1px 2px 9px 2px;border:1px solid #43125344;box-shadow:2px 4px 0 #43125333}
  #app #difficulty-screen .difficulty-note::before{content:"";left:48px;top:-6px;width:42px;height:13px;transform:rotate(5deg)}
  #app #difficulty-screen .difficulty-note-copy{flex-direction:column;gap:0;font-family:var(--font-body,"Nunito",sans-serif);font-weight:900}
  #app #difficulty-screen .difficulty-note b{font-size:16px;line-height:1.1}
  #app #difficulty-screen .note-skull{width:39px;height:41px;transform:rotate(5deg)}

  #app #opponent-screen .opponent-content{padding:16px 29px 28px;scroll-padding:16px 29px 28px}
  #app #opponent-screen .rival-collectible{width:min(350px,100%);--rival-art-height:clamp(140px,23dvh,195px);padding:0}
  #app #opponent-screen .rival-sheet{padding:12px;gap:8px}
  #app #opponent-screen .fighter-name{font-size:25px}
  #app #opponent-screen .rival-arrow{width:56px;height:56px;min-width:56px;min-height:56px;padding:14px;top:calc(64px + var(--rival-art-height)/2);filter:drop-shadow(0 3px 0 var(--brand-ink))}
  #app #opponent-screen .rival-arrow.previous{left:-29px}
  #app #opponent-screen .rival-arrow.next{right:-29px}
  #app #opponent-screen .rival-traits li{font-size:12px;line-height:1.4}

  #app #arena-screen .arena-options{gap:14px;grid-template-rows:max-content max-content;align-items:start}
  #app #arena-screen .arena-stage{aspect-ratio:16/9;min-height:0;max-height:220px}
  #app #arena-screen .arena-caption{inset:auto 12px 12px}
  #app #arena-screen .arena-caption strong{font-size:21px}
  #app #arena-screen .arena-caption>span{font-size:12px;line-height:1.4}
  #app #arena-screen .arena-side{gap:12px}
  #app #arena-screen .arena-side .time-mode{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #app #arena-screen .arena-side .time-mode button{min-height:68px;padding:10px;gap:7px}
  #app #arena-screen [data-time-of-day="superdark"]{grid-column:auto}
  #app #arena-screen .time-copy strong{font-size:13px}
  #app #arena-screen .time-copy small{font-size:11px;line-height:1.3}
  #app #length-screen .length-options{gap:18px;justify-content:safe center}
  #app #length-screen .setup-choices{width:100%;gap:12px}
  #app #length-screen .setup-choices button{min-height:100px;padding:24px;font-size:19px}

  #app #welcome{--home-button-height:92px;gap:12px;padding:calc(66px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) var(--phone-bottom) max(18px,env(safe-area-inset-left));justify-content:safe center}
  #app #welcome .home-links{gap:10px;width:min(380px,100%)}
  #app #welcome .home-links button{padding:20px 16%;font-size:16px}
  #app #welcome .game-logo{width:min(240px,24dvh,70vw)}
  #app #welcome .presented{gap:3px}
  #app #welcome .presented img{width:110px}

  /* Score and actions share one row; no column of icons over the court. */
  #app .scoreboard,#app[data-touch="true"] .scoreboard,#app[data-touch="true"] .scoreboard[data-mode="set"]{
    left:max(12px,env(safe-area-inset-left));top:var(--phone-top);transform:none;
    width:min(204px,calc(100% - 180px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;
  }
  #app .scoreboard .score-header{font-size:8px;padding:4px 8px;letter-spacing:.4px}
  #app .scoreboard .score-row{min-height:25px;padding:2px 8px;gap:6px}
  #app .scoreboard .player-name{font-size:10px;letter-spacing:.3px;min-width:0}
  #app .scoreboard strong{font-size:22px}
  #app .scoreboard .score-footer{padding:3px 8px;font-size:8px}
  #app .callout{top:calc(106px + env(safe-area-inset-top));margin:0;max-width:calc(100% - 24px)}
  #app .callout strong{font-size:clamp(20px,6vw,26px)}
  #app .rally-label{top:calc(146px + env(safe-area-inset-top));margin:0;right:12px}
  #app .series-score{top:calc(180px + env(safe-area-inset-top));left:12px}

  #app[data-touch="true"] .touch-controls{bottom:calc(18px + env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
  #app[data-touch="true"] #stick{width:104px;height:104px}
  #app[data-touch="true"] .touch-actions{grid-template-columns:72px 72px;grid-template-rows:72px 72px;gap:0;max-width:100%;align-self:end}
  #app[data-touch="true"] .touch-actions :is(#touch-lob,#touch-drop){width:72px;height:72px;padding:16px;font-size:12px}
  #app[data-touch="true"] .touch-actions #touch-lob{grid-column:2;grid-row:1;transform:translateY(9px)}
  #app[data-touch="true"] .touch-actions #touch-drop{grid-column:1;grid-row:2;transform:translateX(7px)}
  #app[data-touch="true"] .touch-actions :is(#touch-lob,#touch-drop):active{scale:.94}
  #app[data-touch="true"] #touch-controls[data-serving="true"] .touch-actions{grid-template-columns:136px;grid-template-rows:88px}
  #app[data-touch="true"] .touch-actions #touch-serve{grid-column:1;grid-row:1;width:136px;height:88px;padding:18px 12px;font-size:14px}
  #app[data-touch="true"] .contact-hint{bottom:calc(138px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 24px);font-size:12px}
  #app[data-touch="true"] .serve-meter{bottom:calc(188px + env(safe-area-inset-bottom));width:min(300px,calc(100% - 32px))}
  #app[data-touch="true"] .serve-meter span{font-size:17px}
  #app[data-touch="true"] .coach{top:calc(104px + env(safe-area-inset-top));width:calc(100% - 24px)}
  #app[data-touch="true"] .coach-text strong{font-size:20px}
}