/* ODEON — warm dark concert hall. Gold on burgundy, serif marquee. */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* iOS: kill double-tap smart zoom on every control (Safari ignores
   user-scalable=no in-browser; touch-action IS honored) */
button, .key, .pad, .fret, .loopchip { touch-action: manipulation; }

:root {
  --bg: #120b0e;
  --gold: #ffb03a;
  --gold-dim: #b98336;
  --cream: #f4e6cf;
  --line: #3a2430;
  --panel: #1c1218;
  /* social-kit chrome themed to the hall */
  --soc-bg: var(--panel);
  --soc-fg: var(--cream);
  --soc-dim: #c9a17a;
  --soc-line: var(--line);
  --soc-accent: var(--gold);
  /* clearance for the kit's bottom chips in audience mode: instrument panel
     height + the #controls strip (5+34+5+34+5) + a 12px margin */
  --soc-lift: calc(min(30vh, 230px) + 95px);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--cream);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-text-size-adjust: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

.hidden { display: none !important; }
/* boot splash: html.boot from first paint; main.ts drops it once the gate/auto-join decision lands */
html.boot #ovJoin{display:none !important}
html:not(.boot) #ovSplash{display:none !important}
html.boot .soc-joinchip{display:none !important}

/* ---------- stage ---------- */
#stage { position: relative; flex: 1 1 auto; min-height: 0; }
#hall { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- hud ---------- */
#hud {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));
  background: linear-gradient(#1d1016, #150d11);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
#logo {
  font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
  font-size: 19px;
  letter-spacing: 0.42em;
  color: var(--gold);
  text-shadow: 0 0 18px #ffb03a55;
  margin-right: auto;
}
#copybtn {
  background: none;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #c9a17a; }
#statdot { width: 8px; height: 8px; border-radius: 50%; background: #5a3b46; }
#statdot.on { background: #7cff9a; box-shadow: 0 0 8px #7cff9a; }

