/* ============================================================
   ACHIEVEMENTS — PREMIUM BADGE SYSTEM
   ============================================================ */

:root {
  --ach-gold: #f5b942;
  --ach-purple: #8b5cf6;
  --ach-blue: #3b82f6;
  --ach-green: #22c55e;
  --ach-red: #ef4444;
  --ach-cyan: #06b6d4;

  --ach-bg: #111111;
  --ach-card: #151515;
  --ach-border: #252525;
}


/* ============================================================
   ОБЩИЙ БЛОК
   ============================================================ */

.ach-block {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.025), transparent 45%),
    #141414;

  border: 1px solid #222;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;

  box-shadow:
    0 16px 45px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}


/* ============================================================
   HEADER
   ============================================================ */

.ach-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.ach-header-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ach-header-icon {
  width: 18px;
  height: 18px;
  color: #fbbf24;

  filter:
    drop-shadow(0 0 5px rgba(251,191,36,.35));

  flex-shrink: 0;
}

.ach-header .stat-label {
  margin-bottom: 0;
  color: #e5e5e5;
  font-size: 11px;
  letter-spacing: 1.4px;
}

.ach-count {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;

  color: #9a9a9a;

  background: rgba(255,255,255,.045);

  border: 1px solid rgba(255,255,255,.05);

  padding: 3px 9px;
  border-radius: 6px;

  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   КНОПКА РАСКРЫТИЯ
   ============================================================ */

.ach-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;
  border: 1px solid #2b2b2b;

  background: rgba(255,255,255,.015);

  color: #999;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

.ach-toggle:hover {
  color: #fff;
  border-color: #444;
  background: rgba(255,255,255,.045);
}

.ach-toggle:active {
  transform: scale(.97);
}

.ach-toggle-icon {
  width: 14px;
  height: 14px;

  transition:
    transform .35s cubic-bezier(.2,.9,.3,1.05);
}

.ach-toggle.open .ach-toggle-icon {
  transform: rotate(180deg);
}


/* ============================================================
   GRID
   ============================================================ */

.ach-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ach-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  max-height: 0;
  overflow: hidden;

  opacity: 0;
  margin-top: 0;

  transition:
    max-height .55s cubic-bezier(.2,.9,.3,1.05),
    opacity .35s ease,
    margin-top .35s ease;
}

.ach-full.open {
  max-height: 1600px;
  opacity: 1;
  margin-top: 12px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .ach-preview,
  .ach-full {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 380px) {
  .ach-preview,
  .ach-full {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   КАРТОЧКА
   ============================================================ */

.ach-item {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  padding: 19px 12px 17px;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.025),
      transparent 42%
    ),
    #161616;

  border: 1px solid #222;

  overflow: visible;

  transition:
    transform .28s cubic-bezier(.2,.9,.3,1.05),
    border-color .25s ease,
    box-shadow .3s ease,
    background .3s ease,
    opacity .25s ease,
    filter .25s ease;

  cursor: default;
}

.ach-item::before {
  content: '';

  position: absolute;
  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.045),
      transparent 28%,
      transparent 70%,
      rgba(255,255,255,.015)
    );

  opacity: .7;
}

.ach-item.unlocked {
  cursor: help;
}

