:root{
  --bg:#0b0f14;
  --panel:#111826;
  --panel2:#0f1622;
  --text:#e6edf3;
  --muted:#94a3b8;
  --accent:#7dd3fc;
  --good:#86efac;
  --warn:#fbbf24;
  --bad:#fb7185;
  --clock-face-warn:#b91c1c;
  --border:rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 700px at 20% 0%, #0f2233 0%, var(--bg) 55%);
  color:var(--text);
}
a{color:var(--accent)}
.container{max-width:1050px;margin:0 auto;padding:24px}
.grid{display:grid;gap:16px}
@media (min-width: 900px){
  .grid-cols-2{grid-template-columns: 1.2fr .8fr;}
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
h1{font-size:34px;margin:0 0 6px}
h2{font-size:18px;margin:0 0 10px;color:#dbeafe}
h3{font-size:14px;margin:14px 0 8px;color:#cbd5e1}
p{margin:8px 0;color:var(--muted);line-height:1.45}
.small{font-size:13px;color:var(--muted)}
hr{border:none;border-top:1px solid var(--border);margin:12px 0}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{
  background:rgba(125,211,252,.12);
  color:var(--text);
  border:1px solid rgba(125,211,252,.25);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{background:rgba(125,211,252,.18)}
.btn.primary{background:rgba(134,239,172,.16);border-color:rgba(134,239,172,.35)}
.btn.primary:hover{background:rgba(134,239,172,.22)}
.btn.danger{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.35)}
.btn.danger:hover{background:rgba(251,113,133,.2)}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.03);
  color:var(--muted);font-size:13px;
}
.list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.list li{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.kv{display:grid;grid-template-columns: 120px 1fr;gap:8px;align-items:center}
.kv .k{color:var(--muted);font-size:13px}
.kv .v{font-family: ui-monospace, Menlo, Consolas, monospace}
.qr{width:220px;height:220px;border-radius:12px;border:1px solid var(--border);background:#0b1220;padding:10px}
.badge{font-size:12px;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:rgba(15,22,34,.95);
  border:1px solid var(--border);
  padding:10px 12px;border-radius:14px;box-shadow: 0 10px 30px rgba(0,0,0,.35);
  color:var(--text);display:none;max-width:90vw;
}
.toast--center{
  bottom:auto;top:50%;transform:translate(-50%,-50%);
  padding:18px 24px;font-size:1.15rem;line-height:1.4;
  max-width:92vw;cursor:pointer;
}

.sabotage-hint{
  color:var(--warn);
  font-size:1.15rem;
  font-weight:600;
  line-height:1.4;
  margin:6px 0 0 0;
}

.sectionTitle{display:flex;justify-content:space-between;align-items:center;gap:10px}

select {
  background: rgba(15, 22, 34, 0.95);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  font-size: 16px;
  appearance: none;
}

select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.25);
}

option {
  background: #0b1220;
  color: var(--text);
}

.list li.active {
  border-color: rgba(125, 211, 252, 0.55);
  background: rgba(125, 211, 252, 0.08);
  box-shadow: 0 0 0 2px rgba(125, 211, 252, 0.10);
}

.turnPill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  background: rgba(125, 211, 252, 0.10);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

/* Round end — light, slightly dramatic, living-room tone */
.round-end-seg { padding-bottom: 24px; }
.round-end-lock {
  color: var(--good);
  font-weight: 600;
  margin-bottom: 16px;
}
.round-end-reveal-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 8px;
}
.round-end-case-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
}
.round-end-resolution {
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
  white-space: pre-wrap;
}
.round-end-who { margin-bottom: 16px; }
.round-end-who h3 { margin: 8px 0 4px; }
.round-end-list { list-style: none; margin: 0 0 12px; padding: 0; }
.round-end-list li { padding: 4px 0; color: var(--muted); font-size: 14px; }
.round-end-correct li { color: var(--good); }
.round-end-incorrect li { color: var(--muted); }
.round-end-winner {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin: 16px 0;
}
.round-end-scoreboard { margin-bottom: 16px; }
.round-end-scoreboard h3 { margin: 0 0 8px; }
.round-end-scores {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.round-end-scores li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  font-size: 14px;
}
.round-end-scores li span:last-child { font-family: ui-monospace, monospace; color: var(--accent); }
.round-end-hr { margin: 16px 0; }
.round-end-wait { color: var(--muted); margin: 0; }

