/* chomparoo.app: the game's night sky, fonts and gold, phone first. No cookies, no trackers. */
:root{--sky0:#3d6e4c;--sky1:#0f1f17;--panel:rgba(12,20,16,.72);--line:rgba(255,255,255,.12);--text:#f2f4fa;--muted:#b4bcc9;
  --gold:#ffd84d;--gold2:#ffc93d;--goldDark:#a8791b;--accent:#6fd07a;--ink:#3a2600}
*{box-sizing:border-box}
html{background:var(--sky1);color-scheme:dark}
body{margin:0;min-height:100vh;color:var(--text);font:400 17px/1.6 'Fredoka',ui-rounded,system-ui,-apple-system,'Segoe UI',sans-serif;
  background:linear-gradient(180deg,var(--sky0) 0,#1f3a2a 520px,var(--sky1) 1100px) no-repeat,var(--sky1);overflow-x:hidden}
a{color:var(--gold)}a:hover{color:#fff}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:'Lilita One','Fredoka',system-ui,sans-serif;font-weight:400;letter-spacing:.02em;line-height:1.15}
/* the logo exactly as on the game's title screen */
.logo{font-family:'Bungee','Lilita One',system-ui,sans-serif;color:var(--gold);line-height:1;letter-spacing:.02em;text-decoration:none;
  text-shadow:0 1px 0 #e0a92a,0 2px 0 #d49b22,0 3px 0 #c38b1b,0 4px 0 #b07a14,0 5px 0 #9a680e,0 6px 0 #845708,0 12px 18px rgba(0,0,0,.5)}
/* drifting leaves, like the game's Whispering Woods */
.leaves{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.leaves i{position:absolute;top:-20px;width:7px;height:7px;background:#6fd07a;opacity:.55;animation:fall linear infinite}
.leaves i:nth-child(1){left:8%;animation-duration:17s;animation-delay:-3s}.leaves i:nth-child(2){left:22%;animation-duration:21s;animation-delay:-11s;background:#8a6a2e}
.leaves i:nth-child(3){left:41%;animation-duration:19s;animation-delay:-6s}.leaves i:nth-child(4){left:63%;animation-duration:23s;animation-delay:-15s;background:#a5d86a}
.leaves i:nth-child(5){left:79%;animation-duration:18s;animation-delay:-1s}.leaves i:nth-child(6){left:92%;animation-duration:25s;animation-delay:-9s;background:#8a6a2e}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(40px,55vh) rotate(180deg)}100%{transform:translate(-10px,110vh) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.leaves{display:none}.island img{animation:none!important}}
main,footer,.top{position:relative;z-index:1}

/* ---------- home ---------- */
.hero{display:grid;gap:8px;justify-items:center;text-align:center;padding:48px 0 24px}
.hero .logo{font-size:clamp(44px,12.5vw,96px);margin:0}
.tagline{margin:14px 0 0;font-size:clamp(20px,5.2vw,26px);font-weight:600}
.lead{margin:4px 0 0;max-width:520px;color:var(--muted)}
.island{position:relative;width:min(92vw,560px);margin:18px 0 6px}
.island img{width:100%;height:auto;animation:bob 5s ease-in-out infinite;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.island::after{content:'';position:absolute;left:18%;right:18%;bottom:-6px;height:22px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(8px);animation:shadow 5s ease-in-out infinite;z-index:-1}
@keyframes bob{50%{transform:translateY(-10px)}}@keyframes shadow{50%{transform:scaleX(.92);opacity:.7}}
/* the App Store button: Apple's official badge once the app is live, a gold "coming soon" pill before */
.cta{display:grid;justify-items:center;gap:10px;margin-top:10px}
.store img{height:60px;width:auto}
.soon{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:14px;background:var(--gold2);color:var(--ink);text-decoration:none;
  font-family:'Lilita One',system-ui,sans-serif;font-size:20px;letter-spacing:.02em;box-shadow:0 5px 0 var(--goldDark)}
.soon svg{width:24px;height:24px;flex:none}
.small{font-size:14px;color:var(--muted);margin:0}
section,section.wrap{padding-top:44px;padding-bottom:44px}
section h2{font-size:clamp(28px,7vw,40px);text-align:center;margin:0 0 8px}
section p.center{text-align:center;color:var(--muted);margin:0 auto 26px;max-width:560px}
.how{display:grid;gap:14px;grid-template-columns:1fr}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 20px 18px;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.card h3{margin:10px 0 4px;font-size:22px}.card p{margin:0;color:var(--muted)}
.card .ico{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.07)}
.card .ico svg,.card .ico img{width:34px;height:34px}
.num{display:inline-block;min-width:34px;padding:0 8px;border-radius:99px;font-family:'Lilita One',system-ui,sans-serif;font-size:16px;line-height:26px;color:#fff;text-align:center}
.num.blue{background:#2f7fe0}.num.red{background:#e0474d}.num.plus{background:#2f7fe0}.num.x{background:#8a4fe0}
/* the worlds: a row that scrolls sideways on phones, a grid on wide screens */
.worlds{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 14px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.worlds::-webkit-scrollbar{display:none}
.world{flex:0 0 118px;scroll-snap-align:start;text-align:center}
.world img{width:118px;height:118px;border-radius:26px;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.world span{display:block;margin-top:8px;font-size:14px;line-height:1.3;color:var(--muted)}
.final{text-align:center;padding:30px 0 60px}
.final .logo{font-size:clamp(30px,8vw,48px);display:inline-block;margin-bottom:18px}
@media (min-width:760px){
  .hero{padding-top:72px}
  .how{grid-template-columns:repeat(3,1fr)}
  .worlds{flex-wrap:wrap;justify-content:center;overflow:visible;margin:0 auto;padding:4px 0;max-width:940px}
  .world{flex-basis:104px}.world img{width:104px;height:104px;border-radius:24px}
}

/* ---------- text pages (privacy, terms, support) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.top .logo{font-size:26px;text-shadow:0 1px 0 #d49b22,0 2px 0 #b07a14,0 3px 0 #845708,0 6px 10px rgba(0,0,0,.4)}
.top a.back{font-family:'Lilita One',system-ui,sans-serif;text-decoration:none;font-size:16px}
/* text pages are narrower than the home page */
.page .wrap{max-width:800px}
.doc{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 22px;margin:8px 0 40px}
.doc h1{font-size:clamp(30px,8vw,42px);margin:0 0 4px}
.doc h2{font-size:24px;margin:30px 0 6px}.doc h3{font-size:19px;margin:20px 0 4px}
.doc p,.doc li{color:#dfe3ec}.doc .updated{color:var(--muted);margin-top:0}
.doc ul{padding-left:22px}.doc li{margin:4px 0}
.doc .short{background:rgba(255,216,77,.08);border:1px solid rgba(255,216,77,.25);border-radius:14px;padding:12px 16px}
.doc details{border-top:1px solid var(--line);padding:12px 0}.doc details:last-of-type{border-bottom:1px solid var(--line)}
.doc summary{cursor:pointer;font-family:'Lilita One',system-ui,sans-serif;font-size:19px;letter-spacing:.02em;list-style:none}
.doc summary::-webkit-details-marker{display:none}.doc summary::before{content:'+';display:inline-block;width:22px;color:var(--gold)}
.doc details[open] summary::before{content:'\2013'}
.doc details p{margin:8px 0 0 22px}
.mail{display:inline-block;margin-top:6px;padding:12px 20px;border-radius:12px;background:var(--gold2);color:var(--ink);text-decoration:none;font-family:'Lilita One',system-ui,sans-serif;font-size:18px;box-shadow:0 4px 0 var(--goldDark)}
.mail:hover{color:var(--ink)}

/* ---------- 404: the dead end ---------- */
.lost{display:grid;justify-items:center;text-align:center;padding:70px 0 60px;gap:6px}
.lost img{width:150px;filter:drop-shadow(0 14px 14px rgba(0,0,0,.4))}
.lost h1{font-size:clamp(36px,10vw,54px);margin:22px 0 0}
.lost p{color:var(--muted);margin:0 0 18px}

footer{border-top:1px solid var(--line);padding:22px 0 34px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center}
footer a{color:var(--text);text-decoration:none}footer a:hover{color:var(--gold)}