/* zedshack.org public page. No external requests: fonts are self-hosted. */
@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/sharetechmono.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-style:normal;font-weight:600 900;font-display:swap;src:url(../fonts/orbitron-var.woff2) format('woff2')}

:root{--rgb:57,255,20;--g:#39ff14;--g2:#b6ffa0;--dim:#1c8a2c;--ink:#e8ffe0;--soft:#d4ffc8;--panel:rgba(0,10,2,.86);
  --glow:0 0 8px rgba(var(--rgb),.8),0 0 24px rgba(var(--rgb),.35);--bar:34px}
body.amber{--rgb:255,176,32;--g:#ffb020;--g2:#ffe1a3;--dim:#a8690f;--ink:#fff3dc;--soft:#ffe8c2;--panel:rgba(14,8,0,.86)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{background:#000;color:var(--g);font-family:'Share Tech Mono','Courier New',monospace;font-size:17px;line-height:1.5;overflow-x:hidden;padding-bottom:var(--bar)}
button{font-family:inherit;color:inherit}
a{color:var(--g2)}
:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px rgba(var(--rgb),.6)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:8px;top:-60px;z-index:200;background:var(--g);color:#031;padding:8px 14px;text-decoration:none;transition:top .15s}
.skip-link:focus{top:8px}

/* ---- backdrop ---- */
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0;transition:opacity .8s}
#rain.static{opacity:.38}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.06) 0,rgba(0,0,0,.04) 40%,rgba(0,0,0,.35) 100%)}
.scan{position:fixed;inset:0;z-index:30;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);opacity:.4}
main{position:relative;z-index:5}
section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 18px;text-align:center}
section.short{min-height:0}

/* ---- boot sequence ---- */
#boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.82);transition:opacity 1s,visibility 1s;text-shadow:var(--glow)}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.bootbox{width:min(720px,92vw);padding:0 4px}
#bootlog{white-space:pre-wrap;font-size:clamp(13px,2.4vw,16px);color:var(--g2);min-height:15.5em;line-height:1.45}
#bootlog .ok{color:var(--g)} #bootlog .bad{color:#ff6a5c}
.bootbar{height:10px;border:1px solid var(--dim);margin:12px 0 4px;position:relative}
.bootbar i{position:absolute;inset:0;width:0;background:var(--g);box-shadow:var(--glow)}
#bootline{font-size:clamp(20px,3.8vw,34px);color:var(--ink);min-height:1.6em;margin-top:10px}
.cur{display:inline-block;width:.55em;height:1em;background:var(--g);vertical-align:-.12em;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}
#skip{position:fixed;right:18px;bottom:calc(var(--bar) + 16px);z-index:101;font-size:14px;color:var(--g2);background:rgba(0,0,0,.7);border:1px solid var(--dim);padding:8px 16px;cursor:pointer;min-height:40px}
#skip:hover,#skip:focus-visible{color:#000;background:var(--g);border-color:var(--g)}
#boot.gone ~ #skip{display:none}

