/* ======================================================== */
/* 🃏 ROADMAP NODE POPOVER & 3D CARD FAN-OUT ANIMATIONS     */
/* Ceiling: < 350 lines | Spring Popover + Roulette + Foil  */
/* ======================================================== */

/* 1. SPRING-ORIGIN POPOVER CONTAINER & AMBIENT GLOW */
.sq-popover {
    position: absolute !important;
    top: calc(100% + 11px) !important;
    left: 50% !important;
    transform: translateX(calc(-50% + var(--pop-shift, 0px))) !important;
    transform-origin: calc(50% + var(--arrow-shift, 0px)) -8px !important;
    width: 288px !important;
    padding: 15px 14px 14px !important;
    border-radius: 24px !important;
    z-index: 65 !important;
    background:
        radial-gradient(125% 75% at 50% 0%, rgba(124, 102, 255, 0.22) 0%, rgba(184, 209, 102, 0.08) 46%, transparent 78%),
        linear-gradient(168deg, #1B1E16 0%, #131510 56%, #0E100C 100%) !important;
    box-shadow:
        0 26px 56px rgba(0, 0, 0, 0.88),
        0 8px 20px rgba(92, 68, 245, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    animation: sqPopoverSpringOpen 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}

html.light .sq-popover {
    background:
        radial-gradient(125% 75% at 50% 0%, rgba(124, 102, 255, 0.12) 0%, rgba(184, 209, 102, 0.08) 48%, transparent 80%),
        linear-gradient(168deg, #FFFFFF 0%, #F7F7F2 100%) !important;
    box-shadow: 0 24px 48px rgba(24, 28, 20, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFFFFF !important;
}

@keyframes sqPopoverSpringOpen {
    0% { opacity: 0; transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(-12px) scale(0.74); filter: blur(3px); }
    68% { opacity: 1; transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(2px) scale(1.03); filter: blur(0); }
    100% { opacity: 1; transform: translateX(calc(-50% + var(--pop-shift, 0px))) translateY(0) scale(1); filter: blur(0); }
}

.sq-popover-arrow {
    position: absolute !important; top: -6px !important; left: calc(50% + var(--arrow-shift, 0px)) !important;
    width: 13px !important; height: 13px !important; transform: translateX(-50%) rotate(45deg) !important;
    background: #232328 !important; box-shadow: -1px -1px 0 rgba(255, 255, 255, 0.16) !important;
}
html.light .sq-popover-arrow { background: #F7F6FF !important; box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.08) !important; }

/* 2. HEADER ROW: PULSING SPARKLE & DICE RANDOM PILL */
.sq-popover-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.sq-popover-kicker {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px !important; font-weight: 800 !important; letter-spacing: -0.01em; color: #FFFFFF;
}
.sq-kicker-spark {
    font-style: normal; color: #FBBF24; font-size: 12px; display: inline-block;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.75); animation: sqKickerSparkSpin 2.8s ease-in-out infinite;
}
@keyframes sqKickerSparkSpin {
    0%, 100% { transform: scale(0.9) rotate(-12deg); opacity: 0.8; }
    50% { transform: scale(1.25) rotate(18deg); opacity: 1; }
}

.sq-pop-ghost-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 4.5px 10px !important; border-radius: 999px !important;
    background: rgba(184, 209, 102, 0.13) !important; border: 1px solid rgba(184, 209, 102, 0.34) !important;
    color: #D4EE7F !important; font-size: 11.5px !important; font-weight: 800 !important; cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
}
html.light .sq-pop-ghost-link {
    background: rgba(82, 102, 0, 0.1) !important; border-color: rgba(82, 102, 0, 0.28) !important; color: #3D4D00 !important;
}
.sq-pop-ghost-link:hover {
    transform: translateY(-1.5px) scale(1.05); background: rgba(184, 209, 102, 0.24) !important;
    box-shadow: 0 5px 15px rgba(184, 209, 102, 0.32), 0 0 0 1px rgba(251, 191, 36, 0.45);
}
.sq-pop-ghost-link:active { transform: scale(0.93); }
.sq-pop-ghost-link.is-rolling {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.28) 0%, rgba(184, 209, 102, 0.32) 100%) !important;
    border-color: #FBBF24 !important; color: #FEF08A !important;
    box-shadow: 0 0 18px rgba(251, 191, 36, 0.45), inset 0 0 8px rgba(251, 191, 36, 0.25) !important;
    animation: sqDicePillShake 0.36s ease-in-out infinite;
}
@keyframes sqDicePillShake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2.5px) rotate(-3deg) scale(1.04); }
    75% { transform: translateX(2.5px) rotate(3deg) scale(1.04); }
}
.sq-dice-svg { overflow: visible; display: block; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.sq-dice-svg .iso-dice-body { transform-origin: 18px 20px; animation: sqIsoDiceHopLoop 1.75s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.sq-dice-svg .iso-dice-shadow { transform-origin: 18px 32.5px; animation: sqIsoShadowPulse 1.75s ease-in-out infinite; }
.sq-dice-svg .iso-dice-spark.s1 { transform-origin: 5px 6.5px; animation: sqIsoSparkTwinkle 1.1s ease-in-out infinite alternate; }
.sq-dice-svg .iso-dice-spark.s2 { transform-origin: 31.5px 7.5px; animation: sqIsoSparkTwinkle 1.1s ease-in-out 0.55s infinite alternate; }
.sq-pop-ghost-link:hover .sq-dice-svg .iso-dice-body,
.sq-pop-ghost-link.is-rolling .sq-dice-svg .iso-dice-body,
.story-sheet-random-cta.is-rolling .sq-dice-svg .iso-dice-body {
    animation: sqDiceRoll360 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes sqIsoDiceHopLoop {
    0%, 100% { transform: translateY(0) scale(1.06, 0.94) rotate(0deg); }
    22%      { transform: translateY(-4.5px) scale(0.95, 1.07) rotate(-14deg); }
    45%      { transform: translateY(0) scale(1.08, 0.92) rotate(0deg); }
    68%      { transform: translateY(-4px) scale(0.96, 1.06) rotate(14deg); }
    88%      { transform: translateY(0.5px) scale(1.04, 0.96) rotate(-3deg); }
}
@keyframes sqIsoShadowPulse {
    0%, 45%, 100% { transform: scale(1); opacity: 0.48; }
    22%, 68%      { transform: scale(0.62); opacity: 0.22; }
}
@keyframes sqIsoSparkTwinkle {
    0%   { transform: scale(0.5); opacity: 0.3; }
    100% { transform: scale(1.35); opacity: 1; }
}
@keyframes sqDiceRoll360 {
    0%   { transform: translateY(-2px) rotate(0deg) scale(1); }
    50%  { transform: translateY(-5px) rotate(180deg) scale(1.22); filter: drop-shadow(0 0 8px #FBBF24); }
    100% { transform: translateY(-2px) rotate(360deg) scale(1); }
}

/* 2.5 RUNNING & HOPPING 3D ISOMETRIC DICE STAGE (.sq-dice-roll-stage) */
.sq-dice-roll-stage {
    position: absolute; inset: 0; z-index: 14; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.16s ease, visibility 0.16s ease;
}
.sq-dice-roll-stage.is-active { opacity: 1; visibility: visible; }
.sq-dice-mover {
    position: relative; display: flex; align-items: center; justify-content: center;
    transform: translateX(var(--dice-x, 0px)) translateY(-10px);
    transition: transform 0.088s cubic-bezier(0.22, 1, 0.36, 1);
}
.sq-dice-3d-shadow {
    position: absolute; top: 72%; width: 46px; height: 13px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.68); filter: blur(4px);
    animation: sqDiceShadowPulse 0.16s ease-in-out infinite alternate;
}
@keyframes sqDiceShadowPulse {
    0%   { transform: scale(0.58); opacity: 0.38; }
    100% { transform: scale(1.18); opacity: 0.88; }
}
.sq-dice-3d-cube {
    width: 68px; height: 68px; position: relative; z-index: 2;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 18px rgba(251, 191, 36, 0.75));
}
.sq-dice-roll-stage.is-active .sq-dice-3d-cube {
    animation: sqDiceAirTumble 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.sq-dice-roll-stage.is-active.is-landed .sq-dice-3d-cube {
    animation: sqDiceLandSlam 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes sqDiceAirTumble {
    0%   { transform: translateY(4px) rotate(0deg) scale(1.14, 0.86); }
    30%  { transform: translateY(-24px) rotate(120deg) scale(0.92, 1.14); }
    65%  { transform: translateY(-18px) rotate(250deg) scale(1.08, 1.06); }
    100% { transform: translateY(4px) rotate(360deg) scale(1.14, 0.86); }
}
@keyframes sqDiceLandSlam {
    0%   { transform: translateY(-26px) scale(1.32) rotate(-18deg); }
    38%  { transform: translateY(6px) scale(1.24, 0.78) rotate(6deg); }
    68%  { transform: translateY(-10px) scale(0.94, 1.12) rotate(-3deg); }
    100% { transform: translateY(-4px) scale(1.08) rotate(0deg); opacity: 1; }
}
.sq-dice-3d-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sq-dice-shockwave {
    position: absolute; width: 24px; height: 24px; border-radius: 50%;
    border: 2.5px solid #FBBF24; opacity: 0; pointer-events: none;
}
.sq-dice-roll-stage.is-landed .sq-dice-shockwave {
    animation: sqDiceShockRing 0.52s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes sqDiceShockRing {
    0%   { transform: scale(0.5); opacity: 1; border-width: 4px; }
    100% { transform: scale(4.2); opacity: 0; border-width: 1px; }
}
.sq-dice-sparks i {
    position: absolute; font-style: normal; font-size: 13px; font-weight: 900;
    color: #FDE047; text-shadow: 0 0 8px #F59E0B; opacity: 0;
}
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(1) { animation: sqSparkFly1 0.55s ease-out infinite; }
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(2) { animation: sqSparkFly2 0.55s ease-out 0.1s infinite; color: #B8D166; }
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(3) { animation: sqSparkFly3 0.55s ease-out 0.2s infinite; }
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(4) { animation: sqSparkFly4 0.55s ease-out 0.15s infinite; color: #38BDF8; }
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(5) { animation: sqSparkFly5 0.55s ease-out 0.25s infinite; color: #F472B6; }
.sq-dice-roll-stage.is-active .sq-dice-sparks i:nth-child(6) { animation: sqSparkFly6 0.55s ease-out 0.05s infinite; }
@keyframes sqSparkFly1 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(-38px,-32px) scale(1.1); opacity: 0; } }
@keyframes sqSparkFly2 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(38px,-30px) scale(1.1); opacity: 0; } }
@keyframes sqSparkFly3 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(-44px,8px) scale(1); opacity: 0; } }
@keyframes sqSparkFly4 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(44px,10px) scale(1); opacity: 0; } }
@keyframes sqSparkFly5 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(-24px,34px) scale(1.1); opacity: 0; } }
@keyframes sqSparkFly6 { 0% { transform: translate(0,0) scale(0.4); opacity: 1; } 100% { transform: translate(26px,34px) scale(1.1); opacity: 0; } }

