/* 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-pathlight:#ef6c33; --dd-pathlight-soft:#fde3d6;
  --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; --dd-pathlight-soft:#3d261c}}
: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; --dd-pathlight-soft:#3d261c}

/* 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}
/* tap targets: header, footer and brand links are at least 44px tall */
.dd-nav a,.dd-brand{display:inline-flex;align-items:center;min-height:44px}
.dd-nav a{padding:0 4px}
.dd-fcols ul{gap:0}
.dd-fcols ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:max(.875rem,1em)}
.dd-fcols h3{font-size:.875rem}
/* release G: the "today" strip under the DayDuel bar (drawn by dd-loop.js): every game with today's tick, and the shared streak */
.dd-strip{background:var(--dd-surface);border-bottom:1px solid var(--dd-line);color:var(--dd-ink)}
.dd-strip .dd-in{max-width:var(--dd-max);margin:0 auto;min-height:44px;padding:0 max(var(--dd-s4),env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--dd-s4)}
.dd-sg{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none;font:700 .875rem var(--dd-body);white-space:nowrap}
.dd-sg img{width:20px;height:20px;border-radius:6px;display:block}
.dd-sg[aria-current]{font-weight:800}
a.dd-sg span{text-decoration:underline;text-decoration-color:var(--dd-line);text-underline-offset:3px}
.dd-tk{width:18px;height:18px;flex:none;color:var(--dd-muted)}
.dd-sg.on .dd-tk{fill:var(--dd-green)}
.dd-st{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font:600 .875rem var(--dd-body);white-space:nowrap}
.dd-st b{font:900 1rem var(--dd-display)}
.dd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:400px){.dd-strip .dd-in{gap:var(--dd-s3)}.dd-st span{display:none}}
/* archive (3 Nov 2026): the strip's link to dayduel.com/archive; icon only on narrow phones */
.dd-ar{margin-left:auto;display:inline-flex;align-items:center;gap:5px;min-height:44px;min-width:44px;justify-content:center;color:inherit;font:700 .875rem var(--dd-body);white-space:nowrap;text-decoration:underline;text-decoration-color:var(--dd-line);text-underline-offset:3px}
.dd-st+.dd-ar{margin-left:0}
.dd-ar svg{width:18px;height:18px;flex:none}
.dd-ar[aria-current]{font-weight:800}
@media (max-width:480px){.dd-ar span{display:none}}
/* three games in the strip (Pathlight, once live): tighter; on phones the games and Archive keep only their icons (names stay for screen readers) */
.dd-strip.dd-g3 .dd-in{gap:var(--dd-s3)}
@media (max-width:440px){.dd-strip.dd-g3 .dd-ar span{display:none}.dd-strip.dd-g3 .dd-sg>span:not(.dd-sr){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.dd-strip.dd-g3 .dd-sg{min-width:44px;justify-content:center}.dd-strip.dd-g3 .dd-in{gap:10px}}
@media (max-width:400px){.dd-strip.dd-g3 .dd-sg{gap:4px}.dd-strip.dd-g3 .dd-in{gap:8px}}

/* first-game feedback card (dd-fb.js; only drawn while FEEDBACK_LIVE is true in dd-loop.js). Sits inside a game's results
   card, under Share / Challenge / the cross-promo card. Phones first: 44px+ targets, three faces fit at 320px. */
.dd-fb{border:2px solid var(--dd-line);border-radius:var(--dd-r-md);padding:var(--dd-s3);display:flex;flex-direction:column;align-items:stretch;justify-content:center;box-sizing:border-box;gap:var(--dd-s2);text-align:center;color:var(--dd-ink);min-width:0}
.dd-fb-h{margin:0;font:800 var(--dd-t-md)/1.3 var(--dd-display);color:var(--dd-ink)}
.dd-fb-t{margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;font:600 var(--dd-t-sm)/1.4 var(--dd-body);color:var(--dd-ink)}
.dd-fb-t:focus{outline:none}
.dd-fb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dd-s2)}
.dd-fb-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dd-s2)}
.dd-fb-b{min-height:44px;min-width:44px;margin:0;border:2px solid var(--dd-line);border-radius:12px;background:transparent;color:var(--dd-ink);font:700 var(--dd-t-sm)/1.15 var(--dd-body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 4px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dd-fb-row .dd-fb-b{min-height:64px}
.dd-fb-e{font-size:1.6rem;line-height:1}
.dd-fb-b:active{transform:scale(.96)}
@media (hover:hover){.dd-fb-b:hover{border-color:var(--dd-ink)}}
.dd-fb-more{align-self:center;min-height:44px;display:inline-flex;align-items:center;padding:0 var(--dd-s3);color:var(--dd-muted);font:600 var(--dd-t-sm) var(--dd-body);text-decoration:underline}
.dd-fb-txt{display:flex;flex-direction:column;gap:var(--dd-s1);text-align:left;font:600 var(--dd-t-sm) var(--dd-body)}
.dd-fb-txt div{display:flex;gap:var(--dd-s2)}
.dd-fb-txt input{flex:1;min-width:0;height:44px;border:2px solid var(--dd-line);border-radius:12px;background:transparent;color:var(--dd-ink);font:500 1rem var(--dd-body);padding:0 var(--dd-s3)}
.dd-fb-txt .dd-fb-b{flex:0 0 auto;padding:0 var(--dd-s4)}
@media (prefers-reduced-motion:reduce){.dd-fb-b:active{transform:none}}