#bard-rhythm{--br-accent: #79ded2;position:fixed;z-index:520;left:50%;bottom:max(122px,calc(104px + env(safe-area-inset-bottom)));transform:translate(-50%);width:min(370px,calc(100vw - 24px));box-sizing:border-box;padding:12px 16px 10px;color:#f4e9d4;background:linear-gradient(150deg,#261b30f7,#11181ff7);border:1px solid #8f7651;border-radius:12px;box-shadow:0 6px 24px #0008,inset 0 0 0 3px #ffffff05;font-family:Inter,system-ui,sans-serif;user-select:none;pointer-events:none}#bard-rhythm[hidden],body:not(.in-game) #bard-rhythm,body.has-open-modal #bard-rhythm{display:none!important}#bard-rhythm .br-heading,#bard-rhythm .br-result,#bard-rhythm .br-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}#bard-rhythm .br-heading{gap:8px}#bard-rhythm .br-emblem{width:19px;color:#e9c481}#bard-rhythm svg{display:block;width:100%;height:100%;fill:currentColor;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}#bard-rhythm .br-emblem path,#bard-rhythm .br-note path{fill:none}#bard-rhythm .br-title{flex:1;font:700 13px Cinzel,Georgia,serif;letter-spacing:.3px}#bard-rhythm .br-streak{font-size:10px;color:#d4c1e6;font-variant-numeric:tabular-nums}#bard-rhythm .br-track{position:relative;height:56px;margin:10px 0 4px;overflow:hidden;border-radius:6px;background:#080f1799}#bard-rhythm .br-staff{position:absolute;inset:13px 0;background:repeating-linear-gradient(0deg,transparent 0 7px,#e2d5bd15 7px 8px)}#bard-rhythm .br-window,#bard-rhythm .br-perfect-window{position:absolute;left:23%;top:0;bottom:0;transform:translate(-50%);width:var(--br-window, 11%);background:#79ded218}#bard-rhythm .br-perfect-window{width:var(--br-perfect, 5%);background:#79ded22b}#bard-rhythm .br-ring{position:absolute;left:23%;top:50%;width:32px;height:36px;transform:translate(-50%,-50%);border:2px solid #79ded2;border-radius:50%;box-shadow:0 0 12px #79ded220}#bard-rhythm .br-note{position:absolute;top:50%;width:23px;height:28px;color:#bd9fe8;transform:translate(-50%,-50%)}#bard-rhythm .br-note:nth-of-type(2n){color:#79ded2}#bard-rhythm .br-note.br-finale-note{color:#f2c66e}#bard-rhythm:not(.br-playing) .br-note{opacity:.35}#bard-rhythm .br-result{min-height:22px}#bard-rhythm .br-grade{font-size:12px;font-weight:800;color:var(--br-accent)}#bard-rhythm .br-bonus{color:#edca86;font-size:11px;font-weight:700}#bard-rhythm .br-footer{margin-top:5px}#bard-rhythm .br-footer p{margin:0;font-size:10px;color:#c7bfce;line-height:1.5}#bard-rhythm .br-footer .br-tip{color:#9d94aa;font-size:9px}#bard-rhythm .br-play{pointer-events:auto;touch-action:manipulation;min-width:64px;min-height:44px;padding:8px 12px;border:1px solid #ac8a58;border-radius:8px;color:#f8e7bc;background:linear-gradient(#544331,#30293a);font:700 12px Inter,system-ui,sans-serif;cursor:pointer}#bard-rhythm .br-play:active{background:#7b6350}#bard-rhythm .br-play:focus-visible{outline:2px solid #79ded2;outline-offset:3px}#bard-rhythm .br-beats{display:flex;gap:5px;margin-top:9px}#bard-rhythm .br-beats i{flex:1;height:3px;border-radius:2px;background:#ffffff1a}#bard-rhythm .br-beats i:last-child{background:#f2c66e33}#bard-rhythm .br-beats i.br-filled{background:var(--br-accent)}#bard-rhythm[data-grade=finisher]{--br-accent: #f2c66e;border-color:#f2c66e}#bard-rhythm[data-grade=miss]{--br-accent: #d4b2d8}#bard-rhythm.br-hit .br-ring{box-shadow:0 0 16px #79ded260;border-color:#f7ead1}html.is-mobile #bard-rhythm{width:min(330px,calc(100vw - 28px));bottom:max(228px,calc(218px + env(safe-area-inset-bottom)));padding:9px 12px 8px}html.is-mobile.is-landscape #bard-rhythm{width:min(330px,43vw);bottom:max(34px,env(safe-area-inset-bottom))}html.is-mobile.is-landscape #bard-rhythm .br-track{height:43px;margin-top:6px}html.is-mobile.is-portrait #bard-rhythm{bottom:max(254px,calc(244px + env(safe-area-inset-bottom)))}#bard-rhythm.br-compact,html.is-mobile #bard-rhythm.br-compact{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:3px 8px;width:min(248px,calc(100vw - 28px));padding:6px 8px;border-color:#8f76517a;border-radius:9px;box-shadow:0 3px 12px #0005}#bard-rhythm.br-compact .br-heading,#bard-rhythm.br-compact .br-footer>div,#bard-rhythm.br-compact .br-bonus{display:none}#bard-rhythm.br-compact .br-track,html.is-mobile #bard-rhythm.br-compact .br-track{grid-column:1;grid-row:1;height:27px;margin:0}#bard-rhythm.br-compact .br-ring{width:18px;height:21px;border-width:1.5px}#bard-rhythm.br-compact .br-note{width:14px;height:18px}#bard-rhythm.br-compact .br-staff{inset:5px 0;background-size:auto 6px}#bard-rhythm.br-compact .br-result{grid-column:1;grid-row:2;min-height:13px;gap:4px}#bard-rhythm.br-compact .br-grade{font-size:9px;font-weight:600;white-space:nowrap}#bard-rhythm.br-compact .br-streak{font-size:9px;white-space:nowrap}#bard-rhythm.br-compact .br-footer{grid-column:2;grid-row:1 / 5;margin:0}#bard-rhythm.br-compact .br-play{width:44px;min-width:44px;min-height:44px;padding:4px;font-size:10px;border-color:#ac8a5877}#bard-rhythm.br-compact .br-beats{grid-column:1;grid-row:3;margin:0;gap:3px}#bard-rhythm.br-compact .br-beats i{height:2px}.class-card-icon.bard-theme{background:#a375cc2e;border:1.5px solid rgba(163,117,204,.55)}.class-select-btn.bard-btn:not(:disabled){color:#e6cef9;background:linear-gradient(180deg,#62437b,#34263f);border-color:#9a76b8}#bard-rhythm{--br-tier-color: #79ded2;transition:border-color .3s,box-shadow .3s}#bard-rhythm[data-tier=harmony]{--br-tier-color: #bb9af5;border-color:#9a7fc9}#bard-rhythm[data-tier=virtuoso]{--br-tier-color: #f078cf;border-color:#c06aa8;box-shadow:0 6px 24px #0008,0 0 14px #f078cf33}#bard-rhythm[data-tier=maestro]{--br-tier-color: #f4cb78;border-color:#f4cb78;animation:br-maestro 1.6s ease-in-out infinite}#bard-rhythm[data-grade=fermata]{--br-accent: #f078cf}@keyframes br-maestro{0%,to{box-shadow:0 6px 24px #0008,0 0 12px #f4cb7833}50%{box-shadow:0 6px 24px #0008,0 0 26px #f4cb7877}}#bard-rhythm .br-tier{padding:1px 7px;border:1px solid var(--br-tier-color);border-radius:9px;color:var(--br-tier-color);font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}#bard-rhythm[data-tier=melody] .br-tier{opacity:.6}#bard-rhythm .br-streak.br-pop{animation:br-pop .28s ease-out}@keyframes br-pop{0%{transform:scale(1.35);color:var(--br-tier-color)}to{transform:scale(1)}}#bard-rhythm .br-streak{display:inline-block}#bard-rhythm .br-tier-meter{height:2px;margin-top:4px;border-radius:2px;background:#ffffff10;overflow:hidden}#bard-rhythm .br-tier-meter b{display:block;height:100%;width:0;background:var(--br-tier-color);box-shadow:0 0 6px var(--br-tier-color);transition:width .2s ease-out}#bard-rhythm .br-ring{border-color:var(--br-tier-color)}#bard-rhythm .br-bonus{white-space:pre}#bard-rhythm .br-banner{position:absolute;left:50%;bottom:calc(100% + 8px);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:190px;padding:6px 14px;border:1px solid var(--br-banner, #bb9af5);border-radius:10px;background:linear-gradient(150deg,#261b30f7,#11181ff7);box-shadow:0 0 20px color-mix(in srgb,var(--br-banner, #bb9af5) 40%,transparent);opacity:0;transform:translate(-50%,6px) scale(.9);pointer-events:none;text-align:center}#bard-rhythm .br-banner[data-tier=harmony]{--br-banner: #bb9af5}#bard-rhythm .br-banner[data-tier=virtuoso]{--br-banner: #f078cf}#bard-rhythm .br-banner[data-tier=maestro]{--br-banner: #f4cb78}#bard-rhythm .br-banner strong{font:700 15px Cinzel,Georgia,serif;color:var(--br-banner, #bb9af5);letter-spacing:.6px}#bard-rhythm .br-banner span{font-size:10px;color:#f4e9d4;white-space:nowrap}#bard-rhythm .br-banner.br-show{animation:br-banner 2.2s ease-out forwards}@keyframes br-banner{0%{opacity:0;transform:translate(-50%,8px) scale(.85)}12%{opacity:1;transform:translate(-50%) scale(1.06)}22%{transform:translate(-50%) scale(1)}80%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-6px) scale(1)}}#bard-rhythm.br-compact .br-tier{padding:0 5px;font-size:8px}#bard-rhythm.br-compact .br-tier-meter{grid-column:1;grid-row:4;margin:0}@media (prefers-reduced-motion: reduce){#bard-rhythm[data-tier=maestro],#bard-rhythm .br-streak.br-pop{animation:none}#bard-rhythm .br-banner.br-show{animation-name:br-banner-fade}}@keyframes br-banner-fade{0%,to{opacity:0;transform:translate(-50%)}10%,85%{opacity:1;transform:translate(-50%)}}