:root {
  --ink: #130b29;
  --menu: #231349;
  --button: #2c1a56;
  --button-outline: #20133f;
  --plum: #7d3d8b;
  --violet: #a569c1;
  --cream: #f7efd9;
  --paper: #fffaf0;
  --muted: #a99abb;
  --danger: #d85f68;
  --safe: #73b691;
}

* { box-sizing: border-box; }

#app { position: relative; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--cream);
  background: var(--menu);
  font-family: "Nunito", system-ui, sans-serif;
}

button {
  font: inherit;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus:not(:focus-visible) { outline: none; }

.screen {
  display: none;
  min-height: 100vh;
}

.screen.active { display: flex; }

.menu-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 20px;
  -webkit-user-select: none;
  user-select: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #231349;
  background-size: 44px 44px;
}

#menu-screen.active {
  position: fixed;
  inset: 0;
}

.legal-links {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 10px;
  display: flex;
  gap: 12px;
  font-size: .68rem;
}

.legal-links a {
  color: #8f80a4;
  text-decoration: none;
}

.legal-links a:hover,
.legal-links a:focus-visible {
  color: var(--cream);
  text-decoration: underline;
}

.menu-username input {
  -webkit-user-select: none;
  user-select: none;
}

.menu-glow {
  position: absolute;
  inset: 10% 20%;
  background: radial-gradient(circle, rgba(126, 57, 143, .25), transparent 64%);
  filter: blur(20px);
}

/* /cool2 and Discord's mini view share the detailed compact menu. */
.compact-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(10px, 4dvh, 40px) clamp(10px, 4vw, 30px);
  -webkit-user-select: none;
  user-select: none;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #231349;
  background-size: clamp(22px, 4vw, 44px) clamp(22px, 4vw, 44px);
}

.compact-screen[hidden] { display: none; }

.compact-menu-glow {
  position: absolute;
  inset: 5% 10%;
  background: radial-gradient(circle, rgba(126, 57, 143, .3), transparent 64%);
  filter: blur(clamp(10px, 3vw, 20px));
}

.compact-menu-card {
  position: relative;
  z-index: 1;
  width: min(470px, 94vw);
  text-align: center;
}

.compact-menu-card .eyebrow {
  margin-bottom: clamp(2px, 1.4dvh, 12px);
  font-size: clamp(.42rem, min(2.1vw, 1.8dvh), .72rem);
}

.compact-menu-cat {
  display: block;
  width: clamp(42px, min(19vw, 18dvh), 122px);
  height: clamp(42px, min(19vw, 18dvh), 122px);
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.25));
  animation: float 4s ease-in-out infinite;
}

.compact-menu-card h1 {
  margin: clamp(0px, .7dvh, 4px) 0 clamp(3px, 1.5dvh, 14px);
  font-size: clamp(2rem, min(18vw, 13dvh), 6.5rem);
  line-height: .72;
}

#compact-game-title .game-title-kitty {
  display: inline-block;
  letter-spacing: .075em;
}

#compact-game-title em {
  display: inline-block;
  letter-spacing: .05em;
}

.compact-menu-card .tagline {
  margin: clamp(4px, 2.7dvh, 24px) auto 0;
  font-size: clamp(.58rem, min(3.2vw, 2.3dvh), 1.02rem);
  line-height: 1.3;
}

.compact-menu-card .player-count {
  margin: clamp(5px, 2dvh, 22px) 0 0;
  font-size: clamp(.44rem, min(2.4vw, 1.8dvh), .78rem);
}

.compact-menu-card .player-count span {
  width: clamp(4px, .8vw, 7px);
  height: clamp(4px, .8vw, 7px);
  margin-right: clamp(3px, .8vw, 6px);
}

/* /cool is the logo-only display: cat mark, title, and tagline. */
.compact-screen.compact-logo-only .compact-menu-card {
  transform: translateY(2.5dvh);
}

.compact-screen.compact-logo-only .eyebrow,
.compact-screen.compact-logo-only .player-count {
  display: none;
}

.compact-screen.compact-logo-only .compact-menu-cat {
  width: clamp(64px, min(13vw, 16dvh), 118px);
  height: clamp(64px, min(13vw, 16dvh), 118px);
  margin-bottom: clamp(8px, 2dvh, 18px);
}

.compact-screen.compact-logo-only .compact-menu-card h1 {
  margin: 0 0 clamp(10px, 2.2dvh, 22px);
}

.compact-screen.compact-logo-only .tagline {
  margin-top: 0;
}

body.compact-presentation-active { overflow: hidden; }

.menu-settings {
  position: fixed;
  z-index: 110;
  top: 15px;
  left: 15px;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
}

.menu-settings img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.menu-settings:hover img { filter: brightness(1.12); }
.menu-settings[hidden] { display: none; }

.game-exit-button {
  position: fixed;
  z-index: 110;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  transform: none;
}

.game-exit-button[hidden] { display: none; }

.game-exit-button:hover,
.game-exit-button:active { transform: none; }

.game-exit-button img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  transition: filter .18s ease;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.game-exit-button:hover img { filter: brightness(1.18); }

.game-exit-button.holding img {
  filter: brightness(1.18);
  animation: exit-hold-shake 80ms linear infinite;
}

body.game-controls-layout .game-exit-button {
  position: absolute;
  top: 10px;
  right: 10px;
  left: auto;
  width: 65px;
  height: 65px;
}

body.game-controls-layout .game-exit-button img {
  width: 65px;
  height: 65px;
}

body.game-controls-layout .menu-settings {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 65px;
  height: 65px;
}

body.game-controls-layout .role-peek-button {
  position: absolute;
  z-index: 110;
  grid-column: auto;
  grid-row: auto;
  justify-self: auto;
  top: 10px;
  right: auto;
  left: 85px;
}

@keyframes exit-hold-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(var(--exit-shake, 0px), calc(0px - var(--exit-shake, 0px))); }
  50% { transform: translate(calc(0px - var(--exit-shake, 0px)), var(--exit-shake, 0px)); }
  75% { transform: translate(var(--exit-shake, 0px), var(--exit-shake, 0px)); }
}

.menu-card {
  position: relative;
  z-index: 1;
  width: min(470px, calc(100vw - 40px));
  text-align: center;
  animation: rise .7s ease both;
}

.eyebrow {
  margin: 0 0 12px;
  color: #b899cc;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.menu-cat {
  width: 122px;
  height: 122px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.25));
  animation: float 4s ease-in-out infinite;
}

h1, h2, h3 { font-family: "Fredoka", sans-serif; }

h1 {
  margin: 4px 0 14px;
  font-size: clamp(3.8rem, 10vw, 6.5rem);
  line-height: .75;
  letter-spacing: -.07em;
}

h1 em {
  color: #aa6fc5;
  font-size: .78em;
  font-style: normal;
}

#game-title .game-title-kitty {
  display: inline-block;
  letter-spacing: .075em;
}

#game-title em {
  display: inline-block;
  letter-spacing: .05em;
}

.menu-beta {
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  margin: 0;
  color: #cec55f;
  font-family: "Fredoka", sans-serif;
  font-size: clamp(2.12rem, min(15.2vw, 10.4dvh), 5.2rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: .075em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.tagline {
  width: min(370px, 90%);
  margin: 24px auto 28px;
  color: #c8bbd4;
  font-size: 1.02rem;
  line-height: 1.55;
}

.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 17px 20px;
  border: 2px solid var(--button-outline);
  border-radius: 14px;
  color: var(--cream);
  background: var(--button);
  box-shadow: 0 5px 0 var(--button-outline), 0 12px 30px rgba(10, 5, 24, .28);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  background: #392268;
  box-shadow: 0 7px 0 var(--button-outline), 0 16px 34px rgba(10, 5, 24, .32);
}

.primary-button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--button-outline); }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }

.player-count {
  margin-top: 22px;
  color: #827398;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.player-count span {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 8px var(--safe);
}

.role-screen {
  align-items: flex-start;
  justify-content: center;
  padding: clamp(54px, 9vh, 100px) 20px 32px;
  -webkit-user-select: none;
  user-select: none;
  background: radial-gradient(circle at 50% 30%, #3c226b, var(--menu) 58%);
}

.role-card {
  width: min(470px, 100%);
  padding: 34px;
  text-align: center;
  border: 1px solid rgba(194, 153, 216, .18);
  border-radius: 28px;
  background: rgba(18, 10, 40, .5);
  box-shadow: 0 28px 80px rgba(9, 4, 23, .4);
  animation: reveal .65s cubic-bezier(.2,.9,.2,1) both;
}

.role-art-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 170px;
  margin: 14px auto 18px;
}

.role-ring {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(185, 114, 206, .35);
  border-radius: 50%;
  animation: pulse 2.8s ease-in-out infinite;
}

.cat-appearance {
  position: relative;
  display: grid;
  place-items: center;
}

