:root {
  color-scheme: dark;
  --bg: #0d0f14;
  --panel: #13161d;
  --panel-2: #191d26;
  --ink: #f7f8f2;
  --muted: #8d94a3;
  --line: rgba(255,255,255,.075);
  --lime: #d8ff5b;
  --purple: #9a7cff;
  --shadow: 0 24px 80px rgba(0,0,0,.28);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.message-row--highlight .message-bubble,.message-row--highlight .activity-card {
  animation: message-highlight 1.4s ease-out;
}

@keyframes message-highlight {
  0%,30% {
    box-shadow: 0 0 0 3px rgba(216,255,91,.42);
  }
  100% {
    box-shadow: none;
  }
}

* {
  box-sizing: border-box;
}

html,body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  overflow: hidden;
}

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

button {
  color: inherit;
}

[hidden] {
  display: none!important;
}

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

.kicker {
  margin: 0 0 .55rem;
  color: var(--lime);
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.04em;
  text-decoration: none;
}

.logo span,.logo-mark {
  display: grid;
  place-items: center;
  color: #10130d;
  background: var(--lime);
  font-weight: 950;
}

.logo--large {
  position: absolute;
  top: 3rem;
  left: 3.5rem;
  font-size: 1.2rem;
}

.logo--large span {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 11px;
  transform: rotate(-7deg);
}

.primary-button {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: 14px;
  color: #10130d;
  background: var(--lime);
  font-weight: 850;
  cursor: pointer;
}

.primary-button:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.primary-button:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.text-button {
  border: 0;
  color: var(--muted);
  background: none;
  cursor: pointer;
}

.text-button strong {
  color: var(--ink);
}

.loading-view {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  background: #0b0d12;
}

.loading-view .logo--large {
  position: static;
  font-size: 1.35rem;
}

.loading-view p {
  color: var(--muted);
  font-size: .75rem;
}

/* Authentication */
.auth-view {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(430px,.75fr);
  height: 100%;
}

.auth-story {
  position: relative;
  overflow: hidden;
  padding: 3rem 3.5rem;
  background: radial-gradient(circle at 75% 35%,rgba(154,124,255,.23),transparent 23rem),linear-gradient(145deg,#12151c,#171b24 65%,#11131a);
}

.auth-story::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .35;
  background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(black,transparent 90%);
}

.auth-story__copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(3rem,7vw,8rem);
  max-width: 670px;
  transform: translateY(-55%);
}

.auth-story h1 {
  margin: .3rem 0 1.5rem;
  font-size: clamp(4rem,7.2vw,7.8rem);
  font-weight: 950;
  line-height: .82;
  letter-spacing: -.085em;
}

.auth-story h1 em {
  color: var(--lime);
  font-style: normal;
}

.auth-story__copy>p:last-child {
  max-width: 500px;
  color: #adb3bf;
  font-size: 1.1rem;
  line-height: 1.7;
}

.prototype-note {
  position: absolute;
  bottom: 2.5rem;
  left: 3.5rem;
  color: var(--muted);
  font-size: .72rem;
}

.auth-orbit {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(216,255,91,.16);
  border-radius: 50%;
}

.auth-orbit::before,.auth-orbit::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  content: "";
}

.auth-orbit::before {
  inset: 50px;
}

.auth-orbit::after {
  inset: 108px;
}

.orbit-center,.orbit-person {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 850;
  box-shadow: var(--shadow);
}

.orbit-center {
  inset: 142px;
  width: 105px;
  height: 105px;
  color: #111;
  background: var(--lime);
  transform: rotate(-8deg);
}

.orbit-person {
  width: 52px;
  height: 52px;
  border: 5px solid #171a22;
}

.orbit-person--one {
  top: 3px;
  left: 150px;
  background: #ff7d7d;
}

.orbit-person--two {
  top: 154px;
  left: -24px;
  background: #50d7aa;
}

.orbit-person--three {
  right: 3px;
  bottom: 60px;
  background: #55b8ff;
}

.auth-panel {
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #0b0d12;
}

.auth-card {
  width: min(410px,100%);
}

.auth-card__heading h2 {
  margin: .1rem 0 .5rem;
  font-size: 3rem;
  letter-spacing: -.06em;
}

.auth-card__heading>p:last-child {
  margin: 0 0 1.7rem;
  color: var(--muted);
}

.demo-accounts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .65rem;
}

.demo-accounts button {
  display: grid;
  justify-items: start;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
}

.demo-accounts button:hover {
  border-color: rgba(216,255,91,.42);
  background: #191d25;
}

.demo-accounts button>span:last-child {
  display: grid;
  gap: .2rem;
  font-size: .78rem;
  font-weight: 800;
}

.demo-accounts small {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
}

.avatar {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 14px;
  color: #101219;
  background: var(--avatar,#9a7cff);
  font-size: .78rem;
  font-weight: 950;
}

.avatar-color-0,.avatar--carter {
  --avatar: #9a7cff;
}

.avatar-color-1,.avatar--alex {
  --avatar: #ff7d7d;
}

.avatar-color-2,.avatar--sam {
  --avatar: #50d7aa;
}

.avatar-color-3 {
  --avatar: #ffb454;
}

.avatar-color-4 {
  --avatar: #55b8ff;
}

.avatar-color-5 {
  --avatar: #ff70bd;
}

.avatar-color-6 {
  --avatar: #d8ff5b;
}

.profile-colors {
  grid-column: 1/-1;
  min-width: 0;
  margin: 0;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.profile-colors legend {
  padding: 0 .3rem;
  color: #aab0bb;
  font-size: .7rem;
  font-weight: 750;
}

.profile-color-options {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.profile-color-options label {
  position: relative;
  justify-items: center;
  min-width: 44px;
  cursor: pointer;
}

.profile-color-options input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.profile-color-swatch {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  color: #101219;
  background: var(--avatar);
}

.profile-color-options input:checked + .profile-color-swatch::after {
  content: '✓';
  font-size: 1.1rem;
  font-weight: 900;
}

.profile-color-options input:focus-visible + .profile-color-swatch {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.or {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.4rem 0;
  color: #656b77;
  font-size: .68rem;
}

.or::before,.or::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.auth-card form {
  display: grid;
  gap: 1rem;
}

.auth-card label,.group-name-field {
  display: grid;
  gap: .5rem;
  color: #aab0bb;
  font-size: .72rem;
  font-weight: 750;
}

.auth-card input,
.group-name-field input,
.group-name-field select {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  color: var(--ink);
  background: var(--panel);
}

.auth-card input:focus,
.group-name-field input:focus,
.group-name-field select:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,255,91,.09);
}

.form-status {
  min-height: .5rem;
  margin: 0;
  color: #ff9898;
  font-size: .72rem;
}

.auth-card>.text-button {
  display: block;
  margin: 1rem auto;
}

/* App structure */
.app-view {
  display: grid;
  grid-template-columns: 84px 360px minmax(0,1fr);
  height: 100%;
  background: #0d0f14;
}

.app-rail {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem .75rem;
  border-right: 1px solid var(--line);
  background: #101219;
}

.logo-mark {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 14px;
  font-size: 1.25rem;
  cursor: pointer;
  transform: rotate(-5deg);
}

.rail-actions {
  display: grid;
  gap: .75rem;
  width: 100%;
  margin: auto 0;
}

.rail-button {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: .65rem .2rem;
  border: 0;
  border-radius: 14px;
  color: #717988;
  background: none;
  cursor: pointer;
}

.rail-button>span {
  font-size: 1.45rem;
  line-height: 1;
}

.rail-button small {
  font-size: .61rem;
  font-weight: 750;
}

.rail-button:hover,.rail-button.is-active {
  color: var(--ink);
  background: #1b1f28;
}

.rail-button.is-active::before {
  position: absolute;
  left: -.75rem;
  width: 3px;
  height: 28px;
  border-radius: 0 6px 6px 0;
  background: var(--lime);
  content: "";
}

.rail-button i {
  position: absolute;
  top: 4px;
  right: 10px;
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #101219;
  border-radius: 10px;
  color: #111;
  background: var(--lime);
  font-size: .57rem;
  font-style: normal;
  font-weight: 900;
}

.profile-button {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
}

.profile-button i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid #101219;
  border-radius: 50%;
  background: #50d7aa;
}

.list-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: #13161d;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 1.5rem 1.1rem;
}

.panel-header h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -.055em;
}

.circle-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: var(--ink);
  background: #1b1f28;
  cursor: pointer;
}

.circle-button:hover {
  border-color: rgba(216,255,91,.3);
  background: #222731;
}

.search {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 1.5rem;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #0e1117;
}

.search span {
  color: #6d7481;
  font-size: 1.2rem;
}

.search input {
  width: 100%;
  height: 44px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.filter-tabs {
  display: flex;
  gap: .3rem;
  padding: 1rem 1.5rem .7rem;
  overflow: auto;
}

.filter-tabs button,.topic-row button {
  padding: .45rem .7rem;
  border: 0;
  border-radius: 9px;
  color: #777f8e;
  background: none;
  font-size: .67rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.filter-tabs button.is-active,.topic-row button.is-active {
  color: #111;
  background: var(--lime);
}

.conversation-list {
  min-height: 0;
  flex: 1;
  padding: .25rem .65rem 1rem;
  overflow-y: auto;
}

.conversation-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .75rem;
  padding: .8rem;
  border: 0;
  border-radius: 15px;
  color: var(--ink);
  background: none;
  cursor: pointer;
  text-align: left;
}

.conversation-item:hover,.conversation-item.is-selected {
  background: #1b1f28;
}

.conversation-avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
}

.conversation-avatar__online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border: 2px solid #13161d;
  border-radius: 50%;
  background: #50d7aa;
  box-shadow: 0 0 0 2px rgba(80,215,170,.12);
}

.conversation-item:hover .conversation-avatar__online,
.conversation-item.is-selected .conversation-avatar__online {
  border-color: #1b1f28;
}

.conversation-item__body {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: .35rem;
}

.conversation-item__body>span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}

.conversation-item strong {
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item time {
  color: #6d7481;
  font-size: .62rem;
}

.conversation-item small {
  overflow: hidden;
  color: #858c99;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-item i {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 10px;
  color: #111;
  background: var(--lime);
  font-size: .58rem;
  font-style: normal;
  font-weight: 900;
}

.list-empty {
  padding: 2rem;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}

.content-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(circle at 80% 12%,rgba(154,124,255,.08),transparent 30rem),#0d0f14;
}

.empty-state {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  padding: 2rem;
  text-align: center;
}

.empty-state__graphic {
  position: relative;
  display: grid;
  width: 150px;
  height: 150px;
  margin-bottom: 2rem;
  place-items: center;
  border: 1px solid rgba(216,255,91,.16);
  border-radius: 50%;
}

