/* Material 3, light, on a warm khadi-paper surface (not stark white).
   Brand = deep ink blue; sides = teal (left) and saffron (right). */
:root {
  --primary: #2f4a7a;
  --on-primary: #ffffff;
  --primary-container: #d8e0f0;
  --on-primary-container: #0f1d38;
  --secondary-container: #e2d8c6;
  --on-secondary-container: #2a2218;
  --surface: #f2ece0;
  --surface-low: #f8f4ec;
  --surface-container: #e9e1d2;
  --surface-high: #ded4c2;
  --on-surface: #1f1b16;
  --on-surface-variant: #50473b;
  --outline: #82766a;
  --outline-variant: #d3c6b3;

  --left: #00696b;
  --left-container: #c2e9e6;
  --on-left-container: #002021;
  --right: #8a5100;
  --right-container: #f7dbbd;
  --on-right-container: #2c1600;

  --error: #ba1a1a;
  --error-container: #ffdad6;

  --hover: rgba(47, 74, 122, 0.08);
  --on-container-btn: rgba(255, 255, 255, 0.6);
  --on-container-btn-hover: rgba(255, 255, 255, 0.85);
  --snack-bg: #2e3036;
  --snack-text: #eff0f7;
  --bubble: var(--surface-container);

  color-scheme: light;
}

/* Dark: Discord-style greys with blurple. Follows the system unless the user picked a theme. */
:root[data-theme="dark"] {
  --primary: #5865f2;
  --on-primary: #ffffff;
  --primary-container: #2f3470;
  --on-primary-container: #e0e3ff;
  --secondary-container: #383a40;
  --on-secondary-container: #e3e5e8;
  --surface: #1e1f22;
  --surface-low: #232428;
  --surface-container: #2b2d31;
  --surface-high: #383a40;
  --on-surface: #f2f3f5;
  --on-surface-variant: #b5bac1;
  --outline: #80848e;
  --outline-variant: #3f4147;

  --left: #6fd6d2;
  --left-container: #133b3b;
  --on-left-container: #c4f0ec;
  --right: #ffb870;
  --right-container: #4a3418;
  --on-right-container: #ffdcbe;

  --error: #ffb4ab;
  --error-container: #5c1a17;

  --hover: rgba(255, 255, 255, 0.06);
  --on-container-btn: rgba(255, 255, 255, 0.08);
  --on-container-btn-hover: rgba(255, 255, 255, 0.16);
  --snack-bg: #e3e5e8;
  --snack-text: #1e1f22;
  --bubble: var(--surface-high);

  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 16px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
code { font-size: 0.9em; }

.ms {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  user-select: none;
}

/* ---------- app bar ---------- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 16px;
  max-width: 760px;
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 500;
  color: var(--on-surface);
  text-decoration: none;
}
.brand .ms { font-size: 26px; color: var(--primary); font-variation-settings: "FILL" 1; }
.brand .tld { color: var(--right); }
.appbar-right { display: flex; align-items: center; gap: 4px; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 64px; }
.view { display: grid; gap: 24px; }
.center { justify-items: center; text-align: center; padding-top: 56px; gap: 16px; }

/* ---------- buttons ---------- */
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; opacity: 0.38; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.filled, .tonal, .outlined, .text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.filled { background: var(--primary); color: var(--on-primary); }
.filled:hover:not(:disabled) { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.filled.big { height: 56px; border-radius: 28px; font-size: 16px; padding: 0 32px; }
.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
.tonal:hover:not(:disabled) { background: var(--surface-high); }
.outlined { border: 1px solid var(--outline); color: var(--on-surface-variant); }
.outlined:hover:not(:disabled) { background: var(--surface-container); }
.outlined[aria-pressed="true"] { background: var(--error-container); border-color: var(--error); color: var(--error); }
.text-btn { padding: 0 12px; color: var(--primary); }
.text-btn:hover { background: var(--hover); }
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--on-surface-variant);
}
.icon-btn:hover { background: var(--surface-high); }
.filled-icon { background: var(--primary); color: var(--on-primary); }
.filled-icon:hover { background: var(--primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }

.hint { font-size: 14px; color: var(--on-surface-variant); }

/* ---------- home ---------- */
.hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 20px;
  padding: 40px 0 8px;
}
.hero h1 {
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 14ch;
}
.lede { font-size: 18px; color: var(--on-surface-variant); max-width: 34ch; }

