/* Turnix design tokens */
:root {
  /* Surfaces (cool dark) */
  --bg-0: #07080c;
  --bg-1: #0d0f15;
  --bg-2: #131620;
  --bg-3: #1a1e2b;
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);

  /* Text */
  --fg-0: #f5f6f8;
  --fg-1: #c9ccd6;
  --fg-2: #8a8e9b;
  --fg-3: #5b5f6c;

  /* Game accents */
  --p-impostor: #b48bff;        /* purple */
  --p-impostor-2: #8b5cff;
  --p-letter:   #4ea1ff;        /* blue */
  --p-letter-2: #2c7be0;
  --p-wrong:    #ff8b4a;        /* orange */
  --p-wrong-2:  #e06b22;

  /* Functional */
  --ok: #3ddc8a;
  --warn: #ffb547;
  --bad: #ff5470;

  /* Radii */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 22px;

  /* Shadow / glow */
  --glow-strength: 1; /* tweakable */
  --glow-impostor: 0 0 calc(28px * var(--glow-strength)) rgba(180, 139, 255, 0.45);
  --glow-letter:   0 0 calc(28px * var(--glow-strength)) rgba(78, 161, 255, 0.45);
  --glow-wrong:    0 0 calc(28px * var(--glow-strength)) rgba(255, 139, 74, 0.45);

  /* Density */
  --pad-card: 20px;
  --pad-screen: 24px;
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-fast: 140ms cubic-bezier(.2,.7,.3,1);
  --t-med:  240ms cubic-bezier(.2,.7,.3,1);
}

/* density variants applied via [data-density] on root */
[data-density="compact"] {
  --pad-card: 14px;
  --pad-screen: 18px;
  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 14px;
  --gap-4: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
button { font-family: inherit; }
input, textarea { font-family: inherit; }

/* Background canvas */
.tx-bg {
  position: fixed; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tx-bg::before {
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(139,92,255,0.18), transparent 60%),
    radial-gradient(50% 40% at 85% 25%, rgba(78,161,255,0.16), transparent 60%),
    radial-gradient(55% 50% at 50% 90%, rgba(255,139,74,0.12), transparent 60%);
  filter: blur(40px);
  animation: tx-float 24s ease-in-out infinite alternate;
}
.tx-bg.static::before { animation: none; }
.tx-bg.flat::before { display: none; }
@keyframes tx-float {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}

/* Particle layer */
.tx-particles { position: absolute; inset: 0; }
.tx-particles span {
  position: absolute;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 6px rgba(255,255,255,0.25);
  animation: tx-drift linear infinite;
  opacity: 0.6;
}
@keyframes tx-drift {
  from { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  to   { transform: translateY(-120vh); opacity: 0; }
}

/* Grid noise overlay */
.tx-bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
  opacity: .6;
}

/* Common UI primitives */
.tx-screen {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: var(--pad-screen);
  gap: var(--gap-3);
}

.tx-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--pad-card);
  position: relative;
}

.tx-btn {
  appearance: none; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 600;
  font-size: 15px;
  height: 48px; padding: 0 20px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-med), border-color var(--t-fast);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tx-btn:active { transform: translateY(1px) scale(.99); }
.tx-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.tx-btn.primary {
  background: var(--fg-0);
  color: #0a0b10;
}
.tx-btn.primary:hover { box-shadow: 0 8px 30px rgba(255,255,255,0.18); }

.tx-btn.ghost {
  background: rgba(255,255,255,0.04);
  color: var(--fg-0);
  border: 1px solid var(--line-2);
}
.tx-btn.ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--line-3); }

.tx-btn.danger {
  background: rgba(255, 84, 112, 0.12);
  color: #ff8aa1;
  border: 1px solid rgba(255,84,112,0.25);
}

