/* The front page. Everything on it is something out of the game: its sky behind, its ground
   at the bottom, its trail bar across the top, its carved frame around the result. The
   page is one throw — scrolling is the flight, and home.js moves the pig along the bar. */
@font-face{
	font-family:"Rubik";
	src:url(/fonts/rubik.woff2) format("woff2");
	font-weight:300 900;
	font-display:swap;
}
:root{
	--sky:#52abf3;        /* the top of the game's sky, and of the opening scene */
	--sky-low:#b4dcf6;    /* the same sky near the horizon */
	--ink:#2a2b20;        /* the outline every drawing in the game is inked with */
	--parchment:#fcf1ce;
	--parchment-edge:#e9d9a6;
	--scroll:#f09a45;     /* the game's orange button */
	--scroll-lit:#f8b866;
	--grass:#e9a23a;
	--soil:#652814;
	--soil-deep:#4b1f12;
	--quiet:#5d5a3f;      /* second-rank text on parchment */
	--p:0;                /* how far down the page, 0 to 1: set by home.js */
	--trail:54px;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--trail) + 18px)}
body{
	margin:0;
	padding-top:var(--trail);
	background:linear-gradient(180deg,var(--sky) 0,var(--sky) 520px,var(--sky-low) 100%);
	color:var(--ink);
	font-family:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
	font-size:18px;
	font-weight:500;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* The game's sky, clouds and all, behind the top of the page; lower down it thins into the
   plain blue the rest of the page is flown through. */
body::before{
	content:"";position:absolute;inset:var(--trail) 0 auto 0;height:620px;z-index:-1;
	background:url(/img/sky.webp) 50% 0/auto 100% repeat-x;
	-webkit-mask-image:linear-gradient(#000 50%,transparent);
	mask-image:linear-gradient(#000 50%,transparent);
}
img,video{max-width:100%;height:auto;display:block}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-999px;top:0;background:var(--parchment);padding:10px 14px;z-index:20;font-weight:700}
.skip:focus{left:12px;top:calc(var(--trail) + 8px)}

/* The lettering the game announces a zone in: cream, inked all round, standing on its own
   shadow. Only the page's two announcements wear it. */
.banner{
	margin:0;
	font-weight:900;
	line-height:1.04;
	letter-spacing:.005em;
	color:#fff6da;
	-webkit-text-stroke:.22em var(--ink);
	paint-order:stroke fill;
	text-shadow:0 .09em 0 var(--ink);
}

/* ---- The trail bar ------------------------------------------------------------------- */
.trail{
	position:fixed;inset:0 0 auto 0;z-index:10;
	height:var(--trail);
	display:flex;align-items:center;gap:22px;
	padding:0 max(20px,calc((100vw - 1080px)/2));
	background:var(--parchment);
	border-bottom:3px solid var(--ink);
}
.trail-logo{width:auto;height:32px;flex:none}
.trail-bar{
	position:relative;flex:1;height:16px;margin:0 16px;
	background:#57523f;
	border:3px solid var(--ink);border-radius:99px;
}
.trail-fill{
	position:absolute;inset:0 auto 0 0;
	width:calc(var(--p)*100%);min-width:0;
	background:linear-gradient(var(--scroll-lit),var(--scroll));
	border-radius:99px;
}
.peg{position:absolute;left:var(--at);top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
	border-radius:50%;background:var(--parchment);opacity:.85}
.trail-flag{position:absolute;right:-5px;bottom:100%;width:3px;height:17px;background:var(--ink);border-radius:2px}
.trail-flag::after{content:"";position:absolute;left:3px;top:0;
	border-left:11px solid #c9391f;border-top:5px solid transparent;border-bottom:5px solid transparent}
.trail-pig{
	position:absolute;left:calc(var(--p)*100%);top:50%;
	width:50px;max-width:none;
	transform:translate(-50%,-56%) rotate(-7deg);
	filter:drop-shadow(0 2px 0 rgba(42,43,32,.3));
}
.trail-read{display:flex;align-items:center;gap:20px;flex:none;font-weight:800;font-size:16px;line-height:1}
.trail-zone,.trail-metres{display:flex;align-items:center;gap:8px}
.trail-metres img{width:24px;height:auto}
.trail-metres b{font-weight:800;min-width:4.6em;font-variant-numeric:tabular-nums}
.badge{
	display:inline-block;flex:none;width:30px;aspect-ratio:1;
	background:url(/img/zones.webp) calc(var(--z,0)*100%/7) 0/800% 100% no-repeat;
}
html:not(.js) .trail-read{display:none}

/* ---- The top: the title, and the screen the throw plays on ---------------------------- */
.top{padding:44px 0 0}
.top-words{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:8px 44px;align-items:center}
.logo{width:100%;filter:drop-shadow(0 6px 0 rgba(42,43,32,.22))}
.top .banner{font-size:clamp(34px,5.2vw,62px)}
.pitch{margin-top:16px;max-width:30ch;font-size:clamp(19px,2.1vw,24px);font-weight:600;line-height:1.35}
.when{margin-top:10px;font-weight:700;font-size:16px}
/* Google's own badge, untouched. Its picture has clear space inside it, so the top one is
   pulled left by that space to line up with the words above it. */
.store-badge{display:inline-block;line-height:0;transition:transform .08s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge img{display:block;width:auto;height:76px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.top-words .stores{margin:6px 0 0 -12px}
/* Not a badge and not a link: Apple's badge is for a game that is on the store. It mirrors
   Google's two lines, and the dashed edge says it is not open yet. */
.store-soon{
	display:inline-flex;flex-direction:column;justify-content:center;
	height:50px;padding:0 16px;
	border:2px dashed var(--ink);border-radius:8px;
	background:rgba(252,241,206,.82);
	line-height:1.1;text-align:left;white-space:nowrap;
}
.store-soon small{font-size:11px;font-weight:700}
.store-soon b{font-size:19px;font-weight:800}

.screen{
	position:relative;margin-top:34px;
	border:5px solid var(--ink);border-radius:22px;
	background:var(--soil-deep);
	box-shadow:0 12px 0 rgba(42,43,32,.28);
	overflow:hidden;
	aspect-ratio:16/9;
}
.screen video{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:clamp(14px,3vw,30px);bottom:clamp(14px,3vw,30px);font-size:clamp(17px,2vw,21px)}
.screen.playing .play{display:none}
.under{margin-top:26px;max-width:58ch;font-weight:600}

.btn{
	display:inline-flex;align-items:center;gap:10px;
	font:inherit;font-weight:800;line-height:1.1;
	color:var(--ink);text-decoration:none;
	background:linear-gradient(var(--scroll-lit),var(--scroll));
	border:3px solid var(--ink);border-radius:14px;
	padding:13px 22px 13px 18px;
	box-shadow:0 5px 0 var(--ink);
	cursor:pointer;
}
.btn:hover{background:linear-gradient(#fbc67c,var(--scroll-lit))}
.btn:active{transform:translateY(5px);box-shadow:none}

/* ---- What the game is, a screen at a time --------------------------------------------- */
.rows{padding-top:96px;display:grid;gap:84px}
.row{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);gap:48px;align-items:center}
.row:nth-child(even) .shot{order:2}
.shot{
	width:100%;
	border:4px solid var(--ink);border-radius:18px;
	box-shadow:0 9px 0 rgba(42,43,32,.26);
	background:var(--sky);
}
.say h2{margin:0 0 12px;font-weight:900;font-size:clamp(26px,3vw,36px);line-height:1.1}
.say p{max-width:40ch}
.steps{list-style:none;counter-reset:step;margin:0 0 16px;padding:0;display:grid;gap:10px}
.steps li{counter-increment:step;display:flex;align-items:center;gap:14px;font-weight:700;font-size:20px;line-height:1.25}
.steps li::before{
	content:counter(step);
	flex:none;width:40px;aspect-ratio:1;display:grid;place-items:center;
	font-weight:900;font-size:21px;
	background:var(--parchment);border:3px solid var(--ink);border-radius:50%;
	box-shadow:0 3px 0 var(--ink);
}

/* ---- The trail -------------------------------------------------------------------------- */
.zones{padding-top:112px}
.zones .banner{font-size:clamp(30px,4.6vw,54px)}
.lede{margin-top:20px;max-width:56ch;font-weight:600;font-size:20px;line-height:1.45}
.stops{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 20px}
.stops li{display:grid;justify-items:start;gap:2px}
.stops .badge{width:108px;margin-bottom:8px;filter:drop-shadow(0 5px 0 rgba(42,43,32,.25))}
.stops b{font-weight:800;font-size:19px;line-height:1.2}
.stops span{font-weight:600;font-size:16px;color:#22405a}

/* ---- The landing: the game's own result card, over the ground the throw ends on ------- */
/* The savanna's far mesas and its trees, the two standing strips of the game's backdrop, at
   the sizes the game draws them; the ground under them is the footer. */
.landing{
	--k:1;
	position:relative;
	padding:120px 20px calc(104px*var(--k));
	display:grid;justify-items:center;
}
.landing::before,.landing::after{
	content:"";position:absolute;left:0;right:0;bottom:0;pointer-events:none;
	background-repeat:repeat-x;
}
/* Each strip is tiled beside its own reflection; started off-centre, and each somewhere
   else, so no fold of the mirror sits in the middle of the screen. */
.landing::before{height:calc(335px*var(--k));background-image:url(/img/far.webp);background-size:calc(3600px*var(--k)) 100%;background-position:calc(-520px*var(--k)) 100%}
.landing::after{height:calc(250px*var(--k));background-image:url(/img/near.webp);background-size:calc(2900px*var(--k)) 100%;background-position:calc(-1130px*var(--k)) 100%}
.result{
	position:relative;z-index:1;
	width:min(100%,680px);
	border:51px solid transparent;
	border-image:url(/img/frame.webp) 51 fill/51px stretch;
	padding:0 14px 12px;
	text-align:center;
	filter:drop-shadow(0 10px 0 rgba(42,43,32,.22));
}
.result-best{font-weight:800;font-size:18px;color:#b4501b}
.result-far{font-weight:900;font-size:clamp(54px,9vw,88px);line-height:1.02;font-variant-numeric:tabular-nums}
.result-old{font-weight:700;font-size:16px;color:#b4501b}
.result-say{margin:18px auto 0;max-width:36ch;font-weight:600}
.result-when{margin:14px auto 14px;max-width:44ch;font-size:16px;color:var(--quiet)}
.result .stores{justify-content:center;margin-bottom:6px}
.result-go{display:flex;justify-content:center}

.ground{
	--k:1;
	min-height:calc(245px*var(--k));
	padding:calc(92px*var(--k)) 0 40px;
	color:#fdebc8;font-size:16px;font-weight:600;
	text-shadow:0 1px 0 rgba(30,10,4,.7);
	background:
		linear-gradient(rgba(54,20,9,0) calc(52px*var(--k)),rgba(48,17,8,.78) calc(190px*var(--k))),
		url(/img/ground.webp) calc(-310px*var(--k)) 0/calc(1800px*var(--k)) calc(245px*var(--k)) repeat-x,
		#3a1409;
}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:12px;font-weight:700}
.foot-links a{text-decoration-thickness:2px;text-underline-offset:4px}
.foot-links a:hover{color:#fff}
.foot-legal{margin-top:4px;font-size:13px;opacity:.8}

/* ---- Narrower screens ------------------------------------------------------------------- */
@media (max-width:1000px){
	.trail-zone{display:none}
}
@media (max-width:820px){
	body{font-size:17px}
	.top{padding-top:28px}
	.top-words{grid-template-columns:1fr;gap:14px}
	.logo{width:min(340px,78%)}
	.pitch{margin-top:12px;max-width:34ch}
	.screen{margin-top:26px;border-width:4px;border-radius:16px;box-shadow:0 8px 0 rgba(42,43,32,.28)}
	/* Uga stands where the button would: on a narrow screen it goes up into the sky. */
	.play{top:14px;bottom:auto;left:14px}
	.rows{padding-top:64px;gap:56px}
	.row{grid-template-columns:1fr;gap:20px}
	.row:nth-child(even) .shot{order:0}
	.zones{padding-top:76px}
	.stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
	.stops .badge{width:84px}
	.landing,.ground{--k:.64}
	.landing{padding-top:84px;padding-left:16px;padding-right:16px}
	.result{border-width:38px;border-image-width:38px;padding:0 4px 8px}
}
@media (max-width:560px){
	:root{--trail:48px}
	.wrap{padding-inline:16px}
	.trail{gap:10px;padding:0 14px}
	.trail-logo{display:none}
	.trail-bar{margin:0 14px 0 20px;height:14px}
	.trail-pig{width:42px}
	.trail-read{font-size:15px}
	.trail-metres b{min-width:4.2em}
	.store-badge img{height:66px}
	.store-soon{height:44px;padding:0 12px}
	.store-soon b{font-size:17px}
	.top-words .stores{margin-left:-10px}
}
@media (prefers-reduced-motion:no-preference){
	html{scroll-behavior:smooth}
	.btn{transition:transform .06s,box-shadow .06s}
}