.game{background-image:linear-gradient(#123e4655,#123e4655),url('assets/isometric-voxel-island-v2.png');background-size:cover;background-position:center}
header{background:#174f60ed;border-radius:12px;box-shadow:0 5px 0 #0a303b}
.mission{background:#fffbeeed;border-color:#a7db63;border-radius:14px;box-shadow:0 7px 0 #416f2d}
.station,.shape-btn{border-radius:10px;box-shadow:0 6px 0 #173c3f}
.station.roll{background:linear-gradient(#22b9d2,#087b9a)}
.station.stand{background:linear-gradient(#ffd45b,#dc8c27)}
.station.stack{background:linear-gradient(#92dc5b,#3b973f)}
.shape-btn{background:#fffceff2;border-color:#dff5bd}
.feedback{background:#153f49ed;border-color:#a7db63}
.overlay{background:linear-gradient(120deg,#0b6674d9,#71b843b8)}
.intro-card{border-radius:18px;border-color:#dff5bd;box-shadow:0 12px 0 #315f32,0 20px 38px #143a3d88}
.stage{top:23%;bottom:42%;left:8%;right:7%}
.moving-shape.preview{left:50%;top:48%;transform:translate(-50%,-50%);width:150px;height:150px;display:grid;place-items:center;filter:drop-shadow(0 12px 8px #163f4255)}
.moving-shape.preview .solid{transform:scale(1.55)}
.moving-shape.test-center{left:calc(50% - 55px);top:calc(48% - 55px)}
.moving-shape.roll-in-place{animation:rollInPlace 1.4s ease-in-out forwards}
.moving-shape.cylinder-rolling .solid.cylinder:before,.moving-shape.cylinder-rolling .solid.cylinder:after{opacity:.3}
.moving-shape.roll-cylinder{animation:cylinderRoll 1.45s ease-in-out forwards}
.moving-shape.roll-cylinder .solid.cylinder{transform:rotate(90deg);background:repeating-linear-gradient(90deg,#4aa6d0 0 10px,#b9eeff 10px 23px,#69c6ed 23px 35px);background-size:70px 100%;animation:cylinderSurface .36s linear 4}
.moving-shape.roll-cylinder .solid.cylinder:before{background:conic-gradient(#e9fbff 0 12%,#58b5dc 12% 25%,#b9eeff 25% 42%,#479ec8 42% 58%,#d9f7ff 58% 75%,#62bddf 75% 88%,#e9fbff 88%);border:4px solid #4699be;animation:cylinderEndSpin .36s linear 4}
@keyframes cylinderRoll{0%{left:13%;top:22%;transform:translateY(-25px)}18%{left:13%;top:22%;transform:translateY(0)}100%{left:75%;top:22%;transform:translateY(0)}}
@keyframes cylinderSurface{from{background-position:0 0}to{background-position:70px 0}}
@keyframes cylinderEndSpin{to{transform:rotate(360deg)}}
@keyframes rollInPlace{0%{transform:rotate(0)}35%{transform:rotate(240deg)}70%{transform:rotate(500deg)}100%{transform:rotate(720deg)}}
@media(max-height:650px){.stage{top:21%;bottom:43%}.moving-shape.preview{width:125px;height:125px;top:46%}.moving-shape.preview .solid{transform:scale(1.3)}}
@media(max-width:760px){.stage{top:22%;bottom:44%}.moving-shape.preview{top:45%;width:125px;height:125px}.moving-shape.preview .solid{transform:scale(1.3)}}