/* ============================================
   ringworld.quest - Styles
   Goblincore meets Deep Space Telemetry
   ============================================ */

/* CSS Custom Properties */
:root {
    --deep-soil: #1a1510;
    --terracotta: #b85c38;
    --amber-glow: #d4873f;
    --parchment: #e8dcc8;
    --mycelium-green: #6b8f4e;
    --dark-earth: #3a2e1f;
    --warm-umber: #7a6b4e;
    --rust-oxide: #8b4513;
    --fungal-glow: #a8c686;
    --void-black: #0d0b08;
    --parchment-mid: #ddd0b8;
    --parchment-dark: #d4c4a8;
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
}

body {
    font-family: 'Special Elite', cursive;
    background-color: var(--void-black);
    color: var(--parchment);
    overflow-x: hidden;
    line-height: 1.75;
}

/* Scan-line overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ============================================
   HUD Overlay
   ============================================ */
#hud-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
}

.hud-bracket {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.hud-bracket-corner {
    width: 30px;
    height: 30px;
    position: absolute;
}

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

.hud-top-left .hud-bracket-corner {
    top: 0;
    left: 0;
    border-left: 2px solid var(--amber-glow);
    border-top: 2px solid var(--amber-glow);
    animation: hud-pulse 3s ease-in-out infinite;
}

.hud-top-right {
    top: 20px;
    right: 20px;
    align-items: flex-end;
    text-align: right;
}

.hud-top-right .hud-bracket-corner {
    top: 0;
    right: 0;
    border-right: 2px solid var(--amber-glow);
    border-top: 2px solid var(--amber-glow);
    animation: hud-pulse 3s ease-in-out infinite 0.5s;
}

.hud-bottom-left {
    bottom: 20px;
    left: 20px;
}

.hud-bottom-left .hud-bracket-corner {
    bottom: 0;
    left: 0;
    border-left: 2px solid var(--amber-glow);
    border-bottom: 2px solid var(--amber-glow);
    animation: hud-pulse 3s ease-in-out infinite 1s;
}

.hud-bottom-right {
    bottom: 20px;
    right: 20px;
    align-items: flex-end;
    text-align: right;
}

.hud-bottom-right .hud-bracket-corner {
    bottom: 0;
    right: 0;
    border-right: 2px solid var(--amber-glow);
    border-bottom: 2px solid var(--amber-glow);
    animation: hud-pulse 3s ease-in-out infinite 1.5s;
}

.hud-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--amber-glow);
    text-shadow: 0 0 8px rgba(212, 135, 63, 0.6);
}

.hud-sublabel {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.55rem, 1vw, 0.7rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--amber-glow);
    opacity: 0.6;
    text-shadow: 0 0 6px rgba(212, 135, 63, 0.4);
}

.bio-pulse-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mycelium-green);
    box-shadow: 0 0 8px var(--mycelium-green), 0 0 16px rgba(107, 143, 78, 0.4);
    animation: bio-pulse 3s ease-in-out infinite;
}

#signal-meter {
    margin-top: 4px;
}

/* HUD Crosshair */
#hud-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

#hud-crosshair.hidden {
    opacity: 0;
}

.crosshair-h {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--amber-glow);
    transform: translateY(-50%);
}

.crosshair-v {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--amber-glow);
    transform: translateX(-50%);
}

/* ============================================
   Animations
   ============================================ */
@keyframes hud-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(212, 135, 63, 0.8)); }
}

@keyframes bio-pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 12px var(--mycelium-green), 0 0 24px rgba(107, 143, 78, 0.6); }
}

@keyframes crt-flicker {
    0% { opacity: 1; }
    5% { opacity: 0.8; }
    10% { opacity: 1; }
    15% { opacity: 0.6; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

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

@keyframes mushroom-glow-pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes mycelium-grow {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}

@keyframes hud-flash {
    0% { opacity: 0.7; }
    50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(212, 135, 63, 1)); }
    100% { opacity: 0.7; }
}

@keyframes orbital-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   Mycelium Introduction SVG
   ============================================ */
#mycelium-intro {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 90;
    pointer-events: none;
    opacity: 1;
    transition: opacity 2s ease;
}

#mycelium-intro.faded {
    opacity: 0.15;
}

.mycelium-path {
    fill: none;
    stroke: var(--mycelium-green);
    stroke-width: 2;
    opacity: 0.4;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: mycelium-grow 4s ease-out forwards;
}

