/* ============================================================
   Guhens.net — pitch black, glass, silver script, gold filigree
   ============================================================ */

:root {
  --bg: #040404;
  --bg-soft: #0b0b0c;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.22);
  --line-soft: rgba(255, 255, 255, 0.1);
  --text: #eaeaea;
  --text-dim: #9a9a9a;
  --silver: #c9c9c9;
  --gold: #d4af37;
  --gold-soft: rgba(212, 175, 55, 0.35);
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #f87171;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: radial-gradient(1200px 700px at 50% 20%, #131314 0%, #09090a 45%, var(--bg) 100%);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---------- gold filigree waves (alive, gently swaying) ---------- */
.waves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}
/* animate the whole svg layers, never the paths inside — the compositor
   moves a cached texture instead of repainting the filigree every frame */
.waves-r { will-change: transform, opacity; transform-origin: 92% 65%; animation: sway1 18s ease-in-out infinite alternate; }
.waves-l { will-change: transform, opacity; transform-origin: 6% 24%; animation: sway3 23s ease-in-out infinite alternate-reverse; }
@keyframes sway1 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.85; }
  50% { transform: translate(-9px, 7px) rotate(-1.1deg); opacity: 1; }
  100% { transform: translate(6px, -8px) rotate(0.9deg); opacity: 0.7; }
}
@keyframes sway2 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.55; }
  50% { transform: translate(8px, 10px) rotate(1.2deg); opacity: 0.9; }
  100% { transform: translate(-7px, -6px) rotate(-0.8deg); opacity: 0.5; }
}
@keyframes sway3 {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
  50% { transform: translate(6px, -5px) rotate(1.4deg); opacity: 0.45; }
  100% { transform: translate(-5px, 6px) rotate(-1deg); opacity: 0.18; }
}

.page { position: relative; z-index: 1; }

/* ---------- logo ---------- */
.logo {
  font-family: "Lobster", cursive;
  color: #f5f5f5;
  text-align: center;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1.1;
  letter-spacing: 1px;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.55),
    0 0 60px rgba(255, 255, 255, 0.22),
    0 3px 2px rgba(0, 0, 0, 0.9);
  position: relative;
  user-select: none;
}
.logo .star {
  font-size: 0.35em;
  position: relative;
  top: -1.2em;
  left: 0.05em;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}
.logo-sm {
  font-family: "Lobster", cursive;
  font-size: 30px;
  color: #f0f0f0;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

/* ---------- auth screens ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 70px;
}

.auth-card { width: min(430px, 92vw); margin-top: 26px; }

.script-label {
  font-family: "Great Vibes", cursive;
  color: var(--silver);
  font-size: 34px;
  text-align: center;
  display: block;
  margin: 18px 0 8px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
}

.glass-input {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0 16px;
  height: 56px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 24px rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.glass-input:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 30px rgba(255, 255, 255, 0.12);
}
/* the light streak on the top edge — alive, breathing glow */
.glass-input::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 14%;
  right: 34%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  border-radius: 2px;
  filter: blur(0.4px);
  animation: streakGlide 7s ease-in-out infinite alternate;
}
/* transform/opacity ONLY — an animated filter forced a repaint of every
   card top-streak on every frame, site-wide */
@keyframes streakGlide {
  0% { transform: translateX(-14%); opacity: 0.55; }
  50% { transform: translateX(6%); opacity: 1; }
  100% { transform: translateX(16%); opacity: 0.6; }
}
.glass-input svg { flex: 0 0 22px; opacity: 0.7; }
.glass-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  padding: 0 12px;
  font-family: inherit;
  letter-spacing: 0.4px;
}
.glass-input input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 60px #101010 inset;
}
.eye-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
}
.eye-btn:hover { opacity: 1; }

.glass-button {
  position: relative;
  width: 100%;
  margin-top: 30px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  color: var(--text);
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 24px rgba(255,255,255,0.05);
  transition: all 0.25s;
}
.glass-button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: streakGlide 8s ease-in-out infinite alternate-reverse;
}
.glass-button:hover {
  border-color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 34px rgba(212, 175, 55, 0.18);
  color: #fff;
}

.auth-note {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 26px;
  line-height: 1.7;
}
.auth-note a { color: var(--gold); text-decoration: none; }
.auth-note a:hover { text-shadow: 0 0 8px var(--gold-soft); }

.form-error {
  margin-top: 20px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: #fca5a5;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
}
.form-notice {
  margin-top: 20px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.07);
  color: #86efac;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
}
/* the password result pulses once so it can't be missed (transform/opacity
   only — obeys the perf law) */
.pw-flash { animation: pwPulse 1.1s ease 1; }
@keyframes pwPulse {
  0% { transform: scale(0.97); opacity: 0.4; }
  40% { transform: scale(1.015); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- dashboard ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 38px 10px;
}
.welcome {
  font-family: "Great Vibes", cursive;
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--silver);
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
  flex: 1;
  text-align: center;
}
.avatar-zone { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--gold-soft);
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lobster", cursive;
  font-size: 24px;
  color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.2);
}
.logout-btn {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.logout-btn:hover { color: var(--red); border-color: rgba(248, 113, 113, 0.4); }

/* ---------- avatar button + profile banner panel ---------- */
.avatar-btn {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2.5px solid var(--gold-soft);
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.25);
  transition: box-shadow 0.25s, border-color 0.25s;
}
.avatar-btn:hover { border-color: var(--gold); box-shadow: 0 0 26px rgba(212, 175, 55, 0.4); }
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.avatar-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lobster", cursive;
  font-size: 38px;
  color: var(--gold);
}
.avatar-fallback.big { font-size: 60px; }

.profile-panel {
  position: fixed;
  top: 130px;
  right: 26px;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: linear-gradient(180deg, #121213, #0a0a0b);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(212, 175, 55, 0.08);
  z-index: 50;
  opacity: 0;
  transform: translateY(-12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.profile-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.pp-banner {
  position: relative;
  height: 118px;
  border-radius: 20px 20px 0 0;
  background:
    radial-gradient(240px 90px at 80% 0%, rgba(212, 175, 55, 0.35), transparent 70%),
    linear-gradient(120deg, rgba(212, 175, 55, 0.22), rgba(20, 20, 22, 0.1) 60%),
    #101011;
  border-bottom: 1px solid var(--gold-soft);
}
.pp-avatar {
  position: absolute;
  left: 22px;
  bottom: -62px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 4px solid #0c0c0d;
  outline: 2.5px solid var(--gold-soft);
  overflow: hidden;
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.75);
}
.pp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.pp-body { padding: 74px 22px 18px; }
.pp-names { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-display { font-family: "Lobster", cursive; font-size: 27px; text-shadow: 0 0 14px rgba(255,255,255,0.2); }
.pp-role {
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.pp-role.owner { border-color: var(--gold-soft); color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,0.15); }
.pp-role.admin { border-color: rgba(74, 222, 128, 0.4); color: var(--green); }
.pp-discord { color: var(--text-dim); font-size: 13.5px; margin-top: 2px; }
.pp-title { color: var(--silver); font-size: 13.5px; margin-top: 8px; }

.pp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}
.pp-stat {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pp-stat .k { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.pp-stat .v { font-size: 15.5px; color: #fff; }
.pp-stat .v.gold { color: var(--gold); }

.pp-section { margin-top: 18px; }
.pp-section h4 {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.pp-schedule { display: flex; flex-direction: column; }
.pp-event {
  display: flex;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pp-event:last-child { border-bottom: none; }
.pp-ev-icon { font-size: 20px; line-height: 1.4; filter: drop-shadow(0 0 8px rgba(255,255,255,0.12)); }
.pp-ev-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-ev-title { font-size: 13.5px; color: var(--text); }
.pp-ev-sub { font-size: 11.5px; color: var(--text-dim); }
.pp-badge {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.pp-badge.gold { border: 1px solid var(--gold-soft); color: var(--gold); }
.pp-badge.warn { border: 1px solid rgba(251, 191, 36, 0.45); color: var(--amber); }
.pp-empty { color: var(--text-dim); font-size: 12.5px; line-height: 1.7; }

.pp-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.pp-cards-note { color: var(--text-dim); font-size: 11.5px; letter-spacing: 0.08em; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  gap: 26px;
  justify-content: center;
  align-content: center;
  padding: 7vh 6vw 10vh;
}

.card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 26px 26px;
  min-height: 190px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 10px 30px rgba(0,0,0,0.5);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: streakGlide 9s ease-in-out infinite alternate;
}
.card:nth-child(2n)::before { animation-duration: 11s; animation-direction: alternate-reverse; }
.card:nth-child(3n)::before { animation-duration: 13s; }
.card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 16px 44px rgba(0,0,0,0.65), 0 0 34px rgba(212,175,55,0.14);
}
.card .icon { font-size: 40px; display: block; margin-bottom: 14px; filter: drop-shadow(0 0 12px rgba(255,255,255,0.15)); }
.card h3 {
  font-family: "Lobster", cursive;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.card p { color: var(--text-dim); font-size: 13.5px; line-height: 1.65; }
.card .status {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.online { background: var(--green); box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); }
.dot.soon { background: var(--amber); box-shadow: 0 0 10px rgba(251, 191, 36, 0.6); }
.card.soon { opacity: 0.55; }
.card.owner-card { border-color: rgba(212, 175, 55, 0.4); }
.card.owner-card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 16px 44px rgba(0,0,0,0.65), 0 0 40px rgba(212,175,55,0.28); }

/* ---------- content pages (guhensy / admin) ---------- */
.content {
  max-width: 1060px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}
.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.page-title {
  font-family: "Lobster", cursive;
  font-size: 42px;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.25);
}
.back-link { color: var(--text-dim); text-decoration: none; font-size: 14px; }
.back-link:hover { color: var(--gold); }

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 24px 26px;
  margin-bottom: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.panel h2 {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.stat {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
}
.stat .k { color: var(--text-dim); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.stat .v { font-size: 22px; margin-top: 4px; color: #fff; }
.stat .v.gold { color: var(--gold); }

.board { width: 100%; border-collapse: collapse; }
.board td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 14.5px; }
.board tr:last-child td { border-bottom: none; }
.board .rank { color: var(--text-dim); width: 46px; }
.board .val { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.board tr.me td { background: rgba(212, 175, 55, 0.07); }
.board tr.me .name::after { content: " — you"; color: var(--gold); font-size: 12px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 760px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- admin ---------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.admin-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: middle; }
.chip {
  display: inline-block;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 10px;
  margin: 2px;
  color: var(--text-dim);
}
.chip.on { border-color: rgba(74,222,128,0.45); color: var(--green); }
.chip.green { border-color: rgba(74,222,128,0.45); color: var(--green); }
.chip.amber { border-color: rgba(251,191,36,0.45); color: var(--amber); }
.chip.red { border-color: rgba(248,113,113,0.5); color: var(--red); }
.mini-btn {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11.5px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.mini-btn:hover { border-color: var(--gold-soft); color: var(--gold); }
.mini-btn.danger:hover { border-color: rgba(248,113,113,0.5); color: var(--red); }
.code-reveal {
  font-family: "Consolas", monospace;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.07);
  border: 1px dashed var(--gold-soft);
  border-radius: 12px;
  padding: 14px 18px;
  text-align: center;
  margin-bottom: 16px;
}
.audit-line { font-size: 12.5px; color: var(--text-dim); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.audit-line b { color: var(--silver); font-weight: 500; }

/* ---------- players ---------- */
.player-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.player-row:last-child { border-bottom: none; }
.p-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--line-soft);
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
  overflow: hidden;
  flex: 0 0 42px;
}
.p-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.p-avatar .avatar-fallback { font-size: 19px; }
.p-avatar.xl { width: 92px; height: 92px; flex: 0 0 92px; border-color: var(--gold-soft); box-shadow: 0 0 22px rgba(212,175,55,0.2); }
.p-name { color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 500; }
.p-name:hover { color: var(--gold); }
.p-name.dim { color: var(--text-dim); }
.p-name.dim:hover { color: var(--text-dim); }
.player-row.ghost { opacity: 0.55; }

/* PS3-friend-list presence dots on avatars */
.presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid #0b0b0c;
  z-index: 2;
}
.presence.online { background: var(--green); box-shadow: 0 0 8px rgba(74, 222, 128, 0.8); }
.presence.away { background: var(--amber); box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); }
.presence.off { background: #4a4a4d; }
.presence-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 4px 0 12px;
}
.presence-legend > span { display: flex; align-items: center; gap: 6px; }
.presence-key { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.presence-key.online { background: var(--green); }
.presence-key.away { background: var(--amber); }
.presence-key.off { background: #4a4a4d; }

/* folder member manager */
.member-results { margin-top: 10px; }
.member-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.member-result:hover { border-color: var(--gold-soft); background: rgba(212, 175, 55, 0.05); }
.toggle-chip {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 12px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  font-family: inherit;
  transition: all 0.15s;
}
.toggle-chip.on { border-color: rgba(74, 222, 128, 0.5); color: var(--green); }
.toggle-chip:hover { border-color: var(--gold-soft); }
.p-sub { color: var(--text-dim); font-size: 12px; flex: 1; }
.p-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.p-actions form { display: inline; }
.mini-btn.gold { border-color: var(--gold-soft); color: var(--gold); }
.mini-btn.gold:hover { box-shadow: 0 0 14px rgba(212, 175, 55, 0.25); }
.dim-note { color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.search-form { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.glass-input.slim { height: 42px; border-radius: 12px; flex: 1; max-width: 420px; }
.glass-input.slim input { font-size: 14px; }
.player-hero { display: flex; gap: 20px; align-items: center; }
.player-hero-info { min-width: 0; }

/* ---------- media gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.media-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
}
.media-card img,
.media-card video {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #000;
  display: block;
}
.media-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.m-title { font-size: 13.5px; color: var(--text); }
.m-sub { font-size: 11.5px; color: var(--text-dim); }
.media-status {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.media-status.pending { color: var(--amber); border-color: rgba(251, 191, 36, 0.45); }
.media-status.approved { color: var(--green); border-color: rgba(74, 222, 128, 0.45); }
.media-status.rejected { color: var(--red); border-color: rgba(248, 113, 113, 0.45); }
.media-status.processing { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); animation: livePulse 1.4s ease-in-out infinite; }
.media-status.failed { color: var(--red); border-color: rgba(248, 113, 113, 0.6); }
.media-card.rejected { opacity: 0.6; }

.upload-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.file-input { color: var(--text-dim); font-size: 13px; max-width: 280px; }
.file-input::file-selector-button {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 12px;
  margin-right: 10px;
  cursor: pointer;
  font-family: inherit;
}
.mod-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.reason-input {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  flex: 1;
  min-width: 120px;
  font-family: inherit;
}

/* showcase picking */
.media-card.pickable { cursor: pointer; transition: outline 0.15s, box-shadow 0.15s; outline: 2px solid transparent; }
.media-card.pickable input { position: absolute; opacity: 0; pointer-events: none; }
.media-card.pickable.picked { outline: 2px solid var(--gold); box-shadow: 0 0 22px rgba(212, 175, 55, 0.25); }

/* profile panel quick links */
.pp-links { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pp-links a {
  flex: 1;
  text-align: center;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 6px;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
.pp-links a:hover { color: var(--gold); border-color: var(--gold-soft); }

.stack-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.stack-form .glass-input { width: 100%; }

/* ---------- media dropzone ---------- */
.dropzone {
  border: 1.5px dashed rgba(212, 175, 55, 0.45);
  border-radius: 18px;
  background:
    radial-gradient(400px 120px at 50% 0%, rgba(212, 175, 55, 0.06), transparent),
    rgba(255, 255, 255, 0.015);
  padding: 44px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
}
.dropzone:hover, .dropzone.drag {
  border-color: var(--gold);
  background:
    radial-gradient(400px 140px at 50% 0%, rgba(212, 175, 55, 0.14), transparent),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.12);
}
.dz-glyph {
  width: 46px;
  height: 34px;
  margin: 0 auto 14px;
  border: 1.5px solid var(--gold-soft);
  border-radius: 8px;
  position: relative;
}
.dz-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, var(--gold), transparent);
  transform: translateX(-50%);
}
.dz-glyph::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--gold);
  border-top: 2px solid var(--gold);
}
.dz-title { font-size: 16.5px; color: var(--text); letter-spacing: 0.3px; }
.dz-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }

/* ---------- upload modal ---------- */
.up-modal {
  position: fixed;
  inset: 0;
  /* deep veil instead of backdrop blur — blurring the whole page
     re-renders it every frame while the modal is open */
  background: rgba(0, 0, 0, 0.88);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
}
.up-modal.open { opacity: 1; pointer-events: auto; }
.up-panel {
  width: min(760px, 96vw);
  background: linear-gradient(180deg, #141415, #0a0a0b);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 60px rgba(212, 175, 55, 0.07);
  padding: 24px 26px;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.22s;
}
.up-modal.open .up-panel { transform: none; }
.up-stage.hidden, .hidden { display: none !important; }
.up-head {
  font-family: "Lobster", cursive;
  font-size: 24px;
  margin-bottom: 16px;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
}

.player-shell {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.player-shell video, .player-shell img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  background: #000;
  cursor: pointer;
}

/* ---------- trim bar ---------- */
.trim-zone { margin-top: 16px; }
.trim-times { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.t-chip {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 12px;
}
.t-chip b { color: var(--text); font-weight: 500; margin-left: 6px; font-variant-numeric: tabular-nums; }
.t-chip.len { border-color: var(--gold-soft); }
.t-chip.len b { color: var(--gold); }
.t-chip.len.atcap { border-color: var(--gold); box-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }
.t-chip.len.atcap::after { content: " max"; color: var(--gold); font-size: 9px; }

.trim-row { display: flex; align-items: center; gap: 14px; }
.trim-play {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.trim-play:hover { box-shadow: 0 0 16px rgba(212, 175, 55, 0.35); }
.t-cur { font-size: 12px; color: var(--text-dim); width: 52px; text-align: right; font-variant-numeric: tabular-nums; }

.trim-track {
  position: relative;
  flex: 1;
  height: 34px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 10%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--line-soft);
  cursor: pointer;
  touch-action: none;
}
.trim-fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.34), rgba(212, 175, 55, 0.14));
  border-top: 1px solid rgba(212, 175, 55, 0.7);
  border-bottom: 1px solid rgba(212, 175, 55, 0.7);
  cursor: grab;
}
.trim-fill:active { cursor: grabbing; }
.trim-handle {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 18px;
  margin-left: -9px;
  cursor: ew-resize;
  z-index: 2;
  touch-action: none;
}
.trim-handle span {
  position: absolute;
  inset: 0 5px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f0d488, var(--gold) 60%, #9a7d22);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255,255,255,0.5);
}
.trim-handle span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 12px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}
.trim-hint { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }

.up-controls { display: flex; gap: 12px; margin-top: 18px; align-items: center; }
.up-title {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0 16px;
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
}
.up-title:focus { border-color: rgba(255, 255, 255, 0.45); }
.up-title.shake { animation: shake 0.4s; border-color: var(--red); }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.up-go {
  height: 44px;
  padding: 0 22px;
  border-radius: 12px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
  color: var(--gold);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}
.up-go:hover { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); color: #ffe9a8; }
.up-cancel {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--text-dim);
  font-family: inherit;
  cursor: pointer;
}
.up-cancel:hover { color: var(--red); border-color: rgba(248,113,113,0.4); }

/* ---------- busy / done / error stages ---------- */
.busy-wrap { padding: 30px 10px; }
.busy-label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
}
.busy-label #busyPct { color: var(--gold); font-variant-numeric: tabular-nums; }
.busy-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.busy-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6d1f, var(--gold), #f0d488);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
  transition: width 0.35s ease;
}
.busy-eta {
  margin-top: 10px;
  text-align: center;
  font-size: 12.5px;
  color: var(--gold);
  letter-spacing: 0.06em;
  min-height: 16px;
  font-variant-numeric: tabular-nums;
}
.busy-hint { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); text-align: center; }

.done-wrap { padding: 34px 10px; text-align: center; }
.done-check { width: 92px; height: 92px; }
.dc-circle {
  stroke: #35c26a;
  stroke-width: 3;
  stroke-dasharray: 195;
  stroke-dashoffset: 195;
  transform: rotate(-90deg);
  transform-origin: center;
  animation: dcCircle 0.7s ease forwards;
  filter: drop-shadow(0 0 10px rgba(53, 194, 106, 0.5));
}
.dc-tick {
  stroke: #4ade80;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: dcTick 0.45s ease 0.55s forwards;
}
@keyframes dcCircle { to { stroke-dashoffset: 0; } }
@keyframes dcTick { to { stroke-dashoffset: 0; } }
.done-text { margin-top: 16px; color: var(--text); font-size: 15px; }
.err-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--red);
  color: var(--red);
  font-size: 40px;
  line-height: 66px;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(248, 113, 113, 0.35);
}

/* ---------- File Upload service ---------- */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
.folder-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 20px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  transition: all 0.22s;
}
.folder-card:hover {
  border-color: var(--gold-soft);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(212,175,55,0.1);
}
.folder-glyph {
  width: 44px;
  height: 32px;
  border: 1.5px solid var(--gold-soft);
  border-radius: 6px;
  position: relative;
  margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(212,175,55,0.12), transparent);
}
.folder-glyph::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -1px;
  width: 45%;
  height: 7px;
  border: 1.5px solid var(--gold-soft);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: rgba(212, 175, 55, 0.12);
}
.folder-name { font-size: 16px; font-weight: 500; }
.folder-sub { font-size: 11.5px; color: var(--text-dim); }

.file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.file-row:last-child { border-bottom: none; }
.file-glyph {
  flex: 0 0 34px;
  height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
}
.file-glyph::after {
  content: "ZIP";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.file-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.file-name { font-size: 14.5px; color: var(--text); word-break: break-all; }
.file-sub { font-size: 11.5px; color: var(--text-dim); }
.file-slim input[type="file"] { color: var(--text-dim); font-size: 13px; }
a.mini-btn { text-decoration: none; display: inline-block; line-height: 1.4; }

/* ---------- lightbox + hearts ---------- */
.lb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.93);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.lb-overlay.open { opacity: 1; pointer-events: auto; }
.lb-panel {
  position: relative;
  max-width: min(1100px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #131314, #0a0a0b);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(212, 175, 55, 0.08);
}
.lb-media { background: #000; display: flex; align-items: center; justify-content: center; }
.lb-media img, .lb-media video { max-width: 94vw; max-height: 76vh; display: block; }
.lb-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-size: 20px;
  cursor: pointer;
}
.lb-close:hover { color: var(--red); border-color: rgba(248, 113, 113, 0.5); }
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
}
.lb-info { display: flex; flex-direction: column; min-width: 0; }
.lb-title { font-size: 15.5px; color: var(--text); }
.lb-owner { font-size: 12px; color: var(--text-dim); }

