.oddsprig-nav-header { background:#152227; color:#edf2e9; border-bottom:1px solid #34494a; }
.oddsprig-nav-header *, .oddsprig-subnav * { box-sizing:border-box; }
.oddsprig-nav-wrap { width:calc(100% - 48px); max-width:1240px; min-height:64px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 24px; padding:8px 0; }
.oddsprig-brand { display:inline-flex; align-items:center; min-height:44px; gap:10px; color:#edf2e9; font:600 1.8rem/1 Georgia,serif; text-decoration:none; }
.oddsprig-brand img { display:block; width:36px; height:36px; }
.oddsprig-main-nav { display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; }
.oddsprig-main-nav > a { color:#b3c4b8; font:600 14px/1.5 system-ui,sans-serif; display:inline-flex; align-items:center; min-width:44px; min-height:44px; padding:8px 4px; text-decoration:none; border-bottom:2px solid transparent; }
.oddsprig-main-nav > a:hover, .oddsprig-main-nav > a[aria-current="page"] { color:#c8e6a0; border-bottom-color:#c8e6a0; }
.oddsprig-nav-header a:focus-visible, .oddsprig-subnav a:focus-visible { outline:3px solid #e5ce8e; outline-offset:3px; }
.oddsprig-subnav { width:calc(100% - 48px); max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:6px; padding:8px 0; border-bottom:1px solid #34494a; }
.oddsprig-subnav a { display:inline-flex; align-items:center; min-height:44px; padding:8px 14px; border-radius:5px; color:#b3c4b8; background:#1c2d31; border:1px solid #34494a; text-decoration:none; font:600 14px/1.5 system-ui,sans-serif; }
.oddsprig-subnav a:hover { color:#edf2e9; border-color:#c8e6a0; }
.oddsprig-subnav a[aria-current="page"] { color:#152227; background:#c8e6a0; border-color:#c8e6a0; }
.page-intro { padding-top:44px; }
.page-intro h1 { font-size:clamp(2.4rem,6vw,4.5rem); }
.page-intro p { max-width:65ch; margin-top:18px; color:#b3c4b8; }
.directory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:22px; }
.directory-card { min-width:0; padding:28px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; color:#edf2e9; background:#1c2d31; border:1px solid #34494a; border-radius:8px; text-decoration:none; }
.directory-card:hover { border-color:#c8e6a0; }
.directory-card h2, .directory-card h3 { color:#c8e6a0; font-size:clamp(1.6rem,4vw,2.3rem); }
.directory-card p { color:#b3c4b8; }
.directory-action { margin-top:auto; color:#e5ce8e; text-decoration:underline; text-underline-offset:4px; }
.game-cover { display:block; margin-bottom:28px; }
.game-cover img { width:100%; max-height:480px; object-fit:cover; border-radius:8px; }
.eye-site-footer { margin:36px auto; padding:16px 20px; max-width:1240px; color:#b3c4b8; font:14px/1.5 system-ui,sans-serif; }
@media screen and (max-width:650px) { .oddsprig-nav-wrap, .oddsprig-subnav { width:calc(100% - 32px); } .oddsprig-nav-wrap { min-height:56px; padding:6px 0; } .oddsprig-main-nav { width:100%; justify-content:flex-start; gap:4px 12px; } .oddsprig-subnav a { padding:8px 10px; } .directory-card { padding:22px; } }
@media print { .oddsprig-nav-header,.oddsprig-subnav { display:none !important; } }
.oddsprig-logo{width:32px;height:32px;vertical-align:middle;margin-right:.45em;display:inline-block}
a.oddsprig-brand,header.site a.brand{display:inline-flex;align-items:center}
footer .wordmark{font-size:1rem;letter-spacing:normal}
footer .wordmark .oddsprig-logo{width:24px;height:24px;margin-right:0}
.oddsprig-brand .oddsprig-logo{margin-right:0}

/* Shared marketing shell: match the homepage's 1550px outer / 1502px content width.
   Opt in per page so app layouts retain their own geometry. */
:root { --oddsprig-content-width:1502px; --oddsprig-gutters:48px; }
@media screen {
  body.oddsprig-shared-shell > header.oddsprig-nav-header { display:block; max-width:none; margin:0; padding:0; }
  body.oddsprig-shared-shell :is(.oddsprig-nav-wrap,.oddsprig-subnav,.site-footer.wrap),
  body.oddsprig-shared-shell main#main .wrap { box-sizing:border-box; width:calc(100% - var(--oddsprig-gutters)); max-width:var(--oddsprig-content-width); margin-inline:auto; padding-inline:0; }
  body.oddsprig-shared-shell .oddsprig-nav-wrap > .oddsprig-brand { flex:none; width:auto; letter-spacing:normal; }
  body.oddsprig-shared-shell .oddsprig-brand > .oddsprig-logo { width:32px; height:32px; flex:none; margin:0; }
  body.oddsprig-shared-shell .oddsprig-main-nav > a { font:600 14px/1.5 system-ui,sans-serif; text-transform:none; letter-spacing:normal; }
  body.oddsprig-shared-shell > main:not(:has(.wrap)),
  body.oddsprig-shared-shell > footer:not(.wrap) { box-sizing:border-box; width:calc(100% - var(--oddsprig-gutters)); max-width:var(--oddsprig-content-width); margin-inline:auto; padding-inline:0; }
  body.oddsprig-shared-shell main#main.rig-entry { width:calc(100% - var(--oddsprig-gutters)); max-width:var(--oddsprig-content-width); padding-inline:0; }
  body.oddsprig-shared-shell.image-generator > main { box-sizing:border-box; width:calc(100% - var(--oddsprig-gutters)); max-width:var(--oddsprig-content-width); padding-inline:0; }
  body.oddsprig-shared-shell .footer-main > .wordmark { display:inline-flex; align-items:center; width:fit-content; min-height:44px; font:600 1rem/1.5 Georgia,serif; letter-spacing:normal; text-decoration:none; }
  body.oddsprig-shared-shell > .site-tabs { box-sizing:border-box; width:calc(100% - var(--oddsprig-gutters)); max-width:var(--oddsprig-content-width); margin-inline:auto; padding-block:8px; }
}
@media screen and (max-width:650px) {
  body.oddsprig-shared-shell { --oddsprig-gutters:32px; }
  body.oddsprig-shared-shell .oddsprig-brand > .oddsprig-logo { width:24px; height:24px; }
}