:root {
  --bg: #f4f5f8;
  --panel: #fff;
  --text: #1c2030;
  --muted: #6b7185;
  --border: #dfe2ea;
  --accent: #5b5bf0;
  --accent-text: #fff;
  --link: #4338ca;
  --good: #1a9b55;
  --warn: #c0392b;
  --card-back: repeating-linear-gradient(45deg, #5b5bf0, #5b5bf0 6px, #6f6ff5 6px, #6f6ff5 12px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161f; --panel: #1d2030; --text: #e8eaf2; --muted: #8b91a8; --border: #2e3248; --link: #a5b4fc;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }   /* iOS must not re-scale text on rotate */
body { overflow-x: hidden; margin: 0; font: 16px/1.4 system-ui, sans-serif; background: var(--bg); color: var(--text); }
[hidden] { display: none !important; }
a { color: var(--link); }
a:hover { text-decoration: underline; }

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel); }
.brand { font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.room-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.room-info button { white-space: nowrap; }
.token { font: 600 15px ui-monospace, monospace; letter-spacing: .1em; white-space: nowrap; }
.status { width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.status.on { background: var(--good); }

main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.panel, .bar { overflow-wrap: anywhere; }   /* a 40-character ticket number has nowhere to break; let it */
button, input, select, textarea { overflow-wrap: normal; }   /* ...but never split the digits of a card or a button label */
.narrow { max-width: 460px; margin: 60px auto; text-align: center; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 800px) { .layout { grid-template-columns: minmax(0, 1fr); } }

h1 { margin: 0 0 8px; font-size: 26px; }
h2 { margin: 0 0 8px; font-size: 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--warn); }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

input, select, textarea { min-width: 0; }
input { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%; }
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.title-input { font-size: 20px; font-weight: 600; margin: 4px 0; }
.row { display: flex; gap: 8px; }

button { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 9px 16px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.big { font-size: 18px; padding: 14px 28px; }
button.ghost { background: transparent; }
.or { margin: 20px 0 10px; color: var(--muted); font-size: 13px; }

.players { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 12px 0 20px; }
.player { width: 84px; text-align: center; }
.player.offline { opacity: .4; }
.pcard { height: 112px; border-radius: 10px; border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; }
.pcard.voted { border: 0; background: var(--card-back); }
.pcard.shown { border: 2px solid var(--accent); background: var(--panel); color: var(--accent); }
.pname { margin-top: 6px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me .pname { font-weight: 700; }

.controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.stats { margin-top: 16px; text-align: center; font-size: 18px; }
.stats b { font-size: 26px; }
.stats .consensus { color: var(--good); font-weight: 700; }

.deck, .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.deck button { width: 60px; height: 84px; padding: 0; font-size: 24px; font-weight: 700; border-radius: 10px; }
.deck button.sel { background: var(--accent); color: var(--accent-text); border-color: var(--accent); transform: translateY(-6px); }
.chips button { min-width: 46px; padding: 6px 10px; font-weight: 700; }
.chips button.sel { background: var(--good); color: #fff; border-color: var(--good); }

.group { border-top: 1px solid var(--border); padding: 10px 0; }
.group:first-of-type { border-top: 0; }
.group-title { font-weight: 700; }
.attempt { font-size: 14px; margin-top: 6px; }
.attempt .meta { color: var(--muted); }
.badge { display: inline-block; background: var(--good); color: #fff; border-radius: 6px; padding: 0 7px; font-weight: 700; font-size: 13px; margin-left: 4px; }
.votes { color: var(--muted); font-size: 13px; }

/* ---- timer, outcome, settings ---- */
.title-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.grow { flex: 1 1 200px; min-width: 0; }
.timer { font: 700 20px ui-monospace, monospace; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.timer.idle { color: var(--muted); font-weight: 500; font-size: 15px; }
.timer.warn { color: #b7791f; border-color: #b7791f; }
.timer.over { color: #fff; background: var(--warn); border-color: var(--warn); }

.pcard.speak { border: 3px solid var(--warn); color: var(--warn); box-shadow: 0 0 0 4px rgba(192, 57, 43, .18); }
.pname.speak { color: var(--warn); font-weight: 700; }

.outcome { margin-top: 16px; padding: 14px 16px; border-radius: 10px; text-align: center; font-size: 17px; }
.outcome.good { background: rgba(26, 155, 85, .14); border: 1px solid var(--good); }
.outcome.discuss { background: rgba(192, 57, 43, .12); border: 1px solid var(--warn); }
.outcome .big { font-size: 22px; font-weight: 700; }
.outcome .sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
#finalBox { margin-top: 14px; text-align: center; }
#finalBox .chips { justify-content: center; }

#settingsBox summary { cursor: pointer; font-weight: 600; }
#settingsFields { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
#settingsFields label { display: grid; gap: 4px; }
#settingsFields label.check { display: flex; gap: 8px; align-items: center; }
#settingsFields label.check input { width: auto; }
#settingsFields select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
#settingsFields:disabled { opacity: .6; }
#settingsFields button { justify-self: start; }
.attempt .out { font-weight: 600; }
.attempt .out.discuss { color: var(--warn); }

/* ---- idle pause ---- */
.paused-bar { background: #b7791f; color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; }

/* ---- password ---- */
.pw { margin-top: 12px; max-width: 280px; text-align: center; }
#lock { font-size: 16px; }

/* ---- spectators ---- */
.spectators { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 4px 0 14px; }
.spectator { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px; border: 1px dashed var(--border); border-radius: 999px; font-size: 14px; }
.spectator.me { font-weight: 700; }
.spectator.offline { opacity: .4; }
.role-btn { margin-top: 4px; padding: 0 6px; font-size: 13px; line-height: 1.6; border-radius: 999px; opacity: .55; }
.spectator .role-btn { margin: 0; }
.role-btn:hover { opacity: 1; }
label.spectate { margin-top: 12px; justify-content: center; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
label.spectate input { width: auto; }
#deck p { margin: 8px 0 0; }

/* ---- tickets, work items, sharing mode ---- */
.ticket-key { flex: 0 0 150px; }
.ticket-key input { font-size: 18px; }
.ticket-link { white-space: nowrap; align-self: center; margin-bottom: 4px; }
.layout > * { min-width: 0; }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#setBacklog { font: 13px/1.4 ui-monospace, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%; resize: vertical; }
#setPrefix { font-family: ui-monospace, monospace; font-size: 14px; }
#backlog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; max-height: 340px; overflow: auto; }
.item { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding-right: 6px; min-width: 0; }
.item.current { background: rgba(91, 91, 240, .14); outline: 1px solid var(--accent); }
.item.done .item-main { opacity: .7; }
.item-main { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-main:hover:not(:disabled) { background: rgba(91, 91, 240, .1); }
.item-link, .ticket-key-link { text-decoration: none; }
.share-note { margin-top: 10px; font-size: 14px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#shareToggle.on { background: var(--warn); color: #fff; border-color: var(--warn); }
body.sharing .deck button.sel { transform: none; background: var(--bg); color: var(--text); border-color: var(--border); } /* belt and braces */
body.sharing .deck button { opacity: .55; } /* clicking works but shows your cursor; the keyboard doesn't */

/* ---- phones ---- */
@media (max-width: 600px) {
  main { margin: 12px auto; padding: 0 10px; }
  .panel { padding: 12px; margin-bottom: 12px; border-radius: 10px; }
  .narrow { margin: 24px auto; }
  h1 { font-size: 22px; }

  /* header: brand on the first line, controls on the second, the connection dot in the corner */
  .bar { position: relative; padding: 10px 12px 8px; gap: 6px; }
  .room-info { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .room-info button { padding: 6px 10px; font-size: 14px; }
  .token { font-size: 13px; letter-spacing: .05em; flex: 1; text-align: center; }
  .status { position: absolute; top: 18px; right: 14px; }

  /* ticket row: number and title side by side, the timer on its own line below */
  .ticket-key { flex: 0 0 118px; }
  .title-input { font-size: 18px; }
  .timer { flex: 1 1 100%; text-align: center; font-size: 18px; padding: 6px 10px; }

  /* the table */
  .players { gap: 10px; padding: 8px 0 14px; }
  .player { width: 76px; }
  .pcard { height: 100px; font-size: 30px; }
  .controls button { min-height: 44px; }

  /* the deck fills the row instead of leaving a ragged edge */
  .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } /* 4 across: the default 8 cards make two even rows */
  .deck button { width: auto; height: 76px; padding: 0; font-size: 24px; }

  /* big enough to tap, and 16px+ so iOS doesn't zoom the page when you focus a field */
  button { min-height: 40px; }
  input, select, textarea, #setBacklog, #setPrefix { font-size: 16px; }
  .outcome { padding: 12px; font-size: 16px; }
  .outcome .big { font-size: 20px; }
  .item-main { padding: 10px 8px; }
}

/* very narrow phones (320px): the header's controls can't all share a line, so the token gets its own */
@media (max-width: 380px) {
  .room-info { flex-wrap: wrap; row-gap: 4px; }
  .token { flex: 1 1 100%; order: 3; }
}

/* people who can't switch tickets still read the list normally */
.item-main:disabled { opacity: 1; cursor: default; }
.item.done .item-main:disabled { opacity: .7; }

/* "Joining the room…": fades in only if connecting takes a moment, so quick joins don't flash it */
.connecting { opacity: 0; animation: appear .25s ease .4s forwards; }
@keyframes appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .connecting { animation-duration: 0s; } }