/* Dope Dumb Games. Solid colors only. Tokens first, then everything uses them. */

/* Tokens */
:root {
  color-scheme: dark;

  /* Brand palette */
  --ink: #0D0F14;
  --purple: #7C3AED;
  --teal: #00E5DB;
  --pink: #FF4D9D;
  --yellow: #F7FF4D;
  --white: #FFFFFF;

  /* Neutrals built on the near black */
  --surface: #161922;
  --line: #262A36;
  --text: #FFFFFF;
  --text-soft: #E3E5EC;
  --muted: #A7ADBB;

  /* Type */
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h1: clamp(3rem, 2rem + 4.6vw, 5.5rem);
  --fs-hero: clamp(4rem, 2.4rem + 7vw, 8rem);

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;
  --s10: 8rem;

  /* Shape and layout */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-icon: 22.37%;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 40rem;
}

/* Fonts (self hosted, SIL OFL, see /assets/fonts) */
@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/fonts/bebas-neue-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  font: 500 var(--fs-base) / 1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

main { flex: 1 0 auto; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-weight: 400; }

p { margin: 0; }

a {
  color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--white); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--teal); color: var(--ink); }

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The game page runs wider than the rest of the site, to give the device room */
.wrap-wide { max-width: calc(1480px + 2 * var(--gutter)); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 10;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

/* Header */
.site-header { padding-block: var(--s5); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  color: var(--white);
  text-decoration: none;
}
.brand:hover { color: var(--white); }
.brand img { width: 52px; height: auto; }

.brand-name {
  font: 400 1.75rem / 1 var(--font-display);
  letter-spacing: 0.03em;
  padding-top: 0.12em;
  white-space: nowrap;
}
.brand-name .dope { color: var(--teal); }

.nav ul {
  display: flex;
  gap: var(--s1);
  margin: 0 calc(-1 * var(--s3)) 0 0;
  padding: 0;
  list-style: none;
}
.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-sm);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.nav a:hover { color: var(--teal); }

/* Shared type */
.eyebrow {
  margin-bottom: var(--s5);
  color: var(--muted);
  font: 700 0.8125rem / 1 var(--font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.display {
  font: 400 var(--fs-hero) / 0.86 var(--font-display);
  letter-spacing: 0.01em;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: balance;
}

.muted { color: var(--muted); text-wrap: balance; }
.muted span { display: inline-block; }

/* 44px tall hit area without moving the layout */
.eyebrow a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -15px;
  text-decoration: none;
}
.eyebrow a:hover { text-decoration: underline; }

/* Buttons and links */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-sm);
  background: var(--teal);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: var(--white); color: var(--ink); }

.button-ink { background: var(--ink); color: var(--white); }

.link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.link-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Sections */
.section { padding-block: var(--s8); }

/* Home: hero */
.hero {
  padding-block: var(--s8) var(--s9);
  text-align: center;
}
.hero-logo { width: min(560px, 100%); margin-inline: auto; }
.hero-logo img { width: 100%; }

.tagline {
  margin-top: var(--s6);
  font-weight: 700;
  font-size: clamp(0.9375rem, 0.82rem + 0.55vw, 1.25rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tagline span { display: inline-block; }
.tagline .fun { color: var(--yellow); }

/* Home: game spotlight. One slide per game; it rotates once there are two or more. */
.spotlight { padding-block: var(--s5) var(--s8); }

.spotlight-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7);
  padding: var(--s8) var(--s8) 0;
  border-radius: var(--r-lg);
  background: var(--purple);
  color: var(--white);
  overflow: hidden;
}

/* The slides: stacked one under the other without JavaScript. With two or more games spotlight.js
   adds .is-rotating and they share one grid cell, so the spotlight keeps the tallest slide's height
   and nothing moves when they change. The next slide fades in over the last, which then goes. */
.spotlight-slides {
  display: grid;
  gap: var(--s5);
}
/* sideways swipes are spotlight.js's; the page still scrolls and zooms */
.is-rotating .spotlight-slides { touch-action: pan-y pinch-zoom; }
.is-rotating .spotlight-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}
.is-rotating .spotlight-slide.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .is-rotating .spotlight-slide { transition: opacity 0s linear 0.5s, visibility 0s linear 0.5s; }
  .is-rotating .spotlight-slide.is-current { transition: opacity 0.5s ease; }
}

