:root {
  color-scheme:dark;
  --bg:#061b35;
  --panel:#0b2a46;
  --line:#234d70;
  --text:#f2f0e8;
  --muted:#adc3db;
  --gold:#d8b66e;
  --teal:#22d4cc;
  --red:#ef9b9a;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 50% 45%,#09354980,transparent 65%),var(--bg);
  color:var(--text);
  min-width:320px
}
button,select {
  font:inherit
}
button {
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:10px;
  background:#0b2a46;
  color:var(--text);
  min-height:44px;
  padding:10px 16px;
  transition:background .15s,box-shadow .15s
}
button:hover:enabled {
  background:#154564
}
button:disabled {
  cursor:default;
  opacity:.45
}
button:focus-visible,select:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px
}
select {
  min-height:44px;
  border:1px solid var(--line);
  background:#0a2541;
  color:var(--text);
  padding:10px;
  border-radius:8px;
  width:100%
}
.app-shell {
  max-width:1120px;
  margin:auto;
  padding:0 32px
}
.topbar {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px
}
.brand h1 {
  font-size:32px;
  font-weight:800;
  letter-spacing:5px;
  margin:0
}
.brand .icon {
  width:34px;
  height:34px;
  color:var(--gold)
}
.spark {
  color:var(--gold);
  font-size:17px
}
.top-actions {
  display:flex;
  gap:14px;
  align-items:center
}
#mode-badge {
  font-size:12px;
  color:var(--muted)
}
#mode-badge:before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--teal);
  border-radius:50%;
  margin-right:7px
}
.icon {
  width:24px;
  height:24px;
  display:block
}
.icon-button {
  border:0;
  min-width:44px;
  min-height:44px;
  display:grid;
  place-items:center;
  padding:10px;
  background:transparent;
  color:#acc8e3
}
.screen-layout {
  display:grid;
  grid-template-columns:minmax(0,550px) minmax(230px,1fr);
  gap:70px
}
.game-screen {
  min-width:0
}
.quest-track {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  gap:4px;
  border:1px solid #1c446a;
  border-radius:50px;
  padding:8px 12px;
  background:#05233e88
}
.quest-track:before {
  content:"";
  position:absolute;
  height:3px;
  left:40px;
  right:40px;
  top:50%;
  background:#36577f
}
.quest-node {
  padding:0;
  border-radius:50%;
  width:48px;
  height:48px;
  min-width:44px;
  position:relative;
  z-index:1;
  border:3px solid #54739c;
  background:#173454;
  color:#c4d5e9;
  font-size:23px;
  font-weight:700;
  display:grid;
  place-items:center
}
.quest-node.current {
  border-color:var(--gold);
  color:#fff;
  background:#725b27;
  box-shadow:0 0 18px #dab75750
}
.quest-node.success {
  background:#087a80;
  border-color:var(--teal);
  color:#fff
}
.quest-node.failed {
  border-color:var(--red);
  background:#744343;
  color:#fff
}
.track-hint {
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 22px;
  letter-spacing:1px
}
.round-heading {
  text-align:center
}
.round-heading h2 {
  font-size:23px;
  letter-spacing:2px;
  margin:0 0 8px;
  font-weight:600
}
.round-heading b {
  color:var(--gold);
  font-size:30px
}
.round-heading p {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.arena {
  position:relative;
  width:100%;
  isolation:isolate;
  margin-top:12px
}
.orbit {
  position:absolute;
  border:2px dashed #2c5c86;
  border-radius:50%;
  opacity:.7;
  z-index:-1
}
.disc {
  position:absolute;
  left:50%;
  transform:translate(-50%,-50%);
  width:clamp(116px,32vw,174px);
  aspect-ratio:1;
  border:2px solid #9e814d;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,#10364c 30%,#092d40 70%);
  box-shadow:inset 0 0 0 9px #c8a65d09;
  z-index:-1
}
.disc:before {
  content:"✦";
  position:absolute;
  color:#52758816;
  font-size:155px;
  z-index:-1
}
.disc .icon {
  width:38px;
  height:38px;
  color:var(--gold);
  margin-bottom:8px
}
.disc h3 {
  font-size:19px;
  letter-spacing:1px;
  margin:0 0 7px
}
.disc p {
  font-size:23px;
  color:var(--gold);
  font-weight:600;
  margin:0
}
.seat {
  position:absolute;
  transform:translate(-50%,-50%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center
}
.avatar-button {
  position:relative;
  border:2px solid #365e80;
  border-radius:50%;
  padding:4px;
  min-height:44px;
  min-width:44px;
  background:#09243d;
  flex-shrink:0;
  display:block
}
.avatar-button>svg {
  width:100%;
  height:100%;
  display:block;
  border-radius:50%
}
.avatar-button:disabled {
  opacity:1
}
.seat.self .avatar-button {
  border-color:var(--gold)
}
.seat.chosen .avatar-button {
  border-color:var(--teal);
  box-shadow:0 0 0 3px #19c8c526,0 0 16px #00d3ca22
}
.seat-number {
  position:absolute;
  bottom:-9px;
  left:50%;
  transform:translateX(-50%);
  font-size:13px;
  background:#09243d;
  border:2px solid #7893b3;
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:#fff
}
.self .seat-number {
  border-color:var(--gold)
}
.leader-icon {
  position:absolute;
  top:-23px;
  left:50%;
  transform:translateX(-50%);
  color:var(--gold)
}
.leader-icon .icon {
  width:24px;
  height:24px
}
.seat-name {
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  margin-top:12px;
  line-height:18px
}
.seat.self .seat-name {
  color:var(--gold)
}
.selection-mark {
  position:absolute;
  right:-6px;
  top:-4px;
  width:23px;
  height:23px;
  border:2px solid var(--teal);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#073a46;
  color:var(--text);
  pointer-events:none;
}
.selection-mark .icon { width:15px; height:15px; }
.seat-label {
  height:44px;
  display:grid;
  place-items:center;
  font-size:11px;
  color:var(--muted);
  margin-top:2px
}
.vote-label {
  color:#8fe0cd
}
.identity-hint {
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin:0 0 14px
}
.notice {
  text-align:center;
  min-height:36px;
  line-height:1.7;
  font-size:14px;
  color:#e5e8e6;
  margin:8px 0
}
.notice b {
  color:var(--gold)
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding:10px 0 4px;
  min-height:66px
}
.actions>button {
  flex:1;
  white-space:nowrap
}
.actions p {
  width:100%;
  text-align:center;
  font-size:13px;
  color:var(--muted);
  margin:0 0 4px;
  line-height:1.8
}
.primary {
  background:linear-gradient(135deg,#d0b477,#a68d58);
  color:#092138;
  border-color:#e1c48c;
  font-weight:700
}
.primary:hover:enabled {
  background:#e1c48c
}
.secondary {
  color:var(--muted)
}
.danger {
  color:#ffb9ad;
  border-color:#895c64
}
.desktop-panel {
  padding:64px 0 0;
  align-self:start;
  position:sticky;
  top:20px
}
.eyebrow {
  color:var(--gold);
  font-size:12px;
  letter-spacing:3px
}
.desktop-panel h2 {
  font-family:"Songti SC",serif;
  font-size:33px;
  line-height:1.6;
  letter-spacing:3px;
  font-weight:500
}
.desktop-panel p {
  font-size:14px;
  line-height:2;
  color:var(--muted)
}
.side-score {
  display:flex;
  gap:28px;
  border-block:1px solid var(--line);
  padding:22px 0;
  font-size:13px
}
.side-score b {
  display:block;
  font-size:32px;
  color:var(--gold);
  margin-top:5px
}
#latest-public {
  font-size:14px;
  line-height:1.9;
  margin-top:24px;
  color:var(--muted)
}
.desktop-panel .scope {
  font-size:12px;
  margin-top:50px;
  color:#829db7
}
footer {
  max-width:550px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin:22px 0 28px;
  border-top:1px solid #1c3d5c;
  padding-top:16px;
  color:#91abc4;
  font-size:10px
}
#error {
  color:#ffb1a1;
  background:#4c263855;
  border:1px solid #74495a;
  padding:12px;
  border-radius:8px;
  font-size:13px;
  line-height:1.7
}
dialog {
  width:min(620px,calc(100% - 24px));
  max-height:90dvh;
  background:#0a2039;
  color:var(--text);
  border:1px solid #3b5871;
  border-radius:18px;
  padding:0;
  box-shadow:0 24px 80px #0008
}
dialog::backdrop {
  background:#010a17b8;
  backdrop-filter:blur(4px)
}
.panel-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  background:#0a2039;
  border-bottom:1px solid var(--line);
  padding:14px 20px;
  z-index:2
}
.panel-header h2 {
  font-size:19px;
  margin:0
}
#panel-body {
  padding:20px
}
.field {
  display:block;
  margin:0 0 16px;
  font-size:13px;
  color:var(--muted)
}
.field select {
  margin-top:8px
}
.panel-note {
  color:var(--muted);
  font-size:13px;
  line-height:1.9
}
.panel-buttons {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:18px 0
}
.panel-buttons button {
  flex:1
}
/* All eight public role entries are readable without a second click. */
.catalogue {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.catalogue-card {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-rows:clamp(100px,24vw,160px) auto;
  overflow:hidden;
  min-width:0;
  border:1px solid #3b5871;
  border-radius:14px;
  background:#071a30;
}
.catalogue-card .catalogue-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  aspect-ratio:auto;
  z-index:-1;
}
.catalogue-card .catalogue-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}
.catalogue-copy {
  grid-row:2;
  padding:28px 12px 14px;
  background:linear-gradient(transparent,#071a30f5 28px,#071a30);
}
.catalogue-heading { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.catalogue-heading h3 { margin:0; font-size:17px; line-height:1.4; }
.catalogue-heading span { font-size:11px; padding:2px 6px; border-radius:5px; white-space:nowrap; background:#ffffff0d; }
.catalogue-heading .alignment-good { color:#74e3dc; }
.catalogue-heading .alignment-evil { color:#ffa3a3; }
.catalogue-copy p { font-size:13px; line-height:1.7; margin:10px 0 0; overflow-wrap:anywhere; }
.catalogue-skill { color:#f2f0e8; }
.catalogue-analysis { color:#bbcadb; }
.catalogue-art .image-fallback { justify-content:flex-start; padding-top:24px; font-size:11px; }
@media(max-width:360px) {
  .catalogue { gap:8px; }
  .catalogue-copy { padding-left:9px; padding-right:9px; }
  .catalogue-heading h3 { font-size:15px; }
}
.role-portrait {
  position:relative;
  aspect-ratio:2/3;
  width:min(240px,100%);
  margin:0 auto 18px;
  background:#061b35;
  border-radius:10px;
  overflow:hidden
}
.role-portrait img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}
.image-fallback {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  background:#102e48;
  color:var(--muted)
}
.image-fallback .icon {
  width:50px;
  height:50px
}
.image-fallback[hidden] {
  display:none
}
.role-description h3 {
  font-size:16px;
  color:var(--gold);
  margin:22px 0 8px
}
.role-description p {
  font-size:14px;
  line-height:1.9;
  color:#c4d5e4
}
.knowledge {
  padding:12px;
  background:#103c4644;
  border:1px solid #31575e;
  border-radius:10px;
  font-size:14px;
  line-height:1.9
}
.proposal {
  padding:15px;
  border:1px solid var(--line);
  background:#10304a50;
  border-radius:10px;
  margin-bottom:12px
}
.proposal h3 {
  font-size:15px;
  margin:0 0 12px
}
.proposal p {
  font-size:13px;
  line-height:1.8;
  color:#b9cde1;
  margin:8px 0
}
.badge {
  display:inline-block;
  border-radius:20px;
  padding:4px 10px;
  font-size:12px;
  background:#273d56;
  color:#d7e0eb
}
.badge.good {
  background:#145149;
  color:#a6e2d0
}
.badge.bad {
  background:#54333e;
  color:#ffd0c5
}
.votes {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px
}
.votes span {
  padding:4px 7px;
  background:#112f48;
  border-radius:4px;
  font-size:11px
}
.privacy-title {
  text-align:center;
  font-size:12px;
  color:var(--muted)
}
@media(max-width:850px) {
  .app-shell {
    max-width:580px;
    padding:0 20px
  }
  .screen-layout {
    display:block
  }
  .desktop-panel {
    display:none
  }
  .topbar {
    height:78px
  }
  .brand h1 {
    font-size:29px
  }
  .quest-track {
    padding:7px 10px
  }
  .round-heading h2 {
    font-size:21px
  }
  .round-heading b {
    font-size:27px
  }
}
@media(max-width:400px) {
  .app-shell {
    padding:0 12px
  }
  .topbar {
    height:72px
  }
  .brand {
    gap:8px
  }
  .brand h1 {
    font-size:26px;
    letter-spacing:3px
  }
  .brand .icon {
    width:29px;
    height:29px
  }
  .top-actions {
    gap:4px
  }
  #mode-badge {
    font-size:10px
  }
  .quest-track {
    padding:6px 8px
  }
  .quest-node {
    height:44px;
    width:44px;
    font-size:20px
  }
  .track-hint {
    font-size:11px;
    margin-bottom:18px
  }
  .round-heading h2 {
    font-size:19px;
    letter-spacing:1px
  }
  .disc {
    width:116px
  }
  .disc h3 {
    font-size:16px
  }
  .disc .icon {
    width:29px;
    height:29px;
    margin-bottom:5px
  }
  .disc p {
    font-size:20px
  }
  .actions button {
    padding:10px 12px;
    font-size:13px
  }
  .notice {
    font-size:13px
  }
  .seat-name {
    font-size:10px
  }
  #panel-body {
    padding:16px
  }
}
@media(max-width:600px) {
  dialog {
    margin:auto auto 0;
    width:100%;
    max-height:92dvh;
    border-radius:20px 20px 0 0;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .app-shell {
    padding-bottom:env(safe-area-inset-bottom)
  }
}
dialog[open] {
  animation:panel-in .16s ease-out
}
@keyframes panel-in {
  from {
    opacity:.5;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
[hidden] {
  display:none!important
}

.identity-toggle { color:var(--gold); flex-shrink:0; border:1px solid var(--line); border-radius:50%; }
.identity-toggle .icon { width:24px; height:24px; }
.known-players { list-style:none; padding:0; margin:12px 0; display:grid; gap:10px; }
.known-player { display:flex; align-items:center; gap:12px; }
.known-avatar { width:42px; height:42px; flex-shrink:0; }
.known-avatar svg { width:100%; height:100%; display:block; }
.known-player strong { display:block; font-size:14px; }
.known-player small { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.role-description .knowledge { margin:14px 0 20px; }
.role-description .knowledge h3 { margin:0 0 10px; }
.role-description .knowledge p { font-size:13px; margin:8px 0 0; }
@media(max-width:400px) { .brand .identity-toggle .icon { width:24px; height:24px; } .brand .spark { display:none; } }

/* One reserved action row: events and wait messages never move its buttons. */
body { padding-bottom:calc(192px + env(safe-area-inset-bottom)); }
.action-dock { position:fixed; z-index:5; bottom:0; left:0; right:0; padding:10px 12px calc(12px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--line); box-shadow:0 -14px 32px #020b1770; }
.dock-inner { max-width:550px; margin:auto; position:relative; }
.action-dock .notice { height:44px; min-height:44px; overflow:auto; margin:0; font-size:13px; line-height:22px; }
.action-help { height:28px; line-height:28px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:center; font-size:12px; color:var(--muted); margin:0 0 8px; }
.action-dock .actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; height:52px; min-height:52px; padding:0; }
.action-dock .actions>button { width:100%; height:52px; margin:0; min-width:0; padding:8px; font-size:14px; }
.action-dock #error { position:absolute; bottom:100%; width:100%; max-height:110px; overflow:auto; margin:0 0 12px; background:#442333; }
body[data-stage="assassination"],body[data-stage="defeat"] { --bg:#250e19; --panel:#401923; --line:#743341; --gold:#f0a391; --muted:#d5aab0; background:radial-gradient(ellipse at 50% 20%,#69233288,transparent 65%),var(--bg); }
body[data-stage="victory"] { --bg:#082b30; --line:#3e655e; --muted:#b7d6cb; background:radial-gradient(ellipse at 50% 15%,#75613755,transparent 65%),var(--bg); }
body[data-stage="assassination"] .primary,body[data-stage="defeat"] .primary { background:linear-gradient(135deg,#e77869,#a9324c); color:#fff; border-color:#eb968d; }
body[data-stage="assassination"] .desktop-panel,body[data-stage="victory"] .desktop-panel,body[data-stage="defeat"] .desktop-panel { display:none; }
body:not([data-stage="play"]) .screen-layout { display:block; }
.stage-screen { max-width:760px; margin:0 auto; padding:12px 0 24px; }
.stage-hero { text-align:center; padding:18px 6px 12px; }
.stage-emblem { width:82px; height:82px; border:1px solid var(--gold); border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; color:var(--gold); background:#d57b6120; box-shadow:0 0 48px #c6553b20; }
.stage-emblem .icon { width:42px; height:42px; }
.stage-hero h2 { font-size:32px; letter-spacing:4px; margin:8px 0 12px; color:var(--text); }
.stage-hero p,.stage-instruction { font-size:14px; line-height:1.8; color:var(--muted); }
.stage-instruction { text-align:center; margin:0 0 20px; }
.assassination-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.target-player { display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 6px; background:#391825; border-color:#764050; }
.target-player:disabled { opacity:1; cursor:default; }
.target-player:enabled:hover { background:#632638; }
.target-player.selected { border:2px solid #ffb3a0; background:#6d263b; box-shadow:0 0 20px #d256412b; }
.target-avatar { width:56px; height:56px; }
.target-avatar svg { width:100%; height:100%; }
.target-player strong { font-size:12px; }
.target-player>span:last-child { font-size:11px; color:var(--muted); }
.final-score { text-align:center; color:var(--gold); font-size:16px; }
.reveal-title { margin:32px 0 8px; font-size:20px; }
.revealed-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.revealed-player { text-align:center; padding:12px; border:1px solid var(--line); border-radius:14px; background:#071c2d77; }
.revealed-player h4 { margin:0 0 10px; font-size:13px; }
.revealed-player .role-portrait { width:100%; max-width:180px; margin:0 auto 10px; }
.revealed-player strong { font-size:16px; color:var(--gold); }
.revealed-player p { font-size:12px; margin:8px 0 0; color:var(--muted); }
.revealed-player.evil { border-color:#9b5260; }
@media(max-width:600px) { .revealed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stage-hero h2 { font-size:28px; } }
@media(max-width:350px) { .assassination-grid { gap:8px; } .target-avatar { width:46px; height:46px; } .target-player strong { font-size:11px; } }

/* Compact phone play: one status line, face crops only after roles are public. */
body { padding-bottom:calc(108px + env(safe-area-inset-bottom)); }
.action-dock { padding-top:7px; }
.action-dock .notice { height:28px; min-height:28px; line-height:28px; padding-right:90px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left; }
.action-help { position:absolute; right:0; top:0; max-width:45%; height:28px; margin:0; font-size:11px; }
body[data-stage="victory"] .notice,body[data-stage="defeat"] .notice { padding:0; }
.identity-hint,footer { display:none; }
.seat-label { height:18px; margin:0; }
.topbar { height:64px; }
.round-heading { margin:12px 0 0; }
.arena { margin-top:4px; }
.stage-screen { padding:8px 0; }
.stage-hero { display:grid; grid-template-columns:42px 1fr; column-gap:10px; align-items:center; text-align:left; padding:6px 0; }
.stage-emblem { grid-row:1/3; width:40px; height:40px; margin:0; }
.stage-emblem .icon { width:23px; height:23px; }
.stage-hero h2 { font-size:24px; letter-spacing:2px; margin:0; }
.stage-hero p { grid-column:2; margin:3px 0 0; font-size:12px; line-height:1.5; }
.final-score { font-size:12px; margin:4px 0 8px; }
.reveal-title { font-size:13px; margin:8px 0; color:var(--muted); }
.revealed-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.revealed-player { display:grid; grid-template-columns:48px minmax(0,1fr); grid-template-rows:repeat(3,18px); gap:0 7px; padding:6px; text-align:left; border-radius:9px; min-width:0; }
.revealed-player h4 { grid-column:2; grid-row:1; margin:0; font-size:10px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.revealed-player .role-portrait { grid-column:1; grid-row:1/4; width:48px; height:54px; max-width:none; aspect-ratio:auto; margin:0; border-radius:6px; }
.revealed-player .role-portrait img { position:absolute; width:150%; height:225%; max-width:none; left:-25%; top:-15%; object-fit:cover; }
.revealed-player strong { grid-column:2; grid-row:2; font-size:12px; line-height:18px; white-space:nowrap; }
.revealed-player p { grid-column:2; grid-row:3; font-size:10px; line-height:18px; margin:0; }
.revealed-player .image-fallback { gap:0; }
.revealed-player .image-fallback .icon { width:22px; height:22px; }
.revealed-player .image-fallback span { display:none; }
.assassination-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.target-player { position:relative; gap:6px; padding:10px 4px; min-height:86px; border-width:2px; }
.target-avatar { width:48px; height:48px; }
.target-player strong { font-size:11px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.target-check { position:absolute; top:4px; right:4px; color:var(--gold); }
.target-check .icon { width:17px; height:17px; }
.known-players { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:8px 0 0; }
.known-player { gap:6px; min-width:0; padding:6px; border:1px solid var(--line); border-radius:8px; }
.known-avatar { width:34px; height:34px; }
.known-player strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.knowledge { padding:10px; }
@media(min-width:700px) { .revealed-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .revealed-player { grid-template-columns:64px minmax(0,1fr); grid-template-rows:repeat(3,24px); } .revealed-player .role-portrait { width:64px; height:72px; } .revealed-player h4,.revealed-player strong,.revealed-player p { line-height:24px; } }
@media(max-width:600px) {
  .app-shell { padding-left:12px; padding-right:12px; }
  .topbar { height:56px; }
  .brand h1 { font-size:25px; }
  .quest-track { padding:3px 8px; }
  .quest-node { width:44px; height:44px; font-size:20px; }
  .round-heading h2 { font-size:18px; margin:0 0 3px; }
  .round-heading b { font-size:23px; }
  .round-heading p { font-size:12px; }
  .disc h3 { font-size:16px; }
  .disc .icon { width:24px; height:24px; margin-bottom:4px; }
  .disc p { font-size:19px; }
}
@media(max-width:350px) {
  .revealed-player { grid-template-columns:40px minmax(0,1fr); gap:0 5px; padding:5px; }
  .revealed-player .role-portrait { width:40px; }
  .revealed-player strong { font-size:11px; }
  .target-avatar { width:44px; height:44px; }
  .target-player { min-height:80px; }
}
.assassination-grid:has(.target-player:nth-child(9)) { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media(max-width:600px) {
  .assassination-grid:has(.target-player:nth-child(9)) .target-player { padding:7px 3px; gap:5px; }
  .assassination-grid:has(.target-player:nth-child(9)) .target-avatar { width:44px; height:44px; }
}
@media(max-width:600px) and (max-height:700px) {
  .revealed-player { grid-template-columns:38px minmax(0,1fr); grid-template-rows:repeat(3,14px); gap:0 5px; padding:4px; }
  .revealed-player .role-portrait { width:38px; height:42px; }
  .revealed-player h4,.revealed-player strong,.revealed-player p { line-height:14px; }
  .revealed-player strong { font-size:11px; }
  .reveal-title { margin:4px 0; }
  .stage-hero h2 { font-size:22px; }
  .stage-hero p { margin-top:1px; }
}
@media(max-width:600px) and (max-height:620px) {
  .reveal-title { display:none; }
  .stage-hero { padding:3px 0; }
  .stage-hero p { font-size:11px; }
  .final-score { margin:2px 0 6px; }
  .revealed-player { grid-template-rows:repeat(3,13px); padding:3px; }
  .revealed-player .role-portrait { height:39px; }
  .revealed-player h4,.revealed-player strong,.revealed-player p { line-height:13px; }
}
.role-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:8px 0; border:1px solid var(--line); border-radius:10px; padding:10px; }
.role-options legend { font-size:13px; color:var(--gold); }
.role-option { min-height:44px; display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.role-option input { width:19px; height:19px; accent-color:var(--gold); }
.config-summary { font-size:13px; color:var(--gold); line-height:1.7; }

/* Multiplayer reuses the existing stage, portrait and fixed action dock. */
.room-screen{max-width:600px;margin:0 auto;padding:12px 8px 190px;}
.room-screen h2{text-align:center;font-size:24px;margin:10px 0;overflow-wrap:anywhere;}
.room-screen>.field{margin:16px 0;}
.room-screen>button{margin:8px 8px 8px 0;min-height:44px;}
.field input{display:block;width:100%;box-sizing:border-box;border:1px solid #36516b;background:#102a43;color:#f2f0e8;padding:12px;border-radius:8px;font:inherit;min-height:44px;}
.lobby-seats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;}
.lobby-seat{min-width:0;display:grid;grid-template-columns:38px 1fr;gap:4px 8px;align-items:center;padding:8px;text-align:left;}
.lobby-seat svg{width:38px;height:38px;grid-row:span 2;}
.lobby-seat strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;}
.lobby-seat span{font-size:12px;}
.lobby-seat.self{border-color:#d8b66e;}
.lobby-seat:disabled{opacity:1;}
.invite-qr{display:block;width:min(260px,100%);height:auto;margin:16px auto;background:white;}
.invite-link{display:block;overflow-wrap:anywhere;color:#22d4cc;}
.countdown{text-align:center;font-size:80px;color:#d8b66e;padding:30px 0;}
body[data-multiplayer] .room-screen .config-summary{font-size:13px;line-height:1.7;}
body[data-multiplayer] #action-help{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Text discussion shares the existing modal and fixed action dock. */
.discussion-log{max-height:38dvh;overflow:auto;padding-left:1.3rem;overflow-wrap:anywhere}.discussion-log li{margin:.6rem 0}.discussion-log strong{display:block;color:var(--gold,#dbb66a)}.speech-input{width:100%;resize:vertical;min-height:5rem;max-height:20dvh;background:#081d32;color:#edf4fa;border:1px solid #31536c;border-radius:10px;padding:10px;font:inherit}.ai-problem{color:#f0ba78}.discussion-body>button{margin:6px 5px 0 0}

/* Counts remain visible after resolution; the small badge carries the result. */
.quest-capacity { display:flex; align-items:baseline; gap:2px; }
.quest-capacity small { font-size:10px; font-weight:500; }
.quest-result { position:absolute; right:-4px; bottom:-3px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; border:1px solid currentColor; background:#0b243b; }
.quest-result .icon { width:13px; height:13px; }

.target-player .teammate-badge { position:absolute; top:4px; left:4px; padding:2px 5px; border:1px solid #b27482; border-radius:5px; background:#522535; color:#ffe0e5; font-size:10px; line-height:1.3; }

.target-role { color:#ffe0e5; font-size:11px; line-height:15px; }

.history-entry { width:100%; min-height:44px; margin:0 0 6px; padding:6px 12px; border:1px solid #b79550; border-radius:12px; color:#ffe0a0; background:#12354b; font-weight:700; font-size:14px; text-align:left; }
.history-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin-bottom:14px; }
.history-tabs button { min-width:0; min-height:44px; padding:4px; font-size:13px; }
.room-role-summary { margin-bottom:16px; padding:12px; border:1px solid #54739c; border-radius:12px; }
.room-role-summary h3 { margin:0 0 10px; }
.room-role-counts { display:flex; flex-wrap:wrap; gap:8px; }
.role-count { padding:6px 10px; border-radius:8px; background:#163e53; font-size:14px; }
.role-count.good { color:#83e5de; }.role-count.evil { color:#ffacb0; }

/* Shared compact panels and readable voting records. */
dialog { background:linear-gradient(145deg,#102c44,#081d32); border-color:#36566c; box-shadow:0 24px 80px #0009; }
.panel-header { background:#102a41f5; backdrop-filter:blur(12px); }
.history-tabs { gap:6px; margin-bottom:12px; }
.history-tabs button { border-radius:10px; background:#16364d; border:1px solid #345069; color:#a9bed0; }
.history-tabs button[aria-pressed="true"] { background:#28484e; color:#ffe0a0; border-color:#c09c54; box-shadow:inset 0 -2px #c09c54; }
.history-summary { display:flex; flex-wrap:wrap; gap:6px 14px; color:#aac1d1; font-size:12px; padding:0 2px 14px; }
.history-card { overflow:hidden; border:1px solid #365166; border-radius:14px; background:#102d43; margin-bottom:14px; }
.history-card-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; background:#17394e; }
.history-card-header small { color:#9fb9ca; font-size:11px; }
.history-card-header h3 { margin:4px 0 0; font-size:14px; overflow-wrap:anywhere; }
.history-status { flex-shrink:0; font-size:11px; font-weight:700; border-radius:7px; padding:5px 8px; background:#294457; color:#c0d2de; }
.history-status.passed { background:#164d49; color:#8ce1ca; }
.history-status.rejected { background:#534332; color:#f0ce91; }
.history-team { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:12px 14px; border-bottom:1px solid #28455a; }
.history-label { color:#92acbf; font-size:11px; margin-right:2px; }
.team-chip { font-size:11px; padding:4px 7px; border-radius:6px; background:#27485b; overflow-wrap:anywhere; }
.vote-tally { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:12px 14px 7px; font-size:12px; }
.vote-tally>span { color:#92acbf; font-size:10px; }
.approve { color:#88dfc5; }.reject { color:#f3a5ac; }
.vote-bar { height:4px; background:#a65c68; margin:0 14px 12px; border-radius:4px; overflow:hidden; }
.vote-bar>span { height:100%; display:block; background:#55b8a0; }
.ballot-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:0 10px 12px; }
.ballot { display:grid; grid-template-columns:24px minmax(0,1fr); gap:3px 7px; padding:8px; border-radius:8px; background:#0b2336; border:1px solid #284356; }
.ballot-avatar { grid-row:span 2; align-self:center; }.ballot-avatar svg { display:block; width:24px; height:24px; }
.ballot-who { min-width:0; }.ballot-who strong { display:block; color:#e1ebed; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ballot-who small { display:none; }.ballot-choice { grid-column:2; font-size:11px; font-weight:700; }
.history-result { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:11px 14px; background:#0b2538; border-top:1px solid #28455a; font-size:11px; color:#a8bdcb; }
.history-result strong { color:#d4e2e8; }.history-result.passed strong { color:#88dfc5; }.history-result.failed strong { color:#f3a5ac; }
.history-empty { text-align:center; padding:20px 12px; color:#9fb7c9; font-size:13px; }
.room-settings-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.room-settings-body>button { border-radius:10px; min-height:44px; padding:10px; font-size:13px; background:#17384e; border:1px solid #36566c; }
.room-settings-body>.room-role-summary,.room-settings-body>.room-presence,.room-settings-body>p { grid-column:1/-1; }
.room-settings-body>.room-role-summary { margin:0 0 4px; background:#102d43; border-radius:14px; }
.room-role-summary h3 { font-size:15px; }.room-role-counts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.room-settings-body>.room-presence { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding:12px 0; margin:0; list-style:none; border-top:1px solid #36566c; }
.room-presence li { font-size:11px; color:#abc0ce; overflow-wrap:anywhere; }
@media(max-width:380px) { .history-card-header,.history-team { padding:10px; } .ballot-grid { padding:0 7px 10px; gap:5px; }.ballot { padding:6px; gap:3px 5px; } }

.final-assassination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 12px; padding:8px 12px; margin:8px 0 0; border:1px solid #976776; border-radius:10px; background:#392838; font-size:12px; color:#ffe0e4; }.final-assassination strong { overflow-wrap:anywhere; }.final-assassination span { color:#e9bbc3; }

.record-entries { display:flex; gap:8px; }.record-entries .history-entry { flex:1; min-width:0; text-align:center; }.chat-history-body .discussion-log { max-height:62dvh; list-style:none; padding:0; margin:0; }.chat-history-body .discussion-log li { margin:0 0 10px; padding:12px 14px; background:#143249; border:1px solid #2b4c61; border-radius:12px; font-size:13px; line-height:1.7; }.chat-history-body .discussion-log strong { margin-bottom:5px; font-size:12px; }.chat-history-body .discussion-log span { white-space:pre-wrap; }

.settings-overview,.settings-models { grid-column:1/-1; padding:14px; border:1px solid #345469; border-radius:14px; background:linear-gradient(130deg,#1b4255,#102a40); }
.settings-overview h3 { font-size:20px; margin:7px 0; }.settings-overview p { color:#acc3ce; font-size:12px; margin:0; }.settings-eyebrow { letter-spacing:.15em; font-size:10px; color:#dbbd7e; }
.settings-models h3 { margin:0 0 8px; font-size:14px; }.provider-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #2d475b; font-size:12px; }.provider-ready {color:#8adbc0}.provider-off {color:#92a7b5}.settings-models .panel-note { margin:8px 0 0; font-size:11px; }
.room-settings-body>button.danger { color:#ffadb7; border-color:#81535e; background:#422d3a; }
.ai-add-card { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border:1px solid #36566c; border-radius:14px; background:#102e44; margin:12px 0; }.ai-add-card h3,.ai-add-card>button {grid-column:1/-1;margin:0}.ai-add-card .field {margin:0;min-width:0}.ai-add-card select {width:100%;min-width:0;font-size:13px}
.room-screen {border:1px solid #29485d;border-radius:18px;padding:18px;background:linear-gradient(150deg,#102c43,#081e32)}
.room-screen>h2 {font-size:22px;letter-spacing:.02em}.lobby-seat {border-radius:13px;background:#113149;border:1px solid #34566a}.lobby-seat.self {border-color:#d1ae62;box-shadow:inset 0 0 0 1px #d1ae6233}
.field input,.field select {border-radius:10px;border:1px solid #3a5c72;background:#0d273c;color:#e2edf2;padding:10px;min-height:44px;}

.local-settings-body {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.local-settings-body>p,.local-settings-body>fieldset,.local-settings-body>.panel-buttons,.local-settings-body>button {grid-column:1/-1}.local-settings-body .field {margin:0;min-width:0}.local-settings-body select {width:100%;min-width:0}.local-settings-body .panel-buttons {margin:0}.role-options {border:1px solid #36566c;border-radius:12px;padding:12px;background:#102c42}.role-option {border-radius:8px;padding:8px;background:#18374c}.role-option input {accent-color:#54c4ad}dialog[data-kind="room-config"] .field select {width:100%}
/* Playtest feedback: readable states, compact controls and persistent chat. */
.counter-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 28px 44px;gap:6px;align-items:center;margin:5px 0}.counter-row button{padding:3px;font-size:23px}.counter-row strong{text-align:center}.role-counters{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}.config-editor>.counter-row{max-width:330px}.config-editor .field{margin-top:14px}.config-editor .config-summary{line-height:1.7}.config-editor .counter-row span{font-size:13px}.config-editor>button{margin:6px 5px 6px 0}
.panel-header{flex-wrap:wrap}.panel-header #back-settings{font-size:12px;padding:7px;min-height:36px}#back-settings[hidden]{display:none}.identity-confirm{position:sticky;bottom:0;width:100%;box-shadow:0 -5px 15px #061b35}
.team-status{margin:8px 0;padding:10px 12px;border:1px solid #36566c;border-radius:12px;background:#0e2d43;font-size:12px}.team-status p{margin:6px 0;line-height:1.5}.captain-title{color:#f2cf84}.submission-list,.discussion-progress{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.submission-list span,.discussion-progress span{padding:4px 7px;background:#19384d;border-radius:6px;font-size:11px}.submitted,.spoken{color:#8be2c1}.failed{color:#ffb3b3}.skipped{color:#a6b6c6}
.leader-icon{width:auto!important;display:flex;align-items:center;gap:2px;background:#332c1c;border:1px solid #d8b66e;border-radius:6px;padding:1px 4px;z-index:2;white-space:nowrap}.leader-icon small{font-size:10px;color:#ffda8d}.leader-icon svg{width:18px;height:18px}.seat.chosen .avatar-button{box-shadow:0 0 0 3px #54e3c5,0 0 15px #22d4cc66;background:#176354}.seat-label{font-weight:700}.seat-label.reject{color:#ff9aa7;background:#4a1d30}.seat-label.approve{color:#9eeed0;background:#123d38}
.result-notice{border:1px solid #b5a070;padding:10px;background:#13394d;border-radius:12px;margin:8px 0;animation:result-in .25s ease-out}.result-notice>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px}.result-notice button{padding:4px 8px;min-height:32px;margin-left:auto;font-size:11px}@keyframes result-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.result-notice{animation:none}}
.discussion-log{list-style:none!important;padding:0;margin:0;overflow:auto}.discussion-log li{list-style:none;padding:10px;margin:6px 0;background:#143249;border:1px solid #2b4c61;border-radius:10px;font-size:13px;overflow-wrap:anywhere}.discussion-log strong,.discussion-log span{display:block}.discussion-log strong{color:#d8b66e;font-size:12px;margin-bottom:5px}.discussion-log .chat-phase{background:none;border:0;text-align:center;font-size:11px;color:#a4b6c9;padding:5px}.discussion-log li.skipped{font-style:italic}.desktop-panel #desktop-chat-log{height:48dvh;max-height:620px;min-height:200px}.desktop-panel h2{font-size:21px;margin:0 0 10px}.desktop-panel #desktop-chat-status{font-size:12px}.desktop-panel #desktop-chat-open{width:100%}.desktop-panel #latest-public{font-size:12px}.desktop-panel .scope:empty{display:none}.desktop-panel{align-self:start}
body[data-multiplayer="true"] .record-entries{position:sticky;top:0;z-index:5;background:#061b35;padding:6px 0}.discussion-body .speech-input{width:100%;font:inherit}.discussion-body>button{margin-right:8px}.discussion-body .discussion-log{max-height:45dvh}
@media(min-width:900px){.revealed-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.stage-hero{padding:8px!important}.stage-hero h2{font-size:30px!important}.stage-emblem{width:50px!important;height:50px!important}.stage-emblem svg{width:32px!important;height:32px!important}}
@media(max-width:600px){.role-counters{grid-template-columns:1fr;gap:0}.team-status{font-size:11px;padding:7px 9px}.leader-icon small{font-size:9px}.leader-icon svg{width:14px;height:14px}.panel-header h2{font-size:17px}.result-notice{padding:7px}.result-notice>div{font-size:11px}}
@media(min-width:851px){body[data-multiplayer="true"] .screen-layout{display:grid;grid-template-columns:minmax(0,640px) minmax(260px,1fr);gap:30px}body[data-multiplayer="true"] .desktop-panel{display:block}body[data-multiplayer="true"] .stage-screen{max-width:none}.desktop-panel{position:sticky;top:18px}.revealed-player{min-width:0}}
@media(max-height:700px) and (max-width:600px){.topbar{height:48px}.record-entries .history-entry{min-height:34px;padding:6px}.quest-track{margin-top:4px}.round-heading{margin:8px 0}.team-status{margin:4px 0}.action-dock .actions:empty{height:0;min-height:0}.action-dock:has(.actions:empty){padding-bottom:8px}}
.stage-hero>.final-assassination{grid-column:1/-1;min-width:0;justify-content:flex-start;text-align:left;margin:5px 0 0;padding:6px 9px;font-size:11px}.stage-hero>.final-assassination strong{overflow-wrap:anywhere}.stage-hero>.final-assassination span{white-space:normal}