:root {
  --revealed-role: #ae74ff;
  --bg: #0f1115;
  --bg-deep: #08090c;
  --panel: #1c1f26;
  --panel-strong: #252932;
  --red: #ff4655;
  --red-dark: #9b1f2d;
  --text: #ece8e1;
  --muted: #8c9099;
  --line: rgba(236, 232, 225, 0.14);
  --ready: #00ffc2;
  --warning: #f7c843;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 70, 85, 0.14), transparent 28%),
    linear-gradient(315deg, rgba(255, 70, 85, 0.08), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 96px),
    var(--bg);
  font-family: "Bahnschrift", "Agency FB", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 70, 85, 0.12), transparent 34%),
    repeating-linear-gradient(115deg, rgba(236, 232, 225, 0.025) 0 2px, transparent 2px 10px);
  pointer-events: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
  cursor: pointer;
}

.icon-sprite {
  display: none;
}

.app-shell {
  width: min(1540px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 24px 0 32px;
}

.topbar,
.team-zone,
.control-spine,
.bench-zone,
.player-dialog form,
.vote-dialog form {
  border: 1px solid var(--line);
  background: rgba(15, 17, 21, 0.88);
  box-shadow: var(--shadow);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 92px;
  padding: 18px 22px;
}

.brand-block,
.top-actions,
.section-heading,
.utility-stack,
.dialog-head,
.dialog-actions {
  display: flex;
  align-items: center;
}

.brand-block {
  gap: 15px;
}

.brand-mark {
  position: relative;
  width: 52px;
  height: 52px;
  background: var(--red);
  clip-path: polygon(50% 0, 100% 24%, 83% 100%, 50% 72%, 17% 100%, 0 24%);
}

.brand-mark::after {
  position: absolute;
  inset: 14px;
  content: "";
  border: 2px solid var(--bg-deep);
  transform: rotate(45deg);
}

.kicker {
  margin: 0 0 4px;
  color: var(--red);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.82;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}

.top-actions {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.icon-button,
.secondary-button,
.add-button,
.vote-button,
.execute-button,
.close-button {
  border: 0;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.icon-button,
.secondary-button,
.add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(236, 232, 225, 0.18);
  background: rgba(37, 41, 50, 0.84);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  text-transform: uppercase;
}

.icon-button svg,
.secondary-button svg,
.add-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.icon-button:hover,
.secondary-button:hover,
.add-button:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}

.command-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 0.52fr) minmax(280px, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.team-zone,
.control-spine,
.bench-zone {
  padding: 18px;
}

.section-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.team-count {
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: rgba(255, 70, 85, 0.12);
  color: var(--red);
  font-weight: 900;
}

.team-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.team-result {
  padding: 7px 12px;
  border: 1px solid rgba(236, 232, 225, 0.12);
  background: rgba(37, 41, 50, 0.7);
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}

.team-result.agents {
  border-color: rgba(0, 255, 194, 0.44);
  background: rgba(0, 255, 194, 0.08);
  color: var(--ready);
}

.team-result.undercover {
  border-color: rgba(255, 70, 85, 0.52);
  background: rgba(255, 70, 85, 0.12);
  color: var(--red);
}

.team-result.tie {
  border-color: rgba(247, 200, 67, 0.6);
  background: rgba(247, 200, 67, 0.12);
  color: var(--warning);
}

.team-reveal {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(247, 200, 67, 0.82);
  background:
    repeating-linear-gradient(135deg, rgba(8, 9, 12, 0.18) 0 8px, transparent 8px 16px),
    linear-gradient(110deg, rgba(247, 200, 67, 0.95), rgba(255, 70, 85, 0.78));
  color: var(--bg-deep);
  box-shadow: 0 0 0 1px rgba(247, 200, 67, 0.24), 0 0 24px rgba(247, 200, 67, 0.2);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  animation: revealPulse 1800ms ease-in-out infinite;
}

.team-reveal:not(:disabled):hover {
  border-color: var(--warning);
  color: var(--bg-deep);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(247, 200, 67, 0.34), 0 0 34px rgba(247, 200, 67, 0.34);
}

.team-reveal:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(1);
  animation: none;
  box-shadow: none;
}

