/* Palette ported 1:1 from ChadWare2's own source/chadware2/menu/themes/editor.cpp -
   the same pixel-measured values the cheat's menu and loader both use, not a
   guess at "something dark and pinkish". The site's dark tones (panel/border)
   already happened to be close to this; --accent was the one that was
   nowhere near it before (a flat grey, no brand color at all). */
:root {
  --bg: #111112;
  --panel: #17171a;
  --panel-border: #2a2a2e;
  --text: #e6e6e8;
  --muted: #6b6b6e;
  --accent: #ca7384;
  --accent-hover: #d88b9a;
  --accent-active: #a85767;
  --error: #ff6b6b;
  --success: #7fd694;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  scrollbar-color: var(--accent) #111113;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #111113; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #d97a8a; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--panel-border);
  background: #111113;
}

.logo {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
}

.logo-word {
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text);
  font-size: 18px;
  text-transform: uppercase;
}

.logo-accent { color: var(--accent); }

.logo-underline {
  height: 2px;
  width: 34px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

.nav a, .nav button.linklike {
  color: var(--muted);
  text-decoration: none;
  margin-left: 20px;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav a:hover, .nav button.linklike:hover {
  color: var(--accent-hover);
}

.container {
  max-width: 480px;
  margin: 60px auto;
  padding: 0 20px;
}

.container.wide {
  max-width: 760px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 20px;
}

h1 {
  font-size: 22px;
  margin-top: 0;
  color: var(--text);
}

h2 {
  font-size: 16px;
  color: var(--muted);
  margin-top: 0;
}

label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  margin-top: 16px;
}

input[type="text"],
input[type="password"],
input[type="file"],
select {
  width: 100%;
  padding: 10px 12px;
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 14px;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(202, 115, 132, 0.18);
}

button, .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 18px;
  background: var(--accent);
  color: #111;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

button:hover, .btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 16px rgba(202, 115, 132, 0.35);
}

button:active, .btn:active {
  background: var(--accent-active);
  box-shadow: none;
}

button.secondary, .btn.secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--panel-border);
}

button.secondary:hover, .btn.secondary:hover {
  color: var(--text);
  border-color: var(--accent);
}

.muted { color: var(--muted); font-size: 13px; }

.flash {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.flash.success { background: rgba(127, 214, 148, 0.12); color: var(--success); border: 1px solid rgba(127,214,148,0.3); }
.flash.error { background: rgba(255, 107, 107, 0.12); color: var(--error); border: 1px solid rgba(255,107,107,0.3); }

.errors { margin: 0 0 16px 0; padding-left: 18px; color: var(--error); font-size: 13px; }

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #222;
  object-fit: cover;
  border: 1px solid var(--panel-border);
}

.avatar.small {
  width: 40px;
  height: 40px;
}

.uid-badge {
  display: inline-block;
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 12px;
  margin-left: 8px;
}

.field-row { margin-bottom: 10px; font-size: 14px; }
.field-row .k { color: var(--muted); display: inline-block; width: 110px; }

a.inline-link { color: var(--accent); text-decoration: none; }
a.inline-link:hover { color: var(--accent-hover); text-decoration: underline; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--panel-border); }
th { color: var(--muted); font-weight: 500; }
code.invite-code { font-family: monospace; color: var(--accent); word-break: break-all; }

.divider { border: none; border-top: 1px solid var(--panel-border); margin: 24px 0; }

