/* DayDuel shared shell: one set of tokens, the network bar, the footer and page prose for dayduel.com, Ballpark and LinkUp.
   Copied into each site's public/ by shell/sync.cjs; edit it here, never in the copies. */
:root{
  --dd-bg:#f4f7f2; --dd-surface:#ffffff; --dd-ink:#18241c; --dd-muted:#5f6f64; --dd-line:#dfe7df;
  --dd-bar:#18241c; --dd-bar-ink:#f4f7f2; --dd-btn:#18241c; --dd-btn-ink:#ffffff; --dd-focus:#1f9d55;
  --dd-green:#1f9d55; --dd-ballpark:#f2b01e; --dd-ballpark-soft:#fbeac0; --dd-linkup:#4f8fd8; --dd-linkup-soft:#d9e6f7;
  --dd-display:"Rubik",system-ui,sans-serif; --dd-body:"Inter Tight",system-ui,sans-serif;
  /* type scale (1.25) and spacing (4px grid) */
  --dd-t-xs:.8rem; --dd-t-sm:.9rem; --dd-t-md:1rem; --dd-t-lg:1.25rem; --dd-t-xl:1.56rem; --dd-t-2xl:1.95rem; --dd-t-3xl:2.44rem;
  --dd-s1:4px; --dd-s2:8px; --dd-s3:12px; --dd-s4:16px; --dd-s5:24px; --dd-s6:32px; --dd-s7:48px; --dd-s8:64px;
  --dd-r-sm:10px; --dd-r-md:14px; --dd-r-lg:22px; --dd-max:980px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --dd-bg:#0f1712; --dd-surface:#17221b; --dd-ink:#e9f1eb; --dd-muted:#9db0a3; --dd-line:#25362b;
  --dd-bar:#0a100c; --dd-btn:#f4f7f2; --dd-btn-ink:#0f1712; --dd-focus:#2fbf6c; --dd-ballpark-soft:#3a3118; --dd-linkup-soft:#1d2a3c}}
:root[data-theme="dark"]{
  --dd-bg:#0f1712; --dd-surface:#17221b; --dd-ink:#e9f1eb; --dd-muted:#9db0a3; --dd-line:#25362b;
  --dd-bar:#0a100c; --dd-btn:#f4f7f2; --dd-btn-ink:#0f1712; --dd-focus:#2fbf6c; --dd-ballpark-soft:#3a3118; --dd-linkup-soft:#1d2a3c}

/* visible keyboard focus everywhere, invisible for mouse/touch */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--dd-focus);outline-offset:2px;border-radius:6px}
.dd-skip{position:absolute;left:-999px;top:0;background:var(--dd-btn);color:var(--dd-btn-ink);padding:var(--dd-s2) var(--dd-s3);z-index:20}
.dd-skip:focus{left:var(--dd-s2);top:var(--dd-s2)}

/* network bar */
.dd-bar{background:var(--dd-bar);color:var(--dd-bar-ink)}
.dd-bar .dd-in{max-width:var(--dd-max);margin:0 auto;height:48px;padding:0 max(var(--dd-s4),env(safe-area-inset-left,0px));display:flex;align-items:center;justify-content:space-between;gap:var(--dd-s4)}
.dd-brand{display:flex;align-items:center;gap:var(--dd-s2);color:inherit;text-decoration:none}
.dd-brand img{width:26px;height:26px;display:block}
.dd-brand span{font:900 1.05rem var(--dd-display);letter-spacing:.08em}
.dd-nav{display:flex;gap:var(--dd-s4)}
.dd-nav a{color:inherit;opacity:.82;font:600 var(--dd-t-sm) var(--dd-body);text-decoration:none}
.dd-nav a:hover,.dd-nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* footer */
.dd-foot{max-width:var(--dd-max);margin:0 auto;padding:var(--dd-s5) max(var(--dd-s4),env(safe-area-inset-left,0px)) var(--dd-s7);border-top:1px solid var(--dd-line);display:flex;flex-wrap:wrap;gap:var(--dd-s2) var(--dd-s5);justify-content:space-between;font:500 var(--dd-t-sm) var(--dd-body);color:var(--dd-muted)}
.dd-foot nav{display:flex;flex-wrap:wrap;gap:var(--dd-s4)}
.dd-foot a{color:inherit}

