/* mechanic.stream - Pixel-art HUD cockpit */

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

:root{
    --gold:#D4A843;
    --deep-amber:#A07830;
    --bright-gold:#FFD700;
    --void:#080808;
    --panel:#0E0E0E;
    --display:#141410;
    --ruby:#C83030;
    --emerald:#30A060;
    --text-gold:#E8D8B0;
    --dim-gold:#8A7A58;
    --grid-line:#1A1810;
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--text-gold);
    font-family:'VT323',monospace;
    font-weight:400;
    font-size:clamp(0.9rem,1vw,1rem);
    line-height:1.7;
    letter-spacing:0.03em;
    overflow-x:hidden;
    -webkit-font-smoothing:none;
    -moz-osx-font-smoothing:unset;
}

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

/* HUD Frame */
.hud-frame{
    position:fixed;inset:0;
    z-index:100;
    pointer-events:none;
    display:flex;flex-direction:column;
    justify-content:space-between;
}

.hud-top,.hud-bottom{
    pointer-events:auto;
    background:var(--panel);
    display:flex;align-items:center;
    justify-content:space-between;
    padding:0 12px;
    border-color:var(--gold);
}

.hud-top{
    height:32px;
    border-bottom:2px solid var(--gold);
}

.hud-bottom{
    height:48px;
    border-top:2px solid var(--gold);
}

.hud-site{
    font-family:'Silkscreen',cursive;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.08em;
    color:var(--gold);
}

.hud-nav{display:flex;gap:4px;align-items:center}

.hud-link{
    font-family:'Silkscreen',cursive;
    font-size:0.6rem;
    color:var(--text-gold);
    text-decoration:none;
    letter-spacing:0.05em;
    transition:color 0.2s;
}

.hud-link:hover{color:var(--bright-gold)}

.hud-pipe{color:var(--dim-gold);font-size:0.6rem;margin:0 2px}

.hud-status{display:flex;align-items:center;gap:8px}

.hud-clock{
    font-family:'Press Start 2P',cursive;
    font-size:0.5rem;
    color:var(--gold);
    letter-spacing:0.05em;
}

.hud-signal{display:flex;gap:2px;align-items:flex-end}
.sig-bar{width:2px;background:var(--gold)}
.s1{height:4px}.s2{height:7px}.s3{height:10px}.s4{height:13px}

.hud-live{
    font-family:'Press Start 2P',cursive;
    font-size:0.45rem;
    color:var(--ruby);
    display:flex;align-items:center;gap:4px;
}

.live-dot{
    width:4px;height:4px;
    background:var(--ruby);
    animation:blink 1s step-start infinite;
}

@keyframes blink{50%{opacity:0}}

.hud-ctrl{
    font-family:'Press Start 2P',cursive;
    font-size:0.45rem;
    color:var(--gold);
    letter-spacing:0.05em;
}

/* Viewport content */
.viewport-content{
    margin:32px 0 48px;
    position:relative;
}

/* Sections */
.section{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    padding:40px 24px;
    overflow:hidden;
}

/* Boot */
.section-boot{flex-direction:column}

.boot-container{max-width:600px;width:100%;text-align:center}

.boot-lines{
    text-align:left;
    margin-bottom:2rem;
}

.boot-line{
    font-family:'Press Start 2P',cursive;
    font-size:0.65rem;
    color:var(--bright-gold);
    letter-spacing:0.05em;
    margin-bottom:0.5rem;
    opacity:0;
    transition:opacity 0.1s steps(1);
}

.boot-line.show{opacity:1}

.boot-title{
    font-family:'Silkscreen',cursive;
    font-weight:700;
    font-size:clamp(2rem,4vw,4rem);
    color:var(--gold);
    letter-spacing:0.08em;
    text-transform:uppercase;
    opacity:0;
    transition:opacity 0.3s steps(1);
    text-shadow:0 0 8px rgba(212,168,67,0.4);
}

.boot-title.show{opacity:1}

/* Bubbles */
.bubble-layer{
    position:absolute;inset:0;
    pointer-events:none;
    overflow:hidden;
}

.px-bubble{
    position:absolute;
    background:var(--gold);
    box-shadow:inset -1px -1px 0 var(--deep-amber),1px 1px 0 var(--bright-gold);
    animation:bubble-rise linear infinite;
}

@keyframes bubble-rise{
    from{transform:translateY(100vh)}
    to{transform:translateY(-20px)}
}

/* Vines */
.vine{
    position:absolute;
    width:100px;height:100px;
    opacity:0.5;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0,40 L10,30 L20,40 L30,30 L40,40 L50,30 L60,40 L70,30 L80,40' fill='none' stroke='%2330A060' stroke-width='2'/%3E%3Crect x='15' y='26' width='4' height='4' fill='%2330A060'/%3E%3Crect x='45' y='26' width='4' height='4' fill='%2330A060'/%3E%3C/svg%3E") no-repeat;
    pointer-events:none;
    image-rendering:pixelated;
}

.vine-tl{top:60px;left:20px}
.vine-tr{top:60px;right:20px;transform:scaleX(-1)}

/* Dashboard */
.section-dashboard{padding:60px 16px}

.panel-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
    max-width:800px;width:100%;
}

.pixel-panel{
    border:2px solid var(--gold);
    background:var(--display);
    opacity:0;transform:translateY(20px);
    transition:opacity 0.3s steps(1),transform 0.3s steps(4);
}

.pixel-panel.revealed{opacity:1;transform:translateY(0)}

