/* Guess Who — warm paper, forest ink, physical portraits. One source of truth. */
:root {
  --bg: #f3f0e7;
  --bg-elevated: #faf8f2;
  --surface: #ffffff;
  --surface-hover: #e7e8dd;
  --primary: #163d35;
  --primary-hover: #245649;
  --secondary: #dce5d7;
  --accent: #d8633b;
  --text: #203b33;
  --text-muted: #687168;
  --border: #d5d8cc;
  --success: #357350;
  --warning: #b87822;
  --danger: #ae3f32;
  --shadow-sm: 0 3px 8px #203b330d;
  --shadow-md: 0 16px 36px #203b3321;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --motion: 180ms ease;
  --portrait-ratio: 5 / 6;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    500 16px/1.5 Tajawal,
    "Segoe UI",
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
button,
input,
select {
  transition:
    background var(--motion),
    transform var(--motion),
    box-shadow var(--motion);
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
button:hover:not(:disabled) {
  filter: brightness(0.97);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
h2 {
  font-size: 1.3rem;
  line-height: 1.4;
}
h3 {
  font-size: 1.2rem;
}
em {
  font-style: normal;
  color: var(--accent);
}
small {
  font-size: 0.78rem;
}
img {
  max-width: 100%;
}
.hidden,
[hidden] {
  display: none !important;
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}
[data-icon] {
  display: inline-flex;
  align-items: center;
}
.eyebrow {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.025em;
  font-weight: 700;
  color: var(--text-muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-weight: 800;
  white-space: normal;
}
.btn:active:not(:disabled),
.pressed {
  transform: translateY(2px);
}
.primary-btn {
  background: var(--primary);
  color: var(--surface);
}
.primary-btn:hover:not(:disabled) {
  background: var(--primary-hover);
}
.secondary-btn {
  background: var(--secondary);
  color: var(--text);
  border-color: var(--border);
}
.text-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 8px 10px;
  font-weight: 700;
}
.guess-btn {
  background: var(--accent);
  color: var(--surface);
}
.danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
.icon-btn {
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  flex: none;
}
.input,
.composer input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  background: var(--bg-elevated);
  color: var(--text);
}
.input:focus,
.composer input:focus {
  border-color: var(--primary);
}
.masthead {
  height: 88px;
  max-width: 1440px;
  margin: auto;
  padding: 0 var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  color: var(--text);
  padding: 0;
  text-align: start;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  background: var(--primary);
  border-radius: 12px 12px 12px 3px;
  color: var(--bg);
  font-size: 2rem;
  font-weight: 900;
  transform: rotate(6deg);
}
.brand-word {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
}
.brand-word small {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  margin-top: 6px;
}
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.7rem;
}
#connection-state {
  display: flex;
  align-items: center;
  gap: 6px;
}
#connection-state:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}
#connection-state.offline {
  color: var(--danger);
}
#connection-state.offline:before {
  background: var(--danger);
}
.screen {
  display: none;
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-7) var(--space-7);
  min-width: 0;
}
.screen.active {
  display: block;
}
.menu-screen {
  position: relative;
  min-height: calc(100dvh - 88px);
  padding-top: var(--space-6);
}
.menu-intro {
  text-align: center;
  position: relative;
  z-index: 2;
}
.menu-intro h1 {
  margin: 12px 0;
  font-size: clamp(2rem, 3.4vw, 3rem);
}
.menu-intro p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.portrait-stage {
  height: 285px;
  position: relative;
  max-width: 780px;
  margin: var(--space-3) auto var(--space-5);
  direction: ltr;
}
.stage-orbit {
  position: absolute;
  inset: 12% 5% -1%;
  border: 1px solid var(--border);
  border-radius: 50%;
  transform: rotate(-9deg);
}
.stage-orbit:after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.hero-portrait {
  position: absolute;
  margin: 0;
  width: 155px;
  bottom: 0;
  padding: 5px;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  overflow: hidden;
}
.hero-portrait img {
  display: block;
  width: 100%;
  height: 198px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 6px;
}
.hero-portrait figcaption {
  font-size: 0.8rem;
  text-align: center;
  font-weight: 800;
  padding: 4px 0 0;
}
.portrait-0 {
  left: 4%;
  transform: rotate(-13deg);
  bottom: 6px;
}
.portrait-1 {
  left: 22%;
  transform: rotate(-6deg);
  bottom: 22px;
}
.portrait-2 {
  left: 40%;
  z-index: 2;
  bottom: 30px;
  transform: rotate(2deg);
}
.portrait-3 {
  left: 59%;
  transform: rotate(8deg);
  bottom: 20px;
}
.portrait-4 {
  left: 77%;
  transform: rotate(15deg);
  bottom: 0;
}
.secret-stamp {
  position: absolute;
  z-index: 3;
  left: 3%;
  top: 16px;
  padding: 10px 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.8rem;
  transform: rotate(-10deg);
  text-align: center;
}
.play-menu {
  max-width: 930px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: var(--space-5);
}
.multiplayer-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--primary);
  color: var(--bg);
  border-radius: var(--radius-md);
  position: relative;
}
.multiplayer-menu .eyebrow,
.multiplayer-menu p {
  color: #c3d1c5;
}
.multiplayer-menu h2 {
  font-size: 1.45rem;
  margin: 2px 0;
}
.multiplayer-menu p {
  font-size: 0.72rem;
}
.mode-number {
  position: absolute;
  left: 18px;
  top: 12px;
  font-size: 0.7rem;
  color: #9bad9c;
}
.mode-actions {
  margin-inline-start: auto;
  min-width: 145px;
  display: grid;
  gap: 6px;
}
.mode-actions .primary-btn {
  background: var(--bg);
  color: var(--primary);
}
.mode-actions .text-btn {
  color: var(--bg);
  font-size: 0.78rem;
}
.solo-menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  text-align: start;
}
.solo-menu strong {
  display: block;
  font-size: 1.1rem;
}
.solo-menu small {
  display: block;
  color: var(--text-muted);
  margin-top: 6px;
}
.solo-menu > .icon,
.solo-menu > [data-icon] {
  margin-inline-start: auto;
}
.bot-emblem {
  width: 46px;
  height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--secondary);
  color: var(--primary);
}
.bot-emblem .icon {
  width: 26px;
  height: 26px;
}
.menu-footer {
  display: flex;
  justify-content: space-between;
  max-width: 930px;
  margin: var(--space-5) auto 0;
  color: var(--text-muted);
  font-size: 0.7rem;
}
.setup-screen.active {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: var(--space-8);
  max-width: 1080px;
  min-height: calc(100dvh - 88px);
}
.setup-story h2 {
  font-size: 2.4rem;
  line-height: 1.35;
  margin: var(--space-4) 0;
}
.setup-story p {
  color: var(--text-muted);
}
.setup-cards {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
  direction: ltr;
}
.setup-cards img,
.mystery-card {
  width: 120px;
  height: 164px;
  object-fit: cover;
  border: 5px solid var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transform: rotate(-7deg);
}
.setup-cards img:last-child,
.mystery-card {
  transform: rotate(7deg);
}
.setup-cards > span {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 900;
}
.mystery-card {
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--bg);
  font-size: 4rem;
}
.setup-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-block: 1px solid var(--border);
}
.setup-form > .text-btn {
  align-self: flex-start;
}
.setup-form h2 {
  font-size: 1.6rem;
  margin-bottom: var(--space-2);
}
.setup-form label {
  font-size: 0.85rem;
  font-weight: 700;
}
.setup-form small {
  color: var(--text-muted);
}
#join-code-field {
  display: grid;
  gap: var(--space-3);
}
.room-code-input {
  direction: ltr;
  letter-spacing: 0.2em;
  font-weight: 800;
}
.lobby-screen {
  text-align: center;
  max-width: 1000px;
  padding-top: var(--space-7);
}
.lobby-heading h1 {
  font-size: 2rem;
  margin: var(--space-3) 0;
}
.lobby-heading p {
  color: var(--text-muted);
}
.player-readiness {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}
.lobby-seats {
  margin: var(--space-7) 0;
  align-items: center;
  gap: var(--space-7);
}
.player-seat {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: 3px solid var(--border);
}
.seat-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  font-size: 2rem;
  font-weight: 800;
  position: relative;
}
.player-seat.ready {
  border-color: var(--success);
  background: var(--secondary);
  border-radius: var(--radius-md);
}
.player-seat.ready .seat-avatar {
  background: var(--primary);
  color: var(--surface);
}
.player-seat strong {
  font-size: 1.3rem;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.player-seat small {
  color: var(--text-muted);
}
.empty-seat .seat-avatar {
  border: 1px dashed var(--text-muted);
  background: transparent;
}
.empty-seat .icon {
  width: 28px;
  height: 28px;
}
.seat-vs {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--accent);
}
.lobby-floor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-5) 0;
  border-block: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.invite-ticket {
  border-inline-end: 1px dashed var(--border);
  padding-inline-end: var(--space-5);
}
.room-code-box {
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  direction: ltr;
  padding: var(--space-2);
}
.small-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.small-actions .btn {
  font-size: 0.75rem;
  padding: 8px;
}
.lobby-start {
  display: grid;
  gap: var(--space-3);
}
.lobby-start small,
.lobby-start p {
  color: var(--text-muted);
}
.match-screen {
  padding-top: var(--space-2);
  padding-bottom: var(--space-4);
}
.match-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  padding: 0 0 var(--space-4);
}
.player-tag {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 150px;
}
.player-tag strong {
  display: block;
  max-width: 200px;
  overflow-wrap: anywhere;
}
.player-tag small {
  color: var(--text-muted);
  display: block;
  font-size: 0.68rem;
}
.player-token {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--secondary);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
}
.opponent-tag {
  text-align: end;
}
.match-label {
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  display: grid;
  gap: 3px;
  color: var(--text-muted);
}
.match-label strong {
  letter-spacing: 0.1em;
  direction: ltr;
}
.match-score > .btn {
  position: absolute;
  inset-inline-end: var(--space-7);
}
.turn-ribbon {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 12px 24px;
  background: var(--secondary);
  border-radius: var(--radius-sm);
  border-inline-start: 5px solid var(--border);
  transition: background var(--motion);
  min-height: 72px;
}
.turn-ribbon.my-turn {
  background: var(--primary);
  color: var(--surface);
  border-inline-start-color: var(--accent);
}
.turn-ribbon.my-turn .eyebrow {
  color: #b7d0c1;
}
.turn-signal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 180px;
}
.turn-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}
.my-turn .turn-dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px #ffffff15;
}
.voice-hint {
  font-size: 0.78rem;
  opacity: 0.8;
  margin: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
#turn-clock {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 95px;
  text-align: end;
}
#turn-clock.urgent {
  color: var(--accent);
  animation: urgency 800ms ease infinite;
}
.board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.board-toolbar h2 {
  font-size: 1.1rem;
}
.board-utilities {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.board-utilities .btn {
  font-size: 0.75rem;
}
.remaining-chip {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-inline-end: var(--space-3);
}
.remaining-chip b {
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}
.characters-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-3);
}
.char-card,
.guess-card {
  border: 0;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.char-card {
  aspect-ratio: var(--portrait-ratio);
  transition:
    transform var(--motion),
    opacity var(--motion),
    box-shadow var(--motion);
}
.char-avatar {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-hover);
}
.char-avatar img,
.avatar-media img,
.revealed-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.char-name {
  display: block;
  position: absolute;
  bottom: 6px;
  inset-inline: 6px;
  width: fit-content;
  min-width: 40px;
  background: var(--bg-elevated);
  border-radius: 4px;
  padding: 2px 9px;
  font-weight: 800;
  font-size: 0.8rem;
  box-shadow: var(--shadow-sm);
}
.char-card:hover:not(.eliminated) {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: var(--shadow-md);
}
.char-card.eliminated {
  transform: rotate(-2deg) scale(0.95);
  opacity: 0.45;
}
.char-card.eliminated img {
  filter: grayscale(1);
}
.card-dismiss {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: #163d3555;
}
.card-dismiss .icon {
  width: 38px;
  height: 38px;
  padding: 8px;
  background: var(--primary);
  color: var(--surface);
  border-radius: 50%;
}
.eliminated .card-dismiss {
  display: grid;
}
.match-dock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0 0;
}
.secret-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-inline-end: var(--space-5);
  border-inline-end: 1px solid var(--border);
}
.secret-avatar {
  width: 56px;
  height: 70px;
  border: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transform: rotate(4deg);
  flex: none;
}
.avatar-media {
  display: block;
  width: 100%;
  height: 100%;
}
.secret-card strong,
.secret-card small {
  display: block;
}
.secret-card small {
  font-size: 0.65rem;
  color: var(--text-muted);
}
.secret-card .icon {
  width: 12px;
  height: 12px;
}
.dock-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.dock-actions .btn {
  min-width: 180px;
}
.space-hint {
  text-align: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}
