/* Container overrides; original downloaded styles and art remain unchanged. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Keep touch targets usable after the game's landscape viewport scaling. */
html.touch #ui button{touch-action:manipulation}
html.touch #ui .scr-head>.btn,html.touch #ui .ls-seg .pill,html.touch #ui .ls-random{min-height:44px}
/* The translated filter labels must share the roster's width, not widen it. */
#ui .ls-roster-head{flex-wrap:wrap;min-width:0}
#ui .ls-seg{min-width:0;max-width:100%;flex:1 1 240px;box-sizing:border-box}
#ui .ls-seg .pill{min-width:0;flex:1 1 auto;justify-content:center;padding-inline:8px;white-space:normal;text-align:center}
#ui .ls-random{flex:0 0 auto;justify-content:center}
#ui .ls-roster{min-width:0}
#ui .sp-card{align-items:stretch;min-width:0}
#ui .sp-show{width:100%;flex:none;box-sizing:border-box}
#ui .sp-show .ls-stage{inset:8px 10px 82px;align-items:center;justify-content:center}
#ui .sp-show .ls-spr{width:auto;height:auto;max-width:88%;max-height:100%;object-fit:contain;translate:0 0;flex:none}
#ui .sp-show .ls-pedestal{bottom:-8px;height:34px}
#ui .sp-show .ls-plate{z-index:2;max-width:calc(100% - 32px);box-sizing:border-box}
/* Taller landscape windows must share the card between artwork and details.
   A 100% artwork height plus flex:none clips the details; stretching the row
   to the viewport also produces excessively tall cards. Short phone layouts
   keep their existing sizing. */
