/* Geography games GEO-34. Instrument Sheet chassis, accent #1E5E7E (deep marine). */
:root{
  --paper:#EDE9E2;
  --ink:#1E1D1B;
  --panel:#DEDACF;
  --line:#B7B0A2;
  --chassis:#2A2924;
  --accent:#1E5E7E;
  --deep:#164A64;                 /* the darker marine: pressed states and the ocean grid */
  --on-accent:#EDE9E2;            /* paper on the marine slab is 6.3:1 */
  --font-ui:"Familjen Grotesk",system-ui,sans-serif;
  --font-spec:"Martian Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#1E1D1B;--ink:#EDE9E2;--panel:#2A2924;--line:#4A473F;--chassis:#111}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ol,ul,figure,pre,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{padding:0;border:0;min-width:0}
[hidden]{display:none!important}
code{font-family:var(--font-spec);font-size:.8em}
svg{display:block}

/* label strip */
.strip{max-width:1120px;margin:0 auto;padding:18px 32px 0;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;border-bottom:1px solid var(--line)}
.strip-maker{text-decoration:none;padding-bottom:12px}
.strip-maker:hover{text-decoration:underline;text-underline-offset:3px}
.strip-code{padding-bottom:12px}
.strip-mid{padding-bottom:12px;text-decoration:none}
.strip-mid:hover{text-decoration:underline;text-underline-offset:3px}

/* page */
.wrap{max-width:1120px;margin:0 auto;padding:36px 32px 0}
.title{font-size:4rem;font-weight:600;line-height:1;letter-spacing:-.01em;margin-bottom:14px;max-width:16ch}
.lede{font-size:1.125rem;max-width:58ch;margin-bottom:26px}
.subhead{font-size:1.375rem;font-weight:500;line-height:1.25;margin-bottom:10px}
.section-head{font-size:2rem;font-weight:600;line-height:1.1;margin:44px 0 14px}
.notes{max-width:66ch}
.notes p{margin-bottom:12px}
.notes h2{margin-top:36px}

/* the marine slab: the one accent shape, and the hero */
.hero{position:relative;background:var(--accent);color:var(--on-accent);padding:28px 32px 30px;overflow:hidden;min-height:320px}
.hero::before,.hero::after,.hero>.ticks::before,.hero>.ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid #EDE9E2;pointer-events:none;z-index:2}
.hero::before{top:0;left:0;border-top-width:1px;border-left-width:1px}
.hero::after{top:0;right:0;border-top-width:1px;border-right-width:1px}
.hero>.ticks::before{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.hero>.ticks::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.hero .loading{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.8}

/* buttons: paper on the slab, ink outside */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{position:relative;display:inline-block;padding:11px 16px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:500;line-height:1.2;cursor:pointer;border-radius:0;text-decoration:none;text-align:left}
.btn:hover{background:var(--panel)}
.btn:disabled{opacity:.45;cursor:default}
.hero .btn{border-color:#EDE9E2;background:transparent;color:#EDE9E2}
.hero .btn:hover{background:rgba(237,233,226,.12)}
.hero .btn:focus-visible{outline-color:#EDE9E2}
.btn-primary,.hero .btn-primary{background:#EDE9E2;border-color:#EDE9E2;color:#1E1D1B}
.btn-primary:hover,.hero .btn-primary:hover{background:#EDE9E2}
.btn-primary .ticks{position:absolute;inset:0;pointer-events:none}
.btn-primary::before,.btn-primary::after,.btn-primary .ticks::before,.btn-primary .ticks::after{content:"";position:absolute;width:14px;height:14px;border:0 solid #EDE9E2;opacity:0;pointer-events:none}
.btn-primary::before{top:-6px;left:-6px;border-top-width:1px;border-left-width:1px}
.btn-primary::after{top:-6px;right:-6px;border-top-width:1px;border-right-width:1px}
.btn-primary .ticks::before{bottom:-6px;left:-6px;border-bottom-width:1px;border-left-width:1px}
.btn-primary .ticks::after{bottom:-6px;right:-6px;border-bottom-width:1px;border-right-width:1px}
.btn-primary:hover::before,.btn-primary:hover::after,.btn-primary:hover .ticks::before,.btn-primary:hover .ticks::after,
.btn-primary:focus-visible::before,.btn-primary:focus-visible::after,.btn-primary:focus-visible .ticks::before,.btn-primary:focus-visible .ticks::after{opacity:1}
.btn-primary:focus-visible{outline-color:#EDE9E2;outline-offset:4px}
body:not(.in-hero) .wrap>.actions .btn-primary{background:var(--accent);border-color:var(--accent);color:#EDE9E2}
.btn-primary::before,.btn-primary::after{border-color:var(--accent)}
.hero .btn-primary::before,.hero .btn-primary::after,.hero .btn-primary .ticks::before,.hero .btn-primary .ticks::after{border-color:#EDE9E2}

/* reading line */
.reading{font-family:var(--font-spec);font-size:.75rem;font-weight:500;letter-spacing:.02em;white-space:pre-wrap;margin:12px 0 0}

/* generic game layout inside the slab */
.g-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:16px}
.g-q{font-size:1.5rem;font-weight:500;line-height:1.2;max-width:34ch}
.g-q b{font-weight:600}
.g-stat{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;white-space:nowrap;opacity:.9}
.g-stat strong{font-weight:500;font-size:1.75rem;font-family:var(--font-ui);letter-spacing:-.01em;font-weight:600;margin-right:6px}
.g-big{font-size:clamp(3rem,7vw,5.5rem);font-weight:600;line-height:1;letter-spacing:-.02em;margin:6px 0 10px;overflow-wrap:anywhere}
.g-sub{font-size:1.0625rem;opacity:.9;max-width:52ch}
.g-note{font-size:.9375rem;opacity:.85;margin-top:12px;max-width:60ch}
.g-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,44%);gap:20px 40px;align-items:start}
.g-grid.wide{grid-template-columns:minmax(0,1fr)}

/* typeahead input */
.ta{position:relative;max-width:520px}
.ta input{display:block;width:100%;font:inherit;font-size:1.125rem;color:#1E1D1B;background:#EDE9E2;border:1px solid #EDE9E2;border-radius:0;padding:12px 14px;line-height:1.4}
.ta input:focus{outline:2px solid #1E1D1B;outline-offset:0}
.ta input::placeholder{color:#5c5a55}
.ta-list{position:absolute;left:0;right:0;top:100%;z-index:5;background:#EDE9E2;color:#1E1D1B;border:1px solid #1E1D1B;border-top:0;max-height:260px;overflow:auto}
.ta-list button{display:block;width:100%;text-align:left;padding:9px 14px;border:0;background:transparent;cursor:pointer;line-height:1.3}
.ta-list button.is-active,.ta-list button:hover{background:var(--accent);color:#EDE9E2}
.ta-list small{opacity:.7;margin-left:6px}
.ta-row{display:flex;gap:8px;align-items:stretch;max-width:520px}
.ta-row .ta{flex:1}

/* daily: the shape, the flag, the guess rows */
.shape-box{background:transparent;border:1px solid rgba(237,233,226,.35);padding:14px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative}
.shape-box svg{width:100%;height:100%;max-height:420px}
.shape-box path{fill:#EDE9E2}
.shape-box.is-won path{animation:pop .4s var(--ease)}
@keyframes pop{0%{transform:scale(.92);transform-origin:center}60%{transform:scale(1.03)}100%{transform:none}}
.flag-box{border:1px solid rgba(237,233,226,.5);padding:0;line-height:0;background:#EDE9E2;max-width:520px}
.flag-box img{width:100%;height:auto;display:block}
.flag-box.is-hidden{filter:blur(0)}
.guesses{display:grid;gap:6px;margin-top:16px;max-width:560px}
.guess{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:0 12px;align-items:center;padding:8px 12px;border:1px solid rgba(237,233,226,.45);animation:drop .25s var(--ease)}
.guess.is-hit{background:#EDE9E2;color:#1E1D1B;border-color:#EDE9E2}
.guess-name{font-weight:500;overflow-wrap:anywhere}
.guess-dist,.guess-pct{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;white-space:nowrap}
.guess-dir svg{width:18px;height:18px}
.guess-dir path{stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.guess.is-empty{border-style:dashed;min-height:41px;opacity:.5;animation:none}
@keyframes drop{0%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}
.hints{margin-top:16px;display:grid;gap:6px;max-width:560px}
.hint{display:flex;gap:12px;padding:8px 12px;border:1px solid rgba(237,233,226,.35);animation:drop .25s var(--ease)}
.hint .k{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;min-width:9ch;opacity:.85;padding-top:3px}
.hint.is-locked{opacity:.4;border-style:dashed}
.hint.is-locked .k{opacity:1}
.daily-end{margin-top:18px;padding:16px 18px;border:1px solid #EDE9E2;max-width:560px}
.daily-end .g-big{font-size:2.5rem;margin:0 0 6px}
.daily-end p{margin-bottom:12px}
.stats{display:flex;flex-wrap:wrap;gap:18px 28px;margin:10px 0 14px}
.stats div{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em}
.stats strong{display:block;font-family:var(--font-ui);font-size:2rem;font-weight:600;line-height:1;margin-bottom:4px}
.share-grid{font-size:1.25rem;letter-spacing:.05em;line-height:1.2;margin-bottom:10px;font-family:var(--font-spec)}
.countdown{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.85}

/* maps */
.map{width:100%;height:auto;max-height:70vh;touch-action:manipulation}
.map .ctx{fill:rgba(237,233,226,.18);stroke:none}
.map .it{fill:rgba(237,233,226,.42);stroke:var(--accent);stroke-width:.6;stroke-linejoin:round;transition:fill .18s var(--ease)}
.map .it.is-on{fill:#EDE9E2}
.map .it.is-off{fill:#1E1D1B}
.map .it.is-pick{fill:#EDE9E2}
.map .it.is-miss{fill:#1E1D1B}
.map .it.is-hint{animation:blink .7s steps(2,start) 3}
.map .it.is-flash{fill:#1E1D1B}
@keyframes blink{50%{fill:#EDE9E2}}
.map .mk{fill:rgba(237,233,226,.42);stroke:#EDE9E2;stroke-width:.8}
.map .mk.is-on,.map .mk.is-pick{fill:#EDE9E2}
.map .mk.is-off,.map .mk.is-miss,.map .mk.is-flash{fill:#1E1D1B}
.map .mk.is-hint{animation:blink .7s steps(2,start) 3}
.map.is-clickable .it,.map.is-clickable .mk{cursor:pointer}
.map.is-clickable .it:hover{fill:rgba(237,233,226,.7)}
.map.is-clickable .mk:hover{fill:rgba(237,233,226,.7)}
.map .it.is-on:hover,.map .it.is-off:hover{fill:#EDE9E2}
.map-wrap{position:relative}
.map-legend{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.85;margin-top:8px}
@media (prefers-reduced-motion:reduce){.map .it,.map .mk{transition:none;animation:none}}

/* name-all board */
.board{margin-top:18px;columns:3;column-gap:28px}
.board-group{break-inside:avoid;margin-bottom:16px}
.board-group h3{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;font-weight:500;opacity:.85;margin-bottom:6px}
.slot{display:block;border-bottom:1px solid rgba(237,233,226,.35);padding:3px 0;min-height:1.7em;font-size:.9375rem;line-height:1.3}
.slot.is-on{border-bottom-color:#EDE9E2;font-weight:500;animation:drop .2s var(--ease)}
.slot.is-missed{opacity:.6;font-style:italic}
.slot .clue{opacity:.7;font-weight:400}
.timer{font-variant-numeric:tabular-nums}
.timer.is-low{animation:blink 1s steps(2,start) infinite;color:#EDE9E2}

/* flag quiz */
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px}
.choice{padding:14px 16px;border:1px solid #EDE9E2;background:transparent;color:#EDE9E2;font-weight:500;cursor:pointer;text-align:left;line-height:1.25;font-size:1.0625rem}
.choice:hover{background:rgba(237,233,226,.12)}
.choice.is-right{background:#EDE9E2;color:#1E1D1B}
.choice.is-wrong{background:#1E1D1B;border-color:#1E1D1B;text-decoration:line-through}
.choice:disabled{cursor:default}
.strip10{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 0}
.strip10 i{width:14px;height:14px;border:1px solid #EDE9E2;display:block}
.strip10 i.y{background:#EDE9E2}
.strip10 i.n{background:#1E1D1B;border-color:#1E1D1B}

/* compare cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:8px}
.card{position:relative;padding:26px 22px 24px;border:1px solid #EDE9E2;background:transparent;color:#EDE9E2;text-align:left;cursor:pointer;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.card:hover{background:rgba(237,233,226,.1)}
.card:disabled{cursor:default}
.card .nm{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:600;line-height:1.05;letter-spacing:-.01em;overflow-wrap:anywhere}
.card .sb{font-size:.9375rem;opacity:.85}
.card .val{font-family:var(--font-spec);font-size:.8125rem;letter-spacing:.02em;min-height:1.4em;font-variant-numeric:tabular-nums}
.card.is-right{background:#EDE9E2;color:#1E1D1B}
.card.is-wrong{background:transparent}
.card.is-wrong .nm{text-decoration:line-through;text-decoration-thickness:2px}
.card .flag{width:56px;height:42px;border:1px solid rgba(237,233,226,.6);object-fit:cover;display:block}
.card.is-right .flag{border-color:#1E1D1B}
.vs{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.85;text-align:center;grid-column:1/-1;margin-top:-4px}

/* hub */
.daily-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:6px}
.daily-tile{display:block;padding:18px 16px 16px;border:1px solid #EDE9E2;color:#EDE9E2;text-decoration:none;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.daily-tile:hover{background:rgba(237,233,226,.12)}
.daily-tile b{font-size:1.375rem;font-weight:600;line-height:1.1;display:block}
.daily-tile span{font-size:.9375rem;opacity:.85;line-height:1.3}
.daily-tile .st{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.9}
.daily-tile.is-done{background:#EDE9E2;color:#1E1D1B}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.hub-item{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none}
.hub-item:hover{background:var(--panel)}
.hub-item b{font-size:1.25rem;font-weight:600;line-height:1.15}
.hub-item span{font-size:.9375rem;opacity:.85}
.hub-item .n{font-family:var(--font-spec);font-size:.75rem;letter-spacing:.02em;opacity:.8}
.hub-map{margin-top:14px}
.hub-map .it{fill:#EDE9E2;stroke:var(--accent);stroke-width:.5}
.hub-map .ctx{fill:rgba(237,233,226,.25)}

/* related links */
.related{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.related a{display:inline-block;padding:8px 12px;border:1px solid var(--line);text-decoration:none;font-size:.9375rem}
.related a:hover{background:var(--panel)}

/* footer */
.foot{max-width:1120px;margin:0 auto;padding:22px 32px 40px;font-size:.9375rem;opacity:.85;max-width:1120px}
.foot p{max-width:70ch}

@media (max-width:1000px){
  .board{columns:2}
  .daily-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .strip,.wrap,.foot{padding-left:16px;padding-right:16px}
  .title{font-size:2.5rem}
  .hero{padding:20px 16px 22px}
  .g-grid{grid-template-columns:minmax(0,1fr)}
  .board{columns:1}
  .daily-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-grid{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .choices{grid-template-columns:minmax(0,1fr)}
  .g-q{font-size:1.25rem}
  .guess{grid-template-columns:minmax(0,1fr) auto auto;gap:0 8px}
  .guess-pct{display:none}
}
@media (max-width:420px){
  .daily-strip{grid-template-columns:minmax(0,1fr)}
  .stats{gap:14px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}