:root {
  --bg: #120e1a;
  --bg-card: #1d1729;
  --bg-card-2: #261e37;
  --ink: #f2e2b8;
  --ink-soft: #c4b287;
  --border: #4a3d68;
  --vampir: #ff3f5e;
  --vampir-soft: #5a1a2a;
  --koylu: #3ddc84;
  --doktor: #38bdf8;
  --falci: #ffc94a;
  --falci-pick: #8b5cf6;
  --avci: #a3c94a;
  --muhtar: #e8b04a;
  --soytari: #e879f9;
  --accent: #d97706;
  --accent-2: #fbbf24;
  --danger: #ff3f5e;
  --radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at top, rgba(26, 20, 40, 0.45) 0%, rgba(18, 14, 26, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
  color: var(--ink);
  transition: background 0.6s ease;
}

body.theme-vampir {
  --accent: #ff3f5e;
  --accent-2: #ff8a5c;
  background:
    radial-gradient(ellipse at top, rgba(255, 63, 94, 0.4) 0%, rgba(18, 14, 26, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}

body.theme-doktor {
  --accent: #38bdf8;
  --accent-2: #6366f1;
  background:
    radial-gradient(ellipse at top, rgba(56, 189, 248, 0.38) 0%, rgba(14, 20, 26, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}

body.theme-falci {
  --accent: #8b5cf6;
  --accent-2: #d946ef;
  background:
    radial-gradient(ellipse at top, rgba(139, 92, 246, 0.4) 0%, rgba(20, 14, 30, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}

body.theme-koylu {
  --accent: #3ddc84;
  --accent-2: #22c55e;
  background:
    radial-gradient(ellipse at top, rgba(61, 220, 132, 0.35) 0%, rgba(14, 22, 18, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}

.inapp-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 14px;
  background: #4d3d14;
  color: #ffe3a3;
  font-size: 12.5px;
  line-height: 1.4;
  border-bottom: 1px solid #6b551d;
}

.inapp-banner button {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
}

#app {
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 16px 8px;
  display: flex;
  flex-direction: column;
}

#panel {
  max-width: 420px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

h1,
h2,
h3 {
  margin: 0 0 8px;
}

h1 {
  font-size: 28px;
  text-align: center;
}

.hero-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero-villager {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center 40%;
  margin-top: -6px;
  margin-bottom: 6px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 18%, transparent 65%);
  mask-image: radial-gradient(ellipse at center, black 18%, transparent 65%);
}

.screen-title {
  font-size: 20px;
  margin-bottom: 12px;
}

.mode-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.mode-tab {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.mode-tab.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: white;
}

.open-rooms-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.open-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.open-room-row span {
  color: var(--ink-soft);
  font-size: 12px;
}

.role-choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.role-choice-btn {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.role-choice-btn.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: white;
}

.avatar-picker {
  margin-bottom: 10px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.avatar-pick-btn {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-pick-btn.selected {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 2px var(--accent) inset;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.card > h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.field {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 10px;
}

.field:focus {
  outline: 2px solid var(--accent);
}

.btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.05s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  box-shadow: 0 4px 18px -4px rgba(217, 119, 6, 0.55);
}

.btn-secondary {
  background: var(--bg-card-2);
  color: var(--ink);
  border: 1px solid var(--border);
}

.btn-danger {
  background: var(--vampir);
  color: white;
}

.btn-outline-small {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

#close-room-btn[data-armed="1"] {
  background: var(--vampir);
  border-color: var(--vampir);
  color: white;
}

.btn-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-card);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 12px;
}

.btn-skip:active {
  border-color: var(--accent);
  color: var(--ink);
}

.btn-skip-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-card-2);
  color: var(--ink-soft);
}

.room-code {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  margin: 12px 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(217, 119, 6, 0.35);
}

.player-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-item {
  padding: 10px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: opacity 0.15s ease;
}

.player-item.is-dead {
  opacity: 0.55;
  background: transparent;
}

.player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.player-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.player-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}

.player-avatar.role-vampir {
  border-color: var(--vampir);
  box-shadow: 0 0 10px -2px var(--vampir);
}

.player-avatar.role-koylu {
  border-color: var(--koylu);
  box-shadow: 0 0 10px -2px var(--koylu);
}

.player-avatar.role-doktor {
  border-color: var(--doktor);
  box-shadow: 0 0 10px -2px var(--doktor);
}

.player-avatar.role-falci {
  border-color: var(--falci);
  box-shadow: 0 0 10px -2px var(--falci);
}

.player-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.note-view-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.note-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.note-modal-card {
  width: 100%;
  max-width: 360px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.note-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.note-modal-header h3 {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
}

.note-modal-close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.note-modal-body {
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.death-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  opacity: 1;
  transition: opacity 0.5s ease;
  cursor: pointer;
}

.death-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

.death-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.death-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--vampir);
  box-shadow: 0 0 30px -4px var(--vampir);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  animation: death-fall 1.1s cubic-bezier(0.55, 0, 1, 0.45) forwards, death-fade 0.6s ease 1.3s forwards;
}

.death-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  animation: death-text-in 0.4s ease 1.1s forwards;
}

.death-skull {
  font-size: 30px;
  opacity: 0;
  transform: scale(0.5);
  animation: death-skull-in 0.5s ease 1.6s forwards;
}

@keyframes death-fall {
  0% {
    transform: translateY(-220px) rotate(0deg);
  }
  70% {
    transform: translateY(0) rotate(340deg);
  }
  85% {
    transform: translateY(-14px) rotate(360deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

@keyframes death-fade {
  from {
    filter: grayscale(0);
  }
  to {
    filter: grayscale(1);
    opacity: 0.6;
  }
}

@keyframes death-text-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes death-skull-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.note-reveal-card {
  width: min(320px, 84vw);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 2px solid var(--vampir);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 0 30px -4px var(--vampir);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  animation: death-text-in 0.4s ease 0.1s forwards;
  cursor: default;
}

.note-reveal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 10px;
}

.note-reveal-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.note-reveal-hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
}

.player-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-name.dead {
  text-decoration: line-through;
  color: var(--ink-soft);
}

.mod-toggle-btn,
.creator-play-btn,
.spec-toggle-btn {
  margin-top: 6px;
  margin-right: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}

.player-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.role-pick-current {
  font-size: 13px;
  color: var(--ink-soft);
}

.role-pick-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}

.role-pick-btn {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.role-pick-btn.selected {
  border-color: transparent;
  color: white;
}

.role-pick-btn.role-koylu.selected {
  background: var(--koylu);
  color: #0c1f14;
}

.role-pick-btn.role-falci.selected {
  background: var(--falci-pick);
  color: white;
}

.role-pick-btn.role-doktor.selected {
  background: var(--doktor);
  color: #06222f;
}

.role-pick-btn.role-vampir.selected {
  background: var(--vampir);
  color: white;
}

.tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-card-2);
  color: var(--ink-soft);
}

.tag.host {
  background: var(--accent);
  color: white;
}

.tag.offline {
  background: transparent;
  border: 1px solid var(--border);
}

.tag.spectator {
  background: transparent;
  border: 1px solid var(--ink-soft);
  color: var(--ink-soft);
}

