:root {
    --t1-from: #dc2626;
    --t1-to: #991b1b;
    --t1-border: #7f1d1d;
    --t1-glow: rgba(127,29,29,.36);
    --t2-from: #ddd6fe;
    --t2-to: #a78bfa;
    --t2-border: #8b5cf6;
    --t2-glow: rgba(139,92,246,.26);
    --t3-from: #fff7c2;
    --t3-to: #fef08a;
    --t3-border: #facc15;
    --t3-glow: rgba(250,204,21,.30);
    --t4-from: #bfdbfe;
    --t4-to: #60a5fa;
    --t4-border: #3b82f6;
    --t4-glow: rgba(59,130,246,.22);
    --t5-from: #ecfdf5;
    --t5-to: #d1fae5;
    --t5-border: #a7f3d0;
    --t5-glow: rgba(16,185,129,.16);
}

:root[data-theme='dark'] .achv-card {
    border-color: #233246 !important;
    background: linear-gradient(160deg, #1e293b, #111c28) !important;
}

:root[data-theme='dark'] .achv-card .achv-title {
    color: #f1f5f9 !important;
}

:root[data-theme='dark'] .achv-card .achv-desc {
    color: #94a3b8 !important;
}

.achv-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    padding: 0.75rem;
    border: 1px solid rgba(0,0,0,.06);
    background: transparent;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.4) inset,
        0 1px 3px rgba(0,0,0,.10),
        0 8px 22px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.75),
        inset 0 -1px 0 rgba(0,0,0,.02);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.achv-card:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.65) inset,
        0 2px 6px rgba(0,0,0,.10),
        0 14px 26px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.85);
    filter: saturate(1.06);
}

.achv-card:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.9) inset,
        0 0 0 2px rgba(255,255,255,.65),
        0 0 0 4px var(--rim, rgba(99,102,241,.45)),
        0 8px 20px var(--rim-weak, rgba(99,102,241,.20));
}

.achv-card::before {
    content: none !important;
}

.achv-card::after {
    content: none !important;
}

.achv-card .vignette,
.achv-card .corner-glint,
.achv-card .tier-particles,
.achv-badge {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .achv-card::after {
        opacity: .35;
    }

    .achv-card .tier-particles,
    .achv-icon-svg {
        opacity: .2;
        filter: none !important;
    }
}

.achv-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(60% 60% at 50% 45%, var(--rim-weak, rgba(0,0,0,0.05)) 0 60%, transparent 70%),
        rgba(255,255,255,.7);
    backdrop-filter: saturate(140%) blur(4px);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 0 rgba(255,255,255,.85);
}

.achv-icon::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: radial-gradient(60% 60% at 50% 45%, var(--rim, rgba(0,0,0,.08)) 0 55%, transparent 72%);
    opacity: .55;
    filter: blur(.2px);
    pointer-events: none;
}

.achv-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 35%),
        radial-gradient(60% 50% at 50% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: .85;
}

.achv-icon svg {
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.65));
}

.achv-card:hover .achv-icon {
    transform: translateY(-1px) scale(1.035);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 2px 8px rgba(0,0,0,.12);
}

.achv-icon-svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rarity-t1 .achv-icon-svg.t1 {
    filter: drop-shadow(0 0 6px rgba(127,29,29,.50)) drop-shadow(0 0 14px rgba(127,29,29,.30));
}

.rarity-t2 .achv-icon-svg.t2 {
    filter: drop-shadow(0 0 4px rgba(139,92,246,.26));
}

.rarity-t3 .achv-icon-svg.t3 {
    filter: drop-shadow(0 0 6px rgba(255,255,255,.55)) drop-shadow(0 0 16px rgba(250,250,210,.35));
}

.rarity-t4 .achv-icon-svg.t4 {
    filter: drop-shadow(0 0 3px rgba(59,130,246,.22));
}

.rarity-t5 .achv-icon-svg.t5 {
    filter: drop-shadow(0 0 2px rgba(16,185,129,.20));
}

.achv-card .achv-title {
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.05;
    color: #0f172a;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
    letter-spacing: .1px;
}

