@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap";
.private-tabs {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  display: flex;
}
.private-tabs button {
  color: #aebba1;
  background: #c7d4ba06;
  border: 1px solid #c7d4ba30;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 13px;
  display: flex;
}
.private-tabs button.selected {
  color: #e0f88c;
  background: #d8f08213;
  border-color: #d8f08288;
}
.private-list-heading {
  color: #acbaa3;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  font-size: 13px;
  display: flex;
}
.private-list-heading button {
  background: #ffffff08;
  border-radius: 12px;
  width: 44px;
  height: 44px;
}
.private-room-card {
  border-bottom: 1px solid #c7d4ba20;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  display: flex;
}
.private-room-card > div {
  min-width: 0;
}
.private-room-card strong {
  overflow-wrap: anywhere;
  align-items: center;
  gap: 7px;
  display: flex;
}
.private-room-card small {
  color: #9fae95;
  margin-top: 7px;
  display: block;
}
.private-room-card button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 15px;
}
.private-join {
  background: #d8f08209;
  border: 1px solid #d8f08240;
  border-radius: 16px;
  margin-top: 20px;
  padding: 18px;
}
.private-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  display: flex;
}
.private-actions button {
  min-height: 44px;
  padding: 10px 18px;
}
.private-price {
  background: linear-gradient(120deg, #d8f08212, #8bc6c00a);
  border: 1px solid #d8f08230;
  border-radius: 16px;
  margin: 0 0 20px;
  padding: 18px;
}
.private-price > span {
  letter-spacing: 2px;
  color: #b9c8a9;
  font-size: 10px;
  display: block;
}
.private-price > strong {
  margin: 7px 0 12px;
  font-size: 26px;
  display: block;
}
.private-price p,
.private-manage > p,
.private-close-confirm p {
  color: #b4c1a9;
  font-size: 13px;
  line-height: 1.7;
}
.private-create label > input,
.private-join label > input {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
}
.private-create .private-consent {
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
}
.private-consent input {
  accent-color: #d8f082;
  flex-shrink: 0;
  height: 22px;
  margin-top: 2px;
  width: 22px !important;
  min-height: 22px !important;
}
.private-member {
  border-bottom: 1px solid #c7d4ba20;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  display: flex;
}
.private-member > strong,
.private-member > span {
  overflow-wrap: anywhere;
  max-width: 100%;
}
.private-member > div {
  gap: 6px;
  display: flex;
}
.private-member button {
  background: #ffffff09;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 11px;
  font-size: 12px;
  display: inline-flex;
}
.private-manage h3 {
  overflow-wrap: anywhere;
  gap: 10px;
  display: flex;
}
.private-manage h4 {
  margin: 24px 0 5px;
}
.private-leave {
  color: #f6b5a4;
  background: #e8684810;
  border: 1px solid #ef9e8a66;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 24px;
  display: flex;
}
.private-close-confirm {
  border: 1px solid #ef9e8a55;
  border-radius: 12px;
  margin-top: 20px;
  padding: 16px;
}
.private-return {
  justify-content: center;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
  display: flex;
}
.private-gate {
  z-index: 100;
  pointer-events: none;
  position: fixed;
  inset: 0;
}
.private-gate dialog {
  pointer-events: auto;
}
@media (width<=720px) {
  .private-tabs {
    gap: 6px;
  }
  .private-tabs button {
    flex: 1;
    padding: 9px;
    font-size: 12px;
  }
  .private-price {
    padding: 14px;
  }
  .private-room-card {
    padding: 14px 0;
  }
  .private-room-card strong {
    font-size: 14px;
  }
  .private-room-card small {
    font-size: 11px;
  }
  .private-member button {
    padding: 8px 10px;
  }
}
.private-room-launch {
  z-index: 16;
  color: #e7f6bd;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  white-space: nowrap;
  background: linear-gradient(135deg, #293821ed, #17291fed);
  border: 1px solid #d8f08288;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: 142px;
  height: 48px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
  display: inline-flex;
  position: absolute;
  bottom: 26px;
  left: 252px;
  box-shadow:
    0 5px 24px #0005,
    inset 0 1px #ffffff10;
}
.private-room-launch:hover {
  background: #33482a;
  border-color: #e8fba6;
  transform: translateY(-1px);
}
.private-room-launch:focus-visible {
  outline-offset: 4px;
  outline: 2px solid #e7f6bd;
}
.private-room-launch > svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.private-room-launch > span {
  line-height: 1.1;
  display: block;
}
@media (width<=1200px) {
  .private-room-launch {
    height: 44px;
    bottom: 90px;
    left: 28px;
  }
}
@media (width<=720px) {
  .private-room-launch {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(146px + env(safe-area-inset-bottom));
    min-width: 136px;
    padding: 0 15px;
  }
  .keyboard-open .private-room-launch {
    display: none;
  }
}
@media (height<=500px) and (width<=1000px) {
  .private-room-launch {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(76px + env(safe-area-inset-bottom));
    height: 44px;
  }
  .keyboard-open .private-room-launch {
    display: none;
  }
}
.legal-doc {
  color: #d6dfca;
  max-height: min(62vh, 560px);
  padding-right: 6px;
  font-size: 13.5px;
  line-height: 1.65;
  overflow: auto;
}
.legal-doc section + section {
  margin-top: 14px;
}
.legal-doc h3 {
  color: #eef3e6;
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 650;
}
.legal-doc p {
  margin: 0 0 6px;
}
.legal-doc ul {
  margin: 4px 0 6px;
  padding-left: 18px;
}
.legal-doc li {
  margin: 3px 0;
}
.legal-switch {
  margin-top: 14px !important;
}
.legal-switch button,
.terms-consent button,
.legal-links button {
  color: #d8ef82;
  font: inherit;
  cursor: pointer;
  background: 0 0;
  border: 0;
  min-height: auto;
  padding: 0;
  text-decoration: underline;
}
.terms-consent {
  color: #c9d5bd;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 4px;
  font-size: 12.5px;
  line-height: 1.5;
  flex-direction: row !important;
  display: flex !important;
}
.terms-consent input {
  accent-color: #d8ef82;
  flex-shrink: 0;
  margin: 2px 0 0;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
}
.legal-links {
  color: #aab7a0;
  text-align: center;
  margin-top: 10px;
  font-size: 12.5px;
}
.room-dock > .room-link {
  color: #cad6bb;
  white-space: nowrap;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-width: 74px;
  min-height: 59px;
  padding: 9px 12px;
  font-size: 8px;
  text-decoration: none;
  display: flex;
  position: relative;
}
.room-dock > .room-link:hover {
  color: #e1f8b1;
  background: #cce99116;
}
.room-link:focus-visible,
.room-choices > a:focus-visible {
  outline-offset: 3px;
  outline: 2px solid #d6ef82;
}
.room-choices {
  gap: 8px;
  margin-top: 18px;
  display: flex;
}
.room-choices > a {
  color: #c8d4bd;
  border: 1px solid #c5d6af33;
  border-radius: 10px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px;
  font-size: 12px;
  text-decoration: none;
  display: flex;
}
.room-choices > a[aria-current="page"] {
  color: #e3f5bc;
  background: #d4ec8a14;
  border-color: #d4ec8a77;
}
.settings-actions > .room-choices {
  grid-column: 1/-1;
  width: 100%;
  margin-top: 0;
}
.game-room-lobby {
  color: #eff4e6;
  text-align: center;
  background: radial-gradient(at 50% 25%, #273d33, #111b18 70%);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 40px;
  display: flex;
  position: absolute;
  inset: 0;
}
.game-room-lobby h1 {
  margin: 0;
  font-size: 48px;
  line-height: 1.2;
}
.game-room-lobby p {
  color: #b8c9b2;
  margin: 0;
  font-size: 23px;
  line-height: 1.55;
}
.game-lobby-mark {
  color: #d5ed8b;
}
.game-lobby-actions {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: min(840px, 100%);
  margin: 12px 0;
  display: grid;
}
.game-lobby-actions > button {
  color: #e9f3da;
  background: #d5ed8b0a;
  border: 1px solid #d5ed8b66;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 160px;
  padding: 30px 20px;
  display: flex;
}
.game-lobby-actions > button:hover {
  background: #d5ed8b1c;
}
.game-lobby-actions > button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.game-lobby-actions strong {
  font-size: 30px;
}
.game-lobby-actions span {
  color: #bdcdb5;
  font-size: 20px;
}
.game-room-lobby small {
  color: #aebfa8;
  font-size: 18px;
}
.game-lobby-wait {
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin: 25px 0;
  font-size: 30px;
  display: flex;
}
.game-lobby-wait button {
  color: #192214;
  background: #d5ed8b;
  border-radius: 12px;
  gap: 12px;
  min-height: 72px;
  padding: 18px 28px;
  font-size: 24px;
}
@media (width<=720px), (height<=500px) and (width<=1000px) {
  .room-dock > .room-link {
    white-space: normal;
    gap: 4px;
    width: 56px;
    min-width: 56px;
    height: 49px;
    min-height: 49px;
    padding: 5px 2px;
    font-size: 10px;
    line-height: 1.2;
  }
  .room-dock > .room-link > svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }
  .room-choices > a {
    white-space: normal;
    min-height: 44px;
    font-size: 12px;
  }
}
@media (height<=500px) and (width<=1000px) and (orientation: landscape) {
  .room-dock > .room-link {
    height: 46px;
    min-height: 46px;
    font-size: 9px;
  }
}
.signup-security {
  width: 100%;
  min-width: 0;
  margin: 4px 0 12px;
}
.signup-security > div {
  max-width: 100%;
  min-height: 65px;
}
.signup-security p {
  color: #c8d3bd;
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.5;
}
.signup-security small {
  color: #aebba1;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}
.signup-security > .signup-retry {
  color: #d6ef82;
  background: #d6ef820a;
  border: 1px solid #d6ef8266;
  border-radius: 8px;
  min-height: 44px;
  margin: 2px 0 10px;
  padding: 10px 14px;
}
.volume-control {
  align-items: center;
  gap: 4px;
  display: flex;
  position: relative;
}
.hud-sound .volume-toggle {
  font-variant-numeric: tabular-nums;
  color: #d8efb5;
  min-width: 48px;
  font-size: 11px;
}
.volume-popover {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #e9eee0;
  background: #121b16f5;
  border: 1px solid #d6e5c63b;
  border-radius: 14px;
  width: 232px;
  padding: 15px 16px 12px;
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  box-shadow: 0 10px 36px #0008;
}
.volume-popover label {
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 14px;
  display: flex;
}
.volume-popover output {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.volume-popover input[type="range"] {
  width: 100%;
  height: 44px;
  accent-color: var(--accent);
  cursor: pointer;
  touch-action: pan-y;
  background: 0 0;
  border: 0;
  margin: 2px 0;
  padding: 0;
  display: block;
}
.volume-popover input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.volume-popover small {
  color: #b7c6a8;
  font-size: 11px;
  line-height: 1.5;
  display: block;
}
@media (width<=720px), (height<=500px) {
  .hud-sound,
  .volume-control {
    gap: 8px;
  }
  .hud-sound .volume-toggle {
    width: 48px;
    min-height: 44px;
  }
  .immersive-app .quick-chat {
    right: 181px;
  }
  .immersive-app.keyboard-open .quick-chat {
    right: max(12px, env(safe-area-inset-right));
  }
  .volume-popover {
    width: min(232px, 100vw - 24px);
    bottom: calc(100% + 12px);
  }
}
.screen-choices {
  text-align: center;
  background: radial-gradient(at 75% 20%, #42533c80, #0000 60%), #12201b;
  flex-direction: column;
  justify-content: center;
  padding: 70px 100px;
  display: flex;
  position: absolute;
  inset: 0;
}
.screen-choices h1 {
  letter-spacing: -1px;
  margin: 18px 0 40px;
  font-size: 48px;
}
.screen-choice-grid {
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  display: grid;
}
.screen-choice-grid button {
  color: #d8ef82;
  pointer-events: auto;
  background: #d8ef8209;
  border: 2px solid #d8ef824d;
  border-radius: 24px;
  flex-direction: column;
  min-height: 290px;
  padding: 30px;
}
.screen-choice-grid button:last-child {
  color: #ffb18e;
  background: #ff815d0b;
  border-color: #ff815d66;
}
.screen-choice-grid strong {
  font-size: 36px;
}
.screen-choice-grid span {
  color: #c1cfb9;
  font-size: 20px;
}
.screen-choice-grid button:hover {
  background: #d8ef821c;
}
.game-screen {
  background: #0a1016;
  position: absolute;
  inset: 0;
}
.game-screen video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
}
.game-screen-label {
  color: #e6f3d5;
  background: #071009b3;
  border-radius: 12px;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  font-size: 20px;
  display: flex;
  position: absolute;
  top: 18px;
  left: 20px;
}
.game-stream-status {
  text-align: center;
  background: #0b151de8;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 90px;
  display: flex;
  position: absolute;
  inset: 0;
}
.game-stream-status p {
  max-width: 800px;
  font-size: 28px;
}
.game-stream-status button {
  pointer-events: auto;
  border: 1px solid #d8ef8250;
  border-radius: 12px;
  min-height: 60px;
  padding: 16px 24px;
  font-size: 24px;
}
.game-controller {
  z-index: 4;
  background: #0c1118;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.game-controller header {
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(#09121de0, #0000);
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.game-controller header > div {
  align-items: center;
  gap: 12px;
  display: flex;
}
.game-controller header strong {
  font-size: 20px;
}
.game-controller header button {
  pointer-events: auto;
  background: #101c22da;
  border: 1px solid #d8ef8230;
  border-radius: 9px;
  min-width: 54px;
  min-height: 54px;
  padding: 9px 16px;
  font-size: 20px;
}
.game-controller iframe {
  touch-action: none;
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.game-controller footer {
  color: #d1e1e7;
  text-align: center;
  pointer-events: none;
  background: #09121dc9;
  justify-content: center;
  gap: 6px 20px;
  padding: 6px 16px;
  font-size: 15px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.game-controller footer span:not(:first-child) {
  display: none;
}
.game-controller:fullscreen {
  border: 0;
  width: 100vw;
  height: 100dvh;
  position: fixed;
  inset: 0;
}
.hud-game-button {
  pointer-events: auto;
  background: #101a14c9;
  border: 1px solid #d8ef8244;
  border-radius: 10px;
  min-height: 44px;
  margin-top: 12px;
  padding: 10px 14px;
  font-size: 13px;
}
.game-controller:fullscreen header strong {
  font-size: 14px;
}
.game-controller:fullscreen header button {
  min-width: 44px;
  min-height: 44px;
  font-size: 14px;
}
.game-controller:fullscreen footer {
  font-size: 12px;
}
@media (width<=720px) {
  .game-controller:fullscreen header strong {
    display: none;
  }
  .game-controller:fullscreen footer {
    display: none;
  }
}
.game-enable-audio {
  pointer-events: auto;
  color: #e6f3d5;
  background: #10221ef0;
  border: 1px solid #d8ef8260;
  border-radius: 12px;
  min-height: 60px;
  padding: 14px 22px;
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.game-queue-rule {
  background: #d8ef8209;
  border: 1px solid #d8ef8230;
  border-radius: 12px;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  display: flex;
}
.game-queue-rule strong {
  font-size: 16px;
}
.game-queue-rule p {
  color: #b6c6b4;
  margin-top: 7px;
  font-size: 13px;
}
.game-queue-active {
  color: #efd9bd;
  background: #ffb18e09;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 14px;
  font-size: 14px;
  display: flex;
}
.game-queue-active b {
  white-space: nowrap;
  margin-left: auto;
}
.game-queue-content ol {
  max-height: 250px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
  overflow: auto;
}
.game-queue-content li {
  border-bottom: 1px solid #d8ef8218;
  gap: 14px;
  padding: 12px 14px;
  font-size: 14px;
  display: flex;
}
.game-queue-content li b {
  color: #a4b99a;
}
.game-queue-content li.mine {
  color: #d8ef82;
  background: #d8ef8210;
  border-radius: 9px;
}
.game-queue-content > p {
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.7;
}
.game-queue-content .hint {
  color: #acb9a3;
  font-size: 12px;
}
.game-queue-content .secondary {
  border: 1px solid #d8ef8255;
  border-radius: 10px;
  min-height: 48px;
  margin: 10px 0;
}
.screen-choice-grid > button:only-child {
  grid-column: 1/-1;
  justify-self: center;
  width: min(100%, 560px);
}
.skip-poll {
  pointer-events: auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: 340px;
  margin-top: 10px;
  display: flex;
}
.skip-vote-button {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #e2ecd7;
  background: #101b15e8;
  border: 1px solid #d8ef8240;
  border-radius: 9px;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  font-size: 12px;
}
.skip-vote-button[aria-pressed="true"] {
  color: #e4f5b3;
  background: #293b1bea;
  border-color: #d8ef8290;
}
.skip-vote-button b {
  color: #d8ef82;
  font-size: 11px;
  font-weight: 600;
}
.skip-vote-status {
  color: #bdcbb0;
  text-shadow: 0 1px 4px #000;
  font-size: 10px;
  line-height: 1.6;
}
.skip-poll progress {
  accent-color: #d8ef82;
  background: #d8ef8215;
  border: 0;
  border-radius: 5px;
  width: 100%;
  max-width: 240px;
  height: 4px;
  overflow: hidden;
}
.skip-poll progress::-webkit-progress-bar {
  background: #d8ef8215;
}
.skip-poll progress::-webkit-progress-value {
  background: #d8ef82;
}
.skip-poll progress::-moz-progress-bar {
  background: #d8ef82;
}
@media (width<=720px) {
  .skip-poll {
    gap: 5px 8px;
    max-width: 260px;
  }
  .skip-vote-button {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .skip-vote-status {
    font-size: 10px;
  }
  .skip-poll {
    gap: 4px 8px;
    margin-top: 6px;
  }
  .skip-vote-button {
    gap: 6px;
    min-height: 34px;
    padding: 5px 9px;
    font-size: 10px;
  }
  .skip-vote-button svg {
    width: 14px;
    height: 14px;
  }
  .skip-vote-button b {
    font-size: 10px;
  }
  .skip-vote-status {
    font-size: 9px;
    line-height: 1.3;
  }
  .skip-vote-break,
  .skip-vote-rule {
    display: none;
  }
  .skip-poll progress {
    max-width: 220px;
    height: 3px;
  }
}
.screen-celebration {
  z-index: 24;
  pointer-events: none;
  contain: layout paint;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.celebration-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.celebration-confetti i {
  opacity: 0;
  animation: 2.4s cubic-bezier(0.15, 0.5, 0.45, 1) both cinema-confetti;
  animation-delay: var(--confetti-delay);
  will-change: transform, opacity;
  position: absolute;
  top: 76%;
  box-shadow: 0 0 5px #fff2;
}
.celebration-announcement {
  text-align: center;
  width: min(560px, 100% - 240px);
  animation: 2.5s both cinema-announcement;
  animation-delay: var(--celebration-delay);
  color: #fff5db;
  background: linear-gradient(135deg, #1c1c14eb, #17231aeb);
  border: 1px solid #eac7788c;
  border-radius: 14px;
  padding: 11px 20px 12px;
  position: absolute;
  bottom: 118px;
  left: 50%;
  transform: translate(-50%);
  box-shadow:
    0 8px 34px #0008,
    inset 0 1px #fff2;
}
.celebration-kicker {
  letter-spacing: 2px;
  color: #efd38f;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 600;
  display: flex;
}
.celebration-kicker svg {
  width: 14px;
  height: 14px;
}
.celebration-title {
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px #0005;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.4;
}
.celebration-title strong {
  color: #e8f5bf;
  font-weight: 750;
}
.celebration-title b {
  color: #ffe0a0;
  text-shadow: 0 0 22px #edb74755;
  font-size: 1.18em;
  font-weight: 800;
  display: inline-block;
}
.celebration-message {
  color: #fff8e9;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  margin-top: 4px;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}
@keyframes cinema-confetti {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0);
  }
  7% {
    opacity: 1;
  }
  35% {
    transform: translate3d(calc(var(--confetti-x) * 0.6), var(--confetti-y), 0)
      rotate(calc(var(--confetti-turn) * 0.4));
    opacity: 1;
  }
  75% {
    opacity: 0.95;
  }
  to {
    transform: translate3d(var(--confetti-x), 26vh, 0)
      rotate(var(--confetti-turn));
    opacity: 0;
  }
}
@keyframes cinema-announcement {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(12px) scale(0.97);
  }
  10%,
  82% {
    opacity: 1;
    transform: translate(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%) translateY(6px) scale(0.99);
  }
}
@media (width<=720px) {
  .celebration-announcement {
    bottom: auto;
    top: calc(var(--safe-top, 0px) + 76px);
    border-radius: 12px;
    width: calc(100% - 92px);
    padding: 9px 12px 10px;
    left: calc(50% - 23px);
  }
  .celebration-kicker {
    letter-spacing: 1px;
    gap: 5px;
    margin-bottom: 4px;
    font-size: 7px;
  }
  .celebration-title {
    font-size: 14px;
    line-height: 1.35;
  }
  .celebration-message {
    margin-top: 3px;
    font-size: 13px;
  }
}
@media (height<=600px) and (width>=721px) {
  .celebration-announcement {
    max-width: 520px;
    padding: 8px 18px;
    bottom: 96px;
  }
  .celebration-title {
    font-size: 15px;
  }
  .celebration-message {
    -webkit-line-clamp: 1;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-confetti {
    display: none;
  }
  .celebration-announcement {
    animation: none;
  }
}
.name-tier {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image:
    radial-gradient(circle, var(--s1) 0 0.55px, transparent 1.15px),
    radial-gradient(circle, var(--s2) 0 0.5px, transparent 1.05px),
    radial-gradient(circle, var(--s3) 0 0.45px, transparent 0.95px), var(--base);
  background-size:
    var(--z1) var(--z1),
    var(--z2) var(--z3),
    var(--z3) var(--z2),
    220% 100%;
  animation:
    name-glitter var(--speed) steps(5) infinite,
    name-flow var(--flow) linear infinite;
  font-weight: 750;
  display: inline-block;
  position: relative;
  color: #0000 !important;
}
.name-tier-1 {
  --base: linear-gradient(
    100deg,
    #b8862e,
    #f2cf78 35%,
    #fff0c2 50%,
    #f2cf78 65%,
    #b8862e
  );
  --s1: #fffbe8;
  --s2: #ffe7a3;
  --s3: transparent;
  --z1: 9px;
  --z2: 13px;
  --z3: 11px;
  --speed: 1.6s;
  --flow: 4s;
}
.name-tier-2 {
  --base: linear-gradient(
    100deg,
    #3d8fcc,
    #94d6ff 35%,
    #fff 50%,
    #94d6ff 65%,
    #3d8fcc
  );
  --s1: #fff;
  --s2: #c8ecff;
  --s3: #7fd0ff;
  --z1: 7px;
  --z2: 10px;
  --z3: 8px;
  --speed: 1.2s;
  --flow: 3s;
  filter: drop-shadow(0 0 2.5px #7cc6ff99);
}
.name-tier-3 {
  --base: linear-gradient(
    100deg,
    #ff4d4d,
    #ff9b54 25%,
    #ffd88f 40%,
    #ff6a5c 60%,
    #ff2f62 80%,
    #ff4d4d
  );
  --s1: #fff4d6;
  --s2: #ffc36b;
  --s3: #ff8a5c;
  --z1: 6px;
  --z2: 8px;
  --z3: 7px;
  --speed: 0.9s;
  --flow: 2.2s;
  filter: drop-shadow(0 0 3.5px #ff5f4fa8);
}
.name-tier-3:after {
  content: "✦";
  -webkit-text-fill-color: #ffd59a;
  color: #ffd59a;
  font-size: 0.75em;
  animation: 1.4s ease-in-out infinite name-twinkle;
  position: absolute;
  top: -0.4em;
  right: -0.95em;
}
.name-tier-4 {
  --base: linear-gradient(
    90deg,
    #ff8fd0,
    #ffd27a,
    #adff94,
    #7fe4ff,
    #bb9cff,
    #ff8fd0
  );
  --s1: #fff;
  --s2: #fff1a8;
  --s3: #ffc2f0;
  --z1: 5px;
  --z2: 7px;
  --z3: 6px;
  --speed: 0.7s;
  --flow: 2s;
  animation:
    name-glitter var(--speed) steps(5) infinite,
    name-flow var(--flow) linear infinite,
    name-aura 2.4s ease-in-out infinite;
  padding: 0 0.08em;
}
.name-tier-4:before,
.name-tier-4:after {
  content: "✧";
  -webkit-text-fill-color: #fff3c4;
  color: #fff3c4;
  text-shadow: 0 0 6px #ffe9a3;
  font-size: 0.8em;
  animation: 1.2s ease-in-out infinite name-twinkle;
  position: absolute;
  top: -0.45em;
}
.name-tier-4:before {
  left: -1em;
}
.name-tier-4:after {
  animation-delay: 0.6s;
  right: -1em;
}
.tier-badge {
  border: 1px solid var(--badge);
  color: var(--badge);
  vertical-align: 1px;
  white-space: nowrap;
  border-radius: 5px;
  margin-left: 7px;
  padding: 0 5px;
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.45;
  display: inline-block;
}
.tier-badge-1 {
  --badge: #e9c26b;
}
.tier-badge-2 {
  --badge: #8fd2ff;
  box-shadow: 0 0 5px #8fd2ff44;
}
.tier-badge-3 {
  --badge: #ff8a70;
  box-shadow: 0 0 6px #ff6b5c55;
}
.tier-badge-4 {
  --badge: #e3c9ff;
  background: linear-gradient(90deg, #ff8fd022, #7fe4ff22, #bb9cff22);
  box-shadow: 0 0 8px #d4b8ff66;
}
@keyframes name-glitter {
  0% {
    background-position:
      0 0,
      0 0,
      0 0,
      var(--flow-x, 0) 0;
  }
  to {
    background-position:
      23px 17px,
      -31px 13px,
      19px -29px,
      var(--flow-x, 0) 0;
  }
}
@keyframes name-flow {
  0% {
    --flow-x: 100%;
  }
  to {
    --flow-x: -120%;
  }
}
@keyframes name-twinkle {
  0%,
  to {
    opacity: 0.2;
    transform: scale(0.7) rotate(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.15) rotate(20deg);
  }
}
@keyframes name-aura {
  0%,
  to {
    filter: drop-shadow(0 0 3px #d4b8ffaa);
  }
  50% {
    filter: drop-shadow(0 0 7px #ffd6f2dd);
  }
}
@property --flow-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@media (prefers-reduced-motion: reduce) {
  .name-tier,
  .name-tier:before,
  .name-tier:after {
    animation: none;
  }
}
.name-tier-6 {
  --base: linear-gradient(90deg, #ff3b3b, #ffd36b, #fff3c4, #ffd36b, #ff3b3b);
  --s1: #fff7d6;
  --s2: #ffe08a;
  --s3: #ff9a8a;
}
.name-tier-6:before,
.name-tier-6:after {
  content: "♛";
  -webkit-text-fill-color: #ffd36b;
  color: #ffd36b;
  text-shadow: 0 0 6px #ff5a3c;
}
.tier-badge-6 {
  --badge: #ffd36b;
  background: linear-gradient(90deg, #8e0c1533, #ffd36b33, #8e0c1533);
  box-shadow: 0 0 8px #ffcf5a88;
}
.name-tier-5 {
  --base: linear-gradient(90deg, #1fc9a0, #9ff5dc, #eafff7, #9ff5dc, #1fc9a0);
  --s1: #eafff7;
  --s2: #9ff5dc;
  --s3: #5ee6c8;
}
.name-tier-5:before,
.name-tier-5:after {
  content: "✦";
  -webkit-text-fill-color: #9ff5dc;
  color: #9ff5dc;
  text-shadow: 0 0 6px #1fc9a0;
}
.tier-badge-5 {
  --badge: #7df0cf;
  background: linear-gradient(90deg, #0f5e4c33, #7df0cf33, #0f5e4c33);
  box-shadow: 0 0 8px #3ee0b088;
}
:root {
  color: #ecece5;
  font-synthesis: none;
  --bg: #111211;
  --panel: #191b19;
  --line: #ffffff12;
  --muted: #a1a59b;
  --accent: #d8ef82;
  --accent-ink: #232b14;
  --warm: #e5be98;
  background: #111211;
  font-family:
    Be Vietnam Pro,
    Arial,
    sans-serif;
  font-weight: 400;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input {
  font: inherit;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
  display: inline-flex;
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button {
  color: inherit;
  background: 0 0;
  border: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  flex-shrink: 0;
}
button:hover:not(:disabled) {
  filter: brightness(1.08);
}
input {
  min-width: 0;
  color: inherit;
  background: #ffffff05;
  border: 1px solid #ffffff19;
  border-radius: 9px;
  outline: none;
  width: 100%;
  padding: 13px 14px;
}
input::placeholder {
  color: #777d71;
  font-size: 12px;
}
input:focus {
  background: #ffffff07;
  border-color: #c5de7b80;
}
label {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  display: block;
}
label > input,
label > .input-wrap {
  margin-top: 9px;
}
p {
  line-height: 1.7;
}
h1,
h2,
h3,
p {
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}
legend {
  margin-bottom: 11px;
  font-size: 12px;
}
.site-header {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  height: 88px;
  padding: 0 36px;
  display: flex;
}
.brand {
  align-items: center;
  gap: 12px;
  display: flex;
}
.brand > div {
  letter-spacing: -2px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.brand > div > span {
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-top: 9px;
  font-size: 8px;
  font-weight: 400;
  display: block;
}
.brand-symbol {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  border-radius: 14px;
  width: 45px;
  height: 45px;
  font-size: 43px;
  font-weight: 800;
  line-height: 38px;
  position: relative;
}
.brand-symbol > span {
  background: var(--accent-ink);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 20px;
  right: 9px;
}
.header-center {
  color: #c5c7bc;
  align-items: center;
  gap: 10px;
  margin-left: 90px;
  font-size: 12px;
  display: flex;
}
.room-pip {
  background: var(--accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}
.room-number {
  color: var(--muted);
  border: 1px solid #ffffff1c;
  border-radius: 5px;
  margin-left: 5px;
  padding: 5px 7px;
  font-size: 10px;
}
.header-actions {
  align-items: center;
  gap: 14px;
  display: flex;
}
.invite-button {
  border: 1px solid #ffffff25;
  border-radius: 8px;
  min-height: 40px;
  padding: 0 15px;
  font-size: 11px;
}
.invite-button:hover {
  background: #ffffff0b;
}
.profile-button {
  background: var(--avatar-color);
  color: #232823;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  font-size: 14px;
  font-weight: 700;
}
.main-layout {
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 0;
  max-width: 2000px;
  min-height: calc(100dvh - 88px);
  margin: auto;
  display: grid;
}
.theater-column {
  min-width: 0;
  padding: 31px 30px 0;
}
.room-heading {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
  display: flex;
}
.eyebrow {
  letter-spacing: 1.65px;
  color: #a1a797;
  font-size: 9px;
  font-weight: 500;
}
.room-heading h1 {
  letter-spacing: -0.9px;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}
.room-heading h1 > span {
  color: #969b90;
  font-weight: 400;
}
.connection-badge {
  white-space: nowrap;
  color: #b1b7a5;
  border: 1px solid var(--line);
  background: #ffffff05;
  border-radius: 30px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 9px;
  display: flex;
}
.connection-badge > span {
  background: #b6bca7;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.connection-badge.online > span {
  background: var(--accent);
  box-shadow: 0 0 8px #d8ef8235;
}
.theater-viewport {
  background: #1d1e1b;
  border: 1px solid #ffffff16;
  border-radius: 13px;
  height: clamp(460px, 100dvh - 335px, 850px);
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
.theater-viewport:after {
  content: "";
  pointer-events: none;
  border-radius: inherit;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 70px #0000004a;
}
.cinema-canvas {
  touch-action: none;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cinema-canvas > canvas {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.css3d-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.css3d-layer > div {
  pointer-events: none;
}
.screen-surface {
  pointer-events: auto;
  backface-visibility: hidden;
  background: #19201e;
  width: 1280px;
  height: 720px;
  overflow: hidden;
}
.screen-idle {
  color: #e6e8d9;
  background:
    radial-gradient(at 60% 35%, #43534a 0, #0000 55%),
    linear-gradient(135deg, #293c36, #172723 70%);
  width: 1280px;
  height: 720px;
  padding: 35px 40px;
  position: relative;
  overflow: hidden;
}
.screen-grid {
  background-image:
    linear-gradient(#c4deba0a 1px, #0000 1px),
    linear-gradient(90deg, #c4deba0a 1px, #0000 1px);
  background-size: 80px 80px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, #0000);
  mask-image: linear-gradient(#000, #0000);
}
.screen-top,
.screen-bottom {
  letter-spacing: 3px;
  color: #bac9b5;
  justify-content: space-between;
  font-size: 13px;
  display: flex;
  position: relative;
}
.screen-top {
  border-bottom: 1px solid #dcebc226;
  padding-bottom: 20px;
}
.screen-center {
  text-align: center;
  padding-top: 45px;
  position: relative;
}
.screen-mark {
  color: #e4eecb;
  background: #e4eed807;
  border: 1px solid #c9dfb64d;
  border-radius: 50%;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
  display: grid;
}
.screen-eyebrow {
  letter-spacing: 5px;
  color: #d4e4c2;
  font-size: 14px;
}
.screen-center h1 {
  letter-spacing: -1.5px;
  margin-top: 24px;
  font-size: 53px;
  font-weight: 500;
  line-height: 1.35;
}
.screen-center h1 i {
  color: #bdcbaa;
  font-style: normal;
  font-weight: 400;
}
.screen-center p {
  color: #a4b89f;
  margin-top: 25px;
  font-size: 17px;
}
.screen-bottom {
  align-items: center;
  font-size: 11px;
  position: absolute;
  bottom: 33px;
  left: 40px;
  right: 40px;
}
.screen-bottom > span:first-child {
  align-items: center;
  gap: 10px;
  display: flex;
}
.youtube-screen,
.youtube-host,
.youtube-host > iframe {
  border: 0;
  width: 1280px;
  height: 720px;
}
.youtube-screen {
  position: relative;
}
.player-error {
  text-align: center;
  background: #17211ef2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 90px;
  display: flex;
  position: absolute;
  inset: 0;
}
.player-error h2 {
  font-size: 38px;
}
.player-error p {
  font-size: 25px;
}
.player-error button {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 12px;
  padding: 16px 35px;
  font-size: 24px;
}
.viewport-top {
  pointer-events: none;
  z-index: 2;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
}
.cinema-tag {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  letter-spacing: 1.25px;
  background: #121611d1;
  border: 1px solid #ffffff17;
  border-radius: 5px;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  font-size: 8px;
  display: flex;
}
.live-dot {
  background: var(--accent);
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.occupancy {
  color: #e3e6d8;
  background: #121611b8;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  font-size: 11px;
  display: flex;
}
.occupancy > span {
  color: #979e8d;
  font-size: 10px;
}
.viewport-side-label {
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  color: #d2d5c480;
  pointer-events: none;
  font-size: 7px;
  position: absolute;
  top: 51%;
  left: 16px;
  transform: rotate(180deg);
}
.viewport-bottom {
  z-index: 3;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  bottom: 18px;
  left: 19px;
  right: 19px;
}
.camera-controls {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  pointer-events: auto;
  background: #151914ce;
  border: 1px solid #ffffff24;
  border-radius: 9px;
  gap: 3px;
  padding: 4px;
  display: flex;
}
.camera-controls > button {
  color: #b9beb0;
  border-radius: 6px;
  width: 37px;
  height: 37px;
}
.camera-controls > button.active {
  color: var(--accent);
  background: #d8ef8215;
}
.camera-controls > button:hover {
  background: #ffffff17;
}
.drag-hint {
  color: #d0d5c2ad;
  text-shadow: 0 1px 3px #000;
  font-size: 9px;
}
.party-label {
  color: var(--accent);
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 68px;
  right: 20px;
}
.avatar-labels {
  pointer-events: none;
  z-index: 2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.speech-bubble {
  color: #292d23;
  overflow-wrap: anywhere;
  background: #f0f1e5;
  border-radius: 10px 10px 10px 1px;
  width: max-content;
  max-width: 180px;
  padding: 9px 12px;
  font-size: 11px;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  box-shadow: 0 3px 20px #0004;
}
.speech-bubble[hidden] {
  display: none !important;
}
.scene-error {
  z-index: 5;
  background: #222c22;
  border-radius: 15px;
  padding: 20px;
  position: absolute;
  inset: 15%;
}
.now-playing {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 15px;
  padding: 23px 0 24px;
  display: flex;
}
.playing-icon {
  color: #9ba28e;
  border: 1px solid var(--line);
  background: #ffffff06;
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  width: 47px;
  height: 51px;
  display: grid;
}
.playing-info {
  flex: 1;
  min-width: 0;
}
.playing-info .eyebrow {
  letter-spacing: 1.6px;
  font-size: 8px;
}
.playing-info h2 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 5px 0 3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  overflow: hidden;
}
.playing-info p {
  color: #999f91;
  font-size: 10px;
  line-height: 1.7;
}
.quiet-button {
  white-space: nowrap;
  border: 1px solid #fff2;
  border-radius: 7px;
  min-height: 40px;
  padding: 10px 13px;
  font-size: 10px;
}
.quiet-button:hover {
  background: #ffffff09;
}
.quiet-button.selected {
  color: var(--accent);
  border-color: #d8ef8270;
}
.theater-footer {
  color: #8f9787;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 0 21px;
  font-size: 9px;
  display: flex;
}
.theater-footer > div {
  align-items: center;
  gap: 7px;
  display: flex;
}
.footer-pip {
  background: #c3ceac;
  border-radius: 50%;
  width: 4px;
  height: 4px;
}
.theater-footer > button {
  gap: 6px;
  min-height: 30px;
  font-size: 9px;
}
.sidebar {
  border-left: 1px solid var(--line);
  background: #151715;
  flex-direction: column;
  min-width: 0;
  max-height: calc(100dvh - 88px);
  display: flex;
  position: sticky;
  top: 0;
}
.side-top {
  padding: 32px 24px 24px;
}
.side-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.side-title .eyebrow {
  letter-spacing: 1.8px;
  font-size: 8px;
}
.side-top h2 {
  letter-spacing: -1px;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 23px;
  font-weight: 500;
  display: flex;
}
.count-pill {
  letter-spacing: 0;
  color: #bac6a8;
  background: #d8ef820c;
  border: 1px solid #d8ef8222;
  border-radius: 7px;
  place-items: center;
  min-width: 25px;
  height: 25px;
  font-size: 10px;
  font-weight: 400;
  display: grid;
}
.side-top p {
  color: #9fa694;
  margin-top: 10px;
  font-size: 10px;
}
.queue-section {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 20px 20px;
  display: flex;
}
.queue-heading {
  color: #9ca58f;
  letter-spacing: 1px;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 13px;
  font-size: 8px;
  display: flex;
}
.queue-heading > span:last-child {
  letter-spacing: 0;
  color: #89917e;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  display: flex;
}
.queue-list {
  scrollbar-width: thin;
  scrollbar-color: #3a4233 transparent;
  flex: 1;
  min-height: 120px;
  max-height: 430px;
  overflow: auto;
}
.queue-item {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  padding: 15px 0;
  display: flex;
}
.queue-rank {
  color: #929d82;
  flex-shrink: 0;
  width: 17px;
  font-size: 9px;
}
.queue-item.first .queue-rank {
  color: var(--accent);
}
.queue-thumb {
  background: #2c3026;
  border-radius: 5px;
  flex-shrink: 0;
  width: 67px;
  height: 46px;
  position: relative;
  overflow: hidden;
}
.queue-thumb > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.queue-thumb > svg {
  color: var(--accent);
  background: #111b15cc;
  border-radius: 50%;
  padding: 1px;
  position: absolute;
  bottom: 2px;
  left: 3px;
}
.queue-info {
  flex: 1;
  min-width: 0;
}
.queue-info h3 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}
.queue-info p {
  color: #8d9780;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 4px;
  font-size: 9px;
  overflow: hidden;
}
.vote-button {
  color: #b3bca4;
  border: 1px solid #ffffff1c;
  border-radius: 6px;
  flex-direction: column;
  gap: 1px;
  width: 34px;
  min-width: 34px;
  min-height: 43px;
  font-size: 10px;
}
.vote-button.voted {
  color: var(--accent);
  background: #d8ef8210;
  border-color: #d8ef8250;
}
.empty-queue {
  text-align: center;
  padding: 25px 0 32px;
}
.empty-icon {
  color: #a6b38d;
  border: 1px dashed #65714f7d;
  border-radius: 14px;
  place-items: center;
  width: 57px;
  height: 57px;
  margin: 0 auto 16px;
  display: grid;
  transform: rotate(-6deg);
}
.empty-queue h3 {
  color: #d7ddcd;
  font-size: 13px;
  font-weight: 500;
}
.empty-queue p {
  color: #909b83;
  margin-top: 9px;
  font-size: 10px;
  line-height: 1.9;
}
.empty-queue button {
  color: var(--accent);
  gap: 10px;
  min-height: 35px;
  margin-top: 16px;
  font-size: 10px;
}
.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid #e8f8ab;
  border-radius: 8px;
  gap: 10px;
  min-height: 46px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
}
.primary:hover {
  background: #e3f69e;
}
.primary.full {
  width: 100%;
  margin-top: 8px;
}
.add-video {
  flex-shrink: 0;
  width: 100%;
  min-height: 44px;
  margin-top: 15px;
  font-size: 11px;
}
.add-video > span {
  opacity: 0.6;
  margin-left: auto;
  font-size: 14px;
  font-weight: 400;
}
.queue-note {
  color: #8a957d;
  text-align: center;
  margin-top: 9px;
  font-size: 8px;
  line-height: 1.9;
}
.chat-section {
  border-top: 1px solid var(--line);
  flex-direction: column;
  height: 270px;
  min-height: 230px;
  padding: 19px 23px 20px;
  display: flex;
}
.chat-heading {
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
  display: flex;
}
.chat-heading h3 {
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}
.chat-heading > span {
  color: #9aa58c;
  font-size: 8px;
}
.chat-feed {
  scrollbar-width: thin;
  scrollbar-color: #3a4233 transparent;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 70px;
  overflow: auto;
}
.chat-welcome {
  color: #a3ae95;
  margin: 8px 0 16px;
  font-size: 10px;
}
.chat-welcome > span {
  color: #7f8a72;
  margin-top: 7px;
  font-size: 9px;
  line-height: 1.8;
  display: block;
}
.chat-message {
  overflow-wrap: anywhere;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 10px;
  display: flex;
}
.chat-message > div {
  flex: 1;
  min-width: 0;
}
.chat-message strong {
  font-size: 9px;
  font-weight: 500;
}
.chat-message p {
  color: #d5dace;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.7;
}
.chat-message time {
  color: #7d8970;
  padding-top: 3px;
  font-size: 7px;
}
.chat-dot {
  border-radius: 50%;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  margin-top: 4px;
}
.chat-input {
  background: #ffffff04;
  border: 1px solid #ffffff17;
  border-radius: 8px;
  align-items: center;
  margin-top: 10px;
  padding-right: 4px;
  display: flex;
}
.chat-input > input {
  background: 0 0;
  border: 0;
  padding: 13px 10px;
  font-size: 11px;
}
.chat-input > button {
  width: 36px;
  height: 36px;
  color: var(--accent);
  border-radius: 6px;
  flex-shrink: 0;
}
.my-seat {
  text-align: left;
  background: #d8ef8207;
  border: 1px solid #d8ef8221;
  border-radius: 10px;
  flex-shrink: 0;
  gap: 11px;
  margin: 0 18px 20px;
  padding: 14px 13px;
}
.seat-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  border: 1px solid #d8ef8223;
  border-radius: 7px;
  place-items: center;
  display: grid;
}
.my-seat > span:nth-child(2) {
  flex: 1;
}
.my-seat small {
  letter-spacing: 1.3px;
  color: #9da98d;
  margin-bottom: 5px;
  font-size: 7px;
  display: block;
}
.my-seat strong {
  color: #d9e6c5;
  font-size: 11px;
  font-weight: 500;
}
.my-seat > svg {
  color: #a9b792;
}
.auth-sidebar {
  justify-content: center;
  max-height: none;
  padding: 28px;
}
.auth-card .accent-text {
  color: var(--accent);
  font-size: 8px;
}
.auth-card h2 {
  letter-spacing: -1px;
  margin: 16px 0;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.5;
}
.auth-card h2 i {
  color: #b7c3a6;
  font-style: normal;
}
.auth-card > p {
  color: #9aa58d;
  font-size: 11px;
  line-height: 1.9;
}
.auth-tabs {
  border-bottom: 1px solid #ffffff15;
  gap: 25px;
  margin: 28px 0 24px;
  display: flex;
}
.auth-tabs button {
  color: #8e9a7f;
  min-height: 40px;
  padding: 0 0 12px;
  font-size: 11px;
  position: relative;
}
.auth-tabs button.active {
  color: var(--accent);
}
.auth-tabs button.active:after {
  content: "";
  background: var(--accent);
  height: 2px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}
.input-wrap {
  background: #ffffff03;
  border: 1px solid #ffffff1b;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  display: flex;
}
.input-wrap:focus-within {
  border-color: #d8ef8270;
}
.input-wrap > svg {
  color: #8e9a7d;
}
.input-wrap > input {
  background: 0 0;
  border: 0;
  padding: 13px 0;
  font-size: 12px;
}
.input-wrap > input:focus-visible {
  outline: 0;
}
.small-icon {
  color: #a0aa92;
  border-radius: 5px;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.small-icon:hover {
  background: #ffffff0c;
}
.auth-note {
  color: #89967a;
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  font-size: 9px;
  display: flex;
}
.form-error {
  color: #f2ad9e;
  background: #e8816710;
  border-radius: 7px;
  margin: 10px 0 16px;
  padding: 11px 12px;
  font-size: 11px;
}
.loading-state {
  color: #b7c2a8;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  display: flex;
}
.spin {
  animation: 1s linear infinite spin;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.mobile-tabs {
  display: none;
}
.toast {
  z-index: 40;
  color: #26321d;
  text-align: center;
  background: #e5edd5;
  border-radius: 10px;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  font-size: 12px;
  line-height: 1.7;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 40px #0008;
}
.modal {
  color: #ecf0e3;
  scrollbar-width: thin;
  background: #1a1e18;
  border: 1px solid #ffffff25;
  border-radius: 18px;
  width: 460px;
  max-width: calc(100vw - 28px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 28px;
  position: fixed;
  overflow: auto;
  box-shadow: 0 20px 90px #0009;
}
.modal::backdrop {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  background: #080c09b8;
}
.modal.wide {
  width: 700px;
}
.modal-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 24px;
  display: flex;
}
.modal-head h2 {
  letter-spacing: -0.6px;
  margin: 10px 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
}
.modal-head p {
  color: #a3af95;
  font-size: 11px;
  line-height: 1.9;
}
.icon-button {
  color: #b8c3aa;
  background: #ffffff07;
  border-radius: 50%;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}
.character-preview {
  background: radial-gradient(at 50% 85%, #6b784825, #0000 70%);
  justify-content: center;
  align-items: center;
  height: 170px;
  margin: -10px 0 22px;
  display: flex;
  position: relative;
}
.character-preview > span {
  letter-spacing: 1.5px;
  color: #8a987a;
  font-size: 7px;
  position: absolute;
  bottom: 4px;
  right: 0;
}
.mini-character {
  z-index: 1;
  width: 90px;
  height: 140px;
  position: relative;
}
.mini-head {
  background: #cda481;
  border-radius: 50%;
  width: 46px;
  height: 47px;
  position: absolute;
  top: 5px;
  left: 22px;
  box-shadow: inset -5px -2px 10px #0002;
}
.mini-hair {
  z-index: 2;
  background: #49372c;
  border-radius: 40px 40px 25px 25px;
  width: 48px;
  height: 28px;
  position: absolute;
  top: 3px;
  left: 21px;
  box-shadow: inset -5px 0 10px #0004;
}
.mini-character.female .mini-hair {
  background: #392c28;
  border-radius: 27px 27px 16px 16px;
  height: 59px;
}
.mini-body {
  background: var(--shirt);
  z-index: 3;
  border-radius: 20px 20px 9px 9px;
  justify-content: center;
  align-items: flex-start;
  width: 60px;
  height: 60px;
  padding-top: 10px;
  display: flex;
  position: absolute;
  top: 49px;
  left: 15px;
  box-shadow: inset -7px -2px 10px #0002;
}
.mini-body > span {
  color: #263329;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55px;
  font-size: 9px;
  font-weight: 700;
  overflow: hidden;
}
.mini-arm {
  background: var(--shirt);
  border-radius: 12px;
  width: 18px;
  height: 50px;
  position: absolute;
  top: 53px;
  box-shadow: inset -5px -2px 8px #0002;
}
.mini-arm.left {
  left: 3px;
  transform: rotate(7deg);
}
.mini-arm.right {
  right: 3px;
  transform: rotate(-7deg);
}
.mini-legs {
  background: #3c4841;
  border-bottom: 8px solid #d4d8c7;
  border-radius: 7px;
  width: 50px;
  height: 35px;
  position: absolute;
  top: 100px;
  left: 20px;
}
.mini-legs:after {
  content: "";
  background: #20271e;
  width: 4px;
  height: 100%;
  position: absolute;
  left: 23px;
}
.character-shadow {
  filter: blur(8px);
  background: #0005;
  border-radius: 50%;
  width: 90px;
  height: 16px;
  position: absolute;
  bottom: 20px;
}
.segmented {
  gap: 10px;
  display: flex;
}
.segmented button {
  color: #aebba0;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  flex: 1;
  padding: 12px;
  font-size: 12px;
}
.segmented button.selected {
  color: var(--accent);
  background: #d8ef8209;
  border-color: #d8ef8260;
}
.swatches {
  gap: 12px;
  display: flex;
}
.swatches button {
  color: #202b18;
  border: 3px solid #1a1e18;
  border-radius: 50%;
  outline: 1px solid #0000;
  width: 35px;
  height: 35px;
}
.swatches button[aria-pressed="true"] {
  outline-color: var(--accent);
}
.seatmap-screen {
  color: #a2b18c;
  letter-spacing: 2px;
  background: linear-gradient(#d8ef820c, #0000);
  border-top: 3px solid #c9d9b2;
  border-radius: 50% 50% 0 0;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 33px;
  margin: 15px 30px 28px;
  font-size: 8px;
  display: flex;
}
.seatmap {
  flex-direction: column;
  gap: 10px;
  display: flex;
}
.seatmap-row {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}
.row-label {
  color: #909e7f;
  text-align: center;
  width: 15px;
  font-size: 9px;
}
.seat-group {
  background: #abb58c0b;
  border: 1px solid #aabb8e18;
  border-radius: 8px;
  gap: 3px;
  padding: 3px;
  display: flex;
}
.seat-choice {
  color: #cbd5be;
  border: 1px solid #9ea98d73;
  border-radius: 5px 5px 3px 3px;
  width: 31px;
  height: 28px;
  font-size: 9px;
  box-shadow: 0 3px #9eae8326;
}
.seat-choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: #d8ef8230;
}
.seat-choice.taken {
  color: #929c85;
  background: #515849;
  border-color: #515849;
  box-shadow: 0 3px #424a38;
}
.seat-choice.mine {
  background: var(--accent);
  color: #2b351d;
  border-color: var(--accent);
  box-shadow: 0 3px #99b551;
}
.seat-legend {
  color: #a3b194;
  justify-content: center;
  gap: 25px;
  padding: 30px 0 23px;
  font-size: 9px;
  display: flex;
}
.seat-legend span {
  align-items: center;
  gap: 7px;
  display: flex;
}
.seat-legend i {
  border: 1px solid #9ea98d73;
  border-radius: 3px;
  width: 11px;
  height: 11px;
}
.seat-legend i.taken {
  background: #515849;
  border-color: #515849;
}
.seat-legend i.mine {
  background: var(--accent);
  border-color: var(--accent);
}
.seatmap-footer {
  border-top: 1px solid var(--line);
  color: #97a588;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  font-size: 9px;
  display: flex;
}
.seatmap-footer strong {
  color: var(--accent);
  margin-right: 3px;
  font-size: 15px;
}
.video-preview {
  align-items: center;
  gap: 13px;
  margin: 15px 0 22px;
  display: flex;
}
.video-preview img {
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  width: 110px;
}
.video-preview h3 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}
.video-preview p {
  color: #99a88a;
  margin-top: 5px;
  font-size: 10px;
}
.toggle-line {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding: 16px 0;
  display: flex;
}
.toggle-line strong {
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}
.toggle-line small {
  color: #98a689;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.8;
  display: block;
}
.toggle-line input {
  appearance: none;
  cursor: pointer;
  background: #424c36;
  border-radius: 20px;
  width: 38px;
  min-width: 38px;
  height: 22px;
  margin: 0;
  padding: 0;
  position: relative;
}
.toggle-line input:checked {
  background: var(--accent);
}
.toggle-line input:after {
  content: "";
  background: #f3f5eb;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
  position: absolute;
  top: 2px;
  left: 2px;
}
.toggle-line input:checked:after {
  background: #2b381b;
  transform: translate(15px);
}
.hint {
  color: #98a58a;
  margin: 13px 0;
  font-size: 10px;
  line-height: 1.9;
}
.help-steps > p {
  color: #b3bea7;
  margin-bottom: 20px;
  font-size: 11px;
  line-height: 1.9;
}
.help-steps strong {
  color: #e1e9d5;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  display: block;
}
@media (width>=1600px) {
  .main-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .theater-column {
    padding: 35px 40px 0;
  }
  .theater-viewport {
    min-height: 620px;
  }
  .side-top {
    padding: 35px 28px 24px;
  }
  .queue-section {
    padding: 0 26px 22px;
  }
  .chat-section {
    height: 300px;
  }
  .room-heading h1 {
    font-size: 26px;
  }
  .queue-info h3 {
    font-size: 11px;
  }
  .queue-thumb {
    width: 75px;
    height: 50px;
  }
}
@media (width<=1150px) {
  .site-header {
    padding: 0 24px;
  }
  .main-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
  .theater-column {
    padding: 25px 20px 0;
  }
  .room-heading {
    display: block;
    position: relative;
  }
  .connection-badge {
    display: none;
  }
  .room-heading h1 {
    font-size: 19px;
  }
  .room-heading .eyebrow {
    font-size: 8px;
  }
  .side-top {
    padding: 27px 20px 21px;
  }
  .queue-section {
    padding-left: 17px;
    padding-right: 17px;
  }
  .chat-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .drag-hint {
    display: none;
  }
  .playing-info h2 {
    font-size: 12px;
  }
  .playing-info p {
    font-size: 9px;
  }
  .quiet-button {
    padding: 9px;
  }
  .quiet-button > span {
    display: none;
  }
  .auth-sidebar {
    padding: 23px;
  }
  .auth-card h2 {
    font-size: 23px;
  }
  .header-center {
    margin-left: 10px;
  }
  .theater-footer,
  .theater-footer button {
    font-size: 8px;
  }
  .now-playing {
    gap: 10px;
  }
}
@media (width<=850px) {
  .site-header {
    height: 75px;
    padding: 0 20px;
  }
  .brand > div {
    font-size: 25px;
  }
  .brand-symbol {
    border-radius: 11px;
    width: 39px;
    height: 39px;
    font-size: 37px;
    line-height: 31px;
  }
  .brand-symbol > span {
    width: 5px;
    height: 5px;
    top: 17px;
    right: 8px;
  }
  .brand > div > span {
    font-size: 6px;
  }
  .header-center {
    display: none;
  }
  .invite-button {
    min-height: 36px;
    padding: 0 11px;
    font-size: 10px;
  }
  .main-layout {
    flex-direction: column;
    display: flex;
  }
  .theater-column {
    padding: 24px 20px 0;
  }
  .room-heading {
    margin-bottom: 18px;
  }
  .room-heading h1 {
    font-size: 22px;
  }
  .theater-viewport {
    height: 63vw;
    min-height: 420px;
    max-height: 630px;
  }
  .viewport-side-label {
    display: none;
  }
  .now-playing {
    padding: 19px 0;
  }
  .playing-info h2 {
    font-size: 14px;
  }
  .playing-info p {
    font-size: 10px;
  }
  .sidebar {
    border-left: 0;
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr 1fr;
    max-height: none;
    display: grid;
    position: static;
  }
  .side-top {
    grid-column: 1/-1;
    padding: 24px 24px 20px;
  }
  .side-top h2 {
    margin-top: 9px;
    font-size: 22px;
  }
  .side-top p {
    margin-top: 6px;
  }
  .queue-section {
    min-height: 310px;
    padding: 0 24px 24px;
  }
  .queue-list {
    max-height: 280px;
  }
  .chat-section {
    border-top: 0;
    border-left: 1px solid var(--line);
    height: 100%;
    min-height: 310px;
    padding: 0 24px 24px;
  }
  .my-seat {
    grid-column: 1/-1;
    margin: 0 24px 24px;
  }
  .auth-sidebar {
    padding: 35px 24px;
    display: block;
  }
  .auth-card {
    max-width: 430px;
    margin: auto;
  }
  .auth-card h2 {
    font-size: 30px;
  }
  .theater-footer {
    padding-bottom: 21px;
    font-size: 9px;
  }
  .theater-footer button {
    font-size: 9px;
  }
  .auth-card label,
  .auth-card input {
    font-size: 13px;
  }
  .auth-card input::placeholder,
  .auth-card .auth-tabs button {
    font-size: 12px;
  }
}
@media (width<=540px) {
  .site-header {
    height: 70px;
    padding: 0 16px;
  }
  .brand {
    gap: 9px;
  }
  .brand > div {
    font-size: 25px;
  }
  .brand > div > span {
    letter-spacing: 0.8px;
    font-size: 5px;
  }
  .header-actions {
    gap: 8px;
  }
  .invite-button {
    width: 37px;
    min-height: 37px;
    padding: 0;
  }
  .invite-button > span {
    display: none;
  }
  .profile-button {
    width: 33px;
    height: 33px;
  }
  .theater-column {
    padding: 23px 12px 0;
  }
  .room-heading {
    margin-bottom: 17px;
    padding: 0 3px;
  }
  .room-heading .eyebrow {
    letter-spacing: 1.3px;
    font-size: 7px;
  }
  .room-heading h1 {
    letter-spacing: -0.8px;
    margin-top: 8px;
    font-size: 19px;
  }
  .room-heading h1 > span {
    display: block;
  }
  .theater-viewport {
    border-radius: 10px;
    height: 102vw;
    min-height: 370px;
  }
  .viewport-top {
    top: 13px;
    left: 12px;
    right: 12px;
  }
  .cinema-tag {
    letter-spacing: 0.7px;
    padding: 8px;
    font-size: 6px;
  }
  .occupancy {
    gap: 4px;
    padding: 8px;
    font-size: 9px;
  }
  .occupancy > span {
    font-size: 8px;
  }
  .viewport-bottom {
    bottom: 12px;
    left: 12px;
    right: 12px;
  }
  .camera-controls {
    gap: 1px;
    padding: 3px;
  }
  .camera-controls > button {
    width: 34px;
    height: 35px;
  }
  .playing-icon {
    width: 38px;
    height: 44px;
  }
  .playing-info .eyebrow {
    letter-spacing: 1px;
    font-size: 6px;
  }
  .playing-info h2 {
    margin-top: 5px;
    font-size: 11px;
  }
  .playing-info p {
    font-size: 8px;
  }
  .now-playing {
    gap: 9px;
    padding: 17px 2px;
  }
  .theater-footer {
    gap: 5px;
    padding: 10px 2px 13px;
    font-size: 7px;
  }
  .theater-footer button {
    gap: 4px;
    font-size: 7px;
  }
  .sidebar {
    display: flex;
  }
  .side-top {
    padding: 24px 20px 16px;
  }
  .side-top h2 {
    font-size: 23px;
  }
  .side-top p {
    font-size: 10px;
  }
  .mobile-tabs {
    border-bottom: 1px solid var(--line);
    gap: 23px;
    margin-top: 17px;
    display: flex;
  }
  .mobile-tabs button {
    color: #95a286;
    padding: 10px 0 13px;
    font-size: 11px;
  }
  .mobile-tabs button.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
  }
  .queue-section {
    min-height: 260px;
    padding: 0 20px 20px;
  }
  .queue-section.mobile-chat {
    display: none;
  }
  .queue-list {
    max-height: 350px;
  }
  .queue-info h3 {
    font-size: 11px;
  }
  .queue-thumb {
    width: 80px;
    height: 50px;
  }
  .queue-item {
    gap: 11px;
  }
  .queue-note {
    font-size: 8px;
  }
  .chat-section {
    border: 0;
    height: 320px;
    min-height: 320px;
    padding: 0 20px 20px;
  }
  .chat-section.mobile-queue {
    display: none;
  }
  .chat-message p {
    font-size: 12px;
  }
  .chat-message strong {
    font-size: 10px;
  }
  .chat-input input,
  .chat-heading h3 {
    font-size: 12px;
  }
  .my-seat {
    margin: 0 20px 24px;
  }
  .auth-sidebar {
    padding: 28px 25px 35px;
  }
  .auth-card h2 {
    font-size: 28px;
  }
  .modal {
    border-radius: 13px;
    max-width: calc(100vw - 20px);
    padding: 21px;
  }
  .modal-head h2 {
    font-size: 19px;
  }
  .modal-head p {
    font-size: 10px;
  }
  .seatmap-row {
    gap: 3px;
  }
  .seat-group {
    border-radius: 5px;
    gap: 2px;
    padding: 2px;
  }
  .seat-choice {
    border-radius: 4px;
    width: 21px;
    height: 25px;
    font-size: 7px;
  }
  .row-label {
    width: 10px;
    font-size: 8px;
  }
  .seatmap {
    gap: 10px;
  }
  .seatmap-screen {
    margin: 12px 10px 26px;
    font-size: 7px;
  }
  .seatmap-footer {
    font-size: 8px;
    line-height: 1.8;
  }
  .seatmap-footer > span:last-child {
    text-align: right;
    max-width: 140px;
  }
  .seat-legend {
    gap: 15px;
    font-size: 8px;
  }
  .swatches {
    gap: 12px;
  }
  .party-label {
    font-size: 8px;
    top: 58px;
    right: 13px;
  }
  .toast {
    font-size: 11px;
    bottom: 15px;
  }
  .empty-queue {
    padding: 22px 0;
  }
  .empty-queue p {
    font-size: 11px;
  }
  .empty-queue h3 {
    font-size: 13px;
  }
}
.youtube-screen > .youtube-host,
.youtube-screen > .screen-idle {
  position: absolute;
  inset: 0;
}
.youtube-host iframe {
  pointer-events: none;
}
.sender-only-note {
  color: var(--muted);
  text-align: right;
  max-width: 120px;
  font-size: 9px;
  line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}
.chat-level {
  letter-spacing: 0.02em;
  color: #10140f;
  background: #c9d1bd;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 1px;
  padding: 2px 4px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.chat-level.lv-2 {
  background: #8fe08a;
}
.chat-level.lv-3 {
  background: #7cc4ff;
}
.chat-level.lv-4 {
  background: #c59cff;
}
.chat-level.lv-5 {
  background: linear-gradient(90deg, #ffb347, #ffd76a);
  box-shadow: 0 0 6px #ffb34766;
}
.chat-level.lv-6 {
  background: linear-gradient(90deg, #ff6b6b, #ffa07a);
  box-shadow: 0 0 6px #ff6b6b66;
  color: #fff;
}
.chat-level.lv-7 {
  background: linear-gradient(90deg, #00d2ff, #3a7bd5);
  box-shadow: 0 0 6px #00d2ff66;
  color: #fff;
}
.chat-level.lv-8 {
  background: linear-gradient(90deg, #f857a6, #ff5858);
  box-shadow: 0 0 6px #f857a666;
  color: #fff;
}
.chat-level.lv-9 {
  background: linear-gradient(90deg, #a18cd1, #fbc2eb);
  box-shadow: 0 0 6px #a18cd166;
  color: #201030;
}
.chat-level.lv-10 {
  background: linear-gradient(90deg, #ffe259, #ffa751);
  box-shadow: 0 0 10px #ffe259aa;
  color: #10140f;
  border: 1px solid #fff3a8;
}
.chat-level.lv-11,
.chat-level.lv-12,
.chat-level.lv-13 {
  background: linear-gradient(90deg, #00b09b, #96c93d);
  box-shadow: 0 0 8px #00b09b88;
  color: #fff;
}
.chat-level.lv-14,
.chat-level.lv-15,
.chat-level.lv-16 {
  background: linear-gradient(90deg, #8a2387, #e94057);
  box-shadow: 0 0 8px #e9405788;
  color: #fff;
}
.chat-level.lv-17,
.chat-level.lv-18,
.chat-level.lv-19 {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  box-shadow: 0 0 10px #ff416caa;
  color: #fff;
  border: 1px solid #ff9ebb;
}
.chat-level.lv-20,
.chat-level.lv-21,
.chat-level.lv-22 {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  box-shadow: 0 0 12px #00f2feaa;
  color: #051824;
  border: 1px solid #b8f7ff;
  font-weight: 900;
}
.chat-level.lv-23,
.chat-level.lv-24,
.chat-level.lv-25 {
  background: linear-gradient(90deg, #f9d423, #ff4e50, #f9d423);
  box-shadow: 0 0 14px #ffd700cc;
  color: #120500;
  border: 1px solid #fff7b2;
  font-weight: 900;
}
.chat-message .chat-level {
  margin-right: 6px;
}
.support-header {
  color: #e9c3ae;
  background: #e5aa8610;
  border: 1px solid #e5aa8622;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 10px;
}
.wardrobe-header {
  color: #c2cdb3;
  padding: 10px;
  font-size: 10px;
}
.support-modal {
  width: 760px;
}
.support-tiers {
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
  display: grid;
}
.support-tier {
  color: var(--tier-color);
  background: #ffffff03;
  border: 1px solid #ffffff16;
  border-radius: 10px;
  flex-direction: column;
  gap: 7px;
  padding: 15px 7px;
}
.support-tier > strong {
  font-size: 11px;
  font-weight: 500;
}
.support-tier > span {
  font-size: 15px;
  font-weight: 600;
}
.support-tier > small {
  color: #a6b398;
  font-size: 8px;
}
.support-tier.chosen {
  background: color-mix(in srgb, var(--tier-color) 8%, transparent);
  border-color: var(--tier-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tier-color) 6%, transparent);
}
.support-grid {
  grid-template-columns: 260px 1fr;
  gap: 25px;
  display: grid;
}
.qr-section {
  color: #22351e;
  text-align: center;
  background: #eef1e8;
  border-radius: 12px;
  padding: 17px 19px;
}
.qr-bank {
  color: #253b89;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  display: flex;
}
.qr-bank > span {
  letter-spacing: -1px;
  font-size: 25px;
  font-weight: 800;
}
.qr-bank > strong {
  color: #973a41;
  font-size: 15px;
}
.qr-image {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 8px;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.qr-image > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.qr-caption {
  color: #68765b;
  margin-top: 10px;
  font-size: 9px;
  display: block;
}
.qr-amount {
  letter-spacing: -0.5px;
  margin-top: 9px;
  font-size: 20px;
  display: block;
}
.transfer-info {
  padding-top: 3px;
}
.transfer-row {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.transfer-row > span {
  letter-spacing: 1.2px;
  color: #91a07f;
  margin-bottom: 8px;
  font-size: 8px;
  display: block;
}
.transfer-row strong {
  overflow-wrap: anywhere;
  font-size: 12px;
  font-weight: 500;
}
.transfer-row > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}
.transfer-row small {
  color: #94a383;
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.8;
  display: block;
}
.transfer-note strong {
  color: var(--accent);
  font-size: 11px;
}
.transfer-hint {
  color: #99a88b;
  margin: 12px 0;
  font-size: 9px;
  line-height: 1.9;
}
.support-not-ready {
  color: #e2c29c;
  background: #c18d4310;
  border: 1px solid #c18d4330;
  border-radius: 8px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 13px;
  font-size: 10px;
  line-height: 1.9;
  display: flex;
}
.info-mark {
  border: 1px solid #c9a5748c;
  border-radius: 50%;
  flex-shrink: 0;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  display: grid;
}
.support-ack {
  align-items: center;
  gap: 10px;
  margin: 22px 0 6px;
  font-size: 11px;
  line-height: 1.8;
  display: flex;
}
.support-ack input {
  appearance: auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  accent-color: var(--accent);
  margin: 0;
  padding: 0;
}
.support-reminder {
  text-align: center;
  color: #9caa8c;
  margin: 10px 10px 0;
  font-size: 9px;
  line-height: 1.9;
}
.support-summary {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 19px;
  display: flex;
}
.support-summary > span {
  color: #a1af91;
  font-size: 9px;
}
.support-summary strong {
  color: var(--accent);
  margin-top: 6px;
  font-size: 18px;
  font-weight: 500;
  display: block;
}
.support-summary button {
  gap: 10px;
  font-size: 11px;
}
.pending-support {
  color: #d2e5b5;
  background: #c9dc9c09;
  border: 1px solid #c9dc9c25;
  border-radius: 10px;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  display: flex;
}
.pending-support strong {
  font-size: 11px;
  font-weight: 500;
}
.pending-support p {
  color: #a5b794;
  margin-top: 7px;
  font-size: 10px;
}
.donation-history {
  border-top: 1px solid var(--line);
  color: #a0af8f;
  margin-top: 20px;
  padding-top: 15px;
  font-size: 10px;
}
.donation-history summary {
  cursor: pointer;
  margin-bottom: 12px;
}
.donation-history > div {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 9px;
  display: flex;
}
.donation-history strong {
  color: #cbd9bb;
  font-weight: 500;
}
.status-approved {
  color: #c4e89c;
}
.status-rejected {
  color: #e2a294;
}
.status-pending {
  color: #dfc79e;
}
.wardrobe-preview {
  text-align: center;
  background: radial-gradient(#d1ef9b08, #0000 65%);
  border: 1px solid #ffffff0f;
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 6px 0 20px;
  position: relative;
}
.preview-bubble {
  color: #28351f;
  z-index: 1;
  background: #ebefdf;
  border-radius: 11px;
  max-width: 90%;
  margin: 18px auto 0;
  padding: 13px 22px;
  font-size: 12px;
  line-height: 1.6;
  display: table;
  position: relative;
}
.wardrobe-preview > .character-preview {
  max-width: 300px;
  height: 155px;
  margin: 6px auto 0;
}
.preview-caption {
  color: #c9d6b8;
  margin-top: 7px;
  font-size: 10px;
}
.preview-caption > span {
  color: #90a17e;
  margin-top: 7px;
  font-size: 8px;
  display: block;
}
.bubble-spark {
  display: none;
}
.frame-tier-0 {
  border: 1px solid #b3bda6;
}
.frame-tier-1 {
  color: #4d3515;
  background: #fff5da;
  border: 2px solid #d8ae56;
  box-shadow: 0 3px 16px #d5a94d24;
}
.frame-tier-1:after {
  content: "✦";
  color: #e3bf6b;
  text-shadow: 0 1px 2px #392b11;
  font-size: 14px;
  position: absolute;
  top: -9px;
  right: -7px;
}
.frame-tier-2 {
  color: #1e425b;
  background: linear-gradient(135deg, #e4f6ff, #d7e9fc);
  border: 2px solid #72c2ed;
  border-radius: 4px 13px;
  box-shadow:
    0 0 0 3px #72c2ed22,
    0 4px 18px #72c2ed20;
}
.frame-tier-2:after {
  content: "◆";
  color: #9bd9ff;
  text-shadow: 0 1px 3px #2c5068;
  font-size: 15px;
  position: absolute;
  top: -9px;
  right: -6px;
}
.frame-tier-3 {
  color: #ffe6dc;
  background: linear-gradient(135deg, #3b202b, #2e1727);
  border: 2px solid #ec8886;
  border-radius: 12px 4px;
  animation: 3s ease-in-out infinite ember;
  box-shadow:
    0 0 0 3px #ef8f7e13,
    0 0 21px #f58f8a26;
}
.frame-tier-3:before,
.frame-tier-3:after {
  content: "✦";
  color: #ffb39c;
  text-shadow: 0 0 8px #ff7277;
  font-size: 16px;
  position: absolute;
  top: -9px;
}
.frame-tier-3:before {
  left: -6px;
}
.frame-tier-3:after {
  right: -6px;
}
.frame-tier-4 {
  color: #fff3ec;
  background:
    linear-gradient(135deg, #302441, #1d3040) 0 0/100% 100% padding-box
      padding-box,
    linear-gradient(120deg, #bdedc2, #e9d698, #e5a7f5, #8ad8ef, #bdedc2) 0
      0/240% 240% border-box;
  border: 2px solid #0000;
  border-radius: 13px;
  animation: 6s infinite aurora;
  box-shadow:
    0 0 0 3px #b6a7f51c,
    0 0 25px #b5a1ff2a;
}
.frame-tier-4:before {
  content: "✧";
  color: #dcf0c5;
  text-shadow: 0 0 9px #d5eeb1;
  font-size: 22px;
  position: absolute;
  top: -13px;
  left: -8px;
}
.frame-tier-4:after {
  content: "✦";
  color: #e7bef8;
  text-shadow: 0 0 9px #dbb2ff;
  font-size: 18px;
  position: absolute;
  top: -10px;
  right: -8px;
}
.frame-tier-4 .bubble-spark {
  color: #e9d7a4;
  display: block;
  position: absolute;
  bottom: -9px;
  right: 7px;
}
.outfit-tier-1 .mini-body,
.outfit-tier-2 .mini-body,
.outfit-tier-3 .mini-body,
.outfit-tier-4 .mini-body {
  border: 2px solid #f6e6bd80;
}
.mini-body > svg {
  color: #fff2c4;
  position: absolute;
  bottom: 7px;
}
.outfit-tier-2 .mini-body {
  border-color: #a7d9f7;
}
.outfit-tier-3 .mini-body {
  border-color: #ffc6b0;
  box-shadow:
    0 0 18px #f3897d50,
    inset -7px -2px 10px #0003;
}
.outfit-tier-4 .mini-body {
  background: linear-gradient(135deg, #767fb3, #ad78af, #809ca1);
  border-color: #e1d0ff;
  box-shadow:
    0 0 24px #cea8f557,
    inset -7px -2px 10px #0002;
}
.outfit-tier-4:before {
  content: "";
  z-index: 4;
  border: 2px solid #d3edba;
  border-radius: 50%;
  width: 60px;
  height: 12px;
  position: absolute;
  top: -4px;
  left: 15px;
  box-shadow: 0 0 11px #d3edba60;
}
.wardrobe-tabs {
  border-bottom: 1px solid var(--line);
  gap: 22px;
  margin-bottom: 17px;
  display: flex;
}
.wardrobe-tabs button {
  color: #9fac91;
  padding: 11px 2px 14px;
  font-size: 11px;
}
.wardrobe-tabs button.active {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.wardrobe-items {
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  display: grid;
}
.wardrobe-item {
  color: var(--tier-color);
  background: #ffffff02;
  border: 1px solid #ffffff16;
  border-radius: 9px;
  flex-direction: column;
  gap: 7px;
  padding: 15px 5px;
}
.wardrobe-item.chosen {
  border-color: var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 8%, transparent);
}
.wardrobe-item strong {
  font-size: 10px;
  font-weight: 500;
}
.wardrobe-item > span {
  color: #a6b695;
  font-size: 9px;
}
.wardrobe-item > small {
  color: #a2b38f;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 7px;
  display: flex;
}
.item-art {
  width: 43px;
  height: 40px;
  color: var(--tier-color);
  place-items: center;
  margin-bottom: 5px;
  display: grid;
}
.frame-art {
  border: 1px solid var(--tier-color);
  background: color-mix(in srgb, var(--tier-color) 7%, transparent);
  border-radius: 8px;
}
.tier-3 .item-art,
.tier-4 .item-art {
  filter: drop-shadow(
    0 0 6px color-mix(in srgb, var(--tier-color) 35%, transparent)
  );
}
.tier-description {
  color: #b9c6ab;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  font-size: 10px;
  display: flex;
}
.wardrobe-progress {
  margin: 22px 0;
}
.wardrobe-progress > div:first-child {
  color: #9fac90;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  line-height: 1.8;
  display: flex;
}
.wardrobe-progress strong {
  color: #d2e6b6;
  font-weight: 500;
}
.wardrobe-progress small {
  font-size: 8px;
}
.progress-track {
  background: #ffffff0a;
  border-radius: 5px;
  height: 4px;
  margin-top: 12px;
  overflow: hidden;
}
.progress-track > span {
  border-radius: inherit;
  background: linear-gradient(90deg, #b6cd7c, #d6bcf1);
  height: 100%;
  display: block;
}
.wardrobe-actions {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}
.wardrobe-actions .primary {
  font-size: 11px;
}
.wardrobe-actions .quiet-button {
  font-size: 10px;
}
.support-header:hover {
  background: #e5aa8620;
}
@keyframes ember {
  50% {
    box-shadow:
      0 0 0 3px #ef8f7e1d,
      0 0 24px #f58f8a40;
  }
}
@keyframes aurora {
  50% {
    background-position:
      0 0,
      100% 70%;
  }
}
@media (width<=850px) {
  .header-actions {
    gap: 7px;
  }
  .support-header {
    font-size: 9px;
  }
  .wardrobe-header {
    padding: 9px;
    font-size: 9px;
  }
  .header-center {
    display: none;
  }
  .support-modal {
    width: 720px;
  }
}
@media (width<=540px) {
  .support-header {
    border-radius: 50%;
    width: 33px;
    height: 33px;
    padding: 0;
  }
  .support-header > span,
  .wardrobe-header > span {
    display: none;
  }
  .wardrobe-header {
    width: 30px;
    height: 33px;
    padding: 0;
  }
  .header-actions {
    gap: 5px;
  }
  .support-tiers {
    gap: 6px;
  }
  .support-tier {
    gap: 6px;
    padding: 12px 3px;
  }
  .support-tier > strong {
    font-size: 8px;
  }
  .support-tier > span {
    font-size: 11px;
  }
  .support-tier > small {
    font-size: 6px;
  }
  .support-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .qr-section {
    width: 100%;
    max-width: 270px;
    margin: auto;
    padding: 15px 20px;
  }
  .transfer-info {
    grid-template-columns: 1fr 1fr;
    gap: 0 15px;
    display: grid;
  }
  .transfer-note,
  .transfer-hint {
    grid-column: 1/-1;
  }
  .transfer-row > span {
    letter-spacing: 0.8px;
    font-size: 7px;
  }
  .transfer-row strong {
    font-size: 11px;
  }
  .transfer-note strong,
  .support-ack {
    font-size: 10px;
  }
  .wardrobe-items {
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
  }
  .wardrobe-item {
    padding: 13px 4px;
  }
  .wardrobe-item strong {
    font-size: 9px;
  }
  .wardrobe-item > span {
    font-size: 8px;
  }
  .wardrobe-progress > div:first-child {
    display: block;
  }
  .wardrobe-progress small {
    margin-top: 4px;
    display: block;
  }
  .wardrobe-actions .primary {
    padding: 10px;
    font-size: 10px;
  }
  .wardrobe-actions .quiet-button {
    padding: 10px;
    font-size: 9px;
  }
  .support-not-ready {
    font-size: 9px;
  }
  .preview-bubble {
    font-size: 11px;
  }
  .support-modal .modal-head h2 {
    font-size: 18px;
  }
  .support-modal .eyebrow {
    letter-spacing: 1px;
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .frame-tier-3,
  .frame-tier-4 {
    animation: none;
  }
}
.support-contact {
  background: #a3c78b09;
  border: 1px solid #b4cda32a;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 14px 16px;
  display: flex;
}
.support-contact strong {
  color: #dae5ce;
  font-size: 10px;
  font-weight: 500;
}
.support-contact p {
  color: #9ead90;
  margin-top: 5px;
  font-size: 9px;
}
.support-contact a {
  color: var(--accent);
  white-space: nowrap;
  border: 1px solid #d8ef8237;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 11px 12px;
  font-size: 11px;
  display: flex;
}
.support-contact a:hover {
  background: #d8ef8210;
}
@media (width<=540px) {
  .support-contact {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 13px;
  }
  .support-contact strong {
    font-size: 10px;
  }
  .support-contact a {
    width: 100%;
  }
}
.support-contact:has(details[open]) {
  align-items: flex-start;
}
.zalo-contact-details {
  min-width: 170px;
}
.zalo-contact-details summary {
  cursor: pointer;
  color: var(--accent);
  border: 1px solid #d8ef8237;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 11px 12px;
  font-size: 11px;
  list-style: none;
  display: flex;
}
.zalo-contact-details summary::-webkit-details-marker {
  display: none;
}
.zalo-contact-details summary:hover {
  background: #d8ef8210;
}
.zalo-card {
  width: 280px;
  max-width: 100%;
  margin-top: 12px;
}
.zalo-card > img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: block;
}
.zalo-card > div {
  gap: 7px;
  margin-top: 9px;
  display: flex;
}
.zalo-card > div > a {
  flex: 1;
  min-height: 37px;
  padding: 9px 6px;
  font-size: 9px;
}
@media (width<=540px) {
  .zalo-contact-details,
  .zalo-card {
    width: 100%;
  }
  .zalo-card {
    max-width: 320px;
    margin: 12px auto 0;
  }
  .zalo-contact-details summary {
    font-size: 11px;
  }
}
.support-waiting {
  color: #e7f3cf;
  background: #d8ef8212;
  border: 1px solid #d8ef8240;
  border-radius: 11px;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  padding: 11px 13px;
  display: flex;
}
.support-waiting svg {
  color: #d8ef82;
  flex-shrink: 0;
}
.support-waiting div {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.support-waiting strong {
  font-size: 13px;
  font-weight: 650;
}
.support-waiting span {
  color: #c9d5bd;
  font-size: 11.5px;
  line-height: 1.45;
}
.support-waiting.done {
  background: #8fe0a018;
  border-color: #8fe0a052;
}
.support-waiting.done svg {
  color: #8fe0a0;
}
.support-waiting.large {
  border-radius: 13px;
  margin-top: 4px;
  padding: 16px 18px;
}
.support-waiting.large strong {
  font-size: 15px;
}
.support-waiting.large span {
  font-size: 12.5px;
}
.outfit-tier-6 .mini-body {
  background: linear-gradient(160deg, #d0202c, #8e0f19 55%, #5e0810);
  border: 2px solid #ffcf5a;
  box-shadow:
    0 0 22px #ff4b3c45,
    inset -7px -2px 10px #0003;
}
.outfit-tier-6 .mini-body > span {
  color: #ffe9a8;
  z-index: 2;
  text-shadow: 0 1px 2px #0008;
  position: relative;
}
.outfit-tier-6 .mini-arm {
  background: linear-gradient(#c21a26, #6e0a12);
}
.outfit-tier-6 .mini-body:before {
  content: "";
  z-index: 1;
  background:
    radial-gradient(circle, #111 1.4px, #0000 1.8px) 0 0/8px 7px,
    #f7f3ea;
  border-radius: 9px;
  height: 13px;
  position: absolute;
  top: -5px;
  left: 3px;
  right: 3px;
  box-shadow: 0 2px 4px #0005;
}
.outfit-tier-6 .mini-body:after {
  content: "";
  background:
    radial-gradient(circle, #111 1.3px, #0000 1.7px) 0 2px/9px 9px,
    #f7f3ea;
  border-radius: 2px;
  width: 9px;
  position: absolute;
  top: 24px;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}
.mini-character.outfit-tier-6:after {
  content: "";
  z-index: -1;
  clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 4px 6px #0007);
  background: linear-gradient(
    90deg,
    #4a050b,
    #9c1420 18%,
    #7a0d16 50%,
    #9c1420 82%,
    #4a050b
  );
  border-bottom: 6px solid #f7f3ea;
  width: 108px;
  height: 74px;
  position: absolute;
  top: 52px;
  left: -9px;
}
.outfit-tier-5 .mini-body {
  background: linear-gradient(160deg, #22c9a0, #0f7a62 55%, #084a3c);
  border: 2px solid #d8fff3;
  box-shadow:
    0 0 22px #1fc9a045,
    inset -7px -2px 10px #0003;
}
.outfit-tier-5 .mini-body > span {
  color: #eafff7;
  text-shadow: 0 1px 2px #0008;
}
.outfit-tier-5 .mini-arm {
  background: linear-gradient(#1aa886, #0a5444);
}
@media (width>=851px) {
  .support-tiers > .support-tier:first-child {
    flex-direction: row;
    grid-column: 1/-1;
    justify-content: center;
    gap: 12px;
    padding: 10px 7px;
  }
}
html,
body,
#root {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.immersive-app {
  isolation: isolate;
  color: #e9eee0;
  background: #101411;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.immersive-theater.theater-viewport {
  border: 0;
  border-radius: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  position: absolute;
  inset: 0;
}
.immersive-theater:after {
  z-index: 3;
  background: linear-gradient(#090e0bb5 0, #0000 22% 65%, #090e0bab 100%);
  box-shadow: inset 0 0 130px #0005;
}
.room-hud-top {
  z-index: 10;
  pointer-events: none;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  display: flex;
  position: absolute;
  top: 24px;
  left: 28px;
  right: 28px;
}
.room-hud-top > * {
  pointer-events: auto;
}
.hud-brand {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #121913b8;
  border: 1px solid #d6e5c61f;
  border-radius: 14px;
  gap: 10px;
  padding: 10px 15px 10px 11px;
}
.hud-brand .brand-symbol {
  border-radius: 11px;
  width: 36px;
  height: 36px;
  font-size: 35px;
  line-height: 29px;
}
.hud-brand .brand-symbol > span {
  width: 5px;
  height: 5px;
  top: 16px;
  right: 7px;
}
.hud-brand > div {
  font-size: 26px;
}
.hud-brand > div > span {
  letter-spacing: 1.1px;
  color: #a8b79c;
  margin-top: 7px;
  font-size: 6px;
}
.hud-room-state {
  white-space: nowrap;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #cedac1;
  background: #111912b8;
  border: 1px solid #d6e5c61f;
  border-radius: 30px;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  font-size: 10px;
  display: flex;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.hud-room-state i {
  background: #d8e5c42f;
  width: 1px;
  height: 11px;
  margin: 0 5px;
}
.waiting-dot {
  background: #d2cba5;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.hud-top-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}
.hud-icon {
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  color: #d4dfc7;
  background: #111912b8;
  border: 1px solid #d6e5c622;
  border-radius: 12px;
  width: 40px;
  height: 40px;
}
.hud-icon:hover {
  background: #263125c9;
}
.hud-top-actions .profile-button {
  border: 2px solid #d8e7ce44;
  width: 38px;
  height: 38px;
  margin-left: 4px;
  box-shadow: 0 4px 20px #0003;
}
.hud-now-playing {
  z-index: 7;
  text-shadow: 0 1px 8px #0009;
  pointer-events: none;
  max-width: 360px;
  position: absolute;
  top: 108px;
  left: 30px;
}
.hud-now-playing .eyebrow {
  letter-spacing: 1.5px;
  color: #bac9ab;
  font-size: 8px;
}
.hud-now-playing h1 {
  letter-spacing: -0.4px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}
.hud-now-playing p {
  color: #b5c2a6;
  margin-top: 5px;
  font-size: 9px;
}
.change-track-button {
  pointer-events: auto;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #d5e3c4;
  background: #131c14b8;
  border: 1px solid #d6e5c632;
  border-radius: 7px;
  margin-top: 12px;
  padding: 9px 12px;
  font-size: 10px;
}
.hud-party {
  color: #d8ef82;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 8px;
  display: flex;
}
.room-dock {
  z-index: 20;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: #101811d9;
  border: 1px solid #e4f2d02b;
  border-radius: 18px;
  align-items: center;
  gap: 5px;
  padding: 7px;
  display: flex;
  position: absolute;
  bottom: 85px;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 8px 40px #0006;
}
.room-dock button {
  color: #cad6bb;
  white-space: nowrap;
  border-radius: 12px;
  flex-direction: column;
  gap: 7px;
  min-width: 74px;
  height: 59px;
  padding: 9px 12px;
  font-size: 8px;
  position: relative;
}
.room-dock button:hover,
.room-dock button.active {
  color: #e0f2b2;
  background: #d8ef8217;
}
.room-dock button.active:after {
  content: "";
  background: var(--accent);
  border-radius: 10px;
  width: 10px;
  height: 2px;
  position: absolute;
  bottom: 4px;
}
.room-dock .donate-dock {
  color: #edc8b8;
}
.room-dock .donate-dock:hover {
  background: #efb39613;
}
.room-dock b {
  background: var(--accent);
  color: #24321c;
  border-radius: 5px;
  place-items: center;
  min-width: 14px;
  height: 14px;
  font-size: 7px;
  font-weight: 600;
  display: grid;
  position: absolute;
  top: 5px;
  right: 8px;
}
.quick-chat {
  z-index: 20;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: #0f1712d9;
  border: 1px solid #d6e5c62b;
  border-radius: 13px;
  align-items: center;
  gap: 10px;
  width: 420px;
  max-width: calc(100vw - 40px);
  height: 46px;
  padding: 0 6px 0 14px;
  display: flex;
  position: absolute;
  bottom: 23px;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 5px 22px #0003;
}
.quick-chat > svg {
  color: #a5b697;
}
.quick-chat input {
  color: #e3ecd9;
  background: 0 0;
  border: 0;
  padding: 10px 0;
  font-size: 11px;
}
.quick-chat input:focus-visible {
  outline: none;
}
.quick-chat:focus-within {
  border-color: #d8ef828c;
}
.quick-chat button {
  width: 35px;
  min-width: 35px;
  height: 35px;
  color: var(--accent);
  background: #d8ef8211;
  border-radius: 9px;
}
.hud-camera,
.hud-sound {
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
  z-index: 15;
  background: #111912c9;
  border: 1px solid #d6e5c62b;
  border-radius: 12px;
  gap: 3px;
  padding: 5px;
  display: flex;
  position: absolute;
  bottom: 26px;
}
.hud-camera {
  left: 28px;
}
.hud-sound {
  right: 28px;
}
.hud-camera button,
.hud-sound button {
  color: #c5d2b8;
  border-radius: 7px;
  width: 38px;
  height: 38px;
}
.hud-camera button.active {
  color: var(--accent);
  background: #d8ef8215;
}
.hud-camera button:hover,
.hud-sound button:hover {
  background: #d8ef8215;
}
.hud-sound .dim {
  opacity: 0.5;
}
.hud-logout {
  color: #a6b797;
  z-index: 10;
  opacity: 0.75;
  background: #111912a6;
  border: 1px solid #d6e5c620;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  position: absolute;
  bottom: 91px;
  left: 30px;
}
.auth-overlay {
  z-index: 25;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background: #07100958;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0;
}
.immersive-auth {
  scrollbar-width: thin;
  background: #141d16ed;
  border: 1px solid #d6e5c62b;
  border-radius: 19px;
  width: 370px;
  max-width: 100%;
  max-height: calc(100dvh - 40px);
  padding: 30px;
  overflow: auto;
  box-shadow: 0 25px 90px #0007;
}
.immersive-auth .auth-card h2 {
  font-size: 28px;
}
.room-drawer {
  z-index: 18;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  background: #131c16ed;
  border: 1px solid #d6e5c62f;
  border-radius: 16px;
  flex-direction: column;
  width: 345px;
  max-width: calc(100vw - 30px);
  max-height: 720px;
  padding: 21px;
  animation: 0.2s ease-out panel-in;
  display: flex;
  position: absolute;
  top: 93px;
  bottom: 180px;
  right: 25px;
  box-shadow: 0 15px 70px #0007;
}
.drawer-head {
  flex-shrink: 0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  display: flex;
}
.drawer-head .eyebrow {
  letter-spacing: 1.3px;
  font-size: 7px;
}
.drawer-head h2 {
  letter-spacing: -0.6px;
  margin-top: 9px;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.5;
}
.drawer-description {
  color: #aab99a;
  margin-top: 13px;
  margin-bottom: 15px;
  font-size: 9px;
  line-height: 1.9;
}
.drawer-queue {
  scrollbar-width: thin;
  scrollbar-color: #536446 transparent;
  flex: 1;
  min-height: 100px;
  overflow: auto;
}
.drawer-chat-feed {
  scrollbar-width: thin;
  scrollbar-color: #536446 transparent;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.drawer-chat-feed .chat-message p {
  font-size: 13px;
}
.drawer-chat-feed .chat-message strong {
  font-size: 12px;
}
.room-drawer .primary {
  flex-shrink: 0;
  min-height: 43px;
  margin-top: 17px;
  font-size: 11px;
}
.room-drawer .queue-info h3 {
  font-size: 10px;
}
.room-drawer .queue-thumb {
  width: 66px;
  height: 45px;
}
.immersive-app > .toast {
  z-index: 100;
  font-size: 11px;
  bottom: 168px;
}
.immersive-app .modal {
  z-index: 100;
}
.hud-now-playing + .room-dock {
  pointer-events: auto;
}
@keyframes panel-in {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (width>=1600px) {
  .room-hud-top {
    top: 30px;
    left: 35px;
    right: 35px;
  }
  .hud-now-playing {
    max-width: 430px;
    top: 119px;
    left: 38px;
  }
  .hud-now-playing h1 {
    font-size: 18px;
  }
  .room-dock {
    bottom: 92px;
  }
  .room-dock button {
    min-width: 82px;
    height: 61px;
    font-size: 9px;
  }
  .quick-chat {
    width: 450px;
    bottom: 28px;
  }
  .hud-camera,
  .hud-sound {
    bottom: 31px;
  }
  .room-drawer {
    width: 370px;
    top: 105px;
    bottom: 185px;
    right: 34px;
  }
}
@media (width<=1000px) {
  .hud-room-state {
    gap: 6px;
    padding: 10px 12px;
    font-size: 8px;
  }
  .hud-now-playing {
    max-width: 270px;
    top: 103px;
  }
  .hud-now-playing h1 {
    font-size: 13px;
  }
  .room-drawer {
    width: 320px;
    right: 18px;
  }
  .room-dock {
    bottom: 82px;
  }
  .room-dock button {
    min-width: 63px;
    height: 56px;
    padding: 8px 10px;
    font-size: 7px;
  }
  .quick-chat {
    width: 370px;
    bottom: 20px;
  }
  .hud-camera {
    bottom: 22px;
    left: 18px;
  }
  .hud-sound {
    bottom: 22px;
    right: 18px;
  }
  .hud-camera button,
  .hud-sound button {
    width: 33px;
    height: 35px;
  }
  .hud-logout {
    bottom: 84px;
    left: 20px;
  }
}
@media (width<=720px) {
  .room-hud-top {
    top: 15px;
    left: 15px;
    right: 15px;
  }
  .hud-brand {
    border-radius: 12px;
    gap: 8px;
    padding: 8px 11px 8px 8px;
  }
  .hud-brand > div {
    font-size: 23px;
  }
  .hud-brand > div > span {
    letter-spacing: 0.7px;
    font-size: 5px;
  }
  .hud-brand .brand-symbol {
    border-radius: 9px;
    width: 31px;
    height: 31px;
    font-size: 31px;
    line-height: 24px;
  }
  .hud-brand .brand-symbol > span {
    width: 4px;
    height: 4px;
    top: 14px;
    right: 6px;
  }
  .hud-top-actions {
    gap: 5px;
  }
  .hud-icon {
    border-radius: 10px;
    width: 34px;
    height: 34px;
  }
  .hud-top-actions .profile-button {
    width: 32px;
    height: 32px;
    margin-left: 1px;
    font-size: 12px;
  }
  .fullscreen-button {
    display: none;
  }
  .hud-room-state {
    background: #101811b8;
    border-radius: 7px;
    gap: 6px;
    padding: 7px 9px;
    font-size: 8px;
    top: 64px;
    left: 0;
    transform: none;
  }
  .hud-room-state i {
    margin: 0 3px;
  }
  .hud-now-playing {
    max-width: 300px;
    top: 120px;
    left: 17px;
    right: 17px;
  }
  .hud-now-playing .eyebrow {
    letter-spacing: 1.1px;
    font-size: 6px;
  }
  .hud-now-playing h1 {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.6;
  }
  .hud-now-playing p {
    margin-top: 4px;
    font-size: 8px;
  }
  .change-track-button {
    margin-top: 9px;
    padding: 7px 9px;
    font-size: 8px;
  }
  .room-dock {
    border-radius: 15px;
    gap: 2px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 5px;
    bottom: 75px;
  }
  .room-dock button {
    border-radius: 10px;
    gap: 7px;
    min-width: 49px;
    height: 53px;
    padding: 7px 6px;
    font-size: 6px;
  }
  .room-dock button > svg {
    width: 19px;
    height: 19px;
  }
  .room-dock b {
    min-width: 12px;
    height: 12px;
    font-size: 6px;
    top: 3px;
    right: 4px;
  }
  .quick-chat {
    border-radius: 12px;
    width: calc(100vw - 28px);
    max-width: 440px;
    height: 43px;
    bottom: 16px;
  }
  .quick-chat input,
  .quick-chat input::placeholder {
    font-size: 10px;
  }
  .quick-chat > svg {
    width: 14px;
  }
  .hud-camera,
  .hud-sound {
    border-radius: 10px;
    gap: 2px;
    padding: 4px;
    bottom: 151px;
  }
  .hud-camera {
    left: 14px;
  }
  .hud-sound {
    right: 14px;
  }
  .hud-camera button,
  .hud-sound button {
    border-radius: 6px;
    width: 31px;
    height: 32px;
  }
  .hud-camera button > svg,
  .hud-sound button > svg {
    width: 16px;
    height: 16px;
  }
  .hud-logout {
    border-radius: 7px;
    width: 26px;
    height: 26px;
    inset: 77px 15px auto auto;
  }
  .hud-logout svg {
    width: 12px;
  }
  .room-drawer {
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    background: #131c16f5;
    border-radius: 13px;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 19px;
    inset: 117px 12px 201px;
  }
  .drawer-head h2 {
    font-size: 19px;
  }
  .drawer-description {
    margin-top: 9px;
    margin-bottom: 11px;
    font-size: 9px;
  }
  .drawer-chat-feed .chat-message p {
    font-size: 14px;
  }
  .room-drawer .queue-info h3 {
    font-size: 10px;
  }
  .room-drawer .queue-thumb {
    width: 66px;
  }
  .immersive-app > .toast {
    padding: 11px 15px;
    font-size: 10px;
    bottom: 199px;
  }
  .immersive-auth {
    max-width: 350px;
    padding: 25px;
  }
  .immersive-auth .auth-card h2 {
    font-size: 25px;
  }
  .immersive-auth .auth-card > p {
    font-size: 10px;
  }
  .immersive-auth .auth-card label {
    font-size: 11px;
  }
  .immersive-auth .auth-tabs {
    margin: 20px 0;
  }
  .auth-overlay {
    padding: 15px;
  }
  .hud-party {
    font-size: 7px;
  }
}
@media (height<=600px) and (width>=721px) {
  .room-hud-top {
    top: 12px;
    left: 17px;
    right: 17px;
  }
  .hud-brand {
    padding: 6px 10px;
  }
  .hud-now-playing {
    max-width: 260px;
    top: 83px;
    left: 20px;
  }
  .hud-now-playing h1 {
    font-size: 12px;
  }
  .room-dock {
    padding: 5px;
    bottom: 66px;
  }
  .room-dock button {
    gap: 4px;
    min-width: 61px;
    height: 45px;
    font-size: 6px;
  }
  .quick-chat {
    width: 340px;
    height: 37px;
    bottom: 15px;
  }
  .room-drawer {
    padding: 17px;
    top: 78px;
    bottom: 140px;
  }
  .drawer-head h2 {
    font-size: 18px;
  }
  .drawer-description {
    font-size: 8px;
  }
  .hud-camera,
  .hud-sound {
    bottom: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .room-drawer {
    animation: none;
  }
}
.room-dock {
  border-radius: 17px;
  flex-direction: column;
  gap: 4px;
  width: 78px;
  max-width: none;
  padding: 6px;
  inset: 50% 23px auto auto;
  transform: translateY(-50%);
}
.room-dock button {
  gap: 7px;
  width: 64px;
  min-width: 64px;
  height: 57px;
  padding: 8px 5px;
  font-size: 7px;
}
.room-dock button.active:after {
  width: 2px;
  height: 14px;
  top: 50%;
  bottom: auto;
  left: 1px;
  transform: translateY(-50%);
}
.room-dock b {
  top: 5px;
  right: 8px;
}
.room-drawer {
  top: 100px;
  bottom: 95px;
  right: 115px;
}
.auth-overlay {
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}
.immersive-auth {
  margin: 0;
  animation: 0.2s ease-out auth-appear;
}
.hud-brand > div {
  letter-spacing: -1.5px;
  font-size: 24px;
}
.hud-now-playing {
  max-width: 340px;
}
.quality-button {
  color: #d8efb0;
}
@keyframes auth-appear {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (width>=1600px) {
  .room-dock {
    gap: 5px;
    width: 84px;
    padding: 7px;
    right: 30px;
  }
  .room-dock button {
    width: 68px;
    min-width: 68px;
    height: 59px;
    font-size: 8px;
  }
  .room-drawer {
    top: 110px;
    bottom: 95px;
    right: 130px;
  }
}
@media (width<=1000px) {
  .room-dock {
    width: 68px;
    padding: 5px;
    right: 16px;
  }
  .room-dock button {
    width: 56px;
    min-width: 56px;
    height: 51px;
    font-size: 6px;
  }
  .room-drawer {
    top: 95px;
    bottom: 90px;
    right: 97px;
  }
}
@media (width<=720px) {
  .room-dock {
    border-radius: 13px;
    gap: 3px;
    width: 55px;
    max-width: none;
    padding: 4px;
    inset: 50% 9px auto auto;
    transform: translateY(-50%);
  }
  .room-dock button {
    border-radius: 8px;
    gap: 5px;
    width: 45px;
    min-width: 45px;
    height: 45px;
    padding: 5px 2px;
    font-size: 5px;
  }
  .room-dock button > svg {
    width: 17px;
    height: 17px;
  }
  .room-dock b {
    top: 2px;
    right: 2px;
  }
  .room-drawer {
    width: auto;
    max-width: none;
    padding: 15px;
    inset: 120px 75px 140px 11px;
  }
  .drawer-head h2 {
    font-size: 16px;
  }
  .drawer-head .eyebrow {
    letter-spacing: 1px;
    font-size: 6px;
  }
  .drawer-description {
    font-size: 8px;
  }
  .room-drawer .queue-thumb {
    width: 46px;
    height: 35px;
  }
  .room-drawer .queue-item {
    gap: 5px;
  }
  .room-drawer .queue-info h3 {
    font-size: 8px;
  }
  .room-drawer .queue-info p {
    font-size: 7px;
  }
  .room-drawer .vote-button {
    width: 27px;
    min-width: 27px;
    font-size: 8px;
  }
  .room-drawer .queue-rank {
    width: 13px;
    font-size: 7px;
  }
  .room-drawer .primary {
    padding: 10px 7px;
    font-size: 9px;
  }
  .room-drawer .empty-queue p {
    font-size: 9px;
  }
  .room-drawer .empty-queue h3 {
    font-size: 11px;
  }
  .quick-chat {
    width: auto;
    max-width: none;
    bottom: 16px;
    left: 14px;
    right: 105px;
    transform: none;
  }
  .hud-camera {
    bottom: 76px;
    left: 14px;
  }
  .hud-sound {
    bottom: 17px;
    right: 14px;
  }
  .hud-brand > div {
    letter-spacing: -1px;
    font-size: 20px;
  }
  .hud-brand > div > span {
    letter-spacing: 0.5px;
    font-size: 4px;
  }
  .hud-top-actions {
    gap: 4px;
  }
  .hud-icon {
    width: 31px;
    height: 32px;
  }
  .hud-top-actions .profile-button {
    width: 30px;
    height: 30px;
  }
  .hud-now-playing {
    max-width: 275px;
    right: 77px;
  }
  .immersive-app > .toast {
    max-width: calc(100% - 90px);
    font-size: 9px;
    bottom: 133px;
  }
  .hud-party {
    max-width: 220px;
  }
}
@media (height<=600px) and (width>=721px) {
  .room-dock {
    gap: 2px;
    width: 61px;
    padding: 4px;
    top: 50%;
    bottom: auto;
    right: 15px;
  }
  .room-dock button {
    gap: 3px;
    width: 51px;
    min-width: 51px;
    height: 41px;
    font-size: 5px;
  }
  .room-drawer {
    top: 78px;
    bottom: 72px;
    right: 89px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .immersive-auth {
    animation: none;
  }
}
.effects-layer {
  z-index: 1;
  position: absolute;
  inset: 0;
  pointer-events: none !important;
}
.hud-party {
  background: #141e1290;
  border: 1px solid #d8ef8230;
  border-radius: 6px;
  width: max-content;
  padding: 6px 8px;
}
.room-dock .unread-badge {
  color: #fff;
  background: #e94b55;
  border: 1px solid #ffc1c94d;
  border-radius: 20px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  font-size: 8px;
  box-shadow: 0 2px 9px #e94b5533;
}
.drawer-chat-feed {
  padding: 15px 9px 5px 4px;
}
.drawer-chat-feed .chat-message {
  margin-bottom: 33px;
}
.drawer-chat-feed .chat-message .chat-history-bubble {
  overflow-wrap: anywhere;
  isolation: isolate;
  margin-top: 13px;
  padding: 10px 13px;
  line-height: 1.8;
  position: relative;
}
.drawer-chat-feed .chat-message .frame-tier-0 {
  color: #d5deca;
  background: #e0f6c607;
  border: 1px solid #d2e4b91c;
  border-radius: 9px;
}
.drawer-chat-feed .chat-message .frame-tier-3,
.drawer-chat-feed .chat-message .frame-tier-4 {
  color: #fff1e9;
}
.chat-char-count {
  color: #9eaf8f;
  white-space: nowrap;
  text-align: right;
  min-width: 34px;
  font-size: 8px;
}
@media (width<=540px) {
  .chat-char-count {
    min-width: 28px;
    font-size: 7px;
  }
  .quick-chat {
    gap: 6px;
  }
}
.hud-occupancy {
  flex-direction: column;
  gap: 3px;
  line-height: 1.2;
  display: flex;
}
.hud-occupancy > small {
  font-size: inherit;
  opacity: 0.8;
}
.room-drawer.drawer-chat {
  width: 328px;
}
@media (width>=1600px) {
  .room-drawer.drawer-chat {
    width: 352px;
  }
}
@media (width<=1000px) {
  .room-drawer.drawer-chat {
    width: 304px;
  }
}
@media (width<=720px), (height<=500px) and (width<=1000px) {
  .room-drawer.drawer-chat {
    width: auto;
  }
}
.immersive-app.hud-hidden
  :is(
    .brand,
    .hud-room-state,
    .hud-now-playing,
    .hud-party,
    .hud-game-button,
    .hud-camera,
    .private-room-launch,
    .hud-sound,
    .hud-logout,
    .quick-chat
  ),
.immersive-app.hud-hidden .hud-top-actions > :not(.hud-toggle),
.immersive-app.hud-hidden .room-dock > :not(.dock-chat) {
  display: none !important;
}
.immersive-app.hud-hidden .hud-top-actions {
  margin-left: auto;
}
.immersive-app.hud-hidden .hud-toggle {
  opacity: 0.55;
}
.immersive-app.hud-hidden .hud-toggle:hover {
  opacity: 1;
}
.room-dock .dock-collapse {
  color: #d8ef82;
  background: #e4f2d012;
  border: 1px solid #e4f2d02b;
  flex-shrink: 0;
  align-self: center;
  place-items: center;
  display: grid;
  border-radius: 50% !important;
  width: 38px !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 !important;
}
.room-dock .dock-collapse svg {
  transition: transform 0.35s;
}
.room-dock.collapsed .dock-collapse svg {
  transform: rotate(180deg);
}
.room-dock .dock-collapse .unread-badge {
  position: absolute;
  top: -4px;
  right: -6px;
}
.room-dock > :not(.dock-collapse) {
  transform-origin: top;
  transition:
    opacity 0.28s,
    transform 0.38s cubic-bezier(0.5, 0, 0.3, 1),
    visibility linear;
}
.immersive-app:not(.hud-hidden) .room-dock.collapsed {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
  background: 0 0;
  border-color: #0000;
}
.immersive-app:not(.hud-hidden) .room-dock.collapsed > :not(.dock-collapse) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.38s cubic-bezier(0.5, 0, 0.3, 1),
    visibility 0s linear 0.38s;
  transform: translateY(-34px) scale(0.55);
}
.immersive-app:not(.hud-hidden) .room-dock.collapsed .dock-collapse {
  pointer-events: auto;
  background: #101811e6;
  box-shadow: 0 6px 24px #0006;
}
.room-dock .emote-wrap {
  display: flex;
  position: relative;
}
.room-dock .emote-wrap > button {
  width: 100%;
}
.emote-menu {
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  z-index: 3;
  background: #101811f2;
  border: 1px solid #e4f2d02b;
  border-radius: 14px;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  animation: 0.18s ease-out emote-pop;
  display: flex;
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%);
  box-shadow: 0 8px 30px #0007;
}
.room-dock .emote-menu button {
  color: #eef3e6;
  justify-content: flex-start;
  flex-direction: row !important;
  gap: 9px !important;
  min-width: 136px !important;
  height: 44px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
}
.emote-menu button i {
  font-size: 20px;
  font-style: normal;
  line-height: 1;
}
.emote-menu button:hover {
  background: #e4f2d014;
}
@keyframes emote-pop {
  0% {
    opacity: 0;
    transform: translateY(-50%) translate(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .room-dock > :not(.dock-collapse),
  .room-dock .dock-collapse svg {
    transition: none;
  }
  .emote-menu {
    animation: none;
  }
}
.frame-tier-1,
.frame-tier-2,
.frame-tier-3,
.frame-tier-4 {
  isolation: isolate;
  color: #f4e4c4;
  background-size: auto;
  border: 1px solid #0000;
  border-radius: 5px;
  padding: 15px 20px;
  animation: none;
  position: relative;
  overflow: visible;
  box-shadow:
    inset 0 1px 15px #0008,
    0 5px 20px #0004;
}
.frame-tier-1 {
  color: #f5e2b4;
  background: linear-gradient(#4a381b, #241d14 45%, #332515);
}
.frame-tier-2 {
  color: #d8f2ff;
  background: linear-gradient(#173c53, #0c202e 45%, #102f45);
}
.frame-tier-3 {
  color: #ffe1cc;
  background: linear-gradient(#52292b, #26141e 45%, #3b1b28);
}
.frame-tier-4 {
  color: #fff0d3;
  background:
    radial-gradient(at 50% 0, #65447677, #0000 80%),
    linear-gradient(150deg, #281c42, #131b31 60%, #352145);
  box-shadow:
    inset 0 1px 16px #c4a7f71a,
    0 0 18px #c79af526,
    0 6px 20px #0005;
}
:is(.frame-tier-1, .frame-tier-2, .frame-tier-3, .frame-tier-4):before {
  content: "";
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px #0007);
  width: 154px;
  height: 44px;
  text-shadow: none;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  position: absolute;
  inset: -29px auto auto 50%;
  transform: translate(-50%);
}
:is(.frame-tier-1, .frame-tier-2, .frame-tier-3, .frame-tier-4):after {
  content: "";
  z-index: 1;
  pointer-events: none;
  width: auto;
  height: auto;
  text-shadow: none;
  filter: drop-shadow(0 2px 2px #0009);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  inset: -7px;
}
.frame-tier-1:before {
  background-image: url(/frames/crest-1.svg);
  width: 130px;
  height: 40px;
  top: -26px;
}
.frame-tier-1:after {
  background-image: url(/frames/border-1.svg);
}
.frame-tier-2:before {
  background-image: url(/frames/crest-2.svg);
  width: 146px;
  height: 44px;
  top: -29px;
}
.frame-tier-2:after {
  background-image: url(/frames/border-2.svg);
}
.frame-tier-3:before {
  background-image: url(/frames/crest-3.svg);
  width: 171px;
  height: 49px;
  top: -33px;
}
.frame-tier-3:after {
  background-image: url(/frames/border-3.svg);
}
.frame-tier-4:before {
  filter: drop-shadow(0 0 3px #d6b4ff66) drop-shadow(0 2px 3px #000a);
  background-image: url(/frames/crest-4.svg);
  width: 188px;
  height: 54px;
  top: -37px;
}
.frame-tier-4:after {
  filter: drop-shadow(0 0 3px #cfb5ff45) drop-shadow(0 2px 2px #0008);
  background-image: url(/frames/border-4.svg);
}
.speech-bubble:is(.frame-tier-1, .frame-tier-2, .frame-tier-3, .frame-tier-4) {
  text-align: center;
  min-width: 172px;
  max-width: 230px;
  padding: 14px 17px;
  font-size: 11px;
  line-height: 1.7;
}
.preview-bubble:is(.frame-tier-1, .frame-tier-2, .frame-tier-3, .frame-tier-4) {
  min-width: 270px;
  max-width: 85%;
  margin-top: 47px;
  padding: 19px 24px;
  font-size: 12px;
}
.wardrobe-preview:has(.preview-bubble:not(.frame-tier-0)) {
  padding-top: 10px;
}
.frame-tier-4 .bubble-spark {
  display: none;
}
.drawer-chat-feed
  .chat-message
  .chat-history-bubble:is(
    .frame-tier-1,
    .frame-tier-2,
    .frame-tier-3,
    .frame-tier-4
  ) {
  min-width: 145px;
  margin-top: 32px;
  padding: 15px 16px;
}
.drawer-chat-feed .chat-message .frame-tier-1 {
  color: #f5e2b4;
}
.drawer-chat-feed .chat-message .frame-tier-2 {
  color: #d8f2ff;
}
.drawer-chat-feed .chat-message .frame-tier-3 {
  color: #ffe1cc;
}
.drawer-chat-feed .chat-message .frame-tier-4 {
  color: #fff0d3;
}
.drawer-chat-feed .chat-history-bubble:before {
  max-width: 100%;
}
.wardrobe-item .frame-art {
  background-color: #142032;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  width: 51px;
  height: 44px;
  position: relative;
}
.wardrobe-item .frame-art:before {
  content: "";
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 56px;
  height: 16px;
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translate(-50%);
}
.wardrobe-item.tier-1 .frame-art {
  background-image: url(/frames/border-1.svg);
}
.wardrobe-item.tier-2 .frame-art {
  background-image: url(/frames/border-2.svg);
}
.wardrobe-item.tier-3 .frame-art {
  background-image: url(/frames/border-3.svg);
}
.wardrobe-item.tier-4 .frame-art {
  background-image: url(/frames/border-4.svg);
}
.wardrobe-item.tier-1 .frame-art:before {
  background-image: url(/frames/crest-1.svg);
}
.wardrobe-item.tier-2 .frame-art:before {
  background-image: url(/frames/crest-2.svg);
}
.wardrobe-item.tier-3 .frame-art:before {
  background-image: url(/frames/crest-3.svg);
}
.wardrobe-item.tier-4 .frame-art:before {
  background-image: url(/frames/crest-4.svg);
}
.wardrobe-item .frame-art > svg {
  opacity: 0.7;
  width: 19px;
}
.wardrobe-item {
  padding-top: 21px;
}
@media (width<=540px) {
  .preview-bubble:is(
    .frame-tier-1,
    .frame-tier-2,
    .frame-tier-3,
    .frame-tier-4
  ) {
    min-width: 225px;
    padding: 17px 20px;
    font-size: 10px;
  }
  .drawer-chat-feed
    .chat-message
    .chat-history-bubble:is(
      .frame-tier-1,
      .frame-tier-2,
      .frame-tier-3,
      .frame-tier-4
    ) {
    min-width: 115px;
    padding: 13px 11px;
    font-size: 10px;
  }
  .drawer-chat-feed .chat-history-bubble:before {
    max-width: 120px;
  }
}
.frame-tier-4.frame-tier-6 {
  color: #fff3d6;
  background:
    radial-gradient(at 50% 0, #c2283577, #0000 80%),
    linear-gradient(150deg, #5a0910, #2a0508 60%, #6e0d16);
  box-shadow:
    inset 0 1px 16px #ffcf5a22,
    0 0 20px #ff4b3c33,
    0 6px 20px #0006;
}
.frame-tier-4.frame-tier-6:before {
  filter: drop-shadow(0 0 4px #ffcf5a77) drop-shadow(0 2px 3px #000a);
  background-image: url(/frames/crest-6.svg);
}
.frame-tier-4.frame-tier-6:after {
  filter: drop-shadow(0 0 3px #ffcf5a55) drop-shadow(0 2px 2px #0008);
  background-image: url(/frames/border-6.svg);
}
.wardrobe-item.tier-6 .frame-art {
  background-color: #2a0508;
  background-image: url(/frames/border-6.svg);
}
.wardrobe-item.tier-6 .frame-art:before {
  background-image: url(/frames/crest-6.svg);
}
.frame-tier-4.frame-tier-5 {
  color: #eafff7;
  background:
    radial-gradient(at 50% 0, #1fc9a066, #0000 80%),
    linear-gradient(150deg, #073b30, #04201a 60%, #0b4a3c);
  box-shadow:
    inset 0 1px 16px #9ff5dc22,
    0 0 20px #1fc9a033,
    0 6px 20px #0006;
}
.frame-tier-4.frame-tier-5:before {
  filter: drop-shadow(0 0 4px #7df0cf77) drop-shadow(0 2px 3px #000a);
  background-image: url(/frames/crest-jade.svg);
}
.frame-tier-4.frame-tier-5:after {
  filter: drop-shadow(0 0 3px #7df0cf55) drop-shadow(0 2px 2px #0008);
  background-image: url(/frames/border-jade.svg);
}
.wardrobe-item.tier-5 .frame-art {
  background-color: #04201a;
  background-image: url(/frames/border-jade.svg);
}
.wardrobe-item.tier-5 .frame-art:before {
  background-image: url(/frames/crest-jade.svg);
}
.hud-quest {
  color: #deedc8;
  background: #172313f0;
  border: 1px solid #d8ef8240;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-right: 4px;
  padding: 10px 12px;
  font-size: 11px;
  display: flex;
  position: relative;
}
.hud-quest > svg {
  color: var(--accent);
}
.quest-dot {
  background: #ff3b4a;
  border: 2px solid #10140f;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: absolute;
  top: -3px;
  right: -3px;
}
@media (width<=720px) {
  .hud-quest {
    border-radius: 8px;
    min-height: 32px;
    margin-right: 0;
    padding: 7px;
  }
  .hud-quest > span {
    display: none;
  }
}
.level-card {
  background: #ffffff08;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  gap: 8px;
  margin-bottom: 16px;
  padding: 14px;
  display: grid;
}
.level-card-head {
  align-items: center;
  gap: 10px;
  display: flex;
}
.level-card-head .chat-level {
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 12px;
}
.level-card-head strong {
  font-size: 13px;
}
.level-track {
  background: #ffffff14;
  border-radius: 8px;
  height: 8px;
  overflow: hidden;
}
.level-track span {
  background: linear-gradient(90deg, #8fe08a, #d6f08a);
  border-radius: 8px;
  height: 100%;
  display: block;
}
.level-card small {
  opacity: 0.85;
  font-size: 11px;
}
.level-card b {
  color: #d6f08a;
}
.quest-list {
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.quest-list li {
  background: #ffffff06;
  border: 1px solid #ffffff12;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  display: flex;
}
.quest-list li.ready {
  background: #ff3b4a10;
  border-color: #ff3b4a66;
}
.quest-list li.claimed {
  opacity: 0.6;
}
.quest-name {
  gap: 3px;
  font-size: 12px;
  display: grid;
}
.quest-name small {
  opacity: 0.7;
  font-size: 10px;
}
.quest-name svg {
  vertical-align: -2px;
}
.quest-state {
  white-space: nowrap;
  color: #8fe08a;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  display: flex;
}
.quest-state.todo {
  color: #ffffff80;
}
.quest-claim {
  color: #10140f;
  white-space: nowrap;
  background: #d6f08a;
  border: 0;
  border-radius: 8px;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}
.quest-claim:disabled {
  opacity: 0.6;
}
.profile-level {
  margin-bottom: 14px;
}
@media (width>=721px) and (width<=1200px) {
  .hud-quest > span {
    display: none;
  }
  .hud-quest {
    padding: 10px;
  }
  .hud-room-state {
    min-width: 0;
    margin: 0 auto;
    position: static;
    transform: none;
  }
  .hud-room-state > span:nth-child(2),
  .hud-room-state > i {
    display: none;
  }
}
.wallet-short {
  display: none;
}
@media (width<=720px) {
  .hud-wallet .wallet-full {
    display: none;
  }
  .hud-wallet .wallet-short {
    display: inline;
  }
  .hud-wallet {
    flex-shrink: 0;
  }
  .hud-quest {
    padding: 6px;
  }
}
@media (width<=370px) {
  .hud-brand > div {
    display: none;
  }
  .profile-button {
    flex-shrink: 0;
  }
}
@media (width<=720px) {
  .hud-wallet > svg {
    display: none;
  }
  .profile-button {
    flex-shrink: 0;
  }
}
.reserve-box {
  background: #d8ef820d;
  border: 1px solid #d8ef8240;
  border-radius: 12px;
  gap: 10px;
  margin-top: 6px;
  padding: 14px;
  display: grid;
}
.reserve-box > strong {
  color: #e4f5b3;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  display: flex;
}
.reserve-box > p {
  color: #cfdac2;
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}
.reserve-agree {
  color: #bfcab2;
  cursor: pointer;
  align-items: flex-start;
  gap: 9px;
  font-size: 11px;
  line-height: 1.55;
  display: flex;
}
.reserve-agree input {
  accent-color: #d8ef82;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}
.reserve-mine {
  color: #e4f5b3;
  background: #d8ef8214;
  border: 1px solid #d8ef8233;
  border-radius: 9px;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 10px;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
  display: flex;
}
.reserve-mine svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.reserve-box .reserve-agree,
.reserve-box .reserve-agree span {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
}
.show-map-stage {
  color: #e4f5b3;
  letter-spacing: 0.12em;
  background: linear-gradient(#d8ef8233, #d8ef8208);
  border: 1px solid #d8ef8240;
  border-top: 0;
  border-radius: 0 0 18px 18px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  max-width: 420px;
  margin: 0 auto 14px;
  padding: 8px 14px;
  font-size: 10px;
  display: flex;
}
.show-map {
  gap: 9px;
  padding-bottom: 4px;
  display: grid;
  overflow-x: auto;
}
.show-map-row {
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  display: flex;
}
.show-map-row:nth-child(4) {
  margin-top: 4px;
}
.show-table {
  background: #5a3e2a40;
  border: 1px solid #c79a6b55;
  border-radius: 10px;
  gap: 3px;
  padding: 5px;
  display: flex;
}
.show-table.size-1 {
  background: #4e5a5840;
  border-color: #9fb8b455;
}
.show-table.size-2 {
  background: #62525240;
  border-color: #c79a9a55;
}
.show-seat {
  color: #d6dfc8;
  background: #ffffff0d;
  border: 1px solid #fff2;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  font-size: 10px;
  display: inline-flex;
}
.show-seat:not(:disabled):hover {
  background: #d8ef8222;
  border-color: #d8ef82;
}
.show-seat.taken {
  color: #f3c3b8;
  background: #e98a7a33;
  border-color: #e98a7a66;
}
.show-seat.mine {
  color: #132011;
  background: #d8ef82;
  border-color: #d8ef82;
}
@media (width<=540px) {
  .show-seat {
    width: 30px;
    min-width: 30px;
    height: 32px;
    font-size: 9px;
  }
  .show-map-row {
    gap: 6px;
  }
  .show-table {
    gap: 2px;
    padding: 4px;
  }
}
.bar-current small {
  color: #c9d6b4;
  margin-top: 4px;
  font-size: 11px;
  display: block;
}
.bar-current {
  color: #e4f5b3;
  background: #d8ef8214;
  border: 1px solid #d8ef8233;
  border-radius: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
}
.bar-menu {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  display: grid;
}
.bar-item {
  color: inherit;
  background: #ffffff07;
  border: 1px solid #ffffff1c;
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 6px;
  display: flex;
}
.bar-item:not(:disabled):hover {
  background: #d8ef8218;
  border-color: #d8ef82;
}
.bar-item:disabled {
  opacity: 0.55;
}
.bar-emoji {
  align-items: center;
  height: 32px;
  font-size: 30px;
  line-height: 1;
  display: flex;
}
.bar-item strong {
  font-size: 12px;
}
.bar-item small {
  color: #a7c17c;
  font-size: 10px;
}
@media (width<=540px) {
  .bar-menu {
    grid-template-columns: repeat(3, 1fr);
  }
}
.show-launch {
  z-index: 16;
  right: var(--show-launch-right, 224px);
  color: #ffe9b8;
  background: linear-gradient(135deg, #3b2f1ced, #2a1f17ed);
  border: 1px solid #ffd27a88;
  border-radius: 14px;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  position: absolute;
  bottom: 26px;
  box-shadow: 0 8px 22px #0006;
}
.show-launch:hover {
  border-color: #ffd27a;
}
.show-launch svg {
  color: #ffd27a;
}
.keyboard-open .show-launch {
  display: none;
}
@media (width<=1200px) {
  .show-launch {
    height: 44px;
    padding: 0 14px;
    font-size: 12px;
    bottom: 90px;
    left: 184px;
    right: auto;
  }
}
@media (width<=720px) {
  .show-launch {
    left: calc(max(12px, env(safe-area-inset-left)) + 146px);
    bottom: calc(146px + env(safe-area-inset-bottom));
    padding: 0 12px;
  }
}
@media (height<=500px) and (width<=1000px) {
  .show-launch {
    left: calc(max(12px, env(safe-area-inset-left)) + 150px);
    bottom: calc(76px + env(safe-area-inset-bottom));
  }
}
@media (width<=1200px) {
  .show-launch.in-show {
    left: 28px;
  }
}
@media (width<=720px) {
  .show-launch.in-show {
    left: max(12px, env(safe-area-inset-left));
  }
}
@media (height<=500px) and (width<=1000px) {
  .show-launch.in-show {
    left: max(12px, env(safe-area-inset-left));
  }
}
.immersive-app.hud-hidden .show-launch {
  display: none !important;
}
.hud-wallet {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: #deedc8;
  background: #172313dc;
  border: 1px solid #d8ef8240;
  border-radius: 10px;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin-right: 4px;
  padding: 10px 13px;
  font-size: 11px;
  display: flex;
}
.hud-wallet > svg {
  color: var(--accent);
}
.wallet-balance-card {
  background: radial-gradient(at 80% 0, #d8ef8210, #0000 65%), #d8ef8206;
  border: 1px solid #d8ef822c;
  border-radius: 13px;
  padding: 25px;
}
.wallet-balance-card > span,
.support-balance > span {
  letter-spacing: 1.7px;
  color: #a9b993;
  font-size: 8px;
}
.wallet-balance-card > strong {
  letter-spacing: -1.4px;
  color: var(--accent);
  margin-top: 11px;
  font-size: 37px;
  font-weight: 500;
  display: block;
}
.wallet-balance-card > div {
  gap: 11px;
  margin-top: 23px;
  display: flex;
}
.wallet-balance-card .quiet-button {
  font-size: 11px;
}
.wallet-prices {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 20px;
  margin: 21px 0;
  padding-bottom: 22px;
  display: flex;
}
.wallet-prices > span {
  color: #b4c3a4;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  line-height: 1.7;
  display: flex;
}
.wallet-prices strong {
  color: #d6e6c4;
  font-weight: 500;
}
.wallet-history-title {
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 500;
}
.wallet-history {
  scrollbar-width: thin;
  max-height: 300px;
  overflow: auto;
}
.wallet-history > p {
  color: #a4b394;
  padding: 16px 0;
  font-size: 11px;
}
.wallet-history > div {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  display: flex;
}
.wallet-history > div > span {
  color: #c6d5b4;
  background: #ffffff07;
  border-radius: 8px;
  place-items: center;
  width: 35px;
  height: 35px;
  display: grid;
}
.wallet-history .credit-icon {
  color: var(--accent);
  background: #d8ef820b;
}
.wallet-history > div > div {
  flex: 1;
}
.wallet-history strong {
  font-size: 11px;
  font-weight: 500;
}
.wallet-history small {
  color: #93a17f;
  margin-top: 6px;
  font-size: 8px;
  display: block;
}
.wallet-history b {
  color: #e2c9b2;
  font-size: 12px;
  font-weight: 500;
}
.wallet-history b.positive {
  color: var(--accent);
}
.support-balance {
  background: #d8ef8206;
  border: 1px solid #d8ef8228;
  border-radius: 10px;
  margin-top: 22px;
  padding: 17px;
}
.support-balance > strong {
  color: var(--accent);
  margin-top: 8px;
  font-size: 25px;
  font-weight: 500;
  display: block;
}
.support-balance > p {
  color: #a2b18f;
  margin-top: 10px;
  font-size: 9px;
}
.post-image-picker {
  background: #d8ef8204;
  border: 1px dashed #c6d9ad50;
  border-radius: 13px;
  flex-direction: column;
  align-items: center;
  margin-bottom: 23px;
  padding: 17px;
  display: flex;
}
.post-image-picker > div {
  color: #b7c9a2;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 13px;
  height: 170px;
  display: flex;
}
.post-image-picker strong {
  font-size: 13px;
  font-weight: 500;
}
.post-image-picker span {
  color: #91a27d;
  font-size: 9px;
}
.post-image-picker > img {
  object-fit: contain;
  border-radius: 7px;
  max-width: 100%;
  max-height: 240px;
}
.image-pick-button {
  color: var(--accent);
  cursor: pointer;
  background: #d8ef8210;
  border: 1px solid #d8ef8240;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 18px;
  font-size: 10px;
  display: flex;
}
.image-pick-button input {
  display: none;
}
textarea {
  color: #ecf2e2;
  width: 100%;
  font: inherit;
  resize: vertical;
  background: #ffffff04;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  outline: none;
  margin-top: 10px;
  padding: 13px;
  font-size: 12px;
  line-height: 1.8;
}
textarea:focus {
  border-color: #d8ef8270;
}
.input-count {
  float: right;
  color: #8fa27c;
  font-size: 9px;
}
.post-duration {
  margin: 23px 0;
}
.post-duration label {
  margin-bottom: 5px;
}
.post-duration label > strong {
  float: right;
  color: var(--accent);
  font-weight: 500;
}
.post-duration input {
  accent-color: var(--accent);
  cursor: pointer;
  height: 5px;
  margin-top: 19px;
  padding: 0;
}
.post-duration > div {
  color: #9aab87;
  justify-content: space-between;
  padding-top: 8px;
  font-size: 8px;
  display: flex;
}
.post-cost {
  background: #d8ef8207;
  border: 1px solid #d8ef8230;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  margin: 23px 0 14px;
  padding: 19px;
  display: flex;
}
.post-cost > div:first-child > span {
  letter-spacing: 1.6px;
  color: #a6b98e;
  font-size: 7px;
}
.post-cost strong {
  color: var(--accent);
  letter-spacing: -0.6px;
  margin-top: 7px;
  font-size: 24px;
  font-weight: 500;
  display: block;
}
.post-cost > div:last-child {
  text-align: right;
  color: #b7c7a4;
  font-size: 9px;
}
.post-cost small {
  color: #94a97d;
  margin-bottom: 7px;
  font-size: 9px;
  display: block;
}
.post-cost .insufficient {
  color: #eaa79a;
}
.post-insufficient {
  color: #dfb9a5;
  background: #dd9c7b0b;
  border: 1px solid #dd9c7b2c;
  border-radius: 9px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 11px 14px;
  font-size: 10px;
  display: flex;
}
.post-insufficient > button {
  color: var(--accent);
  min-height: 30px;
  font-size: 10px;
}
.boost-button {
  color: #ecd598;
  background: #e5c78b0b;
  border: 1px solid #e5c78b50;
  border-radius: 5px;
  gap: 4px;
  min-height: 25px;
  margin-top: 8px;
  padding: 4px 7px;
  font-size: 8px;
}
.boost-button:disabled {
  opacity: 0.38;
}
.queue-del-btn {
  color: #ff9e9e;
  background: #ff4d4d12;
  border: 1px solid #ff4d4d44;
  border-radius: 5px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    border-color 0.2s;
  vertical-align: middle;
}
.queue-del-btn:hover {
  background: #ff4d4d2c;
  border-color: #ff6b6b;
  color: #fff;
}
.screen-post-overlay {
  z-index: 10;
  color: #fff7e8;
  pointer-events: none;
  background: #10120e;
  width: 1280px;
  height: 720px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.screen-post-backdrop {
  filter: blur(30px) brightness(0.35);
  background-position: 50%;
  background-size: cover;
  position: absolute;
  inset: -40px;
}
.screen-post-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.screen-post-label {
  letter-spacing: 2px;
  text-shadow: 0 2px 8px #000;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  display: flex;
  position: absolute;
  top: 25px;
  left: 30px;
  right: 30px;
}
.screen-post-label strong {
  letter-spacing: 0;
  background: #13190ed9;
  border: 1px solid #e5dfc878;
  border-radius: 9px;
  padding: 10px 16px;
  font-size: 23px;
}
.screen-post-caption {
  text-align: center;
  background: linear-gradient(#0000, #111a0fe8 55%, #111a0ffa);
  padding: 75px 55px 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.screen-post-caption > span {
  color: #d8efb5;
  letter-spacing: 1px;
  text-shadow: 0 1px 5px #000;
  font-size: 20px;
}
.screen-post-caption h2 {
  overflow-wrap: anywhere;
  text-shadow: 0 2px 7px #000a;
  margin-top: 17px;
  font-size: 43px;
  font-weight: 600;
  line-height: 1.5;
}
.screen-post-progress {
  background: #ffffff15;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.screen-post-progress > span {
  background: linear-gradient(90deg, #d8ef82, #e6c68d);
  height: 100%;
  transition: width 0.25s linear;
  display: block;
}
@media (width<=720px) {
  .hud-wallet {
    border-radius: 8px;
    gap: 4px;
    min-height: 32px;
    margin-right: 0;
    padding: 7px;
    font-size: 8px;
  }
  .hud-wallet > svg {
    width: 13px;
  }
  .hud-top-actions {
    gap: 3px;
  }
  .hud-brand > div {
    font-size: 18px;
  }
  .hud-brand > div > span {
    font-size: 3px;
  }
  .hud-brand {
    gap: 6px;
    padding: 7px;
  }
  .hud-top-actions .hud-icon {
    width: 28px;
    height: 30px;
  }
  .hud-top-actions .profile-button {
    width: 28px;
    height: 28px;
  }
  .wallet-prices {
    flex-direction: column;
    gap: 10px;
  }
  .wallet-balance-card {
    padding: 20px;
  }
  .wallet-balance-card > strong {
    font-size: 31px;
  }
  .wallet-balance-card > div {
    flex-direction: column;
    align-items: stretch;
  }
  .wallet-balance-card .quiet-button {
    font-size: 10px;
  }
  .post-image-picker > div {
    height: 140px;
  }
  .post-image-picker strong {
    font-size: 11px;
  }
  .post-cost {
    padding: 15px;
  }
  .post-cost strong {
    font-size: 22px;
  }
  .wallet-history strong,
  .wallet-history b {
    font-size: 10px;
  }
  .wallet-history > div {
    gap: 9px;
  }
}
.post-styles {
  margin: -6px 0 18px;
}
.post-styles > span {
  margin-bottom: 8px;
  font-size: 11px;
  display: block;
}
.post-styles > span small {
  opacity: 0.6;
}
.post-styles > div {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  display: grid;
}
.post-style-chip {
  color: inherit;
  background: #ffffff06;
  border: 1px solid #ffffff1c;
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px;
  font-size: 10px;
  display: flex;
}
.post-style-chip small {
  opacity: 0.7;
  font-size: 9px;
}
.post-style-chip.active {
  background: #d6f08a1a;
  border-color: #d6f08a;
  box-shadow: 0 0 0 1px #d6f08a55;
}
.post-style-chip.look-neon strong {
  color: #5ff8ff;
}
.post-style-chip.look-hearts strong {
  color: #ff7aa2;
}
.post-style-chip.look-gold strong {
  color: #ffd36b;
}
.post-style-chip.look-fire strong {
  color: #ff8a3d;
}
@media (width<=540px) {
  .post-styles > div {
    grid-template-columns: repeat(3, 1fr);
  }
}
.screen-post-fx {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.screen-post-fx:before,
.screen-post-fx:after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.look-neon .screen-post-fx:before {
  border: 5px solid #5ff8ff;
  border-radius: 18px;
  inset: 12px;
  box-shadow:
    0 0 22px #5ff8ff,
    inset 0 0 22px #5ff8ff;
}
.look-neon .screen-post-fx:after {
  border: 3px solid #ff4fd8;
  border-radius: 12px;
  animation: 1.4s ease-in-out infinite alternate fx-pulse;
  inset: 26px;
  box-shadow:
    0 0 18px #ff4fd8,
    inset 0 0 18px #ff4fd8;
}
.look-gold .screen-post-fx:before {
  border: 14px solid #e8c062;
  box-shadow:
    inset 0 0 0 3px #fff3c4,
    inset 0 0 40px #ffcf5a88;
}
.look-gold .screen-post-fx:after {
  background: linear-gradient(100deg, #0000, #fff6d055, #0000);
  width: 180px;
  animation: 2.6s ease-in-out infinite fx-shine;
  inset: 0 auto 0 0;
}
.look-fire .screen-post-fx:before {
  box-shadow: inset 0 0 90px 24px #ff5a1fcc;
}
.look-fire .screen-post-fx:after {
  background: linear-gradient(#0000, #ffb34733 40%, #ff4a1aaa);
  height: 160px;
  animation: 0.9s steps(3, end) infinite alternate fx-flicker;
  top: auto;
}
.look-hearts .screen-post-fx:before {
  box-shadow: inset 0 0 70px 10px #ff4d7a77;
}
.screen-post-fx i {
  color: #ff4d7a;
  text-shadow: 0 0 14px #ff4d7a99;
  will-change: transform;
  font-size: 64px;
  font-style: normal;
  animation: 5s linear infinite fx-rise;
  position: absolute;
  bottom: -90px;
}
.screen-post-fx i:first-child {
  animation-delay: 0s;
  left: 6%;
}
.screen-post-fx i:nth-child(2) {
  font-size: 44px;
  animation-delay: 2.1s;
  left: 20%;
}
.screen-post-fx i:nth-child(3) {
  animation-delay: 3.6s;
  left: 38%;
}
.screen-post-fx i:nth-child(4) {
  font-size: 48px;
  animation-delay: 1.2s;
  left: 60%;
}
.screen-post-fx i:nth-child(5) {
  animation-delay: 2.9s;
  left: 78%;
}
.screen-post-fx i:nth-child(6) {
  font-size: 40px;
  animation-delay: 0.6s;
  left: 92%;
}
@keyframes fx-pulse {
  0% {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@keyframes fx-shine {
  0% {
    transform: translate(-200px) skew(-15deg);
  }
  to {
    transform: translate(1480px) skew(-15deg);
  }
}
@keyframes fx-flicker {
  0% {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@keyframes fx-rise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  10% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-860px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen-post-fx:after,
  .screen-post-fx i {
    animation: none;
  }
  .screen-post-fx i {
    display: none;
  }
}
.look-neon .screen-post-label,
.look-neon .screen-post-caption,
.look-neon .screen-post-progress,
.look-gold .screen-post-label,
.look-gold .screen-post-caption,
.look-gold .screen-post-progress,
.look-fire .screen-post-label,
.look-fire .screen-post-caption,
.look-fire .screen-post-progress,
.look-hearts .screen-post-label,
.look-hearts .screen-post-caption,
.look-hearts .screen-post-progress {
  z-index: 2;
}
.brand-symbol {
  flex-shrink: 0;
  overflow: visible;
  background: 0 0 !important;
  line-height: 0 !important;
}
.brand-symbol > img {
  filter: drop-shadow(0 3px 8px #d8ef8228);
  width: 100%;
  height: 100%;
  display: block;
}
.hud-brand {
  background: #141f17d9;
  border-color: #d8ef8238;
}
.hud-brand > div {
  letter-spacing: -1px;
}
.mobile-more {
  display: none;
}
.audio-recover-label {
  color: #ffe3a0;
  pointer-events: none;
  background: #2c2415ed;
  border: 1px solid #f0ce8566;
  border-radius: 9px;
  width: 180px;
  padding: 9px 11px;
  font-size: 11px;
  line-height: 1.5;
  position: absolute;
  bottom: calc(100% + 9px);
  right: 0;
  box-shadow: 0 4px 20px #0005;
}
.hud-sound .audio-needs-gesture {
  color: #ffe3a0 !important;
  border-color: #f0ce85 !important;
}
.settings-actions {
  gap: 10px;
  display: grid;
}
.settings-actions > button {
  border: 1px solid var(--line);
  border-radius: 10px;
  justify-content: flex-start;
  gap: 12px;
  min-height: 48px;
  padding: 12px 15px;
  font-size: 14px;
}
.settings-actions > button:hover {
  background: #ffffff08;
}
.settings-actions .logout-setting {
  color: #e5afa4;
  margin-top: 8px;
}
.seat-choice.bot-seat,
.seat-legend i.bot-seat {
  color: #bee0e7;
  background: #7babb52b;
  border-color: #91b9cf;
}
.seat-choice.bot-seat:hover {
  background: #7babb54a;
}
.seat-legend {
  flex-wrap: wrap;
}
@media (width<=720px), (height<=500px) and (width<=1000px) {
  .immersive-app {
    height: var(--cine-height, 100dvh);
    bottom: auto;
  }
  .room-hud-top {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    gap: 8px;
  }
  .hud-brand {
    border-radius: 12px;
    flex-shrink: 0;
    gap: 7px;
    padding: 7px;
  }
  .hud-brand .brand-symbol {
    width: 34px;
    height: 34px;
  }
  .hud-brand > div {
    letter-spacing: -0.8px;
    font-size: 18px;
  }
  .hud-brand > div > span {
    letter-spacing: 0.6px;
    margin-top: 5px;
    font-size: 5px;
  }
  .hud-top-actions {
    gap: 6px;
    min-width: 0;
  }
  .hud-top-actions > .hud-icon {
    display: none;
  }
  .hud-top-actions > .mobile-more {
    order: 2;
    display: flex;
  }
  .hud-top-actions .profile-button {
    order: 3;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 15px;
  }
  .hud-top-actions .hud-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .hud-wallet {
    gap: 5px;
    min-width: 0;
    max-width: 94px;
    min-height: 44px;
    padding: 8px;
    font-size: 11px;
  }
  .hud-wallet span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .hud-wallet svg {
    flex-shrink: 0;
    width: 15px;
  }
  .hud-room-state {
    gap: 6px;
    padding: 7px 10px;
    font-size: 10px;
    top: 62px;
    left: 0;
    transform: none;
  }
  .hud-room-state i {
    margin: 0 2px;
  }
  .hud-now-playing {
    max-width: 290px;
    top: 123px;
    left: 13px;
    right: 86px;
  }
  .hud-now-playing .eyebrow {
    font-size: 8px;
  }
  .hud-now-playing h1 {
    font-size: 13px;
    line-height: 1.5;
  }
  .hud-now-playing p {
    font-size: 10px;
    line-height: 1.5;
  }
  .change-track-button {
    min-height: 44px;
    margin-top: 8px;
    font-size: 11px;
  }
  .hud-party {
    white-space: normal;
    max-width: 100%;
    min-height: 32px;
    font-size: 10px;
  }
  .room-dock {
    right: max(8px, env(safe-area-inset-right));
    border-radius: 15px;
    gap: 4px;
    width: 68px;
    padding: 5px;
    top: 50%;
  }
  .room-dock button {
    white-space: normal;
    gap: 4px;
    width: 56px;
    min-width: 56px;
    height: 49px;
    padding: 5px 2px;
    font-size: 10px;
    line-height: 1.2;
  }
  .room-dock button > svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }
  .room-dock b {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    top: 0;
    right: 1px;
  }
  .room-dock button.active:after {
    left: 0;
  }
  .hud-camera,
  .hud-sound {
    border-radius: 12px;
    gap: 4px;
    padding: 4px;
  }
  .hud-camera {
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .hud-sound {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .hud-camera button,
  .hud-sound button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .hud-camera button > svg,
  .hud-sound button > svg {
    width: 20px;
    height: 20px;
  }
  .hud-logout {
    display: none;
  }
  .quick-chat {
    left: max(12px, env(safe-area-inset-left));
    right: 123px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    gap: 4px;
    width: auto;
    max-width: none;
    height: 54px;
    padding: 4px;
    transform: none;
  }
  .quick-chat > svg {
    display: none;
  }
  .quick-chat input,
  .quick-chat input::placeholder {
    font-size: 16px;
  }
  .quick-chat input {
    min-width: 0;
    padding: 9px 7px;
  }
  .quick-chat input::placeholder {
    font-size: 13px;
  }
  .quick-chat button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .chat-char-count {
    background: #131c16ee;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 10px;
    display: none;
    position: absolute;
    bottom: calc(100% + 5px);
    right: 3px;
  }
  .quick-chat:focus-within .chat-char-count {
    display: block;
  }
  .room-drawer {
    left: max(10px, env(safe-area-inset-left));
    top: 108px;
    right: 84px;
    bottom: calc(151px + env(safe-area-inset-bottom));
    border-radius: 14px;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 15px;
  }
  .drawer-head h2 {
    font-size: 20px;
  }
  .drawer-head .eyebrow {
    letter-spacing: 0.8px;
    font-size: 9px;
  }
  .drawer-head .icon-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .drawer-description {
    margin: 9px 0 14px;
    font-size: 12px;
    line-height: 1.65;
  }
  .drawer-chat-feed .chat-message p {
    font-size: 16px;
  }
  .drawer-chat-feed .chat-message strong {
    font-size: 14px;
  }
  .drawer-chat-feed .chat-message time {
    font-size: 9px;
  }
  .drawer-chat-feed {
    padding-right: 7px;
  }
  .room-drawer .primary {
    white-space: normal;
    min-height: 48px;
    font-size: 12px;
  }
  .room-drawer .queue-thumb {
    width: 48px;
    height: 36px;
  }
  .room-drawer .queue-info h3 {
    font-size: 12px;
    line-height: 1.5;
  }
  .room-drawer .queue-info p {
    font-size: 10px;
  }
  .room-drawer .queue-item {
    flex-wrap: wrap;
    gap: 6px;
  }
  .room-drawer .queue-info {
    flex: 1;
    min-width: 70px;
  }
  .room-drawer .queue-rank {
    font-size: 10px;
  }
  .room-drawer .vote-button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 12px;
  }
  .room-drawer .empty-queue p {
    font-size: 12px;
  }
  .room-drawer .empty-queue h3 {
    font-size: 15px;
  }
  .drawer-queue {
    overscroll-behavior: contain;
    min-height: 0;
  }
  .immersive-app .modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(
      var(--cine-height, 100dvh) - 24px - env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
    );
    overscroll-behavior: contain;
    padding: 20px 17px;
    scroll-padding: 15px;
    overflow: auto;
  }
  .modal-head {
    gap: 10px;
    margin-bottom: 20px;
  }
  .modal-head h2 {
    font-size: 22px;
    line-height: 1.35;
  }
  .modal-head p {
    font-size: 13px;
    line-height: 1.7;
  }
  .modal-head .eyebrow {
    font-size: 9px;
  }
  .modal .icon-button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .modal input:not([type="checkbox"]):not([type="range"]),
  .modal textarea,
  .modal select,
  .auth-card input {
    min-height: 46px;
    font-size: 16px;
  }
  .modal input::placeholder,
  .auth-card input::placeholder,
  .modal label {
    font-size: 14px;
  }
  .modal .primary,
  .modal .secondary,
  .modal .segmented button {
    min-height: 48px;
    font-size: 14px;
  }
  .modal .hint,
  .help-steps > p {
    font-size: 13px;
  }
  .help-steps strong {
    font-size: 14px;
  }
  .modal .swatches {
    flex-wrap: wrap;
    gap: 10px;
  }
  .modal .swatches button {
    width: 44px;
    height: 44px;
  }
  .modal .support-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .support-tier.tier-light {
    grid-column: 1/-1;
  }
  .modal .character-preview {
    height: 150px;
  }
  .modal .seatmap {
    gap: 8px;
    padding: 4px 0 12px;
    overflow-x: auto;
  }
  .modal .seatmap-row {
    justify-content: flex-start;
    gap: 6px;
    min-width: 540px;
  }
  .modal .seat-group {
    gap: 3px;
    padding: 3px;
  }
  .modal .seat-choice {
    width: 40px;
    min-width: 40px;
    height: 44px;
    font-size: 11px;
  }
  .modal .row-label {
    min-width: 14px;
    font-size: 11px;
  }
  .modal .seatmap-screen {
    font-size: 10px;
  }
  .modal .seat-legend {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
  }
  .modal .seatmap-footer {
    font-size: 11px;
  }
  .modal .seatmap-footer > span:last-child {
    max-width: 160px;
  }
  .auth-overlay {
    height: var(--cine-height, 100dvh);
    padding: 12px;
    bottom: auto;
  }
  .immersive-auth {
    width: 365px;
    max-height: calc(var(--cine-height, 100dvh) - 24px);
    padding: 24px;
    scroll-padding: 16px;
  }
  .immersive-auth .auth-card h2 {
    font-size: 28px;
  }
  .immersive-auth .auth-card > p {
    font-size: 13px;
  }
  .immersive-auth .auth-card label {
    font-size: 14px;
  }
  .auth-tabs button {
    min-height: 44px;
    font-size: 14px;
  }
  .auth-card .primary {
    min-height: 48px;
    font-size: 15px;
  }
  .auth-card .small-icon {
    min-width: 44px;
    min-height: 44px;
  }
  .auth-note {
    font-size: 12px;
  }
  .immersive-app > .toast {
    bottom: calc(151px + env(safe-area-inset-bottom));
    max-width: calc(100% - 94px);
    padding: 12px 15px;
    font-size: 13px;
  }
  .keyboard-open .room-dock,
  .keyboard-open .hud-camera,
  .keyboard-open .hud-now-playing,
  .keyboard-open .hud-sound,
  .keyboard-open .hud-room-state {
    display: none;
  }
  .keyboard-open .quick-chat {
    right: max(12px, env(safe-area-inset-right));
  }
  .keyboard-open .room-drawer {
    top: 80px;
    bottom: 82px;
    right: 10px;
  }
}
@media (width<=380px) {
  .hud-brand > div {
    font-size: 16px;
  }
  .hud-brand .brand-symbol {
    width: 31px;
    height: 31px;
  }
  .hud-brand {
    gap: 5px;
    padding: 6px;
  }
  .hud-top-actions {
    gap: 4px;
  }
  .hud-wallet {
    max-width: 73px;
    padding: 7px 5px;
    font-size: 10px;
  }
  .hud-wallet svg {
    display: none;
  }
  .room-hud-top {
    left: 10px;
    right: 10px;
  }
}
@media (height<=500px) and (width<=1000px) and (orientation: landscape) {
  .room-hud-top {
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }
  .hud-room-state {
    font-size: 10px;
    position: static;
    top: auto;
    transform: none;
  }
  .hud-brand > div {
    font-size: 18px;
  }
  .hud-now-playing {
    max-width: 210px;
    top: 78px;
  }
  .hud-now-playing h1 {
    font-size: 12px;
  }
  .hud-now-playing .eyebrow,
  .hud-now-playing > p,
  .hud-party {
    display: none;
  }
  .change-track-button {
    min-height: 44px;
    font-size: 10px;
  }
  .room-dock {
    width: 130px;
    right: max(10px, env(safe-area-inset-right));
    grid-template-columns: repeat(2, 56px);
    gap: 4px;
    padding: 6px;
    display: grid;
    top: 54%;
  }
  .room-dock button {
    height: 46px;
    font-size: 9px;
  }
  .room-drawer {
    padding: 12px;
    top: 76px;
    bottom: 78px;
    right: 152px;
  }
  .drawer-description {
    margin: 5px 0 8px;
    font-size: 11px;
  }
  .drawer-head h2 {
    margin-top: 3px;
    font-size: 18px;
  }
  .hud-camera {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .quick-chat {
    left: 222px;
    right: 123px;
  }
  .immersive-auth {
    max-width: 420px;
    padding: 20px;
  }
  .immersive-auth .auth-card h2 {
    font-size: 22px;
  }
  .modal .character-preview {
    height: 130px;
  }
  .immersive-app > .toast {
    bottom: 80px;
  }
}
@media (width<=720px), (height<=500px) and (width<=1000px) {
  .hud-top-actions > .hud-toggle {
    order: 1;
    display: flex;
  }
}
.quick-chat .emoji-trigger {
  color: #bdcca9;
  background: 0 0;
  flex-shrink: 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
}
.quick-chat .emoji-trigger:hover,
.quick-chat .emoji-trigger.active {
  color: var(--accent);
  background: #d8ef8215;
}
.emoji-popover {
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(var(--cine-height, 100dvh) - 100px);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  text-align: left;
  background: #152019f5;
  border: 1px solid #cfdfb940;
  border-radius: 17px;
  flex-direction: column;
  padding: 15px;
  display: flex;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  overflow: hidden;
  box-shadow: 0 14px 60px #0009;
}
.emoji-popover header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}
.emoji-popover strong {
  color: #edf3e5;
  font-size: 15px;
  font-weight: 600;
}
.emoji-popover header span {
  color: #a7b89c;
  margin-top: 5px;
  font-size: 11px;
  display: block;
}
.quick-chat .emoji-popover header button {
  color: #c7d4bb;
  background: #ffffff07;
  flex-shrink: 0;
  width: 44px;
  min-width: 44px;
  height: 44px;
}
.emoji-categories {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0;
  display: grid;
}
.quick-chat .emoji-categories button {
  white-space: normal;
  color: #aebda1;
  background: 0 0;
  border-radius: 8px;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 7px 3px;
  font-size: 11px;
  line-height: 1.4;
}
.quick-chat .emoji-categories button[aria-pressed="true"] {
  color: var(--accent);
  background: #d8ef8215;
}
.emoji-grid {
  min-height: 0;
  max-height: min(220px, calc(var(--cine-height, 100dvh) - 245px));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #67765d transparent;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  padding: 2px;
  display: grid;
  overflow-y: auto;
}
.quick-chat .emoji-grid button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  color: inherit;
  background: 0 0;
  border-radius: 9px;
  padding: 0;
  font-family:
    Apple Color Emoji,
    Segoe UI Emoji,
    Noto Color Emoji,
    sans-serif;
  font-size: 26px;
  line-height: 1;
}
.quick-chat .emoji-grid button:hover {
  background: #d8ef8218;
}
.emoji-popover button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (width<=380px) {
  .emoji-popover {
    width: 326px;
    padding: 12px;
  }
  .emoji-grid {
    gap: 4px;
  }
  .quick-chat input::placeholder {
    font-size: 12px;
  }
}
@media (height<=500px) and (orientation: landscape) {
  .emoji-popover {
    max-height: calc(var(--cine-height, 100dvh) - 85px);
  }
  .emoji-grid {
    max-height: 125px;
  }
  .emoji-popover header span {
    display: none;
  }
}
@media (width<=340px) {
  .emoji-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.speech-bubble.emoji-only,
.drawer-chat-feed .chat-message p.chat-history-bubble.emoji-only {
  font-size: var(--emoji-size, 48px);
  letter-spacing: 1px;
  text-align: center;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-family:
    Apple Color Emoji,
    Segoe UI Emoji,
    Noto Color Emoji,
    sans-serif;
  line-height: 1.25;
}
.announcement-banner {
  left: 50%;
  top: max(12px, env(safe-area-inset-top));
  z-index: 9000;
  text-align: center;
  letter-spacing: 0.02em;
  pointer-events: none;
  overflow-wrap: anywhere;
  border-radius: 14px;
  width: min(92vw, 880px);
  padding: 14px 18px;
  font-size: clamp(16px, 3.4vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  animation: 0.35s ease-out both announce-in;
  position: fixed;
  transform: translate(-50%);
}
.announcement-banner.is-info {
  color: #fff;
  background: #121622eb;
  border: 1px solid #ffffff40;
  box-shadow: 0 10px 30px #00000073;
}
.announcement-banner.is-hack {
  color: #ff2b2b;
  text-transform: uppercase;
  text-shadow:
    0 0 8px red,
    0 0 18px #f009;
  background: #120000;
  border: 2px solid #ff2b2b;
  font-family:
    Courier New,
    Consolas,
    monospace;
  animation:
    0.35s ease-out both announce-in,
    1s steps(2, end) infinite announce-flash;
  box-shadow:
    0 0 0 9999px #50000059,
    0 0 40px #ff00008c;
}
.announcement-banner.is-hack .announcement-text {
  animation: 0.25s linear infinite announce-shake;
  display: inline-block;
  position: relative;
}
.announcement-banner.is-hack .announcement-text:before,
.announcement-banner.is-hack .announcement-text:after {
  content: attr(data-text);
  opacity: 0.7;
  position: absolute;
  inset: 0;
}
.announcement-banner.is-hack .announcement-text:before {
  color: #00fff2;
  clip-path: inset(0 0 55%);
  transform: translate(-2px);
}
.announcement-banner.is-hack .announcement-text:after {
  color: #ffe600;
  clip-path: inset(55% 0 0);
  transform: translate(2px);
}
@keyframes announce-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -20px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%) scale(1);
  }
}
@keyframes announce-flash {
  50% {
    color: #fff;
    border-color: #fff;
  }
}
@keyframes announce-shake {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
  to {
    transform: translate(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-banner,
  .announcement-banner.is-hack,
  .announcement-banner.is-hack .announcement-text {
    animation: none;
  }
}
.reconnect-banner {
  left: 50%;
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
  z-index: 8990;
  color: #e4f5b3;
  text-align: center;
  pointer-events: none;
  background: #172313f2;
  border: 1px solid #d8ef8255;
  border-radius: 12px;
  max-width: min(92vw, 420px);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  position: fixed;
  transform: translate(-50%);
  box-shadow: 0 8px 24px #0007;
}

/* =============================================================
   Interactive Features: Reactions, Danmaku, Peer Interactions
   ============================================================= */

/* 1. Tomato Screen Canvas */
.screen-tomato-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
}

/* 2. Danmaku / Bullet Comments (Subtle & Non-intrusive) */
.screen-danmaku-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 38%;
  pointer-events: none;
  overflow: hidden;
  z-index: 20;
}
.danmaku-bullet {
  position: absolute;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000, 0 2px 5px rgba(0,0,0,0.9);
  left: 100%;
  will-change: transform;
  animation: danmakuFly linear forwards;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.danmaku-sender {
  font-weight: 800;
  opacity: 0.95;
}
.danmaku-sep {
  opacity: 0.6;
}
.danmaku-text {
  color: #fff;
}
@keyframes danmakuFly {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100vw - 1280px));
  }
}

/* 3. Theater FX Canvas (Fireworks, Hearts, Popcorn) */
.theater-fx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 35;
}

/* 4. Interactive Emote Popover inside Dock */
.interactive-popover {
  width: 290px !important;
  max-width: 90vw !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px !important;
  background: rgba(18, 22, 19, 0.96) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.1) !important;
  backdrop-filter: blur(24px) !important;
  bottom: calc(100% + 14px) !important;
  top: auto !important;
  right: 0 !important;
  transform: none !important;
  animation: popoverFadeIn 0.18s ease-out !important;
}
@keyframes popoverFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.popover-section-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: #fbbf24 !important;
  margin-bottom: 6px !important;
  display: block !important;
  opacity: 0.85;
}

.popover-reactions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.popover-reactions-grid button.reaction-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  height: 52px !important;
  min-width: unset !important;
  padding: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #e5e7eb !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}
.popover-reactions-grid button.reaction-btn i {
  font-size: 18px !important;
  line-height: 1 !important;
}
.popover-reactions-grid button.reaction-btn:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-2px) !important;
}

.popover-emotes-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
.popover-emotes-grid button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 36px !important;
  min-width: unset !important;
  padding: 0 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  color: #e5e7eb !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-align: left !important;
  transition: all 0.15s ease !important;
}
.popover-emotes-grid button i {
  font-size: 15px !important;
}
.popover-emotes-grid button:hover {
  background: rgba(216, 239, 130, 0.14) !important;
  border-color: rgba(216, 239, 130, 0.35) !important;
  color: #d8ef82 !important;
}

.popover-section-danmaku {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 8px !important;
}
.danmaku-switch-btn {
  width: 100% !important;
  height: 34px !important;
  min-width: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #9ca3af !important;
  transition: all 0.15s ease !important;
}
.danmaku-switch-btn.active {
  background: rgba(216, 239, 130, 0.12) !important;
  border-color: rgba(216, 239, 130, 0.4) !important;
  color: #d8ef82 !important;
}

/* 5. Peer Interact Modal */
.interact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 9950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.2s ease-out;
}
.interact-modal-card {
  width: 100%;
  max-width: 330px;
  background: #141715;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 24px rgba(245, 158, 11, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cardSlideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.interact-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 10px;
}
.interact-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.interact-avatar-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.interact-user-info h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #f3f4f6;
}
.interact-seat-badge {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
}
.interact-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.interact-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  color: #e5e7eb;
  transition: all 0.15s ease;
}
.interact-action-row:hover {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateX(3px);
}
.interact-action-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.interact-action-text {
  display: flex;
  flex-direction: column;
}
.interact-action-text strong {
  font-size: 13px;
  color: #ffffff;
}
.interact-action-text small {
  font-size: 11px;
  color: #9ca3af;
}

/* 6. Peer Interact Toast */
.peer-interact-toast {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(20, 24, 21, 0.96), rgba(28, 24, 16, 0.96));
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  color: #fef3c7;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9960;
  pointer-events: none;
  animation: toastPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(12px);
}
@keyframes toastPop {
  0% { transform: translate(-50%, -15px) scale(0.92); opacity: 0; }
  100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cardSlideUp {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* 7. Interactive & Emote 3D Badges */
.speech-bubble.interactive-badge {
  background: linear-gradient(135deg, rgba(20, 26, 21, 0.95), rgba(35, 29, 16, 0.95)) !important;
  border: 1.5px solid rgba(245, 158, 11, 0.7) !important;
  color: #fef08a !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 14px rgba(245, 158, 11, 0.35) !important;
  min-height: unset !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  backdrop-filter: blur(8px) !important;
  animation: badgePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
@keyframes badgePop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}