.host-round-end .round-end-case-title { font-size: 18px; }
.host-round-end .round-end-winner { font-size: 16px; margin: 12px 0; }

.connection-status {
  font-family: monospace;
  font-size: 12px;
}
.connection-status.connected {
  color: var(--good);
}
.connection-status.disconnected {
  color: var(--bad);
}
.connection-status.reconnecting {
  color: var(--warn);
}
.connection-status.connecting {
  color: var(--muted);
}

/* Host full-screen reveal */
.reveal-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 24px 24px;
  overflow-y: auto;
}
.reveal-title {
  font-size: 28px;
  margin: 0 0 24px;
  color: var(--text);
  text-align: center;
}
.reveal-prompt {
  margin: 0 0 32px;
  text-align: center;
  max-width: 90vw;
}
.reveal-prompt-label {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 6px;
}
.reveal-prompt-text {
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.reveal-current {
  font-size: 22px;
  margin: 16px 0;
  text-align: center;
  min-height: 2em;
}
.reveal-name { font-weight: 700; color: var(--accent); }
.reveal-answered { color: var(--muted); }
.reveal-answer-wrap {
  position: relative;
  display: inline-block;
}
.reveal-answer-text { color: var(--text); }
.reveal-answer-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  transform-origin: right center;
}
.reveal-answer-cover.reveal-animate {
  animation: reveal-uncover 1.05s ease-out forwards;
}
@keyframes reveal-uncover {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
.reveal-list {
  width: 100%;
  max-width: 560px;
  margin: 24px 0 0 50px;
  text-align: left;
  align-self: flex-start;
}
.reveal-list li {
  font-size: 18px;
  padding: 12px 16px;
  text-align: left;
  justify-content: flex-start;
}
.reveal-list .reveal-pts { margin-left: auto; color: var(--good); font-weight: 600; }
.reveal-votes-waiting { margin-top: 20px; color: var(--muted); }
.reveal-overlay .bigBtn { font-size: 18px; padding: 14px 24px; }

/* Answer row: dialFrameLong spans entire row; letter, instruction, clock on top */
.answerLetterRow {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 8px 0;
  gap: 12px;
  position: relative;
  min-height: 80px;
  padding: 8px 12px;
}
.answerLetterRow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/dialFrameLong.png") no-repeat center center;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}
.answerLetterRow > * {
  position: relative;
  z-index: 1;
}
.answerLetterRow #answerClockWrap {
  margin-left: auto;
}
.answer-clock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.answer-clock-container {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}
.answer-clock {
  position: absolute;
  left: calc(50% + 2px);
  top: calc(50% + 12px);
  width: 58px;
  height: 58px;
  margin-left: -29px;
  margin-top: -29px;
  border-radius: 50%;
  --clock-remaining-deg: 360deg;
  --clock-pie: var(--good);
  --clock-face: rgba(255,255,255,.12);
  background: conic-gradient(
    var(--clock-pie) 0deg,
    var(--clock-pie) var(--clock-remaining-deg),
    var(--clock-face) var(--clock-remaining-deg),
    var(--clock-face) 360deg
  );
}
.answer-clock-label {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Prompt: letter hint (starting with the letter X) not bold */
.prompt-letter-hint { font-weight: normal; }

/* Large letter (serif so e.g. I is distinct from 1) */
.answer-letter {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: white;
}

/* Sabotage target grid: 4 columns, up to 3 rows; tap a player to cast */
.sabotage-target-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.sabotage-target-grid .sabotage-target-btn {
  padding: 10px 6px;
  font-size: 13px;
  min-height: 44px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Host controls: floating top-right, only visible to host */
.host-controls {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 100;
  display: flex;
  gap: 8px;
  align-items: center;
}
.host-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.4);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.host-icon-btn:hover {
  background: rgba(125,211,252,.15);
  border-color: rgba(125,211,252,.3);
}
.host-icon-btn--primary {
  background: rgba(134,239,172,.2);
  border-color: rgba(134,239,172,.4);
}
.host-icon-btn--primary:hover {
  background: rgba(134,239,172,.28);
}

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.modal-overlay .modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  margin-top: 20px;
}