.cat-appearance > img,
.cat-appearance > .cat-appearance-cosmetic {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.cat-appearance > img {
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.cat-appearance-cosmetic.tinted,
.customization-cosmetic-thumbnail.tinted {
  display: block;
  pointer-events: none;
}

.cat-appearance-cosmetic.behind { z-index: 0; }
.cat-appearance-base { z-index: 1; }
.cat-appearance-cosmetic.front { z-index: 2; }
.cat-appearance-cosmetic.top { z-index: 3; }

#role-art { width: 142px; height: 142px; object-fit: contain; filter: drop-shadow(0 15px 15px rgba(0,0,0,.24)); }
.role-card h2 { margin: 0; font-size: clamp(2.4rem, 8vw, 3.6rem); letter-spacing: -.04em; }
.role-team { margin: 5px 0 18px; color: #bd87d0; font-weight: 800; }
.role-description { min-height: 48px; margin: 0 auto 18px; color: #c8bbd4; line-height: 1.55; }

.ability-chip {
  margin: 0 0 24px;
  padding: 12px 15px;
  border: 1px solid rgba(165, 105, 193, .25);
  border-radius: 12px;
  color: #dbcce4;
  background: rgba(165, 105, 193, .09);
  font-size: .88rem;
  font-weight: 700;
}

.reveal-timer {
  color: #9d8bab;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reveal-timer span { color: #e9dcf0; font-size: 1rem; }

.reveal-progress {
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 5px;
  background: #160c2f;
}

.reveal-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #87519d, #cf91d7);
  transform-origin: left;
}

.role-screen.active .reveal-progress span { animation: countdown 5s linear forwards; }

.intro-screen {
  --intro-caretaker-size: clamp(76px, min(26.4vw, 29.2dvh), 336px);
  --intro-caretaker-bottom: clamp(-12px, calc(12dvh - 150px), 20px);
  --intro-caretaker-top-offset: clamp(57px, min(19.7vw, 21.8dvh), 250px);
  --intro-copy-gap: clamp(24px, min(2vw, 2.8dvh), 32px);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  color: #f7efd9;
  background: #0d0919;
}

.corridor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), transparent 28%, transparent 72%, rgba(0,0,0,.72)),
    repeating-linear-gradient(90deg, #161022 0 2px, #21152e 2px 13vw);
  animation: corridor-in 1.1s cubic-bezier(.2,.75,.25,1) both;
}

.corridor::before {
  content: "";
  position: absolute;
  inset: 7% 25% -8%;
  border: clamp(3px, .55vmin, 7px) solid #33243c;
  border-bottom: 0;
  background: linear-gradient(#191020, #08060d);
  box-shadow: inset 0 0 70px #000, 0 0 50px #000;
}

.corridor::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 90%;
  height: 50%;
  background: linear-gradient(90deg, transparent, rgba(104,43,68,.18), transparent);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

.door-sign {
  position: absolute;
  z-index: 2;
  top: 13%;
  left: 50%;
  padding: clamp(3px, .55vmin, 7px) clamp(6px, 1vmin, 13px);
  border: 1px solid #4d3d55;
  color: #78687f;
  background: #17101e;
  font-size: clamp(.42rem, min(1.2vw, 1.2dvh), .7rem);
  font-weight: 900;
  letter-spacing: .12em;
  transform: translateX(-50%);
}

.door-seam { position: absolute; z-index: 1; top: 7%; bottom: 0; left: 50%; width: 2px; background: #35233b; box-shadow: 0 0 16px #6b3850; }

.human-shadow {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--intro-caretaker-bottom);
  width: var(--intro-caretaker-size);
  height: auto;
  filter: drop-shadow(0 15px 24px #000);
  transform: translateX(-50%) rotate(-4deg);
  animation: shadow-reveal 1.4s 1.1s ease both;
}

.intro-cats { position: absolute; z-index: 4; inset: auto 0 4%; display: flex; justify-content: space-between; padding: 0 6%; pointer-events: none; }
.intro-cats img { width: clamp(48px, min(16vw, 15.7dvh), 180px); filter: brightness(.25) drop-shadow(0 20px 10px #000); }
.intro-cats img:first-child { transform: rotate(8deg); animation: cat-enter-left 1s .45s ease both; }
.intro-cats img:last-child { transform: rotate(-8deg) scaleX(-1); animation: cat-enter-right 1s .6s ease both; }

.alarm-light {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 6%, rgba(214,51,76,.35), transparent 48%);
  mix-blend-mode: screen;
  animation: alarm 1s ease-in-out infinite;
}

.intro-copy {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: calc(var(--intro-caretaker-bottom) + var(--intro-caretaker-top-offset) + var(--intro-copy-gap));
  left: 0;
  width: min(650px, 84%);
  margin: 0 auto;
  text-align: center;
  text-shadow: 0 4px 20px #000;
  animation: reveal-copy .8s 2s ease both;
}

.intro-copy h2 { margin: 0; font-size: clamp(2rem, min(9vw, 9.8dvh), 7rem); line-height: .82; letter-spacing: -.06em; }
.intro-copy p:last-child {
  margin: clamp(6px, 1.1vmin, 12px) 0 0;
  color: #b9aaba;
  font-size: clamp(.56rem, min(1.25vw, 1.4dvh), 1rem);
  font-weight: 700;
}

.game-screen {
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  color: #201534;
  background: #eee7dc;
}

.game-screen .log-entry.chat-message {
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.game-screen.night {
  color: var(--cream);
  background: #150d2a;
}

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 76px;
  height: 76px;
  flex: 0 0 76px;
  padding: 12px clamp(18px, 4vw, 48px);
  color: var(--cream);
  background: var(--menu);
  border-bottom: 3px solid var(--button-outline);
}

.brand-lockup, .phase-block { display: flex; align-items: center; gap: 11px; }
.phase-block.transition-hidden { visibility: hidden; pointer-events: none; }
.brand-lockup strong, .phase-block span { display: block; font-family: "Fredoka", sans-serif; font-size: 1rem; }
.brand-lockup small, .phase-block small { display: block; margin-top: 2px; color: #9d8bab; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brand-paw { color: #9f64b7; font-size: 1.5rem; }
.phase-icon { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #35215d; font-size: 1.2rem !important; }

.phase-timer {
  min-width: 54px;
  margin-left: 8px;
  padding: 7px 9px;
  border: 1px solid #51376f;
  border-radius: 9px;
  color: #f2e7f6;
  background: #1a1033;
  font-family: "Fredoka", sans-serif;
  font-size: .86rem;
  text-align: center;
  letter-spacing: .04em;
}

.phase-timer.urgent { color: #ffd9dc; border-color: #a94b61; background: #3a172b; animation: timer-pulse .7s ease-in-out infinite; }

.icon-button {
  justify-self: end;
  width: 38px;
  height: 38px;
  border: 2px solid #4c3770;
  border-radius: 50%;
  color: #d9cce4;
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.role-peek-button {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.role-peek-button:hover,
.role-peek-button:active {
  transform: none;
}

.role-peek-button img {
  display: block;
  width: 65px;
  height: 65px;
  object-fit: contain;
  pointer-events: none;
  transition: filter .18s ease;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.role-peek-button:hover img { filter: brightness(1.18); }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.facility-panel { min-height: 0; padding: clamp(10px, 1.6vw, 24px); overflow-y: auto; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); letter-spacing: -.04em; }
.game-screen:not(.night) .section-heading .eyebrow { color: #765680; }

.alive-count {
  flex: none;
  padding: 8px 12px;
  border: 1px solid rgba(128, 88, 138, .25);
  border-radius: 20px;
  color: #80608d;
  font-size: .76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.night .alive-count { color: #b697c7; border-color: #42325b; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 18px;
}

.cat-card {
  position: relative;
  min-width: 0;
  padding: 19px 14px 15px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 18px;
  color: #281b37;
  background: rgba(255, 250, 240, .8);
  box-shadow: 0 9px 25px rgba(46, 30, 58, .08);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}

.cat-card::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% 20%;
  height: 100px;
  border-radius: 50%;
  background: rgba(116, 70, 132, .08);
}

.night .cat-card { color: #eee4f4; background: #20163b; box-shadow: none; }
.cat-card:hover:not(:disabled) { transform: translateY(-4px); border-color: #a56abd; }
.cat-card.selected { border-color: #9254aa; box-shadow: 0 0 0 4px rgba(146,84,170,.12); }
.cat-card:disabled { cursor: default; }
.cat-card.dead { opacity: .36; filter: grayscale(1); }
.cat-card.dead::after { content: "OUT"; position: absolute; top: 15px; right: 12px; color: var(--danger); font-size: .67rem; font-weight: 900; letter-spacing: .12em; }
.cat-card.you { border-style: dashed; }

.cat-avatar { display: block; width: min(100%, 130px); aspect-ratio: 1; margin: 0 auto 9px; object-fit: contain; }
.cat-name { position: relative; display: block; overflow: hidden; font-family: "Fredoka", sans-serif; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.cat-room { position: relative; display: block; margin-top: 2px; color: #8c7b91; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.you-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: 10px;
  color: #fff;
  background: #7c438f;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.action-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 34px 28px 28px;
  color: #ede4f3;
  background: #1d1238;
  border-left: 3px solid var(--button-outline);
}

#action-content { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.action-panel h3 { margin: 3px 0 7px; font-size: 1.65rem; line-height: 1.05; }
.action-copy { margin: 0 0 22px; color: #ad9bb9; font-size: .9rem; line-height: 1.5; }
.action-button { margin-top: 18px; }

.log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 180px;
  max-height: 50vh;
  padding-right: 5px;
  overflow-y: auto;
}

.log-entry {
  padding: 11px 12px;
  border-left: 3px solid #68427b;
  border-radius: 0 9px 9px 0;
  color: #cbbfd3;
  background: rgba(255,255,255,.04);
  font-size: .81rem;
  line-height: 1.42;
  animation: slide .3s ease both;
}

.log-entry.preserved-log-entry { animation: none; }

.log-entry strong { color: #f4eaf7; }
.log-entry.system { border-left-color: #b679c4; color: #e6d6ec; }
.log-entry.danger { border-left-color: var(--danger); }
.log-entry.death-role-reveal,
.log-entry.vote-role-reveal { border-left-color: #454545; color: #c8c4cb; }
.log-entry.alive-role-reveal { border-left-color: #88A57E; color: #88A57E; }
.log-entry.alive-role-reveal strong { color: #88A57E; }
.timer-note { margin-top: auto; padding-top: 18px; color: #766786; font-size: .72rem; text-align: center; }

.secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.secondary-button {
  padding: 12px 10px;
  border: 1px solid #4b3965;
  border-radius: 10px;
  color: #c9bad4;
  background: rgba(255,255,255,.035);
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
}

.secondary-button:hover, .secondary-button.selected { color: #fff; border-color: #9a5cb0; background: rgba(154,92,176,.18); }
.secondary-button.guilty:hover, .secondary-button.guilty.selected { border-color: #c85e6a; background: rgba(200,94,106,.16); }
.secondary-button:disabled { opacity: .4; cursor: default; }

.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9,4,22,.78); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(360px, 100%); padding: 28px; border: 1px solid #543b73; border-radius: 22px; color: var(--cream); background: #211340; box-shadow: 0 26px 80px rgba(0,0,0,.4); text-align: center; animation: reveal .25s ease both; -webkit-user-select: none; user-select: none; }
.modal-card img { width: 120px; height: 120px; object-fit: contain; -webkit-user-drag: none; user-drag: none; }
.modal-card h2 { margin: 3px 0 10px; font-size: 2rem; }
.modal-card p:last-child { margin-bottom: 0; color: #bcaec8; line-height: 1.5; }
.modal-close { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #704d84; border-radius: 50%; color: #f4eaf7; background: #342054; font-size: 1.25rem; line-height: 1; cursor: pointer; }

.catipedia-button {
  position: absolute;
  z-index: 15;
  left: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #704d84;
  border-radius: 50%;
  color: #f4eaf7;
  background: #342054;
  box-shadow: 0 4px 0 #20133f, 0 10px 24px rgba(10, 5, 24, .28);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.catipedia-button:hover {
  transform: translateY(-2px);
  background: #45286d;
  box-shadow: 0 6px 0 #20133f, 0 14px 28px rgba(10, 5, 24, .32);
}

.catipedia-button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #20133f;
}

.catipedia-button img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transform: rotate(45deg);
}

.fire-ability-button {
  position: absolute;
  z-index: 15;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid #e47a33;
  border-radius: 50%;
  background: #4a1f22;
  box-shadow: 0 4px 0 #20133f, 0 10px 24px rgba(10, 5, 24, .28);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.fire-ability-button img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
}

.fire-ability-button:hover:not(:disabled) { transform: translateY(-2px); background: #6a2d25; }
.fire-ability-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #20133f; }
.fire-ability-button:disabled { opacity: .45; cursor: default; }
.fire-ability-button.active {
  border-color: #ffb347;
  background: #7c211d;
  animation: fire-ability-pulse 1.35s ease-in-out infinite;
}

.fire-ability-count {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 2px solid #ffb347;
  border-radius: 50%;
  color: #fff4df;
  background: #8b2920;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 10px rgba(255, 106, 45, .75);
}

.fire-ability-count > span {
  display: block;
  line-height: 1;
  transform: translateY(1px);
}

.curious-kill-button {
  position: absolute;
  z-index: 15;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2px solid #a4e198;
  border-radius: 50%;
  background: #5eb34d;
  box-shadow: 0 4px 0 #20133f, 0 0 14px rgba(164, 225, 152, .72), inset 0 0 10px rgba(164, 225, 152, .42);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.curious-kill-button img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  pointer-events: none;
}

.curious-kill-button:hover:not(:disabled) { transform: translateY(-2px); background: #6bc65b; }
.curious-kill-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #20133f; }
.curious-kill-button:disabled { opacity: .38; cursor: default; }
.curious-kill-button.active {
  background: #5eb34d;
  animation: curious-kill-pulse 1.35s ease-in-out infinite;
}

.sly-ability-button {
  --sly-target-width: 60px;
  --sly-target-size: 12px;
  --sly-target-gap: 5px;
  position: absolute;
  z-index: 15;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid #a56abd;
  border-radius: 50%;
  background: #2c1a56;
  box-shadow: 0 4px 0 #20133f, 0 10px 24px rgba(10,5,24,.28);
  cursor: pointer;
}

.sly-ability-button:hover { background: #3a246c; }
.sly-ability-button.active { border-color: #ccc78e; box-shadow: 0 0 18px rgba(204,199,142,.55); }
.sly-ability-button img { width: 45px; height: 45px; object-fit: contain; pointer-events: none; }
.sly-target-label {
  position: absolute;
  bottom: calc(100% + var(--sly-target-gap));
  left: 50%;
  width: var(--sly-target-width);
  height: var(--sly-target-size);
  overflow: visible;
  color: #fff7df;
  font-size: var(--sly-target-size);
  font-weight: 900;
  line-height: var(--sly-target-size);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

@keyframes fire-ability-pulse {
  0%, 100% { box-shadow: 0 4px 0 #20133f, 0 0 9px rgba(255, 106, 45, .5), inset 0 0 7px rgba(255, 44, 27, .45); }
  50% { box-shadow: 0 4px 0 #20133f, 0 0 23px rgba(255, 153, 45, .95), inset 0 0 18px rgba(255, 44, 27, .9); }
}

@keyframes curious-kill-pulse {
  0%, 100% { box-shadow: 0 4px 0 #20133f, 0 0 12px rgba(164, 225, 152, .68), inset 0 0 9px rgba(164, 225, 152, .5); }
  50% { box-shadow: 0 4px 0 #20133f, 0 0 28px rgba(164, 225, 152, 1), inset 0 0 18px rgba(164, 225, 152, .88); }
}

.catipedia-modal {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: none;
  padding: 24px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.catipedia-modal.open { display: block; }

.catipedia-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 4, 22, .9);
  backdrop-filter: blur(8px);
}

.catipedia-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 30px 24px 42px;
  overflow-y: auto;
  border: 1px solid #543b73;
  border-radius: 24px;
  color: var(--cream);
  background: radial-gradient(circle at 50% 16%, #3c226b, var(--menu) 58%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .48);
  text-align: center;
}

.catipedia-dialog > h2 {
  margin: 0 0 28px;
  font-size: clamp(2.7rem, 7vw, 5rem);
  letter-spacing: -.04em;
}

.catipedia-close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #704d84;
  border-radius: 50%;
  color: #f4eaf7;
  background: #342054;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.catipedia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 470px));
  justify-content: center;
  gap: 24px;
}

.catipedia-filter-button {
  position: absolute;
  z-index: 4;
  left: 10px;
  top: 10px;
  width: 85px;
  min-width: 85px;
  height: 35px;
}

.customization-grid {
  position: relative;
  display: grid;
  flex: 1 1 170px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 170px;
}

#customization-modal .catipedia-dialog {
  display: flex;
  flex-direction: column;
}

.customization-character {
  grid-column: 3;
  align-self: center;
  justify-self: center;
  padding-top: 0;
}

#customization-modal .customization-character .role-art-wrap {
  margin: 0 auto;
}

#customization-modal .customization-cat-menu {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  display: flex;
  flex: 0 1 523px;
  height: auto;
  min-height: 240px;
  max-height: 523px;
  margin: 45px auto 0;
  overflow: visible;
  transform: none;
}

#customization-modal .night-player-menu-list {
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  align-content: start;
  min-height: 0;
  max-height: none;
  padding-block: 2px;
  overflow-y: auto;
  scroll-padding-block: 2px;
}

.customization-color-picker {
  --picker-handle-color: #c3ca8c;
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + 30px);
  width: 22em;
  height: 20em;
  box-sizing: border-box;
  border: .1em solid rgba(204,177,218,.34);
  border-radius: 1.2em;
  background: rgba(19,11,36,.93);
  box-shadow: 0 1em 2.4em rgba(0,0,0,.32);
  font-size: 10px;
  transform: translateX(-50%);
}

.customization-color-picker[hidden] {
  display: none;
}

.customization-color-close {
  position: absolute;
  z-index: 2;
  top: .5em;
  right: .5em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: .1em solid var(--button-outline);
  border-radius: 50%;
  color: var(--cream);
  background: rgba(19,11,36,.93);
  font-family: inherit;
  font-size: 1em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.customization-color-wheel {
  position: absolute;
  top: 1em;
  left: 3em;
  width: 18em;
  height: 18em;
  box-sizing: border-box;
  overflow: hidden;
  border: .2em solid var(--button-outline);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 48%, rgba(0,0,0,.28) 100%),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: crosshair;
  touch-action: none;
}

.customization-color-wheel::before,
.customization-color-wheel::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.customization-color-wheel::before {
  background: #fff;
  opacity: var(--brightness-white, 0);
}

.customization-color-wheel::after {
  background: #000;
  opacity: var(--brightness-black, 0);
}

.customization-brightness-slider {
  position: absolute;
  top: 1em;
  left: 1em;
  width: 2em;
  height: 18em;
  box-sizing: border-box;
  overflow: hidden;
  border: .2em solid var(--button-outline);
  border-radius: 1.2em;
  background: linear-gradient(to bottom, #fff 0%, #777 50%, #000 100%);
  cursor: ns-resize;
  touch-action: none;
}

.customization-brightness-handle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  border: .1em solid #000;
  border-radius: 50%;
  background: var(--picker-handle-color);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.customization-color-cursor {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 1em;
  height: 1em;
  box-sizing: content-box;
  border: .1em solid #000;
  border-radius: 50%;
  background: var(--picker-handle-color);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.customization-folder-tab {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - 1px);
  width: 75px;
  height: 35px;
  padding: 0 5px;
  border: 2px solid var(--button-outline);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: var(--cream);
  background: rgba(19, 11, 36, .93);
  font-family: inherit;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.05;
  cursor: pointer;
}

.customization-folder-tab::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -3px;
  left: -2px;
  height: 4px;
  background: rgba(19, 11, 36, .93);
  pointer-events: none;
}

.customization-folder-tab:hover,
.customization-folder-tab.selected {
  border-color: #a56abd;
  background: rgba(19, 11, 36, .93);
}

.role-skins-tab { left: 15px; }
.extra-skins-tab { left: 105px; }
.cosmetics-tab { right: 15px; }

@media (max-width: 900px) {
  .customization-grid { grid-template-columns: 1fr; }
  .customization-character { grid-column: 1; }
  #customization-modal .night-player-menu-list {
    grid-template-columns: repeat(5, minmax(86px, 1fr));
  }
  #customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
    grid-template-columns: repeat(5, minmax(86px, 1fr));
  }
}

@media (max-width: 620px) {
  #customization-modal .night-player-menu-list {
    grid-template-columns: repeat(2, minmax(86px, 1fr));
  }
  #customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
    grid-template-columns: repeat(2, minmax(86px, 1fr));
  }
}

.catipedia-role-card {
  width: 100%;
  color: var(--cream);
}

.catipedia-role-art {
  position: relative;
  z-index: 1;
  width: 142px;
  height: 142px;
  object-fit: contain;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .24));
}

.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; padding: 11px 18px; border: 1px solid #725087; border-radius: 30px; color: #f6edf8; background: #241541; box-shadow: 0 10px 35px rgba(0,0,0,.3); font-size: .82rem; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.end-mark { width: 86px; height: 86px; margin: 8px auto 20px; opacity: .85; }
.result-line { margin: 10px 0 4px; color: #c8b6d2; text-align: center; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes reveal { from { opacity: 0; transform: scale(.94) translateY(12px); } }
@keyframes slide { from { opacity: 0; transform: translateX(7px); } }
@keyframes float { 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .55; } }
@keyframes countdown { to { transform: scaleX(0); } }
@keyframes corridor-in { from { opacity: 0; transform: scale(1.08); filter: blur(8px); } }
@keyframes shadow-reveal { from { opacity: 0; transform: translateX(-50%) rotate(-4deg) scale(.7); } }
@keyframes cat-enter-left { from { opacity: 0; transform: translateX(-80px) rotate(8deg); } }
@keyframes cat-enter-right { from { opacity: 0; transform: translateX(80px) rotate(-8deg) scaleX(-1); } }
@keyframes alarm { 50% { opacity: .4; } }
@keyframes reveal-copy { from { opacity: 0; transform: translateY(18px); } }
@keyframes timer-pulse { 50% { transform: scale(1.05); } }

@media (max-width: 900px) {
  .game-screen { height: auto; overflow: visible; }
  .game-layout { grid-template-columns: 1fr; overflow: visible; }
  .facility-panel { overflow: visible; }
  .action-panel { min-height: 390px; border-top: 3px solid var(--button-outline); border-left: 0; }
  .cat-grid { grid-template-columns: repeat(4, minmax(100px, 1fr)); }
  .log { max-height: 260px; }
}

@media (max-width: 620px) {
  .topbar { grid-template-columns: 1fr auto; }
  .brand-lockup { display: none; }
  .phase-block { grid-column: 1; }
  .icon-button { grid-column: 2; }
  .facility-panel { padding: 25px 16px 30px; }
  .cat-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 11px; }
  .cat-card { padding: 12px 10px; }
  .cat-avatar { max-width: 105px; }
  .action-panel { padding: 28px 20px 22px; }
  .section-heading { align-items: flex-start; }
  .role-card { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Offline-only additions: no web fonts or third-party UI dependencies. */
body {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

h1, h2, h3,
.cat-name {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
}

/* Role reveal starts one quarter of the viewport down from the top. */
.role-screen {
  padding-top: 25vh;
  padding-bottom: 34px;
}

.day-chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

.day-chat input {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #4b3965;
  border-radius: 10px;
  outline: none;
  color: #f4eaf7;
  background: rgba(255,255,255,.055);
  font: inherit;
}

.day-chat input:focus { border-color: #a56abd; }
.day-chat input::placeholder { color: #7f708d; }
.day-chat button {
  padding: 0 15px;
  border: 1px solid #704d84;
  border-radius: 10px;
  color: #f4eaf7;
  background: #342054;
  font-weight: 800;
  cursor: pointer;
}

.log-entry.pack { border-left-color: #d85f68; background: rgba(216,95,104,.08); }

.special-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(9,4,22,.86);
  backdrop-filter: blur(7px);
  -webkit-user-select: none;
  user-select: none;
}

.special-overlay.open { display: grid; }

.special-card-stage,
.role-modal-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--popup-stage-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.special-card-stage { width: 420px; }
.role-modal-stage { width: 360px; }

.special-card {
  width: 100%;
  max-width: none;
  padding: 28px;
  border: 1px solid #644479;
  border-radius: 24px;
  color: var(--cream);
  background: #211340;
  box-shadow: 0 28px 90px rgba(0,0,0,.5);
  text-align: center;
  animation: reveal .22s ease both;
}

#role-modal .modal-card {
  width: 100%;
  max-width: none;
}

.special-card > img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.special-card h2 { margin: 0 0 10px; font-size: 2rem; }
.dead-role-card .ability-chip { margin: 0 0 22px; }
.special-card p:not(.eyebrow) { margin: 0 0 22px; color: #c5b7cf; line-height: 1.5; }
.special-card.dead-role-card p.role-team { margin: 0 0 18px; color: #bd87d0; font-weight: 800; }

.fake-reveal {
  z-index: 100;
  background: #08050e;
}

.fake-reveal-stage {
  width: min(520px, 100%);
  color: var(--cream);
  text-align: center;
}

.fake-reveal-stage img {
  display: block;
  width: min(360px, 76vw);
  height: min(360px, 76vw);
  margin: 0 auto 14px;
  object-fit: contain;
  image-rendering: auto;
}

.fake-reveal-stage h2 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4rem);
}

.fake-reveal-stage p:last-child {
  margin-top: 6px;
  color: #c9b9d4;
  font-weight: 800;
}



/* Keep every scroll area usable while hiding the visual scrollbar. */
html, body, * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Game art is presentation, not draggable page content. */
img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Matchmaking and pre-game lobby. */
.matchmaking-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 35%, rgba(126, 57, 143, .28), transparent 42%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--menu);
  background-size: auto, 44px 44px, 44px 44px, auto;
  -webkit-user-select: none;
  user-select: none;
}

#matchmaking-screen.active {
  position: fixed;
  inset: 0;
}

.matchmaking-back-button {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #704d84;
  border-radius: 50%;
  color: #f4eaf7;
  background: #342054;
  font-size: 15.84px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.matchmaking-back-button:hover { background: #452a68; }

.matchmaking-card {
  position: relative;
  width: min(520px, 100%);
  padding: 42px 34px;
  border: 1px solid rgba(194, 153, 216, .18);
  border-radius: 26px;
  background: rgba(18, 10, 40, .58);
  box-shadow: 0 28px 80px rgba(9, 4, 23, .42);
  text-align: center;
}

.matchmaking-card h2 { margin: 0 0 25px; font-size: clamp(2.1rem, 6vw, 3.4rem); }

.settings-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: none;
  place-items: center;
  padding: 24px;
  -webkit-user-select: none;
  user-select: none;
}

.settings-modal.open { display: grid; }

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9,4,22,.78);
  backdrop-filter: blur(8px);
}

.settings-card {
  z-index: 1;
  width: min(520px, 100%);
  height: 500px;
  padding: 42px 34px;
  overflow: hidden;
  color: var(--cream);
  transform: scale(var(--settings-scale, 1));
  transform-origin: center;
}

.settings-view { height: 100%; }
.settings-view[hidden], .credits-view[hidden] { display: none; }

.settings-close {
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.25rem;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 20px;
}

.settings-footer-button {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  min-width: 120px;
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #553b75;
  border-radius: 11px;
  color: #eadff0;
  background: rgba(21,12,45,.9);
  font-size: .864rem;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
}

.settings-footer-button:hover,
.settings-footer-button:focus-visible,
.credit-link:hover,
.credit-link:focus-visible {
  color: #fff;
  border-color: #a56abd;
  background: rgba(165,106,189,.17);
}

.credits-view {
  position: absolute;
  inset: 0;
  padding: 30px 30px 54px;
}

.credits-view h2 {
  margin: 0 0 20px;
  color: var(--cream);
  font-family: "Fredoka", sans-serif;
  font-size: 4.94rem;
  font-weight: 700;
  line-height: .8;
  letter-spacing: .075em;
}

.credits-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.credits-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.credit-link {
  display: grid;
  place-items: center;
  width: 144px;
  min-height: 34px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid #553b75;
  border-radius: 11px;
  color: #eadff0;
  background: rgba(21,12,45,.9);
  font-size: .864rem;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 30px;
  color: var(--cream);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.settings-option > span {
  width: 108px;
  text-align: right;
}

.settings-option > .settings-slider {
  position: relative;
  display: block;
  width: 160px;
  height: 30px;
}

.settings-slider::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: #ccc78e;
  box-shadow: inset 0 1px 3px rgba(52,43,25,.38), 0 0 9px rgba(204,199,142,.2);
  pointer-events: none;
}

.settings-option input[type="range"] {
  position: relative;
  z-index: 1;
  width: 160px;
  height: 30px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.settings-option input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border: 0;
  background: transparent;
}

.settings-option input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #514923;
  border-radius: 50%;
  background: #f7efd9;
  box-shadow: 0 2px 7px rgba(0,0,0,.38);
}

.settings-option input[type="range"]::-moz-range-track {
  height: 10px;
  border: 0;
  background: transparent;
}

.settings-option input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #514923;
  border-radius: 50%;
  background: #f7efd9;
  box-shadow: 0 2px 7px rgba(0,0,0,.38);
}

.matchmaking-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 20px;
}

.mode-choice {
  width: min(300px, 100%);
  height: 60px;
  min-height: 60px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 1.05rem;
  justify-content: center;
  text-align: center;
}

/* Matchmaking briefly disables these buttons while the room request is sent.
   Keep the normal pointer so the browser does not flash its prohibited/X cursor. */
.mode-choice:disabled { cursor: pointer; }

.room-code-input {
  width: min(300px, 100%);
  height: 60px;
  padding: 0 16px;
  border: 1px solid #4b3965;
  border-radius: 9px;
  outline: none;
  color: #f5edf8;
  background: #190f31;
  font: 700 1.02rem "Nunito", system-ui, sans-serif;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

#matchmaking-screen .matchmaking-card {
  width: min(520px, calc(100vw - 32px));
  padding-inline: clamp(18px, 5vw, 34px);
}

#matchmaking-screen {
  padding: clamp(8px, 3dvh, 24px);
}

#matchmaking-screen .matchmaking-card {
  padding-block: clamp(18px, 5dvh, 42px);
}

#matchmaking-screen .eyebrow {
  margin-bottom: clamp(3px, 1.3dvh, 12px);
  font-size: clamp(.58rem, 1.7dvh, .72rem);
}

#matchmaking-screen .matchmaking-card h2 {
  margin-bottom: clamp(10px, 3dvh, 25px);
  font-size: clamp(1.8rem, 9dvh, 3.4rem);
}

#matchmaking-screen .matchmaking-options {
  gap: clamp(8px, 2.5dvh, 20px);
}

#matchmaking-screen .mode-choice,
#matchmaking-screen .room-code-input {
  height: clamp(42px, 11dvh, 60px);
  min-height: clamp(42px, 11dvh, 60px);
}

body.matchmaking-controls-layout .menu-settings {
  top: max(clamp(8px, 2dvh, 15px), env(safe-area-inset-top));
  left: max(clamp(8px, 2dvh, 15px), env(safe-area-inset-left));
  width: clamp(48px, 12dvh, 100px);
  height: clamp(48px, 12dvh, 100px);
}

.room-code-input::placeholder { color: #8d7b9b; opacity: 1; }
.room-code-input:focus { border-color: #a56abd; box-shadow: 0 0 0 3px rgba(165,106,189,.15); }

.lobby-screen {
  align-items: stretch;
  padding: 20px;
  color: var(--cream);
  background: #130b29;
  -webkit-user-select: none;
  user-select: none;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) minmax(260px, 340px);
  gap: 14px;
  width: min(1534px, 100%);
  height: calc(100vh - 40px);
  min-height: 680px;
  margin: auto;
}

.lobby-player-container {
  position: relative;
  min-height: 0;
  padding: 64px 24px 70px;
  overflow: hidden;
  border: 2px solid #20133f;
  border-radius: 18px;
  background:
    linear-gradient(rgba(35,19,73,.8), rgba(25,14,52,.92)),
    url("Facility.png") center / cover no-repeat;
  box-shadow: inset 0 0 70px rgba(0,0,0,.28), 0 20px 50px rgba(0,0,0,.22);
}

.lobby-code {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid #553b75;
  border-radius: 9px;
  color: #eadff0;
  background: rgba(21,12,45,.9);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
}

#lobby-code {
  font-family: inherit;
  cursor: pointer;
}

#lobby-code:hover,
#lobby-code:focus-visible {
  border-color: #9a5cb0;
  background: #35205e;
}

.lobby-countdown {
  position: absolute;
  z-index: 6;
  top: 5px;
  left: 50%;
  min-width: 156px;
  padding: 8px 12px;
  border: 1px solid #6d4a8a;
  border-radius: 9px;
  color: #f5ebf7;
  background: rgba(21,12,45,.94);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-align: center;
  transform: translateX(-50%);
}

.lobby-countdown.paused { color: #c5b5cf; border-color: #594568; }
.lobby-countdown[hidden], .lobby-bot-controls[hidden], .lobby-start-button[hidden] { display: none !important; }

.lobby-bot-controls {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  display: flex;
  gap: 5px;
}

.lobby-small-button {
  min-width: 76px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #553b75;
  border-radius: 8px;
  color: #eee4f3;
  background: #2c1a56;
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.lobby-small-button:hover:not(:disabled) { background: #3b2469; }
.lobby-small-button:disabled { opacity: .35; cursor: default; }
.lobby-small-button[hidden] { display: none !important; }

.lobby-player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  grid-auto-rows: 100px;
  align-content: start;
  gap: 8px 16px;
  min-height: 560px;
}

.lobby-player {
  min-width: 0;
  text-align: center;
}

.lobby-cat-appearance {
  width: min(100%, 68px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
  filter: drop-shadow(0 13px 12px rgba(0,0,0,.34));
}

.lobby-customize-cat {
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.lobby-customize-cat:hover .lobby-cat-appearance,
.lobby-customize-cat:focus-visible .lobby-cat-appearance {
  filter: drop-shadow(0 0 9px rgba(245, 225, 255, .95));
}

.lobby-player-name {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  min-height: 23px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #f5ebf7;
  background: rgba(18,10,39,.74);
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 700;
}

button.lobby-player-name { cursor: pointer; }
.lobby-player-name .kick-label { display: none; color: #ff9da5; font-size: 1rem; font-weight: 900; }
button.lobby-player-name:hover { border-color: #a84c5f; background: #3a172b; }
button.lobby-player-name:hover .name-label { display: none; }
button.lobby-player-name:hover .kick-label { display: inline; }

.lobby-start-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 118px;
  min-height: 42px;
  padding: 9px 14px;
  z-index: 5;
}

.lobby-back-button {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 118px;
  min-height: 42px;
  padding: 9px 14px;
  z-index: 5;
}

.lobby-catipedia-button {
  left: 10px;
  bottom: 10px;
  display: none;
}

.lobby-role-panel,
.lobby-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 2px solid #20133f;
  border-radius: 18px;
  background: #1d1238;
}

.lobby-chat-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #3d2b59; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #73b691; box-shadow: 0 0 8px #73b691; }

.lobby-role-panel {
  position: relative;
  width: 70%;
  overflow: visible;
  justify-self: end;
  text-align: center;
}
.lobby-role-heading { justify-content: center; }

.lobby-role-placeholders {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 0;
  margin-top: 10px;
  overflow-y: auto;
}

.lobby-role-row {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 20px max-content 20px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
}

.lobby-role-row[hidden] { display: none; }
.lobby-role-row::after { grid-column: 3; width: 20px; content: ""; }

.lobby-role-edit {
  grid-column: 1;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #553b75;
  border-radius: 50%;
  color: #eadff0;
  background: #2c1a56;
  font-family: inherit;
  font-size: .62rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.lobby-role-edit:hover:not(:disabled) {
  border-color: #a56abd;
  background: rgba(165,106,189,.17);
}

.lobby-role-edit[hidden] { display: none; }
.lobby-role-edit:disabled { opacity: .38; cursor: default; }

.lobby-role-code {
  position: static;
  grid-column: 2;
  flex: 0 0 auto;
  width: max-content;
  text-align: center;
}

.lobby-role-code::after {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  content: "blehblehbleh cat";
}

.lobby-role-picker {
  position: absolute;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: clamp(1px, min(.2vw, .35dvh), 3px);
  width: min(84%, 200px);
  min-width: 0;
  height: auto;
  padding: clamp(2px, min(.26vw, .46dvh), 4px);
  overflow: hidden;
  border: 1px solid rgba(204,177,218,.34);
  border-radius: clamp(6px, min(.78vw, 1.39dvh), 12px);
  background: rgba(19,11,36,.93);
  box-shadow: 0 clamp(5px, min(.65vw, 1.16dvh), 10px) clamp(12px, min(1.56vw, 2.78dvh), 24px) rgba(0,0,0,.32);
}

.lobby-role-picker[hidden] { display: none; }
.lobby-role-picker.one-column { grid-template-columns: minmax(0, 1fr); }

.lobby-role-picker button {
  width: 100%;
  min-height: clamp(12px, min(1.83vw, 3.24dvh), 28px);
  padding: clamp(2px, min(.2vw, .35dvh), 3px) 1px;
  border: 1px solid #553b75;
  border-radius: clamp(4px, min(.46vw, .81dvh), 7px);
  color: #eadff0;
  background: rgba(21,12,45,.9);
  font-family: inherit;
  font-size: clamp(.34rem, min(.75vw, 1.55dvh), .72rem);
  font-weight: 900;
  line-height: 1.05;
  cursor: pointer;
}

.lobby-role-picker button:hover,
.lobby-role-picker button:focus-visible {
  color: #fff;
  border-color: #a56abd;
  background: rgba(165,106,189,.17);
}

.lobby-chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 16px 3px;
  overflow-y: auto;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.lobby-chat-message { color: #cbbfd3; font-size: .82rem; line-height: 1.4; }
.lobby-chat-message strong { color: #f5ebf7; }
.lobby-chat-message.system { color: #8f7d9d; font-style: italic; }
.lobby-chat-form { margin-top: auto; }
.lobby-chat-form input { -webkit-user-select: text; user-select: text; }

@media (max-width: 1100px) {
  .lobby-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "main main" "roles chat";
    height: auto;
  }
  .lobby-player-container { grid-area: main; }
  .lobby-role-panel { grid-area: roles; height: 360px; min-height: 0; }
  .lobby-chat-panel { grid-area: chat; height: 360px; min-height: 0; }
  .lobby-player-container { min-height: 720px; }
}

@media (max-width: 620px) {
  .lobby-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "roles" "chat";
  }
}

@media (max-width: 540px) {
  .lobby-screen { padding: 8px; }
  .lobby-player-container { min-height: 700px; padding: 64px 12px 70px; }
  .lobby-player-grid { grid-template-columns: repeat(4, minmax(62px, 1fr)); grid-auto-rows: 100px; gap: 8px 6px; }
  .lobby-cat-appearance { width: 58px; margin-bottom: 12px; }
  .lobby-small-button { min-width: 66px; padding-inline: 7px; font-size: .62rem; }
}

/* Facility common-room board built directly from the supplied Facility.png. */
.facility-panel {
  min-width: 0;
}

.facility-stage {
  --facility-cat-size: clamp(52px, 4.8vw, 82px);
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(45, 45, 45, .5);
  border-radius: 18px;
  background: #2d2d2d;
  box-shadow: 0 18px 44px rgba(30, 20, 36, .13);
  isolation: isolate;
}

.facility-map {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.facility-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .12);
}

.win-banner {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: min(1000px, 88%);
  height: auto;
  max-width: 88%;
  max-height: 72%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.facility-stage.is-night .facility-map {
  filter: brightness(.42) saturate(.7);
}

.facility-cat {
  position: absolute;
  z-index: 3;
  width: var(--facility-cat-size);
  height: var(--facility-cat-size);
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: #fff;
  background: transparent;
  cursor: default;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition:
    left 950ms cubic-bezier(.35,.04,.25,1),
    top 950ms cubic-bezier(.35,.04,.25,1),
    opacity 320ms ease,
    filter 180ms ease;
}

.facility-cat.targetable {
  cursor: pointer;
}

.facility-cat.inspectable-death {
  cursor: pointer;
}

.facility-cat.inspectable-death:hover .facility-death-appearance,
.facility-cat.inspectable-death:focus-visible .facility-death-appearance {
  filter: drop-shadow(0 0 9px rgba(245, 225, 255, .95));
}

.facility-cat.targetable:hover .facility-cat-sprite {
  filter: drop-shadow(0 0 9px rgba(245, 225, 255, .95));
  transform: scale(1.08);
}

.facility-cat.selected .facility-cat-sprite {
  filter: drop-shadow(0 0 11px rgba(215, 154, 239, 1));
  transform: scale(1.1);
}

.facility-cat.eliminated {
  filter: none;
}

.facility-stage.is-night .facility-cat.eliminated {
  filter: brightness(.42) saturate(.7);
}

.facility-cat-sprite {
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: 50% 75%;
  transition: transform .16s ease, filter .16s ease;
}

.facility-death-appearance {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.facility-death-appearance > img,
.facility-death-appearance > .cat-appearance,
.facility-death-appearance > .facility-tombstone-cat {
  grid-area: 1 / 1;
}

.facility-burn-death-art,
.facility-tombstone-art,
.facility-x-eyes {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.fallen-death {
  transform: rotate(30deg);
  transform-origin: 50% 65%;
}

.facility-fallen-cat,
.facility-x-eyes {
  width: 100%;
  height: 100%;
}

.facility-fallen-cat {
  z-index: 0;
  transform: translateZ(0);
  transform-origin: 50% 50%;
  transform-style: flat;
  backface-visibility: hidden;
}
.facility-x-eyes { z-index: 3; }
.facility-tombstone-art { z-index: 0; }

.facility-tombstone-cat {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 50%;
  display: block;
  width: 42%;
  height: 42%;
  transform: translateX(-50%);
}

.facility-tombstone-cat > .cat-appearance {
  width: 100%;
  height: 100%;
}

.facility-cat.walking .facility-cat-sprite {
  animation: facility-walk-bob .22s ease-in-out infinite alternate;
}

.facility-cat.verdict-convicted-exit {
  z-index: 130;
  animation: verdict-convicted-spin-out 5s linear forwards !important;
}

.facility-cat .voted-out-death {
  visibility: hidden;
}

@keyframes verdict-convicted-spin-out {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to { transform: translate(-50%, -50%) rotate(100deg) scale(0); }
}

.facility-cat-labels {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 15px);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  transform: translateX(-50%);
}

.facility-vote-count {
  color: #a6a6a6;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.facility-cat-name {
  position: static;
  max-width: 150px;
  padding: 2px 6px;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  background: rgba(20, 20, 20, .62);
  font-size: clamp(.58rem, .82vw, .76rem);
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  pointer-events: none;
}

.facility-you-badge {
  position: absolute;
  z-index: 5;
  top: -8px;
  right: -11px;
  padding: 2px 5px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 8px;
  color: #fff;
  background: #6c387f;
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .06em;
  pointer-events: none;
}

.night-target-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  max-height: 245px;
  overflow-y: auto;
}

.night-target {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #4b3965;
  border-radius: 10px;
  color: #cdbfd6;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.night-target img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  pointer-events: none;
}

.night-target span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-target:hover:not(:disabled),
.night-target.selected {
  color: #fff;
  border-color: #a56abd;
  background: rgba(165,106,189,.16);
}

.night-target:disabled {
  opacity: .4;
  cursor: default;
}

@keyframes facility-walk-bob {
  from { transform: translateY(0) rotate(-2deg); }
  to { transform: translateY(-5px) rotate(2deg); }
}

@media (max-width: 900px) {
  .facility-stage {
    --facility-cat-size: clamp(42px, 8vw, 68px);
    border-radius: 14px;
  }
}

@media (max-width: 620px) {
  .facility-stage {
    --facility-cat-size: clamp(32px, 9vw, 52px);
    border-radius: 10px;
  }

  .facility-cat-name {
    max-width: 90px;
    font-size: .52rem;
  }

  .facility-cat-labels { bottom: calc(100% + 20px); }

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

.facility-cat:disabled {
  opacity: 1;
}


/* v8 presentation pass: keep the larger board, restore the chat panel background, and keep top-left branding hidden. */
.brand-lockup { display: none; }
.topbar .phase-block { grid-column: 2; justify-self: center; }
.topbar .icon-button { grid-column: 3; }

@media (max-width: 980px) {
  .facility-panel { padding: 10px; }
}

/* Main-menu username field intentionally reuses the exact in-game chat input styling. */
.menu-username {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}

.menu-username input {
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}

.menu-cat-button {
  display: grid;
  place-items: center;
  position: fixed;
  z-index: 5;
  top: 15px;
  right: 15px;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transform: none;
}

.menu-cat-button:hover,
.menu-cat-button:active {
  transform: none;
}

.menu-cat-button img {
  display: block;
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  transition: filter .18s ease;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.menu-cat-button:hover img {
  filter: brightness(1.18);
}

.menu-cat-appearance {
  width: 100px;
  height: 100px;
}

/* Keep the full main menu inside the viewport with continuous, breakpoint-free scaling. */
#menu-screen {
  padding: clamp(8px, 4.5dvh, 40px) 20px max(clamp(30px, 4.5dvh, 40px), env(safe-area-inset-bottom));
}

#menu-screen .eyebrow {
  margin-bottom: clamp(3px, 1.3dvh, 12px);
  font-size: clamp(.58rem, 1.7dvh, .72rem);
}

#menu-screen .menu-cat {
  width: clamp(64px, 18dvh, 122px);
  height: clamp(64px, 18dvh, 122px);
}

#menu-screen h1 {
  margin: clamp(0px, .7dvh, 4px) 0 clamp(4px, 1.6dvh, 14px);
  font-size: clamp(2.65rem, min(19vw, 13dvh), 6.5rem);
  line-height: .72;
}

#menu-screen .tagline {
  margin: clamp(6px, 3dvh, 24px) auto clamp(6px, 3.5dvh, 28px);
  font-size: clamp(.78rem, 2.3dvh, 1.02rem);
  line-height: 1.3;
}

#menu-screen .primary-button {
  padding: clamp(9px, 2dvh, 17px) 18px;
}

#menu-screen .player-count {
  margin-top: clamp(6px, 1.8dvh, 22px);
  font-size: clamp(.62rem, 1.8dvh, .78rem);
}

#menu-screen .menu-username {
  margin-top: clamp(4px, 1.3dvh, 10px);
}

#menu-screen .menu-username input {
  padding: clamp(7px, 1.8dvh, 12px) 12px;
  font-size: clamp(.85rem, 2.2dvh, 1rem);
  line-height: 1.2;
}

#menu-screen .legal-links {
  right: max(8px, env(safe-area-inset-right));
  bottom: max(5px, env(safe-area-inset-bottom));
  gap: clamp(8px, 2vw, 12px);
  font-size: clamp(.58rem, 1.8dvh, .68rem);
}

.game-screen .day-chat input {
  -webkit-user-select: text;
  user-select: text;
}

.room-code-input {
  -webkit-user-select: none;
  user-select: none;
}

/* v10: the main-menu username field keeps the chat-box styling without the purple focus highlight. */
.menu-username input:focus {
  border-color: #4b3965;
  box-shadow: none;
}

/* v13: the old bottom-right status/confirm control is no longer part of the gameplay UI. */
#confirm-action,
#secondary-actions {
  display: none !important;
}

/* Let the conversation/log shrink inside the panel and keep its own scrollbar. */
.action-panel {
  overflow: hidden;
}
#action-content {
  min-height: 0;
}

@media (min-width: 901px) {
  .log {
    max-height: none;
  }
}

/* Compact player-name bar. It lives in the unused upper-left corner of the map,
   away from the top and left bridge openings. Only names are shown. */
.player-bar {
  position: absolute;
  z-index: 8;
  top: 12px;
  left: 12px;
  transform: scale(1.5);
  transform-origin: top left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  max-width: 150px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(20,20,20,.64);
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
  pointer-events: none;
}

.player-bar-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 130px;
  min-width: 0;
}

.player-bar-cat {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  image-rendering: auto;
}

.player-bar-name {
  display: block;
  max-width: 109px;
  overflow: hidden;
  color: #fff;
  font-size: clamp(.58rem, .72vw, .72rem);
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

.player-bar-entry.eliminated {
  opacity: .42;
}

.player-bar-entry.eliminated .player-bar-name {
  text-decoration: line-through;
}

/* Live verdict controls sit exactly 10px below the supplied Facility.png center circle.
   The circle's bottom edge is y=718px on the 1152px source image = 62.33%. */
.verdict-controls {
  position: absolute;
  z-index: 12;
  top: calc(62.33% + 10px);
  left: 52.925%;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
  transform: translateX(-50%);
}

.verdict-button {
  min-width: 150px;
  padding: 24px 20px;
  border: 2px solid #4b3965;
  border-radius: 16px;
  color: #e8ddeb;
  background: rgba(29,18,56,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.verdict-button:hover {
  background: rgba(40,25,72,.96);
}

/* Verdict buttons stay fixed in place. Selection is shown only by the
   requested faction-colored outline. */
.verdict-button.guilty.selected {
  border-color: #e05663;
  box-shadow: 0 0 0 2px rgba(224,86,99,.32), 0 8px 24px rgba(0,0,0,.24);
}

.verdict-button.innocent.selected {
  border-color: #55bd78;
  box-shadow: 0 0 0 2px rgba(85,189,120,.3), 0 8px 24px rgba(0,0,0,.24);
}

/* Night roles choose from an actual popup menu over the empty facility.
   Every valid target shows the same public cat sprite plus that player's name. */
.night-player-menu {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  /* JS sets this to the width needed for the actual target count.
     Five cards is the maximum width; extra targets wrap. */
  width: min(var(--night-menu-width, 560px), 90%);
  max-height: 78%;
  padding: 14px;
  overflow-y: auto;
  border: 1px solid rgba(204,177,218,.34);
  border-radius: 18px;
  background: rgba(19,11,36,.93);
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
  transform: translate(-50%, -50%);
}

.night-player-menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

/* The live target picker uses fixed-width wrapped rows so every row is
   centered independently. A final row containing one or two cats therefore
   sits in the middle instead of occupying the leftmost grid columns. */
.facility-stage > .night-player-menu > .night-player-menu-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Keep the live target picker centered on the map itself at every scale.
   Side-panel width and wrapped target rows must never pull it to the left. */
.facility-stage > .night-player-menu {
  top: 50%;
  right: auto;
  bottom: auto;
  /* Facility.png's visual center is 52.925%, not the container midpoint. */
  left: 52.925%;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.facility-stage > .night-player-menu > .night-player-menu-list > .night-player-option {
  flex: 0 1 170px;
  width: 170px;
}

.night-player-option {
  position: relative;
  display: grid;
  grid-template-rows: 72px auto;
  place-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #4b3965;
  border-radius: 13px;
  color: #d4c5dc;
  background: rgba(255,255,255,.035);
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.customization-corner-circle {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  border: 1px solid #a56abd;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 48%, rgba(0,0,0,.28) 100%),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  pointer-events: auto;
}

.customization-cosmetic-thumbnail {
  width: 72px;
  height: 72px;
}

.night-player-option img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  pointer-events: none;
}

.night-player-option > span:not(.cat-appearance) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.night-target-cat {
  width: 72px;
  height: 72px;
}

.night-player-option:hover:not(:disabled),
.night-player-option.selected {
  color: #fff;
  border-color: #a56abd;
  background: rgba(165,106,189,.17);
}

.night-player-option:disabled {
  opacity: .38;
  cursor: default;
}

@media (max-width: 900px) {
  .player-bar {
    top: 8px;
    left: 8px;
    padding: 5px 7px;
  }

  .verdict-controls {
    grid-template-columns: repeat(2, minmax(112px, 1fr));
    gap: 8px;
  }

  .verdict-button {
    min-width: 112px;
    padding: 18px 14px;
    font-size: 1rem;
  }

  .night-player-menu {
    width: min(var(--night-menu-width, 560px), 82%);
  }
}

@media (max-width: 620px) {
  .player-bar {
    max-width: 108px;
  }

  .player-bar-name {
    max-width: 92px;
    font-size: .5rem;
  }

  .verdict-controls {
    top: calc(62.33% + 10px);
    grid-template-columns: repeat(2, minmax(86px, 1fr));
  }

  .verdict-button {
    min-width: 86px;
    padding: 13px 9px;
    border-radius: 11px;
    font-size: .78rem;
  }

  .night-player-menu {
    width: min(var(--night-menu-width, 560px), 84%);
    padding: 10px;
  }

  .night-player-menu-list {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  }

  .facility-stage > .night-player-menu > .night-player-menu-list > .night-player-option {
    flex-basis: 86px;
    width: 86px;
  }

  .night-player-option {
    grid-template-rows: 48px auto;
    padding: 7px 5px;
    font-size: .68rem;
  }

  .night-player-option img {
    width: 48px;
    height: 48px;
  }
}

/* Customization is the first screen using the responsive game scale. On a
   phone, collapse the unused preview-to-folder gap before reducing the cat or
   option cards. The folder becomes part of the normal vertical flow so it can
   use every remaining pixel without overlapping the preview. */
@media (max-width: 900px), (max-height: 700px) {
  #customization-modal {
    padding: 8px;
  }

  #customization-modal .catipedia-dialog {
    padding: 12px 8px 8px;
    overflow: hidden;
    border-radius: 16px;
  }

  #customization-modal .catipedia-dialog > h2 {
    flex: 0 0 auto;
    margin: 0 34px clamp(2px, 1vh, 10px);
    font-size: clamp(2rem, 8vmin, 3.4rem);
    line-height: 1;
  }

  #customization-modal .customization-grid {
    flex: 0 0 clamp(78px, 16vh, 128px);
    grid-template-columns: 1fr;
    min-height: 0;
  }

  #customization-modal .customization-character {
    grid-column: 1;
    align-self: center;
    padding-top: 0;
  }

  #customization-modal .customization-character .role-art-wrap {
    width: clamp(104px, 17vmin, 160px);
    height: clamp(74px, 13vmin, 108px);
    margin: 0 auto;
  }

  #customization-modal .customization-main-cat {
    width: clamp(70px, 12vmin, 100px);
    height: clamp(70px, 12vmin, 100px);
  }

  #customization-modal .customization-cat-menu {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    display: flex;
    flex: 1 1 auto;
    width: min(920px, calc(100% - 12px));
    min-height: 0;
    max-height: none;
    margin: 42px auto 0;
    padding: 10px;
    overflow: visible;
    transform: none;
  }

  #customization-modal .night-player-menu-list,
  #customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #customization-modal .night-player-option {
    grid-template-rows: clamp(60px, 13vh, 72px) auto;
    gap: clamp(4px, .86vh, 6px);
    padding: clamp(6px, 1.43vh, 10px) 8px;
  }

  #customization-modal .night-player-option img,
  #customization-modal .customization-cosmetic-thumbnail {
    width: clamp(60px, 13vh, 72px);
    height: clamp(60px, 13vh, 72px);
  }

}