.mycelium-branch {
    fill: none;
    stroke: var(--fungal-glow);
    stroke-width: 1;
    opacity: 0.3;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: mycelium-grow 3s ease-out 1.5s forwards;
}

/* ============================================
   Log Entries - Main Content
   ============================================ */
#station-log {
    position: relative;
    z-index: 10;
}

.log-entry {
    min-height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
}

.log-viewport {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 80px 40px;
}

/* ============================================
   Log Entry 01 - Signal Acquired (Orbital View)
   ============================================ */
.log-orbital {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 135, 63, 0.05) 0%, transparent 60%),
        radial-gradient(circle at 20% 30%, rgba(107, 143, 78, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(184, 92, 56, 0.03) 0%, transparent 30%),
        var(--void-black);
}

.orbital-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 600px);
    height: min(70vw, 600px);
    border: 1px solid rgba(212, 135, 63, 0.15);
    border-radius: 50%;
    animation: orbital-rotate 120s linear infinite;
}

.orbital-ring::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 1px solid rgba(212, 135, 63, 0.08);
    border-radius: 50%;
}

.orbital-ring::after {
    content: '';
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(212, 135, 63, 0.1);
    border-radius: 50%;
}

.orbital-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--amber-glow);
    box-shadow: 0 0 20px var(--amber-glow), 0 0 60px rgba(212, 135, 63, 0.3), 0 0 120px rgba(212, 135, 63, 0.1);
}

.log-01-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
}

.log-header {
    margin-bottom: 24px;
}

.log-number {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.65rem, 1.2vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--amber-glow);
    text-shadow: 0 0 8px rgba(212, 135, 63, 0.6);
    display: block;
    margin-bottom: 8px;
}

.log-title {
    font-family: 'Silkscreen', cursive;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 4rem);
    text-transform: uppercase;
    color: var(--amber-glow);
    text-shadow: 0 0 12px rgba(212, 135, 63, 0.4);
    line-height: 1.1;
}

.log-text-area {
    margin-top: 24px;
}

.log-text {
    font-family: 'Special Elite', cursive;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: var(--parchment);
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.log-entry.visible .log-text {
    opacity: 1;
    transform: translateY(0);
}

/* Specimen Badges */
.specimen-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
}

.log-entry.visible .specimen-badge {
    opacity: 1;
}

.specimen-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.specimen-label {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.5vw, 1.1rem);
    color: var(--warm-umber);
}

/* ============================================
   Log Entry 02 - Surface Descent
   ============================================ */
.log-surface {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(107, 143, 78, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(139, 69, 19, 0.06) 0%, transparent 40%),
        linear-gradient(180deg, var(--void-black) 0%, var(--deep-soil) 30%, var(--dark-earth) 100%);
}

/* Aged Paper Textures */
.aged-paper {
    background:
        radial-gradient(ellipse at 20% 40%, rgba(139, 69, 19, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(139, 69, 19, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 10%, rgba(184, 92, 56, 0.04) 0%, transparent 60%),
        linear-gradient(180deg, #e8dcc8 0%, #ddd0b8 40%, #d4c4a8 100%);
    filter: contrast(1.02) brightness(0.98);
    position: relative;
}

.paper-document {
    max-width: 700px;
    width: 90%;
    padding: 48px 40px;
    clip-path: polygon(0% 2%, 3% 0%, 15% 1%, 25% 0%, 40% 1.5%, 55% 0%, 70% 0.8%, 85% 0%, 97% 1%, 100% 3%, 99% 15%, 100% 30%, 99.5% 50%, 100% 70%, 99% 85%, 100% 97%, 98% 100%, 85% 99%, 70% 100%, 55% 99.5%, 40% 100%, 25% 99%, 10% 100%, 2% 99%, 0% 97%, 1% 80%, 0% 60%, 0.5% 40%, 0% 20%);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}

.paper-document .log-title {
    color: var(--dark-earth);
    text-shadow: none;
}

.paper-document .log-number {
    color: var(--terracotta);
    text-shadow: none;
}

.paper-text {
    font-family: 'Special Elite', cursive;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: var(--dark-earth);
    margin-bottom: 16px;
}

.paper-text.annotation {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    color: var(--warm-umber);
    font-style: italic;
    border-left: 2px solid var(--terracotta);
    padding-left: 16px;
    margin-top: 24px;
}

.margin-note {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: rotate(3deg) translateX(60%);
    max-width: 180px;
    opacity: 0.7;
}

.note-text {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    color: var(--warm-umber);
    line-height: 1.4;
}

/* Moss Overlays */
.moss-overlay {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    pointer-events: none;
}

.moss-left {
    left: 0;
    background: radial-gradient(ellipse at 0% 50%, rgba(107, 143, 78, 0.15) 0%, transparent 70%),
                radial-gradient(ellipse at 10% 30%, rgba(168, 198, 134, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 5% 70%, rgba(107, 143, 78, 0.12) 0%, transparent 60%);
}

.moss-right {
    right: 0;
    background: radial-gradient(ellipse at 100% 50%, rgba(107, 143, 78, 0.15) 0%, transparent 70%),
                radial-gradient(ellipse at 90% 40%, rgba(168, 198, 134, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 95% 80%, rgba(107, 143, 78, 0.12) 0%, transparent 60%);
}

/* ============================================
   Log Entry 03 - The Overgrown Console
   ============================================ */
.log-console {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(26, 21, 16, 0.9) 0%, var(--void-black) 100%);
    flex-direction: column;
    gap: 24px;
}

.console-frame {
    position: relative;
    max-width: 800px;
    width: 90%;
}

.console-screen {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 135, 63, 0.03) 0%, transparent 70%),
        var(--void-black);
    border: 1px solid rgba(212, 135, 63, 0.3);
    border-radius: 4px;
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
}

.console-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(212, 135, 63, 0.02) 3px,
        rgba(212, 135, 63, 0.02) 6px
    );
    pointer-events: none;
}

