/* BUCKAZOIDS outer web: 1991 deep-space BBS. original styles. */
@font-face{font-family:bzvga;src:url(bzvga.ttf) format("truetype");font-display:block}
:root{--px:bzvga,"Courier New",monospace;--gold:#ffd23a;--gold2:#f0a000;--cy:#55ffff;--mg:#ff55ff;--gr:#55ff55;--bl:#5555ff;--navy:#0000aa}
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
body{background:#03020a;color:#c8c8d8;font-family:"Courier New",monospace;font-size:14px;-webkit-font-smoothing:none;-moz-osx-font-smoothing:unset}
#space{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;image-rendering:pixelated;image-rendering:crisp-edges;display:block}
main,header,footer,.ticker{position:relative;z-index:2}
#crt{z-index:98;opacity:.75}
a{color:var(--cy)}
.cy{color:var(--cy)}.gold{color:var(--gold)}.green{color:var(--gr)}.cyan{color:var(--cy)}.dim{color:#7a7a90}
.px,.pxs,.pxm{font-family:var(--px);font-size:20px;line-height:24px;letter-spacing:0}
.pxs{font-size:20px;line-height:22px}
.pxm{font-size:30px;line-height:34px}
.big{font-size:30px;line-height:36px}
.tiny{font-size:12px;line-height:1.4;color:#a8a8c0}
.new{display:inline-block;font-family:var(--px);font-size:10px;line-height:12px;padding:2px 4px 1px;background:#ff2020;color:#ffff55;border:1px solid #ffff55;animation:bl 0.8s steps(1) infinite;transform:rotate(-6deg)}

/* top bar */
.topbar{display:flex;align-items:center;gap:18px;padding:6px 16px;background:linear-gradient(#1a1a40,#0a0a20);border-bottom:2px solid #5555ff;box-shadow:0 2px 0 #000,0 0 30px rgba(85,85,255,.25);position:sticky;top:0;z-index:20}
.brand{font-family:var(--px);font-size:30px;line-height:34px;color:var(--gold);text-decoration:none;text-shadow:3px 3px 0 #5a2a00;display:flex;align-items:center;gap:8px}
.bcoin{display:inline-block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0 0 15%,#ffd23a 16% 55%,#c07800 56%);color:#6a3a00;font:bold 20px/30px "Times New Roman",serif;text-align:center;text-shadow:none;box-shadow:0 0 0 2px #6a3a00}
.topnav{display:flex;gap:4px;margin-left:12px;flex-wrap:wrap}
.topnav a{font-family:var(--px);font-size:20px;line-height:22px;color:#fff;text-decoration:none;padding:4px 10px 2px;background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff}
.topnav a:hover{background:#0000aa;color:#ffff55;border-color:#5555ff #000 #000 #5555ff}
.topbar .new{margin-left:auto}
.topplay{font-family:var(--px);font-size:20px;line-height:22px;padding:4px 14px 2px;background:#00aa00;color:#fff;border:2px solid;border-color:#55ff55 #004000 #004000 #55ff55;cursor:pointer;text-shadow:2px 2px 0 #004000}
.topsnd{font-family:var(--px);font-size:20px;line-height:22px;padding:4px 10px 2px;background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;cursor:pointer;white-space:nowrap}
.topsnd:hover{background:#0000aa;color:#ffff55;border-color:#5555ff #000 #000 #5555ff}
.topsnd.off{color:#606060}
.topsnd:active{border-color:#404040 #fff #fff #404040}
.topplay:hover{background:#55ff55;color:#000;text-shadow:none}

/* ticker */
.ticker{background:#000;border-bottom:1px solid #333;overflow:hidden;white-space:nowrap;height:28px}
.tk{display:inline-block;font-family:var(--px);font-size:20px;line-height:28px;color:var(--mg);padding-left:100%;animation:tick 90s linear infinite}
.tk b{color:var(--gold);font-weight:normal}.tk i{color:var(--cy);font-style:normal}
@keyframes tick{to{transform:translateX(-100%)}}

/* hero */
.hero{display:grid;grid-template-columns:200px minmax(0,900px) 200px;gap:22px;justify-content:center;align-items:start;padding:18px 16px 30px}
.herocenter{min-width:0}
.logo-wrap{text-align:center;margin:0 0 14px}
.logo{margin:0;font-family:var(--px);font-weight:normal;font-size:80px;line-height:84px;letter-spacing:0;color:transparent;
 background:linear-gradient(180deg,#fff6b0 0 16%,#ffe04a 16% 32%,#ffc020 32% 50%,#f09000 50% 66%,#c86400 66% 82%,#8a3e00 82%);-webkit-background-clip:text;background-clip:text;
 filter:drop-shadow(5px 5px 0 #3a1400) drop-shadow(0 0 22px rgba(255,170,0,.35))}
.tagline{font-family:var(--px);font-size:20px;line-height:22px;color:var(--cy);text-shadow:2px 2px 0 #003040}
#desk{color:#000;position:relative;inset:auto;display:block;padding:0}
.win{width:100%;height:640px;box-shadow:0 0 0 1px #000,0 0 0 4px rgba(0,0,0,.4),0 24px 80px rgba(0,0,0,.8),0 0 90px rgba(120,80,255,.25)}
.rail{display:flex;flex-direction:column;gap:14px;padding-top:98px}
.panel{position:relative;background:rgba(0,0,30,.82);border:2px solid #5555ff;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 3px #2a2a88,4px 4px 0 #000;padding:12px 12px 10px;text-align:center}
.panel .new{position:absolute;top:-9px;right:-8px}
.panel .tiny{margin-top:6px}
.coinpanel canvas{width:128px;height:128px;image-rendering:pixelated;display:block;margin:2px auto 8px}
.sticker{background:linear-gradient(135deg,#aa00aa,#5500aa);border-color:#ff55ff}
.sticker .pxs{color:#fff}
.badge88{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;width:88px;height:31px;border:1px solid #000;box-shadow:inset 1px 1px #fff,inset -1px -1px #555;font:10px/1 Arial,sans-serif;text-decoration:none;color:#fff;overflow:hidden;vertical-align:middle}
.badge88 b{font-family:var(--px);font-size:10px;font-weight:normal;line-height:12px}
.rail .badge88{align-self:center;transform:scale(1.4);margin:8px 0}
.nsnow{background:linear-gradient(#000080,#0040c0);color:#fff}.nsnow b{color:#ffff55}
.b386{background:#c0c0c0;color:#000}.b386 b{color:#aa0000}
.bvga{background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f);color:#000}.bvga b{color:#fff;text-shadow:1px 1px #000}
.badl{background:#003000;color:#55ff55}.badl b{color:#fff}
.by2k{background:#000;color:#ff5555}.by2k b{color:#ffff55}
.bmail{background:#fff;color:#000;flex-direction:row;gap:6px}.bmail b{color:#0000aa}

/* animated e-mail icon */
.mail{position:relative;width:44px;height:30px;margin:4px auto 2px;background:#f4f4e8;border:2px solid #000;animation:mailb 1.2s steps(2) infinite}
.mail::before,.mail::after{content:"";position:absolute;left:-2px;right:-2px;height:0}
.mail::before{top:-2px;border-left:22px solid transparent;border-right:22px solid transparent;border-top:16px solid #000}
.mail::after{top:-2px;border-left:20px solid transparent;border-right:20px solid transparent;border-top:13px solid #fff;margin:0 2px}
.mail i{position:absolute;right:-10px;top:-10px;width:14px;height:14px;background:#ff2020;border:2px solid #000;border-radius:50%;animation:bl .6s steps(1) infinite}
.mail.sm{width:22px;height:15px;margin:0;border-width:1px;animation:none}
.mail.sm::before{border-left-width:11px;border-right-width:11px;border-top-width:8px;left:-1px;right:-1px;top:-1px}
.mail.sm::after{border-left-width:10px;border-right-width:10px;border-top-width:6px;top:-1px;margin:0}
.mail.sm i{width:7px;height:7px;right:-5px;top:-5px;border-width:1px}
@keyframes mailb{50%{transform:translateY(-3px) rotate(-4deg)}}

/* demo button (Y2K chrome) */
.demo{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:12px 8px 10px;cursor:pointer;border:2px solid #fff;border-radius:14px;color:#002040;
 background:linear-gradient(180deg,#e8fbff 0%,#9fe8ff 40%,#2fa8e0 52%,#62d0ff 80%,#c8f4ff 100%);box-shadow:0 0 0 2px #00406a,0 4px 0 #00203a,0 0 24px rgba(80,220,255,.55);text-shadow:0 1px 0 #fff}
.demo:hover{filter:brightness(1.12) saturate(1.2)}.demo:active{transform:translateY(2px)}
.demo .dl{font-size:28px;line-height:28px;color:#003a70;animation:dlb 1s ease-in-out infinite}
.demo .dtx{font-family:var(--px);font-size:20px;line-height:22px}
.demo .dsub{font-size:11px;color:#00385a}
.demo.wide{margin-top:12px}
@keyframes dlb{50%{transform:translateY(4px)}}
.mailp{padding-top:16px}
.counter{display:inline-flex;gap:2px;margin:6px 0 2px;padding:3px;background:#000;border:2px solid;border-color:#404040 #ddd #ddd #404040}
.counter span{display:inline-block;width:16px;background:linear-gradient(#200 0 48%,#000 48% 52%,#200 52%);color:#ff3a2a;font-family:var(--px);font-size:20px;line-height:24px;text-shadow:0 0 6px #f00}

/* sections */
.sec{max-width:1180px;margin:0 auto;padding:46px 18px 10px}
.sech{text-align:center;margin:0 0 26px;font-weight:normal}
.sech span{display:inline-block;font-family:var(--px);font-size:50px;line-height:56px;color:#fff;padding:8px 26px 4px;background:linear-gradient(#0000aa,#000060);border:3px solid #5555ff;box-shadow:inset 0 0 0 3px #000,inset 0 0 0 5px #55ffff,6px 6px 0 #000;text-shadow:4px 4px 0 #000060}
.bigq{text-align:center;margin:0 auto 34px;max-width:1000px;font-family:var(--px);font-size:40px;line-height:48px;color:#fff;text-shadow:4px 4px 0 #000}
.bigq p{margin:0 0 10px}
.bigq .gold{color:var(--gold);font-size:50px;line-height:58px;text-shadow:5px 5px 0 #5a2a00,0 0 30px rgba(255,190,0,.4)}

/* Sierra-ish dialog panels (cream, blue double border) */
.lore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vga{position:relative;background:#f2efe2;color:#22224a;border:3px solid #fff;box-shadow:0 0 0 2px #50509a,0 0 0 5px #f2efe2,0 0 0 7px #50509a,8px 10px 0 7px rgba(0,0,0,.6);padding:16px 18px 14px;margin:7px}
.vga .vgat{font-family:var(--px);font-size:20px;line-height:22px;color:#fff;background:#50509a;margin:-16px -18px 12px;padding:6px 18px 4px;letter-spacing:1px}
.vga .px{margin:0 0 8px;color:#22224a}
.vga .px.gold{color:#a85a00}
.vga .tiny{color:#4a4a6a;font-size:13px;margin:8px 0 0}
.vga a{color:#0000aa}
.vga .ico{position:absolute;right:14px;top:6px;font-family:var(--px);font-size:20px;line-height:22px;color:#ffd23a}
.vga.wide{max-width:900px;margin:34px auto 7px;text-align:center}
.genesis{margin:44px auto 10px;max-width:920px;background:#e9e4d2;color:#111;border:1px solid #000;box-shadow:8px 8px 0 #000;padding:16px 24px 18px;text-align:center;transform:rotate(-1deg);
 background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px)}
.gtag{font-family:var(--px);font-size:10px;line-height:12px;letter-spacing:2px;color:#900;border-bottom:3px double #000;padding-bottom:6px;margin-bottom:10px}
.ghead{font:bold 34px/1.1 "Times New Roman",Times,serif;letter-spacing:-.5px}
.gsub{font:italic 13px/1.4 "Times New Roman",serif;margin-top:8px;color:#333}

/* timeline */
.tl{list-style:none;margin:0 auto;padding:0;max-width:960px;position:relative}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:repeating-linear-gradient(#ffd23a 0 6px,#a06000 6px 12px);box-shadow:0 0 0 2px #000,0 0 18px rgba(255,200,0,.4)}
.tl li{position:relative;width:50%;padding:0 46px 34px 0;text-align:right}
.tl li:nth-child(even){margin-left:50%;padding:0 0 34px 46px;text-align:left}
.tl li::after{content:"\20bf";position:absolute;top:0;right:-17px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0 0 18%,#ffd23a 19% 55%,#c07800 56%);box-shadow:0 0 0 3px #000,0 0 14px #fa0;color:#6a3a00;font:bold 18px/28px "Times New Roman",serif;text-align:center}
.tl li:nth-child(even)::after{right:auto;left:-17px}
.tl .yr{font-family:var(--px);font-size:30px;line-height:32px;color:var(--gold);text-shadow:3px 3px 0 #5a2a00}
.tl .tc{display:inline-block;margin-top:8px;background:rgba(0,0,40,.85);border:2px solid #5555ff;box-shadow:4px 4px 0 #000;padding:10px 12px;font-size:14px;line-height:1.45;color:#d8d8f0;max-width:400px;text-align:left}
.tl .tc b{color:#fff;font-family:var(--px);font-weight:normal;font-size:20px;line-height:22px;display:block;margin-bottom:4px}
.tl .gap .yr{color:#555}.tl .gap .tc{border-style:dashed;border-color:#444;background:rgba(0,0,0,.6)}
.tl .gap::after{background:#222;color:#666;box-shadow:0 0 0 3px #000}
.tl .now .tc{border-color:#55ff55;box-shadow:4px 4px 0 #000,0 0 22px rgba(85,255,85,.35)}
.tl .now .yr{color:var(--gr);text-shadow:3px 3px 0 #003000;}
.tl .now .yr::after{content:"_";animation:bl 1s steps(1) infinite}

/* screenshots: game-box back */
.boxback{position:relative;background:#000;border:3px solid #aaa;box-shadow:0 0 0 3px #000,0 0 0 6px #555,10px 12px 0 6px rgba(0,0,0,.7);padding:0 26px 26px;overflow:hidden}
.stripes{display:flex;flex-direction:column;margin:0 -26px 0}
.stripes i{display:block;height:6px}
.stripes i:nth-child(1){background:#aa0000}.stripes i:nth-child(2){background:#ff5500}.stripes i:nth-child(3){background:#ffaa00}.stripes i:nth-child(4){background:#ffff55}.stripes i:nth-child(5){background:#00aaaa}.stripes i:nth-child(6){background:#0000aa}
.bbhead{text-align:center;padding:18px 0 14px}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shots figure{margin:0;background:#111;border:2px solid;border-color:#777 #222 #222 #777;padding:6px}
.shots img{display:block;width:100%;aspect-ratio:8/5;image-rendering:pixelated;border:1px solid #000;transition:transform .15s steps(2)}
.shots figure:hover img{transform:scale(1.03)}
.shots figcaption{font-size:12px;color:#ffff55;padding:6px 2px 0;line-height:1.35}
.feats{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px}
.feats li{font-family:var(--px);font-size:20px;line-height:24px;color:#ddd;padding-left:22px;position:relative}
.feats li::before{content:"\25b6";position:absolute;left:0;color:#ff5500;font-size:14px}
.feats b{color:var(--cy);font-weight:normal}

/* order */
.ordergrid{display:grid;grid-template-columns:300px 1fr 320px;gap:26px;align-items:start}
.boxart{position:relative;padding-bottom:96px}
.boxart #boxart{width:100%;max-width:300px;aspect-ratio:4/5;image-rendering:pixelated;display:block;box-shadow:12px 12px 0 #000,0 0 40px rgba(255,170,0,.25);transform:perspective(800px) rotateY(10deg)}
.boxart #floppy{position:absolute;width:128px;height:128px;right:-30px;bottom:-6px;image-rendering:pixelated;transform:rotate(9deg);filter:drop-shadow(6px 6px 0 #000)}
.coupon{background:#fffbe8;color:#222;border:3px dashed #222;padding:14px 18px 18px;box-shadow:8px 8px 0 #000}
.coupon .scis{font-size:12px;color:#666;overflow:hidden;white-space:nowrap;margin:-6px 0 6px}
.coupon .px.gold{color:#aa0000;text-align:center;margin-bottom:10px}
.ord{width:100%;border-collapse:collapse;font-size:14px}
.ord td{padding:6px 4px;border-bottom:1px dotted #999;color:#222}
.ord .pr{text-align:right;font-family:var(--px);font-size:20px;white-space:nowrap}
.ord .tot td{border-bottom:3px double #000;font-weight:bold}
.cb{display:inline-block;width:13px;height:13px;border:2px solid #000;background:#fff;vertical-align:-2px;margin-right:4px;position:relative}
.cb.on::after{content:"X";position:absolute;inset:-3px 0 0 1px;font:bold 12px/1 Arial;color:#aa0000}
.coupon .tiny{color:#555;margin:10px 0 0}
.sysreq{background:#c0c0c0;color:#000;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:0 0 0 1px #000,6px 6px 0 #000}
.srt{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-family:var(--px);font-size:20px;line-height:22px;padding:5px 8px 3px}
.sysreq ul{margin:0;padding:10px 12px 6px 28px;font:12px/1.55 "MS Sans Serif",Tahoma,Arial,sans-serif}
.srn{margin:0 10px 10px;padding:6px 8px;background:#ffffe0;border:1px solid #000;font:bold 11px/1.4 Tahoma,Arial,sans-serif;color:#aa0000}

.bbsrow{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:22px;padding-top:40px}
.uc{background:#111;border-color:#ffff00}
.uc .pxm{color:#ffff55;margin:8px 0}
.ucbar{height:14px;background:repeating-linear-gradient(45deg,#000 0 10px,#ffd800 10px 20px);margin:0 -12px;animation:ucm 1s linear infinite;background-size:28px 28px}
@keyframes ucm{to{background-position:28px 0}}
.btn9{display:inline-block;margin-top:10px;font:12px Tahoma,Arial,sans-serif;color:#000;background:#c0c0c0;padding:4px 14px;text-decoration:none;border:2px solid;border-color:#fff #404040 #404040 #fff}
.btn9:active{border-color:#404040 #fff #fff #404040}

/* footer */
.foot{margin-top:50px;padding:20px 16px 40px;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.85) 30%)}
.webring{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;background:#000;border:2px ridge #888;padding:6px 10px;margin-bottom:16px}
.webring a{font-family:var(--px);font-size:20px;line-height:22px;color:#55ffff;background:#000060;border:1px solid #5555ff;padding:3px 8px 1px;text-decoration:none}
.webring .wr{font-family:var(--px);font-size:20px;line-height:22px;color:#ffff55;padding:0 10px}
.webring .wr .dim{color:#888}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 16px}
.hits{margin-bottom:10px}
.foot p{max-width:860px;margin:6px auto}

/* responsive */
@media (max-width:1400px){.hero{grid-template-columns:minmax(0,900px);}.rail{display:none}}
@media (max-width:1400px) and (min-width:960px){.hero{grid-template-columns:180px minmax(0,900px)}.rail.left{display:flex}}
@media (max-width:980px){.lore-grid,.shots,.feats{grid-template-columns:1fr 1fr}.ordergrid{grid-template-columns:1fr 1fr}.sysreq{grid-column:1/-1}.bbsrow{grid-template-columns:1fr}.topnav{display:none}}
@media (max-width:640px){
 .topbar{gap:8px;padding:6px 10px}.brand{font-size:20px;line-height:24px}.bcoin{width:22px;height:22px;font-size:15px;line-height:22px}
 .hero{padding:12px 8px 10px}
 .logo{font-size:40px;line-height:44px;filter:drop-shadow(3px 3px 0 #3a1400)}
 .tagline{font-size:10px;line-height:12px}
 .win{height:560px}
 .leftframe{display:none}
 .toolbar .opt{display:none}.toolbar button{min-width:0;padding:1px 4px}.nlogo{display:none}
 .dirbtns{flex-wrap:wrap}
 .rail.right{display:flex;padding-top:10px}
 .hero{grid-template-columns:minmax(0,1fr)}
 .rail.right .panel:nth-child(n+3){display:none}
 .sec{padding:30px 12px 6px}
 .sech span{font-size:30px;line-height:34px;padding:6px 14px 3px}
 .bigq{font-size:20px;line-height:26px}.bigq .gold{font-size:30px;line-height:36px}
 .lore-grid,.shots,.feats,.ordergrid{grid-template-columns:1fr}
 .tl::before{left:14px}.tl li,.tl li:nth-child(even){width:auto;margin-left:0;padding:0 0 26px 46px;text-align:left}
 .tl li::after,.tl li:nth-child(even)::after{left:0;right:auto}
 .tl .yr{font-size:20px;line-height:28px}
 .boxback{padding:0 12px 16px}.stripes{margin:0 -12px}
 .ghead{font-size:22px}
 .boxart{max-width:300px;margin:0 auto}
 .big{font-size:20px;line-height:26px}
}

#realcoin{display:block;width:150px;height:150px;margin:4px auto 10px;border-radius:50%;image-rendering:pixelated;filter:drop-shadow(0 0 14px rgba(255,170,40,.45));animation:bzflip 6s ease-in-out infinite}
@keyframes bzflip{0%,100%{transform:rotateY(0) translateY(0)}25%{transform:rotateY(-18deg) translateY(-4px)}75%{transform:rotateY(18deg) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#realcoin{animation:none}}

/* X links */
.topnav a.navx{background:#000;color:#fff;border-color:#888 #222 #222 #888}
.topnav a.navx:hover{background:#0000aa;color:#ffff55}
.bx{background:#000;color:#aaa;border-color:#fff}.bx b{color:#fff;font-size:9px}
.pxs.gold{color:var(--gold)}
.topsnd{position:relative}
.topplay,.topsnd{white-space:nowrap;flex-shrink:0}