/* ============================================
   diplomacy.quest - Strategic Command Interface
   Palette:
     Steel Dark:      #1c2833
     Amber CRT:       #ffb347
     Olive Drab:      #556b2f
     Alarm Red:       #cc3333
     Instrument White: #d5dbe0
     Console Gray:    #2c3e50
   ============================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #ffb347 #1c2833;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #1c2833;
    color: #d5dbe0;
    overflow-x: hidden;
    padding-bottom: 60px;
}

/* --- CRT SCANLINE OVERLAY --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* --- HERO SECTION --- */
.hero-section {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #1c2833;
    overflow: hidden;
}

/* Reel-to-reel spools */
.reel-spool {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid rgba(255, 179, 71, 0.25);
    z-index: 2;
}

.reel-left {
    top: 40px;
    left: 40px;
}

.reel-right {
    top: 40px;
    right: 40px;
}

.reel-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 179, 71, 0.15) 0deg,
        transparent 30deg,
        transparent 90deg,
        rgba(255, 179, 71, 0.15) 90deg,
        transparent 120deg,
        transparent 180deg,
        rgba(255, 179, 71, 0.15) 180deg,
        transparent 210deg,
        transparent 270deg,
        rgba(255, 179, 71, 0.15) 270deg,
        transparent 300deg,
        transparent 360deg
    );
    animation: reelSpin 20s linear infinite;
}

.reel-right .reel-inner {
    animation-direction: reverse;
}

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

/* Radar container */
.radar-container {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 2px solid rgba(255, 179, 71, 0.4);
    background: radial-gradient(circle, rgba(28, 40, 51, 0.9) 0%, #1c2833 100%);
    margin-bottom: 40px;
}

.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 179, 71, 0.15);
}

.radar-ring-outer {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.radar-ring-mid {
    width: 55%;
    height: 55%;
    top: 22.5%;
    left: 22.5%;
}

.radar-ring-inner {
    width: 30%;
    height: 30%;
    top: 35%;
    left: 35%;
}

.radar-crosshair-h,
.radar-crosshair-v {
    position: absolute;
    background-color: rgba(255, 179, 71, 0.1);
}

.radar-crosshair-h {
    width: 100%;
    height: 1px;
    top: 50%;
}

.radar-crosshair-v {
    width: 1px;
    height: 100%;
    left: 50%;
}

.radar-sweep {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(255, 179, 71, 0.6) 0deg,
        rgba(255, 179, 71, 0.1) 30deg,
        transparent 60deg,
        transparent 360deg
    );
    animation: radarSweep 4s linear infinite;
}

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

.radar-center {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #ffb347;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(255, 179, 71, 0.8);
}

.radar-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: #ffb347;
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
}

.dot-1 { top: 25%; left: 60%; animation-delay: 0s; }
.dot-2 { top: 40%; left: 75%; animation-delay: 0.5s; }
.dot-3 { top: 65%; left: 35%; animation-delay: 1s; }
.dot-4 { top: 30%; left: 30%; animation-delay: 1.5s; }
.dot-5 { top: 70%; left: 65%; animation-delay: 0.8s; }

@keyframes pulseDot {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 8px rgba(255, 179, 71, 0.6); }
}

/* Hero text */
.hero-title {
    font-family: 'Saira Stencil One', cursive;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    color: #ffb347;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(255, 179, 71, 0.4);
}

.hero-subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: #556b2f;
    letter-spacing: 0.08em;
    margin-top: 12px;
}

.scroll-indicator {
    position: absolute;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    animation: fadeInOut 3s ease-in-out infinite;
}

.scroll-text {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: rgba(255, 179, 71, 0.5);
    letter-spacing: 0.12em;
}

.scroll-arrow {
    width: 16px;
    height: 16px;
    border-right: 2px solid rgba(255, 179, 71, 0.5);
    border-bottom: 2px solid rgba(255, 179, 71, 0.5);
    transform: rotate(45deg);
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* --- QUEST CHAMBERS --- */
.quest-chamber {
    min-height: 100vh;
    padding: 40px 24px;
    position: relative;
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.quest-chamber.visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- BENTO-BOX GRIDS --- */
.chamber-grid {
    display: grid;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 140px);
    transition: all 0.6s ease-in-out;
}

.chamber-grid-1 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "briefing briefing"
        "intel comms"
        "readout readout";
}

