/* BOOK module (owner 16 Oct 2026): the shared look of every "book style" page (book.js + web/modules/book.blade.php).
   Started as an exact copy of tirth-yatra.css, which temples still use until they move here. */
/* तीर्थ यात्रा (experimental): the temple book (tirth-yatra.js) and the India map of all yatras.
   Palette: temple maroon, cream paper, gold. */
.sb-ty-page { width: 100%; max-width: var(--sb-app-width, 440px); margin: 0 auto; padding: 0 0 24px; } /* always the app column, never the browser width */
.sb-ty, .sb-tm { margin: 14px 12px 0; }

/* ── the closed book ── */
.sb-ty-cover {
	position: relative;
	overflow: hidden;
	border: 2px solid #d9a441;
	border-radius: 20px;
	background: linear-gradient(160deg, #7a1f12, #4a120a);
	box-shadow: 0 10px 24px rgba(74, 18, 10, .28), inset 0 0 0 5px rgba(242, 201, 76, .18);
	color: #fff3d6;
}
.sb-ty-cover[hidden] { display: none; }
.sb-ty-cover-art { position: relative; height: 300px; overflow: hidden; border-bottom: 2px solid #d9a441; background: #2e0d07; }
.sb-ty-cover-art svg, .sb-ty-cover-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-ty-cover-body { padding: 16px 18px 18px; text-align: center; }
.sb-ty-cover-kicker { display: inline-block; margin-bottom: 6px; color: #f2c94c; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.sb-ty-cover h2 { margin: 0 0 8px; color: #fff; font-size: 24px; font-weight: 800; }
.sb-ty-cover p { margin: 0 0 14px; color: #f4dfc0; font-size: 14px; line-height: 1.6; }
.sb-ty-cover small { display: block; margin-top: 10px; color: #e7c98f; font-size: 12px; }
/* story cover: the story's own game, a quieter second button under "start" */
.sb-ty-game-link {
	display: table;
	margin: 12px auto 0;
	padding: 9px 20px;
	border: 1.5px solid #d9a441;
	border-radius: 999px;
	background: rgba(255, 213, 107, .08);
	color: #ffd56b;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none;
}
.sb-ty-game-link:active { background: rgba(255, 213, 107, .2); }
.sb-ty-start {
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, #f2a93b);
	box-shadow: 0 4px 0 #b06d12, 0 8px 18px rgba(0, 0, 0, .25);
	color: #4a120a;
	font: inherit;
	font-size: 16.5px;
	font-weight: 800;
	cursor: pointer;
}
.sb-ty-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #b06d12; }

/* ── the open book: full screen inside the app column ── */
body.sb-ty-reading .sb-ty-page > .sb-intro,
body.sb-ty-reading .sb-bottom-nav { display: none !important; }
html:has(body.sb-ty-reading), body.sb-ty-reading { overflow: hidden; overscroll-behavior: none; }
.sb-ty-book[hidden] { display: none; }
.sb-ty-book {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 40;
	display: flex;
	flex-direction: column;
	width: min(100%, var(--sb-app-width, 440px));
	height: 100dvh;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 0, #6a1b10, #2a0a05 70%);
}
.sb-ty-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.sb-ty-close, .sb-ty-switch {
	flex: 0 0 auto;
	height: 34px;
	padding: 0 11px;
	border: 1px solid rgba(242, 201, 76, .45);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff3d6;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.sb-ty-close { width: 34px; padding: 0; }
.sb-ty-switch.is-on { background: #f2c94c; border-color: #f2c94c; color: #4a120a; }
.sb-ty-switch--icon { width: 34px; padding: 0; }
.sb-ty-switch[hidden] { display: none; }
.sb-ty-progress { flex: 1 1 auto; min-width: 0; }
.sb-ty-progress span { display: block; overflow: hidden; color: #f2c94c; font-size: 12.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.sb-ty-progress i { display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 4px; background: rgba(255, 255, 255, .15); }
.sb-ty-progress b { display: block; width: 0; height: 100%; border-radius: 4px; background: #f2c94c; transition: width .5s ease; }

/* the pages: a stack, the top one turns away like paper */
.sb-ty-pages { position: relative; flex: 1 1 auto; margin: 0; perspective: 1700px; touch-action: pan-y; } /* edge to edge: the page is the full width of the device */
.sb-ty-leaf {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0;
	background: linear-gradient(90deg, #e9d7b4 0, #fbf3e1 4%, #fdf8ec 50%, #f6ead0 100%);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .35);
	transform-origin: left center;
	backface-visibility: hidden;
}
.sb-ty-leaf::after { /* the spine's shade */
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	background: linear-gradient(90deg, rgba(90, 50, 20, .28), rgba(90, 50, 20, 0));
	pointer-events: none;
}
.sb-ty-leaf.is-turning-out { z-index: 3; animation: sbTyTurnOut .72s cubic-bezier(.45, .05, .35, 1) forwards; }
.sb-ty-leaf.is-turning-in { z-index: 3; animation: sbTyTurnIn .72s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes sbTyTurnOut {
	0% { transform: rotateY(0); filter: brightness(1); }
	100% { transform: rotateY(-105deg); filter: brightness(.55); }
}
@keyframes sbTyTurnIn {
	0% { transform: rotateY(-105deg); filter: brightness(.55); }
	100% { transform: rotateY(0); filter: brightness(1); }
}

.sb-ty-art { position: relative; flex: 0 0 55%; overflow: hidden; border-bottom: 3px double #c9955a; background: #2e0d07; }
.sb-ty-art > svg, .sb-ty-art > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a painting fills the picture area at full width; a tap shows the whole painting (.sb-ty-viewer) */
.sb-ty-art > img.sb-ty-art-img, .sb-ty-cover-art > img.sb-ty-art-img { object-position: 50% 42%; cursor: zoom-in; }
.sb-ty-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff3d6; font-size: 15px; pointer-events: none; }
.sb-ty-viewer { position: fixed; top: 0; left: 50%; z-index: 60; display: flex; align-items: center; justify-content: center; width: min(100%, var(--sb-app-width, 440px)); height: 100dvh; transform: translateX(-50%); background: rgba(10, 4, 2, .94); cursor: zoom-out; }
.sb-ty-viewer[hidden] { display: none; }
.sb-ty-viewer img { display: block; max-width: 100%; max-height: 100dvh; object-fit: contain; }
.sb-ty-viewer span { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff3d6; font-size: 18px; }
.sb-ty-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sb-ty-mapcard {
	position: absolute;
	top: 10px;
	left: 26px;
	width: 112px;
	padding: 4px 4px 6px;
	border: 1px solid #c9955a;
	border-radius: 10px;
	background: rgba(253, 248, 236, .92);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	text-align: center;
	animation: sbTyPop .6s .2s both;
}
.sb-ty-mapcard span { display: block; color: #7a1f12; font-size: 10.5px; font-weight: 800; line-height: 1.3; }
.sb-ty--flip .sb-ty-mapcard { top: 64px; left: 12px; } /* book module (temples): below the header's back button, not under it */
.sb-ty-map { display: block; width: 100%; height: auto; }
.sb-ty-pin-ring { transform-box: fill-box; transform-origin: center; animation: sbTyPin 1.6s ease-out infinite; }
@keyframes sbTyPin { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
@keyframes sbTyPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.sb-ty-text { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 12px 18px 18px 24px; -webkit-overflow-scrolling: touch; }
.sb-ty-chap { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: #7a1f12; color: #f2c94c; font-size: 11.5px; font-weight: 800; }
.sb-ty-text h2 { margin: 2px 0 8px; color: #5a1a0e; font-size: 20px; font-weight: 800; line-height: 1.3; }
.sb-ty-beat { margin: 0 0 9px; color: #3a2416; font-size: 15.5px; line-height: 1.7; animation: sbTyInk .7s ease both; }
.sb-ty-beat b { color: #8a2410; }
@keyframes sbTyInk { 0% { opacity: 0; transform: translateY(6px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
.sb-ty-folio { position: absolute; right: 14px; bottom: 6px; color: #a5835a; font-size: 11px; font-weight: 700; }

/* ── stories style (a painted page): the painting fills the page, the words on a panel over it ── */
.sb-ty-leaf.is-story { background: #1a0805; }
.sb-ty-leaf.is-story::after { display: none; }
.is-story .sb-ty-art { position: absolute; inset: 0; flex: none; border: 0; }
.is-story .sb-ty-art > img.sb-ty-art-img { object-position: 50% 40%; }
.is-story .sb-ty-zoom { display: none; }
.is-story .sb-ty-text {
	position: absolute;
	z-index: 5;
	right: 0;
	bottom: 0;
	left: 0;
	max-height: 44%;
	padding: 22px 18px 26px;
	border-radius: 20px 20px 0 0;
	background: rgba(253, 248, 236, .94);
	box-shadow: 0 -10px 30px rgba(0, 0, 0, .38);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: max-height .35s ease, transform .35s ease;
}
.is-story .sb-ty-text.is-open { max-height: 86%; }
.is-story .sb-ty-text.is-peek { transform: translateY(calc(100% - 30px)); }
.sb-ty-grab { position: absolute; top: 0; left: 50%; width: 64px; height: 22px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: pointer; }
.sb-ty-grab::before { content: ''; display: block; width: 40px; height: 4px; margin: 9px auto 0; border-radius: 4px; background: #c9a77d; }
.is-story .sb-ty-folio { z-index: 6; }

/* timeline */
.sb-ty-timeline { margin: 4px 0 0; padding: 0 0 0 14px; border-left: 2px dashed #c9955a; list-style: none; }
.sb-ty-timeline li { position: relative; margin: 0 0 10px; padding-left: 8px; opacity: .14; transition: opacity .5s ease, transform .5s ease; transform: translateX(-6px); }
.sb-ty-timeline li.is-on { opacity: 1; transform: none; }
.sb-ty-timeline li::before { content: ''; position: absolute; top: 6px; left: -21px; width: 12px; height: 12px; border: 2px solid #fdf8ec; border-radius: 50%; background: #c9955a; }
.sb-ty-timeline li.is-on::before { background: #e2541e; box-shadow: 0 0 0 4px rgba(226, 84, 30, .2); }
.sb-ty-year { display: inline-block; margin-bottom: 2px; padding: 1px 8px; border-radius: 6px; background: #f2c94c; color: #4a120a; font-size: 12.5px; }
.sb-ty-timeline span { display: block; color: #3a2416; font-size: 14.5px; line-height: 1.6; }

/* facts: flip cards */
.sb-ty-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 4px; }
.sb-ty-fact { height: 128px; padding: 0; border: 0; background: none; font: inherit; perspective: 700px; cursor: pointer; }
.sb-ty-fact-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s ease; transform-style: preserve-3d; }
.sb-ty-fact.is-flipped .sb-ty-fact-in { transform: rotateY(180deg); }
.sb-ty-fact-front, .sb-ty-fact-back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 1px solid #c9955a;
	border-radius: 12px;
	backface-visibility: hidden;
	line-height: 1.45;
}
.sb-ty-fact-front { background: linear-gradient(160deg, #7a1f12, #5a160b); color: #fff3d6; font-size: 14px; font-weight: 800; }
.sb-ty-fact-front i { margin-bottom: 4px; font-size: 30px; font-style: normal; }
.sb-ty-fact-back { background: #fff8e6; color: #3a2416; font-size: 12.5px; transform: rotateY(180deg); }
.sb-ty-fact-back b { color: #8a2410; }

/* visit */
.sb-ty-visit { margin: 4px 0 0; padding: 0; list-style: none; }
.sb-ty-visit li { display: flex; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid #e3cba4; border-radius: 12px; background: #fff8e6; opacity: .15; transition: opacity .5s ease; }
.sb-ty-visit li.is-on { opacity: 1; }
.sb-ty-visit i { font-size: 22px; font-style: normal; }
.sb-ty-visit span { color: #3a2416; font-size: 13.5px; line-height: 1.55; }
.sb-ty-visit b { display: block; color: #7a1f12; font-size: 14px; }

/* seva */
.sb-ty-seva { margin-top: 6px; text-align: center; }
.sb-ty-seva-btn {
	padding: 14px 26px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, #f2a93b);
	box-shadow: 0 4px 0 #b06d12, 0 8px 16px rgba(176, 109, 18, .3);
	color: #4a120a;
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
	touch-action: manipulation;
	animation: sbTyBreath 1.8s ease-in-out infinite;
}
.sb-ty-seva-btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 0 #b06d12; }
.sb-ty-seva-btn:disabled { opacity: .55; animation: none; }
.sb-ty-seva-btn small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(74, 18, 10, .12); font-size: 13px; }
.sb-ty-seva-done { margin: 12px 0 0; color: #8a2410; font-size: 16px; font-weight: 800; animation: sbTyPop .5s both; }
.sb-ty-seva-done[hidden] { display: none; }
@keyframes sbTyBreath { 50% { box-shadow: 0 4px 0 #b06d12, 0 0 0 8px rgba(242, 169, 59, .18); } }

/* end page */
.sb-ty-line { margin: 6px 0 12px; padding: 10px 12px; border-left: 3px solid #d9a441; border-radius: 8px; background: #fff3d6; color: #5a1a0e; font-size: 15px; font-weight: 700; line-height: 1.7; }
.sb-ty-end-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.sb-ty-end-actions button { flex: 1 1 0; padding: 11px 8px; border: 0; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.sb-ty-share { background: #1f9d55; color: #fff; }
.sb-ty-again { background: #7a1f12; color: #f2c94c; }
.sb-ty-more { margin: 0 0 6px; color: #7a1f12; font-size: 13px; font-weight: 800; }
.sb-ty-others { display: grid; gap: 8px; }
.sb-ty-others a { display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 8px 10px; border: 1px solid #e3cba4; border-radius: 12px; background: #fff8e6; color: #3a2416; text-decoration: none; }
.sb-ty-others i { grid-row: span 2; font-size: 24px; font-style: normal; }
.sb-ty-others b { color: #7a1f12; font-size: 14.5px; }
.sb-ty-others small { color: #7b5b3a; font-size: 12px; }

/* bottom: back + next */
.sb-ty-nav { display: flex; gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.sb-ty-prev {
	flex: 0 0 52px;
	height: 50px;
	border: 1px solid rgba(242, 201, 76, .5);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #f2c94c;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.sb-ty-prev:disabled { opacity: .3; }
.sb-ty-next {
	flex: 1 1 auto;
	height: 50px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, #f2a93b);
	box-shadow: 0 4px 0 #b06d12;
	color: #4a120a;
	font: inherit;
	font-size: 17px;
	font-weight: 800;
	cursor: pointer;
}
.sb-ty-next[hidden] { visibility: hidden; display: block; }
.sb-ty-next:active { transform: translateY(2px); box-shadow: 0 2px 0 #b06d12; }

/* moving bits inside the pictures */
.sb-ty-star { animation: sbTyTwinkle 2.6s ease-in-out infinite; }
@keyframes sbTyTwinkle { 50% { opacity: .25; } }
.sb-ty-sun { transform-box: fill-box; transform-origin: center; animation: sbTyGlow 4s ease-in-out infinite; }
@keyframes sbTyGlow { 50% { transform: scale(1.08); opacity: .85; } }
.sb-ty-cloud { animation: sbTyDrift linear infinite; }
@keyframes sbTyDrift { 0% { transform: translateX(-60px); } 100% { transform: translateX(460px); } }
.sb-ty-wave { animation: sbTyWave 4s ease-in-out infinite; }
@keyframes sbTyWave { 50% { transform: translateX(14px); opacity: .2; } }
.sb-ty-bob { animation: sbTyBob 3.2s ease-in-out infinite; }
@keyframes sbTyBob { 50% { transform: translateY(3px) rotate(1deg); } }
.sb-ty-flame { transform-box: fill-box; transform-origin: center bottom; animation: sbTyFlicker .9s ease-in-out infinite alternate; }
@keyframes sbTyFlicker { 0% { transform: scale(1, 1); } 100% { transform: scale(.85, 1.18); } }
.sb-ty-flag { transform-box: fill-box; transform-origin: left center; animation: sbTyFlag 1.4s ease-in-out infinite alternate; }
@keyframes sbTyFlag { 100% { transform: scaleX(.8) skewY(-6deg); } }
.sb-ty-birds { animation: sbTyBirds 18s linear infinite; }
@keyframes sbTyBirds { 0% { transform: translate(-80px, 20px); } 100% { transform: translate(420px, -20px); } }
.sb-ty-pulse { transform-box: fill-box; transform-origin: center; animation: sbTyPulse 2.4s ease-in-out infinite; }
@keyframes sbTyPulse { 50% { transform: scale(1.12); opacity: .5; } }
.sb-ty-rise { animation: sbTyRise 6s ease-in-out infinite; }
@keyframes sbTyRise { 0% { transform: translateY(60px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }
.sb-ty-sink { animation: sbTySink 6s ease-in-out infinite; }
@keyframes sbTySink { 0% { transform: translateY(-60px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
.sb-ty-merge-l { animation: sbTyMergeL 5s ease-in-out infinite alternate; }
.sb-ty-merge-r { animation: sbTyMergeR 5s ease-in-out infinite alternate; }
@keyframes sbTyMergeL { 100% { transform: translateX(28px); opacity: .55; } }
@keyframes sbTyMergeR { 100% { transform: translateX(-28px); } }
.sb-ty-fly { animation: sbTyFly 7s ease-in-out infinite alternate; }
@keyframes sbTyFly { 0% { transform: translate(-60px, 10px); } 100% { transform: translate(120px, -6px); } }
.sb-ty-parda-l, .sb-ty-parda-r { transition: transform .9s ease; }
.sb-ty-parda.is-open .sb-ty-parda-l { transform: translateX(-140px); }
.sb-ty-parda.is-open .sb-ty-parda-r { transform: translateX(140px); }
.sb-ty-tilak { opacity: 0; transition: opacity 1.4s ease; }
.sb-ty-tilak.is-on { opacity: 1; }
.sb-ty-drop { position: absolute; font-size: 26px; line-height: 1; will-change: transform; }
.sb-ty-drop--fall { animation: sbTyFall 1.6s ease-in forwards; }
@keyframes sbTyFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(150px) rotate(40deg); opacity: 0; } }
.sb-ty-drop--petal { font-size: 20px; animation: sbTyPetal 2.2s ease-in forwards; }
@keyframes sbTyPetal { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(30px, 320px) rotate(220deg); opacity: .2; } }

.sb-ty-placed { animation: sbTyPlace .5s ease-out both; }
@keyframes sbTyPlace { 0% { opacity: 0; } 100% { opacity: 1; } }
.sb-ty-glint { animation: sbTyGlint 1.4s ease-out forwards; }
@keyframes sbTyGlint { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(30px); } }
.sb-ty-aarti { position: absolute; font-size: 30px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255, 190, 70, .9)); }
.sb-ty-aarti img { display: block; width: 56px; height: auto; }
/* the puja page's own offerings: falling, and the small heap that stays at the deity's feet */
.sb-ty-drop--img { width: 34px; height: auto; }
.sb-ty-heap { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sb-ty-placed-img { position: absolute; width: 30px; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); animation: sbTyPlace .35s ease-out; }
@keyframes sbTyPlace { from { opacity: 0; } to { opacity: 1; } }
.sb-ty-spin { transform-box: fill-box; transform-origin: center; animation: sbTySpin 4s linear infinite; }
@keyframes sbTySpin { 100% { transform: rotate(360deg); } }
.sb-ty-snow { animation: sbTySnow linear infinite; }
@keyframes sbTySnow { 0% { transform: translate(0, 0); } 100% { transform: translate(-30px, 320px); } }
.sb-ty-swing { animation: sbTySwing 2.6s ease-in-out infinite alternate; }
@keyframes sbTySwing { 0% { transform: rotate(-14deg); } 100% { transform: rotate(14deg); } }
.sb-ty-drop--oil { filter: sepia(1) saturate(3) hue-rotate(10deg) brightness(.6); }
.sb-ty-maplink { display: block; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #c9955a; border-radius: 12px; background: #fff3d6; color: #7a1f12; font-size: 14.5px; font-weight: 800; text-align: center; text-decoration: none; }
.sb-ty-note { color: #7b5b3a; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	.sb-ty-leaf.is-turning-out, .sb-ty-leaf.is-turning-in { animation-duration: .01s; }
	.sb-ty-cloud, .sb-ty-birds, .sb-ty-wave, .sb-ty-bob, .sb-ty-rise, .sb-ty-sink { animation: none; }
}

/* ── the India map of all yatras ── */

.sb-tm-mapbox { position: relative; overflow: hidden; border: 2px solid #d9a441; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fdf3dc, #f1dcb2); box-shadow: 0 8px 20px rgba(74, 18, 10, .15); }
.sb-tm-map { display: block; width: 100%; height: auto; touch-action: manipulation; }
.sb-tm-pin { cursor: pointer; }
.sb-tm-pin circle.sb-tm-dot { transition: r .2s ease; }
.sb-tm-pin.is-on circle.sb-tm-dot { r: 7; }
.sb-tm-pin-ring { transform-box: fill-box; transform-origin: center; animation: sbTyPin 2s ease-out infinite; }
.sb-tm-near { margin-top: 12px; padding: 10px 12px; border: 1px solid #e3cba4; border-radius: 16px; background: #fff8e6; }
.sb-tm-near[hidden] { display: none; }
.sb-tm-near b { display: block; margin-bottom: 8px; color: #7a1f12; font-size: 14px; }
.sb-tm-near button { display: inline-block; margin: 0 6px 6px 0; padding: 7px 12px; border: 1px solid #c9955a; border-radius: 999px; background: #fff; color: #5a1a0e; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.sb-tm-card { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; margin-top: 12px; padding: 12px 14px; border: 1px solid #e3cba4; border-radius: 16px; background: #fff8e6; }
.sb-tm-card[hidden] { display: none; }
.sb-tm-card i { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #7a1f12; font-size: 28px; font-style: normal; }
.sb-tm-card b { display: block; color: #7a1f12; font-size: 17px; }
.sb-tm-card small { display: block; color: #7b5b3a; font-size: 12.5px; }
.sb-tm-card p { margin: 4px 0 8px; color: #3a2416; font-size: 13.5px; line-height: 1.55; }
.sb-tm-card a { display: inline-block; padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, #ffd56b, #f2a93b); color: #4a120a; font-size: 14px; font-weight: 800; text-decoration: none; }
.sb-tm-hint { margin: 8px 0 0; color: #7b5b3a; font-size: 12.5px; text-align: center; }
.sb-tm-list-title { margin: 18px 0 8px; color: #7a1f12; font-size: 16px; font-weight: 800; }
.sb-tm-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sb-tm-filters button { padding: 6px 12px; border: 1px solid #e3cba4; border-radius: 999px; background: #fff8e6; color: #5a1a0e; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sb-tm-filters button.is-on { background: #7a1f12; border-color: #7a1f12; color: #f2c94c; }
.sb-tm-list { display: grid; gap: 8px; }
.sb-tm-list a { display: grid; grid-template-columns: 40px 1fr; align-items: center; padding: 10px 12px; border: 1px solid #e3cba4; border-radius: 14px; background: #fff8e6; color: #3a2416; text-decoration: none; }
.sb-tm-list a[hidden] { display: none; }
.sb-tm-list i { grid-row: span 2; font-size: 26px; font-style: normal; }
.sb-tm-list b { color: #7a1f12; font-size: 15px; }
.sb-tm-list small { color: #7b5b3a; font-size: 12.5px; }

/* paath books: our Azure audio module (web.modules.paath_audio_player) - on the cover and, compact, in the top bar */
.sb-ty-paath-audio { display: flex; justify-content: center; margin-top: 10px; }
.sb-ty-paath-audio:empty { display: none; }
.sb-ty-paath-audio--top { margin: 0; flex: 0 0 auto; }
.sb-ty-paath-audio--top .sb-paath-voice-picker { display: none; }

/* story books (भक्ति कहानियाँ): a moving scene over the page's painting (story-scene.js) */
.sb-ty-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
/* the stories list (/kahani) */
.sb-st-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 14px 24px; }
.sb-st-card { position: relative; display: block; aspect-ratio: 9 / 13; border-radius: 16px; overflow: hidden; background: #2e0d07; text-decoration: none; box-shadow: 0 6px 16px rgba(46, 13, 7, .22); }
.sb-st-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.sb-st-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(30, 8, 4, .92)); color: #fff7e8; display: flex; flex-direction: column; gap: 3px; }
.sb-st-card-body b { font-size: 15px; line-height: 1.3; }
.sb-st-card-body small { font-size: 12px; line-height: 1.35; color: #f3d9b0; }
.sb-st-card-body em { font-style: normal; font-size: 11px; color: #ffd27a; }

/* story moments (story-moment.js): the whole page is the action - the painting, one line of what to do, the button */
.sb-ty-leaf.is-moment { background: #1a0805; }
.sb-ty-leaf.is-moment::after { display: none; }
.is-moment .sb-ty-art { position: absolute; inset: 0; flex: none; border: 0; }
.is-moment .sb-ty-art > img.sb-ty-art-img { object-position: 50% 40%; cursor: default; }
.sb-ty-moment { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.sb-ty-mo { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding: 14px 16px 22px; pointer-events: none; } /* words never at the top: the hint sits just above the button with a gap */
.sb-ty-mo-hint { max-width: 92%; margin: 0; padding: 9px 16px; border: 1px solid rgba(242, 201, 76, .55); border-radius: 18px; background: rgba(40, 12, 5, .72); color: #fff3d6; font-size: 15px; font-weight: 800; line-height: 1.5; text-align: center; animation: sbTyPop .5s both; }
.is-moment-done .sb-ty-mo-hint { border-color: #f2c94c; background: linear-gradient(180deg, #ffd56b, #f2a93b); color: #4a120a; }
.sb-ty-mo-hint.is-placed { position: absolute; left: 50%; transform: translate(-50%, -50%); } /* a moment's own clear spot (data "hint_y") */
.sb-ty-mo-naam { position: absolute; bottom: 104px; left: 50%; margin: 0; padding: 4px 12px; border-radius: 999px; background: rgba(40, 12, 5, .62); color: #f2c94c; font-size: 13px; font-weight: 800; white-space: nowrap; transform: translateX(-50%); }
.sb-ty-mo-naam[hidden], .sb-ty-mo-again[hidden], .sb-ty-mo-tap[hidden] { display: none; }
.sb-ty-mo-tap {
	--p: 0;
	position: relative;
	min-width: 168px;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, #f2a93b);
	box-shadow: 0 4px 0 #b06d12, 0 10px 22px rgba(0, 0, 0, .35);
	color: #4a120a;
	font: inherit;
	font-size: 19px;
	font-weight: 800;
	cursor: pointer;
	pointer-events: auto;
	touch-action: manipulation;
	animation: sbTyBreath 1.8s ease-in-out infinite;
}
.sb-ty-mo-tap::before { /* how much is done: a gold ring round the button */
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 999px;
	background: conic-gradient(#fff3c0 calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: 4px;
	pointer-events: none;
}
.sb-ty-mo-tap:active { transform: translateY(2px) scale(.98); box-shadow: 0 2px 0 #b06d12; }
.sb-ty-mo-tap:disabled { animation: none; opacity: 0; transition: opacity .6s; }
.sb-ty-mo-again { padding: 11px 22px; border: 1px solid rgba(242, 201, 76, .6); border-radius: 999px; background: rgba(40, 12, 5, .72); color: #f2c94c; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; pointer-events: auto; }

/* flip books (D.flip): the turning sheet's shade */
.sb-ty-leaf.is-flipping { z-index: 3; will-change: transform; }
.sb-ty-turnshade { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(40, 15, 5, .55), rgba(255, 255, 255, .12) 45%, rgba(40, 15, 5, .3)); }

/* flip books (D.flip, pilot: narad-muni-ka-moh): the painting at its full width from the top; the words come part by
   part (voice, or by themselves at reading speed when the audio is off; a tap brings the next at once) and the panel
   grows with them up to 50% of the page, then scrolls; its handle hides / shows it */
.sb-ty--flip .is-story .sb-ty-art > img.sb-ty-art-img, .sb-ty--flip .is-moment .sb-ty-art > img.sb-ty-art-img { height: auto; object-fit: initial; }
.sb-ty--flip .is-story .sb-ty-text, .sb-ty--flip .is-story .sb-ty-text.is-open { height: auto; max-height: 50%; overflow-y: auto; padding: 18px 18px 14px; }
.sb-ty--flip .is-story .sb-ty-text.is-more { padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
.sb-ty--flip .is-story .sb-ty-text.is-more::after { /* more words are coming */
	content: '•••';
	position: sticky;
	bottom: -6px;
	display: block;
	margin-top: 2px;
	color: #b0763a;
	font-size: 18px;
	letter-spacing: 4px;
	text-align: center;
	animation: sbTyDots 1.2s ease-in-out infinite;
}
@keyframes sbTyDots { 50% { opacity: .25; } }
.sb-ty--flip .is-story .sb-ty-text h2 { margin-bottom: 4px; font-size: 19px; }
.sb-ty--flip .is-story .sb-ty-text .sb-ty-chap { margin-bottom: 2px; }
.sb-ty--flip .is-story .sb-ty-grab { position: sticky; top: -18px; z-index: 2; display: block; left: auto; width: 100%; height: 20px; margin: -18px 0 0; transform: none; background: linear-gradient(rgba(253, 248, 236, .97), rgba(253, 248, 236, 0)); }
.sb-ty--flip .is-story .sb-ty-grab::before { margin-top: 7px; }

/* flip books: no top / bottom bar - the page is the whole screen; the kahani name and one audio switch sit on the picture */
.sb-ty--flip .sb-ty-top, .sb-ty--flip .sb-ty-nav, .sb-ty--flip .sb-ty-folio { display: none !important; }
.sb-ty-flipbar { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; left: 10px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.sb-ty-flipname, .sb-ty-flipaudio { pointer-events: auto; border: 0; background: rgba(20, 6, 2, .55); color: #fff3d6; font: inherit; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sb-ty-flipname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 78%; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; font-size: 13.5px; font-weight: 800; }
.sb-ty-flipname i { color: #f2c94c; font-size: 20px; font-style: normal; line-height: 1; }
.sb-ty-flipname span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sb-ty-flipaudio { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; }
.sb-ty--flip .sb-ty-mo { padding-top: 54px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.sb-ty--flip .is-story .sb-ty-text { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.sb-ty-swipehint { position: absolute; right: 12px; bottom: calc(21% + 10px); z-index: 7; padding: 7px 13px; border-radius: 999px; background: rgba(20, 6, 2, .66); color: #fff3d6; font-size: 13px; font-weight: 800; pointer-events: none; animation: sbTySwipe 1.4s ease-in-out 3 both; }
.sb-ty-swipehint b { display: inline-block; margin-right: 4px; }
@keyframes sbTySwipe { 0% { opacity: 0; transform: translateX(14px); } 30%, 70% { opacity: 1; transform: none; } 100% { opacity: .9; transform: translateX(-10px); } }

.sb-ty--flip .sb-ty-pages { overflow: hidden; } /* a turning page never shows outside the book */
.sb-ty-flipname.is-icon { padding: 0; width: 34px; justify-content: center; }
.sb-ty-flipname.is-icon span { display: none; }
.sb-ty--flip .sb-ty-swipehint { opacity: 0; animation: none; transition: opacity .4s ease; }
.sb-ty--flip .sb-ty-swipehint.is-on { opacity: 1; animation: sbTyNudge 1.2s ease-in-out 1 .2s; } /* one gentle nudge, then it stays */
@keyframes sbTyNudge { 0%, 100% { transform: none; } 40% { transform: translateX(-8px); } 70% { transform: translateX(2px); } }
.sb-ty-first { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.sb-ty-earnote { margin: 0; color: #7a4a22; font-size: 13px; font-weight: 700; }
.sb-ty-share-mini { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: #1f9d55; color: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
/* a sideways swipe anywhere on the page - the words panel too - turns it (the panel still scrolls up / down) */
.sb-ty--flip .sb-ty-leaf, .sb-ty--flip .sb-ty-text { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sb-ty-beat.is-still { animation: none; } /* a page read before: its words simply there */

/* blur first: the picture's tiny copy, softened, shows at once; the real picture fades in over it */
.sb-ty-art.has-ph::before { content: ''; position: absolute; inset: -12px; background: var(--ph) 50% 40% / cover no-repeat; filter: blur(12px); }
.sb-ty--flip .sb-ty-art.has-ph::before { inset: -12px -12px auto; height: calc(100vw * 1920 / 1080); max-height: calc(var(--sb-app-width, 440px) * 1920 / 1080); background-size: 100% 100%; background-position: top; }
.sb-ty-art.has-ph > img.sb-ty-art-img { position: relative; opacity: 0; transition: opacity .45s ease; }
.sb-ty-art.has-ph > img.sb-ty-art-img.is-in { opacity: 1; }
.sb-ty--flip .is-story .sb-ty-grab { display: none; } /* flip books: no handle - the words panel stays open */

/* the first page: "कहानी शुरू करें" comes after a moment (the picture is seen first), the swipe line under it */
.sb-ty-go { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; opacity: 0; animation: sbTyGoIn .5s ease 1s forwards; }
.sb-ty-go-btn { padding: 12px 30px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd56b, #f2a93b); box-shadow: 0 4px 0 #b06d12; color: #4a120a; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
.sb-ty-go-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #b06d12; }
.sb-ty-go small { color: #7a4a22; font-size: 12.5px; font-weight: 700; }
@keyframes sbTyGoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the first page (flip books): no back / audio; its words come in one after another, then the start button,
   the earphones line, and the share button at the top centre */
.is-on-first .sb-ty-flipbar { display: none; }
.is-first-page .sb-ty-text .sb-ty-chap, .is-first-page .sb-ty-text h2, .is-first-page .sb-ty-beats { opacity: 0; animation: sbTyGoIn .6s ease forwards; }
.is-first-page .sb-ty-text .sb-ty-chap { animation-delay: .3s; }
.is-first-page .sb-ty-text h2 { animation-delay: .7s; }
.is-first-page .sb-ty-beats { animation-delay: 1.1s; }
.is-first-page .sb-ty-go { margin-top: 14px; animation-delay: 1.8s; }
.is-first-page .sb-ty-first { justify-content: center; margin-top: 10px; opacity: 0; animation: sbTyGoIn .6s ease 2.4s forwards; }
.is-first-page .sb-ty-earnote { text-align: center; }
.is-first-page > .sb-ty-share-mini { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; z-index: 12; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); opacity: 0; animation: sbTyShareIn .6s ease 3s forwards; }
@keyframes sbTyShareIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.is-first-page .sb-ty-beat { animation: none; }
.sb-ty-go-btn:disabled { background: #efe2c8; box-shadow: 0 4px 0 #cdb58c; color: #8a6a44; cursor: default; animation: sbTyDots 1.4s ease-in-out infinite; }
.sb-ty-go-btn.is-ready { animation: sbTyReady .6s ease; }
@keyframes sbTyReady { 0% { transform: scale(.94); } 60% { transform: scale(1.05); } 100% { transform: none; } }

/* flip books: how far into the story - a thin gold line along the top edge (not on the first page) */
.sb-ty-flipprog { position: absolute; top: env(safe-area-inset-top, 0px); right: 0; left: 0; z-index: 13; height: 3px; background: rgba(20, 6, 2, .35); pointer-events: none; }
.sb-ty-flipprog b { display: block; width: 0; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #f2c94c, #ffd56b); box-shadow: 0 0 6px rgba(242, 201, 76, .7); transition: width .5s ease; }
.is-on-first .sb-ty-flipprog { display: none; }
/* moments: hint, naam count and button in one column with gaps - never on top of each other */
.sb-ty-mo-naam { position: static; transform: none; }
.is-first-page .sb-ty-earnote { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #7a1f12; color: #f2c94c; font-size: 13px; font-weight: 800; } /* the secondary maroon, like the chapter tag */
/* the puja page's pour (seva moments with jal / oil / milk): the lota keeps its own small size, not the painting's */
.sb-ty-art > img.sb-water-flow-mover, .sb-ty-art > .sb-water-flow-mover { width: var(--sb-lota-w, clamp(50px, 14vw, 72px)); height: auto; }
.sb-ty-art.is-pour-bare .sb-water-flow-mover { opacity: 0 !important; } /* the painting's own vessel (a hanging kalash) pours - only the stream shows */
.sb-ty-art.is-pour-flip .sb-water-flow-mover.is-pouring { transform: translate(-50%, -50%) scaleX(-1) rotate(-38deg); } /* the lota tilts the way the painting's pourer faces */
/* the stream in a book: sized to the lota (a thin, soft fall of water, not the puja page's thick striped one); no fan or rivulets -
   they start just under the lota and streak over the pourer and the air, since a painting has no idol right under the lota */
.sb-ty-art .sb-abhishek-stream { width: calc(var(--sb-lota-w, 60px) * .13); min-width: 2px; margin-left: calc(var(--sb-lota-w, 60px) * -.065); opacity: 0; box-shadow: 0 0 4px var(--sb-liquid-edge);
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .28) 0 4px, transparent 4px 18px), linear-gradient(90deg, transparent, var(--sb-liquid) 30%, var(--sb-liquid) 70%, transparent); background-size: 100% 44px, 100% 100%; }
.sb-ty-art .sb-abhishek.is-pouring .sb-abhishek-stream { opacity: .85; }
.sb-ty-art .sb-abhishek-fan, .sb-ty-art .sb-abhishek-rivulet { display: none; }
.sb-ty-art .sb-abhishek-sheen { width: calc(var(--sb-lota-w, 60px) * .9); }
.sb-ty-art .sb-abhishek.is-pouring .sb-abhishek-sheen { opacity: .22; }
.sb-ty-art .sb-abhishek-splash { width: calc(var(--sb-lota-w, 60px) * 1.3); height: calc(var(--sb-lota-w, 60px) * .25); }