/* Web fallbacks so non-Mac visitors get the same hand-drawn look:
   Comic Neue ~ Chalkboard/Comic Sans (rounded display);
   Kalam ~ Bradley Hand (angular reading text). */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Kalam:wght@400;700&display=swap');

:root {
  --coffee: #2b2013;
  --cream: #f3ead6;
  --gold: #c9a84c;
  --muted: #b9ac90;
  /* rounded hand-drawn display face (Chalkboard first for the Mac look) */
  --hand: "Chalkboard SE", "Comic Neue", "Comic Sans MS", cursive;
  /* angular hand-drawn face for reading / smallest text */
  --ink: "Bradley Hand", "Bradley Hand ITC", "Kalam", cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--coffee);
  color: var(--cream);
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main {
  width: 100%;
  max-width: 640px;
  padding: 64px 24px 40px;
  flex: 1;
}

/* Gold iPhone frame around a landscape game screenshot. */
.phone {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 36px;
  padding: 13px;
  border-radius: 46px;
  background:
    linear-gradient(135deg, #f0d998 0%, #b9922e 22%, #f6e6b4 46%, #9c7c22 72%, #ddc078 100%);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 0 0 2px rgba(90, 68, 12, 0.55);
}
.phone .screen {
  position: relative;
  border-radius: 33px;
  overflow: hidden;
  background: #000;
  line-height: 0;
  box-shadow: inset 0 0 0 3px #000;
}
.phone .screen img {
  display: block;
  width: min(440px, 78vw);
  height: auto;
}
/* dynamic-island pill on the left short edge (landscape orientation) */
.phone .island {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 9px;
  height: 74px;
  border-radius: 6px;
  background: #000;
}

/* Hand-drawn title slot — swap the <h1> for an <img class="title-art"> when
   the art is ready. */
.title-art {
  text-align: center;
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(40px, 11vw, 76px);
  line-height: 1.05;
  margin: 0 0 8px;
  color: #fff;
}
img.title-art { display: block; width: 100%; height: auto; }

.tagline {
  text-align: center;
  font-family: var(--hand);
  color: var(--gold);
  font-size: 24px;
  margin: 0 0 40px;
}

/* App Store download button */
.cta { text-align: center; margin: 4px 0 44px; }
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 34px;
  border-radius: 999px;
  text-decoration: none;
  color: #2e2408;
  font-family: var(--hand);
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  background:
    linear-gradient(180deg, #e2c983 0%, #bd9c46 38%, #cbaa58 70%, #9a7b2c 100%);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.5),
    inset 0 3px 4px rgba(255, 255, 240, 0.55),
    inset 0 -4px 8px rgba(60, 42, 0, 0.5);
  transition: transform 0.08s ease, filter 0.12s ease;
}
.appstore:hover { filter: brightness(1.05); }
.appstore:active { transform: translateY(2px); }
.appstore svg { width: 30px; height: 30px; fill: #2e2408; flex-shrink: 0; }

h2 {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 32px;
  color: var(--gold);
  border-bottom: 1px solid rgba(201, 168, 76, 0.35);
  padding-bottom: 8px;
  margin-top: 40px;
}

a { color: var(--gold); }

.q {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 21px;
  color: var(--cream);
  margin-top: 22px;
}

/* smallest text: plain sans */
footer {
  width: 100%;
  text-align: center;
  padding: 28px 24px 40px;
  color: var(--muted);
  font-size: 15px;
}
footer a { margin: 0 10px; }