/* ScoreNet v1.3d — Achievement Experience Presentation
   Loaded as a separate, cache-busted file so the Vault never depends on a stale
   copy of the shared arcade stylesheet. */

.achievement-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,320px);
  align-items:center;
  gap:clamp(24px,5vw,58px);
  margin:30px 0 22px;
  padding:clamp(22px,4vw,38px);
  overflow:hidden;
  border:1px solid rgba(120,231,255,.22);
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(120,231,255,.075),transparent 45%),
    radial-gradient(circle at 88% 45%,rgba(39,104,255,.15),transparent 40%),
    #020807;
  box-shadow:inset 0 0 42px rgba(120,231,255,.035),0 18px 50px rgba(0,0,0,.22);
}
.achievement-hero:after{
  content:"";
  position:absolute;
  inset:auto -8% -58% 36%;
  height:220px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(120,231,255,.06) 49px 50px);
  transform:perspective(350px) rotateX(62deg);
  transform-origin:bottom;
  opacity:.55;
}
.achievement-hero>div,.achievement-wordmark{position:relative;z-index:1}
.achievement-hero h1{font-size:clamp(2.6rem,6vw,5.2rem)}
.achievement-wordmark{
  display:block;
  width:100%;
  max-width:300px;
  max-height:118px;
  object-fit:contain;
  justify-self:end;
  filter:drop-shadow(0 0 20px rgba(47,190,255,.25));
}

