/* the colours of sp3akr.com and SPKR HQ's standard (purple) theme */
:root {
  --bg:#080a12; --panel:#131826; --panel2:#1a2032; --line:#222c42; --line2:#2e3a56;
  --fg:#eef0f6; --dim:#9aa3b8; --faint:#6b7490; --accent:#8b5cf6; --accent-h:#7c3aed; --accent-l:#c4b5fd; --accent2:#06b6d4;
  --accent-ink:#ffffff; --live:#ec4899;
  --radius:14px;
}
* { box-sizing:border-box }
html, body { height:100% }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.55 "Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1100px 600px at 50% -160px,rgba(139,92,246,.20),transparent 70%),
                   radial-gradient(700px 420px at 92% 6%,rgba(6,182,212,.08),transparent 70%);
  background-repeat:no-repeat; background-attachment:fixed;
}
a { color:inherit; text-decoration:none }
button, .btn {
  font:inherit; font-weight:600; color:var(--fg); background:var(--panel2);
  border:1px solid var(--line); border-radius:10px; padding:9px 16px; cursor:pointer;
  transition:background .12s, border-color .12s;
}
button:hover:not(:disabled), .btn:hover { background:#232b42; border-color:var(--line2) }
button:disabled { opacity:.5; cursor:default }
button.primary, .btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent-h)); border-color:transparent; color:#fff;
  box-shadow:0 8px 24px -10px rgba(139,92,246,.8) }