.console-screen .log-title {
    font-size: clamp(1.5rem, 4vw, 3rem);
}

.crt-text {
    margin: 24px 0;
}

.terminal-line {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.75rem, 1.3vw, 0.95rem);
    color: var(--amber-glow);
    text-shadow: 0 0 6px rgba(212, 135, 63, 0.5);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.log-entry.visible .terminal-line {
    opacity: 1;
}

.terminal-blink {
    animation: terminal-blink 1s step-end infinite;
    display: inline-block;
}

.researcher-note {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(212, 135, 63, 0.15);
}

.researcher-note p {
    font-family: 'Special Elite', cursive;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    line-height: 1.75;
    color: var(--parchment);
    opacity: 0.85;
}

/* Mushroom Silhouettes */
.mushroom {
    position: absolute;
    bottom: 0;
    z-index: 2;
}

.mushroom-cap {
    width: 40px;
    height: 22px;
    background: var(--dark-earth);
    border-radius: 50% 50% 10% 10%;
    position: relative;
}

.mushroom-stem {
    width: 10px;
    height: 30px;
    background: var(--dark-earth);
    margin: 0 auto;
    border-radius: 0 0 3px 3px;
}

.mushroom-glow {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(107, 143, 78, 0.3) 0%, transparent 70%);
    animation: mushroom-glow-pulse 3s ease-in-out infinite;
}

.mushroom-1 {
    left: 5%;
    bottom: -5px;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.mushroom-1 .mushroom-cap { width: 45px; height: 25px; }
.mushroom-1 .mushroom-stem { height: 35px; }

.mushroom-2 {
    left: 20%;
    bottom: -5px;
    transform: scale(0.7);
    opacity: 0;
    transition: opacity 0.6s ease 0.15s;
}

.mushroom-3 {
    right: 15%;
    bottom: -5px;
    transform: scale(0.85);
    opacity: 0;
    transition: opacity 0.6s ease 0.3s;
}

.mushroom-4 {
    right: 3%;
    bottom: -5px;
    transform: scale(0.6);
    opacity: 0;
    transition: opacity 0.6s ease 0.45s;
}

.log-entry.visible .mushroom {
    opacity: 1;
}

/* Bio Readout */
.bio-readout {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--mycelium-green);
    text-shadow: 0 0 6px rgba(107, 143, 78, 0.5);
}

.bio-bar {
    width: 100px;
    height: 6px;
    background: rgba(107, 143, 78, 0.15);
    border: 1px solid rgba(107, 143, 78, 0.3);
    border-radius: 2px;
    overflow: hidden;
}

.bio-bar-fill {
    width: 92%;
    height: 100%;
    background: var(--mycelium-green);
    box-shadow: 0 0 6px var(--mycelium-green);
    border-radius: 2px;
}

/* ============================================
   Log Entry 04 - The Archive
   ============================================ */
.log-archive {
    background:
        repeating-conic-gradient(from 0deg at 50% 50%, rgba(139, 69, 19, 0.02) 0deg 30deg, transparent 30deg 60deg),
        radial-gradient(ellipse at 40% 50%, rgba(26, 21, 16, 0.8) 0%, var(--deep-soil) 100%);
}

