/* Game HUD: landscape phones use a bounded stage, other screens remain scrollable. */
:root{color-scheme:dark;--hud:#09162beb;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
body{background:radial-gradient(ellipse at top right,#20395e,#0b1730 65%)}
button,a{touch-action:manipulation}
.nav-item .nav-label{font:inherit;width:auto;text-align:inherit}
.screen-button{min-width:44px;min-height:44px;border:1px solid #596685;color:var(--gold);font-size:23px;border-radius:8px}
.topbar{background:var(--hud)}
.wallet,.account-button,.tag{border-radius:6px}
.account-button{min-height:44px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.banner{border-radius:12px 12px 0 0}
.ritual-panel{border-radius:0 0 12px 12px}
.pull{border-radius:8px;box-shadow:0 4px 14px #0003}
.character-card{border-radius:8px}
.filters button{min-height:44px;border-radius:6px}
.text-button{min-height:44px;display:inline-flex;align-items:center}
dialog{border-radius:12px;max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding-top:48px}
.close-dialog{width:44px;height:44px;top:4px;right:6px;z-index:3;background:#10213fe8;border-radius:8px}
.auth-links button{min-height:44px}
.continue-button{position:sticky;bottom:0;z-index:2;min-height:44px;box-shadow:0 0 20px #09162b}
.orientation-tip{display:none;color:var(--muted);font-size:11px;margin:0 0 14px;align-items:center;gap:8px}
.orientation-tip span{font-size:20px;color:var(--gold)}
@media(max-width:760px) and (orientation:portrait){
 .orientation-tip{display:flex}.topbar{padding:0 12px}.sidebar{padding-inline:12px}
 .sidebar nav{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible}
 .nav-item{flex-direction:column;justify-content:center;gap:2px;padding:8px 2px;min-height:58px;font-size:10px}
 .nav-item>span:first-child{font-size:22px}.wallet small{display:none}
 .account-button{max-width:145px}.banner{min-height:390px}.banner-copy{padding:28px 20px}
 .pull{min-height:70px}.screen-button{flex-shrink:0}
}
@media(orientation:landscape) and (max-height:600px) and (max-width:1400px){
 html,body{height:100%;overflow:hidden}
 .app-shell{display:flex;width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;padding-left:var(--safe-left);padding-right:var(--safe-right);padding-bottom:env(safe-area-inset-bottom,0px)}
 .sidebar{width:86px;padding:8px 5px;display:flex;border-right:1px solid var(--line);border-bottom:0;background:#081226;overflow-y:auto;flex-shrink:0}
 .brand{justify-content:center;gap:0;font-size:0}.brand-mark{font-size:30px}.brand>span:last-child{display:none}
 .chapter,.sidebar-bottom{display:none}
 .sidebar nav{display:flex;flex-direction:column;gap:4px;margin:6px 0 0;overflow:visible}
 .nav-item{display:flex;flex-direction:column;justify-content:center;gap:1px;min-height:52px;padding:5px 2px;font-size:10px;white-space:normal;text-align:center;border:1px solid transparent;border-radius:8px}
 .nav-item>span:first-child{font-size:21px;width:auto;line-height:1.1}.nav-item small{display:none}
 .nav-item.active{border:1px solid #ad925566;background:linear-gradient(135deg,#ddbd762b,#ddbd7605)}
 .main-shell{display:flex;flex-direction:column;min-height:0;min-width:0}
 .topbar{height:48px;min-height:48px;padding:0 12px;gap:8px;border-bottom-color:#ddbd7633}
 .breadcrumb{display:block;font-size:8px;letter-spacing:1px}.breadcrumb>b{display:inline}.breadcrumb>span{display:inline;margin:0 6px}
 .wallet{padding:4px 10px;gap:7px;margin-left:auto;margin-right:0}.wallet small{font-size:9px}.crystal{font-size:16px}
 .account-button{padding:6px 10px;font-size:10px;max-width:140px}.screen-button{border:0}
 main{flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:10px 12px;overflow:auto;overscroll-behavior:contain}
 .view{min-height:100%}.page-heading{margin:0 0 12px;gap:8px}.page-heading h1{font-size:22px}.page-heading .tag{display:inline-flex}
 #summon-view{height:100%;min-height:248px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 32px 76px;position:relative}
 #summon-view>.page-heading,#summon-view>.orientation-tip,#summon-view>.roster-heading,#preview-roster,#summon-view>.bottom-note{display:none}
 .banner{height:100%;min-height:0;border-radius:10px 10px 0 0}
 .banner-art{object-position:70% 46%;opacity:1}
 .banner:after{background:linear-gradient(90deg,#08152df5,#08152d96 38%,transparent 75%)}
 .banner-copy{height:100%;width:60%;padding:12px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
 .banner-kicker{font-size:7px;letter-spacing:1.8px}.banner h2{font-size:clamp(23px,4.2vh,36px);line-height:1.2;margin:8px 0}
 .banner h2>span{font-size:8px;letter-spacing:2px;margin-top:7px}
 .banner-copy>p,.featured p,.banner-number{display:none}
 .stars{font-size:9px;letter-spacing:2px}.featured h3{font-size:14px;margin:3px 0}
 #show-featured{font-size:10px;min-height:36px;padding:0;border:0}.art-label{font-size:6px;top:10px;right:10px}
 .daily-reward{padding:4px 12px;gap:8px;flex-wrap:nowrap;min-width:0}.daily-icon{font-size:17px}.daily-reward strong{font-size:10px}.daily-reward p{display:none}
 .daily-reward #daily-status{font-size:9px;margin-left:auto;white-space:normal;text-align:right}
 .ritual-panel{padding:8px 12px;display:grid;grid-template-columns:minmax(140px,.85fr) minmax(275px,1.6fr);gap:14px;align-items:center;min-width:0}
 .pity-block{min-width:0}.pity-label{font-size:10px}.progress-track{margin-top:6px}.pity-block p{margin-top:4px;font-size:9px;line-height:1.3}
 .pity-block p button{float:none;display:block;font-size:9px;min-height:24px;text-align:left}
 .summon-actions{display:grid;grid-template-columns:1fr 1.45fr;min-width:0;gap:8px}
 .pull{min-width:0;min-height:56px;padding:7px 12px}.pull>span{font-size:13px}.pull>small{font-size:10px;margin-top:4px}.pull i{display:block;margin:3px 0 0;font-size:8px}.pull b{display:none}
 footer{display:none}.filters{margin:10px 0;gap:8px}.collection-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
 .collection-grid .character-card img{height:140px}.card-meta strong{font-size:11px}
 dialog{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 32px);max-height:calc(100dvh - 16px);padding:40px 22px 16px}
 .detail{grid-template-columns:150px 1fr;gap:20px}.detail img{width:150px;max-height:220px;object-fit:cover}.detail h2{font-size:22px;margin:8px 0}.detail p{font-size:12px}
 #result-dialog{width:960px}.result-header{margin:0 0 12px}.result-header h2{font-size:19px;margin:4px 0}.result-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
 .result-grid img{height:115px}.result-grid.single{grid-template-columns:150px}.result-grid.single img{height:150px}.continue-button{margin:12px auto 0;padding:9px 30px}
 #account-dialog{width:500px}.ritual-circle{width:130px;height:130px;font-size:85px}#ritual-overlay p{margin-top:20px}#skip-ritual{bottom:12px;min-height:44px}
 #toast{bottom:12px;padding:9px 18px}
}
@media(orientation:landscape) and (max-height:370px) and (max-width:1400px){
 .sidebar{width:76px}.brand{display:none}.sidebar nav{margin:0}.nav-item{min-height:48px}
 .banner h2{font-size:22px}.banner-kicker,.banner h2>span,.stars{display:none}.banner-copy{padding:8px 16px}
 .topbar{height:44px;min-height:44px}.breadcrumb{display:none}main{padding:6px 8px}#summon-view{min-height:220px}
}