/* ===== NEXUS — Dark Theme ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg-void: #080a0f;
  --bg-base: #0d1017;
  --bg-surface: #121620;
  --bg-elevated: #181e2c;
  --bg-hover: #1e2638;
  --bg-active: #242d42;

  --border: rgba(255,255,255,0.06);
  --border-bright: rgba(255,255,255,0.12);

  --accent: #5b6ef5;
  --accent-glow: rgba(91,110,245,0.35);
  --accent-hover: #6b7ef8;
  --accent-muted: rgba(91,110,245,0.15);

  --green: #3dd68c;
  --green-glow: rgba(61,214,140,0.3);
  --red: #f05454;
  --red-glow: rgba(240,84,84,0.3);
  --yellow: #f5c842;
  --orange: #f58c42;

  --text-primary: #e8ecf5;
  --text-secondary: #8892a4;
  --text-muted: #4a5568;
  --text-accent: #a0aaff;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.6);

  --sidebar-w: 220px;
  --transition: 0.18s ease;
}

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

html, body {
  height: 100%;
  height: 100dvh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg-void);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

/* ===== SCREENS ===== */
.screen { position: absolute; inset: 0; display: none; min-height: 0; }
.screen.active { display: flex; }

/* ===== AUTH ===== */
#auth-screen {
  justify-content: center;
  align-items: flex-start;
  background: var(--bg-void);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}
@supports (height: 100dvh) {
  #auth-screen { min-height: 100dvh; }
}

.auth-bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  animation: pulse 8s ease-in-out infinite;
}
.orb1 { width: 500px; height: 500px; background: var(--accent); top: -150px; left: -150px; }
.orb2 { width: 400px; height: 400px; background: #8b3cf7; bottom: -100px; right: -100px; animation-delay: -3s; }
.orb3 { width: 300px; height: 300px; background: var(--green); top: 50%; left: 50%; transform: translate(-50%,-50%); animation-delay: -6s; }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50% { transform: scale(1.1); opacity: 0.25; }
}

.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.auth-container {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}

.auth-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 800; letter-spacing: 4px;
  color: var(--text-primary);
}
.logo-mark { width: 36px; height: 36px; color: var(--accent); }

.auth-card {
  width: 100%;
  background: rgba(18,22,32,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.05);
}

.auth-tabs {
  display: flex; gap: 4px;
  background: var(--bg-void);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}
.tab-btn {
  flex: 1; padding: 8px;
  background: none; border: none;
  color: var(--text-secondary);
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.profile-settings-tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:18px; overflow-x:auto; }
.profile-settings-tab { background:none; border:0; color:var(--text-secondary); padding:9px 10px; cursor:pointer; font:600 12px 'Syne',sans-serif; white-space:nowrap; border-bottom:2px solid transparent; }
.profile-settings-tab.active { color:var(--text-primary); border-bottom-color:var(--accent); }
.profile-settings-panel { display:none; }
.profile-settings-panel.active { display:block; }
body.light-theme { --bg-void:#dfe7f2; --bg-base:#eef3f9; --bg-surface:#ffffff; --bg-elevated:#f7f9fc; --bg-hover:#dbe5f4; --text-primary:#101827; --text-secondary:#35445f; --text-muted:#5b6a82; --border:#aebbd0; --border-bright:#8293ae; }
body.pro-app-theme {
  --accent:var(--theme-primary);
  --accent-hover:color-mix(in srgb,var(--theme-primary) 82%,white);
  --accent-muted:color-mix(in srgb,var(--theme-primary) 18%,transparent);
  --accent-glow:color-mix(in srgb,var(--theme-primary) 38%,transparent);
  --text-accent:color-mix(in srgb,var(--theme-primary) 55%,white);
}

/* Typography preference: Nexus defaults to its expressive Syne face.
   Simplistic UI deliberately switches the workspace back to Inter. */
body:not(.simplistic-ui),
body:not(.simplistic-ui) button,
body:not(.simplistic-ui) input,
body:not(.simplistic-ui) textarea,
body:not(.simplistic-ui) select,
body:not(.simplistic-ui) .shop-rarity,
body:not(.simplistic-ui) .shop-card-name,
body:not(.simplistic-ui) .shop-pack-card .shop-card-name,
body:not(.simplistic-ui) .profile-popup-name,
body:not(.simplistic-ui) .dm-profile-name,
body:not(.simplistic-ui) .msg-author,
body:not(.simplistic-ui) .user-info .display-name,
body:not(.simplistic-ui) .person-info .display-name {
  font-family: 'Syne', sans-serif !important;
}

body.simplistic-ui,
body.simplistic-ui button,
body.simplistic-ui input,
body.simplistic-ui textarea,
body.simplistic-ui select,
body.simplistic-ui .shop-rarity,
body.simplistic-ui .shop-card-name,
body.simplistic-ui .shop-pack-card .shop-card-name,
body.simplistic-ui .profile-popup-name,
body.simplistic-ui .dm-profile-name,
body.simplistic-ui .msg-author,
body.simplistic-ui .user-info .display-name,
body.simplistic-ui .person-info .display-name {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* A tighter conversation rhythm, comparable to Discord while keeping grouped replies readable. */
.message:not(.grouped) { margin-top: 8px; }
body.pro-app-theme.theme-style-gradient:not(.light-theme) {
  --bg-void:color-mix(in srgb,var(--theme-primary) 8%,#07090e);
  --bg-base:color-mix(in srgb,var(--theme-secondary) 7%,#0d1017);
  --bg-surface:color-mix(in srgb,var(--theme-primary) 10%,#121620);
  --bg-elevated:color-mix(in srgb,var(--theme-secondary) 12%,#181e2c);
  --bg-hover:color-mix(in srgb,var(--theme-primary) 18%,#1e2638);
}
body.pro-app-theme.theme-style-gradient.light-theme {
  --bg-void:color-mix(in srgb,var(--theme-primary) 9%,#edf2f8);
  --bg-base:color-mix(in srgb,var(--theme-secondary) 7%,#f5f8fc);
  --bg-surface:color-mix(in srgb,var(--theme-primary) 5%,white);
  --bg-elevated:color-mix(in srgb,var(--theme-secondary) 8%,white);
  --bg-hover:color-mix(in srgb,var(--theme-primary) 15%,#edf2f8);
}
body.pro-app-theme.theme-style-gradient #main-screen {
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary));
}
body.pro-app-theme.theme-style-gradient .server-rail {
  background:linear-gradient(180deg,var(--bg-void),color-mix(in srgb,var(--theme-primary) 14%,var(--bg-void)));
}
body.pro-app-theme.theme-style-gradient .sidebar {
  background:linear-gradient(155deg,var(--bg-surface),color-mix(in srgb,var(--theme-secondary) 12%,var(--bg-surface)));
}
body.pro-app-theme.theme-style-gradient .view {
  background:linear-gradient(145deg,var(--bg-base),color-mix(in srgb,var(--theme-primary) 8%,var(--bg-base)));
}
body.pro-app-theme.theme-style-solid:not(.light-theme) {
  --bg-void:color-mix(in srgb,var(--theme-primary) 6%,#07090e);
  --bg-base:color-mix(in srgb,var(--theme-primary) 7%,#0d1017);
  --bg-surface:color-mix(in srgb,var(--theme-primary) 9%,#121620);
  --bg-elevated:color-mix(in srgb,var(--theme-primary) 12%,#181e2c);
  --bg-hover:color-mix(in srgb,var(--theme-primary) 17%,#1e2638);
}
body.pro-app-theme.theme-style-solid.light-theme {
  --bg-void:color-mix(in srgb,var(--theme-primary) 7%,#edf2f8);
  --bg-base:color-mix(in srgb,var(--theme-primary) 5%,#f5f8fc);
  --bg-surface:color-mix(in srgb,var(--theme-primary) 4%,white);
  --bg-elevated:color-mix(in srgb,var(--theme-primary) 7%,white);
  --bg-hover:color-mix(in srgb,var(--theme-primary) 14%,#edf2f8);
}
body.pro-app-theme.theme-style-glass #main-screen {
  background:linear-gradient(135deg,var(--theme-primary),var(--theme-secondary));
}
body.pro-app-theme.theme-style-glass .server-rail,
body.pro-app-theme.theme-style-glass .sidebar,
body.pro-app-theme.theme-style-glass .view,
body.pro-app-theme.theme-style-glass .chat-header,
body.pro-app-theme.theme-style-glass .message-input-wrap {
  background:color-mix(in srgb,var(--bg-surface) 84%,transparent);
  backdrop-filter:blur(22px) saturate(1.25);
}
body.pro-app-theme.theme-motion #main-screen {
  background-size:240% 240%;
  animation:nexus-app-theme-shift 14s ease-in-out infinite;
}
body.pro-app-theme.theme-motion .server-rail,
body.pro-app-theme.theme-motion .sidebar,
body.pro-app-theme.theme-motion .view {
  background-size:220% 220%;
  animation:nexus-app-theme-shift 14s ease-in-out infinite;
}
@keyframes nexus-app-theme-shift {
  0%,100% { background-position:0% 45%; }
  50% { background-position:100% 55%; }
}
@media (prefers-reduced-motion:reduce) {
  body.pro-app-theme.theme-motion #main-screen,
  body.pro-app-theme.theme-motion .server-rail,
  body.pro-app-theme.theme-motion .sidebar,
  body.pro-app-theme.theme-motion .view { animation:none; }
}
.settings-modal { width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; display:flex; flex-direction:column; background:var(--bg-void); }
.settings-modal .modal-header { flex:0 0 58px; padding:0 26px; border-bottom:1px solid var(--border); }
.settings-modal .modal-body { padding:34px 44px; overflow-y:auto; }
.settings-modal .profile-settings-tabs { position:absolute; left:0; top:59px; bottom:0; width:260px; margin:0; padding:24px 14px; display:flex; flex-direction:column; border:0; border-right:1px solid var(--border); background:var(--bg-base); overflow:auto; }
.settings-modal .profile-settings-tab { text-align:left; padding:11px 13px; border-radius:6px; border:0; font-size:13px; }
.settings-modal .profile-settings-tab.active { background:var(--bg-hover); color:var(--text-primary); }
.settings-modal .modal-body { margin-left:260px; max-width:860px; width:calc(100% - 260px); }
.appearance-selected { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.appearance-selected>div { padding:14px; border:1px solid var(--border); background:var(--bg-surface); }
.appearance-selected span,.appearance-selected b { display:block; }.appearance-selected span { color:var(--text-muted); font-size:11px; margin-bottom:5px; }.appearance-selected b { font-size:14px; }
.app-theme-studio { margin-top:28px; padding:18px; border:1px solid var(--border-bright); border-radius:8px; background:var(--bg-surface); }
.app-theme-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.app-theme-heading span { color:var(--yellow); font-size:10px; font-weight:800; }
.app-theme-heading h3 { margin-top:3px; font-size:17px; }
.app-theme-heading>b { padding:5px 8px; border:1px solid var(--border-bright); border-radius:5px; color:var(--text-secondary); font-size:10px; text-transform:uppercase; }
.app-theme-preview { position:relative; display:grid; grid-template-columns:42px 92px 1fr; height:128px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:linear-gradient(135deg,var(--preview-a,#5b6ef5),var(--preview-b,#a855f7)); }
.app-theme-preview>div { margin:10px 0 10px 10px; border-radius:4px; background:rgba(8,10,15,.78); }
.app-theme-preview>div:nth-child(2) { background:rgba(18,22,32,.82); }
.app-theme-preview>div:nth-child(3) { margin-right:10px; background:rgba(13,16,23,.88); }
.app-theme-preview strong { position:absolute; left:61px; top:22px; color:#fff; font-size:11px; letter-spacing:2px; }
.app-theme-locked { margin-top:13px; color:var(--text-secondary); font-size:12px; }
.app-theme-controls { margin-top:16px; display:grid; gap:13px; }
.app-theme-controls>label,.app-theme-color-row label { display:grid; gap:6px; color:var(--text-secondary); font-size:11px; font-weight:700; }
.app-theme-controls select { min-height:40px; padding:0 10px; border:1px solid var(--border-bright); border-radius:6px; background:var(--bg-void); color:var(--text-primary); font:600 12px 'Syne',sans-serif; }
.app-theme-color-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.app-theme-color-row input[type=color] { width:100%; height:42px; padding:3px; border:1px solid var(--border-bright); border-radius:6px; background:var(--bg-void); }
@media (max-width:700px) { .settings-modal .profile-settings-tabs { width:100%; height:auto; top:59px; bottom:auto; flex-direction:row; border-right:0; border-bottom:1px solid var(--border); padding:8px; }.settings-modal .modal-body { margin-left:0; margin-top:55px; width:100%; padding:24px 18px; }.settings-modal .profile-settings-tab { white-space:nowrap; } }

/* Keep Settings independent from the compact modal rules declared later. */
.modal.settings-modal { width:100vw; max-width:none; height:100vh; border-radius:0; display:flex; flex-direction:column; }
.modal.settings-modal .modal-body { background:var(--bg-void); color:var(--text-primary); flex:1; margin-left:260px; width:calc(100% - 260px); max-width:920px; padding:38px 54px; overflow-y:auto; }
.modal.settings-modal .profile-settings-tabs { z-index:2; }
@media (max-width:700px) { .modal.settings-modal .modal-body { margin-left:0; margin-top:55px; width:100%; padding:24px 18px; } }

.auth-form h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.auth-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 20px; }

.auth-form {
  display: flex; flex-direction: column; gap: 14px;
}

.field-group {
  display: flex; flex-direction: column; gap: 6px;
}
.field-group label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-secondary);
}
.field-group input, .field-group textarea, .field-group select {
  background: var(--bg-void);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-primary);
  font-family: 'Syne', sans-serif;
  font-size: 14px;
  outline: none;
  transition: var(--transition);
}
.field-group input:focus, .field-group textarea:focus, .field-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}
.field-group select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.field-hint {
  font-size: 11px; color: var(--text-muted);
}

.form-error {
  font-size: 13px; color: var(--red);
  min-height: 18px;
  display: none;
}
.form-error.visible { display: block; }

.btn-primary {
  padding: 11px 20px;
  background: var(--accent);
  border: none; border-radius: var(--radius-sm);
  color: #fff; font-family: 'Syne', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 0 20px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  padding: 8px 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  display: inline-block;
}
.btn-secondary:hover { background: var(--bg-hover); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* ===== MAIN APP ===== */
#main-screen {
  display: none;
  flex-direction: row;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
#main-screen.active { display: flex; }

/* ===== SIDEBAR ===== */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
}
.app-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: 3px;
  color: var(--accent);
}

.sidebar-nav {
  flex: 1; padding: 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}

.nav-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  background: none; border: none;
  color: var(--text-secondary);
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: var(--transition);
  text-align: left; position: relative;
}
.nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-btn.active { background: var(--accent-muted); color: var(--accent); }
.nav-btn .badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}

.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--border);
}

.user-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: default;
}

.avatar-wrap { position: relative; flex-shrink: 0; overflow: visible; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: var(--text-secondary);
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--border-bright);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 72px; height: 72px; font-size: 28px; }
.avatar.xl { width: 80px; height: 80px; font-size: 32px; }

.status-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  background: var(--text-muted);
  z-index: 10;
}
.status-dot.online { background: var(--green); box-shadow: 0 0 6px var(--green-glow); }
.status-dot.idle { background: var(--yellow); }
.status-dot.dnd { background: var(--red); box-shadow: 0 0 6px var(--red-glow); }
.status-dot.discord-status { width:14px; height:14px; border-color:var(--bg-surface); box-shadow:0 0 0 2px var(--bg-surface), 0 0 7px currentColor; }
.status-dot.discord-status::after { content:'D'; position:absolute; inset:2px; display:grid; place-items:center; border-radius:50%; background:#0d1320; color:#fff; font:800 8px Arial,sans-serif; line-height:1; text-shadow:none; }
body.light-theme .status-dot.discord-status::after { background:#172033; color:#fff; }

.user-info { flex: 1; min-width: 0; }
.user-info .display-name {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-info .username {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.user-actions { display: flex; gap: 2px; }
.icon-btn {
  width: 28px; height: 28px;
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn.call-btn:hover { color: var(--green); }

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  min-width: 0;
}

.view { position: absolute; inset: 0; display: none; flex-direction: column; }
.view.active { display: flex; }

/* ===== FRIENDS VIEW ===== */
#view-friends {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 16px;
}
.view-header h1 { font-size: 22px; font-weight: 800; }

.search-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  min-width: 260px;
}
.search-bar svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.search-bar input {
  flex: 1; background: none; border: none;
  color: var(--text-primary); font-family: 'Syne', sans-serif; font-size: 13px;
  outline: none;
}
.search-bar input::placeholder { color: var(--text-muted); }

.friends-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px; padding-bottom: 0;
}
.ftab {
  padding: 8px 16px;
  background: none; border: none;
  color: var(--text-secondary); font-family: 'Syne', sans-serif;
  font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: var(--transition);
  margin-bottom: -1px;
}
.ftab:hover { color: var(--text-primary); }
.ftab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ftab #pending-count {
  background: var(--red); color: #fff;
  font-size: 10px; padding: 1px 5px;
  border-radius: 99px; margin-left: 4px;
}

.ftab-panel { display: none; }
.ftab-panel.active { display: block; }

.search-results {
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
}

.search-result-item, .request-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  transition: var(--transition);
}
.search-result-item:hover { background: var(--bg-hover); }

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.friend-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 14px 12px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.friend-card:hover { border-color: var(--border-bright); background: var(--bg-hover); }
.friend-card .avatar-wrap { margin-bottom: 2px; }
.friend-card .avatar { width: 48px; height: 48px; font-size: 18px; }
.friend-card .person-info { width: 100%; min-width: 0; }
.friend-card .card-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

.person-info { flex: 1; min-width: 0; }
.person-info .display-name {
  font-size: 14px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person-info .username {
  font-size: 12px; color: var(--text-muted);
}
.person-info .status {
  font-size: 11px;
  color: var(--text-muted);
}
.person-info .status.online { color: var(--green); }
.person-info .status.idle { color: var(--yellow); }
.person-info .status.dnd { color: var(--red); }

.card-actions { display: flex; gap: 4px; margin-left: auto; }

.action-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; transition: var(--transition);
}
.action-btn.primary { background: var(--accent); color: #fff; }
.action-btn.primary:hover { background: var(--accent-hover); }
.action-btn.danger { background: rgba(240,84,84,0.15); color: var(--red); }
.action-btn.danger:hover { background: rgba(240,84,84,0.25); }
.action-btn.success { background: rgba(61,214,140,0.15); color: var(--green); }
.action-btn.success:hover { background: rgba(61,214,140,0.25); }
.action-btn.ghost { background: var(--bg-hover); color: var(--text-secondary); }
.action-btn.ghost:hover { background: var(--bg-active); color: var(--text-primary); }

.pending-section { margin-bottom: 24px; }
.section-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.request-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
}

.empty-state {
  text-align: center; padding: 48px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 40px; margin-bottom: 12px; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.empty-state p { font-size: 13px; }

/* ===== DMs VIEW ===== */
#view-dms {
  padding: 0;
  overflow: hidden;
}

.dm-layout {
  display: flex; width: 100%; height: 100%;
}

.dm-sidebar {
  width: 240px; min-width: 240px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.dm-sidebar-header {
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
}
.dm-sidebar-header h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }

.dm-list { flex: 1; overflow-y: auto; padding: 6px; }

.dm-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
}
.dm-item:hover { background: var(--bg-hover); }
.dm-item.active { background: var(--bg-active); }

.dm-item .person-info { min-width: 0; }
.dm-item .display-name { font-size: 13px; font-weight: 700; }
.dm-item .last-msg {
  font-size: 11px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-item .unread-badge {
  background: var(--accent);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 5px; border-radius: 99px;
  margin-left: auto;
}

/* ===== CHAT ===== */
.chat-area {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden;
}

.chat-empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-muted);
  gap: 8px;
}

.chat-container {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}

.chat-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-surface);
  flex-shrink: 0;
  position: relative;
}

.chat-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(61,214,140,0.65) 50%, transparent 100%);
}
.chat-peer-info { display: flex; align-items: center; gap: 10px; }
.chat-peer-info .display-name { font-size: 14px; font-weight: 700; }
.chat-peer-info .username { font-size: 12px; color: var(--text-muted); }
.channel-topic-header {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-actions { display: flex; gap: 4px; }

.messages-wrap {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.messages-list { display: flex; flex-direction: column; gap: 2px; }

.message-date-separator {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:18px 0 8px;
  color:var(--text-muted);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.message-date-separator::before,
.message-date-separator::after {
  content:'';
  height:1px;
  flex:1;
  background:var(--border);
}
.message-date-separator span { flex:0 0 auto }

.message {
  display: flex; gap: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.message:hover { background: rgba(255,255,255,0.02); }

.message.grouped { margin-top: 0; }
.message:not(.grouped) { margin-top: 8px; }

.message .avatar { flex-shrink: 0; align-self: flex-start; margin-top: 2px; }
.message.grouped .avatar { visibility: hidden; }
.message.grouped .avatar-deco { display: none; }

.msg-body { flex: 1; min-width: 0; }
.msg-header {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px;
}
.msg-author {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.msg-time {
  font-size: 11px; color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.message.grouped .msg-header { display: none; }
.msg-content {
  font-size: 14px; color: var(--text-primary);
  line-height: 1.5; word-break: break-word;
  white-space: pre-wrap;
}
.msg-reply-preview {
  border-left: 2px solid rgba(255,255,255,0.18);
  padding-left: 8px;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-reply-preview strong {
  color: var(--text-primary);
  font-weight: 700;
}
.msg-pinned-badge {
  margin-left: 6px;
  font-size: 10px;
  color: var(--yellow);
  letter-spacing: 0.4px;
}

.typing-indicator {
  font-size: 12px; color: var(--text-muted);
  padding: 4px 8px;
  display: flex; align-items: center; gap: 6px;
}
.typing-dots { display: flex; gap: 3px; align-items: center; }
.typing-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--text-muted);
  animation: bounce 1.4s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

.message-input-wrap {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: flex-end; gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-surface);
  flex-shrink: 0;
}

.channel-reply-preview {
  width: 100%;
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-bottom: 2px;
  background: rgba(255,255,255,0.02);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.channel-reply-preview button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}

.channel-reply-preview button:hover {
  color: var(--text-primary);
}

.message-input-wrap textarea {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-family: 'Syne', sans-serif; font-size: 14px;
  outline: none; resize: none;
  max-height: 150px;
  line-height: 1.5;
  transition: var(--transition);
}
.message-input-wrap textarea:focus {
  border-color: var(--accent);
}

.send-btn {
  width: 38px; height: 38px;
  background: var(--accent);
  border: none; border-radius: var(--radius-sm);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
.send-btn svg { width: 16px; height: 16px; }
.send-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
.send-btn:active { transform: scale(0.97); }

/* ===== MODALS ===== */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-overlay.active { display: flex; }

.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-xl);
  width: 90%; max-width: 420px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { font-size: 16px; font-weight: 700; }
.modal-close {
  width: 30px; height: 30px;
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-close svg { width: 16px; height: 16px; }

.modal-body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}

.avatar-upload-area {
  display: flex; align-items: center; gap: 16px;
}
.avatar-preview {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  overflow: hidden; flex-shrink: 0;
  color: var(--text-secondary);
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-preview.decoration-host { position: relative; overflow: visible; }
.avatar-upload-info { display: flex; flex-direction: column; gap: 4px; }

/* ===== CALL MODAL ===== */
.call-modal {
  max-width: 320px;
  text-align: center;
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}

.call-ring-anim {
  position: relative;
  width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
}

.ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--green);
  opacity: 0;
  animation: ring-pulse 2s ease-out infinite;
}
.r1 { width: 80px; height: 80px; }
.r2 { width: 100px; height: 100px; animation-delay: 0.5s; }
.r3 { width: 120px; height: 120px; animation-delay: 1s; }

@keyframes ring-pulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.call-info .call-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
.call-info .call-name {
  font-size: 22px; font-weight: 800;
}

.call-actions {
  display: flex; gap: 16px;
}
.call-btn-accept, .call-btn-decline {
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.call-btn-accept svg, .call-btn-decline svg { width: 22px; height: 22px; }
.call-btn-accept {
  background: var(--green);
  color: var(--bg-void);
  box-shadow: 0 0 20px var(--green-glow);
}
.call-btn-accept:hover { transform: scale(1.08); }
.call-btn-decline {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 20px var(--red-glow);
}
.call-btn-decline:hover { transform: scale(1.08); }

/* ===== CALL HUD ===== */
.call-hud {
  position: fixed;
  top: 58px; left: 80px; right: 0;
  z-index: 1000;
  height: 282px;
  animation: call-stage-in 0.25s ease;
  background:#07090e;
  border-bottom:1px solid var(--border);
}

@keyframes call-stage-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.call-hud-inner {
  height:100%;
  padding:28px 44px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  white-space:nowrap;
  position:relative;
}

.call-hud-peer { display:flex; flex-direction:column; align-items:center; gap:9px; }
.call-hud-peer .avatar { width:112px !important; height:112px !important; font-size:36px; border:2px solid var(--green); }
.call-hud-name { font-size:18px; font-weight:800; text-align:center; }
.call-hud-status { font-size:12px; color:var(--green); text-align:center; }
.call-hud-timer {
  position:absolute; top:16px; right:24px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:700; color:var(--text-secondary);
}

.call-hud-controls { position:absolute; bottom:22px; display:flex; gap:10px; }
.call-hud .hud-btn { width:48px; height:48px; border-radius:12px; background:#1b202b; }
.call-hud .hud-btn-wide { width:auto; min-width:92px; padding:0 13px; font:700 12px 'Syne',sans-serif; }
.call-hud .hud-btn.end { background:var(--red); }
.chat-container.dm-call-active .messages-wrap { padding-top:282px; }
.call-games-modal { max-width: 540px; }
.game-picker { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.game-choice { min-height:120px; border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); border-radius:6px; cursor:pointer; font:inherit; text-align:left; padding:14px; }
.game-choice strong { display:block; font-size:18px; margin-bottom:5px; }.game-choice span { color:var(--text-muted); font-size:12px; }
.game-table { display:flex; flex-direction:column; gap:12px; }.game-cards { display:flex; gap:5px; flex-wrap:wrap; }.game-card { width:34px; height:48px; background:#f7f8fb; color:#192133; border-radius:4px; display:grid; place-items:center; font:700 13px monospace; }.game-card.hidden { background:linear-gradient(135deg,#5366f5,#a855f7); color:transparent; }.game-player { border:1px solid var(--border); padding:9px; border-radius:5px; }.game-player.turn { border-color:var(--accent); }.game-actions { display:flex; gap:8px; flex-wrap:wrap; }.game-actions button { flex:1; min-width:90px; }
.call-blackjack-table.blackjack-window { position:static; width:100%; max-width:none; box-shadow:none; border-color:#506f8b; }
.call-blackjack-table .blackjack-window-body { padding:10px; }.call-blackjack-table .blackjack-table-felt { min-height:560px; padding:28px 44px; display:flex; flex-direction:column; justify-content:space-between; }
.call-blackjack-dealer { display:flex; flex-direction:column; align-items:center; }.call-blackjack-dealer .blackjack-head { width:100%; }.call-blackjack-dealer .blackjack-cards { justify-content:center; }
.call-blackjack-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:end; }.call-blackjack-seat { min-width:0; }.call-blackjack-seat .blackjack-cards { justify-content:center; }
.call-poker-table.blackjack-window { position:static; width:100%; max-width:none; box-shadow:none; border-color:#8058b6; }
.call-poker-table .blackjack-window-body { padding:10px; }.poker-table-felt { min-height:560px; padding:28px 44px; border:2px solid #b894db; border-radius:50% 50% 38% 38% / 18% 18% 14% 14%; background:radial-gradient(ellipse at 50% 42%,#5b2869,#291b51 64%,#15122e); box-shadow:inset 0 0 0 9px rgba(0,0,0,.18),inset 0 0 38px rgba(0,0,0,.58); display:flex; flex-direction:column; justify-content:space-between; }
.poker-community { display:flex; flex-direction:column; align-items:center; }.poker-community .blackjack-head { width:100%; }.poker-community .blackjack-cards { justify-content:center; }
.call-poker-players { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:end; }.call-poker-seat { min-width:0; padding:0 7px 8px; border:1px solid transparent; border-radius:8px; }.call-poker-seat.turn { border-color:#f5d76f; background:rgba(245,215,111,.1); }.call-poker-seat .blackjack-cards { justify-content:center; }
.call-round-picker { display:inline-flex; align-items:center; gap:7px; color:var(--text-secondary); font-size:12px; font-weight:700; }.call-round-picker select { padding:7px 9px; border:1px solid var(--border-bright); border-radius:5px; background:var(--bg-void); color:var(--text-primary); font:inherit; }
@media(max-width:620px){ .call-blackjack-table .blackjack-table-felt,.poker-table-felt{min-height:440px;padding:20px 16px}.call-blackjack-players,.call-poker-players{grid-template-columns:1fr;gap:12px}.call-blackjack-seat .blackjack-cards,.call-poker-seat .blackjack-cards{justify-content:flex-start} }
.activity-invite-modal { width:min(420px,calc(100vw - 32px)); padding:22px; display:grid; grid-template-columns:54px 1fr; gap:14px; }
.activity-invite-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#5b6ef5,#a855f7); font-size:26px; color:#fff; }
.activity-invite-copy h2 { margin:3px 0 5px; font-size:18px; }.activity-invite-copy p { margin:0; color:var(--text-secondary); font-size:13px; }
.activity-invite-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
@media (max-width:720px) { .call-hud { left:0; top:0; height:240px; }.call-hud-inner { padding:20px; }.call-hud-peer .avatar { width:86px !important; height:86px !important; }.chat-container.dm-call-active .messages-wrap { padding-top:240px; } }

.call-avatar-viewport {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}
.call-avatar-viewport .avatar {
  width: 112px !important;
  height: 112px !important;
  overflow: visible !important;
}
.call-avatar-viewport .avatar-deco,
.call-avatar-viewport .premium-deco,
.call-avatar-viewport canvas,
.call-avatar-viewport .stormveil-layer,
.call-avatar-viewport .heheshuis-layer,
.call-avatar-viewport .deco-shine-overlay {
  -webkit-mask-image: radial-gradient(circle, transparent 0 61%, #000 67%);
  mask-image: radial-gradient(circle, transparent 0 61%, #000 67%);
}
.call-avatar-viewport .premium-intrusion,
.call-avatar-viewport .premium-strike,
.call-avatar-viewport .premium-glass,
.call-avatar-viewport .premium-wisp {
  display: none !important;
}
@media (max-width:720px) {
  .call-avatar-viewport { width:86px; height:86px; }
  .call-avatar-viewport .avatar { width:86px !important; height:86px !important; }
}

.hud-btn {
  width: 34px; height: 34px;
  border-radius: 50%; border: none;
  background: var(--bg-hover);
  color: var(--text-secondary);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.hud-btn svg { width: 16px; height: 16px; }
.hud-btn:hover { background: var(--bg-active); color: var(--text-primary); }
.hud-btn.muted { background: var(--red); color: #fff; }
.hud-btn.video-off { background: #d18d28; color: #111; }
.hud-btn.end {
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 10px var(--red-glow);
}
.hud-btn.end:hover { transform: scale(1.08); }

/* ===== TOASTS ===== */
.toast-container {
  position: fixed; bottom: 20px; right: 20px;
  z-index: 2000;
  display: flex; flex-direction: column; gap: 8px;
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-md);
  max-width: 300px;
  animation: toast-in 0.3s ease;
  display: flex; align-items: center; gap: 8px;
}
.toast.success { border-color: var(--green); }
.toast.error { border-color: var(--red); }
.toast.info { border-color: var(--accent); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ===== UTILS ===== */
.divider {
  height: 1px; background: var(--border);
  margin: 8px 0;
}

/* ===== TABLET (iPad portrait ~768px) ===== */
@media (max-width: 900px) {
  .server-rail { width: 60px; min-width: 60px; }
  .rail-btn { width: 42px; height: 42px; }
  .sidebar { width: 190px; min-width: 190px; }
  .dm-sidebar { width: 190px; min-width: 190px; }
}

/* ===== MOBILE (phones ~680px and below) ===== */
@media (max-width: 680px) {
  :root { --sidebar-w: 0px; }

  /* The rail and sidebar are hidden by default on mobile */
  .server-rail { display: none; }
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    width: 260px !important;
    min-width: 260px !important;
    height: 100vh;
    height: 100dvh;
    z-index: 600;
    transition: left 0.25s ease;
  }
  .sidebar.open { left: 0 !important; }

  /* Dim backdrop when sidebar is open */
  #sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 599;
  }
  #sidebar-backdrop.active { display: block; }

  /* Main content fills screen, leave room for top menu bar */
  .main-content {
    width: 100vw !important;
    min-width: 0 !important;
  }

  /* Top mobile bar replaces sidebar nav */
  #mobile-topbar {
    display: flex !important;
  }

  /* Push content below topbar */
  .view { top: 48px !important; }

  /* Friends view */
  #view-friends {
    padding: 14px !important;
  }
  .view-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .search-bar { width: 100% !important; min-width: 0 !important; }
  .friends-grid { grid-template-columns: 1fr !important; }

  /* Chat */
  .dm-layout { flex-direction: column !important; }
  .dm-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 160px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  /* Server channel sidebar as drawer too when on mobile */
  #sidebar-server .channel-list { max-height: 35vh; }
  #sidebar-server .server-member-list { max-height: 25vh; }

  /* Modals full width */
  .modal { width: 96% !important; max-width: 96% !important; }
  .modal-wide { max-width: 96% !important; }

  /* Call HUD smaller */
  .call-hud-timer { display: none; }
  .call-hud-inner { padding: 8px 12px; gap: 8px; }
}

/* ===== MOBILE TOP BAR ===== */
#mobile-topbar {
  display: none; /* hidden on desktop */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 48px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  z-index: 400;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
}
#mobile-menu-btn {
  width: 36px; height: 36px;
  background: none; border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
#mobile-menu-btn:active { background: var(--bg-hover); }
#mobile-topbar-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#mobile-topbar-right {
  display: flex; gap: 4px; align-items: center;
}

/* ===== SCREEN SHARE OVERLAY ===== */
.screenshare-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 850;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fade-in 0.2s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.screenshare-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
}

.screenshare-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.screenshare-close {
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.screenshare-close:hover { background: rgba(255,255,255,0.2); }

#screenshare-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Screenshare active state on HUD button */
.hud-btn.sharing {
  background: var(--green);
  color: var(--bg-void);
  box-shadow: 0 0 10px var(--green-glow);
}
.hud-btn.viewing {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 10px var(--accent-glow);
  animation: pulse-btn 2s ease-in-out infinite;
}

.call-video-stage {
  position: fixed;
  right: 14px;
  bottom: 88px;
  width: 320px;
  height: 180px;
  border-radius: 14px;
  overflow: hidden;
  z-index: 920;
  background: #000;
  border: 1px solid rgba(61,214,140,0.45);
  box-shadow: 0 20px 42px rgba(0,0,0,0.55), 0 0 20px rgba(61,214,140,0.25);
}

#call-remote-video,
#call-local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

#call-local-video {
  position: absolute;
  width: 92px;
  height: 56px;
  right: 8px;
  bottom: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.msg-reaction-chip {
  border: 1px solid var(--border-bright);
  background: rgba(255,255,255,0.04);
  color: var(--text-secondary);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}

.msg-reaction-chip.reacted {
  border-color: rgba(61,214,140,0.7);
  background: rgba(61,214,140,0.18);
  color: #dff7e9;
}

.msg-reaction-add {
  border: 1px dashed var(--border-bright);
  background: transparent;
  color: var(--text-muted);
  border-radius: 999px;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}

.msg-reaction-add:hover,
.msg-reaction-chip:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}

.forum-channel-mode .messages-wrap { background:var(--bg-void);padding:18px }
.forum-channel-mode .messages-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  align-content:start;
  gap:12px;
}
.forum-channel-mode .message {
  min-height:150px;
  margin:0!important;
  padding:16px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg-surface);
}
.forum-channel-mode .message.grouped .avatar { visibility:visible }
.forum-channel-mode .message-date-separator { grid-column:1/-1 }
.forum-channel-mode .message-input-wrap textarea { min-height:52px }
.forum-post-title {
  margin:5px 0 9px;
  color:var(--text-primary);
  font-size:15px;
  font-weight:800;
  line-height:1.3;
}

.role-permissions-editor {
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.role-permissions-editor .toggle-row {
  min-height:58px;
  margin:0;
  padding:10px 4px;
  border-bottom:1px solid var(--border);
}

#settings-tab-roles.active {
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}
#settings-tab-roles #roles-list {
  grid-column:1;
  grid-row:1 / span 2;
  position:sticky;
  top:0;
  max-height:calc(100dvh - 150px);
  overflow-y:auto;
  padding-right:8px;
}
#settings-tab-roles #role-editor {
  grid-column:2;
  margin:0!important;
  padding:22px!important;
  border-radius:7px;
}
#settings-tab-roles>div:last-child { grid-column:2 }

@media(max-width:800px) {
  #settings-tab-roles.active { grid-template-columns:1fr }
  #settings-tab-roles #roles-list {
    grid-column:1;
    grid-row:auto;
    position:static;
    max-height:260px;
  }
  #settings-tab-roles #role-editor,
  #settings-tab-roles>div:last-child { grid-column:1 }
}

@media(max-width:680px) {
  .toast-container { right:10px;bottom:calc(var(--mobile-dock-h,64px) + 10px);left:10px }
  .toast { max-width:none }
  .forum-channel-mode .messages-wrap { padding:10px }
  .forum-channel-mode .messages-list { grid-template-columns:1fr }
}

.channel-emoji-picker {
  position: fixed;
  z-index: 1300;
  width: 336px;
  padding: 10px;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  background: var(--bg-elevated);
  box-shadow: 0 16px 40px rgba(0,0,0,.36);
}
.emoji-picker-title {
  padding: 2px 4px 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.channel-emoji-picker .emoji-picker-grid {
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:4px;
  max-height:320px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:4px;
}
.emoji-picker-grid button {
  display:grid;
  place-items:center;
  min-width:0;
  aspect-ratio:1;
  border:0;
  border-radius:6px;
  background:transparent;
  font-size:20px;
  cursor:pointer;
}
.emoji-picker-grid button:hover { background:var(--bg-hover); transform:scale(1.08); }

#group-call-btn.active {
  background: rgba(61,214,140,0.16);
  color: #dff7e9;
  border: 1px solid rgba(61,214,140,0.55);
  box-shadow: 0 0 10px rgba(61,214,140,0.3);
}

#group-camera-btn.active,
#group-screen-btn.active {
  background: rgba(92,140,255,0.2);
  color: #e8f0ff;
  border: 1px solid rgba(92,140,255,0.5);
}

.group-call-stage {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(11,17,32,0.85), rgba(11,17,32,0.45));
}

.group-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

#group-local-video,
.group-remote-video {
  width: 100%;
  max-height: 170px;
  object-fit: cover;
  border-radius: 10px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.18);
}
@keyframes pulse-btn {
  0%, 100% { box-shadow: 0 0 10px var(--accent-glow); }
  50% { box-shadow: 0 0 20px var(--accent-glow); }
}

/* ===== SERVER RAIL ===== */
.server-rail {
  width: 72px;
  min-width: 72px;
  height: 100vh;
  height: 100dvh;
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border);
}
.server-rail::-webkit-scrollbar { width: 0; }

.rail-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 10px;
}

.rail-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-radius 0.2s ease, background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.rail-btn:hover, .rail-btn.active {
  border-radius: 30%;
  background: var(--accent);
  color: #fff;
}
.rail-btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rail-btn.add-server {
  background: var(--bg-elevated);
  color: var(--green);
}
.rail-btn.add-server:hover {
  background: var(--green);
  color: var(--bg-void);
}
.rail-btn .rail-initial {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
  pointer-events: none;
}
/* Active indicator pip */
.rail-btn.active::before {
  content: '';
  position: absolute;
  left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 40%;
  background: #fff;
  border-radius: 0 2px 2px 0;
}

.rail-divider {
  width: 32px;
  height: 2px;
  background: var(--border-bright);
  border-radius: 1px;
  margin: 2px 0;
}

/* ===== SERVER SIDEBAR ===== */
.sidebar-section { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

.server-sidebar-header {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 800;
  color: var(--text-primary);
}

.server-channels-label, .server-members-label {
  padding: 14px 14px 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: space-between;
}
.server-members-label { padding-top: 10px; }

.add-channel-btn { color: var(--text-muted); }
.add-channel-btn:hover { color: var(--text-primary); }

.channel-list {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 6px;
  overflow-y: auto;
  max-height: 40vh;
}

.channel-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px; font-weight: 600;
  transition: var(--transition);
}
.channel-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.channel-item[draggable="true"] { cursor: grab; }
.channel-item.dragging { opacity: .45; cursor: grabbing; }
.channel-item.active { background: var(--bg-active); color: var(--text-primary); }
.channel-item .ch-hash { font-size: 16px; color: var(--text-muted); font-weight: 400; }
.channel-item .ch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-item .ch-delete {
  opacity: 0; width: 16px; height: 16px;
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  transition: var(--transition);
}
.channel-item:hover .ch-delete { opacity: 1; }
.channel-item .ch-delete:hover { color: var(--red); }

.server-member-list {
  display: flex; flex-direction: column; gap: 4px;
  padding: 0 6px 12px;
  overflow-y: auto;
  flex: 1;
}

.server-member-item {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.server-member-item.nameplate-surface { min-height: 58px; }
.server-member-item .avatar-wrap {
  z-index: 3;
  display: grid;
  place-items: center;
}
.server-member-item:hover { background: var(--bg-hover); }
.server-member-item .member-name { font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: 1; min-width: 0; overflow: visible; text-overflow: clip; white-space: nowrap; }
.server-member-item .member-role { font-size: 10px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.sidebar-label {
  padding: 14px 14px 4px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ===== CHANNEL HASH IN CHAT HEADER ===== */
.channel-hash {
  font-size: 22px; font-weight: 400;
  color: var(--text-muted);
  margin-right: 2px;
  line-height: 1;
}

/* ===== SERVER MODAL TABS ===== */
.server-modal-tabs {
  display: flex; gap: 4px;
  background: var(--bg-void);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 20px;
}
.stab {
  flex: 1; padding: 8px;
  background: none; border: none;
  color: var(--text-secondary);
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.stab.active { background: var(--accent); color: #fff; }
.stab-panel { display: none; }
.stab-panel.active { display: block; }

.server-icon-preview {
  width: 72px; height: 72px;
  border-radius: 30%;
  background: var(--bg-surface);
  border: 2px dashed var(--border-bright);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  overflow: hidden;
}
.server-icon-preview img { width: 100%; height: 100%; object-fit: cover; }

.invite-code-row {
  display: flex; gap: 8px; align-items: center;
}
.invite-code-row input {
  flex: 1;
  background: var(--bg-void);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 600;
  letter-spacing: 2px;
  outline: none;
}

.settings-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-danger {
  padding: 11px 20px;
  background: rgba(240,84,84,0.15);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  color: var(--red);
  font-family: 'Syne', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.btn-danger:hover { background: var(--red); color: #fff; }

.modal-wide { max-width: 500px; }

/* Invite friends list */
#invite-friends-list .invite-friend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
#invite-friends-list .invite-friend-row:last-child { border-bottom: none; }

/* ===== SETTINGS TABS ===== */
.settings-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}
.settings-tab {
  padding: 10px 16px;
  background: none; border: none;
  color: var(--text-secondary);
  font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition);
}
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.settings-tab-panel { display: none; }
.settings-tab-panel.active { display: block; }

/* ===== ROLES ===== */
.role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.role-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.role-name {
  flex: 1;
  font-size: 13px; font-weight: 700;
}
.role-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 99px;
  background: rgba(255,255,255,0.08);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.role-actions { display: flex; gap: 4px; }
.role-actions button {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 600;
  cursor: pointer; border: none; transition: var(--transition);
}
.role-edit-btn { background: var(--bg-hover); color: var(--text-secondary); }
.role-edit-btn:hover { color: var(--text-primary); }
.role-del-btn { background: rgba(240,84,84,0.1); color: var(--red); }
.role-del-btn:hover { background: rgba(240,84,84,0.2); }

/* ===== MEMBER LIST WITH KICK/BAN/ROLE ===== */
.server-member-item .member-actions {
  display: none;
  gap: 4px;
  margin-left: auto;
}
.server-member-item:hover .member-actions { display: flex; }
.member-action-btn {
  padding: 3px 7px;
  border-radius: 4px;
  font-family: 'Syne', sans-serif; font-size: 10px; font-weight: 700;
  cursor: pointer; border: none; transition: var(--transition);
  white-space: nowrap;
}
.member-action-btn.kick { background: rgba(245,200,66,0.15); color: var(--yellow); }
.member-action-btn.kick:hover { background: rgba(245,200,66,0.25); }
.member-action-btn.ban { background: rgba(240,84,84,0.15); color: var(--red); }
.member-action-btn.ban:hover { background: rgba(240,84,84,0.25); }
.member-action-btn.role { background: var(--accent-muted); color: var(--accent); }
.member-action-btn.role:hover { background: rgba(91,110,245,0.25); }

/* ===== BANS LIST ===== */
.ban-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.ban-row:last-child { border-bottom: none; }
.ban-row .ban-info { flex: 1; }
.ban-row .ban-name { font-size: 13px; font-weight: 700; }
.ban-row .ban-reason { font-size: 11px; color: var(--text-muted); }

/* ===== SERVER INVITES IN SIDEBAR ===== */
.server-invite-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 10px;
  margin-bottom: 6px;
}
.server-invite-item .inv-server-name {
  font-size: 13px; font-weight: 700;
  margin-bottom: 2px;
}
.server-invite-item .inv-from {
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 8px;
}
.server-invite-item .inv-actions { display: flex; gap: 6px; }
.rich-server-invite { position:relative; overflow:hidden; padding:0 10px 10px; border:1px solid var(--border-bright); border-radius:8px; margin-bottom:8px; }
.rich-invite-banner { height:46px; margin:0 -10px 9px; background-size:cover; background-position:center; }
.rich-server-invite .inv-server-name { font-size:14px; }
.inv-description { margin:4px 0 7px; color:var(--text-secondary); font-size:12px; line-height:1.35; }
.inv-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.inv-tags span { padding:2px 6px; border:1px solid var(--border-bright); border-radius:999px; color:var(--text-secondary); font-size:10px; font-weight:700; }
.inv-accept { background: rgba(61,214,140,0.15); color: var(--green); border: none; border-radius: var(--radius-sm); padding: 5px 10px; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.inv-accept:hover { background: rgba(61,214,140,0.25); }
.inv-decline { background: rgba(240,84,84,0.1); color: var(--red); border: none; border-radius: var(--radius-sm); padding: 5px 10px; font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.inv-decline:hover { background: rgba(240,84,84,0.2); }

/* ===== RAIL NOTIFICATION BADGE ===== */
.rail-btn { position: relative; }
.rail-notif {
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--bg-void);
  font-size: 8px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ===== COLORED ROLE USERNAME IN MESSAGES ===== */
.msg-author.has-role { font-weight: 800; }

/* ===== USER PROFILE POPUP ===== */
.profile-popup {
  position: fixed;
  width: 280px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  overflow: hidden;
  animation: popup-in 0.15s ease;
}
@keyframes popup-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.profile-popup-banner {
  height: 60px;
  background: linear-gradient(135deg, var(--accent) 0%, #8b3cf7 100%);
}
.profile-popup-body {
  padding: 0 16px 16px;
  position: relative;
}
.profile-popup-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-top: -28px;
  margin-bottom: 8px;
}
.profile-popup-avatar {
  width: 56px; height: 56px;
  font-size: 22px;
  border: 3px solid var(--bg-elevated);
  border-radius: 50%;
}
.profile-popup-avatar-wrap .status-dot {
  width: 14px; height: 14px;
  border-width: 3px;
  border-color: var(--bg-elevated);
  bottom: 2px; right: 2px;
}
.profile-popup-name {
  font-size: 16px; font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 2px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.profile-popup { max-height:calc(100dvh - 20px);overflow-y:auto }
.profile-popup-username {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 6px;
}
.profile-popup-role {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 10px;
}
.profile-popup-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}
.profile-popup-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.profile-popup-bio {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.profile-popup-section { margin-bottom: 4px; }
.profile-popup.pro-profile .profile-popup-banner { background: linear-gradient(110deg,var(--profile-start),var(--profile-end)); }
.profile-popup.pro-profile .profile-popup-name { background: linear-gradient(90deg,var(--profile-start),var(--profile-end),var(--profile-start)); background-size:200% 100%; -webkit-background-clip:text; color:transparent; }
.profile-popup.pro-profile.effect-shimmer .profile-popup-name,.profile-popup.pro-profile.effect-prism .profile-popup-name { animation: role-gradient-shift 2.6s linear infinite; }
.pro-profile-card,
.profile-popup.pro-profile {
  --profile-start:#5865f2;
  --profile-end:#a855f7;
  background:linear-gradient(145deg,color-mix(in srgb,var(--profile-start) 24%,#111522),color-mix(in srgb,var(--profile-end) 18%,#181d2b));
  border-color:color-mix(in srgb,var(--profile-end) 52%,rgba(255,255,255,.2));
}
.profile-popup-roles { display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 }
.profile-role-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 8px;
  border:1px solid var(--border-bright);
  border-radius:5px;
  background:var(--bg-surface);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
}
.profile-role-chip i { width:9px;height:9px;border-radius:50%;background:var(--role-color) }
.profile-role-chip button { border:0;background:transparent;color:var(--text-muted);cursor:pointer;padding:0;font-size:14px }
.profile-role-add { color:var(--text-primary);cursor:pointer }
.profile-role-menu {
  width:100%;
  max-height:150px;
  overflow-y:auto;
  padding:5px;
  border:1px solid var(--border-bright);
  border-radius:5px;
  background:var(--bg-void);
}
.profile-role-menu button { width:100%;padding:8px;border:0;background:transparent;color:var(--text-secondary);text-align:left;cursor:pointer }
.profile-role-menu button:hover { background:var(--bg-hover);color:var(--text-primary) }
.pro-profile-card .dm-profile-banner,
.pro-profile-card .pro-preview-banner,
.profile-popup.pro-profile .profile-popup-banner {
  background-color:var(--profile-start);
  background-image:linear-gradient(115deg,var(--profile-start),var(--profile-end));
  background-size:cover;
  background-position:center;
}
.dm-profile-panel.pro-profile-card .dm-profile-copy,
.dm-profile-panel.pro-profile-card .dm-profile-section {
  background:color-mix(in srgb,var(--profile-start) 10%,rgba(12,15,24,.82));
}
.dm-profile-panel.pro-profile-card .dm-profile-name,
.pro-profile-editor-preview .pro-preview-body > b {
  background:linear-gradient(90deg,var(--profile-start),var(--profile-end),var(--profile-start));
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.profile-style-aurora {
  background:
    linear-gradient(155deg,color-mix(in srgb,var(--profile-start) 42%,#092b31),color-mix(in srgb,var(--profile-end) 34%,#241239)) !important;
  backdrop-filter:blur(14px) saturate(1.25);
}
.profile-style-ember {
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--profile-start) 45%,#381411),color-mix(in srgb,var(--profile-end) 28%,#20100e)) !important;
  box-shadow:inset 0 0 42px rgba(255,91,41,.13);
}
.profile-style-glacier {
  background:
    linear-gradient(150deg,color-mix(in srgb,var(--profile-start) 38%,#102e3f),color-mix(in srgb,var(--profile-end) 25%,#e4f5ff)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.34),inset 0 0 36px rgba(135,224,255,.13);
}
.profile-style-midnight {
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--profile-start) 16%,#050711),color-mix(in srgb,var(--profile-end) 21%,#121124)) !important;
  box-shadow:inset 0 0 45px rgba(0,0,0,.38);
}
.profile-style-holo {
  background:
    linear-gradient(125deg,color-mix(in srgb,var(--profile-start) 30%,#132536),color-mix(in srgb,var(--profile-end) 36%,#362246),color-mix(in srgb,var(--profile-start) 24%,#173c3c)) !important;
  background-size:220% 100% !important;
  animation:pro-holo-field 7s ease-in-out infinite alternate;
}
@keyframes pro-holo-field { to { background-position:100% 50%; } }
.profile-effect-layer,
.profile-popup.pro-profile::after {
  position:absolute;
  inset:0;
  z-index:8;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
}
.profile-popup.pro-profile::after { content:''; }
.pro-profile-card > :not(.profile-effect-layer) { position:relative; z-index:2; }
.profile-effect-aurora .profile-effect-layer,
.profile-popup.profile-effect-aurora::after {
  background:
    linear-gradient(118deg,transparent 8%,color-mix(in srgb,var(--profile-start) 38%,transparent) 34%,transparent 52%),
    linear-gradient(72deg,transparent 28%,color-mix(in srgb,var(--profile-end) 35%,transparent) 58%,transparent 76%);
  filter:blur(7px);
  animation:pro-effect-aurora 5.8s ease-in-out infinite alternate;
}
@keyframes pro-effect-aurora { to { transform:translateX(9%) skewX(-4deg); filter:blur(10px) hue-rotate(22deg); } }
.profile-effect-stardust .profile-effect-layer,
.profile-popup.profile-effect-stardust::after {
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 26%,color-mix(in srgb,var(--profile-end) 70%,#fff) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 63%,rgba(255,255,255,.75) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 88% 79%,color-mix(in srgb,var(--profile-start) 70%,#fff) 0 1px,transparent 2px);
  background-size:130px 120px,170px 150px,210px 180px,150px 140px;
  animation:pro-effect-stars 7s linear infinite;
}
@keyframes pro-effect-stars { to { background-position:25px 50px,-35px 70px,45px -60px,-30px -45px; } }
.profile-effect-scanlines .profile-effect-layer,
.profile-popup.profile-effect-scanlines::after {
  background:
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--profile-end) 34%,transparent),transparent),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(255,255,255,.05) 6px,transparent 7px);
  background-size:45% 100%,100% 100%;
  animation:pro-effect-scan 3.4s linear infinite;
}
@keyframes pro-effect-scan { from { background-position:-80% 0,0 0; } to { background-position:180% 0,0 14px; } }
.profile-effect-pulse .profile-effect-layer,
.profile-popup.profile-effect-pulse::after {
  border:2px solid color-mix(in srgb,var(--profile-end) 72%,#fff);
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--profile-start) 36%,transparent);
  animation:pro-effect-pulse 2.8s ease-in-out infinite;
}
@keyframes pro-effect-pulse { 50% { border-color:color-mix(in srgb,var(--profile-start) 82%,#fff); box-shadow:inset 0 0 38px color-mix(in srgb,var(--profile-end) 45%,transparent),0 0 14px color-mix(in srgb,var(--profile-end) 32%,transparent); } }
@media(prefers-reduced-motion:reduce) {
  .pro-profile-card,
  .profile-effect-layer,
  .profile-popup.pro-profile::after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}
.profile-popup-tag { display:flex;align-items:center;gap:7px;border:0;border-radius:6px;padding:6px 8px;margin:4px 0 10px;color:#fff;background:var(--tag-background,#5865f2);cursor:pointer;font:inherit;font-size:11px;font-weight:800; }
.profile-popup-tag img { width:18px;height:18px;border-radius:50%;object-fit:cover; }
.profile-popup-tag-invite { margin:2px 0 10px;padding:10px;border:1px solid var(--border-bright);background:var(--bg-surface);font-size:12px;color:var(--text-secondary); }.profile-popup-tag-invite strong { display:block;color:var(--text-primary);margin-bottom:3px; }.profile-popup-tag-invite button { margin-top:8px;width:100%;padding:7px;border:0;background:var(--accent);color:#fff;font-weight:800;cursor:pointer; }
.profile-popup.server-tag-card .profile-popup-banner { height:42px;background:var(--tag-card-color,#5865f2); }
.profile-popup.server-tag-card .profile-popup-body { padding-top:14px; }
.profile-popup.server-tag-card .profile-popup-tag-invite { margin-top:12px;border-left:3px solid var(--tag-card-color,#5865f2);border-radius:6px;line-height:1.45; }
.profile-popup-discord-activity { margin:8px 0 2px; padding:7px 9px; border-left:3px solid #5865f2; background:rgba(88,101,242,.12); color:var(--text-secondary); font-size:12px; line-height:1.35; }
#popup-gift-actions { display:flex; }
.tutorial-modal { max-width:620px; }
.tutorial-progress { display:flex; gap:7px; justify-content:center; margin:2px 0 8px; }
.tutorial-progress span { width:8px; height:8px; border-radius:50%; background:var(--border-bright); opacity:.65; }
.tutorial-progress span.active { width:28px; border-radius:999px; background:linear-gradient(90deg,var(--accent),#22d3ee); opacity:1; }
.tutorial-card { border:1px solid var(--border-bright); background:linear-gradient(145deg,rgba(88,101,242,.16),rgba(34,211,238,.08)); border-radius:12px; padding:24px; text-align:center; }
.tutorial-icon { width:54px; height:54px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center; font-weight:900; color:#fff; background:linear-gradient(135deg,var(--accent),#a855f7); box-shadow:0 16px 40px rgba(88,101,242,.28); }
.tutorial-card h3 { margin:0 0 10px; font-size:24px; }
.tutorial-card p { margin:0 auto; max-width:470px; color:var(--text-secondary); line-height:1.55; }
.tutorial-actions { display:flex; gap:10px; justify-content:flex-end; align-items:center; }
.tutorial-actions #tutorial-skip-btn { margin-right:auto; }
.pending-gifts-stack { position:fixed; right:18px; bottom:86px; z-index:900; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.pending-gift-card { pointer-events:auto; display:flex; align-items:center; gap:10px; min-width:250px; padding:11px 12px; border:1px solid rgba(255,214,10,.45); border-radius:12px; background:linear-gradient(135deg,rgba(255,214,10,.18),rgba(88,101,242,.16)),var(--bg-surface); box-shadow:0 18px 44px rgba(0,0,0,.35); cursor:pointer; color:var(--text-primary); font-family:Syne,sans-serif; text-align:left; }
.pending-gift-card strong { display:block; font-size:13px; }
.pending-gift-card span { color:var(--text-secondary); font-size:11px; }
.pending-gift-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,#ffd60a,#f97316); color:#111827; font-weight:900; font-size:20px; }
.gift-open-modal { max-width:430px; }
.gift-box-button { position:relative; width:132px; height:116px; margin:10px auto 6px; display:block; border:0; background:transparent; cursor:pointer; }
.gift-box-lid,.gift-box-body { position:absolute; left:50%; transform:translateX(-50%); display:block; background:linear-gradient(135deg,#ffd60a,#f97316); box-shadow:0 18px 44px rgba(249,115,22,.28); }
.gift-box-lid { top:16px; width:118px; height:34px; border-radius:10px 10px 5px 5px; }
.gift-box-body { top:48px; width:100px; height:68px; border-radius:7px 7px 12px 12px; }
.gift-box-lid::after,.gift-box-body::after { content:""; position:absolute; left:50%; top:0; bottom:0; width:18px; transform:translateX(-50%); background:rgba(88,101,242,.86); }
.gift-box-button.opened .gift-box-lid { transform:translateX(-50%) translateY(-20px) rotate(-12deg); transition:transform .35s ease; }
.gift-open-text { text-align:center; color:var(--text-secondary); line-height:1.45; }
.profile-tag-choices { display:flex; flex-wrap:wrap; gap:7px; }
.tag-choice { border:1px solid var(--border); background:var(--bg-input); color:var(--text-secondary); padding:7px 9px; border-radius:5px; cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
.tag-choice:hover,.tag-choice.selected { border-color:var(--accent); color:var(--text-primary); background:color-mix(in srgb, var(--tag-bg, var(--accent)) 22%, var(--bg-input)); }

/* ===== CHANNEL PERMISSIONS ===== */
.lock-toggle {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  width: 36px; height: 20px;
  appearance: none; -webkit-appearance: none;
  background: var(--bg-hover);
  border-radius: 99px; cursor: pointer;
  position: relative; flex-shrink: 0;
  transition: background 0.2s;
}
.toggle-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  top: 3px; left: 3px;
  transition: left 0.2s;
}
.toggle-row input[type="checkbox"]:checked { background: var(--accent); }
.toggle-row input[type="checkbox"]:checked::after { left: 19px; }
.toggle-label { flex: 1; }
.toggle-title { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.toggle-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.perm-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.perm-role-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.perm-role-name { flex: 1; font-size: 13px; font-weight: 600; }
.perm-allow-btn, .perm-deny-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; border: none; transition: var(--transition);
}
.perm-allow-btn { background: rgba(61,214,140,0.12); color: var(--green); }
.perm-allow-btn:hover, .perm-allow-btn.active { background: var(--green); color: var(--bg-void); }
.perm-deny-btn { background: rgba(240,84,84,0.12); color: var(--red); }
.perm-deny-btn:hover, .perm-deny-btn.active { background: var(--red); color: #fff; }

/* Locked channel indicator */
.channel-item.locked .ch-hash { color: var(--red); }
.channel-item .ch-perms {
  opacity: 0; width: 14px; height: 14px;
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; transition: var(--transition);
}
.channel-item:hover .ch-perms { opacity: 1; }
.channel-item .ch-perms:hover { color: var(--accent); }

/* ===== DECORATIONS ===== */
/*
  The decoration sits inside .avatar-wrap as a sibling to .avatar.
  .avatar-wrap is already position:relative, so the deco spans it absolutely.
  The deco element is sized to perfectly cover the avatar plus a small overflow ring.
*/

.avatar-deco {
  position: absolute;
  /* Sit right at the avatar edge with just 2px overflow for the ring itself */
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

/* -- GLOW BLUE -- */
.avatar-deco.deco-glow_blue {
  box-shadow: 0 0 0 2px rgba(91,110,245,0.9), 0 0 14px 4px rgba(91,110,245,0.5);
  animation: deco-pulse-blue 2s ease-in-out infinite;
}
@keyframes deco-pulse-blue {
  0%,100% { box-shadow: 0 0 0 2px rgba(91,110,245,0.8), 0 0 12px 4px rgba(91,110,245,0.4); }
  50%      { box-shadow: 0 0 0 2px rgba(91,110,245,1),   0 0 22px 8px rgba(91,110,245,0.7); }
}

/* -- GLOW GREEN (Glowy Moon) -- */
.avatar-deco.deco-glow_green {
  box-shadow: 0 0 0 2px rgba(61,214,140,0.9), 0 0 14px 5px rgba(61,214,140,0.45);
  animation: deco-pulse-green 2.5s ease-in-out infinite;
}
@keyframes deco-pulse-green {
  0%,100% { box-shadow: 0 0 0 2px rgba(61,214,140,0.7), 0 0 12px 4px rgba(61,214,140,0.35); }
  50%      { box-shadow: 0 0 0 2px rgba(61,214,140,1),   0 0 22px 9px rgba(61,214,140,0.65); }
}

/* -- ORBIT RING (white) -- */
.avatar-deco.deco-orbit_white {
  background: transparent;
}
.avatar-deco.deco-orbit_white::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
}
.avatar-deco.deco-orbit_white::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-right-color: rgba(255,255,255,0.6);
  animation: deco-spin 1.8s linear infinite;
  box-shadow: 0 0 6px rgba(255,255,255,0.7);
}

/* -- ORBIT GOLD -- */
.avatar-deco.deco-orbit_gold::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(245,200,66,0.12);
}
.avatar-deco.deco-orbit_gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #f5c842;
  border-right-color: rgba(245,200,66,0.7);
  animation: deco-spin 1.4s linear infinite;
  box-shadow: 0 0 8px rgba(245,200,66,0.8);
}

@keyframes deco-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -- HALO GOLD -- */
.avatar-deco.deco-halo_gold {
  width: 110%;
  height: 22%;
  top: -16%;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  border: 3px solid #f5c842;
  box-shadow: 0 0 12px rgba(245,200,66,0.9), 0 0 28px rgba(245,200,66,0.5);
  animation: deco-halo-bob 3s ease-in-out infinite;
  border-radius: 50%;
  background: transparent;
}
@keyframes deco-halo-bob {
  0%,100% { transform: translateY(0) rotateX(70deg); }
  50%      { transform: translateY(-3px) rotateX(70deg); }
}

/* -- NEON PINK -- */
.avatar-deco.deco-neon_pink {
  border: 2px solid #ff2d8e;
  box-shadow: 0 0 6px #ff2d8e, 0 0 14px rgba(255,45,142,0.5);
  animation: deco-neon-flicker 3s ease-in-out infinite;
}
@keyframes deco-neon-flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    border-color: #ff2d8e;
    box-shadow: 0 0 6px #ff2d8e, 0 0 14px rgba(255,45,142,0.5);
  }
  20%,22%,24%,55% {
    border-color: rgba(255,45,142,0.3);
    box-shadow: none;
  }
}

/* -- GALAXY / FIRE / RAINBOW --
   Use CSS mask to punch a transparent hole in the center
   so the avatar underneath shows through instead of being covered */
.avatar-deco.deco-galaxy,
.avatar-deco.deco-fire,
.avatar-deco.deco-rainbow {
  border-radius: 50%;
  /* Mask: show only a ring around the edge, transparent in the middle */
  -webkit-mask: radial-gradient(circle, transparent 68%, black 69%);
          mask: radial-gradient(circle, transparent 68%, black 69%);
}

.avatar-deco.deco-galaxy {
  background: conic-gradient(
    from 0deg,
    #5b6ef5, #8b3cf7, #ff2d8e, #f5c842, #3dd68c, #5b6ef5
  );
  animation: deco-spin 3s linear infinite;
}

.avatar-deco.deco-fire {
  background: conic-gradient(
    from 0deg,
    #ff4500, #ff8c00, #ffd700, #ff4500, #ff6347, #ff4500
  );
  animation: deco-spin 1s linear infinite, deco-fire-pulse 0.5s ease-in-out infinite alternate;
}
@keyframes deco-fire-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.4); }
}

.avatar-deco.deco-rainbow {
  background: conic-gradient(
    red, orange, yellow, green, cyan, blue, violet, red
  );
  animation: deco-spin 2s linear infinite;
}

/* -- FROST -- */
.avatar-deco.deco-frost {
  border: 2px solid rgba(150,220,255,0.9);
  box-shadow: 0 0 8px rgba(150,220,255,0.7), 0 0 18px rgba(150,220,255,0.3);
  animation: deco-frost-pulse 3s ease-in-out infinite;
}
@keyframes deco-frost-pulse {
  0%,100% { box-shadow: 0 0 7px rgba(150,220,255,0.6), 0 0 14px rgba(150,220,255,0.3); border-color: rgba(150,220,255,0.8); }
  50%      { box-shadow: 0 0 12px rgba(150,220,255,0.9), 0 0 26px rgba(150,220,255,0.5); border-color: rgba(200,240,255,1); }
}

/* -- SECRET: STORMVEIL -- */
.avatar-deco.deco-stormveil {
  inset: -7px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle, transparent 56%, black 68%);
          mask: radial-gradient(circle, transparent 56%, black 68%);
  border: 1px solid rgba(194, 231, 255, 0.68);
  background:
    radial-gradient(circle at 22% 18%, rgba(167, 255, 242, 0.52), transparent 30%),
    radial-gradient(circle at 78% 26%, rgba(177, 140, 255, 0.42), transparent 34%),
    radial-gradient(circle at 70% 80%, rgba(90, 255, 224, 0.34), transparent 36%),
    conic-gradient(from 140deg,
      rgba(109, 245, 255, 0.0) 0deg,
      rgba(109, 245, 255, 0.56) 24deg,
      rgba(178, 126, 255, 0.54) 56deg,
      rgba(109, 245, 255, 0.0) 86deg,
      rgba(168, 124, 255, 0.52) 120deg,
      rgba(109, 245, 255, 0.0) 360deg
    ),
    conic-gradient(from 35deg,
      rgba(103, 245, 255, 0.86),
      rgba(124, 161, 255, 0.82),
      rgba(176, 116, 255, 0.9),
      rgba(96, 241, 231, 0.86),
      rgba(115, 141, 255, 0.84),
      rgba(103, 245, 255, 0.86)
    );
  box-shadow:
    0 0 0 1px rgba(231, 247, 255, 0.34) inset,
    0 0 14px rgba(112, 218, 255, 0.62),
    0 0 26px rgba(133, 157, 255, 0.34),
    0 0 34px rgba(154, 114, 255, 0.26);
  animation: stormveil-idle 6s ease-in-out infinite, stormveil-core-pulse 3.2s ease-in-out infinite;
}

.avatar-deco.deco-stormveil::before {
  content: '';
  position: absolute;
  inset: -16%;
  border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 57%, black 69%);
      mask: radial-gradient(circle, transparent 57%, black 69%);
  background:
    conic-gradient(from 210deg,
      rgba(100, 245, 255, 0.0) 0deg,
      rgba(100, 245, 255, 0.95) 40deg,
      rgba(145, 185, 255, 0.58) 90deg,
      rgba(184, 126, 255, 0.94) 140deg,
      rgba(95, 238, 230, 0.2) 205deg,
      rgba(100, 245, 255, 0.0) 255deg,
      rgba(188, 130, 255, 0.9) 305deg,
      rgba(100, 245, 255, 0.0) 360deg
    );
  filter: blur(0.8px);
  transform: rotate(0deg);
  animation: stormveil-strand-spin 6.2s linear infinite, stormveil-strand-wobble 4.8s ease-in-out infinite;
}

.avatar-deco.deco-stormveil::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 58%, black 70%);
      mask: radial-gradient(circle, transparent 58%, black 70%);
  background-image:
    radial-gradient(circle at 12% 42%, rgba(238, 255, 255, 0.95) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 24% 18%, rgba(120, 255, 232, 0.9) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 44% 12%, rgba(186, 138, 255, 0.9) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 72% 20%, rgba(132, 245, 255, 0.95) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 86% 48%, rgba(190, 129, 255, 0.9) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 74% 78%, rgba(104, 255, 225, 0.88) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 42% 86%, rgba(204, 142, 255, 0.9) 0 1.7px, transparent 2.5px),
    radial-gradient(circle at 16% 76%, rgba(112, 236, 255, 0.92) 0 1.6px, transparent 2.4px);
  mix-blend-mode: screen;
  opacity: 0.92;
  animation: stormveil-sparkle 2.8s ease-in-out infinite, stormveil-spark-rotate 7.5s linear infinite;
}

@keyframes stormveil-idle {
  0%, 100% { box-shadow: 0 0 0 1px rgba(231, 247, 255, 0.34) inset, 0 0 14px rgba(112, 218, 255, 0.62), 0 0 26px rgba(133, 157, 255, 0.34), 0 0 34px rgba(154, 114, 255, 0.26); }
  50% { box-shadow: 0 0 0 1px rgba(236, 250, 255, 0.5) inset, 0 0 18px rgba(130, 231, 255, 0.76), 0 0 32px rgba(156, 170, 255, 0.42), 0 0 40px rgba(174, 125, 255, 0.34); }
}

@keyframes stormveil-core-pulse {
  0%, 100% { filter: saturate(1.04) brightness(1); }
  50% { filter: saturate(1.12) brightness(1.08); }
}

@keyframes stormveil-strand-spin {
  from { transform: rotate(8deg); }
  to { transform: rotate(368deg); }
}

@keyframes stormveil-strand-wobble {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

@keyframes stormveil-sparkle {
  0%, 100% { opacity: 0.72; filter: blur(0px) brightness(0.92); }
  35% { opacity: 1; filter: blur(0.2px) brightness(1.14); }
  68% { opacity: 0.86; filter: blur(0px) brightness(0.98); }
}

@keyframes stormveil-spark-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.stormveil-layer {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
}

.stormveil-layer-a {
  -webkit-mask: radial-gradient(circle, transparent 57%, black 70%);
          mask: radial-gradient(circle, transparent 57%, black 70%);
  background:
    linear-gradient(128deg,
      rgba(96, 246, 255, 0.0) 28%,
      rgba(112, 252, 255, 0.98) 43%,
      rgba(162, 174, 255, 0.78) 52%,
      rgba(182, 114, 255, 0.88) 61%,
      rgba(96, 246, 255, 0.0) 75%);
  filter: blur(0.5px);
  mix-blend-mode: screen;
  transform: rotate(-14deg) scale(1.03);
  animation: stormveil-arc-main-idle 6.2s ease-in-out infinite;
}

.stormveil-layer-b {
  -webkit-mask: radial-gradient(circle, transparent 58%, black 70%);
          mask: radial-gradient(circle, transparent 58%, black 70%);
  background:
    linear-gradient(44deg,
      rgba(133, 113, 255, 0.0) 25%,
      rgba(165, 124, 255, 0.86) 41%,
      rgba(123, 240, 255, 0.85) 50%,
      rgba(148, 120, 255, 0.68) 58%,
      rgba(133, 113, 255, 0.0) 74%);
  mix-blend-mode: screen;
  opacity: 0.92;
  transform: rotate(28deg) scale(1.06);
  animation: stormveil-arc-secondary-idle 7.4s linear infinite;
}

.stormveil-layer-c {
  -webkit-mask: radial-gradient(circle, transparent 59%, black 71%);
          mask: radial-gradient(circle, transparent 59%, black 71%);
  background: conic-gradient(from 90deg,
    rgba(96, 246, 255, 0.0) 0deg,
    rgba(96, 246, 255, 0.66) 48deg,
    rgba(165, 129, 255, 0.74) 102deg,
    rgba(96, 246, 255, 0.0) 170deg,
    rgba(165, 129, 255, 0.64) 246deg,
    rgba(96, 246, 255, 0.0) 360deg);
  filter: blur(0.45px);
  opacity: 0.84;
  animation: stormveil-ring-rotate 9s linear infinite;
}

.stormveil-layer-d {
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(132% 66% at 20% 88%,
      rgba(186, 132, 255, 0.0) 52%,
      rgba(186, 132, 255, 0.42) 57%,
      rgba(214, 164, 255, 0.9) 60%,
      rgba(244, 233, 255, 0.98) 62%,
      rgba(188, 130, 255, 0.92) 64%,
      rgba(164, 118, 255, 0.5) 67%,
      rgba(186, 132, 255, 0.0) 72%
    ),
    radial-gradient(118% 58% at 14% 94%,
      rgba(255,255,255,0.0) 59%,
      rgba(255,255,255,0.66) 61%,
      rgba(255,255,255,0.0) 64%
    );
  mix-blend-mode: screen;
  opacity: 0.92;
  filter: blur(0.15px);
  animation: stormveil-inner-mist 5.6s ease-in-out infinite, stormveil-inner-glint 2.6s ease-in-out infinite;
}

.stormveil-layer-e {
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    rgba(108, 246, 255, 0.0) 0deg,
    rgba(108, 246, 255, 0.18) 12deg,
    rgba(108, 246, 255, 0.84) 24deg,
    rgba(235, 252, 255, 0.95) 30deg,
    rgba(108, 246, 255, 0.76) 38deg,
    rgba(108, 246, 255, 0.12) 52deg,
    rgba(108, 246, 255, 0.0) 76deg,
    rgba(108, 246, 255, 0.0) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 58%, black 69%);
          mask: radial-gradient(circle, transparent 58%, black 69%);
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: blur(0.08px);
  animation: stormveil-line-e 6.8s cubic-bezier(0.42, 0.0, 0.35, 1) infinite;
}

.stormveil-layer-f {
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(from 8deg,
    rgba(126, 245, 255, 0.0) 0deg,
    rgba(126, 245, 255, 0.85) 18deg,
    rgba(214, 241, 255, 0.92) 28deg,
    rgba(186, 126, 255, 0.88) 42deg,
    rgba(126, 245, 255, 0.0) 60deg,
    rgba(186, 126, 255, 0.72) 300deg,
    rgba(126, 245, 255, 0.0) 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 57%, black 68%);
          mask: radial-gradient(circle, transparent 57%, black 68%);
  mix-blend-mode: screen;
  opacity: 0.66;
  filter: blur(0.25px);
  animation: stormveil-line-f 7.8s linear infinite;
}

@keyframes stormveil-arc-main-idle {
  0%, 100% { transform: rotate(-10deg) scale(1.03); opacity: 0.82; }
  50% { transform: rotate(9deg) scale(1.07); opacity: 0.96; }
}

@keyframes stormveil-arc-secondary-idle {
  from { transform: rotate(28deg) scale(1.06); }
  to { transform: rotate(388deg) scale(1.06); }
}

@keyframes stormveil-ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes stormveil-inner-mist {
  0% { transform: translateX(-20%) translateY(2%) rotate(-26deg) scale(1.03, 1.06); opacity: 0.66; }
  20% { transform: translateX(-2%) translateY(0%) rotate(-18deg) scale(1.02, 1.05); opacity: 0.9; }
  30% { transform: translateX(6%) translateY(-1%) rotate(-13deg) scale(1.02, 1.05); opacity: 0.84; }
  35% { transform: translateX(8%) translateY(-1%) rotate(-12deg) scale(1.02, 1.05); opacity: 0.06; }
  65% { transform: translateX(8%) translateY(-1%) rotate(-12deg) scale(1.02, 1.05); opacity: 0.06; }
  72% { transform: translateX(12%) translateY(-2%) rotate(-9deg) scale(1.01, 1.04); opacity: 0.7; }
  86% { transform: translateX(2%) translateY(1%) rotate(-18deg) scale(1.02, 1.05); opacity: 0.88; }
  100% { transform: translateX(-20%) translateY(2%) rotate(-26deg) scale(1.03, 1.06); opacity: 0.66; }
}

@keyframes stormveil-inner-glint {
  0%, 100% { filter: blur(0.16px) brightness(1.0); }
  45% { filter: blur(0.05px) brightness(1.32); }
}

@keyframes stormveil-line-e {
  0% { transform: translate(-3%, 2%) rotate(14deg) scale(1.01); opacity: 0.66; }
  18% { transform: translate(2%, -1%) rotate(72deg) scale(1.03); opacity: 0.86; }
  39% { transform: translate(4%, -2%) rotate(156deg) scale(1.02); opacity: 0.72; }
  57% { transform: translate(-1%, 2%) rotate(210deg) scale(1.04); opacity: 0.9; }
  78% { transform: translate(-4%, 0%) rotate(300deg) scale(1.02); opacity: 0.74; }
  100% { transform: translate(-3%, 2%) rotate(374deg) scale(1.01); opacity: 0.66; }
}

@keyframes stormveil-line-f {
  from { transform: rotate(0deg); opacity: 0.62; }
  50% { transform: rotate(-190deg); opacity: 0.86; }
  to { transform: rotate(-360deg); opacity: 0.62; }
}

/* -- SECRET: HEHESHUIS AURA -- */
.avatar-deco.deco-heheshuis_aura {
  inset: -8px;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.98;
    -webkit-mask: radial-gradient(circle, transparent 48%, black 51%, black 57%, transparent 61%);
      mask: radial-gradient(circle, transparent 48%, black 51%, black 57%, transparent 61%);
  background:
    conic-gradient(from 14deg,
      rgba(46, 248, 255, 0.0) 0deg,
      rgba(46, 248, 255, 1) 10deg,
      rgba(46, 248, 255, 0.0) 16deg,
      rgba(110, 196, 255, 0.98) 34deg,
      rgba(110, 196, 255, 0.0) 40deg,
      rgba(158, 255, 82, 0.98) 56deg,
      rgba(158, 255, 82, 0.0) 62deg,
      rgba(255, 215, 74, 0.98) 82deg,
      rgba(255, 215, 74, 0.0) 88deg,
      rgba(255, 146, 62, 0.98) 112deg,
      rgba(255, 146, 62, 0.0) 118deg,
      rgba(255, 86, 122, 0.98) 140deg,
      rgba(255, 86, 122, 0.0) 146deg,
      rgba(255, 66, 216, 0.98) 170deg,
      rgba(255, 66, 216, 0.0) 176deg,
      rgba(176, 87, 255, 0.98) 204deg,
      rgba(176, 87, 255, 0.0) 210deg,
      rgba(104, 171, 255, 0.98) 238deg,
      rgba(104, 171, 255, 0.0) 244deg,
      rgba(46, 248, 255, 0.98) 274deg,
      rgba(46, 248, 255, 0.0) 280deg,
      rgba(46, 248, 255, 0.0) 360deg
    );
  box-shadow:
    0 0 4px rgba(79, 191, 255, 0.7),
    0 0 8px rgba(203, 89, 255, 0.4),
    0 0 12px rgba(255, 176, 76, 0.24);
  animation: hh-core-spin 8.8s linear infinite, hh-core-pulse 3.4s linear infinite;
}

.avatar-deco.deco-heheshuis_aura::before,
.avatar-deco.deco-heheshuis_aura::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.avatar-deco.deco-heheshuis_aura::before {
  inset: -4px;
  -webkit-mask: radial-gradient(circle, transparent 44%, black 48%, black 55%, transparent 60%);
          mask: radial-gradient(circle, transparent 44%, black 48%, black 55%, transparent 60%);
  background: conic-gradient(from 306deg,
    rgba(255,255,255,0.0) 0deg,
    rgba(255,255,255,0.98) 7deg,
    rgba(255,233,132,0.96) 10deg,
    rgba(255,121,74,0.98) 14deg,
    rgba(255,255,255,0.0) 18deg,
    rgba(255,255,255,0.0) 360deg);
  filter: blur(0px);
  opacity: 0.96;
  animation: hh-flare-cross 3.2s linear infinite;
}

.avatar-deco.deco-heheshuis_aura::after {
  inset: -6px;
  -webkit-mask: radial-gradient(circle, transparent 46%, black 50%, black 58%, transparent 64%);
          mask: radial-gradient(circle, transparent 46%, black 50%, black 58%, transparent 64%);
  background: linear-gradient(126deg,
    rgba(46,248,255,0.0) 33%,
    rgba(46,248,255,0.98) 41%,
    rgba(255,255,255,0.98) 45%,
    rgba(255,102,224,0.96) 49%,
    rgba(255,196,80,0.94) 53%,
    rgba(46,248,255,0.0) 60%);
  filter: blur(0px);
  opacity: 0.96;
  animation: hh-line-cross 4.2s linear infinite;
}

.heheshuis-layer {
  inset: -8px;
  inset: -9px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

  inset: -10px;
  inset: -7px;
  -webkit-mask: radial-gradient(circle, transparent 47%, black 51%, black 59%, transparent 64%);
          mask: radial-gradient(circle, transparent 47%, black 51%, black 59%, transparent 64%);
          mask: radial-gradient(circle, transparent 30%, black 37%, black 51%, transparent 59%);
    conic-gradient(from 214deg,
    conic-gradient(from 214deg,
      rgba(255, 255, 255, 0.98) 8deg,
      rgba(255, 255, 255, 0.98) 12deg,
      rgba(255, 220, 86, 0.98) 18deg,
      rgba(255, 220, 86, 0.0) 24deg,
      rgba(255, 112, 206, 0.98) 34deg,
      rgba(255, 112, 206, 0.0) 40deg,
      rgba(128, 194, 255, 0.98) 50deg,
      rgba(128, 194, 255, 0.0) 56deg,
      rgba(46, 248, 255, 0.98) 66deg,
      rgba(46, 248, 255, 0.0) 72deg,
      rgba(255, 255, 255, 0.0) 360deg
    );
  filter: blur(0px);
  opacity: 1;
  transform: rotate(18deg) scale(1.14, 0.86);
  transform-origin: 50% 50%;
  animation: hh-sweep-1 4.9s linear infinite;
}

.heheshuis-layer-b {
  inset: -6px;
  z-index: 9;
  -webkit-mask: radial-gradient(circle, transparent 36%, black 40%, black 47%, transparent 52%);
          mask: radial-gradient(circle, transparent 36%, black 40%, black 47%, transparent 52%);
  background:
    conic-gradient(from 32deg,
      rgba(46, 248, 255, 0.0) 0deg,
      rgba(46, 248, 255, 0.98) 8deg,
      rgba(46, 248, 255, 0.0) 14deg,
      rgba(118, 188, 255, 0.98) 30deg,
      rgba(118, 188, 255, 0.0) 36deg,
      rgba(187, 95, 255, 0.98) 52deg,
      rgba(187, 95, 255, 0.0) 58deg,
      rgba(255, 90, 214, 0.98) 78deg,
      rgba(255, 90, 214, 0.0) 86deg,
      rgba(255, 206, 84, 0.98) 104deg,
      rgba(255, 206, 84, 0.0) 112deg,
      rgba(46, 248, 255, 0.0) 360deg
    ),
    linear-gradient(128deg,
      rgba(46,248,255,0.0) 32%,
      rgba(46,248,255,0.96) 42%,
      rgba(255,255,255,0.98) 46%,
      rgba(255,102,224,0.96) 50%,
      rgba(255,196,80,0.92) 54%,
      rgba(46,248,255,0.0) 62%);
  filter: blur(0px);
  opacity: 0.98;
  transform: rotate(-32deg) scale(1.2, 0.82);
  transform-origin: 50% 50%;
  animation: hh-sweep-2 6.2s linear infinite;
}
      rgba(46, 248, 255, 0.0) 294deg,
      rgba(46, 248, 255, 0.0) 360deg
    );
  filter: blur(0px);
  opacity: 0.94;
  animation: hh-sweep-2 6.6s linear infinite;
}

@keyframes hh-core-spin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes hh-core-pulse {
  0%, 100% { opacity: 0.95; filter: saturate(1.03) brightness(0.99); }
  50% { opacity: 1; filter: saturate(1.1) brightness(1.06); }
}

@keyframes hh-sweep-1 {
  from { transform: rotate(18deg) scale(1.14, 0.86); opacity: 0.82; }
  50% { transform: rotate(198deg) scale(1.14, 0.86); opacity: 1; }
  to { transform: rotate(378deg) scale(1.14, 0.86); opacity: 0.82; }
}

@keyframes hh-sweep-2 {
  from { transform: rotate(-32deg) scale(1.2, 0.82); opacity: 0.78; }
  50% { transform: rotate(-212deg) scale(1.2, 0.82); opacity: 1; }
  to { transform: rotate(-392deg) scale(1.2, 0.82); opacity: 0.78; }
}

@keyframes hh-flare-cross {
  from { transform: rotate(0deg); opacity: 0.68; }
  30% { opacity: 1; }
  50% { transform: rotate(180deg); opacity: 1; }
  to { transform: rotate(360deg); opacity: 0.68; }
}

@keyframes hh-line-cross {
  0%, 100% { transform: rotate(-22deg) scale(1.08, 0.9); opacity: 0.76; }
  50% { transform: rotate(158deg) scale(1.08, 0.9); opacity: 1; }
}

@media (max-width: 680px) {
  .avatar-deco.deco-heheshuis_aura,
  .heheshuis-layer-a,
  .heheshuis-layer-b {
    inset: -4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-deco.deco-heheshuis_aura,
  .heheshuis-layer-a,
  .heheshuis-layer-b {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== SHOP PAGE ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 20px 20px 60px;
  align-content: start;
}

/* Make the whole shop view scrollable */
#view-shop {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.shop-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 14px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.shop-card:hover { border-color: var(--border-bright); transform: translateY(-2px); }
.shop-card.owned { border-color: var(--accent); }
.shop-card.equipped { border-color: var(--green); box-shadow: 0 0 16px var(--green-glow); }

.shop-card-preview {
  width: 64px; height: 64px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
/* Shop preview uses avatar-wrap structure too */
.shop-card-preview .avatar-wrap {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.shop-card-preview .avatar {
  width: 48px !important; height: 48px !important;
  font-size: 18px !important;
  flex-shrink: 0;
}
.shop-card-name { font-size: 13px; font-weight: 700; text-align: center; }
.shop-card-desc { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.4; }
.shop-rarity {
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 99px;
}
.rarity-common    { background: rgba(138,148,168,0.2); color: #8a94a8; }
.rarity-rare      { background: rgba(91,110,245,0.2);  color: var(--accent); }
.rarity-epic      { background: rgba(139,60,247,0.2);  color: #8b3cf7; }
.rarity-legendary { background: rgba(245,200,66,0.2);  color: var(--yellow); }
.rarity-mixed     { background: rgba(61,214,140,0.16); color: var(--green); }
.rarity-ascendent { background: linear-gradient(90deg, rgba(255,224,94,0.32), rgba(125,247,255,0.24), rgba(196,104,255,0.28)); color: #fff3a8; border: 1px solid rgba(125,247,255,0.55); box-shadow: 0 0 14px rgba(125,247,255,0.18); }
.rarity-secret    { background: rgba(97, 164, 245, 0.2); color: #d2ecff; border: 1px solid rgba(157, 213, 255, 0.5); }

.shop-card-btn {
  width: 100%; padding: 7px;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif; font-size: 12px; font-weight: 700;
  cursor: pointer; border: none; transition: var(--transition);
}
.shop-card-btn.equip   { background: var(--accent); color: #fff; }
.shop-card-btn.equip:hover { background: var(--accent-hover); }
.shop-card-btn.unequip { background: rgba(61,214,140,0.15); color: var(--green); }
.shop-card-btn.unequip:hover { background: rgba(61,214,140,0.25); }
.shop-card-btn.locked  { background: var(--bg-hover); color: var(--text-muted); cursor: default; }

#shop-dynamic-tabs {
  padding: 8px 20px 0;
}

.limited-redeem {
  margin: 18px 20px 8px;
  padding: 14px;
  border: 1px solid rgba(92, 114, 255, 0.55);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(92, 114, 255, 0.12), rgba(56, 217, 208, 0.05));
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.2fr);
  gap: 12px 18px;
  align-items: center;
}
.limited-redeem-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.limited-redeem-copy strong { display: block; color: var(--text-primary); }
.limited-redeem-copy span:not(.limited-redeem-mark) { display: block; color: var(--text-muted); font-size: 12px; }
.limited-redeem-mark {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid #7687ff;
  border-radius: 4px;
  color: #aeb8ff;
  font-size: 10px;
  font-weight: 800;
}
.limited-redeem-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.limited-redeem-form input {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0;
  text-transform: uppercase;
}
.limited-redeem .form-error { grid-column: 1 / -1; min-height: 0; }
@media (max-width: 760px) {
  .limited-redeem { grid-template-columns: 1fr; margin-inline: 12px; }
  .limited-redeem-form { grid-template-columns: 1fr; }
}

.shop-secret-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(0,0,0,0.2));
}

.shop-tab {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: rgba(205, 216, 238, 0.76);
  background: transparent;
  cursor: pointer;
}

.shop-tab.active {
  color: #e8f1ff;
  background: linear-gradient(130deg, rgba(111,220,255,0.22), rgba(82, 116, 229, 0.22));
}

.shop-subsection {
  padding: 2px 20px 0;
}

.shop-subsection h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.shop-subsection p {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.ringtone-grid {
  padding-top: 12px;
}

.ringtone-card-preview {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 40%), linear-gradient(145deg, rgba(70,90,255,0.35), rgba(40,180,220,0.2));
  color: #dce7ff;
}

.shop-card-btn.preview {
  background: rgba(111, 220, 255, 0.12);
  color: #94e8ff;
  border: 1px solid rgba(111, 220, 255, 0.28);
}

.shop-card-btn.preview:hover {
  background: rgba(111, 220, 255, 0.2);
}

/* ===== NAMEPLATES + ORGANIZED SHOP ===== */
#shop-grid.shop-grid {
  display: block;
  padding: 12px 20px 60px;
}
.shop-catalog-section,
.shop-exclusive-drawer {
  width: 100%;
  margin-top: 12px;
}
.shop-section-heading,
.shop-exclusive-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
}
.shop-section-heading span,
.shop-exclusive-drawer > summary span {
  display: block;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.shop-section-heading h2,
.shop-exclusive-drawer > summary strong {
  display: block;
  margin: 3px 0 0;
  color: var(--text-primary);
  font-size: 16px;
  letter-spacing: 0;
}
.shop-section-heading b,
.shop-exclusive-drawer > summary small {
  color: var(--text-secondary);
  font-size: 11px;
  white-space: nowrap;
}
.shop-exclusive-drawer > summary { cursor: pointer; list-style: none; }
.shop-exclusive-drawer > summary::-webkit-details-marker { display: none; }
.shop-exclusive-drawer > summary::after {
  content: '+';
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
}
.shop-exclusive-drawer[open] > summary::after { content: '−'; }
.shop-exclusive-drawer[open] > summary { border-color: var(--border-bright); }
.shop-exclusive-drawer > h3 { margin: 22px 2px 10px; font-size: 14px; }
.shop-drawer-copy { padding: 12px 2px 0; color: var(--text-muted); font-size: 12px; }
.shop-grid-inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  padding-top: 12px;
}
.pack-only-chip {
  padding: 2px 6px;
  border: 1px solid rgba(105, 215, 177, .35);
  border-radius: 3px;
  color: #62d8ad;
  background: rgba(50, 170, 135, .1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
}
.nameplate-card-meta { display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.shop-sell-btn { margin-top:2px; background:rgba(240,84,84,.1); color:var(--red); font-size:11px; }

.nameplate-surface,
.nameplate-preview,
.shop-pack-nameplate-mini,
.pack-result-nameplate {
  --np-a: #3b465a;
  --np-b: #151a24;
  --np-edge: rgba(255,255,255,.2);
  --np-glow: rgba(115,135,175,.24);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(115deg, var(--np-a), var(--np-b) 48%, var(--np-a));
  background-size: 220% 100%;
  border: 1px solid var(--np-edge);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 12px var(--np-glow);
  animation: nameplate-field 7s ease-in-out infinite alternate;
}
.nameplate-surface {
  border-radius: 5px;
  color: var(--text-primary);
  background: var(--np-background, linear-gradient(115deg, var(--np-a), var(--np-b) 48%, var(--np-a))) !important;
}
.nameplate-surface > * {
  position: relative;
  z-index: 2;
}
.nameplate-surface::before,
.nameplate-preview::before,
.shop-pack-nameplate-mini::before,
.pack-result-nameplate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 0 35%, rgba(255,255,255,.14) 46%, transparent 57%),
    repeating-linear-gradient(105deg, transparent 0 17px, rgba(255,255,255,.06) 18px, transparent 20px 34px);
  background-size: 220% 100%, auto;
  animation: nameplate-scan 5.5s linear infinite;
}
.nameplate-surface::after,
.nameplate-preview::after,
.shop-pack-nameplate-mini::after,
.pack-result-nameplate::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(0,0,0,.24);
}
.nameplate-preview {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.nameplate-preview-avatar {
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#151827;
  border:2px solid var(--np-edge);
  box-shadow:0 0 10px var(--np-glow);
}
.nameplate-preview i {
  position:absolute;
  right:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--np-edge);
  box-shadow:0 0 10px var(--np-edge);
}
.shop-pack-nameplate-mini {
  width: 58px;
  height: 48px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #fff;
}
.shop-pack-nameplate-mini .shop-pack-odds { position:absolute; left:0; right:0; bottom:-16px; }
.pack-result-nameplate { width:116px; min-height:48px; display:grid; place-items:center; border-radius:5px; color:#fff; font-size:11px; font-weight:800; text-align:center; }
@keyframes nameplate-scan { from { background-position:130% 0, 0 0; } to { background-position:-120% 0, 34px 0; } }
@keyframes nameplate-field { from { background-position:0 50%; } to { background-position:100% 50%; } }

.nameplate-signal_strip { --np-a:#174f46;--np-b:#15211f;--np-edge:#65d7bb;--np-glow:rgba(68,217,174,.25); }
.nameplate-ember_line { --np-a:#713c26;--np-b:#241815;--np-edge:#f0a064;--np-glow:rgba(240,125,70,.26); }
.nameplate-polar_label { --np-a:#305c70;--np-b:#17232d;--np-edge:#9fe8ff;--np-glow:rgba(115,212,245,.25); }
.nameplate-neon_lane { --np-a:#075778;--np-b:#11162e;--np-edge:#37e1ff;--np-glow:rgba(27,202,255,.34); }
.nameplate-violet_drive { --np-a:#593890;--np-b:#1e1733;--np-edge:#c396ff;--np-glow:rgba(151,84,255,.32); }
.nameplate-coral_frequency { --np-a:#8a3d55;--np-b:#2d1922;--np-edge:#ff91ad;--np-glow:rgba(255,102,142,.3); }
.nameplate-plasma_frame { --np-a:#176a88;--np-b:#3b1e73;--np-edge:#6ef4ff;--np-glow:rgba(87,137,255,.4); }
.nameplate-toxic_matrix { --np-a:#426818;--np-b:#142317;--np-edge:#b4ff4e;--np-glow:rgba(125,255,49,.34); }
.nameplate-crystal_wave { --np-a:#386da0;--np-b:#2d225e;--np-edge:#c0e9ff;--np-glow:rgba(119,178,255,.37); }
.nameplate-starforge_plate { --np-a:#78551b;--np-b:#241c16;--np-edge:#ffd873;--np-glow:rgba(255,194,61,.38); }
.nameplate-solar_regalia { --np-a:#a04719;--np-b:#361b1a;--np-edge:#ffe06e;--np-glow:rgba(255,112,39,.4); }
.nameplate-quantum_banner { --np-a:#214d8f;--np-b:#642b78;--np-edge:#87d8ff;--np-glow:rgba(130,79,255,.4); }
.nameplate-dragon_script { --np-a:#8c241e;--np-b:#261516;--np-edge:#ff9d52;--np-glow:rgba(255,59,38,.42); }
.nameplate-mistbound_title { --np-a:#364a9b;--np-b:#652a7e;--np-edge:#80f2ff;--np-glow:rgba(151,66,255,.42); }
.nameplate-chronolock { --np-a:#204f69;--np-b:#201d43;--np-edge:#85d9db;--np-glow:rgba(69,211,216,.4); }
.nameplate-singularity_plate { --np-a:#11131f;--np-b:#57318c;--np-edge:#f1d4ff;--np-glow:rgba(157,80,255,.55); }
.nameplate-astral_dominion_plate { --np-a:#22537b;--np-b:#6a2d79;--np-edge:#fff096;--np-glow:rgba(98,229,255,.52); }
.nameplate-apex_tempest_plate { --np-a:#174766;--np-b:#18203c;--np-edge:#f8fbff;--np-glow:rgba(75,186,255,.55); }

.nameplate-singularity_plate {
  --np-background:
    radial-gradient(ellipse at 88% 50%, #02030a 0 7%, transparent 8%),
    radial-gradient(ellipse at 88% 50%, transparent 0 10%, #8c54ff 12%, #2c1b5e 19%, transparent 31%),
    linear-gradient(105deg, #090b15, #241447 54%, #080a12);
  background:var(--np-background);
  background-size: 100% 100%;
  box-shadow: inset 0 0 22px rgba(119,69,220,.45), 0 0 16px rgba(135,78,255,.48);
}
.nameplate-singularity_plate::before {
  inset: -85% -6% -85% 42%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgba(174,126,255,.82) 19%, transparent 25% 48%, rgba(77,211,255,.58) 53%, transparent 60% 100%);
  filter: blur(3px);
  animation: nameplate-singularity 4.2s linear infinite;
}
.nameplate-singularity_plate::after {
  inset: 4px 8px 4px 45%;
  border: 0;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 36% 74%, #b8efff 0 1px, transparent 2px),
    radial-gradient(circle at 67% 23%, #e8d7ff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 68%, #fff 0 1px, transparent 2px);
  animation: nameplate-stars 2.3s ease-in-out infinite alternate;
}
@keyframes nameplate-singularity { to { transform:rotate(360deg); } }
@keyframes nameplate-stars { to { opacity:.34; filter:brightness(1.8); } }

.nameplate-astral_dominion_plate {
  --np-background:
    linear-gradient(118deg, #071928, #124a63 28%, #50236e 64%, #211044),
    linear-gradient(90deg, transparent, #fff);
  background:var(--np-background);
  background-size: 180% 100%, 100% 100%;
  box-shadow: inset 0 0 24px rgba(74,222,255,.34), 0 0 18px rgba(212,106,255,.42);
}
.nameplate-astral_dominion_plate::before {
  inset: -30% -10%;
  background:
    repeating-linear-gradient(165deg, transparent 0 15px, rgba(87,236,255,.28) 18px, rgba(219,105,255,.22) 23px, transparent 29px 46px),
    linear-gradient(90deg, transparent 15%, rgba(255,244,154,.42) 50%, transparent 78%);
  filter: blur(1px);
  animation: nameplate-dominion 5s ease-in-out infinite alternate;
}
.nameplate-astral_dominion_plate::after {
  inset: 5px 7px;
  border-color: rgba(255,240,150,.48);
  background:
    linear-gradient(24deg, transparent 0 28%, rgba(255,255,255,.5) 29% 29.5%, transparent 30% 100%),
    linear-gradient(152deg, transparent 0 61%, rgba(126,236,255,.48) 62% 62.5%, transparent 63% 100%);
  animation: nameplate-constellation 3.8s ease-in-out infinite;
}
@keyframes nameplate-dominion { to { transform:translateX(12%) skewX(-5deg); filter:blur(2px) hue-rotate(24deg); } }
@keyframes nameplate-constellation { 50% { opacity:.42; filter:brightness(1.7); } }

.nameplate-apex_tempest_plate {
  --np-background:
    linear-gradient(105deg, #06101d, #0a4469 34%, #24235d 68%, #07121f);
  background:var(--np-background);
  background-size: 220% 100%;
  box-shadow: inset 0 0 24px rgba(48,169,255,.48), 0 0 18px rgba(65,184,255,.48);
  animation: nameplate-tempest-field 4.8s ease-in-out infinite alternate;
}
.nameplate-apex_tempest_plate::before {
  inset: 0 -40%;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(228,250,255,.95) 43% 44%, transparent 45% 100%),
    linear-gradient(68deg, transparent 0 58%, rgba(79,196,255,.7) 59% 60%, transparent 61% 100%),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(44,141,212,.2) 28px, transparent 32px);
  animation: nameplate-lightning 3.4s steps(1,end) infinite;
}
.nameplate-apex_tempest_plate::after {
  inset: 2px;
  border-color: rgba(202,244,255,.52);
  background: linear-gradient(90deg, transparent, rgba(110,218,255,.24), transparent);
  animation: nameplate-thunder-sweep 2.6s linear infinite;
}
.nameplate-surface.nameplate-singularity_plate .display-name,
.nameplate-surface.nameplate-singularity_plate .member-name,
.nameplate-surface.nameplate-singularity_plate .dm-profile-name {
  color:#eadcff;
  text-shadow:0 0 9px rgba(183,126,255,.72);
}
.nameplate-surface.nameplate-astral_dominion_plate .display-name,
.nameplate-surface.nameplate-astral_dominion_plate .member-name,
.nameplate-surface.nameplate-astral_dominion_plate .dm-profile-name {
  color:#fff2ad;
  text-shadow:0 0 10px rgba(80,226,255,.72);
}
.nameplate-surface.nameplate-apex_tempest_plate .display-name,
.nameplate-surface.nameplate-apex_tempest_plate .member-name,
.nameplate-surface.nameplate-apex_tempest_plate .dm-profile-name {
  color:#e9fbff;
  text-shadow:0 0 10px rgba(70,190,255,.8);
}
@keyframes nameplate-tempest-field { to { background-position:100% 50%; filter:saturate(1.35); } }
@keyframes nameplate-lightning {
  0%, 36%, 43%, 100% { opacity:.08; transform:translateX(-9%); }
  37% { opacity:1; transform:translateX(0); }
  39% { opacity:.22; }
  41% { opacity:.88; transform:translateX(7%); }
}
@keyframes nameplate-thunder-sweep { from { transform:translateX(-90%); } to { transform:translateX(90%); } }

@media (prefers-reduced-motion: reduce) {
  .nameplate-surface,
  .nameplate-preview,
  .shop-pack-nameplate-mini,
  .pack-result-nameplate,
  .nameplate-surface::before,
  .nameplate-surface::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== DM ROSTER + PROFILE ===== */
.dm-search-wrap { padding:8px 10px 4px; }
.dm-search-wrap input {
  width:100%;
  height:34px;
  border:1px solid var(--border);
  border-radius:5px;
  padding:0 10px;
  background:var(--bg-void);
  color:var(--text-primary);
  font:inherit;
  font-size:12px;
}
.dm-list { padding:6px 8px; }
.dm-item { min-height:48px; padding:6px 8px; border-radius:5px; }
.dm-item .avatar-wrap { flex:0 0 auto; }
.dm-item .person-info { flex:1; overflow:hidden; }
.dm-item .display-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-item .last-msg { text-transform:capitalize; }
.chat-container { position:relative; }
.chat-container.has-profile-panel .messages-wrap,
.chat-container.has-profile-panel > .message-input-wrap { margin-right:288px; }
.dm-profile-panel {
  display:none;
  position:absolute;
  top:61px;
  right:0;
  bottom:0;
  width:288px;
  overflow-y:auto;
  border-left:1px solid var(--border);
  background:var(--bg-surface);
  z-index:4;
}
.dm-profile-panel.pro-profile-card {
  background:linear-gradient(145deg,color-mix(in srgb,var(--profile-start) 24%,#111522),color-mix(in srgb,var(--profile-end) 18%,#181d2b));
}
.chat-container.has-profile-panel .dm-profile-panel { display:block; }
.dm-profile-banner { height:116px; background:linear-gradient(115deg,var(--np-a,#243257),var(--np-b,#302447),var(--np-a,#243257)); border:none; border-radius:0; box-shadow:none; }
.dm-profile-avatar { width:78px; height:78px; margin:-39px 0 0 18px; }
.dm-profile-avatar .avatar { width:78px!important; height:78px!important; font-size:26px; border:5px solid var(--bg-surface); }
.dm-profile-copy { padding:12px 18px 16px; border-bottom:1px solid var(--border); }
.dm-profile-name { display:inline-flex; align-items:center; gap:4px; font-size:18px; font-weight:800; }
.dm-profile-status { margin-top:8px; color:var(--text-secondary); font-size:12px; text-transform:capitalize; }
.dm-profile-section { margin:14px; padding:13px; border-radius:6px; background:var(--bg-elevated); }
.dm-profile-section span { color:var(--text-muted); font-size:10px; font-weight:800; letter-spacing:1px; }
.dm-profile-section p { margin:8px 0 0; color:var(--text-secondary); font-size:12px; line-height:1.5; }
.dm-profile-message { width:calc(100% - 28px); margin:0 14px 16px; padding:9px; border:1px solid var(--border-bright); border-radius:5px; background:var(--bg-elevated); color:var(--text-primary); cursor:pointer; }
@media(max-width:1050px) {
  .dm-profile-panel { display:none!important; }
  .chat-container.has-profile-panel .messages-wrap,
  .chat-container.has-profile-panel > .message-input-wrap { margin-right:0; }
}

/* ===== MENTIONS ===== */
.mention-user, .mention-role {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.mention-user {
  background: rgba(91,110,245,0.25);
  color: #a0aaff;
}
.mention-user:hover { background: rgba(91,110,245,0.4); }
.mention-self {
  background: rgba(245,200,66,0.2);
  color: var(--yellow);
}
.mention-self:hover { background: rgba(245,200,66,0.35); }
.mention-role {
  background: rgba(255,255,255,0.08);
}
.mention-role:hover { background: rgba(255,255,255,0.15); }
.mention-special {
  color: var(--yellow);
  background: rgba(245,200,66,0.14);
}

/* Mentioned message highlight */
.message.mentioned-me {
  background: rgba(245,200,66,0.06);
  border-left: 2px solid var(--yellow);
  padding-left: 6px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Autocomplete dropdown */
.mention-autocomplete {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0; right: 56px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
}
.mention-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: var(--transition);
}
.mention-item:hover, .mention-item.selected {
  background: var(--bg-hover);
}
.mention-item-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.mention-item-role-icon {
  font-size: 14px; font-weight: 800;
}
.mention-item-special-icon {
  background: rgba(245,200,66,0.16);
  color: var(--yellow);
}
.mention-item-name { font-size: 13px; font-weight: 700; }
.mention-item-sub { font-size: 11px; color: var(--text-muted); }
.mention-section-label {
  padding: 6px 12px 2px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
}

/* Private channel icon */
.channel-item .ch-hash.private { color: var(--yellow); }

/* ===== MESSAGE DELETE BUTTON ===== */
.msg-delete-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-top: 2px;
}
.msg-delete-btn:hover { color: var(--red); background: rgba(240,84,84,0.15); }
.message:hover .msg-delete-btn { opacity: 1; }

.msg-action-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-top: 2px;
}

.msg-action-btn:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
}

.message:hover .msg-action-btn { opacity: 1; }

.profile-divider {
  height: 1px;
  background: var(--border-bright);
  margin: 20px 0 16px;
}

/* ===== NEXUS ADMIN DECORATION ===== */
/*
  Red power surge: normally a tight red glow ring.
  Every 4s: the ring flares outward, a red energy wave COVERS the avatar
  (like a power surge consuming it), then snaps back to the ring.
  The avatar is covered for ~0.6s at the peak.
*/
.avatar-deco.deco-nexus_admin {
  border-radius: 50%;
  animation: admin-cycle 4s ease-in-out infinite;
}

@keyframes admin-cycle {
  /* 0-60%: tight glowing ring */
  0% {
    inset: -2px;
    background: transparent;
    box-shadow: 0 0 0 2px #ff1a1a, 0 0 10px 3px rgba(255,26,26,0.6);
  }
  55% {
    inset: -2px;
    background: transparent;
    box-shadow: 0 0 0 2px #ff1a1a, 0 0 14px 5px rgba(255,26,26,0.7);
  }
  /* 60-70%: ring expands and brightens — surge building */
  65% {
    inset: -6px;
    background: radial-gradient(circle, rgba(255,26,26,0.15) 60%, rgba(255,26,26,0.5) 100%);
    box-shadow: 0 0 0 3px #ff4444, 0 0 22px 8px rgba(255,26,26,0.8);
  }
  /* 70-80%: FULL COVER — red energy consumes the avatar */
  75% {
    inset: -3px;
    background: radial-gradient(circle, rgba(200,0,0,0.92) 0%, rgba(255,26,26,0.98) 55%, rgba(255,80,80,0.6) 100%);
    box-shadow: 0 0 0 4px #ff0000, 0 0 30px 12px rgba(255,0,0,0.9), 0 0 60px 20px rgba(200,0,0,0.5);
  }
  /* 80-90%: snap back with residual flicker */
  85% {
    inset: -2px;
    background: transparent;
    box-shadow: 0 0 0 3px #ff4444, 0 0 20px 7px rgba(255,26,26,0.7);
  }
  /* 90-100%: settle */
  100% {
    inset: -2px;
    background: transparent;
    box-shadow: 0 0 0 2px #ff1a1a, 0 0 10px 3px rgba(255,26,26,0.6);
  }
}

/* Crown symbol floats above during surge */
.avatar-wrap .admin-crown {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  animation: crown-appear 4s ease-in-out infinite;
}
@keyframes crown-appear {
  0%, 55%  { opacity: 0; transform: translateX(-50%) translateY(4px); }
  70%, 85% { opacity: 1; transform: translateX(-50%) translateY(0px); filter: drop-shadow(0 0 6px #ff1a1a); }
  100%     { opacity: 0; transform: translateX(-50%) translateY(4px); }
}

/* ===== STORM LIGHTNING DECORATION ===== */
/* Rendered via canvas — see renderAvatar in app.js */
.avatar-deco.deco-storm {
  border-radius: 50%;
  overflow: visible;
  background: transparent;
}
.storm-canvas {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  border-radius: 50%;
}

/* ===== MYTHICAL RARITY ===== */
.rarity-mythical {
  background: linear-gradient(135deg, rgba(255,200,50,0.25), rgba(180,80,255,0.25));
  color: #ffd700;
  border: 1px solid rgba(255,200,50,0.4);
  animation: mythical-badge-shimmer 3s ease-in-out infinite;
}
.rarity-ascendent {
  background-size: 220% 100%;
  animation: ascendent-badge-shimmer 2.1s ease-in-out infinite;
}
@keyframes mythical-badge-shimmer {
  0%,100% { color: #ffd700; border-color: rgba(255,200,50,0.4); }
  50%      { color: #e040fb; border-color: rgba(180,80,255,0.5); }
}
@keyframes ascendent-badge-shimmer {
  0%,100% { color: #fff3a8; border-color: rgba(125,247,255,0.55); filter: saturate(1.1); background-position: 0% 50%; }
  50% { color: #7df7ff; border-color: rgba(255,224,94,0.8); filter: saturate(1.8) brightness(1.25); background-position: 100% 50%; }
}

/* ===== MYSTERY CARD (hidden mythical) ===== */
.shop-card.mystery {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(30,20,50,0.9) 100%);
  border: 1px solid rgba(255,200,50,0.15);
  cursor: default;
  position: relative;
  overflow: hidden;
}
.shop-card.mystery::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,
    transparent 0%, rgba(255,200,50,0.03) 40%,
    rgba(180,80,255,0.05) 60%, transparent 100%);
  animation: mystery-sweep 4s ease-in-out infinite;
}
@keyframes mystery-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.mystery-preview {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.mystery-silhouette {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,50,0.08) 0%, rgba(180,80,255,0.05) 100%);
  border: 1px solid rgba(255,200,50,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  animation: mystery-pulse 2s ease-in-out infinite;
}
@keyframes mystery-pulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 0.9; transform: scale(1.05); }
}
.mystery-name {
  font-size: 14px; font-weight: 800;
  color: rgba(255,200,50,0.4);
  letter-spacing: 3px;
}
.mystery-hint {
  font-size: 10px; color: var(--text-muted);
  text-align: center; line-height: 1.4;
}

/* ===== CLAIM ANIMATION OVERLAY ===== */
#claim-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
#claim-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#claim-card {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  text-align: center;
  animation: claim-card-rise 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes claim-card-rise {
  from { opacity: 0; transform: translateY(60px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#claim-rarity-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  padding: 4px 14px; border-radius: 99px;
  background: linear-gradient(135deg, rgba(255,200,50,0.2), rgba(180,80,255,0.2));
  border: 1px solid rgba(255,200,50,0.5);
  color: #ffd700;
  animation: claim-badge-in 0.4s 0.5s both;
}
@keyframes claim-badge-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
#claim-deco-preview {
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  animation: claim-deco-in 0.6s 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes claim-deco-in {
  from { opacity: 0; transform: scale(0.5) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
#claim-deco-preview .avatar-wrap {
  width: 80px !important; height: 80px !important;
}
#claim-deco-preview .avatar {
  width: 80px !important; height: 80px !important;
  font-size: 32px !important;
}
#claim-name {
  font-size: 28px; font-weight: 800;
  background: linear-gradient(135deg, #ffd700, #e040fb, #ffd700);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: claim-name-in 0.5s 1.0s both, claim-name-shine 3s 1.5s linear infinite;
}
@keyframes claim-name-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes claim-name-shine {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}
#claim-desc {
  font-size: 13px; color: var(--text-secondary);
  max-width: 260px; line-height: 1.5;
  animation: claim-desc-in 0.4s 1.3s both;
}
@keyframes claim-desc-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#claim-stamp {
  font-size: 13px; font-weight: 800; letter-spacing: 4px;
  color: #ffd700;
  opacity: 0;
  animation: claim-stamp-in 0.6s 1.6s cubic-bezier(0.22,1,0.36,1) forwards;
  text-shadow: 0 0 20px rgba(255,215,0,0.8);
}
@keyframes claim-stamp-in {
  0%   { opacity: 0; transform: scale(2); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
#claim-dismiss {
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 1px;
  opacity: 0;
  animation: claim-dismiss-in 0.4s 2.5s both;
}
@keyframes claim-dismiss-in {
  from { opacity: 0; }
  to   { opacity: 0.6; }
}

/* ===== SECRET CLAIM CINEMATIC ===== */
#secret-claim-overlay {
  position: fixed;
  inset: 0;
  z-index: 10030;
  background: #000;
  overflow: hidden;
  display: none;
  align-items: center;
  justify-content: center;
}

#secret-claim-overlay .hidden {
  opacity: 0;
}

#secret-claim-canvas,
#secret-film-grain,
#secret-stage-light,
#secret-lantern-silhouette,
#secret-constellation,
#secret-glyphs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#secret-film-grain {
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.12) 0.5px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.08) 0.5px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  animation: secret-grain-shift 0.4s steps(2) infinite;
}

@keyframes secret-grain-shift {
  from { transform: translate(0, 0); }
  to { transform: translate(1px, -1px); }
}

#secret-stage-light {
  opacity: 0;
  background:
    radial-gradient(circle at 50% 57%, rgba(255, 220, 132, 0.62), rgba(255, 220, 132, 0.16) 16%, rgba(255, 220, 132, 0.02) 32%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(110, 72, 162, 0.12), transparent 40%);
  transform: scale(0.78);
}

#secret-lantern-silhouette {
  opacity: 0;
  background:
    radial-gradient(circle at 50% 58%, rgba(214, 231, 255, 0.92) 1px, transparent 3px),
    radial-gradient(ellipse at 50% 58%, rgba(15, 16, 26, 0.92) 0 28px, transparent 30px),
    linear-gradient(to bottom, transparent 44%, rgba(8, 8, 12, 0.86) 56%, transparent 80%);
}

#secret-constellation {
  opacity: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.86) 1px, transparent 2px),
    radial-gradient(circle at 32% 35%, rgba(255,255,255,0.7) 1px, transparent 2px),
    radial-gradient(circle at 62% 21%, rgba(255,255,255,0.8) 1px, transparent 2px),
    radial-gradient(circle at 78% 37%, rgba(255,255,255,0.75) 1px, transparent 2px),
    radial-gradient(circle at 52% 52%, rgba(255,255,255,0.68) 1px, transparent 2px),
    radial-gradient(circle at 40% 66%, rgba(255,255,255,0.8) 1px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.82) 1px, transparent 2px);
}

#secret-glyphs {
  opacity: 0;
  font-family: 'JetBrains Mono', monospace;
}

#secret-card {
  position: relative;
  z-index: 2;
  width: min(90vw, 420px);
  border-radius: 18px;
  border: 1px solid rgba(223, 201, 145, 0.45);
  background: linear-gradient(165deg, rgba(14,16,29,0.96), rgba(19,13,31,0.92));
  box-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(174, 145, 84, 0.28) inset;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(22px) scale(0.93);
}

#secret-rarity-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #ffe4b0;
  border: 1px solid rgba(255, 223, 156, 0.5);
  padding: 4px 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(71,52,95,0.55), rgba(113,84,41,0.5));
}

#secret-name {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #efe7d8;
  text-shadow: 0 0 24px rgba(196, 160, 88, 0.38);
}

#secret-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #b8bfd7;
  max-width: 320px;
}

#secret-deco-preview {
  padding: 6px;
}

#secret-claim-overlay.stage-blackout {
  animation: secret-fade-dark 2s linear forwards;
}

#secret-claim-overlay.stage-sky,
#secret-claim-overlay.stage-descent {
  background: linear-gradient(180deg, rgba(11,16,25,0.98), rgba(20,30,43,0.96) 52%, rgba(12,17,24,0.98));
}

#secret-claim-overlay.stage-sky #secret-stage-light,
#secret-claim-overlay.stage-descent #secret-stage-light {
  opacity: 0.35;
  animation: secret-push-light 5s ease-in-out forwards;
}

#secret-claim-overlay.stage-silhouette #secret-lantern-silhouette {
  opacity: 0.82;
  filter: drop-shadow(0 0 16px rgba(220,240,255,0.24));
}

#secret-claim-overlay.stage-strike {
  animation: secret-screen-shake 0.75s ease-in-out;
}

#secret-claim-overlay.stage-strike,
#secret-claim-overlay.stage-reveal {
  background:
    radial-gradient(circle at 50% 54%, rgba(167, 215, 255, 0.42), rgba(35, 58, 98, 0.28) 26%, rgba(8, 12, 20, 0.96) 70%);
}

#secret-claim-overlay.stage-reveal #secret-constellation,
#secret-claim-overlay.stage-engulf #secret-constellation {
  opacity: 0.88;
  animation: secret-stars-drift 5s linear infinite;
}

#secret-claim-overlay.stage-reveal #secret-glyphs,
#secret-claim-overlay.stage-engulf #secret-glyphs {
  opacity: 0.6;
  background:
    repeating-linear-gradient(45deg, rgba(213, 236, 255, 0.18), rgba(213, 236, 255, 0.18) 4px, transparent 4px, transparent 13px),
    repeating-linear-gradient(-45deg, rgba(122, 176, 255, 0.16), rgba(122, 176, 255, 0.16) 5px, transparent 5px, transparent 17px);
}

#secret-claim-overlay.stage-engulf {
  background:
    radial-gradient(circle at 50% 60%, rgba(122, 176, 255, 0.3), rgba(53, 74, 108, 0.24) 35%, rgba(7,10,17,0.98) 72%);
}

#secret-claim-overlay.stage-finalflash {
  background: rgba(244, 251, 255, 0.96);
}

#secret-claim-overlay.stage-card #secret-card {
  animation: secret-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes secret-fade-dark {
  from { background: rgba(12,12,18,0.1); }
  to { background: #000; }
}

@keyframes secret-push-light {
  0% { transform: scale(0.5); filter: blur(8px); }
  55% { transform: scale(0.9); filter: blur(2px); }
  100% { transform: scale(1.14); filter: blur(1px); }
}

@keyframes secret-screen-shake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-2px, 3px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes secret-stars-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-22px); }
}

@keyframes secret-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== NEXALS & ACHIEVEMENTS ===== */
.nexal-balance {
  display: flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, rgba(255,200,50,0.12), rgba(180,80,255,0.08));
  border: 1px solid rgba(255,200,50,0.3);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: 13px; font-weight: 700;
  color: #ffd700;
}
.nexal-balance svg { color: #ffd700; }

/* Achievements container */
#achievements-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: 40px;
}
.ach-category-section {
  margin-bottom: 8px;
}
.ach-category-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-muted);
  padding: 12px 0 6px;
}
.ach-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.ach-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.ach-card-top {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 10px;
}
.ach-card.completed { border-color: rgba(61,214,140,0.35); }
.ach-card.claimed   { border-color: var(--border); opacity: 0.55; }
.ach-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(61,214,140,0.05), transparent);
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.ach-card.completed:not(.claimed)::before { opacity: 1; }

.ach-icon {
  font-size: 22px; line-height: 1;
  flex-shrink: 0; margin-top: 1px;
}
.ach-body { flex: 1; min-width: 0; }
.ach-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.ach-desc  { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

.ach-progress-bar {
  height: 4px; border-radius: 99px;
  background: var(--bg-hover);
  margin-bottom: 5px; overflow: hidden;
  flex-shrink: 0;
}
.ach-progress-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--green));
  transition: width 0.5s ease;
}
.ach-card.completed .ach-progress-fill { background: var(--green); }

.ach-progress-text {
  font-size: 10px; color: var(--text-muted);
  margin-bottom: 10px;
}

.ach-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
}
.ach-reward {
  font-size: 12px; font-weight: 700;
  color: #ffd700;
}
.ach-claim-btn {
  padding: 5px 14px;
  background: var(--green);
  border: none; border-radius: var(--radius-sm);
  color: var(--bg-void);
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  flex-shrink: 0;
}
.ach-claim-btn:hover { filter: brightness(1.15); }
.ach-claimed-badge {
  font-size: 11px; color: var(--text-muted);
  font-weight: 600;
}

/* Buy button in shop */
.shop-card-btn.buy {
  background: linear-gradient(135deg, rgba(255,200,50,0.2), rgba(180,80,255,0.15));
  color: #ffd700;
  border: 1px solid rgba(255,200,50,0.3);
}
.shop-card-btn.buy:hover {
  background: linear-gradient(135deg, rgba(255,200,50,0.35), rgba(180,80,255,0.25));
}
.shop-card-btn.danger { background: rgba(240,84,84,0.14); color: var(--red); border: 1px solid rgba(240,84,84,0.22); }
.shop-card-price {
  font-size: 11px; color: #ffd700; font-weight: 700;
  margin-bottom: 4px; text-align: center;
}
#view-shop { overflow-y: auto; }

.user-card.pro-aurora { background: linear-gradient(110deg, rgba(62,210,255,0.2), rgba(124,84,255,0.2), rgba(48,234,170,0.16)); border-color: rgba(96,224,255,0.5); }
.user-card.pro-ember { background: linear-gradient(110deg, rgba(255,120,54,0.24), rgba(255,62,62,0.18), rgba(255,212,86,0.14)); border-color: rgba(255,160,72,0.5); }
.user-card.pro-glacier { background: linear-gradient(110deg, rgba(222,249,255,0.22), rgba(94,178,255,0.17), rgba(168,132,255,0.15)); border-color: rgba(190,238,255,0.52); }
.role-gradient-text { background: linear-gradient(90deg, var(--role-gradient-start), var(--role-gradient-end), var(--role-gradient-start)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: role-gradient-shift 3s linear infinite; }
.pro-name-effect { background:linear-gradient(90deg,var(--pro-name-start),var(--pro-name-end),var(--pro-name-start));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:role-gradient-shift 2.6s linear infinite; }
.user-info .display-name.pro-name-effect { color:transparent; }.identity-tag{border:0;border-radius:4px;padding:1px 5px;background:var(--tag-bg,#5865f2);color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer;margin-left:3px}.user-info{display:flex;align-items:center;flex-wrap:wrap}
@keyframes role-gradient-shift { to { background-position: 200% 0; } }
.pro-hero,.stats-hero { display:flex;justify-content:space-between;gap:18px;align-items:center;padding:22px;border:1px solid rgba(96,224,255,0.36);background:linear-gradient(120deg,rgba(72,210,255,0.16),rgba(158,88,255,0.16),rgba(255,192,78,0.1)); }
.pro-hero h2 { margin:4px 0 8px;font-size:22px; }.pro-hero p,.stats-hero p { margin:0;color:var(--text-secondary);font-size:13px; }.pro-kicker,.stats-hero span { color:#79e9ff;font-size:11px;font-weight:800;letter-spacing:1px; }
.pro-benefits,.stats-metrics { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px; }.pro-benefits>div,.stats-metrics>div,.stats-rarities { padding:15px;border:1px solid var(--border);background:var(--bg-surface); }.pro-benefits b,.stats-metrics b { display:block;font-size:15px;margin-bottom:5px; }.pro-benefits span,.stats-metrics span { color:var(--text-secondary);font-size:12px;display:block; }.pro-theme-row { display:flex;gap:8px;margin-top:12px; }.pro-theme-row button { padding:8px 12px;background:var(--bg-hover);border:1px solid var(--border-bright);color:var(--text-primary);cursor:pointer; }
.stats-hero strong { display:block;font-size:28px;color:#ffe05e;margin:5px 0; }.stats-rarities { display:flex;gap:10px;flex-wrap:wrap;margin-top:12px; }.stat-rarity { min-width:90px;text-transform:capitalize;display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:12px; }.stat-rarity b { color:var(--text-primary); }
.stats-actions { display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:180px; }
.stats-actions .shop-card-btn { min-width:145px; }
.stats-games { margin-top:24px;padding-top:20px;border-top:1px solid var(--border); }.stats-games > div:first-child { display:flex;align-items:center;justify-content:space-between;gap:18px; }.stats-games span { color:#79e9ff;font-size:11px;font-weight:800;letter-spacing:1px; }.stats-games h2 { margin:5px 0;font-size:18px; }.stats-games p { margin:0;color:var(--text-secondary);font-size:13px; }.stats-blackjack { margin-top:15px;max-width:430px;padding:16px;border:1px solid var(--border-bright);background:var(--bg-surface);border-radius:6px; }.blackjack-head { display:flex;justify-content:space-between;margin:10px 0 6px;font-size:13px; }.blackjack-head span { color:var(--yellow);letter-spacing:0; }.blackjack-result { color:var(--text-primary);font-weight:700;font-size:13px; }
.blackjack-window { position:fixed;z-index:910;left:calc(50% - 420px);top:95px;width:min(840px,calc(100vw - 32px));border:1px solid #506f8b;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,.55);overflow:hidden;background:#101923; }.blackjack-window-bar { height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:linear-gradient(90deg,#152c44,#1b2546);cursor:grab;user-select:none;touch-action:none; }.blackjack-window-bar:active{cursor:grabbing}.blackjack-window-bar>div{display:flex;align-items:center;gap:9px}.blackjack-window-bar small{color:#93aac0;font-size:11px}.blackjack-table-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#f3c455;color:#152037;font-size:13px;font-weight:900}.blackjack-window-btn{width:30px;height:30px;border:0;border-radius:4px;background:rgba(255,255,255,.1);color:#fff;font:700 18px sans-serif;cursor:pointer}.blackjack-window.minimized .blackjack-window-body{display:none}.blackjack-window-body{padding:18px}.blackjack-table-felt{min-height:470px;padding:28px 42px;border:2px solid #cba756;border-radius:50% 50% 38% 38% / 18% 18% 14% 14%;background:radial-gradient(ellipse at 50% 44%,#187155,#0a3d34 66%,#062621);box-shadow:inset 0 0 0 9px rgba(0,0,0,.18),inset 0 0 38px rgba(0,0,0,.6);}.blackjack-head{color:#eff7f7;margin:0 0 12px;font-size:15px}.blackjack-head span{color:#ffd45b}.blackjack-cards{display:flex;gap:11px;min-height:118px}.playing-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:76px;height:110px;padding:8px;border-radius:6px;background:#f7f5ef;color:#111a25;box-shadow:0 5px 9px rgba(0,0,0,.35);font-family:Georgia,serif}.playing-card b{font-size:23px;line-height:1}.playing-card em{align-self:center;font-size:42px;font-style:normal}.playing-card small{font-size:12px;align-self:flex-end}.playing-card.red{color:#b32432}.playing-card.card-back{padding:0;background:repeating-linear-gradient(45deg,#6d42dc 0 8px,#9b62ff 8px 16px);border:4px solid #f4e7b5}.playing-card.card-back i{margin:auto;width:48px;height:76px;border:2px solid rgba(255,255,255,.75);border-radius:5px}.blackjack-seat{display:flex;align-items:center;justify-content:space-between;margin:18px 0 9px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);color:#eaf6ee}.blackjack-seat span{font-size:11px;font-weight:800;letter-spacing:1px}.blackjack-seat b{font-size:22px;color:#f5d76f}.blackjack-result{color:#fff;background:rgba(0,0,0,.22);padding:9px 12px;border-radius:4px}.blackjack-table-felt .game-actions{margin-top:24px}.blackjack-table-felt .game-actions button{padding:13px;font-size:15px}
.blackjack-cashout{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;color:#d9f4e6;font-size:12px}.blackjack-cashout button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:620px){.blackjack-window{left:8px!important;top:70px!important;width:calc(100vw - 16px)}.blackjack-window-body{padding:10px}.blackjack-table-felt{min-height:400px;padding:22px 16px}.playing-card{width:58px;height:88px}.playing-card b{font-size:18px}.playing-card em{font-size:31px}.blackjack-cards{min-height:96px}}
.games-content { padding:20px; }.games-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px; }.game-hub-card { position:relative;min-height:250px;overflow:hidden;border:1px solid var(--border-bright);border-radius:7px;text-align:left;padding:22px;color:#fff;cursor:pointer;font:inherit;transition:transform .18s ease,border-color .18s ease; }.game-hub-card:hover { transform:translateY(-3px);border-color:#fff; }.game-hub-card.blackjack { background:linear-gradient(135deg,#0b5f45 0%,#13372e 56%,#061b18 100%); }.game-hub-card.poker { background:linear-gradient(135deg,#55215b 0%,#1f234a 54%,#10223a 100%); }.game-hub-card::after { content:'';position:absolute;right:-35px;bottom:-48px;width:190px;height:190px;border:2px solid rgba(255,255,255,.25);border-radius:50%; }.game-hub-icon { display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.15);font-size:21px;font-weight:900;margin-bottom:34px; }.game-hub-card strong { display:block;font-size:25px; }.game-hub-card small { display:block;margin:4px 0 12px;color:#f9d97b;font-size:12px;text-transform:uppercase;letter-spacing:1px; }.game-hub-card p { position:relative;z-index:1;max-width:280px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.5; }.game-hub-card b { position:absolute;bottom:20px;left:22px;color:#fff;font-size:13px; }
.quests-content{padding:20px;max-width:980px}.quests-hero{padding:24px;border:1px solid #416f8b;background:linear-gradient(120deg,#123d56,#253b69);margin-bottom:22px}.quests-hero span,.quest-section-head span{font-size:11px;font-weight:800;color:#7de5ff;letter-spacing:1px}.quests-hero h2{margin:6px 0;font-size:22px}.quests-hero p,.quest-card p{color:var(--text-secondary);font-size:13px}.quest-section{margin-top:24px}.quest-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.quest-section h2{font-size:16px}.quest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quest-card{padding:15px;border:1px solid var(--border);background:var(--bg-surface);min-height:145px;display:flex;flex-direction:column}.quest-card b{font-size:14px}.quest-card strong{color:#ffd45b;font-size:12px;margin-top:auto}.quest-progress{height:5px;background:var(--bg-hover);margin:12px 0 5px}.quest-progress i{display:block;height:100%;background:var(--accent)}.quest-card small{color:var(--text-muted);font-size:11px}
@media(max-width:700px){.quest-grid{grid-template-columns:1fr}}
@media (max-width:620px){.games-grid{grid-template-columns:1fr}.game-hub-card{min-height:210px}}
@media (max-width:620px){.pro-hero,.stats-hero{align-items:flex-start;flex-direction:column}.pro-benefits,.stats-metrics{grid-template-columns:1fr}}
.pro-customizer { display:grid;grid-template-columns:180px 1fr;gap:14px;margin-top:14px;padding:14px;border:1px solid var(--border-bright);background:var(--bg-surface); }.pro-customizer-preview { min-height:150px;padding:16px;background:linear-gradient(135deg,var(--pro-start,#5865f2),var(--pro-end,#a855f7));display:flex;flex-direction:column;justify-content:flex-end;color:#fff; }.pro-preview-avatar { width:46px;height:46px;border:3px solid var(--bg-elevated);border-radius:50%;background:var(--bg-void);display:grid;place-items:center;margin-bottom:10px;font-weight:800; }.pro-customizer-preview b { font-size:16px; }.pro-customizer-preview span { font-size:12px;opacity:.82; }.pro-customizer-controls { display:grid;gap:10px;align-content:start; }.pro-customizer-controls label { color:var(--text-secondary);font-size:12px;display:grid;gap:5px; }.pro-customizer-controls input,.pro-customizer-controls select { width:100%;min-height:34px;background:var(--bg-void);border:1px solid var(--border-bright);color:var(--text-primary); }.pro-customizer-controls input[type=color] { padding:2px; }
.pro-studio {
  display:grid;
  grid-template-columns:minmax(280px,380px) minmax(300px,1fr);
  gap:20px;
  margin-top:18px;
  padding:18px;
  border:1px solid var(--border-bright);
  background:var(--bg-surface);
}
.pro-studio-preview { display:flex;align-items:flex-start;justify-content:center; }
.pro-profile-editor-preview {
  position:relative;
  width:min(100%,350px);
  min-height:390px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--profile-end) 55%,#fff);
  border-radius:8px;
  color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.pro-preview-banner {
  height:138px;
  background-image:linear-gradient(115deg,var(--profile-start),var(--profile-end));
  background-size:cover;
  background-position:center;
}
.pro-profile-editor-preview .pro-preview-avatar {
  width:82px!important;
  height:82px!important;
  margin:-41px 0 0 20px;
  border:5px solid color-mix(in srgb,var(--profile-start) 20%,#151925);
  font-size:26px;
}
.pro-preview-body { padding:14px 20px 20px; }
.pro-preview-body > b { display:block;width:max-content;max-width:100%;font-size:21px; }
.pro-preview-body > span { display:block;margin-top:3px;color:rgba(255,255,255,.66);font-size:12px; }
.pro-preview-body > p { margin:18px 0 0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.5;white-space:pre-wrap; }
.pro-studio-controls { display:grid;gap:13px;align-content:start; }
.pro-studio-controls > label,
.pro-control-row label { display:grid;gap:6px;color:var(--text-secondary);font-size:12px;font-weight:700; }
.pro-control-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.pro-studio-controls select,
.pro-studio-controls input[type=color] {
  width:100%;
  height:40px;
  padding:5px 9px;
  border:1px solid var(--border-bright);
  border-radius:5px;
  background:var(--bg-void);
  color:var(--text-primary);
  font:inherit;
}
.pro-studio-controls input[type=color] { padding:3px; }
.pro-banner-controls { display:grid;grid-template-columns:1fr auto;gap:8px; }
.pro-banner-upload {
  min-height:40px;
  display:grid;
  place-items:center;
  border:1px dashed var(--border-bright);
  border-radius:5px;
  color:var(--text-primary);
  background:var(--bg-hover);
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.pro-banner-upload input { display:none; }
@media(max-width:820px) {
  .pro-studio { grid-template-columns:1fr; }
  .pro-control-row { grid-template-columns:1fr; }
}

.shop-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  padding: 12px 20px 20px;
}

.shop-pack-section {
  padding-top: 16px;
}

.shop-pack-card {
  align-items: stretch;
  min-height: 245px;
}

.shop-pack-card .shop-card-name,
.shop-pack-card .shop-card-desc {
  text-align: left;
}

.shop-pack-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.shop-pack-previews {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
}

.shop-pack-mini {
  width: 34px;
  height: 34px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  opacity: 0.58;
  margin-bottom: 18px;
}

.shop-pack-mini.owned {
  opacity: 1;
}

.shop-pack-mini .avatar {
  width: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  font-weight: 800;
}

.shop-pack-mini .avatar-deco {
  inset: -4px;
}

.shop-pack-owned {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.pack-open-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

.pack-open-row input {
  width: 100%;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-bright);
  background: var(--bg-void);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

.pack-results-modal {
  max-width: 760px;
}

.pack-results-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  margin-bottom: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.pack-results-summary span {
  color: var(--text-secondary);
  font-size: 12px;
}

.pack-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  max-height: 52vh;
  overflow: auto;
}

.pack-result-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pack-result-preview {
  width: 72px;
  height: 72px;
  margin: 0 auto 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  contain: layout;
}
.pack-result-preview .avatar {
  width: 56px !important;
  height: 56px !important;
  font-size: 20px !important;
  flex-shrink: 0;
}
.pack-result-preview .premium-deco {
  inset: 1px;
}
.pack-result-preview .storm-canvas {
  inset: 0;
}

.pack-result-card b {
  font-size: 12px;
}

.pack-result-card small {
  color: var(--yellow);
  font-weight: 900;
}

.shop-pack-odds {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== ADMIN PANEL ===== */
.admin-modal-full {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
}
.admin-modal-full .modal-header { flex: 0 0 auto; padding: 18px 28px; }
.admin-tabs-wrap {
  display: flex;
  gap: 4px;
  padding: 10px 24px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex: 0 0 auto;
}
.admin-content-wrap {
  flex: 1;
  overflow-y: auto;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 26px 34px 52px;
}
.admin-tab {
  flex: 0 0 auto; padding: 12px 15px;
  background: none; border: none;
  color: var(--text-muted); font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: var(--transition);
  border-bottom: 2px solid transparent;
}
.admin-tab:hover { color: var(--text-primary); background: var(--bg-hover); }
.admin-tab.active { color: var(--red); border-bottom-color: var(--red); }

.admin-pane { display: none; }
.admin-pane.active { display: block; }

@media (max-width: 640px) {
  .admin-tabs-wrap { overflow-x:auto; padding-left:12px; padding-right:12px; }
  .admin-content-wrap { padding:18px 14px 40px; }
  .admin-modal-full .modal-header { padding:15px 16px; }
}

.admin-server-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: var(--radius-sm);
  transition: var(--transition);
}
.admin-server-row:hover { background: var(--bg-hover); }

.nexus-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 8, 18, 0.88);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nexus-lock-card {
  width: min(560px, 100%);
  border: 1px solid rgba(255, 92, 92, 0.45);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20,24,42,0.96), rgba(10,12,22,0.96));
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  padding: 22px 20px;
}

.nexus-lock-card h2 {
  margin: 0;
  font-size: 22px;
  color: #ff8f8f;
}

.nexus-lock-card p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-primary);
}

.nexus-lock-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

.nexus-lock-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.nexus-quick-popup {
  position: fixed;
  inset: 0;
  z-index: 1180;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nexus-quick-popup-card {
  max-width: min(86vw, 560px);
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(16, 22, 38, 0.95);
  border: 1px solid rgba(111, 220, 255, 0.38);
  color: #d9ecff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
}

.admin-qr-scan-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #05080f;
  border: 1px solid var(--border);
}

#admin-qr-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-qr-scan-frame {
  position: absolute;
  width: min(55vw, 220px);
  height: min(55vw, 220px);
  max-width: 65%;
  max-height: 65%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(111, 220, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.28), 0 0 24px rgba(111, 220, 255, 0.32);
  pointer-events: none;
}
.admin-server-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  flex-shrink: 0; overflow: hidden;
}
.admin-server-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.admin-server-info { flex: 1; min-width: 0; }
.admin-server-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-server-meta { font-size: 11px; color: var(--text-muted); }
.admin-server-actions { display: flex; gap: 6px; }

.admin-history-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.admin-history-row:last-child { border-bottom: none; }
.admin-history-user { font-weight: 700; color: var(--text-primary); }
.admin-history-meta { color: var(--text-muted); margin-top: 2px; }
.susp-active { color: var(--red); font-weight: 700; }
.susp-expired { color: var(--text-muted); }

.admin-audit-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: var(--bg-surface);
}
.admin-audit-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
}
.admin-audit-icon::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid var(--accent);
  border-radius: 3px;
}
.admin-audit-card.audit-moderation,
.admin-audit-card.audit-privacy { border-left-color: var(--red); }
.admin-audit-card.audit-moderation .admin-audit-icon,
.admin-audit-card.audit-privacy .admin-audit-icon { background: rgba(240, 84, 84, .14); }
.admin-audit-card.audit-moderation .admin-audit-icon::before,
.admin-audit-card.audit-privacy .admin-audit-icon::before { border-color: var(--red); }
.admin-audit-card.audit-economy { border-left-color: var(--yellow); }
.admin-audit-card.audit-economy .admin-audit-icon { background: rgba(255, 211, 77, .12); }
.admin-audit-card.audit-economy .admin-audit-icon::before { border-color: var(--yellow); border-radius: 50%; }
.admin-audit-card.audit-policy,
.admin-audit-card.audit-security { border-left-color: #b86cff; }
.admin-audit-card.audit-policy .admin-audit-icon,
.admin-audit-card.audit-security .admin-audit-icon { background: rgba(184, 108, 255, .13); }
.admin-audit-card.audit-policy .admin-audit-icon::before,
.admin-audit-card.audit-security .admin-audit-icon::before { border-color: #cf9aff; transform: rotate(45deg); }
.admin-audit-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.admin-audit-heading strong {
  color: var(--text-primary);
  font-size: 13px;
}
.admin-audit-heading time {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 10px;
}
.admin-audit-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 11px;
}
.admin-audit-summary b {
  color: var(--text-primary);
}
.admin-audit-target {
  padding: 3px 6px;
  border: 1px solid var(--border-bright);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.admin-audit-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.admin-audit-details span {
  display: inline-flex;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
}
.admin-audit-details b {
  color: var(--text-primary);
  font-weight: 700;
}
@media (max-width: 600px) {
  .admin-audit-card { grid-template-columns: 1fr; }
  .admin-audit-icon { display: none; }
  .admin-audit-heading { flex-direction: column; gap: 4px; }
}

.admin-report-current {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  padding: 14px;
}

.admin-report-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.admin-report-meta {
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-muted);
}

.admin-report-message {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.nexus-report-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 10px, transparent 10px 22px),
    rgba(2, 4, 10, 0.92);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.nexus-report-card {
  --report-a: #ff4545;
  --report-b: #ffd166;
  width: min(620px, 100%);
  border: 1px solid color-mix(in srgb, var(--report-a) 65%, transparent);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(24,28,44,0.98), rgba(8,10,18,0.98));
  box-shadow: 0 28px 80px rgba(0,0,0,0.58), 0 0 44px color-mix(in srgb, var(--report-a) 28%, transparent);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.nexus-report-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--report-a) 28%, transparent), transparent 34%),
              radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--report-b) 20%, transparent), transparent 28%);
  pointer-events: none;
}

.nexus-report-card.maintenance { --report-a: #f6c343; --report-b: #62e6ff; }
.nexus-report-card.ets { --report-a: #ff4242; --report-b: #ffffff; }
.nexus-report-card.custom { --report-a: #7c8cff; --report-b: #e040fb; }

.nexus-report-siren {
  position: relative;
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  z-index: 1;
}

.nexus-report-siren span {
  height: 8px;
  flex: 1;
  border-radius: 999px;
  background: var(--report-a);
  box-shadow: 0 0 22px var(--report-a);
  animation: nexus-report-flash 0.62s steps(2, end) infinite;
}

.nexus-report-siren span:nth-child(2) {
  background: var(--report-b);
  box-shadow: 0 0 22px var(--report-b);
  animation-delay: 0.18s;
}

.nexus-report-siren span:nth-child(3) { animation-delay: 0.34s; }

.nexus-report-kicker {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--report-b);
}

.nexus-report-card h2 {
  position: relative;
  z-index: 1;
  margin: 8px 0 0;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.05;
}

.nexus-report-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 20px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.nexus-report-card button {
  position: relative;
  z-index: 1;
}

@keyframes nexus-report-flash {
  0%, 44% { opacity: 1; transform: scaleY(1); }
  45%, 100% { opacity: 0.26; transform: scaleY(0.7); }
}

/* ===== SUSPENSION SCREEN ===== */
#suspension-screen {
  justify-content: center;
  align-items: center;
  background: #0a0608 !important;
}
#suspension-content {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  max-width: 480px;
  padding: 40px 32px;
  background: var(--bg-surface);
  border: 1px solid rgba(240,84,84,0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 60px rgba(240,84,84,0.1);
  animation: fade-in-up 0.5s ease;
}
@keyframes fade-in-up {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
#suspension-icon { font-size: 52px; margin-bottom: 16px; filter: grayscale(0.3); }
#suspension-title { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
#suspension-until {
  font-size: 15px; font-weight: 700;
  color: var(--red);
  background: rgba(240,84,84,0.1);
  border: 1px solid rgba(240,84,84,0.25);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  margin-bottom: 16px;
}
#suspension-reason-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  width: 100%;
  margin-bottom: 16px;
  text-align: left;
}
#suspension-reason-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 4px;
}
#suspension-reason-text { font-size: 13px; color: var(--text-secondary); }
#suspension-footer { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ===== NEW DECORATIONS BATCH ===== */

/* -- TEAL PULSE (common) -- */
.avatar-deco.deco-pulse_teal {
  box-shadow: 0 0 0 2px rgba(0,210,200,0.85), 0 0 12px 4px rgba(0,210,200,0.4);
  animation: pulse-teal 2.2s ease-in-out infinite;
}
@keyframes pulse-teal {
  0%,100% { box-shadow: 0 0 0 2px rgba(0,210,200,0.8), 0 0 10px 3px rgba(0,210,200,0.35); }
  50%     { box-shadow: 0 0 0 2px rgba(0,210,200,1),   0 0 20px 8px rgba(0,210,200,0.6); }
}

/* -- RED SPARK (common) -- */
.avatar-deco.deco-spark_red {
  border: 2px solid rgba(255,60,60,0.9);
  box-shadow: 0 0 8px rgba(255,60,60,0.6);
  animation: spark-red-flicker 0.12s ease-in-out infinite alternate;
}
@keyframes spark-red-flicker {
  from { box-shadow: 0 0 6px 2px rgba(255,60,60,0.5), 0 0 0 2px rgba(255,60,60,0.9); }
  to   { box-shadow: 0 0 12px 5px rgba(255,120,40,0.7), 0 0 0 2px rgba(255,100,60,1); }
}

/* -- PURPLE HAZE (common) -- */
.avatar-deco.deco-haze_purple {
  border: 2px solid rgba(160,80,255,0.6);
  box-shadow: 0 0 14px 6px rgba(140,60,240,0.35), 0 0 28px 10px rgba(120,40,220,0.15);
  animation: haze-drift 4s ease-in-out infinite;
  filter: blur(0.3px);
}
@keyframes haze-drift {
  0%,100% { box-shadow: 0 0 14px 6px rgba(140,60,240,0.35), 0 0 28px 10px rgba(120,40,220,0.15); border-color: rgba(160,80,255,0.6); }
  33%     { box-shadow: 0 0 20px 9px rgba(180,80,255,0.45), 0 0 36px 14px rgba(140,60,240,0.2); border-color: rgba(200,100,255,0.8); }
  66%     { box-shadow: 0 0 10px 4px rgba(100,40,200,0.3),  0 0 22px 8px rgba(100,40,200,0.12); border-color: rgba(120,60,220,0.5); }
}

/* -- AURORA (rare) -- */
.avatar-deco.deco-aurora {
  background: conic-gradient(
    #00ffd5, #00aaff, #aa00ff, #ff00aa, #ff5500, #00ffd5
  );
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 68%, black 69%);
          mask: radial-gradient(circle, transparent 68%, black 69%);
  animation: deco-spin 6s linear infinite;
  filter: blur(0.5px) brightness(1.2);
}

/* -- CIRCUIT (rare) -- */
.avatar-deco.deco-circuit {
  border: 2px solid rgba(0,255,180,0.8);
  box-shadow: 0 0 6px rgba(0,255,180,0.5);
}
.avatar-deco.deco-circuit::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(0,255,180,0.3);
  animation: deco-spin 3s linear infinite;
}
.avatar-deco.deco-circuit::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(0,255,180,0.9);
  border-right-color: rgba(0,200,150,0.5);
  animation: deco-spin 1.5s linear infinite reverse;
  box-shadow: 0 0 8px rgba(0,255,180,0.6);
}

/* -- DIAMOND (legendary) -- */
.avatar-deco.deco-diamond {
  background: conic-gradient(
    #b9f2ff, #e0f8ff, #ffffff, #a8edff, #c8f4ff, #ffffff, #b0efff, #b9f2ff
  );
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 68%, black 69%);
          mask: radial-gradient(circle, transparent 68%, black 69%);
  animation: deco-spin 8s linear infinite;
}
.deco-diamond-shine {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  border-radius: 50%;
}
.deco-diamond-shine::after {
  content: '';
  position: absolute;
  top: -100%; left: -60%;
  width: 40%; height: 300%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%);
  animation: diamond-sweep 5s ease-in-out infinite;
}
@keyframes diamond-sweep {
  0%,70%   { left: -60%; opacity: 0; }
  72%      { opacity: 1; }
  85%      { left: 160%; opacity: 1; }
  87%,100% { left: 160%; opacity: 0; }
}

/* -- GOLD SHINE (legendary) -- */
.avatar-deco.deco-goldshine {
  background: conic-gradient(
    #b8860b, #ffd700, #ffec6e, #ffd700, #daa520, #ffe066, #b8860b
  );
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 68%, black 69%);
          mask: radial-gradient(circle, transparent 68%, black 69%);
  animation: deco-spin 6s linear infinite;
}
.deco-goldshine-shine {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}
.deco-goldshine-shine::after {
  content: '';
  position: absolute;
  top: -100%; left: -60%;
  width: 35%; height: 300%;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,120,0.85) 50%, transparent 65%);
  animation: gold-sweep 5s ease-in-out infinite;
}
@keyframes gold-sweep {
  0%,60%   { left: -60%; opacity: 0; }
  62%      { opacity: 1; }
  78%      { left: 160%; opacity: 1; }
  80%,100% { left: 160%; opacity: 0; }
}

/* -- HYDRO (mythical) -- */
.avatar-deco.deco-hydro {
  background: conic-gradient(
    #006994, #0099cc, #00ccff, #33ddff, #0099cc, #007ab8, #006994
  );
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 67%, black 68%);
          mask: radial-gradient(circle, transparent 67%, black 68%);
  animation: deco-spin 4s linear infinite, hydro-wave 2s ease-in-out infinite;
}
@keyframes hydro-wave {
  0%,100% { filter: blur(0px) brightness(1); }
  50%     { filter: blur(0.6px) brightness(1.3); }
}
.deco-hydro::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,180,255,0.3);
  animation: deco-spin 2s linear infinite reverse;
}
.deco-hydro::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(0,220,255,0.2);
  animation: deco-spin 3s linear infinite;
}

/* -- INFERNO (mythical canvas) -- */
.avatar-deco.deco-inferno,
.avatar-deco.deco-yinyang {
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* -- AETHER MIST (mythical) -- */
.avatar-deco.deco-aether_mist {
  inset: -4px;
  border-radius: 50%;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 52%, transparent 66%, rgba(116, 78, 255, 0.13) 71%, rgba(68, 214, 255, 0.1) 76%, transparent 84%);
  box-shadow:
    0 0 10px rgba(92, 214, 255, 0.34),
    0 0 20px rgba(168, 92, 255, 0.26),
    inset 0 0 8px rgba(126, 176, 255, 0.15);
  animation: aether-breath 4.2s ease-in-out infinite;
}

.avatar-deco.deco-aether_mist::before,
.avatar-deco.deco-aether_mist::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-deco.deco-aether_mist::before {
  background:
    conic-gradient(
      from 0deg,
      rgba(62, 228, 255, 0.85),
      rgba(90, 168, 255, 0.62),
      rgba(190, 92, 255, 0.88),
      rgba(114, 68, 255, 0.7),
      rgba(84, 246, 255, 0.85)
    ),
    radial-gradient(circle at 28% 30%, rgba(224, 246, 255, 0.44), transparent 48%),
    radial-gradient(circle at 72% 68%, rgba(196, 150, 255, 0.34), transparent 50%);
        -webkit-mask: radial-gradient(circle, transparent 64%, #000 69%, #000 79%, transparent 88%);
          mask: radial-gradient(circle, transparent 64%, #000 69%, #000 79%, transparent 88%);
    filter: blur(0.3px) saturate(1.17);
  animation: aether-rotate 6.2s linear infinite;
}

.avatar-deco.deco-aether_mist::after {
  background-image:
    conic-gradient(
      from 18deg,
      transparent 0deg,
      rgba(132, 246, 255, 0.7) 40deg,
      rgba(138, 214, 255, 0.34) 64deg,
      transparent 92deg,
      transparent 126deg,
      rgba(206, 132, 255, 0.68) 160deg,
      rgba(186, 116, 255, 0.3) 182deg,
      transparent 216deg,
      transparent 250deg,
      rgba(120, 236, 255, 0.66) 286deg,
      rgba(112, 186, 255, 0.28) 308deg,
      transparent 342deg,
      transparent 360deg
    ),
    radial-gradient(140% 80% at 26% 16%, rgba(150, 244, 255, 0.54) 0%, rgba(118, 202, 255, 0.26) 34%, transparent 62%),
    radial-gradient(130% 76% at 76% 26%, rgba(208, 136, 255, 0.48) 0%, rgba(160, 104, 255, 0.22) 36%, transparent 64%),
    radial-gradient(132% 82% at 20% 74%, rgba(132, 236, 255, 0.4) 0%, rgba(106, 184, 255, 0.18) 34%, transparent 66%),
    radial-gradient(136% 84% at 82% 76%, rgba(206, 130, 255, 0.38) 0%, rgba(152, 102, 255, 0.16) 34%, transparent 68%),
    radial-gradient(132% 74% at 20% 48%, transparent 60%, rgba(118, 238, 255, 0.44) 66%, rgba(108, 190, 255, 0.18) 72%, transparent 78%),
    radial-gradient(126% 72% at 78% 54%, transparent 58%, rgba(208, 130, 255, 0.4) 64%, rgba(170, 106, 255, 0.17) 71%, transparent 78%);
    -webkit-mask: radial-gradient(circle, transparent 61%, #000 67%, #000 80%, transparent 89%);
      mask: radial-gradient(circle, transparent 61%, #000 67%, #000 80%, transparent 89%);
  filter: blur(1px) saturate(1.1) drop-shadow(0 0 9px rgba(164, 228, 255, 0.36));
  animation: aether-spark 6.4s ease-in-out infinite;
}

@keyframes aether-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes aether-breath {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(92, 214, 255, 0.3),
      0 0 20px rgba(168, 92, 255, 0.22),
      inset 0 0 8px rgba(126, 176, 255, 0.13);
  }
  50% {
    box-shadow:
      0 0 16px rgba(102, 232, 255, 0.46),
      0 0 28px rgba(182, 104, 255, 0.34),
      inset 0 0 10px rgba(156, 196, 255, 0.2);
  }
}

@keyframes aether-spark {
  0%, 100% {
    opacity: 0.78;
    transform: rotate(0deg) scale(1);
    filter: blur(1px) saturate(1.08) drop-shadow(0 0 8px rgba(164, 228, 255, 0.34));
  }
  40% {
    opacity: 1;
    transform: rotate(9deg) scale(1.05);
    filter: blur(1.1px) saturate(1.14) drop-shadow(0 0 13px rgba(174, 236, 255, 0.48));
  }
  70% {
    opacity: 0.9;
    transform: rotate(-6deg) scale(1.01);
    filter: blur(1px) saturate(1.1) drop-shadow(0 0 10px rgba(176, 190, 255, 0.4));
  }
}

/* -- MAGMA (mythical) -- */
.avatar-deco.deco-magma {
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(210, 70, 6, 0.44);
  box-shadow:
    0 0 7px rgba(232, 74, 8, 0.35),
    0 0 15px rgba(204, 40, 0, 0.2),
    inset 0 7px 12px rgba(255, 145, 44, 0.12),
    inset 0 -6px 13px rgba(52, 6, 0, 0.62);
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 176, 76, 0.22) 0 12%, transparent 30%),
    radial-gradient(circle at 50% 50%, transparent 63%, rgba(226, 70, 0, 0.17) 68%, rgba(186, 34, 0, 0.11) 73%, transparent 79%);
  animation: magma-ring-pulse 2.6s ease-in-out infinite;
  overflow: visible;
}

.avatar-deco.deco-magma::before,
.avatar-deco.deco-magma::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
}

.avatar-deco.deco-magma::before {
  background: conic-gradient(
    from 28deg,
    #240400 0deg,
    #320600 32deg,
    #4d0d00 52deg,
    #d44600 74deg,
    #ffad4e 84deg,
    #e55b00 96deg,
    #460d00 126deg,
    #2e0600 165deg,
    #451000 212deg,
    #c83f00 244deg,
    #f89f42 258deg,
    #d84f00 273deg,
    #4a0d00 308deg,
    #260400 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 63%, #000 77%, transparent 81%);
          mask: radial-gradient(circle, transparent 59%, #000 63%, #000 77%, transparent 81%);
  filter: saturate(1.22) contrast(1.06) blur(0.2px);
  animation: magma-flow 12s linear infinite, magma-ring-pulse 2.6s ease-in-out infinite;
}

.avatar-deco.deco-magma::after {
  background-image:
    linear-gradient(180deg, rgba(255,198,112,0.92) 0%, rgba(240,92,0,0.88) 56%, rgba(198,34,0,0.62) 80%, rgba(150,14,0,0) 100%),
    radial-gradient(ellipse at 50% 64%, rgba(255,214,132,0.94) 0 38%, rgba(242,94,0,0.9) 56%, rgba(194,30,0,0.64) 74%, transparent 86%),
    radial-gradient(ellipse at 32% 58%, rgba(252,170,86,0.72) 0 34%, rgba(208,48,0,0.46) 54%, transparent 78%),
    radial-gradient(ellipse at 70% 60%, rgba(248,156,76,0.68) 0 34%, rgba(198,40,0,0.42) 54%, transparent 78%),
    linear-gradient(180deg, rgba(250,178,92,0.88) 0%, rgba(228,74,0,0.82) 68%, rgba(184,28,0,0) 100%),
    radial-gradient(ellipse at 50% 72%, rgba(246,182,98,0.86) 0 38%, rgba(224,68,0,0.8) 56%, rgba(180,26,0,0.58) 74%, transparent 84%),
    linear-gradient(180deg, rgba(244,164,80,0.84) 0%, rgba(220,64,0,0.78) 66%, rgba(176,22,0,0) 100%),
    radial-gradient(ellipse at 50% 70%, rgba(238,166,80,0.82) 0 38%, rgba(214,58,0,0.76) 56%, rgba(172,22,0,0.54) 74%, transparent 84%),
    linear-gradient(180deg, rgba(242,160,76,0.82) 0%, rgba(214,60,0,0.76) 66%, rgba(170,22,0,0) 100%),
    radial-gradient(ellipse at 50% 70%, rgba(236,160,76,0.8) 0 38%, rgba(208,56,0,0.74) 56%, rgba(166,20,0,0.52) 74%, transparent 84%),
    linear-gradient(116deg, transparent 0%, rgba(255,174,92,0.56) 38%, rgba(216,64,0,0.38) 60%, transparent 84%),
    linear-gradient(64deg, transparent 0%, rgba(252,166,86,0.54) 36%, rgba(206,58,0,0.36) 58%, transparent 82%);
  background-repeat: no-repeat;
  background-size: 8px 24px, 20px 20px, 8px 10px, 9px 9px, 5px 13px, 12px 12px, 4px 11px, 10px 10px, 4px 10px, 9px 9px, 12px 4px, 10px 4px;
  background-position: 50% -22%, 50% -10%, 45% -7%, 57% -8%, 24% -16%, 24% -9%, 74% -17%, 74% -10%, 86% -18%, 86% -11%, 8% -12%, 91% -13%;
  filter: blur(0.08px) drop-shadow(0 0 2px rgba(242, 138, 58, 0.22)) drop-shadow(0 0 5px rgba(220, 52, 0, 0.14));
  animation: magma-drops-fall 7.9s cubic-bezier(0.24, 0.05, 0.22, 1) infinite;
}

@keyframes magma-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 5px rgba(224, 74, 8, 0.3),
      0 0 12px rgba(200, 38, 0, 0.18),
      inset 0 6px 10px rgba(238, 144, 54, 0.09),
      inset 0 -6px 13px rgba(56, 6, 0, 0.62);
    border-color: rgba(198, 64, 8, 0.36);
  }
  50% {
    box-shadow:
      0 0 9px rgba(234, 98, 10, 0.5),
      0 0 20px rgba(222, 44, 0, 0.28),
      inset 0 8px 13px rgba(248, 178, 76, 0.15),
      inset 0 -6px 14px rgba(62, 7, 0, 0.64);
    border-color: rgba(220, 88, 18, 0.54);
  }
}

@keyframes magma-flow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes magma-drops-fall {
  0% {
    opacity: 0;
    background-position: 50% -22%, 50% -10%, 45% -7%, 57% -8%, 24% -16%, 24% -9%, 74% -17%, 74% -10%, 86% -18%, 86% -11%, 8% -12%, 91% -13%;
    background-size: 8px 24px, 20px 20px, 8px 10px, 9px 9px, 5px 13px, 12px 12px, 4px 11px, 10px 10px, 4px 10px, 9px 9px, 12px 4px, 10px 4px;
  }
  10% {
    opacity: 1;
    background-position: 50% -18%, 50% -6%, 45% -4%, 57% -5%, 24% -11%, 24% -4%, 74% -12%, 74% -5%, 86% -13%, 86% -6%, 9% -8%, 90% -9%;
  }
  22% {
    opacity: 0.98;
    background-position: 50% -14%, 50% -2%, 45% -1%, 57% -1%, 24% -7%, 24% 0%, 74% -8%, 74% -1%, 86% -8%, 86% -1%, 10% -6%, 89% -7%;
    background-size: 9px 30px, 22px 21px, 8px 11px, 9px 10px, 6px 16px, 13px 13px, 5px 13px, 11px 11px, 5px 12px, 10px 10px, 14px 4px, 12px 4px;
  }
  36% {
    opacity: 0.98;
    background-position: 50% -11%, 50% 1%, 45% 1%, 57% 1%, 24% -4%, 24% 3%, 74% -5%, 74% 2%, 86% -5%, 86% 2%, 10% -5%, 89% -6%;
    background-size: 10px 34px, 23px 22px, 9px 12px, 10px 11px, 6px 19px, 13px 13px, 5px 16px, 12px 11px, 5px 14px, 11px 10px, 14px 4px, 12px 4px;
  }
  50% {
    opacity: 0.92;
    background-position: 50% 8%, 50% 19%, 45% 16%, 57% 16%, 24% 14%, 24% 22%, 74% 18%, 74% 26%, 86% 21%, 86% 28%, 11% 2%, 88% 1%;
    background-size: 8px 24px, 22px 18px, 7px 9px, 8px 8px, 5px 13px, 12px 12px, 4px 11px, 10px 10px, 4px 10px, 9px 9px, 8px 2px, 7px 2px;
  }
  70% {
    opacity: 0.78;
    background-position: 50% 43%, 50% 55%, 45% 50%, 57% 51%, 24% 44%, 24% 52%, 74% 50%, 74% 58%, 86% 54%, 86% 61%, 12% 28%, 87% 27%;
  }
  86% {
    opacity: 0.58;
    background-position: 50% 78%, 50% 90%, 45% 84%, 57% 85%, 24% 80%, 24% 88%, 74% 84%, 74% 92%, 86% 88%, 86% 95%, 12% 54%, 87% 53%;
  }
  94% {
    opacity: 0.4;
    background-position: 50% 95%, 50% 104%, 45% 98%, 57% 99%, 24% 97%, 24% 103%, 74% 99%, 74% 105%, 86% 101%, 86% 107%, 12% 82%, 87% 81%;
    background-size: 14px 9px, 26px 10px, 9px 5px, 10px 5px, 8px 5px, 14px 6px, 7px 4px, 12px 5px, 7px 4px, 11px 5px, 2px 1px, 2px 1px;
    filter: drop-shadow(0 0 1px rgba(242, 138, 58, 0.16));
  }
  100% {
    opacity: 0;
    background-position: 50% 108%, 50% 113%, 45% 109%, 57% 110%, 24% 108%, 24% 111%, 74% 110%, 74% 114%, 86% 112%, 86% 115%, 12% 96%, 87% 95%;
    background-size: 16px 5px, 28px 6px, 10px 4px, 11px 4px, 9px 4px, 15px 5px, 8px 3px, 13px 4px, 8px 3px, 12px 4px, 0 0, 0 0;
    filter: drop-shadow(0 0 0 rgba(242, 138, 58, 0));
  }
}

/* ===== PACK DECORATIONS ===== */
.avatar-deco.deco-ember_trace {
  border: 2px solid rgba(255,116,48,0.9);
  box-shadow: 0 0 8px rgba(255,96,36,0.55), 0 0 18px rgba(255,160,64,0.28);
  animation: pack-warm-pulse 2.4s ease-in-out infinite;
}
.avatar-deco.deco-mint_signal {
  border: 2px solid rgba(105,255,188,0.9);
  box-shadow: 0 0 9px rgba(92,255,196,0.5);
  animation: pack-signal-ping 2.2s ease-out infinite;
}
.avatar-deco.deco-pixel_pop {
  border: 2px dotted rgba(118,190,255,0.95);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05), 0 0 11px rgba(118,190,255,0.45);
  animation: pack-step-spin 2s steps(8) infinite;
}
.avatar-deco.deco-soft_static {
  border: 1px dashed rgba(214,222,235,0.72);
  box-shadow: 0 0 8px rgba(230,238,255,0.24), inset 0 0 8px rgba(255,255,255,0.08);
  animation: pack-static 0.7s steps(2) infinite;
}
.avatar-deco.deco-lime_loop {
  border: 2px solid rgba(185,255,76,0.9);
  border-left-color: transparent;
  box-shadow: 0 0 10px rgba(185,255,76,0.45);
  animation: deco-spin 1.6s linear infinite;
}
.avatar-deco.deco-neon_grid,
.avatar-deco.deco-ruby_circuit {
  border: 2px solid rgba(90,245,255,0.88);
  background:
    linear-gradient(90deg, transparent 46%, rgba(90,245,255,0.28) 48% 52%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(90,245,255,0.22) 48% 52%, transparent 54%);
  box-shadow: 0 0 12px rgba(90,245,255,0.45);
  animation: pack-scan 3s linear infinite;
}
.avatar-deco.deco-ruby_circuit {
  border-color: rgba(255,62,102,0.95);
  background:
    linear-gradient(90deg, transparent 45%, rgba(255,62,102,0.28) 48% 52%, transparent 55%),
    linear-gradient(0deg, transparent 45%, rgba(255,62,102,0.22) 48% 52%, transparent 55%);
  box-shadow: 0 0 14px rgba(255,62,102,0.5);
}
.avatar-deco.deco-violet_comet {
  border: 2px solid rgba(184,104,255,0.45);
  border-top-color: rgba(238,214,255,1);
  border-right-color: rgba(184,104,255,0.95);
  box-shadow: 0 0 13px rgba(184,104,255,0.52);
  animation: deco-spin 1.2s linear infinite;
}
.avatar-deco.deco-signal_wave {
  border: 2px solid rgba(74,174,255,0.9);
  box-shadow: 0 0 0 5px rgba(74,174,255,0.1), 0 0 0 10px rgba(74,174,255,0.06);
  animation: pack-signal-ping 2s ease-out infinite;
}
.avatar-deco.deco-chrome_edge {
  background: conic-gradient(#f7fbff, #7d8fa5, #e8f3ff, #657384, #ffffff, #7d8fa5, #f7fbff);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 69%);
          mask: radial-gradient(circle, transparent 68%, #000 69%);
  animation: deco-spin 5s linear infinite;
}
.avatar-deco.deco-solar_flare {
  border: 2px solid rgba(255,208,76,0.95);
  box-shadow: 0 0 13px rgba(255,194,48,0.55), 0 0 28px rgba(255,104,40,0.24);
  animation: pack-warm-pulse 1.8s ease-in-out infinite;
}
.avatar-deco.deco-void_pulse {
  border: 2px solid rgba(116,82,198,0.82);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.72), 0 0 18px rgba(116,82,198,0.45);
  animation: pack-void 2.8s ease-in-out infinite;
}
.avatar-deco.deco-plasma_arc {
  border: 2px solid transparent;
  border-top-color: rgba(72,232,255,1);
  border-bottom-color: rgba(255,92,210,0.9);
  box-shadow: 0 0 16px rgba(110,204,255,0.42);
  animation: deco-spin 0.9s linear infinite;
}
.avatar-deco.deco-crystal_bloom {
  border: 2px solid rgba(174,238,255,0.86);
  box-shadow: 0 0 14px rgba(174,238,255,0.48);
}
.avatar-deco.deco-crystal_bloom::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 28%;
  border: 1px solid rgba(214,250,255,0.58);
  transform: rotate(45deg);
  animation: pack-bloom 3.4s ease-in-out infinite;
}
.avatar-deco.deco-toxic_slime {
  border: 2px solid rgba(112,255,34,0.92);
  box-shadow: 0 0 15px rgba(112,255,34,0.44), inset 0 -8px 10px rgba(60,180,20,0.22);
  animation: pack-slime 2.6s ease-in-out infinite;
}
.avatar-deco.deco-nebula_dust {
  background: conic-gradient(rgba(112,92,255,0.1), rgba(255,92,218,0.8), rgba(94,224,255,0.65), rgba(112,92,255,0.1));
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 70%, transparent 84%);
          mask: radial-gradient(circle, transparent 65%, #000 70%, transparent 84%);
  filter: blur(0.7px);
  animation: deco-spin 7s linear infinite;
}
.avatar-deco.deco-ion_crown,
.avatar-deco.deco-cosmic_crown {
  border: 2px solid rgba(90,236,255,0.9);
  box-shadow: 0 0 15px rgba(90,236,255,0.48);
}
.avatar-deco.deco-ion_crown::before,
.avatar-deco.deco-cosmic_crown::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -12px;
  height: 12px;
  background: linear-gradient(135deg, transparent 0 16%, currentColor 17% 28%, transparent 29% 42%, currentColor 43% 57%, transparent 58% 71%, currentColor 72% 83%, transparent 84%);
  color: rgba(90,236,255,0.9);
  filter: drop-shadow(0 0 5px currentColor);
  animation: pack-crown 2.6s ease-in-out infinite;
}
.avatar-deco.deco-starforge {
  background: conic-gradient(#2a2f38, #ffcc58, #fff0a6, #6b7480, #ff9c28, #2a2f38);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 68%);
          mask: radial-gradient(circle, transparent 66%, #000 68%);
  animation: deco-spin 4.6s linear infinite;
}
.avatar-deco.deco-quantum_ring {
  border: 2px solid rgba(108,255,228,0.9);
  border-left-color: transparent;
  border-right-color: rgba(196,122,255,0.95);
  box-shadow: 0 0 14px rgba(108,255,228,0.34), 0 0 20px rgba(196,122,255,0.22);
  animation: pack-quantum 1.8s steps(4) infinite;
}
.avatar-deco.deco-midnight_sun {
  border: 2px solid rgba(255,185,62,0.95);
  box-shadow: inset 0 0 0 9px rgba(0,0,0,0.28), 0 0 22px rgba(255,158,36,0.4);
  animation: pack-warm-pulse 2.7s ease-in-out infinite;
}
.avatar-deco.deco-dragon_core {
  border: 2px solid rgba(255,76,36,0.95);
  box-shadow: 0 0 18px rgba(255,76,36,0.58), inset 0 0 12px rgba(255,180,70,0.22);
  animation: pack-dragon 2.1s ease-in-out infinite;
}
.avatar-deco.deco-phantom_blade {
  border: 2px solid rgba(196,226,255,0.42);
  border-top-color: rgba(236,248,255,0.95);
  border-bottom-color: rgba(148,168,255,0.82);
  box-shadow: 0 0 18px rgba(186,212,255,0.42);
  animation: deco-spin 1.05s linear infinite;
}
.avatar-deco.deco-time_rift {
  border: 2px dashed rgba(118,255,224,0.9);
  box-shadow: 0 0 15px rgba(118,255,224,0.38);
  animation: pack-step-spin 3s steps(12) infinite;
}
.avatar-deco.deco-zero_gravity {
  border: 1px solid rgba(200,220,255,0.48);
  box-shadow: 0 -9px 0 -5px rgba(148,214,255,0.9), 9px 3px 0 -5px rgba(216,148,255,0.9), -8px 6px 0 -5px rgba(255,230,120,0.9), 0 0 15px rgba(148,214,255,0.28);
  animation: pack-float-spin 5s ease-in-out infinite;
}
.avatar-deco.deco-singularity {
  border: 2px solid rgba(132,92,255,0.8);
  box-shadow: inset 0 0 16px rgba(0,0,0,0.92), 0 0 24px rgba(132,92,255,0.55);
  animation: pack-singularity 2.4s ease-in-out infinite;
}
.avatar-deco.deco-celestial_wings {
  border: 1px solid rgba(255,234,170,0.72);
  box-shadow: 0 0 18px rgba(255,220,130,0.42);
}
.avatar-deco.deco-celestial_wings::before {
  content: '';
  position: absolute;
  inset: 7px -15px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 10% 50%, rgba(255,238,188,0.86), transparent 48%), radial-gradient(ellipse at 90% 50%, rgba(255,238,188,0.86), transparent 48%);
  z-index: -1;
  animation: pack-wings 3s ease-in-out infinite;
}
.avatar-deco.deco-apex_storm {
  border: 2px solid rgba(118,220,255,0.95);
  box-shadow: 0 0 18px rgba(118,220,255,0.55), 0 0 34px rgba(66,104,255,0.28);
  animation: pack-static 0.45s steps(2) infinite;
}
.avatar-deco.deco-prism_overdrive {
  background: conic-gradient(#ff4fd8, #ffdc4f, #4fff9c, #4fd8ff, #8b5cff, #ff4fd8);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 68%, transparent 83%);
          mask: radial-gradient(circle, transparent 64%, #000 68%, transparent 83%);
  animation: deco-spin 0.85s linear infinite;
  filter: saturate(1.35);
}
.avatar-deco.deco-eternal_flame {
  border: 2px solid rgba(255,116,36,0.95);
  box-shadow: 0 0 20px rgba(255,92,24,0.58), 0 -9px 16px rgba(255,188,48,0.25);
  animation: pack-warm-pulse 1.3s ease-in-out infinite;
}
.avatar-deco.deco-magic_mists {
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(166, 120, 255, 0.46);
  background:
    radial-gradient(circle at 50% 48%, rgba(18, 42, 118, 0.22) 0 52%, rgba(30, 76, 168, 0.16) 63%, transparent 75%),
    conic-gradient(from 22deg, rgba(154, 70, 255, 0.1), rgba(92, 220, 255, 0.7), rgba(72, 244, 206, 0.52), rgba(190, 68, 255, 0.82), rgba(92, 220, 255, 0.68), rgba(154, 70, 255, 0.1));
  box-shadow:
    0 0 12px rgba(116, 222, 255, 0.46),
    0 0 22px rgba(168, 74, 255, 0.42),
    inset 0 0 16px rgba(86, 190, 255, 0.18),
    inset 0 0 30px rgba(118, 64, 255, 0.18);
  overflow: visible;
  animation: magic-mists-breathe 4s ease-in-out infinite;
}
.avatar-deco.deco-magic_mists::before,
.avatar-deco.deco-magic_mists::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}
.avatar-deco.deco-magic_mists::before {
  background:
    radial-gradient(ellipse at 22% 18%, rgba(220, 148, 255, 0.75), transparent 36%),
    radial-gradient(ellipse at 82% 22%, rgba(94, 228, 255, 0.72), transparent 38%),
    radial-gradient(ellipse at 20% 82%, rgba(54, 236, 210, 0.52), transparent 36%),
    radial-gradient(ellipse at 78% 80%, rgba(178, 84, 255, 0.56), transparent 42%),
    conic-gradient(from 130deg, transparent 0 18deg, rgba(120, 232, 255, 0.75) 34deg, transparent 64deg, transparent 132deg, rgba(190, 86, 255, 0.72) 164deg, transparent 204deg, transparent 266deg, rgba(80, 245, 218, 0.62) 294deg, transparent 332deg);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 62%, #000 82%, transparent 91%);
          mask: radial-gradient(circle, transparent 55%, #000 62%, #000 82%, transparent 91%);
  filter: blur(0.8px) saturate(1.24);
  animation: magic-mists-orbit 7s linear infinite;
}
.avatar-deco.deco-magic_mists::after {
  inset: -10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200, 116, 255, 0.62), transparent 32%),
    radial-gradient(ellipse at 92% 54%, rgba(74, 224, 255, 0.5), transparent 34%),
    radial-gradient(ellipse at 8% 56%, rgba(78, 255, 216, 0.38), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(142, 74, 255, 0.52), transparent 36%);
  -webkit-mask: radial-gradient(circle, transparent 48%, #000 58%, #000 74%, transparent 86%);
          mask: radial-gradient(circle, transparent 48%, #000 58%, #000 74%, transparent 86%);
  filter: blur(2.2px) drop-shadow(0 0 10px rgba(132, 226, 255, 0.5));
  animation: magic-mists-wisp 5.8s ease-in-out infinite;
}

@keyframes pack-warm-pulse {
  0%,100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.25); }
}
@keyframes pack-signal-ping {
  0% { box-shadow: 0 0 0 0 rgba(105,255,188,0.55), 0 0 8px rgba(105,255,188,0.4); }
  100% { box-shadow: 0 0 0 12px rgba(105,255,188,0), 0 0 12px rgba(105,255,188,0.2); }
}
@keyframes pack-step-spin {
  to { transform: rotate(360deg); }
}
@keyframes pack-static {
  0%,100% { transform: translate(0,0); opacity: 0.85; }
  25% { transform: translate(1px,-1px); opacity: 1; }
  50% { transform: translate(-1px,1px); opacity: 0.72; }
  75% { transform: translate(1px,1px); opacity: 0.95; }
}
@keyframes pack-scan {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(18deg) brightness(1.25); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}
@keyframes pack-void {
  0%,100% { transform: scale(1); filter: brightness(0.9); }
  50% { transform: scale(0.92); filter: brightness(1.2); }
}
@keyframes pack-bloom {
  0%,100% { transform: rotate(45deg) scale(0.94); opacity: 0.48; }
  50% { transform: rotate(65deg) scale(1.08); opacity: 0.92; }
}
@keyframes pack-slime {
  0%,100% { border-radius: 48% 52% 50% 50%; }
  50% { border-radius: 55% 45% 58% 42%; transform: scaleY(1.06); }
}
@keyframes pack-crown {
  0%,100% { transform: translateY(0); opacity: 0.76; }
  50% { transform: translateY(-2px); opacity: 1; }
}
@keyframes pack-quantum {
  0%,100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
}
@keyframes pack-dragon {
  0%,100% { filter: hue-rotate(0deg) brightness(1); transform: scale(1); }
  50% { filter: hue-rotate(-12deg) brightness(1.35); transform: scale(1.05); }
}
@keyframes pack-float-spin {
  0%,100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-2px); }
}
@keyframes pack-singularity {
  0%,100% { transform: scale(1); filter: brightness(0.9) contrast(1.1); }
  50% { transform: scale(0.9); filter: brightness(1.25) contrast(1.35); }
}
@keyframes pack-wings {
  0%,100% { transform: scaleX(0.92); opacity: 0.64; }
  50% { transform: scaleX(1.08); opacity: 0.94; }
}
@keyframes magic-mists-breathe {
  0%,100% { transform: scale(1); filter: brightness(1) saturate(1.08); }
  50% { transform: scale(1.045); filter: brightness(1.22) saturate(1.25); }
}
@keyframes magic-mists-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes magic-mists-wisp {
  0%,100% { transform: rotate(0deg) scale(0.98); opacity: 0.68; }
  45% { transform: rotate(-18deg) scale(1.08); opacity: 0.98; }
  72% { transform: rotate(12deg) scale(1.02); opacity: 0.8; }
}

/* ===== PREMIUM PACK EFFECT RENDERER ===== */
.avatar-deco.deco-ember_trace,
.avatar-deco.deco-mint_signal,
.avatar-deco.deco-pixel_pop,
.avatar-deco.deco-soft_static,
.avatar-deco.deco-lime_loop,
.avatar-deco.deco-neon_grid,
.avatar-deco.deco-violet_comet,
.avatar-deco.deco-signal_wave,
.avatar-deco.deco-chrome_edge,
.avatar-deco.deco-solar_flare,
.avatar-deco.deco-void_pulse,
.avatar-deco.deco-plasma_arc,
.avatar-deco.deco-crystal_bloom,
.avatar-deco.deco-toxic_slime,
.avatar-deco.deco-nebula_dust,
.avatar-deco.deco-ion_crown,
.avatar-deco.deco-ruby_circuit,
.avatar-deco.deco-starforge,
.avatar-deco.deco-quantum_ring,
.avatar-deco.deco-midnight_sun,
.avatar-deco.deco-dragon_core,
.avatar-deco.deco-cosmic_crown,
.avatar-deco.deco-phantom_blade,
.avatar-deco.deco-time_rift,
.avatar-deco.deco-zero_gravity,
.avatar-deco.deco-singularity,
.avatar-deco.deco-celestial_wings,
.avatar-deco.deco-apex_storm,
.avatar-deco.deco-prism_overdrive,
.avatar-deco.deco-eternal_flame,
.avatar-deco.deco-magic_mists {
  --premium-a: rgba(120, 220, 255, 0.94);
  --premium-b: rgba(180, 88, 255, 0.9);
  --premium-c: rgba(68, 245, 205, 0.76);
  --premium-soft: rgba(120, 220, 255, 0.2);
  --premium-speed: 7s;
  --premium-breathe: 3.8s;
  inset: -7px;
  border: 0;
  border-radius: 50%;
  overflow: visible;
  background:
    conic-gradient(
      from 22deg,
      transparent 0 12deg,
      var(--premium-a) 28deg,
      transparent 58deg,
      transparent 116deg,
      var(--premium-b) 148deg,
      transparent 188deg,
      transparent 246deg,
      var(--premium-c) 282deg,
      transparent 326deg,
      transparent 360deg
    );
  box-shadow:
    0 0 10px color-mix(in srgb, var(--premium-a) 50%, transparent),
    0 0 22px color-mix(in srgb, var(--premium-b) 42%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 66%, #000 76%, transparent 85%);
          mask: radial-gradient(circle, transparent 61%, #000 66%, #000 76%, transparent 85%);
  animation: premium-ring-spin var(--premium-speed) linear infinite, premium-ring-breathe var(--premium-breathe) ease-in-out infinite;
  filter: saturate(1.18);
}

.avatar-deco.deco-ember_trace::before,
.avatar-deco.deco-mint_signal::before,
.avatar-deco.deco-pixel_pop::before,
.avatar-deco.deco-soft_static::before,
.avatar-deco.deco-lime_loop::before,
.avatar-deco.deco-neon_grid::before,
.avatar-deco.deco-violet_comet::before,
.avatar-deco.deco-signal_wave::before,
.avatar-deco.deco-chrome_edge::before,
.avatar-deco.deco-solar_flare::before,
.avatar-deco.deco-void_pulse::before,
.avatar-deco.deco-plasma_arc::before,
.avatar-deco.deco-crystal_bloom::before,
.avatar-deco.deco-toxic_slime::before,
.avatar-deco.deco-nebula_dust::before,
.avatar-deco.deco-ion_crown::before,
.avatar-deco.deco-ruby_circuit::before,
.avatar-deco.deco-starforge::before,
.avatar-deco.deco-quantum_ring::before,
.avatar-deco.deco-midnight_sun::before,
.avatar-deco.deco-dragon_core::before,
.avatar-deco.deco-cosmic_crown::before,
.avatar-deco.deco-phantom_blade::before,
.avatar-deco.deco-time_rift::before,
.avatar-deco.deco-zero_gravity::before,
.avatar-deco.deco-singularity::before,
.avatar-deco.deco-celestial_wings::before,
.avatar-deco.deco-apex_storm::before,
.avatar-deco.deco-prism_overdrive::before,
.avatar-deco.deco-eternal_flame::before,
.avatar-deco.deco-magic_mists::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 18% 18%, var(--premium-b), transparent 35%),
    radial-gradient(ellipse at 86% 24%, var(--premium-a), transparent 38%),
    radial-gradient(ellipse at 18% 84%, var(--premium-c), transparent 36%),
    radial-gradient(ellipse at 82% 78%, var(--premium-soft), transparent 42%);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 64%, #000 80%, transparent 90%);
          mask: radial-gradient(circle, transparent 57%, #000 64%, #000 80%, transparent 90%);
  filter: blur(1px) saturate(1.18);
  animation: premium-mist-drift 6.4s ease-in-out infinite;
}

.avatar-deco.deco-ember_trace::after,
.avatar-deco.deco-mint_signal::after,
.avatar-deco.deco-pixel_pop::after,
.avatar-deco.deco-soft_static::after,
.avatar-deco.deco-lime_loop::after,
.avatar-deco.deco-neon_grid::after,
.avatar-deco.deco-violet_comet::after,
.avatar-deco.deco-signal_wave::after,
.avatar-deco.deco-chrome_edge::after,
.avatar-deco.deco-solar_flare::after,
.avatar-deco.deco-void_pulse::after,
.avatar-deco.deco-plasma_arc::after,
.avatar-deco.deco-crystal_bloom::after,
.avatar-deco.deco-toxic_slime::after,
.avatar-deco.deco-nebula_dust::after,
.avatar-deco.deco-ion_crown::after,
.avatar-deco.deco-ruby_circuit::after,
.avatar-deco.deco-starforge::after,
.avatar-deco.deco-quantum_ring::after,
.avatar-deco.deco-midnight_sun::after,
.avatar-deco.deco-dragon_core::after,
.avatar-deco.deco-cosmic_crown::after,
.avatar-deco.deco-phantom_blade::after,
.avatar-deco.deco-time_rift::after,
.avatar-deco.deco-zero_gravity::after,
.avatar-deco.deco-singularity::after,
.avatar-deco.deco-celestial_wings::after,
.avatar-deco.deco-apex_storm::after,
.avatar-deco.deco-prism_overdrive::after,
.avatar-deco.deco-eternal_flame::after,
.avatar-deco.deco-magic_mists::after {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background:
    conic-gradient(from 260deg, transparent 0 62deg, rgba(255,255,255,0.78) 75deg, transparent 92deg, transparent 190deg, var(--premium-a) 220deg, transparent 248deg, transparent 360deg),
    radial-gradient(ellipse at 50% 0%, var(--premium-b), transparent 34%),
    radial-gradient(ellipse at 100% 54%, var(--premium-a), transparent 34%),
    radial-gradient(ellipse at 0% 60%, var(--premium-c), transparent 34%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 61%, #000 72%, transparent 84%);
          mask: radial-gradient(circle, transparent 52%, #000 61%, #000 72%, transparent 84%);
  filter: blur(1.7px) drop-shadow(0 0 9px var(--premium-soft));
  animation: premium-arc-sweep 5.2s ease-in-out infinite;
}

.avatar-deco.deco-ember_trace { --premium-a: rgba(255, 144, 64, 0.95); --premium-b: rgba(255, 72, 42, 0.72); --premium-c: rgba(255, 204, 94, 0.58); --premium-speed: 8s; }
.avatar-deco.deco-mint_signal { --premium-a: rgba(106, 255, 194, 0.95); --premium-b: rgba(74, 216, 255, 0.7); --premium-c: rgba(190, 255, 226, 0.62); }
.avatar-deco.deco-pixel_pop { --premium-a: rgba(116, 190, 255, 0.96); --premium-b: rgba(255, 118, 230, 0.72); --premium-c: rgba(255, 236, 118, 0.58); --premium-speed: 5.2s; }
.avatar-deco.deco-soft_static { --premium-a: rgba(218, 230, 255, 0.8); --premium-b: rgba(148, 168, 210, 0.5); --premium-c: rgba(255, 255, 255, 0.42); --premium-speed: 4.6s; }
.avatar-deco.deco-lime_loop { --premium-a: rgba(184, 255, 74, 0.96); --premium-b: rgba(74, 255, 166, 0.72); --premium-c: rgba(232, 255, 128, 0.58); }
.avatar-deco.deco-neon_grid { --premium-a: rgba(84, 244, 255, 0.96); --premium-b: rgba(80, 112, 255, 0.72); --premium-c: rgba(70, 255, 202, 0.64); }
.avatar-deco.deco-violet_comet { --premium-a: rgba(204, 132, 255, 0.98); --premium-b: rgba(96, 206, 255, 0.72); --premium-c: rgba(246, 210, 255, 0.62); --premium-speed: 4.2s; }
.avatar-deco.deco-signal_wave { --premium-a: rgba(72, 180, 255, 0.96); --premium-b: rgba(64, 238, 255, 0.72); --premium-c: rgba(120, 255, 206, 0.5); }
.avatar-deco.deco-chrome_edge { --premium-a: rgba(245, 250, 255, 0.98); --premium-b: rgba(120, 138, 158, 0.66); --premium-c: rgba(190, 220, 255, 0.58); --premium-speed: 9s; }
.avatar-deco.deco-solar_flare { --premium-a: rgba(255, 212, 72, 0.98); --premium-b: rgba(255, 104, 48, 0.78); --premium-c: rgba(255, 246, 162, 0.58); --premium-breathe: 2.6s; }
.avatar-deco.deco-void_pulse { --premium-a: rgba(124, 92, 255, 0.92); --premium-b: rgba(34, 18, 92, 0.8); --premium-c: rgba(202, 128, 255, 0.54); }
.avatar-deco.deco-plasma_arc { --premium-a: rgba(78, 236, 255, 0.98); --premium-b: rgba(255, 86, 218, 0.84); --premium-c: rgba(255, 255, 255, 0.58); --premium-speed: 3.4s; }
.avatar-deco.deco-crystal_bloom { --premium-a: rgba(196, 246, 255, 0.98); --premium-b: rgba(150, 190, 255, 0.72); --premium-c: rgba(255, 255, 255, 0.64); }
.avatar-deco.deco-toxic_slime { --premium-a: rgba(126, 255, 46, 0.95); --premium-b: rgba(38, 190, 46, 0.72); --premium-c: rgba(214, 255, 98, 0.52); --premium-breathe: 2.4s; }
.avatar-deco.deco-nebula_dust { --premium-a: rgba(92, 224, 255, 0.9); --premium-b: rgba(186, 84, 255, 0.84); --premium-c: rgba(255, 92, 218, 0.64); --premium-speed: 10s; }
.avatar-deco.deco-ion_crown { --premium-a: rgba(98, 236, 255, 0.98); --premium-b: rgba(90, 112, 255, 0.76); --premium-c: rgba(255, 255, 255, 0.62); }
.avatar-deco.deco-ruby_circuit { --premium-a: rgba(255, 72, 112, 0.98); --premium-b: rgba(255, 160, 86, 0.68); --premium-c: rgba(255, 214, 214, 0.58); }
.avatar-deco.deco-starforge { --premium-a: rgba(255, 210, 84, 0.98); --premium-b: rgba(120, 132, 148, 0.72); --premium-c: rgba(255, 246, 178, 0.6); --premium-speed: 8.8s; }
.avatar-deco.deco-quantum_ring { --premium-a: rgba(108, 255, 226, 0.98); --premium-b: rgba(196, 104, 255, 0.78); --premium-c: rgba(92, 142, 255, 0.6); --premium-speed: 4s; }
.avatar-deco.deco-midnight_sun { --premium-a: rgba(255, 188, 64, 0.96); --premium-b: rgba(18, 16, 42, 0.86); --premium-c: rgba(255, 238, 142, 0.56); }
.avatar-deco.deco-dragon_core { --premium-a: rgba(255, 74, 42, 0.98); --premium-b: rgba(255, 178, 74, 0.76); --premium-c: rgba(94, 10, 4, 0.66); --premium-breathe: 2.2s; }
.avatar-deco.deco-cosmic_crown { --premium-a: rgba(255, 238, 160, 0.98); --premium-b: rgba(116, 132, 255, 0.76); --premium-c: rgba(110, 238, 255, 0.6); }
.avatar-deco.deco-phantom_blade { --premium-a: rgba(234, 246, 255, 0.98); --premium-b: rgba(150, 168, 255, 0.76); --premium-c: rgba(150, 246, 255, 0.5); --premium-speed: 3.6s; }
.avatar-deco.deco-time_rift { --premium-a: rgba(118, 255, 224, 0.98); --premium-b: rgba(126, 92, 255, 0.78); --premium-c: rgba(255, 255, 255, 0.55); --premium-speed: 5s; }
.avatar-deco.deco-zero_gravity { --premium-a: rgba(150, 218, 255, 0.96); --premium-b: rgba(216, 148, 255, 0.78); --premium-c: rgba(255, 230, 120, 0.6); --premium-speed: 9.6s; }
.avatar-deco.deco-singularity { --premium-a: rgba(142, 104, 255, 0.95); --premium-b: rgba(4, 2, 16, 0.86); --premium-c: rgba(200, 152, 255, 0.62); --premium-breathe: 2.6s; }
.avatar-deco.deco-celestial_wings { --premium-a: rgba(255, 238, 184, 0.98); --premium-b: rgba(112, 210, 255, 0.68); --premium-c: rgba(255, 255, 255, 0.72); --premium-speed: 8.4s; }
.avatar-deco.deco-apex_storm { --premium-a: rgba(118, 226, 255, 0.98); --premium-b: rgba(82, 104, 255, 0.84); --premium-c: rgba(255, 255, 255, 0.68); --premium-speed: 3.8s; }
.avatar-deco.deco-prism_overdrive { --premium-a: rgba(255, 84, 216, 0.98); --premium-b: rgba(82, 230, 255, 0.9); --premium-c: rgba(255, 226, 82, 0.7); --premium-speed: 2.8s; }
.avatar-deco.deco-eternal_flame { --premium-a: rgba(255, 122, 42, 0.98); --premium-b: rgba(255, 38, 18, 0.78); --premium-c: rgba(255, 222, 98, 0.62); --premium-breathe: 2s; }
.avatar-deco.deco-magic_mists { --premium-a: rgba(96, 224, 255, 0.98); --premium-b: rgba(186, 76, 255, 0.94); --premium-c: rgba(68, 248, 210, 0.76); --premium-soft: rgba(160, 98, 255, 0.38); --premium-speed: 6.4s; --premium-breathe: 3.2s; }

@keyframes premium-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes premium-ring-breathe {
  0%,100% { filter: saturate(1.14) brightness(1); }
  50% { filter: saturate(1.28) brightness(1.18); }
}
@keyframes premium-mist-drift {
  0%,100% { transform: rotate(0deg) scale(0.98); opacity: 0.7; }
  42% { transform: rotate(-16deg) scale(1.06); opacity: 0.98; }
  72% { transform: rotate(12deg) scale(1.02); opacity: 0.82; }
}
@keyframes premium-arc-sweep {
  0%,100% { transform: rotate(0deg) scale(0.96); opacity: 0.62; }
  48% { transform: rotate(28deg) scale(1.08); opacity: 1; }
  76% { transform: rotate(-12deg) scale(1.01); opacity: 0.78; }
}

/* ===== DATA-DRIVEN PRISTINE DECORATION ENGINE ===== */
.premium-deco {
  --fx-a: #60e0ff;
  --fx-b: #ba4cff;
  --fx-c: #44f8d2;
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
  filter: saturate(1.18);
}

.premium-deco span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.premium-shell {
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,0.28), transparent 18%),
    radial-gradient(circle at 50% 52%, transparent 58%, color-mix(in srgb, var(--fx-a) 18%, transparent) 65%, transparent 76%),
    conic-gradient(from 210deg, transparent 0 20deg, color-mix(in srgb, var(--fx-a) 92%, white 8%) 34deg, transparent 70deg, transparent 132deg, var(--fx-b) 164deg, transparent 208deg, transparent 262deg, var(--fx-c) 296deg, transparent 336deg);
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 64%, #000 76%, transparent 87%);
          mask: radial-gradient(circle, transparent 59%, #000 64%, #000 76%, transparent 87%);
  box-shadow:
    0 0 10px color-mix(in srgb, var(--fx-a) 44%, transparent),
    0 0 24px color-mix(in srgb, var(--fx-b) 34%, transparent);
  animation: pristine-spin 8s linear infinite, pristine-breathe 4s ease-in-out infinite;
}

.premium-glass {
  inset: 4px;
  background:
    radial-gradient(circle at 50% 50%, transparent 54%, rgba(255,255,255,0.1) 60%, transparent 68%),
    linear-gradient(132deg, transparent 0 36%, rgba(255,255,255,0.22) 47%, transparent 58%),
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,0.28), transparent 24%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 58%, #000 66%, transparent 74%);
          mask: radial-gradient(circle, transparent 52%, #000 58%, #000 66%, transparent 74%);
  opacity: 0.78;
  animation: pristine-glass 5.6s ease-in-out infinite;
}

.premium-rim-a {
  inset: -1px;
  background:
    conic-gradient(from 32deg, transparent 0 38deg, rgba(255,255,255,0.88) 48deg, var(--fx-a) 58deg, transparent 78deg, transparent 172deg, var(--fx-b) 194deg, transparent 230deg, transparent 312deg, var(--fx-c) 330deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 66%, #000 72%, transparent 80%);
          mask: radial-gradient(circle, transparent 62%, #000 66%, #000 72%, transparent 80%);
  filter: blur(0.15px) drop-shadow(0 0 6px var(--fx-a));
  animation: pristine-spin 4.8s linear infinite reverse;
}

.premium-rim-b {
  inset: -5px;
  background:
    radial-gradient(ellipse at 12% 26%, var(--fx-b), transparent 34%),
    radial-gradient(ellipse at 84% 28%, var(--fx-a), transparent 36%),
    radial-gradient(ellipse at 32% 92%, var(--fx-c), transparent 34%);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 64%, #000 80%, transparent 88%);
          mask: radial-gradient(circle, transparent 58%, #000 64%, #000 80%, transparent 88%);
  filter: blur(1.2px);
  opacity: 0.82;
  animation: pristine-warp 6.8s ease-in-out infinite;
}

.premium-wisp {
  inset: -13px;
  opacity: 0.8;
  filter: blur(2.4px) saturate(1.18);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 58%, #000 72%, transparent 84%);
          mask: radial-gradient(circle, transparent 50%, #000 58%, #000 72%, transparent 84%);
}

.premium-wisp-a {
  background:
    radial-gradient(ellipse at 50% 0%, var(--fx-b), transparent 34%),
    radial-gradient(ellipse at 100% 54%, var(--fx-a), transparent 32%),
    radial-gradient(ellipse at 0% 64%, var(--fx-c), transparent 34%);
  animation: pristine-wisp-a 7s ease-in-out infinite;
}

.premium-wisp-b {
  background:
    conic-gradient(from 280deg, transparent 0 58deg, color-mix(in srgb, var(--fx-a) 84%, white 16%) 74deg, transparent 98deg, transparent 188deg, var(--fx-b) 220deg, transparent 250deg, transparent 360deg);
  animation: pristine-wisp-b 5.8s ease-in-out infinite;
}

.premium-motif,
.premium-sparks {
  inset: -7px;
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 63%, #000 82%, transparent 91%);
          mask: radial-gradient(circle, transparent 55%, #000 63%, #000 82%, transparent 91%);
}

.premium-sparks {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 18%, var(--fx-a) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 66%, rgba(255,255,255,0.86) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 82%, var(--fx-c) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 6%, var(--fx-b) 0 1px, transparent 2px);
  animation: pristine-sparks 2.4s ease-in-out infinite;
}

.premium-motif-mist {
  background:
    radial-gradient(ellipse at 24% 28%, rgba(255,255,255,0.34), transparent 20%),
    conic-gradient(from 120deg, transparent 0 24deg, var(--fx-b) 46deg, transparent 78deg, transparent 136deg, var(--fx-a) 170deg, transparent 212deg, transparent 270deg, var(--fx-c) 302deg, transparent 336deg);
  filter: blur(1.4px);
  animation: pristine-motif-slow 9s linear infinite;
}

.premium-motif-comet,
.premium-motif-blade,
.premium-motif-arc {
  background: conic-gradient(from 300deg, transparent 0 48deg, rgba(255,255,255,0.92) 58deg, var(--fx-a) 68deg, transparent 88deg, transparent 360deg);
  filter: drop-shadow(0 0 7px var(--fx-a));
  animation: pristine-motif-fast 2.8s linear infinite;
}

.premium-motif-crown,
.premium-motif-wings {
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,0.9), transparent 18%),
    radial-gradient(ellipse at 24% 20%, var(--fx-c), transparent 22%),
    radial-gradient(ellipse at 76% 20%, var(--fx-b), transparent 22%);
  filter: drop-shadow(0 0 8px var(--fx-c));
  animation: pristine-crown 3s ease-in-out infinite;
}

.premium-motif-rift,
.premium-motif-eclipse,
.premium-motif-singularity {
  background:
    conic-gradient(from 0deg, transparent 0 70deg, var(--fx-b) 86deg, transparent 104deg, transparent 180deg, var(--fx-a) 194deg, transparent 214deg, transparent 360deg);
  filter: blur(0.8px) contrast(1.25);
  animation: pristine-rift 4.4s steps(8) infinite;
}

.premium-motif-grid,
.premium-motif-scan {
  background:
    repeating-conic-gradient(from 0deg, transparent 0 11deg, color-mix(in srgb, var(--fx-a) 65%, transparent) 12deg 13deg, transparent 14deg 24deg),
    conic-gradient(from 270deg, transparent 0 66deg, rgba(255,255,255,0.7) 76deg, transparent 90deg);
  filter: drop-shadow(0 0 6px var(--fx-a));
  animation: pristine-motif-slow 5.6s linear infinite;
}

.premium-motif-spark,
.premium-motif-glints,
.premium-motif-dust {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, var(--fx-a) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 64%, var(--fx-c) 0 1.5px, transparent 3px),
    radial-gradient(circle at 28% 82%, var(--fx-b) 0 1.5px, transparent 3px),
    radial-gradient(circle at 50% 7%, rgba(255,255,255,0.8) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px var(--fx-a));
  animation: pristine-sparkle 2.4s ease-in-out infinite;
}

.premium-motif-wave {
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, color-mix(in srgb, var(--fx-a) 44%, transparent) 9px 10px, transparent 11px 18px),
    conic-gradient(from 220deg, transparent 0 54deg, var(--fx-a) 70deg, transparent 96deg, transparent 210deg, var(--fx-c) 232deg, transparent 260deg);
  filter: blur(0.5px) drop-shadow(0 0 6px var(--fx-a));
  animation: pristine-wave 3.6s ease-in-out infinite;
}

.premium-motif-shine {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255,255,255,0.9) 48%, transparent 58%),
    conic-gradient(from 260deg, transparent 0 70deg, var(--fx-a) 82deg, transparent 98deg, transparent 360deg);
  filter: drop-shadow(0 0 8px var(--fx-a));
  animation: pristine-shine-sweep 4.2s ease-in-out infinite;
}

.premium-motif-crystal {
  background:
    conic-gradient(from 45deg, transparent 0 22deg, rgba(255,255,255,0.82) 32deg, var(--fx-a) 44deg, transparent 58deg, transparent 118deg, var(--fx-b) 136deg, transparent 156deg, transparent 236deg, var(--fx-c) 254deg, transparent 276deg),
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.52), transparent 22%);
  filter: contrast(1.16) drop-shadow(0 0 8px var(--fx-a));
  animation: pristine-crystal 5.2s ease-in-out infinite;
}

.premium-motif-float {
  background:
    radial-gradient(circle at 50% 0%, var(--fx-a) 0 2px, transparent 4px),
    radial-gradient(circle at 88% 45%, var(--fx-b) 0 2px, transparent 4px),
    radial-gradient(circle at 12% 56%, var(--fx-c) 0 2px, transparent 4px),
    radial-gradient(circle at 52% 100%, rgba(255,255,255,0.86) 0 1.5px, transparent 4px);
  filter: drop-shadow(0 0 7px var(--fx-a));
  animation: pristine-float 4.8s ease-in-out infinite;
}

.premium-motif-flare,
.premium-motif-drip,
.premium-motif-storm {
  background:
    radial-gradient(ellipse at 50% 0%, var(--fx-c), transparent 20%),
    radial-gradient(ellipse at 92% 50%, var(--fx-a), transparent 26%),
    radial-gradient(ellipse at 18% 72%, var(--fx-b), transparent 24%);
  filter: blur(1px) drop-shadow(0 0 9px var(--fx-a));
  animation: pristine-flare 2.2s ease-in-out infinite;
}

.premium-motif-prism {
  background: conic-gradient(#ff54d8, #ffe252, #52ff98, #52e6ff, #8a5cff, #ff54d8);
  filter: saturate(1.4) drop-shadow(0 0 8px #52e6ff);
  animation: pristine-motif-fast 1.9s linear infinite;
}

.premium-mythical .premium-intrusion,
.premium-mythical .premium-strike {
  inset: 9px;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle, transparent 0 20%, #000 34%, #000 66%, transparent 78%);
          mask: radial-gradient(circle, transparent 0 20%, #000 34%, #000 66%, transparent 78%);
}

.premium-mythical .premium-intrusion {
  filter: blur(0.6px) drop-shadow(0 0 8px var(--fx-a));
  animation: mythical-intrude 6s ease-in-out infinite;
}

.premium-mythical .premium-strike {
  inset: 6px;
  filter: drop-shadow(0 0 8px var(--fx-a));
  animation: mythical-strike-soft 6s ease-in-out infinite;
}

.premium-dragon .premium-intrusion,
.premium-flame .premium-intrusion {
  background:
    radial-gradient(ellipse at 50% 90%, var(--fx-b), transparent 30%),
    radial-gradient(ellipse at 42% 84%, var(--fx-a), transparent 24%),
    radial-gradient(ellipse at 60% 72%, var(--fx-c), transparent 20%);
  -webkit-mask: radial-gradient(ellipse at 50% 76%, transparent 0 20%, #000 34%, #000 66%, transparent 80%);
          mask: radial-gradient(ellipse at 50% 76%, transparent 0 20%, #000 34%, #000 66%, transparent 80%);
  animation-name: mythical-flame-intrude;
}

.premium-cosmic .premium-intrusion,
.premium-wings .premium-intrusion {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,255,0.82), transparent 18%),
    radial-gradient(ellipse at 18% 46%, var(--fx-c), transparent 28%),
    radial-gradient(ellipse at 82% 46%, var(--fx-b), transparent 28%);
  animation-name: mythical-celestial-intrude;
}

.premium-blade .premium-strike {
  background:
    linear-gradient(126deg, transparent 0 42%, rgba(255,255,255,0.95) 48%, var(--fx-a) 51%, transparent 58%),
    linear-gradient(126deg, transparent 0 35%, color-mix(in srgb, var(--fx-b) 70%, transparent) 42%, transparent 50%);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 22%, #000 76%, transparent 86%);
          mask: radial-gradient(circle, transparent 8%, #000 22%, #000 76%, transparent 86%);
  animation-name: mythical-blade-strike;
}

.premium-time .premium-intrusion {
  background:
    repeating-conic-gradient(from 0deg, transparent 0 17deg, color-mix(in srgb, var(--fx-a) 62%, transparent) 18deg 20deg, transparent 21deg 36deg),
    radial-gradient(circle, transparent 0 36%, var(--fx-b) 37% 39%, transparent 40% 62%, var(--fx-a) 63% 65%, transparent 66%);
  animation-name: mythical-time-intrude;
}

.premium-gravity .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.5), transparent 10%),
    radial-gradient(circle at 28% 36%, var(--fx-a), transparent 14%),
    radial-gradient(circle at 72% 64%, var(--fx-b), transparent 14%),
    radial-gradient(circle, transparent 0 42%, color-mix(in srgb, var(--fx-c) 54%, transparent) 44% 48%, transparent 50%);
  animation-name: mythical-gravity-intrude;
}

.premium-singularity .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.92) 0 18%, var(--fx-b) 24%, transparent 42%),
    conic-gradient(from 80deg, transparent 0 80deg, var(--fx-a) 94deg, transparent 116deg, transparent 220deg, var(--fx-c) 240deg, transparent 264deg);
  filter: blur(0.4px) contrast(1.28) drop-shadow(0 0 10px var(--fx-b));
  animation-name: mythical-singularity-intrude;
}

.premium-storm .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55), transparent 13%),
    repeating-conic-gradient(from 18deg, transparent 0 28deg, color-mix(in srgb, var(--fx-a) 70%, transparent) 29deg 33deg, transparent 34deg 58deg);
  animation-name: mythical-storm-build;
}

.premium-storm .premium-strike {
  background:
    linear-gradient(108deg, transparent 0 42%, rgba(255,255,255,0.98) 47%, var(--fx-a) 50%, transparent 55%),
    linear-gradient(73deg, transparent 0 48%, color-mix(in srgb, var(--fx-c) 78%, transparent) 51%, transparent 55%),
    linear-gradient(145deg, transparent 0 52%, rgba(255,255,255,0.78) 54%, transparent 58%);
  -webkit-mask: radial-gradient(circle, transparent 0 12%, #000 20%, #000 78%, transparent 88%);
          mask: radial-gradient(circle, transparent 0 12%, #000 20%, #000 78%, transparent 88%);
  animation-name: mythical-lightning-strike;
}

.premium-prism .premium-intrusion {
  background:
    linear-gradient(105deg, transparent 0 22%, rgba(255,84,216,0.56) 34%, rgba(82,230,255,0.58) 46%, rgba(255,226,82,0.5) 58%, transparent 72%),
    conic-gradient(#ff54d8, #ffe252, #52ff98, #52e6ff, #8a5cff, #ff54d8);
  filter: saturate(1.45) blur(0.35px) drop-shadow(0 0 9px #52e6ff);
  animation-name: mythical-prism-intrude;
}

.premium-magic-mists .premium-intrusion {
  background:
    radial-gradient(ellipse at 24% 42%, color-mix(in srgb, var(--fx-b) 62%, transparent), transparent 32%),
    radial-gradient(ellipse at 74% 48%, color-mix(in srgb, var(--fx-a) 58%, transparent), transparent 34%),
    radial-gradient(ellipse at 52% 70%, color-mix(in srgb, var(--fx-c) 46%, transparent), transparent 32%);
  filter: blur(2px) saturate(1.18) drop-shadow(0 0 8px var(--fx-b));
  animation-name: mythical-mist-intrude;
}

/* Mythical shape variants: break the shared orb silhouette for premium drops. */
.premium-blade .premium-shell,
.premium-blade .premium-rim-a,
.premium-blade .premium-rim-b,
.premium-blade .premium-wisp,
.premium-blade .premium-motif,
.premium-storm .premium-shell,
.premium-storm .premium-rim-a,
.premium-storm .premium-rim-b,
.premium-storm .premium-wisp,
.premium-storm .premium-motif,
.premium-prism .premium-shell,
.premium-prism .premium-rim-a,
.premium-prism .premium-rim-b,
.premium-prism .premium-wisp,
.premium-prism .premium-motif {
  border-radius: 18%;
}

.premium-blade .premium-shell {
  inset: -7px;
  background:
    linear-gradient(126deg, transparent 0 26%, color-mix(in srgb, var(--fx-b) 46%, transparent) 34%, transparent 42%),
    linear-gradient(126deg, transparent 0 42%, rgba(255,255,255,0.92) 47%, var(--fx-a) 50%, transparent 56%),
    linear-gradient(126deg, transparent 0 61%, color-mix(in srgb, var(--fx-c) 62%, transparent) 66%, transparent 72%);
  -webkit-mask: linear-gradient(126deg, transparent 0 18%, #000 28% 72%, transparent 84%);
          mask: linear-gradient(126deg, transparent 0 18%, #000 28% 72%, transparent 84%);
  filter: drop-shadow(0 0 9px var(--fx-a));
  animation: blade-sheath 3.6s ease-in-out infinite;
}

.premium-blade .premium-glass,
.premium-blade .premium-rim-b,
.premium-blade .premium-wisp-b {
  opacity: 0.18;
}

.premium-blade .premium-rim-a {
  background:
    linear-gradient(46deg, transparent 0 41%, color-mix(in srgb, var(--fx-c) 72%, transparent) 45%, rgba(255,255,255,0.88) 48%, transparent 54%),
    linear-gradient(132deg, transparent 0 35%, var(--fx-b) 39%, transparent 44%);
  -webkit-mask: linear-gradient(46deg, transparent 0 23%, #000 30% 69%, transparent 78%);
          mask: linear-gradient(46deg, transparent 0 23%, #000 30% 69%, transparent 78%);
  animation: blade-sheath 2.7s ease-in-out infinite reverse;
}

.premium-blade .premium-strike {
  background:
    linear-gradient(124deg, transparent 0 38%, color-mix(in srgb, var(--fx-b) 56%, transparent) 42%, rgba(255,255,255,0.98) 47%, var(--fx-a) 50%, transparent 56%),
    linear-gradient(62deg, transparent 0 48%, rgba(255,255,255,0.78) 51%, color-mix(in srgb, var(--fx-c) 62%, transparent) 54%, transparent 60%),
    radial-gradient(ellipse at 52% 50%, rgba(255,255,255,0.5), transparent 18%);
  -webkit-mask: linear-gradient(124deg, transparent 0 14%, #000 25% 76%, transparent 88%);
          mask: linear-gradient(124deg, transparent 0 14%, #000 25% 76%, transparent 88%);
}

.premium-storm .premium-shell {
  inset: -10px;
  background:
    linear-gradient(114deg, transparent 0 20%, color-mix(in srgb, var(--fx-a) 72%, transparent) 24%, transparent 32%),
    linear-gradient(72deg, transparent 0 44%, rgba(255,255,255,0.92) 47%, var(--fx-c) 50%, transparent 56%),
    linear-gradient(146deg, transparent 0 58%, color-mix(in srgb, var(--fx-b) 56%, transparent) 62%, transparent 72%),
    radial-gradient(ellipse at 18% 78%, var(--fx-b), transparent 22%);
  -webkit-mask:
    linear-gradient(114deg, transparent 0 16%, #000 22% 34%, transparent 43%),
    linear-gradient(72deg, transparent 0 39%, #000 45% 57%, transparent 65%),
    linear-gradient(146deg, transparent 0 52%, #000 60% 76%, transparent 86%);
          mask:
    linear-gradient(114deg, transparent 0 16%, #000 22% 34%, transparent 43%),
    linear-gradient(72deg, transparent 0 39%, #000 45% 57%, transparent 65%),
    linear-gradient(146deg, transparent 0 52%, #000 60% 76%, transparent 86%);
  filter: drop-shadow(0 0 10px var(--fx-a));
  animation: storm-charge 2.2s ease-in-out infinite;
}

.premium-storm .premium-glass,
.premium-storm .premium-rim-b {
  opacity: 0;
}

.premium-storm .premium-rim-a,
.premium-storm .premium-motif-storm {
  background:
    repeating-linear-gradient(96deg, transparent 0 9px, color-mix(in srgb, var(--fx-a) 58%, transparent) 10px 12px, transparent 13px 24px),
    radial-gradient(circle at 48% 40%, rgba(255,255,255,0.7), transparent 10%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 12%, #000 20% 72%, transparent 82%);
          mask: radial-gradient(ellipse at 50% 50%, transparent 0 12%, #000 20% 72%, transparent 82%);
  animation: storm-static 1.25s steps(4) infinite;
}

.premium-storm .premium-intrusion {
  background:
    radial-gradient(circle at 48% 42%, rgba(255,255,255,0.72), transparent 9%),
    repeating-conic-gradient(from 8deg, transparent 0 18deg, color-mix(in srgb, var(--fx-a) 52%, transparent) 20deg 23deg, transparent 25deg 48deg),
    radial-gradient(ellipse at 50% 52%, transparent 0 30%, color-mix(in srgb, var(--fx-b) 32%, transparent) 36%, transparent 54%);
}

.premium-storm .premium-strike {
  background:
    linear-gradient(112deg, transparent 0 35%, rgba(255,255,255,0.98) 38%, var(--fx-a) 41%, transparent 46%),
    linear-gradient(68deg, transparent 0 47%, color-mix(in srgb, var(--fx-c) 82%, transparent) 50%, transparent 54%),
    linear-gradient(142deg, transparent 0 53%, rgba(255,255,255,0.86) 56%, transparent 61%),
    linear-gradient(24deg, transparent 0 57%, color-mix(in srgb, var(--fx-b) 66%, transparent) 60%, transparent 64%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 5%, #000 12% 83%, transparent 91%);
          mask: radial-gradient(ellipse at 50% 50%, transparent 0 5%, #000 12% 83%, transparent 91%);
}

.premium-cosmic .premium-shell,
.premium-wings .premium-shell {
  inset: -11px -15px -6px;
  background:
    radial-gradient(ellipse at 22% 46%, var(--fx-c), transparent 30%),
    radial-gradient(ellipse at 78% 46%, var(--fx-b), transparent 30%),
    radial-gradient(ellipse at 50% 6%, rgba(255,255,255,0.92), transparent 18%),
    linear-gradient(90deg, transparent 0 20%, color-mix(in srgb, var(--fx-a) 36%, transparent) 34%, transparent 48%, transparent 52%, color-mix(in srgb, var(--fx-b) 36%, transparent) 66%, transparent 80%);
  -webkit-mask:
    radial-gradient(ellipse at 21% 50%, transparent 0 28%, #000 36% 57%, transparent 69%),
    radial-gradient(ellipse at 79% 50%, transparent 0 28%, #000 36% 57%, transparent 69%),
    radial-gradient(ellipse at 50% 12%, #000 0 14%, transparent 23%);
          mask:
    radial-gradient(ellipse at 21% 50%, transparent 0 28%, #000 36% 57%, transparent 69%),
    radial-gradient(ellipse at 79% 50%, transparent 0 28%, #000 36% 57%, transparent 69%),
    radial-gradient(ellipse at 50% 12%, #000 0 14%, transparent 23%);
  animation: wing-pulse 4.6s ease-in-out infinite;
}

.premium-cosmic .premium-rim-a,
.premium-wings .premium-rim-a {
  background:
    radial-gradient(ellipse at 16% 42%, rgba(255,255,255,0.78), transparent 17%),
    radial-gradient(ellipse at 84% 42%, rgba(255,255,255,0.78), transparent 17%),
    repeating-linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--fx-c) 36%, transparent) 11px 12px, transparent 13px 26px);
  -webkit-mask:
    radial-gradient(ellipse at 20% 50%, transparent 0 25%, #000 34% 60%, transparent 72%),
    radial-gradient(ellipse at 80% 50%, transparent 0 25%, #000 34% 60%, transparent 72%);
          mask:
    radial-gradient(ellipse at 20% 50%, transparent 0 25%, #000 34% 60%, transparent 72%),
    radial-gradient(ellipse at 80% 50%, transparent 0 25%, #000 34% 60%, transparent 72%);
}

.premium-dragon .premium-shell,
.premium-flame .premium-shell {
  inset: -7px -9px -13px;
  background:
    radial-gradient(ellipse at 50% 96%, var(--fx-b), transparent 34%),
    radial-gradient(ellipse at 28% 86%, var(--fx-a), transparent 24%),
    radial-gradient(ellipse at 72% 78%, var(--fx-c), transparent 25%),
    conic-gradient(from 180deg, transparent 0 92deg, var(--fx-a) 112deg, transparent 132deg, transparent 212deg, var(--fx-b) 232deg, transparent 252deg, transparent 360deg);
  -webkit-mask:
    radial-gradient(ellipse at 50% 93%, transparent 0 19%, #000 30% 62%, transparent 74%),
    radial-gradient(ellipse at 30% 82%, transparent 0 14%, #000 24% 48%, transparent 62%),
    radial-gradient(ellipse at 70% 74%, transparent 0 14%, #000 24% 48%, transparent 62%);
          mask:
    radial-gradient(ellipse at 50% 93%, transparent 0 19%, #000 30% 62%, transparent 74%),
    radial-gradient(ellipse at 30% 82%, transparent 0 14%, #000 24% 48%, transparent 62%),
    radial-gradient(ellipse at 70% 74%, transparent 0 14%, #000 24% 48%, transparent 62%);
  animation: flame-tongues 2.8s ease-in-out infinite;
}

.premium-dragon .premium-glass,
.premium-flame .premium-glass {
  opacity: 0.28;
}

.premium-dragon .premium-intrusion,
.premium-flame .premium-intrusion {
  background:
    radial-gradient(ellipse at 50% 96%, var(--fx-b), transparent 28%),
    radial-gradient(ellipse at 34% 78%, color-mix(in srgb, var(--fx-a) 78%, transparent), transparent 20%),
    radial-gradient(ellipse at 62% 66%, color-mix(in srgb, var(--fx-c) 72%, transparent), transparent 18%),
    linear-gradient(0deg, color-mix(in srgb, var(--fx-b) 22%, transparent), transparent 58%);
}

.premium-gravity .premium-shell {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.86) 0 2px, transparent 5px),
    radial-gradient(circle at 18% 54%, var(--fx-a) 0 2px, transparent 5px),
    radial-gradient(circle at 80% 42%, var(--fx-b) 0 2px, transparent 5px),
    radial-gradient(circle at 52% 84%, var(--fx-c) 0 2px, transparent 5px);
  -webkit-mask: none;
          mask: none;
  animation: gravity-orbit 4.4s linear infinite;
}

.premium-gravity .premium-rim-a,
.premium-gravity .premium-rim-b,
.premium-gravity .premium-wisp {
  border-radius: 50%;
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 47%, #000 50% 52%, transparent 55%);
          mask: radial-gradient(ellipse at 50% 50%, transparent 0 47%, #000 50% 52%, transparent 55%);
  transform: rotate(-20deg) scaleX(1.18);
}

.premium-gravity .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.78) 0 5%, transparent 11%),
    radial-gradient(circle at 31% 38%, var(--fx-a) 0 5%, transparent 10%),
    radial-gradient(circle at 72% 62%, var(--fx-b) 0 4%, transparent 10%),
    radial-gradient(circle at 48% 74%, var(--fx-c) 0 3%, transparent 9%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 8px, color-mix(in srgb, var(--fx-a) 28%, transparent) 9px 10px, transparent 11px 17px);
}

.premium-singularity .premium-shell {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.96) 0 20%, var(--fx-b) 27%, transparent 39%),
    conic-gradient(from 20deg, transparent 0 44deg, var(--fx-a) 58deg, transparent 76deg, transparent 142deg, var(--fx-b) 156deg, transparent 178deg, transparent 250deg, var(--fx-c) 270deg, transparent 292deg);
  -webkit-mask: radial-gradient(circle, #000 0 49%, transparent 69%);
          mask: radial-gradient(circle, #000 0 49%, transparent 69%);
  filter: contrast(1.4) drop-shadow(0 0 12px var(--fx-b));
  animation: singularity-vortex 3.2s linear infinite;
}

.premium-singularity .premium-rim-a,
.premium-singularity .premium-rim-b,
.premium-singularity .premium-wisp {
  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 44% 54%, transparent 65%);
          mask: radial-gradient(circle, transparent 0 38%, #000 44% 54%, transparent 65%);
}

.premium-singularity .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.98) 0 16%, rgba(255,255,255,0.62) 18%, var(--fx-b) 23%, transparent 34%),
    conic-gradient(from 70deg, transparent 0 34deg, var(--fx-a) 48deg, transparent 64deg, transparent 138deg, var(--fx-c) 154deg, transparent 174deg, transparent 245deg, var(--fx-b) 264deg, transparent 286deg);
}

.premium-astral-dominion {
  filter: saturate(1.32) contrast(1.08) drop-shadow(0 0 12px rgba(125,247,255,0.34));
}
.premium-astral-dominion .premium-shell {
  inset: -11px;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,0.96) 0 2px, transparent 5px),
    radial-gradient(circle at 18% 28%, #ffe66d 0 2px, transparent 6px),
    radial-gradient(circle at 82% 28%, #7df7ff 0 2px, transparent 6px),
    radial-gradient(circle at 28% 84%, #d884ff 0 2px, transparent 6px),
    radial-gradient(circle at 72% 84%, #ffe66d 0 2px, transparent 6px),
    conic-gradient(from 205deg, transparent 0 20deg, rgba(255,230,109,0.94) 34deg, transparent 54deg, transparent 92deg, rgba(125,247,255,0.92) 116deg, transparent 142deg, transparent 186deg, rgba(216,132,255,0.84) 212deg, transparent 236deg, transparent 300deg, rgba(255,255,255,0.9) 326deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 50%, #000 55% 72%, transparent 80%);
          mask: radial-gradient(circle, transparent 0 50%, #000 55% 72%, transparent 80%);
  animation: astral-dominion-orbit 6.8s linear infinite, astral-dominion-breathe 4.2s ease-in-out infinite;
}
.premium-astral-dominion .premium-glass {
  inset: -7px;
  background:
    linear-gradient(118deg, transparent 0 28%, rgba(125,247,255,0.0) 34%, rgba(125,247,255,0.72) 43%, rgba(255,230,109,0.8) 50%, rgba(216,132,255,0.62) 58%, transparent 70%),
    linear-gradient(245deg, transparent 0 32%, rgba(216,132,255,0.58) 45%, rgba(125,247,255,0.46) 54%, transparent 66%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 42%, #000 48% 58%, transparent 70%);
          mask: radial-gradient(ellipse at 50% 50%, transparent 0 42%, #000 48% 58%, transparent 70%);
  animation: astral-dominion-ribbon 5.4s ease-in-out infinite;
}
.premium-astral-dominion .premium-rim-a {
  inset: -5px;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,230,109,0.9) 0 2deg, transparent 3deg 18deg),
    radial-gradient(circle, transparent 0 52%, rgba(125,247,255,0.5) 54% 56%, transparent 60%);
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 52% 61%, transparent 67%);
          mask: radial-gradient(circle, transparent 0 48%, #000 52% 61%, transparent 67%);
  animation: astral-dominion-glyphs 9s linear infinite reverse;
}
.premium-astral-dominion .premium-rim-b {
  inset: -15px -10px;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 44%, rgba(255,230,109,0.5) 48%, transparent 50%),
    conic-gradient(from 36deg, transparent 0 72deg, rgba(125,247,255,0.75) 82deg 96deg, transparent 108deg 210deg, rgba(216,132,255,0.66) 222deg 236deg, transparent 250deg 360deg);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 44%, #000 48% 54%, transparent 62%);
          mask: radial-gradient(ellipse at 50% 50%, transparent 0 44%, #000 48% 54%, transparent 62%);
  animation: astral-dominion-tilt 6.2s ease-in-out infinite;
}
.premium-astral-dominion .premium-wisp-a,
.premium-astral-dominion .premium-wisp-b {
  inset: -13px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,230,109,0.9) 0 2px, transparent 5px),
    radial-gradient(circle at 6% 48%, rgba(125,247,255,0.86) 0 2px, transparent 5px),
    radial-gradient(circle at 94% 48%, rgba(216,132,255,0.82) 0 2px, transparent 5px),
    linear-gradient(90deg, transparent 0 30%, rgba(125,247,255,0.34) 42%, rgba(255,255,255,0.5) 50%, rgba(216,132,255,0.34) 58%, transparent 70%);
  -webkit-mask: radial-gradient(circle, transparent 0 43%, #000 49% 56%, transparent 66%);
          mask: radial-gradient(circle, transparent 0 43%, #000 49% 56%, transparent 66%);
  animation: astral-dominion-spark-orbit 4.8s linear infinite;
}
.premium-astral-dominion .premium-wisp-b {
  animation-direction: reverse;
  opacity: 0.72;
}
.premium-astral-dominion .premium-motif-crown {
  inset: -6px;
  background:
    radial-gradient(circle at 50% 12%, #fff8bf 0 2px, transparent 5px),
    radial-gradient(circle at 33% 23%, #7df7ff 0 2px, transparent 5px),
    radial-gradient(circle at 67% 23%, #d884ff 0 2px, transparent 5px),
    linear-gradient(128deg, transparent 0 40%, rgba(255,230,109,0.7) 44%, transparent 49%),
    linear-gradient(52deg, transparent 0 40%, rgba(125,247,255,0.62) 44%, transparent 49%);
  -webkit-mask: radial-gradient(circle, transparent 0 23%, #000 28% 48%, transparent 58%);
          mask: radial-gradient(circle, transparent 0 23%, #000 28% 48%, transparent 58%);
  animation: astral-dominion-crown 3.6s ease-in-out infinite;
}
.premium-astral-dominion .premium-intrusion {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.42) 0 5%, rgba(255,230,109,0.36) 8%, transparent 22%),
    radial-gradient(circle at 34% 34%, rgba(125,247,255,0.54) 0 3%, transparent 10%),
    radial-gradient(circle at 66% 36%, rgba(216,132,255,0.48) 0 3%, transparent 10%),
    radial-gradient(circle at 50% 72%, rgba(255,230,109,0.44) 0 3%, transparent 10%),
    conic-gradient(from 20deg, transparent 0 40deg, rgba(255,230,109,0.36) 54deg, transparent 70deg, transparent 128deg, rgba(125,247,255,0.32) 144deg, transparent 164deg, transparent 238deg, rgba(216,132,255,0.32) 254deg, transparent 278deg);
  -webkit-mask: radial-gradient(circle, #000 0 34%, transparent 47%);
          mask: radial-gradient(circle, #000 0 34%, transparent 47%);
  animation: astral-dominion-bloom 8s ease-in-out infinite;
}
.premium-astral-dominion .premium-strike {
  background:
    linear-gradient(90deg, transparent 0 22%, rgba(125,247,255,0.0) 30%, rgba(125,247,255,0.76) 45%, rgba(255,255,255,0.82) 50%, rgba(255,230,109,0.7) 56%, transparent 72%),
    linear-gradient(0deg, transparent 0 24%, rgba(216,132,255,0.0) 32%, rgba(216,132,255,0.56) 48%, transparent 66%);
  -webkit-mask: radial-gradient(circle, transparent 0 22%, #000 28% 46%, transparent 58%);
          mask: radial-gradient(circle, transparent 0 22%, #000 28% 46%, transparent 58%);
  animation: astral-dominion-crossflare 8s ease-in-out infinite;
}

.premium-time .premium-shell {
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.78) 0 2deg, transparent 3deg 15deg),
    radial-gradient(circle, transparent 0 47%, color-mix(in srgb, var(--fx-a) 74%, transparent) 49% 51%, transparent 53% 61%, var(--fx-b) 63% 65%, transparent 67%);
  -webkit-mask: radial-gradient(circle, transparent 0 39%, #000 43% 68%, transparent 76%);
          mask: radial-gradient(circle, transparent 0 39%, #000 43% 68%, transparent 76%);
}

.premium-time .premium-intrusion {
  background:
    repeating-conic-gradient(from 0deg, transparent 0 14deg, color-mix(in srgb, var(--fx-a) 54%, transparent) 15deg 17deg, transparent 18deg 30deg),
    linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.86) 49% 52%, transparent 53%),
    linear-gradient(18deg, transparent 0 48%, var(--fx-b) 49% 52%, transparent 53%),
    radial-gradient(circle, transparent 0 14%, color-mix(in srgb, var(--fx-c) 48%, transparent) 16% 18%, transparent 20% 58%, var(--fx-a) 60% 62%, transparent 64%);
}

.premium-prism .premium-shell {
  inset: -8px -14px;
  background:
    linear-gradient(104deg, transparent 0 18%, rgba(255,84,216,0.75) 30%, rgba(255,226,82,0.7) 43%, rgba(82,230,255,0.76) 56%, transparent 70%),
    linear-gradient(74deg, transparent 0 46%, rgba(255,255,255,0.84) 50%, transparent 55%);
  -webkit-mask: linear-gradient(104deg, transparent 0 15%, #000 28% 68%, transparent 82%);
          mask: linear-gradient(104deg, transparent 0 15%, #000 28% 68%, transparent 82%);
  filter: saturate(1.5) drop-shadow(0 0 11px #52e6ff);
  animation: prism-sweep 3.1s ease-in-out infinite;
}

.premium-prism .premium-rim-a,
.premium-prism .premium-rim-b,
.premium-prism .premium-wisp {
  -webkit-mask: linear-gradient(104deg, transparent 0 20%, #000 32% 62%, transparent 76%);
          mask: linear-gradient(104deg, transparent 0 20%, #000 32% 62%, transparent 76%);
}

.premium-magic-mists .premium-shell {
  inset: -13px;
  background:
    radial-gradient(ellipse at 18% 62%, color-mix(in srgb, var(--fx-c) 68%, transparent), transparent 27%),
    radial-gradient(ellipse at 84% 32%, color-mix(in srgb, var(--fx-a) 72%, transparent), transparent 29%),
    radial-gradient(ellipse at 50% 5%, rgba(255,255,255,0.72), transparent 17%),
    conic-gradient(from 226deg, transparent 0 18deg, var(--fx-b) 36deg, transparent 82deg, transparent 142deg, var(--fx-a) 170deg, transparent 216deg, transparent 270deg, var(--fx-c) 300deg, transparent 342deg);
  -webkit-mask:
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, #000 56% 73%, transparent 84%),
    radial-gradient(ellipse at 18% 62%, #000 0 28%, transparent 45%),
    radial-gradient(ellipse at 84% 32%, #000 0 24%, transparent 42%);
          mask:
    radial-gradient(ellipse at 50% 50%, transparent 0 48%, #000 56% 73%, transparent 84%),
    radial-gradient(ellipse at 18% 62%, #000 0 28%, transparent 45%),
    radial-gradient(ellipse at 84% 32%, #000 0 24%, transparent 42%);
  filter: blur(0.5px) saturate(1.26) drop-shadow(0 0 12px var(--fx-b));
  animation: mist-bloom 6.4s ease-in-out infinite;
}

.premium-magic-mists .premium-rim-a,
.premium-magic-mists .premium-rim-b,
.premium-magic-mists .premium-wisp,
.premium-magic-mists .premium-motif-mist {
  -webkit-mask:
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, #000 54% 72%, transparent 86%),
    radial-gradient(ellipse at 17% 66%, #000 0 26%, transparent 43%),
    radial-gradient(ellipse at 82% 30%, #000 0 26%, transparent 43%);
          mask:
    radial-gradient(ellipse at 50% 50%, transparent 0 47%, #000 54% 72%, transparent 86%),
    radial-gradient(ellipse at 17% 66%, #000 0 26%, transparent 43%),
    radial-gradient(ellipse at 82% 30%, #000 0 26%, transparent 43%);
}

.premium-magic-mists .premium-intrusion {
  background:
    radial-gradient(ellipse at 25% 48%, color-mix(in srgb, var(--fx-b) 58%, transparent), transparent 24%),
    radial-gradient(ellipse at 73% 45%, color-mix(in srgb, var(--fx-a) 56%, transparent), transparent 26%),
    radial-gradient(ellipse at 48% 68%, color-mix(in srgb, var(--fx-c) 44%, transparent), transparent 25%),
    conic-gradient(from 38deg, transparent 0 50deg, color-mix(in srgb, var(--fx-c) 34%, transparent) 82deg, transparent 126deg, transparent 184deg, color-mix(in srgb, var(--fx-b) 34%, transparent) 216deg, transparent 260deg);
}

@keyframes pristine-spin { to { transform: rotate(360deg); } }
@keyframes pristine-breathe {
  0%,100% { opacity: 0.82; filter: brightness(1) saturate(1.12); }
  50% { opacity: 1; filter: brightness(1.22) saturate(1.35); }
}
@keyframes pristine-glass {
  0%,100% { transform: rotate(-8deg) scale(0.98); opacity: 0.56; }
  50% { transform: rotate(10deg) scale(1.05); opacity: 0.86; }
}
@keyframes pristine-warp {
  0%,100% { transform: rotate(0deg) scale(0.98); opacity: 0.64; }
  45% { transform: rotate(-18deg) scale(1.08); opacity: 1; }
  72% { transform: rotate(12deg) scale(1.02); opacity: 0.76; }
}
@keyframes pristine-wisp-a {
  0%,100% { transform: rotate(0deg) scale(0.95); opacity: 0.46; }
  50% { transform: rotate(24deg) scale(1.1); opacity: 0.9; }
}
@keyframes pristine-wisp-b {
  0%,100% { transform: rotate(0deg) scale(1.02); opacity: 0.4; }
  55% { transform: rotate(-32deg) scale(1.12); opacity: 0.86; }
}
@keyframes pristine-sparks {
  0%,100% { opacity: 0.22; transform: rotate(0deg); }
  50% { opacity: 0.9; transform: rotate(18deg); }
}
@keyframes pristine-motif-slow { to { transform: rotate(360deg); } }
@keyframes pristine-motif-fast { to { transform: rotate(-360deg); } }
@keyframes pristine-crown {
  0%,100% { transform: translateY(0) scale(0.96); opacity: 0.58; }
  50% { transform: translateY(-3px) scale(1.08); opacity: 1; }
}
@keyframes pristine-rift {
  0%,100% { transform: rotate(0deg) scale(1); opacity: 0.62; }
  50% { transform: rotate(180deg) scale(1.08); opacity: 1; }
}
@keyframes pristine-flare {
  0%,100% { transform: scale(0.96); opacity: 0.56; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes pristine-sparkle {
  0%,100% { transform: rotate(0deg) scale(0.96); opacity: 0.34; }
  50% { transform: rotate(20deg) scale(1.08); opacity: 1; }
}
@keyframes pristine-wave {
  0%,100% { transform: rotate(0deg) scale(0.96); opacity: 0.48; }
  50% { transform: rotate(-18deg) scale(1.1); opacity: 0.92; }
}
@keyframes pristine-shine-sweep {
  0%,100% { transform: rotate(-20deg) translateX(-4px); opacity: 0.24; }
  45% { transform: rotate(16deg) translateX(4px); opacity: 0.92; }
}
@keyframes pristine-crystal {
  0%,100% { transform: rotate(0deg) scale(0.98); opacity: 0.56; }
  50% { transform: rotate(45deg) scale(1.08); opacity: 0.96; }
}
@keyframes pristine-float {
  0%,100% { transform: rotate(0deg) translateY(0); opacity: 0.54; }
  50% { transform: rotate(180deg) translateY(-3px); opacity: 0.96; }
}
@keyframes mythical-intrude {
  0%, 58%, 100% { opacity: 0; transform: scale(0.9) rotate(0deg); }
  64%, 82% { opacity: 0.5; transform: scale(1.04) rotate(12deg); }
}
@keyframes mythical-strike-soft {
  0%, 63%, 100% { opacity: 0; transform: scale(0.9); }
  70%, 78% { opacity: 0.36; transform: scale(1.08); }
}
@keyframes mythical-flame-intrude {
  0%, 58%, 100% { opacity: 0; transform: translateY(10px) scale(0.82); }
  66%, 82% { opacity: 0.62; transform: translateY(-2px) scale(1.08); }
}
@keyframes mythical-celestial-intrude {
  0%, 58%, 100% { opacity: 0; transform: translateY(-8px) scale(0.86); }
  66%, 82% { opacity: 0.52; transform: translateY(1px) scale(1.08); }
}
@keyframes mythical-blade-strike {
  0%, 64%, 100% { opacity: 0; transform: translate(-12px, 10px) rotate(-6deg) scale(0.92); }
  70% { opacity: 0.85; transform: translate(0, 0) rotate(0deg) scale(1.08); }
  78% { opacity: 0.2; transform: translate(9px, -8px) rotate(4deg) scale(1); }
}
@keyframes mythical-time-intrude {
  0%, 56%, 100% { opacity: 0; transform: rotate(0deg) scale(0.82); }
  66%, 82% { opacity: 0.5; transform: rotate(160deg) scale(1.04); }
}
@keyframes mythical-gravity-intrude {
  0%, 58%, 100% { opacity: 0; transform: scale(1.18) rotate(0deg); }
  66%, 82% { opacity: 0.55; transform: scale(0.9) rotate(180deg); }
}
@keyframes mythical-singularity-intrude {
  0%, 58%, 100% { opacity: 0; transform: scale(0.76) rotate(0deg); }
  66%, 82% { opacity: 0.58; transform: scale(1.08) rotate(220deg); }
}
@keyframes mythical-storm-build {
  0%, 54%, 100% { opacity: 0; transform: scale(0.84) rotate(0deg); }
  62% { opacity: 0.18; transform: scale(0.95) rotate(80deg); }
  70%, 80% { opacity: 0.58; transform: scale(1.05) rotate(190deg); }
}
@keyframes mythical-lightning-strike {
  0%, 66%, 73%, 100% { opacity: 0; transform: scale(0.92) rotate(0deg); }
  69% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  71% { opacity: 0.38; transform: scale(1) rotate(2deg); }
}
@keyframes mythical-prism-intrude {
  0%, 58%, 100% { opacity: 0; transform: translateX(-8px) rotate(-18deg) scale(0.92); }
  66%, 82% { opacity: 0.54; transform: translateX(4px) rotate(8deg) scale(1.08); }
}
@keyframes mythical-mist-intrude {
  0%, 58%, 100% { opacity: 0; transform: rotate(0deg) scale(0.92); }
  66%, 82% { opacity: 0.46; transform: rotate(-18deg) scale(1.1); }
}
@keyframes blade-sheath {
  0%,100% { opacity: 0.62; transform: translate(-1px, 1px) rotate(0deg) scale(0.98); }
  48% { opacity: 1; transform: translate(2px, -2px) rotate(3deg) scale(1.05); }
}
@keyframes storm-charge {
  0%,100% { opacity: 0.48; transform: scale(0.96) rotate(-2deg); filter: drop-shadow(0 0 6px var(--fx-a)); }
  45% { opacity: 0.72; transform: scale(1.02) rotate(1deg); filter: drop-shadow(0 0 10px var(--fx-a)); }
  64% { opacity: 1; transform: scale(1.08) rotate(-1deg); filter: drop-shadow(0 0 18px rgba(255,255,255,0.78)); }
}
@keyframes storm-static {
  0%,100% { opacity: 0.32; transform: translate(0, 0); }
  35% { opacity: 0.82; transform: translate(1px, -1px); }
  66% { opacity: 0.48; transform: translate(-1px, 1px); }
}
@keyframes wing-pulse {
  0%,100% { opacity: 0.62; transform: translateY(0) scaleX(0.98); }
  50% { opacity: 1; transform: translateY(-2px) scaleX(1.08); }
}
@keyframes flame-tongues {
  0%,100% { opacity: 0.68; transform: translateY(2px) scaleY(0.94); filter: drop-shadow(0 0 8px var(--fx-b)); }
  45% { opacity: 1; transform: translateY(-3px) scaleY(1.08); filter: drop-shadow(0 0 14px var(--fx-a)); }
}
@keyframes gravity-orbit {
  0% { opacity: 0.8; transform: rotate(0deg) scaleX(1.08); }
  50% { opacity: 1; transform: rotate(180deg) scaleX(1.16); }
  100% { opacity: 0.8; transform: rotate(360deg) scaleX(1.08); }
}
@keyframes singularity-vortex {
  0% { opacity: 0.82; transform: rotate(0deg) scale(0.98); }
  50% { opacity: 1; transform: rotate(180deg) scale(1.05); }
  100% { opacity: 0.82; transform: rotate(360deg) scale(0.98); }
}
@keyframes astral-dominion-orbit {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}
@keyframes astral-dominion-breathe {
  0%,100% { opacity: 0.78; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.18); }
}
@keyframes astral-dominion-ribbon {
  0%,100% { transform: rotate(-10deg) scale(0.96); opacity: 0.62; }
  46% { transform: rotate(14deg) scale(1.08); opacity: 0.94; }
}
@keyframes astral-dominion-glyphs {
  from { transform: rotate(0deg); opacity: 0.8; }
  to { transform: rotate(360deg); opacity: 0.8; }
}
@keyframes astral-dominion-tilt {
  0%,100% { transform: rotateX(0deg) rotateZ(-7deg); opacity: 0.56; }
  50% { transform: rotateX(0deg) rotateZ(8deg); opacity: 0.9; }
}
@keyframes astral-dominion-spark-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes astral-dominion-crown {
  0%,100% { transform: translateY(0) scale(0.94); opacity: 0.7; }
  50% { transform: translateY(-2px) scale(1.04); opacity: 1; }
}
@keyframes astral-dominion-bloom {
  0%,22%,64%,100% { opacity: 0; transform: scale(0.54) rotate(0deg); }
  32%,52% { opacity: 0.74; transform: scale(1.02) rotate(22deg); }
}
@keyframes astral-dominion-crossflare {
  0%,26%,58%,100% { opacity: 0; transform: scale(0.72) rotate(0deg); }
  34%,48% { opacity: 0.82; transform: scale(1.08) rotate(6deg); }
}
@keyframes prism-sweep {
  0%,100% { opacity: 0.62; transform: translateX(-3px) rotate(-4deg); }
  48% { opacity: 1; transform: translateX(4px) rotate(3deg); }
}
@keyframes mist-bloom {
  0%,100% { opacity: 0.62; transform: rotate(0deg) scale(0.96); }
  38% { opacity: 0.92; transform: rotate(-10deg) scale(1.05); }
  70% { opacity: 0.78; transform: rotate(8deg) scale(1.02); }
}

/* Center-heavy mythical layers should surge briefly, then reveal the avatar again. */
.premium-blade .premium-shell,
.premium-storm .premium-shell,
.premium-cosmic .premium-shell,
.premium-wings .premium-shell,
.premium-dragon .premium-shell,
.premium-flame .premium-shell,
.premium-gravity .premium-shell,
.premium-singularity .premium-shell,
.premium-prism .premium-shell,
.premium-magic-mists .premium-shell {
  animation: mythical-cover-window 5s ease-in-out infinite !important;
}

.premium-blade .premium-strike,
.premium-storm .premium-strike,
.premium-prism .premium-intrusion,
.premium-gravity .premium-intrusion,
.premium-singularity .premium-intrusion,
.premium-magic-mists .premium-intrusion {
  animation-duration: 5s;
}

@keyframes mythical-cover-window {
  0%, 2% { opacity: 0.14; }
  8%, 40% { opacity: 0.88; }
  46%, 100% { opacity: 0.14; }
}

/* Keep premium pieces centered around the avatar instead of growing into a full tile. */
.avatar-wrap .premium-deco {
  inset: -6px;
  transform-origin: center;
}

.avatar-wrap .premium-deco .premium-wisp {
  inset: -8px;
}

/* Zero Gravity is an orbital field, never a disc over the avatar. */
.premium-gravity .premium-shell {
  inset: -5px;
  background:
    radial-gradient(circle at 50% 5%, rgba(255,255,255,0.92) 0 1px, transparent 3px),
    radial-gradient(circle at 88% 50%, var(--fx-a) 0 2px, transparent 4px),
    radial-gradient(circle at 28% 90%, var(--fx-b) 0 2px, transparent 4px),
    radial-gradient(circle at 12% 36%, var(--fx-c) 0 1.5px, transparent 4px),
    conic-gradient(from 18deg, transparent 0 56deg, color-mix(in srgb, var(--fx-a) 74%, transparent) 64deg 70deg, transparent 78deg 186deg, color-mix(in srgb, var(--fx-b) 68%, transparent) 194deg 201deg, transparent 209deg 292deg, color-mix(in srgb, var(--fx-c) 68%, transparent) 300deg 307deg, transparent 315deg);
  -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 50% 54%, transparent 58%);
          mask: radial-gradient(circle, transparent 0 47%, #000 50% 54%, transparent 58%);
  filter: drop-shadow(0 0 7px var(--fx-a));
}

.premium-gravity .premium-intrusion {
  -webkit-mask: radial-gradient(circle, transparent 0 36%, #000 43% 51%, transparent 58%);
          mask: radial-gradient(circle, transparent 0 36%, #000 43% 51%, transparent 58%);
  animation: mythical-cover-window 5s ease-in-out infinite !important;
}

/* Prism Overdrive is a tight prismatic sweep, not a square overlay. */
.premium-prism .premium-shell {
  inset: -5px;
  background: conic-gradient(from 18deg, transparent 0 38deg, #ff54d8 48deg, #ffe252 57deg, transparent 70deg 145deg, #52e6ff 156deg, #8a5cff 166deg, transparent 180deg 270deg, #52ff98 280deg, #ff54d8 290deg, transparent 305deg);
  -webkit-mask: radial-gradient(circle, transparent 0 51%, #000 55% 63%, transparent 68%);
          mask: radial-gradient(circle, transparent 0 51%, #000 55% 63%, transparent 68%);
  filter: saturate(1.35) drop-shadow(0 0 7px #52e6ff);
}

.premium-prism .premium-intrusion {
  -webkit-mask: radial-gradient(circle, transparent 0 28%, #000 39% 56%, transparent 65%);
          mask: radial-gradient(circle, transparent 0 28%, #000 39% 56%, transparent 65%);
  animation: mythical-cover-window 5s ease-in-out infinite !important;
}

/* Phantom Blade uses a precise spectral slash and guard, with no foggy orb layers. */
.premium-blade .premium-glass,
.premium-blade .premium-rim-b,
.premium-blade .premium-wisp-a,
.premium-blade .premium-wisp-b {
  display: none;
}

.premium-blade .premium-shell {
  inset: -2px 3px;
  background:
    linear-gradient(132deg, transparent 0 41%, color-mix(in srgb, var(--fx-b) 42%, transparent) 44%, rgba(255,255,255,0.98) 47%, var(--fx-a) 50%, color-mix(in srgb, var(--fx-c) 72%, transparent) 53%, transparent 56%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.5), transparent 13%);
  -webkit-mask: linear-gradient(132deg, transparent 0 31%, #000 43% 57%, transparent 69%);
          mask: linear-gradient(132deg, transparent 0 31%, #000 43% 57%, transparent 69%);
  filter: drop-shadow(0 0 7px var(--fx-a));
}

.premium-blade .premium-rim-a,
.premium-blade .premium-motif-blade {
  inset: -1px 5px;
  background: linear-gradient(132deg, transparent 0 44%, rgba(255,255,255,0.9) 48%, var(--fx-c) 50%, transparent 53%);
  -webkit-mask: linear-gradient(132deg, transparent 0 36%, #000 46% 54%, transparent 64%);
          mask: linear-gradient(132deg, transparent 0 36%, #000 46% 54%, transparent 64%);
  filter: drop-shadow(0 0 6px var(--fx-c));
}

.premium-blade .premium-strike {
  inset: 5px;
  -webkit-mask: linear-gradient(132deg, transparent 0 36%, #000 46% 54%, transparent 64%);
          mask: linear-gradient(132deg, transparent 0 36%, #000 46% 54%, transparent 64%);
}

/* Hard safety boundary: premium effects may extend slightly beyond an avatar, never into the layout. */
.avatar-wrap .premium-deco {
  overflow: hidden;
  clip-path: circle(60% at 50% 50%);
}

.premium-magic-mists .premium-shell,
.premium-magic-mists .premium-rim-a,
.premium-magic-mists .premium-rim-b,
.premium-magic-mists .premium-wisp,
.premium-magic-mists .premium-motif-mist {
  inset: -3px;
}

.premium-magic-mists .premium-intrusion {
  inset: 7px;
  filter: blur(1px) saturate(1.1) drop-shadow(0 0 5px var(--fx-b));
}

/* Pack thumbnails are much smaller than real avatars, so keep premium FX contained. */
.shop-pack-mini .premium-deco {
  inset: -4px;
  border-radius: 50%;
  overflow: hidden;
  clip-path: circle(58% at 50% 50%);
  filter: saturate(1.05) brightness(0.96);
}

.shop-pack-mini .premium-deco span {
  inset: 0 !important;
}

.shop-pack-mini .premium-shell,
.shop-pack-mini .premium-rim,
.shop-pack-mini .premium-wisp,
.shop-pack-mini .premium-motif,
.shop-pack-mini .premium-sparks,
.shop-pack-mini .premium-glass {
  transform-origin: center;
}

.shop-pack-mini .premium-wisp {
  filter: blur(0.9px) saturate(1.05);
}

.shop-pack-mini .premium-rim-b,
.shop-pack-mini .premium-wisp-b,
.shop-pack-mini .premium-glass {
  opacity: 0.42;
}

.shop-pack-mini .premium-mythical .premium-intrusion,
.shop-pack-mini .premium-mythical .premium-strike {
  display: none;
}

.shop-pack-mini .premium-blade .premium-shell,
.shop-pack-mini .premium-storm .premium-shell,
.shop-pack-mini .premium-prism .premium-shell,
.shop-pack-mini .premium-cosmic .premium-shell,
.shop-pack-mini .premium-wings .premium-shell,
.shop-pack-mini .premium-dragon .premium-shell,
.shop-pack-mini .premium-flame .premium-shell,
.shop-pack-mini .premium-magic-mists .premium-shell {
  inset: 0 !important;
  transform: scale(0.88);
}

.shop-pack-mini .premium-gravity .premium-shell,
.shop-pack-mini .premium-singularity .premium-shell,
.shop-pack-mini .premium-time .premium-shell {
  transform: scale(0.92);
}

/* ===== MESSAGE TEXT COLORS ===== */
.msg-color-red    { color: #ff4444 !important; }
.msg-color-orange { color: #ff8c00 !important; }
.msg-color-yellow { color: #ffd700 !important; }
.msg-color-green  { color: #3dd68c !important; }
.msg-color-cyan   { color: #00ccff !important; }
.msg-color-blue   { color: #5b6ef5 !important; }
.msg-color-purple { color: #8b3cf7 !important; }
.msg-color-pink   { color: #ff2d8e !important; }
.msg-color-white  { color: #f0f0f0 !important; }
.msg-color-gold   { color: #f5c842 !important; }

.msg-color-rainbow {
  background: linear-gradient(90deg,#ff4444,#ff8c00,#ffd700,#3dd68c,#00ccff,#5b6ef5,#ff2d8e);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-flow 3s linear infinite;
}
@keyframes rainbow-flow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

.msg-color-fire {
  background: linear-gradient(90deg,#ff1a00,#ff6600,#ffcc00,#ff6600,#ff1a00);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-flow 2s linear infinite;
}

.msg-color-galaxy {
  background: linear-gradient(90deg,#5b6ef5,#8b3cf7,#ff2d8e,#f5c842,#3dd68c,#5b6ef5);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-flow 4s linear infinite;
}

/* ===== COLOR SHOP ===== */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 16px 20px 40px;
}
.color-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 12px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: var(--transition);
  position: relative;
}
.color-card:hover { border-color: var(--border-bright); transform: translateY(-1px); }
.color-card.owned { border-color: rgba(91,110,245,0.4); }
.color-card.equipped { border-color: var(--green); box-shadow: 0 0 12px rgba(61,214,140,0.2); }
.color-preview-text {
  font-size: 15px; font-weight: 800;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px 0;
  width: 100%;
}
.color-card-name { font-size: 12px; font-weight: 700; }
.color-card-price { font-size: 11px; color: #ffd700; font-weight: 700; }
.color-card-btn {
  width: 100%; padding: 6px;
  border-radius: var(--radius-sm);
  font-family: 'Syne', sans-serif; font-size: 11px; font-weight: 700;
  cursor: pointer; border: none; transition: var(--transition);
}
.color-card-btn.buy    { background: linear-gradient(135deg,rgba(255,200,50,0.2),rgba(180,80,255,0.15)); color:#ffd700; border:1px solid rgba(255,200,50,0.3); }
.color-card-btn.equip  { background: var(--accent); color:#fff; }
.color-card-btn.unequip{ background: rgba(61,214,140,0.15); color: var(--green); }
.color-card-btn.locked { background: var(--bg-hover); color: var(--text-muted); cursor:default; }

/* ===== BUBBLE FONT ===== */
.msg-font-bubble {
  font-family: 'DynaPuff', cursive !important;
  font-size: 0.8em;
  letter-spacing: 0.5px;
}

.msg-font-pixel {
  font-family: 'VT323', cursive !important;
  font-size: 1em;
  letter-spacing: 0.5px;
}

.msg-font-vt323 {
  font-family: 'VT323', cursive !important;
  font-size: 1em;
  letter-spacing: 0.5px;
}

/* Font shop cards */
.font-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: var(--transition);
}
.font-card:hover { border-color: var(--border-bright); }
.font-card.owned { border-color: rgba(91,110,245,0.4); }
.font-card.equipped { border-color: var(--green); box-shadow: 0 0 12px rgba(61,214,140,0.2); }
.font-preview-text {
  font-family: 'DynaPuff', cursive;
  font-size: 20px;
  color: var(--text-primary);
  padding: 4px 0;
}

.font-preview-text2 {
  font-family: 'VT323', cursive;
  font-size: 28px;
  color: var(--text-primary);
  padding: 4px 0;
}

/* ===== AUCTION / ECONOMY ===== */
.profile-hover-target { cursor: pointer; }
.auction-content {
  padding: 20px;
}
.auction-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auction-panel,
.economy-header-card,
.economy-create {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.auction-sell-row,
.economy-create {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px auto;
  gap: 10px;
  align-items: center;
}
.auction-sell-row select,
.auction-sell-row input,
.economy-create input,
.economy-create select,
.call-token-panel input,
.blackjack-buyin-panel input {
  background: var(--bg-void);
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font: inherit;
}
.economy-create { grid-template-columns:repeat(2,minmax(0,1fr)); }
.economy-create .btn-primary { grid-column:1 / -1; }
.economy-role-reward {
  display:inline-flex!important;
  width:max-content;
  max-width:100%;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--reward-role) 58%,transparent);
  border-radius:4px;
  color:var(--reward-role)!important;
  background:color-mix(in srgb,var(--reward-role) 12%,transparent);
  font-size:10px!important;
  font-weight:800;
}
.server-economy-modal { max-width:860px; }
.server-economy-modal .modal-body { max-height:min(72vh,680px);overflow-y:auto; }
.auction-grid,
.economy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.auction-card,
.economy-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auction-preview {
  width: 72px;
  height: 72px;
  margin: 2px auto 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  contain: layout;
}
.auction-preview .avatar {
  width: 56px !important;
  height: 56px !important;
  font-size: 20px !important;
  flex-shrink: 0;
}
.auction-preview .premium-deco {
  inset: 1px;
}
.auction-preview .storm-canvas {
  inset: 0;
}
.auction-card h3,
.economy-card h3 {
  margin: 0;
  font-size: 16px;
}
.auction-card p,
.economy-card p,
.auction-seller {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.economy-header-card {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.economy-card.disabled {
  opacity: 0.6;
}
@media(max-width:620px) {
  .economy-create { grid-template-columns:1fr; }
  .economy-create .btn-primary { grid-column:auto; }
  .economy-header-card { align-items:flex-start;flex-direction:column; }
}
.call-token-panel {
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(10, 15, 30, 0.55);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 10px;
}
.call-token-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}
.call-token-panel span {
  grid-column: 1 / -1;
  color: var(--accent-yellow);
  font-size: 12px;
  font-weight: 800;
}
.blackjack-buyin-panel {
  margin: 0 20px 16px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.blackjack-buyin-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.blackjack-buyin-panel span {
  color: var(--text-secondary);
  font-size: 12px;
}
.blackjack-setup-panel > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 220px;
}
.blackjack-setup-panel > div b {
  color: var(--text-primary);
  font-size: 16px;
}
.blackjack-setup-panel .btn-primary {
  margin-left: auto;
}
@media (max-width: 640px) {
  .call-token-panel {
    grid-template-columns: 1fr;
  }
  .blackjack-setup-panel .btn-primary {
    width: 100%;
    margin-left: 0;
  }
}

/* UNO call activity */
.call-games-modal{width:min(1180px,calc(100vw - 28px));max-width:1180px;max-height:calc(100vh - 34px)}
.call-games-modal .modal-body{max-height:calc(100vh - 104px);overflow:auto}.game-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.game-choice.uno-choice{border-color:#d7b83e;background:#19170f}
.call-uno-table{width:100%;border:1px solid #444a56;border-radius:6px;overflow:hidden;background:#101216}.uno-table-bar{min-height:58px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#171a20;border-bottom:1px solid #343943}.uno-table-bar>div{display:flex;align-items:center;gap:10px}.uno-table-bar small,.uno-table-bar>span{color:#9da4b1;font-size:11px}
.uno-logo{display:grid;place-items:center;width:47px;height:29px;transform:skew(-12deg);border:2px solid #ffd83d;border-radius:50%;background:#d92727;color:#fff;text-shadow:1px 1px #111;font:900 12px/1 Arial,sans-serif}
.uno-felt{position:relative;min-height:610px;padding:24px;overflow:hidden;background:#123a2f;box-shadow:inset 0 0 70px rgba(0,0,0,.65),inset 0 0 0 8px rgba(0,0,0,.22)}.uno-felt::before{content:"";position:absolute;inset:22% 27%;border:1px solid rgba(255,255,255,.09);border-radius:50%;pointer-events:none}
.uno-current-red{border-top:3px solid #e53838}.uno-current-yellow{border-top:3px solid #f3cf3e}.uno-current-green{border-top:3px solid #28a85e}.uno-current-blue{border-top:3px solid #2e78d2}
.uno-opponents{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.uno-seat{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:5px;background:rgba(6,16,14,.48)}.uno-seat.turn{border-color:#f8dd65;box-shadow:0 0 0 2px rgba(248,221,101,.16)}.uno-seat.me{grid-column:1/-1;margin-top:150px;background:rgba(6,16,14,.72)}
.uno-seat-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:9px;color:#fff;font-size:12px}.uno-seat-head span{color:#c7d7d0;font-size:10px}.uno-hand{display:flex;justify-content:center;min-height:94px;overflow-x:auto;overflow-y:hidden;padding:4px 10px 12px}.uno-hand .uno-card+.uno-card{margin-left:-24px}.uno-hand .uno-card.playable:hover{z-index:15;transform:translateY(-10px)}
.uno-card{position:relative;flex:0 0 68px;width:68px;height:96px;padding:0;overflow:hidden;border:4px solid #f8f5eb;border-radius:8px;color:#fff;box-shadow:0 5px 12px rgba(0,0,0,.4);font-family:Arial,sans-serif;transition:transform .16s ease}.uno-card:disabled{opacity:1;cursor:default}.uno-card.playable{cursor:pointer;outline:2px solid #f8dd65;outline-offset:2px}
.uno-red{background:#d93434}.uno-yellow{background:#e5b91d;color:#191919}.uno-green{background:#249b55}.uno-blue{background:#2874c6}.uno-wild{background:conic-gradient(#d93434 0 25%,#2874c6 0 50%,#249b55 0 75%,#e5b91d 0)}
.uno-oval{position:absolute;left:13px;top:9px;width:34px;height:69px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:inherit;transform:rotate(28deg);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}.uno-oval b{transform:rotate(-28deg);color:inherit;text-shadow:0 1px 1px rgba(0,0,0,.24);font-size:27px}.uno-wild .uno-oval b{color:#16191e}
.uno-corner{position:absolute;z-index:2;font-size:12px;font-weight:900;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.35)}.uno-corner.top{left:4px;top:4px}.uno-corner.bottom{right:4px;bottom:4px;transform:rotate(180deg)}
.uno-card-back{display:inline-grid;place-items:center;border-color:#f7f1dc;background:#16191f;box-shadow:inset 0 0 0 4px #d52d2d,0 5px 12px rgba(0,0,0,.4)}.uno-card-back i{display:grid;place-items:center;width:47px;height:67px;border-radius:50%;background:#d52d2d;color:#ffd83d;transform:rotate(-18deg);font:900 24px/1 Arial,sans-serif}
.uno-center{position:absolute;z-index:3;left:50%;top:49%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}.uno-pile{display:flex;gap:24px;align-items:end}.uno-pile>div{display:flex;flex-direction:column;align-items:center}.uno-pile-label{margin-bottom:6px;color:#d8e7e1;font:800 9px/1 ui-monospace,monospace;letter-spacing:1px}.deck-card:not(:disabled){cursor:pointer;outline:2px solid #f8dd65;outline-offset:2px}
.uno-color-status{margin-top:10px;padding:6px 10px;border-radius:3px;background:rgba(0,0,0,.42);color:#d8e7e1;font-size:11px;text-transform:capitalize}.uno-color-status>span{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%}.uno-color-status .red,.uno-color.red{background:#d93434}.uno-color-status .yellow,.uno-color.yellow{background:#e5b91d}.uno-color-status .green,.uno-color.green{background:#249b55}.uno-color-status .blue,.uno-color.blue{background:#2874c6}
.uno-message{position:relative;z-index:3;width:max-content;max-width:90%;margin:12px auto 0;padding:7px 12px;border-radius:3px;background:rgba(0,0,0,.5);color:#fff;text-align:center;font-size:12px}.uno-actions{position:relative;z-index:4;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}.uno-waiting{color:#d8e7e1;font-size:12px}
.uno-color-picker{position:absolute;z-index:20;inset:0;display:grid;place-content:center;text-align:center;background:rgba(5,7,9,.82);backdrop-filter:blur(4px)}.uno-color-picker strong{margin-bottom:13px;color:#fff;font-size:17px}.uno-color-picker>div{display:flex;gap:10px;margin-bottom:14px}.uno-color{width:54px;height:54px;border:4px solid #fff;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.4)}
@media(max-width:760px){.game-picker{grid-template-columns:1fr}.uno-felt{min-height:650px;padding:14px}.uno-opponents{grid-template-columns:repeat(2,minmax(0,1fr))}.uno-seat.me{margin-top:155px}.uno-card{flex-basis:58px;width:58px;height:84px}.uno-oval{left:10px;top:8px;width:31px;height:60px}.uno-oval b{font-size:22px}.uno-hand .uno-card+.uno-card{margin-left:-20px}.uno-table-bar{padding:0 10px}.uno-table-bar>span{display:none}}
.uno-choice{position:relative}.uno-choice>b{position:absolute;left:14px;bottom:12px;color:#f3cf3e;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.uno-browser{padding:4px}.uno-browser-hero{min-height:220px;display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:24px;padding:28px;border:1px solid #403d29;border-radius:6px;background:#171711}.uno-browser-logo{display:grid;place-items:center;width:118px;height:76px;transform:skew(-12deg) rotate(-5deg);border:5px solid #ffd83d;border-radius:50%;background:#d92727;color:#fff;text-shadow:3px 3px #111;font:900 28px/1 Arial,sans-serif}.uno-browser-hero small{color:#f3cf3e;font-size:10px;font-weight:900;letter-spacing:1.5px}.uno-browser-hero h2{margin:4px 0;font-size:30px}.uno-browser-hero p{margin:0;color:var(--text-secondary)}.uno-browser-hero>.btn-primary{min-width:110px}
.uno-room-section{margin-top:18px}.uno-room-section>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--text-muted);font-size:10px;font-weight:900;letter-spacing:1.4px}.uno-refresh{width:31px;height:31px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface);color:var(--text-primary);font-size:16px}.uno-room-empty{padding:28px;border:1px dashed var(--border);border-radius:5px;color:var(--text-muted);text-align:center}.uno-room{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid #4b5134;border-radius:5px;background:#151811;color:var(--text-primary);text-align:left}.uno-room-mark{padding:4px 6px;border-radius:3px;background:#294220;color:#c7f464;font-size:9px;font-weight:900}.uno-room strong,.uno-room small{display:block}.uno-room small{margin-top:2px;color:var(--text-muted)}.uno-room>b{color:#f3cf3e}
.uno-lobby{padding:6px}.uno-lobby-banner{display:flex;align-items:center;gap:22px;padding:24px;border-bottom:1px solid var(--border)}.uno-lobby-banner .uno-browser-logo{width:88px;height:58px;font-size:20px}.uno-lobby-banner small{color:#c7f464;font-size:9px;font-weight:900;letter-spacing:1.2px}.uno-lobby-banner h2{margin:3px 0}.uno-lobby-banner p{margin:0;color:var(--text-muted)}.uno-lobby-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:20px}.uno-lobby-players>div{display:flex;justify-content:space-between;padding:12px;border:1px solid var(--border);border-radius:4px;background:var(--bg-surface)}.uno-lobby-players b{color:#c7f464;font-size:9px}.uno-lobby-status{text-align:center;color:var(--text-secondary);font-size:12px}
@media(max-width:680px){.uno-browser-hero{grid-template-columns:1fr;text-align:center}.uno-browser-logo{margin:auto}.uno-lobby-banner{align-items:flex-start}.uno-lobby-players{grid-template-columns:1fr}}

/* Connect Four call activity */
.game-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.connect4-choice{position:relative;border-color:#315fa9;background:#101a2c}.connect4-choice>b{position:absolute;left:14px;bottom:12px;color:#72a7ff;font-size:11px;text-transform:uppercase;letter-spacing:1px}
.connect4-browser{padding:4px}.connect4-browser-hero{min-height:220px;display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:25px;padding:28px;border:1px solid #29466f;border-radius:6px;background:#101722}.connect4-browser-hero small,.connect4-lobby-banner small{color:#72a7ff;font-size:10px;font-weight:900;letter-spacing:1.5px}.connect4-browser-hero h2{margin:4px 0;font-size:29px}.connect4-browser-hero p{margin:0;color:var(--text-secondary)}
.connect4-mini-board{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;width:128px;padding:10px;border-radius:7px;background:#2468c8;box-shadow:0 8px 0 #153e7b}.connect4-mini-board i{aspect-ratio:1;border-radius:50%;background:#0d1522;box-shadow:inset 0 3px 6px rgba(0,0,0,.7)}.connect4-mini-board i.red{background:#e74747}.connect4-mini-board i.yellow{background:#f3cd43}
.connect4-room{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid #294f84;border-radius:5px;background:#101827;color:var(--text-primary);text-align:left}.connect4-room-mark{padding:4px 6px;border-radius:3px;background:#183c6d;color:#83b4ff;font-size:9px;font-weight:900}.connect4-room strong,.connect4-room small{display:block}.connect4-room small{margin-top:2px;color:var(--text-muted)}.connect4-room>b{color:#72a7ff}
.connect4-lobby{padding:6px}.connect4-lobby-banner{display:flex;align-items:center;gap:22px;padding:24px;border-bottom:1px solid var(--border)}.connect4-lobby-banner .connect4-mini-board{width:92px;padding:7px;gap:3px;box-shadow:0 5px 0 #153e7b}.connect4-lobby-banner h2{margin:3px 0}.connect4-lobby-banner p{margin:0;color:var(--text-muted)}
.connect4-game{border:1px solid #3d4655;border-radius:6px;overflow:hidden;background:#0d1118}.connect4-game-head{min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#171d27;border-bottom:1px solid #313a49}.connect4-game-head>div{display:flex;align-items:baseline;gap:10px}.connect4-game-head small,.connect4-game-head>span{color:#9eabba;font-size:11px}.connect4-stage{min-height:650px;padding:22px;background:#111a29}.connect4-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:720px;margin:0 auto 20px}.connect4-player{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid #303b4b;border-radius:5px;background:#121923}.connect4-player.turn{border-color:#72a7ff;box-shadow:0 0 0 2px rgba(81,137,224,.16)}.connect4-player>span{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 4px 7px rgba(255,255,255,.25),0 3px 5px rgba(0,0,0,.4)}.connect4-player>span.red{background:#e74747}.connect4-player>span.yellow{background:#f3cd43}.connect4-player strong,.connect4-player small{display:block}.connect4-player small{color:var(--text-muted);font-size:10px}
.connect4-board-wrap{width:min(650px,94vw);margin:auto}.connect4-column-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;padding:0 15px 8px}.connect4-column-buttons button{height:32px;border:1px solid #37547d;border-radius:4px;background:#17253a;color:#72a7ff;font-size:14px}.connect4-column-buttons button:hover:not(:disabled){background:#203a5e;transform:translateY(2px)}.connect4-column-buttons button:disabled{opacity:.24;cursor:default}
.connect4-board{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);gap:8px;padding:15px;border-radius:11px;background:#2468c8;box-shadow:0 13px 0 #153e7b,0 20px 35px rgba(0,0,0,.38)}.connect4-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#09111e;box-shadow:inset 0 6px 10px rgba(0,0,0,.8),0 1px rgba(255,255,255,.18)}.connect4-cell i{width:86%;height:86%;border-radius:50%}.connect4-cell.red i{background:#e74747;box-shadow:inset 0 6px 9px rgba(255,255,255,.24),0 4px 8px rgba(0,0,0,.38)}.connect4-cell.yellow i{background:#f3cd43;box-shadow:inset 0 6px 9px rgba(255,255,255,.3),0 4px 8px rgba(0,0,0,.38)}.connect4-message{width:max-content;max-width:90%;margin:26px auto 0;padding:8px 13px;border-radius:4px;background:#0b111b;color:#dce8f8;text-align:center}
@media(max-width:680px){.game-picker{grid-template-columns:1fr}.connect4-browser-hero{grid-template-columns:1fr;text-align:center}.connect4-mini-board{margin:auto}.connect4-stage{min-height:560px;padding:14px 8px}.connect4-board{gap:5px;padding:9px}.connect4-column-buttons{gap:4px;padding-inline:9px}.connect4-players{gap:7px}.connect4-player{padding:8px}.connect4-player>span{width:21px;height:21px}}

/* Full-screen server administration and viewport-safe call activities */
#server-settings-modal { padding:0; background:var(--bg-void); backdrop-filter:none; }
.server-settings-full {
  position:relative;
  width:100vw;
  height:100dvh;
  max-width:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  grid-template-rows:64px minmax(0,1fr);
  background:var(--bg-void);
}
.server-settings-full>.modal-header {
  grid-column:1/-1;
  min-height:64px;
  padding:0 26px;
  background:var(--bg-base);
  z-index:2;
}
.server-settings-full>.settings-tabs {
  grid-column:1;
  grid-row:2;
  min-width:0;
  padding:22px 12px;
  border:0;
  border-right:1px solid var(--border);
  background:var(--bg-base);
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
}
.server-settings-full .settings-tab {
  width:100%;
  padding:12px 14px;
  border-radius:6px;
  text-align:left;
}
.server-settings-full>.modal-body {
  grid-column:2;
  grid-row:2;
  width:100%;
  max-width:none;
  min-width:0;
  padding:38px clamp(24px,5vw,72px) 70px;
  overflow-y:auto;
}
.server-settings-full .settings-tab-panel { width:min(900px,100%); margin:0 auto; }
.server-sidebar-header {
  min-height:92px;
  padding:11px 10px;
  gap:8px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
}
.server-sidebar-header>#server-sidebar-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-sidebar-header>div {
  width:100%;
  display:grid !important;
  grid-template-columns:repeat(4,30px);
  justify-content:start;
  gap:5px !important;
}

.call-games-modal {
  width:min(1180px,calc(100vw - 24px));
  height:min(900px,calc(100dvh - 24px));
  max-height:calc(100dvh - 24px);
  display:flex;
  flex-direction:column;
}
.call-games-modal>.modal-header { flex:0 0 auto; }
.call-games-modal>.modal-body {
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  overscroll-behavior:contain;
  padding-bottom:36px;
}
.connect4-stage { min-height:0; }
.connect4-board-wrap {
  width:min(460px,calc((100dvh - 430px) * 1.1667),100%);
  min-width:260px;
  padding-bottom:26px;
}
.connect4-board { gap:clamp(4px,1vh,8px); padding:clamp(8px,1.7vh,15px); }
.connect4-stage {
  padding-bottom:42px;
  overflow:visible;
}
.connect4-game { overflow:visible; }
@media(max-height:760px) {
  .connect4-board-wrap { width:min(390px,calc((100dvh - 360px) * 1.1667),100%); }
  .connect4-stage { padding-top:12px; }
  .connect4-players { margin-bottom:10px; }
}
.call-join-panel {
  display:grid;
  grid-template-columns:minmax(180px,1fr) 150px 150px auto;
  align-items:end;
  gap:12px;
  margin:16px 0;
  padding:16px;
  border:1px solid var(--border-bright);
  border-radius:6px;
  background:var(--bg-surface);
}
.call-join-panel>div span,.call-join-panel label { display:block; color:var(--text-secondary); font-size:11px; }
.call-join-panel>div strong { display:block; margin-bottom:4px; }
.call-join-panel input { width:100%; margin-top:5px; padding:9px; }
@media(max-width:720px) {
  .server-settings-full { grid-template-columns:1fr; grid-template-rows:58px auto minmax(0,1fr); }
  .server-settings-full>.modal-header { min-height:58px; }
  .server-settings-full>.settings-tabs { grid-column:1; grid-row:2; flex-direction:row; padding:8px; border-right:0; border-bottom:1px solid var(--border); overflow-x:auto; }
  .server-settings-full .settings-tab { width:auto; flex:0 0 auto; }
  .server-settings-full>.modal-body { grid-column:1; grid-row:3; padding:24px 16px 50px; }
  .call-games-modal { width:100vw; height:100dvh; max-height:none; border:0; border-radius:0; }
  .call-join-panel { grid-template-columns:1fr 1fr; }
  .call-join-panel>div,.call-join-panel>button { grid-column:1/-1; }
}

.activity-session-controls {
  position:sticky;
  top:0;
  z-index:30;
  min-height:58px;
  margin:-20px -20px 14px;
  padding:9px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--border-bright);
  background:rgba(14,19,29,.96);
  backdrop-filter:blur(10px);
}
.activity-session-controls>div:last-child { display:flex; gap:8px; }
.activity-session-controls strong,.activity-session-controls span { display:block; }
.activity-session-controls span { margin-top:2px; color:var(--text-muted); font-size:10px; }
.game-choice.open { position:relative; }
.game-choice.open>b { position:absolute; left:18px; bottom:16px; color:var(--accent); font-size:11px; }

.profile-avatar-upload { min-height:122px; }
.profile-avatar-clip {
  position:relative;
  width:116px;
  height:116px;
  flex:0 0 116px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
}
.profile-avatar-clip .avatar-preview { width:72px; height:72px; flex:none; }
.profile-avatar-host {
  position: relative;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}
.profile-avatar-host .avatar-preview {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
}
.profile-avatar-host .avatar-deco,
.profile-avatar-host .premium-deco,
.profile-avatar-host .storm-canvas,
.profile-avatar-host .stormveil-layer,
.profile-avatar-host .heheshuis-layer {
  transform-origin: 50% 50%;
}
#invite-friends-list .invite-friend-row {
  min-height: 54px;
}
.invite-avatar-viewport {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}
.invite-avatar-host {
  position: relative;
  width: 34px;
  height: 34px;
}
.invite-avatar-host .avatar {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.invite-avatar-host .avatar-deco,
.invite-avatar-host .premium-deco {
  inset: -5px;
}
.invite-avatar-host .premium-wisp {
  inset: -5px;
}
.paid-game-lobby { overflow:hidden; border:1px solid var(--border-bright); border-radius:7px; background:var(--bg-surface); }
.paid-game-lobby-head { display:flex; align-items:center; gap:14px; padding:22px; border-bottom:1px solid var(--border); background:linear-gradient(100deg,#152c44,#1b2546); }
.paid-game-lobby-head .blackjack-table-mark { width:42px; height:42px; }
.paid-game-lobby-head small { color:#93aac0; font-size:9px; font-weight:800; }
.paid-game-lobby-head h2 { margin:3px 0; font-size:20px; }
.paid-game-lobby-head p { margin:0; color:#aebbd0; font-size:11px; }
.paid-game-player-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:18px; }
.paid-game-player-list>div { display:flex; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--border); border-radius:5px; background:var(--bg-elevated); }
.paid-game-player-list b { color:var(--yellow); font-size:10px; text-align:right; }
.paid-game-lobby-actions { padding:0 18px 18px; }
.paid-game-lobby-actions>.call-join-panel { margin-top:12px; }
@media(max-width:620px) { .paid-game-player-list { grid-template-columns:1fr; } }
@media(max-width:520px) {
  .profile-avatar-upload { align-items:flex-start; }
  .profile-avatar-clip { width:104px; height:104px; flex-basis:104px; }
}

/* Discord-style server members rail and server icon menu */
#server-sidebar-name {
  display:block;
  min-height:18px;
  font-size:13px;
  line-height:18px;
  font-weight:800;
  letter-spacing:0;
}
body.pro-app-theme .server-sidebar-header {
  min-height:92px;
  font-size:13px;
}
body.pro-app-theme #server-sidebar-name {
  font-size:13px;
  line-height:18px;
}
.sidebar.server-context {
  width:240px;
  min-width:240px;
}
@media (max-width:900px) and (min-width:681px) {
  .sidebar.server-context { width:220px; min-width:220px; }
}
@media (max-width:680px) {
  .sidebar.server-context { width:min(86vw,320px); min-width:0; }
}
.server-members-panel {
  display:none;
  width:238px;
  min-width:238px;
  height:100dvh;
  border-left:1px solid var(--border);
  background:var(--bg-surface);
  overflow:hidden;
  flex-direction:column;
}
.server-members-panel.active { display:flex; }
.server-members-panel-header {
  min-height:52px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.server-members-panel-header small {
  color:var(--text-muted);
  font:700 10px 'JetBrains Mono',monospace;
}
.server-members-panel .server-member-list { padding:8px 6px 18px; }
.server-members-panel .server-member-item { min-height:48px; }
.member-role-heading {
  display:flex;
  align-items:center;
  gap:6px;
  padding:14px 8px 5px;
  color:var(--text-muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.member-role-heading:first-child { padding-top:6px; }
.member-role-heading small {
  color:inherit;
  font:700 10px 'JetBrains Mono',monospace;
}
.member-role-heading b { color:var(--text-muted); font-weight:700; }
.member-offline-group .server-member-item { opacity:.58; }
.member-offline-group .server-member-item:hover { opacity:1; }

.server-context-menu {
  position:fixed;
  z-index:2200;
  display:none;
  width:210px;
  padding:6px;
  border:1px solid var(--border-bright);
  border-radius:6px;
  background:var(--bg-elevated);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.server-context-menu.active { display:block; }
.server-context-menu button {
  width:100%;
  min-height:34px;
  padding:8px 10px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:var(--text-secondary);
  text-align:left;
  font:600 12px 'Syne',sans-serif;
  cursor:pointer;
}
.server-context-menu button:hover { background:var(--accent); color:#fff; }
.server-context-menu button.danger { color:var(--red); }
.server-context-menu button.danger:hover { background:var(--red); color:#fff; }
.server-context-menu>div { height:1px; margin:5px 3px; background:var(--border); }
@media(max-width:1100px) {
  .server-members-panel { width:205px; min-width:205px; }
}
@media(max-width:900px) {
  .server-members-panel { display:none!important; }
}
.admin-safety-category-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.admin-safety-category-grid label>span {
  display:block;
  margin-bottom:6px;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:700;
}
.admin-safety-category-grid textarea {
  width:100%;
  min-height:150px;
  resize:vertical;
}
@media(max-width:900px) {
  .admin-safety-category-grid { grid-template-columns:1fr; }
}

.tos-overlay { position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px;background:rgba(5,7,12,.96);backdrop-filter:blur(14px) }
.tos-dialog { width:min(760px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;padding:24px;border:1px solid var(--border-bright);border-radius:8px;background:var(--bg-elevated);box-shadow:0 30px 90px rgba(0,0,0,.65) }
.tos-brand { margin-bottom:18px;color:var(--accent);font-size:13px;font-weight:900;letter-spacing:3px }
.tos-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px }
.tos-heading span { color:var(--text-muted);font-size:9px;font-weight:800;letter-spacing:1.4px }
.tos-heading h2 { margin:4px 0 14px;font-size:23px }
.tos-heading small { flex:0 0 auto;color:var(--text-muted);font:700 10px 'JetBrains Mono',monospace }
.tos-document { min-height:220px;overflow-y:auto;padding:18px;border:1px solid var(--border);border-radius:6px;background:var(--bg-void);color:var(--text-secondary);font-size:13px;line-height:1.65;white-space:pre-wrap }
.tos-consent { display:flex;align-items:flex-start;gap:10px;margin:16px 0 10px;color:var(--text-primary);font-size:12px;font-weight:600 }
.tos-consent input { width:17px;height:17px;flex:0 0 auto;accent-color:var(--accent) }
.tos-dialog>.btn-primary { width:100% }
.tos-signout { margin-top:8px;padding:8px;border:0;background:transparent;color:var(--text-muted);font:600 11px 'Syne',sans-serif;cursor:pointer }
.tos-signout:hover { color:var(--text-primary) }
.admin-tos-editor { width:min(900px,100%);margin:auto;padding:24px }
.admin-tos-editor h3 { margin:6px 0 }
.admin-tos-editor>div:first-child p { margin:0 0 18px;color:var(--text-secondary);font-size:12px }
.admin-tos-editor textarea { width:100%;min-height:360px;resize:vertical;line-height:1.55 }
.admin-tos-publish-row { display:flex;align-items:center;justify-content:space-between;gap:14px }
.admin-tos-publish-row span { color:var(--text-muted);font:700 10px 'JetBrains Mono',monospace }
@media(max-width:600px) {
  .tos-overlay { padding:0 }
  .tos-dialog { width:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:18px }
  .tos-document { flex:1 }
  .admin-tos-publish-row { align-items:stretch;flex-direction:column }
}

/* Compact Discord-style role sidebar; kept last to override legacy role rows. */
#settings-tab-roles.active .role-row {
  display:grid;
  grid-template-columns:12px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  gap:5px 9px;
  width:100%;
  min-width:0;
  padding:10px;
  overflow:hidden;
}
#settings-tab-roles.active .role-dot { grid-column:1;grid-row:1;width:10px;height:10px }
#settings-tab-roles.active .role-name {
  grid-column:2;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#settings-tab-roles.active .role-actions {
  grid-column:3;
  grid-row:1 / span 2;
  align-self:center;
}
#settings-tab-roles.active .role-actions button {
  width:32px;
  height:32px;
  padding:0;
  overflow:hidden;
  font-size:0;
}
#settings-tab-roles.active .role-edit-btn::before { content:'Edit';font-size:10px }
#settings-tab-roles.active .role-del-btn::before { content:'×';font-size:18px }
#settings-tab-roles.active .role-row-meta {
  grid-column:2;
  grid-row:2;
  display:flex;
  min-width:0;
  gap:8px;
  color:var(--text-muted);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
}
#settings-tab-roles.active .role-row-meta span {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Forum channels */
.forum-view {
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:22px;
  background:var(--bg-void);
}
.forum-toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:1000px;
  margin:0 auto 16px;
}
.forum-search {
  flex:1;
  min-width:0;
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--border-bright);
  border-radius:7px;
  background:var(--bg-surface);
  color:var(--text-muted);
}
.forum-search input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text-primary);
  font:600 14px 'Syne',sans-serif;
}
.forum-composer {
  max-width:1000px;
  margin:0 auto 18px;
  gap:10px;
  padding:16px;
  border:1px solid var(--accent);
  border-radius:7px;
  background:var(--bg-surface);
}
.forum-composer input,.forum-composer textarea,.forum-reply-box textarea {
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border-bright);
  border-radius:5px;
  outline:0;
  resize:vertical;
  background:var(--bg-base);
  color:var(--text-primary);
  font:500 13px/1.5 'Syne',sans-serif;
}
.forum-composer input:focus,.forum-composer textarea:focus,.forum-reply-box textarea:focus { border-color:var(--accent) }
.forum-composer>div { display:flex;justify-content:flex-end;gap:8px }
.forum-filter-row {
  max-width:1000px;
  margin:0 auto 10px;
  display:flex;
  justify-content:space-between;
  color:var(--text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.forum-post-list { max-width:1000px;margin:auto;display:grid;gap:10px }
.forum-post-card {
  width:100%;
  min-height:112px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--bg-surface);
  color:var(--text-primary);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s;
}
.forum-post-card:hover { border-color:var(--border-bright);background:var(--bg-hover) }
.forum-post-copy { min-width:0 }
.forum-post-copy strong { display:block;margin-bottom:7px;font-size:16px }
.forum-post-copy p {
  margin:0 0 10px;
  overflow:hidden;
  color:var(--text-secondary);
  font-size:12px;
  line-height:1.45;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.forum-post-copy small { color:var(--text-muted);font-size:10px }
.forum-reply-count { display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:11px }
.forum-reply-count span { color:var(--accent);font-size:8px }
.forum-empty,.forum-loading { max-width:1000px;margin:40px auto;padding:30px;border:1px dashed var(--border);color:var(--text-muted);text-align:center }
.forum-thread-head {
  max-width:900px;
  margin:0 auto 14px;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.forum-thread-head h2 { margin:0 0 4px;font-size:20px }
.forum-thread-head span { color:var(--text-muted);font-size:10px }
.forum-thread-head .forum-lock-btn { margin-left:auto;flex:0 0 auto }
.forum-thread-original,.forum-reply {
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  padding:16px;
  border:1px solid var(--border);
  background:var(--bg-surface);
}
.forum-thread-original { border-radius:7px 7px 0 0 }
.forum-thread-original p,.forum-reply p { margin:6px 0 0;color:var(--text-secondary);font-size:13px;line-height:1.55;white-space:pre-wrap }
.forum-replies-label { max-width:900px;margin:18px auto 8px;color:var(--text-muted);font-size:10px;font-weight:800;text-transform:uppercase }
.forum-replies { max-width:900px;margin:auto;border-radius:7px;overflow:hidden }
.forum-reply { border-bottom:0 }
.forum-reply:last-child { border-bottom:1px solid var(--border) }
.forum-reply strong small { margin-left:6px;color:var(--text-muted);font-weight:500 }
.forum-reply-box {
  position:sticky;
  bottom:-22px;
  max-width:900px;
  margin:18px auto -22px;
  display:flex;
  align-items:flex-end;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--border);
  background:var(--bg-void);
}
.forum-reply-box textarea { min-height:48px }
.forum-replies-locked {
  max-width:900px;
  margin:16px auto 0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-surface);
  color:var(--text-muted);
  font-size:12px;
  text-align:center;
}

@media(max-width:680px) {
  .forum-view { padding:12px }
  .forum-toolbar { align-items:stretch }
  .forum-toolbar .btn-primary { padding-inline:14px }
  .forum-post-card { grid-template-columns:34px minmax(0,1fr);padding:12px }
  .forum-reply-count { grid-column:2 }
  .forum-thread-head { flex-direction:column }
  .forum-reply-box { bottom:-12px;margin-bottom:-12px;flex-direction:column;align-items:stretch }
}

/* Mobile usability pass */
.mobile-topbar-btn {
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--text-secondary);
  align-items:center;
  justify-content:center;
}
.mobile-topbar-btn:active { background:var(--bg-hover);color:var(--text-primary) }

@media(max-width:680px) {
  :root { --mobile-dock-h:64px }

  .server-rail {
    display:flex;
    position:fixed;
    z-index:590;
    inset:auto 0 0;
    width:100vw;
    min-width:0;
    height:var(--mobile-dock-h);
    padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border:0;
    border-top:1px solid var(--border);
    overflow-x:auto;
    overflow-y:hidden;
    flex-direction:row;
    align-items:center;
    background:color-mix(in srgb,var(--bg-void) 94%,transparent);
    backdrop-filter:blur(14px);
  }
  .server-rail .rail-section {
    width:max-content;
    min-width:100%;
    padding:0;
    flex-direction:row;
    justify-content:flex-start;
    gap:8px;
  }
  .server-rail #server-icons { display:flex;flex-direction:row;gap:8px }
  .server-rail .rail-divider { width:1px;min-width:1px;height:30px;margin:0 2px }
  .server-rail .rail-btn { width:44px;height:44px }
  .server-rail .rail-btn.active::before {
    left:50%;
    top:auto;
    bottom:-7px;
    width:22px;
    height:3px;
    transform:translateX(-50%);
    border-radius:3px 3px 0 0;
  }

  .sidebar { height:calc(100dvh - var(--mobile-dock-h)) }
  .main-content { padding-bottom:var(--mobile-dock-h) }
  .view { top:48px!important;bottom:var(--mobile-dock-h)!important;height:auto!important }

  .modal-overlay { align-items:flex-end }
  .modal:not(.settings-modal):not(.server-settings-full) {
    width:100%!important;
    max-width:100%!important;
    max-height:calc(100dvh - 18px)!important;
    border-radius:10px 10px 0 0!important;
  }
  .modal-wide { max-width:100%!important }
  .modal-header { min-height:54px;padding:12px 16px }
  .modal-body { padding:16px;overflow-y:auto }
  .modal-close,.icon-btn,.mobile-topbar-btn { min-width:42px;min-height:42px }

  .chat-header { min-height:56px;padding:8px 10px }
  .chat-peer-info,.chat-peer-info>div:last-child { min-width:0 }
  .chat-peer-info .display-name,.chat-peer-info .username {
    max-width:44vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .chat-actions { flex-shrink:0 }
  .chat-actions .icon-btn { width:42px;height:42px }
  .messages-wrap { padding:10px 6px 12px }
  .message { padding:5px 4px;gap:8px }
  .message-input-wrap {
    padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));
    gap:6px;
  }
  .message-input-wrap textarea {
    min-width:0;
    min-height:42px;
    padding:10px 12px;
    font-size:16px;
  }
  .send-btn { width:44px;height:44px }
  .mention-autocomplete { left:8px!important;right:8px!important;width:auto!important;max-height:42vh }

  .server-members-panel.active {
    display:flex!important;
    position:fixed;
    z-index:610;
    top:48px;
    right:-86vw;
    bottom:var(--mobile-dock-h);
    width:min(84vw,330px)!important;
    min-width:0!important;
    height:auto;
    transition:right .22s ease;
    box-shadow:-18px 0 40px rgba(0,0,0,.38);
  }
  .server-members-panel.active.mobile-open { right:0 }
  .server-members-panel-header { min-height:52px }

  .settings-modal .profile-settings-tabs {
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .settings-modal .profile-settings-tab { min-height:42px }
  .server-settings-full {
    display:flex;
    flex-direction:column;
    height:100dvh;
  }
  .server-settings-full>.modal-header { flex:0 0 58px;min-height:58px;padding:0 14px }
  .server-settings-full>.settings-tabs {
    flex:0 0 auto;
    width:100%;
    padding:8px;
    border:0;
    border-bottom:1px solid var(--border);
    flex-direction:row;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .server-settings-full .settings-tab { width:auto;min-width:max-content;min-height:42px;padding:10px 13px }
  .server-settings-full>.modal-body {
    flex:1 1 auto;
    width:100%;
    min-height:0;
    padding:18px 14px 80px;
  }

  .shop-grid,.friends-grid,.games-grid,.auction-grid { grid-template-columns:1fr!important }
  .view-header { padding:14px 12px 0!important }
  .view-header h1 { font-size:21px }
  #stats-content,#pro-content,.quests-content,.games-content,.auction-content { padding:12px!important }
}
/* Server discovery */
.rail-btn.discover-server {
  color: #39c985;
  border: 1px solid rgba(57, 201, 133, .28);
}
.rail-btn.discover-server:hover {
  color: #fff;
  background: #198754;
  border-color: #39c985;
}
#server-discovery-modal {
  left: 72px;
  background: var(--bg-base);
  backdrop-filter: none;
  align-items: stretch;
  justify-content: stretch;
}
.server-discovery-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.server-discovery-modal .modal-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}
.server-discovery-modal .modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.discovery-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}
.discovery-toolbar input {
  flex: 1;
}
.server-discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.discovery-card {
  overflow: hidden;
  border: 1px solid var(--border-bright);
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.discovery-card-banner {
  position: relative;
  height: 150px;
  background-position: center;
  background-size: cover;
}
.discovery-card-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70%;
  background: linear-gradient(transparent, rgba(8, 10, 15, .72));
  pointer-events: none;
}
.discovery-card.customized .discovery-card-banner {
  height: 180px;
}
.discovery-invite-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 4px;
  background: rgba(8, 10, 15, .7);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
.discovery-card-body {
  position: relative;
  padding: 42px 18px 18px;
}
.discovery-card-icon {
  position: absolute;
  top: -34px;
  left: 16px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 5px solid var(--bg-surface);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-weight: 800;
}
.discovery-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discovery-card h3 {
  margin: 0 0 5px;
  font-size: 19px;
}
.discovery-card p {
  min-height: 40px;
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.discovery-card-meta,
.discovery-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.discovery-card-meta span,
.discovery-card-tags span {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 10px;
}
.discovery-card .btn-primary,
.discovery-card .btn-secondary {
  width: 100%;
}
.discovery-settings-card {
  max-width: 720px;
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.discovery-settings-card h3 {
  margin: 8px 0;
  font-size: 20px;
}
.discovery-settings-card p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.discovery-subscription-status {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 13px;
}
.discovery-settings-card .btn-primary {
  margin-top: 16px;
}
@media (max-width: 640px) {
  #server-discovery-modal {
    inset: 0 0 var(--mobile-dock-h);
  }
  .server-discovery-modal {
    width: 100vw !important;
    max-width: none !important;
    height: calc(100dvh - var(--mobile-dock-h)) !important;
    max-height: none !important;
    border-radius: 0 !important;
  }
  .discovery-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .server-discovery-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 681px) and (max-width: 900px) {
  #server-discovery-modal {
    left: 60px;
  }
}
/* Audited DM report context */
.dm-context-review-modal {
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
  max-height: min(820px, calc(100dvh - 32px));
}
.dm-context-review-modal .modal-header p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 11px;
}
.dm-context-review-modal .modal-body {
  overflow-y: auto;
}
.dm-context-review-modal section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dm-context-warning {
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, .4);
  background: rgba(245, 158, 11, .08);
}
.dm-context-warning strong {
  display: block;
  margin-bottom: 7px;
  color: #fbbf24;
}
.dm-context-warning p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.dm-context-participants {
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
}
.dm-context-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}
.dm-context-message {
  padding: 11px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg-surface);
}
.dm-context-message.reported-user {
  border-left-color: var(--red);
}
.dm-context-message > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.dm-context-message strong {
  font-size: 12px;
}
.dm-context-message span {
  color: var(--text-muted);
  font-size: 10px;
}
.dm-context-message p {
  margin: 7px 0 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  .dm-context-review-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 18px) !important;
  }
}
/* Release features: onboarding, events, emojis, and moderation */
.server-feature-panel {
  max-width: 900px;
  padding: 20px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.emoji-upload-row,
.server-mute-form,
.global-mute-form {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) auto;
  gap: 8px;
  margin: 14px 0;
}
.server-mute-form,
.global-mute-form {
  grid-template-columns: minmax(140px, 1fr) 90px 110px minmax(150px, 1fr) auto;
}
.server-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.server-emoji-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.server-emoji-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.server-emoji-item span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.active-mute-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.active-mute-row b,
.active-mute-row span { display: block; }
.active-mute-row span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.timeline-filters input { width: 100%; margin: 10px 0; }
.moderation-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.moderation-entry {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}
.moderation-entry i {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}
.moderation-entry b { text-transform: capitalize; }
.moderation-entry span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.moderation-entry p { margin: 5px 0 0; color: var(--text-secondary); font-size: 11px; }
.server-events-modal { max-width: 760px; max-height: min(820px, calc(100dvh - 30px)); }
.server-events-modal .modal-body { overflow-y: auto; }
.event-create-form {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.event-create-form textarea { grid-column: 1 / -1; min-height: 70px; }
.event-create-form button { justify-self: start; }
.server-event-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 14px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.server-event-date {
  display: grid;
  place-content: center;
  text-align: center;
  border-right: 1px solid var(--border);
}
.server-event-date b { color: var(--accent); }
.server-event-date span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.server-event-info h3 { margin: 0; font-size: 15px; }
.server-event-info p { margin: 6px 0; color: var(--text-secondary); font-size: 12px; }
.server-event-info span { color: var(--text-muted); font-size: 10px; }
.server-event-actions { display: flex; align-items: center; gap: 5px; }
.onboarding-modal { max-width: 620px; }
.onboarding-modal h2 { margin: 4px 0 0; font-size: 28px; }
.onboarding-modal #onboarding-view-message { color: var(--text-secondary); line-height: 1.6; }
.onboarding-rule {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  margin-top: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
}
.onboarding-rule b {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-muted);
  color: var(--accent);
}
.message-emoji-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 20px;
}
.message-emoji-btn:hover { color: var(--yellow); }
.global-emoji-picker {
  position: fixed;
  z-index: 1500;
  width: 330px;
  height: 380px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-bright);
  border-radius: 7px;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
}
.global-emoji-search {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: flex;
  gap: 6px;
  padding: 8px 0;
  background: var(--bg-elevated);
}
.global-emoji-search input { flex: 1; }
.global-emoji-search button { border: 0; background: transparent; color: var(--text-secondary); font-size: 20px; cursor: pointer; }
.emoji-section-title { margin: 9px 2px 6px; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.global-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.global-emoji-grid button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
}
.global-emoji-grid button:hover { background: var(--bg-hover); }
.global-emoji-grid img,
.inline-custom-emoji {
  width: 28px;
  height: 28px;
  object-fit: contain;
  vertical-align: middle;
}
@media (max-width: 700px) {
  .emoji-upload-row,.server-mute-form,.global-mute-form,.event-create-form { grid-template-columns: 1fr; }
  .event-create-form textarea { grid-column: auto; }
  .server-event-card { grid-template-columns: 55px minmax(0,1fr); }
  .server-event-actions { grid-column: 1 / -1; }
  .global-emoji-picker { width: calc(100vw - 16px); left: 8px !important; }
}

/* ===== Visual Polish Pass =====
   The app had drifted into glow-heavy, generated-looking styling. These
   overrides keep the Nexus identity while making the interface calmer,
   denser, and more hand-finished. */
:root {
  --bg-void: #080b10;
  --bg-base: #0c1017;
  --bg-surface: #111722;
  --bg-elevated: #151c29;
  --bg-hover: #1b2432;
  --bg-active: #222c3d;
  --border: rgba(183, 197, 224, 0.09);
  --border-bright: rgba(202, 214, 238, 0.16);
  --accent: #5d6bf2;
  --accent-hover: #717df6;
  --accent-muted: rgba(93, 107, 242, 0.14);
  --accent-glow: rgba(93, 107, 242, 0.16);
  --text-primary: #f0f3f8;
  --text-secondary: #a3adbf;
  --text-muted: #697489;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.22);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.28);
  --shadow-lg: 0 18px 46px rgba(0,0,0,0.38);
}

body.light-theme {
  --bg-void: #e9eef5;
  --bg-base: #f4f6fa;
  --bg-surface: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-hover: #edf1f7;
  --bg-active: #e5ebf4;
  --border: rgba(30, 41, 59, 0.12);
  --border-bright: rgba(30, 41, 59, 0.2);
  --text-primary: #111827;
  --text-secondary: #475569;
  --text-muted: #64748b;
}

button,
input,
textarea,
select {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.app-logo,
.auth-logo,
.logo-word,
.shop-rarity,
.shop-card-name,
.shop-pack-card .shop-card-name,
.profile-popup-name,
.dm-profile-name,
.msg-author,
.user-info .display-name,
.person-info .display-name {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  letter-spacing: 0;
}

.app-logo,
.auth-logo,
.logo-word {
  font-family: 'Syne', 'Inter', sans-serif;
  letter-spacing: 2px;
}

.auth-orb,
.grid-overlay {
  display: none;
}

#auth-screen {
  background:
    linear-gradient(180deg, rgba(93,107,242,0.08), transparent 32%),
    var(--bg-void);
}

.auth-card,
.modal,
.profile-popup,
.friend-card,
.request-card,
.search-results,
.shop-card,
.shop-pack-card,
.shop-catalog-section,
.shop-exclusive-drawer,
.auction-card,
.auction-panel,
.server-invite-item,
.rich-server-invite,
.server-event-card,
.onboarding-card,
.discovery-card,
.dm-context-review-modal section,
.tutorial-card,
.pending-gift-card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}

.auth-card,
.modal {
  box-shadow: var(--shadow-lg) !important;
}

.sidebar,
.dm-sidebar,
.chat-header,
.message-input-wrap,
.server-rail,
.server-settings-full,
.settings-modal,
.admin-modal-full {
  border-color: var(--border) !important;
}

.sidebar,
.dm-sidebar {
  background: var(--bg-surface) !important;
}

.server-rail {
  background: #070a0f !important;
}

body.light-theme .server-rail {
  background: #dfe6f0 !important;
}

.nav-btn,
.dm-item,
.channel-item,
.server-member-item,
.settings-tab,
.profile-settings-tab,
.shop-tab,
.ftab,
.stab {
  border-radius: var(--radius-md) !important;
}

.nav-btn.active,
.dm-item.active,
.channel-item.active,
.server-member-item:hover {
  background: var(--bg-active) !important;
  color: var(--text-primary) !important;
}

.nav-btn.active {
  color: #dfe4ff !important;
}

.nav-btn:hover,
.dm-item:hover,
.channel-item:hover,
.friend-card:hover,
.shop-card:hover,
.auction-card:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-bright) !important;
  transform: none !important;
}

.rail-btn {
  border: 1px solid transparent;
  box-shadow: none !important;
}

.rail-btn:hover,
.rail-btn.active {
  background: var(--accent) !important;
  border-radius: 15px !important;
}

.rail-btn.add-server:hover {
  background: #2fbf7b !important;
}

.chat-header::after {
  display: none;
}

.view-header h1,
.modal-header h2,
.server-sidebar-header,
.dm-sidebar-header h2,
.shop-subsection h2,
.shop-section-heading h2,
.games-content h1,
.auction-content h1 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.section-label,
.sidebar-label,
.server-channels-label,
.server-members-label,
.member-role-heading,
.emoji-section-title,
.shop-section-heading b,
.shop-exclusive-drawer > summary small {
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.action-btn,
.shop-card-btn,
.member-action-btn,
.inv-accept,
.inv-decline,
.send-btn {
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  transform: none !important;
}

.btn-primary,
.action-btn.primary,
.shop-card-btn.equip,
.shop-card-btn.buy,
.send-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-primary:hover,
.action-btn.primary:hover,
.shop-card-btn.equip:hover,
.shop-card-btn.buy:hover,
.send-btn:hover {
  background: var(--accent-hover) !important;
}

.btn-secondary,
.action-btn.ghost,
.role-edit-btn,
.icon-btn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
}

.btn-danger,
.action-btn.danger,
.shop-card-btn.danger,
.shop-sell-btn,
.role-del-btn {
  background: rgba(240,84,84,0.11) !important;
  border: 1px solid rgba(240,84,84,0.24) !important;
  color: #ff6b6b !important;
}

input,
textarea,
select,
.search-bar,
.dm-search-wrap input,
.auction-sell-row select,
.auction-sell-row input,
.invite-code-row input {
  background: var(--bg-base) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus,
.message-input-wrap textarea:focus {
  border-color: rgba(125, 140, 255, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(93,107,242,0.16) !important;
}

.message {
  border-radius: 4px !important;
}

.message:hover {
  background: rgba(255,255,255,0.035) !important;
}

body.light-theme .message:hover {
  background: rgba(30,41,59,0.055) !important;
}

.message-input-wrap textarea {
  min-height: 42px;
}

.status-dot.online,
.status-dot.dnd,
.status-dot.discord-status,
.shop-card.equipped,
.color-card.equipped,
.font-card.equipped {
  box-shadow: none !important;
}

.shop-grid,
.shop-grid-inner,
.auction-grid,
.friends-grid {
  gap: 14px !important;
}

.shop-card,
.auction-card,
.friend-card {
  padding: 14px !important;
}

.shop-rarity,
.role-badge,
.profile-role-chip,
.server-tag-badge,
.inv-tags span,
.member-role-heading {
  border-radius: 5px !important;
}

.shop-card-desc,
.shop-subsection p,
.shop-drawer-copy,
.auction-card p,
.inv-description {
  color: var(--text-secondary) !important;
}

.profile-popup-banner,
.dm-profile-banner {
  background: linear-gradient(135deg, #25314a, #303a58) !important;
}

.profile-popup.pro-profile .profile-popup-banner,
.pro-profile-card .dm-profile-banner,
.dm-profile-panel.pro-profile-card .dm-profile-copy,
.dm-profile-panel.pro-profile-card .dm-profile-section {
  box-shadow: none !important;
}

.modal-overlay {
  background: rgba(3, 6, 12, 0.72) !important;
  backdrop-filter: blur(3px) !important;
}

.settings-modal .profile-settings-tabs,
.server-settings-full > .settings-tabs,
.admin-modal-full .admin-tabs {
  background: var(--bg-base) !important;
}

.settings-modal .profile-settings-tab.active,
.server-settings-full .settings-tab.active,
.admin-modal-full .admin-tab.active {
  background: var(--bg-active) !important;
  color: var(--text-primary) !important;
}

.toast {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-elevated) !important;
  box-shadow: var(--shadow-md) !important;
}

body.pro-app-theme.theme-style-gradient #main-screen,
body.pro-app-theme.theme-style-glass #main-screen {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 22%, transparent), color-mix(in srgb, var(--theme-secondary) 18%, transparent)),
    var(--bg-void) !important;
}

body.pro-app-theme.theme-style-gradient .server-rail,
body.pro-app-theme.theme-style-gradient .sidebar,
body.pro-app-theme.theme-style-gradient .view,
body.pro-app-theme.theme-style-glass .server-rail,
body.pro-app-theme.theme-style-glass .sidebar,
body.pro-app-theme.theme-style-glass .view,
body.pro-app-theme.theme-style-glass .chat-header,
body.pro-app-theme.theme-style-glass .message-input-wrap {
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
  backdrop-filter: none !important;
}

/* World Cup season: a contained matchball orbit. It stays outside the avatar,
   so profile photos remain readable at every avatar size. */
.avatar-deco.deco-unity_matchball_26 {
  inset: -8px;
  border: 0;
  overflow: visible;
  background:
    conic-gradient(from 18deg,
      #ef3340 0 22deg, transparent 23deg 76deg,
      #00a859 77deg 102deg, transparent 103deg 159deg,
      #1963b8 160deg 188deg, transparent 189deg 248deg,
      #f7c843 249deg 272deg, transparent 273deg 328deg,
      #ef3340 329deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 59%, #000 64%, #000 72%, transparent 78%);
          mask: radial-gradient(circle, transparent 59%, #000 64%, #000 72%, transparent 78%);
  box-shadow: 0 0 10px rgba(44, 137, 244, 0.46), 0 0 18px rgba(239, 51, 64, 0.22);
  animation: unity-matchball-ring 6.4s linear infinite;
}
.avatar-deco.deco-unity_matchball_26::before {
  content: '';
  position: absolute;
  width: 27%;
  height: 27%;
  left: 72%;
  top: 3%;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, #15243b 0 15%, transparent 16%),
    radial-gradient(circle at 22% 32%, #15243b 0 10%, transparent 11%),
    radial-gradient(circle at 78% 34%, #15243b 0 10%, transparent 11%),
    radial-gradient(circle at 68% 75%, #15243b 0 10%, transparent 11%),
    radial-gradient(circle at 30% 76%, #15243b 0 10%, transparent 11%),
    conic-gradient(from 15deg, #fcfcfa 0 12%, #183359 13% 24%, #fbfbf7 25% 39%, #d82b41 40% 52%, #fcfcfa 53% 68%, #008d66 69% 80%, #fbfbf7 81% 100%);
  box-shadow: 0 3px 7px rgba(0,0,0,.48), 0 0 10px rgba(255,255,255,.64);
  transform-origin: -218% 205%;
  animation: unity-matchball-orbit 3.8s cubic-bezier(.45,.04,.55,.96) infinite;
}
.avatar-deco.deco-unity_matchball_26::after {
  content: 'MATCH\A 26';
  white-space: pre;
  display: grid;
  place-items: end center;
  padding-bottom: 12%;
  color: rgba(255,255,255,.94);
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: .86;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 3px #071120, 0 0 8px rgba(255,255,255,.55);
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 47%, #12223a 0 11%, transparent 12%),
    radial-gradient(circle at 35% 34%, #142640 0 7%, transparent 8%),
    radial-gradient(circle at 66% 35%, #142640 0 7%, transparent 8%),
    radial-gradient(circle at 70% 64%, #142640 0 7%, transparent 8%),
    radial-gradient(circle at 31% 65%, #142640 0 7%, transparent 8%),
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.98) 0 30%, rgba(255,255,255,.75) 31%, transparent 32%),
    radial-gradient(circle at 19% 24%, rgba(255,255,255,.96) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 17%, rgba(255,229,114,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 62%, rgba(99,201,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 88%, rgba(255,102,118,.9) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(13,39,97,.7), rgba(3,112,83,.4) 46%, rgba(191,36,55,.5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48), inset 0 0 18px rgba(15,36,91,.72), 0 0 12px rgba(97,201,255,.46);
  filter: saturate(1.18) drop-shadow(0 0 5px rgba(255,255,255,.54));
  opacity: 0;
  animation: unity-matchball-takeover 12s ease-in-out infinite;
}
@keyframes unity-matchball-ring { to { transform: rotate(360deg); } }
@keyframes unity-matchball-orbit {
  0%,100% { transform: rotate(0deg) scale(.9); filter: brightness(1); }
  42% { transform: rotate(180deg) scale(1.13); filter: brightness(1.24); }
  50% { transform: rotate(205deg) scale(1.16); filter: brightness(1.48); }
}
@keyframes unity-matchball-takeover {
  0%,72%,100% { opacity:0; transform:scale(.82) rotate(-16deg); }
  75% { opacity:.22; transform:scale(.92) rotate(-7deg); }
  78% { opacity:.88; transform:scale(1) rotate(0deg); }
  96% { opacity:.88; transform:scale(1.015) rotate(2deg); }
  99% { opacity:.16; transform:scale(1.06) rotate(7deg); }
}
.seasonal-shop-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(247, 200, 67, .56);
  border-radius: 5px;
  color: #ffdb63;
  background: rgba(247, 200, 67, .1);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
}

/* Dedicated layers for Unity Matchball '26. The outer stadium stays clean;
   the inner scene only appears briefly as the final-minute moment. */
.unity-matchball-layer,
.unity-matchball-layer > span {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  pointer-events: none;
}
.unity-matchball-layer {
  z-index: 5;
  overflow: visible;
}
.unity-matchball-lights {
  background:
    repeating-conic-gradient(from 4deg, rgba(255,255,255,.9) 0 1deg, transparent 1.8deg 11deg),
    conic-gradient(from 205deg, transparent 0 45deg, rgba(87,203,255,.8) 56deg, transparent 70deg, transparent 136deg, rgba(244,209,85,.76) 158deg, transparent 175deg, transparent 238deg, rgba(238,57,77,.75) 257deg, transparent 274deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 69%, #000 73%, transparent 79%);
          mask: radial-gradient(circle, transparent 65%, #000 69%, #000 73%, transparent 79%);
  filter: drop-shadow(0 0 6px rgba(124,211,255,.62));
  animation: unity-stadium-lights 5.2s linear infinite;
}
.unity-matchball-takeover {
  inset: -3px !important;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.58);
  background:
    radial-gradient(ellipse at 50% 112%, rgba(0,157,105,.82), transparent 56%),
    linear-gradient(145deg, rgba(9,40,97,.86), rgba(0,109,92,.58) 50%, rgba(190,28,58,.72));
  box-shadow: inset 0 0 0 1px rgba(7,13,30,.45), inset 0 0 20px rgba(4,15,45,.78), 0 0 13px rgba(115,210,255,.44);
  opacity: 0;
  transform: scale(.75) rotate(-14deg);
  animation: unity-final-minute 12s cubic-bezier(.2,.8,.2,1) infinite;
}
.unity-matchball-takeover::before,
.unity-matchball-takeover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.unity-matchball-takeover::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.13) 12.4% 13%, transparent 13.6% 25%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 28%, transparent 72%, rgba(0,0,0,.25));
  mix-blend-mode: screen;
  animation: unity-scanline 2.4s linear infinite;
}
.unity-matchball-takeover::after {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 20%, rgba(255,228,106,.88) 0 1px, transparent 2px),
    radial-gradient(circle at 17% 76%, rgba(103,211,255,.92) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 78%, rgba(255,99,119,.88) 0 1px, transparent 2px);
  animation: unity-stars 1.9s ease-in-out infinite;
}
.unity-matchball-final-ball {
  position: absolute;
  width: 56%;
  height: 56%;
  left: 22%;
  top: 13%;
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, #12243c 0 12%, transparent 13%),
    radial-gradient(circle at 23% 31%, #12243c 0 8%, transparent 9%),
    radial-gradient(circle at 78% 31%, #12243c 0 8%, transparent 9%),
    radial-gradient(circle at 69% 75%, #12243c 0 8%, transparent 9%),
    radial-gradient(circle at 31% 75%, #12243c 0 8%, transparent 9%),
    conic-gradient(from 8deg, #fbfbf5 0 13%, #1e3c6d 14% 25%, #fafaf4 26% 39%, #e5364e 40% 52%, #fafaf5 53% 68%, #00a778 69% 81%, #fafaf5 82% 100%);
  box-shadow: 0 5px 12px rgba(0,0,0,.45), 0 0 14px rgba(255,255,255,.52);
  animation: unity-final-ball 2.2s ease-in-out infinite;
}
.unity-matchball-takeover b {
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: 13%;
  color: #fff;
  font: 800 14px/.78 'Syne', sans-serif;
  letter-spacing: .06em;
  text-align: right;
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 10px rgba(125,214,255,.7);
}
.unity-matchball-takeover i {
  position: absolute;
  z-index: 1;
  left: 12%;
  bottom: 12%;
  color: rgba(255,242,182,.96);
  font: 800 7px/1 'Syne', sans-serif;
  font-style: normal;
  letter-spacing: .1em;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
@keyframes unity-stadium-lights { to { transform: rotate(360deg); } }
@keyframes unity-final-minute {
  0%,72%,100% { opacity:0; transform:scale(.75) rotate(-14deg); }
  75% { opacity:.18; transform:scale(.86) rotate(-7deg); }
  78% { opacity:.98; transform:scale(1) rotate(0); }
  96% { opacity:.98; transform:scale(1.02) rotate(1deg); }
  99% { opacity:.08; transform:scale(1.1) rotate(8deg); }
}
@keyframes unity-final-ball {
  0%,100% { transform:rotate(-8deg) scale(.94); filter:brightness(.98); }
  48% { transform:rotate(12deg) scale(1.08); filter:brightness(1.2); }
}
@keyframes unity-scanline { to { transform:translateX(12%); } }
@keyframes unity-stars { 0%,100% { opacity:.45; } 50% { opacity:1; } }
.avatar-deco.deco-unity_matchball_26::after { display: none; }

/* Matchball refinement: compact geometry, a real ball asset, and no text.
   These overrides intentionally keep every visible layer inside a 4px edge. */
.avatar-deco.deco-unity_matchball_26 {
  inset: -4px;
  background: conic-gradient(from 18deg, #e63950 0 20deg, transparent 21deg 81deg, #00a878 82deg 102deg, transparent 103deg 161deg, #2275ca 162deg 184deg, transparent 185deg 246deg, #f6c945 247deg 266deg, transparent 267deg 330deg, #e63950 331deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 68%, #000 72%, transparent 76%);
          mask: radial-gradient(circle, transparent 64%, #000 68%, #000 72%, transparent 76%);
  box-shadow: 0 0 7px rgba(65,159,255,.42), 0 0 12px rgba(229,57,80,.2);
  animation: unity-matchball-ring 8s linear infinite;
}
.avatar-deco.deco-unity_matchball_26::before {
  width: 27%;
  height: 27%;
  left: 72%;
  top: 4%;
  border: 0;
  border-radius: 50%;
  background: url('/assets/unity-matchball-26.png') center / cover no-repeat;
  box-shadow: 0 2px 5px rgba(0,0,0,.38), 0 0 7px rgba(255,255,255,.38);
  transform-origin: center;
  animation: unity-matchball-compact-orbit 7.2s ease-in-out infinite;
}
.unity-matchball-layer,
.unity-matchball-layer > span { inset: -4px; }
.unity-matchball-lights {
  inset: 0 !important;
  opacity: .68;
  background: repeating-conic-gradient(from 4deg, rgba(255,255,255,.82) 0 1deg, transparent 1.6deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 70%, #000 72%, #000 74%, transparent 77%);
          mask: radial-gradient(circle, transparent 70%, #000 72%, #000 74%, transparent 77%);
  filter: drop-shadow(0 0 3px rgba(145,219,255,.5));
}
.unity-matchball-takeover {
  inset: 3px !important;
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(10,34,68,.28) 0 42%, transparent 70%),
    linear-gradient(135deg, rgba(14,73,142,.23), rgba(0,139,100,.16) 52%, rgba(212,47,70,.2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 12px rgba(9,32,70,.26);
  opacity: 0;
  animation: unity-final-minute-refined 12s ease-in-out infinite;
}
.unity-matchball-takeover::before {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.14), transparent 48%);
  mix-blend-mode: screen;
  animation: none;
}
.unity-matchball-takeover::after { opacity: .7; }
.unity-matchball-final-ball {
  width: 48%;
  height: 48%;
  left: 26%;
  top: 26%;
  border: 0;
  border-radius: 50%;
  background: url('/assets/unity-matchball-26.png') center / cover no-repeat;
  box-shadow: 0 4px 11px rgba(0,0,0,.42), 0 0 10px rgba(255,255,255,.38);
  animation: unity-final-ball-refined 2.4s ease-in-out infinite;
}
.unity-matchball-takeover b,
.unity-matchball-takeover i { display: none; }
@keyframes unity-matchball-compact-orbit {
  0%,100% { transform: translate(0,0) scale(.9) rotate(-7deg); }
  25% { transform: translate(-42%,34%) scale(1.02) rotate(9deg); }
  50% { transform: translate(-70%,116%) scale(.92) rotate(20deg); }
  75% { transform: translate(-24%,136%) scale(1.02) rotate(5deg); }
}
@keyframes unity-final-minute-refined {
  0%,72%,100% { opacity: 0; transform: scale(.9); }
  75% { opacity: .12; transform: scale(.95); }
  78% { opacity: .58; transform: scale(1); }
  96% { opacity: .58; transform: scale(1); }
  99% { opacity: .06; transform: scale(1.02); }
}
@keyframes unity-final-ball-refined {
  0%,100% { transform: rotate(-5deg) scale(.92); filter: brightness(1); }
  50% { transform: rotate(7deg) scale(1.04); filter: brightness(1.13); }
}

/* NextBOT giveaways */
.nextbot-giveaway {
  position: relative;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(124, 140, 255, .38);
  border-radius: 8px;
  background: #121a2a;
  box-shadow: 0 8px 22px rgba(0,0,0,.2);
}
.nextbot-giveaway.ended {
  border-color: rgba(114, 130, 154, .38);
  background: #121821;
}
.giveaway-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #7c8cff;
}
.bot-app-badge {
  display:inline-flex;
  align-items:center;
  height:16px;
  margin-left:-2px;
  padding:0 4px;
  border-radius:3px;
  background:#7381ef;
  color:#fff;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1;
}
.nextbot-giveaway.ended .giveaway-accent { background: #7b879b; }
.giveaway-main { padding: 16px 18px 15px 20px; }
.giveaway-heading { display:flex; align-items:center; gap:10px; min-width:0; }
.giveaway-glyph {
  display:grid;
  flex:0 0 30px;
  width:30px;
  height:30px;
  place-items:center;
  border:1px solid rgba(171,184,255,.62);
  border-radius:7px;
  color:#dfe5ff;
  background:#202a52;
  font-size:19px;
  line-height:1;
}
.giveaway-eyebrow {
  display:block;
  margin-bottom:3px;
  color:#abb8ff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
}
.giveaway-heading h3 {
  margin:0;
  overflow-wrap:anywhere;
  color:#f4f6ff;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
}
.giveaway-main > p { margin:12px 0 0; color:var(--text-secondary); font-size:13px; line-height:1.42; white-space:pre-wrap; }
.giveaway-meta { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:14px; color:#9eabc2; font-size:11px; font-weight:600; }
.giveaway-meta span { white-space:nowrap; }
.giveaway-countdown { color:#e2e7ff; }
.giveaway-winners {
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:13px;
  padding:9px 10px;
  border-left:2px solid #7c8cff;
  background:rgba(124,140,255,.08);
}
.giveaway-winners span { color:#aeb9cf; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.giveaway-winners strong { min-width:0; overflow-wrap:anywhere; color:#f1f4fb; font-size:12px; }
.giveaway-winners.empty { border-left-color:#758197; background:rgba(117,129,151,.08); }
.giveaway-actions { display:flex; align-items:center; gap:8px; margin-top:14px; }
.giveaway-enter,
.giveaway-end {
  height:32px;
  border-radius:5px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.giveaway-enter { min-width:132px; border:1px solid #7f8eff; background:#6574ef; color:#fff; }
.giveaway-enter:hover { background:#7886f6; }
.giveaway-enter.entered { border-color:rgba(86,216,163,.58); background:rgba(61,177,127,.18); color:#79e7b4; }
.giveaway-end { padding:0 10px; border:1px solid rgba(240,84,84,.45); background:rgba(240,84,84,.08); color:#ff8f96; }
.giveaway-end:hover { background:rgba(240,84,84,.16); }
.giveaway-finished { color:#aeb9cc; font-size:12px; font-weight:700; }
.giveaway-composer { width:min(520px, calc(100vw - 24px)); }
.giveaway-composer .modal-header { align-items:center; }
.giveaway-composer .modal-header h2 { margin:2px 0 0; font-size:19px; }
.giveaway-composer .field-group { display:flex; flex-direction:column; gap:6px; margin:0 0 15px; }
.giveaway-composer .field-group > span { color:var(--text-secondary); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.giveaway-composer .field-group > span small { color:var(--text-muted); font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; }
.giveaway-composer textarea { min-height:80px; resize:vertical; }
.giveaway-composer-grid { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:12px; }
.giveaway-composer-grid .field-group small { color:var(--text-muted); font-size:10px; }
.giveaway-preview-note { display:grid; grid-template-columns:8px minmax(0,1fr); gap:10px; padding:10px 11px; border:1px solid var(--border); background:var(--bg-surface); }
.giveaway-preview-note span { width:3px; justify-self:center; border-radius:3px; background:#7c8cff; }
.giveaway-preview-note p { margin:0; color:var(--text-secondary); font-size:11px; line-height:1.45; }
.giveaway-composer .modal-footer { display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:560px) {
  .giveaway-main { padding:14px 14px 13px 17px; }
  .giveaway-composer-grid { grid-template-columns:1fr; gap:0; }
  .giveaway-actions { flex-wrap:wrap; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-btn,
  .dm-item,
  .channel-item,
  .server-member-item,
  .btn-primary,
  .btn-secondary,
  .action-btn,
  .shop-card,
  .auction-card,
  .friend-card {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
  }
}