.numlark-page{max-width:720px;margin:auto;padding:55px 5% 80px}.numlark-page h1{font-size:82px;margin-bottom:12px}.numlark-lede{color:var(--muted);margin:0 0 28px}.numlark-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}.numlark-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:22px;font-size:13px;letter-spacing:1px}.numlark-level{display:flex;align-items:baseline;gap:8px;color:var(--muted)}.numlark-level strong{color:white;font-size:20px}.numlark-level span:last-child{padding-left:8px;border-left:1px solid var(--line)}.numlark-board{display:grid;gap:clamp(3px,1vw,8px);width:min(100%,520px);aspect-ratio:1;margin:auto;touch-action:none;user-select:none}.numlark-tile{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border:1px solid #4e5b68;border-radius:clamp(5px,1.6vw,12px);background:#252c35;font:800 clamp(13px,calc(54vw / var(--numlark-size,3)),58px)/1 'Barlow Condensed',Impact,sans-serif;transition:transform .12s ease,background .12s}.numlark-tile.correct{background:#293526;border-color:#657d4a}.numlark-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0 8px;text-align:center}.numlark-stats div{min-width:0}.numlark-stats strong{max-width:100%;overflow:hidden;text-overflow:ellipsis}.numlark-stats div{display:grid}.numlark-stats span{color:var(--muted);font-size:11px;letter-spacing:1.5px}.numlark-stats strong{font:700 30px 'Barlow Condensed',Impact,sans-serif}.numlark-card>p{text-align:center;color:var(--muted)}.numlark-solved{text-align:center;border:1px solid var(--lime);border-radius:16px;padding:30px;margin-top:22px}.numlark-solved h2{font-size:36px}.numlark-tile.moving{z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.28)}.numlark-tile.hint{animation:numlarkHint .65s ease}@keyframes numlarkHint{0%,100%{filter:none}45%{filter:brightness(1.65);transform:scale(.96)}}@media(max-width:600px){.numlark-page{padding-top:35px}.numlark-page h1{font-size:68px}.numlark-card{padding:16px}.numlark-stats{gap:8px}.numlark-stats span{font-size:10px;letter-spacing:1px}.numlark-stats strong{font-size:26px}.numlark-top{align-items:flex-start}.numlark-level{flex-wrap:wrap;justify-content:flex-end}}

/* Mobile gameplay spacing only. Shared publisher/header sizing comes from site.css, exactly like StackDare. */
@media(max-width:600px){.numlark-page{padding-top:18px}.numlark-page>.eyebrow{margin-bottom:6px}.numlark-page h1{font-size:52px;margin-bottom:4px}.numlark-lede{font-size:14px;line-height:1.45;margin-bottom:14px}}

/* Numlark uses the shared tcomGames shell, with a compact game header on /play. */
.numlark-identity{border-left-color:#46513c}.numlark-logo{width:38px;height:38px;display:block;border-radius:9px}.numlark-portal-logo{width:min(240px,70%);height:auto;display:block;margin:auto;filter:drop-shadow(0 18px 32px #0008)}.numlark-landing{max-width:1320px;margin:auto;padding:0 5%}.numlark-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:7%;align-items:center;padding:75px 0 85px}.numlark-hero h1 em{color:var(--lime)}.numlark-hero .eyebrow,.numlark-how .eyebrow,.numlark-cta .eyebrow{color:var(--lime)}.numlark-preview{border:1px solid #46513c;background:linear-gradient(145deg,#151e12,#191d23 60%);border-radius:20px;padding:clamp(20px,4vw,42px);box-shadow:0 30px 80px #0006;transform:rotate(2deg);text-align:center}.numlark-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;aspect-ratio:1}.numlark-preview-grid b{display:grid;place-items:center;border:1px solid #657d4a;border-radius:10px;background:#293526;font:800 clamp(30px,5vw,58px)/1 'Barlow Condensed',Impact,sans-serif}.numlark-preview-grid b:nth-child(4),.numlark-preview-grid b:nth-child(5),.numlark-preview-grid b:nth-child(6){border-color:var(--lime);background:#34452a}.numlark-preview>span{display:block;margin-top:18px;color:var(--muted);font-size:11px;letter-spacing:1.5px}.numlark-how{padding-top:70px}.numlark-how .rules article>span{color:var(--lime)}.numlark-cta{border-left-color:var(--lime);margin-bottom:80px}.numlark-cta .primary,.numlark-hero .primary{background:var(--lime);color:#101216}.numlark-play-title{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.numlark-play-title h1{margin:0}.numlark-play-title .eyebrow{margin-bottom:5px}.numlark-play-title .numlark-lede{margin:0 0 8px;text-align:right;max-width:320px}
@media(max-width:700px){.numlark-hero{grid-template-columns:1fr;padding:42px 0 55px}.numlark-preview{transform:none;max-width:390px;width:100%;justify-self:center}.numlark-how{padding-top:45px}.numlark-cta{margin-bottom:45px}.numlark-play-title{display:block}.numlark-play-title .numlark-lede{text-align:left;margin-top:5px}}
@media(max-width:600px){.numlark-play-page{padding-top:12px}.numlark-play-title{margin-bottom:10px}.numlark-play-title h1{font-size:44px}.numlark-play-title .eyebrow{display:none}.numlark-play-title .numlark-lede{font-size:12px;line-height:1.35;margin:2px 0 0}}

.numlark-rank{max-width:1050px;margin:auto;padding:55px 5% 80px}.numlark-rank h1{font-size:clamp(52px,8vw,82px);margin-bottom:8px}.numlark-rank-card{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px}.numlark-rank table{width:100%;border-collapse:collapse;min-width:680px}.numlark-rank th,.numlark-rank td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line)}.numlark-rank th{font-size:11px;letter-spacing:1px;color:var(--muted)}.numlark-rank-badge{font-size:18px;margin-right:4px}.numlark-own{color:var(--lime);font-weight:700}

/* A temporary duplicate of the exiting edge tile travels in from the opposite edge,
   making Numlark's cyclic row/column movement visually continuous. */
.numlark-board{position:relative;overflow:hidden}.numlark-wrap-ghost{position:absolute!important;pointer-events:none;margin:0;z-index:4}

#hint{display:inline-flex;align-items:center;gap:.4em}#hintCount{font:inherit}

.numlark-tile.locked-line{border-style:dashed;box-shadow:inset 0 0 0 1px #ffffff18}.numlark-tile.locked-line::after{content:'•';position:absolute;opacity:.22;font-size:.35em}.numlark-tile{position:relative}

/* Completion card floats above the finished grid without moving the regular controls. */
.numlark-board-stage{position:relative;width:min(100%,520px);margin-inline:auto;isolation:isolate}
.numlark-board-stage .numlark-board{width:100%}
.numlark-board-stage .numlark-solved:not([hidden]){position:absolute;inset:0;z-index:8;margin:0;border:0;border-radius:14px;background:rgba(10,14,19,.79);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2vw,18px);padding:clamp(12px,4vw,30px);box-sizing:border-box;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);overflow:auto}
.numlark-board-stage .numlark-solved h2{font-size:clamp(19px,4vw,32px);line-height:1.15;margin:0;overflow-wrap:anywhere}
.numlark-board-stage .numlark-solved .eyebrow{margin:0}
.numlark-board-stage .numlark-solved #again{min-height:44px;flex-shrink:0}
@media(max-width:440px){.numlark-board-stage .numlark-solved{gap:8px}.numlark-board-stage .numlark-solved h2{font-size:clamp(16px,4.5vw,22px)}}

/* Match the completion summary typography to the score readout below the board. */
.numlark-board-stage .numlark-solved h2{font-family:inherit;font-size:clamp(15px,3.4vw,20px);font-weight:600;line-height:1.45}
@media(max-width:440px){.numlark-board-stage .numlark-solved h2{font-size:clamp(15px,3.8vw,18px)}}

/* Gameplay headers are styled exclusively in compact-game.css. */
@media(max-width:760px){.numlark-play-page{padding-top:14px}}

/* High-contrast, colour-coded locked lines; column and row are distinguishable without colour alone. */
.numlark-tile.locked-line{border-style:solid;box-shadow:inset 0 0 0 2px #ffffff24;color:#fff}
.numlark-tile.locked-column{background:#47304c;border:2px solid #d38ae5;box-shadow:inset 0 0 0 1px #f5caff55}
.numlark-tile.locked-row{background:#253e51;border:2px solid #70c9ef;box-shadow:inset 0 0 0 1px #c4efff55}
.numlark-tile.locked-column.locked-row{background:linear-gradient(135deg,#47304c 0 50%,#253e51 50% 100%);border-color:#e4b7f0}
.numlark-tile.locked-line::after{content:'🔒';opacity:.85;font-size:clamp(10px,1.8vw,16px);position:absolute;right:3px;bottom:2px;line-height:1}
.numlark-tile.locked-line.correct{filter:none}

/* Keep the whole statistics row consistent, with room for advancing seconds. */
.numlark-play-page .numlark-stats{grid-template-columns:.9fr 1.3fr .9fr .9fr}
body>main.numlark-play-page .numlark-stats div>:is(span,strong){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(14px,3.6vw,20px);font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.numlark-play-page .numlark-stats #timer{text-overflow:clip}