/* 3. COLLECTIBLE 3-CARD FAN DEAL, FOIL SHEEN & HOVER LIFT */
.sq-fan-cards-row {
    position: relative; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important; perspective: 600px;
}
.sq-fan-card {
    position: relative; background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 16px !important;
    padding: 5px 5px 7px !important; cursor: pointer;
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    animation:
        sqFanCardDeal 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--card-i, 0) * 85ms + 60ms) both,
        sqCardIdleFloat 3.2s ease-in-out calc(var(--card-i, 0) * 0.45s + 0.6s) infinite !important;
}
html.light .sq-fan-card { background: rgba(0, 0, 0, 0.025) !important; border-color: rgba(0, 0, 0, 0.07) !important; }

@keyframes sqFanCardDeal {
    0% { opacity: 0; transform: translateY(18px) scale(0.76) rotate(calc((var(--card-i, 1) - 1) * -10deg)); }
    70% { opacity: 1; transform: translateY(-3px) scale(1.04) rotate(0deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes sqCardIdleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.sq-fan-card:hover {
    animation-play-state: paused !important; transform: translateY(-6px) scale(1.05) !important;
    background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(184, 209, 102, 0.55) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(184, 209, 102, 0.22) !important; z-index: 3;
}
.sq-fan-card.is-roulette-active {
    animation-play-state: paused !important;
    transform: translateY(-9px) scale(1.08) rotate(-1.5deg) !important; border-color: #FBBF24 !important;
    background: rgba(251, 191, 36, 0.14) !important;
    box-shadow: 0 0 0 2px #FBBF24, 0 14px 26px rgba(251, 191, 36, 0.45) !important; z-index: 4;
}
.sq-fan-card.is-card-chosen {
    animation-play-state: paused !important;
    transform: translateY(-10px) scale(1.11) !important; border-color: #B8D166 !important;
    background: rgba(184, 209, 102, 0.18) !important;
    box-shadow: 0 0 0 2.5px #B8D166, 0 0 24px rgba(251, 191, 36, 0.55), 0 16px 30px rgba(184, 209, 102, 0.55) !important; z-index: 5;
}
.sq-fan-card.is-card-dimmed {
    opacity: 0.42 !important; transform: scale(0.94) !important; filter: saturate(0.5);
}

.sq-fan-art-wrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px !important;
    overflow: hidden; background: #22251E; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.sq-fan-art-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sq-fan-card:hover .sq-fan-art-wrap img,
.sq-fan-card.is-roulette-active .sq-fan-art-wrap img { transform: scale(1.1); }

.sq-fan-art-wrap::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 26%, rgba(255, 255, 255, 0.38) 48%, transparent 70%);
    transform: translateX(-140%); animation: sqFanArtSheen 3.9s ease-in-out infinite;
    animation-delay: calc(var(--card-i, 0) * 0.45s + 0.5s);
}
@keyframes sqFanArtSheen {
    0%, 58% { transform: translateX(-140%); }
    100% { transform: translateX(140%); }
}

.sq-fan-pick-badge {
    position: absolute; bottom: 5px; right: 5px; padding: 2px 6px; border-radius: 999px;
    background: rgba(15, 17, 12, 0.85); border: 1px solid rgba(184, 209, 102, 0.55);
    color: #D4EE7F; font-size: 8.5px; font-weight: 800; opacity: 0; pointer-events: none;
    transform: translateY(4px) scale(0.85); transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sq-fan-card:hover .sq-fan-pick-badge,
.sq-fan-card.is-card-chosen .sq-fan-pick-badge { opacity: 1; transform: translateY(0) scale(1); }

.sq-fan-title {
    font-size: 11px !important; font-weight: 800 !important; color: #F4F4F5;
    width: 100%; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sq-fan-meta {
    display: inline-flex; align-items: center; gap: 5px; padding: 0 2px;
    font-size: 10px !important; font-weight: 700 !important; color: #A1A1AA !important; line-height: 1;
}
.sq-diff-dot {
    width: 6.5px; height: 6.5px; border-radius: 50%; display: inline-block;
    background: #4ADE80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.7);
    animation: sqDiffDotPulse 2s ease-in-out infinite;
}
.sq-fan-card.diff-easy .sq-diff-dot { background: #4ADE80; box-shadow: 0 0 7px rgba(74, 222, 128, 0.8); }
.sq-fan-card.diff-medium .sq-diff-dot { background: #FBBF24; box-shadow: 0 0 7px rgba(251, 191, 36, 0.8); }
.sq-fan-card.diff-hard .sq-diff-dot { background: #FB7185; box-shadow: 0 0 7px rgba(251, 113, 133, 0.8); }
@keyframes sqDiffDotPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.22); opacity: 1; }
}

/* 4. BOTTOM LIBRARY BUTTON WITH SHIMMER & NUDGING CHEVRON */
.sq-pop-sheet-btn {
    position: relative; overflow: hidden; width: 100%; height: 40px !important;
    padding: 0 13px !important; border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.065) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    color: #E4E4E7 !important; font-size: 11.5px !important; font-weight: 700 !important;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
    transition: transform 0.18s ease, border-color 0.2s ease, background 0.2s ease;
    animation: sqSheetBtnFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}
html.light .sq-pop-sheet-btn {
    background: rgba(0, 0, 0, 0.045) !important; border-color: rgba(0, 0, 0, 0.07) !important; color: #18181B !important;
}
.sq-pop-sheet-btn:hover {
    border-color: rgba(184, 209, 102, 0.4) !important; background: rgba(184, 209, 102, 0.1) !important; transform: translateY(-1px);
}
.sq-pop-sheet-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.1) 50%, transparent 68%);
    transform: translateX(-140%); animation: sqBtnShineSweep 4.2s ease-in-out 1.2s infinite;
}
@keyframes sqBtnShineSweep { 0%, 62% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@keyframes sqSheetBtnFadeUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

.sq-pop-sheet-label { display: inline-flex; align-items: center; gap: 7px; }
.sq-lib-svg { color: #B8D166; }
.sq-pop-sheet-arrow {
    font-size: 16px; font-weight: 800; color: #B8D166; display: inline-block;
    animation: sqArrowNudge 1.6s ease-in-out infinite;
}
@keyframes sqArrowNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* 5. STORY PREVIEW POPOVER ANIMATIONS */
.sq-popover.is-story-preview .sq-vocab-chip {
    animation: sqChipPopIn 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--chip-i, 0) * 70ms + 80ms) both;
}
@keyframes sqChipPopIn { 0% { opacity: 0; transform: translateY(6px) scale(0.85); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.sq-pop-start-btn { position: relative; overflow: hidden; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }
.sq-pop-start-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(184, 209, 102, 0.28); }
.sq-pop-start-btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(184, 209, 102, 0.35) 50%, transparent 70%);
    transform: translateX(-140%); animation: sqBtnShineSweep 3.4s ease-in-out infinite;
}