/* SoulOne LIVE v0.7 — focused stage header and adaptive screen-fit layouts */
:root{--stage-blue:#0974cf;--stage-ink:#213b53;--stage-border:#d6e4ef}
html{min-height:100%;scrollbar-gutter:stable}
body{min-height:100dvh;margin:0;background:#eaf2f9}
button{touch-action:manipulation}
.app{max-width:100%;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.top.stage-header{display:grid;grid-template-columns:minmax(250px,1.3fr) auto minmax(220px,.8fr);align-items:center;gap:14px;min-width:0;padding:10px 13px;background:#fff;border:1px solid var(--stage-border);border-radius:15px;box-shadow:0 3px 14px #234c6d0b;position:relative}
.stage-identity{display:flex;gap:12px;align-items:center;min-width:0}
.stage-identity .brand{font-size:19px;font-weight:850;letter-spacing:-.9px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto}
.stage-identity .brand img{height:31px!important;width:31px!important;margin-right:4px!important}
.stage-identity .brand .live{font-size:11px;letter-spacing:.02em;padding:5px 6px;border-radius:5px}
.stage-identity .song-head{min-width:0;flex:1;border-left:1px solid #dfebf4;padding-left:13px}
.stage-identity .song-head strong{display:block;color:#213b53;font-size:clamp(16px,1.42vw,22px);line-height:1.15;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;letter-spacing:-.04em}
.stage-identity .song-head small{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:11px;color:#6c859d;margin-top:2px}
.stage-center{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.stage-field{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:56px;padding:4px 7px}
.stage-field .field-label{font-size:9px;font-weight:900;letter-spacing:.07em;color:#7290a9;text-transform:uppercase;white-space:nowrap}
.stage-field strong{font-size:23px;line-height:1;font-variant-numeric:tabular-nums;color:#203b54}
.stage-field--bpm .value-row{display:flex;gap:4px;align-items:center}
.stage-field--bpm .value-row button{width:27px;height:28px;padding:0;border-radius:8px;font-size:17px;font-weight:850;background:#f3f8fd}
.stage-field--bpm strong{font-size:22px;min-width:35px;text-align:center}
.stage-field--key{border-right:1px solid #e0eaf2;border-left:1px solid #e0eaf2;min-width:52px}
.stage-field--pitch{min-width:132px;padding-left:0;padding-right:0}
.stage-field--pitch .ctl-group{display:flex;align-items:center;justify-content:center;gap:6px}
.stage-field--pitch .ctl-group button{height:30px;min-width:31px;border-radius:8px;font-size:20px;padding:0}
.stage-field--pitch .ctl-group .val{font-size:21px;min-width:31px;text-align:center}
.stage-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0}
.stage-actions button{height:35px;border-radius:9px;font-size:12px;padding:0 10px;white-space:nowrap}
.stage-actions #status{margin:0;display:inline-flex;align-items:center;justify-content:center;min-height:32px;max-width:200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 10px;font-size:10px;letter-spacing:.03em;font-weight:850;flex-shrink:1}
.stage-actions .stage-icon{display:inline-flex;align-items:center;justify-content:center;gap:5px;background:#f4f8fc;color:#284c69;border:1px solid #d7e5ef;flex-shrink:0}
.stage-actions .stage-icon:focus-visible,.stage-more:focus-visible{outline:3px solid #3199ec}
.stage-actions .stage-icon .short-label{font-size:11px;font-weight:750}
.stage-actions .stage-more{font-weight:950;font-size:22px;min-width:38px;padding:0 8px;flex-shrink:0}
.stage-menu-wrap{position:relative;flex-shrink:0}
.stage-menu[hidden]{display:none!important}
.stage-menu{position:absolute;top:calc(100% + 9px);right:0;z-index:90;min-width:220px;max-width:300px;padding:9px;background:#fff;border:1px solid #cfdeeb;border-radius:12px;box-shadow:0 14px 35px #233e5b35;display:flex;flex-direction:column;gap:5px}
.stage-menu .menu-caption{margin:4px 9px 6px;font-size:10px;letter-spacing:.07em;color:#7290a9;font-weight:900;text-transform:uppercase}
.stage-menu .tools{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:5px}
.stage-menu .tools .mini,.stage-menu button{height:39px;width:100%;text-align:left;justify-content:flex-start;font-size:12px;white-space:normal}
.stage-menu .tools #keyboardHelp{width:100%;text-align:left}
.stage-menu .tools #status{display:none}
.stage-menu #fsHelp{font-size:11px;color:#66819a;line-height:1.45;padding:6px 9px}
.stage-footer-note{font-size:10px;color:#5e7b94;margin:2px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px}
.stage-footer-note .protected{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#fullscreenOffer[hidden]{display:none!important}
#fullscreenOffer{margin:9px 0 0;background:#f4f9ff;border:1px solid #bcdaf2;border-radius:12px;display:flex;align-items:center;gap:12px;padding:11px 14px;color:#264765}
#fullscreenOffer .offer-copy{flex:1;min-width:0}
#fullscreenOffer .offer-copy strong{display:block;font-size:13px}
#fullscreenOffer .offer-copy p{font-size:11px;color:#64829b;margin:3px 0 0;line-height:1.35}
#fullscreenOffer button{height:36px;padding:0 12px;white-space:nowrap;font-size:12px}
#fullscreenOffer #fullscreenAccept{background:#086ed7;color:white;border-color:#086ed7}
#fullscreenOffer #fullscreenNever{background:transparent;color:#56718b;min-width:0}
#fullscreenOffer .offer-controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.stage-header .stat,.stage-header .transpose-head{border:0;padding:0}
.stage-header .stat small,.stage-header .transpose-head .under{display:none}
.stage-header .transpose-head .safe{display:none}
.stage-header .tools{margin:0}
.stage-header button[disabled]{opacity:.55}
html:fullscreen body,html:fullscreen{overflow:hidden}
html:fullscreen .app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
html:fullscreen .main-grid{flex:1;min-height:0;overflow:auto}
html:fullscreen .stems-visual{max-height:min(43dvh,420px);overflow-y:auto}
html:fullscreen .bottomline{display:none}
html:fullscreen #fullscreenOffer{display:none}
html:fullscreen .stage-header{flex:0 0 auto}
html:fullscreen .stage-footer-note{flex:0 0 auto}
/* PWA opens without browser chrome; keep mobile safe areas */
@media(display-mode:standalone){body{min-height:100dvh}.app{padding-top:max(8px,env(safe-area-inset-top))}}
@media(max-width:1260px){
  .top.stage-header{grid-template-columns:minmax(220px,1fr) auto;gap:10px}
  .stage-identity{grid-column:1;grid-row:1}
  .stage-actions{grid-column:2;grid-row:1}
  .stage-center{grid-column:1/-1;grid-row:2;justify-content:space-evenly;border-top:1px solid #e6eef5;padding-top:8px}
  .stage-field{min-width:0}
}
@media(max-width:820px){
  .top.stage-header{grid-template-columns:minmax(0,1fr) auto;padding:9px 10px}
  .stage-actions #status{max-width:128px;font-size:9px;padding:4px 7px}
  .stage-center{justify-content:space-between;gap:7px}
  .stage-identity .brand{font-size:18px}
  .stage-identity .song-head strong{font-size:19px}
  .stage-field--pitch{min-width:120px}
  .stage-actions .stage-icon .short-label{display:none}
  .stage-actions .stage-icon{min-width:35px;padding:0 7px}
  #fullscreenOffer{flex-wrap:wrap}
}
@media(max-width:530px){
  .app{padding:6px max(5px,env(safe-area-inset-right)) 8px max(5px,env(safe-area-inset-left))}
  .top.stage-header{gap:7px;padding:9px}
  .stage-identity{gap:7px}
  .stage-identity .brand{font-size:0;gap:0}
  .stage-identity .brand img{width:28px!important;height:28px!important;margin:0!important}
  .stage-identity .brand .live{font-size:9px;letter-spacing:0;padding:4px}
  .stage-identity .song-head{padding-left:8px}
  .stage-identity .song-head strong{font-size:16px;max-width:44vw}
  .stage-identity .song-head small{font-size:10px;max-width:44vw}
  .stage-actions{gap:4px}
  .stage-actions #status{font-size:0;width:10px;height:10px;min-width:10px;min-height:10px;padding:0;border-radius:50%;background:#21ad84;border:0;box-shadow:0 0 0 3px #ddf7ec}
  .stage-actions .stage-more{min-width:32px;padding:0 6px;font-size:19px}
  .stage-actions .stage-icon{min-width:33px;height:33px;padding:0}
  .stage-center{margin-top:1px;gap:4px;padding-top:8px}
  .stage-field{padding:2px 1px}
  .stage-field--bpm .value-row button{width:28px;height:29px}
  .stage-field--bpm strong{font-size:19px}
  .stage-field--key{min-width:37px}
  .stage-field--key strong{font-size:19px}
  .stage-field--pitch{min-width:112px}
  .stage-field--pitch .ctl-group{gap:4px}
  .stage-field--pitch .ctl-group button{min-width:29px;height:29px}
  .stage-field--pitch .ctl-group .val{font-size:19px;min-width:24px}
  .stage-footer-note{font-size:9px}
  #fullscreenOffer{padding:10px;gap:8px}
  #fullscreenOffer .offer-controls{width:100%;justify-content:flex-end}
  #fullscreenOffer button{height:34px}
}
@media(max-width:360px){
  .stage-field--bpm .value-row button{width:23px;height:26px}
  .stage-field--pitch{min-width:100px}
  .stage-field--pitch .ctl-group button{min-width:25px;height:26px}
}
@media(orientation:landscape) and (max-height:500px){
  .stage-header .stage-identity .song-head small{display:none}
  .top.stage-header{padding:6px 10px}
  .stage-center{padding-top:4px}
  .stage-field strong{font-size:18px}
  #fullscreenOffer{padding:7px}
  html:fullscreen .stems-visual{max-height:26dvh}
  html:fullscreen .main-grid{min-height:0}
}