/* Wise Names. Slate card table, cardstock cards, agent tiles in team colors.
   One family (Archivo), used at different widths: condensed on cards,
   expanded for the clue, normal for everything else. */

:root {
  --table: #2b3440;
  --table-up: #353f4c;
  --table-line: #45505e;
  --paper: #efe6d2;
  --paper-edge: #d8ccb2;
  --ink: #2a2622;
  --red: #c2412d;
  --red-soft: #e7b3a8;
  --blue: #2f62b0;
  --blue-soft: #aec3e6;
  --tan: #d9c49a;
  --assassin: #262321;
  --text: #ece7dc;
  --muted: #a3adb8;
  --turn: var(--red);
  --radius-card: 7px;
  --radius-ui: 5px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--table);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; }
h2 { font-size: 1.05rem; }
h3 { font-size: .85rem; font-weight: 600; color: var(--muted); }

#app { max-width: 1240px; margin: 0 auto; padding: 14px clamp(10px, 2.5vw, 28px) 40px; }
.turn-blue { --turn: var(--blue); }

:focus-visible { outline: 3px solid #f4d35e; outline-offset: 2px; }

/* ---------- buttons and fields ---------- */

.btn {
  appearance: none;
  border: 1px solid var(--table-line);
  background: var(--table-up);
  border-radius: var(--radius-ui);
  padding: .6em 1.05em;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.1;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.primary:hover:not(:disabled) { background: #fff7e6; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.btn.small { padding: .38em .7em; font-size: .85rem; }
.btn.big { padding: .85em 1.6em; font-size: 1.1rem; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: .85rem; color: var(--muted); font-weight: 600; }
.field input, .field select {
  background: #222a34;
  border: 1px solid var(--table-line);
  border-radius: var(--radius-ui);
  padding: .65em .8em;
  min-width: 0;
}
.field input:focus, .field select:focus { border-color: var(--paper); outline: none; }
.field.inline { flex-direction: row; align-items: center; gap: 10px; }

.pill { font-size: .8rem; padding: .2em .6em; border-radius: 99px; }
.pill.warn { background: #f4d35e; color: var(--ink); font-weight: 600; }
.hint { color: var(--muted); font-size: .9rem; margin: 0; }
.empty { color: var(--muted); font-style: italic; font-size: .9rem; }
.muted { color: var(--muted); }

#toast {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--paper); color: var(--ink);
  padding: .7em 1.1em; border-radius: var(--radius-ui);
  font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 10; max-width: calc(100vw - 32px);
}

/* ---------- home ---------- */

.screen-home { display: grid; place-items: center; min-height: 92vh; }
.home { width: min(460px, 100%); }
.wordmark { display: flex; gap: 10px; margin-bottom: 22px; }
.wm-card {
  position: relative; overflow: hidden;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-card);
  padding: .5em .55em .42em;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 850; font-stretch: 72%;
  text-transform: uppercase; letter-spacing: .01em; line-height: 1;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--paper-edge);
}
.wm-covered { padding-right: 1.15em; }
.wm-covered::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blue);
  clip-path: polygon(88% 0, 100% 0, 100% 100%, 80% 100%);
}
.lede { color: var(--muted); margin: 0 0 26px; max-width: 42ch; }
.home-form { display: flex; flex-direction: column; gap: 14px; }
.join-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--table-line); }
.join-row .field { flex: 1; }
#homeCode { text-transform: uppercase; letter-spacing: .25em; font-weight: 700; font-stretch: 115%; }

.screen-wait { display: grid; place-items: center; min-height: 80vh; }
.waiting { color: var(--muted); font-size: 1.1rem; }

/* ---------- top bar ---------- */

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 14px; }
.room-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.room-label { color: var(--muted); font-size: .9rem; }
.room-code { font-size: 1.5rem; font-weight: 900; font-stretch: 125%; letter-spacing: .08em; }

.score { display: flex; gap: 8px; }
.score-team {
  display: flex; align-items: baseline; gap: 6px;
  padding: .3em .75em; border-radius: var(--radius-ui);
  border: 1px solid var(--table-line); color: var(--muted); font-size: .9rem;
}
.score-team b { font-size: 1.35rem; font-weight: 900; color: var(--text); }
.score-team small { font-size: .72rem; opacity: .8; }
.score-team.red b { color: var(--red-soft); }
.score-team.blue b { color: var(--blue-soft); }
.score-team.active.red { border-color: var(--red); background: color-mix(in srgb, var(--red) 18%, transparent); }
.score-team.active.blue { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 18%, transparent); }

/* ---------- player chips ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--table-up); border: 1px solid var(--table-line);
  border-radius: 99px; padding: .22em .7em; font-size: .9rem; font-weight: 600;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6fcf7f; }
.chip.offline { opacity: .55; }
.chip.offline::before { background: var(--muted); }
.chip .you, .chip .host-badge { font-size: .7rem; font-weight: 600; color: var(--muted); }
.chip .x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 0 0 2px; font-size: 1rem; line-height: 1; }

/* ---------- lobby ---------- */

