/* ═══════════════════════════════════════════════════════════════════════════
   SIGNDEAF — ACHIEVEMENT OVERLAY SYSTEM
   Site-wide XP gain, achievement unlocks, level-up celebrations
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── XP Gain floating label ─────────────────────────────────────────────── */
.sd-xp-float {
    position: fixed;
    font-size: 16px;
    font-weight: 800;
    color: #ffd900;
    text-shadow: 0 0 12px rgba(255,217,0,.7), 0 2px 4px rgba(0,0,0,.4);
    pointer-events: none;
    z-index: 99999;
    white-space: nowrap;
    animation: sdXpFloat 1.6s ease-out forwards;
}
@keyframes sdXpFloat {
    0%   { opacity: 0; transform: translateY(0) scale(.8); }
    20%  { opacity: 1; transform: translateY(-8px) scale(1.15); }
    60%  { opacity: 1; transform: translateY(-32px) scale(1); }
    100% { opacity: 0; transform: translateY(-56px) scale(.9); }
}

/* ── Achievement Toast ──────────────────────────────────────────────────── */
#sd-ach-toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 99998;
    pointer-events: none;
}
.sd-ach-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a2a5e 0%, #0f1b35 100%);
    border: 1px solid rgba(255,217,0,.35);
    border-radius: 18px;
    padding: 14px 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
    pointer-events: auto;
    animation: sdToastIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
    max-width: 320px;
    will-change: transform, opacity;
}
.sd-ach-toast.is-leaving {
    animation: sdToastOut .4s ease-in forwards;
}
@keyframes sdToastIn {
    from { opacity: 0; transform: translateX(60px) scale(.85); }
    to   { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes sdToastOut {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(60px) scale(.9); }
}
.sd-ach-toast-icon {
    font-size: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,217,0,.5));
    animation: sdIconPop .6s .2s cubic-bezier(.34,1.8,.64,1) both;
}
@keyframes sdIconPop {
    from { transform: scale(0) rotate(-20deg); }
    to   { transform: scale(1) rotate(0deg); }
}
.sd-ach-toast-body { min-width: 0; }
.sd-ach-toast-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffd900;
    margin-bottom: 2px;
}
.sd-ach-toast-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}
.sd-ach-toast-desc {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin-top: 2px;
}
.sd-ach-toast-xp {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,217,0,.18);
    color: #ffd900;
    border-radius: 999px;
    padding: 2px 8px;
    margin-top: 4px;
}

/* ── Level-Up Modal ─────────────────────────────────────────────────────── */
#sd-levelup-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    background: rgba(15,27,53,.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: sdFadeIn .3s ease;
}
@keyframes sdFadeIn { from { opacity:0; } to { opacity:1; } }

#sd-levelup-overlay.is-leaving { animation: sdFadeOut .4s ease forwards; }
@keyframes sdFadeOut { from { opacity:1; } to { opacity:0; } }