.empty-state__graphic span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  border-radius: 25px;
  color: #111;
  background: var(--lime);
  font-size: 2rem;
  font-weight: 950;
  transform: rotate(-7deg);
}

.empty-state__graphic i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--purple);
}

.empty-state__graphic i:nth-child(2) {
  top: 10px;
  right: 15px;
}

.empty-state__graphic i:nth-child(3) {
  bottom: 13px;
  left: 5px;
  background: #50d7aa;
}

.empty-state__graphic i:nth-child(4) {
  right: -8px;
  bottom: 38px;
  background: #ff7d7d;
}

.empty-state h2 {
  margin: .2rem 0 .7rem;
  font-size: clamp(2.7rem,5vw,4.6rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.empty-state>p:not(.kicker) {
  margin: 0 0 1.6rem;
  color: var(--muted);
}

/* Conversation */
.conversation-view {
  display: grid;
  position: relative;
  grid-template-rows: 76px minmax(0,1fr) auto 78px;
  height: 100%;
}

.conversation-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 0 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(13,15,20,.82);
  backdrop-filter: blur(16px);
}

.back-button {
  display: none;
  border: 0;
  color: var(--ink);
  background: none;
  font-size: 1.25rem;
}

.room-avatar>.avatar {
  width: 44px;
  height: 44px;
}

.room-symbol {
  border-radius: 16px;
}

.conversation-heading {
  min-width: 0;
}

.conversation-heading h2 {
  margin: 0;
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-heading p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .68rem;
}

.conversation-actions {
  display: flex;
  gap: .45rem;
  margin-left: auto;
}

.message-stream {
  padding: 2rem clamp(1.2rem,5vw,5rem);
  border: 1px solid transparent;
  overflow-y: auto;
  transition: border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}

.conversation-view.has-unseen-messages .message-stream {
  border-color: rgba(203,255,76,.2);
  background: linear-gradient(180deg,rgba(203,255,76,.015),transparent 18%);
  box-shadow: inset 0 0 28px rgba(203,255,76,.045);
}

.new-message-indicator {
  position: absolute;
  z-index: 8;
  right: clamp(1rem,4vw,3.5rem);
  bottom: 108px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: .08rem .48rem;
  padding: .55rem .75rem;
  border: 1px solid rgba(203,255,76,.28);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(18,22,29,.94);
  box-shadow: 0 10px 28px rgba(0,0,0,.32),0 0 18px rgba(203,255,76,.08);
  text-align: left;
  backdrop-filter: blur(12px);
  cursor: pointer;
  animation: new-message-arrival .22s ease-out;
}

.new-message-indicator[hidden] {
  display: none;
}

.new-message-indicator span {
  grid-row: 1/3;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 0 0 9px rgba(203,255,76,.55);
}

.new-message-indicator strong {
  font-size: .68rem;
}

.new-message-indicator small {
  color: var(--muted);
  font-size: .55rem;
}

@keyframes new-message-arrival {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.message-row {
  display: flex;
  max-width: min(720px,82%);
  align-items: flex-start;
  gap: .7rem;
  margin: .85rem auto .85rem 0;
}

.message-row--own {
  flex-direction: row-reverse;
  margin-right: 0;
  margin-left: auto;
}

.message-row--grouped-with-previous {
  margin-top: -.65rem;
}

.message-row--grouped-with-next {
  margin-bottom: .65rem;
}

.message-row .avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  font-size: .65rem;
}

.avatar-spacer {
  width: 34px;
  flex: 0 0 34px;
}

.message-block {
  display: grid;
  justify-items: start;
}

.message-row--grouped-with-next .message-block {
  position: relative;
}

.message-row--own .message-block {
  justify-items: end;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 .2rem .3rem;
}

.message-meta strong {
  font-size: .68rem;
}

.message-meta time {
  color: #6e7581;
  font-size: .59rem;
}

.message-bubble {
  padding: .72rem .92rem;
  border: 1px solid var(--line);
  border-radius: 5px 17px 17px;
  color: #e9ebee;
  background: #191d25;
  font-size: .86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.message-row--own .message-bubble {
  border-color: transparent;
  border-radius: 17px 5px 17px 17px;
  color: #141316;
  background: #bbb0ff;
}

.message-row--grouped-with-next:not(.message-row--own) .message-bubble {
  border-bottom-left-radius: 5px;
}

.message-row--grouped-with-previous:not(.message-row--own) .message-bubble {
  border-top-left-radius: 5px;
}

.message-row--grouped-with-next.message-row--own .message-bubble {
  border-bottom-right-radius: 5px;
}

.message-row--grouped-with-previous.message-row--own .message-bubble {
  border-top-right-radius: 5px;
}

.receipt {
  margin: .3rem .2rem 0;
  color: #6d7481;
  font-size: .57rem;
}

.conversation-start {
  display: grid;
  justify-items: center;
  max-width: 460px;
  margin: 15vh auto 0;
  text-align: center;
}

.conversation-start .avatar {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  font-size: 1.2rem;
}

.conversation-start h3 {
  margin: 1.2rem 0 .5rem;
  font-size: 1.7rem;
  letter-spacing: -.04em;
}

.conversation-start p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}

.typing-indicator {
  min-height: 22px;
  padding: 0 1.5rem;
  color: var(--muted);
  font-size: .67rem;
}

.message-form {
  display: flex;
  align-items: flex-end;
  gap: .55rem;
  padding: 12px clamp(1rem,3vw,2rem);
  border-top: 1px solid var(--line);
  background: #101219;
}

.message-form>label {
  min-width: 0;
  flex: 1;
}

.message-form textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  max-height: 120px;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  outline: 0;
  color: var(--ink);
  background: #1a1e27;
  line-height: 1.35;
  resize: none;
}

.message-form textarea:focus {
  border-color: rgba(216,255,91,.4);
}

.composer-plus,.send-button {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
}

.composer-plus {
  color: #858c98;
  background: #1a1e27;
}

.send-button {
  color: #111;
  background: var(--lime);
  font-size: 1.2rem;
  font-weight: 900;
}

.expiration-chip {
  display: flex;
  height: 46px;
  align-items: center;
  gap: .35rem;
  padding: 0 .7rem;
  border-radius: 13px;
  color: #858c98;
  background: #1a1e27;
  font-size: .67rem;
}

.expiration-chip span:first-child {
  color: var(--lime);
}

/* Discover */
.discover-view {
  height: 100%;
  padding: clamp(2rem,5vw,4.5rem);
  overflow-y: auto;
}

.discover-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 2rem;
}

.discover-header h2 {
  margin: .1rem 0 .55rem;
  font-size: clamp(2.8rem,5vw,5.4rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.discover-header>div>p:last-child {
  color: var(--muted);
}

.live-pill {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--muted);
  font-size: .67rem;
}

.live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50d7aa;
  box-shadow: 0 0 12px #50d7aa;
}

.search--wide {
  max-width: 680px;
  margin: 2rem 0 1rem;
}

.topic-row {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.5rem;
  overflow: auto;
}

.topic-row button {
  padding: .55rem .85rem;
  background: #171a22;
}

.public-room-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}

.public-room-card {
  position: relative;
  overflow: hidden;
  min-height: 255px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(145deg,color-mix(in srgb,var(--room-accent) 9%,#151820),#151820 60%);
}

.public-room-card::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--room-accent);
  content: "";
}

.public-room-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.room-hash {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  color: #101218;
  background: var(--room-accent);
  font-weight: 950;
}

.room-topic {
  color: var(--muted);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.public-room-card h3 {
  margin: 1.2rem 0 .5rem;
  font-size: 1.5rem;
  letter-spacing: -.04em;
}

.public-room-card>p {
  min-height: 40px;
  margin: 0;
  color: var(--muted);
  font-size: .77rem;
  line-height: 1.5;
}

.member-stack {
  display: flex;
  align-items: center;
  margin: 1.2rem 0;
}

.member-stack .avatar {
  width: 26px;
  height: 26px;
  margin-right: -7px;
  border: 2px solid #161921;
  border-radius: 9px;
  font-size: .52rem;
}

.member-stack>span:last-child {
  margin-left: 1rem;
  color: var(--muted);
  font-size: .62rem;
}

.room-join-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #1d212a;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.room-join-button.is-joined {
  color: #111;
  background: var(--room-accent);
}

.discover-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.discover-actions .primary-button {
  min-height: 40px;
  padding: 0 .9rem;
  font-size: .72rem;
}

/* Friends */
.friends-view {
  height: 100%;
  padding: clamp(2rem,5vw,4.5rem);
  overflow-y: auto;
}

.friends-header h2 {
  margin: .1rem 0 .55rem;
  font-size: clamp(2.8rem,5vw,5.4rem);
  line-height: .9;
  letter-spacing: -.075em;
}

.friends-header>div>p:last-child {
  color: var(--muted);
}

.friend-add-form {
  display: flex;
  max-width: 680px;
  gap: .65rem;
  margin: 2rem 0 .4rem;
}

.friend-add-form label {
  min-width: 0;
  flex: 1;
}

.friend-add-form input {
  width: 100%;
  height: 50px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  color: var(--ink);
  background: #151820;
}

.friend-add-form input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,255,91,.09);
}

#friend-add-status {
  max-width: 680px;
  margin-bottom: 1.5rem;
}

.form-status.is-success {
  color: #70ddb7;
}

.friend-sections {
  display: grid;
  max-width: 820px;
  gap: 1rem;
}

.friend-section {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #13161d;
}

.friend-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .2rem .3rem .8rem;
}

.friend-section__heading h3 {
  margin: 0;
  font-size: .9rem;
}

.friend-section__heading span {
  color: var(--muted);
  font-size: .68rem;
}

.friend-list {
  display: grid;
  gap: .4rem;
}

.friend-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: 14px;
  background: #191d25;
}

.friend-identity {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: .15rem;
}

