.battleTop{display:grid;grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);align-items:start;width:min(960px,84vw);gap:18px;top:max(22px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%)}
.battleTop>div.health-card{width:auto;min-width:0;border:1px solid #71849442;background:#111c27ec;border-radius:14px;padding:13px 17px 10px;box-shadow:0 5px 22px #03091138}
.health-line{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:38px;text-shadow:none}
.hud-portrait{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
.health-line strong{font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#edf3f6}
.health-line>span{font-size:15px;color:#c8d7de;font-weight:600;white-space:nowrap}
.health-card .hp{height:11px;margin-top:9px;background:#060e17;border:1px solid #65768829;border-radius:6px;overflow:hidden;box-shadow:none}
.health-card .hp i{background:linear-gradient(90deg,#69b8a6,#b0e7ce);border-radius:4px;transition:width .12s linear}
.health-card.enemy .hp i{background:linear-gradient(90deg,#b77683,#e6a4a0)}
.health-card.low-health .hp i{background:#f16d79}
.health-extra{height:20px;margin-top:5px;gap:8px}
.health-extra .berry-icon{width:22px;height:22px}.health-extra .status-pill{font-size:11px;line-height:16px;padding:1px 6px}
.battleTop .timer{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px 9px;min-width:0;background:#101a25e8;border:1px solid #71849433;border-radius:12px;white-space:normal;line-height:1.2;letter-spacing:0;text-shadow:none}
#roundLabel{font-size:10px;font-weight:600;letter-spacing:1.8px;color:#9aadb9}
.round-score{display:flex;align-items:center;justify-content:center;gap:14px;line-height:1.25;font-variant-numeric:tabular-nums}
.round-score b{font-size:30px;font-weight:800;color:#b4dfcf}.round-score b:last-child{color:#e4a5aa}.round-score>span{color:#718593;font-size:17px}
#matchClock{font-size:18px;color:#e5edf1;font-weight:600;letter-spacing:1px;font-variant-numeric:tabular-nums}
#battleMenuButton{top:max(24px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:36px;height:32px;background:#152331db}
#lowHealthVignette{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;box-shadow:inset 0 0 85px 20px #c91e4666,inset 0 0 12px 3px #f0446260;transition:opacity .22s ease}
#lowHealthVignette.visible{opacity:1}
#dashButton.aiming{border:2px solid #b2dcef;box-shadow:0 0 0 7px #b2dcef18}
#battle.touch-controls{--cluster-width:248px;--cluster-height:236px;--cluster-right:max(16px,env(safe-area-inset-right));--cluster-bottom:max(20px,env(safe-area-inset-bottom));--dash-offset:99px}
#battle.touch-controls .battleBottom{left:auto;right:var(--cluster-right);bottom:var(--cluster-bottom);width:var(--cluster-width);height:var(--cluster-height);transform:none}
#battle.touch-controls #skillbar{position:relative;display:block;pointer-events:none}
#battle.touch-controls .skill{position:absolute;width:68px;height:80px;margin:0;pointer-events:auto}
#battle.touch-controls .skill-face{width:57px;height:57px}
#battle.touch-controls .skill>b{font-size:10px;margin-top:7px}
#battle.touch-controls #skill0{left:0;right:auto;bottom:0}
#battle.touch-controls #skill1{left:8px;right:auto;bottom:90px}
#battle.touch-controls #skill2{left:87px;right:auto;bottom:151px}
#battle.touch-controls #skill3{left:auto;right:0;bottom:151px}
#battle.touch-controls #skill4{left:auto;right:0;bottom:0;width:83px;height:91px}
#battle.touch-controls #skill4 .skill-face{width:75px;height:75px}
#battle.touch-controls #dashButton{left:auto;right:calc(var(--cluster-right) + var(--dash-offset));bottom:calc(var(--cluster-bottom) + 19px);width:53px;height:53px;border:1px solid #9ac6da80;background:#233a48ec;padding:5px;z-index:5}
#battle.touch-controls #dashButton b{font-size:11px}#battle.touch-controls #dashButton b::before{content:'»';display:block;font-size:24px;line-height:21px;color:#c2e4f0}
#battle.touch-controls #dashButton kbd{display:none}
#battle.touch-controls #joystick{display:none;position:fixed;width:106px;height:106px;bottom:auto;right:auto;margin:0;transform:translate(-50%,-50%);border:1px solid #aec8d865;background:#4e69772b;box-shadow:inset 0 0 18px #0b192344;pointer-events:none;z-index:4}
#battle.touch-controls #joystick.engaged{display:block}
#battle.touch-controls #joystick i{position:absolute;width:38px;height:38px;left:33px;top:33px;background:#bed4df55;border:1px solid #d3e9f199;border-radius:50%}
#battle.touch-controls #cancelCast{right:var(--cluster-right);bottom:calc(var(--cluster-bottom) + var(--cluster-height) + 16px)}
@media(max-width:800px){
 .battleTop{top:max(12px,env(safe-area-inset-top));width:calc(100% - 24px);grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:7px}
 .battleTop>div.health-card{border-radius:10px;padding:8px 9px 6px}
 .health-line{grid-template-columns:26px minmax(0,1fr);gap:2px 5px;min-height:37px}
 .hud-portrait{width:26px;height:30px;grid-row:1 / 3}
 .health-line strong{font-size:13px;line-height:18px}
 .health-line>span{font-size:11px;grid-column:2;line-height:15px}
 .health-card .hp{height:8px;margin-top:5px}.health-extra{height:17px;margin-top:3px}.health-extra .berry-icon{width:20px;height:20px}.health-extra .status-pill{font-size:9px}
 .battleTop .timer{padding:7px 3px 8px;gap:3px;border-radius:10px}.round-score{gap:8px}.round-score b{font-size:23px}#roundLabel{font-size:8px;letter-spacing:.7px}#matchClock{font-size:14px}
 #battleMenuButton{top:107px;right:12px;width:30px;height:27px}
 #lowHealthVignette{box-shadow:inset 0 0 54px 12px #c91e4666,inset 0 0 8px 2px #f0446260}
}
@media(max-width:390px){
 #battle.touch-controls{--cluster-width:228px;--cluster-height:223px;--cluster-right:12px;--dash-offset:91px}
 #battle.touch-controls .skill{width:61px;height:75px}#battle.touch-controls .skill-face{width:52px;height:52px}
 #battle.touch-controls #skill1{left:2px;bottom:84px}#battle.touch-controls #skill2{left:78px;bottom:143px}#battle.touch-controls #skill3{bottom:143px}
 #battle.touch-controls #skill4{width:77px;height:86px}#battle.touch-controls #skill4 .skill-face{width:69px;height:69px}
 #battle.touch-controls #dashButton{width:49px;height:49px}#battle.touch-controls .skill>b{font-size:9px}
 .health-line{grid-template-columns:20px minmax(0,1fr)}.hud-portrait{width:22px;height:26px}.health-line strong{font-size:12px}
}
@media(max-height:500px){
 #battle.touch-controls{--cluster-width:230px;--cluster-height:185px;--cluster-bottom:max(12px,env(safe-area-inset-bottom));--dash-offset:93px}
 #battle.touch-controls .skill{width:59px;height:69px}#battle.touch-controls .skill-face{width:47px;height:47px}
 #battle.touch-controls .skill>b{font-size:9px;margin-top:5px}#battle.touch-controls #skill1{left:2px;bottom:77px}#battle.touch-controls #skill2{left:81px;bottom:110px}#battle.touch-controls #skill3{bottom:110px}
 #battle.touch-controls #skill4{width:76px;height:79px}#battle.touch-controls #skill4 .skill-face{width:66px;height:66px}#battle.touch-controls #dashButton{width:47px;height:47px;bottom:calc(var(--cluster-bottom) + 15px)}
 #battle.touch-controls #cancelCast{right:calc(var(--cluster-right) + var(--cluster-width) + 12px);bottom:110px}
 .battleTop{width:min(620px,76vw);top:8px;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:10px}
 .battleTop>div.health-card{padding:6px 10px 4px}.health-line{grid-template-columns:26px minmax(0,1fr) auto;min-height:26px}.health-line>span{grid-column:auto;font-size:12px}.health-line strong{font-size:14px}.hud-portrait{grid-row:auto;width:26px;height:26px}.health-extra{height:17px}.health-card .hp{height:8px}
 .battleTop .timer{padding:4px 3px}.round-score b{font-size:23px}#roundLabel{font-size:8px}#matchClock{font-size:13px}#battleMenuButton{top:12px;right:12px}
}