@keyframes revealPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(247, 200, 67, 0.24), 0 0 18px rgba(247, 200, 67, 0.16);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(247, 200, 67, 0.38), 0 0 32px rgba(247, 200, 67, 0.34);
  }
}

.dropzone {
  display: grid;
  gap: 12px;
  min-height: 456px;
  padding: 12px;
  border: 1px dashed rgba(236, 232, 225, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 70, 85, 0.08), transparent 32%),
    rgba(8, 9, 12, 0.58);
}

.dropzone.drag-over,
.bench-list.drag-over {
  border-color: var(--red);
  background-color: rgba(255, 70, 85, 0.1);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 136px;
  color: rgba(236, 232, 225, 0.28);
  font-size: 1.25rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.player-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(236, 232, 225, 0.13);
  background: linear-gradient(90deg, rgba(37, 41, 50, 0.96), rgba(15, 17, 21, 0.96));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  user-select: none;
}

.player-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  content: "";
  background: var(--red);
  opacity: 0;
}

.player-card:hover {
  border-color: rgba(255, 70, 85, 0.66);
  transform: translateX(3px);
}

.player-card.swap-target {
  border-color: var(--warning);
  background:
    linear-gradient(110deg, rgba(247, 200, 67, 0.18), rgba(37, 41, 50, 0.96)),
    linear-gradient(90deg, rgba(37, 41, 50, 0.96), rgba(15, 17, 21, 0.96));
  box-shadow: 0 0 24px rgba(247, 200, 67, 0.22);
}

.player-card.undercover::before {
  opacity: 1;
  box-shadow: 0 0 18px var(--revealed-role);
}

.player-card.undercover.revealed {
  border-color: rgba(174, 116, 255, 0.92);
  background:
    linear-gradient(110deg, rgba(174, 116, 255, 0.34), rgba(92, 45, 145, 0.22) 42%, rgba(15, 17, 21, 0.98)),
    repeating-linear-gradient(135deg, rgba(174, 116, 255, 0.16) 0 8px, transparent 8px 16px);
  box-shadow: 0 0 0 1px rgba(174, 116, 255, 0.22), 0 18px 38px rgba(174, 116, 255, 0.18);
}

.player-card.undercover.revealed .agent-avatar {
  border-color: var(--revealed-role);
  background: rgba(174, 116, 255, 0.18);
  box-shadow: 0 0 22px rgba(174, 116, 255, 0.42);
}

.player-card.undercover.revealed .player-subline {
  color: rgba(236, 232, 225, 0.82);
}

.player-card.revealed {
  animation: glitchPulse 700ms ease both;
}

.agent-avatar {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(236, 232, 225, 0.18);
  background: var(--bg-deep);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
}

.avatar-button {
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 82% 100%, 0 100%);
}

.avatar-button:hover .agent-avatar,
.name-button:hover {
  border-color: var(--red);
  color: var(--red);
}

.player-meta {
  min-width: 0;
}

.player-name {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 900;
  text-transform: uppercase;
}

.name-button {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.player-subline {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.undercover-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--red);
  color: var(--bg-deep);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.vote-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  margin-right: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(247, 200, 67, 0.4);
  color: var(--warning);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.card-actions {
  display: grid;
  gap: 7px;
}

.mini-button {
  min-width: 34px;
  height: 30px;
  border: 1px solid rgba(236, 232, 225, 0.12);
  background: rgba(8, 9, 12, 0.64);
  color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.mini-button:hover {
  border-color: var(--red);
  color: var(--text);
}

.control-spine {
  display: grid;
  align-content: start;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(255, 70, 85, 0.12), transparent 42%),
    rgba(15, 17, 21, 0.92);
}

.map-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px;
}

