:root {
  --blue: #0066cc;
  --blue-dark: #0052a3;
  --ink: #0f0b2b;
  --cream: #fff8ee;
  --yellow: #ffd23f;
  --pink: #ff3b8f;
  --purple: #a855f7;
  --teal: #14b8a6;
  --green: #22c55e;
  --red: #ef4444;
  --g-color: var(--blue);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  font-family: 'Fredoka', 'Nunito', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 20%, #ffe9f3, transparent 60%),
    radial-gradient(circle at 70% 80%, #dff1ff, transparent 60%),
    linear-gradient(160deg, #fffaf0, #eaf4ff);
  touch-action: manipulation;
  overscroll-behavior: none;
}

body { padding: 1.2rem 1rem 2rem; }

.card {
  background: white;
  border-radius: 28px;
  padding: 1.5rem;
  border: 5px solid var(--g-color);
  box-shadow: 0 10px 0 var(--ink);
}

/* ===== JOIN ===== */
.join h1 {
  font-size: 2.8rem;
  color: var(--blue);
  text-shadow: 4px 4px 0 var(--yellow), 6px 6px 0 var(--ink);
  margin: 0 0 1rem;
  transform: rotate(-2deg);
  text-align: center;
  line-height: 1;
  font-weight: 900;
}
.join h1 .subtitle {
  display: inline-block;
  font-size: .5em;
  color: var(--pink);
  text-shadow: 3px 3px 0 var(--ink);
  transform: rotate(3deg);
  margin-top: .2em;
}
.logo-pulse {
  animation: logo-pulse 2.8s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes logo-pulse {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  25% { transform: rotate(-3deg) scale(1.06); }
  50% { transform: rotate(-1deg) scale(0.98); }
  75% { transform: rotate(-3deg) scale(1.04); }
}
.join input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: 1.4rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 1rem;
  font-weight: 700;
}
button.btn-primary,
.btn-primary {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 1.4rem 1rem;
  background: var(--blue);
  background-image: linear-gradient(180deg, #3385d6 0%, var(--blue) 100%);
  color: white;
  border: 5px solid var(--ink);
  border-radius: 22px;
  font-size: 1.8rem;
  font-weight: 900;
  font-family: inherit;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 9px 0 var(--ink), 0 12px 22px rgba(0, 102, 204, .25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  position: relative;
  line-height: 1.1;
  text-align: center;
}
.btn-primary::after {
  content: " 🚀";
  display: inline-block;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.btn-primary:hover::after { transform: translateX(4px) rotate(-10deg); }
.btn-primary:active {
  transform: translateY(5px);
  box-shadow: 0 4px 0 var(--ink), 0 6px 12px rgba(0, 102, 204, .25);
}
.join .btn-primary::after { content: " →"; }
.join .error {
  color: var(--red);
  margin-top: .8rem;
  font-weight: 800;
  text-align: center;
}

/* ===== WAITING ===== */
.waiting { text-align: center; }
.waiting h2 { margin: 0 0 .5rem; font-size: 2rem; color: var(--blue); font-weight: 900; }
.waiting .status { font-size: 1.2rem; color: #64748b; font-weight: 700; }
.waiting .spinner {
  margin: 2rem auto;
  width: 60px; height: 60px;
  border: 7px solid var(--blue);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== PREP TWO TRUTHS ===== */
.prep h2 {
  color: var(--green);
  text-shadow: 3px 3px 0 var(--ink);
  margin: 0 0 .5rem;
  font-size: 1.8rem;
  font-weight: 900;
}
.prep p.hint { color: #64748b; font-weight: 700; margin-top: 0; }
.prep .timer {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--blue);
  margin: .5rem 0;
  text-shadow: 3px 3px 0 var(--yellow);
}
.statement-row { margin-bottom: .8rem; }
.statement-row label { display: block; font-weight: 900; margin-bottom: .3rem; }
.statement-row input[type="text"] {
  width: 100%;
  font-family: inherit;
  font-size: 1.2rem;
  padding: .9rem;
  border-radius: 14px;
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font-weight: 600;
}
.lie-row {
  margin: 1rem 0;
  padding: 1rem;
  background: #fff7ed;
  border-radius: 16px;
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.lie-row p { margin: 0 0 .5rem; font-weight: 900; }
.lie-choices { display: flex; gap: .5rem; }
.lie-choice {
  flex: 1;
  padding: .9rem;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: white;
  font-weight: 900;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
.lie-choice.selected { background: var(--red); color: white; }

/* ===== GAME ROUND (generic) ===== */
.round h2 {
  margin: 0 0 .3rem;
  color: var(--g-color);
  font-size: 1.4rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}
.round .prompt {
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 20px;
  border: 4px solid var(--g-color);
  margin: .8rem 0 1.2rem;
  box-shadow: 0 6px 0 var(--ink);
  line-height: 1.25;
}
.answer-grid { display: grid; gap: .8rem; }
.answer-grid.roster { grid-template-columns: repeat(2, 1fr); }
.answer-grid.binary { grid-template-columns: repeat(2, 1fr); }
.answer-grid.statements { grid-template-columns: 1fr; }
.answer-btn {
  padding: 1.3rem .8rem;
  background: white;
  border: 4px solid var(--g-color);
  border-radius: 18px;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 7px 0 var(--ink);
  text-align: center;
  transition: transform .1s;
  position: relative;
}
.answer-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.answer-btn.picked {
  background: var(--g-color);
  color: white;
  transform: scale(1.03);
}
.answer-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}
.answer-btn.statement { text-align: left; display: flex; gap: .8rem; align-items: center; }
.answer-btn.statement .num {
  font-size: 2rem;
  color: var(--g-color);
  font-weight: 900;
}
.answer-btn.statement .text { font-size: 1.05rem; flex: 1; font-weight: 800; }
.answer-btn.statement.picked .num { color: white; }
.answer-btn .tiny-note {
  margin-top: .3rem;
  font-size: .85rem;
  font-weight: 700;
  color: #64748b;
}

.waiting-inline {
  text-align: center;
  padding: 1.5rem;
  color: #64748b;
  font-weight: 800;
  font-size: 1.1rem;
}
.presenter-now {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--g-color);
  color: white;
  border-radius: 20px;
  border: 4px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  font-size: 1.5rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 var(--ink);
}
.presenter-now .sub {
  font-size: .95rem; opacity: .9; margin-top: .5rem; font-weight: 600;
  text-shadow: none;
}

/* ===== INVULZIN ===== */
.text-input,
.round.invulzin .text-input,
.round.captionthis .text-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.5rem;
  padding: 1.1rem 1rem;
  border-radius: 18px;
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin: 1rem 0;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  background: white;
}
.text-input:focus { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* ===== CAPTION THIS ===== */
.player-photo {
  text-align: center;
  padding: 1rem;
  background: #f3f4f6;
  border-radius: 20px;
  border: 4px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  margin: 0 0 .8rem;
}
.player-photo-emoji {
  font-size: clamp(3.5rem, 18vw, 7rem);
  letter-spacing: .1em;
}
.player-photo img {
  width: 100%; max-height: 250px; object-fit: cover;
  border-radius: 12px;
}

.laugh-instruction {
  text-align: center; font-size: 1.1rem; font-weight: 800;
  margin: 1rem 0;
  color: #64748b;
}
.laugh-button {
  width: 100%;
  font-size: clamp(5rem, 25vw, 10rem);
  padding: 1.5rem 1rem;
  background: var(--yellow);
  border: 6px solid var(--ink);
  border-radius: 28px;
  box-shadow: 0 12px 0 var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  font-family: inherit;
}
.laugh-button:active {
  transform: translateY(4px); box-shadow: 0 8px 0 var(--ink);
}
.laugh-button.pressed {
  animation: laugh-press .2s ease-out;
}
@keyframes laugh-press {
  0% { transform: scale(1); background: var(--yellow); }
  50% { transform: scale(1.1); background: var(--pink); }
  100% { transform: scale(1); background: var(--yellow); }
}

.kicked {
  text-align: center; padding: 2rem;
  color: var(--red); font-weight: 900; font-size: 1.5rem;
}