.lr{--lr-match:var(--d-math);--lr-match-deep:var(--d-math-lip);--lr-beat:var(--d-speed);--lr-beat-deep:var(--d-speed-lip);--lr-good:var(--d-math);--lr-good-deep:var(--d-math-lip);--lr-bad:var(--d-speed);--lr-bad-deep:var(--d-speed-lip);--lr-key-min:48px;--lr-maxw:1120px;gap:var(--s2);width:100%;height:100%;min-height:0;padding:var(--s1) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overflow-wrap:anywhere;flex-direction:column;display:flex;position:relative;overflow:hidden}.lr:lang(ko){word-break:keep-all}.lr--large{--lr-key-min:60px}.lr img{-webkit-user-drag:none;user-select:none;pointer-events:none}.lr-timer{width:100%;max-width:var(--lr-maxw);border-radius:var(--r-pill);background:var(--line);flex:none;height:12px;margin:auto auto 0;position:relative;overflow:hidden}.lr-timer__fill{border-radius:inherit;background:var(--dc);transform-origin:0;will-change:transform;position:absolute;inset:0}.lr-timer__fill:after{content:"";border-radius:var(--r-pill);background:#fff6;height:3px;position:absolute;top:3px;left:6px;right:6px}.lr-timer__fill[data-low="1"]{background:var(--lr-bad)}.lr-timer__mark{z-index:1;background:var(--bg);width:3px;position:absolute;top:0;bottom:0;transform:translate(-50%)}.lr-board{--lr-pad-w:clamp(92px, 17vw, 176px);width:100%;min-height:0;max-width:var(--lr-maxw);gap:var(--s3);grid-template-columns:var(--lr-pad-w) minmax(0, 1fr) var(--lr-pad-w);flex:1;grid-template-rows:minmax(0,1fr);grid-template-areas:"left court right";max-height:640px;margin:0 auto auto;display:grid}.lr-pad--left{grid-area:left}.lr-pad--right{grid-area:right}.lr-court{grid-area:court}.lr-pad{gap:var(--s2);min-height:0;padding:var(--s2) var(--s2) calc(var(--s2) + var(--lip));border-radius:var(--r-xl);background:var(--dc);box-shadow:0 var(--lip) 0 var(--dc-lip);grid-template-rows:repeat(3,minmax(0,1fr));display:grid}.lr-key{min-width:0;min-height:var(--lr-key-min);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:0 var(--lip) 0 var(--dc-lip);transition:transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, background-color var(--dur-ui);touch-action:none;cursor:pointer;border:0;place-items:center;padding:0;display:grid;position:relative;transform:translateY(0);container-type:size}.lr-key:active,.lr-key[data-state=ok],.lr-key[data-state=bad]{transform:translateY(var(--lip));box-shadow:0 0 0 var(--dc-lip)}.lr-key[data-state=ok]{background:var(--green-soft);box-shadow:0 0 0 var(--dc-lip), inset 0 0 0 4px var(--lr-good)}.lr-key[data-state=bad]{background:var(--red-soft);box-shadow:0 0 0 var(--dc-lip), inset 0 0 0 4px var(--lr-bad)}.lr-key[data-state=hint]{outline:4px dashed var(--lr-good-deep);outline-offset:-9px}.lr-key__paw{object-fit:contain;width:min(76cqh,70cqw);height:min(76cqh,70cqw)}.lr-pad--left .lr-key__paw,.lr-target--left .lr-card__paw{transform:scaleX(-1)}.lr-key__kbd{border:2px solid var(--line-strong);background:var(--surface-2);min-width:22px;color:var(--ink-2);font-family:var(--font-num);font-size:var(--t-xs);text-align:center;border-radius:7px;padding:1px 5px;font-weight:700;line-height:1.2;display:none;position:absolute;top:6px;left:8px}@media (hover:hover) and (pointer:fine){.lr-key__kbd{display:block}}.lr-key__mark{color:#fff;width:clamp(22px,26cqmin,32px);height:clamp(22px,26cqmin,32px);animation:lr-stamp .22s var(--ease-bounce);border-radius:50%;padding:4px;position:absolute;top:6px;right:6px}.lr-key__mark--ok{background:var(--lr-good-deep)}.lr-key__mark--bad{background:var(--lr-bad-deep)}.lr-court{--lr-cpad:var(--s3);--lr-cgap:var(--s3);--lr-mid:92px;--lr-mochi:clamp(48px, 24cqh, 112px);--lr-overlap:18px;--lr-card:min(calc((100cqw - 2 * var(--lr-cgap) - var(--lr-mid)) / 2), calc(100cqh - var(--lr-cgap) - var(--lr-mochi) - var(--lr-overlap) - 8px), 300px);grid-template-columns:minmax(0, 1fr) var(--lr-mid) minmax(0, 1fr);grid-template-rows:auto var(--lr-mochi);align-content:center;place-items:center;gap:var(--lr-cgap);min-width:0;min-height:0;padding:var(--lr-cpad);border-radius:var(--r-xl);background:var(--dc-soft);grid-template-areas:"tl mid tr""coach coach coach";display:grid;position:relative;container-type:size}.lr-target--left{grid-area:tl}.lr-target--right{grid-area:tr}.lr-target{flex-direction:column;align-items:center;min-width:0;display:flex}.lr-badge{z-index:2;min-height:36px;margin-bottom:calc(var(--lr-overlap) * -1);border-radius:var(--r-pill);color:#fff;font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;letter-spacing:.02em;white-space:nowrap;box-shadow:0 var(--lip-sm) 0 #00000038;animation:lr-pop .24s var(--ease-bounce);align-items:center;gap:6px;padding:0 14px 0 10px;font-size:1.2rem;line-height:1.2;display:inline-flex;position:relative}.lr-badge--match{background:var(--lr-match-deep)}.lr-badge--beat{background:var(--lr-beat-deep)}.lr-badge__icon{background:#ffffff3d;border-radius:50%;place-items:center;width:24px;height:24px;font-size:16px;display:grid}.lr-card{width:var(--lr-card);height:var(--lr-card);border:3px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:0 var(--lip) 0 var(--line-strong);transition:border-color var(--dur-press), background-color var(--dur-press);place-items:center;display:grid;position:relative}.lr-card__paw{object-fit:contain;width:76%;height:76%;margin-top:6%}.lr-card__paw[hidden]{display:none}.lr-card--timed .lr-card__paw{width:70%;height:70%;margin:0 0 10%}.lr-target[data-state=ok] .lr-card{border-color:var(--lr-good);background:var(--green-soft)}.lr-target[data-state=bad] .lr-card,.lr-target[data-state=late] .lr-card{border-color:var(--lr-bad);background:var(--red-soft)}.lr-stamp{z-index:3;color:#fff;width:clamp(34px,24%,48px);height:clamp(34px,24%,48px);box-shadow:0 var(--lip-sm) 0 #0003;animation:lr-stamp .24s var(--ease-bounce);border-radius:50%;padding:7px;position:absolute;bottom:-10px}.lr-target--left .lr-stamp{left:-10px}.lr-target--right .lr-stamp{right:-10px}.lr-stamp--ok{background:var(--lr-good-deep)}.lr-stamp--bad{background:var(--lr-bad-deep)}.lr-card__limit{border-radius:var(--r-pill);background:var(--line);height:7px;position:absolute;bottom:9px;left:14%;right:14%;overflow:hidden}.lr-card__limit>span{border-radius:inherit;background:var(--dc);transform-origin:0;transform:scaleX(var(--lr-left,1));position:absolute;inset:0}.lr[data-low="1"] .lr-card__limit>span{background:var(--lr-bad)}.lr:not([data-status=live]) .lr-card__limit{visibility:hidden}.lr-score{min-width:0;margin-top:var(--lr-overlap);flex-direction:column;grid-area:mid;align-items:center;gap:2px;display:flex}.lr-score__n{color:var(--ink);animation:lr-bump .26s var(--ease-bounce);font-size:clamp(2rem,15cqh,3.5rem);font-weight:700;line-height:1}.lr-score__label{font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-sm);color:var(--ink-2)}.lr-combo{margin-top:var(--s1);border:2px solid var(--orange);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--t-sm);animation:lr-pop .22s var(--ease-bounce);align-items:center;gap:2px;padding:2px 8px 2px 5px;font-weight:700;line-height:1.2;display:inline-flex}.lr-combo svg{color:var(--orange)}.lr-coach{justify-content:center;align-items:flex-end;gap:var(--s3);width:100%;height:var(--lr-mochi);grid-area:coach;min-width:0;display:flex}.lr-mochi{width:var(--lr-mochi);height:var(--lr-mochi);flex:none;position:relative}.lr-mochi__img{opacity:0;width:100%;height:100%;position:absolute;inset:0}.lr-mochi__img.is-on{opacity:1;animation:lr-hop .32s var(--ease-bounce)}.lr-bubble{max-width:min(calc(100cqw - var(--lr-mochi) - var(--s3)), 380px);margin:0 0 calc(var(--lr-mochi) * .2);border:2px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);box-shadow:0 var(--lip-sm) 0 var(--line-strong);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-md);transform-origin:0 100%;animation:lr-pop .26s var(--ease-bounce);flex-direction:column;align-items:flex-start;gap:2px;padding:7px 14px;line-height:1.25;display:flex;position:relative}.lr-bubble:before{content:"";border-left:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);background:inherit;width:12px;height:12px;position:absolute;bottom:12px;left:-8px;transform:rotate(45deg)}.lr-bubble--banner{border-color:var(--dc-lip);box-shadow:0 var(--lip-sm) 0 var(--dc-lip)}.lr-bubble--banner:before{border-color:var(--dc-lip)}.lr-bubble--good{border-color:var(--orange);box-shadow:0 var(--lip-sm) 0 var(--orange-lip)}.lr-bubble--good:before{border-color:var(--orange)}.lr-bubble--bad{border-color:var(--lr-bad);box-shadow:0 var(--lip-sm) 0 var(--lr-bad-deep)}.lr-bubble--bad:before{border-color:var(--lr-bad)}.lr-bubble__round{border-radius:var(--r-pill);background:var(--ink);color:var(--surface);font-size:var(--t-xs);padding:1px 8px;line-height:1.4}@media (orientation:portrait){.lr-board{grid-template:"court court"minmax(0,2fr)"left right"minmax(0,3fr)/minmax(0,1fr) minmax(0,1fr);max-height:none}.lr-court{--lr-cgap:var(--s2);--lr-mochi:clamp(40px, 23cqh, 84px);--lr-overlap:16px;--lr-card:min(calc((100cqw - var(--lr-cgap)) / 2), calc(100cqh - var(--lr-cgap) - var(--lr-mochi) - var(--lr-overlap) - 8px), 260px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"tl tr""coach coach"}.lr-coach{justify-content:flex-start;gap:var(--s2)}.lr-score{flex-direction:row;flex:none;align-self:center;align-items:baseline;gap:6px;margin:0 0 0 auto}.lr-score__n{font-size:clamp(1.75rem,13cqh,2.75rem)}.lr-combo{align-self:center;margin-top:0}.lr-bubble{min-width:0;max-width:none;margin-bottom:calc(var(--lr-mochi) * .12);font-size:var(--t-sm);flex-flow:wrap;flex:0 auto;align-items:center;column-gap:6px;padding:5px 12px}.lr-badge{min-height:32px;font-size:1.05rem}}@media (orientation:landscape) and (height<=420px){.lr-badge{min-height:32px;font-size:1.1rem}.lr-court{--lr-overlap:16px}}@keyframes lr-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}}@keyframes lr-stamp{0%{opacity:0;transform:scale(1.8)rotate(-12deg)}}@keyframes lr-bump{0%{transform:scale(1.35)}}@keyframes lr-hop{40%{transform:translateY(-10%)}}.lr--still *,.lr--still :before,.lr--still :after{transition:none!important;animation:none!important}
