*{box-sizing:border-box}
body{margin:0;background:#f5f8fc;color:#243247;font-family:'Manrope',Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;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;text-decoration:none;letter-spacing:-1.2px}
.brand span{font-size:17px;color:#7b8da5;font-weight:500;letter-spacing:0}
.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:-5px}
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,480px) minmax(240px,1fr);gap:64px}
.stats{display:flex;gap:44px;padding:0 0 20px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats span{font-size:9px;letter-spacing:1.7px;color:#7286a0;font-weight:800}
.stats strong{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.board{position:relative;width:100%;aspect-ratio:8/10;border:9px solid #e1eaf6;border-radius:15px;background-color:#edf3fb;background-image:linear-gradient(to right,#dfe8f5 1px,transparent 1px),linear-gradient(to bottom,#dfe8f5 1px,transparent 1px);background-size:12.5% 10%;overflow:hidden;touch-action:none}
.danger{position:absolute;inset:0 0 auto;height:10%;border-bottom:1px dashed #8eabd7;background:#7aa5eb0b}
.block{position:absolute;border:3px solid transparent;background:none;padding:0;transition:top .2s ease,left .15s ease;touch-action:none}
.block span{display:flex;justify-content:space-around;align-items:center;width:100%;height:100%;border-radius:7px;background:var(--color);box-shadow:inset 0 -4px 0 #00000010,inset 0 1px 0 #ffffff40}
.block i{width:4px;height:4px;background:#ffffff65;border-radius:50%}
.block:hover span{filter:brightness(1.06)}
.c0{--color:#e69c78}
.c1{--color:#6692f1}
.c2{--color:#9a9fc5}
.c3{--color:#e1bd62}
.c4{--color:#79acc1}
.c5{--color:#cd8e9f}
.overlay{position:absolute;inset:0;background:#edf3fbeb;z-index:10;display:flex;align-items:center;justify-content:center;padding:24px}
.start-card{width:100%;max-width:280px}
.start-card h2{font-size:30px;letter-spacing:-1.3px;line-height:1.2;margin:24px 0 14px}
.start-card p{font-size:13px;color:#6e83a0;line-height:1.8;margin-bottom:28px}
.start-card label{display:block;font-size:11px;font-weight:700;margin-bottom:8px}
.start-card input{width:100%;border:1px solid #c5d6ee;border-radius:7px;padding:13px;background:#ffffffa0;color:#243247;outline-color:#2563eb}
.primary{border:0;background:#2563eb;color:white;padding:15px 18px;width:100%;border-radius:7px;margin-top:10px;font-size:13px;font-weight:700}
.mini-blocks{display:flex;gap:5px;align-items:flex-end;height:40px}
.mini-blocks i{height:28px;width:52px;background:#e69c78;border-radius:5px}
.mini-blocks i:nth-child(2){width:28px;background:#6692f1}
.mini-blocks i:nth-child(3){width:76px;background:#9a9fc5}
.under{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font-size:10px;color:#6e83a0}
.under button,.finish,.empty button{border:0;background:none;color:#2563eb;font-size:11px;padding:0}
.finish{margin:8px 0 0;color:#7087a5;text-decoration:underline}
.instructions{font-size:13px;line-height:1.8;background:#e9f1fc;padding:18px;border-radius:8px}
.error{font-size:12px;color:#a44237}
.leader-heading{padding-top:9px}
.leader-heading h2{font-size:24px;letter-spacing:-1px;margin:15px 0 9px;display:flex;justify-content:space-between}
.leader-heading h2 span{font-weight:400;color:#8fa4c2}
.leader-heading p{font-size:11px;color:#768ba8}
.table-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#7f93ad;border-bottom:1px solid #d9e4f2;padding:25px 0 12px}
ol{list-style:none;padding:0;margin:0}
li{display:flex;align-items:center;gap:17px;padding:17px 0;border-bottom:1px solid #e0e9f5;font-size:13px}
.rank{color:#8b9eb8;font-size:10px;width:18px}
li:first-child .rank{color:#2563eb}
.player{flex:1;overflow-wrap:anywhere}
li strong{font-size:13px}
.empty{min-height:250px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#8398b4}
.empty-mark{font-size:56px;font-weight:500;letter-spacing:-4px;color:#ccdcf1}
.empty h3{font-size:13px;color:#627e9f;font-weight:600;margin:8px}
.empty p{font-size:11px;line-height:1.8;margin:0}
.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}
.hint-blocks{display:flex;gap:5px}
.hint-blocks i{height:14px;background:#d9dfd0;width:36px;border-radius:3px}
.hint-blocks i:nth-child(2){width:64px;background:#e2d5c4}
.hint-blocks i:nth-child(3){width:24px;background:#d7d9e2}
.privacy{font-size:10px;color:#7f93ad;line-height:1.7;max-width:260px}
footer{display:flex;justify-content:space-between;border-top:1px solid #dce5f0;padding:22px 0;margin-top:40px;color:#7f93ad;font-size:10px}
small{font-size:17px;letter-spacing:0}
@media(min-width:1100px){.layout{gap:80px}
aside{padding-top:0}}
@media(max-width:720px){main{padding:0 20px;max-width:520px}
header{height:65px}
.edition{font-size:8px;letter-spacing:1px}
.intro{margin:28px 0 24px}
h1{font-size:56px;letter-spacing:-3px}
.intro p{font-size:13px}
.layout{grid-template-columns:1fr;gap:34px}
.stats{gap:42px;padding-bottom:16px}
.stats strong{font-size:26px}
.board{border-width:7px}
.under{font-size:9px}
.start-card h2{font-size:27px}
.start-card p{margin-bottom:18px}
.leader-heading h2{font-size:25px}
.empty{min-height:200px}
.note{display:none}
.privacy{max-width:none}
footer{margin-top:24px;font-size:9px}
.block{border-width:2px}}
/* One colour keeps attention on shape and space, not matching. */
.block{--color:#6692f1}
.mini-blocks i,.mini-blocks i:nth-child(2),.mini-blocks i:nth-child(3){background:#6692f1}
.hint-blocks i,.hint-blocks i:nth-child(2),.hint-blocks i:nth-child(3){background:#c3d8f7}
.block.clearing span{animation:clear-block 480ms ease-out both}
.row-burst{position:absolute;left:0;width:100%;z-index:8;pointer-events:none}
.row-flash{position:absolute;inset:2px;border-radius:6px;background:#e3efff;animation:row-flash 480ms ease-out both}
.row-burst>i{position:absolute;top:45%;width:7px;height:7px;background:#3b82f6;border-radius:2px;animation:row-fragment 480ms ease-out both}
.row-burst>i:nth-child(3n){background:#9cb8f6;width:10px;height:5px}
.row-burst>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px;color:#1e4e96;text-shadow:0 1px 4px #fff;font-variant-numeric:tabular-nums;animation:row-points 480ms ease-out both}
@keyframes clear-block{0%{filter:brightness(1)}25%{filter:brightness(1.45);transform:scaleY(1.08)}100%{opacity:0;transform:scale(.82,.3)}}
@keyframes row-flash{0%{opacity:0;transform:scaleX(.85)}22%{opacity:.9;transform:scaleX(1)}100%{opacity:0;transform:scaleY(.12)}}
@keyframes row-fragment{0%,15%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.4)}}
@keyframes row-points{0%{opacity:0;transform:translateY(5px) scale(.9)}30%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@media(prefers-reduced-motion:reduce){.block{transition:none}
.block.clearing span,.row-flash,.row-burst>i,.row-burst>b{animation:none}
.row-burst{display:none}}
/* Additions for the static version. */
[hidden]{display:none!important}
body{min-height:100vh}
footer a{color:inherit}
form{margin:0}
.start-card form{margin-top:4px}
.error:empty{display:none}
.retry{border:0;background:none;color:#2563eb;font-size:12px;font-weight:700;padding:0;margin:-14px 0 22px}
.block:focus-visible{outline:3px solid #2563eb;outline-offset:-3px;z-index:4}
.block.dragging{z-index:5;transition:top .2s ease}
.board{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.name-error{font-size:12px;line-height:1.5;color:#a44237;margin:8px 0 0}
.name-error:empty{display:none}
.start-card input[aria-invalid=true]{border-color:#d9897f}
.shake{animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}}