/* Quiet, translucent glass tiles: color plus a simple silhouette. */
.board-frame{background:linear-gradient(140deg,#f4fcffb5,#badbeb8c);box-shadow:inset 0 1px 5px #fff,0 5px #a7c4d55e,0 10px 26px #79a0ba22}
.tile{background:linear-gradient(145deg,#fffffff0 0%,color-mix(in srgb,var(--tile) 32%,transparent) 34%,color-mix(in srgb,var(--tile) 46%,#f4fcff66) 100%);border:1px solid #ffffffe6;box-shadow:inset 1px 2px 3px #fff,inset -1px -2px 4px #ffffff6e,0 3px 0 color-mix(in srgb,var(--shadow) 40%,transparent),0 4px 6px #456d8017;overflow:visible}
.tile:after{content:'';position:absolute;top:5px;left:8px;right:8px;height:22%;border-radius:10px;background:linear-gradient(#ffffffc9,#ffffff08);pointer-events:none}
.tile .symbol{font-weight:500;color:var(--ink);text-shadow:0 1px 1px #fff,0 -1px 0 #ffffff7a;opacity:.87;filter:none;position:relative;z-index:1;font-size:clamp(23px,3.8vh,42px)}
.tile[data-type='0']{--tile:#83c9bb;--shadow:#78aaa4;--ink:#489c8b}.tile[data-type='1']{--tile:#edcb83;--shadow:#c7b27b;--ink:#bb9240}.tile[data-type='2']{--tile:#8dc3e4;--shadow:#80a7c3;--ink:#4f8fbf}.tile[data-type='3']{--tile:#dfafc0;--shadow:#bd9bac;--ink:#b97794}.tile[data-type='4']{--tile:#b8aedc;--shadow:#a19ac1;--ink:#8976b2}
.tile:hover{filter:brightness(1.04);transform:translateY(-2px)}.tile.preview{background:linear-gradient(145deg,#fff,#bce3f49c)}.tile.special:after{content:attr(data-special);top:auto;left:auto;right:-3px;bottom:-4px;height:22px;border:1px solid #b4cfdd;background:#f5fcff;color:#4e789a;font-size:16px;line-height:20px}.goal-gem{font-size:32px;line-height:42px}.tile.selected{outline:2px solid #578fae}.tile.frost:before{z-index:3}.board{gap:clamp(5px,.8vh,9px)}
@media(max-width:620px){.board{gap:4px}.tile .symbol{font-size:17px}.tile:after{left:3px;right:3px;top:3px}.tile.special:after{height:18px;font-size:12px;line-height:16px}}

.tile.art-tile{padding:0;background:#e4f4fa;isolation:isolate}.tile.art-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit;pointer-events:none;filter:none}.tile.art-tile:not(.special):after{display:none}.tile.art-tile.special:after{z-index:5}.tile.art-tile.preview{outline:3px solid #ffe59c;filter:brightness(1.2)}.goal-gem{width:48px;height:48px;overflow:hidden;border-radius:12px;margin:auto}.goal-gem img{width:100%;height:100%;object-fit:cover}.tile.art-tile.selected{outline:3px solid #38aeda;outline-offset:2px}
/* Image tiles share the same square footprint, including special tiles. */
.tile.art-tile img,.tile.art-tile.special img{clip-path:none;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:inherit;transform:none}
.tile.art-tile[data-type='2'] img{object-fit:cover;object-position:center;scale:1.065;clip-path:inset(3.05% round 12px)}
.tile.art-tile.special:after{width:20px;height:20px;line-height:18px;font-size:14px;right:-2px;bottom:-2px;top:auto;left:auto;border-radius:50%;pointer-events:none}

.tile[data-type='5']{--tile:#b6a0df;--shadow:#91abc5;--ink:#607eac}.tile[data-type='6']{--tile:#8578cf;--shadow:#91abc5;--ink:#607eac}.tile[data-type='7']{--tile:#c1c6ed;--shadow:#91abc5;--ink:#607eac}.tile[data-type='8']{--tile:#74b9e2;--shadow:#91abc5;--ink:#607eac}.tile[data-type='9']{--tile:#9fcaeb;--shadow:#91abc5;--ink:#607eac}.tile[data-type='10']{--tile:#e2d1a6;--shadow:#91abc5;--ink:#607eac}