* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background: #0a0a0a;
    overflow: hidden;
}

.pentagon-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Each segment is a slice extending to screen edges */
.segment {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease;
    cursor: pointer;
}

.segment:hover,
.segment.tab-hover {
    filter: brightness(1.3);
    z-index: 10;
}

/* Section-specific hover colors */
.segment-1:hover,
.segment-1.tab-hover {
    box-shadow: inset 0 0 100px rgba(74, 158, 255, 0.15), 0 0 60px rgba(74, 158, 255, 0.1);
}
.segment-2:hover,
.segment-2.tab-hover {
    box-shadow: inset 0 0 100px rgba(74, 222, 128, 0.15), 0 0 60px rgba(74, 222, 128, 0.1);
}
.segment-3:hover,
.segment-3.tab-hover {
    box-shadow: inset 0 0 100px rgba(251, 191, 36, 0.15), 0 0 60px rgba(251, 191, 36, 0.1);
}
.segment-4:hover,
.segment-4.tab-hover {
    box-shadow: inset 0 0 100px rgba(244, 114, 182, 0.15), 0 0 60px rgba(244, 114, 182, 0.1);
}
.segment-5:hover,
.segment-5.tab-hover {
    box-shadow: inset 0 0 100px rgba(167, 139, 250, 0.15), 0 0 60px rgba(167, 139, 250, 0.1);
}

