/* ===========================================================================
   Radio Tech — Gamification UI
   Nivele, insigne, serii, roată, quiz, misiuni, predicții, recomandări
   =========================================================================== */

:root {
  --rt-lvl-bronze: #c98a4b;
  --rt-lvl-silver: #b9c4d0;
  --rt-lvl-gold: #f5c542;
  --rt-lvl-platinum: #7fe3d4;
  --rt-lvl-diamond: #a78bfa;
  --rt-lvl-legend: #ff6b6b;
  --rt-gold: #f5c542;
  --rt-gold-soft: rgba(245, 197, 66, .14);
  --rt-gold-line: rgba(245, 197, 66, .32);
  --rt-card: rgba(255, 255, 255, .035);
  --rt-card-2: rgba(255, 255, 255, .06);
  --rt-line: rgba(255, 255, 255, .09);
  --rt-txt: #eef1f6;
  --rt-txt-dim: #9aa4b2;
  --rt-ok: #34d399;
  --rt-err: #f87171;
  --rt-info: #60a5fa;
}

/* ---------------------------------------------------------------- HERO ---- */
.gm-hero {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 26px 26px 22px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(245, 197, 66, .16), transparent 55%),
    radial-gradient(120% 140% at 100% 0%, rgba(167, 139, 250, .16), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  border: 1px solid var(--rt-line);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.gm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .35;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.gm-hero__top {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.gm-hero__avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--rt-gold-line);
  box-shadow: 0 0 0 4px rgba(245, 197, 66, .08);
  flex: 0 0 auto;
}
.gm-hero__avatar--initial {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 24px;
  background: linear-gradient(145deg, #2a2f3a, #171a21);
  color: var(--rt-gold);
}
.gm-hero__who { min-width: 0; flex: 1 1 200px; }
.gm-hero__name {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--rt-txt);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gm-hero__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--rt-txt-dim);
}
.gm-hero__stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
.gm-stat {
  flex: 1 1 120px;
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gm-stat__val {
  font-size: 20px;
  font-weight: 800;
  color: var(--rt-txt);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gm-stat__lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rt-txt-dim);
  font-weight: 600;
}

/* --------------------------------------------------------------- LEVEL ---- */
.gm-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--rt-line);
  color: var(--rt-txt);
  white-space: nowrap;
}
.gm-level__icon { font-size: 13px; line-height: 1; }
.gm-level--bronze   { border-color: rgba(201, 138, 75, .45);  color: #e0a86e; background: rgba(201, 138, 75, .12); }
.gm-level--silver   { border-color: rgba(185, 196, 208, .45); color: #cfd8e3; background: rgba(185, 196, 208, .12); }
.gm-level--gold     { border-color: rgba(245, 197, 66, .5);   color: #f7d268; background: rgba(245, 197, 66, .13); }
.gm-level--platinum { border-color: rgba(127, 227, 212, .45); color: #8ff0e2; background: rgba(127, 227, 212, .12); }
.gm-level--diamond  { border-color: rgba(167, 139, 250, .5);  color: #bda6ff; background: rgba(167, 139, 250, .14); }
.gm-level--legend   { border-color: rgba(255, 107, 107, .5);  color: #ff8f8f; background: rgba(255, 107, 107, .14); }

.gm-progress {
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.gm-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--rt-txt-dim);
  margin-bottom: 7px;
}
.gm-progress__head strong { color: var(--rt-txt); font-weight: 700; }
.gm-progress__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  border: 1px solid var(--rt-line);
}
.gm-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f5c542, #ff9f43 55%, #ff6b6b);
  box-shadow: 0 0 18px rgba(245, 197, 66, .45);
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
  position: relative;
}
.gm-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: gm-shine 2.6s linear infinite;
}
@keyframes gm-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* -------------------------------------------------------------- STREAK ---- */
.gm-streak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(255, 107, 107, .18), rgba(245, 197, 66, .14));
  border: 1px solid rgba(255, 140, 90, .38);
  color: #ffb27a;
  white-space: nowrap;
}
.gm-streak__flame {
  font-size: 15px;
  line-height: 1;
  animation: gm-flicker 1.8s ease-in-out infinite;
  transform-origin: center bottom;
}
@keyframes gm-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); opacity: 1; }
  50%      { transform: scale(1.14) rotate(2deg); opacity: .88; }
}
.gm-streak--cold { background: rgba(255, 255, 255, .05); border-color: var(--rt-line); color: var(--rt-txt-dim); }
.gm-streak--cold .gm-streak__flame { animation: none; filter: grayscale(1); opacity: .6; }

