* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #14151f;
  --card: #1e2030;
  --card-edge: #2c2f45;
  --text: #eceef8;
  --muted: #9aa0b8;
  --accent: #7c6cff;
  --accent-soft: #37325e;
  --good: #4cd98a;
  --warn: #ffb454;
  --bad: #ff6b6b;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

#app { max-width: 480px; margin: 0 auto; padding: 16px 16px 48px; }

.hidden { display: none !important; }

.banner {
  background: var(--warn);
  color: #201500;
  text-align: center;
  padding: 8px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 0 16px;
  font-size: 0.85rem;
}

.score-chip {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40%;
}

.score-chip b { color: var(--accent); margin-left: 4px; }

.round-label { color: var(--muted); font-weight: 600; }

.opp-status {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- landing ---------- */

.screen.landing { padding-top: 12vh; text-align: center; }

h1 { font-size: 2.2rem; margin-bottom: 4px; }
h1 em { color: var(--accent); font-style: normal; }

.tagline { color: var(--muted); margin-bottom: 32px; }

.field {
  display: block;
  text-align: left;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

input, textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  color: var(--text);
  font-size: 1.1rem;
  padding: 14px;
  margin-top: 6px;
  outline: none;
}

input:focus, textarea:focus { border-color: var(--accent); }

.divider { color: var(--muted); margin: 20px 0 12px; font-size: 0.85rem; }

#room-list { display: grid; gap: 8px; }

.room-btn {
  text-align: left;
  border-color: var(--accent);
}

.room-btn small { color: var(--muted); }

.no-games { font-size: 0.85rem; }

.error { color: var(--warn); margin-top: 16px; min-height: 1.4em; }

/* ---------- buttons ---------- */

.btn {
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 12px;
  color: var(--text);
  font-size: 1.05rem;
  padding: 14px;
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.98); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
  margin-top: 20px;
}

.btn:disabled { opacity: 0.45; }

.btn small { display: block; color: inherit; opacity: 0.7; font-weight: 400; }

/* ---------- lobby ---------- */

.screen.lobby { padding-top: 14vh; text-align: center; }

.big-code {
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  margin: 8px 0 24px;
  color: var(--accent);
}

.hint { color: var(--muted); }

.pulse {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  margin: 28px auto;
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.35; }
}

/* ---------- round ---------- */

.question { font-size: 1.35rem; margin-bottom: 12px; }

.q-options { margin-bottom: 8px; color: var(--muted); }
.q-option { padding: 2px 0; }
.vs { color: var(--accent); font-size: 0.8rem; font-weight: 700; }

section { margin-top: 22px; }

section h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 10px;
}

.options { display: grid; gap: 8px; }

.option { text-align: left; position: relative; }

.option.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.bet { grid-template-columns: repeat(5, 1fr); }
.bet .option { text-align: center; font-weight: 700; padding: 12px 0; }

.rounds { grid-template-columns: repeat(4, 1fr); margin-bottom: 4px; }
.rounds .option { text-align: center; font-weight: 700; }
.rounds .option small { font-weight: 400; font-size: 0.7rem; }

.rank-hint { color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; }

.rank-badge {
  display: inline-block;
  width: 24px; height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  margin-right: 10px;
  vertical-align: middle;
  visibility: hidden;
}

/* badge space stays reserved so text doesn't jump when a rank is assigned */
.option.selected .rank-badge { visibility: visible; }
.rank .option { padding-left: 12px; }

/* ---------- waiting ---------- */

.screen.waiting { text-align: center; padding-top: 4vh; }
.screen.waiting .card { text-align: left; margin-top: 24px; }

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}

.card p { margin: 4px 0; }

.lbl { color: var(--muted); font-size: 0.85rem; }

.answers-card p { margin: 8px 0; }
.answers-card b { font-size: 1.05rem; }

.verdict {
  display: flex;
  align-items: center;
  gap: 14px;
}

.verdict.won { border-color: var(--good); background: rgba(76, 217, 138, 0.09); }
.verdict.lost { border-color: var(--bad); background: rgba(255, 107, 107, 0.09); }
.verdict.push { border-color: var(--warn); }

.verdict-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}

.verdict-icon { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.verdict.won .verdict-icon, .verdict.won .verdict-pts { color: var(--good); }
.verdict.lost .verdict-icon, .verdict.lost .verdict-pts { color: var(--bad); }
.verdict.push .verdict-icon, .verdict.push .verdict-pts { color: var(--warn); }

.verdict-pts { font-size: 1.1rem; font-weight: 800; }

.verdict-body b { font-size: 1rem; }

.conf {
  font-size: 0.72rem;
  border: 1px solid var(--card-edge);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--muted);
  vertical-align: middle;
}

.conf.high { border-color: var(--warn); color: var(--warn); }

.same-answer { color: var(--good); font-size: 0.9rem; margin-bottom: 4px; }

.comment-card textarea { margin-top: 0; font-size: 1rem; resize: none; }

.opp-comment {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--card-edge);
  font-size: 0.95rem;
}

/* ---------- end ---------- */

.screen.end h1 { text-align: center; margin: 12px 0 16px; }
.screen.end h3 { margin: 24px 0 4px; color: var(--muted); }

.final-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.score-card { text-align: center; margin-top: 0; }

.big-num { font-size: 2.6rem; font-weight: 800; color: var(--accent); }

.legibility { color: var(--muted); font-size: 0.78rem; margin-top: 6px; }

.miss-card p, .log-card p { font-size: 0.92rem; }

.screen.end .btn { margin-top: 28px; }