/* Cupunapa website - soft watercolor look, matches the game (Quicksand, cream paper, rose accents). */
@font-face { font-family: "Quicksand"; src: url("fonts/quicksand-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --paper: #fbf8f3;
  --paper-2: #f6efe7;
  --ink: #3b3430;
  --ink-soft: #5d544e;
  --rose: #b83a5e;
  --rose-deep: #9a2d4d;
  --blush: #f7dfe2;
  --peach: #fbe6d3;
  --sky: #dfe9f5;
  --line: #e7dccf;
  --bezel: #26211f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #231f1d;
    --paper-2: #2c2724;
    --ink: #f3ebe4;
    --ink-soft: #cfc3b9;
    --rose: #f08aa6;
    --rose-deep: #f6a9bd;
    --blush: #3a2a2f;
    --peach: #3a2f27;
    --sky: #26303c;
    --line: #443b36;
    --bezel: #0f0d0c;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem; line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--rose-deep); text-underline-offset: 3px; }
a:hover { color: var(--rose); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 40; }
.skip:focus { left: 8px; }

.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- top bar: transparent at first, cream once the page is scrolled or the menu is open ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 30; background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s ease, border-color .25s ease; }
.topbar.solid { background: var(--paper); border-bottom-color: var(--line); }
.topbar .bar { display: flex; align-items: center; gap: 14px; width: calc(100% - 56px); margin-inline: auto; padding: 12px 0; }   /* full width: the logo sits in the top-left corner and the menu in the top-right corner, like Lake */
.brand { display: inline-flex; align-items: flex-start; gap: 2px; text-decoration: none; color: var(--ink); }
.brand img { height: 34px; width: auto; }
.brand .tm { font-size: .8rem; line-height: 1; margin-top: 2px; font-weight: 600; }
@media (prefers-color-scheme: dark) { .brand img { filter: invert(1) brightness(1.15); } }

/* the "App Store" note that appears next to the logo once someone scrolls. A plain label (not a button) until launch,
   then it becomes the real App Store link. Soft rose background, dark readable text, square-ish corners, no hover. */
.bar-store { margin-left: 8px; padding: 6px 12px; border-radius: 6px; border-left: 4px solid var(--rose); background: var(--blush); color: var(--ink); font-size: .95rem; font-weight: 700; line-height: 1.25; white-space: nowrap; cursor: default; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.topbar.scrolled .bar-store { opacity: 1; visibility: visible; transform: none; }

/* three-lines menu, top right */
.menu { margin-left: auto; position: relative; }
.menu-btn { width: 46px; height: 46px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-content: center; gap: 6px; }
.menu-btn:hover { background: var(--blush); }
.menu-btn span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 8px; box-shadow: 0 14px 34px rgba(60, 40, 30, .18); }
.menu-panel[hidden] { display: none; }
.menu-panel a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.menu-panel a:hover { background: var(--blush); }
.menu-panel a small { font-weight: 500; color: var(--ink-soft); }

/* ---------- hero: fills the first screen; the tall phone runs off the bottom edge ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; padding: 0;
  background:
    radial-gradient(620px 420px at 78% 8%, var(--peach), transparent 70%),
    radial-gradient(760px 520px at 8% 92%, var(--blush), transparent 70%),
    radial-gradient(520px 420px at 96% 96%, var(--sky), transparent 70%),
    var(--paper); }
/* the text + phone group sits nearer the middle of the page (Dani 2026-10-27: the text felt squashed to the left edge); the phone is centred in the space to the right of the text */
/* Layout (Dani 2026-10-27: a big blank spot in the middle; phone too close to the menu): the text column is WIDER and fixed; the grid ends exactly at the left edge of the three-lines menu button (28px page margin + 46px button = 74px), and the phone is centred in the leftover space, so it is evenly centred between the end of the text and the menu. */
/* Dani 2026-10-27: only 1 cm between the text and the phone, and the pair pushed to the middle with EQUAL space to the left and right edges of the page (flex + justify-content:center). 80px of side padding keeps the phone clear of the menu button. The text column hugs its words (fit-content) so the 1 cm is measured from the visible text. */
.hero-inner { height: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 1cm; padding-inline: 92px; }
.hero-text { align-self: center; padding: 120px 0 56px; width: fit-content; max-width: clamp(380px, 44vw, 700px); flex: 0 1 auto; text-align: center; }
.hero h1 { font-size: clamp(1.8rem, 3.4vw, 3.7rem); line-height: 1.1; margin: 0; font-weight: 500; letter-spacing: 0; color: var(--rose-deep); }
.hero h1 .line { display: block; }
.hero .welcome { font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.hero .also { font-size: clamp(1.1rem, 1.5vw, 1.4rem); color: var(--ink-soft); margin: 0 0 28px; }
/* "Coming soon": a label, not a button (same rose family, but dark readable text, a rose bar on the left, square-ish corners, no hover) */
.soon-note { display: inline-block; margin: 0; padding: 12px 18px; border-radius: 6px; border-left: 5px solid var(--rose); background: var(--blush); color: var(--ink); font-size: 1.08rem; font-weight: 700; line-height: 1.4; cursor: default; }

/* phone frame */
/* the WHOLE phone (border and all) sits about half a centimetre (20px) from the top of the screen: its width is worked out from the screen height so it never gets cut off (the screenshots have their status bar cropped off, so a phone frame is about 1.98x as tall as wide) */
.hero-phone { padding-top: 20px; flex: none; }
/* Dani 2026-10-28: calmer - the thick black phone bezel is now just a THIN black line (2px) around the screenshot, with a soft light shadow. The hero screenshot is 639x1216 (ratio 1.903; it has 24px of extra background on each side so the cards have breathing room), so width = (screen height - 48px) / 2.0575 + 4px of border. */
.phone { width: min(540px, calc((100vh - 48px) / 1.903 + 4px), 40vw); width: min(540px, calc((100svh - 48px) / 1.903 + 4px), 40vw); border: 2px solid var(--bezel); border-radius: 12% / 5.6%; overflow: hidden; background: var(--paper); box-shadow: 0 18px 40px rgba(60, 35, 30, .12); }
.phone img { display: block; width: 100%; height: auto; border-radius: 0; background: var(--paper); }

/* bridge section: heading + the two description paragraphs */
.bridge .wrap { max-width: 800px; }
.bridge p { color: var(--ink-soft); }

/* the "no ads, no accounts..." band */
.perks { padding: 40px 0; background: linear-gradient(90deg, var(--blush), var(--peach)); }
.perks p { margin: 0; max-width: 920px; margin-inline: auto; padding-inline: 16px; text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.5; font-weight: 600; color: var(--ink); }

section { padding: 56px 0; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.2; margin: 0 0 14px; }
.lead { color: var(--ink-soft); max-width: 62ch; }

/* screenshot row */
.shots { background: var(--paper-2); }
.shot-row { display: flex; gap: 20px; overflow-x: auto; padding: 10px 4px 22px; scroll-snap-type: x mandatory; }
.shot-row figure { margin: 0; flex: 0 0 auto; width: min(240px, 62vw); scroll-snap-align: start; }
.shot-row img { border-radius: 28px; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(80, 50, 40, .14); }
.shot-row figcaption { margin-top: 10px; font-size: .98rem; color: var(--ink-soft); text-align: center; }

/* feature blocks */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; }
.feature { background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 22px 24px; }
.feature h3 { margin: 0 0 6px; font-size: 1.25rem; color: var(--rose-deep); }
.feature p { margin: 0; color: var(--ink-soft); }

/* art gallery */
.gallery { background: var(--paper-2); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; align-items: stretch; }
.gallery-grid figure { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; flex: 1; min-height: 0; }
.gallery-grid .cards-pair { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 18px; flex: 1; background: var(--blush); }
.gallery-grid .cards-pair img { width: 46%; height: auto; border-radius: 0; filter: drop-shadow(0 6px 10px rgba(60, 30, 30, .25)); }
.gallery-grid figcaption { padding: 12px 16px 14px; font-size: .98rem; color: var(--ink-soft); }

/* footer */
footer { border-top: 1px solid var(--line); padding: 34px 0 44px; font-size: 1rem; color: var(--ink-soft); }
footer .cols { display: flex; flex-wrap: wrap; gap: 32px 64px; margin-bottom: 20px; }
footer h2 { font-size: 1rem; margin: 0 0 6px; color: var(--ink); letter-spacing: .02em; }
footer ul { list-style: none; margin: 0; padding: 0; }
footer li { margin: 3px 0; }

/* privacy page */
.doc { max-width: 760px; padding: 110px 0 64px; }
.doc h1 { font-size: clamp(2rem, 4.5vw, 2.7rem); margin: 0 0 4px; line-height: 1.15; }
.doc h2 { font-size: 1.35rem; margin: 30px 0 8px; color: var(--rose-deep); }
.doc p, .doc li { color: var(--ink-soft); }
.doc ul { padding-left: 1.2em; }
.doc .updated { color: var(--ink-soft); margin: 0 0 20px; }
.doc .short { background: var(--blush); border-radius: 16px; padding: 14px 20px; color: var(--ink); }

@media (max-width: 920px) {
  .hero { height: auto; min-height: 100vh; min-height: 100svh; }
  .hero-inner { display: block; padding-inline: 0; margin: 0 24px; height: auto; }
  .hero-text { padding: 96px 0 28px; width: auto; max-width: none; }
  .hero-phone { padding: 0 0 32px; display: flex; justify-content: center; }
  .phone { width: min(300px, 78vw); }
  .features { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid > figure > img { max-height: 380px; }
  section { padding: 40px 0; }
}
@media (max-width: 520px) {
  .bar-store { font-size: .82rem; padding: 6px 10px; }
  .brand img { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .topbar, .bar-store, .menu-btn span { transition: none; }
}

/* ---------- decorations: Dani's own paw / mouse / yarn art, placed in the EMPTY spaces (never over text; hidden where there is no room) ---------- */
main, footer { overflow-x: clip; }
.deco { position: absolute; pointer-events: none; user-select: none; height: auto; }
@media (prefers-color-scheme: dark) { .deco, .pw { opacity: .88; } }

/* hero: paw prints walking toward the phone, in the gap between the text and the phone */
.hero-phone { position: relative; }
.paw-trail { position: absolute; left: 100%; margin-left: 16px; top: 22%; bottom: 14%; width: 84px; pointer-events: none; }   /* moved to the RIGHT of the phone: the gap on its left is now only 1 cm, so the paws walk in the open space beside the phone's right edge */
.pw { position: absolute; width: 42px; height: auto; user-select: none; }
.pw1 { left: 4px;  top: 78%; transform: rotate(-18deg); }
.pw2 { left: 40px; top: 58%; transform: rotate(-8deg); }
.pw3 { left: 2px;  top: 38%; transform: rotate(-22deg); }
.pw4 { left: 38px; top: 18%; transform: rotate(-6deg); }
@media (max-width: 1360px) { .paw-trail { display: none; } }

/* bridge section: a yarn ball on the left and a mouse on the right, in the side margins */
.bridge .wrap { position: relative; }
.deco-bridge-yarn  { width: 120px; left: -190px;  top: 8px;     transform: rotate(-8deg); }
.deco-bridge-mouse { width: 120px; right: -185px; bottom: 24px; transform: scaleX(-1) rotate(4deg); }
@media (max-width: 1260px) { .deco-bridge-yarn, .deco-bridge-mouse { display: none; } }

/* feature cards: a different paw print beside each title */
.feature h3::before { content: ""; display: inline-block; width: 26px; height: 26px; margin-right: 9px; vertical-align: -5px; background-position: center; background-size: contain; background-repeat: no-repeat; }
.feature:nth-child(1) h3::before { background-image: url("images/deco/paw-rose.png"); }
.feature:nth-child(2) h3::before { background-image: url("images/deco/paw-orange.png"); }
.feature:nth-child(3) h3::before { background-image: url("images/deco/paw-blue.png"); }
.feature:nth-child(4) h3::before { background-image: url("images/deco/paw-red.png"); }

/* the "no ads, no accounts..." band: a mouse on the left chasing a ball of yarn on the right, text in the middle */
.perks { position: relative; overflow: hidden; padding: 48px 0; }
.deco-perks-mouse { width: 112px; left: 5%;  top: 50%; transform: translateY(-50%); }
.deco-perks-yarn  { width: 120px; right: 4%; top: 50%; transform: translateY(-50%) rotate(8deg); }
@media (max-width: 960px) { .deco-perks-mouse, .deco-perks-yarn { display: none; } }

footer .wrap { position: relative; }

/* privacy page: a yarn ball by the title and a mouse near the end (wide screens only) */
.doc { position: relative; }
.doc { overflow-x: visible; }   /* the privacy page's main IS the narrow column, so its decorations must be allowed to sit in the side margins */
/* keep the "no ads..." sentence clear of the mouse and the yarn on mid-size screens */
@media (min-width: 961px) { .perks p { max-width: none; width: min(860px, calc(100% - 10vw - 320px)); padding-inline: 0; } }

/* the welcome-screen cat sits to the LEFT of the big headline, which moves right to make room (Dani 2026-10-27) */
.hero-title-row { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 30px); margin: 0 0 24px; }
.hero-cat { flex: none; width: clamp(72px, 9vw, 160px); height: auto; user-select: none; pointer-events: none; }
.hero .welcome, .hero .also { text-wrap: pretty; }   /* avoids a one-word last line without narrowing the text box */
.hero-title-row { width: fit-content; max-width: 100%; margin-inline: auto; }   /* the headline row hugs its content so the text column can hug it */

/* the strip label next to the logo: the full sentence on wider screens, a short "Coming soon!" on narrow ones so it never crowds the menu button */
.bar-short { display: none; }
@media (max-width: 760px) { .bar-full { display: none; } .bar-short { display: inline; } }

/* privacy page: the yarn sits right beside the title block (vertically centred on its three lines); the mouse sits right beside the "Contact" heading (Dani 2026-10-28) */
.doc-head { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); }
.doc-head h1 { margin: 0 0 4px; }
.doc-yarn { flex: none; width: clamp(72px, 9vw, 110px); height: auto; transform: rotate(8deg); user-select: none; pointer-events: none; }
.doc-contact { display: flex; align-items: center; gap: 14px; margin: 30px 0 8px; }
.doc-contact h2 { margin: 0; }
.doc-mouse { flex: none; width: 92px; height: auto; user-select: none; pointer-events: none; }