.role-card {
  text-align: center;
  padding: 32px 20px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.role-card.vampir {
  background: linear-gradient(160deg, var(--vampir-soft), #1d1729);
  border: 1px solid var(--vampir);
}

.role-card.koylu {
  background: linear-gradient(160deg, #16332390, #1d1729);
  border: 1px solid var(--koylu);
}

.role-card.doktor {
  background: linear-gradient(160deg, #143a4d90, #1d1729);
  border: 1px solid var(--doktor);
}

.role-card.falci {
  background: linear-gradient(160deg, #4d3d1490, #1d1729);
  border: 1px solid var(--falci);
}

.role-emoji {
  font-size: 56px;
  margin-bottom: 8px;
}

.role-name {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
}

.role-desc {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.timer {
  text-align: center;
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.timer strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.target-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  color: var(--ink);
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
}

.target-btn.selected {
  border-color: var(--accent);
  background: #2c2247;
}

.knife-count {
  font-size: 14px;
  letter-spacing: 1px;
}

.target-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.banner {
  text-align: center;
  padding: 18px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 600;
}

.banner.kill {
  background: var(--vampir-soft);
  color: #ffb3bd;
}

.banner.safe {
  background: #163323;
  color: #a6f0c1;
}

.banner.win-vampir {
  background: linear-gradient(160deg, var(--vampir-soft), #1d1729);
  color: #ffb3bd;
}

.banner.win-koylu {
  background: linear-gradient(160deg, #16332390, #1d1729);
  color: #a6f0c1;
}

.badge-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

.badge-role.vampir {
  background: linear-gradient(135deg, var(--vampir), #b0233b);
  color: white;
}

.badge-role.koylu {
  background: linear-gradient(135deg, var(--koylu), #1f9c5a);
  color: #0c1f14;
}

.badge-role.doktor {
  background: linear-gradient(135deg, var(--doktor), #1c8fd6);
  color: #06222f;
}

.badge-role.falci {
  background: linear-gradient(135deg, var(--falci), #e0a316);
  color: #241c05;
}

.error-text {
  color: var(--danger);
  text-align: center;
  margin-bottom: 12px;
}

.footer-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: auto;
  padding-top: 24px;
}

.center {
  text-align: center;
}

.stack-gap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

.chat-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card-2);
  font-size: 15px;
  cursor: pointer;
}

.chat-icon-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
}

.panel-tab {
  position: relative;
  flex: 1;
  padding: 12px 8px;
  border-radius: 10px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.panel-tab.active {
  background: var(--bg-card);
  color: var(--ink);
  border-color: var(--accent);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vampir);
  margin-left: 6px;
  vertical-align: middle;
}

.chat-icon-btn .dot {
  position: absolute;
  top: 2px;
  right: 2px;
  margin-left: 0;
}

.chat-denied {
  padding: 20px 12px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}

.panel-section {
  padding: 10px 12px 12px;
}

.chat-subtabs {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.chat-subtab {
  padding: 6px 0;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.chat-subtab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.chat-messages {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-right: 4px;
}

.chat-msg {
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  padding: 8px 10px;
  background: var(--bg-card-2);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.chat-msg-name {
  color: var(--accent);
  font-weight: 600;
}

.chat-empty {
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
  padding: 6px 0;
}

.night-log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.night-log-round {
  padding: 10px 12px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.night-log-round-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.night-log-line {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input-row .field {
  margin-bottom: 0;
  flex: 1;
}

.btn-compact {
  width: auto;
  margin-bottom: 0;
  padding: 12px 16px;
  white-space: nowrap;
}

.notes-history {
  max-height: 140px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.notes-history-empty {
  opacity: 0.7;
  font-style: italic;
}

.notes-current-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.notes-entry-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.notes-entry-empty {
  opacity: 0.7;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}

.notes-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
}

.notes-entry-text {
  flex: 1;
  font-size: 14px;
  color: var(--ink);
  word-break: break-word;
}

.notes-entry-edit-btn,
.notes-entry-delete-btn,
.notes-entry-save-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
}

.notes-entry.editing {
  padding: 6px;
}

.notes-entry-input {
  flex: 1;
  margin-bottom: 0;
}

.notes-add-row {
  display: flex;
  gap: 8px;
}

.notes-add-row .field {
  margin-bottom: 0;
  flex: 1;
}

/* ---------- Intro / splash animation ---------- */

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  background: radial-gradient(ellipse at top, rgba(217, 119, 6, 0.18) 0%, rgba(18, 14, 26, 0.95) 55%, var(--bg) 100%);
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.intro-screen.intro-out {
  opacity: 0;
}

.intro-moon {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3d0, var(--accent-2) 60%, var(--accent) 100%);
  box-shadow: 0 0 50px 14px rgba(251, 191, 36, 0.35);
  transform: translate(-50%, 0);
  animation: intro-moon-rise 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes intro-moon-rise {
  from {
    top: 90%;
    opacity: 0;
  }
  to {
    top: 18%;
    opacity: 1;
  }
}

.intro-fog {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(196, 178, 135, 0.14) 40%, rgba(196, 178, 135, 0.22));
  filter: blur(6px);
  animation: intro-fog-drift 6s ease-in-out infinite alternate;
}

@keyframes intro-fog-drift {
  from {
    transform: translateX(-3%);
  }
  to {
    transform: translateX(3%);
  }
}

.intro-bat {
  position: absolute;
  top: 30%;
  left: -10%;
  font-size: 26px;
  opacity: 0;
  animation: intro-bat-fly 1.6s ease-in 0.3s forwards;
}

@keyframes intro-bat-fly {
  0% {
    left: -10%;
    top: 32%;
    opacity: 1;
  }
  50% {
    top: 20%;
  }
  100% {
    left: 105%;
    top: 30%;
    opacity: 1;
  }
}

.intro-title {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 2px 20px rgba(217, 119, 6, 0.4);
  opacity: 0;
  transform: translateY(8px);
  animation: intro-title-in 0.6s ease 1.5s forwards;
  z-index: 1;
}

@keyframes intro-title-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  opacity: 0;
  animation: intro-fade-in 0.5s ease 1.85s forwards;
  z-index: 1;
}

@keyframes intro-fade-in {
  to {
    opacity: 1;
  }
}

.intro-skip-hint {
  position: absolute;
  bottom: 26px;
  font-size: 12px;
  color: var(--ink-soft);
  opacity: 0;
  animation: intro-fade-in 0.5s ease 2.1s forwards;
  z-index: 1;
}

/* ---------- How to play ---------- */

/* Top-right rather than bottom-right like the other games: the chat/notes
   panel sits at the very bottom of the page here and its send button would
   end up underneath a bottom-right button. */
.howto-fab {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1204;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.7);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}

.howto-fab:active {
  transform: scale(0.95);
}

.howto-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 3, 10, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 95;
  padding: 20px;
}

.howto-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.8);
  max-width: 420px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
}

.howto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
  position: sticky;
  top: 0;
  background: var(--bg-card-2);
  border-radius: var(--radius) var(--radius) 0 0;
}

.howto-header h2 {
  margin: 0;
  font-size: 19px;
}

.howto-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--ink);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.howto-body {
  padding: 6px 18px 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

.howto-body h3 {
  margin: 16px 0 6px;
  font-size: 14px;
  color: var(--accent-2);
}

.howto-body p {
  margin: 6px 0;
}

.howto-body ul,
.howto-body ol {
  margin: 6px 0;
  padding-left: 20px;
}

.howto-body li {
  margin: 5px 0;
}

/* ---------- Character avatars ---------- */
.player-avatar svg,
.avatar-pick-btn svg,
.death-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.player-avatar {
  overflow: hidden;
  padding: 0;
}
.avatar-pick-btn {
  overflow: hidden;
  padding: 2px;
}

/* ---------- Live vote list ---------- */
.target-btn.vote-row {
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.target-btn.vote-row:disabled {
  opacity: 0.85;
  cursor: default;
}
.vote-row .vote-face {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.vote-row .vote-face svg,
.vote-voter svg {
  width: 100%;
  height: 100%;
  display: block;
}
.vote-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vote-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vote-voters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.vote-voter {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.vote-count {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-soft);
  min-width: 34px;
  text-align: right;
}
.vote-row.has-votes .vote-count {
  color: var(--accent-2);
}
.vote-row.mine {
  border-color: var(--accent);
  background: #3a2a19;
  box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ---------- Judgement ---------- */
.judge-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.judge-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 2px solid transparent;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
}
.judge-btn span {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
}
.judge-btn.innocent {
  background: linear-gradient(160deg, #2f9e6a, #1c6b47);
}
.judge-btn.guilty {
  background: linear-gradient(160deg, #d6334f, #8f1b31);
}
.judge-btn.mine {
  border-color: #fff;
  box-shadow: 0 0 18px -2px rgba(255, 255, 255, 0.55);
}
.verdict-tally > div {
  margin-bottom: 8px;
  line-height: 1.5;
}
.vt-label {
  display: inline-block;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 6px;
  font-size: 12px;
}
.vt-label.guilty {
  background: #8f1b31;
  color: #fff;
}
.vt-label.innocent {
  background: #1c6b47;
  color: #fff;
}


.target-btn.vote-retract,
.judge-retract {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--ink-soft);
  font-size: 14px;
  padding: 10px;
}
.judge-retract {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-radius: 12px;
  cursor: pointer;
}

/* ---------- Village stage (top-down, Salem style) ---------- */
#village {
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 16px 0;
}
#village svg.village {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 340;
  border-radius: 14px;
  border: 1px solid #5a4a30;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  background: #2a2410;
}
.village #v-night {
  transition: opacity 1.8s ease;
}
.village.night #v-night {
  opacity: 0.65;
}
.village #v-celestial .sun,
.village #v-celestial .moon {
  transition: opacity 1.2s ease;
}
.village #v-celestial .moon {
  opacity: 0;
}
.village.night #v-celestial .sun {
  opacity: 0;
}
.village.night #v-celestial .moon {
  opacity: 1;
}
/* crescent on ordinary nights, a big glowing full moon on nights 2, 4, 6... */
.village #v-celestial .moon-halo,
.village #v-celestial .moon-craters {
  display: none;
}
.village.fullmoon #v-celestial .moon-shadow {
  display: none;
}
.village.fullmoon #v-celestial .moon-halo,
.village.fullmoon #v-celestial .moon-craters {
  display: inline;
}
.village.fullmoon #v-celestial .moon {
  transform: scale(1.35);
  transform-origin: 0 0; /* the moon sits at the origin of the moving #v-sky group */
}
.village.fullmoon #v-night {
  fill: #1a1840;
}
.banner.fullmoon {
  background: linear-gradient(160deg, #3a3560, #1d1729);
  color: #f5f0d0;
}
/* the square darkens round the gallows during a trial */
.village #v-ground,
.village .house {
  transition: filter 1s ease;
}
.village.trial #v-ground,
.village.trial .house {
  filter: saturate(0.75) brightness(0.88);
}

.village .you-ring {
  animation: v-ring 2s linear infinite;
}
@keyframes v-ring {
  to {
    stroke-dashoffset: -12;
  }
}
/* night: a few lit windows per occupied house (the vampires' finale turns them all red) */
.village .hl .glint {
  fill: #ffd36a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease, fill 1.5s ease;
}
.village .hl .wglow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.village.night .hl.on .glint {
  opacity: 1;
  animation: v-flicker 3.4s ease-in-out infinite;
}
.village.night .hl.on .wglow {
  opacity: 0.55;
}
@keyframes v-flicker {
  0%,
  100% {
    opacity: 1;
  }
  45% {
    opacity: 0.82;
  }
  60% {
    opacity: 0.96;
  }
}

/* torches + ambience */
.village .torch .flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: v-flame 0.5s ease-in-out infinite alternate;
}
@keyframes v-flame {
  from {
    transform: scale(1, 1) rotate(-3deg);
  }
  to {
    transform: scale(0.88, 1.12) rotate(3deg);
  }
}
.village .tglow,
.village .tpool {
  opacity: 0.15;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
.village.night .tglow {
  opacity: 0.95;
}
/* the torch's light falls on the cobbles at night */
.village.night .tpool {
  opacity: 1;
  mix-blend-mode: screen;
}

/* characters */
.village .vchar,
.village .vtop {
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.village .vbubble {
  animation: v-pop 0.25s ease-out;
}
@keyframes v-pop {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
  }
}
.village .vnoose {
  display: none;
}
.village .vchar.noosed .vnoose {
  display: inline;
}
.village .vchar .c-armL,
.village .vchar .c-armR,
.village .vchar .c-legL,
.village .vchar .c-legR {
  transform-box: fill-box;
  transform-origin: 50% 6%;
}
.village .vchar .vsway {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.village .vchar.idle .vsway {
  animation: v-breathe 3.4s ease-in-out infinite;
}
@keyframes v-breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.012, 0.988);
  }
}
.village .vchar.walking .vsway {
  animation: v-bob 0.5s ease-in-out infinite;
}
@keyframes v-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-1.6deg);
  }
  50% {
    transform: translateY(-1.8px) rotate(1.6deg);
  }
}
.village .vchar.walking .c-legL,
.village .vchar.walking .c-armR {
  animation: v-swing-a 0.5s ease-in-out infinite;
}
.village .vchar.walking .c-legR,
.village .vchar.walking .c-armL {
  animation: v-swing-b 0.5s ease-in-out infinite;
}
@keyframes v-swing-a {
  0%,
  100% {
    transform: rotate(22deg);
  }
  50% {
    transform: rotate(-22deg);
  }
}
@keyframes v-swing-b {
  0%,
  100% {
    transform: rotate(-22deg);
  }
  50% {
    transform: rotate(22deg);
  }
}
.village .vchar.hanging .vsway {
  animation: none;
}
.village .vchar.hanging .c-armL,
.village .vchar.hanging .c-armR {
  animation: v-limp 2.4s ease-in-out infinite;
}
.village .vchar.hanging .c-legL,
.village .vchar.hanging .c-legR {
  animation: v-limp 2s ease-in-out infinite reverse;
}
@keyframes v-limp {
  0%,
  100% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-4deg);
  }
}