/* A wide window should not jump to the phone layout when its height crosses
   700px. Match the desktop sizes at that boundary, then scale them gradually
   as the window gets shorter. The folder may shrink, but it never grows just
   to consume the newly available space. */
@media (min-width: 901px) and (max-height: 700px) {
  #customization-modal {
    padding: clamp(8px, calc(5.71vh - 16px), 24px);
  }

  #customization-modal .catipedia-dialog {
    padding:
      clamp(12px, calc(6.43vh - 15px), 30px)
      clamp(8px, calc(5.71vh - 16px), 24px)
      clamp(8px, calc(12.14vh - 43px), 42px);
    border-radius: clamp(16px, 3.43vh, 24px);
  }

  #customization-modal .catipedia-dialog > h2 {
    margin-bottom: clamp(2px, calc(9.29vh - 37px), 28px);
    font-size: clamp(2rem, 11.5vh, 5rem);
    line-height: 1.16;
  }

  #customization-modal .customization-grid {
    flex-basis: clamp(72px, 24vh, 170px);
  }

  #customization-modal .customization-character .role-art-wrap {
    width: clamp(108px, 31.43vh, 220px);
    height: clamp(72px, 24.29vh, 170px);
  }

  #customization-modal .customization-main-cat {
    width: clamp(68px, 20.29vh, 142px);
    height: clamp(68px, 20.29vh, 142px);
  }

  #customization-modal .customization-cat-menu {
    flex: 0 1 523px;
    margin-top: clamp(42px, 6.43vh, 45px);
  }
}