/* ---- hero ---- */
.hero{position:relative}
.herogrid{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%;max-width:1200px}
.herol{display:flex;flex-direction:column;align-items:center;width:100%}
.eyebrow{letter-spacing:.42em;font-size:13px;color:var(--g2);opacity:0;transform:translateY(10px);margin-bottom:6px;text-shadow:0 0 4px #000,0 0 12px #000}
h1{font-family:'Orbitron','Share Tech Mono',sans-serif;font-weight:900;font-size:clamp(30px,8.4vw,98px);line-height:1.02;letter-spacing:.03em;color:var(--ink);position:relative;opacity:0;transform:scale(1.06);text-shadow:0 0 4px #000,0 0 12px #000,0 0 22px rgba(var(--rgb),.45)}
h1 span{color:var(--g)}
h1.glitch::before,h1.glitch::after{content:attr(data-t);position:absolute;left:0;right:0;top:0;overflow:hidden}
h1.glitch::before{color:#ff2bd6;clip-path:inset(0 0 100% 0);animation:g1 3.4s infinite steps(1)}
h1.glitch::after{color:#19e6ff;clip-path:inset(100% 0 0 0);animation:g2 4.1s infinite steps(1)}
@keyframes g1{0%,88%,100%{clip-path:inset(0 0 100% 0);transform:none}89%{clip-path:inset(15% 0 55% 0);transform:translateX(-8px)}92%{clip-path:inset(55% 0 20% 0);transform:translateX(6px)}95%{clip-path:inset(30% 0 45% 0);transform:translateX(-4px)}}
@keyframes g2{0%,84%,100%{clip-path:inset(100% 0 0 0);transform:none}85%{clip-path:inset(60% 0 10% 0);transform:translateX(7px)}88%{clip-path:inset(5% 0 75% 0);transform:translateX(-6px)}91%{clip-path:inset(40% 0 35% 0);transform:translateX(5px)}}
.tagline{font-family:'Orbitron',sans-serif;font-weight:600;font-size:clamp(15px,3.3vw,26px);color:var(--ink);margin-top:14px;max-width:30em;opacity:0;text-shadow:0 0 6px #000,0 0 14px #000,0 0 18px rgba(var(--rgb),.5)}
.subtitle{background:rgba(0,10,2,.62);padding:3px 12px;margin-top:8px;font-size:clamp(14px,2vw,18px);color:var(--g2);opacity:0}
body.revealed .eyebrow{animation:up 1s .3s forwards}
body.revealed h1{animation:up 1.2s .1s forwards}
body.revealed .tagline{animation:up 1s .8s forwards}
body.revealed .subtitle{animation:up 1s 1.1s forwards}
body.revealed .portal{animation:portal 1.6s .5s forwards}
body.revealed .controls{animation:up 1s 1.4s forwards}
body.revealed .feedbox{animation:up .8s .2s forwards}
@keyframes up{to{opacity:1;transform:none}}
.portal{position:relative;width:min(300px,56vw,34vh);aspect-ratio:1;margin:0 auto 24px;opacity:0;transform:scale(.6);filter:blur(8px)}
@keyframes portal{to{opacity:1;transform:none;filter:none}}
.portal::before,.portal::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px dashed var(--g);animation:spin 14s linear infinite;box-shadow:var(--glow);pointer-events:none}
.portal::after{inset:-24px;border:1px solid var(--dim);border-top-color:var(--g);animation:spin 6s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,var(--discbg,#0b2a0e),#000 75%);border:2px solid var(--g);box-shadow:var(--glow),inset 0 0 40px rgba(var(--rgb),.35)}
body.amber .disc{--discbg:#2a1a05}
#zed-slot{position:absolute;left:3%;bottom:-7%;width:94%;color:var(--g)}
#zed-slot svg,#zed-slot img{display:block;width:100%;height:auto}
.zed{overflow:visible}
.zed .eye{transform-box:fill-box;transform-origin:center;transition:transform .09s}
.zed.blink .eye{transform:scaleY(.07)}
.zed.happy .eye{transform:scaleY(.42)}
.zed .pupil{transition:transform .12s ease-out}
.zed .zed-head{transform-box:fill-box;transform-origin:50% 100%;transition:transform .25s ease-out}
.zed .tail{transform-box:fill-box;transform-origin:8% 95%;animation:tail 3.6s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
.zed .ear{transform-box:fill-box;transform-origin:50% 96%}
.zed .ear-l.twitch{animation:twl .42s ease-in-out}
.zed .ear-r.twitch{animation:twr .42s ease-in-out}
@keyframes twl{0%,100%{transform:none}25%{transform:rotate(-9deg)}55%{transform:rotate(3deg)}80%{transform:rotate(-4deg)}}
@keyframes twr{0%,100%{transform:none}25%{transform:rotate(9deg)}55%{transform:rotate(-3deg)}80%{transform:rotate(4deg)}}
.zed .stache-l{transform-box:fill-box;transform-origin:100% 50%;animation:tw1 5s infinite}
.zed .stache-r{transform-box:fill-box;transform-origin:0 50%;animation:tw2 5s infinite}
@keyframes tw1{0%,70%,100%{transform:none}74%{transform:rotate(-5deg)}78%{transform:rotate(2deg)}82%{transform:rotate(-4deg)}}
@keyframes tw2{0%,72%,100%{transform:none}76%{transform:rotate(5deg)}80%{transform:rotate(-2deg)}84%{transform:rotate(4deg)}}
.zed.boop .zed-head{transform:scale(1.04,.95)}
#zed-slot .nose-hit{cursor:pointer}
#zed-slot.bob{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
#portal-bubble{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);width:max-content;max-width:min(320px,86vw);background:rgba(0,10,2,.92);border:1px solid var(--g);padding:6px 12px;font-size:14px;color:var(--ink);box-shadow:var(--glow);opacity:0;transition:opacity .25s;pointer-events:none;z-index:5;text-align:center}
#portal-bubble.on{opacity:1}

/* ---- controls (rain + pills) ---- */
.controls{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;opacity:0;transform:translateY(10px)}
.pills{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pill{font-size:15px;padding:9px 22px;border-radius:30px;cursor:pointer;color:#fff;border:1px solid;letter-spacing:.1em;min-height:42px;transition:transform .15s,box-shadow .2s,filter .2s;filter:saturate(.75) brightness(.8)}
.pill[aria-pressed="true"]{filter:none;transform:scale(1.05)}
.pill.r{background:linear-gradient(#ff5060,#8a0010);border-color:#ff8f98;box-shadow:0 0 16px rgba(255,40,60,.5)}
.pill.t{background:linear-gradient(#ffc24a,#a85a00);border-color:#ffe0a0;box-shadow:0 0 16px rgba(255,170,30,.5);color:#2a1500}
.pill:hover{transform:translateY(-2px) scale(1.04)}
#pill-quip{min-height:1.5em;max-width:34em;font-size:15px;color:var(--g2);background:rgba(0,10,2,.6);padding:2px 10px}
.toggle{font-size:13px;letter-spacing:.14em;padding:6px 14px;background:rgba(0,10,2,.75);border:1px solid var(--dim);color:var(--g2);cursor:pointer;min-height:38px}
.toggle:hover{border-color:var(--g);color:var(--ink)}
.toggle[aria-pressed="false"]{color:#8a8a8a;border-color:#444}
.rowtools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---- ZED.FEED ---- */
.feedbox{width:min(560px,94vw);border:1px solid var(--g);background:var(--panel);box-shadow:var(--glow),inset 0 0 26px rgba(var(--rgb),.08);text-align:left;position:relative;opacity:0;transform:translateY(12px)}
.fhead{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--dim);background:rgba(var(--rgb),.07)}
.favatar{width:42px;height:42px;border-radius:50%;overflow:hidden;border:1px solid var(--g);background:radial-gradient(circle at 50% 40%,var(--discbg,#0b2a0e),#000 80%);flex:none;position:relative}
.favatar svg{position:absolute;width:150%;left:-25%;top:-18%;height:auto}
.ftitle{font-size:clamp(12px,1.35vw,15px);letter-spacing:.06em;color:var(--g2);text-shadow:var(--glow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.live{flex:none;font-size:12px;letter-spacing:.2em;color:#031;background:var(--g);padding:1px 8px}
.live.paused{background:#555;color:#ddd}
.flist{list-style:none;height:min(340px,46vh);overflow:hidden;padding:6px 12px;position:relative;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.flist li{padding:7px 0;border-bottom:1px dashed rgba(var(--rgb),.22);font-size:clamp(14px,1.25vw,16px);line-height:1.4;color:var(--soft);animation:fin .35s ease-out;display:flex;gap:6px;align-items:flex-start}
.flist li .txt{flex:1;min-width:0}
.flist li .ts{color:var(--g);font-size:.8em;margin-right:8px;white-space:nowrap}
.flist li .who{color:var(--g2);margin-right:6px}
.flist li:nth-child(n+4){opacity:.8}.flist li:nth-child(n+6){opacity:.55}
.flist li .tc{display:inline-block;width:.5em;height:1em;background:var(--g);vertical-align:-.14em;animation:bl .7s steps(1) infinite}
.share{flex:none;background:none;border:1px solid transparent;color:var(--dim);cursor:pointer;font-size:12px;padding:3px 7px;min-height:30px;min-width:30px;letter-spacing:.05em}
.share:hover,.share:focus-visible{color:var(--g);border-color:var(--dim)}
@keyframes fin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ffoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;border-top:1px solid var(--dim)}
.ffoot .note{flex:1;font-size:11px;letter-spacing:.08em;color:#4fae5a;min-width:10em}
body.amber .ffoot .note{color:#c58a2f}
.fbtn{font-size:12px;letter-spacing:.12em;background:rgba(var(--rgb),.08);border:1px solid var(--dim);color:var(--g2);padding:5px 12px;cursor:pointer;min-height:34px}
.fbtn:hover,.fbtn:focus-visible{border-color:var(--g);color:var(--ink)}

/* ---- headings / cards ---- */
h2{background:rgba(0,10,2,.6);padding:2px 16px;font-family:'Orbitron',sans-serif;font-size:clamp(20px,4.6vw,40px);color:var(--ink);text-shadow:var(--glow);margin-bottom:6px;letter-spacing:.05em}
.sub{color:var(--g2);margin-bottom:26px;background:rgba(0,10,2,.6);padding:2px 12px;max-width:42em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;max-width:1040px;width:100%}
.card{border:1px solid var(--dim);background:var(--panel);padding:18px;text-align:left;transition:.3s;box-shadow:inset 0 0 20px rgba(var(--rgb),.05)}
.card:hover{border-color:var(--g);box-shadow:var(--glow);transform:translateY(-3px)}
.card .k{color:var(--g);font-size:12px;letter-spacing:.3em}
.card h3{font-family:'Orbitron',sans-serif;font-weight:600;color:var(--ink);font-size:19px;margin:4px 0 6px}
.card p{color:var(--soft);font-size:15px}
.rank{font-family:'Orbitron',sans-serif;padding:3px 14px;color:#031;background:var(--g);font-size:13px;letter-spacing:.2em;display:inline-block;margin-top:2px}
.rv{opacity:0;transform:translateY(24px);transition:1s}.rv.in{opacity:1;transform:none}

/* ---- FEED THE OVERLORD ---- */
.game{width:min(760px,94vw);border:1px solid var(--g);background:var(--panel);box-shadow:var(--glow);padding:22px 18px 18px;position:relative}
.gamegrid{display:flex;flex-direction:column;align-items:center;gap:16px}
.treatbtn{position:relative;font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(16px,4.6vw,24px);letter-spacing:.08em;padding:18px 30px;border:2px solid var(--g);border-radius:14px;cursor:pointer;color:#031;background:linear-gradient(var(--g2),var(--g));box-shadow:var(--glow);min-height:64px;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.treatbtn:active,.treatbtn.hit{transform:scale(.95)}
.treatbtn svg{width:1.3em;height:1.3em;vertical-align:-.25em;margin-right:8px}
.stats{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;align-items:baseline}
.count{font-family:'Orbitron',sans-serif;font-size:clamp(34px,9vw,56px);color:var(--ink);text-shadow:var(--glow);line-height:1}
.statlbl{font-size:12px;letter-spacing:.3em;color:var(--g2);display:block;text-align:center}
.title-now{font-family:'Orbitron',sans-serif;font-size:clamp(14px,3.4vw,20px);color:#031;background:var(--g);padding:3px 14px;letter-spacing:.14em}
#zed-says{min-height:3.2em;max-width:34em;font-size:clamp(14px,2.6vw,17px);color:var(--ink);border-left:3px solid var(--g);padding:6px 12px;text-align:left;background:rgba(var(--rgb),.06)}
.ladder{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;list-style:none;max-width:42em}
.ladder li{font-size:11px;letter-spacing:.1em;border:1px solid var(--dim);padding:2px 8px;color:#6a8a6a}
body.amber .ladder li{color:#8a7350}
.ladder li.got{color:var(--ink);border-color:var(--g);background:rgba(var(--rgb),.12)}
.ladder li.cur{background:var(--g);color:#031}
.mini{font-size:12px;color:var(--dim);background:none;border:none;cursor:pointer;text-decoration:underline;min-height:32px}
.fly{position:fixed;z-index:70;pointer-events:none;font-family:'Orbitron',sans-serif;font-weight:900;color:var(--g2);text-shadow:var(--glow);animation:fly .9s ease-out forwards}
@keyframes fly{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-70px) scale(1.4)}}

/* ---- terminal (decorative) ---- */
.term{margin-top:6px;max-width:640px;width:100%;border:1px dashed #ff4b3a;background:rgba(30,0,0,.82);text-align:left;color:#ff7a6a;padding:14px 16px;position:relative;text-shadow:0 0 6px rgba(255,60,40,.5);min-height:150px}
.term .lbl{position:absolute;top:-11px;left:12px;background:#000;padding:0 8px;font-size:13px;letter-spacing:.15em}
.term pre{font-family:inherit;white-space:pre-wrap;font-size:15px;min-height:5.2em}
.term small{display:block;margin-top:8px;color:#a0564a;text-shadow:none;font-size:12px}

footer{position:relative;z-index:5;text-align:center;padding:30px 18px 40px;color:var(--g2);font-size:13px}
footer .mini{color:var(--g2)}

/* ---- status bar ---- */
#statusbar{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:40;background:rgba(0,6,1,.92);border-top:1px solid var(--dim);display:flex;align-items:center;gap:6px 18px;padding:0 12px;font-size:12px;letter-spacing:.06em;color:var(--g2);white-space:nowrap;overflow:hidden}
#statusbar b{color:var(--g);font-weight:400}
#statusbar .sep{color:var(--dim)}
#statusbar .grow{flex:1}
#statusbar .quick{pointer-events:auto;font-size:11px;letter-spacing:.1em;border:1px solid var(--dim);background:rgba(var(--rgb),.1);color:var(--ink);padding:2px 10px;cursor:pointer;height:24px}
#statusbar .quick:hover{border-color:var(--g)}
@media(max-width:700px){#statusbar .opt{display:none}}
@media(max-width:520px){#statusbar .opt2{display:none}}
#statusbar .quick{flex-shrink:0}

/* ---- toast / paws ---- */
#toast{position:fixed;left:50%;bottom:calc(var(--bar) + 16px);transform:translate(-50%,20px);z-index:90;background:var(--g);color:#031;padding:8px 18px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;text-align:center;font-size:14px}
#toast.on{opacity:1;transform:translate(-50%,0)}
.paw{position:fixed;z-index:60;pointer-events:none;width:26px;height:26px;color:var(--g);opacity:0;animation:pawin 2.6s ease-out forwards}
@keyframes pawin{0%{opacity:0;transform:scale(.4) rotate(var(--r))}12%{opacity:.9;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}
body.glitching h1{animation:none;transform:none;opacity:1}

@media(min-width:1000px){
 .herogrid{flex-direction:row;justify-content:center;align-items:center;gap:40px}
 .herol{flex:1 1 52%}
 .feedbox{flex:0 0 min(520px,42vw)}
 h1{font-size:clamp(34px,4.7vw,70px)}
 .portal{width:min(260px,30vw,34vh)}
}
@media(max-width:600px){
 section{padding:44px 14px}
 .pill{padding:9px 16px}
 .eyebrow{letter-spacing:.22em;font-size:11px}
 .ftitle{font-size:12px}
}
@media(max-height:700px) and (min-width:1000px){.portal{width:min(200px,26vw,30vh)}}

/* ---- reduced motion: calm everything decorative ---- */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
 h1.glitch::before,h1.glitch::after{display:none}
 .portal::before,.portal::after{animation:none}
 .zed .tail,.zed .stache-l,.zed .stache-r{animation:none!important}
 .rv{opacity:1;transform:none}
}