/* DoD Games: the Dave on Duty frame shared by every game page and its support pages.
   Loaded AFTER the game's own stylesheet (sill.css, tankforge.css, retro.css), so it wins at
   equal specificity. It owns the family look: navy ground, glass masthead, kicker pills,
   hairline gradient panels, gradient buttons with the shine sweep, cyan text links, the
   alternating section bands and the footer. Palette and type follow /css/style.css.
   The game sheets keep layout, sizes and each game's own identity (title, art, game cards).
   Rule of thumb here: colours, borders, fonts and effects only; sizes that a game sheet
   changes in its media queries are left to the game sheet.
   The ground and panel values are the ones daveonduty.com actually renders: its style.css
   starts from #070b16/#101830 and its "premium skin" block then deepens them to these. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');
:root{
  --d-bg:#04060d;--d-bg-alt:#080d1c;--d-panel:#0d142b;--d-panel-2:#111a36;
  --d-line:rgba(148,163,255,.14);--d-line-2:rgba(148,163,255,.24);
  --d-text:#e8ecff;--d-muted:#9aa5c9;--d-dim:#8a95bb;
  --d-sky:#8fd8ff;--d-sky-2:#c3ecff;--d-violet:#8b93ff;
  --d-grad:linear-gradient(92deg,#818cf8 0%,#22d3ee 100%);
  --d-hair:linear-gradient(150deg,rgba(129,140,248,.42),rgba(34,211,238,.14) 45%,rgba(148,163,255,.05) 78%);
  --d-shadow:0 20px 60px rgba(3,6,20,.55);
  --d-head:'Sora','Inter',system-ui,sans-serif;
  --d-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --d-ease:cubic-bezier(.22,.61,.36,1);
}
html{color-scheme:dark}
body{
  background:
    radial-gradient(900px 560px at 8% -6%,rgba(99,102,241,.20),transparent 62%),
    radial-gradient(760px 520px at 96% 0%,rgba(34,211,238,.11),transparent 60%),
    var(--d-bg);
  background-repeat:no-repeat;
  color:var(--d-text);font-family:var(--d-body);overflow-x:hidden;
}
/* fine film grain, as on daveonduty.com */
body::after{
  content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
::selection{background:rgba(99,102,241,.45);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--d-sky);outline-offset:4px;border-radius:6px}
.skip{background:var(--d-grad);color:#04101f;font-weight:700;border-radius:0 0 12px 12px;z-index:60}

/* ---------- masthead: logo left, quiet nav right; glass bar when sticky ---------- */
.wordmark img{height:44px;width:auto;display:block}
.footer .wordmark img{height:36px}
.masthead{position:relative;z-index:40;border-bottom:0;box-shadow:0 1px 0 var(--d-line)}
.masthead nav a{color:var(--d-muted);font-weight:500;text-decoration:none;padding-block:6px;transition:color .15s}
.masthead nav a:hover{color:var(--d-text)}
.masthead nav a[aria-current="page"]{
  color:var(--d-text);text-decoration:none;
  background:var(--d-grad) no-repeat left bottom/100% 2px;
}
@media (min-width:761px){
  html{scroll-padding-top:112px}
  .masthead{
    position:sticky;top:0;
    background:rgba(7,11,22,.86);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    /* stretch the bar and its hairline across the full window, not just the content column */
    box-shadow:0 0 0 100vmax rgba(7,11,22,.86),0 1px 0 100vmax var(--d-line);
    clip-path:inset(0 -100vmax -1px);
  }
}

/* ---------- headings and kicker pills ---------- */
h2,h3{color:var(--d-text)}
.section-head h2,.help h2,.manual-cta h2,.doc h1,.doc h2{
  font-family:var(--d-head);font-weight:800;letter-spacing:-.02em;text-transform:none;line-height:1.12;
}
.doc h2{font-weight:700}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;width:fit-content;max-width:100%;
  padding:.34rem .9rem;border-radius:999px;
  border:1px solid var(--d-line-2);background:rgba(129,140,248,.07);
  color:var(--d-sky);font:700 12px/1.4 var(--d-body);letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--d-grad);box-shadow:0 0 10px rgba(139,147,255,.9);
}
/* the game sheets size and colour ".section-head p" and ".help p"; the kicker must not inherit that */
.section-head .eyebrow,.help .eyebrow,.manual-cta .eyebrow,.doc .eyebrow{
  font:700 12px/1.4 var(--d-body);letter-spacing:.16em;color:var(--d-sky);margin:0 0 14px;
}
/* hero kicker that carries the game's app icon: the icon replaces the dot */
.eyebrow:has(.app-icon){padding-left:.3rem}
.eyebrow:has(.app-icon)::before{display:none}
.eyebrow .app-icon{width:28px;height:28px;border-radius:8px;border:1px solid var(--d-line-2)}

