/* styles.css — Unc's warm palette. Golden hour, not deep space. */

:root {
  --gold: #f0b35c;
  --gold-hot: #ffd98f;
  --ink: #17100a;
  --ui: #c9a878;
  --ui-dim: rgba(201, 168, 120, .55);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--ink);
  overflow: hidden;
  font-family: "DM Sans", sans-serif;
  color: var(--ui);
  user-select: none;
}

#stage { position: fixed; inset: 0; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- wordmark: announces itself, then steps back ---------- */
#word {
  position: absolute; left: 50%; z-index: 3; pointer-events: none;
  font-family: "Cormorant Garamond", serif; font-weight: 700;
  color: var(--gold-hot); letter-spacing: -.01em;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 18px rgba(240, 179, 92, .55), 0 0 34px rgba(240, 179, 92, .25);
  transition: opacity 1.4s ease;
  opacity: .92;
}
body.live #word { opacity: 0; }

/* ---------- caption (only when CC is on) ---------- */
#caption {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 3; pointer-events: none;
  width: min(78vw, 420px);
  text-align: center;
  font-size: 16.5px; line-height: 1.55; font-weight: 400;
  color: rgba(255, 217, 143, .85);
  opacity: 0; transition: opacity .5s ease;
}
body.captions #caption.show { opacity: 1; }

/* ---------- registration ---------- */
#regScreen {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #1b1109, #2b1a0c);
  padding: 24px;
}
#regScreen.hidden { display: none; }
.reg-box {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 13px; text-align: center;
}
.reg-box h2 {
  font-family: "Cormorant Garamond", serif; font-weight: 700;
  font-size: 30px; color: var(--gold-hot);
  text-shadow: 0 0 16px rgba(240, 179, 92, .35);
}
.reg-box p { font-size: 13.5px; color: var(--ui-dim); margin-bottom: 8px; }
.reg-box input {
  background: rgba(240, 179, 92, .06);
  border: 1px solid rgba(240, 179, 92, .22);
  border-radius: 10px;
  padding: 13px 16px;
  font-family: "DM Sans", sans-serif; font-size: 15px;
  color: var(--gold-hot); outline: none; width: 100%;
}
.reg-box input::placeholder { color: var(--ui-dim); }
.reg-box input:focus { border-color: rgba(240, 179, 92, .55); }
.reg-box button {
  font: 500 14px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hot), var(--gold));
  border: none; border-radius: 999px;
  padding: 15px; cursor: pointer; margin-top: 6px;
  box-shadow: 0 0 24px rgba(240, 179, 92, .25);
}
.reg-box button:active { transform: scale(.98); }
.reg-error { color: #c96a50; font-size: 12px; min-height: 16px; }

/* ---------- entry ---------- */
#enter {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .8s ease, transform .8s ease;
}
#enter.hidden { display: none; }
body.live #enter { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(10px); }
#enterBtn {
  font: 500 14px/1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hot), var(--gold));
  border: none; border-radius: 999px;
  padding: 16px 42px; cursor: pointer;
  box-shadow: 0 0 30px rgba(240, 179, 92, .35), 0 6px 18px rgba(0, 0, 0, .4);
  transition: transform .15s ease;
}
#enterBtn:active { transform: scale(.97); }

/* ---------- session controls ---------- */
#controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 0 24px calc(34px + env(safe-area-inset-bottom));
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease .5s;
}
body.live #controls { opacity: 1; pointer-events: auto; }

.ctl {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 1px solid rgba(240, 179, 92, .25);
  background: rgba(240, 179, 92, .07);
  transition: background .2s, border-color .2s, transform .12s;
}
.ctl:active { transform: scale(.94); }
.ctl svg { width: 24px; height: 24px; stroke: var(--ui); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.ctl.small { width: 48px; height: 48px; }
.ctl.small svg { width: 19px; height: 19px; }

#micBtn.recording {
  background: rgba(240, 179, 92, .22);
  border-color: rgba(240, 179, 92, .6);
  animation: recGlow 1.1s ease-in-out infinite alternate;
}
#micBtn.recording svg { stroke: var(--gold-hot); }
@keyframes recGlow {
  from { box-shadow: 0 0 6px rgba(240, 179, 92, .3); }
  to { box-shadow: 0 0 20px rgba(240, 179, 92, .65); }
}

#ccBtn.on { background: rgba(240, 179, 92, .2); border-color: rgba(240, 179, 92, .55); }
#ccBtn.on svg { stroke: var(--gold-hot); }

#kbBtn.on { background: rgba(240, 179, 92, .2); border-color: rgba(240, 179, 92, .55); }

#endBtn { background: rgba(140, 45, 30, .35); border-color: rgba(220, 110, 80, .4); }
#endBtn svg { stroke: #e8967a; }
#endBtn:active { background: rgba(140, 45, 30, .55); }

/* ---------- type row (keyboard option) ---------- */
#typeRow {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(8px);
  bottom: calc(116px + env(safe-area-inset-bottom));
  z-index: 4; width: min(86vw, 440px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
#typeRow.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#typeInput {
  width: 100%;
  background: rgba(23, 16, 10, .85);
  border: 1px solid rgba(240, 179, 92, .3);
  border-radius: 999px;
  padding: 14px 20px;
  font-family: "DM Sans", sans-serif; font-size: 15px;
  color: var(--gold-hot); outline: none;
  backdrop-filter: blur(8px);
}
#typeInput::placeholder { color: var(--ui-dim); }
#typeInput:focus { border-color: rgba(240, 179, 92, .6); }