/*
 * crochop.com - one page: the name, the button, and the game itself to play
 * in a 9:16 frame (site/s/game.html is the browser build of Croc Hop, one
 * Classic run after another), with a few of its looks to put on. The page's
 * look is the game's: its lime swamp and soft blobs, its black ink, its
 * display face (Baloo 2 ExtraBold, display.ttf - it has no italic, so the
 * browser slants it, as the game slants its numbers), its green buttons and
 * its gold.
 */
@font-face {
	font-family: "Baloo";
	src: url("/s/font/display.ttf") format("truetype");
	font-weight: 800;
	font-display: swap;
}

:root {
	color-scheme: light;
	--lime: #E4FBC6;
	--score: #252A20;
	--text: #2C3524;
	--muted: #5F6B53;
	--croc: #B5DC54;
	--btn: #13A03A;
	--btn-edge: #0A6624;
	--gold: #F7C948;
	--gold-dk: #CF9412;
	--display: "Baloo", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
	--body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
	--jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	color: var(--text);
	font: 500 16px/1.5 var(--body);
	overflow-x: hidden;
	background-color: var(--lime);
	/* The game's background: soft rounded blobs, a shade either side of the lime. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)'%3E%3Crect x='40' y='60' width='210' height='150' rx='62' fill='%23EDFDD6'/%3E%3Crect x='330' y='20' width='150' height='230' rx='60' fill='%23D7F4B2' opacity='.75'/%3E%3Crect x='540' y='140' width='190' height='140' rx='56' fill='%23EDFDD6'/%3E%3Crect x='90' y='330' width='160' height='200' rx='64' fill='%23D7F4B2' opacity='.7'/%3E%3Crect x='330' y='360' width='240' height='150' rx='60' fill='%23EDFDD6'/%3E%3Crect x='600' y='420' width='120' height='190' rx='50' fill='%23D7F4B2' opacity='.7'/%3E%3Crect x='20' y='590' width='230' height='120' rx='56' fill='%23EDFDD6'/%3E%3Crect x='360' y='580' width='170' height='130' rx='58' fill='%23D7F4B2' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 720px 720px;
}
img { max-width: 100%; display: block; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #000; outline-offset: 3px; border-radius: 10px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; position: relative; }

/* The faint crocs the game's menu has drifting behind it. */
.crocs-back { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.crocs-back img {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: clamp(120px, 14vw, 200px);
	opacity: .18;
	animation: drift 12s ease-in-out infinite;
	animation-delay: var(--d);
}
@keyframes drift { 50% { translate: 18px 10px; } }

/* ------------------------------------------------------------ top */

.top { display: flex; align-items: center; gap: 12px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 1; }
.mark { margin-right: auto; }
.mark img { width: 112px; height: auto; }
.lang { position: relative; }
.lang select {
	appearance: none;
	-webkit-appearance: none;
	font: 800 15px/1 var(--display);
	color: var(--score);
	background: #fff;
	border: 2.5px solid #000;
	border-radius: 999px;
	padding: 9px 32px 7px 14px;
	cursor: pointer;
	box-shadow: 0 3px 0 #000;
}
.lang::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2.5px solid #000;
	border-bottom: 2.5px solid #000;
	transform: translateY(-75%) rotate(45deg);
	pointer-events: none;
}

/* ------------------------------------------------------------ buttons */

.btn {
	--face: #fff;
	--edge: #D3E3BE;
	--fg: var(--score);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font: 800 21px/1 var(--display);
	color: var(--fg);
	background: var(--face);
	border: 3px solid #000;
	border-radius: 999px;
	padding: 17px 28px 15px;
	text-decoration: none;
	cursor: pointer;
	box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -6px 0 var(--edge), 0 6px 0 #000;
	transition: transform .12s ease, box-shadow .12s ease;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -6px 0 var(--edge), 0 8px 0 #000; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 var(--edge), 0 2px 0 #000; }
.btn-go { --face: var(--btn); --edge: var(--btn-edge); --fg: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.btn-gold { --face: var(--gold); --edge: var(--gold-dk); --fg: #2B2206; }
.btn svg { width: 26px; height: 26px; flex: none; }
.btn.mini { display: none; font-size: 15px; padding: 9px 16px 7px; box-shadow: inset 0 -4px 0 var(--edge), 0 3px 0 #000; }

/* Japanese: the display face has no kana, so the game sets it upright in the system face; so does this. */
:lang(ja) .btn, :lang(ja) .shelf-name, :lang(ja) .lang select, :lang(ja) .pill {
	font-family: var(--jp);
	font-weight: 900;
	font-style: normal;
	letter-spacing: 0;
}

/* ------------------------------------------------------------ the stage */

.stage {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "logo play" "cta play" "looks play";
	grid-template-rows: auto auto 1fr;
	column-gap: clamp(32px, 6vw, 96px);
	align-content: center;
	padding-block: clamp(12px, 2vw, 28px);
	z-index: 1;
}
.logo {
	grid-area: logo;
	align-self: end;
	font-family: var(--display);
	font-weight: 800;
	font-style: italic;
	font-size: clamp(84px, 11vw, 168px);
	line-height: .84;
	letter-spacing: -.02em;
	color: var(--score);
	margin: 0 0 30px;
	text-shadow: .045em .06em 0 #A8B99A;
}
.logo span { display: block; }
.cta { grid-area: cta; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.free { margin: 0 0 0 6px; font-size: 15px; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------------------ the game */

.play { grid-area: play; align-self: center; }
/* 9:16, like the phone it is from. */
.card {
	position: relative;
	height: min(calc(100vh - 120px), 780px);
	height: min(calc(100dvh - 120px), 780px);
	min-height: 460px;
	aspect-ratio: 9 / 16;
	border: 4px solid #000;
	border-radius: 30px;
	overflow: hidden;
	background: var(--lime);
	box-shadow: 0 12px 0 rgba(0, 0, 0, .16);
	isolation: isolate;
}
.card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pill {
	position: absolute;
	left: 50%;
	bottom: 7%;
	translate: -50% 0;
	margin: 0;
	white-space: nowrap;
	font: 800 17px/1 var(--display);
	color: var(--score);
	background: #fff;
	border: 3px solid #000;
	border-radius: 999px;
	padding: 12px 18px 10px;
	box-shadow: 0 4px 0 #000;
	pointer-events: none;
	transition: opacity .4s ease;
	animation: breathe 1.6s ease-in-out infinite;
}
.pill.gone { opacity: 0; animation: none; }
@keyframes breathe { 50% { scale: 1.05; } }
.end {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(228, 251, 198, .55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.end[hidden] { display: none; }
.panel {
	width: min(84%, 320px);
	background: #fff;
	border: 4px solid #000;
	border-radius: 28px;
	padding: 20px 18px 22px;
	box-shadow: 0 8px 0 #000;
	display: grid;
	gap: 10px;
	justify-items: center;
	animation: pop .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.final { margin: 0; font: italic 800 78px/1 var(--display); color: var(--score); font-variant-numeric: tabular-nums; }
.stamp {
	margin: -4px 0 0;
	font: 800 16px/1 var(--display);
	letter-spacing: .08em;
	color: #fff;
	background: #FF6A2B;
	border: 2.5px solid #000;
	border-radius: 8px;
	padding: 6px 10px 4px;
	transform: rotate(-4deg);
}
:lang(ja) .stamp { font-family: var(--jp); font-weight: 900; }
.stamp[hidden] { display: none; }
.best { margin: 0 0 4px; font: 800 18px/1 var(--display); color: var(--muted); min-height: 18px; }
.panel .btn { width: 100%; font-size: 19px; padding: 14px 16px 12px; }

/* ------------------------------------------------------------ the looks */

.looks { grid-area: looks; display: grid; gap: 12px; margin-top: 40px; align-content: start; }
.shelf { display: grid; gap: 6px; }
.shelf-name { font: 800 14px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 6px; }
.row button {
	flex: none;
	position: relative;
	width: 48px;
	height: 48px;
	border: 3px solid #000;
	border-radius: 14px;
	background: #fff;
	cursor: pointer;
	padding: 0;
	box-shadow: 0 3px 0 #000;
	overflow: hidden;
	transition: transform .12s;
}
.row button:hover { transform: translateY(-2px); }
.row button[aria-pressed="true"] { background: var(--croc); box-shadow: 0 3px 0 #000, inset 0 0 0 2.5px #fff; }
.row button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.row .crocthumb { width: 74px; }
.row .crocthumb img { inset: auto 4px 11px 4px; width: auto; height: auto; }
.row .none::before, .row .none::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 22px;
	height: 3px;
	background: #9AA58E;
	border-radius: 2px;
	translate: -50% -50%;
	rotate: 45deg;
}
.row .none::after { rotate: -45deg; }

/* ------------------------------------------------------------ foot */

.foot { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid rgba(0, 0, 0, .12); font-size: 14px; color: var(--muted); z-index: 1; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--score); font-weight: 700; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .by { margin-left: auto; }

/* ------------------------------------------------------------ narrow: the name, the game, the looks, the button */

@media (max-width: 860px) {
	.stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "logo" "play" "looks" "cta";
		grid-template-rows: none;
		justify-items: center;
		row-gap: 22px;
	}
	.logo { font-size: clamp(64px, 20vw, 112px); margin: 0; text-align: center; }
	.btn.mini { display: inline-flex; }
	.play { width: min(100%, 420px); }
	.card { width: 100%; height: auto; min-height: 0; }
	.looks { width: min(100%, 420px); margin-top: 0; }
	.row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
	.row::-webkit-scrollbar { display: none; }
	.cta { align-items: center; }
	.free { margin: 0; }
}
@media (max-width: 420px) {
	.card { border-radius: 24px; }
	.foot .by { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}