@media (max-width: 620px) {
  #customization-modal .customization-cat-menu {
    width: calc(100% - 8px);
    margin-top: 42px;
    padding: 8px;
    border-radius: 13px;
  }

  #customization-modal .night-player-menu-list,
  #customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #customization-modal .night-player-option {
    grid-template-rows: 44px auto;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 10px;
    font-size: .65rem;
  }

  #customization-modal .night-player-option img,
  #customization-modal .customization-cosmetic-thumbnail {
    width: 44px;
    height: 44px;
  }

  #customization-modal .customization-folder-tab {
    width: 70px;
    height: 32px;
    font-size: .62rem;
  }

  #customization-modal .role-skins-tab { left: 8px; }
  #customization-modal .extra-skins-tab { left: 84px; }
  #customization-modal .cosmetics-tab { right: 8px; }

  #customization-modal .customization-color-picker {
    position: fixed;
    top: 50%;
    bottom: auto;
    width: 210px;
    height: 190px;
    transform: translate(-50%, -50%);
  }

  #customization-modal .customization-color-wheel {
    width: 170px;
    height: 170px;
  }

  #customization-modal .customization-brightness-slider {
    height: 170px;
  }
}

@media (max-width: 900px) and (max-height: 480px) {
  #customization-modal .catipedia-dialog > h2 {
    font-size: 2rem;
  }

  #customization-modal .customization-grid {
    flex-basis: 72px;
  }

  #customization-modal .customization-character .role-art-wrap {
    width: 108px;
    height: 72px;
  }

  #customization-modal .customization-main-cat {
    width: 68px;
    height: 68px;
  }

  #customization-modal .customization-cat-menu {
    margin-top: 44px;
  }
}