.lb-heart {
  display: flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.lb-heart:hover { border-color: rgba(255, 77, 109, 0.5); }
.heart-svg { width: 24px; height: 24px; }
.heart-path {
  fill: transparent;
  stroke: #9a9a9a;
  stroke-width: 1.7;
  transition: fill 0.25s, stroke 0.25s;
}
.lb-heart.liked .heart-path {
  fill: #ff4d6d;
  stroke: #ff4d6d;
  filter: drop-shadow(0 0 8px rgba(255, 77, 109, 0.65));
}
.lb-count { color: var(--text); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.lb-heart.pop .heart-svg { animation: heartlife 0.65s cubic-bezier(0.2, 2.2, 0.4, 1); }
@keyframes heartlife {
  0% { transform: scale(0.4); }
  35% { transform: scale(1.35); }
  50% { transform: scale(0.95) rotate(-9deg); }
  65% { transform: scale(1.12) rotate(8deg); }
  80% { transform: scale(0.98) rotate(-4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* card extras: uploader avatar + like badge + clickable */
[data-lb] { cursor: pointer; }
.m-owner { display: flex; align-items: center; gap: 8px; }
.m-owner .p-avatar { width: 22px; height: 22px; flex: 0 0 22px; border-width: 1.5px; }
.m-owner .p-avatar .avatar-fallback { font-size: 11px; }
.like-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.like-chip .heart-mini { width: 13px; height: 13px; }
.like-chip .heart-mini path { fill: #ff4d6d; opacity: 0.85; }

.media-layout { display: grid; grid-template-columns: 1fr 280px; gap: 26px; align-items: start; }
@media (max-width: 900px) { .media-layout { grid-template-columns: 1fr; } }
.feed-line {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
  color: var(--text-dim);
}
.feed-line:last-child { border-bottom: none; }
.feed-line .p-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.feed-line .p-avatar .avatar-fallback { font-size: 12px; }
.feed-line b { color: var(--text); font-weight: 500; }
.feed-item-link { color: var(--gold); cursor: pointer; }
.feed-item-link:hover { text-shadow: 0 0 8px var(--gold-soft); }
.feed-when { margin-left: auto; font-size: 10.5px; white-space: nowrap; }

.filter-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-bar a {
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 6px 14px;
  transition: all 0.2s;
}
.filter-bar a.active, .filter-bar a:hover { color: var(--gold); border-color: var(--gold-soft); }

/* ---------- events calendar ---------- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cal-title { font-family: "Lobster", cursive; font-size: 24px; letter-spacing: 0.5px; }
.cal-title b { color: var(--gold); font-weight: 400; }
.cal-nav {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}
.cal-nav:hover { border-color: var(--gold-soft); color: var(--gold); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-daynames { margin-bottom: 6px; }
.cal-daynames span {
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding: 4px 0;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1.15;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008));
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.18s;
  padding: 4px;
}
.cal-cell:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.4); }
.cal-cell.empty { visibility: hidden; }
.cal-cell.today { border-color: var(--gold); box-shadow: 0 0 14px rgba(212, 175, 55, 0.25); }
.cal-cell.today .cal-num { color: var(--gold); }
.cal-num { font-size: 14px; }
.cal-pips { display: flex; gap: 3px; align-items: center; min-height: 7px; }
.cal-pip { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cal-pip.tournament { background: var(--gold); box-shadow: 0 0 6px rgba(212, 175, 55, 0.7); }
.cal-pip.effect { background: var(--amber); box-shadow: 0 0 5px rgba(251, 191, 36, 0.5); }
.cal-more { font-size: 9px; color: var(--text-dim); font-style: normal; }

.cal-pop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.86);
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cal-pop.open { opacity: 1; pointer-events: auto; }
.cal-pop-panel {
  position: relative;
  width: min(460px, 94vw);
  max-height: 80vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #141415, #0a0a0b);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.85), 0 0 40px rgba(212, 175, 55, 0.08);
}
.cal-pop-title {
  font-family: "Lobster", cursive;
  font-size: 22px;
  margin-bottom: 14px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}
.cal-ev {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cal-ev:last-child { border-bottom: none; }
.cal-ev-mark { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 9px; }
.cal-ev-mark.tournament { background: var(--gold); box-shadow: 0 0 8px rgba(212, 175, 55, 0.7); }
.cal-ev-mark.effect { background: var(--amber); box-shadow: 0 0 7px rgba(251, 191, 36, 0.55); }
.cal-ev-main { display: flex; flex-direction: column; gap: 3px; }
.cal-ev-title { font-size: 14px; color: var(--text); }
.cal-ev-sub { font-size: 11.5px; color: var(--text-dim); }

/* ---------- profile hero v2 (spread out, title crowns the top) ---------- */
.hero-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 26px 30px;
  gap: 10px;
}
.hero-title {
  font-family: "Great Vibes", cursive;
  font-size: clamp(34px, 4.5vw, 52px);
  color: var(--gold);
  text-shadow: 0 0 22px rgba(212, 175, 55, 0.45);
  line-height: 1;
  margin-bottom: 8px;
}
.hero-avatar {
  position: relative;
  width: 176px;
  height: 176px;
  flex: 0 0 176px;
  border-radius: 50%;
  border: 3px solid var(--gold-soft);
  overflow: hidden;
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.22), 0 16px 44px rgba(0, 0, 0, 0.6);
  display: inline-block;
}
.hero-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero-name { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.hero-name .pp-display { font-size: 34px; }
.hero-handle { color: var(--text-dim); font-size: 14.5px; }
.hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  margin-top: 6px;
}
.hero-meta b { color: var(--silver); font-weight: 500; }
.hero-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold-soft); }

/* board avatar chips */
.board-who { display: inline-flex; align-items: center; gap: 9px; }
.p-avatar.tiny { width: 28px; height: 28px; flex: 0 0 28px; }
.p-avatar.tiny .avatar-fallback { font-size: 13px; }
.board-link { color: var(--text); text-decoration: none; }
.board-link:hover { color: var(--gold); }

/* account avatar editor */
.avatar-editor { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.avatar-editor .p-avatar.xl { width: 132px; height: 132px; flex: 0 0 132px; }
.avatar-editor-forms { display: flex; flex-direction: column; gap: 10px; }

.soon-hero { text-align: center; padding: 18vh 20px; }
.soon-hero .big { font-size: 70px; margin-bottom: 20px; }
.soon-hero h1 { font-family: "Lobster", cursive; font-size: 40px; margin-bottom: 14px; }
.soon-hero p { color: var(--text-dim); }

/* ================= profile personality: color + banner ================= */
/* Every profile surface reads --pcolor (the member's chosen color); the
   house gold is the default, so untouched profiles look exactly as before. */

.hero-v2 { --pcolor: var(--gold); position: relative; overflow: hidden; }
.hero-v2 > * { position: relative; z-index: 1; }
.hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(560px 220px at 50% 0%, color-mix(in srgb, var(--pcolor) 22%, transparent), transparent 74%);
  pointer-events: none;
}
.hero-v2.has-banner::before {
  background-image:
    linear-gradient(180deg, rgba(6, 6, 8, 0.2), rgba(8, 8, 10, 0.62) 55%, rgba(10, 10, 11, 0.94) 100%),
    var(--banner);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.hero-v2 .hero-title { color: var(--pcolor); text-shadow: 0 0 22px color-mix(in srgb, var(--pcolor) 45%, transparent); }
.hero-v2 .hero-avatar {
  border-color: color-mix(in srgb, var(--pcolor) 55%, #141414);
  box-shadow: 0 0 40px color-mix(in srgb, var(--pcolor) 24%, transparent), 0 16px 44px rgba(0, 0, 0, 0.6);
}
.hero-v2 .hero-dot { background: var(--pcolor); }

/* dashboard: the expanding panel + topbar avatar take the color too */
.profile-panel { --pcolor: var(--gold); }
.pp-banner {
  background:
    radial-gradient(240px 90px at 80% 0%, color-mix(in srgb, var(--pcolor, var(--gold)) 35%, transparent), transparent 70%),
    linear-gradient(120deg, color-mix(in srgb, var(--pcolor, var(--gold)) 22%, transparent), rgba(20, 20, 22, 0.1) 60%),
    #101011;
  border-bottom-color: color-mix(in srgb, var(--pcolor, var(--gold)) 40%, #232324);
}
.pp-banner.has-banner {
  background-image:
    linear-gradient(180deg, rgba(8, 8, 10, 0.12), rgba(12, 12, 13, 0.5) 68%, rgba(12, 12, 13, 0.82) 100%),
    var(--banner);
  background-size: cover;
  background-position: center;
}
.profile-panel .pp-avatar { outline-color: color-mix(in srgb, var(--pcolor) 55%, #232324); }
.avatar-btn { --pcolor: var(--gold); }
.avatar-btn {
  border-color: color-mix(in srgb, var(--pcolor) 55%, #2a2a2c);
  box-shadow: 0 0 22px color-mix(in srgb, var(--pcolor) 25%, transparent);
}
.avatar-btn:hover {
  border-color: var(--pcolor);
  box-shadow: 0 0 26px color-mix(in srgb, var(--pcolor) 40%, transparent);
}

/* colored avatar rings in player lists */
.p-avatar.ringed {
  border-color: color-mix(in srgb, var(--pcolor, var(--gold)) 60%, #232324);
  box-shadow: 0 0 12px color-mix(in srgb, var(--pcolor, var(--gold)) 22%, transparent);
}

/* ---- /account style editor: live banner preview + hover veil ---- */
.style-banner {
  --pcolor: var(--gold);
  position: relative;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pcolor) 32%, #1c1c1e);
  background:
    radial-gradient(620px 240px at 50% 0%, color-mix(in srgb, var(--pcolor) 28%, transparent), transparent 76%),
    linear-gradient(160deg, #131314, #0a0a0b);
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.style-banner:hover {
  border-color: color-mix(in srgb, var(--pcolor) 65%, #333);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 26px color-mix(in srgb, var(--pcolor) 16%, transparent);
}
.style-banner.has-banner {
  background-image:
    linear-gradient(180deg, rgba(6, 6, 8, 0.08), rgba(8, 8, 10, 0.5) 62%, rgba(10, 10, 11, 0.88) 100%),
    var(--banner);
  background-size: cover;
  background-position: center;
}
.style-banner.drag {
  border-color: var(--pcolor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcolor) 35%, transparent), 0 16px 40px rgba(0, 0, 0, 0.55);
}
.sb-id { position: absolute; left: 22px; bottom: 16px; display: flex; align-items: center; gap: 14px; z-index: 1; }
.sb-avatar {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
  border-color: color-mix(in srgb, var(--pcolor) 60%, #141414);
  box-shadow: 0 0 18px color-mix(in srgb, var(--pcolor) 28%, transparent);
}
.sb-avatar .avatar-fallback.big { font-size: 34px; }
.sb-name { font-family: "Lobster", cursive; font-size: 26px; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85); }
.sb-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(5, 5, 7, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.style-banner:hover .sb-veil,
.style-banner.drag .sb-veil,
.style-banner.busy .sb-veil { opacity: 1; }
.sb-cam {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--pcolor);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pcolor);
  background: rgba(10, 10, 12, 0.55);
  box-shadow: 0 0 20px color-mix(in srgb, var(--pcolor) 35%, transparent);
  transition: transform 0.3s ease;
}
.style-banner:hover .sb-cam { transform: translateY(-2px) scale(1.06); }
.sb-cam svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.style-banner.busy .sb-cam { animation: sbPulse 1.1s ease-in-out infinite; }
@keyframes sbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.style-banner.busy .sb-cam, .pfp-drop.busy .sb-cam { box-shadow: 0 0 22px color-mix(in srgb, var(--pcolor) 45%, transparent); }
.sb-cta { letter-spacing: 0.14em; font-size: 13px; text-transform: uppercase; color: var(--text); }
.sb-hint { font-size: 11.5px; color: var(--text-dim); }
.style-under {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.style-under .dim-note { margin: 0; max-width: 640px; }

/* ---- the color swatches ---- */
.color-row { display: flex; align-items: center; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.color-label { font-family: "Great Vibes", cursive; font-size: 26px; color: var(--gold); line-height: 1; }
.swatches { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.swatch {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--sw) 55%, #0a0a0b);
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--sw) 88%, #fff 8%), var(--sw) 58%, color-mix(in srgb, var(--sw) 55%, #000) 100%);
  cursor: pointer;
  padding: 0;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
.swatch:hover { transform: translateY(-2px) scale(1.1); box-shadow: 0 6px 16px color-mix(in srgb, var(--sw) 40%, transparent); }
.swatch.picked {
  box-shadow: 0 0 0 2.5px #0a0a0b, 0 0 0 4.5px var(--sw), 0 0 18px color-mix(in srgb, var(--sw) 55%, transparent);
  animation: swatchPop 0.35s ease;
}
.swatch.picked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #0b0b0c;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
}
@keyframes swatchPop {
  0% { transform: scale(0.82); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.swatch.custom {
  --sw: #8b8b90;
  background: conic-gradient(#e0455a, #e6b34d, #3ec97e, #3fa7ff, #8b5cf6, #d557d5, #e0455a);
  border-color: #2a2a2c;
  display: inline-block;
}
.swatch.custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.swatch.custom .swatch-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b0b0c;
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.swatch.custom.picked { background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--sw) 88%, #fff 8%), var(--sw) 58%, color-mix(in srgb, var(--sw) 55%, #000) 100%); }
.swatch.custom.picked .swatch-plus { display: none; }

/* ================== dark scrollbars, everywhere ================== */
/* The white OS scrollbar has no place in this world. Thin, gold-dusted,
   and it fades into the glass — applies to the page, the chat, the
   emoji picker, consoles, rails, all of it. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.35) rgba(255, 255, 255, 0.03);
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.4), rgba(140, 110, 30, 0.4));
  border-radius: 999px;
  border: 2.5px solid #0b0b0c;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.6); }

/* ==================== polish pass: motion everywhere ==================== */
/* Small, deliberate movement — glass and gold stay, everything answers
   the cursor. */

/* fill BACKWARDS only — a filled (both/forwards) transform animation
   permanently turns .content into the containing block for every
   position:fixed modal inside it, anchoring them to the page instead of
   the screen (the forge popped up half-outside the viewport) */
.content { animation: pageIn 0.4s ease backwards; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.mini-btn, .toggle-chip {
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.mini-btn:hover { transform: translateY(-1.5px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
.mini-btn:active, .toggle-chip:active { transform: scale(0.95); }
.mini-btn.gold:hover { box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3); }
.mini-btn.danger:hover { box-shadow: 0 6px 18px rgba(224, 69, 90, 0.25); }
.mini-btn.gold::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 46%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.mini-btn.gold:hover::after { left: 135%; }
.toggle-chip:hover { transform: translateY(-1px); border-color: var(--gold-soft); }

.player-row, .file-row {
  transition: background 0.25s ease, transform 0.22s ease;
  border-radius: 12px;
}
.player-row:hover, .file-row:hover { background: rgba(255, 255, 255, 0.035); transform: translateX(4px); }

.stat { transition: transform 0.22s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.stat:hover {
  transform: translateY(-2px);
  border-color: var(--gold-soft);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 14px rgba(212, 175, 55, 0.08);
}

.card .icon { display: inline-block; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.card:hover .icon { transform: scale(1.15) rotate(-5deg); }

.glass-input { transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.glass-input:focus-within { border-color: var(--gold-soft); box-shadow: 0 0 18px rgba(212, 175, 55, 0.14); }

.admin-table tr { transition: background 0.2s ease; }
.admin-table tr:hover td { background: rgba(255, 255, 255, 0.025); }

.media-card { overflow: hidden; }
.media-card img { transition: transform 0.45s ease; }
.media-card:hover img { transform: scale(1.06); }

.back-link { transition: color 0.25s ease, transform 0.25s ease; display: inline-block; }
.back-link:hover { color: var(--gold); transform: translateX(-3px); }

.presence.online { animation: presencePulse 2.6s ease-in-out infinite; }
/* transform/opacity only — the old box-shadow ring repainted every frame */
@keyframes presencePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  55% { transform: scale(1.3); opacity: 0.7; }
}

.pp-links a { transition: color 0.25s ease, transform 0.25s ease; display: inline-block; }
.pp-links a:hover { transform: translateY(-1.5px); }

/* ================== phone-style notification toasts ================== */

.toast-stack {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toast {
  --pcolor: var(--gold);
  width: 384px;
  max-width: calc(100vw - 44px);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(32, 32, 35, 0.97), rgba(15, 15, 17, 0.97));
  border: 1px solid color-mix(in srgb, var(--pcolor) 38%, #26262a);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 26px color-mix(in srgb, var(--pcolor) 12%, transparent);
  cursor: pointer;
  transform: translateX(440px);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1.15), opacity 0.4s ease;
}
.toast.in { transform: none; opacity: 1; }
.toast.gone { transform: translateX(440px) scale(0.92); opacity: 0; }
.toast-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--pcolor) 60%, #141414);
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
}
.toast-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.toast-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lobster", cursive;
  font-size: 20px;
  color: var(--gold);
}
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast-title {
  font-weight: 500;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--pcolor) 75%, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-text {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.toast-close {
  align-self: flex-start;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.2s;
}
.toast-close:hover { color: #fff; }

/* ============================ CHAT ============================ */

.chat-content {
  max-width: 1560px;
  height: calc(100vh - 34px);
  display: flex;
  padding-bottom: 16px;
}
.chat-shell { flex: 1; display: flex; gap: 16px; min-height: 0; }
.chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.chat-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10, 10, 12, 0.5);
}
.chat-title-wrap { min-width: 0; }
.chat-title { font-family: "Lobster", cursive; font-size: 24px; line-height: 1.1; text-shadow: 0 0 14px rgba(255, 255, 255, 0.15); }
.chat-sub { color: var(--text-dim); font-size: 12px; letter-spacing: 0.06em; }
.chat-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.chat-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, transform 0.18s, box-shadow 0.25s;
}
.chat-top-btn:hover { color: var(--gold); border-color: var(--gold-soft); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.chat-top-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.chat-back { margin-left: 4px; }

.dm-launcher {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.14), rgba(20, 20, 22, 0.4));
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, box-shadow 0.3s ease;
}
.dm-launcher:hover { transform: translateY(-1.5px); box-shadow: 0 0 20px rgba(212, 175, 55, 0.25); }
.dm-launcher svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.dm-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d3382f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0a0a0b;
  animation: badgePop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
@keyframes badgePop { from { transform: scale(0.4); } }

.chat-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 8px; scroll-behavior: auto; }
.chat-loading { color: var(--text-dim); text-align: center; padding: 30px 0; }

.day-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 10px;
  color: var(--text-dim);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.day-divider::before, .day-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.msg { margin-top: 14px; animation: msgIn 0.25s ease both; }
.msg.grouped { margin-top: 2px; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
.c-avatar {
  --pcolor: var(--gold);
  position: relative;
  /* display MUST be explicit: as a bare span, width/height silently
     collapse whenever the avatar sits inside a wrapper (mh-click,
     pc-ava, nb-avatar) instead of being a direct flex item */
  display: inline-block;
  vertical-align: middle;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  /* overflow stays visible so the cosmetic ring frame can reach OUTSIDE
     the circle — the face img clips itself with its own border-radius */
  border: 2px solid color-mix(in srgb, var(--pcolor) 45%, #232324);
  background: linear-gradient(160deg, #1c1c1e, #0c0c0d);
}
.c-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: 50%; }
.c-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lobster", cursive;
  font-size: 17px;
  color: var(--gold);
  border-radius: 50%;
  overflow: hidden;
}
.msg-name { font-weight: 500; font-size: 15px; }
.msg-time { color: var(--text-dim); font-size: 11px; }
.msg-row { position: relative; padding-left: 48px; }
.msg-row:hover { background: rgba(255, 255, 255, 0.02); border-radius: 8px; }
.m-text { font-size: 15px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; padding: 1px 0; }
.m-text.jumbo { font-size: 46px; line-height: 1.2; }
.mention {
  color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  border-radius: 5px;
  padding: 0 4px;
  font-weight: 500;
}
.mention.me { background: rgba(212, 175, 55, 0.28); color: #ffe9ad; }
.msg.pinged .msg-row {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent 70%);
  border-left: 2px solid var(--gold);
  border-radius: 0 8px 8px 0;
  margin-left: -8px;
  padding-left: 54px;
}
.msg-del {
  position: absolute;
  right: 8px;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(15, 15, 17, 0.9);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.msg-row:hover .msg-del { opacity: 1; }
.msg-del:hover { color: #ff8896; border-color: rgba(224, 69, 90, 0.5); transform: scale(1.1); }
.msg-hover-time { position: absolute; left: 4px; top: 4px; font-size: 10px; color: var(--text-dim); opacity: 0; transition: opacity 0.2s; }
.msg.grouped .msg-row:hover .msg-hover-time { opacity: 0.8; }

.m-image {
  max-width: min(420px, 80%);
  max-height: 340px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
  display: block;
  margin: 4px 0;
}
.m-image:hover { transform: scale(1.015); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.m-video { max-width: min(480px, 85%); max-height: 360px; border-radius: 12px; border: 1px solid var(--line-soft); display: block; margin: 4px 0; background: #000; }
.m-sticker { width: 132px; height: 132px; display: block; margin: 4px 0; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)); animation: stickerIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
@keyframes stickerIn { from { transform: scale(0.6) rotate(-6deg); opacity: 0; } }

.voice-msg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 4px 0;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.08), rgba(18, 18, 20, 0.6));
  min-width: 240px;
}
.voice-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s, box-shadow 0.25s;
  flex: 0 0 34px;
}
.voice-play:hover { transform: scale(1.08); box-shadow: 0 0 14px rgba(212, 175, 55, 0.3); }
.voice-play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.voice-msg.playing .voice-play svg { display: none; }
.voice-msg.playing .voice-play::after { content: ""; width: 10px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.voice-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); cursor: pointer; overflow: hidden; }
.voice-prog { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 999px; transition: width 0.2s linear; }
.voice-len { color: var(--text-dim); font-size: 12px; min-width: 38px; text-align: right; }

.typing-line { min-height: 20px; padding: 0 20px 4px; color: var(--text-dim); font-size: 12.5px; font-style: italic; transition: color 0.2s; }
.typing-line.err { color: #ff8896; font-style: normal; }

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(10, 10, 12, 0.45);
}
.comp-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s, border-color 0.25s, transform 0.16s, box-shadow 0.3s;
}
.comp-btn:hover { color: var(--gold); border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }
.comp-btn:active { transform: scale(0.92); }
.comp-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.composer-input {
  position: relative;
  flex: 1;
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  padding: 9px 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.composer-input:focus-within { border-color: var(--gold-soft); box-shadow: 0 0 18px rgba(212, 175, 55, 0.12); }
.composer-input textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  max-height: 148px;
}
.comp-send {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.32), rgba(160, 122, 20, 0.25));
  color: var(--gold);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s, box-shadow 0.3s;
}
.comp-send:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 22px rgba(212, 175, 55, 0.35); }
.comp-send:active { transform: scale(0.92); }
.comp-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.voice-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid rgba(224, 69, 90, 0.35);
  background: rgba(224, 69, 90, 0.07);
  color: var(--text);
  font-size: 13.5px;
}
.voice-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0455a; animation: presencePulse 1.4s infinite; }
.voice-hint { color: var(--text-dim); margin-right: auto; }

/* right roster */
.chat-side {
  width: 252px;
  flex: 0 0 252px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 16px 10px 10px;
  min-height: 0;
}
.side-head { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding: 0 8px 12px; }
.roster { flex: 1; overflow-y: auto; }
.roster-sec { color: var(--text-dim); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 8px 6px; }
.roster-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.22s, transform 0.2s;
}
.roster-row:hover { background: rgba(255, 255, 255, 0.045); transform: translateX(3px); }
.roster-row.is-me { opacity: 0.75; cursor: default; }
.roster-row .presence { position: absolute; left: 32px; bottom: 8px; }
.roster-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.roster-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.roster-name .pp-role { font-size: 8.5px; padding: 2px 6px; }
.muted-mark { color: var(--text-dim); opacity: 0.8; }
.muted-mark svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* roster popover */
.roster-pop {
  position: fixed;
  z-index: 450;
  width: 250px;
  background: linear-gradient(180deg, rgba(30, 30, 33, 0.97), rgba(14, 14, 16, 0.97));
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  padding: 10px;
  animation: popIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.92) translateY(6px); } }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.pop-head span { display: flex; flex-direction: column; min-width: 0; }
.pop-head b { font-size: 15px; }
.pop-head i { color: var(--text-dim); font-size: 12px; font-style: normal; }
.pop-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.pop-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.pop-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(2px); }
.pop-item.gold { color: var(--gold); }
.pop-item.disabled { color: var(--text-dim); cursor: default; }
.pop-item.disabled:hover { background: none; transform: none; }

/* DM rail slide-over */
.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 380;
  /* no backdrop blur: this overlay stays up the whole time the DM rail
     is open — blurring the page behind it was the "5 fps Messages" lag */
  background: rgba(3, 3, 5, 0.72);
  animation: fadeIn 0.25s ease both;
}
@keyframes fadeIn { from { opacity: 0; } }
.dm-rail {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 400;
  width: 340px;
  max-width: 90vw;
  background: linear-gradient(180deg, rgba(22, 22, 25, 0.98), rgba(10, 10, 12, 0.98));
  border-right: 1px solid var(--gold-soft);
  box-shadow: 30px 0 80px rgba(0, 0, 0, 0.55);
  transform: translateX(-360px);
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1.05);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
}
.dm-rail.open { transform: none; }
.rail-head { display: flex; align-items: center; gap: 10px; padding: 0 6px 14px; }
.rail-head h3 { font-family: "Lobster", cursive; font-size: 24px; margin-right: auto; }
.chat-x {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.18s;
}
.chat-x:hover { color: #fff; border-color: var(--gold-soft); transform: rotate(90deg); }
.rail-global, .rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 14px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.22s, transform 0.2s;
}
.rail-global:hover, .rail-item:hover { background: rgba(255, 255, 255, 0.05); transform: translateX(3px); }
.rail-global { border: 1px solid var(--line-soft); margin-bottom: 12px; }
.rail-glyph {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 175, 55, 0.07);
}
.rail-glyph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rail-main b { font-size: 14.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-main span { color: var(--text-dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-avatar { width: 40px; height: 40px; flex: 0 0 40px; }
.rail-list { flex: 1; overflow-y: auto; }
.rail-unread {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #d3382f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-item.has-unread b { color: #fff; }
.rail-empty { padding: 14px 10px; }

/* modals */
.chat-modal {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.chat-modal-card {
  width: 500px;
  max-width: 94vw;
  max-height: 84vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(30, 30, 33, 0.98), rgba(13, 13, 15, 0.98));
  border: 1px solid var(--gold-soft);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 22px;
  animation: popIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.chat-modal-card h3 { font-family: "Lobster", cursive; font-size: 23px; margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ng-friends { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ng-friend {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.ng-friend:hover { background: rgba(255, 255, 255, 0.045); }
.ng-friend b { flex: 1; font-weight: 400; font-size: 14.5px; }
.ng-friend input { accent-color: var(--gold); width: 17px; height: 17px; }
.g-rename { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.g-rename .glass-input { flex: 1; }
.g-members { display: flex; flex-direction: column; gap: 3px; }
.g-member { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 12px; transition: background 0.2s; }
.g-member:hover { background: rgba(255, 255, 255, 0.03); }
.g-name { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14.5px; }
.g-chip {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
}
.g-chip.blind { border-color: var(--line-soft); color: var(--text-dim); }
.g-actions { display: flex; gap: 6px; }
.g-act {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
}
.g-act:hover { color: var(--gold); border-color: var(--gold-soft); transform: translateY(-1px); }
.g-act.danger:hover { color: #ff8896; border-color: rgba(224, 69, 90, 0.5); }
.g-addables { display: flex; flex-wrap: wrap; gap: 8px; }
.g-addable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.25s;
}
.g-addable:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); }

/* shared media panel */
.shared-panel {
  position: absolute;
  top: 69px;
  right: 12px;
  z-index: 60;
  width: 400px;
  max-width: calc(100% - 24px);
  max-height: 60%;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(26, 26, 29, 0.98), rgba(12, 12, 14, 0.98));
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 16px;
  animation: popIn 0.25s ease both;
}
.shared-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shared-head h3 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.shared-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.shared-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, border-color 0.25s, box-shadow 0.3s;
}
.shared-cell:hover { transform: translateY(-2px); border-color: var(--gold-soft); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); }
.shared-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shared-glyph { color: var(--gold); }
.shared-glyph svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shared-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8px 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
  color: #ddd;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* fullscreen viewer */
.chat-viewer {
  position: fixed;
  inset: 0;
  z-index: 520;
  background: rgba(2, 2, 4, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease both;
}
.chat-viewer img, .chat-viewer video { max-width: 92vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); }
.viewer-x { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; font-size: 20px; }

/* pickers */
.picker {
  position: fixed;
  z-index: 460;
  width: 360px;
  max-height: 320px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(28, 28, 31, 0.98), rgba(13, 13, 15, 0.98));
  border: 1px solid var(--gold-soft);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  animation: popIn 0.22s ease both;
}
.emoji-opt {
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  font-size: 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.emoji-opt:hover { background: rgba(255, 255, 255, 0.07); transform: scale(1.22); }
.sticker-opt {
  width: 78px;
  height: 78px;
  border: 1px solid transparent;
  background: none;
  border-radius: 14px;
  cursor: pointer;
  padding: 6px;
  transition: background 0.2s, transform 0.2s, border-color 0.25s;
}
.sticker-opt img { width: 100%; height: 100%; }
.sticker-opt:hover { background: rgba(212, 175, 55, 0.07); border-color: var(--gold-soft); transform: scale(1.08) rotate(-2deg); }

/* mention autocomplete */
.mention-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 10px;
  z-index: 80;
  width: 280px;
  background: linear-gradient(180deg, rgba(28, 28, 31, 0.98), rgba(13, 13, 15, 0.98));
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
  padding: 6px;
  animation: popIn 0.18s ease both;
}
.mention-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.mention-opt b { font-weight: 500; font-size: 13.5px; }
.mention-opt i { color: var(--text-dim); font-size: 12px; font-style: normal; margin-left: auto; }
.mention-opt:hover, .mention-opt.sel { background: rgba(212, 175, 55, 0.1); }

@media (max-width: 980px) {
  .chat-side { display: none; }
  .toast { width: 330px; }
}

/* ==================== avatar frames (rank rings) ==================== */
/* Art standard: square image, avatar circle dead-center with a diameter
   of 62% of the art width. Overlaying at inset:-31% then wraps ANY
   avatar size on the site pixel-perfectly. */
.avatar-wrap { position: relative; display: inline-block; }
.avatar-frame {
  position: absolute;
  inset: -31%;
  width: 162%;
  height: 162%;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  animation: frameIn 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
@keyframes frameIn {
  from { opacity: 0; transform: scale(0.9) rotate(-3deg); }
  to { opacity: 1; transform: none; }
}
/* dashboard panel avatar: the absolute geometry moves onto the wrapper */
.pp-wrap {
  position: absolute;
  left: 22px;
  bottom: -62px;
  width: 160px;
  height: 160px;
  z-index: 2;
  display: block;
}
.pp-wrap .pp-avatar { position: relative; left: auto; bottom: auto; width: 100%; height: 100%; }
.hero-wrap { display: inline-block; }
.hero-wrap .hero-avatar { display: block; }

/* admin armory */
.frame-gallery { display: flex; flex-wrap: wrap; gap: 16px; }
.frame-card {
  position: relative;
  width: 122px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.3s;
}
.frame-card:hover { border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.frame-demo { position: relative; display: inline-block; width: 60px; height: 60px; }
.frame-demo-pfp {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3c3c42, #121215);
  border: 1px solid var(--line-soft);
}
.frame-name { font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.05em; text-align: center; }
.frame-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(15, 15, 17, 0.9);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: color 0.2s, border-color 0.2s, transform 0.15s;
}
.frame-del:hover { color: #ff8896; border-color: rgba(224, 69, 90, 0.5); transform: scale(1.12); }
.frame-select {
  background: #121214;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
}
.frame-select:hover, .frame-select:focus { border-color: var(--gold-soft); outline: none; }

/* ============================ HOSTING ============================ */

.host-intro { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.host-intro h2 { margin-bottom: 6px; }
.host-net { color: var(--gold); white-space: nowrap; }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.host-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; }
.host-empty h2 { font-family: "Lobster", cursive; font-size: 26px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 14px 0 8px; }
.host-cube { display: inline-block; width: 74px; height: 74px; color: var(--gold); opacity: 0.8; }
.host-cube svg { width: 100%; height: 100%; }

.game-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  padding: 18px;
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
.game-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}
.game-card:hover { transform: translateY(-3px); border-color: var(--gold-soft); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
.game-card { --accent: var(--gold); }
.game-card::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent); }
.game-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-soft)); }
.game-card.on { border-color: color-mix(in srgb, var(--accent) 32%, var(--line-soft)); }
.game-card.on:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent); }
.game-card .gc-glyph { color: var(--accent); }