.achv-card .achv-desc {
    font-size: .7rem;
    color: #475569;
}

.achv-mode {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    font-size: .62rem;
    font-weight: 900;
    padding: .18rem .5rem;
    border-radius: .55rem;
    border: 1px solid rgba(0,0,0,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
    color: #0f172a;
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 6px rgba(0,0,0,.08);
}

.achv-card .achv-icon,
.achv-card .achv-title,
.achv-card .achv-desc,
.rarity-t3 .achv-icon,
.rarity-t3 .achv-title,
.rarity-t3 .achv-desc,
.rarity-t3 .achv-mode {
    position: relative;
    z-index: 1;
}

.rarity-t1 .achv-mode {
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 6px rgba(127,29,29,.30);
}

.rarity-t2 .achv-mode {
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 6px rgba(139,92,246,.22);
}

.rarity-t3 .achv-mode {
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 6px rgba(251,191,36,.25);
}

.rarity-t4 .achv-mode {
    box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 1px 6px rgba(59,130,246,.2);
}

.rarity-t1 {
    --rim: #fda4af;
    --rim-weak: rgba(253,164,175,.20);
    border-color: var(--t1-border);
    color: #fff;
    box-shadow: 0 10px 22px var(--t1-glow), inset 0 0 0 1px rgba(255,255,255,.25);
    position: relative;
    background:
        radial-gradient(120% 80% at -10% -10%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, #ef4444 0%, #f97316 100%);
}

.rarity-t1 .achv-icon {
    color: #7f1d1d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(127,29,29,.24), 0 8px 14px rgba(127,29,29,.22);
}

.rarity-t1 .achv-title,
.rarity-t1 .achv-desc {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,255,255,.35);
}

.rarity-t1 .achv-icon::after {
    opacity: .95;
}

.rarity-t1::after {
    content: "";
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 0deg, rgba(255,255,255,.0) 0 40%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.0) 60%);
    transform: translateX(-60%);
    animation: shineLoop 3.2s linear infinite;
    mix-blend-mode: overlay;
}

.rarity-t2 {
    --rim: #c4b5fd;
    --rim-weak: rgba(196,181,253,.24);
    border-color: var(--t2-border);
    color: #0f172a;
    box-shadow: 0 8px 18px var(--t2-glow), inset 0 0 0 1px rgba(255,255,255,.25);
    background:
        radial-gradient(78% 58% at 25% 85%, rgba(216,180,254,.22), rgba(216,180,254,0) 62%),
        linear-gradient(150deg, var(--t2-from) 0%, var(--t2-to) 45%, var(--t2-from) 70%, var(--t2-to) 100%);
}

.rarity-t3 {
    --rim: #fde68a;
    --rim-weak: rgba(253,230,138,.22);
    border-color: var(--t3-border);
    color: #0f172a;
    box-shadow: 0 10px 20px var(--t3-glow), inset 0 0 0 1px rgba(255,255,255,.35);
    position: relative;
    background:
        radial-gradient(110% 90% at -10% -20%, rgba(255,255,255,.26), rgba(255,255,255,0) 60%),
        linear-gradient(160deg, var(--t3-from) 0%, var(--t3-to) 100%);
}

.rarity-t3 .achv-title,
.rarity-t3 .achv-desc {
    color: #0f172a;
}

.rarity-t3 .achv-icon {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.85), 0 0 0 1px rgba(240,240,220,.25), 0 10px 16px rgba(240,240,220,.28);
}

