/* merthosder.com — shared tokens, base and navigation for every page.
   Layout: sticky top bar (brand + game tabs), then each page's own content column. */
:root{
  --bg:#eef1ec; --panel:#ffffff; --ink:#16201a; --muted:#5d6b62; --line:#cfd8d1;
  --pitch:#1d6b45; --pitch-ink:#ffffff; --lamp:#e2a72e; --cell:#f7f9f6; --cell-hover:#e3ece5;
  --shadow:0 1px 0 rgba(22,32,26,.06),0 8px 24px -12px rgba(22,32,26,.25);
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1511;--panel:#141f19;--ink:#e7efe9;--muted:#93a399;--line:#26352c;--pitch:#2f9a66;--pitch-ink:#07120c;--lamp:#f0bb4a;--cell:#17231c;--cell-hover:#1e2f25;--shadow:0 1px 0 rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1511;--panel:#141f19;--ink:#e7efe9;--muted:#93a399;--line:#26352c;--pitch:#2f9a66;--pitch-ink:#07120c;--lamp:#f0bb4a;--cell:#17231c;--cell-hover:#1e2f25;--shadow:0 1px 0 rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.8);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--pitch)}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}

.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:900;font-size:24px;line-height:1;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);text-decoration:none;display:flex;align-items:baseline}
.brand span{color:var(--pitch);font-size:.62em;letter-spacing:.04em;margin-left:1px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.tabs a{font-weight:600;font-size:14px;text-decoration:none;color:var(--ink);padding:8px 12px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.tabs a:hover{border-color:var(--line)}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.foot{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:24px 36px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}