:root {
  /* Charcoal + amber, taken from the Imposter app's Theme.kt so the two 5 Talents
     Games titles read as one family. The four charcoals and the two bones are its
     values exactly; the rest are chosen to sit on charcoal without fighting the
     amber, since this app needs more roles than that one does. */
  --bg: #1e1e1e;          /* CharcoalDeep -- the page */
  --bg-2: #2d2d2d;        /* Charcoal -- the icon's ground, top of the gradient */
  --card: #3a3a3a;        /* CharcoalLift -- cards */
  --edge: #4a4a4a;        /* one step up again, for borders */
  --ink: #edeae3;         /* Bone -- warm off-white, never pure #FFF */
  --muted: #9c978c;       /* BoneDim */
  --accent: #e9a81c;      /* Amber -- the icon's seats */
  --accent-fill: #4a3a12; /* AmberShadow -- amber knocked back for backgrounds */
  /* Two close neighbours of the amber, for shading INSIDE a game mark. Wide
     enough apart to separate overlapping shapes, near enough that a mark
     still reads as one object lit from one side rather than three materials
     stuck together. */
  --accent-hi: #f7cc63;   /* amber, lifted */
  --accent-lo: #b8801a;   /* amber, in shadow */
  --on-accent: #2d2d2d;   /* text ON amber: charcoal, not black */
  --hot: #d9634a;         /* warm red that shares the amber's temperature */
  --cool: #5fb3a8;        /* muted teal, desaturated to survive on charcoal */
  --good: #8bbf6a;        /* sage, so "correct" is not a neon on a grey ground */
  --radius: 16px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 70%);
  color: var(--ink);
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  /* App-like feel when installed: no rubber-band scroll chaining */
  overscroll-behavior-y: none;
}

/* Kill the 300ms double-tap-zoom delay on the things people mash */
button, .vote-option, input, textarea { touch-action: manipulation; }

.wrap { max-width: 640px; margin: 0 auto; }
.wrap-wide { max-width: 1200px; margin: 0 auto; }

h1, h2, h3 { margin: 0 0 12px; line-height: 1.15; }
h1 { font-size: 1.9rem; letter-spacing: -0.02em; }
p { line-height: 1.5; }

.brand {
  text-align: center;
  margin-bottom: 20px;
}
.brand .logo {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--accent), var(--hot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand .sub { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.brand .pub {
  color: var(--muted); font-size: 0.62rem; letter-spacing: 0.32em;
  text-transform: uppercase; opacity: 0.8; margin-bottom: 2px;
}

.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.08em; }

input[type="text"], textarea, select {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--bg-2);
  border: 2px solid var(--edge);
  border-radius: 12px;
  outline: none;
}
input[type="text"]:focus, textarea:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 76px; }
/* The lie box is a textarea only so a movie plot can WRAP. It sizes itself to
   the round: one line for a word or a law, a real paragraph box for a plot. */
#fl-input { resize: none; min-height: 0; overflow-y: hidden; }
#fl-input.long { min-height: 132px; overflow-y: auto; }
.more-time { margin-top: 8px; font-size: 0.95rem; padding: 8px 14px; }
.more-time[disabled] { opacity: 0.55; }

.code-input {
  text-transform: uppercase;
  letter-spacing: 0.35em;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
}

button {
  width: 100%;
  padding: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.06s ease, filter 0.15s ease;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--muted); border: 2px solid var(--edge); }
button.danger { background: var(--hot); color: var(--ink); }
button.slim { padding: 10px 14px; font-size: 0.9rem; width: auto; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row > * { flex: 1; }
/* Game-start rows: the button takes only what it needs, dropdowns get the
   rest -- option text must never truncate. */
.row > button.game { flex: 0 0 auto; width: auto; padding: 13px 18px; font-size: 0.98rem; }
.row > select { flex: 1 1 180px; min-width: 0; }
.row > label.opt { flex: 0 1 auto; }
.stack > * + * { margin-top: 12px; }
.muted { color: var(--muted); }
.center { text-align: center; }
.hidden { display: none !important; }

/* Room code display */
.roomcode {
  font-size: clamp(3rem, 14vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-align: center;
  line-height: 1;
}

/* Player chips */
.players { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 2px solid var(--edge);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
}
.chip .av { font-size: 1.3rem; }
.chip.off { opacity: 0.4; }
.chip .pts { color: var(--accent); font-variant-numeric: tabular-nums; }

/* Timer */
.timer {
  height: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.timer .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cool), var(--accent));
  transition: width 0.25s linear;
}
.timer.low .fill { background: var(--hot); }

