.connect4-surface{position:absolute;inset:0;z-index:14;overflow:auto;background:var(--bg);color:var(--text)}.connect4-surface[hidden],.connect4-match[hidden]{display:none!important}.connect4-home{min-height:100%;display:grid;grid-template-columns:minmax(260px,520px) minmax(250px,430px);align-items:center;justify-content:center;gap:clamp(28px,7vw,90px);padding:clamp(28px,6vw,82px)}.connect4-kicker{display:block;margin-bottom:14px;color:var(--accent);font:700 11px "Space Mono",monospace;letter-spacing:.16em}.connect4-home h2{margin:0;color:var(--white);font:900 clamp(42px,6vw,78px)/.94 "Lato",sans-serif;letter-spacing:-.055em}.connect4-home h2 em{color:var(--accent);font-style:normal}.connect4-home p{max-width:560px;margin:20px 0 0;color:var(--muted);font:500 16px/1.65 "Lato",sans-serif}.connect4-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:7%;aspect-ratio:7/6;align-content:center;padding:12%;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 75%,#20245d),#343a94);box-shadow:0 34px 80px rgba(0,0,0,.38);transform:rotate(3deg)}.connect4-preview i,.connect4-preview b{display:block;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#ff6a7f,#ad173b);box-shadow:inset 0 4px rgba(255,255,255,.2),0 6px 12px rgba(0,0,0,.35)}.connect4-preview b{background:linear-gradient(145deg,#ffe071,#d79b16)}
.connect4-match{min-height:100%;display:grid;grid-template-rows:auto minmax(330px,1fr) auto;gap:10px;padding:clamp(12px,2.5vw,28px)}.connect4-match-head,.connect4-match-foot{width:min(100%,760px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.connect4-match-head>div:nth-child(2){display:flex;min-width:0;flex-direction:column;align-items:center;text-align:center}.connect4-match-head #connect4-turn{color:var(--white);font:800 clamp(15px,2vw,20px) "Lato",sans-serif}.connect4-match-head #connect4-rule-hint{margin-top:3px;color:var(--muted);font:600 11px "Space Mono",monospace}.connect4-player{display:flex;align-items:center;gap:9px;min-width:0}.connect4-player-avatar{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,var(--bg2));color:var(--white);font:800 14px "Lato",sans-serif}.connect4-player-avatar img{width:100%;height:100%;object-fit:cover}.connect4-player span{display:flex;min-width:0;flex-direction:column}.connect4-player b{overflow:hidden;color:var(--white);font:800 14px "Lato",sans-serif;text-overflow:ellipsis;white-space:nowrap}.connect4-player small{color:var(--muted);font:700 9px "Space Mono",monospace;letter-spacing:.1em;text-transform:uppercase}#connect4-resign,#connect4-replay{min-height:42px;padding:0 16px;border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--bg2));color:var(--text);font:700 11px "Space Mono",monospace;cursor:pointer}#connect4-resign:focus-visible,#connect4-replay:focus-visible,.connect4-column-button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 75%,white);outline-offset:3px}.connect4-board-wrap{display:grid;align-content:center;justify-items:center;min-height:0}.connect4-column-buttons{display:grid;grid-template-columns:repeat(7,1fr);width:min(72vh,100%,720px);padding:0 2.5%;gap:1%;margin-bottom:6px}.connect4-column-button{min-height:38px;border:0;border-radius:8px;background:transparent;color:var(--accent);font:900 19px "Space Mono",monospace;cursor:pointer;transition:transform .14s,background .14s}.connect4-column-button:hover:not(:disabled){transform:translateY(3px);background:color-mix(in srgb,var(--accent) 12%,transparent)}.connect4-column-button:disabled{opacity:.18;cursor:not-allowed}.connect4-board{display:grid;grid-template-columns:repeat(7,1fr);width:min(72vh,100%,720px);aspect-ratio:7/6;padding:2.5%;gap:1.4%;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 75%,#20245d),#303683);box-shadow:inset 0 5px rgba(255,255,255,.12),0 30px 80px rgba(0,0,0,.42)}.connect4-slot{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--bg) 92%,#02030a);box-shadow:inset 0 7px 12px rgba(0,0,0,.6),0 2px rgba(255,255,255,.11)}.connect4-piece{width:88%;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 6px rgba(255,255,255,.22),inset 0 -6px rgba(0,0,0,.2),0 5px 9px rgba(0,0,0,.34)}.connect4-piece.red{background:linear-gradient(145deg,#ff7189,#ad173b)}.connect4-piece.yellow{background:linear-gradient(145deg,#ffe579,#d69a15)}.connect4-slot.just-dropped .connect4-piece{animation:connect4-drop .48s cubic-bezier(.22,.9,.35,1.18) both}.connect4-slot.winner .connect4-piece{animation:connect4-win .78s ease-in-out infinite alternate}.connect4-toast{position:absolute;z-index:30;left:50%;bottom:18px;transform:translateX(-50%);max-width:calc(100% - 28px);padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;background:color-mix(in srgb,var(--bg2) 94%,transparent);box-shadow:0 16px 40px rgba(0,0,0,.4);color:var(--text);font:700 12px "Lato",sans-serif}.connect4-toast[hidden]{display:none}.social-game-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}.game-pick-art.connect4{display:grid;grid-template-columns:repeat(3,42px);align-content:center;justify-content:center;gap:5px}.game-pick-art.connect4 i,.game-pick-art.connect4 b{display:block;width:42px;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#ff7189,#ad173b);box-shadow:inset 0 3px rgba(255,255,255,.2),0 5px 10px rgba(0,0,0,.3)}.game-pick-art.connect4 b{background:linear-gradient(145deg,#ffe579,#d69a15)}.social-connect4-start{background:linear-gradient(135deg,rgba(139,143,255,.19),rgba(255,211,82,.1))}.social-connect4-invite{background:linear-gradient(135deg,rgba(139,143,255,.17),rgba(255,211,82,.1))!important}.social-connect4-mark{width:42px;height:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:7px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:9px;background:color-mix(in srgb,var(--accent) 9%,var(--bg2))}.social-connect4-mark i{border-radius:50%;background:#e7425e}.social-connect4-mark i:nth-child(even){background:#efc13c}@keyframes connect4-drop{from{transform:translateY(-650%);opacity:.25}70%{transform:translateY(7%)}to{transform:none;opacity:1}}@keyframes connect4-win{to{transform:scale(.86);box-shadow:0 0 0 6px rgba(255,255,255,.7),0 0 28px #fff}}
@media(max-width:900px){.social-game-picker-grid{grid-template-columns:1fr}}@media(max-width:700px){.connect4-home{grid-template-columns:1fr;padding:28px 20px}.connect4-preview{width:min(290px,82vw);margin:auto}.connect4-match{padding:10px}.connect4-match-head{align-items:flex-start}.connect4-player-avatar{width:32px;height:32px}.connect4-match-head>div:nth-child(2){order:-1;align-items:flex-start;text-align:left}.connect4-match-head #connect4-rule-hint{display:none}.connect4-board,.connect4-column-buttons{width:min(100%,calc(100dvh - 250px))}.social-connect4-start span{display:none}.social-connect4-start{width:38px;padding:0}}@media(prefers-reduced-motion:reduce){.connect4-piece,.connect4-column-button{animation:none!important;transition:none!important}}