/* मंत्र क्रम - same family as दर्शन पहेली: maroon gradient for anything
   primary, cream cards with a maroon side border for information, white stat
   cards. The line being built is numbered place by place. */

.sb-mantra,
.sb-mantra-done {
	--sb-mantra-primary: linear-gradient(160deg, #5a1d0e 0%, #7a2e14 55%, #a4471d 100%);
	--sb-mantra-maroon: #7a2e14;
	--sb-mantra-maroon-dark: #5a1d0e;
	--sb-mantra-ink: #4f2f20;
	--sb-mantra-muted: #9a7250;
	--sb-mantra-cream: #fff6e9;
	--sb-mantra-paper: #fffdf8;
	--sb-mantra-line: rgba(179, 104, 40, .18);
	--sb-mantra-green: #28733a;
}

.sb-mantra {
	width: 100%;
	/* The bottom nav is fixed over the page and its raised centre button
	   stands about 80px tall, so the last button needs that much room to
	   scroll clear of it. */
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* What is being played */

.sb-mantra-identity {
	display: grid;
	justify-items: start;
	gap: 3px;
	padding: 11px 14px 12px;
	border: 1px solid rgba(169, 80, 37, .22);
	border-left: 4px solid var(--sb-mantra-maroon);
	border-radius: 12px;
	background: var(--sb-mantra-cream);
	box-shadow: 0 5px 14px rgba(79, 47, 32, .07);
}

.sb-mantra-kind {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--sb-mantra-primary);
	color: #fff8ee;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
}

.sb-mantra-kind[hidden] {
	display: none;
}

.sb-mantra-identity strong {
	color: var(--sb-mantra-ink);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

.sb-mantra-identity small {
	color: var(--sb-mantra-muted);
	font-size: 12px;
	line-height: 1.35;
}

.sb-mantra-identity small:empty {
	display: none;
}

/* Which kind of round this is */

.sb-mantra-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 4px;
	color: var(--sb-mantra-maroon);
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.sb-mantra-divider::before,
.sb-mantra-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(122, 46, 20, .3));
}

.sb-mantra-divider::after {
	background: linear-gradient(90deg, rgba(122, 46, 20, .3), transparent);
}

.sb-mantra-guidance {
	margin: 0 0 10px;
	color: var(--sb-mantra-muted);
	font-size: 12px;
	line-height: 1.45;
	text-align: center;
}

/* The line being built */

.sb-mantra-board {
	padding: 18px 12px 16px;
	border: 1px solid var(--sb-mantra-line);
	border-radius: 18px;
	background: var(--sb-mantra-paper);
	box-shadow: 0 8px 22px rgba(90, 29, 14, .07);
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sb-mantra-answer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 9px;
	counter-reset: sb-mantra-place;
}

.sb-mantra-word,
.sb-mantra-slot {
	position: relative;
	display: inline-grid;
	min-width: 60px;
	min-height: 48px;
	padding: 8px 13px;
	place-items: center;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}

/* Place numbers: 1, 2, 3 ... in the corner of every place in the line. */
.sb-mantra-answer > * {
	counter-increment: sb-mantra-place;
}

.sb-mantra-answer > *::before {
	content: counter(sb-mantra-place);
	position: absolute;
	top: -7px;
	left: -6px;
	display: grid;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	place-items: center;
	border-radius: 999px;
	background: var(--sb-mantra-maroon);
	color: #fff8ee;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
}

/* An empty place */
.sb-mantra-slot {
	min-width: 64px;
	border: 1.5px dashed rgba(122, 46, 20, .32);
	background: #fffaf3;
}

.sb-mantra-slot.is-target {
	border-style: solid;
	border-color: var(--sb-mantra-maroon);
	background: #fff0e0;
	box-shadow: 0 0 0 3px rgba(122, 46, 20, .12);
}

/* A tile the devotee has put in */
.sb-mantra-answer .sb-mantra-word {
	border: 1.5px solid var(--sb-mantra-maroon);
	background: #fff;
	box-shadow: 0 3px 8px rgba(90, 29, 14, .1);
	color: var(--sb-mantra-maroon);
}

/* A tile that came already placed. It reads as part of the line - printed,
   not movable - so it has no border and no lift. */
.sb-mantra-answer .sb-mantra-word.is-given {
	border-color: transparent;
	background: #f5e7d5;
	box-shadow: none;
	color: #7b5a44;
	cursor: default;
	opacity: 1;
}

.sb-mantra-answer .sb-mantra-word.is-given::before {
	background: #c4a489;
}

.sb-mantra-word.is-wrong,
.sb-mantra-answer .sb-mantra-word.is-wrong {
	border-color: #cf6658;
	background: #fde7e3;
	box-shadow: 0 0 0 3px rgba(207, 102, 88, .16);
	color: #a23d32;
}

