/* ============================================
   PsyVerse Quiz - Main Styles
   ============================================ */

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

html, body {
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f0effe;
  color: #26215C;
  -webkit-font-smoothing: antialiased;
}

.screen { min-height: 100vh; }
.hidden { display: none !important; }
.fade-in { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── LOGIN ───────────────────────────────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #534AB7;
  padding: 1.5rem 1rem;
}
.login-shell > * { width: 100%; max-width: 380px; }
.login-top { text-align: center; margin-bottom: 1.25rem; }
.brain-blob {
  width: 64px; height: 64px; border-radius: 18px;
  background: #7F77DD; display: flex; align-items: center;
  justify-content: center; font-size: 28px; margin: 0 auto 1rem;
}
.login-title { font-size: 22px; font-weight: 700; color: #EEEDFE; margin-bottom: 4px; }
.login-sub   { font-size: 13px; color: #AFA9EC; }
.login-card  { background: #EEEDFE; border-radius: 18px; padding: 1.25rem; }
.field-label { font-size: 11px; font-weight: 700; color: #534AB7; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; display: block; }
.field-optional { font-size: 10px; color: #AFA9EC; text-transform: none; letter-spacing: 0; font-weight: 400; }
.psy-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #AFA9EC; background: #fff;
  color: #26215C; font-family: inherit; font-size: 14px; margin-bottom: 12px;
}
.psy-input:focus { outline: none; border-color: #534AB7; }
.psy-input::placeholder { color: #AFA9EC; }
.pin-dots { display: flex; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.pin-dot {
  width: 46px; height: 46px; border-radius: 12px;
  border: 1.5px solid #AFA9EC; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #26215C; font-weight: 500; transition: all .15s;
}
.pin-dot.on { border-color: #534AB7; background: #534AB7; color: #EEEDFE; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.npb {
  padding: 12px; border-radius: 10px; border: none;
  background: #fff; color: #26215C; font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.npb:hover { background: #CECBF6; }
.npb.del  { background: #CECBF6; color: #3C3489; font-size: 13px; }
.login-btn {
  width: 100%; padding: 13px; border-radius: 12px; border: none;
  background: #534AB7; color: #EEEDFE; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; margin-top: 14px; transition: background .15s;
}
.login-btn:hover { background: #3C3489; }
.back-btn {
  width: 100%; padding: 10px; border-radius: 12px;
  border: 1.5px solid #AFA9EC; background: transparent;
  color: #534AB7; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; margin-top: 8px;
}
.login-hint   { font-size: 12px; color: #7F77DD; text-align: center; margin-top: 10px; }
.reg-step-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #534AB7; color: #EEEDFE; border-radius: 20px;
  padding: 4px 12px; font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.error-msg {
  background: #FCEBEB; color: #791F1F; border: 1px solid #F7C1C1;
  border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 10px;
}

/* ── HEADER ──────────────────────────────────────────────────────────────── */
#header-component { position: sticky; top: 0; z-index: 100; }

.app-header {
  background: #534AB7;
  display: flex; flex-direction: column; gap: 0;
}

/* Row 1: logo + icon buttons */
.hdr-row1 {
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* Row 2: text tabs — full width strip below row 1 */
.hdr-row2 {
  background: #3C3489;
  padding: 6px 14px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.hdr-logo  { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.hdr-icon  { width: 30px; height: 30px; border-radius: 9px; background: #7F77DD; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.hdr-name  { font-size: 14px; font-weight: 700; color: #EEEDFE; }
.hdr-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.hdr-icon-btn {
  position: relative; width: 32px; height: 32px; border-radius: 9px;
  background: #7F77DD; display: flex; align-items: center; justify-content: center;
  font-size: 14px; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.hdr-icon-btn:hover { background: #AFA9EC; }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: #E24B4A; color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 20px; padding: 1px 4px; min-width: 16px; text-align: center;
  border: 1.5px solid #534AB7;
}
.hdr-lb-btn {
  padding: 5px 11px; border-radius: 20px; background: #AFA9EC;
  border: none; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; color: #26215C; white-space: nowrap;
  transition: background .15s; flex-shrink: 0;
}
.hdr-lb-btn:hover { background: #CECBF6; }

/* On wider screens collapse back to single row */
@media (min-width: 560px) {
  .app-header { flex-direction: row; align-items: center; padding: 10px 16px; gap: 8px; }
  .hdr-row1 { padding: 0; flex: 1; border: none; }
  .hdr-row2 { padding: 0; background: transparent; border: none; flex-shrink: 0; }
}

/* ── TICKER ──────────────────────────────────────────────────────────────── */
.ticker-wrap {
  background: #26215C; height: 42px; display: flex;
  align-items: center; border-bottom: 2px solid #534AB7; overflow: hidden;
}
.ticker-label {
  background: #7F77DD; color: #EEEDFE; font-size: 11px; font-weight: 700;
  padding: 0 14px; height: 100%; display: flex; align-items: center;
  letter-spacing: 1.5px; text-transform: uppercase; flex-shrink: 0;
}
.ticker-track { overflow: hidden; flex: 1; height: 100%; display: flex; align-items: center; }
.ticker-inner { display: flex; gap: 40px; white-space: nowrap; animation: tscroll 32s linear infinite; }
@keyframes tscroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-msg  { font-size: 13px; color: #EEEDFE; white-space: nowrap; display: flex; align-items: center; gap: 7px; }
.ticker-msg.blink .ticker-text     { animation: tblink 1.4s ease-in-out infinite; }
@keyframes tblink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ticker-msg.bold .ticker-text      { font-weight: 700; }
.ticker-msg.highlight .ticker-text { color: #FFD700; font-weight: 600; }
.ticker-msg.alert .ticker-text     { color: #FFAB40; font-weight: 600; }
.ticker-msg.green .ticker-text     { color: #34D399; }
.ticker-dot  { width: 6px; height: 6px; border-radius: 50%; background: #7F77DD; flex-shrink: 0; }

/* ── MAIN APP LAYOUT ─────────────────────────────────────────────────────── */
#main-app { display: flex; flex-direction: column; min-height: 100vh; }
#quiz-container, #stats-dashboard, #leaderboard-container { max-width: 600px; width: 100%; margin: 0 auto; }
#quiz-container { padding: 0; }
#stats-dashboard, #leaderboard-container { padding: 12px 12px 0; }

/* ── QUIZ LAUNCH CARD ────────────────────────────────────────────────────── */
.quiz-launch-card {
  background: #fff; border-radius: 16px;
  border: 1.5px solid #CECBF6; margin: 12px;
  overflow: hidden;
}
.qlc-body { padding: 2rem 1.5rem; text-align: center; }
.qlc-icon { font-size: 56px; margin-bottom: 12px; }
.qlc-title { font-size: 20px; font-weight: 700; color: #26215C; margin-bottom: 8px; }
.qlc-mult { font-size: 13px; color: #534AB7; font-weight: 700; margin-bottom: 6px; }
.qlc-msg  { font-size: 14px; color: #6b7280; margin-bottom: 20px; line-height: 1.6; }
.qlc-btn  {
  display: inline-block; padding: 13px 32px; border-radius: 12px;
  background: #534AB7; color: #EEEDFE; font-size: 16px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit; transition: background .15s;
}
.qlc-btn:hover   { background: #3C3489; }
.qlc-btn-sec {
  display: inline-block; padding: 10px 24px; border-radius: 12px;
  background: #EEEDFE; color: #534AB7; font-size: 14px; font-weight: 700;
  border: 1.5px solid #CECBF6; cursor: pointer; font-family: inherit;
  margin-top: 8px; transition: background .15s;
}
.qlc-btn-sec:hover { background: #CECBF6; }

/* ── LOADING ─────────────────────────────────────────────────────────────── */
#loading-overlay {
  position: fixed; inset: 0; background: rgba(83,74,183,.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9000; gap: 16px;
}
.loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid #CECBF6; border-top-color: #EEEDFE;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loading-overlay p { color: #EEEDFE; font-size: 14px; font-weight: 600; }

/* ── TOASTS ──────────────────────────────────────────────────────────────── */
#toast-container { position: fixed; bottom: 20px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 11px 14px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; pointer-events: all; box-shadow: 0 4px 16px #0001;
  animation: slideIn .2s ease; max-width: 320px;
}
.toast.success { border-left: 3px solid #1D9E75; }
.toast.error   { border-left: 3px solid #E24B4A; }
.toast-close   { background: none; border: none; cursor: pointer; color: #9ca3af; font-size: 14px; margin-left: auto; padding: 0 2px; }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }

/* ── NOTIFICATIONS PANEL ─────────────────────────────────────────────────── */
.notif-overlay, .settings-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000;
}
.notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw);
  background: #fff; z-index: 1001; display: flex; flex-direction: column;
  box-shadow: -4px 0 24px #0002;
}
.notif-header {
  background: #534AB7; color: #EEEDFE; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.notif-close { background: none; border: none; color: #EEEDFE; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.notif-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.notif-item {
  padding: 12px; border-radius: 12px; background: #f9fafb;
  border: 1.5px solid #f3f4f6; display: flex; gap: 10px; align-items: flex-start;
}
.notif-item.unread { background: #EEEDFE; border-color: #CECBF6; }
.notif-icon    { font-size: 20px; flex-shrink: 0; }
.notif-body    { flex: 1; min-width: 0; }
.notif-title   { font-size: 13px; font-weight: 700; color: #26215C; margin-bottom: 3px; }
.notif-msg     { font-size: 12px; color: #6b7280; line-height: 1.5; margin-bottom: 4px; }
.notif-time    { font-size: 11px; color: #9ca3af; }
.notif-dismiss { flex-shrink: 0; background: none; border: none; color: #9ca3af; font-size: 14px; cursor: pointer; padding: 2px 4px; border-radius: 6px; line-height: 1; transition: background .15s, color .15s; }
.notif-dismiss:hover { background: #fee2e2; color: #ef4444; }
.notif-empty { text-align: center; padding: 2rem; font-size: 14px; color: #9ca3af; }
.notif-footer { padding: 12px; border-top: 1px solid #f3f4f6; flex-shrink: 0; }
.notif-footer button { width: 100%; padding: 9px; border-radius: 10px; background: #EEEDFE; border: none; color: #534AB7; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ── SETTINGS PANEL ──────────────────────────────────────────────────────── */
.settings-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 100vw);
  background: #fff; z-index: 1001; display: flex; flex-direction: column;
  box-shadow: -4px 0 24px #0002; overflow-y: auto;
}
.settings-header {
  background: #534AB7; color: #EEEDFE; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 700; flex-shrink: 0; position: sticky; top: 0;
}
.settings-close { background: none; border: none; color: #EEEDFE; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.settings-body  { padding: 16px; }
.settings-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f3f4f6; }
.settings-section:last-child { border: none; }
.settings-sec-title { font-size: 12px; font-weight: 700; color: #534AB7; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 12px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.settings-lbl { font-size: 14px; color: #6b7280; }
.settings-val { font-size: 14px; font-weight: 700; color: #26215C; }
.settings-input {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid #e5e7eb; background: #f9fafb;
  font-family: inherit; font-size: 14px; color: #26215C; margin-bottom: 10px;
}
.settings-input:focus { outline: none; border-color: #534AB7; }
.settings-btn {
  width: 100%; padding: 11px; border-radius: 10px; border: none;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.settings-btn-primary  { background: #534AB7; color: #EEEDFE; }
.settings-btn-primary:hover { background: #3C3489; }
.settings-btn-danger   { background: #FCEBEB; color: #E24B4A; border: 1.5px solid #F7C1C1; }
.settings-btn-danger:hover { background: #F7C1C1; }
.settings-msg { font-size: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
.settings-msg-success { background: #E1F5EE; color: #085041; }
.settings-msg-error   { background: #FCEBEB; color: #791F1F; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
/* mobile header handled by two-row layout above */

/* ── SCORING INFO HEADER BUTTON ──────────────────────────────────────────── */
.hdr-score-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border-radius: 9px;
  background: #FAEEDA; color: #633806;
  font-size: 12px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  border: none; cursor: pointer; font-family: inherit;
  animation: score-btn-blink 3s ease-in-out infinite;
  transition: background .15s;
}
.hdr-score-btn:hover {
  background: #FAC775; animation: none;
}
@keyframes score-btn-blink {
  0%, 85%, 100% { opacity: 1; }
  92%           { opacity: 0.35; }
}

/* ── COUNTDOWN PAGE FULL-PURPLE BODY ─────────────────────────────────────── */
/* When countdown is active, paint the whole page background purple */
#main-app:has(#countdown-page) {
  background: linear-gradient(160deg, #2d1b8e 0%, #534AB7 45%, #7c3aed 100%);
  min-height: 100vh;
}

/* Purple background when countdown screen is active */
#main-app.countdown-active {
  background: linear-gradient(160deg, #2d1b8e 0%, #534AB7 45%, #7c3aed 100%);
  min-height: 100vh;
}
/* Also paint the body so there are no white edges on wide screens */
body:has(#main-app.countdown-active) {
  background: #2d1b8e;
}

/* ── LOGO ────────────────────────────────────────────────────────────────── */
.login-logo {
  width: 130px; height: 130px; object-fit: contain;
  margin: 0 auto 0.5rem; display: block;
  background: #fff; border-radius: 16px; padding: 8px;
}
.hdr-logo-img {
  width: 30px; height: 30px; object-fit: contain;
  background: #fff; border-radius: 7px; padding: 2px;
  flex-shrink: 0;
}
.hdr-quiz-word { color: #AFA9EC; font-weight: 400; }

/* ── USER TYPE BADGE IN HEADER ───────────────────────────────────────────── */
.hdr-type-badge {
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}

/* ── SELECT INPUT (registration) ─────────────────────────────────────────── */
.psy-select {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid #AFA9EC; background: #fff;
  color: #26215C; font-family: inherit; font-size: 14px; margin-bottom: 12px;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237F77DD' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px;
}
.psy-select:focus { outline: none; border-color: #534AB7; }
.psy-select option[disabled] { color: #AFA9EC; }

/* ── LOGO ────────────────────────────────────────────────────────────────── */
.login-logo-img {
  width: 130px; height: 130px; object-fit: contain;
  border-radius: 20px; background: #fff;
  padding: 8px; margin: 0 auto 6px; display: block;
  mix-blend-mode: multiply;
}
.hdr-logo-img {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 8px; background: #fff; padding: 2px;
  mix-blend-mode: multiply; flex-shrink: 0;
}
.hdr-quiz-lbl { color: #AFA9EC; font-weight: 400; }

/* User type badge in header row 2 */
.hdr-user-type {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 20px; background: #EEEDFE; color: #534AB7;
  flex-shrink: 0;
}

/* ── LOGIN SELECT ────────────────────────────────────────────────────────── */
.psy-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23534AB7' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px; cursor: pointer;
}

/* ── LEADERBOARD TYPE TOGGLE ─────────────────────────────────────────────── */
.lb-type-toggle {
  display: flex; gap: 6px; padding: 8px 14px;
  border-bottom: 1px solid #f3f4f6; flex-wrap: wrap;
}
.lb-type-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
  cursor: pointer; border: 1.5px solid #CECBF6; background: #f9fafb;
  color: #6b7280; font-family: inherit; transition: all .15s;
}
.lb-type-btn:hover  { background: #EEEDFE; color: #534AB7; border-color: #AFA9EC; }
.lb-type-btn.active { background: #534AB7; color: #EEEDFE; border-color: #534AB7; }

/* Countdown leaderboard type toggle on purple */
.cd-lb-card .lb-type-toggle { border-bottom: 1px solid rgba(255,255,255,0.1); }
.cd-lb-card .lb-type-btn    { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #AFA9EC; }
.cd-lb-card .lb-type-btn:hover  { background: rgba(255,255,255,0.2); color: #EEEDFE; }
.cd-lb-card .lb-type-btn.active { background: #EEEDFE; color: #534AB7; border-color: #EEEDFE; }


/* ── RANK-UP BANNER ──────────────────────────────────────────────────────── */
.rankup-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px);
  background: linear-gradient(135deg, #26215C 0%, #3d3692 100%);
  border: 1px solid #6c63d6; border-radius: 16px;
  padding: 16px 24px; min-width: 260px; max-width: 340px;
  box-shadow: 0 8px 32px rgba(83,74,183,0.45);
  z-index: 9999; transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), opacity 0.4s;
  opacity: 0;
}
.rankup-banner.ru-show { transform: translateX(-50%) translateY(0); opacity: 1; }
.ru-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; text-align: center; letter-spacing: 0.3px; }
.ru-line  { font-size: 13px; color: #ccc8f8; margin-bottom: 4px; }
.ru-line b { color: #fff; }
.ru-new   { color: #34D399; font-weight: 700; }
.ru-arrow { color: #FFD700; font-weight: 700; margin-left: 4px; }


/* ── Badge ribbon ─────────────────────────────────────── */
.badge-ribbon {
  max-height: 0; overflow: hidden;
  transition: max-height .45s cubic-bezier(0.4,0,0.2,1);
  background: linear-gradient(160deg, #1a0050 0%, #0e0030 100%);
  border-bottom: 1px solid rgba(83,74,183,0.4);
}
.badge-ribbon.ribbon-open { max-height: 520px; }
.badge-ribbon-inner {
  padding: 16px 14px 20px;
  overflow-x: auto; overflow-y: auto;
  max-height: 520px;
  scrollbar-width: thin;
  scrollbar-color: rgba(83,74,183,0.4) transparent;
}
.ribbon-loading {
  text-align: center; padding: 2rem;
  color: #7F77DD; font-size: 13px; font-weight: 600;
}
.ribbon-progress {
  font-size: 11px; font-weight: 700; color: #EF9F27;
  text-align: center; margin-bottom: 14px;
  padding: 7px 14px;
  background: rgba(239,159,39,0.08);
  border: 1px solid rgba(239,159,39,0.25);
  border-radius: 20px; display: inline-block;
  width: 100%;
}
.ribbon-cat-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  margin: 14px 0 8px;
}
.ribbon-badge-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════
   My Badges — button, ribbon, cards, tooltip
   ══════════════════════════════════════════════ */

/* ── Header button ────────────────────────────── */
.hdr-badges-btn {
  padding: 5px 12px; border-radius: 20px;
  border: 1.5px solid rgba(239,159,39,0.5);
  background: rgba(239,159,39,0.1);
  color: #FAC775; font-family: inherit;
  font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  flex-shrink: 0; margin-left: auto;
  animation: badgesBtnPulse 2.6s ease-in-out infinite;
  transition: background .15s, border-color .15s;
}
@keyframes badgesBtnPulse {
  0%   { box-shadow: 0 0 4px rgba(239,159,39,0.4), 0 0 8px rgba(83,74,183,0.3); border-color: rgba(239,159,39,0.45); color: #FAC775; }
  35%  { box-shadow: 0 0 12px rgba(239,159,39,0.85), 0 0 24px rgba(239,159,39,0.4); border-color: #EF9F27; color: #fff; }
  65%  { box-shadow: 0 0 12px rgba(83,74,183,0.9), 0 0 24px rgba(83,74,183,0.5); border-color: #AFA9EC; color: #EEEDFE; }
  100% { box-shadow: 0 0 4px rgba(239,159,39,0.4), 0 0 8px rgba(83,74,183,0.3); border-color: rgba(239,159,39,0.45); color: #FAC775; }
}
.hdr-badges-btn:hover,
.hdr-badges-btn.active {
  background: rgba(239,159,39,0.2); border-color: #EF9F27; color: #fff;
  box-shadow: 0 0 14px rgba(239,159,39,0.7), 0 0 28px rgba(83,74,183,0.5) !important;
  animation: none;
}

/* ── Ribbon wrapper ───────────────────────────── */
.badge-ribbon {
  max-height: 0; overflow: hidden;
  transition: max-height .48s cubic-bezier(0.4,0,0.2,1);
  background: linear-gradient(175deg,#1a0050 0%,#0e0030 100%);
  border-bottom: 2px solid rgba(83,74,183,0.5);
  position: relative;
}
.badge-ribbon.ribbon-open { max-height: 540px; }

/* ── Ribbon topbar ────────────────────────────── */
.badge-ribbon-topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(26,0,80,0.97);
  border-bottom: 1px solid rgba(83,74,183,0.4);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  backdrop-filter: blur(4px);
}
.ribbon-topbar-left { display: flex; align-items: center; gap: 10px; }
.ribbon-topbar-title {
  font-size: 13px; font-weight: 800; color: #EEEDFE; letter-spacing: .5px;
}
.ribbon-topbar-count {
  font-size: 11px; font-weight: 700; color: #EF9F27;
  background: rgba(239,159,39,0.1); border: 1px solid rgba(239,159,39,0.3);
  padding: 2px 9px; border-radius: 20px;
}
.ribbon-close-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(83,74,183,0.5);
  background: rgba(83,74,183,0.15); color: #AFA9EC;
  font-size: 13px; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; line-height: 1;
}
.ribbon-close-btn:hover { background: rgba(83,74,183,0.35); color: #EEEDFE; }

/* ── Ribbon scrollable body ───────────────────── */
.badge-ribbon-inner {
  padding: 14px 12px 24px;
  overflow-y: auto; max-height: 480px;
  scrollbar-width: thin;
  scrollbar-color: rgba(83,74,183,0.4) transparent;
}
.ribbon-loading {
  text-align: center; padding: 2.5rem 1rem;
  color: #7F77DD; font-size: 13px; font-weight: 600;
}

/* ── Earned section heading ───────────────────── */
.ribbon-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.ribbon-section-earned { color: #EF9F27; }
.ribbon-section-count {
  background: rgba(239,159,39,0.18); border: 1px solid rgba(239,159,39,0.4);
  padding: 1px 8px; border-radius: 20px; font-size: 10px;
}

/* ── Divider between earned / unearned ────────── */
.ribbon-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 14px; color: #4a3d7a; font-size: 10px;
  font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
}
.ribbon-divider::before,
.ribbon-divider::after { content: ''; flex: 1; height: 1px; background: rgba(83,74,183,0.3); }
.ribbon-divider span { color: #7F77DD; }

/* ── Category header ──────────────────────────── */
.ribbon-cat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 8px;
}
.ribbon-cat-label {
  font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.ribbon-cat-progress {
  font-size: 10px; font-weight: 700; opacity: .75;
}

/* ── Badge grid ───────────────────────────────── */
.ribbon-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px; margin-bottom: 4px;
}
.ribbon-earned-grid { margin-bottom: 4px; }

/* ── Badge card (square) ──────────────────────── */
.rb-card {
  position: relative; border-radius: 12px;
  padding: 10px 6px 9px;
  text-align: center; cursor: pointer;
  transition: transform .15s;
  aspect-ratio: 1 / 1.12;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  overflow: visible;
}
.rb-card:active { transform: scale(0.94); }
.rb-earned {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid var(--gem, #EF9F27);
  box-shadow: inset 0 0 14px rgba(0,0,0,0.3);
  animation: rbCardPulse 3s ease-in-out infinite;
}
@keyframes rbCardPulse {
  0%,100% { box-shadow: 0 0 5px var(--glow), inset 0 0 10px rgba(0,0,0,0.3); }
  50%      { box-shadow: 0 0 14px var(--glow), 0 0 28px var(--glow), inset 0 0 10px rgba(0,0,0,0.3); }
}
.rb-earned::before {
  content: '';
  position: absolute; inset: 0; border-radius: 11px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.09) 0%, transparent 65%);
  pointer-events: none;
}
.rb-locked {
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(83,74,183,0.2);
  opacity: 0.32; filter: grayscale(0.6);
}

/* ── Stack counter ────────────────────────────── */
.rb-stack {
  position: absolute; top: 5px; left: 5px;
  font-size: 9px; font-weight: 800; color: #EEEDFE;
  background: rgba(83,74,183,0.85);
  border: 1px solid rgba(175,169,236,0.4);
  padding: 1px 6px; border-radius: 20px; z-index: 2;
}

/* ── Badge icon ───────────────────────────────── */
.rb-icon-wrap {
  position: relative; width: 56px; height: 56px;
  flex-shrink: 0; overflow: hidden; border-radius: 50%;
}
.rb-earned .rb-icon-wrap {
  animation: rbIconPulse 3s ease-in-out infinite;
}
@keyframes rbIconPulse {
  0%,100% { filter: drop-shadow(0 0 3px var(--glow)); }
  50%      { filter: drop-shadow(0 0 9px var(--glow)) drop-shadow(0 0 18px var(--glow)); }
}

/* ── Shimmer sweep on earned badges ──────────── */
.rb-shimmer {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.35) 50%,
    transparent 70%);
  background-size: 200% 100%;
  animation: rbShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rbShimmer {
  0%   { background-position: -100% 0; opacity: 0; }
  20%  { opacity: 1; }
  60%  { background-position: 200% 0; opacity: 0; }
  100% { background-position: 200% 0; opacity: 0; }
}

/* ── Badge name ───────────────────────────────── */
.rb-name {
  font-size: 9px; font-weight: 700; color: #AFA9EC;
  line-height: 1.3; text-align: center;
  max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rb-earned .rb-name { color: var(--gem, #FAC775); }

/* ── Tooltip ──────────────────────────────────── */
.rb-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #1a0050; border: 1.5px solid rgba(239,159,39,0.5);
  border-radius: 10px; padding: 9px 11px;
  min-width: 130px; max-width: 180px;
  z-index: 999; pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 0 12px rgba(239,159,39,0.2);
  animation: tipIn .15s ease both;
}
@keyframes tipIn { from { opacity:0; transform:translateX(-50%) translateY(4px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
.rb-tooltip strong {
  display: block; font-size: 11px; font-weight: 800;
  color: #FAC775; margin-bottom: 4px;
}
.rb-tooltip span {
  display: block; font-size: 10px; color: #AFA9EC; line-height: 1.5;
  margin-bottom: 5px;
}
.rb-tooltip em {
  display: block; font-size: 10px; font-style: normal; font-weight: 700;
  color: #5DCAA5;
}
.rb-tooltip em.locked-lbl { color: #7F77DD; }