/* Half Court Duo: the whole site's styles.

   Every page links this one file, so the palette is written down once. The colours are the game's
   own, from ArtPalette in the game repository (Sources/HalfCourtArt/HalfCourtArt.swift): navy base
   0B1020, navy panel 151C36, navy edge 24305A, hoops orange FF7A1A and its deep and hot sides, neon
   cyan 2EE6FF, chalk F4F1E8, brass B08D57, the warm bulb FFC860 and the LED red FF2E3A.

   Two kinds of surface, on purpose:
   - THE MACHINE. The hero, the LED tiles and the screenshot well are the cabinet itself, and the
     cabinet is a dark object whatever the reader's setting, exactly as the game is (it ships with
     UIUserInterfaceStyle Dark). Their colours are fixed, never themed.
   - THE PAGE. Prose follows the reader's light or dark preference, because a privacy policy read
     at noon in light mode should not be grey on navy. Light is defined in full on bare :root, so a
     browser that reports no preference still gets every colour; dark redefines the same tokens.

   Type is the system's, rounded for display (the game sets its screens in .rounded), through local
   font stacks only. No web font is loaded, no script runs anywhere on this site, and nothing here
   is fetched from anybody else, so there is nothing for a third party to see. */

:root {
  --page:       #F6F3EA;
  --page-2:     #ECE5D3;
  --card:       rgba(255,255,255,.78);
  --line:       rgba(36,48,90,.16);
  --ink:        #151C36;
  --ink-soft:   #4A5372;
  --head:       #151C36;
  --accent:     #B8470C;   /* orange deep: hoops orange at a weight that reads on chalk (4.8:1) */
  --link:       #A23F0A;
  --link-hover: #151C36;
  --cyan:       #0A7F92;
  --brass:      #8A6A38;
  --shadow:     0 10px 28px rgba(21,28,54,.10);

  /* The machine. Never redefined below. */
  --cab:        #0B1020;
  --cab-panel:  #151C36;
  --cab-edge:   #24305A;
  --cab-ink:    #F4F1E8;
  --cab-soft:   #C3C6D6;
  --orange:     #FF7A1A;
  --orange-hot: #FFB36B;
  --neon:       #2EE6FF;
  --bulb:       #FFC860;
  --bulb-core:  #FFF4D6;
  --led:        #FF2E3A;
  --led-ghost:  #3A0E14;
  --brass-lit:  #B08D57;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page:       #0B1020;
    --page-2:     #10162B;
    --card:       rgba(36,48,90,.34);
    --line:       rgba(176,141,87,.24);
    --ink:        #F4F1E8;
    --ink-soft:   #B9BDD0;
    --head:       #F4F1E8;
    --accent:     #FF7A1A;
    --link:       #FFB36B;
    --link-hover: #2EE6FF;
    --cyan:       #2EE6FF;
    --brass:      #B08D57;
    --shadow:     0 10px 30px rgba(0,0,0,.40);
  }
}

/* ---- Furniture ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
        system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(90% 50% at 85% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--page), var(--page-2));
  background-attachment: fixed;
  /* A long address in running text must never push a phone into sideways scrolling. */
  overflow-wrap: break-word;
}

h1, h2, h3, .brand, .pill, .tile b, .mode h3 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
  letter-spacing: -.012em;
}

a { color: var(--link); text-decoration-thickness: .07em; text-underline-offset: .18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

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

/* One gutter rule for the whole site: side padding lives here and nowhere else. */
.wrap { width: 100%; max-width: 980px; margin: 0 auto; padding-inline: 24px; }
.wrap.narrow { max-width: 740px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; padding: 8px 14px; background: var(--cab);
              color: var(--cab-ink); border-radius: 8px; }

/* ---- The bar ------------------------------------------------------------------------- */

.bar {
  padding-block: 14px;
  background: var(--cab);
  border-bottom: 1px solid rgba(176,141,87,.45);
}
.bar .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
             justify-content: space-between; }
/* The wordmark is the cabinet's sign: HALF COURT in orange neon, DUO in cyan. */
.brand {
  font-size: 19px; font-weight: 800; letter-spacing: .04em; text-decoration: none;
  color: var(--orange); text-shadow: 0 0 10px rgba(255,122,26,.45);
}
/* The site's logo beside it: option 4 of the game's icon designs, "Neon Swish", drawn by the game's
   hcd-art (scripts/make-images.sh). It is the site's mark, not the app's icon, which is option 3.
   Centred on the CAPITALS: `middle` centres on half the x height, which left it 1.6 px below a wordmark
   that has no lower case. The image's bottom sits at the baseline plus this offset, so its centre is
   .36em (half the cap height) above the baseline when the offset is .36em less half its own 30 px. */
