.room-tune-playground{--room-color:#f6efe3;--stage-ink:#4b3149}.room-tune-playground .room-game{width:min(100%,720px)}.tpg-game{--tpg-chrome:340px;--tpg-h:clamp(150px, calc(100dvh - var(--tpg-chrome)), 460px);color:#4b3149;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:8px}.tpg-game button{font:inherit;color:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.tpg-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:10px;display:flex}.tpg-seg{background:#fffaf5;border:1px solid #b8a6b4;border-radius:14px;display:inline-flex;overflow:hidden}.tpg-seg button{background:0 0;border:0;min-width:44px;min-height:44px;padding:8px 14px;font-size:14px;font-weight:600}.tpg-seg button+button{border-left:1px solid #e0d3dc}.tpg-seg button.tpg-on,.tpg-tunes-btn.tpg-on{color:#fff;background:#68435f}.tpg-tunes-btn{background:#fffaf5;border:1px solid #b8a6b4;border-radius:14px;min-height:44px;padding:8px 16px;font-size:14px;font-weight:600}.tpg-game button:focus-visible{outline-offset:2px;outline:3px solid #2a6685}.tpg-tunes{overscroll-behavior-x:contain;scrollbar-width:thin;gap:8px;margin-bottom:4px;padding:2px 2px 10px;display:flex;overflow-x:auto}.tpg-tunes button{white-space:nowrap;background:#fffaf5;border:1px solid #b8a6b4;border-radius:999px;flex:none;min-height:44px;padding:8px 14px;font-size:14px;font-weight:600}.tpg-tunes button.tpg-on{color:#fff;background:#68435f;border-color:#68435f}.tpg-board{width:100%;height:var(--tpg-h);touch-action:none;border-radius:16px;position:relative}.tpg-key{cursor:pointer;touch-action:none;border:0;margin:0;padding:0;transition:transform 80ms,filter 80ms,box-shadow 80ms;position:absolute}.tpg-xylophone{background:#efe4d3;border-radius:18px}.tpg-rail{pointer-events:none;background:#b79a77;border-radius:4px;height:7px;position:absolute;left:3%;right:3%;box-shadow:inset 0 -2px #0000001f}.tpg-rail-top{top:24%}.tpg-rail-bottom{bottom:24%}.tpg-key.tpg-bar{background:hsl(var(--hue) 78% 64%);box-shadow:0 5px 0 hsl(var(--hue) 60% 42%);border-radius:14px}.tpg-key.tpg-bar .tpg-dot{background:#ffffffbf;border-radius:50%;width:10px;height:10px;margin-left:-5px;position:absolute;top:11%;left:50%}.tpg-key.tpg-bar[data-lit="1"]{box-shadow:0 1px 0 hsl(var(--hue) 60% 42%), 0 0 22px hsl(var(--hue) 90% 60% / .8);filter:brightness(1.12);transform:translateY(4px)scale(.97)}.tpg-piano{background:#3b2a39;border-radius:14px;overflow:hidden}.tpg-key.tpg-white{z-index:1;background:#fffdf8;border-left:1px solid #cdbfc9;border-right:1px solid #cdbfc9;border-radius:0 0 12px 12px;box-shadow:inset 0 -8px #ece3dc}.tpg-key.tpg-white .tpg-dot{background:#d9cdd6;border-radius:50%;width:9px;height:9px;margin-left:-4.5px;position:absolute;bottom:14px;left:50%}.tpg-key.tpg-white[data-lit="1"]{background:#fde8a8;transform:translateY(2px);box-shadow:inset 0 -3px #e8c76a}.tpg-key.tpg-black{z-index:2;background:linear-gradient(#4a3548,#2a1c29);border-radius:0 0 9px 9px;box-shadow:0 3px #00000059}.tpg-key.tpg-black[data-lit="1"]{background:linear-gradient(#7a4f8a,#54316a);transform:translateY(2px)}.tpg-key[data-guide="1"]{outline-offset:-4px;z-index:3;outline:4px solid #2a6685;animation:.3s ease-out tpg-bob}.tpg-key.tpg-bar[data-guide="1"]{outline-offset:2px}@keyframes tpg-bob{0%{transform:translateY(5px)}to{transform:translateY(0)}}.tpg-game.tpg-open{--tpg-chrome:405px}@media (orientation:portrait),(min-height:601px){.room-tune-playground.room-focused{flex-direction:column;display:flex}.room-tune-playground.room-focused .room-heading{flex-direction:row;align-items:center}.room-tune-playground.room-focused .play-stage{flex:1;display:block;overflow:auto}.room-tune-playground.room-focused .room-game{width:min(100%,900px);margin:auto;display:block}.room-tune-playground.room-focused .tpg-game{--tpg-chrome:175px}.room-tune-playground.room-focused .tpg-game.tpg-open{--tpg-chrome:240px}}@media (max-width:400px){.tpg-game{padding:4px}.tpg-seg button{padding:8px 10px;font-size:13px}.tpg-tunes-btn{padding:8px 12px}}@media (orientation:landscape) and (max-height:600px){.tpg-game{--tpg-chrome:285px;padding-block:2px}.tpg-game.tpg-open{--tpg-chrome:350px}.tpg-bar{margin-bottom:6px}.tpg-tunes{padding-bottom:6px}.room-tune-playground.room-focused .play-stage,.room-tune-playground.room-focused .room-game,.room-tune-playground.room-focused .tpg-game{display:contents}.room-tune-playground.room-focused .tpg-bar{flex-flow:column;grid-area:2/1;align-items:stretch;gap:6px;margin:0}.room-tune-playground.room-focused .tpg-seg{width:100%}.room-tune-playground.room-focused .tpg-seg button{flex:1 1 0;min-width:0;padding-inline:4px}.room-tune-playground.room-focused .tpg-tunes{flex-direction:column;grid-area:4/1;min-height:0;margin:0;padding:0 2px 2px;overflow:hidden auto}.room-tune-playground.room-focused .tpg-tunes button{white-space:normal;text-align:left;border-radius:12px}.room-tune-playground.room-focused .tpg-board{grid-area:1/2/-1;place-self:center stretch;height:min(100dvh - 24px,420px)}}@media (prefers-reduced-motion:reduce){.tpg-key{transition:none}.tpg-key[data-guide="1"]{animation:none}}.room-tune-playground:has(.tpg-grand) .room-game{width:min(100%,1180px)}.tpg-grand{--tpg-kh:clamp(150px, 32dvh, 300px);--tpg-fh:clamp(110px, 22dvh, 240px);--tpg-r:#0072b2;--tpg-l:#e69f00}.tpg-gbar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-bottom:8px;display:flex}.tpg-gbar .tpg-seg button{padding-inline:18px;font-size:18px}.tpg-gbar .tpg-seg button:disabled{opacity:.4}.tpg-chip{background:#fffaf5;border:1px solid #b8a6b4;border-radius:14px;min-height:44px;padding:8px 16px;font-size:14px;font-weight:600}.tpg-chip.tpg-on{color:#fff;background:#68435f}.tpg-note{text-align:center;color:#6a6254;margin:2px 0 6px;font-size:13px}.tpg-note-soft{opacity:.8}.tpg-songs{background:#fffaf5;border:1px solid #e0d3dc;border-radius:14px;margin:0 0 10px;padding:10px}.tpg-songs-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.tpg-key-legend{align-items:center;gap:6px;font-size:13px;display:inline-flex}.tpg-lg{place-items:center;width:20px;height:20px;font:700 11px system-ui,sans-serif;display:inline-grid}.tpg-lg-r{background:var(--tpg-r);color:#fff;border-radius:50%}.tpg-lg-l{background:var(--tpg-l);color:#2a2620;background-image:repeating-linear-gradient(135deg,#0000 0 3px,#3c280059 3px 5px);border-radius:3px}.tpg-song-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;margin:0;padding:0;list-style:none;display:grid}.tpg-song{background:#fff;border:1px solid #e0d3dc;border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;display:flex}.tpg-song-name{flex-direction:column;min-width:0;display:flex}.tpg-song-name strong{font-size:15px}.tpg-song-name span{color:#6a6254;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.tpg-song .tpg-seg button{min-width:64px}.tpg-nowplaying{margin-top:8px;font-size:14px}.tpg-songs[data-running="1"] .tpg-nowplaying{margin-top:0}.tpg-nowplaying-line{justify-content:space-between;align-items:center;gap:8px;display:flex}.tpg-nowplaying-line .tpg-chip{flex:none;min-height:40px;padding-block:4px}.tpg-progress{background:#e9dfe6;border-radius:3px;height:6px;margin:6px 0;overflow:hidden}.tpg-progress span{background:#68435f;height:100%;display:block}.tpg-covers{color:#6a6254;margin:0;font-size:12px}.tpg-pwrap{min-width:0;max-width:100%;position:relative}.tpg-pscroll{overscroll-behavior-x:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch;background:#3b2a39;border-radius:14px;overflow:auto hidden}.tpg-pstage{position:relative}.tpg-fall{width:100%;height:var(--tpg-fh);background:linear-gradient(#2b1f2a,#3b2a39);display:none}.tpg-grand[data-songs="1"] .tpg-fall{display:block}.tpg-grip{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.tpg-grip:active{cursor:grabbing}.tpg-ruler{color:#e8d9e4;height:26px;font:600 11px system-ui,sans-serif;position:relative}.tpg-ruler span{padding-left:3px;position:absolute;top:6px}.tpg-keys{height:var(--tpg-kh);touch-action:none;-webkit-user-select:none;user-select:none;position:relative}.tpg-pk{top:0;left:calc(var(--kw) * var(--x));width:calc(var(--kw) * var(--w));cursor:pointer;touch-action:none;border:0;margin:0;padding:0;transition:background-color 60ms,transform 60ms;position:absolute}.tpg-pk-white{z-index:1;background:#fffdf8;border-right:1px solid #cdbfc9;border-radius:0 0 6px 6px;height:100%;box-shadow:inset 0 -7px #ece3dc}.tpg-pk-black{z-index:2;background:linear-gradient(#4a3548,#1f141e);border-radius:0 0 5px 5px;height:62%;box-shadow:0 3px #0006}.tpg-pk-white[data-lit="1"]{background:#fde8a8;transform:translateY(2px);box-shadow:inset 0 -3px #e8c76a}.tpg-pk-black[data-lit="1"]{background:linear-gradient(#8c5fa0,#54316a);transform:translateY(2px)}.tpg-pk-label{text-align:center;color:#7a6a77;pointer-events:none;font:600 10px system-ui,sans-serif;position:absolute;bottom:5px;left:0;right:0}.tpg-pk[data-hand]:after{content:attr(data-hand);pointer-events:none;place-items:center;width:min(20px,90%);height:min(20px,90%);font:700 11px system-ui,sans-serif;display:grid;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.tpg-pk-black[data-hand]:after{bottom:8px}.tpg-pk[data-hand=R]:after{color:#fff;background:#04415f;border-radius:50%}.tpg-pk[data-hand=L]:after{color:#fff;background:#4a3000;border-radius:3px}.tpg-pk-white[data-hand=R]{box-shadow:inset 0 -4px 0 var(--tpg-r);background:#8fc6e6}.tpg-pk-white[data-hand=L]{box-shadow:inset 0 -4px 0 var(--tpg-l);background:#f6cf7a repeating-linear-gradient(135deg,#0000 0 5px,#78500033 5px 7px)}.tpg-pk-black[data-hand=R]{background:linear-gradient(#2b8bc4, var(--tpg-r))}.tpg-pk-black[data-hand=L]{background:linear-gradient(#f2b22c,#a56e00)}.tpg-pk:focus-visible{outline-offset:-3px;z-index:4;outline:3px solid #2a6685}.tpg-map{touch-action:none;cursor:pointer;background:#fffaf5;border:1px solid #b8a6b4;border-radius:10px;height:40px;margin-top:8px;position:relative;overflow:hidden}.tpg-map-keys{grid-template-columns:repeat(52,1fr);height:100%;display:grid}.tpg-map-keys i{border-right:1px solid #e0d3dc}.tpg-map-c{color:#6a6254;pointer-events:none;padding-left:2px;font:600 9px system-ui,sans-serif;position:absolute;bottom:1px}.tpg-map-win{pointer-events:none;background:#68435f24;border:3px solid #68435f;border-radius:8px;min-width:14px;position:absolute;top:0;bottom:0;left:0}.tpg-hint{color:#6a6254;text-align:center;margin:8px 0 0;font-size:12px}.tpg-credit{color:#6a6254;text-align:center;margin:6px 0 0;font-size:12px}.tpg-credit a{color:#2a6685;text-decoration:underline}@media (orientation:landscape) and (max-height:600px){.tpg-grand{--tpg-kh:clamp(96px, 34dvh, 160px);--tpg-fh:clamp(56px, 22dvh, 110px)}.tpg-hint{display:none}.tpg-chip,.tpg-gbar .tpg-seg button{min-height:40px}.tpg-map{height:32px;margin-top:6px}.tpg-songs{margin-bottom:6px;padding:6px}.tpg-song-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}.game-room.room-tune-playground.room-focused:has(.tpg-grand){flex-direction:column;display:flex}.room-tune-playground.room-focused:has(.tpg-grand) .room-heading{flex-direction:row;align-items:center}.room-tune-playground.room-focused:has(.tpg-grand) .play-stage{flex:1;display:block;overflow:auto}.room-tune-playground.room-focused:has(.tpg-grand) .room-game{width:100%;margin:0;display:block}.room-tune-playground.room-focused .tpg-game[data-instrument=grand]{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;display:flex}.room-tune-playground.room-focused .tpg-game[data-instrument=grand]>.tpg-grand{display:contents}.room-tune-playground.room-focused .tpg-grand>.tpg-gbar{margin-bottom:6px}.room-tune-playground.room-focused .tpg-grand>.tpg-note,.room-tune-playground.room-focused .tpg-grand>.tpg-songs,.room-tune-playground.room-focused .tpg-grand>.tpg-pwrap,.room-tune-playground.room-focused .tpg-grand>.tpg-hint,.room-tune-playground.room-focused .tpg-grand>.tpg-credit{box-sizing:border-box;flex:0 0 100%}.room-tune-playground.room-focused .tpg-game[data-instrument=grand] .tpg-bar{flex-flow:wrap;align-items:center;margin:0 0 6px}.room-tune-playground.room-focused .tpg-game[data-instrument=grand] .tpg-seg{width:auto}.room-tune-playground.room-focused .tpg-game[data-instrument=grand] .tpg-seg button{flex:none;min-width:44px;padding-inline:14px}}@media (min-width:880px){.tpg-game[data-instrument=grand]{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;display:flex}.tpg-game[data-instrument=grand]>.tpg-bar{margin-bottom:8px}.tpg-game[data-instrument=grand]>.tpg-grand{display:contents}.tpg-grand>.tpg-gbar{flex-wrap:nowrap;margin-bottom:8px}.tpg-grand>.tpg-note,.tpg-grand>.tpg-songs,.tpg-grand>.tpg-pwrap,.tpg-grand>.tpg-hint,.tpg-grand>.tpg-credit{box-sizing:border-box;flex:0 0 100%}}@media (max-width:480px){.tpg-seg-arrows{display:none!important}.tpg-gbar{gap:6px}.tpg-chip{padding:8px 12px}.tpg-gbar .tpg-seg button{padding-inline:16px}}@media (prefers-reduced-motion:reduce){.tpg-pk{transition:none}}