/* diplomacy.quest - Vaporwave Diplomatic Dashboard */

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

:root{
    --rose:#FF86B2;
    --cyan:#80E5D6;
    --lavender:#C4A0F5;
    --indigo:#2D2B55;
    --cream:#FFF8F0;
    --white:#FEFCFA;
    --mauve:#9B8EC4;
    --peach:#FFB4A2;
    --panel-radius-lg:16px;
    --panel-radius-md:12px;
    --panel-radius-xl:24px;
    --panel-shadow:0 8px 32px rgba(255,134,178,0.15);
    --panel-bg:rgba(255,248,240,0.85);
    --panel-blur:blur(12px);
    --bounce:cubic-bezier(0.34,1.56,0.64,1);
    --smooth:cubic-bezier(0.25,0.46,0.45,0.94);
}

body{
    background:var(--cream);
    color:var(--indigo);
    font-family:'Quicksand',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    line-height:1.7;
    letter-spacing:0.02em;
    overflow:hidden;
    height:100vh;
    height:100svh;
}

/* Animated gradient backdrop */
.gradient-bg{
    position:fixed;
    inset:0;
    z-index:0;
    background:linear-gradient(135deg,var(--rose),var(--cyan),var(--lavender),var(--peach));
    background-size:400% 400%;
    animation:gradientDrift 30s ease infinite;
    opacity:0;
    transition:opacity 0.8s ease;
}

.gradient-bg.visible{opacity:1}

@keyframes gradientDrift{
    0%{background-position:0% 50%}
    25%{background-position:100% 0%}
    50%{background-position:100% 100%}
    75%{background-position:0% 100%}
    100%{background-position:0% 50%}
}

/* Mountain layers */
.mountains{
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:1;
    pointer-events:none;
    height:200px;
}

.mtn{
    position:absolute;
    bottom:0;left:0;
    width:100%;
    height:200px;
    will-change:transform;
}

.mtn-1{opacity:0.12;z-index:3}
.mtn-2{opacity:0.08;z-index:2}
.mtn-3{opacity:0.05;z-index:1}

/* Dashboard grid */
.dashboard{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    gap:24px;
    padding:24px;
    height:100vh;
    height:100svh;
    max-width:1400px;
    margin:0 auto;
}

/* Panels */
.panel{
    background:var(--panel-bg);
    backdrop-filter:var(--panel-blur);
    -webkit-backdrop-filter:var(--panel-blur);
    border-radius:var(--panel-radius-lg);
    box-shadow:var(--panel-shadow);
    padding:clamp(16px,2vw,24px);
    border:1px solid rgba(45,43,85,0.06);
    transition:border-color 0.4s ease;
}

/* Left column */
.col-left{
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:hidden;
}

.panel-bust{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.bust-svg{
    width:80px;
    height:auto;
    opacity:0.7;
}

.panel-title{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(1rem,1.5vw,1.25rem);
    color:var(--indigo);
    margin-bottom:12px;
}

.badge{
    display:inline-block;
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.85rem;
    letter-spacing:0.04em;
    padding:4px 14px;
    border-radius:999px;
    margin:4px 4px 4px 0;
    opacity:0;
    transition:opacity 0.3s ease;
}

.badge.visible{opacity:1}

.badge-rose{background:rgba(255,134,178,0.15);color:var(--indigo)}
.badge-cyan{background:rgba(128,229,214,0.15);color:var(--indigo)}
.badge-lavender{background:rgba(196,160,245,0.15);color:var(--indigo)}

.mono-text{
    font-family:'IBM Plex Mono',monospace;
    font-weight:400;
    font-size:0.85rem;
    letter-spacing:0.04em;
    color:var(--indigo);
    opacity:0.7;
    line-height:1.8;
}

/* Center column: Narrative */
.col-center{
    display:flex;
    flex-direction:column;
    min-height:0;
}

.panel-narrative{
    border-radius:var(--panel-radius-xl);
    padding:clamp(24px,3vw,48px);
    overflow-y:auto;
    flex:1;
    scrollbar-width:thin;
    scrollbar-color:var(--rose) transparent;
}

.panel-narrative::-webkit-scrollbar{width:6px}
.panel-narrative::-webkit-scrollbar-track{background:transparent}
.panel-narrative::-webkit-scrollbar-thumb{background:var(--rose);border-radius:3px}

.domain-title{
    font-family:'Nunito',sans-serif;
    font-weight:800;
    font-size:clamp(2.5rem,6vw,5rem);
    letter-spacing:0.01em;
    color:var(--indigo);
    text-align:center;
    margin-bottom:2rem;
}

.section-title{
    font-family:'Nunito',sans-serif;
    font-weight:700;
    font-size:clamp(1.25rem,2.5vw,2rem);
    color:var(--indigo);
    margin-bottom:1rem;
}

.body-text{
    color:var(--indigo);
    margin-bottom:1rem;
}

.wash-divider{
    height:4px;
    margin:2rem 0;
    background:linear-gradient(90deg,transparent,rgba(255,134,178,0.15),transparent);
    border-radius:2px;
}

/* Right column */
.col-right{
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:hidden;
}

.panel-anim{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    max-height:200px;
}

/* Globe animation */
.globe-container{width:100px;height:100px}
.globe-svg{width:100%;height:100%}

.globe-ring{
    animation:globeSpin 12s linear infinite;
    transform-origin:60px 60px;
}

.globe-ring.r2{animation-duration:18s;animation-direction:reverse}

.globe-meridian{
    animation:globeSpin 15s linear infinite;
    transform-origin:60px 60px;
}

.globe-meridian.m2{animation-duration:20s;animation-direction:reverse}

@keyframes globeSpin{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* Crane animation */
.crane-container{width:80px;height:70px}
.crane-svg{width:100%;height:100%}
.crane-body{
    animation:craneBob 4s ease-in-out infinite;
    transform-origin:50px 40px;
}
@keyframes craneBob{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-5px) rotate(2deg)}
}

/* Waveform */
.panel-wave{
    padding:16px;
}

.waveform{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    height:60px;
    width:100%;
}

.wave-bar{
    width:6px;
    border-radius:3px;
    animation:wavePulse 1.5s ease-in-out infinite;
}

@keyframes wavePulse{
    0%,100%{transform:scaleY(0.3)}
    50%{transform:scaleY(1)}
}

/* Panel entrance animations */
.panel-entrance{
    opacity:0;
}

.from-left{transform:translateX(-30px)}
.from-right{transform:translateX(30px)}
.from-center{transform:scale(0.95)}

.panel-entrance.entered{
    opacity:1;
    transform:none;
    transition:opacity 0.6s var(--smooth),transform 0.6s var(--bounce);
}

/* Responsive */
@media(max-width:768px){
    body{overflow:auto;height:auto}

    .dashboard{
        grid-template-columns:1fr;
        height:auto;
        padding:16px;
    }

    .col-center{order:-1}

    .panel-narrative{
        overflow:visible;
        max-height:none;
    }

    .col-left,.col-right{
        display:grid;
        grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    }

    .panel-anim{max-height:150px}
    .mountains{height:120px}
}

@media(prefers-reduced-motion:reduce){
    .gradient-bg{animation:none;background-position:0% 50%;opacity:1}
    .globe-ring,.globe-meridian{animation:none}
    .crane-body{animation:none}
    .wave-bar{animation:none;transform:scaleY(0.6)}
    .panel-entrance{opacity:1;transform:none;transition:none}
    .badge{opacity:1;transition:none}
}