/* ============================================================================
   GlowBop console: design system + layout (phone, iPad portrait/landscape, Windows window)
   Palette: logo neon (pink, violet, cyan) + console panel colors (amber, orange, lavender, gold, periwinkle)
   ========================================================================== */
:root { --fs:1.12;
  --pink:#ff3d9a; --violet:#9b3dff; --cyan:#33d6ff; --amber:#ffb23d; --orange:#ff7a3d; --lav:#cc99ff; --gold:#ffcc66; --peri:#6677ff; --green:#3ce08a; --red:#ff4d6d; --lime:#b6ff3d; --orchid:#e45cff;
  --bg:#000; --panel:#0a0812; --dark:#26213a; --dark2:#1a1628; --line:#2e2845; --text:#f4f2ff; --dim:#a9a3c8; --label:#9b8cff;
  --cond:'Saira Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --mono:'Share Tech Mono', ui-monospace, Menlo, Consolas, monospace;
  --body:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --railw:68px; --elbow:28px; --gap:12px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; background:var(--bg); color:var(--text); font:calc(15px * var(--fs, 1))/1.4 var(--body); }
body { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); min-height:100vh; overflow-x:hidden; }
[hidden] { display:none !important; }
a { color:var(--cyan); }
.mono { font-family:var(--mono); }

/* ---------------------------------------------------------------- console frame */
#con { display:grid; grid-template-columns:var(--railw) minmax(0, 1fr); grid-template-areas:"hd hd" "rail main" "ft ft"; min-height:100vh; }
#hd { grid-area:hd; display:flex; height:92px; position:relative; z-index:5; }
#hd .elbow { width:var(--railw); flex:0 0 auto; background:var(--pink); border-top-left-radius:46px; display:flex; align-items:flex-end; justify-content:flex-end; padding:0 6px 6px 0; }
#hd .elbow img { width:52px; height:52px; display:block; filter:drop-shadow(0 0 8px rgba(255,61,154,.6)); }
#hd .hr { flex:1; min-width:0; display:flex; flex-direction:column; }
#hd .bars { height:30px; display:flex; gap:5px; margin-left:5px; }
#hd .bars i { display:block; background:var(--c); flex:0 0 auto; width:var(--w, 26px); }
#hd .bars .grow { flex:1; }
#hd .bars b { display:flex; align-items:center; justify-content:flex-end; padding:0 12px; background:var(--pink); color:#000; font:800 calc(21px * var(--fs, 1))/1 var(--cond); letter-spacing:3px; flex:0 0 auto; }
#hd .line { flex:1; display:flex; align-items:center; gap:10px; padding:0 10px 0 12px; min-width:0; }
#hd .line .who { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; }
#hd .line .who .k { font:600 calc(12px * var(--fs, 1)) var(--cond); letter-spacing:2px; color:var(--label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hd .line .who .v { font:calc(13px * var(--fs, 1)) var(--mono); color:var(--cyan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hd .line .who .v.bad { color:var(--red); }
#sfx { flex:0 0 auto; min-height:40px; padding:0 14px; }
#sfx svg { width:16px; height:16px; }

#rail { grid-area:rail; display:flex; flex-direction:column; gap:5px; padding-top:5px; position:sticky; top:0; align-self:start; height:100vh; height:100dvh; overflow-y:auto; scrollbar-width:none; }
#rail::-webkit-scrollbar { display:none; }
#rail button { appearance:none; border:0; border-radius:0; background:var(--c); color:#000; font:700 calc(14px * min(var(--fs, 1), 1.08))/1 var(--cond); letter-spacing:1px; text-align:right; padding:0 8px 7px 0; min-height:58px; flex:1 0 58px; display:flex; align-items:flex-end; justify-content:flex-end; cursor:pointer; position:relative; transition:filter .15s; opacity:.82; }
#rail button.on { opacity:1; box-shadow:none; }
/* 18:48 Graham: "trouble seeing which one I'm on ... I like the pulsing dot over the last two letters of the word" */
/* 22:58 Oct 18 (Graham: "when you press the button and that tab is open, the button is basically gone... a little bar on the end, and the
   colour the button was is now the colour of the font"): the open tab is plain black, its words in the button's colour, a bar where it meets the page */
#rail button[data-p=pro].on { --c:var(--gold); }
#rail button.on, #rail button[data-p=pro].on { background:#000 !important; color:var(--c) !important; box-shadow:inset -5px 0 0 var(--c) !important; opacity:1; }
#rail button.on .rail-lock { color:var(--c); opacity:1; }
#rail button:active { filter:brightness(1.25); }
/* 14 keys in 3 groups, sized from the screen height so the whole rail (down to SETUP) is on screen: a key never drops under
   44px (the touch minimum) and MUSIC stays the big one. The tail soaks up whatever height is left. */
#rail { --rk:clamp(44px, calc((100dvh - 236px) / 14.5), 58px); gap:4px; }
#rail button { min-height:0; flex:0 0 var(--rk); }
#rail button[data-p=music] { flex-basis:calc(var(--rk) * 1.5); }
#rail .tail { flex:1 0 16px; background:var(--peri); opacity:.55; border-bottom-left-radius:0; }
#rail .rail-sep { flex:0 0 14px; display:flex; align-items:flex-end; justify-content:flex-end; padding:0 8px 0 0; margin-top:2px; overflow:hidden;
  font:700 9px/1 var(--cond); letter-spacing:1.5px; color:var(--label); opacity:.85; white-space:nowrap; pointer-events:none; }
/* labels may wrap to two lines (LIVE BOARD on a phone); the text stays bottom-right like every key */
#rail button .rl { display:block; text-align:right; white-space:normal; overflow-wrap:normal; line-height:.98; max-width:100%; }
#rail button > .ic { width:1.05em; height:1.05em; margin-left:2px; flex:none; fill:currentColor; }
/* ⭐ PRO: the section header reads gold and premium, a thin gold rule above it */
#rail .rail-sep[data-g=pro] { flex-basis:18px; gap:3px; align-items:center; opacity:1; color:var(--gold); position:relative; padding-top:3px;
  font-size:10px; letter-spacing:2px; text-shadow:0 0 8px color-mix(in srgb, var(--gold) 55%, transparent); }
#rail .rail-sep[data-g=pro]::before { content:''; position:absolute; left:10px; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--gold) 30%, #fff1c2 70%, var(--amber)); }
#rail .rail-sep[data-g=pro] span { background:linear-gradient(90deg, #fff1c2, var(--gold) 45%, var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; }
#rail .rail-sep[data-g=pro] .ic { width:10px; height:10px; fill:var(--gold); flex:none; }
/* ✨ Home DJ: the one gold PRO key that opens the tour */
#rail button[data-p=pro] { background:linear-gradient(160deg, #fff4cc 0%, var(--gold) 40%, var(--amber) 100%); opacity:.95; box-shadow:0 0 14px -4px var(--gold); }
#rail button[data-p=pro].on { opacity:1; box-shadow:inset -6px 0 0 #fff, 0 0 18px -2px var(--gold); }
/* 🎃 HOLIDAY moved up because one is close: a small dot says why */
#rail button.soon::before { content:''; position:absolute; top:6px; left:7px; width:7px; height:7px; border-radius:50%; background:#000; opacity:.6; }

