/* The homepage, in the house style. The game's style.css isn't loaded here (it locks page
   scrolling); build-web.mjs appends its .badge-row rules and the level map's landmark
   animations (re-targeted to .places) to this file. The logo's style is inlined in the page. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif;background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) 1px,transparent 1px);background-size:24px 24px;overflow-x:hidden}
a:focus-visible,.shots:focus-visible{outline:4px solid #d55431;outline-offset:3px}
.eyebrow{font-size:11px;font-weight:bold;letter-spacing:3px}
.tagline{font-weight:bold;line-height:1.16}
.home main{display:block;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));max-width:1120px;margin:0 auto}
.site-top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:0 auto;padding:14px 16px}
.brand{display:flex;align-items:center;gap:10px;font:900 20px/1 "Arial Black","Trebuchet MS",sans-serif;color:var(--ink);text-decoration:none;letter-spacing:-.5px}
.brand img{border-radius:10px;border:2px solid var(--ink)}
.site-top nav{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:flex-end}
.site-top nav a{color:var(--ink);font-weight:bold;font-size:14px;text-underline-offset:4px}
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(28px,6vw,90px);padding:clamp(16px,4vw,48px) 0 clamp(40px,6vw,72px)}
.hero-logo{margin:22px 0 36px;transform:rotate(-4deg);letter-spacing:0;text-shadow:none;font-size:inherit;line-height:1}
.hero-logo .logo{font-size:clamp(46px,8.4vw,96px)}
.hero-copy{min-width:0}
.hero .tagline{font-size:clamp(22px,3vw,30px);margin:22px 0 10px}
.lede{font-size:16px;line-height:1.7;max-width:520px;margin:0 0 22px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta a,.cta button,.get-app .play-link{font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;text-decoration:none;font-weight:bold}
.home .primary{width:auto;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:4px 5px 0 var(--ink);font-family:"Arial Black","Trebuchet MS",sans-serif;letter-spacing:.3px}
.home .primary:hover{transform:translate(-1px,-1px);box-shadow:5px 6px 0 var(--ink)}
.home .secondary{background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:14px}
.install[hidden]{display:none}
.small{font-size:13px;margin:14px 0 0;opacity:.85}
.hero .hero-badges{justify-content:flex-start;margin-top:22px}
.phone{margin:0;width:clamp(230px,27vw,320px);aspect-ratio:9/16;border:3px solid var(--ink);border-radius:30px;overflow:hidden;background:var(--playfield);box-shadow:12px 14px 0 #224e4726;transform:rotate(2deg)}
.phone video{display:block;width:100%;height:100%;object-fit:cover}
.band{padding:clamp(36px,6vw,64px) 0;border-top:2px dashed #224e4733}
.band h2{font:900 clamp(28px,4.4vw,44px)/1.05 "Arial Black","Trebuchet MS",sans-serif;letter-spacing:-1.5px;margin:0 0 26px;text-align:center}
.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0}
.steps li{counter-increment:step;background:var(--cream);border:2px solid var(--ink);border-radius:20px;padding:22px 20px;box-shadow:6px 7px 0 #224e4722;font-size:16px;line-height:1.55}
.steps li strong{display:block;font:900 19px/1.2 "Arial Black","Trebuchet MS",sans-serif;margin-bottom:6px}
.steps li::before{content:counter(step);display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);font:900 20px/1 "Arial Black",sans-serif}
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.features article{background:var(--cream);border:2px solid var(--ink);border-radius:20px;padding:20px;box-shadow:6px 7px 0 #224e4722}
.features h3{margin:0 0 8px;font:900 19px/1.15 "Arial Black","Trebuchet MS",sans-serif;color:var(--highlight);letter-spacing:-.3px}
.features p{margin:0;font-size:15px;line-height:1.6}
.fair{text-align:center;font-weight:bold;margin:26px auto 0;max-width:640px;line-height:1.5}
.shots{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 22px;scrollbar-color:var(--ink) transparent}
.shots figure{flex:0 0 auto;width:clamp(180px,22vw,240px);margin:0;scroll-snap-align:center}
.shots img{display:block;width:100%;height:auto;aspect-ratio:9/16;border:3px solid var(--ink);border-radius:22px;background:var(--playfield);box-shadow:6px 7px 0 #224e4722}
.shots figcaption{text-align:center;font-weight:bold;font-size:14px;margin-top:10px}
.get-app{text-align:center}
.get-app>p{max-width:600px;margin:0 auto 24px;font-size:17px;line-height:1.6}
.get-app .badge-row{margin-bottom:28px}
.creator-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 24px;max-width:1120px;margin:0 auto;padding:16px 20px max(20px,env(safe-area-inset-bottom));font-size:14px;border-top:2px dashed #224e4733}
.creator-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.creator-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:bold;text-underline-offset:4px}
@media(min-width:1000px){.shots{overflow:visible}.shots figure{flex:1 1 0;width:auto}}
@media(max-width:820px){
 .hero{grid-template-columns:1fr;justify-items:center;text-align:center}
 .hero-copy{display:flex;flex-direction:column;align-items:center}
 .cta,.hero .hero-badges{justify-content:center}
 .steps{grid-template-columns:1fr}
 .features{grid-template-columns:repeat(2,minmax(0,1fr))}
 .site-top nav{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.phone{transform:none}.drift,.places *,.player-card canvas{animation:none!important}.drift{display:none}}

/* The game's icon art (branding/icon-foreground.svg, copied to /drift.svg) drifting up behind the hero. */
.drift{position:absolute;inset:0 -16px;pointer-events:none;overflow:hidden;z-index:-1}
.drift i{position:absolute;bottom:-70px;width:var(--s,40px);height:var(--s,40px);opacity:0;background:url(/drift.svg) no-repeat center/contain;animation:paw-drift 15s linear infinite}
.drift i:nth-child(1){left:4%;--s:34px;animation-delay:-2s}.drift i:nth-child(2){left:20%;--s:48px;animation-delay:-9s;animation-duration:18s}
.drift i:nth-child(3){left:40%;--s:28px;animation-delay:-5s}.drift i:nth-child(4){left:57%;--s:42px;animation-delay:-12s;animation-duration:17s}
.drift i:nth-child(5){left:76%;--s:30px;animation-delay:-7s}.drift i:nth-child(6){left:93%;--s:46px;animation-delay:-1s;animation-duration:19s}
@keyframes paw-drift{0%{transform:translateY(0) rotate(-14deg);opacity:0}10%{opacity:.35}85%{opacity:.35}100%{transform:translateY(-110vh) rotate(16deg);opacity:0}}

