/* Ossuary skin for legacy MumbleChat pages.
 * Load AFTER the page's own <style> so these cosmetic rules win.
 * Cosmetic only: type, colour, borders, focus, motion. Never layout.
 * Panels opt in with class="oss-frame" (ember corner ticks, no rounding).
 */

/* ── Panels ───────────────────────────────────────────────────────── */
.oss-frame.oss-frame {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-0);
  box-shadow: none;
  background-image:
    linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember)),
    linear-gradient(var(--ember), var(--ember)), linear-gradient(var(--ember), var(--ember));
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
.oss-frame.oss-frame:hover { border-color: var(--line); }
/* the old blood gradient strip across the top of every panel */
.container::before, .login-container::before, .profile-header-card::before, .content-section::before { display: none; }

/* ── Headings ─────────────────────────────────────────────────────── */
h1, .logo h1, .logo, .page-title, .profile-display-name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .95;
  text-shadow: 0 0 22px rgba(200, 32, 31, .35);
}
h2, h3, .section-title, .features h3, .panel-block h3, .donate-info h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
h1 .glitch, .logo .glitch, .page-title.glitch, h1.glitch { color: var(--bone); }
h1.red, .logo .red { color: var(--ember); }

/* Tagline under a logo reads as a terminal prompt */
p.oss-tagline, .logo .oss-tagline {
  font: 400 19px/1.2 var(--font-crt);
  margin: var(--s2) 0 var(--s5);
  color: var(--rot);
  letter-spacing: .04em;
  text-transform: none;
  text-shadow: var(--glow-rot);
}
p.oss-tagline::after, .logo .oss-tagline::after { content: "█"; margin-left: 4px; animation: oss-blink 1s steps(1) infinite; }

/* ── Navigation ───────────────────────────────────────────────────── */
.header {
  background: rgba(6, 5, 5, .92);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(3px);
}
.header .logo, .header .logo a {
  font-size: 30px;
  color: var(--ember);
  text-decoration: none;
  text-shadow: none;
  animation: oss-flicker 7s infinite;
}
@media (max-width: 600px) {
  .header .logo, .header .logo a { font-size: 24px; white-space: nowrap; }
}
.nav-links a, .footer-link, .auth-link {
  font-family: var(--font-crt);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ash);
  text-decoration: none;
  border: 0;
  background: none;
}
.nav-links a::before { content: "./"; color: var(--ghost); }
.nav-links a:hover, .footer-link:hover, .auth-link:hover {
  color: var(--rot);
  text-shadow: var(--glow-rot);
  background: none;
}
.footer {
  font-family: var(--font-crt);
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--ghost);
  border-top: 1px dashed var(--line);
  background: transparent;
}

/* ── Forms ────────────────────────────────────────────────────────── */
.form-group label, form label {
  font: 400 18px/1 var(--font-crt);
  letter-spacing: .05em;
  text-transform: none;
  color: var(--ash);
}
.form-group label::before, form label:not(:has(input))::before { content: "> "; color: var(--rot); }

:is(.form-group, form) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]), textarea) {
  font-family: var(--font-mono);
  color: var(--rot);
  caret-color: var(--rot);
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  box-shadow: none;
}
:is(.form-group, form) :is(input, textarea)::placeholder { color: var(--ghost); text-transform: none; }
:is(.form-group, form) :is(input, textarea, select):focus {
  outline: none;
  border-color: var(--blood);
  box-shadow: var(--glow-blood);
  background: #000;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-small, .btn-danger, .btn-action, .btn-restart,
.donate-button, .btn-spawn-room, .explore-link, .auth-link.auth-register {
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  border-radius: var(--r-1);
  text-shadow: none;
  transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary, .btn[type=submit], .btn-action, .btn-restart, .donate-button, .btn-spawn-room, .auth-link.auth-register {
  background: var(--blood);
  color: var(--on-blood);
  border: 1px solid transparent;
}
:is(.btn-primary, .btn[type=submit], .btn-action, .btn-restart, .donate-button, .btn-spawn-room, .auth-link.auth-register):hover:not(:disabled) {
  background: var(--blood);
  color: var(--on-blood);
  box-shadow: var(--glow-blood);
  text-shadow: none;
  transform: none;
  animation: oss-jitter .22s steps(2) 2;
}
/* full-width submit buttons get the [ bracket ] treatment */
button[type=submit].btn::before, .btn-restart::before, .donate-button::before { content: "[ "; opacity: .6; }
button[type=submit].btn::after, .btn-restart::after, .donate-button::after { content: " ]"; opacity: .6; }
.btn:disabled, .btn-primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; animation: none; }

.btn-danger { background: transparent; color: var(--ember); border: 1px solid var(--line); }
.btn-danger:hover { background: transparent; color: var(--ember); border-color: var(--fault); box-shadow: 0 0 0 1px var(--fault); }
.explore-link, .btn-small:not(.btn-primary):not(.btn-danger) { background: transparent; color: var(--bone); border: 1px solid var(--line); }
.explore-link:hover, .btn-small:not(.btn-primary):not(.btn-danger):hover { color: var(--rot); border-color: var(--rot); text-shadow: var(--glow-rot); background: transparent; }

/* ── Tabs ─────────────────────────────────────────────────────────── */
.tabs { border-bottom: 1px solid var(--line); }
.tab {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
  border-radius: 0;
}
.tab:hover { color: var(--bone); background: transparent; }
.tab.active { color: var(--bone); text-shadow: none; background: transparent; }
.tab.active::after { background: var(--blood); box-shadow: 0 6px 12px -2px var(--blood); }

/* ── Messages / alerts ────────────────────────────────────────────── */
.error-message {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: none;
  color: var(--ember);
  background: rgba(255, 74, 61, .06);
  border: 1px dashed var(--fault);
  border-radius: 0;
}
.error-message::before { content: "ERR › "; color: var(--fault); font-weight: 600; }
.success-message {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: none;
  color: var(--rot);
  background: rgba(57, 255, 106, .05);
  border: 1px solid var(--rot);
  border-radius: 0;
  box-shadow: var(--glow-rot);
}
.success-message::before { content: "OK › "; font-weight: 600; }

.divider { font-family: var(--font-crt); font-size: 17px; letter-spacing: .06em; text-transform: lowercase; color: var(--ghost); }
.divider::before, .divider::after { background: var(--line); }

/* ── Status dots ──────────────────────────────────────────────────── */
.status-online { color: var(--rot); text-shadow: var(--glow-rot); }
.status-offline { color: var(--ghost); }

/* ── Avatars: square, hairline, no glow ───────────────────────────── */
.friend-avatar, .request-avatar, .profile-avatar {
  border-radius: var(--r-0);
  border: 1px solid var(--line);
  box-shadow: none;
  image-rendering: auto;
}
.friend-card:hover .friend-avatar { border-color: var(--blood); box-shadow: var(--glow-blood); }

/* links inside copy */
.content-card a:not([class]), .content-section a:not([class]), .links a, .login-link a, .guest-link a, .back-link {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
:is(.content-card, .content-section) a:not([class]):hover, .links a:hover, .login-link a:hover, .guest-link a:hover, .back-link:hover {
  color: var(--rot);
  text-shadow: var(--glow-rot);
}

@media (prefers-reduced-motion: reduce) {
  .header .logo, .header .logo a, .oss-tagline::after { animation: none !important; }
  .btn-primary:hover, .btn:hover, .donate-button:hover, .btn-restart:hover { animation: none !important; }
}