/* Phone landscape uses the entire reference canvas, not a desktop page scaled twice. */
.host-top button{color:#173b45}
.combat-slot .key{top:1px;bottom:auto;left:3px;font-size:8px;background:#f5f7f1dc;border-radius:3px;padding:0 2px}
.combat-slot .count{left:0;right:0;bottom:1px;text-align:center;font-size:9px;line-height:11px;background:#f5f7f1d9}
.camp .camp-hero{top:118px}
.skill-card .row button{min-height:44px}
.stat-row button{min-height:44px;width:44px}
.catalog-filters button,.setting-row button{min-height:44px}
.dialog .close{width:44px;min-height:44px}
.dialog{display:flex;flex-direction:column;overflow:hidden}
.dialog>header,.dialog>.actions{flex-shrink:0}
.dialog>.dialog-body{overflow:auto;min-height:0;overscroll-behavior:contain;padding-right:3px}
.dialog>.actions{padding-top:8px;border-top:1px solid #d1dcd6;background:#f5f7f1;margin-top:10px}
.dialog .item-box{padding:10px}
.dialog .item-box dl{gap:3px;margin:8px 0}
.skills-page{grid-template-rows:repeat(2,145px)}
.skill-card{min-height:0;padding:10px}
.skill-card header img{width:34px;height:34px}
.skill-card p{font-size:10px;line-height:1.45;margin:6px 0}
.skill-card header h3{margin-bottom:3px}
.skill-card .row{position:absolute;bottom:8px;left:10px;right:10px}
@media(max-height:500px){
  body{height:100dvh;overflow:hidden}
  .host-top,.host-bottom{display:none}
  .host{max-width:none}
  #frame{width:100vw;height:100dvh;aspect-ratio:auto;background:#132d36}
  #game{left:50%;top:50%;transform-origin:center;translate:-50% -50%}
}
@media(orientation:portrait) and (max-width:600px){
  .host-bottom:before{content:'请横过手机，以完整横屏比例试玩。';display:block;font-size:15px;color:#e5bd64;margin-bottom:8px}
}