/* The marketing site's landing and 404 pages (site/src/pages.mjs). The game's look (mobile/src/ui/tokens.ts): cream
   cards, the one pink action, a hard drop shadow straight down, Jua titles (Fredoka for English), Nunito body with
   Apple SD Gothic Neo / Noto Sans KR for Korean. Section colours follow the store backgrounds (docs/store/backgrounds).
   Light only, like the app. The font files are cut to the site's text at build time (scripts/site-fonts.mjs). */
@font-face{font-family:"Jua";src:url(/assets/jua.4c61507ca9.woff) format("woff");font-display:swap}
@font-face{font-family:"Fredoka";font-weight:600;src:url(/assets/fredoka-600.90ba5fc8f1.woff) format("woff");font-display:swap}
@font-face{font-family:"Nunito";font-weight:700;src:url(/assets/nunito-700.db3f99edbe.woff) format("woff");font-display:swap}
@font-face{font-family:"Nunito";font-weight:800;src:url(/assets/nunito-800.63bbb4e5c7.woff) format("woff");font-display:swap}

:root{
  color-scheme:light;
  --ink:#365579;--body:#4d6f80;--cream:#fffdf7;--rim:#fff;
  --pink:#dc5a86;--pink-rim:#ffadc2;--pink-shadow:#b9466f;
  --navy:#2c3e63;--navy-shadow:#1b2944;
  --display:"Jua","Fredoka",sans-serif;
  --text:"Nunito",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{background:#9beeea;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--body);font:700 17px/1.65 var(--text);word-break:keep-all;overflow-wrap:break-word}
:lang(en){--display:"Fredoka","Jua",sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#b83f6a}
a:focus-visible,.store:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
:lang(en) h1,:lang(en) h2{font-weight:600}
p{margin:0 0 10px}

.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 16px;border-radius:14px;background:var(--cream);color:var(--ink);font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* Header: the app icon, the wordmark, the support link, the language switch. Header, hero and features share one
   1080px column on wide screens, so their left edges line up. */
.top{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1112px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:11px;box-shadow:0 3px 0 rgba(31,110,120,.18)}
.wordmark{font:600 28px/1 "Fredoka",sans-serif;letter-spacing:-.02em;color:#5f72d8;-webkit-text-stroke:6px #fff;paint-order:stroke fill}
.wordmark b{color:#e8558f;font-weight:600}
.top-links{display:flex;align-items:center;gap:6px}
.lang{display:flex;gap:6px}
.help{color:var(--ink);font-size:14px;font-weight:800;padding:9px 8px;line-height:1.2;text-decoration:none}
.lang a{padding:7px 13px;border-radius:14px;background:rgba(255,253,247,.85);border:2px solid var(--rim);color:var(--ink);font-size:14px;font-weight:800;text-decoration:none;line-height:1.2}
.lang a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Hero: the lake sky, Lumi, the headline, the store button, the ground strip. */
.hero{position:relative;overflow:hidden;background:linear-gradient(#9beeea 0%,#b6f6ec 60%,#d5faea 100%);padding:92px 16px 190px}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:260px;background:url(/assets/ground.8a5e924dc6.webp) center bottom/auto 100% repeat-x;-webkit-mask-image:linear-gradient(transparent,#000 45%);mask-image:linear-gradient(transparent,#000 45%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-art{position:relative;width:min(230px,62vw);aspect-ratio:1}
.lumi{width:100%;filter:drop-shadow(0 12px 10px rgba(40,110,100,.22))}
.jelly{position:absolute;width:26%;filter:drop-shadow(0 6px 5px rgba(40,90,110,.2))}
.j-red{left:-22%;top:6%;transform:rotate(-14deg)}
.j-blue{right:-24%;top:30%;width:22%;transform:rotate(12deg)}
.j-purple{left:-8%;bottom:-6%;width:19%;transform:rotate(8deg)}
.hero h1{margin-top:6px;font-size:clamp(52px,14vw,92px);line-height:1.08;color:#fff;-webkit-text-stroke:12px #1f8a80;paint-order:stroke fill;filter:drop-shadow(0 5px 0 rgba(20,90,84,.22))}
:lang(en) .hero h1{font-size:clamp(46px,12vw,84px);-webkit-text-stroke:11px #1f8a80}
.lead{text-wrap:balance;max-width:30em;margin:14px auto 22px;color:#1c5a62;font-size:18px;font-weight:800}
.note{margin:12px 0 0;color:#1c5a62;font-size:15px}

/* The App Store button. "soon" is a label, not a link, until mobile/app.json extra.monet.appStoreId is set: a flat
   outlined pill with no drop shadow, so it does not look pressable. */
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 16px;border-radius:16px;background:var(--navy);color:#fff;text-decoration:none;box-shadow:0 4px 0 var(--navy-shadow);text-align:left}
a.store:hover{background:#344a74}
a.store:active{transform:translateY(2px);box-shadow:0 2px 0 var(--navy-shadow)}
.store-icon{width:26px;height:26px;flex:none}
.store-text{display:flex;flex-direction:column;line-height:1.15}
.store-text small{font-size:12px;font-weight:700;opacity:.9}
.store-text strong{font:400 21px/1.15 var(--display)}
:lang(en) .store-text strong{font-weight:600}
.store.soon{background:rgba(255,253,247,.7);color:var(--navy);border:2px solid rgba(44,62,99,.35);box-shadow:none;padding:8px 18px 8px 14px}

/* Features: copy and a store image, alternating sides on wide screens. */
.feature{padding:56px 16px 64px;background:var(--bg);color:var(--fg)}
.feature-inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px}
.feature-copy{max-width:520px;width:100%}
.pill{display:inline-block;margin:0 0 12px;padding:5px 16px;border-radius:999px;background:#fff;color:var(--accent);font:400 17px/1.4 var(--display);box-shadow:0 3px 0 var(--pill-shadow)}
:lang(en) .pill{font-weight:600}
.feature h2{font-size:clamp(34px,8.5vw,50px);line-height:1.15;color:var(--head);margin:0 0 14px}
.feature p{font-size:17px}
.shot{margin:0;width:min(290px,76vw)}
.shot img{width:100%;border-radius:30px;border:4px solid rgba(255,255,255,.85);box-shadow:0 6px 0 var(--pill-shadow),0 18px 36px rgba(40,50,90,.16)}
.specials{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.specials li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.72);line-height:1.4}
.specials img{width:40px;height:40px;flex:none;object-fit:contain}
.specials b{color:var(--head);font-weight:800}
.specials small{font-size:14px;font-weight:800;color:var(--accent)}
.tone-mint{--bg:linear-gradient(#d5faea,#bff3ea);--fg:#27525c;--head:#1f6e73;--accent:#1d7a72;--pill-shadow:rgba(31,138,128,.2)}
.tone-lilac{--bg:linear-gradient(#cfc9ff,#ead3f7);--fg:#3e3a70;--head:#4b3fa6;--accent:#6a4fc4;--pill-shadow:rgba(90,70,190,.2)}
.tone-peach{--bg:linear-gradient(#fdc2b0,#fedcb9);--fg:#6a3a33;--head:#a2434c;--accent:#b8475a;--pill-shadow:rgba(190,90,80,.22)}
.tone-night{--bg:linear-gradient(#1c3a9e,#4e5bd6);--fg:#eef0ff;--head:#fff;--accent:#2f3fa8;--pill-shadow:rgba(10,20,70,.35)}
.tone-night .shot img{border-color:rgba(255,255,255,.35)}

/* The closing call and the footer. */
.cta{padding:56px 16px 64px;text-align:center;background:var(--cream)}
.cta img{width:150px;margin:0 auto 8px}
.cta h2{font-size:clamp(30px,7vw,42px);color:var(--ink);margin-bottom:20px}
.foot{padding:28px 16px 40px;background:#eef6f3;border-top:3px solid #fff;text-align:center;font-size:14px}
.foot ul{list-style:none;margin:0 auto 8px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;max-width:720px}
.foot a{display:inline-block;padding:11px 4px;color:var(--ink);font-weight:800;line-height:22px}
.foot p{margin:0;color:#5f8397}

/* 404 */
.page-404 .top{position:static;width:100%}
.page-404{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(#9beeea,#d5faea) fixed}
.page-404 .lost{flex:1;width:100%}
.lost{max-width:520px;margin:0 auto;padding:12px 16px 56px;text-align:center}
.lost img{width:170px;margin:0 auto}
.lost section{margin-top:18px;padding:22px 20px;border-radius:26px;background:var(--cream);border:3px solid var(--rim);box-shadow:0 4px 0 rgba(157,132,99,.14)}
.lost h1,.lost h2{font-size:30px;color:#557e9e;margin-bottom:6px}
.button{display:inline-block;margin-top:8px;padding:11px 26px;border-radius:18px;background:var(--pink);border-top:2px solid var(--pink-rim);color:#fff;font:400 20px/1.2 var(--display);text-decoration:none;box-shadow:0 4px 0 var(--pink-shadow)}
:lang(en) .button{font-weight:600}

/* The hero's phone shows on wide screens only (display:none keeps the lazy image from loading on phones). */
.hero-phone{display:none}

/* Narrow phones: the support link waits in the footer below 440px, the wordmark hides below 360px (the icon stays). */
@media (max-width:439px){
  .help{display:none}
}
@media (max-width:359px){
  .wordmark{display:none}
}
@media (min-width:860px){
  .top{max-width:1144px;padding:20px 32px}
  .hero{padding:120px 32px 260px}
  .hero::after{height:400px;background-size:auto 560px} /* larger than the strip: two clumps across 1440, not three */
  .hero-inner{flex-direction:row-reverse;justify-content:space-between;text-align:left;gap:40px}
  .hero-copy{flex:1;max-width:560px}
  .hero-art{width:450px;aspect-ratio:auto;height:500px;flex:none}
  .hero-phone{display:block;position:absolute;right:10px;top:0;width:300px;border-radius:28px;transform:rotate(4deg);box-shadow:0 8px 0 rgba(31,138,128,.18),0 22px 40px rgba(30,90,110,.22)}
  .lumi{position:absolute;left:0;bottom:-10px;width:230px;z-index:1}
  .j-red{left:6%;top:4%;width:70px}
  .j-blue{right:-20px;top:auto;bottom:40px;width:62px;z-index:1}
  .j-purple{left:44%;bottom:-24px;width:52px;z-index:1}
  .lead{margin-left:0}
  .feature{padding:88px 32px}
  .feature-inner{flex-direction:row;justify-content:space-between;gap:72px}
  .feature.flip .feature-inner{flex-direction:row-reverse}
  .feature-copy{flex:1}
  .shot{width:340px;flex:none}
}