html{height:100%;}
body{
 font:100 2.5rem Trebuchet,sans-serif;
 background:radial-gradient(#89a,#454);
 margin:0;
 color:#333;
 overflow-x:hidden;
}
p{font-size:1.5rem;font-weight:150}
.centered{
 position:absolute;
 left:0;
 right:0;
 margin:auto;
}
#app{
 position:absolute;
}
#hud{
 position:absolute;
 visibility:hidden;
}
#hudmenu{
 display:flex;
}
#ui{
 display:flex;
 height:100vh;
 flex-direction:column;
 background:inherit;
}
#mainmenu,#pausemenu{
 display:flex;
 max-width:10em;
 top:10vh;
 flex-direction:column;
}
#title{
 margin:3.5rem auto;
 transform:scaleY(1.3);
}
#subtitle{
 margin:3.5rem auto;
 transform:scaleY(1.1);
}
#text{
 color:#ccc;
 background:#222;
 margin:2rem auto;
}
input{
 font:inherit;
 width:100%;
 background:#ccc;
 padding:0;
 border:0;
 border-bottom:2px solid #222;
}
.wrong{
 border:3px solid red;
}
#button,#backbutton,#pausebutton,#dropitem{
 font-size:2rem;
 background:#ccc;
 cursor:pointer;
 margin:1rem auto;
 padding:10px;
 transition:0.3s;
 border:0;
}
#button:hover,#level:hover,#backbutton:hover,#pausebutton:hover{
 background:#333;
 color:#6fc;
 transform:scale(1.1);
}
#button:active,#level:active,#backbutton:active{
 color:#ecf;
 transform:scale(0.9);
}
#backbutton{
 padding:0 20px;
 margin-left:0;
}
#pausebutton{
 width:50px;
 text-align:center;
}
#levelsgrid{
 max-width:13em;
 display:grid;
 grid-gap:10px;
 grid-template-columns:repeat(4,1fr);
}
#dropdown{
 position:absolute;
 visibility:hidden;
 background:#ccc;
 z-index:2;
}
#dropitem{
 background:#ccc;
 color:#222;
 transition:0s;
}
#dropitem:hover{background:#aaa}
#level{
 cursor:pointer;
 text-align:center;
 padding:50px;
 align-self:center;
 transition:0.3s;
}
.active{background:#ccc}
.completed{background:#acd}
.blocked{background:#999}
#controls{
 position:fixed;
 display:grid;
 bottom:0;
 left:50%;
 transform:translateX(-50%);
 grid-template-columns:1fr 1fr;
}
#b0,#b1,#b2,#b3{
 width:0;
 height:0;
 margin:5px;
 border:30px solid #333;
 border-radius:9px;
 cursor:pointer;
}
#b0:active,#b1:active,#b2:active,#b3:active{transform:scale(0.9)}

#b0,#b1{border-bottom:30px solid #aaa}
#b2,#b3{border-top   :30px solid #aaa}
#b0,#b2{border-right :30px solid #aaa}
#b1,#b3{border-left  :30px solid #aaa}
.b4{position:absolute;left:10rem;}

@media(max-width:540px){
 #levelsgrid{grid-template-columns:repeat(2,1fr)}
 body{font:100 2rem Trebuchet,sans-serif}
 #subtitle{margin:3rem auto}
 #button,#backbutton,#pausebutton{font-size:1.5rem}
}

.fadein{animation:0.7s ease fadein}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.fadeout{animation:0.9s ease fadeout}
@keyframes fadeout{to{opacity:0}}
.zoomin{animation:1s ease zoomin}
@keyframes zoomin{to{transform:scale(3);opacity:0}}

:root{color-scheme:dark}*{box-sizing:border-box}body{background:radial-gradient(ellipse at 50% 10%,#283e49,#111924 70%);color:#e2f3ed;font:400 22px system-ui,sans-serif}button{font:inherit;color:inherit}#ui{overflow:auto;min-height:100dvh;height:auto}#mainmenu,#pausemenu{position:relative;top:0;max-width:680px;width:calc(100% - 32px);padding:26px 0 50px}#title{font-size:clamp(32px,6vw,66px);font-weight:750;letter-spacing:.12em;margin:25px auto 20px;transform:none}#subtitle{font-size:28px;font-weight:650;margin:24px auto;transform:none}p.guide{font-size:17px;line-height:1.7;color:#bed5d5;max-width:580px;margin:10px auto 22px;text-align:center}p.credit{font-size:13px;color:#8da5b1;text-align:center;line-height:1.6}#button,#backbutton,#pausebutton,#dropitem{background:#294450;color:#d8fff2;border:1px solid #47736f;border-radius:12px;font-size:18px;padding:12px 24px;box-shadow:0 6px 20px #0003}#button:hover,#level:hover,#backbutton:hover,#pausebutton:hover{background:#395d62;color:#fff;transform:none}#levelsgrid{width:100%;max-width:560px;grid-template-columns:repeat(4,1fr);gap:12px}#level{font-size:20px;padding:17px 4px;border:1px solid #486269;border-radius:12px;color:#e7f9ef}.active{background:#387c6e}.completed{background:#255158}.blocked{background:#24313c;color:#76818e!important}#hudmenu{align-items:center;gap:18px;padding:0 16px}#stepstatus{font-size:16px;font-weight:600;padding:10px;background:#10202bd9;border-radius:12px}#pausebutton{margin:10px 0;width:auto}#controls{bottom:10px;gap:6px;grid-template-columns:repeat(4,56px);padding:8px;background:#10202be6;border-radius:16px}#b0,#b1,#b2,#b3{width:52px;height:52px;border:1px solid #6a9e99;margin:0;background:#29444f;display:grid;place-items:center;touch-action:none;user-select:none}#b0:after{content:"↑"}#b1:after{content:"→"}#b2:after{content:"←"}#b3:after{content:"↓"}#app{touch-action:none}#dropdown{background:#1b303d;border-radius:12px}.themebtn{cursor:pointer;font-size:20px;padding:15px;text-align:center}#dropitem{margin:3px}button:focus-visible,[role=button]:focus-visible{outline:3px solid #a3ffce;outline-offset:3px}@media(max-width:540px){#levelsgrid{grid-template-columns:repeat(4,1fr)}#title{letter-spacing:.07em}#stepstatus{font-size:12px}#hudmenu{gap:8px;padding:0 8px}#mainmenu{padding-top:18px}p.guide{font-size:15px}}@media(prefers-reduced-motion:reduce){.fadein,.fadeout,.zoomin{animation:none}}

a{color:#a8e4d4}a:hover{color:white}