/* dead body in front of the door */
.village .vchar.lying .vsway {
  animation: v-fall 0.8s cubic-bezier(0.45, 0, 0.9, 0.6) forwards;
  transform-origin: 50% 100%;
}
.village .vchar.lying.lying-now .vsway {
  animation-duration: 0.01s;
}
@keyframes v-fall {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  35% {
    transform: rotate(-14deg) translateY(1px);
  }
  100% {
    transform: rotate(-90deg) translate(0, 2px);
  }
}
.village .vtop.lying .vbadge,
.village .vtop.lying .vbubble {
  display: none;
}

/* effects */
.village .poof circle {
  fill: #d6d2c8;
  stroke: #8c877a;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: v-poof 1s ease-out forwards;
}
.village .poof circle:nth-child(2) {
  animation-delay: 0.08s;
}
.village .poof circle:nth-child(3) {
  animation-delay: 0.16s;
}
.village .poof circle:nth-child(4) {
  animation-delay: 0.1s;
}
@keyframes v-poof {
  from {
    opacity: 0.95;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.7) translateY(-12px);
  }
}
.village .dust ellipse {
  fill: #b8a98a;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: v-dust 1.1s ease-out forwards;
}
@keyframes v-dust {
  0% {
    opacity: 0.7;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* gallows */
.village #v-rope {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transform: scaleY(0.22);
  transition: transform 0.4s ease;
}
.village #v-noose {
  transition: transform 0.4s ease;
}

/* ---------- Village: pre-rendered art overrides ---------- */
.village .house.dead image {
  filter: grayscale(0.9) brightness(0.7);
}
.village .doorlight {
  fill: #ffd36a;
  opacity: 0;
  filter: blur(1.6px);
  animation: v-doorlight 1.9s ease-out forwards;
  pointer-events: none;
}
@keyframes v-doorlight {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

.village .poof circle {
  fill: #d8d2c4;
  stroke: none;
  filter: blur(1.4px);
}

/* ---------- Oblique village: sprite characters ---------- */
.face-img {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: auto 440%;
  background-position: 50% 1%;
  position: relative;
}
.face-img.dead {
  filter: grayscale(0.9) brightness(0.8);
}
.face-img.dead::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6em;
  font-weight: 800;
  color: rgba(220, 60, 60, 0.85);
  text-shadow: 0 0 3px #000;
}
.player-avatar .face-img {
  border-radius: 50%;
}
.death-avatar .face-img {
  border-radius: 50%;
}
.village .vchar.dead image {
  filter: grayscale(0.85) brightness(0.82);
}
.village .vskull {
  display: none;
}
.village .vchar.lying .vskull {
  display: inline;
  transform: translate(-18px, -15px);
  animation: v-skull 2s ease-in-out infinite;
}
@keyframes v-skull {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.village .vtop.lying .vlabel {
  transform: translate(-18px, 52px);
  fill: #c9c3b4;
}
.village .vchar.gasp .vsway {
  animation: v-gasp 0.5s ease-out 2;
}
@keyframes v-gasp {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px) scale(1.04);
  }
}
.village .vchar.walking .vsway {
  animation: v-waddle 0.46s ease-in-out infinite;
}
@keyframes v-waddle {
  0%,
  100% {
    transform: translateY(0) rotate(-2.4deg);
  }
  25% {
    transform: translateY(-1.6px) rotate(0deg);
  }
  50% {
    transform: translateY(0) rotate(2.4deg);
  }
  75% {
    transform: translateY(-1.6px) rotate(0deg);
  }
}
.village .vchar.idle .vsway {
  animation: v-breathe 3.4s ease-in-out infinite;
}
.village .vchar.hanging .vsway {
  animation: none;
}

.village .vchar.lying .vsway,
.village .vchar.lying.idle .vsway {
  animation: v-fall 0.8s cubic-bezier(0.45, 0, 0.9, 0.6) forwards;
  transform-origin: 50% 100%;
}
.village .vchar.lying.lying-now .vsway,
.village .vchar.lying.lying-now.idle .vsway {
  animation-duration: 0.01s;
}
@keyframes v-fall {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  35% {
    transform: rotate(-14deg) translateY(1px);
  }
  100% {
    transform: rotate(-90deg) translate(0, 1px);
  }
}