/* Pinwheel idle animation - brighter glow effect */
.segment.pinwheel-active {
    filter: brightness(1.5);
    z-index: 15;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.segment-1.pinwheel-active { box-shadow: inset 0 0 150px rgba(74, 158, 255, 0.25), 0 0 80px rgba(74, 158, 255, 0.2); }
.segment-2.pinwheel-active { box-shadow: inset 0 0 150px rgba(74, 222, 128, 0.25), 0 0 80px rgba(74, 222, 128, 0.2); }
.segment-3.pinwheel-active { box-shadow: inset 0 0 150px rgba(251, 191, 36, 0.25), 0 0 80px rgba(251, 191, 36, 0.2); }
.segment-4.pinwheel-active { box-shadow: inset 0 0 150px rgba(244, 114, 182, 0.25), 0 0 80px rgba(244, 114, 182, 0.2); }
.segment-5.pinwheel-active { box-shadow: inset 0 0 150px rgba(167, 139, 250, 0.25), 0 0 80px rgba(167, 139, 250, 0.2); }

/* Segment background images on hover */
.segment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.segment:hover::before,
.segment.tab-hover::before {
    opacity: 0.35;
}

.segment-1::before {
    background-image: url('images/bsm.png');
}

.segment-2::before {
    background-image: url('images/bsm.png');
}

.segment-3::before {
    background-image: url('images/bsm.png');
}

.segment-4::before {
    background-image: url('images/bsm.png');
}

.segment-5::before {
    background-image: url('images/bsm.png');
}

/* 5 equal slices at 72° each */
/* Boundaries at 0°, 72°, 144°, 216°, 288° from top, clockwise */

/* Segment 1: Top-right (0° to 72°) */
.segment-1 {
    clip-path: polygon(
        50% 50%,
        50% -100%,
        200% -100%,
        200% 10%
    );
    background: linear-gradient(to bottom left, #1a1a2e 0%, #0f0f1a 100%);
}

/* Segment 2: Right (72° to 144°) */
.segment-2 {
    clip-path: polygon(
        50% 50%,
        200% 10%,
        200% 200%,
        140% 200%
    );
    background: linear-gradient(to left, #1e1e3f 0%, #0f0f1a 100%);
}

/* Segment 3: Bottom (144° to 216°) */
.segment-3 {
    clip-path: polygon(
        50% 50%,
        140% 200%,
        -40% 200%
    );
    background: linear-gradient(to top, #252545 0%, #0f0f1a 100%);
}

/* Segment 4: Left (216° to 288°) */
.segment-4 {
    clip-path: polygon(
        50% 50%,
        -40% 200%,
        -100% 200%,
        -100% 10%
    );
    background: linear-gradient(to right, #1e1e3f 0%, #0f0f1a 100%);
}

/* Segment 5: Top-left (288° to 360°) */
.segment-5 {
    clip-path: polygon(
        50% 50%,
        -100% 10%,
        -100% -100%,
        50% -100%
    );
    background: linear-gradient(to bottom right, #1a1a2e 0%, #0f0f1a 100%);
}

/* Content positioning within segments */
.segment-content {
    position: absolute;
    color: rgba(255, 255, 255, 0);
    transition: color 0.3s ease, opacity 0.3s ease;
    max-width: 180px;
    opacity: 0;
}

.segment:hover .segment-content,
.segment.tab-hover .segment-content {
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

.segment-content h2 {
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
}

.segment:hover .segment-content h2,
.segment.tab-hover .segment-content h2 {
    font-size: 2.8rem;
    letter-spacing: 6px;
    animation: textFloat 3s ease-in-out infinite;
}

@keyframes textFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    15% {
        transform: translate(5px, -8px) rotate(0.5deg) scale(1.02);
        opacity: 0.95;
    }
    30% {
        transform: translate(-3px, -12px) rotate(-0.5deg) scale(1);
        opacity: 1;
    }
    45% {
        transform: translate(-8px, -6px) rotate(-1deg) scale(1.03);
        opacity: 0.9;
    }
    60% {
        transform: translate(-4px, -10px) rotate(0.5deg) scale(0.98);
        opacity: 1;
    }
    75% {
        transform: translate(6px, -4px) rotate(1deg) scale(1.02);
        opacity: 0.95;
    }
    90% {
        transform: translate(3px, -7px) rotate(-0.3deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Responsive hover text */
@media (max-width: 768px) {
    .segment:hover .segment-content h2 {
        font-size: 2rem;
        letter-spacing: 4px;
    }

    .segment-content .rollover-text {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .segment:hover .segment-content h2 {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }

    @keyframes textFloat {
        0% {
            transform: translate(0, 0) rotate(0deg) scale(1);
            opacity: 1;
        }
        15% {
            transform: translate(3px, -5px) rotate(0.3deg) scale(1.01);
            opacity: 0.95;
        }
        30% {
            transform: translate(-2px, -7px) rotate(-0.3deg) scale(1);
            opacity: 1;
        }
        45% {
            transform: translate(-5px, -4px) rotate(-0.5deg) scale(1.02);
            opacity: 0.9;
        }
        60% {
            transform: translate(-2px, -6px) rotate(0.3deg) scale(0.99);
            opacity: 1;
        }
        75% {
            transform: translate(4px, -3px) rotate(0.5deg) scale(1.01);
            opacity: 0.95;
        }
        90% {
            transform: translate(2px, -4px) rotate(-0.2deg) scale(1);
            opacity: 1;
        }
        100% {
            transform: translate(0, 0) rotate(0deg) scale(1);
            opacity: 1;
        }
    }
}

.segment-content .rollover-text {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.5;
    opacity: 0.8;
    margin-top: 0.5rem;
}

.segment-content .popup-text {
    display: none;
}

/* Position content within visible clip-path bounds */
.segment-1 .segment-content {
    top: 18%;
    left: 60%;
}

.segment-2 .segment-content {
    top: 50%;
    right: 10%;
    left: auto;
}

.segment-3 .segment-content {
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.segment-4 .segment-content {
    top: 50%;
    left: 10%;
    right: auto;
    text-align: left;
}

.segment-5 .segment-content {
    top: 18%;
    right: 60%;
    text-align: right;
}

/* Center hover background - full screen image */
.center-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/bsm.png');
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: opacity 1.2s ease-in-out;
}

.center-bg.active {
    opacity: 0.25;
}

/* Center circle - the sun (JS controls position for floating) */
.center-circle {
    position: absolute;
    /* Initial fallback - JS will override for floating */
    top: calc(50% - min(15vw, 15vh));
    left: calc(50% - min(15vw, 15vh));
    width: min(30vw, 30vh);
    height: min(30vw, 30vh);
    background: radial-gradient(circle, #0f0f1a 0%, #050510 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 60px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(255, 255, 255, 0.03);
    z-index: 100;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* No transition on position - JS handles smooth movement */
    transition: transform 0.8s ease-out;
}

.center-circle.rising {
    transform: scale(1.12);
}

.center-circle.returning {
    transform: scale(1);
    transition: transform 1.2s ease-out;  /* Slower return */
}

/* Logo absorb pulse - plays when popup returns to logo */
@keyframes logoAbsorb {
    0% {
        transform: scale(1);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.03);
    }
    15% {
        transform: scale(1.06);
        box-shadow: 0 0 80px rgba(100, 80, 180, 0.4), inset 0 0 40px rgba(255, 255, 255, 0.08);
    }
    30% {
        transform: scale(0.98);
        box-shadow: 0 0 70px rgba(80, 60, 140, 0.3), inset 0 0 35px rgba(255, 255, 255, 0.05);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 65px rgba(60, 40, 120, 0.2), inset 0 0 32px rgba(255, 255, 255, 0.04);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(255, 255, 255, 0.03);
    }
}

.center-circle.absorbing {
    animation: logoAbsorb 0.5s ease-out forwards !important;
    opacity: 1 !important;
}

/* Absorption ripple - expands from logo center to screen edge */
@keyframes absorptionRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.absorption-ripple {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200vmax;  /* Ensures it reaches screen edges in any orientation */
    height: 200vmax;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    pointer-events: none;
    z-index: 45;  /* Behind logo (50) but visible */
    animation: absorptionRipple 1.5s ease-out forwards;
}

/* Solar flare container - sits behind the sun */
.solar-flare-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99;
}

/* Individual flare layers with different timings */
.solar-flare {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(30vw, 30vh);
    height: min(30vw, 30vh);
    border-radius: 50%;
    opacity: 0;
}

.solar-flare-1 {
    background: radial-gradient(circle,
        rgba(100, 80, 150, 0.15) 0%,
        rgba(80, 60, 120, 0.08) 30%,
        rgba(60, 40, 100, 0.03) 60%,
        transparent 100%
    );
    animation: solarFlare1 12s ease-in-out infinite;
}

.solar-flare-2 {
    background: radial-gradient(circle,
        rgba(120, 100, 180, 0.12) 0%,
        rgba(90, 70, 140, 0.06) 40%,
        rgba(60, 50, 100, 0.02) 70%,
        transparent 100%
    );
    animation: solarFlare2 18s ease-in-out infinite;
    animation-delay: 4s;
}

.solar-flare-3 {
    background: radial-gradient(circle,
        rgba(80, 70, 130, 0.1) 0%,
        rgba(70, 50, 110, 0.05) 35%,
        rgba(50, 40, 90, 0.02) 65%,
        transparent 100%
    );
    animation: solarFlare3 15s ease-in-out infinite;
    animation-delay: 8s;
}

/* Ambient corona glow */
.solar-corona {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(35vw, 35vh);
    height: min(35vw, 35vh);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(100, 80, 150, 0.08) 0%,
        rgba(80, 60, 120, 0.04) 50%,
        transparent 100%
    );
    animation: coronaPulse 8s ease-in-out infinite;
}

@keyframes solarFlare1 {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    15% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(8);
    }
}

@keyframes solarFlare2 {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(10);
    }
}

@keyframes solarFlare3 {
    0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
    18% {
        opacity: 1;
    }
    55% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(7);
    }
}

@keyframes coronaPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Lightning/storm flash effects */
.lightning-flash {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}

.lightning-bolt {
    position: absolute;
    background: linear-gradient(
        180deg,
        rgba(180, 160, 220, 0.9) 0%,
        rgba(140, 120, 200, 0.6) 50%,
        rgba(100, 80, 180, 0.3) 100%
    );
    filter: blur(1px);
    transform-origin: top center;
}

.lightning-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 49;
    opacity: 0;
    background: radial-gradient(
        ellipse at var(--glow-x, 50%) var(--glow-y, 50%),
        rgba(140, 120, 200, 0.15) 0%,
        rgba(100, 80, 180, 0.05) 30%,
        transparent 60%
    );
}

@keyframes lightningFlash {
    0% { opacity: 0; }
    5% { opacity: 1; }
    10% { opacity: 0.3; }
    15% { opacity: 0.9; }
    20% { opacity: 0.1; }
    25% { opacity: 0.7; }
    30% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes lightningGlow {
    0% { opacity: 0; }
    5% { opacity: 0.8; }
    15% { opacity: 0.4; }
    25% { opacity: 0.6; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

/* Cursor ambient glow - follows mouse */
.cursor-glow {
    position: fixed;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 97;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle,
        rgba(140, 110, 190, 0.12) 0%,
        rgba(120, 90, 170, 0.06) 40%,
        transparent 70%
    );
    animation: cursorGlowPulse 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cursor-glow.active {
    opacity: 1;
}

@keyframes cursorGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: brightness(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        filter: brightness(1.2);
    }
}

/* Cursor pulse - user interaction */
.cursor-pulse {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 98;
    background: radial-gradient(circle,
        rgba(150, 120, 200, 0.4) 0%,
        rgba(120, 100, 180, 0.2) 40%,
        transparent 70%
    );
    animation: cursorPulseExpand 1.2s ease-out forwards;
}

@keyframes cursorPulseExpand {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(40);
    }
}

/* Idle pulse - softer, slower expansion */
.cursor-pulse.idle-pulse {
    background: radial-gradient(circle,
        rgba(130, 100, 180, 0.25) 0%,
        rgba(110, 80, 160, 0.12) 40%,
        transparent 70%
    );
    animation: idlePulseExpand 2s ease-out forwards;
}

@keyframes idlePulseExpand {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(50);
    }
}

/* Popup pulse - dramatic burst when clicking same section */
.cursor-pulse.popup-pulse {
    background: radial-gradient(circle,
        rgba(200, 150, 255, 0.5) 0%,
        rgba(180, 120, 240, 0.35) 25%,
        rgba(150, 100, 220, 0.2) 50%,
        rgba(120, 80, 200, 0.1) 70%,
        transparent 100%
    );
    box-shadow:
        0 0 30px rgba(180, 140, 255, 0.4),
        0 0 60px rgba(150, 110, 230, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    animation: popupPulseBurst 1.2s ease-out forwards;
}

@keyframes popupPulseBurst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
        filter: brightness(1.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(3);
        filter: brightness(1.3);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(15);
        filter: brightness(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(40);
        filter: brightness(1);
    }
}

/* Sun reaction - responds to cursor pulse */
.sun-reaction {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(30vw, 30vh);
    height: min(30vw, 30vh);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 101;
    background: radial-gradient(circle,
        rgba(180, 150, 220, 0.3) 0%,
        rgba(140, 110, 190, 0.15) 30%,
        rgba(100, 80, 160, 0.05) 60%,
        transparent 100%
    );
    animation: sunReactionPulse 0.8s ease-out forwards;
}

@keyframes sunReactionPulse {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3);
    }
}

.logo-text {
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 200;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-left: 0.25em;
    transition: transform 0.1s ease;
}

.logo-text.jitter {
    animation: logoJitter 0.3s ease-out;
}

@keyframes logoJitter {
    0% { transform: scale(1); }
    25% { transform: scale(1.03); }
    50% { transform: scale(0.98); }
    75% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Subtle animation on load */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.segment {
    animation: fadeIn 0.8s ease-out forwards;
}

.segment-1 { animation-delay: 0.1s; }
.segment-2 { animation-delay: 0.2s; }
.segment-3 { animation-delay: 0.3s; }
.segment-4 { animation-delay: 0.4s; }
.segment-5 { animation-delay: 0.5s; }

.center-circle {
    animation: fadeIn 1s ease-out 0.6s forwards;
}

.solar-flare-container {
    animation: fadeIn 1.5s ease-out 1s forwards;
    opacity: 0;
}

/* Popup styles */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.active {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 2rem;
    max-width: 320px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.popup-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.popup-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.popup-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
}

/* Trailing window (desktop) */
.trail-window {
    position: fixed;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
    width: 140px;
    z-index: 50;  /* Below logo (100) so popups hide behind it */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease, width 1.5s ease, padding 1.5s ease;
}

.trail-window.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    animation: popupReveal 0.4s ease-out forwards;
}

@keyframes popupReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.trail-window:hover {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 20px rgba(140, 110, 190, 0.15);
}

.trail-window-image {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: height 1.5s ease, margin 1.5s ease;
}

.trail-window-close {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--pillar-color, rgba(255, 255, 255, 0.4));
    color: var(--pillar-color, #fff);
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    z-index: 10;
}

.trail-window-close:hover {
    background: var(--pillar-color, rgba(255, 255, 255, 0.3));
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.trail-window-title {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin: 0;
    transition: font-size 1.5s ease, margin 1.5s ease, font-weight 1.5s ease;
}

.trail-window-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6rem;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1.5s ease, opacity 1.5s ease, margin 1.5s ease;
}

/* Expanded popup state (desktop hover) */
.trail-window {
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 1.5s ease,
                border-color 1.5s ease,
                width 1.5s ease,
                padding 1.5s ease;
}

.trail-window.expanded {
    width: 280px;
    padding: 1rem;
    border-color: var(--pillar-color, rgba(255, 255, 255, 0.4));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(var(--pillar-color-rgb, 140, 110, 190), 0.2);
}

.trail-window.expanded .trail-window-image {
    height: 140px;
    margin-bottom: 1rem;
}

.trail-window.expanded .trail-window-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.trail-window.expanded .trail-window-text {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.5rem;
    font-size: 0.7rem;
}

/* Maurice floating circle */
.maurice-circle {
    position: fixed;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    background: #0a0a14;
    border: 2px solid rgba(255, 255, 255, 0.3);
    cursor: default;
    z-index: 10000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.maurice-circle.active {
    opacity: 1;
    visibility: visible;
    animation: mauriceReveal 0.6s ease-out forwards;
}

@keyframes mauriceReveal {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.maurice-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.maurice-circle:hover {
    cursor: pointer;
    border-color: rgba(74, 158, 255, 0.6);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(74, 158, 255, 0.3);
}

/* Maurice Chat Interface */
.maurice-chat {
    position: fixed;
    /* Position controlled by JS for floating effect */
    width: 350px;
    height: 450px;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    z-index: 10001;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    /* No transition on left/top - JS handles smooth movement */
}

.maurice-chat.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.maurice-chat-header {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 1px;
}

.maurice-chat-header span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.maurice-chat-header span::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4a9eff;
    border-radius: 50%;
    animation: mauricePulse 2s ease-in-out infinite;
}

@keyframes mauricePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.maurice-chat-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}

.maurice-chat-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.maurice-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.maurice-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.maurice-chat-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.maurice-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(74, 158, 255, 0.4);
    border-radius: 3px;
}

.maurice-chat-message {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 85%;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.maurice-chat-message.user {
    background: rgba(74, 158, 255, 0.2);
    border: 1px solid rgba(74, 158, 255, 0.3);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}

.maurice-chat-message.assistant {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}

.maurice-chat-message.typing {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.maurice-chat-message.typing .typing-indicator {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.maurice-chat-message.typing .typing-indicator span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.maurice-chat-message.typing .typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

.maurice-chat-message.typing .typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.maurice-chat-message.typing .typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
}

.maurice-chat-message.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(255, 200, 200, 0.9);
}

.maurice-chat-input {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.5rem;
}

.maurice-chat-input input {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.maurice-chat-input input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.maurice-chat-input input:focus {
    border-color: rgba(74, 158, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.maurice-chat-send {
    background: #4a9eff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.maurice-chat-send:hover {
    background: #3a8eef;
}

.maurice-chat-send:active {
    transform: scale(0.95);
}

.maurice-chat-send:disabled {
    background: rgba(74, 158, 255, 0.4);
    cursor: not-allowed;
}

/* Mobile adjustments for Maurice chat */
@media (max-width: 768px) {
    .maurice-chat {
        width: calc(100vw - 40px);
        max-width: 350px;
        height: 400px;
        /* Position controlled by JS */
    }
}

/* Hidden Maurice link (production only) */
.maurice-hidden-link {
    position: fixed;
    bottom: 15px;
    left: 15px;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.15);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

.maurice-hidden-link:hover {
    background: rgba(74, 158, 255, 0.15);
    border-color: rgba(74, 158, 255, 0.3);
    color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* Popup color triangle indicator - shows section association */
.trail-window::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 12px 12px;
    border-color: transparent transparent var(--pillar-color, #666) transparent;
    opacity: 0.9;
    border-bottom-right-radius: 12px;
}

/* Pillar-specific colors */
.trail-window[data-pillar="1"] { --pillar-color: #4a9eff; }  /* AI - Electric Blue */
.trail-window[data-pillar="2"] { --pillar-color: #4ade80; }  /* Society - Emerald Green */
.trail-window[data-pillar="3"] { --pillar-color: #fbbf24; }  /* IoT - Amber Orange */
.trail-window[data-pillar="4"] { --pillar-color: #f472b6; }  /* Art - Magenta Pink */
.trail-window[data-pillar="5"] { --pillar-color: #a78bfa; }  /* Clients - Purple Violet */

/* ========================================
   SLIDEOUT PANEL SYSTEM
   ======================================== */

/* Right slideout panel */
.slideout-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 33.333vw;
    min-width: 300px;
    max-width: 90vw;
    height: 100vh;
    background: rgba(15, 15, 26, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    border-left: 2px solid var(--pillar-color, rgba(255, 255, 255, 0.1));
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}

.slideout-panel.open {
    transform: translateX(0);
}

.slideout-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--pillar-color, rgba(255, 255, 255, 0.3));
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #000;
    font-size: 1.75rem;
    font-weight: bold;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.slideout-close:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* CTA Links */
.slideout-image-link {
    display: block;
    position: relative;
    overflow: hidden;
}

.slideout-image-link::after {
    content: 'Visit Project →';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: var(--pillar-color, #fff);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.slideout-image-link:hover::after {
    opacity: 1;
    transform: translateY(0);
}

.slideout-image-link:hover .slideout-image {
    transform: scale(1.05);
}

.slideout-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-bottom: 2px solid var(--pillar-color, rgba(255, 255, 255, 0.1));
    transition: transform 0.3s ease;
}

.slideout-title-link {
    text-decoration: none;
    display: block;
}

.slideout-title-link:hover .slideout-title {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Scrollable content wrapper */
.slideout-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.slideout-scroll::-webkit-scrollbar {
    width: 6px;
}

.slideout-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
}

.slideout-scroll::-webkit-scrollbar-thumb {
    background: var(--pillar-color, rgba(255, 255, 255, 0.3));
    border-radius: 3px;
}

.slideout-content {
    padding: 0 1.5rem 2rem;
}

.slideout-title {
    color: var(--pillar-color, #fff);
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 1.5rem 0 0.5rem;
}

.slideout-tagline {
    color: var(--pillar-color, #fff);
    font-size: 1.1rem;
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.slideout-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.slideout-description p {
    margin-bottom: 1rem;
}

.slideout-description p:last-child {
    margin-bottom: 0;
}

.slideout-projects-header {
    color: var(--pillar-color, #fff);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 1.5rem 0 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.slideout-projects {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: none;
}

.slideout-projects li {
    position: relative;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.slideout-projects li::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.5em;
    width: 6px;
    height: 6px;
    background: var(--pillar-color, rgba(255, 255, 255, 0.5));
    border-radius: 50%;
}

.slideout-projects li:last-child {
    margin-bottom: 0;
}

/* Left edge tabs */
.slideout-tab {
    position: fixed;
    left: 0;
    top: 50%;
    width: 40px;
    height: 44px;
    background: var(--pillar-color, #666);
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 14px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.2s ease;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    box-sizing: border-box;
}

/* Non-ghost tabs: auto width on hover to fit content + close button */
.slideout-tab:not(.ghost):hover,
.slideout-tab:not(.ghost).active {
    width: auto;
    padding-right: 40px; /* 10px buffer + 30px close button */
}

/* Active tab (slideout is open) - stronger shadow */
.slideout-tab.active {
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
}

.slideout-tab.removing {
    transform: translateX(-100%);
    opacity: 0;
}

/* First letter - always visible, never moves */
.tab-first-letter {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}

/* Rest of word - fades in on hover/active */
.tab-rest {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    white-space: nowrap;
    margin-left: 2px;
    transition: opacity 0.3s ease;
}

/* Show rest of word on hover */
.slideout-tab:hover .tab-rest {
    opacity: 1;
}

/* Show rest of word when active */
.slideout-tab.active .tab-rest {
    opacity: 1;
}

/* Ghost tabs (no popup on stage) - dimmed with white text */
.slideout-tab.ghost {
    opacity: 0.4;
    background: rgba(10, 10, 20, 0.6);
}

.slideout-tab.ghost .tab-first-letter {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.slideout-tab.ghost .tab-rest {
    color: rgba(255, 255, 255, 0.9);
}

.slideout-tab.ghost:hover {
    opacity: 1;
    width: auto;
    padding-right: 14px; /* Match left padding for symmetry */
}

.slideout-tab.ghost:hover .tab-rest {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* Tab label wrapper - keeps text together */
.tab-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Tab close button - 25% of active tab width */
.tab-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0 8px 8px 0;
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.6);
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

/* Show close button only on non-ghost tabs when hovered or active */
.slideout-tab:not(.ghost):hover .tab-close,
.slideout-tab:not(.ghost).active .tab-close {
    display: flex;
}

/* Close button hover state - darker background */
.tab-close:hover {
    background: rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.9);
}

/* ========================================
   ENERGY METER (Traffic Light)
   ======================================== */

.energy-meter {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.energy-light {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.energy-light:hover {
    transform: scale(1.1);
    opacity: 0.5;
}

.energy-light.red {
    background: #ef4444;
}

.energy-light.yellow {
    background: #eab308;
}

.energy-light.green {
    background: #22c55e;
}

.energy-light.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
}

.energy-light.active.red {
    box-shadow: 0 0 12px #ef4444, 0 0 24px rgba(239, 68, 68, 0.4);
}

.energy-light.active.yellow {
    box-shadow: 0 0 12px #eab308, 0 0 24px rgba(234, 179, 8, 0.4);
}

.energy-light.active.green {
    box-shadow: 0 0 12px #22c55e, 0 0 24px rgba(34, 197, 94, 0.4);
}

/* Floating mode label - appears on mode change */
.mode-label {
    position: fixed;
    left: 20px;
    top: 60px;  /* Below the energy meter */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mode-color, #fff);
    text-shadow: 0 0 10px var(--mode-color, #fff);
    pointer-events: none;
    z-index: 1001;
    opacity: 0;
    animation: modeLabelFloat 1.5s ease-out forwards;
}

@keyframes modeLabelFloat {
    0% {
        opacity: 0;
        transform: translateY(-5px);
    }
    15% {
        opacity: 1;
        transform: translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateY(15px);
    }
    100% {
        opacity: 0;
        transform: translateY(25px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Hide inline content on mobile - use popup instead */
    .segment-content {
        display: none;
    }

    .center-circle {
        width: min(35vw, 35vh);
        height: min(35vw, 35vh);
    }

    .solar-flare,
    .solar-corona,
    .sun-reaction {
        width: min(35vw, 35vh);
        height: min(35vw, 35vh);
    }

    /* Slideout panel - 2/3 width on mobile */
    .slideout-panel {
        width: 66.666vw;
    }

    /* Larger touch targets for tabs */
    .slideout-tab {
        width: 50px;
        height: 50px;
        padding-left: 18px;
    }

    /* Mobile: auto width with larger close button padding */
    .slideout-tab:not(.ghost):hover,
    .slideout-tab:not(.ghost).active {
        width: auto;
        padding-right: 46px; /* 10px buffer + 36px close button */
    }

    .slideout-tab.ghost:hover {
        width: auto;
        padding-right: 18px;
    }

    .slideout-tab .tab-label {
        font-size: 0.85rem;
    }

    /* Tab close button on mobile - larger touch target */
    .tab-close {
        width: 36px;
        font-size: 1.6rem;
    }

    /* Floating popups on mobile - compact version (header only, larger text) */
    .trail-window.mobile-compact {
        max-width: 100px;
        padding: 0.6rem 0.7rem;
        overflow: visible;
    }

    .trail-window.mobile-compact .trail-window-title {
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        line-height: 1.1;
    }

    .trail-window.mobile-compact .trail-window-close {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
        top: -11px;
        right: -11px;
    }

    .trail-window.mobile-compact::after {
        border-width: 0 0 10px 10px;
    }

    /* Hide these on regular mobile if they exist */
    .trail-window {
        max-width: 140px;
    }

    .trail-window-image {
        height: 60px;
    }

    .trail-window-close {
        width: 24px;
        height: 24px;
        font-size: 0.9rem;
        border-width: 1px;
    }
}