:root {
  --ck-bg: #0d0f14;
  --ck-surface: #161a24;
  --ck-card: #1c2130;
  --ck-border: #2a2f3e;
  --ck-text: #e8eaf0;
  --ck-dim: #8b90a0;
  --ck-accent: #00ff88;
  --ck-hot: #ff3355;
  --ck-warn: #ffaa22;
  --ck-gold: #ffd700;
  --ck-silver: #c0c0d0;
  --ck-bronze: #cd7f32;
  --ck-font: 'DM Sans', system-ui, sans-serif;
  --ck-head: 'Space Grotesk', 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--ck-bg);
  color: var(--ck-text);
  font-family: var(--ck-font);
  line-height: 1.5;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.ck-app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px env(safe-area-inset-bottom);
}

/* --- TOPBAR --- */
.ck-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
}
.ck-topbar .hub-back {
  font: 600 .65rem/1 var(--ck-head);
  color: var(--ck-dim);
  text-decoration: none;
  letter-spacing: .08em;
}
.ck-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}
.ck-logo { font-size: 1.6rem; line-height: 1; }
.ck-eyebrow {
  font: 600 .55rem/1 var(--ck-head);
  color: var(--ck-dim);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ck-topbar h1 {
  font: 700 1.3rem/1.1 var(--ck-head);
  color: var(--ck-text);
}

/* --- SCREENS --- */
.ck-screen { padding-bottom: 32px; }
.ck-screen[hidden] { display: none !important; }

/* --- LOBBY --- */
.ck-lobby-hero {
  text-align: center;
  padding: 32px 0 24px;
}
.ck-kicker {
  display: block;
  font: 600 .65rem/1 var(--ck-head);
  color: var(--ck-dim);
  letter-spacing: .12em;
  margin-bottom: 12px;
}
.ck-lobby-hero h2 {
  font: 700 2rem/1.1 var(--ck-head);
  margin-bottom: 8px;
}
.ck-lobby-hero p {
  color: var(--ck-dim);
  font-size: .95rem;
  max-width: 400px;
  margin: 0 auto;
}
.ck-lobby-form {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 16px;
  padding: 20px;
}
.ck-label {
  display: block;
  font: 600 .75rem/1 var(--ck-head);
  color: var(--ck-dim);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ck-player-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.ck-player-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ck-player-row input {
  flex: 1;
  background: var(--ck-bg);
  border: 1px solid var(--ck-border);
  border-radius: 10px;
  color: var(--ck-text);
  font-size: 16px;
  padding: 10px 14px;
  outline: none;
  font-family: var(--ck-font);
}
.ck-player-row input:focus { border-color: var(--ck-accent); }
.ck-player-row .ck-remove {
  background: none;
  border: none;
  color: var(--ck-dim);
  font-size: 1.2rem;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.ck-player-row .ck-remove:hover { color: var(--ck-hot); }
.ck-add-player {
  background: none;
  border: 1px dashed var(--ck-border);
  border-radius: 10px;
  color: var(--ck-dim);
  font: 500 .85rem var(--ck-font);
  padding: 10px;
  width: 100%;
  cursor: pointer;
  margin-bottom: 16px;
}
.ck-add-player:hover { border-color: var(--ck-accent); color: var(--ck-accent); }
.ck-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.ck-select {
  width: 100%;
  background: var(--ck-bg);
  border: 1px solid var(--ck-border);
  border-radius: 10px;
  color: var(--ck-text);
  font-size: 16px;
  padding: 10px 12px;
  font-family: var(--ck-font);
  margin-top: 6px;
  appearance: none;
  -webkit-appearance: none;
}
.ck-start-btn {
  width: 100%;
  background: var(--ck-accent);
  color: #0d0f14;
  border: none;
  border-radius: 12px;
  font: 700 1rem var(--ck-head);
  padding: 14px;
  cursor: pointer;
  letter-spacing: .02em;
}
.ck-start-btn:active { transform: scale(.97); }

/* --- SCENARIO SCREEN --- */
.ck-scenario-card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  margin: 24px 0;
}
.ck-round-label {
  font: 700 .7rem/1 var(--ck-head);
  color: var(--ck-accent);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ck-scenario-stage {
  font: 700 1.5rem/1.2 var(--ck-head);
  margin-bottom: 10px;
}
.ck-scenario-scene {
  color: var(--ck-dim);
  font-size: .92rem;
  margin-bottom: 8px;
  line-height: 1.5;
}
.ck-scenario-obj {
  color: var(--ck-warn);
  font: 600 .85rem/1.4 var(--ck-font);
  margin-bottom: 14px;
}
.ck-axes-badge {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ck-axes-badge span {
  background: rgba(0,255,136,.1);
  color: var(--ck-accent);
  font: 600 .7rem/1 var(--ck-head);
  padding: 5px 10px;
  border-radius: 6px;
  letter-spacing: .06em;
}
.ck-next-btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: var(--ck-accent);
  color: #0d0f14;
  border: none;
  border-radius: 12px;
  font: 700 1rem var(--ck-head);
  padding: 14px;
  cursor: pointer;
}
.ck-next-btn:active { transform: scale(.97); }

/* --- VOTE SCREEN --- */
.ck-vote-header {
  text-align: center;
  padding: 16px 0 8px;
}
.ck-vote-scenario {
  font: 600 .92rem/1.3 var(--ck-head);
  color: var(--ck-dim);
  max-width: 500px;
  margin: 0 auto;
}
.ck-picks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.ck-pick-card {
  background: var(--ck-card);
  border: 2px solid var(--ck-border);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  position: relative;
}
.ck-pick-card:active { transform: scale(.96); }
.ck-pick-card.ck-voted { border-color: var(--ck-accent); }
.ck-pick-tag {
  font: 700 .55rem/1 var(--ck-head);
  color: var(--ck-dim);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ck-pick-name {
  font: 700 1rem/1.2 var(--ck-head);
  margin-bottom: 4px;
  word-break: break-word;
}
.ck-pick-desc {
  font-size: .78rem;
  color: var(--ck-dim);
  line-height: 1.35;
}
.ck-pick-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  min-height: 24px;
}
.ck-voter-chip {
  background: rgba(0,255,136,.15);
  color: var(--ck-accent);
  font: 600 .65rem/1 var(--ck-head);
  padding: 4px 8px;
  border-radius: 5px;
}
.ck-vote-status {
  text-align: center;
  padding: 12px 0;
}
.ck-vote-status .ck-voter-btn {
  display: inline-block;
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 8px;
  color: var(--ck-text);
  font: 600 .82rem var(--ck-font);
  padding: 8px 14px;
  margin: 4px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  transition: background .15s;
}
.ck-vote-status .ck-voter-btn.ck-done {
  background: rgba(0,255,136,.1);
  border-color: var(--ck-accent);
  color: var(--ck-accent);
  cursor: default;
  opacity: .5;
}
.ck-vote-status .ck-voter-btn:not(.ck-done):hover { background: var(--ck-card); }
.ck-current-voter {
  font: 700 1rem/1 var(--ck-head);
  color: var(--ck-accent);
  margin-bottom: 8px;
}

/* --- REVEAL SCREEN --- */
.ck-reveal-header {
  text-align: center;
  padding: 16px 0 8px;
}
.ck-reveal-scenario {
  font: 600 .85rem/1.3 var(--ck-head);
  color: var(--ck-dim);
}
.ck-reveal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.ck-reveal-card {
  background: var(--ck-card);
  border: 2px solid var(--ck-border);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  transition: border-color .3s;
}
.ck-reveal-card.ck-best {
  border-color: var(--ck-accent);
  box-shadow: 0 0 20px rgba(0,255,136,.15);
}
.ck-reveal-card.ck-worst {
  border-color: var(--ck-hot);
  box-shadow: 0 0 20px rgba(255,51,85,.1);
}
.ck-rank-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  font: 700 .6rem/1 var(--ck-head);
  padding: 4px 8px;
  border-radius: 5px;
  letter-spacing: .05em;
}
.ck-best .ck-rank-badge { background: var(--ck-accent); color: #0d0f14; }
.ck-worst .ck-rank-badge { background: var(--ck-hot); color: #fff; }
.ck-reveal-voters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.ck-reveal-voter {
  font: 600 .65rem/1 var(--ck-head);
  padding: 4px 8px;
  border-radius: 5px;
}
.ck-reveal-voter.ck-right { background: rgba(0,255,136,.15); color: var(--ck-accent); }
.ck-reveal-voter.ck-wrong { background: rgba(255,51,85,.12); color: var(--ck-hot); }
.ck-roast-box {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 14px;
  padding: 18px;
  margin: 14px 0;
  font-size: .92rem;
  line-height: 1.55;
}
.ck-roast-box .ck-roast-line {
  margin-bottom: 8px;
}
.ck-roast-box .ck-roast-line:last-child { margin-bottom: 0; }
.ck-roast-box .ck-burn { color: var(--ck-hot); font-weight: 600; }
.ck-roast-box .ck-praise { color: var(--ck-accent); font-weight: 600; }
.ck-scoreboard-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 12px 0 20px;
}
.ck-score-chip {
  background: var(--ck-card);
  border-radius: 8px;
  padding: 6px 12px;
  font: 600 .8rem var(--ck-font);
  display: flex;
  gap: 6px;
  align-items: center;
}
.ck-score-chip .ck-pts {
  color: var(--ck-accent);
  font-weight: 700;
}

/* --- RESULTS --- */
.ck-results-hero {
  text-align: center;
  padding: 28px 0 20px;
}
.ck-results-hero h2 {
  font: 700 2rem/1.1 var(--ck-head);
  margin-bottom: 6px;
}
.ck-results-sub {
  color: var(--ck-dim);
  font-size: .9rem;
}
.ck-final-standings {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.ck-standing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ck-border);
}
.ck-standing-row:last-child { border-bottom: none; }
.ck-standing-rank {
  font: 700 1.2rem/1 var(--ck-head);
  min-width: 32px;
  text-align: center;
}
.ck-standing-rank.ck-1st { color: var(--ck-gold); }
.ck-standing-rank.ck-2nd { color: var(--ck-silver); }
.ck-standing-rank.ck-3rd { color: var(--ck-bronze); }
.ck-standing-name {
  flex: 1;
  font: 600 .95rem var(--ck-font);
}
.ck-standing-score {
  font: 700 1rem var(--ck-head);
  color: var(--ck-accent);
}
.ck-standing-title {
  font: 600 .7rem/1 var(--ck-head);
  color: var(--ck-dim);
  letter-spacing: .06em;
}
.ck-superlatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.ck-award {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.ck-award-icon { font-size: 1.5rem; margin-bottom: 4px; }
.ck-award-title {
  font: 700 .7rem/1 var(--ck-head);
  color: var(--ck-warn);
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.ck-award-name {
  font: 600 .9rem var(--ck-font);
}
.ck-final-roast {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
  font-size: .9rem;
  line-height: 1.55;
}
.ck-final-roast p { margin-bottom: 10px; }
.ck-final-roast p:last-child { margin-bottom: 0; }

/* --- MOBILE --- */
@media (max-width: 570px) {
  .ck-topbar .hub-back { display: none; }
  .ck-topbar h1 { font-size: 1.1rem; }
  .ck-lobby-hero h2 { font-size: 1.5rem; }
  .ck-scenario-stage { font-size: 1.25rem; }
  .ck-picks-grid { grid-template-columns: 1fr; }
  .ck-reveal-grid { grid-template-columns: 1fr; }
  .ck-pick-name { font-size: .92rem; }
  .ck-settings { grid-template-columns: 1fr; }
  .ck-superlatives { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .ck-app { padding: 0 12px; }
  .ck-lobby-form { padding: 14px; }
  .ck-scenario-card { padding: 20px 16px; }
}
@media (hover: none) {
  .ck-pick-card:hover { transform: none; }
  .ck-start-btn:hover { transform: none; }
}