/* ChikiDoku website. A painted game page: the hero is the designer's banner master,
   rebuilt from its layers (farm, characters, logo, lettering) so it fits any screen.
   Colours come from the logo (gold fill, warm brown outline) and the farm (sky, meadow). */
@font-face { font-family: "Baloo"; src: url("fonts/Baloo-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("fonts/Vazirmatn-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
:root {
  --sky: #7cc8ff;
  --sky-pale: #d7f0ff;
  --meadow: #6dbb45;
  --meadow-deep: #3f8c2c;
  --cream: #fff8e8;
  --paper: #fffdf7;
  --wood: #7a3d0c;      /* the logo's outline */
  --wood-dark: #4a2508;
  --ink: #3d2614;
  --ink-soft: #745c49;
  --gold: #ffc42e;
  --gold-deep: #e39a00;
  --go: #6fd23f;
  --go-deep: #3e9a1f;
  --shadow: 0 18px 40px rgba(74, 37, 8, 0.18);
  --display: "Baloo", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang SC", "Microsoft YaHei", "Geeza Pro", "Noto Naskh Arabic", sans-serif;
  --outline: 0 3px 0 var(--wood), 3px 0 0 var(--wood), -3px 0 0 var(--wood), 0 -3px 0 var(--wood),
             2px 2px 0 var(--wood), -2px 2px 0 var(--wood), 2px -2px 0 var(--wood), -2px -2px 0 var(--wood),
             0 7px 0 var(--wood-dark), 0 12px 18px rgba(60, 30, 0, 0.3);
}
html[dir="rtl"] { --display: "Vazirmatn", "Geeza Pro", "Noto Naskh Arabic", system-ui, sans-serif; }
html[lang^="zh"] { --display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.6 var(--body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--meadow-deep); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -80px; background: #fff; padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 8px; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.08; margin: 0 0 0.35em; text-wrap: balance; }
h2 { font-size: clamp(34px, 5.4vw, 58px); color: var(--wood); }
h3 { font-size: clamp(26px, 3vw, 36px); color: var(--wood); }
:focus-visible { outline: 3px solid var(--wood); outline-offset: 3px; }

/* Lettering in the logo's style: cream fill, warm brown outline, soft drop. */
.lettered { color: #fff8e4; text-shadow: var(--outline); letter-spacing: 0.01em; }

/* header */
.top { position: fixed; inset-inline: 0; top: 0; z-index: 10; transition: background 0.25s, box-shadow 0.25s; }
.top.scrolled { background: rgba(255, 248, 232, 0.94); box-shadow: 0 6px 24px rgba(74, 37, 8, 0.12); backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; gap: 22px; min-height: 68px; }
.top .brand img { height: 40px; width: auto; filter: drop-shadow(0 3px 6px rgba(74, 37, 8, 0.25)); }
.top nav { display: flex; gap: 6px; margin-inline-start: auto; }
.top nav a { text-decoration: none; color: var(--wood); font: 800 17px/1 var(--display); padding: 10px 14px; border-radius: 999px; background: rgba(255, 253, 247, 0.72); }
.top nav a:hover { background: #fff; }
.top .pill { text-decoration: none; font: 800 16px/1 var(--display); color: #fff; background: #5865f2; padding: 11px 16px; border-radius: 999px; box-shadow: 0 4px 0 #3b45b8; white-space: nowrap; }
.lang select { font: 600 14px var(--body); padding: 8px 10px; border-radius: 999px; border: 2px solid rgba(122, 61, 12, 0.25); background: rgba(255, 253, 247, 0.9); color: var(--ink); }
@media (max-width: 900px) { .top nav { display: none; } .lang { margin-inline-start: auto; } .top .brand img { height: 32px; } .top .wrap { gap: 10px; } }

/* hero: one window onto the 2560 x 1440 painted master */
.hero { --vx: 200; --vw: 2160; position: relative; overflow: hidden; background: var(--sky); }
.stage { position: relative; aspect-ratio: 2160 / 1440; max-height: 100svh; min-height: 520px; width: 100%; overflow: hidden; }
.world { position: absolute; top: 50%; transform: translateY(-50%); width: calc(2560 / var(--vw) * 100%); inset-inline-start: calc(var(--vx) / var(--vw) * -100%); aspect-ratio: 16 / 9; direction: ltr; }
html[dir="rtl"] .world { inset-inline-start: auto; left: calc(var(--vx) / var(--vw) * -100%); }
.world .farm { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lay { position: absolute; left: calc(var(--x) / 2560 * 100%); top: calc(var(--y) / 1440 * 100%); width: calc(var(--w) / 2560 * 100%); }
.ch { transform-origin: 50% 100%; animation: bob 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ch.pip { animation-name: wave; animation-duration: 2.6s; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-3%) scale(0.99, 1.02); } 55% { transform: translateY(-3%) scale(0.99, 1.02); } }
@keyframes wave { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-2deg) translateY(-2%); } 60% { transform: rotate(1.5deg) translateY(-1%); } }
.sunbeam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 8% 0%, rgba(255, 246, 200, 0.55), transparent 70%); animation: glow 6s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.hero-top { position: absolute; inset-inline: 0; top: clamp(78px, 8%, 120px); display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vw, 14px); padding-inline: 16px; text-align: center; }
.hero-top h1 { margin: 0; width: clamp(260px, 36vw, 640px); }
.hero-top .logo { width: 100%; filter: drop-shadow(0 10px 18px rgba(74, 37, 8, 0.35)); animation: drop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.hero-top .tagline { width: clamp(230px, 25vw, 460px); filter: drop-shadow(0 4px 8px rgba(74, 37, 8, 0.3)); }
.hero-top .tagline-text { font: 800 clamp(22px, 2.6vw, 40px)/1.1 var(--display); margin: 0; }
@keyframes drop { from { transform: translateY(-30px) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }
.ribbon { display: inline-block; font: 800 clamp(15px, 1.4vw, 20px)/1 var(--display); color: #5a3400; background: linear-gradient(#ffe27a, var(--gold)); padding: 10px 22px; border-radius: 999px; box-shadow: 0 4px 0 var(--gold-deep), 0 10px 20px rgba(74, 37, 8, 0.2); }
.hero-cta { position: absolute; inset-inline: 0; bottom: max(6%, 52px); display: flex; flex-direction: column; align-items: center; gap: 10px; padding-inline: 16px; }
.hero-cta .note { margin: 0; font-weight: 600; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

.stage .portrait, .only-phone { display: none; }
@media (max-width: 760px) {
  /* phones get the illustrator's portrait key art: sky for the logo, meadow for the buttons */
  .stage { aspect-ratio: 1080 / 2160; min-height: 0; max-height: none; }
  .only-phone { display: inline-block; }
  .only-desk { display: none; }
  .stage .portrait { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1); } to { transform: scale(1.05); } }
  .world { display: none; }
  .hero-top { top: 84px; }
  .hero-top h1 { width: min(80%, 330px); }
  .hero-top .tagline { width: min(76%, 310px); }
  .hero-cta { bottom: 50px; gap: 10px; }
  .hero-cta .stores { flex-direction: column; align-items: stretch; width: min(100%, 360px); gap: 12px; }
  .hero-cta .note { background: rgba(61, 38, 20, 0.55); padding: 6px 14px; border-radius: 999px; font-size: 13px; text-shadow: none; }
}

/* buttons */
.stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 12px 26px; border-radius: 20px; border: 0; font: 800 19px/1.15 var(--display); text-decoration: none; cursor: pointer; transition: transform 0.12s, box-shadow 0.12s, filter 0.12s; }
html[lang^="zh"] .btn, html[dir="rtl"] .btn { font-family: var(--body); font-weight: 700; font-size: 17px; }
.btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn.is-soon { cursor: default; }
.btn.is-soon:hover, .btn.is-soon:active { filter: none; transform: none; }
.btn:active { transform: translateY(3px); }
.btn svg { width: 26px; height: 26px; flex: none; }
.btn-go { color: #fff; background: linear-gradient(#8ee35a, var(--go) 45%, var(--go-deep)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 6px 0 #2c7414, 0 14px 24px rgba(30, 80, 10, 0.3); text-shadow: 0 2px 0 rgba(30, 80, 10, 0.5); }
.btn-dark { color: #fff; background: linear-gradient(#3a3a3e, #121214); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 6px 0 #000, 0 14px 24px rgba(0, 0, 0, 0.3); }
.btn-light { color: var(--wood); background: #fff; box-shadow: 0 5px 0 #e9cf9f, 0 12px 20px rgba(74, 37, 8, 0.12); }

/* section edges: a grass rim that the next section grows out of */
.rim { position: relative; }
.rim::before { content: ""; position: absolute; inset-inline: 0; top: -38px; height: 40px; background: var(--rim, var(--cream)); -webkit-mask: radial-gradient(28px 30px at 28px 40px, #000 98%, transparent) 0 0 / 56px 40px repeat-x; mask: radial-gradient(28px 30px at 28px 40px, #000 98%, transparent) 0 0 / 56px 40px repeat-x; }

/* intro: the three rules */
.intro { --rim: var(--cream); background: var(--cream); padding: 56px 0 72px; text-align: center; }
.intro .lead { max-width: 720px; margin: 0 auto 34px; font-size: 19px; color: var(--ink-soft); }
.rules { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rules li { background: var(--paper); border: 3px solid #f1dfb8; border-radius: 26px; padding: 22px 20px 24px; display: grid; justify-items: center; gap: 10px; box-shadow: 0 8px 0 #f1dfb8; font: 800 20px/1.3 var(--display); color: var(--wood); }
html[lang^="zh"] .rules li, html[dir="rtl"] .rules li { font-family: var(--body); font-weight: 700; font-size: 18px; }
.rules img { width: 76px; height: 76px; object-fit: contain; }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } .rules li { grid-template-columns: 64px 1fr; justify-items: start; text-align: start; align-items: center; } .rules img { width: 60px; height: 60px; } }

/* features: painted rows */
.features { --rim: #cfeeff; background: linear-gradient(#cfeeff, #eaf7ff 40%, #fff3d6); padding: 72px 0 96px; }
.features > .wrap > h2 { text-align: center; margin-bottom: 48px; }
.row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 80px); align-items: center; margin-block: 0 clamp(48px, 7vw, 96px); }
.row:nth-of-type(even) .frame { order: 2; transform: rotate(2deg); }
.frame { position: relative; justify-self: center; width: min(360px, 100%); transform: rotate(-2deg); border-radius: 34px; padding: 10px; background: #fff; box-shadow: var(--shadow); }
.frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 72%; border-radius: 26px; }
.row .copy { min-width: 0; }
.row .tag { display: inline-block; font: 800 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--meadow-deep); background: #e3f6d3; padding: 8px 14px; border-radius: 999px; margin-bottom: 14px; }
.row h3 { font-size: clamp(30px, 3.6vw, 46px); }
.row p { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-soft); margin: 0; max-width: 30em; }
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .row .frame, .row:nth-of-type(even) .frame { order: 0; width: min(320px, 92%); }
  .row p { margin-inline: auto; }
}

/* the flock */
.birds { --rim: var(--meadow); background: linear-gradient(var(--meadow), var(--meadow-deep)); color: #fff; padding: 72px 0 96px; text-align: center; }
.birds p { max-width: 640px; margin: 0 auto 36px; font-size: 19px; color: #f1ffe6; }
.flock { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 22px 14px; }
.bird { margin: 0; display: grid; justify-items: center; gap: 8px; }
.bird .disc { width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fffef5, #fff1c9); box-shadow: inset 0 -6px 0 rgba(122, 61, 12, 0.12), 0 6px 0 #2f6e20, 0 12px 20px rgba(0, 0, 0, 0.18); display: grid; place-items: center; transition: transform 0.2s; }
.bird img { width: 80px; height: 80px; object-fit: contain; }
.bird:hover .disc { transform: translateY(-6px) rotate(-4deg); }
.bird span { font: 800 17px/1.1 var(--display); text-shadow: 0 2px 0 rgba(30, 70, 15, 0.6); }
@media (max-width: 760px) {
  .flock { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 104px; gap: 18px 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 16px 18px; margin-inline: -16px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 40px), transparent); mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 40px), transparent); }
  .flock::-webkit-scrollbar { display: none; }
  .bird { scroll-snap-align: start; }
  .bird .disc { width: 92px; height: 92px; }
  .bird img { width: 70px; height: 70px; }
  .birds { padding-bottom: 72px; }
}

/* community */
.community { --rim: #ffd65c; background: linear-gradient(#ffd65c, #ffb93e); padding: 72px 0 88px; text-align: center; }
.community .wrap { position: relative; }
.community .peek { position: absolute; bottom: -88px; pointer-events: none; filter: drop-shadow(0 10px 14px rgba(90, 52, 0, 0.25)); }
.community .peek-a { inset-inline-start: 0; width: 200px; }
.community .peek-b { inset-inline-end: 10px; width: 150px; }
@media (max-width: 900px) { .community { padding-bottom: 40px; } .community .wrap { padding-bottom: 120px; } .community .peek-a { width: 120px; bottom: -6px; inset-inline-start: 10%; } .community .peek-b { width: 90px; bottom: -6px; inset-inline-end: 12%; } }
.community p { max-width: 620px; margin: 0 auto 28px; font-size: 19px; color: #5a3400; }
.social { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.social .btn { min-width: 190px; }
@media (max-width: 480px) { .social { display: grid; grid-template-columns: 1fr 1fr; } .social .btn { min-width: 0; padding-inline: 12px; font-size: 17px; } }
.social .btn svg { width: 24px; height: 24px; }
.signup-form { display: grid; gap: 12px; max-width: 520px; margin: 32px auto 0; text-align: start; }
.signup-form input[type="email"] { font: inherit; padding: 16px 18px; border-radius: 16px; border: 3px solid #fff1c8; width: 100%; }
.signup-form label { font-size: 14px; display: flex; gap: 8px; align-items: flex-start; color: #5a3400; }
.signup-form .status { min-height: 24px; font-weight: 700; color: var(--wood); }

/* faq */
.faq { --rim: var(--cream); background: var(--cream); padding: 72px 0 80px; }
.faq h2 { text-align: center; margin-bottom: 30px; }
.faq .wrap { max-width: 860px; }
.faq details { background: var(--paper); border: 3px solid #f1dfb8; border-radius: 22px; padding: 0; margin: 14px 0; box-shadow: 0 6px 0 #f1dfb8; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; gap: 16px; align-items: center; justify-content: space-between; font: 800 20px/1.3 var(--display); color: var(--wood); }
html[lang^="zh"] .faq summary, html[dir="rtl"] .faq summary { font-family: var(--body); font-weight: 700; font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--wood); font: 800 24px/1 var(--display); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-soft); }

/* press teaser + footer */
.press-teaser { text-align: center; padding: 0 0 72px; background: var(--cream); }
.press-teaser p { color: var(--ink-soft); }
footer { position: relative; background: var(--wood-dark); color: #f6e7cc; padding: 44px 0 40px; font-size: 15px; }
footer .flogo { width: 180px; margin-bottom: 14px; }
footer a { color: #ffe08a; }
footer .links { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0; }
footer .tm { opacity: 0.7; font-size: 13px; }

/* inner pages (press kit, guide, 404) */
.page { padding: 120px 0 64px; }
.page h1 { font-size: clamp(36px, 6vw, 56px); color: var(--wood); }
.page .rules { grid-template-columns: 1fr; text-align: start; }
.page .rules li { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; font-size: 18px; }
.page .rules .dot { width: 40px; height: 40px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; }
.press-page table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.press-page th, .press-page td { text-align: start; padding: 12px 16px; border-bottom: 1px solid #f1e6cf; vertical-align: top; }
.press-page th { width: 34%; color: var(--wood); }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 16px; }
.dl-grid a { display: block; background: #fff; border-radius: 18px; padding: 10px; text-decoration: none; color: var(--ink); box-shadow: 0 4px 12px rgba(74, 37, 8, 0.1); font-size: 14px; }
.dl-grid img { border-radius: 12px; margin-bottom: 8px; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff3d6; }
.copy-block { background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: 0 4px 12px rgba(74, 37, 8, 0.08); margin: 12px 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}