.achievement-summary{
  display:grid;
  grid-template-columns:minmax(200px,1.15fr) repeat(3,minmax(130px,.7fr));
  gap:12px;
  margin:0 0 20px;
}
.achievement-summary-mark,.achievement-summary-metric,.achievement-summary-progress{
  min-width:0;
  padding:16px;
  border:1px solid rgba(120,231,255,.18);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(120,231,255,.065),rgba(116,255,138,.018)),#020705;
  box-shadow:inset 0 0 22px rgba(120,231,255,.025);
  text-shadow:none;
}
.achievement-summary-mark{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--cyan);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.achievement-summary-mark img{
  display:block;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 0 18px rgba(120,231,255,.18);
}
.achievement-summary-metric strong{display:block;color:var(--amber);font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.05}
.achievement-summary-metric span,.achievement-summary-progress small{display:block;margin-top:6px;color:#5ca86b;font-size:.66rem;line-height:1.35;text-transform:uppercase}
.achievement-summary-progress{grid-column:1/-1}
.achievement-summary-progress .progress{height:10px;border-radius:999px}

.achievement-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(285px,.65fr);
  gap:20px;
  align-items:start;
}
.achievement-layout>.section-stack,.achievement-layout>aside{min-width:0}
.achievement-layout .card{border-radius:16px}
.achievement-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.achievement-filter{display:flex;gap:7px;flex-wrap:wrap}
.achievement-filter .tab{border-radius:999px;padding:8px 11px;font-size:.62rem}
.achievement-filter .tab[aria-pressed="true"]{background:linear-gradient(90deg,var(--green),var(--cyan));color:#020503;border-color:transparent;text-shadow:none}

.achievement-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:20px;
}
.achievement-card{
  --tier-color:var(--green);
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:248px;
  overflow:hidden;
  padding:18px;
  border:1px solid rgba(116,255,138,.22);
  border-radius:15px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--tier-color) 9%,transparent),transparent 48%),
    linear-gradient(180deg,#06100b,#020604);
  box-shadow:inset 0 0 28px rgba(116,255,138,.025),0 12px 28px rgba(0,0,0,.18);
  text-shadow:none;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease;
}
.achievement-card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--tier-color);
  box-shadow:0 0 16px color-mix(in srgb,var(--tier-color) 58%,transparent);
}
.achievement-card:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-72px;
  top:-78px;
  border:1px solid color-mix(in srgb,var(--tier-color) 30%,transparent);
  border-radius:50%;
  opacity:.35;
}
.achievement-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tier-color) 68%,transparent);box-shadow:inset 0 0 34px rgba(116,255,138,.04),0 16px 34px rgba(0,0,0,.24)}
.achievement-card.is-locked{opacity:.68;filter:saturate(.7)}
.achievement-card.is-locked:hover{opacity:.84}
.achievement-card.is-unlocked{border-color:color-mix(in srgb,var(--tier-color) 43%,rgba(116,255,138,.22))}
.achievement-card-head{display:grid;grid-template-columns:62px minmax(0,1fr);gap:13px;align-items:center}
.achievement-badge{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--tier-color);
  border-radius:17px;
  color:var(--tier-color);
  background:radial-gradient(circle at 35% 25%,color-mix(in srgb,var(--tier-color) 20%,transparent),rgba(0,0,0,.08));
  box-shadow:inset 0 0 16px color-mix(in srgb,var(--tier-color) 30%,transparent),0 0 16px color-mix(in srgb,var(--tier-color) 12%,transparent);
  font-size:1rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.04em;
  text-align:center;
}
.achievement-card h3{margin:4px 0 0;color:var(--green-bright);font-size:1.03rem;line-height:1.25;overflow-wrap:anywhere}
.achievement-tier{display:block;color:var(--tier-color);font-size:.61rem;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
.achievement-card p{min-height:0;flex:1;margin:15px 0;color:#83ad8d;font-size:.77rem;line-height:1.55}
.achievement-card-state{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
  align-items:center;
  margin:0 0 10px;
  padding-top:12px;
  border-top:1px solid rgba(116,255,138,.12);
  color:#588e62;
  font-size:.61rem;
  line-height:1.35;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.achievement-card-state strong{color:var(--cyan);overflow-wrap:anywhere}
.achievement-card-state span{text-align:right}
.achievement-progress{height:8px;border-radius:999px}
.achievement-progress>span{background:linear-gradient(90deg,color-mix(in srgb,var(--tier-color) 75%,#183b23),var(--tier-color),var(--cyan))}
.achievement-card.tier-bronze{--tier-color:#d79a62}
.achievement-card.tier-silver{--tier-color:#cce6f5}
.achievement-card.tier-gold{--tier-color:var(--amber)}
.achievement-card.tier-platinum{--tier-color:#d9acff}

.achievement-mini-list,.achievement-leaderboard{display:grid;gap:10px}
.achievement-mini,.achievement-leader-row{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:11px;
  overflow:hidden;
  border:1px solid rgba(116,255,138,.16);
  border-radius:11px;
  background:linear-gradient(145deg,rgba(116,255,138,.04),transparent),#020705;
  color:inherit;
  text-decoration:none;
  text-shadow:none;
}
.achievement-mini{grid-template-columns:auto minmax(0,1fr)}
.achievement-mini:hover,.achievement-leader-row:hover{border-color:var(--cyan);background:rgba(120,231,255,.055)}
.achievement-mini>span:nth-child(2),.achievement-leader-row>span:nth-child(2){min-width:0}
.achievement-mini-badge{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid currentColor;
  border-radius:11px;
  color:var(--green);
  font-size:.69rem;
  font-weight:900;
  text-align:center;
}
.achievement-mini-badge.tier-bronze{color:#d79a62}.achievement-mini-badge.tier-silver{color:#cce6f5}.achievement-mini-badge.tier-gold{color:var(--amber)}.achievement-mini-badge.tier-platinum{color:#d9acff}
.achievement-mini strong,.achievement-leader-row strong{display:block;overflow:hidden;color:var(--green-bright);font-size:.76rem;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.achievement-mini small,.achievement-leader-row small{display:block;margin-top:3px;color:#568c61;font-size:.61rem;line-height:1.35}
.achievement-leader-row .rank{color:var(--cyan);font-weight:900}
.achievement-leader-row b{color:var(--amber);font-size:.85rem}

@media(max-width:960px){
  .achievement-layout{grid-template-columns:1fr}
  .achievement-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
  .achievement-summary-mark{grid-column:1/-1}
}
@media(max-width:760px){
  .achievement-hero{grid-template-columns:1fr;padding:24px}
  .achievement-wordmark{justify-self:start;max-width:250px;max-height:96px}
  .achievement-grid{grid-template-columns:1fr}
  .achievement-summary{grid-template-columns:1fr 1fr}
  .achievement-summary-mark,.achievement-summary-progress{grid-column:1/-1}
}
@media(max-width:480px){
  .achievement-hero{padding:20px;border-radius:12px}
  .achievement-wordmark{max-width:210px;max-height:78px}
  .achievement-summary{grid-template-columns:1fr}
  .achievement-summary-mark,.achievement-summary-progress{grid-column:auto}
  .achievement-card{min-height:0;padding:16px}
  .achievement-card-head{grid-template-columns:54px minmax(0,1fr)}
  .achievement-badge{width:54px;height:54px;border-radius:14px}
  .achievement-card-state{grid-template-columns:1fr}
  .achievement-card-state span{text-align:left}
}

/* v1.3d state, classification, recommendation, and profile-feature controls */
.achievement-state-filter{display:flex;gap:7px;flex-wrap:wrap;width:100%;margin-top:10px;padding-top:10px;border-top:1px solid rgba(116,255,138,.12)}
.achievement-state-filter .tab{border-radius:999px;padding:7px 10px;font-size:.6rem}
.achievement-state-filter .tab[aria-pressed="true"]{background:linear-gradient(90deg,var(--amber),var(--cyan));color:#020503;border-color:transparent;text-shadow:none}
.achievement-card.class-common{--tier-color:#74ff8a}.achievement-card.class-rare{--tier-color:#78e7ff}.achievement-card.class-epic{--tier-color:#ffc85a}.achievement-card.class-legendary{--tier-color:#d9acff}
.achievement-card.state-locked{opacity:.57;filter:saturate(.48)}
.achievement-card.state-locked:hover{opacity:.74}
.achievement-card.state-discovered{opacity:.9;filter:saturate(.9);border-style:dashed}
.achievement-card.state-completed{opacity:1;filter:none;box-shadow:inset 0 0 32px color-mix(in srgb,var(--tier-color) 7%,transparent),0 14px 32px rgba(0,0,0,.2)}
.achievement-card-actions{display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid rgba(116,255,138,.12)}
.achievement-feature-button{appearance:none;border:1px solid color-mix(in srgb,var(--tier-color) 58%,transparent);border-radius:999px;background:color-mix(in srgb,var(--tier-color) 6%,#020503);color:var(--tier-color);padding:8px 10px;font:800 .58rem/1 "Courier New",monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.achievement-feature-button:hover,.achievement-feature-button:focus-visible{background:var(--tier-color);color:#020503;outline:none}
.achievement-feature-button[aria-pressed="true"]{background:color-mix(in srgb,var(--tier-color) 18%,#020503);box-shadow:0 0 16px color-mix(in srgb,var(--tier-color) 18%,transparent)}
.achievement-mini.class-common .achievement-mini-badge,.achievement-mini-badge.class-common{color:#74ff8a}.achievement-mini.class-rare .achievement-mini-badge,.achievement-mini-badge.class-rare{color:#78e7ff}.achievement-mini.class-epic .achievement-mini-badge,.achievement-mini-badge.class-epic{color:#ffc85a}.achievement-mini.class-legendary .achievement-mini-badge,.achievement-mini-badge.class-legendary{color:#d9acff}
#almostUnlocks .achievement-mini{border-left:3px solid var(--amber)}
#featuredUnlocks .achievement-mini{border-left:3px solid var(--cyan)}
#communityFeed .achievement-mini{grid-template-columns:auto minmax(0,1fr)}
#communityFeed .achievement-mini strong{white-space:normal}