.panel-titlebar{
    height:24px;
    background:var(--panel);
    border-bottom:2px solid var(--gold);
    padding:0 8px;
    display:flex;align-items:center;justify-content:space-between;
}

.panel-name{
    font-family:'Silkscreen',cursive;
    font-size:0.6rem;
    color:var(--gold);
    letter-spacing:0.05em;
}

.win-btns{display:flex;gap:4px}
.wb{width:6px;height:6px;display:block}
.wb-g{background:var(--emerald)}
.wb-r{background:var(--ruby)}
.wb-y{background:var(--gold)}

.panel-body{
    padding:16px;
    background-image:
        repeating-linear-gradient(0deg,var(--grid-line) 0px,var(--grid-line) 1px,transparent 1px,transparent 16px),
        repeating-linear-gradient(90deg,var(--grid-line) 0px,var(--grid-line) 1px,transparent 1px,transparent 16px);
}

.pixel-text{
    font-size:1rem;
    line-height:1.7;
    color:var(--text-gold);
}

.panel-visual{
    display:flex;align-items:center;justify-content:center;
    min-height:180px;
}

.pixel-gear-art{
    width:80px;height:80px;
    border:2px solid var(--gold);
    border-radius:50%;
    position:relative;
    animation:gear-rotate 10s linear infinite;
}

.pixel-gear-art::before{
    content:'';position:absolute;
    top:50%;left:50%;
    width:20px;height:20px;
    margin:-10px 0 0 -10px;
    border:2px solid var(--gold);
    border-radius:50%;
}

@keyframes gear-rotate{to{transform:rotate(360deg)}}

/* Data bars */
.data-row{
    display:flex;align-items:center;gap:8px;
    margin-bottom:8px;
}

.data-lbl{
    font-family:'Press Start 2P',cursive;
    font-size:0.45rem;
    color:var(--gold);
    width:30px;
}

.pixel-bar{
    flex:1;height:8px;
    background:var(--grid-line);
    border:1px solid var(--dim-gold);
}

.pixel-fill{
    height:100%;
    background:var(--gold);
    image-rendering:pixelated;
}

.fill-amber{background:var(--deep-amber)}
.fill-green{background:var(--emerald)}

.cmd-prompt{
    font-family:'VT323',monospace;
    font-size:1rem;
    color:var(--bright-gold);
    display:block;
    margin-top:1rem;
    animation:blink 1s step-start infinite;
}

/* Greenhouse */
.section-greenhouse{
    flex-direction:column;
    gap:2rem;
}

.greenhouse-bg{
    position:absolute;inset:0;
    opacity:0.15;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0,8 L4,4 L8,8 L12,4 L16,8' fill='none' stroke='%2330A060' stroke-width='1'/%3E%3Crect x='3' y='2' width='2' height='2' fill='%2330A060'/%3E%3C/svg%3E");
    background-size:16px 16px;
    image-rendering:pixelated;
    pointer-events:none;
}

.greenhouse-content{
    max-width:600px;width:100%;
    display:flex;flex-direction:column;gap:1.5rem;
    position:relative;z-index:2;
}

.green-panel{
    background:rgba(8,8,8,0.9);
    border:1px solid var(--emerald);
    padding:16px;
    opacity:0;transform:translateY(16px);
    transition:opacity 0.3s steps(1),transform 0.3s steps(4);
}

.green-panel.revealed{opacity:1;transform:translateY(0)}

.pxflower{
    position:absolute;
    width:8px;height:8px;
    image-rendering:pixelated;
    box-shadow:
        -2px 0 0 var(--gold),
        2px 0 0 var(--gold),
        0 -2px 0 var(--gold),
        0 2px 0 var(--gold),
        0 0 0 var(--bright-gold);
}

.pf1{top:20%;left:15%}
.pf2{top:35%;right:20%}
.pf3{bottom:25%;left:25%}
.pf4{top:50%;right:10%}
.pf5{bottom:15%;right:35%}

/* Shutdown */
.section-shutdown{flex-direction:column;gap:2rem}

.shutdown-content{text-align:center}

.shutdown-line{
    font-family:'Press Start 2P',cursive;
    font-size:0.65rem;
    color:var(--bright-gold);
    letter-spacing:0.05em;
    margin-bottom:0.75rem;
    opacity:0;
    transition:opacity 0.3s steps(1);
}

.shutdown-line.show{opacity:1}

.final-flower{
    width:8px;height:8px;
    margin:0 auto;
    background:var(--bright-gold);
    box-shadow:
        -2px 0 0 var(--gold),
        2px 0 0 var(--gold),
        0 -2px 0 var(--gold),
        0 2px 0 var(--gold);
    animation:flower-blink 0.5s steps(1) 3;
    animation-fill-mode:forwards;
    opacity:0;
}

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

/* Responsive */
@media(max-width:768px){
    .hud-nav{display:none}
    .hud-status{gap:4px}
    .panel-grid{grid-template-columns:1fr}
    .viewport-content{margin:32px 0 48px}
    .vine{display:none}
}

@media(prefers-reduced-motion:reduce){
    .live-dot,.cmd-prompt{animation:none;opacity:1}
    .pixel-gear-art{animation:none}
    .px-bubble{animation:none;display:none}
    .pixel-panel,.green-panel{opacity:1;transform:none;transition:none}
    .boot-line,.boot-title,.shutdown-line{opacity:1;transition:none}
    .final-flower{animation:none;opacity:1}
    body::after{display:none}
}