.rarity-t4 {
    --rim: #93c5fd;
    --rim-weak: rgba(147,197,253,.24);
    border-color: var(--t4-border);
    color: #0f172a;
    box-shadow: 0 8px 18px var(--t4-glow), inset 0 0 0 1px rgba(255,255,255,.25);
    background:
        radial-gradient(120% 80% at -10% -20%, rgba(255,255,255,.28), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #e0f2fe 0%, #bae6fd 40%, #93c5fd 100%);
}

.rarity-t5 {
    --rim: #a7f3d0;
    --rim-weak: rgba(167,243,208,.22);
    border-color: var(--t5-border);
    color: #0f172a;
    box-shadow: 0 8px 16px var(--t5-glow), inset 0 0 0 1px rgba(255,255,255,.25);
    background:
        radial-gradient(100% 80% at 0% 0%, rgba(254,249,195,.35), rgba(254,249,195,0) 60%),
        linear-gradient(160deg, #dcfce7 0%, #bbf7d0 40%, #86efac 100%);
}

.rarity-t2 .achv-icon {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(139,92,246,.18), 0 6px 12px rgba(139,92,246,.18);
}

.rarity-t4 .achv-icon {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1px rgba(59,130,246,.16), 0 5px 10px rgba(59,130,246,.16);
}

.rarity-t1 .achv-icon,
.rarity-t3 .achv-icon {
    animation: pulseGlow 3.6s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.06) saturate(1.08); }
}

@keyframes shineLoop {
    0% { transform: translateX(-60%) rotate(0deg); }
    100% { transform: translateX(60%) rotate(360deg); }
}

@keyframes glint {
    0%, 100% { opacity: .55; }
    50% { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t1::after,
    .rarity-t3::after {
        animation: none !important;
        opacity: .6;
    }

    .rarity-t1 .achv-icon,
    .rarity-t3 .achv-icon {
        animation: none !important;
    }
}

.rarity-t1 .flame-layer {
    position: absolute;
    inset: -18% -12% -28% -12%;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .75;
    background:
        radial-gradient(40% 30% at 50% 90%, rgba(255,115,0,.55), rgba(255,115,0,0) 65%),
        radial-gradient(35% 25% at 45% 85%, rgba(255,170,0,.38), rgba(255,170,0,0) 60%),
        radial-gradient(60% 45% at 50% 110%, rgba(255,60,0,.28), rgba(255,60,0,0) 65%),
        radial-gradient(25% 20% at 55% 75%, rgba(255,200,0,.28), rgba(255,200,0,0) 55%),
        conic-gradient(from 180deg at 50% 100%, rgba(255,140,0,.25), rgba(255,0,0,0) 40%);
    filter: saturate(1.08) brightness(1.02) blur(0.25px);
    animation: flameRise 2s ease-in-out infinite, flameWaver 1.6s ease-in-out infinite alternate;
}

.rarity-t1 .flame-layer .flame-blob {
    position: absolute;
    transform-origin: 50% 100%;
    border-radius: 60% 60% 50% 50%/70% 70% 50% 50%;
    background:
        radial-gradient(closest-side, rgba(255,180,0,.9), rgba(255,140,0,.0) 70%),
        radial-gradient(closest-side, rgba(255,90,0,.75), rgba(255,90,0,0) 75%);
    box-shadow: 0 0 14px rgba(255,90,0,.45), 0 0 26px rgba(255,140,0,.35);
    animation: flameBlob 1.4s ease-in-out infinite alternate;
}

@keyframes flameBlob {
    0% { transform: translate(-8%, 0) scale(1) skewX(-2deg); }
    50% { transform: translate(6%, -8%) scale(1.07) skewX(1deg); }
    100% { transform: translate(-6%, -16%) scale(1.12) skewX(-1deg); }
}

@keyframes flameRise {
    0% { transform: translateY(8%) scale(1.03); }
    50% { transform: translateY(-3%) scale(1.05); }
    100% { transform: translateY(8%) scale(1.03); }
}

@keyframes flameWaver {
    0% { background-position: 0% 0%, 20% 12%, 0% 0%, 12% 2%, 0 0; }
    100% { background-position: 3% -8%, 16% -6%, 0% -10%, 9% -7%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t1 .flame-layer {
        animation: none;
        opacity: .5;
    }
}

.rarity-t3 .edge-sweep {
    position: absolute;
    inset: -12% -12%;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: .78;
    filter: blur(.15px) drop-shadow(0 0 8px rgba(251,191,36,.22));
    animation: edgeSweep 4.8s linear infinite;
}

@keyframes edgeSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t3 .edge-sweep {
        animation: none !important;
        opacity: .5;
    }
}

.rarity-t2 .starfield {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
}

.rarity-t2 .starfield .s {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(255,255,255,1), rgba(255,255,255,0));
    box-shadow: 0 0 8px rgba(255,255,255,.95), 0 0 12px rgba(196,181,253,.9);
    animation: starBlink 1.5s infinite;
}