.spotlight-body {
  align-self: center;
  padding-bottom: var(--s8);
}

.app-icon {
  border-radius: var(--r-icon);
  background: var(--surface);
}
.spotlight-slide .app-icon { width: 112px; height: 112px; }

.spotlight-title {
  margin: var(--s5) 0 var(--s3);
  font: 400 clamp(3.5rem, 2.2rem + 4.6vw, 6rem) / 0.86 var(--font-display);
  letter-spacing: 0.01em;
}

.spotlight-line {
  max-width: 24ch;
  font-size: var(--fs-lg);
  line-height: 1.45;
}

.spotlight-status {
  margin-top: var(--s5);
  font-weight: 700;
}

.spotlight-cta { margin-top: var(--s4); }

.button-play {
  min-height: 60px;
  padding: 0.55rem var(--s6) 0.4rem;
  background: var(--yellow);
  color: var(--ink);
  font: 400 2rem / 1 var(--font-display);
  letter-spacing: 0.04em;
}
.button-play:hover { background: var(--white); color: var(--ink); }
.spotlight .button-play:focus-visible { outline-color: var(--white); }

.spotlight-media {
  align-self: end;
  justify-self: center;
  width: 300px;
  height: 500px;
  overflow: hidden;
}
.spotlight-clip {
  display: block;
  width: 100%;
  height: auto;
}
/* Each clip is a plain game screen, the way the games play on the site (no phone around it):
   rounded corners, and 'Merica's tall screen runs off the card's bottom edge */
.spotlight-screen {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--ink);
}
/* Chrome shows a player's controls on a clip when JavaScript is off; the clips are only pictures */
.spotlight-clip::-webkit-media-controls { display: none !important; }

/* Crypto Warz: the arena's navy and neon grid, and its 16:9 clip whole, as a plain rounded screen */
.spotlight-cw {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: var(--s6);
  padding-bottom: var(--s8);
  background: #0A0A1A url("/assets/img/crypto-warz/grid.svg") repeat 0 0 / 200px 200px;
}
.spotlight-cw .spotlight-body { padding-bottom: 0; }
.spotlight-cw .spotlight-line { text-wrap: balance; }
.spotlight-cw .spotlight-media {
  align-self: center;
  justify-self: stretch;
  width: auto;
  height: auto;
}
.spotlight .spotlight-screen-wide {
  border-radius: 16px;
  background: #0A0A1A;
  outline: 1px solid var(--line);
}
.spotlight-screen-wide .spotlight-clip {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Rotation controls, only built by spotlight.js when there are two or more games:
   previous, a dot per game, next */
.spotlight-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}
.spotlight-dots {
  display: flex;
  gap: var(--s1);
}
.spotlight-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.spotlight-dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}
.spotlight-dot:hover::before { background: var(--white); }
.spotlight-dot[aria-current="true"]::before { background: var(--teal); }
/* the arrows: a chevron from two sides of a square, no glyphs */
.spotlight-arrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border: solid currentColor;
  border-width: 3px 3px 0 0;
  border-radius: 2px;
}
.spotlight-prev::before { margin-left: 5px; transform: rotate(-135deg); }
.spotlight-next::before { margin-right: 5px; transform: rotate(45deg); }
.spotlight-arrow:hover { color: var(--teal); }
.spotlight-controls button:focus-visible { outline-offset: 0; border-radius: 50%; }

/* Home: studio */
.studio { padding-block: var(--s8) var(--s6); }