@media (min-height:561px) and (orientation:landscape){
  #ui .screen.sp{grid-template-rows:auto minmax(0,400px) auto;align-content:center}
  #ui .sp-row{max-height:400px;align-self:center}
  #ui .sp-show{height:auto;flex:1 1 0;min-height:0}
  #ui .sp-info{flex:0 0 auto}
}
#ui .card.offer{align-items:stretch;min-width:0}
#ui .card.offer>.top{width:100%;flex:none;box-sizing:border-box;isolation:isolate}
#ui .card.offer>.top>img,#ui .card.offer>.top>.typeicon{flex:none;object-fit:contain;aspect-ratio:1}
#ui .card.offer>.top>.typeicon>img{display:block;width:100%;height:100%;object-fit:contain}
#ui .card.offer>.top::after{pointer-events:none}
/* Tutorial stays in document flow instead of covering the reward artwork. */
#ui .local-level-up>.run-hint{position:relative;inset:auto;transform:none;flex:none;animation:none;margin:0;max-width:min(600px,100%);width:auto;box-sizing:border-box;pointer-events:auto}
#ui .local-level-up>.cards{flex:none;max-width:100%}
@media(max-height:560px) and (orientation:landscape){
  /* Flow the header and menu so a short viewport can scroll without overlap. */
  #ui .mm:not(.auth){display:block;overflow-y:auto;overflow-x:hidden;padding:0}
  #ui .mm:not(.auth) .mm-top{position:relative;inset:auto;zoom:1;flex-wrap:wrap;gap:6px;margin:8px max(14px,var(--sr)) 0 max(14px,var(--sl))}
  #ui .mm:not(.auth) .trainer{min-width:0;max-width:100%;box-sizing:border-box;flex-wrap:wrap;gap:6px}
  #ui .mm:not(.auth) .mm-top button{min-height:44px;min-width:44px}
  /* These cloud shortcuts are disabled in this device-only edition. */
  #ui .mm:not(.auth) .trainer .tr-mail{display:none}
  #ui .mm:not(.auth) .tr-tx{min-width:0;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #ui .mm:not(.auth) .mm-left{position:relative;inset:auto;transform:none;width:auto;margin:14px max(20px,var(--sr)) 0 max(20px,var(--sl));display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,2fr);align-items:center;gap:16px}
  #ui .mm:not(.auth) .mm-left>.logo.hero{min-width:0;margin:0;align-self:center}
  #ui .mm:not(.auth) .mm-left .logo.hero .logo-word{font-size:clamp(26px,4.2vw,42px)}
  #ui .mm:not(.auth) .logo>.logo-ver{position:relative;inset:auto;margin-top:12px;max-width:100%;font-size:11px;white-space:normal}
  #ui .mm:not(.auth) .mm-nav{min-width:0;gap:8px}
  #ui .mm:not(.auth) .mm-item{min-width:0;min-height:44px;transform:none}
  #ui .mm:not(.auth) .mm-item.play{padding:8px;min-height:64px}
  #ui .mm:not(.auth) .mm-item.play b{font-size:22px}
  #ui .mm:not(.auth) .mm-item.play .mm-ic{width:36px;height:36px}
  #ui .mm:not(.auth) .mm-item.play .mm-ic img{width:30px;height:30px}
  #ui .mm:not(.auth) .mm-item.endless{flex-basis:100px;padding:4px;min-height:64px}
  #ui .mm:not(.auth) .mm-item.endless .mm-ic{display:none}
  #ui .mm:not(.auth) .mm-item.play .mm-tx small{font-size:10px}
  #ui .mm:not(.auth) .mm-tx{min-width:0}
  #ui .mm:not(.auth) .mm-tx b{overflow-wrap:anywhere}
  #ui .mm:not(.auth) .mm-small{flex-wrap:wrap}
  #ui .mm:not(.auth) .mm-foot{position:relative;inset:auto;width:auto;max-width:none;align-items:center;margin:20px max(20px,var(--sr)) calc(72px + var(--sb)) max(20px,var(--sl))}
  #ui .mm:not(.auth) .mm-foot .mm-legal{text-align:center;font-size:10px}
  #ui .screen.sp{padding:8px 18px;gap:8px;justify-content:flex-start;box-sizing:border-box;overflow-y:auto}
  #ui .sp-head small{font-size:10px;letter-spacing:1px}
  #ui .sp-head h1{font-size:28px;margin:2px 0 4px}
  #ui .sp-head p{font-size:11px;line-height:1.3;max-width:620px}
  #ui .sp-row{grid-template-columns:repeat(3,minmax(0,260px));gap:12px;flex:none}
  #ui .sp-show{height:clamp(148px,calc(100svh - 160px),260px);min-height:0}
  #ui .sp-show .ls-plate{bottom:8px;left:10px;padding:5px 12px;gap:2px;transform:none;animation:none}
  #ui .sp-show .ls-plate>*{transform:none}
  #ui .sp-show .ls-plate small{font-size:9px;letter-spacing:.5px}
  #ui .sp-show .ls-plate h1{font-size:20px}
  #ui .sp-show .ls-num{font-size:44px}
  #ui .sp-foot{gap:0;flex:none}#ui .sp-foot .keys{display:none}
  #ui .sp-go{min-width:240px;padding:8px 20px;font-size:16px}
  #ui .local-level-up{justify-content:flex-start;gap:8px;padding:8px max(14px,var(--sr)) 12px max(14px,var(--sl))}
  #ui .local-level-up>h1{font-size:24px;padding:3px 24px;flex:none}
  #ui .local-level-up>.cards{flex-wrap:nowrap;gap:10px;width:100%;align-items:stretch}
  #ui .local-level-up .card.offer{flex:0 1 212px;width:212px;min-width:0}
  #ui .local-level-up .card.offer>.top{height:76px;min-height:76px;padding-top:18px}
  #ui .local-level-up .card.offer>.top>img,#ui .local-level-up .card.offer>.top>.typeicon{width:42px;height:42px}
  #ui .local-level-up .card.offer .rar,#ui .local-level-up .card.offer .kind{top:5px;font-size:9px;padding:1px 7px}
  #ui .local-level-up .card.offer .bd{padding:8px 10px;gap:4px}
  #ui .local-level-up .card.offer h3{font-size:16px;overflow-wrap:anywhere}
  #ui .local-level-up .card.offer ul{font-size:12px;padding-left:15px}
  #ui .local-level-up .card.offer .sub,#ui .local-level-up .card.offer p{font-size:11px}
  #ui .local-level-up .card.offer .key{display:none}
  #ui .local-level-up>.actions{flex:none;gap:8px;flex-wrap:wrap}
  #ui .local-level-up>.run-hint{padding:4px 10px;border-radius:10px;max-width:100%}
  #ui .local-level-up>.run-hint .rh-ic{display:none}
  html.touch #ui .local-level-up{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;align-items:center;gap:6px 10px;overflow-y:auto}
  html.touch #ui .local-level-up>h1,html.touch #ui .local-level-up>.cards,html.touch #ui .local-level-up>.actions,html.touch #ui .local-level-up>.run-hint{grid-column:1/-1;justify-self:center}
  html.touch #ui .local-level-up>h1{font-size:22px;padding:2px 24px;margin:0}
  html.touch #ui .local-level-up>.row{justify-self:end;max-width:100%;flex-wrap:wrap}
  html.touch #ui .local-level-up>.pk-row{justify-self:start;margin:0;min-width:0}
  html.touch #ui .local-level-up .card.offer>.top{height:64px;min-height:64px}
  html.touch #ui .local-level-up>.actions button,html.touch #ui .local-level-up>.pk-row button{min-height:44px}
}