/* COGPUNK website styles. Taken from the locked design preview (website\design\cogpunk-preview.html). */
*{box-sizing:border-box}
html,body{margin:0;background:#050805;color:#E4F7D9;font-family:VT323,ui-monospace,monospace}
body{min-height:100vh;overflow-x:hidden}
a{color:#F7FF4D}a:hover{color:#FBFFB0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #FFE14D;outline-offset:2px}
.mcbtn{box-shadow:inset 3px 3px 0 rgba(255,255,255,0.28),inset -3px -3px 0 rgba(0,0,0,0.55)}
.mcbtn:hover{filter:brightness(1.25)}

/* ---------- background ---------- */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;width:4px;height:4px;background:#EFFFD0;animation:twinkle 3s steps(3) infinite}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
#stars{position:absolute;inset:0}
#offbg{position:absolute;inset:-40px}
#cityWrap{position:absolute;left:-40px;right:-40px;top:0;bottom:-8px}
#city{position:absolute;left:0;right:0;bottom:0;height:280px;display:flex;align-items:flex-end;justify-content:center;gap:8px}
.blk{flex:0 0 auto;background:#0B1409;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;padding:10px 8px}
.blk span{height:8px;background:#16240F}
.blk .bwin{animation:winBlink 5s steps(1) infinite}
@keyframes winBlink{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.3}52%{opacity:1}}
#cityline{position:absolute;left:0;right:0;bottom:280px;height:4px;background:#B6FF3B;box-shadow:0 0 22px 4px rgba(182,255,59,0.35)}
#wall{position:absolute;top:0;bottom:0;right:0;width:9%;transition:width 1.8s steps(14);background-color:#2A0306;background-image:linear-gradient(90deg,rgba(0,0,0,0.45) 3px,transparent 3px),linear-gradient(rgba(0,0,0,0.45) 3px,transparent 3px),repeating-linear-gradient(0deg,rgba(255,40,40,0.16) 0px,rgba(255,40,40,0.16) 16px,rgba(120,0,0,0.12) 16px,rgba(120,0,0,0.12) 32px);background-size:16px 16px,16px 16px,100% 32px;box-shadow:inset 30px 0 60px rgba(255,30,30,0.35);animation:edgeStep .9s steps(1) infinite}
@keyframes edgeStep{0%,100%{clip-path:polygon(4% 0,4% 8%,0 8%,0 20%,6% 20%,6% 31%,2% 31%,2% 44%,7% 44%,7% 56%,1% 56%,1% 69%,5% 69%,5% 81%,0 81%,0 92%,4% 92%,4% 100%,100% 100%,100% 0)}50%{clip-path:polygon(1% 0,1% 10%,6% 10%,6% 22%,2% 22%,2% 34%,7% 34%,7% 45%,0 45%,0 58%,5% 58%,5% 70%,2% 70%,2% 83%,6% 83%,6% 94%,1% 94%,1% 100%,100% 100%,100% 0)}}
.hot{position:absolute;width:16px;height:16px;animation:hotPix 1.3s steps(1) infinite}
@keyframes hotPix{0%,100%{opacity:.15}30%{opacity:1}55%{opacity:.35}80%{opacity:.9}}
#lost{display:none;position:absolute;left:0;right:0;top:38%;margin:0;text-align:center;font-family:Silkscreen,sans-serif;font-size:clamp(48px,9vw,120px);line-height:1;color:#FF3B3B;text-shadow:6px 6px 0 #000;animation:lostGlitch 2.4s steps(1) infinite}
@keyframes lostGlitch{0%,100%{transform:none;opacity:.22}10%{transform:translateX(-12px);opacity:.4}12%{transform:translateX(10px)}14%{transform:none;opacity:.22}60%{opacity:.3}}
#shield{position:absolute;top:0;bottom:0;right:9%;width:8px;transition:right 1.8s steps(14)}
.shield-hold{animation:shieldHold 2s steps(4) infinite}
@keyframes shieldHold{0%,100%{opacity:.85}50%{opacity:1}}
.shield-fail{animation:shieldFail 1.1s steps(1) infinite}
@keyframes shieldFail{0%,100%{opacity:1}20%{opacity:.1}24%{opacity:.9}52%{opacity:.2}56%{opacity:1}80%{opacity:0}84%{opacity:.8}}
#sparkwrap{position:absolute;top:0;bottom:0;right:9%;width:0;transition:right 1.8s steps(14)}
.spark{position:absolute;width:6px;height:6px;animation:spark .8s steps(5) infinite}
@keyframes spark{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--sx),var(--sy));opacity:0}}