/* Home: statement and contact */
.statement { text-align: center; }
.statement-text {
  font: 400 clamp(2.25rem, 1.5rem + 3vw, 3.75rem) / 0.95 var(--font-display);
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.statement-text > span { display: block; }
.statement-text .dope { color: var(--teal); }
.statement-sub {
  max-width: 34rem;
  margin: var(--s5) auto 0;
  color: var(--muted);
  text-wrap: balance;
}

.contact { text-align: center; padding-bottom: var(--s9); }
.contact-lead { font-size: var(--fs-lg); text-wrap: balance; }
.email-big {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  margin-top: var(--s3);
  font-weight: 700;
  /* sized to stay on one line down to 320px wide */
  font-size: min(2.25rem, 5.6vw);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.email-big:hover { text-decoration: underline; }

/* Decorative band and footer */
.band {
  height: 72px;
  background: var(--purple) url("/assets/img/pattern.svg") repeat-x left center / auto 100%;
}

.site-footer {
  padding-block: var(--s4) var(--s5);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  min-width: 44px;
  justify-content: center;
}
.site-footer a:hover { color: var(--teal); text-decoration: underline; }

/* Game page: the game in its device on a solid panel, the game's info alongside */
.play { padding-bottom: var(--s7); }
.play-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".    panel"
    "head panel"
    "more panel"
    ".    panel";
  column-gap: clamp(24px, 3.2vw, 56px);
  width: 100%;
  max-width: calc(1480px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.play-head { grid-area: head; }
.play-panel { grid-area: panel; }
.play-more { grid-area: more; margin-top: var(--s6); }

.play-head .app-icon { width: 96px; height: 96px; margin-bottom: var(--s5); }
.play-title {
  font: 400 clamp(3rem, 2.2rem + 2.6vw, 4.75rem) / 0.88 var(--font-display);
  letter-spacing: 0.01em;
}
.play-status {
  margin-top: var(--s4);
  color: var(--yellow);
  font-weight: 700;
}
.play-lead {
  margin-top: var(--s4);
  color: var(--text-soft);
  text-wrap: pretty;
}
.play-more .eyebrow { margin-bottom: var(--s3); }
.play-how {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
}
.play-how li + li { margin-top: var(--s1); }
.play-how strong { color: var(--white); font-weight: 700; }
.play-links {
  justify-content: flex-start;
  gap: 0 var(--s5);
  margin-top: var(--s3);
}

/* The device fits the window: the panel is as tall as what is left under the header */
.play-panel {
  display: flex;
  height: max(540px, calc(100vh - 96px - var(--s5)));
  height: max(540px, calc(100svh - 96px - var(--s5)));
  padding: var(--s5);
  border-radius: var(--r-lg);
  background: var(--teal);
  --ddg-ctl-bg: var(--ink);
  --ddg-ctl-hover: var(--line);
  --ddg-ctl-fg: var(--white);
  --ddg-ctl-on-bg: var(--purple);
  --ddg-ctl-on-fg: var(--white);
  --ddg-focus: var(--ink);
}
.play-shell { flex: 1 1 auto; min-width: 0; }
.play-noscript { margin: auto; color: var(--ink); font-weight: 700; }

/* Short windows (laptops): a slimmer header and panel padding leave more room for the device */
@media (max-height: 820px) and (hover: hover) {
  .play-page .site-header { padding-block: var(--s3); }
  .play-page .play-panel {
    height: max(480px, calc(100vh - 72px - var(--s4)));
    height: max(480px, calc(100svh - 72px - var(--s4)));
    padding: var(--s4);
  }
}

/* Phones and tablets play full screen, so the panel only holds the PLAY card */
.touch-only { display: none; }
@media (pointer: coarse) and (hover: none) {
  .touch-only { display: list-item; }
  .pointer-only { display: none; }
  .play-panel { height: auto; }
  .play-shell { height: min(60svh, 520px); }
}

/* Text pages: privacy and support */
.wrap-narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.page-head { padding-block: var(--s7) var(--s6); }
.page-title {
  font: 400 var(--fs-h1) / 0.9 var(--font-display);
  letter-spacing: 0.01em;
}
.page-meta { margin-top: var(--s4); color: var(--muted); }

.page-body { padding-bottom: var(--s9); }

.prose { max-width: var(--measure); color: var(--text-soft); }
.summary + .prose { margin-top: var(--s7); }
.prose h2 {
  margin: var(--s7) 0 var(--s3);
  color: var(--white);
  font: 400 clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem) / 1 var(--font-display);
  letter-spacing: 0.01em;
}
.prose p + p,
.prose ul + p { margin-top: var(--s4); }
.prose ul { margin: var(--s4) 0 0; padding-left: 1.2em; }
.prose li + li { margin-top: var(--s2); }
.prose strong { color: var(--white); font-weight: 700; }
/* /privacy: each game's own section opens under a rule */
.prose .prose-game {
  margin-top: var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.summary {
  max-width: var(--measure);
  padding: var(--s6);
  border-radius: var(--r-md);
  background: var(--surface);
}
.summary-title {
  margin-bottom: var(--s4);
  font: 400 1.75rem / 1 var(--font-display);
  letter-spacing: 0.02em;
}
.checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.checks li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.checks li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--teal);
}

/* Support */
.contact-card {
  max-width: var(--measure);
  padding: var(--s6);
  border-radius: var(--r-lg);
  background: var(--teal);
  color: var(--ink);
}
.contact-card p { font-weight: 600; text-wrap: balance; }
.contact-card a { color: var(--ink); }
.contact-card a:hover { color: var(--ink); text-decoration-thickness: 3px; }
.contact-card .email-big { margin-top: var(--s2); font-size: min(2.25rem, 4.7vw); }
.contact-card .small { margin-top: var(--s3); font-size: var(--fs-sm); }
.contact-card :focus-visible { outline-color: var(--ink); }

.faq-title {
  margin: var(--s8) 0 var(--s4);
  font: 400 var(--fs-h2) / 1 var(--font-display);
  letter-spacing: 0.01em;
}

.faq { max-width: var(--measure); border-top: 2px solid var(--line); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
/* plus that turns into a minus: two solid bars, no glyphs */
.faq-icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--teal);
}
.faq-icon::after { transform: rotate(90deg); }
.faq details[open] .faq-icon::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--teal); }
.faq .answer {
  padding-bottom: var(--s5);
  color: var(--text-soft);
}
.faq .answer p + p { margin-top: var(--s3); }

