/* ========================================================================== ManyHand — Stage mode A shared, opt-in "fill the page" layout for the playable instrument tools (harmonium, piano, instruments, drums, mridangam, percussion). Off by default. instrument-stage.js adds .mh-stage-on to when the player turns it on, and marks the playable elements so the rules below can stay page-agnostic: [data-stage-el] the wrapper that should grow to fill the screen [data-stage-flex] every element between that wrapper and the keys [data-stage-fill] the keyboard / pad grid itself ========================================================================== */ /* ---------- The toggle that lives in the page's own control bar ---------- */ .mh-stage-btn{ font:inherit; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 13px; border-radius:11px; border:1.5px solid var(--line,#e8ddc9); background:#fff; color:var(--maroon,#0e386d); -webkit-tap-highlight-color:transparent; } .mh-stage-btn:hover{ background:var(--cream,#faf5ec); } .mh-stage-btn[aria-pressed="true"]{ background:var(--maroon,#0e386d); border-color:var(--maroon,#0e386d); color:#fff; } /* ---------- The floating exit chip, only while stage mode is on ---------- */ .mh-stage-fab{ position:fixed; z-index:2147483000; display:none; top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right)); font:inherit; font-size:12px; font-weight:800; line-height:1; cursor:pointer; align-items:center; gap:6px; padding:8px 11px; border-radius:999px; border:1.5px solid var(--line,#e8ddc9); background:rgba(255,253,248,.86); color:var(--maroon,#0e386d); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 14px -6px rgba(34,26,18,.5); opacity:.45; transition:opacity .15s ease; -webkit-tap-highlight-color:transparent; } .mh-stage-fab:hover, .mh-stage-fab:focus-visible{ opacity:1; } html.mh-stage-on .mh-stage-fab{ display:inline-flex; } /* ---------- Stage mode layout ---------- */ html.mh-stage-on, html.mh-stage-on body{ height:100%; max-height:100%; overflow:hidden; overscroll-behavior:none; } html.mh-stage-on body{ display:flex; flex-direction:column; background:var(--cream,#faf5ec); } /* Reclaim every pixel that is not the instrument. */ html.mh-stage-on > body > header, html.mh-stage-on > body > footer, html.mh-stage-on main > h1, html.mh-stage-on main > .sub, html.mh-stage-on main > .hint, html.mh-stage-on main > section, html.mh-stage-on .rotate-note, html.mh-stage-on .mh-stage-hidden{ display:none !important; } html.mh-stage-on main{ flex:1 1 auto; min-height:0; width:100%; max-width:none; margin:0; display:flex; flex-direction:column; gap:7px; padding:calc(4px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left)); } /* Control bars stay, but compact to a single tidy strip. */ html.mh-stage-on .controls, html.mh-stage-on .transport{ flex:0 0 auto; margin:0 !important; padding:6px 10px !important; gap:6px 14px !important; align-items:center; box-shadow:none; /* One strip, never two: a wrapped second row costs the keys ~50px of height. It scrolls sideways instead on the narrowest screens. */ flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; } html.mh-stage-on .controls::-webkit-scrollbar, html.mh-stage-on .transport::-webkit-scrollbar{ display:none; } html.mh-stage-on .controls > *, html.mh-stage-on .transport > *{ flex:0 0 auto; } html.mh-stage-on .control{ flex-direction:row; align-items:center; gap:7px; } html.mh-stage-on .control > span{ display:none; } /* the controls read fine unlabelled here */ html.mh-stage-on input[type=range]{ width:104px; } html.mh-stage-on .mh-stage-btn{ padding:6px 11px; font-size:12px; } /* The playable area and everything between it and the keys. */ html.mh-stage-on [data-stage-el], html.mh-stage-on [data-stage-flex]{ flex:1 1 auto; min-height:0; min-width:0; display:flex; flex-direction:column; margin:0 !important; overflow:hidden; } html.mh-stage-on [data-stage-el]{ padding:8px 10px 10px; } /* The keyboard / pad grid itself: stretch, and drop the fixed sizes the page set for the normal scrolling layout. */ html.mh-stage-on [data-stage-fill]{ flex:1 1 auto; min-height:0 !important; max-height:none !important; height:auto !important; width:100% !important; min-width:0 !important; max-width:none !important; margin:0 !important; grid-auto-rows:1fr; /* pad grids fill vertically too */ } html.mh-stage-on [data-stage-fill] .pad{ aspect-ratio:auto; min-height:0; } /* ---------- Turn-your-phone nudge ---------- */ /* Only reachable where orientation cannot be locked for us (notably iOS). */ .mh-stage-rotate{ display:none; } @media (orientation:portrait) and (pointer:coarse){ html.mh-stage-on .mh-stage-rotate{ position:fixed; inset:0; z-index:2147482999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:var(--cream,#faf5ec); color:var(--golddeep,#0a5f57); font-weight:800; font-size:15px; text-align:center; padding:24px; } html.mh-stage-on .mh-stage-rotate .mh-rot-ico{ font-size:40px; } html.mh-stage-on .mh-stage-rotate small{ font-weight:600; font-size:13px; color:var(--inksoft,#6f6152); } } /* ---------- Per-tool touch-ups ---------- */ /* Harmonium: the wooden case is the stage, so keep its own padding tight. */ html.mh-stage-on[data-stage-tool="harmonium"] .fascia{ flex:0 0 auto; flex-wrap:nowrap; padding:3px 12px; margin-bottom:6px; } html.mh-stage-on[data-stage-tool="harmonium"] .fascia .maker{ font-size:13px; } html.mh-stage-on[data-stage-tool="harmonium"] .fascia .maker small{ display:none; } html.mh-stage-on[data-stage-tool="harmonium"] .stops{ gap:12px; } html.mh-stage-on[data-stage-tool="harmonium"] .stop{ flex-direction:row; gap:6px; } html.mh-stage-on[data-stage-tool="harmonium"] .stop .knob{ width:16px; height:16px; } html.mh-stage-on[data-stage-tool="harmonium"] [data-stage-el]{ padding:7px 10px 9px; } /* Drums: the pads take the room that is left; the sequencer stays reachable underneath but is capped so it cannot crowd them out. */ html.mh-stage-on[data-stage-tool="drums"] .panel:has(.seq-wrap){ flex:0 1 auto; min-height:0; max-height:40%; overflow:auto; padding:8px 10px !important; margin:0 !important; } html.mh-stage-on[data-stage-tool="drums"] .seq-wrap{ overflow-x:auto; } /* Mridangam: side-by-side barrel and sollus once there is width to spare. */ html.mh-stage-on[data-stage-tool="mridangam"] .np{ display:none; } html.mh-stage-on[data-stage-tool="mridangam"] .mridangam{ flex:1 1 auto; min-height:0; } html.mh-stage-on[data-stage-tool="mridangam"] .bols-label{ margin:8px 0 6px; } @media (orientation:landscape) and (min-width:700px){ html.mh-stage-on[data-stage-tool="mridangam"] [data-stage-el]{ flex-direction:row; gap:14px; align-items:stretch; } html.mh-stage-on[data-stage-tool="mridangam"] .mridangam{ flex:1 1 50%; min-width:0; } html.mh-stage-on[data-stage-tool="mridangam"] .bols-label{ display:none; } /* Two wide columns beat four slivers when the sollus sit beside the barrel. */ html.mh-stage-on[data-stage-tool="mridangam"] [data-stage-fill]{ flex:1 1 50%; align-self:stretch; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Piano and Instruments are a single octave, so on a wide desktop screen the full width would stretch eight white keys into slabs. Cap it and centre. */ @media (min-width:1060px){ html.mh-stage-on[data-stage-tool="piano"] [data-stage-fill], html.mh-stage-on[data-stage-tool="instruments"] [data-stage-fill]{ width:min(100%, 980px) !important; margin:0 auto !important; } } /* Keyboards are played edge to edge — never let one scroll sideways here. */ html.mh-stage-on .kbd-wrap, html.mh-stage-on .piano-wrap, html.mh-stage-on .pad-wrap{ overflow:hidden; }