/* ========================================================================
   BOMBARERA V74 — ACHIEVEMENTS MODAL-STYLE REDESIGN
   Small visual redesign without layout breakage. Makes the section more vivid,
   fixes the formerly fixed toolbar panel, and aligns visuals with home modals.
   ======================================================================== */

#screenAchievements{
  --ach74-panel:rgba(15,24,40,.92);
  --ach74-panel-strong:rgba(20,31,51,.98);
  --ach74-line:rgba(113,188,236,.18);
  background:
    radial-gradient(circle at 12% -12%, rgba(100,132,255,.18), transparent 34%),
    radial-gradient(circle at 88% 6%, rgba(205,92,255,.16), transparent 32%),
    radial-gradient(circle at 56% 102%, rgba(82,223,255,.09), transparent 28%),
    linear-gradient(180deg,#081220 0%,#07101b 100%)!important;
}

#screenAchievements .achievements-content{
  padding:18px 22px 26px!important;
}

/* Hero: more vivid, closer to main modals */
#screenAchievements .achievements-v65__hero{
  position:relative;
  min-height:170px;
  margin-bottom:16px;
  padding:24px 24px 20px!important;
  border:1px solid rgba(149,126,255,.24)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,108,184,.16), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(95,225,255,.15), transparent 34%),
    radial-gradient(circle at 78% 100%, rgba(255,206,89,.12), transparent 26%),
    linear-gradient(135deg, rgba(48,30,76,.96) 0%, rgba(18,28,49,.98) 44%, rgba(10,22,38,.98) 100%)!important;
  box-shadow:
    0 24px 60px rgba(0,7,22,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(79,171,255,.05)!important;
}
#screenAchievements .achievements-v65__hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.05), transparent 26%),
    linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
#screenAchievements .achievements-v65__hero::after{
  width:340px!important;
  height:340px!important;
  right:-68px!important;
  bottom:-132px!important;
  background:conic-gradient(from 12deg, rgba(255,212,91,.28), rgba(105,226,255,.16), rgba(171,116,255,.18), rgba(255,212,91,.28))!important;
  filter:blur(14px)!important;
  opacity:.9;
}
#screenAchievements .achievements-v65__emblem{
  background:
    radial-gradient(circle at 30% 22%, rgba(255,239,167,.34), transparent 34%),
    linear-gradient(145deg, rgba(255,206,89,.22), rgba(191,110,255,.18))!important;
  border-color:rgba(255,227,134,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 34px rgba(80,20,130,.18)!important;
}
#screenAchievements .achievements-v65__eyebrow{
  color:#8feaff!important;
}
#screenAchievements .achievements-v65__hero h3{
  text-shadow:0 6px 18px rgba(0,0,0,.22);
}
#screenAchievements .achievements-v65__hero p{
  color:#c1cde0!important;
}
#screenAchievements .achievements-v65__summary{
  gap:10px!important;
}
#screenAchievements .achievements-v65__stat{
  position:relative;
  overflow:hidden;
  border-radius:16px!important;
  border:1px solid rgba(137,188,237,.14)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    rgba(8,17,31,.36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#screenAchievements .achievements-v65__stat::before{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0));
  opacity:.45;
}
#screenAchievements .achievements-v65__stat:nth-child(1){border-color:rgba(102,224,255,.18)!important;background:linear-gradient(180deg, rgba(89,224,255,.08), rgba(255,255,255,.02)), rgba(8,17,31,.42)!important}
#screenAchievements .achievements-v65__stat:nth-child(2){border-color:rgba(255,208,94,.24)!important;background:linear-gradient(180deg, rgba(255,208,94,.10), rgba(255,255,255,.02)), rgba(8,17,31,.42)!important}
#screenAchievements .achievements-v65__stat:nth-child(3){border-color:rgba(172,118,255,.20)!important;background:linear-gradient(180deg, rgba(172,118,255,.10), rgba(255,255,255,.02)), rgba(8,17,31,.42)!important}
#screenAchievements .achievements-v65__track{
  height:8px!important;
  background:rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.24);
}
#screenAchievements .achievements-v65__track i{
  background:linear-gradient(90deg,#ff78c7 0%,#9b72ff 38%,#62e4ff 72%,#ffe16f 100%)!important;
  box-shadow:0 0 18px rgba(105,215,255,.32)!important;
}