.archive-document {
    max-width: 700px;
    width: 90%;
    padding: 48px 40px;
    clip-path: polygon(2% 0%, 10% 1%, 22% 0%, 35% 0.5%, 48% 0%, 60% 1%, 75% 0%, 88% 0.5%, 98% 0%, 100% 2%, 99% 18%, 100% 35%, 99.5% 52%, 100% 68%, 99% 82%, 100% 98%, 97% 100%, 82% 99%, 65% 100%, 50% 99.5%, 35% 100%, 20% 99%, 5% 100%, 0% 98%, 0.5% 82%, 0% 65%, 1% 48%, 0% 32%, 0.5% 18%, 0% 5%);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
}

.archive-note {
    left: -20px;
    right: auto;
    transform: rotate(-2deg) translateX(-60%);
}

.archive-badge {
    margin-top: 32px;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
}

.log-entry.visible .archive-badge {
    opacity: 1;
}

/* ============================================
   Log Entry 05 - Transmission End
   ============================================ */
.log-transmission {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 135, 63, 0.03) 0%, transparent 50%),
        var(--void-black);
    flex-direction: column;
}

.orbital-ring-final {
    width: min(80vw, 700px);
    height: min(80vw, 700px);
    opacity: 0.5;
}

.orbital-glow-final {
    box-shadow: 0 0 30px var(--amber-glow), 0 0 80px rgba(212, 135, 63, 0.3), 0 0 160px rgba(212, 135, 63, 0.1);
}

.transmission-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
    text-align: center;
}

.final-message {
    padding: 40px 32px;
    margin-top: 24px;
    clip-path: polygon(1% 0%, 15% 1%, 30% 0%, 50% 0.5%, 70% 0%, 85% 1%, 99% 0%, 100% 2%, 99% 50%, 100% 98%, 98% 100%, 50% 99%, 2% 100%, 0% 98%, 1% 50%, 0% 2%);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4);
}

.final-message .paper-text {
    text-align: center;
}

.transmission-coords {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--terracotta);
    text-align: center;
}

.coord-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.6rem, 1vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--terracotta);
    display: block;
    margin-bottom: 8px;
}

.coord-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: clamp(0.8rem, 1.4vw, 1rem);
    letter-spacing: 0.15em;
    color: var(--dark-earth);
}

.final-badge {
    margin-top: 32px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s;
}

.log-entry.visible .final-badge {
    opacity: 1;
}

/* ============================================
   Rust & Corrosion Textures
   ============================================ */
.log-console::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-conic-gradient(
        from 45deg at 30% 60%,
        rgba(139, 69, 19, 0.03) 0deg 15deg,
        transparent 15deg 45deg
    ),
    repeating-conic-gradient(
        from 120deg at 70% 30%,
        rgba(184, 92, 56, 0.02) 0deg 20deg,
        transparent 20deg 60deg
    );
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   CRT Flicker Effect (applied via JS)
   ============================================ */
.crt-flicker {
    animation: crt-flicker 0.4s ease-out;
}

/* ============================================
   HUD Flash (applied on section transition)
   ============================================ */
.hud-flash .hud-bracket-corner {
    animation: hud-flash 0.8s ease-in-out;
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .hud-bracket {
        padding: 6px;
    }

    .hud-top-left, .hud-top-right {
        top: 10px;
    }

    .hud-top-left, .hud-bottom-left {
        left: 10px;
    }

    .hud-top-right, .hud-bottom-right {
        right: 10px;
    }

    .hud-bottom-left, .hud-bottom-right {
        bottom: 10px;
    }

    .log-viewport {
        padding: 70px 20px;
    }

    .paper-document,
    .archive-document {
        padding: 32px 24px;
        width: 95%;
    }

    .margin-note {
        position: relative;
        right: auto;
        top: auto;
        transform: rotate(1deg);
        margin-top: 20px;
        max-width: 100%;
    }

    .archive-note {
        left: auto;
        transform: rotate(-1deg);
    }

    .mushroom-1 { left: 2%; }
    .mushroom-4 { right: 1%; }

    .orbital-ring {
        width: min(90vw, 400px);
        height: min(90vw, 400px);
    }
}

@media (max-width: 480px) {
    .hud-sublabel {
        display: none;
    }

    #signal-meter {
        display: none;
    }

    .log-title {
        font-size: clamp(1.5rem, 8vw, 2.5rem);
    }

    .console-screen {
        padding: 24px 16px;
    }
}