.brand .mark {
  display: inline-block; width: 30px; height: 30px; margin-right: 10px;
  vertical-align: calc(.36em - 15px);
  border-radius: 7px; box-shadow: 0 0 0 1px rgba(176,141,87,.5);
}
.brand span { color: var(--neon); text-shadow: 0 0 10px rgba(46,230,255,.45); }
.brand:hover { color: var(--orange); }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.bar nav a { color: var(--cab-soft); font-size: 15px; text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--cab-ink); text-decoration: underline; }

/* ---- The machine: the hero ------------------------------------------------------------ */

/* A row of cabinet bulbs, lit and unlit in turn, drawn with gradients rather than an image.
   Static: the game's chase stops under Reduce Motion, and a page has no business animating. */
.bulbs {
  height: 16px;
  background:
    radial-gradient(circle at 13px 8px, var(--bulb-core) 0 1.6px, var(--bulb) 2.6px,
                    rgba(255,200,96,.32) 4.6px, transparent 7px) 0 0 / 52px 16px repeat-x,
    radial-gradient(circle at 39px 8px, #5A4626 0 2.4px, #3B2E1A 3.6px, transparent 4.6px)
                    0 0 / 52px 16px repeat-x,
    var(--cab);
}

/* The brass rail: what the game draws where a phone has no real fold. */
.rail {
  height: 12px;
  background: linear-gradient(180deg, #E2C58E, var(--brass-lit) 40%, #6E5530 100%);
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
}

.hero {
  color: var(--cab-ink);
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(255,122,26,.18), transparent 70%),
    radial-gradient(50% 60% at 10% 10%, rgba(46,230,255,.08), transparent 70%),
    linear-gradient(180deg, var(--cab-panel), var(--cab) 70%);
}
.hero .wrap {
  display: grid; gap: 28px 48px; align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  padding-block: clamp(36px, 7vw, 72px);
}
.hero .logo {
  display: block; width: 88px; height: 88px; border-radius: 20px;
  box-shadow: 0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(176,141,87,.5);
}
.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(42px, 8.6vw, 76px); font-weight: 900; line-height: 1; letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0 0 3px #FFD2A8, 0 0 14px rgba(255,122,26,.85), 0 0 38px rgba(255,90,0,.55);
}
.hero h1 span {
  color: var(--neon);
  text-shadow: 0 0 3px #C8F8FF, 0 0 14px rgba(46,230,255,.85), 0 0 38px rgba(46,230,255,.5);
}
.hero .tag { margin: 16px 0 0; font-size: clamp(21px, 4.2vw, 28px); font-weight: 700; color: var(--bulb); }
.hero .lede { margin: 14px 0 0; max-width: 46ch; font-size: clamp(17px, 2.6vw, 19px); color: var(--cab-soft); }
.hero .lede strong { color: var(--cab-ink); }

.pill {
  display: inline-block; margin: 24px 0 0; padding: 9px 18px;
  border: 1px solid rgba(46,230,255,.55); border-radius: 999px;
  background: rgba(46,230,255,.08);
  font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--neon);
}
.hero .status { margin: 14px 0 0; font-size: 16px; color: var(--cab-ink); }
.hero .status b { color: var(--orange-hot); }
.hero .note { margin: 6px 0 0; font-size: 14.5px; color: var(--cab-soft); }

.hero figure { margin: 0; }
.hero figure img {
  display: block; width: 100%; max-width: 420px; margin-inline: auto;
  aspect-ratio: 640 / 769; border-radius: 22px; border: 1px solid rgba(176,141,87,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* ---- Sections -------------------------------------------------------------------------- */

section { padding-block: clamp(40px, 7vw, 64px); }
section + section { border-top: 1px solid var(--line); }
h2 { margin: 0 0 6px; font-size: clamp(26px, 5vw, 34px); font-weight: 800; color: var(--head); }
h2 em { font-style: normal; color: var(--accent); }
.sub { margin: 0 0 24px; max-width: 60ch; color: var(--ink-soft); font-size: 18px; }
section p { max-width: 66ch; }

/* The scoring rules as the machine shows them: a lit LED panel beside each sentence. The panel is
   hardware, so it is dark in both themes. */
.tiles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
         margin: 26px 0 0; padding: 0; list-style: none; }
.tile {
  display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
  padding: 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); box-shadow: var(--shadow);
}
.tile b {
  display: grid; place-items: center; height: 64px; border-radius: 10px;
  background: #12060A; border: 2px solid #2A3150;
  font: 800 30px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em;
  color: var(--led); text-shadow: 0 0 6px rgba(255,46,58,.8), 0 0 16px rgba(255,46,58,.45);
}
.tile b.amber { color: #FFB000; text-shadow: 0 0 6px rgba(255,176,0,.8), 0 0 16px rgba(255,176,0,.4); }
.tile b.small { font-size: 22px; }
.tile p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.tile p strong { color: var(--ink); }

/* The four modes. */
.modes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.mode {
  padding: 20px 20px 22px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}
.mode h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; color: var(--head); text-transform: uppercase;
           letter-spacing: .03em; }