/* text pages (about, contact, terms, privacy) */
.dd-page{max-width:680px;margin:0 auto;padding:var(--dd-s7) max(var(--dd-s4),env(safe-area-inset-left,0px)) var(--dd-s8);font:500 var(--dd-t-md)/1.6 var(--dd-body);color:var(--dd-ink)}
.dd-page h1{font:900 var(--dd-t-3xl)/1.1 var(--dd-display);margin:0 0 var(--dd-s5)}
.dd-page h2{font:800 var(--dd-t-lg) var(--dd-display);margin:var(--dd-s6) 0 var(--dd-s2)}
.dd-page p,.dd-page li{margin:0 0 var(--dd-s3)}
.dd-page a{color:inherit}
.dd-page .dd-note{color:var(--dd-muted);font-size:var(--dd-t-sm)}
.dd-btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 var(--dd-s5);border-radius:var(--dd-r-md);background:var(--dd-btn);color:var(--dd-btn-ink);font:800 var(--dd-t-md) var(--dd-display);text-decoration:none;border:none;cursor:pointer}

/* narrow phones: the bar keeps only the games link; About and Contact stay in the footer */
@media (max-width:480px){.dd-nav{gap:var(--dd-s3)}.dd-nav .dd-x{display:none}}

/* company footer: brand column + link columns (games, company, legal, follow) */
.dd-foot{display:block}
.dd-fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--dd-s5);padding-bottom:var(--dd-s5)}
.dd-fcols h3{margin:0 0 var(--dd-s2);font:800 var(--dd-t-xs) var(--dd-display);letter-spacing:.1em;text-transform:uppercase;color:var(--dd-ink)}
.dd-fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--dd-s2)}
.dd-fcols a{text-decoration:none}.dd-fcols a:hover{text-decoration:underline;text-underline-offset:3px}
.dd-fbrand{display:grid;gap:var(--dd-s2);align-content:start}
.dd-fbrand .dd-brand{color:var(--dd-ink)}.dd-fbrand p{margin:0;max-width:26ch;line-height:1.45}
.dd-fbase{border-top:1px solid var(--dd-line);padding-top:var(--dd-s4);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--dd-s2)}
@media (max-width:720px){.dd-fcols{grid-template-columns:1fr 1fr}.dd-fbrand{grid-column:1/-1}}
/* the big faded wordmark band above the footer */
.dd-band{overflow:hidden;text-align:center;font:900 clamp(4rem,19vw,13rem)/.8 var(--dd-display);letter-spacing:.04em;color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--dd-green) 22%,transparent),transparent 85%);-webkit-background-clip:text;background-clip:text;user-select:none;margin-top:var(--dd-s7)}
/* press and hover feedback */
@media (hover:hover){.dd-lift{transition:transform .18s ease,box-shadow .18s ease}.dd-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(24,36,28,.45)}}
.dd-lift:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){.dd-lift,.dd-lift:hover,.dd-lift:active{transition:none;transform:none}}
.dd-fcols nav{display:block}

/* spacing rhythm: one scale from phone to desktop */
:root{--dd-sec:clamp(32px,6vw,64px);--dd-gap:clamp(16px,2.6vw,28px)}
.dd-foot{padding-top:clamp(32px,5vw,48px);padding-bottom:clamp(40px,6vw,64px)}
.dd-fcols{row-gap:var(--dd-s6);padding-bottom:var(--dd-s6)}
.dd-band{margin-top:clamp(40px,8vw,88px)}
.dd-page{padding-top:var(--dd-sec)}
.dd-page a.dd-btn{color:var(--dd-btn-ink);text-decoration:none}