*{box-sizing:border-box;border-radius:0!important}
html,body,#root{height:100%;margin:0}
body{font-family:"Segoe UI","Selawik","Mukta",sans-serif;background:#fff;overflow:hidden}
.wall{background:#2d2d2d;position:relative;overflow:hidden}
.shape{position:absolute;background:#333;transform:rotate(-28deg)}
.fish{animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(-2deg)}50%{transform:translate(18px,-14px) rotate(2deg)}}
.bubble{position:absolute;border:2px solid #eee;border-radius:50%!important;animation:rise 4s linear infinite;opacity:0}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(-220px);opacity:0}}
.tile{transition:transform .15s,filter .15s;cursor:pointer}
.tile:hover{transform:scale(1.04)}
.tile:active{transform:scale(.95) perspective(300px) rotateX(6deg)}
.busy .tile{animation:flip 1.2s ease-in-out infinite}
@keyframes flip{0%,100%{transform:perspective(400px) rotateX(0)}50%{transform:perspective(400px) rotateX(180deg)}}
.tabbtn{transition:background .15s}
textarea:focus,input:focus{outline:none}
.code{font-family:"JetBrains Mono",Consolas,monospace}
@media(max-width:768px){body{overflow:auto}}