/* Keep the desktop composition; prevent intrinsic grid widths from clipping mobile content. */
.hero-section > *, .section-box > *, .arena-card, .header-auth { min-width: 0; }
@media(max-width:900px){
 .hero-section,.section-box{grid-template-columns:minmax(0,1fr)}
 .hero-title,.hero-desc,.hero-badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .arena-card{width:100%;max-width:100%}
}
@media(max-width:620px){
 header{padding:16px 12px!important;max-width:100%}
 .header-auth{flex-wrap:wrap;gap:10px;max-width:100%}
 .header-auth a,.web-store-button{max-width:100%;white-space:normal;text-align:center}
 .hero-section{width:calc(100% - 24px);padding:24px 16px;gap:24px}
 .hero-title{font-size:clamp(27px,7.5vw,38px);letter-spacing:-.8px;line-height:1.2}
 .hero-badge{font-size:11px;padding:8px 10px}
 .hero-desc{font-size:16px;line-height:1.6}
 .hero-btns{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
 .hero-btns a{width:100%;min-width:0;padding:14px 12px;white-space:normal;text-align:center}
 .hero-mini-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .hero-mini-steps span{white-space:normal;padding:10px 6px;font-size:12px}
 .section-box{width:calc(100% - 24px);padding:24px 14px;min-width:0}
 #hero-3d-container{display:flex;flex-direction:column;height:auto;min-width:0;margin-bottom:24px}
 #quest-overlay-panel{position:relative;inset:auto;order:0;width:auto;max-width:100%;margin:10px;padding:12px;flex:none}
 #hero-3d-canvas{order:1;height:340px;min-height:340px;width:100%;flex:none}
 #hero-3d-canvas canvas{display:block;max-width:100%}
 .quest-item{min-width:0}.quest-item>*{min-width:0}.quest-badge{flex-shrink:0}
 .quest-header{gap:8px;flex-wrap:wrap}
}
@media(max-width:360px){.hero-mini-steps{grid-template-columns:minmax(0,1fr)}}