.lobby { display: grid; gap: 18px; }
.teams-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.team-panel {
  background: var(--table-up); border-radius: var(--radius-ui);
  padding: 16px; display: grid; gap: 14px; align-content: start;
  border-top: 6px solid var(--turn);
}
.team-panel.red { --turn: var(--red); }
.team-panel.blue { --turn: var(--blue); }
.team-panel.red h2 { color: var(--red-soft); }
.team-panel.blue h2 { color: var(--blue-soft); }
.team-panel h2 { font-size: 1.35rem; font-stretch: 115%; font-weight: 850; }
.seat { display: grid; gap: 7px; }
.seat-body { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.watching { display: grid; gap: 8px; }

.settings { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--table-line); border-radius: var(--radius-ui); }
.setting { display: grid; grid-template-columns: 110px auto 1fr; align-items: center; gap: 8px 14px; }
.setting-name { font-weight: 600; }
.setting-note { color: var(--muted); font-size: .85rem; grid-column: 2 / -1; }
.seg { display: inline-flex; border: 1px solid var(--table-line); border-radius: var(--radius-ui); overflow: hidden; }
.seg button { border: 0; background: transparent; padding: .5em 1.1em; font-weight: 600; cursor: pointer; }
.seg button.on { background: var(--paper); color: var(--ink); }
.seg button:disabled:not(.on) { opacity: .4; cursor: not-allowed; }
input[type="range"] { width: min(320px, 100%); accent-color: var(--paper); }
#timerOut { font-weight: 800; font-stretch: 115%; min-width: 4ch; }

.name-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.start { display: grid; gap: 10px; justify-items: start; }
.problems { margin: 0; padding-left: 1.1em; color: #f4d35e; font-size: .92rem; }

/* ---------- banner ---------- */

.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  background: color-mix(in srgb, var(--turn) 22%, var(--table));
  border-left: 6px solid var(--turn);
  border-radius: var(--radius-ui);
  padding: 14px 18px; margin-bottom: 14px; min-height: 88px;
  position: relative; overflow: hidden;
}
.banner.red { --turn: var(--red); }
.banner.blue { --turn: var(--blue); }
.banner-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner .big { font-size: clamp(1.25rem, 3.4vw, 1.75rem); font-weight: 800; font-stretch: 110%; }
.banner .sub { color: color-mix(in srgb, var(--text) 75%, transparent); font-size: .95rem; max-width: 70ch; }
.clue-word {
  font-size: clamp(2rem, 7vw, 3.6rem) !important;
  font-weight: 900 !important; font-stretch: 125% !important;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  overflow-wrap: anywhere;
}
.clue-num {
  display: inline-grid; place-items: center;
  min-width: 1.35em; height: 1.2em; padding: 0 .15em; margin-left: .2em;
  background: var(--paper); color: var(--ink); border-radius: var(--radius-ui);
  font-size: .72em; vertical-align: .1em; font-stretch: 100%;
}
.muted-big { color: var(--muted); }
.banner-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.banner.over { min-height: 100px; }
.banner.over .big { font-size: clamp(2rem, 6vw, 3rem); font-weight: 900; font-stretch: 125%; }

.clue-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; flex: 1; }
.clue-form .field:first-child { flex: 1 1 200px; }
.clue-form input { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.clue-form .num select { font-size: 1.15rem; font-weight: 700; }
.clue-form .btn { padding: .8em 1.2em; }

/* The fuse burns from right to left along the bottom of the banner. */
.timer { display: flex; align-items: center; gap: 10px; }
.timer .secs { font-size: 2rem; font-weight: 900; font-stretch: 115%; min-width: 2.6ch; text-align: right; font-variant-numeric: tabular-nums; }
.fuse { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(0,0,0,.25); }
.fuse i { display: block; height: 100%; background: var(--paper); transform-origin: left center; transition: transform .2s linear; }
.timer.low .secs { color: #f4d35e; }
.timer.low ~ .fuse i, .timer.low .fuse i { background: #f4d35e; }

/* ---------- layout ---------- */

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }

/* ---------- board and cards ---------- */

.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1vw, 10px); }