.rarity-t2 .starfield .s2 {
    width: 2px;
    height: 2px;
    box-shadow: 0 0 7px rgba(196,181,253,1);
}

.rarity-t2 .starfield .s3 {
    width: 4px;
    height: 4px;
    box-shadow: 0 0 10px rgba(196,181,253,1);
}

.rarity-t2 .starfield .s:nth-child(3n) {
    animation-duration: 2s;
    animation-delay: .15s;
}

.rarity-t2 .starfield .s:nth-child(4n) {
    animation-duration: 1.2s;
    animation-delay: .5s;
}

.rarity-t2 .starfield .s:nth-child(5n) {
    animation-duration: 2.4s;
    animation-delay: .1s;
}

@keyframes starBlink {
    0%, 8% { opacity: .25; }
    12% { opacity: 1; }
    20% { opacity: .4; }
    38% { opacity: 1; }
    44% { opacity: .35; }
    60% { opacity: 1; }
    100% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t2 .starfield .s {
        animation: none;
        opacity: .35;
    }
}

.rarity-t2 .nebula {
    position: absolute;
    inset: -10% -10%;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .5;
    background:
        radial-gradient(60% 40% at 20% 30%, rgba(168,85,247,.25), rgba(168,85,247,0) 70%),
        radial-gradient(50% 35% at 70% 60%, rgba(99,102,241,.20), rgba(99,102,241,0) 70%),
        radial-gradient(70% 50% at 40% 80%, rgba(236,72,153,.18), rgba(236,72,153,0) 75%);
    animation: nebulaDrift 26s ease-in-out infinite alternate;
    filter: blur(0.6px) saturate(1.05);
}

@keyframes nebulaDrift {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(-8px, 10px) scale(1.03); }
}

.rarity-t2 .meteor {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,255,255,.9), 0 0 14px rgba(196,181,253,.9);
    opacity: 0;
    transform: rotate(35deg);
    animation: meteorFly var(--mDur, 1.8s) linear var(--mDelay, 4s) infinite;
}

@keyframes meteorFly {
    0% { opacity: 0; transform: translate(-10%, -10%) rotate(35deg) scale(1); }
    8% { opacity: 1; }
    60% { opacity: .8; }
    100% { opacity: 0; transform: translate(120%, 120%) rotate(35deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t2 .nebula,
    .rarity-t2 .meteor {
        animation: none;
        opacity: .35;
    }
}

.rarity-t2 .meteor-tilt {
    position: absolute;
    inset: -12% -12% -12% -12%;
    border-radius: inherit;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
    transform: rotate(-35deg);
    transform-origin: center;
}

.rarity-t2 .meteor-tilt .meteor-shower {
    position: absolute;
    inset: -10% -10% -10% -10%;
}

.rarity-t2 .meteor-tilt .meteor-line {
    position: absolute;
    width: 160px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95) 45%, rgba(196,181,253,.75) 70%, rgba(255,255,255,0));
    box-shadow: 0 0 10px rgba(255,255,255,.85), 0 0 16px rgba(196,181,253,.55);
    opacity: 0;
    will-change: transform, opacity;
    animation: meteorSweep var(--msDur, 2.4s) ease-in-out var(--msDelay, 3.2s) infinite;
}

@keyframes meteorSweep {
    0% { opacity: 0; transform: translateX(40%); }
    10% { opacity: 1; }
    85% { opacity: .9; }
    100% { opacity: 0; transform: translateX(-120%); }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t2 .meteor-tilt .meteor-line {
        animation: none;
        opacity: .35;
    }
}

