/* Public landing pages (deploy/web-landing): / (English) and /vi/ /zh/ /ja/ /ko/ /es/ /pt-br/ /id/ /hi/ /th/.
   The HTML is generated by tools/landing/build.mjs (edit the template or tools/landing/strings, not the pages).
   The game itself is at /play/. */
@font-face { font-family: "Mali"; src: url("/play/TemplateData/Mali-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --sky: #cfeaf4; --sky-deep: #9fd3e8; --paper: #fffaf0; --cream: #f6eedb; --ink: #3b2f22; --muted: #6e5f4b;
  --leaf: #3f7d3a; --leaf-dark: #2f5f2b; --leaf-soft: #e3f0d2; --heart: #d9534f; --line: rgba(59, 47, 34, .12);
  --radius: 18px; --shadow: 0 6px 24px rgba(59, 47, 34, .10);
  --head: "Mali", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--body); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--leaf-dark); }
h1, h2, h3 { font-family: var(--head); line-height: 1.2; margin: 0 0 .4em; color: var(--leaf-dark); }
h2 { font-size: clamp(28px, 4vw, 40px); text-align: center; }
h3 { font-size: 20px; color: var(--ink); }
p { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 780px; }
.center { text-align: center; margin-top: 32px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid #f0a53a; outline-offset: 2px; border-radius: 6px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--leaf); color: #fff; text-decoration: none; font-weight: 700; border-radius: 999px; padding: 12px 26px; box-shadow: 0 4px 0 var(--leaf-dark); transition: transform .12s, background .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { background: #458a40; transform: translateY(-1px); box-shadow: 0 5px 0 var(--leaf-dark); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--leaf-dark); }
.btn-lg { font-size: 19px; padding: 15px 34px; }
.btn-sm { font-size: 15px; padding: 8px 18px; box-shadow: 0 3px 0 var(--leaf-dark); }
.btn-ghost { background: rgba(255, 255, 255, .75); color: var(--leaf-dark); box-shadow: inset 0 0 0 2px var(--leaf); }
.btn-ghost:hover { background: #fff; box-shadow: inset 0 0 0 2px var(--leaf-dark); }
.btn-light { background: var(--paper); color: var(--leaf-dark); box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.btn-light:hover { background: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 250, 240, .9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 16px; height: 62px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 700 22px var(--head); color: var(--leaf-dark); margin-right: auto; }
.menu { display: flex; gap: 4px; }
.menu a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.menu a:hover { background: var(--leaf-soft); color: var(--leaf-dark); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--leaf-dark); border: 1px solid var(--line); background: #fff; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
.lang[open] summary::after { transform: translateY(2px) rotate(225deg); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .16); min-width: 190px; max-height: 70vh; overflow: auto; }
.lang li a { display: block; padding: 8px 12px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 15px; }
.lang li a:hover { background: var(--leaf-soft); }
.lang li a[aria-current="page"] { background: var(--leaf); color: #fff; font-weight: 700; }

/* hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #a9dcef 0%, var(--sky) 55%, #e6f3d6 100%); padding: 48px 0 110px; }
.hero::before, .hero::after { content: ""; position: absolute; background: #fff; border-radius: 999px; opacity: .8; filter: blur(.5px); }
.hero::before { width: 180px; height: 46px; top: 46px; left: 6%; box-shadow: 60px -18px 0 -4px #fff; }
.hero::after { width: 140px; height: 38px; top: 120px; right: 8%; box-shadow: -50px -14px 0 -6px #fff; }
.hills { position: absolute; left: -5%; right: -5%; bottom: -1px; height: 120px; background: radial-gradient(120% 140px at 25% 100%, #8cc56b 60%, transparent 61%), radial-gradient(110% 160px at 85% 100%, #7ab85a 60%, transparent 61%); pointer-events: none; }
.hills::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: var(--paper); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.wordmark { width: 300px; margin: 0 0 6px -6px; }
.badge { display: inline-block; background: rgba(255, 255, 255, .85); color: var(--leaf-dark); font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; margin: 0 0 14px; box-shadow: 0 2px 0 rgba(0, 0, 0, .06); }
.hero h1 { font-size: clamp(32px, 4.6vw, 52px); color: var(--ink); }
.lead { font-size: 18px; color: var(--muted); max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0; font-size: 15px; color: var(--muted); }
.checks li::before { content: "✓"; color: var(--leaf); font-weight: 800; margin-right: 6px; }
.hero-shot { margin: 0; border-radius: 22px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 18px 48px rgba(47, 95, 43, .25); transform: rotate(1.2deg); background: #8cc56b; }
.hero-shot img { width: 100%; }

/* sections */
.section { padding: 80px 0; }
.section-alt { background: var(--cream); }
.section-lead { text-align: center; color: var(--muted); font-size: 18px; max-width: 38em; margin: 0 auto 40px; }
.split .section-lead, .split h2 { text-align: left; margin-left: 0; }

/* feature cards */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; }
.feature:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(59, 47, 34, .16); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feature-body { padding: 18px 20px 6px; }
.feature p { color: var(--muted); font-size: 16px; }

/* town & friends */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.iconlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.iconlist li { display: flex; gap: 14px; align-items: flex-start; }
.iconlist h3 { margin-bottom: 2px; font-size: 18px; }
.iconlist p { margin: 0; color: var(--muted); font-size: 16px; }
.ico { flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); }
.pill { display: inline-block; vertical-align: middle; font: 700 12px var(--body); color: #fff; background: var(--heart); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }
.framed { margin: 0; background: #fff; padding: 10px; border-radius: 22px; box-shadow: 0 16px 40px rgba(59, 47, 34, .16); transform: rotate(-1deg); }
.framed img { border-radius: 14px; }
.framed figcaption { font-size: 14px; color: var(--muted); text-align: center; padding: 10px 6px 2px; }

/* steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { counter-increment: step; position: relative; background: #fff; border-radius: var(--radius); padding: 44px 24px 16px; box-shadow: var(--shadow); text-align: center; }
.steps li::before { content: counter(step); position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--leaf); color: #fff; font: 700 22px var(--head); box-shadow: 0 4px 0 var(--leaf-dark); }
.steps p { color: var(--muted); font-size: 16px; }

/* safety */
.safety { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.safe { background: #fff; border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.safe .ico { margin-bottom: 12px; background: var(--leaf-soft); box-shadow: none; }
.safe h3 { font-size: 18px; }
.safe p { color: var(--muted); font-size: 15px; margin: 0; }

/* FAQ */
.faq { margin-top: 32px; display: grid; gap: 12px; }
.faq details { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(59, 47, 34, .07); border: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 700 24px/1 var(--body); color: var(--leaf); }
.faq details[open] summary::after { content: "–"; }
.answer { padding: 0 20px 6px; color: var(--muted); }

/* final call to action */
/* partner card: Ghép Duyên */
.partner { display: flex; align-items: center; gap: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; }
.partner img { width: 72px; height: 72px; border-radius: 16px; flex: none; }
.partner h2 { text-align: left; font-size: clamp(24px, 3vw, 32px); }
.partner p { color: var(--muted); }
@media (max-width: 560px) { .partner { flex-direction: column; text-align: center; padding: 24px 20px; } .partner h2 { text-align: center; } }
.final { background: linear-gradient(160deg, var(--leaf) 0%, var(--leaf-dark) 100%); color: #fff; text-align: center; padding: 72px 0; }
.final img { margin: 0 auto 14px; width: 96px; }
.final h2 { color: #fff; }
.final p { font-size: 19px; opacity: .92; margin-bottom: 26px; }

/* footer */
.footer { background: #2e2519; color: #d9cdb8; padding: 40px 0 28px; font-size: 15px; text-align: center; }
.footer a { color: #f3e7cf; }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 18px var(--head); color: #fff; }
.foot-links, .foot-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0 0 14px; }
.foot-langs { font-size: 14px; }
.foot-langs a { text-decoration: none; opacity: .85; }
.foot-langs a[aria-current="page"] { opacity: 1; font-weight: 700; text-decoration: underline; }
.copy { opacity: .7; margin: 6px 0 0; }

/* responsive */
@media (max-width: 960px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding-top: 32px; text-align: center; }
  .wordmark { margin: 0 auto 6px; width: 240px; }
  .lead { margin-left: auto; margin-right: auto; }
  .ctas, .checks { justify-content: center; }
  .hero-shot { transform: none; max-width: 640px; margin: 0 auto; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .safety { grid-template-columns: repeat(2, 1fr); }
  .framed { transform: none; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .section { padding: 60px 0; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .bar { gap: 8px; }
  .brand span { display: none; }
  .lang summary span { display: none; }
  .features, .safety { grid-template-columns: 1fr; }
  .ctas .btn { width: 100%; }
  .hero { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .feature { transition: none; }
}

/* each script with fonts made for it (the default stack lists Chinese fonts first, which would draw Japanese kanji in
   their Chinese forms and has no Hangul); the language links carry their own lang so each name is drawn the same way.
   Mali has Latin, Vietnamese and Thai only, so headings in the other scripts use the body fonts. */
html:lang(ja) { --body: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; --head: var(--body); }
html:lang(ko) { --body: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; --head: var(--body); }
html:lang(zh) { --head: var(--body); }
html:lang(hi) { --body: system-ui, -apple-system, "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif; --head: var(--body); }
html:lang(hi) body, html:lang(th) body { line-height: 1.8; }
html:lang(th) { --body: system-ui, -apple-system, "Thonburi", "Leelawadee UI", "Noto Sans Thai", sans-serif; }
a:lang(ja) { font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", sans-serif; }
a:lang(ko) { font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
a:lang(hi) { font-family: system-ui, -apple-system, "Kohinoor Devanagari", "Nirmala UI", "Noto Sans Devanagari", sans-serif; }
a:lang(th) { font-family: system-ui, -apple-system, "Thonburi", "Leelawadee UI", "Noto Sans Thai", sans-serif; }

/* dating: the section right under the hero */
.love { position: relative; overflow: hidden; padding: 84px 0; background: radial-gradient(60% 80% at 100% 0%, #ffd9df 0%, transparent 70%), radial-gradient(50% 70% at 0% 100%, #ffe6cf 0%, transparent 70%), #fff1f0; }
.love::before { content: "♥ ♥ ♥"; position: absolute; top: 28px; right: 6%; font-size: 26px; letter-spacing: 18px; color: #f4a6b0; opacity: .7; transform: rotate(-12deg); }
.love h2 { color: #b23a48; text-align: left; }
.love .section-lead { text-align: left; margin-left: 0; color: #6b4a46; }
.eyebrow { display: inline-block; margin: 0 0 12px; background: var(--heart); color: #fff; font-weight: 700; font-size: 14px; padding: 5px 14px; border-radius: 999px; }
.love .iconlist .ico { background: #fff; color: var(--heart); }
.love .iconlist p { color: #6b4a46; }
.stages { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; }
.stages li { position: relative; background: #fff; border: 2px solid #f4b7bf; color: #b23a48; font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; }
.stages li:not(:last-child)::after { content: "→"; position: absolute; right: -23px; top: 50%; transform: translateY(-50%); color: #e07a86; }
.love-side { display: grid; gap: 18px; justify-items: center; }
.date-card { width: 100%; max-width: 420px; background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 20px 50px rgba(178, 58, 72, .18); transform: rotate(1.5deg); }
.date-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #b23a48; font-size: 15px; }
.timer { background: #fff1f0; color: var(--heart); border-radius: 999px; padding: 3px 10px; font-variant-numeric: tabular-nums; }
.date-people { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 14px 0 10px; }
.avatar { width: 56px; height: 56px; display: grid; place-items: center; font-size: 32px; border-radius: 50%; background: linear-gradient(#fde3e6, #ffe9d6); box-shadow: inset 0 0 0 3px #fff, 0 3px 10px rgba(178, 58, 72, .15); }
.date-heart { color: var(--heart); font-size: 26px; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } }
.bubble { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; margin: 0 0 8px; }
.bubble.them { background: #f3eee6; border-bottom-left-radius: 6px; }
.bubble.me { background: #e3f0d2; margin-left: auto; border-bottom-right-radius: 6px; }
.date-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 14px; }
.date-actions span { text-align: center; font-weight: 700; padding: 10px; border-radius: 999px; font-size: 15px; }
.date-pass { background: #f3eee6; color: var(--muted); }
.date-like { background: var(--heart); color: #fff; box-shadow: 0 3px 0 #a83a37; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 14px; color: #6b4a46; }
.trust li::before { content: "✓"; color: var(--heart); font-weight: 800; margin-right: 6px; }
.love-side .center { margin: 0; }
.btn-love { background: var(--heart); box-shadow: 0 4px 0 #a83a37; }
.btn-love:hover { background: #e0605c; box-shadow: 0 5px 0 #a83a37; }
.btn-love:active { box-shadow: 0 2px 0 #a83a37; }
.menu .menu-love { color: var(--heart); }
.menu .menu-love:hover { background: #ffe3e6; color: #b23a48; }
@media (max-width: 960px) { .date-card { transform: none; } .love h2, .love .section-lead { text-align: center; margin-left: auto; } .love .wrap > div:first-child { text-align: center; } .love .iconlist { text-align: left; } .stages { justify-content: center; } }
@media (max-width: 560px) { .love { padding: 60px 0; } .love::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .date-heart { animation: none; } }