/* Short landscape screens still use five columns, so keep both card rows
   fully inside the folder instead of clipping their top or bottom edges. */
@media (min-width: 621px) and (max-height: 420px) {
  #customization-modal .night-player-menu-list,
  #customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
    row-gap: 8px;
  }

  #customization-modal .night-player-option {
    grid-template-rows: 48px auto;
    gap: 4px;
    padding: 5px;
    font-size: .68rem;
  }

  #customization-modal .night-player-option img,
  #customization-modal .customization-cosmetic-thumbnail {
    width: 48px;
    height: 48px;
  }
}

/* Customization uses one continuous layout at every viewport size. The folder
   always keeps all five columns inside its own width, so it can scroll only
   vertically and never requires left-to-right searching. */
#customization-modal {
  padding: clamp(6px, 2.5vmin, 24px);
}

#customization-modal .catipedia-dialog {
  padding:
    clamp(10px, 3.3vmin, 30px)
    clamp(8px, 2.5vmin, 24px)
    clamp(8px, 4.7vmin, 42px);
  overflow: hidden;
  border-radius: clamp(16px, 2.7vmin, 24px);
}

#customization-modal .catipedia-dialog > h2 {
  flex: 0 0 auto;
  margin: 0 34px clamp(4px, 3vmin, 28px);
  font-size: clamp(2rem, min(7vw, 11.5dvh), 5rem);
  line-height: 1.05;
}

