.scene{overflow:hidden;border-radius:24px;background:linear-gradient(#bcecff 0 48%,#f7df9b 48% 51%,transparent 51%)}
.cloud{position:absolute;z-index:1;width:62px;height:22px;border-radius:999px;background:#ffffffd9;box-shadow:18px -9px 0 2px #ffffffd9,38px 0 0 #ffffffd9;pointer-events:none}.cloud-one{top:14px;left:17%}.cloud-two{top:35px;right:18%;transform:scale(.7)}
.board{background:linear-gradient(to bottom,transparent 0 17%,#bfeefe 17% 34%,#69c9ed 34% 100%);border-color:#4f75a1;box-shadow:inset 0 8px #ffffff40,0 10px 24px #315d8133}
.cell{border-color:transparent}.board.dragging .cell{border-color:#ffffff55}.cell.bank{position:relative;background:linear-gradient(to right,#62b85b,#7ccf67 20%,#a8713f 21% 100%);border-color:transparent;box-shadow:inset 0 7px #a4ea79,inset 0 -8px #80512e}.cell.bank::after{position:absolute;inset:16% 18%;border-radius:50%;background:#6ba953;box-shadow:13px 14px 0 -5px #875d39,-8px 24px 0 -6px #6c913f;content:""}.cell.water{background:repeating-radial-gradient(ellipse at 30% 55%,#ffffff35 0 2px,transparent 3px 26px),linear-gradient(#75d4f1,#3ea8dc)}.cell.foundation::after{right:8%;bottom:4%;left:8%;height:38%;border:3px solid #5d6676;background:linear-gradient(#aab4c4,#737f91);box-shadow:inset 0 -5px #596274,0 4px 0 #327fa7}.cell.outline{background:#ffe18426;box-shadow:inset 0 0 0 3px #ffe17d80}.cell.hint{background:#fff1a866;box-shadow:inset 0 0 0 5px #ffca3a}
.piece,.tray-piece,.drag-ghost{border:3px solid #7e482d;background:linear-gradient(145deg,#f8c47b 0 18%,#d88943 19% 78%,#ad6035 79% 100%);box-shadow:inset 5px 0 #ffe0a566,inset -5px 0 #8d4c2b33,inset 0 -7px #87442555,0 6px 10px #33487338;color:transparent}
.piece::before,.tray-piece::before,.drag-ghost::before{position:absolute;top:12%;right:7%;left:7%;height:13%;border-radius:999px;background:repeating-linear-gradient(90deg,#ffe1aa 0 14%,#bd713b 15% 18%);opacity:.7;content:""}.piece::after,.tray-piece::after,.drag-ghost::after{position:absolute;right:8%;bottom:12%;left:8%;height:2px;background:#75422945;box-shadow:0 -9px #fff2c733;content:""}
.piece.block-square,.tray-piece.block-square{border-radius:13px}.piece.block-short,.tray-piece.block-short{background:linear-gradient(145deg,#ffd17c,#df8b43 78%,#b15e34)}.piece.block-long,.tray-piece.block-long{background:linear-gradient(145deg,#f4bc70,#cf753a 78%,#98502f)}.piece.v::before,.tray-piece.v::before{top:7%;bottom:7%;left:15%;width:13%;height:auto;background:repeating-linear-gradient(#ffe1aa 0 14%,#bd713b 15% 18%)}
.tray{position:relative;min-height:92px;padding:14px;border:4px solid #b8793f;background:linear-gradient(110deg,#e8ad66,#c77d3f);box-shadow:inset 0 7px #ffd798,inset 0 -8px #92532f,0 8px 18px #5d3c2633}.tray::before{position:absolute;top:-12px;left:50%;width:42%;height:18px;border:6px solid #a76637;border-bottom:0;border-radius:40px 40px 0 0;content:"";transform:translateX(-50%)}.tray-piece{position:relative;min-width:44px;min-height:44px}.tray-piece.selected{outline-color:#fff06a}.tray-piece.hinted{outline-color:#ffca3a;filter:brightness(1.12)}
.tray-title{font-size:22px}.tray-title strong{font-size:30px}.drag-symbols{color:#5474a6;font-size:20px;letter-spacing:5px}.drag-ghost{position:fixed;display:block;opacity:.82}
.tutorial-hand{position:absolute;z-index:12;right:18%;bottom:9%;font-size:42px;filter:drop-shadow(0 5px 4px #2b427044);pointer-events:none;animation:tutorial-drag 2.4s ease-in-out 2}.walker{filter:drop-shadow(0 4px 3px #31496b44)}
@keyframes tutorial-drag{0%{right:18%;bottom:5%;transform:rotate(-12deg)}45%{right:48%;bottom:34%;transform:rotate(-12deg)}65%{right:48%;bottom:34%;transform:scale(.88)}100%{right:18%;bottom:5%;transform:rotate(-12deg)}}
@media(max-width:600px){.cloud{transform:scale(.7)}.cloud-two{transform:scale(.55)}.tray{min-height:78px;padding:10px}.tutorial-hand{font-size:34px}}
@media(prefers-reduced-motion:reduce){.tutorial-hand{display:none!important}}