button.primary:hover:not(:disabled), .btn.primary:hover { background:linear-gradient(135deg,#9d74f8,var(--accent-h)); border-color:transparent }
button.danger { background:#5d1f26; border-color:#7d2a33 }
button.ghost { background:transparent }
input, select {
  font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; width:100%;
}
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px }
label { display:block; font-size:12px; color:var(--dim); margin:0 0 5px; letter-spacing:.03em; text-transform:uppercase }

header.top {
  display:flex; align-items:center; gap:14px; padding:11px 22px;
  border-bottom:1px solid rgba(34,44,66,.7); background:rgba(8,10,18,.78); position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.brand { font-weight:800; letter-spacing:.06em; font-size:16px; display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; white-space:nowrap }
.brand img { width:26px; height:26px; display:block }
.brand b { color:var(--accent); font-weight:800 }
.brand i { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--accent-l); background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.4); border-radius:999px; padding:2px 8px; margin-left:2px }
.nav { display:flex; gap:4px; margin-left:12px }
.nav a { color:var(--dim); font-weight:600; font-size:13.5px; padding:7px 12px; border-radius:9px }
.nav a:hover { color:#fff; background:rgba(255,255,255,.05) }
.nav a.on { color:#fff; background:rgba(139,92,246,.16) }
@media (max-width: 760px) { .nav { display:none } }
.spacer { flex:1 }
.who { color:var(--dim); font-size:13px }

.wrap { max-width:1500px; margin:0 auto; padding:22px 18px 40px }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)) }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
}
.card:hover { border-color:rgba(139,92,246,.55) }
.thumb { position:relative; aspect-ratio:16/9; background:#000 }
.thumb video { width:100%; height:100%; object-fit:cover; display:block }
.thumb .ph { position:absolute; inset:0; display:grid; place-items:center; color:#3b4553; font-size:34px }
.badge {
  position:absolute; left:10px; top:10px; background:var(--live); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.08em; padding:3px 7px; border-radius:6px;
}
.count {
  position:absolute; right:10px; top:10px; background:rgba(0,0,0,.6);
  font-size:11px; padding:3px 7px; border-radius:6px; color:#e7edf4;
}
.meta { padding:11px 13px 13px }
.meta .t { font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.meta .s { color:var(--dim); font-size:12.5px; margin-top:2px }
.empty { color:var(--dim); text-align:center; padding:40px 18px }

dialog {
  border:1px solid var(--line); border-radius:16px; background:var(--panel); color:var(--fg);
  padding:0; width:min(520px, calc(100vw - 32px));
}
dialog::backdrop { background:rgba(4,6,12,.74); backdrop-filter:blur(3px) }
dialog .head { padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700 }
dialog .body { padding:18px 20px; display:grid; gap:14px }
dialog .foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end }
.row { display:grid; gap:10px; grid-template-columns:1fr auto; align-items:end }
.err { color:#ff8d8d; font-size:13px; min-height:18px }
.hint { color:var(--dim); font-size:12.5px }
.linkbox {
  display:flex; align-items:center; gap:8px; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
}
.linkbox span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 }
.choices { display:grid; gap:10px }
.choice {
  display:flex; align-items:center; gap:12px; text-align:left; width:100%;
  padding:14px 16px; border-radius:12px; background:var(--panel2); border:1px solid var(--line); cursor:pointer;
}
.choice:hover { border-color:var(--accent) }
.choice .ic { font-size:20px }
.choice .d { font-weight:400; color:var(--dim); font-size:12.5px; margin-top:1px }

/* watch page */
.stage { display:grid; grid-template-columns:320px 1fr; gap:16px; padding:16px; height:calc(100vh - 57px) }
.chat { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-height:0 }
.chat h3 { margin:0; padding:12px 14px; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim) }
.msgs { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:7px }
.msg { font-size:13.5px; word-wrap:break-word }
.msg b { color:var(--accent); font-weight:650 }
.msg.sys { color:var(--dim); font-style:italic; font-size:12.5px }
.chat form { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line) }
.tiles { display:grid; gap:10px; min-height:0; height:100%; align-content:stretch }
.tile { position:relative; background:#000; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; min-height:0 }
.tile[draggable=true] { cursor:grab }
.tile.dragging { opacity:.35 }
.tile.drop-target { outline:2px dashed var(--accent); outline-offset:-3px }
.tile.hidden { display:none }
.tile video { width:100%; height:100%; object-fit:contain; display:block; background:#000 }
.tile .lbl { position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.62); padding:3px 9px; border-radius:6px; font-size:12px }
.tile .st { position:absolute; right:10px; top:10px; background:rgba(0,0,0,.62); padding:3px 9px; border-radius:6px; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums }
.offline { display:grid; place-items:center; height:100%; color:var(--dim); text-align:center }
/* narrow window: chat drops below the video so the stream keeps the full width */
/* chat under the video: automatic on narrow windows and whenever 2+ people stream */
.stage.chat-bottom { grid-template-columns:1fr; grid-template-rows:1fr minmax(130px,22vh); padding:12px }
.stage.chat-bottom .tiles { order:1 }
.stage.chat-bottom .chat { order:2; height:auto; min-height:0 }
@media (max-width: 1250px) {
  .stage { grid-template-columns:1fr; grid-template-rows:1fr minmax(130px,26vh); height:calc(100vh - 57px); padding:12px }
  .tiles { order:1 }
  .chat { order:2; height:auto; min-height:0 }
}
@media (max-width: 1600px) and (min-width: 1251px) {
  .stage { grid-template-columns:280px 1fr }
}
@media (max-width: 700px) {
  header.top { flex-wrap:wrap; gap:8px 10px; padding:10px 12px }
  header.top .brand { font-size:13px }
  .sizes { display:none }                 /* the slider is pointless on a phone */
  .stage { grid-template-rows:auto 1fr; padding:8px; gap:8px; height:auto; min-height:calc(100vh - 57px) }
  .tiles { height:auto }
  .tile { aspect-ratio:16/9; min-height:0 }
  .chat { height:auto; min-height:38vh }
  .tile .ctl { opacity:1 }
  dialog { width:calc(100vw - 20px) }
}
.tile .tap { background:rgba(8,11,15,.85); border:1px solid var(--line); border-radius:10px; color:#fff; font-weight:650 }

/* ---- tile controls, sizes, pip ---- */

.tile .ctl {
  position:absolute; right:8px; bottom:8px; display:flex; gap:6px; opacity:0;
  transition:opacity .12s;
}
.tile:hover .ctl, .tile.touch .ctl { opacity:1 }
.tile .ctl button {
  background:rgba(8,11,15,.78); border:1px solid rgba(255,255,255,.14); color:#fff;
  border-radius:8px; padding:5px 9px; font-size:13px; line-height:1; backdrop-filter:blur(6px);
}
.tile .ctl button:hover { background:rgba(30,38,48,.92) }
.tile .ctl button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.sizes { display:flex; gap:8px; align-items:center; color:var(--dim); font-size:12px }
.sizes input[type=range] { width:130px; accent-color:var(--accent); background:transparent; border:0; padding:0 }
.tiles { width:var(--stage-w,100%); margin:0 auto; transition:width .12s }
.audiobanner {
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:60;
  background:var(--accent); color:var(--accent-ink); font-weight:650;
  padding:10px 18px; border-radius:999px; cursor:pointer; border:0;
}

/* ---- chat identity ---- */
.chat h3 { display:flex; align-items:center; gap:8px }
.chat h3 .me {
  margin-left:auto; display:flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--panel2); border:1px solid var(--line); border-radius:999px;
  padding:3px 10px 3px 8px; font-size:12px; text-transform:none; letter-spacing:0; color:var(--fg);
}
.chat h3 .me:hover { border-color:var(--accent) }
.msg .ic { margin-right:2px }
.msg b { font-weight:650 }
.swatches { display:flex; flex-wrap:wrap; gap:8px }
.swatches button { width:30px; height:30px; border-radius:50%; padding:0; border:2px solid transparent }
.swatches button.on { border-color:#fff; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent) }
.emojis { display:flex; flex-wrap:wrap; gap:6px }
.emojis button { width:36px; height:36px; padding:0; font-size:17px; border-radius:10px }
.emojis button.on { background:var(--accent); border-color:var(--accent) }
.idprev { display:flex; align-items:center; gap:8px; font-size:15px }

/* a tile in fullscreen is no longer a grid item: let it own the screen */
.tile:fullscreen, .tile:-webkit-full-screen {
  width:100vw; height:100vh; max-width:none; max-height:none;
  border:0; border-radius:0; background:#000; aspect-ratio:auto;
}
.tile:fullscreen video, .tile:-webkit-full-screen video { width:100%; height:100%; object-fit:contain }
.tile:fullscreen .ctl { opacity:1; right:16px; bottom:16px }
.tile:fullscreen .lbl { left:16px; bottom:16px }

/* the app link sits in the top bar on every page */
a.btn { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap }
#hx3d { background:linear-gradient(135deg,var(--accent),var(--accent-h)); border-color:transparent; color:#fff }
#hx3d:hover { background:linear-gradient(135deg,#9d74f8,var(--accent-h)) }
@media (max-width: 700px) { #hx3d { display:none } }

/* ---------- pages of SPKR HQ WEB: the start page (two doors), the streams page, bands and the footer ---------- */
.grad { background:linear-gradient(90deg,#a78bfa,var(--accent) 45%,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.kick, .door-kick { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-l) }
.kick { background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.35); border-radius:999px; padding:5px 14px }
.page-hero { text-align:center; padding:40px 12px 26px; max-width:860px; margin:0 auto }
.page-hero h1 { font-size:clamp(30px,5vw,50px); line-height:1.06; letter-spacing:-.02em; margin:16px 0 14px; font-weight:800 }
.page-hero p { color:#c3c8d6; font-size:17px; margin:0 auto; max-width:660px }
.acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px }
.big { padding:13px 24px !important; font-size:15px !important; border-radius:12px !important }
.livecount, .live-now { display:inline-flex; align-items:center; gap:9px; margin-top:20px; color:var(--dim); font-size:13.5px; font-weight:600 }
.live-now { margin-top:0 }
.livecount .dot, .live-now .dot { width:9px; height:9px; border-radius:50%; background:#4b5570 }
.livecount.on, .live-now.on { color:#fff }
.livecount.on .dot, .live-now.on .dot { background:var(--live); box-shadow:0 0 0 4px rgba(236,72,153,.2); animation:pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { box-shadow:0 0 0 8px rgba(236,72,153,0) } }

/* the start page: two big doors */
.home { max-width:1220px }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px }
@media (max-width: 900px) { .duo { grid-template-columns:1fr } }
.door { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:16px; padding:30px 30px 26px; border-radius:26px;
  background:linear-gradient(180deg,rgba(26,32,50,.92),rgba(19,24,38,.92)); border:1px solid var(--line); transition:border-color .15s, transform .15s }
.door:hover { border-color:rgba(139,92,246,.55); transform:translateY(-2px) }
.door::before { content:""; position:absolute; inset:-40% -20% auto; height:70%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(139,92,246,.22),transparent) }
.door.live::before { background:radial-gradient(closest-side,rgba(236,72,153,.18),transparent) }
.door > * { position:relative }
.door h2 { font-size:clamp(28px,3.4vw,38px); letter-spacing:.02em; margin:6px 0 8px; font-weight:800 }
.door p { color:#c3c8d6; font-size:15.5px; margin:0 }
.shots { height:250px; margin:4px 0 2px }
.shots.t .s1 { position:absolute; left:0; top:0; width:84%; border-radius:12px; border:1px solid var(--line2); box-shadow:0 24px 60px -20px rgba(0,0,0,.8); transform:rotate(-1.5deg) }
.shots.t .s2 { position:absolute; right:0; bottom:0; width:54%; border-radius:12px; border:1px solid rgba(139,92,246,.5); box-shadow:0 24px 60px -16px rgba(0,0,0,.9); transform:rotate(2deg) }
.shots.l .mock { position:absolute; inset:0 6% 18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; transform:rotate(-1deg) }
.shots.l .mt { position:relative; border-radius:12px; border:1px solid var(--line2); overflow:hidden; box-shadow:0 18px 40px -18px rgba(0,0,0,.8) }
.shots.l .m1 { background:linear-gradient(135deg,#3b2a6b,#0f766e 70%,#0b3b4a) }
.shots.l .m2 { background:linear-gradient(135deg,#7c2d12,#b45309 45%,#1e293b) }
.shots.l .m3 { background:linear-gradient(135deg,#1e3a8a,#6d28d9 60%,#111827) }
.shots.l .m4 { background:linear-gradient(135deg,#14532d,#15803d 40%,#0f172a) }
.shots.l .mt::after { content:""; position:absolute; left:10px; right:40%; bottom:10px; height:8px; border-radius:4px; background:rgba(255,255,255,.35) }
.shots.l .mb { position:absolute; left:8px; top:8px; background:var(--live); color:#fff; font-size:10px; font-weight:800; letter-spacing:.08em; padding:2px 6px; border-radius:5px }
.shots.l .mv { position:absolute; right:8px; top:8px; background:rgba(0,0,0,.55); color:#e5e7eb; font-size:10px; padding:2px 6px; border-radius:5px }
.mock-note { position:absolute; right:6%; bottom:0; font-size:11px; color:var(--faint) }
.perks { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.perks li { position:relative; padding-left:28px; color:#d3d7e3; font-size:14.5px }
.perks li::before { content:""; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:rgba(139,92,246,.18); border:1px solid rgba(139,92,246,.5) }
.perks li::after { content:""; position:absolute; left:6px; top:6px; width:4px; height:8px; border:solid var(--accent-l); border-width:0 2px 2px 0; transform:rotate(45deg) }
.go { margin-top:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:6px }
.go .hint { font-size:13px }
@media (max-width: 600px) { .door { padding:22px 18px; border-radius:20px } .shots { height:190px } }

/* the streams page */
.empty .empty-art { width:220px; max-width:70%; display:block; margin:0 auto 10px }
.empty h2 { color:#fff; margin:4px 0 6px; font-size:22px }
.empty p { margin:0 auto; max-width:460px }
.sect { font-size:clamp(22px,2.6vw,30px); text-align:center; margin:0 0 20px; letter-spacing:-.01em }
.how { margin-top:44px }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width: 900px) { .how-grid { grid-template-columns:1fr } }
.how-card { background:rgba(19,24,38,.85); border:1px solid var(--line); border-radius:16px; padding:22px }
.how-card .ico { font-size:26px }
.how-card h3 { margin:10px 0 6px; font-size:17px }
.how-card p { margin:0; color:var(--dim); font-size:14.5px }

.band { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:34px; padding:20px 24px;
  border-radius:18px; border:1px solid rgba(139,92,246,.35); background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(6,182,212,.07)); color:#d3d7e3; font-size:15px }
.band b { color:#fff }
.site-foot { display:flex; gap:10px 22px; flex-wrap:wrap; justify-content:center; padding:30px 18px 44px; color:var(--faint); font-size:13px; border-top:1px solid var(--line); margin-top:40px }
.site-foot a { color:var(--dim) }
.site-foot a:hover { color:#fff }

/* TALKIE in its own window on the start page */
.twin { position:fixed; z-index:100; display:flex; flex-direction:column; min-width:380px; min-height:460px; resize:both; overflow:hidden;
  border-radius:14px; border:1px solid rgba(139,92,246,.55); background:#080a12; box-shadow:0 40px 120px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4) }
.twin[hidden] { display:none }
.twin-bar { height:40px; flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 8px 0 14px; cursor:move; user-select:none;
  background:linear-gradient(180deg,#1a2032,#131826); border-bottom:1px solid var(--line) }
.twin-t { display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.08em; font-size:13px }
.twin-t img { width:18px; height:18px }
.twin-bar button { padding:5px 10px; font-size:12.5px; border-radius:8px; background:transparent; border-color:transparent; color:var(--dim) }
.twin-bar button:hover { color:#fff; background:rgba(255,255,255,.07) }
#twin-close:hover { background:#7f1d1d; color:#fff }
.twin iframe { flex:1; width:100%; border:0; background:#080a12 }
.twin.dragging iframe { pointer-events:none }
.twin.max { inset:10px !important; width:auto !important; height:auto !important; resize:none }
.twin.max .twin-bar { cursor:default }
.twin.flash { animation:flash .6s }
@keyframes flash { 30% { box-shadow:0 0 0 3px var(--accent), 0 40px 120px -20px rgba(0,0,0,.9) } }

/* the app page (TALKIE for Android) */
.app-page .meta-line { color:var(--dim); font-size:13.5px; margin-top:14px }
.app-page .sha { font-family:Consolas,"Cascadia Mono",monospace; font-size:11.5px; color:var(--faint); word-break:break-all; margin-top:6px }
.steps { max-width:760px; margin:44px auto 0 }
.steps ol { color:#d3d7e3; font-size:15.5px; padding-left:22px; margin:0 0 18px }
.steps li { margin:10px 0 }
.steps .note { color:var(--dim); font-size:14px; background:rgba(19,24,38,.85); border:1px solid var(--line); border-radius:12px; padding:14px 16px }
.steps .note a { color:var(--accent-l) }