/* ===== Tags ===== */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.4;
  margin-left: 6px;
  vertical-align: middle;
}
.tag-beta { background: rgba(168, 85, 247, 0.18); color: #f0abfc; border: 1px solid rgba(168, 85, 247, 0.35); }
.tag-admin { background: rgba(59, 130, 246, 0.18); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.35); }
.tag-dev { background: rgba(234, 179, 8, 0.18); color: #fde047; border: 1px solid rgba(234, 179, 8, 0.35); }
.tag-support { background: rgba(34, 197, 94, 0.18); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.35); }
.tag-member { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.35); }
.tag-pblocked { background: rgba(255, 107, 107, 0.18); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.35); }
.tag-ban-type { background: rgba(255, 107, 107, 0.12); color: #ff6b6b; border: 1px solid rgba(255,107,107,0.3); font-size: 10px; text-transform: uppercase; }

/* ===== Ban overlay ===== */
.avatar-wrapper { position: relative; display: inline-block; }
.avatar-wrapper.banned .avatar { filter: grayscale(0.6) brightness(0.7); }
.ban-overlay {
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; color: #111; letter-spacing: 2px;
  border: 2px solid #ff6b6b;
}

/* ===== Landing + bottom-left profile button ===== */
/* Radar-glow background (2026-09-20) - the exact radial-gradient + grid
   technique the in-game web radar view already uses (see radar-view.ejs's
   #radar-wrap), reused here at a much fainter intensity: same accent
   color as everywhere else on this site (--accent, not the radar's own
   hardcoded pink), so the landing page reads as the same product as the
   cheat itself instead of a generic dark SaaS page that happens to share
   a color. Grid lines are 1px steps of a repeating gradient rather than a
   tiled background-image, so there's no asset to ship or cache. */
.landing {
  /* Was 80vh - on any viewport taller than topbar-height + 80vh (most of
     them, since the topbar itself is only ~61px), that left a flat,
     un-styled gap of the plain --bg color below this section before the
     page actually ended - the visible seam/"black bar" reported live.
     100vh minus the topbar's own real height (16px padding + ~28px logo
     block + 16px padding + 1px border) fills the viewport exactly, no
     gap, no scrollbar from overshooting it either. */
  min-height: calc(100vh - 61px);
  display: flex; align-items: center; justify-content: center;
  position: relative; padding: 40px 20px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(202,115,132,0.10) 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(255,255,255,0.025) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(255,255,255,0.025) 40px);
}
/* Slow rotating sweep behind the wordmark - the exact conic-gradient +
   rotation technique the in-game web radar's own #sweep element uses,
   at low opacity and a slow 14s period so it reads as ambient motion,
   not a distraction. Real, cheap (one CSS animation, no JS, no asset)
   depth a static page can't have - this is what "eye-catching" mostly
   asked for, motion, not more content. */
.landing-sweep-clip {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 900px;
  margin-left: -450px; margin-top: -450px; border-radius: 50%; overflow: hidden;
  pointer-events: none;
}
.landing-sweep {
  position: absolute; left: 50%; top: 50%; width: 1280px; height: 1280px;
  margin-left: -640px; margin-top: -640px;
  background: conic-gradient(from 0deg, rgba(202,115,132,0.14), transparent 22%);
  animation: landing-spin 14s linear infinite;
  mix-blend-mode: screen;
}
@keyframes landing-spin { to { transform: rotate(360deg); } }

.landing-content { text-align: center; position: relative; z-index: 1; }
.landing-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); background: rgba(255,255,255,0.03);
  border: 1px solid var(--panel-border); border-radius: 9999px;
  padding: 7px 16px; margin-bottom: 22px;
}
.landing-eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #3ecf6e;
  box-shadow: 0 0 8px #3ecf6e; flex-shrink: 0;
}
.landing-h1 {
  font-size: 64px; font-weight: 800; letter-spacing: 6px; margin: 0 0 14px;
}
/* Breathing glow instead of a fixed one - subtle enough not to be
   distracting at rest, noticeable enough to read as "alive." Same period
   as the sweep above isn't required (different rhythms feel more organic
   than everything ticking in lockstep). */