/* 404 */
.lost {
  padding-block: var(--s9);
  text-align: center;
}
.lost img { width: 120px; margin: 0 auto var(--s6); }
.lost .page-title { margin-top: var(--s3); }
.lost p { margin-top: var(--s4); }
.lost .button { margin-top: var(--s6); }

/* Motion, only when welcome */
@media (prefers-reduced-motion: no-preference) {
  .button,
  .nav a,
  .faq summary { transition: color 0.15s ease, background-color 0.15s ease; }
  .faq-icon::after { transition: transform 0.2s ease; }
}

/* Tablet and down */
@media (max-width: 860px) {
  .spotlight-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
    padding: var(--s6) var(--s6) 0;
  }
  /* stacked card: center everything, like the rest of the page */
  .spotlight-body { padding-bottom: 0; text-align: center; }
  .spotlight-slide .app-icon,
  .spotlight-line { margin-inline: auto; }
  .spotlight-media {
    justify-self: center;
    width: min(250px, 72%);
    height: 320px;
  }
  /* The text sits at the top, where 'Merica's does, and the 16:9 screen is centred in the room
     under it, no taller than 'Merica's 320 px clip (569 wide), so both slides are the same height */
  .spotlight-cw { grid-template-rows: auto minmax(0, 1fr); padding-bottom: var(--s6); }
  .spotlight-cw .spotlight-body { align-self: start; }
  .spotlight-cw .spotlight-media {
    align-self: center;
    justify-self: center;
    width: min(100%, 569px);
    height: auto;
    overflow: visible;
  }
}


/* Game page on a narrower computer window: a slimmer info column keeps the device beside it */
@media (min-width: 761px) and (max-width: 980px) and (hover: hover) {
  .play-grid { grid-template-columns: minmax(200px, 272px) minmax(0, 1fr); }
}

/* Game page, stacked: info, then the device, then how to play */
@media (max-width: 760px), (max-width: 980px) and (hover: none) {
  .play-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "panel" "more";
    text-align: center;
  }
  .play-head { padding-block: var(--s4) var(--s6); }
  .play-head .app-icon { margin-inline: auto; }
  .play-lead { max-width: 34rem; margin-inline: auto; }
  .play-more { margin-top: var(--s6); }
  .play-links { justify-content: center; }
}
/* On a computer the device comes first, so it and its controls fit the window */
@media (max-width: 760px) and (hover: hover) {
  .play-grid { grid-template-areas: "panel" "head" "more"; }
  .play-head { padding-block: var(--s7) 0; }
}

