/* The original neon skin. Rules only apply while html[data-theme="neon"]. */
html[data-theme="neon"] {
  --bg: #07060f;
  --panel: rgba(17, 14, 38, 0.92);
  --panel-solid: #120f28;
  --line: rgba(0, 240, 255, 0.22);
  --cyan: #00f0ff;
  --pink: #ff2bd6;
  --yellow: #fcee0a;
  --text: #e4e6ff;
  --muted: #8d8bb8;
  --dim: #5f5d86;
  --danger: #ff4d6d;
  --up: #ff3860;
  --down: #00e676;
  --sage: rgba(0, 240, 255, 0.08);
  --navy: #00f0ff;
  --ink: #e4e6ff;
  --shadow: 0 0 24px rgba(0, 240, 255, 0.18);
  --font: "Yuanti SC", "YouYuan", "Hiragino Maru Gothic ProN", ui-rounded, "PingFang SC", "Microsoft YaHei", sans-serif;
}

html[data-theme="neon"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 10% -10%, rgba(255, 43, 214, 0.22), transparent 55%),
    radial-gradient(ellipse at 100% 0%, rgba(0, 240, 255, 0.16), transparent 50%),
    linear-gradient(rgba(0, 240, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}

html[data-theme="neon"] .site-header {
  background: rgba(7, 6, 15, 0.96);
  box-shadow: 0 1px 0 rgba(255, 43, 214, 0.35);
}

html[data-theme="neon"] .brand {
  color: var(--yellow);
  text-shadow: 2px 0 0 rgba(255, 43, 214, 0.8), -2px 0 0 rgba(0, 240, 255, 0.8);
}

html[data-theme="neon"] .nav a.active,
html[data-theme="neon"] .login-link,
html[data-theme="neon"] .lang-switch button.active,
html[data-theme="neon"] button.secondary,
html[data-theme="neon"] .tab.active {
  background: transparent;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.35);
}

html[data-theme="neon"] .quote-box,
html[data-theme="neon"] .feed,
html[data-theme="neon"] .article-card,
html[data-theme="neon"] .discussion,
html[data-theme="neon"] .game-panel,
html[data-theme="neon"] .leaderboard-panel,
html[data-theme="neon"] .card,
html[data-theme="neon"] dialog {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="neon"] .quote,
html[data-theme="neon"] .article-title,
html[data-theme="neon"] .chat-lobby h1 {
  color: #fff;
}

html[data-theme="neon"] .stock {
  background: rgba(252, 238, 10, 0.06);
  border: 1px solid rgba(252, 238, 10, 0.35);
}

html[data-theme="neon"] .stock-title,
html[data-theme="neon"] .game-stats strong,
html[data-theme="neon"] .leaderboard-head h2 {
  color: var(--yellow);
}

html[data-theme="neon"] .rant {
  background: rgba(17, 14, 38, 0.92);
  border: 1px solid rgba(255, 56, 96, 0.55);
  box-shadow: 0 0 18px rgba(255, 56, 96, 0.2);
}

html[data-theme="neon"] .rant-head h2 {
  color: var(--up);
}

html[data-theme="neon"] .ticker {
  background: #05040c;
  border-bottom-color: rgba(252, 238, 10, 0.25);
}

html[data-theme="neon"] .room-card,
html[data-theme="neon"] .room-card:hover:not(:disabled) {
  background: rgba(17, 14, 38, 0.92);
  color: var(--text);
  border: 1px solid var(--line);
}

html[data-theme="neon"] .bubble {
  background: rgba(0, 240, 255, 0.08);
  box-shadow: none;
}

html[data-theme="neon"] .msg.mine .bubble {
  background: linear-gradient(135deg, rgba(255, 43, 214, 0.28), rgba(138, 92, 255, 0.24));
  color: var(--text);
}

html[data-theme="neon"] .grid-2048 {
  background: #0a0918;
  border: 1px solid var(--pink);
}

html[data-theme="neon"] .grid-2048 .cell {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="neon"] .tile {
  background: rgba(0, 0, 0, 0.35);
  color: var(--cyan);
  border: 1px solid currentColor;
  box-shadow: 0 0 10px currentColor;
}

html[data-theme="neon"] .composer,
html[data-theme="neon"] input,
html[data-theme="neon"] textarea {
  background: rgba(5, 4, 14, 0.75);
  color: var(--text);
}