input {
  height: 48px;
  padding: 0 16px;
  border-radius: 24px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-low);
  outline: none;
  min-width: 0;
}
input:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.link-btn { padding: 0; color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.entry { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 8px; }
.entry-q { font-size: 15px; font-weight: 500; color: var(--on-surface-variant); }
.side-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 560px; }
.side-card {
  display: grid;
  gap: 4px;
  justify-items: start;
  text-align: left;
  padding: 20px 20px 18px;
  border-radius: 24px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.side-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.side-card:active { transform: translateY(0); }
.side-card.left { background: var(--left-container); color: var(--on-left-container); }
.side-card.right { background: var(--right-container); color: var(--on-right-container); }
.side-name { font-size: 24px; font-weight: 500; line-height: 1.15; }
.side-sub { font-size: 14px; opacity: 0.85; }
.side-card.left .side-name { color: var(--left); }
.side-card.right .side-name { color: var(--right); }

.arenas { display: grid; gap: 8px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.section-head h2 { font-size: 22px; font-weight: 400; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.arena {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 16px 16px 20px;
  border-radius: 16px;
  background: var(--surface-container);
}
.arena-motion { font-size: 16px; font-weight: 500; }
.arena-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--on-surface-variant); }
.arena-meta .l { color: var(--left); font-weight: 500; }
.arena-meta .r { color: var(--right); font-weight: 500; }
.arena-meta .stat { display: inline-flex; align-items: center; gap: 4px; }
.arena-meta .ms { font-size: 16px; }
.arena button { grid-row: 1 / span 2; grid-column: 2; }
.empty { text-align: center; color: var(--on-surface-variant); padding: 24px; font-size: 14px; }

.filled, .tonal { text-decoration: none; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--surface-container);
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-variant);
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #2e7d32; box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.5); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); } }
.tagline { font-size: 15px; font-weight: 500; color: var(--right); letter-spacing: 0.01em; }

.block { display: grid; gap: 16px; padding-top: 24px; }
.block-title { font-size: clamp(26px, 4.5vw, 34px); font-weight: 400; line-height: 1.2; text-align: center; }
.block-sub { text-align: center; color: var(--on-surface-variant); margin-top: -8px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card { padding: 20px; border-radius: 24px; background: var(--surface-container); display: grid; gap: 6px; align-content: start; }
.card h3 { font-size: 17px; font-weight: 500; margin: 0; }
.card p { font-size: 14px; color: var(--on-surface-variant); }
.card-icon { font-size: 28px; color: var(--primary); margin-bottom: 4px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border-radius: 24px; background: var(--surface-low); }
.steps h3 { font-size: 17px; font-weight: 500; margin: 0 0 2px; }
.steps p { font-size: 14px; color: var(--on-surface-variant); }
.step-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 500;
}

.motion-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.motion-chip {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--outline-variant);
  background: var(--surface-low);
  font-size: 14px;
}