.gc-head { display: flex; align-items: center; gap: 12px; }
.gc-glyph { width: 44px; height: 44px; flex: 0 0 44px; color: var(--gold); }
.gc-glyph.big { width: 54px; height: 54px; flex: 0 0 54px; }
.gc-glyph svg { width: 100%; height: 100%; }
.gc-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gc-title b { font-family: "Lobster", cursive; font-weight: 400; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-title span { color: var(--text-dim); font-size: 12px; }
.gc-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
.gc-dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.gc-status.running { color: var(--green); }
.gc-status.running .gc-dot { background: var(--green); animation: presencePulse 2.4s infinite; }
.gc-status.downloading .gc-dot, .gc-status.provisioning .gc-dot { background: var(--gold); animation: presencePulse 1.6s infinite; }
.gc-status.downloading, .gc-status.provisioning { color: var(--gold); }
.gc-status.crashed, .gc-status.error { color: #ff8896; }
.gc-status.crashed .gc-dot, .gc-status.error .gc-dot { background: #e0455a; }

.gc-body { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.gc-stat { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.gc-stat .k { color: var(--text-dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; width: 62px; }
.gc-stat .v { color: var(--text); }
.gc-membar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.gc-membar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 999px; transition: width 0.6s ease; }
.gc-off-note { color: var(--text-dim); font-size: 13px; }
.gc-address {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold);
  font-family: Consolas, monospace;
  font-size: 13.5px;
  cursor: copy;
  transition: background 0.2s, transform 0.15s, box-shadow 0.25s;
  align-self: flex-start;
}
.gc-address:hover { background: rgba(212, 175, 55, 0.14); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.gc-address.copied { background: rgba(74, 222, 128, 0.15); border-color: rgba(74, 222, 128, 0.5); color: var(--green); }
.gc-address svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.gc-address.alt { color: var(--text-dim); border-color: var(--line-soft); background: rgba(255, 255, 255, 0.03); }

.host-detail { width: 640px; }
.hd-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.hd-head .gc-title b { font-size: 24px; }
.hd-head .chat-x { margin-left: 8px; }
.hd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.hd-players { color: var(--text-dim); font-size: 13px; margin-top: 10px; }
.hd-address { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hd-address .k { color: var(--text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.hd-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.hd-console { margin-top: 18px; }
.hd-console h4 { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.hd-log {
  background: #08080a;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
  height: 210px;
  overflow-y: auto;
  font-family: Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #9aa08f;
  white-space: pre-wrap;
  word-break: break-word;
}
.hd-cmd { display: flex; gap: 10px; margin-top: 10px; }
.hd-cmd .glass-input { flex: 1; }
.mem-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mem-label { color: var(--text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.mem-row input[type="range"] { flex: 1; accent-color: var(--gold); }
.mem-row b { min-width: 56px; text-align: right; color: var(--gold); }

/* the Steam-style game shelf */
.create-card { width: 560px; }
.game-shelf { display: flex; flex-direction: column; gap: 12px; }
.shelf-tile {
  --accent: var(--gold);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform 0.2s ease, border-color 0.28s ease, box-shadow 0.3s ease, background 0.25s;
  overflow: hidden;
  position: relative;
}
.shelf-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-soft));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.shelf-poster {
  width: 128px;
  height: 80px;
  flex: 0 0 128px;
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #1c1c1e);
  background: #0c0c0d;
}
.shelf-poster img { width: 100%; height: 100%; object-fit: cover; }
.shelf-info { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.shelf-info b { font-family: "Lobster", cursive; font-weight: 400; font-size: 20px; }
.shelf-info i { color: color-mix(in srgb, var(--accent) 70%, #fff); font-style: normal; font-size: 12px; letter-spacing: 0.05em; }
.shelf-tag { color: var(--text-dim); font-size: 12px; line-height: 1.4; margin-top: 3px; }
.shelf-go {
  align-self: center;
  white-space: nowrap;
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.25s;
}
.shelf-tile:hover .shelf-go { opacity: 1; transform: none; }
.shelf-back {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 0 12px;
  transition: color 0.2s, transform 0.2s;
}
.shelf-back:hover { color: var(--gold); transform: translateX(-3px); }
.cfg-head { display: flex; align-items: center; gap: 14px; }
.cfg-poster {
  width: 96px;
  height: 60px;
  flex: 0 0 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, #1c1c1e);
}
.cfg-poster img { width: 100%; height: 100%; object-fit: cover; }
.cfg-head span:last-child { display: flex; flex-direction: column; gap: 3px; }
.cfg-head b { font-family: "Lobster", cursive; font-weight: 400; font-size: 22px; }
.cfg-head i { color: var(--text-dim); font-style: normal; font-size: 12.5px; }

/* pre-generation world options */
.cfg-opts { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.opt-row { display: flex; align-items: center; gap: 14px; }
.opt-row .mem-label { flex: 0 0 176px; }
.opt-row .frame-select { flex: 1; padding: 8px 10px; font-size: 13px; }
.opt-num {
  width: 108px;
  background: #121214;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.2s;
}
.opt-num:hover, .opt-num:focus { border-color: var(--gold-soft); outline: none; }
.opt-text { flex: 1; }
@media (max-width: 680px) {
  .opt-row { flex-wrap: wrap; }
  .opt-row .mem-label { flex: 1 1 100%; }
}

/* ================= impurity purge: identity + inputs ================= */

/* audit log lines with a face and a name */
.audit-line.rich {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 4px;
  border-radius: 10px;
  transition: background 0.2s;
}
.audit-line.rich:hover { background: rgba(255, 255, 255, 0.025); }
.audit-avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.audit-avatar .c-fallback { font-size: 14px; }
.audit-main { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; }
.audit-main b { color: var(--text); font-weight: 500; }
.audit-meta { color: var(--gold); font-style: normal; font-size: 12px; margin-left: 6px; opacity: 0.85; }
.audit-when { color: var(--text-dim); font-size: 11px; white-space: nowrap; }

/* profile picture: click/drop veil, same soul as the banner editor */
.pfp-drop {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  cursor: pointer;
  flex: 0 0 auto;
}
.pfp-drop .p-avatar.xl { display: block; transition: box-shadow 0.3s ease; }
.pfp-drop:hover .p-avatar.xl,
.pfp-drop.drag .p-avatar.xl { box-shadow: 0 0 30px rgba(212, 175, 55, 0.35); }
.pfp-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(5, 5, 7, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pfp-drop:hover .pfp-veil,
.pfp-drop.drag .pfp-veil,
.pfp-drop.busy .pfp-veil { opacity: 1; }
.pfp-veil .sb-cam { width: 38px; height: 38px; }
.pfp-veil .sb-cam svg { width: 18px; height: 18px; }
.pfp-drop.busy .sb-cam { animation: sbPulse 1.1s ease-in-out infinite; }
.pfp-cta { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
.pfp-drop.drag .pfp-veil { outline: 2px dashed var(--gold-soft); outline-offset: -6px; }

/* pretty file pickers — no more raw "Choose File" buttons */
.file-pick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px dashed var(--gold-soft);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.05);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  max-width: 320px;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.18s, box-shadow 0.3s;
}
.file-pick:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.09);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.4);
}
.file-pick input[type="file"] { display: none; }
.file-pick svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.file-pick .fp-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-pick.picked { border-style: solid; color: var(--gold); background: rgba(212, 175, 55, 0.1); }

/* ==================== the beauty round ==================== */

/* 1) the name: Pacifico — same soul, far kinder S. The star steps away
   from the word, goes gold, and twinkles. Poke it and it bursts. */
.logo, .logo-sm { font-family: "Pacifico", "Lobster", cursive; font-weight: 400; }
.logo-star {
  display: inline-block;
  margin-left: 0.22em;
  font-size: 0.55em;
  vertical-align: 0.5em;
  cursor: pointer;
  position: relative;
  background: linear-gradient(180deg, #ffe9a8, #d4af37 55%, #9a771f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.65));
  animation: starTwinkle 2.8s ease-in-out infinite;
}
.logo-star.sm { font-size: 0.5em; vertical-align: 0.6em; margin-left: 0.18em; }
@keyframes starTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50% { transform: scale(1.18) rotate(8deg); opacity: 1; }
}
.logo-star.burst { animation: starBurst 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes starBurst {
  0% { transform: scale(1); }
  35% { transform: scale(1.9) rotate(72deg); filter: drop-shadow(0 0 26px rgba(255, 233, 168, 1)); }
  100% { transform: scale(1) rotate(144deg); }
}
.star-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 8px 2px rgba(255, 233, 168, 0.9);
  pointer-events: none;
  animation: sparkFly 0.8s ease-out forwards;
}
@keyframes sparkFly {
  0% { transform: translate(-50%, -50%) rotate(var(--ang)) translateX(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(var(--ang)) translateX(52px); opacity: 0; }
}

/* 2) login + inputs: taller, wider, fluid — phone to TV */
.auth-card { width: clamp(400px, 36vw, 560px); max-width: calc(100vw - 32px); }
.auth-wrap .logo { font-size: clamp(56px, 6.5vw, 96px); }
.glass-input input {
  font-size: 15.5px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.glass-button { padding: 17px 20px; font-size: 15px; letter-spacing: 0.35em; }
.script-label { font-size: clamp(24px, 2vw, 32px); }
@media (min-width: 1900px) {
  /* TV / huge monitors: the world scales up instead of floating tiny */
  .auth-card { width: 640px; }
  .content { max-width: 1720px; }
  .cards { grid-template-columns: repeat(3, minmax(360px, 1fr)); }
}

/* 3) dashboard: cards sweep in, descriptions wait for the cursor */
.cards .card {
  animation: cardIn 0.6s cubic-bezier(0.2, 0.85, 0.3, 1.05) both;
  min-height: 172px;
}
.cards .card:nth-child(1) { animation-delay: 0.05s; }
.cards .card:nth-child(2) { animation-delay: 0.12s; }
.cards .card:nth-child(3) { animation-delay: 0.19s; }
.cards .card:nth-child(4) { animation-delay: 0.26s; }
.cards .card:nth-child(5) { animation-delay: 0.33s; }
.cards .card:nth-child(6) { animation-delay: 0.4s; }
.cards .card:nth-child(7) { animation-delay: 0.47s; }
.cards .card:nth-child(8) { animation-delay: 0.54s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 681px) {
  .card p {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .card:hover p, .card:focus-visible p { opacity: 1; transform: none; }
}

/* 4) avatars breathe — a slow living glow in the wearer's color */
/* the glow is painted ONCE (static box-shadow) — animating box-shadow
   can never be composited and repainted these elements every frame */
.avatar-btn, .hero-avatar, .pp-avatar, .pfp-drop .p-avatar.xl {
  box-shadow: 0 0 30px color-mix(in srgb, var(--pcolor, var(--gold)) 34%, transparent);
}

/* 5) banner + panel frames — ornaments that shoot outwards.
   NEW-ERA GEOMETRY (Part 40.2): the painterly art's transparent WINDOW is
   measured by frame-art/build.js and these overlays map that window onto
   the host box (with ~1.5% bleed so rails hug just outside the edges).
   Era standard windows (THE HORN CUT, Part 40.4) — banner: x 2.1..98.1% /
   y 23.8..93.9% of canvas (headroom = the top-corner horns); panel:
   x 5.6..96.6% / y 8.9..98.1%. New art sets must match (the forge warns
   on drift) or re-derive these numbers. */
.hero-v2::before { border-radius: 18px; }
.hero-v2.has-bframe { overflow: visible; }
.banner-frame {
  position: absolute;
  left: -3%;
  top: -35.7%;
  width: 105.7%;
  height: 145.5%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.5));
}
/* the gold script title rides ABOVE the crest (frame z 2) — League-style
   text-over-ornament instead of hiding behind the spire. Needs the 0-2-0
   specificity to beat `.hero-v2 > *` (z 1). */
.hero-v2 > .hero-title { z-index: 3; }
/* the ringed avatar rides ABOVE the banner frame too — the diadem's wing
   must never be buried under the border rail (Part 40.5.1). Name stays z 5
   so the script still reads over the ring's keel. Same law on the dashboard
   panel: the ring beats the panel frame (z 7). */
.hero-v2 > .avatar-wrap { z-index: 4; }
.profile-panel .avatar-wrap { z-index: 8; }
/* the name script rides above the ring's bottom keel too (avatar-frame z 4
   lives INSIDE .avatar-wrap, so a sibling z 5 wins the hero stack) */
.hero-v2 > .hero-name { z-index: 5; }
.profile-panel { overflow: visible; }
.panel-frame {
  position: absolute;
  left: -7%;
  top: -11.2%;
  width: 111.5%;
  height: 114.3%;
  pointer-events: none;
  z-index: 7;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}

/* 6) the game shelf, with room to breathe */
.create-card { width: 620px; position: relative; }
.create-x { position: absolute; top: 14px; right: 14px; }
.game-shelf { gap: 18px; }
.shelf-tile { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.shelf-poster { width: 100%; flex: none; height: 158px; border: none; border-radius: 15px 15px 0 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, #1c1c1e); }
.shelf-info { padding: 14px 18px 16px; gap: 4px; }
.shelf-info b { font-size: 23px; }
.shelf-tag { font-size: 12.5px; }
.shelf-go { position: absolute; right: 18px; bottom: 16px; align-self: auto; }
.shelf-tile:hover { transform: translateY(-3px) scale(1.012); }
.host-empty { padding: 46px 20px; }
.host-cube { width: 64px; height: 64px; }

/* 7) admin armory: kinds + slot stack */
.frame-kind {
  position: absolute;
  top: 7px;
  left: 9px;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px 7px;
}
.frame-kind.banner { color: var(--gold); border-color: var(--gold-soft); }
.frame-kind.panel { color: #9fb5ff; border-color: rgba(120, 140, 220, 0.4); }
.frame-demo.banner { width: 104px; height: 38px; }
.frame-demo.panel { width: 42px; height: 72px; }
.frame-demo-flat { width: 100%; height: 100%; object-fit: fill; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5)); }
.slot-stack { display: flex; flex-direction: column; gap: 5px; }
.slot-row { display: flex; align-items: center; gap: 7px; }
.slot-label { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); width: 44px; }
.slot-row .frame-select { font-size: 11px; padding: 3px 6px; max-width: 150px; }

@media (max-width: 680px) {
  .create-card, .host-detail { width: auto; }
  .shelf-tile { flex-wrap: wrap; }
  .shelf-poster { width: 100%; flex: 1 1 100%; height: 92px; }
  .shelf-go { display: none; }
}

/* ==================== responsive: tablets & phones ==================== */

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .content { padding-left: 18px; padding-right: 18px; }
  .hero-title { font-size: clamp(30px, 8vw, 44px); }
  .profile-panel { width: min(420px, calc(100vw - 24px)); right: 12px; }
  .host-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .content { padding: 14px 12px 40px; }
  .page-head { flex-wrap: wrap; gap: 8px; }
  .page-title { font-size: 30px; }
  .panel { padding: 18px 14px; margin-bottom: 16px; }

  /* dashboard */
  .topbar { padding: 12px 14px; gap: 10px; }
  .welcome { display: none; }
  .avatar-btn { width: 64px; height: 64px; }
  .avatar-fallback { font-size: 26px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .profile-panel { left: 12px; right: 12px; width: auto; }
  .pp-wrap, .pp-avatar { width: 118px; height: 118px; }
  .pp-wrap { bottom: -46px; }
  .pp-body { padding-top: 58px; }
  .pp-stats { grid-template-columns: 1fr 1fr; }

  /* profile hero */
  .hero-avatar { width: 128px; height: 128px; flex: 0 0 128px; }
  .hero-name .pp-display { font-size: 26px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* lists & tables */
  .player-row, .file-row { flex-wrap: wrap; row-gap: 8px; }
  .p-actions { width: 100%; justify-content: flex-end; display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-table { display: block; overflow-x: auto; }
  .search-form { flex-wrap: wrap; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* account style editor */
  .style-banner { height: 150px; }
  .sb-avatar { width: 56px; height: 56px; flex: 0 0 56px; }
  .sb-name { font-size: 20px; }
  .avatar-editor { gap: 14px; }

  /* chat on a phone: the app takes the screen */
  .chat-content { height: calc(100dvh - 16px); padding: 8px 8px 10px; }
  .chat-shell { gap: 0; }
  .chat-top { padding: 10px 10px; gap: 9px; }
  .chat-title { font-size: 19px; }
  .chat-sub { display: none; }
  .chat-top-btn span { display: none; }
  .chat-top-btn { padding: 8px; }
  .chat-back { display: none; }
  .dm-launcher { padding: 8px 10px; }
  .chat-scroll { padding: 12px 10px 6px; }
  .msg-row { padding-left: 46px; }
  .m-text.jumbo { font-size: 36px; }
  .m-image { max-width: 92%; }
  .m-video { max-width: 94%; }
  .chat-composer { padding: 8px 8px 10px; gap: 6px; }
  .comp-btn { width: 36px; height: 36px; flex: 0 0 36px; }
  .comp-send { width: 40px; height: 40px; flex: 0 0 40px; }
  .composer-input { padding: 7px 12px; }
  .composer-input textarea { font-size: 16px; } /* stops iOS auto-zoom */
  .dm-rail { width: calc(100vw - 34px); }
  .picker { width: min(360px, calc(100vw - 20px)); }
  .shared-panel { width: calc(100vw - 40px); right: 8px; }

  /* toasts + modals */
  .toast-stack { right: 10px; bottom: 10px; left: 10px; }
  .toast { width: auto; max-width: none; }
  .chat-modal { padding: 10px; }
  .chat-modal-card { padding: 16px; }

  /* hosting */
  .host-intro { flex-direction: column; align-items: flex-start; }
  .hd-cmd { flex-wrap: wrap; }
}

/* ---------- login doom: the skeleton in the darkness ----------
   Wrong username/password on /login wakes this. The whole page fades to a
   black-and-white old-camera grade (grain, vignette, projector flicker,
   frame jitter) while the skull develops out of the darkness behind the
   glass card — screen blend melts its black canvas into ours. */

/* the doom scene must never spawn a scrollbar — the jitter + oversized
   layers were leaking a white strip down the right edge. Sealed. */
body.doom { overflow: hidden; }
.doom-skull-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
/* the wrap carries size + motion so the burning eyes ride the skull */
.doom-skull-wrap {
  position: relative;
  height: min(96vh, 124vw);
  aspect-ratio: 736 / 952;
  opacity: 0;
  transform: scale(1.14) translateY(2vh);
  transition: opacity 3s ease, transform 6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.doom .doom-skull-wrap {
  opacity: 0.88;
  transform: scale(1) translateY(0);
  animation: doomLoom 7s ease-in-out 6s infinite alternate;
}
body.doom.doom-l2 .doom-skull-wrap,
body.doom.doom-l3 .doom-skull-wrap {
  opacity: 0.97;
  animation: doomLoom2 4.5s ease-in-out 6s infinite alternate;
}
@keyframes doomLoom {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.035) translateY(-0.6vh); }
}
@keyframes doomLoom2 {
  from { transform: scale(1.06) translateY(0); }
  to { transform: scale(1.12) translateY(-1vh); }
}
.doom-skull {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(0.92) contrast(1.06);
  /* feather the art's rectangle into the void — no visible image edges */
  -webkit-mask-image: radial-gradient(ellipse 68% 64% at 50% 46%, #000 52%, transparent 97%);
  mask-image: radial-gradient(ellipse 68% 64% at 50% 46%, #000 52%, transparent 97%);
}
body.doom-l2 .doom-skull,
body.doom-l3 .doom-skull { filter: brightness(1.02) contrast(1.15); }

/* mistake 2: the eyes ignite */
.doom-eye {
  position: absolute;
  top: 37.5%; /* socket centers measured at (37%, 43.5%) and (63%, 43.5%) of the art */
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 30, 0.95) 0%, rgba(255, 0, 0, 0.5) 40%, transparent 70%);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.doom-eye.left { left: 30.8%; }
.doom-eye.right { left: 57%; }
body.doom-l2 .doom-eye,
body.doom-l3 .doom-eye {
  opacity: 1;
  animation: eyeBurn 2.4s ease-in-out infinite alternate;
}
@keyframes eyeBurn {
  from { filter: blur(3px) brightness(0.9); transform: scale(1); }
  to { filter: blur(4.5px) brightness(1.5); transform: scale(1.15); }
}

/* the login card floats above the skull; its backdrop blur ghosts him.
   NB: the grade lands on .auth-wrap + .waves, never on .page — a filter
   there would become the containing block for these fixed layers. */
.auth-wrap { position: relative; z-index: 2; }
.auth-wrap, .waves { transition: filter 2s ease; }
body.doom .auth-wrap,
body.doom .waves {
  filter: grayscale(1) contrast(1.18) brightness(0.78);
}
/* mistake 2+: the footage degrades further */
body.doom-l2 .auth-wrap,
body.doom-l2 .waves,
body.doom-l3 .auth-wrap,
body.doom-l3 .waves {
  filter: grayscale(1) contrast(1.32) brightness(0.6);
}
body.doom .auth-wrap { animation: doomJitter 0.9s steps(2) infinite; }
body.doom-l2 .auth-wrap,
body.doom-l3 .auth-wrap { animation: doomJitter 0.45s steps(2) infinite; }
@keyframes doomJitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(0.4px, -0.5px); }
  50% { transform: translate(-0.4px, 0.4px); }
  75% { transform: translate(0.3px, 0.5px); }
  100% { transform: translate(0, 0); }
}

/* old-camera pass sits over EVERYTHING, even the card */
.doom-fx { position: fixed; inset: 0; z-index: 900; pointer-events: none; opacity: 0; transition: opacity 2s ease; }
body.doom .doom-fx { opacity: 1; }
.doom-grain {
  position: absolute;
  inset: -100px; /* room for the translate() grain jitter */
  opacity: 0.11; /* any higher lifts the blacks into grey fog — darkness must stay dark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0.6 0.6 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: doomGrain 0.5s steps(4) infinite;
}
/* translate the oversized grain layer (inset:-80px gives it room) —
   background-position repainted the whole viewport every step */
@keyframes doomGrain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-70px, 40px); }
  50% { transform: translate(45px, -60px); }
  75% { transform: translate(-30px, -85px); }
  100% { transform: translate(60px, 70px); }
}
.doom-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 46%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(rgba(0, 0, 0, 0.14), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.2));
}
.doom-flicker {
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: doomFlicker 3.7s steps(1) infinite;
}
@keyframes doomFlicker {
  0% { opacity: 0; }
  7% { opacity: 0.05; }
  8% { opacity: 0; }
  9% { opacity: 0.09; }
  10% { opacity: 0; }
  46% { opacity: 0.04; }
  47% { opacity: 0; }
  48% { opacity: 0.07; }
  50% { opacity: 0; }
  81% { opacity: 0.05; }
  82% { opacity: 0; }
  83% { opacity: 0.1; }
  84% { opacity: 0; }
  85% { opacity: 0.04; }
  86% { opacity: 0; }
}

/* a red haze seeps in with the second mistake */
.doom-redwash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 90% 80% at 50% 42%, rgba(160, 10, 5, 0.22) 0%, rgba(90, 0, 0, 0.12) 55%, transparent 80%);
  opacity: 0;
  transition: opacity 3s ease;
}
body.doom-l2 .doom-redwash,
body.doom-l3 .doom-redwash { opacity: 1; }
body.doom-l2 .form-error,
body.doom-l3 .form-error { color: #ff3b2e; text-shadow: 0 0 12px rgba(255, 30, 20, 0.5); }

/* mistake 3: IT COMES FOR YOU */
.doom-jump {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.55);
}
.doom-jump.go { display: flex; }
.doom-jump img {
  height: 165vh;
  max-width: none;
  mix-blend-mode: screen;
  filter: sepia(1) saturate(4.5) hue-rotate(-38deg) contrast(1.35) brightness(1.1);
  animation: jumpIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: 50% 42%;
}
@keyframes jumpIn {
  0% { transform: scale(0.35); opacity: 0; }
  14% { transform: scale(1.18); opacity: 1; }
  26% { transform: scale(1.06); opacity: 1; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1.24); opacity: 0; }
}
.doom-jump-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 40, 25, 0.55), rgba(120, 0, 0, 0.25) 55%, transparent 80%);
  animation: jumpFlash 0.9s ease-out forwards;
}
@keyframes jumpFlash {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}
.doom-jump-eye {
  position: absolute;
  top: 34.5vh; /* mapped to the 165vh jump skull's sockets */
  width: 9vh;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 40, 1) 0%, rgba(255, 0, 0, 0.6) 45%, transparent 72%);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: jumpIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.doom-jump-eye.left { left: calc(50% - 21vh); }
.doom-jump-eye.right { left: calc(50% + 12vh); }
body.doom-shake { animation: doomShake 0.5s steps(2) 3; }

/* the void that swallows them after the third mistake */
.doom-blackout {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: all;
}
.doom-blackout.on { opacity: 1; }
@keyframes doomShake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-7px, 5px); }
  50% { transform: translate(6px, -6px); }
  75% { transform: translate(-5px, -4px); }
  100% { transform: translate(0, 0); }
}

