#mobileMatchScene{display:none;margin:0}
#tipBar{display:none!important}
body.challengeMode header .controls,body.challengeMode #matchStatus,body.challengeMode #turnTimer,body.challengeMode #turnTimerTxt,body.challengeMode #battleReport,body.challengeMode #progress,body.challengeMode #oppSkills{display:none!important}
body.challengeMode header{margin:0 0 12px;padding:0!important}body.challengeMode header h1{font-size:24px;transform:none;letter-spacing:1px;padding:8px 14px}
body.challengeMode main{padding-top:0!important}
body.challengeMode #lesson{padding:16px 20px;margin:0 0 14px;position:static!important;transform:none!important;width:100%!important;max-height:none!important;box-shadow:none}
body.challengeMode #lesson h2{font-size:21px;margin:0 0 8px;line-height:1.4}body.challengeMode #lesson p{font-size:15px;line-height:1.7;margin:0 0 6px}body.challengeMode #lesson small{font-size:12px;color:#96703c}
#legend{font-family:'Microsoft YaHei','PingFang SC',sans-serif;font-size:12px;line-height:1.7;color:#b8a88d;margin:8px 0 12px}
@media(max-width:620px){
body:not(:has(#lobby:not([hidden]))) #mobileMatchScene{display:block;aspect-ratio:1672/941;overflow:hidden;border-radius:12px;border:1px solid #b99b68;position:relative}
#mobileMatchScene img{display:block;width:100%;height:100%;object-fit:contain}
header{display:flex!important;align-items:center;justify-content:space-between;gap:10px!important;margin:0 0 12px!important;min-height:0!important;padding:0!important}header h1{font-size:20px!important;line-height:1.3!important;padding:8px 12px!important;letter-spacing:0!important;transform:none!important;margin:0!important}header .controls{gap:6px!important;flex-wrap:wrap}header .controls button{padding:8px 10px!important;min-height:38px!important;font-size:12px!important}
#boardCol{display:flex!important;flex-direction:column;gap:12px!important;min-height:0!important;justify-content:flex-start!important;padding:0!important}
#matchStatus{display:block!important;margin:0!important;min-height:0!important}#matchStatus>.panel{min-height:0!important;margin:0!important;padding:8px 12px!important;display:block!important}#chatRow,#netStatus:empty{display:none!important}
body.challengeMode #matchStatus{display:none!important}
body.challengeMode #lesson{padding:14px 16px!important;margin:0 0 12px!important}body.challengeMode #lesson h2{font-size:19px!important}body.challengeMode #lesson p{font-size:14px!important}body.challengeMode #lesson small{font-size:11px!important}
#skillPanel{padding:14px!important;min-height:0!important}#skillTitle{font-size:18px!important;margin:0 0 10px!important}#skillList{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#skillList .skill{min-height:0!important;height:auto!important;padding:12px!important;gap:8px!important;align-content:start!important;border-radius:12px!important}#skillList .skill .nm{font-size:16px!important;line-height:1.4!important}#skillList .skill .ds{font-size:12px!important;line-height:1.7!important}#skillList .cardState{font-size:11px!important;line-height:1.6;white-space:normal!important}.actorSkill .tx{min-width:0!important}.actorSkill .nm{font-size:17px!important}.actorSkill .ds{font-size:13px!important}
body.challengeMode #skillList{grid-template-columns:1fr!important}
#progress{font-size:11px!important;line-height:1.9!important;margin-top:12px!important}#oppSkills{font-size:12px!important;line-height:1.7!important}footer{padding:12px 0!important;font-size:10px!important;line-height:1.7!important}
}
@media(max-width:620px){
/* Full crowd is shown above; the interactive board gets an exact square crop. */
#boardWrap{aspect-ratio:1!important;background-size:360.344828% 202.801724%!important;background-position:49.751656% 82.599581%!important}
#boardWrap #sceneRepair,#boardWrap #sceneSkill{inset:auto!important;left:-129.525862%!important;top:-84.913793%!important;width:360.344828%!important;height:202.801724%!important;max-width:none!important}
#boardWrap #board{left:0!important;top:0!important;width:100%!important;height:100%!important}
#boardWrap #turnBadge{top:2px!important;right:2px!important;left:auto!important;font-size:11px!important;max-width:80%;padding:4px 7px!important;transform:none!important}
}
/* The legacy aside flex-basis:280px becomes a tall empty block in mobile column flow. */
@media(max-width:620px){
#boardCol>#matchStatus{flex:0 0 auto!important;flex-basis:auto!important;height:auto!important;min-height:0!important;max-height:none!important;position:static!important;top:auto!important;align-self:stretch!important;overflow:visible!important;margin:0!important;padding:0!important}
#boardCol>#matchStatus>.panel{flex:0 0 auto!important;height:auto!important;min-height:0!important;max-height:none!important}
#boardCol>#mobileMatchScene{flex:0 0 auto!important;margin:0!important}
#boardCol>#boardWrap{flex:0 0 auto!important}
#boardCol>#matchStatus:not(:has(#hint:not(:empty))):not(:has(#netStatus:not(:empty))){display:none!important}
}