:root { --achievement-bg:#17132f; --achievement-bg-soft:#2d2452; --achievement-text:#f8f7ff; --achievement-muted:#b9b4d0; --achievement-gold:#e6b83f; }
body.achievements-page { min-height:100vh; margin:0; color:var(--achievement-text); background:radial-gradient(circle at 12% 0%,#433568 0,transparent 34%),linear-gradient(160deg,#2b2250 0%,var(--achievement-bg) 58%,#0c0a1b 100%); }
.achievements-page h1,.achievements-page h2,.achievements-page h3,.achievements-page p,.achievements-page span,.achievements-page strong,.achievements-page button,.achievements-page a { color:inherit; }
.achievements-page .achievement-section-heading h2,.achievements-page .achievement-catalog-title,.achievements-page .achievement-detail-modal h2,.achievements-page .achievement-info-modal h2 { color:#fff; }
.achievements-page .achievements-summary-copy p,.achievements-page .achievement-progress-strip p,.achievements-page .achievement-detail-modal p,.achievements-page .achievement-info-modal p { color:#d2cde5; }
.achievements-page .achievement-catalog-toggle,.achievements-page .achievement-filter,.achievements-page .achievement-card-copy small,.achievements-page .achievement-card-rarity { color:#f2efff; }
.achievements-shell { width:100%; max-width:1180px; margin:0 auto; padding:24px 18px 96px; }
.achievements-topbar,.achievement-section-heading,.achievements-summary,.achievement-progress-strip>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.achievements-topbar { margin-bottom:28px; }
.achievements-topbar h1 { margin:2px 0 0; color:#fff; font-size:clamp(1.7rem,5vw,2.65rem); letter-spacing:-.04em; }
.achievements-kicker { color:#b8b2d4; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.achievements-back,.achievements-rarity-button { display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.13); color:#fff; background:rgba(8,6,23,.54); }
.achievements-back { width:48px; height:48px; flex:0 0 48px; border-radius:50%; font-size:1.5rem; }
.achievements-rarity-button { gap:6px; padding:9px 12px; border-radius:22px; font-size:.8rem; }
.achievements-rarity-button ion-icon { color:#e0d9ff; font-size:1.15rem; }
.achievements-summary { padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:22px; background:linear-gradient(135deg,rgba(91,73,139,.56),rgba(26,20,54,.76)); box-shadow:0 16px 42px rgba(5,2,20,.2); }
.achievement-level-badge { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(230,184,63,.55); border-radius:18px; color:#ffe39a; background:rgba(230,184,63,.14); font-size:.78rem; font-weight:700; }
.achievement-level-badge ion-icon { font-size:1.05rem; }
.achievements-summary-copy p { margin:10px 0 0; color:var(--achievement-muted); font-size:.9rem; }
.achievements-summary-count { display:flex; flex-direction:column; align-items:flex-end; min-width:74px; }
.achievements-summary-count strong { color:#fff; font-size:2rem; line-height:1; }
.achievements-summary-count span { color:var(--achievement-muted); font-size:.76rem; }
.achievement-progress-strip { margin:14px 0 34px; padding:15px 18px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(12,9,30,.42); }
.achievement-progress-strip strong { font-size:.9rem; }.achievement-progress-strip>div:first-child span { color:var(--achievement-muted); font-size:.78rem; }.achievement-progress-strip .progress { height:7px; margin-top:12px; background:rgba(255,255,255,.12); }.achievement-progress-strip .progress-bar { background:linear-gradient(90deg,#a68aff,#e6b83f); }.achievement-progress-strip p { margin:9px 0 0; color:var(--achievement-muted); font-size:.78rem; }
.achievement-gallery-section,.achievement-progress-section { margin-bottom:34px; }.achievement-section-heading { margin-bottom:16px; }.achievement-section-heading h2 { margin:4px 0 0; font-size:1.35rem; letter-spacing:-.025em; }.achievement-gallery-count { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 9px; border:1px solid rgba(230,184,63,.55); border-radius:15px; color:#fff !important; background:rgba(230,184,63,.18); font-weight:800; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.achievements-status { margin:-6px 0 14px; color:var(--achievement-muted); font-size:.78rem; }
.achievement-badge-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 12px; }
.achievement-badge-item { min-width:0; padding:0; border:0; color:#fff; background:transparent; text-align:center; cursor:pointer; }.achievement-badge-item strong { display:block; overflow:hidden; margin-top:9px; color:#fff; font-size:.78rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }.achievement-badge-medal { position:relative; display:flex; align-items:center; justify-content:center; width:clamp(78px,24vw,116px); aspect-ratio:1; margin:0 auto; border:5px solid var(--rarity-color); border-radius:30%; color:#fff; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.45),transparent 30%),linear-gradient(145deg,var(--rarity-soft),var(--rarity-deep)); box-shadow:0 9px 22px rgba(0,0,0,.28),inset 0 0 0 4px rgba(255,255,255,.18),0 0 0 3px rgba(255,255,255,.09); transform:rotate(0deg); transition:transform .2s ease,box-shadow .2s ease; }.achievement-badge-item:hover .achievement-badge-medal,.achievement-badge-item:focus-visible .achievement-badge-medal { transform:translateY(-4px) scale(1.03); box-shadow:0 14px 28px rgba(0,0,0,.35),0 0 24px var(--rarity-glow); }.achievement-badge-medal ion-icon { position:relative; z-index:1; font-size:clamp(2.4rem,11vw,4rem); filter:drop-shadow(0 3px 2px rgba(0,0,0,.28)); }.achievement-badge-shine { position:absolute; inset:8px; border:1px solid rgba(255,255,255,.36); border-radius:25%; }.achievement-badge-date { position:absolute; right:-8px; bottom:-8px; z-index:2; padding:3px 5px; border:2px solid var(--achievement-bg); border-radius:9px; color:#22183a; background:#fff; font-size:.58rem; font-weight:800; }.rarity-common { --rarity-color:#e68a2e; --rarity-soft:#ffcc77; --rarity-deep:#9c4a18; --rarity-glow:rgba(230,138,46,.48); }.rarity-rare { --rarity-color:#54d496; --rarity-soft:#74e4bb; --rarity-deep:#14744e; --rarity-glow:rgba(84,212,150,.52); }.rarity-epic { --rarity-color:#6da0ff; --rarity-soft:#86b4ff; --rarity-deep:#2c4fa6; --rarity-glow:rgba(109,160,255,.52); }.rarity-legendary { --rarity-color:#c4ccd9; --rarity-soft:#e1e7f0; --rarity-deep:#707b91; --rarity-glow:rgba(196,204,217,.42); }.rarity-mythical { --rarity-color:#e6b83f; --rarity-soft:#ffe28b; --rarity-deep:#a86c11; --rarity-glow:rgba(230,184,63,.6); }
.achievement-gallery-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:7px; padding:42px 20px; border:1px dashed rgba(255,255,255,.2); border-radius:18px; color:var(--achievement-muted); text-align:center; }.achievement-gallery-empty ion-icon { color:var(--achievement-gold); font-size:2.3rem; }.achievement-gallery-empty strong { color:#fff; }.achievement-progress-gallery { display:grid; gap:10px; }.achievement-badge-item.is-progress { display:grid; grid-template-columns:58px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:15px; background:rgba(255,255,255,.06); text-align:left; }.achievement-badge-item.is-progress .achievement-badge-medal { grid-row:1/3; width:58px; border-width:3px; border-radius:20%; }.achievement-badge-item.is-progress .achievement-badge-medal ion-icon { font-size:2rem; }.achievement-badge-item.is-progress strong { margin:0; }.achievement-badge-progress-label { color:var(--achievement-muted); font-size:.75rem; }.achievement-badge-item.is-progress .progress { grid-column:2; height:5px; background:rgba(255,255,255,.12); }.achievement-badge-item.is-progress .progress-bar { background:var(--rarity-color); }
.achievement-catalog { margin-top:42px; }.achievement-catalog-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; padding:14px 0; border:0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); color:#fff; background:transparent; font-size:.95rem; font-weight:700; }.achievement-catalog-toggle ion-icon { transition:transform .2s ease; }.achievement-catalog-toggle[aria-expanded="true"] ion-icon { transform:rotate(180deg); }.achievement-catalog-content { padding-top:18px; }.achievement-catalog-tools { display:grid; gap:10px; margin-bottom:16px; }.achievement-state-filters,.achievement-filter-row { display:flex; flex-wrap:wrap; gap:7px; }.achievement-filter { padding:7px 11px; border:1px solid rgba(255,255,255,.18); border-radius:18px; color:var(--achievement-muted); background:transparent; font-size:.75rem; }.achievement-filter.is-active { border-color:#b49aff; color:#fff; background:#5f42ad; }.achievements-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.achievement-card { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; padding:12px 10px; border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#fff; background:rgba(255,255,255,.06); text-align:center; }.achievement-medal { display:flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; height:42px; border:2px solid var(--rarity-color); border-radius:50%; color:var(--rarity-color); }.achievement-card-copy { order:-1; width:100%; min-width:0; }.achievement-card-copy strong,.achievement-card-copy small,.achievement-card-rarity { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.achievement-card-copy strong { font-size:.78rem; }.achievement-card-copy small { overflow:visible; color:var(--achievement-muted); font-size:.66rem; line-height:1.35; text-overflow:clip; white-space:normal; }.achievement-card-rarity { color:var(--achievement-muted); font-size:.66rem; }.achievement-card-status { color:#7be2ad; font-size:.65rem; }.achievement-inline-empty { grid-column:1/-1; padding:18px; color:var(--achievement-muted); text-align:center; }
.modal-content.achievement-info-modal,.modal-content.achievement-detail-modal { border:1px solid rgba(255,255,255,.13); border-radius:24px; color:#fff; background:linear-gradient(160deg,#312655,#15112d); }.achievement-info-modal .modal-header,.achievement-detail-modal .modal-header { border-bottom-color:rgba(255,255,255,.1); }.achievement-info-modal .btn-close,.achievement-detail-modal .btn-close { filter:invert(1); }.achievement-rarity-list { display:grid; gap:10px; padding:0; list-style:none; }.achievement-rarity-list li { display:flex; align-items:center; gap:9px; }.rarity-dot { width:11px; height:11px; border-radius:50%; background:var(--rarity-color); }.achievement-detail-modal { overflow:hidden; }.achievement-detail-modal .modal-body { padding:10px 26px 32px; }.achievement-detail-medal { display:flex; align-items:center; justify-content:center; width:min(62vw,220px); aspect-ratio:1; margin:4px auto 16px; border:8px solid var(--rarity-color); border-radius:30%; color:#fff; background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.55),transparent 28%),linear-gradient(145deg,var(--rarity-soft),var(--rarity-deep)); box-shadow:0 0 34px var(--rarity-glow),inset 0 0 0 5px rgba(255,255,255,.18); }.achievement-detail-medal ion-icon { font-size:6rem; }.achievement-detail-rarity { display:inline-block; padding:4px 10px; border-radius:14px; color:#241737; background:var(--rarity-color); font-size:.72rem; font-weight:800; }.achievement-detail-date { display:block; width:max-content; margin:10px auto 0; padding:5px 10px; border:1px solid rgba(255,255,255,.25); border-radius:12px; color:var(--achievement-muted); font-size:.75rem; }.achievement-detail-modal h2 { margin:12px 0 6px; }.achievement-detail-modal p { color:var(--achievement-muted); }.achievement-detail-progress { color:#fff; font-size:1.15rem; font-weight:800; }.achievement-detail-modal .progress { height:7px; background:rgba(255,255,255,.12); }.achievement-detail-modal .progress-bar { background:var(--rarity-color); }.achievement-detail-earned { margin:12px 0 0; }.achievement-detail-reward { display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:8px 12px; border-radius:14px; color:#f9db76; background:rgba(230,184,63,.14); font-size:.78rem; font-weight:700; }
@media (min-width:768px) { .achievements-shell { padding:42px 32px 110px; }.achievement-badge-gallery { grid-template-columns:repeat(5,minmax(0,1fr)); gap:30px 18px; }.achievements-summary { padding:25px 28px; }.achievement-progress-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.achievements-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
.achievement-badge-result { display:block; overflow:visible; margin-top:4px; color:#d2cde5; font-size:.68rem; line-height:1.35; text-overflow:clip; white-space:normal; }
.achievement-trophy-room { margin:42px 0 8px; }.achievement-trophy-intro { margin:-8px 0 16px; color:#d2cde5; font-size:.8rem; }.achievement-trophy-list { display:grid; gap:10px; }.achievement-trophy-card { display:flex; align-items:center; gap:13px; padding:14px; border:1px solid rgba(255,255,255,.14); border-left:4px solid #aab4c7; border-radius:16px; background:rgba(255,255,255,.06); }.achievement-trophy-card.is-champion { border-left-color:#e6b83f; background:linear-gradient(110deg,rgba(230,184,63,.18),rgba(255,255,255,.05)); }.achievement-trophy-card.is-vice { border-left-color:#b8c2d2; }.achievement-trophy-icon { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; border-radius:50%; color:#e6b83f; background:rgba(230,184,63,.16); font-size:1.35rem; }.achievement-trophy-card.is-vice .achievement-trophy-icon { color:#d3dbe8; background:rgba(211,219,232,.14); }.achievement-trophy-copy { min-width:0; }.achievement-trophy-copy strong,.achievement-trophy-copy h3,.achievement-trophy-copy p,.achievement-trophy-copy small { display:block; margin:0; }.achievement-trophy-copy strong { color:#ffe28b; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }.achievement-trophy-card.is-vice .achievement-trophy-copy strong { color:#dce4f0; }.achievement-trophy-copy h3 { overflow:hidden; margin-top:3px; color:#fff; font-size:.95rem; text-overflow:ellipsis; white-space:nowrap; }.achievement-trophy-copy p { margin-top:3px; color:#f1edff; font-size:.8rem; }.achievement-trophy-copy small { margin-top:5px; color:#c0b9d7; font-size:.7rem; }.achievement-trophy-empty { display:flex; align-items:center; justify-content:center; gap:8px; padding:24px; border:1px dashed rgba(255,255,255,.2); border-radius:16px; color:#d2cde5; font-size:.8rem; }.achievement-trophy-empty ion-icon { color:#e6b83f; font-size:1.35rem; }
.rarity-common { --rarity-color:#ef7558; --rarity-soft:#ffb28e; --rarity-deep:#8d2f2f; --rarity-glow:rgba(239,117,88,.46); }

@media (max-width:767.98px) {
  .achievements-topbar { flex-wrap:wrap; align-items:flex-start; }
  .achievements-topbar > div { flex:1 1 calc(100% - 64px); min-width:0; }
  .achievements-rarity-button { flex:0 0 100%; width:100%; margin-top:2px; }
  .achievement-card-copy strong { overflow:visible; text-overflow:clip; white-space:nowrap; }
}

/* Achievement names should remain readable instead of being truncated. */
.achievement-badge-item strong,
.achievement-card-copy strong {
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}

.achievement-card-status {
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#36c978;
}
.achievement-card-status ion-icon { font-size:.85rem; }