/* Phones */
@media (max-width: 520px) {
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .brand img { width: 48px; }
  .tagline { letter-spacing: 0.1em; }
  .hero { padding-block: var(--s7) var(--s8); }
  .section { padding-block: var(--s7); }
  .spotlight { padding-top: 0; }
  .spotlight-slide { padding: var(--s5) var(--s5) 0; border-radius: var(--r-md); }
  .spotlight-media { height: 260px; }
  .spotlight-cw { padding-bottom: var(--s5); }
  .spotlight .spotlight-screen-wide { border-radius: 12px; }
  .spotlight-slide .app-icon { width: 88px; height: 88px; }
  .studio { padding-block: var(--s7) var(--s4); }
  .play-panel { padding: var(--s4); border-radius: var(--r-md); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .contact-card,
  .summary { padding: var(--s5); }
}

/* The big view (the shell's data-big): the device takes the whole window and the game's info goes
   under it. The shell marks its root .is-big and fits the device to the room it gets. */
.play-grid:has(.ddg-shell.is-big) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  grid-template-areas: "panel" "head" "more";
  max-width: none;
  text-align: center;
}
.play-panel:has(.ddg-shell.is-big) {
  height: 100vh;
  height: 100svh;
}
.play-grid:has(.ddg-shell.is-big) .play-head { padding-top: var(--s7); }
.play-grid:has(.ddg-shell.is-big) .play-head .app-icon { margin-inline: auto; }
.play-grid:has(.ddg-shell.is-big) .play-lead { max-width: 34rem; margin-inline: auto; }
.play-grid:has(.ddg-shell.is-big) .play-links { justify-content: center; }

/* Crypto Warz (body.cw-page): 'Merica Bird's game page, with its 16:9 game window in the panel, a tagline
   under the name, and The Coins and In the Arena under the game. */
.play-tagline {
  margin-top: var(--s3);
  color: var(--text-soft);
  font-size: var(--fs-lg);
  font-weight: 600;
}
/* The game window is 16:9 with its controls in a column on its right (the column and its gap take
   68 px). On a computer it sits across the page with the game's info under it: the normal view is
   up to 1200 px wide (the grid, the header and the sections line up with it), and the panel is no
   taller than the window needs at its width, nor than the screen under the header. The big view
   takes the whole width and height. */
.cw-page { --cw-wide: calc(1200px + 68px + 2 * var(--s5) + 2 * var(--gutter)); }
.cw-page .play-shell { min-height: 240px; }
.cw-page .play-grid { container-type: inline-size; }
@media (hover: hover) {
  .cw-page .play-grid,
  .cw-page .wrap-wide { max-width: var(--cw-wide); }
  .cw-page .play-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "panel" "head" "more";
    text-align: center;
  }
  .cw-page .play-head { padding-block: var(--s7) 0; }
  .cw-page .play-head .app-icon { margin-inline: auto; }
  .cw-page .play-lead { max-width: 34rem; margin-inline: auto; }
  .cw-page .play-more { margin-top: var(--s6); }
  .cw-page .play-links { justify-content: center; }
  .cw-page .play-panel {
    height: max(360px, min(calc(100vh - 96px - var(--s5)), calc((100cqw - 2 * var(--s5) - 68px) / 1.7778 + 2 * var(--s5))));
    height: max(360px, min(calc(100svh - 96px - var(--s5)), calc((100cqw - 2 * var(--s5) - 68px) / 1.7778 + 2 * var(--s5))));
  }
}
@media (max-height: 820px) and (hover: hover) {
  .cw-page .play-panel {
    height: max(340px, min(calc(100vh - 72px - var(--s4)), calc((100cqw - 2 * var(--s4) - 68px) / 1.7778 + 2 * var(--s4))));
    height: max(340px, min(calc(100svh - 72px - var(--s4)), calc((100cqw - 2 * var(--s4) - 68px) / 1.7778 + 2 * var(--s4))));
  }
}
/* Stacked on a narrow computer window: the controls go back under the window (shell.css), the
   panel is as tall as the window needs at this width, and the big view (no bigger here) leaves
   the switch */