.map-current,
.map-random,
.identity-button {
  border: 1px solid rgba(236, 232, 225, 0.16);
  background: rgba(8, 9, 12, 0.62);
  color: var(--text);
}

.map-current {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 8px;
  text-align: left;
}

.map-current:hover,
.map-random:hover,
.identity-button:not(:disabled):hover {
  border-color: var(--red);
  transform: translateY(-1px);
}

.map-thumbnail,
.map-option-image {
  display: block;
  background-position: center;
  background-size: cover;
}

.map-thumbnail {
  height: 66px;
  border: 1px solid rgba(236, 232, 225, 0.17);
}

.map-current-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.map-current-copy .kicker {
  margin: 0;
}

.map-current-copy strong {
  overflow-wrap: anywhere;
  font-size: 1.18rem;
  text-transform: uppercase;
}

.map-current svg,
.map-random svg,
.identity-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.map-random {
  display: grid;
  place-items: center;
  min-height: 84px;
  padding: 0;
}

.round-status {
  min-height: 172px;
  padding: 18px;
  border: 1px solid var(--line);
  text-align: center;
  background: rgba(8, 9, 12, 0.58);
}

.vs-lock {
  margin: 8px auto 12px;
  color: var(--text);
  font-size: clamp(4rem, 9vw, 7rem);
  font-weight: 900;
  line-height: 0.88;
  text-shadow: 4px 4px 0 var(--red-dark);
}

#statusText {
  color: var(--muted);
  font-weight: 700;
}

.execute-button {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 116px;
  padding: 18px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(8, 9, 12, 0.28) 0 10px, transparent 10px 20px),
    var(--red);
  color: var(--bg-deep);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  font-weight: 900;
  text-transform: uppercase;
}

.execute-button span {
  font-size: 1rem;
}

.execute-button strong {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 0.94;
}

.vote-button {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 78px;
  padding: 14px 16px;
  border: 1px solid rgba(236, 232, 225, 0.16);
  background: rgba(37, 41, 50, 0.9);
  color: var(--text);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  text-align: left;
  text-transform: uppercase;
}

.identity-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--warning);
  font-weight: 900;
  text-transform: uppercase;
}

.identity-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(1);
}

.vote-button span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.vote-button strong {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1;
}

.vote-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(1);
}

.vote-button:not(:disabled):hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.execute-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.42;
}

.execute-button.is-locked {
  border: 1px solid rgba(0, 255, 194, 0.28);
  background:
    repeating-linear-gradient(135deg, rgba(0, 255, 194, 0.12) 0 8px, transparent 8px 16px),
    linear-gradient(110deg, rgba(37, 41, 50, 0.96), rgba(15, 17, 21, 0.96));
  color: var(--ready);
  opacity: 0.72;
  filter: none;
}

.execute-button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(255, 70, 85, 0.36);
}

.intel-panel {
  padding: 16px;
  border: 1px solid var(--line);
  background: rgba(8, 9, 12, 0.58);
}

.intel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(236, 232, 225, 0.1);
}

.intel-row span {
  color: var(--muted);
  text-transform: uppercase;
}

.intel-row strong {
  overflow-wrap: anywhere;
  color: var(--text);
  text-align: right;
}

.result-callout {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(236, 232, 225, 0.12);
  background: rgba(37, 41, 50, 0.6);
  color: var(--muted);
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.result-callout.agents {
  border-color: rgba(0, 255, 194, 0.44);
  color: var(--ready);
  background: rgba(0, 255, 194, 0.08);
}

.result-callout.undercover {
  border-color: rgba(255, 70, 85, 0.5);
  color: var(--red);
  background: rgba(255, 70, 85, 0.1);
}

.utility-stack {
  gap: 10px;
  flex-wrap: wrap;
}

.bench-zone {
  margin-top: 18px;
}

.bench-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  min-height: 126px;
  padding: 12px;
  border: 1px dashed rgba(236, 232, 225, 0.16);
  background: rgba(8, 9, 12, 0.42);
}

