/* MISS SHEEN rig: SUBMARINE bass machine, WARP PAD and SIX STRING guitar (groovebox-rig.js). Sits under the groovebox and synth. */
.rg { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 760px) { .rg { grid-template-columns: minmax(0, 1fr) 300px; } .rg .six { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .rg { grid-template-columns: minmax(0, 1.05fr) 290px minmax(0, 1fr); } .rg .six { grid-column: auto; } }

.rg-panel {
  --cz-acc: #46b4ff; --cz-hot: #7fd1ff; --rg-glow: rgba(70,180,255,.08);
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 60% at 0% 0%, var(--rg-glow), transparent 60%), linear-gradient(180deg, #16181d, #101115);
  border: 1px solid var(--line, #232329); border-radius: 24px; padding: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--ink, #f4f4f1); font-family: inherit; transition: box-shadow .2s, border-color .2s, opacity .2s;
}
.rg-panel button { font-family: inherit; color: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; margin: 0; min-height: 0; }
.rg-panel .gbx-chip.on { background: var(--cz-acc); border-color: var(--cz-acc); color: #071018; }
.rg-panel.warp { --cz-acc: #ff3d7f; --cz-hot: #b07cff; --rg-glow: rgba(176,124,255,.1); }
.rg-panel.six { --cz-acc: #ffb020; --cz-hot: #ff7a2e; --rg-glow: rgba(255,176,32,.08); }
.rg-panel.off > :not(.rg-head) { opacity: .45; }
.msx.live-guitar .six { border-color: var(--cz-acc); box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 0 1px var(--cz-acc), 0 0 34px rgba(255,176,32,.25); }
.msx.live-guitar .msx-bar button.on { background: #ffb020; border-color: #ffb020; color: #120c02; box-shadow: 0 0 16px rgba(255,176,32,.45); }

.rg-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rg-brand { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; flex: none; }
.rg-brand b { font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: .05em; white-space: nowrap;
  background: linear-gradient(90deg, var(--cz-acc), var(--cz-hot)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rg-brand span { font-size: 9px; letter-spacing: .2em; color: var(--mute, #9a9aa3); margin-top: 5px; white-space: nowrap; }
.rg-lcd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: #050608; border: 1px solid #000;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.9); font: 700 11px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .05em; color: var(--cz-acc); }
.rg-lcd b, .rg-lcd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 8px color-mix(in srgb, var(--cz-acc) 60%, transparent); }
.rg-lcd span { opacity: .75; }
.rg-pow { flex: none; margin-left: auto !important; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line, #232329) !important; background: #0b0b0d !important; padding: 0 !important; position: relative; }
.rg-pow::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 2px solid #4a4650; border-top-color: transparent; }
.rg-pow::after { content: ''; position: absolute; left: calc(50% - 1px); top: 7px; width: 2px; height: 9px; border-radius: 1px; background: #4a4650; }
.rg-pow.on::before { border-color: var(--cz-acc); border-top-color: transparent; filter: drop-shadow(0 0 4px var(--cz-acc)); }
.rg-pow.on::after { background: var(--cz-acc); }
.rg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rg-panel .gbx-chip { padding: 7px 10px; font-size: 12px; }
.rg-panel .gbx-demo { max-width: 190px; font-size: 12px; }
.rg-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--dim, #6b6b74); }
.rg-knobs { display: flex; gap: 4px; justify-content: space-between; }
.rg-k { cursor: ns-resize; }

/* SUBMARINE */
.sub-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sub-grid { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 14px; background: #08090b; border: 1px solid #1f2229; touch-action: none; }
.sub-row { display: grid; grid-template-columns: 44px repeat(16, minmax(0, 1fr)); gap: 2px; align-items: center; }
.sub-rl { font: 700 10px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--mute, #9a9aa3); white-space: nowrap; overflow: hidden; }
.sub-row.root .sub-rl { color: var(--cz-acc); }
.sub-c { position: relative; height: 15px; border-radius: 3px; background: #15171c; cursor: pointer; }
.sub-c.beat { background: #1c1f26; }
.sub-row.root .sub-c { background: #18202a; }
.sub-row .sub-c.on { background: var(--cz-acc); box-shadow: 0 0 8px color-mix(in srgb, var(--cz-acc) 55%, transparent); }
.sub-c.sl::after { content: ''; position: absolute; left: 70%; right: -5px; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: var(--cz-acc); z-index: 1; }
.sub-c.now { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.sub-row .sub-c.now.on { background: #fff; }
.sub-mod { margin-top: 3px; }
.sub-acc { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #23262e; }
.sub-t { height: 11px; border-radius: 6px; background: #15171c; cursor: pointer; }
.sub-t.on { background: #fff; }
.sub-sl .sub-t.on { background: var(--cz-hot); }
.sub-t.dis { opacity: .35; cursor: default; }
.sub-t.now { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.sub.trig .rg-lcd { animation: rg-blink .18s ease-out; }
@keyframes rg-blink { 0% { box-shadow: inset 0 2px 10px rgba(0,0,0,.9), 0 0 14px color-mix(in srgb, var(--cz-acc) 60%, transparent); } }
.sub-eng { gap: 4px; }
.rg-tools .gbx-oct { display: flex; align-items: center; gap: 4px; }
.rg-tools .gbx-oct button { width: 30px; padding: 6px 0; }
.rg-tools .gbx-oct span { min-width: 22px; text-align: center; font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace; }

/* WARP PAD */
.warp-pad { position: relative; aspect-ratio: 1; width: 100%; border-radius: 18px; overflow: hidden; cursor: crosshair; touch-action: none; outline: none;
  background: radial-gradient(circle at 30% 70%, rgba(176,124,255,.18), transparent 60%), radial-gradient(circle at 75% 25%, rgba(255,61,127,.16), transparent 55%), #07060a;
  border: 1px solid #2a2230; box-shadow: inset 0 2px 18px rgba(0,0,0,.9); transition: box-shadow .2s, border-color .2s; }
.warp-pad:focus-visible { border-color: var(--cz-acc); }
.warp-pad.on { border-color: var(--cz-acc); box-shadow: inset 0 2px 18px rgba(0,0,0,.9), 0 0 26px rgba(255,61,127,.35); }
.warp-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.warp-x, .warp-y, .warp-v { position: absolute; font: 700 10px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; color: #b9a6d6; pointer-events: none; text-transform: uppercase; }
.warp-x { right: 10px; bottom: 8px; }
.warp-y { left: 10px; top: 9px; }
.warp-v { left: 10px; bottom: 8px; color: #fff; text-shadow: 0 0 8px var(--cz-acc); max-width: 60%; }
.warp-t { gap: 4px; }
.warp-hold { margin-left: auto !important; }

/* SIX STRING */
.six-neck { position: relative; height: 132px; border-radius: 12px; overflow: hidden; touch-action: none; cursor: ns-resize; background: #0b0806; border: 1px solid #000; box-shadow: inset 0 2px 12px rgba(0,0,0,.9); }
.six-svg { width: 100%; height: 100%; display: block; }
.six-wood { fill: #2a1a10; stroke: #120b06; }
.six-nut { fill: #e9dfc9; }
.six-fret { stroke: #b7ad9c; stroke-width: 2; opacity: .75; }
.six-inlay { fill: #e9dfc9; opacity: .22; }
.six-str { stroke: #d9cfbe; opacity: .9; }
.six-str.ring { animation: six-ring .5s ease-out; }
@keyframes six-ring { 0% { stroke: #fff; filter: drop-shadow(0 0 4px #ffb020); transform: translateY(1.4px); } 20% { transform: translateY(-1.2px); } 40% { transform: translateY(.8px); } 60% { transform: translateY(-.4px); } 100% { stroke: #d9cfbe; transform: none; } }
.six-ox { fill: #c8bfb0; font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; }
.six-ox.x { fill: #ff6b6b; }
.six-dot { fill: #ffb020; stroke: #120b06; stroke-width: 1.5; }
.six-dot.root { fill: #ff4d2e; }
.six-dn { fill: #120b06; font: 800 7.5px/1 Inter, system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.six-fn { fill: #c8bfb0; font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; text-anchor: middle; }
.six-cn { fill: #ffb020; font: 900 11px/1 Inter, system-ui, sans-serif; text-anchor: end; opacity: .9; }
.six-slots { display: flex; flex-wrap: wrap; gap: 5px; }
.six-slot { display: flex; align-items: baseline; gap: 5px; padding: 7px 11px !important; border-radius: 10px; border: 1px solid var(--line, #232329) !important; background: #0b0b0d !important; }
.six-slot b { font-size: 14px; font-weight: 800; }
.six-slot small { font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--dim, #6b6b74); }
.six-slot.sel { border-color: var(--cz-acc) !important; }
.six-slot.now { background: var(--cz-acc) !important; color: #120c02; }
.six-slot.now small { color: #3a2a08; }
.six-pal { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.six-pc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px !important; border-radius: 10px; border: 1px solid var(--line, #232329) !important; background: #0b0b0d !important; min-width: 0; }
.six-pc small { font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--mute, #9a9aa3); }
.six-pc b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.six-pc kbd { font-size: 9px; padding: 0 4px; opacity: .55; }
.msx.live-guitar .six-pc kbd { opacity: 1; color: #ffb020; }
.six-pc:hover { border-color: var(--cz-acc) !important; }
.six-pc.hit { animation: six-hit .3s ease-out; }
@keyframes six-hit { 0% { background: #ffb020; color: #120c02; } }
.six-sev { align-self: stretch; padding: 4px !important; justify-content: center; border-radius: 10px !important; }
.six-strip { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; }
.six-st { height: 20px; display: grid; place-items: center; border-radius: 4px; background: #15171c; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--cz-acc); }
.six-st.beat { background: #1f1a12; }
.six-st.rest { color: transparent; }
.six-st.soft { opacity: .6; }
.six-st.now { background: var(--cz-acc); color: #120c02; opacity: 1; }
.six-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.six-tone { gap: 4px; }
.six-knobs { flex: 1; min-width: 150px; max-width: 220px; }
.six .gbx-demo.six-pat { max-width: 210px; }

/* Themify styles every select as a white form box: put ours back */
.mxp-app .rg select.gbx-demo { width: auto; margin: 0; }

@media (max-width: 600px) {
  .rg { gap: 0; }
  .rg-panel { border-radius: 0; border-left: 0; border-right: 0; padding: 16px 12px 18px; }
  .sub-row { grid-template-columns: 36px repeat(16, minmax(0, 1fr)); }
  .sub-c { height: 18px; }
  .rg-lcd { display: none; }
  .warp-pad { max-width: 360px; margin: 0 auto; }
  .six-pal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .six-pc kbd, .six-hint, .warp .rg-hint { display: none; }
}
@media (hover: none) and (pointer: coarse) { .six-pc kbd, .six-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .six-str.ring, .six-pc.hit, .sub.trig .rg-lcd { animation: none; } }