/* Rico-Shot landing page.
   Dark "facility" backdrop so the live ricochet canvas glows; buttons keep
   the dark-red brand of the game and the Hall of Fame. Bullet tier colors
   match Tuning: green #26e633, blue #3373ff, red #ff3326, gold #ffd91a. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
	background: #141417;
	/* faint floor grid, like the arena tiles */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	color: #e8e8e4;
	font-family: "Verdana", "DejaVu Sans", sans-serif;
	text-align: center;
	overflow-x: hidden;
}

/* Live ricochet background */
#ricochet {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

.hero { padding: 84px 16px 44px; }

h1 {
	font-size: 76px;
	letter-spacing: 4px;
	color: #d51616;
	text-shadow:
		-3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
		0 0 28px rgba(213, 22, 22, 0.55);
	animation: title-glow 3.2s ease-in-out infinite;
}
h1 span {
	display: inline-block;
	animation: letter-drop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
/* stagger the letters bouncing in */
h1 span:nth-child(1) { animation-delay: 0.00s; }
h1 span:nth-child(2) { animation-delay: 0.06s; }
h1 span:nth-child(3) { animation-delay: 0.12s; }
h1 span:nth-child(4) { animation-delay: 0.18s; }
h1 span:nth-child(5) { animation-delay: 0.24s; }
h1 span:nth-child(6) { animation-delay: 0.30s; }
h1 span:nth-child(7) { animation-delay: 0.36s; }
h1 span:nth-child(8) { animation-delay: 0.42s; }
h1 span:nth-child(9) { animation-delay: 0.48s; }

@keyframes letter-drop {
	from { transform: translateY(-60px) scale(1.4); opacity: 0; }
	to   { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes title-glow {
	0%, 100% { text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 0 18px rgba(213, 22, 22, 0.35); }
	50%      { text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 0 0 40px rgba(213, 22, 22, 0.75); }
}

.tagline {
	font-size: 21px;
	margin: 20px 0 30px;
	color: #d6d6d0;
	line-height: 1.5;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.btn {
	display: inline-block;
	background: #400d0d;
	color: #f2e6e6;
	text-decoration: none;
	border-radius: 26px;
	padding: 14px 34px;
	font-size: 19px;
	transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: #801414; transform: translateY(-2px); }

.btn.big {
	background: #b30d0d;
	color: #fff;
	font-size: 24px;
	padding: 16px 44px;
	animation: pulse 1.8s ease-in-out infinite;
}
.btn.big:hover { background: #d51616; transform: translateY(-2px) scale(1.03); }

@keyframes pulse {
	0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(213, 22, 22, 0.55); }
	50%      { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 0 16px rgba(213, 22, 22, 0); }
}

.sub { margin-top: 16px; font-size: 13px; color: #9a9a96; }

/* bullet power-tier legend under the CTA */
.tiers {
	margin-top: 26px;
	font-size: 15px;
	letter-spacing: 1px;
	color: #6f6f6b;
	user-select: none;
}
.tier { font-weight: bold; }
.tier.green { color: #26e633; text-shadow: 0 0 10px rgba(38, 230, 51, 0.6); }
.tier.blue  { color: #3373ff; text-shadow: 0 0 10px rgba(51, 115, 255, 0.6); }
.tier.red   { color: #ff3326; text-shadow: 0 0 10px rgba(255, 51, 38, 0.6); }
.tier.gold  { color: #ffd91a; text-shadow: 0 0 14px rgba(255, 217, 26, 0.8); animation: gold-flicker 1.4s ease-in-out infinite; }
@keyframes gold-flicker {
	0%, 100% { text-shadow: 0 0 8px rgba(255, 217, 26, 0.5); }
	50%      { text-shadow: 0 0 20px rgba(255, 217, 26, 1); }
}

.features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	padding: 24px 16px 40px;
	max-width: 1060px;
	margin: 0 auto;
}

.card {
	background: rgba(34, 34, 39, 0.88);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-top: 3px solid #666;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	padding: 22px 20px;
	width: 320px;
	text-align: left;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;
}
.card.shown { opacity: 1; transform: translateY(0); }
.card:hover { transform: translateY(-4px); }

.card.t-green { border-top-color: #26e633; }
.card.t-blue  { border-top-color: #3373ff; }
.card.t-red   { border-top-color: #ff3326; }
.card.t-green:hover { box-shadow: 0 8px 24px rgba(38, 230, 51, 0.25); }
.card.t-blue:hover  { box-shadow: 0 8px 24px rgba(51, 115, 255, 0.25); }
.card.t-red:hover   { box-shadow: 0 8px 24px rgba(255, 51, 38, 0.25); }

.card h2 { font-size: 19px; color: #f0f0ea; margin-bottom: 10px; }
.card p { font-size: 14.5px; line-height: 1.55; color: #b8b8b4; }

footer { padding: 10px 16px 42px; font-size: 13px; color: #85857f; }
footer p { margin-bottom: 8px; }
/* the licznik line — filled by site.js from api/counter.php */
.visitor-count { margin-top: 10px; font-size: 12px; color: #6f6f68; }
footer a { color: #e05555; }
footer a:hover { color: #ff8080; }

@media (max-width: 480px) {
	h1 { font-size: 46px; }
	.tagline { font-size: 17px; }
	.hero { padding-top: 52px; }
	.card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	h1, h1 span, .btn.big, .tier.gold { animation: none; }
	.card { opacity: 1; transform: none; transition: none; }
	#ricochet { display: none; }
}