.family-tiles .connect-tile .family-tile-art{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px;padding:13px;box-sizing:border-box;background:linear-gradient(145deg,#3e73bd,#193c83);border-color:#a9d9ff;box-shadow:inset 0 2px #d6f1ff,0 7px #102653,0 0 20px #64a4ff44}
.family-tiles .connect-tile .family-tile-art i{display:block;border-radius:50%;background:#0c285e;box-shadow:inset 0 2px 4px #031538,inset 0 -1px #73a4dc}
.family-tiles .connect-tile .family-tile-art i.red{background:radial-gradient(circle at 34% 24%,#ffd1bd,#f25067 42%,#a8224f);box-shadow:inset 0 2px #fff9,0 2px 3px #071a42}
.family-tiles .connect-tile .family-tile-art i.yellow{background:radial-gradient(circle at 34% 24%,#fffbd1,#ffce44 42%,#bf8227);box-shadow:inset 0 2px #fff9,0 2px 3px #071a42}
.connect-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:min(100%,630px);margin:0 auto;padding:clamp(6px,1.6vw,13px);gap:clamp(3px,.8vw,8px);box-sizing:border-box;border:3px solid #abdfff;border-radius:22px;background:linear-gradient(145deg,#5e9add,#2357a4 45%,#163b80);box-shadow:inset 0 2px #e7f8ff88,inset 0 -7px #081f58,0 8px #0b183a,0 18px 34px #0007}
.connect-column{display:flex;flex-direction:column;gap:clamp(3px,.7vw,7px);min-width:0;padding:2px;border:0;border-radius:12px;background:transparent;cursor:pointer;touch-action:manipulation}
.connect-column:not(:disabled):hover,.connect-column:not(:disabled):focus-visible{background:#bdefff55;box-shadow:0 0 0 2px #d5faff}
.connect-column:disabled{cursor:default;opacity:1}
.connect-slot{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 28%,#071b47,#0c2860 68%,#2f67b3);box-shadow:inset 0 3px 7px #031333,inset 0 -1px 1px #a2d1ff88}
.connect-slot.red{background:radial-gradient(circle at 35% 22%,#ffe0cf,#f65d73 37%,#cb2d59 70%,#771641);box-shadow:inset 0 2px #fff9,inset 0 -3px #731a42,0 2px 3px #04163588}
.connect-slot.yellow{background:radial-gradient(circle at 35% 22%,#fffce6,#ffdc69 38%,#eab53c 70%,#a56b21);box-shadow:inset 0 2px #fff9,inset 0 -3px #a56b21,0 2px 3px #04163588}
.connect-slot.just-dropped{animation:connect-drop .35s cubic-bezier(.2,.8,.3,1.15)}
.connect-slot.is-winner{outline:3px solid #efffff;outline-offset:-3px;box-shadow:inset 0 2px #fff9,0 0 16px #fff3a4}
@keyframes connect-drop{from{transform:translateY(-40px) scale(.65);opacity:.4}70%{transform:translateY(5px) scale(1.07)}to{transform:none;opacity:1}}
@media(max-width:760px){.family-tiles>.game-tile:last-child{grid-column:auto;width:auto;justify-self:stretch}.connect-board{border-radius:15px}.connect-column{border-radius:7px}}
@media(min-width:700px) and (min-height:600px){body.roomy-play #connect-screen .family-game-panel{display:flex;flex-direction:column;align-items:center;gap:8px}body.roomy-play #connect-screen .connect-board{width:min(100%,calc((var(--play-height,calc(100dvh - 170px)) - 140px)*1.15))}body.roomy-play #connect-screen .family-status,body.roomy-play #connect-screen .family-rule,body.roomy-play #connect-screen .family-again{margin:4px auto}body.roomy-play #connect-screen .family-again{width:min(100%,220px)}}
@media(prefers-reduced-motion:reduce){.connect-slot.just-dropped{animation:none}}