.friend-identity strong {
  overflow: hidden;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-identity small {
  color: var(--muted);
  font-size: .65rem;
}

.friend-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.friend-button {
  padding: .48rem .7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: #11141a;
  font-size: .66rem;
  font-weight: 800;
  cursor: pointer;
}

.friend-button:hover {
  color: var(--ink);
  border-color: rgba(216,255,91,.28);
}

.friend-button--primary {
  border-color: transparent;
  color: #111;
  background: var(--lime);
}

.request-pending {
  padding: .45rem .65rem;
  border-radius: 10px;
  color: var(--muted);
  background: #11141a;
  font-size: .65rem;
}

.friends-empty {
  margin: 0;
  padding: 1.3rem;
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
}

/* Dialogs */
.modal {
  width: min(540px,calc(100% - 2rem));
  max-height: min(760px,calc(100% - 2rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  color: var(--ink);
  background: #13161d;
  box-shadow: var(--shadow);
}

.modal::backdrop {
  background: rgba(2,3,5,.74);
  backdrop-filter: blur(8px);
}

.modal form,.details-content {
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  max-height: inherit;
  padding: 1.5rem;
}

.modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal>form>header,
.modal>.details-content>header,
.modal>.account-content>header {
  position: sticky;
  z-index: 20;
  top: 0;
  margin: -1.5rem -1.5rem .5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(19,22,29,.97);
  box-shadow: 0 10px 24px rgba(3,4,7,.2);
  backdrop-filter: blur(12px);
}

.modal h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: -.055em;
}

.modal .search {
  margin: 1.3rem 0 1rem;
}

.people-list {
  display: grid;
  gap: .35rem;
  min-height: 0;
  overflow-y: auto;
}

.person-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border-radius: 13px;
  cursor: pointer;
}

.person-option:hover {
  background: #1b1f28;
}

.person-option>span:nth-child(2) {
  display: grid;
  gap: .15rem;
  flex: 1;
}

.person-option strong {
  font-size: .79rem;
}

.person-option small {
  color: var(--muted);
  font-size: .65rem;
}

.person-option input {
  position: absolute;
  opacity: 0;
}

.person-option>i {
  width: 20px;
  height: 20px;
  border: 1px solid #4d5562;
  border-radius: 7px;
}

.person-option input:checked+i {
  display: grid;
  place-items: center;
  border-color: var(--lime);
  color: #111;
  background: var(--lime);
}

.person-option input:checked+i::after {
  content: "✓";
  font-size: .7rem;
  font-weight: 950;
}

.selected-people {
  display: flex;
  gap: .5rem;
  margin-bottom: .8rem;
  overflow: auto;
}

.selected-people button {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .55rem .3rem .3rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #1b1f28;
  font-size: .67rem;
}

.selected-people .avatar {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  font-size: .55rem;
}

.group-name-field {
  margin: .8rem 0;
}

.modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.modal footer>span {
  max-width: 240px;
  color: var(--muted);
  font-size: .67rem;
}

.modal footer .primary-button {
  min-width: 150px;
}

.modal--small {
  width: min(440px,calc(100% - 2rem));
}

.details-content {
  display: block;
}

.details-content header {
  margin-bottom: 1.2rem;
}

.detail-section {
  display: grid;
  gap: .35rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.detail-section>span {
  color: var(--muted);
  font-size: .67rem;
}

.detail-section>strong {
  font-size: .82rem;
}

.detail-members>div {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem 0;
}

.detail-members>div strong {
  flex: 1;
  font-size: .78rem;
}

.detail-members>div small {
  color: var(--muted);
  font-size: .65rem;
}

.detail-members .avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.public-field {
  margin: 1rem 0 0;
}

.public-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
  color: var(--ink);
  background: var(--panel-2);
  line-height: 1.5;
  resize: vertical;
}

.public-field textarea:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,255,91,.09);
}

#public-room-dialog {
  max-height: min(760px,calc(100dvh - 2rem));
  overflow: hidden;
}

#public-room-form {
  display: flex;
  max-height: inherit;
  flex-direction: column;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#public-room-form .settings-grid>* {
  min-width: 0;
}

#new-chat-dialog {
  height: min(720px,calc(100dvh - 2rem));
}

#new-chat-form {
  height: 100%;
  grid-template-rows: auto auto auto minmax(0,1fr) auto auto;
}

#new-chat-form>header {
  grid-row: 1;
}

#new-chat-form>.search {
  grid-row: 2;
}

#selected-people {
  grid-row: 3;
}

#people-list {
  grid-row: 4;
  min-height: 180px;
}

#group-name-field {
  grid-row: 5;
}

#new-chat-form>footer {
  grid-row: 6;
}

.modal--account {
  width: min(580px,calc(100% - 2rem));
  overflow-y: auto;
}

.account-content {
  display: grid;
  gap: 1.2rem;
  padding: 1.5rem;
}

.account-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
}

.account-actions button {
  flex: 1 1 180px;
  min-height: 44px;
}

.modal--compact {
  width: min(480px,calc(100% - 2rem));
}

.modal--compact .settings-form>header,
.modal--compact .settings-form>.destructive-warning,
.modal--compact .settings-form>.form-status,
.modal--compact .settings-form>footer {
  grid-column: 1/-1;
}

.destructive-warning {
  margin: .25rem 0;
  color: #d6a6a6;
  font-size: .75rem;
  line-height: 1.55;
}

.account-identity {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #0f1218;
}

.account-identity .avatar {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  font-size: 1rem;
}

.account-identity>div {
  display: grid;
  gap: .2rem;
}

.account-identity strong {
  font-size: 1rem;
}

.account-identity small {
  color: var(--muted);
  font-size: .72rem;
}

.settings-form {
  display: grid!important;
  grid-template-rows: none!important;
  grid-template-columns: 1fr 1fr;
  gap: .85rem!important;
  padding: 1.1rem!important;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #171a22;
}

.settings-form label {
  display: grid;
  gap: .45rem;
  color: #aab0bb;
  font-size: .7rem;
  font-weight: 750;
}

.settings-form input {
  width: 100%;
  height: 46px;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #10131a;
}

.settings-form input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,255,91,.09);
}

.settings-heading,.settings-form .form-status,.settings-form .primary-button {
  grid-column: 1/-1;
}

.settings-heading {
  display: grid;
  gap: .25rem;
}

.settings-heading strong {
  font-size: .88rem;
}

.settings-heading span {
  color: var(--muted);
  font-size: .67rem;
}

.settings-form .primary-button {
  justify-self: end;
  min-height: 44px;
}

.settings-form .form-status.is-success {
  color: #70ddb7;
}

.notification-settings {
  align-items: center;
}

.notification-settings .settings-note {
  margin: 0;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.45;
}

.notification-settings .secondary-button {
  justify-self: end;
}

.danger-button {
  justify-self: start;
  padding: .6rem .8rem;
  border: 1px solid rgba(255,125,125,.2);
  border-radius: 11px;
  color: #ff9898;
  background: rgba(255,125,125,.06);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.danger-button:hover {
  background: rgba(255,125,125,.12);
}

.danger-button:disabled {
  cursor: wait;
  opacity: .6;
}

.delete-room-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(255,125,125,.18);
  border-radius: 14px;
  background: rgba(255,125,125,.045);
}

.delete-room-section[hidden] {
  display: none;
}

.delete-room-section>div {
  display: grid;
  gap: .25rem;
}

.delete-room-section strong {
  color: #ff9898;
  font-size: .76rem;
}

.delete-room-section small {
  max-width: 380px;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.45;
}

.delete-room-section .danger-button {
  flex: 0 0 auto;
}

.member-directory {
  display: grid;
  gap: .5rem;
  max-height: min(60vh,520px);
  overflow-y: auto;
}

.member-directory-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: center;
  gap: .7rem;
  padding: .75rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: #191d25;
}

.member-directory-row:hover {
  border-color: var(--line);
}

.member-directory-row .avatar {
  width: 40px;
  height: 40px;
  border-radius: 13px;
}

.member-directory-identity {
  display: grid;
  min-width: 0;
  gap: .15rem;
}

.member-directory-identity strong {
  overflow: hidden;
  font-size: .8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-directory-identity small {
  color: var(--muted);
  font-size: .65rem;
}

.member-role,.member-relationship {
  padding: .4rem .55rem;
  border-radius: 9px;
  color: var(--muted);
  background: #10131a;
  font-size: .62rem;
  font-weight: 800;
}

.member-role {
  color: var(--lime);
}

.member-directory-action {
  display: flex;
  justify-content: flex-end;
}

.member-directory-action .friend-button:disabled {
  cursor: wait;
  opacity: .65;
}

.room-settings-form {
  display: grid;
  gap: 1rem;
  max-height: inherit;
  padding: 1.5rem;
}

.room-settings-form header {
  margin-bottom: .2rem;
}

.room-setting-field {
  display: grid;
  gap: .45rem;
  color: #aab0bb;
  font-size: .7rem;
  font-weight: 750;
}

.room-setting-field[hidden] {
  display: none;
}

.room-setting-field input,.room-setting-field select {
  width: 100%;
  height: 48px;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #10131a;
}

.room-setting-field input:focus,.room-setting-field select:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px rgba(216,255,91,.09);
}

.room-setting-field input:disabled,.room-setting-field select:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.settings-lock {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171a22;
  cursor: pointer;
}

.settings-lock[hidden] {
  display: none;
}

.settings-lock input {
  width: 18px;
  height: 18px;
  margin-top: .1rem;
  accent-color: var(--lime);
}

.settings-lock span {
  display: grid;
  gap: .2rem;
}

.settings-lock strong {
  font-size: .75rem;
}

.settings-lock small,.settings-note {
  color: var(--muted);
  font-size: .65rem;
  line-height: 1.45;
}

.settings-note {
  margin: 0;
}

.room-settings-form .form-status {
  min-height: 1em;
  margin: 0;
}

.room-settings-form .form-status.is-success {
  color: #70ddb7;
}

.conversation-view {
  grid-template-rows: 76px minmax(0,1fr) auto auto auto 78px;
}

.message-block {
  max-width: 100%;
}

.message-bubble--deleted {
  color: #858c98;
  background: #14171e;
  font-style: italic;
}

.reply-preview {
  display: grid;
  width: 100%;
  gap: .15rem;
  margin: -.25rem 0 .55rem;
  padding: 0 0 .5rem;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: inherit;
  background: none;
  text-align: left;
  cursor: pointer;
}

.reply-preview span {
  font-size: .65rem;
  font-weight: 900;
}

.reply-preview small {
  max-width: 320px;
  overflow: hidden;
  opacity: .7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-actions {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .25rem;
  opacity: 0;
  transition: opacity .15s;
}

.message-row--grouped-with-next .message-actions {
  position: absolute;
  z-index: 6;
  top: calc(100% + .2rem);
  left: 0;
  margin: 0;
}

.message-row--grouped-with-next.message-row--own .message-actions {
  right: 0;
  left: auto;
}

.message-row:hover .message-actions,.message-actions:focus-within {
  opacity: 1;
}

.message-actions button,.reaction-picker button {
  display: grid;
  min-width: 28px;
  height: 27px;
  place-items: center;
  padding: 0 .35rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: #11141a;
  cursor: pointer;
}

.reaction-picker {
  display: flex;
  gap: .2rem;
}

.reaction-picker button {
  font-size: .72rem;
}

.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .35rem;
}