.landing-glow { animation: landing-glow 4s ease-in-out infinite; }
@keyframes landing-glow {
  0%, 100% { text-shadow: 0 0 36px rgba(202,115,132,0.4), 0 0 70px rgba(202,115,132,0.16); }
  50%      { text-shadow: 0 0 52px rgba(202,115,132,0.7), 0 0 100px rgba(202,115,132,0.3); }
}
.landing-underline {
  height: 3px; width: 64px; margin: 0 auto 20px;
  border-radius: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.landing-subtitle { font-size: 19px; color: var(--muted); margin-bottom: 32px; letter-spacing: 0.3px; }
.landing-cta.btn { padding: 13px 28px; font-size: 15px; }
.landing-content .btn { box-shadow: 0 0 24px rgba(202,115,132,0.35); }
.landing-content .btn.secondary { box-shadow: none; }
.landing-content .btn:hover { box-shadow: 0 0 34px rgba(202,115,132,0.55); transform: translateY(-1px); }
.landing-content .btn { transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.profile-fab {
  position: fixed; bottom: 24px; left: 24px;
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--panel-border);
  border-radius: 14px; padding: 10px 14px;
  text-decoration: none; color: var(--text);
  z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.profile-fab:hover { border-color: var(--accent); }
.fab-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--panel-border); flex-shrink: 0; }
.fab-info { display: flex; flex-direction: column; min-width: 0; }
.fab-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-uid { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fab-tag { margin-left: 0; margin-top: 4px; align-self: flex-start; }

/* ===== DevTools ===== */
.dev-section { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--panel-border); }
.dev-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.checkbox-row { display: flex; gap: 20px; margin: 12px 0; }
.check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; margin-top: 0; }
.check-label input[type="checkbox"] { width: auto; }
.hidden { display: none !important; }
.p-user-card { display: flex; align-items: center; gap: 16px; padding: 16px; background: #0d0d0f; border: 1px solid var(--panel-border); border-radius: 8px; margin-bottom: 16px; }
button.danger, .btn.danger { background: #ff6b6b; color: #111; }
button.success, .btn.success { background: #7fd694; color: #111; }
button.small, .btn.small { padding: 6px 12px; font-size: 12px; margin-top: 0; }
input[type="number"] { width: 100%; padding: 10px 12px; background: #0d0d0f; border: 1px solid var(--panel-border); border-radius: 6px; color: var(--text); font-size: 14px; }

/* ===== Global chat ===== */
.chat-box {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 2px;
  margin-bottom: 16px;
}
.chat-message { display: flex; gap: 12px; align-items: flex-start; }
.chat-message .avatar.small { width: 40px; height: 40px; flex-shrink: 0; }
.cm-body { min-width: 0; flex: 1; }
.cm-name { font-weight: 600; font-size: 14px; }
.cm-time { font-size: 11px; color: var(--muted); margin-left: 8px; }
.cm-text { font-size: 14px; margin-top: 4px; word-break: break-word; }
.chat-form { display: flex; gap: 10px; }
.chat-form input { flex: 1; }
.chat-form button { margin-top: 0; white-space: nowrap; }
.profile-card .avatar { width: 110px; height: 110px; }

/* ===== Ticket status ===== */
.tag-open { background: rgba(127, 214, 148, 0.15); color: #7fd694; border: 1px solid rgba(127,214,148,0.35); }
.tag-closed { background: rgba(139, 139, 147, 0.15); color: #8b8b93; border: 1px solid rgba(139,139,147,0.35); }

/* ===== Roulette ===== */
.roulette-card { text-align: center; }
.roulette-card table { text-align: left; }
.roulette-status { margin: 20px 0; }
.spin-btn {
  font-size: 18px;
  padding: 14px 40px;
  border-radius: 10px;
  margin-top: 12px;
}
.prize-legendary td { color: #fde047; font-weight: 700; }

/* ===== CS:GO-style case animation =====
   Nine tiers, one per real prize (t0 = Nothing through t8 = 30-day sub) -
   each strictly rarer prize gets a visibly "hotter" color so the tier
   ladder reads at a glance without needing the odds table. t8 additionally
   gets an animated gradient border (case-legendary-border below), the same
   "this one's different" treatment CS:GO's own covert/gold tier uses. */
.case-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: #0d0d0f;
  margin-top: 20px;
  height: 134px;
  transition: box-shadow 0.4s ease;
}
.case-wrap.big-win { box-shadow: 0 0 46px rgba(253, 224, 71, 0.35), inset 0 0 40px rgba(253, 224, 71, 0.08); }
.case-pointer {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1px;
  background: var(--error);
  z-index: 2;
  box-shadow: 0 0 12px rgba(255,107,107,0.8);
}
.case-track {
  display: flex;
  align-items: center;
  height: 134px;
  will-change: transform;
}
.case-tile {
  flex: 0 0 110px;
  height: 110px;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  padding: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.case-tile.tier-t0 { color: var(--muted); }
.case-tile.tier-t1 { color: #a3e6b0; border-color: rgba(163,230,176,0.35); background: linear-gradient(180deg, rgba(163,230,176,0.08), var(--panel)); }
.case-tile.tier-t2 { color: #7fd694; border-color: rgba(127,214,148,0.45); background: linear-gradient(180deg, rgba(127,214,148,0.1), var(--panel)); }
.case-tile.tier-t3 { color: #93c5fd; border-color: rgba(59,130,246,0.45); background: linear-gradient(180deg, rgba(59,130,246,0.1), var(--panel)); }
.case-tile.tier-t4 { color: #c4b5fd; border-color: rgba(139,92,246,0.5); background: linear-gradient(180deg, rgba(139,92,246,0.12), var(--panel)); }
.case-tile.tier-t5 { color: #f0abfc; border-color: rgba(217,70,239,0.5); background: linear-gradient(180deg, rgba(217,70,239,0.12), var(--panel)); }
.case-tile.tier-t6 { color: #fdba74; border-color: rgba(251,146,60,0.55); background: linear-gradient(180deg, rgba(251,146,60,0.13), var(--panel)); }
.case-tile.tier-t7 { color: #fb923c; border-color: rgba(251,146,60,0.7); background: linear-gradient(180deg, rgba(251,146,60,0.18), var(--panel)); }
.case-tile.tier-t8 {
  color: #fde047;
  background: linear-gradient(180deg, rgba(253,224,71,0.22), var(--panel));
  border-color: transparent;
  position: relative;
}
.case-tile.tier-t8::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(120deg, #fde047, #fb923c, #fde047, #fb923c);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: legendary-shimmer 2.4s linear infinite;
}
@keyframes legendary-shimmer { to { background-position: 300% 0; } }
.case-tile.winner {
  transform: scale(1.12);
  box-shadow: 0 0 26px currentColor, 0 0 4px currentColor;
  animation: winner-pulse 0.9s ease-in-out infinite;
  z-index: 1;
}
@keyframes winner-pulse {
  0%, 100% { transform: scale(1.12); }
  50% { transform: scale(1.2); }
}

/* Result banner: replaces the generic flash box with one that carries the
   winning tier's own color, so a 30-day sub visually reads as a much
   bigger deal than "+1 2F4R-COINS$" instead of both looking identical. */
.roulette-result {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: result-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.roulette-result .rr-icon { font-size: 20px; line-height: 1; }
@keyframes result-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Confetti burst - plain absolutely-positioned divs, no canvas/library.
   Spawned into .confetti-layer (fixed, full-viewport, pointer-events: none)
   right over the case, one per piece, each with its own random fall
   trajectory set via inline custom properties on the element itself. */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  left: var(--x);
  background: var(--c);
  transform: rotate(var(--r0));
  animation: confetti-fall var(--dur) cubic-bezier(0.35, 0, 0.65, 1) forwards;
  animation-delay: var(--delay);
}
@keyframes confetti-fall {
  to { transform: translateY(var(--fall)) translateX(var(--drift)) rotate(var(--r1)); opacity: 0; }
}

.sound-toggle {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 15px;
  margin-left: 8px;
  vertical-align: middle;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.sound-toggle:hover { color: var(--text); border-color: var(--accent); }

/* ===== Chat moderation ===== */
.cm-body { position: relative; }
.cm-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  margin: 0 0 0 6px;
  padding: 0 4px;
  display: inline;
}
.cm-del:hover { color: var(--error); }

/* ===== Information board (Announcement / Changelogs) ===== */
.forum-info { margin-top: 28px; }

/* Community category page header */
.community-cat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}
.community-cat-head h1 { margin-bottom: 4px; }

/* ===== Media post form ===== */
.media-post-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--panel-border);
}
.media-post-head-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(202,115,132,0.1);
  border: 1px solid rgba(202,115,132,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.media-post-head-icon svg { width: 22px; height: 22px; }
.media-post-form { display: flex; flex-direction: column; gap: 20px; }
.media-post-field { display: flex; flex-direction: column; gap: 8px; }
.media-post-label { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.2px; }
.media-post-input {
  width: 100%;
  padding: 12px 14px;
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease;
  outline: none;
}
.media-post-input:focus { border-color: var(--accent); }
.media-post-input::placeholder { color: var(--muted); }
.media-post-preview {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0c;
}
.media-post-preview-label {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--panel-border);
}
.media-post-preview-inner { width: 100%; }
.media-preview-img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.media-preview-frame { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.media-preview-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  color: var(--muted);
  font-size: 13px;
}
.media-post-actions { display: flex; gap: 12px; align-items: center; margin-top: 4px; }
.media-post-submit {
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.15s ease;
}
.media-post-submit:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* Config cards grid */
.cfg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 4px;
}
.cfg-card {
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cfg-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.cfg-card-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.cfg-copy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(202,115,132,0.1);
  border: 1px solid rgba(202,115,132,0.35);
  color: var(--accent);
  border-radius: 5px;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s ease;
}
.cfg-copy-btn:hover { background: rgba(202,115,132,0.2); box-shadow: none; }
.cfg-body {
  background: #080809;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  max-height: 180px;
  overflow-y: hidden;
  line-height: 1.5;
}

/* Media grid */
/* ===== Media page hero ===== */
.media-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--panel-border);
}
.media-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--panel);
  z-index: 0;
}
/* accent line at bottom of hero */
.media-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  z-index: 1;
}
.media-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 28px 32px;
  flex-wrap: wrap;
}
.media-hero-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  background: rgba(202,115,132,0.12);
  border: 1px solid rgba(202,115,132,0.25);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.media-hero-icon svg { width: 26px; height: 26px; }
.media-hero-text { flex: 1; min-width: 0; }
.media-hero-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.5px; color: var(--text); }
.media-hero-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.media-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.3px;
  transition: background 0.15s ease, transform 0.15s ease;
  border: none;
  flex-shrink: 0;
}
.media-hero-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ===== Media empty state ===== */
.media-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
}
.media-empty-icon {
  width: 72px;
  height: 72px;
  color: rgba(202,115,132,0.35);
  margin-bottom: 20px;
}
.media-empty-icon svg { width: 72px; height: 72px; }
.media-empty-title { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: var(--text); }
.media-empty-sub { margin: 0 0 28px; font-size: 14px; color: var(--muted); max-width: 380px; line-height: 1.6; }
.media-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 28px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.15s ease, transform 0.15s ease;
  border: none;
}
.media-empty-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ===== Media card play overlay ===== */
.media-card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.32);
  transition: background 0.2s ease;
}
.media-card:hover .media-card-play-overlay { background: rgba(0,0,0,0.15); }
.media-card-play-btn {
  width: 48px;
  height: 48px;
  background: rgba(202,115,132,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
  padding-left: 3px;
}
.media-card:hover .media-card-play-btn { transform: scale(1.1); background: var(--accent); }

/* ===== Media pagination ===== */
.media-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 0 4px;
}