/* Prompt + answers */
.prompt-text {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
}

.vote-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-2);
  color: var(--ink);
  border: 3px solid var(--edge);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.vote-option:hover:not(:disabled) { border-color: var(--accent); }
.vote-option.picked { border-color: var(--accent); background: var(--accent-fill); }
.vote-option.win { border-color: var(--good); }
.vote-option .thrip { display: block; padding: 3px 0; }
.vote-option .meta { display: block; margin-top: 10px; font-size: 0.9rem; color: var(--muted); font-weight: 500; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge.quiplash { background: var(--accent); color: var(--on-accent); }
.badge.jinx { background: var(--hot); color: var(--ink); }
.badge.safety { background: var(--edge); color: var(--muted); }

/* Scoreboard */
.board { list-style: none; padding: 0; margin: 0; }
.board li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--edge);
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.board li .rank { width: 28px; color: var(--muted); font-weight: 800; }
.board li .nm { flex: 1; font-weight: 600; }
.board li .sc { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.board li .delta { color: var(--good); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.board li.first { border-color: var(--accent); background: var(--accent-fill); }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--hot); color: var(--ink); padding: 12px 20px;
  border-radius: 999px; font-weight: 700; box-shadow: var(--shadow);
  z-index: 50; max-width: 90vw;
}

.conn {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--hot); color: var(--ink);
  text-align: center; padding: 6px; font-size: 0.85rem; font-weight: 700;
  z-index: 60;
}

/* Host screen scales everything up */
.host h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.host .prompt-text { font-size: clamp(1.5rem, 4vw, 2.6rem); text-align: center; }
.host .vote-option { font-size: clamp(1.2rem, 2.6vw, 2rem); }
.host .board li { font-size: clamp(1.1rem, 2.2vw, 1.6rem); padding: 16px 20px; }
.host .duel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .host .duel { grid-template-columns: 1fr; } }

.link { color: var(--cool); text-decoration: none; font-weight: 600; }
.link:hover { text-decoration: underline; }

.tally { font-size: 2rem; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Paused: the phone's play surfaces go visibly dead. The server would bounce
   the tap anyway (pausedreject) -- but a live-looking button that eats taps
   is how trust dies. Host controls are NOT under these ids, so the host can
   still un-pause. */
body.paused #s-writing input, body.paused #s-writing button,
body.paused #s-fiblie input, body.paused #s-fiblie button,
body.paused #s-fibvote button,
body.paused #s-improle input, body.paused #s-improle button {
  opacity: 0.35;
  pointer-events: none;
}

/* Single-phone Imposter: pass the host screen around, tap to flip your card. */
.flip-card { perspective: 1000px; max-width: 420px; margin: 0 auto; cursor: pointer; }
.flip-card .inner {
  position: relative; width: 100%; min-height: 240px;
  transform-style: preserve-3d; transition: transform 0.5s;
}
.flip-card.flipped .inner { transform: rotateY(180deg); }
.flip-card .face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center;
  background: var(--card); border: 3px solid var(--edge); border-radius: var(--radius);
  backface-visibility: hidden;
}
.flip-card .face.back { transform: rotateY(180deg); border-color: var(--accent); }

/* Lobby + scoreboard chat */
.chat-log {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; background: var(--bg-2);
  border: 1px solid var(--edge); border-radius: 12px;
  margin-bottom: 10px; font-size: 0.95rem;
}
.chat-log .who { color: var(--accent); font-weight: 700; margin-right: 6px; }
.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1; }
.chat-row button { flex: 0 0 auto; width: auto; padding: 12px 18px; }
.host .chat-log { font-size: clamp(1rem, 1.8vw, 1.3rem); max-height: 26vh; }