#customization-modal .customization-grid {
  flex: 0 0 clamp(72px, min(18vw, 24dvh), 170px);
  grid-template-columns: 1fr;
  min-height: 0;
}

#customization-modal .customization-character {
  grid-column: 1;
  align-self: center;
  padding-top: 0;
}

#customization-modal .customization-character .role-art-wrap {
  width: clamp(108px, min(22vw, 31dvh), 220px);
  height: clamp(72px, min(17vw, 24dvh), 170px);
  margin: 0 auto;
}

#customization-modal .customization-main-cat {
  width: clamp(68px, min(14.2vw, 20dvh), 142px);
  height: clamp(68px, min(14.2vw, 20dvh), 142px);
}

#customization-modal .customization-cat-menu {
  --customization-tab-width: clamp(62px, min(22vw, 10dvh), 75px);
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  display: flex;
  flex: 1 1 clamp(180px, 55dvh, 523px);
  width: min(920px, calc(100% - clamp(0px, 1.5vw, 12px)));
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: clamp(180px, 55dvh, 523px);
  margin: clamp(42px, 6vmin, 45px) auto 0;
  padding: clamp(6px, 1.4vmin, 14px);
  overflow: visible;
  border-radius: clamp(13px, 1.8vmin, 18px);
  transform: none;
}