.sd-levelup-card {
    background: linear-gradient(160deg, #1c2f6b 0%, #0f1b35 100%);
    border: 2px solid rgba(255,217,0,.5);
    border-radius: 32px;
    padding: 48px 56px;
    text-align: center;
    box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 80px rgba(255,217,0,.12);
    max-width: 420px;
    width: calc(100% - 48px);
    position: relative;
    overflow: hidden;
    animation: sdCardIn .6s .1s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes sdCardIn {
    from { opacity:0; transform: scale(.7) translateY(24px); }
    to   { opacity:1; transform: scale(1) translateY(0); }
}

/* confetti dots */
.sd-levelup-card::before {
    content: '';
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(circle, #ffd900 1px, transparent 1px),
        radial-gradient(circle, #1cb0f6 1px, transparent 1px),
        radial-gradient(circle, #ff7ab6 1px, transparent 1px);
    background-size: 30px 30px, 40px 40px, 25px 25px;
    background-position: 0 0, 15px 15px, 5px 20px;
    opacity: .06;
}

.sd-levelup-rays {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,217,0,.06) 20deg, transparent 40deg, transparent 60deg, rgba(28,176,246,.06) 80deg, transparent 100deg, transparent 140deg, rgba(255,122,182,.05) 160deg, transparent 180deg, transparent 220deg, rgba(255,217,0,.06) 240deg, transparent 260deg, transparent 300deg, rgba(28,176,246,.05) 320deg, transparent 340deg);
    animation: sdRaysRotate 12s linear infinite;
    pointer-events: none;
}
@keyframes sdRaysRotate { to { transform: rotate(360deg); } }

.sd-levelup-icon {
    font-size: 64px;
    display: block;
    margin-bottom: 8px;
    animation: sdIconBounce 1s .4s cubic-bezier(.34,2,.64,1) both;
    filter: drop-shadow(0 0 20px rgba(255,217,0,.6));
}
@keyframes sdIconBounce {
    from { transform: scale(0) rotate(-30deg); }
    to   { transform: scale(1) rotate(0deg); }
}
.sd-levelup-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #ffd900;
    margin-bottom: 6px;
}
.sd-levelup-title {
    font-size: 32px;
    font-weight: 900;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.1;
}
.sd-levelup-subtitle {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    margin: 0 0 28px;
}
.sd-levelup-xp-bar {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}
.sd-levelup-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd900, #ffb700);
    border-radius: 999px;
    transition: width 1s .8s cubic-bezier(.22,1,.36,1);
}
.sd-levelup-dismiss {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #1971c2, #1cb0f6);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(25,113,194,.5);
    transition: transform .15s, box-shadow .15s;
}
.sd-levelup-dismiss:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(25,113,194,.6); }

/* ── Dictionary sidebar achievement panel ───────────────────────────────── */
.sdd-journey-panel {
    background: linear-gradient(160deg, #1c2f6b 0%, #0f1b35 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,217,0,.2);
    color: #fff;
}
.sdd-journey-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.sdd-journey-panel-icon { font-size: 18px; }
.sdd-journey-panel-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* Level badge row */
.sdd-journey-level {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sdd-journey-level-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255,217,0,.15);
    border: 2px solid rgba(255,217,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.sdd-journey-level-info { min-width: 0; }
.sdd-journey-level-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.sdd-journey-level-xp {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    margin-top: 2px;
}

/* XP bar */
.sdd-journey-xp-bar {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}
.sdd-journey-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd900, #ffb700);
    border-radius: 999px;
    transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* Next achievement */
.sdd-journey-next {
    background: rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.sdd-journey-next-kicker {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 6px;
}
.sdd-journey-next-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sdd-journey-next-icon { font-size: 20px; flex-shrink: 0; }
.sdd-journey-next-info { min-width: 0; flex: 1; }
.sdd-journey-next-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.sdd-journey-next-bar {
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
}
.sdd-journey-next-fill {
    height: 100%;
    background: linear-gradient(90deg, #1cb0f6, #1971c2);
    border-radius: 999px;
    transition: width .8s ease;
}
.sdd-journey-next-count {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    margin-left: 4px;
}

/* Practice CTA */
.sdd-journey-practice-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 16px;
    background: linear-gradient(135deg, #1971c2, #1cb0f6);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(25,113,194,.4);
}
.sdd-journey-practice-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(25,113,194,.5);
    color: #fff;
    text-decoration: none;
}

/* Guest/free state */
.sdd-journey-guest {
    text-align: center;
    padding: 4px 0;
}
.sdd-journey-guest-icon { font-size: 32px; display: block; margin-bottom: 8px; }
.sdd-journey-guest-text {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    margin: 0 0 12px;
    line-height: 1.5;
}
.sdd-journey-guest-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: rgba(255,217,0,.15);
    color: #ffd900;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid rgba(255,217,0,.3);
    transition: background .15s;
}
.sdd-journey-guest-cta:hover { background: rgba(255,217,0,.22); color: #ffd900; text-decoration: none; }

@media (max-width: 768px) {
    #sd-ach-toast-stack { bottom: 80px; right: 12px; left: 12px; }
    .sd-ach-toast { max-width: 100%; }
}