/* Boot control on a host player chip. Deliberately small and set apart from the
   chip's own tap-target, which toggles Safety Quips. */
.chip-boot {
  margin-left: 8px; padding: 0 8px; min-width: 0; width: auto;
  font-size: 1.05rem; line-height: 1.4; border-radius: 8px;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
}
.chip-boot:hover { background: var(--hot); color: var(--ink); border-color: transparent; }

/* Tap a scoreboard name to read what they wrote this round (Ben's ask). */
.board li.tappable { cursor: pointer; }
.board li.tappable .nm::after { content: " ▾"; opacity: 0.45; font-size: 0.8em; }
.written-note {
  flex-basis: 100%; margin: 8px 0 2px; padding: 10px 12px;
  background: var(--bg-2); border-radius: 10px; border: 1px solid var(--edge);
}
.written-row + .written-row { margin-top: 10px; }
.written-q { font-size: 0.85rem; opacity: 0.65; margin-bottom: 3px; }
.written-a { font-size: 1rem; line-height: 1.35; }

/* Room picker. These are the primary control on the join screen, so they are
   sized like a choice and not like a form field. */
.room-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 16px 18px;
  background: var(--bg-2); border: 2px solid var(--edge); border-radius: 14px;
  /* The base button rule sets near-black text for the yellow default button.
     On this dark card that made the labels invisible -- ink, explicitly. */
  color: var(--ink);
}
.room-pick:hover, .room-pick:active { border-color: var(--accent); }
.room-pick-name { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.room-pick-meta { font-size: 0.9rem; opacity: 0.65; color: var(--ink); }

/* Chicken Scratch */
.scr-canvas {
  width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto; display: block;
  background: #fff; border: 2px solid var(--edge); border-radius: 14px;
  touch-action: none;
}
.scr-canvas-tv { max-width: min(62vh, 640px); }
.scr-tools { display: flex; gap: 8px; }
.scr-tools button { flex: 1; padding: 10px 6px; }
.scr-tools button.sel { border-color: var(--accent); color: var(--accent); }


/* ---- Host lobby: one card per game -------------------------------------- */
/* Spacing steps are a phi scale off a 12px base (12, 19, 31): each step is the
   previous times 1.618, so gaps, padding and the gutter between cards are all
   in the same proportion instead of six arbitrary numbers. */
:root { --phi-1: 12px; --phi-2: 19px; --phi-3: 31px; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--phi-2);
  margin-bottom: var(--phi-2);
}
.game-card {
  display: flex;
  flex-direction: column;
  gap: var(--phi-1);
  padding: var(--phi-2);
  margin-bottom: 0;              /* the grid owns the gutter now */
}
.game-card h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.game-card .blurb {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
/* Start button sits on the baseline of every card, so a card with six options
   and a card with none still line their buttons up across the row. */
.game-card .go { margin-top: auto; }
.game-card .go button { width: 100%; }

/* Options fold away. A game with knobs looks as calm as one without until you
   ask for them, which is the whole point of the rebuild. */
.game-card details.opts > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  list-style: none;
  padding: 6px 0;
}
.game-card details.opts > summary::-webkit-details-marker { display: none; }
.game-card details.opts > summary::before { content: "\25B8 "; display: inline-block; transition: transform .15s ease; }
.game-card details.opts[open] > summary::before { transform: rotate(90deg); }
.game-card details.opts .opts-body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.game-card .opt {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--muted); text-transform: none;
  margin: 0;
}
.game-card .opt input[type="checkbox"] { width: auto; }
.game-card .opt input[type="number"] {
  width: 72px; padding: 8px; font-size: 0.95rem;
  color: var(--ink); background: var(--bg-2);
  border: 2px solid var(--edge); border-radius: 10px;
}
.game-card select { font-size: 0.92rem; padding: 10px; }
.game-card .kinds { display: flex; flex-wrap: wrap; gap: 10px 16px; }

/* Each game's mark sits with its title. currentColor means the amber comes from
   the palette, so a mark can never drift out of the theme. */
.game-card .head { display: flex; align-items: center; gap: var(--phi-1); }
.game-card .game-mark {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  color: var(--accent);
}