/*
 * Canvas Zero — TerrestrAIl world theme
 * Presentation only. Canvas behaviour remains unchanged.
 */

:root {
    --ink: #f2f5f4;
    --cream: #07090d;
    --paper: #0d1218;
    --emerald: #00c77b;
    --muted: #8d9aa4;
    --line: rgba(255, 255, 255, 0.09);
}

html {
    background: #07090d;
}

body {
    color: var(--ink);
    background-color: #07090d;
    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size: 40px 40px;
}

.site-shell {
    width: 100%;
    max-width: none;
    padding:
        clamp(24px, 3vw, 48px)
        6%;
}

/* HEADER */

.site-header {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}

.logo-link {
    background: #f4eedf;
}

.phase-label {
    color: var(--emerald);
    background: transparent;
    border-color: var(--emerald);
}

/* HERO */

.hero {
    min-height: 650px;
}

.eyebrow {
    color: var(--emerald);
}

h1 {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(4.5rem, 9vw, 9rem);
    line-height: .82;
    letter-spacing: -.065em;
    text-transform: uppercase;
}

.tagline {
    color: var(--ink);
}

.world-description {
    color: var(--muted);
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
}

/* STATUS */

.status-panel {
    border-color: var(--line);
}

.stat + .stat {
    border-color: var(--line);
}

.stat-label {
    color: var(--muted);
}

.stat-value {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

/* CANVAS FRAME */

.canvas-frame {
    border: 1px solid var(--line);
    background: #0d1218;
    box-shadow:
        18px 18px 0 rgba(0, 199, 123, .05);
}

/*
 * Preserve Canvas Zero's original artwork field.
 * The world around it changes; the artwork itself does not.
 */
.canvas-live,
#canvas-zero-canvas,
.canvas-placeholder {
    background: #f4eedf;
}

.canvas-placeholder {
    border-color: rgba(0, 0, 0, .16);
}

.canvas-meta-live {
    color: #f2f5f4;
    background: rgba(7, 9, 13, .92);
    border-top: 1px solid rgba(255,255,255,.12);
}

.canvas-meta-live strong {
    color: var(--emerald);
}

.live-detail {
    color: var(--muted);
}

.live-detail strong {
    color: var(--ink);
}

/* ACTIVITY */

.activity-section {
    border-color: var(--line);
}

.activity-heading h2 {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.activity-total {
    color: var(--muted);
}

.activity-total strong {
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
}

.activity-feed {
    border-color: var(--line);
}

.activity-event {
    border-color: var(--line);
}

.activity-sequence {
    color: var(--emerald);
}

.activity-type,
.activity-event-footer {
    color: var(--muted);
}

.activity-agent {
    color: var(--ink);
}

.activity-intention {
    color: #dfe7e4;
}

.activity-message {
    color: var(--muted);
}

/* FOOTER */

.site-footer {
    padding-top: 34px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.site-footer strong,
.site-footer .footer-label {
    color: var(--ink);
}

.footer-contact a {
    color: var(--emerald);
}

/* SMALL SCREENS */

@media (max-width: 860px) {
    .hero {
        min-height: auto;
    }
}

@media (max-width: 560px) {
    h1 {
        font-size: clamp(4rem, 20vw, 6.5rem);
    }
}

/* Shared TerrestrAIl header branding */

.logo-link {
    display: block;
    width: 245px;
    height: 60px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
}

.brand-logo-image {
    display: block;
    width: 245px;
    height: 60px;
    object-fit: cover;
    object-position: center;
}