/* Red Pharos – shared styles. Fonts are bundled (SIL Open Font License), nothing loads from other sites. */
@font-face { font-family: 'Lilita One'; font-display: swap; src: url(/assets/fonts/LilitaOne-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Lilita One'; font-display: swap; src: url(/assets/fonts/LilitaOne-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+A720-A7FF; }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/Nunito-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Nunito'; font-weight: 200 1000; font-display: swap; src: url(/assets/fonts/Nunito-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+A720-A7FF; }
@font-face { font-family: 'Patrick Hand'; font-display: swap; src: url(/assets/fonts/PatrickHand-Regular.woff2) format('woff2'); }

:root {
  --night: #0f1b3d;
  --night-2: #18295a;
  --beam: #ffd23f;
  --coral: #e23e57;
  --ink: #142033;
  --muted: #5a6478;
  --paper: #ffffff;
  --bg: #cfe4f2;
  --line: #c3d6e6;
  --radius: 18px;
  --shadow: 0 6px 0 rgba(15, 27, 61, .12), 0 14px 30px rgba(15, 27, 61, .08);
  --display: 'Lilita One', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 600 17px/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; letter-spacing: .01em; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
.wrap { width: min(1080px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--beam); color: var(--night); padding: 8px 14px; border-radius: 10px; }
:focus-visible { outline: 3px solid var(--beam); outline-offset: 3px; }

/* ---------- header / footer ---------- */
.site-head { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 22px; color: var(--night); }
.brand img { width: 36px; height: 36px; }
.brand { white-space: nowrap; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { text-decoration: none; color: var(--muted); padding: 6px 12px; border-radius: 999px; font-size: 15px; }
@media (max-width: 520px) {
  .brand { font-size: 0; gap: 0; }   /* small phones: logo only (the link has an aria-label) */
  .site-nav a { font-size: 14px; padding: 6px 10px; }
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--night); background: var(--beam); }

.site-foot { background: #b9d6eb; color: var(--muted); border-top: 1px solid var(--line); padding: 40px 0 48px; margin-top: 72px; font-size: 15px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; }
.site-foot h4 { margin: 0 0 8px; color: var(--night); font: 400 17px var(--display); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin: 4px 0; }
.site-foot a { color: var(--ink); text-decoration: none; }
.site-foot a:hover { color: var(--coral); }
.site-foot .legal { flex-basis: 100%; border-top: 1px solid var(--line); padding-top: 20px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
  font: 400 19px var(--display); letter-spacing: .02em; padding: 12px 24px; border-radius: 14px; border: 3px solid var(--night);
  background: var(--beam); color: var(--night); box-shadow: 0 5px 0 var(--night); transition: transform .1s, box-shadow .1s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--night); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--night); }
.btn.alt { background: #fff; }
.btn.small { font-size: 16px; padding: 8px 16px; border-radius: 12px; }

/* App Store style buttons. PLACEHOLDER: replace with Apple's official "Download on the App Store" badge
   (https://developer.apple.com/app-store/marketing/guidelines/) before going live. */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 180px; height: 56px; padding: 0 18px 0 14px;
  background: #000; color: #fff; border: 1.5px solid #a6a6a6; border-radius: 12px; text-decoration: none; line-height: 1.05; }
.store svg { width: 26px; height: 26px; flex: none; fill: #fff; }
.store small { display: block; font: 600 11px var(--body); letter-spacing: .02em; }
.store strong { display: block; font: 700 21px/1.05 -apple-system, 'Helvetica Neue', var(--body); letter-spacing: -.01em; }
.store.soon { background: transparent; color: var(--ink); border-color: var(--line); cursor: default; }
.store.soon svg { fill: currentColor; }
.store.soon::after { content: 'Coming soon'; position: absolute; top: -10px; right: -8px; background: var(--coral); color: #fff;
  font: 400 12px var(--display); letter-spacing: .03em; padding: 2px 8px; border-radius: 8px; transform: rotate(4deg); }

/* ---------- studio home ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(#cfe8ff, #eaf5ff 70%, #fdf8ec); color: var(--ink); padding: 64px 0 96px; text-align: center; }
/* Light from the lamp of the logo (31px down a 112px logo, under 64px of padding) to both edges of the screen. */
/* It is wider than the screen so it still reaches both edges while it swings around the lamp. */
.hero .beam { position: absolute; left: -30%; right: -30%; top: calc(64px + 31px - 130px); height: 260px; pointer-events: none; transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(255, 210, 63, .12), rgba(255, 210, 63, .6) 50%, rgba(255, 210, 63, .12));
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%);
  animation: swing 5s ease-in-out infinite alternate; }
/* The animation only moves --sway from -1 to 1; the angle is worked out from the current width, so it follows
   window resizes. The ends of the beam move at most 70px at the screen edges (9 degrees on narrow screens). */
@property --sway { syntax: '<number>'; inherits: false; initial-value: 0; }
.hero .beam { transform: rotate(calc(var(--sway) * min(9deg, atan2(70px, 50vw)))); }
@keyframes swing { from { --sway: -1; opacity: .75; } 50% { opacity: 1; } to { --sway: 1; opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .hero .beam { animation: none; } }
/* Clouds drifting right and a few gulls flying left across the sky under the logo, behind the text. */
.hero .sky { position: absolute; inset: 0; pointer-events: none; }
.hero .cloud { position: absolute; left: 0; top: var(--top); width: var(--w); fill: #ffffff; opacity: .9; filter: drop-shadow(0 3px 4px rgba(15, 27, 61, .12));
  animation: cloud var(--t) linear var(--d) infinite; }
@keyframes cloud { from { transform: translateX(-160px); } to { transform: translateX(100vw); } }
.hero .flock { position: absolute; left: 0; top: 340px; width: 110px; height: 40px; transform: translateX(66vw); }   /* flown by sea.js */
.hero .gull { position: absolute; left: var(--gx); top: calc(14px + var(--gy)); width: var(--gw); overflow: visible;
  fill: none; stroke: var(--night); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8;
  transform-origin: 50% 70%; }
@media (prefers-reduced-motion: reduce) {
  .hero .cloud { animation: none; transform: translateX(var(--x)); }
}
.hero > .wrap { position: relative; }
.hero-logo { width: 112px; height: 112px; margin: 0 auto 20px; filter: drop-shadow(0 10px 20px rgba(15, 27, 61, .25)); }
.hero h1 { font-size: clamp(44px, 9vw, 76px); color: var(--night); margin-bottom: 8px; }
.hero h1 span { color: var(--coral); }
.hero p.lead { font-size: clamp(18px, 2.6vw, 22px); color: var(--muted); max-width: 640px; margin: 0 auto; text-wrap: balance; }
/* The sea under the hero: two waves sliding at different speeds, and a boat sailing between them. */
.sea { position: relative; height: 100px; margin-top: -99px; overflow: hidden; pointer-events: none; }
.sea .wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 60px; }
.sea .wave.back { bottom: 6px; animation: drift 26s linear infinite reverse; }
.sea .wave.back path { fill: #a8cbe6; }
.sea .wave.front { animation: drift 18s linear infinite; }
.sea .wave.front path { fill: var(--bg); }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ship { position: absolute; bottom: 0; left: 0; width: 100%; animation: sail 45s linear infinite; }
.ship svg { display: block; width: 48px; height: 44px; transform-origin: 50% 90%; }   /* moved and tilted by sea.js */
.buoy { position: absolute; bottom: 0; }
.buoy svg { display: block; width: 20px; height: 32px; transform-origin: 50% 85%; }   /* bobbed by sea.js */
.buoy.far svg { width: 15px; height: 24px; }   /* further away, behind the back wave */
.buoy .lamp { animation: blink 2.4s steps(1) infinite; }
.buoy[data-delay] .lamp { animation-delay: -1.2s; }
@keyframes blink { 0%, 70% { opacity: 1; } 70.01%, 100% { opacity: .2; } }
@keyframes sail { from { transform: translateX(-60px); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sea .wave { animation: none; }
  .ship { animation: none; transform: translateX(18vw); }
  .buoy .lamp { animation: none; }
}

.section-title { text-align: center; font-size: clamp(30px, 5vw, 42px); margin: 56px 0 8px; }
.section-sub { text-align: center; color: var(--muted); margin: 0 auto 32px; max-width: 520px; }
.section-sub.wide { max-width: 640px; }

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.game-card { background: var(--paper); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.game-card .art { position: relative; height: 230px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 0 20px; }
.game-card .art img.shot { width: 120px; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .25); border: 4px solid #111; border-bottom: 0; transform: translateY(14px); }
.game-card .art img.shot:nth-child(2) { width: 140px; transform: translateY(4px); }
.game-card.kub .art { background: linear-gradient(#7ccbff 0 45%, #3fae4a 45%); }
.game-card.cj .art { background: #fbf7ec repeating-linear-gradient(to bottom, transparent 0 23px, rgba(80, 130, 200, .18) 23px 24px); }
.game-card .body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.game-card .title { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.game-card .title img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.game-card h3 { font-size: 30px; margin: 0; }
.game-card .tag { color: var(--muted); font-size: 15px; margin: 0; }
.game-card p { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips li { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.about { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 8px; }
.about div { background: var(--paper); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.about h3 { font-size: 22px; }
.about p { color: var(--muted); margin: 0; font-size: 16px; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; } }

/* ---------- game pages ---------- */
.game-hero { padding: 48px 0 0; overflow: hidden; }
.game-hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: end; }
.game-hero .intro { padding-bottom: 56px; }
.game-hero .icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); margin-bottom: 18px; }
.game-hero h1 { font-size: clamp(46px, 8vw, 72px); margin-bottom: 6px; }
.game-hero .subtitle { font-size: clamp(19px, 2.6vw, 24px); margin-bottom: 18px; }
.game-hero .phones { display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.phone { width: 210px; border-radius: 30px 30px 0 0; border: 8px solid #111; border-bottom: 0; overflow: hidden; background: #111; box-shadow: 0 -6px 30px rgba(0, 0, 0, .25); }
.phone.back { width: 170px; opacity: .95; margin-bottom: -2px; }
.phone img { border-radius: 22px 22px 0 0; }
@media (max-width: 820px) {
  .game-hero .wrap { grid-template-columns: 1fr; }
  .game-hero .intro { padding-bottom: 8px; text-align: center; }
  .game-hero .icon { margin-inline: auto; }
  .game-hero .store-row, .game-hero .hero-actions { justify-content: center; }
  .phone { width: 160px; }
  .phone.back { width: 130px; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.age { font-size: 14px; opacity: .8; margin: 14px 0 0; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature { background: var(--paper); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.feature .emoji { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.feature h3 { font-size: 22px; }
.feature p { color: var(--muted); margin: 0; font-size: 16px; }

.gallery { display: flex; justify-content: safe center; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 20px; margin-top: 16px; }
.gallery img { width: 220px; flex: none; border-radius: 22px; scroll-snap-align: center; box-shadow: var(--shadow); border: 5px solid #111; }
.page-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }

/* Kick-Up Blocks theme */
.kub .game-hero { background: linear-gradient(#7ccbff 0 62%, #2c3d7a 62% 64%, #3fae4a 64%); color: #142033; }
.kub .game-hero h1 { color: #ffd23f; -webkit-text-stroke: 3px #142033; paint-order: stroke fill; text-shadow: 0 5px 0 #142033; }
.kub .game-hero .subtitle { display: inline-block; background: #142033; color: #fff; padding: 6px 18px; border-radius: 999px; font-family: var(--display); font-weight: 400; }
.kub .feature .emoji { color: var(--coral); }

/* Cloud Jumper theme: notebook paper */
.cj { --cj-paper: #fbf7ec; --cj-ink: #2b2b2b; --cj-blue: #2c7be5; --cj-red: #c0392b; }
.cj .game-hero { color: var(--cj-ink); font-family: 'Patrick Hand', cursive;
  background: linear-gradient(to right, transparent 27px, rgba(220, 80, 80, .25) 27px 29px, transparent 29px),
    repeating-linear-gradient(to bottom, var(--cj-paper) 0 31px, rgba(80, 130, 200, .15) 31px 32px), var(--cj-paper); }
.cj .game-hero h1 { font-family: 'Patrick Hand', cursive; color: var(--cj-blue); font-size: clamp(54px, 9vw, 84px); }
.cj .game-hero .subtitle { font-size: clamp(22px, 3vw, 28px); }
.cj .feature h3, .cj .section-title { font-family: 'Patrick Hand', cursive; }
.cj .feature h3 { font-size: 26px; color: var(--cj-blue); }
.cj .section-title { font-size: clamp(36px, 5vw, 48px); }
.cj .phone { border-color: #2b2b2b; }

/* ---------- documents (privacy, support) ---------- */
.doc-head { background: linear-gradient(#e3f1ff, #f3f8ff); color: var(--ink); border-bottom: 1px solid var(--line); padding: 40px 0 36px; }
.doc-head .crumbs { font-size: 15px; color: var(--muted); margin-bottom: 10px; }
.doc-head .crumbs a { color: var(--ink); }
.doc-head h1 { font-size: clamp(34px, 6vw, 52px); margin: 0; color: var(--night); }
.doc-head .meta { color: var(--muted); margin: 8px 0 0; font-size: 15px; }
.doc-head .game-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--display); font-size: 18px; text-decoration: none; color: var(--ink); }
.doc-head .game-badge img { width: 40px; height: 40px; border-radius: 10px; }
.doc { padding-top: 32px; }
.doc h2 { font-size: 26px; margin: 36px 0 10px; }
.doc h3 { font-size: 20px; margin: 24px 0 8px; }
.doc ul { padding-left: 1.3em; }
.doc li { margin: 4px 0; }
.doc a:not(.btn) { color: #2563c9; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 16px; background: var(--paper); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.doc th { background: #e3f1ff; color: var(--night); font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
.doc tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc thead { display: none; }
  .doc td::before { content: attr(data-label); display: block; font: 400 14px var(--display); color: var(--coral); letter-spacing: .03em; }
  .doc tr { border-bottom: 1px solid var(--line); }
}
.callout { background: var(--paper); border-left: 6px solid var(--beam); border-radius: 12px; padding: 18px 22px; box-shadow: var(--shadow); margin: 18px 0 24px; }
.callout h2 { margin-top: 0; }
.callout ul { margin: 0; }
.toc { columns: 2 220px; padding: 0; list-style: none; font-size: 15px; margin: 0 0 8px; }
.toc a { text-decoration: none; }
/* Text that must be confirmed before the site goes live. */
mark.todo { background: #ffe58a; color: #3b2f00; padding: 0 4px; border-radius: 4px; }

details.faq { background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); margin: 0 0 12px; padding: 0 20px; }
details.faq summary { cursor: pointer; padding: 16px 0; font-family: var(--display); font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; color: var(--coral); font-size: 24px; line-height: 1; }
details.faq[open] summary::after { content: '–'; }
details.faq > div { padding: 0 0 16px; color: var(--muted); }
details.faq > div p:last-child { margin: 0; }
.contact-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: #fff6d6; color: var(--ink); border: 2px solid #f3dc8a; border-radius: var(--radius); padding: 24px 28px; margin-top: 32px; }
.contact-card h2 { margin: 0 0 4px; font-size: 26px; }
.contact-card p { margin: 0; color: var(--muted); }

/* ---------- smart link (/get) ---------- */
.get { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; }
.get.kub { background: linear-gradient(#7ccbff 0 55%, #3fae4a 55%); color: #142033; }
.get.cj { background: repeating-linear-gradient(to bottom, #fbf7ec 0 31px, rgba(80, 130, 200, .15) 31px 32px), #fbf7ec; color: #2b2b2b; }
.get-card { background: #fff; color: #142033; width: min(440px, 100%); border-radius: 28px; padding: 32px 28px 26px; box-shadow: 0 8px 0 rgba(20, 32, 51, .2), 0 20px 50px rgba(20, 32, 51, .2); }
.get-card .icon { width: 108px; height: 108px; border-radius: 24px; margin: 0 auto 14px; box-shadow: 0 6px 14px rgba(0, 0, 0, .2); }
.get-card h1 { font-size: 36px; margin-bottom: 4px; }
.get-card .tag { color: #5a6478; margin-bottom: 20px; }
.get-card .store-row { justify-content: center; }
.get-card .store.soon { color: #142033; border-color: #dfe4ee; }
.get-card .qr { margin: 22px auto 6px; width: 160px; padding: 8px; border-radius: 14px; border: 2px solid #dfe4ee; }
.get-card .qr-note { font-size: 14px; color: #5a6478; margin: 0; }
.get-card .msg { background: #fff6d6; border-radius: 12px; padding: 12px 14px; font-size: 15px; margin: 0 0 18px; }
.get-card .more { margin: 20px 0 0; font-size: 14px; color: #5a6478; }
.get-card .more a { color: #2563c9; }
.get [hidden] { display: none !important; }
.cj .get-card h1 { font-family: 'Patrick Hand', cursive; color: #2c7be5; font-size: 44px; }

/* ---------- 404 ---------- */
.lost { text-align: center; padding: 80px 0 40px; }
.lost h1 { font-size: clamp(64px, 14vw, 120px); color: var(--coral); margin: 0; }