@media (max-width: 760px) and (hover: hover) {
  .cw-page .play-panel { height: max(300px, min(calc(100svh - 120px), calc((100cqw - 2 * var(--s5)) / 1.7778 + 2 * var(--s5) + 68px))); }
  .cw-page .ddg-shell:not(.is-big) .ddg-pill { display: none; }
}
@media (max-width: 520px) and (hover: hover) {
  .cw-page .play-panel { height: max(280px, min(calc(100svh - 120px), calc((100cqw - 2 * var(--s4)) / 1.7778 + 2 * var(--s4) + 126px))); }
}
/* The controls' column beside the window is 394 px tall: the panel never gets shorter than that
   plus its padding (min-height wins over every height above and below) */
@media (min-width: 761px) and (hover: hover) {
  .cw-page .play-panel { min-height: calc(394px + 2 * var(--s5)); }
}
@media (min-width: 761px) and (max-height: 820px) and (hover: hover) {
  .cw-page .play-panel { min-height: calc(394px + 2 * var(--s4)); }
}
/* The big view runs edge to edge: the whole width and height of the browser, a slim teal edge,
   square corners. Narrower than 761 px it keeps the page's gutters (the rules below). */
@media (min-width: 761px) and (hover: hover) {
  .cw-page .play-grid:has(.ddg-shell.is-big) { padding-inline: 0; }
  .cw-page .play-panel:has(.ddg-shell.is-big) {
    height: 100vh;
    height: 100svh;
    min-height: calc(394px + 2 * var(--s3));
    padding: var(--s3);
    border-radius: 0;
  }
}
@media (max-width: 760px) and (hover: hover) {
  .cw-page .play-panel:has(.ddg-shell.is-big) {
    height: min(100vh, calc((100cqw - 2 * var(--s5)) / 1.7778 + 2 * var(--s5) + 68px));
    height: min(100svh, calc((100cqw - 2 * var(--s5)) / 1.7778 + 2 * var(--s5) + 68px));
  }
}
@media (max-width: 520px) and (hover: hover) {
  .cw-page .play-panel:has(.ddg-shell.is-big) {
    height: min(100vh, calc((100cqw - 2 * var(--s4)) / 1.7778 + 2 * var(--s4) + 126px));
    height: min(100svh, calc((100cqw - 2 * var(--s4)) / 1.7778 + 2 * var(--s4) + 126px));
  }
}
/* Phones and tablets play full screen, so the panel only holds the PLAY card */
@media (pointer: coarse) and (hover: none) {
  .cw-page .play-panel { height: auto; }
}
@media (pointer: coarse) and (hover: none) and (min-width: 981px) {
  .cw-page .play-panel { align-self: center; }
  .cw-page .play-shell { height: min(60svh, 520px); }
}

/* Under the game */
.cw-section { padding-block: var(--s8); }
.cw-section + .cw-section { padding-top: var(--s4); }
.cw-heading {
  margin-bottom: var(--s5);
  font: 400 var(--fs-h2) / 1 var(--font-display);
  letter-spacing: 0.02em;
}
.cw-section-lead {
  max-width: var(--measure);
  margin: calc(-1 * var(--s2)) 0 var(--s6);
  color: var(--text-soft);
}

.cw-coin-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cw-coin {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4) var(--s3) var(--s3);
  border-radius: var(--r-md);
  background: var(--surface);
}
.cw-coin img { flex: none; width: 80px; height: 80px; }
.cw-coin-name {
  font: 400 1.625rem / 1 var(--font-display);
  letter-spacing: 0.02em;
}
.cw-coin p {
  margin-top: var(--s1);
  color: var(--text-soft);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.cw-shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
.cw-shot {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--ink);
}
.cw-shot img { width: 100%; }
.cw-shot-main { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .cw-coin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cw-coin-list { grid-template-columns: minmax(0, 1fr); }
  .cw-shot-grid { grid-template-columns: minmax(0, 1fr); }
  .cw-section { padding-block: var(--s7); }
  .play-grid .play-tagline { margin-inline: auto; }
}
@media (max-width: 520px) {
  .cw-coin img { width: 64px; height: 64px; }
}