kbd {
  font-family: inherit;
  font-size: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}
.solo-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border);
}
.solo-heading h1 {
  font-size: 1.5rem;
}
.solo-secret {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--text-muted);
}
.bot-companion {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.companion-prompt strong {
  font-size: 0.95rem;
}
.companion-prompt small {
  display: block;
  color: var(--text-muted);
  margin: 6px 0;
}
.quick-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quick-question {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 5px 10px;
  font-size: 0.7rem;
}
.quick-question:hover {
  background: var(--secondary);
}
.companion-conversation {
  min-width: 0;
}
.chat-log {
  height: 80px;
  overflow: auto;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.chat-msg {
  padding: 4px 0;
  overflow-wrap: anywhere;
}
.chat-msg.system {
  color: var(--text-muted);
}
.question-group {
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--border);
}
.question-group small {
  display: none;
}
.question-group strong {
  grid-column: 2;
  grid-row: 1;
}
.positive {
  color: var(--success);
}
.negative {
  color: var(--danger);
}
.composer {
  display: flex;
  gap: var(--space-2);
}
.composer input {
  padding: 10px;
}
.composer .btn {
  padding: 10px 14px;
}
.companion-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #102b26b3;
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  padding: var(--space-5);
}
.modal-card {
  width: min(900px, 100%);
  max-height: 88dvh;
  overflow: auto;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  animation: arrive 180ms ease;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.guess-filter {
  justify-content: flex-start;
  margin-bottom: var(--space-4);
}
.guess-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
.guess-card {
  aspect-ratio: var(--portrait-ratio);
}
.guess-card:hover {
  outline: 3px solid var(--accent);
  outline-offset: 0;
}
.confirm-card,
.result-card {
  width: min(520px, 100%);
  text-align: center;
}
.confirm-avatar,
.solo-reveal {
  width: 100px;
  height: 130px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-md);
}
.confirm-card p,
.result-card > p {
  color: var(--text-muted);
  margin: var(--space-3) 0;
}
.result-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary);
  animation: arrive 220ms ease;
}
.result-icon .icon {
  width: 32px;
  height: 32px;
}
.revealed-chars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  grid-column: 1;
  grid-row: 1/5;
  background: var(--secondary);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}
