/* dobudex website — shared styles. GBA/pixel aesthetic matching the app theme
   (config/theme.dart): dark surface, Pokedex blue, thick black borders,
   Press Start 2P headings + VT323 body. */

:root {
  --primary: #3b82f6;       /* hero/brand + buttons (large text only) */
  --link: #60a5fa;          /* links + section headings: AA-contrast on panels */
  --primary-dark: #1e40af;
  --accent: #ef4444;
  --gold: #fbbf24;
  --bg: #111827;        /* surface / near-black */
  --panel: #1f2937;     /* backgroundDark */
  --panel-2: #374151;
  --text: #ffffff;
  --text-dim: #d1d5db;
  --border: #000000;
  /* Scrim layered over the hero photo so the scene reads as a backdrop and the
     mockups/card pop. Darker top/bottom (blends into nav + footer), lighter
     middle (lets the art show). Shared by the desktop + mobile hero rules. */
  --hero-scrim: linear-gradient(180deg,
    rgba(17, 24, 39, 0.66) 0%,
    rgba(17, 24, 39, 0.34) 38%,
    rgba(17, 24, 39, 0.58) 100%);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Subtle on-brand depth: a soft brand-blue glow at the top (echoing the
     hero's phone glow) over a faint vertical gradient, so the dark surface
     doesn't read as flat. (No background-attachment: fixed , it janks on
     iOS Safari and buys nothing on the single-screen landing.) */
  background:
    radial-gradient(1000px 560px at 50% -5%, rgba(59, 130, 246, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(0, 0, 0, 0.16))
    var(--bg);
  color: var(--text);
  font-family: 'VT323', ui-monospace, monospace;
  font-size: 22px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
  /* Sticky footer: fill the viewport and let <main> grow so the footer sits
     at the bottom even when content is short on tall screens. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Grow the page content so the footer is pushed to the bottom. */
main {
  flex: 1 0 auto;
}

h1, h2, h3, .pixel {
  font-family: 'Press Start 2P', 'VT323', monospace;
  line-height: 1.4;
  color: var(--text);
}

h1 { font-size: 20px; margin: 0 0 16px; }
h2 { font-size: 15px; margin: 32px 0 12px; color: var(--link); }
h3 { font-size: 12px; margin: 24px 0 8px; color: var(--text-dim); }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

p, li { color: var(--text-dim); }
strong { color: var(--text); }

.container { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50; /* above the hero phones (z-index up to 3) */
  border-bottom: 3px solid var(--border);
  background: var(--panel);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.brand {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px; color: var(--primary);
  text-shadow: 2px 2px 0 var(--border);
}
.nav a { font-size: 18px; margin-left: 18px; color: var(--text-dim); }
.nav a:first-child { margin-left: 0; }

/* Cards / panels */
.panel {
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 6px;
  padding: 20px;
  margin: 20px 0;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #fff; background: var(--primary);
  border: 3px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  box-shadow: 3px 3px 0 var(--border);
}
.btn:hover { text-decoration: none; transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--border); }
.btn.disabled { background: var(--panel-2); color: var(--text-dim); box-shadow: none; cursor: default; }

/* Landing hero (mobile-first: stacked + centered; two columns >=760px).
   Uses its own wider wrapper than the 760px content container so the
   text + layered phones sit side by side. */
/* Landing is one screen: header + hero + footer fit 100svh with no page
   scroll (body is a flex column from the shared rules). The hero grows to
   fill the space between the nav and the footer. */
body.landing {
  height: 100svh;
  min-height: 0;
}
.hero {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  /* The animal scene is the hero backdrop; the scrim keeps it from competing
     with the card + mockups. background-color is the pre-load fallback so
     there's no bright flash before the WebP arrives. */
  background-color: var(--bg);
  background-image: var(--hero-scrim), url("images/hero-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.landing .site-footer { margin-top: 0; padding: 14px 0; }

/* Escape hatch: viewports too short to ever fit one screen (e.g. phone
   landscape) scroll naturally instead of clipping the hero or footer. */
@media (max-height: 520px) {
  body.landing { height: auto; min-height: 100svh; }
  .hero { flex: 1 0 auto; }
}
.hero-inner {
  width: 100%;
  /* Part of the hero "layout budget" with the .phone height cap and the
     1240px fan breakpoint below , widen all three together if the fan or the
     copy column changes, or the mockups will wrap below the text. */
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}
/* The copy sits on a frosted dark card so it stays readable over the busy
   scene (the mockups are opaque and sit straight on the backdrop). Its
   content height (~509px) is mirrored by the .phone height cap so the mockup
   cluster matches this column , keep them in sync if the copy changes. */
.hero-text {
  flex: 1 1 340px;
  max-width: 540px;
  text-align: center;
  padding: 28px 30px;
  background: rgba(17, 24, 39, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 3px solid var(--border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--border);
}
.hero .brand-big {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 7vw, 52px);
  color: var(--primary);
  text-shadow: 3px 3px 0 var(--border);
  margin: 0 0 20px;
}
/* Both the hero title and the navbar brand spell dobudex with each letter
   tinted to match the in-app launch-screen wordmark. One rule set drives
   both. */
.brand-big span:nth-child(1), .brand span:nth-child(1) { color: #efd83d; } /* d , yellow */
.brand-big span:nth-child(2), .brand span:nth-child(2) { color: #7fbb4a; } /* o , green */
.brand-big span:nth-child(3), .brand span:nth-child(3) { color: #37719c; } /* b , blue */
.brand-big span:nth-child(4), .brand span:nth-child(4) { color: #47c5cd; } /* u , cyan */
.brand-big span:nth-child(5), .brand span:nth-child(5) { color: #e8b73b; } /* d , gold */
.brand-big span:nth-child(6), .brand span:nth-child(6) { color: #dd8235; } /* e , orange */
.brand-big span:nth-child(7), .brand span:nth-child(7) { color: #3382c3; } /* x , blue */
.tagline { font-size: 32px; color: var(--text); margin: 0 auto 22px; max-width: 30ch; }
.subtag { font-size: 22px; color: var(--text-dim); max-width: 46ch; margin: 0 auto 28px; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.android-note { font-size: 20px; color: var(--text-dim); margin-top: 22px; }

@media (min-width: 600px) {
  .hero-text { text-align: left; }
  .tagline, .subtag { margin-left: 0; margin-right: 0; }
  .cta-row { justify-content: flex-start; }
}

/* CSS iPhone mockup(s) , three-phone fan (center featured, sides tilted) */
.hero-phones {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* Carousel dots (mobile only , the desktop fan shows all three at once). The
   visible square is a ::before so the button itself stays a 24px tap target. */
.hero-dots {
  display: none;
  flex: 0 0 auto;
  justify-content: center;
  gap: 6px;
}
.hero-dot {
  width: 24px;
  height: 24px;
  padding: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-dot::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--border);
  background: var(--panel-2);
}
.hero-dot.is-active::before { background: var(--primary); }
.pose { flex: 0 0 auto; }
.pose--left {
  z-index: 1;
  transform: scale(0.8) rotate(-9deg);
  margin-right: -56px; /* the center phone overlaps it */
}
.pose--center { z-index: 3; } /* featured: full size, in front */
.pose--right {
  z-index: 1;
  transform: scale(0.8) rotate(9deg);
  margin-left: -56px; /* the center phone overlaps it */
}
.phone {
  position: relative;
  /* Cap (509px) matches the .hero-text card's content height so the mockup
     cluster is as tall as the copy column. The match holds once 64svh reaches
     the cap, i.e. viewport height >= ~796px (509 / 0.64); on shorter-but-wide
     viewports the phone scales down with svh (a bit shorter than the card),
     which is the right trade to keep the hero on one screen. The cap can't be
     tied to the card in pure CSS , the phone's aspect-ratio + height:100% would
     feed back and explode the fan width , so it's a documented constant: if the
     hero copy (see .hero-text) changes height, update this 509px. The fan's
     LAYOUT width is ~1.14x this height (side phones are full-width in flow,
     only scaled visually), which sets the fan breakpoint below. */
  height: clamp(280px, 64svh, 509px);
  width: auto;
  aspect-ratio: 9 / 19.5;
  background: #0a0a0c;
  border-radius: 34px;
  padding: 10px;
  box-shadow:
    inset 0 0 0 2px #303036,            /* metal rim */
    0 18px 50px rgba(0, 0, 0, 0.55),    /* drop shadow */
    0 0 70px rgba(59, 130, 246, 0.28);  /* brand-blue glow */
}
.phone__screen {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px; /* concentric with the .phone frame (34) minus 10 padding */
  overflow: hidden;
  background: #000;
}
.phone__screen img,
.phone__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* matches the on-device scaleAspectFill crop */
  image-rendering: auto;    /* smooth (override the global pixelated) */
  display: block;
}

/* The 3-phone fan needs ~1220px of row to sit beside the text (the unbreakable
   "dobudex" title pins the card near its 540px max, and the card-height fan is
   ~593px wide), so below 1240px show just the featured phone , it fits with
   room to spare. Below 600px the hero stacks and the carousel takes over (the
   <=599px rules re-show all three as slides). */
@media (max-width: 1239px) {
  .pose--left, .pose--right { display: none; }
}
@media (max-width: 599px) {
  /* Lighter, mobile-sized backdrop (portrait crop of the same scene). */
  .hero { align-items: stretch; background-image: var(--hero-scrim), url("images/hero-bg-mobile.webp"); }
  .hero-inner { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  /* order:1 drops the copy card below the mockup carousel + dots (which stay
     at their default order:0 in DOM order). */
  .hero-text { flex: 0 0 auto; padding: 16px 18px; order: 1; }

  /* The navbar already shows the dobudex brand, so hide the duplicate hero
     title on mobile (it sat right under the nav) and give the copy + mockup
     more room. Visually hidden rather than display:none so the page keeps its
     <h1> in the DOM / a11y tree / mobile-first index , it just takes no
     layout space. */
  .hero .brand-big {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tagline { font-size: 26px; margin-bottom: 8px; }
  .subtag { display: none; } /* hidden on mobile to free space for the mockup */
  .android-note { font-size: 17px; margin-top: 12px; }

  /* The mockups become a one-per-view horizontal carousel (CSS scroll-snap):
     a single phone is shown and the user swipes to cycle through all three. */
  .hero-phones {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: hide the scrollbar */
  }
  .hero-phones::-webkit-scrollbar { display: none; } /* WebKit: hide it too */

  /* Every mockup is a full-width, upright slide (the desktop fan transforms
     are reset). display:flex also re-shows the side phones hidden >=600px.
     height:100% gives the phone's height:100% a definite box to resolve. */
  .pose {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    transform: none;
    margin: 0;
  }
  .pose .phone {
    height: 100%;
    width: auto;
    max-width: calc(100vw - 48px); /* never overflow horizontally */
  }

  .hero-dots { display: flex; }

  /* Drop the footer on the phone-sized landing: the top nav already carries
     Privacy/Terms/Support, so this just frees the space for the hero/mockup.
     Scoped to body.landing so the legal pages keep their footer everywhere. */
  body.landing .site-footer { display: none; }
}

/* Long-form legal content. Only set vertical padding here , the horizontal
   padding comes from .container (0 20px). Using the `padding` shorthand would
   zero that out and run the text edge-to-edge on mobile. overflow-wrap is
   inherited by every descendant so long words / URLs / emails (and the
   non-breaking pixel-font headings) can't force horizontal overflow. */
.legal {
  padding-top: 28px;
  padding-bottom: 8px;
  overflow-wrap: break-word;
}
.legal .updated { color: var(--text-dim); font-size: 18px; margin-bottom: 8px; }
.legal .draft-note {
  border: 3px solid var(--gold);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0 24px;
  font-size: 18px;
  color: var(--text);
}
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }

/* Footer: everything on one centered row to keep it short. */
.site-footer {
  border-top: 3px solid var(--border);
  background: var(--panel);
  margin-top: 48px;
  padding: 14px 0;
}
.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap; /* wrap only if it truly can't fit */
  gap: 8px 18px;
}
.site-footer .nav a { margin: 0 10px; }
.site-footer small { color: var(--text-dim); font-size: 18px; }

@media (max-width: 520px) {
  body { font-size: 20px; }
  .brand { font-size: 15px; }
  .nav a { font-size: 16px; margin-left: 12px; }
}