.sb-mantra-word.is-right,
.sb-mantra-answer .sb-mantra-word.is-right {
	border-color: #6fb07c;
	background: #eef8ef;
	box-shadow: none;
	color: var(--sb-mantra-green);
}

.sb-mantra-answer .sb-mantra-word.is-right::before {
	background: #4c9a5c;
}

/* Meaning and source, once the line is complete */

.sb-mantra-reveal {
	margin-top: 16px;
	padding: 11px 13px 10px;
	border: 1px solid rgba(169, 80, 37, .2);
	border-left: 4px solid var(--sb-mantra-maroon);
	border-radius: 12px;
	background: var(--sb-mantra-cream);
	text-align: left;
}

.sb-mantra-reveal[hidden] {
	display: none;
}

.sb-mantra-reveal-label {
	display: block;
	margin-bottom: 4px;
	color: var(--sb-mantra-maroon);
	font-size: 12px;
	font-weight: 800;
}

.sb-mantra-reveal p {
	margin: 0;
	color: var(--sb-mantra-ink);
	font-size: 13.5px;
	line-height: 1.6;
}

.sb-mantra-reveal small {
	display: block;
	margin-top: 6px;
	color: var(--sb-mantra-muted);
	font-size: 11.5px;
	font-weight: 700;
	text-align: right;
}

.sb-mantra-reveal small:empty {
	display: none;
}

/* The tiles to choose from */

.sb-mantra-tray {
	margin-top: 12px;
	padding: 10px 10px 12px;
	border: 1px solid rgba(169, 80, 37, .16);
	border-radius: 18px;
	background: var(--sb-mantra-cream);
}

.sb-mantra-tray-label {
	display: block;
	margin: 0 0 8px 4px;
	color: var(--sb-mantra-muted);
	font-size: 11px;
	font-weight: 800;
}

.sb-mantra-bank {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
}

.sb-mantra-bank .sb-mantra-word {
	border: 1px solid rgba(179, 104, 40, .26);
	background: var(--sb-mantra-paper);
	box-shadow: 0 3px 0 rgba(122, 46, 20, .13), 0 6px 12px rgba(90, 29, 14, .06);
	color: var(--sb-mantra-maroon-dark);
}

.sb-mantra-bank .sb-mantra-word:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(122, 46, 20, .13), 0 3px 7px rgba(90, 29, 14, .05);
}

