@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{--green:#86b96a;--green2:#526f42;--dim:#35452d}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#020302;overflow:hidden}
body{font-family:"Share Tech Mono",Consolas,monospace;color:var(--green);cursor:crosshair}
button,input{font:inherit}
.site{position:relative;width:100vw;height:100vh;min-height:100svh;overflow:hidden;background:#030403;opacity:0;transition:opacity 1.1s ease}
.site.ready{opacity:1}
.art{position:absolute;inset:0;background:linear-gradient(rgba(22,45,17,.16),rgba(5,8,5,.34)),url("assets/site-art-clean.png?v=3.0") center/cover no-repeat;filter:saturate(.72) sepia(.08) contrast(1.08) brightness(.62);transform:scale(1.015)}
.vignette{position:absolute;inset:-10%;background:radial-gradient(circle at 50% 45%,transparent 22%,rgba(0,0,0,.18) 55%,rgba(0,0,0,.82) 100%),linear-gradient(90deg,rgba(0,0,0,.55),transparent 35%,transparent 70%,rgba(0,0,0,.45));pointer-events:none}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.15;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(120,180,90,.12) 3px,transparent 4px);mix-blend-mode:screen}
.noise{position:absolute;inset:-50%;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:noise .18s steps(2) infinite}
.crt-flicker{position:absolute;inset:0;pointer-events:none;background:rgba(160,220,110,.015);animation:flicker 4s infinite}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}
@keyframes flicker{0%,18%,20%,60%,62%,100%{opacity:.12}19%,61%{opacity:.35}}
@keyframes blink{0%,92%,100%{opacity:1}94%,97%{opacity:.25}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

.topbar{position:absolute;top:28px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none;text-shadow:0 0 10px rgba(120,190,90,.25)}
.brand{font-size:20px;letter-spacing:3px}.subbrand{margin-top:7px;font-size:12px;color:var(--green2);letter-spacing:2px}
.clock{text-align:right;font-size:15px;letter-spacing:1px}.clock small{display:block;margin-top:7px;color:var(--green2);font-size:11px}
.clock i,.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#83b768;box-shadow:0 0 8px #83b768;margin-right:6px;animation:pulse 1.8s infinite}

.left-panel{position:absolute;left:42px;top:40%;width:320px;z-index:5;text-shadow:0 0 12px rgba(120,190,90,.2)}
.prompt{font-size:19px;margin-bottom:12px}.welcome{font-size:17px;letter-spacing:1px}.caret{display:inline-block;width:8px;height:16px;background:var(--green);margin-left:5px;vertical-align:-2px;animation:pulse .9s infinite}
.rule{height:1px;background:linear-gradient(90deg,var(--green2),transparent);margin:22px 0}.terminal-copy{display:grid;gap:7px;font-size:11px;color:#536a47;letter-spacing:1px}
.terminal-copy .glow-text{color:#86b96a}

/* Правые карточки меню */
.menu-container{position:absolute;right:7%;top:38%;display:flex;flex-direction:column;gap:14px;z-index:8}
.telegram{min-width:255px;padding:14px 18px;display:flex;align-items:center;gap:14px;color:var(--green);text-decoration:none;border:1px solid rgba(126,170,98,.42);background:rgba(2,7,2,.65);box-shadow:0 0 30px rgba(60,100,40,.1),inset 0 0 20px rgba(100,160,80,.025);backdrop-filter:blur(5px);transition:.25s ease}
.telegram:hover{transform:translateY(-2px) scale(1.02);border-color:var(--green);background:rgba(40,70,30,.22);box-shadow:0 0 30px rgba(100,180,80,.25),inset 0 0 20px rgba(100,180,80,.08)}
.telegram-icon{font-size:24px;text-shadow:0 0 12px rgba(130,190,100,.55)}.telegram:not(.dhost-card) .telegram-icon{transform:rotate(-18deg)}
.telegram-text{display:grid;font-size:14px;letter-spacing:1px;line-height:1.25}.telegram-text small{font-size:9px;color:var(--green2);letter-spacing:2px}.telegram-text b{font-size:11px;font-weight:normal;color:#607b51;margin-top:2px}.arrow{margin-left:auto;font-size:18px}
.telegram:hover .telegram-text b{color:#86b96a}

.status{position:absolute;right:42px;bottom:100px;z-index:5;font-size:12px;line-height:1.9;color:#718b61;text-align:left;text-shadow:0 0 10px rgba(100,170,80,.18)}
.status-title{font-size:10px;letter-spacing:2px;color:var(--green2);margin-bottom:3px}.status b{font-weight:normal;color:var(--green)}.warning{margin-top:7px;color:#526448}

.bottom-left,.bottom-center,.bottom-right{position:absolute;bottom:24px;z-index:5;font-size:10px;letter-spacing:1px;color:#587047}.bottom-left{left:42px}.bottom-center{left:50%;transform:translateX(-50%)}.bottom-right{right:42px}

.cursor-glow{position:fixed;width:90px;height:90px;border-radius:50%;pointer-events:none;z-index:10;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(125,190,95,.16),rgba(125,190,95,0) 70%);mix-blend-mode:screen}
.glitch-text{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);font-size:9px;color:#3e5434;letter-spacing:2px;z-index:5;opacity:.65}

.eye{position:absolute;width:13px;height:8px;z-index:7;pointer-events:none;border-radius:50%;opacity:.85;animation:blink 6s infinite;filter:blur(.15px)}
.eye span{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#f2b86c;box-shadow:0 0 5px #ffbd68,0 0 12px rgba(255,130,50,.6);transform:translate(-50%,-50%)}
.eye-left{left:47.1%;top:39.8%}.eye-right{left:52.5%;top:39.8%}

.boot{position:fixed;inset:0;z-index:100;background:#020302;display:grid;place-items:center;color:var(--green);transition:opacity .8s ease,visibility .8s ease}.boot.done{opacity:0;visibility:hidden}
.boot-box{width:min(520px,82vw);font-size:12px;letter-spacing:1px}.boot-title{font-size:19px;letter-spacing:4px;margin-bottom:26px}.boot-line{color:#587047;margin:9px 0}.progress{height:4px;border:1px solid #31432a;margin-top:18px}.progress span{display:block;width:0;height:100%;background:var(--green);box-shadow:0 0 12px rgba(120,190,90,.7);transition:width .12s linear}.boot-percent{text-align:right;margin-top:7px;color:#526a46}

.sound-toggle{position:absolute;left:42px;bottom:47px;z-index:9;background:transparent;border:0;color:#587047;font:inherit;font-size:10px;letter-spacing:1px;padding:4px;cursor:pointer}.sound-toggle:hover{color:var(--green)}

.terminal{position:absolute;left:50%;bottom:42px;transform:translate(-50%,110%);width:min(720px,calc(100vw - 36px));z-index:30;background:rgba(2,8,2,.94);border:1px solid rgba(126,170,98,.55);box-shadow:0 0 45px rgba(60,110,40,.2);backdrop-filter:blur(8px);transition:transform .35s ease,opacity .35s ease;opacity:0;pointer-events:none}
.terminal.open{transform:translate(-50%,0);opacity:1;pointer-events:auto}.terminal-head{display:flex;justify-content:space-between;padding:10px 13px;border-bottom:1px solid #263623;color:#7eaa63;font-size:11px}.terminal-head button{border:0;background:none;color:#7eaa63;font-size:20px;cursor:pointer}
.terminal-output{height:190px;overflow:auto;padding:14px;font-size:12px;line-height:1.8;color:#6f925c}.terminal-output .cmd{color:#9ac27e}.terminal-output a{color:var(--green);text-decoration:underline}
.terminal-input-row{display:flex;gap:9px;padding:11px 13px;border-top:1px solid #263623;font-size:12px}.terminal-input-row span{white-space:nowrap;color:#587047}.terminal-input-row input{width:100%;background:none;border:0;outline:0;color:var(--green)}

.idle-message{position:absolute;left:50%;top:17%;transform:translateX(-50%);z-index:25;color:#9bc17e;font-size:12px;letter-spacing:3px;text-shadow:0 0 12px rgba(130,190,100,.5);opacity:0;transition:opacity .5s;pointer-events:none}.idle-message.show{opacity:1}
.flash{position:fixed;inset:0;background:rgba(150,220,100,.08);opacity:0;z-index:99;pointer-events:none}.flash.on{animation:flash .1s linear}
@keyframes flash{0%{opacity:1}100%{opacity:0}}

@media(max-width:800px){
 .topbar{top:18px;left:18px;right:18px}.brand{font-size:14px;letter-spacing:2px}.subbrand{font-size:8px}.clock{font-size:11px}.clock small{font-size:8px}
 .left-panel{left:18px;top:auto;bottom:105px;width:230px}.welcome{font-size:12px}.terminal-copy{font-size:8px}
 .menu-container{right:18px;top:auto;bottom:150px;width:230px}
 .telegram{min-width:0;width:100%;padding:12px}
 .status{right:18px;bottom:78px;font-size:9px}.bottom-left,.bottom-center,.bottom-right{font-size:7px;bottom:16px}.bottom-left{left:18px}.bottom-right{right:18px}.bottom-center{display:none}
 .eye-left{left:46.5%;top:40.4%}.eye-right{left:52.9%;top:40.4%}.sound-toggle{left:18px;bottom:45px}
}
@media(max-width:520px){
 .left-panel,.status{display:none}
 .menu-container{bottom:90px;left:50%;right:auto;transform:translateX(-50%);width:230px}
 .telegram:hover{transform:translateY(-2px) scale(1.02)}
 .bottom-left{display:none}.bottom-right{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}.sound-toggle{left:50%;transform:translateX(-50%);bottom:68px}
 .eye-left{left:46%;top:40%}.eye-right{left:53%;top:40%}
}