/* ===== Media grid ===== */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.media-card {
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.media-card:hover {
  border-color: rgba(202,115,132,0.5);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.media-card-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a0c;
  position: relative;
}
.media-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.media-card:hover .media-card-img { transform: scale(1.06); }
/* subtle gradient overlay on image so caption doesn't clash */
.media-card-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.media-card-embed-wrap { width: 100%; aspect-ratio: 16/9; }
.media-card-embed { width: 100%; height: 100%; display: block; border: none; }
.media-card-link-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  background: #0a0a0c;
  text-decoration: none;
}
.media-card-link-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.media-card-link-placeholder:hover { color: var(--accent); }
.media-card-foot { padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.media-card-caption { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.3; }
.media-card-caption:hover { color: var(--accent); }
.media-card-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.forum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--panel-border);
  text-decoration: none;
  color: inherit;
}
.forum-row:last-child { border-bottom: none; }
.forum-row:hover .forum-row-name { color: var(--accent-hover); }
.forum-row-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.forum-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #0d0d0f;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
}
.forum-icon svg { width: 20px; height: 20px; }
.forum-row-name { font-size: 15px; font-weight: 600; color: var(--text); transition: color 0.15s ease; }
.forum-row-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.forum-row-tag { font-size: 12px; color: var(--muted); }
.forum-row-sub { display: block; font-size: 12px; margin-top: 2px; }
.forum-row-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
/* Media category thumbnail in overview */
.media-overview-thumb {
  position: relative;
  width: 72px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--panel-border);
}
.media-overview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-overview-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
}
@media (max-width: 540px) { .media-overview-thumb { display: none; } }
.forum-count { text-align: center; min-width: 46px; }
.forum-count-num { font-size: 17px; font-weight: 700; color: var(--text); display: block; line-height: 1.2; }
.forum-count-label { font-size: 10px; color: var(--muted); letter-spacing: 0.5px; }
.forum-latest { display: flex; align-items: center; gap: 10px; }
.forum-latest-text { text-align: right; }
.forum-latest-title {
  font-size: 13px;
  color: var(--accent);
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-latest-meta { font-size: 11px; color: var(--muted); }
.forum-latest-avatar { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; border: 1px solid var(--panel-border); flex-shrink: 0; }

/* ===== Forum category / thread pages ===== */
.forum-thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--panel-border);
}
.forum-thread-row:last-child { border-bottom: none; }
.forum-thread-title { font-size: 14px; color: var(--accent); text-decoration: none; }
.forum-thread-title:hover { color: var(--accent-hover); text-decoration: underline; }
.forum-thread-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.forum-thread-stats { text-align: right; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.forum-post-body { white-space: pre-wrap; line-height: 1.6; margin: 16px 0; color: var(--text); }

/* ===== Shop ===== */
.balance-blocked { color: var(--error); font-weight: 700; }

.container.wide.shop-wide { max-width: 1040px; }

/* Header: one compact info bar */
.shop-header-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.shop-header-bar {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.shop-header-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-header-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.shop-header-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.shop-header-value.is-coin { color: var(--accent); }
.shop-header-value.is-active { color: var(--success); }
.shop-header-sep {
  width: 1px;
  height: 18px;
  background: var(--panel-border);
  flex-shrink: 0;
}

.shop-section { margin-bottom: 28px; }
.shop-section-head { margin-bottom: 14px; text-align: center; }
.shop-section-head h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  margin: 0 0 4px;
}
.shop-section-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* Coin package cards */
.shop-coins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  gap: 12px;
  justify-content: center;
}
.shop-coin-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 18px 16px 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-coin-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--panel-border);
  border-radius: 10px 0 0 10px;
}
.shop-coin-card:hover {
  border-color: rgba(202,115,132,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(202,115,132,0.2);
}
.shop-coin-card.card-accent {
  border-color: rgba(202,115,132,0.4);
}
.shop-coin-card.card-accent::before { background: var(--accent); }
.shop-coin-card.card-gold {
  border-color: rgba(253,224,71,0.25);
}
.shop-coin-card.card-gold::before {
  background: linear-gradient(180deg, #fde047, #fb923c);
}

.shop-coin-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1;
}
.shop-coin-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 3px 0 10px;
}
.shop-coin-usd {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}