.revealed-chars .revealed-portrait {
  width: 130px;
  height: 180px;
}
.revealed-chars p,
.revealed-chars small {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.result-card:has(.revealed-chars) {
  width: min(640px, 100%);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-3) var(--space-5);
  align-items: center;
}
.result-card:has(.revealed-chars) > .result-icon {
  grid-column: 2;
  margin-bottom: 0;
}
.result-card:has(.revealed-chars) > .eyebrow,
.result-card:has(.revealed-chars) > h2,
.result-card:has(.revealed-chars) > p {
  grid-column: 2;
}
.result-card:has(.revealed-chars) > .result-stats,
.result-card:has(.revealed-chars) > .player-readiness,
.result-card:has(.revealed-chars) > .result-actions {
  grid-column: 1/-1;
}
.guess-search {
  margin-bottom: var(--space-4);
}
.revealed-portrait {
  display: block;
  width: 95px;
  height: 120px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin: auto auto var(--space-2);
}
.result-stats {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: var(--space-3);
  border-block: 1px solid var(--border);
  margin: var(--space-4) 0;
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
.result-card .player-readiness {
  margin: var(--space-3) 0;
  font-size: 0.7rem;
}
.result-card .player-seat {
  padding: var(--space-2);
  gap: 4px;
  border: 0;
}
.result-card .seat-avatar {
  display: none;
}
.result-card .player-seat strong {
  font-size: 0.85rem;
}
.countdown {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--bg);
}
.countdown .eyebrow {
  color: var(--secondary);
}
.countdown strong {
  font-size: 7rem;
  line-height: 1.3;
  animation: countbeat 1s ease infinite;
}
.toast {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  width: max-content;
  background: var(--primary);
  color: var(--surface);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  font-size: 0.85rem;
}
.avatar-fallback {
  display: grid;
  place-items: center;
  min-height: 100%;
  background: var(--secondary);
  font-size: 2rem;
}
body:has(.modal:not(.hidden)) {
  overflow: hidden;
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes countbeat {
  from {
    transform: scale(0.85);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes urgency {
  50% {
    opacity: 0.6;
  }
}
@media (min-width: 1001px) {
  .match-screen .char-card {
    aspect-ratio: auto;
    height: clamp(100px, calc((100dvh - 425px) / 3), 250px);
  }
  .solo-screen .char-card {
    height: clamp(100px, calc((100dvh - 500px) / 3), 240px);
  }
}
@media (min-width: 601px) and (max-height: 850px) {
  .menu-screen {
    padding-top: 8px;
    padding-bottom: 16px;
  }
  .menu-intro h1 {
    font-size: 2.2rem;
    margin: 8px 0;
  }
  .portrait-stage {
    height: 225px;
    margin-block: 8px 16px;
  }
  .hero-portrait {
    width: 140px;
  }
  .hero-portrait img {
    height: 167px;
  }
  .menu-footer {
    margin-top: 16px;
  }
  .lobby-screen {
    padding-top: 16px;
  }
  .lobby-seats {
    margin: 24px 0;
  }
  .player-seat {
    padding: 20px;
  }
  .lobby-floor {
    padding: 16px 0;
  }
}
@media (min-width: 1001px) and (max-height: 850px) {
  .characters-board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .match-screen .char-card {
    height: clamp(115px, calc((100dvh - 405px) / 2), 190px);
  }
  .solo-screen .char-card {
    height: clamp(110px, calc((100dvh - 445px) / 2), 170px);
  }
}
@media (min-width: 1500px) {
  .match-screen {
    max-width: 1640px;
  }
  .characters-board {
    gap: var(--space-4);
  }
  .match-screen .char-card {
    max-height: 260px;
  }
  .masthead {
    max-width: 1640px;
  }
}
@media (max-width: 1000px) {
  .masthead {
    padding-inline: var(--space-5);
  }
  .screen {
    padding-inline: var(--space-5);
  }
  .play-menu {
    gap: var(--space-4);
    grid-template-columns: 1.5fr 1fr;
  }
  .multiplayer-menu {
    flex-wrap: wrap;
  }
  .mode-actions {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .solo-menu {
    padding: var(--space-4);
  }
  .characters-board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .match-score {
    gap: var(--space-5);
  }
  .match-score > .btn {
    position: static;
  }
  .bot-companion {
    grid-template-columns: 1fr 1.2fr;
  }
  .companion-actions {
    grid-column: 1/-1;
    flex-direction: row;
  }
  .setup-screen.active {
    gap: var(--space-7);
  }
  .solo-secret {
    max-width: 180px;
  }
}
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .masthead {
    height: 72px;
    padding-inline: var(--space-4);
  }
  .brand-mark {
    width: 34px;
    height: 38px;
    font-size: 1.6rem;
  }
  .brand-word {
    font-size: 1.1rem;
  }
  .header-tools {
    gap: 4px;
  }
  .header-tools .btn {
    font-size: 0;
    padding: 8px;
  }
  .header-tools .icon {
    width: 18px;
    height: 18px;
  }
  #connection-state {
    font-size: 0.6rem;
  }
  .screen {
    padding: var(--space-4);
    padding-bottom: var(--space-5);
  }
  .menu-intro h1 {
    font-size: 2rem;
  }
  .menu-intro p {
    font-size: 0.85rem;
  }
  .portrait-stage {
    height: 225px;
    max-width: 380px;
    margin-top: var(--space-5);
    overflow: hidden;
  }
  .hero-portrait {
    width: 106px;
    padding: 4px;
  }
  .hero-portrait img {
    height: 144px;
  }
  .portrait-0 {
    left: 0;
    bottom: 5px;
  }
  .portrait-1 {
    left: 17%;
    bottom: 24px;
  }
  .portrait-2 {
    left: 35%;
    bottom: 35px;
  }
  .portrait-3 {
    left: 55%;
    bottom: 25px;
  }
  .portrait-4 {
    left: 73%;
    bottom: 6px;
  }
  .secret-stamp {
    font-size: 0.65rem;
    padding: 8px 12px;
    left: 1%;
    top: 5px;
  }
  .play-menu {
    grid-template-columns: 1fr;
  }
  .multiplayer-menu {
    gap: var(--space-3);
    padding: var(--space-4);
  }
  .mode-actions {
    justify-content: space-between;
  }
  .mode-actions .btn {
    font-size: 0.85rem;
  }
  .solo-menu {
    padding: 14px 16px;
  }
  .solo-menu strong {
    font-size: 1rem;
  }
  .solo-menu small {
    margin-top: 2px;
  }
  .menu-footer {
    font-size: 0.6rem;
  }
  .setup-screen.active {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    min-height: 0;
  }
  .setup-story h2 {
    font-size: 1.8rem;
    margin: var(--space-2) 0;
  }
  .setup-story p {
    font-size: 0.85rem;
  }
  .setup-cards {
    display: none;
  }
  .setup-form {
    padding: var(--space-4) 0;
  }
  .lobby-heading h1 {
    font-size: 1.7rem;
  }
  .lobby-seats {
    gap: var(--space-2);
    margin: var(--space-5) 0;
  }
  .player-seat {
    padding: var(--space-4) var(--space-2);
  }
  .seat-avatar {
    width: 58px;
    height: 58px;
    font-size: 1.5rem;
  }
  .player-seat strong {
    font-size: 1rem;
  }
  .player-seat small {
    font-size: 0.65rem;
  }
  .lobby-floor {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .invite-ticket {
    border-inline-end: 0;
    border-bottom: 1px dashed var(--border);
    padding: 0 0 var(--space-4);
  }
  .match-score {
    gap: var(--space-3);
    justify-content: space-between;
  }
  .player-tag {
    min-width: 0;
    gap: 6px;
  }
  .player-tag strong {
    font-size: 0.8rem;
    max-width: 85px;
  }
  .player-token {
    display: none;
  }
  .match-label {
    font-size: 0.5rem;
  }
  .match-score > .btn {
    font-size: 0;
    padding: 8px;
  }
  .turn-ribbon {
    gap: var(--space-2);
    padding: var(--space-3);
    min-height: 64px;
  }
  .turn-signal {
    min-width: 0;
    flex: 1;
  }
  .turn-signal strong {
    font-size: 0.95rem;
  }
  .voice-hint {
    display: none;
  }
  #turn-clock {
    font-size: 1.2rem;
    min-width: 70px;
  }
  .board-toolbar {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
  }
  .board-toolbar h2 {
    font-size: 1rem;
  }
  .board-toolbar .eyebrow {
    font-size: 0.65rem;
  }
  .board-utilities {
    width: 100%;
    justify-content: flex-end;
    gap: 4px;
  }
  .board-utilities .btn {
    padding: 4px 8px;
    font-size: 0.7rem;
  }
  .remaining-chip {
    margin-inline-end: auto;
  }
  .characters-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .char-card {
    aspect-ratio: 3/4;
  }
  .char-name {
    font-size: 0.67rem;
    padding: 1px 4px;
    bottom: 4px;
    inset-inline: 4px;
    min-width: 0;
  }
  .match-dock {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    margin-top: var(--space-3);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    z-index: 5;
    align-items: center;
  }
  .secret-card {
    gap: 6px;
    border: 0;
    padding: 0;
  }
  .secret-avatar {
    width: 38px;
    height: 52px;
    border-width: 2px;
  }
  .secret-card small {
    display: none;
  }
  .secret-card .eyebrow {
    font-size: 0.58rem;
  }
  .secret-card strong {
    font-size: 0.8rem;
  }
  .dock-actions {
    gap: 6px;
    flex: 1;
    justify-content: flex-end;
  }
  .dock-actions .btn {
    min-width: 0;
    font-size: 0.7rem;
    padding: 10px 8px;
    gap: 4px;
  }
  .dock-actions .icon {
    width: 16px;
    height: 16px;
  }
  .space-hint {
    display: none;
  }
  .solo-heading {
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .solo-heading h1 {
    font-size: 1.2rem;
  }
  .solo-heading > .btn {
    margin-inline-start: auto;
    font-size: 0;
  }
  .solo-secret {
    order: 4;
    max-width: none;
    width: 100%;
    font-size: 0.65rem;
  }
  .bot-companion {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
  .companion-actions {
    grid-column: auto;
  }
  .chat-log {
    height: 100px;
  }
  .modal {
    padding: var(--space-2);
  }
  .modal-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    max-height: 92dvh;
  }
  .guess-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .guess-card {
    aspect-ratio: 3/4;
  }
  .result-actions .btn {
    font-size: 0.8rem;
  }
}
@media (max-width: 400px) {
  .result-card:has(.revealed-chars) {
    grid-template-columns: 110px 1fr;
    gap: 8px;
  }
  .revealed-chars {
    padding: 8px;
  }
  .revealed-chars .revealed-portrait {
    width: 90px;
    height: 130px;
  }
  .result-card h2 {
    font-size: 1.25rem;
  }
  .result-card > p {
    font-size: 0.8rem;
  }
}
@media (hover: none), (pointer: coarse) {
  .space-hint {
    display: none;
  }
  .char-card:hover:not(.eliminated) {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Multiplayer series + secret character UX */
.series-score{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.05rem;direction:ltr;margin-top:2px}
.series-score b{min-width:24px;font-size:1.15rem}
#round-label{display:block;color:var(--text-muted);font-size:.58rem;text-align:center;margin-top:1px}
.board-area{position:relative}
.my-secret-panel{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:10px 14px;border:1px solid var(--accent);background:color-mix(in srgb,var(--surface) 88%,var(--accent));border-radius:var(--radius-sm)}
.my-secret-content{display:flex;align-items:center;gap:12px}
.my-secret-panel .secret-avatar{width:82px;height:82px;aspect-ratio:1;border-radius:10px;transform:none;border-width:2px}
.my-secret-panel strong{display:block;font-size:1rem}
.my-secret-panel small{display:block;color:var(--text-muted);font-size:.68rem;margin-top:3px}
.secret-choice-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface-raised);margin-bottom:16px}
.secret-choice-panel strong{display:block;margin-top:4px}
.secret-picker-modal{width:min(960px,94vw);max-height:88vh;overflow:auto}
.secret-picker-modal .guess-grid{grid-template-columns:repeat(8,minmax(76px,1fr))}
@media(max-width:900px){
 .my-secret-panel{padding:8px 10px}
 .my-secret-panel .secret-avatar{width:68px;height:68px}
 .secret-choice-panel{align-items:stretch;flex-direction:column}
 .secret-picker-modal .guess-grid{grid-template-columns:repeat(4,minmax(64px,1fr))}
}


/* === Game UI polish v3: larger cards, clean header, stronger result === */
.match-screen{max-width:1720px}
.match-score{
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr) auto;
  align-items:center;
  gap:18px;
  padding:10px 14px;
  margin-bottom:8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
}
.match-score>.btn{position:static!important;inset:auto!important;justify-self:end}
.player-tag{
  min-width:0;
  padding:8px 10px;
  border-radius:10px;
  background:var(--bg-elevated);
}
.opponent-tag{justify-content:flex-end}
.match-turn{
  min-width:190px;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:center;
  column-gap:10px;
  row-gap:1px;
  padding:7px 16px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--bg);
}
.match-turn #turn-clock{grid-row:1/4;min-width:54px;text-align:center;font-size:1.25rem}
.match-turn #turn-indicator{font-size:.85rem}
.match-turn .series-score{margin:0;font-size:.9rem}
.match-turn #round-label{font-size:.58rem}

/* Secret character is a real card now, not a full-width bar */
.my-secret-panel{
  width:min(330px,100%);
  min-height:142px;
  margin:0 0 14px auto;
  padding:10px 12px;
  display:grid;
  grid-template-columns:128px 1fr;
  grid-template-areas:"avatar label" "avatar info";
  align-items:center;
  gap:5px 14px;
  border:2px solid var(--accent);
  border-radius:14px;
  background:var(--surface-raised);
  box-shadow:var(--shadow-sm);
}
.my-secret-panel>.eyebrow{grid-area:label;align-self:end;font-size:.68rem}
.my-secret-content{display:contents}
.my-secret-panel .secret-avatar{
  grid-area:avatar;
  width:128px;height:128px;aspect-ratio:1;
  border-radius:11px;border:2px solid var(--accent);
  overflow:hidden;background:var(--surface);
}
.my-secret-panel .secret-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.my-secret-panel .my-secret-content>div:last-child{grid-area:info;align-self:start}
.my-secret-panel strong{font-size:1.18rem;line-height:1.2}
.my-secret-panel small{font-size:.68rem;line-height:1.45;margin-top:5px}

/* 48 portraits: square and substantially larger on desktop */
.characters-board{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:10px!important;
}
.match-screen .char-card,
.solo-screen .char-card,
.char-card{
  aspect-ratio:1/1!important;
  height:auto!important;
  max-height:none!important;
}
.char-avatar{aspect-ratio:1/1}
.char-name{font-size:.82rem;padding:3px 9px;bottom:7px;inset-inline:7px}
.char-card{will-change:transform;contain:layout paint style}
.char-card:hover:not(.eliminated){transform:translateY(-2px)}
.char-card.eliminated{transform:scale(.965);opacity:.38}

/* Result screen */
#modal-gameover{background:rgba(5,10,12,.82);backdrop-filter:blur(3px)}
#modal-gameover .result-card{
  width:min(760px,94vw);
  display:flex!important;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  padding:28px;
  border-width:2px;
  overflow:auto;
}
#modal-gameover .result-card.result-win{border-color:var(--accent)}
#modal-gameover .result-card.result-loss{border-color:color-mix(in srgb,var(--text-muted) 70%,var(--border))}
#modal-gameover .result-icon{
  width:72px;height:72px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--bg-elevated);
  margin:0 auto 2px;
}
#modal-gameover .result-icon .icon{width:38px;height:38px}
#modal-gameover .result-win .result-icon{background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
#modal-gameover .result-title,#result-title{font-size:2.2rem!important;line-height:1.1;margin:2px 0}
#modal-gameover .result-win #result-title{color:var(--accent)}
#modal-gameover .result-loss #result-title{color:var(--text)}
.result-desc{font-size:.95rem!important;color:var(--text-muted);margin:0 0 6px!important}
.result-duel{
  width:100%;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
  padding:0!important;
  background:none!important;
}
.reveal-player{
  position:relative;
  display:grid;
  justify-items:center;
  gap:7px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--bg-elevated);
}
.reveal-player.reveal-winner{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.reveal-owner{font-size:.7rem;color:var(--text-muted);font-weight:700}
.reveal-player .revealed-portrait{
  width:min(180px,100%)!important;
  height:auto!important;
  aspect-ratio:1!important;
  border-radius:12px;
  margin:0!important;
  overflow:hidden;
}
.reveal-player .revealed-portrait img{object-position:center 20%}
.reveal-player>strong{font-size:1.05rem}
.reveal-player>small{
  min-height:24px;
  padding:3px 10px;border-radius:999px;
  background:var(--surface);color:var(--text-muted);font-size:.65rem
}
.reveal-winner>small{background:var(--accent);color:var(--bg);font-weight:900}
#modal-gameover .result-stats{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  border:0;
  margin:4px 0 2px;
  padding:8px 10px;
  background:var(--bg);
  border-radius:10px;
}
.result-series{font-size:1.45rem;direction:ltr}
.result-series span{opacity:.45;margin:0 5px}
#modal-gameover .result-stats i{width:1px;height:20px;background:var(--border)}
#modal-gameover .player-readiness{width:100%;margin:2px 0}
#modal-gameover .result-actions{margin-top:4px}

