/* Total Dog Water Gaming.

   THE PALETTE IS THE BRAND'S OWN, not a new one. Every value below is copied from
   C:\Dev\Brand\TotalDogWater\logo.html, which is where the logo, the banner and the profile
   marks were built:

     --blue:#2E7DF6  --pop:#55C8FF  --deep:#1B57C4  --ink:#101A2B
     --grey:#8D9BAE  --lgrey:#DCE3EC --paper:#F5F8FC
     --bg:#0B1017    --card:#141C27  --line:#26313F --txt:#E7EDF5 --dim:#93A1B4

   Type is the brand's too: Segoe UI / system-ui, 800 weight on headings with -0.5px
   tracking, which is what the brand pages set. */

:root {
  --blue: #2E7DF6;
  --pop: #55C8FF;
  --deep: #1B57C4;
  --ink: #101A2B;
  --grey: #8D9BAE;
  --lgrey: #DCE3EC;
  --paper: #F5F8FC;

  --bg: #0B1017;
  --card: #141C27;
  --line: #26313F;
  --txt: #E7EDF5;
  --dim: #93A1B4;

  --max: 64rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 15px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* HEIGHT FOLLOWS WIDTH, ALWAYS.
   Every <img> here carries its real width/height attributes, which is what reserves the
   right space before the file loads and stops the page jumping. But max-width alone then
   shrinks only the WIDTH when a column is narrower than the file, while the height attribute
   holds - so the 512x512 app icon rendered 258x512, squashed to half its width, on the game
   page. `height: auto` is what lets the attribute do its job and still scale in proportion. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pop); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid var(--line);
  background: rgba(11, 16, 23, 0.94);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(6px);
}
.masthead .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 4.2rem; flex-wrap: wrap; }

.wordmark { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; color: var(--txt); }
.wordmark img { width: 2.1rem; height: 2.1rem; border-radius: 50%; }
.wordmark b { font: 800 1rem/1 "Segoe UI", system-ui, sans-serif; letter-spacing: -0.5px; }
.wordmark b span { color: var(--blue); }

nav.primary { display: flex; gap: 1.1rem; flex-wrap: wrap; }
nav.primary a {
  color: var(--dim); text-decoration: none; font-size: 0.95rem;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
nav.primary a:hover { color: var(--txt); }
nav.primary a[aria-current="page"] { color: var(--txt); border-bottom-color: var(--blue); }
nav.primary a.press { color: var(--pop); }

/* ---------------------------------------------------------------- type */

h1 { font: 800 clamp(2rem, 6vw, 3rem)/1.08 "Segoe UI", system-ui, sans-serif; letter-spacing: -0.5px; margin: 0 0 0.6rem; text-wrap: balance; }
h2 { font: 800 clamp(1.2rem, 3vw, 1.5rem)/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: -0.5px; margin: 2.6rem 0 0.9rem; }
h3 { font: 800 1rem/1.25 "Segoe UI", system-ui, sans-serif; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; max-width: 38rem; }
.lede { font-size: 1.08rem; color: var(--dim); max-width: 40rem; }

.eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pop); margin-bottom: 0.9rem;
}

/* The brand's own strapline strip, exactly as the banner sets it. */
.strapline {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lgrey);
}
.strapline li { display: flex; align-items: center; gap: 1.1rem; }
.strapline li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.strapline li:last-child::after { display: none; }

/* ---------------------------------------------------------------- sections */

section { padding: 3rem 0; }
section.hero { padding: 3.4rem 0 2.6rem; }
section + section { border-top: 1px solid var(--line); }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.1rem; align-items: start; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--blue); }
.card p { color: var(--dim); font-size: 0.93rem; margin: 0; }

.game-card { padding: 0; overflow: hidden; }
.game-card img { aspect-ratio: 1024 / 500; object-fit: cover; }
.game-card .body { padding: 1rem 1.2rem 1.2rem; }

.btn {
  display: inline-block; background: var(--blue); color: #fff; font-weight: 800;
  text-decoration: none; padding: 0.7rem 1.15rem; border-radius: 10px; border: 1px solid var(--blue);
}
.btn:hover { background: var(--deep); border-color: var(--deep); }
.btn.ghost { background: transparent; color: var(--txt); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--blue); background: transparent; }
.btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.4rem 0 0; }