.shop-pay-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.shop-pay-row form { margin: 0; display: contents; }
.shop-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: #0d0d0f;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  margin: 0;
  white-space: nowrap;
}
.shop-pay-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(202,115,132,0.08);
  box-shadow: none;
  transform: none;
}
.shop-pay-btn.pay-primary {
  color: var(--accent);
  border-color: rgba(202,115,132,0.35);
  background: rgba(202,115,132,0.07);
}
.shop-pay-btn.pay-primary:hover { background: rgba(202,115,132,0.14); }

/* Subscription cards */
.shop-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  gap: 12px;
  justify-content: center;
}
.shop-sub-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 18px 16px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.shop-sub-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--panel-border);
  border-radius: 10px 0 0 10px;
}
.shop-sub-card.card-accent {
  border-color: rgba(202,115,132,0.4);
}
.shop-sub-card.card-accent::before { background: var(--accent); }
.shop-sub-card:hover {
  border-color: rgba(202,115,132,0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(202,115,132,0.2);
}
.shop-sub-duration {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.shop-sub-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 14px;
  flex: 1;
}
.shop-sub-price span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}
.shop-sub-btn { width: 100%; margin: 0; }

@media (max-width: 900px) {
  .shop-coins-grid, .shop-sub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .shop-coins-grid, .shop-sub-grid { grid-template-columns: 1fr; }
}