.add-button {
  border-color: rgba(255, 70, 85, 0.5);
  background: var(--red);
  color: var(--bg-deep);
  font-weight: 900;
}

.add-button:hover {
  color: var(--bg-deep);
  filter: brightness(1.08);
}

.player-dialog,
.vote-dialog,
.identity-dialog,
.map-dialog {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
}

.vote-dialog,
.identity-dialog,
.map-dialog {
  width: min(920px, calc(100vw - 28px));
}

.player-dialog::backdrop,
.vote-dialog::backdrop,
.identity-dialog::backdrop,
.map-dialog::backdrop {
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(4px);
}

.player-dialog form,
.vote-dialog form,
.identity-dialog form,
.map-dialog form {
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 22px;
}

.vote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vote-team {
  padding: 14px;
  border: 1px solid rgba(236, 232, 225, 0.12);
  background: rgba(8, 9, 12, 0.48);
}

.tie-notice {
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(247, 200, 67, 0.38);
  background: rgba(247, 200, 67, 0.1);
  color: var(--warning);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.35;
}

.vote-row {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid rgba(236, 232, 225, 0.08);
}

.vote-row span {
  color: var(--text);
  font-weight: 900;
  text-transform: uppercase;
}

.vote-row select {
  min-height: 40px;
  border: 1px solid rgba(236, 232, 225, 0.18);
  background: rgba(15, 17, 21, 0.9);
  color: var(--text);
  padding: 8px 10px;
}

.dialog-head {
  justify-content: space-between;
  gap: 16px;
}

.close-button {
  width: 38px;
  height: 38px;
  background: var(--panel-strong);
  color: var(--text);
  font-size: 1.4rem;
}

.field {
  display: grid;
  gap: 7px;
}

.field span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(236, 232, 225, 0.18);
  background: rgba(8, 9, 12, 0.72);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
}

.field textarea {
  resize: vertical;
  line-height: 1.4;
}

.identity-result {
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(236, 232, 225, 0.16);
  background: rgba(8, 9, 12, 0.56);
  text-align: center;
}

.identity-result span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.identity-result strong {
  font-size: 1.7rem;
}

.identity-result.success.agent {
  border-color: rgba(0, 255, 194, 0.44);
  color: var(--ready);
}

