/* रंग भरें board. */

.sb-coloring {
	--sb-coloring-primary: linear-gradient(160deg, #5a1d0e 0%, #7a2e14 55%, #a4471d 100%);
	--sb-coloring-primary-solid: #7a2e14;
}

.sb-coloring-head {
	margin-bottom: 10px;
	text-align: center;
}

.sb-coloring-head strong {
	display: block;
	color: var(--sb-coloring-primary-solid);
	font-size: 16px;
}

.sb-coloring-head span {
	display: block;
	margin-top: 3px;
	color: #9a7250;
	font-size: 12px;
}

.sb-coloring-area {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-height: none;
	height: min(52dvh, 460px);
	margin-bottom: 8px;
}

.sb-coloring-viewport { position: relative; overflow: hidden; border-radius: 14px; }
.sb-coloring-tools { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.sb-coloring-tools button { width: 40px; min-height: 44px; padding: 4px; border: 1px solid #dec4af; border-radius: 12px; background: #fff8ec; color: #7a2e14; font-size: 26px; cursor: pointer; box-shadow: 0 3px 8px #5a1d0e15; }
.sb-coloring-tools button:disabled { opacity: .4; cursor: default; }
.sb-coloring-tools small { display: block; font-size: 10px; line-height: 1.2; }
.sb-coloring-area { padding-right: 48px; box-sizing: border-box; }
.sb-coloring-area canvas {
	display: block;
	border: 1px solid rgba(179, 104, 40, .22);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(120, 70, 30, .14);
	touch-action: manipulation;
	cursor: crosshair;
}
.sb-coloring-viewport.is-zoomed canvas { touch-action: none; cursor: grab; }
.sb-coloring-viewport.is-dragging canvas { cursor: grabbing; }

.sb-coloring.is-loading .sb-coloring-area canvas {
	opacity: .4;
}

.sb-coloring-status {
	min-height: 18px;
	margin: 0 0 10px;
	color: #9a7250;
	font-size: 12px;
	text-align: center;
}

.sb-coloring-palette {
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: clamp(4px, 1.4vw, 7px);
	width: 100%;
	margin: 0 auto 12px;
}

.sb-coloring-swatch {
	aspect-ratio: 1;
	padding: 0;
	border: 2px solid rgba(179, 104, 40, .25);
	border-radius: 50%;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
	-webkit-tap-highlight-color: transparent;
}

.sb-coloring-swatch.is-active {
	transform: scale(1.12);
	border-color: var(--sb-coloring-primary-solid);
	box-shadow: 0 0 0 3px rgba(242, 166, 74, .35);
}

/* Six small controls: keep, branch, step back, clear, take away, send. */
.sb-coloring-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
}

.sb-coloring-button {
	display: flex;
	padding: 9px 4px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	border: 1px solid rgba(179, 104, 40, .22);
	border-radius: 13px;
	background: #fffdf8;
	color: #8a4b1c;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.sb-coloring-button span {
	font-size: 17px;
	line-height: 1;
}

.sb-coloring-button--primary {
	border-color: transparent;
	background: radial-gradient(circle at 32% 26%, #ffdca3, #ec8f2f 52%, #c9691c 100%);
	color: #fff6e6;
}

/* What other devotees made of the same sketch. */
.sb-coloring-others[hidden] {
	display: none;
}

.sb-coloring-others {
	margin-top: 18px;
}

.sb-coloring-tabs {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.sb-coloring-tab {
	padding: 7px 14px;
	border: 1px solid rgba(179, 104, 40, .22);
	border-radius: 999px;
	background: #fffdf8;
	color: #9a7250;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.sb-coloring-tab[hidden] {
	display: none;
}

.sb-coloring-tab.is-active {
	border-color: transparent;
	background: radial-gradient(circle at 32% 26%, #ffdca3, #ec8f2f 72%);
	color: #4a2408;
}

.sb-coloring-empty[hidden] {
	display: none;
}

.sb-coloring-empty {
	margin: 4px 0 0;
	color: #b09070;
	font-size: 12px;
	text-align: center;
}

.sb-coloring-others-rail[hidden] {
	display: none;
}

.sb-coloring-other.is-current {
	border-color: #ec8f2f;
	box-shadow: 0 0 0 2px rgba(242, 166, 74, .35);
}

.sb-coloring-others-rail {
	display: flex;
	gap: 10px;
	padding-bottom: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sb-coloring-others-rail::-webkit-scrollbar {
	display: none;
}

.sb-coloring-other {
	flex: 0 0 auto;
	width: 86px;
	height: auto;
	border: 1px solid rgba(179, 104, 40, .2);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(120, 70, 30, .1);
}

@media (prefers-reduced-motion: reduce) {
	.sb-coloring-swatch { transition: none; }
}

/* Compact maroon action row. */
.sb-coloring-actions {
	gap: 8px;
	margin-top: 14px;
}

.sb-coloring-button {
	min-height: 52px;
	padding: 10px 6px;
	flex-direction: row;
	gap: 6px;
	border-radius: 15px;
	background: linear-gradient(145deg, #fffdf8, #f7ead8);
	box-shadow: 0 6px 16px rgba(90, 29, 14, .09);
	color: #6f2815;
	font-size: 12.5px;
	font-weight: 800;
}

.sb-coloring-button span {
	font-size: 16px;
}

.sb-coloring-button--primary {
	border-color: transparent;
	background: var(--sb-coloring-primary);
	box-shadow: 0 8px 20px rgba(90, 29, 14, .25);
	color: #fff6e6;
}

.sb-coloring-button.has-unsaved-changes {
	background: #287345;
	border-color: #21633b;
	color: #fff;
	animation: sb-save-pulse 2s ease-in-out infinite;
}

.sb-coloring-button.has-unsaved-changes:disabled {
	animation: none;
}

@keyframes sb-save-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(40, 115, 69, .3); }
	50% { box-shadow: 0 0 0 5px rgba(40, 115, 69, .08); }
}

@media (prefers-reduced-motion: reduce) {
	.sb-coloring-button.has-unsaved-changes { animation: none; }
}

.sb-coloring-other[role="button"] {
	cursor: zoom-in;
}

.sb-coloring-zoom[hidden] {
	display: none;
}

.sb-coloring-zoom {
	position: fixed;
	inset: 0;
	z-index: 1600;
	display: grid;
	padding: 18px;
	place-items: center;
	background: rgba(45, 22, 12, .78);
	backdrop-filter: blur(4px);
}

.sb-coloring-zoom-card {
	--sb-coloring-primary: linear-gradient(160deg, #5a1d0e, #a4471d);
	position: relative;
	display: grid;
	width: min(94vw, 520px);
	max-height: 90dvh;
	overflow-y: auto;
	padding: 14px;
	place-items: center;
	border: 1px solid rgba(255, 227, 180, .5);
	border-radius: 22px;
	background: #fff8ec;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}

.sb-coloring-zoom-card canvas {
	display: block;
	max-width: 100%;
	max-height: calc(90dvh - 190px);
	width: auto;
	border-radius: 14px;
}

.sb-coloring-preview-actions[hidden] { display: none; }
.sb-coloring-preview-actions { width: 100%; text-align: center; }
.sb-coloring-preview-actions p { margin: 12px 0; color: #6f412b; font-size: 13px; line-height: 1.5; }
.sb-coloring-preview-actions button { margin: 0 auto; min-width: 110px; }

.sb-coloring-zoom-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	display: grid;
	width: 40px;
	height: 40px;
	padding: 0;
	place-items: center;
	border: 2px solid #fff3df;
	border-radius: 50%;
	background: linear-gradient(160deg, #5a1d0e 0%, #7a2e14 55%, #a4471d 100%);
	box-shadow: 0 6px 16px rgba(40, 15, 8, .28);
	color: #fff;
	font-size: 27px;
	line-height: 1;
	cursor: pointer;
}
/* Separate gallery sections: community first, saved work below the first screen. */
.sb-coloring-gallery[hidden] {
	display: none;
}

.sb-coloring-gallery--others {
	margin: 0 0 12px;
}

.sb-coloring-section-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 10px;
	color: #8d684f;
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}

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

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

.sb-coloring-gallery .sb-coloring-others-rail {
	width: calc(100% + 32px);
	margin-left: -16px;
	padding: 0 16px 7px;
	box-sizing: border-box;
}

.sb-coloring-section-divider b {
	display: inline-grid;
	min-width: 22px;
	height: 22px;
	margin-left: 4px;
	padding: 0 6px;
	place-items: center;
	border-radius: 999px;
	background: var(--sb-coloring-primary);
	color: #fff;
	font-size: 10px;
	line-height: 1;
}
/* Gallery cards mirror the image-and-caption pattern used on the games page. */
.sb-coloring-work-card {
	position: relative;
	flex: 0 0 68px;
	padding: 0;
	overflow: hidden;
	border: 1px solid #ec8f2f;
	border-radius: 18px;
	background: #fffdf8;
	box-shadow: 0 4px 10px rgba(120, 70, 30, .1);
	color: #7b4324;
	font: inherit;
}
.sb-coloring-work-card.is-mine { border-color: #7a2e14; box-shadow: 0 0 0 2px rgba(122, 46, 20, .16); }
.sb-coloring-gallery .sb-coloring-work-card .sb-coloring-other {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	border-radius: 17px;
	box-shadow: none;
}
.sb-coloring-work-open {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 17px;
	background: transparent;
	cursor: pointer;
}
.sb-coloring-work-delete {
	position: absolute;
	top: 3px;
	right: 3px;
	z-index: 2;
	display: grid;
	width: 21px;
	height: 21px;
	padding: 0;
	place-items: center;
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 50%;
	background: rgba(90,29,14,.9);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}
.sb-coloring-work-mine {
	position: absolute;
	right: 4px;
	bottom: 4px;
	padding: 2px 5px;
	border-radius: 999px;
	background: rgba(90, 29, 14, .86);
	color: #fff;
	font-size: 8px;
	font-weight: 800;
}
.sb-coloring-work-copy { display: block; padding: 7px 4px 8px; text-align: center; line-height: 1.15; }
.sb-coloring-work-copy strong, .sb-coloring-work-copy small { display: block; }
.sb-coloring-work-copy strong { font-size: 9px; font-weight: 800; }
.sb-coloring-work-copy small { margin-top: 3px; color: #a37859; font-size: 9px; }

/* Two-line devotional gallery heading. */
.sb-coloring-section-title { display: block; text-align: center; line-height: 1.15; }
.sb-coloring-section-title strong, .sb-coloring-section-title small { display: block; }
.sb-coloring-section-title strong { font-size: 11px; }
.sb-coloring-section-title small { margin-top: 3px; color: #a37859; font-size: 10px; font-weight: 500; }

.sb-coloring-prompt[hidden] {
	display: none;
}

.sb-coloring-prompt {
	--sb-coloring-primary: linear-gradient(160deg, #5a1d0e, #a4471d);
	position: fixed;
	inset: 0;
	z-index: 1700;
	display: grid;
	padding: 20px;
	place-items: center;
	background: rgba(47, 27, 17, .66);
	backdrop-filter: blur(4px);
}

.sb-coloring-prompt-card {
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	width: min(100%, 360px);
	padding: 24px 20px 18px;
	border: 1px solid rgba(179, 104, 40, .28);
	border-radius: 24px;
	background: #fffaf2;
	box-shadow: 0 24px 60px rgba(40, 16, 8, .28);
	text-align: center;
}

.sb-coloring-prompt-icon {
	display: block;
	font-size: 34px;
}

.sb-coloring-prompt-card h2 {
	margin: 8px 0 6px;
	color: #6f2815;
	font-size: 20px;
}

.sb-coloring-prompt-card p {
	margin: 0 0 16px;
	color: #8d684f;
	font-size: 13px;
	line-height: 1.55;
}

.sb-coloring-prompt-button {
	cursor: pointer;
	display: block;
	width: 100%;
	min-height: 46px;
	margin-top: 8px;
	border: 1px solid rgba(122, 46, 20, .18);
	border-radius: 14px;
	background: #fff;
	color: #6f2815;
	font: inherit;
	font-weight: 800;
}

.sb-coloring-prompt-button--primary {
	border-color: transparent;
	background: var(--sb-coloring-primary);
	color: #fff;
}

.sb-coloring-prompt-cancel {
	cursor: pointer;
	margin-top: 14px;
	padding: 6px 12px;
	border: 0;
	background: transparent;
	color: #9a7250;
	font: inherit;
	font-weight: 700;
}

/* ---- Makeover (user 2026-09-27): intro card → canvas card → one row of colours → one main button +
   two quiet ones → others' work. Maroon / cream / gold only. ---- */
/* Other devotees' work inside the first card: small rounded pictures sliding along (drift in game-coloring.js) */
.sb-coloring-intro-others { margin: 0; }
.sb-coloring-gallery--intro { margin: 14px 0 0; }
.sb-coloring-intro-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #f3cf9d; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
/* a divider with the words in the middle (user 2026-09-27): gold lines fading out to both sides */
.sb-coloring-intro-title::before,
.sb-coloring-intro-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 207, 157, .55)); }
.sb-coloring-intro-title::after { background: linear-gradient(90deg, rgba(243, 207, 157, .55), transparent); }
.sb-coloring-gallery--intro .sb-coloring-others-rail { width: auto; margin: 0; padding: 2px 0 4px; }
/* (user 2026-09-28) 5 + "सभी देखें" all in one view, no scrolling: the tiles share the width, a little smaller */
.sb-coloring-gallery--intro .sb-coloring-others-rail { gap: 7px; overflow: hidden; }
.sb-coloring-gallery--intro .sb-coloring-work-card { flex: 1 1 0; min-width: 0; max-width: 56px; border: 2px solid rgba(255, 220, 170, .55); border-radius: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.sb-coloring-gallery--intro .sb-coloring-work-card.is-mine { border-color: #f0bd83; }
.sb-coloring-gallery--intro .sb-coloring-work-card .sb-coloring-other { display: block; width: 100%; height: auto; border: 0; border-radius: 14px; box-shadow: none; }

/* The picture chooser right above the canvas: small and centred */
.sb-coloring-pick .sb-game-choices { margin: 0 0 10px; }
.sb-coloring-pick .sb-game-choices-title { margin-bottom: 6px; color: #8a6d57; font-size: 12px; }
.sb-coloring-pick .sb-game-choice { width: 46px; height: 46px; border-radius: 13px; }
.sb-coloring-pick .sb-game-choice.is-active::after { width: 15px; height: 15px; font-size: 9px; }

.sb-coloring--v2 { margin-top: 16px; }
.sb-coloring--v2 .sb-coloring-card { position: relative; padding: 0; border: 0; background: none; box-shadow: none; }
.sb-coloring--v2 .sb-coloring-area { height: auto; margin: 0; padding: 0; }
/* the picture is the card: exactly its own size, its own rounded corners and shadow - no white band around it */
.sb-coloring--v2 .sb-coloring-frame { position: relative; }
.sb-coloring--v2 .sb-coloring-viewport { border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #ecdcca, 0 12px 28px rgba(120, 70, 30, .12); }
.sb-coloring--v2 .sb-coloring-area canvas { border: 0; border-radius: 0; box-shadow: none; }
.sb-coloring--v2 .sb-coloring-tools { top: 10px; right: 10px; transform: none; display: flex; gap: 6px; }
.sb-coloring--v2 .sb-coloring-tools button { display: grid; width: 40px; min-height: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid #ecdcca; border-radius: 12px; background: rgba(255, 250, 243, .94); color: #7a2e14; font-size: 20px; line-height: 1; box-shadow: 0 3px 10px rgba(90, 29, 14, .1); }
.sb-coloring--v2 .sb-coloring-tools button small { font-size: 8.5px; font-weight: 800; }
.sb-coloring--v2 [data-coloring-magnify] { grid-template-rows: auto auto; }

.sb-coloring--v2 .sb-coloring-palette-title { margin: 18px 2px 8px; color: #6a3418; font-size: 13.5px; font-weight: 800; }
.sb-coloring--v2 .sb-coloring-palette { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 7px 5px; margin: 0; padding: 4px 2px 10px; }
.sb-coloring--v2 .sb-coloring-swatch { width: 100%; height: auto; aspect-ratio: 1; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(122, 46, 20, .18), 0 2px 5px rgba(90, 29, 14, .1); }
.sb-coloring--v2 .sb-coloring-swatch.is-active { transform: scale(1.12); box-shadow: 0 0 0 2px #fff, 0 0 0 4px #7a2e14, 0 4px 10px rgba(90, 29, 14, .2); }

.sb-coloring--v2 .sb-coloring-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 8px 0 0; }
.sb-coloring--v2 .sb-coloring-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sb-coloring--v2 .sb-coloring-button { min-height: 46px; margin: 0; border-radius: 15px; font-size: 14px; font-weight: 800; }
.sb-coloring--v2 .sb-coloring-button--offer { min-height: 52px; border: 0; background: linear-gradient(135deg, #b8563b 0%, #9a3b20 100%); box-shadow: 0 8px 18px rgba(154, 59, 32, .28); color: #fff; font-size: 15.5px; }
.sb-coloring--v2 .sb-coloring-button--offer::before { content: "🙏"; margin-right: 8px; }
/* as before (user): once anything is coloured and not saved yet, Save turns green and pulses */
.sb-coloring--v2 .sb-coloring-button--offer.has-unsaved-changes { background: #287345; box-shadow: 0 8px 18px rgba(40, 115, 69, .3); color: #fff; animation: sb-save-pulse 2s ease-in-out infinite; }
.sb-coloring--v2 .sb-coloring-button--quiet { border: 1px solid #e6d3bf; background: #fffaf3; box-shadow: none; color: #7a2e14; }

.sb-coloring--v2 .sb-coloring-gallery--others { margin: 26px 0 0; }
.sb-coloring--v2 .sb-coloring-divider { margin: 0 0 12px; }

/* The colouring popup (user 2026-09-27): who and when on top, a WhatsApp share under the picture */
.sb-coloring-zoom-by { margin: 0 44px 12px 4px; color: #6a3418; font-size: 14px; font-weight: 800; line-height: 1.4; }
.sb-coloring-preview-share { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; border: 0; border-radius: 14px; background: #1f8a4c; box-shadow: 0 6px 14px rgba(31, 138, 76, .25); color: #fff; font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.sb-coloring-preview-share .fa { font-size: 18px; }

/* Share beside Save (user 2026-09-27): green like WhatsApp once saved; faded until then (a tap explains) */
.sb-coloring--v2 .sb-coloring-actions-row .sb-coloring-button--offer { min-height: 52px; }
.sb-coloring--v2 .sb-coloring-button--share { min-height: 52px; border: 0; background: #1f8a4c; box-shadow: 0 8px 18px rgba(31, 138, 76, .25); color: #fff; font-size: 15.5px; }
.sb-coloring--v2 .sb-coloring-button--share .fa { font-size: 18px; }
.sb-coloring--v2 .sb-coloring-button--share.is-waiting { background: #e9e1d6; box-shadow: none; color: #8a7a6d; }
.sb-coloring-share-note { margin: 0; padding: 9px 12px; border-radius: 12px; background: #fff3e0; color: #7a2e14; font-size: 13px; font-weight: 700; text-align: center; }

/* Saving (user 2026-09-27): a small spinner in place of 🙏 and "Saving…" while the server saves */
.sb-coloring--v2 .sb-coloring-button--offer.is-saving { cursor: wait; opacity: .92; animation: none; }
.sb-coloring--v2 .sb-coloring-button--offer.is-saving::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; vertical-align: -3px; animation: sb-coloring-spin .8s linear infinite; }
@keyframes sb-coloring-spin { to { transform: rotate(360deg); } }
/* Save on a blank picture: off, and looks it */
.sb-coloring--v2 .sb-coloring-button--offer:disabled:not(.is-saving) { background: #e9e1d6; box-shadow: none; color: #8a7a6d; cursor: default; animation: none; }

/* The strip's last tile: "सभी देखें (N) ›" */
.sb-coloring-see-all { flex: 1 1 0; min-width: 0; max-width: 56px; display: grid; place-items: center; align-content: center; gap: 2px; min-height: 64px; padding: 4px 2px; border: 2px dashed rgba(255, 220, 170, .55); border-radius: 16px; background: rgba(255, 220, 170, .1); color: #f3cf9d; font: inherit; font-size: 10px; font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer; }
.sb-coloring-see-all b { color: #fff; font-size: 13px; }

/* "सभी देखें" bottom popup: a 3-a-row grid, each with a WhatsApp share */
.sb-coloring-all { position: fixed; inset: 0; z-index: 1500; display: flex; align-items: flex-end; justify-content: center; }
.sb-coloring-all[hidden] { display: none; }
.sb-coloring-all-backdrop { position: absolute; inset: 0; background: rgba(33, 26, 22, .55); }
.sb-coloring-all-card { position: relative; width: min(100%, 440px); max-height: 86vh; overflow-y: auto; padding: 10px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: #fffaf3; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); }
.sb-coloring-all-handle { display: block; width: 44px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: #e3d2bf; }
.sb-coloring-all-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3e6d6; color: #7a2e14; font-size: 22px; line-height: 1; cursor: pointer; }
.sb-coloring-all-title { margin: 4px 44px 14px 2px; color: #5a1d0e; font-size: 16px; font-weight: 800; }
.sb-coloring-all-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-coloring-all-item { position: relative; overflow: hidden; border: 1px solid #ecdcca; border-radius: 16px; background: #fff; box-shadow: 0 4px 10px rgba(90, 29, 14, .07); }
.sb-coloring-all-item.is-mine { border-color: #7a2e14; }
.sb-coloring-all-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sb-coloring-all-open img, .sb-coloring-all-open canvas { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.sb-coloring-all-share { position: absolute; right: 6px; bottom: 6px; display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: #1f8a4c; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); color: #fff; font-size: 17px; cursor: pointer; }
.sb-coloring-all-mine { position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px; background: #7a2e14; color: #fff; font-size: 10.5px; font-weight: 800; }
.sb-coloring-all-more { margin: 14px 0 0; color: #8a6d57; font-size: 13px; font-weight: 700; text-align: center; }


/* Your own colouring in the popup (user 2026-09-28): two small links under the heading; a smaller picture */
.sb-coloring-zoom-links[hidden] { display: none; }
.sb-coloring-zoom-links { display: flex; justify-content: center; gap: 18px; margin: -4px 0 12px; }
.sb-coloring-zoom-links button { padding: 4px 2px; border: 0; background: none; color: #7a2e14; font: inherit; font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sb-coloring-zoom-links button[hidden] { display: none; }
.sb-coloring-zoom-card canvas { max-width: 88%; max-height: min(calc(82dvh - 190px), 560px); }
.sb-coloring-work-pencil { position: absolute; top: 3px; right: 3px; z-index: 2; display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(90, 29, 14, .9); font-size: 9px; line-height: 1; pointer-events: none; }

/* "सभी देखें": the chosen ones slide along on top (user 2026-09-28), the rest in the grid below */
.sb-coloring-all-featured[hidden] { display: none; }
.sb-coloring-all-sub { margin: 0 2px 10px; color: #7a2e14; font-size: 13.5px; font-weight: 800; }
.sb-coloring-all-slider { display: flex; gap: 10px; margin: 0 -14px 16px; padding: 0 14px 4px; overflow-x: auto; scrollbar-width: none; }
.sb-coloring-all-slider::-webkit-scrollbar { display: none; }
.sb-coloring-all-slider .sb-coloring-all-item { flex: 0 0 42%; border-color: #e0b35a; box-shadow: 0 0 0 2px rgba(224, 179, 90, .35), 0 4px 10px rgba(90, 29, 14, .08); }
/* the section names as dividers (user 2026-09-28): words in the middle, lines fading out to both sides */
.sb-coloring-all-sub { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; white-space: nowrap; }
.sb-coloring-all-sub::before,
.sb-coloring-all-sub::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(122, 46, 20, .35)); }
.sb-coloring-all-sub::after { background: linear-gradient(90deg, rgba(122, 46, 20, .35), transparent); }
.sb-coloring-all-title { margin-bottom: 8px; }
/* yours in the grid: a pencil in a small maroon circle (same as the strip) */
.sb-coloring-all-mine { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 50%; font-size: 12px; line-height: 1; pointer-events: none; }
/* no title in the popup (user 2026-09-28): the handle and × share the top row, the pictures start below it */
.sb-coloring-all-card { padding-top: 52px; }
.sb-coloring-all-handle { position: absolute; top: 10px; left: 50%; margin: 0; transform: translateX(-50%); }
/* (user 2026-09-28) about the grid's size: two whole cards and half of the third, so it is clear it scrolls sideways */
.sb-coloring-all-slider .sb-coloring-all-item { flex: 0 0 calc((100% - 20px) / 2.5); }
/* The strip like the home page's faces, only bigger and spaced (user 2026-09-28): round pictures - just the
   colouring, no card, no white band, all the same size whatever the picture's shape */
.sb-coloring-gallery--intro .sb-coloring-others-rail { gap: 8px; align-items: center; }
.sb-coloring-gallery--intro .sb-coloring-work-card { flex: 1 1 0; min-width: 0; max-width: 58px; aspect-ratio: 1; overflow: visible; border: 0; border-radius: 50%; background: none; box-shadow: none; }
.sb-coloring-gallery--intro .sb-coloring-work-card .sb-coloring-work-open { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, .28); }
.sb-coloring-gallery--intro .sb-coloring-work-card .sb-coloring-other { width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: center 25%; }
.sb-coloring-gallery--intro .sb-coloring-work-card .sb-coloring-work-pencil { top: -2px; right: -2px; }
/* "सभी देखें" as the same round shape */
.sb-coloring-gallery--intro .sb-coloring-see-all { max-width: 58px; min-height: 0; aspect-ratio: 1; padding: 0; gap: 0; border-radius: 50%; font-size: 9px; line-height: 1.1; }
.sb-coloring-gallery--intro .sb-coloring-see-all b { font-size: 12.5px; }
/* how long ago, bottom-left of each picture (the WhatsApp button is bottom-right): small and muted */
.sb-coloring-all-when { position: absolute; left: 6px; bottom: 8px; max-width: calc(100% - 50px); overflow: hidden; padding: 2px 7px; border-radius: 999px; background: rgba(255, 250, 243, .88); color: #8a6d57; font-size: 10px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
/* top-right, where there is room for the whole "6 दिन पहले" (the pencil is top-left, WhatsApp bottom-right) */
.sb-coloring-all-when { left: auto; right: 6px; top: 6px; bottom: auto; max-width: calc(100% - 40px); padding: 1px 6px; font-size: 9.5px; }

/* ❤️ (user 2026-09-28): a small pill on each picture (bottom-left), a round button beside WhatsApp in the popup */
.sb-coloring-all-like { position: absolute; left: 6px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; min-width: 32px; height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(255, 250, 243, .92); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); color: #7a2e14; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; }
span.sb-coloring-all-like { cursor: default; }
.sb-coloring-all-like b, .sb-coloring-like-big b { font-size: 12px; font-weight: 800; }
.sb-coloring-all-like[hidden], .sb-coloring-like-big[hidden] { display: none; }
.sb-coloring-zoom-actions { display: flex; width: 100%; align-items: stretch; gap: 10px; margin: 14px 0 0; }
.sb-coloring-zoom-actions .sb-coloring-preview-share { flex: 1; margin: 0; }
.sb-coloring-zoom-like:empty { display: none; }
.sb-coloring-like-big { display: inline-flex; height: 100%; min-width: 64px; min-height: 46px; align-items: center; justify-content: center; gap: 5px; padding: 0 14px; border: 1px solid #ecdcca; border-radius: 14px; background: #fff; color: #7a2e14; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.sb-coloring-like-big b { font-size: 14px; }
span.sb-coloring-like-big { cursor: default; }
.sb-coloring-like-big.is-liked, .sb-coloring-all-like.is-liked { background: #fff0ee; }
.is-pop { animation: sb-like-pop .45s ease; }
@keyframes sb-like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* your own colouring, once liked: "❤️ 12 भक्तों को पसंद आई" (user 2026-09-28) */
.sb-coloring-zoom-loved[hidden] { display: none; }
.sb-coloring-zoom-loved { margin: -4px 0 12px; padding: 5px 14px; border-radius: 999px; background: #fff0ee; color: #7a2e14; font-size: 13.5px; font-weight: 800; text-align: center; }

/* the strip's round pictures: a small ❤️ count bottom-right, once liked (user 2026-09-28) */
.sb-coloring-work-likes { position: absolute; right: -4px; bottom: -3px; z-index: 2; padding: 1px 5px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 999px; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .25); color: #7a2e14; font-size: 9px; font-weight: 800; line-height: 1.35; white-space: nowrap; pointer-events: none; }
.sb-coloring-work-likes[hidden] { display: none; }
/* tighter (user 2026-09-28): a smaller heart right against the number, little padding */
.sb-coloring-work-likes { display: inline-flex; align-items: center; gap: 1px; right: -3px; bottom: -2px; padding: 0 4px 0 3px; font-size: 9px; line-height: 14px; }
.sb-coloring-work-likes i { font-size: 7px; font-style: normal; line-height: 1; }

/* "❤️ 3 और भक्तों को आपकी सजावट पसंद आई" in the first card (user 2026-09-28) - the mantra page's pill style */
.sb-coloring-new-likes[hidden] { display: none; }
.sb-coloring-new-likes { margin: 12px 0 0; }
.sb-coloring-new-likes button { padding: 6px 14px; border: 0; border-radius: 999px; background: rgba(255, 220, 170, .16); box-shadow: inset 0 0 0 1px rgba(240, 189, 131, .4); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; animation: sb-like-pop .6s ease 1; }
/* "📲 Status पर लगाएँ" under the popup's buttons: quiet, maroon outline */
.sb-coloring-status-button { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; margin: 10px 0 0; border: 1px solid #e0c9b3; border-radius: 14px; background: #fff; color: #7a2e14; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.sb-coloring-status-button:disabled { opacity: .7; cursor: wait; }

/* top centre of the popup, level with the ×: "✏️ मेरी सजावटें (3)" / "🎨 सभी सजावटें (20)" (user 2026-09-28) */
.sb-coloring-all-switch[hidden] { display: none; }
.sb-coloring-all-switch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border: 1px solid #e6d3bf; border-radius: 999px; background: #fff; color: #7a2e14; font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.sb-coloring-all-card { padding-top: 60px; }
.sb-coloring-all-handle { top: 6px; }