.message-reactions button {
  padding: .25rem .48rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: #131720;
  font-size: .65rem;
  cursor: pointer;
}

.message-reactions button.is-mine {
  border-color: rgba(216,255,91,.35);
  color: var(--ink);
  background: rgba(216,255,91,.08);
}

.composer-context {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 clamp(1rem,3vw,2rem);
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
  background: #171b23;
}

.composer-context[hidden] {
  display: none;
}

.composer-context>div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: .15rem;
}

.composer-context span {
  color: var(--lime);
  font-size: .62rem;
  font-weight: 850;
}

.composer-context strong {
  overflow: hidden;
  font-size: .7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-context button {
  border: 0;
  color: var(--muted);
  background: none;
  font-size: 1.1rem;
  cursor: pointer;
}

.activity-tray {
  display: flex;
  gap: .55rem;
  margin: 0 clamp(1rem,3vw,2rem);
  padding: .7rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  background: #151820;
}

.activity-tray[hidden] {
  display: none;
}

.activity-tray>button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .15rem .65rem;
  min-width: 180px;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #10131a;
  text-align: left;
  cursor: pointer;
}

.activity-tray>button>span {
  grid-row: 1/3;
  font-size: 1.2rem;
  color: var(--lime);
}

.activity-tray strong {
  font-size: .72rem;
}

.activity-tray small {
  color: var(--muted);
  font-size: .6rem;
}

.activity-card {
  width: min(520px,72vw);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: #151922;
}

.activity-card.is-your-turn {
  border-color: rgba(216,255,91,.82);
  box-shadow: 0 0 0 2px rgba(216,255,91,.16),0 0 28px rgba(216,255,91,.16),inset 0 0 34px rgba(216,255,91,.035);
  animation: activity-turn-glow 2.4s ease-in-out infinite;
}

.activity-card.game-result--winner {
  border-color: rgba(80, 215, 170, .78);
  background: linear-gradient(145deg, rgba(80, 215, 170, .18), #111c1b 58%);
  box-shadow: 0 0 0 2px rgba(80, 215, 170, .1), inset 0 0 42px rgba(80, 215, 170, .08);
}

.activity-card.game-result--loser {
  border-color: rgba(255, 92, 103, .72);
  background: linear-gradient(145deg, rgba(255, 92, 103, .17), #211317 58%);
  box-shadow: 0 0 0 2px rgba(255, 92, 103, .08), inset 0 0 42px rgba(255, 92, 103, .07);
}

.game-result-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .9rem;
  padding: .72rem;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.game-result-badge span {
  font-size: 1.35rem;
  line-height: 1;
}

.game-result--winner .game-result-badge {
  color: #a8ffd9;
  background: rgba(80, 215, 170, .14);
}

.game-result--loser .game-result-badge {
  color: #ffadb3;
  background: rgba(255, 92, 103, .13);
}

.game-finish-announcement {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: game-finish-overlay 2.2s ease both;
}

.game-finish-announcement::before {
  position: absolute;
  inset: -35%;
  content: '';
  background: conic-gradient(from 0deg, #ff4f70, #ffd84f, #50d7aa, #55b8ff, #9a7cff, #ff70bd, #ff4f70);
  animation: game-finish-rainbow 2.2s linear both;
}

.game-finish-announcement span {
  position: relative;
  padding: .35em .6em;
  color: #fff;
  font-size: clamp(2.4rem, 9vw, 7rem);
  font-weight: 1000;
  line-height: .95;
  text-align: center;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .35), 0 0 28px rgba(0, 0, 0, .55);
  letter-spacing: -.045em;
  animation: game-finish-title 2.2s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes game-finish-overlay {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes game-finish-rainbow {
  0% { opacity: 0; transform: rotate(-12deg) scale(.7); }
  14% { opacity: .88; }
  82% { opacity: .78; }
  100% { opacity: 0; transform: rotate(28deg) scale(1.35); }
}

@keyframes game-finish-title {
  0% { opacity: 0; transform: scale(.45) rotate(-3deg); }
  18% { opacity: 1; transform: scale(1.08) rotate(1deg); }
  35%, 78% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .game-finish-announcement,
  .game-finish-announcement::before,
  .game-finish-announcement span {
    animation-duration: .35s;
  }
}

@keyframes activity-turn-glow {
  0%,100% {
    box-shadow: 0 0 0 2px rgba(216,255,91,.13),0 0 20px rgba(216,255,91,.11),inset 0 0 28px rgba(216,255,91,.025);
  }

  50% {
    box-shadow: 0 0 0 2px rgba(216,255,91,.24),0 0 34px rgba(216,255,91,.22),inset 0 0 38px rgba(216,255,91,.05);
  }
}

.activity-card>header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}

.activity-card--imposter {
  background: linear-gradient(145deg, #17213f, #10182f);
}

.imposter-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.imposter-players>span {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 10px 7px 7px;
  border: 1px solid #334064;
  border-radius: 999px;
  background: #111a33;
}

.imposter-players>span.is-ready {
  border-color: #e8d84f;
}

.imposter-players i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #283558;
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.imposter-players strong,
.imposter-players small {
  line-height: 1.15;
}

.imposter-players small {
  color: #9ca8c9;
  font-size: .68rem;
}

.imposter-help {
  margin: 12px 0;
  color: #aeb8d5;
  line-height: 1.45;
}

.imposter-actions,
.imposter-vote>div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.imposter-setup {
  margin-top: 14px;
}

.imposter-setup>strong,
.imposter-setup>span {
  display: block;
}

.imposter-setup>span {
  margin-top: 5px;
  color: #aeb8d5;
}

.imposter-setup-form {
  display: grid;
  gap: 14px;
}

.imposter-setup-form fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid #334064;
  border-radius: 12px;
}

.imposter-setup-form legend,
.imposter-setting-grid>label {
  color: #d8def0;
  font-size: .72rem;
  font-weight: 850;
}

.imposter-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 4px;
}

.imposter-category-grid label,
.imposter-vote form label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1px solid #334064;
  border-radius: 9px;
  color: #d8def0;
  background: #111a33;
  cursor: pointer;
}

.imposter-category-grid input,
.imposter-toggle input,
.imposter-spectator-toggle input,
.imposter-vote form input {
  accent-color: #e8d84f;
}

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

.imposter-setting-grid>label {
  display: grid;
  gap: 6px;
}

.imposter-setting-grid select {
  width: 100%;
  padding: 10px;
  border: 1px solid #3b486d;
  border-radius: 9px;
  color: #fff;
  background: #0d152b;
}

.imposter-toggle,
.imposter-spectator-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #334064;
  border-radius: 10px;
  color: #d8def0;
  background: #111a33;
}

.imposter-toggle span {
  display: grid;
  gap: 2px;
}

.imposter-toggle small {
  color: #9ca8c9;
  font-size: .65rem;
  font-weight: 500;
}

.imposter-toggle.is-disabled {
  border-color: #29334f;
  opacity: .48;
  filter: grayscale(.65);
  cursor: not-allowed;
}

.imposter-spectator-toggle {
  margin-top: 10px;
  cursor: pointer;
}

.imposter-identity {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 18px;
  border: 1px solid #e8d84f;
  border-radius: 14px;
  background: rgb(232 216 79 / 8%);
}

.imposter-identity.is-imposter {
  border-color: #9a7cff;
  background: rgb(154 124 255 / 10%);
}

.imposter-identity span,
.imposter-identity small {
  color: #aeb8d5;
}

.imposter-identity strong {
  color: #fff;
  font-size: 1.25rem;
}

.imposter-hints {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
}

.imposter-hints li {
  display: grid;
  grid-template-columns: minmax(80px, 130px) 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #121c36;
}

.imposter-hints span {
  color: #d8def0;
}

.imposter-hints strong {
  display: grid;
  gap: 2px;
}

.imposter-hints strong small {
  color: #7f8bad;
  font-size: .55rem;
  font-weight: 700;
}

.imposter-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 14px;
}

.imposter-entry input {
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid #3b486d;
  border-radius: 10px;
  outline: 0;
  background: #0d152b;
  color: #fff;
}

.imposter-entry input:focus {
  border-color: #e8d84f;
}

.imposter-entry--waiting input:disabled {
  border-color: #334064;
  background: #111a33;
  opacity: 1;
}

.imposter-entry--waiting input:disabled::placeholder {
  color: #c3cbe2;
  opacity: 1;
}

.imposter-entry>label {
  display: grid;
  gap: 5px;
}

.imposter-entry>label small,
.game-settings-sync,
.imposter-vote-count {
  color: #8f9abb;
  font-size: .64rem;
}

.game-settings-status {
  min-height: 0;
  padding: 9px 11px;
  border: 1px solid rgb(255 152 152 / 35%);
  border-radius: 9px;
  background: rgb(255 152 152 / 8%);
}

.game-settings-status:empty {
  display: none;
}

.game-settings-status.is-success {
  border-color: rgb(112 221 183 / 42%);
  color: #70ddb7;
  background: rgb(112 221 183 / 10%);
}

.imposter-vote {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #111a33;
}

.imposter-vote button {
  padding: 9px 12px;
  border: 1px solid #49577c;
  border-radius: 9px;
  background: #1a2545;
  color: #fff;
  cursor: pointer;
}

.imposter-vote button:hover {
  border-color: #e8d84f;
}

.imposter-vote form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.imposter-vote form .activity-primary {
  grid-column: 1 / -1;
}

.imposter-vote>.imposter-continue-meter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
  min-height: 52px;
  margin-top: 12px;
  border: 1px solid #4b587d;
  border-radius: 10px;
  background: linear-gradient(90deg, #e8d84f 0 var(--continue-share), #8e69e8 var(--continue-share) 100%);
  color: #101322;
}

.imposter-continue-meter span {
  display: grid;
  align-content: center;
  gap: 1px;
  position: relative;
  z-index: 1;
  padding: 8px 11px;
}

.imposter-continue-meter span:last-child {
  justify-items: end;
  color: #fff;
  text-align: right;
}

.imposter-continue-meter b {
  font-size: .76rem;
}

.imposter-continue-meter small {
  font-size: .6rem;
  font-weight: 750;
}

.imposter-vote-count {
  display: block;
  margin-top: 7px;
}

.imposter-result {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #59688e;
  border-radius: 12px;
  background: #111a33;
}

.imposter-result strong {
  color: #e8d84f;
  font-size: 1.05rem;
}

.imposter-result span {
  color: #bac4de;
}