.identity-result.success.undercover,
.identity-result.error {
  border-color: rgba(255, 70, 85, 0.52);
  color: var(--red);
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.map-option {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(236, 232, 225, 0.13);
  background: rgba(8, 9, 12, 0.5);
  color: var(--text);
  text-align: left;
}

.map-option:hover,
.map-option.selected {
  border-color: var(--red);
  background: rgba(255, 70, 85, 0.1);
}

.map-option-image {
  aspect-ratio: 16 / 9;
}

.map-option strong {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.map-option small {
  color: var(--muted);
}

.agent-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  max-height: min(382px, 44vh);
  overflow: auto;
  padding-right: 4px;
}

.agent-option {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 12px 8px;
  border: 1px solid rgba(236, 232, 225, 0.13);
  background: rgba(8, 9, 12, 0.5);
  color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.agent-option.selected {
  border-color: var(--red);
  color: var(--text);
  background: rgba(255, 70, 85, 0.12);
}

.agent-option.unavailable {
  cursor: not-allowed;
  opacity: 0.36;
  filter: grayscale(1);
}

.agent-option.random-agent {
  border-color: rgba(247, 200, 67, 0.44);
  background:
    linear-gradient(135deg, rgba(255, 70, 85, 0.16), rgba(247, 200, 67, 0.08)),
    rgba(8, 9, 12, 0.5);
  color: var(--warning);
}

.agent-option.random-agent:hover {
  border-color: var(--warning);
  color: var(--text);
}

.agent-option img {
  width: 66px;
  height: 66px;
}

.agent-option span {
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dialog-actions {
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  background:
    linear-gradient(180deg, transparent, rgba(255, 70, 85, 0.16), transparent),
    rgba(0, 0, 0, 0.74);
  color: var(--red);
  font-size: clamp(2.2rem, 9vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
}

.scan-overlay.active {
  display: grid;
  animation: scanWash 1200ms ease both;
}

.scan-overlay.result-agents {
  color: var(--ready);
  background:
    linear-gradient(180deg, transparent, rgba(0, 255, 194, 0.22), transparent),
    rgba(0, 0, 0, 0.78);
}

.scan-overlay.result-undercover {
  color: var(--red);
  background:
    linear-gradient(180deg, transparent, rgba(255, 70, 85, 0.24), transparent),
    rgba(0, 0, 0, 0.78);
}

@keyframes scanWash {
  0% {
    opacity: 0;
    background-position: 0 -100vh;
  }
  20%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 0 100vh;
  }
}

@keyframes glitchPulse {
  0%,
  100% {
    transform: translate(0);
    text-shadow: none;
  }
  22% {
    transform: translate(-3px, 1px);
    text-shadow: 3px 0 var(--red), -3px 0 var(--ready);
  }
  44% {
    transform: translate(3px, -1px);
    text-shadow: -2px 0 var(--red), 2px 0 var(--ready);
  }
}

@media (max-width: 1040px) {
  .command-grid {
    grid-template-columns: 1fr;
  }

  .control-spine {
    order: -1;
  }

  .dropzone {
    min-height: 180px;
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100% - 20px, 560px);
    padding: 10px 0 92px;
  }

  .topbar,
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions,
  .section-heading .add-button {
    width: 100%;
  }

  .top-actions > *,
  .section-heading .add-button,
  .utility-stack > * {
    flex: 1;
  }

  .player-card {
    grid-template-columns: 64px 1fr;
  }

  .agent-avatar,
  .avatar-button {
    width: 64px;
    height: 64px;
  }

  .card-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
  }

  .bench-list {
    grid-template-columns: 1fr;
  }

  .agent-picker {
    grid-template-columns: repeat(3, 1fr);
  }

  .vote-grid {
    grid-template-columns: 1fr;
  }

  .map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-spine {
    position: sticky;
    bottom: 10px;
    z-index: 10;
  }

  .round-status,
  .intel-panel {
    display: none;
  }
}

@media (max-width: 440px) {
  .map-current {
    grid-template-columns: 70px minmax(0, 1fr) 18px;
  }

  .map-thumbnail {
    height: 58px;
  }

  .map-grid {
    grid-template-columns: 1fr;
  }
}

/* Online room controls extend the original SHADOW-OPS design. */
[hidden] { display: none !important; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--ready); outline-offset: 3px; }
.connection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 52px; }
.connection-bar p { flex: 1; min-width: 160px; color: var(--muted); overflow-wrap: anywhere; }
.connection-bar.error p { color: var(--warning); }
.room-panel { border: 1px solid var(--line); background: rgba(15,17,21,.9); padding: 20px; margin: 0 0 18px; }
.room-panel h2 { margin: 0; }
.room-panel .section-heading { padding: 0 0 16px; flex-wrap: wrap; gap: 12px; }
.room-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 16px; }
.room-form .room-actions { grid-column: 1 / -1; }
.room-actions, .recover-rooms { display: flex; flex-wrap: wrap; gap: 8px; }
.room-actions button { min-height: 42px; }
.room-badge { font-size: .85rem; color: var(--ready); }
.muted { color: #a5a8b0; font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; }
.danger { color: var(--red); }
.member-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 8px; }
.member-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 12px; min-width: 0; }
.member-row strong { flex: 1; min-width: 100px; overflow-wrap: anywhere; }
.member-row select { width: 100%; }
.member-row select, .card-actions select { min-width: 0; color: var(--text); background: var(--panel); border: 1px solid var(--line); padding: 8px; }
.member-row .mini-button { width: auto; padding: 6px 8px; min-height: 36px; }
.player-meta { min-width: 0; }
.member-tag { color: var(--ready); font-size: .75rem; margin-top: 6px; }
.player-card .card-actions { flex-wrap: wrap; }
.identity-result p { padding: 12px; border-bottom: 1px solid var(--line); margin: 0; }
.identity-result .role-undercover { color: var(--red); }
.identity-result .role-agent { color: var(--ready); }
.vote-row .add-button { min-height: 40px; }
.vote-row small { color: var(--muted); }
.vote-row { min-width: 0; }
.vote-row select { width: 100%; min-width: 0; }
.room-code { letter-spacing: .12em; }
#gameArea .command-grid { margin-top: 18px; }
#playerForm .field[hidden] { display: none; }
#identityDialog form { background: var(--bg); border: 1px solid var(--line); }
#mapList .map-option-image { display: block; background-size: cover; background-position: center; }
@media (max-width: 720px) {
  .room-form { grid-template-columns: minmax(0,1fr); }
  .member-list { grid-template-columns: minmax(0,1fr); }
  .room-panel { padding: 14px; }
  .top-actions { flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .app-shell { width: calc(100vw - 20px); }
  .team-zone { min-width: 0; }
  .section-heading { flex-wrap: wrap; }
  .team-badges { flex-wrap: wrap; }
  .player-card { grid-template-columns: 44px minmax(0,1fr); }
  .player-card .card-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .room-actions button { flex: 1 1 120px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 440px) { .agent-avatar, .avatar-button { width: 44px; height: 44px; } }

/* Official navigation portraits are vertical: preserve proportions in square slots. */
.agent-avatar, .agent-option img {
  object-fit: cover;
  object-position: center top;
}

.recovery-room { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--line); }

/* Room entry: separate commands, one focused step at a time. */
.room-entry-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.room-entry-card { position: relative; display: grid; gap: 14px; padding: 24px; text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--red); background: linear-gradient(115deg,rgba(255,70,85,.09),transparent 75%),var(--bg-deep); overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s; }
.room-entry-card strong { font-size: 1.5rem; }
.room-entry-card > span:last-child { color: var(--muted); line-height: 1.5; }
.room-entry-card::after { content: ''; position: absolute; width: 90px; height: 1px; right: 16px; bottom: 14px; background: var(--red); box-shadow: 0 0 14px var(--red); transform: scaleX(.3); transform-origin: right; transition: transform .25s; }
.room-entry-card:hover:not(:disabled), .room-entry-card:focus-visible { border-color: var(--red); box-shadow: inset 0 0 30px rgba(255,70,85,.07),0 0 18px rgba(255,70,85,.12); transform: translateY(-2px); }
.room-entry-card:hover::after { transform: scaleX(1); }
.room-wizard { max-width: 640px; grid-template-columns: minmax(0,1fr); padding: 20px; border-left: 2px solid var(--red); background: rgba(8,9,12,.6); }
.entry-step { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.join-destination { margin: 0; padding: 14px; border: 1px solid rgba(255,70,85,.35); color: var(--text); background: rgba(255,70,85,.08); font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
/* Custom selects retain native values while displaying a tactical option panel. */
.tactical-select { position: relative; width: 100%; min-width: 0; }
.tactical-select-trigger { position: relative; width: 100%; min-height: 46px; padding: 12px 42px 12px 14px; border: 1px solid rgba(236,232,225,.2); border-left: 2px solid rgba(255,70,85,.55); color: var(--text); background: linear-gradient(100deg,rgba(255,70,85,.07),transparent 75%),#101217; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .18s, box-shadow .18s; }
.tactical-select-trigger::after { content: ''; position: absolute; right: 18px; top: 18px; width: 7px; height: 7px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .2s; }
.tactical-select-trigger:hover:not(:disabled), .tactical-select-trigger[aria-expanded=true] { border-color: var(--red); box-shadow: 0 0 16px rgba(255,70,85,.15),inset 0 0 18px rgba(255,70,85,.05); }
.tactical-select-trigger[aria-expanded=true]::after { transform: translateY(4px) rotate(225deg); }
.tactical-select-menu { z-index: 1000; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid rgba(255,70,85,.65); background: #101217; box-shadow: 0 16px 50px #000a,0 0 24px rgba(255,70,85,.14); scrollbar-width: thin; scrollbar-color: var(--red) #171a21; }
.tactical-select-menu [role=option] { position: relative; isolation: isolate; overflow: hidden; padding: 13px 34px 13px 14px; min-height: 44px; border-left: 2px solid transparent; color: #d5d3d0; cursor: pointer; outline: none; line-height: 1.4; overflow-wrap: anywhere; transition: color .15s, background .15s, border-color .15s; }
.tactical-select-menu [role=option]::before { content: ''; position: absolute; pointer-events: none; left: -45%; top: 0; width: 40%; height: 100%; transform: skewX(-25deg); background: linear-gradient(90deg,transparent,rgba(255,70,85,.22),rgba(255,120,130,.55),transparent); opacity: 0; }
.tactical-select-menu [role=option]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,var(--red),#ffadad,transparent); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 8px var(--red); transition: transform .2s; }
.tactical-select-menu [role=option]:hover, .tactical-select-menu [role=option]:focus { color: white; background: linear-gradient(90deg,rgba(255,70,85,.18),rgba(255,70,85,.03)); border-left-color: var(--red); }
.tactical-select-menu [role=option]:hover::before, .tactical-select-menu [role=option]:focus::before { animation: optionLaser .65s ease-out; }
.tactical-select-menu [role=option]:hover::after, .tactical-select-menu [role=option]:focus::after { transform: scaleX(1); }
.tactical-select-menu [aria-selected=true] { color: #ff8791; border-left-color: var(--red); background: rgba(255,70,85,.08); font-weight: 800; }
.tactical-select-menu [aria-disabled=true] { opacity: .35; cursor: not-allowed; }
@keyframes optionLaser { 0% { left: -45%; opacity: 0; } 20% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
/* Occupancy has a text label as well as a restrained red breathing border. */
.player-card.is-bound { border-color: rgba(255,70,85,.65); background: linear-gradient(100deg,rgba(100,23,35,.55),rgba(22,17,23,.96)); animation: boundBreath 3s ease-in-out infinite; }
.player-card.is-bound::before { opacity: 1; background: var(--red); box-shadow: 0 0 14px var(--red); }
.player-card.is-bound .member-tag { color: #ff9aa3; }
.player-card.is-bound .member-tag::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border-radius: 50%; background: #ff5666; box-shadow: 0 0 8px #ff4655; animation: boundSignal 3s ease-in-out infinite; }
@keyframes boundBreath { 0%,100% { border-color: rgba(255,70,85,.35); box-shadow: inset 0 0 12px rgba(255,70,85,.04); } 50% { border-color: rgba(255,100,112,.95); box-shadow: inset 0 0 24px rgba(255,70,85,.16); } }
@keyframes boundSignal { 0%,100% { opacity: .45; box-shadow: 0 0 3px #ff4655; } 50% { opacity: 1; box-shadow: 0 0 11px #ff4655; } }
@media (max-width: 720px) { .room-entry-choices { grid-template-columns: minmax(0,1fr); } .room-entry-card { padding: 20px; } .room-wizard { padding: 14px; } }
@media (prefers-reduced-motion: reduce) { .player-card.is-bound, .player-card.is-bound .member-tag::before, .tactical-select-menu [role=option]::before { animation: none !important; } .room-entry-card { transition: none; } }

/* Your own slot stays visually distinct from other connected members. */
.player-card.is-bound.is-own {
  border-color: rgba(247,200,67,.75);
  background: linear-gradient(100deg,rgba(106,78,18,.55),rgba(25,22,15,.96));
  animation-name: ownBreath;
}
.player-card.is-bound.is-own::before { background: var(--warning); box-shadow: 0 0 14px var(--warning); }
.player-card.is-bound.is-own .member-tag { color: #ffe29a; }
.player-card.is-bound.is-own .member-tag::before { background: var(--warning); box-shadow: 0 0 8px var(--warning); animation-name: ownSignal; }
@keyframes ownBreath {
  0%,100% { border-color: rgba(247,200,67,.4); box-shadow: inset 0 0 12px rgba(247,200,67,.05); }
  50% { border-color: rgba(255,222,132,.95); box-shadow: inset 0 0 24px rgba(247,200,67,.18); }
}
@keyframes ownSignal {
  0%,100% { opacity: .5; box-shadow: 0 0 3px var(--warning); }
  50% { opacity: 1; box-shadow: 0 0 12px var(--warning); }
}

/* A full-width map preview gives the center column a readable visual anchor. */
.map-control { grid-template-columns: minmax(0,1fr); gap: 10px; }
.map-current { grid-template-columns: minmax(0,1fr) 24px; gap: 12px; padding: 10px; min-height: 0; }
.map-current .map-thumbnail { grid-column: 1 / -1; width: 100%; height: clamp(150px,13vw,210px); }
.map-current-copy { padding: 2px 4px 6px; gap: 6px; }
.map-current-copy strong { font-size: clamp(1.35rem,1.6vw,1.65rem); line-height: 1.3; }
.map-current > svg { margin-right: 4px; }
.map-random { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; }
.map-random span { font-size: .88rem; font-weight: 700; }
@media (max-width: 1040px) { .map-current .map-thumbnail { height: clamp(150px,25vw,260px); } }
@media (max-width: 720px) { .map-current .map-thumbnail { height: clamp(140px,38vw,200px); } }

/* Read-only members must see the map at full contrast. */
.map-current:disabled { opacity: 1; cursor: default; }
.map-current:disabled:hover { border-color: rgba(236,232,225,.16); transform: none; }

.scan-overlay { pointer-events: none; text-align: center; padding: 24px; }
.scan-overlay span { max-width: 100%; overflow-wrap: anywhere; }
.scan-overlay.result-tie { color: var(--warning); }

.own-role-badge { margin-top: 10px; padding: 8px 10px; border: 1px solid rgba(247,200,67,.6); background: rgba(247,200,67,.12); color: #ffe29a; font-weight: 900; line-height: 1.5; }
.own-role-badge small { display: block; margin-top: 2px; color: #c8b783; font-size: .7rem; font-weight: 400; }

/* Revealed role styling takes priority over occupancy; self keeps its gold locator. */
.player-card.undercover.revealed { animation: none; }
.player-card.undercover.revealed::before { background: var(--revealed-role); box-shadow: 0 0 18px var(--revealed-role); }
.player-card.undercover.revealed .member-tag { color: #dbbaff; font-weight: 900; }
.player-card.undercover.revealed .member-tag::before { background: var(--revealed-role); box-shadow: 0 0 10px var(--revealed-role); animation: none; }
.player-card.undercover.revealed.is-own {
  border-color: var(--warning);
  background: linear-gradient(110deg,rgba(174,116,255,.34),rgba(92,45,145,.22) 42%,rgba(15,17,21,.98)),repeating-linear-gradient(135deg,rgba(174,116,255,.16) 0 8px,transparent 8px 16px);
  box-shadow: inset 0 0 0 1px rgba(247,200,67,.25),0 0 20px rgba(174,116,255,.2);
}
.player-card.undercover.revealed.is-own::before { background: var(--warning); box-shadow: 0 0 14px var(--warning); }