/* diplomatic.boo - Retro Pixel Ghost Diplomacy */
/* Palette: #1a0a2e, #4a2878, #e8e8ff, #ff6b1a, #00ff41, #ff1493 */

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

body {
    background: #1a0a2e;
    color: #e8e8ff;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.65;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   Pixel Stars Background Layer
   ======================================== */
.pixel-stars-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.pixel-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #e8e8ff;
    transform: rotate(45deg);
    opacity: 0;
    animation: twinkle var(--twinkle-duration, 3s) var(--twinkle-delay, 0s) infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.05; }
    50% { opacity: var(--twinkle-peak, 0.4); }
}

/* ========================================
   Score Display
   ======================================== */
.score-display {
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: #00ff41;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

/* ========================================
   Title Screen
   ======================================== */
.title-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.title-content {
    text-align: center;
    position: relative;
    z-index: 1;
}

.brand {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 5rem);
    color: #e8e8ff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0;
    animation: pixelReveal 1.2s 0.5s forwards steps(8);
}

@keyframes pixelReveal {
    0% { opacity: 0; text-shadow: 0 0 40px #e8e8ff; letter-spacing: 0.6em; }
    25% { opacity: 0.3; text-shadow: 0 0 30px #e8e8ff; }
    50% { opacity: 0.6; text-shadow: 0 0 20px #e8e8ff; letter-spacing: 0.3em; }
    75% { opacity: 0.85; text-shadow: 0 0 10px #e8e8ff; }
    100% { opacity: 1; text-shadow: 0 0 4px rgba(232, 232, 255, 0.3); letter-spacing: 0.15em; }
}

.subtitle {
    font-size: 0.85rem;
    color: #4a2878;
    margin-top: 0.5rem;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeInUp 0.6s 1.8s forwards;
}

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

.press-start {
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    color: #ff6b1a;
    margin-top: 2rem;
    letter-spacing: 0.2em;
    animation: blink-text 1s step-end infinite;
    cursor: pointer;
}

@keyframes blink-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ========================================
   Pixel Ghost (CSS Box-Shadow Art)
   ======================================== */
.pixel-ghost {
    position: absolute;
    width: 4px;
    height: 4px;
    opacity: 0;
    animation: ghostMaterialize 1s 2.2s forwards;
}

@keyframes ghostMaterialize {
    0% { opacity: 0; filter: blur(4px); }
    40% { opacity: 0.15; filter: blur(2px); }
    100% { opacity: 0.35; filter: blur(0); }
}

.left-ghost {
    left: 12%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow:
        /* Row 1 - top of head */
        8px 0 0 #e8e8ff, 12px 0 0 #e8e8ff, 16px 0 0 #e8e8ff, 20px 0 0 #e8e8ff, 24px 0 0 #e8e8ff,
        /* Row 2 */
        4px 4px 0 #e8e8ff, 8px 4px 0 #e8e8ff, 12px 4px 0 #e8e8ff, 16px 4px 0 #e8e8ff, 20px 4px 0 #e8e8ff, 24px 4px 0 #e8e8ff, 28px 4px 0 #e8e8ff,
        /* Row 3 - eyes */
        4px 8px 0 #e8e8ff, 8px 8px 0 #4a2878, 12px 8px 0 #4a2878, 16px 8px 0 #e8e8ff, 20px 8px 0 #4a2878, 24px 8px 0 #4a2878, 28px 8px 0 #e8e8ff,
        /* Row 4 */
        4px 12px 0 #e8e8ff, 8px 12px 0 #e8e8ff, 12px 12px 0 #e8e8ff, 16px 12px 0 #e8e8ff, 20px 12px 0 #e8e8ff, 24px 12px 0 #e8e8ff, 28px 12px 0 #e8e8ff,
        /* Row 5 */
        4px 16px 0 #e8e8ff, 8px 16px 0 #e8e8ff, 12px 16px 0 #e8e8ff, 16px 16px 0 #e8e8ff, 20px 16px 0 #e8e8ff, 24px 16px 0 #e8e8ff, 28px 16px 0 #e8e8ff,
        /* Row 6 */
        4px 20px 0 #e8e8ff, 8px 20px 0 #e8e8ff, 12px 20px 0 #e8e8ff, 16px 20px 0 #e8e8ff, 20px 20px 0 #e8e8ff, 24px 20px 0 #e8e8ff, 28px 20px 0 #e8e8ff,
        /* Row 7 - wavy bottom */
        4px 24px 0 #e8e8ff, 8px 24px 0 #e8e8ff, 16px 24px 0 #e8e8ff, 20px 24px 0 #e8e8ff, 28px 24px 0 #e8e8ff,
        /* Row 8 - drip */
        4px 28px 0 #e8e8ff, 20px 28px 0 #e8e8ff;
}

.right-ghost {
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow:
        /* Row 1 */
        8px 0 0 #e8e8ff, 12px 0 0 #e8e8ff, 16px 0 0 #e8e8ff, 20px 0 0 #e8e8ff, 24px 0 0 #e8e8ff,
        /* Row 2 */
        4px 4px 0 #e8e8ff, 8px 4px 0 #e8e8ff, 12px 4px 0 #e8e8ff, 16px 4px 0 #e8e8ff, 20px 4px 0 #e8e8ff, 24px 4px 0 #e8e8ff, 28px 4px 0 #e8e8ff,
        /* Row 3 - eyes */
        4px 8px 0 #e8e8ff, 8px 8px 0 #4a2878, 12px 8px 0 #4a2878, 16px 8px 0 #e8e8ff, 20px 8px 0 #4a2878, 24px 8px 0 #4a2878, 28px 8px 0 #e8e8ff,
        /* Row 4 */
        4px 12px 0 #e8e8ff, 8px 12px 0 #e8e8ff, 12px 12px 0 #e8e8ff, 16px 12px 0 #e8e8ff, 20px 12px 0 #e8e8ff, 24px 12px 0 #e8e8ff, 28px 12px 0 #e8e8ff,
        /* Row 5 */
        4px 16px 0 #e8e8ff, 8px 16px 0 #e8e8ff, 12px 16px 0 #e8e8ff, 16px 16px 0 #e8e8ff, 20px 16px 0 #e8e8ff, 24px 16px 0 #e8e8ff, 28px 16px 0 #e8e8ff,
        /* Row 6 */
        4px 20px 0 #e8e8ff, 8px 20px 0 #e8e8ff, 12px 20px 0 #e8e8ff, 16px 20px 0 #e8e8ff, 20px 20px 0 #e8e8ff, 24px 20px 0 #e8e8ff, 28px 20px 0 #e8e8ff,
        /* Row 7 - wavy bottom */
        4px 24px 0 #e8e8ff, 8px 24px 0 #e8e8ff, 16px 24px 0 #e8e8ff, 20px 24px 0 #e8e8ff, 28px 24px 0 #e8e8ff,
        /* Row 8 */
        4px 28px 0 #e8e8ff, 20px 28px 0 #e8e8ff;
}

/* ========================================
   Level Connector (Dashed Lines)
   ======================================== */
.level-connector {
    width: 2px;
    height: 60px;
    margin: 0 auto;
    border-left: 2px dashed #00ff41;
    opacity: 0.25;
}

.boss-connector {
    border-left-color: #ff1493;
    height: 80px;
    opacity: 0.35;
}

/* ========================================
   Level Sections
   ======================================== */
.level-section {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.level-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.level-id {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #00ff41;
    letter-spacing: 0.15em;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}

.level-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #e8e8ff;
}

.level-content {
    padding: 1.5rem;
    background: rgba(74, 40, 120, 0.12);
}

.pixel-border {
    border: 2px solid #4a2878;
    box-shadow:
        4px 0 0 #4a2878,
        0 4px 0 #4a2878,
        4px 4px 0 #4a2878,
        -2px -2px 0 rgba(74, 40, 120, 0.25),
        8px 8px 0 rgba(74, 40, 120, 0.08);
}

.level-text {
    font-size: 0.85rem;
    color: #e8e8ff;
    margin-bottom: 1rem;
}

.level-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stat {
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    color: #ff6b1a;
    letter-spacing: 0.1em;
}

/* ========================================
   Character Roster
   ======================================== */
.character-roster {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
}

.roster-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.roster-label {
    font-family: 'Fira Code', monospace;
    font-size: 0.7rem;
    color: #00ff41;
    letter-spacing: 0.2em;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}

.roster-row {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.character-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.8rem;
    background: rgba(74, 40, 120, 0.1);
    border: 1px solid rgba(74, 40, 120, 0.3);
    transition: border-color 0.3s, background 0.3s;
}

.character-card:hover {
    border-color: #ff6b1a;
    background: rgba(74, 40, 120, 0.2);
}

.char-avatar {
    width: 4px;
    height: 4px;
    position: relative;
}

/* Pixel art character avatars - 5 unique color schemes */
.char-ghost-1 {
    box-shadow:
        4px 0 0 #e8e8ff, 8px 0 0 #e8e8ff, 12px 0 0 #e8e8ff,
        0 4px 0 #e8e8ff, 4px 4px 0 #e8e8ff, 8px 4px 0 #e8e8ff, 12px 4px 0 #e8e8ff, 16px 4px 0 #e8e8ff,
        0 8px 0 #e8e8ff, 4px 8px 0 #4a2878, 8px 8px 0 #e8e8ff, 12px 8px 0 #4a2878, 16px 8px 0 #e8e8ff,
        0 12px 0 #e8e8ff, 4px 12px 0 #e8e8ff, 8px 12px 0 #e8e8ff, 12px 12px 0 #e8e8ff, 16px 12px 0 #e8e8ff,
        0 16px 0 #e8e8ff, 8px 16px 0 #e8e8ff, 16px 16px 0 #e8e8ff;
}

.char-ghost-2 {
    box-shadow:
        4px 0 0 #00ff41, 8px 0 0 #00ff41, 12px 0 0 #00ff41,
        0 4px 0 #00ff41, 4px 4px 0 #00ff41, 8px 4px 0 #00ff41, 12px 4px 0 #00ff41, 16px 4px 0 #00ff41,
        0 8px 0 #00ff41, 4px 8px 0 #1a0a2e, 8px 8px 0 #00ff41, 12px 8px 0 #1a0a2e, 16px 8px 0 #00ff41,
        0 12px 0 #00ff41, 4px 12px 0 #00ff41, 8px 12px 0 #00ff41, 12px 12px 0 #00ff41, 16px 12px 0 #00ff41,
        0 16px 0 #00ff41, 8px 16px 0 #00ff41, 16px 16px 0 #00ff41;
}

.char-ghost-3 {
    box-shadow:
        4px 0 0 #ff6b1a, 8px 0 0 #ff6b1a, 12px 0 0 #ff6b1a,
        0 4px 0 #ff6b1a, 4px 4px 0 #ff6b1a, 8px 4px 0 #ff6b1a, 12px 4px 0 #ff6b1a, 16px 4px 0 #ff6b1a,
        0 8px 0 #ff6b1a, 4px 8px 0 #1a0a2e, 8px 8px 0 #ff6b1a, 12px 8px 0 #1a0a2e, 16px 8px 0 #ff6b1a,
        0 12px 0 #ff6b1a, 4px 12px 0 #ff6b1a, 8px 12px 0 #ff6b1a, 12px 12px 0 #ff6b1a, 16px 12px 0 #ff6b1a,
        0 16px 0 #ff6b1a, 8px 16px 0 #ff6b1a, 16px 16px 0 #ff6b1a;
}

.char-ghost-4 {
    box-shadow:
        4px 0 0 #ff1493, 8px 0 0 #ff1493, 12px 0 0 #ff1493,
        0 4px 0 #ff1493, 4px 4px 0 #ff1493, 8px 4px 0 #ff1493, 12px 4px 0 #ff1493, 16px 4px 0 #ff1493,
        0 8px 0 #ff1493, 4px 8px 0 #1a0a2e, 8px 8px 0 #ff1493, 12px 8px 0 #1a0a2e, 16px 8px 0 #ff1493,
        0 12px 0 #ff1493, 4px 12px 0 #ff1493, 8px 12px 0 #ff1493, 12px 12px 0 #ff1493, 16px 12px 0 #ff1493,
        0 16px 0 #ff1493, 8px 16px 0 #ff1493, 16px 16px 0 #ff1493;
}

.char-ghost-5 {
    box-shadow:
        4px 0 0 #4a2878, 8px 0 0 #4a2878, 12px 0 0 #4a2878,
        0 4px 0 #4a2878, 4px 4px 0 #e8e8ff, 8px 4px 0 #4a2878, 12px 4px 0 #e8e8ff, 16px 4px 0 #4a2878,
        0 8px 0 #e8e8ff, 4px 8px 0 #1a0a2e, 8px 8px 0 #e8e8ff, 12px 8px 0 #1a0a2e, 16px 8px 0 #e8e8ff,
        0 12px 0 #e8e8ff, 4px 12px 0 #e8e8ff, 8px 12px 0 #e8e8ff, 12px 12px 0 #e8e8ff, 16px 12px 0 #e8e8ff,
        0 16px 0 #e8e8ff, 8px 16px 0 #e8e8ff, 16px 16px 0 #e8e8ff;
}

.char-name {
    font-family: 'Fira Code', monospace;
    font-size: 0.55rem;
    color: #ff6b1a;
    letter-spacing: 0.1em;
    margin-top: 0.6rem;
}

.char-role {
    font-family: 'Inter', sans-serif;
    font-size: 0.55rem;
    color: #4a2878;
    letter-spacing: 0.05em;
}

/* ========================================
   Boss Level
   ======================================== */
.boss-level {
    max-width: 640px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    position: relative;
    z-index: 1;
}

.boss-header {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.boss-id {
    color: #ff1493;
    font-size: 0.85rem;
    text-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
}

.boss-title {
    font-size: 1.6rem;
    color: #ff1493;
}

.boss-border {
    border-color: #ff1493;
    box-shadow:
        4px 0 0 #ff1493,
        0 4px 0 #ff1493,
        4px 4px 0 #ff1493,
        -2px -2px 0 rgba(255, 20, 147, 0.25),
        0 0 30px rgba(255, 20, 147, 0.08),
        0 0 60px rgba(255, 20, 147, 0.04);
}

.boss-stat {
    color: #ff1493;
}

/* ========================================
   Game Over
   ======================================== */
.game-over {
    padding: 4rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.game-over-content {
    max-width: 500px;
    margin: 0 auto;
}

.final-score {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    color: #00ff41;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

.game-over-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #ff6b1a;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 107, 26, 0.3);
}

.game-over-text {
    font-size: 0.85rem;
    color: #4a2878;
    margin-bottom: 1.5rem;
}

.pixel-stars {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.star {
    font-size: 1.5rem;
}

.star.lit {
    color: #ff6b1a;
    text-shadow: 0 0 8px rgba(255, 107, 26, 0.5);
}

.star.dim {
    color: #4a2878;
}

.continue-text {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #ff6b1a;
    letter-spacing: 0.2em;
    animation: blink-text 1.5s step-end infinite;
    cursor: pointer;
}

/* ========================================
   Fade In Animation (scroll-triggered)
   ======================================== */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 600px) {
    .pixel-ghost {
        display: none;
    }
    .level-stats {
        gap: 0.75rem;
    }
    .roster-row {
        gap: 0.6rem;
    }
    .character-card {
        padding: 0.5rem;
    }
    .brand {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }
}