:root{font-family:Arial,sans-serif;color:#293b37;background:#f4f2e9}*{box-sizing:border-box}body{margin:0}main{max-width:860px;margin:auto;padding:32px 28px}header{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#7c857b}a{color:inherit;text-decoration:none;font-size:13px;letter-spacing:0}.intro{margin:42px 0 28px}.eyebrow{font-size:10px;letter-spacing:2px;color:#347660}h1{font:normal clamp(44px,7vw,66px) Georgia,serif;letter-spacing:-3px;margin:10px 0}h1 span{color:#dc7969}.intro>p:last-child{color:#7c857b;font-size:15px}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid #347660;outline-offset:4px}nav{display:flex;gap:12px;margin-bottom:20px}nav button{flex:1;text-align:left;padding:16px 20px;border:1px solid #d8dcd0;border-radius:12px;background:transparent;color:#7c857b;font-size:12px}nav strong{font-weight:500;color:#293b37;font-size:15px;margin-left:12px}nav small{display:block;margin:7px 0 0 28px}nav button[aria-pressed=true]{background:#e6ecdf;border-color:#9cae95}.game{background:#fffef8;border:1px solid #dedfd3;border-radius:18px;overflow:hidden}.board-top{display:flex;justify-content:space-between;gap:12px;padding:23px 26px;font-size:12px;color:#7c857b}#score{color:#347660;white-space:nowrap}#board{position:relative;margin:0 20px;background-image:radial-gradient(#a4ad942f 1px,transparent 1px);background-size:20px 20px}svg{width:100%;display:block;max-height:440px}.edge{stroke:#b4b9ab;stroke-width:2.5;stroke-dasharray:6 7;stroke-linecap:round}.edge.ok{stroke:#347660;stroke-dasharray:none}.node{cursor:pointer}.node circle{stroke:#fffef8;stroke-width:6;filter:drop-shadow(0 3px 3px #293b3720)}.node:hover circle{stroke:#dce7d6}.node text{fill:white;font-size:12px;font-weight:bold;pointer-events:none}.legend{display:flex;justify-content:center;gap:24px;padding:15px 8px 25px;color:#7c857b;font-size:11px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ecece3;padding:18px 24px}#reset{border:0;background:none;color:#7c857b;font-size:12px}#finish{background:#293b37;color:#fffef8;border:0;border-radius:8px;padding:13px 20px;font-size:13px}#finish:hover{background:#347660}#message{text-align:center;font-size:12px;line-height:1.7;color:#7c857b;margin:20px 0}#picker{position:absolute;z-index:2;transform:translate(-50%,-100%);margin-top:-28px;background:#fffef8;border:1px solid #d9dece;box-shadow:0 5px 24px #293b3730;padding:12px;border-radius:12px;white-space:nowrap}#picker p{margin:0 0 9px;font-size:10px;text-align:center;color:#7c857b}#picker button{width:34px;height:34px;margin:0 4px;border:3px solid #fffef8;border-radius:50%;color:white}#picker button[aria-pressed=true]{outline:2px solid #293b37}@media(max-width:550px){main{padding:24px 16px}header span{font-size:8px}.intro{margin-top:30px}nav button{padding:13px 12px}.board-top{padding:18px 14px;font-size:10px}#board{margin:0 4px}.legend{gap:12px;font-size:9px}footer{padding:16px}#picker{padding:9px}#picker button{width:30px;height:30px;margin:0 2px}}

.edge-hint{visibility:hidden;pointer-events:none}
.introspecting .edge-hint{visibility:visible}
#introspect{position:absolute;top:5px;right:5px;z-index:1;padding:9px 13px;border:1px solid #d8dcd0;border-radius:8px;background:#fffef8;color:#67786b;font-size:11px;touch-action:none;user-select:none;-webkit-user-select:none}
#introspect[aria-pressed=true]{background:#e6ecdf;border-color:#9cae95;color:#293b37}

.restart-actions{display:flex;align-items:center;gap:18px}
#new-puzzle{border:0;background:none;color:#347660;font-size:12px;padding:6px 0}
#new-puzzle:hover{color:#293b37}
@media(max-width:400px){.restart-actions{gap:10px}#reset,#new-puzzle{font-size:11px}#finish{padding:12px}}

.node{touch-action:none;user-select:none;-webkit-user-select:none}
#picker button{width:44px;height:44px;touch-action:manipulation;transition:transform .1s,box-shadow .1s}
#picker button.drag-target{transform:scale(1.16);box-shadow:0 0 0 3px #293b37;outline:none}
#picker{margin-top:-32px}

#picker{white-space:normal;padding:12px;border-radius:18px}
#picker:not([hidden]){display:grid;grid-template-columns:44px 44px;gap:10px 14px;justify-items:center}
#picker button{margin:0}
#picker button:nth-child(3){grid-column:1 / 3}

/* Dark palette */
:root{color-scheme:dark;color:#e5eade;background:#171d1b}
header,.intro>p:last-child,#message{color:#99a79c}
.eyebrow{color:#9cbea4}
nav button{background:#1c2420;border-color:#3a463e;color:#a1afa5}
nav strong{color:#e5eade}
nav button[aria-pressed=true]{background:#2c3b30;border-color:#6c8870}
.game{background:#202823;border-color:#3a463e}
.board-top{color:#a1afa5}
#score{color:#a6d3b3}
#board{background-image:radial-gradient(#a4ad9426 1px,transparent 1px)}
.edge{stroke:#718076}
.edge.ok{stroke:#9ecbab}
.node circle{stroke:#202823;filter:drop-shadow(0 3px 4px #0004)}
.node:hover circle{stroke:#526b59}
.legend,#reset{color:#a1afa5}
footer{border-color:#3a463e}
#finish{background:#b8d1bb;color:#17251b}
#finish:hover{background:#cce0ce}
#new-puzzle{color:#acd0b3}
#new-puzzle:hover{color:#e5eade}
#introspect{background:#27322b;color:#bbcebe;border-color:#4b5b4e}
#introspect[aria-pressed=true]{background:#405745;color:#f0f5ed;border-color:#8aaa8b}
#picker{background:#303c33;border-color:#526557;box-shadow:0 5px 24px #0006}
#picker button{border-color:#303c33}
#picker button[aria-pressed=true]{outline-color:#e5eade}
#picker button.drag-target{box-shadow:0 0 0 3px #f3f4e9}
button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline-color:#b8d1bb}

#results{position:relative;width:min(400px,calc(100% - 32px));padding:30px;border:1px solid #526557;border-radius:20px;background:#202823;color:#e5eade;box-shadow:0 20px 80px #0007;text-align:center}
#results::backdrop{background:#0b100dba;backdrop-filter:blur(4px)}
#results h2{font:normal 32px Georgia,serif;margin:12px 0}
.close-results{position:absolute;right:12px;top:8px;border:0;background:none;color:#a1afa5;font-size:26px}
.result-score{font:normal 52px Georgia,serif;margin:20px 0 4px;color:#b8d1bb}
.score-caption,#result-edges,.move-note{font-size:12px;color:#a1afa5;line-height:1.6}
#result-summary{font-size:14px;line-height:1.6}
.move-stats{display:flex;justify-content:space-around;border-block:1px solid #3a463e;padding:20px 0;margin:22px 0 12px}
.move-stats dt{font-size:12px;color:#a1afa5}.move-stats dd{margin:8px 0 0;font-size:28px}
#next-puzzle{width:100%;margin-top:12px;padding:14px;border:0;border-radius:8px;background:#b8d1bb;color:#17251b}

.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:42px 0 30px}
.intro .eyebrow{margin:14px 0 0;font-size:10px;color:#9cbea4}
.level-rocker{position:relative;display:flex;flex-shrink:0;gap:0;margin:0;border:1px solid #526557;border-radius:30px;padding:4px;background:#202823}
.level-rocker button{position:relative;flex:none;width:48px;height:38px;padding:0;border:0;border-radius:24px;background:transparent;color:#a1afa5;text-align:center;font-size:12px;transition:background .15s,color .15s}
.level-rocker button[aria-pressed=true]{background:#b8d1bb;color:#17251b;border:0;box-shadow:0 2px 5px #0003}
#board{margin-top:20px}
.game footer{justify-content:flex-end}
@media(max-width:550px){.intro{gap:12px;margin:30px 0 24px}h1{font-size:42px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.level-rocker button{width:34px;height:32px}}

.intro{margin-top:16px;margin-bottom:26px}
.game footer{justify-content:space-between;gap:24px}
.play-note{max-width:560px;text-align:left}
.play-note p{font-size:11px;line-height:1.6;color:#c1cec2;margin:0}
.play-note .manifesto{color:#91a394;margin-top:5px}
#finish{flex-shrink:0}
@media(max-width:550px){.intro{margin-top:12px;margin-bottom:22px}.game footer{gap:14px;align-items:flex-end}.play-note p{font-size:10px}}

#difficulty{position:absolute;top:13px;left:12px;color:#d7b151;font-size:15px;letter-spacing:4px;z-index:1}

/* The vertex picker must be able to extend above the rounded card. */
.game{overflow:visible}
.game footer{border-radius:0 0 18px 18px}

.legend{flex-direction:column;align-items:flex-start;gap:8px;padding:15px 26px 25px}
@media(max-width:550px){.legend{padding-left:16px}}

/* Match the portfolio's charcoal and warm monochrome foundation. */
:root{background:var(--bg);color:var(--text);font-family:var(--font-body)}
body{background:var(--bg);color:var(--text)}
h1{font-family:var(--font-body);font-weight:500}
h1 span,.eyebrow,.intro .eyebrow,#difficulty{color:var(--text)}
header,.legend,#message{color:var(--muted)}
a:hover{color:var(--text)}
.game,#results{background:var(--panel);border-color:var(--line);color:var(--text)}
#board{background-image:radial-gradient(#94968e26 1px,transparent 1px)}
.edge{stroke:#3c3e39}.edge.ok{stroke:var(--text)}
.node circle{stroke:var(--panel)}.node:hover circle{stroke:#777b72}
.node text{fill:#131512}
footer,.move-stats{border-color:var(--line)}
.play-note p{color:var(--text)}.play-note .manifesto{color:var(--muted)}
#finish,#next-puzzle{background:var(--text);color:var(--bg)}
#finish:hover,#next-puzzle:hover{background:#efede6}
#picker{background:var(--panel-2);border-color:var(--line)}
#picker button{border-color:var(--panel-2);color:var(--bg)}
#picker button[aria-pressed=true]{outline-color:var(--text)}
#picker button.drag-target{box-shadow:0 0 0 3px var(--text)}
#results::backdrop{background:#090a09ba}
.close-results,.score-caption,#result-edges,.move-note,.move-stats dt{color:var(--muted)}
.result-score{color:var(--text)}
button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline-color:var(--text)}

#finish:disabled,#finish:disabled:hover{background:var(--panel-2);color:var(--muted);cursor:not-allowed;opacity:.65}

.game>.manifesto{margin:0;padding:22px 26px 0;color:var(--muted);font-size:11px;line-height:1.6}
.game-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:15px 26px 26px}
.game-bottom .legend{padding:0;gap:8px}
.instruction{margin:12px 0 0;color:var(--text);font-size:11px;line-height:1.6}
@media(max-width:550px){.game>.manifesto{padding:18px 16px 0;font-size:10px}.game-bottom{padding:15px 16px 20px;gap:12px}.instruction{font-size:10px}}

.game{position:relative}
#difficulty{top:22px;right:26px;left:auto}
.game>.manifesto{padding-right:110px}
@media(max-width:550px){#difficulty{top:18px;right:16px}.game>.manifesto{padding-right:95px}}

.game-bottom .legend{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px 20px}
.instruction{margin:0 0 12px}

.edge-fill{stroke-width:2.5;stroke-linecap:round;pointer-events:none}

.node text.node-score{fill:var(--text);font-size:11px;font-weight:500}

.node text.node-score{fill:var(--bg);font-size:14px;font-weight:600}

.node text.node-score{font-weight:600;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}

.edge-same{stroke-dasharray:none}
.edge-different{stroke-dasharray:6 7}

.edge-same,.edge-different{stroke-dasharray:none}
.edge-rule{pointer-events:none}
.edge-rule circle{fill:var(--panel);stroke:var(--line);stroke-width:1}
.edge-rule text{fill:var(--text);font:600 16px var(--font-body);text-anchor:middle;dominant-baseline:central}

.edge-same{stroke-width:5}
.edge-different{stroke-width:2}
.legend-line{display:inline-block;width:24px;background:var(--muted);border-radius:3px;vertical-align:middle;margin-right:7px}
.legend-line.same{height:5px}
.legend-line.different{height:2px}

.edge-same{stroke-width:10}
.legend-line.same{height:10px}

.edge-same,.edge-different{stroke-width:2.5;stroke-dasharray:none}

.edge-view .edge{transition:stroke .25s ease}
.edge-view.unhappy .edge{stroke:#3c3e39}

.edge-outline{stroke:#fff;stroke-width:4.5;stroke-linecap:round;opacity:0;transition:opacity .3s ease;pointer-events:none}
.edge-view.satisfied .edge-outline{opacity:1}

.node circle.node-halo,.node:hover circle.node-halo{fill:none;stroke:#fff;stroke-width:9;filter:none;opacity:0;transition:opacity .25s ease}
.node.fully-satisfied circle.node-halo{opacity:1}

.node circle.node-halo,.node:hover circle.node-halo{stroke-width:13}

/* SVG groups get rectangular browser outlines; keep node focus circular. */
.node:focus,.node:focus-visible{outline:none}
.node:focus-visible circle.node-face{stroke:var(--muted)}

.node-sparkle{pointer-events:none}



#picker{transition:background-color .2s linear}
@media(prefers-reduced-motion:reduce){#picker{transition:none}}

#picker{transform-origin:50% 100%}

.game #reset{position:absolute;top:18px;left:26px;padding:4px 0;color:var(--muted);font-size:11px;border:0;background:none}
.game #reset:hover{color:var(--text)}
.game>.manifesto{padding-top:54px}
@media(max-width:550px){.game #reset{top:14px;left:16px}.game>.manifesto{padding-top:48px}}

.score-corner{position:absolute;top:20px;right:26px;display:flex;align-items:center;gap:12px}
.score-corner #difficulty{position:static;font-size:12px;letter-spacing:2px}
.score-meter{width:110px;height:5px;background:var(--panel-2);border-radius:5px;overflow:hidden}
#score-fill{display:block;height:100%;width:0;background:var(--text);border-radius:inherit;transition:width .35s ease-out}
#score-percent{font-size:11px;color:var(--text);min-width:32px;font-variant-numeric:tabular-nums}
.game>.manifesto{padding-right:26px}
@media(max-width:550px){.score-corner{top:17px;right:16px;gap:8px}.score-meter{width:80px}.game>.manifesto{padding-right:16px}}
@media(prefers-reduced-motion:reduce){#score-fill{transition:none}}

.game-status{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 26px 8px}
.game-status #reset,.game-status .score-corner{position:static}
.game>.manifesto{padding-top:22px}
@media(max-width:550px){.game-status{padding:12px 16px 8px}.game>.manifesto{padding-top:18px}}

#score-fill{transition:width .35s ease-out,background-color .35s linear}
#score-percent{font-weight:700}
@media(prefers-reduced-motion:reduce){#score-fill{transition:none}}

.game>#difficulty{position:absolute;top:22px;right:26px;left:auto}
.game>.manifesto{padding-right:110px}
@media(max-width:550px){.game>#difficulty{top:18px;right:16px}.game>.manifesto{padding-right:95px}}

#results{width:min(360px,calc(100% - 32px));padding:24px}
#results h2{font-size:28px;margin:4px 0 8px}
#results .result-score{font-size:44px;margin:8px 0 12px}
#result-summary{margin:10px 0;font-size:13px}
#result-edges{font-size:11px;margin:10px 0 14px}
#next-puzzle{margin-top:4px;padding:12px}

.game #finish,.game-status .score-corner,.game-status .score-meter{width:110px}
.game #finish{padding-left:0;padding-right:0}
.game-status .score-corner{gap:0}
.game-status .score-meter{flex:none}

#welcome{width:min(460px,calc(100% - 32px));padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text);box-shadow:0 20px 80px #0007}
#welcome::backdrop{background:#090a09ce;backdrop-filter:blur(5px)}
#welcome .eyebrow{font-size:9px;letter-spacing:1.5px;margin:0 0 10px;color:var(--muted)}
#welcome h2{font-size:32px;font-weight:500;letter-spacing:-1px;margin:0 0 12px}
.welcome-concept{font-size:14px;line-height:1.6;margin:0 0 18px}
.welcome-examples{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;padding:12px 0;border-block:1px solid var(--line)}
.welcome-examples svg{height:48px;max-height:none}
.welcome-examples span{display:block;text-align:center;font-size:10px;color:var(--muted)}
.welcome-steps{padding-left:18px;margin:18px 0;font-size:12px;line-height:1.6}
.welcome-steps li{padding-left:4px;margin:9px 0}
.welcome-note{color:var(--muted);font-size:11px;line-height:1.6}
#start-game{width:100%;padding:13px;border:0;border-radius:8px;background:var(--text);color:var(--bg);margin-top:10px}
#start-game:hover{background:#efede6}
@media(max-width:550px){#welcome{padding:22px}.welcome-concept{font-size:13px}}

.game-intro{display:flex;align-items:center;gap:12px;padding:22px 110px 0 26px}
.game-intro .manifesto{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}
#help{flex:none;width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel-2);color:var(--text);font-size:13px;font-weight:600}
#help:hover{border-color:var(--muted)}
@media(max-width:550px){.game-intro{padding:18px 95px 0 16px;gap:9px}.game-intro .manifesto{font-size:10px}}

.difficulty-help{position:absolute;top:20px;right:26px;display:flex;align-items:center;gap:12px}
.difficulty-help #difficulty{position:static;font-size:15px;letter-spacing:4px}
.game-intro{padding-right:150px}
@media(max-width:550px){.difficulty-help{top:16px;right:16px;gap:8px}.game-intro{padding-right:135px}}

.difficulty-help #difficulty{letter-spacing:0;font-size:11px;white-space:nowrap}
.results-history{margin:18px 0 12px;border-top:1px solid var(--line);padding-top:12px}
#results-chart{max-height:none;width:100%}
.chart-threshold{stroke:var(--muted);stroke-dasharray:4 4;stroke-width:1}
.chart-baseline{stroke:var(--line);stroke-width:1}
.chart-path{fill:none;stroke:var(--text);stroke-width:1.5}
.chart-label{fill:var(--muted);font-size:9px}
.results-history p{font-size:10px;color:var(--muted);margin:2px 0}

.welcome-examples{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.welcome-examples span{font-size:9px;line-height:1.5}

.welcome-examples>div{position:relative}
.welcome-examples span.example-badge{position:absolute;top:0;right:4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;line-height:1;color:#fff;border:2px solid var(--panel)}
.example-badge.good{background:#438361}
.example-badge.bad{background:#bb5b54}

.example-label{display:flex;align-items:center;justify-content:center;gap:5px}
.welcome-examples .example-label span.example-badge{position:static;flex-shrink:0;width:16px;height:16px;font-size:10px;border:0}
.example-label>span:last-child{text-align:left}

.welcome-examples .example-label span.example-badge{background:none;border:0;border-radius:0}
.welcome-examples .example-label .example-badge.bad{color:#dc7969}
.welcome-examples .example-label .example-badge.good{color:#72b88c}

#welcome{width:min(500px,calc(100% - 32px))}

#welcome .welcome-concept{margin:0 0 10px}
#welcome #welcome-title{margin:0 0 18px}

#welcome .welcome-concept{font-size:12px;line-height:1.6}

.welcome-bottom{display:flex;align-items:center;gap:20px;margin-top:20px}
#welcome .welcome-bottom .welcome-concept{flex:1;margin:0}
.welcome-bottom form{flex-shrink:0}
#welcome #start-game{width:90px;margin:0}
@media(max-width:400px){.welcome-bottom{gap:12px}#welcome #start-game{width:76px}}

.accent-stop{color:var(--accent)}

.game-status{padding-top:4px;padding-bottom:0}
.game-bottom{padding-top:6px}
@media(max-width:550px){.game-status{padding-top:4px;padding-bottom:0}.game-bottom{padding-top:6px}}

#picker.four-colours button:nth-child(3){grid-column:auto}

.game-bottom{padding-bottom:12px}
.game-status{padding-top:0;padding-bottom:20px}
@media(max-width:550px){.game-bottom{padding-bottom:12px}.game-status{padding-top:0;padding-bottom:16px}}

.accent-stop,h1 span.accent-stop{color:#dc7969}

.intro>div{width:fit-content}
.intro .eyebrow{text-align:right;margin-top:2px}
.intro h1{margin-bottom:0}

.intro{justify-content:flex-end;text-align:right}

.game-shell{width:100%;max-width:800px;margin-inline:auto}

main{min-height:100svh;display:flex;flex-direction:column}
.game-shell{margin-block:auto}
main>header{flex-shrink:0;padding-bottom:12px}
.game-shell .intro{margin-top:12px}

/* Centre the playfield itself; the title sits above the centred card. */
main{position:relative;justify-content:center}
main>header{position:absolute;top:32px;left:28px;right:28px;padding-bottom:0}
.game-shell{margin-block:0;position:relative}
.game-shell .intro{position:absolute;bottom:100%;right:0;left:0;margin:0 0 22px}
@media(max-height:850px){main{padding-top:170px;padding-bottom:32px;justify-content:flex-start}.game-shell .intro{margin-bottom:22px}}
@media(max-width:550px){main>header{top:24px;left:16px;right:16px}}

.sketch-credit{position:absolute;top:100%;right:0;margin:12px 0 0;text-align:right;font-size:10px;color:var(--muted)}

#finish{font-weight:700}

#finish .submit-arrow{font-size:2em;line-height:1;vertical-align:middle}

#finish{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#finish .submit-arrow{display:block;vertical-align:baseline}

#finish .submit-arrow{font-size:1em;line-height:1}


.results-heading{width:fit-content;margin:4px auto 12px;text-align:right}
#results .results-heading h2{margin:0}
.results-subtitle{margin:2px 0 0;font-size:8px;letter-spacing:1px;color:var(--muted);line-height:1.6}

.welcome-heading{width:fit-content;margin:0 0 18px;text-align:right}
#welcome .welcome-heading #welcome-title{margin:0}
.welcome-subtitle{margin:2px 0 0;font-size:8px;letter-spacing:1px;color:var(--muted);line-height:1.6}

#best-result-star{position:absolute;top:14px;left:18px;color:#d7b151;font-size:24px;line-height:1}

.welcome-heading{margin-inline:auto}

.welcome-heading{margin-left:auto;margin-right:0}

.play-time{position:absolute;top:100%;left:0;margin:12px 0 0;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:420px){.play-time,.sketch-credit{font-size:9px}}

.chart-time-path{fill:none;stroke:var(--muted);stroke-width:1;opacity:.5}
.chart-time-dot{fill:var(--muted);opacity:.65}

.chart-time-dot{fill:unset;opacity:.85}
.chart-time-dot{fill:var(--muted)}
.chart-time-dot.fast{fill:#d7b151}

.result-feedback{position:relative;padding-inline:20px}
.result-feedback #best-result-star{top:10px;left:0;font-size:22px}

#results>#best-result-star{top:14px;left:18px;font-size:24px}
.result-feedback{padding-inline:0}

#total-score{position:absolute;top:8px;right:6px;font-size:11px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;pointer-events:none}

.score-added{position:absolute;top:28px;right:6px;color:#d7b151;font-size:13px;font-weight:600;pointer-events:none}

#total-score,.score-added{left:6px;right:auto;text-align:left}

#infinite-notice{width:min(340px,calc(100% - 32px));padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--text)}
#infinite-notice::backdrop{background:#090a09ce;backdrop-filter:blur(5px)}
#infinite-notice h2{margin:0 0 12px;font-size:26px;font-weight:500}
#infinite-notice p{font-size:13px;line-height:1.6;color:var(--muted)}
#infinite-notice button{width:100%;padding:12px;border:0;border-radius:8px;background:var(--text);color:var(--bg)}

.infinite-heading{width:fit-content;margin-left:auto;text-align:right;margin-bottom:18px}
#infinite-notice .infinite-heading h2{margin:0;font-size:28px}
#infinite-notice .infinite-subtitle{margin:2px 0 0;font-size:8px;letter-spacing:1px;line-height:1.6}
#infinite-notice #infinite-score{font-size:28px;color:var(--text);margin:12px 0}

#infinite-notice form{margin-top:26px}

#infinite-notice #infinite-recap{line-height:1.8;margin:20px 0 24px}
#infinite-recap>span{display:block;margin-bottom:10px}
#infinite-recap>span:last-child{margin-bottom:0}

#infinite-notice #infinite-recap{line-height:1.65;margin:16px 0 18px}
#infinite-recap>span{margin-bottom:3px}

#infinite-recap{padding-left:18px;color:var(--muted);font-size:13px}
#infinite-recap>li{margin:3px 0;padding-left:3px}
#infinite-notice .freeplay-thanks{margin:18px 0 0;font-size:10px;line-height:1.7;color:var(--muted);text-align:center}
.thanks-signature{display:block;margin-top:5px;color:var(--text)}

#infinite-notice .freeplay-thanks{text-align:right}

#infinite-recap b{color:var(--text);font-weight:600}

.endless-actions{display:flex;gap:10px;margin-top:26px}
#infinite-notice .endless-actions button{flex:1;width:auto}
#infinite-notice #restart-run{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}

#infinite-notice #infinite-time{margin:0 0 18px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

.above-play{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 26px 0}
.above-play #total-score{position:static;text-align:left}
.above-play .score-corner{position:static;width:110px;gap:0}
.above-play .score-meter{width:110px;flex:none}
#board{margin-top:12px}
.score-added{top:-14px}
@media(max-width:550px){.above-play{padding-inline:16px}}

.above-play .score-corner{width:auto;gap:8px}
#pending-score{font-size:11px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;min-width:24px}

.above-play{justify-content:flex-end;gap:16px}

.above-play{align-items:center;min-height:28px}
.above-play .score-total,.above-play .score-corner{display:flex;align-items:center;line-height:1}
.above-play #total-score,.above-play #pending-score{display:block;font-size:11px;font-weight:600;line-height:1;margin:0;padding:0}
.above-play .score-meter{align-self:center;margin:0}

.above-play .score-total{position:relative}
.score-total .score-added{top:0;left:100%;right:auto;margin-left:6px;white-space:nowrap;z-index:3}
.score-total .score-added{top:-16px;left:0;margin-left:0}

#generating{position:fixed;inset:0;margin:auto;width:min(320px,calc(100vw - 48px));box-sizing:border-box;padding:32px;text-align:center;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);color:var(--text)}
#generating::backdrop{background:rgba(15,18,15,.8)}
#generating h2{margin:0 0 10px;font-size:24px}
#generating p{margin:0;color:var(--muted);font-size:12px}

.score-meter{position:relative;overflow:visible}
.score-pass-mark{position:absolute;left:30%;top:-3px;bottom:-3px;width:2px;transform:translateX(-50%);background:var(--text);border-radius:1px;pointer-events:none}

.difficulty-help{position:static;justify-content:flex-end;padding:20px 26px 0}
.difficulty-help .score-total{position:relative;display:flex;align-items:center;line-height:1}
.difficulty-help #total-score{position:static;display:block;margin:0;font-size:11px;font-weight:600;line-height:1;white-space:nowrap}
.game-intro{padding:12px 26px 0}
@media(max-width:550px){.difficulty-help{padding:16px 16px 0}.game-intro{padding:12px 16px 0}}

.game-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 26px 0}
.game-header .game-intro{padding:0;min-width:0}
.game-header .difficulty-help{padding:0;flex-shrink:0}
@media(max-width:550px){.game-header{gap:12px;padding:16px 16px 0}}

.game-guide{flex:1;min-width:0}
.playfield-examples{max-width:440px;margin:12px 0 0;padding:0;border:0}
@media(max-width:550px){.game-bottom:has(.playfield-examples){flex-wrap:nowrap;gap:12px}.game-guide:has(.playfield-examples){flex:1;min-width:0}.game-bottom:has(.playfield-examples) #finish{flex-shrink:0;margin-left:auto}.playfield-examples{gap:4px}}

.edge-fill{stroke-width:5}
.welcome-examples>div:nth-child(n+2) svg path{stroke-width:5}

.playfield-examples svg{width:50%;height:24px;margin-inline:auto}

.playfield-examples{grid-template-columns:repeat(3,48px);justify-content:start;gap:6px;max-width:none}
.playfield-examples svg{width:48px;height:24px}

.node-face{transition:fill .25s ease-out}
@media(prefers-reduced-motion:reduce){.node-face{transition:none}}


.linked-pair-line{stroke:#9c967c;stroke-width:2;stroke-dasharray:1 7;stroke-linecap:round}

#result-edges{white-space:pre-line;line-height:1.25;margin:8px 0 12px}

#score-best-mark{position:absolute;top:-3px;bottom:-3px;width:2px;transform:translateX(-50%);background:#d7b151;border-radius:1px;pointer-events:none}

#score-fill{position:relative;overflow:hidden}
.score-meter.at-best #score-fill{box-shadow:0 0 7px #d7b15155}
.score-meter.at-best #score-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,#fff9 49%,transparent 63%);transform:translateX(-110%);animation:score-glimmer 2.4s linear infinite;pointer-events:none}
@keyframes score-glimmer{to{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.score-meter.at-best #score-fill::after{animation:none;transform:none;opacity:.25}}

main>header>a{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:11px;line-height:1.2;white-space:nowrap}
main>header>a:hover{background:var(--panel-2)}

/* Keep navigation above the full-width, absolutely positioned title area. */
main>header{z-index:3;pointer-events:none}
main>header>a{pointer-events:auto}