#expBar{display:none;position:fixed;left:0;right:0;bottom:0;height:calc(22px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);z-index:45;pointer-events:none;overflow:hidden;background:linear-gradient(#172028,#080e14);border-top:1px solid #a69365;box-shadow:0 -2px 10px #0009,inset 0 1px 0 #ffffff19;font:600 10px/21px system-ui;color:#fff2cb;text-shadow:0 1px 3px #000,0 0 4px #000}
body.playing #expBar{display:block}
#expFill{position:absolute;top:2px;bottom:calc(2px + env(safe-area-inset-bottom,0px));left:0;width:0;background:linear-gradient(180deg,#fae0a2 0%,#c49a42 30%,#8e641f 58%,#bd913b 100%);box-shadow:inset 0 1px #fff4ca80,2px 0 9px #ffdd8580;transition:width .4s ease-out}
.expTicks{position:absolute;inset:2px 0 calc(2px + env(safe-area-inset-bottom,0px));background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#07101b88 calc(10% - 1px),#07101b88 10%)}
#expLabel{position:relative;display:block;text-align:center;letter-spacing:.4px;white-space:nowrap}
body.playing #messages{bottom:calc(36px + env(safe-area-inset-bottom,0px))!important}
body.playing #pad{bottom:calc(36px + env(safe-area-inset-bottom,0px))!important}
body.playing #sword{bottom:calc(40px + env(safe-area-inset-bottom,0px))!important}
@media(max-width:480px){#expLabel{font-size:9px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){#expFill{transition:none}}