@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;800&display=swap');
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07100d;color:#eef8ed;font-family:Inter,Arial,sans-serif}body{min-height:100vh;overflow-x:hidden}
.sky{position:fixed;inset:0;background:radial-gradient(circle at 50% 20%,#16342c 0,#091713 42%,#040807 80%);z-index:0}.stars{position:fixed;inset:0;opacity:.38;background-image:radial-gradient(#a9ffd2 1px,transparent 1px);background-size:53px 53px;z-index:0;animation:drift 25s linear infinite}.mountains{position:fixed;left:-5%;right:-5%;bottom:16vh;height:34vh;background:linear-gradient(135deg,transparent 35%,#10231c 35% 55%,transparent 55%) 0 0/280px 220px;opacity:.72;z-index:0}.ground{position:fixed;left:0;right:0;bottom:0;height:18vh;background:linear-gradient(#173f25 0 12px,#17251d 12px 28px,#101713 28px);box-shadow:0 -5px 25px #39ff7550;z-index:0}
.screen{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px}.brand{text-align:center;margin-bottom:26px}.eyebrow{font:10px 'Press Start 2P';letter-spacing:3px;color:#65f28d}.brand h1,header h1{font:clamp(34px,7vw,72px) 'Press Start 2P';margin:12px 0;text-shadow:0 6px #173c24,0 0 32px #49ff7a55}.brand p{color:#b5c7bd}
.creeper-wrap{text-align:center}.creeper{position:relative;width:270px;height:270px;background:linear-gradient(135deg,#55c84f,#2c9f3f);border:8px solid #183e23;box-shadow:0 0 0 4px #6ce16c,0 18px 60px #00ff5940;image-rendering:pixelated;transition:.25s}.creeper:before{content:"";position:absolute;inset:0;opacity:.22;background:repeating-linear-gradient(45deg,#153d20 0 18px,transparent 18px 38px)}
.eye{position:absolute;top:58px;width:58px;height:58px;background:#07100d;z-index:2}.e1{left:45px}.e2{right:45px}.mouth{position:absolute;z-index:3;left:42px;right:42px;top:143px;height:62px;background:#07100d;display:flex;align-items:center;padding:9px}.mouth:after,.mouth:before{content:"";position:absolute;top:54px;width:42px;height:38px;background:#07100d}.mouth:before{left:0}.mouth:after{right:0}.mouth input{width:125px;height:40px;border:0;outline:0;background:#13231a;color:white;padding:0 10px;font:15px 'Press Start 2P';letter-spacing:2px}.mouth button{height:40px;width:40px;border:0;background:#60d85d;color:#07100d;font-weight:900;cursor:pointer}.creeper:focus-within{filter:brightness(1.12);box-shadow:0 0 0 4px #8cff88,0 0 75px #42ff6c80}.creeper.bad{animation:shake .32s}.hint{margin-top:30px;font:8px 'Press Start 2P';color:#83a28e;letter-spacing:1px}
.hidden{display:none!important}main{position:relative;z-index:2;width:min(1080px,92vw);margin:auto;padding:55px 0 35px}header{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}header h1{font-size:clamp(25px,4vw,46px);margin:10px 0 0}.tiny,.copy{font:8px 'Press Start 2P';background:#15241b;color:#a6cbb2;border:2px solid #36513e;padding:12px;cursor:pointer}
.panel{border:2px solid #456a50;background:linear-gradient(135deg,#101a15ee,#18251dee);box-shadow:0 16px 60px #0009,inset 0 0 0 4px #09100c;padding:35px}.hero{display:grid;grid-template-columns:1fr 270px;gap:32px;align-items:center}.status-line{font:10px 'Press Start 2P';color:#a9c4b1}.lamp{display:inline-block;width:13px;height:13px;background:#888;margin-right:12px;box-shadow:0 0 12px #888}.lamp.online{background:#57f778;box-shadow:0 0 18px #57f778}.lamp.busy{background:#f4c84b;box-shadow:0 0 18px #f4c84b}.server-info h2{font:clamp(18px,3vw,32px) 'Press Start 2P';margin:24px 0 18px}.stats{display:flex;gap:32px;margin-top:28px;color:#7d9d88;font:8px 'Press Start 2P';line-height:1.8}.stats b{color:#eaf7ed}
.start{height:150px;border:4px solid #1c642f;outline:4px solid #0b2613;background:linear-gradient(#58d75b,#36a84b);color:#07120a;text-shadow:0 1px #9aff9c;box-shadow:inset 0 -9px #237d36,0 12px 0 #071d0d,0 18px 35px #0009;cursor:pointer;font-family:'Press Start 2P';transition:.12s}.start:hover:not(:disabled){transform:translateY(-3px);filter:brightness(1.12)}.start:active:not(:disabled){transform:translateY(7px);box-shadow:inset 0 -3px #237d36,0 4px 0 #071d0d}.start:disabled{filter:grayscale(.65);cursor:not-allowed}.start span{display:block;font-size:30px;margin-bottom:12px}.start strong{display:block;font-size:16px}.start small{font-size:8px}
.progress{margin:20px 0;text-align:center;font:8px 'Press Start 2P';color:#b6c9bc}.bar{height:18px;background:#09100c;border:2px solid #3d5d47;padding:3px;margin-bottom:12px}.bar i{display:block;height:100%;width:35%;background:#50d763;animation:load 1.5s ease-in-out infinite}
.guides{margin-top:60px}.section-title{display:flex;align-items:center;gap:18px;margin-bottom:22px}.section-title span{height:1px;background:#355542;flex:1}.section-title h3{font:10px 'Press Start 2P';color:#75e995;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{text-decoration:none;color:#eaf7ed;background:#101a15e8;border:2px solid #354b3d;box-shadow:inset 0 0 0 3px #080e0b;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;transition:.18s}.card:hover{transform:translateY(-5px);border-color:#66db83;box-shadow:inset 0 0 0 3px #080e0b,0 12px 35px #0008}.card .icon{font-size:30px;color:#6cf18d}.card b{display:block;font:11px 'Press Start 2P';margin:14px 0 8px}.card small{color:#8ca397}.card em{font:7px 'Press Start 2P';font-style:normal;color:#68db87;margin-top:18px}footer{text-align:center;margin-top:48px;color:#557060;font-size:11px}footer span{color:#5bea7e}
#toast{position:fixed;z-index:9;bottom:25px;left:50%;transform:translate(-50%,120px);background:#111b15;border:2px solid #4f7b5c;padding:14px 20px;font:8px 'Press Start 2P';transition:.25s}#toast.show{transform:translate(-50%,0)}
@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}@keyframes load{0%{transform:translateX(0)}50%{transform:translateX(170%)}100%{transform:translateX(0)}}@keyframes drift{to{background-position:53px 53px}}
@media(max-width:760px){main{padding-top:28px}.hero{grid-template-columns:1fr}.start{height:120px}.cards{grid-template-columns:1fr}.stats{flex-direction:column;gap:8px}.panel{padding:24px}.creeper{width:230px;height:230px}.eye{top:48px;width:50px;height:50px}.e1{left:38px}.e2{right:38px}.mouth{left:34px;right:34px;top:123px}.section-title h3{font-size:7px}}