/* CrashCrafts Chat: Element Web brand layer. Generated by gen_element.py; edit the tokens there. */
@font-face { font-family: "Rubik"; src: url("/_brand/rubik.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Chakra"; src: url("/_brand/chakra-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Chakra"; src: url("/_brand/chakra-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --cc-bg: #08060f;
  --cc-bg-2: #0e0b1a;
  --cc-surface: #120e22;
  --cc-surface-2: #191431;
  --cc-line: #2a2148;
  --cc-line-2: #3b2f66;
  --cc-text: #f1eefb;
  --cc-text-2: #b9b2d6;
  --cc-text-3: #8d85ad;
  --cc-accent: #a6f21b;
  --cc-accent-2: #c8ff5a;
  --cc-accent-ink: #0d1400;
  --cc-secondary: #8f4dff;
  --cc-danger: #ff5d73;
  --cc-cut: 12px;
  --cc-display: "Chakra", system-ui, sans-serif;
  --cpd-font-family-sans: "Rubik", system-ui, sans-serif;
  /* Compound design tokens Element reads for buttons, links and focus */
  --cpd-color-bg-action-primary-rest: var(--cc-accent);
  --cpd-color-bg-action-primary-hovered: var(--cc-accent-2);
  --cpd-color-bg-action-primary-pressed: var(--cc-accent-2);
  --cpd-color-text-on-solid-primary: var(--cc-accent-ink);
  --cpd-color-text-action-accent: var(--cc-accent);
  --cpd-color-text-link-external: var(--cc-accent-2);
  --cpd-color-icon-accent-tertiary: var(--cc-accent);
  --cpd-color-border-focused: var(--cc-accent);
  --cpd-color-bg-canvas-default: var(--cc-surface);
  --cpd-color-bg-subtle-secondary: var(--cc-bg-2);
  --cpd-color-border-interactive-secondary: var(--cc-line-2);
}
::selection { background: var(--cc-accent); color: var(--cc-accent-ink); }
html { scrollbar-color: var(--cc-line-2) var(--cc-bg); }

/* display type for headings, room names and dialogs */
.mx_AuthBody h1, .mx_AuthBody h2, .mx_RoomHeader_heading, .mx_RoomHeader_name, .mx_Dialog_title,
.mx_SpaceRoomView_landing_name, .mx_UserMenu_contextMenu_displayName, .mx_HomePage h1 {
  font-family: var(--cc-display) !important;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* sign-in / register: world art behind a glass card */
.mx_AuthPage { background: linear-gradient(180deg, rgba(0,0,0,.2), var(--cc-bg)), url("/_brand/crashcrafts-bg.webp") center / cover no-repeat, var(--cc-bg) !important; }
.mx_AuthPage_modal {
  background: color-mix(in srgb, var(--cc-bg) 82%, transparent) !important;
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 2px solid var(--cc-accent);
  box-shadow: 0 0 0 1px var(--cc-line-2), 0 30px 80px -30px rgba(0,0,0,.9) !important;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.mx_AuthHeaderLogo { max-width: 100%; overflow: hidden; }
.mx_AuthHeaderLogo img { max-width: 100%; max-height: 96px; width: auto; object-fit: contain; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--cc-secondary) 55%, transparent)); }
/* Element paints its own panels inside the modal; let the brand card show through */
.mx_AuthBody, .mx_AuthHeader, .mx_Welcome, .mx_AuthPage_modalContent, .mx_AuthPage_modalContent > div { background: transparent !important; }

/* welcome page (sanitized markup, so structural selectors) */
.mx_WelcomePage_body > div { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 8px 0 4px; color: var(--cc-text); }
.mx_WelcomePage_body img { max-width: 280px; max-height: 120px; width: auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--cc-secondary) 50%, transparent)); }
.mx_WelcomePage_body h1 { margin: 0; font: 700 1.9rem/1.1 var(--cc-display) !important; text-transform: uppercase; color: var(--cc-text); }
.mx_WelcomePage_body p { margin: 0; color: var(--cc-text-2); max-width: 34ch; }
.mx_WelcomePage_body div > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.mx_WelcomePage_body a[href="#/register"], .mx_WelcomePage_body a[href="#/login"] {
  display: inline-block; padding: 13px 22px; text-decoration: none !important;
  font: 700 .9rem/1 var(--cc-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--cc-text) !important; box-shadow: inset 0 0 0 1.5px var(--cc-accent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.mx_WelcomePage_body a[href="#/register"] { background: var(--cc-accent); color: var(--cc-accent-ink) !important; }
.mx_WelcomePage_body a:hover { filter: brightness(1.1); }

/* buttons */
.mx_AccessibleButton_kind_primary, .mx_Dialog_primary, button.mx_Dialog_primary, input.mx_Login_submit, .mx_Login_submit {
  background-color: var(--cc-accent) !important;
  color: var(--cc-accent-ink) !important;
  border-color: var(--cc-accent) !important;
  font-family: var(--cc-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

/* app chrome */
.mx_LeftPanel, .mx_SpacePanel { border-inline-end: 1px solid var(--cc-line); }
.mx_RoomTile.mx_RoomTile_selected, .mx_RoomListItemView_selected { box-shadow: inset 2px 0 0 var(--cc-accent); }
.mx_HomePage { background: radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--cc-secondary) 18%, transparent), transparent 60%); }