/* -------------------------------------------------------------- BADGES ---- */
.gm-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  color: var(--rt-txt);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.gm-badge:hover {
  transform: translateY(-2px);
  border-color: var(--rt-gold-line);
  background: var(--rt-gold-soft);
}
.gm-badge__icon { font-size: 15px; line-height: 1; }
.gm-badge--locked { opacity: .38; filter: grayscale(1); }
.gm-badge--locked:hover { transform: none; border-color: var(--rt-line); background: var(--rt-card); }

/* --------------------------------------------------------------- CARDS ---- */
.gm-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 22px;
}
.gm-card {
  position: relative;
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(165deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
  border: 1px solid var(--rt-line);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .9);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.gm-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--rt-gold), transparent);
  opacity: .55;
}
.gm-card--wheel::before   { background: linear-gradient(90deg, transparent, #a78bfa, transparent); }
.gm-card--quiz::before    { background: linear-gradient(90deg, transparent, #60a5fa, transparent); }
.gm-card--predict::before { background: linear-gradient(90deg, transparent, #34d399, transparent); }
.gm-card--missions::before{ background: linear-gradient(90deg, transparent, #f59e0b, transparent); }
.gm-card--referral::before{ background: linear-gradient(90deg, transparent, #ec4899, transparent); }

.gm-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gm-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 19px;
  background: var(--rt-card-2);
  border: 1px solid var(--rt-line);
  flex: 0 0 auto;
}
.gm-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--rt-txt);
}
.gm-card__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--rt-txt-dim);
}
.gm-card__body { flex: 1 1 auto; }

/* ---------------------------------------------------------------- WHEEL --- */
.gm-wheel-wrap {
  display: grid;
  place-items: center;
  padding: 6px 0 2px;
}
.gm-wheel {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 0 0 3px rgba(245, 197, 66, .22),
    0 18px 40px -18px rgba(0, 0, 0, .9),
    inset 0 0 30px rgba(0, 0, 0, .55);
  transition: transform 4.2s cubic-bezier(.16, 1, .3, 1);
  background: conic-gradient(
    #3b82f6 0deg 40deg,
    #8b5cf6 40deg 80deg,
    #ec4899 80deg 120deg,
    #f59e0b 120deg 160deg,
    #ef4444 160deg 200deg,
    #06b6d4 200deg 240deg,
    #a78bfa 240deg 280deg,
    #10b981 280deg 320deg,
    #64748b 320deg 360deg
  );
}
.gm-wheel::after {
  content: "";
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a2f3a, #12151b);
  border: 2px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8);
}
.gm-wheel__pointer {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 18px solid var(--rt-gold);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7));
  z-index: 3;
}
.gm-wheel__hub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  font-size: 26px;
  pointer-events: none;
}
.gm-wheel__result {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--rt-gold);
  min-height: 20px;
}

/* ---------------------------------------------------------------- QUIZ ---- */
.gm-quiz__q {
  padding: 14px;
  border-radius: 13px;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  margin-bottom: 10px;
}
.gm-quiz__q:last-child { margin-bottom: 0; }
.gm-quiz__text {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rt-txt);
}
.gm-quiz__opts { display: grid; gap: 7px; }
.gm-quiz__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rt-line);
  color: var(--rt-txt);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
  width: 100%;
  font-family: inherit;
}
.gm-quiz__opt:hover:not(:disabled) {
  background: rgba(96, 165, 250, .12);
  border-color: rgba(96, 165, 250, .4);
  transform: translateX(2px);
}
.gm-quiz__opt:disabled { cursor: default; opacity: .75; }
.gm-quiz__opt--correct {
  background: rgba(52, 211, 153, .16) !important;
  border-color: rgba(52, 211, 153, .55) !important;
  color: #6ee7b7 !important;
  opacity: 1 !important;
}
.gm-quiz__opt--wrong {
  background: rgba(248, 113, 113, .14) !important;
  border-color: rgba(248, 113, 113, .5) !important;
  color: #fca5a5 !important;
  opacity: 1 !important;
}
.gm-quiz__key {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 800;
  background: rgba(255, 255, 255, .08);
  flex: 0 0 auto;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- MISSIONS --- */
.gm-mission {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--rt-card);
  border: 1px solid var(--rt-line);
  margin-bottom: 8px;
}
.gm-mission:last-child { margin-bottom: 0; }
.gm-mission__icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--rt-card-2);
  flex: 0 0 auto;
}
.gm-mission__main { flex: 1 1 auto; min-width: 0; }
.gm-mission__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rt-txt);
  margin: 0 0 5px;
  line-height: 1.35;
}
.gm-mission__bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.gm-mission__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #f5c542);
  transition: width .5s ease;
}
.gm-mission__meta {
  font-size: 10.5px;
  color: var(--rt-txt-dim);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.gm-mission__reward { color: var(--rt-gold); font-weight: 700; }
.gm-mission--done { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .07); }
.gm-mission--claimed { opacity: .55; }