/* ---------- control strip ---------- */
#controls {
  z-index: 5;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 5px calc(8px + env(safe-area-inset-right)) 5px calc(8px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.crow { display: flex; align-items: center; gap: 8px; min-height: 34px; }

.tbtn {
  background: #241620;
  border: 1px solid var(--line);
  color: var(--cream);
  border-radius: 7px;
  min-width: 34px;
  height: 32px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.tbtn.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 10px #ffb03a33 inset; }
.tbtn:disabled { opacity: 0.35; }

#transport { display: flex; align-items: center; gap: 6px; }
#transport.conducting #bpmval { color: var(--gold); }
#bpmval { font-size: 17px; min-width: 40px; text-align: center; }
.bpmlbl { font-size: 10px; color: #a07d5e; }
#beatdots { display: flex; gap: 5px; margin-left: 4px; }
#beatdots i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #38222e;
  transition: background 60ms;
}
#beatdots i.lit { background: var(--cream); }
#beatdots i.accent { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

#recwrap { display: flex; align-items: center; gap: 6px; position: relative; }
#recbtn { color: #ff5c5c; font-size: 16px; }
#recbtn.armed { animation: blink 0.5s infinite alternate; border-color: #ff5c5c; }
#recbtn.recording { background: #ff5c5c; color: #fff; border-color: #ff5c5c; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.4; } }
#recbarwrap { width: 56px; height: 5px; background: #38222e; border-radius: 3px; overflow: hidden; }
#recbar { height: 100%; width: 0; background: #ff5c5c; }

#insttabs { display: flex; gap: 5px; }
.itab {
  background: #241620;
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 38px; height: 32px;
  font-size: 16px;
  cursor: pointer;
}
.itab.on { border-color: var(--gold); box-shadow: 0 0 10px #ffb03a44; background: #35202b; }

#looprack {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
#looprack::-webkit-scrollbar { display: none; }
.loopchip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  border: 1px solid var(--c);
  border-radius: 7px;
  padding: 3px 7px;
  font-size: 11px;
  color: var(--cream);
  background: #241620;
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 30%, transparent);
  cursor: pointer;
  animation: chipin 200ms ease-out;
}
@keyframes chipin { from { transform: scale(0.6); opacity: 0; } }
.loopchip.muted { opacity: 0.35; box-shadow: none; }
.loopchip .lglyph { font-size: 13px; }
.loopchip .llen { color: var(--c); font-size: 10px; }
.loopchip .lx { color: #ff8484; margin-left: 2px; }

/* ---------- instrument panel ---------- */
#instpanel {
  z-index: 5;
  height: min(30vh, 230px);
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 4px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 4px;
  touch-action: none;
}

.octbar { display: flex; align-items: center; gap: 8px; justify-content: center; height: 26px; flex: 0 0 auto; }
.octbtn {
  background: #241620; border: 1px solid var(--line); color: var(--cream);
  border-radius: 6px; width: 44px; height: 24px; font: inherit; cursor: pointer;
}
.octlbl { font-size: 10px; color: #a07d5e; letter-spacing: 0.2em; }

/* grand */
.keys { display: flex; flex: 1; min-height: 0; gap: 2px; padding-top: 2px; }
.key.white {
  flex: 1;
  position: relative;
  background: linear-gradient(#fdf6e8, #e8dcc4);
  border-radius: 0 0 5px 5px;
  border: 1px solid #b4a488;
}
.key.white.down { background: linear-gradient(#ffd98a, #f0b95a); }
.key.white::after {
  content: attr(data-label);
  position: absolute; bottom: 4px; left: 0; right: 0;
  text-align: center; font-size: 9px; color: #9a7f4f;
}
.key.black {
  position: absolute;
  top: 0; right: -31%;
  width: 62%;
  height: 60%;
  background: linear-gradient(#3a3136, #14100f);
  border-radius: 0 0 4px 4px;
  z-index: 2;
  border: 1px solid #000;
}
.key.black.down { background: linear-gradient(#8a6a3a, #4c3418); }

/* pads */
.padgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 5px;
  flex: 1;
  min-height: 0;
}
.pad {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #322032, #1e1420);
  border: 1px solid #4a3050;
  border-radius: 9px;
  font-size: 11px;
  color: #cbb4d6;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.pad.hit { animation: padhit 180ms ease-out; }
@keyframes padhit {
  0% { background: #ffb03a; color: #1a0d12; box-shadow: 0 0 22px #ffb03a; }
  100% { background: radial-gradient(circle at 50% 35%, #322032, #1e1420); }
}

/* theremin */
.therfield {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% 110%, #3a1a2e 0%, transparent 60%),
    linear-gradient(90deg, #17101c, #241428 50%, #17101c);
  border: 1px solid #4a3050;
  overflow: hidden;
  cursor: crosshair;
}
.therline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: #ffffff18;
  pointer-events: none;
}
.therline::after {
  content: attr(data-label);
  position: absolute; bottom: 3px; left: 3px;
  font-size: 9px; color: #8f6f9e;
}
.therdot {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3ae, #ffb03a88 60%, transparent 70%);
  box-shadow: 0 0 24px #ffb03a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
.thersnap {
  position: absolute;
  top: 6px; right: 6px;
  background: #241620cc;
  border: 1px solid var(--line);
  color: #8f6f9e;
  font: inherit; font-size: 10px;
  border-radius: 6px;
  padding: 3px 7px;
  letter-spacing: 0.15em;
  cursor: pointer;
  z-index: 3;
}
.thersnap.on { color: var(--gold); border-color: var(--gold-dim); }

/* bass */
.frets { display: flex; flex: 1; min-height: 0; gap: 3px; }
.fret {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(#2c1c14, #191009);
  border: 1px solid #54382a;
  border-radius: 7px;
  color: #d8b892;
  font-size: 12px;
  cursor: pointer;
}
.fret small { font-size: 9px; color: #8a6a4d; }
.fret.down { background: linear-gradient(#7a4c22, #4c2f14); color: #ffe2b0; }

/* audience */
.audpanel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.audhint { font-size: 12px; color: #a07d5e; }
.bigclap {
  font: inherit; font-size: 20px;
  background: #35202b;
  color: var(--cream);
  border: 1px solid var(--gold-dim);
  border-radius: 12px;
  padding: 14px 30px;
  cursor: pointer;
}
.bigclap:active { background: var(--gold); color: #1a0d12; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(90% 90% at 50% 20%, #251219 0%, #120b0e 70%);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-width: 340px;
  width: 90%;
}
.title {
  font-family: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
  font-size: 52px;
  letter-spacing: 0.35em;
  margin-right: -0.35em;
  color: var(--gold);
  text-shadow: 0 0 40px #ffb03a66;
}
.sub { font-size: 12px; color: #c9a17a; text-align: center; }
#nick {
  width: 100%;
  background: #241620;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--cream);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  text-align: center;
  outline: none;
}
#nick:focus { border-color: var(--gold-dim); }
#instpick { display: flex; gap: 8px; width: 100%; }
.ipick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #241620;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #c9a17a;
  font: inherit;
  font-size: 10px;
  padding: 8px 2px;
  cursor: pointer;
}
.ipick b { font-size: 20px; }
.ipick.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px #ffb03a33; }
.big {
  width: 100%;
  background: var(--gold);
  color: #1a0d12;
  border: none;
  border-radius: 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 12px;
  cursor: pointer;
}
.big.ghost { background: #241620; color: var(--gold); border: 1px solid var(--line); font-weight: 400; }
.hint { font-size: 11px; color: #8a6a4d; text-align: center; line-height: 1.7; }

#bigmsg {
  font-family: Didot, "Bodoni MT", Georgia, serif;
  font-size: 40px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
#submsg { font-size: 13px; color: #c9a17a; }

/* ---------- narrow phones: everything must fit a 375pt row ---------- */
@media (max-width: 520px) {
  #logo { font-size: 16px; letter-spacing: 0.3em; }
  #hud { gap: 8px; }
  #controls { padding-left: calc(5px + env(safe-area-inset-left)); padding-right: calc(5px + env(safe-area-inset-right)); }
  .crow { gap: 5px; min-height: 30px; }
  .tbtn { min-width: 30px; height: 30px; font-size: 12px; border-radius: 6px; }
  #recbtn { font-size: 13px; }
  #bpmval { font-size: 14px; min-width: 30px; }
  .bpmlbl { display: none; }
  #transport { gap: 4px; }
  #beatdots { gap: 4px; margin-left: 2px; }
  #beatdots i { width: 6px; height: 6px; }
  #recwrap { gap: 4px; }
  #recbarwrap { width: 32px; }
  #insttabs { gap: 4px; }
  .itab { width: 32px; height: 30px; font-size: 14px; border-radius: 6px; }
  .loopchip { padding: 2px 6px; font-size: 10px; }
  .octbtn { width: 38px; height: 22px; }
  .octbar { height: 22px; gap: 6px; }
  #instpanel { height: min(34vh, 220px); }
  /* panel + slimmer controls strip (5+30+5+30+5) + 12px margin */
  :root { --soc-lift: calc(min(34vh, 220px) + 87px); }
}

/* ---------- social-kit overrides: audience mode ----------
   In the audience (body.soc-aud, ui.ts) the kit chips are welcome, but their
   defaults land inside the bottom instrument panel (the clap surface) and the
   #insttabs row above it. Lift them onto the stage canvas — above the panel
   and the controls strip (--soc-lift). On the pre-join gate the overlay
   covers everything, so the kit defaults stand there. body-prefixed to
   outrank the kit's runtime-injected <style> (appended to head, wins ties). */
body.soc-aud .soc-chip.join { bottom: var(--soc-lift); }
body.soc-aud .soc-chip.inv { bottom: calc(var(--soc-lift) + 40px); }
body.soc-aud .soc-joinchip { bottom: var(--soc-lift); }
body.soc-aud .soc-toast { bottom: var(--soc-lift); }
/* the kit's top-left ⌂ sits on the ODEON marquee — tuck it under the hud */
body.soc-aud .soc-home { top: calc(env(safe-area-inset-top, 0px) + 48px); }

#toast {
  position: fixed;
  left: 50%;
  top: calc(52px + env(safe-area-inset-top));
  transform: translateX(-50%);
  background: #241620ee;
  border: 1px solid var(--gold-dim);
  color: var(--cream);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 250ms;
  pointer-events: none;
  z-index: 20;
  white-space: nowrap;
}