.challenge {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 32px 20px;
  border-radius: 28px;
  background: var(--primary);
  color: var(--on-primary);
  text-align: center;
}
.challenge h2 { font-size: clamp(22px, 4vw, 28px); font-weight: 400; line-height: 1.25; max-width: 22ch; }
.challenge p { opacity: 0.85; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.challenge .share-wa { background: #25d366; color: #0b2e17; }
.challenge .tonal { background: rgba(255, 255, 255, 0.16); color: var(--on-primary); }
.challenge .tonal:hover { background: rgba(255, 255, 255, 0.26); }

.foot { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 24px 0 8px; font-size: 14px; color: var(--on-surface-variant); }

/* ---------- queue ---------- */
.progress {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--primary-container);
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.center h2 { font-size: 24px; font-weight: 400; }

/* ---------- room ---------- */
.room-bar { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--outline-variant);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface-variant);
}
.chip .ms { font-size: 18px; }
.chip.timer { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.chip.timer.low { background: var(--error-container); color: var(--error); }

.motion {
  padding: 24px;
  border-radius: 28px;
  background: var(--primary-container);
  color: var(--on-primary-container);
  text-align: center;
}
.overline { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.motion p { font-size: clamp(22px, 4vw, 28px); line-height: 1.25; margin-top: 6px; }

.banner {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--error-container);
  color: var(--error);
  font-size: 14px;
  font-weight: 500;
}

.speakers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.speaker {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 24px 12px 16px;
  border-radius: 24px;
  text-align: center;
}
.speaker.left { background: var(--left-container); color: var(--on-left-container); }
.speaker.right { background: var(--right-container); color: var(--on-right-container); }
.spk-name { font-size: 18px; font-weight: 500; margin-top: 12px; }
.spk-side { font-size: 13px; opacity: 0.8; }
.you { font-weight: 700; }
.spk-points { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; margin-top: 4px; }
.spk-points .ms { font-size: 16px; font-variation-settings: "FILL" 1; }
.spk-actions { display: flex; gap: 4px; align-items: center; margin-top: 10px; }
.speaker .tonal { background: var(--on-container-btn); color: inherit; height: 36px; padding: 0 16px; }
.speaker .tonal:hover:not(:disabled) { background: var(--on-container-btn-hover); }
.speaker .icon-btn { color: inherit; opacity: 0.7; width: 36px; height: 36px; }
.speaker .icon-btn:hover { background: var(--on-container-btn-hover); opacity: 1; }

.avatar {
  --level: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary) center / cover no-repeat;
  color: var(--on-primary);
  font-weight: 500;
  flex: none;
}
.avatar.sm { width: 32px; height: 32px; font-size: 14px; }
.avatar.lg { width: 80px; height: 80px; font-size: 30px; transition: box-shadow 0.08s; }
.left .avatar.lg { background-color: #00696b; box-shadow: 0 0 0 calc(var(--level) * 12px) rgba(0, 105, 107, 0.3); }
.right .avatar.lg { background-color: #8a5100; box-shadow: 0 0 0 calc(var(--level) * 12px) rgba(138, 81, 0, 0.28); }

.actions { display: flex; justify-content: center; gap: 12px; }
.actions .ms { font-size: 18px; }
.count { font-variant-numeric: tabular-nums; }

.chat { display: grid; gap: 12px; padding: 16px; border-radius: 24px; background: var(--surface-low); }
.chat-log {
  list-style: none;
  margin: 0;
  padding: 4px 2px;
  height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}
.chat-log:empty::before { content: "No messages yet. Say something useful."; color: var(--on-surface-variant); font-size: 14px; margin: auto; }

/* Bubbles: others on the left (name above), mine on the right in the accent colour. */
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 78%; animation: pop 0.16s ease-out; }
.msg:not(.cont) { margin-top: 10px; }
.msg:first-child { margin-top: 0; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.who { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 14px; font-size: 12px; font-weight: 500; color: var(--on-surface-variant); }
.from-left .who { color: var(--left); }
.from-right .who { color: var(--right); }
.side-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 5px; border-radius: 6px; border: 1px solid currentColor; }
.bubble { padding: 8px 14px; border-radius: 20px; background: var(--bubble); color: var(--on-surface); }
.cont:not(.mine) .bubble { border-top-left-radius: 6px; }
.mine.cont .bubble { border-top-right-radius: 6px; }
.mine .bubble { background: var(--primary); color: var(--on-primary); }
.from-left:not(.mine) .bubble { background: var(--left-container); color: var(--on-left-container); }
.from-right:not(.mine) .bubble { background: var(--right-container); color: var(--on-right-container); }
.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; } }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; height: 44px; background: var(--surface); }
.chat-form .icon-btn { width: 44px; height: 44px; }

/* role-based visibility */
body:not([data-role="listener"]) .listener-only { display: none !important; }
body:not([data-role="debater"]) .debater-only { display: none !important; }

/* ---------- ended ---------- */
.end-icon { font-size: 48px; color: var(--primary); }
.score { display: flex; gap: 12px; margin-top: 8px; }
.score-side { display: grid; gap: 4px; min-width: 140px; padding: 16px 20px; border-radius: 20px; font-size: 14px; }
.score-side strong { font-size: 32px; font-weight: 400; }
.score-side.left { background: var(--left-container); color: var(--on-left-container); }
.score-side.right { background: var(--right-container); color: var(--on-right-container); }
.end-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ---------- snackbar ---------- */
.snackbar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 4px;
  background: var(--snack-bg);
  color: var(--snack-text);
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

@media (max-width: 720px) {
  .cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .brand { font-size: 19px; }
  .hero { padding-top: 24px; }
  .side-card { padding: 16px 14px; }
  .side-name { font-size: 18px; }
  .speaker { padding: 20px 8px 12px; }
  .avatar.lg { width: 64px; height: 64px; font-size: 24px; }
  .speaker .tonal { padding: 0 12px; }
  .score-side { min-width: 0; flex: 1; }
}