table.facts { border-collapse: collapse; width: 100%; max-width: 40rem; font-size: 0.95rem; }
table.facts th, table.facts td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.facts th { color: var(--dim); font-weight: 600; width: 12rem; }

.scroller { overflow-x: auto; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { margin: 0 0 0.5rem; }

/* ---------------------------------------------------------------- placeholders

   EVERY LINE OF COPY THIS SITE DOES NOT YET HAVE FROM STEPHEN LOOKS LIKE THIS.
   The first cut of this site invented taglines, a studio description and a channel premise,
   none of which were his. A placeholder that is obviously a placeholder is the only honest
   way to stand a page up before its words exist. */
.todo {
  border: 1px dashed var(--blue);
  border-radius: 12px;
  background: rgba(46, 125, 246, 0.07);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.2rem;
  max-width: 38rem;
}
.todo b { display: block; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pop); margin-bottom: 0.3rem; }
.todo p { margin: 0; color: var(--dim); font-size: 0.93rem; }

/* ---------------------------------------------------------------- footer */

footer.site { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--dim); font-size: 0.9rem; }
footer.site .wrap { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: baseline; }
footer.site nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-left: auto; }
footer.site a { color: var(--dim); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------------------------------------------------------------- the home hero

   THE ART IS THE BRAND'S OWN KEYED DUO (Brand/TotalDogWater/out/keyed/duo_pick.png), not the
   YouTube banner. The platform banners are padded for each platform's own crop, so dropped
   into a web hero they render as a mostly-empty block with a small logo adrift in it, and
   the 2560px width pushed the page sideways. Those stay in the press assets, where they are
   what somebody actually wants to download. */
.home-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
@media (min-width: 52rem) {
  .home-hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 2.5rem; }
}
.home-hero .say { min-width: 0; }
.home-hero .duo { width: 100%; height: auto; filter: drop-shadow(0 1rem 2rem rgba(0,0,0,0.5)); }

/* Nothing on this site is allowed to scroll the page sideways. */
html, body { overflow-x: hidden; }

/* ---------------------------------------------------------------- the games menu

   A DROPDOWN ONLY WHEN THERE IS SOMETHING TO DROP DOWN. build.py emits a plain link while
   there is one title and this menu from the second onwards, so the nav grows with the
   catalogue instead of being rebuilt for it.

   It is a <details>, not a script: it opens on click and from the keyboard with no JS, and
   it still works if JS is off. The hover-open below is a convenience on pointer devices
   only, so it never traps a touch user in a menu that opened under their thumb. */
nav.primary details.menu { position: relative; }
nav.primary details.menu > summary {
  list-style: none; cursor: pointer;
  color: var(--dim); font-size: 0.95rem;
  padding: 0.35rem 0; border-bottom: 2px solid transparent;
}
nav.primary details.menu > summary::-webkit-details-marker { display: none; }
nav.primary details.menu > summary::after {
  content: ""; display: inline-block; margin-left: 0.4rem; vertical-align: 0.15em;
  border: 0.28rem solid transparent; border-top-color: currentColor;
}
nav.primary details.menu > summary:hover,
nav.primary details.menu[open] > summary { color: var(--txt); }

.menu-panel {
  position: absolute; top: 100%; left: -0.75rem; z-index: 30;
  min-width: 13rem; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.4rem; margin-top: 0.4rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45);
}
.menu-panel a {
  padding: 0.5rem 0.7rem; border-radius: 8px; border-bottom: 0;
  color: var(--txt); text-decoration: none; white-space: nowrap;
}
.menu-panel a:hover { background: rgba(46, 125, 246, 0.14); }
.menu-panel a[aria-current="page"] { color: var(--pop); }
.menu-panel a.all { border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.6rem; color: var(--dim); }

@media (hover: hover) and (pointer: fine) {
  nav.primary details.menu:hover > .menu-panel { display: flex; }
  nav.primary details.menu:not([open]):hover > summary { color: var(--txt); }
  nav.primary details.menu:not([open]) > .menu-panel { display: none; }
  nav.primary details.menu:hover > summary::after { border-top-color: var(--pop); }
}

/* The trailer, when a game has one. */
video.trailer { width: 100%; max-width: 46rem; border-radius: 14px; border: 1px solid var(--line); background: #000; }