.chamber-grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "briefing briefing map"
        "intel intel map"
        "comms comms comms";
}

.chamber-grid-3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr 1fr;
    grid-template-areas:
        "briefing briefing"
        "treaty intel"
        "treaty readout";
}

.chamber-grid-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "briefing briefing"
        "credits credits";
}

/* Panel area assignments */
.panel-briefing { grid-area: briefing; }
.panel-intel { grid-area: intel; }
.panel-comms { grid-area: comms; }
.panel-readout { grid-area: readout; }
.panel-map { grid-area: map; }
.panel-treaty { grid-area: treaty; }
.panel-credits { grid-area: credits; }

/* --- PANEL STYLING --- */
.panel {
    background-color: #2c3e50;
    border: 1px solid rgba(255, 179, 71, 0.2);
    border-radius: 4px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffb347, transparent);
    opacity: 0.4;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 179, 71, 0.1);
}

.panel-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: #ffb347;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-status {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.06em;
}

.status-active {
    background-color: rgba(85, 107, 47, 0.3);
    color: #556b2f;
    border: 1px solid #556b2f;
}

.status-warning {
    background-color: rgba(255, 179, 71, 0.15);
    color: #ffb347;
    border: 1px solid rgba(255, 179, 71, 0.4);
}

.status-critical {
    background-color: rgba(204, 51, 51, 0.2);
    color: #cc3333;
    border: 1px solid #cc3333;
    animation: criticalPulse 1.5s ease-in-out infinite;
}

@keyframes criticalPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.chamber-title {
    font-family: 'Saira Stencil One', cursive;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 400;
    color: #ffb347;
    text-transform: uppercase;
    margin-bottom: 16px;
    text-shadow: 0 0 15px rgba(255, 179, 71, 0.3);
}

.panel-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: #d5dbe0;
}

/* --- CLASSIFIED CONTENT --- */
.classified-content {
    position: relative;
    margin-bottom: 16px;
}

.classified-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    font-family: 'Saira Stencil One', cursive;
    font-size: 3rem;
    color: #cc3333;
    opacity: 0.3;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.classified-content.declassified .classified-overlay {
    opacity: 0;
}

.intel-lines {
    filter: blur(4px);
    transition: filter 0.5s ease;
}

.classified-content.declassified .intel-lines {
    filter: blur(0);
}

.intel-line {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #ffb347;
    letter-spacing: 0.06em;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 179, 71, 0.08);
}

/* --- TOGGLE SWITCH --- */
.toggle-switch-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.toggle-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: #556b2f;
    letter-spacing: 0.08em;
}