/* under doom even the gold goes grey — everything in the frame is old film */
body.doom .form-error { letter-spacing: 0.04em; }
body.doom .music-toggle { color: #a8a8a8; }

/* the little speaker — glass, gold, out of the way, above the film pass */
/* the speaker + its slide-out volume live in one fixed dock */
.music-dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 950;
  display: flex;
  align-items: center;
}
/* the volume pill slides open to the LEFT when you hover the dock (or focus
   the slider). Gold fill on black — same theme as the speaker. */
.music-vol {
  display: flex;
  align-items: center;
  height: 42px;
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(18, 18, 20, 0.66);
  backdrop-filter: blur(10px);
  transition: width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease, margin-right 0.28s ease, padding 0.28s ease;
}
.music-dock:hover .music-vol,
.music-dock:focus-within .music-vol {
  width: 132px;
  opacity: 1;
  pointer-events: auto;
  margin-right: 10px;
  padding: 0 14px;
  border-color: var(--line-soft);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.15);
}
.music-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 104px;
  height: 5px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  /* --vol is the gold-filled %, set live by music.js */
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) var(--vol, 35%), rgba(255, 255, 255, 0.14) var(--vol, 35%), rgba(255, 255, 255, 0.14) 100%);
}
.music-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #17171a;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  cursor: grab;
}
.music-vol-range::-webkit-slider-thumb:active { cursor: grabbing; }
.music-vol-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #17171a;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  cursor: grab;
}
.music-vol-range::-moz-range-track { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); }
.music-vol-range::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--gold); }

.music-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 950;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(18, 18, 20, 0.66);
  backdrop-filter: blur(10px);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
/* inside the dock the button rejoins the flow so the volume pill can sit
   beside it (the dock is the fixed anchor now) */
.music-dock .music-toggle { position: static; right: auto; bottom: auto; flex: 0 0 auto; }
.music-toggle svg { width: 21px; height: 21px; }
.music-toggle:hover { opacity: 1; box-shadow: 0 0 14px rgba(212, 175, 55, 0.25); }
.music-toggle .mt-slash { display: none; }
.music-toggle.off { color: var(--text-dim); }
.music-toggle.off .mt-wave { display: none; }
.music-toggle.off .mt-slash { display: block; }

/* respect reduced-motion players: the grade still lands, the shaking doesn't */
@media (prefers-reduced-motion: reduce) {
  body.doom .auth-wrap { animation: none; }
  .doom-grain { animation: none; }
  .doom-flicker { animation: none; }
  body.doom .doom-skull-wrap { animation: none; }
  body.doom-shake { animation: none; }
}

/* ---------- site-wide music + drops-everywhere (2026-07-07) ---------- */

/* toasts float above the speaker so neither hides the other */
body:has(.music-toggle) .toast-stack { bottom: 70px; }

/* any .file-pick lights up when a file hovers over it */
.file-pick.drag {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
  background: rgba(212, 175, 55, 0.07);
}

/* whole-panel dropzones (zip upload) */
.dropzone { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.dropzone.drag {
  border-color: var(--gold-soft);
  box-shadow: 0 0 0 1px var(--gold-soft), 0 0 28px rgba(212, 175, 55, 0.22) inset;
}

/* ---------- the position editor: perfect the angle ---------- */
.crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.crop-modal.hidden { display: none; }
.crop-card {
  background: rgba(16, 16, 18, 0.92);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
  padding: 20px 22px;
  width: min(620px, 94vw);
  position: relative;
  overflow: hidden;
}
.crop-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.crop-card h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.crop-viewport {
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--line-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport.round { width: min(280px, 74vw); aspect-ratio: 1; border-radius: 14px; }
.crop-viewport.wide { width: min(560px, 88vw); aspect-ratio: 1600 / 560; border-radius: 12px; }
.crop-viewport img {
  position: absolute;
  top: 0; left: 0;
  max-width: none;
  pointer-events: none;
}
/* the circle you'll actually live inside (pfp) */
.crop-viewport .crop-ring { position: absolute; inset: 0; pointer-events: none; display: none; }
.crop-viewport.round .crop-ring {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.55);
  border: 1.5px solid rgba(212, 175, 55, 0.65);
}
.crop-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 2px 4px;
}
.crop-hint { color: var(--text-dim); font-size: 12.5px; flex: 1; }
#cropZoom {
  -webkit-appearance: none;
  appearance: none;
  width: 170px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
#cropZoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  cursor: pointer;
}
#cropZoom::-moz-range-thumb {
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
}
.crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* ================= GUHENSY COCKPIT: pilot the bot from the web ================ */

/* the four doors */
.cockpit-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.cockpit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, rgba(28, 28, 31, 0.92), rgba(14, 14, 16, 0.92));
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.cockpit-card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.75), transparent);
}
.cockpit-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 22px rgba(212, 175, 55, 0.12);
}
.cockpit-card .ck-glyph {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold);
}
.cockpit-card .ck-glyph svg { width: 22px; height: 22px; }
.ck-name { font-size: 15.5px; font-weight: 500; letter-spacing: 0.03em; }
.ck-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.ck-live { color: var(--green); font-weight: 500; }
.cockpit-card.hot { border-color: rgba(74, 222, 128, 0.35); }
.cockpit-card.hot .ck-glyph { color: var(--green); background: rgba(74, 222, 128, 0.08); box-shadow: 0 0 26px rgba(74, 222, 128, 0.3); }
.cockpit-card.hot.gold { border-color: var(--gold-soft); }
.cockpit-card.hot.gold .ck-glyph { color: var(--gold); background: rgba(212, 175, 55, 0.1); }