/* Motion/performance: keep interactions crisp without heavy effects */
.btn,.char-card,.guess-card{transition-duration:120ms!important}
.modal{animation:none}
.modal-card{animation:ui-pop 140ms ease-out}
@keyframes ui-pop{from{opacity:.5;transform:translateY(5px) scale(.99)}to{opacity:1;transform:none}}

@media(max-width:1200px){
  .characters-board{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .match-score{grid-template-columns:1fr auto 1fr}
  .match-score>.btn{grid-column:1/-1;justify-self:center;padding:6px 12px}
}
@media(max-width:700px){
  .match-score{grid-template-columns:1fr 1fr;gap:6px;padding:7px}
  .match-turn{grid-column:1/-1;grid-row:1;min-width:0;width:100%}
  .player-tag{grid-row:2}
  .match-score>.btn{grid-column:1/-1;grid-row:3}
  .characters-board{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
  .my-secret-panel{width:100%;grid-template-columns:92px 1fr;min-height:106px}
  .my-secret-panel .secret-avatar{width:92px;height:92px}
  #modal-gameover .result-card{padding:18px 14px}
  #result-title{font-size:1.7rem!important}
  .reveal-player{padding:9px}
  .reveal-player .revealed-portrait{width:130px!important}
}

/* Card image preview — shared by every category/mode */
.card-preview-button{
  position:absolute;bottom:7px;inset-inline-end:7px;z-index:4;
  width:27px;height:27px;border-radius:7px;display:grid;place-items:center;
  color:var(--text);background:color-mix(in srgb,var(--bg-elevated) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  box-shadow:var(--shadow-sm);cursor:zoom-in;transition:transform 120ms ease,background 120ms ease;
}
.card-preview-button .icon{width:15px;height:15px}
.card-preview-button:hover,.card-preview-button:focus-visible{transform:scale(1.06);background:var(--surface-raised);outline:2px solid var(--accent);outline-offset:1px}
.char-card .char-name,.guess-card .char-name{max-width:calc(100% - 47px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-dismiss{z-index:3}.card-preview-button{z-index:5}
.object-avatar img{object-fit:contain!important;object-position:center!important;background:#fff}
.card-preview-modal{z-index:1000;background:rgba(5,10,12,.82);backdrop-filter:blur(4px)}
.card-preview-card{position:relative;width:min(620px,92vw);padding:18px;text-align:center}
.card-preview-close{position:absolute;top:10px;inset-inline-end:10px;z-index:2}
.card-preview-image{width:min(520px,78vw);aspect-ratio:1/1;margin:0 auto 12px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md)}
.card-preview-avatar{display:block;width:100%;height:100%;background:#fff;overflow:hidden}
.card-preview-avatar img{width:100%;height:100%;display:block;object-fit:contain;object-position:center}
.card-preview-title{display:block;font-size:1.05rem}
@media (max-width:700px){.card-preview-button{width:24px;height:24px;bottom:5px;inset-inline-end:5px}.card-preview-button .icon{width:13px;height:13px}.char-card .char-name,.guess-card .char-name{max-width:calc(100% - 40px)}}