body[data-chronicle] #game .skill.guard{position:absolute;left:calc(var(--edge-left,24px) + 62px);bottom:calc(var(--edge-bottom,24px) + 148px);width:54px;height:54px;z-index:8;background:#213a39e6;color:#c4ded5;border-color:#b3cabb80;pointer-events:auto}
body[data-chronicle] #game .skill.guard svg{width:24px;height:24px}
body[data-chronicle] #game .skill.guard>span{font-size:10px;bottom:-21px;white-space:nowrap}
body[data-chronicle] #game .skill.guard.active{border-color:#e4f0d6;background:#3a6257ef;box-shadow:0 0 0 2px #b6dec02e}
body[data-chronicle] #game .skill.guard .cooldown{font-size:13px}
body[data-chronicle] #game .skill.guard.counter-ready{border-color:#ead49a;color:#eddfb7}
body[data-chronicle] #game .skill.guard kbd{font-size:9px}
@media(orientation:portrait) and (max-width:600px){body[data-chronicle] #game .skill.guard{left:calc(var(--edge-left,18px) + 65px);bottom:calc(var(--edge-bottom,18px) + 145px)}}
@media(orientation:landscape) and (max-height:520px){body[data-chronicle] #game .skill.guard{left:calc(var(--edge-left,16px) + 18px);bottom:calc(var(--edge-bottom,16px) + 115px);width:46px;height:46px}}
@media(max-height:360px) and (orientation:landscape){body[data-chronicle] #game .skill.guard{left:calc(var(--edge-left,12px) + 8px);bottom:calc(var(--edge-bottom,12px) + 106px);width:44px;height:44px}}
body[data-chronicle] #game[data-mobile=true] .skill.guard{min-width:44px;min-height:44px}
/* A separate thumb target beside the stick, clear of menus and medicine. */
body[data-chronicle] #game[data-mobile=true][data-orientation=landscape] .skill.guard{left:calc(max(18px,env(safe-area-inset-left)) + 104px);bottom:calc(var(--edge-bottom,12px) + 88px);width:48px;height:48px}
body[data-chronicle] #game[data-mobile=true][data-orientation=landscape] .skill.guard>span{bottom:auto;line-height:12px}

body[data-chronicle] .damage-number.guard-number{font-size:14px;white-space:nowrap;letter-spacing:1px}
body[data-chronicle] .sp-defense-range{display:block;text-align:center;font-size:12px;line-height:1.65}
body[data-chronicle] .sp-defense-range svg{width:72px;height:54px}
body[data-chronicle] #chronicle-body .sp-defense-range figcaption{text-align:left;overflow-wrap:break-word;color:#3e5149}
body[data-chronicle] .sp-defense-range figcaption>b,body[data-chronicle] .sp-defense-range figcaption>span,body[data-chronicle] .sp-defense-range figcaption>small{display:block;margin-top:6px}
body[data-chronicle] #chronicle-body .sp-defense-range figcaption>small{font-size:12px;color:#4c5d52}
body[data-chronicle] #game.in-defense-practice.in-action-combat .quest{visibility:visible}

body[data-chronicle] #game.in-movement-practice.in-action-combat .quest{visibility:visible}

/* Keep the live weapon objective visible under the compact combat HUD. */
body[data-chronicle] #game.in-weapon-practice.in-action-combat .quest{visibility:visible}

/* Refinement keeps its actual-cast instructions visible during practice. */
body[data-chronicle] #game.in-refinement-practice.in-action-combat .quest{visibility:visible}

/* Class lessons need their next action even in the short desktop combat HUD. */
body[data-chronicle] #game.in-class-practice.in-action-combat .quest{visibility:visible}

/* Captions sit outside the button; dragging the adjacent stick must reach it. */
body[data-chronicle] #game .skill>span{pointer-events:none}