:root {
  --bg-server: #1e1f22;
  --bg-side: #2b2d31;
  --bg-chat: #313338;
  --bg-input: #383a40;
  --bg-panel: #232428;
  --text: #dbdee1;
  --muted: #949ba4;
  --header: #f2f3f5;
  --accent: #5865f2;
  --hover: rgba(78, 80, 88, 0.3);
  --online: #23a55a;
  --idle: #f0b232;
  --dnd: #f23f43;
  --danger: #da373c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "gg sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-server);
  color: var(--text);
  overflow: hidden;
  font-size: 15px;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg-input);
  border: none; border-radius: 6px; padding: 10px 12px; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--accent); }
input:disabled { opacity: .6; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.error { color: var(--dnd); font-size: 14px; min-height: 18px; }
.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label, label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); }

.btn {
  padding: 10px 16px; border-radius: 4px; font-weight: 500; background: #4e5058; color: #fff;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn.primary { background: var(--accent); }
.btn.danger { background: var(--danger); }
.btn.ghost { background: transparent; color: var(--text); }

.icon-btn { width: 32px; height: 32px; border-radius: 4px; color: var(--muted); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); background: var(--hover); }
.round {
  width: 36px; height: 36px; border-radius: 50%; background: var(--bg-panel); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
}
.round:hover { background: #3a3c42; }
.round.ok:hover { background: var(--online); }

/* ---------- Auth ---------- */
.auth {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(30,31,34,.8), rgba(30,31,34,.9)), url("assets/background.jpeg") center / cover;
  padding: 16px;
}
.auth-card {
  background: var(--bg-chat); border-radius: 8px; padding: 32px; width: 100%; max-width: 440px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4); text-align: center;
}
.auth-card h1 { color: var(--header); font-size: 24px; margin: 12px 0 4px; }
.auth-card form { text-align: left; margin-top: 20px; }
.auth-card .small { margin-top: 16px; }
.auth-logo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: 72px 240px 1fr 240px; height: 100%; }
.app.no-right { grid-template-columns: 72px 240px 1fr; }
.app.no-right .right { display: none; }