#customization-modal .night-player-menu-list,
#customization-modal .customization-cat-menu[data-page="cosmetics"] .night-player-menu-list {
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.2vmin, 10px);
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#customization-modal .night-player-option {
  grid-template-rows: clamp(30px, min(12vw, 13dvh), 72px) auto;
  gap: clamp(3px, .8vmin, 6px);
  padding: clamp(4px, 1.2vmin, 10px) clamp(2px, .8vmin, 8px);
  border-radius: clamp(8px, 1.3vmin, 13px);
  font-size: clamp(.5rem, min(1.7vw, 1.8dvh), .82rem);
}

#customization-modal .night-player-option img,
#customization-modal .customization-cosmetic-thumbnail {
  width: clamp(30px, min(12vw, 13dvh), 72px);
  height: clamp(30px, min(12vw, 13dvh), 72px);
}

#customization-modal .customization-folder-tab {
  width: var(--customization-tab-width);
  height: clamp(28px, 4.5dvh, 35px);
  font-size: clamp(.55rem, min(2vw, 1.5dvh), .68rem);
}

#customization-modal .role-skins-tab {
  left: clamp(6px, 1.5vw, 15px);
}

#customization-modal .extra-skins-tab {
  left: calc(clamp(6px, 1.5vw, 15px) + var(--customization-tab-width) + clamp(6px, 1.2vw, 15px));
}

#customization-modal .cosmetics-tab {
  right: clamp(6px, 1.5vw, 15px);
}

#customization-modal .customization-color-picker {
  position: fixed;
  top: 50%;
  bottom: auto;
  width: 22em;
  height: 20em;
  transform: none;
  transform-origin: top left;
}

#customization-modal .customization-color-wheel {
  width: 18em;
  height: 18em;
}

#customization-modal .customization-brightness-slider {
  height: 18em;
}

/* Keep the lobby's existing responsive arrangements exactly as designed and
   scale their measurements continuously so each arrangement fits the viewport. */
body.lobby-controls-layout {
  --lobby-settings-size: clamp(20px, min(6vw, 12dvh), 100px);
  overflow: hidden;
}

body.lobby-controls-layout #app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.lobby-controls-layout .menu-settings {
  top: max(clamp(4px, min(1vw, 2dvh), 15px), env(safe-area-inset-top));
  left: max(clamp(4px, 1vw, 15px), env(safe-area-inset-left));
  width: var(--lobby-settings-size);
  height: var(--lobby-settings-size);
}

.lobby-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding:
    max(clamp(8px, 1.8vmin, 20px), env(safe-area-inset-top))
    max(clamp(8px, 1.8vmin, 20px), env(safe-area-inset-right))
    max(clamp(8px, 1.8vmin, 20px), env(safe-area-inset-bottom))
    max(clamp(8px, 1.8vmin, 20px), env(safe-area-inset-left));
  overflow: hidden;
}

#lobby-screen.active {
  position: fixed;
  inset: 0;
}

.lobby-layout {
  grid-template-columns: minmax(0, 340fr) minmax(0, 826fr) minmax(0, 340fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "roles main chat";
  width: min(1534px, 100%);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  gap: clamp(6px, 1.4vmin, 14px);
  overflow: visible;
}

.lobby-player-container {
  grid-area: main;
  min-height: 0;
  padding:
    clamp(18px, min(4.17vw, 7dvh), 64px)
    clamp(4px, 1.56vw, 24px)
    clamp(22px, min(4.56vw, 7.6dvh), 70px);
  border-width: clamp(1px, .25vmin, 2px);
  border-radius: clamp(11px, 2vmin, 18px);
}

.lobby-player-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: start;
  column-gap: clamp(2px, min(1vw, 1.2dvh), 16px);
  row-gap: clamp(2.4px, min(1.2vw, 1.44dvh), 19.2px);
  width: 100%;
  height: min(638.4px, 100%);
  min-height: 0;
}

.lobby-player {
  min-height: 0;
  align-self: start;
}

.lobby-cat-appearance {
  width: clamp(14.4px, min(5.316vw, calc(10.8dvh - 12px)), 81.6px);
  margin-bottom: clamp(1.2px, min(.624vw, .84dvh), 9.6px);
}

