/* Wide screens (owner request, RD-085): tablets, unfolded foldables and desktop browsers get the room they have instead
   of a phone-width column. From 720 px the shell widens and art grows; from 960 px Play and Progress use two columns;
   from 1024 px the tabs become a rail down the left side, like a desktop app. Phones are unchanged. */
@media (min-width:720px){
 .app-shell{max-width:1100px;border-inline:1px solid #ffffff10}
 .app-bar{padding-inline:24px;gap:14px}
 .app-avatar{width:50px;height:50px}
 .app-id b{font-size:19px}.app-id small{font-size:12px}
 .app-view{padding:18px 24px 30px}
 .play-view .arena-card{height:min(54vh,560px)}
 .mode-button{min-height:92px;padding:14px 18px}.mode-button b{font-size:22px}.mode-button small{font-size:13px}
 .lineup{gap:10px}
 .lineup-slot .deck-chip{grid-template-rows:104px auto}.lineup-slot .deck-chip canvas{height:104px}
 .lineup-slot.empty{min-height:130px}
 .collection-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
 .collection-grid .profile-unit canvas{height:124px}
 .profile-unit b{font-size:13px}.profile-unit small{font-size:10px}
 .unit-thumb{width:46px;height:46px}
 .track-node{flex-basis:124px;padding:10px 8px 12px}
 .track-medal{width:42px;height:42px;font-size:18px}
 .prize .ico{width:28px;height:28px}.prize-unit .unit-thumb{width:62px;height:62px}
 .level-shield{width:70px;height:70px}.level-shield b{font-size:24px}
 .progress-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;align-items:stretch}
 .progress-top>.app-card{margin-top:12px}
 .progress-top .level-card{grid-template-columns:auto minmax(0,1fr);align-content:center}
 .progress-top .level-wallet{grid-column:1/-1;justify-items:start;grid-auto-flow:column;justify-content:start;gap:14px}
 .progress-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;align-items:start}
 .progress-cols>label.app-card{grid-column:1/-1}
 .sc-stage{height:210px}
 .more-view{max-width:760px;margin:0 auto}
 .match-end{width:min(720px,100%)}
 .me-hero-art{width:80px;height:80px}
}
@media (min-width:960px){
 .play-view{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:18px;align-items:start}
 .play-main{position:sticky;top:0}
 .play-view .arena-card{height:min(62vh,660px)}
 .play-side>.app-card:first-child{margin-top:0}
 .track-node{flex-basis:136px}
 .sc-stage{height:230px}
}
@media (min-width:1024px){
 .app-shell{max-width:1320px;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"nav bar" "nav view"}
 .app-bar{grid-area:bar;padding-inline:32px}
 .app-view{grid-area:view;padding:22px 32px 36px}
 .tab-bar{grid-area:nav;grid-template-columns:1fr;grid-auto-flow:row;grid-auto-rows:96px;align-content:start;padding:calc(env(safe-area-inset-top,0px) + 12px) 0 12px;border-top:0;border-right:1px solid var(--panel-edge);background:linear-gradient(90deg,var(--ink-1),var(--ink-0))}
 .tab{font-size:12px;gap:7px}
 .tab-ico{width:34px;height:34px}
 .tab.active{background:linear-gradient(90deg,#f0cd7c1a,transparent);box-shadow:inset 3px 0 var(--gold)}
}
@media (min-width:1400px){
 .collection-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .collection-grid .profile-unit canvas{height:140px}
}