.card {
  appearance: none; border: 0; padding: 0; margin: 0;
  position: relative; overflow: hidden;
  aspect-ratio: 1.55;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--paper-edge), 0 2px 0 rgba(0,0,0,.25);
  display: grid; place-items: center;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  container-type: inline-size;
}
.board.cats .card { aspect-ratio: 4 / 3; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
/* Words shrink to fit their card: --len is the word's letter count. */
.card .word {
  font-weight: 800; font-stretch: 72%;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: min(1.2rem, 14.5cqi, calc(118cqi / var(--len, 6)));
  padding: 0 2px; text-align: center; line-height: 1.05;
  white-space: nowrap;
}
/* Archivo's condensed width fits about 35% more letters than fallback fonts. */
.fonts-ok .card .word { font-size: min(1.2rem, 14.5cqi, calc(160cqi / var(--len, 6))); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.card.live { cursor: pointer; }
.card.live:hover { transform: translateY(-2px); }
.card.pending {
  outline: 4px solid var(--turn); outline-offset: 2px;
  transform: translateY(-3px);
}

/* Spymaster key: a colored band along the bottom plus a light tint. */
.card[class*="key-"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%;
  background: var(--key);
}
.card[class*="key-"] { background: color-mix(in srgb, var(--key) 22%, var(--paper)); }
.board.cats .card[class*="key-"] img { opacity: .88; }
.board.cats .card[class*="key-"]::after { height: 18%; }
.key-red { --key: var(--red); }
.key-blue { --key: var(--blue); }
.key-neutral { --key: var(--tan); }
.key-assassin { --key: var(--assassin); }
.card.key-assassin .word { color: var(--ink); }
.card.key-assassin::before {
  content: "✕"; position: absolute; top: 5px; right: 5px; z-index: 1;
  width: 1.35em; height: 1.35em; display: grid; place-items: center;
  border-radius: 50%; background: var(--assassin); color: var(--paper);
  font-size: .7rem; font-weight: 900; line-height: 1;
}

/* Revealed: an agent tile covers the card. */
.card .tile { position: absolute; inset: 0; display: none; place-items: end center; padding-bottom: 6%; border-radius: inherit; }
.card.revealed .tile { display: grid; }
.card .tile span {
  font-weight: 700; font-stretch: 72%; text-transform: uppercase;
  font-size: clamp(.5rem, 1.3vw, .78rem); letter-spacing: .04em; opacity: .7;
}
.t-red .tile { background: var(--red); color: #fff; }
.t-blue .tile { background: var(--blue); color: #fff; }
.t-neutral .tile { background: var(--tan); color: var(--ink); }
.t-assassin .tile {
  background: repeating-linear-gradient(-45deg, var(--assassin) 0 10px, #3a3531 10px 20px);
  color: #fff;
}
/* Revealed cat: solid tile with the photo kept as a small round stamp. */
.board.cats .card .tile { place-items: center; padding: 0; }
.tile-thumb {
  position: static !important; width: 46% !important; height: auto !important; aspect-ratio: 1;
  border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px rgba(255,255,255,.85);
}
.card.fresh .tile { animation: drop .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes drop {
  from { transform: translateY(-14%) scale(1.08); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* After the game, unrevealed cards keep their key colors; revealed ones dim. */
.over .card.revealed { filter: saturate(.75) brightness(.92); }

.marks { position: absolute; top: 4px; left: 4px; display: flex; flex-wrap: wrap; gap: 3px; z-index: 2; }
.marks i {
  font-style: normal; font-size: .62rem; font-weight: 800;
  background: var(--turn); color: #fff;
  border-radius: 99px; padding: .15em .45em; line-height: 1.3;
  box-shadow: 0 0 0 2px var(--paper);
}

/* ---------- sidebar ---------- */

.side { display: grid; gap: 16px; }
.you-are { font-size: .95rem; }
.you-are span { color: var(--muted); }
.roster { display: grid; gap: 12px; }
.roster-team { display: grid; gap: 6px; padding-left: 10px; border-left: 4px solid var(--c); }
.roster-team.red { --c: var(--red); }
.roster-team.blue { --c: var(--blue); }
.roster-team h3 { color: var(--text); font-size: .95rem; }
.roster-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.roster-line .role { color: var(--muted); font-size: .8rem; width: 100%; }
.watching-line .role { width: auto; margin-right: 4px; }
.host-controls { display: flex; flex-wrap: wrap; gap: 8px; }

.log-wrap { display: grid; gap: 8px; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 46vh; overflow: auto; font-size: .9rem; }
.log li { padding: .35em .55em; border-left: 3px solid transparent; }
.log li.red { border-color: var(--red); }
.log li.blue { border-color: var(--blue); }
.log li.win { font-weight: 800; }
.log-clue { font-weight: 800; font-stretch: 115%; text-transform: uppercase; }
.log-word { font-weight: 700; font-stretch: 80%; text-transform: uppercase; }
.log-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; vertical-align: middle; }
.res { font-size: .8rem; padding: .05em .45em; border-radius: 3px; white-space: nowrap; }
.res.t-red { background: var(--red); color: #fff; }
.res.t-blue { background: var(--blue); color: #fff; }
.res.t-neutral { background: var(--tan); color: var(--ink); }
.res.t-assassin { background: #111; color: #fff; }

/* ---------- small screens ---------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr 1fr; align-items: start; }
  .side .log-wrap { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  #app { padding-top: 10px; }
  .teams-pick { grid-template-columns: 1fr; }
  .setting { grid-template-columns: 1fr; }
  .setting-note { grid-column: auto; }
  .side { grid-template-columns: 1fr; }
  .banner { padding: 12px 14px 16px; min-height: 0; }
  .room-code { font-size: 1.25rem; }
  .score-team small { display: none; }
  .card { --radius-card: 5px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--paper-edge); }
  .card .word { font-stretch: 64%; }
  .marks i { font-size: .52rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .card.live:hover, .card.pending { transform: none; }
}