.ach-item.unlocked:hover {
  transform: translateY(-4px);

  border-color:
    color-mix(
      in srgb,
      var(--ach-color, #6366f1) 55%,
      #333
    );

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--ach-color, #6366f1) 5%,
        transparent
      ),
      transparent 55%
    ),
    #171717;

  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    0 0 0 1px
      color-mix(
        in srgb,
        var(--ach-color, #6366f1) 28%,
        transparent
      ),
    0 12px 35px -22px
      var(--ach-color, #6366f1);
}

.ach-item.locked {
  opacity: .42;
  filter: grayscale(.8);
}

.ach-item.locked:hover {
  opacity: .58;
  filter: grayscale(.55);
}


/* ============================================================
   BADGE — ОСНОВНАЯ ЭМБЛЕМА
   ============================================================ */

.ach-badge {
  --badge-size: 72px;

  position: relative;

  width: var(--badge-size);
  height: var(--badge-size);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 15px;

  isolation: isolate;

  background:
    linear-gradient(
      145deg,
      var(--ach-c1, #6366f1),
      var(--ach-c2, #ec4899)
    );

  border-radius: 19px;

  transform: rotate(45deg);

  box-shadow:
    0 9px 18px rgba(0,0,0,.42),
    0 2px 4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 7px rgba(0,0,0,.25);

  transition:
    transform .35s cubic-bezier(.2,.9,.3,1.25),
    filter .35s ease;
}


/* внешний вырез */

.ach-badge::before {
  content: '';

  position: absolute;

  inset: 5px;

  border-radius: 15px;

  border: 1px solid rgba(255,255,255,.35);

  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.18);

  pointer-events: none;

  z-index: -1;
}


/* внутренний вырез */

.ach-badge::after {
  content: '';

  position: absolute;

  inset: 11px;

  border-radius: 11px;

  background:
    radial-gradient(
      circle at 35% 25%,
      rgba(255,255,255,.17),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(0,0,0,.08),
      rgba(0,0,0,.27)
    );

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.12),
    inset 0 -3px 5px rgba(0,0,0,.22);

  pointer-events: none;

  z-index: -1;
}


/* ============================================================
   СРЕЗЫ / ГЕОМЕТРИЯ
   ============================================================ */

.ach-badge[data-shape="hex"] {
  border-radius: 13px;

  clip-path: polygon(
    25% 3%,
    75% 3%,
    98% 25%,
    98% 75%,
    75% 97%,
    25% 97%,
    2% 75%,
    2% 25%
  );

  transform: rotate(0);
}

.ach-badge[data-shape="shield"] {
  border-radius: 10px 10px 20px 20px;

  clip-path: polygon(
    50% 0%,
    92% 16%,
    92% 57%,
    82% 76%,
    50% 100%,
    18% 76%,
    8% 57%,
    8% 16%
  );

  transform: rotate(0);
}

.ach-badge[data-shape="diamond"] {
  border-radius: 11px;

  transform: rotate(45deg);
}

.ach-badge[data-shape="octagon"] {
  border-radius: 8px;

  clip-path: polygon(
    30% 2%,
    70% 2%,
    98% 30%,
    98% 70%,
    70% 98%,
    30% 98%,
    2% 70%,
    2% 30%
  );

  transform: rotate(0);
}

.ach-badge[data-shape="seal"] {
  border-radius: 50%;

  clip-path: polygon(
    50% 0%,
    61% 7%,
    75% 4%,
    82% 16%,
    96% 18%,
    93% 33%,
    100% 44%,
    91% 54%,
    96% 68%,
    82% 74%,
    75% 88%,
    61% 93%,
    50% 100%,
    39% 93%,
    25% 88%,
    18% 74%,
    4% 68%,
    9% 54%,
    0% 44%,
    7% 33%,
    4% 18%,
    18% 16%,
    25% 4%,
    39% 7%
  );

  transform: rotate(0);
}

.ach-badge[data-shape="diamond"]::before,
.ach-badge[data-shape="diamond"]::after {
  transform: rotate(-45deg);
}


/* ============================================================
   ICON
   ============================================================ */

.ach-badge svg {
  position: relative;

  width: 31px;
  height: 31px;

  color: #fff;

  z-index: 4;

  transform: rotate(-45deg);

  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.55))
    drop-shadow(0 0 7px rgba(255,255,255,.16));

  transition:
    transform .35s cubic-bezier(.2,.9,.3,1.25),
    filter .3s ease;
}

.ach-badge[data-shape="hex"] svg,
.ach-badge[data-shape="shield"] svg,
.ach-badge[data-shape="octagon"] svg,
.ach-badge[data-shape="seal"] svg {
  transform: rotate(0);
}


/* ============================================================
   HOVER BADGE
   ============================================================ */

.ach-item.unlocked:hover .ach-badge {
  transform:
    translateY(-2px)
    rotate(45deg)
    scale(1.07);

  filter:
    drop-shadow(
      0 10px 18px
      color-mix(
        in srgb,
        var(--ach-color, #6366f1) 38%,
        transparent
      )
    );
}

.ach-item.unlocked:hover
.ach-badge[data-shape="hex"],
.ach-item.unlocked:hover
.ach-badge[data-shape="shield"],
.ach-item.unlocked:hover
.ach-badge[data-shape="octagon"],
.ach-item.unlocked:hover
.ach-badge[data-shape="seal"] {
  transform:
    translateY(-2px)
    scale(1.07);
}

.ach-item.unlocked:hover .ach-badge svg {
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.55))
    drop-shadow(0 0 10px rgba(255,255,255,.32));
}


