/* Cyberpunk meets solarpunk: HUD details (mono labels, chamfered cards, corner brackets,
   scanlines) warmed up with solar gold. Loaded after main.css and world.css on the home page. */

:root {
    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --gold: #ffd84a;
    --cyan: #5ef6ff;
    --chamfer: 14px;
}

/* -------------------------
   Screen texture: faint scanlines and a soft vignette
-------------------------- */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
        radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}

/* -------------------------
   HUD labels
-------------------------- */

.kicker {
    display: block;
    margin-bottom: 14px;
    font: 500 12px/1.2 var(--mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--lime);
    text-shadow: 0 0 10px rgba(198, 230, 65, 0.6);
}

.kicker::after {
    content: "_";
    margin-left: 4px;
    animation: caret 1.1s steps(1) infinite;
}

@keyframes caret {
    50% { opacity: 0; }
}

/* Headlines: a hint of colour split, like a display slightly out of register */
.zone h1 {
    text-shadow: -1px 0 rgba(255, 60, 170, 0.45), 1px 0 rgba(94, 246, 255, 0.45);
}

/* Mono is only for the HUD: layer labels and the depth gauge. Everything else reads in Plex Sans. */
.depth-label {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* -------------------------
   Cards: chamfered glass with neon corner brackets
-------------------------- */

body.is-dark .resource,
body.is-dark .detail-card {
    border: 1px solid rgba(198, 230, 65, 0.22);
    border-radius: 0;
    clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
        rgba(10, 6, 24, 0.35);
}

body.is-dark .resource::before,
body.is-dark .resource::after,
body.is-dark .detail-card::before,
body.is-dark .detail-card::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease;
}

body.is-dark .resource::before,
body.is-dark .detail-card::before {
    top: 6px;
    right: 6px;
    border-top: 2px solid var(--lime);
    border-right: 2px solid var(--lime);
}

body.is-dark .resource::after,
body.is-dark .detail-card::after {
    bottom: 6px;
    left: 6px;
    border-bottom: 2px solid var(--lime);
    border-left: 2px solid var(--lime);
}

body.is-dark .detail-card {
    position: relative;
}

/* Hover: sunlight runs through the glass */
body.is-dark .resource:hover {
    border-color: rgba(255, 216, 74, 0.6);
    background:
        linear-gradient(120deg, rgba(255, 216, 74, 0.16), rgba(198, 230, 65, 0.06) 45%, rgba(94, 246, 255, 0.1)),
        rgba(10, 6, 24, 0.45);
}

body.is-dark .resource:hover::before,
body.is-dark .resource:hover::after {
    width: 28px;
    height: 28px;
    border-color: var(--gold);
}


/* -------------------------
   Neon details for the solarpunk drawings
-------------------------- */

/* Wind turbine blades turn on their hub */
.neon .spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: spin 7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kicker::after,
    .neon .spin {
        animation: none;
    }
}