.tx-btn.accent[data-game="impostor"] {
  background: var(--p-impostor);
  color: #110820;
  box-shadow: var(--glow-impostor);
}
.tx-btn.accent[data-game="letter"] {
  background: var(--p-letter);
  color: #04101e;
  box-shadow: var(--glow-letter);
}
.tx-btn.accent[data-game="wrong"] {
  background: var(--p-wrong);
  color: #1a0a02;
  box-shadow: var(--glow-wrong);
}

.tx-btn.lg { height: 56px; font-size: 16px; padding: 0 28px; border-radius: 14px; }
.tx-btn.sm { height: 36px; font-size: 13px; padding: 0 12px; border-radius: 9px; }

/* Inputs */
.tx-input {
  appearance: none; border: 0; outline: 0;
  font-family: inherit; font-size: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  color: var(--fg-0);
  height: 52px;
  padding: 0 18px;
  border-radius: 12px;
  width: 100%;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tx-input:focus { border-color: var(--line-3); background: rgba(255,255,255,0.06); }
.tx-input::placeholder { color: var(--fg-3); }

/* Pills, chips, etc. */
.tx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--fg-1);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.01em;
}
.tx-chip.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }

.tx-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2); }
.tx-dot.ok { background: var(--ok); box-shadow: 0 0 8px rgba(61,220,138,.55); }
.tx-dot.warn { background: var(--warn); }
.tx-dot.bad { background: var(--bad); }

/* Top bar */
.tx-topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 4px;
  position: relative;
  flex-shrink: 0;
}
.tx-topbar .left, .tx-topbar .right { display: flex; align-items: center; gap: 10px; }
.tx-topbar .center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; }

/* Logo */
.tx-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
  color: var(--fg-0);
}
.tx-logo-mark {
  width: 22px; height: 22px;
  border-radius: 7px;
  background:
    conic-gradient(from 210deg at 50% 50%, var(--p-impostor), var(--p-letter), var(--p-wrong), var(--p-impostor));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.45), 0 0 14px rgba(180,139,255,0.35);
  position: relative;
}
.tx-logo-mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 4px;
  background: var(--bg-0);
}

/* Avatar */
.tx-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  background: #2a2f3d;
  border: 1.5px solid transparent;
}
.tx-avatar.ready { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(61,220,138,.18), 0 0 14px rgba(61,220,138,.25); }
.tx-avatar.host::before {
  content: "★"; position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: var(--fg-0); color: #0a0b10;
  border-radius: 50%; font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.tx-avatar.speaking::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ok);
  animation: tx-pulse 1.2s ease-in-out infinite;
}
@keyframes tx-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.08); }
}

/* Discord widget */
.tx-discord {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px 0 8px;
  border-radius: 999px;
  background: rgba(88,101,242,0.12);
  border: 1px solid rgba(88,101,242,0.28);
  color: #c7cdf9;
  font-size: 12px; font-weight: 500;
}
.tx-discord .dc-mic {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ok);
  display: inline-flex; align-items: center; justify-content: center;
  color: #0a1a0e; font-size: 10px;
}
.tx-discord.muted .dc-mic { background: var(--fg-3); color: #fff; }
.tx-discord-mark {
  width: 18px; height: 18px; border-radius: 4px;
  background: #5865f2;
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 11px;
}

/* Section eyebrow */
.tx-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
}

/* Title scale */
.tx-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.tx-title.lg { font-size: 40px; }
.tx-title.xl { font-size: 56px; }
.tx-sub { color: var(--fg-2); font-size: 14px; line-height: 1.45; }

/* Animations */
@keyframes tx-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tx-rise { animation: tx-rise 280ms cubic-bezier(.2,.7,.3,1) both; }

@keyframes tx-pop {
  0% { opacity: 0; transform: scale(.92); }
  100% { opacity: 1; transform: scale(1); }
}
.tx-pop { animation: tx-pop 220ms cubic-bezier(.2,.9,.3,1.2) both; }

/* Focus ring */
:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Scrollbars off in cards */
.tx-noscroll::-webkit-scrollbar { display: none; }