/* Shared look for the host screen and the player phones. */

:root {
  /* Named palette — a quiz file can pick these by name via optionStyles. */
  --c-red: #e2453c;
  --c-blue: #1368ce;
  --c-yellow: #d89e00;
  --c-green: #26890c;
  --c-purple: #8d4de8;
  --c-teal: #0aa3a3;

  /* Default order when a quiz does not specify optionStyles. */
  --a0: var(--c-red); /* ▲ */
  --a1: var(--c-blue); /* ◆ */
  --a2: var(--c-yellow); /* ● */
  --a3: var(--c-green); /* ■ */
  --a4: var(--c-purple);
  --a5: var(--c-teal);
  --ink: #1a1333;
  --card: #ffffff;
  --muted: #6b6382;
  --radius: 16px;
  --shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: #46178f;
  background-image: radial-gradient(circle at 15% 10%, #6b3fd4 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #2a0d63 0%, transparent 50%), linear-gradient(160deg, #46178f, #23074d);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
}

button:disabled {
  cursor: default;
}

.hidden {
  display: none !important;
}

/* ---------------------------------------------------------------- shapes */

.shape {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  flex: 0 0 auto;
}

.shape.s0 {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.shape.s1 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape.s2 {
  border-radius: 50%;
}
.shape.s3 {
  border-radius: 3px;
}
.shape.s4 {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.shape.s5 {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Named icons, for quizzes where the answer has a meaning a triangle can't
   carry — a real/fake round reads far faster as a tick and a cross. */
.shape.check {
  clip-path: polygon(41% 84%, 8% 51%, 19% 40%, 41% 62%, 81% 22%, 92% 33%);
}
.shape.cross {
  clip-path: polygon(
    18% 8%,
    50% 40%,
    82% 8%,
    92% 18%,
    60% 50%,
    92% 82%,
    82% 92%,
    50% 60%,
    18% 92%,
    8% 82%,
    40% 50%,
    8% 18%
  );
}
.shape.triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.shape.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape.circle {
  border-radius: 50%;
}
.shape.square {
  border-radius: 3px;
}
.shape.star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

/* ---------------------------------------------------------------- generic bits */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.btn {
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  padding: 14px 26px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease;
}

.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.btn.primary {
  background: #26890c;
  color: #fff;
}

.btn.ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: none;
  font-weight: 700;
  padding: 10px 18px;
}

.btn:disabled {
  opacity: 0.45;
}