/* The DJ booth (world/club-booth.js): used in the "DJ Booth" desktop window (djbooth.html) and, on a standalone Plaza page, inside the Plaza.
   Light, solid panels with dark text so everything is easy to read; one column that works from a phone to a wide window. */
.bt-root{font:14px/1.45 "Segoe UI","Trebuchet MS",Tahoma,sans-serif;color:#0b2a48;text-shadow:none;-webkit-text-size-adjust:100%}
.bt-root *{box-sizing:border-box}
.bt-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.bt-head h4{margin:0;font-size:20px;font-weight:800;color:#0a2540}
.bt-root h5{margin:18px 2px 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#2a6aa0}
.bt-root .cl-close{position:static;width:34px;height:34px;border-radius:50%;border:1px solid rgba(80,140,195,.9);background:linear-gradient(#fff,#d9edfc);color:#27567c;font-weight:900;font-size:15px;cursor:pointer}
/* the "now playing" card */
.bt-hero{position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 14px;color:#fff;background:radial-gradient(120% 150% at 0% 0%,#4a26b8 0%,#1b2478 46%,#0a1440 100%);box-shadow:0 10px 24px rgba(10,20,90,.4),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08)}
.bt-hero::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,0));pointer-events:none;border-radius:18px 18px 0 0}
.bt-hero.idle{background:radial-gradient(120% 150% at 0% 0%,#2c3a78 0%,#1a2554 50%,#0d1633 100%)}
.bt-eq{position:absolute;right:16px;top:16px;display:flex;gap:3px;align-items:flex-end;height:26px}
.bt-eq i{display:block;width:5px;height:100%;border-radius:2px;background:linear-gradient(#7fe9ff,#ff6fc8);transform-origin:bottom;animation:bteq 1s ease-in-out infinite}
.bt-eq i:nth-child(2){animation-delay:-.2s;animation-duration:.8s}.bt-eq i:nth-child(3){animation-delay:-.45s;animation-duration:1.15s}.bt-eq i:nth-child(4){animation-delay:-.1s;animation-duration:.9s}.bt-eq i:nth-child(5){animation-delay:-.6s;animation-duration:1.05s}
.bt-eq.off i{animation:none;transform:scaleY(.18);opacity:.5}
@keyframes bteq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.bt-tt{position:relative;padding-right:42px}.bt-tt small{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fdcff}
.bt-tt b{display:block;margin:3px 0 2px;font-size:18px;font-weight:800;line-height:1.25;word-break:break-word;color:#fff}.bt-tt span{display:block;font-size:13.5px;color:#d8e8ff}
.bt-prog{position:relative;height:6px;margin:14px 0 4px;border-radius:3px;background:rgba(255,255,255,.2);overflow:hidden}.bt-prog i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#35c6ff,#ff6fc8);transition:width 1s linear}
.bt-times{display:flex;justify-content:space-between;font-size:12px;color:#bcd2f5;font-variant-numeric:tabular-nums}
.bt-skiprow{position:relative;display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.bt-listen{flex:1 0 100%}
.bt-votes{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:#d8e8ff}
.bt-pips{display:flex;gap:4px}.bt-pips i{width:16px;height:6px;border-radius:3px;background:rgba(255,255,255,.22)}.bt-pips i.on{background:linear-gradient(90deg,#ffb066,#ee7d20)}
/* buttons */
.bt-root .cl-b{font:inherit;font-weight:700;font-size:14px;min-height:38px;color:#1f4f78;border-radius:999px;border:1px solid rgba(80,140,195,.9);padding:7px 18px;cursor:pointer;background:linear-gradient(#fff,#d9edfc);box-shadow:0 1px 3px rgba(0,60,120,.2),inset 0 1px 0 #fff;transition:transform .25s cubic-bezier(.3,1.5,.5,1),filter .2s;white-space:nowrap}
.bt-root .cl-b:hover:not([disabled]){transform:translateY(-1px) scale(1.03);filter:brightness(1.05)}.bt-root .cl-b:active:not([disabled]){transform:scale(.97)}.bt-root .cl-b[disabled]{opacity:.5;cursor:default}
.bt-root .cl-b.go{border-color:#1f7d2c;color:#fff;text-shadow:0 1px 1px rgba(0,60,0,.55);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.9),rgba(255,255,255,0) 52%),linear-gradient(#7ee05c,#2fb23a 55%,#25a032)}
.bt-root .cl-b.skip{border-color:#b8541a;color:#fff;text-shadow:0 1px 1px rgba(80,30,0,.55);background:radial-gradient(ellipse 90% 60% at 50% -5%,rgba(255,255,255,.85),rgba(255,255,255,0) 52%),linear-gradient(#ffb066,#ee7d20 55%,#e06f12)}
/* cards, chips, lists */
.bt-root .cl-card{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #c9e0f2;box-shadow:0 1px 4px rgba(0,60,120,.12)}
.bt-root .cl-m{margin:2px 0 10px;color:#3d607a}
.bt-root .cl-djs{display:flex;flex-wrap:wrap;gap:7px}.bt-root .cl-djs span{padding:5px 13px;border-radius:999px;background:#fff;border:1px solid #bcd8ee;font-weight:700;font-size:13px;color:#16486f}.bt-root .cl-djs span.on{background:linear-gradient(#caf5b3,#8fe068);border-color:#3fae1d;color:#124a0c}
.bt-root .cl-djs i,.bt-root .cl-list i{font-style:normal;color:#5a7a92;font-weight:600;margin-left:5px}
.bt-root .cl-list{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:6px}.bt-root .cl-list li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:9px 13px;border-radius:12px;background:#fff;border:1px solid #cfe3f3;font-size:14px;color:#0b2a48;word-break:break-word}
.bt-root .cl-x{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(200,80,60,.7);background:linear-gradient(#fff,#ffd9d2);color:#a8321f;font-weight:900;cursor:pointer;line-height:1}
.bt-root .cl-add{display:flex;gap:8px}.bt-root .cl-add input{flex:1;min-width:0;font:inherit;font-size:15px;height:42px;padding:0 16px;border-radius:999px;border:1px solid #8fbbdc;background:#fff;color:#0a2540;outline:none;box-shadow:inset 0 1px 3px rgba(0,60,120,.15)}
.bt-root .cl-add input::placeholder{color:#7a97ad}.bt-root .cl-add input:focus{border-color:#2a8ad0;box-shadow:0 0 0 3px rgba(80,180,255,.4)}.bt-root .cl-add input:disabled{opacity:.6}
.bt-root .cl-note{min-height:20px;margin:7px 4px 4px;font-size:13px;color:#1b5f95}.bt-root .cl-note.bad{color:#b02a14;font-weight:700}
.bt-root .cl-rules{margin-top:18px;font-size:13px}.bt-root .cl-rules summary{cursor:pointer;font-weight:700;color:#2a6aa0;padding:4px 0}.bt-root .cl-rules ul{margin:8px 0 0;padding-left:20px;color:#26485f}.bt-root .cl-rules li{margin-bottom:5px}
.bt-banner{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:linear-gradient(#fff6d8,#ffe9a8);border:1px solid #e0b64a;color:#6a4a00;font-weight:600}
/* loading and error */
.bt-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:34px 18px;color:#26485f}.bt-state b{font-size:17px;color:#0a2540}.bt-state p{margin:0;max-width:340px}.bt-state small{max-width:340px;color:#7a97ad;word-break:break-word}.bt-big{font-size:46px}
.bt-spin{width:34px;height:34px;border-radius:50%;border:4px solid rgba(60,140,210,.25);border-top-color:#2a8ad0;animation:btspin .9s linear infinite}@keyframes btspin{to{transform:rotate(360deg)}}
@media (max-width:560px){.bt-tt b{font-size:17px}.bt-root .cl-b{min-height:44px}.bt-root .cl-add input{height:46px;font-size:16px}.bt-skiprow{gap:10px}.bt-skiprow .cl-b{flex:1}}