body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at center, #251019 0%, #09080b 60%, #030204 100%);
  color: #efe8df;
  font-family: Georgia, "Times New Roman", serif;
}

.hidden {
  display: none !important;
}

.landing-page,
#app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.landing-content,
.panel {
  width: min(700px, 94vw);
  text-align: center;
  padding: 28px;
  background: rgba(8, 6, 10, 0.82);
  border: 1px solid rgba(214, 168, 79, 0.28);
  border-radius: 24px;
  box-shadow: 0 0 70px rgba(0,0,0,.65);
}

h1 {
  letter-spacing: .12em;
  font-size: clamp(2.4rem, 7vw, 5rem);
  margin-bottom: 6px;
}

h2,
.tagline,
.prove-it,
strong {
  color: #d6a84f;
}

p {
  line-height: 1.45;
}

label {
  display: block;
  text-align: left;
  margin-top: 14px;
  color: #a99699;
  text-transform: uppercase;
  font-size: .8rem;
}

input {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  box-sizing: border-box;
}

button {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #9d1723;
  color: white;
  cursor: pointer;
  letter-spacing: .08em;
}

button.secondary {
  background: #342332;
}

#connectionStatus,
#roomResult {
  color: #d6a84f;
}
.lobby-panel {
  margin-top: 20px;
}

.lobby-label {
  margin: 0;
  color: #a99699;
  font-size: .8rem;
  letter-spacing: .12em;
}

.room-code-display {
  margin: 8px auto 12px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.45);
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  color: #d6a84f;
  font-size: 2rem;
  letter-spacing: .16em;
}

.player-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.player-row {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.late-join-waiting-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  text-align: center;
}

.late-join-waiting-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.late-join-waiting-panel p {
  line-height: 1.45;
}

.pending-join-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.pending-join-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.pending-join-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pending-join-row {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.pending-join-name {
  color: #efe8df;
  font-weight: bold;
  margin-bottom: 8px;
}

.pending-join-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pending-join-actions button {
  margin-top: 0;
  padding: 10px;
  font-size: .75rem;
}

#startGameBtn {
  margin-top: 18px;
  background: #9d1723;
}
.game-room-panel {
  margin-top: 22px;
}

.game-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.game-status-row > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.small-label {
  display: block;
  color: #a99699;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.room-table {
  position: relative;
  min-height: 280px;
  margin-top: 18px;
  border-radius: 50%;
  border: 2px solid rgba(214,168,79,.3);
  background: radial-gradient(circle, #3b1c20 0%, #160b0f 62%, transparent 63%);
  box-shadow: inset 0 0 50px rgba(0,0,0,.7);
}

.table-center-text {
  position: absolute;
  inset: 42% 0 auto;
  text-align: center;
  color: #d6a84f;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.room-player-list {
  position: absolute;
  inset: 0;
}

.room-player-seat {
  position: absolute;
  width: 100px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: .85rem;
}

.raven-box {
  margin-top: 18px;
  padding: 14px;
  border-left: 4px solid #9d1723;
  background: rgba(0,0,0,.3);
}
.role-text {
  font-size: .9rem;
  font-weight: normal;
  letter-spacing: .02em;
  color: #efe8df;
  margin-top: 8px;
  line-height: 1.4;
}

.role-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(214,168,79,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.role-instruction-box {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  text-align: left;
  font-size: .95rem;
  line-height: 1.45;
}

.role-instruction-box p {
  margin-bottom: 10px;
}
#phaseTimerDisplay {
  color: #d6a84f;
  font-size: 1.2rem;
}

.table-of-deception-panel,
.secret-messages-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: left;
}

.table-of-deception-panel h3,
.secret-messages-panel h3,
.raven-box h4 {
  margin-top: 0;
  color: #d6a84f;
  text-align: center;
}

.table-of-deception-messages {
  height: 180px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.32);
}

.table-of-deception-message {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.table-of-deception-name {
  color: #d6a84f;
  font-weight: bold;
}

.table-of-deception-text {
  margin-top: 3px;
  color: #efe8df;
  word-wrap: break-word;
}

.table-of-deception-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.table-of-deception-input-row input {
  margin: 0;
}

.table-of-deception-input-row button {
  width: auto;
  margin: 0;
  padding: 0 18px;
}

.raven-feed-list {
  margin-top: 12px;
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  font-size: .85rem;
}

.raven-feed-item {
  padding: 8px;
  margin-bottom: 6px;
  border-left: 3px solid rgba(214,168,79,.55);
  background: rgba(0,0,0,.24);
  color: #d7cfc8;
}

@media (max-width: 650px) {
  .game-status-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-of-deception-input-row {
    grid-template-columns: 1fr;
  }

  .table-of-deception-input-row button {
    width: 100%;
    padding: 13px;
  }
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.raven-side-panel {
  position: sticky;
  top: 14px;
}

.raven-box {
  margin-top: 0;
}

.raven-box h4 {
  color: #d6a84f;
  margin-bottom: 8px;
  text-align: center;
}

.table-side-panel {
  min-width: 0;
}

.raven-feed-list {
  max-height: 330px;
}

@media (max-width: 800px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .raven-side-panel {
    position: static;
    order: -1;
  }

  .raven-feed-list {
    max-height: 180px;
  }
}
.secret-messages-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.secret-unread-count {
  min-width: 24px;
  height: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #9d1723;
  color: #fff;
  font-size: .8rem;
  font-weight: bold;
  display: inline-grid;
  place-items: center;
}

.raven-role-reminder-btn {
  margin: 12px 0 14px;
  background: linear-gradient(180deg, #b7842f, #7a4d12);
  color: #120b05;
  border: 1px solid rgba(255, 226, 150, .55);
  box-shadow:
    0 0 18px rgba(214,168,79,.18),
    inset 0 0 12px rgba(255,255,255,.08);
  font-weight: bold;
  letter-spacing: .08em;
}

.raven-role-reminder-btn:hover {
  filter: brightness(1.08);
}

.secret-message-notice {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(214,168,79,.35);
  border-radius: 12px;
  background: rgba(157,23,35,.18);
  color: #d6a84f;
  text-align: center;
  font-style: italic;
}

.secret-message-form {
  margin-top: 12px;
}

.secret-message-form select,
.secret-message-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

.secret-message-form select {
  padding: 12px;
}

.secret-message-form textarea {
  min-height: 90px;
  padding: 12px;
  resize: vertical;
}

.secret-message-divider {
  height: 1px;
  margin: 16px 0;
  background: rgba(255,255,255,.12);
}

.secret-inbox-title {
  color: #d6a84f;
  text-align: center;
  margin: 8px 0 10px;
}

.secret-messages-inbox {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
}

.secret-message-card {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.26);
}

.secret-message-card.sealed {
  cursor: pointer;
  text-align: center;
}

.secret-message-sealed-title {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 6px;
}

.secret-message-sealed-meta {
  color: #a99699;
  font-size: .8rem;
}

.secret-message-card.unread {
  border-color: rgba(214,168,79,.45);
  background: rgba(214,168,79,.08);
}

.secret-message-from {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 5px;
}

.secret-message-text {
  color: #efe8df;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.secret-message-meta {
  margin-top: 8px;
  color: #a99699;
  font-size: .75rem;
}

.secret-message-card button {
  margin-top: 8px;
  padding: 9px;
  font-size: .75rem;
  background: #342332;
}

@media (max-width: 650px) {
  .secret-messages-inbox {
    max-height: 180px;
  }
}
.phase-control-panel,
.challenge-placeholder-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: center;
}

.phase-control-panel h3,
.challenge-placeholder-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.challenge-placeholder-panel {
  border-left: 4px solid #9d1723;
}
.challenge-waiting-box,
.active-challenge-box,
.challenge-result-box,
.challenge-host-controls {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.active-challenge-box h3,
.active-challenge-box h4,
.challenge-result-box h4 {
  color: #d6a84f;
  text-align: center;
}

.challenge-instructions,
.challenge-tiebreaker {
  text-align: left;
  line-height: 1.45;
}

.challenge-host-controls label {
  margin-top: 14px;
}

.challenge-host-controls select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}
.voting-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: center;
}

.voting-panel h3,
.vote-status-box h4,
.voting-result-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.voting-instruction-box,
.vote-form-box,
.vote-status-box,
.voting-result-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.vote-form-box select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

.vote-status-list {
  display: grid;
  gap: 8px;
  text-align: left;
}

.vote-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.08);
}

.vote-status-row.voted {
  border-color: rgba(214,168,79,.35);
}

.vote-status-name {
  color: #efe8df;
}

.vote-status-state {
  color: #d6a84f;
  font-size: .85rem;
}
.final-reveal-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: center;
}

.final-reveal-panel h3,
.final-winner-box h4,
.final-role-list-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.final-winner-box,
.final-role-list-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.final-role-list {
  display: grid;
  gap: 8px;
  text-align: left;
}

.final-role-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.final-role-row.soul {
  opacity: .65;
}

.final-role-name {
  color: #efe8df;
}

.final-role-value {
  color: #d6a84f;
  font-weight: bold;
}
.soul-collection-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(190, 38, 38, .4);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(120, 15, 15, .24), rgba(0,0,0,.38)),
    rgba(0,0,0,.34);
  text-align: center;
  box-shadow: 0 0 18px rgba(120, 15, 15, .18);
}

.soul-collection-panel h3 {
  color: #d6a84f;
  margin-top: 0;
  letter-spacing: .04em;
}

.soul-collection-panel p {
  line-height: 1.45;
}

#soulCollectionText {
  color: #efe8df;
  font-size: 1.02rem;
}

/* ================= HOST JOIN REQUEST ALERT V1 ================= */

.host-join-request-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.host-join-request-alert-overlay.hidden {
  display: none;
}

.host-join-request-alert-card {
  width: min(540px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .97), rgba(0, 0, 0, .97));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.host-join-request-alert-card h2 {
  color: #d6a84f;
  margin: 8px 0 12px;
  letter-spacing: .06em;
}

.host-join-request-alert-card p {
  line-height: 1.45;
}

.host-join-request-alert-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ================= SECRET MESSAGE ARRIVAL POPUP V1 ================= */

.secret-message-arrival-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.secret-message-arrival-overlay.hidden {
  display: none;
}

.secret-message-arrival-card {
  width: min(520px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.38);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .96), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 38px rgba(0,0,0,.75),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.secret-raven-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.secret-message-arrival-card h2 {
  color: #d6a84f;
  margin: 8px 0 12px;
  letter-spacing: .06em;
}

.secret-message-arrival-card p {
  line-height: 1.45;
}

.secret-message-read-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.secret-message-read-overlay.hidden {
  display: none;
}

.secret-message-read-card {
  width: min(560px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .97), rgba(0, 0, 0, .97));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.secret-message-read-card h3 {
  color: #d6a84f;
  margin: 8px 0 12px;
}

.secret-message-read-text {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  color: #efe8df;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ================= ROLE REVEAL FULL SCREEN OVERLAY ================= */

.role-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .94)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.role-reveal-overlay.hidden {
  display: none;
}

.role-reveal-card {
  width: min(720px, 92vw);
  padding: 32px 24px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .94), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 50px rgba(214, 168, 79, .18),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.role-reveal-card h2 {
  color: #d6a84f;
  font-size: clamp(2.6rem, 11vw, 5.6rem);
  letter-spacing: .1em;
  margin: 18px 0;
  text-transform: uppercase;
  white-space: pre-line;
}

.role-reveal-card h2.role-reveal-warning-title {
  color: #efe8df;
  font-size: clamp(2rem, 9vw, 4.4rem);
  letter-spacing: .08em;
}

.role-reveal-warning {
  color: #efe8df;
  font-style: italic;
  line-height: 1.45;
}

/* ================= DOCTOR DEATH FULL SCREEN OVERLAY ================= */

.doctor-death-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at center, rgba(130, 0, 0, .34), rgba(0, 0, 0, .95)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.doctor-death-overlay.hidden {
  display: none;
}

.doctor-death-card {
  width: min(720px, 92vw);
  padding: 28px;
  border: 1px solid rgba(214, 168, 79, .35);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(35, 0, 0, .9), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 40px rgba(120, 0, 0, .45),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.doctor-death-card h2 {
  color: #d6a84f;
  letter-spacing: .08em;
  margin-top: 0;
}

#doctorDeathText {
  color: #efe8df;
  font-size: 1.2rem;
  line-height: 1.5;
}

.doctor-death-raven-line {
  color: #aaa;
  font-style: italic;
  margin-top: 18px;
}

#closeDoctorDeathOverlayBtn {
  margin-top: 18px;
}

/* ================= END GAME DECISION PLACEHOLDER ================= */

.end-game-decision-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: center;
}

.end-game-decision-panel h3,
.end-game-decision-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.end-game-decision-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.end-game-decision-box p {
  line-height: 1.45;
}

/* ================= END GAME DECISION VOTING V1 ================= */

.end-game-vote-box,
.end-game-status-box,
.end-game-decision-result-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.end-game-vote-box h4,
.end-game-status-box h4,
.end-game-decision-result-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.end-game-vote-box button {
  margin: 6px;
}

.end-game-vote-status-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.end-game-vote-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.end-game-vote-status-row.voted {
  border-color: rgba(214,168,79,.35);
}

.end-game-vote-name {
  color: #efe8df;
}

.end-game-vote-state {
  color: #d6a84f;
  font-weight: bold;
}
/* ================= FINAL REVEAL POLISH V1 ================= */

.final-role-reveal-row {
  transition:
    opacity 0.75s ease,
    transform 0.75s ease,
    border-color 0.75s ease,
    background 0.75s ease;
}

.final-role-pending {
  opacity: 0;
  transform: translateY(10px);
}

.final-role-visible {
  opacity: 1;
  transform: translateY(0);
}

.final-role-deceiver {
  color: #ff5c5c;
  text-shadow: 0 0 10px rgba(157, 23, 35, .45);
}

.final-role-innocent {
  color: #d6a84f;
}

.final-role-row:has(.final-role-deceiver) {
  border-color: rgba(157, 23, 35, .42);
  background:
    linear-gradient(90deg, rgba(157, 23, 35, .18), rgba(0,0,0,.28));
}
/* ================= FINAL JUDGMENT OVERLAY V1 ================= */

.final-judgment-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .94)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-judgment-overlay.hidden {
  display: none !important;
}

.final-judgment-card {
  width: min(720px, 92vw);
  padding: 30px 24px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .96), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 52px rgba(214, 168, 79, .18),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.final-judgment-card h2 {
  color: #d6a84f;
  font-size: clamp(2.1rem, 8vw, 4.8rem);
  letter-spacing: .1em;
  margin: 14px 0 8px;
  text-transform: uppercase;
}

.final-judgment-card h3 {
  color: #efe8df;
  font-size: clamp(1.15rem, 4vw, 2rem);
  letter-spacing: .08em;
  margin: 8px 0 18px;
  text-transform: uppercase;
}

.final-judgment-body {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  color: #efe8df;
  font-size: 1.1rem;
  line-height: 1.5;
}

.final-judgment-raven-line {
  color: #d6a84f;
  font-style: italic;
  line-height: 1.5;
  margin-top: 16px;
}
/* ================= FINAL REVEAL CINEMATIC OVERLAY V1 ================= */

.final-reveal-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .95)),
    rgba(0, 0, 0, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-reveal-cinematic-overlay.hidden {
  display: none !important;
}

.final-reveal-cinematic-card {
  width: min(760px, 92vw);
  min-height: 420px;
  padding: 34px 24px;
  border: 1px solid rgba(214, 168, 79, .46);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 58px rgba(214, 168, 79, .18),
    inset 0 0 34px rgba(214, 168, 79, .08);
  text-align: center;
  display: grid;
  align-content: center;
}

.final-reveal-cinematic-card h2 {
  color: #d6a84f;
  font-size: clamp(2rem, 8vw, 4.6rem);
  letter-spacing: .1em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-card h3 {
  color: #efe8df;
  font-size: clamp(1.7rem, 7vw, 4.2rem);
  letter-spacing: .08em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-role {
  color: #d6a84f;
  font-size: clamp(2.2rem, 10vw, 5.4rem);
  font-weight: bold;
  letter-spacing: .12em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-subtext {
  color: #a99699;
  font-style: italic;
  line-height: 1.5;
  min-height: 44px;
}

.cinematic-role-deceiver {
  color: #ff5c5c;
  text-shadow: 0 0 18px rgba(157, 23, 35, .7);
}

.cinematic-role-innocent {
  color: #d6a84f;
  text-shadow: 0 0 14px rgba(214, 168, 79, .35);
}

.final-reveal-cinematic-card.cinematic-deceiver-card {
  border-color: rgba(157, 23, 35, .62);
  background:
    radial-gradient(circle at center, rgba(157, 23, 35, .25), rgba(0,0,0,.98)),
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 70px rgba(157, 23, 35, .32),
    inset 0 0 38px rgba(157, 23, 35, .12);
}

.final-reveal-cinematic-card.cinematic-innocent-card {
  border-color: rgba(214, 168, 79, .52);
}
/* ================= FINAL MONEY CELEBRATION OVERLAY V1 ================= */

.final-money-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .24), rgba(0, 0, 0, .96)),
    rgba(0, 0, 0, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-money-celebration-overlay.hidden {
  display: none !important;
}

.final-money-celebration-card {
  width: min(780px, 92vw);
  padding: 34px 24px;
  border: 1px solid rgba(214, 168, 79, .54);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 68px rgba(214, 168, 79, .22),
    inset 0 0 36px rgba(214, 168, 79, .08);
  text-align: center;
}

.final-money-celebration-card h2 {
  color: #d6a84f;
  font-size: clamp(1.8rem, 7vw, 4.2rem);
  letter-spacing: .08em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-money-subtitle {
  color: #efe8df;
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 10px auto 18px;
  max-width: 620px;
}

.final-money-pot-box {
  margin: 22px auto;
  padding: 20px 14px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.18), rgba(0,0,0,.45));
  box-shadow:
    0 0 34px rgba(214, 168, 79, .16),
    inset 0 0 24px rgba(214, 168, 79, .08);
}

.final-money-pot-label {
  color: #a99699;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.final-money-pot-amount {
  color: #d6a84f;
  font-size: clamp(2.8rem, 12vw, 6.4rem);
  font-weight: bold;
  letter-spacing: .04em;
  text-shadow:
    0 0 14px rgba(214,168,79,.42),
    0 0 32px rgba(214,168,79,.22);
}

.final-money-split-line {
  color: #efe8df;
  font-size: clamp(1.25rem, 4vw, 2.15rem);
  font-weight: bold;
  margin: 16px 0 8px;
}

.final-money-raven-line {
  color: #d6a84f;
  font-style: italic;
  line-height: 1.5;
  margin: 16px auto 22px;
  max-width: 620px;
}

/* ================= HIDE FINAL TABLE UNTIL CINEMATIC COMPLETE ================= */

.final-table-hidden-until-complete {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#finalRevealPanel.final-table-hidden-until-complete {
  display: none !important;
}

/* ================= PERMANENT RAVEN CLOCK PANEL - STRONG VERSION ================= */

.legacy-phase-timer-box {
  display: none !important;
}

.phase-timer-hidden-during-voting {
  display: none !important;
}

#ravenClockPanel,
.raven-clock-panel {
  position: relative !important;
  z-index: 50 !important;
  width: min(520px, 94vw);
  margin: 18px auto 46px !important;
  padding: 22px 16px 20px;
  border: 2px solid rgba(214, 168, 79, .72);
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.24), rgba(0,0,0,.74)),
    linear-gradient(180deg, rgba(40,20,12,.92), rgba(0,0,0,.9));
  box-shadow:
    0 0 44px rgba(214,168,79,.32),
    0 0 90px rgba(120,35,20,.22),
    inset 0 0 28px rgba(214,168,79,.12);
  text-align: center;
  pointer-events: none;
}

.raven-clock-label {
  color: #d6a84f;
  font-size: .82rem;
  font-weight: bold;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(214,168,79,.35);
}

.raven-clock-value {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: .95;
  text-shadow:
    0 0 14px rgba(214,168,79,.6),
    0 0 34px rgba(214,168,79,.34),
    0 0 70px rgba(120,35,20,.28);
}

.raven-clock-countdown-mode .raven-clock-value {
  font-size: clamp(3.25rem, 11vw, 6.4rem);
}

.raven-clock-status-mode .raven-clock-value {
  font-size: clamp(1.65rem, 6vw, 3.1rem);
  letter-spacing: .14em;
  opacity: .82;
}
.raven-clock-subtext {
  margin-top: 12px;
  color: #efe8df;
  font-size: .92rem;
  font-style: italic;
  opacity: .9;
}

/* Adds breathing room so the table/player names cannot cover the clock */
.game-layout {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.room-table {
  position: relative;
  z-index: 1;
}
/* ================= ROLE REVEAL HEARTBEAT BUTTON V1 ================= */

#revealRoleBtn {
  position: relative;
  overflow: hidden;
}

#revealRoleBtn:not(.hidden) {
  animation: roleRevealHeartbeat 2.15s ease-in-out infinite;
  box-shadow:
    0 0 18px rgba(157, 23, 35, .38),
    0 0 38px rgba(214, 168, 79, .12);
}

#revealRoleBtn:not(.hidden)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.28), transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: roleRevealGlowBreath 2.15s ease-in-out infinite;
}

#revealRoleBtn:not(.hidden)::after {
  content: "THE RAVEN WAITS";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.62);
  font-size: .58rem;
  letter-spacing: .16em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  animation: roleRevealWhisper 4.3s ease-in-out infinite;
}

@keyframes roleRevealHeartbeat {
  0% {
    transform: scale(1);
    background: #9d1723;
  }

  10% {
    transform: scale(1.035);
    background: #b51b29;
  }

  18% {
    transform: scale(1);
  }

  28% {
    transform: scale(1.055);
    background: #c21f2e;
  }

  40% {
    transform: scale(1);
    background: #9d1723;
  }

  100% {
    transform: scale(1);
    background: #9d1723;
  }
}

@keyframes roleRevealGlowBreath {
  0%, 42%, 100% {
    opacity: 0;
  }

  12% {
    opacity: .45;
  }

  28% {
    opacity: .7;
  }
}

@keyframes roleRevealWhisper {
  0%, 45%, 100% {
    opacity: 0;
  }

  58%, 78% {
    opacity: .72;
  }
}
/* ================= HOST COMMAND CONTROLS V1 ================= */

.phase-control-panel,
.challenge-host-controls {
  position: relative;
  border: 2px solid rgba(214, 168, 79, .72) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(47, 20, 10, .92), rgba(0, 0, 0, .88)) !important;
  box-shadow:
    0 0 34px rgba(214,168,79,.22),
    0 0 70px rgba(157,23,35,.14),
    inset 0 0 24px rgba(214,168,79,.08);
  animation: hostCommandGlow 3.4s ease-in-out infinite;
}

.phase-control-panel::before,
.challenge-host-controls::before {
  content: "HOST COMMAND";
  display: inline-block;
  margin: -4px auto 10px;
  padding: 6px 12px;
  border: 1px solid rgba(214,168,79,.6);
  border-radius: 999px;
  background: rgba(0,0,0,.56);
  color: #d6a84f;
  font-size: .72rem;
  font-weight: bold;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(214,168,79,.18);
}

.phase-control-panel h3,
.challenge-host-controls h3,
.challenge-host-controls label {
  color: #d6a84f !important;
}

.phase-control-panel .hint,
.challenge-host-controls .hint {
  color: #efe8df;
}

.phase-control-panel button,
.challenge-host-controls button,
#finalizeVotingBtn:not(.hidden),
#continueNextRoundBtn:not(.hidden),
#proceedEndGameDecisionBtn:not(.hidden),
#proceedFinalRevealBtn:not(.hidden),
#finalizeEndGameDecisionBtn:not(.hidden) {
  border: 1px solid rgba(255, 226, 150, .55);
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  color: #fff;
  font-weight: bold;
  letter-spacing: .11em;
  box-shadow:
    0 0 22px rgba(157,23,35,.42),
    0 0 34px rgba(214,168,79,.12);
  animation: hostButtonPulse 2.4s ease-in-out infinite;
}

.phase-control-panel button::before,
.challenge-host-controls button::before,
#finalizeVotingBtn:not(.hidden)::before,
#continueNextRoundBtn:not(.hidden)::before,
#proceedEndGameDecisionBtn:not(.hidden)::before,
#proceedFinalRevealBtn:not(.hidden)::before,
#finalizeEndGameDecisionBtn:not(.hidden)::before {
  content: "👑 ";
}

.challenge-host-controls select {
  border: 1px solid rgba(214,168,79,.42) !important;
  background: #120b0d !important;
  box-shadow: inset 0 0 14px rgba(214,168,79,.08);
}

@keyframes hostCommandGlow {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(214,168,79,.14),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.06);
  }

  50% {
    box-shadow:
      0 0 42px rgba(214,168,79,.3),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 28px rgba(214,168,79,.1);
  }
}

@keyframes hostButtonPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.025);
    filter: brightness(1.15);
  }
}
/* ================= HOST COMMAND TOP BANNER V1 ================= */

.host-command-banner {
  position: sticky;
  top: 10px;
  z-index: 200;
  width: min(620px, 94vw);
  margin: 14px auto 18px;
  padding: 16px 14px;
  border: 2px solid rgba(214, 168, 79, .78);
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(55, 20, 12, .96), rgba(0, 0, 0, .94));
  box-shadow:
    0 0 38px rgba(214,168,79,.28),
    0 0 80px rgba(157,23,35,.18),
    inset 0 0 24px rgba(214,168,79,.1);
  text-align: center;
  animation: hostCommandBannerGlow 3.2s ease-in-out infinite;
}

.host-command-banner-label {
  color: #d6a84f;
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(214,168,79,.38);
}

.host-command-banner-text {
  color: #efe8df;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.host-command-jump-btn {
  width: auto;
  min-width: 220px;
  margin: 4px auto 0;
  padding: 11px 18px;
  border: 1px solid rgba(255, 226, 150, .58);
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  color: #fff;
  font-weight: bold;
  letter-spacing: .12em;
  box-shadow:
    0 0 24px rgba(157,23,35,.42),
    0 0 38px rgba(214,168,79,.12);
  animation: hostCommandJumpPulse 2.1s ease-in-out infinite;
}

.host-command-jump-btn::before {
  content: "👑 ";
}

.host-command-attention {
  animation: hostCommandAttentionFlash 1.8s ease-in-out;
}

@keyframes hostCommandBannerGlow {
  0%, 100% {
    box-shadow:
      0 0 26px rgba(214,168,79,.18),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.08);
  }

  50% {
    box-shadow:
      0 0 44px rgba(214,168,79,.34),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 30px rgba(214,168,79,.12);
  }
}

@keyframes hostCommandJumpPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.035);
    filter: brightness(1.18);
  }
}

@keyframes hostCommandAttentionFlash {
  0%, 100% {
    box-shadow:
      0 0 34px rgba(214,168,79,.22),
      0 0 70px rgba(157,23,35,.14),
      inset 0 0 24px rgba(214,168,79,.08);
  }

  35%, 70% {
    box-shadow:
      0 0 70px rgba(214,168,79,.55),
      0 0 120px rgba(157,23,35,.32),
      inset 0 0 38px rgba(214,168,79,.18);
    transform: scale(1.015);
  }
}
/* ================= CLEAN STATUS ROW AFTER RAVEN CLOCK ================= */

.game-status-row {
  grid-template-columns: repeat(3, 1fr) !important;
}

.legacy-phase-timer-box {
  display: none !important;
}
/* ================= SHIELD CHOICE / RAVEN DAGGER V1 ================= */

.shield-choice-panel {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid rgba(214, 168, 79, .72);
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.2), rgba(0,0,0,.52)),
    linear-gradient(180deg, rgba(45, 20, 11, .94), rgba(0,0,0,.9));
  box-shadow:
    0 0 42px rgba(214,168,79,.22),
    0 0 80px rgba(157,23,35,.16),
    inset 0 0 24px rgba(214,168,79,.09);
  text-align: center;
  animation: shieldChoiceGlow 3.2s ease-in-out infinite;
}

.shield-choice-panel h3 {
  color: #d6a84f;
  margin-top: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shield-choice-warning {
  color: #efe8df;
  font-size: 1.05rem;
  font-weight: bold;
}

.shield-choice-box {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  text-align: left;
}

.shield-choice-box p {
  margin: 8px 0;
  line-height: 1.45;
}

.shield-choice-panel select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.42);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

#keepShieldChoiceBtn {
  background:
    linear-gradient(180deg, #b7842f, #7a4d12) !important;
  color: #120b05;
  font-weight: bold;
}

#transferShieldChoiceBtn {
  background:
    linear-gradient(180deg, #5e3c70, #2c1938) !important;
}

#convertShieldToDaggerBtn {
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  border: 1px solid rgba(255, 226, 150, .44);
  box-shadow:
    0 0 22px rgba(157,23,35,.35),
    0 0 34px rgba(214,168,79,.1);
}

@keyframes shieldChoiceGlow {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(214,168,79,.14),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.07);
  }

  50% {
    box-shadow:
      0 0 46px rgba(214,168,79,.3),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 30px rgba(214,168,79,.12);
  }
}
/* ================= SHIELD / DAGGER VOTING NOTICES V1 ================= */

.dagger-vote-notice,
.shield-vote-notice {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  animation: tablePowerNoticeGlow 3s ease-in-out infinite;
}

.dagger-vote-notice {
  border: 2px solid rgba(157, 23, 35, .72);
  background:
    radial-gradient(circle at top, rgba(157,23,35,.28), rgba(0,0,0,.48)),
    linear-gradient(180deg, rgba(40, 5, 8, .96), rgba(0,0,0,.9));
  box-shadow:
    0 0 36px rgba(157,23,35,.34),
    inset 0 0 22px rgba(214,168,79,.08);
}

.shield-vote-notice {
  border: 2px solid rgba(214, 168, 79, .72);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.24), rgba(0,0,0,.48)),
    linear-gradient(180deg, rgba(46, 27, 9, .96), rgba(0,0,0,.9));
  box-shadow:
    0 0 36px rgba(214,168,79,.28),
    inset 0 0 22px rgba(214,168,79,.08);
}

.dagger-vote-notice h4,
.shield-vote-notice h4 {
  color: #d6a84f;
  margin: 0 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dagger-vote-notice p,
.shield-vote-notice p {
  margin: 6px 0;
}

@keyframes tablePowerNoticeGlow {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}
/* ================= RAVEN CLOCK DANGER MODE ================= */

.raven-clock-danger-mode {
  border-color: rgba(255, 78, 78, .82) !important;
  box-shadow:
    0 0 54px rgba(255, 78, 78, .42),
    0 0 92px rgba(214,168,79,.22),
    inset 0 0 30px rgba(255, 78, 78, .13) !important;
  animation: ravenClockDangerPulse 1.1s ease-in-out infinite;
}

.raven-clock-danger-mode .raven-clock-value {
  color: #ff6b6b;
  text-shadow:
    0 0 16px rgba(255, 78, 78, .74),
    0 0 38px rgba(255, 78, 78, .42),
    0 0 74px rgba(214,168,79,.22);
}

@keyframes ravenClockDangerPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.035);
    filter: brightness(1.2);
  }
}
/* ================= MOBILE / SCREEN CENTERING FIX V1 ================= */

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.app-shell,
main,
.panel,
.game-room-panel {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.panel,
.game-room-panel {
  box-sizing: border-box;
}

@media (max-width: 700px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-shell,
  main,
  .panel,
  .game-room-panel {
    width: 100%;
    max-width: 100%;
  }

  .game-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .table-panel,
  .raven-side-panel,
  .players-panel,
  .challenge-panel,
  .voting-panel,
  .phase-control-panel,
  .host-command-banner,
  .raven-clock-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .game-status-row {
    width: 100%;
    grid-template-columns: 1fr !important;
  }

  .game-status-row > div {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ================= FINAL MONEY SCREEN MOBILE CLIPPING FIX V1 ================= */

.final-money-celebration-overlay {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 14px !important;
  box-sizing: border-box !important;
}

.final-money-celebration-card {
  width: min(94vw, 680px) !important;
  max-height: none !important;
  margin: 18px auto 32px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.final-money-celebration-card img,
.final-money-celebration-card .raven-icon,
.final-money-celebration-card .final-money-raven,
.final-money-celebration-card .final-raven-icon {
  display: block !important;
  max-width: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  object-fit: contain !important;
  overflow: visible !important;
}

.final-money-celebration-card button,
.final-money-celebration-card .primary-btn,
.final-money-celebration-card .danger-btn {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  min-height: 48px !important;
  margin: 18px auto 0 !important;
  white-space: normal !important;
}

@media (max-width: 700px) {
  .final-money-celebration-overlay {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
  }

  .final-money-celebration-card {
    width: 94vw !important;
    margin-top: 8px !important;
    margin-bottom: 28px !important;
    padding: 22px 16px 24px !important;
  }

  .final-money-pot-amount {
    font-size: clamp(2rem, 11vw, 3.2rem) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }
}
/* ================= DOCTOR DEATH / LAST WORDS OVERLAYS V1 ================= */

.death-cinematic-overlay,
.last-words-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at top, rgba(120, 0, 0, .32), transparent 42%),
    radial-gradient(circle at bottom, rgba(214, 168, 79, .12), transparent 38%),
    rgba(0, 0, 0, .92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.death-cinematic-card,
.last-words-card {
  width: min(94vw, 680px);
  margin: 18px auto 34px;
  padding: 24px 18px;
  border-radius: 22px;
  border: 2px solid rgba(120, 0, 0, .74);
  background:
    linear-gradient(180deg, rgba(24, 4, 6, .98), rgba(5, 5, 8, .98)),
    radial-gradient(circle at center, rgba(214, 168, 79, .12), transparent 62%);
  box-shadow:
    0 0 48px rgba(120, 0, 0, .52),
    0 0 92px rgba(0, 0, 0, .82),
    inset 0 0 28px rgba(214, 168, 79, .08);
  text-align: center;
  box-sizing: border-box;
  animation: deathCardRise 520ms ease-out;
}

.death-cinematic-card h2,
.last-words-card h2 {
  margin: 10px 0 14px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214, 168, 79, .45),
    0 0 38px rgba(120, 0, 0, .38);
}

.death-cinematic-card p,
.last-words-card p {
  color: rgba(255, 255, 255, .86);
  line-height: 1.5;
}

.death-cinematic-kicker,
.last-words-kicker {
  color: rgba(255, 255, 255, .64);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 14px;
}

.death-image-placeholder {
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(214, 168, 79, .34);
  background:
    radial-gradient(circle at 70% 35%, rgba(214, 168, 79, .18), transparent 26%),
    radial-gradient(circle at 30% 70%, rgba(120, 0, 0, .36), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,.96), rgba(35, 6, 10, .96));
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, .68),
    0 0 24px rgba(120, 0, 0, .26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.death-image-placeholder::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 45%, transparent 72%);
  transform: rotate(8deg);
  animation: deathImageSweep 4.8s ease-in-out infinite;
}

.death-image-label {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214, 168, 79, .42);
  position: relative;
  z-index: 1;
}

.death-image-subtext {
  color: rgba(255, 255, 255, .58);
  font-size: .86rem;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.death-cinematic-warning {
  margin: 16px auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 168, 79, .34);
  background: rgba(0, 0, 0, .34);
  color: #f0c15c !important;
  font-weight: 700;
}

.death-cinematic-btn {
  margin-top: 16px;
  min-height: 48px;
  width: min(100%, 360px);
  border-radius: 14px;
  border: 1px solid rgba(214, 168, 79, .5);
  background:
    linear-gradient(180deg, #9d1723, #650b13);
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    0 0 24px rgba(157, 23, 35, .42),
    inset 0 0 12px rgba(255, 255, 255, .08);
}

.death-cinematic-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.last-words-intro {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.last-words-timer-row {
  margin: 16px auto 18px;
  padding: 12px 14px;
  width: min(100%, 420px);
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 79, .38);
  background: rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.last-words-timer-row span {
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}

#lastWordsTimerDisplay {
  color: #f0c15c;
  font-size: 1.45rem;
  text-shadow:
    0 0 12px rgba(214, 168, 79, .52),
    0 0 28px rgba(157, 23, 35, .32);
}

.last-words-timer-danger #lastWordsTimerDisplay {
  color: #ff6b6b;
  animation: lastWordsTimerPulse 1s ease-in-out infinite;
}

.last-words-slots {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.last-words-slot {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 79, .25);
  background: rgba(0, 0, 0, .38);
  display: grid;
  gap: 9px;
  text-align: left;
}

.last-words-slot label {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.last-words-slot select {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(214, 168, 79, .32);
  background: rgba(8, 8, 10, .96);
  color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
}

.last-words-hint {
  margin-top: 14px;
  color: rgba(255, 255, 255, .62) !important;
  font-style: italic;
}

.raven-feed-last-words {
  border: 2px solid rgba(214, 168, 79, .74) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(45, 7, 11, .96), rgba(0,0,0,.9)) !important;
  box-shadow:
    0 0 32px rgba(214,168,79,.28),
    0 0 52px rgba(157,23,35,.22) !important;
  animation: lastWordsFeedGlow 3s ease-in-out infinite;
}

@keyframes deathCardRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes deathImageSweep {
  0%, 100% {
    transform: translateX(-42%) rotate(8deg);
    opacity: .22;
  }

  50% {
    transform: translateX(42%) rotate(8deg);
    opacity: .44;
  }
}

@keyframes lastWordsTimerPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.12);
    filter: brightness(1.22);
  }
}

@keyframes lastWordsFeedGlow {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

@media (max-width: 700px) {
  .death-cinematic-overlay,
  .last-words-overlay {
    padding: 14px 10px 24px;
  }

  .death-cinematic-card,
  .last-words-card {
    width: 94vw;
    margin-top: 8px;
    padding: 20px 14px 22px;
    border-radius: 18px;
  }

  .death-image-placeholder {
    min-height: 150px;
  }

  .death-cinematic-card h2,
  .last-words-card h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .last-words-timer-row {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
/* ================= RAVEN FEED LAST WORDS POLISH V1 ================= */

.raven-feed-last-words-title {
  color: #f0c15c;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-shadow:
    0 0 10px rgba(214,168,79,.48),
    0 0 24px rgba(157,23,35,.32);
}

.raven-feed-last-words-message {
  color: rgba(255,255,255,.92);
  font-style: italic;
  line-height: 1.45;
}
/* ================= LAST WORDS BROADCAST POPUP V1 ================= */

.last-words-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 38%),
    radial-gradient(circle at bottom, rgba(120,0,0,.32), transparent 42%),
    rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.last-words-broadcast-card {
  width: min(94vw, 620px);
  padding: 24px 18px;
  border-radius: 22px;
  border: 2px solid rgba(214,168,79,.76);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 48%),
    linear-gradient(180deg, rgba(34,5,8,.98), rgba(3,3,6,.98));
  box-shadow:
    0 0 44px rgba(214,168,79,.34),
    0 0 82px rgba(157,23,35,.28),
    inset 0 0 28px rgba(214,168,79,.08);
  text-align: center;
  animation: lastWordsBroadcastRise 460ms ease-out;
}

.last-words-broadcast-kicker {
  color: rgba(255,255,255,.66);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.last-words-broadcast-card h2 {
  margin: 0 0 16px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214,168,79,.5),
    0 0 34px rgba(157,23,35,.38);
}

.last-words-broadcast-card p {
  color: rgba(255,255,255,.9);
  font-style: italic;
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 520px;
}

@keyframes lastWordsBroadcastRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .last-words-broadcast-card {
    padding: 22px 14px;
  }

  .last-words-broadcast-card h2 {
    font-size: clamp(1.25rem, 7vw, 1.9rem);
  }
}
/* ================= CHARACTER INTRO MONTAGE PLACEHOLDER V1 ================= */

.character-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 36%),
    radial-gradient(circle at bottom, rgba(120,0,0,.34), transparent 42%),
    rgba(0,0,0,.94);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.character-intro-card {
  width: min(94vw, 720px);
  margin: 16px auto 34px;
  padding: 24px 18px;
  border-radius: 24px;
  border: 2px solid rgba(214,168,79,.58);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.16), transparent 46%),
    linear-gradient(180deg, rgba(20,4,7,.98), rgba(3,3,8,.98));
  box-shadow:
    0 0 54px rgba(214,168,79,.24),
    0 0 94px rgba(157,23,35,.28),
    inset 0 0 30px rgba(214,168,79,.07);
  text-align: center;
  box-sizing: border-box;
  animation: characterIntroRise 520ms ease-out;
}

.character-intro-image-placeholder {
  min-height: 240px;
  border-radius: 20px;
  border: 1px solid rgba(214,168,79,.36);
  background:
    radial-gradient(circle at 50% 28%, rgba(214,168,79,.18), transparent 28%),
    radial-gradient(circle at 70% 75%, rgba(157,23,35,.28), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,.98), rgba(28,5,9,.98));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 0 44px rgba(0,0,0,.72),
    0 0 28px rgba(157,23,35,.2);
}

.character-intro-image-placeholder::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 45%, transparent 72%);
  transform: rotate(8deg);
  animation: characterIntroSweep 4.6s ease-in-out infinite;
}

.character-intro-image-label {
  position: relative;
  z-index: 1;
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow:
    0 0 16px rgba(214,168,79,.46),
    0 0 34px rgba(157,23,35,.3);
}

.character-intro-kicker {
  margin-top: 18px;
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.character-intro-card h2 {
  margin: 10px 0 12px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214,168,79,.48),
    0 0 36px rgba(157,23,35,.34);
}

.character-intro-card p {
  max-width: 580px;
  margin: 0 auto;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  font-size: 1rem;
}

.character-intro-progress {
  margin: 18px auto 0;
  color: rgba(255,255,255,.55);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

.character-intro-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.character-intro-actions button {
  min-width: 150px;
  min-height: 46px;
}

@keyframes characterIntroRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes characterIntroSweep {
  0%, 100% {
    transform: translateX(-42%) rotate(8deg);
    opacity: .22;
  }

  50% {
    transform: translateX(42%) rotate(8deg);
    opacity: .44;
  }
}

@media (max-width: 700px) {
  .character-intro-overlay {
    padding: 14px 10px 24px;
  }

  .character-intro-card {
    width: 94vw;
    margin-top: 8px;
    padding: 20px 14px 22px;
    border-radius: 20px;
  }

  .character-intro-image-placeholder {
    min-height: 170px;
  }

  .character-intro-card h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .character-intro-actions {
    flex-direction: column-reverse;
  }

  .character-intro-actions button {
    width: 100%;
  }
}
/* ================= HARD HIDE SAFETY FIX ================= */

[hidden] {
  display: none !important;
}

.character-intro-overlay.hidden,
.death-cinematic-overlay.hidden,
.last-words-overlay.hidden,
.last-words-broadcast-overlay.hidden {
  display: none !important;
}

/* ================= MOBILE RIGHT-SHIFT / OVERFLOW FIX V2 ================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app,
.landing-page,
.game-room-panel,
.panel,
.game-layout,
.table-side-panel,
.raven-side-panel,
.room-table,
.raven-clock-panel,
.host-command-banner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .landing-page,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  .landing-content,
  .panel,
  .game-room-panel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .game-layout {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }

  .raven-side-panel,
  .table-side-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .room-player-seat {
    max-width: 86px !important;
    font-size: .74rem !important;
    padding: 6px !important;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100% !important;
  }
}
/* ================= STUDY THE MASKS BUTTON V1 ================= */

.study-masks-btn {
  margin: 10px auto 14px;
  padding: 10px 12px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(214,168,79,.38);
  background:
    linear-gradient(180deg, rgba(52,35,50,.96), rgba(14,9,17,.96));
  color: #d6a84f;
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow:
    0 0 18px rgba(214,168,79,.1),
    inset 0 0 12px rgba(214,168,79,.05);
}

.study-masks-btn:hover {
  filter: brightness(1.12);
}
/* ================= ROLE REVEAL WAITING THROB V1 ================= */

.raven-waiting-after-role-reveal {
  border-color: rgba(214, 168, 79, .92) !important;
  animation: ravenWaitingRoleRevealPanelPulse 2.2s ease-in-out infinite;
}

.raven-waiting-after-role-reveal .raven-clock-subtext {
  color: #f0c15c !important;
  font-weight: bold;
  animation: ravenWaitingRoleRevealTextThrob 1.45s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(214, 168, 79, .55),
    0 0 24px rgba(214, 168, 79, .28);
}

.raven-waiting-after-role-reveal .raven-clock-value {
  animation: ravenWaitingRoleRevealValueGlow 1.8s ease-in-out infinite;
}

@keyframes ravenWaitingRoleRevealTextThrob {
  0%, 100% {
    opacity: .62;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}

@keyframes ravenWaitingRoleRevealValueGlow {
  0%, 100% {
    filter: brightness(.92);
  }

  50% {
    filter: brightness(1.25);
  }
}

@keyframes ravenWaitingRoleRevealPanelPulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(214,168,79,.22),
      0 0 70px rgba(120,35,20,.16),
      inset 0 0 24px rgba(214,168,79,.08);
  }

  50% {
    box-shadow:
      0 0 54px rgba(214,168,79,.42),
      0 0 110px rgba(120,35,20,.26),
      inset 0 0 34px rgba(214,168,79,.14);
  }
}
.studio-tag {
  margin: -2px 0 10px;
  color: rgba(214, 168, 79, .78);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: bold;
}
/* ================= CHALLENGE MODE PICKER V1 ================= */

.challenge-mode-panel {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.35);
  border-radius: 14px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 55%),
    rgba(0,0,0,.35);
}

.challenge-mode-panel label {
  display: block;
  margin-bottom: 8px;
  color: #d6a84f;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.challenge-mode-panel select {
  width: 100%;
  margin-bottom: 10px;
}

/* ================= RAVEN PREFERENCE PANEL V1 ================= */

.raven-preference-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 58%),
    rgba(0,0,0,.30);
  text-align: center;
}

.raven-preference-title {
  margin-top: 0;
  color: #d6a84f;
  letter-spacing: .08em;
}

.raven-preference-copy,
.raven-preference-description {
  color: #efe8df;
  font-style: italic;
  line-height: 1.45;
}

.raven-preference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.raven-preference-grid label {
  margin-top: 0;
}

.raven-preference-grid select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.32);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

#submitRavenPreferenceBtn {
  margin-top: 8px;
}

#ravenPreferenceStatus {
  color: #d6a84f;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .raven-preference-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= FINAL CHARACTER / RAVEN / DOCTOR DEATH IMAGE INTEGRATION V1 ================= */

/* ---------- Raven UI Images ---------- */

.raven-ui-icon {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 12px;
  filter:
    drop-shadow(0 0 14px rgba(214, 168, 79, .28))
    drop-shadow(0 0 22px rgba(0, 0, 0, .65));
}

.raven-secret-alert-image {
  display: block;
  width: min(220px, 72vw);
  max-height: 180px;
  object-fit: contain;
  margin: 0 auto 14px;
  border-radius: 16px;
  filter:
    drop-shadow(0 0 16px rgba(214, 168, 79, .25))
    drop-shadow(0 0 26px rgba(0, 0, 0, .72));
}

.secret-message-arrival-card .raven-secret-alert-image {
  margin-top: -4px;
}

.secret-message-read-card .raven-ui-icon,
.host-join-request-alert-card .raven-ui-icon {
  margin-bottom: 10px;
}


/* ---------- Character Intro Montage Images ---------- */

.character-intro-card {
  width: min(94vw, 760px);
}

.character-intro-image {
  display: block;
  width: min(100%, 520px);
  max-height: min(62vh, 680px);
  margin: 0 auto 18px;
  border-radius: 20px;
  border: 1px solid rgba(214, 168, 79, .42);
  object-fit: contain;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .12), rgba(0, 0, 0, .72)),
    rgba(0, 0, 0, .62);
  box-shadow:
    0 0 34px rgba(214, 168, 79, .18),
    0 0 62px rgba(157, 23, 35, .18),
    inset 0 0 24px rgba(0, 0, 0, .58);
}

.character-intro-card h2 {
  margin-top: 10px;
}

.character-intro-card p {
  max-width: 640px;
}

.character-intro-kicker {
  margin-top: 12px;
}


/* ---------- Doctor Death Main Overlay Image ---------- */

.doctor-death-card {
  width: min(760px, 94vw);
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(18, 2, 4, .98), rgba(0, 0, 0, .98));
}

.doctor-death-overlay-image {
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid rgba(214, 168, 79, .32);
}

.doctor-death-overlay-content {
  padding: 24px 22px 26px;
}

.doctor-death-overlay-content h2 {
  margin-top: 0;
}


/* ---------- Doctor Death Elimination / Last Words Images ---------- */

.death-image-frame {
  width: 100%;
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(214, 168, 79, .34);
  background:
    radial-gradient(circle at center, rgba(120, 0, 0, .2), rgba(0, 0, 0, .74)),
    rgba(0, 0, 0, .78);
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, .68),
    0 0 24px rgba(120, 0, 0, .26);
  overflow: hidden;
}

.death-cinematic-image {
  display: block;
  width: 100%;
  height: clamp(190px, 42vh, 420px);
  object-fit: cover;
  object-position: center;
}

.personal-death-card .death-cinematic-image {
  object-position: center;
}

.living-death-card .death-cinematic-image {
  object-position: center;
}


/* ---------- Mobile Polish ---------- */

@media (max-width: 700px) {
  .raven-ui-icon {
    width: 76px;
    height: 76px;
  }

  .raven-secret-alert-image {
    width: min(190px, 78vw);
    max-height: 150px;
  }

  .character-intro-image {
    width: 100%;
    max-height: 58vh;
    border-radius: 16px;
  }

  .character-intro-card {
    width: 94vw;
    padding: 18px 12px 20px;
  }

  .doctor-death-overlay-image {
    max-height: 48vh;
  }

  .doctor-death-overlay-content {
    padding: 20px 16px 22px;
  }

  .death-cinematic-image {
    height: clamp(170px, 34vh, 320px);
  }
}
/* ================= DOCTOR DEATH FULL IMAGE VISIBILITY FIX V1 ================= */

.doctor-death-overlay-image {
  width: 100% !important;
  max-height: min(70vh, 760px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050305 !important;
}

.death-cinematic-image {
  width: 100% !important;
  height: auto !important;
  max-height: min(56vh, 620px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050305 !important;
}

.death-image-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 240px !important;
  background:
    radial-gradient(circle at center, rgba(120, 0, 0, .2), rgba(0, 0, 0, .88)),
    #050305 !important;
}
/* ================= FINAL JUDGMENT RAVEN EMBLEM FIX V1 ================= */

.final-money-celebration-card .final-money-raven {
  display: block !important;
  width: 118px !important;
  height: 118px !important;
  max-width: 118px !important;
  max-height: 118px !important;
  object-fit: contain !important;
  margin: 0 auto 16px !important;
  filter:
    drop-shadow(0 0 16px rgba(214, 168, 79, .32))
    drop-shadow(0 0 26px rgba(0, 0, 0, .72));
}

/* ================= BASIC RULES MODAL / BUTTON V1 ================= */

.see-rules-btn {
  margin: 12px 0 10px;
  background: linear-gradient(180deg, #b7842f, #7a4d12);
  color: #120b05;
  border: 1px solid rgba(255, 226, 150, .55);
  box-shadow:
    0 0 18px rgba(214,168,79,.18),
    inset 0 0 12px rgba(255,255,255,.08);
  font-weight: bold;
  letter-spacing: .08em;
}

.see-rules-btn.rules-throb {
  animation: seeRulesThrob 1.45s ease-in-out infinite;
}

@keyframes seeRulesThrob {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 18px rgba(214,168,79,.2),
      inset 0 0 12px rgba(255,255,255,.08);
  }

  50% {
    transform: scale(1.045);
    filter: brightness(1.18);
    box-shadow:
      0 0 34px rgba(214,168,79,.48),
      0 0 70px rgba(157,23,35,.18),
      inset 0 0 18px rgba(255,255,255,.12);
  }
}

.basic-rules-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
  box-sizing: border-box;
}

.basic-rules-overlay.hidden {
  display: none !important;
}

.basic-rules-card {
  width: min(760px, 94vw);
  margin: 20px auto 34px;
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .98), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.basic-rules-card h2 {
  color: #d6a84f;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 18px;
}

.basic-rules-body {
  max-height: 62vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: left;
}

.basic-rules-body h3 {
  color: #d6a84f;
  margin: 18px 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.basic-rules-body h3:first-child {
  margin-top: 0;
}

.basic-rules-body p {
  margin: 8px 0;
  line-height: 1.48;
}

/* ================= RAVEN'S QUIZ V1 ================= */

.raven-quiz-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(214, 168, 79, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.11), rgba(0,0,0,.26)),
    rgba(0,0,0,.3);
  text-align: left;
}

.raven-quiz-panel h4 {
  color: #d6a84f;
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.raven-quiz-panel .raven-quiz-subtitle {
  color: #efe8df;
  text-align: center;
  font-style: italic;
  margin: 6px 0 14px;
}

.raven-quiz-question {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
}

.raven-quiz-question-title {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 8px;
}

.raven-quiz-choice-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  color: #efe8df;
}

.raven-quiz-choice-row input {
  width: auto;
  margin: 2px 0 0;
}

.raven-quiz-standings {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.raven-quiz-standing-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.26);
}

.raven-quiz-standing-row.raven-quiz-top-row {
  border-color: rgba(214,168,79,.48);
  background: rgba(214,168,79,.08);
}

.raven-quiz-standing-name {
  color: #efe8df;
  font-weight: bold;
}

.raven-quiz-standing-score {
  color: #d6a84f;
  white-space: nowrap;
}

@media (max-width: 650px) {
  .raven-quiz-standing-row {
    display: grid;
    gap: 4px;
  }
}
/* Prevent iPhone double-tap zoom during Raven's Path */
.raven-path-panel,
.raven-path-panel *,
.raven-path-game,
.raven-path-game *,
.raven-path-controls,
.raven-path-controls *,
.raven-path-control-btn,
.raven-path-canvas {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* ================= THE RAVEN'S PLACEMENT V2 ================= */

.raven-placement-active > :not(#ravenJudgmentPanel) {
  display: none !important;
}

.raven-placement-panel,
.ravens-placement-panel {
  width: min(980px, 94vw) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

.ravens-placement-shell {
  position: relative;
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(214, 168, 79, 0.46);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 168, 79, 0.20), transparent 34%),
    radial-gradient(circle at 15% 18%, rgba(115, 23, 35, 0.20), transparent 35%),
    radial-gradient(circle at 85% 24%, rgba(68, 35, 70, 0.18), transparent 35%),
    linear-gradient(180deg, rgba(24, 12, 19, 0.98), rgba(4, 4, 8, 0.98));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.72),
    inset 0 0 58px rgba(214, 168, 79, 0.07);
  overflow: hidden;
}

.ravens-placement-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(214, 168, 79, 0.08), transparent),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.50));
  opacity: 0.82;
}

.ravens-placement-shell::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(214, 168, 79, 0.16);
  border-radius: 20px;
  pointer-events: none;
}

.ravens-placement-raven-mark {
  position: relative;
  z-index: 1;
  margin: 0 auto 4px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 168, 79, 0.35);
  border-radius: 999px;
  color: #d6a84f;
  background: rgba(0, 0, 0, 0.28);
  font-size: 2.1rem;
  line-height: 1;
  box-shadow: 0 0 24px rgba(214, 168, 79, 0.12);
}

.ravens-placement-title {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  color: #d6a84f;
  text-align: center;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 4.4vw, 2.85rem);
  text-shadow: 0 0 22px rgba(214, 168, 79, 0.22);
}

.ravens-placement-kicker {
  position: relative;
  z-index: 1;
  margin: 0 auto 18px;
  max-width: 680px;
  text-align: center;
  color: rgba(239, 232, 223, 0.80);
  font-size: clamp(0.98rem, 2vw, 1.15rem);
  line-height: 1.42;
}

.ravens-placement-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(290px, 1.06fr) minmax(275px, 0.94fr);
  gap: clamp(14px, 3vw, 24px);
  align-items: center;
  padding: clamp(13px, 2.5vw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 30%, rgba(214, 168, 79, 0.08), transparent 46%),
    rgba(0, 0, 0, 0.30);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.28);
}

.ravens-placement-ink-side {
  display: grid;
  place-items: center;
}

.ravens-placement-inkblot-frame {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(238, 226, 207, 0.16), rgba(118, 92, 58, 0.10)),
    rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(214, 168, 79, 0.30);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.58),
    inset 0 0 22px rgba(214, 168, 79, 0.05);
}

.raven-placement-inkblot-svg,
.ravens-placement-inkblot-frame svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 17px;
  filter:
    contrast(1.1)
    saturate(0.92)
    drop-shadow(0 0 16px rgba(214, 168, 79, 0.12));
}

.ravens-placement-response {
  text-align: center;
  padding: clamp(8px, 2vw, 16px);
}

.ravens-placement-look {
  margin: 0 0 8px;
  color: rgba(214, 168, 79, 0.92);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.ravens-placement-prompt {
  display: block;
  color: #efe8df;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0 auto 12px;
  text-align: center;
  text-transform: none;
  font-size: clamp(1.2rem, 3vw, 1.65rem);
}

.ravens-placement-input {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 12px;
  display: block;
  box-sizing: border-box;
  padding: 14px 15px;
  border-radius: 14px;
  border: 1px solid rgba(214, 168, 79, 0.42);
  background: rgba(0, 0, 0, 0.60);
  color: #efe8df;
  text-align: center;
  font-size: 1.06rem;
  outline: none;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.46);
}

.ravens-placement-input:focus {
  border-color: rgba(214, 168, 79, 0.82);
  box-shadow:
    0 0 0 3px rgba(214, 168, 79, 0.10),
    inset 0 0 18px rgba(0, 0, 0, 0.46);
}

.ravens-placement-input::placeholder {
  color: rgba(239, 232, 223, 0.52);
}

.ravens-placement-influence {
  max-width: 440px;
  margin: 12px auto 14px;
  color: rgba(239, 232, 223, 0.76);
  font-size: 0.94rem;
  line-height: 1.42;
}

.ravens-placement-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 430px;
  margin: 0 auto;
}

.ravens-placement-actions button {
  margin-top: 0;
}

@media (max-width: 820px) {
  .ravens-placement-card {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .ravens-placement-shell {
    padding: 18px 14px;
    border-radius: 22px;
  }

  .ravens-placement-raven-mark {
    width: 50px;
    height: 50px;
    font-size: 1.75rem;
  }

  .ravens-placement-inkblot-frame {
    max-width: 500px;
    padding: 9px;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at center, #251019 0%, #09080b 60%, #030204 100%);
  color: #efe8df;
  font-family: Georgia, "Times New Roman", serif;
}

.hidden {
  display: none !important;
}

.landing-page,
#app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.landing-content,
.panel {
  width: min(700px, 94vw);
  text-align: center;
  padding: 28px;
  background: rgba(8, 6, 10, 0.82);
  border: 1px solid rgba(214, 168, 79, 0.28);
  border-radius: 24px;
  box-shadow: 0 0 70px rgba(0,0,0,.65);
}

h1 {
  letter-spacing: .12em;
  font-size: clamp(2.4rem, 7vw, 5rem);
  margin-bottom: 6px;
}

h2,
.tagline,
.prove-it,
strong {
  color: #d6a84f;
}

p {
  line-height: 1.45;
}

label {
  display: block;
  text-align: left;
  margin-top: 14px;
  color: #a99699;
  text-transform: uppercase;
  font-size: .8rem;
}

input {
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  box-sizing: border-box;
}

button {
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: #9d1723;
  color: white;
  cursor: pointer;
  letter-spacing: .08em;
}

button.secondary {
  background: #342332;
}

#connectionStatus,
#roomResult {
  color: #d6a84f;
}
.lobby-panel {
  margin-top: 20px;
}

.lobby-label {
  margin: 0;
  color: #a99699;
  font-size: .8rem;
  letter-spacing: .12em;
}

.room-code-display {
  margin: 8px auto 12px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.45);
  border-radius: 16px;
  background: rgba(0,0,0,.35);
  color: #d6a84f;
  font-size: 2rem;
  letter-spacing: .16em;
}

.player-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.player-row {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.late-join-waiting-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  text-align: center;
}

.late-join-waiting-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.late-join-waiting-panel p {
  line-height: 1.45;
}

.pending-join-panel {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.pending-join-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.pending-join-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pending-join-row {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.pending-join-name {
  color: #efe8df;
  font-weight: bold;
  margin-bottom: 8px;
}

.pending-join-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pending-join-actions button {
  margin-top: 0;
  padding: 10px;
  font-size: .75rem;
}

#startGameBtn {
  margin-top: 18px;
  background: #9d1723;
}
.game-room-panel {
  margin-top: 22px;
}

.game-status-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.game-status-row > div {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.25);
}

.small-label {
  display: block;
  color: #a99699;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.room-table {
  position: relative;
  min-height: 280px;
  margin-top: 18px;
  border-radius: 50%;
  border: 2px solid rgba(214,168,79,.3);
  background: radial-gradient(circle, #3b1c20 0%, #160b0f 62%, transparent 63%);
  box-shadow: inset 0 0 50px rgba(0,0,0,.7);
}

.table-center-text {
  position: absolute;
  inset: 42% 0 auto;
  text-align: center;
  color: #d6a84f;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.room-player-list {
  position: absolute;
  inset: 0;
}

.room-player-seat {
  position: absolute;
  width: 100px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: .85rem;
}

.raven-box {
  margin-top: 18px;
  padding: 14px;
  border-left: 4px solid #9d1723;
  background: rgba(0,0,0,.3);
}
.role-text {
  font-size: .9rem;
  font-weight: normal;
  letter-spacing: .02em;
  color: #efe8df;
  margin-top: 8px;
  line-height: 1.4;
}

.role-box {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(214,168,79,.2);
  border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.role-instruction-box {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  text-align: left;
  font-size: .95rem;
  line-height: 1.45;
}

.role-instruction-box p {
  margin-bottom: 10px;
}
#phaseTimerDisplay {
  color: #d6a84f;
  font-size: 1.2rem;
}

.table-of-deception-panel,
.secret-messages-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: left;
}

.table-of-deception-panel h3,
.secret-messages-panel h3,
.raven-box h4 {
  margin-top: 0;
  color: #d6a84f;
  text-align: center;
}

.table-of-deception-messages {
  height: 180px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(0,0,0,.32);
}

.table-of-deception-message {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.table-of-deception-name {
  color: #d6a84f;
  font-weight: bold;
}

.table-of-deception-text {
  margin-top: 3px;
  color: #efe8df;
  word-wrap: break-word;
}

.table-of-deception-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.table-of-deception-input-row input {
  margin: 0;
}

.table-of-deception-input-row button {
  width: auto;
  margin: 0;
  padding: 0 18px;
}

.raven-feed-list {
  margin-top: 12px;
  max-height: 180px;
  overflow-y: auto;
  text-align: left;
  font-size: .85rem;
}

.raven-feed-item {
  padding: 8px;
  margin-bottom: 6px;
  border-left: 3px solid rgba(214,168,79,.55);
  background: rgba(0,0,0,.24);
  color: #d7cfc8;
}

@media (max-width: 650px) {
  .game-status-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .table-of-deception-input-row {
    grid-template-columns: 1fr;
  }

  .table-of-deception-input-row button {
    width: 100%;
    padding: 13px;
  }
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.raven-side-panel {
  position: sticky;
  top: 14px;
}

.raven-box {
  margin-top: 0;
}

.raven-box h4 {
  color: #d6a84f;
  margin-bottom: 8px;
  text-align: center;
}

.table-side-panel {
  min-width: 0;
}

.raven-feed-list {
  max-height: 330px;
}

@media (max-width: 800px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .raven-side-panel {
    position: static;
    order: -1;
  }

  .raven-feed-list {
    max-height: 180px;
  }
}
.secret-messages-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.secret-unread-count {
  min-width: 24px;
  height: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #9d1723;
  color: #fff;
  font-size: .8rem;
  font-weight: bold;
  display: inline-grid;
  place-items: center;
}

.raven-role-reminder-btn {
  margin: 12px 0 14px;
  background: linear-gradient(180deg, #b7842f, #7a4d12);
  color: #120b05;
  border: 1px solid rgba(255, 226, 150, .55);
  box-shadow:
    0 0 18px rgba(214,168,79,.18),
    inset 0 0 12px rgba(255,255,255,.08);
  font-weight: bold;
  letter-spacing: .08em;
}

.raven-role-reminder-btn:hover {
  filter: brightness(1.08);
}

.secret-message-notice {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(214,168,79,.35);
  border-radius: 12px;
  background: rgba(157,23,35,.18);
  color: #d6a84f;
  text-align: center;
  font-style: italic;
}

.secret-message-form {
  margin-top: 12px;
}

.secret-message-form select,
.secret-message-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

.secret-message-form select {
  padding: 12px;
}

.secret-message-form textarea {
  min-height: 90px;
  padding: 12px;
  resize: vertical;
}

.secret-message-divider {
  height: 1px;
  margin: 16px 0;
  background: rgba(255,255,255,.12);
}

.secret-inbox-title {
  color: #d6a84f;
  text-align: center;
  margin: 8px 0 10px;
}

.secret-messages-inbox {
  display: grid;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
}

.secret-message-card {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.26);
}

.secret-message-card.sealed {
  cursor: pointer;
  text-align: center;
}

.secret-message-sealed-title {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 6px;
}

.secret-message-sealed-meta {
  color: #a99699;
  font-size: .8rem;
}

.secret-message-card.unread {
  border-color: rgba(214,168,79,.45);
  background: rgba(214,168,79,.08);
}

.secret-message-from {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 5px;
}

.secret-message-text {
  color: #efe8df;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.secret-message-meta {
  margin-top: 8px;
  color: #a99699;
  font-size: .75rem;
}

.secret-message-card button {
  margin-top: 8px;
  padding: 9px;
  font-size: .75rem;
  background: #342332;
}

@media (max-width: 650px) {
  .secret-messages-inbox {
    max-height: 180px;
  }
}
.phase-control-panel,
.challenge-placeholder-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: center;
}

.phase-control-panel h3,
.challenge-placeholder-panel h3 {
  margin-top: 0;
  color: #d6a84f;
}

.challenge-placeholder-panel {
  border-left: 4px solid #9d1723;
}
.challenge-waiting-box,
.active-challenge-box,
.challenge-result-box,
.challenge-host-controls {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.active-challenge-box h3,
.active-challenge-box h4,
.challenge-result-box h4 {
  color: #d6a84f;
  text-align: center;
}

.challenge-instructions,
.challenge-tiebreaker {
  text-align: left;
  line-height: 1.45;
}

.challenge-host-controls label {
  margin-top: 14px;
}

.challenge-host-controls select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}
.voting-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  text-align: center;
}

.voting-panel h3,
.vote-status-box h4,
.voting-result-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.voting-instruction-box,
.vote-form-box,
.vote-status-box,
.voting-result-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.vote-form-box select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

.vote-status-list {
  display: grid;
  gap: 8px;
  text-align: left;
}

.vote-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.08);
}

.vote-status-row.voted {
  border-color: rgba(214,168,79,.35);
}

.vote-status-name {
  color: #efe8df;
}

.vote-status-state {
  color: #d6a84f;
  font-size: .85rem;
}
.final-reveal-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: center;
}

.final-reveal-panel h3,
.final-winner-box h4,
.final-role-list-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.final-winner-box,
.final-role-list-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.final-role-list {
  display: grid;
  gap: 8px;
  text-align: left;
}

.final-role-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.final-role-row.soul {
  opacity: .65;
}

.final-role-name {
  color: #efe8df;
}

.final-role-value {
  color: #d6a84f;
  font-weight: bold;
}
.soul-collection-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(190, 38, 38, .4);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(120, 15, 15, .24), rgba(0,0,0,.38)),
    rgba(0,0,0,.34);
  text-align: center;
  box-shadow: 0 0 18px rgba(120, 15, 15, .18);
}

.soul-collection-panel h3 {
  color: #d6a84f;
  margin-top: 0;
  letter-spacing: .04em;
}

.soul-collection-panel p {
  line-height: 1.45;
}

#soulCollectionText {
  color: #efe8df;
  font-size: 1.02rem;
}

/* ================= HOST JOIN REQUEST ALERT V1 ================= */

.host-join-request-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.host-join-request-alert-overlay.hidden {
  display: none;
}

.host-join-request-alert-card {
  width: min(540px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .97), rgba(0, 0, 0, .97));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.host-join-request-alert-card h2 {
  color: #d6a84f;
  margin: 8px 0 12px;
  letter-spacing: .06em;
}

.host-join-request-alert-card p {
  line-height: 1.45;
}

.host-join-request-alert-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* ================= SECRET MESSAGE ARRIVAL POPUP V1 ================= */

.secret-message-arrival-overlay {
  position: fixed;
  inset: 0;
  z-index: 99997;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.secret-message-arrival-overlay.hidden {
  display: none;
}

.secret-message-arrival-card {
  width: min(520px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.38);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .96), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 38px rgba(0,0,0,.75),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.secret-raven-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.secret-message-arrival-card h2 {
  color: #d6a84f;
  margin: 8px 0 12px;
  letter-spacing: .06em;
}

.secret-message-arrival-card p {
  line-height: 1.45;
}

.secret-message-read-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.secret-message-read-overlay.hidden {
  display: none;
}

.secret-message-read-card {
  width: min(560px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .97), rgba(0, 0, 0, .97));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.secret-message-read-card h3 {
  color: #d6a84f;
  margin: 8px 0 12px;
}

.secret-message-read-text {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  color: #efe8df;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ================= ROLE REVEAL FULL SCREEN OVERLAY ================= */

.role-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .94)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.role-reveal-overlay.hidden {
  display: none;
}

.role-reveal-card {
  width: min(720px, 92vw);
  padding: 32px 24px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .94), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 50px rgba(214, 168, 79, .18),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.role-reveal-card h2 {
  color: #d6a84f;
  font-size: clamp(2.6rem, 11vw, 5.6rem);
  letter-spacing: .1em;
  margin: 18px 0;
  text-transform: uppercase;
  white-space: pre-line;
}

.role-reveal-card h2.role-reveal-warning-title {
  color: #efe8df;
  font-size: clamp(2rem, 9vw, 4.4rem);
  letter-spacing: .08em;
}

.role-reveal-warning {
  color: #efe8df;
  font-style: italic;
  line-height: 1.45;
}

/* ================= DOCTOR DEATH FULL SCREEN OVERLAY ================= */

.doctor-death-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at center, rgba(130, 0, 0, .34), rgba(0, 0, 0, .95)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.doctor-death-overlay.hidden {
  display: none;
}

.doctor-death-card {
  width: min(720px, 92vw);
  padding: 28px;
  border: 1px solid rgba(214, 168, 79, .35);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(35, 0, 0, .9), rgba(0, 0, 0, .96));
  box-shadow:
    0 0 40px rgba(120, 0, 0, .45),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.doctor-death-card h2 {
  color: #d6a84f;
  letter-spacing: .08em;
  margin-top: 0;
}

#doctorDeathText {
  color: #efe8df;
  font-size: 1.2rem;
  line-height: 1.5;
}

.doctor-death-raven-line {
  color: #aaa;
  font-style: italic;
  margin-top: 18px;
}

#closeDoctorDeathOverlayBtn {
  margin-top: 18px;
}

/* ================= END GAME DECISION PLACEHOLDER ================= */

.end-game-decision-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: center;
}

.end-game-decision-panel h3,
.end-game-decision-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.end-game-decision-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.end-game-decision-box p {
  line-height: 1.45;
}

/* ================= END GAME DECISION VOTING V1 ================= */

.end-game-vote-box,
.end-game-status-box,
.end-game-decision-result-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.24);
}

.end-game-vote-box h4,
.end-game-status-box h4,
.end-game-decision-result-box h4 {
  color: #d6a84f;
  margin-top: 0;
}

.end-game-vote-box button {
  margin: 6px;
}

.end-game-vote-status-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.end-game-vote-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.end-game-vote-status-row.voted {
  border-color: rgba(214,168,79,.35);
}

.end-game-vote-name {
  color: #efe8df;
}

.end-game-vote-state {
  color: #d6a84f;
  font-weight: bold;
}
/* ================= FINAL REVEAL POLISH V1 ================= */

.final-role-reveal-row {
  transition:
    opacity 0.75s ease,
    transform 0.75s ease,
    border-color 0.75s ease,
    background 0.75s ease;
}

.final-role-pending {
  opacity: 0;
  transform: translateY(10px);
}

.final-role-visible {
  opacity: 1;
  transform: translateY(0);
}

.final-role-deceiver {
  color: #ff5c5c;
  text-shadow: 0 0 10px rgba(157, 23, 35, .45);
}

.final-role-innocent {
  color: #d6a84f;
}

.final-role-row:has(.final-role-deceiver) {
  border-color: rgba(157, 23, 35, .42);
  background:
    linear-gradient(90deg, rgba(157, 23, 35, .18), rgba(0,0,0,.28));
}
/* ================= FINAL JUDGMENT OVERLAY V1 ================= */

.final-judgment-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .94)),
    rgba(0, 0, 0, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-judgment-overlay.hidden {
  display: none !important;
}

.final-judgment-card {
  width: min(720px, 92vw);
  padding: 30px 24px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .96), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 52px rgba(214, 168, 79, .18),
    inset 0 0 30px rgba(214, 168, 79, .08);
  text-align: center;
}

.final-judgment-card h2 {
  color: #d6a84f;
  font-size: clamp(2.1rem, 8vw, 4.8rem);
  letter-spacing: .1em;
  margin: 14px 0 8px;
  text-transform: uppercase;
}

.final-judgment-card h3 {
  color: #efe8df;
  font-size: clamp(1.15rem, 4vw, 2rem);
  letter-spacing: .08em;
  margin: 8px 0 18px;
  text-transform: uppercase;
}

.final-judgment-body {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  color: #efe8df;
  font-size: 1.1rem;
  line-height: 1.5;
}

.final-judgment-raven-line {
  color: #d6a84f;
  font-style: italic;
  line-height: 1.5;
  margin-top: 16px;
}
/* ================= FINAL REVEAL CINEMATIC OVERLAY V1 ================= */

.final-reveal-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .18), rgba(0, 0, 0, .95)),
    rgba(0, 0, 0, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-reveal-cinematic-overlay.hidden {
  display: none !important;
}

.final-reveal-cinematic-card {
  width: min(760px, 92vw);
  min-height: 420px;
  padding: 34px 24px;
  border: 1px solid rgba(214, 168, 79, .46);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 58px rgba(214, 168, 79, .18),
    inset 0 0 34px rgba(214, 168, 79, .08);
  text-align: center;
  display: grid;
  align-content: center;
}

.final-reveal-cinematic-card h2 {
  color: #d6a84f;
  font-size: clamp(2rem, 8vw, 4.6rem);
  letter-spacing: .1em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-card h3 {
  color: #efe8df;
  font-size: clamp(1.7rem, 7vw, 4.2rem);
  letter-spacing: .08em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-role {
  color: #d6a84f;
  font-size: clamp(2.2rem, 10vw, 5.4rem);
  font-weight: bold;
  letter-spacing: .12em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-reveal-cinematic-subtext {
  color: #a99699;
  font-style: italic;
  line-height: 1.5;
  min-height: 44px;
}

.cinematic-role-deceiver {
  color: #ff5c5c;
  text-shadow: 0 0 18px rgba(157, 23, 35, .7);
}

.cinematic-role-innocent {
  color: #d6a84f;
  text-shadow: 0 0 14px rgba(214, 168, 79, .35);
}

.final-reveal-cinematic-card.cinematic-deceiver-card {
  border-color: rgba(157, 23, 35, .62);
  background:
    radial-gradient(circle at center, rgba(157, 23, 35, .25), rgba(0,0,0,.98)),
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 70px rgba(157, 23, 35, .32),
    inset 0 0 38px rgba(157, 23, 35, .12);
}

.final-reveal-cinematic-card.cinematic-innocent-card {
  border-color: rgba(214, 168, 79, .52);
}
/* ================= FINAL MONEY CELEBRATION OVERLAY V1 ================= */

.final-money-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .24), rgba(0, 0, 0, .96)),
    rgba(0, 0, 0, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.final-money-celebration-overlay.hidden {
  display: none !important;
}

.final-money-celebration-card {
  width: min(780px, 92vw);
  padding: 34px 24px;
  border: 1px solid rgba(214, 168, 79, .54);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(35, 18, 22, .97), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 68px rgba(214, 168, 79, .22),
    inset 0 0 36px rgba(214, 168, 79, .08);
  text-align: center;
}

.final-money-celebration-card h2 {
  color: #d6a84f;
  font-size: clamp(1.8rem, 7vw, 4.2rem);
  letter-spacing: .08em;
  margin: 12px 0;
  text-transform: uppercase;
}

.final-money-subtitle {
  color: #efe8df;
  font-size: 1.1rem;
  line-height: 1.45;
  margin: 10px auto 18px;
  max-width: 620px;
}

.final-money-pot-box {
  margin: 22px auto;
  padding: 20px 14px;
  border: 1px solid rgba(214, 168, 79, .45);
  border-radius: 18px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.18), rgba(0,0,0,.45));
  box-shadow:
    0 0 34px rgba(214, 168, 79, .16),
    inset 0 0 24px rgba(214, 168, 79, .08);
}

.final-money-pot-label {
  color: #a99699;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.final-money-pot-amount {
  color: #d6a84f;
  font-size: clamp(2.8rem, 12vw, 6.4rem);
  font-weight: bold;
  letter-spacing: .04em;
  text-shadow:
    0 0 14px rgba(214,168,79,.42),
    0 0 32px rgba(214,168,79,.22);
}

.final-money-split-line {
  color: #efe8df;
  font-size: clamp(1.25rem, 4vw, 2.15rem);
  font-weight: bold;
  margin: 16px 0 8px;
}

.final-money-raven-line {
  color: #d6a84f;
  font-style: italic;
  line-height: 1.5;
  margin: 16px auto 22px;
  max-width: 620px;
}

/* ================= HIDE FINAL TABLE UNTIL CINEMATIC COMPLETE ================= */

.final-table-hidden-until-complete {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#finalRevealPanel.final-table-hidden-until-complete {
  display: none !important;
}

/* ================= PERMANENT RAVEN CLOCK PANEL - STRONG VERSION ================= */

.legacy-phase-timer-box {
  display: none !important;
}

.phase-timer-hidden-during-voting {
  display: none !important;
}

#ravenClockPanel,
.raven-clock-panel {
  position: relative !important;
  z-index: 50 !important;
  width: min(520px, 94vw);
  margin: 18px auto 46px !important;
  padding: 22px 16px 20px;
  border: 2px solid rgba(214, 168, 79, .72);
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.24), rgba(0,0,0,.74)),
    linear-gradient(180deg, rgba(40,20,12,.92), rgba(0,0,0,.9));
  box-shadow:
    0 0 44px rgba(214,168,79,.32),
    0 0 90px rgba(120,35,20,.22),
    inset 0 0 28px rgba(214,168,79,.12);
  text-align: center;
  pointer-events: none;
}

.raven-clock-label {
  color: #d6a84f;
  font-size: .82rem;
  font-weight: bold;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(214,168,79,.35);
}

.raven-clock-value {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: .95;
  text-shadow:
    0 0 14px rgba(214,168,79,.6),
    0 0 34px rgba(214,168,79,.34),
    0 0 70px rgba(120,35,20,.28);
}

.raven-clock-countdown-mode .raven-clock-value {
  font-size: clamp(3.25rem, 11vw, 6.4rem);
}

.raven-clock-status-mode .raven-clock-value {
  font-size: clamp(1.65rem, 6vw, 3.1rem);
  letter-spacing: .14em;
  opacity: .82;
}
.raven-clock-subtext {
  margin-top: 12px;
  color: #efe8df;
  font-size: .92rem;
  font-style: italic;
  opacity: .9;
}

/* Adds breathing room so the table/player names cannot cover the clock */
.game-layout {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.room-table {
  position: relative;
  z-index: 1;
}
/* ================= ROLE REVEAL HEARTBEAT BUTTON V1 ================= */

#revealRoleBtn {
  position: relative;
  overflow: hidden;
}

#revealRoleBtn:not(.hidden) {
  animation: roleRevealHeartbeat 2.15s ease-in-out infinite;
  box-shadow:
    0 0 18px rgba(157, 23, 35, .38),
    0 0 38px rgba(214, 168, 79, .12);
}

#revealRoleBtn:not(.hidden)::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.28), transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: roleRevealGlowBreath 2.15s ease-in-out infinite;
}

#revealRoleBtn:not(.hidden)::after {
  content: "THE RAVEN WAITS";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.62);
  font-size: .58rem;
  letter-spacing: .16em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  animation: roleRevealWhisper 4.3s ease-in-out infinite;
}

@keyframes roleRevealHeartbeat {
  0% {
    transform: scale(1);
    background: #9d1723;
  }

  10% {
    transform: scale(1.035);
    background: #b51b29;
  }

  18% {
    transform: scale(1);
  }

  28% {
    transform: scale(1.055);
    background: #c21f2e;
  }

  40% {
    transform: scale(1);
    background: #9d1723;
  }

  100% {
    transform: scale(1);
    background: #9d1723;
  }
}

@keyframes roleRevealGlowBreath {
  0%, 42%, 100% {
    opacity: 0;
  }

  12% {
    opacity: .45;
  }

  28% {
    opacity: .7;
  }
}

@keyframes roleRevealWhisper {
  0%, 45%, 100% {
    opacity: 0;
  }

  58%, 78% {
    opacity: .72;
  }
}
/* ================= HOST COMMAND CONTROLS V1 ================= */

.phase-control-panel,
.challenge-host-controls {
  position: relative;
  border: 2px solid rgba(214, 168, 79, .72) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(47, 20, 10, .92), rgba(0, 0, 0, .88)) !important;
  box-shadow:
    0 0 34px rgba(214,168,79,.22),
    0 0 70px rgba(157,23,35,.14),
    inset 0 0 24px rgba(214,168,79,.08);
  animation: hostCommandGlow 3.4s ease-in-out infinite;
}

.phase-control-panel::before,
.challenge-host-controls::before {
  content: "HOST COMMAND";
  display: inline-block;
  margin: -4px auto 10px;
  padding: 6px 12px;
  border: 1px solid rgba(214,168,79,.6);
  border-radius: 999px;
  background: rgba(0,0,0,.56);
  color: #d6a84f;
  font-size: .72rem;
  font-weight: bold;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(214,168,79,.18);
}

.phase-control-panel h3,
.challenge-host-controls h3,
.challenge-host-controls label {
  color: #d6a84f !important;
}

.phase-control-panel .hint,
.challenge-host-controls .hint {
  color: #efe8df;
}

.phase-control-panel button,
.challenge-host-controls button,
#finalizeVotingBtn:not(.hidden),
#continueNextRoundBtn:not(.hidden),
#proceedEndGameDecisionBtn:not(.hidden),
#proceedFinalRevealBtn:not(.hidden),
#finalizeEndGameDecisionBtn:not(.hidden) {
  border: 1px solid rgba(255, 226, 150, .55);
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  color: #fff;
  font-weight: bold;
  letter-spacing: .11em;
  box-shadow:
    0 0 22px rgba(157,23,35,.42),
    0 0 34px rgba(214,168,79,.12);
  animation: hostButtonPulse 2.4s ease-in-out infinite;
}

.phase-control-panel button::before,
.challenge-host-controls button::before,
#finalizeVotingBtn:not(.hidden)::before,
#continueNextRoundBtn:not(.hidden)::before,
#proceedEndGameDecisionBtn:not(.hidden)::before,
#proceedFinalRevealBtn:not(.hidden)::before,
#finalizeEndGameDecisionBtn:not(.hidden)::before {
  content: "👑 ";
}

.challenge-host-controls select {
  border: 1px solid rgba(214,168,79,.42) !important;
  background: #120b0d !important;
  box-shadow: inset 0 0 14px rgba(214,168,79,.08);
}

@keyframes hostCommandGlow {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(214,168,79,.14),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.06);
  }

  50% {
    box-shadow:
      0 0 42px rgba(214,168,79,.3),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 28px rgba(214,168,79,.1);
  }
}

@keyframes hostButtonPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.025);
    filter: brightness(1.15);
  }
}
/* ================= HOST COMMAND TOP BANNER V1 ================= */

.host-command-banner {
  position: sticky;
  top: 10px;
  z-index: 200;
  width: min(620px, 94vw);
  margin: 14px auto 18px;
  padding: 16px 14px;
  border: 2px solid rgba(214, 168, 79, .78);
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(55, 20, 12, .96), rgba(0, 0, 0, .94));
  box-shadow:
    0 0 38px rgba(214,168,79,.28),
    0 0 80px rgba(157,23,35,.18),
    inset 0 0 24px rgba(214,168,79,.1);
  text-align: center;
  animation: hostCommandBannerGlow 3.2s ease-in-out infinite;
}

.host-command-banner-label {
  color: #d6a84f;
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 12px rgba(214,168,79,.38);
}

.host-command-banner-text {
  color: #efe8df;
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.host-command-jump-btn {
  width: auto;
  min-width: 220px;
  margin: 4px auto 0;
  padding: 11px 18px;
  border: 1px solid rgba(255, 226, 150, .58);
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  color: #fff;
  font-weight: bold;
  letter-spacing: .12em;
  box-shadow:
    0 0 24px rgba(157,23,35,.42),
    0 0 38px rgba(214,168,79,.12);
  animation: hostCommandJumpPulse 2.1s ease-in-out infinite;
}

.host-command-jump-btn::before {
  content: "👑 ";
}

.host-command-attention {
  animation: hostCommandAttentionFlash 1.8s ease-in-out;
}

@keyframes hostCommandBannerGlow {
  0%, 100% {
    box-shadow:
      0 0 26px rgba(214,168,79,.18),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.08);
  }

  50% {
    box-shadow:
      0 0 44px rgba(214,168,79,.34),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 30px rgba(214,168,79,.12);
  }
}

@keyframes hostCommandJumpPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.035);
    filter: brightness(1.18);
  }
}

@keyframes hostCommandAttentionFlash {
  0%, 100% {
    box-shadow:
      0 0 34px rgba(214,168,79,.22),
      0 0 70px rgba(157,23,35,.14),
      inset 0 0 24px rgba(214,168,79,.08);
  }

  35%, 70% {
    box-shadow:
      0 0 70px rgba(214,168,79,.55),
      0 0 120px rgba(157,23,35,.32),
      inset 0 0 38px rgba(214,168,79,.18);
    transform: scale(1.015);
  }
}
/* ================= CLEAN STATUS ROW AFTER RAVEN CLOCK ================= */

.game-status-row {
  grid-template-columns: repeat(3, 1fr) !important;
}

.legacy-phase-timer-box {
  display: none !important;
}
/* ================= SHIELD CHOICE / RAVEN DAGGER V1 ================= */

.shield-choice-panel {
  margin-top: 18px;
  padding: 18px;
  border: 2px solid rgba(214, 168, 79, .72);
  border-radius: 20px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.2), rgba(0,0,0,.52)),
    linear-gradient(180deg, rgba(45, 20, 11, .94), rgba(0,0,0,.9));
  box-shadow:
    0 0 42px rgba(214,168,79,.22),
    0 0 80px rgba(157,23,35,.16),
    inset 0 0 24px rgba(214,168,79,.09);
  text-align: center;
  animation: shieldChoiceGlow 3.2s ease-in-out infinite;
}

.shield-choice-panel h3 {
  color: #d6a84f;
  margin-top: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.shield-choice-warning {
  color: #efe8df;
  font-size: 1.05rem;
  font-weight: bold;
}

.shield-choice-box {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  text-align: left;
}

.shield-choice-box p {
  margin: 8px 0;
  line-height: 1.45;
}

.shield-choice-panel select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.42);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

#keepShieldChoiceBtn {
  background:
    linear-gradient(180deg, #b7842f, #7a4d12) !important;
  color: #120b05;
  font-weight: bold;
}

#transferShieldChoiceBtn {
  background:
    linear-gradient(180deg, #5e3c70, #2c1938) !important;
}

#convertShieldToDaggerBtn {
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  border: 1px solid rgba(255, 226, 150, .44);
  box-shadow:
    0 0 22px rgba(157,23,35,.35),
    0 0 34px rgba(214,168,79,.1);
}

@keyframes shieldChoiceGlow {
  0%, 100% {
    box-shadow:
      0 0 28px rgba(214,168,79,.14),
      0 0 60px rgba(157,23,35,.1),
      inset 0 0 20px rgba(214,168,79,.07);
  }

  50% {
    box-shadow:
      0 0 46px rgba(214,168,79,.3),
      0 0 90px rgba(157,23,35,.2),
      inset 0 0 30px rgba(214,168,79,.12);
  }
}
/* ================= SHIELD / DAGGER VOTING NOTICES V1 ================= */

.dagger-vote-notice,
.shield-vote-notice {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 16px;
  text-align: center;
  animation: tablePowerNoticeGlow 3s ease-in-out infinite;
}

.dagger-vote-notice {
  border: 2px solid rgba(157, 23, 35, .72);
  background:
    radial-gradient(circle at top, rgba(157,23,35,.28), rgba(0,0,0,.48)),
    linear-gradient(180deg, rgba(40, 5, 8, .96), rgba(0,0,0,.9));
  box-shadow:
    0 0 36px rgba(157,23,35,.34),
    inset 0 0 22px rgba(214,168,79,.08);
}

.shield-vote-notice {
  border: 2px solid rgba(214, 168, 79, .72);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.24), rgba(0,0,0,.48)),
    linear-gradient(180deg, rgba(46, 27, 9, .96), rgba(0,0,0,.9));
  box-shadow:
    0 0 36px rgba(214,168,79,.28),
    inset 0 0 22px rgba(214,168,79,.08);
}

.dagger-vote-notice h4,
.shield-vote-notice h4 {
  color: #d6a84f;
  margin: 0 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dagger-vote-notice p,
.shield-vote-notice p {
  margin: 6px 0;
}

@keyframes tablePowerNoticeGlow {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.12);
  }
}
/* ================= RAVEN CLOCK DANGER MODE ================= */

.raven-clock-danger-mode {
  border-color: rgba(255, 78, 78, .82) !important;
  box-shadow:
    0 0 54px rgba(255, 78, 78, .42),
    0 0 92px rgba(214,168,79,.22),
    inset 0 0 30px rgba(255, 78, 78, .13) !important;
  animation: ravenClockDangerPulse 1.1s ease-in-out infinite;
}

.raven-clock-danger-mode .raven-clock-value {
  color: #ff6b6b;
  text-shadow:
    0 0 16px rgba(255, 78, 78, .74),
    0 0 38px rgba(255, 78, 78, .42),
    0 0 74px rgba(214,168,79,.22);
}

@keyframes ravenClockDangerPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.035);
    filter: brightness(1.2);
  }
}
/* ================= MOBILE / SCREEN CENTERING FIX V1 ================= */

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

.app-shell,
main,
.panel,
.game-room-panel {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.panel,
.game-room-panel {
  box-sizing: border-box;
}

@media (max-width: 700px) {
  body {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-shell,
  main,
  .panel,
  .game-room-panel {
    width: 100%;
    max-width: 100%;
  }

  .game-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .table-panel,
  .raven-side-panel,
  .players-panel,
  .challenge-panel,
  .voting-panel,
  .phase-control-panel,
  .host-command-banner,
  .raven-clock-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .game-status-row {
    width: 100%;
    grid-template-columns: 1fr !important;
  }

  .game-status-row > div {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ================= FINAL MONEY SCREEN MOBILE CLIPPING FIX V1 ================= */

.final-money-celebration-overlay {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 24px 14px !important;
  box-sizing: border-box !important;
}

.final-money-celebration-card {
  width: min(94vw, 680px) !important;
  max-height: none !important;
  margin: 18px auto 32px !important;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.final-money-celebration-card img,
.final-money-celebration-card .raven-icon,
.final-money-celebration-card .final-money-raven,
.final-money-celebration-card .final-raven-icon {
  display: block !important;
  max-width: 96px !important;
  max-height: 96px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 14px !important;
  object-fit: contain !important;
  overflow: visible !important;
}

.final-money-celebration-card button,
.final-money-celebration-card .primary-btn,
.final-money-celebration-card .danger-btn {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  min-height: 48px !important;
  margin: 18px auto 0 !important;
  white-space: normal !important;
}

@media (max-width: 700px) {
  .final-money-celebration-overlay {
    padding-top: 18px !important;
    padding-bottom: 26px !important;
  }

  .final-money-celebration-card {
    width: 94vw !important;
    margin-top: 8px !important;
    margin-bottom: 28px !important;
    padding: 22px 16px 24px !important;
  }

  .final-money-pot-amount {
    font-size: clamp(2rem, 11vw, 3.2rem) !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }
}
/* ================= DOCTOR DEATH / LAST WORDS OVERLAYS V1 ================= */

.death-cinematic-overlay,
.last-words-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(circle at top, rgba(120, 0, 0, .32), transparent 42%),
    radial-gradient(circle at bottom, rgba(214, 168, 79, .12), transparent 38%),
    rgba(0, 0, 0, .92);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.death-cinematic-card,
.last-words-card {
  width: min(94vw, 680px);
  margin: 18px auto 34px;
  padding: 24px 18px;
  border-radius: 22px;
  border: 2px solid rgba(120, 0, 0, .74);
  background:
    linear-gradient(180deg, rgba(24, 4, 6, .98), rgba(5, 5, 8, .98)),
    radial-gradient(circle at center, rgba(214, 168, 79, .12), transparent 62%);
  box-shadow:
    0 0 48px rgba(120, 0, 0, .52),
    0 0 92px rgba(0, 0, 0, .82),
    inset 0 0 28px rgba(214, 168, 79, .08);
  text-align: center;
  box-sizing: border-box;
  animation: deathCardRise 520ms ease-out;
}

.death-cinematic-card h2,
.last-words-card h2 {
  margin: 10px 0 14px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214, 168, 79, .45),
    0 0 38px rgba(120, 0, 0, .38);
}

.death-cinematic-card p,
.last-words-card p {
  color: rgba(255, 255, 255, .86);
  line-height: 1.5;
}

.death-cinematic-kicker,
.last-words-kicker {
  color: rgba(255, 255, 255, .64);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 14px;
}

.death-image-placeholder {
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(214, 168, 79, .34);
  background:
    radial-gradient(circle at 70% 35%, rgba(214, 168, 79, .18), transparent 26%),
    radial-gradient(circle at 30% 70%, rgba(120, 0, 0, .36), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,.96), rgba(35, 6, 10, .96));
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, .68),
    0 0 24px rgba(120, 0, 0, .26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 18px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.death-image-placeholder::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.05) 45%, transparent 72%);
  transform: rotate(8deg);
  animation: deathImageSweep 4.8s ease-in-out infinite;
}

.death-image-label {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214, 168, 79, .42);
  position: relative;
  z-index: 1;
}

.death-image-subtext {
  color: rgba(255, 255, 255, .58);
  font-size: .86rem;
  max-width: 440px;
  position: relative;
  z-index: 1;
}

.death-cinematic-warning {
  margin: 16px auto;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(214, 168, 79, .34);
  background: rgba(0, 0, 0, .34);
  color: #f0c15c !important;
  font-weight: 700;
}

.death-cinematic-btn {
  margin-top: 16px;
  min-height: 48px;
  width: min(100%, 360px);
  border-radius: 14px;
  border: 1px solid rgba(214, 168, 79, .5);
  background:
    linear-gradient(180deg, #9d1723, #650b13);
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow:
    0 0 24px rgba(157, 23, 35, .42),
    inset 0 0 12px rgba(255, 255, 255, .08);
}

.death-cinematic-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.last-words-intro {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.last-words-timer-row {
  margin: 16px auto 18px;
  padding: 12px 14px;
  width: min(100%, 420px);
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 79, .38);
  background: rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.last-words-timer-row span {
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 800;
}

#lastWordsTimerDisplay {
  color: #f0c15c;
  font-size: 1.45rem;
  text-shadow:
    0 0 12px rgba(214, 168, 79, .52),
    0 0 28px rgba(157, 23, 35, .32);
}

.last-words-timer-danger #lastWordsTimerDisplay {
  color: #ff6b6b;
  animation: lastWordsTimerPulse 1s ease-in-out infinite;
}

.last-words-slots {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.last-words-slot {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 79, .25);
  background: rgba(0, 0, 0, .38);
  display: grid;
  gap: 9px;
  text-align: left;
}

.last-words-slot label {
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.last-words-slot select {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(214, 168, 79, .32);
  background: rgba(8, 8, 10, .96);
  color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
}

.last-words-hint {
  margin-top: 14px;
  color: rgba(255, 255, 255, .62) !important;
  font-style: italic;
}

.raven-feed-last-words {
  border: 2px solid rgba(214, 168, 79, .74) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(45, 7, 11, .96), rgba(0,0,0,.9)) !important;
  box-shadow:
    0 0 32px rgba(214,168,79,.28),
    0 0 52px rgba(157,23,35,.22) !important;
  animation: lastWordsFeedGlow 3s ease-in-out infinite;
}

@keyframes deathCardRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes deathImageSweep {
  0%, 100% {
    transform: translateX(-42%) rotate(8deg);
    opacity: .22;
  }

  50% {
    transform: translateX(42%) rotate(8deg);
    opacity: .44;
  }
}

@keyframes lastWordsTimerPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.12);
    filter: brightness(1.22);
  }
}

@keyframes lastWordsFeedGlow {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.18);
  }
}

@media (max-width: 700px) {
  .death-cinematic-overlay,
  .last-words-overlay {
    padding: 14px 10px 24px;
  }

  .death-cinematic-card,
  .last-words-card {
    width: 94vw;
    margin-top: 8px;
    padding: 20px 14px 22px;
    border-radius: 18px;
  }

  .death-image-placeholder {
    min-height: 150px;
  }

  .death-cinematic-card h2,
  .last-words-card h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .last-words-timer-row {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}
/* ================= RAVEN FEED LAST WORDS POLISH V1 ================= */

.raven-feed-last-words-title {
  color: #f0c15c;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
  text-shadow:
    0 0 10px rgba(214,168,79,.48),
    0 0 24px rgba(157,23,35,.32);
}

.raven-feed-last-words-message {
  color: rgba(255,255,255,.92);
  font-style: italic;
  line-height: 1.45;
}
/* ================= LAST WORDS BROADCAST POPUP V1 ================= */

.last-words-broadcast-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 38%),
    radial-gradient(circle at bottom, rgba(120,0,0,.32), transparent 42%),
    rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
}

.last-words-broadcast-card {
  width: min(94vw, 620px);
  padding: 24px 18px;
  border-radius: 22px;
  border: 2px solid rgba(214,168,79,.76);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 48%),
    linear-gradient(180deg, rgba(34,5,8,.98), rgba(3,3,6,.98));
  box-shadow:
    0 0 44px rgba(214,168,79,.34),
    0 0 82px rgba(157,23,35,.28),
    inset 0 0 28px rgba(214,168,79,.08);
  text-align: center;
  animation: lastWordsBroadcastRise 460ms ease-out;
}

.last-words-broadcast-kicker {
  color: rgba(255,255,255,.66);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.last-words-broadcast-card h2 {
  margin: 0 0 16px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214,168,79,.5),
    0 0 34px rgba(157,23,35,.38);
}

.last-words-broadcast-card p {
  color: rgba(255,255,255,.9);
  font-style: italic;
  line-height: 1.5;
  margin: 0 auto 18px;
  max-width: 520px;
}

@keyframes lastWordsBroadcastRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 700px) {
  .last-words-broadcast-card {
    padding: 22px 14px;
  }

  .last-words-broadcast-card h2 {
    font-size: clamp(1.25rem, 7vw, 1.9rem);
  }
}
/* ================= CHARACTER INTRO MONTAGE PLACEHOLDER V1 ================= */

.character-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 36%),
    radial-gradient(circle at bottom, rgba(120,0,0,.34), transparent 42%),
    rgba(0,0,0,.94);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.character-intro-card {
  width: min(94vw, 720px);
  margin: 16px auto 34px;
  padding: 24px 18px;
  border-radius: 24px;
  border: 2px solid rgba(214,168,79,.58);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.16), transparent 46%),
    linear-gradient(180deg, rgba(20,4,7,.98), rgba(3,3,8,.98));
  box-shadow:
    0 0 54px rgba(214,168,79,.24),
    0 0 94px rgba(157,23,35,.28),
    inset 0 0 30px rgba(214,168,79,.07);
  text-align: center;
  box-sizing: border-box;
  animation: characterIntroRise 520ms ease-out;
}

.character-intro-image-placeholder {
  min-height: 240px;
  border-radius: 20px;
  border: 1px solid rgba(214,168,79,.36);
  background:
    radial-gradient(circle at 50% 28%, rgba(214,168,79,.18), transparent 28%),
    radial-gradient(circle at 70% 75%, rgba(157,23,35,.28), transparent 34%),
    linear-gradient(135deg, rgba(0,0,0,.98), rgba(28,5,9,.98));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 0 44px rgba(0,0,0,.72),
    0 0 28px rgba(157,23,35,.2);
}

.character-intro-image-placeholder::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.055) 45%, transparent 72%);
  transform: rotate(8deg);
  animation: characterIntroSweep 4.6s ease-in-out infinite;
}

.character-intro-image-label {
  position: relative;
  z-index: 1;
  color: #f0c15c;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-shadow:
    0 0 16px rgba(214,168,79,.46),
    0 0 34px rgba(157,23,35,.3);
}

.character-intro-kicker {
  margin-top: 18px;
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.character-intro-card h2 {
  margin: 10px 0 12px;
  color: #f0c15c;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.08;
  text-shadow:
    0 0 14px rgba(214,168,79,.48),
    0 0 36px rgba(157,23,35,.34);
}

.character-intro-card p {
  max-width: 580px;
  margin: 0 auto;
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  font-size: 1rem;
}

.character-intro-progress {
  margin: 18px auto 0;
  color: rgba(255,255,255,.55);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

.character-intro-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.character-intro-actions button {
  min-width: 150px;
  min-height: 46px;
}

@keyframes characterIntroRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes characterIntroSweep {
  0%, 100% {
    transform: translateX(-42%) rotate(8deg);
    opacity: .22;
  }

  50% {
    transform: translateX(42%) rotate(8deg);
    opacity: .44;
  }
}

@media (max-width: 700px) {
  .character-intro-overlay {
    padding: 14px 10px 24px;
  }

  .character-intro-card {
    width: 94vw;
    margin-top: 8px;
    padding: 20px 14px 22px;
    border-radius: 20px;
  }

  .character-intro-image-placeholder {
    min-height: 170px;
  }

  .character-intro-card h2 {
    font-size: clamp(1.35rem, 7vw, 2rem);
  }

  .character-intro-actions {
    flex-direction: column-reverse;
  }

  .character-intro-actions button {
    width: 100%;
  }
}
/* ================= HARD HIDE SAFETY FIX ================= */

[hidden] {
  display: none !important;
}

.character-intro-overlay.hidden,
.death-cinematic-overlay.hidden,
.last-words-overlay.hidden,
.last-words-broadcast-overlay.hidden {
  display: none !important;
}

/* ================= MOBILE RIGHT-SHIFT / OVERFLOW FIX V2 ================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

#app,
.landing-page,
.game-room-panel,
.panel,
.game-layout,
.table-side-panel,
.raven-side-panel,
.room-table,
.raven-clock-panel,
.host-command-banner {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  body {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .landing-page,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  .landing-content,
  .panel,
  .game-room-panel {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .game-layout {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: hidden !important;
  }

  .raven-side-panel,
  .table-side-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .room-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .room-player-seat {
    max-width: 86px !important;
    font-size: .74rem !important;
    padding: 6px !important;
  }

  button,
  input,
  select,
  textarea {
    max-width: 100% !important;
  }
}
/* ================= STUDY THE MASKS BUTTON V1 ================= */

.study-masks-btn {
  margin: 10px auto 14px;
  padding: 10px 12px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(214,168,79,.38);
  background:
    linear-gradient(180deg, rgba(52,35,50,.96), rgba(14,9,17,.96));
  color: #d6a84f;
  font-size: .78rem;
  font-weight: bold;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow:
    0 0 18px rgba(214,168,79,.1),
    inset 0 0 12px rgba(214,168,79,.05);
}

.study-masks-btn:hover {
  filter: brightness(1.12);
}
/* ================= ROLE REVEAL WAITING THROB V1 ================= */

.raven-waiting-after-role-reveal {
  border-color: rgba(214, 168, 79, .92) !important;
  animation: ravenWaitingRoleRevealPanelPulse 2.2s ease-in-out infinite;
}

.raven-waiting-after-role-reveal .raven-clock-subtext {
  color: #f0c15c !important;
  font-weight: bold;
  animation: ravenWaitingRoleRevealTextThrob 1.45s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(214, 168, 79, .55),
    0 0 24px rgba(214, 168, 79, .28);
}

.raven-waiting-after-role-reveal .raven-clock-value {
  animation: ravenWaitingRoleRevealValueGlow 1.8s ease-in-out infinite;
}

@keyframes ravenWaitingRoleRevealTextThrob {
  0%, 100% {
    opacity: .62;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.045);
  }
}

@keyframes ravenWaitingRoleRevealValueGlow {
  0%, 100% {
    filter: brightness(.92);
  }

  50% {
    filter: brightness(1.25);
  }
}

@keyframes ravenWaitingRoleRevealPanelPulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(214,168,79,.22),
      0 0 70px rgba(120,35,20,.16),
      inset 0 0 24px rgba(214,168,79,.08);
  }

  50% {
    box-shadow:
      0 0 54px rgba(214,168,79,.42),
      0 0 110px rgba(120,35,20,.26),
      inset 0 0 34px rgba(214,168,79,.14);
  }
}
.studio-tag {
  margin: -2px 0 10px;
  color: rgba(214, 168, 79, .78);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: bold;
}
/* ================= CHALLENGE MODE PICKER V1 ================= */

.challenge-mode-panel {
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.35);
  border-radius: 14px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 55%),
    rgba(0,0,0,.35);
}

.challenge-mode-panel label {
  display: block;
  margin-bottom: 8px;
  color: #d6a84f;
  font-weight: bold;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

.challenge-mode-panel select {
  width: 100%;
  margin-bottom: 10px;
}

/* ================= RAVEN PREFERENCE PANEL V1 ================= */

.raven-preference-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 58%),
    rgba(0,0,0,.30);
  text-align: center;
}

.raven-preference-title {
  margin-top: 0;
  color: #d6a84f;
  letter-spacing: .08em;
}

.raven-preference-copy,
.raven-preference-description {
  color: #efe8df;
  font-style: italic;
  line-height: 1.45;
}

.raven-preference-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.raven-preference-grid label {
  margin-top: 0;
}

.raven-preference-grid select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.32);
  background: #0f0b12;
  color: white;
  font-family: Georgia, "Times New Roman", serif;
}

#submitRavenPreferenceBtn {
  margin-top: 8px;
}

#ravenPreferenceStatus {
  color: #d6a84f;
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .raven-preference-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= FINAL CHARACTER / RAVEN / DOCTOR DEATH IMAGE INTEGRATION V1 ================= */

/* ---------- Raven UI Images ---------- */

.raven-ui-icon {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 12px;
  filter:
    drop-shadow(0 0 14px rgba(214, 168, 79, .28))
    drop-shadow(0 0 22px rgba(0, 0, 0, .65));
}

.raven-secret-alert-image {
  display: block;
  width: min(220px, 72vw);
  max-height: 180px;
  object-fit: contain;
  margin: 0 auto 14px;
  border-radius: 16px;
  filter:
    drop-shadow(0 0 16px rgba(214, 168, 79, .25))
    drop-shadow(0 0 26px rgba(0, 0, 0, .72));
}

.secret-message-arrival-card .raven-secret-alert-image {
  margin-top: -4px;
}

.secret-message-read-card .raven-ui-icon,
.host-join-request-alert-card .raven-ui-icon {
  margin-bottom: 10px;
}


/* ---------- Character Intro Montage Images ---------- */

.character-intro-card {
  width: min(94vw, 760px);
}

.character-intro-image {
  display: block;
  width: min(100%, 520px);
  max-height: min(62vh, 680px);
  margin: 0 auto 18px;
  border-radius: 20px;
  border: 1px solid rgba(214, 168, 79, .42);
  object-fit: contain;
  background:
    radial-gradient(circle at center, rgba(214, 168, 79, .12), rgba(0, 0, 0, .72)),
    rgba(0, 0, 0, .62);
  box-shadow:
    0 0 34px rgba(214, 168, 79, .18),
    0 0 62px rgba(157, 23, 35, .18),
    inset 0 0 24px rgba(0, 0, 0, .58);
}

.character-intro-card h2 {
  margin-top: 10px;
}

.character-intro-card p {
  max-width: 640px;
}

.character-intro-kicker {
  margin-top: 12px;
}


/* ---------- Doctor Death Main Overlay Image ---------- */

.doctor-death-card {
  width: min(760px, 94vw);
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(18, 2, 4, .98), rgba(0, 0, 0, .98));
}

.doctor-death-overlay-image {
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid rgba(214, 168, 79, .32);
}

.doctor-death-overlay-content {
  padding: 24px 22px 26px;
}

.doctor-death-overlay-content h2 {
  margin-top: 0;
}


/* ---------- Doctor Death Elimination / Last Words Images ---------- */

.death-image-frame {
  width: 100%;
  min-height: 180px;
  border-radius: 18px;
  border: 1px solid rgba(214, 168, 79, .34);
  background:
    radial-gradient(circle at center, rgba(120, 0, 0, .2), rgba(0, 0, 0, .74)),
    rgba(0, 0, 0, .78);
  box-shadow:
    inset 0 0 38px rgba(0, 0, 0, .68),
    0 0 24px rgba(120, 0, 0, .26);
  overflow: hidden;
}

.death-cinematic-image {
  display: block;
  width: 100%;
  height: clamp(190px, 42vh, 420px);
  object-fit: cover;
  object-position: center;
}

.personal-death-card .death-cinematic-image {
  object-position: center;
}

.living-death-card .death-cinematic-image {
  object-position: center;
}


/* ---------- Mobile Polish ---------- */

@media (max-width: 700px) {
  .raven-ui-icon {
    width: 76px;
    height: 76px;
  }

  .raven-secret-alert-image {
    width: min(190px, 78vw);
    max-height: 150px;
  }

  .character-intro-image {
    width: 100%;
    max-height: 58vh;
    border-radius: 16px;
  }

  .character-intro-card {
    width: 94vw;
    padding: 18px 12px 20px;
  }

  .doctor-death-overlay-image {
    max-height: 48vh;
  }

  .doctor-death-overlay-content {
    padding: 20px 16px 22px;
  }

  .death-cinematic-image {
    height: clamp(170px, 34vh, 320px);
  }
}
/* ================= DOCTOR DEATH FULL IMAGE VISIBILITY FIX V1 ================= */

.doctor-death-overlay-image {
  width: 100% !important;
  max-height: min(70vh, 760px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050305 !important;
}

.death-cinematic-image {
  width: 100% !important;
  height: auto !important;
  max-height: min(56vh, 620px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #050305 !important;
}

.death-image-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 240px !important;
  background:
    radial-gradient(circle at center, rgba(120, 0, 0, .2), rgba(0, 0, 0, .88)),
    #050305 !important;
}
/* ================= FINAL JUDGMENT RAVEN EMBLEM FIX V1 ================= */

.final-money-celebration-card .final-money-raven {
  display: block !important;
  width: 118px !important;
  height: 118px !important;
  max-width: 118px !important;
  max-height: 118px !important;
  object-fit: contain !important;
  margin: 0 auto 16px !important;
  filter:
    drop-shadow(0 0 16px rgba(214, 168, 79, .32))
    drop-shadow(0 0 26px rgba(0, 0, 0, .72));
}

/* ================= BASIC RULES MODAL / BUTTON V1 ================= */

.see-rules-btn {
  margin: 12px 0 10px;
  background: linear-gradient(180deg, #b7842f, #7a4d12);
  color: #120b05;
  border: 1px solid rgba(255, 226, 150, .55);
  box-shadow:
    0 0 18px rgba(214,168,79,.18),
    inset 0 0 12px rgba(255,255,255,.08);
  font-weight: bold;
  letter-spacing: .08em;
}

.see-rules-btn.rules-throb {
  animation: seeRulesThrob 1.45s ease-in-out infinite;
}

@keyframes seeRulesThrob {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 18px rgba(214,168,79,.2),
      inset 0 0 12px rgba(255,255,255,.08);
  }

  50% {
    transform: scale(1.045);
    filter: brightness(1.18);
    box-shadow:
      0 0 34px rgba(214,168,79,.48),
      0 0 70px rgba(157,23,35,.18),
      inset 0 0 18px rgba(255,255,255,.12);
  }
}

.basic-rules-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px;
  overflow-y: auto;
  box-sizing: border-box;
}

.basic-rules-overlay.hidden {
  display: none !important;
}

.basic-rules-card {
  width: min(760px, 94vw);
  margin: 20px auto 34px;
  padding: 24px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(24, 14, 22, .98), rgba(0, 0, 0, .98));
  box-shadow:
    0 0 44px rgba(0,0,0,.8),
    inset 0 0 24px rgba(214,168,79,.08);
  text-align: center;
}

.basic-rules-card h2 {
  color: #d6a84f;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 18px;
}

.basic-rules-body {
  max-height: 62vh;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(0,0,0,.34);
  text-align: left;
}

.basic-rules-body h3 {
  color: #d6a84f;
  margin: 18px 0 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.basic-rules-body h3:first-child {
  margin-top: 0;
}

.basic-rules-body p {
  margin: 8px 0;
  line-height: 1.48;
}

/* ================= RAVEN'S QUIZ V1 ================= */

.raven-quiz-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(214, 168, 79, .32);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.11), rgba(0,0,0,.26)),
    rgba(0,0,0,.3);
  text-align: left;
}

.raven-quiz-panel h4 {
  color: #d6a84f;
  margin: 0 0 8px;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.raven-quiz-panel .raven-quiz-subtitle {
  color: #efe8df;
  text-align: center;
  font-style: italic;
  margin: 6px 0 14px;
}

.raven-quiz-question {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(0,0,0,.24);
}

.raven-quiz-question-title {
  color: #d6a84f;
  font-weight: bold;
  margin-bottom: 8px;
}

.raven-quiz-choice-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0;
  color: #efe8df;
}

.raven-quiz-choice-row input {
  width: auto;
  margin: 2px 0 0;
}

.raven-quiz-standings {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.raven-quiz-standing-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.26);
}

.raven-quiz-standing-row.raven-quiz-top-row {
  border-color: rgba(214,168,79,.48);
  background: rgba(214,168,79,.08);
}

.raven-quiz-standing-name {
  color: #efe8df;
  font-weight: bold;
}

.raven-quiz-standing-score {
  color: #d6a84f;
  white-space: nowrap;
}

@media (max-width: 650px) {
  .raven-quiz-standing-row {
    display: grid;
    gap: 4px;
  }
}
/* Prevent iPhone double-tap zoom during Raven's Path */
.raven-path-panel,
.raven-path-panel *,
.raven-path-game,
.raven-path-game *,
.raven-path-controls,
.raven-path-controls *,
.raven-path-control-btn,
.raven-path-canvas {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* ================= THE RAVEN'S PLACEMENT V3 - CINEMATIC SCREEN ================= */

.raven-placement-active > :not(#ravenJudgmentPanel) {
  display: none !important;
}

.raven-placement-panel,
.ravens-placement-panel {
  width: min(1660px, 98vw) !important;
  min-height: min(920px, calc(100vh - 44px));
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center;
}

.ravens-placement-cinematic-shell {
  position: relative;
  min-height: min(920px, calc(100vh - 44px));
  padding: clamp(14px, 2vw, 26px);
  border: 1px solid rgba(214, 168, 79, .62);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 74% 28%, rgba(214, 168, 79, .14), transparent 26%),
    radial-gradient(circle at 28% 22%, rgba(111, 25, 33, .18), transparent 30%),
    linear-gradient(90deg, rgba(5, 5, 8, .98), rgba(13, 10, 12, .96) 44%, rgba(2, 3, 5, .98));
  box-shadow:
    0 0 90px rgba(0, 0, 0, .88),
    inset 0 0 70px rgba(214, 168, 79, .055);
}

.ravens-placement-cinematic-shell::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(214, 168, 79, .28);
  border-radius: 14px;
  pointer-events: none;
  z-index: 6;
}

.ravens-placement-cinematic-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.58), transparent 18%, transparent 72%, rgba(0,0,0,.70)),
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(0, 0, 0, .44) 100%);
  z-index: 5;
}

.ravens-placement-frame-glow {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(214,168,79,.03) 0, rgba(214,168,79,.03) 1px, transparent 1px, transparent 36px),
    radial-gradient(circle at 50% 0%, rgba(214,168,79,.14), transparent 32%);
  opacity: .58;
  pointer-events: none;
  z-index: 0;
}

.ravens-placement-left-rail {
  position: absolute;
  z-index: 7;
  left: clamp(18px, 2vw, 34px);
  top: clamp(86px, 11vw, 138px);
  width: 130px;
  padding: 15px 10px;
  border: 1px solid rgba(214,168,79,.36);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(8,7,9,.78), rgba(0,0,0,.44));
  box-shadow: inset 0 0 24px rgba(214,168,79,.05), 0 18px 50px rgba(0,0,0,.45);
}

.ravens-placement-rail-item {
  display: grid;
  gap: 7px;
  justify-items: center;
  color: rgba(214,168,79,.86);
  font-size: .75rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.ravens-placement-rail-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(214,168,79,.38);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #d6a84f;
  background: rgba(0,0,0,.34);
  font-size: 1.4rem;
}

.ravens-placement-rail-divider {
  height: 1px;
  margin: 14px auto;
  width: 74%;
  background: linear-gradient(90deg, transparent, rgba(214,168,79,.48), transparent);
}

.ravens-placement-main-stage {
  position: relative;
  z-index: 7;
  min-height: calc(min(920px, 100vh - 44px) - 52px);
  display: flex;
  flex-direction: column;
}

.ravens-placement-heading-block {
  padding: 8px 140px 10px;
  text-align: center;
}

.ravens-placement-brand {
  color: rgba(214,168,79,.64);
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: clamp(.72rem, 1vw, .92rem);
  margin-bottom: 4px;
}

.ravens-placement-title {
  margin: 0;
  color: #d6a84f;
  font-size: clamp(2.3rem, 5.4vw, 5.2rem);
  line-height: .95;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 0 18px rgba(214,168,79,.28), 0 2px 0 rgba(0,0,0,.65);
}

.ravens-placement-kicker {
  margin: 12px auto 0;
  color: rgba(239,232,223,.82);
  font-size: clamp(.92rem, 1.35vw, 1.16rem);
  line-height: 1.36;
}

.ravens-placement-content-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(440px, 1fr) minmax(360px, .47fr);
  gap: clamp(16px, 2.2vw, 28px);
  align-items: stretch;
  padding: 8px clamp(16px, 3vw, 54px) 22px clamp(152px, 12vw, 190px);
}

.ravens-placement-interaction-card {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

.ravens-placement-look {
  margin: 0 0 2px;
  color: rgba(214,168,79,.82);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .88rem;
}

.ravens-placement-inkblot-frame {
  width: min(760px, 100%);
  aspect-ratio: 1.55 / 1;
  padding: clamp(7px, 1vw, 11px);
  border-radius: 20px;
  border: 1px solid rgba(214,168,79,.60);
  background:
    linear-gradient(180deg, rgba(214,168,79,.10), rgba(0,0,0,.22)),
    rgba(0,0,0,.36);
  box-shadow:
    0 26px 62px rgba(0,0,0,.70),
    inset 0 0 24px rgba(214,168,79,.08);
  overflow: hidden;
}

.ravens-placement-inkblot-img,
.raven-placement-inkblot-svg,
.ravens-placement-inkblot-frame svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 15px;
  filter: contrast(1.08) saturate(.95) drop-shadow(0 0 14px rgba(214,168,79,.12));
}

.ravens-placement-fallback-ink {
  width: 100%;
  height: 100%;
}

.ravens-placement-response-panel {
  width: min(650px, 94%);
  margin-top: -3px;
  padding: 15px clamp(16px, 2.4vw, 34px) 18px;
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14,12,14,.88), rgba(0,0,0,.72));
  box-shadow: 0 18px 44px rgba(0,0,0,.52), inset 0 0 26px rgba(214,168,79,.045);
}

.ravens-placement-question {
  margin: 0;
  color: #d6a84f;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(1.15rem, 2.6vw, 2.05rem);
  line-height: 1.1;
}

.ravens-placement-word-note {
  margin: 5px 0 12px;
  color: rgba(239,232,223,.64);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
}

.ravens-placement-input-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ravens-placement-input {
  width: 100%;
  margin: 0 auto 12px;
  display: block;
  box-sizing: border-box;
  padding: 14px 15px;
  border-radius: 8px;
  border: 1px solid rgba(214,168,79,.48);
  background: rgba(3, 4, 6, .78);
  color: #efe8df;
  text-align: center;
  font-size: 1.06rem;
  font-family: Georgia, "Times New Roman", serif;
  outline: none;
  box-shadow: inset 0 0 20px rgba(0,0,0,.65);
}

.ravens-placement-input:focus {
  border-color: rgba(214,168,79,.88);
  box-shadow: 0 0 0 3px rgba(214,168,79,.10), inset 0 0 20px rgba(0,0,0,.65);
}

.ravens-placement-input::placeholder {
  color: rgba(239,232,223,.48);
  font-style: italic;
}

.ravens-placement-influence {
  margin: 10px auto 14px;
  color: rgba(239,232,223,.72);
  font-size: clamp(.78rem, 1.1vw, .93rem);
  line-height: 1.38;
}

.ravens-placement-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 auto;
}

.ravens-placement-actions button {
  margin-top: 0;
  min-height: 49px;
  border: 1px solid rgba(214,168,79,.56);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(104,65,20,.68), rgba(30,20,15,.92));
  color: #f2d18a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.8rem, 1.2vw, 1rem);
  letter-spacing: .13em;
  text-transform: uppercase;
  box-shadow: inset 0 0 18px rgba(214,168,79,.06), 0 10px 24px rgba(0,0,0,.42);
}

.ravens-placement-actions button.secondary {
  background:
    linear-gradient(180deg, rgba(26,25,29,.82), rgba(3,4,6,.94));
  color: rgba(239,232,223,.86);
}

.ravens-placement-raven-panel {
  position: relative;
  min-height: 560px;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.38), rgba(0,0,0,.05)),
    var(--ravens-placement-raven-image, url("/images/ravens-placement/raven-inkblot.png")) center center / cover no-repeat;
  box-shadow: inset 0 0 80px rgba(0,0,0,.38);
}

.ravens-placement-raven-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
}

.ravens-placement-raven-figure {
  position: absolute;
  inset: 0;
}

.ravens-placement-raven-caption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 14px 16px;
  border: 1px solid rgba(214,168,79,.32);
  border-radius: 12px;
  background: rgba(0,0,0,.58);
  color: rgba(239,232,223,.82);
  display: grid;
  gap: 5px;
  text-align: left;
  font-size: .88rem;
}

.ravens-placement-raven-caption strong {
  color: #d6a84f;
  font-weight: normal;
}

@media (max-width: 1180px) {
  .ravens-placement-left-rail {
    display: none;
  }

  .ravens-placement-heading-block {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ravens-placement-content-grid {
    padding-left: clamp(14px, 3vw, 32px);
    grid-template-columns: minmax(420px, 1fr) minmax(280px, .42fr);
  }
}

@media (max-width: 900px) {
  .ravens-placement-cinematic-shell {
    min-height: auto;
  }

  .ravens-placement-content-grid {
    grid-template-columns: 1fr;
    padding: 8px 10px 18px;
  }

  .ravens-placement-raven-panel {
    order: -1;
    min-height: 260px;
    background-position: center 28%;
  }

  .ravens-placement-raven-caption {
    display: none;
  }

  .ravens-placement-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .raven-placement-panel,
  .ravens-placement-panel {
    width: 96vw !important;
  }

  .ravens-placement-cinematic-shell {
    padding: 12px;
  }

  .ravens-placement-title {
    font-size: clamp(1.9rem, 11vw, 3rem);
    letter-spacing: .06em;
  }

  .ravens-placement-brand {
    letter-spacing: .24em;
  }

  .ravens-placement-inkblot-frame {
    width: 100%;
    aspect-ratio: 1.35 / 1;
  }

  .ravens-placement-response-panel {
    width: 100%;
    box-sizing: border-box;
  }
}
/* ================= RAVEN'S PLACEMENT V3 CENTER / RAVEN VISIBILITY FIX ================= */

.raven-placement-active {
  min-height: 100vh;
  width: 100%;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.raven-placement-panel,
.ravens-placement-panel {
  width: min(1320px, 96vw) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

.ravens-placement-cinematic-shell {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: min(860px, calc(100vh - 32px)) !important;
}

.ravens-placement-content-grid {
  grid-template-columns: minmax(420px, 1.05fr) minmax(320px, 0.75fr) !important;
  padding: 8px clamp(18px, 3vw, 42px) 22px clamp(18px, 3vw, 42px) !important;
  align-items: center !important;
}

.ravens-placement-left-rail {
  display: none !important;
}

.ravens-placement-raven-panel {
  min-height: 560px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: rgba(0, 0, 0, 0.18) !important;
}

.ravens-placement-raven-panel::before {
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.18)) !important;
}

@media (max-width: 900px) {
  .raven-placement-active {
    align-items: start !important;
    padding: 10px !important;
  }

  .ravens-placement-content-grid {
    grid-template-columns: 1fr !important;
    padding: 8px 10px 18px !important;
  }

  .ravens-placement-raven-panel {
    order: -1 !important;
    min-height: 360px !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}

@media (max-width: 560px) {
  .ravens-placement-raven-panel {
    min-height: 300px !important;
  }
}

/* ================= RAVEN'S PLACEMENT FOUR SYSTEM V1 ================= */

.ravens-placement-mode-label {
  color: #d6a84f;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  margin-bottom: 7px;
  text-shadow: 0 0 16px rgba(214,168,79,.25);
}

.ravens-placement-mode-intro {
  color: rgba(239,232,223,.86);
  margin: 0 auto 14px;
  max-width: 760px;
  line-height: 1.45;
  font-size: .98rem;
}

.ravens-placement-choice-question {
  color: #efe8df;
  font-size: clamp(1.1rem, 2.1vw, 1.65rem);
  line-height: 1.25;
  margin: 8px auto 18px;
  max-width: 680px;
}

.ravens-placement-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 10px auto 6px;
  max-width: 720px;
}

.ravens-placement-choice-card,
.ravens-placement-relic-card {
  margin: 0;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(214,168,79,.38);
  background:
    linear-gradient(180deg, rgba(32,24,18,.92), rgba(5,4,4,.94));
  color: #e6d3a5;
  box-shadow:
    inset 0 0 14px rgba(214,168,79,.08),
    0 0 18px rgba(0,0,0,.32);
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: transform .15s ease, border-color .15s ease, filter .15s ease;
}

.ravens-placement-choice-card:hover,
.ravens-placement-relic-card:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  border-color: rgba(255,218,134,.72);
}

.ravens-placement-choice-card.selected,
.ravens-placement-relic-card.selected {
  border-color: rgba(255,218,134,.92);
  background:
    radial-gradient(circle at center, rgba(214,168,79,.22), transparent 68%),
    linear-gradient(180deg, rgba(45,32,18,.98), rgba(7,5,4,.98));
  color: #ffe1a0;
  box-shadow:
    0 0 20px rgba(214,168,79,.28),
    inset 0 0 18px rgba(214,168,79,.12);
}

.ravens-placement-relic-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 14px auto 10px;
  max-width: 880px;
}

.ravens-placement-relic-card {
  min-height: 132px;
  padding: 14px 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.ravens-placement-relic-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,168,79,.44);
  color: #d6a84f;
  font-size: 2rem;
  background: rgba(0,0,0,.28);
  box-shadow: inset 0 0 14px rgba(214,168,79,.08);
}

.ravens-placement-relic-label {
  font-size: .86rem;
}

.ravens-placement-subtle-note {
  color: rgba(239,232,223,.62);
  font-size: .82rem;
  margin: 8px auto 0;
  font-style: italic;
}

.ravens-placement-mirror-stage {
  width: min(410px, 86vw);
  aspect-ratio: 1 / .78;
  margin: 4px auto 14px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.08), transparent 62%),
    rgba(0,0,0,.18);
}

.ravens-placement-mirror-glass {
  width: min(245px, 62vw);
  aspect-ratio: .78 / 1;
  border-radius: 50%;
  border: 8px double rgba(214,168,79,.56);
  background:
    radial-gradient(circle at 38% 28%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at center, rgba(52,60,68,.64), rgba(1,3,5,.95) 72%);
  box-shadow:
    0 0 34px rgba(0,0,0,.65),
    inset 0 0 28px rgba(255,255,255,.06),
    inset 0 0 70px rgba(0,0,0,.82);
  position: relative;
}

.ravens-placement-mirror-glass::before,
.ravens-placement-mirror-glass::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 70px;
  border-left: 3px solid rgba(214,168,79,.46);
  border-right: 3px solid rgba(214,168,79,.46);
}

.ravens-placement-mirror-glass::before {
  top: -62px;
  border-top: 3px solid rgba(214,168,79,.34);
  border-radius: 18px 18px 0 0;
}

.ravens-placement-mirror-glass::after {
  bottom: -62px;
  border-bottom: 3px solid rgba(214,168,79,.34);
  border-radius: 0 0 18px 18px;
}

.ravens-placement-raven-panel {
  background-image:
    radial-gradient(circle at 62% 44%, rgba(214,168,79,.16), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.12)),
    var(--ravens-placement-raven-image, url("/images/ravens-placement/raven-inkblot.png")) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  min-height: 560px !important;
  overflow: hidden;
}

.ravens-placement-raven-panel::after {
  content: "";
  position: absolute;
  inset: auto 8% 8% auto;
  width: 180px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), transparent 72%);
  pointer-events: none;
}

.ravens-placement-raven-figure {
  display: none;
}

.ravens-placement-raven-prop {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.7));
}

.ravens-placement-raven-prop-inkblot {
  right: 16%;
  bottom: 18%;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 2px solid rgba(214,168,79,.42);
  background:
    radial-gradient(circle at center, rgba(0,0,0,.92), rgba(20,12,6,.98));
}

.ravens-placement-raven-prop-inkblot::before {
  content: "";
  position: absolute;
  left: 44%;
  bottom: 42%;
  width: 5px;
  height: 128px;
  background: linear-gradient(180deg, rgba(214,168,79,.75), #090706 30%, #090706 100%);
  transform: rotate(-18deg);
  border-radius: 999px;
}

.ravens-placement-raven-prop-relic {
  right: 11%;
  bottom: 15%;
  width: 230px;
  height: 88px;
  border-radius: 18px;
  border: 1px solid rgba(214,168,79,.28);
  background:
    linear-gradient(90deg, rgba(214,168,79,.15) 0 18%, transparent 18% 20%, rgba(214,168,79,.12) 20% 38%, transparent 38% 40%, rgba(214,168,79,.11) 40% 58%, transparent 58% 60%, rgba(214,168,79,.12) 60% 78%, transparent 78% 80%, rgba(214,168,79,.13) 80% 100%),
    rgba(0,0,0,.46);
  opacity: .72;
}

.ravens-placement-raven-prop-choice {
  right: 20%;
  bottom: 13%;
  width: 170px;
  height: 104px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.42);
  background:
    linear-gradient(145deg, rgba(238,213,159,.7), rgba(74,50,28,.86));
  transform: rotate(-8deg);
  opacity: .76;
}

.ravens-placement-raven-prop-choice::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-top: 1px solid rgba(29,16,9,.5);
  border-bottom: 1px solid rgba(29,16,9,.38);
}

.ravens-placement-raven-prop-mirror {
  right: 15%;
  bottom: 14%;
  width: 150px;
  height: 190px;
  border-radius: 50%;
  border: 7px double rgba(214,168,79,.55);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at center, rgba(43,51,59,.7), rgba(0,0,0,.96) 72%);
  opacity: .8;
}

.ravens-placement-mode-relic .ravens-placement-raven-panel {
  background-position: center 44% !important;
}

.ravens-placement-mode-choice .ravens-placement-raven-panel {
  background-position: center 42% !important;
}

.ravens-placement-mode-mirror .ravens-placement-raven-panel {
  background-position: center 42% !important;
}

.ravens-placement-mode-relic .ravens-placement-interaction-card,
.ravens-placement-mode-choice .ravens-placement-interaction-card,
.ravens-placement-mode-mirror .ravens-placement-interaction-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ravens-placement-mode-choice .ravens-placement-response-panel,
.ravens-placement-mode-relic .ravens-placement-response-panel,
.ravens-placement-mode-mirror .ravens-placement-response-panel {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .ravens-placement-choice-grid,
  .ravens-placement-relic-grid {
    grid-template-columns: 1fr;
  }

  .ravens-placement-relic-card {
    min-height: 82px;
    grid-template-columns: 54px 1fr;
    text-align: left;
    place-items: center start;
    padding: 12px 16px;
  }

  .ravens-placement-raven-panel {
    min-height: 340px !important;
    background-size: contain !important;
  }

  .ravens-placement-raven-prop {
    transform: scale(.78);
    transform-origin: right bottom;
  }
}

@media (max-width: 560px) {
  .ravens-placement-choice-grid,
  .ravens-placement-relic-grid {
    gap: 8px;
  }

  .ravens-placement-raven-panel {
    min-height: 285px !important;
  }

  .ravens-placement-raven-prop {
    display: none;
  }
}


/* ================= RAVEN'S PLACEMENT 4-SYSTEM V1.1 - MODE-SPECIFIC RAVEN ART HOOKS ================= */

.ravens-placement-raven-inkblot {
  --ravens-placement-raven-image: url("/images/ravens-placement/raven-inkblot.png");
}

.ravens-placement-raven-relic {
  --ravens-placement-raven-image: url("/images/ravens-placement/raven-relic.png");
}

.ravens-placement-raven-choice {
  --ravens-placement-raven-image: url("/images/ravens-placement/raven-choice.png");
}

.ravens-placement-raven-mirror {
  --ravens-placement-raven-image: url("/images/ravens-placement/raven-mirror.png");
}

/* Relic mode: the prop/card spread stays centered so the Raven never appears to recommend one card. */
.ravens-placement-raven-prop-relic {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  bottom: 10% !important;
}

.ravens-placement-raven-prop-relic::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 22px;
  border: 1px solid rgba(214,168,79,.08);
  pointer-events: none;
}


/* ================= THE TABLE OF DECEPTION V1.2 PATCH - RAVEN PLACEMENT / DOCTOR DEATH ================= */

.secret-raven-image,
.secret-raven-icon.secret-raven-image {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 16px rgba(214,168,79,.22));
}

.ravens-placement-relic-card {
  min-height: 54px;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: bold;
}

.ravens-placement-relic-icon {
  display: none !important;
}

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

.ravens-placement-choice-card {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: bold;
}

.ravens-placement-mode-inkblot .ravens-placement-raven-panel {
  min-height: 440px !important;
  background-position: center center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

.ravens-placement-mode-inkblot .ravens-placement-raven-panel::before {
  opacity: .48;
}

.ravens-placement-mode-inkblot .ravens-placement-raven-caption {
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.70));
}

.doctor-death-jumpscare-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.doctor-death-jumpscare-overlay.hidden {
  display: none !important;
}

.doctor-death-jumpscare-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  display: block;
  animation: doctorDeathJumpscarePulse 3s ease-in-out forwards;
}

@keyframes doctorDeathJumpscarePulse {
  0% { transform: scale(1.04); filter: brightness(.72) contrast(1.12); }
  12% { transform: scale(1.00); filter: brightness(1.16) contrast(1.3); }
  82% { transform: scale(1.015); filter: brightness(.95) contrast(1.18); }
  100% { transform: scale(1.04); filter: brightness(.35) contrast(1.08); }
}

.survivor-elimination-overlay {
  z-index: 1000000;
  background: #000;
  padding: 0;
}

.survivor-elimination-scene {
  position: relative;
  width: min(100vw, 1600px);
  height: min(100vh, 1200px);
  margin: auto;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px rgba(0,0,0,.85);
}

.survivor-elimination-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.survivor-elimination-plaque {
  position: absolute;
  left: 50%;
  bottom: clamp(84px, 8.8vh, 142px);
  width: min(46vw, 610px);
  min-height: clamp(74px, 10vw, 138px);
  transform: translateX(-50%) perspective(900px) rotateX(2deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .55vw, 8px);
  padding: clamp(8px, 1.3vw, 18px) clamp(18px, 2.4vw, 34px);
  color: #1d1307;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,234,176,.34);
  pointer-events: none;
}

.survivor-elimination-plaque h2 {
  margin: 0;
  width: 100%;
  color: #211405;
  font-size: clamp(1.15rem, 2.2vw, 2.65rem);
  line-height: .95;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.survivor-elimination-plaque-lines {
  display: grid;
  gap: clamp(1px, .24vw, 5px);
  width: 100%;
  color: #261706;
  font-size: clamp(.56rem, .95vw, 1.08rem);
  line-height: 1.05;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.survivor-elimination-bottom-line {
  position: absolute;
  left: 50%;
  bottom: clamp(46px, 4.8vh, 78px);
  transform: translateX(-50%);
  margin: 0;
  width: min(84vw, 780px);
  color: rgba(239,232,223,.88);
  text-align: center;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: clamp(.62rem, 1.05vw, .98rem);
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  pointer-events: none;
}

.survivor-elimination-btn {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 1.6vh, 28px);
  transform: translateX(-50%);
  width: min(300px, 72vw);
  margin: 0;
  z-index: 2;
}

@media (max-width: 760px) {
  .ravens-placement-choice-grid {
    grid-template-columns: 1fr;
  }

  .survivor-elimination-scene {
    width: 100vw;
    height: 100vh;
  }

  .survivor-elimination-bg {
    object-position: center center;
  }

  .survivor-elimination-plaque {
    bottom: clamp(82px, 9.2vh, 126px);
    width: min(72vw, 560px);
  }

  .survivor-elimination-plaque h2 {
    font-size: clamp(1rem, 4.2vw, 1.8rem);
  }

  .survivor-elimination-plaque-lines {
    font-size: clamp(.52rem, 2.35vw, .84rem);
  }
}


/* ================= V1.2.2 CLEANUP: COMPACT GAME MODE + ROLE REVEAL ================= */

.compact-game-mode-panel {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 16px;
  background: rgba(0,0,0,.26);
  text-align: left;
}

.game-mode-title {
  margin: 0 0 10px;
  color: #d6a84f;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-mode-select-label {
  margin-top: 6px;
}

.game-mode-select {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  margin-top: 6px;
  margin-bottom: 8px;
  border-radius: 10px;
  border: 1px solid rgba(214,168,79,.28);
  background: #0f0b12;
  color: #efe8df;
  font-family: Georgia, "Times New Roman", serif;
}

.game-mode-short-description {
  margin: 6px 0 0;
  text-align: center;
}

.game-mode-details {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
}

.game-mode-details summary {
  color: #d6a84f;
  cursor: pointer;
  text-align: center;
  letter-spacing: .04em;
}

.game-mode-details-body {
  margin-top: 10px;
  color: #d7cfc8;
  font-size: .92rem;
}

.game-mode-details-body p {
  margin: 7px 0;
}

.role-reveal-card,
#roleRevealOverlayText {
  white-space: pre-line;
}

#roleRevealOverlayText {
  text-align: center;
}

/* ================= V1.2.3 SURGICAL VISUAL POLISH =================
   Fixes:
   - Make Magic Genie wish wording stand apart visually.
   - Remove duplicate/odd generated props from Raven image panel.
   - Simplify the Mirror input prop so it does not show strange U-shaped handles.
   These are CSS-only visual fixes. The actual Raven art remains unchanged.
============================================================= */

/* The magic genie line is the intro text, not the question text. */
.ravens-placement-mode-choice .ravens-placement-mode-intro {
  position: relative !important;
  margin: 8px auto 16px !important;
  padding: 18px 18px 16px !important;
  max-width: 720px !important;
  border: 1px solid rgba(214, 168, 79, .68) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top, rgba(214, 168, 79, .24), transparent 58%),
    linear-gradient(180deg, rgba(55, 33, 16, .94), rgba(7, 5, 5, .97)) !important;
  box-shadow:
    0 0 28px rgba(214, 168, 79, .20),
    inset 0 0 18px rgba(255, 225, 160, .08) !important;
  color: #ffe1a0 !important;
  font-size: clamp(1.22rem, 2.35vw, 1.85rem) !important;
  line-height: 1.18 !important;
  letter-spacing: .035em !important;
  text-align: center !important;
  text-shadow:
    0 0 14px rgba(214, 168, 79, .38),
    0 2px 10px rgba(0, 0, 0, .78) !important;
}

.ravens-placement-mode-choice .ravens-placement-mode-intro::before {
  content: "THE WISH";
  display: block;
  margin-bottom: 8px;
  color: rgba(214, 168, 79, .82);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.ravens-placement-mode-choice .ravens-placement-question {
  margin: 0 auto 16px !important;
  color: #d6a84f !important;
  font-size: clamp(1.45rem, 2.7vw, 2.25rem) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 16px rgba(214, 168, 79, .28), 0 2px 9px #000 !important;
}

/* The actual Raven images already contain their props. Hide CSS-generated extras that created circles/lines/duplicate mirrors. */
.ravens-placement-raven-prop,
.ravens-placement-raven-prop::before,
.ravens-placement-raven-prop::after,
.ravens-placement-raven-panel::after {
  display: none !important;
  content: none !important;
}

/* Keep the Mirror input-side visual, but remove the strange top/bottom U-shaped decorations. */
.ravens-placement-mirror-glass::before,
.ravens-placement-mirror-glass::after {
  display: none !important;
  content: none !important;
}

.ravens-placement-mirror-stage {
  width: min(360px, 74vw) !important;
  margin: 0 auto 16px !important;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.075), transparent 62%),
    rgba(0,0,0,.12) !important;
}

.ravens-placement-mirror-glass {
  width: min(220px, 54vw) !important;
  border: 6px double rgba(214,168,79,.55) !important;
  box-shadow:
    0 0 28px rgba(0,0,0,.68),
    0 0 18px rgba(214,168,79,.10),
    inset 0 0 28px rgba(255,255,255,.05),
    inset 0 0 70px rgba(0,0,0,.86) !important;
}

/* Make the Raven panel image cleaner and less visually busy after hiding the generated props. */
.ravens-placement-raven-panel {
  background-image:
    radial-gradient(circle at 62% 44%, rgba(214,168,79,.10), transparent 34%),
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.08)),
    var(--ravens-placement-raven-image, url("/images/ravens-placement/raven-inkblot.png")) !important;
}

@media (max-width: 900px) {
  .ravens-placement-mode-choice .ravens-placement-mode-intro {
    padding: 14px 14px 13px !important;
    font-size: clamp(1.05rem, 5vw, 1.45rem) !important;
  }

  .ravens-placement-mode-choice .ravens-placement-question {
    font-size: clamp(1.15rem, 6vw, 1.7rem) !important;
    letter-spacing: .08em !important;
  }
}

/* ================= V1.2.4 FINAL POLISH =================
   - Mirror screen uses the real Raven mirror image instead of fake CSS mirror.
   - Role reveal warning/role screens are visually distinct and less oversized.
   - Remote mode is the safer default and appears first in the dropdown.
============================================================= */

.ravens-placement-mode-mirror .ravens-placement-content-grid {
  grid-template-columns: minmax(0, 940px) !important;
  justify-content: center !important;
}

.ravens-placement-mode-mirror .ravens-placement-interaction-card {
  max-width: 940px !important;
  margin: 0 auto !important;
}

.ravens-placement-mirror-stage,
.ravens-placement-mirror-glass {
  display: none !important;
}

.ravens-placement-mirror-art {
  width: min(760px, 92vw) !important;
  margin: 0 auto 18px !important;
  border: 1px solid rgba(214, 168, 79, .35) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, .55) !important;
  box-shadow:
    0 0 36px rgba(0,0,0,.54),
    inset 0 0 24px rgba(214,168,79,.07) !important;
}

.ravens-placement-mirror-art-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.ravens-placement-mirror-response-panel {
  margin-top: 0 !important;
}

.role-reveal-card h2.role-reveal-warning-title {
  color: #efe8df !important;
  font-size: clamp(2.15rem, 8vw, 4.8rem) !important;
  letter-spacing: .1em !important;
  line-height: 1.08 !important;
}

.role-reveal-card h2.role-reveal-warning-title::first-line {
  color: #d6a84f;
}

.role-reveal-card h2.role-reveal-role-title {
  color: #d6a84f !important;
  font-size: clamp(1.8rem, 6vw, 3.4rem) !important;
  letter-spacing: .14em !important;
  line-height: 1.05 !important;
  margin: 18px 0 !important;
  text-shadow:
    0 0 18px rgba(214, 168, 79, .26),
    0 3px 12px rgba(0,0,0,.85) !important;
}

.role-reveal-warning {
  max-width: 520px !important;
  margin: 14px auto 0 !important;
  color: rgba(239,232,223,.72) !important;
  font-size: .95rem !important;
}

#gamePlayModeSelect option[value="remote"] {
  font-weight: bold;
}



/* ================= V1.2.5 CINEMATIC + ROLE REVEAL REFINEMENT ================= */

/* Role warning: one clean white headline, with the secret-role line smaller underneath. */
.role-reveal-card h2.role-reveal-warning-title {
  color: #efe8df !important;
  font-size: clamp(2.35rem, 7.2vw, 5.4rem) !important;
  letter-spacing: .12em !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  text-align: center !important;
  text-shadow: 0 0 22px rgba(0,0,0,.9), 0 3px 12px rgba(0,0,0,.92) !important;
}

.role-reveal-card h2.role-reveal-warning-title::first-line {
  color: inherit !important;
}

.role-reveal-main-line {
  display: block !important;
  color: #efe8df !important;
  font-size: 1em !important;
  line-height: 1.02 !important;
}

.role-reveal-sub-line {
  display: block !important;
  margin-top: clamp(10px, 1.5vw, 18px) !important;
  color: rgba(239,232,223,.86) !important;
  font-size: clamp(1.05rem, 2.7vw, 2.05rem) !important;
  letter-spacing: .16em !important;
  line-height: 1.12 !important;
}

.role-reveal-card h2.role-reveal-role-title {
  color: #d6a84f !important;
  font-size: clamp(1.35rem, 4.2vw, 2.7rem) !important;
  letter-spacing: .16em !important;
  line-height: 1.05 !important;
  margin: 12px 0 !important;
  text-shadow: 0 0 16px rgba(214,168,79,.22), 0 3px 12px rgba(0,0,0,.88) !important;
}

/* Doctor Death jump-scare: less cropped on desktop, still intense on phones. */
.doctor-death-jumpscare-image {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

@media (max-width: 720px) {
  .doctor-death-jumpscare-image {
    object-fit: cover !important;
  }
}

@keyframes doctorDeathJumpscarePulse {
  0% { transform: scale(1.00); filter: brightness(.74) contrast(1.10); }
  12% { transform: scale(.985); filter: brightness(1.12) contrast(1.22); }
  82% { transform: scale(1.00); filter: brightness(.96) contrast(1.14); }
  100% { transform: scale(1.01); filter: brightness(.40) contrast(1.06); }
}

/* Survivor plaque: move text down onto the brass plaque and make it read like engraved metal. */
.survivor-elimination-plaque {
  bottom: clamp(46px, 5.6vh, 96px) !important;
  color: #120905 !important;
  text-shadow:
    0 1px 0 rgba(255,221,137,.20),
    0 -1px 0 rgba(0,0,0,.42),
    1px 0 0 rgba(0,0,0,.22) !important;
  mix-blend-mode: multiply !important;
  opacity: .96 !important;
}

.survivor-elimination-plaque h2 {
  color: #100704 !important;
  font-size: clamp(1.08rem, 2.02vw, 2.38rem) !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
}

.survivor-elimination-plaque-lines {
  color: #150905 !important;
  font-size: clamp(.54rem, .96vw, 1.02rem) !important;
  font-weight: 900 !important;
  letter-spacing: .065em !important;
}

.survivor-elimination-bottom-line {
  bottom: clamp(72px, 7.6vh, 118px) !important;
  z-index: 4 !important;
}

.survivor-elimination-btn {
  left: 50% !important;
  bottom: clamp(12px, 1.6vh, 26px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 5 !important;
}

.survivor-elimination-btn:hover,
.survivor-elimination-btn:focus {
  transform: translateX(-50%) !important;
}

@media (max-width: 760px) {
  .survivor-elimination-plaque {
    bottom: clamp(48px, 6vh, 86px) !important;
  }

  .survivor-elimination-bottom-line {
    bottom: clamp(74px, 8.4vh, 120px) !important;
  }
}

.last-words-mark select option:disabled {
  color: rgba(169,150,153,.48) !important;
}


/* ================= V1.2.6 GAMEPLAY POLISH ================= */

.game-room-code-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 10px auto 14px;
  padding: 10px 12px;
  border: 1px solid rgba(214,168,79,.34);
  border-radius: 14px;
  background: rgba(0,0,0,.32);
  box-shadow: inset 0 0 18px rgba(214,168,79,.05);
  text-align: center;
}

.game-room-code-label,
.game-room-code-hint {
  color: #a99699;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.game-room-code-badge strong {
  color: #d6a84f;
  font-size: clamp(1rem, 2.8vw, 1.45rem);
  letter-spacing: .18em;
}

.vote-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,.78);
}

.vote-confirm-overlay.hidden {
  display: none !important;
}

.vote-confirm-card {
  width: min(520px, 92vw);
  padding: 24px;
  border: 1px solid rgba(214,168,79,.45);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(30,15,20,.98), rgba(0,0,0,.98));
  box-shadow: 0 0 44px rgba(0,0,0,.82), inset 0 0 20px rgba(214,168,79,.08);
  text-align: center;
}

.vote-confirm-card h2 {
  margin: 0 0 12px;
  color: #d6a84f;
  letter-spacing: .12em;
}

.vote-confirm-card p {
  font-size: 1.08rem;
  line-height: 1.4;
}

.vote-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.vote-confirm-actions button {
  margin-top: 0;
}

/* Doctor Death jump-scare: pulled back further so the full face reads on desktop. */
.doctor-death-jumpscare-image {
  width: min(100vw, 1180px) !important;
  height: min(100vh, 860px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #000 !important;
}

@media (max-width: 720px) {
  .doctor-death-jumpscare-image {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: contain !important;
  }
}

@keyframes doctorDeathJumpscarePulse {
  0% { transform: scale(.96); filter: brightness(.74) contrast(1.10); }
  12% { transform: scale(.94); filter: brightness(1.12) contrast(1.20); }
  82% { transform: scale(.955); filter: brightness(.96) contrast(1.12); }
  100% { transform: scale(.965); filter: brightness(.40) contrast(1.06); }
}


/* ================= V1.2.7 CINEMATIC + LAST WORDS REFINEMENT ================= */

/* Doctor Death jump scare now stays long enough to read the face details. */
.doctor-death-jumpscare-image {
  animation-duration: 5s !important;
}

/* Survivor screen: remove the bottom slogan entirely. */
.survivor-elimination-bottom-line {
  display: none !important;
}

/* Survivor plaque: lower the text onto the plaque and make it feel engraved/readable. */
.survivor-elimination-plaque {
  bottom: clamp(22px, 3.4vh, 64px) !important;
  width: min(48vw, 640px) !important;
  min-height: clamp(82px, 10.6vw, 146px) !important;
  color: #080302 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 0 rgba(255, 226, 154, .28),
    0 -1px 0 rgba(0, 0, 0, .76),
    1px 0 0 rgba(0, 0, 0, .42),
    -1px 0 0 rgba(255, 211, 126, .10) !important;
}

.survivor-elimination-plaque h2 {
  color: #070201 !important;
  font-weight: 950 !important;
  font-size: clamp(1.18rem, 2.18vw, 2.58rem) !important;
  letter-spacing: .065em !important;
}

.survivor-elimination-plaque-lines {
  color: #070201 !important;
  font-weight: 950 !important;
  font-size: clamp(.60rem, 1.04vw, 1.12rem) !important;
  letter-spacing: .055em !important;
}

/* Survivor screen: place the return button in the chair area, not over bottom text. */
.survivor-elimination-btn {
  left: 50% !important;
  bottom: clamp(135px, 20vh, 250px) !important;
  width: min(250px, 54vw) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.survivor-elimination-btn:hover,
.survivor-elimination-btn:focus {
  transform: translateX(-50%) !important;
}

@media (max-width: 760px) {
  .survivor-elimination-plaque {
    bottom: clamp(26px, 4vh, 62px) !important;
    width: min(76vw, 570px) !important;
  }

  .survivor-elimination-btn {
    bottom: clamp(122px, 18vh, 210px) !important;
    width: min(240px, 62vw) !important;
  }
}


/* ================= V1.2.8 PLAQUE + LAST WORDS FINAL POLISH ================= */

/* The JS-injected cinematic styles are now updated too, but these stay here as a final safety override. */
.survivor-elimination-bottom-line {
  display: none !important;
}

.survivor-elimination-plaque {
  bottom: clamp(-12px, -1.1vh, 6px) !important;
  width: min(50vw, 660px) !important;
  min-height: clamp(92px, 11.4vw, 158px) !important;
  color: #050101 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  text-shadow:
    0 1px 0 rgba(255, 225, 142, .38),
    0 -1px 0 rgba(0, 0, 0, .92),
    1px 0 0 rgba(0, 0, 0, .58),
    -1px 0 0 rgba(0, 0, 0, .28) !important;
}

.survivor-elimination-plaque h2 {
  color: #040101 !important;
  font-weight: 950 !important;
  font-size: clamp(1.22rem, 2.22vw, 2.64rem) !important;
  letter-spacing: .065em !important;
}

.survivor-elimination-plaque-lines {
  color: #040101 !important;
  font-weight: 950 !important;
  font-size: clamp(.64rem, 1.10vw, 1.18rem) !important;
  letter-spacing: .055em !important;
}

.survivor-elimination-btn {
  left: 50% !important;
  bottom: clamp(145px, 22vh, 270px) !important;
  width: min(250px, 54vw) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}

.survivor-elimination-btn:hover,
.survivor-elimination-btn:focus {
  transform: translateX(-50%) !important;
}

.last-words-broadcast-card p {
  text-align: left !important;
  max-height: min(48vh, 420px) !important;
  overflow-y: auto !important;
}

@media (max-width: 760px) {
  .survivor-elimination-plaque {
    bottom: clamp(-10px, -1vh, 4px) !important;
    width: min(78vw, 600px) !important;
  }

  .survivor-elimination-btn {
    bottom: clamp(124px, 19vh, 220px) !important;
  }
}


/* ================= RAVEN CIPHER / LOCK VISUALS V1 ================= */
.raven-special-challenge-panel {
  margin-top: 16px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(214,168,79,.42);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 38%),
    linear-gradient(180deg, rgba(22, 12, 18, .92), rgba(2, 2, 4, .94));
  box-shadow:
    0 0 34px rgba(0,0,0,.45),
    inset 0 0 28px rgba(214,168,79,.06);
  text-align: left;
}

.raven-special-challenge-panel h4 {
  margin: 0 0 10px;
  color: #d6a84f;
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.raven-special-subtitle {
  text-align: center;
  color: #efe8df;
  line-height: 1.45;
  margin: 6px 0 12px;
}

.raven-special-standings,
.raven-special-submitted,
.raven-cipher-question,
.raven-lock-question {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(0,0,0,.34);
}

.raven-special-standing-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px;
  margin-top: 7px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}

.raven-special-top-row {
  border-color: rgba(214,168,79,.5);
  background: rgba(214,168,79,.08);
}

.raven-cipher-scrambled {
  padding: 16px 12px;
  border: 1px solid rgba(214,168,79,.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(214,168,79,.09), rgba(0,0,0,.36));
  color: #d6a84f;
  text-align: center;
  font-size: clamp(1.25rem, 4vw, 2.2rem);
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.raven-cipher-answer {
  margin-top: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.raven-lock-question h5 {
  margin: 0 0 10px;
  color: #d6a84f;
  text-align: center;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.raven-lock-setup {
  padding: 12px;
  border-radius: 12px;
  background: rgba(214,168,79,.06);
  border: 1px solid rgba(214,168,79,.18);
  color: #efe8df;
  text-align: center;
  line-height: 1.55;
  font-weight: bold;
}

.raven-lock-clues {
  margin: 12px 0;
  padding-left: 22px;
  line-height: 1.45;
  color: #d7cfc8;
}

.raven-lock-choices {
  display: grid;
  gap: 8px;
}

.raven-lock-choice-row,
.raven-quiz-choice-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.raven-lock-choice-row {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  color: #efe8df;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.raven-lock-choice-row:hover {
  border-color: rgba(214,168,79,.42);
  background: rgba(214,168,79,.08);
}

.raven-lock-choice-row input {
  width: auto;
  margin: 0;
}

/* ================= FINAL JUDGMENT LAPTOP FIT FIX V1 ================= */
.final-judgment-overlay,
.final-reveal-cinematic-overlay,
.final-money-celebration-overlay {
  align-items: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px 12px 28px !important;
  box-sizing: border-box !important;
}

.final-judgment-card,
.final-reveal-cinematic-card,
.final-money-celebration-card {
  width: min(94vw, 680px) !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 8px auto 28px !important;
  padding: clamp(18px, 2.5vw, 26px) clamp(16px, 2.5vw, 24px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.final-judgment-card .secret-raven-image,
.final-reveal-cinematic-card .secret-raven-image,
.final-money-celebration-card .final-money-raven {
  display: block !important;
  max-width: clamp(70px, 10vw, 118px) !important;
  max-height: clamp(70px, 10vw, 118px) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
}

.final-judgment-card h2,
.final-reveal-cinematic-card h2,
.final-money-celebration-card h2 {
  font-size: clamp(1.7rem, 5vw, 3.5rem) !important;
  margin: 8px 0 !important;
  line-height: 1.05 !important;
}

.final-reveal-cinematic-card h3 {
  font-size: clamp(1.25rem, 4vw, 2.8rem) !important;
  margin: 8px 0 !important;
  line-height: 1.1 !important;
}

.final-reveal-cinematic-role {
  font-size: clamp(1.7rem, 6vw, 3.8rem) !important;
  margin: 8px 0 !important;
  line-height: 1.05 !important;
}

.final-judgment-body,
.final-reveal-cinematic-subtext,
.final-money-subtitle,
.final-money-raven-line {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.final-judgment-card button,
.final-reveal-cinematic-card button,
.final-money-celebration-card button {
  display: block !important;
  width: 100% !important;
  max-width: 360px !important;
  min-height: 46px !important;
  margin: 14px auto 0 !important;
}


/* ================= RAVEN CIPHER / LOCK BUGFIX + LOCK-IN POLISH V1 ================= */
.raven-lock-instructions {
  display: grid;
  gap: 6px;
  margin: 14px auto;
  padding: 13px 14px;
  border: 1px solid rgba(214,168,79,.32);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(214,168,79,.10), rgba(0,0,0,.25));
  color: #efe8df;
  line-height: 1.35;
  text-align: left;
}

.raven-lock-instructions strong {
  color: #d6a84f;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.raven-question-number {
  color: #a99699;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .76rem;
  margin-bottom: 8px;
}

.raven-lock-status {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid rgba(214,168,79,.34);
  border-radius: 999px;
  background: rgba(0,0,0,.30);
  color: #d6a84f;
  text-align: center;
  font-weight: bold;
  letter-spacing: .06em;
}

.raven-lock-lock-btn {
  margin-top: 12px;
  background: linear-gradient(180deg, #b7842f, #70420d);
  color: #120b05;
  border: 1px solid rgba(255,226,150,.48);
  font-weight: 900;
}

.raven-lock-lock-btn.locked,
.raven-lock-lock-btn:disabled {
  background: linear-gradient(180deg, #2f4935, #16251b);
  color: #d8f0dd;
  cursor: default;
  opacity: .95;
}

.raven-lock-question-locked {
  border-color: rgba(97, 188, 112, .35);
  box-shadow: inset 0 0 16px rgba(97, 188, 112, .06);
}

.raven-lock-choice-locked {
  border-color: rgba(97,188,112,.46) !important;
  background: rgba(97,188,112,.10) !important;
}


/* ================= FIREPANTS: COOL HIM DOWN ================= */
.firepants-cooldown-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000001;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 42%, rgba(185, 48, 20, .22), rgba(0,0,0,.88) 58%, #000 100%),
    rgba(0,0,0,.92);
  overflow: hidden;
}

.firepants-cooldown-overlay.hidden { display: none !important; }

.firepants-cooldown-card {
  width: min(1080px, 96vw);
  max-height: min(920px, 94vh);
  overflow: hidden;
  border: 1px solid rgba(255, 180, 74, .42);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(34, 10, 8, .98), rgba(6, 3, 5, .98));
  box-shadow:
    0 0 70px rgba(0,0,0,.88),
    0 0 44px rgba(210, 63, 21, .22),
    inset 0 0 30px rgba(255, 170, 54, .08);
  color: #f5e9dd;
  position: relative;
}

.firepants-ready-layout {
  display: grid;
  grid-template-columns: minmax(180px, 340px) 1fr;
  gap: 22px;
  align-items: center;
  padding: 26px;
}

.firepants-kicker {
  color: #ffb85f;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .78rem;
  margin: 0 0 8px;
}

.firepants-cooldown-card h2 {
  margin: 0 0 10px;
  color: #ffd28a;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 86, 36, .28);
}

.firepants-subtitle {
  font-size: 1.05rem;
  color: #f4d7b8;
}

.firepants-character {
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(255, 76, 22, .22));
}

.firepants-rules-box {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255, 184, 95, .22);
  border-radius: 16px;
  background: rgba(0,0,0,.3);
  text-align: left;
}

.firepants-game-card {
  height: min(860px, 94vh);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}

.firepants-game-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 184, 95, .18);
  background: rgba(0,0,0,.28);
}

.firepants-game-topbar h2 { font-size: clamp(1rem, 2.1vw, 1.55rem); }

.firepants-timer {
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 184, 95, .3);
  background: rgba(0,0,0,.38);
  color: #ffd28a;
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}

.firepants-arena {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background:
    radial-gradient(circle at 50% 85%, rgba(255, 70, 22, .22), transparent 36%),
    linear-gradient(180deg, rgba(18,7,8,.5), rgba(0,0,0,.72));
}

.firepants-character-wrap {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: min(250px, 32vw);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .88;
}

.firepants-character.in-game {
  max-height: 330px;
}

.firepants-pants-flames {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  animation: firepantsFlamePulse .38s infinite alternate;
  filter: drop-shadow(0 0 15px rgba(255, 66, 18, .8));
}

@keyframes firepantsFlamePulse {
  from { transform: translateX(-50%) scale(.95) rotate(-2deg); opacity: .82; }
  to { transform: translateX(-50%) scale(1.08) rotate(2deg); opacity: 1; }
}

.firepants-speech {
  position: absolute;
  left: 18px;
  top: 16px;
  max-width: min(430px, 68vw);
  padding: 12px 14px;
  border: 1px solid rgba(255, 216, 142, .34);
  border-radius: 18px 18px 18px 4px;
  background: rgba(255, 239, 204, .92);
  color: #2a1007;
  font-weight: 900;
  letter-spacing: .035em;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

.firepants-falling-item {
  position: absolute;
  width: auto;
  min-width: 86px;
  max-width: 150px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .055em;
  z-index: 4;
  transform: translateX(-50%);
  box-shadow: 0 10px 18px rgba(0,0,0,.42);
  user-select: none;
  touch-action: manipulation;
}

.firepants-falling-item .firepants-item-icon { font-size: 1.55rem; line-height: 1; }
.firepants-falling-item.cool {
  background: linear-gradient(180deg, rgba(225, 250, 255, .96), rgba(82, 169, 210, .96));
  color: #061724;
}
.firepants-falling-item.hot {
  background: linear-gradient(180deg, rgba(255, 189, 89, .98), rgba(176, 33, 22, .98));
  color: #fff5e6;
}

.firepants-heat-wrap {
  padding: 12px 18px 6px;
  background: rgba(0,0,0,.34);
}
.firepants-heat-label,
.firepants-heat-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #ffd28a;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.firepants-heat-bar {
  height: 24px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(40,95,135,.8), rgba(50,50,50,.72));
  margin: 7px 0;
}
.firepants-heat-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd15f, #ff641f, #b60017);
  box-shadow: 0 0 18px rgba(255, 72, 19, .55);
  transition: width .14s linear;
}
.firepants-item-guide {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px 14px;
  color: #e8d8c8;
  font-size: .82rem;
  background: rgba(0,0,0,.34);
}
.firepants-item-guide .cool { color: #9edfff; }
.firepants-item-guide .hot { color: #ffaf73; }
.firepants-final-card {
  width: min(720px, 94vw);
  padding: 34px 24px;
  text-align: center;
}
.firepants-final-card.exploded {
  animation: firepantsScreenBoom .5s ease-in-out 2;
}
.firepants-fx-burst {
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  margin-bottom: 12px;
}
.firepants-quote {
  color: #ffd28a;
  font-size: 1.15rem;
  font-style: italic;
}
@keyframes firepantsScreenBoom {
  0%, 100% { transform: translate(0,0) rotate(0deg); filter: brightness(1); }
  25% { transform: translate(-8px, 5px) rotate(-.5deg); filter: brightness(1.35); }
  50% { transform: translate(7px, -5px) rotate(.5deg); filter: brightness(.8); }
  75% { transform: translate(-5px, -4px) rotate(-.35deg); filter: brightness(1.15); }
}
@media (max-width: 760px) {
  .firepants-ready-layout { grid-template-columns: 1fr; padding: 18px; }
  .firepants-character { max-height: 250px; }
  .firepants-game-card { height: 94vh; }
  .firepants-arena { min-height: 380px; }
  .firepants-character-wrap { width: min(210px, 48vw); }
  .firepants-game-topbar { align-items: flex-start; }
  .firepants-speech { max-width: 78vw; font-size: .78rem; }
  .firepants-falling-item { min-width: 78px; font-size: .68rem; padding: 8px 9px; }
  .firepants-item-guide { flex-direction: column; text-align: center; }
}



/* ================= FIREPANTS: COOL HIM DOWN V1.3 PREMIUM POLISH ================= */

.firepants-cooldown-overlay {
  --firepants-orange: #ff7a18;
  --firepants-red: #b20f1a;
  --firepants-gold: #d6a84f;
  --firepants-heat-glow: rgba(255, 82, 0, .65);
}

.firepants-cooldown-card.firepants-game-card {
  width: min(1180px, 96vw);
  min-height: min(760px, 94vh);
  padding: clamp(14px, 2vw, 24px);
  background:
    radial-gradient(circle at 70% 22%, rgba(255, 85, 0, .18), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(214, 168, 79, .10), transparent 34%),
    linear-gradient(180deg, rgba(30, 10, 10, .98), rgba(5, 4, 7, .985));
  border: 1px solid rgba(255, 156, 41, .42);
  box-shadow:
    0 0 70px rgba(255, 68, 0, .22),
    0 0 110px rgba(0, 0, 0, .88),
    inset 0 0 46px rgba(255, 122, 24, .08);
  overflow: hidden;
}

.firepants-game-card::before,
.firepants-game-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.firepants-game-card::before {
  background:
    radial-gradient(circle at 22% 92%, rgba(255, 102, 0, .18), transparent 22%),
    radial-gradient(circle at 82% 96%, rgba(255, 40, 0, .16), transparent 24%);
  mix-blend-mode: screen;
}

.firepants-game-card::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.018) 15px 16px),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.28) 100%);
  opacity: .65;
}

.firepants-game-topbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px 14px;
  border: 1px solid rgba(214,168,79,.28);
  border-radius: 18px;
  background: rgba(0,0,0,.34);
}

.firepants-game-topbar h2 {
  margin: 3px 0 0;
  color: #fff4df;
  font-size: clamp(1rem, 2vw, 1.55rem);
  letter-spacing: .08em;
  text-shadow: 0 0 12px rgba(255,92,0,.45);
}

.firepants-timer {
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 170, 67, .38);
  background: radial-gradient(circle at center, rgba(255, 115, 0, .16), rgba(0,0,0,.5));
  color: #ffe3a6;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(255, 90, 0, .55);
}

.firepants-arena {
  position: relative;
  z-index: 3;
  height: clamp(430px, 62vh, 620px);
  margin: 14px 0 10px;
  border: 1px solid rgba(255, 146, 35, .36);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 82%, rgba(255, 77, 0, .22), transparent 24%),
    radial-gradient(circle at 50% 55%, rgba(214, 168, 79, .07), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.72));
  box-shadow:
    inset 0 0 46px rgba(0,0,0,.75),
    inset 0 -28px 60px rgba(255,75,0,.12);
}

.firepants-character-wrap {
  --firepants-heat: .88;
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: min(360px, 44vw);
  height: min(560px, 70vh);
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  transition: filter .2s ease, transform .2s ease;
}

.firepants-character.in-game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 0 calc(20px + 24px * var(--firepants-heat)) rgba(255, 90, 0, calc(.24 + .52 * var(--firepants-heat))))
    drop-shadow(0 14px 28px rgba(0,0,0,.72));
}

.firepants-aura {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 5%;
  height: 48%;
  border-radius: 42% 42% 16% 16%;
  background:
    radial-gradient(ellipse at 50% 85%, rgba(255, 235, 160, calc(.04 + .22 * var(--firepants-heat))), transparent 26%),
    radial-gradient(ellipse at 50% 62%, rgba(255, 90, 0, calc(.18 + .42 * var(--firepants-heat))), transparent 58%);
  filter: blur(18px);
  opacity: calc(.36 + .64 * var(--firepants-heat));
  animation: firepantsAuraPulse 1.15s ease-in-out infinite alternate;
}

.firepants-pants-flames {
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: 6%;
  height: 45%;
  display: grid;
  place-items: end center;
  font-size: clamp(2.5rem, 7vw, 5.8rem);
  letter-spacing: -.2em;
  opacity: calc(.20 + .80 * var(--firepants-heat));
  filter:
    blur(calc(1px - .6px * var(--firepants-heat)))
    drop-shadow(0 0 calc(16px + 34px * var(--firepants-heat)) rgba(255, 87, 0, .92));
  transform: scale(calc(.68 + .50 * var(--firepants-heat)));
  transform-origin: bottom center;
  animation: firepantsFlameDance .42s infinite alternate;
}

.firepants-ember-cloud {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 38%;
  background:
    radial-gradient(circle at 24% 72%, rgba(255, 180, 58, calc(.12 + .42 * var(--firepants-heat))), transparent 7%),
    radial-gradient(circle at 68% 58%, rgba(255, 74, 0, calc(.12 + .45 * var(--firepants-heat))), transparent 8%),
    radial-gradient(circle at 50% 86%, rgba(255, 208, 84, calc(.13 + .38 * var(--firepants-heat))), transparent 10%);
  filter: blur(9px);
  opacity: calc(.18 + .64 * var(--firepants-heat));
}

.firepants-character-wrap[data-heat-state="critical"] {
  animation: firepantsCriticalShake .14s linear infinite;
}

.firepants-character-wrap[data-heat-state="cool"] .firepants-pants-flames {
  opacity: .14;
  filter: blur(2px) drop-shadow(0 0 8px rgba(255, 115, 0, .25));
}

.firepants-speech {
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 50%;
  max-width: min(640px, 82vw);
  transform: translateX(-50%);
  padding: 12px 18px;
  border: 1px solid rgba(255, 220, 139, .55);
  border-radius: 18px 18px 18px 4px;
  background:
    linear-gradient(180deg, rgba(255, 238, 190, .98), rgba(236, 194, 112, .96));
  color: #190704;
  box-shadow:
    0 8px 28px rgba(0,0,0,.55),
    0 0 24px rgba(255, 125, 0, .20);
  font-weight: 950;
  letter-spacing: .035em;
  text-align: center;
  line-height: 1.18;
}

.firepants-status-pill {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 209, 122, .42);
  background: rgba(0,0,0,.55);
  color: #ffdf9b;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 0 10px rgba(255,70,0,.55);
}

.firepants-falling-item {
  z-index: 10;
  min-width: 92px;
  min-height: 76px;
  padding: 8px 12px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.16);
  background: rgba(7, 5, 8, .90);
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 0 16px rgba(255,255,255,.05);
  transform: translateX(-50%);
  transition: transform .08s ease, filter .08s ease;
}

.firepants-falling-item:hover,
.firepants-falling-item:focus {
  transform: translateX(-50%) scale(1.08);
}

.firepants-falling-item .firepants-item-icon {
  display: block;
  font-size: clamp(2.3rem, 5vw, 4.25rem);
  line-height: 1;
  margin-bottom: 3px;
}

.firepants-falling-item .firepants-item-label {
  display: block;
  color: #fff4df;
  font-size: clamp(.62rem, 1.15vw, .9rem);
  font-weight: 950;
  letter-spacing: .06em;
  text-shadow: 0 2px 6px #000;
}

.firepants-falling-item.cool {
  border-color: rgba(125, 210, 255, .75);
  background: radial-gradient(circle at top, rgba(126, 221, 255, .26), rgba(4, 13, 25, .92));
  box-shadow: 0 0 26px rgba(96, 206, 255, .26), 0 10px 28px rgba(0,0,0,.55);
}

.firepants-falling-item.hot,
.firepants-falling-item.danger,
.firepants-falling-item.character_danger {
  border-color: rgba(255, 98, 41, .82);
  background: radial-gradient(circle at top, rgba(255, 96, 26, .28), rgba(24, 4, 4, .94));
  box-shadow: 0 0 28px rgba(255, 58, 0, .32), 0 10px 28px rgba(0,0,0,.55);
}

.firepants-falling-item.power,
.firepants-falling-item.character {
  min-width: 126px;
  border-color: rgba(214, 168, 79, .95);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.28), rgba(20, 13, 4, .94));
  box-shadow:
    0 0 34px rgba(214,168,79,.36),
    0 10px 28px rgba(0,0,0,.58);
  animation: firepantsSpecialPulse .8s ease-in-out infinite alternate;
}

.firepants-falling-item.legendary,
.firepants-falling-item.power,
.firepants-falling-item.character {
  transform: translateX(-50%) scale(1.05);
}

.firepants-falling-item.accused {
  outline: 4px solid rgba(255, 255, 255, .86);
  box-shadow:
    0 0 0 6px rgba(255, 0, 0, .42),
    0 0 38px rgba(255, 40, 0, .58);
}

.firepants-floating-text {
  position: absolute;
  z-index: 20;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(0,0,0,.72);
  color: #fff2d5;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 2px 8px #000;
  pointer-events: none;
  animation: firepantsFloatUp 1.2s ease-out forwards;
}

.firepants-floating-text.cool {
  color: #c9f4ff;
  border-color: rgba(112, 223, 255, .7);
}

.firepants-floating-text.power {
  color: #ffe199;
  border-color: rgba(214,168,79,.72);
}

.firepants-floating-text.danger {
  color: #ffb0a0;
  border-color: rgba(255, 74, 22, .72);
}

.firepants-heat-fill {
  transition: width .18s ease;
}

.firepants-critical .firepants-game-card {
  animation: firepantsScreenPanic .12s linear infinite;
}

.firepants-cooling .firepants-game-card {
  box-shadow:
    0 0 70px rgba(60, 194, 255, .20),
    0 0 110px rgba(0, 0, 0, .88),
    inset 0 0 46px rgba(126, 222, 255, .08);
}

@keyframes firepantsAuraPulse {
  from { transform: scale(.95); opacity: .55; }
  to { transform: scale(1.06); opacity: .95; }
}

@keyframes firepantsFlameDance {
  from { transform: scale(calc(.68 + .45 * var(--firepants-heat))) rotate(-2deg); }
  to { transform: scale(calc(.72 + .52 * var(--firepants-heat))) rotate(2deg); }
}

@keyframes firepantsCriticalShake {
  0%, 100% { transform: translateX(-50%) translate(0,0); }
  25% { transform: translateX(-50%) translate(2px,-1px); }
  50% { transform: translateX(-50%) translate(-2px,1px); }
  75% { transform: translateX(-50%) translate(1px,1px); }
}

@keyframes firepantsSpecialPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.18); }
}

@keyframes firepantsFloatUp {
  0% { opacity: 0; transform: translateY(12px) scale(.96); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-48px) scale(1.04); }
}

@keyframes firepantsScreenPanic {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(1px,-1px); }
}

@media (max-width: 760px) {
  .firepants-cooldown-card.firepants-game-card {
    min-height: 94vh;
    padding: 12px;
  }

  .firepants-game-topbar {
    align-items: center;
  }

  .firepants-game-topbar h2 {
    font-size: .86rem;
  }

  .firepants-arena {
    height: 58vh;
  }

  .firepants-character-wrap {
    width: min(310px, 72vw);
    height: 58vh;
    bottom: -1%;
  }

  .firepants-speech {
    top: 10px;
    padding: 9px 12px;
    font-size: .82rem;
  }

  .firepants-falling-item {
    min-width: 78px;
    min-height: 66px;
    padding: 7px 9px;
  }

  .firepants-falling-item .firepants-item-icon {
    font-size: clamp(2.2rem, 10vw, 3.55rem);
  }

  .firepants-item-guide {
    font-size: .68rem;
  }
}


/* ================= FIREPANTS V1.2.16 LAYOUT / VOICE POLISH ================= */

.firepants-choose-different-btn {
  margin-top: 10px;
  background:
    linear-gradient(180deg, rgba(55, 32, 43, .98), rgba(22, 12, 18, .98));
  border: 1px solid rgba(214, 168, 79, .32);
}

.firepants-choose-different-btn:hover {
  filter: brightness(1.08);
}

.firepants-character-wrap {
  bottom: -14% !important;
  width: min(432px, 52vw) !important;
  height: min(660px, 82vh) !important;
}

.firepants-character.in-game {
  object-position: center bottom !important;
}

.firepants-pants-flames {
  bottom: 10% !important;
}

.firepants-ember-cloud {
  bottom: 5% !important;
}

.firepants-speech {
  z-index: 9 !important;
  top: 16px !important;
  max-width: min(560px, 76vw) !important;
  opacity: .96;
}

.firepants-voice-echo {
  position: absolute;
  z-index: 4;
  max-width: min(540px, 70vw);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 210, 124, .34);
  background:
    linear-gradient(180deg, rgba(255, 224, 145, .28), rgba(255, 89, 16, .10));
  color: rgba(255, 229, 174, .84);
  font-weight: 950;
  font-size: clamp(.72rem, 1.15vw, 1.05rem);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 2px 10px rgba(0,0,0,.88),
    0 0 16px rgba(255, 105, 20, .42);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.62);
  filter: blur(.15px);
  animation: firepantsVoiceToUser 1.85s ease-out forwards;
}

@keyframes firepantsVoiceToUser {
  0% {
    opacity: 0;
    transform: translate(-50%, -10%) scale(.48);
    filter: blur(1.6px);
  }
  15% {
    opacity: .50;
    filter: blur(.45px);
  }
  50% {
    opacity: .24;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -165%) scale(1.85);
    filter: blur(2.2px);
  }
}

@media (max-width: 760px) {
  .firepants-character-wrap {
    bottom: -11% !important;
    width: min(300px, 64vw) !important;
    height: min(500px, 68vh) !important;
  }

  .firepants-speech {
    top: 10px !important;
    max-width: 82vw !important;
  }

  .firepants-voice-echo {
    max-width: 78vw;
    font-size: .70rem;
  }
}


/* ================= FIREPANTS V1.2.17 CENTERING / VOICE-ONLY POLISH ================= */

/* The old fixed speech bubble covered FirePants' face. Sayings now live as drifting voice echoes. */
.firepants-speech,
#firepantsSpeech {
  display: none !important;
}

/* Center FirePants as the star of the arena. The transparent cutout sits lower and larger. */
.firepants-character-wrap {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: -22% !important;
  transform: translateX(-50%) !important;
  width: min(520px, 60vw) !important;
  height: min(790px, 92vh) !important;
  z-index: 5 !important;
}

.firepants-character-wrap::before {
  inset: 18% 8% 4% !important;
  opacity: .88 !important;
}

.firepants-character.in-game {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter:
    drop-shadow(0 24px 34px rgba(0,0,0,.72))
    drop-shadow(0 0 18px rgba(255, 82, 18, .28)) !important;
}

.firepants-pants-flames {
  left: 50% !important;
  bottom: 7% !important;
  width: 46% !important;
  height: 30% !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.firepants-ember-cloud {
  left: 50% !important;
  bottom: 1% !important;
  width: 58% !important;
  height: 34% !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
}

/* Keep drops above the character enough to play, but voice never blocks clicks. */
.firepants-drop {
  z-index: 12 !important;
}

.firepants-voice-echo {
  z-index: 8 !important;
  max-width: min(680px, 76vw) !important;
  padding: 10px 18px !important;
  border: 1px solid rgba(255, 218, 141, .58) !important;
  background:
    linear-gradient(180deg, rgba(255, 230, 165, .46), rgba(255, 112, 28, .22)) !important;
  color: rgba(255, 238, 198, .96) !important;
  opacity: 0;
  font-size: clamp(.82rem, 1.32vw, 1.22rem) !important;
  box-shadow:
    0 0 18px rgba(255, 109, 28, .22),
    inset 0 0 14px rgba(255,255,255,.08) !important;
  text-shadow:
    0 2px 10px rgba(0,0,0,.94),
    0 0 12px rgba(255, 120, 32, .58),
    0 0 2px rgba(0,0,0,.95) !important;
  pointer-events: none !important;
  animation: firepantsVoiceToUserV2 1.95s ease-out forwards !important;
}

@keyframes firepantsVoiceToUserV2 {
  0% {
    opacity: 0;
    transform: translate(-50%, 8%) scale(.50);
    filter: blur(1.2px);
  }
  16% {
    opacity: .72;
    transform: translate(-50%, -20%) scale(.72);
    filter: blur(.25px);
  }
  48% {
    opacity: .52;
    transform: translate(-50%, -74%) scale(1.12);
    filter: blur(.15px);
  }
  78% {
    opacity: .24;
    transform: translate(-50%, -124%) scale(1.48);
    filter: blur(.85px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -184%) scale(1.92);
    filter: blur(2.1px);
  }
}

@media (max-width: 760px) {
  .firepants-character-wrap {
    bottom: -18% !important;
    width: min(390px, 78vw) !important;
    height: min(640px, 78vh) !important;
  }

  .firepants-voice-echo {
    max-width: 84vw !important;
    font-size: .78rem !important;
    padding: 8px 12px !important;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .firepants-character-wrap {
    bottom: -28% !important;
    width: min(500px, 54vw) !important;
    height: min(700px, 96vh) !important;
  }
}


/* ================= FIREPANTS V1.2.18 GAMEPLAY FIXES ================= */

/* Face/top visibility fix: anchor the transparent cutout in the middle/lower arena instead of letting the top crop out. */
.firepants-character-wrap {
  left: 50% !important;
  right: auto !important;
  top: 56% !important;
  bottom: auto !important;
  transform: translate(-50%, -36%) !important;
  width: min(500px, 58vw) !important;
  height: min(620px, 78vh) !important;
  z-index: 5 !important;
}

.firepants-character.in-game {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

.firepants-pants-flames {
  left: 50% !important;
  bottom: 8% !important;
  width: 44% !important;
  height: 29% !important;
  transform: translateX(-50%) !important;
}

.firepants-ember-cloud {
  left: 50% !important;
  bottom: 1% !important;
  width: 58% !important;
  height: 32% !important;
  transform: translateX(-50%) !important;
}

/* Make the game less about blue-vs-red reflex and more about reading the actual drop. */
.firepants-falling-item.cool,
.firepants-falling-item.hot,
.firepants-falling-item.danger,
.firepants-falling-item.character_danger {
  border-color: rgba(214, 168, 79, .58) !important;
  background:
    radial-gradient(circle at top, rgba(255, 221, 151, .16), rgba(19, 10, 12, .95)) !important;
  color: #fff1d2 !important;
  box-shadow:
    0 0 22px rgba(214, 168, 79, .18),
    0 10px 28px rgba(0,0,0,.62) !important;
}

.firepants-falling-item.cool .firepants-item-icon,
.firepants-falling-item.hot .firepants-item-icon,
.firepants-falling-item.danger .firepants-item-icon,
.firepants-falling-item.character_danger .firepants-item-icon {
  filter:
    drop-shadow(0 0 8px rgba(255, 169, 54, .28))
    drop-shadow(0 2px 4px rgba(0,0,0,.72));
}

/* Keep specials visually special, but still not a simple good/bad color code. */
.firepants-falling-item.power,
.firepants-falling-item.character {
  border-color: rgba(255, 218, 122, .90) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.30), rgba(20, 13, 4, .94)) !important;
}

.firepants-item-guide {
  color: rgba(239, 232, 223, .84) !important;
  font-size: .78rem !important;
}

.firepants-item-guide .cool,
.firepants-item-guide .hot {
  color: inherit !important;
}

/* Voice text stays readable but not click-blocking. */
.firepants-voice-echo {
  color: rgba(255, 240, 202, .98) !important;
  border-color: rgba(255, 226, 150, .68) !important;
  background:
    linear-gradient(180deg, rgba(255, 230, 165, .52), rgba(255, 112, 28, .26)) !important;
}

@media (max-width: 760px) {
  .firepants-character-wrap {
    top: 58% !important;
    transform: translate(-50%, -38%) !important;
    width: min(390px, 76vw) !important;
    height: min(520px, 72vh) !important;
  }
}

@media (max-height: 720px) and (min-width: 761px) {
  .firepants-character-wrap {
    top: 58% !important;
    transform: translate(-50%, -34%) !important;
    width: min(460px, 52vw) !important;
    height: min(540px, 74vh) !important;
  }
}


/* ================= RAVEN UI ASSET BADGES V1.2.19 ================= */

.player-row-with-assets {
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-identity {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.player-identity.compact {
  gap: 3px;
}

.player-display-name,
.host-wing-player-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.host-wing-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  color: #ffe1a0;
  font-weight: 950;
  letter-spacing: .035em;
  text-shadow:
    0 2px 8px rgba(0,0,0,.85),
    0 0 12px rgba(214,168,79,.24);
}

.host-wing-name.compact {
  gap: 3px;
  font-size: .82rem;
  line-height: 1.05;
}

.host-wing {
  width: 30px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 7px rgba(214,168,79,.34))
    drop-shadow(0 2px 4px rgba(0,0,0,.68));
}

.host-wing-name.compact .host-wing {
  width: 19px;
  height: 15px;
}

.host-wing-player-name {
  min-width: 0;
}

.player-status-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.player-status-badges.compact {
  gap: 3px;
}

.player-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.24);
  background: rgba(0,0,0,.32);
  color: #d6a84f;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.player-status-badges.compact .player-status-badge {
  min-height: 18px;
  padding: 2px 5px;
  font-size: .58rem;
}

.asset-status-badge img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 7px rgba(214,168,79,.28))
    drop-shadow(0 2px 3px rgba(0,0,0,.62));
}

.player-status-badges.compact .asset-status-badge img {
  width: 15px;
  height: 15px;
}

.host-text-badge {
  color: #110905;
  background: linear-gradient(180deg, #f2ca74, #9e661e);
  border-color: rgba(255,232,166,.55);
}

.shield-status-badge {
  border-color: rgba(214,168,79,.38);
}

.dagger-status-badge {
  border-color: rgba(214,168,79,.38);
}

.soul-status-badge {
  color: #cfc7ff;
  border-color: rgba(180,170,255,.28);
}

.waiting-status-badge {
  color: #cfd6dd;
  border-color: rgba(210,218,225,.24);
}

.room-player-seat {
  overflow: visible;
}

.room-player-seat .player-identity.compact {
  width: 100%;
}

.room-player-seat .host-wing-player-name,
.room-player-seat .player-display-name {
  max-width: 92px;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 650px) {
  .host-wing {
    width: 24px;
    height: 18px;
  }

  .host-wing-name.compact .host-wing {
    width: 16px;
    height: 13px;
  }

  .room-player-seat .host-wing-player-name,
  .room-player-seat .player-display-name {
    max-width: 78px;
  }

  .player-status-badges.compact .player-status-badge span {
    display: none;
  }
}


/* ================= RAVEN SHIELD CLEANUP V1.2.20 ================= */

.inline-raven-shield-icon,
.inline-raven-dagger-icon {
  display: inline-block;
  width: 1.22em;
  height: 1.22em;
  object-fit: contain;
  vertical-align: -0.22em;
  margin-right: .18em;
  filter:
    drop-shadow(0 0 6px rgba(214,168,79,.32))
    drop-shadow(0 1px 2px rgba(0,0,0,.65));
}

.challenge-result-box .inline-raven-shield-icon,
.voting-result-box .inline-raven-shield-icon,
.raven-feed-item .inline-raven-shield-icon {
  width: 1.35em;
  height: 1.35em;
}

/* Hide any legacy emoji-style shield markers that might remain as decorative spans/classes. */
.legacy-shield-icon,
.shield-emoji,
.old-shield-icon {
  display: none !important;
}


/* ================= RAVEN SHIELD AWARD REVEAL V1.2.21 ================= */

.shield-awarded-icon-wrap {
  position: relative;
  width: min(230px, 52vw);
  height: min(230px, 52vw);
  margin: 10px auto 16px !important;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.shield-awarded-glow-ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 144, .52) 0%, rgba(214,168,79,.18) 34%, rgba(157,23,35,.08) 56%, transparent 72%);
  box-shadow:
    0 0 34px rgba(214,168,79,.38),
    0 0 80px rgba(157,23,35,.20);
  animation: ravenShieldRevealGlow 2.45s ease-in-out infinite;
  z-index: 0;
}

.shield-awarded-icon-image {
  position: relative;
  z-index: 1;
  width: min(210px, 46vw) !important;
  height: min(210px, 46vw) !important;
  object-fit: contain;
  animation: ravenShieldRevealFloat 2.65s ease-in-out infinite;
  filter:
    drop-shadow(0 0 18px rgba(214,168,79,.78))
    drop-shadow(0 0 34px rgba(214,168,79,.42))
    drop-shadow(0 18px 20px rgba(0,0,0,.65)) !important;
}

.shield-awarded-card h2 {
  margin-top: 8px !important;
}

.challenge-result-shield-icon {
  width: 1.75em !important;
  height: 1.75em !important;
  vertical-align: -0.42em !important;
}

@keyframes ravenShieldRevealFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.035);
  }
}

@keyframes ravenShieldRevealGlow {
  0%, 100% {
    opacity: .72;
    transform: scale(.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@media (max-width: 650px) {
  .shield-awarded-icon-wrap {
    width: min(190px, 54vw);
    height: min(190px, 54vw);
  }

  .shield-awarded-icon-image {
    width: min(170px, 48vw) !important;
    height: min(170px, 48vw) !important;
  }
}




/* ================= V1.2.24: THE TABLE OF TRUTH ================= */

/* Survivor death image phone-safe placement. */
@media (max-width: 760px), (max-height: 760px) {
  .survivor-elimination-plaque {
    bottom: clamp(58px, 10vh, 118px) !important;
    width: min(84vw, 620px) !important;
    min-height: clamp(78px, 11vh, 124px) !important;
    padding: clamp(8px, 1.4vh, 14px) clamp(14px, 4vw, 24px) !important;
  }

  .survivor-elimination-plaque h2 {
    font-size: clamp(1.02rem, 5.2vw, 1.72rem) !important;
  }

  .survivor-elimination-plaque-lines {
    font-size: clamp(.58rem, 3vw, .94rem) !important;
  }

  .survivor-elimination-btn {
    bottom: clamp(190px, 27vh, 285px) !important;
  }
}

/* FirePants field-test readability/return hotfix. */
.firepants-return-btn {
  margin-top: 14px !important;
  width: min(280px, 82vw) !important;
}

.firepants-item-guide span:nth-child(2),
.firepants-item-guide span:nth-child(3) {
  color: #d7cfc8;
}

/* Afterlife entry panel. */
.deceivers-truth-afterlife-panel {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(214, 168, 79, .30);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(214, 168, 79, .10), transparent 56%),
    rgba(0,0,0,.34);
  text-align: center;
  box-shadow:
    0 0 26px rgba(0,0,0,.42),
    inset 0 0 18px rgba(214,168,79,.05);
}

.deceivers-truth-afterlife-panel h3 {
  margin: 0 0 8px;
  color: #d6a84f;
  letter-spacing: .14em;
}

.deceivers-truth-afterlife-actions {
  margin-top: 12px;
}

.deceivers-truth-death-btn {
  margin-top: 10px !important;
}

/* Full-screen overlay. */
.deceivers-truth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000004;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.12), rgba(0,0,0,.94) 62%),
    rgba(0,0,0,.96);
  box-sizing: border-box;
}

.deceivers-truth-overlay.hidden {
  display: none !important;
}

.deceivers-truth-shell {
  position: relative;
  width: min(1480px, 98vw);
  height: min(930px, 96vh);
  border: 1px solid rgba(214,168,79,.36);
  border-radius: 26px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 9, 13, .98), rgba(0,0,0,.98));
  box-shadow:
    0 0 70px rgba(0,0,0,.88),
    0 0 40px rgba(214,168,79,.16),
    inset 0 0 44px rgba(214,168,79,.06);
}

.deceivers-truth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.34);
  background: rgba(0,0,0,.58);
  color: #ffe3a5;
  font-size: 1.7rem;
  line-height: 1;
}

.deceivers-truth-content {
  height: 100%;
  min-height: 0;
}

/* Intro screen using the Table of Truth image. */
.deceivers-truth-intro {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: min(900px, 96vh);
  overflow: hidden;
}

.deceivers-truth-intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(.78) contrast(1.08) saturate(.96);
}

.deceivers-truth-intro-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 42%, rgba(0,0,0,.72)),
    radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.24) 56%, rgba(0,0,0,.70) 100%);
  pointer-events: none;
}

.deceivers-truth-intro-copy {
  position: absolute;
  z-index: 2;
  top: clamp(26px, 4vh, 58px);
  left: 50%;
  width: min(760px, 88vw);
  transform: translateX(-50%);
  text-align: center;
  padding: 16px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(0,0,0,.48), rgba(0,0,0,.18));
  border: 1px solid rgba(214,168,79,.18);
  box-shadow: 0 0 34px rgba(0,0,0,.36);
}

.deceivers-truth-intro-copy h2 {
  margin: 6px 0 8px;
  color: #d6a84f;
  font-size: clamp(2rem, 4.6vw, 4.7rem);
  letter-spacing: .105em;
  text-shadow:
    0 2px 12px rgba(0,0,0,.9),
    0 0 20px rgba(214,168,79,.22);
}

.deceivers-truth-intro-copy p {
  margin: 8px 0;
  color: #f3e7da;
  font-size: clamp(.95rem, 1.38vw, 1.28rem);
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0,0,0,.88);
}

.deceivers-truth-intro-copy h3 {
  margin: 10px 0 0;
  color: #fff0c7;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.deceivers-truth-kicker {
  color: #a99699;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.deceivers-truth-path-choice {
  position: absolute;
  z-index: 3;
  width: min(214px, 20vw);
  min-height: min(310px, 37vh);
  margin: 0;
  padding: 12px 12px 14px;
  border: 1px solid rgba(214,168,79,.52);
  border-radius: 22px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.24), rgba(0,0,0,.76) 58%),
    rgba(8,5,6,.78);
  box-shadow:
    0 0 24px rgba(0,0,0,.62),
    0 0 24px rgba(214,168,79,.15),
    inset 0 0 18px rgba(214,168,79,.06);
  color: #efe8df;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  transform: translate(-50%, -50%);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
}

.deceivers-truth-path-choice:hover,
.deceivers-truth-path-choice:focus {
  transform: translate(-50%, -50%) scale(1.045);
  border-color: rgba(255, 226, 150, .82);
  filter: brightness(1.08);
  box-shadow:
    0 0 34px rgba(0,0,0,.72),
    0 0 36px rgba(214,168,79,.30),
    inset 0 0 22px rgba(214,168,79,.08);
}

.deceivers-truth-path-choice img {
  width: 100%;
  max-height: min(190px, 22vh);
  object-fit: cover;
  object-position: top center;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 18px rgba(0,0,0,.42);
}

.deceivers-truth-choice-mode {
  padding: 4px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d7532f, #67180e);
  color: #fff2df;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.deceivers-truth-choice-mode.calm {
  background: linear-gradient(180deg, #e6bd66, #8e5617);
  color: #160a05;
}

.deceivers-truth-path-choice strong {
  color: #ffe0a1;
  font-size: clamp(.92rem, 1.28vw, 1.18rem);
  letter-spacing: .07em;
}

.deceivers-truth-path-choice small {
  color: #d7cfc8;
  line-height: 1.25;
  font-size: .72rem;
}

.deceivers-truth-path-choice.firepants-choice {
  left: 22.8%;
  top: 75.4%;
}

.deceivers-truth-path-choice.goody-choice {
  left: 77.4%;
  top: 75.4%;
}

/* Card game screen. */
.deceivers-truth-game {
  height: 100%;
  overflow-y: auto;
  padding: clamp(18px, 2.4vw, 34px);
  box-sizing: border-box;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.08), transparent 40%),
    linear-gradient(180deg, rgba(13,7,9,.98), rgba(0,0,0,.98));
}

.deceivers-truth-game-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 240px);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 16px;
}

.deceivers-truth-game-header h2 {
  margin: 4px 0 8px;
  color: #d6a84f;
  font-size: clamp(1.8rem, 4vw, 3.25rem);
  letter-spacing: .08em;
}

.deceivers-truth-game-header p {
  margin: 0;
  color: #d7cfc8;
}

.deceivers-truth-status-card {
  padding: 14px;
  border: 1px solid rgba(214,168,79,.25);
  border-radius: 18px;
  background: rgba(0,0,0,.32);
  text-align: center;
}

.deceivers-truth-status-card span {
  display: block;
  color: #a99699;
  font-size: .72rem;
  letter-spacing: .16em;
}

.deceivers-truth-status-card strong {
  display: block;
  margin-top: 6px;
  color: #ffe0a1;
  font-size: 1.25rem;
}

.deceivers-truth-status-card small {
  display: block;
  margin-top: 4px;
  color: #a99699;
}

.deceivers-truth-final-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(214,168,79,.34);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(214,168,79,.13), rgba(0,0,0,.30));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.deceivers-truth-final-notice strong {
  color: #ffe0a1;
  letter-spacing: .08em;
}

.deceivers-truth-final-notice span {
  color: #d7cfc8;
  font-size: .9rem;
}

.deceivers-truth-final-notice button {
  width: auto;
  margin: 0;
  padding: 10px 14px;
}

.deceivers-truth-score-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 auto 14px;
  width: min(760px, 100%);
}

.deceivers-truth-score-row div {
  padding: 10px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 14px;
  background: rgba(0,0,0,.28);
  text-align: center;
}

.deceivers-truth-score-row span {
  display: block;
  color: #a99699;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.deceivers-truth-score-row strong {
  color: #ffe0a1;
  font-size: 1.22rem;
}

.deceivers-truth-raven-line {
  margin: 0 auto 18px;
  width: min(860px, 100%);
  min-height: 48px;
  padding: 14px 18px;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 70%),
    rgba(0,0,0,.30);
  color: #efe8df;
  text-align: center;
  font-size: clamp(.95rem, 1.25vw, 1.12rem);
  line-height: 1.45;
}

.deceivers-truth-card-row {
  position: relative;
  margin: 0 auto;
  width: min(1040px, 100%);
  min-height: clamp(230px, 38vh, 410px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.5vw, 20px);
  perspective: 1100px;
}

.deceivers-truth-card-row.locked {
  pointer-events: none;
}

.deceivers-truth-card {
  width: clamp(116px, 14vw, 190px);
  aspect-ratio: 2.35 / 3.45;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  transform-style: preserve-3d;
  transition:
    transform .28s ease,
    filter .18s ease;
  cursor: pointer;
}

.deceivers-truth-card:hover:not(:disabled),
.deceivers-truth-card:focus:not(:disabled) {
  transform: translateY(-8px) scale(1.035);
  filter: brightness(1.08);
}

.deceivers-truth-card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .38s ease;
}

.deceivers-truth-card.face-down .deceivers-truth-card-inner {
  transform: rotateY(180deg);
}

.deceivers-truth-card-front,
.deceivers-truth-card-back {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(214,168,79,.48);
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow:
    0 16px 28px rgba(0,0,0,.48),
    0 0 24px rgba(214,168,79,.10),
    inset 0 0 24px rgba(214,168,79,.05);
}

.deceivers-truth-card-front {
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.12), transparent 58%),
    linear-gradient(180deg, #181014, #050304);
  color: #ffe0a1;
  text-align: center;
}

.deceivers-truth-card-back {
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.18), transparent 52%),
    linear-gradient(135deg, #11080b, #050304 54%, #1b0e12);
  color: #d6a84f;
  transform: rotateY(180deg);
}

.deceivers-truth-card-back::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(214,168,79,.35);
  border-radius: 15px;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.10), transparent 55%);
}

.deceivers-truth-card-back span {
  z-index: 1;
  font-size: clamp(.7rem, 1vw, .95rem);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.deceivers-truth-card-front strong {
  position: relative;
  z-index: 2;
  display: block;
  color: #f6d48a;
  font-size: clamp(.86rem, 1.35vw, 1.28rem);
  letter-spacing: .11em;
  text-shadow: 0 2px 12px rgba(0,0,0,.75);
}

.deceivers-truth-card.truth-card .deceivers-truth-card-front {
  background:
    radial-gradient(circle at top, rgba(214,168,79,.16), transparent 42%),
    linear-gradient(180deg, #160d10, #050304);
}

.truth-card-image-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 74%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.truth-card-image {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.52));
}

.deceivers-truth-card.selected .deceivers-truth-card-front,
.deceivers-truth-card.correct .deceivers-truth-card-front {
  border-color: rgba(255,230,151,.94);
  box-shadow:
    0 0 34px rgba(214,168,79,.28),
    0 16px 28px rgba(0,0,0,.52),
    inset 0 0 30px rgba(214,168,79,.16);
}

.deceivers-truth-card.wrong .deceivers-truth-card-front {
  border-color: rgba(157,23,35,.88);
  box-shadow:
    0 0 34px rgba(157,23,35,.28),
    0 16px 28px rgba(0,0,0,.52),
    inset 0 0 30px rgba(157,23,35,.15);
}

.deceivers-truth-actions {
  margin: 18px auto 0;
  width: min(900px, 100%);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.deceivers-truth-actions button {
  width: auto;
  min-width: 180px;
  margin: 0;
}

/* Shuffle animation cue applied by frequent re-rendering. */
.deceivers-truth-card.face-down {
  animation: deceiversTruthCardBreathe .42s ease;
}

@keyframes deceiversTruthCardBreathe {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-7px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .deceivers-truth-game-header {
    grid-template-columns: 1fr;
  }

  .deceivers-truth-final-notice {
    grid-template-columns: 1fr;
  }

  .deceivers-truth-final-notice button {
    width: 100%;
  }

  .deceivers-truth-card-row {
    flex-wrap: wrap;
    min-height: auto;
    padding: 10px 0;
  }

  .deceivers-truth-card {
    width: clamp(94px, 27vw, 146px);
  }
}

@media (max-width: 760px) {
  .deceivers-truth-shell {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  .deceivers-truth-overlay {
    padding: 0;
  }

  .deceivers-truth-intro {
    min-height: 100vh;
  }

  .deceivers-truth-intro-copy {
    top: 52px;
    width: 86vw;
    padding: 12px;
  }

  .deceivers-truth-intro-copy h2 {
    font-size: clamp(1.55rem, 7.6vw, 2.8rem);
  }

  .deceivers-truth-intro-copy p {
    font-size: clamp(.82rem, 3.3vw, 1rem);
  }

  .deceivers-truth-path-choice {
    width: min(150px, 40vw);
    min-height: 232px;
    padding: 9px;
  }

  .deceivers-truth-path-choice img {
    max-height: 138px;
  }

  .deceivers-truth-path-choice.firepants-choice {
    left: 27%;
    top: 76%;
  }

  .deceivers-truth-path-choice.goody-choice {
    left: 73%;
    top: 76%;
  }

  .deceivers-truth-game {
    padding: 56px 10px 18px;
  }

  .deceivers-truth-score-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .deceivers-truth-score-row div {
    padding: 8px 4px;
  }

  .deceivers-truth-score-row span {
    font-size: .54rem;
  }

  .deceivers-truth-score-row strong {
    font-size: 1rem;
  }

  .deceivers-truth-card-row {
    gap: 8px;
  }

  .deceivers-truth-card {
    width: clamp(86px, 29vw, 120px);
    border-radius: 14px;
  }

  .deceivers-truth-card-front,
  .deceivers-truth-card-back {
    border-radius: 14px;
  }

  .deceivers-truth-card-front {
    padding: 10px;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.62rem, 3.4vw, .9rem);
  }

  .truth-symbol {
    font-size: clamp(.38rem, 2vw, .58rem);
    letter-spacing: .06em;
  }

  .deceivers-truth-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .deceivers-truth-actions button {
    width: 100%;
  }
}


@media (max-width: 760px) {
  .truth-card-image-wrap {
    min-height: 70%;
  }
}



/* ================= V1.2.24.3 MOBILE / VISIBILITY HOTFIXES ================= */

.emoji-status-icon {
  display: inline-block;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  vertical-align: -0.12em;
  filter: none !important;
  opacity: 1 !important;
  font-size: 1.05em;
  line-height: 1;
}

.emoji-asset-status-badge img {
  display: none !important;
}

.emoji-asset-status-badge .badge-emoji {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.75));
}

@media (max-width: 760px), (max-height: 760px) {
  .survivor-elimination-scene {
    width: 100vw !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .survivor-elimination-bg {
    object-position: center center !important;
  }

  .survivor-elimination-plaque {
    top: 57svh !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(88vw, 520px) !important;
    min-height: 92px !important;
    max-height: 23svh !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    padding: 10px 16px !important;
    gap: 4px !important;
    background:
      radial-gradient(circle at top, rgba(255, 231, 150, .82), rgba(167, 103, 28, .78) 62%, rgba(79, 42, 9, .88)),
      linear-gradient(180deg, rgba(230, 176, 75, .95), rgba(92, 47, 11, .94)) !important;
    border: 2px solid rgba(255, 226, 140, .78) !important;
    border-radius: 18px !important;
    box-shadow:
      0 12px 26px rgba(0,0,0,.78),
      inset 0 0 18px rgba(48, 23, 3, .42),
      inset 0 0 0 1px rgba(45, 20, 2, .55) !important;
    color: #150b03 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .survivor-elimination-plaque h2 {
    display: block !important;
    color: #160c03 !important;
    font-size: clamp(.98rem, 5.1vw, 1.62rem) !important;
    line-height: 1.02 !important;
    letter-spacing: .055em !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255, 232, 166, .38) !important;
  }

  .survivor-elimination-plaque-lines {
    display: grid !important;
    color: #1a0f04 !important;
    font-size: clamp(.62rem, 3.1vw, .90rem) !important;
    line-height: 1.08 !important;
    letter-spacing: .045em !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 1px 0 rgba(255, 232, 166, .30) !important;
  }

  .survivor-elimination-bottom-line {
    bottom: 74px !important;
    font-size: clamp(.52rem, 2.4vw, .72rem) !important;
    opacity: .84 !important;
  }

  .survivor-elimination-btn {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
    z-index: 6 !important;
  }
}

.deceivers-truth-overlay,
.deceivers-truth-shell,
.deceivers-truth-card-row {
  overscroll-behavior: contain;
}

.deceivers-truth-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 760px) {
  .deceivers-truth-game {
    height: 100svh !important;
    overflow-y: auto !important;
    padding: 52px 8px 12px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .deceivers-truth-game-header {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .deceivers-truth-game-header h2 {
    font-size: clamp(1.25rem, 6.2vw, 2rem) !important;
    margin-bottom: 4px !important;
  }

  .deceivers-truth-game-header p {
    font-size: clamp(.76rem, 3.2vw, .92rem) !important;
    line-height: 1.25 !important;
  }

  .deceivers-truth-status-card {
    padding: 7px !important;
  }

  .deceivers-truth-score-row {
    margin-bottom: 6px !important;
  }

  .deceivers-truth-raven-line {
    min-height: auto !important;
    margin-bottom: 8px !important;
    padding: 8px 10px !important;
    font-size: clamp(.78rem, 3.3vw, .94rem) !important;
    line-height: 1.25 !important;
  }

  .deceivers-truth-card-row {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 4px 0 8px !important;
    overflow: visible !important;
    perspective: 900px !important;
  }

  .deceivers-truth-card {
    width: min(100%, 96px) !important;
    min-width: 0 !important;
    border-radius: 12px !important;
  }

  .deceivers-truth-card-front,
  .deceivers-truth-card-back {
    border-radius: 12px !important;
  }

  .deceivers-truth-card-back span {
    font-size: clamp(.46rem, 2.2vw, .62rem) !important;
    line-height: 1.1 !important;
    letter-spacing: .08em !important;
  }

  .deceivers-truth-actions {
    margin-top: 8px !important;
    gap: 6px !important;
  }

  .deceivers-truth-actions button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 12px !important;
  }

  .truth-card-image-wrap {
    min-height: 0 !important;
    height: 100% !important;
  }

  .truth-card-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

@media (max-width: 390px) {
  .deceivers-truth-card-row {
    grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)) !important;
    gap: 5px !important;
  }

  .deceivers-truth-card {
    width: min(100%, 84px) !important;
  }
}

.final-reveal-panel {
  text-align: center !important;
}

.final-role-list {
  width: min(760px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.final-role-row.final-role-reveal-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  text-align: left !important;
}

.final-role-row.final-role-reveal-row .final-role-name {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 560px) {
  .final-role-row.final-role-reveal-row {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 5px !important;
    text-align: center !important;
  }

  .final-role-row.final-role-reveal-row .final-role-name,
  .final-role-row.final-role-reveal-row .final-role-value {
    text-align: center !important;
    width: 100% !important;
  }
}



/* ================= V1.2.24.4 FLOW / AFTERLIFE / LOBBY HOTFIXES ================= */

/* Lobby: when 4+ players are present, guide host down to Start Game. */
#startGameBtn.lobby-start-ready-throb {
  animation: lobbyStartReadyPulse 1.05s ease-in-out infinite;
  box-shadow:
    0 0 0 0 rgba(214,168,79,.58),
    0 0 28px rgba(214,168,79,.32) !important;
  border-color: rgba(255, 226, 150, .86) !important;
}

@keyframes lobbyStartReadyPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
    box-shadow:
      0 0 0 0 rgba(214,168,79,.45),
      0 0 18px rgba(214,168,79,.24);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.15);
    box-shadow:
      0 0 0 10px rgba(214,168,79,0),
      0 0 36px rgba(214,168,79,.48);
  }
}

/* Doctor Death: keep the scene powerful, but make Last Words / Raven option impossible to miss.
   The action dock appears after 10 seconds. */
.personal-death-card {
  position: relative;
  padding-bottom: clamp(112px, 18vh, 150px) !important;
}

.death-afterlife-action-dock {
  position: sticky;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 50;
  width: min(420px, 94%);
  margin: 18px auto 0;
  padding: 12px;
  border: 1px solid rgba(214,168,79,.30);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.16), transparent 65%),
    rgba(0,0,0,.74);
  box-shadow:
    0 12px 30px rgba(0,0,0,.72),
    0 0 22px rgba(214,168,79,.16);
  display: grid;
  gap: 10px;
  opacity: .08;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity .45s ease,
    transform .45s ease;
}

.death-cinematic-overlay.death-actions-ready .death-afterlife-action-dock {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.death-afterlife-action-dock button {
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px;
}

.death-afterlife-action-dock .last-words-complete-in-dock {
  opacity: .72;
}

/* The Table of Truth overlay must never fall into normal page flow. */
.deceivers-truth-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000004 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deceivers-truth-overlay.hidden,
#deceiversTruthOverlay.hidden {
  display: none !important;
}

.deceivers-truth-content {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 760px) {
  .personal-death-card {
    width: min(94vw, 680px) !important;
    margin-top: 10px !important;
    padding-bottom: 126px !important;
  }

  .death-image-frame.death-image-personal {
    max-height: 42svh !important;
    overflow: hidden !important;
  }

  .death-afterlife-action-dock {
    width: min(390px, 92vw);
    padding: 10px;
  }

  .death-cinematic-card p,
  .last-words-card p {
    font-size: .92rem;
    line-height: 1.36;
  }
}


/* ================= V1.2.24.5 TABLE OF TRUTH POLISH ================= */

.deceivers-truth-card-back {
  background:
    radial-gradient(circle at center, rgba(214,168,79,.18), transparent 52%),
    linear-gradient(135deg, #11080b, #050304 54%, #1b0e12);
}

.deceivers-truth-card-back::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 15px;
  border: 1px solid rgba(214,168,79,.40);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(214,168,79,.12) 8% 9%, transparent 9% 91%, rgba(214,168,79,.12) 91% 92%, transparent 92% 100%),
    linear-gradient(transparent 0 8%, rgba(214,168,79,.12) 8% 9%, transparent 9% 91%, rgba(214,168,79,.12) 91% 92%, transparent 92% 100%),
    radial-gradient(circle at center, rgba(214,168,79,.08), transparent 56%);
}

.deceivers-truth-card-back::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 12px;
  border: 1px solid rgba(214,168,79,.18);
  pointer-events: none;
}

.deceivers-truth-card-back-emblem {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1;
  color: #d6a84f;
  text-shadow: 0 0 18px rgba(214,168,79,.25), 0 2px 12px rgba(0,0,0,.8);
  margin-bottom: 10px;
}

.deceivers-truth-card-back-title {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 84%;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(.62rem, 1vw, .88rem);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.18;
  text-transform: uppercase;
  color: #d6a84f;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
}

.deceivers-truth-card.correct {
  animation: deceiversTruthVictoryPulse 1.15s ease-in-out infinite;
}

.deceivers-truth-game.truth-round-won .deceivers-truth-card.correct .truth-card-image,
.deceivers-truth-card.correct .truth-card-image {
  filter: drop-shadow(0 0 14px rgba(255,226,140,.54)) drop-shadow(0 10px 14px rgba(0,0,0,.52));
}

.deceivers-truth-win-banner {
  width: min(760px, 100%);
  margin: 0 auto 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,226,150,.62);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.24), transparent 72%),
    linear-gradient(180deg, rgba(22,14,12,.96), rgba(7,4,5,.94));
  text-align: center;
  box-shadow: 0 0 28px rgba(214,168,79,.18), 0 12px 26px rgba(0,0,0,.5);
  animation: deceiversTruthVictoryPulse 1.15s ease-in-out infinite;
}

.truth-win-banner-kicker {
  display: block;
  color: #d6a84f;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .2em;
  margin-bottom: 4px;
}

.deceivers-truth-win-banner strong {
  color: #fff0c3;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  letter-spacing: .04em;
}

.deceivers-truth-raven-line.truth-found-line {
  border-color: rgba(255,226,150,.58);
  box-shadow: 0 0 22px rgba(214,168,79,.16), inset 0 0 20px rgba(214,168,79,.08);
}

.deceivers-truth-status-card.truth-round-won {
  border-color: rgba(255,226,150,.7);
  box-shadow: 0 0 28px rgba(214,168,79,.18), inset 0 0 18px rgba(214,168,79,.08);
}

.deceivers-truth-round-number.throb,
.truth-next-round-btn {
  animation: deceiversTruthVictoryPulse 1.15s ease-in-out infinite;
}

.truth-next-round-btn {
  border-color: rgba(255,226,150,.8) !important;
  box-shadow: 0 0 24px rgba(214,168,79,.22), 0 10px 18px rgba(0,0,0,.38) !important;
}

@keyframes deceiversTruthVictoryPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.13);
  }
}

@media (max-width: 760px) {
  .deceivers-truth-card-back-emblem {
    font-size: 1.15rem;
    margin-bottom: 6px;
  }

  .deceivers-truth-card-back-title {
    max-width: 90%;
    font-size: .5rem;
    letter-spacing: .11em;
  }

  .deceivers-truth-win-banner {
    padding: 10px 10px;
    margin-bottom: 10px;
  }
}



/* ================= V1.2.24.6 CAREFUL MOBILE + CARD FIX PASS ================= */

/* Doctor Death buttons: after the scene breathes, make the choices impossible to miss. */
.death-cinematic-overlay.death-actions-ready .death-afterlife-action-dock {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.death-cinematic-overlay.death-actions-ready .death-afterlife-action-dock button,
.death-cinematic-overlay.death-actions-ready #enterLastWordsBtn,
.death-cinematic-overlay.death-actions-ready #openDeceiversTruthFromDeathBtn {
  background:
    radial-gradient(circle at top, rgba(255, 232, 156, .34), transparent 62%),
    linear-gradient(180deg, #d6a84f, #8a561c 62%, #3b1d07) !important;
  color: #160b03 !important;
  border: 1px solid rgba(255, 235, 170, .92) !important;
  box-shadow:
    0 0 0 0 rgba(214,168,79,.55),
    0 0 28px rgba(214,168,79,.34),
    0 10px 18px rgba(0,0,0,.52) !important;
  text-shadow: 0 1px 0 rgba(255,236,180,.36) !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  animation: deathActionGoldThrob 1.15s ease-in-out infinite !important;
}

.death-cinematic-overlay.death-actions-ready #openDeceiversTruthFromDeathBtn {
  background:
    radial-gradient(circle at top, rgba(255, 232, 156, .42), transparent 66%),
    linear-gradient(180deg, #f0c15c, #9b6222 62%, #3a1807) !important;
}

@keyframes deathActionGoldThrob {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.045);
    filter: brightness(1.18);
  }
}

/* The Table of Truth cards: NO 3D mirroring. A facedown card only shows the shared card back. */
.deceivers-truth-card,
.deceivers-truth-card-inner,
.deceivers-truth-card-front,
.deceivers-truth-card-back {
  transform: none !important;
  backface-visibility: visible !important;
}

.deceivers-truth-card-inner {
  transition: none !important;
}

.deceivers-truth-card.face-down .deceivers-truth-card-inner {
  transform: none !important;
}

.deceivers-truth-card.face-down .deceivers-truth-card-front {
  display: none !important;
}

.deceivers-truth-card.face-up .deceivers-truth-card-back {
  display: none !important;
}

.deceivers-truth-card-front,
.deceivers-truth-card-back {
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
}

.deceivers-truth-card-back {
  background:
    radial-gradient(circle at center, rgba(214,168,79,.20), transparent 52%),
    linear-gradient(135deg, #12080b, #030203 54%, #1d0f13) !important;
}

.deceivers-truth-card-back-title {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Prevent TEMPTATION from falling off the mobile card. */
.deceivers-truth-card-front strong {
  max-width: 100% !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-height: 1.04 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .deceivers-truth-card-row {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
    gap: 8px !important;
  }

  .deceivers-truth-card {
    width: min(100%, 112px) !important;
  }

  .deceivers-truth-card-front {
    padding: 8px !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.48rem, 2.65vw, .72rem) !important;
    letter-spacing: .035em !important;
  }
}

@media (max-width: 390px) {
  .deceivers-truth-card-row {
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)) !important;
  }

  .deceivers-truth-card {
    width: min(100%, 98px) !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.44rem, 2.7vw, .64rem) !important;
    letter-spacing: .02em !important;
  }
}

/* Make a won round feel like a won round. */
.deceivers-truth-game.truth-round-won .deceivers-truth-status-card,
.deceivers-truth-game.truth-round-won .deceivers-truth-raven-line,
.deceivers-truth-game.truth-round-won .deceivers-truth-win-banner {
  border-color: rgba(255, 235, 166, .95) !important;
  box-shadow:
    0 0 34px rgba(214,168,79,.34),
    0 12px 26px rgba(0,0,0,.50),
    inset 0 0 24px rgba(214,168,79,.15) !important;
}

.deceivers-truth-game.truth-round-won .deceivers-truth-win-banner {
  display: block !important;
  background:
    radial-gradient(circle at top, rgba(255, 226, 150, .32), transparent 70%),
    linear-gradient(180deg, rgba(47, 28, 7, .98), rgba(8,4,2,.96)) !important;
  animation: truthVictoryGlowStrong 1s ease-in-out infinite !important;
}

.deceivers-truth-game.truth-round-won .deceivers-truth-round-number.throb {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(214,168,79,.22) !important;
  color: #fff0c3 !important;
  font-style: normal !important;
  animation: truthVictoryGlowStrong 1s ease-in-out infinite !important;
}

.deceivers-truth-game.truth-round-won .truth-next-round-btn,
.deceivers-truth-actions .truth-next-round-btn {
  background:
    radial-gradient(circle at top, rgba(255, 236, 170, .30), transparent 60%),
    linear-gradient(180deg, #d6a84f, #7e4b16 64%, #2a1204) !important;
  color: #140902 !important;
  border: 2px solid rgba(255, 236, 170, .92) !important;
  font-weight: 950 !important;
  box-shadow:
    0 0 38px rgba(214,168,79,.46),
    0 12px 24px rgba(0,0,0,.55) !important;
  animation: truthVictoryGlowStrong 1s ease-in-out infinite !important;
}

.deceivers-truth-card.correct {
  z-index: 5 !important;
  animation: truthCardFoundGlow 1s ease-in-out infinite !important;
}

.deceivers-truth-card.correct .deceivers-truth-card-front {
  border-color: rgba(255, 236, 170, .98) !important;
  box-shadow:
    0 0 46px rgba(214,168,79,.46),
    0 0 18px rgba(255,255,255,.14),
    inset 0 0 28px rgba(214,168,79,.22) !important;
}

@keyframes truthVictoryGlowStrong {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.055);
    filter: brightness(1.22);
  }
}

@keyframes truthCardFoundGlow {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-6px) scale(1.07);
    filter: brightness(1.24);
  }
}

/* Mobile survivor plaque: move it down, away from the Return button and closer to the original plaque area. */
@media (max-width: 760px), (max-height: 760px) {
  .survivor-elimination-plaque {
    top: 70svh !important;
    bottom: auto !important;
    width: min(86vw, 520px) !important;
    min-height: 82px !important;
    max-height: 18svh !important;
    padding: 8px 14px !important;
    z-index: 4 !important;
  }

  .survivor-elimination-plaque h2 {
    font-size: clamp(.88rem, 4.6vw, 1.42rem) !important;
    line-height: 1 !important;
  }

  .survivor-elimination-plaque-lines {
    font-size: clamp(.54rem, 2.7vw, .78rem) !important;
    line-height: 1.04 !important;
    gap: 2px !important;
  }

  .survivor-elimination-btn {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: min(270px, 70vw) !important;
    z-index: 6 !important;
  }

  .survivor-elimination-bottom-line {
    bottom: 58px !important;
    font-size: clamp(.45rem, 2.1vw, .62rem) !important;
  }
}



/* ================= V1.2.24.7 DOCTOR DEATH + PLAYABLE SHUFFLE FIX ================= */

/* Let Doctor Death text breathe first. Then show RED. Then change to GOLD. */
.death-afterlife-action-dock {
  position: relative !important;
  bottom: auto !important;
  z-index: 20 !important;
  margin-top: 18px !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

.death-cinematic-overlay.death-actions-ready .death-afterlife-action-dock {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.death-cinematic-overlay.death-actions-ready .death-afterlife-action-dock button,
.death-cinematic-overlay.death-lastwords-delivered-red .death-afterlife-action-dock button {
  background:
    radial-gradient(circle at top, rgba(255, 85, 85, .26), transparent 62%),
    linear-gradient(180deg, #7c1016, #3d0508 64%, #160102) !important;
  color: #ffe6e6 !important;
  border: 1px solid rgba(255, 126, 126, .86) !important;
  box-shadow:
    0 0 26px rgba(140, 0, 0, .54),
    0 10px 18px rgba(0,0,0,.60) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
  animation: deathActionRedPulse 1.1s ease-in-out infinite !important;
}

.death-cinematic-overlay.death-actions-gold .death-afterlife-action-dock button {
  background:
    radial-gradient(circle at top, rgba(255, 232, 156, .40), transparent 62%),
    linear-gradient(180deg, #d6a84f, #8a561c 62%, #3b1d07) !important;
  color: #160b03 !important;
  border: 1px solid rgba(255, 235, 170, .96) !important;
  box-shadow:
    0 0 0 0 rgba(214,168,79,.55),
    0 0 34px rgba(214,168,79,.42),
    0 10px 18px rgba(0,0,0,.52) !important;
  text-shadow: 0 1px 0 rgba(255,236,180,.42) !important;
  animation: deathActionGoldThrob 1.1s ease-in-out infinite !important;
}

@keyframes deathActionRedPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.035); filter: brightness(1.16); }
}

/* Cards: hard-lock them to real front/back states. No mirrored transparent Truth. */
.deceivers-truth-card,
.deceivers-truth-card-inner,
.deceivers-truth-card-front,
.deceivers-truth-card-back {
  transform: none !important;
  backface-visibility: visible !important;
}

.deceivers-truth-card-inner {
  transition: none !important;
}

.deceivers-truth-card.face-down .deceivers-truth-card-front,
.deceivers-truth-card.face-up .deceivers-truth-card-back {
  display: none !important;
}

.deceivers-truth-card-front,
.deceivers-truth-card-back {
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
}

.deceivers-truth-card {
  will-change: transform;
}

.deceivers-truth-card-front strong {
  max-width: 100% !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  line-height: 1 !important;
  text-align: center !important;
  font-size: clamp(.62rem, .92vw, 1.02rem) !important;
  letter-spacing: .045em !important;
}

@media (max-width: 760px) {
  .deceivers-truth-card-row {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)) !important;
    gap: 8px !important;
  }

  .deceivers-truth-card {
    width: min(100%, 116px) !important;
  }

  .deceivers-truth-card-front {
    padding: 7px !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.44rem, 2.35vw, .62rem) !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
  }

  .death-cinematic-card p,
  .last-words-card p {
    line-height: 1.34 !important;
  }
}

@media (max-width: 390px) {
  .deceivers-truth-card-row {
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important;
  }

  .deceivers-truth-card {
    width: min(100%, 104px) !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.40rem, 2.2vw, .56rem) !important;
    white-space: nowrap !important;
  }
}

/* Make winning unavoidable to notice. */
.deceivers-truth-game.truth-round-won .deceivers-truth-win-banner {
  display: block !important;
  border: 2px solid rgba(255, 235, 166, 1) !important;
  background:
    radial-gradient(circle at top, rgba(255, 226, 150, .45), transparent 70%),
    linear-gradient(180deg, rgba(72, 43, 10, .98), rgba(9,4,2,.97)) !important;
  box-shadow:
    0 0 42px rgba(214,168,79,.48),
    0 12px 26px rgba(0,0,0,.55),
    inset 0 0 24px rgba(214,168,79,.18) !important;
  animation: truthVictoryGlowStrong 850ms ease-in-out infinite !important;
}

.deceivers-truth-game.truth-round-won .truth-next-round-btn,
.deceivers-truth-actions .truth-next-round-btn {
  background:
    radial-gradient(circle at top, rgba(255, 236, 170, .42), transparent 60%),
    linear-gradient(180deg, #f0c15c, #9b6222 64%, #341606) !important;
  color: #130801 !important;
  border: 2px solid rgba(255, 236, 170, 1) !important;
  font-weight: 950 !important;
  box-shadow:
    0 0 44px rgba(214,168,79,.56),
    0 12px 24px rgba(0,0,0,.58) !important;
  animation: truthVictoryGlowStrong 850ms ease-in-out infinite !important;
}

.deceivers-truth-game.truth-round-won .deceivers-truth-round-number.throb {
  display: inline-block !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  background: rgba(214,168,79,.30) !important;
  color: #fff2c6 !important;
  font-style: normal !important;
  animation: truthVictoryGlowStrong 850ms ease-in-out infinite !important;
}

.deceivers-truth-card.correct {
  z-index: 6 !important;
  animation: truthCardFoundGlow 850ms ease-in-out infinite !important;
}

.deceivers-truth-card.correct .deceivers-truth-card-front {
  border: 2px solid rgba(255, 236, 170, 1) !important;
  box-shadow:
    0 0 56px rgba(214,168,79,.62),
    0 0 20px rgba(255,255,255,.18),
    inset 0 0 30px rgba(214,168,79,.25) !important;
}

/* Mobile survivor plaque: lower and compact, clear of Return button. */
@media (max-width: 760px), (max-height: 760px) {
  .survivor-elimination-plaque {
    top: 72svh !important;
    bottom: auto !important;
    width: min(84vw, 500px) !important;
    min-height: 76px !important;
    max-height: 16svh !important;
    padding: 7px 12px !important;
    z-index: 4 !important;
  }

  .survivor-elimination-plaque h2 {
    font-size: clamp(.78rem, 4.1vw, 1.28rem) !important;
    line-height: 1 !important;
  }

  .survivor-elimination-plaque-lines {
    font-size: clamp(.48rem, 2.45vw, .70rem) !important;
    line-height: 1.02 !important;
    gap: 1px !important;
  }

  .survivor-elimination-btn {
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(250px, 68vw) !important;
    z-index: 7 !important;
  }

  .survivor-elimination-bottom-line {
    bottom: 54px !important;
    font-size: clamp(.42rem, 1.9vw, .58rem) !important;
  }
}



/* ================= V1.2.24.8 SLOW TRACKABLE SHUFFLE + MOBILE DEATH FIX ================= */

/* Mobile Doctor Death: zoomed out, centered, and not jammed against the top. */
@media (max-width: 760px) {
  .death-cinematic-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  .personal-death-card {
    width: min(94vw, 560px) !important;
    max-height: 96svh !important;
    margin: auto !important;
    padding: 12px 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 7px !important;
  }

  .personal-death-card .death-image-frame,
  .death-image-frame.death-image-personal {
    min-height: 0 !important;
    height: auto !important;
    max-height: 41svh !important;
    border-radius: 16px !important;
  }

  .personal-death-card .death-cinematic-image,
  .death-image-personal .death-cinematic-image {
    width: 100% !important;
    height: auto !important;
    max-height: 40svh !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .death-cinematic-kicker {
    margin-top: 4px !important;
    font-size: .58rem !important;
    letter-spacing: .16em !important;
  }

  .death-cinematic-card h2 {
    margin: 3px 0 4px !important;
    font-size: clamp(1.05rem, 5.6vw, 1.55rem) !important;
    line-height: 1.03 !important;
  }

  .death-cinematic-card p {
    margin: 4px 0 !important;
    font-size: clamp(.76rem, 3.3vw, .92rem) !important;
    line-height: 1.22 !important;
  }

  .death-cinematic-warning {
    font-size: clamp(.72rem, 3.1vw, .86rem) !important;
  }

  .death-afterlife-action-dock {
    margin-top: 8px !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .death-afterlife-action-dock button {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: .82rem !important;
  }
}

/* Last Words Delivered must visibly start red before turning gold. */
.death-cinematic-overlay.death-lastwords-delivered-red .death-afterlife-action-dock button,
.death-cinematic-overlay.death-lastwords-delivered-red #enterLastWordsBtn,
.death-cinematic-overlay.death-lastwords-delivered-red #openDeceiversTruthFromDeathBtn {
  background:
    radial-gradient(circle at top, rgba(255, 85, 85, .34), transparent 62%),
    linear-gradient(180deg, #8d1018, #470408 66%, #160102) !important;
  color: #ffe9e9 !important;
  border: 2px solid rgba(255, 135, 135, .96) !important;
  box-shadow:
    0 0 34px rgba(160, 0, 0, .66),
    0 10px 18px rgba(0,0,0,.60) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.9) !important;
  animation: deathActionRedPulse 850ms ease-in-out infinite !important;
}

/* Trackable The Table of Truth shuffle: one visible row, slower movement, no wrap hiding movement. */
.deceivers-truth-card-row {
  position: relative !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(10px, 1.8vw, 22px) !important;
  overflow: visible !important;
  min-height: clamp(260px, 42vh, 440px) !important;
}

.deceivers-truth-card.visible-shuffle-moving {
  z-index: 20 !important;
  filter: brightness(1.18) drop-shadow(0 0 18px rgba(214,168,79,.35)) !important;
}

.deceivers-truth-game .deceivers-truth-card.face-down {
  outline: 1px solid rgba(255, 226, 150, .16);
  outline-offset: 3px;
}

.deceivers-truth-game:has(.deceivers-truth-card.visible-shuffle-moving) .deceivers-truth-card:not(.visible-shuffle-moving) {
  filter: brightness(.92);
}

@media (max-width: 760px) {
  .deceivers-truth-game {
    overflow-x: hidden !important;
  }

  .deceivers-truth-card-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 170px !important;
    padding: 6px 0 10px !important;
  }

  .deceivers-truth-card {
    flex: 0 0 auto !important;
    width: clamp(58px, 17.3vw, 78px) !important;
    max-width: 78px !important;
  }

  .deceivers-truth-card-front,
  .deceivers-truth-card-back {
    border-radius: 10px !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.34rem, 1.72vw, .48rem) !important;
    letter-spacing: 0 !important;
    transform: scaleX(.86);
    white-space: nowrap !important;
  }

  .deceivers-truth-card-back-title {
    font-size: .38rem !important;
    letter-spacing: .06em !important;
    line-height: 1.05 !important;
    transform: scaleX(.88);
  }

  .deceivers-truth-card-back-emblem {
    font-size: .92rem !important;
    margin-bottom: 3px !important;
  }
}

@media (max-width: 390px) {
  .deceivers-truth-card-row {
    gap: 4px !important;
  }

  .deceivers-truth-card {
    width: clamp(52px, 16.2vw, 68px) !important;
    max-width: 68px !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.30rem, 1.55vw, .42rem) !important;
    transform: scaleX(.82);
  }
}

/* Survivor plaque: slightly lower, Return button slightly higher. */
@media (max-width: 760px), (max-height: 760px) {
  .survivor-elimination-plaque {
    top: 75svh !important;
    width: min(83vw, 500px) !important;
    min-height: 70px !important;
    max-height: 15svh !important;
    padding: 6px 12px !important;
  }

  .survivor-elimination-plaque h2 {
    font-size: clamp(.72rem, 3.9vw, 1.18rem) !important;
  }

  .survivor-elimination-plaque-lines {
    font-size: clamp(.44rem, 2.25vw, .66rem) !important;
    line-height: 1.01 !important;
  }

  .survivor-elimination-btn {
    bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px)) !important;
    width: min(250px, 66vw) !important;
  }

  .survivor-elimination-bottom-line {
    bottom: 78px !important;
  }
}


/* ================= V1.2.24.9 DRAGGED CARDS + RAVEN PATH FULLSCREEN ================= */

/* The Table of Truth: physical slots around the table. Cards are dragged between slots instead of "teleport-shuffling." */
.deceivers-truth-card-row {
  --dt-card-w: clamp(116px, 13.5vw, 176px);
  --dt-card-h: calc(var(--dt-card-w) * 1.468);
  --dt-card-gap: clamp(10px, 1.8vw, 24px);
  position: relative !important;
  display: block !important;
  width: min(1080px, 100%) !important;
  height: clamp(265px, 42vh, 430px) !important;
  min-height: clamp(265px, 42vh, 430px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  perspective: none !important;
}

.deceivers-truth-card-row .deceivers-truth-card {
  position: absolute !important;
  top: 50% !important;
  left: calc(
    (100% / var(--deceivers-truth-card-count)) * (var(--deceivers-truth-card-slot) + .5)
    - (var(--dt-card-w) / 2)
  ) !important;
  width: var(--dt-card-w) !important;
  height: var(--dt-card-h) !important;
  margin: calc(var(--dt-card-h) / -2) 0 0 0 !important;
  transition: left .16s linear, top .16s linear, filter .16s ease !important;
  will-change: left, transform, filter !important;
}

.deceivers-truth-card.visible-shuffle-moving {
  z-index: 50 !important;
  filter: brightness(1.24) drop-shadow(0 0 24px rgba(214,168,79,.48)) !important;
}

.deceivers-truth-game:has(.deceivers-truth-card.visible-shuffle-moving) .deceivers-truth-card:not(.visible-shuffle-moving) {
  filter: brightness(.86) saturate(.9);
}

@media (max-width: 760px) {
  .deceivers-truth-card-row {
    --dt-card-w: clamp(54px, 16vw, 78px);
    height: clamp(135px, 24vh, 185px) !important;
    min-height: clamp(135px, 24vh, 185px) !important;
  }

  .deceivers-truth-card-row .deceivers-truth-card {
    width: var(--dt-card-w) !important;
    height: var(--dt-card-h) !important;
    max-width: none !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.30rem, 1.55vw, .46rem) !important;
    transform: scaleX(.78);
  }
}

/* Raven's Path: full-screen challenge modal with clearer maze walls. */
#ravenPathPanel:not(.hidden),
.raven-path-panel:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at center, rgba(64,24,12,.50), transparent 58%),
    linear-gradient(180deg, rgba(8,3,5,.98), rgba(0,0,0,.98)) !important;
  overflow-y: auto !important;
  text-align: center !important;
  box-shadow: inset 0 0 90px rgba(0,0,0,.88) !important;
}

#ravenPathPanel:not(.hidden)::before,
.raven-path-panel:not(.hidden)::before {
  content: "🐦‍⬛  RAVEN'S PATH  🛡️";
  display: block;
  margin: 0 auto 10px;
  color: #f0c15c;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(214,168,79,.35), 0 2px 10px rgba(0,0,0,.9);
}

.raven-path-board-shell {
  width: min(92vmin, 720px) !important;
  margin: 10px auto 12px !important;
  padding: 8px !important;
  border-radius: 20px !important;
  border: 2px solid rgba(214,168,79,.72) !important;
  background:
    linear-gradient(180deg, rgba(214,168,79,.13), rgba(0,0,0,.34)),
    rgba(0,0,0,.74) !important;
  box-shadow:
    0 0 42px rgba(214,168,79,.18),
    inset 0 0 36px rgba(0,0,0,.76) !important;
}

.raven-path-canvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: min(72vh, 720px) !important;
  border-radius: 14px !important;
  border: 2px solid rgba(255,226,150,.82) !important;
  background: #030102 !important;
  box-shadow:
    0 0 28px rgba(214,168,79,.22),
    inset 0 0 34px rgba(0,0,0,.82) !important;
  image-rendering: auto !important;
}

.raven-path-control-pad {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: min(330px, 88vw) !important;
  margin: 12px auto !important;
}

.raven-path-control-pad button {
  min-height: 48px !important;
  border: 1px solid rgba(255,226,150,.72) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.24), transparent 70%),
    linear-gradient(180deg, #2a1710, #0b0506) !important;
  color: #f0c15c !important;
  font-size: 1.25rem !important;
  font-weight: 950 !important;
  box-shadow: 0 0 18px rgba(214,168,79,.12) !important;
}

@media (max-width: 760px) {
  #ravenPathPanel:not(.hidden),
  .raven-path-panel:not(.hidden) {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  #ravenPathPanel:not(.hidden)::before,
  .raven-path-panel:not(.hidden)::before {
    font-size: .86rem;
    letter-spacing: .09em;
    margin-bottom: 6px;
  }

  #ravenPathPanel h4 {
    margin: 4px 0 4px !important;
    font-size: 1rem !important;
  }

  #ravenPathPanel .raven-path-subtitle,
  #ravenPathPanel .hint {
    margin: 4px auto !important;
    font-size: .78rem !important;
    line-height: 1.22 !important;
  }

  .raven-path-board-shell {
    width: min(94vw, 70vh) !important;
    margin-top: 6px !important;
    padding: 5px !important;
  }

  .raven-path-canvas {
    max-height: 58vh !important;
  }

  .raven-path-control-pad {
    width: min(270px, 82vw) !important;
    gap: 6px !important;
    margin: 8px auto !important;
  }

  .raven-path-control-pad button {
    min-height: 42px !important;
  }

  #ravenPathPanel .raven-path-standings {
    max-height: 120px !important;
    overflow-y: auto !important;
    margin-top: 8px !important;
  }
}


/* ================= V1.2.24.10 TRUE DRAGGED CARD SYSTEM ================= */

/*
  This replaces the old "reorder and re-render" feel.
  The visual card now physically travels from its current table slot to its next table slot,
  like a cursor being dragged across the table.
*/
.deceivers-truth-card-row {
  --dt-card-w: clamp(116px, 13.5vw, 176px);
  --dt-card-h: calc(var(--dt-card-w) * 1.468);
  position: relative !important;
  display: block !important;
  width: min(1080px, 100%) !important;
  height: clamp(270px, 43vh, 440px) !important;
  min-height: clamp(270px, 43vh, 440px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  perspective: none !important;
}

.deceivers-truth-card-row .deceivers-truth-card {
  position: absolute !important;
  top: 50% !important;
  left: calc(
    (100% / var(--deceivers-truth-card-count)) * (var(--deceivers-truth-card-slot) + .5)
    - (var(--dt-card-w) / 2)
  ) !important;
  width: var(--dt-card-w) !important;
  height: var(--dt-card-h) !important;
  max-width: none !important;
  margin: calc(var(--dt-card-h) / -2) 0 0 0 !important;
  transition: none !important;
  will-change: transform, filter !important;
}

.deceivers-truth-card-being-dragged {
  filter: brightness(1.25) drop-shadow(0 0 24px rgba(214,168,79,.55)) !important;
}

.deceivers-truth-game:has(.deceivers-truth-card-being-dragged) .deceivers-truth-card:not(.deceivers-truth-card-being-dragged) {
  filter: brightness(.82) saturate(.82) !important;
}

.deceivers-truth-card-being-dragged::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,236,170,.95), rgba(214,168,79,.22) 64%, transparent 72%);
  box-shadow: 0 0 18px rgba(214,168,79,.55);
  pointer-events: none;
}

@media (max-width: 760px) {
  .deceivers-truth-card-row {
    --dt-card-w: clamp(54px, 16vw, 78px);
    height: clamp(140px, 24vh, 190px) !important;
    min-height: clamp(140px, 24vh, 190px) !important;
  }

  .deceivers-truth-card-front strong {
    font-size: clamp(.30rem, 1.55vw, .46rem) !important;
    transform: scaleX(.78);
  }
}

/* Raven's Path host escape hatch, matching the FirePants "Choose Another Game" idea. */
.raven-path-choose-different-btn {
  margin-top: 10px !important;
  border-color: rgba(214,168,79,.42) !important;
  color: #f0c15c !important;
}

#ravenPathPanel:not(.hidden) .raven-path-choose-different-btn {
  width: min(320px, 88vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}


/* ================= V1.2.24.11 REAL MONTE PATH REBUILD ================= */
/* Cards are no longer "shuffled" by re-rendering. They stay as physical DOM cards
   and travel along visible curved paths, like a cursor/card being dragged. */

.deceivers-truth-card-row {
  --dt-card-w: clamp(116px, 13.5vw, 176px);
  --dt-card-h: calc(var(--dt-card-w) * 1.468);
  position: relative !important;
  display: block !important;
  width: min(1080px, 100%) !important;
  height: clamp(300px, 46vh, 470px) !important;
  min-height: clamp(300px, 46vh, 470px) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  perspective: none !important;
  isolation: isolate !important;
}

.deceivers-truth-card-row::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 42%;
  transform: translateY(-43%);
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.16);
  background: radial-gradient(ellipse at center, rgba(214,168,79,.07), rgba(0,0,0,.10) 60%, transparent 72%);
  pointer-events: none;
}

.deceivers-truth-card-row .deceivers-truth-card {
  position: absolute !important;
  top: 50% !important;
  left: calc(
    (100% / var(--deceivers-truth-card-count)) * (var(--deceivers-truth-card-slot) + .5)
    - (var(--dt-card-w) / 2)
  ) !important;
  width: var(--dt-card-w) !important;
  height: var(--dt-card-h) !important;
  max-width: none !important;
  margin: calc(var(--dt-card-h) / -2) 0 0 0 !important;
  transition: none !important;
  will-change: transform, filter !important;
  backface-visibility: hidden !important;
  transform-origin: 50% 12% !important;
}

.deceivers-truth-card-row.monte-drag-active .deceivers-truth-card {
  pointer-events: none !important;
}

.deceivers-truth-card-being-dragged,
.monte-card-in-motion {
  filter: brightness(1.28) drop-shadow(0 0 30px rgba(214,168,79,.62)) !important;
}

.deceivers-truth-game:has(.monte-card-in-motion) .deceivers-truth-card:not(.monte-card-in-motion) {
  filter: brightness(.78) saturate(.76) !important;
}

.monte-card-in-motion::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  width: 22px;
  height: 22px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,242,184,.98), rgba(214,168,79,.35) 58%, transparent 74%);
  box-shadow: 0 0 20px rgba(214,168,79,.62), 0 0 38px rgba(214,168,79,.30);
  pointer-events: none;
}

/* The "finger" dot makes it obvious that cards are being dragged, not blinking. */
.monte-card-in-motion::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -28px;
  width: 4px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,236,170,.78), rgba(214,168,79,.08));
  pointer-events: none;
}

@media (max-width: 760px) {
  .deceivers-truth-card-row {
    --dt-card-w: clamp(54px, 16vw, 78px);
    height: clamp(170px, 28vh, 230px) !important;
    min-height: clamp(170px, 28vh, 230px) !important;
  }

  .monte-card-in-motion::after {
    top: -9px;
    width: 14px;
    height: 14px;
  }

  .monte-card-in-motion::before {
    top: -20px;
    height: 14px;
  }
}


/* ================= V1.2.24.12 LAST WORDS CHIP JUDGMENT ================= */

.last-words-overlay {
  align-items: stretch !important;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.last-words-card {
  width: min(96vw, 860px) !important;
  max-height: calc(100dvh - 18px) !important;
  margin: auto !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.last-words-card h2 {
  margin: 6px 0 8px !important;
}

.last-words-intro {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  font-size: .9rem !important;
  line-height: 1.3 !important;
}

.last-words-timer-row {
  margin: 8px auto 10px !important;
  padding: 8px 12px !important;
}

.last-words-mark-board {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid rgba(214,168,79,.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 48%),
    rgba(0,0,0,.34);
  padding: 10px;
  overflow: hidden;
}

.last-words-board-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(214,168,79,.18);
  background: rgba(0,0,0,.34);
  color: rgba(255,255,255,.82);
  font-size: .86rem;
  line-height: 1.22;
  padding: 6px 8px;
}

.last-words-board-status strong {
  color: #f0c15c;
}

.last-words-player-tray {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.last-words-player-chip,
.last-words-placed-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.50);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), transparent 70%),
    linear-gradient(180deg, rgba(40,18,10,.95), rgba(8,5,6,.96));
  color: #fff;
  min-height: 38px;
  padding: 0 13px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 0 14px rgba(214,168,79,.11);
  white-space: nowrap;
}

.last-words-player-chip.selected {
  color: #14090a;
  background:
    linear-gradient(180deg, #f5d787, #b77b25);
  box-shadow:
    0 0 18px rgba(214,168,79,.45),
    0 0 34px rgba(157,23,35,.24);
}

.last-words-player-chip:disabled {
  opacity: .42;
}

.last-words-empty-chip {
  flex: 0 0 auto;
  color: rgba(255,255,255,.55);
  font-style: italic;
  padding: 8px 4px;
}

.last-words-archetype-strip {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 3px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.last-words-archetype-card {
  flex: 0 0 min(74vw, 250px);
  min-height: 172px;
  scroll-snap-align: center;
  border-radius: 18px;
  border: 1px solid rgba(214,168,79,.34);
  background:
    linear-gradient(180deg, rgba(40,15,13,.98), rgba(5,5,8,.98)),
    radial-gradient(circle at top, rgba(214,168,79,.12), transparent 60%);
  color: #fff;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  box-shadow:
    inset 0 0 24px rgba(214,168,79,.06),
    0 0 20px rgba(0,0,0,.42);
}

.last-words-archetype-card.ready-to-place {
  border-color: rgba(240,193,92,.78);
  box-shadow:
    0 0 20px rgba(214,168,79,.24),
    inset 0 0 20px rgba(214,168,79,.08);
}

.last-words-card-title {
  display: block;
  color: #f0c15c;
  font-size: .98rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.last-words-card-subtitle {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .78rem;
  line-height: 1.22;
  min-height: 32px;
}

.last-words-card-chip-zone {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 7px;
  min-height: 52px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.last-words-card-chip-zone em {
  color: rgba(255,255,255,.36);
  font-size: .78rem;
}

.last-words-placed-chip {
  min-height: 32px;
  padding: 0 10px;
  font-size: .78rem;
  cursor: pointer;
}

.last-words-placed-chip::after {
  content: " ×";
  color: rgba(255,255,255,.58);
}

.last-words-placed-chip.landed {
  animation: lastWordsChipLand 420ms ease-out;
}

.last-words-legacy-selects {
  display: none !important;
}

.last-words-hint {
  margin: 8px auto 0 !important;
  font-size: .78rem !important;
  line-height: 1.25 !important;
}

.last-words-card .death-cinematic-btn {
  margin-top: 10px !important;
  min-height: 44px !important;
}

.last-words-mark-board.needs-player {
  animation: lastWordsBoardNudge 500ms ease-in-out;
}

@keyframes lastWordsChipLand {
  0% { transform: translateY(-18px) scale(.72); opacity: .2; }
  70% { transform: translateY(2px) scale(1.06); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes lastWordsBoardNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (max-width: 640px) {
  .last-words-kicker {
    font-size: .58rem !important;
    letter-spacing: .15em !important;
    margin-top: 4px !important;
  }

  .last-words-card h2 {
    font-size: 1.15rem !important;
  }

  .last-words-intro {
    font-size: .76rem !important;
  }

  .last-words-timer-row span {
    font-size: .62rem !important;
  }

  #lastWordsTimerDisplay {
    font-size: 1.05rem !important;
  }

  .last-words-board-status {
    font-size: .74rem;
    min-height: 30px;
  }

  .last-words-player-chip {
    min-height: 34px;
    padding: 0 11px;
    font-size: .78rem;
  }

  .last-words-archetype-card {
    flex-basis: 72vw;
    min-height: 152px;
    padding: 10px;
  }

  .last-words-card-title {
    font-size: .82rem;
  }

  .last-words-card-subtitle {
    font-size: .68rem;
    min-height: 26px;
  }

  .last-words-card-chip-zone {
    min-height: 44px;
  }

  .last-words-placed-chip {
    min-height: 28px;
    font-size: .68rem;
  }
}


/* ================= V1.2.24.13 CLEAN CANVAS MONTE + NO SIDEWAYS LAST WORDS ================= */

/* The Table of Truth is now a single canvas board. No DOM card shuffling, no flashing cards. */
.deceivers-truth-board {
  width: min(1120px, 100%);
  margin: 0 auto 12px;
  border-radius: 24px;
  border: 1px solid rgba(214,168,79,.32);
  background:
    radial-gradient(circle at center, rgba(214,168,79,.10), transparent 54%),
    linear-gradient(180deg, rgba(31,11,12,.95), rgba(0,0,0,.96));
  box-shadow:
    inset 0 0 42px rgba(0,0,0,.74),
    0 0 26px rgba(214,168,79,.12);
  overflow: hidden;
}

#deceiversTruthCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 520px);
  touch-action: manipulation;
}

@media (max-width: 760px) {
  .deceivers-truth-board {
    border-radius: 16px;
  }

  #deceiversTruthCanvas {
    max-height: 44vh;
  }
}

/* Last Words: no sideways scrolling. Use compact grids that fit the phone much better. */
.last-words-player-tray {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  overflow: visible !important;
  padding: 2px !important;
}

.last-words-player-chip,
.last-words-empty-chip {
  min-width: 0 !important;
  width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.last-words-archetype-strip {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 2px 2px 8px !important;
  scroll-snap-type: none !important;
}

.last-words-archetype-card {
  flex: initial !important;
  min-height: 116px !important;
  width: 100% !important;
  scroll-snap-align: none !important;
  padding: 9px !important;
}

.last-words-card-title {
  font-size: .72rem !important;
  line-height: 1.06 !important;
}

.last-words-card-subtitle {
  font-size: .58rem !important;
  min-height: 24px !important;
  line-height: 1.16 !important;
}

.last-words-card-chip-zone {
  min-height: 34px !important;
  gap: 4px !important;
}

.last-words-placed-chip {
  min-height: 24px !important;
  max-width: 100% !important;
  padding: 0 7px !important;
  font-size: .58rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  .last-words-card {
    padding: 10px 8px !important;
  }

  .last-words-mark-board {
    gap: 7px !important;
    padding: 8px !important;
  }

  .last-words-player-tray {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 88px !important;
    overflow-y: auto !important;
  }

  .last-words-archetype-strip {
    max-height: 42vh !important;
  }

  .last-words-archetype-card {
    min-height: 102px !important;
    padding: 7px !important;
  }

  .last-words-card-title {
    font-size: .62rem !important;
  }

  .last-words-card-subtitle {
    display: none !important;
  }
}


/* ================= V1.2.24.14 POLISH: HARDER MONTE + LAST WORDS RULE FIX ================= */

.deceivers-truth-actions-top {
  margin: 10px auto 12px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(214,168,79,.22) !important;
  background: rgba(0,0,0,.24) !important;
}

.deceivers-truth-actions-top #startDeceiversTruthRoundBtn {
  border-color: rgba(240,193,92,.78) !important;
  box-shadow: 0 0 20px rgba(214,168,79,.16) !important;
}

.last-words-archetype-card.has-mark {
  border-color: rgba(240,193,92,.62) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), transparent 58%),
    linear-gradient(180deg, rgba(46,18,14,.98), rgba(5,5,8,.98)) !important;
}

.last-words-archetype-card.has-mark.ready-to-place {
  box-shadow: none !important;
}

.last-words-archetype-card.has-mark .last-words-card-chip-zone em {
  display: none !important;
}


/* ================= V1.2.24.15 EASY VISUAL FIXES ================= */

/* Shield awarded screen: keep the bottom Return button fully visible on phones. */
.shield-awarded-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
}

.shield-awarded-card {
  max-height: calc(100dvh - 28px) !important;
  width: min(94vw, 680px) !important;
  overflow-y: auto !important;
  padding: clamp(14px, 2.2vh, 28px) clamp(14px, 4vw, 30px) !important;
  box-sizing: border-box !important;
}

.shield-awarded-card button,
#closeShieldAwardedOverlayBtn {
  position: sticky !important;
  bottom: 0 !important;
  margin-top: 12px !important;
  width: min(320px, 88vw) !important;
  min-height: 46px !important;
  z-index: 3 !important;
}

@media (max-width: 650px), (max-height: 760px) {
  .shield-awarded-icon-wrap {
    width: min(138px, 38vw) !important;
    height: min(138px, 38vw) !important;
    margin: 4px auto 8px !important;
  }

  .shield-awarded-icon-image {
    width: min(124px, 34vw) !important;
    height: min(124px, 34vw) !important;
  }

  .shield-awarded-card h2 {
    font-size: clamp(1.1rem, 6vw, 1.65rem) !important;
    margin: 5px 0 !important;
  }

  .shield-awarded-card h3 {
    font-size: clamp(.9rem, 4.5vw, 1.18rem) !important;
    margin: 5px 0 !important;
  }

  .shield-awarded-text,
  .shield-awarded-raven-line {
    font-size: .78rem !important;
    line-height: 1.25 !important;
    margin: 6px auto !important;
  }
}

/* The Table of Truth canvas: center the moving cards/Raven marks more cleanly. */
.deceivers-truth-board {
  display: grid !important;
  place-items: center !important;
}

#deceiversTruthCanvas {
  margin: 0 auto !important;
}


/* ================= V1.2.24.16 MAIN SCREEN CLEANUP + REMOTE CHALLENGE FULLSCREEN ================= */

/* Host command now lives inside The Raven's Clock instead of creating a separate box. */
.raven-clock-panel {
  pointer-events: auto !important;
  margin-bottom: 18px !important;
}

.raven-clock-panel .host-command-banner {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  width: auto !important;
  margin: 16px auto 0 !important;
  padding: 12px 12px !important;
  border-width: 1px !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), rgba(0,0,0,.46)),
    linear-gradient(180deg, rgba(55,20,12,.76), rgba(0,0,0,.64)) !important;
  box-shadow:
    0 0 22px rgba(214,168,79,.18),
    inset 0 0 18px rgba(214,168,79,.08) !important;
}

.raven-clock-panel .host-command-banner-label {
  font-size: .64rem !important;
  letter-spacing: .16em !important;
  margin-bottom: 5px !important;
}

.raven-clock-panel .host-command-banner-text {
  font-size: .82rem !important;
  line-height: 1.25 !important;
  margin-bottom: 7px !important;
}

.raven-clock-panel .host-command-jump-btn {
  min-width: 0 !important;
  width: min(300px, 86vw) !important;
  padding: 10px 12px !important;
  font-size: .78rem !important;
}

/* Secret Messages are now encouraged but tucked behind a button above The Table. */
.secret-messages-dock {
  margin: 12px auto 10px !important;
  width: min(520px, 100%) !important;
  display: flex;
  justify-content: center;
}

.secret-message-toggle-btn {
  position: relative;
  width: min(420px, 94vw) !important;
  min-height: 50px;
  border: 1px solid rgba(255,226,150,.54) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.16), transparent 62%),
    linear-gradient(180deg, #c82636, #711018) !important;
  color: #fff !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  box-shadow:
    0 0 18px rgba(157,23,35,.42),
    0 0 30px rgba(214,168,79,.10) !important;
  overflow: visible !important;
  animation: secretMessageOccasionalGoldPulse 7.5s ease-in-out infinite;
}

.secret-message-toggle-btn::before {
  content: "✉ ";
  color: #f0c15c;
}

.secret-message-toggle-btn.secret-message-toggle-open {
  background:
    radial-gradient(circle at top, rgba(214,168,79,.28), transparent 66%),
    linear-gradient(180deg, #9b1723, #33080c) !important;
  box-shadow:
    0 0 22px rgba(214,168,79,.28),
    0 0 34px rgba(157,23,35,.24) !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread,
.secret-message-toggle-btn.secret-message-arrival-throb {
  animation: secretMessageUrgentGoldPulse 1.35s ease-in-out infinite !important;
}

.secret-message-toggle-btn .secret-unread-count {
  position: absolute;
  right: -6px;
  top: -9px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #f0c15c;
  color: #170608;
  font-size: .78rem;
  font-weight: 950;
  border: 2px solid rgba(20,5,8,.95);
  box-shadow: 0 0 18px rgba(214,168,79,.54);
}

.secret-message-drawer {
  margin: 8px auto 12px !important;
  width: min(720px, 100%) !important;
  animation: secretDrawerOpen 260ms ease-out;
}

.secret-message-drawer.hidden {
  display: none !important;
}

@keyframes secretDrawerOpen {
  from {
    transform: translateY(-10px) scale(.985);
    opacity: .35;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes secretMessageOccasionalGoldPulse {
  0%, 78%, 100% {
    box-shadow:
      0 0 18px rgba(157,23,35,.42),
      0 0 30px rgba(214,168,79,.10);
    filter: brightness(1);
  }
  84% {
    box-shadow:
      0 0 28px rgba(214,168,79,.48),
      0 0 42px rgba(157,23,35,.24);
    filter: brightness(1.12);
  }
  90% {
    box-shadow:
      0 0 18px rgba(157,23,35,.42),
      0 0 30px rgba(214,168,79,.10);
    filter: brightness(1);
  }
}

@keyframes secretMessageUrgentGoldPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 18px rgba(157,23,35,.48),
      0 0 24px rgba(214,168,79,.22);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 0 30px rgba(214,168,79,.72),
      0 0 48px rgba(157,23,35,.36);
  }
}

/* Full-screen treatment for every remote/auto-scored game, matching FirePants/Raven's Path direction. */
.raven-quiz-panel:not(.hidden),
.raven-memory-panel:not(.hidden),
.raven-special-challenge-panel:not(.hidden),
.raven-cipher-panel:not(.hidden),
.raven-lock-panel:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  margin: 0 !important;
  padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.14), transparent 46%),
    linear-gradient(180deg, rgba(10,4,6,.99), rgba(0,0,0,.99)) !important;
  box-shadow: inset 0 0 90px rgba(0,0,0,.88) !important;
  overflow-y: auto !important;
  text-align: center !important;
}

.raven-quiz-panel:not(.hidden)::before,
.raven-memory-panel:not(.hidden)::before,
.raven-special-challenge-panel:not(.hidden)::before,
.raven-cipher-panel:not(.hidden)::before,
.raven-lock-panel:not(.hidden)::before {
  content: "🐦‍⬛  THE RAVEN'S CHALLENGE  🛡️";
  display: block;
  margin: 0 auto 10px;
  color: #f0c15c;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 18px rgba(214,168,79,.35), 0 2px 10px rgba(0,0,0,.9);
}

/* Make challenge content feel intentionally modal instead of like old inline cards. */
.raven-quiz-panel:not(.hidden) > *,
.raven-memory-panel:not(.hidden) > *,
.raven-special-challenge-panel:not(.hidden) > *,
.raven-cipher-panel:not(.hidden) > *,
.raven-lock-panel:not(.hidden) > * {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.raven-quiz-standings,
.raven-memory-standings,
.raven-special-standings {
  max-height: 32vh;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .secret-message-toggle-btn {
    min-height: 46px;
    font-size: .78rem !important;
    letter-spacing: .06em !important;
  }

  .secret-message-form {
    display: grid;
    gap: 6px;
  }

  .secret-message-form textarea {
    min-height: 70px;
  }

  .raven-quiz-panel:not(.hidden),
  .raven-memory-panel:not(.hidden),
  .raven-special-challenge-panel:not(.hidden),
  .raven-cipher-panel:not(.hidden),
  .raven-lock-panel:not(.hidden) {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
  }

  .raven-quiz-panel:not(.hidden)::before,
  .raven-memory-panel:not(.hidden)::before,
  .raven-special-challenge-panel:not(.hidden)::before,
  .raven-cipher-panel:not(.hidden)::before,
  .raven-lock-panel:not(.hidden)::before {
    font-size: .78rem;
    letter-spacing: .08em;
  }
}


/* ================= V1.2.24.17 HOST COMMAND BOX CORRECTION ================= */
/* Host command is back under the clock, not inside the clock.
   The discussion phase-control command now lives neatly inside that host box. */

.raven-clock-panel {
  margin-bottom: 12px !important;
}

#hostCommandBanner.host-command-banner {
  position: sticky !important;
  top: 10px !important;
  z-index: 210 !important;
  width: min(640px, 94vw) !important;
  margin: 10px auto 18px !important;
  padding: 14px 14px 16px !important;
  border: 2px solid rgba(214,168,79,.72) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.22), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(55,20,12,.96), rgba(0,0,0,.94)) !important;
  box-shadow:
    0 0 38px rgba(214,168,79,.24),
    0 0 80px rgba(157,23,35,.14),
    inset 0 0 24px rgba(214,168,79,.10) !important;
  text-align: center !important;
  animation: hostCommandBannerGlow 3.2s ease-in-out infinite !important;
}

#hostCommandBanner .host-command-banner-label {
  color: #d6a84f !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
  margin-bottom: 7px !important;
}

#hostCommandBanner .host-command-banner-text {
  color: #efe8df !important;
  font-size: .92rem !important;
  line-height: 1.35 !important;
  margin: 0 auto 10px !important;
  max-width: 560px !important;
}

.host-command-phase-control {
  margin: 10px auto 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(255,226,150,.28) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.12), transparent 65%),
    rgba(0,0,0,.34) !important;
  box-shadow: inset 0 0 18px rgba(214,168,79,.06) !important;
}

.host-command-phase-control h3 {
  margin: 0 0 6px !important;
  color: #f0c15c !important;
  font-size: .88rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.host-command-phase-control .hint {
  margin: 0 auto 9px !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
}

.host-command-phase-control #endDiscussionBtn {
  width: min(360px, 88vw) !important;
  margin: 6px auto 0 !important;
  border-color: rgba(255,226,150,.58) !important;
  background:
    linear-gradient(180deg, #c82636, #7d111c) !important;
  box-shadow:
    0 0 22px rgba(157,23,35,.35),
    0 0 34px rgba(214,168,79,.12) !important;
}

#hostCommandBanner #hostCommandJumpBtn.hidden {
  display: none !important;
}

#hostCommandBanner #hostCommandJumpBtn:not(.hidden) {
  width: min(330px, 86vw) !important;
  margin: 8px auto 0 !important;
}

@media (max-width: 650px) {
  #hostCommandBanner.host-command-banner {
    padding: 12px 10px 13px !important;
    margin-top: 8px !important;
  }

  .host-command-phase-control {
    padding: 10px !important;
  }

  .host-command-phase-control .hint {
    font-size: .75rem !important;
  }
}


/* ================= V1.2.24.18 REPUTATION LABEL + LAST WORDS 3-COLUMN BOARD ================= */

/* RP'$ was cute, but Reputation is clearer and feels like something players are protecting. */
#rpPotDisplay::after {
  content: " Reputation";
  display: block;
  margin-top: 2px;
  color: rgba(240,193,92,.72);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Last Words: two mask columns with living player names centered between them. */
.last-words-card {
  width: min(97vw, 980px) !important;
}

.last-words-mark-board {
  overflow: hidden !important;
}

.last-words-judgment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .78fr) minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  align-items: stretch;
}

.last-words-archetype-column {
  display: grid;
  grid-template-rows: repeat(4, minmax(68px, 1fr));
  gap: 7px;
  min-width: 0;
}

.last-words-player-column {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(214,168,79,.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.13), transparent 68%),
    rgba(0,0,0,.30);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.last-words-player-column-title {
  color: #f0c15c;
  font-size: .66rem;
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
}

.last-words-player-column .last-words-player-tray {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: min(42vh, 380px) !important;
  padding: 0 2px 3px !important;
}

.last-words-player-column .last-words-player-chip,
.last-words-player-column .last-words-empty-chip {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  font-size: .74rem !important;
  border-radius: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.last-words-archetype-column .last-words-archetype-card {
  width: 100% !important;
  min-height: 68px !important;
  padding: 7px !important;
  border-radius: 13px !important;
}

.last-words-archetype-column .last-words-card-title {
  font-size: .64rem !important;
  line-height: 1.05 !important;
  letter-spacing: .04em !important;
}

.last-words-archetype-column .last-words-card-subtitle {
  display: none !important;
}

.last-words-archetype-column .last-words-card-chip-zone {
  min-height: 24px !important;
  padding-top: 4px !important;
  margin-top: auto !important;
  gap: 3px !important;
}

.last-words-archetype-column .last-words-card-chip-zone em {
  font-size: .56rem !important;
}

.last-words-archetype-column .last-words-placed-chip {
  width: 100% !important;
  min-height: 22px !important;
  padding: 0 5px !important;
  font-size: .56rem !important;
  justify-content: center !important;
  border-radius: 999px !important;
}

#lastWordsArchetypeStrip {
  display: none !important;
}

@media (max-width: 640px) {
  .last-words-card {
    width: 98vw !important;
    padding: 8px 6px !important;
  }

  .last-words-intro {
    font-size: .70rem !important;
    margin-bottom: 4px !important;
  }

  .last-words-timer-row {
    margin: 5px auto 7px !important;
    padding: 6px 9px !important;
  }

  .last-words-board-status {
    font-size: .66rem !important;
    min-height: 26px !important;
    padding: 5px 6px !important;
  }

  .last-words-judgment-grid {
    grid-template-columns: minmax(0, 1fr) minmax(84px, .70fr) minmax(0, 1fr);
    gap: 5px;
  }

  .last-words-archetype-column {
    gap: 5px;
    grid-template-rows: repeat(4, minmax(56px, 1fr));
  }

  .last-words-archetype-column .last-words-archetype-card {
    min-height: 56px !important;
    padding: 5px !important;
  }

  .last-words-archetype-column .last-words-card-title {
    font-size: .52rem !important;
  }

  .last-words-archetype-column .last-words-card-chip-zone em {
    font-size: .48rem !important;
  }

  .last-words-player-column {
    padding: 5px !important;
    gap: 5px !important;
  }

  .last-words-player-column-title {
    font-size: .52rem !important;
    letter-spacing: .06em !important;
  }

  .last-words-player-column .last-words-player-chip {
    min-height: 30px !important;
    font-size: .64rem !important;
    padding: 0 5px !important;
  }

  .last-words-hint {
    font-size: .62rem !important;
    margin-top: 5px !important;
  }

  .last-words-card .death-cinematic-btn {
    min-height: 39px !important;
    margin-top: 6px !important;
  }
}


/* ================= V1.2.24.19 REPUTATION ECONOMY ================= */

#rpPotDisplay {
  color: #f0c15c !important;
  text-shadow:
    0 0 12px rgba(214,168,79,.36),
    0 0 28px rgba(214,168,79,.12);
}

.reputation-change-feed {
  border-color: rgba(240,193,92,.50) !important;
}


/* V1.2.24.21:
   Challenge Reputation remains active at all player counts because the winner is public knowledge.
   Vote-based Reputation still freezes below six to avoid revealing eliminated roles. */


/* ================= V1.2.24.22 REMOTE CHALLENGE CENTERING + SHIELD CLOSE FIX ================= */

/* Critical: prior CSS forced this overlay to flex even when hidden.
   This makes Return To The Table reliably close it and keeps it from blocking the table. */
.shield-awarded-overlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

.shield-awarded-overlay {
  pointer-events: auto !important;
}

.shield-awarded-card {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#closeShieldAwardedOverlayBtn {
  position: relative !important;
  z-index: 9999999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(240,193,92,.28) !important;
}

/* Center every "new" full-screen remote challenge as an actual stage.
   The previous version made them fullscreen but left several internal sections behaving like old inline panels. */
.raven-quiz-panel:not(.hidden),
.raven-memory-panel:not(.hidden),
.raven-special-challenge-panel:not(.hidden),
.raven-cipher-panel:not(.hidden),
.raven-lock-panel:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Main content width/centering. */
.raven-quiz-panel:not(.hidden) > *,
.raven-memory-panel:not(.hidden) > *,
.raven-special-challenge-panel:not(.hidden) > *,
.raven-cipher-panel:not(.hidden) > *,
.raven-lock-panel:not(.hidden) > * {
  width: min(920px, calc(100vw - 28px)) !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Center the pre-game instruction blocks and standings. */
.raven-quiz-subtitle,
.raven-memory-subtitle,
.raven-special-subtitle,
.raven-lock-instructions,
.raven-quiz-standings,
.raven-memory-standings,
.raven-special-standings {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Center game-specific layouts that were still acting like old inline content. */
.raven-quiz-question,
.raven-quiz-answer-list,
.raven-memory-grid,
.raven-cipher-items,
.raven-lock-puzzle-list,
.raven-lock-puzzle,
.raven-special-standing-row,
.raven-memory-standing-row,
.raven-quiz-standing-row {
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Keep actual answer text readable; centered container, but answer labels can still read naturally. */
.raven-quiz-answer-list,
.raven-cipher-items,
.raven-lock-puzzle-list {
  width: min(760px, 100%) !important;
}

.raven-quiz-answer-list label,
.raven-cipher-items label,
.raven-lock-puzzle label {
  text-align: left !important;
}

/* Memory board should sit in the middle instead of hugging one side. */
.raven-memory-grid {
  justify-content: center !important;
  align-content: center !important;
  place-content: center !important;
}

/* Mobile safe centering. */
@media (max-width: 760px) {
  .raven-quiz-panel:not(.hidden) > *,
  .raven-memory-panel:not(.hidden) > *,
  .raven-special-challenge-panel:not(.hidden) > *,
  .raven-cipher-panel:not(.hidden) > *,
  .raven-lock-panel:not(.hidden) > * {
    width: min(100%, calc(100vw - 14px)) !important;
  }

  .raven-quiz-panel:not(.hidden),
  .raven-memory-panel:not(.hidden),
  .raven-special-challenge-panel:not(.hidden),
  .raven-cipher-panel:not(.hidden),
  .raven-lock-panel:not(.hidden) {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}


/* ================= V1.2.24.23 RAVEN SPEAKS + ROLE REMINDER MOVE + MAIL ALARM ================= */

/* Raven side box now holds utility buttons only. */
.raven-box {
  padding: 12px !important;
}

.raven-box .see-rules-btn,
.raven-box .raven-role-reminder-btn,
.raven-box .study-masks-btn {
  width: 100% !important;
  margin: 8px 0 !important;
}

/* The Raven Speaks sits above the table and is intentionally shorter. */
.raven-speaks-panel {
  margin: 0 auto 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(214,168,79,.26);
  border-left: 4px solid rgba(214,168,79,.58);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), transparent 65%),
    rgba(0,0,0,.28);
  text-align: left;
}

.raven-speaks-panel h3 {
  margin: 0 0 6px !important;
  color: #d6a84f;
  font-size: .92rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}

.raven-speaks-feed,
.raven-feed-list {
  max-height: 108px !important;
}

.raven-speaks-feed {
  margin-top: 0 !important;
  overflow-y: auto !important;
  font-size: .76rem !important;
}

.raven-speaks-feed .raven-feed-item,
.raven-feed-item {
  padding: 6px 8px !important;
  margin-bottom: 5px !important;
  line-height: 1.22 !important;
}

/* Mail waiting alarm: distracting on purpose. */
.secret-messages-dock.secret-mail-waiting {
  animation: secretMailboxDockShake 1.25s ease-in-out infinite !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread,
.secret-message-toggle-btn.secret-message-arrival-throb {
  color: #1a0507 !important;
  border-color: rgba(255,255,255,.96) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.98), rgba(240,193,92,.80) 44%, rgba(157,23,35,.92) 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
  animation: secretMailWhiteAlarm 0.78s ease-in-out infinite !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread::before,
.secret-message-toggle-btn.secret-message-arrival-throb::before {
  content: "✉ ";
  color: #fff !important;
  text-shadow:
    0 0 8px rgba(255,255,255,1),
    0 0 18px rgba(255,255,255,.88),
    0 0 34px rgba(240,193,92,.78) !important;
}

.secret-message-drawer.secret-mail-waiting,
.secret-messages-panel.secret-mail-waiting {
  border-color: rgba(255,255,255,.86) !important;
  box-shadow:
    0 0 18px rgba(255,255,255,.55),
    0 0 42px rgba(240,193,92,.36),
    inset 0 0 26px rgba(255,255,255,.08) !important;
  animation: secretMailboxPanelPulse 1.05s ease-in-out infinite !important;
}

.secret-message-drawer.secret-mail-waiting .secret-messages-header h3::after {
  content: "  • MAIL WAITING";
  color: #fff;
  font-size: .72em;
  text-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 18px rgba(240,193,92,.78);
}

@keyframes secretMailWhiteAlarm {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 16px rgba(255,255,255,.52),
      0 0 26px rgba(240,193,92,.38),
      0 0 44px rgba(157,23,35,.34);
    filter: brightness(1.02);
  }
  50% {
    transform: scale(1.055);
    box-shadow:
      0 0 28px rgba(255,255,255,.95),
      0 0 52px rgba(240,193,92,.70),
      0 0 76px rgba(157,23,35,.46);
    filter: brightness(1.32);
  }
}

@keyframes secretMailboxPanelPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@keyframes secretMailboxDockShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-2px); }
  30% { transform: translateX(2px); }
  45% { transform: translateX(-1px); }
  60% { transform: translateX(1px); }
}

.room-table {
  margin-bottom: 10px !important;
}

.table-of-deception-panel {
  margin-top: 12px !important;
}

@media (max-width: 800px) {
  .raven-speaks-panel {
    margin-top: 6px !important;
  }

  .raven-speaks-feed,
  .raven-feed-list {
    max-height: 86px !important;
  }

  .raven-side-panel {
    position: static !important;
  }
}


/* ================= V1.2.24.24 SECRET MESSAGE REDESIGN + BUTTON COLOR LANGUAGE ================= */

/* Button color language:
   emerald = safe/help/reference
   blue/silver = information/mailbox
   red = secret/danger/private
   gold = lore/character/world */
.see-rules-btn,
.raven-role-reminder-btn,
#closeShieldAwardedOverlayBtn,
.return-to-table-btn {
  border-color: rgba(83, 230, 165, .68) !important;
  color: #f4fff8 !important;
  background:
    linear-gradient(180deg, rgba(16,121,83,.96), rgba(5,54,40,.96)) !important;
  box-shadow:
    0 0 18px rgba(83,230,165,.22),
    inset 0 0 14px rgba(255,255,255,.06) !important;
}

.raven-role-reminder-btn {
  border-color: rgba(154,210,255,.64) !important;
  background:
    linear-gradient(180deg, rgba(38,83,121,.96), rgba(10,28,54,.96)) !important;
  box-shadow:
    0 0 18px rgba(154,210,255,.20),
    inset 0 0 14px rgba(255,255,255,.06) !important;
}

.study-masks-btn {
  border-color: rgba(214,168,79,.72) !important;
  color: #fff5d7 !important;
  background:
    linear-gradient(180deg, rgba(132,88,24,.98), rgba(58,33,10,.98)) !important;
  box-shadow:
    0 0 18px rgba(214,168,79,.22),
    inset 0 0 14px rgba(255,255,255,.05) !important;
}

.secret-message-action-bar {
  margin: 10px auto 8px !important;
  padding: 8px !important;
  border: 1px solid rgba(214,168,79,.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.09), transparent 70%),
    rgba(0,0,0,.24);
}

.secret-message-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.secret-message-compose-btn,
.secret-message-toggle-btn {
  min-height: 42px !important;
  width: 100% !important;
  margin: 0 !important;
  border-radius: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

.secret-message-compose-btn {
  color: #ffecef !important;
  border-color: rgba(255,125,140,.62) !important;
  background:
    linear-gradient(180deg, rgba(157,23,35,.98), rgba(74,8,16,.98)) !important;
  box-shadow:
    0 0 18px rgba(157,23,35,.26),
    inset 0 0 14px rgba(255,255,255,.05) !important;
}

.secret-message-compose-btn.secret-message-pick-active {
  color: #170505 !important;
  border-color: rgba(255,255,255,.92) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.95), rgba(240,193,92,.78), rgba(157,23,35,.95)) !important;
  animation: secretMailWhiteAlarm .78s ease-in-out infinite !important;
}

.secret-message-toggle-btn {
  color: #edf7ff !important;
  border-color: rgba(154,210,255,.64) !important;
  background:
    linear-gradient(180deg, rgba(38,83,121,.96), rgba(9,24,49,.98)) !important;
  box-shadow:
    0 0 18px rgba(154,210,255,.20),
    inset 0 0 14px rgba(255,255,255,.05) !important;
}

.secret-message-pick-prompt {
  margin-top: 7px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 12px;
  color: #fff;
  background: rgba(157,23,35,.28);
  text-align: center;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: secretMailboxPanelPulse 1.05s ease-in-out infinite !important;
}

/* Make the big Secret Messages panel a floating modal so it never pushes public chat down. */
.secret-message-modal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999997 !important;
  width: min(92vw, 520px) !important;
  max-height: min(82dvh, 680px) !important;
  overflow-y: auto !important;
  margin: 0 !important;
  text-align: left !important;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,.56),
    0 0 42px rgba(214,168,79,.24),
    0 0 80px rgba(0,0,0,.70) !important;
}

.secret-messages-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.secret-message-close-btn {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(157,23,35,.84) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

/* Compose mode only shows send form. Mailbox mode only shows received mail. */
.secret-message-modal.secret-compose-mode .secret-message-divider,
.secret-message-modal.secret-compose-mode .secret-inbox-title,
.secret-message-modal.secret-compose-mode .secret-messages-inbox {
  display: none !important;
}

.secret-message-modal.secret-mailbox-mode .hint,
.secret-message-modal.secret-mailbox-mode .secret-message-form,
.secret-message-modal.secret-mailbox-mode #secretMessageNotice {
  display: none !important;
}

.secret-message-modal.secret-mailbox-mode .secret-message-divider {
  display: none !important;
}

.secret-message-form select {
  pointer-events: none !important;
  opacity: .78 !important;
  background: rgba(0,0,0,.50) !important;
}

.secret-message-form label[for="secretRecipientSelect"]::after {
  content: " — chosen from the table";
  color: rgba(214,168,79,.78);
  font-size: .78em;
}

.room-table.secret-recipient-pick-mode {
  box-shadow:
    0 0 28px rgba(255,255,255,.26),
    0 0 46px rgba(240,193,92,.24),
    inset 0 0 36px rgba(157,23,35,.18) !important;
}

.room-player-list.secret-recipient-pick-mode .room-player-seat {
  cursor: pointer !important;
  animation: secretRecipientSeatPulse 1.1s ease-in-out infinite !important;
}

.room-player-list.secret-recipient-pick-mode .room-player-seat:hover,
.room-player-list.secret-recipient-pick-mode .room-player-seat:focus {
  transform: translate(-50%, -50%) scale(1.08) !important;
  z-index: 20 !important;
  border-color: rgba(255,255,255,.82) !important;
}

.room-player-seat {
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  cursor: default;
}

@keyframes secretRecipientSeatPulse {
  0%, 100% {
    border-color: rgba(255,255,255,.28);
    box-shadow: 0 0 8px rgba(255,255,255,.10);
  }
  50% {
    border-color: rgba(255,255,255,.78);
    box-shadow:
      0 0 18px rgba(255,255,255,.58),
      0 0 30px rgba(240,193,92,.36);
  }
}

@media (max-width: 760px) {
  .secret-message-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .secret-message-compose-btn,
  .secret-message-toggle-btn {
    min-height: 40px !important;
    font-size: .68rem !important;
    letter-spacing: .04em !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .secret-message-modal {
    width: min(96vw, 520px) !important;
    max-height: 84dvh !important;
  }
}

/* ================= V1.2.24.25 PREMIUM TABLE OF DECEPTION ================= */
/* Layout intentionally unchanged. This patch only upgrades the visual treatment of the table. */

.room-table {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  min-height: 280px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(204, 154, 63, 0.48) !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(83, 24, 30, 0.96) 0%, rgba(46, 16, 22, 0.95) 26%, rgba(28, 12, 16, 0.98) 42%, rgba(14, 7, 10, 0.99) 64%, rgba(5, 3, 4, 0.98) 80%),
    radial-gradient(circle at 50% 48%, rgba(255, 214, 138, 0.06) 0%, rgba(255, 214, 138, 0) 48%),
    repeating-radial-gradient(circle at 50% 49%, rgba(115, 64, 34, 0.10) 0 8px, rgba(57, 27, 18, 0.12) 8px 15px, rgba(0, 0, 0, 0) 15px 28px),
    linear-gradient(135deg, rgba(78, 43, 22, 0.18), rgba(0, 0, 0, 0) 36%, rgba(114, 65, 31, 0.12) 62%, rgba(0, 0, 0, 0) 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 229, 176, 0.08),
    inset 0 0 0 10px rgba(88, 55, 28, 0.26),
    inset 0 0 34px rgba(255, 188, 87, 0.08),
    inset 0 -22px 36px rgba(0, 0, 0, 0.58),
    inset 0 28px 40px rgba(255, 214, 140, 0.04),
    0 16px 34px rgba(0, 0, 0, 0.56),
    0 0 36px rgba(214, 168, 79, 0.12) !important;
}

.room-table::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  border: 1px solid rgba(214, 168, 79, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(255, 233, 187, 0.05),
    inset 0 0 18px rgba(214, 168, 79, 0.06);
  background:
    radial-gradient(circle at 50% 46%, rgba(125, 49, 47, 0.20) 0%, rgba(26, 10, 14, 0.04) 50%, rgba(0, 0, 0, 0) 64%),
    radial-gradient(circle at 28% 24%, rgba(255, 220, 153, 0.08) 0%, rgba(255, 220, 153, 0) 18%),
    radial-gradient(circle at 72% 28%, rgba(255, 220, 153, 0.06) 0%, rgba(255, 220, 153, 0) 16%),
    radial-gradient(circle at 52% 74%, rgba(255, 220, 153, 0.04) 0%, rgba(255, 220, 153, 0) 20%),
    repeating-linear-gradient(24deg, rgba(255, 255, 255, 0.018) 0 2px, rgba(0, 0, 0, 0) 2px 10px),
    repeating-linear-gradient(-28deg, rgba(0, 0, 0, 0.055) 0 3px, rgba(0, 0, 0, 0) 3px 12px);
}

.room-table::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 174, 0.12) 0%, rgba(214, 168, 79, 0.06) 26%, rgba(0, 0, 0, 0) 58%),
    url('/images/ui/raven-shield.png') center/68% no-repeat;
  opacity: 0.30;
  filter: drop-shadow(0 0 12px rgba(214,168,79,.22)) drop-shadow(0 0 22px rgba(214,168,79,.14));
}

.room-player-list {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.table-center-text {
  z-index: 1 !important;
  inset: 44% 0 auto !important;
  text-align: center !important;
  color: #e6c27b !important;
  font-weight: 900 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(255, 235, 199, 0.24),
    0 0 10px rgba(214, 168, 79, 0.18),
    0 3px 12px rgba(0, 0, 0, 0.82) !important;
}

.table-center-text::before,
.table-center-text::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  margin: 0 12px 0 12px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(214,168,79,0), rgba(214,168,79,0.85), rgba(214,168,79,0));
  box-shadow: 0 0 8px rgba(214,168,79,.18);
}

.room-player-seat {
  width: 112px !important;
  min-height: 62px !important;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(216, 177, 97, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(48, 21, 18, 0.96), rgba(18, 7, 10, 0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 227, 180, 0.12),
    inset 0 -8px 16px rgba(0, 0, 0, 0.44),
    0 6px 18px rgba(0, 0, 0, 0.48),
    0 0 12px rgba(214, 168, 79, 0.10) !important;
  backdrop-filter: blur(1.5px);
}

.room-player-seat::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 12px;
  pointer-events: none;
  border: 1px solid rgba(255, 229, 185, 0.05);
  background:
    linear-gradient(180deg, rgba(255, 236, 200, 0.04), rgba(255, 236, 200, 0) 36%),
    radial-gradient(circle at 50% 120%, rgba(214, 168, 79, 0.10), rgba(214, 168, 79, 0) 62%);
}

.room-player-seat::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -6px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 220, 156, 0.22), rgba(255, 220, 156, 0) 72%);
  opacity: 0.9;
}

.room-player-seat:hover,
.room-player-seat:focus-visible {
  border-color: rgba(239, 199, 114, 0.64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 205, 0.16),
    inset 0 -10px 18px rgba(0, 0, 0, 0.52),
    0 10px 22px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(214, 168, 79, 0.20) !important;
}

.room-player-seat .player-identity.compact {
  position: relative;
  z-index: 2;
}

.room-player-seat .player-display-name,
.room-player-seat .host-wing-player-name {
  color: #f5e7c4 !important;
  font-weight: 850 !important;
  letter-spacing: 0.03em !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.8) !important;
}

.room-player-seat .player-status-badges.compact {
  gap: 4px !important;
}

.room-player-seat .player-status-badges.compact .player-status-badge {
  border-color: rgba(214,168,79,.20) !important;
  background: rgba(0,0,0,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.room-player-seat .host-wing-name.compact {
  color: #ffe3a0 !important;
}

.room-player-seat .host-wing {
  filter:
    drop-shadow(0 0 8px rgba(214,168,79,.34))
    drop-shadow(0 2px 6px rgba(0,0,0,.68)) !important;
}

@media (max-width: 900px) {
  .room-table::after {
    width: 110px;
    height: 110px;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 226, 174, 0.11) 0%, rgba(214, 168, 79, 0.05) 26%, rgba(0, 0, 0, 0) 58%),
      url('/images/ui/raven-emblem.png') center/56% no-repeat;
  }

  .table-center-text {
    font-size: 0.90rem !important;
    letter-spacing: 0.18em !important;
  }

  .room-player-seat {
    width: 104px !important;
    min-height: 58px !important;
    padding: 8px 7px !important;
  }
}

@media (max-width: 650px) {
  .room-table {
    min-height: 270px !important;
    box-shadow:
      inset 0 0 0 2px rgba(255, 229, 176, 0.06),
      inset 0 0 0 8px rgba(88, 55, 28, 0.22),
      inset 0 0 28px rgba(255, 188, 87, 0.06),
      inset 0 -18px 30px rgba(0, 0, 0, 0.54),
      0 12px 24px rgba(0, 0, 0, 0.48),
      0 0 24px rgba(214, 168, 79, 0.10) !important;
  }

  .room-table::before {
    inset: 12px;
  }

  .room-table::after {
    width: 92px;
    height: 92px;
    opacity: 0.22;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 226, 174, 0.10) 0%, rgba(214, 168, 79, 0.05) 28%, rgba(0, 0, 0, 0) 60%),
      url('/images/ui/raven-emblem.png') center/54% no-repeat;
  }

  .table-center-text {
    inset: 44.5% 8px auto !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.12em !important;
    line-height: 1.2 !important;
  }

  .table-center-text::before,
  .table-center-text::after {
    width: 18px;
    margin: 0 6px;
  }

  .room-player-seat {
    width: 92px !important;
    min-height: 54px !important;
    padding: 7px 6px !important;
    border-radius: 14px !important;
  }

  .room-player-seat .host-wing-player-name,
  .room-player-seat .player-display-name {
    max-width: 72px !important;
    font-size: .72rem !important;
  }

  .room-player-seat .player-status-badges.compact {
    gap: 2px !important;
  }

  .room-player-seat .player-status-badges.compact .player-status-badge {
    min-height: 16px !important;
    padding: 1px 5px !important;
    font-size: .5rem !important;
  }
}


/* ================= V1.2.24.26 TABLE TEXT + SECRET DOCK PLACEMENT FIX ================= */
/* Secret Messages now sits under The Raven Speaks and above the table in HTML.
   These styles just make that placement breathe correctly without moving anything else. */

.raven-speaks-panel + .secret-message-action-bar {
  margin-top: 10px !important;
  margin-bottom: 12px !important;
}

.secret-message-action-bar + .room-table {
  margin-top: 12px !important;
}

/* Keep the Table of Deception title inside the open center of the table.
   It no longer stretches across the whole table where side player boxes can cover it. */
.room-table .table-center-text {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(48%, 260px) !important;
  max-width: 260px !important;
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 168, 79, 0.20) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.12), rgba(0,0,0,0) 58%),
    rgba(12, 6, 8, 0.42) !important;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.42),
    0 0 18px rgba(214,168,79,.10) !important;
  white-space: normal !important;
  line-height: 1.22 !important;
  overflow-wrap: normal !important;
  z-index: 1 !important;
}

/* The decorative lines were making the title wider than the safe middle area.
   Keep the engraving feel without letting it run under player names. */
.room-table .table-center-text::before,
.room-table .table-center-text::after {
  width: 18px !important;
  margin: 0 7px !important;
}

/* Slightly slimmer premium nameplates reduce crowding while keeping the upgraded table style. */
.room-table .room-player-seat {
  width: 100px !important;
  min-height: 58px !important;
  padding: 8px 7px !important;
}

.room-table .room-player-seat .host-wing-player-name,
.room-table .room-player-seat .player-display-name {
  max-width: 84px !important;
}

/* When choosing a secret-message recipient, the player seats can still glow clearly
   without covering the center wording. */
.room-player-list.secret-recipient-pick-mode .room-player-seat:hover,
.room-player-list.secret-recipient-pick-mode .room-player-seat:focus {
  z-index: 4 !important;
}

@media (max-width: 900px) {
  .room-table .table-center-text {
    width: min(46%, 220px) !important;
    max-width: 220px !important;
    padding: 8px 10px !important;
    font-size: .78rem !important;
    letter-spacing: .12em !important;
  }

  .room-table .room-player-seat {
    width: 92px !important;
    min-height: 54px !important;
    padding: 7px 6px !important;
  }

  .room-table .room-player-seat .host-wing-player-name,
  .room-table .room-player-seat .player-display-name {
    max-width: 76px !important;
  }
}

@media (max-width: 650px) {
  .room-table .table-center-text {
    width: min(44%, 168px) !important;
    max-width: 168px !important;
    padding: 7px 8px !important;
    font-size: .62rem !important;
    letter-spacing: .08em !important;
    line-height: 1.18 !important;
  }

  .room-table .table-center-text::before,
  .room-table .table-center-text::after {
    display: none !important;
  }

  .room-table .room-player-seat {
    width: 82px !important;
    min-height: 50px !important;
    padding: 6px 5px !important;
  }

  .room-table .room-player-seat .host-wing-player-name,
  .room-table .room-player-seat .player-display-name {
    max-width: 66px !important;
    font-size: .68rem !important;
  }
}

@media (max-width: 420px) {
  .room-table .table-center-text {
    width: min(42%, 136px) !important;
    max-width: 136px !important;
    font-size: .55rem !important;
    letter-spacing: .055em !important;
  }

  .room-table .room-player-seat {
    width: 76px !important;
    min-height: 48px !important;
  }

  .room-table .room-player-seat .host-wing-player-name,
  .room-table .room-player-seat .player-display-name {
    max-width: 60px !important;
    font-size: .64rem !important;
  }
}


/* ================= V1.2.24.27 TABLE TITLE CENTER + OPAQUE SECRET CONTROLS FIX ================= */
/* The previous patch accidentally put `inset:auto` after left/top, which let the browser
   ignore the intended center placement. This forces the center title into the table again. */
.room-table .table-center-text {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  width: min(38%, 210px) !important;
  max-width: 210px !important;
  min-width: 128px !important;
  padding: 8px 10px !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.18), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(20, 10, 11, .94), rgba(7, 4, 5, .90)) !important;
  border: 1px solid rgba(214, 168, 79, 0.34) !important;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.70),
    0 0 18px rgba(214,168,79,.18),
    0 6px 18px rgba(0,0,0,.48) !important;
  pointer-events: none !important;
}

/* Keep player seats above the table, but no longer above the title unless they are actively hovered. */
.room-table .room-player-seat {
  z-index: 2 !important;
}

.room-table .room-player-seat:hover,
.room-table .room-player-seat:focus-visible {
  z-index: 4 !important;
}

/* Secret message buttons sit over busy parts of the page, so make the control bar and buttons solid. */
.secret-message-action-bar {
  position: relative !important;
  z-index: 10 !important;
  background:
    linear-gradient(180deg, rgba(12, 7, 9, .98), rgba(5, 3, 5, .98)) !important;
  border-color: rgba(214,168,79,.42) !important;
  box-shadow:
    inset 0 0 16px rgba(0,0,0,.72),
    0 8px 24px rgba(0,0,0,.54),
    0 0 18px rgba(214,168,79,.10) !important;
  backdrop-filter: none !important;
}

.secret-message-compose-btn {
  background:
    linear-gradient(180deg, rgb(157, 23, 35), rgb(74, 8, 16)) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.05),
    0 0 18px rgba(157,23,35,.32),
    0 5px 14px rgba(0,0,0,.54) !important;
}

.secret-message-toggle-btn {
  background:
    linear-gradient(180deg, rgb(38, 83, 121), rgb(9, 24, 49)) !important;
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.05),
    0 0 18px rgba(154,210,255,.24),
    0 5px 14px rgba(0,0,0,.54) !important;
}

.secret-message-pick-prompt {
  background:
    linear-gradient(180deg, rgba(105, 15, 25, .98), rgba(35, 5, 9, .98)) !important;
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.60),
    0 0 12px rgba(255,255,255,.10) !important;
}

/* Floating compose/mailbox modal also needs to be opaque so no table/chat text bleeds through. */
.secret-message-modal,
.secret-messages-panel.secret-message-modal {
  background:
    linear-gradient(180deg, rgba(15, 9, 12, .99), rgba(5, 3, 5, .99)) !important;
  border-color: rgba(214,168,79,.50) !important;
  backdrop-filter: none !important;
}

.secret-message-modal .secret-message-form,
.secret-message-modal .secret-messages-inbox,
.secret-message-modal textarea,
.secret-message-modal select {
  background-color: rgba(0,0,0,.82) !important;
}

/* Mobile/tablet refinements for title center. */
@media (max-width: 900px) {
  .room-table .table-center-text {
    width: min(34%, 178px) !important;
    max-width: 178px !important;
    min-width: 112px !important;
    font-size: .70rem !important;
    letter-spacing: .09em !important;
    padding: 7px 8px !important;
  }
}

@media (max-width: 650px) {
  .room-table .table-center-text {
    width: min(32%, 132px) !important;
    max-width: 132px !important;
    min-width: 92px !important;
    font-size: .54rem !important;
    letter-spacing: .045em !important;
    padding: 6px 7px !important;
  }
}

@media (max-width: 420px) {
  .room-table .table-center-text {
    width: min(31%, 112px) !important;
    max-width: 112px !important;
    min-width: 84px !important;
    font-size: .48rem !important;
    letter-spacing: .035em !important;
    padding: 5px 6px !important;
  }
}


/* ================= V1.2.24.28 THE TABLE OF DECEPTION COLOR LANGUAGE PASS ================= */
/*
  Goal: make adjacent controls stand apart while still feeling like one world.
  Palette:
  - Raven Gold: lore, archetypes, Raven actions
  - Blood Ruby: secret, danger, vote, deception
  - Emerald Oath: rules, safe return, guidance
  - Moonsteel Blue: information, mailbox, reminders
  - Bone/Ivory: text, readability, focused highlights
*/

:root {
  --deceived-black: #050305;
  --deceived-black-2: #0b0608;
  --deceived-smoke: #151015;
  --deceived-raven-gold: #d6a84f;
  --deceived-hot-gold: #f1cf7a;
  --deceived-old-gold: #7c4b13;
  --deceived-blood: #9d1723;
  --deceived-blood-dark: #4d0710;
  --deceived-blood-bright: #d9444f;
  --deceived-emerald: #0f7a52;
  --deceived-emerald-dark: #053c2e;
  --deceived-emerald-glow: #54e6a5;
  --deceived-moon: #315f89;
  --deceived-moon-dark: #091a34;
  --deceived-moon-glow: #9ad2ff;
  --deceived-bone: #f4ead3;
  --deceived-muted: #b7a892;
}

/* Unify the gothic world underneath every control without flattening the distinct colors. */
button,
.button,
input[type="button"],
input[type="submit"] {
  text-shadow: 0 2px 8px rgba(0,0,0,.78) !important;
}

/* Shared premium button shell. */
button:not(.secret-message-close-btn):not(.last-words-card):not(.last-words-player-pill) {
  border-width: 1px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -9px 18px rgba(0,0,0,.28),
    0 6px 16px rgba(0,0,0,.38) !important;
}

/* Emerald Oath: help, safety, rules, returning to the table. */
#seeRulesBtn,
.see-rules-btn,
.rules-btn,
.return-to-table-btn,
#closeShieldAwardedOverlayBtn,
#backToTableBtn,
#returnToTableBtn,
#returnToTableAfterDeathBtn,
button[data-action="return"],
button[data-action="rules"] {
  color: #f5fff8 !important;
  border-color: rgba(84, 230, 165, .72) !important;
  background:
    linear-gradient(180deg, rgba(20, 135, 91, .98) 0%, rgba(6, 72, 52, .98) 58%, rgba(4, 35, 28, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(214,255,235,.18),
    inset 0 -11px 20px rgba(0,0,0,.34),
    0 0 20px rgba(84,230,165,.22),
    0 7px 16px rgba(0,0,0,.45) !important;
}

/* Moonsteel: private info, role reminder, mailbox, neutral knowledge. */
#ravenRoleReminderBtn,
.raven-role-reminder-btn,
#secretMessagesToggleBtn,
.secret-message-toggle-btn,
#closeRulesBtn,
#closeRoleReminderBtn,
button.secondary,
.secondary {
  color: #edf8ff !important;
  border-color: rgba(154, 210, 255, .68) !important;
  background:
    linear-gradient(180deg, rgba(50, 98, 139, .98) 0%, rgba(13, 40, 77, .98) 58%, rgba(6, 17, 36, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(219,243,255,.16),
    inset 0 -11px 20px rgba(0,0,0,.34),
    0 0 20px rgba(154,210,255,.20),
    0 7px 16px rgba(0,0,0,.45) !important;
}

/* Raven Gold: lore, archetypes, masks, general Raven page/world actions. */
#studyMasksBtn,
.study-masks-btn,
#determineFateBtn,
#submitRavenPlacementBtn,
#letFateDecideBtn,
#drawChallengeBtn,
#rerollChallengeBtn,
#awardShieldBtn,
#beginVotingBtn,
#startGameBtn,
#createRoomBtn,
#joinRoomBtn,
#submitRavenPreferenceBtn,
button.raven-action,
button.gold-action {
  color: #fff5d7 !important;
  border-color: rgba(241, 207, 122, .70) !important;
  background:
    linear-gradient(180deg, rgba(142, 91, 23, .98) 0%, rgba(83, 45, 10, .99) 56%, rgba(33, 18, 5, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,238,185,.18),
    inset 0 -12px 20px rgba(0,0,0,.34),
    0 0 20px rgba(214,168,79,.22),
    0 7px 16px rgba(0,0,0,.45) !important;
}

/* Blood Ruby: secret, vote, danger, deception, destructive actions. */
#secretComposeBtn,
.secret-message-compose-btn,
#sendSecretMessageBtn,
#submitVoteBtn,
#endDiscussionBtn,
#finalizeVoteBtn,
#noChallengeWinnerBtn,
#deleteRoomBtn,
button.danger,
.danger,
button.vote-btn {
  color: #fff0f1 !important;
  border-color: rgba(255, 126, 140, .66) !important;
  background:
    linear-gradient(180deg, rgba(167, 24, 38, .99) 0%, rgba(94, 9, 21, .99) 58%, rgba(38, 4, 10, .99) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,210,216,.16),
    inset 0 -12px 20px rgba(0,0,0,.36),
    0 0 20px rgba(157,23,35,.28),
    0 7px 16px rgba(0,0,0,.45) !important;
}

/* Addressing the public table is not as dangerous as voting or secret mail:
   give it brass-black so it does not sit beside red or blue as the same visual weight. */
#addressTableBtn {
  color: #fff1cc !important;
  border-color: rgba(214, 168, 79, .62) !important;
  background:
    linear-gradient(180deg, rgba(92, 58, 18, .99), rgba(29, 18, 8, .99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,232,181,.13),
    inset 0 -10px 18px rgba(0,0,0,.34),
    0 0 14px rgba(214,168,79,.18),
    0 6px 14px rgba(0,0,0,.42) !important;
}

/* Mail waiting should intentionally break the normal palette and scream unread. */
#secretMessagesToggleBtn.secret-message-toggle-has-unread,
.secret-message-toggle-btn.secret-message-toggle-has-unread {
  color: #190a05 !important;
  border-color: rgba(255, 255, 255, .96) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.96) 0%, rgba(255,235,178,.90) 34%, rgba(241,207,122,.78) 58%, rgba(119,63,14,.96) 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -12px 20px rgba(92,50,10,.22),
    0 0 24px rgba(255,255,255,.75),
    0 0 46px rgba(241,207,122,.48),
    0 7px 16px rgba(0,0,0,.45) !important;
}

/* Strong focus/hover language across colors. */
button:not(:disabled):hover,
.button:not(:disabled):hover {
  filter: brightness(1.12) saturate(1.08) !important;
}

button:not(:disabled):active {
  filter: brightness(.95) saturate(1.02) !important;
  transform: translateY(1px);
}

button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(244, 234, 211, .86) !important;
  outline-offset: 2px !important;
}

/* Panels: make the whole page feel like one candlelit gothic world. */
.panel,
.raven-box,
.raven-speaks-panel,
.secret-message-action-bar,
.table-of-deception-panel,
.secret-messages-panel,
.challenge-placeholder-panel,
.voting-panel,
.end-game-decision-panel,
.final-reveal-panel,
.role-instruction-box,
.late-join-waiting-panel,
.pending-join-panel,
.game-status-row > div {
  border-color: rgba(214,168,79,.26) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.055), rgba(0,0,0,0) 52%),
    linear-gradient(180deg, rgba(14, 8, 11, .92), rgba(6, 3, 5, .94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,235,190,.05),
    inset 0 -16px 28px rgba(0,0,0,.28),
    0 8px 20px rgba(0,0,0,.36) !important;
}

/* Raven Speaks gets the narrator blue-black look rather than generic red/black. */
.raven-speaks-panel {
  border-color: rgba(214,168,79,.38) !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(154,210,255,.10), rgba(0,0,0,0) 34%),
    radial-gradient(circle at 82% 6%, rgba(214,168,79,.10), rgba(0,0,0,0) 38%),
    linear-gradient(180deg, rgba(13, 21, 30, .96), rgba(6, 5, 8, .98)) !important;
}

.raven-speaks-panel h3,
.table-of-deception-panel h3,
.secret-messages-panel h3,
.panel h2,
.panel h3 {
  color: var(--deceived-hot-gold) !important;
  text-shadow:
    0 0 10px rgba(214,168,79,.24),
    0 3px 12px rgba(0,0,0,.88) !important;
}

/* Input fields should sit back instead of competing with the buttons. */
input,
textarea,
select {
  color: var(--deceived-bone) !important;
  border-color: rgba(214,168,79,.22) !important;
  background:
    linear-gradient(180deg, rgba(7,5,7,.96), rgba(2,2,3,.98)) !important;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.64),
    0 0 0 1px rgba(255,255,255,.02) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(244,234,211,.45) !important;
}

/* Status numbers retain the Reputation/gold identity. */
#rpPotDisplay,
#phaseTimerDisplay,
.game-status-row strong,
.status-number,
.reputation-value {
  color: var(--deceived-hot-gold) !important;
  text-shadow:
    0 0 12px rgba(214,168,79,.24),
    0 2px 8px rgba(0,0,0,.75) !important;
}

/* Special result/status chips. */
.player-status-badge {
  background:
    linear-gradient(180deg, rgba(17,12,12,.90), rgba(2,2,3,.92)) !important;
}

.shield-status-badge {
  color: #dffdec !important;
  border-color: rgba(84,230,165,.42) !important;
}

.dagger-status-badge {
  color: #ffd5d8 !important;
  border-color: rgba(255,126,140,.42) !important;
}

.waiting-status-badge {
  color: #ddecff !important;
  border-color: rgba(154,210,255,.34) !important;
}

.soul-status-badge {
  color: #d8cef9 !important;
  border-color: rgba(190,170,255,.36) !important;
}

/* Keep side-by-side utility buttons distinct in the Raven Guidance block. */
.raven-utility-buttons > button:nth-child(1),
.raven-guidance-buttons > button:nth-child(1) {
  background:
    linear-gradient(180deg, rgba(20, 135, 91, .98), rgba(6, 72, 52, .98) 58%, rgba(4, 35, 28, .99)) !important;
}

.raven-utility-buttons > button:nth-child(2),
.raven-guidance-buttons > button:nth-child(2) {
  background:
    linear-gradient(180deg, rgba(50, 98, 139, .98), rgba(13, 40, 77, .98) 58%, rgba(6, 17, 36, .99)) !important;
}

.raven-utility-buttons > button:nth-child(3),
.raven-guidance-buttons > button:nth-child(3) {
  background:
    linear-gradient(180deg, rgba(142, 91, 23, .98), rgba(83, 45, 10, .99) 56%, rgba(33, 18, 5, .99)) !important;
}

@media (max-width: 650px) {
  button:not(.secret-message-close-btn):not(.last-words-card):not(.last-words-player-pill) {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      inset 0 -7px 14px rgba(0,0,0,.28),
      0 4px 12px rgba(0,0,0,.34) !important;
  }
}


/* ================= V1.2.24.29 OPTION 3 DESKTOP + MOBILE LAYOUT LOCK ================= */
/*
  Desktop: true two-column command-board layout.
  Mobile: single stacked gameplay flow.
  Keeps all existing controls and game logic; rearranges only layout/presentation.
*/

#gameRoomPanel.deceived-layout-v3 {
  width: min(1380px, 96vw) !important;
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#gameRoomPanel.deceived-layout-v3 > hr {
  display: none !important;
}

#gameRoomPanel.deceived-layout-v3 > h2 {
  margin: 0 0 14px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-size: clamp(1.35rem, 2.1vw, 2.15rem) !important;
  color: #f1cf7a !important;
  text-shadow:
    0 0 16px rgba(214,168,79,.22),
    0 4px 18px rgba(0,0,0,.85) !important;
}

/* Mobile-first order after the HTML reorder:
   Clock -> room/status -> main table/chat/phase panels -> host command/utilities. */
#gameRoomPanel.deceived-layout-v3 .game-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#gameRoomPanel.deceived-layout-v3 .table-side-panel {
  order: 1 !important;
  min-width: 0 !important;
}

#gameRoomPanel.deceived-layout-v3 .raven-side-panel {
  order: 2 !important;
  position: static !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* On mobile, the host action sits below chat/phase panels and utility buttons stay below it. */
#gameRoomPanel.deceived-layout-v3 .raven-side-panel .host-command-banner {
  order: 1 !important;
}

#gameRoomPanel.deceived-layout-v3 .raven-side-panel .raven-box {
  order: 2 !important;
}

/* Make the Raven utility box compact and button-forward. */
#gameRoomPanel.deceived-layout-v3 .raven-box {
  padding: 14px !important;
  border-radius: 18px !important;
}

#gameRoomPanel.deceived-layout-v3 .raven-box h3 {
  margin-bottom: 6px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

#gameRoomPanel.deceived-layout-v3 #ravenMessageDisplay {
  margin: 8px 0 12px !important;
  font-size: .92rem !important;
  color: rgba(244,234,211,.86) !important;
}

/* Host command is allowed to be lower in the layout because it visibly calls the host when needed. */
#gameRoomPanel.deceived-layout-v3 .host-command-banner {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px !important;
  border-radius: 18px !important;
}

#gameRoomPanel.deceived-layout-v3 .host-command-needs-action {
  animation:
    hostCommandBannerGlow 2.65s ease-in-out infinite,
    deceivedHostCommandPulse 1.45s ease-in-out infinite !important;
}

#gameRoomPanel.deceived-layout-v3 .host-command-needs-action button:not(.hidden) {
  animation: hostCommandJumpPulse 1.35s ease-in-out infinite !important;
}

@keyframes deceivedHostCommandPulse {
  0%, 100% {
    filter: brightness(1);
    border-color: rgba(214,168,79,.64);
  }
  50% {
    filter: brightness(1.16);
    border-color: rgba(255,236,186,.95);
  }
}

/* Chat is important in this game. Keep it readable and closer to the table on mobile. */
#gameRoomPanel.deceived-layout-v3 #tableOfDeceptionPanel {
  margin-top: 14px !important;
}

#gameRoomPanel.deceived-layout-v3 .table-of-deception-messages {
  height: clamp(210px, 34dvh, 360px) !important;
}

/* Utility buttons can form a clean row on phones that are wide enough. */
#gameRoomPanel.deceived-layout-v3 .raven-box button {
  margin-top: 8px !important;
}

@media (min-width: 560px) and (max-width: 979px) {
  #gameRoomPanel.deceived-layout-v3 .raven-box {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-box h3,
  #gameRoomPanel.deceived-layout-v3 #ravenMessageDisplay {
    grid-column: 1 / -1 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-box button {
    margin-top: 0 !important;
    min-height: 48px !important;
  }
}

/* Desktop / wide tablet: Option 3 two-column layout. */
@media (min-width: 980px) {
  #gameRoomPanel.deceived-layout-v3 {
    display: grid !important;
    grid-template-columns: minmax(290px, 330px) minmax(0, 1fr) !important;
    grid-auto-rows: auto !important;
    column-gap: 18px !important;
    row-gap: 12px !important;
    align-items: start !important;
    padding: 24px !important;
  }

  #gameRoomPanel.deceived-layout-v3 > h2 {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #gameRoomPanel.deceived-layout-v3 #ravenClockPanel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  #gameRoomPanel.deceived-layout-v3 #gameRoomCodeBadge {
    grid-column: 1 !important;
    grid-row: 3 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #gameRoomPanel.deceived-layout-v3 > .game-status-row {
    grid-column: 1 !important;
    grid-row: 4 !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    gap: 8px !important;
  }

  #gameRoomPanel.deceived-layout-v3 > .game-status-row > div {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 48px !important;
  }

  #gameRoomPanel.deceived-layout-v3 > .game-status-row .small-label {
    margin: 0 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .game-layout {
    display: contents !important;
  }

  #gameRoomPanel.deceived-layout-v3 .table-side-panel {
    grid-column: 2 !important;
    grid-row: 2 / span 20 !important;
    order: initial !important;
    min-width: 0 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-side-panel {
    grid-column: 1 !important;
    grid-row: 5 !important;
    order: initial !important;
    position: sticky !important;
    top: 14px !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-side-panel .host-command-banner {
    order: 1 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-side-panel .raven-box {
    order: 2 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .ravenSpeaksPanel,
  #gameRoomPanel.deceived-layout-v3 .raven-speaks-panel {
    margin-top: 0 !important;
  }

  #gameRoomPanel.deceived-layout-v3 .room-table {
    min-height: clamp(360px, 42vw, 560px) !important;
    margin-top: 14px !important;
  }

  #gameRoomPanel.deceived-layout-v3 .table-of-deception-messages {
    height: clamp(240px, 26vh, 340px) !important;
  }

  #gameRoomPanel.deceived-layout-v3 .raven-box button {
    width: 100% !important;
    min-height: 46px !important;
  }
}

/* Large desktop gets a more cinematic board scale. */
@media (min-width: 1280px) {
  #gameRoomPanel.deceived-layout-v3 {
    grid-template-columns: 340px minmax(0, 1fr) !important;
    column-gap: 22px !important;
  }

  #gameRoomPanel.deceived-layout-v3 .room-table {
    min-height: 590px !important;
  }
}

/* Narrow phones: keep the top status compact and avoid giant utility buttons. */
@media (max-width: 520px) {
  #gameRoomPanel.deceived-layout-v3 {
    padding: 16px 12px !important;
  }

  #gameRoomPanel.deceived-layout-v3 > h2 {
    font-size: 1.18rem !important;
    letter-spacing: .12em !important;
  }

  #gameRoomPanel.deceived-layout-v3 .game-status-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #gameRoomPanel.deceived-layout-v3 .game-status-row > div {
    padding: 8px 5px !important;
  }

  #gameRoomPanel.deceived-layout-v3 .game-status-row strong {
    font-size: .92rem !important;
  }

  #gameRoomPanel.deceived-layout-v3 .small-label {
    font-size: .56rem !important;
    letter-spacing: .06em !important;
  }

  #gameRoomPanel.deceived-layout-v3 .table-of-deception-messages {
    height: min(34dvh, 280px) !important;
  }
}


/* ================= V1.2.24.30 LOBBY HIDE + CHAT COLORS + MAIL ALARM FIX ================= */

/* The Option 3 desktop grid was overriding .hidden on the game room panel.
   This keeps "The Room" from appearing at the bottom of the Create/Join lobby screen. */
#gameRoomPanel.deceived-layout-v3.hidden {
  display: none !important;
}

/* Lobby/player list readability: make HOST and status chips visible against the dark row. */
.player-list .player-row,
.player-list .player-row-with-assets,
.pending-join-row {
  background:
    linear-gradient(180deg, rgba(16,10,12,.94), rgba(5,3,5,.96)) !important;
  border-color: rgba(214,168,79,.30) !important;
}

.player-list .player-display-name,
.player-list .host-wing-player-name,
.pending-join-name {
  color: #f4ead3 !important;
  text-shadow:
    0 0 8px rgba(0,0,0,.85),
    0 2px 8px rgba(0,0,0,.88) !important;
}

.player-list .host-text-badge,
.player-row .host-text-badge {
  color: #fff7dc !important;
  background:
    linear-gradient(180deg, rgba(151, 32, 44, .98), rgba(74, 8, 16, .98)) !important;
  border-color: rgba(255, 126, 140, .64) !important;
  text-shadow: 0 2px 7px rgba(0,0,0,.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 14px rgba(157,23,35,.24) !important;
}

/* Main chat: player names are now stable, player-specific colors.
   They still share the Deceived palette so it does not become rainbow/cartoon. */
.table-of-deception-name {
  color: var(--table-chat-name-color, #f1cf7a) !important;
  font-weight: 950 !important;
  letter-spacing: .035em !important;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--table-chat-name-color, #f1cf7a) 38%, transparent),
    0 2px 8px rgba(0,0,0,.90) !important;
}

.table-of-deception-message {
  border-left: 3px solid color-mix(in srgb, var(--table-chat-name-color, #d6a84f) 46%, transparent) !important;
  padding-left: 9px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--table-chat-name-color, #d6a84f) 8%, transparent), rgba(0,0,0,0)) !important;
}

/* Relentless unread mail alarm:
   It breathes down for a moment, then overtakes the eye again.
   It never fully stops while unread mail remains. */
.secret-message-action-bar.secret-mail-waiting,
#secretMessagesDock.secret-mail-waiting {
  animation:
    secretMailboxDockShake 4.8s ease-in-out infinite,
    secretMailDockRelentlessGlow 4.8s ease-in-out infinite !important;
  border-color: rgba(255,255,255,.70) !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread,
#secretMessagesToggleBtn.secret-message-toggle-has-unread {
  animation: secretMailRelentlessOvertake 4.8s ease-in-out infinite !important;
  color: #190805 !important;
  border-color: rgba(255,255,255,.96) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.98) 0%, rgba(255,235,178,.92) 34%, rgba(241,207,122,.82) 58%, rgba(119,63,14,.98) 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.56) !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread .secret-unread-count,
#secretMessagesToggleBtn.secret-message-toggle-has-unread .secret-unread-count {
  animation: secretUnreadBadgeRelentless 4.8s ease-in-out infinite !important;
}

.secret-message-toggle-btn.secret-message-toggle-has-unread::before,
#secretMessagesToggleBtn.secret-message-toggle-has-unread::before {
  content: "✉ ";
  display: inline-block;
  animation: secretEnvelopeRelentless 4.8s ease-in-out infinite !important;
}

@keyframes secretMailRelentlessOvertake {
  0%, 22%, 100% {
    transform: scale(1);
    filter: brightness(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 0 18px rgba(255,255,255,.42),
      0 0 28px rgba(241,207,122,.34),
      0 7px 16px rgba(0,0,0,.45);
  }
  28% {
    transform: scale(1.035);
    filter: brightness(1.28);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 0 34px rgba(255,255,255,.92),
      0 0 58px rgba(241,207,122,.72),
      0 0 84px rgba(157,23,35,.36),
      0 7px 16px rgba(0,0,0,.45);
  }
  38% {
    transform: scale(1.0);
    filter: brightness(1.08);
  }
  62% {
    transform: scale(1.06);
    filter: brightness(1.42);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      0 0 42px rgba(255,255,255,1),
      0 0 72px rgba(241,207,122,.86),
      0 0 104px rgba(157,23,35,.46),
      0 7px 16px rgba(0,0,0,.45);
  }
  72% {
    transform: scale(1.018);
    filter: brightness(1.16);
  }
}

@keyframes secretMailDockRelentlessGlow {
  0%, 22%, 100% {
    box-shadow:
      inset 0 0 16px rgba(0,0,0,.72),
      0 8px 24px rgba(0,0,0,.54),
      0 0 18px rgba(214,168,79,.10);
  }
  28%, 62% {
    box-shadow:
      inset 0 0 20px rgba(255,255,255,.08),
      0 8px 24px rgba(0,0,0,.54),
      0 0 30px rgba(255,255,255,.46),
      0 0 62px rgba(241,207,122,.36);
  }
}

@keyframes secretUnreadBadgeRelentless {
  0%, 24%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  30%, 64% {
    transform: scale(1.22);
    filter: brightness(1.25);
  }
}

@keyframes secretEnvelopeRelentless {
  0%, 24%, 100% {
    transform: rotate(0deg) scale(1);
  }
  28% {
    transform: rotate(-9deg) scale(1.18);
  }
  32% {
    transform: rotate(8deg) scale(1.18);
  }
  36% {
    transform: rotate(0deg) scale(1.08);
  }
  62% {
    transform: rotate(-10deg) scale(1.24);
  }
  66% {
    transform: rotate(10deg) scale(1.24);
  }
  70% {
    transform: rotate(0deg) scale(1.08);
  }
}


/* ================= V1.2.24.31 TABLE NAMEPLATES + FINAL JUDGMENT RAVEN CENTER ================= */
/* Player names on the table now behave more like transparent PNG/name decals:
   no heavy box, no single-letter ellipsis, better readable full names. */

.room-table {
  overflow: visible !important;
}

/* Replace the small raven emblem with the Final Judgment Raven image in the table center. */
.room-table::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(118px, 20vw, 235px) !important;
  height: clamp(118px, 20vw, 235px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,0) 62%),
    url('/images/final-judgment/raven-final-judgment.png') center / contain no-repeat !important;
  opacity: .34 !important;
  filter:
    saturate(.95)
    contrast(1.08)
    brightness(.82)
    drop-shadow(0 0 18px rgba(214,168,79,.18))
    drop-shadow(0 12px 22px rgba(0,0,0,.62)) !important;
}

/* Keep the text as a small engraved plaque under the image, not stretched under player names. */
.room-table .table-center-text {
  top: 60% !important;
  z-index: 3 !important;
  width: min(34%, 190px) !important;
  max-width: 190px !important;
  min-width: 118px !important;
  padding: 6px 8px !important;
  font-size: clamp(.50rem, .72vw, .72rem) !important;
  letter-spacing: .075em !important;
  line-height: 1.14 !important;
  background:
    linear-gradient(180deg, rgba(19,10,10,.78), rgba(5,3,4,.66)) !important;
  border-color: rgba(214,168,79,.22) !important;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,.56),
    0 0 14px rgba(214,168,79,.10) !important;
}

/* Table seats are now invisible click zones with a polished name decal instead of a big rectangle. */
.room-table .room-player-seat {
  width: clamp(104px, 10vw, 148px) !important;
  min-height: 38px !important;
  padding: 2px 3px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.room-table .room-player-seat::before,
.room-table .room-player-seat::after {
  display: none !important;
  content: none !important;
}

.room-table .room-player-seat:hover,
.room-table .room-player-seat:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The name itself becomes the visual object: translucent, glowing, and readable. */
.room-table .room-player-seat .player-identity.compact {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214,168,79,.20) !important;
  background:
    radial-gradient(circle at top, rgba(214,168,79,.10), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(8,4,5,.34), rgba(3,2,3,.22)) !important;
  box-shadow:
    0 0 10px rgba(0,0,0,.46),
    0 0 13px rgba(214,168,79,.07) !important;
  backdrop-filter: none !important;
}

.room-table .room-player-seat .player-display-name,
.room-table .room-player-seat .host-wing-player-name {
  display: inline !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  color: #f8edcf !important;
  font-size: clamp(.64rem, .78vw, .84rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.95),
    0 0 7px rgba(0,0,0,.96),
    0 0 12px rgba(214,168,79,.24) !important;
}

/* Host wings can be too wide at the table. Keep the host readable without crushing the name. */
.room-table .host-wing-name.compact {
  gap: 2px !important;
  max-width: 100% !important;
}

.room-table .host-wing-name.compact .host-wing {
  width: 13px !important;
  height: 10px !important;
  opacity: .82 !important;
}

/* Status badges become small floating chips under the decal, not a second big row. */
.room-table .room-player-seat .player-status-badges.compact {
  margin-top: 2px !important;
  gap: 2px !important;
}

.room-table .room-player-seat .player-status-badges.compact .player-status-badge {
  min-height: 14px !important;
  padding: 1px 4px !important;
  font-size: .48rem !important;
  background: rgba(0,0,0,.42) !important;
  border-color: rgba(214,168,79,.16) !important;
}

/* Secret recipient pick mode: make the invisible name decals flare clearly. */
.room-player-list.secret-recipient-pick-mode .room-player-seat {
  animation: none !important;
}

.room-player-list.secret-recipient-pick-mode .room-player-seat .player-identity.compact {
  animation: secretRecipientNameDecalPulse 1.05s ease-in-out infinite !important;
  cursor: pointer !important;
}

.room-player-list.secret-recipient-pick-mode .room-player-seat:hover .player-identity.compact,
.room-player-list.secret-recipient-pick-mode .room-player-seat:focus .player-identity.compact {
  border-color: rgba(255,255,255,.84) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.28), rgba(214,168,79,.12) 56%, rgba(0,0,0,.12)) !important;
  box-shadow:
    0 0 20px rgba(255,255,255,.46),
    0 0 36px rgba(214,168,79,.30),
    0 8px 18px rgba(0,0,0,.46) !important;
}

@keyframes secretRecipientNameDecalPulse {
  0%, 100% {
    border-color: rgba(214,168,79,.24);
    box-shadow:
      0 0 10px rgba(0,0,0,.46),
      0 0 13px rgba(214,168,79,.10);
    filter: brightness(1);
  }
  50% {
    border-color: rgba(255,255,255,.70);
    box-shadow:
      0 0 16px rgba(255,255,255,.34),
      0 0 30px rgba(214,168,79,.28);
    filter: brightness(1.18);
  }
}

@media (max-width: 900px) {
  .room-table::after {
    width: clamp(100px, 25vw, 168px) !important;
    height: clamp(100px, 25vw, 168px) !important;
    opacity: .31 !important;
  }

  .room-table .table-center-text {
    top: 60% !important;
    width: min(32%, 150px) !important;
    max-width: 150px !important;
    min-width: 96px !important;
    font-size: .52rem !important;
    letter-spacing: .045em !important;
  }

  .room-table .room-player-seat {
    width: clamp(86px, 18vw, 114px) !important;
    min-height: 34px !important;
  }

  .room-table .room-player-seat .player-identity.compact {
    padding: 4px 6px !important;
  }

  .room-table .room-player-seat .player-display-name,
  .room-table .room-player-seat .host-wing-player-name {
    font-size: .64rem !important;
  }
}

@media (max-width: 650px) {
  .room-table::after {
    width: clamp(78px, 27vw, 118px) !important;
    height: clamp(78px, 27vw, 118px) !important;
    opacity: .28 !important;
  }

  .room-table .table-center-text {
    top: 60.5% !important;
    width: min(31%, 112px) !important;
    max-width: 112px !important;
    min-width: 80px !important;
    padding: 4px 5px !important;
    font-size: .44rem !important;
    letter-spacing: .03em !important;
  }

  .room-table .room-player-seat {
    width: clamp(72px, 22vw, 92px) !important;
    min-height: 30px !important;
    padding: 1px !important;
  }

  .room-table .room-player-seat .player-identity.compact {
    padding: 3px 5px !important;
    border-radius: 12px !important;
  }

  .room-table .room-player-seat .player-display-name,
  .room-table .room-player-seat .host-wing-player-name {
    font-size: .56rem !important;
    line-height: 1.0 !important;
  }

  .room-table .host-wing-name.compact .host-wing {
    width: 10px !important;
    height: 8px !important;
  }

  .room-table .room-player-seat .player-status-badges.compact .player-status-badge {
    min-height: 12px !important;
    padding: 0 3px !important;
    font-size: .42rem !important;
  }
}

@media (max-width: 420px) {
  .room-table .room-player-seat {
    width: clamp(64px, 22vw, 78px) !important;
  }

  .room-table .room-player-seat .player-display-name,
  .room-table .room-player-seat .host-wing-player-name {
    font-size: .51rem !important;
  }

  .room-table .table-center-text {
    max-width: 94px !important;
    font-size: .40rem !important;
  }
}


/* ================= V1.2.24.32 MAIL ALARM / CHALLENGE WAIT / TRUTH CARD / CELEBRATION ================= */

/* Truth-card in the middle of the Table of Deception instead of the Final Judgment Raven. */
.room-table::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.12), rgba(0,0,0,0) 62%),
    url('/images/ravens-board/truth-card.png') center / contain no-repeat !important;
  opacity: .38 !important;
  filter:
    saturate(1.05)
    contrast(1.08)
    brightness(.92)
    drop-shadow(0 0 18px rgba(214,168,79,.24))
    drop-shadow(0 12px 22px rgba(0,0,0,.64)) !important;
}

/* Secret messages should scream like Role Reminder when unread. */
.secret-message-action-bar.secret-mail-waiting,
#secretMessagesDock.secret-mail-waiting {
  border-color: rgba(255,255,255,.96) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.24), rgba(241,207,122,.14) 28%, rgba(157,23,35,.12) 54%, rgba(0,0,0,.96) 100%),
    linear-gradient(180deg, rgba(24, 10, 8, .99), rgba(4, 2, 3, .99)) !important;
  animation:
    roleReminderSecretMailTakeover 3.6s ease-in-out infinite,
    secretMailboxDockShake 3.6s ease-in-out infinite !important;
}

#secretMessagesToggleBtn.secret-message-toggle-has-unread,
.secret-message-toggle-btn.secret-message-toggle-has-unread {
  color: #180705 !important;
  border: 2px solid rgba(255,255,255,.98) !important;
  background:
    radial-gradient(circle at top, rgba(255,255,255,1) 0%, rgba(255,245,206,.98) 26%, rgba(241,207,122,.96) 56%, rgba(157,23,35,.94) 100%) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
  animation: roleReminderSecretMailButtonTakeover 3.6s ease-in-out infinite !important;
}

#secretMessagesToggleBtn.secret-message-toggle-has-unread .secret-unread-count {
  animation: roleReminderSecretUnreadBadge 3.6s ease-in-out infinite !important;
}

@keyframes roleReminderSecretMailTakeover {
  0%, 58%, 100% {
    box-shadow:
      inset 0 0 16px rgba(0,0,0,.72),
      0 8px 24px rgba(0,0,0,.54),
      0 0 24px rgba(214,168,79,.22);
    filter: brightness(1);
  }
  68%, 78% {
    box-shadow:
      inset 0 0 26px rgba(255,255,255,.14),
      0 0 34px rgba(255,255,255,.86),
      0 0 72px rgba(241,207,122,.74),
      0 0 102px rgba(157,23,35,.48);
    filter: brightness(1.28);
  }
}

@keyframes roleReminderSecretMailButtonTakeover {
  0%, 58%, 100% {
    transform: scale(1);
    filter: brightness(1.08);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.70),
      0 0 24px rgba(255,255,255,.42),
      0 0 42px rgba(241,207,122,.34),
      0 7px 16px rgba(0,0,0,.45);
  }
  68% {
    transform: scale(1.075);
    filter: brightness(1.48);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      0 0 44px rgba(255,255,255,1),
      0 0 82px rgba(241,207,122,.92),
      0 0 118px rgba(157,23,35,.56),
      0 7px 16px rgba(0,0,0,.45);
  }
  78% {
    transform: scale(1.02);
    filter: brightness(1.22);
  }
}

@keyframes roleReminderSecretUnreadBadge {
  0%, 58%, 100% { transform: scale(1); }
  68%, 78% { transform: scale(1.32); }
}

/* Vote target menu: dark, readable, no white washed-out dropdown. */
#voteTargetSelect,
#challengeWinnerSelect,
#secretRecipientSelect {
  background: #090608 !important;
  color: #f4ead3 !important;
  border-color: rgba(214,168,79,.46) !important;
}

#voteTargetSelect option,
#challengeWinnerSelect option,
#secretRecipientSelect option {
  background: #090608 !important;
  color: #f4ead3 !important;
}

/* If the browser supports it, make selected menu text stand out. */
#voteTargetSelect:focus,
#challengeWinnerSelect:focus,
#secretRecipientSelect:focus {
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.68),
    0 0 0 2px rgba(214,168,79,.22),
    0 0 24px rgba(214,168,79,.22) !important;
}

/* After finishing a virtual challenge early, make it obvious the game is still waiting on the clock. */
.challenge-finished-wait-card {
  margin: 12px auto 0;
  padding: 13px 14px;
  max-width: 420px;
  border: 1px solid rgba(154,210,255,.56);
  border-radius: 16px;
  background:
    radial-gradient(circle at top, rgba(154,210,255,.16), rgba(0,0,0,0) 52%),
    rgba(0,0,0,.42);
  color: #edf8ff;
  text-align: center;
  box-shadow:
    inset 0 0 16px rgba(255,255,255,.04),
    0 0 20px rgba(154,210,255,.16);
}

.challenge-finished-wait-card .challenge-finished-wait-label {
  margin: 0 0 5px;
  color: #9ad2ff;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.challenge-finished-wait-card strong {
  display: block;
  color: #fff;
  font-size: clamp(1.6rem, 5vw, 2.45rem);
  line-height: 1;
  margin: 6px 0;
  text-shadow:
    0 0 18px rgba(154,210,255,.42),
    0 3px 14px rgba(0,0,0,.78);
}

.challenge-finished-wait-card span {
  display: block;
  color: rgba(244,234,211,.86);
}

/* Choose another game buttons should be visible in all virtual pre-start panels. */
.raven-special-choose-different-btn,
.raven-memory-choose-different-btn,
.raven-path-choose-different-btn,
.firepants-choose-different-btn {
  margin-top: 8px !important;
}

/* The Table of Truth: reduce perceived jump/flicker during fast canvas animation. */
#deceiversTruthCanvas {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: auto;
}

.deceivers-truth-board {
  transform: translateZ(0);
  contain: layout paint;
}

/* Final Reputation celebration screen/card. */
.final-reputation-celebration {
  margin: 14px auto 18px;
  padding: clamp(16px, 4vw, 28px);
  border: 2px solid rgba(241,207,122,.72);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), rgba(241,207,122,.13) 24%, rgba(157,23,35,.10) 52%, rgba(0,0,0,.70) 100%),
    linear-gradient(180deg, rgba(26,14,8,.98), rgba(6,3,4,.98));
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.06),
    0 0 34px rgba(241,207,122,.34),
    0 0 82px rgba(157,23,35,.18);
  text-align: center;
  animation: finalReputationCelebrationGlow 2.4s ease-in-out infinite;
}

.final-reputation-kicker {
  color: #f1cf7a;
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.final-reputation-celebration h2 {
  margin: 7px 0 10px;
  color: #fff;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(241,207,122,.48),
    0 3px 18px rgba(0,0,0,.88);
}

.final-reputation-money {
  display: inline-block;
  margin: 4px auto 10px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.54);
  background:
    radial-gradient(circle at top, rgba(255,255,255,.90), rgba(241,207,122,.86) 44%, rgba(117,63,15,.96) 100%);
  color: #1a0904;
  font-size: clamp(1.7rem, 7vw, 3.6rem);
  font-weight: 950;
  letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.54);
  box-shadow:
    0 0 24px rgba(255,255,255,.42),
    0 0 54px rgba(241,207,122,.38);
}

@keyframes finalReputationCelebrationGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.14); }
}


/* ================= V1.2.24.33 LAST WORDS BANK + REPUTATION BANNER + TIMER CLEANUP ================= */

/* The tiny legacy timer box is not part of the current design.
   The real active timer is The Raven's Clock. */
.legacy-phase-timer-box,
#phaseTimerDisplay {
  display: none !important;
}

/* Make Last Words broadcasts feel important and not repetitive. */
.raven-feed-last-words-message {
  line-height: 1.42 !important;
}

/* Reputation celebration / punishment banner after votes. */
.reputation-change-banner {
  margin: 12px auto 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 2px solid rgba(214,168,79,.42);
  background:
    radial-gradient(circle at top, rgba(214,168,79,.14), rgba(0,0,0,0) 58%),
    linear-gradient(180deg, rgba(13,8,8,.96), rgba(3,2,3,.97));
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.04),
    0 0 24px rgba(0,0,0,.52);
  color: #f4ead3;
  text-align: center;
}

.reputation-change-banner.hidden {
  display: none !important;
}

.reputation-change-banner.reputation-gain {
  border-color: rgba(84,230,165,.72);
  box-shadow:
    inset 0 0 18px rgba(84,230,165,.06),
    0 0 24px rgba(84,230,165,.22),
    0 0 54px rgba(214,168,79,.18);
}

.reputation-change-banner.reputation-loss {
  border-color: rgba(255,93,108,.72);
  box-shadow:
    inset 0 0 18px rgba(255,93,108,.06),
    0 0 24px rgba(157,23,35,.30),
    0 0 54px rgba(0,0,0,.42);
}

.reputation-change-banner.reputation-change-fresh {
  animation: reputationBannerArrival 4.8s ease-in-out;
}

.reputation-change-kicker {
  color: rgba(244,234,211,.78);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.reputation-change-main {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 7px 0 8px;
}

.reputation-change-main strong {
  color: #fff;
  font-size: clamp(1rem, 3vw, 1.45rem);
  letter-spacing: .10em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(214,168,79,.28);
}

.reputation-change-main span {
  font-size: clamp(1.35rem, 5vw, 2.4rem);
  font-weight: 950;
  line-height: 1;
}

.reputation-gain .reputation-change-main span {
  color: #54e6a5;
  text-shadow:
    0 0 14px rgba(84,230,165,.50),
    0 0 34px rgba(214,168,79,.22);
}

.reputation-loss .reputation-change-main span {
  color: #ff8c96;
  text-shadow:
    0 0 14px rgba(255,93,108,.50),
    0 0 34px rgba(157,23,35,.28);
}

.reputation-change-banner p {
  margin: 0;
  color: rgba(244,234,211,.88);
  line-height: 1.35;
}

.raven-feed-reputation {
  border-left-color: rgba(84,230,165,.70) !important;
  background:
    linear-gradient(90deg, rgba(84,230,165,.10), rgba(0,0,0,.24)) !important;
  color: #f4ead3 !important;
  font-weight: 750;
}

@keyframes reputationBannerArrival {
  0% {
    transform: scale(.97);
    opacity: .35;
    filter: brightness(.86);
  }
  18% {
    transform: scale(1.025);
    opacity: 1;
    filter: brightness(1.28);
  }
  38% {
    transform: scale(1);
    filter: brightness(1.02);
  }
  62% {
    transform: scale(1.016);
    filter: brightness(1.18);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}


/* ================= V1.2.24.34 MINI-GAME ANSWER REVIEW + SMALL-GAME REPUTATION LOCK ================= */

.raven-answer-review {
  margin: 14px 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(154,210,255,.38);
  background:
    radial-gradient(circle at top, rgba(154,210,255,.12), rgba(0,0,0,0) 62%),
    rgba(0,0,0,.36);
}

.raven-answer-review h4 {
  margin: 0 0 6px;
  text-align: center;
  color: #9ad2ff;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.raven-answer-review-row {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
}

.raven-answer-review-row.correct {
  border-color: rgba(84,230,165,.36);
  background:
    linear-gradient(90deg, rgba(84,230,165,.08), rgba(0,0,0,.30));
}

.raven-answer-review-row.wrong {
  border-color: rgba(255,93,108,.42);
  background:
    linear-gradient(90deg, rgba(157,23,35,.14), rgba(0,0,0,.32));
}

.raven-answer-review-question {
  color: #f4ead3;
  font-weight: 900;
  margin-bottom: 7px;
}

.raven-answer-review-answer,
.raven-answer-review-correct {
  color: rgba(244,234,211,.88);
  line-height: 1.35;
}

.raven-answer-review-answer span {
  color: #ff8c96;
  font-weight: 950;
}

.raven-answer-review-correct span {
  color: #54e6a5;
  font-weight: 950;
}


/* ================= V1.2.24.36 SHIELD CENTER FINAL OVERRIDE + CLOCK RESTORE ================= */
/* The truth-card rule from an older patch came later in the CSS and was winning.
   This final override forces the table center to be Raven's Shield. */
.room-table::after,
#gameRoomPanel .room-table::after,
#gameRoomPanel.deceived-layout-v3 .room-table::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(118px, 20vw, 235px) !important;
  height: clamp(118px, 20vw, 235px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,226,174,.12), rgba(214,168,79,.08) 34%, rgba(0,0,0,0) 64%),
    url('/images/ui/raven-shield.png') center / contain no-repeat !important;
  opacity: .36 !important;
  filter:
    saturate(1.08)
    contrast(1.05)
    brightness(.92)
    drop-shadow(0 0 18px rgba(214,168,79,.28))
    drop-shadow(0 0 34px rgba(214,168,79,.16))
    drop-shadow(0 12px 22px rgba(0,0,0,.62)) !important;
}

/* The Raven's Clock should be hidden only while the full game room itself is hidden/lobby-hidden.
   If the room is on screen, force the clock to show. */
#gameRoomPanel.deceived-layout-v3:not(.hidden) #ravenClockPanel,
#gameRoomPanel.deceived-layout-v3:not(.hidden) .raven-clock-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Preserve normal hidden behavior when the entire game room is hidden. */
#gameRoomPanel.deceived-layout-v3.hidden #ravenClockPanel,
#gameRoomPanel.deceived-layout-v3.hidden .raven-clock-panel {
  display: none !important;
}

@media (max-width: 900px) {
  #gameRoomPanel.deceived-layout-v3 .room-table::after {
    width: clamp(100px, 25vw, 168px) !important;
    height: clamp(100px, 25vw, 168px) !important;
    opacity: .34 !important;
  }
}

@media (max-width: 650px) {
  #gameRoomPanel.deceived-layout-v3 .room-table::after {
    width: clamp(84px, 27vw, 126px) !important;
    height: clamp(84px, 27vw, 126px) !important;
    opacity: .32 !important;
  }
}


/* ================= V1.2.24.37 FIREPANTS ENTER GAME PERCH ================= */
/* Put firepants-sitting.png at: public/images/firepants/firepants-sitting.png */

#joinPanel.enter-game-panel {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#enterGameFirepants.enter-game-firepants {
  position: absolute !important;
  right: clamp(10px, 3vw, 28px) !important;
  top: clamp(-116px, -8.3vw, -82px) !important;
  width: clamp(150px, 18vw, 235px) !important;
  height: auto !important;
  z-index: 8 !important;
  pointer-events: none !important;
  user-select: none !important;
  opacity: .98 !important;
  filter:
    drop-shadow(0 0 18px rgba(214,168,79,.18))
    drop-shadow(0 18px 24px rgba(0,0,0,.72)) !important;
}

/* Give the box just enough top breathing room so his head stays in the page, not up by the browser bar. */
#joinPanel.enter-game-panel:not(.hidden) {
  margin-top: clamp(72px, 8.6vw, 112px) !important;
}

/* The intro screen should still feel balanced after FirePants sits on the corner. */
#joinPanel.enter-game-panel > h2,
#joinPanel.enter-game-panel > #connectionStatus {
  position: relative !important;
  z-index: 4 !important;
}

#joinPanel.enter-game-panel > label,
#joinPanel.enter-game-panel > input,
#joinPanel.enter-game-panel > button,
#joinPanel.enter-game-panel > p,
#joinPanel.enter-game-panel > section {
  position: relative !important;
  z-index: 3 !important;
}

/* Hide him once the player is inside a room/lobby/role flow. */
#enterGameFirepants.hidden,
#joinPanel:has(#lobbyPanel:not(.hidden)) #enterGameFirepants,
#joinPanel:has(#roleRevealPanel:not(.hidden)) #enterGameFirepants {
  display: none !important;
}

/* Desktop wide: keep him perched, not floating near the browser chrome. */
@media (min-width: 1100px) {
  #enterGameFirepants.enter-game-firepants {
    right: 12px !important;
    top: -108px !important;
    width: 230px !important;
  }
}

/* Tablet: smaller and tucked into the corner. */
@media (max-width: 900px) {
  #joinPanel.enter-game-panel:not(.hidden) {
    margin-top: 76px !important;
  }

  #enterGameFirepants.enter-game-firepants {
    width: 172px !important;
    top: -84px !important;
    right: 8px !important;
  }
}

/* Phone: very small, decorative, and never covering the form. */
@media (max-width: 640px) {
  #joinPanel.enter-game-panel:not(.hidden) {
    margin-top: 50px !important;
  }

  #enterGameFirepants.enter-game-firepants {
    width: 112px !important;
    top: -48px !important;
    right: 6px !important;
    opacity: .92 !important;
  }
}

@media (max-width: 420px) {
  #enterGameFirepants.enter-game-firepants {
    width: 92px !important;
    top: -38px !important;
    right: 4px !important;
  }
}


/* ================= V1.2.24.38 CRITICAL CLOCK / FIREPANTS / RAVEN LOCK HOTFIX ================= */

/* The Raven's Clock must show whenever the real game room is visible. */
#gameRoomPanel:not(.hidden) #ravenClockPanel,
#gameRoomPanel:not(.hidden) .raven-clock-panel,
#gameRoomPanel.deceived-layout-v3:not(.hidden) #ravenClockPanel,
#gameRoomPanel.deceived-layout-v3:not(.hidden) .raven-clock-panel {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 94px !important;
}

/* Only hide the clock when the game room itself is hidden. */
#gameRoomPanel.hidden #ravenClockPanel,
#gameRoomPanel.hidden .raven-clock-panel {
  display: none !important;
}

/* FirePants should be visible on the first Create/Join screen and only disappear after lobby/role/game UI appears. */
#joinPanel.enter-game-panel:not(.hidden) > #enterGameFirepants.enter-game-firepants:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: .98 !important;
}

#joinPanel.enter-game-panel #lobbyPanel:not(.hidden) ~ #enterGameFirepants,
#joinPanel.enter-game-panel #roleRevealPanel:not(.hidden) ~ #enterGameFirepants {
  display: none !important;
}

/* Keep him above the box but below browser chrome. */
#enterGameFirepants.enter-game-firepants {
  position: absolute !important;
  right: clamp(10px, 3vw, 28px) !important;
  top: clamp(-104px, -7.4vw, -76px) !important;
  width: clamp(145px, 16vw, 218px) !important;
  z-index: 20 !important;
}

/* Make Choose Another Game buttons consistent and obvious. */
.raven-special-choose-different-btn,
#chooseDifferentRavenLockChallengeBtn,
#forceDifferentRavenLockChallengeBtn {
  margin-top: 10px !important;
  width: min(360px, 100%) !important;
}

@media (max-width: 640px) {
  #enterGameFirepants.enter-game-firepants {
    width: 108px !important;
    top: -44px !important;
    right: 6px !important;
  }

  #joinPanel.enter-game-panel:not(.hidden) {
    margin-top: 52px !important;
  }
}


/* ================= V1.2.24.39 VIRTUAL CHALLENGE BUTTON CLEANUP ================= */
/* No browser confirm popup for Choose Another Game anymore.
   These rules make every virtual-game "Begin" and "Choose Another Game" button line up consistently. */

.raven-special-standings > button,
.raven-quiz-standings > button,
.raven-memory-standings > button,
.raven-path-standings > button,
.firepants-standings > button,
#beginRavenQuizBtn,
#beginRavenCipherBtn,
#beginRavenLockBtn,
#beginRavenMemoryBtn,
#beginRavenPathBtn,
#beginFirepantsBtn,
.raven-special-choose-different-btn,
.raven-memory-choose-different-btn,
.raven-path-choose-different-btn,
.firepants-choose-different-btn,
[id^="chooseDifferentRaven"][id$="ChallengeBtn"],
[id^="forceDifferentRaven"][id$="ChallengeBtn"] {
  display: block !important;
  width: min(360px, 92%) !important;
  max-width: 360px !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
}

#beginRavenQuizBtn,
#beginRavenCipherBtn,
#beginRavenLockBtn,
#beginRavenMemoryBtn,
#beginRavenPathBtn,
#beginFirepantsBtn {
  width: min(720px, 96%) !important;
  max-width: 720px !important;
}

.raven-special-choose-different-btn,
.raven-memory-choose-different-btn,
.raven-path-choose-different-btn,
.firepants-choose-different-btn,
[id^="chooseDifferentRaven"][id$="ChallengeBtn"],
[id^="forceDifferentRaven"][id$="ChallengeBtn"] {
  background:
    linear-gradient(180deg, rgba(43,92,137,.96), rgba(11,33,59,.98)) !important;
  border-color: rgba(154,210,255,.42) !important;
  color: #efe8df !important;
  box-shadow:
    inset 0 0 16px rgba(154,210,255,.10),
    0 8px 18px rgba(0,0,0,.42) !important;
}

.raven-special-choose-different-btn:hover,
.raven-memory-choose-different-btn:hover,
.raven-path-choose-different-btn:hover,
.firepants-choose-different-btn:hover,
[id^="chooseDifferentRaven"][id$="ChallengeBtn"]:hover,
[id^="forceDifferentRaven"][id$="ChallengeBtn"]:hover {
  filter: brightness(1.08) !important;
}

@media (max-width: 640px) {
  .raven-special-standings > button,
  .raven-quiz-standings > button,
  .raven-memory-standings > button,
  .raven-path-standings > button,
  .firepants-standings > button,
  .raven-special-choose-different-btn,
  .raven-memory-choose-different-btn,
  .raven-path-choose-different-btn,
  .firepants-choose-different-btn,
  [id^="chooseDifferentRaven"][id$="ChallengeBtn"],
  [id^="forceDifferentRaven"][id$="ChallengeBtn"] {
    width: 94% !important;
    max-width: 94% !important;
  }
}


/* ================= V1.2.24.40 AUTO NO-WINNER RETURN + FIREPANTS SCREEN GUARD ================= */

.virtual-no-winner-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
  background:
    radial-gradient(circle at center, rgba(214,168,79,.18), rgba(0,0,0,.86) 58%, rgba(0,0,0,.96) 100%) !important;
}

.virtual-no-winner-overlay.hidden {
  display: none !important;
}

.virtual-no-winner-card {
  width: min(620px, 92vw) !important;
  padding: clamp(20px, 4vw, 34px) !important;
  border: 2px solid rgba(154,210,255,.55) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top, rgba(154,210,255,.16), rgba(214,168,79,.10) 28%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg, rgba(20,12,10,.98), rgba(0,0,0,.98)) !important;
  box-shadow:
    inset 0 0 28px rgba(255,255,255,.06),
    0 0 34px rgba(154,210,255,.22),
    0 0 90px rgba(0,0,0,.82) !important;
  text-align: center !important;
}

.virtual-no-winner-kicker {
  color: #9ad2ff !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  margin: 0 0 10px !important;
}

.virtual-no-winner-card h2 {
  color: #f1cf7a !important;
  margin: 8px 0 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 18px rgba(214,168,79,.22) !important;
}

.virtual-no-winner-card p {
  color: #f4ead3 !important;
  line-height: 1.45 !important;
}

#returnToTableFromNoWinnerBtn,
.virtual-return-to-table-btn {
  display: block !important;
  width: min(340px, 92%) !important;
  margin: 18px auto 0 !important;
  text-align: center !important;
}

/* FirePants on the enter screen must never leak into lobby, role reveal, or game screens. */
#joinPanel:not(.hidden) #lobbyPanel:not(.hidden) ~ #enterGameFirepants,
#joinPanel:not(.hidden) #roleRevealPanel:not(.hidden) ~ #enterGameFirepants,
#gameRoomPanel:not(.hidden) ~ #joinPanel #enterGameFirepants,
#enterGameFirepants.hidden {
  display: none !important;
}

#enterGameFirepants[style*="display: none"] {
  display: none !important;
}


/* ================= TABLE OF DECEPTION / CHOSEN REBRAND PATCH ================= */

#enterGameFirepants {
  display: none !important;
}

.role-reveal-card h2.role-reveal-role-title {
  color: #d6a84f;
  font-size: clamp(1.75rem, 6vw, 3.35rem);
  letter-spacing: .08em;
  line-height: 1.18;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.role-reveal-role-title .role-reveal-main-line {
  display: block;
  font-size: clamp(2rem, 7vw, 3.8rem);
  color: #d6a84f;
}

.role-reveal-role-title .role-reveal-sub-line {
  display: block;
  max-width: 18ch;
  font-size: clamp(1rem, 2.7vw, 1.35rem);
  color: #f1eadf;
  letter-spacing: .03em;
  line-height: 1.35;
}

.role-reveal-role-title .role-reveal-list-label {
  display: block;
  margin-top: 2px;
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: #d6a84f;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.role-reveal-role-title .role-reveal-name-list {
  display: block;
  font-size: clamp(1rem, 2.8vw, 1.3rem);
  color: #f5efe5;
  line-height: 1.42;
}