#main { grid-area:main; min-width:0; padding:8px 10px 24px 10px; display:flex; flex-direction:column; gap:var(--gap); }
#view { display:flex; flex-direction:column; gap:var(--gap); min-width:0; }
#pages { min-width:0; }
.page { display:none; flex-direction:column; gap:var(--gap); min-width:0; animation:pgIn .22s ease-out; }
.page.on { display:flex; }
@keyframes pgIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

#ft { grid-area:ft; display:flex; height:46px; }
#ft .elbow { width:var(--railw); flex:0 0 auto; background:var(--peri); border-bottom-left-radius:36px; }
#ft .bars { flex:1; display:flex; gap:5px; align-items:flex-end; margin-left:5px; }
#ft .bars > * { height:20px; background:var(--c); display:flex; align-items:center; color:#000; font:700 calc(12px * var(--fs, 1)) var(--cond); letter-spacing:2px; padding:0 10px; border:0; }
#ft .bars .grow { flex:1; justify-content:flex-end; }
#ft .bars button { cursor:pointer; min-height:0; border-radius:0; }

/* iPad portrait / big phones landscape */
@media (min-width: 700px) {
  :root { --railw:112px; --gap:16px; }
  #hd { height:96px; }
  #hd .elbow img { width:66px; height:66px; }
  #hd .bars { height:34px; }
  #hd .bars b { font-size:calc(26px * var(--fs, 1)); letter-spacing:5px; padding:0 16px; }
  #hd .line .who .k { font-size:calc(13px * var(--fs, 1)); } #hd .line .who .v { font-size:calc(15px * var(--fs, 1)); }
  #rail { --rk:clamp(44px, calc((100dvh - 250px) / 14.5), 60px); gap:5px; }
  #rail button { font-size:calc(17px * min(var(--fs, 1), 1.08)); padding:0 12px 8px 0; }
  #rail .rail-sep { flex-basis:18px; font-size:11px; letter-spacing:2.5px; padding-right:12px; }
  #rail .rail-sep[data-g=pro] { flex-basis:22px; font-size:12px; letter-spacing:3px; } #rail .rail-sep[data-g=pro] .ic { width:12px; height:12px; }
  #main { padding:12px 18px 28px; }
}
/* iPad landscape + the Windows window: wall on the left, page on the right */
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  #main { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(360px, 1fr); gap:22px; align-items:start; }
  #view { position:sticky; top:12px; }
}
@media (min-width: 1500px) { #main { grid-template-columns:minmax(0, 1.3fr) minmax(460px, 1fr); } }

/* ---------------------------------------------------------------- panels */
.panel { position:relative; display:flex; flex-direction:column; gap:10px; min-width:0; }
.panel.box { background:var(--panel); border:1px solid var(--line); border-left:10px solid var(--c, var(--violet)); border-radius:0 18px 0 18px; padding:12px 12px 14px; }
.ph { display:flex; align-items:baseline; justify-content:space-between; gap:10px; font:600 calc(13px * var(--fs, 1))/1.2 var(--cond); letter-spacing:2px; text-transform:uppercase; color:var(--c, var(--label)); margin:0; }
.ph .r { color:var(--lav); font-family:var(--mono); letter-spacing:1px; text-transform:none; text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ph small { color:var(--dim); font-family:var(--body); letter-spacing:0; text-transform:none; font-size:calc(12px * var(--fs, 1)); font-weight:400; }
.note { color:var(--dim); font-size:calc(13px * var(--fs, 1)); line-height:1.45; margin:0; }
.note b { color:var(--text); }
.sub { font:600 calc(13px * var(--fs, 1)) var(--cond); letter-spacing:2px; text-transform:uppercase; color:var(--label); margin:6px 0 0; }

/* ---------------------------------------------------------------- buttons */
button { font-family:inherit; cursor:pointer; }
/* console icons (GB.svg): solid 24x24 glyphs in currentColor. Outside buttons they sit inline with the text, sized to it */
.ic { width:1.1em; height:1.1em; fill:currentColor; flex:0 0 auto; vertical-align:-.16em; }
.ic + span, .ic + b { margin-left:0; }
.pro-badge .ic, .pro-chip .ic, .modebar .t b .ic, #rMore .ic, #rEff .ic { margin-right:.3em; }
.pro-badge, .pro-chip { display:inline-flex; align-items:center; }
.modebar .t b .nw { white-space:nowrap; }
@media (max-width: 699px) { .modebar .t b .ic { display:none; } .modebar .t b .nw { white-space:normal; } }   /* phones: the title needs every pixel next to Back to music */
.tile .em .ic { width:1.1em; height:1.1em; vertical-align:0; display:block; }
.tile:not(.on) .em .ic { color:var(--c, currentColor); filter:drop-shadow(0 0 6px var(--c, transparent)); }
.chip .ic { width:calc(16px * var(--fs, 1)); height:calc(16px * var(--fs, 1)); }
.note .ic { color:var(--c, currentColor); }
.btn { appearance:none; border:0; border-radius:999px; background:var(--dark); color:var(--text); font:700 calc(16px * var(--fs, 1))/1.05 var(--cond); letter-spacing:1px; text-transform:uppercase; min-height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .08s, filter .15s, background .15s; text-align:center; }
.btn:active { transform:scale(.97); filter:brightness(1.2); }
.btn:disabled { opacity:.45; }
.btn svg, .btn .ic { width:19px; height:19px; flex:0 0 auto; fill:currentColor; }
.btn.c, .btn.on { background:var(--c, var(--cyan)); color:#000; }
.btn.on { box-shadow:0 0 0 2px #fff inset, 0 0 16px color-mix(in srgb, var(--c, var(--cyan)) 60%, transparent); }
.btn.ghost { background:transparent; box-shadow:inset 0 0 0 2px var(--dark); }
.btn.sm { min-height:40px; font-size:calc(14px * var(--fs, 1)); padding:0 14px; }
.btn.sm svg, .btn.sm .ic { width:17px; height:17px; }
.btn span > .ic { vertical-align:-.22em; margin-right:.3em; }   /* icon inside the label: it flows with the first line when a narrow key wraps */
.btn.lg { min-height:56px; font-size:calc(18px * var(--fs, 1)); }
.btn.wide { width:100%; }
.btn.danger { background:#3a0f1c; color:#ffc2cf; }
.btn.r { justify-content:flex-end; text-align:right; }
/* pads: big right-aligned console keys */
.pads { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.pads .btn { justify-content:flex-end; text-align:right; min-height:54px; font-size:calc(17px * var(--fs, 1)); padding:0 16px; }
.pads .btn svg { margin-right:auto; }
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) { .pads.p3 { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
/* seg: console cap group (round outer ends, square inner joins) */
.seg { display:flex; gap:4px; min-width:0; }
.seg > .btn { flex:1 1 0; min-width:0; border-radius:4px; padding:0 8px; }
.seg > .btn:first-child { border-radius:24px 4px 4px 24px; }
.seg > .btn:last-child { border-radius:4px 24px 24px 4px; }
.seg > .btn:only-child { border-radius:24px; }
.seg.wrap { flex-wrap:wrap; } .seg.wrap > .btn { flex:1 1 30%; border-radius:999px; }
/* chips: wrapping pill choices */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { appearance:none; border:0; border-radius:999px; background:var(--dark); color:var(--text); font:600 calc(15px * var(--fs, 1))/1 var(--cond); letter-spacing:.5px; min-height:44px; padding:0 16px; display:inline-flex; align-items:center; gap:6px; }
.chip.on, .chip.sel { background:var(--c, var(--pink)); color:#000; box-shadow:0 0 0 2px #fff inset; }
.chip:active { filter:brightness(1.2); }
/* tiles: square-ish picks with an emoji/swatch on top */
.tiles { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
@media (min-width: 700px) { .tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.tile { appearance:none; border:0; border-radius:0 16px 0 16px; background:var(--dark); color:var(--text); min-height:80px; padding:10px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font:700 calc(14px * var(--fs, 1))/1.1 var(--cond); letter-spacing:1px; text-transform:uppercase; text-align:center; position:relative; }
.tile .em { font-size:calc(28px * var(--fs, 1)); line-height:1; }
.tile.on { background:var(--c, var(--cyan)); color:#000; box-shadow:0 0 18px color-mix(in srgb, var(--c, var(--cyan)) 55%, transparent); }
.tile.open { box-shadow:0 0 0 2px var(--c, var(--cyan)) inset; }

/* ---------------------------------------------------------------- readouts + levels */
.reads { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 14px; }
.read { display:flex; flex-direction:column; min-width:0; }
.read .k { font:600 calc(12px * var(--fs, 1)) var(--cond); letter-spacing:2px; color:var(--label); text-transform:uppercase; }
.read .v { font:calc(40px * var(--fs, 1))/1 var(--mono); color:var(--c, var(--cyan)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.read .v small { font-size:calc(16px * var(--fs, 1)); }
.read.sm .v { font-size:calc(18px * var(--fs, 1)); line-height:1.2; color:var(--c, var(--text)); }
@media (min-width: 700px) { .read .v { font-size:calc(50px * var(--fs, 1)); } .read.sm .v { font-size:calc(20px * var(--fs, 1)); } }
.meter { display:flex; gap:3px; height:14px; }
.meter i { flex:1; border-radius:2px; background:var(--dark2); transition:background .12s; }
.levels { display:flex; flex-direction:column; gap:12px; }
.lv { display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"k k v" "s s s"; gap:4px 10px; align-items:center; }
.lv > span { grid-area:k; font:600 calc(13px * var(--fs, 1)) var(--cond); letter-spacing:2px; color:var(--c, var(--label)); text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.lv > b { grid-area:v; font:calc(15px * var(--fs, 1)) var(--mono); color:var(--cyan); font-weight:400; text-align:right; }
.lv > input { grid-area:s; }
/* range = a segmented console bar */
input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; margin:0; --p:50%; }
input[type=range]::-webkit-slider-runnable-track { height:24px; border-radius:4px;
  background:repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 3px), #000 calc(6.25% - 3px) 6.25%), linear-gradient(90deg, var(--c, var(--cyan)) var(--p), var(--dark2) var(--p)); }
input[type=range]::-moz-range-track { height:24px; border-radius:4px;
  background:repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 3px), #000 calc(6.25% - 3px) 6.25%), linear-gradient(90deg, var(--c, var(--cyan)) var(--p), var(--dark2) var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:34px; margin-top:-5px; border-radius:3px; background:#fff; box-shadow:0 0 10px var(--c, var(--cyan)); }
input[type=range]::-moz-range-thumb { width:12px; height:34px; border:0; border-radius:3px; background:#fff; box-shadow:0 0 10px var(--c, var(--cyan)); }

/* ---------------------------------------------------------------- fields */
input[type=text], input[type=search], input[type=number], input[type=email], input[type=password], input[type=url], input[type=date], input[type=time], textarea, select {
  width:100%; min-height:48px; background:#06050c; color:var(--text); border:2px solid var(--dark); border-radius:12px; padding:10px 14px; font:calc(16px * var(--fs, 1)) var(--body); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--c, var(--cyan)); }
textarea { min-height:96px; resize:vertical; }
input[type=color] { width:52px; height:48px; border:2px solid var(--dark); border-radius:12px; background:#06050c; padding:3px; flex:0 0 auto; }
input[type=checkbox], input[type=radio] { width:24px; height:24px; accent-color:var(--pink); flex:0 0 auto; margin:0; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:calc(14px * var(--fs, 1)); color:var(--dim); line-height:1.4; min-height:44px; }
.field { display:flex; flex-direction:column; gap:5px; font:600 calc(13px * var(--fs, 1)) var(--cond); letter-spacing:1.5px; color:var(--label); text-transform:uppercase; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }
.row > * { min-width:0; }
.row .grow { flex:1 1 160px; }
.grid2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.grid3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
details > summary { cursor:pointer; color:var(--dim); font:600 calc(14px * var(--fs, 1)) var(--cond); letter-spacing:1px; text-transform:uppercase; min-height:40px; display:flex; align-items:center; }
/* lists */
.list { display:flex; flex-direction:column; }
.item { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line); min-height:56px; }
.item .tx { flex:1; min-width:0; } .item .tx b, .item .tx small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item .tx b { font-size:calc(15px * var(--fs, 1)); } .item .tx small { color:var(--dim); font-size:calc(12px * var(--fs, 1)); }
.item.on { background:#1d1230; border-radius:10px; }
.scroll { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

/* ---------------------------------------------------------------- the live wall */
.wallbox { position:relative; background:#05040a; border:3px solid var(--amber); border-radius:0 28px 0 28px; padding:10px; }
#wall { width:100%; height:auto; display:block; cursor:pointer; }
.wallbox.full { position:fixed; inset:0; z-index:300; border:0; border-radius:0; padding:0; background:#000; display:flex; align-items:center; justify-content:center; }
.wallbox .fullx { position:fixed; top:12px; right:12px; display:none; z-index:2; }
.wallbox.full .fullx { display:inline-flex; }
.grpbar { display:flex; gap:6px; flex-wrap:wrap; }
.modebar { display:flex; align-items:center; gap:10px; border-radius:0 18px 0 18px; padding:8px 8px 8px 14px; background:var(--panel); border-left:10px solid var(--c, var(--green)); }
.modebar .t { flex:1; min-width:0; } .modebar .t b { display:block; font:700 calc(17px * var(--fs, 1))/1.15 var(--cond); letter-spacing:1.5px; text-transform:uppercase; }
.modebar .t small { display:block; color:var(--dim); font-size:calc(12px * var(--fs, 1)); line-height:1.3; }

/* ---------------------------------------------------------------- toast, sheet, license gate */
#toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px); background:#000; color:#000; border-radius:999px; padding:0; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; max-width:92vw; z-index:400; display:flex; overflow:hidden; box-shadow:0 8px 30px #000a; }
#toast::before { content:''; width:16px; background:var(--amber); flex:0 0 auto; }
#toast span { background:var(--cyan); padding:11px 18px; font:700 calc(15px * var(--fs, 1)) var(--cond); letter-spacing:1px; }
#toast.show { opacity:1; transform:translateX(-50%); }
.sheet { position:fixed; inset:0; background:#000c; display:flex; align-items:flex-end; justify-content:center; z-index:250; }
.sheet > div { background:var(--panel); border-top:6px solid var(--violet); border-radius:24px 24px 0 0; width:100%; max-width:620px; max-height:76vh; overflow:auto; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:8px; }
#licGate { position:fixed; inset:0; z-index:500; background:#000f; display:none; align-items:center; justify-content:center; padding:16px; }
#licGate.show { display:flex; }
#licGate .box { width:100%; max-width:460px; border-left:14px solid var(--pink); border-radius:0 28px 0 28px; background:var(--panel); padding:26px 22px; display:flex; flex-direction:column; gap:12px; text-align:center; }
#licGate img { width:80px; height:80px; margin:0 auto; }
#licGate h2 { margin:0; font:800 calc(30px * var(--fs, 1)) var(--cond); letter-spacing:3px; text-transform:uppercase; }
#licGate p { color:var(--dim); margin:0; line-height:1.45; }
#licKey { text-align:center; font:calc(18px * var(--fs, 1)) var(--mono); letter-spacing:1px; }

/* ---------------------------------------------------------------- the sparkle logo */
.gb-tw { position:relative; display:inline-block; line-height:0; vertical-align:middle; }
.gb-tw i { position:absolute; width:13%; height:13%; margin:-6.5% 0 0 -6.5%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff 0 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 72%); animation:gbtw .65s ease-out forwards; }
@keyframes gbtw { 0% { opacity:0; transform:scale(.4); } 25% { opacity:1; transform:scale(1.15); } 100% { opacity:0; transform:scale(.7); } }
@media (prefers-reduced-motion: reduce) { .page { animation:none; } }

/* phone + iPad portrait: away from MUSIC the wall shrinks and the readouts hide, so the page you tapped is right there */
@media not all and (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  body:not([data-page=music]) #view .panel.reads-panel { display:none; }
}

/* full view: the wall covers everything (header, rail, pages), with its Close button on top */
body.wallfull { overflow:hidden; }
body.wallfull #view { z-index:1000; position:relative; }
body.wallfull #hd, body.wallfull #rail { z-index:0; }
.wallbox.full .fullx { z-index:1001; min-height:48px; padding:0 22px; }
@media (min-width: 1000px) and (min-aspect-ratio: 1/1) { body.wallfull #view { position:sticky; } }

/* the header logo: drawn as real dots (no image to load), random bulbs glint white */
.gbsvg { width:52px; height:52px; border-radius:12px; background:#07060d; filter:drop-shadow(0 0 8px rgba(255,61,154,.6)); line-height:0; }
.gbsvg svg { width:100%; height:100%; display:block; }
.gbsvg circle { transition:fill .12s; }
.gbsvg circle.tw { fill:#fff !important; filter:url(#gbGlow); }
@media (min-width: 700px) { .gbsvg { width:66px; height:66px; border-radius:14px; } }
.modebar #mBtn { min-height:46px; padding:0 16px; font-size:calc(15px * var(--fs, 1)); flex:0 0 auto; box-shadow:0 0 16px -2px var(--pink); }

/* ---------------------------------------------------------------- 🎛️ Pro DJ gate (GB.proGate) + the mode bar's fader chip */
.pro-card { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:0 18px 0 18px; border:1px solid color-mix(in srgb, var(--orchid) 45%, var(--line));
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--orchid) 22%, transparent) 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--violet) 22%, transparent) 0%, transparent 60%), #0d0918; }
.pro-top { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.pro-top b { font:700 calc(20px * var(--fs, 1))/1.1 var(--cond); letter-spacing:1px; text-transform:uppercase; }
.pro-badge { font:700 calc(12px * var(--fs, 1))/1 var(--cond); letter-spacing:1.5px; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg, var(--orchid), var(--violet)); color:#000; white-space:nowrap; }
.pro-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.pro-list li { font:600 calc(13px * var(--fs, 1))/1 var(--cond); letter-spacing:.5px; padding:7px 10px; border-radius:999px; background:var(--dark2); color:var(--dim); }
.pro-list li::before { content:'✓ '; color:var(--orchid); }
.pro-list li.me { background:color-mix(in srgb, var(--orchid) 25%, var(--dark2)); color:var(--text); }
.pro-key summary { cursor:pointer; color:var(--lav); font:600 calc(13px * var(--fs, 1)) var(--cond); letter-spacing:1px; text-transform:uppercase; padding:6px 0; }
.pro-keyrow { display:flex; gap:8px; margin-top:6px; } .pro-keyrow input { flex:1; min-width:0; font-family:var(--mono); }
.pro-key .pro-msg { margin-top:6px; }
.pro-chip { font:700 calc(11px * var(--fs, 1))/1 var(--cond); letter-spacing:1px; padding:4px 8px; border-radius:999px; background:color-mix(in srgb, var(--orchid) 22%, transparent); color:var(--orchid); white-space:nowrap; align-self:center; margin-left:auto; }
.panel.pro-locked > :not(.ph):not(.pro-card) { display:none !important; }
.panel.pro-preview > :not(.ph):not(.pro-card) { opacity:.6; }
#rail button .rail-lock { position:absolute; top:5px; left:6px; font-style:normal; font-size:calc(12px * var(--fs, 1)); line-height:1; color:#000; opacity:.75; }
#rail button .rail-lock .ic { display:block; vertical-align:0; }
.mfad { appearance:none; border:0; flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; min-height:40px; padding:0 10px; border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--cyan) 14%, transparent); box-shadow:inset 0 0 0 2px var(--cyan); color:var(--cyan); font:700 calc(13px * var(--fs, 1))/1 var(--cond); letter-spacing:1px; }
.mfad b { background:var(--cyan); color:#000; border-radius:999px; min-width:20px; padding:3px 6px; text-align:center; font-size:calc(12px * var(--fs, 1)); }
.mfad .ic { width:calc(16px * var(--fs, 1)); height:calc(16px * var(--fs, 1)); }
@media (max-width: 699px) {          /* phones: a small badge on the mode bar's corner, so the title keeps its room */
  .modebar { position:relative; }
  .mfad .w { display:none; }
  .mfad { position:absolute; top:-14px; right:14px; min-height:30px; padding:0 8px; background:#05040a; box-shadow:inset 0 0 0 2px var(--cyan), 0 0 12px -2px var(--cyan); z-index:2; }
}
.panel.pro-locked > .ph .r, .panel.pro-preview > .ph .r { visibility:hidden; }

/* ---------------------------------------------------------------- ✨ PRO tour (Home DJ): what Pro DJ adds */
.pt-hero { background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 55%), radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--amber) 14%, transparent) 0%, transparent 60%), var(--panel); }
.pt-h { margin:0; font:800 calc(26px * var(--fs, 1))/1.05 var(--cond); letter-spacing:1px; text-transform:uppercase;
  background:linear-gradient(90deg, #fff4cc, var(--gold) 50%, var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pt-cta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.pt-cta .pt-buy { flex:1 1 220px; }
.pt-buy { background:linear-gradient(160deg, #fff4cc, var(--gold) 45%, var(--amber)) !important; color:#000 !important; box-shadow:0 0 22px -6px var(--gold); }
.pt-key { appearance:none; background:none; border:0; padding:6px 2px; color:var(--gold); font:700 calc(15px * var(--fs, 1)) var(--cond); letter-spacing:1px; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:44px; }
.pt-foot .note .pt-key { min-height:0; padding:0; font-size:inherit; text-transform:none; letter-spacing:0; font-family:inherit; }
.pt-feats { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; container-type:inline-size; }
@container (min-width: 640px) { .pt-feats .pt-f { grid-template-columns:auto minmax(0, 1fr) 150px; } }
/* Oct 16 (Graham): on tablets and computers the Pro feature cards sit 2 across upright, 3 across sideways (preview under the text) */
@media (min-width: 700px) and (orientation: portrait) { .pt-feats { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) and (orientation: landscape) { .pt-feats { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .pt-feats .pt-f { grid-template-columns:auto minmax(0, 1fr) !important; } .pt-feats .pt-prev { grid-column:1 / -1 !important; align-self:end; } .pt-feats .pt-f { align-content:start; } }
.pt-f { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:6px 12px; align-items:start; padding:12px; background:var(--panel); border:1px solid var(--line); border-left:6px solid var(--c); border-radius:0 16px 0 16px; min-width:0; }
.pt-ic { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--c); color:#000; box-shadow:0 0 14px -2px var(--c); }
.pt-ic .ic { width:24px; height:24px; fill:currentColor; }
.pt-tx { min-width:0; } .pt-tx b { font:700 calc(18px * var(--fs, 1))/1.1 var(--cond); letter-spacing:1px; text-transform:uppercase; color:var(--c); }
.pt-tx small { margin-left:8px; font:600 calc(11px * var(--fs, 1)) var(--cond); letter-spacing:1.5px; color:var(--label); text-transform:uppercase; }
.pt-tx p { margin:4px 0 0; color:var(--dim); font-size:calc(13px * var(--fs, 1)); line-height:1.4; }
.pt-prev { grid-column:1 / -1; height:54px; border-radius:8px; background:#06050c; border:1px solid var(--line); padding:6px; overflow:hidden; }
@container (min-width: 640px) { .pt-prev { grid-column:auto; align-self:center; } }
.pt-tl { position:relative; height:100%; display:flex; flex-direction:column; gap:3px; } .pt-tl i { position:relative; flex:1; background:#14111f; border-radius:3px; }
.pt-tl b { position:absolute; top:1px; bottom:1px; border-radius:3px; opacity:.9; } .pt-tl u { position:absolute; top:-2px; bottom:-2px; left:47%; width:2px; background:#fff; box-shadow:0 0 6px #fff; }
.pt-fd { height:100%; display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; } .pt-fd i { position:relative; } .pt-fd i::before { content:''; position:absolute; left:calc(50% - 2px); width:4px; top:0; bottom:0; background:#1d1930; border-radius:2px; }
.pt-fd b { position:absolute; left:15%; right:15%; height:7px; border-radius:2px; transform:translateY(50%); }
.pt-lp { height:100%; display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:1fr 1fr; gap:4px; }
.pt-lp i { border-radius:4px; border:1px solid color-mix(in srgb, var(--bc) 60%, transparent); background:color-mix(in srgb, var(--bc) 18%, #0b0914); }
.pt-lp i.on { background:var(--bc); box-shadow:0 0 10px var(--bc); }
.pt-ov { height:100%; display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:1fr 1fr; gap:4px; } .pt-ov i { border-radius:0 6px 0 6px; border:1px solid #3a3456; }
.pt-il { height:100%; border-radius:6px; display:grid; place-items:center; background:radial-gradient(60% 90% at 50% 50%, color-mix(in srgb, var(--lav) 55%, #000), #0b0914); animation:ptBreathe 4s ease-in-out infinite; }
.pt-il span { font:calc(13px * var(--fs, 1)) var(--mono); letter-spacing:2px; color:#fff; text-shadow:0 0 8px var(--lav); }
@keyframes ptBreathe { 50% { filter:brightness(.6); } }
@media (prefers-reduced-motion: reduce) { .pt-il { animation:none; } }

/* ---------------------------------------------------------------- 📱 phone + iPad portrait: the page you tapped comes right after
   the live wall and the mode bar; the readouts (tempo, section, look) drop under it, so MUSIC's controls are on the first screen */
@media not all and (min-width: 1000px) and (min-aspect-ratio: 1/1) {
  #main { flex-direction:column; }
  #view { display:contents; }
  #view > .panel:first-child { order:1; } #view > .modebar { order:2; } #pages { order:3; } #view > .reads-panel { order:4; }
}
@media (max-width: 699px) { #view > .panel:first-child > .seg > .btn { min-height:40px; font-size:calc(14px * var(--fs, 1)); } }
@media (max-width: 699px) { #muCard .mu-art { width:72px; height:72px; } #muCard .mu-art .ic { width:32px; height:32px; } }
/* phone: volume on one line (mute key, slider, %), the word VOLUME stays for screen readers */
@media (max-width: 699px) {
  #muCard .mu-volrow .lv { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"s v"; }
  #muCard .mu-volrow .lv > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
/* phones: keep the mode bar compact next to Back to music (title up to 2 lines, details 1 line) */
@media (max-width: 699px) {
  .modebar .t b { font-size:calc(14px * var(--fs, 1)); letter-spacing:1px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
  .modebar .t b .nw { white-space:normal; }
  .modebar .t small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .modebar #mBtn { padding:0 12px; font-size:calc(13px * var(--fs, 1)); min-height:42px; }
}
/* ⭐ PRO header: a black separator strip (so it never looks like a button), PRO in gold */
#rail .rail-sep[data-g=pro] { background:#000; color:var(--gold); text-shadow:none;
  align-items:center; padding:0 10px 0 0; margin-top:4px; border-radius:0; opacity:1; }
#rail .rail-sep[data-g=pro]::before { display:none; }
#rail .rail-sep[data-g=pro] span { background:linear-gradient(90deg, #fff1c2, var(--gold) 45%, var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
#rail .rail-sep[data-g=pro] .ic { fill:var(--gold); }

/* ===== Oct 16 night (Graham): the two Pro doors each get their own look; the upgrade page drops the Live wall so the cards fill the screen */
body[data-page=pro] #view { display:none !important; }
body[data-page=lights] #view { display:none !important; }   /* 🧵 Oct 17: on LIGHTS the editor IS the live wall */
html.door-dj { --panel:#170c1d; --line:#3b1b44; }
html.door-home { --panel:#1b120a; --line:#43301b; }
#proTour { position:relative; overflow:hidden; }
html.door-dj #proTour { background:radial-gradient(120% 140% at 100% 0%, #ff3d9a33, transparent 55%), radial-gradient(90% 120% at 0% 100%, #9b3dff2e, transparent 60%), var(--panel); }
html.door-home #proTour { background:radial-gradient(120% 140% at 100% 0%, #ff7a3d38, transparent 55%), radial-gradient(90% 120% at 0% 100%, #ffd21a24, transparent 60%), var(--panel); }
html.door-dj .pt-h { background:linear-gradient(90deg, #ffd0ea, #ff3d9a 45%, #9b3dff); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.door-home .pt-h { background:linear-gradient(90deg, #fff4cc, #ffb23d 45%, #ff7a3d); -webkit-background-clip:text; background-clip:text; color:transparent; }
html.door-dj .pt-buy { background:linear-gradient(160deg, #ffd0ea, #ff3d9a 45%, #9b3dff) !important; color:#fff !important; box-shadow:0 0 22px -6px #ff3d9a; }
.pt-art { position:absolute; right:14px; bottom:10px; width:min(34%, 240px); opacity:.9; pointer-events:none; } .pt-art svg { width:100%; height:auto; display:block; }
#proTour .pt-cta, #proTour .pt-h { position:relative; z-index:1; max-width:calc(100% - min(36%, 250px)); }
@media (max-width:699px) { .pt-art { display:none; } #proTour .pt-cta, #proTour .pt-h { max-width:none; } }

/* Oct 16 night: the deep tabs in the warm & cool rail get white words */
/* (Graham: black words on every tab; the deep ones were lifted a shade so black reads well) */

/* ================================================================ 📱 iPhone compact (Oct 16 night, Graham: "all of it, as tight as it can go")
   Upright phones (under 700 wide) and sideways phones (under 500 tall). Less padding, smaller gaps, shorter keys.
   The big action keys (HOLD TO BUILD, TAP, COOL DOWN, COLOR LOCK) stay the biggest thing on the page. */
@media (max-width: 699px), (max-height: 500px) and (orientation: landscape) {
  :root { --gap:7px; }
  html body #main { padding:5px 5px 14px; }
  html body .panel { gap:7px; }
  html body .panel.box { padding:8px 9px 9px; border-left-width:7px; border-radius:0 14px 0 14px; }
  html body .ph { font-size:calc(12px * var(--fs, 1)); letter-spacing:1.5px; }
  html body .note { font-size:calc(12.5px * var(--fs, 1)); line-height:1.35; }
  html body .btn { min-height:40px; padding:0 12px; }
  html body .btn.sm { min-height:34px; padding:0 10px; }
  html body .btn.lg { min-height:46px; }
  html body .pads { gap:5px; } html body .pads .btn { min-height:44px; padding:0 12px; }
  html body .seg { gap:3px; }
  html body .chips { gap:5px; } html body .chip { min-height:36px; padding:0 11px; }
  html body .tiles { gap:5px; } html body .tile { min-height:62px; padding:6px 5px; }
  html body .tile .em { font-size:calc(24px * var(--fs, 1)); }
  html body .reads { gap:4px 10px; }
  html body .read .v { font-size:calc(32px * var(--fs, 1)); }
  html body .levels { gap:8px; }
  html body #djBuild { min-height:78px; }
  html body #djTap { min-height:64px; }
  html body #djCool, html body #djColor { min-height:58px; }
  html body .dj-pads .tile { min-height:48px !important; }
  html body .dj-skip .btn { min-height:48px; }
  html body #layFab { min-height:36px; padding:0 12px; font-size:calc(13px * var(--fs, 1)); bottom:calc(44px + env(safe-area-inset-bottom)); }
  #ft { height:36px; } #ft .bars { gap:3px; min-width:0; } #ft .bars > * { height:16px; font-size:calc(10px * var(--fs, 1)); letter-spacing:1px; padding:0 6px; min-width:0; white-space:nowrap; overflow:hidden; flex-shrink:1; }
  #ft .bars > i { display:none; }
  html body #main.lay .lay-it { margin:3px; }
}
/* upright phone: a slimmer header */
@media (max-width: 699px) {
  #hd { height:76px; }
  #hd .elbow { border-top-left-radius:38px; }
  #hd .elbow img { width:44px; height:44px; }
  #hd .bars { height:24px; } #hd .bars b { font-size:calc(18px * var(--fs, 1)); letter-spacing:2.5px; }
  #rail { --rk:clamp(44px, calc((100dvh - 200px) / 14.5), 54px); gap:3px; }
  #rail button { font-size:calc(12.5px * min(var(--fs, 1), 1.08)); padding:0 5px 6px 0; letter-spacing:.5px; }
}
/* sideways phone: short header, narrow rail, so the page gets the screen */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --railw:86px; }
  #hd { height:56px; }
  #hd .elbow { border-top-left-radius:28px; padding:0 4px 4px 0; }
  #hd .elbow img { width:36px; height:36px; }
  #hd .bars { height:18px; } #hd .bars b { font-size:calc(15px * var(--fs, 1)); letter-spacing:2.5px; padding:0 10px; }
  #hd .line { gap:6px; } #hd .line .who .k { font-size:calc(10.5px * var(--fs, 1)); } #hd .line .who .v { font-size:calc(11.5px * var(--fs, 1)); }
  #hd .line .btn { min-height:32px; padding:0 10px; font-size:calc(13px * var(--fs, 1)); }
  #rail { --rk:44px; gap:3px; padding-top:3px; }
  #rail button { font-size:calc(13px * min(var(--fs, 1), 1.08)); padding:0 7px 6px 0; }
  #rail button[data-p=music] { flex-basis:calc(var(--rk) * 1.2); }
  #rail .rail-sep { flex-basis:14px; font-size:9px; letter-spacing:1.5px; padding-right:7px; }
  #rail .rail-sep[data-g=pro] { flex-basis:16px; font-size:10px; }
  #main { padding:5px 8px 14px; }
}

/* ⬇️ Oct 17 (Graham): the rail stops above the bottom bar, so the bar's rounded corner never sits over SETUP / ARRANGE */
#rail { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }   /* height set by core.js fitRail(): it fits between the header and the bottom bar */
#rail #railArr { opacity:1; }
@media (max-width: 699px) { #rail #railArr > .ic, #rail #railArr > svg { display:none; } }

/* ⚡ Oct 17 (Graham): the GLOWBOP label in the top bar is still when nothing plays. While a show runs it has an energy pulse on the beat;
   holding HOLD TO BUILD powers it up a little (brighter, a slight tremble near the top); the drop releases it in one burst. core.js drives it. */
#hd .bars b { position:relative; transition:filter .25s, text-shadow .25s, box-shadow .25s; will-change:filter; }
/* 🔋 POWER CORE (Oct 17, Graham: "pulse with real energy"): while the lights are powered on the label breathes like a glowing reactor,
   bright energy rolls through it, and a soft halo swells. With music it rolls faster and also kicks on the beat. */
#hd .bars b.core { background-color:var(--pink); background-image:linear-gradient(90deg, rgba(255,140,200,0) 0%, rgba(255,140,200,0) 22%, rgba(255,150,210,.28) 40%, rgba(255,190,230,.42) 50%, rgba(255,150,210,.28) 60%, rgba(255,140,200,0) 78%, rgba(255,140,200,0) 100%),
    radial-gradient(120% 140% at 50% 50%, #ff6fb7 0%, var(--pink) 55%, #d81f78 100%);
  background-size:260% 100%, 100% 100%; background-repeat:no-repeat;
  animation:hdFlow var(--flow, 3.6s) linear infinite, hdBreathe 2.6s ease-in-out infinite; }
@keyframes hdFlow { 0% { background-position:130% 0, 0 0; } 100% { background-position:-130% 0, 0 0; } }
@keyframes hdBreathe { 0%, 100% { box-shadow:0 0 6px 0 rgba(255,61,154,.35); filter:brightness(1); } 50% { box-shadow:0 0 16px 3px rgba(255,61,154,.6), 0 0 34px 6px rgba(255,61,154,.18); filter:brightness(1.12); } }
#hd .bars b.core.beat { animation:hdFlow var(--flow, 1.8s) linear infinite, hdBeat var(--beat, .5s) ease-out infinite; }
#hd .bars b.beat:not(.core) { animation:hdBeat var(--beat, .5s) ease-out infinite; }
@keyframes hdBeat { 0% { filter:brightness(calc(1.1 + var(--e, .5) * .25)); transform:scale(calc(1 + var(--e, .5) * .035)); box-shadow:0 0 calc(4px + var(--e, .5) * 10px) var(--pink); }
  40%, 100% { filter:none; transform:none; box-shadow:none; } }
#hd .bars b.build { animation:hdTremble .09s linear infinite; filter:brightness(calc(1 + var(--bp, 0) * .55)) saturate(calc(1 + var(--bp, 0) * .4));
  box-shadow:0 0 calc(4px + var(--bp, 0) * 18px) calc(var(--bp, 0) * 2px) var(--pink), inset 0 0 calc(var(--bp, 0) * 10px) rgba(255,255,255,.45); }
@keyframes hdTremble { 0%, 100% { transform:translate(0, 0); } 25% { transform:translate(calc(var(--bp, 0) * .8px), calc(var(--bp, 0) * -.5px)); }
  50% { transform:translate(calc(var(--bp, 0) * -.7px), calc(var(--bp, 0) * .6px)); } 75% { transform:translate(calc(var(--bp, 0) * .5px), calc(var(--bp, 0) * .7px)); } }
#hd .bars b.drop { animation:hdDrop .75s cubic-bezier(.2,.8,.3,1) both; }
@keyframes hdDrop { 0% { background:#fff; color:var(--pink); filter:brightness(1.6); transform:scale(1.08); box-shadow:0 0 30px 8px #fff, 0 0 60px 10px var(--pink); }
  35% { background:var(--pink); filter:brightness(1.3); transform:scale(1.03); box-shadow:0 0 22px 4px var(--pink); } 100% { filter:none; transform:none; box-shadow:none; } }
@media (prefers-reduced-motion: reduce) { #hd .bars b.beat, #hd .bars b.build, #hd .bars b.drop { animation:none; transform:none; } }

/* 📉 Oct 17 (Graham): the Tempo / Section / Look / Effect readout is nice-to-know, so it's one slim strip now (gives the page its room back) */
html body #view .reads-panel { padding:6px 10px; gap:4px; }
html body #view .reads-panel .reads { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; }
html body #view .reads-panel .read { flex-direction:row; align-items:baseline; gap:6px; min-width:0; flex:0 1 auto; }
html body #view .reads-panel .read .k { font-size:calc(10px * var(--fs, 1)); letter-spacing:1.5px; }
html body #view .reads-panel .read .v, html body #view .reads-panel .read.sm .v { font-size:calc(14px * var(--fs, 1)); line-height:1.2; }
html body #view .reads-panel .read .v small { font-size:calc(10px * var(--fs, 1)); }
html body #view .reads-panel .read.sm .v { max-width:22ch; }
html body #view .reads-panel .meter { order:9; flex:1 0 100%; height:5px; gap:2px; }
html body #view .reads-panel #rMore { order:10; flex:1 0 100%; font-size:calc(10.5px * var(--fs, 1)) !important; line-height:1.3; margin:0; }

/* 🎵 the show status bar now sits in the header (Oct 17): one slim line with its Back to music key */
#hd .line .modebar.in-hd { flex:1 1 auto; min-width:0; background:none; border:0; border-radius:0; padding:0; gap:8px; }
#hd .modebar.in-hd .t b { font:600 calc(12px * var(--fs, 1))/1.15 var(--cond); letter-spacing:2px; color:var(--c, var(--green)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#hd .modebar.in-hd .t b .ic { width:1em; height:1em; }
#hd .modebar.in-hd .t small { font:calc(12px * var(--fs, 1)) var(--mono); color:var(--cyan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hd .modebar.in-hd #mBtn { min-height:32px; padding:0 12px; font-size:calc(12.5px * var(--fs, 1)); box-shadow:0 0 12px -2px var(--pink); }
#hd .modebar.in-hd .mfad, #hd .modebar.in-hd .mloop, #hd .modebar.in-hd .mov { position:static; min-height:30px; padding:0 8px; }
@media (min-width: 700px) { #hd .modebar.in-hd .t b { font-size:calc(13px * var(--fs, 1)); } #hd .modebar.in-hd .t small { font-size:calc(14px * var(--fs, 1)); } }
@media (max-width: 699px) { #hd .modebar.in-hd .t small { display:none; } #hd .modebar.in-hd #mBtn { padding:0 8px; font-size:calc(11px * var(--fs, 1)); min-height:30px; } }

/* 🎚️ Oct 17 (Graham): the HOLD TO BUILD box takes less room. Style chips sit in a tight grid (2+ across when there's space),
   shorter and smaller, so the box shrinks and the board has room for more controls. The big button still grows with its box. */
html body .dj-col .dj-homepick:not([hidden]), html body .dj-col .dj-bstyles:not([hidden]) { display:grid !important; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:4px; margin-top:4px; }
html body .dj-col .dj-homepick .chip, html body .dj-col .dj-bstyles .chip { min-height:28px; padding:0 8px; font-size:calc(12px * var(--fs, 1)); gap:4px; margin:0 !important; justify-content:flex-start; }
html body .dj-col .dj-bstyles .chip .ic, html body .dj-col .dj-homepick .chip .ic { font-size:calc(12px * var(--fs, 1)); width:1em; height:1em; }
html body .dj-col .dj-cmode { margin-top:4px; gap:3px; } html body .dj-col .dj-cmode .btn { min-height:26px; font-size:calc(10.5px * var(--fs, 1)); }
html body .dj-cols { gap:8px; } html body .dj-col .dj-sub { margin-top:4px; }
html body .dj-buildbox > #djBuild { min-height:64px; }

/* 📉 Oct 17 (Graham): the Tempo / Section / Look / Effect strip only shows on MUSIC, DJ and PRO DJ */
body:not([data-page=music]):not([data-page=dj]) #view .panel.reads-panel { display:none !important; }

/* 🧊 Oct 17 (Graham): the GLOWBOP label is a 4-sided box that turns over every 6-12 s (pink, violet, cyan, gold). core.js builds it. */
#hd .bars b.cube3 { background:transparent; position:relative; perspective:420px; overflow:visible; }
#hd .bars b.cube3 .hdsz { visibility:hidden; }
#hd .bars b.cube3 .hdcube { position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 50% calc(var(--hh, 30px) / -2);
  transform:rotateX(var(--rx, 0deg)); transition:transform 1s cubic-bezier(.45,-0.35,.25,1.4); }
#hd .bars b.cube3 .hdf { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding:0 var(--hpad, 12px); background:var(--fb); color:var(--ff);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-origin:50% 50% calc(var(--hh, 30px) / -2); transform:rotateX(calc(var(--n) * 90deg)); }
#hd .bars b.cube3 { --hh:30px; --hpad:12px; } @media (min-width: 700px) { #hd .bars b.cube3 { --hh:34px; --hpad:16px; } }
@media (max-width: 699px) { #hd .bars b.cube3 { --hh:24px; } } @media (max-height: 500px) and (orientation: landscape) { #hd .bars b.cube3 { --hh:18px; --hpad:10px; } }
@media (prefers-reduced-motion: reduce) { #hd .bars b.cube3 .hdcube { transition:none; } }
#hd .bars b.cube3.build, #hd .bars b.cube3.drop { background:transparent; }
/* 🔤 the word splits into one little box per letter (core.js letters()) */
#hd .bars b.cube3 .hdsplit { position:absolute; inset:0; pointer-events:none; }
#hd .bars b.cube3 .hdl { position:absolute; top:0; bottom:0; transform-style:preserve-3d; transform-origin:50% 50% calc(var(--hh, 30px) / -2); transform:rotateX(var(--rx, 0deg)); }
#hd .bars b.cube3 .hdlf { position:absolute; inset:0; background:var(--fb); color:var(--ff); backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform-origin:50% 50% calc(var(--hh, 30px) / -2); transform:rotateX(calc(var(--n) * 90deg)); overflow:hidden; }
#hd .bars b.cube3 .hdlf i { position:absolute; top:50%; transform:translateY(-50%); font-style:normal; line-height:1; white-space:pre; }
#hd .bars b.cube3 .hdf.img { background-size:cover; background-position:center; background-repeat:no-repeat; }

/* 🔔 beep check (Oct 17) */
.sl-ask{margin:8px 0 2px;padding:10px 12px;border-radius:0 12px 0 12px;font-size:.88em;line-height:1.45;color:#fff;
  background:linear-gradient(135deg,rgba(255,178,61,.22),rgba(255,61,154,.18));border:1px solid rgba(255,178,61,.7)}
.sl-ask[hidden]{display:none}
.sl-ask b{display:block;margin-bottom:4px;color:#ffcc66}

/* 🧵 Make a curtain (Oct 17) */
.sl-cm{margin:8px 0;padding:10px 12px;border-radius:0 14px 0 14px;background:linear-gradient(135deg,rgba(255,61,154,.16),rgba(155,61,255,.16));border:1px solid rgba(255,61,154,.6)}
.sl-cm[hidden]{display:none}
.sl-cm .sl-cmh{display:block;font:700 calc(15px * var(--fs, 1)) var(--cond);letter-spacing:1px;color:#ff8cc4;margin-bottom:6px;text-transform:uppercase}
.sl-cmask{margin:6px 0}
.sl-cmask b{display:inline;color:#ffcc66;margin-right:4px}

/* 📏 BUTTON SIZES (Oct 18, 23:09, Graham picked "Mix A + B": "sometimes they're just too big and sometimes they're just too small").
   Three sizes everywhere, finger friendly:
     L 64  big actions + hit pads (HOLD TO BUILD, TAP, COOL, the DJ pads, play / skip), solid colour
     M 48  every regular button, solid colour
     S 36  chips (style picks, options): a slim outline pill in its colour that fills in solid when it's on
   Words that don't fit shrink to fit (fittext.js). Map / editor toolbars keep their small icon keys. */
html body #main .btn:not(.sm) { min-height:48px !important; height:48px; padding-top:0; padding-bottom:0; }
html body #main .btn.lg,
html body #main #djBuild, html body #main #djTap, html body #main .dj-cc > #djCool,
html body #main #muPrev, html body #main #muPlay, html body #main #muNext,
html body #main .dj-skip .btn, html body #main .pads .btn { min-height:64px !important; height:64px !important; max-height:64px; }
html body #main .dj-pads .tile, html body #main .tile.pro-pad { min-height:64px !important; height:64px !important; max-height:64px; padding:4px 6px !important; gap:2px; }
html body #main .dj-pads .tile .em, html body #main .tile.pro-pad .em { font-size:calc(20px * var(--fs, 1)); }
html body #main .seg > .btn { min-height:36px !important; height:36px; }
html body #main #slStage .btn, html body #main .btn.sm { min-height:40px !important; height:40px; }
html body #main .chip { min-height:36px !important; height:36px; padding:0 13px !important; border-radius:999px !important; background-color:transparent !important;
  color:color-mix(in srgb, var(--c, var(--pink)) 75%, #fff) !important; box-shadow:inset 0 0 0 1.5px var(--c, var(--pink)) !important; font-size:calc(14px * var(--fs, 1)); }
html body #main .chip.on, html body #main .chip.sel { background-color:var(--c, var(--pink)) !important; color:#000 !important; box-shadow:0 0 12px -2px var(--c, var(--pink)) !important; }
html body #main .chip:disabled { opacity:.45; }
html body #main .dj-cst .chip, html body #main .chip:not(.gb-wm):empty { padding:0 !important; min-width:0; }   /* icon-only mood keys under COOL stay inside their column */
/* 23:21 Oct 18 (Graham: "build to hold and cool down need to be a different size, 66 33"): HOLD TO BUILD two thirds, COOL one third */
html body #main .dj-bc > .dj-bl { flex:2 1 0 !important; min-width:0; }
html body #main .dj-bc > .dj-cc { flex:1 1 0 !important; min-width:0; }