*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;color:#31594c;background:#e5eee0}main{height:100dvh;overflow:hidden;background:radial-gradient(ellipse at 45% 25%,#fff8e4,#d0e8df);--player-safe-top: env(safe-area-inset-top, 0px);--player-safe-right: env(safe-area-inset-right, 0px);--player-safe-bottom: env(safe-area-inset-bottom, 0px);--player-safe-left: env(safe-area-inset-left, 0px)}.canvas{position:absolute;inset:0}header{position:absolute;left:calc(25px + var(--player-safe-left));right:calc(25px + var(--player-safe-right));top:calc(22px + var(--player-safe-top));display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:13px}a{color:inherit;text-decoration:none;font-size:23px;font-weight:700}button{cursor:pointer;border:1px solid #ffffff80;background:#faffeecc;color:#31594c;border-radius:12px;padding:12px 18px}header span{margin-right:auto}.score{position:absolute;top:calc(82px + var(--player-safe-top));right:calc(25px + var(--player-safe-right));background:#ffffeccc;border-radius:14px;padding:15px}footer{position:absolute;bottom:calc(24px + var(--player-safe-bottom));left:var(--player-safe-left);right:var(--player-safe-right);text-align:center;font-size:11px;color:#6e8d7b;pointer-events:none}.win,.message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fffff0ed;border-radius:20px;padding:30px;text-align:center;min-width:300px}.win h1{font-size:29px;font-weight:500;letter-spacing:-1px}.win p{font-size:12px}.controls{display:none}.webgl-fallback{position:absolute;top:40%;left:10%;right:10%;text-align:center}main.touch-layout header{left:calc(15px + var(--player-safe-left));right:calc(15px + var(--player-safe-right))}main.touch-layout header span{font-size:10px}main.touch-layout .controls{display:flex;position:absolute;bottom:calc(30px + var(--player-safe-bottom));left:calc(20px + var(--player-safe-left));right:calc(20px + var(--player-safe-right));gap:6px}main.touch-layout .controls button{width:45px;height:45px;padding:0;touch-action:none;font-size:20px}main.touch-layout .controls button:last-child{margin-left:auto}main.touch-layout footer{bottom:calc(90px + var(--player-safe-bottom));font-size:9px}@media(max-width:700px)and (pointer:fine),(max-width:700px)and (pointer:none){header{left:calc(15px + var(--player-safe-left));right:calc(15px + var(--player-safe-right))}header span{font-size:10px}footer{font-size:10px}}
