/* Last stylesheet: content must wrap within phone viewports in either language. */
.undiscovered-card:disabled{cursor:default;opacity:.6;filter:grayscale(1)}
@media(max-width:760px) and (orientation:portrait){
 html,body{width:100%;max-width:100%;overflow-x:clip}
 .app-shell,.main-shell,main,.view{min-width:0;max-width:100%;width:100%}
 .app-shell{display:block}.sidebar{width:100%;padding:12px}.main-shell{display:block}main{padding:18px 14px}
 .sidebar nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible}
 .sidebar .nav-item{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.4;min-height:66px;padding:6px 2px;text-align:center;font-size:11px;flex-direction:column}
 .sidebar .nav-item .nav-label{width:100%;white-space:normal}.nav-item small{display:none}
 .topbar{height:auto;min-height:0;display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;justify-content:flex-end}
 .topbar .breadcrumb{display:none}.topbar .gold-wallet{margin-right:auto}.topbar .wallet{margin:0;padding:8px;min-width:0}.topbar .account-button{max-width:100%;flex:1 1 100%;white-space:normal;overflow-wrap:anywhere;min-height:40px}
 .page-heading,.roster-heading{flex-wrap:wrap;gap:10px}.page-heading>*{min-width:0;max-width:100%}.page-heading h1{font-size:28px;overflow-wrap:anywhere}.page-heading p,.roster-heading a{white-space:normal;overflow-wrap:anywhere}
 .preview-roster,#preview-roster,.collection-grid,#collection-grid,.result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;overflow:visible;padding:0}
 .character-card{max-width:100%;min-width:0}.character-card .card-meta{padding:10px}.character-card .card-meta strong,.character-card .card-meta small{white-space:normal;overflow-wrap:anywhere}
 .banner-selector{grid-template-columns:minmax(0,1fr)}.banner-selector button{min-width:0}.banner{width:100%;min-height:440px}.banner .ritual-panel{grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.banner .summon-actions{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.banner .pull{padding:10px 6px}.banner .pull>span{font-size:14px;white-space:normal}
 .filters,.card-sort,.game-toolbar,.daily-reward{flex-wrap:wrap;min-width:0}.filters button{min-width:0}.roster-filters{padding:12px}.roster-filters>div{flex-wrap:wrap;min-width:0}
 .element-matrix{width:100%;table-layout:fixed;border-spacing:2px}.element-matrix th,.element-matrix td{min-width:0!important;padding:6px 1px;font-size:9px;overflow-wrap:anywhere}.element-matrix th:first-child,.element-matrix td:first-child{min-width:0!important;width:52px;position:static}
 .team-elements{padding:10px}.formation,.formation-grid,.team-presets{max-width:100%;min-width:0}
 dialog,#info-dialog:has(.character-dossier),#account-dialog{min-width:0;max-width:calc(100vw - 24px);overflow-wrap:anywhere}
 #tutorial-dialog{inset:auto 12px 12px;box-sizing:border-box;width:auto;min-width:0;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:18px;overflow:auto}
 #tutorial-dialog h2{font-size:23px}#tutorial-dialog p{font-size:14px;line-height:1.65}#tutorial-dialog footer{flex-wrap:wrap;gap:8px}#tutorial-dialog footer>div{flex-wrap:wrap;justify-content:flex-end}#tutorial-dialog footer button{padding:8px 10px}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1400px){
 .topbar{height:auto;min-height:48px;flex-wrap:wrap}.topbar .breadcrumb{display:none}.topbar .account-button{max-width:150px}.topbar .wallet small{display:none}
 .preview-roster,#preview-roster{grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
 .card-meta strong,.nav-label{white-space:normal;overflow-wrap:anywhere}
}

.formation-slot img{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 10%}
