/* Binx Depthbound mobile-first gameplay layer */
:root{--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{width:100%;overflow-x:hidden}
button,input,select{font-size:16px}
#canvas{max-height:calc(100dvh - 230px);object-fit:contain}
#touch{position:relative;z-index:8;padding:8px 4px calc(8px + var(--safe-bottom));gap:14px}
#touch button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#touch .dpad{display:grid;place-items:center;min-width:168px}
#touch .dpad>button{display:block;margin:auto}
#touch .dpad>div{display:flex;justify-content:center}
#touch .dpad button{width:54px;height:54px;min-width:54px;min-height:54px;border-radius:16px;font-size:20px}
#touch .actions{margin-left:auto;align-items:flex-end}
#touch .actions button{width:82px;height:70px;min-width:82px;border-radius:20px;font-size:12px;font-weight:800}
@media(max-width:760px){
 body:has(#game.active){background:#080d0c}
 #app{padding:8px;max-width:none}
 header{padding:6px 3px 10px}
 .panel{margin-bottom:10px}
 .panel.hero{min-height:220px}
 .hero h1{font-size:clamp(32px,12vw,52px)}
 .stats{gap:5px}.stats span{flex:1;min-width:90px;text-align:center}
 .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .card{min-width:0}
 .class-feature{flex-direction:column;text-align:center}
 .equipment-slots,.talents,.gear-grid{grid-template-columns:1fr}
 .expedition-controls{flex-direction:column}.expedition label{max-width:none}
 #game.active{min-height:100dvh}
 #game .run-header{margin:0 0 6px}
 #hud{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:6px}
 #hud span{padding:5px 4px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #hud #hudClass,#hud #blessingHud{grid-column:1/-1}
 .health-track{margin-bottom:6px}
 .arena{width:100%;overflow:hidden}
 #canvas{width:100%;height:auto;max-height:none;border-radius:8px}
 #message{height:25px;padding:4px;font-size:11px}
 #touch{display:flex;position:sticky;bottom:0;background:linear-gradient(180deg,transparent,#080d0cf2 22%);margin:0 -4px}
 .account-panel .section-heading{align-items:flex-start;flex-direction:column}
 .account-buttons{display:grid;grid-template-columns:1fr;gap:7px}
 .account-panel input{min-height:46px}
}
@media(max-width:390px){
 #touch .dpad{min-width:150px}
 #touch .dpad button{width:48px;height:48px;min-width:48px;min-height:48px}
 #touch .actions button{width:72px;min-width:72px;height:64px}
 #hud{font-size:9px}
}
@media(orientation:landscape) and (max-height:560px) and (pointer:coarse){
 #app{padding:4px 8px}
 header{display:none}
 #game .run-header{font-size:8px;margin-bottom:3px}
 #hud{display:flex;flex-wrap:nowrap;margin-bottom:3px}
 #hud #hudClass,#hud #blessingHud{flex-basis:auto}
 #blessingHud{display:none}
 .health-track{margin-bottom:3px}
 .arena{max-width:calc(100vw - 250px);margin:auto}
 #message{position:absolute;left:0;right:0;bottom:5px;pointer-events:none}
 #touch{position:fixed;inset:auto 8px calc(4px + var(--safe-bottom));8px;background:none;pointer-events:none;margin:0;padding:0}
 #touch button{pointer-events:auto;background:#17241ee8}
 #touch .dpad button{width:44px;height:44px;min-width:44px;min-height:44px}
 #touch .actions button{width:68px;height:58px;min-width:68px}
}