/* --------------------------------------------------------------- BUTTONS -- */
.gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--rt-line);
  background: var(--rt-card-2);
  color: var(--rt-txt);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  text-decoration: none;
  white-space: nowrap;
}
.gm-btn:hover:not(:disabled) { transform: translateY(-1px); background: rgba(255, 255, 255, .1); }
.gm-btn:disabled { opacity: .45; cursor: not-allowed; }
.gm-btn--gold {
  background: linear-gradient(135deg, #f5c542, #ff9f43);
  border-color: transparent;
  color: #1a1206;
  box-shadow: 0 10px 26px -12px rgba(245, 197, 66, .8);
}
.gm-btn--gold:hover:not(:disabled) { box-shadow: 0 14px 32px -12px rgba(245, 197, 66, .95); }
.gm-btn--sm { padding: 7px 12px; font-size: 12px; border-radius: 9px; }
.gm-btn--block { width: 100%; }

/* ----------------------------------------------------------------- INPUT -- */
.gm-input {
  width: 100%;
  padding: 10px 13px;
  border-radius: 11px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--rt-line);
  color: var(--rt-txt);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.gm-input:focus {
  border-color: var(--rt-gold-line);
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .12);
}
.gm-input::placeholder { color: #6b7482; }

/* ------------------------------------------------------------- REFERRAL --- */
.gm-referral__code {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(236, 72, 153, .1);
  border: 1px dashed rgba(236, 72, 153, .45);
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #f9a8d4;
  justify-content: center;
}

/* ------------------------------------------------------------ CHAT CHIP --- */
.chat-msg__lvl {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .03em;
  vertical-align: middle;
  margin-left: 5px;
  border: 1px solid currentColor;
  opacity: .9;
  line-height: 1.5;
}
.chat-msg__lvl--bronze   { color: #e0a86e; }
.chat-msg__lvl--silver   { color: #cfd8e3; }
.chat-msg__lvl--gold     { color: #f7d268; }
.chat-msg__lvl--platinum { color: #8ff0e2; }
.chat-msg__lvl--diamond  { color: #bda6ff; }
.chat-msg__lvl--legend   { color: #ff8f8f; }

/* --------------------------------------------------------- FLOATING HUD --- */
.gm-hud {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  pointer-events: none;
}
.gm-hud > * { pointer-events: auto; }
.gm-hud__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245, 197, 66, .95), rgba(255, 159, 67, .95));
  color: #1a1206;
  font-size: 12.5px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 14px 34px -14px rgba(245, 197, 66, .9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gm-hud__btn:hover { transform: translateY(-2px) scale(1.02); }
.gm-hud__btn--pulse { animation: gm-pulse 2.4s ease-in-out infinite; }
@keyframes gm-pulse {
  0%, 100% { box-shadow: 0 14px 34px -14px rgba(245, 197, 66, .9); }
  50%      { box-shadow: 0 14px 44px -8px rgba(245, 197, 66, 1); }
}

/* ------------------------------------------------------------- TOASTS ----- */
.gm-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  z-index: 9999;
  padding: 12px 20px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0b0d11;
  background: linear-gradient(135deg, #f5c542, #ff9f43);
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  max-width: min(90vw, 420px);
  text-align: center;
}
.gm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.gm-toast--err { background: linear-gradient(135deg, #f87171, #ef4444); color: #fff; }
.gm-toast--ok  { background: linear-gradient(135deg, #34d399, #10b981); color: #04231a; }

/* --------------------------------------------------------------- MODAL ---- */
.gm-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 10, .78);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.gm-modal.is-on { opacity: 1; pointer-events: auto; }
.gm-modal__box {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 20px;
  padding: 24px;
  background: linear-gradient(165deg, #171b23, #0e1116);
  border: 1px solid var(--rt-line);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1);
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
}
.gm-modal.is-on .gm-modal__box { transform: none; }
.gm-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.gm-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--rt-txt);
}
.gm-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--rt-card-2);
  border: 1px solid var(--rt-line);
  color: var(--rt-txt-dim);
  cursor: pointer;
  font-size: 15px;
  font-family: inherit;
}
.gm-modal__close:hover { color: var(--rt-txt); background: rgba(255, 255, 255, .1); }

/* --------------------------------------------------------------- EMPTY ---- */
.gm-empty {
  padding: 22px 16px;
  text-align: center;
  font-size: 12.5px;
  color: var(--rt-txt-dim);
  border-radius: 12px;
  border: 1px dashed var(--rt-line);
  background: rgba(255, 255, 255, .015);
}

/* ------------------------------------------------------------ RESPONSIVE -- */
@media (max-width: 640px) {
  .gm-hero { padding: 20px 16px 18px; border-radius: 18px; }
  .gm-hero__name { font-size: 18px; }
  .gm-hero__avatar { width: 52px; height: 52px; }
  .gm-stat { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 10px 12px; }
  .gm-stat__val { font-size: 17px; }
  .gm-grid { grid-template-columns: 1fr; }
  .gm-wheel { width: 160px; height: 160px; }
  .gm-hud { left: 12px; bottom: 12px; }
  .gm-hud__btn { padding: 9px 13px; font-size: 11.5px; }
  .gm-modal__box { padding: 18px; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-progress__fill::after,
  .gm-streak__flame,
  .gm-hud__btn--pulse { animation: none !important; }
  .gm-wheel { transition-duration: .01s; }
}

/* ---- Leaderboard extras ---- */
.rank-badges{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:700;color:#f5b301;background:rgba(245,179,1,.12);border:1px solid rgba(245,179,1,.28);padding:2px 8px;border-radius:999px}
.rank-badges--none{color:#6b7280;background:transparent;border-color:rgba(255,255,255,.08)}
.gm-level{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
.gm-level--bronze{color:#d08a5a;background:rgba(205,127,50,.14);border-color:rgba(205,127,50,.3)}
.gm-level--silver{color:#cbd5e1;background:rgba(203,213,225,.12);border-color:rgba(203,213,225,.28)}
.gm-level--gold{color:#f5b301;background:rgba(245,179,1,.14);border-color:rgba(245,179,1,.32)}
.gm-level--platinum{color:#7dd3fc;background:rgba(125,211,252,.13);border-color:rgba(125,211,252,.3)}
.gm-level--diamond{color:#a78bfa;background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.32)}
.gm-level--legend{color:#fb7185;background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.32)}

/* ---- Floating HUD ---- */
.gm-hud{position:fixed;left:18px;bottom:18px;z-index:9000;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.gm-hud__btn{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:linear-gradient(135deg,#f5b301,#f97316);color:#1a1206;font-weight:800;font-size:.86rem;text-decoration:none;box-shadow:0 10px 30px rgba(245,179,1,.35),0 2px 8px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);transition:transform .18s ease,box-shadow .18s ease}
.gm-hud__btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 38px rgba(245,179,1,.45),0 2px 8px rgba(0,0,0,.45)}
.gm-hud__btn:active{transform:translateY(0) scale(.99)}
.gm-hud__pts{font-variant-numeric:tabular-nums}
.gm-hud__pulse{position:absolute;inset:0;border-radius:999px;border:2px solid rgba(245,179,1,.6);animation:gmHudPulse 2.4s ease-out infinite;pointer-events:none}
@keyframes gmHudPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.gm-hud__wrap{position:relative;pointer-events:auto}
@media (max-width:640px){.gm-hud{left:12px;bottom:12px}.gm-hud__btn{padding:10px 14px;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.gm-hud__pulse{animation:none}.gm-hud__btn{transition:none}}

/* ---- Profile level & badges ---- */
.profile-level{margin:18px 0 6px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.profile-level__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.profile-level__pts{font-size:.82rem;font-weight:700;color:#9aa4b8;font-variant-numeric:tabular-nums}
.profile-level__next{margin:10px 0 0;font-size:.82rem;color:#8b93a7}
.profile-level__next strong{color:#f5b301}
.profile-badges{margin-top:22px}
.profile-badges__title{font-size:1rem;font-weight:800;margin:0 0 12px;color:#e8ecf5}
.profile-badges__more{margin:12px 0 0;font-size:.82rem}
.profile-badges__more a{color:#f5b301;text-decoration:none;font-weight:700}
.profile-badges__more a:hover{text-decoration:underline}

/* ---- Level-up / return banner ---- */
.gm-banner{position:fixed;left:50%;top:18px;transform:translate(-50%,-140%);z-index:9500;display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 24px));padding:13px 15px;border-radius:16px;background:linear-gradient(135deg,rgba(245,179,1,.16),rgba(249,115,22,.12)),rgba(18,20,28,.97);border:1px solid rgba(245,179,1,.4);box-shadow:0 18px 48px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.04) inset;transition:transform .34s cubic-bezier(.2,.9,.3,1.2),opacity .3s ease;opacity:0;pointer-events:none}
.gm-banner.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.gm-banner__ico{font-size:22px;line-height:1;flex:0 0 auto}
.gm-banner__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.gm-banner__body strong{font-size:.86rem;color:#f5b301;font-weight:800}
.gm-banner__body span{font-size:.78rem;color:#b9c0d0;line-height:1.35}
.gm-banner__x{flex:0 0 auto;background:transparent;border:0;color:#8b93a7;font-size:20px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
.gm-banner__x:hover{color:#fff}
@media (max-width:640px){.gm-banner{top:10px;padding:11px 13px;gap:10px}.gm-banner__body strong{font-size:.8rem}.gm-banner__body span{font-size:.74rem}}
@media (prefers-reduced-motion:reduce){.gm-banner{transition:none}}