/* ===== "Your Loadout" carousel (real equipped skins synced from the DLL) ===== */
.loadout-row { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 14px; scrollbar-width: thin; }
.loadout-row::-webkit-scrollbar { height: 6px; }
.loadout-row::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 9999px; }
.loadout-card {
  position: relative;
  flex: 0 0 230px;
  background: linear-gradient(160deg, var(--bg) 0%, #0a0a0b 100%);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.loadout-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 32px -12px rgba(202, 115, 132, 0.45);
}
.loadout-card-st:hover { box-shadow: 0 14px 32px -12px rgba(207, 106, 50, 0.5); }
.loadout-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.05), transparent 70%);
  margin-bottom: 10px;
  overflow: hidden;
}
.loadout-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
  transition: transform 0.35s ease;
}
.loadout-card:hover .loadout-img { transform: scale(1.08) rotate(-1deg); }
.loadout-img-wrap::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.loadout-card:hover .loadout-img-wrap::after { left: 130%; }
.loadout-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.loadout-weapon { font-weight: 700; margin-top: 2px; }
.loadout-skin { color: var(--accent-hover); font-size: 14px; margin-top: 2px; }
.loadout-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.loadout-condition {
  font-size: 11px; padding: 2px 8px; border-radius: 9999px;
  border: 1px solid var(--panel-border); color: var(--muted);
}
.loadout-stattrak {
  font-size: 11px; padding: 2px 8px; border-radius: 9999px;
  color: #CF6A32; border: 1px solid #CF6A32;
  text-shadow: 0 0 8px rgba(207, 106, 50, 0.5);
}
.loadout-wear { font-size: 11px; color: var(--muted); margin-top: 6px; }
.loadout-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Scripting API docs page (2026-09-26) */
.docs-page h2 { margin-top: 0; }
.docs-page h3 { margin-bottom: 6px; color: var(--accent-hover); }
.docs-page .card { margin-bottom: 20px; }
.docs-page code {
  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.92em;
  color: var(--accent-hover);
}
.docs-page pre {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
}
.docs-page pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-size: 0.9em;
}
.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}
.docs-toc a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 9999px;
  padding: 4px 12px;
}
.docs-toc a:hover { color: var(--accent-hover); border-color: var(--accent); }
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}
.docs-table th, .docs-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-border);
}
.docs-table th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; }
.docs-list { padding-left: 20px; line-height: 1.9; }


