/* idk. u pick. - the website's stylesheet.
   ------------------------------------------------------------
   Colours from the app's Palette.swift - warm card paper, dark brown ink,
   terracotta, mustard, olive, dusty blue, wine - but laid out as the
   thing the app is about: a game on a table. The page is the table (the
   app's terracotta, the icon's own colour), and everything that matters sits on it as a
   card: cream faces, coloured backs, tilted the way cards land. The
   display type is the system's rounded bold, as in the app (Nunito where
   that face does not exist), and the voice stays lowercase brand copy -
   "pick.", "talked.", "skip.". The privacy and support pages are cream,
   for reading, under the same dark bar. */

:root {
  --table: #E0592A;
  --table-2: #D24E22;
  --paper: #FBF3E6;
  --card: #FFFDF8;
  --ink: #2A1F17;
  --muted: #6B625A;
  --on-table: #FBF3E6;
  --on-table-soft: rgba(251, 243, 230, .88);
  --accent: #E0592A;
  --mustard: #E8A412;
  --olive: #5F9E3A;
  --blue: #4A7DB5;
  --wine: #A3224A;
  --display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0 auto; color: var(--on-table);
  background-color: var(--table);
  /* felt: a faint weave so the table reads as a surface, not a void */
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 6px 6px;
  font-family: var(--body); font-size: 1.0625rem; line-height: 1.55; font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1600px) {
  html { background: #B9441B; }
  body { max-width: 1440px; min-height: 100vh; }
}
a { color: inherit; }
img { max-width: 100%; display: block; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.02em; line-height: 1.02; margin: 0; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 24px; }

/* top bar */
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 1.3rem; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.hub { font-size: .9rem; font-weight: 700; text-decoration: none; color: var(--on-table-soft); white-space: nowrap; }
.hub:hover { color: var(--on-table); }

/* hero: the hand that was just dealt */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(64px, 9vw, 112px); overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 72px); align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(3rem, 7.6vw, 5.8rem); }
.hero h1 span { color: var(--ink); }
.lede { margin-top: 22px; font-size: clamp(1.08rem, 1.6vw, 1.25rem); max-width: 34ch; color: var(--on-table-soft); }
.btn {
  display: inline-block; margin-top: 32px; font-family: var(--display); font-weight: 900; font-size: 1.1rem;
  background: var(--card); color: var(--accent); text-decoration: none; border-radius: 16px; padding: 15px 26px;
  box-shadow: 0 5px 0 var(--ink);
}
.btn[aria-disabled="true"] { cursor: default; }
.fine { margin-top: 16px; font-size: .92rem; color: var(--on-table-soft); }

/* the fan of cards */
.fan { position: relative; height: clamp(360px, 44vw, 460px); }
.pc {
  position: absolute; width: clamp(170px, 20vw, 230px); aspect-ratio: 5 / 7; border-radius: 16px;
  box-shadow: 0 18px 30px -12px rgba(80, 25, 5, .38), 0 2px 0 rgba(0, 0, 0, .25);
}
.pc.back { background: var(--c, var(--accent)); border: 6px solid var(--card); }
.pc.back::after { content: ""; position: absolute; inset: 12px; border-radius: 9px; border: 2px dashed rgba(251, 243, 230, .55); }
.pc.back b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--paper); white-space: nowrap; }
.fan .p1 { --c: var(--olive); left: 2%; top: 14%; transform: rotate(-14deg); }
.fan .p2 { --c: var(--blue); left: 22%; top: 4%; transform: rotate(-4deg); }
.fan .p3 { --c: var(--wine); right: 2%; top: 18%; transform: rotate(13deg); }
.pc.face { right: 16%; top: 10%; z-index: 2; transform: rotate(4deg); background: var(--card); color: var(--ink); padding: 18px 16px; display: flex; flex-direction: column; }
.face .chip { align-self: flex-start; font-family: var(--display); font-weight: 900; font-size: .9rem; color: var(--paper); background: var(--mustard); border-radius: 999px; padding: 2px 11px; }
.face .text { margin: auto 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.12; }
.face .acts { display: flex; gap: 8px; }
.face .acts span { flex: 1; text-align: center; font-family: var(--display); font-weight: 900; font-size: .88rem; white-space: nowrap; border-radius: 12px; padding: 8px 4px; }
.face .acts .yes { background: var(--accent); color: var(--paper); }
.face .acts .no { background: var(--paper); border: 2px solid var(--ink); }
@media (max-width: 860px) {
  .fan { height: 330px; max-width: 420px; margin: 0 auto; width: 100%; }
  .pc { width: 150px; }
  .pc.back b { font-size: 1.3rem; }
  .face .text { font-size: 1.08rem; }
}