/* ---------------- store ---------------- */
.wallet-bar { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.wallet-cell { display: flex; flex-direction: column; gap: 2px; }
.wallet-cell .k, .wallet-inv .k {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.wallet-cell .v { font-size: 22px; font-weight: 500; }
.wallet-cell .v.gold { color: var(--gold); text-shadow: 0 0 14px rgba(212, 175, 55, 0.35); }
.wallet-cell .v.red { color: var(--red); }
.wallet-inv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.inv-chip {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}
.store-item {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  padding: 15px 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.store-item:hover { border-color: var(--gold-soft); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35); }
.store-item.direct { opacity: 0.85; }
.si-head { display: flex; align-items: center; gap: 10px; }
.si-emoji { font-size: 22px; }
.si-name { font-weight: 500; font-size: 15px; }
.si-price { margin-left: auto; color: var(--gold); font-size: 13.5px; white-space: nowrap; }
.si-desc { color: var(--text-dim); font-size: 13px; line-height: 1.45; flex: 1; }
.si-foot { display: flex; align-items: center; gap: 10px; }
.si-meta { color: var(--text-dim); font-size: 11.5px; flex: 1; line-height: 1.4; }
.si-direct { font-size: 11.5px; color: var(--amber); }
.gold-t { color: var(--gold); }
.mini-btn.busy { opacity: 0.6; pointer-events: none; }

/* ---------------- tournaments ---------------- */
.t-rail { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.t-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.t-chip:hover { border-color: var(--gold-soft); }
.t-chip.on { border-color: var(--gold); box-shadow: 0 0 14px rgba(212, 175, 55, 0.22); }
.t-chip .tc-key { color: var(--gold); font-weight: 500; }
.t-chip .tc-size { font-size: 10.5px; letter-spacing: 0.12em; color: var(--text-dim); }
.tc-phase { font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); }
.tc-phase.live { color: var(--green); font-weight: 600; animation: livePulse 1.6s ease-in-out infinite; }
.tc-phase.joinable { color: var(--gold); }
.t-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.t-badge {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-dim);
}
.t-badge.live { color: var(--green); border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 12px rgba(74, 222, 128, 0.25); animation: livePulse 1.6s ease-in-out infinite; }
.t-badge.join { color: var(--gold); border-color: var(--gold-soft); }
.t-joined { color: var(--green); font-size: 13px; }
.t-facts { display: flex; gap: 18px; flex-wrap: wrap; color: var(--text-dim); font-size: 13px; margin-top: 10px; }
.t-fighters { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.t-fighter {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-dim);
  padding: 4px 10px 4px 4px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03);
}
.t-game-tabs { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.t-tab {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent;
  color: var(--text-dim); font-size: 13px; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.t-tab:hover { color: var(--text); }
.t-tab.on { color: var(--gold); border-color: var(--gold-soft); }
.t-tab.running .tt-live { color: var(--green); font-size: 11px; }
.t-tab .tt-mode { opacity: 0.6; font-size: 11px; }
.t-tab .tt-done { font-size: 11px; opacity: 0.55; }

/* the deck itself */
.t-stage-wrap { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.t-stage {
  position: relative;
  flex: 1;
  height: min(430px, 68vw);
  perspective: 1200px;
  overflow: hidden;
  touch-action: pan-y;
}
.t-card {
  position: absolute;
  left: 50%; top: 50%;
  width: min(420px, 78%);
  height: 92%;
  --a: max(var(--off), calc(-1 * var(--off)));
  transform: translate(calc(-50% + var(--off) * 58%), -50%) scale(calc(1 - 0.13 * var(--a)));
  border-radius: 20px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(170deg, rgba(26, 26, 29, 0.96), rgba(14, 14, 16, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  opacity: calc(1 - 0.55 * var(--a));
  z-index: calc(10 - var(--a));
  cursor: pointer;
  overflow: hidden;
}
.t-card.focus { cursor: default; }
.t-card::before {
  content: "";
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}
.t-card.live.focus {
  border-color: rgba(74, 222, 128, 0.65);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 38px rgba(74, 222, 128, 0.34), inset 0 0 26px rgba(74, 222, 128, 0.06);
}
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.t-card.done.focus { border-color: rgba(255, 255, 255, 0.16); }
.fc-top { display: flex; align-items: center; gap: 10px; }
.fc-badge { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-dim); }
.fc-badge.live { color: var(--green); border-color: rgba(74, 222, 128, 0.55); animation: livePulse 1.6s ease-in-out infinite; }
.fc-badge.next { color: var(--gold); border-color: var(--gold-soft); }
.fc-game { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.fc-game i { font-style: normal; opacity: 0.6; font-size: 11px; margin-left: 4px; }
.fc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 0;
}
.fc-team { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.fc-player { display: flex; align-items: center; gap: 9px; max-width: 100%; }
.fc-player .p-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.fc-name { font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-pts { color: var(--gold); font-weight: 600; font-size: 15px; }
.fc-vs {
  font-family: "Pacifico", cursive;
  color: var(--gold);
  font-size: 21px;
  text-shadow: 0 0 16px rgba(212, 175, 55, 0.5);
}
.fc-foot { text-align: center; color: var(--text-dim); font-size: 11.5px; letter-spacing: 0.1em; }
.fc-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.t-arrow {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(20, 20, 22, 0.7);
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.t-arrow:hover { border-color: var(--gold-soft); box-shadow: 0 0 14px rgba(212, 175, 55, 0.22); }
.t-counter { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 10px; letter-spacing: 0.12em; }

/* ---------------- polls ---------------- */
.poll-card.open { position: relative; }
.poll-card.risky { border-color: rgba(224, 69, 90, 0.35); }
.poll-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.poll-key { color: var(--gold); font-weight: 500; font-size: 13px; }
.poll-risk { color: var(--red); font-size: 11.5px; letter-spacing: 0.06em; font-weight: 600; }
.poll-risk.small { font-size: 10px; }
.poll-when { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.poll-q { font-size: 18px; font-weight: 500; margin: 4px 0 14px; }
.poll-q.sm { font-size: 14.5px; margin: 2px 0 10px; }
.poll-options { display: flex; flex-direction: column; gap: 9px; }
.poll-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
button.poll-opt.vote { cursor: pointer; }
button.poll-opt.vote:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(212, 175, 55, 0.18); transform: translateX(3px); }
.poll-opt .po-n {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}
.poll-opt.static.mine { border-color: var(--gold); box-shadow: 0 0 16px rgba(212, 175, 55, 0.2); }
.po-mine { margin-left: auto; color: var(--gold); font-size: 11.5px; letter-spacing: 0.08em; }
.poll-closed { padding: 14px 2px 10px; border-top: 1px solid var(--line-soft); }
.poll-closed:first-of-type { border-top: none; }
.poll-bar-row { display: flex; align-items: center; gap: 12px; margin: 6px 0; font-size: 13px; }
.pb-label { width: 32%; min-width: 120px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.poll-bar-row.correct .pb-label { color: var(--green); }
.pb-track { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pb-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.poll-bar-row.correct .pb-fill { background: linear-gradient(90deg, rgba(74, 222, 128, 0.6), var(--green)); }
.pb-count { width: 30px; text-align: right; color: var(--text-dim); }

/* ---------------- match history ---------------- */
.match-row.zeroed { opacity: 0.65; }
.mr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mr-game { font-size: 15.5px; font-weight: 500; color: var(--gold); }
.mr-mode { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-dim); }
.mr-meta { margin-left: auto; color: var(--text-dim); font-size: 12px; }
.mr-meta a { color: var(--gold); text-decoration: none; }
.mr-zero { color: var(--amber); font-size: 11px; letter-spacing: 0.1em; }
.mr-teams { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mr-team { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mr-player { display: inline-flex; align-items: center; gap: 8px; }
.mr-name { font-size: 13.5px; }
.mr-pts { color: var(--gold); font-weight: 600; font-size: 13.5px; }
.mr-vs { font-family: "Pacifico", cursive; color: var(--gold); font-size: 16px; opacity: 0.8; }

/* action toasts */
.toast.act.ok { border-color: rgba(74, 222, 128, 0.5); }
.toast.act.ok .toast-title { color: var(--green); }
.toast.act.bad { border-color: rgba(224, 69, 90, 0.5); }
.toast.act.bad .toast-title { color: var(--red); }

@media (max-width: 680px) {
  .cockpit-deck { grid-template-columns: 1fr 1fr; }
  .t-stage { height: 74vw; }
  .t-card { width: 86%; }
  .t-arrow { width: 38px; height: 38px; flex-basis: 38px; }
  .wallet-inv { margin-left: 0; width: 100%; }
}

/* ============ COCKPIT v2: create, use, bank — full piloting ============ */

/* the agree door */
.agree-panel { border-color: var(--gold-soft); }
.rules-box {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 18px;
  margin: 10px 0 14px;
}
.rules-box p { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; margin: 0; }
.agree-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mini-btn.big { padding: 12px 22px; font-size: 14.5px; }

/* the treasury */
.tr-grid { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-end; }
.tr-cell { display: flex; flex-direction: column; gap: 2px; }
.tr-cell .k, .tr-form .k {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.tr-cell .v { font-size: 24px; font-weight: 500; }
.tr-cell .v.gold { color: var(--gold); text-shadow: 0 0 14px rgba(212, 175, 55, 0.35); }
.tr-form { display: flex; flex-direction: column; gap: 7px; }
.tr-form.wide { flex: 1; min-width: 280px; }
.tr-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fee-note { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--amber); font-size: 11px; }
.fee-note b { color: var(--gold); }
.glass-input.tiny { width: 120px; }
.glass-input.tiny input { padding: 8px 12px; font-size: 14px; }

/* the poll composer */
.composer { border-color: rgba(212, 175, 55, 0.28); }
.composer.risky-mode { border-color: rgba(224, 69, 90, 0.4); }
.cmp-kind-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cmp-kind {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cmp-kind span { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.cmp-kind.on { border-color: var(--gold); box-shadow: 0 0 16px rgba(212, 175, 55, 0.2); }
.cmp-kind.risky.on { border-color: var(--red); box-shadow: 0 0 16px rgba(224, 69, 90, 0.25); color: var(--red); }
.cmp-options { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.cmp-opt { position: relative; }
.cmp-opt-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px; line-height: 1;
}
.cmp-opt-x:hover { color: var(--red); border-color: rgba(224, 69, 90, 0.5); }
.cmp-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cmp-bet { display: inline-flex; align-items: center; gap: 8px; }
.cmp-bet.hidden { display: none; }

/* the tournament forge */
.forge-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.forge-card { width: min(680px, 94vw); max-height: 90vh; overflow-y: auto; }
.forge-sizes { display: flex; gap: 12px; margin: 12px 0 16px; }
.forge-size {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.forge-size b { font-size: 16px; }
.forge-size span { font-size: 12px; color: var(--text-dim); }
.forge-size.on { border-color: var(--gold); box-shadow: 0 0 18px rgba(212, 175, 55, 0.22); }
.forge-size.on b { color: var(--gold); }
.forge-games { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.forge-game {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.forge-game .fg-name { flex: 1; min-width: 140px; }
.forge-game .cmp-opt-x { position: static; transform: none; flex: 0 0 24px; }
.forge-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.forge-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }

/* the use-modal */
.use-card { width: min(520px, 94vw); }
.use-field { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; }
.use-field.hidden { display: none; }
.use-field .k { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.use-field .k i { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--amber); }
.use-self { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 13px; margin-top: 4px; }
.use-self.hidden { display: none; }
#useNote:empty { display: none; }
#useNote { color: var(--red); }
.si-btns { display: inline-flex; gap: 7px; }

/* toast retry button (run without rewards etc.) */
.toast-act-btn { margin-top: 8px; align-self: flex-start; }

/* ============ COCKPIT v3: the luxury pass ============ */

/* ---- the player picker: type 2 letters, faces appear ---- */
.player-pick { position: relative; min-width: 240px; flex: 1; max-width: 340px; }
.player-pick.pp-disabled { opacity: 0.45; pointer-events: none; }
.pp-input.hidden { display: none; }
.pp-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 60;
  background: rgba(16, 16, 18, 0.97);
  border: 1px solid var(--gold-soft);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  animation: ppIn 0.16s ease;
}
@keyframes ppIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pp-results.hidden { display: none; }
.pp-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 13px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.pp-row:hover { background: rgba(212, 175, 55, 0.1); }
.pp-row .p-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.pp-none { padding: 11px 14px; color: var(--text-dim); font-size: 12.5px; }
.pp-chosen {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.07);
  font-size: 13.5px;
}
.pp-chosen.hidden { display: none; }
.pp-chosen .p-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.pp-x {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1;
}
.pp-x:hover { color: var(--red); }

/* ---- effects chips (blessed / cursed / pepsi) ---- */
.effects-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.effect-chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.07);
  font-size: 13px;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.24);
}
.effect-chip i { font-style: normal; color: var(--text-dim); font-size: 11.5px; }

/* ---- the obligations wall ---- */
.ob-held { font-size: 12px; color: var(--gold); margin-left: 10px; letter-spacing: 0.02em; }
.ob-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--line-soft);
}
.ob-row:first-of-type { border-top: none; }
.ob-row.locked { opacity: 0.85; }
.ob-icon { font-size: 22px; flex: 0 0 auto; margin-top: 2px; }
.ob-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ob-title { font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-badge {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--text-dim);
}
.ob-badge.open { color: var(--green); border-color: rgba(74, 222, 128, 0.45); animation: livePulse 1.8s ease-in-out infinite; }
.ob-badge.locked { color: var(--red); border-color: rgba(224, 69, 90, 0.45); }
.ob-badge.me { color: var(--amber); border-color: rgba(255, 190, 90, 0.4); }
.ob-badge.free { color: var(--green); border-color: rgba(74, 222, 128, 0.4); }
.ob-desc { color: var(--text-dim); font-size: 13px; font-style: italic; }
.ob-targets { display: flex; gap: 6px; flex-wrap: wrap; }
.ob-t {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--text-dim);
}
.ob-t.obligated { border-color: rgba(255, 190, 90, 0.35); color: var(--amber); }
.ob-t.exempt { border-color: rgba(74, 222, 128, 0.3); color: var(--green); text-decoration: line-through; }
.ob-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: relative; }
.ob-when { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }
.ob-counter-list {
  position: absolute;
  top: 100%; right: 0;
  z-index: 50;
  margin-top: 6px;
  background: rgba(16, 16, 18, 0.97);
  border: 1px solid rgba(224, 69, 90, 0.4);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  min-width: 190px;
  animation: ppIn 0.16s ease;
}

/* ---- awaiting-answer polls ---- */
.poll-card.awaiting { border-color: rgba(255, 190, 90, 0.4); }
.poll-await-badge {
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber);
  padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 190, 90, 0.4);
  animation: livePulse 2s ease-in-out infinite;
}
button.poll-opt.answer { cursor: pointer; }
button.poll-opt.answer:hover { border-color: var(--amber); box-shadow: 0 0 16px rgba(255, 190, 90, 0.2); transform: translateX(3px); }
.po-truth { margin-left: auto; color: var(--amber); font-size: 11px; opacity: 0; transition: opacity 0.2s ease; }
button.poll-opt.answer:hover .po-truth { opacity: 1; }

/* ---- match history filters ---- */
.match-filters {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.mf-search { max-width: 220px; }
.mf-chip {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-soft); background: transparent;
  color: var(--text-dim); font-size: 12.5px; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mf-chip:hover { color: var(--text); }
.mf-chip.on { color: var(--gold); border-color: var(--gold-soft); box-shadow: 0 0 10px rgba(212, 175, 55, 0.15); }
.match-row.hidden { display: none; }

/* ---- flash cards v2: duels, teams, arenas ---- */
.t-bench { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 2px; }
.t-bench:empty { display: none; }

.fc-duel {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; width: 100%;
}
.fc-side { display: flex; flex-direction: column; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.fc-duel .fc-vs { flex: 0 0 auto; }
.fc-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.fc-p.lg .p-avatar { width: 76px; height: 76px; }
.fc-p.md .p-avatar { width: 48px; height: 48px; }
.fc-p.sm .p-avatar { width: 40px; height: 40px; }
.fc-p .fc-name { font-size: 14px; font-weight: 500; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-p.sm .fc-name { font-size: 12px; max-width: 92px; }
.fc-p .fc-pts { color: var(--gold); font-weight: 600; font-size: 14px; }
.fc-p.win .p-avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(212, 175, 55, 0.55); border-radius: 50%; }
.fc-p.win .fc-name { color: var(--gold); }
.fc-crown {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%) rotate(-12deg);
  font-size: 16px;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.7));
}
.fc-arena { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.fc-arena-label { font-size: 10px; letter-spacing: 0.22em; color: var(--text-dim); }
.fc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 12px 8px;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

/* live card: rotating gold-green aura + floating breath + beacon */
.t-card.live.focus {
  animation: fcFloat 5.5s ease-in-out infinite;
}
/* translateY, never margin-top — margins re-run layout every frame */
@keyframes fcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.t-card.live.focus::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1.5px;
  background: conic-gradient(from var(--sweep, 0deg), transparent 0 70%, rgba(74, 222, 128, 0.9) 82%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fcSweep 3.2s linear infinite;
  pointer-events: none;
}
@property --sweep { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes fcSweep { to { --sweep: 360deg; } }
.fc-beacon {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
  box-shadow: 0 0 8px var(--green);
  animation: livePulse 1.2s ease-in-out infinite;
}
/* played cards keep their dignity: a stamp, not a glow */
.t-card.done .fc-badge.done { background: rgba(255, 255, 255, 0.04); }
.t-card.done.focus .fc-body { opacity: 0.92; }

/* the operator's bench on the card */
.fc-score-open { align-self: center; margin-bottom: 10px; }
.fc-score {
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 5;
  background: rgba(10, 10, 12, 0.97);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.55);
  animation: ppIn 0.18s ease;
  max-height: 78%;
  overflow-y: auto;
}
.fcs-head { font-size: 12px; color: var(--text-dim); margin-bottom: 9px; }
.fcs-head b { color: var(--gold); }
.fcs-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.fcs-name { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcs-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold);
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.fcs-btn:hover { box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
.fcs-val { width: 22px; text-align: center; font-weight: 600; color: var(--gold); }
.fcs-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fcs-total { font-size: 12.5px; color: var(--text-dim); flex: 1; }

@media (max-width: 680px) {
  .fc-p.lg .p-avatar { width: 58px; height: 58px; }
  .fc-p.md .p-avatar { width: 40px; height: 40px; }
  .player-pick { min-width: 0; width: 100%; max-width: none; }
  .ob-row { flex-wrap: wrap; }
  .ob-side { align-items: flex-start; }
}

/* ---------- perf + squash round (2026-07-07 night) ---------- */

/* THE SQUASH FIX: base .p-avatar carries flex: 0 0 42px — inside the
   flash cards' column layouts that 42px basis clamps the HEIGHT while
   the width override wins, turning faces into eggs. Basis must follow
   the size everywhere the cockpit resizes an avatar. */
.fc-p .p-avatar,
.fc-player .p-avatar,
.fcs-row .p-avatar,
.t-fighter .p-avatar,
.mr-player .p-avatar,
.pp-row .p-avatar,
.pp-chosen .p-avatar {
  flex: 0 0 auto;
  aspect-ratio: 1;
}
.fcs-row .p-avatar { width: 26px; height: 26px; }
.t-fighter .p-avatar { width: 24px; height: 24px; }
.t-fighter .p-avatar .avatar-fallback,
.fcs-row .p-avatar .avatar-fallback { font-size: 11px; }

/* the instant "Sent — the bot is on it…" heartbeat toast */
.toast.act.wait { border-color: var(--gold-soft); }
.toast.act.wait .toast-title { color: var(--gold); }
.toast.act.wait .toast-text::after {
  content: "";
  display: inline-block;
  width: 10px;
  animation: waitDots 1.2s steps(4) infinite;
}
@keyframes waitDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}

/* ============ WAVE 1: navigation, no-flash, forge v2, mist glow ============ */

/* kill the white flash between pages: the void behind every document is
   OUR black, and Chrome's cross-document view transitions fade the swap */
html { background: #0a0a0b; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.14s; }
::view-transition-new(root) { animation-duration: 0.14s; }

/* the home star — always far left, always one click from the hub */
.home-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: rgba(212, 175, 55, 0.06);
  text-decoration: none;
  margin-right: 12px;
  flex: 0 0 auto;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-chip .hc-star {
  color: var(--gold);
  font-size: 17px;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
  animation: starTwinkle 3.4s ease-in-out infinite;
}
.home-chip:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.3);
  transform: translateY(-1px);
}
.page-head { display: flex; align-items: center; }
.page-head .page-title { margin-right: auto; }

/* the Back button — stylised, animated, always just "Back" */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px 9px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(22, 22, 24, 0.6);
  backdrop-filter: blur(8px);
  color: var(--text-dim);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.back-btn svg { width: 15px; height: 15px; transition: transform 0.22s ease; }
.back-btn:hover {
  color: var(--gold);
  border-color: var(--gold-soft);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.22);
}
.back-btn:hover svg { transform: translateX(-4px); }
.back-btn:active svg { transform: translateX(-7px); }

/* ---- banner geometry lock: what you framed is what shows, everywhere ----
   Every banner surface keeps the 1600:560 canvas ratio, so the crop the
   user aligned in the editor never gets re-cropped by a different shape. */
.style-banner, .pp-banner { aspect-ratio: 1600 / 560; height: auto !important; }

/* ---- the mist: personality color as living light ---- */
.p-avatar.xl,
.pp-avatar .p-avatar,
.sb-avatar {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--pcolor, #e6b34d) 80%, transparent),
    0 0 18px color-mix(in srgb, var(--pcolor, #e6b34d) 65%, transparent),
    0 0 44px color-mix(in srgb, var(--pcolor, #e6b34d) 38%, transparent),
    0 0 90px color-mix(in srgb, var(--pcolor, #e6b34d) 18%, transparent);
}
/* smoky edges on banner surfaces — the light lives inside the mist */
.style-banner::after,
.pp-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--pcolor, #e6b34d) 34%, transparent),
    inset 0 0 90px color-mix(in srgb, var(--pcolor, #e6b34d) 16%, transparent);
  animation: mistBreathe 6s ease-in-out infinite;
}
@keyframes mistBreathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* ---- forge v2: fixed head, scrollable body, big summary, real buttons ---- */
.forge-card {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
}
.forge-fixed {
  padding: 20px 22px 4px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line-soft);
}
.forge-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 22px 8px;
  min-height: 0;
}
.forge-hint {
  flex: 0 0 auto;
  margin: 0 22px;
  padding: 11px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 190, 90, 0.4);
  background: rgba(255, 190, 90, 0.07);
  color: var(--amber);
  font-size: 13.5px;
  line-height: 1.5;
}
.forge-summary { flex: 0 0 auto; margin: 10px 22px 0; }
.forge-summary.live {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.06);
}
.forge-summary .fs-size {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}
.forge-summary span { font-size: 15px; color: var(--text); }
.forge-summary i { font-style: normal; color: var(--text-dim); font-size: 13px; letter-spacing: 0.04em; }
.forge-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 20px;
}
.forge-start {
  padding: 13px 44px;
  font-size: 16px;
  letter-spacing: 0.1em;
  border-radius: 999px;
}

/* steppers: − 7 + with a typeable number */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.stepper button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.07);
  color: var(--gold);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.stepper button:hover { box-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }
.stepper input {
  width: 58px;
  text-align: center;
  padding: 7px 4px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper i { font-style: normal; color: var(--text-dim); font-size: 12px; }

/* ===================== WAVE 2 — MEDIA v3 ===================== */

/* page-head action cluster */
.mh-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Moderation — a real button now, with the waiting-count badge */
.mod-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.12);
  transition: box-shadow 0.2s, transform 0.2s;
}
.mod-btn:hover { box-shadow: 0 0 26px rgba(212, 175, 55, 0.3); transform: translateY(-1px); }
.mod-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

/* your-uploads popup */
.uploads-panel {
  position: relative;
  width: min(980px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 26px;
}
.uploads-panel .lb-close { position: absolute; top: 10px; right: 12px; }
.uploads-panel .gallery { margin-top: 14px; }

/* activity feed — long names/titles truncate, full text on hover */
.feed-body { min-width: 0; flex: 1; }
.feed-name,
.feed-item-link {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.m-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* lightbox v3 tools */
.lb-bar { gap: 12px; flex-wrap: wrap; }
.lb-info { min-width: 0; }
.lb-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34vw; display: inline-block; vertical-align: bottom; }
.lb-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lb-vol { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.lb-vol svg { width: 17px; height: 17px; opacity: 0.8; }
.lb-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  outline: none;
  cursor: pointer;
}
.lb-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  cursor: pointer;
}
.lb-vol-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.6);
  cursor: pointer;
}
.lb-tool {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  border-radius: 9px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.lb-tool:hover { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); box-shadow: 0 0 12px rgba(212, 175, 55, 0.15); }
.lb-tool svg { width: 15px; height: 15px; }
.lb-fs { letter-spacing: 0.06em; font-weight: 600; }

/* maximize mode — the panel takes (almost) everything */
.lb-overlay.lb-maxed .lb-panel { width: 97vw; max-width: 97vw; }
.lb-overlay.lb-maxed .lb-media img,
.lb-overlay.lb-maxed .lb-media video { max-width: 96vw; max-height: 86vh; }

