/* Rubber Sealant: interactive campaign game HUD. */
.rsp-bar{width:min(400px,calc(100vw - 16px));background:#0c0d0d var(--rsp-art,url('game-hud-bg-v2.webp')) center/cover no-repeat;border:1px solid #a18a36;border-left:0;border-radius:0 18px 18px 0;box-shadow:0 22px 65px #000d,0 0 0 3px #1c1d19,0 0 25px #ffcf0822;scrollbar-color:#ad8f24 #141512}
.rsp-bar:before{background:linear-gradient(180deg,#090a0bc2 0%,#0a0b0bd1 36%,#0b0c0bc2 100%)}
.rsp-bar:after{height:5px;background:repeating-linear-gradient(120deg,#ffcf08 0 14px,#29291f 14px 23px);box-shadow:0 1px 8px #ffcf0855}
.rsp-content{padding:18px 19px 16px}.rsp-toggle{top:13px;right:13px;width:28px;height:28px;border:1px solid #ffe681;background:#ffcf08;color:#111;box-shadow:0 2px 10px #0008;font-size:18px}
.rsp-event-kicker{display:flex;align-items:center;gap:7px;width:max-content;max-width:calc(100% - 35px);margin:0 0 8px;padding:5px 8px;border:1px solid #d9b52c66;border-radius:4px;background:#18180feb;color:#ffe36f;font:800 9px/1.15 system-ui,sans-serif;letter-spacing:.09em}.rsp-live-dot{flex:none;width:6px;height:6px;background:#ffcf08;box-shadow:0 0 9px #ffcf08}.rsp-event-kicker i{color:#b79b35}
.rsp-name{position:relative;display:block;margin:0 0 9px;padding:10px 15px 11px 18px;border:1px solid #fff0a3;border-left:5px solid #fff2ad;clip-path:polygon(0 0,100% 0,97% 100%,0 100%);background:linear-gradient(120deg,#ffdc35,#ffc900 65%,#c59600);color:#11120d;text-shadow:0 1px #fff6a355;font:950 22px/1.03 system-ui,sans-serif;letter-spacing:.005em;text-transform:uppercase;overflow-wrap:anywhere}.rsp-name:after{content:'◆  ◆  ◆';position:absolute;right:13px;bottom:5px;color:#826500;font:800 5px/1 system-ui,sans-serif;letter-spacing:3px}
.rsp-intro{margin:0 2px 8px;color:#e0dfd4;font:500 11px/1.42 system-ui,sans-serif}.rsp-date{margin:0 2px 9px;padding:5px 8px;border-left:2px solid #ffcf08;background:#ffcf080d;color:#f3e6aa;font:600 10px/1.4 system-ui,sans-serif}
.rsp-gauge{margin:0;padding:0}.rsp-gauge-readout{position:relative;display:grid;justify-items:center;gap:5px;margin:0 0 8px;padding:10px 12px;border:1px solid #74652e;border-radius:7px;background:linear-gradient(155deg,#30302aee,#0d0e0ded 68%);box-shadow:inset 0 1px #ffffff21,inset 0 -3px #0008,0 4px 12px #0009;overflow:hidden}.rsp-gauge-readout:before,.rsp-gauge-readout:after{content:'';position:absolute;top:0;width:38px;height:3px;background:#ffcf08;transform:skewX(-35deg)}.rsp-gauge-readout:before{left:12px}.rsp-gauge-readout:after{right:12px}.rsp-gauge-readout .rsp-gauge-label{color:#d6cfae;font:800 9px/1 system-ui,sans-serif;letter-spacing:.18em}.rsp-gauge-readout>div{display:flex;align-items:baseline;justify-content:center;gap:7px;flex-wrap:wrap;max-width:100%}.rsp-gauge-readout .rsp-progress-value{max-width:100%;color:#ffda27;text-shadow:0 2px #000,0 0 15px #ffcf0840;font:900 clamp(25px,8vw,37px)/1 ui-monospace,Consolas,monospace;letter-spacing:0;overflow-wrap:anywhere}.rsp-gauge-readout .rsp-target{color:#d9cca0!important;font:800 10px/1 system-ui,sans-serif!important;letter-spacing:.05em}
.rsp-game-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:8px;align-items:center;margin:0;padding:10px 8px 7px;border:1px solid #65603b;border-radius:9px;background:radial-gradient(ellipse at 45% 53%,#e5bb1833,transparent 58%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 16px),linear-gradient(145deg,#1b1d19ed,#070808f5);box-shadow:inset 0 0 24px #000b,0 5px 14px #0008}
.rsp-drum-stage{width:min(230px,100%);cursor:pointer;touch-action:manipulation;outline:none;filter:drop-shadow(0 8px 8px #000b)}.rsp-drum-stage:before{content:'';position:absolute;z-index:0;left:5%;right:5%;bottom:1%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#ffcf0855,transparent 70%);pointer-events:none}.rsp-drum-stage:focus-visible{outline:2px solid #ffdc45;outline-offset:3px;border-radius:12px}.rsp-drum-stage.is-shaking{animation:rsp-player-shake .8s cubic-bezier(.36,.07,.19,.97)}.rsp-drum-stage.is-shaking:after{content:'✦';position:absolute;z-index:8;left:var(--rsp-spark-x,50%);top:var(--rsp-spark-y,50%);font:900 21px system-ui;color:#fff1a1;text-shadow:0 0 14px #ffcf08;pointer-events:none;animation:rsp-tap-spark .8s ease-out both}
@keyframes rsp-player-shake{0%,100%{transform:rotate(0) translateX(0)}18%{transform:rotate(-4deg) translateX(-4px)}38%{transform:rotate(4deg) translateX(4px)}60%{transform:rotate(-2deg) translateX(-2px)}80%{transform:rotate(1deg)}}@keyframes rsp-tap-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-50%) translateY(-24px) scale(.6)}}
.rsp-milestone-rail{flex-direction:column-reverse;min-height:210px;gap:7px;padding:7px 0 7px 7px;border-left:2px solid #a88c29}.rsp-milestone-rail li{z-index:2}.rsp-milestone-rail li:hover,.rsp-milestone-rail li:focus-within{z-index:20}.rsp-milestone-icon{width:50px;height:50px;border:0;background:transparent url('game-milestone-v2.webp') center/contain no-repeat;box-shadow:0 3px 9px #000b;color:#ffdf5a;transition:transform .2s,filter .2s}.rsp-milestone-icon span{font:900 15px/1 ui-monospace,Consolas,monospace;text-shadow:0 2px 3px #000}.rsp-milestone-icon small{font:800 6px/1 system-ui;color:#d3cda5}.rsp-milestone-rail li.is-reached .rsp-milestone-icon{background:transparent url('game-milestone-v2.webp') center/contain no-repeat;filter:brightness(1.4) drop-shadow(0 0 7px #ffcf08a8);color:#fff1a0}.rsp-milestone-rail li.is-reached .rsp-milestone-icon small{color:#fff0a0}.rsp-milestone-icon:hover,.rsp-milestone-icon:focus-visible{transform:scale(1.09);outline:2px solid #ffcf08;outline-offset:2px}.rsp-milestone-tooltip{z-index:30;right:calc(100% + 8px);width:min(180px,55vw);border:1px solid #ffcf08;background:#141510f7;box-shadow:0 8px 25px #000d}
.rsp-touch-hint{margin:4px 0 0;text-align:center;color:#c8be8a;font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.11em}.rsp-touch-hint span{color:#ffcf08;padding:0 4px}.rsp-hud-progress{position:relative;isolation:isolate;overflow:hidden;margin:8px 0 0;padding:9px 12px;border:1px solid #967b20;border-radius:5px;background:#11120e;color:#f3edce;font:900 9px/1 system-ui,sans-serif;letter-spacing:.1em}.rsp-hud-progress:before{content:'';position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--rsp-progress,0%);background:linear-gradient(90deg,#735600,#e7b700);opacity:.55;transition:width 1.2s ease}.rsp-hud-progress b{color:#fff0a0;font:900 14px/1 ui-monospace,Consolas,monospace}.rsp-fine{margin:9px 2px 0;padding:8px 0 0;border-top:1px solid #8e7a3c55;color:#cecab6;font:500 10px/1.4 system-ui,sans-serif}
@media(max-width:700px){.rsp-bar{width:min(400px,calc(100vw - 16px));max-height:88vh}.rsp-content{padding:14px 12px}.rsp-name{font-size:19px}.rsp-game-row{grid-template-columns:minmax(0,1fr) 52px;gap:4px;padding:7px 4px}.rsp-drum-stage{width:min(205px,100%)}.rsp-milestone-rail{min-height:185px;padding-left:4px}.rsp-milestone-icon{width:42px;height:42px}.rsp-gauge-readout .rsp-progress-value{font-size:clamp(23px,8vw,31px)}.rsp-bar.is-collapsed{width:44px}}
@media(prefers-reduced-motion:reduce){.rsp-drum-stage.is-shaking{animation-duration:.01ms}.rsp-drum-stage.is-shaking:after{animation-duration:.01ms}}