/* 0.7.6c «Плотность и ритм»: 2 s banner of a new enemy tier / the onslaught / a Runaway Chest (src/rhythm-ui.js). */
.rhythm-banner{position:absolute;left:50%;top:20%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;max-width:min(88vw,440px);padding:7px 14px;border:2px solid var(--r-legendary);background:rgb(var(--c-night-0-rgb) / 88%);color:var(--c-text);text-align:center;pointer-events:none;box-shadow:0 0 0 2px var(--c-night-0);animation:rhythm-in .25s ease-out}
.rhythm-banner[hidden]{display:none}
.rhythm-banner strong{font-size:var(--fs-l);letter-spacing:2px;text-transform:uppercase;color:var(--c-gold-hi)}
.rhythm-banner>span{font-size:12px;font-weight:700}
.rhythm-banner.onslaught{border-color:var(--r-mythic)}.rhythm-banner.onslaught strong{color:var(--c-gold-hi)}
.rhythm-banner.runaway{border-color:var(--c-gold)}
.rhythm-icons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rhythm-icon{display:flex;flex-direction:column;align-items:center;gap:1px;max-width:96px}
.rhythm-icon canvas{width:40px;height:40px;image-rendering:pixelated}
.rhythm-icon small{font-size:var(--fs-xs);line-height:1.1;color:var(--c-light)}
@keyframes rhythm-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.rhythm-banner{animation:none}}
/* portrait phones: under the hero, above the dash / E buttons (the HUD columns and first-run hints live at the top) */
@media(max-width:550px){.rhythm-banner{top:auto;bottom:28%;padding:5px 10px}.rhythm-banner strong{font-size:12px;letter-spacing:1px}.rhythm-icon canvas{width:32px;height:32px}.rhythm-icon small{font-size:var(--fs-xs)}}
/* landscape phones: a slim line in the free bottom-left corner (the hints sit under the HUD, the joystick at the bottom centre) */
@media(max-height:430px){.rhythm-banner{top:auto;bottom:10px;left:12px;transform:none;animation:none;flex-direction:row;gap:8px;padding:3px 10px;max-width:40vw}.rhythm-icon canvas{width:26px;height:26px}.rhythm-icon small{display:none}}
.rhythm-event-icon{width:40px;height:40px;image-rendering:pixelated}
@media(max-height:430px){.rhythm-event-icon{width:26px;height:26px}}