.mode p { margin: 0; font-size: 16px; color: var(--ink-soft); }
.mode p + p { margin-top: 8px; }

/* The poses. */
.poses { margin: 0; padding: 0; list-style: none; }
.poses li { padding: 13px 0; border-top: 1px solid var(--line); font-size: 16.5px; color: var(--ink-soft); }
.poses li:first-child { border-top: 0; padding-top: 0; }
.poses b { color: var(--head); }
.split { display: grid; gap: 28px 40px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.pair { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; align-items: end; margin: 0; }
.pair figure { margin: 0; }
.pair img { display: block; width: 100%; border-radius: 16px; }
.pair figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-soft); text-align: center; }

/* The badges: Game Center masks every achievement to a circle, so the page does too. Fifteen of
   them, so five across or three across: both divide fifteen, and no row is left with one badge. */
.badges { display: grid; gap: 22px 12px; grid-template-columns: repeat(5, minmax(0, 1fr));
          margin: 24px 0 0; padding: 0; list-style: none; }
.badges li { text-align: center; }
.badges img { display: block; width: 84px; height: 84px; margin: 0 auto 8px; border-radius: 50%;
              box-shadow: var(--shadow); }
.badges b { display: block; font-size: 14.5px; color: var(--head); line-height: 1.3; }
.badges span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; }

/* The ads, plainly: a callout, because it is the paragraph a player most needs to read. */
.callout {
  margin: 22px 0; padding: 18px 22px; max-width: 72ch;
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 16px;
  background: var(--card); box-shadow: var(--shadow);
}
.callout p { margin: 0; color: var(--ink); }
.callout p + p { margin-top: 10px; }

/* The screenshot strip: the real machine, seated in the drawn folded phone, on a well that is the
   cabinet's navy in both themes so the phone's dark edge never disappears into a dark page or
   floats on a light one. Six pictures (the seventh is the hero's), so three across or two across:
   both divide six, and no row is left with an orphan. */
.well { margin-top: 24px; padding: clamp(14px, 3vw, 24px); border-radius: 26px;
        background: linear-gradient(180deg, var(--cab-panel), var(--cab)); }
.shots { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr));
         margin: 0; padding: 0; list-style: none; }
.shots img { display: block; width: 100%; aspect-ratio: 640 / 769; border-radius: 14px; }

.cta { margin-top: 18px; }

/* ---- Long-form pages (privacy, terms, support, 404) ----------------------------------- */

main.doc { padding-block: 40px 12px; }
main.doc h1 { margin: 0 0 6px; font-size: clamp(30px, 6.4vw, 42px); font-weight: 900;
              letter-spacing: -.02em; color: var(--head); }
main.doc .updated { margin: 0 0 26px; font-size: 15px; color: var(--ink-soft); }
main.doc h2 { margin: 40px 0 10px; font-size: 23px; padding-top: 4px; }
main.doc h3 { margin: 26px 0 6px; font-size: 18px; color: var(--accent); }
main.doc p, main.doc li { color: var(--ink-soft); }
main.doc strong { color: var(--ink); }
main.doc ul, main.doc ol { padding-left: 22px; }
main.doc li { margin-bottom: 9px; }
main.doc .callout { max-width: none; }
main.doc dl { margin: 0; }
main.doc dt { margin-top: 22px; font-weight: 700; color: var(--ink); }
main.doc dd { margin: 6px 0 0; color: var(--ink-soft); }
main.doc dd p { margin: 0; }
main.doc dd p + p { margin-top: 8px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; padding: 0; list-style: none;
       font-size: 15px; }
.toc li { margin: 0 !important; }

/* ---- Footer ------------------------------------------------------------------------------ */

footer {
  margin-top: 40px; padding-block: 28px 56px;
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-soft); text-align: center;
}
footer nav a { margin: 0 10px; display: inline-block; }
footer p { margin: 12px auto 0; max-width: 60ch; }

/* ---- Narrow screens ----------------------------------------------------------------------- */

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero figure img { max-width: 340px; }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 16px; }
  .hero .logo { width: 72px; height: 72px; border-radius: 16px; }
  .tile { grid-template-columns: 80px 1fr; gap: 12px; padding: 12px; }
  .tile b { height: 54px; font-size: 24px; }
  .tile b.small { font-size: 15px; }
  .sub { font-size: 16.5px; }
}

/* Reduce Motion: nothing on this site animates, and this keeps it that way if something is added. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}