.lobby-player-name {
  min-width: clamp(28.8px, 5.64vw, 86.4px);
  min-height: clamp(12px, min(1.8vw, 3.12dvh), 27.6px);
  max-width: 100%;
  padding: clamp(1.2px, .24vw, 3.6px) clamp(2.4px, .624vw, 9.6px);
  overflow: hidden;
  border-radius: clamp(6px, .936vw, 14.4px);
  font-size: clamp(.432rem, min(.924vw, 1.98dvh), .888rem);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-player-name .kick-label {
  font-size: clamp(.54rem, min(1.248vw, 2.4dvh), 1.2rem);
}

.lobby-code {
  top: clamp(3px, .8vmin, 5px);
  left: clamp(3px, .8vmin, 5px);
  padding: clamp(2px, .46vw, 7px) clamp(3px, .65vw, 10px);
  border-radius: clamp(4px, .59vw, 9px);
  font-size: clamp(.38rem, min(.75vw, 1.55dvh), .72rem);
}

.lobby-bot-controls {
  top: clamp(3px, .8vmin, 5px);
  right: clamp(3px, .8vmin, 5px);
  gap: clamp(2px, .6vmin, 5px);
}

.lobby-small-button {
  min-width: clamp(30px, 4.95vw, 76px);
  height: clamp(16px, min(2.22vw, 4.3dvh), 34px);
  padding: 0 clamp(2px, .65vw, 10px);
  border-radius: clamp(4px, .52vw, 8px);
  font-size: clamp(.34rem, min(.73vw, 1.5dvh), .7rem);
}

.lobby-countdown {
  top: clamp(3px, .8vmin, 5px);
  min-width: clamp(68px, 10.17vw, 156px);
  padding: clamp(3px, .52vw, 8px) clamp(4px, .78vw, 12px);
  font-size: clamp(.38rem, min(.78vw, 1.6dvh), .75rem);
}

.lobby-start-button,
.lobby-back-button {
  bottom: clamp(4px, 1.2vmin, 10px);
  width: clamp(42px, 7.7vw, 118px);
  min-height: clamp(20px, min(2.74vw, 5.2dvh), 42px);
  padding: clamp(3px, .59vw, 9px) clamp(4px, .91vw, 14px);
  font-size: clamp(.44rem, min(1.04vw, 1.8dvh), 1rem);
}

.lobby-start-button { right: clamp(4px, 1.2vmin, 10px); }
.lobby-back-button { left: clamp(4px, 1.2vmin, 10px); }

.lobby-role-panel,
.lobby-chat-panel {
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: clamp(4px, 1.17vw, 18px);
  overflow: hidden;
  border-width: clamp(1px, .25vmin, 2px);
  border-radius: clamp(7px, 1.17vw, 18px);
}

.lobby-role-panel {
  grid-area: roles;
  z-index: 3;
  width: 70%;
  overflow: visible;
  justify-self: end;
}

.lobby-chat-panel { grid-area: chat; }

.lobby-chat-heading {
  gap: clamp(4px, .8vmin, 8px);
  padding-bottom: clamp(4px, 1.2vmin, 14px);
  font-size: clamp(.68rem, min(1.04vw, 1.8dvh), 1rem);
}

.status-dot {
  width: clamp(4px, .8vmin, 7px);
  height: clamp(4px, .8vmin, 7px);
}

.lobby-role-placeholders {
  gap: clamp(2px, .7dvh, 6px);
  margin-top: clamp(3px, 1dvh, 10px);
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.lobby-role-row {
  grid-template-columns: clamp(8px, 1.3vw, 20px) minmax(0, max-content) clamp(8px, 1.3vw, 20px);
  gap: clamp(1px, .33vw, 5px);
}

.lobby-role-row::after {
  width: clamp(8px, 1.3vw, 20px);
}

.lobby-role-edit {
  width: clamp(8px, 1.3vw, 20px);
  height: clamp(8px, 1.3vw, 20px);
  font-size: clamp(.3rem, .65vw, .62rem);
}

.lobby-role-code {
  max-width: 100%;
  padding: clamp(1px, min(.46vw, .55dvh), 7px) clamp(2px, .65vw, 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lobby-chat-log {
  gap: clamp(3px, 1dvh, 10px);
  padding: clamp(4px, 1.4dvh, 16px) clamp(1px, .4vmin, 3px);
  overscroll-behavior: contain;
}

.lobby-chat-message {
  font-size: calc(clamp(.68rem, min(.86vw, 1.65dvh), .82rem) + 2px);
  line-height: 1.25;
}

.lobby-chat-form {
  min-width: 0;
  gap: clamp(3px, .7vmin, 8px);
}

.lobby-chat-form input,
.lobby-chat-form button {
  height: clamp(18px, min(3vw, 5dvh), 46px);
  font-size: calc(clamp(.75rem, min(.86vw, 1.7dvh), .82rem) + 2px);
}

.lobby-chat-form input {
  min-width: 0;
  padding: clamp(5px, 1.2vmin, 12px);
}

.lobby-chat-form button {
  min-width: 0;
  padding: 0 clamp(6px, 1.4vmin, 15px);
}

.restart-button {
  margin-top: 16px;
}

/* Keep the role assignment card's desktop composition intact while scaling
   the complete card from both viewport dimensions. */
.role-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.role-card-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 470px;
  transform: translate(-50%, -50%) scale(var(--role-reveal-scale, 1));
  transform-origin: center;
  transition: transform 160ms ease-out;
}

.role-card-stage .role-card {
  width: 470px;
  padding: 34px;
}

/* The live game keeps the desktop composition at every viewport size. All
   measurements respond to the tighter of the available width and height so
   the top bar, facility, player list, and chat remain one continuous scene. */
body.game-controls-layout {
  /* Blend width and height so compact landscape windows keep a readable bar
     whenever they have vertical room, while extremely short views still
     shrink continuously instead of jumping at a breakpoint. */
  --game-topbar-height: clamp(24px, calc(6dvh + 1.5vw), 76px);
  overflow: hidden;
}

body.game-controls-layout #app {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.game-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  grid-template-columns: 1fr auto 1fr;
  min-height: var(--game-topbar-height);
  height: var(--game-topbar-height);
  flex: 0 0 var(--game-topbar-height);
  padding: calc(var(--game-topbar-height) * .158) calc(var(--game-topbar-height) * .632);
  overflow: hidden;
  border-bottom-width: max(.5px, calc(var(--game-topbar-height) * .0395));
  transition: height 180ms ease-out, min-height 180ms ease-out,
    padding 180ms ease-out, border-bottom-width 180ms ease-out;
}

.brand-lockup,
.phase-block {
  gap: calc(var(--game-topbar-height) * .145);
  max-height: 100%;
}

.brand-lockup strong,
.phase-block span {
  font-size: calc(var(--game-topbar-height) * .21);
  line-height: 1;
  transition: font-size 180ms ease-out;
}

.brand-lockup small,
.phase-block small {
  margin-top: calc(var(--game-topbar-height) * .026);
  font-size: calc(var(--game-topbar-height) * .143);
  line-height: 1;
  transition: font-size 180ms ease-out;
}

.phase-icon {
  width: calc(var(--game-topbar-height) * .447);
  height: calc(var(--game-topbar-height) * .447);
  font-size: calc(var(--game-topbar-height) * .253) !important;
  transition: width 180ms ease-out, height 180ms ease-out, font-size 180ms ease-out;
}

.phase-timer {
  min-width: calc(var(--game-topbar-height) * .711);
  margin-left: calc(var(--game-topbar-height) * .105);
  padding: calc(var(--game-topbar-height) * .092) calc(var(--game-topbar-height) * .118);
  border-width: max(.5px, calc(var(--game-topbar-height) * .0132));
  border-radius: calc(var(--game-topbar-height) * .118);
  font-size: calc(var(--game-topbar-height) * .181);
  line-height: 1;
  transition: min-width 180ms ease-out, margin-left 180ms ease-out,
    padding 180ms ease-out, border-radius 180ms ease-out, font-size 180ms ease-out;
}

body.game-controls-layout .menu-settings,
body.game-controls-layout .game-exit-button,
body.game-controls-layout .role-peek-button,
body.game-controls-layout .game-exit-button img,
body.game-controls-layout .role-peek-button img {
  width: calc(var(--game-topbar-height) * .855);
  height: calc(var(--game-topbar-height) * .855);
  transition: width 180ms ease-out, height 180ms ease-out;
}

body.game-controls-layout .menu-settings,
body.game-controls-layout .game-exit-button {
  top: calc(var(--game-topbar-height) * .132);
}

body.game-controls-layout .menu-settings {
  left: calc(var(--game-topbar-height) * .132);
}

body.game-controls-layout .game-exit-button {
  right: calc(var(--game-topbar-height) * .132);
}

body.game-controls-layout .role-peek-button {
  top: calc(var(--game-topbar-height) * .132);
  left: calc(var(--game-topbar-height) * 1.118);
}

/* Keep the complete top bar readable on phones while preserving the desktop
   proportions shown in the base layout. Every child still derives its size
   from the same bar-height variable. */
@media (max-width: 620px), (max-height: 650px) {
  body.game-controls-layout .facility-stage {
    --facility-cat-size: clamp(17.5px, min(4vw, 7.125dvh), 102.5px);
  }

  body.game-controls-layout .game-layout {
    grid-template-columns: minmax(0, 1fr) clamp(103.75px, min(22.875vw, 40.625dvh), 585px);
  }

  body.game-controls-layout .catipedia-button,
  body.game-controls-layout .fire-ability-button,
  body.game-controls-layout .curious-kill-button,
  body.game-controls-layout .sly-ability-button {
    width: clamp(52px, 8dvh, 60px);
    height: clamp(52px, 8dvh, 60px);
  }

  body.game-controls-layout .catipedia-button img,
  body.game-controls-layout .fire-ability-button img,
  body.game-controls-layout .curious-kill-button img,
  body.game-controls-layout .sly-ability-button img {
    width: clamp(40px, 6.4dvh, 46px);
    height: clamp(40px, 6.4dvh, 46px);
  }

  body.game-controls-layout .sly-ability-button {
    --sly-target-width: clamp(52px, 8dvh, 60px);
    --sly-target-size: clamp(10.4px, 1.6dvh, 12px);
    --sly-target-gap: clamp(4.33px, .667dvh, 5px);
  }
}

/* Give chat more room in short landscape windows like Discord's compact
   desktop view without taking the same space from portrait phone layouts. */
@media (max-height: 650px) and (min-aspect-ratio: 3 / 2) {
  body.game-controls-layout .game-layout {
    grid-template-columns: minmax(0, 1fr) clamp(155.625px, min(34.3125vw, 60.9375dvh), 585px);
  }
}

.game-layout {
  grid-template-columns: minmax(0, 1fr) clamp(83px, min(18.3vw, 32.5dvh), 468px);
  grid-template-rows: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.facility-panel {
  container-type: size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: clamp(2px, min(.66vw, 1.17dvh), 17px);
  overflow: hidden;
}

.section-heading {
  align-items: flex-end;
  gap: clamp(4px, min(.78vw, 1.39dvh), 20px);
  margin-bottom: clamp(2px, min(.47vw, .83dvh), 12px);
}

.section-heading .eyebrow {
  margin-bottom: clamp(2px, min(.47vw, .83dvh), 12px);
  font-size: clamp(.3rem, min(.45vw, .8dvh), .72rem);
}

.section-heading h2 {
  font-size: clamp(.7rem, min(1.69vw, 3dvh), 2.7rem);
}

.alive-count {
  padding: clamp(2px, min(.31vw, .56dvh), 8px) clamp(3px, min(.47vw, .83dvh), 12px);
  border-radius: clamp(5px, min(.78vw, 1.39dvh), 20px);
  font-size: clamp(.3rem, min(.48vw, .85dvh), .76rem);
}

.facility-stage {
  --facility-cat-size: clamp(14px, min(3.2vw, 5.7dvh), 82px);
  align-self: start;
  justify-self: center;
  width: min(100%, max(1px, calc(177.778cqh - min(4.41vw, 7.84dvh))));
  max-width: 100%;
  min-height: 0;
  margin: 0 auto;
  border-width: clamp(1px, min(.08vw, .14dvh), 2px);
  border-radius: clamp(4px, min(.7vw, 1.25dvh), 18px);
}

.facility-cat-labels {
  bottom: calc(100% + clamp(3px, min(.59vw, 1.04dvh), 15px));
  gap: clamp(2px, min(.39vw, .69dvh), 10px);
}

.facility-vote-count {
  font-size: clamp(5px, min(.59vw, 1.04dvh), 15px);
}

.facility-cat-name {
  max-width: clamp(45px, min(5.86vw, 10.42dvh), 150px);
  padding: clamp(1px, min(.08vw, .14dvh), 2px) clamp(2px, min(.23vw, .42dvh), 6px);
  border-radius: clamp(2px, min(.23vw, .42dvh), 6px);
  font-size: clamp(.3rem, min(.48vw, .85dvh), .76rem);
}

.player-bar {
  top: clamp(3px, min(.7vw, 1.25dvh), 18px);
  left: clamp(3px, min(.7vw, 1.25dvh), 18px);
  gap: clamp(1px, min(.18vw, .31dvh), 4.5px);
  max-width: clamp(48px, min(8.79vw, 15.63dvh), 225px);
  padding: clamp(2px, min(.41vw, .73dvh), 10.5px) clamp(3px, min(.53vw, .94dvh), 13.5px);
  border-radius: clamp(3px, min(.53vw, .94dvh), 13.5px);
  transform: none;
}

.player-bar-entry {
  gap: clamp(1px, min(.29vw, .52dvh), 7.5px);
  max-width: clamp(42px, min(7.62vw, 13.54dvh), 195px);
}

.player-bar-cat {
  width: clamp(6px, min(.94vw, 1.67dvh), 24px);
  height: clamp(6px, min(.94vw, 1.67dvh), 24px);
  flex-basis: clamp(6px, min(.94vw, 1.67dvh), 24px);
}

.player-bar-name {
  max-width: clamp(34px, min(6.39vw, 11.35dvh), 163.5px);
  font-size: clamp(.28rem, min(.68vw, 1.2dvh), 1.08rem);
}

.player-bar.two-columns {
  display: grid;
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, auto);
  align-items: start;
  column-gap: clamp(5px, min(.78vw, 1.39dvh), 20px);
  max-width: clamp(101px, min(18.36vw, 32.64dvh), 470px);
}

.action-panel {
  min-width: 0;
  min-height: 0;
  padding: clamp(5px, min(1.33vw, 2.36dvh), 34px) clamp(4px, min(1.09vw, 1.94dvh), 28px) clamp(4px, min(1.09vw, 1.94dvh), 28px);
  overflow: hidden;
  border-top: 0;
  border-left-width: clamp(1px, min(.12vw, .21dvh), 3px);
}

.action-panel h3 {
  margin: clamp(1px, min(.12vw, .21dvh), 3px) 0 clamp(2px, min(.27vw, .49dvh), 7px);
  font-size: clamp(.5rem, min(1.03vw, 1.83dvh), 1.65rem);
}

.action-copy {
  margin-bottom: clamp(4px, min(.86vw, 1.53dvh), 22px);
  font-size: clamp(.34rem, min(.56vw, 1dvh), .9rem);
}

.log {
  gap: clamp(2px, min(.39vw, .69dvh), 10px);
  min-height: 0;
  max-height: none;
  padding-right: clamp(1px, min(.2vw, .35dvh), 5px);
}

.log-entry {
  padding: clamp(2px, min(.43vw, .76dvh), 11px) clamp(3px, min(.47vw, .83dvh), 12px);
  border-left-width: clamp(1px, min(.12vw, .21dvh), 3px);
  border-radius: 0 clamp(3px, min(.35vw, .63dvh), 9px) clamp(3px, min(.35vw, .63dvh), 9px) 0;
  font-size: calc(clamp(.68rem, min(.51vw, .9dvh), .81rem) + 2px);
}

.game-screen .day-chat {
  gap: clamp(2px, min(.31vw, .56dvh), 8px);
  margin-top: clamp(3px, min(.55vw, .97dvh), 14px);
}

.game-screen .day-chat input,
.game-screen .day-chat button {
  min-width: 0;
  padding: clamp(3px, min(.47vw, .83dvh), 12px) clamp(3px, min(.51vw, .9dvh), 13px);
  border-radius: clamp(3px, min(.39vw, .69dvh), 10px);
  font-size: calc(clamp(.75rem, min(.51vw, .9dvh), .81rem) + 2px);
}

.game-screen .day-chat button {
  padding-inline: clamp(4px, min(.59vw, 1.04dvh), 15px);
}

.catipedia-button,
.fire-ability-button,
.curious-kill-button,
.sly-ability-button {
  right: clamp(3px, min(.39vw, .69dvh), 10px);
  bottom: clamp(3px, min(.39vw, .69dvh), 10px);
  width: clamp(16px, min(2.34vw, 4.17dvh), 60px);
  height: clamp(16px, min(2.34vw, 4.17dvh), 60px);
}

.catipedia-button {
  right: auto;
  left: clamp(3px, min(.39vw, .69dvh), 10px);
}

.catipedia-button img,
.fire-ability-button img,
.curious-kill-button img,
.sly-ability-button img {
  width: clamp(12px, min(1.8vw, 3.2dvh), 46px);
  height: clamp(12px, min(1.8vw, 3.2dvh), 46px);
}

.sly-ability-button {
  --sly-target-width: clamp(16px, min(2.34vw, 4.17dvh), 60px);
  --sly-target-size: clamp(4px, min(.468vw, .834dvh), 12px);
  --sly-target-gap: clamp(1.33px, min(.195vw, .348dvh), 5px);
}

/* Extremely short views need to keep the chat composer compact enough for
   the whole game to remain visible. The top bar already scales fluidly. */
@media (max-height: 300px) {
  body.game-controls-layout .game-screen .day-chat {
    gap: clamp(1px, min(.16vw, .28dvh), 4px);
    margin-top: clamp(1px, min(.27vw, .49dvh), 7px);
  }

  body.game-controls-layout .game-screen .day-chat input,
  body.game-controls-layout .game-screen .day-chat button {
    padding: clamp(1px, min(.24vw, .42dvh), 6px) clamp(2px, min(.32vw, .56dvh), 8px);
    border-radius: clamp(2px, min(.2vw, .35dvh), 5px);
    font-size: clamp(.38rem, min(.76vw, 1.35dvh), .75rem);
    line-height: 1.1;
  }

  body.game-controls-layout .game-screen .day-chat button {
    padding-inline: clamp(2px, min(.32vw, .56dvh), 8px);
  }
}