/* ---------- Home stat strip + quick-action tiles (2026-10-15) ---------- */
/* Fills the dead space above Global Chat with a thin stat row and 4 nav
   tiles - uses the same --panel/--panel-border/--accent tokens the rest
   of the site uses so it fits without a theme change. */

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.home-stat {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-stat-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.home-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-stat-status .home-stat-value { color: var(--success); }
.home-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  display: inline-block;
}

.home-quickrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.home-tile {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.home-tile:hover {
  border-color: var(--accent);
  background: rgba(202,115,132,0.06);
  transform: translateY(-1px);
}
.home-tile-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(202,115,132,0.1);
  border-radius: 8px;
  color: var(--accent);
}
.home-tile-icon svg { width: 20px; height: 20px; }
.home-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.home-tile-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.home-tile-sub {
  font-size: 12px;
  color: var(--muted);
}

/* Narrow viewport: stack to 2 columns, then 1. The chat and forum cards
   below already handle their own responsive layout - just mirror the
   same breakpoints here so the hero area reflows cleanly. */
@media (max-width: 900px) {
  .home-stats, .home-quickrow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .home-stats, .home-quickrow { grid-template-columns: 1fr; }
}


/* ---------- Home chat/account 2-col layout (2026-10-15) ---------- */

.home-chat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  margin-bottom: 20px;
}
.home-chat-card { margin-bottom: 0 !important; }

.home-account {
  margin-bottom: 0 !important;
  padding: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-account h1 {
  font-size: 18px;
  margin: 0 0 10px 0;
  letter-spacing: 0.4px;
}
.home-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,0.015);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.home-account-row-link:hover {
  background: rgba(202,115,132,0.07);
  border-color: var(--panel-border);
}
.home-account-row-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.home-account-row-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.home-account-value-coin::before {
  content: '$ ';
  color: var(--accent);
  font-weight: 700;
}
.home-account-value-ok { color: var(--success); }
.home-account-value-off { color: var(--muted); font-weight: 500; }

/* Stack to a single column on narrower screens so the account card
   drops below the chat instead of squashing it. Matches the breakpoint
   the top stat strip + quick tiles use. */
@media (max-width: 900px) {
  .home-chat-row { grid-template-columns: 1fr; }
}


/* ---------- Home layout breathing room (2026-10-15) ---------- */
/* The default .container.wide is 760px - great for form pages, way too
   narrow for the home dashboard. Give the home page its own width so the
   status strip, chat row and info card actually fill a modern desktop
   instead of sitting as a tiny column in the middle of the screen. */
.container.wide.home-wide { max-width: 1280px; }

/* Scale up the stat strip - the value text was 20px which read as
   secondary; bump it so the numbers are the hero of each tile. */
.home-stats { gap: 14px; margin-bottom: 18px; }
.home-stat { padding: 18px 22px; }
.home-stat-label { font-size: 12px; }
.home-stat-value { font-size: 26px; }

/* Chunkier action tiles - bigger icon, more padding, more vertical
   presence so they stop looking like afterthoughts. */
.home-quickrow { gap: 14px; margin-bottom: 28px; }
.home-tile { padding: 20px 22px; gap: 16px; }
.home-tile-icon { width: 48px; height: 48px; }
.home-tile-icon svg { width: 24px; height: 24px; }
.home-tile-title { font-size: 17px; }
.home-tile-sub { font-size: 13px; }

/* Account sidebar: a bit wider + roomier rows now that the container
   has room to breathe. */
.home-chat-row { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; }
.home-account { padding: 26px 24px; }
.home-account h1 { font-size: 20px; margin-bottom: 14px; }
.home-account-row { padding: 14px 14px; }
.home-account-row-value { font-size: 16px; }
.home-account-row-label { font-size: 11px; }

/* At the old 900px breakpoint we already stack to one column - just
   ensure the container width also comes back to the default .wide
   there so phone layouts aren't awkwardly wide. */
@media (max-width: 1024px) {
  .container.wide.home-wide { max-width: 760px; }
}


/* ---------- Roulette prize grid: CS:GO-case style (2026-10-15) ---------- */
/* Replaces the plain prize table. Each prize is now a tile with a
   top accent bar in its rarity color (same tier-tN palette the
   opening animation uses), a rarity label (Consumer / Mil-Spec /
   Covert / ...), the prize name, and a chance badge at the bottom.
   Looks like CS:GO's own in-case item cards. */