/* Server bar */
.servers {
  background: var(--bg-server); padding: 12px 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; overflow-y: auto;
}
.server-icon {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bg-chat); color: var(--text);
  display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer;
  transition: border-radius .2s, background .2s; overflow: hidden; flex-shrink: 0; user-select: none;
}
.server-icon img { width: 100%; height: 100%; object-fit: cover; }
.server-icon:hover, .server-icon.active { border-radius: 16px; background: var(--accent); color: #fff; }
.server-icon.add { color: var(--online); font-size: 24px; }
.server-icon.add:hover { background: var(--online); color: #fff; }
.separator { width: 32px; height: 2px; background: var(--bg-chat); border-radius: 1px; }

/* Sidebar */
.sidebar { background: var(--bg-side); display: flex; flex-direction: column; min-height: 0; }
.sidebar-header {
  height: 48px; padding: 0 16px; display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; color: var(--header); border-bottom: 1px solid #1f2023; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.2); flex-shrink: 0;
}
.sidebar-header:hover { background: var(--hover); }
.sidebar-header .chev { color: var(--muted); }
.search-btn {
  margin: 8px; padding: 6px 8px; background: var(--bg-panel); color: var(--muted);
  border-radius: 4px; text-align: left; font-size: 13px; flex-shrink: 0;
}
.nav { padding: 0 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 4px;
  color: var(--muted); text-align: left; font-weight: 500;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--hover); color: var(--header); }
.scroll { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
.category {
  font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted);
  padding: 16px 8px 4px; letter-spacing: .02em;
}
.dm-list { list-style: none; padding: 0 8px; overflow-y: auto; flex: 1; min-height: 0; }
.dm-item {
  display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: 4px; cursor: pointer;
}
.dm-item:hover { background: var(--hover); }
.dm-item.active { background: var(--hover); }
.dm-text { display: flex; flex-direction: column; min-width: 0; }
.dm-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.dm-item.active .dm-text span { color: var(--header); }
.dm-text small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-hint { color: var(--muted); font-size: 13px; padding: 8px; }
.channel {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px;
  color: var(--muted); cursor: pointer; margin-bottom: 2px;
}
.channel:hover { background: var(--hover); color: var(--text); }
.channel.active { background: var(--hover); color: var(--header); }
.hash { font-size: 20px; color: var(--muted); }

.user-panel {
  height: 52px; background: var(--bg-panel); padding: 0 8px; display: flex; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.user-click { flex: 1; display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 4px; min-width: 0; }
.user-click:hover { background: var(--hover); }
.user-info { display: flex; flex-direction: column; font-size: 13px; text-align: left; min-width: 0; }
.user-info span { color: var(--muted); font-size: 12px; }
.user-panel .icon-btn.off { color: var(--dnd); }

/* Avatar */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; position: relative; flex-shrink: 0; user-select: none;
}
.avatar.big { width: 80px !important; height: 80px !important; border: 6px solid var(--bg-chat); margin-top: -40px; }
.dot {
  position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--bg-side);
}
.dot.online { background: var(--online); }
.dot.idle { background: var(--idle); }
.dot.dnd { background: var(--dnd); }
.dot.offline { background: #80848e; }
.user-panel .dot { border-color: var(--bg-panel); }

/* Main */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-chat); position: relative; }
.main-header {
  height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.2); box-shadow: 0 1px 0 rgba(0,0,0,.2);
  color: var(--header); font-weight: 600; background: var(--bg-chat); z-index: 1;
}
.main-header .title { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.main-header .topic {
  color: var(--muted); font-weight: 400; font-size: 14px; border-left: 1px solid rgba(255,255,255,.1);
  padding-left: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0;
}
.main-header .at { color: var(--muted); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 8px; }
.tab { padding: 4px 10px; border-radius: 4px; color: var(--muted); font-weight: 500; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active { background: var(--hover); color: var(--header); }
.tab.accent { background: var(--online); color: #fff; }
.tab.accent:hover, .tab.accent.active { background: #1a8247; color: #fff; }

.search-row { padding: 16px 16px 0; flex-shrink: 0; }
.friends-body, #friends-body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; min-height: 0; }
.section-label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); padding: 12px 0 8px; }
.friend-row {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-top: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
}
.friend-row:hover { background: var(--hover); }
.friend-info { flex: 1; display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.friend-info strong { color: var(--header); font-weight: 600; }
.friend-info small { color: var(--muted); font-size: 13px; }
.actions { display: flex; gap: 8px; }

.add-friend { padding: 20px 16px; }
.add-friend h2 { color: var(--header); font-size: 16px; margin-bottom: 8px; }
.add-friend p { margin-bottom: 12px; font-size: 14px; }
.add-friend form { margin-bottom: 4px; }
.add-friend input { flex: 1; }

.empty-big { color: var(--muted); text-align: center; padding: 40px 16px; font-size: 15px; }

/* Chat */
.messages {
  flex: 1; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(rgba(49,51,56,.9), rgba(49,51,56,.95)), url("assets/background.jpeg") center / cover;
}
.message {
  display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 2px 16px 2px 16px; margin-top: 14px;
}
.message:hover { background: rgba(2,2,2,.06); }
.message.grouped { margin-top: 0; }
.msg-time-inline { color: var(--muted); font-size: 11px; text-align: right; padding-top: 4px; }
.msg-body { min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 8px; }
.msg-author { color: var(--header); font-weight: 500; }
.msg-time { color: var(--muted); font-size: 12px; }
.msg-content { color: var(--text); line-height: 1.375; word-wrap: break-word; white-space: pre-wrap; }
.message .avatar { width: 40px; height: 40px; font-size: 16px; }
.message:not(.grouped) .msg-content { margin-top: 2px; }

.composer { padding: 0 16px 24px; flex-shrink: 0; }
.composer input { background: var(--bg-input); padding: 12px 16px; font-size: 16px; border-radius: 8px; }
.composer input::placeholder { color: var(--muted); }

/* Right panel */
.right { background: var(--bg-side); overflow-y: auto; padding: 16px 8px; min-height: 0; }
.right-head { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); padding: 0 8px 8px; }
.pad { padding: 8px; }
.member {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px;
  color: var(--muted); cursor: pointer;
}
.member:hover { background: var(--hover); color: var(--text); }
.member strong { display: block; color: var(--text); font-weight: 500; font-size: 15px; }
.member small { font-size: 12px; }
.member .dot { border-color: var(--bg-side); }
.profile-card { background: var(--bg-panel); border-radius: 8px; overflow: hidden; text-align: left; }
.profile-card .banner { height: 60px; }
.profile-card h3, .profile-card p { padding: 0 12px; }
.profile-card h3 { color: var(--header); margin-top: 8px; }
.profile-card .card-section { background: var(--bg-chat); margin: 12px; padding: 10px; border-radius: 6px; }
.profile-card .card-section h4 { font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.profile-card .avatar.big { margin-left: 12px; }

/* Pagine */
.page { padding: 24px; }
.hero {
  border-radius: 8px; padding: 40px 24px; text-align: center; color: #fff;
  background: linear-gradient(rgba(30,31,34,.7), rgba(30,31,34,.85)), url("assets/background.jpeg") center / cover;
}
.hero-logo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.hero h1 { font-size: 32px; margin-bottom: 8px; }
.hero p { color: #dbdee1; margin-bottom: 20px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 16px; }
.card { background: var(--bg-side); border-radius: 8px; padding: 16px; }
.card h4 { color: var(--header); margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 14px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center;
  justify-content: center; z-index: 50; padding: 16px;
}
.modal {
  background: var(--bg-chat); border-radius: 8px; width: 100%; max-width: 440px; max-height: 90vh;
  display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 0; }
.modal h3 { color: var(--header); font-size: 18px; }
.modal-body { padding: 16px; overflow-y: auto; }
.modal p { margin-bottom: 8px; }
.modal .stack button.btn { width: 100%; text-align: left; }
.result-list { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
.result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; text-align: left; color: var(--header); }
.result:hover { background: var(--hover); }
.result small { color: var(--muted); }
.profile-preview { display: flex; align-items: center; gap: 12px; }
.profile-preview .avatar { width: 64px !important; height: 64px !important; }
.profile-preview small { display: block; color: var(--muted); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; }
.swatch.on { border-color: #fff; }
textarea { min-height: 70px; resize: vertical; }
.check-row { flex-direction: row !important; align-items: center; gap: 10px !important; text-transform: none !important; font-size: 15px !important; font-weight: 400 !important; color: var(--text) !important; }
.check-row input { width: auto; }
.danger-zone { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; }
.danger-zone .btn { width: 100%; }

/* Context menu */
.context-menu {
  position: fixed; background: #111214; border-radius: 4px; padding: 6px 8px; min-width: 240px;
  box-shadow: 0 8px 16px rgba(0,0,0,.5); z-index: 60; font-size: 14px;
}
.ctx-item {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 2px; color: #b5bac1; text-align: left;
}
.ctx-item:hover { background: var(--accent); color: #fff; }
.ctx-item span { display: flex; flex-direction: column; }
.ctx-item small { color: var(--muted); font-size: 11px; }
.ctx-item:hover small { color: #e0e0e0; }
.ctx-item.danger { color: var(--dnd); }
.ctx-item.danger:hover { background: var(--dnd); color: #fff; }
.ctx-item.disabled { opacity: .4; pointer-events: none; }
.ctx-sep { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.check { width: 16px; height: 16px; border-radius: 3px; border: 2px solid #80848e; flex-shrink: 0; }
.check.on { background: var(--accent); border-color: var(--accent); }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #111214; color: #fff; padding: 10px 18px; border-radius: 6px; opacity: 0;
  transition: all .25s; z-index: 70; box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .app { grid-template-columns: 72px 1fr; }
  .sidebar, .right { display: none; }
}

/* Selettore data di nascita: tutto scuro */
select { color-scheme: dark; cursor: pointer; }
select option { background: #383a40; color: #dbdee1; }
.birth { display: flex; flex-direction: column; gap: 6px; }
.birth-label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.birth-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; }
.birth-row select { padding: 10px 8px; }
.birth-row select:invalid { color: var(--muted); }

/* ===== Aggiornamenti: immagini, banner, comandi vocali, negozio ===== */
.avatar img, .server-icon img, .srv-icon-preview img, .pf-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}
.avatar { overflow: visible; }
.avatar img { border-radius: 50%; }
.avatar.big { width: 80px !important; height: 80px !important; border: 6px solid var(--bg-chat); }
.card-head { margin-top: -40px; padding-left: 12px; }
.profile-card .banner { height: 80px; background-size: cover; background-position: center; }

.voice-btn { width: 32px; height: 32px; color: var(--text); }
.voice-btn:hover { background: var(--hover); }
.voice-btn.off { color: var(--dnd); }
.voice-btn.off:hover { background: rgba(242, 63, 67, .15); }
.user-panel .icon-btn { width: 30px; height: 30px; }

.section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--muted);
  margin-top: 4px;
}

.pick-btn {
  display: inline-block; padding: 8px 14px; border-radius: 4px; background: var(--bg-panel);
  color: var(--text); font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
  cursor: pointer; text-align: center; white-space: nowrap;
}
.pick-btn:hover { background: #3a3c42; }

/* Banner server nella barra laterale */
.srv-banner {
  height: 84px; background-size: cover; background-position: center; flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.sidebar .sidebar-header { flex-shrink: 0; }

/* Modale impostazioni server */
.srv-banner-pick {
  height: 110px; border-radius: 6px; background: linear-gradient(135deg, #5865f2, #eb459e);
  background-size: cover; background-position: center; display: flex; align-items: flex-end;
  justify-content: flex-end; padding: 8px;
}
.srv-banner-pick.readonly { justify-content: center; }
.srv-icon-row { display: flex; align-items: center; gap: 12px; }
.srv-icon-preview {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 22px;
  overflow: hidden; flex-shrink: 0;
}

/* Modale profilo */
.banner-edit {
  height: 110px; border-radius: 6px; background-size: cover; background-position: center;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 8px;
}
.avatar-edit { display: flex; align-items: center; gap: 12px; margin-top: -48px; padding-left: 12px; }
.avatar-edit > div { border: 6px solid var(--bg-chat); border-radius: 50%; }
.avatar-edit .pick-btn { margin-top: 48px; }
.check-row input[type="checkbox"], .check-row input[type="radio"] { width: 16px; height: 16px; accent-color: var(--accent); }

/* Negozio: mascotte COMING SOON */
.coming-soon {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px; text-align: center;
}
.coming-soon svg { filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.coming-soon h1 {
  font-size: 40px; font-weight: 800; color: var(--header); letter-spacing: .04em;
  text-shadow: 0 0 18px rgba(88,101,242,.6);
}

/* ===== Icone, badge founder e moderazione ===== */
.nav-item svg, .title svg, .round svg, .icon-btn svg, .chev svg, .x-icon svg { display: block; flex-shrink: 0; }
.nav-item svg { color: var(--muted); }
.nav-item.active svg, .nav-item:hover svg { color: var(--header); }
.title { display: inline-flex; align-items: center; gap: 8px; }
.title svg { color: var(--muted); }
.sidebar-header .chev { display: flex; }

.founder-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; vertical-align: middle; line-height: 14px;
}

.ctx-item { justify-content: flex-start; }
.ctx-ico { width: 20px; display: inline-flex; justify-content: center; opacity: .85; flex-shrink: 0; }
.ctx-label { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ctx-arrow { margin-left: auto; font-size: 16px; }

.small-btn { padding: 6px 10px; font-size: 13px; }
.btn.ghost:hover { background: var(--hover); }

/* ===== Profilo utente a finestra ===== */
.clickable { cursor: pointer; }
.clickable:hover .msg-author, .member.clickable:hover strong { text-decoration: underline; }
.profile-modal {
  position: relative; display: grid; grid-template-columns: 340px 1fr;
  width: min(900px, 96vw); height: min(640px, 90vh);
  background: var(--bg-chat); border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.pm-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.pm-left { background: var(--bg-side); position: relative; overflow-y: auto; }
.pm-banner { height: 105px; background-size: cover; background-position: center; }
.pm-avatar { position: absolute; top: 58px; left: 16px; border: 6px solid var(--bg-side); border-radius: 50%; }
.pm-avatar .avatar { border-radius: 50%; }
.pm-body { padding: 56px 16px 16px; }
.pm-body h2 { color: var(--header); font-size: 22px; font-weight: 700; }
.pm-body .muted { font-size: 14px; }
.pm-actions { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.pm-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.pm-info { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.pm-info > div { font-size: 14px; color: var(--text); }
.pm-info .label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.pm-right { padding: 48px 20px 20px; overflow-y: auto; }
.pm-tabs { display: flex; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 10px; font-weight: 600; font-size: 14px; color: var(--muted); flex-wrap: wrap; }
.pm-tabs .active { color: var(--header); border-bottom: 2px solid var(--header); padding-bottom: 8px; margin-bottom: -11px; }
.pm-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.pm-activity { background: var(--bg-side); border-radius: 8px; padding: 14px; }
@media (max-width: 720px) {
  .profile-modal { grid-template-columns: 1fr; height: 92vh; overflow-y: auto; }
  .pm-right { padding-top: 16px; }
}

/* ===== Menu messaggi, reazioni e promemoria ===== */
.react-row { display: flex; justify-content: space-between; gap: 4px; padding: 4px 2px 8px; }
.ctx-react {
  width: 38px; height: 38px; border-radius: 8px; background: #2b2d31;
  display: inline-flex; align-items: center; justify-content: center;
}
.ctx-react:hover { background: var(--accent); }
.ctx-row { padding: 0; background: transparent; }
.ctx-row:hover { background: transparent; }
.ctx-item .ctx-ico { color: inherit; }

.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px;
  background: var(--bg-panel); border: 1px solid transparent; color: var(--text); font-size: 13px;
}
.reaction:hover { border-color: rgba(255,255,255,.15); }
.reaction.mine { background: rgba(88,101,242,.18); border-color: var(--accent); }
.edited { color: var(--muted); font-size: 11px; }
[data-msg] { cursor: default; }

/* ===== Chiamate vocali ===== */
.call-btn { margin-left: auto; color: var(--text); }
.call-btn:hover { color: var(--online); }
.call-btn.live { color: var(--online); }

.call-panel {
  margin: 8px; padding: 10px; border-radius: 8px; background: #1e3a2a;
  border: 1px solid rgba(35,165,90,.35); flex-shrink: 0;
}
.call-head { display: flex; align-items: center; gap: 8px; }
.call-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--online);
}
.call-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.call-title strong { color: var(--online); font-size: 13px; }
.call-title small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-hang { color: var(--dnd); }
.call-hang:hover { background: rgba(242,63,67,.15); }
.call-tiles { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.call-tile {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px;
  cursor: pointer; color: var(--text); font-size: 13px;
}
.call-tile:hover { background: rgba(255,255,255,.06); }
.call-tile span:not(.tag) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-tile .tag { color: var(--dnd); display: inline-flex; }
.call-tile.speaking .avatar { box-shadow: 0 0 0 2px var(--online); }
.call-tile .avatar { transition: box-shadow .15s; }

@keyframes callpulse {
  0% { box-shadow: 0 0 0 0 rgba(35,165,90,.7); }
  70% { box-shadow: 0 0 0 8px rgba(35,165,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); }
}

.vol-row { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px; color: var(--text); font-size: 14px; }
.vol-row input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ===== Schermata chiamata (in alto nella chat) ===== */
#call-view { display: flex; flex-direction: column; flex-shrink: 0; background: #000; }
.call-topbar {
  height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  background: #000; border-bottom: 1px solid rgba(255,255,255,.06);
}
.ct-left { display: flex; align-items: center; gap: 8px; color: var(--header); min-width: 0; }
.ct-live { display: inline-flex; align-items: center; gap: 6px; color: var(--online); font-size: 13px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.ct-right { display: flex; align-items: center; gap: 8px; }
.ct-right .icon-btn { color: var(--muted); }
.ct-right .icon-btn:hover { color: var(--header); }
.ct-search {
  width: 220px; padding: 6px 10px; font-size: 13px; background: #121214; border: 1px solid #2a2b2e;
}
.stage { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; padding: 36px 16px; min-height: 260px; }
.stage-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stage-tile .avatar { border: 4px solid transparent; transition: border-color .15s, box-shadow .15s; }
.stage-tile.speaking .avatar { border-color: var(--online); box-shadow: 0 0 0 2px #000; }
.stage-name { color: var(--text); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.stage-name .tag { color: var(--dnd); display: inline-flex; }
.controls { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 20px; }
.ctl-group { display: flex; align-items: center; gap: 2px; background: #1e1f22; border-radius: 12px; padding: 4px; }
.ctl {
  width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: transparent;
}
.ctl:hover { background: #2e3035; }
.ctl.off { color: var(--dnd); }
.ctl.hang { background: #da373c; color: #fff; width: 64px; height: 44px; border-radius: 12px; }
.ctl.hang:hover { background: #b52e32; }
#call-view + .messages { min-height: 0; }

/* ===== Avviso di Orbi in chiamata ===== */
.bot-note { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; margin-top: 14px; }
.bn-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.bn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bn-body { min-width: 0; }
.app-badge {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: #5865f2;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; vertical-align: middle;
}
.bn-foot { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.bn-foot button { color: #00a8fc; font-size: 12px; text-decoration: none; }
.bn-foot button:hover { text-decoration: underline; }

/* ===== Condivisione schermo ===== */
.modal:has(.sp-tabs) { max-width: 760px; }
.sp-tabs { display: flex; gap: 6px; background: #1e1f22; border-radius: 10px; padding: 4px; }
.sp-tabs button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; border-radius: 8px; color: var(--muted); font-weight: 600;
}
.sp-tabs button:hover { color: var(--text); }
.sp-tabs button.active { background: #3a3c42; color: var(--header); }
.sp-body { margin: 18px 4px; color: var(--muted); min-height: 60px; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sp-info strong { display: block; color: var(--header); }
.sp-info small { color: var(--muted); }
.sp-q { display: flex; background: #1e1f22; border-radius: 8px; padding: 3px; }
.sp-q button { padding: 6px 14px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.sp-q button.active { background: #3a3c42; color: var(--header); }
.screen-wrap { display: flex; justify-content: center; padding: 12px 16px 0; }
.screen-wrap video { width: 100%; max-width: 900px; max-height: 360px; background: #111; border-radius: 10px; object-fit: contain; }
.ctl.live { color: var(--online); }

.ctl-vol { align-items: center; padding: 0 10px; color: var(--muted); gap: 8px; }
.ctl-vol input[type="range"] { width: 110px; accent-color: var(--accent); }

/* ===== Comandi chiamata, versione pulita ===== */
.controls { gap: 14px; }
.round-ctl {
  width: 52px; height: 52px; border-radius: 50%; background: #2b2d31; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}
.round-ctl:hover { background: #3a3c42; }
.round-ctl.off { color: var(--dnd); background: rgba(242,63,67,.12); }
.round-ctl.live { color: var(--online); background: rgba(35,165,90,.15); }
.ctl-vol {
  height: 52px; padding: 0 16px; border-radius: 26px; background: #2b2d31;
  display: inline-flex; align-items: center; gap: 10px; color: var(--muted);
}
.ctl-vol input[type="range"] { width: 120px; accent-color: var(--accent); }
.ctl.hang { width: 72px; height: 52px; border-radius: 26px; }

/* =====================================================
   TEMA HALLOWEEN
   Nero notte, arancio zucca e viola stregato
   ===================================================== */
:root {
  --bg-server: #0d0703;
  --bg-side: #170c05;
  --bg-chat: #1f1008;
  --bg-input: #2c190b;
  --bg-panel: #120803;
  --text: #f4e3c8;
  --muted: #b38e6a;
  --header: #ffd08a;
  --accent: #ff7a18;
  --hover: rgba(255, 122, 24, 0.14);
  --online: #9cff3a;
  --idle: #ffb020;
  --dnd: #ff3b3b;
  --danger: #c2185b;
  --halloween-purple: #8e3bff;
}

body {
  background:
    radial-gradient(ellipse at 15% 0%, rgba(142, 59, 255, .18), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(255, 122, 24, .14), transparent 55%),
    var(--bg-server);
}

/* Barra dei server: icone a forma di zucca al passaggio */
.server-icon:hover, .server-icon.active {
  background: linear-gradient(135deg, #ff7a18, #8e3bff);
  box-shadow: 0 0 14px rgba(255, 122, 24, .55);
}
.server-icon.add { color: var(--online); }
.server-icon.add:hover { background: linear-gradient(135deg, #9cff3a, #2c7a00); }
.separator { background: linear-gradient(90deg, transparent, #8e3bff, transparent); height: 2px; }

/* Intestazioni e separatori con un tocco arancio */
.sidebar-header, .main-header, .modal header {
  border-bottom: 1px solid rgba(255, 122, 24, .25) !important;
  box-shadow: 0 1px 0 rgba(142, 59, 255, .25) !important;
}
.category { color: #d89a5a; }
.section-label, .section-title, .right-head { color: #d89a5a; }

/* Tab e menu attivi */
.nav-item.active, .channel.active, .dm-item.active, #channel-list li.active {
  background: linear-gradient(90deg, rgba(255, 122, 24, .22), rgba(142, 59, 255, .14));
  color: var(--header);
}
.tab.active { background: rgba(255, 122, 24, .2); color: var(--header); }
.tab.accent { background: linear-gradient(135deg, #8e3bff, #5a1ba8); }
.tab.accent:hover, .tab.accent.active { background: linear-gradient(135deg, #a05bff, #6d2fc4); }

/* Pulsanti */
.btn.primary { background: linear-gradient(135deg, #ff7a18, #d94f00); color: #1a0a00; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 0 12px rgba(255, 122, 24, .5); }
.btn.danger { background: linear-gradient(135deg, #c2185b, #6a0030); }
.btn.ghost { border: 1px solid rgba(255, 122, 24, .35); }

/* Badge founder: viola e arancio */
.founder-badge {
  background: linear-gradient(135deg, #8e3bff, #ff7a18);
  color: #fff;
  box-shadow: 0 0 8px rgba(142, 59, 255, .6);
}
.app-badge { background: linear-gradient(135deg, #8e3bff, #5a1ba8); }

/* Messaggi e link */
.msg-author { color: var(--header); }
.bn-foot button, .bn-foot { color: #d89a5a; }
.bn-foot button { color: #ff9a3c; }
.reaction.mine { background: rgba(255, 122, 24, .2); border-color: #ff7a18; }
.reaction { background: #2a1607; }

/* Chiamata: sfondo nero con bagliore viola */
#call-view { background: radial-gradient(ellipse at top, #2a0f3f 0%, #000 70%); }
.call-topbar { background: transparent; border-bottom-color: rgba(142, 59, 255, .25); }
.ct-live { color: var(--online); }
.stage-tile.speaking .avatar { border-color: var(--online); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(156, 255, 58, .6); }
.round-ctl { background: #2a1607; }
.round-ctl:hover { background: #3d210b; }
.round-ctl.live { background: rgba(156, 255, 58, .15); }
.ctl-vol { background: #2a1607; }
.ctl.hang { background: linear-gradient(135deg, #c2185b, #6a0030); }
.ctl.hang:hover { background: #8a0040; }
.call-panel { background: #1f0f2e; border-color: rgba(142, 59, 255, .45); }
.call-title strong { color: #c79bff; }
.call-dot { background: #c79bff; }
.call-hang { color: var(--dnd); }

/* Profilo a finestra */
.profile-modal { box-shadow: 0 0 40px rgba(142, 59, 255, .35), 0 8px 28px rgba(0,0,0,.6); border: 1px solid rgba(255, 122, 24, .3); }
.pm-left { background: #140a04; }
.pm-avatar { border-color: #140a04; }
.pm-tabs .active { color: var(--header); border-bottom-color: #ff7a18; }
.pm-activity { background: #140a04; }

/* Menu contestuali */
.context-menu {
  background: #0f0703;
  border: 1px solid rgba(255, 122, 24, .3);
  box-shadow: 0 8px 22px rgba(0,0,0,.7), 0 0 14px rgba(142, 59, 255, .25);
}
.ctx-item:hover { background: linear-gradient(90deg, #ff7a18, #8e3bff); color: #fff; }
.ctx-react { background: #2a1607; }
.ctx-react:hover { background: #8e3bff; }

/* Modali e finestre */
.modal { border: 1px solid rgba(255, 122, 24, .3); box-shadow: 0 0 30px rgba(142, 59, 255, .3), 0 8px 24px rgba(0,0,0,.6); }
.modal-backdrop { background: rgba(10, 3, 1, .75); }

/* Schermata di accesso con cornice arancio */
.auth {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 122, 24, .18), transparent 60%),
    linear-gradient(rgba(10,3,1,.85), rgba(10,3,1,.95)),
    url("assets/background.jpeg") center / cover;
}
.auth-card { border: 1px solid rgba(255, 122, 24, .35); box-shadow: 0 0 40px rgba(142, 59, 255, .35); }
.auth-card h1 { color: #ffb347; text-shadow: 0 0 12px rgba(255, 122, 24, .5); }

/* Campi di testo */
input, select, textarea { background: var(--bg-input); border: 1px solid rgba(255,122,24,.12); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px #ff7a18; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #4a2510; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #8e3bff; }
::-webkit-scrollbar-track { background: transparent; }

/* Notifiche e avvisi */
.toast { background: #120803; border: 1px solid #ff7a18; box-shadow: 0 0 14px rgba(255,122,24,.4); color: var(--header); }
.error { color: #ff6b6b; }

/* Negozio: scritta COMING SOON con bagliore arancio */
.coming-soon h1 { color: #ffb347; text-shadow: 0 0 18px rgba(255, 122, 24, .8), 0 0 36px rgba(142, 59, 255, .5); }

/* Lista membri e amici */
.member:hover, .friend-row:hover, .dm-item:hover, .channel:hover { background: rgba(255, 122, 24, .12); }
.empty-hint, .empty-big { color: #b38e6a; }


/* =====================================================
   HALLOWEEN - decorazioni
   ===================================================== */

/* Livello animato sopra l'interfaccia, senza bloccare i clic */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.bat { position: absolute; width: 56px; color: #ff7a18; opacity: .55; filter: drop-shadow(0 0 6px rgba(255,122,24,.7)); }
.bat svg { width: 100%; height: auto; fill: currentColor; display: block; }
.b1 { top: 18%; animation: flyA 18s linear infinite; }
.b2 { top: 58%; width: 40px; animation: flyB 24s linear infinite; animation-delay: -8s; }
.b3 { top: 36%; width: 48px; animation: flyA 21s linear infinite; animation-delay: -13s; }
@keyframes flyA { from { transform: translate(-120px, 0) scale(1); } 50% { transform: translate(50vw, -40px) scale(1.08); } to { transform: translate(110vw, 10px) scale(1); } }
@keyframes flyB { from { transform: translate(110vw, 0) scaleX(-1); } to { transform: translate(-120px, -30px) scaleX(-1); } }

.ghost { position: absolute; width: 46px; opacity: .22; animation: floaty 7s ease-in-out infinite; }
.ghost svg { width: 100%; height: auto; fill: #f4e3c8; display: block; }
.g1 { top: 70%; left: 8%; }
.g2 { top: 22%; right: 14%; width: 36px; animation-delay: -3s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

/* Ragnatele negli angoli dei pannelli principali */
.main::before, .right::before {
  content: ""; position: absolute; top: 0; right: 0; width: 180px; height: 180px; pointer-events: none;
  background: repeating-radial-gradient(circle at 100% 0, transparent 0 22px, rgba(244,227,200,.06) 22px 23px);
  z-index: 0;
}
.main > * { position: relative; z-index: 1; }

/* Negozio */
.coming-soon.halloween { position: relative; overflow: hidden; }
.deco { position: absolute; width: 90px; opacity: .8; animation: floaty 6s ease-in-out infinite; }
.deco-l { left: 8%; top: 18%; }
.deco-r { right: 8%; top: 22%; width: 70px; animation-delay: -2s; }
.deco svg, .shop-row svg { width: 100%; height: auto; display: block; }
.pumpkin { width: 100%; height: auto; filter: drop-shadow(0 0 10px rgba(255,122,24,.6)); }
.ghost-ico { width: 100%; height: auto; filter: drop-shadow(0 0 8px rgba(244,227,200,.35)); }
.shop-row { display: flex; gap: 22px; align-items: flex-end; margin-top: 18px; }
.shop-row svg { width: 54px; }
.coming-soon.halloween h1 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .08em; }

/* Missioni */
.spooky-title { color: #ffb347; font-family: Georgia, "Times New Roman", serif; font-size: 26px; text-shadow: 0 0 14px rgba(255,122,24,.6); margin-bottom: 4px; }
.mission { display: flex; gap: 14px; align-items: center; }
.mission svg { width: 56px; flex-shrink: 0; }
.mission h4 { margin-bottom: 4px; }
.page.halloween .muted { margin-bottom: 14px; }

/* Vortex: cornice viola */
.hero { border: 1px solid rgba(142,59,255,.45); box-shadow: 0 0 30px rgba(142,59,255,.35); }

/* Chat del server: niente pellicola grigia, sfondo trasparente */
.messages {
  background: none !important;
}

/* =====================================================
   RIFINITURE: niente sottolineature, cursori puliti, data elegante
   ===================================================== */
*, *::before, *::after { text-decoration: none !important; }

/* Niente selezione di testo sui comandi */
button, .ctl, .round-ctl, .ctl-vol, .ctl-group, .nav-item, .server-icon,
.channel, .dm-item, .member, .tab, .ctx-item, .ctx-react, .reaction,
.vol-row, input[type="range"] {
  -webkit-user-select: none; user-select: none;
}

/* Cursore volume: sottile, arancio, senza contorni */
input[type="range"] {
  -webkit-appearance: none; appearance: none; background: transparent;
  height: 18px; margin: 0; padding: 0; border: none; box-shadow: none !important;
  outline: none; cursor: pointer; width: 120px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #ff7a18 var(--pct, 50%), #3a2414 var(--pct, 50%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #ffb347; border: none; box-shadow: 0 0 8px rgba(255,122,24,.7);
}
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 4px; background: #3a2414;
}
input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 4px; background: #ff7a18;
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: none; border-radius: 50%; background: #ffb347;
  box-shadow: 0 0 8px rgba(255,122,24,.7);
}
input[type="range"]:focus { outline: none; box-shadow: none !important; }

/* Data di nascita: compatta e personalizzata */
.birth { position: relative; display: flex; flex-direction: column; gap: 6px; }
.birth-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.birth-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: var(--bg-input); color: var(--text); border: 1px solid rgba(255,122,24,.2);
  transition: border-color .15s, box-shadow .15s;
}
.birth-btn:hover { border-color: rgba(255,122,24,.55); }
.birth-btn svg { color: var(--accent); }
.birth-pop {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; z-index: 20;
  display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 4px; padding: 8px;
  background: #140a04; border: 1px solid rgba(255,122,24,.35); border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.6), 0 0 16px rgba(142,59,255,.25);
}
.bp-col { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.bp-col button {
  padding: 6px 8px; border-radius: 7px; font-size: 13px; color: var(--muted); text-align: center;
}
.bp-col button:hover { background: rgba(255,122,24,.14); color: var(--text); }
.bp-col button.on { background: linear-gradient(135deg, #ff7a18, #8e3bff); color: #fff; font-weight: 700; }
.birth small { font-size: 12px; }

/* Finestra di conferma */
.confirm-text { font-size: 15px; color: var(--text); line-height: 1.45; }

/* Pulsante "Cambia banner" sempre cliccabile:
   la riga della foto profilo sovrapposta al banner non deve coprirlo */
.banner-edit { position: relative; z-index: 2; }
.banner-edit .pick-btn { position: relative; z-index: 3; cursor: pointer; }
.avatar-edit { pointer-events: none; position: relative; z-index: 1; }
.avatar-edit > * { pointer-events: auto; }
.srv-banner-pick { position: relative; z-index: 2; }
.srv-banner-pick .pick-btn { cursor: pointer; }

/* Foto profilo sopra il banner */
.avatar-edit { z-index: 4 !important; }
.avatar-edit > div { position: relative; z-index: 5; box-shadow: 0 0 0 3px rgba(255,122,24,.35), 0 6px 18px rgba(0,0,0,.6); }


/* =====================================================
   NEGOZIO E ORBITS
   ===================================================== */
.orb-balance {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; background: linear-gradient(135deg, rgba(142,59,255,.35), rgba(255,122,24,.25));
  border: 1px solid rgba(255,122,24,.4); color: #ffd08a; font-size: 14px; font-weight: 700;
}
.orb-balance svg, .mr-reward svg, .shop-card .btn svg { color: #c79bff; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 12px 0 28px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.shop-card h4 { font-size: 14px; color: var(--header); }
.shop-card .btn { display: inline-flex; align-items: center; gap: 6px; }
.shop-prev { height: 96px; display: flex; align-items: center; justify-content: center; }
.shop-prev .avatar { overflow: visible; }
.sample { font-size: 20px; color: var(--text); }

.mission-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.mission-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; }
.mr-info h4 { color: var(--header); margin-bottom: 8px; }
.mr-bar { height: 8px; border-radius: 6px; background: #2c190b; overflow: hidden; margin-bottom: 4px; }
.mr-bar span { display: block; height: 100%; background: linear-gradient(90deg, #ff7a18, #8e3bff); }
.mr-reward { display: inline-flex; align-items: center; gap: 6px; color: #ffd08a; font-weight: 700; }

/* Cappelli sull'avatar */
.hat-ov {
  position: absolute; left: 50%; transform: translateX(-50%); top: -40%;
  width: 115%; pointer-events: none; z-index: 3;
}
.hat-ov svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 4px rgba(255,122,24,.5)); }

/* Font dei messaggi */
.f-pixel {
  font-family: "Courier New", Consolas, monospace; font-weight: 700; letter-spacing: .08em;
  text-shadow: 2px 2px 0 #000; image-rendering: pixelated;
}
.f-halloween {
  font-family: Georgia, "Times New Roman", serif; color: #ffb347 !important;
  text-shadow: 0 0 6px #ff7a18, 0 0 14px #8e3bff;
}
.f-neon {
  color: #f0d6ff !important;
  text-shadow: 0 0 4px #c79bff, 0 0 10px #8e3bff, 0 0 22px #8e3bff;
}
.f-typewriter { font-family: "Courier New", Consolas, monospace; letter-spacing: .04em; }


/* ===== Correzioni negozio ===== */
.orb-balance {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px; background: #2c190b;
  border: 1px solid #ff7a18; color: #ffb347; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.orb-balance b { color: #fff; font-size: 13px; letter-spacing: 0; }

.f-pixel {
  font-family: "Press Start 2P", "Courier New", monospace !important;
  font-size: .72em; line-height: 1.9; font-weight: 400; letter-spacing: 0;
  text-shadow: 2px 2px 0 #000; image-rendering: pixelated;
}
.f-halloween {
  font-family: "Creepster", Georgia, serif !important;
  font-size: 1.35em; letter-spacing: .04em; font-weight: 400;
  color: #ffb347 !important;
  text-shadow: 0 0 6px #ff7a18, 0 0 14px #8e3bff;
}
.shop-prev .f-pixel.sample { font-size: 12px; }
.shop-prev .f-halloween.sample { font-size: 28px; }


/* =====================================================
   Cornici, colori del nome, badge, giochi, saldo
   ===================================================== */
.bal-card {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin-bottom: 18px;
  border-radius: 12px; background: linear-gradient(135deg, #2a1245, #3a1a0a);
  border: 1px solid rgba(255,122,24,.35); color: #f4e3c8;
}
.bal-card svg { color: #c79bff; }
.bal-card b { font-size: 26px; color: #fff; margin-left: 6px; }
.bal-unit { color: #ffb347; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }

.nm { font-weight: inherit; }
.custom-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(142,59,255,.25); border: 1px solid #8e3bff; color: #d9b8ff;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle;
}
.custom-badge.big { font-size: 13px; padding: 6px 14px; margin: 0; }
.sample.nm { font-size: 22px; }

/* Cornici sull'avatar */
.frame-fire { box-shadow: 0 0 0 3px #ff7a18, 0 0 14px 4px rgba(255,80,0,.7); }
.frame-ghost { box-shadow: 0 0 0 3px #f4e3c8, 0 0 16px 4px rgba(244,227,200,.5); animation: frameGlow 2.4s ease-in-out infinite; }
.frame-toxic { box-shadow: 0 0 0 3px #9cff3a, 0 0 14px 4px rgba(156,255,58,.6); animation: frameGlow 1.6s ease-in-out infinite; }
@keyframes frameGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

.done-tag {
  font-size: 12px; font-weight: 700; color: #9cff3a; padding: 6px 10px; border-radius: 8px;
  background: rgba(156,255,58,.12); border: 1px solid rgba(156,255,58,.35); white-space: nowrap;
}
.mr-empty { display: inline-block; width: 1px; }

.game-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.gc-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.gc-icon svg { width: 100%; height: 100%; }
.game-top { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 10px; font-size: 14px; }
.game-top b { color: var(--header); font-size: 16px; }

.gh-arena {
  position: relative; height: 300px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #2a1245, #0d0703 70%);
  border: 1px solid rgba(142,59,255,.35);
}
.gh-ghost { position: absolute; width: 56px; cursor: pointer; animation: ghostPop .25s ease-out; }
.gh-ghost svg { width: 100%; height: auto; filter: drop-shadow(0 0 8px rgba(244,227,200,.5)); }
.gh-ghost:hover svg { filter: drop-shadow(0 0 12px #ff7a18); }
@keyframes ghostPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mem-card {
  position: relative; aspect-ratio: 1; border-radius: 10px; background: #2a1245;
  border: 1px solid rgba(142,59,255,.35); transition: transform .2s;
}
.mem-card .mem-face, .mem-card .mem-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.mem-card .mem-face { opacity: 0; transform: rotateY(180deg); transition: opacity .15s; padding: 16px; }
.mem-card .mem-face svg { width: 100%; height: 100%; }
.mem-card .mem-back { color: #8e3bff; font-size: 22px; font-weight: 700; }
.mem-card.open .mem-face, .mem-card.matched .mem-face { opacity: 1; }
.mem-card.open .mem-back, .mem-card.matched .mem-back { opacity: 0; }
.mem-card.matched { border-color: #9cff3a; background: rgba(156,255,58,.12); }
.mem-card:hover { transform: translateY(-2px); }

.result-box { text-align: center; padding: 18px 8px; }
.result-box b { font-size: 20px; color: var(--header); }
.result-box p { margin-top: 6px; color: var(--muted); }
.result-box.win b { color: #9cff3a; }


/* ===== Stato personalizzato ===== */
.status-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px;
  border-radius: 10px; background: var(--bg-input); border: 1px solid rgba(255,122,24,.15);
  color: var(--muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.sp-opt:hover { border-color: rgba(255,122,24,.5); color: var(--text); }
.sp-opt.on { border-color: #ff7a18; color: var(--header); background: rgba(255,122,24,.12); }
.sp-opt .st-ico { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.sp-opt .st-dot { width: 14px; height: 14px; border-radius: 50%; }
.sp-opt small { font-size: 10px; font-weight: 400; color: var(--muted); }


/* ===== Chiamata in arrivo ===== */
.incoming { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 80; }
.inc-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 300px;
  background: #140a04; border: 1px solid #ff7a18; border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 22px rgba(142,59,255,.45);
}
.inc-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.inc-text strong { color: var(--header); font-size: 15px; }
.inc-text small { color: var(--muted); font-size: 13px; }
.inc-actions { display: flex; gap: 8px; }
.ctl.accept { background: #23a55a; color: #fff; width: 52px; height: 44px; border-radius: 12px; }
.ctl.accept:hover { background: #1a8247; }


/* ===== Livello del tuo microfono ===== */
.mic-meter {
  width: 240px; height: 6px; margin: 0 auto 6px; border-radius: 6px;
  background: #2a1607; overflow: hidden;
}
.mic-meter span {
  display: block; height: 100%; width: 0%; border-radius: 6px;
  background: linear-gradient(90deg, #9cff3a, #ffb020, #ff3b3b);
  transition: width .12s linear;
}