/* Mikey Mania design tokens + shared pieces (TV, host, player). */

:root {
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --ink: #1E2747;
  --muted: #5C6478;
  --faint: #8A91A3;
  --off-ink: #6B7288;

  --blue: #133597;
  --navy: #05247E;
  --orange: #FA6431;
  --orange-ink: #C94A1C;

  --chip: #E9ECF4;
  --panel: #ECEEF4;
  --locked: #E3E6EE;
  --line: #CBD0DD;
  --dash: #B6BCCC;
  --nav-line: #E1E4EC;
  --nav-active: #EEF1FB;

  --answer-bg: #FFF0E8;
  --answer-ink: #A33A12;

  --font-display: 'Passion One', 'Arial Narrow', sans-serif;
  --font-body: 'Urbanist', system-ui, sans-serif;

  --card-shadow: 0 1px 2px rgba(30, 39, 71, .06), 0 8px 20px rgba(30, 39, 71, .07);
  --input-shadow: 0 1px 2px rgba(30, 39, 71, .05);
}

/* Team colors: put .team-0 / .team-1 on any element to theme it. */
.team-0 {
  --team: var(--blue);
  --team-ink: var(--blue);
  --team-alt: var(--orange);
  --team-shadow: rgba(19, 53, 151, .18);
  --team-shadow-strong: rgba(19, 53, 151, .28);
  --team-chip: rgba(255, 255, 255, .18);
  --team-label-opacity: .85;
}
.team-1 {
  --team: var(--orange);
  --team-ink: var(--orange-ink);
  --team-alt: var(--blue);
  --team-shadow: rgba(250, 100, 49, .2);
  --team-shadow-strong: rgba(250, 100, 49, .3);
  --team-chip: rgba(255, 255, 255, .22);
  --team-label-opacity: .9;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
img { display: block; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
input:focus-visible { outline: none; border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(19, 53, 151, .18); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.spacer { flex: 1; }

.form-error {
  margin: 0;
  min-height: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--answer-ink);
}
.form-error:empty { display: none; }

/* "ROOM 4827" pill used on the phone screens */
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}
.room-chip__code {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--blue);
}

/* Big rounded blue action (host login, player join steps) */
.btn-primary {
  height: 64px;
  border: 0;
  border-radius: 18px;
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: .05em;
  box-shadow: 0 8px 18px rgba(19, 53, 151, .22);
}
.btn-primary:disabled { opacity: .6; }