body{margin:0;padding:0;background:#222;color:#EEE;--vm:calc((1vw + 1vh) / 2);user-select:none;font-family:"Liberation Serif","Times New Roman",serif;font-size:18px}.slow::before{content:"Lowered graphics due to low FPS.";display:block;margin:9px 20px;color:#666}button,input{font-family:inherit;font-size:inherit}#forceGraphBtn{display:none;position:absolute;top:5px;right:5px;z-index:9999}.slow #forceGraphBtn.show{display:block}body *{box-sizing:border-box;margin:0;padding:0}body *::before,body *::after{content:"";display:block;position:absolute;box-sizing:border-box;left:0;top:0;width:0;height:0}.slow *:not(cp)::before,.slow *:not(cp)::after{display:none}.slow *{box-shadow:none}body button{padding:2px 10px;background:#433;border:1px solid #766;border-radius:5px;box-shadow:1px 1px 2px #322;color:#DCC}body button:not([disabled]):hover{background:#755}body button[disabled]{opacity:0.5}btG{display:block;white-space:nowrap}btG button{position:relative;padding:2px 8px;margin:0 -1px 0 0;border-radius:0}btG button:first-child{border-radius:8px 0 0 8px;padding-left:10px}btG button:last-child{border-radius:0 8px 8px 0;padding-right:10px}ctrl,.slow ctrl{display:flex;flex-direction:column;justify-content:space-evenly;color:#210;background:#666;box-shadow:inset 0 0 50px #222,10px 10px 50px #000;position:absolute;top:calc(var(--vm)*5);bottom:calc(var(--vm)*5);left:calc(var(--vm)*5);width:230px;border-radius:6px;z-index:10}ctrl:before,ctrl:after{position:static}ctrl hr{margin:0;border:none}ctrl > *{margin:0 0 0 25px}ctrl h2{font-size:1em}#avaliable{position:relative;left:-10px;width:200px;height:470px;font-size:100px}gold b{text-shadow:1px 1px 2px #000}.act{margin:0 0 0 -10px;transform:scale(.8,1)}.act button.active{background:#06A;box-shadow:0 0 12px #07F,0 0 14px #07F;border:1px solid #8CF;z-index:2}.act button.active:hover{background:#06A}article{background:#730;background-image:radial-gradient(at 15% 25%,#420 00%,transparent 01%,#420 05%,transparent 05.1%,#420 10%,transparent 10.1%,#420 15%,transparent 15.1%,#420 20%,transparent 20.1%,#420 25%,transparent 25.1%),radial-gradient(at -5% 78%,#420 00%,transparent 01%,#420 05%,transparent 05.1%,#420 10%,transparent 10.1%,#420 15%,transparent 15.1%,#420 20%,transparent 20.1%,#420 25%,transparent 25.1%);background-size:500vw 50vh;border-radius:6px;box-shadow:10px 10px 50px #000;font-size:100px;display:block;position:absolute;top:calc(var(--vm)*5);bottom:calc(var(--vm)*5);right:calc(var(--vm)*5);width:calc(100vw - var(--vm)*15 - 230px);overflow:auto;z-index:5}article > div,#avaliable{filter:drop-shadow(.01em .01em .02em rgba(0,0,0,.9))}.slow article > div,.slow #avaliable{filter:none}article > :is(div,ul){position:absolute;width:calc(var(--pW)*100px);height:calc(var(--pH)*100px);transition:opacity 1s}article.hide > :is(div,ul){opacity:0}.gameover article wall{display:none}space{position:absolute;display:block;width:90px;height:90px;border-radius:15px;--color:#FC0;--blur:2px;border:1px solid var(--color);filter:blur(3px) drop-shadow(0 0 0 var(--color)) drop-shadow(0 0 0 var(--color)) drop-shadow(0 0 0 var(--color));opacity:0;z-index:0;transition:2s}space:hover{border:3px solid #FFF;filter:blur(var(--blur)) drop-shadow(0 0 8px var(--color)) drop-shadow(0 0 8px var(--color)) drop-shadow(0 0 8px var(--color));opacity:1;transition:0s}space.valid{border:10px solid #FFF;--color:#0AF;--blur:4px}space.invalid{--color:#F04;--blur:4px}space.valid:hover,space.invalid:hover{border:10px solid #FFF}article ul{font-size:20px;z-index:10;pointer-events:none}article ul > *{position:absolute;transform:translate(-.5em,-.5em)}article p,#avaliable p{position:absolute;width:119px;height:119px;margin:-.1em 0 0 -.1em;--N:8% 8%;--E:92% 8%;--S:92% 92%;--W:8% 92%;clip-path:polygon(var(--N),var(--E),var(--S),var(--W));z-index:2;filter:sepia(0) hue-rotate(0) blur(0) grayscale(0);transition:2s,filter 1.3s}.slow article p,.slow #avaliable p{filter:none;background-image:none}p.disabled,.slow p.disabled{filter:sepia(0) hue-rotate(0) blur(.02em) grayscale(1)}p *:not(button){pointer-events:none}#avaliable p{transform:rotate(9deg) scale(.666);cursor:grab}#avaliable p.turn90{transform:rotate(-81deg) scale(.666);transition:.5s}#avaliable p.dragging{transform:none;pointer-events:none;z-index:10}body.dragging{cursor:grabbing}#avaliable button{position:absolute;top:24px;right:23px;font-size:16px;line-height:25px;width:28px;padding:2px 1px 1px 0px;border-radius:50%;border:none;text-align:center;box-shadow:-1px -1px 2px rgba(255,255,255,.6);background:#222;color:#FC0;font-weight:bold;cursor:pointer;z-index:99;transform:rotate(-9deg) scale(1.5);transition:.5s}#avaliable button.replace{top:68px;right:23px}#avaliable button:hover{background:#FC0 radial-gradient(#FC0,#FC0,#222,#222);color:#222}#avaliable p.turn90 button,#avaliable button.hide{transform:rotate(180deg) scale(0)}p f{display:block;position:relative;width:100%;height:100%;filter:blur(2px);mix-blend-mode:hard-light;z-index:50}.slow p f{display:none}f::before,f::after{width:100%;height:100%;top:-2px;left:-2px;clip-path:polygon(var(--N),var(--E),var(--S),var(--W))}f::after{top:2px;left:2px}p.building{background:#999 10px 10px linear-gradient(-45deg,#777,#999);background-size:20px 20px}p.woods{background:#874;background-size:.75em .75em}p.cavern{background:#544}p f{background:#333}p f::before{background:#BBB}p f::after{background:rgba(68,68,68,.5)}#game .Nm{--N:08% 08%,40% 08%,45% 00%,55% 00%,60% 08%}#game .Nf{--N:08% 08%,40% 08%,45% 16%,55% 16%,60% 08%}#game .Sm{--S:92% 92%,60% 92%,55% 100%,45% 100%,40% 92%}#game .Sf{--S:92% 92%,60% 92%,55% 84%,45% 84%,40% 92%}#game .Wm{--W:08% 92%,08% 60%,00% 55%,00% 45%,08% 40%}#game .Wf{--W:08% 92%,08% 60%,16% 55%,16% 45%,08% 40%}#game .Em{--E:92% 08%,92% 40%,100% 45%,100% 55%,92% 60%}#game .Ef{--E:92% 08%,92% 40%,84% 45%,84% 55%,92% 60%}map{display:grid;grid-template-columns:1em 1em 1em 1em 1em 1em 1em;position:absolute;top:-10px;left:-10px;font-size:20px}map > *{display:block;position:relative;width:1em;height:1em}map w{z-index:10}.slow map w i{display:none}.building map :is(w,w i)::before,.building map :is(w,w i)::after{width:.5em;height:.5em;border:1px solid #422;border-top:1px solid #966;border-left:1px solid #966;background:linear-gradient(-45deg,#522,#855)}.building map :is(w,w i)::after{left:.5em}.building map w i::before,.building map w i::after{top:.5em}.slow .building map w{background:#744}.woods map w i,.woods map :is(w,w i)::before,.woods map :is(w,w i)::after{border-radius:50%;position:absolute;background:radial-gradient(at 30% 30%,#480,#010)}.slow .woods map w{background:#250}.cavern map w i,.cavern map :is(w,w i)::before,.cavern map :is(w,w i)::after{border-radius:.2em;position:absolute;background:radial-gradient(at 30% 30%,#433,#111)}.slow .cavern map w{background:#322}:is(.woods,.cavern) map w::before{width:.6em;height:.7em;top:-.1em;left:-.1em}:is(.woods,.cavern) map w::after{width:.5em;height:.5em;top:.5em}:is(.woods,.cavern) map w i{width:.7em;height:.5em;left:.4em}.woods map w i{z-index:2}:is(.woods,.cavern) map w i::before{top:.4em;left:-.1em;width:.4em;height:.4em}:is(.woods,.cavern) map w i::after{top:.5em;left:.1em;width:.6em;height:.6em}#avaliable e{filter:blur(.1em) grayscale(.8)}.slow #avaliable e,.slow #avaliable e i{filter:none}:is(u,m,e) i{position:absolute;border-radius:1em}:is(u,m,e) i::before{border-radius:1em}e i{width:var(--size);height:var(--size);transform:translate(calc((1em - var(--size)) / 2),calc((1em - var(--size)) / 2));background:radial-gradient(at 30% 30%,#674,#010);filter:sepia(0) hue-rotate(0);transition:filter 1s}.frozen > div p:not(.disabled),.frozen e i{filter:sepia(1) hue-rotate(150deg)}.e1{--size:0.40em}.e2{--size:0.50em}.e3{--size:0.60em}.e4{--size:0.65em}.e5{--size:0.70em}.e6{--size:0.75em}.e7{--size:0.80em}.e8{--size:0.85em}.e9{--size:1.00em}.e7 i::after{top:.2em;left:.2em;width:.4em;height:.4em;border-radius:1em;border:1.5px dotted rgba(0,0,0,.7)}.e8 i::after{top:.225em;left:.225em;width:.4em;height:.4em;border-radius:1em;border:1.5px dotted rgba(255,255,255,.5)}.e9 i::after{top:.3em;left:.3em;width:.4em;height:.4em;border-radius:1em;border:1.5px dotted #6C0;filter:drop-shadow(0 0 1px #0C0) drop-shadow(0 0 1px #0C0)}u i,m i{width:.55em;height:.55em;transform:translate(.225em,.225em);background:radial-gradient(at 30% 30%,#27C,#002)}m i{background:radial-gradient(at 30% 30%,#CCC,#000);box-shadow:0 0 .3em #FE0,0 0 .3em #FE0}.slow m i{box-shadow:none}:is(u,m,e) i::before{top:50%;left:50%;transform:translate(-50%,-50%);background:#C00;opacity:.8;filter:blur(2px);transition:.5s}:is(u,m,e).life5 i::before{width:10%;height:10%}:is(u,m,e).life4 i::before{width:25%;height:25%}:is(u,m,e).life3 i::before{width:45%;height:45%}:is(u,m,e).life2 i::before{width:65%;height:65%}:is(u,m,e).life1 i::before{width:85%;height:85%}:is(u,m,e).life0 i::before{width:110%;height:110%}:is(u,m,e){filter:blur(0);z-index:2}:is(u,m,e).life0{filter:blur(3px) !important;opacity:0;z-index:1;transition:.2s,opacity 20s 20s,filter 10s,z-index 1s !important}.slow :is(u,m,e).life0{filter:none}.slow m i::after{display:block;opacity:1}m.cast-rgn i::after{background:radial-gradient(transparent 25%,#FF0);left:-3.75em;top:-3.75em;width:8em;height:8em;border-radius:50%;opacity:0;transition:1s,opacity 1s .5s,border-radius 0s}fb{width:.4em;height:.4em;z-index:9}fb::before{width:.4em;height:.4em;transform:translate(var(--dx),var(--dy));border-radius:50%;background:radial-gradient(#A00,transparent 70%)}fb::after{width:.4em;height:.4em;border-radius:50%;background:radial-gradient(#FF0,#F80,rgba(255,0,0,.5),transparent 70%)}.slow fb::after{display:block}fb.boom::before{display:none}fb.boom::after{width:1em;height:1em;transform:translate(-.3em,-.3em);opacity:0;transition:1s,opacity .5s .5s}article x{width:24px;height:24px;margin:-12px;transform:rotate(45deg);z-index:-1;opacity:.3;transition:opacity 12s}article x.show{opacity:1;transition:0s}body.slow x::before,x::before{display:block;background:#D00;width:4px;height:auto;left:10px;top:0;bottom:0}body.slow x::after,x::after{display:block;background:#D00;width:auto;height:4px;top:10px;left:0;right:0}grid{display:block;position:absolute;top:.2em;left:.2em;width:1em;height:1em;border-radius:0.15em 0 0 0;border:2px dotted #322;border-right:none;filter:drop-shadow(-1px -1px #666);transition:width 1.5s linear,height 1.5s 1.5s linear,top 1.5s 1.5s linear}news{display:block;position:absolute;top:0;left:50vw;transform:translateX(-50%);padding:20px 25px;border-radius:25px;background:rgba(0,0,0,.8);color:#FFF;font-weight:bold;opacity:0;pointer-events:none;z-index:999;transition:2s}news.win{color:#210;background:#FE0;box-shadow:inset 0 0 2em #B60,0 0 3em rgba(255,200,0,.5),0 0 2em #FD0;pointer-events:all}news.win a{display:block;position:relative;color:#210;text-decoration:none;text-shadow:0 0 3px #FE0,0 0 3px #FE0,0 0 3px #FE0,0 0 3px #FE0;transition:2s}news.win a::before{border-top:2px solid #09D;width:100%;left:0;top:auto;bottom:1px;z-index:-1}news.win b{text-shadow:none;filter:contrast(.5) sepia(1) hue-rotate(150deg) saturate(5)}bg{display:flex;justify-content:center;align-items:center;position:absolute;top:0;bottom:0;left:0;right:0;background:radial-gradient(transparent,#000 90%);z-index:100}bg.hide{pointer-events:none;opacity:0;transition:3s 1s}modal{position:relative;top:0;display:block;background:#544;color:#DCC;font-size:20px;padding:40px 50px;border-radius:20px;box-shadow:inset 0 0 50px #322,10px 10px 50px #000,1px 1px 10px #321}bg.hide modal{top:-100vh;transition:2s}h1{font-size:40px;color:#766;text-shadow:2px 2px 2px #322}modal p{margin:20px 0;max-width:30em}conf-lvl{text-align:center}conf-lvl button{margin-top:5px}modal label{display:block;text-align:left;padding-bottom:4px}modal label span{display:inline-block;width:150px;text-align:right;padding-right:5px}modal label input{width:3em;margin-right:2px;line-height:1.3em;text-align:center;border:none;border-radius:4px;background:#877;color:#322}clock{display:block;position:absolute;top:calc(var(--vm)*5 - 30px);right:calc(var(--vm)*5 - 30px);width:120px;height:120px;border-radius:50%;border:10px solid #111;box-shadow:-2px 2px 0 #202020,-4px 4px 0 #181818,-6px 6px 0 #101010,-5px 8px 20px #000;z-index:6}.slow clock{background:#DDD}clock::before{width:100%;height:100%;background:radial-gradient(circle at 40% 40%,#DDD 40%,#666);box-shadow:inset 3px 3px 6px #444;border-radius:50%}clock :is(v,h){display:block;position:absolute;top:50px;width:100%}clock v{transform:rotate(90deg)}clock :is(v,h)::before,clock :is(v,h)::after{width:10px;height:10px;left:5px;top:-5px;border-radius:50%;background:#555}clock :is(v,h)::after{left:auto;right:5px}clock cp{display:block;position:absolute;top:50px;left:50px;width:30px;height:30px;margin:-15px 0 0 -15px;background:#333;border-radius:50%;z-index:5;transition:.6s linear}clock cp.shadow{top:55px;left:55px;opacity:.7;filter:blur(4px);z-index:4}.slow clock cp.shadow{display:none}clock cp::before,.slow clock cp::before{position:absolute;width:0;height:0;top:-40px;left:7px;border:8px solid transparent;border-bottom:40px solid #333}clock cp::after{position:absolute;width:10px;height:10px;top:10px;left:10px;border-radius:50%;background:#444;box-shadow:0 0 8px #000}clock b{position:absolute;top:66px;left:50px;transform:translateX(-50%);white-space:nowrap;font-size:14px;color:#777;z-index:2}