/* ---------- offline: the end of the world ---------- */
#offbg,#offtop{display:none}
body.offline #offbg,body.offline #offtop{display:block}
body.offline #lost{display:block}
.dumpcol{position:absolute;top:0;bottom:0;overflow:hidden}
.dump{display:flex;flex-direction:column;font-size:18px;line-height:1.3;white-space:pre;animation:dumpUp 9s steps(60) infinite}
@keyframes dumpUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.errwin{position:absolute;width:270px;border:3px solid #000;background:#1A0204;box-shadow:6px 6px 0 rgba(0,0,0,0.6)}
.errwin .eb{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 8px;background:#B30000;border-bottom:3px solid #000;font-family:Silkscreen,sans-serif;font-size:12px;color:#fff}
.errwin .eb i{width:12px;height:12px;background:#000}
.errwin p{margin:0;padding:8px 10px 10px;font-size:21px;line-height:1.15;color:#FFB0A0}
.errpop{opacity:0;animation:errPop 5s steps(1) infinite}
@keyframes errPop{0%,100%{opacity:0;transform:scale(.7)}4%{opacity:1;transform:none}26%{opacity:1;transform:none}27%{opacity:.2;transform:translateX(-8px)}28%{opacity:1;transform:none}40%{opacity:0;transform:scale(.9)}}
.errcas{opacity:0;animation:errCas 6.5s steps(1) infinite}
@keyframes errCas{0%{opacity:0}3%{opacity:1}55%{opacity:1}56%{opacity:0}100%{opacity:0}}
#offtop{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.crt{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,0.35) 0px,rgba(0,0,0,0.35) 2px,transparent 2px,transparent 4px)}
.tear{position:absolute;left:0;right:0;opacity:0;animation:tear 4.5s steps(1) infinite}
@keyframes tear{0%,100%{opacity:0;transform:translateX(0)}2%{opacity:.85;transform:translateX(-60px)}4%{opacity:.85;transform:translateX(40px)}6%{opacity:0;transform:none}}
body.offline #city{filter:grayscale(1) sepia(1) hue-rotate(-50deg) saturate(3) brightness(.6);animation:cityDie 3.7s steps(1) infinite}
@keyframes cityDie{0%,48%,100%{transform:none}50%{transform:translateY(8px) skewX(-3deg)}52%{transform:translateX(-6px)}54%{transform:none}}
body.offline #h1{animation:h1b 3.2s steps(1) infinite}
@keyframes h1b{0%,88%,100%{transform:none;text-shadow:6px 6px 0 #FF3B3B,12px 12px 0 #2A0306}90%{transform:translateX(-8px) skewX(-6deg);text-shadow:-5px 0 0 #FF3B3B,5px 0 0 #B6FF3B}92%{transform:translateX(6px);text-shadow:4px 0 0 #FF3B3B,-4px 0 0 #F7FF4D}94%{transform:none;text-shadow:6px 6px 0 #FF3B3B,12px 12px 0 #2A0306}}

/* ---------- page ---------- */
#content{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:22px 24px 48px;display:flex;flex-direction:column;gap:26px}
body.intro #content{visibility:hidden}
.materialize{animation:materialize .5s steps(4) backwards}
@keyframes materialize{0%{clip-path:inset(0 0 100% 0);filter:brightness(2.5)}25%{clip-path:inset(0 0 70% 0)}50%{clip-path:inset(0 0 40% 0);filter:brightness(1.6)}75%{clip-path:inset(0 0 15% 0)}100%{clip-path:inset(0 0 0 0);filter:none}}
.brand{font-family:Silkscreen,sans-serif;font-size:22px;font-weight:700;color:#B6FF3B;text-shadow:3px 3px 0 #0F2A08}
.hero{display:flex;flex-direction:column;gap:6px;padding-top:18px}
.hero p{margin:0}
.kicker{font-size:24px;color:#F7FF4D}
#h1{margin:0;font-family:Silkscreen,sans-serif;font-size:clamp(48px,8vw,96px);line-height:1;font-weight:700;color:#fff;text-shadow:6px 6px 0 #B6FF3B,12px 12px 0 #0F2A08;overflow-wrap:anywhere}
.lede{font-size:26px;color:#CFE3C2;max-width:760px}
.work{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.term{flex:999 1 620px;min-width:0;border:4px solid #000;background:#030503;box-shadow:inset 4px 4px 0 #3A5228,inset -4px -4px 0 #0A1207,8px 8px 0 rgba(0,0,0,0.6)}
#tbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px;background:#B6FF3B;border-bottom:4px solid #000;font-family:Silkscreen,sans-serif;font-size:14px;color:#000}
#tbar .dots{display:flex;gap:6px}#tbar .dots i{width:14px;height:14px;background:#000}
#tbody{padding:18px 20px;min-height:360px;max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;font-size:24px;line-height:1.25}
#tlines span{display:block;white-space:pre-wrap;animation:lineIn .12s steps(2) both}
#tlines span.still{animation:none}
@keyframes lineIn{from{opacity:0}to{opacity:1}}
.prompt{display:flex;align-items:center;gap:10px;margin-top:8px}
.prompt label{color:#B6FF3B;white-space:nowrap}
#cmd{flex:1 1 auto;min-width:0;min-height:44px;border:none;background:transparent;color:#D9FFB0;font-family:VT323,monospace;font-size:24px;caret-color:#D9FFB0}
.qbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:4px solid #000;background:#0A1107}
.qbtn{min-height:44px;padding:0 14px;border:3px solid #000;background:#142210;color:#D9FFB0;font-family:VT323,monospace;font-size:22px;cursor:pointer}
#modules{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:18px}
#modules:empty{display:none}
.panel{border:4px solid #000;background:#0C150A;box-shadow:inset 4px 4px 0 #3A5228,inset -4px -4px 0 #070D05;padding:18px;display:flex;flex-direction:column;gap:12px}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:3px solid #000;padding-bottom:8px}
.ph span{font-family:Silkscreen,sans-serif;font-size:16px;font-weight:700}
.xbtn{width:44px;height:44px;border:3px solid #000;background:#1F3313;color:#fff;font-family:Silkscreen,sans-serif;font-size:16px;cursor:pointer}
.big{display:flex;align-items:center;justify-content:center;min-height:48px;border:3px solid #000;font-family:Silkscreen,sans-serif;font-size:15px;text-decoration:none;cursor:pointer;background:#1F3313;color:#fff;width:100%}
.big.acid{background:#B6FF3B;color:#0B1400;font-weight:700}
.big.yel{background:#F7FF4D;color:#121400;font-weight:700}
.box{border:3px solid #000;background:#030503;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.box .k{font-size:18px;color:#9DB38A}
.box .v{font-size:22px;color:#F7FF4D;overflow-wrap:anywhere}
.panel p{margin:0;font-size:21px}
.hint{font-size:19px;color:#9DB38A}
.cat{position:relative;display:flex;flex-direction:column;gap:6px}
.cat>b{font-family:Silkscreen,sans-serif;font-size:13px;font-weight:400;color:#F7FF4D}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.modchip{position:static;min-height:44px;padding:0 10px;border:3px solid #000;background:#142210;color:#D9FFB0;font-family:VT323,monospace;font-size:20px;cursor:help;box-shadow:inset 2px 2px 0 rgba(255,255,255,0.18),inset -2px -2px 0 rgba(0,0,0,0.5)}
.modchip:hover,.modchip:focus-visible{background:#B6FF3B;color:#0B1400}
.modtip{display:none;position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;flex-direction:column;text-align:left;border:3px solid #000;background:#050805;box-shadow:inset 3px 3px 0 #3A5228,inset -3px -3px 0 #0A1207,6px 6px 0 rgba(0,0,0,0.7);cursor:default}
.modchip:hover .modtip,.modchip:focus .modtip{display:flex;animation:tipIn .15s steps(3)}
@keyframes tipIn{0%{clip-path:inset(0 0 100% 0)}50%{clip-path:inset(0 0 40% 0)}100%{clip-path:inset(0 0 0 0)}}
.modtip .tb{display:block;padding:3px 10px;background:#B6FF3B;border-bottom:3px solid #000;font-family:Silkscreen,sans-serif;font-size:11px;color:#000}
.modtip .tbody2{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px}
.modtip .tn{font-family:Silkscreen,sans-serif;font-size:15px;font-weight:700;color:#fff}
.modtip .ta{font-size:20px;color:#F7FF4D}
.modtip .td{font-size:20px;line-height:1.15;color:#D9FFB0}
.modtip .tc{font-size:16px;color:#9DB38A}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:20px;color:#9DB38A}
footer .fl{display:flex;align-items:center;gap:12px}

/* ---------- intro ---------- */
#intro{display:none;position:fixed;inset:0;z-index:5;overflow:hidden;background:#030503;color:#D9FFB0}
body.intro #intro{display:block}
#intro .crt{position:absolute;inset:0;pointer-events:none}
#ilines{position:absolute;left:40px;top:32px;display:flex;flex-direction:column;gap:2px;max-width:92vw;padding:14px 18px;font-size:26px;line-height:1.2}
#ilines span{white-space:pre-wrap;animation:lineIn .12s steps(2) both}
#logo{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:30px;pointer-events:none}
#logo.on{display:flex}
#logoBlocks{position:relative;width:656px;max-width:86vw;aspect-ratio:41/7;filter:drop-shadow(8px 8px 0 #0F2A08)}
.pblock{position:absolute;animation:blockIn .3s steps(3) both;box-shadow:inset 2px 2px 0 rgba(255,255,255,0.35),inset -2px -2px 0 rgba(0,0,0,0.45)}
@keyframes blockIn{0%{transform:translateY(-36px);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
#logoSub{font-size:28px;color:#9DB38A}
#welcome{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-family:Silkscreen,sans-serif;font-size:64px;font-weight:700;color:#B6FF3B;text-shadow:6px 6px 0 #000;animation:rflick .5s steps(1) both}
#welcome.on{display:flex}
@keyframes rflick{0%{opacity:0}20%{opacity:1}35%{opacity:.2}50%{opacity:1}100%{opacity:1}}
.ov-out{animation:ovOut .4s steps(5) both}
@keyframes ovOut{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 100% 0)}}
#skip{position:absolute;right:24px;bottom:24px;min-height:44px;padding:0 16px;border:3px solid #000;background:#1F3313;color:#fff;font-family:Silkscreen,sans-serif;font-size:14px;cursor:pointer}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .errpop,.errcas{opacity:1}.tear,.spark{display:none}
}

/* ---------- additions for the real site ---------- */
.step{font-size:19px;line-height:1.2;color:#9DB38A;margin-top:-6px}
.step b{color:#D9FFB0;font-weight:400}
.big[aria-disabled="true"]{background:#142210;color:#9DB38A;cursor:default;filter:none}
a.modchip{display:inline-flex;align-items:center;text-decoration:none}
.modchip:hover .modtip,.modchip:focus .modtip,.modchip:focus-visible .modtip{display:flex;animation:tipIn .15s steps(3)}
.modtip .tl{font-size:16px;color:#F7FF4D}
#replay{font-size:20px}
noscript .lede{color:#F7FF4D}
.step.extra{color:#FFC94D}
.step.extra b{color:#F7FF4D}