/* true fullscreen: ratio preserved, black around */
.lb-media:fullscreen { background: #000; }
.lb-media:fullscreen img,
.lb-media:fullscreen video {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

/* busy stage cancel */
.busy-cancel { margin-top: 16px; }

/* perf: keep gallery hover buttery — GPU-only transform, skip offscreen work */
.media-card { content-visibility: auto; contain-intrinsic-size: 260px 240px; }
.media-card img { backface-visibility: hidden; transform: translateZ(0); }
.lb-overlay { will-change: opacity; }

@media (max-width: 720px) {
  .lb-title { max-width: 60vw; }
  .lb-tools { margin-left: 0; }
  .feed-name, .feed-item-link { max-width: 110px; }
}

/* ===================== WAVE 3 — FILES v2 ===================== */

/* color mixer (folder colors) */
.color-mix { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cm-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: var(--sw);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cm-swatch:hover { transform: scale(1.15); }
.cm-swatch.on { border-color: #fff; box-shadow: 0 0 10px var(--sw); transform: scale(1.12); }
.cm-custom {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px dashed rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}
.cm-custom input { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }

/* painted folders — the picked color soaks the glyph, name and glow */
.folder-card { --fcol: #d4af37; }
.folder-card .folder-glyph,
.folder-card .folder-glyph::before {
  border-color: color-mix(in srgb, var(--fcol) 62%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fcol) 14%, transparent), transparent);
}
.folder-card:hover {
  border-color: color-mix(in srgb, var(--fcol) 55%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--fcol) 22%, transparent);
}

/* speed hall of fame */
.speed-board { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.sb-row:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line-soft); }
.sb-row:first-child .sb-rank { color: var(--gold); text-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
.sb-rank { width: 22px; text-align: center; font-weight: 700; color: var(--text-dim); font-size: 13px; }
.sb-row .p-avatar { width: 30px; height: 30px; flex: 0 0 30px; }
.sb-row .p-avatar .avatar-fallback { font-size: 13px; }
.sb-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.sb-speeds { margin-left: auto; font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.sb-speeds b { color: var(--green); font-weight: 600; }

/* speed test popup */
.speed-panel { position: relative; width: min(560px, 94vw); padding: 28px; }
.speed-panel .lb-close { position: absolute; top: 10px; right: 12px; }
.speed-stage { margin-top: 18px; }
.speed-choices { display: flex; flex-direction: column; gap: 10px; }
.speed-choices .mini-btn { padding: 13px 18px; font-size: 14px; }
.speed-big {
  text-align: center;
  font-size: 58px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
  line-height: 1;
  margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.sb-unit { font-size: 16px; color: var(--text-dim); margin-left: 8px; font-weight: 400; }
.speed-phase { text-align: center; color: var(--text-dim); font-size: 12.5px; margin-bottom: 14px; letter-spacing: 0.06em; }
.speed-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.speed-stats b { color: var(--text); font-weight: 600; }
.speed-actions { display: flex; justify-content: center; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.speed-result { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.sr-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.sr-line b { color: var(--gold); font-size: 18px; }

/* full-page drop veil — green half uploads, red half cancels */
.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  gap: 14px;
  padding: 20px;
  background: rgba(4, 4, 5, 0.9);
}
.drop-veil.open { display: flex; }
.dv-zone {
  flex: 1;
  border-radius: 22px;
  border: 2px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.dv-glyph { font-size: 44px; line-height: 1; }
.dv-title { font-size: 20px; font-weight: 600; letter-spacing: 0.03em; }
.dv-sub { font-size: 13px; color: var(--text-dim); }
.dv-yes { border-color: rgba(74, 222, 128, 0.4); color: var(--green); }
.dv-yes.hover {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.9);
  box-shadow: inset 0 0 60px rgba(74, 222, 128, 0.15), 0 0 40px rgba(74, 222, 128, 0.2);
}
.dv-no { border-color: rgba(248, 113, 113, 0.35); color: var(--red); }
.dv-no.hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.9);
  box-shadow: inset 0 0 60px rgba(248, 113, 113, 0.15), 0 0 40px rgba(248, 113, 113, 0.2);
}
@media (max-width: 640px) {
  .drop-veil { flex-direction: column; }
}

/* ===================== WAVE 4 — CHAT v2 ===================== */

/* cosmetics ride every avatar: personality ring + owner-assigned frame.
   Selector carries img so it OUTRANKS the base ".c-avatar img" cover rule —
   without that the ring was painted as a face-sized image ON the avatar */
.c-avatar { position: relative; }
.c-avatar img.c-ring-frame,
.c-ring-frame {
  position: absolute;
  inset: -31%;
  width: 162%;
  height: 162%;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
  z-index: 3;
}

/* bigger message avatars with the color ring */
.msg-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcolor, #d4af37) 65%, transparent),
    0 0 12px color-mix(in srgb, var(--pcolor, #d4af37) 25%, transparent);
}
.roster-avatar {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcolor, rgba(212, 175, 55, 0.4)) 55%, transparent);
}
.mh-click { cursor: pointer; }
.msg-name.mh-click:hover { text-decoration: underline; }

/* the prominent Messages launcher */
/* the DM pill lives in the top-right action row now — sized like its
   neighbours, gold so it still reads as THE button of the room */
.dm-launcher {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: auto;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.5);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
  color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.12);
  transition: box-shadow 0.2s, transform 0.2s;
  contain: layout style;
}
.dm-launcher:hover { box-shadow: 0 0 26px rgba(212, 175, 55, 0.28); transform: translateY(-1px); }
.dm-launcher svg { width: 16px; height: 16px; }
.dm-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em; }
@media (max-width: 640px) { .dm-label { display: none; } }

/* reply quotes above messages */
.reply-quote {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 520px;
  margin: 2px 0 2px 46px;
  padding: 4px 10px;
  border: none;
  border-left: 2px solid var(--gold-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.reply-quote:hover { background: rgba(212, 175, 55, 0.08); }
.reply-quote svg { width: 13px; height: 13px; flex: 0 0 13px; opacity: 0.7; }
.reply-quote b { color: var(--gold); font-weight: 600; white-space: nowrap; }
.reply-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* reply composer bar */
.reply-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 14px;
  padding: 7px 12px;
  border: 1px solid var(--line-soft);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  background: rgba(212, 175, 55, 0.06);
  font-size: 12.5px;
  color: var(--text-dim);
}
.reply-bar svg { width: 15px; height: 15px; color: var(--gold); flex: 0 0 15px; }
.rb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rb-text b { color: var(--gold); }
.reply-bar .chat-x { margin-left: auto; }

/* hover actions on messages */
.msg-acts {
  position: absolute;
  top: -14px;
  right: 8px;
  display: none;
  gap: 2px;
  background: #141416;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  padding: 2px;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.msg-row { position: relative; }
.msg-row:hover .msg-acts { display: inline-flex; }
.ma {
  background: none;
  border: none;
  color: var(--text-dim);
  width: 28px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  cursor: pointer;
  font-size: 15px;
}
.ma svg { width: 15px; height: 15px; }
.ma:hover { color: var(--gold); background: rgba(212, 175, 55, 0.1); }
.ma.danger:hover { color: var(--red); background: rgba(248, 113, 113, 0.1); }

/* pinned messages */
.pin-mark { display: inline-flex; color: var(--gold); opacity: 0.85; }
.pin-mark svg { width: 12px; height: 12px; }
.msg.is-pinned > .msg-row { border-left: 2px solid rgba(212, 175, 55, 0.5); }
.pin-menu {
  position: fixed;
  z-index: 4000;
  background: #141416;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}
.pins-list { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 14px; overflow-y: auto; }
.pin-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.pin-cell:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--line-soft); }
.pin-cell-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.pin-cell-main span { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.pin-cell-main i { color: var(--text-dim); font-size: 10.5px; opacity: 0.8; }
.pin-when { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* NEW divider + jump pill */
.new-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  color: #f87171;
}
.new-divider::before,
.new-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 113, 113, 0.55), transparent);
}
.new-divider span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 2px 10px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 999px;
}
.jump-pill {
  position: absolute;
  bottom: 118px;
  right: 26px;
  z-index: 20;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.55);
  background: rgba(16, 16, 19, 0.92);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 16px rgba(212, 175, 55, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}
.jump-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6), 0 0 22px rgba(212, 175, 55, 0.3); }
.chat-main { position: relative; }

/* jump flash on the target message */
.msg.flash { animation: msgFlash 1.6s ease; }
@keyframes msgFlash {
  0%, 40% { background: rgba(212, 175, 55, 0.14); border-radius: 10px; }
  100% { background: transparent; }
}

/* ---------------- Discord-style profile card ---------------- */
.roster-pop {
  width: 300px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}
.pc-loading { padding: 40px; text-align: center; color: var(--text-dim); }
.pc-banner {
  height: 106px;
  background-color: #101013;
  background-size: cover;
  background-position: center;
  position: relative;
}
/* fill, not cover — cover cropped the frame's ornaments out of place.
   Same new-era window mapping as .banner-frame (Part 40.2); the card's
   rounded clip trims the outward ornaments, the window stays aligned. */
.pc-banner-frame { position: absolute; left: -3%; top: -35.7%; width: 105.7%; height: 145.5%; object-fit: fill; pointer-events: none; }
.pc-ava {
  position: relative;
  margin: -38px 0 0 18px;
  width: 76px;
  height: 76px;
  z-index: 2;
}
.pc-avatar {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 auto !important;
  aspect-ratio: 1;
  border: 4px solid #141416;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pcolor, #d4af37) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--pcolor, #d4af37) 30%, transparent);
}
.pc-avatar .c-fallback { font-size: 30px; }
.pc-ava .presence {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 15px;
  height: 15px;
  border: 3px solid #141416;
  z-index: 4;
}
.pc-body { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 3px; }
.pc-namerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name { font-size: 17px; }
.pc-user { font-size: 12px; color: var(--text-dim); font-style: normal; }
.pc-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }

/* group chip reuse in side panel */
.roster-row .g-chip { margin-left: 6px; }

/* ===================== WAVE 5 — ACHIEVEMENTS ===================== */

:root {
  --r-common: #9ca3af;
  --r-uncommon: #4ade80;
  --r-rare: #3b82f6;
  --r-veryrare: #a855f7;
  --r-epic: #eb459e;
  --r-legendary: #f59e0b;
  --r-methical: #ff3b4e;
  --r-unique: #f7e7b0;
}
.r-common { --rc: var(--r-common); }
.r-uncommon { --rc: var(--r-uncommon); }
.r-rare { --rc: var(--r-rare); }
.r-veryrare { --rc: var(--r-veryrare); }
.r-epic { --rc: var(--r-epic); }
.r-legendary { --rc: var(--r-legendary); }
.r-methical { --rc: var(--r-methical); }
.r-unique { --rc: var(--r-unique); }

/* latest-honors log */
.ach-log-list { display: flex; flex-direction: column; gap: 2px; }
.ach-log-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
}
.ach-log-line:hover { background: rgba(255, 255, 255, 0.03); }
.ach-log-line .p-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.ach-log-line .p-avatar .avatar-fallback { font-size: 12px; }
.all-body { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-name { color: var(--rc, var(--gold)); font-weight: 600; text-shadow: 0 0 12px color-mix(in srgb, var(--rc, var(--gold)) 45%, transparent); }
.all-when { color: var(--text-dim); font-size: 11.5px; white-space: nowrap; }

.ach-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ach-compare-form { display: flex; gap: 8px; align-items: center; }

/* the wall */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.ach-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 7%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ach-card.earned { box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 18%, transparent); }
.ach-card.earned:hover { transform: translateY(-2px); box-shadow: 0 0 34px color-mix(in srgb, var(--rc) 30%, transparent); }
.ach-card.locked {
  filter: saturate(0.25) brightness(0.62);
  border-color: var(--line-soft);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}
.ach-card.locked:hover { filter: saturate(0.5) brightness(0.8); }

/* the Unique shimmer — one of a kind deserves moving light */
.ach-card.r-unique.earned {
  border-image: linear-gradient(120deg, #f7e7b0, #d4af37, #fff8dc, #d4af37, #f7e7b0) 1;
  box-shadow: 0 0 36px rgba(247, 231, 176, 0.36);
}
.ach-card.r-methical.earned { box-shadow: 0 0 32px rgba(255, 59, 78, 0.34); }

.ach-medal {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--rc) 70%, transparent);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rc) 30%, transparent), rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rc);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 25%, transparent);
}
.ach-medal svg { width: 26px; height: 26px; }
.ach-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.ach-name { font-size: 15px; font-weight: 600; color: var(--text); }
.ach-card.earned .ach-name { color: var(--rc); text-shadow: 0 0 14px color-mix(in srgb, var(--rc) 40%, transparent); }
.ach-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.ach-tags { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 2px; }
.ach-rarity {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rc);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.ach-flag {
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.unique-flag { color: var(--r-unique); border-color: rgba(247, 231, 176, 0.5); border-style: solid; }
.ach-holders { font-size: 10.5px; color: var(--text-dim); margin-left: auto; }
.ach-earned-line { font-size: 11px; color: var(--green); }
.ach-progress {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  margin-top: 4px;
}
.ap-bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 55%, transparent), var(--rc)); }
.ach-prog-label { font-size: 10.5px; color: var(--text-dim); }

/* compare table */
.ach-vs .vs-cell { text-align: center; font-weight: 700; width: 110px; }
.ach-vs .vs-cell.yes { color: var(--green); text-shadow: 0 0 10px rgba(74, 222, 128, 0.5); }
.ach-vs .vs-cell.no { color: var(--text-dim); opacity: 0.5; }

/* the forge */
.forge-ach-panel { position: relative; width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; padding: 26px; }
.forge-ach-panel .lb-close { position: absolute; top: 10px; right: 12px; }
.fa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 16px; }
.fa-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.fa-field > span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.fa-field:nth-child(1), .fa-field:nth-child(2) { grid-column: 1 / -1; }
.fa-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-soft);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
}
.fa-stats {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  background: #141416;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
.fa-stat-opt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
}
.fa-stat-opt:hover { background: rgba(212, 175, 55, 0.08); }
.fa-stat-opt b { font-weight: 500; }
.fa-stat-opt i { color: var(--text-dim); font-size: 10.5px; font-style: normal; }
.fa-flags { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text); }
.fa-flags label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fa-rewards { display: flex; flex-wrap: wrap; gap: 7px; }
.fa-reward {
  border: 1px solid var(--line-soft);
  background: none;
  color: var(--text-dim);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.fa-reward.on { color: var(--gold); border-color: rgba(212, 175, 55, 0.6); box-shadow: 0 0 10px rgba(212, 175, 55, 0.2); }
@media (max-width: 680px) { .fa-grid { grid-template-columns: 1fr; } }

/* ===================== WAVE 6 — PROFILE CUSTOMIZATION ===================== */

.layout-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 14px; }
@media (max-width: 720px) { .layout-editor { grid-template-columns: 1fr; } }
.le-head { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 10px; }
.le-sections { display: flex; flex-direction: column; gap: 6px; }
.le-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
}
.le-row:first-child { border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 0 12px rgba(212, 175, 55, 0.08); }
.le-arrows { display: flex; gap: 4px; }
.le-up, .le-down {
  background: none;
  border: 1px solid var(--line-soft);
  color: var(--text-dim);
  border-radius: 7px;
  width: 26px;
  height: 24px;
  cursor: pointer;
  font-size: 10px;
}
.le-up:hover, .le-down:hover { color: var(--gold); border-color: rgba(212, 175, 55, 0.5); }
.le-picked { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.le-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  background: rgba(212, 175, 55, 0.06);
}
.le-x {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.le-x:hover { color: var(--red); }

/* honors on the public profile */
.pp-honors { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-honor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rc, var(--gold));
  border: 1px solid color-mix(in srgb, var(--rc, var(--gold)) 55%, transparent);
  background: color-mix(in srgb, var(--rc, var(--gold)) 8%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rc, var(--gold)) 15%, transparent);
}
.pp-honor svg { width: 14px; height: 14px; }
.pp-honor.r-unique { box-shadow: 0 0 26px rgba(247, 231, 176, 0.32); }

/* ===================== WAVE 7 — CONTINUITY ===================== */

.recents-pop {
  position: absolute;
  z-index: 4000;
  background: #141416;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
  animation: popIn 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.rp-head {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 10px 2px;
}
.rp-item {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}
.rp-item:hover { background: rgba(212, 175, 55, 0.1); color: var(--gold); }

/* ===================== GAP-CLOSING ROUND ===================== */

/* item 5 — banners STRETCH on both axes: whatever you framed in the
   crop preview ALWAYS shows, on every surface, at every screen size.
   (cover re-cropped the baked crop; 100% 100% never hides a pixel) */
.hero-v2.has-banner::before,
.pp-banner.has-banner,
.style-banner.has-banner,
.pc-banner {
  background-size: 100% 100% !important;
}

/* item 7 — the forge knobs wear their NAMES */
.fg-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fg-cap {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-style: normal;
  padding-left: 2px;
  white-space: nowrap;
}
.fg-cap-rounds { color: var(--gold); }
.forge-game { align-items: flex-end; }
.forge-game .cmp-opt-x { margin-bottom: 8px; }

/* item 14 — layout editor: the eye switch hides a whole section */
.le-eye {
  background: none;
  border: none;
  color: var(--gold);
  width: 26px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 26px;
}
.le-eye svg { width: 17px; height: 17px; }
.le-row { gap: 8px; }
.le-row .le-name { flex: 1; }
.le-row.off { opacity: 0.45; }
.le-row.off .le-eye { color: var(--text-dim); }
.le-row.off .le-name { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.35); }

/* item 16 — roster rows breathe when hovered */
.roster-row { transition: transform 0.16s ease, background 0.16s ease; transform-origin: right center; }
.roster-row:hover { transform: scale(1.05); }

/* item 16 — "new messages" banner at the TOP of the chat, sender's face on it */
.new-banner {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 8px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(16, 16, 19, 0.95);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(248, 113, 113, 0.18);
  animation: popIn 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}
.new-banner:hover { border-color: rgba(248, 113, 113, 0.9); box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6), 0 0 26px rgba(248, 113, 113, 0.35); }
.new-banner .nb-avatar .c-avatar { width: 26px; height: 26px; flex: 0 0 26px; }
.nb-text b { color: #f87171; }
.nb-arrow { color: #f87171; font-weight: 700; }

/* item 11 — the drop-confirm prompt: yes glows green, no glows red */
.drop-confirm-panel { width: min(460px, 92vw); padding: 28px; }
.dc-file {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}
.dc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-actions { display: flex; gap: 12px; }
.dc-yes, .dc-no {
  flex: 1;
  padding: 13px 18px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  transition: all 0.16s ease;
}
.dc-yes { border: 1px solid rgba(74, 222, 128, 0.45); }
.dc-yes:hover {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.95);
  color: var(--green);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.25);
}
.dc-no { border: 1px solid rgba(248, 113, 113, 0.4); }
.dc-no:hover {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.95);
  color: var(--red);
  box-shadow: 0 0 22px rgba(248, 113, 113, 0.25);
}

/* ===================== EYES-ON ROUND 3 ===================== */

/* native form controls render DARK (the rarity dropdown was a white
   searchlight) — one line, every select/option/scrollbar obeys */
:root { color-scheme: dark; }
.fa-select option, select option { background-color: #141416; color: #e8e6e3; }

/* custom gold checkboxes — the Rules row deserved better than OS squares */
.g-check {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  user-select: none;
}
.g-check input { position: absolute; opacity: 0; pointer-events: none; }
.gc-box {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.gc-box svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #0a0a0b;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.g-check input:checked + .gc-box {
  background: linear-gradient(160deg, #e6c96a, #b8912e);
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}
.g-check input:checked + .gc-box svg { opacity: 1; transform: scale(1); }
.g-check:hover .gc-box { border-color: var(--gold-soft); }

/* achievements v2: stacked wins, faded year, years-on-click, mystery card */
.ach-card { position: relative; }
.ach-times {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.1);
}
.ach-year-mark {
  position: absolute;
  right: 14px;
  bottom: 6px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--rc, var(--gold)) 55%, transparent);
  opacity: 0.16;
  pointer-events: none;
  font-family: "Poppins", sans-serif;
}
.ach-card[data-years] { cursor: pointer; }
.ach-years { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ay-chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold);
}
.ach-mystery {
  font-family: "Lobster", cursive;
  font-size: 30px;
  color: var(--text-dim);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}
.ach-card.masked .ach-desc { font-style: italic; color: var(--text-dim); }

/* forge: picked cosmetic chips (search-to-add replaced the click wall) */
.fa-picked { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.fa-picked .fa-reward i { font-style: normal; opacity: 0.7; margin-left: 3px; }
#faRewardPop, #vsPop { top: calc(100% + 6px); left: 0; right: 0; }

/* ============ THE 7 DAYS SANDBOX — the in-game screen, on the web ============ */

.sandbox-card { width: min(980px, 96vw); max-height: 90vh; overflow-y: auto; padding: 22px 26px; }
.mods-card { width: min(680px, 94vw); max-height: 88vh; overflow-y: auto; padding: 22px 26px; }

.sbx-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sbx-head .gc-title { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.sbx-head .gc-title b { font-family: "Lobster", cursive; font-size: 22px; }
.sbx-head .gc-title span { color: var(--text-dim); font-size: 12px; }

.sbx-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sbx-tab {
  padding: 8px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.sbx-tab:hover { color: var(--text); border-color: var(--gold-soft); }
.sbx-tab.on {
  color: var(--gold);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.05));
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.2);
}

.sbx-lock {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.06);
  color: var(--text);
  font-size: 13px;
}

