fix: apply border-radius directly on card images for older WebKit

Replace Firefox-specific @supports hack with explicit absolute
centering (left/right/margin-inline: auto) on the image container.

src/lib/components/Card.svelte

@@ -93,6 +93,8 @@ const img_alt = $derived(
 	height: 255px;
 	object-fit: cover;
 	transition: var(--transition-normal);
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
 }
 .blur{
 	filter: blur(10px);

src/lib/components/TitleImgParallax.svelte

@@ -122,6 +122,9 @@
 div:has(.placeholder){
 	position: absolute;
 	top: 0;
+	left: 0;
+	right: 0;
+	margin-inline: auto;
         width: min(1000px, 100dvw);
   	height: max(60dvh,600px);
 	overflow: hidden;
@@ -131,12 +134,6 @@ div:has(.placeholder){
 	opacity: 1;
 }
 
-@supports (-moz-appearance:none) {
-	.placeholder{
-		translate: -50% -50%;
-	}
-}
-
 /* DIALOG */
 dialog{
 	position: relative;

src/routes/[faithLang=faithLang]/[rosary=rosaryLang]/+page.svelte

@@ -829,6 +829,7 @@ onMount(() => {
 	width: 100%;
 	height: auto;
 	display: block;
+	-webkit-tap-highlight-color: transparent;
 }
 
 /* Main content area with prayers */
@@ -962,6 +963,10 @@ onMount(() => {
 	font-family: crosses;
 }
 
+.rosary-visualization :global(.hitboxes) {
+	fill: transparent;
+}
+
 /* Active states */
 .rosary-visualization :global(.active-bead) {
 	fill: var(--nord11) !important;
@@ -1413,6 +1418,33 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
 					{/each}
 					<!-- Final transition: Gloria + Fatima -->
 					<circle cx="25" cy="1640" r="15" class="large-bead" class:active-large-bead={activeSection === 'final_transition'} data-section="final_transition" />
+
+					<!-- Invisible hitboxes for larger tap targets -->
+					<g class="hitboxes">
+						<!-- Cross hitbox -->
+						<rect x="-15" y="-30" width="80" height="80" data-section="cross" />
+
+						<!-- Individual bead hitboxes -->
+						<circle cx="25" cy="80" r="25" data-section="lbead1" />
+						<circle cx="25" cy="110" r="20" data-section="start1" />
+						<circle cx="25" cy="135" r="20" data-section="start2" />
+						<circle cx="25" cy="160" r="20" data-section="start3" />
+						<circle cx="25" cy="200" r="25" data-section="lbead2" />
+
+						<!-- Decade hitboxes (rectangles covering 10 beads each) -->
+						<rect x="-15" y="268" width="80" height="222" data-section="secret1" />
+						<rect x="-15" y="548" width="80" height="222" data-section="secret2" />
+						<rect x="-15" y="828" width="80" height="222" data-section="secret3" />
+						<rect x="-15" y="1108" width="80" height="222" data-section="secret4" />
+						<rect x="-15" y="1388" width="80" height="222" data-section="secret5" />
+
+						<!-- Transition bead hitboxes -->
+						<circle cx="25" cy="520" r="25" data-section="secret1_transition" />
+						<circle cx="25" cy="800" r="25" data-section="secret2_transition" />
+						<circle cx="25" cy="1080" r="25" data-section="secret3_transition" />
+						<circle cx="25" cy="1360" r="25" data-section="secret4_transition" />
+						<circle cx="25" cy="1640" r="25" data-section="final_transition" />
+					</g>
 				</svg>
 			</div>
 		</div>