/* The supplied whole PNGs retain their proportions and transparent pivots. */
body.lyre-open .hud-actions,body.lyre-open .harbour-inn-controls{visibility:hidden;pointer-events:none}
.lyre-modal .modal-body{overflow:auto!important}
.lyre-v02{position:relative;min-height:100%;display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2fr) minmax(190px,1fr);align-items:center;gap:1.5%;padding:12px 2%;box-sizing:border-box;background:linear-gradient(90deg,#110d09b8,#100e0955 55%,#100e0977);color:#eee1c5;font-family:var(--heading,Georgia,serif)}
.lyre-v02 *{box-sizing:border-box}.lyre-v02 [hidden]{display:none!important}.lyre-v02 img{pointer-events:none;user-select:none}.lyre-v02 button{cursor:pointer}.lyre-v02 button:disabled{cursor:default}.lyre-v02 button:focus-visible,.lyre-v02 select:focus-visible,.lyre-v02 input:focus-visible{outline:2px solid #ffedbe;outline-offset:3px}
.lyre-intro{align-self:center;text-shadow:0 2px 5px #000}.lyre-intro h3{font:normal clamp(23px,2.3cqw,38px) var(--heading);margin:16px 0}.lyre-intro p{font:clamp(13px,1.15cqw,18px)/1.6 var(--heading);margin:16px 0}.lyre-intro .eyebrow{font:11px/1.6 var(--sans);color:#c3aa81}.lyre-modes{display:grid;gap:12px;max-width:290px;margin:22px 0}.lyre-performer{display:grid;gap:8px;font-size:14px;max-width:290px}.lyre-performer select{width:100%;min-height:38px;background:#211910e8;color:#f3dfbc;border:1px solid #a27b48;padding:6px}.lyre-intro p.lyre-fine{font-size:13px;color:#d5c3a3}.lyre-volume{display:flex;align-items:center;gap:8px;font:12px var(--sans)}.lyre-volume input{width:90px}.lyre-mute{border:1px solid #88683d;background:#1c160edc;color:#dec79f;padding:5px 12px;margin-top:8px;min-height:34px}.lyre-rotate{display:none}
.lyre-center{width:min(100%,75cqh);justify-self:center}.lyre-board{position:relative;aspect-ratio:1;width:100%;isolation:isolate}.lyre-skin{display:block;width:100%;height:100%;object-fit:contain}.lyre-strings-v02{position:absolute;inset:0;pointer-events:none}.lyre-strings-v02 i{position:absolute;top:19%;height:56.6%;width:1px;background:linear-gradient(#e7c589,#977449,#dab979);transform:translateX(-50%);opacity:.7}.lyre-strings-v02 i.struck{opacity:1;box-shadow:0 0 8px #ffcf78;background:#ffeac1}.lyre-hit-band{position:absolute;left:15%;width:72%;top:73%;height:5%;transform:translateY(-50%);background:linear-gradient(transparent,#d398353b,transparent);border-block:1px solid #ba823944;pointer-events:none}.lyre-hit-line{position:absolute;left:15%;width:72%;top:73%;height:2px;background:linear-gradient(90deg,transparent,#e8bd73 8%,#fff0bc 50%,#e8bd73 92%,transparent);box-shadow:0 0 6px #e5b65c;pointer-events:none}.lyre-notes{position:absolute;inset:18% 13% 24% 14%;overflow:hidden;pointer-events:none}.lyre-notes img{position:absolute;width:15.75%;aspect-ratio:1;transform:translate(-50%,-50%)}
.lyre-key{position:absolute;top:83.5%;width:10.5%;aspect-ratio:1;transform:translate(-50%,-50%);border:0!important;border-radius:0;background:none!important;box-shadow:none!important;padding:0!important;color:#f3e4c3;touch-action:manipulation;min-height:0}.lyre-key img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.lyre-key .pressed{opacity:0}.lyre-key.down .pressed{opacity:1}.lyre-key.down .normal{opacity:0}.lyre-key.down{transform:translate(-50%,-50%) scale(.94)}.lyre-key span{position:relative;font:clamp(16px,1.6cqw,25px) var(--heading);pointer-events:none;text-shadow:0 2px 2px #000}.lyre-key:hover{filter:brightness(1.12)}
.lyre-feedback{position:absolute;top:61%;left:15%;width:72%;text-align:center;font-size:clamp(16px,2cqw,25px);color:#fff0b8;text-shadow:0 0 9px #dfaa53;pointer-events:none}.lyre-feedback[data-result=Miss]{color:#bf795a}.lyre-effects{position:absolute;inset:0;pointer-events:none}.lyre-hit{position:absolute;top:73%;width:14%;aspect-ratio:1;transform:translate(-50%,-50%);animation:lyre-flash .45s ease-out forwards}.lyre-hit img{position:absolute;inset:0;width:100%;height:100%}.lyre-hit.good .flash{opacity:.55}.lyre-result{position:absolute;top:31%;left:15%;width:72%;padding:7% 2%;text-align:center;background:linear-gradient(90deg,transparent,#110e0bec 12%,#110e0bed 88%,transparent);pointer-events:none}.lyre-result h3{font:normal clamp(16px,1.8cqw,26px)/1.5 var(--heading);color:#ebc989;margin:0 0 8px}.lyre-result p{font:clamp(12px,1.3cqw,18px)/1.5 var(--heading);margin:0}
.lyre-progress{position:relative;width:80%;margin:0 auto;aspect-ratio:600/97}.lyre-progress>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.lyre-progress-label{position:absolute;left:20%;right:20%;top:0;display:flex;justify-content:space-between;font-size:11px;color:#d7c49e}.lyre-progress-well{position:absolute;left:21%;top:37.8%;width:57.5%;height:14.4%;background:#11150d;clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%)}[data-lyre-fill]{height:100%;width:0;background:linear-gradient(#c4cea0,#829962 45%,#687b47)}
.lyre-actions{display:flex;gap:6px}.lyre-art-button{position:relative;flex:1;display:block;width:100%;aspect-ratio:600/136;min-height:44px;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;padding:0!important;color:#f0dfba;text-shadow:0 2px 3px #090703}.lyre-art-button>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.lyre-art-button>span{position:absolute;left:26.5%;width:61%;top:12%;height:70%;display:flex;align-items:center;justify-content:center;white-space:nowrap;font:clamp(11px,1cqw,16px) var(--heading);pointer-events:none}.lyre-art-button:hover:not(:disabled){filter:brightness(1.18)}.lyre-art-button:active:not(:disabled){filter:brightness(.8);transform:translateY(1px)}.lyre-art-button:disabled{filter:saturate(.25) brightness(.52)}.lyre-art-button[aria-pressed=true]{filter:brightness(1.2);text-shadow:0 0 8px #e1b163}.lyre-status{min-height:1em;margin:4px;text-align:center;font:12px var(--sans);color:#dec89e}
.lyre-performance{position:relative;width:min(100%,42cqh);aspect-ratio:300/470;align-self:center;justify-self:center}.lyre-performance-content{position:absolute;inset:10% 17% 12% 16%;font-size:clamp(12px,1.05cqw,17px)}.lyre-skill{display:flex;gap:5px;align-items:center;border-bottom:1px solid #796044;padding-bottom:8px}.lyre-skill img{width:22%;aspect-ratio:1}.lyre-skill strong{font-size:clamp(21px,2.1cqw,32px);font-weight:normal;margin-left:auto}.lyre-timing-title{text-align:center;margin:12px 0 8px;font-size:13px}.lyre-timing{height:12px;position:relative;background:#090b08;border:1px solid #806847}.lyre-timing i{position:absolute;top:1px;bottom:1px;left:50%;transform:translateX(-50%);background:linear-gradient(#a9b38c,#657c52)}.lyre-timing b{position:absolute;left:50%;top:-4px;height:18px;width:2px;background:#fff0c1}.lyre-timing-label{display:flex;justify-content:space-between;font-size:11px;margin-top:5px}.lyre-metric{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #7c614155;margin-top:12px;padding-top:8px;gap:4px}.lyre-metric strong{font-size:clamp(18px,1.9cqw,28px);font-weight:normal;white-space:nowrap}.lyre-misses{display:flex;gap:12px;margin-top:9px}.lyre-misses i{width:19px;height:19px;border-radius:50%;border:1px solid #ae884d;background:#14130e}.lyre-misses i.used{border-color:#bf7154;background:radial-gradient(circle,#b96548,#5d2b20)}.lyre-reward{border-top:1px solid #806240;margin-top:14px;padding-top:10px;font-size:12px}.lyre-reward strong{display:block;font-weight:normal;font-size:clamp(15px,1.5cqw,23px);margin:5px 0}.lyre-reward small{font:11px/1.3 var(--sans)}.lyre-free-info{display:none;line-height:1.7}
.lyre-v02[data-mode=freePlay] :is(.lyre-hit-band,.lyre-hit-line,.lyre-progress,.lyre-ballad-stats,.lyre-feedback){visibility:hidden}.lyre-v02[data-mode=freePlay] .lyre-free-info{display:block;position:absolute;top:35%;left:0;right:0}
@keyframes lyre-flash{from{opacity:1}to{opacity:0}}
@container (max-width:1000px){.lyre-v02{grid-template-columns:minmax(150px,1fr) minmax(490px,2fr);min-width:680px;align-items:start}.lyre-center{width:100%;grid-column:2;grid-row:1/3}.lyre-performance{grid-column:1;grid-row:2;width:230px;max-width:100%;margin-top:15px}.lyre-intro p{font-size:13px}.lyre-intro .lyre-fine{display:none}.lyre-performance-content{font-size:12px}.lyre-modes{margin:10px 0;gap:4px}.lyre-rotate{display:block;font-size:12px!important}.lyre-art-button>span{font-size:12px}.lyre-key{min-width:44px;min-height:44px}.lyre-intro{align-self:start}.lyre-skill strong{font-size:22px}.lyre-metric strong{font-size:20px}}
@container (min-width:1001px) and (max-height:540px){.lyre-center{width:100%;max-width:490px}.lyre-v02{align-items:start}.lyre-performance{width:260px;max-width:100%;aspect-ratio:300/470}.lyre-intro .lyre-fine{display:none}}
@media(prefers-reduced-motion:reduce){.lyre-hit{animation:none}.lyre-key.down{transform:translate(-50%,-50%)}}
/* Override the legacy parchment palette on the actual clickable element. */
.game-panel.lyre-modal .lyre-v02 button{color:#f9e7bf;text-shadow:0 1px 3px #000}
.game-panel.lyre-modal .lyre-art-button>span,.game-panel.lyre-modal .lyre-key>span{color:#fff0ce;z-index:2;visibility:visible;opacity:1;text-shadow:0 1px 3px #000,0 0 2px #000}
.game-panel.lyre-modal .lyre-art-button>img,.game-panel.lyre-modal .lyre-key>img{z-index:0}
.game-panel.lyre-modal .lyre-v02 .lyre-mute{color:#f7e3b6;background:#292015;border:1px solid #b59252;box-shadow:none}
.game-panel.lyre-modal .lyre-performer select{background:#211910;color:#f3dfbc;border:1px solid #a27b48}