/* Scene previews show the same rooms as the live Unity renderer. */
.audio-notice{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 14px;font-size:13px;color:var(--phsp-text-primary);background:var(--phsp-panel);border-radius:12px}
.audio-notice[hidden],.audio-notice button[hidden]{display:none}
.audio-notice button{min-height:44px;padding:8px 16px;border-radius:12px;border:1px solid var(--phsp-accent);background:var(--phsp-panel);color:var(--phsp-text-primary);font:inherit;cursor:pointer;touch-action:manipulation}
.stage.is-3d .piano-hub .environment-panel{width:268px;max-width:calc(100vw - 92px);padding:14px;gap:12px;overflow-y:auto;overscroll-behavior:contain;box-shadow:0 16px 54px color-mix(in srgb,var(--phsp-shadow) 20%,transparent)}
.piano-hub .environment-picker[hidden]{display:none}
.environment-gallery header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:14px}
.environment-gallery button{font:inherit;color:var(--phsp-text-primary);cursor:pointer;touch-action:manipulation;border:0;background:transparent;min-height:44px}
.environment-gallery header button{width:44px;margin:-8px -8px -8px 0;font-size:23px;border-radius:12px}
.environment-hero{position:relative;border-radius:13px 13px 0 0;overflow:hidden;aspect-ratio:16/10;background:var(--phsp-surface)}
.environment-hero img{width:100%;height:100%;object-fit:cover;display:block}
.environment-hero>span{position:absolute;right:9px;top:9px;background:var(--phsp-accent);color:var(--phsp-ink);border:2px solid color-mix(in srgb,var(--phsp-panel) 60%,transparent);border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:13px}
.environment-switch{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:var(--phsp-surface);border-radius:0 0 12px 12px;margin-bottom:12px}
.environment-switch strong{text-align:center;font-size:12px;font-weight:600}
.environment-switch button{font-size:25px;border-radius:10px}
.environment-options{display:grid;gap:6px}
.environment-options button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:6px;border:1px solid transparent;border-radius:12px;font-size:12px}
.environment-options img{width:66px;height:45px;object-fit:cover;border-radius:8px;flex:none}
.environment-options i{margin-left:auto;font-style:normal;color:inherit;visibility:hidden}
.environment-options button[aria-pressed="true"]{background:color-mix(in srgb,var(--phsp-accent) 9%,var(--phsp-panel));border-color:color-mix(in srgb,var(--phsp-accent) 25%,transparent)}
.environment-options button[aria-pressed="true"] i{visibility:visible}
.environment-gallery button:hover{background:color-mix(in srgb,var(--phsp-accent) 12%,var(--phsp-panel))}
/* Pedal activity changes color, never the width of the transport column. */
.player-card #sustainToggle{box-sizing:border-box;inline-size:126px;min-inline-size:126px;justify-content:center;flex:none}
#sustainToggle b{display:inline-block;inline-size:4ch;text-align:center}
#sustainToggle::after{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor;opacity:.25}
#sustainToggle[aria-pressed="true"]::after{background:var(--phsp-accent-alt);opacity:1;box-shadow:0 0 6px color-mix(in srgb,var(--phsp-accent-alt) 55%,transparent)}
/* Both states overlay the same full-height stage, so hiding never reframes it. */
.player-card:is(:fullscreen,.is-immersive) .player-deck{position:absolute;inset:auto 0 0;max-height:55dvh;overflow-y:auto;transform:translateY(0);transition:transform 240ms ease,opacity 240ms ease,visibility 240ms}
.player-card:is(:fullscreen,.is-immersive)[data-immersive-chrome="oculto"] .player-deck{transform:translateY(100%)}
.transport-reveal{display:none}
.player-card:is(:fullscreen,.is-immersive) .transport-reveal{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;z-index:28;bottom:calc(var(--transport-height,120px) + 8px);left:50%;transform:translateX(-50%);min-height:44px;padding:8px 15px;border:1px solid var(--phsp-line);border-radius:24px;background:color-mix(in srgb,var(--phsp-panel) 92%,transparent);color:var(--phsp-accent);box-shadow:0 3px 18px color-mix(in srgb,var(--phsp-shadow) 13%,transparent);backdrop-filter:blur(16px);font:600 11px/1.3 system-ui;cursor:pointer;touch-action:manipulation}
.transport-reveal svg{width:16px;height:16px;transform:rotate(180deg)}
.player-card:is(:fullscreen,.is-immersive)[data-immersive-chrome="oculto"] .transport-reveal{bottom:max(10px,env(safe-area-inset-bottom))}
[data-immersive-chrome="oculto"] .transport-reveal svg{transform:none}
.transport-reveal:focus-visible{outline:3px solid var(--phsp-focus-ring);outline-offset:3px}
.player-card:has(.stage-settings[open]) .transport-reveal{visibility:hidden;pointer-events:none}
.player-card:is(:fullscreen,.is-immersive) .walk-overlay{bottom:var(--transport-height,120px)}
.player-card:is(:fullscreen,.is-immersive)[data-immersive-chrome="oculto"] .walk-overlay{bottom:0}
.player-card:is(:fullscreen,.is-immersive) .walk-guide{left:auto;right:14px;transform:none;bottom:12px}
@media(max-width:650px){.player-card #sustainToggle{inline-size:76px;min-inline-size:76px}.stage.is-3d .piano-hub .environment-panel{max-width:calc(100vw - 84px)}}
@media(max-width:650px) and (orientation:portrait){
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] .transport{grid-template-columns:44px 38px minmax(60px,1fr) 56px;gap:6px}
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] .sound-control{display:flex;grid-column:1/4;grid-row:2;min-width:0}
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] .sound-control>span{display:block}
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] .sound-control select{max-width:100%;min-width:0;width:100%}
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] #sustainToggle{grid-column:4;grid-row:2;inline-size:56px;min-inline-size:56px;gap:3px;padding-inline:3px;font-size:10px}
 .player-card:is(:fullscreen,.is-immersive)[data-immersive-aspect="portrait"] #reactionSlot{grid-column:1/-1;grid-row:3;justify-self:end}
}
@media(max-height:620px){.stage.is-3d .piano-hub .environment-panel{max-width:calc(100vw - 144px)}}
@media(prefers-reduced-motion:reduce){.player-card:is(:fullscreen,.is-immersive) .player-deck{transition:none}}
/* Supplied view icons, with names available on hover, focus and screen readers. */
.player-card .stage .visual-mode-toolbar{left:50%!important;right:auto!important;top:max(12px,env(safe-area-inset-top))!important;transform:translateX(-50%);padding:3px;gap:8px;width:max-content;max-width:none;overflow:visible;opacity:1;border:0;background:transparent;box-shadow:none}
.player-card .stage .visual-mode-toolbar button,.player-card .stage #stageFullscreenButton{display:grid;place-items:center;width:60px;height:60px;min-width:60px;min-height:60px;padding:2px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation}
.player-card .stage .visual-mode-toolbar button[aria-pressed="true"]{border-color:var(--phsp-accent);background:color-mix(in srgb,var(--phsp-panel) 40%,transparent)}
.visual-mode-toolbar img,#stageFullscreenButton img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.player-card .stage #stageFullscreenButton{position:absolute;top:max(15px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:26}
.stage #stageFullscreenButton:focus-visible,.stage .visual-mode-toolbar button:focus-visible{outline:3px solid var(--phsp-focus-ring);outline-offset:3px}
.stage .visual-mode-toolbar button::after,.stage #stageFullscreenButton::after{content:attr(aria-label);position:absolute;top:calc(100% + 7px);padding:7px 10px;border-radius:9px;background:var(--phsp-panel);color:var(--phsp-text-primary);font:500 12px/1.4 system-ui;white-space:nowrap;opacity:0;pointer-events:none}
.stage .visual-mode-toolbar button:is(:hover,:focus-visible)::after,.stage #stageFullscreenButton:is(:hover,:focus-visible)::after{opacity:1}
.stage #stageFullscreenButton::after{right:0}
/* Raise the rail; lower and fade the glass controls by 15 percent. */
.player-card .stage .piano-hub{top:clamp(100px,17%,170px);transform:none}
.player-card .stage .walk-stick{bottom:54px;opacity:.85}
.player-card .stage .fly-height{bottom:184px}
@media(max-height:850px){
 .player-card .stage .piano-hub{width:100px;top:130px}
 .piano-hub .piano-hub-panel{display:grid;grid-template-columns:44px 44px;gap:6px}
 .stage.is-3d .piano-hub .piano-hub-panel>button,.piano-hub .piano-hub-panel>details>summary{width:44px;height:44px;min-height:44px;border-radius:14px}
 .stage.is-3d .piano-hub .stage-settings-panel,.piano-hub .hub-detail-panel{left:104px}
}
@media(max-width:700px){.player-card .stage .walk-stick{bottom:60px}.player-card .stage .fly-height{bottom:172px}}
@media(max-height:500px){
 .player-card .stage .piano-hub{top:78px;width:max-content}
 .piano-hub .piano-hub-panel{grid-template-columns:repeat(7,44px);gap:6px}
 .player-card .stage .walk-stick{bottom:28px;width:80px;height:80px}
 .player-card .stage .walk-stick-move{left:16px}
 .player-card .stage .walk-stick i{left:18px;top:18px}
 .player-card .stage .walk-stick b{top:84px}
 .player-card .stage .fly-height{left:108px;bottom:45px}
 .stage.is-3d .piano-hub .stage-settings-panel,.piano-hub .hub-detail-panel{left:0;top:52px;max-height:calc(100dvh - 150px)}
}
/* The hit area and painted timeline share the same 85% width. */
.player-card .transport .timeline-label{width:85%;justify-self:center;min-width:0}
.reacao-selecionada{width:44px;height:44px;flex:none;border-radius:14px}
.reacao-selecionada .reacao-emoji{font-size:24px}
.reacao-mais,.reacao-atalho{min-height:44px;min-width:34px}
.reacoes-painel{position:fixed;z-index:60;left:var(--reaction-panel-left,16px);top:var(--reaction-panel-top,100px);right:auto;bottom:auto;width:260px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;box-sizing:border-box;border-radius:18px}
@media(max-width:650px){.reacoes{gap:0}.reacao-atalho,.reacao-mais{min-width:30px}.player-card .stage .visual-mode-toolbar button,.player-card .stage #stageFullscreenButton{width:52px;height:52px;min-width:52px;min-height:52px}}
.reacoes-painel{margin:0}.reacoes-painel::backdrop{background:transparent;pointer-events:none}
.player-card .stage .visual-mode-toolbar{transform:translateX(-50%)!important}
.player-card:is(:fullscreen,.is-immersive) .walk-guide{bottom:184px;right:22px}
@media(max-width:700px){.player-card:is(:fullscreen,.is-immersive) .walk-guide{bottom:174px;right:14px}}
@media(max-height:500px){.player-card:is(:fullscreen,.is-immersive) .walk-guide{bottom:122px;right:14px}}
/* Embedded stages are shorter than the viewport; use the compact rail there too. */
.player-card:not(:fullscreen):not(.is-immersive) .stage .piano-hub{top:90px;width:100px}
.player-card:not(:fullscreen):not(.is-immersive) .piano-hub-panel{display:grid;grid-template-columns:44px 44px;gap:6px}
.player-card:not(:fullscreen):not(.is-immersive) .piano-hub-panel>button,.player-card:not(:fullscreen):not(.is-immersive) .piano-hub-panel>details>summary{width:44px;height:44px;min-height:44px}
@media(max-height:500px){.player-card:not(:fullscreen):not(.is-immersive) .piano-hub-panel{grid-template-columns:repeat(7,44px)}}