.match-board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;max-width:650px;border:4px solid #704e68;background:linear-gradient(145deg,#76546f,#513b55)}.match-piece{aspect-ratio:1;min-height:0;padding:4px;border:2px solid #ead8bd;border-radius:16px 16px 20px 12px;background:#fff8e8;box-shadow:inset 0 -4px #efd9bd}.match-piece.selected{outline:4px solid #ffe15d;transform:scale(.92)}.snack-shape{position:relative;display:block;width:72%;aspect-ratio:1;margin:auto;filter:drop-shadow(0 3px 2px #5a38252b)}.snack-0 .snack-shape{border:3px solid #85572f;border-radius:50%;background:radial-gradient(circle at 28% 30%,#6e432b 0 6%,transparent 7%),radial-gradient(circle at 68% 62%,#6e432b 0 7%,transparent 8%),radial-gradient(circle at 62% 24%,#6e432b 0 5%,transparent 6%),#d99a58}.snack-0 .snack-shape:after{content:"";position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:2px dashed #f2c681;border-radius:50%}.snack-1 .snack-shape{height:64%;margin-top:18%;border:3px solid #8c6030;border-radius:48% 48% 22% 22%;background:linear-gradient(#d88945 0,#d88945 18%,#f5ce68 19%,#f5ce68 75%,#e5a54f 76%)}.snack-1 .snack-shape:before{content:"";position:absolute;left:22%;top:-14%;width:56%;height:19%;border-radius:50%;background:#b06c39}.snack-2 .snack-shape{border:10px solid #e78391;border-radius:50%;background:#fff6e5;box-shadow:inset 0 0 0 3px #9e5966}.snack-2 .snack-shape:after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px;border-radius:50%;background:repeating-linear-gradient(45deg,transparent 0 9px,#fff4c8 10px 13px);opacity:.75}.snack-3 .snack-shape{width:64%;height:52%;margin-top:24%;border:3px solid #54839b;border-radius:42% 58% 45% 55%;background:#79bdd5}.snack-3 .snack-shape:before,.snack-3 .snack-shape:after{content:"";position:absolute;top:12%;width:42%;height:75%;background:#efc05d;clip-path:polygon(100% 0,100% 100%,0 50%)}.snack-3 .snack-shape:before{left:-40%}.snack-3 .snack-shape:after{right:-40%;transform:scaleX(-1)}.snack-4 .snack-shape{height:66%;margin-top:20%;border:3px solid #84516e;border-radius:50% 50% 20% 20%;background:linear-gradient(#f3b3c6 0,#f3b3c6 48%,#b477a8 49%)}.snack-4 .snack-shape:before{content:"";position:absolute;left:13%;top:-24%;width:74%;height:48%;border-radius:50%;background:#fff1dc;box-shadow:0 -7px #ef91a8}.snack-5 .snack-shape{height:52%;margin-top:24%;border:3px solid #55795f;border-radius:999px;background:linear-gradient(#78b88b 0,#78b88b 40%,#fff4d1 41%,#fff4d1 58%,#73a982 59%)}.special-row .snack-shape:before{content:"↔";position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-weight:900;text-shadow:0 1px 3px #000}.special-column .snack-shape:before{content:"↕";position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-weight:900;text-shadow:0 1px 3px #000}.special-color .snack-shape{border-radius:50%;background:conic-gradient(#f66,#fd6,#6c8,#6bd,#b7d,#f89)}.special-area .snack-shape:after{content:"✦";position:absolute;z-index:3;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:#fff;font-weight:900;text-shadow:0 1px 3px #000}@media(max-width:600px){.match-board{gap:2px;padding:4px}.match-piece{padding:2px;border-width:1px}.snack-2 .snack-shape{border-width:5px}}