.rarity-t3 .heaven-clouds {
    position: absolute;
    inset: -12% -10% -10% -10%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

.rarity-t3 .heaven-clouds::before,
.rarity-t3 .heaven-clouds::after {
    content: "";
    position: absolute;
    top: -8%;
    bottom: -12%;
    width: 78%;
    filter: blur(.35px) contrast(1.06);
    opacity: 0;
}

.rarity-t3 .heaven-clouds::before {
    left: -18%;
    background:
        radial-gradient(70% 50% at 28% 30%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 56%, rgba(255,255,255,0) 64%),
        radial-gradient(62% 48% at 60% 65%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
        radial-gradient(90% 70% at 35% 80%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 72%);
    animation: cloudSweepL var(--cloudDurL, 10s) ease-in-out infinite;
}

.rarity-t3 .heaven-clouds::after {
    right: -18%;
    background:
        radial-gradient(70% 50% at 72% 30%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 56%, rgba(255,255,255,0) 64%),
        radial-gradient(62% 48% at 40% 65%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 70%),
        radial-gradient(90% 70% at 65% 80%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 72%);
    animation: cloudSweepR var(--cloudDurR, 11s) ease-in-out infinite;
}

.rarity-t3 .heaven-clouds .cloud-band {
    position: absolute;
    left: -15%;
    width: 130%;
    height: 28%;
    pointer-events: none;
    opacity: 0;
    filter: blur(.35px) contrast(1.08);
    mix-blend-mode: screen;
    background:
        radial-gradient(24% 60% at 10% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 58%, rgba(255,255,255,0) 64%),
        radial-gradient(26% 70% at 35% 40%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 66%),
        radial-gradient(30% 70% at 60% 60%, rgba(255,255,255,.94) 0%, rgba(255,255,255,0) 68%),
        radial-gradient(24% 60% at 85% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 64%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    animation: cloudBandDrift var(--cbDur, 12s) ease-in-out var(--cbDelay, 0s) infinite,
               cloudBandFade var(--cbDur, 12s) ease-in-out var(--cbDelay, 0s) infinite;
}

.rarity-t3 .heaven-clouds .cloud-band.cb1 { --cbAlpha: .62; }
.rarity-t3 .heaven-clouds .cloud-band.cb2 { --cbAlpha: .70; }
.rarity-t3 .heaven-clouds .cloud-band.cb3 { --cbAlpha: .58; }

@keyframes cloudBandDrift {
    0% { transform: translateX(-8%); }
    50% { transform: translateX(4%); }
    100% { transform: translateX(10%); }
}

@keyframes cloudBandFade {
    0% { opacity: 0; }
    20% { opacity: var(--cbAlpha, .65); }
    80% { opacity: var(--cbAlpha, .65); }
    100% { opacity: 0; }
}

@keyframes cloudSweepL {
    0% { transform: translateX(-16%) scale(1); opacity: 0; }
    20% { opacity: .98; }
    80% { opacity: .94; }
    100% { transform: translateX(24%) scale(1.02); opacity: 0; }
}

@keyframes cloudSweepR {
    0% { transform: translateX(16%) scale(1); opacity: 0; }
    20% { opacity: .98; }
    80% { opacity: .94; }
    100% { transform: translateX(-24%) scale(1.02); opacity: 0; }
}

.rarity-t3 .god-rays {
    position: absolute;
    inset: -10% -10% -6% -10%;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    transform: rotate(var(--rayTilt, 12deg));
    transform-origin: 20% -10%;
}

.rarity-t3 .god-rays .ray {
    position: absolute;
    top: -10%;
    bottom: -6%;
    width: 7%;
    background:
        linear-gradient(180deg, rgba(255,255,220,0) 0%, rgba(255,255,220,.92) 42%, rgba(255,255,220,.46) 68%, rgba(255,255,220,0) 100%),
        radial-gradient(100% 20% at 50% 40%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
    clip-path: polygon(48% 0%, 52% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(0 0 10px rgba(255,255,200,.15)) blur(.4px);
    mix-blend-mode: screen;
    opacity: 0;
    animation: rayPulse var(--rDur, 6s) ease-in-out infinite;
    animation-delay: var(--rDelay, 0s);
}

@keyframes rayPulse {
    0%, 20% { opacity: 0; }
    35% { opacity: .9; }
    60% { opacity: .28; }
    80%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t3 .heaven-clouds,
    .rarity-t3 .god-rays .ray,
    .rarity-t3 .heaven-clouds .cloud-band {
        animation: none !important;
        opacity: .5;
    }
}

@keyframes raysSweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.rarity-t4 .wave-field {
    position: absolute;
    inset: -10% -12% -18% -12%;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

.rarity-t4 .wave-layer {
    position: absolute;
    left: -120%;
    width: 240%;
    height: 55%;
    mix-blend-mode: screen;
    opacity: .52;
    background-repeat: repeat-x;
    background-size: auto 100%;
    animation: waveSlide var(--wDur, 9s) linear infinite;
    filter: blur(.3px);
}

.rarity-t4 .wave-layer.w1 {
    bottom: 0%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23ffffff' fill-opacity='0.45' d='M0,120 C150,160 350,60 600,110 C850,160 1050,90 1200,130 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

.rarity-t4 .wave-layer.w2 {
    bottom: 10%;
    opacity: .40;
    animation-duration: 11s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23e0f2fe' fill-opacity='0.60' d='M0,130 C180,150 360,80 600,120 C820,160 1020,70 1200,120 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

.rarity-t4 .wave-layer.w3 {
    bottom: 18%;
    opacity: .32;
    animation-duration: 13s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200'%3E%3Cpath fill='%23bfdbfe' fill-opacity='0.55' d='M0,140 C140,140 380,100 600,135 C860,170 1040,80 1200,110 L1200,200 L0,200Z'/%3E%3C/svg%3E");
}

@keyframes waveSlide {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t4 .wave-layer {
        animation: none;
        opacity: .35;
    }
}

.rarity-t5 .leaf-field {
    position: absolute;
    inset: -10% -5% -10% -5%;
    border-radius: inherit;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.rarity-t5 .leaf {
    position: absolute;
    top: -12%;
    width: 10px;
    height: 14px;
    border-radius: 3px 10px 3px 10px;
    background: linear-gradient(180deg, #fef9c3, #86efac);
    box-shadow: 0 0 6px rgba(134,239,172,.35);
    opacity: 0;
    transform: rotate(0deg);
    will-change: top, opacity, margin-left;
    animation: leafFallPos var(--lDur, 3.8s) cubic-bezier(.2,.8,.3,1) var(--lDelay, 0s) infinite, leafSway 2.1s ease-in-out infinite alternate;
}

@keyframes leafFallPos {
    0% { top: -12%; opacity: 0; }
    12% { opacity: .96; }
    90% { opacity: .96; }
    98% { opacity: .6; }
    100% { top: 116%; opacity: 0; }
}

@keyframes leafSway {
    0% { margin-left: -6px; }
    100% { margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .rarity-t5 .leaf {
        animation: none;
        opacity: .45;
    }
}

.achievement-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    border-radius: .75rem;
}

.achievement-toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--rim, rgba(0,0,0,.08));
    border-radius: .75rem 0 0 .75rem;
    opacity: .8;
}

.achievement-toast.rarity-t1 {
    border-color: var(--t1-border);
    box-shadow: 0 12px 24px var(--t1-glow), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 1px var(--t1-border) inset;
}

.achievement-toast.rarity-t2 {
    border-color: var(--t2-border);
    box-shadow: 0 7px 14px var(--t2-glow), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 1px var(--t2-border) inset;
}

.achievement-toast.rarity-t3 {
    border-color: var(--t3-border);
    box-shadow: 0 10px 20px var(--t3-glow), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 1px var(--t3-border) inset;
}

.achievement-toast.rarity-t4 {
    border-color: var(--t4-border);
    box-shadow: 0 5px 12px var(--t4-glow), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 1px var(--t4-border) inset;
}

.achievement-toast.rarity-t5 {
    border-color: var(--t5-border);
    box-shadow: 0 4px 10px var(--t5-glow), 0 0 0 1px rgba(255,255,255,.22) inset, 0 0 0 1px var(--t5-border) inset;
}

.achv-section {
    position: relative;
    padding: 2px 2px 4px 2px;
}

.achv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .25rem .25rem .35rem;
}

.achv-section-header .title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.achv-section-header .count {
    font-size: .7rem;
    font-weight: 800;
    color: #64748b;
    white-space: nowrap;
}

.achv-section .soft-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
    border-radius: 999px;
}

.achv-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: .75rem;
    overflow: visible;
}

.achv-grid.catalog-mode .achv-card {
    transition: transform .2s, box-shadow .2s;
    background-color: var(--card-bg, #fff);
}

.achv-grid.catalog-mode .achv-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (min-width: 640px) {
    .achv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .achv-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

#achievementsModal .mode-switch button[data-achv-cat="classic"][aria-pressed="true"],
#achievementsModal .mode-switch button[data-achv-cat="classic"][aria-selected="true"] {
    background: linear-gradient(90deg, #f43f5e, #ef4444);
    box-shadow: 0 4px 10px -2px rgba(244,63,94,.45);
}

#achievementsModal .mode-switch button[data-achv-cat="survival"][aria-pressed="true"],
#achievementsModal .mode-switch button[data-achv-cat="survival"][aria-selected="true"] {
    background: linear-gradient(90deg, #10b981, #22c55e);
    box-shadow: 0 4px 10px -2px rgba(16,185,129,.45);
}

#achievementsModal .mode-switch button[data-achv-cat="all"][aria-pressed="true"],
#achievementsModal .mode-switch button[data-achv-cat="all"][aria-selected="true"] {
    background: linear-gradient(90deg, #64748b, #94a3b8);
    box-shadow: 0 4px 10px -2px rgba(100,116,139,.35);
}

#achievementGrid .achievement-medal {
    min-height: 78px;
}

@keyframes pulseFun {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

#settlementAchievements {
    display: grid;
    gap: .9rem;
}

#settlementAchievements .achv-card {
    cursor: pointer;
}

#settlementAchievements .settlement-achv-grid {
    display: grid;
    gap: .75rem;
}

#settlementAchievements .settlement-achv-grid-feature {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

#settlementAchievements .settlement-achv-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#settlementAchievements .settlement-achv-card {
    width: 100%;
    min-width: 0;
    border-radius: 1rem;
}

#settlementAchievements .settlement-achv-feature {
    min-height: 5.9rem;
    align-items: center;
}

#settlementAchievements .settlement-achv-compact {
    min-height: 5.2rem;
}

#settlementAchievements .settlement-achv-icon-feature {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: .95rem !important;
}

