.connect-four-mini{border-radius:50%;flex:0 0 17px;width:17px;height:17px}.connect-four-mini.coral{background:radial-gradient(circle at 34% 25%,#ff9583,#dc4b43 57%,#8f2728);box-shadow:inset 0 -2px 3px #5b0f1359,0 2px 4px #4b191233}.connect-four-mini.gold{background:radial-gradient(circle at 34% 25%,#fff19b,#f3be35 58%,#ad6a13);box-shadow:inset 0 -2px 3px #6f40084d,0 2px 4px #4b310c33}.connect-four-stage{aspect-ratio:1.08;background:linear-gradient(110deg,#0000 0 12%,#ffffff1f 12.4% 13%,#0000 13.4% 100%),linear-gradient(#3567ae,#174987 58%,#0d346a);border-radius:3.2% 3.2% 7% 7%;align-content:center;width:min(100%,820px);display:grid;position:relative;box-shadow:inset 0 0 0 2px #08224659,inset 0 4px 3px #fff3}.connect-four-stage:before{content:"";pointer-events:none;border:1px solid #ffffff2e;border-radius:2.5% 2.5% 6% 6%;position:absolute;inset:2.3%}.connect-four-board{z-index:2;background:linear-gradient(145deg,#2d64ad,#154781);border:1px solid #041c419e;border-radius:2.4%;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(7,1fr);gap:1.5%;margin:0 5.5% 1.5%;padding:2.2%;display:grid;position:relative;box-shadow:inset 0 3px 2px #fff3,inset 0 -7px 13px #0419384d}.connect-four-slot{aspect-ratio:1;cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;min-width:0;min-height:0;padding:0;display:grid;position:relative}.connect-four-slot:disabled{cursor:default}.connect-four-slot:not(:disabled):hover .connect-four-hole{box-shadow:inset 0 4px 8px #02143080,0 0 0 3px #ffffff3b}.connect-four-hole{aspect-ratio:1;background:radial-gradient(circle at 46% 44%,#e8e4da 0 55%,#b8b7b1 72%,#0b356a 74%);border:2px solid #051e429e;border-radius:50%;width:86%;display:block;position:relative;overflow:hidden;box-shadow:inset 0 5px 10px #04193873,0 2px 1px #ffffff2e}.connect-four-disc{border-radius:50%;display:block;position:absolute;inset:4%;box-shadow:inset 4px 5px 5px #ffffff40,inset -5px -7px 8px #46140a47,0 4px 7px #0e182347}.connect-four-disc:after{content:"";border:1px solid #fff3;border-radius:50%;position:absolute;inset:17%;box-shadow:inset 0 0 0 2px #581f1014}.connect-four-disc.coral{background:radial-gradient(circle at 34% 26%,#ff9b83,#e75248 53%,#a52d31 82%)}.connect-four-disc.gold{background:radial-gradient(circle at 34% 26%,#fff3a3,#f5c53c 54%,#c27b16 84%)}.connect-four-slot.last .connect-four-disc:before{content:"";background:#ffffffd6;border-radius:50%;position:absolute;inset:39%}.connect-four-slot.winning .connect-four-disc{animation:.85s ease-in-out infinite alternate connect-four-win}@keyframes connect-four-win{to{filter:brightness(1.12);transform:translateY(-3%)scale(1.055)}}.connect-four-top{z-index:3;color:#ffffff9e;text-align:center;pointer-events:none;grid-template-columns:repeat(7,1fr);font-size:clamp(8px,1.3vw,15px);display:grid;position:absolute;top:3.2%;left:7.5%;right:7.5%}.connect-four-foot{z-index:-1;justify-content:space-between;display:flex;position:absolute;bottom:-2%;left:4%;right:4%}.connect-four-foot i{background:#0f376c;border-radius:0 0 20px 20px;width:12%;height:clamp(16px,2.8vw,30px);box-shadow:0 7px 10px #1127413d}@media (width>=851px),(width>=812px) and (height<=500px){.connect-four-stage{width:var(--fitted-board-size);width:min(100%, calc((var(--board-vh) - clamp(12px, 2vh, 24px)) * 1.08));margin-inline:auto}}@media (width<=600px){.connect-four-stage{padding-inline:3.5%}}@media (width<=850px){.connect-four-stage{width:min(100%, 820px, calc(var(--board-fit-height) * 1.08));margin-inline:auto}}