/* ============================================================
   LOCKED BADGE
   ============================================================ */

.ach-item.locked .ach-badge {
  background:
    linear-gradient(
      145deg,
      #373737,
      #202020 55%,
      #151515
    );

  box-shadow:
    0 8px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -3px 6px rgba(0,0,0,.4);
}

.ach-item.locked .ach-badge::before {
  border-color: rgba(255,255,255,.12);
}

.ach-item.locked .ach-badge::after {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      rgba(0,0,0,.25)
    );

  border-color: rgba(255,255,255,.07);
}

.ach-item.locked .ach-badge svg {
  opacity: .35;
  filter: grayscale(1);
}


/* ============================================================
   QUESTION MARK
   ============================================================ */

.ach-question {
  position: relative;

  font-family: 'Inter', sans-serif;

  font-size: 29px;
  font-weight: 900;

  color: rgba(255,255,255,.35);

  line-height: 1;

  user-select: none;

  z-index: 4;

  transform: rotate(-45deg);

  text-shadow:
    0 2px 3px rgba(0,0,0,.5);
}

.ach-badge[data-shape="hex"] .ach-question,
.ach-badge[data-shape="shield"] .ach-question,
.ach-badge[data-shape="octagon"] .ach-question,
.ach-badge[data-shape="seal"] .ach-question {
  transform: rotate(0);
}


/* ============================================================
   TEXT
   ============================================================ */

.ach-name {
  font-size: 13px;
  font-weight: 700;

  color: #f5f5f5;

  letter-spacing: -.2px;

  margin-bottom: 4px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  max-width: 100%;
}

.ach-desc {
  font-size: 11.5px;

  color: #818181;

  line-height: 1.4;

  max-width: 100%;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.ach-item.unlocked .ach-desc {
  color: #9b9b9b;
}


/* ============================================================
   ПРОГРЕСС
   ============================================================ */

.ach-progress {
  margin-top: 8px;

  width: 100%;

  font-family: 'Space Mono', monospace;

  font-size: 10px;

  color: #696969;

  text-align: center;

  letter-spacing: .4px;

  font-variant-numeric: tabular-nums;
}

.ach-progress-bar {
  margin-top: 6px;

  width: 100%;
  height: 3px;

  background: rgba(255,255,255,.055);

  border-radius: 2px;

  overflow: hidden;
}

.ach-progress-fill {
  height: 100%;

  background:
    linear-gradient(
      90deg,
      #6366f1,
      #8b5cf6,
      #a855f7
    );

  border-radius: 2px;

  box-shadow:
    0 0 8px rgba(139,92,246,.35);

  transition:
    width .5s cubic-bezier(.2,.9,.3,1.05);
}


/* ============================================================
   TOOLTIP
   ============================================================ */

.ach-item[data-tooltip] {
  position: relative;
}

.ach-item[data-tooltip]::after {
  content: attr(data-tooltip);

  position: absolute;

  bottom: calc(100% + 10px);
  left: 50%;

  transform:
    translateX(-50%)
    translateY(4px);

  padding: 8px 12px;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0c0c0c
    );

  color: #fff;

  font-size: 11.5px;
  font-weight: 500;

  border-radius: 8px;

  white-space: nowrap;

  max-width: 240px;

  overflow: hidden;
  text-overflow: ellipsis;

  pointer-events: none;

  opacity: 0;

  z-index: 100;

  border: 1px solid rgba(255,255,255,.09);

  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    opacity .18s ease,
    transform .22s ease;
}

.ach-item[data-tooltip]::before {
  content: '';

  position: absolute;

  bottom: calc(100% + 4px);
  left: 50%;

  transform: translateX(-50%);

  border: 6px solid transparent;

  border-top-color: #0c0c0c;

  opacity: 0;

  z-index: 100;

  pointer-events: none;

  transition: opacity .18s ease;
}

.ach-item[data-tooltip]:hover::after {
  opacity: 1;

  transform:
    translateX(-50%)
    translateY(0);
}

.ach-item[data-tooltip]:hover::before {
  opacity: 1;
}


/* ============================================================
   STAGGER
   ============================================================ */

