/* Checkers: the games' blue visual system, the board in its colours. */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:#f5f8fc;color:#243247;font-family:'Manrope',Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
button:focus-visible,a:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
main{max-width:1136px;margin:auto;padding:0 48px}
header{height:86px;border-bottom:1px solid #dce5f0;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:25px;font-weight:800;color:#243247;letter-spacing:-1.2px}
.brand a{color:inherit;text-decoration:none}
.brand span{font-size:17px;color:#7b8da5;font-weight:500;letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:14px}
.edition,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px}
.edition{color:#7b8da5}
.intro{margin:44px 0 30px}
.eyebrow{color:#647b98;display:flex;align-items:center;gap:8px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#2563eb}
h1{font-size:70px;line-height:1;margin:15px 0;letter-spacing:-4px}
h1 span{color:#2563eb}
.intro p{font-size:15px;color:#7286a0;margin:0;line-height:1.7}
.mobile{display:none}
.layout{display:grid;grid-template-columns:minmax(300px,600px) minmax(240px,1fr);gap:64px}
.layout>*{min-width:0}

/* A player's strip above and below the board: piece, name, pieces left, online dot. */
.player{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 2px;font-size:14px;font-weight:700}
.player:empty{visibility:hidden}
.player .disc{width:22px;height:22px;flex:none}
.player .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .you{font-size:11px;font-weight:600;color:#7286a0}
.player .left{margin-left:auto;font-size:13px;color:#7286a0;font-variant-numeric:tabular-nums;white-space:nowrap}
.player .dot{width:8px;height:8px;border-radius:50%;background:#c5d6ee;flex:none}
.player .dot.on{background:#22c55e}
.player.turn .name{color:#2563eb}

/* The board. */
.stage{position:relative;border:9px solid #e1eaf6;border-radius:15px;background:#fff;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%}
.sq{position:relative;border:0;padding:0;margin:0;background:#eef3fa;display:flex;align-items:center;justify-content:center;cursor:default}
.sq.dark{background:#7c98c0}
.sq.dark.last{background:#5f80b0}
.sq.dark.path{background:#4f72a6}
.sq.can{cursor:pointer}
.sq.target{cursor:pointer}
.sq.target::after{content:'';position:absolute;width:26%;height:26%;border-radius:50%;background:#ffffffb3;box-shadow:0 0 0 2px #2563eb}
.sq:focus-visible{outline:3px solid #fbbf24;outline-offset:-3px;z-index:1}
.disc{display:block;width:78%;height:78%;border-radius:50%;position:relative}
.disc.w{background:radial-gradient(circle at 50% 45%,#fff 0 52%,#e9eef5 53% 62%,#fff 63%);box-shadow:0 2px 0 #b7c6db,0 0 0 1px #b7c6db}
.disc.b{background:radial-gradient(circle at 50% 45%,#2d3d55 0 52%,#3d5070 53% 62%,#2d3d55 63%);box-shadow:0 2px 0 #121a26,0 0 0 1px #121a26}
.disc.king::after{content:'';position:absolute;inset:24%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l1-11-5 4-5-7-5 7-5-4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18l1-11-5 4-5-7-5 7-5-4z'/%3E%3C/svg%3E") center/contain no-repeat}
.disc.w.king{color:#2563eb}
.disc.b.king{color:#fbbf24}
.sq .disc.selected{box-shadow:0 0 0 4px #fbbf24}
.sq .disc.taken{opacity:.35}
.sq.can:hover .disc{transform:translateY(-1px)}
.board.flash{animation:flash .5s}
@keyframes flash{50%{filter:brightness(1.1)}}

.banner{position:absolute;left:50%;top:14px;transform:translateX(-50%);max-width:92%;background:#243247;color:#fff;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:700;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none;z-index:5}
.banner.show{opacity:1}
.overlay{position:absolute;inset:0;background:#f5f8fcee;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px 24px;overflow:auto}
.stage:not(.waiting) .overlay{display:none}
.card{width:100%;max-width:440px;margin:auto}
.card h2{font-size:24px;letter-spacing:-.8px;line-height:1.25;margin:10px 0 8px}
.card p{font-size:13px;color:#6e83a0;line-height:1.7;margin:0 0 6px}
.card p.center{text-align:center;font-weight:700}
.card label,.card .label{display:block;font-size:11px;font-weight:700;margin:14px 0 8px}
.card input{width:100%;border:1px solid #c5d6ee;border-radius:7px;padding:12px 13px;background:#fff;color:#243247;outline-color:#2563eb}
.card .small{font-size:12px;margin-top:10px}
.card .small a,.card p a{color:#2563eb}
.card .warn{color:#a44237}
.card .waiting{font-weight:700;color:#243247}
.rules{display:inline-flex;gap:4px;padding:4px;border:1px solid #dce5f0;border-radius:999px;background:#e9eef5}
.rules button{border:0;background:none;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:700;color:#7286a0}
.rules button[aria-checked=true]{background:#fff;color:#243247;box-shadow:0 1px 3px rgba(20,30,50,.12)}
.rules-text{margin-top:8px!important;min-height:44px}
.primary{display:block;border:0;background:#2563eb;color:#fff;padding:14px 18px;width:100%;border-radius:7px;margin-top:14px;font-size:13px;font-weight:700;text-align:center;text-decoration:none}
.link{border:0;background:none;color:#647b98;font-size:12px;font-weight:700;padding:14px 0 0;width:100%}
.invite{display:flex;gap:18px;align-items:flex-start;margin-top:12px}
.qr{flex:none;width:132px;height:132px;background:#fff;border-radius:8px;padding:4px}
.qr svg{display:block;width:100%;height:100%}
.invite-body{flex:1;min-width:0}
.link-row{display:flex;gap:6px;margin-bottom:10px}
.link-row input{flex:1;min-width:0;font-size:12px;padding:10px}
.link-row button{flex:none;border:0;border-radius:7px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;padding:0 14px}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 0 0;font-size:13px}
.controls #status{font-weight:700;flex:1;min-width:140px}
.controls .buttons{display:flex;gap:8px}
.controls button{border:1px solid #dce5f0;background:#fff;color:#243247;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700}
.controls button:hover:not(:disabled){border-color:#6692f1}
.offer{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#e9f1fc;border-radius:8px;padding:10px 12px;font-weight:700}
.offer span{flex:1;min-width:140px}
.offer #accept{background:#2563eb;border-color:#2563eb;color:#fff}

.under{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font-size:11px;color:#6e83a0}
.under button{border:0;background:none;color:#2563eb;font-size:11px;padding:0;white-space:nowrap}
.instructions{font-size:13px;line-height:1.8;background:#e9f1fc;padding:18px;border-radius:8px}
.instructions ul{margin:0;padding-left:18px}

.how h2{font-size:24px;letter-spacing:-1px;margin:15px 0 12px}
.how ol{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.7;color:#4a5f7d}
.how p{font-size:13px;line-height:1.7;color:#768ba8;margin:0 0 14px}
.downloads{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:8px}
.downloads a{display:inline-block;padding:8px 14px;border:1px solid #dce5f0;border-radius:999px;background:#fff;color:#243247;font-size:12px;font-weight:700;text-decoration:none}
.downloads a:hover{border-color:#6692f1}
.note{border-top:1px solid #d9e4f2;padding:26px 0}
.note>span{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#8199b5}
.note p{font-size:18px;line-height:1.5;letter-spacing:-.4px;color:#637f9e;margin:15px 0}
.cta-link{font-size:13px;font-weight:700;color:#2563eb;text-decoration:none;line-height:1.6}
.cta-link:hover{text-decoration:underline}
.privacy{font-size:10px;color:#7f93ad;line-height:1.7;max-width:260px}
footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #dce5f0;padding:22px 0;margin-top:40px;color:#7f93ad;font-size:10px}
footer a{color:inherit}
@media(min-width:1100px){.layout{gap:80px}}
@media(max-width:720px){main{padding:0 20px;max-width:560px}
header{height:65px}
.edition{font-size:8px;letter-spacing:1px}
.intro{margin:28px 0 20px}
h1{font-size:44px;letter-spacing:-2.5px}
.mobile{display:inline}
.intro p{font-size:13px}
.layout{grid-template-columns:1fr;gap:34px}
.stage{border-width:5px}
/* A card is taller than the board on a phone: while one is shown it takes the board's place. */
.stage.waiting .overlay{position:relative;inset:auto;min-height:100%}
.stage.waiting .board{position:absolute;inset:0;opacity:.25}
.card h2{font-size:20px}
.invite{flex-direction:column;align-items:center}
.qr{width:150px;height:150px}
.invite-body{width:100%}
.note p{font-size:16px}
.privacy{max-width:none}
footer{margin-top:24px;font-size:9px}}
@media(max-width:520px){.edition{display:none}}

/* Dark theme (data-theme=dark on <html>, set by /theme.js). */
:root[data-theme=dark] body{background:#0f151c;color:#dfe4ec}
:root[data-theme=dark] header,:root[data-theme=dark] footer{border-color:#202933}
:root[data-theme=dark] .brand{color:#dfe4ec}
:root[data-theme=dark] .brand span,:root[data-theme=dark] .edition{color:#738298}
:root[data-theme=dark] .eyebrow{color:#8796a9}
:root[data-theme=dark] h1 span{color:#5d8bf0}
:root[data-theme=dark] .intro p{color:#7b8a9e}
:root[data-theme=dark] .player .you,:root[data-theme=dark] .player .left{color:#7b8a9e}
:root[data-theme=dark] .player .dot{background:#2b3644}
:root[data-theme=dark] .player .dot.on{background:#22c55e}
:root[data-theme=dark] .player.turn .name{color:#5d8bf0}
:root[data-theme=dark] .stage{border-color:#19222e;background:#121820}
:root[data-theme=dark] .sq{background:#1c2633}
:root[data-theme=dark] .sq.dark{background:#3e5b85}
:root[data-theme=dark] .sq.dark.last{background:#4b6b99}
:root[data-theme=dark] .sq.dark.path{background:#5878a8}
:root[data-theme=dark] .disc.b{box-shadow:0 2px 0 #0a0f16,0 0 0 1px #6a7f9f}
:root[data-theme=dark] .banner{background:#dfe4ec;color:#0f151c}
:root[data-theme=dark] .overlay{background:#0f151cee}
:root[data-theme=dark] .card p{color:#7c8ca1}
:root[data-theme=dark] .card .waiting{color:#dfe4ec}
:root[data-theme=dark] .card .warn{color:#e08a80}
:root[data-theme=dark] .card .small a,:root[data-theme=dark] .card p a{color:#5d8bf0}
:root[data-theme=dark] .card input{background:#151d27;border-color:#2b3644;color:#dfe4ec}
:root[data-theme=dark] .rules{background:#151d27;border-color:#2b3644}
:root[data-theme=dark] .rules button{color:#8796a9}
:root[data-theme=dark] .rules button[aria-checked=true]{background:#2a3442;color:#dfe4ec;box-shadow:none}
:root[data-theme=dark] .link{color:#8796a9}
:root[data-theme=dark] .controls button{background:#151d27;border-color:#2b3644;color:#dfe4ec}
:root[data-theme=dark] .offer{background:#101a28}
:root[data-theme=dark] .offer #accept{background:#2563eb;border-color:#2563eb;color:#fff}
:root[data-theme=dark] .under{color:#7c8ca1}
:root[data-theme=dark] .under button{color:#5d8bf0}
:root[data-theme=dark] .instructions{background:#101a28}
:root[data-theme=dark] .how ol{color:#a9b5c4}
:root[data-theme=dark] .how p{color:#71839c}
:root[data-theme=dark] .downloads a{background:#151d27;border-color:#2b3644;color:#dfe4ec}
:root[data-theme=dark] .note{border-color:#1f2935}
:root[data-theme=dark] .note>span{color:#607793}
:root[data-theme=dark] .note p{color:#8295a9}
:root[data-theme=dark] .cta-link{color:#5d8bf0}
:root[data-theme=dark] .privacy{color:#697c95}
#join-error:empty{display:none}