.bs-catch-page {
	min-height: calc(100vh - 72px);
	padding: 42px 20px 54px;
	overflow: hidden;
	background:
		radial-gradient(circle at 8% 12%, rgba(255, 47, 145, .20), transparent 25rem),
		radial-gradient(circle at 90% 92%, rgba(200, 71, 255, .20), transparent 24rem),
		#1a0b16;
}

.bs-catch-game { width: min(100%, 760px); min-height: calc(100vh - 168px); margin: 0 auto; color: #fff7f0; }
.bs-catch-screen { display: none; animation: bs-catch-reveal .45s ease both; }
.bs-catch-screen.is-active { display: block; }
.bs-catch-intro, .bs-catch-result { text-align: center; }
.bs-catch-eyebrow { margin: 0 0 16px; color: #ff2f91; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.bs-catch-game h1, .bs-catch-game h2 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: .015em; line-height: .88; text-transform: uppercase; }
.bs-catch-intro h1 { font-size: clamp(72px, 15vw, 136px); }
.bs-catch-intro h1 span, .bs-catch-intro h1 strong { display: block; }
.bs-catch-intro h1 span { color: #fff7f0; }
.bs-catch-intro h1 strong { color: #ff2f91; font-weight: 400; }
.bs-catch-intro-copy { max-width: 570px; margin: 28px auto 20px; color: #e6bccf; font-size: clamp(16px, 2.3vw, 19px); line-height: 1.6; }
.bs-catch-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 29px; }
.bs-catch-rules span { padding: 8px 12px; border: 1px solid rgba(255, 157, 202, .35); border-radius: 999px; background: rgba(70, 25, 58, .60); font-size: 13px; font-weight: 900; }
.bs-catch-rules .bs-catch-avoid { color: #ffcfbe; border-color: rgba(255, 76, 38, .55); }
.bs-catch-button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 55px; padding: 14px 25px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 900; letter-spacing: .04em; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.bs-catch-button:hover, .bs-catch-button:focus-visible { transform: translateY(-3px); }
.bs-catch-button:focus-visible, .bs-catch-controls button:focus-visible { outline: 3px solid #fff7f0; outline-offset: 4px; }
.bs-catch-button-primary { color: #fff7f0; background: var(--gradient); box-shadow: 0 14px 32px rgba(255, 47, 145, .25); }
.bs-catch-button-secondary { color: #fff7f0; border: 1px solid rgba(255,247,240,.35); background: transparent; }
.bs-catch-another-game { display: block; width: fit-content; margin: 20px auto 0; color: #e6bccf; font-size: 13px; font-weight: 800; text-underline-offset: 4px; }
.bs-catch-another-game:hover { color: #fff7f0; }

.bs-catch-status { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.bs-catch-status p { margin: 0; color: #e6bccf; font-size: 13px; font-weight: 800; }
.bs-catch-status strong { display: block; margin-top: 2px; color: #fff7f0; font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: .85; }
.bs-catch-status-label { color: #ff2f91; font-size: 10px; letter-spacing: .14em; }
.bs-catch-canvas-wrap { position: relative; overflow: hidden; border: 2px solid rgba(255, 47, 145, .55); border-radius: 23px; background: #200d1a; box-shadow: 0 20px 54px rgba(0,0,0,.34), inset 0 0 70px rgba(255, 47, 145, .10); }
.bs-catch-canvas-wrap canvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.bs-catch-canvas-note { position: absolute; right: 16px; bottom: 11px; margin: 0; color: rgba(255,247,240,.58); font-size: 11px; font-weight: 700; pointer-events: none; }
.bs-catch-controls { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.bs-catch-controls button { width: 56px; height: 44px; border: 1px solid rgba(255,247,240,.35); border-radius: 12px; color: #fff7f0; background: rgba(70, 25, 58, .60); font: 900 27px/1 Inter, sans-serif; }
.bs-catch-controls button:hover { border-color: #ff2f91; background: rgba(100, 28, 73, .75); }

.bs-catch-result { max-width: 630px; margin-inline: auto; }
.bs-catch-result-sticker { display: grid; width: 70px; height: 70px; margin: 0 auto 18px; border: 2px solid #ff4c26; border-radius: 50%; background: #3a102b; box-shadow: 5px 6px 0 #ff2f91; place-items: center; font-size: 37px; transform: rotate(-12deg); }
.bs-catch-result h2 { color: #ff2f91; font-size: clamp(54px, 9vw, 84px); }
.bs-catch-score-line { margin: 19px 0 10px; color: #fff7f0; font-family: var(--font-hand); font-size: clamp(25px, 4.4vw, 34px); font-weight: 700; }
.bs-catch-score-line strong { color: #ff2f91; }
.bs-catch-result-copy { max-width: 550px; margin: 0 auto 25px; color: #e6bccf; font-size: 15px; line-height: 1.65; }
.bs-catch-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 11px; }

@keyframes bs-catch-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
	.bs-catch-page { padding-top: 28px; }
	.bs-catch-intro h1 { font-size: clamp(70px, 22vw, 103px); }
	.bs-catch-result-actions { display: grid; }
	.bs-catch-button { width: 100%; }
	.bs-catch-canvas-note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bs-catch-game *, .bs-catch-game *::before, .bs-catch-game *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }