/* ==========================================================================
   Pop Room — website styles
   The colours of the store slides (the app repo's tool/shots/make_slides.py):
   a party wall of one bold colour per part, the sunburst, the bunting,
   white headlines with one gold word, the game's coral and its ink.
   The font is the game's own, Manrope (SIL Open Font License), served
   from this folder. No CDN, no trackers.

   A project folder on this site is self-contained (CLAUDE.md §2): nothing
   here is shared with another folder. The header, footer and privacy
   classes keep the names the other app folders use.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Contrast ratios are white text on each colour unless said. */
  --page:      #fff7f2;
  --card:      #ffffff;
  --ink:       #2a2238;   /* the game's ink: 15.1 on the page */
  --ink-soft:  #5e5370;   /* 7.0 on the page */
  --coral:     #f0564f;   /* the game's accent: fills and marks */
  --coral-deep:#c63e39;   /* links on the page: 5.0 */
  --gold:      #ffe27a;   /* the one gold word on a coloured band */

  --hero:      #dc4463;   /* 4.9 */
  --violet:    #6b55d9;   /* 5.6 */
  --teal:      #13867b;   /* 4.7 */
  --blue:      #2b7fc4;   /* 4.6 */
  --magenta:   #c4407c;   /* 5.0 */
  --sun:       #f7963e;   /* ink text on it: 6.9 */

  --line:      rgba(42, 34, 56, .14);
  --shadow:    0 24px 50px rgba(42, 34, 56, .22), 0 6px 14px rgba(42, 34, 56, .12);
  --r:         22px;
  --pad:       clamp(18px, 5vw, 40px);
  --maxw:      1160px;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

::selection { background: var(--coral); color: #fff; }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 16px; top: 16px; z-index: 100;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 12px; font-weight: 700;
}

h1, h2, h3 {
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0 0 .45em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.lead { font-size: 1.15rem; font-weight: 500; }
.fine { font-size: .88rem; color: var(--ink-soft); }
em.gold { font-style: normal; color: var(--gold); }

/* --------------------------------------------------------------- header --- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 242, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 18px;
  min-height: 64px;
}
.crumb { color: var(--ink-soft); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.crumb:hover { color: var(--ink); text-decoration: none; }
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 800; font-size: 1.08rem;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: flex; gap: 20px; margin-left: auto; }
.nav a {
  color: var(--ink-soft); font-weight: 700; font-size: .94rem;
  border-bottom: 2px solid transparent; padding: 4px 0;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--coral); text-decoration: none; }
.head-actions { display: flex; gap: 10px; }

@media (max-width: 900px) {
  .nav { display: none; }
  .head-actions { margin-left: auto; }
}
@media (max-width: 520px) {
  .crumb { font-size: 0; }
  .crumb::before { content: "\2190"; font-size: 1.1rem; }
  .site-head .wrap { gap: 12px; }
}

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 800; font-size: 1rem;
  padding: 14px 24px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 6px 0 rgba(42, 34, 56, .18); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(42, 34, 56, .05); }
.btn-ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .6); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .22); }
.btn-sm { padding: 8px 16px; font-size: .9rem; }

/* ---------------------------------------------------- the party pieces --- */

/* A band of one colour with the sunburst behind it. */
.band { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.band::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 50%; width: 2600px; height: 2600px;
  margin: -1300px 0 0 -1300px;
  background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, #000 22%, transparent 60%);
          mask: radial-gradient(circle, #000 0, #000 22%, transparent 60%);
}
.band h2, .band h3 { text-shadow: 0 5px 0 rgba(42, 34, 56, .18); }
.band .lead { color: rgba(255, 255, 255, .95); }

.bunting { position: absolute; left: 0; right: 0; top: 0; height: 96px; z-index: 1; pointer-events: none; }
.bunting svg { width: 100%; height: 100%; }

/* A foil balloon on a string, floating. */
.float {
  position: absolute; z-index: 2;
  animation: bob 6s ease-in-out infinite;
  filter: drop-shadow(0 18px 18px rgba(42, 34, 56, .28));
}
.float img { width: 100%; }
.float::after {
  content: ""; position: absolute; left: 50%; top: 88%;
  width: 2px; height: 120%; background: rgba(255, 255, 255, .55);
  transform: translateX(-50%) rotate(4deg); transform-origin: top;
  z-index: -1;
}
.float.ink-string::after { background: rgba(42, 34, 56, .25); }
.float button {
  all: unset; display: block; cursor: pointer; border-radius: 50%;
}
.float button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.float.popped { animation: popped .32s ease-out forwards; }
.float.popped::after { display: none; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--tilt, 0deg) * -1)); }
}
@keyframes popped {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.35); opacity: .7; }
  100% { transform: scale(1.6); opacity: 0; }
}

.shard {
  position: absolute; width: 10px; height: 16px; border-radius: 3px;
  z-index: 3; pointer-events: none;
  animation: shard .7s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes shard {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* A comic burst with a word on it. */
.burst {
  position: absolute; z-index: 4;
  width: 150px; height: 150px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 1.6rem; color: var(--ink);
  transform: rotate(var(--tilt, 10deg));
  filter: drop-shadow(0 10px 12px rgba(42, 34, 56, .3));
}
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.burst span { position: relative; letter-spacing: -.02em; }

/* A card of the real game, white-rimmed. */
.shot-card {
  background: #fff; border: 10px solid #fff; border-radius: 34px;
  overflow: hidden; box-shadow: var(--shadow);
}
.shot-card img, .shot-card video { width: 100%; border-radius: 24px; }

/* ----------------------------------------------------------------- hero --- */

.hero { background: var(--hero); padding: 120px 0 90px; }
.hero .wrap {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center;
}
.store-name { color: rgba(255, 255, 255, .92); font-weight: 700; font-size: .95rem; margin-bottom: 14px; }
.hero h1 { color: #fff; text-shadow: 0 6px 0 rgba(42, 34, 56, .2); }
.mark {
  display: inline-block; background: #fff; border-radius: 28px;
  padding: 18px 26px 6px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.mark img { width: min(420px, 70vw); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.soon { align-self: center; color: #fff; font-weight: 800; font-size: 1rem; }
.promises { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.promises li { font-weight: 800; font-size: .95rem; color: #fff; }
.promises li + li::before { content: "\00b7"; margin-right: 18px; opacity: .8; }

.phone {
  position: relative; justify-self: center;
  width: min(330px, 78vw); aspect-ratio: 9 / 16;
  background: var(--ink); border-radius: 46px; padding: 11px;
  box-shadow: 0 40px 80px rgba(42, 34, 56, .38);
  transform: rotate(3deg);
}
.phone video, .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; }
.phone .burst { left: -64px; top: 40px; --tilt: -12deg; }
.phone-caption { text-align: center; margin-top: 22px; color: rgba(255, 255, 255, .9); font-weight: 600; font-size: .9rem; }

@media (max-width: 880px) {
  .hero .float:nth-of-type(n+3) { display: none; }
  .hero .float { width: 64px !important; }
  .hero { padding: 104px 0 70px; text-align: center; }
  .hero .wrap { grid-template-columns: 1fr; gap: 56px; }
  .hero-cta, .promises { justify-content: center; }
  .phone .burst { left: -30px; width: 120px; height: 120px; font-size: 1.3rem; }
}

/* ------------------------------------------------------------- sections --- */

section { padding: clamp(70px, 10vw, 120px) 0; }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
/* how it plays */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  position: relative; background: var(--card); border-radius: var(--r);
  padding: 92px 26px 28px; box-shadow: 0 14px 30px rgba(42, 34, 56, .08);
  text-align: center;
}
.step img {
  position: absolute; left: 50%; top: -42px; width: 120px;
  transform: translateX(-50%) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 14px 14px rgba(42, 34, 56, .25));
}
.step .n {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--coral); color: #fff;
  font-weight: 800; margin-bottom: 12px;
}
.step p { color: var(--ink-soft); margin: 0; }
@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; gap: 64px; max-width: 440px; margin: 64px auto 0; }
}

/* split: words and a picture */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split .shot-card { transform: rotate(var(--tilt, -2deg)); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; list-style: none; }
.chips li {
  background: rgba(255, 255, 255, .95); color: var(--ink);
  font-weight: 800; font-size: .95rem;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 6px 0 rgba(42, 34, 56, .14);
}
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .split.flip > :first-child { order: 0; }
  .chips { justify-content: center; }
  .split .shot-card { max-width: 460px; margin: 0 auto; }
}

/* the orange band carries ink text: white on it reads only 2.1 */
.band h2.on-sun { color: var(--ink); text-shadow: none; }
.hl { background: linear-gradient(transparent 58%, #fff 58%, #fff 92%, transparent 92%); padding: 0 .08em; }

/* the four modes */
.modes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.modes > .mode { grid-column: span 2; }
/* five cards: three, then two in the middle */
.modes > .mode:nth-child(4) { grid-column: 2 / span 2; }
.mode {
  position: relative; color: #fff; border-radius: 28px; overflow: hidden;
  padding: 22px 20px 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow); isolation: isolate;
}
.mode::before {
  content: ""; position: absolute; inset: -50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg at 50% 70%, rgba(255, 255, 255, .12) 0 8deg, transparent 8deg 20deg);
}
.mode h3 { font-size: 1.55rem; margin-bottom: 6px; text-shadow: 0 4px 0 rgba(42, 34, 56, .18); }
.mode p { font-size: .98rem; margin-bottom: 14px; color: rgba(255, 255, 255, .95); }
.mode .tag {
  align-self: flex-start; font-size: .78rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; background: rgba(42, 34, 56, .25);
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.mode .media {
  margin-top: auto; border-radius: 22px 22px 0 0; overflow: hidden;
  border: 8px solid #fff; border-bottom: 0; aspect-ratio: 9 / 11;
  background: #fff;
}
.mode .media img, .mode .media video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.m-levels { background: var(--hero); }
.m-rush { background: var(--teal); }
.m-shot { background: var(--blue); }
.m-endless { background: var(--violet); }
.m-onepop { background: var(--magenta); }
@media (max-width: 1020px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
  .modes > .mode, .modes > .mode:nth-child(4) { grid-column: auto; }
  .modes > .mode:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
@media (max-width: 560px) {
  .modes { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .modes > .mode:last-child { width: auto; justify-self: stretch; }
  .mode .media { aspect-ratio: 4 / 3; }
}

/* before and after */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 820px; margin: 0 auto; }
.ba figure { margin: 0; position: relative; }
.ba figure:first-child .shot-card { transform: rotate(-3deg); }
.ba figure:last-child .shot-card { transform: rotate(3deg) translateY(24px); }
.ba figcaption {
  position: absolute; top: -16px; z-index: 2;
  font-weight: 800; color: #fff; padding: 8px 18px; border-radius: 999px;
  box-shadow: 0 6px 0 rgba(42, 34, 56, .18);
}
.ba figure:first-child figcaption { left: 18px; background: var(--ink); }
.ba figure:last-child figcaption { right: 18px; top: 6px; background: #217a52; }
.stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 56px;
  margin: 72px 0 0; padding: 0; list-style: none; text-align: center;
}
.stats b { display: block; font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1; color: var(--coral); letter-spacing: -.03em; }
.stats span { font-weight: 800; color: var(--ink-soft); }
@media (max-width: 560px) { .ba { gap: 14px; } .ba .shot-card { border-width: 6px; border-radius: 22px; } }

/* big moments */
.moments { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.moments li {
  background: rgba(255, 255, 255, .14); border-radius: 18px;
  padding: 14px 18px; font-weight: 600;
}
.moments b { display: block; font-size: 1.08rem; }

/* screens strip */
.strip {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px var(--pad) 26px; margin: 0 calc(var(--pad) * -1);
  scrollbar-width: thin;
}
.strip img {
  flex: 0 0 auto; width: 240px; border-radius: 22px; scroll-snap-align: center;
  box-shadow: 0 16px 30px rgba(42, 34, 56, .18);
}
@media (min-width: 1100px) { .strip { justify-content: center; } .strip img { width: 128px; border-radius: 14px; } }

/* promises */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tile {
  background: #fff; color: var(--ink); border-radius: 24px; padding: 26px 18px;
  text-align: center; box-shadow: 0 8px 0 rgba(42, 34, 56, .14);
}
.tile svg { width: 54px; height: 54px; color: var(--coral); margin: 0 auto 10px; display: block; }
.tile b { display: block; font-size: 1.15rem; }
.tile span { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

/* faq */
.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
  background: var(--card); border-radius: 18px; padding: 4px 22px;
  box-shadow: 0 8px 20px rgba(42, 34, 56, .06);
}
.faq summary {
  cursor: pointer; font-weight: 800; font-size: 1.08rem; padding: 16px 0;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--ink-soft); margin: 0 0 18px; }

/* ---------------------------------------------------------------- footer --- */

.site-foot { background: var(--ink); color: rgba(255, 255, 255, .8); padding: 44px 0; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.site-foot a { color: #fff; font-weight: 700; }
.site-foot .studio { display: flex; align-items: center; gap: 10px; }
.site-foot .studio img { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
.site-foot .fine { flex-basis: 100%; color: rgba(255, 255, 255, .62); margin: 8px 0 0; }

/* --------------------------------------------------------------- privacy --- */

.legal { padding: 60px 0 90px; }
.prose { max-width: 780px; margin: 0 auto; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.meta-row { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink-soft); font-size: .95rem; }
.meta-row strong { color: var(--ink); }
.note {
  background: #fff; border-radius: 16px;
  padding: 20px 22px; margin: 26px 0; box-shadow: 0 8px 20px rgba(42, 34, 56, .06);
}
.note p:last-child { margin: 0; }
.toc { background: #fff; border-radius: 16px; padding: 18px 22px; margin: 26px 0; }
.toc ol { columns: 2; margin: 8px 0 0; padding-left: 1.3em; }
@media (max-width: 560px) { .toc ol { columns: 1; } }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; font-size: .95rem; }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { background: #fde8e2; }