.toggle-switch {
    width: 48px;
    height: 24px;
    background-color: #1c2833;
    border: 1px solid rgba(255, 179, 71, 0.3);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.toggle-switch.active {
    background-color: rgba(85, 107, 47, 0.4);
    border-color: #556b2f;
}

.toggle-knob {
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #d5dbe0;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.toggle-switch.active .toggle-knob {
    transform: translateX(24px);
    background-color: #556b2f;
}

/* --- COMMS FEED --- */
.comms-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comms-line {
    font-family: 'Space Mono', monospace;
    font-size: 0.78rem;
    color: #d5dbe0;
    padding: 8px 12px;
    background-color: rgba(28, 40, 51, 0.6);
    border-left: 3px solid rgba(255, 179, 71, 0.3);
    line-height: 1.5;
}

.comms-time {
    color: #556b2f;
    margin-right: 8px;
}

.comms-sender {
    color: #ffb347;
    font-weight: 700;
    margin-right: 8px;
}

/* --- READOUT METERS --- */
.readout-meters {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.readout-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.readout-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: #556b2f;
    letter-spacing: 0.08em;
}

.readout-bar {
    width: 100%;
    height: 8px;
    background-color: #1c2833;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 179, 71, 0.15);
}

.readout-fill {
    height: 100%;
    background: linear-gradient(90deg, #556b2f, #ffb347);
    border-radius: 4px;
    transition: width 1.2s ease;
}

.readout-fill.diplomatic {
    background: linear-gradient(90deg, #556b2f, #556b2f);
}

.readout-fill.alarm {
    background: linear-gradient(90deg, #ffb347, #cc3333);
}

/* --- TACTICAL DISPLAY --- */
.tactical-display {
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(28, 40, 51, 0.5);
    border: 1px solid rgba(255, 179, 71, 0.1);
    border-radius: 4px;
}

.tactical-svg {
    width: 100%;
    height: 100%;
}

.blink-dot {
    animation: blinkDot 1.2s ease-in-out infinite;
}

@keyframes blinkDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.blockade-line {
    animation: dashMove 2s linear infinite;
}

@keyframes dashMove {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -16; }
}

/* --- TREATY ITEMS --- */
.treaty-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.treaty-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: rgba(28, 40, 51, 0.5);
    border: 1px solid rgba(255, 179, 71, 0.08);
    border-radius: 2px;
}

.treaty-code {
    font-family: 'Saira Stencil One', cursive;
    font-size: 0.85rem;
    color: #ffb347;
    min-width: 60px;
}

.treaty-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #d5dbe0;
    flex: 1;
}

.treaty-status {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.treaty-agreed {
    background-color: rgba(85, 107, 47, 0.3);
    color: #556b2f;
    border: 1px solid #556b2f;
}

.treaty-pending {
    background-color: rgba(255, 179, 71, 0.15);
    color: #ffb347;
    border: 1px solid rgba(255, 179, 71, 0.4);
}

.treaty-disputed {
    background-color: rgba(204, 51, 51, 0.2);
    color: #cc3333;
    border: 1px solid #cc3333;
}

/* --- FINAL SECTION --- */
.final-readout {
    margin-top: 32px;
    overflow: hidden;
}

.readout-ticker {
    display: flex;
    gap: 20px;
    animation: tickerScroll 20s linear infinite;
    white-space: nowrap;
}

.ticker-item {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #556b2f;
    letter-spacing: 0.06em;
}

.ticker-separator {
    color: rgba(255, 179, 71, 0.3);
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.credits-content {
    text-align: center;
    padding: 32px;
}

.credits-text {
    font-family: 'Saira Stencil One', cursive;
    font-size: 1.5rem;
    color: #ffb347;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.credits-sub {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: #556b2f;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

/* --- STATUS BAR / TENSION METER --- */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: #1c2833;
    border-top: 1px solid rgba(255, 179, 71, 0.2);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 16px;
    z-index: 1000;
}

.status-left {
    flex-shrink: 0;
}

.status-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: #556b2f;
    letter-spacing: 0.08em;
}

.tension-meter {
    flex: 1;
    height: 12px;
    background-color: #2c3e50;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 179, 71, 0.15);
}

.tension-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #556b2f, #ffb347, #cc3333);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.tension-markers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.tension-mark {
    position: absolute;
    top: -18px;
    transform: translateX(-50%);
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    color: rgba(213, 219, 224, 0.3);
    letter-spacing: 0.06em;
}

.status-right {
    flex-shrink: 0;
    min-width: 40px;
    text-align: right;
}

.status-value {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: #ffb347;
    letter-spacing: 0.06em;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .chamber-grid-1,
    .chamber-grid-2,
    .chamber-grid-3,
    .chamber-grid-4 {
        grid-template-columns: 1fr;
        grid-template-areas:
            "briefing"
            "intel"
            "comms"
            "readout"
            "map"
            "treaty"
            "credits";
    }

    .radar-container {
        width: 240px;
        height: 240px;
    }

    .reel-spool {
        width: 80px;
        height: 80px;
    }

    .reel-left {
        top: 20px;
        left: 20px;
    }

    .reel-right {
        top: 20px;
        right: 20px;
    }

    .panel {
        padding: 16px;
    }

    .status-bar {
        padding: 0 12px;
    }

    .status-label {
        font-size: 0.6rem;
    }

    .treaty-item {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.6rem;
    }

    .radar-container {
        width: 200px;
        height: 200px;
    }

    .reel-spool {
        display: none;
    }
}