.intro{text-align:center;max-width:660px;margin:-8px auto 26px;font-size:17px;line-height:1.6}
/* Every level, on its map region's color with its map landmark. */
.places{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:0;margin:0}
.places li{position:relative;background:var(--tint,var(--cream));border:2px solid var(--ink);border-radius:18px;padding:8px 8px 12px;box-shadow:5px 6px 0 #224e4722;text-align:center}
.places svg{display:block;width:100%;height:auto;aspect-ratio:340/290}
.places .num{position:absolute;top:8px;left:8px;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--ink);border-radius:50%;background:#fff;font:900 13px/1 "Arial Black",sans-serif}
.places .num.range{width:auto;padding:0 9px;border-radius:15px;white-space:nowrap}
.places strong{display:block;font-size:14px;line-height:1.2;margin-top:2px}
.places .tag,.player-card .tag{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:bold;letter-spacing:.8px;background:#fff8e8b3;border:1px solid #224e4740}
.places .free .tag,.player-card.free .tag{background:var(--yellow);border-color:var(--ink)}

/* The players, drawn live by home.js on a soft disc in their own colors. Tap one to make it hop. */
.crew{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-bottom:28px}
.player-card{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--cream);border:2px solid var(--ink);border-radius:22px;padding:14px 10px 16px;box-shadow:6px 7px 0 #224e4722;text-align:center;font:inherit;color:inherit;cursor:pointer}
.player-card canvas{width:min(150px,100%);height:auto;aspect-ratio:150/130;border-radius:50%;background:radial-gradient(circle at 50% 62%,var(--c) 0 50%,transparent 51%)}
.player-card.hop canvas{animation:player-hop .45s ease-out}
.player-card strong{font:900 20px/1.1 "Arial Black","Trebuchet MS",sans-serif;margin-top:4px}
.player-card span:not(.tag){font-size:13px}
@keyframes player-hop{40%{transform:translateY(-14px) rotate(-4deg)}}
@media(max-width:1000px) and (min-width:821px){.crew{grid-template-columns:repeat(3,minmax(0,1fr))}.places{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.places{grid-template-columns:repeat(3,minmax(0,1fr))}.crew{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.places,.crew{grid-template-columns:repeat(2,minmax(0,1fr))}.features{grid-template-columns:1fr}}
.places .night strong{color:#fff8de}
.places .boss .tag{background:var(--highlight);color:#fff;border-color:var(--ink)}
.cta .primary span,.get-app .play-link span{margin-left:.45em}

/* Meowstronauts: the page floats in space. A fixed canvas (home.js) draws drifting asteroids, treats,
   comets and UFOs behind everything; text on the open sky is light, cards keep their dark ink. */
html{background:#1f2552}
body.home{background:none;color:#fff4dc}
.space-sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;display:block}
.home .brand,.home .site-top nav a,.home .creator-footer a{color:#fff4dc}
.home .steps li,.home .features article,.home .player-card,.home .places li:not(.night),.home .secondary{color:var(--ink)}
.home .band,.home .creator-footer{border-top-color:#fff4dc33}
.home .drift{display:none}
.home .phone,.home .shots img{box-shadow:10px 12px 0 #0b0e2a66}
.home .steps li,.home .features article,.home .player-card,.home .places li{box-shadow:6px 7px 0 #0b0e2a66}

/* From style.css */
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin:0}
.badge-row figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.badge-row a{display:block}
.badge-row img{display:block;height:48px;width:auto}
.badge-row figure.soon img{opacity:.55}
.badge-row figcaption{font-size:11px;font-weight:bold;letter-spacing:1.5px;text-transform:uppercase}
.places .map-water{animation:map-water-drift 3s ease-in-out infinite alternate}
.places .map-wheel{transform-box:view-box;transform-origin:0 0;animation:map-wheel-turn 14s linear infinite}
.places .map-flag{transform-box:fill-box;transform-origin:left center;animation:map-flag-wave 1.1s ease-in-out infinite alternate}
.places :is(.map-smoke,.map-rock,.map-snow,.map-sway,.map-bob){transform-box:view-box;transform-origin:0 0}
.places .map-smoke{animation:map-smoke 3.3s ease-out infinite}
.places .map-rock{animation:map-rock 2.4s ease-in-out infinite alternate}
.places .map-snow{animation:map-snow 4s linear infinite}
.places .map-sway{animation:map-sway 2.8s ease-in-out infinite alternate}
.places .map-bob{animation:map-bob 1.9s ease-in-out infinite alternate}
.places .map-flutter{animation:map-flutter 2.4s ease-in-out infinite alternate}
.places .map-bubble{animation:map-bubble-rise 3.2s ease-in-out infinite alternate}
.places .map-flame{transform-box:fill-box;transform-origin:top center;animation:map-flame 0.5s ease-in-out infinite alternate}
.places .map-glow{animation:map-glow 2.6s ease-in-out infinite alternate}
.places .map-twinkle{transform-box:fill-box;transform-origin:center;animation:map-twinkle 2.2s ease-in-out infinite alternate}
@keyframes map-water-drift{to{translate:0 5px}}
@keyframes map-wheel-turn{to{rotate:360deg}}
@keyframes map-flag-wave{from{scale:1 .9}to{scale:.62 1.12}}
@keyframes map-smoke{from{translate:0 0;scale:.5;opacity:.9}to{translate:-10px -54px;scale:1.5;opacity:0}}
@keyframes map-rock{from{rotate:-7deg}to{rotate:7deg}}
@keyframes map-snow{from{translate:0 -10px;opacity:0}20%{opacity:1}to{translate:-8px 70px;opacity:0}}
@keyframes map-sway{from{rotate:-6deg}to{rotate:6deg}}
@keyframes map-bob{from{translate:0 4px}to{translate:0 -10px}}
@keyframes map-flutter{to{translate:-10px -8px}}
@keyframes map-bubble-rise{to{translate:0 -12px}}
@keyframes map-flame{to{scale:.85 1.25}}
@keyframes map-glow{from{opacity:.25}to{opacity:.7}}
@keyframes map-twinkle{from{scale:.7;opacity:.55}to{scale:1.1;opacity:1}}