/* Toolbar: full-width static panel, no floating / fixed behaviour */
html body[data-ui-context="achievements"] #screenAchievements .achievements-content > .achievement-toolbar,
#screenAchievements .achievement-toolbar{
  position:relative!important;
  inset:auto!important;
  top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  z-index:1!important;
  width:100%!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
  margin:0 0 16px!important;
  padding:8px!important;
  overflow:visible!important;
  border:1px solid rgba(125,187,236,.18)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 96% 0%, rgba(178,115,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(22,31,52,.92), rgba(9,19,34,.96))!important;
  box-shadow:0 18px 32px rgba(0,7,22,.20), inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  transform:none!important;
}
#screenAchievements .achievement-toolbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.04), transparent 30%);
}
#screenAchievements .achievement-toolbar button{
  min-height:44px!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))!important;
  color:#acc0d7!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease!important;
}
#screenAchievements .achievement-toolbar button:hover{
  color:#ffffff!important;
  border-color:rgba(111,211,255,.22)!important;
  background:linear-gradient(180deg, rgba(78,164,255,.10), rgba(255,255,255,.03))!important;
}
#screenAchievements .achievement-toolbar button.is-active{
  color:#fff!important;
  border-color:rgba(120,200,255,.28)!important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,117,199,.16), transparent 30%),
    linear-gradient(180deg, rgba(155,114,255,.24), rgba(84,207,233,.12))!important;
  box-shadow:0 10px 22px rgba(63,122,201,.18), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#screenAchievements .achievement-toolbar button b{
  min-width:26px!important;
  height:24px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.08)!important;
  color:#ebf8ff!important;
  font-weight:900!important;
}
#screenAchievements .achievement-toolbar__ready b{
  background:linear-gradient(180deg, rgba(255,222,130,.22), rgba(255,190,79,.12))!important;
  color:#ffe394!important;
}

/* Cards: richer accent-driven look without changing structure */
#screenAchievements .achievements-grid--tiers{
  gap:14px!important;
}
#screenAchievements .achievement-card--tier{
  --ach-accent:#64ddff;
  --ach-accent-2:#a978ff;
  --ach-accent-rgb:100,221,255;
  --ach-accent-2-rgb:169,120,255;
  position:relative!important;
  border-radius:18px!important;
  border:1px solid rgba(var(--ach-accent-rgb), .24)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--ach-accent-rgb), .14), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(var(--ach-accent-2-rgb), .10), transparent 38%),
    linear-gradient(180deg, rgba(17,30,51,.98), rgba(10,19,34,.98))!important;
  box-shadow:0 18px 30px rgba(0,7,22,.16), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#screenAchievements .achievement-card--tier::before{
  width:180px!important;
  height:180px!important;
  right:-88px!important;
  top:-96px!important;
  background:radial-gradient(circle at center, rgba(var(--ach-accent-rgb), .24), rgba(var(--ach-accent-2-rgb), .06) 52%, transparent 72%)!important;
  filter:blur(4px)!important;
  opacity:.9!important;
}
#screenAchievements .achievement-card--tier::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.055), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 28%);
}
#screenAchievements .achievement-card--tier:hover{
  border-color:rgba(var(--ach-accent-rgb), .34)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--ach-accent-rgb), .17), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(var(--ach-accent-2-rgb), .12), transparent 38%),
    linear-gradient(180deg, rgba(20,34,58,.99), rgba(11,21,38,.99))!important;
  box-shadow:0 22px 38px rgba(0,7,22,.2), inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#screenAchievements .achievement-card--ready{
  border-color:rgba(255,209,94,.34)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,209,94,.16), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(255,125,199,.10), transparent 38%),
    linear-gradient(180deg, rgba(29,33,54,.98), rgba(15,23,39,.99))!important;
}
#screenAchievements .achievement-card--complete{
  border-color:rgba(103,230,173,.26)!important;
  background:
    radial-gradient(circle at 100% 0%, rgba(103,230,173,.15), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(90,223,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(18,37,46,.98), rgba(11,24,32,.99))!important;
}
#screenAchievements .achievement-card__icon{
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, rgba(var(--ach-accent-rgb), .26), rgba(var(--ach-accent-2-rgb), .18))!important;
  border-color:rgba(var(--ach-accent-rgb), .26)!important;
  box-shadow:0 10px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.10)!important;
}
#screenAchievements .achievement-card__kicker{
  color:rgba(var(--ach-accent-rgb), .92)!important;
}
#screenAchievements .achievement-card__rank-title{
  color:#78ddff!important;
}
#screenAchievements .achievement-rank{
  background:rgba(255,255,255,.045)!important;
}
#screenAchievements .achievement-rank.is-active{
  color:#fff!important;
  border-color:rgba(var(--ach-accent-rgb), .38)!important;
  background:linear-gradient(180deg, rgba(var(--ach-accent-rgb), .22), rgba(var(--ach-accent-2-rgb), .14))!important;
  box-shadow:0 8px 16px rgba(0,0,0,.14)!important;
}
#screenAchievements .achievement-rank.is-claimed{
  color:#11281c!important;
  border-color:rgba(103,230,173,.45)!important;
  background:linear-gradient(180deg, #7ef0bb, #59db9c)!important;
}
#screenAchievements .achievement-card__desc{
  color:#b2c1d4!important;
}
#screenAchievements .achievement-tier-progress{
  border-radius:13px!important;
  border-color:rgba(255,255,255,.06)!important;
  background:linear-gradient(180deg, rgba(2,8,17,.26), rgba(255,255,255,.03))!important;
}
#screenAchievements .achievement-tier-progress__meta span{
  color:#90a4bd!important;
}
#screenAchievements .achievement-tier-progress__bar{
  height:7px!important;
  background:rgba(107,148,199,.14)!important;
}
#screenAchievements .achievement-tier-progress__bar i{
  background:linear-gradient(90deg, var(--ach-accent-2) 0%, var(--ach-accent) 66%, #ffffff 132%)!important;
  box-shadow:0 0 16px rgba(var(--ach-accent-rgb), .22)!important;
}
#screenAchievements .achievement-card__reward small{
  color:#879bb4!important;
}
#screenAchievements .achievement-card__reward strong{
  color:#fff1a6!important;
}
#screenAchievements .achievement-card__locked,
#screenAchievements .achievement-card__done{
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:10px!important;
}
#screenAchievements .achievement-card__locked{
  color:#c2d1e0!important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
