/* Orientation v3 — same office aesthetic as v0 (warm paper, teal accent),
   with two additions for the v3 surface:
     - proxy-status block on the intro (lifted from spyfall/imposter v3 stylesheets)
     - freeform ask input above the question-chip stack
   Background, hire-card, bubbles, signals all kept verbatim from v0 to
   preserve the brand. */

:root {
  --paper:       #f5f3ee;
  --paper-elev:  #ffffff;
  --ink:         #1f2328;
  --ink-soft:    #4a5159;
  --muted:       #8a8f96;
  --line:        #e2dfd7;
  --line-strong: #cfcabc;
  --accent:      #2d8a82;
  --accent-soft: rgba(45, 138, 130, 0.10);
  --accent-line: rgba(45, 138, 130, 0.4);
  --accent-ink:  #1e5d57;
  --you-bg:      #eef4f3;
  --them-bg:     #ffffff;
  --warn:        #c47b2b;
  --bad:         #b85a4a;
  --shadow-card: 0 1px 0 rgba(15, 20, 25, 0.04), 0 6px 16px rgba(15, 20, 25, 0.04);
  --control-radius: var(--radius-md, 8px);
  --control-radius-sm: var(--radius-sm, 4px);
  --game-focus: var(--border-focus, var(--accent));

  --serif: var(--font-serif, ui-serif, 'Iowan Old Style', Georgia, serif);
  --sans:  var(--font-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif);
  --mono:  var(--font-mono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(circle at 10% 0%, rgba(45, 138, 130, 0.04), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(180, 160, 110, 0.05), transparent 40%);
}

/* -------------------- header -------------------- */
header { text-align: center; padding: 3rem 1.25rem 0.25rem; }
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.25rem, 6.5vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.wordmark .vtag {
  font-size: 0.4em;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent-soft);
  padding: 0.15em 0.5em;
  border-radius: var(--control-radius-sm);
  vertical-align: 0.5em;
  margin-left: 0.35em;
  letter-spacing: 0;
}
.kicker {
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

main {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
}

footer {
  padding: 1.25rem 1rem 1.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}
footer .brand { font-weight: 600; color: var(--ink-soft); }

/* -------------------- screens -------------------- */
.screen { display: none; }
.screen.active { display: block; animation: fadein 0.28s ease; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------------------- intro -------------------- */
.explainer {
  font-size: 1.05rem;
  margin: 1.25rem auto;
  max-width: 36rem;
  text-align: center;
  color: var(--ink);
}
.explainer.subtle {
  color: var(--muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: 0.95rem;
  margin-top: 2rem;
}
.explainer em      { color: var(--accent-ink); font-style: italic; }
.explainer strong  { color: var(--accent-ink); font-weight: 600; }
.explainer code    { font-family: var(--mono); font-size: 0.92em; color: var(--ink-soft); background: var(--paper-elev); padding: 0.05em 0.4em; border-radius: var(--control-radius-sm); border: 1px solid var(--line); }

/* -------------------- proxy status (v3 addition) -------------------- */
.proxy-status {
  max-width: 36rem;
  margin: 1.5rem auto 0.5rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  background: var(--paper-elev);
  border-radius: var(--control-radius);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  text-align: left;
}
.proxy-status code {
  font-family: var(--mono);
  font-size: 0.95em;
  background: transparent;
  padding: 0;
  color: var(--accent-ink);
}
.proxy-status.ok   { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.proxy-status.warn { color: var(--warn);       border-color: rgba(196, 123, 43, 0.4); }
.proxy-status.bad  { color: var(--bad);        border-color: rgba(184, 90, 74, 0.4); }

/* -------------------- buttons -------------------- */
button {
  display: block;
  margin: 1.5rem auto 0;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: 0.85rem 2rem;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  min-width: 11rem;
  transition: filter 0.15s, transform 0.05s, background 0.15s, color 0.15s, border-color 0.15s;
}
.primary {
  background: var(--accent);
  color: #ffffff;
}
.primary:hover  { filter: brightness(1.07); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.primary.inline { display: inline-block; margin: 0; min-width: 0; padding: 0.7rem 1.2rem; }

.ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  font-weight: 500;
}
.ghost:hover { color: var(--ink); border-color: var(--ink-soft); }

button:focus-visible {
  outline: 2px solid var(--game-focus);
  outline-offset: 3px;
}

/* -------------------- hire card -------------------- */
.hire-card {
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  box-shadow: var(--shadow-card);
}
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.hire-meta { line-height: 1.35; }
.hire-name { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.hire-title { color: var(--ink-soft); font-size: 0.92rem; margin-top: 1px; }
.hire-day { color: var(--muted); font-size: 0.82rem; margin-top: 4px; font-style: italic; font-family: var(--serif); }

/* -------------------- transcript -------------------- */
.transcript {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1rem;
  min-height: 4rem;
}
.bubble {
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  max-width: 88%;
  font-size: 0.98rem;
  line-height: 1.5;
  animation: fadein 0.25s ease;
  border: 1px solid var(--line);
  white-space: pre-wrap;
}
.bubble.them {
  background: var(--them-bg);
  align-self: flex-start;
  border-bottom-left-radius: 3px;
  color: var(--ink);
}
.bubble.you {
  background: var(--you-bg);
  align-self: flex-end;
  border-bottom-right-radius: 3px;
  color: var(--ink);
  border-color: rgba(45, 138, 130, 0.20);
}

/* -------------------- turn counter -------------------- */
.turn-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  gap: 0.8rem;
}
.turn-counter {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.turn-counter span { color: var(--ink-soft); font-weight: 600; }
.round-status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  min-height: 1.2em;
  text-align: right;
}

/* -------------------- ask form (v3 addition) -------------------- */
.ask-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ask-form input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  background: var(--paper-elev);
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.ask-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.ask-form input:disabled { opacity: 0.6; }

/* -------------------- question menu -------------------- */
.menu-label {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0.4rem 0 0.55rem;
  letter-spacing: 0.02em;
}
.question-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.q-card {
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.93rem;
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.q-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.q-card:active { transform: translateY(1px); }
.q-card:disabled { opacity: 0.5; cursor: not-allowed; }
.q-card.used { opacity: 0.55; }

/* -------------------- guess screen -------------------- */
#guess h2, #result h2 {
  text-align: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  margin: 1rem 0 0.4rem;
  color: var(--ink);
}
.prompt {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-style: italic;
  font-family: var(--serif);
}
.guess-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 1.25rem 0;
}
.guess-option {
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  text-align: left;
  line-height: 1.4;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--sans);
  width: 100%;
  margin: 0;
  min-width: 0;
}
.guess-option:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* -------------------- result screen -------------------- */
.result-block {
  margin: 1rem auto;
  text-align: center;
  max-width: 32rem;
}
.result-block .label {
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.result-text { font-size: 1.15rem; color: var(--ink); }
.result-text.accent { color: var(--accent-ink); font-weight: 600; }
.reveal-detail {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 1.5rem auto;
  max-width: 36rem;
  line-height: 1.6;
}
.reveal-source {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0.75rem auto 0.5rem;
  max-width: 36rem;
}

.status {
  text-align: center;
  color: var(--muted);
  min-height: 1.4em;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}

/* -------------------- responsive -------------------- */
@media (min-width: 560px) {
  .question-menu { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .wordmark { font-size: 2rem; }
  main { padding: 1rem 0.9rem 2rem; }
  header { padding-top: 2rem; }
  .hire-card { padding: 0.85rem; }
  .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
  .ask-form { flex-direction: column; }
  .primary.inline { width: 100%; }
}