.checkers-surface,.social-game-picker{position:absolute;inset:0;z-index:12;overflow:auto;background:radial-gradient(circle at 72% 18%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 42%),color-mix(in srgb,var(--bg) 96%,#101129 4%);color:var(--text)}.checkers-surface[hidden],.social-game-picker[hidden]{display:none!important}.checkers-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)}.checkers-kicker,.social-game-picker header span{display:block;margin-bottom:14px;color:var(--accent);font:700 11px "Space Mono",monospace;letter-spacing:.16em}.checkers-home h2,.social-game-picker h2{margin:0;color:var(--white);font:900 clamp(42px,6vw,78px)/.94 "Lato",sans-serif;letter-spacing:-.055em}.checkers-home h2 em{color:var(--accent);font-style:normal}.checkers-home p,.social-game-picker header p{max-width:560px;margin:20px 0 0;color:var(--muted);font:500 16px/1.65 "Lato",sans-serif}.checkers-preview{display:grid;grid-template-columns:repeat(4,1fr);aspect-ratio:1;padding:10%;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:24px;background:linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%),linear-gradient(45deg,rgba(255,255,255,.055) 25%,transparent 25% 75%,rgba(255,255,255,.055) 75%);background-position:0 0,25% 25%;background-size:50% 50%;box-shadow:0 34px 80px rgba(0,0,0,.35);transform:rotate(4deg)}.checkers-preview i,.checkers-preview b{align-self:center;justify-self:center;width:68%;aspect-ratio:1;border-radius:50%}.checkers-preview i{background:linear-gradient(145deg,#ff7b93,#a91f47);box-shadow:inset 0 4px rgba(255,255,255,.2),0 8px 16px rgba(0,0,0,.35)}.checkers-preview b{background:linear-gradient(145deg,#c4c7ff,#555bb7);box-shadow:inset 0 4px rgba(255,255,255,.28),0 8px 16px rgba(0,0,0,.35)}
.checkers-match{min-height:100%;display:grid;grid-template-rows:auto minmax(330px,1fr) auto;gap:12px;padding:clamp(12px,2.5vw,28px)}.checkers-match[hidden]{display:none!important}.checkers-match-head,.checkers-match-foot{width:min(100%,780px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}.checkers-match-head>div:nth-child(2){display:flex;min-width:0;flex-direction:column;align-items:center;text-align:center}.checkers-match-head #checkers-turn{color:var(--white);font:800 clamp(15px,2vw,20px) "Lato",sans-serif}.checkers-match-head #checkers-rule-hint{margin-top:3px;color:var(--muted);font:600 11px "Space Mono",monospace}.checkers-player{display:flex;align-items:center;gap:9px;min-width:0}.checkers-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}.checkers-player-avatar img{width:100%;height:100%;object-fit:cover}.checkers-player span{display:flex;min-width:0;flex-direction:column}.checkers-player b{overflow:hidden;color:var(--white);font:800 14px "Lato",sans-serif;text-overflow:ellipsis;white-space:nowrap}.checkers-player small{color:var(--muted);font:700 9px "Space Mono",monospace;letter-spacing:.1em;text-transform:uppercase}#checkers-resign,#checkers-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}#checkers-resign:hover,#checkers-replay:hover{border-color:color-mix(in srgb,var(--accent) 52%,transparent);background:color-mix(in srgb,var(--accent) 15%,var(--bg2));color:var(--white)}#checkers-resign:focus-visible,#checkers-replay:focus-visible,.checkers-square:focus-visible,.social-game-picker-grid button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 75%,white);outline-offset:3px}.checkers-board-wrap{display:grid;place-items:center;min-height:0}.checkers-board{display:grid;grid-template-columns:repeat(8,1fr);width:min(70vh,100%,680px);aspect-ratio:1;overflow:hidden;border:clamp(7px,1.3vw,14px) solid color-mix(in srgb,var(--accent) 16%,#15162d);border-radius:16px;background:#17182b;box-shadow:0 30px 80px rgba(0,0,0,.42)}.checkers-square{position:relative;display:grid;place-items:center;min-width:0;border:0;border-radius:0;background:color-mix(in srgb,var(--white) 7%,var(--bg2));cursor:default}.checkers-square.dark{background:color-mix(in srgb,var(--accent) 17%,#17182b)}.checkers-square.can-select,.checkers-square.can-move{cursor:pointer}.checkers-square.can-select:after{content:"";position:absolute;inset:8%;border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;opacity:.7}.checkers-square.selected:after{inset:4%;border-color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent);opacity:1}.checkers-square.can-move:before{content:"";width:26%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--accent) 82%,white);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 60%,transparent)}.checker-piece{position:relative;z-index:2;width:72%;aspect-ratio:1;border:clamp(2px,.35vw,4px) solid rgba(255,255,255,.2);border-radius:50%;box-shadow:inset 0 5px rgba(255,255,255,.18),inset 0 -5px rgba(0,0,0,.22),0 7px 12px rgba(0,0,0,.36);transition:transform .16s ease}.checker-piece.red{background:linear-gradient(145deg,#ff718b,#a91843)}.checker-piece.black{background:linear-gradient(145deg,#afb3ff,#464b9a)}.checkers-square.can-select:hover .checker-piece{transform:translateY(-4px)}.checker-piece.king:after{content:"";position:absolute;inset:25%;border:3px solid #ffe18b;border-radius:50%;box-shadow:0 0 9px rgba(255,225,139,.5)}.checker-piece.king:before{content:"K";position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:#ffe18b;font:900 clamp(9px,1.4vw,17px) "Space Mono",monospace}.checkers-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}.checkers-toast[hidden]{display:none}
.social-game-picker{display:grid;align-content:center;padding:clamp(24px,6vw,72px)}.social-game-picker header,.social-game-picker-grid{width:min(900px,100%);margin-inline:auto}.social-game-picker-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}.social-game-picker-grid button{min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:18px;background:color-mix(in srgb,var(--accent) 7%,var(--bg2));color:var(--text);text-align:left;cursor:pointer;transition:border-color .16s,background .16s,transform .16s}.social-game-picker-grid button:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 13%,var(--bg2))}.social-game-picker-grid b{font:900 22px "Space Mono",monospace;letter-spacing:.06em}.social-game-picker-grid small{color:var(--muted);font:600 12px "Lato",sans-serif}.game-pick-art{width:100%;flex:1;position:relative;display:block}.game-pick-art.uno i{position:absolute;width:54px;height:78px;border:3px solid rgba(255,255,255,.75);border-radius:9px;left:50%;top:44%;background:#d83959}.game-pick-art.uno i:nth-child(1){transform:translate(-90%,-50%) rotate(-14deg)}.game-pick-art.uno i:nth-child(2){transform:translate(-50%,-58%);background:#486ee5}.game-pick-art.uno i:nth-child(3){transform:translate(-10%,-50%) rotate(14deg);background:#e0b532}.game-pick-art.checkers{display:grid;grid-template-columns:repeat(4,36px);align-content:center;justify-content:center}.game-pick-art.checkers i{width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,#ff718b,#a91843);box-shadow:inset 0 3px rgba(255,255,255,.2),0 5px 10px rgba(0,0,0,.3)}.game-pick-art.checkers i:nth-child(even){background:linear-gradient(145deg,#afb3ff,#464b9a)}.social-checkers-start{background:linear-gradient(135deg,rgba(139,143,255,.18),rgba(100,220,190,.08))}
.social-checkers-invite{background:linear-gradient(135deg,rgba(139,143,255,.17),rgba(70,195,170,.1))!important}.social-checkers-mark{width:42px;height:42px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;place-content:center;padding:6px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:9px;background:color-mix(in srgb,var(--accent) 9%,var(--bg2));transform:rotate(-3deg)}.social-checkers-mark i{display:block;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#ff718b,#a91843);box-shadow:inset 0 2px rgba(255,255,255,.2),0 3px 5px rgba(0,0,0,.3)}.social-checkers-mark i:nth-child(even){background:linear-gradient(145deg,#afb3ff,#464b9a)}
@media(max-width:700px){.checkers-home{grid-template-columns:1fr;padding:28px 20px}.checkers-preview{width:min(280px,80vw);margin:auto}.checkers-match{padding:10px}.checkers-match-head{align-items:flex-start}.checkers-player-avatar{width:32px;height:32px}.checkers-match-head>div:nth-child(2){order:-1;align-items:flex-start;text-align:left}.checkers-match-head #checkers-rule-hint{display:none}.checkers-board{width:min(100%,calc(100dvh - 230px))}.social-game-picker-grid{grid-template-columns:1fr}.social-game-picker-grid button{min-height:160px}.social-checkers-start span{display:none}.social-checkers-start{width:38px;padding:0}}@media(prefers-reduced-motion:reduce){.checker-piece,.social-game-picker-grid button{transition:none!important}}
.checkers-square.just-moved .checker-piece{animation:checkers-move-in .34s cubic-bezier(.2,.9,.3,1.2) both}.checkers-square.selected .checker-piece{animation:checkers-select .7s ease-in-out infinite alternate}@keyframes checkers-move-in{from{opacity:.25;transform:translateY(-45%) scale(.72)}70%{transform:translateY(5%) scale(1.05)}}@keyframes checkers-select{to{transform:translateY(-5px);filter:brightness(1.18)}}@media(prefers-reduced-motion:reduce){.checkers-square .checker-piece{animation:none!important}}