/* two columns of label + ◄ value ► rows, exactly like the game */
.sbx-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 10px;
}
@media (max-width: 760px) { .sbx-rows { grid-template-columns: 1fr; } }
.sbx-row { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.sbx-label {
  flex: 1;
  text-align: right;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.sbx-note { font-size: 10px; color: var(--text-dim); font-style: normal; }
.sbx-stepper { display: flex; align-items: center; gap: 7px; flex: 0 0 216px; }
.sbx-arrow {
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 4px;
  transition: color 0.15s, transform 0.15s;
}
.sbx-arrow:hover:not(:disabled) { color: var(--gold); transform: scale(1.25); }
.sbx-arrow:disabled { opacity: 0.25; cursor: default; }
.sbx-val {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: #0c0c0e;
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
input.sbx-val.num { font-family: inherit; -moz-appearance: textfield; appearance: textfield; }
input.sbx-val.num::-webkit-outer-spin-button, input.sbx-val.num::-webkit-inner-spin-button { -webkit-appearance: none; }
/* non-default values BURN RED, like the game marks your tampering */
.sbx-val.changed { color: #ff4a4a; text-shadow: 0 0 10px rgba(255, 74, 74, 0.35); }
.sbx-row.text { grid-column: span 1; }
.sbx-text { flex: 0 0 216px; }

.sbx-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.sbx-hint { flex: 1; text-align: center; color: var(--text-dim); font-size: 12px; }
.sbx-save { padding: 10px 34px; font-size: 14px; }

/* ------------------------------- mods ------------------------------- */
.mods-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 26px 16px;
  margin-bottom: 12px;
  border: 1.5px dashed var(--line-soft);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.mods-drop:hover, .mods-drop.drag { border-color: var(--gold); background: rgba(212, 175, 55, 0.05); }
.mods-status { padding: 8px 12px; margin-bottom: 10px; font-size: 13px; color: var(--gold); }
.mods-list { display: flex; flex-direction: column; gap: 8px; }
.mod-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.mod-row.invalid { opacity: 0.6; border-style: dashed; }
.mod-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mod-main b { font-size: 14.5px; }
.mod-main i { font-size: 11.5px; color: var(--text-dim); font-style: normal; }
.mod-desc { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-size { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }

/* create flow: the game's difficulty presets as poster cards */
.diff-row { flex-direction: column; align-items: stretch !important; }
.diff-shelf { display: flex; gap: 8px; flex-wrap: wrap; }
.diff-card {
  flex: 1 1 calc(33% - 8px);
  min-width: 110px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.diff-card:hover { transform: translateY(-2px); border-color: var(--gold-soft); }
.diff-card.on {
  border-color: #e0455a;
  background: linear-gradient(180deg, rgba(224, 69, 90, 0.14), rgba(224, 69, 90, 0.04));
  box-shadow: 0 0 16px rgba(224, 69, 90, 0.25);
}
.diff-card b { font-size: 13.5px; }
.diff-skulls { font-size: 11px; color: #e0455a; }
.diff-dmg { font-size: 10px; color: var(--text-dim); }
.diff-desc { width: 100%; margin-top: 8px; font-size: 12px; color: var(--text-dim); font-style: italic; }

/* the yellow "what does this do?" bubble */
.sbx-row { position: relative; cursor: help; }
.sbx-bubble {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 15px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.65);
  background: linear-gradient(180deg, rgba(58, 46, 14, 0.98), rgba(38, 30, 9, 0.98));
  color: #ffe9a8;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 22px rgba(251, 191, 36, 0.18);
  animation: popIn 0.18s ease both;
  cursor: default;
}
.sbx-bubble b { color: #fbbf24; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.sbx-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 26px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: rgba(58, 46, 14, 0.98);
  border-left: 1px solid rgba(251, 191, 36, 0.65);
  border-top: 1px solid rgba(251, 191, 36, 0.65);
}
.opt-row { position: relative; cursor: help; }

/* paste-a-preset + the diff popup */
.sbx-paste { display: flex; align-items: center; gap: 7px; margin-right: 8px; }
.sbx-paste input {
  width: 220px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-size: 12px;
  font-family: monospace;
  letter-spacing: 0.05em;
}
.sbx-paste input:focus { outline: none; border-color: var(--gold-soft); }
.preset-diff {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 6, 0.85);
  border-radius: inherit;
}
.pd-card {
  width: min(560px, 92%);
  max-height: 80%;
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: 16px;
  border: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, rgba(30, 30, 33, 0.99), rgba(13, 13, 15, 0.99));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.pd-card h3 { font-family: "Lobster", cursive; font-size: 20px; margin-bottom: 4px; }
.pd-list { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; }
.pd-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13px;
}
.pd-line b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-tab { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--line-soft); border-radius: 999px; padding: 2px 8px; }
.pd-from { color: var(--text-dim); text-decoration: line-through; }
.pd-arrow { color: var(--gold); }
.pd-to { color: #ff4a4a; font-weight: 600; }
.sbx-extra-note {
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.07);
  font-size: 13px;
}
.sbx-section {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--gold-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.sbx-rows > .sbx-section:first-child { margin-top: 0; }
@media (max-width: 900px) { .sbx-paste input { width: 130px; } }

/* ======================= DOWNLOADING (/downloads) =======================
   Paste any link -> top quality -> any format. Gold glass, no repaint-heavy
   animations (progress bars move by width updates from polling only). */

.dl-hero h2 { margin-bottom: 6px; }
.dl-paste { display: flex; gap: 10px; margin-top: 14px; align-items: stretch; }
.dl-paste-input { flex: 1; }
.dl-paste-input input { width: 100%; font-size: 1.02rem; letter-spacing: 0.2px; }
.dl-paste .mini-btn { padding: 0 26px; font-size: 1rem; }
.dl-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dl-sources span {
  font-size: 0.72rem; letter-spacing: 0.8px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; color: rgba(255,255,255,0.55);
  border: 1px solid rgba(212,175,55,0.18); background: rgba(255,255,255,0.03);
}
.dl-sources .dl-more { color: var(--gold); border-color: rgba(212,175,55,0.4); }
.dl-hint { margin-top: 12px; }
.dl-engine { color: rgba(255,255,255,0.5); }
.dl-engine .mini-btn { margin-left: 6px; }

/* scouting report */
.dl-scout-head { display: flex; gap: 16px; align-items: flex-start; }
.dl-thumb { position: relative; flex: 0 0 220px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(212,175,55,0.25); }
.dl-thumb img { width: 100%; display: block; }
.dl-dur {
  position: absolute; right: 6px; bottom: 6px; font-size: 0.72rem; font-weight: 700;
  background: rgba(0,0,0,0.75); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.dl-meta h2 { margin-bottom: 4px; }
.dl-chip {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--gold); padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.4); background: rgba(212,175,55,0.08);
}
.dl-pick { margin-top: 16px; }
.dl-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.dl-pill {
  padding: 8px 22px; border-radius: 999px; cursor: pointer; font-weight: 800;
  letter-spacing: 1.2px; font-size: 0.82rem; color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.dl-pill:hover { border-color: rgba(212,175,55,0.45); color: #fff; }
.dl-pill.on {
  color: #1a1405; background: linear-gradient(180deg, #ffe9a8, #d4af37 55%, #b8912c);
  border-color: rgba(212,175,55,0.8); box-shadow: 0 4px 16px rgba(212,175,55,0.25);
}
.dl-pill.sm { padding: 5px 14px; font-size: 0.74rem; }
.dl-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-note { font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-left: 8px; }
.dl-trim { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.dl-trim input {
  width: 84px; padding: 7px 10px; border-radius: 9px; color: #fff; text-align: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); outline: none;
}
.dl-trim input:focus { border-color: rgba(212,175,55,0.5); }
.dl-go-btn { padding: 12px 38px; font-size: 1.05rem; }
.dl-err {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem;
  color: #ffb3bd; border: 1px solid rgba(224,69,90,0.4); background: rgba(224,69,90,0.08);
}

/* playlist entries */
.dl-entries { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 320px; overflow-y: auto; }
.dl-entry {
  display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 10px; color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.dl-entry:hover { border-color: rgba(212,175,55,0.4); background: rgba(212,175,55,0.06); }
.dl-entry-n { color: var(--gold); font-weight: 800; width: 26px; }
.dl-entry-t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-entry-d { color: rgba(255,255,255,0.4); font-size: 0.8rem; }
/* playlist multi-select + shared picker */
.dl-entry.pl { cursor: default; }
.dl-entry .dl-pl-ck { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; }
.dl-entry-one {
  flex: 0 0 auto; background: none; border: none; color: rgba(212,175,55,0.75);
  font: inherit; font-size: 0.8rem; cursor: pointer; padding: 2px 4px;
}
.dl-entry-one:hover { color: var(--gold); }
.dl-pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(212,175,55,0.15); }
.dl-pl-all { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.8); cursor: pointer; }
.dl-pl-all input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
/* subtitles pill + language field */
.dl-subs { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.dl-sublang {
  width: 84px; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px; color: inherit; font: inherit; font-size: 0.82rem; padding: 5px 9px; outline: none;
}
.dl-sublang:focus { border-color: rgba(212,175,55,0.7); }

/* live jobs */
.dl-job { margin-bottom: 14px; }
.dl-job-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dl-job-top b { max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-job-top .dl-cancel { margin-left: auto; }
.dl-bar {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.2);
}
.dl-bar-fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, #9a771f, #d4af37 60%, #ffe9a8);
  transition: width 0.6s ease;
}
.dl-pct { font-size: 0.78rem; color: var(--gold); font-weight: 700; }

/* the shelf */
.dl-shelf-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.dl-usage { margin-left: auto; font-size: 0.78rem; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 8px; }
.dl-usage-bar {
  display: inline-block; width: 110px; height: 7px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
}
.dl-usage-bar span { display: block; height: 100%; background: linear-gradient(90deg, #9a771f, #d4af37); }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.dl-card {
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.2s, transform 0.2s;
}
.dl-card:hover { border-color: rgba(212,175,55,0.4); transform: translateY(-2px); }
.dl-card.failed { border-color: rgba(224,69,90,0.35); }
.dl-card-thumb { position: relative; aspect-ratio: 16/9; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; }
.dl-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dl-card-icon { font-size: 2.2rem; color: rgba(212,175,55,0.7); }
.dl-fmt {
  position: absolute; left: 6px; top: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.8px;
  background: rgba(0,0,0,0.75); color: var(--gold); padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(212,175,55,0.35);
}
.dl-card-body { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 3px; }
.dl-card-title { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-card-err { font-size: 0.78rem; color: #ffb3bd; }
.dl-card-actions { display: flex; gap: 6px; padding: 8px 12px 12px; align-items: center; position: relative; }
.mini-btn.sm { padding: 5px 12px; font-size: 0.75rem; }
.dl-pin.on { border-color: rgba(212,175,55,0.6); color: var(--gold); }
.dl-conv-menu {
  position: absolute; bottom: 44px; left: 12px; z-index: 30; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; border: 1px solid rgba(212,175,55,0.4);
  background: rgba(10, 8, 2, 0.97); box-shadow: 0 14px 34px rgba(0,0,0,0.6);
}
.dl-conv-menu button {
  padding: 8px 22px; color: rgba(255,255,255,0.8); cursor: pointer; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 1px; background: none; border: none; text-align: left;
}
.dl-conv-menu button:hover { background: rgba(212,175,55,0.14); color: var(--gold); }

/* convert-your-own-file zone */
.dl-drop {
  margin-top: 12px; padding: 30px; text-align: center; cursor: pointer; border-radius: 14px;
  color: rgba(255,255,255,0.45); border: 2px dashed rgba(212,175,55,0.25);
  background: rgba(255,255,255,0.02); transition: border-color 0.2s, color 0.2s;
}
.dl-drop:hover, .dl-drop.over { border-color: rgba(212,175,55,0.6); color: var(--gold); }
.dl-own-formats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 760px) {
  .dl-scout-head { flex-direction: column; }
  .dl-thumb { flex: none; width: 100%; }
  .dl-paste { flex-direction: column; }
  .dl-paste .mini-btn { padding: 12px 0; }
  .dl-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* owner cookies panel */
.dl-cookies textarea {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 10px; resize: vertical;
  color: #ddd; font-family: monospace; font-size: 0.78rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.25); outline: none;
}
.dl-cookies textarea:focus { border-color: rgba(212,175,55,0.55); }
.dl-cookies-actions { display: flex; gap: 8px; margin-top: 10px; }

/* cookies wizard */
.dl-ck-steps { margin: 12px 0 4px 18px; display: flex; flex-direction: column; gap: 10px; }
.dl-ck-steps li::marker { color: var(--gold); font-weight: 800; }
.dl-ck-drop { margin-top: 12px; padding: 22px; }
.dl-ck-manual { margin-top: 10px; }
.dl-ck-manual summary { cursor: pointer; }
.dl-ck-result { margin-top: 12px; font-size: 0.9rem; min-height: 20px; }
.dl-ck-good { color: #7ce38b; }
.dl-ck-bad { color: #ffb3bd; }

/* cookie pool additions */
.dl-hero-actions { margin-top: 12px; }
.dl-ck-list { margin-top: 14px; }
.dl-ck-h3 { font-size: 0.95rem; color: var(--gold); margin: 12px 0 6px; }
.dl-ck-entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px;
  border-radius: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.dl-ck-who { font-weight: 700; min-width: 70px; }
.dl-ck-sites { flex: 1; color: rgba(255,255,255,0.75); font-size: 0.86rem; }
.dl-ck-entry .dl-ck-del { margin-left: auto; }
.dl-ck-fine { margin-top: 12px; font-size: 0.76rem; opacity: 0.7; }

/* ======================= WATCH TOGETHER (/watch) =======================
   Synced-link rooms. Pitch-black + gold, glass. Animations obey the perf
   laws: only transform/opacity move (reaction floats), nothing repaints. */

/* avatars */
.w-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; vertical-align: middle; flex: 0 0 auto; background: rgba(255,255,255,0.06); }
.w-av img { width: 100%; height: 100%; object-fit: cover; }
.w-av-letter { color: var(--gold); font-weight: 800; font-size: 0.8rem; background: linear-gradient(180deg, rgba(212,175,55,0.2), rgba(212,175,55,0.05)); }

/* ---- lobby ---- */
.w-lobby-hero h2 { margin-bottom: 6px; }
.w-create { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.w-create-name { flex: 1 1 200px; }
.w-create-link { flex: 2 1 260px; }
.w-create-name input, .w-create-link input { width: 100%; }
.w-create-lock { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; cursor: pointer; }
.w-lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.w-room { text-align: left; padding: 0; overflow: hidden; border-radius: 14px; cursor: pointer; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09); transition: border-color 0.2s, transform 0.2s; }
.w-room:hover { border-color: rgba(212,175,55,0.45); transform: translateY(-2px); }
.w-room-thumb { position: relative; aspect-ratio: 16/9; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; }
.w-room-thumb img { width: 100%; height: 100%; object-fit: cover; }
.w-room-idle { color: rgba(255,255,255,0.35); font-size: 0.82rem; }
.w-room-count { position: absolute; right: 8px; bottom: 8px; font-size: 0.7rem; font-weight: 800; background: rgba(0,0,0,0.75); color: var(--gold); padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(212,175,55,0.35); }
.w-room-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; }
.w-room-name { font-size: 1rem; }
.w-room-people { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.w-room-host { margin-left: auto; }

/* ---- room layout ---- */
.w-room-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.w-title { font-size: 1.15rem; }
.w-ctl-badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.15); }
.w-ctl-badge.on { color: #ffd36b; border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.1); }
.w-head-actions { margin-left: auto; display: flex; gap: 8px; }

.w-stage { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.w-screen-wrap { position: relative; grid-column: 1; }
.w-screen { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; border: 1px solid rgba(212,175,55,0.25); box-shadow: 0 0 40px rgba(0,0,0,0.6); }
.w-screen iframe, .w-screen .w-video, .w-screen > div { width: 100%; height: 100%; border: 0; }
.w-video { display: block; background: #000; }
.w-noscreen { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,0.6); }

/* reactions float layer */
.w-reacts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.w-react-float { position: absolute; bottom: 8%; font-size: 2rem; color: var(--gold); text-shadow: 0 0 12px rgba(212,175,55,0.6); animation: wReactFloat 2.6s ease-out forwards; }
@keyframes wReactFloat { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-10px) scale(1.1); } 100% { transform: translateY(-220px) scale(0.9); opacity: 0; } }

.w-solo-banner { position: absolute; left: 0; right: 0; top: 0; text-align: center; padding: 7px; font-size: 0.85rem; background: rgba(224,69,90,0.85); color: #fff; }
.w-linklike { background: none; border: none; color: #fff; text-decoration: underline; cursor: pointer; font-weight: 700; }

/* controls */
.w-controls { grid-column: 1; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.w-play { padding: 10px 26px; border-radius: 10px; font-weight: 800; letter-spacing: 0.5px; cursor: pointer; color: #1a1405; background: linear-gradient(180deg, #ffe9a8, #d4af37 55%, #b8912c); border: 1px solid rgba(212,175,55,0.7); }
.w-play:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }
.w-clock { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: rgba(255,255,255,0.7); min-width: 80px; }
.w-scrub { flex: 1; accent-color: var(--gold); cursor: pointer; }
.w-icon { padding: 8px 14px; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 0.8rem; color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); }
.w-icon.on { color: #ffb3bd; border-color: rgba(224,69,90,0.5); background: rgba(224,69,90,0.12); }
.w-react-tray { display: flex; gap: 4px; }
.w-react-btn { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--gold); background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); transition: transform 0.12s, background 0.15s; }
.w-react-btn:hover { transform: scale(1.15); background: rgba(212,175,55,0.2); }

/* load bar + queue */
.w-loadbar { grid-column: 1; display: flex; gap: 8px; margin-top: 12px; }
.w-loadbar .glass-input { flex: 1; }
.w-loadbar input { width: 100%; }
.w-queue { grid-column: 1; display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; align-items: center; }
.w-queue-h { flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.68rem; }
.w-qitem { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; max-width: 200px; padding: 4px 10px 4px 4px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); font-size: 0.78rem; color: rgba(255,255,255,0.8); }
.w-qitem img { width: 44px; height: 26px; object-fit: cover; border-radius: 4px; }
.w-qitem span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* side rail — fills the full height of the stage so the chat uses the
   space instead of floating in a short box; roster stays compact, chat
   grows to take whatever's left, its message list scrolls inside. */
.w-side { grid-column: 2; grid-row: 1 / 5; align-self: start; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; height: calc(100vh - 96px); }
.w-roster-panel { flex: 0 0 auto; }
.w-feed-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.w-h3 { font-size: 0.92rem; color: var(--gold); margin-bottom: 10px; }
.w-count { color: rgba(255,255,255,0.6); font-weight: 700; }
.w-roster { display: flex; flex-wrap: wrap; gap: 10px; }
.w-seat { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; }
.w-seat-name { font-size: 0.66rem; color: rgba(255,255,255,0.7); max-width: 54px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.w-feed { flex: 1 1 auto; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding-right: 4px; }
.w-sys { font-size: 0.78rem; color: rgba(255,255,255,0.45); font-style: italic; }
.w-sys b { color: rgba(255,255,255,0.7); font-style: normal; }
.w-sys i { color: var(--gold); font-style: normal; }
.w-msg { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; }
.w-msg-body { color: rgba(255,255,255,0.85); }
.w-say { display: flex; gap: 6px; margin-top: 10px; }
.w-say .glass-input { flex: 1; }
.w-say input { width: 100%; }

/* cinema "lights down" */
body.w-cinema { background: #000; }
body.w-cinema .page-head, body.w-cinema .w-room-head, body.w-cinema .w-loadbar, body.w-cinema .w-queue, body.w-cinema .site-foot { opacity: 0.12; transition: opacity 0.25s; }
body.w-cinema .page-head:hover, body.w-cinema .w-room-head:hover, body.w-cinema .w-loadbar:hover, body.w-cinema .w-queue:hover { opacity: 1; }
body.w-cinema .w-side { opacity: 0.25; transition: opacity 0.25s; }
body.w-cinema .w-side:hover { opacity: 1; }
body.w-cinema .w-screen { box-shadow: 0 0 90px rgba(212,175,55,0.15); }

@media (max-width: 880px) {
  .w-stage { grid-template-columns: 1fr; }
  .w-side { grid-column: 1; grid-row: auto; position: static; height: auto; }
  .w-feed { max-height: 300px; } /* stacked below the video — cap it so it isn't a mile tall */
}

/* blocked-for-this-viewer fallback (managed account / network) */
.w-blocked { gap: 10px; padding: 24px; text-align: center; }
.w-blocked b { color: #ffd36b; font-size: 1rem; }
.w-blocked .dim-note { max-width: 460px; }
.w-blocked .mini-btn { margin-top: 4px; }

/* watch: the link field doubles as a search engine — results on screen */
.w-search {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden;
  background: rgba(8, 6, 2, 0.97); border: 1px solid rgba(212,175,55,0.4);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.w-search-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid rgba(212,175,55,0.2); color: var(--gold);
}
.w-search-x { margin-left: auto; }
.w-search-grid {
  flex: 1; overflow-y: auto; padding: 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
  align-content: start;
}
.w-search-err { grid-column: 1 / -1; text-align: center; padding: 30px 10px; }
.w-hit {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.18s, transform 0.18s;
}
.w-hit:hover { border-color: rgba(212,175,55,0.5); transform: translateY(-2px); }
.w-hit-thumb { position: relative; aspect-ratio: 16/9; background: rgba(0,0,0,0.6); }
.w-hit-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-dur {
  position: absolute; right: 6px; bottom: 6px; font-size: 0.7rem; font-weight: 700;
  background: rgba(0,0,0,0.8); color: #fff; padding: 2px 7px; border-radius: 6px;
}
.w-hit-body { padding: 9px 11px 4px; display: flex; flex-direction: column; gap: 2px; }
.w-hit-title {
  font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.w-hit-actions { display: flex; gap: 6px; padding: 8px 11px 11px; }

/* ==================== Business card (Guhens Manager mirror) ==================== */
.biz-frame {
  width: 100%;
  height: 76vh;
  min-height: 540px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #040404;
  margin-top: 14px;
}
.biz-stats { margin-bottom: 4px; }
.biz-token-reveal { border-color: var(--gold-soft); box-shadow: 0 0 30px rgba(212, 175, 55, 0.12); }
.biz-backups { display: flex; flex-direction: column; gap: 6px; }
.biz-backup-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.02);
}
.biz-b-when { font-size: 13px; color: var(--text); min-width: 170px; }
.biz-b-meta { flex: 1; font-size: 12px; color: var(--text-dim); }

/* watch: LIVE screen share */
.w-live-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 900; letter-spacing: 1.2px;
  padding: 3px 10px; border-radius: 6px; color: #fff;
  background: linear-gradient(180deg, #ff5468, #e0455a);
  box-shadow: 0 0 14px rgba(224,69,90,0.5);
}
.w-live-corner { position: absolute; left: 8px; top: 8px; }
.w-live-wrap, .w-live-self {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #000; padding: 12px;
}
.w-live-wrap .w-live-badge, .w-live-self .w-live-badge { position: absolute; left: 10px; top: 10px; z-index: 3; }
.w-live-state { position: absolute; right: 12px; top: 12px; z-index: 3; }
.w-live-wrap .w-video { width: 100%; height: 100%; object-fit: contain; }
.w-live-self b { color: #ffd36b; }
.w-live-preview { max-height: 55%; width: auto; max-width: 92%; border-radius: 10px; border: 1px solid rgba(212,175,55,0.3); }
.w-live-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.w-sound-unlock {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4;
  padding: 10px 26px; border-radius: 999px; cursor: pointer; font-weight: 800; letter-spacing: 0.6px;
  color: #1a1405; background: linear-gradient(180deg, #ffe9a8, #d4af37 55%, #b8912c);
  border: 1px solid rgba(212,175,55,0.8); box-shadow: 0 8px 26px rgba(212,175,55,0.35);
}
.w-pausewish {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30;
  padding: 10px 22px; border-radius: 12px; font-size: 0.95rem; color: #fff;
  background: rgba(10, 8, 2, 0.95); border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 12px 34px rgba(0,0,0,0.6), 0 0 20px rgba(212,175,55,0.25);
  animation: wWishIn 0.25s ease backwards;
}
@keyframes wWishIn { from { transform: translateX(-50%) translateY(-12px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
#wShare.gold { color: #1a1405; background: linear-gradient(180deg, #ffe9a8, #d4af37 55%, #b8912c); border-color: rgba(212,175,55,0.8); }

/* watch: the Go Live modal (Discord homework, house colors) */
.w-golive-card { max-width: 520px; }
.w-golive-card h3 { color: var(--gold); margin-bottom: 8px; }
.w-golive-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.w-golive-label {
  flex: 0 0 92px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.w-golive-card .modal-actions { margin-top: 20px; display: flex; gap: 10px; justify-content: flex-end; }

/* the sharer's stage, dressed properly */
.w-live-self { gap: 10px; }
.w-live-head { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.w-live-head b { color: #ffd36b; font-size: 1.05rem; }
.w-live-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.22);
}
.w-live-sep { width: 1px; height: 18px; background: rgba(212,175,55,0.25); margin: 0 4px; }

/* ============================ time capsules ============================ */
/* Sealed words in the Chat card. The arrival wears a gold wrap and NOTHING
   about when it was sealed — that mystery is the owner's law. */
.tc-card { width: min(560px, 92vw); }
/* the capsule fields wear their OWN glass — .glass-input is a fixed 56px
   flex row built for single-line inputs; a textarea inside it overflows
   (the original jank). Same look, none of the baggage. */
.tc-glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.tc-glass:focus-within {
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 24px rgba(212, 175, 55, 0.12);
}
.tc-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid rgba(212, 175, 55, 0.18); }
.tc-tab { background: none; border: none; color: rgba(230, 220, 180, 0.55); font: inherit; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.2s; }
.tc-tab:hover { color: rgba(230, 220, 180, 0.85); }
.tc-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tc-to { margin: 0 2px 10px; }
.tc-to b { color: var(--gold); }
.tc-textwrap { padding: 12px 14px; }
.tc-textwrap textarea { display: block; width: 100%; background: none; border: none; outline: none; color: inherit; resize: vertical; min-height: 130px; max-height: 38vh; font: inherit; font-size: 14.5px; line-height: 1.5; }
.tc-textwrap textarea::placeholder { color: rgba(230, 220, 180, 0.35); }
.tc-when { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.tc-in { height: 46px; display: flex; align-items: center; padding: 0 14px; min-width: 0; }
.tc-in input { width: 100%; background: none; border: none; outline: none; color: inherit; font: inherit; font-size: 14px; letter-spacing: 0.05em; }
.tc-in input::placeholder { color: rgba(230, 220, 180, 0.35); }
.tc-in-date { flex: 1.35; }
.tc-in-time { flex: 1; }
.tc-ampm { flex: 0 0 auto; height: 46px; min-width: 62px; background: rgba(212, 175, 55, 0.08); border: 1px solid rgba(212, 175, 55, 0.4); color: var(--gold); font: inherit; font-size: 0.85rem; letter-spacing: 0.08em; padding: 0 16px; border-radius: 999px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.tc-ampm:active { box-shadow: 0 0 18px rgba(212, 175, 55, 0.25); }
.tc-ampm:hover { background: rgba(212, 175, 55, 0.18); }
.tc-preview { margin: 12px 2px 0; color: var(--gold); font-size: 0.92rem; min-height: 1.3em; }
.tc-preview.bad { color: #e0455a; }
.tc-warning { margin-top: 8px; font-style: italic; opacity: 0.8; }
.tc-list { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.tc-item { border: 1px solid rgba(212, 175, 55, 0.2); background: rgba(212, 175, 55, 0.04); border-radius: 10px; padding: 10px 12px; }
.tc-item.delivered, .tc-item.lost { opacity: 0.6; }
.tc-item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tc-item-head b { color: var(--gold); }
.tc-count { color: var(--gold); font-size: 0.85rem; white-space: nowrap; }
.tc-done { color: rgba(230, 220, 180, 0.55); font-size: 0.82rem; }
.tc-item-text { margin-top: 6px; max-height: 130px; overflow-y: auto; word-break: break-word; font-size: 0.92rem; }
.tc-item-foot { margin-top: 6px; color: rgba(230, 220, 180, 0.45); font-size: 0.78rem; }
/* the arrival — a gold-wrapped letter out of time */
.tc-wrap { border: 1px solid rgba(212, 175, 55, 0.35); border-left: 3px solid var(--gold); background: linear-gradient(180deg, rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0.02)); border-radius: 8px; padding: 8px 10px 9px; }
.tc-seal { color: var(--gold); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 4px; }

/* red notification bubble on dashboard cards (waiting friend requests,
   unread chat) — the card calls you before you open it */
.card-bubble {
  position: absolute;
  top: 12px;
  left: 14px; /* the "online" chip owns the top-right corner */
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e0455a, #b8323f);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 10px rgba(224, 69, 90, 0.45);
  z-index: 2;
}
/* the capsule date rides the native calendar, dressed dark */
.tc-in-date input[type="date"] { color-scheme: dark; }
.tc-in-date input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.75) sepia(0.6) saturate(4) hue-rotate(8deg); opacity: 0.85; cursor: pointer; }

/* ============================ Stats card ============================ */
.stats-sub { color: var(--text-dim, #9a9a9a); margin: 0 0 14px; font-size: 0.92rem; }
.stats-games { display: flex; flex-wrap: wrap; gap: 14px; }
.stats-game-tile {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  min-width: 220px; padding: 18px 20px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.22);
  color: inherit; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.stats-game-tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), transparent);
}
.stats-game-tile:hover {
  border-color: rgba(212, 175, 55, 0.55); transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.12);
}
.sgt-name { display: block; font-size: 1.08rem; color: var(--gold, #d4af37); letter-spacing: 0.02em; }
.sgt-tag { display: block; margin-top: 4px; font-size: 0.8rem; color: var(--text-dim, #9a9a9a); }

.stats-board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.stats-board { overflow-x: auto; }
.stats-row {
  display: grid; grid-template-columns: minmax(160px, 2fr) repeat(7, minmax(58px, 1fr));
  gap: 8px; align-items: center; padding: 9px 12px; border-radius: 10px; min-width: 640px;
}
.stats-row:not(.stats-row-head) { cursor: pointer; transition: background 0.2s; }
.stats-row:not(.stats-row-head):hover { background: rgba(212, 175, 55, 0.08); }
.stats-row-head { color: var(--text-dim, #9a9a9a); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.sr-name { display: flex; align-items: center; gap: 8px; color: #eee; }
.sr-name .sr-link { color: var(--gold, #d4af37); font-style: normal; font-size: 0.8rem; opacity: 0.85; }
.sr-ava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(212, 175, 55, 0.4); }
.stats-empty { color: var(--text-dim, #9a9a9a); padding: 14px 6px; }

.stats-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stats-linked { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; color: #ddd; }
.stats-identity { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 2px; color: var(--text-dim, #9a9a9a); font-size: 0.78rem; }
.stats-linkpick { margin: 10px 0 4px; max-width: 340px; }
.stats-tree { margin-top: 12px; }
.stats-branch { list-style: none; margin: 0; padding: 0; }
.stats-branch.root { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.stats-branch.root > li {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 12px; padding: 12px 16px; min-width: 180px;
}
.stats-branch:not(.root) { padding-left: 14px; border-left: 1px solid rgba(212, 175, 55, 0.15); margin-top: 6px; }
.sb-node > .sb-key { color: var(--gold, #d4af37); font-size: 0.86rem; letter-spacing: 0.04em; text-transform: capitalize; }
.sb-leaf { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; font-size: 0.9rem; }
.sb-leaf .sb-key { color: #ccc; }
.sb-leaf .sb-val { color: var(--gold, #d4af37); font-variant-numeric: tabular-nums; }
.recents-pop .rp-item img {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 6px; border: 1px solid rgba(212, 175, 55, 0.35);
}
.recents-pop .rp-item em { color: var(--text-dim, #9a9a9a); font-style: normal; font-size: 0.78rem; }

/* ============ Projects card — the workshop shelf ============ */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.proj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 18px;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.proj-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--paccent, var(--gold)), transparent);
  filter: drop-shadow(0 0 6px var(--paccent, var(--gold)));
}
a.proj-card:hover {
  transform: translateY(-3px);
  border-color: var(--paccent, var(--gold));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}
.proj-glyph {
  font-size: 30px;
  line-height: 1;
  color: var(--paccent, var(--gold));
  text-shadow: 0 0 14px var(--paccent, var(--gold));
}
.proj-name {
  font-family: "Lobster", cursive;
  font-size: 22px;
  color: #f0dfa4;
  letter-spacing: 0.5px;
}
.proj-desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-dim);
}
.proj-made {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: rgba(212, 175, 55, 0.55);
  text-transform: uppercase;
}
.proj-card.waiting {
  opacity: 0.55;
}

/* ============ Court card — the debate room ============
   Pitch-black + gold like everything else; the clock and the one button are the
   only things that ever change colour, and they only ever go amber then red.
   PERF: the ray sweep and the clock pulse touch transform/opacity only. */
.ct-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .ct-cols { grid-template-columns: 1fr; } }

.ct-coderow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ct-code {
  flex: 1 1 auto; font-family: "Poppins", monospace; font-size: 17px; font-weight: 600;
  letter-spacing: 0.16em; color: var(--gold); background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212,175,55,0.22); border-radius: 10px; padding: 9px 14px; text-align: center;
}
.ct-addrow { display: flex; gap: 9px; align-items: center; margin-top: 10px; }
.ct-addrow .glass-input { flex: 1 1 auto; }
.ct-msg { font-size: 12px; color: var(--dim); min-height: 16px; margin: 8px 0 0; }
.ct-msg.bad { color: #f7a1a1; }
.ct-msg.good { color: #86e0ac; }
.ct-empty { font-style: italic; margin: 6px 0 0; }
.ct-fieldlabel {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); margin: 12px 0 7px;
}

.ct-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ct-list:empty { display: none; }
.ct-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
}
.ct-rowtxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ct-rowtxt b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.ct-rowtxt i { font-style: normal; font-size: 11.5px; color: var(--dim); }
.ct-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4a4a; flex: 0 0 auto; }
.ct-dot.on { background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,0.45); }
.ct-waiting { font-size: 11px; color: var(--gold); letter-spacing: 0.06em; }
.ct-av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; overflow: visible;
  background: linear-gradient(160deg, #1a1a1c, #0a0a0b); background-size: cover; background-position: center;
  border: 1px solid rgba(212,175,55,0.2);
  font-family: "Lobster", cursive; font-size: 17px; color: var(--gold);
}
.ct-badge {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; flex: 0 0 auto;
}
.ct-badge.won { color: var(--gold); background: rgba(212,175,55,0.14); border: 1px solid rgba(212,175,55,0.35); }
.ct-badge.lost { color: #f0a0a0; background: rgba(224,82,82,0.08); border: 1px solid rgba(224,82,82,0.3); }
.ct-badge.none { color: var(--dim); border: 1px solid rgba(255,255,255,0.09); }
.ct-linkbox { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ct-linkcode {
  font-family: "Poppins", monospace; font-size: 20px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--gold); text-shadow: 0 0 16px rgba(212,175,55,0.35);
}

/* ---- the arena ---- */
.ct-arena { display: flex; flex-direction: column; gap: 14px; }
.ct-top { display: flex; align-items: center; gap: 14px; }
.ct-topic { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--dim); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 3px 10px;
}
.ct-stage { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
@media (max-width: 820px) { .ct-stage { grid-template-columns: 1fr; } }

.ct-seatcard {
  position: relative; overflow: hidden; padding: 16px 16px 14px; border-radius: 15px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease;
}
.ct-seatcard::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--seat, var(--gold)) 50%, transparent);
  opacity: 0; transition: opacity 0.35s ease;
}
.ct-seatcard.speaking {
  border-color: var(--seat, var(--gold));
  box-shadow: 0 0 28px -6px var(--seat, var(--gold));
}
.ct-seatcard.speaking::before { opacity: 0.9; }
.ct-seatcard.knocked { opacity: 0.45; border-color: rgba(224,82,82,0.3); }
.ct-seatcard.away { opacity: 0.6; }
.ct-seathead { display: flex; align-items: center; gap: 10px; }
.ct-seatname { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-seatstatus { font-size: 9.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); }
.ct-seatcard.speaking .ct-seatstatus { color: var(--seat, var(--gold)); }
.ct-seatfoot { display: flex; gap: 14px; color: var(--dim); font-size: 11px; }
.ct-seatfoot b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.ct-pips { display: flex; gap: 7px; }
.ct-pip {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.35);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.ct-pip.on { background: linear-gradient(180deg, #e8cd6b, #a9852a); border-color: rgba(255,235,170,0.5); box-shadow: 0 0 12px rgba(212,175,55,0.35); }
.ct-pip.fatal { background: linear-gradient(180deg, #f07070, #a02020); border-color: rgba(255,170,170,0.5); box-shadow: 0 0 14px rgba(224,82,82,0.4); }
.ct-pip.pop { animation: ctPip 0.5s cubic-bezier(0.2,0.9,0.3,1.4); }
@keyframes ctPip { 0% { transform: scale(0.3); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

.ct-clockwrap { position: relative; width: 248px; height: 248px; display: grid; place-items: center; margin: 0 auto; --beat: var(--gold); --beat-soft: rgba(212,175,55,0.35); }
.ct-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ct-ring-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 9; }
.ct-ring-arc { fill: none; stroke: var(--beat); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 9px var(--beat-soft)); transition: stroke 0.4s ease; }
.ct-face { text-align: center; z-index: 1; }
.ct-who { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.ct-time { font-size: 50px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--beat); text-shadow: 0 0 30px var(--beat-soft); transition: color 0.4s ease; }
.ct-note { font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); margin-top: 7px; min-height: 14px; }
.ct-clockwrap.band-warn .ct-ring-arc { stroke-width: 11; }
.ct-clockwrap.band-final .ct-ring-arc { stroke-width: 13; }
.ct-clockwrap.band-warn .ct-time { font-size: 54px; }
.ct-clockwrap.band-final .ct-time { font-size: 58px; }
.ct-clockwrap.urgent .ct-face { animation: ctBeat 1s ease-in-out infinite; }
@keyframes ctBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* the one button */
.ct-well { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ct-button {
  appearance: none; font-family: inherit; cursor: pointer; position: relative; overflow: hidden;
  width: 262px; height: 64px; border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid rgba(255,235,170,0.5);
  background: linear-gradient(180deg, #e8cd6b 0%, #d4af37 45%, #a9852a 100%);
  color: #151204; text-shadow: 0 1px 0 rgba(255,255,255,0.25);
  box-shadow: 0 4px 20px rgba(212,175,55,0.3);
  transition: transform 0.16s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease, color 0.28s ease;
}
.ct-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ct-button:active { transform: translateY(1px) scale(0.99); }
.ct-label { font-size: 16px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.ct-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.ct-sub:empty { display: none; }
.ct-button.is-report {
  background: rgba(224,82,82,0.06); color: #ffb9b9; border-color: rgba(224,82,82,0.45);
  text-shadow: none; box-shadow: 0 0 26px -6px rgba(224,82,82,0.5);
}
.ct-button.is-report:hover { background: rgba(224,82,82,0.16); color: #fff; border-color: #e05252; }
.ct-button.is-locked {
  background: rgba(255,255,255,0.025); color: #6d6a64; border: 1px dashed rgba(255,255,255,0.13);
  box-shadow: none; text-shadow: none; cursor: default;
}
.ct-button.is-locked:hover { transform: none; filter: none; }
.ct-button.is-cooling {
  background: rgba(255,255,255,0.03); color: var(--dim); border-color: rgba(255,255,255,0.09);
  box-shadow: none; text-shadow: none; cursor: default;
}
.ct-button.is-cooling:hover { transform: none; filter: none; }
.ct-fill {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, rgba(212,175,55,0.5), rgba(232,205,107,0.72));
  transform: scaleX(0); transform-origin: left center; opacity: 0; transition: opacity 0.12s ease;
}
.ct-button.holding .ct-fill { opacity: 1; }
.ct-hint { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #625f59; min-height: 14px; }

/* the record rail */
.ct-record { display: flex; flex-direction: column; gap: 5px; }
.ct-record-head { font-size: 9.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #5a5852; text-align: center; }
.ct-record-list { max-height: 120px; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 3px; }
.ct-rec { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--dim); padding: 2px 8px; border-radius: 6px; }
.ct-rec time { font-variant-numeric: tabular-nums; color: #5a5852; font-size: 11px; flex: 0 0 auto; }
.ct-rec.hot { color: #e9a5a5; background: rgba(224,82,82,0.07); }
.ct-rec.win { color: var(--gold); background: rgba(212,175,55,0.12); }

/* the verdict */
.ct-verdict {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(760px 540px at 50% 45%, rgba(4,4,4,0.94), rgba(2,2,2,0.988));
}
.ct-rays {
  position: absolute; width: 1100px; height: 1100px; pointer-events: none; opacity: 0.42;
  background: repeating-conic-gradient(rgba(212,175,55,0.35) 0deg 8deg, transparent 8deg 30deg);
  mask-image: radial-gradient(circle, transparent 250px, #000 370px, transparent 66%);
  -webkit-mask-image: radial-gradient(circle, transparent 250px, #000 370px, transparent 66%);
  animation: ctTurn 46s linear infinite;
}
@keyframes ctTurn { to { transform: rotate(360deg); } }
.ct-verdict.lost .ct-rays, .ct-verdict.draw .ct-rays { display: none; }
.ct-verdict-card { position: relative; text-align: center; max-width: 520px; padding: 0 26px; }
.ct-vkicker { font-size: 10.5px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.ct-vtitle { font-family: "Lobster", cursive; font-weight: 400; font-size: 52px; line-height: 1.05; color: var(--gold); text-shadow: 0 0 40px rgba(212,175,55,0.35); margin: 0 0 12px; }
.ct-verdict.lost .ct-vtitle { color: #d86a6a; text-shadow: 0 0 34px rgba(224,82,82,0.4); }
.ct-verdict.draw .ct-vtitle { color: var(--dim); text-shadow: none; }
.ct-vline { color: var(--dim); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.ct-vstats { display: flex; gap: 26px; justify-content: center; margin-bottom: 24px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); }
.ct-vstat b { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ct-vstat span { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ct-vactions { display: flex; gap: 11px; justify-content: center; }

/* modals reuse .chat-modal; these are the Court's own bits */
/* THE HIDDEN LAW (found by eyes-on, 2026-09-03): guhens.css has no global
   [hidden] guard, so any Court element that sets `display` would keep painting
   while carrying the hidden attribute — the verdict overlay was covering a live
   debate, and the target picker showed up in two-person arguments. Every Court
   element that sets display must repeat this guard. */
.ct-modal[hidden],
.ct-verdict[hidden],
.ct-targets[hidden],
.ct-arena[hidden],
#ctArena[hidden],
#ctLobby[hidden] { display: none !important; }
.ct-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ct-report-card { position: relative; overflow: hidden; }
.ct-report-card h3 { color: #ef9a9a; }
.ct-drain { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; }
.ct-drain i { display: block; height: 100%; background: #e05252; transform-origin: left center; transform: scaleX(1); }
.ct-count { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ct-targets { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.ct-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-chip {
  appearance: none; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: 999px;
  color: var(--dim); font-size: 12px; font-weight: 500; padding: 6px 14px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ct-chip:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.ct-chip.active { color: var(--gold); border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.14); }
.ct-menu { display: flex; flex-direction: column; gap: 7px; }
.ct-menuitem {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 11px;
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ct-menuitem:hover { border-color: rgba(212,175,55,0.35); color: var(--gold); }
.ct-menuitem:disabled { opacity: 0.4; cursor: default; }
.ct-menuitem b { font-size: 13.5px; font-weight: 600; }
.ct-menuitem span { font-size: 11.5px; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .ct-rays { animation: none; }
  .ct-clockwrap.urgent .ct-face { animation: none; }
}

.ct-button.is-ask {
  background: rgba(91, 155, 213, 0.07); color: #bcd9f5;
  border-color: rgba(91, 155, 213, 0.45); text-shadow: none;
  box-shadow: 0 0 24px -8px rgba(91, 155, 213, 0.55);
}
.ct-button.is-ask:hover { background: rgba(91, 155, 213, 0.17); color: #fff; border-color: #5b9bd5; }
.ct-button.is-asked {
  background: rgba(91, 155, 213, 0.05); color: #7fa8cd;
  border: 1px solid rgba(91, 155, 213, 0.3); text-shadow: none; box-shadow: none;
}
.ct-button.is-asked .ct-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #5b9bd5; margin-right: 9px; vertical-align: middle;
  box-shadow: 0 0 9px rgba(91, 155, 213, 0.7);
}
.ct-seatcard.wants { border-color: rgba(91, 155, 213, 0.55); }
.ct-seatcard.wants .ct-seatstatus { color: #8ec2f0; }
.ct-roomcode {
  font-size: 34px; font-weight: 700; letter-spacing: 0.28em;
  color: var(--gold); text-shadow: 0 0 24px rgba(212,175,55,0.35);
  text-align: center; padding: 6px 0 2px;
}
.ct-tag.code { color: var(--gold); border-color: rgba(212,175,55,0.35); letter-spacing: 0.18em; }
.ct-orline {
  display: flex; align-items: center; gap: 12px; color: #5a5852;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  margin: 20px 0 14px;
}
.ct-orline::before, .ct-orline::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
}