.prize-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 10px 0 18px;
  gap: 12px;
  flex-wrap: wrap;
}
.prize-grid-header h2 {
  margin: 0;
  text-align: left;
  color: var(--text);
  letter-spacing: 0.4px;
}
.prize-grid-sub {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  flex: 1 1 auto;
}

.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.prize-card {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.prize-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--panel-border);
}
.prize-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.1);
}
.prize-card-rarity {
  font-size: 10.5px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.prize-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.prize-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.prize-card-chance-label {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.prize-card-chance {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Same tier palette the case-tile.tier-tN classes use so the opening
   reel, the result banner, and this grid all speak one color language. */
.prize-card.tier-t0 { }
.prize-card.tier-t0::before { background: #4a4a4e; }
.prize-card.tier-t0 .prize-card-rarity { color: #8a8a8e; }

.prize-card.tier-t1::before { background: #a3e6b0; }
.prize-card.tier-t1 .prize-card-rarity,
.prize-card.tier-t1 .prize-card-name { color: #c9f0d2; }

.prize-card.tier-t2::before { background: #7fd694; }
.prize-card.tier-t2 .prize-card-rarity,
.prize-card.tier-t2 .prize-card-name { color: #a9e4b8; }

.prize-card.tier-t3::before { background: #93c5fd; }
.prize-card.tier-t3 .prize-card-rarity,
.prize-card.tier-t3 .prize-card-name { color: #bcd9fd; }

.prize-card.tier-t4::before { background: #c4b5fd; }
.prize-card.tier-t4 .prize-card-rarity,
.prize-card.tier-t4 .prize-card-name { color: #d9cefd; }

.prize-card.tier-t5::before { background: #f0abfc; }
.prize-card.tier-t5 .prize-card-rarity,
.prize-card.tier-t5 .prize-card-name { color: #f6c6fc; }

.prize-card.tier-t6::before { background: #fdba74; }
.prize-card.tier-t6 .prize-card-rarity,
.prize-card.tier-t6 .prize-card-name { color: #fdd0a2; }

.prize-card.tier-t7::before {
  background: linear-gradient(90deg, #fb923c, #fdba74, #fb923c);
}
.prize-card.tier-t7 .prize-card-rarity,
.prize-card.tier-t7 .prize-card-name { color: #fb923c; }
.prize-card.tier-t7:hover { box-shadow: 0 0 24px rgba(251,146,60,0.3); }

/* Knife/★ tier - full animated gold edge, same shimmer as the case-tile */
.prize-card.tier-t8 {
  border-color: transparent;
}
.prize-card.tier-t8::before {
  background: linear-gradient(90deg, #fde047, #fb923c, #fde047);
  background-size: 300% 100%;
  animation: legendary-shimmer 2.4s linear infinite;
  height: 4px;
}
.prize-card.tier-t8::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(120deg, #fde047, #fb923c, #fde047, #fb923c);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: legendary-shimmer 2.4s linear infinite;
  pointer-events: none;
}
.prize-card.tier-t8 .prize-card-rarity,
.prize-card.tier-t8 .prize-card-name,
.prize-card.tier-t8 .prize-card-chance { color: #fde047; }
.prize-card.tier-t8:hover { box-shadow: 0 0 30px rgba(253,224,71,0.35); }

/* Narrower screens: 2 cols, then 1. */
@media (max-width: 720px) {
  .prize-grid { grid-template-columns: repeat(2, 1fr); }
  .prize-grid-sub { display: none; }
}
@media (max-width: 460px) {
  .prize-grid { grid-template-columns: 1fr; }
}

/* Bigger container for the roulette card so the new grid gets room. */
.container.wide:has(.roulette-card) { max-width: 1080px; }


/* ---------- Sound toggle button (roulette) (2026-10-15) ---------- */
/* Replaces the blue Windows emoji glyph with inline SVG icons that
   inherit text color via currentColor, so the button matches the
   dark/pink site theme instead of looking like a Chrome tab favicon.
   Markup: a single <button class="sound-toggle" data-muted="0|1">
   with both SVGs inside; the data-muted attribute decides which one
   is visible. See views/partials/sound-toggle.ejs. */

.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 10px;
  padding: 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.sound-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(202,115,132,0.08);
}
.sound-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.sound-toggle .sound-icon-off { display: none; }
.sound-toggle[data-muted="1"] { color: var(--muted); }
.sound-toggle[data-muted="1"] .sound-icon-on { display: none; }
.sound-toggle[data-muted="1"] .sound-icon-off { display: block; }
.sound-toggle[data-muted="1"]:hover { color: var(--error); border-color: var(--error); background: rgba(255,107,107,0.08); }