/* Shift's visual system: the blue accent, the road as the board. */
*{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: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;letter-spacing:-1.2px}
.brand a{color:inherit;text-decoration:none}
.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:-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,640px) minmax(240px,1fr);gap:64px}
.layout>*{min-width:0}

.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}
.bars{display:flex;gap:4px;align-items:flex-end;height:33px}
.bars i{width:8px;border-radius:2px;background:#dce5f0;transition:background .3s}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:52%}.bars i:nth-child(3){height:76%}.bars i:nth-child(4){height:100%}
.bars i.on{background:#2563eb}

/* The road: the canvas, a banner over it, and the cards before and after a game. */
.stage{position:relative;border:9px solid #e1eaf6;border-radius:15px;background:#fff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
.stage.waiting{cursor:default}
.stage canvas#road{display:block;width:100%;max-width:100%;height:auto}
.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:#f5f8fcf2;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px 24px}
.card{display:flex;gap:22px;align-items:flex-end;width:100%;max-width:520px}
.portrait{flex:none;width:auto;height:250px;border-radius:14px;background:#fff}
.card-body{flex:1;min-width:0;align-self:center}
.card h2{font-size:22px;letter-spacing:-.8px;line-height:1.25;margin:10px 0 8px}
.card h2 small{font-size:15px;color:#7286a0;letter-spacing:0;font-weight:600}
#final-score{font-size:52px;letter-spacing:-2px;color:#2563eb;font-variant-numeric:tabular-nums}
.card p{font-size:13px;color:#6e83a0;line-height:1.7;margin:0 0 6px}
.card p.quote{font-size:15px;color:#243247;font-weight:600}
.card label{display:block;font-size:11px;font-weight:700;margin:12px 0 8px}
.card input{width:100%;border:1px solid #c5d6ee;border-radius:7px;padding:12px 13px;background:#fff;color:#243247;outline-color:#2563eb}
.card input[aria-invalid=true]{border-color:#d9897f}
.legend{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:8px 0 2px}
.legend div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.legend b{font-size:12px}
.legend small{font-size:10px;line-height:1.3;color:#7286a0}
.primary{display:block;border:0;background:#2563eb;color:#fff;padding:14px 18px;width:100%;border-radius:7px;margin-top:10px;font-size:13px;font-weight:700;text-align:center;text-decoration:none}
.link,.retry{border:0;background:none;color:#647b98;font-size:12px;font-weight:700;padding:14px 0 0;width:100%}
.retry{color:#2563eb;padding-top:6px}
.name-error{font-size:12px!important;line-height:1.5;color:#a44237!important;margin:8px 0 0!important}
.name-error:empty{display:none}
.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)}}

.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 p{margin:0 0 8px}
.instructions ul{margin:0;padding-left:18px}
.error{font-size:12px;color:#a44237}
.error:empty{display:none}

.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 .found{font-size:11px;color:#8b9eb8}
li strong{font-size:13px;font-variant-numeric:tabular-nums}
.empty{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#8398b4}
.empty-bars{display:flex;gap:6px;align-items:flex-end;height:46px}
.empty-bars i{width:11px;border-radius:2px;background:#c5d6ee}
.empty-bars i:nth-child(1){height:30%}.empty-bars i:nth-child(2){height:52%}.empty-bars i:nth-child(3){height:76%}.empty-bars i:nth-child(4){height:100%}
.empty h3{font-size:13px;color:#627e9f;font-weight:600;margin:8px}
.empty p{font-size:11px;line-height:1.8;margin:0}
.empty button{border:0;background:none;color:#2563eb;font-size:11px;padding:0;margin-top:8px}
.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 24px}
h1{font-size:44px;letter-spacing:-2.5px}
.mobile{display:inline}
.intro p{font-size:13px}
.layout{grid-template-columns:1fr;gap:34px}
.stats{gap:24px;padding-bottom:14px}
.stats strong{font-size:24px}
.bars{height:27px}
.stage{border-width:5px}
/* The road is too low for a card on a phone: while one is shown it takes the stage's place. */
.stage.waiting .overlay{position:relative;inset:auto}
.stage.waiting canvas#road{position:absolute;inset:0}
.card{flex-direction:column;align-items:center;text-align:center;gap:10px}
.card .eyebrow{justify-content:center}
.portrait{height:130px}
.card h2{font-size:19px}
.under{font-size:10px}
.note p{font-size:16px}
.privacy{max-width:none}
footer{margin-top:24px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}}

/* Header: puzzle label and the theme toggle. */
.top-actions{display:flex;align-items:center;gap:14px}

/* Dark theme (data-theme=dark on <html>, set by /theme.js): generated from the light colours above —
   backgrounds flipped dark, text light, accents kept. Hand-tuned rules follow it. */
/* Dark theme (data-theme=dark on <html>, set by /theme.js): generated from the light colours above —
   backgrounds flipped dark, text light, accents kept. Hand-tuned rules follow it. */
:root[data-theme=dark] body{background:#0f151c;color:#dfe4ec}
:root[data-theme=dark] button:focus-visible,:root[data-theme=dark] a:focus-visible{outline:3px solid #2563eb}
:root[data-theme=dark] header{border-bottom:1px solid #202933}
:root[data-theme=dark] .brand{color:#dfe4ec}
:root[data-theme=dark] .brand span{color:#738298}
:root[data-theme=dark] .edition{color:#738298}
:root[data-theme=dark] .eyebrow{color:#8796a9}
:root[data-theme=dark] .eyebrow i{background:#2563eb}
:root[data-theme=dark] h1 span{color:#5d8bf0}
:root[data-theme=dark] .intro p{color:#7b8a9e}
:root[data-theme=dark] .stats span{color:#7b8a9e}
:root[data-theme=dark] .bars i{background:#202933}
:root[data-theme=dark] .bars i.on{background:#2563eb}
:root[data-theme=dark] .stage{border:9px solid #19222e;background:#121212}
:root[data-theme=dark] .banner{background:#dfe4ec;color:#fff}
:root[data-theme=dark] .overlay{background:#0f151cf2}
:root[data-theme=dark] .portrait{background:#121212}
:root[data-theme=dark] .card h2 small{color:#7b8a9e}
:root[data-theme=dark] #final-score{color:#5d8bf0}
:root[data-theme=dark] .card p{color:#7c8ca1}
:root[data-theme=dark] .card p.quote{color:#dfe4ec}
:root[data-theme=dark] .card input{border:1px solid #263447;background:#121212;color:#dfe4ec;outline-color:#2563eb}
:root[data-theme=dark] .card input[aria-invalid=true]{border-color:#d9897f}
:root[data-theme=dark] .legend small{color:#7b8a9e}
:root[data-theme=dark] .primary{background:#2563eb;color:#fff}
:root[data-theme=dark] .link,:root[data-theme=dark] .retry{color:#8796a9}
:root[data-theme=dark] .retry{color:#5d8bf0}
:root[data-theme=dark] .name-error{color:#c55e53!important}
: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] .error{color:#c55e53}
:root[data-theme=dark] .leader-heading h2 span{color:#526784}
:root[data-theme=dark] .leader-heading p{color:#71839c}
:root[data-theme=dark] .table-head{color:#697c95;border-bottom:1px solid #1f2935}
:root[data-theme=dark] li{border-bottom:1px solid #1a232f}
:root[data-theme=dark] .rank{color:#5c6f88}
:root[data-theme=dark] li:first-child .rank{color:#5d8bf0}
:root[data-theme=dark] li .found{color:#5c6f88}
:root[data-theme=dark] .empty{color:#617591}
:root[data-theme=dark] .empty-bars i{background:#263447}
:root[data-theme=dark] .empty h3{color:#8194aa}
:root[data-theme=dark] .empty button{color:#5d8bf0}
:root[data-theme=dark] .note{border-top:1px solid #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}
:root[data-theme=dark] footer{border-top:1px solid #202933;color:#697c95}
/* Hand-tuned */
/* The farmer is drawn on a light background, so the pictures stay on white. */
:root[data-theme=dark] .portrait{background:#fff}
:root[data-theme=dark] .card input{background:#151d27;border-color:#2b3644;color:#dfe4ec}
:root[data-theme=dark] .banner{background:#dfe4ec;color:#0f151c}