/* ---------- body copy ---------- */
.lead,.section-head p,.help p,.card p,.room p,.plan p,.plan li,.mode p,.fair p,.keep p,.manual-cta p{color:var(--d-muted)}
.plan strong,.keep strong{color:var(--d-text)}
.fine,.note-line{color:var(--d-dim);font-family:var(--d-body)}
/* at-a-glance chips: the hairline pills of Dave's trust bar */
.facts li{
  border:1px solid var(--d-line);background:rgba(255,255,255,.03);color:#c6cff2;
  font:600 13px/1.4 var(--d-body);letter-spacing:0;text-transform:none;border-radius:999px;padding:.36rem .9rem;
}
/* release status: the same frame on every game page */
.release{color:var(--d-text);font-family:var(--d-body)}
.release small{font:700 10.5px/1.5 var(--d-body);letter-spacing:.16em;text-transform:uppercase}
.release strong{font-family:var(--d-head);font-weight:700;letter-spacing:-.01em}
.masthead nav,.footer,.links,.help,.doc{font-family:var(--d-body)}

/* ---------- panels: navy with the crafted gradient hairline ---------- */
.card,.room,.plan,.mode,.fair article,.keep,.release,.doc-meta,.toc,.manual-cta,.notice{
  background:linear-gradient(var(--d-panel),var(--d-panel)) padding-box,var(--d-hair) border-box;
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 34px rgba(2,4,14,.35);
}
.release small,.doc-meta dt{color:var(--d-dim)}
.release strong,.doc-meta dd{color:var(--d-text)}
.price{border-color:var(--d-line-2);color:var(--d-muted)}
@media (prefers-reduced-motion:no-preference){
  .card,.room,.mode,.fair article,.plan{transition:transform .28s var(--d-ease),box-shadow .28s var(--d-ease)}
  .card:hover,.room:hover,.mode:hover,.fair article:hover,.plan:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 60px rgba(99,102,241,.2)}
}
.note{
  background:var(--d-panel);border:1px solid var(--d-line);border-left:3px solid #818cf8;
  border-radius:0 14px 14px 0;color:var(--d-muted);
}

/* ---------- section bands: every other section on the alt ground with Dave's dot grid ---------- */
main>.section{position:relative;isolation:isolate;border-top:0}
main>.section::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
}
main>.section:nth-of-type(even)::before{
  background:radial-gradient(rgba(148,163,255,.055) 1px,transparent 1.3px) 0 0/28px 28px var(--d-bg-alt);
  border-block:1px solid var(--d-line);
}

/* ---------- screenshots ---------- */
.hero-art img{border-color:var(--d-line);box-shadow:var(--d-shadow)}
.gallery a{background:var(--d-panel);border-color:var(--d-line);transition:border-color .2s,box-shadow .2s}
.gallery a:hover{border-color:rgba(129,140,248,.6);box-shadow:0 18px 50px rgba(99,102,241,.22)}
.gallery figcaption{color:var(--d-muted)}
.gallery figcaption strong{color:var(--d-text)}

/* ---------- links and buttons ---------- */
.contact{color:var(--d-sky);font-weight:600;border-bottom:1px dashed rgba(143,216,255,.5)}
.contact:hover{color:var(--d-sky-2);border-bottom-color:var(--d-sky-2)}
.links{border-top:1px solid var(--d-line)}
.links a{border-bottom:1px solid var(--d-line);transition:background .15s}
.links a:hover{background:rgba(129,140,248,.06)}
.links a:hover strong{color:var(--d-sky)}
.links strong{color:var(--d-text)}
.links small{color:var(--d-muted)}
.links a>span:last-child{color:var(--d-violet)}
.links a>span:first-child{color:inherit}
.doc p,.doc li,.doc td{color:var(--d-muted)}
.doc strong,.doc .ui,.doc .lede,.doc code{color:var(--d-text)}
.doc h3{font-family:var(--d-body);color:var(--d-text)}
.doc a{color:var(--d-sky);text-decoration-color:rgba(143,216,255,.5)}
.doc a:hover{color:var(--d-sky-2)}
.doc li::marker{color:var(--d-violet)}
.doc th,.doc td{border-bottom-color:var(--d-line)}
.doc thead th,.doc .toc h2{font-family:var(--d-body);color:var(--d-sky)}
.doc tbody th{color:var(--d-text)}
.doc-foot{border-top-color:var(--d-line);color:var(--d-dim)}
.doc .toc{margin-top:28px}