.one-card-players {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.one-card-players>span {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border: 1px solid #343a4a;
  border-radius: 999px;
  background: #11151d;
}

.one-card-players>span.is-turn {
  border-color: var(--lime);
}

.one-card-players>span.is-ready {
  border-color: #e8d84f;
  background: rgb(232 216 79 / 8%);
}

.one-card-players strong {
  font-size: .65rem;
}

.one-card-players small {
  color: var(--muted);
  font-size: .55rem;
}

.one-card-lobby-actions {
  display: flex;
  gap: 8px;
}

.game-lobby-settings {
  margin: 10px 0 14px;
  border: 1px solid #334064;
  border-radius: 12px;
  background: #10172a;
}

.game-lobby-settings summary {
  padding: 11px 13px;
  color: #d8def0;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.game-lobby-settings>form {
  padding: 0 12px 12px;
}

.one-card-settings-form {
  display: grid;
  gap: 10px;
}

.one-card-settings-form>label:not(.imposter-toggle) {
  display: grid;
  gap: 6px;
  color: #d8def0;
  font-size: .68rem;
  font-weight: 800;
}

.one-card-settings-form select {
  padding: 10px;
  border: 1px solid #3b486d;
  border-radius: 9px;
  color: #fff;
  background: #0d152b;
}

.game-settings-locked {
  color: #8792ae;
  font-size: .62rem;
}

.one-card-table {
  display: grid;
  grid-template-columns: 86px 18px 86px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 140px;
  margin: 10px 0 14px;
  padding: 16px;
  border-radius: 14px;
  background: #0f131b;
}

.one-card-pile,
.one-card-card {
  display: grid;
  align-content: space-between;
  width: 76px;
  height: 110px;
  padding: 9px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 11px;
  color: #fff;
  text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

.one-card-pile {
  color: var(--lime);
  background: #242a38;
  cursor: pointer;
  transition: transform .16s ease,box-shadow .16s ease;
}

.one-card-pile:not(:disabled):hover {
  transform: translateY(-4px) rotate(-2deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.35),0 0 18px rgba(216,255,91,.12);
}

.one-card-pile.has-penalty {
  color: #fff;
  border-color: #ff626d;
  background: #7f2732;
  animation: one-card-penalty-pulse 1.2s ease-in-out infinite;
}

.one-card-pile span,
.one-card-card strong {
  font-size: 1.5rem;
  line-height: 1;
}

.one-card-pile small,
.one-card-card small {
  overflow: hidden;
  font-size: .52rem;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.one-card-current-color {
  width: 16px;
  height: 56px;
  border-radius: 999px;
}

.one-card-card--yellow,
.one-card-color--yellow {
  background: #c6ad16;
}

.one-card-card--purple,
.one-card-color--purple {
  background: #7856c8;
}

.one-card-card--green,
.one-card-color--green {
  background: #238d61;
}

.one-card-card--blue,
.one-card-color--blue {
  background: #276ab6;
}

.one-card-card--wild {
  background: linear-gradient(135deg,#c6ad16 0 25%,#7856c8 25% 50%,#238d61 50% 75%,#276ab6 75%);
  background-size: 140% 140%;
  animation: one-card-wild-shift 3s ease-in-out infinite alternate;
}

.one-card-hand {
  position: relative;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 3px 12px;
}

.one-card-hand .one-card-card {
  flex: 0 0 70px;
  height: 102px;
  cursor: pointer;
  transition: transform .14s ease,opacity .14s ease;
}

.one-card-hand .one-card-card:not(:disabled):hover {
  transform: translateY(-5px);
}

.one-card-hand .one-card-card:disabled {
  opacity: .48;
  cursor: default;
}

.one-card-hand .one-card-card.is-drawn {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

.one-card-color-picker {
  position: sticky;
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4,32px);
  gap: 6px;
  align-content: center;
  flex: 0 0 auto;
  padding: 8px;
  border: 1px solid #46506a;
  border-radius: 10px;
  background: #11151d;
}

.one-card-color-picker strong {
  grid-column: 1/-1;
  font-size: .6rem;
}

.one-card-color-picker button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 50%;
  cursor: pointer;
}

.one-card-pass {
  display: block;
  margin: 4px 0 0 auto;
}

@keyframes one-card-penalty-pulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,98,109,0); }
  50% { box-shadow: 0 0 22px rgba(255,98,109,.34); }
}

@keyframes one-card-wild-shift {
  from { background-position: 0 0; }
  to { background-position: 100% 100%; }
}

.activity-card header>div {
  display: grid;
  gap: .2rem;
}

.activity-kicker {
  color: var(--lime);
  font-size: .58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.activity-card header strong {
  font-size: .86rem;
}

.game-players,.poll-total {
  color: var(--muted);
  font-size: .6rem;
}

.game-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .8rem;
  padding-top: .65rem;
  border-top: 1px solid var(--line);
}

.game-resign {
  padding: .45rem .75rem;
  border: 1px solid rgba(255,125,125,.22);
  border-radius: 9px;
  color: #ff9d9d;
  background: rgba(255,125,125,.055);
  font-size: .61rem;
  font-weight: 850;
  cursor: pointer;
}

.game-resign:hover {
  border-color: rgba(255,125,125,.48);
  background: rgba(255,125,125,.1);
}

.connect-board {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: .35rem;
  padding: .55rem;
  border-radius: 15px;
  background: #0e1117;
}

.connect-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: #252b36;
  cursor: pointer;
}

.connect-cell:disabled {
  cursor: default;
}

.connect-cell--p1 {
  background: #d8ff5b;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18);
}

.connect-cell--p2 {
  background: #9a7cff;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.18);
}

.tic-tac-toe-board {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .4rem;
  width: min(260px,100%);
  margin: 0 auto;
  padding: .55rem;
  border-radius: 15px;
  background: #0e1117;
}

.tic-tac-toe-cell {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  background: #252b36;
  font-size: clamp(1.6rem,6vw,2.5rem);
  font-weight: 900;
  cursor: pointer;
}

.tic-tac-toe-cell--p1 {
  color: #111;
  background: var(--lime);
}

.tic-tac-toe-cell--p2 {
  color: #111;
  background: #9a7cff;
}

.tic-tac-toe-cell:disabled {
  cursor: default;
}

.checkers-board {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  width: min(430px,100%);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #0e1117;
  border-radius: 14px;
  background: #0e1117;
}

.checkers-cell {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
}

.checkers-cell--light {
  background: #d9c9a6;
}

.checkers-cell--dark {
  background: #465063;
  cursor: pointer;
}

.checkers-cell.is-selected {
  box-shadow: inset 0 0 0 4px var(--lime);
}

.checkers-cell.is-last-move {
  box-shadow: inset 0 0 0 4px rgba(255,180,84,.92);
}

.checkers-cell.is-last-move-end {
  box-shadow: inset 0 0 0 4px rgba(216,255,91,.95),inset 0 0 18px rgba(216,255,91,.42);
}

.checkers-cell.is-target::after {
  content: "";
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(216,255,91,.8);
  box-shadow: 0 0 12px rgba(216,255,91,.45);
}

.checker-piece {
  z-index: 1;
  display: grid;
  width: 72%;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #111;
  box-shadow: 0 3px 5px rgba(0,0,0,.34), inset 0 -4px rgba(0,0,0,.14);
  font-size: clamp(.45rem,2vw,.85rem);
}

.checker-piece--p1 {
  background: var(--lime);
}

.checker-piece--p2 {
  background: #9a7cff;
}

.checker-piece.is-king {
  border-color: #fff5bd;
  box-shadow: 0 3px 5px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,245,189,.55);
}

.mancala-board {
  display: grid;
  grid-template-columns: minmax(46px,.72fr) minmax(0,6fr) minmax(46px,.72fr);
  grid-template-rows: repeat(2,minmax(48px,auto));
  gap: .45rem;
  padding: .65rem;
  border: 1px solid rgba(216,255,91,.38);
  border-radius: 16px;
  background: #10131a;
}

.mancala-store {
  display: grid;
}

.mancala-store--left {
  grid-column: 1;
  grid-row: 1/3;
}

.mancala-store--right {
  grid-column: 3;
  grid-row: 1/3;
}

.mancala-pits {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: .38rem;
}

.mancala-pits--top {
  grid-row: 1;
}

.mancala-pits--bottom {
  grid-row: 2;
}

.mancala-pit {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: .18rem;
  border: 1px solid rgba(216,255,91,.44);
  border-radius: 50%;
  color: var(--lime);
  background: #171b23;
  cursor: pointer;
}

.mancala-pit--store {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 999px;
}

.mancala-pit:disabled {
  cursor: default;
}

.mancala-count {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 .25rem;
  border-radius: 999px;
  color: #12150d;
  background: var(--lime);
  font-size: .65rem;
  font-weight: 950;
}

.mancala-pit--p1 {
  border-color: rgba(216,255,91,.58);
}

.mancala-pit--p1 .mancala-count {
  color: #12150d;
  background: var(--lime);
}

.mancala-pit--p2 {
  border-color: rgba(154,124,255,.72);
}

.mancala-pit--p2 .mancala-count {
  color: #fff;
  background: #9a7cff;
}

.mancala-pit.is-sow-source {
  border-color: var(--lime);
  background: rgba(216,255,91,.14);
  box-shadow: 0 0 0 2px rgba(216,255,91,.12), inset 0 0 14px rgba(216,255,91,.08);
}

.mancala-pit.is-last-sow {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  box-shadow: 0 0 12px rgba(216,255,91,.2);
}

.mancala-pit--p2.is-sow-source {
  border-color: #9a7cff;
  background: rgba(154,124,255,.18);
  box-shadow: 0 0 0 2px rgba(154,124,255,.14), inset 0 0 14px rgba(154,124,255,.1);
}

.mancala-pit--p2.is-last-sow {
  outline-color: #9a7cff;
  box-shadow: 0 0 12px rgba(154,124,255,.24);
}

.activity-card--backgammon {
  width: min(760px, 88vw);
}

.backgammon-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .62rem;
}

.backgammon-status>span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.backgammon-chip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.backgammon-chip--p1,
.backgammon-point--p1 .backgammon-stack i {
  background: #e8d84f;
}

.backgammon-chip--p2,
.backgammon-point--p2 .backgammon-stack i {
  background: #9a7cff;
}

.backgammon-dice {
  display: flex;
  min-height: 34px;
  gap: 6px;
  margin-bottom: 10px;
}

.backgammon-dice span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #48506a;
  border-radius: 7px;
  color: #fff;
  background: #202536;
  font-weight: 900;
}

.backgammon-board {
  padding: 8px;
  border: 1px solid #34394a;
  border-radius: 12px;
  background: #0f1219;
}

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

.backgammon-point {
  position: relative;
  display: flex;
  min-width: 0;
  height: 142px;
  padding: 5px 2px;
  border: 1px solid transparent;
  color: #7f879a;
  background: #181c26;
  cursor: pointer;
}

