/* Tappy Hero — modernised promo + playable embed. */

:root {
	--bg: #0c0d0b;
	--ink: #fff5e6;
	--muted: #ffb38a;
	--accent: #ff7a3d;
	--phone-w: 320px;
	--phone-h: 682px;
	--game-w: 320px;
	--game-h: 568px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: 'Verdana', 'Segoe UI', sans-serif;
	min-height: 100%;
	overflow-x: hidden;
}

body {
	background-image: url('content/background_buildings.png');
	background-repeat: repeat-x;
	background-position: top center;
	background-color: var(--bg);
}

a {
	color: var(--muted);
}

/* ---- 1280x865 phone-frame composition (≥1280px viewport) ---- */

.frame {
	width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.top {
	height: 183px;
	background: url('content/top.png') no-repeat top center;
	image-rendering: pixelated;
}

.row {
	display: flex;
	height: 682px;
	width: 1280px;
	justify-content: center;
}

.side {
	height: 682px;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	flex: 0 0 auto;
}

.side.left {
	width: 479px;
	background-image: url('content/left.png');
	position: relative;
}

.side.left::after {
	/* Re-attach the left-side phone bezel rail (cut from left.png into a
	   separate file) on the desktop composition. */
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	width: 30px;
	height: 682px;
	background: url('content/left_bezel.png') no-repeat top left;
	background-size: 30px 682px;
	image-rendering: pixelated;
}

.side.right {
	width: 481px;
	background-image: url('content/right.png');
	position: relative;
}

.side.right::before {
	/* Re-attach the right-side phone bezel rail. */
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 682px;
	background: url('content/right_bezel.png') no-repeat top left;
	background-size: 32px 682px;
	image-rendering: pixelated;
}

.phone {
	width: 320px;
	height: 682px;
	background: url('content/middle.png') no-repeat top left;
	image-rendering: pixelated;
	position: relative;
	flex: 0 0 320px;
}

.game {
	display: block;
	width: var(--game-w);
	height: var(--game-h);
	border: 0;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
}

/* ---- Instructions block ---- */

.instructions {
	max-width: 720px;
	margin: 40px auto 16px;
	padding: 0 24px;
	text-align: center;
}

.instructions h2 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.06em;
}

.instructions p {
	margin: 0 0 8px;
	line-height: 1.55;
	font-size: 15px;
	color: rgba(255, 245, 230, 0.9);
}

.instructions strong {
	color: var(--ink);
}

/* ---- Raving Reviews section ---- */

.reviews {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 24px;
}

.reviews h1 {
	margin: 0 0 24px;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: 0.08em;
}

.review {
	margin: 0 0 28px;
	padding: 8px 8px 8px 56px;
	background: url('content/diamond.png') no-repeat 0 4px / 36px 36px;
	border: 0;
}

.review p {
	margin: 0;
	line-height: 1.55;
	font-size: 16px;
	font-style: italic;
}

.review cite {
	display: block;
	margin-top: 10px;
	padding-right: 16px;
	text-align: right;
	font-style: italic;
	font-size: 14px;
	color: rgba(255, 245, 230, 0.85);
}

footer {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	padding: 32px 24px 48px;
	font-size: 13px;
	color: rgba(255, 245, 230, 0.6);
	text-align: center;
}

footer a {
	color: rgba(255, 245, 230, 0.75);
}

/* ---- Responsive ---------------------------------------------------- */
/* Strategy:
   - ≥1280px: full 1280-wide phone-frame composition (rules above). Only
     middle.png provides the bezel; left.png + right.png are decoration.
   - 401–1279px: hide top + side decorations. Re-attach left_bezel.png and
     right_bezel.png to the phone so it has a complete frame again. Total
     phone composition is 30 + 320 + 32 = 382 wide × 682 tall, scales fluidly.
   - ≤400px: drop the bezel entirely, game fills viewport at 320:568.
   - Landscape on short viewports: scale the phone to fit available height.
   - Smaller typography on narrow screens. */

@media (max-width: 1279px) {
	.frame { width: 100%; max-width: 100%; }
	.top { display: none; }
	.side { display: none; }
	/* Phone bottom must land at body y=865 to match the wide layout's
	   top.png(183) + row(682) = 865, which is exactly where the body bg's
	   curb edge is (pixel-scanned). The minimum 24-px padding bound the
	   phone width: phone_h must be ≤ 865-24=841, so phone_w ≤ 841 × 382/798
	   ≈ 402. Cap 840 in min() = 402 × 2.089. */
	.row {
		width: 100%;
		height: auto;
		padding: max(24px, calc(865px - min((100vw - 32px) * 2.089, 840px))) 16px 24px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* Phone composition layered top-down:
	     top_bezel.png   382x116  (camera + speaker bezel)
	     left_bezel.png   30x682  + middle.png 320x682 + right_bezel.png 32x682
	   Total: 382 x 798. Positions in % use the formula
	     pos_pct = pixel_offset / (container_size - image_size) * 100
	   so middle.png lands at exact pixel x=30, eliminating the 1-px gap.
	   Max width 402px keeps phone bottom (24 padding + 402*798/382 = 864)
	   at the bg's curb edge (y≈865), matching the wide layout exactly. */
	.phone {
		width: min(calc(100% - 32px), 402px);
		height: auto;
		aspect-ratio: 382 / 798;
		flex: 0 0 auto;
		margin: 0 auto;
		position: relative;
		background-image:
			url('content/top_bezel.png'),
			url('content/left_bezel.png'),
			url('content/right_bezel.png'),
			url('content/middle.png');
		background-repeat: no-repeat;
		background-position:
			0 0,
			0 100%,
			100% 100%,
			48.387% 100%;
		background-size:
			100% calc(116 / 798 * 100%),
			calc(30 / 382 * 100%) calc(682 / 798 * 100%),
			calc(32 / 382 * 100%) calc(682 / 798 * 100%),
			calc(320 / 382 * 100%) calc(682 / 798 * 100%);
	}
	.game {
		position: absolute;
		top: calc(116 / 798 * 100%);
		left: calc(30 / 382 * 100%);
		width: calc(320 / 382 * 100%);
		height: calc(568 / 798 * 100%);
	}
}

@media (max-width: 400px) {
	/* Naked iframe: phone aspect 320:568, multiplier 1.775.
	   Continue the bottom-at-y=865 alignment using the naked aspect. */
	.row {
		padding: max(24px, calc(865px - (100vw - 32px) * 1.775)) 16px 24px;
	}
	.phone {
		width: 100%;
		background: none;
		aspect-ratio: 320 / 568;
	}
	.game {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

@media (max-width: 1279px) and (orientation: landscape) and (max-height: 720px) {
	.row { padding: 16px; }
	.phone {
		width: auto;
		height: calc(100dvh - 32px);
		max-width: 100%;
		aspect-ratio: 382 / 798;
	}
}

@media (max-width: 640px) {
	.instructions, .reviews {
		margin: 28px auto;
		padding: 0 18px;
	}
	.instructions h2 { font-size: 20px; }
	.instructions p { font-size: 14px; }
	.reviews h1 { font-size: 24px; letter-spacing: 0.06em; }
	.review {
		padding: 6px 6px 6px 48px;
		background-size: 30px 30px;
		background-position: 0 6px;
	}
	.review p { font-size: 15px; }
	.review cite { font-size: 13px; }
	footer { padding: 24px 16px 32px; font-size: 12px; }
}