#settlementAchievements .settlement-achv-icon-compact {
    width: 2.35rem !important;
    height: 2.35rem !important;
}

#settlementAchievements .settlement-achv-title,
#settlementAchievements .settlement-achv-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#settlementAchievements .settlement-achv-title {
    text-wrap: balance;
}

#settlementAchievements .settlement-achv-desc {
    opacity: .92;
}

#settlementAchievements .settlement-achv-title-feature {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    font-size: 1rem !important;
    line-height: 1.15 !important;
}

#settlementAchievements .settlement-achv-desc-feature {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-width: none !important;
    font-size: .74rem !important;
}

#settlementAchievements .settlement-achv-title-compact {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: .82rem !important;
    line-height: 1.12 !important;
}

#settlementAchievements .settlement-achv-desc-compact {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: .66rem !important;
    line-height: 1.12 !important;
    margin-top: .12rem;
}

@media (max-width: 640px) {
    #settlementAchievements .settlement-achv-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #settlementAchievements .settlement-achv-feature {
        min-height: 5.4rem;
        padding: .9rem !important;
        gap: .7rem !important;
    }

    #settlementAchievements .settlement-achv-icon-feature {
        width: 2.7rem !important;
        height: 2.7rem !important;
    }

    #settlementAchievements .settlement-achv-title-feature {
        font-size: .9rem !important;
    }

    #settlementAchievements .settlement-achv-desc-feature {
        font-size: .67rem !important;
    }
}

@media (min-width: 641px) {
    #settlementAchievements .settlement-achv-grid-feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #settlementAchievements .settlement-achv-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}