/* The Originals Room: the play button over an instrument and the plugin window (studio/play.mjs).
   Same dim-studio look as the room: dark plates, thin lines, amber accents. */

.sp-float { position: fixed; z-index: 20; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 12px 0 4px; border-radius: 17px; border: 1px solid var(--amber); background: var(--plate);
    color: var(--fg); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
    backdrop-filter: blur(6px); box-shadow: 0 4px 18px #0008; }
.sp-float[hidden] { display: none; }
.sp-float svg { width: 26px; height: 26px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--amber); fill: var(--ink); }
.sp-float:hover { background: #2a241c; }

.sp-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #0b0a08b8; backdrop-filter: blur(3px); }
.sp-backdrop[hidden] { display: none; }
.sp-frame { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
    background: var(--plate); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 12px; box-shadow: 0 18px 60px #000a; }

/* The header, the hint and the drum keys take the plugin's width and wrap inside it, never widening the window. */
.sp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; align-self: stretch; width: 0; min-width: 100%; }
.sp-title { flex: 1 1 180px; min-width: 0; margin-right: 6px; }
.sp-title b { display: block; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.sp-title span { display: block; font-family: var(--mono); font-size: 11px; color: var(--amber); margin-top: 2px; }
.sp-hint { align-self: stretch; width: 0; min-width: 100%; margin: 0; font-family: var(--mono); font-size: 11px; color: var(--dim);
    line-height: 1.45; text-align: center; text-wrap: balance; }
.sp-hint:empty { display: none; }
.sp-oct, .sp-fx { display: flex; align-items: center; gap: 6px; }
.sp-oct[hidden], .sp-fx[hidden], .sp-fx select[hidden], .sp-scale [hidden] { display: none !important; }
.sp-oct-label { font-family: var(--mono); font-size: 12px; min-width: 26px; text-align: center; }
.sp-btn { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 4px; border: 1px solid var(--line);
    background: transparent; color: var(--fg); cursor: pointer; }
.sp-btn:hover, .sp-btn.on { border-color: var(--amber); }
.sp-btn.on { color: var(--amber); }
.sp-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.sp-loops svg { fill: currentColor; stroke: none; }
.sp-fx-power:not(.on) { color: var(--dim); }
.sp-fx-presets { height: 32px; width: 170px; background: var(--ink); color: var(--fg); border: 1px solid var(--line); border-radius: 4px;
    font-family: var(--mono); font-size: 11px; padding: 0 6px; }
.sp-close { margin-left: 4px; }

/* The plugin at its natural size, scaled down (never up) to fit the window. */
.sp-stage { position: relative; overflow: hidden; }
.sp-scale { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: max-content; }
.sp-backdrop.loading .sp-stage { min-height: 120px; }
.sp-scale .synth-panel, .sp-scale .fx-window { position: relative; inset: auto; z-index: auto; max-height: none; overflow: visible; margin: 0; box-shadow: none; }
.sp-scale .synth-panel.custom-panel { max-width: calc(100vw - 72px); }
/* Effects keep their full size (scaled down to fit), even on a phone. */
.sp-scale .fx-window, .sp-scale .fx-body > *, .sp-scale .fx-body canvas { max-width: none !important; }
.sp-keys { position: relative; height: 120px; margin-top: 6px; }
.sp-keys[hidden] { display: none; }

/* Drum machines: which computer key plays which sound. */
.sp-pads { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-self: stretch; width: 0; min-width: 100%; }
.sp-pads:empty { display: none; }
.sp-pad { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 4px; border-radius: 4px; border: 1px solid var(--line);
    background: var(--ink); color: var(--fg); font-family: var(--mono); font-size: 11px; cursor: pointer; touch-action: none; }
.sp-pad kbd { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 3px; background: #2a241c; color: var(--amber);
    font-family: var(--mono); font-size: 11px; }
.sp-pad:hover { border-color: var(--amber); }
.sp-pad.down { background: var(--amber-soft); border-color: var(--amber); }

.sp-status { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.sp-status:empty { display: none; }


/* The ProSeq screen's transport in the room's footer, after home and rotate. */
.tools .ft-gap { width: 6px; }
.tools .ft-play svg path, .tools .ft-play svg rect, .tools svg .fill { fill: currentColor; stroke: none; }
.tools .ft-play.on { color: var(--amber); border-color: var(--amber); }
.tools button.pending { color: var(--amber); border-color: var(--amber); animation: ft-pulse .8s ease-in-out infinite alternate; }
@keyframes ft-pulse { from { background: var(--plate); } to { background: #5a3d14; } }
@media (prefers-reduced-motion: reduce) { .tools button.pending { animation: none; background: #5a3d14; } }