/* ---------- avcı / muhtar / soytarı ---------- */
body.theme-avci {
  --accent: #8fb339;
  --accent-2: #c8e06a;
  background:
    radial-gradient(ellipse at top, rgba(143, 179, 57, 0.36) 0%, rgba(16, 20, 12, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}
body.theme-muhtar {
  --accent: #d99a1e;
  --accent-2: #f5cf6b;
  background:
    radial-gradient(ellipse at top, rgba(232, 176, 74, 0.38) 0%, rgba(24, 18, 10, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}
body.theme-soytari {
  --accent: #d946ef;
  --accent-2: #f9a8d4;
  background:
    radial-gradient(ellipse at top, rgba(217, 70, 239, 0.36) 0%, rgba(22, 12, 26, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}
.player-avatar.role-avci { border-color: var(--avci); box-shadow: 0 0 10px -2px var(--avci); }
.player-avatar.role-muhtar { border-color: var(--muhtar); box-shadow: 0 0 10px -2px var(--muhtar); }
.player-avatar.role-soytari { border-color: var(--soytari); box-shadow: 0 0 10px -2px var(--soytari); }
.role-pick-btn.role-avci.selected { background: var(--avci); color: #172008; }
.role-pick-btn.role-muhtar.selected { background: var(--muhtar); color: #2a1c04; }
.role-pick-btn.role-soytari.selected { background: var(--soytari); color: #2a0830; }
.role-card.avci { background: linear-gradient(160deg, #2e3a1490, #1d1729); border: 1px solid var(--avci); }
.role-card.muhtar { background: linear-gradient(160deg, #4d3a1490, #1d1729); border: 1px solid var(--muhtar); }
.role-card.soytari { background: linear-gradient(160deg, #4a1a5290, #1d1729); border: 1px solid var(--soytari); }
.badge-role.avci { background: linear-gradient(135deg, var(--avci), #6f8f25); color: #172008; }
.badge-role.muhtar { background: linear-gradient(135deg, var(--muhtar), #c27c12); color: #2a1c04; }
.badge-role.soytari { background: linear-gradient(135deg, var(--soytari), #a21caf); color: #2a0830; }
.banner.win-soytari { background: linear-gradient(160deg, #4a1a52, #1d1729); color: #f5c2ff; }
.mayor-reveal { width: 100%; margin: 4px 0 12px; }
.vote-voter { position: relative; }
.vote-x {
  position: absolute;
  right: -6px;
  bottom: -4px;
  font-size: 9px;
  background: var(--muhtar);
  color: #2a1c04;
  border-radius: 6px;
  padding: 0 3px;
  line-height: 13px;
}

/* ---------- vampire side helpers share the vampire look ---------- */
.player-avatar.role-vampirlordu,
.player-avatar.role-bastancikarici,
.player-avatar.role-mezarci,
.player-avatar.role-casus { border-color: var(--vampir); box-shadow: 0 0 10px -2px var(--vampir); }
.role-pick-btn.role-vampirlordu.selected,
.role-pick-btn.role-bastancikarici.selected,
.role-pick-btn.role-mezarci.selected,
.role-pick-btn.role-casus.selected { background: var(--vampir); color: white; }
.role-card.vampirlordu,
.role-card.bastancikarici,
.role-card.mezarci,
.role-card.casus { background: linear-gradient(160deg, var(--vampir-soft), #1d1729); border: 1px solid var(--vampir); }
.badge-role.vampirlordu,
.badge-role.bastancikarici,
.badge-role.mezarci,
.badge-role.casus { background: linear-gradient(135deg, var(--vampir), #b0233b); color: white; }
.badge-role.cleaned { background: #3a3542; color: #cfc8db; }

/* ---------- role sheets ---------- */
.role-doc, .team-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 8px 0;
  background: rgba(255, 255, 255, 0.03);
}
.team-group > summary, .role-doc > summary {
  cursor: pointer;
  padding: 10px 12px;
  list-style: none;
  display: block;
}
.team-group > summary::-webkit-details-marker, .role-doc > summary::-webkit-details-marker { display: none; }
.team-group > summary::before, .role-doc > summary::before { content: "▸ "; color: var(--ink-soft); }
.team-group[open] > summary::before, .role-doc[open] > summary::before { content: "▾ "; }
.team-group > .role-doc { margin: 6px 10px 10px; }
.role-short { display: block; margin-top: 2px; font-size: 0.85em; color: var(--ink-soft); font-weight: normal; }
.role-doc-body { padding: 0 14px 10px; font-size: 0.92em; line-height: 1.45; }
.role-doc-body ul { padding-left: 18px; margin: 4px 0; }
.role-doc-body li { margin: 3px 0; }
.role-doc-label { font-weight: 700; color: var(--accent-2); }
.team-tag { font-size: 0.7em; padding: 1px 6px; border-radius: 8px; margin-left: 4px; vertical-align: middle; }
.team-tag.team-koylu { background: #1f5c3a; color: #c8f5da; }
.team-tag.team-vampir { background: #6b1d2c; color: #ffd0d8; }
.team-tag.team-nk { background: #6b3410; color: #ffd9bf; }
.team-tag.team-notr { background: #12514b; color: #c6f6ef; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.85em;
  background: var(--bg-card-2);
  color: var(--ink);
  cursor: pointer;
}
.role-chip.team-koylu { border-color: #2f8f5a; }
.role-chip.team-vampir { border-color: var(--vampir); }
.role-chip.team-nk { border-color: var(--nk, #fb923c); }
.role-chip.team-notr { border-color: var(--notr, #5fd3c6); }
.role-status { font-size: 0.92em; line-height: 1.6; }
.role-pick-hint { width: 100%; margin: 6px 0 0; font-size: 0.85em; color: var(--ink-soft); }
.role-guide { margin: 0 0 12px; }
.role-guide > summary { cursor: pointer; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.rules-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.88em; }
.rules-table th, .rules-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.rules-table td:last-child, .rules-table th:last-child { text-align: center; width: 48px; }

.auto-plan { font-size: 0.92em; }
.plan-team { margin: 8px 0 2px; font-weight: 700; }
.plan-team.team-vampir { color: #ff9aac; }
.plan-team.team-notr { color: #8ff0e4; }
.plan-team.team-koylu { color: #a6f0c1; }
.plan-list { margin: 0 0 4px; padding-left: 18px; }
.plan-list li { margin: 2px 0; }
.auto-table td, .auto-table th { text-align: center !important; width: auto !important; }

/* ---------- neutral roles ---------- */
:root {
  --notr: #5fd3c6;
  --nk: #fb923c;
}
body.theme-notr {
  --accent: #2bb3a3;
  --accent-2: #8ff0e4;
  background:
    radial-gradient(ellipse at top, rgba(95, 211, 198, 0.34) 0%, rgba(10, 22, 22, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}
body.theme-nk {
  --accent: #ea6a1a;
  --accent-2: #fdba74;
  background:
    radial-gradient(ellipse at top, rgba(251, 146, 60, 0.36) 0%, rgba(26, 14, 8, 0.93) 55%, var(--bg) 100%),
    url("/bg.jpg") center 15% / cover no-repeat;
  background-color: var(--bg);
}
.player-avatar.role-serikatil, .player-avatar.role-kundakci, .player-avatar.role-kurtadam, .player-avatar.role-juggernaut, .player-avatar.role-vebatasiyici { border-color: var(--nk); box-shadow: 0 0 10px -2px var(--nk); }
.player-avatar.role-cadi, .player-avatar.role-korsan, .player-avatar.role-hayattakalan, .player-avatar.role-cellat, .player-avatar.role-koruyucumelek, .player-avatar.role-unutkan { border-color: var(--notr); box-shadow: 0 0 10px -2px var(--notr); }
.role-pick-btn.role-serikatil.selected, .role-pick-btn.role-kundakci.selected, .role-pick-btn.role-kurtadam.selected, .role-pick-btn.role-juggernaut.selected, .role-pick-btn.role-vebatasiyici.selected { background: var(--nk); color: #2a1204; }
.role-pick-btn.role-cadi.selected, .role-pick-btn.role-korsan.selected, .role-pick-btn.role-hayattakalan.selected, .role-pick-btn.role-cellat.selected, .role-pick-btn.role-koruyucumelek.selected, .role-pick-btn.role-unutkan.selected { background: var(--notr); color: #062421; }
.role-card.serikatil, .role-card.kundakci, .role-card.kurtadam, .role-card.juggernaut, .role-card.vebatasiyici { background: linear-gradient(160deg, #4a250e90, #1d1729); border: 1px solid var(--nk); }
.role-card.cadi, .role-card.korsan, .role-card.hayattakalan, .role-card.cellat, .role-card.koruyucumelek, .role-card.unutkan { background: linear-gradient(160deg, #0f3a3690, #1d1729); border: 1px solid var(--notr); }
.badge-role.serikatil, .badge-role.kundakci, .badge-role.kurtadam, .badge-role.juggernaut, .badge-role.vebatasiyici { background: linear-gradient(135deg, var(--nk), #c2410c); color: #2a1204; }
.badge-role.cadi, .badge-role.korsan, .badge-role.hayattakalan, .badge-role.cellat, .badge-role.koruyucumelek, .badge-role.unutkan { background: linear-gradient(135deg, var(--notr), #1f9c8f); color: #062421; }
.banner.win-notr { background: linear-gradient(160deg, #0f3a36, #1d1729); color: #b9f5ee; }
.banner.notice { background: #2a2140; color: #e4dbff; }

/* ================= animations ================= */
/* --- village: night-death scenes --- */
.village .fx { pointer-events: none; }
.village .fx-bat { animation: fx-bat-fly 2.8s ease-out both; }
.village .fx-bat path { animation: fx-flap 0.16s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.village .fx-bat.rise { animation: fx-bat-fly 5.5s ease-in infinite; }
@keyframes fx-bat-fly {
  0% { transform: translate(0, 0) scale(0.3); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; }
}
@keyframes fx-flap { from { transform: scaleY(1); } to { transform: scaleY(0.35); } }
.village .fx-claw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-draw 0.35s var(--d, 0s) ease-out forwards, fx-fade 1.2s 7.5s forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fade { to { opacity: 0; } }
.village .fx-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fx-flicker 0.22s var(--d, 0s) ease-in-out infinite alternate, fx-fade 0.8s 4.2s forwards; }
@keyframes fx-flicker { from { transform: scale(0.85, 0.8); } to { transform: scale(1.08, 1.18); } }
.village .fx-fireglow { animation: fx-glow 0.5s ease-in-out infinite alternate, fx-fade 0.8s 4.2s forwards; }
@keyframes fx-glow { from { opacity: 0.25; } to { opacity: 0.5; } }
.village .fx-smoke { opacity: 0; animation: fx-rise 2.6s ease-out forwards; }
@keyframes fx-rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: translate(var(--dx), -34px) scale(1.8); opacity: 0; }
}
.village .house image { transition: filter 3s ease; }
.village .house.burnt image { filter: brightness(0.32) saturate(0.25) sepia(0.5); }
.village .fx-splat { transform-box: fill-box; transform-origin: center; animation: fx-pop 0.3s var(--d, 0s) ease-out both, fx-fade 2s 9.5s forwards; }
@keyframes fx-pop { from { transform: scale(0); } to { transform: scale(1); } }
.village .fx-glint { opacity: 0; animation: fx-glint 0.6s 0.2s ease-out; }
@keyframes fx-glint { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
.village .fx-mist { opacity: 0; animation: fx-mist 4.6s ease-out forwards; }
.village .fx-mist.big { animation-duration: 4.8s; }
@keyframes fx-mist {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  25% { opacity: 0.45; }
  100% { transform: translate(var(--dx), -12px) scale(1.5); opacity: 0; }
}
.village .fx-crack { stroke-dasharray: 40; stroke-dashoffset: 40; animation: fx-draw 0.25s var(--d, 0s) ease-out forwards, fx-fade 1.5s 7s forwards; }
.village .fx-coin { animation: fx-coin 1.4s cubic-bezier(0.2, 0.8, 0.4, 1) both; }
@keyframes fx-coin {
  0% { transform: translate(0, 0); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.6), var(--dy)); }
  100% { transform: translate(var(--dx), 8px); opacity: 0; }
}
.village .fx-flash { transform-box: fill-box; transform-origin: center; animation: fx-flash 0.35s ease-out both; }
@keyframes fx-flash { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.village .fx-ghost { animation: fx-ghost 3.4s ease-out both; }
@keyframes fx-ghost {
  0% { transform: translate(0, 4px); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translate(6px, -36px); opacity: 0; }
}
/* a body the mezarcı cleaned lies under a sheet */
.village .vsheet { display: none; }
.village .vchar.cleaned .vsheet { display: inline; }
.village .vchar.cleaned .vsway > image,
.village .vchar.cleaned .vx,
.village .vchar.cleaned .vskull { display: none; }

/* --- village: public events --- */
.village .fx-ray { transform-box: view-box; animation: fx-ray 1.6s ease-out both; }
@keyframes fx-ray { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.village .fx-seal { transform-box: fill-box; transform-origin: center; animation: fx-seal 1.2s cubic-bezier(0.2, 1.6, 0.4, 1) both, fx-fade 0.8s 1.8s forwards; }
@keyframes fx-seal { from { transform: scale(0); } to { transform: scale(1); } }
.village .crest { animation: fx-crest 3s ease-in-out infinite; }
@keyframes fx-crest { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.village .fx-sweep { animation: fx-sweep 3s ease-in-out both; }
@keyframes fx-sweep { 0% { opacity: 0; transform: translateX(-200px); } 50% { opacity: 0.4; } 100% { opacity: 0; transform: translateX(200px); } }
.village #v-plague { transition: opacity 3s ease; }
.village.plague #v-plague { opacity: 0.1; }
.village.plague.night #v-plague { opacity: 0.22; }
.village .fx-q { fill: #e8e2ff; font-weight: 800; animation: fx-q 1.6s ease-in both; transform-box: fill-box; transform-origin: center; }
.village .fx-r { opacity: 0; animation: fx-r 1.6s 1.2s ease-out both; transform-box: fill-box; transform-origin: center; }
@keyframes fx-q { 0% { opacity: 0; transform: rotate(-180deg) scale(0.3); } 40% { opacity: 1; transform: rotate(0) scale(1); } 100% { opacity: 0; transform: rotate(360deg) scale(0.2); } }
@keyframes fx-r { 0% { opacity: 0; transform: scale(0.2); } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.village #v-celestial .wolf { opacity: 0; transition: opacity 1.5s ease; }
.village.wolfmoon #v-celestial .wolf { opacity: 1; }
.village .wolf .howl { opacity: 0; transform-box: fill-box; transform-origin: center; }
.village.wolfmoon .wolf .howl { animation: fx-howl 3.2s ease-out infinite; }
.village.wolfmoon .wolf .howl.h2 { animation-delay: 1.1s; }
@keyframes fx-howl { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(5); opacity: 0; } }

/* --- village: finale --- */
.village .fx-finale { pointer-events: none; }
.village .fx-tint { opacity: 0; animation: fx-tint 2s ease forwards; }
.village .fx-tint.sun { animation-name: fx-tint-sun; }
.village .fx-tint.dark { animation-name: fx-tint-dark; }
.village .fx-tint.blood { animation-name: fx-tint-blood; }
@keyframes fx-tint-blood { to { opacity: 0.42; } }
@keyframes fx-tint { to { opacity: 0.28; } }
@keyframes fx-tint-sun { to { opacity: 0.16; } }
@keyframes fx-tint-dark { to { opacity: 0.45; } }
.village .fx-sunray { opacity: 0; animation: fx-sunray 4s ease-in-out infinite alternate; }
@keyframes fx-sunray { from { opacity: 0.05; } to { opacity: 0.3; } }
.village .fx-confetti { animation: fx-confetti linear infinite; }
@keyframes fx-confetti { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--dx), 360px) rotate(540deg); } }
.village .fx-haha { font: 900 15px Georgia, serif; fill: #f5d0fe; stroke: #4a044e; stroke-width: 1.5px; paint-order: stroke; animation: fx-haha 1.2s ease-in-out infinite alternate; }
@keyframes fx-haha { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.village .fx-winner { font-size: 64px; opacity: 0; animation: fx-winner 1.6s 0.6s ease-out forwards; }
@keyframes fx-winner { from { opacity: 0; transform: scale(0.4); } to { opacity: 0.95; transform: scale(1); } }
.village .fx-winner { transform-box: fill-box; transform-origin: center; }
.village .vchar.cheer .vsway { animation: fx-cheer 0.5s ease-in-out infinite alternate !important; }
@keyframes fx-cheer { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* --- private overlays --- */
.fx-overlay .fx-card {
  background: linear-gradient(170deg, #2a2140, #171225);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 22px 14px;
  max-width: 320px;
  text-align: center;
  animation: fx-card-in 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  box-shadow: 0 0 50px -10px var(--fx-c, #8b5cf6);
}
@keyframes fx-card-in { from { transform: scale(0.6) translateY(20px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fx-overlay.fx-green { --fx-c: #3ddc84; }
.fx-overlay.fx-pink { --fx-c: #f472b6; }
.fx-overlay.fx-purple { --fx-c: #a78bfa; }
.fx-overlay.fx-gold { --fx-c: #fbbf24; }
.fx-overlay.fx-red { --fx-c: #ff3f5e; }
.fx-overlay.fx-teal { --fx-c: #5fd3c6; }
.fx-overlay.fx-steel { --fx-c: #cbd5e1; }
.fx-art { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 56px; position: relative; }
.fx-title { font-size: 1.25em; font-weight: 800; margin: 8px 0 6px; color: var(--ink); }
.fx-text { font-size: 0.95em; color: var(--ink-soft); line-height: 1.45; }
.fx-shield { width: 76px; animation: fx-shield 1.4s ease-out both; filter: drop-shadow(0 0 14px #3ddc84); }
@keyframes fx-shield { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.15); opacity: 1; } 70% { transform: scale(0.95); } 100% { transform: scale(1); } }
.fx-kiss { animation: fx-kiss 1s ease-out both; }
@keyframes fx-kiss { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(0.9) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.fx-strings { width: 84px; animation: fx-dangle 1.6s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes fx-dangle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.fx-role-pop { position: absolute; right: 20px; bottom: 4px; font-size: 38px; animation: fx-kiss 0.9s 0.5s ease-out both; }
.fx-duel { display: flex; align-items: center; gap: 14px; font-size: 48px; }
.fx-vs { font-size: 16px; font-weight: 900; color: var(--accent-2); }
.fx-hand { display: inline-block; animation: fx-shake 0.32s ease-in-out 3; }
.fx-hand.right { transform: scaleX(-1); animation-name: fx-shake-r; }
@keyframes fx-shake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes fx-shake-r { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-16px); } }
.fx-coins-rain { animation: fx-kiss 0.8s ease-out both; letter-spacing: -8px; }
.fx-flipcard { width: 74px; height: 92px; position: relative; perspective: 600px; }
.fx-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 2px solid var(--fx-c); background: #1d1729; backface-visibility: hidden; font-size: 44px; }
.fx-face.front { animation: fx-flip-front 1.4s 0.4s ease-in-out both; }
.fx-face.back { transform: rotateY(180deg); animation: fx-flip-back 1.4s 0.4s ease-in-out both; }
@keyframes fx-flip-front { to { transform: rotateY(-180deg); } }
@keyframes fx-flip-back { to { transform: rotateY(0); } }
.fx-ball { width: 84px; height: 84px; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 35% 30%, #e9d8ff 0%, #8b5cf6 35%, #2e1065 80%); box-shadow: 0 0 30px #8b5cf6; animation: fx-ball 2s ease-in-out infinite alternate; }
.fx-ball-glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, transparent 70%); animation: fx-ball-glow 1.2s ease-in-out infinite alternate; }
.fx-ball-mist { position: absolute; inset: -20%; background: conic-gradient(from 0deg, transparent, #c4b5fd55, transparent, #f0abfc55, transparent); animation: fx-spin 2.4s linear infinite; }
@keyframes fx-ball { from { box-shadow: 0 0 18px #8b5cf6; } to { box-shadow: 0 0 44px #c084fc; } }
@keyframes fx-ball-glow { from { opacity: 0.3; } to { opacity: 0.9; } }
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-seer .fx-text { animation: fx-reveal 0.6s 1.2s ease-out both; font-size: 1.1em; }
@keyframes fx-reveal { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
.fx-eye { width: 96px; }
.fx-eye .lid { animation: fx-lid 1s 0.3s ease-in-out both; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes fx-lid { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.fx-eye .iris { animation: fx-look 2.4s 1.2s ease-in-out infinite alternate; }
@keyframes fx-look { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.fx-spy .fx-text { animation: fx-reveal 0.6s 1s ease-out both; }
.fx-vest { width: 72px; animation: fx-vest 1s cubic-bezier(0.2, 1.4, 0.4, 1) both; filter: drop-shadow(0 0 12px #cbd5e1); }
@keyframes fx-vest { from { transform: translateY(-60px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- role card flip --- */
.role-card.flip-in { position: relative; animation: rc-flip 1.3s var(--fd, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.role-card.flip-in::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  font-weight: 800;
  border-radius: 20px;
  color: #d9c48a;
  background: repeating-linear-gradient(45deg, #2a2040 0 12px, #221a35 12px 24px);
  animation: rc-back 1.3s var(--fd, 0ms) both;
}
.role-card.flip-in .role-emoji { animation: rc-pop 0.7s calc(0.85s + var(--fd, 0ms)) cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes rc-flip {
  0% { transform: perspective(900px) rotateY(180deg) scale(0.85); }
  60% { transform: perspective(900px) rotateY(-12deg) scale(1.03); }
  100% { transform: perspective(900px) rotateY(0) scale(1); }
}
@keyframes rc-back { 0%, 38% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rc-pop { from { transform: scale(0.2); } to { transform: scale(1); } }
.role-card.glow-vampir { animation: rc-glow-v 2.6s ease-in-out infinite alternate; }
.role-card.glow-koylu { box-shadow: 0 0 34px -10px #3ddc84; }
.role-card.glow-nk { box-shadow: 0 0 34px -8px #fb923c; }
.role-card.glow-notr { box-shadow: 0 0 34px -8px #5fd3c6; }
.role-card.glow-vampir.flip-in { animation: rc-flip 1.3s var(--fd, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) both, rc-glow-v 2.6s 1.3s ease-in-out infinite alternate; }
@keyframes rc-glow-v { from { box-shadow: 0 0 20px -10px #ff3f5e; } to { box-shadow: 0 0 46px -6px #ff3f5e; } }

/* ================= cleaner, livelier village ================= */
.village-frame {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #5a4a30;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  background: #2a2410;
}
#village .village-frame svg.village {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: 356 / 300;
  transform-origin: 0 0;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
@media (max-width: 480px) {
  #village {
    padding: 6px 6px 0;
  }
}
/* ---------- village text: one set of names, badges and bubbles, readable on a phone ---------- */
/* emoji inside SVG <text> fall back to a colour-emoji font instead of empty boxes (Android / Windows) */
:root {
  --font-scene: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Android Emoji", "EmojiSymbols";
}
.village text {
  font-family: var(--font-scene);
}
.village .house-name,
.village .vlabel {
  fill: #f3ead4;
  stroke: #1b1410;
  paint-order: stroke;
  pointer-events: none;
}
.village .house-name {
  font: 800 9.5px var(--font-scene);
  stroke-width: 2.8px;
}
.village .vlabel {
  font: 800 9px var(--font-scene);
  stroke-width: 2.6px;
}
.village .house-name.you,
.village .vlabel.you {
  fill: #ffd23f;
}
.village .house-name.dead {
  fill: #b8b2a4;
}
.village .vtop.hanging .vlabel {
  display: none;
}
.village .vtop.label-low .vlabel {
  transform: translateY(46px);
}
.village .vbadge-n {
  font: 800 8px var(--font-scene);
  fill: #fff;
}
.village .vbubble-t {
  font: 700 7.6px var(--font-scene);
  fill: #1b1410;
}
/* villagers turn, talk */
.village .vchar .vsway > image {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleX(var(--flip, 1));
  transition: transform 0.45s ease;
}
.village .vchar.flip {
  --flip: -1;
}
.village .vchar.talk .vsway > image {
  animation: v-talk 0.55s ease-out;
}
@keyframes v-talk {
  0%, 100% { transform: scaleX(var(--flip, 1)) translateY(0); }
  35% { transform: scaleX(var(--flip, 1)) translateY(-3.5px); }
}
/* votes light a ring under the target */
.village .vring {
  opacity: 0;
  transition: opacity 0.4s ease, stroke-width 0.4s ease;
  filter: drop-shadow(0 0 2px #ff3b4e);
}
/* day: drifting cloud shadows and birds; night: fireflies */
.village .cloud {
  opacity: 0.1;
  animation: v-cloud 70s linear infinite;
}
.village .cloud.c2 { animation-duration: 95s; animation-delay: -40s; }
.village .cloud.c3 { animation-duration: 55s; animation-delay: -20s; }
@keyframes v-cloud { from { transform: translateX(-120px); } to { transform: translateX(520px); } }
.village.night #v-clouds { opacity: 0; }
#v-clouds { transition: opacity 2s ease; }
.village .bird { opacity: 0; animation: v-bird 22s linear infinite; }
.village .bird.b1 { animation-delay: 2s; }
.village .bird.b2 { animation-delay: 2.6s; }
.village .bird.b3 { animation-delay: 13s; }
@keyframes v-bird {
  0% { transform: translate(-20px, 70px); opacity: 0; }
  2% { opacity: 0.85; }
  30% { transform: translate(410px, 20px); opacity: 0.85; }
  31%, 100% { transform: translate(410px, 20px); opacity: 0; }
}
.village.night #v-birds { display: none; }
#v-fireflies { opacity: 0; transition: opacity 2s ease; }
.village.night #v-fireflies { opacity: 1; }
.village .firefly {
  filter: drop-shadow(0 0 2px #fff27a);
  animation: v-firefly ease-in-out infinite alternate;
}
@keyframes v-firefly {
  0% { transform: translate(0, 0); opacity: 0.1; }
  50% { opacity: 1; }
  100% { transform: translate(var(--fx), var(--fy)); opacity: 0.2; }
}
/* dawn and dusk sweep across the village */
#v-dawn.sweep { animation: v-dawn 3s ease-out; }
#v-dusk.sweep { animation: v-dusk 3.2s ease-in-out; }
@keyframes v-dawn { 0% { opacity: 0.55; transform: translateX(-60px); } 100% { opacity: 0; transform: translateX(60px); } }
@keyframes v-dusk { 0% { opacity: 0; } 40% { opacity: 0.45; } 100% { opacity: 0; } }

/* ================= role assignment (moderator) ================= */
.ra .ra-summary { display: flex; flex-direction: column; gap: 10px; }
.ra-stat { font-size: 0.95em; color: var(--ink-soft); }
.ra-stat strong { color: var(--ink); font-size: 1.15em; }
.ra-dot { margin: 0 4px; opacity: 0.6; }
.ra-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg-card-2); gap: 2px; }
.ra-seg { min-width: 6px; }
.ra-seg.team-vampir { background: var(--vampir); }
.ra-seg.team-nk { background: var(--nk, #fb923c); }
.ra-seg.team-notr { background: var(--notr, #5fd3c6); }
.ra-seg.team-koylu { background: #2f8f5a; }
.ra-legend { display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.85em; }
.ra-leg { padding: 2px 9px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border); }
.ra-leg.team-vampir { border-color: var(--vampir); }
.ra-leg.team-nk { border-color: var(--nk, #fb923c); }
.ra-leg.team-notr { border-color: var(--notr, #5fd3c6); }
.ra-leg.team-koylu { border-color: #2f8f5a; }
.ra-leg.zero { opacity: 0.4; }
.ra-auto { margin: 2px 0 0; }
.ra-plan > summary { cursor: pointer; font-size: 0.88em; color: var(--ink-soft); padding: 2px 0; }
.ra-plan[open] > summary { margin-bottom: 4px; }

.ra-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ra-row { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card-2); overflow: hidden; }
.ra-row.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ra-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; background: transparent; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ra-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: #1a1424; display: grid; place-items: center; }
.ra-avatar svg { width: 100%; height: 100%; }
.ra-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-pill { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.82em; font-weight: 700; white-space: nowrap; }
.ra-pill.team-koylu { background: #1f5c3a; color: #c8f5da; }
.ra-pill.team-vampir { background: #6b1d2c; color: #ffd0d8; }
.ra-pill.team-nk { background: #6b3410; color: #ffd9bf; }
.ra-pill.team-notr { background: #12514b; color: #c6f6ef; }
.ra-pill-empty { background: transparent; border: 1px dashed var(--border); color: var(--ink-soft); font-weight: 600; }
.ra-pill-empty small { font-weight: 400; opacity: 0.8; }
.ra-chev { flex: none; color: var(--ink-soft); font-size: 0.8em; width: 12px; text-align: center; }

.ra-picker { padding: 4px 10px 10px; border-top: 1px solid var(--border); animation: ra-open 0.18s ease-out; }
@keyframes ra-open { from { opacity: 0; transform: translateY(-4px); } }
.ra-hint { margin: 8px 0 2px; font-size: 0.85em; color: var(--ink-soft); }
.ra-group { margin-top: 8px; }
.ra-group-title { margin: 0 0 5px; font-size: 0.75em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ra-group-title.team-koylu { color: #a6f0c1; }
.ra-group-title.team-vampir { color: #ff9aac; }
.ra-group-title.team-nk { color: #ffc29a; }
.ra-group-title.team-notr { color: #8ff0e4; }
.ra-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.ra-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px 6px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink); font: inherit; cursor: pointer; transition: transform 0.1s; }
.ra-tile:active { transform: scale(0.95); }
.ra-tile-emoji { font-size: 1.35em; line-height: 1.1; }
.ra-tile-name { font-size: 0.72em; font-weight: 600; line-height: 1.15; text-align: center; }
.ra-tile.team-koylu { border-color: #2f8f5a66; }
.ra-tile.team-vampir { border-color: #e4576e66; }
.ra-tile.team-nk { border-color: #fb923c66; }
.ra-tile.team-notr { border-color: #5fd3c666; }
.ra-tile.selected.team-koylu { background: #1f5c3a; border-color: #4fd08a; }
.ra-tile.selected.team-vampir { background: #6b1d2c; border-color: var(--vampir); }
.ra-tile.selected.team-nk { background: #6b3410; border-color: var(--nk, #fb923c); }
.ra-tile.selected.team-notr { background: #12514b; border-color: var(--notr, #5fd3c6); }
.ra-warn { margin-bottom: 10px; }
.ra-summary .role-chips { gap: 5px; }
.ra-summary .role-chip { padding: 3px 9px; font-size: 0.78em; }
.ra-list h3 { margin-bottom: 4px; }
.ra-list .ra-sub { margin: 0 0 10px; font-size: 0.85em; color: var(--ink-soft); text-align: left; }
.ra-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.ra-tile { padding: 6px 2px 5px; border-radius: 9px; }
.ra-tile-emoji { font-size: 1.15em; }
.ra-tile-name { font-size: 0.66em; }
.ra-group { margin-top: 6px; }
.ra-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.ra-tile { padding: 6px 1px 5px; }
.ra-tile-name { font-size: 0.62em; hyphens: auto; overflow-wrap: anywhere; }
.ra-picker { padding: 2px 8px 10px; }

/* unlock-link result, shown once on top of the landing page */
.unlock-note { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 300; width: min(420px, calc(100% - 32px)); padding: 12px 14px; border-radius: 12px; font-size: 0.9em; line-height: 1.4; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7); animation: unlock-in 0.3s ease-out; cursor: pointer; }
.unlock-note.ok { background: #14432c; border: 1px solid #3fbf7a; color: #d6f8e4; }
.unlock-note.bad { background: #4a1420; border: 1px solid #e4576e; color: #ffd6dd; }
@keyframes unlock-in { from { opacity: 0; transform: translate(-50%, -10px); } }

/* ================= bigger screens: tablet and computer ================= */
/* tablet: one column, just roomier */
@media (min-width: 640px) and (max-width: 979px) {
  #village { max-width: 600px; }
  #app, #panel, .inapp-banner { max-width: 560px; }
}
/* computer / big screen: the village fills the left, the game sits beside it */
@media (min-width: 980px) {
  body:has(#village:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    grid-template-areas:
      "banner banner"
      "village app"
      "village panel";
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 28px 0;
    box-sizing: border-box;
    align-items: start;
  }
  body:has(#village:not([hidden])) .inapp-banner { grid-area: banner; max-width: none; }
  body:has(#village:not([hidden])) #village {
    grid-area: village;
    position: sticky;
    top: 18px;
    /* as big as fits: the whole square stays on screen without scrolling */
    width: min(100%, calc((100vh - 40px) * 356 / 300));
    max-width: none;
    margin: 0 auto;
    padding: 0;
  }
  body:has(#village:not([hidden])) #app { grid-area: app; width: 100%; max-width: none; padding: 0 0 8px; box-sizing: border-box; }
  body:has(#village:not([hidden])) #panel { grid-area: panel; width: 100%; max-width: none; padding: 0 0 24px; box-sizing: border-box; }
}

/* ================= join QR ================= */
.qr-box { display: block; width: 190px; margin: 4px auto 8px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #fff; cursor: zoom-in; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.8); }
.qr-svg { display: block; width: 100%; height: auto; }
.qr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qr-actions .btn { margin: 0; }
.qr-full { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(10, 6, 16, 0.92); animation: unlock-in 0.2s ease-out; cursor: zoom-out; }
.qr-full-card { text-align: center; width: min(560px, 100%); }
.qr-full-title { margin: 0 0 14px; font-size: clamp(20px, 4vw, 34px); font-weight: 800; color: #fbbf24; }
.qr-full-code { width: min(70vh, 100%); margin: 0 auto; border-radius: 20px; overflow: hidden; background: #fff; }
.qr-full-room { margin: 14px 0 4px; font-size: clamp(18px, 3.4vw, 30px); color: var(--ink); }
.qr-full-room strong { letter-spacing: 6px; color: #fbbf24; }

/* ================= roles added in the second ToS round ================= */
.badge-role.gardiyan, .badge-role.gozcu, .badge-role.izci, .badge-role.koruma, .badge-role.dansci, .badge-role.diriltici, .badge-role.medyum { background: linear-gradient(135deg, #3ddc84, #1f8f55); color: #06210f; }
.badge-role.santajci, .badge-role.karalayici { background: linear-gradient(135deg, var(--vampir), #b0233b); color: white; }
.role-card.gardiyan, .role-card.gozcu, .role-card.izci, .role-card.koruma, .role-card.dansci, .role-card.diriltici, .role-card.medyum { background: linear-gradient(160deg, #14432c90, #1d1729); border: 1px solid #3ddc84; }
.role-card.santajci, .role-card.karalayici { background: linear-gradient(160deg, var(--vampir-soft), #1d1729); border: 1px solid var(--vampir); }

/* role-assign: is the deal fair? */
.ra-balance { border-color: #d9a441; background: linear-gradient(160deg, #3a2a0e, var(--bg-card)); }
.ra-balance h3 { color: #fbbf24; }
.ra-balance ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9em; line-height: 1.4; }
.ra-balance li.bad { color: #ffb4bf; font-weight: 700; }
.ra-balance li.warn { color: #ffe0a3; }
.ra-balance li.tip { color: var(--ink-soft); }

/* ================= village: sky clock, ropes, pennants, ribbon, reactions ================= */
.village-frame { position: relative; }
/* the sun / moon glides along its arc as the phase timer runs */
.village #v-sky { transition: transform 1s linear; }
/* a public role without a costume: a pennant over the head */
.village .vmedal { filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, 0.7)); }
.village .vmedal-e { font-size: 7.4px; }
.village .vtop.lying .vmedal { transform: translate(-6px, -19px) scale(1.25); }
/* day-time emoji reactions pop over the head */
.village .vreact-e { font-size: 14px; transform-box: fill-box; transform-origin: 50% 100%; animation: v-react 2s ease-out forwards; }
@keyframes v-react {
  0% { opacity: 0; transform: translateY(4px) scale(0.3); }
  15% { opacity: 1; transform: translateY(0) scale(1.2); }
  25% { transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-12px) scale(1); }
}
/* vote ropes: draw from the voter to the target, then stay */
.village #v-ropes { pointer-events: none; }
.village .vrope-draw { stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: v-rope-draw 0.7s ease-out forwards; }
@keyframes v-rope-draw { to { stroke-dashoffset: 0; } }
.village .vrope-under { stroke: #2a0309; stroke-width: 2.4; opacity: 0.45; stroke-linecap: round; }
.village .vrope-line { stroke: #ff3b4e; stroke-width: 1.2; stroke-dasharray: 3 2; stroke-linecap: round; }
.village .vrope-knot { fill: #ff3b4e; stroke: #2a0309; stroke-width: 0.6; opacity: 0; animation: v-knot-in 0.25s 0.6s ease-out forwards; }
@keyframes v-knot-in { to { opacity: 1; } }
.village .vrope.heavy .vrope-line { stroke-width: 2; }
.village .vrope.mine .vrope-line { stroke: #ffd23f; }
.village .vrope.mine .vrope-knot { fill: #ffd23f; }
.village #v-ropes.many .vrope-line { stroke-width: 0.9; }
.village #v-ropes.many .vrope { opacity: 0.7; }
.village #v-ropes.many .vrope.mine { opacity: 1; }
/* the scales of justice at the verdict */
.village .vs-n { font: 800 5.4px var(--font-scene); paint-order: stroke; stroke: #1b1410; stroke-width: 1.6px; }
.village .vs-pan.guilty .vs-n { fill: #ff8b9a; }
.village .vs-pan.innocent .vs-n { fill: #8ff0b8; }
.village #v-scale { animation: v-scale-in 0.5s ease-out both; }
@keyframes v-scale-in { from { opacity: 0; } }
/* team finales */
.village.finale-vampir .hl .glint { opacity: 1; fill: #ff3040; animation: v-flicker 1.6s ease-in-out infinite; }
.village.finale-vampir .hl .wglow { opacity: 0.9; fill: url(#v-glow-red); }
.village.finale-koylu #v-noose { opacity: 0 !important; }
.village.finale-koylu #v-rope { transform: scaleY(0.07) !important; }
.village .fx-ropefall { animation: v-ropefall 1.5s 0.6s cubic-bezier(0.5, 0, 0.9, 0.5) both; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes v-ropefall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(46px) rotate(70deg); opacity: 0; }
}
.village .fx-snap { opacity: 0; animation: fx-glint 0.5s 0.55s ease-out; }
.village .fx-dawn { opacity: 0; animation: v-dawnsky 3s ease-out forwards; }
@keyframes v-dawnsky { to { opacity: 1; } }

/* HTML overlays on the village frame (the camera never zooms them) */
.v-ribbon {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}
.v-ribbon span {
  display: block;
  padding: 8px 34px 9px;
  white-space: nowrap;
  font: 900 clamp(17px, 5.4vw, 30px) / 1.1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  color: #3a210c;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.7);
  background: linear-gradient(180deg, #f6e3b4 0%, #e6c98a 55%, #caa565 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%, 16px 50%);
  box-shadow: inset 0 -3px 0 rgba(122, 83, 38, 0.45), inset 0 2px 0 rgba(255, 250, 230, 0.6);
}
.v-ribbon.show { animation: v-ribbon 1.6s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes v-ribbon {
  0% { opacity: 0; transform: translate(-150%, -50%) rotate(-2deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); }
  78% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); }
  100% { opacity: 0; transform: translate(60%, -50%) rotate(-2deg); }
}
.v-paused {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(18, 14, 26, 0.85);
  border: 1px solid var(--accent-2);
  color: var(--accent-2);
  font-weight: 800;
  font-size: 0.85em;
  pointer-events: none;
}
/* emoji reaction bar, floating over the bottom of the village for the living by day */
.react-bar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(18, 14, 26, 0.78);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.8);
}
.react-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 21px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-scene);
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.react-btn:active { transform: scale(0.88); }
.react-btn:disabled { opacity: 0.4; }
.react-btn.on { background: var(--accent); border-color: var(--accent-2); }

/* ================= moderator clock, lobby phase lengths, söz sırası ================= */
.timer.paused strong { color: var(--accent-2); }
.mod-clock { display: flex; gap: 8px; margin: 10px 0 0; }
.mod-clock .btn { flex: 1; margin: 0; }
.timing-card .timing-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; flex-wrap: wrap; }
.timing-card .timing-label { flex: 1 0 104px; font-weight: 700; font-size: 0.92em; }
.timing-seg { display: flex; flex: 1 1 200px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.timing-seg button { flex: 1; padding: 7px 4px; border: 0; background: var(--bg-card-2); color: var(--ink); font: inherit; font-size: 0.82em; cursor: pointer; line-height: 1.2; }
.timing-seg button + button { border-left: 1px solid var(--border); }
.timing-seg button.on { background: var(--accent); color: #1a1204; font-weight: 800; }
.timing-seg button small { display: block; opacity: 0.75; font-size: 0.85em; }
.timing-seg button:disabled { cursor: default; }
.speak-queue ol { margin: 6px 0 8px; padding-left: 22px; }
.speak-queue li { margin: 4px 0; }
.speak-queue li > div { display: flex; align-items: center; gap: 8px; }
.speak-queue li span { flex: 1; }
.speak-remove { border: 1px solid var(--border); background: var(--bg-card-2); color: var(--ink-soft); border-radius: 8px; padding: 2px 8px; cursor: pointer; }

/* ================= "Bu gece kim ölecek?" ================= */
.guess-card h3 { margin-bottom: 4px; }
.guess-card .target-btn.selected { border-color: var(--falci-pick); box-shadow: 0 0 0 1px var(--falci-pick) inset; background: rgba(139, 92, 246, 0.18); }

/* ================= game over: story, kâhin, session board ================= */
.story-step { border: 1px solid var(--border); border-radius: 12px; margin: 6px 0; background: rgba(255, 255, 255, 0.03); }
.story-step > summary { cursor: pointer; padding: 9px 12px; list-style: none; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.story-step > summary::-webkit-details-marker { display: none; }
.story-step > summary::before { content: "▸"; color: var(--ink-soft); }
.story-step[open] > summary::before { content: "▾"; }
.story-step > summary small { margin-left: auto; font-weight: 500; color: var(--ink-soft); text-align: right; }
.story-night { border-left: 3px solid #6d5bd0; }
.story-day { border-left: 3px solid var(--accent-2); }
.story-lines { padding: 0 12px 10px 14px; font-size: 0.9em; line-height: 1.5; }
.story-line { padding: 2px 0; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); }
.story-line:last-child { border-bottom: 0; }
.story-line.death { color: #ffb4bf; font-weight: 700; }
.story-line.sub { color: var(--ink-soft); font-size: 0.92em; padding-left: 10px; }
.kahin-card { text-align: center; background: linear-gradient(160deg, #2b1d52, var(--bg-card)); border-color: #8b5cf6; }
.kahin-badge { display: inline-block; margin: 4px 0; padding: 4px 12px; border-radius: 999px; background: #8b5cf6; color: #fff; font-weight: 800; }
.titles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.title-chip { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--bg-card-2); border: 1px solid var(--border); font-size: 0.9em; }
.title-chip b { color: var(--accent-2); white-space: nowrap; }
.title-chip span { margin-left: auto; color: var(--ink-soft); text-align: right; }
.board { list-style: none; margin: 0; padding: 0; }
.board li { display: grid; grid-template-columns: 26px 1fr auto; gap: 2px 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.board li:last-child { border-bottom: 0; }
.board .rank { font-weight: 800; color: var(--ink-soft); text-align: center; }
.board .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .wins { font-weight: 800; color: var(--accent-2); white-space: nowrap; }
.board .stats { grid-column: 2 / 4; font-size: 0.8em; color: var(--ink-soft); }
.board li.me .who { color: #ffd23f; }

/* ================= 📺 sunum ekranı (Zoom presentation layout) ================= */
body.presentation #howto-fab,
body.presentation #panel { display: none !important; }
.pres { text-align: center; }
.pres-phase { margin: 6px 0 2px; font-size: clamp(26px, 6vw, 44px); font-weight: 900; letter-spacing: 0.02em; }
.pres-sub { color: var(--ink-soft); margin: 0 0 8px; font-size: 1.05em; }
.pres-count { font: 900 clamp(48px, 13vw, 96px) / 1 ui-monospace, "SF Mono", Consolas, monospace; color: var(--accent-2); margin: 6px 0 12px; text-shadow: 0 4px 24px rgba(251, 191, 36, 0.35); }
.pres-count.paused { font-size: clamp(26px, 6vw, 40px); }
.pres-votes { text-align: left; }
.pres-vote { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 8px 0; font-size: 1.15em; font-weight: 700; }
.pres-bar { grid-column: 1 / 3; height: 10px; border-radius: 999px; background: var(--bg-card-2); overflow: hidden; }
.pres-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c0182f, #ff3f5e); border-radius: 999px; transition: width 0.4s ease; }
.pres-vote.hot .pres-bar i { background: linear-gradient(90deg, #d97706, #fbbf24); }
.pres .banner { font-size: 1.15em; }
.pres-code { font: 900 clamp(40px, 12vw, 80px) / 1 ui-monospace, Consolas, monospace; letter-spacing: 0.18em; color: var(--accent-2); }
.pres .qr-box { width: min(260px, 70vw); cursor: default; }
.pres-names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.pres-names span { padding: 4px 10px; border-radius: 999px; background: var(--bg-card-2); border: 1px solid var(--border); }
@media (min-width: 980px) {
  body.presentation:has(#village:not([hidden])) { grid-template-columns: minmax(0, 1fr) 400px; }
  body.presentation:has(#village:not([hidden])) #village { width: min(100%, calc((100vh - 30px) * 356 / 300)); }
}

/* ================= reduced motion: no slides, springs, drawing or popping ================= */
@media (prefers-reduced-motion: reduce) {
  .v-ribbon.show { animation: v-ribbon-still 1.6s linear both; }
  .village #v-sky { transition: none; }
  .village .vrope-draw { animation: none; stroke-dashoffset: 0; }
  .village .vrope-knot { animation: none; opacity: 1; }
  .village .vreact-e { animation: v-react-still 2s linear forwards; }
  .village .fx-ropefall { animation: none; opacity: 0; }
  .village .hl .glint,
  .village.night .hl.on .glint,
  .village.finale-vampir .hl .glint { animation: none; }
  .village .cloud,
  .village .firefly,
  .village .fx-confetti,
  .village .fx-bat.rise { animation: none; }
  .village .bird { animation: none; opacity: 0; }
  .village #v-scale,
  .pres-bar i { animation: none; transition: none; }
  #village .village-frame svg.village { transition: none; }
}
@keyframes v-ribbon-still { 0%, 100% { opacity: 0; transform: translate(-50%, -50%); } 10%, 85% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes v-react-still { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }