/* Semantic ranging: a distance readout, the word ledger, and a small vector field. */
:root{--t-accent:#b3cabc;--accent:#b3cabc}
body{width:100%;font-family:var(--cab-sans)}
.site-header{width:100%;min-height:58px;height:auto;display:flex;padding-block:10px;gap:16px}
.site-header .wordmark{font-size:14px}.site-header .play-modes{border:0;border-radius:0;padding:0}
.site-header button{border-radius:3px;min-height:34px;font-size:12px}
.game-shell{width:min(1120px,calc(100% - 48px));display:grid;grid-template-columns:170px minmax(0,1fr) 200px;gap:24px 30px;margin:38px auto 64px;align-items:start}
.game-overview{grid-column:1;grid-row:1 / span 4;display:flex;flex-direction:column;align-items:stretch;padding:0;gap:22px;border:0}
.overview-copy h1{font:400 30px/1.1 Georgia,serif;letter-spacing:-.045em;margin:10px 0 15px}
.overview-copy>p:not(.label){font-size:12px;line-height:1.7}
.game-stats{display:flex;flex-direction:column;gap:15px;margin-top:24px;padding:0;border:0}
.game-stats>div{padding:0;border:0;background:transparent}.game-stats dt{font:10px var(--cab-mono);margin-bottom:5px}.game-stats dd{font:20px var(--cab-mono)}
.target-figure{margin:0;width:150px}.target-figure canvas{width:150px;height:150px;border-radius:0}.target-figure figcaption{font:9px var(--cab-mono);line-height:1.5;margin-top:9px}
.play-area{grid-column:2;grid-row:1;margin:0;padding:0;background:transparent;border:0}
.play-area>label{font:11px var(--cab-mono);text-transform:uppercase;letter-spacing:.07em}
.guess-input-row{margin-top:12px}.guess-input-row input{min-width:0;height:48px;border-radius:3px;font-size:18px}.guess-input-row .submit{height:48px;border-radius:3px}
.play-meta{font-size:11px;margin-top:12px;align-items:start;gap:12px}.play-meta>span{max-width:60%}.quiet-action{font-size:11px}
.latest-reading{grid-column:2;grid-row:2;margin:0;padding:22px 0;border:0;border-top:1px solid var(--t-line);border-bottom:1px solid var(--t-line);background:transparent;border-radius:0;box-shadow:none}
.latest-distance strong{font:500 50px/1 var(--cab-mono);letter-spacing:-.06em}.latest-reading canvas{border-radius:0}
.guess-history{grid-column:2;grid-row:3;margin:0;padding:0;border:0;background:transparent}
.guess-history h2,.online-board h2{font-size:14px}.guess-history header{margin-bottom:12px}.guess-history .history-list{border-radius:0;box-shadow:none}
.history-row{border-radius:0;box-shadow:none;border-bottom:1px solid var(--t-line)}
.online-board{grid-column:3;grid-row:1 / span 4;border:0;background:transparent;padding:0;margin:0}
.online-board header{align-items:start;gap:12px;border-bottom:1px solid var(--t-line);padding-bottom:12px}.online-board .label{font:10px var(--cab-mono);letter-spacing:.04em}.leaderboard-list{font-size:12px;line-height:1.6}
@media(max-width:1050px){.game-shell{grid-template-columns:155px minmax(0,1fr);gap:24px}.online-board{grid-column:2;grid-row:4}}
@media(max-width:720px){
 body{width:calc(100% - 28px)}.site-header{display:grid;grid-template-columns:1fr auto;gap:7px;padding-block:8px}
 .site-header .wordmark{justify-self:start;white-space:nowrap;font-size:12px}.site-header .wordmark svg{width:19px;height:19px}
 .site-header .header-tools{grid-column:2;grid-row:1;gap:5px}.header-tools button{font-size:11px;padding:0 8px;min-height:38px}
 .site-header .play-modes{grid-column:1/-1;grid-row:2;justify-self:center}
 .game-shell{display:flex;flex-direction:column;gap:18px;margin:18px 0 40px}.game-shell>section{width:100%}
 .game-overview{display:grid;grid-template-columns:1fr 64px;gap:14px;margin:0}
 .overview-copy>h1,.overview-copy>.label{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
 .overview-copy>p:not(.label){font-size:12px;line-height:1.5;margin:0}
 .game-stats{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px 18px;margin:12px 0 0}.game-stats dt{font-size:9px}.game-stats dd{font-size:15px}
 .target-figure{width:64px;align-self:center}.target-figure canvas{width:64px;height:64px}.target-figure figcaption{font-size:8px}
 .latest-reading{padding:16px 0}.latest-distance strong{font-size:40px}.guess-input-row input{height:46px}
 .online-board{border-top:1px solid var(--t-line);padding-top:18px;margin-top:10px}.play-meta>span{max-width:53%}
}
#target-canvas{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:1;max-width:100%}
@media(max-width:390px){.site-header{padding-inline:8px}.site-header .header-tools{gap:2px}.header-tools button{padding:0 6px}}