.button,.doc .button,.manual-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.55rem;
  padding:.8rem 1.4rem;border-radius:999px;border:0;
  background:var(--d-grad);color:#04101f;font-family:var(--d-body);font-weight:700;font-size:15px;text-decoration:none;
  box-shadow:0 8px 30px rgba(99,102,241,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
.button:hover,.doc .button:hover,.manual-btn:hover{color:#04101f;background:var(--d-grad);transform:translateY(-2px);box-shadow:0 12px 38px rgba(34,211,238,.4)}
.button::after,.manual-btn::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .65s var(--d-ease);
}
.button:hover::after,.manual-btn:hover::after{left:150%}

/* ---------- footer: the alt ground, full width ---------- */
.footer{position:relative;isolation:isolate;border-top:0;color:var(--d-muted)}
.footer::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
  background:var(--d-bg-alt);border-top:1px solid var(--d-line);
}
.footer p{color:var(--d-muted)}
.footer p a{color:var(--d-sky);text-decoration:none}
.footer p a:hover{color:var(--d-sky-2)}
.footer nav a{color:var(--d-muted)}
.footer nav a:hover{color:var(--d-text)}
.notice strong{color:var(--d-text)}
.notice p{color:var(--d-muted)}

/* ---------- gameplay video ---------- */
.watch{margin-top:6px}
.watch figure{margin:0}
.video-frame{
  position:relative;border-radius:18px;overflow:hidden;background:#000;
  border:1px solid transparent;
  background:linear-gradient(#000,#000) padding-box,var(--d-hair) border-box;
  box-shadow:0 0 0 1px rgba(2,4,14,.4),0 30px 70px -24px rgba(3,6,20,.8),0 0 60px -20px rgba(99,102,241,.35);
}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.video-frame .vf-badge{
  position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:.45rem;pointer-events:none;
  font:700 10.5px/1 var(--d-body);letter-spacing:.14em;text-transform:uppercase;
  background:rgba(7,11,22,.78);color:var(--d-text);padding:7px 11px;border-radius:999px;border:1px solid var(--d-line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.video-frame .vf-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--d-grad);box-shadow:0 0 8px rgba(139,147,255,.9)}
.watch figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--d-muted)}
.watch figcaption strong{color:var(--d-text);font-weight:600}

/* ---------- the old manual panel (being replaced by book3d; kept until then) ---------- */
.manual-cta{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:56px;align-items:center;border-radius:24px;padding:48px}
.manual-cta h2{margin-top:0}
.manual-cta ul{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:8px;font-size:15px;color:var(--d-text)}
.manual-cta li::before{content:'▸';color:var(--x-accent,var(--d-sky));margin-right:10px}
/* the closed booklet, standing slightly open on the desk */
.mini-book{perspective:1200px;display:flex;justify-content:center;padding:10px 0 26px}
.mini-book a{display:block;position:relative;width:min(100%,250px);aspect-ratio:440/620;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(6deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mini-book a:hover,.mini-book a:focus-visible{transform:rotateY(-10deg) rotateX(3deg) translateY(-6px)}
.mini-book .mb-cover{position:absolute;inset:0;border-radius:3px 8px 8px 3px;overflow:hidden;background:#222 center/cover no-repeat;box-shadow:inset 6px 0 10px -4px rgba(0,0,0,.5),0 30px 40px -18px rgba(0,0,0,.8);transform:translateZ(6px)}
.mini-book .mb-cover img{width:100%;height:100%;object-fit:cover}
.mini-book .mb-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.28),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 65%,rgba(255,255,255,.1))}
.mini-book .mb-pages{position:absolute;top:4px;bottom:4px;right:-2px;width:12px;background:repeating-linear-gradient(to right,#efe8d2 0 1px,#c8bfa4 1px 2px);transform:rotateY(90deg) translateZ(0);transform-origin:right center;border-radius:0 2px 2px 0}
.mini-book .mb-shadow{position:absolute;left:8%;right:-6%;bottom:-18px;height:26px;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);filter:blur(5px);transform:translateZ(-20px)}

@media (max-width:760px){
  /* phone masthead: logo on top, the page links as one row of hairline pills that scrolls sideways
     inside itself (never the page), like the chips on daveonduty.com */
  .masthead{flex-wrap:wrap;gap:12px;padding:16px 0 14px;min-height:0}
  .masthead nav{
    flex:1 0 100%;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px;margin:-2px;font-size:13.5px;
  }
  .masthead nav::-webkit-scrollbar{display:none}
  .masthead nav a{
    flex:0 0 auto;padding:.4rem .85rem;border-radius:999px;white-space:nowrap;
    border:1px solid var(--d-line);background:rgba(255,255,255,.03);
  }
  .masthead nav a[aria-current="page"]{border-color:rgba(129,140,248,.55);background:rgba(129,140,248,.12)}
  .masthead nav a:focus-visible{outline-offset:-3px}
  /* a game title set in its own display face must never push the page sideways */
  .hero-head,.hero-body{min-width:0}
  .hero h1{overflow-wrap:anywhere}
  .manual-cta{grid-template-columns:1fr;gap:18px;padding:28px 22px}
  .mini-book a{width:190px}
  .wordmark img{height:38px}
}
@media (prefers-reduced-motion:reduce){
  .mini-book a,.manual-btn,.button,.gallery a,.links a{transition:none}
  .button::after,.manual-btn::after{display:none}
}