.ach-full.open .ach-item {
  animation:
    achItemIn
    .5s
    cubic-bezier(.2,.9,.3,1.05)
    both;

  animation-delay:
    calc(var(--i, 0) * .05s);
}

@keyframes achItemIn {
  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(.94);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* ============================================================
   СВЕЖЕЕ ДОСТИЖЕНИЕ
   ============================================================ */

.ach-item.just-unlocked .ach-badge {
  animation:
    achPulse
    1.6s
    cubic-bezier(.2,.9,.3,1.05);
}

@keyframes achPulse {

  0% {
    transform:
      scale(1)
      rotate(45deg);

    filter:
      drop-shadow(
        0 6px 14px
        rgba(0,0,0,.4)
      );
  }

  28% {
    transform:
      scale(1.16)
      rotate(45deg);

    filter:
      drop-shadow(
        0 12px 28px
        var(--ach-color, #6366f1)
      );
  }

  52% {
    transform:
      scale(.97)
      rotate(45deg);
  }

  72% {
    transform:
      scale(1.04)
      rotate(45deg);
  }

  100% {
    transform:
      scale(1)
      rotate(45deg);

    filter:
      drop-shadow(
        0 6px 14px
        rgba(0,0,0,.4)
      );
  }
}


/* ============================================================
   TOAST
   ============================================================ */

.ach-toast {
  position: fixed;

  top: 20px;
  right: 20px;

  z-index: 9600;

  display: flex;
  align-items: center;

  gap: 14px;

  min-width: 280px;
  max-width: 380px;

  padding: 14px 18px 14px 14px;

  background:
    radial-gradient(
      130% 160% at 0% 0%,
      rgba(251,191,36,.11),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #161618,
      #0c0c0e
    );

  border: 1px solid rgba(251,191,36,.22);

  border-radius: 14px;

  box-shadow:
    0 25px 55px -20px rgba(0,0,0,.75),
    0 10px 35px -20px rgba(251,191,36,.3),
    inset 0 1px 0 rgba(255,255,255,.035);

  color: #f5f5f5;

  font-family: 'Inter', sans-serif;

  opacity: 0;

  transform:
    translateX(120%)
    scale(.95);

  pointer-events: none;

  transition:
    opacity .4s ease,
    transform .55s cubic-bezier(.2,.9,.3,1.1);
}

.ach-toast.show {
  opacity: 1;

  transform:
    translateX(0)
    scale(1);

  pointer-events: auto;
}


/* ============================================================
   TOAST BADGE
   ============================================================ */

.ach-toast-badge {
  position: relative;

  width: 50px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background:
    linear-gradient(
      145deg,
      var(--ach-c1, #6366f1),
      var(--ach-c2, #ec4899)
    );

  border-radius: 14px;

  transform: rotate(45deg);

  box-shadow:
    0 8px 16px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 6px rgba(0,0,0,.25);

  filter:
    drop-shadow(
      0 5px 10px rgba(0,0,0,.5)
    );
}

.ach-toast-badge::before {
  content: '';

  position: absolute;

  inset: 4px;

  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.28);

  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.15);
}

.ach-toast-badge::after {
  content: '';

  position: absolute;

  inset: 9px;

  border-radius: 8px;

  border: 1px solid rgba(255,255,255,.12);

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.12),
      transparent 45%
    );
}

.ach-toast-badge svg {
  position: relative;

  width: 24px;
  height: 24px;

  color: #fff;

  z-index: 2;

  transform: rotate(-45deg);

  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.5))
    drop-shadow(0 0 7px rgba(255,255,255,.2));
}


/* ============================================================
   TOAST BODY
   ============================================================ */

.ach-toast-body {
  flex: 1;
  min-width: 0;
}

.ach-toast-title {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  color: #fbbf24;

  margin-bottom: 3px;
}

.ach-toast-name {
  font-size: 14px;
  font-weight: 700;

  color: #f5f5f5;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}


/* ============================================================
   MOBILE TOAST
   ============================================================ */

@media (max-width: 480px) {

  .ach-toast {
    top: 12px;
    right: 12px;
    left: 12px;

    max-width: none;
    min-width: 0;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .ach-item,
  .ach-badge,
  .ach-badge svg,
  .ach-toast,
  .ach-toggle-icon,
  .ach-full,
  .ach-item[data-tooltip]::after,
  .ach-item[data-tooltip]::before {
    transition: none !important;
    animation: none !important;
  }

}