/* ========================================================================= IDLE AVENGERS — RETRO MODE 1994 called. It wants its S.H.I.E.L.D. terminal back. Everything below only applies when . ========================================================================= */ .retro, .retro body{background:#000!important} .retro{ --txt:#33ff66; --dim:#1fa544; --cyan:#33ff66; --gold:#b6ff5e; --red:#ff5f5f; --green:#33ff66; --purple:#8cff9e; --blue:#33ff66; --panel:#000; --panel-2:#000; --line:#1c8a3c; color:var(--txt); background:#000!important; font-family:ui-monospace,"Courier New",Courier,monospace!important; text-shadow:0 0 4px rgba(51,255,102,.55); } .retro *{ font-family:ui-monospace,"Courier New",Courier,monospace!important; letter-spacing:0!important; border-radius:0!important; box-shadow:none!important; text-transform:none; } .retro::before{ /* kill halftone */ display:none } /* --------------------------------------------------------- CRT overlay */ .retro::after{ content:"";position:fixed;inset:0;z-index:95;pointer-events:none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0px, rgba(0,0,0,.42) 1px, transparent 1px, transparent 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); animation:crtFlicker 5.5s steps(60) infinite; } @keyframes crtFlicker{ 0%,96%,100%{opacity:.85} 97%{opacity:.6} 98%{opacity:1} 99%{opacity:.72} } /* -------------------------------------------------------------- chrome */ .retro .panel, .retro .stat,.retro .stagebox,.retro .wavebox,.retro .card,.retro .grow, .retro .switch,.retro .statrow,.retro .toast,.retro .snapbox,.retro .quote, .retro .villain-stage,.retro .villain-tap,.retro .offline-report,.retro .stone{ background:#000!important;border:1px solid var(--line)!important; } .retro .card{border-left:1px solid var(--line)!important} .retro .card::before{content:"> ";color:var(--dim);align-self:flex-start;font-size:12px} .retro .quote{border-left:1px solid var(--line)!important} .retro .villain-tap{border:1px dashed var(--line)!important;border-radius:0!important} /* ------------------------------------------------------------- headings */ .retro .logo,.retro .hud-title{color:var(--txt)!important;text-shadow:0 0 6px rgba(51,255,102,.8)!important} .retro .logo em{background:none!important;-webkit-text-fill-color:var(--txt);color:var(--txt)!important;filter:none} .retro .hud-title em{color:var(--txt)} .retro .hud{background:#000;border-bottom:1px solid var(--line);backdrop-filter:none} .retro .section-title{color:var(--txt)} .retro .section-title::before{content:"== "} .retro .section-title::after{content:" =="} /* -------------------------------------------------------------- buttons */ .retro .btn,.retro .buy,.retro .buyamt,.retro .tab{ background:#000!important;color:var(--txt)!important;border:1px solid var(--line)!important; } .retro .btn::before,.retro .buy::before{content:"[ "} .retro .btn::after,.retro .buy::after{content:" ]"} .retro .btn:active,.retro .buy:active{background:var(--txt)!important;color:#000!important;transform:none} .retro .buy.afford{background:#000!important;color:#b6ff5e!important;border-color:#b6ff5e!important;animation:blinkText 1.1s steps(2) infinite} .retro .buyamt.active,.retro .tab.active{background:var(--txt)!important;color:#000!important;text-shadow:none} @keyframes blinkText{50%{opacity:.45}} /* ------------------------------------------------------------ reactor */ .retro .reactor{background:#000!important;box-shadow:none!important;border:1px solid var(--line);animation:none} .retro .reactor span{border-color:var(--line)!important;background:none!important;box-shadow:none!important} .retro .reactor.big::after{content:"(*)";position:absolute;inset:0;display:grid;place-items:center; font-size:26px;color:var(--txt)} /* -------------------------------------------------------------- battle */ .retro .villain-stage{background:#000!important; background-image:repeating-linear-gradient(90deg,rgba(51,255,102,.05) 0 1px,transparent 1px 12px)!important} .retro .villain-art{font-size:clamp(28px,9vw,54px)!important;filter:none; color:var(--txt);animation:none!important} .retro .villain-art.boss{font-size:clamp(32px,11vw,64px)!important;animation:blinkText 1s steps(2) infinite!important} .retro .hpbar{background:#000;border:1px solid var(--line);height:20px} .retro .hpfill{background:repeating-linear-gradient(90deg,var(--txt) 0 8px,#000 8px 11px)!important} .retro .hpfill.low{background:repeating-linear-gradient(90deg,var(--red) 0 8px,#000 8px 11px)!important} .retro .hptext{color:var(--txt);text-shadow:0 0 3px #000,0 0 6px rgba(51,255,102,.8)} .retro .pip{background:#062;border:1px solid var(--line);border-radius:0} .retro .pip.done{background:var(--txt)} .retro .pip.cur{background:var(--txt);animation:blinkText .8s steps(2) infinite} .retro .boss-tag{background:var(--txt);color:#000;text-shadow:none} .retro .combo{background:#000;border:1px solid var(--line);color:var(--txt)} /* ---------------------------------------------------------- ascii icons */ .retro .card-icon{font-size:0!important;width:46px} .retro .card-icon::after{content:attr(data-ascii);font-size:12px;color:var(--txt)} .retro .stone-gem{background:#000!important;border:1px solid var(--line);border-radius:0!important; width:18px;height:18px;animation:none!important} .retro .stone.lit .stone-gem{background:var(--txt)!important} .retro .cameo{filter:none;font-size:0} .retro .cameo::after{content:"[STAN]";font-size:16px;color:var(--txt);border:1px solid var(--txt);padding:3px 5px} /* ---------------------------------------------------------------- fx */ .retro .float{color:var(--txt)!important;text-shadow:0 0 6px rgba(51,255,102,.9)!important;font-size:15px} .retro .float.crit{color:#b6ff5e!important;font-size:19px} .retro .float::before{content:"-"} .retro .float.coin::before{content:"+"} .retro .float.coin{color:#b6ff5e!important} .retro .particle{background:var(--txt)!important;width:4px;height:8px;border-radius:0!important} .retro .confetti{background:var(--txt)!important;width:6px;height:10px} .retro body.flash-gold::after,.retro.flash-gold::after{background:rgba(51,255,102,.5)!important} /* --------------------------------------------------------------- toast */ .retro .toast{border-left:1px solid var(--line)!important} .retro .toast::before{content:"[SYS] ";color:var(--dim)} /* -------------------------------------------------------------- boot fx */ .retro-boot{position:fixed;inset:0;z-index:120;background:#000;color:#33ff66; font-family:ui-monospace,"Courier New",Courier,monospace;padding:24px;overflow:hidden; text-shadow:0 0 6px rgba(51,255,102,.8)} .retro-boot pre{margin:0;font-size:clamp(11px,3.1vw,15px);line-height:1.45;white-space:pre-wrap} .retro-boot::after{ content:"";position:fixed;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px)} /* ------------------------------------------------------------- savebox */ .retro .savebox{background:#000;color:var(--txt);border:1px solid var(--line)} .retro .switch input{accent-color:#33ff66} .retro .card-quote{color:var(--dim)!important} .retro .lvl{color:#b6ff5e} .retro .stat b{color:var(--txt)!important} .retro .grow b{color:var(--txt)} .retro .perk,.retro .next-stone{background:#000!important;border:1px solid var(--line)!important;opacity:1} .retro .perk b{color:var(--txt)} .retro .perk:not(.on) b::after{content:" [LOCKED]"} .retro .stone-req{color:var(--dim)}