.backgammon-row--top .backgammon-point {
  flex-direction: column;
}

.backgammon-row--bottom .backgammon-point {
  flex-direction: column-reverse;
}

.backgammon-point:nth-child(even) {
  background: #202536;
}

.backgammon-point small {
  font-size: .5rem;
}

.backgammon-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  padding-top: 3px;
}

.backgammon-row--bottom .backgammon-stack {
  justify-content: flex-end;
  padding: 0 0 3px;
}

.backgammon-stack i {
  display: block;
  width: min(25px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}

.backgammon-stack b {
  color: #fff;
  font-size: .55rem;
}

.backgammon-point.is-selected,
.backgammon-bar.is-selected {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.backgammon-point.is-target,
.backgammon-off.is-target {
  border-color: #e8d84f;
  box-shadow: inset 0 0 18px rgba(232, 216, 79, .12);
}

.backgammon-point.is-last-move {
  box-shadow: inset 0 0 16px rgba(154, 124, 255, .2);
}

.backgammon-point.is-last-move-end {
  box-shadow: inset 0 0 20px rgba(232, 216, 79, .24);
}

.backgammon-middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px 0;
}

.backgammon-bar,
.backgammon-off {
  padding: 7px 10px;
  border: 1px solid #34394a;
  border-radius: 7px;
  color: #cbd1df;
  background: #171b24;
  font-size: .62rem;
  font-weight: 800;
  cursor: pointer;
}

.backgammon-bar span,
.backgammon-off span {
  margin-left: 5px;
  color: #fff;
}

.backgammon-roll {
  width: 100%;
  margin-top: 10px;
}

.activity-card--battleship {
  width: min(620px,70vw);
}

.battleship-last-result {
  margin: .7rem 0;
  color: var(--muted);
  font-size: .64rem;
}

.battleship-placement-controls {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: end;
  gap: .55rem;
  margin-bottom: .8rem;
}

.battleship-ship-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.battleship-ship-picker button,
.battleship-rotate {
  padding: .38rem .5rem;
  border: 1px solid rgba(216,255,91,.24);
  border-radius: 8px;
  color: var(--muted);
  background: #10131a;
  font-size: .54rem;
  cursor: pointer;
}

.battleship-rotate {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.battleship-rotate.is-rotation-denied {
  color: #fff;
  border-color: #ff626d;
  background: rgba(255,76,89,.28);
  animation: battleship-rotation-denied .5s ease;
}

@keyframes battleship-rotation-denied {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.battleship-ship-picker button.is-selected {
  border-color: var(--lime);
  color: #12150d;
  background: var(--lime);
}

.battleship-ship-picker button:disabled,
.battleship-rotate:disabled {
  cursor: default;
  opacity: .58;
}

.battleship-ready {
  margin: 0;
  white-space: nowrap;
}

.battleship-boards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1rem;
}

.battleship-boards>section {
  min-width: 0;
}

.battleship-board-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: .4rem;
}

.battleship-board-title strong {
  color: var(--lime);
  font-size: .68rem;
}

.battleship-board-title small {
  color: var(--muted);
  font-size: .56rem;
}

.battleship-board {
  display: grid;
  grid-template-columns: repeat(10,1fr);
  overflow: hidden;
  border: 1px solid rgba(216,255,91,.34);
  border-radius: 10px;
  background: #0e1117;
}

.battleship-cell {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(216,255,91,.12);
  border-bottom: 1px solid rgba(216,255,91,.12);
  color: var(--lime);
  background: #151922;
  font-size: clamp(.48rem,1.2vw,.8rem);
  font-weight: 950;
}

.battleship-board--target .battleship-cell:not(:disabled) {
  cursor: crosshair;
}

.battleship-board--target .battleship-cell:not(:disabled):hover {
  background: rgba(216,255,91,.12);
}

.battleship-cell.has-ship {
  background: rgba(216,255,91,.34);
}

.battleship-cell.ship-hull--horizontal.ship-hull--start {
  border-radius: 999px 0 0 999px;
}

.battleship-cell.ship-hull--horizontal.ship-hull--end {
  border-radius: 0 999px 999px 0;
}

.battleship-cell.ship-hull--vertical.ship-hull--start {
  border-radius: 999px 999px 0 0;
}

.battleship-cell.ship-hull--vertical.ship-hull--end {
  border-radius: 0 0 999px 999px;
}

.battleship-cell.ship-hull--middle {
  border-radius: 0;
}

.battleship-board--placement .battleship-cell:not(:disabled) {
  cursor: crosshair;
}

.battleship-board--placement .battleship-cell:not(:disabled):hover {
  background: rgba(216,255,91,.16);
}

.battleship-cell.is-selected-ship {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(255,255,255,.88);
  outline-offset: -2px;
  background: rgba(216,255,91,.58);
  box-shadow: inset 0 0 12px rgba(216,255,91,.32);
}

.battleship-cell.is-selected-ship.is-placement-center {
  z-index: 2;
  outline: 3px solid #efffe8;
  outline-offset: -3px;
  background: #45d483;
  box-shadow: inset 0 0 12px rgba(255,255,255,.36), 0 0 14px rgba(69,212,131,.65);
}

.battleship-cell.is-miss {
  color: rgba(216,255,91,.9);
  background: rgba(216,255,91,.14);
  box-shadow: inset 0 0 14px rgba(216,255,91,.2),0 0 8px rgba(216,255,91,.1);
}

.battleship-cell.is-hit {
  color: #171b23;
  background: var(--lime);
}

.battleship-cell.is-sunk {
  color: var(--lime);
  background: #3a3f2d;
}

.battleship-cell.is-last-shot {
  position: relative;
  z-index: 1;
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.battleship-fleet {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: .45rem;
}

.battleship-fleet span {
  padding: .2rem .35rem;
  border: 1px solid rgba(216,255,91,.22);
  border-radius: 7px;
  color: var(--muted);
  font-size: .48rem;
}

.battleship-fleet span.is-sunk {
  opacity: .48;
  text-decoration: line-through;
}

.chess-board {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  width: min(430px,100%);
  margin: 0 auto;
  overflow: hidden;
  border: 3px solid #0e1117;
  border-radius: 14px;
  background: #0e1117;
}

.chess-cell {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  padding: 0;
  border: 0;
  color: #111;
  font-family: "Segoe UI Symbol","Noto Sans Symbols 2",serif;
  font-size: clamp(1.25rem,5vw,2.35rem);
  line-height: 1;
  text-shadow: 0 1px 1px rgba(255,255,255,.28),0 2px 3px rgba(0,0,0,.25);
  cursor: pointer;
}

.chess-cell--light {
  background: #d9c9a6;
}

.chess-cell--dark {
  background: #68758b;
}

.chess-cell.is-last-move {
  box-shadow: inset 0 0 0 4px rgba(255,180,84,.92),inset 0 0 18px rgba(255,180,84,.34);
}

.chess-cell.is-last-move-end {
  box-shadow: inset 0 0 0 4px rgba(216,255,91,.95),inset 0 0 18px rgba(216,255,91,.42);
}

.chess-cell.is-selected {
  box-shadow: inset 0 0 0 4px #fff5bd, inset 0 0 18px rgba(255,245,189,.5);
}

.chess-cell.is-target::after {
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(216,255,91,.82);
  box-shadow: 0 0 11px rgba(216,255,91,.5);
  content: "";
}

.chess-cell.is-capture-target::after {
  width: 72%;
  border: 4px solid rgba(216,255,91,.88);
  background: transparent;
}

.chess-cell.is-check {
  background: #d85f63;
  box-shadow: inset 0 0 18px rgba(90,0,0,.55);
}

.decision-wheel {
  position: relative;
  display: grid;
  width: 164px;
  height: 164px;
  place-items: center;
  margin: .2rem auto .8rem;
}

.decision-wheel__disc {
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  border: 6px solid #252b36;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--lime) 0 var(--wheel-half),#9a7cff var(--wheel-half) var(--wheel-full));
  box-shadow: 0 10px 24px rgba(0,0,0,.3), inset 0 0 0 3px rgba(16,19,26,.25);
}

.decision-wheel__disc>span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 4px solid #252b36;
  border-radius: 50%;
  color: var(--lime);
  background: #10131a;
}

.decision-wheel__disc.is-spinning {
  animation: decision-wheel-spin .8s cubic-bezier(.2,.8,.2,1);
}

.decision-wheel__pointer {
  z-index: 2;
  position: absolute;
  top: -1px;
  color: #fff;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
}

.wheel-count-2 {
  --wheel-half: 90deg;
  --wheel-full: 180deg;
}

.wheel-count-3 {
  --wheel-half: 60deg;
  --wheel-full: 120deg;
}

.wheel-count-4 {
  --wheel-half: 45deg;
  --wheel-full: 90deg;
}

.wheel-count-5 {
  --wheel-half: 36deg;
  --wheel-full: 72deg;
}

.wheel-count-6 {
  --wheel-half: 30deg;
  --wheel-full: 60deg;
}

.wheel-count-7 {
  --wheel-half: 25.714deg;
  --wheel-full: 51.428deg;
}

.wheel-count-8 {
  --wheel-half: 22.5deg;
  --wheel-full: 45deg;
}

.wheel-count-9 {
  --wheel-half: 20deg;
  --wheel-full: 40deg;
}

.wheel-count-10 {
  --wheel-half: 18deg;
  --wheel-full: 36deg;
}

.wheel-count-11 {
  --wheel-half: 16.364deg;
  --wheel-full: 32.727deg;
}

.wheel-count-12 {
  --wheel-half: 15deg;
  --wheel-full: 30deg;
}

.decision-wheel-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

.decision-wheel-options span {
  padding: .3rem .45rem;
  border-radius: 8px;
  color: var(--muted);
  background: #10131a;
  font-size: .58rem;
}

.decision-wheel-options .is-result {
  color: #111;
  background: var(--lime);
  font-weight: 900;
}

.decision-wheel-result {
  display: grid;
  gap: .15rem;
  margin: .7rem 0 0;
  text-align: center;
}

.decision-wheel-result span,.decision-wheel-result small {
  color: var(--muted);
  font-size: .58rem;
}

.decision-wheel-result strong {
  font-size: .88rem;
}

@keyframes decision-wheel-spin {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1080deg);
  }
}

.activity-primary {
  width: 100%;
  margin-top: .7rem;
  padding: .65rem;
  border: 0;
  border-radius: 11px;
  color: #111;
  background: var(--lime);
  font-size: .7rem;
  font-weight: 900;
  cursor: pointer;
}

.poll-options {
  display: grid;
  gap: .45rem;
}

.poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  overflow: hidden;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #10131a;
  cursor: pointer;
}

.poll-option-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  appearance: none;
  background: #10131a;
  pointer-events: none;
}

.poll-option-fill::-webkit-progress-bar {
  background: #10131a;
}

.poll-option-fill::-webkit-progress-value {
  background: var(--lime);
  box-shadow: inset -1px 0 rgba(16,19,26,.24);
}

.poll-option-fill::-moz-progress-bar {
  background: var(--lime);
  box-shadow: inset -1px 0 rgba(16,19,26,.24);
}

.poll-option strong,.poll-option small {
  z-index: 1;
  color: #fff;
  mix-blend-mode: difference;
}

.poll-option strong {
  font-size: .7rem;
}

.poll-option small {
  font-size: .6rem;
}

.poll-option.is-selected {
  border-color: rgba(216,255,91,.35);
}

.poll-form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.poll-form>label,.poll-option-fields label {
  display: grid;
  gap: .4rem;
  color: #aab0bb;
  font-size: .68rem;
  font-weight: 800;
}

.poll-form input {
  height: 46px;
  padding: 0 .8rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  outline: 0;
  color: var(--ink);
  background: #10131a;
}

.poll-option-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}

.privacy-setting {
  display: flex!important;
  grid-column: 1/-1!important;
  align-items: flex-start;
  gap: .65rem;
}

.privacy-setting>input {
  width: 18px!important;
  height: 18px!important;
  flex: 0 0 auto;
  margin-top: .1rem;
  accent-color: var(--lime);
}

.privacy-setting>span {
  display: grid;
  gap: .2rem;
}

.privacy-setting small {
  color: var(--muted);
  font-weight: 500;
}

.member-presence {
  position: relative;
  padding-left: .65rem;
}

.member-presence::before {
  position: absolute;
  top: .3rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #626a76;
  content: "";
}

.member-presence--online::before {
  background: #50d7aa;
  box-shadow: 0 0 8px #50d7aa;
}

.member-presence--away::before {
  background: #ffb454;
}

@media(max-width:980px) {
  .auth-view {
    grid-template-columns: 1fr;
  }
  .auth-story {
    display: none;
  }
  .app-view {
    grid-template-columns: 74px 330px minmax(0,1fr);
  }
  .public-room-grid {
    grid-template-columns: 1fr;
  }
  .expiration-chip {
    display: none;
  }
}

@media(max-width:720px) {
  #new-chat-dialog {
    width: calc(100% - 1rem);
    height: calc(100dvh - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  #people-list {
    min-height: 0;
  }

  #public-room-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
  }
}

@media(max-width:720px) {
  body {
    overflow: hidden;
  }
  .auth-panel {
    padding: 1.2rem;
  }
  .demo-accounts {
    grid-template-columns: 1fr;
  }
  .demo-accounts button {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .app-view {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0,1fr) 68px;
  }
  .app-rail {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: .5rem 1rem;
    border-top: 1px solid var(--line);
    border-right: 0;
  }
  .logo-mark {
    display: none;
  }
  .rail-actions {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column: 1;
    width: 100%;
    margin: 0;
  }
  .rail-button {
    padding: .4rem;
  }
  .rail-button.is-active::before {
    inset: auto auto -.5rem;
    width: 30px;
    height: 3px;
    border-radius: 5px;
  }
  .profile-button {
    grid-column: 2;
  }
  .list-panel {
    grid-row: 1;
    border-right: 0;
  }
  .content-panel {
    display: none;
    grid-row: 1;
  }
  .app-view.has-open-conversation .list-panel,.app-view.show-discover .list-panel {
    display: none;
  }
  .app-view.has-open-conversation .content-panel,.app-view.show-discover .content-panel {
    display: block;
  }
  .panel-header {
    padding: 1.5rem 1.2rem 1rem;
  }
  .search {
    margin: 0 1.2rem;
  }
  .filter-tabs {
    padding-left: 1.2rem;
  }
  .conversation-view {
    grid-template-rows: 70px minmax(0,1fr) auto 74px;
  }
  .back-button {
    display: block;
  }
  .message-stream {
    padding: 1.2rem;
  }
  .message-row {
    max-width: 92%;
  }
  .conversation-actions .circle-button:first-child {
    display: none;
  }
  .discover-view {
    padding: 1.5rem 1rem;
  }
  .discover-header {
    display: block;
  }
  .live-pill {
    display: inline-flex;
  }
  .public-room-grid {
    grid-template-columns: 1fr;
  }
  .modal form {
    padding: 1.1rem;
  }
  .modal footer {
    align-items: stretch;
    flex-direction: column;
  }
  .modal footer .primary-button {
    width: 100%;
  }
  .message-form {
    padding: 10px;
  }
  .composer-plus {
    display: none;
  }
  .settings-form {
    grid-template-columns: 1fr;
  }
  .settings-form label,.settings-form .form-status,.settings-form .primary-button,.settings-heading {
    grid-column: 1;
  }
  .account-content {
    padding: 1rem;
  }
}

@media(max-width:720px) {
  .rail-actions {
    grid-template-columns: repeat(3,1fr);
  }
  .app-view.show-friends .list-panel {
    display: none;
  }
  .app-view.show-friends .content-panel {
    display: block;
  }
  .friends-view {
    padding: 1.5rem 1rem;
  }
  .friend-add-form {
    align-items: stretch;
    flex-direction: column;
  }
  .friend-add-form .primary-button {
    min-height: 46px;
  }
  .friend-row {
    align-items: flex-start;
  }
  .friend-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .rail-button small {
    font-size: .55rem;
  }
}

@media(max-width:720px) {
  .conversation-actions .circle-button:first-child {
    display: grid;
  }
  .conversation-view {
    grid-template-rows: 70px minmax(0,1fr) auto auto auto 74px;
  }
  .composer-plus {
    display: grid;
  }
  .message-actions {
    opacity: 1;
  }
  .activity-card {
    width: min(100%,82vw);
  }
  .activity-tray {
    overflow-x: auto;
  }
  .activity-tray>button {
    min-width: 155px;
  }
  .poll-option-fields {
    grid-template-columns: 1fr;
  }
}

.discover-filters {
  display: grid;
  grid-template-columns: minmax(220px,1fr) 180px auto;
  align-items: end;
  gap: .7rem;
  margin: 2rem 0 1rem;
}

.discover-filters .search {
  max-width: none;
  margin: 0;
}

.discover-filters select,.secondary-button {
  height: 46px;
  padding: 0 .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #171a22;
  font-size: .7rem;
  font-weight: 800;
}

.secondary-button {
  cursor: pointer;
}

.card-favorite,.favorite-button {
  margin-left: auto;
  border: 0;
  color: #d8ff5b;
  background: none;
  font-size: 1.35rem;
  cursor: pointer;
}

.public-current-topic {
  display: block;
  min-height: 1em;
  margin-bottom: .45rem;
  color: var(--ink);
  font-size: .72rem;
}

.room-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-top: .65rem;
}

.room-tags span {
  padding: .25rem .4rem;
  border-radius: 8px;
  color: #aeb5c1;
  background: #0f1218;
  font-size: .58rem;
}

.room-preview {
  display: grid;
  gap: .3rem;
  margin: .7rem 0 0;
  padding: .65rem;
  list-style: none;
  border-radius: 11px;
  background: rgba(5,7,10,.28);
}

.room-preview li {
  overflow: hidden;
  color: var(--muted);
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-preview strong {
  color: var(--ink);
}

.public-room-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .8rem;
}

.public-room-metrics span {
  padding: .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: .56rem;
}

.room-join-button:disabled {
  cursor: not-allowed;
  opacity: .62;
}

.archive-section {
  margin-top: 1.5rem;
}

.archive-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.archive-heading h3 {
  margin: .15rem 0;
  font-size: 1.8rem;
}

.archive-grid {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.archive-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #151820;
}

.archive-card h4 {
  margin: .25rem 0;
  font-size: 1rem;
}

.archive-card p {
  margin: 0;
  color: var(--muted);
  font-size: .65rem;
}

.archive-card .secondary-button {
  flex: 0 0 auto;
}

.public-settings {
  display: grid;
  gap: 1rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}

.settings-section-heading {
  display: grid;
  gap: .2rem;
  margin-top: .4rem;
}

.settings-section-heading strong {
  font-size: .8rem;
}

.settings-section-heading small,.room-setting-field small {
  color: var(--muted);
  font-size: .61rem;
  font-weight: 500;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.room-setting-field textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  color: var(--ink);
  background: #10131a;
  resize: vertical;
}

.settings-switches {
  display: grid;
  gap: .5rem;
}

.settings-switches label,.settings-inline-check,.permission-option {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #171a22;
}

.settings-switches input,.settings-inline-check input,.permission-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--lime);
}

.settings-switches span,.permission-option span {
  display: grid;
  gap: .15rem;
}

.settings-switches strong,.permission-option strong {
  font-size: .68rem;
}

.settings-switches small,.permission-option small {
  color: var(--muted);
  font-size: .58rem;
  line-height: 1.4;
}

.moderation-tools {
  display: grid;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid rgba(216,255,91,.14);
  border-radius: 14px;
  background: rgba(216,255,91,.035);
}

.permission-grid {
  display: grid;
  gap: .5rem;
}

.member-role--moderator {
  color: #bdaeff;
}

.join-request-row {
  border-color: rgba(216,255,91,.16);
}

.thread-body {
  display: grid;
  gap: .55rem;
  max-height: 60vh;
  overflow-y: auto;
}

.thread-message {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .75rem;
  border-radius: 13px;
  background: #191d25;
}

.thread-message .avatar {
  width: 35px;
  height: 35px;
  border-radius: 11px;
}

.thread-message div {
  display: grid;
  gap: .2rem;
}

.thread-message strong {
  font-size: .72rem;
}

.thread-message p {
  margin: 0;
  font-size: .75rem;
}

.thread-message small {
  color: var(--muted);
  font-size: .58rem;
}

.thread-count {
  width: auto!important;
  padding: 0 .55rem!important;
  font-size: .58rem;
}

.room-settings-form {
  overflow-y: auto;
}

.modal:has(#room-settings-form) {
  width: min(680px,calc(100% - 2rem));
}

.public-room-overview {
  display: grid;
  width: min(760px,100%);
  gap: .65rem;
  margin: 0 auto 1.2rem;
}

