.dj-room { position:fixed; inset:0; z-index:105; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:10px; padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); overflow:hidden; color:#efe6ff; background:#0d0814f2; font:15px/1.3 Arial,"Helvetica Neue",sans-serif; box-sizing:border-box; }
.dj-room.dropping { box-shadow:inset 0 0 0 4px #ff2a8a; }
.dj-room button { font:inherit; min-height:40px; padding:6px 14px; color:#efe6ff; background:#ffffff10; border:1px solid #efe6ff55; border-radius:6px; cursor:pointer; touch-action:manipulation; }
.dj-room button:hover { background:#ffffff22; }
.dj-room button[aria-pressed=true] { color:#0d0814; background:#2ae67a; border-color:#2ae67a; }
.dj-room :focus-visible { outline:3px solid #ff2a8a; outline-offset:2px; }
.dj-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dj-head h2 { margin:0; font:400 28px/1 Anton, Impact, sans-serif; letter-spacing:.04em; text-transform:uppercase; color:#ff7ac0; }
.dj-decks { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; }
.dj-deck { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:10px 12px; border:1px solid #efe6ff33; border-radius:10px; background:#ffffff08; min-width:0; }
.dj-deck.deck-b { grid-template-columns:minmax(0,1fr) auto; }
.dj-main { display:grid; gap:6px; align-content:start; min-width:0; }
.dj-deck h3 { margin:0; font-size:12px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }
.dj-name { margin:0; font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dj-bar { height:14px; border-radius:7px; background:#ffffff18; overflow:hidden; cursor:pointer; touch-action:none; }
.dj-fill { height:100%; width:0; background:linear-gradient(90deg,#ff2a8a,#b06cff); }
.dj-time { margin:0; font-size:12px; opacity:.7; font-variant-numeric:tabular-nums; }
.dj-row { display:flex; gap:8px; }
.dj-row .dj-play { flex:1; }
.dj-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; opacity:0; }
/* hand-drawn vertical faders: a slot and a cap */
.dj-vfader { position:relative; display:grid; justify-items:center; gap:6px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.dj-slot { position:relative; width:46px; height:var(--len, 170px); cursor:pointer; touch-action:none; }
.dj-slot::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:6px; transform:translateX(-50%); border-radius:3px; background:#000a; box-shadow:inset 0 0 0 1px #efe6ff33; }
.dj-cap { position:absolute; left:2px; right:2px; height:24px; transform:translateY(-50%); border-radius:4px; background:linear-gradient(#f4efe6,#b8b0c8); box-shadow:0 2px 6px #000a, inset 0 -2px 0 #0003; }
.dj-cap::after { content:""; position:absolute; left:4px; right:4px; top:11px; height:2px; background:#ff2a8a; }
.dj-vfader:focus-within .dj-cap { outline:3px solid #ff2a8a; outline-offset:2px; }
.dj-vfader.off { opacity:.35; }
.dj-tempo { --len:150px; }
.dj-channel { --len:240px; }
.dj-channel .dj-slot { width:58px; }
.dj-channel .dj-cap { height:34px; }
.dj-channel .dj-cap::after { top:16px; }
/* the filter knob */
.dj-knob { position:relative; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.dj-dial { width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#4a3e5c,#1a1424 70%); box-shadow:0 2px 6px #000a, inset 0 0 0 2px #efe6ff33; position:relative; cursor:ns-resize; touch-action:none; }
.dj-dial::after { content:""; position:absolute; left:50%; top:50%; width:3px; height:22px; margin-left:-1.5px; background:#ff2a8a; border-radius:2px; transform-origin:50% 0; transform:rotate(calc(var(--turn) + 180deg)); }
.dj-knob:focus-within .dj-dial { outline:3px solid #ff2a8a; outline-offset:2px; }
.dj-mixer { display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 10px; border:1px solid #efe6ff22; border-radius:10px; }
.dj-clock { margin:0; max-width:150px; font-size:11px; text-align:center; opacity:.7; letter-spacing:.04em; }
.dj-faders { display:flex; justify-content:center; gap:26px; }
.dj-library { display:grid; grid-template-rows:auto minmax(0,1fr); gap:8px; min-height:0; overflow:hidden; }
.dj-drop { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px dashed #efe6ff55; border-radius:10px; font-size:13px; opacity:.85; }
.dj-list { list-style:none; margin:0; padding:0; overflow-y:auto; min-height:0; border-top:1px solid #efe6ff22; }
.dj-list li { display:flex; align-items:center; gap:6px; padding:4px 2px; border-bottom:1px solid #efe6ff14; }
.dj-list .dj-track { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dj-list button { min-height:34px; min-width:40px; padding:2px 8px; }
.dj-status { margin:0; font-size:12px; opacity:.6; min-height:1.2em; }
@media (max-width:700px) and (orientation:portrait) { .dj-decks { grid-template-columns:1fr 1fr; } .dj-mixer { grid-column:1 / -1; grid-row:2; } .dj-channel { --len:150px; } .dj-tempo { --len:110px; } }
@media (max-height:520px) and (orientation:landscape) {
  .dj-room { grid-template-rows:auto auto minmax(0,1fr) auto; gap:5px; padding-top:6px; }
  .dj-head h2 { font-size:20px; } .dj-room button { min-height:32px; padding:3px 10px; }
  .dj-deck { padding:6px 8px; gap:8px; } .dj-main { gap:4px; } .dj-name { font-size:14px; } .dj-time { font-size:11px; }
  .dj-mixer { padding:4px 8px; gap:4px; } .dj-faders { gap:14px; } .dj-channel { --len:118px; } .dj-channel .dj-slot { width:46px; } .dj-channel .dj-cap { height:26px; } .dj-channel .dj-cap::after { top:12px; }
  .dj-tempo { --len:104px; } .dj-dial { width:38px; height:38px; } .dj-dial::after { height:15px; } .dj-clock { font-size:10px; max-width:110px; }
  .dj-drop { padding:4px 8px; } .dj-drop span { display:none; } .dj-library { grid-template-columns:auto minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .dj-list li { padding:2px; } .dj-list button { min-height:28px; }
}
}
.god-prompt { position:fixed; left:50%; top:30%; transform:translateX(-50%); z-index:60; width:min(460px, calc(100% - 40px)); text-align:center; color:#f4ecff; font:300 15px/1.3 "Jost", "Futura", "Avenir Next", sans-serif; }
.god-prompt label { display:grid; gap:14px; font-size:clamp(28px, 6vw, 46px); font-weight:300; letter-spacing:.02em; }
.god-prompt input { font:inherit; font-size:clamp(22px, 4.5vw, 34px); font-weight:400; color:#fff; background:transparent; border:0; border-bottom:1px solid #f4ecff99; text-align:center; padding:6px 2px; outline:0; border-radius:0; }
.god-prompt input:focus { border-bottom-color:#fff; }
.god-note { min-height:1.3em; margin:14px 0 0; font-size:14px; opacity:.8; }
.sol-room { position:fixed; inset:0; z-index:105; display:grid; grid-template-rows:auto minmax(0,1fr); gap:10px; padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background:#1f5a3a; color:#f4efe6; font:15px/1.2 Arial,"Helvetica Neue",sans-serif; overflow:hidden; box-sizing:border-box;
  --cw:min(11.5vw, 15vh, 92px); --ch:calc(var(--cw) * 1.4); }
.sol-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sol-head h2 { margin:0; font:400 26px/1 Anton, Impact, sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.sol-head div { display:flex; gap:8px; }
.sol-head button { font:inherit; min-height:40px; padding:6px 14px; color:#f4efe6; background:#ffffff14; border:1px solid #f4efe688; border-radius:6px; cursor:pointer; }
.sol-status { margin:0; flex:1; text-align:center; opacity:.75; font-size:13px; }
.sol-board { display:grid; grid-template-rows:auto minmax(0,1fr); gap:calc(var(--cw) * .25); justify-content:center; min-height:0; overflow-y:auto; }
.sol-top, .sol-tableau { display:grid; grid-template-columns:repeat(7, var(--cw)); gap:calc(var(--cw) * .18); }
.sol-slot { position:relative; width:var(--cw); height:var(--ch); border:1px dashed #ffffff44; border-radius:8px; box-sizing:border-box; padding:0; background:none; cursor:pointer; }
.sol-slot[data-label]:empty::before { content:attr(data-label); position:absolute; inset:0; display:grid; place-items:center; font-size:calc(var(--cw) * .35); opacity:.4; color:#f4efe6; }
.sol-col { border-color:#ffffff22; }
.sol-card { position:absolute; left:-1px; top:-1px; width:var(--cw); height:var(--ch); box-sizing:border-box; padding:4px 5px; display:block; text-align:left; color:#141414; background:#fffdf6; border:1px solid #00000055; border-radius:7px; box-shadow:0 1px 2px #0005; font:700 calc(var(--cw) * .22)/1 Arial, sans-serif; cursor:pointer; touch-action:manipulation; }
.sol-card b { position:absolute; right:8%; bottom:6%; font-size:calc(var(--cw) * .42); }
.sol-card.red { color:#c0392b; }
.sol-card.back { background:repeating-linear-gradient(45deg,#7a2040 0 6px,#5a1830 6px 12px); border-color:#fff8; }
.sol-card.picked { outline:3px solid #ffd23a; outline-offset:1px; z-index:5; }
.sol-col .sol-card { top:calc(var(--down) * var(--cw) * .14 + (var(--n) - var(--down)) * var(--cw) * .32 - 1px); }
.sol-room :focus-visible { outline:3px solid #ffd23a; outline-offset:2px; }
@media (max-height:520px) and (orientation:landscape) { .sol-room { --cw:min(8vw, 17vh, 70px); gap:6px; padding-top:6px; } .sol-head h2 { font-size:18px; } .sol-head button { min-height:32px; padding:4px 10px; } .sol-board { grid-template-columns:auto auto; grid-template-rows:none; justify-content:center; align-items:start; } .sol-top { grid-template-columns:var(--cw) var(--cw); grid-auto-rows:var(--ch); } .sol-top > span { display:none; } }