/* sections */
section { padding: clamp(56px, 8vw, 104px) 0; }
.head { max-width: 40ch; margin-bottom: clamp(30px, 4vw, 48px); }
.head h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.head p { margin-top: 14px; color: var(--on-table-soft); font-size: 1.1rem; }
.felt { background: var(--table-2); }

/* the four decks, as the backs of four decks */
.decks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
@media (max-width: 960px) { .decks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.deck {
  --c: var(--olive);
  position: relative; background: var(--c); color: var(--paper); border: 6px solid var(--card); border-radius: 18px;
  aspect-ratio: 5 / 7; padding: 18px 16px; display: flex; flex-direction: column;
  box-shadow: 0 18px 30px -14px rgba(80, 25, 5, .4);
  transition: transform .18s ease;
}
.deck:nth-child(1) { --c: var(--olive); transform: rotate(-2deg); }
.deck:nth-child(2) { --c: var(--mustard); transform: rotate(1.5deg); }
.deck:nth-child(3) { --c: var(--blue); transform: rotate(-1deg); }
.deck:nth-child(4) { --c: var(--wine); transform: rotate(2deg); }
.deck:hover { transform: translateY(-8px) rotate(0); }
@media (prefers-reduced-motion: reduce) { .deck { transition: none; } .deck:hover { transform: none; } }
.deck h3 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.deck p { margin-top: 10px; font-size: .98rem; line-height: 1.45; opacity: .92; }
.deck .tag { margin-top: auto; font-family: var(--display); font-weight: 900; font-size: .85rem; background: rgba(42, 31, 23, .22); border-radius: 999px; padding: 4px 11px; align-self: flex-start; }
@media (max-width: 520px) { .deck { aspect-ratio: auto; min-height: 15rem; } }

/* how it works, called out like a dealer */
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lines li { font-family: var(--display); font-weight: 900; font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.1; }
.lines li:nth-child(1) { color: var(--on-table); }
.lines li:nth-child(2) { color: var(--ink); }
.lines li:nth-child(3) { color: var(--card); opacity: .8; }

/* three things worth knowing, on cream cards */
.split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.point { background: var(--card); color: var(--ink); border-radius: 18px; padding: 24px; box-shadow: 0 16px 28px -14px rgba(80, 25, 5, .38); }
.point:nth-child(1) { transform: rotate(-1.2deg); }
.point:nth-child(2) { transform: rotate(.8deg); }
.point:nth-child(3) { transform: rotate(-.5deg); }
.point h3 { font-size: 1.4rem; margin-bottom: 8px; }
.point p { color: var(--muted); font-size: 1rem; }
.point .secret { display: inline-block; margin-bottom: 14px; font-family: var(--display); font-weight: 900; border: 2px dashed var(--ink); border-radius: 12px; padding: 5px 12px; }

.close { text-align: center; }
.close h2 { font-size: clamp(2.8rem, 7vw, 5rem); }
.close h2 span { color: var(--ink); }
.close p { margin: 16px auto 0; color: var(--on-table-soft); font-size: 1.1rem; }

footer { border-top: 1px solid rgba(251, 243, 230, .3); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 24px; padding-bottom: 32px; font-size: .95rem; color: var(--on-table-soft); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { text-underline-offset: 4px; }
footer a:hover { color: var(--on-table); }

/* privacy, support: a cream sheet on the table */
.doc { padding: clamp(24px, 4vw, 48px) 0 72px; }
.doc .wrap { max-width: 48rem; }
.doc .sheet { background: var(--paper); color: var(--ink); border-radius: 20px; padding: clamp(26px, 5vw, 52px); box-shadow: 0 20px 40px -18px rgba(80, 25, 5, .42); }
.doc .crumb { font-family: var(--display); font-weight: 900; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.doc h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 8px 0 18px; }
.doc .answer { font-size: 1.15rem; line-height: 1.55; }
.doc .date { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.doc h2 { font-size: 1.4rem; margin: 40px 0 12px; }
.doc h3 { font-size: 1.1rem; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--muted); font-size: 1rem; line-height: 1.65; }
.doc p + p { margin-top: 10px; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.doc a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc strong { color: var(--ink); }