.sb-mantra-status {
	min-height: 20px;
	margin: 10px 0 0;
	color: var(--sb-mantra-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

/* Stats */

.sb-mantra-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 12px 0;
}

.sb-mantra-stat {
	padding: 8px 6px;
	border: 1px solid rgba(179, 104, 40, .16);
	border-radius: 14px;
	background: var(--sb-mantra-paper);
	text-align: center;
}

.sb-mantra-stat small {
	display: block;
	color: var(--sb-mantra-muted);
	font-size: 10.5px;
	letter-spacing: .04em;
}

.sb-mantra-stat b {
	display: block;
	margin-top: 2px;
	color: #7d3f14;
	font-size: 16px;
}

.sb-mantra-stat--done {
	border-color: #a8d1ac;
	background: #eef8ef;
}

.sb-mantra-stat--done small,
.sb-mantra-stat--done b {
	color: var(--sb-mantra-green);
}

/* Buttons */

.sb-mantra-actions {
	display: flex;
	gap: 10px;
}

.sb-mantra-button {
	flex: 1;
	min-height: 50px;
	padding: 10px 16px;
	border: 1px solid rgba(122, 46, 20, .2);
	border-radius: 16px;
	background: var(--sb-mantra-paper);
	box-shadow: 0 5px 14px rgba(90, 29, 14, .07);
	color: var(--sb-mantra-maroon);
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.sb-mantra-button--primary {
	border-color: transparent;
	background: var(--sb-mantra-primary);
	box-shadow: 0 8px 18px rgba(90, 29, 14, .24);
	color: #fff8ee;
}

.sb-mantra-button[hidden] {
	display: none;
}

.sb-mantra-button:active {
	transform: scale(.98);
}

.sb-mantra-button:focus-visible,
.sb-mantra-word:focus-visible,
.sb-mantra-slot:focus-visible {
	outline: 3px solid rgba(122, 46, 20, .22);
	outline-offset: 2px;
}

/* Complete */

.sb-mantra.is-complete .sb-mantra-board {
	border-color: #a8d1ac;
	box-shadow: 0 8px 22px rgba(40, 115, 58, .1);
}

.sb-mantra.is-complete .sb-mantra-divider {
	color: var(--sb-mantra-green);
}

.sb-mantra.is-complete .sb-mantra-status {
	color: var(--sb-mantra-green);
	font-size: 16px;
	font-weight: 800;
}

/* Stray tiles left in the tray are just noise once the line is complete. */
.sb-mantra.is-complete .sb-mantra-tray {
	display: none;
}

/* Finished the whole deck */

.sb-mantra-done[hidden] {
	display: none;
}

.sb-mantra-done {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(60, 32, 12, .72);
}

.sb-mantra-done-card {
	width: min(360px, 100%);
	padding: 26px 20px;
	border: 1px solid rgba(255, 227, 180, .5);
	border-radius: 22px;
	background: linear-gradient(170deg, #fffaf1, #fdeed8);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	text-align: center;
}

.sb-mantra-done-icon {
	font-size: 54px;
	line-height: 1;
}

.sb-mantra-done-card h2 {
	margin: 8px 0 6px;
	color: var(--sb-mantra-maroon);
	font-size: 21px;
}

.sb-mantra-done-card p {
	margin: 0 0 16px;
	color: var(--sb-mantra-muted);
	font-size: 13px;
	line-height: 1.5;
}

.sb-mantra-done-card .sb-mantra-button {
	width: 100%;
}

@media (max-width: 360px) {
	.sb-mantra-board {
		padding-right: 8px;
		padding-left: 8px;
	}

	.sb-mantra-word,
	.sb-mantra-slot {
		min-width: 52px;
		min-height: 44px;
		padding-right: 10px;
		padding-left: 10px;
		font-size: 14px;
	}
}

@media (hover: hover) {
	.sb-mantra-bank .sb-mantra-word:hover {
		border-color: rgba(122, 46, 20, .45);
	}

	.sb-mantra-button:hover {
		border-color: rgba(122, 46, 20, .36);
	}

	.sb-mantra-button--primary:hover {
		border-color: transparent;
		box-shadow: 0 10px 22px rgba(90, 29, 14, .3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sb-mantra-word,
	.sb-mantra-slot,
	.sb-mantra-button,
	.sb-mantra-board {
		transition: none;
	}
}

/* ---- Makeover (user 2026-09-27): maroon first card with the score, the verse as a cream "scroll" card
   with gold blanks and a gold progress bar, gold-edged word tiles, Hindi buttons. Palette only. ---- */
.sb-intro .sb-mantra-intro-score { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.sb-intro .sb-mantra-intro-score span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 220, 170, .14); box-shadow: inset 0 0 0 1px rgba(240, 189, 131, .3); color: #f3cf9d; font-size: 12.5px; font-weight: 700; }
.sb-intro .sb-mantra-intro-score b { color: #fff; font-weight: 800; }

.sb-mantra--v2 { margin-top: 16px; padding-bottom: 0; }

/* the verse card: cream paper, a thin gold frame */
.sb-mantra--v2 .sb-mantra-verse { position: relative; padding: 18px 14px 14px; border: 1px solid #ead2ae; border-radius: 22px; background: radial-gradient(circle at 50% 0%, rgba(240, 189, 131, .18), transparent 55%), #fffaf1; box-shadow: inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(212, 160, 23, .28), 0 10px 26px rgba(90, 29, 14, .08); }
.sb-mantra--v2 .sb-mantra-identity { justify-items: center; gap: 5px; padding: 0; border: 0; background: none; box-shadow: none; text-align: center; }
.sb-mantra--v2 .sb-mantra-kind { padding: 3px 12px; background: none; box-shadow: inset 0 0 0 1px rgba(154, 59, 32, .35); color: #9a3b20; font-size: 11.5px; letter-spacing: .02em; }
.sb-mantra--v2 .sb-mantra-identity strong { color: #5a1d0e; font-size: 20px; }
.sb-mantra--v2 .sb-mantra-divider { margin: 12px 0 2px; color: #a0582b; font-size: 12.5px; }
.sb-mantra--v2 .sb-mantra-divider::before { background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .5)); }
.sb-mantra--v2 .sb-mantra-divider::after { background: linear-gradient(90deg, rgba(212, 160, 23, .5), transparent); }
.sb-mantra--v2 .sb-mantra-guidance { margin: 0 0 14px; }

/* the line being built (user 2026-09-27): every place is the same box - blank, given or placed - so the
   line reads as one row of places; maroon number pills on each, like the first version */
.sb-mantra--v2 .sb-mantra-answer { gap: 16px 10px; padding: 8px 0 2px; }
.sb-mantra--v2 .sb-mantra-answer > * { min-width: 66px; min-height: 48px; padding: 8px 13px; border-radius: 12px; font-size: 16px; }
.sb-mantra--v2 .sb-mantra-answer > *::before { top: -9px; left: -6px; transform: none; min-width: 20px; height: 20px; background: #7a2e14; color: #fff8ee; font-size: 10.5px; box-shadow: 0 2px 5px rgba(90, 29, 14, .2); }
.sb-mantra--v2 .sb-mantra-slot { border: 1.5px dashed rgba(122, 46, 20, .35); background: #fffaf3; }
.sb-mantra--v2 .sb-mantra-slot.is-target { border-style: solid; border-color: #7a2e14; background: #fff0e0; box-shadow: 0 0 0 3px rgba(122, 46, 20, .12); }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word { border: 1.5px solid #7a2e14; background: #fff; box-shadow: 0 3px 8px rgba(90, 29, 14, .1); color: #5a1d0e; }
/* already given: the same box, filled cream - part of the line, not movable */
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-given { border: 1.5px solid #e4cfb3; background: #f6e8d4; box-shadow: none; color: #6a4a36; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-given::before { background: #a0582b; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-right { border-color: #6fb07c; background: #eef8ef; color: #28733a; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-right::before { background: #3f8a55; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-wrong { border-color: #cf6658; background: #fde7e3; box-shadow: 0 0 0 3px rgba(207, 102, 88, .16); color: #a23d32; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-wrong::before { background: #b8483b; }
.sb-mantra--v2 .sb-mantra-reveal { margin-top: 16px; border: 0; border-radius: 14px; background: #211a16; box-shadow: none; }
.sb-mantra--v2 .sb-mantra-reveal-label { color: #f0bd83; }
.sb-mantra--v2 .sb-mantra-reveal p { color: #f6ead8; }
.sb-mantra--v2 .sb-mantra-reveal small { color: #cfb9a2; }

/* a thin gold progress bar under the line */
.sb-mantra-progress { display: flex; align-items: center; gap: 10px; margin: 16px 2px 0; }
.sb-mantra-progress-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: #f1e3cf; }
.sb-mantra-progress-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e9a93f, #d4a017); transition: width .3s ease; }
.sb-mantra-progress small { flex: 0 0 auto; color: #8a6d57; font-size: 12px; font-weight: 700; }
.sb-mantra-progress b { color: #5a1d0e; }

/* the word tiles: cream with a gold edge, lift when tapped */
.sb-mantra--v2 .sb-mantra-tray { margin-top: 16px; padding: 14px 12px 16px; border: 0; border-radius: 20px; background: rgba(240, 189, 131, .12); box-shadow: none; }
.sb-mantra--v2 .sb-mantra-tray-label { display: block; margin: 0 0 10px; color: #6a3418; font-size: 13px; font-weight: 800; text-align: center; }
.sb-mantra--v2 .sb-mantra-bank .sb-mantra-word { min-height: 46px; border: 1px solid #ecd6b8; border-bottom: 3px solid #d4a017; border-radius: 13px; background: #fffdf8; box-shadow: 0 4px 10px rgba(90, 29, 14, .08); color: #5a1d0e; font-size: 16px; }
.sb-mantra--v2 .sb-mantra-bank .sb-mantra-word:active { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(90, 29, 14, .14); }

.sb-mantra--v2 .sb-mantra-status { margin: 12px 0 0; color: #8a6d57; font-size: 13px; font-weight: 700; }
.sb-mantra--v2 .sb-mantra-actions { margin-top: 12px; }
.sb-mantra--v2 .sb-mantra-button { font-weight: 800; }

/* a wrong tile shakes and fades on its way back to the tray (game-mantra.js) */
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-wrong { animation: sb-mantra-shake .35s ease; }
.sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-returning { opacity: 0; transform: translateY(18px) scale(.9); transition: opacity .3s ease, transform .3s ease; }
@keyframes sb-mantra-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .sb-mantra--v2 .sb-mantra-answer .sb-mantra-word.is-wrong { animation: none; } }

/* the "wrong tile went back" alert: just above the bottom bar, in the app column */
.sb-mantra-toast { position: fixed; left: 50%; bottom: calc(var(--sb-bottom-nav-height, 69px) + 30px + env(safe-area-inset-bottom)); z-index: 60; width: min(calc(100% - 32px), 408px); padding: 11px 14px; border-radius: 14px; background: #211a16; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); color: #fdebd6; font-size: 13.5px; font-weight: 700; line-height: 1.5; text-align: center; opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.sb-mantra-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sb-mantra-toast[hidden] { display: none; }
.sb-mantra-status.sb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
/* a used tile keeps its place in the tray, unseen, so the others never move */
.sb-mantra-bank .sb-mantra-word.is-used { visibility: hidden; pointer-events: none; }