#screenAchievements .achievement-card__done{
  color:#0c2c1f!important;
  background:linear-gradient(180deg, #87efbf, #62e2a6)!important;
  border:1px solid rgba(126,240,187,.34)!important;
}
#screenAchievements .achievement-claim-btn{
  border-color:#ffe59b!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 40%),
    linear-gradient(180deg, #ffe890, #ffc956 58%, #ffbe45)!important;
  box-shadow:0 5px 0 #b97520!important, 0 12px 20px rgba(255,190,69,.20)!important;
}

#screenAchievements .achievement-empty{
  border-radius:18px!important;
  border-color:rgba(124,183,233,.20)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))!important;
}

@media (max-width:1366px){
  #screenAchievements .achievements-v65__hero{padding:20px 21px 18px!important}
  #screenAchievements .achievements-grid--tiers{gap:12px!important}
}
@media (max-width:980px){
  #screenAchievements .achievement-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:720px){
  #screenAchievements .achievement-toolbar{grid-template-columns:1fr 1fr!important}
  #screenAchievements .achievements-v65__hero{border-radius:18px!important}
}
@media (max-width:520px){
  #screenAchievements .achievement-toolbar{grid-template-columns:1fr!important}
}

/* V75 hotfix — keep the filter panel firmly in normal document flow. */
html body[data-ui-context="achievements"] #screenAchievements .achievement-toolbar{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:auto!important;
  transform:none!important;
  margin:0 0 20px!important;
  clear:both!important;
  align-self:stretch!important;
}
html body[data-ui-context="achievements"] #screenAchievements .achievements-grid--tiers{
  position:relative!important;
  z-index:auto!important;
  margin-top:0!important;
  transform:none!important;
  clear:both!important;
}

/* V76 — toolbar geometry fix.
   Older pixel-perfect rules forced a compact fixed height while V74 made the
   filter buttons taller. That caused the buttons to overflow their own panel
   and visually collide with the first achievement row. */
html body[data-ui-context="achievements"] #screenAchievements .achievement-toolbar{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  margin:0 0 16px!important;
  padding:8px!important;
  align-items:stretch!important;
}
html body[data-ui-context="achievements"] #screenAchievements .achievement-toolbar button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
  margin:0!important;
}
html body[data-ui-context="achievements"] #screenAchievements .achievements-grid--tiers{
  margin-top:0!important;
}
@media (max-width:980px){
  html body[data-ui-context="achievements"] #screenAchievements .achievement-toolbar{
    height:auto!important;
  }
}