/* Shared concert presentation for 2D and 3D. Scene geometry is untouched. */
.identity-panel{display:contents}.concert-motto,.concert-view-label,.concert-hand-label{display:none}
:root:is([data-theme="phsp-alvorada"],[data-theme="phsp-amadeirado"]) .concert-player{
 --phsp-ink:#fff5df;--phsp-panel:#fff6e5;--phsp-surface:#f2e5cd;--phsp-text-primary:#30251a;--phsp-text-muted:#73634f;
 --phsp-accent:#885007;--phsp-accent-alt:#b97c27;--phsp-line:#cdab74;--phsp-shadow:#594021;--phsp-focus-ring:#82500f;
 --phsp-voices-left:#9c6009;--phsp-voices-right:#4e6254;--phsp-voices-melody:#b91b40;
}
.concert-player{background:linear-gradient(0deg,color-mix(in srgb,var(--phsp-shadow) 16%,transparent),transparent),url('./media/player-design/dawn-terrace-v1.png') center top/cover fixed}
.concert-player .shell{padding:20px clamp(12px,1.7vw,36px) 22px}
.concert-player main,.concert-player .topbar{max-width:2200px}
.concert-player .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:0;margin-bottom:12px;background:none;border:0;backdrop-filter:none;min-height:100px;align-items:end}
.concert-player .identity-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:24px;min-height:112px;padding:12px 24px;border:1px solid var(--phsp-line);border-radius:28px;background:linear-gradient(120deg,color-mix(in srgb,var(--phsp-panel) 96%,transparent),color-mix(in srgb,var(--phsp-panel) 86%,transparent));box-shadow:inset 0 2px 2px color-mix(in srgb,var(--phsp-panel) 95%,transparent),0 8px 28px color-mix(in srgb,var(--phsp-shadow) 13%,transparent);backdrop-filter:blur(16px)}
.concert-player .brand .phsp-piano-logo{width:82px;height:82px;border-radius:18px}
.concert-player .track-heading .eyebrow{display:none}
.concert-player .track-picker select{font-family:Georgia,'Times New Roman',serif;font-weight:600;font-size:clamp(25px,2.35vw,48px);border:0;padding:0;line-height:1.15}
.concert-player .track-heading p{font-size:clamp(12px,.94vw,18px);letter-spacing:.025em;margin-top:10px}
.concert-player .header-actions{padding-bottom:8px;gap:10px}
.concert-player :is(.studio-link,.icon-button,.theme-picker select){min-height:44px;border:1px solid var(--phsp-line);border-radius:12px;background:linear-gradient(145deg,var(--phsp-panel),var(--phsp-surface));box-shadow:inset 0 2px 2px color-mix(in srgb,var(--phsp-panel) 85%,transparent),0 3px 8px color-mix(in srgb,var(--phsp-shadow) 13%,transparent);color:var(--phsp-text-primary)}
.concert-player .theme-picker select{padding:10px 16px;max-width:170px}
.concert-player .theme-picker label{color:var(--phsp-text-primary);text-shadow:0 1px 4px var(--phsp-panel)}
.concert-player .player-card{border:2px solid var(--phsp-line);border-radius:28px;overflow:hidden;background:var(--phsp-panel);box-shadow:0 0 0 6px color-mix(in srgb,var(--phsp-panel) 45%,transparent),inset 0 2px 2px var(--phsp-panel),0 14px 46px color-mix(in srgb,var(--phsp-shadow) 25%,transparent)}
.concert-player .stage{min-height:clamp(390px,60vh,850px);border-radius:23px 23px 0 0;border:6px solid color-mix(in srgb,var(--phsp-panel) 75%,var(--phsp-line));border-bottom-width:0}
.concert-player .player-card:has(.stage) .player-deck{padding:10px;gap:8px;border:0;background:linear-gradient(130deg,var(--phsp-surface),var(--phsp-panel))}
.concert-player :is(.section-bar,.voice-toolbar){min-height:62px;gap:12px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--phsp-line) 55%,transparent);border-radius:19px;background:color-mix(in srgb,var(--phsp-panel) 80%,transparent);box-shadow:inset 0 2px 4px color-mix(in srgb,var(--phsp-shadow) 9%,transparent),0 2px 4px color-mix(in srgb,var(--phsp-panel) 90%,transparent)}
.concert-player :is(.section-bar-label,.voice-toolbar-label){font-family:Georgia,serif;font-size:13px;letter-spacing:.12em;color:var(--phsp-text-primary)}
.concert-player :is(.section-chip,.focus-chip,.learn-toggle,.chord-toggle){min-height:44px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--phsp-line) 35%,transparent);border-radius:9px;background:linear-gradient(145deg,var(--phsp-panel),color-mix(in srgb,var(--phsp-panel) 55%,var(--phsp-surface)));box-shadow:0 3px 8px color-mix(in srgb,var(--phsp-shadow) 11%,transparent);font-size:13px;letter-spacing:0;color:var(--phsp-text-primary)}
.concert-player :is(.section-chip,.focus-chip) b{font-size:12px;color:var(--phsp-text-muted)}
.concert-player :is(.section-chip,.focus-chip).is-active,.concert-player .live-chord-tabs button[aria-pressed="true"]{color:var(--phsp-ink);border:1px solid var(--phsp-accent-alt);background:radial-gradient(ellipse at 50% 0%,var(--phsp-accent-alt),transparent 80%),linear-gradient(120deg,var(--phsp-accent),color-mix(in srgb,var(--phsp-accent) 55%,var(--phsp-shadow)));box-shadow:inset 0 1px 5px color-mix(in srgb,var(--phsp-ink) 75%,transparent),inset 0 -2px 5px var(--phsp-accent-alt),0 0 12px color-mix(in srgb,var(--phsp-accent-alt) 40%,transparent)}
.concert-player :is(.section-chip,.focus-chip).is-active :is(b,svg),.concert-player :is(.section-chip,.focus-chip).is-active::before{color:inherit}
.concert-player .concert-hand-label{display:inline}
.concert-player .player-card:has(.stage) .transport{padding:8px 14px;min-height:70px;border:0;background:none;grid-template-columns:56px 44px minmax(100px,1fr) 44px auto auto auto auto;gap:10px}
.concert-player .player-card:has(.stage) .play-button{width:54px;height:54px;font-size:22px;background:radial-gradient(ellipse at 30% 10%,var(--phsp-accent-alt),var(--phsp-accent) 65%,var(--phsp-shadow));border:1px solid var(--phsp-accent-alt);box-shadow:inset 0 2px 5px var(--phsp-panel),inset 0 -2px 6px var(--phsp-accent-alt),0 0 0 3px color-mix(in srgb,var(--phsp-accent-alt) 45%,transparent),0 4px 12px color-mix(in srgb,var(--phsp-shadow) 25%,transparent)}
.concert-player .player-card:has(.stage) .transport :is(select,#sustainToggle){border-radius:10px;min-height:42px;border-color:var(--phsp-line);background:color-mix(in srgb,var(--phsp-panel) 80%,transparent)}
.concert-player .timeline-label::before,.concert-player .player-card:has(.stage) .timeline-fill{height:5px;border-radius:4px}
.concert-player .player-card:has(.stage) .timeline-fill{background:linear-gradient(90deg,var(--phsp-accent-alt),var(--phsp-accent))}
.concert-player .player-card:has(.stage) .timeline-fill::after{width:14px;height:14px;background:var(--phsp-accent);box-shadow:0 0 6px var(--phsp-accent-alt)}
.concert-player .player-card .stage .visual-mode-toolbar{background:color-mix(in srgb,var(--phsp-panel) 92%,transparent);padding:5px;border:1px solid color-mix(in srgb,var(--phsp-line) 40%,transparent);box-shadow:0 3px 14px color-mix(in srgb,var(--phsp-shadow) 15%,transparent);border-radius:14px;gap:3px}
.concert-player .player-card .stage .visual-mode-toolbar button{width:auto;height:42px;min-height:42px;min-width:96px;padding:8px 16px;border:0;border-radius:9px;background:none;font-size:14px}
.concert-player .visual-mode-toolbar img{display:none}.concert-player .concert-view-label{display:inline}
.concert-player .player-card .stage .visual-mode-toolbar button[aria-pressed="true"]{background:linear-gradient(145deg,var(--phsp-accent-alt),var(--phsp-accent) 70%);color:var(--phsp-ink);box-shadow:inset 0 1px 4px var(--phsp-panel),0 0 10px color-mix(in srgb,var(--phsp-accent-alt) 50%,transparent)}
.concert-2d .stage .chord-disclosure{left:14px;top:14px}
.concert-2d .stage .chord-disclosure[open]>summary{position:absolute;right:8px;top:8px;z-index:31;left:auto;width:38px;height:38px;min-height:38px;opacity:.65;background:none;box-shadow:none;border:0}
.concert-2d .stage .chord-disclosure[open]{width:240px}
.concert-2d .stage .chord-disclosure .live-chord{position:relative;z-index:1;left:0;top:0;width:240px;max-width:none;padding:12px;border:1px solid var(--phsp-line);border-radius:18px;background:linear-gradient(125deg,var(--phsp-panel),var(--phsp-surface));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--phsp-panel) 65%,transparent),0 6px 18px color-mix(in srgb,var(--phsp-shadow) 18%,transparent)}
.concert-player .live-chord-tabs{padding-right:38px;border-color:var(--phsp-line)}
.concert-player .live-chord-tabs button{min-height:38px;border-radius:10px;font-family:Georgia,serif;font-size:15px}
.concert-player .live-chord-heading strong{font-family:Georgia,serif;font-size:27px;color:var(--phsp-text-primary)}
.concert-player .live-chord-heading{margin:12px 4px}
.concert-player .live-chord-keys{margin:12px 10px;height:66px;border-radius:5px;box-shadow:0 2px 4px var(--phsp-shadow);overflow:hidden}
.concert-player .live-chord-actions{gap:10px;margin-top:16px}
.concert-player .live-chord-actions button{min-height:40px;border:1px solid var(--phsp-line);border-radius:9px;background:var(--phsp-panel);color:var(--phsp-text-primary)}
@media(min-width:1800px){.concert-player .identity-panel{grid-template-columns:auto 145px minmax(0,1fr)}.concert-player .concert-motto{display:grid;gap:10px;text-align:center;font-size:11px;letter-spacing:.14em;color:var(--phsp-accent-alt)}.concert-player .concert-motto span{letter-spacing:0}}
@media(max-width:1200px){.concert-player .topbar{gap:12px}.concert-player .identity-panel{padding:12px;gap:12px}.concert-player .header-actions{flex-wrap:wrap;max-width:310px}.concert-player .player-card:has(.stage) .transport{grid-template-columns:50px 38px minmax(70px,1fr) 38px auto auto auto}.concert-player .player-card:has(.stage) .transport .speed-control{grid-column:6/-1;justify-self:end}.concert-player :is(.section-bar,.voice-toolbar){gap:7px;padding:8px}.concert-player :is(.section-chip,.focus-chip){padding-inline:10px}}
@media(max-width:999px){.concert-player .topbar{grid-template-columns:1fr}.concert-player .identity-panel{min-height:88px}.concert-player .brand .phsp-piano-logo{width:64px;height:64px}.concert-player .header-actions{max-width:none;padding:0;justify-content:flex-end;flex-wrap:wrap}.concert-player .voice-toolbar{flex-wrap:wrap}.concert-player .stage{min-height:440px}.concert-2d .stage .chord-disclosure .live-chord{left:54px;position:absolute}.concert-2d .stage .chord-disclosure[open]{width:48px}.concert-2d .stage .chord-disclosure[open]>summary{position:static;width:48px;height:48px;opacity:1;background:var(--phsp-panel)}.concert-player .player-card:has(.stage) .transport{grid-template-columns:44px 34px minmax(50px,1fr) 34px auto}.concert-player .sound-control{grid-row:2;grid-column:1/4}.concert-player #sustainToggle{grid-row:2;grid-column:4/6}.concert-player .player-card:has(.stage) .transport .speed-control{grid-row:3;grid-column:3/6}.concert-player .player-card:has(.stage) .transport #reactionSlot{grid-row:3;grid-column:1/3}.concert-player .concert-hand-label{font-size:12px}}
@media(max-width:600px){.concert-player .shell{padding:10px}.concert-player .identity-panel{border-radius:20px}.concert-player .track-picker select{font-size:23px}.concert-player .header-actions{gap:6px}.concert-player .studio-link{padding:10px;font-size:10px}.concert-player .theme-picker{margin-right:auto}.concert-player .theme-picker label{display:none}.concert-player .theme-picker select{max-width:135px}.concert-player .player-card:has(.stage) .player-deck{padding:6px}.concert-player .player-card .stage .visual-mode-toolbar button{min-width:66px;font-size:12px;padding:6px 8px}.concert-player .player-card .stage #stageFullscreenButton{width:44px;min-width:44px;height:44px;min-height:44px;right:6px}.concert-2d .stage .chord-disclosure{top:74px;left:8px}.concert-player .player-card:has(.stage) .transport{padding:8px 5px}.concert-player .stage{min-height:410px}.concert-player .voice-toolbar :is(button){min-height:42px}.concert-player .section-chip{white-space:nowrap}}
/* Fullscreen keeps the established automatic hide/reveal behavior. */
.concert-player .player-card:is(:fullscreen,.is-immersive){border-radius:0;border:0}
.concert-player .player-card:is(:fullscreen,.is-immersive) .stage{border:0;border-radius:0;min-height:0}

/* Keep touch controls in explicit rows, above older compact-player rules. */
@media(max-width:999px){
 .concert-player .player-card:has(.stage) .transport{grid-template-columns:54px 36px minmax(50px,1fr) 38px;grid-template-rows:auto auto auto;gap:8px}
 .concert-player .player-card:has(.stage) .transport #playButton{grid-area:1/1}
 .concert-player .player-card:has(.stage) .transport #currentTime{grid-area:1/2}
 .concert-player .player-card:has(.stage) .transport #timelineLabel{grid-area:1/3;width:85%}
 .concert-player .player-card:has(.stage) .transport #duration{grid-area:1/4}
 .concert-player .player-card:has(.stage) .transport #reactionSlot{grid-area:2/1/3/4;justify-self:start}
 .concert-player .player-card:has(.stage) .transport #sustainToggle{grid-area:2/4;justify-self:end;inline-size:62px;min-inline-size:62px}
 .concert-player .player-card:has(.stage) .transport .sound-control{grid-area:3/1/4/5;width:100%;min-width:0;display:flex}
 .concert-player .player-card:has(.stage) .transport .sound-control select{width:100%;min-width:0;max-width:none}
 .concert-player .player-card:has(.stage) .transport .speed-control{display:none}
}
@media(max-height:500px) and (min-width:650px){
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport{grid-template-columns:46px 32px minmax(80px,1fr) 32px auto auto 64px;grid-template-rows:auto;gap:6px;padding:2px}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #playButton{width:42px;height:42px;grid-area:1/1}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #currentTime{grid-area:1/2}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #timelineLabel{grid-area:1/3}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #duration{grid-area:1/4}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #reactionSlot{grid-area:1/5}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport .sound-control{grid-area:1/6;width:120px}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport .sound-control>span{display:none}
 .concert-player .player-card:is(:fullscreen,.is-immersive) .transport #sustainToggle{grid-area:1/7}
}
.concert-2d .player-card:is(:fullscreen,.is-immersive) .stage{flex:none;min-height:0;height:calc(100% - var(--transport-height,120px))}
.concert-player .player-card:is(:fullscreen,.is-immersive)[data-immersive-chrome="oculto"] .stage{height:100%}
.concert-2d .stage .chord-disclosure[open]>summary{color:var(--phsp-accent)}


.concert-player .stage.is-3d .chord-disclosure{top:14px;left:14px}