.room-overview-main {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: linear-gradient(140deg,rgba(154,124,255,.1),#151820);
}

.room-overview-main h3 {
  margin: .25rem 0 0;
  font-size: 1rem;
}

.room-warning,.room-announcement {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(255,180,84,.22);
  border-radius: 13px;
  background: rgba(255,180,84,.07);
}

.room-warning {
  display: grid;
  gap: .2rem;
}

.room-warning strong {
  font-size: .7rem;
}

.room-warning span,.room-announcement p {
  margin: 0;
  color: #c7bdad;
  font-size: .65rem;
}

.room-announcement>span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 8px;
  color: #111;
  background: var(--lime);
  font-size: .7rem;
  font-weight: 900;
}

.room-events,.room-pins {
  display: grid;
  gap: .4rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #14171e;
}

.room-events h4,.room-pins h4 {
  margin: 0 0 .2rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.room-events article {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: .15rem .6rem;
  padding: .45rem;
  border-radius: 9px;
  background: #10131a;
}

.room-events article span {
  grid-row: 1/3;
  color: var(--lime);
  font-size: .57rem;
}

.room-events article strong {
  font-size: .68rem;
}

.room-events article small {
  color: var(--muted);
  font-size: .58rem;
}

.room-pins button {
  overflow: hidden;
  padding: .5rem;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: #10131a;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

/* Optional composer panels collapse without leaving a reserved row below the message form. */
.conversation-view {
  grid-template-rows: 76px minmax(0,1fr) repeat(4,auto);
}

@media(max-width:720px) {
  .conversation-view {
    grid-template-rows: 70px minmax(0,1fr) repeat(4,auto);
  }

  .new-message-indicator {
    right: .9rem;
    bottom: 145px;
  }

  .activity-card--battleship {
    width: 82vw;
  }

  .battleship-boards {
    grid-template-columns: 1fr;
  }

  .battleship-placement-controls {
    grid-template-columns: 1fr 1fr;
  }

  .battleship-ship-picker {
    grid-column: 1/-1;
  }
}

@media(max-width:720px) {
  .discover-filters {
    grid-template-columns: 1fr 1fr;
  }
  .discover-filters .search {
    grid-column: 1/-1;
  }
  .settings-grid {
    grid-template-columns: 1fr;
  }
  .public-room-overview {
    margin-top: -.25rem;
  }
  .room-events article {
    grid-template-columns: 1fr;
  }
  .room-events article span {
    grid-row: auto;
  }
  .archive-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .archive-card .secondary-button {
    width: 100%;
  }
  .modal:has(#room-settings-form) {
    width: calc(100% - 1rem);
  }
}

@media(max-width:520px) {
  .imposter-entry {
    grid-template-columns: 1fr;
  }
  .imposter-entry .activity-primary {
    width: 100%;
  }
  .imposter-hints li {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .member-directory-row {
    grid-template-columns: auto minmax(0,1fr) auto;
  }
  .member-directory-action {
    grid-column: 2/-1;
    justify-content: flex-start;
  }
  .room-settings-form {
    padding: 1.1rem;
  }
  .discover-filters {
    grid-template-columns: 1fr;
  }
  .discover-filters .search {
    grid-column: 1;
  }
  .public-room-card {
    padding: 1.1rem;
  }
  .delete-room-section {
    align-items: stretch;
    flex-direction: column;
  }
  .delete-room-section .danger-button {
    width: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior: auto!important;
    transition: none!important;
  }
}

.modal--word-banks {
  width: min(920px,calc(100% - 2rem));
  max-height: min(820px,calc(100dvh - 2rem));
  padding: 0;
}

.word-bank-content>header {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid var(--line);
  background: #171a21;
}

.word-bank-content>header h2 {
  margin: 0;
}

.word-bank-layout {
  display: grid;
  grid-template-columns: minmax(240px,.75fr) minmax(320px,1.25fr);
  gap: 1rem;
  padding: 1.25rem;
}

.word-bank-library {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.word-bank-list {
  display: grid;
  gap: .55rem;
}

.word-bank-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #10131a;
}

.word-bank-card>div:first-child {
  display: grid;
  min-width: 0;
  gap: .15rem;
}

.word-bank-card small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.word-bank-card>div:last-child,.word-bank-form-actions {
  display: flex;
  gap: .45rem;
}

.word-bank-card button {
  padding: .45rem .6rem;
}

#word-bank-form textarea {
  min-height: 240px;
  resize: vertical;
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  line-height: 1.45;
}

.imposter-category-grid label span small {
  color: var(--muted);
}

@media(max-width:720px) {
  .modal--word-banks {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
  }

  .word-bank-layout {
    grid-template-columns: 1fr;
  }

  .word-bank-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Phone usability: keep every dialog reachable and every game inside the chat column. */
@media(max-width:520px) {
  .conversation-view,
  .conversation-header,
  .message-stream {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .conversation-header {
    gap: .4rem;
    padding-inline: .55rem;
  }

  .back-button {
    width: 26px;
    flex: 0 0 26px;
    padding: 0;
  }

  .room-avatar>.avatar {
    width: 38px;
    height: 38px;
  }

  .conversation-heading {
    min-width: 0;
    flex: 1;
  }

  .conversation-heading p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .conversation-actions {
    flex: 0 0 auto;
    gap: .25rem;
  }

  .conversation-actions .circle-button {
    width: 36px;
    height: 36px;
  }

  .modal,
  .modal--small,
  .modal--compact,
  .modal--account,
  .modal--word-banks,
  #new-chat-dialog,
  #public-room-dialog,
  .modal:has(#room-settings-form) {
    width: calc(100% - .75rem);
    max-width: none;
    max-height: calc(100dvh - .75rem);
    overflow-x: hidden;
    border-radius: 16px;
  }

  .modal form,
  .details-content,
  .account-content,
  .word-bank-layout {
    min-width: 0;
    padding: .85rem!important;
  }

  .modal form>*,
  .details-content>*,
  .account-content>*,
  .word-bank-layout>* {
    min-width: 0;
    max-width: 100%;
  }

  .modal>form>header,
  .modal>.details-content>header,
  .modal>.account-content>header {
    margin: -.85rem -.85rem .4rem;
    padding: .9rem;
  }

  .word-bank-content>header {
    padding: .9rem;
  }

  .modal h2 {
    font-size: 1.45rem;
  }

  .modal footer {
    gap: .6rem;
  }

  .modal footer>span {
    max-width: none;
  }

  .settings-form {
    gap: .65rem!important;
    padding: .8rem!important;
  }

  .settings-form input,
  .settings-form select,
  .settings-form textarea,
  .public-field textarea {
    min-width: 0;
    max-width: 100%;
  }

  .profile-color-options {
    gap: .5rem;
  }

  .profile-color-options label {
    min-width: 38px;
  }

  .profile-color-swatch {
    width: 32px;
    height: 32px;
  }

  .member-directory-row,
  .friend-row {
    min-width: 0;
  }

  .message-stream {
    padding: .65rem;
  }

  .message-row {
    max-width: 96%;
  }

  .message-row:has(.activity-card) {
    width: 100%;
    max-width: 100%;
  }

  .message-row:has(.activity-card)>.avatar,
  .message-row:has(.activity-card)>.avatar-spacer {
    display: none;
  }

  .message-row:has(.activity-card) .message-block {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .activity-card,
  .activity-card--backgammon,
  .activity-card--battleship,
  .activity-card--imposter {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: .65rem;
    border-radius: 14px;
  }

  .activity-card * {
    min-width: 0;
  }

  .activity-card>header {
    gap: .5rem;
    margin-bottom: .6rem;
  }

  .activity-card header strong {
    font-size: .76rem;
  }

  .connect-board {
    gap: .22rem;
    padding: .4rem;
    border-radius: 11px;
  }

  .tic-tac-toe-board {
    width: min(210px,100%);
  }

  .checkers-board,
  .chess-board {
    width: min(280px,100%);
    border-width: 2px;
    border-radius: 10px;
  }

  .checker-piece {
    border-width: 2px;
  }

  .chess-cell {
    font-size: clamp(1rem,7vw,1.55rem);
  }

  .mancala-board {
    grid-template-columns: minmax(30px,.6fr) minmax(0,6fr) minmax(30px,.6fr);
    grid-template-rows: repeat(2,minmax(34px,auto));
    gap: .25rem;
    padding: .4rem;
    border-radius: 11px;
  }

  .mancala-pits {
    gap: .18rem;
  }

  .mancala-count {
    min-width: 18px;
    height: 18px;
    padding: 0 .15rem;
    font-size: .52rem;
  }

  .backgammon-board {
    padding: 5px;
  }

  .backgammon-row {
    gap: 1px;
  }

  .backgammon-point {
    height: 88px;
    padding: 3px 1px;
  }

  .backgammon-point small {
    font-size: .4rem;
  }

  .backgammon-stack {
    gap: 1px;
  }

  .backgammon-stack i {
    width: min(16px,82%);
  }

  .backgammon-middle {
    gap: 4px;
    padding: 4px 0;
  }

  .battleship-placement-controls {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
  }

  .battleship-ship-picker {
    grid-column: 1/-1;
  }

  .battleship-ready {
    white-space: normal;
  }

  .battleship-board {
    width: min(280px,100%);
    margin-inline: auto;
  }

  .battleship-cell {
    font-size: .48rem;
  }

  .one-card-table {
    grid-template-columns: 60px 12px 60px;
    gap: 8px;
    min-height: 102px;
    padding: 9px;
  }

  .one-card-lobby-actions {
    flex-wrap: wrap;
  }

  .one-card-pile,
  .one-card-card {
    width: 58px;
    height: 84px;
    padding: 6px;
    border-radius: 8px;
  }

  .one-card-pile span,
  .one-card-card strong {
    font-size: 1.1rem;
  }

  .one-card-hand .one-card-card {
    flex-basis: 56px;
    height: 82px;
  }

  .one-card-color-picker {
    grid-template-columns: repeat(4,28px);
  }

  .one-card-color-picker button {
    width: 28px;
    height: 28px;
  }

  .decision-wheel {
    width: 132px;
    height: 132px;
  }

  .decision-wheel__disc {
    width: 120px;
    height: 120px;
  }

  .imposter-category-grid,
  .imposter-setting-grid,
  .imposter-vote form {
    grid-template-columns: 1fr;
  }

  .imposter-setup-form fieldset,
  .imposter-vote,
  .imposter-identity {
    padding: .65rem;
  }

  .imposter-players>span {
    grid-template-columns: 25px auto;
    padding: 5px 8px 5px 5px;
  }

  .imposter-players i {
    width: 25px;
    height: 25px;
  }

  .poll-option,
  .activity-primary {
    min-height: 40px;
  }

  .activity-tray {
    margin-inline: .5rem;
    padding: .5rem;
  }

  .activity-tray>button {
    min-width: 132px;
    padding: .55rem;
  }

  .message-form {
    padding-bottom: max(8px,env(safe-area-inset-bottom));
  }
}