[v-cloak] { display: none !important; }

@font-face {
	font-family: "Sriracha Local";
	src: url('/assets/fonts/sriracha/Sriracha-Regular.ttf?v=20260806.1') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--sc-indigo: #4f46e5;
	--sc-indigo-hover: #4338ca;
	--sc-indigo-deep: #312e81;
	--sc-indigo-soft: #eef2ff;
	--sc-pandan: #3f7d51;
	--sc-pandan-soft: #e9f5eb;
	--sc-custard: #f5bf45;
	--sc-custard-soft: #fff6d8;
	--sc-coconut: #f7f3e9;
	--sc-caramel: #9a5b36;
	--sc-caramel-soft: #f5e9df;
	--sc-rose: #e11d48;
	--sc-rose-soft: #fff1f2;
	--sc-emerald: #059669;
	--sc-emerald-soft: #d1fae5;
	--sc-ink: #172033;
	--sc-muted: #566174;
	--sc-line: #e2e8f0;
	--sc-page: #f8fafc;
	--sc-paper: #fffdf8;
	--sc-white: #ffffff;
	--sc-soft-shadow: 0 16px 34px -24px rgba(15, 23, 42, .34);
	--sc-cta-shadow: 0 12px 24px -16px rgba(49, 46, 129, .8);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body, button { font-family: "Sarabun", sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible {
	outline: 3px solid #93c5fd;
	outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }

.sc-body {
	margin: 0;
	min-width: 320px;
	background:
		radial-gradient(circle at 90% 0%, rgba(63, 125, 81, .1), transparent 26rem),
		var(--sc-page);
	color: var(--sc-ink);
	font-size: 1rem;
	line-height: 1.55;
}
.sc-app { min-height: 100vh; }

.sc-loading,
.sc-fatal {
	min-height: 100vh;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
}
.sc-loading { color: var(--sc-indigo-deep); }
.sc-loading small,
.sc-fatal p { color: var(--sc-muted); }
.sc-loading-mark,
.sc-fatal > span {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--sc-custard-soft);
	color: #92400e;
	font-size: 30px;
	box-shadow: var(--sc-soft-shadow);
	animation: sc-breathe 1.5s cubic-bezier(.22, 1, .36, 1) infinite alternate;
}
.sc-fatal > span {
	background: var(--sc-rose-soft);
	color: var(--sc-rose);
	animation: none;
}
.sc-fatal h1 { margin: 8px 0 0; font-size: clamp(1.6rem, 4vw, 2.35rem); }
.sc-fatal p { margin: 0 0 12px; max-width: 44rem; }

.sc-primary,
.sc-secondary,
.sc-text-button,
.sc-link-button,
.sc-ghost-on-dark,
.sc-equipped-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 18px;
	border-radius: 12px;
	font: inherit;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform .18s cubic-bezier(.22, 1, .36, 1),
		background-color .18s ease,
		border-color .18s ease,
		box-shadow .18s ease;
}
.sc-primary {
	border: 1px solid var(--sc-indigo);
	background: var(--sc-indigo);
	color: #fff;
	box-shadow: var(--sc-cta-shadow);
}
.sc-primary:hover:not(:disabled) {
	background: var(--sc-indigo-hover);
	border-color: var(--sc-indigo-hover);
	transform: translateY(-2px);
}
.sc-primary:disabled {
	border-color: #cbd5e1;
	background: #cbd5e1;
	box-shadow: none;
	color: #64748b;
}
.sc-primary-large { min-height: 52px; padding: 12px 22px; font-size: 1.05rem; }
.sc-secondary,
.sc-link-button {
	border: 1px solid #c7d2fe;
	background: #fff;
	color: var(--sc-indigo);
	box-shadow: 0 8px 20px -18px rgba(49, 46, 129, .6);
}
.sc-secondary:hover:not(:disabled),
.sc-link-button:hover {
	background: var(--sc-indigo-soft);
	border-color: #a5b4fc;
	transform: translateY(-1px);
}
.sc-text-button {
	min-height: 44px;
	padding: 7px 4px;
	border: 0;
	background: transparent;
	color: var(--sc-indigo);
	box-shadow: none;
}
.sc-text-button:hover { color: var(--sc-indigo-hover); }
.sc-ghost-on-dark {
	border: 1px solid rgba(255,255,255,.42);
	background: rgba(30, 27, 75, .34);
	color: #fff;
}
.sc-ghost-on-dark:hover {
	background: rgba(30, 27, 75, .62);
	transform: translateY(-2px);
}
.sc-equipped-button {
	border: 1px solid #a7f3d0;
	background: var(--sc-emerald-soft);
	color: #047857;
}

.sc-icon-button {
	width: 44px;
	height: 44px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid #dbeafe;
	border-radius: 12px;
	background: #fff;
	color: var(--sc-indigo);
	cursor: pointer;
}
.sc-icon-button:hover { background: var(--sc-indigo-soft); }

.sc-command {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: 76px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 10px clamp(14px, 3vw, 36px);
	background:
		radial-gradient(circle at 16% -140%, rgba(14, 165, 233, .5), transparent 44%),
		var(--sc-indigo-deep);
	color: #fff;
	box-shadow: 0 8px 18px -16px rgba(15, 23, 42, .9);
}
.sc-brand {
	min-width: 320px;
	display: flex;
	align-items: center;
	gap: 11px;
}
.sc-brand-mark {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 13px;
	background: var(--sc-custard);
	color: #4a2b11;
	box-shadow: 0 8px 18px -14px rgba(0,0,0,.8);
}
.sc-brand p,
.sc-brand h1 { margin: 0; }
.sc-brand p {
	color: #c7d2fe;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.25;
}
.sc-brand h1 {
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.35;
}
.sc-brand h1 span {
	margin-left: 4px;
	color: #fcd34d;
	font-size: .96rem;
	white-space: nowrap;
}
.sc-mobile-menu { display: none; }
.sc-wallet {
	min-width: 116px;
	min-height: 44px;
	margin-left: auto;
	display: grid;
	grid-template-columns: 34px auto;
	grid-template-rows: auto auto;
	column-gap: 9px;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(251,191,36,.38);
	border-radius: 12px;
	background: rgba(251,191,36,.1);
	color: #fff;
	text-align: left;
	cursor: pointer;
}
.sc-wallet > span {
	grid-row: 1 / 3;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--sc-custard);
	color: #713f12;
}
.sc-wallet small { color: #fde68a; line-height: 1; }
.sc-wallet strong { line-height: 1.15; }
.sc-sync {
	min-width: 46px;
	color: #c7d2fe;
	font-size: .75rem;
	text-align: center;
}
.sc-sync i { display: block; }
.sc-sync span { display: none; }
.sc-sync.is-saved { color: #6ee7b7; }
.sc-sync.is-error { color: #fda4af; }

.sc-shell {
	min-height: calc(100vh - 76px);
	display: grid;
	grid-template-columns: 196px minmax(0, 1fr);
}
.sc-sidebar {
	position: sticky;
	top: 76px;
	z-index: 28;
	height: calc(100vh - 76px);
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 18px 12px;
	overflow-y: auto;
	background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 74%);
	border-right: 1px solid #c7d2fe;
}
.sc-nav-item {
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 12px;
	color: #3f4b5e;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}
.sc-nav-item > span {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 10px;
	background: #fff;
	color: var(--sc-indigo);
	box-shadow: 0 6px 14px -13px rgba(49, 46, 129, .8);
}
.sc-nav-item strong { font-size: .92rem; }
.sc-nav-item small {
	margin-left: auto;
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--sc-rose-soft);
	color: var(--sc-rose);
	font-size: .75rem;
	font-weight: 800;
	text-align: center;
}
.sc-nav-item:hover {
	background: #fff;
	color: var(--sc-indigo-deep);
	transform: translateX(2px);
}
.sc-nav-item.is-active {
	background: var(--sc-indigo-deep);
	color: #fff;
	box-shadow: 0 10px 22px -18px rgba(49,46,129,.92);
}
.sc-nav-item.is-active > span {
	background: var(--sc-custard);
	color: #713f12;
}
.sc-nav-back {
	margin-top: 8px;
	padding-top: 12px;
	border-top: 1px solid #c7d2fe;
	border-radius: 0 0 12px 12px;
}
.sc-nav-back > span { background: #fff7ed; color: #9a3412; }
.sc-sidebar-progress {
	margin-top: auto;
	padding: 14px 10px;
	border-top: 1px solid #c7d2fe;
}
.sc-sidebar-progress p,
.sc-sidebar-progress strong { margin: 0; font-size: .8rem; }
.sc-sidebar-progress p { color: var(--sc-muted); }
.sc-sidebar-progress > div,
.sc-heading-progress > div {
	height: 6px;
	margin-top: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: #e2e8f0;
}
.sc-sidebar-progress > div span,
.sc-heading-progress > div span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sc-custard), #10b981);
}

.sc-main { min-width: 0; }
.sc-view {
	width: min(1360px, 100%);
	margin: 0 auto;
	padding: clamp(18px, 3vw, 34px);
}
.sc-page-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}
.sc-page-heading h2 {
	margin: 0;
	color: #111827;
	font-size: clamp(1.65rem, 3vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.sc-page-heading p {
	margin: 7px 0 0;
	max-width: 70ch;
	color: var(--sc-muted);
}
.sc-heading-progress { width: min(220px, 34vw); }
.sc-heading-progress strong { display: block; color: var(--sc-indigo-deep); text-align: right; }

.sc-cafe-scene {
	position: relative;
	min-height: clamp(420px, 56vw, 620px);
	display: flex;
	align-items: center;
	overflow: hidden;
	border-radius: 16px;
	background-color: #334155;
	background-position: center;
	background-size: cover;
	box-shadow: var(--sc-soft-shadow);
	isolation: isolate;
}
.sc-cafe-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 58%, rgba(15,23,42,.34));
	pointer-events: none;
}
.sc-scene-copy {
	width: min(600px, 58%);
	padding: clamp(28px, 6vw, 74px);
	color: #fff;
	text-shadow: 0 2px 12px rgba(15,23,42,.48);
}
.sc-scene-copy h2 {
	margin: 0;
	max-width: 9ch;
	font-size: clamp(2.9rem, 6vw, 5.7rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: .96;
	text-wrap: balance;
}
.sc-scene-copy p {
	max-width: 52ch;
	margin: 20px 0 0;
	color: #eef2ff;
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	text-wrap: pretty;
}
.sc-scene-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
	text-shadow: none;
}
.sc-mascot {
	position: absolute;
	right: clamp(10px, 5vw, 70px);
	bottom: -4%;
	width: min(30%, 330px);
	max-height: 82%;
	object-fit: contain;
	object-position: bottom;
	filter: drop-shadow(0 22px 18px rgba(15,23,42,.28));
}

.sc-order-rail {
	position: relative;
	margin-top: 18px;
	padding: 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-order-rail::before,
.sc-live-rail::before {
	content: "";
	position: absolute;
	left: 24px;
	right: 24px;
	top: 78px;
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(180deg, #8b5e3c, #5f3a24);
	box-shadow: 0 3px 8px -5px rgba(68,38,20,.8);
}
.sc-rail-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}
.sc-rail-heading h3,
.sc-rail-heading p { margin: 0; }
.sc-rail-heading h3 { font-size: 1.25rem; font-weight: 800; }
.sc-rail-heading p { color: var(--sc-muted); font-size: .9rem; }
.sc-ticket-track,
.sc-live-rail {
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr));
	gap: 14px;
}
.sc-ticket {
	position: relative;
	min-height: 174px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 26px 17px 15px;
	border: 1px solid #eadfcd;
	border-radius: 14px;
	background: var(--sc-paper);
	color: var(--sc-ink);
	box-shadow: 0 12px 22px -20px rgba(77, 54, 34, .8);
	transform: translateY(4px) rotate(.3deg);
}
.sc-ticket:nth-child(even) { transform: translateY(7px) rotate(-.45deg); }
.sc-ticket.is-ready {
	border-color: #a5b4fc;
	background: #fff;
	box-shadow: 0 16px 26px -20px rgba(49,46,129,.7);
	transform: translateY(0) rotate(0);
}
.sc-ticket-clip {
	position: absolute;
	top: -12px;
	left: 50%;
	width: 22px;
	height: 32px;
	border-radius: 7px 7px 5px 5px;
	background: linear-gradient(90deg, #8f5b31, #c88d54 46%, #8b552c);
	box-shadow: 0 4px 8px -5px rgba(68,38,20,.8);
	transform: translateX(-50%);
}
.sc-ticket small {
	color: var(--sc-caramel);
	font-size: .75rem;
	font-weight: 800;
}
.sc-ticket > strong {
	margin-top: 8px;
	color: var(--sc-indigo-deep);
	font-size: clamp(1.55rem, 3vw, 2.35rem);
	line-height: 1.15;
}
.sc-ticket > div {
	width: 100%;
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 7px;
	padding-top: 10px;
	border-top: 1px dashed #d6c7b4;
	color: var(--sc-pandan);
	font-size: .84rem;
	font-weight: 700;
}

.sc-home-status {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: 14px;
}
.sc-status-path {
	padding: 20px;
	border-radius: 16px;
	background: var(--sc-indigo-deep);
	color: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-status-path h3,
.sc-status-path p { margin: 0; }
.sc-status-path p { color: #c7d2fe; font-size: .88rem; }
.sc-status-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}
.sc-status-steps span {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(255,255,255,.1);
	color: #a5b4fc;
	font-size: .78rem;
}
.sc-status-steps span.is-done { background: var(--sc-emerald); color: #fff; }
.sc-status-action {
	min-height: 128px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 18px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: var(--sc-ink);
	text-align: left;
	box-shadow: var(--sc-soft-shadow);
	cursor: pointer;
	transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease;
}
.sc-status-action:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -26px rgba(15,23,42,.5);
}
.sc-status-action > span {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--sc-custard-soft);
	color: #92400e;
}
.sc-status-action.is-collection > span { background: var(--sc-pandan-soft); color: var(--sc-pandan); }
.sc-status-action strong,
.sc-status-action small { display: block; }
.sc-status-action small { color: var(--sc-muted); line-height: 1.45; }
.sc-status-action > i { color: var(--sc-indigo); }

.sc-learn-layout {
	display: grid;
	grid-template-columns: minmax(210px, 290px) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.sc-lesson-list {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 7px;
}
.sc-lesson-list button {
	min-height: 68px;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: transparent;
	color: var(--sc-ink);
	text-align: left;
	cursor: pointer;
}
.sc-lesson-list button > span {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #fff;
	color: var(--sc-indigo);
	font-weight: 800;
	box-shadow: 0 8px 18px -17px rgba(49,46,129,.8);
}
.sc-lesson-list button strong,
.sc-lesson-list button small { display: block; }
.sc-lesson-list button small {
	margin-top: 2px;
	color: var(--sc-muted);
	font-size: .76rem;
	line-height: 1.35;
}
.sc-lesson-list button.is-active {
	border-color: #c7d2fe;
	background: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-lesson-list button.is-done > span { background: var(--sc-emerald-soft); color: var(--sc-emerald); }
.sc-lesson-list button.is-locked { color: #94a3b8; opacity: .76; }
.sc-lesson-list button.is-locked > span { color: #94a3b8; background: #f1f5f9; }
.sc-lesson-paper {
	padding: clamp(22px, 4vw, 44px);
	border: 1px solid #eadfcd;
	border-radius: 16px;
	background: var(--sc-paper);
	box-shadow: var(--sc-soft-shadow);
}
.sc-lesson-paper > header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 22px;
	border-bottom: 1px solid #eadfcd;
}
.sc-lesson-paper > header > span {
	width: 50px;
	height: 50px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 14px;
	background: var(--sc-indigo);
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
}
.sc-lesson-paper h3,
.sc-lesson-paper > header p { margin: 0; }
.sc-lesson-paper h3 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; }
.sc-lesson-paper > header p { color: var(--sc-muted); }
.sc-lesson-intro {
	max-width: 72ch;
	margin: 24px 0;
	color: #344054;
	font-size: 1.08rem;
}
.sc-highlight-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
	gap: 10px;
	margin: 20px 0 30px;
}
.sc-highlight-flow > div {
	min-height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 24px -22px rgba(15,23,42,.55);
}
.sc-highlight-flow small,
.sc-highlight-flow strong,
.sc-highlight-flow span { display: block; }
.sc-highlight-flow small { color: var(--sc-muted); }
.sc-highlight-flow strong { margin: 5px 0; font-size: 1.45rem; line-height: 1.2; }
.sc-highlight-flow span { font-size: .82rem; }
.sc-highlight-flow .is-custard { background: var(--sc-custard-soft); color: #78350f; }
.sc-highlight-flow .is-pandan { background: var(--sc-pandan-soft); color: #22543d; }
.sc-highlight-flow .is-rose { background: var(--sc-rose-soft); color: #9f1239; }
.sc-highlight-flow .is-indigo { background: var(--sc-indigo-soft); color: var(--sc-indigo-deep); }
.sc-one-short-guide {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #ead8b7;
	border-radius: 16px;
	background: #fffaf0;
}
.sc-one-short-guide > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.sc-one-short-guide h4 { margin: 0 0 4px; font-size: 1.12rem; }
.sc-one-short-guide header p { margin: 0; color: #6b4f2a; }
.sc-one-short-formula {
	flex: 0 0 auto;
	padding: 8px 11px;
	border-radius: 10px;
	background: var(--sc-custard-soft);
	color: #78350f;
	font-size: .82rem;
	font-weight: 800;
}
.sc-one-short-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-top: 18px;
}
.sc-one-short-grid > div {
	min-width: 0;
	padding: 12px 10px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 18px -18px rgba(78, 53, 21, .8);
}
.sc-one-short-grid strong,
.sc-one-short-grid span,
.sc-one-short-grid small { display: block; }
.sc-one-short-grid strong { color: var(--sc-indigo-deep); font-size: 1.45rem; line-height: 1; }
.sc-one-short-grid span { overflow-wrap: anywhere; margin-top: 8px; color: #5b3b19; font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.sc-one-short-grid small { margin-top: 5px; color: #816b4d; font-size: .7rem; line-height: 1.25; }
.sc-one-short-note { margin: 16px 0 0; color: #6b4f2a; font-size: .86rem; }
.sc-one-short-note i { margin-right: 5px; color: #b7791f; }
.sc-rule-block,
.sc-example-block,
.sc-summary-block { margin-top: 30px; }
.sc-rule-block h4,
.sc-example-block h4,
.sc-summary-block h4 { margin: 0 0 12px; font-size: 1.08rem; }
.sc-rule-block ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-rule-block li {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid #eee7dc;
}
.sc-rule-block li > span {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: var(--sc-indigo);
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
}
.sc-rule-block li p { margin: 0; }
.sc-example-block { display: grid; gap: 10px; }
.sc-example-block figure {
	margin: 0;
	padding: 16px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 22px -22px rgba(15,23,42,.7);
}
.sc-example-block blockquote {
	margin: 0;
	color: var(--sc-indigo-deep);
	font-size: 1.2rem;
	font-weight: 800;
}
.sc-example-block figcaption { margin-top: 8px; }
.sc-example-block figcaption strong,
.sc-example-block figcaption span { display: block; }
.sc-example-block figcaption span { margin-top: 3px; color: var(--sc-muted); font-size: .78rem; }
.sc-summary-block {
	padding: 18px;
	border-radius: 14px;
	background: var(--sc-pandan-soft);
}
.sc-summary-block p { display: flex; gap: 9px; margin: 8px 0 0; color: #22543d; }
.sc-summary-block i { margin-top: 4px; color: var(--sc-emerald); }
.sc-lesson-paper > footer {
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.sc-complete-label { color: var(--sc-emerald); font-size: .88rem; font-weight: 800; }

.sc-order-lobby,
.sc-session-complete,
.sc-order-workspace { min-height: 70vh; }
.sc-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.sc-category-grid button {
	min-height: 92px;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	padding: 14px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #fff;
	color: var(--sc-ink);
	text-align: left;
	box-shadow: 0 10px 22px -22px rgba(15,23,42,.6);
	cursor: pointer;
}
.sc-category-grid button > span {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background-color: var(--sc-custard-soft);
	color: #92400e;
}
.sc-category-grid button strong,
.sc-category-grid button small { display: block; }
.sc-category-grid button small { color: var(--sc-muted); }
.sc-category-grid button > i { visibility: hidden; color: var(--sc-emerald); }
.sc-category-grid button.is-active {
	border-color: #818cf8;
	background: var(--sc-indigo-soft);
}
.sc-category-grid button.is-active > span { background: var(--sc-indigo); color: #fff; }
.sc-category-grid button.is-active > i { visibility: visible; }
.sc-category-grid button.is-empty { opacity: .48; }
.sc-lobby-summary {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px;
	border-radius: 16px;
	background: var(--sc-indigo-deep);
	color: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-lobby-summary > div {
	display: flex;
	align-items: center;
	gap: 13px;
}
.sc-lobby-summary > div > i {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--sc-custard);
	color: #713f12;
}
.sc-lobby-summary strong,
.sc-lobby-summary small { display: block; }
.sc-lobby-summary small { color: #c7d2fe; }

.sc-empty {
	min-height: 430px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 28px;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	box-shadow: var(--sc-soft-shadow);
}
.sc-empty > span {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--sc-custard-soft);
	color: #92400e;
	font-size: 28px;
}
.sc-empty h3 { margin: 16px 0 4px; font-size: 1.4rem; }
.sc-empty p { max-width: 52ch; margin: 0 0 18px; color: var(--sc-muted); }

.sc-workspace-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}
.sc-session-meter { display: flex; gap: 7px; }
.sc-session-meter span {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: #e2e8f0;
	color: #64748b;
	font-size: .78rem;
	font-weight: 800;
}
.sc-session-meter span.is-current { background: var(--sc-indigo); color: #fff; }
.sc-session-meter span.is-done { background: var(--sc-emerald); color: #fff; }
.sc-live-rail {
	position: relative;
	grid-template-columns: repeat(4, minmax(130px, 210px));
	margin-top: 18px;
	padding: 32px 22px 14px;
	overflow-x: auto;
}
.sc-live-rail::before { top: 17px; left: 10px; right: 10px; }
.sc-live-rail .sc-ticket { min-height: 110px; padding-top: 23px; }
.sc-live-rail .sc-ticket > strong { font-size: 1.4rem; }
.sc-stage-nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 14px 0;
}
.sc-stage-nav > div {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff;
	color: #64748b;
}
.sc-stage-nav > div > span {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: #e2e8f0;
	font-size: .8rem;
}
.sc-stage-nav > div.is-current { background: var(--sc-indigo-soft); color: var(--sc-indigo-deep); }
.sc-stage-nav > div.is-current > span { background: var(--sc-indigo); color: #fff; }
.sc-stage-nav > div.is-done { color: #047857; }
.sc-stage-nav > div.is-done > span { background: var(--sc-emerald); color: #fff; }
.sc-order-grid {
	display: grid;
	grid-template-areas: "ticket question tray";
	grid-template-columns: minmax(190px, .72fr) minmax(360px, 1.7fr) minmax(230px, .85fr);
	gap: 14px;
	align-items: stretch;
}
.sc-active-ticket,
.sc-question-panel,
.sc-tray-panel {
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-active-ticket {
	grid-area: ticket;
	position: relative;
	padding: 38px 20px 20px;
	border: 1px solid #eadfcd;
	background: var(--sc-paper);
}
.sc-active-ticket > strong {
	display: block;
	margin-top: 0;
	color: var(--sc-indigo-deep);
	font-size: clamp(2.2rem, 5vw, 4.4rem);
	line-height: 1.05;
	overflow-wrap: anywhere;
}
.sc-active-ticket > p {
	margin: 18px 0;
	color: #334155;
	font-size: 1.03rem;
}
.sc-question-panel {
	grid-area: question;
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 3vw, 30px);
}
.sc-question-title {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.sc-question-title > span {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border-radius: 10px;
	background: var(--sc-indigo);
	color: #fff;
	font-weight: 800;
}
.sc-question-title small { color: var(--sc-muted); font-weight: 700; }
.sc-question-title h2 {
	margin: 2px 0 0;
	font-size: clamp(1.25rem, 2.3vw, 1.8rem);
	line-height: 1.3;
}
.sc-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 9px;
	margin-top: 22px;
}
.sc-options button {
	min-height: 68px;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	color: var(--sc-ink);
	text-align: left;
	cursor: pointer;
}
.sc-options button > span {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: #f1f5f9;
	color: #475569;
	font-size: .78rem;
	font-weight: 800;
}
.sc-options button > strong {
	min-width: 0;
	font-size: 1.4rem;
	line-height: 1.3;
}
.sc-options button > i { color: transparent; }
.sc-options button:hover:not(:disabled),
.sc-options button.is-selected {
	border-color: #818cf8;
	background: var(--sc-indigo-soft);
}
.sc-options button.is-selected > span { background: var(--sc-indigo); color: #fff; }
.sc-options button.is-selected > i { color: var(--sc-indigo); }
.sc-options button.is-correct { border-color: #6ee7b7; background: var(--sc-emerald-soft); }
.sc-options button.is-correct > span { background: var(--sc-emerald); color: #fff; }
.sc-options button.is-correct > i { color: var(--sc-emerald); }
.sc-options button.is-wrong { border-color: #fda4af; background: var(--sc-rose-soft); }
.sc-options button.is-wrong > span { background: var(--sc-rose); color: #fff; }
.sc-options button.is-wrong > i { color: var(--sc-rose); }
.sc-hint,
.sc-feedback {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	padding: 13px 14px;
	border-radius: 12px;
}
.sc-hint {
	background: var(--sc-custard-soft);
	color: #78350f;
}
.sc-hint i,
.sc-feedback > i { margin-top: 4px; }
.sc-hint p,
.sc-feedback p { margin: 0; }
.sc-hint strong,
.sc-feedback strong { display: block; }
.sc-feedback.is-correct { background: var(--sc-emerald-soft); color: #065f46; }
.sc-feedback.is-wrong { background: var(--sc-rose-soft); color: #9f1239; }
.sc-question-panel > footer {
	margin-top: auto;
	padding-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.sc-tray-panel {
	grid-area: tray;
	padding: 20px;
	background: #f8fbf7;
}
.sc-tray-panel h3,
.sc-tray-panel > p { margin: 0; }
.sc-tray-panel > p { color: var(--sc-muted); font-size: .82rem; }
.sc-unit-tray,
.sc-bundle-tray {
	min-height: 180px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-content: center;
	gap: 8px;
	margin-top: 14px;
	padding: 14px;
	border-radius: 14px;
	background: linear-gradient(145deg, #8b5e3c, #6c452a);
	box-shadow: inset 0 0 0 7px rgba(255,255,255,.08), 0 14px 24px -22px rgba(68,38,20,.9);
}
.sc-unit-tray.is-crowded { grid-template-columns: repeat(6, 1fr); }
.sc-unit-tray span,
.sc-bundle-tray > span {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--sc-custard-soft);
	color: #a16207;
	font-size: clamp(.8rem, 1.8vw, 1.15rem);
	box-shadow: 0 8px 16px -14px rgba(0,0,0,.8);
}
.sc-bundle-tray {
	grid-template-columns: repeat(3, minmax(48px, 1fr));
}
.sc-bundle-tray > div {
	min-height: 58px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #e8d3b8;
	color: #6b3f24;
}
.sc-bundle-tray > div i { font-size: 1.2rem; }
.sc-bundle-tray > div strong { font-size: .8rem; }
.sc-tray-total {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}
.sc-tray-total strong { color: var(--sc-indigo-deep); font-size: 2.2rem; line-height: 1; }
.sc-tray-total span,
.sc-tray-total small { color: var(--sc-muted); }
.sc-ingredient-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 16px;
}
.sc-ingredient-row span {
	min-height: 58px;
	display: grid;
	place-items: center;
	padding: 6px;
	border-radius: 10px;
	background: #e2e8f0;
	color: #94a3b8;
	text-align: center;
}
.sc-ingredient-row span.is-earned {
	background: var(--sc-custard-soft);
	color: #92400e;
	animation: sc-ingredient .45s cubic-bezier(.22, 1, .36, 1);
}
.sc-ingredient-row small { display: block; font-size: .68rem; }

.sc-session-complete {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px;
	text-align: center;
}
.sc-finish-stamp {
	width: 86px;
	height: 86px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	background: var(--sc-emerald-soft);
	color: var(--sc-emerald);
	font-size: 34px;
	transform: rotate(-5deg);
}
.sc-session-complete h2 { margin: 20px 0 6px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.sc-session-complete > p { max-width: 56ch; margin: 0; color: var(--sc-muted); }
.sc-session-complete > div {
	display: grid;
	grid-template-columns: repeat(3, minmax(120px, 1fr));
	gap: 10px;
	margin-top: 24px;
}
.sc-session-complete > div span {
	padding: 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--sc-soft-shadow);
}
.sc-session-complete small,
.sc-session-complete strong { display: block; }
.sc-session-complete small { color: var(--sc-muted); }
.sc-session-complete strong { font-size: 1.5rem; color: var(--sc-indigo-deep); }
.sc-session-complete footer { display: flex; gap: 10px; margin-top: 22px; }

.sc-review-list { display: grid; gap: 9px; }
.sc-review-list article {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 24px -24px rgba(15,23,42,.7);
}
.sc-review-list article > span {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--sc-rose-soft);
	color: var(--sc-rose);
}
.sc-review-list small,
.sc-review-list strong,
.sc-review-list p { display: block; margin: 0; }
.sc-review-list > article > div > small { color: var(--sc-muted); }
.sc-review-list > article > div > strong { color: var(--sc-indigo-deep); font-size: 1.2rem; }
.sc-review-list p { color: var(--sc-muted); font-size: .82rem; }
.sc-review-meter {
	display: grid;
	grid-template-columns: 30px 30px;
	gap: 5px;
}
.sc-review-meter span {
	height: 8px;
	border-radius: 999px;
	background: #e2e8f0;
}
.sc-review-meter span.is-done { background: var(--sc-emerald); }
.sc-review-meter small { grid-column: 1 / 3; text-align: right; }

.sc-collection-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 14px;
}
.sc-collection-heading h2 { margin: 0 0 6px; }
.sc-collection-heading p { max-width: 58ch; margin: 0; color: var(--sc-muted); }
.sc-collection-progress {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
	gap: 8px;
	flex: 0 0 auto;
	padding: 9px 14px;
	border: 1px solid #d9dfeb;
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 10px 20px -24px rgba(15,23,42,.8);
}
.sc-collection-progress strong { color: var(--sc-indigo-deep); font-size: 1.65rem; line-height: 1; }
.sc-collection-progress span { color: var(--sc-muted); font-size: .8rem; }
.sc-collection-guide {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 14px;
	color: var(--sc-muted);
	font-size: .84rem;
}
.sc-collection-guide span { display: inline-flex; align-items: center; gap: 5px; }
.sc-collection-guide span:first-child::before,
.sc-collection-guide span:last-child::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sc-pandan);
}
.sc-collection-guide span:last-child::before { background: var(--sc-indigo); }
.sc-collection-guide b { color: var(--sc-ink); }
.sc-cabinet {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 18px;
	border-radius: 16px;
	background: linear-gradient(145deg, #6f4529, #8e5d3a);
	box-shadow: inset 0 0 0 8px rgba(255,255,255,.06), var(--sc-soft-shadow);
}
.sc-cabinet button {
	min-height: 146px;
	display: grid;
	grid-template-columns: 58px 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	padding: 14px;
	border: 2px solid transparent;
	border-radius: 14px;
	background: #fff;
	color: var(--sc-ink);
	text-align: left;
	box-shadow: 0 10px 18px -16px rgba(45,25,12,.9);
	cursor: pointer;
}
.sc-cabinet button:not(:disabled):hover { transform: translateY(-2px); }
.sc-cabinet button:focus-visible { outline: 3px solid rgba(79,70,229,.35); outline-offset: 3px; }
.sc-cabinet button.is-selected { border-color: var(--sc-pandan); box-shadow: 0 12px 24px -16px rgba(16,93,74,.75); }
.sc-collection-number {
	display: grid;
	place-items: center;
	width: 58px;
	height: 72px;
	border-radius: 16px;
	background: var(--sc-custard-soft);
	color: var(--sc-indigo-deep);
	font-size: 2.65rem;
	font-weight: 800;
	line-height: 1;
}
.sc-collection-number.is-empty { color: #a7a09a; font-size: 1.3rem; background: #f2eee8; }
.sc-collection-art {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 15px;
	background: var(--sc-custard-soft);
}
.sc-collection-art img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(56, 34, 14, .2)); }
.sc-collection-copy { min-width: 0; }
.sc-collection-copy strong,
.sc-collection-copy small,
.sc-collection-pali { display: block; }
.sc-collection-copy strong { margin: 2px 0 7px; font-size: 1.05rem; line-height: 1.25; }
.sc-collection-kind { color: var(--sc-pandan); font-size: .73rem; font-weight: 700; }
.sc-collection-pali {
	margin-bottom: 7px;
	color: var(--sc-indigo-deep);
	font-size: clamp(1.38rem, 1.8vw, 1.6rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .02em;
}
.sc-collection-pali small { display: inline; margin-right: 7px; color: var(--sc-muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.sc-collection-status { color: var(--sc-muted); font-size: .76rem; }
.sc-cabinet button > i { color: var(--sc-indigo); }
.sc-cabinet button.is-pandan .sc-collection-art { background: var(--sc-pandan-soft); color: var(--sc-pandan); }
.sc-cabinet button.is-coconut .sc-collection-art { background: var(--sc-coconut); color: #846a52; }
.sc-cabinet button.is-caramel .sc-collection-art { background: var(--sc-caramel-soft); color: var(--sc-caramel); }
.sc-cabinet button.is-rose .sc-collection-art { background: var(--sc-rose-soft); color: var(--sc-rose); }
.sc-cabinet button.is-indigo .sc-collection-art { background: var(--sc-indigo-soft); color: var(--sc-indigo); }
.sc-cabinet button.is-locked { opacity: .62; filter: grayscale(.8); cursor: not-allowed; }

.sc-star-balance {
	display: grid;
	grid-template-columns: 36px auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 9px;
	padding: 8px 12px;
	border-radius: 12px;
	background: var(--sc-custard-soft);
	color: #78350f;
}
.sc-star-balance i {
	grid-row: 1 / 3;
	color: var(--sc-custard);
	font-size: 1.35rem;
}
.sc-star-balance span { font-size: .74rem; }
.sc-star-balance strong { font-size: 1.2rem; }
.sc-decor-layout {
	display: grid;
	grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
	gap: 16px;
	align-items: start;
}
.sc-decor-stage {
	position: sticky;
	top: 96px;
	min-width: 0;
}
.sc-decor-preview {
	position: relative;
	min-height: 0;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 24px;
	border-radius: 16px;
	background-color: #334155;
	background-position: center;
	background-size: cover;
	color: #fff;
	box-shadow: var(--sc-soft-shadow);
	overflow: hidden;
}
.sc-decor-preview::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30,27,75,.74), transparent 42%, rgba(15,23,42,.52));
}
.sc-decor-preview > *:not(.sc-live-decor) { position: relative; z-index: 3; }
.sc-decor-preview h3,
.sc-decor-preview p { margin: 0; }
.sc-decor-preview h3 { font-size: 1.8rem; }
.sc-decor-preview p { color: #e0e7ff; }
.sc-decor-heading {
	width: fit-content;
	max-width: min(390px, 88%);
	padding: 10px 13px;
	border-radius: 12px;
	background: rgba(30, 27, 75, .8);
	box-shadow: 0 14px 28px -22px rgba(15,23,42,.9);
}
.sc-decor-caption {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 10px 13px;
	border-radius: 12px;
	background: #fff;
	color: var(--sc-indigo-deep);
	box-shadow: 0 16px 26px -20px rgba(15,23,42,.82);
}
.sc-decor-caption > i {
	flex: 0 0 auto;
	color: var(--sc-custard);
	font-size: 1.2rem;
}
.sc-decor-caption div { min-width: 0; display: grid; gap: 1px; }
.sc-decor-caption strong { font-size: .82rem; }
.sc-decor-caption span { overflow: hidden; color: #475569; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }

.sc-live-decor {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}
.sc-cafe-decor,
.sc-reward-thumb {
	background-image: url('/assets/game/sankhya-cafe/props/cafe-decor-sprite-v1.webp?v=20260807.1');
	background-repeat: no-repeat;
	background-size: 300% 200%;
}
.sc-cafe-decor {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	filter: drop-shadow(0 14px 12px rgba(42, 27, 15, .26));
	animation: sc-decor-settle .5s cubic-bezier(.22, 1, .36, 1) both;
}
.sc-cafe-decor.is-sign-indigo { left: 76%; top: 6%; z-index: 3; width: 18%; background-position: 0 0; }
.sc-cafe-decor.is-sign-indigo::after {
	content: "สังขยา คาเฟ่";
	position: absolute;
	left: 28%;
	right: 11%;
	top: 65%;
	color: #fff;
	font-family: "Sriracha Local", "Sarabun", sans-serif;
	font-size: clamp(.58rem, 1.4vw, 1.2rem);
	line-height: 1;
	text-align: center;
	text-shadow: 0 2px 5px rgba(15,23,42,.72);
	transform: translateY(-50%) rotate(-.5deg);
}
.sc-cafe-decor.is-plant-pandan { left: 3%; bottom: 2%; z-index: 4; width: 12%; background-position: 50% 0; }
.sc-cafe-decor.is-shelf-coconut { right: 30%; top: 36%; width: 15%; background-position: 100% 0; }
.sc-cafe-decor.is-lamp-custard { left: 30%; top: -5%; z-index: 2; width: 23%; background-position: 0 100%; }
.sc-cafe-decor.is-counter-caramel { left: 61%; bottom: -7%; z-index: 2; width: 30%; background-position: 50% 100%; }
.sc-cafe-decor.is-cabinet-rose { right: 60%; bottom: 10%; z-index: 3; width: 17%; background-position: 100% 100%; }

@keyframes sc-decor-settle {
	from { opacity: .2; filter: blur(7px) drop-shadow(0 5px 4px rgba(42,27,15,.1)); transform: translateY(-14px) scale(.94); }
	to { opacity: 1; filter: blur(0) drop-shadow(0 14px 12px rgba(42,27,15,.26)); transform: translateY(0) scale(1); }
}

.sc-reward-list { display: grid; gap: 9px; }
.sc-reward-list article {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 24px -24px rgba(15,23,42,.68);
}
.sc-reward-list article > span {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background-color: var(--sc-custard-soft);
	color: #92400e;
	font-size: 1.15rem;
}
.sc-reward-list article > .sc-reward-thumb { background-color: #f8fafc; box-shadow: inset 0 0 0 1px rgba(148,163,184,.2); }
.sc-reward-thumb.is-sign-indigo { background-position: 0 0; }
.sc-reward-thumb.is-plant-pandan { background-position: 50% 0; }
.sc-reward-thumb.is-shelf-coconut { background-position: 100% 0; }
.sc-reward-thumb.is-lamp-custard { background-position: 0 100%; }
.sc-reward-thumb.is-counter-caramel { background-position: 50% 100%; }
.sc-reward-thumb.is-cabinet-rose { background-position: 100% 100%; }
.sc-reward-list article.is-pandan > .sc-reward-scene-icon { background: var(--sc-pandan-soft); color: var(--sc-pandan); }
.sc-reward-list article.is-coconut > .sc-reward-scene-icon { background: var(--sc-coconut); color: #846a52; }
.sc-reward-list article.is-caramel > .sc-reward-scene-icon { background: var(--sc-caramel-soft); color: var(--sc-caramel); }
.sc-reward-list article.is-rose > .sc-reward-scene-icon { background: var(--sc-rose-soft); color: var(--sc-rose); }
.sc-reward-list article.is-indigo > .sc-reward-scene-icon { background: var(--sc-indigo-soft); color: var(--sc-indigo); }
.sc-reward-list article.is-equipped { background: #f0fdf4; }
.sc-reward-list small,
.sc-reward-list h3,
.sc-reward-list p { margin: 0; }
.sc-reward-list small { color: var(--sc-muted); text-transform: uppercase; font-size: .7rem; }
.sc-reward-list h3 { font-size: 1.02rem; }
.sc-reward-list p { color: var(--sc-muted); font-size: .8rem; }

@media (max-width: 1180px) {
	.sc-decor-layout { grid-template-columns: 1fr; }
	.sc-decor-stage { position: relative; top: auto; }
}

.sc-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	padding: 18px;
	background: rgba(15,23,42,.64);
}
.sc-onboarding,
.sc-celebration {
	width: min(500px, 100%);
	max-height: calc(100vh - 36px);
	overflow-y: auto;
	padding: 28px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 28px 50px -34px rgba(0,0,0,.7);
	text-align: center;
}
.sc-onboarding > img {
	width: 130px;
	height: 145px;
	object-fit: contain;
	object-position: bottom;
}
.sc-onboarding h2,
.sc-celebration h2 { margin: 8px 0 6px; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.2; }
.sc-onboarding > p,
.sc-celebration > p { margin: 0; color: var(--sc-muted); }
.sc-onboarding footer {
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.sc-onboarding-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 20px 0;
}
.sc-onboarding-steps span {
	min-width: 100px;
	display: grid;
	place-items: center;
	gap: 6px;
	padding: 12px 8px;
	border-radius: 12px;
	background: var(--sc-indigo-soft);
	color: var(--sc-indigo-deep);
	font-weight: 800;
}
.sc-onboarding-steps span i { color: var(--sc-indigo); }
.sc-onboarding-steps > i { color: #94a3b8; }

.sc-complete-stamp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 11px;
	border: 2px solid var(--sc-emerald);
	border-radius: 10px;
	color: var(--sc-emerald);
	font-weight: 800;
	transform: rotate(-3deg);
}
.sc-celebration-dessert {
	width: 100px;
	height: 100px;
	display: grid;
	place-items: center;
	margin: 20px auto 0;
	border-radius: 22px;
	background: var(--sc-custard-soft);
	color: #92400e;
	font-size: 42px;
	box-shadow: var(--sc-soft-shadow);
	animation: sc-serve .62s cubic-bezier(.2, .8, .2, 1);
}
.sc-celebration-dessert.is-pandan { background: var(--sc-pandan-soft); color: var(--sc-pandan); }
.sc-celebration-dessert.is-coconut { background: var(--sc-coconut); color: #846a52; }
.sc-celebration-dessert.is-caramel { background: var(--sc-caramel-soft); color: var(--sc-caramel); }
.sc-celebration-dessert.is-rose { background: var(--sc-rose-soft); color: var(--sc-rose); }
.sc-celebration-dessert.is-indigo { background: var(--sc-indigo-soft); color: var(--sc-indigo); }
.sc-reward-earned {
	width: min(240px, 100%);
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	margin: 18px auto;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--sc-custard-soft);
	color: #78350f;
	text-align: left;
}
.sc-reward-earned > i {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: var(--sc-custard);
}
.sc-reward-earned strong { font-size: 1.2rem; }

.sc-toast {
	position: fixed;
	z-index: 95;
	left: 50%;
	bottom: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: min(560px, calc(100vw - 30px));
	padding: 11px 15px;
	border-radius: 12px;
	background: #173d32;
	color: #fff;
	box-shadow: 0 18px 30px -24px rgba(0,0,0,.8);
	transform: translateX(-50%);
	animation: sc-toast-in .28s cubic-bezier(.22, 1, .36, 1);
}
.sc-toast i { color: #6ee7b7; }
.sc-announcer {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Number workshop */
.sc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 6px;
	color: var(--sc-pandan);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sc-number-mode-switch {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	border: 1px solid #dbe1eb;
	border-radius: 14px;
	background: #eef2f7;
}
.sc-number-mode-switch button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #64748b;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}
.sc-number-mode-switch button.is-active {
	background: #fff;
	color: var(--sc-indigo);
	box-shadow: 0 5px 14px -11px rgba(15,23,42,.75);
}
.sc-number-source-note {
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
	padding: 14px 16px;
	border: 1px solid #c7d2fe;
	border-top: 2px solid var(--sc-indigo);
	border-radius: 12px;
	background: var(--sc-indigo-soft);
	color: #3730a3;
}
.sc-number-source-note > i {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: #fff;
}
.sc-number-source-note p { margin: 0; }
.sc-number-source-note strong { color: var(--sc-indigo-deep); }
.sc-number-source-note a,
.sc-number-source-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	color: var(--sc-indigo);
	font-weight: 800;
	text-decoration: none;
}
.sc-number-source-note a:hover,
.sc-number-source-link:hover { text-decoration: underline; }
.sc-number-recipes,
.sc-number-atlas,
.sc-memory-bridge,
.sc-number-builders {
	margin-top: 22px;
}
.sc-number-recipes > header,
.sc-number-atlas > header,
.sc-memory-bridge > header,
.sc-number-builders > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 14px;
}
.sc-number-recipes > header small,
.sc-number-atlas > header small,
.sc-memory-bridge > header small,
.sc-number-builders > header small,
.sc-number-drill-copy small {
	color: var(--sc-pandan);
	font-size: .76rem;
	font-weight: 800;
	letter-spacing: .06em;
}
.sc-number-recipes h3,
.sc-number-atlas h3,
.sc-memory-bridge h3,
.sc-number-builders h3,
.sc-number-drill-copy h3 {
	margin: 2px 0 0;
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
	line-height: 1.25;
}
.sc-number-recipes > header p,
.sc-memory-bridge > header p {
	max-width: 64ch;
	margin: 0;
	color: var(--sc-muted);
	font-size: .9rem;
	text-align: right;
}
.sc-number-recipe-rail {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--sc-line);
	border-radius: 16px;
	background: var(--sc-paper);
	box-shadow: var(--sc-soft-shadow);
}
.sc-number-recipe-rail article {
	position: relative;
	min-width: 0;
	padding: 20px;
	border-left: 1px dashed #d8dee9;
}
.sc-number-recipe-rail article:first-child { border-left: 0; }
.sc-number-recipe-rail article > span {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #fff;
	color: var(--sc-indigo);
	font-weight: 800;
	box-shadow: 0 4px 12px -9px rgba(15,23,42,.65);
}
.sc-number-recipe-rail article > small {
	display: block;
	padding-right: 30px;
	color: var(--sc-muted);
	font-weight: 800;
}
.sc-number-recipe-rail article > strong {
	display: block;
	margin: 16px 0 5px;
	color: var(--sc-indigo-deep);
	font-size: 1.12rem;
}
.sc-number-recipe-rail article > p {
	min-height: 46px;
	margin: 0;
	font-weight: 800;
}
.sc-number-recipe-rail article > footer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed rgba(100,116,139,.24);
	color: var(--sc-muted);
	font-size: .84rem;
}
.sc-number-recipe-rail article.is-custard { background: var(--sc-custard-soft); }
.sc-number-recipe-rail article.is-pandan { background: var(--sc-pandan-soft); }
.sc-number-recipe-rail article.is-caramel { background: var(--sc-caramel-soft); }
.sc-number-recipe-rail article.is-indigo { background: var(--sc-indigo-soft); }
.sc-number-atlas {
	padding: clamp(16px, 2.5vw, 26px);
	border: 1px solid #ded8c9;
	border-radius: 16px;
	background:
		linear-gradient(rgba(79,70,229,.035) 1px, transparent 1px),
		var(--sc-paper);
	background-size: 100% 32px;
	box-shadow: var(--sc-soft-shadow);
}
.sc-number-atlas > header > span {
	color: var(--sc-muted);
	font-size: .85rem;
	font-weight: 800;
}
.sc-number-group-tabs {
	display: flex;
	gap: 8px;
	margin: 0 -2px 18px;
	padding: 2px 2px 8px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.sc-number-group-tabs button {
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding: 8px 13px;
	border: 1px solid #d8dee9;
	border-radius: 10px;
	background: rgba(255,255,255,.88);
	color: #475569;
	font: inherit;
	cursor: pointer;
}
.sc-number-group-tabs button small { color: #64748b; }
.sc-number-group-tabs button.is-active {
	border-color: var(--sc-indigo);
	background: var(--sc-indigo);
	color: #fff;
	box-shadow: var(--sc-cta-shadow);
}
.sc-number-group-tabs button.is-active small { color: #eef2ff; }
.sc-number-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 8px;
}
.sc-number-card-grid article {
	position: relative;
	min-height: 94px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 34px 12px 13px;
	border: 1px solid #e5e7eb;
	border-radius: 9px;
	background: rgba(255,255,255,.94);
}
.sc-number-card-grid article > span {
	color: var(--sc-caramel);
	font-size: .76rem;
	font-weight: 800;
}
.sc-number-card-grid article > strong {
	margin-top: 4px;
	color: var(--sc-indigo-deep);
	font-size: 1.08rem;
	line-height: 1.25;
	word-break: break-word;
}
.sc-number-card-grid article > a {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	color: #64748b;
	text-decoration: none;
}
.sc-number-card-grid article > a:hover { background: var(--sc-indigo-soft); color: var(--sc-indigo); }
.sc-memory-bridge {
	padding: clamp(16px, 2.4vw, 24px);
	border: 1px solid #bbdfc4;
	border-radius: 16px;
	background: #f4fbf5;
}
.sc-memory-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border: 1px solid #cee4d3;
	border-radius: 12px;
	background: #cee4d3;
}
.sc-memory-strip article {
	min-width: 0;
	padding: 13px;
	background: #fff;
}
.sc-memory-strip article > span {
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	float: left;
	margin: 0 9px 8px 0;
	border-radius: 9px;
	background: var(--sc-pandan-soft);
	color: var(--sc-pandan);
	font-weight: 800;
}
.sc-memory-strip article strong,
.sc-memory-strip article small { display: block; }
.sc-memory-strip article small {
	overflow: hidden;
	color: var(--sc-caramel);
	font-size: .74rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sc-memory-strip article p {
	clear: both;
	margin: 7px 0 0;
	color: var(--sc-muted);
	font-size: .78rem;
	line-height: 1.4;
}
.sc-number-builders > header { align-items: center; }
.sc-number-builder {
	display: grid;
	grid-template-columns: minmax(140px, .55fr) minmax(260px, 1.15fr) minmax(300px, 1.5fr);
	gap: 20px;
	align-items: center;
	margin-bottom: 12px;
	padding: 18px 20px 14px;
	border: 1px solid #ded8c9;
	border-top: 2px solid var(--sc-custard);
	border-radius: 13px;
	background: var(--sc-paper);
	box-shadow: 0 10px 26px -24px rgba(15,23,42,.6);
}
.sc-number-builder-value small,
.sc-number-result > small {
	display: block;
	color: var(--sc-muted);
	font-size: .75rem;
	font-weight: 800;
}
.sc-number-builder-value > strong {
	display: block;
	color: var(--sc-indigo-deep);
	font-size: clamp(1.8rem, 3.5vw, 2.65rem);
	line-height: 1.05;
}
.sc-number-builder-value > span {
	display: block;
	margin-top: 5px;
	color: var(--sc-muted);
	font-size: .8rem;
}
.sc-number-parts {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	overflow-x: auto;
	padding: 3px;
}
.sc-number-parts > span {
	min-width: 96px;
	flex: 0 0 auto;
	padding: 8px 10px;
	border: 1px solid #e4dccb;
	border-radius: 9px;
	background: #fffaf0;
}
.sc-number-parts > span small,
.sc-number-parts > span strong { display: block; }
.sc-number-parts > span small { color: var(--sc-muted); font-size: .72rem; }
.sc-number-parts > i { color: var(--sc-caramel); font-size: .72rem; }
.sc-number-result {
	min-width: 0;
	padding-left: 18px;
	border-left: 1px dashed #cbd5e1;
}
.sc-number-result > strong {
	display: block;
	color: var(--sc-indigo-deep);
	font-size: 1.08rem;
	line-height: 1.45;
	word-break: break-word;
}
.sc-number-result > p { margin: 4px 0 0; color: var(--sc-muted); font-size: .84rem; }
.sc-number-result .sc-number-alternatives { color: var(--sc-caramel); font-weight: 700; }
.sc-number-result details {
	margin-top: 9px;
	padding: 8px 10px;
	border-radius: 9px;
	background: var(--sc-indigo-soft);
	color: #3730a3;
}
.sc-number-result summary { min-height: 30px; font-weight: 800; cursor: pointer; }
.sc-number-result blockquote { margin: 8px 0 4px; font-weight: 700; }
.sc-number-result details p { margin: 6px 0 0; font-size: .76rem; }
.sc-number-source-link {
	grid-column: 1 / -1;
	justify-self: start;
	min-height: 32px;
	color: #64748b;
	font-size: .78rem;
}
.sc-number-drill-lobby,
.sc-number-drill-complete,
.sc-number-quiz {
	max-width: 980px;
	margin: 0 auto;
	border: 1px solid #d9deea;
	border-radius: 16px;
	background: var(--sc-paper);
	box-shadow: var(--sc-soft-shadow);
}
.sc-number-drill-lobby { padding: clamp(20px, 4vw, 38px); }
.sc-number-drill-copy {
	display: flex;
	align-items: center;
	gap: 16px;
}
.sc-number-drill-copy > span {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	flex: 0 0 56px;
	border-radius: 14px;
	background: var(--sc-custard-soft);
	color: #92400e;
	font-size: 1.25rem;
}
.sc-number-drill-copy p { margin: 5px 0 0; color: var(--sc-muted); }
.sc-number-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 24px 0;
	border-block: 1px solid var(--sc-line);
}
.sc-number-stats > span { padding: 16px; text-align: center; }
.sc-number-stats > span + span { border-left: 1px solid var(--sc-line); }
.sc-number-stats small,
.sc-number-stats strong { display: block; }
.sc-number-stats small { color: var(--sc-muted); }
.sc-number-stats strong { color: var(--sc-indigo-deep); font-size: 1.45rem; }
.sc-number-direction-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.sc-number-direction-grid button {
	min-height: 126px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 16px;
	border: 1px solid #d8dee9;
	border-radius: 12px;
	background: #fff;
	color: var(--sc-indigo-deep);
	font: inherit;
	cursor: pointer;
}
.sc-number-direction-grid button:hover {
	border-color: #a5b4fc;
	background: var(--sc-indigo-soft);
	transform: translateY(-2px);
}
.sc-number-direction-grid button strong { font-size: 1rem; }
.sc-number-direction-grid button > i { color: var(--sc-caramel); }
.sc-number-direction-grid button small {
	grid-column: 1 / -1;
	color: var(--sc-muted);
}
.sc-number-direction-grid button.is-mixed {
	grid-template-columns: 42px 1fr;
	text-align: left;
}
.sc-number-direction-grid button.is-mixed > span {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--sc-custard-soft);
}
.sc-number-direction-grid button.is-mixed small { grid-column: 2; }
.sc-number-drill-lobby > .sc-text-button { margin-top: 16px; }
.sc-number-drill-complete {
	padding: clamp(30px, 6vw, 70px);
	text-align: center;
}
.sc-number-drill-complete > span {
	width: 66px;
	height: 66px;
	display: grid;
	place-items: center;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--sc-emerald-soft);
	color: var(--sc-emerald);
	font-size: 1.65rem;
}
.sc-number-drill-complete h3 { margin: 0; font-size: 1.65rem; }
.sc-number-drill-complete > p { margin: 7px auto 20px; max-width: 55ch; color: var(--sc-muted); }
.sc-number-drill-complete > div {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--sc-indigo-soft);
}
.sc-number-drill-complete > div strong { color: var(--sc-indigo-deep); font-size: 1.35rem; }
.sc-number-drill-complete > div small { color: var(--sc-muted); }
.sc-number-drill-complete footer {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}
.sc-number-quiz { overflow: hidden; }
.sc-number-quiz > header {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--sc-line);
	background: #fff;
}
.sc-number-quiz > header > div { display: flex; gap: 5px; }
.sc-number-quiz > header > div span {
	height: 6px;
	flex: 1;
	border-radius: 999px;
	background: #e2e8f0;
}
.sc-number-quiz > header > div span.is-done { background: var(--sc-emerald); }
.sc-number-quiz > header > div span.is-current { background: var(--sc-custard); }
.sc-number-question {
	padding: clamp(26px, 5vw, 48px) 24px 22px;
	text-align: center;
}
.sc-number-question small { color: var(--sc-pandan); font-weight: 800; }
.sc-number-question > strong {
	display: block;
	margin: 10px 0;
	color: var(--sc-indigo-deep);
	font-size: clamp(2.3rem, 7vw, 4.5rem);
	line-height: 1.15;
	word-break: break-word;
}
.sc-number-question h3 { margin: 0; color: var(--sc-muted); font-size: 1rem; font-weight: 600; }
.sc-number-prerequisite {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 12px 0 0;
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--sc-pandan-soft);
	color: #285b38;
	font-size: .8rem;
	font-weight: 700;
}
.sc-number-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 0 clamp(16px, 4vw, 38px);
}
.sc-number-options button {
	min-height: 64px;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 10px;
	padding: 10px 13px;
	border: 1px solid #d8dee9;
	border-radius: 11px;
	background: #fff;
	color: var(--sc-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sc-number-options button > span {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: #eef2f7;
	color: var(--sc-muted);
	font-weight: 800;
}
.sc-number-options button > strong { min-width: 0; word-break: break-word; }
.sc-number-options button > i { color: transparent; }
.sc-number-options button:hover:not(:disabled),
.sc-number-options button.is-selected {
	border-color: #a5b4fc;
	background: var(--sc-indigo-soft);
}
.sc-number-options button.is-selected > span { background: var(--sc-indigo); color: #fff; }
.sc-number-options button.is-selected > i { color: var(--sc-indigo); }
.sc-number-options button.is-correct { border-color: #6ee7b7; background: var(--sc-emerald-soft); }
.sc-number-options button.is-correct > span { background: var(--sc-emerald); color: #fff; }
.sc-number-options button.is-correct > i { color: var(--sc-emerald); }
.sc-number-options button.is-wrong { border-color: #fda4af; background: var(--sc-rose-soft); }
.sc-number-options button.is-wrong > span { background: var(--sc-rose); color: #fff; }
.sc-number-options button.is-wrong > i { color: var(--sc-rose); }
.sc-number-quiz > .sc-feedback { margin: 16px clamp(16px, 4vw, 38px) 0; }
.sc-number-quiz > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 20px;
	padding: 16px clamp(16px, 4vw, 38px);
	border-top: 1px solid var(--sc-line);
	background: #fff;
}

@keyframes sc-breathe {
	from { transform: translateY(2px); box-shadow: 0 10px 24px -20px rgba(15,23,42,.3); }
	to { transform: translateY(-5px); box-shadow: 0 18px 28px -20px rgba(15,23,42,.44); }
}
@keyframes sc-ingredient {
	0% { transform: scale(.88); filter: saturate(.5); }
	70% { transform: scale(1.08); }
	100% { transform: scale(1); filter: none; }
}
@keyframes sc-serve {
	0% { clip-path: inset(50% 50% 50% 50% round 22px); transform: translateY(18px) scale(.82); }
	70% { clip-path: inset(0 round 22px); transform: translateY(-3px) scale(1.04); }
	100% { clip-path: inset(0 round 22px); transform: none; }
}
@keyframes sc-toast-in {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 1120px) {
	.sc-brand h1 span { display: none; }
	.sc-brand { min-width: 220px; }
	.sc-number-recipe-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-number-recipe-rail article:nth-child(3) { border-left: 0; border-top: 1px dashed #d8dee9; }
	.sc-number-recipe-rail article:nth-child(4) { border-top: 1px dashed #d8dee9; }
	.sc-memory-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-number-builder { grid-template-columns: minmax(130px, .5fr) minmax(0, 1.5fr); }
	.sc-number-result { grid-column: 1 / -1; padding: 14px 0 0; border-top: 1px dashed #cbd5e1; border-left: 0; }
	.sc-order-grid {
		grid-template-areas:
			"ticket question"
			"tray tray";
		grid-template-columns: minmax(170px, .7fr) minmax(350px, 1.5fr);
	}
	.sc-tray-panel { grid-column: 1 / 3; }
	.sc-tray-panel {
		display: grid;
		grid-template-columns: minmax(180px, 1fr) minmax(270px, 1.5fr) auto;
		align-items: center;
		gap: 14px;
	}
	.sc-tray-panel > h3,
	.sc-tray-panel > p { grid-column: 1; }
	.sc-tray-panel > p { align-self: start; }
	.sc-unit-tray,
	.sc-bundle-tray { grid-column: 2; grid-row: 1 / 4; min-height: 140px; margin: 0; }
	.sc-tray-total { grid-column: 3; grid-row: 1; }
	.sc-ingredient-row { grid-column: 3; grid-row: 2 / 4; margin: 0; }
	.sc-home-status { grid-template-columns: 1fr 1fr; }
	.sc-status-path { grid-column: 1 / 3; }
}

@media (max-width: 900px) {
	.sc-command { min-height: 68px; }
	.sc-mobile-menu { display: inline-grid; }
	.sc-brand-mark { display: none; }
	.sc-brand { min-width: 0; }
	.sc-brand p { display: none; }
	.sc-brand h1 { font-size: 1rem; }
	.sc-wallet { min-width: 94px; }
	.sc-sync { display: none; }
	.sc-shell { display: block; min-height: calc(100vh - 68px); }
	.sc-sidebar {
		position: fixed;
		top: 68px;
		left: 0;
		width: min(290px, 88vw);
		height: calc(100vh - 68px);
		transform: translateX(-105%);
		transition: transform .25s cubic-bezier(.22, 1, .36, 1);
		box-shadow: 20px 0 36px -30px rgba(15,23,42,.72);
	}
	.sc-sidebar.is-open { transform: translateX(0); }
	.sc-cafe-scene { min-height: 500px; }
	.sc-scene-copy { width: 70%; padding: 38px; }
	.sc-scene-copy h2 { font-size: clamp(3rem, 10vw, 4.7rem); }
	.sc-mascot { width: min(35%, 260px); right: 8px; }
	.sc-order-rail::before { display: none; }
	.sc-ticket-track { grid-template-columns: repeat(4, minmax(180px, 1fr)); overflow-x: auto; padding-top: 10px; }
	.sc-ticket { min-height: 160px; }
	.sc-learn-layout { grid-template-columns: 1fr; }
	.sc-lesson-list {
		position: static;
		display: flex;
		overflow-x: auto;
		padding-bottom: 5px;
	}
	.sc-lesson-list button { min-width: 245px; }
	.sc-number-direction-grid { grid-template-columns: 1fr 1fr; }
	.sc-number-direction-grid button.is-mixed { grid-column: 1 / -1; min-height: 88px; }
	.sc-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-decor-layout { grid-template-columns: 1fr; }
	.sc-decor-preview { position: relative; top: auto; min-height: 0; }
	.sc-cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.sc-command { padding: 9px 12px; gap: 9px; }
	.sc-brand h1 { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.sc-wallet {
		min-width: 78px;
		grid-template-columns: 28px auto;
		padding: 5px 8px;
	}
	.sc-wallet > span { width: 28px; height: 28px; }
	.sc-wallet small { display: none; }
	.sc-view { padding: 14px; }
	.sc-page-heading { align-items: flex-start; margin-bottom: 18px; }
	.sc-page-heading > .sc-secondary { flex: 0 0 auto; padding-inline: 12px; }
	.sc-number-heading { display: block; }
	.sc-number-mode-switch { width: 100%; margin-top: 14px; }
	.sc-number-mode-switch button { flex: 1; }
	.sc-number-source-note { grid-template-columns: 42px minmax(0, 1fr); }
	.sc-number-source-note > a { grid-column: 2; justify-self: start; }
	.sc-number-recipes > header,
	.sc-number-atlas > header,
	.sc-memory-bridge > header,
	.sc-number-builders > header { align-items: flex-start; }
	.sc-number-recipes > header p,
	.sc-memory-bridge > header p { max-width: 45%; text-align: left; }
	.sc-number-card-grid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); }
	.sc-number-builder { grid-template-columns: 1fr; gap: 13px; }
	.sc-number-parts { padding-bottom: 7px; }
	.sc-number-result { grid-column: auto; }
	.sc-number-source-link { grid-column: auto; }
	.sc-number-options { grid-template-columns: 1fr; }
	.sc-cafe-scene {
		min-height: 520px;
		align-items: flex-start;
		background-position: 62% center;
	}
	.sc-scene-copy {
		width: 100%;
		padding: 28px 22px 210px;
		background: linear-gradient(180deg, rgba(30,27,75,.88), rgba(30,27,75,.54) 60%, transparent);
	}
	.sc-scene-copy h2 { font-size: clamp(2.8rem, 14vw, 4.4rem); }
	.sc-scene-copy p { margin-top: 14px; }
	.sc-scene-actions { margin-top: 18px; }
	.sc-mascot { width: 190px; max-height: 46%; right: -2px; bottom: -2%; }
	.sc-order-rail { padding: 16px; }
	.sc-rail-heading { display: block; }
	.sc-rail-heading .sc-text-button { margin-top: 8px; }
	.sc-ticket-track { grid-template-columns: repeat(4, 160px); }
	.sc-home-status { grid-template-columns: 1fr; }
	.sc-status-path { grid-column: auto; }
	.sc-status-action { min-height: 108px; }
	.sc-learn-layout { gap: 12px; }
	.sc-lesson-paper { padding: 18px; }
	.sc-lesson-paper > header { align-items: flex-start; }
	.sc-highlight-flow { grid-template-columns: 1fr 1fr; }
	.sc-one-short-guide > header { display: block; }
	.sc-one-short-formula { display: inline-block; margin-top: 12px; }
	.sc-one-short-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sc-lesson-paper > footer { align-items: stretch; flex-direction: column; }
	.sc-lesson-paper > footer .sc-primary { width: 100%; }
	.sc-category-grid { grid-template-columns: 1fr; }
	.sc-lobby-summary { align-items: stretch; flex-direction: column; }
	.sc-workspace-head { grid-template-columns: auto 1fr; }
	.sc-workspace-head > strong { grid-column: 1 / 3; text-align: right; }
	.sc-live-rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		margin-top: 12px;
		padding: 20px 0 2px;
		overflow: hidden;
	}
	.sc-live-rail::before { top: 11px; }
	.sc-live-rail .sc-ticket {
		min-height: 70px;
		padding: 14px 12px 9px;
	}
	.sc-live-rail .sc-ticket:nth-child(n+3) { display: none; }
	.sc-live-rail .sc-ticket-clip {
		top: -8px;
		width: 18px;
		height: 21px;
	}
	.sc-live-rail .sc-ticket small { font-size: .66rem; }
	.sc-live-rail .sc-ticket > strong { margin-top: 2px; font-size: 1.15rem; }
	.sc-stage-nav { gap: 5px; }
	.sc-stage-nav > div { justify-content: center; padding: 8px 5px; }
	.sc-stage-nav > div strong { font-size: .72rem; }
	.sc-order-grid {
		grid-template-areas:
			"ticket"
			"tray"
			"question";
		grid-template-columns: 1fr;
	}
	.sc-active-ticket,
	.sc-question-panel,
	.sc-tray-panel { grid-column: auto; }
	.sc-active-ticket { padding: 26px 16px 14px; }
	.sc-active-ticket > strong { font-size: clamp(2.6rem, 14vw, 4.5rem); }
	.sc-active-ticket > p { margin: 10px 0; font-size: .92rem; }
	.sc-tray-panel {
		display: block;
		padding: 14px;
	}
	.sc-unit-tray,
	.sc-bundle-tray {
		min-height: 104px;
		gap: 5px;
		margin-top: 8px;
		padding: 9px;
	}
	.sc-tray-total,
	.sc-ingredient-row { margin-top: 9px; }
	.sc-ingredient-row span { min-height: 46px; }
	.sc-question-panel > footer {
		position: sticky;
		z-index: 4;
		bottom: 8px;
		margin: 8px -10px -10px;
		padding: 12px 10px 10px;
		border-top: 1px solid rgba(226,232,240,.9);
		border-radius: 0 0 14px 14px;
		background: rgba(255,255,255,.96);
		box-shadow: 0 -14px 24px -24px rgba(15,23,42,.8);
		backdrop-filter: blur(8px);
	}
	.sc-options { grid-template-columns: 1fr; }
	.sc-question-panel > footer { flex-wrap: wrap; }
	.sc-question-panel > footer .sc-primary,
	.sc-question-panel > footer .sc-secondary { margin-left: auto; }
	.sc-session-complete > div { grid-template-columns: 1fr; width: min(330px, 100%); }
	.sc-session-complete footer { flex-direction: column-reverse; width: min(330px, 100%); }
	.sc-review-list article { grid-template-columns: 42px minmax(0, 1fr); }
	.sc-review-meter { grid-column: 2; width: 88px; }
	.sc-cabinet { grid-template-columns: 1fr; padding: 12px; }
	.sc-reward-list article { grid-template-columns: 64px minmax(0, 1fr); }
	.sc-reward-list article > button { grid-column: 1 / 3; width: 100%; }
	.sc-decor-preview { padding: 14px; }
	.sc-decor-heading { max-width: 82%; padding: 8px 10px; }
	.sc-decor-preview h3 { font-size: 1.25rem; }
	.sc-decor-preview p { font-size: .72rem; }
	.sc-decor-caption { max-width: 100%; padding: 8px 10px; }
	.sc-decor-caption span { max-width: 62vw; }
	.sc-onboarding-steps { align-items: stretch; flex-direction: column; }
	.sc-onboarding-steps > i { transform: rotate(90deg); }
	.sc-onboarding-steps span { width: 100%; }
}

@media (max-width: 420px) {
	.sc-page-heading { display: block; }
	.sc-page-heading > :last-child { margin-top: 12px; }
	.sc-heading-progress { width: 100%; }
	.sc-scene-actions { align-items: stretch; flex-direction: column; }
	.sc-scene-actions .sc-primary,
	.sc-scene-actions .sc-ghost-on-dark { width: 100%; }
	.sc-number-source-note { grid-template-columns: 1fr; }
	.sc-number-source-note > a { grid-column: auto; }
	.sc-number-recipes > header,
	.sc-memory-bridge > header,
	.sc-number-builders > header { display: block; }
	.sc-number-recipes > header p,
	.sc-memory-bridge > header p { max-width: none; margin-top: 7px; }
	.sc-number-builders > header .sc-secondary { width: 100%; margin-top: 10px; }
	.sc-number-recipe-rail {
		grid-template-columns: repeat(4, 250px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.sc-number-recipe-rail article {
		border-top: 0 !important;
		border-left: 1px dashed #d8dee9 !important;
		scroll-snap-align: start;
	}
	.sc-number-recipe-rail article:first-child { border-left: 0 !important; }
	.sc-memory-strip { grid-template-columns: 1fr; }
	.sc-number-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-number-direction-grid { grid-template-columns: 1fr; }
	.sc-number-direction-grid button.is-mixed { grid-column: auto; }
	.sc-number-drill-copy { align-items: flex-start; }
	.sc-number-drill-copy > span { width: 46px; height: 46px; flex-basis: 46px; }
	.sc-number-stats > span { padding: 12px 6px; }
	.sc-number-quiz > footer { align-items: stretch; flex-direction: column; }
	.sc-number-quiz > footer .sc-primary,
	.sc-number-quiz > footer .sc-secondary { width: 100%; }
	.sc-number-drill-complete footer { align-items: stretch; flex-direction: column-reverse; }
	.sc-highlight-flow { grid-template-columns: 1fr; }
	.sc-status-steps { gap: 5px; }
	.sc-status-steps span { width: 28px; height: 28px; }
	.sc-lesson-list button { min-width: 215px; }
	.sc-stage-nav > div {
		min-width: 0;
		min-height: 52px;
		gap: 4px;
		padding: 6px 4px;
	}
	.sc-stage-nav > div > span { width: 25px; height: 25px; flex: 0 0 25px; }
	.sc-stage-nav > div strong {
		display: block;
		font-size: .62rem;
		line-height: 1.15;
		text-align: center;
	}
	.sc-unit-tray.is-crowded { grid-template-columns: repeat(5, 1fr); }
	.sc-onboarding,
	.sc-celebration { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* A → B production art direction */
.sc-command {
	min-height: 88px;
	padding: 12px clamp(18px, 2.6vw, 42px);
	border-bottom: 1px solid #d9dfeb;
	background: rgba(255, 255, 255, .97);
	color: #14214f;
	box-shadow: 0 8px 24px -22px rgba(21, 32, 70, .72);
}
.sc-brand { min-width: 440px; }
.sc-brand-mark {
	width: 52px;
	height: 52px;
	border: 1px solid #e3aa2e;
	border-radius: 14px;
	background: #fff8df;
	color: #a56a09;
	box-shadow: 0 10px 20px -17px rgba(77, 44, 5, .74);
}
.sc-brand p { color: #77819a; }
.sc-brand h1 { font-size: clamp(1.05rem, 1.6vw, 1.38rem); }
.sc-brand h1 span { color: #14214f; font-size: .96em; }
.sc-wallet {
	border-color: #d9dfeb;
	background: #fff;
	color: #14214f;
	box-shadow: 0 9px 18px -17px rgba(21, 32, 70, .7);
}
.sc-wallet small { color: #77819a; }
.sc-sync { color: #61708e; }
.sc-sound-toggle {
	min-width: 108px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid #d9dfeb;
	border-radius: 12px;
	background: #fff;
	color: #64708b;
	font: inherit;
	font-size: .78rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 9px 18px -17px rgba(21, 32, 70, .7);
	transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.sc-sound-toggle i { width: 18px; color: #94a3b8; font-size: 1rem; }
.sc-sound-toggle.is-on {
	border-color: #b7dec9;
	background: #f0fdf6;
	color: #147a51;
}
.sc-sound-toggle.is-on i { color: #16835e; }
.sc-sound-toggle:hover { transform: translateY(-1px); }
.sc-sound-toggle:focus-visible { outline: 3px solid rgba(59, 130, 246, .28); outline-offset: 2px; }

.sc-shell {
	min-height: calc(100vh - 88px);
	grid-template-columns: 190px minmax(0, 1fr);
}
.sc-sidebar {
	top: 88px;
	height: calc(100vh - 88px);
	gap: 7px;
	padding: 20px 12px 16px;
	border-right: 0;
	background:
		radial-gradient(circle at 70% 8%, rgba(81, 110, 208, .24), transparent 17rem),
		#10275f;
	box-shadow: 12px 0 28px -26px rgba(4, 15, 48, .9);
}
.sc-nav-item { color: #dce5ff; }
.sc-nav-item > span {
	background: rgba(255,255,255,.08);
	color: #e5ebff;
	box-shadow: none;
}
.sc-nav-item:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}
.sc-nav-item.is-active {
	background: #3156c8;
	color: #fff;
	box-shadow: 0 13px 24px -18px rgba(2, 12, 42, .9), inset 0 1px rgba(255,255,255,.12);
}
.sc-nav-item.is-active > span { background: #fff; color: #2447ad; }
.sc-nav-item small { background: #f4bc34; color: #533606; }
.sc-sidebar-progress {
	border-top-color: rgba(255,255,255,.16);
	color: #fff;
}
.sc-sidebar-progress p { color: #aebce0; }
.sc-sidebar-progress > div { background: rgba(255,255,255,.14); }
.sc-nav-back { border-top-color: rgba(255,255,255,.16); }
.sc-nav-back > span { background: rgba(255,255,255,.1); color: #f7ce78; }
.sc-body { background: #edf1f6; }

/* Composition A: the café is the invitation. */
.sc-home {
	width: 100%;
	max-width: none;
	padding: 0 0 30px;
}
.sc-cafe-scene {
	min-height: min(620px, calc(100vh - 88px));
	align-items: stretch;
	border-radius: 0;
	background-position: center 46%;
	box-shadow: inset 0 -24px 40px -34px rgba(39, 24, 12, .8);
}
.sc-cafe-scene::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 29%;
	z-index: -1;
	background: linear-gradient(180deg, transparent, rgba(45, 25, 12, .38));
}
.sc-cafe-scene::after { background: linear-gradient(90deg, rgba(14,28,66,.1), transparent 28%, transparent 76%, rgba(14,28,66,.1)); }
.sc-home-order-card {
	position: absolute;
	z-index: 3;
	top: 72px;
	left: clamp(32px, 16vw, 245px);
	width: clamp(250px, 25vw, 330px);
	min-height: 390px;
	padding: 58px 34px 30px;
	border: 1px solid #cfb994;
	border-radius: 11px 11px 6px 6px;
	background:
		linear-gradient(rgba(128,88,45,.035) 1px, transparent 1px),
		#fff8e9;
	background-size: 100% 29px;
	color: #14214f;
	box-shadow: 0 24px 42px -30px rgba(31, 17, 6, .82), inset 0 0 0 7px rgba(158, 117, 61, .05);
	text-align: center;
	transform: rotate(-.5deg);
}
.sc-home-order-card::before {
	content: "";
	position: absolute;
	top: -48px;
	left: 50%;
	width: 180px;
	height: 55px;
	border: 4px solid #79502e;
	border-bottom-width: 8px;
	border-radius: 13px 13px 8px 8px;
	background: linear-gradient(180deg, #b9793f, #835126);
	box-shadow: 0 8px 16px -12px rgba(43, 24, 9, .9), inset 0 1px rgba(255,255,255,.35);
	transform: translateX(-50%);
}
.sc-home-order-card .sc-ticket-clip { top: -34px; z-index: 2; width: 28px; height: 42px; }
.sc-home-order-card > small { display: block; color: #344166; font-weight: 800; }
.sc-home-order-card > strong {
	display: block;
	margin-top: 22px;
	font-size: clamp(3rem, 5vw, 5rem);
	line-height: 1;
}
.sc-home-order-card > b { display: block; margin-top: 8px; font-size: 1.9rem; }
.sc-home-order-card > div { margin: 28px 0 18px; border-top: 1px dashed #bba98e; }
.sc-home-order-card > p { margin: 0; font-weight: 800; }
.sc-home-order-card > p i { margin-right: 7px; color: #4c7d50; }

.sc-home-serving {
	position: absolute;
	z-index: 3;
	right: clamp(70px, 8vw, 145px);
	top: 48%;
	width: clamp(390px, 38vw, 600px);
	transform: translateY(-38%);
	text-align: center;
}
.sc-serving-board {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(4px, .7vw, 12px);
	padding: 24px 26px;
	border: 12px solid #744723;
	border-radius: 26px 26px 38px 38px;
	background: linear-gradient(145deg, #628a4d, #335e35);
	box-shadow: 0 26px 34px -24px rgba(34, 18, 7, .9), inset 0 0 0 7px rgba(220, 177, 105, .24);
	transform: perspective(900px) rotateX(7deg);
}
.sc-serving-board img {
	width: min(20%, 112px);
	filter: drop-shadow(0 12px 8px rgba(31, 17, 7, .3));
}
.sc-home-serving > p {
	display: inline-block;
	margin: 10px 0 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.92);
	color: #25304b;
	font-size: .82rem;
	font-weight: 800;
}
.sc-home-serving .sc-scene-actions { justify-content: center; margin-top: 14px; }
.sc-home-serving .sc-primary-large {
	min-width: min(390px, 90%);
	min-height: 70px;
	border-color: #17327e;
	border-radius: 18px;
	background: linear-gradient(180deg, #263e91, #142962);
	font-size: 1.55rem;
	box-shadow: 0 20px 34px -22px rgba(9, 23, 65, .95), inset 0 1px rgba(255,255,255,.18);
}
.sc-scene-caption {
	position: absolute;
	z-index: 4;
	left: 28px;
	top: 28px;
	display: grid;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(16,39,95,.9);
	color: #fff;
	box-shadow: 0 15px 24px -19px rgba(5, 17, 50, .9);
}
.sc-scene-caption span { color: #d8e3ff; font-size: .78rem; }
.sc-home .sc-mascot {
	right: 10px;
	bottom: -1%;
	width: min(13%, 150px);
	max-height: 42%;
}
.sc-home .sc-order-rail,
.sc-home .sc-home-status { margin-left: clamp(18px, 2.5vw, 36px); margin-right: clamp(18px, 2.5vw, 36px); }

/* Composition B: the café becomes a working counter. */
.sc-orders { width: min(1530px, 100%); }
.sc-orders.sc-view { padding-top: 20px; }
.sc-order-workspace { color: #1c2745; }
.sc-workspace-head {
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	padding: 14px 18px;
	border: 1px solid #d9dfeb;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 24px -23px rgba(16, 32, 71, .72);
}
.sc-workspace-title { min-width: 170px; }
.sc-workspace-title small,
.sc-workspace-title strong { display: block; }
.sc-workspace-title small { color: #63708d; font-size: .72rem; font-weight: 800; }
.sc-workspace-title small i { color: #3156c8; }
.sc-workspace-title strong { color: #12245d; }
.sc-order-count { color: #12245d; }
.sc-live-rail {
	min-height: 132px;
	margin-top: 14px;
	padding: 33px 18px 12px;
	border: 1px solid #d9dfeb;
	border-radius: 14px;
	background: #f9fbfd;
}
.sc-live-rail::before { left: 20px; right: 20px; height: 6px; background: linear-gradient(180deg, #a66b38, #6d3e1d); }
.sc-live-rail .sc-ticket { min-height: 88px; padding-top: 20px; }
.sc-stage-nav {
	margin: 10px 0;
	padding: 7px;
	border: 1px solid #cbd8ee;
	border-radius: 14px;
	background: #eef4fc;
}
.sc-stage-nav > div { background: transparent; }
.sc-stage-nav > div.is-current { background: #fff; box-shadow: 0 8px 18px -17px rgba(16, 39, 95, .74); }
.sc-order-grid {
	grid-template-columns: minmax(180px, .62fr) minmax(420px, 1.75fr) minmax(300px, .9fr);
	gap: 16px;
}
.sc-active-ticket {
	border-color: #cfd8e6;
	border-radius: 14px;
	background: linear-gradient(180deg, #f8fbff, #edf3fa);
	box-shadow: 0 16px 28px -24px rgba(18, 36, 93, .72);
}
.sc-active-ticket > strong { color: #162c72; }
.sc-question-panel {
	border: 1px solid #cbd8ee;
	border-radius: 14px;
	background: linear-gradient(180deg, #fff, #fbfdff);
	box-shadow: 0 18px 32px -27px rgba(18, 36, 93, .75);
}
.sc-station-visual {
	min-height: 126px;
	display: grid;
	grid-template-columns: minmax(100px, 150px) 42px 92px;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 16px 0 2px;
	border-radius: 14px;
	background: #f1f5fb;
}
.sc-station-visual > img { width: 100%; max-height: 118px; object-fit: contain; filter: drop-shadow(0 12px 9px rgba(71, 44, 20, .18)); }
.sc-station-visual > i { color: #9ba8c1; font-size: 1.4rem; }
.sc-station-visual > span {
	width: 84px;
	height: 84px;
	display: grid;
	place-items: center;
	border: 6px solid #9a6032;
	border-radius: 12px;
	background: #4a2e1b;
	color: #fff9df;
	font-size: 2rem;
	box-shadow: 0 14px 22px -19px rgba(55, 31, 13, .9), inset 0 0 0 2px rgba(255,255,255,.08);
}
.sc-options { gap: 10px; margin-top: 16px; }
.sc-options button { min-height: 56px; border-color: #d7deea; }
.sc-options button:hover:not(:disabled),
.sc-options button.is-selected { border-color: #3156c8; background: #edf2ff; }

.sc-tray-panel {
	padding: 14px;
	border: 1px solid #c2a27d;
	border-radius: 14px;
	background: #f7f2ea;
	box-shadow: 0 18px 32px -27px rgba(61, 34, 14, .82);
}
.sc-unit-tray,
.sc-bundle-tray {
	min-height: 180px;
	gap: 4px;
	padding: 12px;
	border: 8px solid #89572f;
	border-radius: 16px;
	background: linear-gradient(145deg, #557848, #2e5433);
	box-shadow: 0 16px 24px -22px rgba(54, 30, 12, .92), inset 0 0 0 4px rgba(229, 190, 128, .2);
}
.sc-unit-tray span,
.sc-bundle-tray > span {
	background: transparent;
	box-shadow: none;
}
.sc-unit-tray img,
.sc-bundle-tray img { width: 100%; max-height: 54px; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(28, 17, 6, .24)); }
.sc-bundle-tray > div {
	position: relative;
	min-height: 64px;
	background: rgba(255,255,255,.12);
}
.sc-bundle-tray > div strong {
	position: absolute;
	right: 2px;
	bottom: 2px;
	padding: 1px 5px;
	border-radius: 999px;
	background: #fff;
	color: #17327e;
}
.sc-dessert-pantry { margin-top: 16px; }
.sc-dessert-pantry > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sc-dessert-pantry > header small { color: #746657; font-size: .7rem; }
.sc-dessert-pantry > div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	padding: 8px;
	border: 8px solid #87532c;
	border-radius: 14px;
	background: #5a351e;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 12px 20px -19px rgba(50, 27, 10, .9);
}
.sc-dessert-pantry > div span {
	position: relative;
	min-height: 72px;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	padding-bottom: 2px;
	border-radius: 7px;
	background: linear-gradient(145deg, #7d4b29, #452816);
	box-shadow: inset 0 2px 5px rgba(25, 12, 4, .32);
}
.sc-dessert-pantry img { width: 92%; height: 66px; object-fit: contain; }
.sc-dessert-pantry b {
	position: absolute;
	right: 3px;
	top: 3px;
	min-width: 20px;
	padding: 1px 4px;
	border-radius: 999px;
	background: #172033;
	color: #fff;
	font-size: .64rem;
	text-align: center;
}
.sc-cafe-progress-card {
	position: relative;
	min-height: 112px;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 12px;
	padding: 12px;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background:
		linear-gradient(180deg, transparent 25%, rgba(9,22,48,.82)),
		url('/assets/game/sankhya-cafe/scenes/cafe-open-wide-v1.webp?v=20260807.1') center/cover;
	color: #fff;
	text-align: left;
	cursor: pointer;
}
.sc-cafe-progress-card span { display: grid; }
.sc-cafe-progress-card small { color: #e3eaff; }
.sc-order-history {
	margin-top: 14px;
	border: 1px solid #d9dfeb;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
}
.sc-order-history header,
.sc-order-history > div {
	display: grid;
	grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr) auto;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
}
.sc-order-history header { display: flex; justify-content: space-between; background: #f6f8fb; }
.sc-order-history > div { border-top: 1px solid #edf0f5; }
.sc-order-history > div b { color: #16835e; font-size: .82rem; }

/* Order-taking is a focused learning task: the current prompt always owns the
   work surface; order context and the counting aid only support that task. */
.sc-orders.sc-view { padding-top: 16px; }
.sc-workspace-head {
	gap: 12px;
	min-height: 64px;
	padding: 10px 14px;
}
.sc-stage-nav { margin: 8px 0 14px; }
.sc-order-grid {
	grid-template-areas: "ticket question tray";
	grid-template-columns: minmax(190px, .55fr) minmax(460px, 1.8fr) minmax(250px, .72fr);
	align-items: start;
}
.sc-question-panel {
	min-height: min(620px, calc(100vh - 210px));
	padding: clamp(20px, 3vw, 32px);
}
.sc-question-title h2 { max-width: 28ch; font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
.sc-question-context {
	display: grid;
	grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	padding: 11px 14px;
	border: 1px solid #d7deea;
	border-radius: 12px;
	background: #f7f9fc;
}
.sc-question-context > strong {
	color: #162c72;
	font-size: clamp(1.2rem, 2.2vw, 1.65rem);
	line-height: 1.15;
	overflow-wrap: anywhere;
}
.sc-question-context > p {
	margin: 0;
	padding-left: 14px;
	border-left: 1px solid #d7deea;
	color: #334155;
	font-size: .96rem;
	line-height: 1.55;
}
.sc-question-context mark {
	padding: .05em .24em .08em;
	border: 1px solid #efbd47;
	border-radius: .34em;
	background: #fff0a8;
	color: #183679;
	font-weight: 900;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.sc-question-panel > footer { margin-top: auto; padding-top: 22px; }
.sc-active-ticket {
	padding: 30px 16px 16px;
	box-shadow: none;
}
.sc-active-ticket > small {
	display: block;
	margin-bottom: 7px;
	color: #64708b;
	font-size: .72rem;
	font-weight: 800;
}

.sc-active-ticket > strong { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.25; }
	.sc-active-ticket > p { margin: 12px 0 0; font-size: .94rem; line-height: 1.55; }
.sc-active-ticket > .sc-active-ticket-menu {
	margin-top: 10px;
	color: #5b402d;
	font-size: .88rem;
	font-weight: 800;
}
.sc-active-ticket-menu i { color: #a66b38; }
.sc-active-ticket-tray {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 3px;
	margin-top: 14px;
	padding: 7px;
	border: 5px solid #89572f;
	border-radius: 12px;
	background: linear-gradient(145deg, #557848, #2e5433);
}
.sc-active-ticket-tray > span {
	position: relative;
	min-width: 0;
	min-height: 24px;
	display: grid;
	place-items: center;
}
.sc-active-ticket-tray img {
	width: 100%;
	height: 28px;
	object-fit: contain;
	filter: drop-shadow(0 3px 2px rgba(28, 17, 6, .24));
}
.sc-active-ticket-tray .is-ten b {
	position: absolute;
	right: -1px;
	bottom: -2px;
	padding: 0 3px;
	border-radius: 999px;
	background: #fff;
	color: #17327e;
	font-size: .56rem;
}
.sc-tray-panel { padding: 14px; box-shadow: none; }
.sc-tray-panel > h3 { margin: 0; font-size: 1rem; }
.sc-tray-panel > p { margin: 3px 0 10px; font-size: .8rem; }
.sc-unit-tray,
.sc-bundle-tray { min-height: 132px; }
.sc-dessert-pantry,
.sc-cafe-progress-card { display: none; }

.sc-cabinet button.is-locked .sc-collection-art img { filter: grayscale(1); opacity: .3; }
.sc-celebration-dessert img { width: min(210px, 54vw); max-height: 190px; object-fit: contain; }

/* The reference atlas stays tactile on the long number page. */
.sc-numbers .sc-page-heading,
.sc-learn .sc-page-heading { padding-bottom: 16px; border-bottom: 1px solid #d5dce8; }
.sc-number-recipes,
.sc-number-atlas,
.sc-memory-bridge,
.sc-number-builders { scroll-margin-top: 110px; }
.sc-number-recipe-rail,
.sc-number-atlas,
.sc-number-builder { border-color: #d5c7b3; }
.sc-number-atlas { background-color: #fffcf5; }

@media (max-width: 1180px) {
	.sc-home-order-card { left: 32px; }
	.sc-home-serving { right: 28px; width: 48%; }
	.sc-home .sc-mascot { display: none; }
	.sc-order-grid { grid-template-columns: minmax(170px, .55fr) minmax(390px, 1.45fr); grid-template-areas: "ticket question" "tray tray"; }
	.sc-tray-panel { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(280px, 1fr); gap: 14px; }
	.sc-tray-panel > h3,
	.sc-tray-panel > p,
	.sc-unit-tray,
	.sc-bundle-tray,
	.sc-tray-total,
	.sc-ingredient-row { grid-column: 1; }
	.sc-dessert-pantry,
	.sc-cafe-progress-card { grid-column: 2; }
	.sc-dessert-pantry { grid-row: 1 / 6; margin: 0; }
}

@media (max-width: 900px) {
	.sc-command { min-height: 72px; }
	.sc-brand { min-width: 0; }
	.sc-sound-toggle { min-width: 44px; width: 44px; padding-inline: 0; }
	.sc-sound-toggle span { display: none; }
	.sc-shell { min-height: calc(100vh - 72px); }
	.sc-sidebar { top: 72px; height: calc(100vh - 72px); }
	.sc-cafe-scene { min-height: 660px; }
	.sc-home-order-card { top: 88px; left: 24px; width: 270px; min-height: 350px; }
	.sc-home-serving { right: 18px; top: 54%; width: 54%; }
	.sc-serving-board { min-height: 185px; }
	.sc-workspace-head { grid-template-columns: auto minmax(0, 1fr) auto; }
	.sc-workspace-title { display: none; }
	.sc-order-grid { grid-template-columns: 1fr; grid-template-areas: "ticket" "question" "tray"; }
	.sc-question-panel { min-height: 0; }
	.sc-active-ticket { max-height: none; }
	.sc-tray-panel { display: block; }
}

@media (max-width: 720px) {
	.sc-brand h1 span { color: #64708b; }
	.sc-cafe-scene { min-height: 820px; background-position: 56% center; }
	.sc-home-order-card {
		top: 72px;
		left: 50%;
		width: min(270px, calc(100% - 42px));
		min-height: 320px;
		padding: 52px 24px 22px;
		transform: translateX(-50%);
	}
	.sc-home-order-card > strong { font-size: 3.4rem; }
	.sc-home-serving {
		left: 14px;
		right: 14px;
		top: auto;
		bottom: 32px;
		width: auto;
		transform: none;
	}
	.sc-serving-board { min-height: 150px; padding: 16px 10px; }
	.sc-scene-caption { left: 12px; top: 12px; padding: 7px 10px; }
	.sc-scene-caption span { display: none; }
	.sc-home-serving .sc-primary-large { min-height: 58px; font-size: 1.18rem; }
	.sc-workspace-head { grid-template-columns: auto minmax(0,1fr); }
	.sc-workspace-head .sc-order-count { grid-column: 1 / 3; }
	.sc-order-grid { grid-template-areas: "ticket" "question" "tray"; gap: 12px; }
	.sc-question-panel { min-height: 0; }
	.sc-question-panel { padding: 18px 16px; }
	.sc-question-title h2 { font-size: 1.3rem; }
	.sc-question-context { grid-template-columns: minmax(5.5rem, .7fr) minmax(0, 1.5fr); gap: 10px; margin-top: 14px; padding: 10px 12px; }
	.sc-question-context > strong { font-size: 1.1rem; }
	.sc-question-context > p { padding-left: 10px; font-size: .9rem; }
	.sc-active-ticket { max-height: none; overflow: visible; }
	.sc-active-ticket > strong { font-size: 2rem; }
	.sc-active-ticket-tray { grid-template-columns: repeat(9, minmax(0, 1fr)); }
	.sc-active-ticket-tray img { height: 24px; }
	.sc-station-visual { grid-template-columns: 120px 32px 72px; min-height: 125px; }
	.sc-station-visual > span { width: 68px; height: 68px; }
	.sc-tray-panel { display: block; }
	.sc-tray-panel > h3 { font-size: .95rem; }
	.sc-unit-tray,
	.sc-bundle-tray { min-height: 112px; }
	.sc-dessert-pantry { margin-top: 16px; }
	.sc-order-history > div { grid-template-columns: 1fr auto; }
}

/* Composition C: a clickable interior route map. */
.sc-map-view { width: min(1500px, 100%); }
.sc-map-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 16px;
}
.sc-map-heading h2 { margin: 0; color: #12245d; font-size: clamp(1.7rem, 3vw, 2.45rem); line-height: 1.15; }
.sc-map-heading p { max-width: 68ch; margin: 7px 0 0; color: #64708a; }
.sc-cafe-map-scene {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid #81512d;
	border-radius: 16px;
	background:
		linear-gradient(180deg, rgba(12,28,64,.04), transparent 72%, rgba(12,28,64,.14)),
		url('/assets/game/sankhya-cafe/scenes/cafe-map-interior-v2.webp?v=20260806.1') center/cover no-repeat;
	box-shadow: 0 26px 44px -33px rgba(50, 27, 10, .9), inset 0 0 0 5px rgba(255,255,255,.08);
}
.sc-map-sign {
	position: absolute;
	z-index: 3;
	top: 1.8%;
	left: 50%;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 20px;
	border: 2px solid #d9a660;
	border-radius: 9px;
	background: linear-gradient(180deg, #8c572e, #593219);
	color: #fff4d7;
	box-shadow: 0 14px 22px -16px rgba(43, 22, 7, .94), inset 0 1px rgba(255,255,255,.18);
	transform: translateX(-50%);
}
.sc-map-hotspot {
	position: absolute;
	z-index: 4;
	display: grid;
	grid-template-columns: 34px 22px auto;
	align-items: center;
	gap: 7px;
	min-height: 46px;
	padding: 6px 13px 6px 6px;
	border: 1px solid rgba(224,232,255,.74);
	border-radius: 13px;
	background: rgba(18, 39, 95, .86);
	color: #fff;
	font: inherit;
	text-align: left;
	box-shadow: 0 14px 24px -17px rgba(4, 14, 46, .96), inset 0 1px rgba(255,255,255,.12);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform .2s cubic-bezier(.22,1,.36,1), background-color .2s ease, box-shadow .2s ease;
}
.sc-map-hotspot:hover {
	background: rgba(36, 77, 189, .94);
	box-shadow: 0 18px 28px -17px rgba(4, 14, 46, .98), inset 0 1px rgba(255,255,255,.16);
	transform: translate(-50%, calc(-50% - 4px));
}
.sc-map-hotspot > span {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #fff;
	color: #18357f;
	font-weight: 800;
}
.sc-map-hotspot > i { color: #f5c552; text-align: center; }
.sc-map-hotspot strong,
.sc-map-hotspot small { grid-column: 3; }
.sc-map-hotspot strong { line-height: 1.12; white-space: nowrap; }
.sc-map-hotspot small { color: #d5e0ff; font-size: .68rem; line-height: 1.15; }
.sc-map-hotspot.is-done > span { background: #dbf7e9; color: #057651; }
.sc-map-hotspot.is-lesson { left: 18%; top: 25%; }
.sc-map-hotspot.is-counter { left: 49%; top: 18%; }
.sc-map-hotspot.is-review { left: 82%; top: 22%; }
.sc-map-hotspot.is-collection { left: 20%; top: 54%; }
.sc-map-hotspot.is-numbers { left: 49%; top: 88%; }
.sc-map-hotspot.is-cashier { left: 55%; top: 52%; }
.sc-map-hotspot.is-decorate { left: 85%; top: 57%; }

.sc-cafe-route {
	position: relative;
	margin-top: 16px;
	padding: 16px 18px 18px;
	border: 1px solid #d8dee9;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 30px -28px rgba(16, 32, 71, .72);
}
.sc-cafe-route > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.sc-cafe-route > header div { display: grid; }
.sc-cafe-route > header small,
.sc-cafe-route > header > span { color: #69758f; font-size: .78rem; }
.sc-cafe-route > div {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}
.sc-cafe-route > div::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 7%;
	right: 7%;
	height: 4px;
	border-radius: 999px;
	background: #d8dfeb;
}
.sc-cafe-route button {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: #536078;
	font: inherit;
	cursor: pointer;
}
.sc-cafe-route button > span {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 4px solid #fff;
	border-radius: 50%;
	background: #dfe4ec;
	color: #5d687c;
	box-shadow: 0 0 0 1px #c8d0de;
}
.sc-cafe-route button.is-done > span { background: #38a66f; color: #fff; box-shadow: 0 0 0 1px #268357; }
.sc-cafe-route button strong { font-size: .78rem; }

@media (max-width: 900px) {
	.sc-map-heading { align-items: flex-start; }
	.sc-map-hotspot { grid-template-columns: 30px 18px; min-height: 40px; padding: 5px 8px 5px 5px; }
	.sc-map-hotspot > span { width: 30px; height: 30px; }
	.sc-map-hotspot strong,
	.sc-map-hotspot small { display: none; }
	.sc-cafe-route > div { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
	.sc-cafe-route > div::before { display: none; }
}

@media (max-width: 560px) {
	.sc-map-heading { display: block; }
	.sc-map-heading .sc-secondary { width: 100%; margin-top: 12px; }
	.sc-cafe-map-scene { border-radius: 12px; }
	.sc-map-sign { min-height: 34px; padding: 5px 10px; font-size: .72rem; }
	.sc-map-hotspot { grid-template-columns: 26px; min-height: 32px; padding: 3px; border-radius: 10px; }
	.sc-map-hotspot > span { width: 26px; height: 26px; border-radius: 8px; }
	.sc-map-hotspot > i { display: none; }
	.sc-cafe-route > header { display: block; }
	.sc-cafe-route > header > span { display: block; margin-top: 7px; }
	.sc-cafe-route > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Number café: chalkboard atlas and tactile dessert counting counter */
.sc-numbers {
	background:
		radial-gradient(circle at 84% 9%, rgba(245,191,69,.09), transparent 26rem),
		linear-gradient(180deg, #f8fafc, #f3eee5 78%, #eee5d6);
}
.sc-counting-lab { margin-top: 4px; }
.sc-counting-scene {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(18px, 2.5vw, 34px);
	padding: clamp(36px, 4vw, 54px) clamp(24px, 3.4vw, 46px) clamp(28px, 3vw, 40px);
	border-radius: 16px;
	background:
		linear-gradient(180deg, rgba(14,8,3,.04), rgba(14,8,3,.18)),
		url('/assets/game/sankhya-cafe/scenes/numbers-cafe-workshop-v1.webp?v=20260806.1') center/cover no-repeat;
	box-shadow: 0 28px 54px -37px rgba(48,25,9,.9), inset 0 1px rgba(255,255,255,.26);
}
.sc-count-ticket {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 34px 20px 24px;
	border: 1px solid #ddceb5;
	border-radius: 8px;
	background:
		linear-gradient(rgba(117,92,56,.055) 1px, transparent 1px),
		#fffaf0;
	background-size: 100% 28px;
	box-shadow: 0 18px 28px -22px rgba(33,16,4,.9);
	text-align: center;
}
.sc-count-ticket::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	width: 82px;
	height: 24px;
	border: 3px solid #8c6439;
	border-bottom-width: 6px;
	border-radius: 8px 8px 4px 4px;
	background: linear-gradient(180deg, #dfb778, #9b6d37);
	box-shadow: 0 7px 12px -9px rgba(45,23,8,.8);
	transform: translateX(-50%);
}
.sc-count-ticket > span {
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px dashed #b9a78b;
	color: #5b4937;
	font-size: .82rem;
	font-weight: 800;
}
.sc-count-ticket > strong {
	margin-top: 18px;
	color: #162a65;
	font-size: clamp(4rem, 7.2vw, 6rem);
	line-height: .95;
}
.sc-count-ticket h3 {
	max-width: 100%;
	margin: 13px 0 0;
	color: #1f3576;
	font-size: clamp(1.35rem, 2.3vw, 2rem);
	line-height: 1.2;
	word-break: break-word;
}
.sc-count-ticket p {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px dashed #b9a78b;
	color: #554a3f;
	font-size: .9rem;
}
.sc-count-ticket a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 8px;
	color: #354aa3;
	font-size: .8rem;
	font-weight: 800;
	text-decoration: none;
}
.sc-count-workbench {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: 0;
	background: transparent;
}
.sc-count-workbench > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 10px;
	padding: 10px 13px;
	border-radius: 10px;
	background: rgba(255,250,240,.94);
	box-shadow: 0 12px 22px -18px rgba(32,15,4,.9);
}
.sc-count-workbench h3 { margin: 0; color: #1d2f67; font-size: 1.22rem; }
.sc-count-workbench header p { margin: 3px 0 0; color: #675b4d; font-size: .84rem; }
.sc-count-progress {
	flex: 0 0 auto;
	padding: 7px 11px;
	border-radius: 9px;
	background: #efe5d5;
	color: #6b5137;
	text-align: right;
}
.sc-count-progress span,
.sc-count-progress strong { display: block; }
.sc-count-progress span { font-size: .68rem; }
.sc-count-progress strong { color: #1f3475; font-size: 1rem; }
.sc-count-tray {
	display: grid;
	grid-template-columns: repeat(var(--sc-count-columns), minmax(62px, 1fr));
	align-content: center;
	gap: clamp(5px, 1vw, 12px);
	min-height: 286px;
	padding: clamp(24px, 3vw, 38px) clamp(27px, 3.4vw, 44px);
	border: 0;
	border-radius: 16px;
	background: url('/assets/game/sankhya-cafe/props/banana-leaf-counting-tray-v1.webp?v=20260806.1') center/100% 100% no-repeat;
	box-shadow: 0 20px 28px -20px rgba(44,22,8,.92);
}
.sc-count-tray.is-complete {
	box-shadow: 0 20px 28px -20px rgba(44,22,8,.92), inset 0 0 0 3px #d3a35e, inset 0 0 26px rgba(245,191,69,.24);
}
.sc-count-tray button {
	position: relative;
	min-width: 0;
	min-height: 80px;
	display: grid;
	place-items: center;
	padding: 1px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font: inherit;
	cursor: pointer;
}
.sc-count-tray button img {
	width: min(100%, 102px);
	height: auto;
	max-height: 96px;
	object-fit: contain;
	filter: saturate(.72) brightness(.82) drop-shadow(0 8px 6px rgba(16,24,9,.35));
	transform: scale(.94);
	transition: transform .24s cubic-bezier(.22,1,.36,1), filter .24s ease;
}
.sc-count-tray button.is-next::before {
	content: "";
	position: absolute;
	inset: 7%;
	border: 2px solid #f4cd66;
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(255,223,124,.16);
}
.sc-count-tray button.is-next:hover img { transform: translateY(-5px) scale(1); filter: saturate(1) brightness(1); }
.sc-count-tray button.is-counted img {
	filter: saturate(1.08) brightness(1.08) drop-shadow(0 9px 7px rgba(16,24,9,.32));
	transform: scale(1);
	animation: sc-counted-dessert .38s cubic-bezier(.22,1,.36,1);
}
.sc-count-tray button > span {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	border: 2px solid #e9bd62;
	border-radius: 50%;
	background: #142a63;
	color: #fff7df;
	font-size: .78rem;
	font-weight: 800;
	box-shadow: 0 5px 10px -7px rgba(5,12,34,.9);
}
.sc-count-workbench > footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 10px;
	padding: 9px 10px;
	border-radius: 10px;
	background: rgba(255,250,240,.94);
	box-shadow: 0 12px 22px -18px rgba(32,15,4,.9);
}
.sc-count-workbench > footer .sc-text-button:disabled { color: #a8a29e; }
.sc-count-complete {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: #17613f;
}
.sc-count-complete > i { color: #16835e; font-size: 1.35rem; }
.sc-count-complete span { display: grid; font-size: .78rem; }
.sc-count-complete strong { color: #124a32; font-size: .9rem; }
.sc-count-number-strip {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px;
	border-radius: 14px;
	background: linear-gradient(180deg, #6d3f21, #492713);
	box-shadow: 0 18px 32px -24px rgba(47,24,8,.92), inset 0 1px rgba(255,255,255,.15);
}
.sc-count-number-strip > div {
	display: flex;
	gap: 7px;
	min-width: 0;
	overflow-x: auto;
	padding: 3px 2px 8px;
	scrollbar-color: #b3814e transparent;
}
.sc-count-number-strip button { font: inherit; cursor: pointer; }
.sc-count-number-strip > div button {
	min-width: 72px;
	min-height: 58px;
	display: grid;
	place-items: center;
	align-content: center;
	padding: 5px 7px;
	border: 1px solid #a9794e;
	border-radius: 9px;
	background: linear-gradient(180deg, #a76d3b, #75451f);
	color: #fff0d2;
	box-shadow: inset 0 1px rgba(255,255,255,.16), 0 7px 11px -9px #160a02;
}
.sc-count-number-strip > div button strong { font-size: 1.22rem; line-height: 1; }
.sc-count-number-strip > div button span { max-width: 60px; margin-top: 5px; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.sc-count-number-strip > div button.is-active {
	border-color: #f0c761;
	background: #162d70;
	color: #fff;
	box-shadow: 0 0 0 2px #f0c761, 0 9px 16px -10px rgba(5,11,34,.9);
}
.sc-count-arrow {
	width: 48px;
	height: 48px;
	border: 1px solid #b5814d;
	border-radius: 10px;
	background: #805029;
	color: #fff0d2;
}
.sc-count-arrow:disabled { opacity: .34; cursor: not-allowed; }

.sc-number-menu-board {
	position: relative;
	margin: 10px 0 26px;
	min-height: 425px;
	padding: 60px 42px 24px;
	border: 0;
	border-radius: 10px;
	background: #102f28 url('/assets/game/sankhya-cafe/props/blank-chalkboard-menu-v1.webp?v=20260806.1') center/100% 100% no-repeat;
	color: #f3dfad;
	box-shadow: 0 26px 46px -29px rgba(41,21,8,.95);
}
.sc-number-menu-board::before { display: none; }
.sc-number-menu-board-stage {
	grid-column: 1 / -1;
	min-height: 320px;
	margin: 0 0 10px;
	padding: 14px 18px 12px;
	background: transparent;
	box-shadow: none;
}
.sc-board-lamps {
	position: absolute;
	top: -40px;
	left: 8%;
	right: 8%;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}
.sc-number-menu-board .sc-board-lamps { display: none; }
.sc-board-lamps span {
	width: 44px;
	height: 28px;
	border-radius: 50% 50% 8px 8px;
	background: linear-gradient(180deg, #b58038, #5a3217);
	box-shadow: 0 22px 26px 9px rgba(255,208,106,.13);
}
.sc-number-menu-board > header,
.sc-number-menu-board > footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
}
.sc-number-menu-board > header h3 {
	margin: 0;
	color: #f1cc78;
	font-family: "Sriracha Local", "Sarabun", sans-serif;
	font-size: clamp(1.55rem, 3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.sc-number-menu-board > header i,
.sc-number-menu-board > footer i { color: #d7aa59; }
.sc-board-columns {
	display: grid;
	grid-template-columns: 1.2fr 1fr .75fr 1.05fr;
	margin-top: 20px;
	border-top: 1px solid rgba(230,202,139,.36);
	border-bottom: 1px solid rgba(230,202,139,.36);
}
.sc-board-columns > section {
	min-width: 0;
	padding: 18px clamp(12px, 1.6vw, 22px);
	border-left: 1px dashed rgba(230,202,139,.34);
}
.sc-board-columns > section:first-child { border-left: 0; }
.sc-board-columns h4 {
	margin: 0 0 12px;
	padding: 6px 8px;
	border: 1px solid rgba(225,183,98,.5);
	color: #edc876;
	font-family: "Sriracha Local", "Sarabun", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
}
.sc-board-columns > section:first-child > div,
.sc-board-columns > section:nth-child(2) > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 14px;
}
.sc-board-columns p {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 9px;
	margin: 6px 0;
	line-height: 1.3;
}
.sc-board-columns p strong,
.sc-board-columns p span { font-family: "Sriracha Local", "Sarabun", sans-serif; font-weight: 400; }
.sc-board-columns p strong { color: #fff3cf; font-size: 1.12rem; }
.sc-board-columns p span { min-width: 0; color: #ecdcae; font-size: .94rem; overflow-wrap: anywhere; }
.sc-number-menu-board > footer { padding-top: 14px; color: #d9caa5; font-size: .8rem; }

@keyframes sc-counted-dessert {
	0% { transform: translateY(-9px) scale(.9); filter: saturate(.7) brightness(.9) blur(1px); }
	70% { transform: translateY(2px) scale(1.06); }
	100% { transform: none; filter: saturate(1.08) brightness(1.08) drop-shadow(0 9px 7px rgba(16,24,9,.32)); }
}

@media (max-width: 1080px) {
	.sc-counting-scene { grid-template-columns: 220px minmax(0, 1fr); }
	.sc-count-tray { min-height: 270px; }
	.sc-board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-board-columns > section:nth-child(3) { border-left: 0; border-top: 1px dashed rgba(230,202,139,.34); }
	.sc-board-columns > section:nth-child(4) { border-top: 1px dashed rgba(230,202,139,.34); }
	.sc-number-menu-board-stage .sc-board-columns { grid-template-columns: 1.2fr 1fr .75fr 1.05fr; }
	.sc-number-menu-board-stage .sc-board-columns > section:nth-child(3) { border-top: 0; border-left: 1px dashed rgba(230,202,139,.34); }
	.sc-number-menu-board-stage .sc-board-columns > section:nth-child(4) { border-top: 0; }
}

@media (max-width: 760px) {
	.sc-number-mode-switch { overflow-x: auto; }
	.sc-number-mode-switch button { min-width: max-content; padding-inline: 12px; }
	.sc-counting-scene {
		grid-template-columns: 1fr;
		padding: 34px 16px 28px;
		background:
			url('/assets/game/sankhya-cafe/props/blank-chalkboard-menu-v1.webp?v=20260806.1') top center/auto 430px no-repeat,
			linear-gradient(165deg, #80502e, #4e2a17 72%);
	}
	.sc-number-menu-board-stage { min-height: 380px; padding: 26px 6px 8px; }
	.sc-number-menu-board-stage .sc-board-columns {
		width: 100%;
		max-width: 100%;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 220px;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-color: #b88d51 transparent;
	}
	.sc-number-menu-board-stage .sc-board-columns > section:nth-child(3),
	.sc-number-menu-board-stage .sc-board-columns > section:nth-child(4) { border-top: 0; }
	.sc-count-ticket { min-height: 238px; }
	.sc-count-ticket > strong { font-size: 4.8rem; }
	.sc-count-tray { min-height: 260px; }
	.sc-count-workbench > footer { align-items: stretch; flex-direction: column; }
	.sc-count-workbench > footer .sc-primary { width: 100%; }
	.sc-count-complete { justify-content: center; text-align: center; }
	.sc-number-menu-board { padding: 34px 14px 16px; border-width: 10px; }
	.sc-board-lamps { top: -31px; }
	.sc-board-lamps span { width: 34px; height: 22px; }
}

@media (max-width: 520px) {
	.sc-count-ticket {
		min-height: 0;
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		align-content: center;
		align-items: center;
		padding: 31px 16px 17px;
		text-align: left;
	}
	.sc-count-ticket > span { grid-column: 1 / -1; text-align: center; }
	.sc-count-ticket > strong {
		grid-column: 1;
		grid-row: 2 / 4;
		margin: 15px 0 0;
		font-size: 4rem;
		text-align: center;
	}
	.sc-count-ticket h3 { grid-column: 2; margin-top: 14px; font-size: 1.42rem; }
	.sc-count-ticket p { grid-column: 2; margin-top: 8px; padding-top: 8px; font-size: .78rem; }
	.sc-count-ticket a { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
	.sc-count-workbench > header { align-items: flex-start; flex-direction: column; gap: 10px; }
	.sc-count-progress { width: 100%; display: flex; align-items: baseline; justify-content: space-between; }
	.sc-count-tray { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px; min-height: 250px; padding: 12px 8px; border-width: 6px; }
	.sc-count-tray button { min-height: 70px; }
	.sc-count-tray button img { max-height: 75px; }
	.sc-count-tray button > span { width: 25px; height: 25px; font-size: .68rem; }
	.sc-count-number-strip { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 7px; padding: 9px; }
	.sc-count-arrow { width: 40px; height: 44px; }
	.sc-count-number-strip > div button { min-width: 62px; }
	.sc-board-columns { grid-template-columns: 1fr; }
	.sc-board-columns > section { border-top: 1px dashed rgba(230,202,139,.34); border-left: 0; }
	.sc-board-columns > section:first-child { border-top: 0; }
	.sc-board-columns > section:nth-child(4) { border-top: 1px dashed rgba(230,202,139,.34); }
	.sc-number-menu-board-stage { min-width: 0; max-width: 100%; overflow: hidden; }
	.sc-number-menu-board-stage .sc-board-columns {
		width: 100%;
		max-width: 100%;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 220px;
	}
	.sc-number-menu-board-stage .sc-board-columns > section { border-top: 0; border-left: 1px dashed rgba(230,202,139,.34); }
	.sc-number-menu-board-stage .sc-board-columns > section:first-child { border-left: 0; }
}

@media (min-width: 761px) {
	.sc-numbers .sc-page-heading { margin-bottom: 14px; padding-bottom: 10px; }
	.sc-counting-scene {
		gap: 18px 28px;
		padding: 26px 38px 24px;
	}
	.sc-number-menu-board-stage {
		min-height: 238px;
		margin-bottom: 0;
		padding: 0 14px 4px;
	}
	.sc-number-menu-board-stage > header,
	.sc-number-menu-board-stage > .sc-board-columns,
	.sc-number-menu-board-stage > footer { transform: translateY(18px); }
	.sc-number-menu-board-stage > header h3 { font-size: 1.8rem; }
	.sc-number-menu-board-stage .sc-board-columns { margin-top: 8px; }
	.sc-number-menu-board-stage .sc-board-columns > section { padding: 7px 11px; }
	.sc-number-menu-board-stage .sc-board-columns h4 { margin-bottom: 5px; padding: 2px 6px; font-size: .88rem; }
	.sc-number-menu-board-stage .sc-board-columns p { gap: 7px; margin: 1px 0; }
	.sc-number-menu-board-stage .sc-board-columns p strong { font-size: .96rem; }
	.sc-number-menu-board-stage .sc-board-columns p span { font-size: .8rem; }
	.sc-number-menu-board-stage > footer { padding-top: 5px; font-size: .72rem; }
	.sc-count-ticket { padding: 24px 16px 14px; }
	.sc-count-ticket > span { padding-bottom: 7px; font-size: .74rem; }
	.sc-count-ticket > strong { margin-top: 10px; font-size: 4.6rem; }
	.sc-count-ticket h3 { margin-top: 7px; font-size: 1.5rem; }
	.sc-count-ticket p { margin-top: 10px; padding-top: 8px; font-size: .78rem; }
	.sc-count-ticket a { min-height: 38px; margin-top: 2px; font-size: .72rem; }
	.sc-count-workbench > header { margin-bottom: 5px; padding: 6px 10px; }
	.sc-count-workbench h3 { font-size: 1rem; }
	.sc-count-workbench header p { margin-top: 1px; font-size: .72rem; }
	.sc-count-progress { padding: 4px 9px; }
	.sc-count-progress strong { font-size: .9rem; }
	.sc-count-tray { min-height: 206px; padding: 17px 34px; }
	.sc-count-tray button { min-height: 64px; }
	.sc-count-tray button img { max-height: 76px; }
	.sc-count-workbench > footer { margin-top: 5px; padding: 4px 8px; }
	.sc-count-workbench > footer .sc-primary,
	.sc-count-workbench > footer .sc-text-button { min-height: 40px; padding-block: 7px; }
	.sc-count-number-strip { margin-top: 10px; padding-block: 8px; }
	.sc-count-number-strip > div button { min-height: 52px; }
}

.sc-number-readable-table {
	margin-top: 24px;
	padding: clamp(20px, 3vw, 32px);
	border-radius: 16px;
	background: #fffdf8;
	box-shadow: 0 20px 38px -30px rgba(51, 31, 13, .5);
}

.sc-number-readable-table > header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #ddd3c4;
}

.sc-number-readable-table h3 {
	margin: 0;
	color: #182d68;
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	line-height: 1.2;
}

.sc-number-readable-table h3 i {
	margin-right: 8px;
	color: #9a5b36;
}

.sc-number-readable-table header p {
	margin: 5px 0 0;
	color: #5f6878;
}

.sc-number-readable-table header a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	color: #354aa3;
	font-weight: 800;
	text-decoration: none;
}

.sc-number-readable-table header a:hover { text-decoration: underline; }

/* ชื่อขนมใต้รูปในตู้ขนม — ให้รู้ว่าชิ้นไหนชื่ออะไร (แก้ชื่อที่ app/data/sankhya-cafe/desserts.json) */
.sc-pantry-name {
	display: block;
	margin-top: 2px;
	padding: 0 2px;
	color: #f3e3cf;
	font-size: .68rem;
	line-height: 1.3;
	text-align: center;
}

/* แถวคั่น … = ยังมีเลขระหว่างทางอีก ไม่ได้ไล่ครบทุกจำนวน */
.sc-readable-number-runs tr.sc-readable-gap td {
	padding: 4px 16px;
	color: #b3a898;
	font-size: 1.1rem;
	letter-spacing: .22em;
	text-align: center;
}
.sc-readable-number-runs tbody tr.sc-readable-gap:hover { background: transparent; }
/* ป้ายบอกที่มาของรูป: มีในตำรา vs เครื่องประกอบตามกฎ */
.sc-readable-number-runs td:nth-child(4) span.is-composed { background: #f1efe9; color: #6a6154; }
.sc-readable-attested {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 8px;
	border-radius: 8px;
	background: #ecebff;
	color: #3b3a99;
	font-size: .74rem;
	font-weight: 800;
}

/* คำใบ้ท้ายช่วง "หลักใหญ่" — บอกวิธีต่อยอดเลขหน่วยเข้ากับฐาน */
.sc-readable-run-tip {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 10px 12px 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff7e0;
	box-shadow: inset 0 0 0 1px #f6dfa4;
	color: #7a5310;
	font-size: .875rem;
	line-height: 1.55;
}
.sc-readable-run-tip i { margin-top: 3px; color: #d99b1c; }

.sc-readable-number-runs {
	display: grid;
	gap: 14px;
}

.sc-readable-number-runs details {
	border: 1px solid #d8cbb9;
	border-radius: 14px;
	background: #fffdf8;
	overflow: hidden;
}

.sc-readable-number-runs summary {
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 18px;
	background: #183572;
	color: #fff8e5;
	cursor: pointer;
	list-style: none;
}

.sc-readable-number-runs summary::-webkit-details-marker { display: none; }

.sc-readable-number-runs summary > span:first-child {
	display: grid;
	gap: 2px;
}

.sc-readable-number-runs summary strong {
	font-size: 1.25rem;
	line-height: 1.2;
}

.sc-readable-number-runs summary small {
	color: #dbe5ff;
	font-size: .82rem;
	font-weight: 600;
}

.sc-readable-run-count {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	color: #f7dba2;
	font-weight: 800;
}

.sc-readable-run-count i {
	transition: transform .2s ease;
}

.sc-readable-number-runs details[open] .sc-readable-run-count i { transform: rotate(180deg); }

.sc-readable-table-scroll { overflow-x: auto; }

.sc-readable-number-runs table {
	width: 100%;
	min-width: 790px;
	border-collapse: collapse;
	table-layout: fixed;
}

.sc-readable-number-runs th {
	padding: 11px 16px;
	background: #eee5d7;
	color: #594b3d;
	font-size: .82rem;
	font-weight: 800;
	text-align: left;
}

/* ช่องเลขต้องกว้างพอรับ ๑๐,๐๐๐,๐๐๐ ไม่งั้นตัวเลขล้นไปทับคำบาลี (table-layout: fixed ไม่ขยายให้) */
.sc-readable-number-runs th:nth-child(1) { width: 19%; }
.sc-readable-number-runs th:nth-child(2) { width: 25%; }
.sc-readable-number-runs th:nth-child(3) { width: 32%; }
.sc-readable-number-runs th:nth-child(4) { width: 24%; }

.sc-readable-number-runs td {
	padding: 13px 16px;
	border-top: 1px solid #e8dfd2;
	color: #273142;
	font-size: 1rem;
	line-height: 1.5;
	vertical-align: top;
}

.sc-readable-number-runs tbody tr:nth-child(even) { background: #faf6ef; }
.sc-readable-number-runs tbody tr:hover { background: #fff0cd; }

.sc-readable-number-runs td:first-child {
	color: #263f88;
	font-size: 1.35rem;
	font-weight: 900;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
/* เลขหลักล้านขึ้นไปยาวกว่าช่อง — ย่อลงหน่อยแทนที่จะปล่อยล้น */
.sc-readable-number-runs td:first-child.is-long { font-size: 1.05rem; }

.sc-readable-number-runs td:nth-child(2) strong {
	color: #172e70;
	font-size: 1.12rem;
	font-weight: 800;
}

.sc-readable-number-runs td:nth-child(3) { color: #574736; }

.sc-readable-number-runs td:nth-child(4) span {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 8px;
	background: #e9f2e4;
	color: #315d32;
	font-size: .82rem;
	font-weight: 800;
}

.sc-readable-number-runs details > footer {
	padding: 9px 16px;
	border-top: 1px solid #e2d8c9;
	background: #f7f1e8;
	color: #5f6878;
	font-size: .78rem;
	font-weight: 700;
}

.sc-readable-number-runs details > footer i {
	margin-right: 6px;
	color: #354aa3;
}

@media (max-width: 600px) {
	.sc-number-readable-table > header {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}
	.sc-readable-number-runs summary { align-items: flex-start; gap: 10px; padding: 12px 14px; }
	.sc-readable-number-runs summary strong { font-size: 1.12rem; }
	.sc-readable-number-runs summary small { font-size: .74rem; }
	.sc-readable-run-count { gap: 7px; font-size: .78rem; }
	.sc-readable-number-runs table { min-width: 700px; }
	.sc-readable-number-runs th,
	.sc-readable-number-runs td { padding-inline: 12px; }
}

/* Pali cashier */
.sc-cashier .sc-page-heading { margin-bottom: 16px; }

.sc-cashier-scene {
	min-height: 720px;
	display: grid;
	grid-template-columns: minmax(190px, .72fr) minmax(430px, 1.55fr) minmax(210px, .8fr);
	align-items: end;
	gap: 24px;
	padding: 32px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(30, 18, 10, .32), rgba(48, 25, 10, .76)),
		url('/assets/game/sankhya-cafe/scenes/numbers-cafe-workshop-v1.webp?v=20260806.1') center/cover no-repeat;
	box-shadow: 0 22px 42px -32px rgba(52, 28, 12, .7);
}

.sc-cashier-history {
	align-self: center;
	padding: 20px;
	border: 1px solid rgba(161, 112, 58, .48);
	border-radius: 14px;
	background: rgba(255, 250, 238, .96);
	box-shadow: 0 18px 34px -24px rgba(35, 19, 8, .82);
}

.sc-cashier-history h3 {
	margin: 0 0 16px;
	color: #172e70;
	font-size: 1.12rem;
}

.sc-cashier-history h3 i { margin-right: 7px; color: #a56325; }

.sc-cashier-machine {
	width: min(100%, 620px);
	justify-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sc-cashier-paper-slot {
	min-height: 268px;
	width: 78%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin-bottom: -26px;
}

.sc-cashier-receipt {
	width: 100%;
	min-height: 240px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding: 20px 22px 30px;
	clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 100%, 94% 96%, 91% 100%, 88% 96%, 85% 100%, 82% 96%, 79% 100%, 76% 96%, 73% 100%, 70% 96%, 67% 100%, 64% 96%, 61% 100%, 58% 96%, 55% 100%, 52% 96%, 49% 100%, 46% 96%, 43% 100%, 40% 96%, 37% 100%, 34% 96%, 31% 100%, 28% 96%, 25% 100%, 22% 96%, 19% 100%, 16% 96%, 13% 100%, 10% 96%, 7% 100%, 4% 96%, 0 100%);
	background: #fffaf0;
	color: #30333b;
	box-shadow: 0 15px 28px -21px rgba(31, 17, 9, .75);
	text-align: center;
}

.sc-cashier-receipt.is-printed { animation: sc-receipt-print .52s cubic-bezier(.18, .84, .25, 1); }

@keyframes sc-receipt-print {
	from { clip-path: inset(100% 0 0); transform: translateY(36px); }
	to { clip-path: inset(0); transform: translateY(0); }
}

.sc-cashier-receipt > header {
	width: 100%;
	display: grid;
	grid-template-columns: 24px 1fr;
	padding-bottom: 10px;
	border-bottom: 1px dashed #c8bcae;
	color: #172e70;
	text-align: left;
}
.sc-cashier-receipt > header i { grid-row: 1 / 3; align-self: center; color: #a56325; }
.sc-cashier-receipt > header span { font-weight: 900; }
.sc-cashier-receipt > header small { color: #786b5e; font-size: .65rem; }
.sc-cashier-receipt > strong { margin-top: 14px; color: #172e70; font-size: 2.5rem; line-height: 1; }
.sc-cashier-receipt h3 { margin: 9px 0 0; color: #172e70; font-size: clamp(1.3rem, 2.5vw, 1.8rem); line-height: 1.3; }
.sc-cashier-receipt > p { margin: 4px 0 0; color: #7a5b37; font-size: .74rem; }
.sc-cashier-receipt > div { width: 100%; display: grid; gap: 2px; margin-top: 14px; padding-top: 9px; border-top: 1px dashed #c8bcae; text-align: left; }
.sc-cashier-receipt > div small { color: #857667; font-size: .64rem; font-weight: 700; }
.sc-cashier-receipt > div span { color: #493d32; font-size: .76rem; font-weight: 700; line-height: 1.45; }
.sc-cashier-receipt > footer { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; }
.sc-cashier-receipt > footer span { font-size: .65rem; font-weight: 800; }
.sc-cashier-receipt > footer span i { margin-right: 5px; }
.sc-cashier-receipt > footer .is-exact { color: #08724f; }
.sc-cashier-receipt > footer .is-composed { color: #9a5b16; }
.sc-cashier-receipt > footer a { min-width: 36px; min-height: 36px; display: grid; place-items: center; border-radius: 8px; background: #e9eefc; color: #263f88; text-decoration: none; }
.sc-cashier-download {
	width: 34px;
	height: 34px;
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 4;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid #e7cf9b;
	border-radius: 10px;
	background: #fff3d7;
	color: #263f88;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color .16s ease, color .16s ease, transform .16s cubic-bezier(.2, 1, .3, 1);
}
.sc-cashier-download:hover:not(:disabled) { background: #f8e4b2; color: #172e70; transform: translateY(-1px); }
.sc-cashier-download:active:not(:disabled) { transform: translateY(1px); }
.sc-cashier-download:disabled { cursor: wait; opacity: .7; }
.sc-cashier-download.is-preparing { cursor: wait; opacity: .72; }
.sc-cashier-download.is-error { border-color: #e0b979; background: #fff0d8; color: #8b5114; cursor: pointer; opacity: 1; }
.sc-cashier-download:focus-visible { outline: 3px solid #8eb0ff; outline-offset: 2px; }
.sc-cashier-receipt > header { padding-right: 42px; }

.sc-cashier-receipt.is-blank {
	min-height: 190px;
	justify-content: center;
	color: #988a7a;
}
.sc-cashier-receipt.is-blank > i { margin-bottom: 10px; font-size: 2rem; }
.sc-cashier-receipt.is-blank > strong { margin: 0; color: #665b50; font-size: 1rem; }
.sc-cashier-receipt.is-blank > small { margin-top: 5px; font-size: .72rem; }

.sc-cashier-register {
	width: 100%;
	position: relative;
	padding: 22px 28px 26px;
	border: 1px solid #3e2515;
	border-radius: 24px 24px 14px 14px;
	background: linear-gradient(145deg, #80502f, #4b2918 74%);
	box-shadow: 0 28px 42px -24px rgba(21, 11, 5, .95), inset 0 1px 0 rgba(255, 225, 174, .28);
}

.sc-cashier-register::before {
	content: "";
	width: 68%;
	height: 22px;
	position: absolute;
	left: 16%;
	top: -13px;
	border: 1px solid #5a371e;
	border-radius: 10px;
	background: linear-gradient(#d3a35b, #8a5b29);
	box-shadow: inset 0 2px 2px rgba(255, 237, 191, .5);
}

.sc-cashier-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-bottom: 12px;
	color: #f1cd87;
	font-size: .65rem;
	font-weight: 900;
	letter-spacing: .08em;
}

.sc-cashier-display {
	min-height: 86px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-direction: column;
	padding: 10px 18px;
	border: 3px solid #b78644;
	border-radius: 12px;
	background: #0e214f;
	box-shadow: inset 0 5px 14px rgba(0, 0, 0, .42);
	text-align: right;
}
.sc-cashier-display strong { color: #fff4ce; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; }
.sc-cashier-display small { max-width: 100%; margin-top: 6px; color: #bed0ff; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sc-cashier-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 118px;
	gap: 16px;
	margin-top: 18px;
}

.sc-cashier-keypad {
	display: grid;
	grid-template-columns: repeat(3, minmax(64px, 1fr));
	gap: 10px;
}

.sc-cashier-keypad button {
	min-height: 58px;
	border: 1px solid #b69a75;
	border-radius: 12px;
	background: linear-gradient(#fff8e9, #e7d7bd);
	box-shadow: 0 5px 10px -7px rgba(15, 8, 3, .92), inset 0 1px 0 #fff;
	color: #172e70;
	font: inherit;
	font-size: 1.45rem;
	font-weight: 900;
	cursor: pointer;
}
.sc-cashier-keypad button:hover:not(:disabled) { transform: translateY(-1px); background: #fff4db; }
.sc-cashier-keypad button:active:not(:disabled) { transform: translateY(1px); }
.sc-cashier-keypad button:disabled { cursor: default; opacity: .45; }
.sc-cashier-keypad .is-zero { grid-column: 1; }
.sc-cashier-keypad .is-backspace,
.sc-cashier-keypad .is-clear { display: grid; place-items: center; align-content: center; gap: 1px; font-size: .78rem; }
.sc-cashier-keypad .is-backspace i,
.sc-cashier-keypad .is-clear i { font-size: 1rem; }

.sc-cashier-print {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 12px;
	border: 2px solid #cc9d49;
	border-radius: 14px;
	background: #172e70;
	box-shadow: 0 10px 20px -14px rgba(8, 13, 43, .9), inset 0 1px 0 rgba(255, 255, 255, .2);
	color: #fff7df;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 900;
	line-height: 1.35;
	cursor: pointer;
}
.sc-cashier-print i { color: #efbd5e; font-size: 1.75rem; }
.sc-cashier-print:hover:not(:disabled) { background: #203d8f; }
.sc-cashier-print:disabled { cursor: default; filter: grayscale(.65); opacity: .52; }

.sc-cashier-drawer {
	height: 18px;
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 4px;
	border-top: 1px solid rgba(33, 15, 7, .55);
}
.sc-cashier-drawer span { width: 56px; height: 7px; display: block; margin: 4px auto 0; border-radius: 6px; background: #c08a43; }

.sc-cashier-history { align-self: center; }
.sc-cashier-history-list { display: grid; gap: 8px; }
.sc-cashier-history button {
	width: 100%;
	min-height: 54px;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 14px;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid #dfd2c0;
	border-radius: 10px;
	background: #fffdf7;
	color: #29334b;
	font: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}
.sc-cashier-history button:hover { background: #fff3d8; }
.sc-cashier-history button span { color: #172e70; font-size: 1.1rem; font-weight: 900; }
.sc-cashier-history button strong { min-width: 0; overflow-wrap: anywhere; font-size: .78rem; line-height: 1.4; white-space: normal; }
.sc-cashier-history button i { color: #a06a31; }
.sc-cashier-history-empty { min-height: 210px; display: grid; place-items: center; align-content: center; gap: 9px; color: #8c7a66; text-align: center; }
.sc-cashier-history-empty i { font-size: 2rem; }
.sc-cashier-history-empty p { max-width: 18ch; margin: 0; font-size: .78rem; line-height: 1.5; }
.sc-cashier-history > footer { display: flex; align-items: center; gap: 7px; margin-top: 15px; padding-top: 12px; border-top: 1px dashed #cdbca5; color: #756451; font-size: .68rem; }

.sc-cashier button:focus-visible,
.sc-cashier a:focus-visible { outline: 3px solid #8eb0ff; outline-offset: 2px; }

@media (max-width: 1180px) {
	.sc-cashier-scene { grid-template-columns: minmax(180px, .65fr) minmax(420px, 1.35fr); }
	.sc-cashier-history { grid-column: 1 / -1; width: 100%; }
	.sc-cashier-history > div:first-of-type { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sc-cashier-history-empty { min-height: 100px; }
}

@media (max-width: 760px) {
	.sc-cashier-scene { min-height: 0; grid-template-columns: 1fr; gap: 18px; padding: 18px 14px 24px; }
	.sc-cashier-machine { order: 1; }
	.sc-cashier-history { grid-column: auto; order: 3; }
	.sc-cashier-history > div:first-of-type { grid-template-columns: 1fr; }
	.sc-cashier-paper-slot { width: 86%; }
	.sc-cashier-register { padding-inline: 18px; }
	.sc-cashier-controls { grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; }
	.sc-cashier-keypad { grid-template-columns: repeat(3, minmax(52px, 1fr)); gap: 8px; }
	.sc-cashier-keypad button { min-height: 54px; }
	.sc-cashier-drawer { left: 18px; right: 18px; }
}

@media (max-width: 400px) {
	.sc-cashier-scene { padding-inline: 9px; }
	.sc-cashier-paper-slot { width: 92%; min-height: 250px; }
	.sc-cashier-receipt { padding-inline: 16px; }
	.sc-cashier-register { padding: 20px 12px 24px; }
	.sc-cashier-controls { grid-template-columns: minmax(0, 1fr) 82px; }
	.sc-cashier-keypad { grid-template-columns: repeat(3, minmax(46px, 1fr)); gap: 7px; }
	.sc-cashier-keypad button { min-height: 50px; font-size: 1.25rem; }
	.sc-cashier-print { font-size: .88rem; }
	.sc-cashier-display { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.sc-cashier-receipt.is-printed { animation: none; }
	.sc-cashier-keypad button,
	.sc-readable-run-count i { transition: none; }
}

/* Generated calculator plate — semantic controls over authored café materials */
.sc-cashier-scene {
	min-height: 0;
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	padding: 0;
	overflow: hidden;
	border: 1px solid #8c5a2e;
	border-radius: 18px;
	background: #3b2112 url('/assets/game/sankhya-cafe/props/pali-calculator-stage-v2.webp?v=20260807.1') center/cover no-repeat;
	box-shadow: 0 30px 56px -34px rgba(42, 20, 6, .88);
}

.sc-cashier-machine {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	justify-self: stretch;
	align-self: stretch;
	pointer-events: none;
}

.sc-cashier-paper-slot {
	width: 28.7%;
	height: 34.1%;
	min-height: 0;
	position: absolute;
	left: 35.7%;
	top: 2.2%;
	z-index: 3;
	display: block;
	margin: 0;
	pointer-events: auto;
}

.sc-cashier-receipt {
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: clamp(12px, 1.45vw, 22px) clamp(14px, 1.8vw, 28px) clamp(10px, 1.2vw, 18px);
	overflow: hidden;
	clip-path: none;
	background: transparent;
	box-shadow: none;
}
.sc-cashier-receipt:not(.is-blank) { padding-top: clamp(13px, 1.6vw, 25px); }
.sc-cashier-receipt.is-printed { animation: sc-calculator-paper-print .58s cubic-bezier(.16, 1, .3, 1); }
@keyframes sc-calculator-paper-print {
	from { clip-path: inset(100% 0 0); filter: blur(1px); transform: translateY(24%); }
	to { clip-path: inset(0); filter: blur(0); transform: translateY(0); }
}
.sc-cashier-receipt > header {
	grid-template-columns: clamp(18px, 1.7vw, 26px) 1fr;
	padding-bottom: clamp(5px, .6vw, 9px);
	font-size: clamp(.68rem, .9vw, .9rem);
}
.sc-cashier-receipt > header small { font-size: clamp(.56rem, .7vw, .72rem); }
.sc-cashier-receipt > strong { margin-top: clamp(8px, 1vw, 15px); font-size: clamp(2rem, 4.2vw, 4rem); }
.sc-cashier-receipt > strong.is-long-number { font-size: clamp(1.2rem, 2.5vw, 2.2rem); letter-spacing: -.03em; white-space: nowrap; }
.sc-cashier-receipt h3 { margin-top: clamp(4px, .6vw, 9px); font-size: clamp(1.15rem, 2.25vw, 2.2rem); line-height: 1.12; }
.sc-cashier-receipt > p { margin-top: 3px; font-size: clamp(.6rem, .76vw, .78rem); }
.sc-cashier-receipt > div { margin-top: clamp(7px, .85vw, 13px); padding-top: clamp(5px, .6vw, 9px); }
.sc-cashier-receipt > div small { font-size: clamp(.56rem, .68vw, .7rem); }
.sc-cashier-receipt > div span { font-size: clamp(.62rem, .78vw, .8rem); line-height: 1.3; }
.sc-cashier-receipt > footer { gap: 6px; padding-top: clamp(6px, .7vw, 11px); }
.sc-cashier-receipt > footer span { font-size: clamp(.55rem, .66vw, .68rem); }
.sc-cashier-receipt > footer a { min-width: clamp(24px, 2.15vw, 32px); min-height: clamp(24px, 2.15vw, 32px); }
.sc-cashier-receipt.is-blank { min-height: 0; padding-top: 0; }
.sc-cashier-receipt.is-blank > i { margin-bottom: 8px; font-size: clamp(1.4rem, 2.4vw, 2.2rem); }
.sc-cashier-receipt.is-blank > strong { font-size: clamp(.9rem, 1.2vw, 1.2rem); }
.sc-cashier-receipt.is-blank > small { width: 86%; font-size: clamp(.68rem, .82vw, .84rem); line-height: 1.35; text-align: center; }
.sc-cashier-receipt.is-blank > i,
.sc-cashier-receipt.is-blank > strong,
.sc-cashier-receipt.is-blank > small { position: relative; left: 0; }
.sc-cashier-receipt:not(.is-blank) > header,
.sc-cashier-receipt:not(.is-blank) > div,
.sc-cashier-receipt:not(.is-blank) > footer { width: 88%; transform: none; }
.sc-cashier-receipt:not(.is-blank) > strong,
.sc-cashier-receipt:not(.is-blank) > h3,
.sc-cashier-receipt:not(.is-blank) > p { transform: none; }

.sc-cashier-register {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	pointer-events: none;
}
.sc-cashier-register::before,
.sc-cashier-brand,
.sc-cashier-drawer { display: none; }

.sc-cashier-display {
	width: 33.1%;
	height: 8.5%;
	min-height: 0;
	position: absolute;
	left: 33.7%;
	top: 39.6%;
	z-index: 2;
	justify-content: center;
	padding: 3px 6%;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	pointer-events: auto;
}
.sc-cashier-display strong { font-size: clamp(1.25rem, 3.1vw, 2.9rem); text-shadow: 0 1px 10px rgba(255, 226, 157, .16); }
.sc-cashier-display strong.is-long-number { font-size: clamp(.95rem, 1.8vw, 1.65rem); letter-spacing: -.03em; white-space: nowrap; }
.sc-cashier-display small { margin-top: 2px; font-size: clamp(.48rem, .68vw, .72rem); transform: translateY(-3px); }

.sc-cashier-controls { display: contents; }
.sc-cashier-keypad {
	width: 23.4%;
	height: 31.8%;
	position: absolute;
	left: 32.2%;
	top: 50.3%;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 22% 24% 26% 28%;
	column-gap: 5%;
	row-gap: 0;
	pointer-events: auto;
}
.sc-cashier-keypad button {
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 18%;
	background: transparent;
	box-shadow: none;
	color: #142e6d;
	font-size: clamp(.95rem, 2.25vw, 2.05rem);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
	transition: background-color .16s ease, transform .16s cubic-bezier(.2, 1, .3, 1), color .16s ease;
}
.sc-cashier-keypad button:hover:not(:disabled) { background: rgba(255, 231, 165, .28); transform: translateY(-2px); }
.sc-cashier-keypad button:active:not(:disabled) { background: rgba(91, 54, 20, .16); transform: translateY(2px); }
.sc-cashier-keypad button:disabled { opacity: .32; }
.sc-cashier-keypad .is-zero { grid-column: 1; }
.sc-cashier-keypad .is-backspace,
.sc-cashier-keypad .is-clear { gap: 0; font-size: clamp(.48rem, .72vw, .72rem); }
.sc-cashier-keypad .is-backspace i,
.sc-cashier-keypad .is-clear i { font-size: clamp(.72rem, 1.05vw, 1rem); }
.sc-cashier-keypad button:nth-child(4),
.sc-cashier-keypad button:nth-child(7),
.sc-cashier-keypad button:nth-child(8),
.sc-cashier-keypad button:nth-child(10) { position: relative; left: 0; }

.sc-cashier-print {
	width: 10.3%;
	height: 27.3%;
	min-height: 0;
	position: absolute;
	left: 57.8%;
	top: 54.7%;
	z-index: 3;
	gap: clamp(4px, .7vw, 10px);
	padding: 3px;
	border: 0;
	border-radius: 18%;
	background: transparent;
	box-shadow: none;
	font-size: clamp(.58rem, 1.15vw, 1rem);
	pointer-events: auto;
	transition: background-color .16s ease, transform .16s cubic-bezier(.2, 1, .3, 1);
}
.sc-cashier-print i { font-size: clamp(1rem, 2vw, 1.85rem); }
.sc-cashier-print:hover:not(:disabled) { background: rgba(59, 93, 176, .22); transform: translateY(-2px); }
.sc-cashier-print:active:not(:disabled) { transform: translateY(2px); }
.sc-cashier-print:disabled { filter: none; opacity: .38; }

.sc-cashier-history {
	width: 100%;
	height: auto;
	position: relative;
	left: auto;
	top: auto;
	z-index: auto;
	align-self: stretch;
	margin-top: 18px;
	padding: 18px 2px 0;
	overflow: visible;
	border: 0;
	border-top: 1px solid #d6c4a7;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.sc-cashier-history h3 {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0 0 12px;
	padding: 0;
	color: #172e70;
	font-size: clamp(.95rem, 1.25vw, 1.12rem);
}
.sc-cashier-history h3 i { color: #6f411c; }
.sc-cashier-history-list {
	height: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	grid-template-rows: none;
	gap: 8px;
	padding: 0;
	transform: none;
}
.sc-cashier-history button {
	min-height: 66px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16px;
	grid-template-rows: auto auto;
	place-items: normal;
	align-content: center;
	column-gap: 8px;
	row-gap: 2px;
	padding: 10px 12px;
	border: 1px solid #ddcdb6;
	border-radius: 10px;
	background: #fffaf0;
	color: #2d3445;
	text-align: left;
}
.sc-cashier-history button:hover { background: #fff3d8; }
.sc-cashier-history button span { min-width: 0; overflow: hidden; grid-column: 1; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.sc-cashier-history button strong { min-width: 0; grid-column: 1; font-size: clamp(.72rem, .85vw, .84rem); line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }
.sc-cashier-history button i { display: inline-block; grid-column: 2; grid-row: 1 / 3; align-self: center; color: #a06a31; }
.sc-cashier-history-empty {
	height: auto;
	min-height: 84px;
	padding: 8px 0;
	color: #75614c;
	transform: none;
}
.sc-cashier-history-empty i { font-size: 1.45rem; }
.sc-cashier-history-empty p { font-size: .76rem; }
.sc-cashier-history > footer { display: flex; margin-top: 12px; padding-top: 10px; }

@media (max-width: 1180px) {
	.sc-cashier-receipt:not(.is-blank) > div,
	.sc-cashier-receipt:not(.is-blank) > footer { display: none; }
}

@media (max-width: 760px) {
	.sc-cashier-scene {
		display: block;
		aspect-ratio: 2 / 3;
		padding: 0;
		overflow: hidden;
		border: 1px solid #8c5a2e;
		background: #3b2112 url('/assets/game/sankhya-cafe/props/pali-calculator-mobile-v2.webp?v=20260807.1') center/cover no-repeat;
		box-shadow: 0 24px 42px -28px rgba(42, 20, 6, .86);
	}
	.sc-cashier-scene::before { display: none; }
	.sc-cashier-machine {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
	.sc-cashier-paper-slot { left: 24.5%; top: 8.6%; width: 51.1%; height: 28.8%; }
	.sc-cashier-display { left: 23.1%; top: 41.9%; width: 53.7%; height: 7.8%; padding-inline: 8%; }
	.sc-cashier-display strong { font-size: clamp(1.8rem, 10vw, 2.65rem); }
	.sc-cashier-display strong.is-long-number { font-size: clamp(.95rem, 4.8vw, 1.35rem); }
	.sc-cashier-display small { font-size: clamp(.54rem, 2.5vw, .7rem); }
	.sc-cashier-keypad { left: 20.1%; top: 51.8%; width: 39.2%; height: 28.7%; grid-template-rows: 22% 24% 24% 30%; column-gap: 5%; row-gap: 0; }
	.sc-cashier-keypad button { font-size: clamp(1.25rem, 7vw, 1.9rem); }
	.sc-cashier-keypad button:not(.is-backspace):not(.is-clear) { position: relative; top: -5px; }
	.sc-cashier-keypad .is-backspace,
	.sc-cashier-keypad .is-clear { font-size: clamp(.5rem, 2.5vw, .68rem); }
	.sc-cashier-keypad .is-backspace i,
	.sc-cashier-keypad .is-clear i { font-size: clamp(.72rem, 3.4vw, .95rem); }
	.sc-cashier-print { left: 62.5%; top: 55.5%; width: 17%; height: 24.7%; font-size: clamp(.62rem, 3.2vw, .86rem); }
	.sc-cashier-print i { font-size: clamp(1.15rem, 6vw, 1.65rem); }
	.sc-cashier-receipt { justify-content: center; padding: 12px 14px 16px; }
	.sc-cashier-receipt > header,
	.sc-cashier-receipt > p,
	.sc-cashier-receipt > div,
	.sc-cashier-receipt > footer { display: none; }
	.sc-cashier-receipt > strong { margin: 0; font-size: clamp(1.8rem, 9vw, 2.6rem); }
	.sc-cashier-receipt > strong.is-long-number { font-size: clamp(1.1rem, 5.7vw, 1.65rem); }
	.sc-cashier-receipt h3 { margin-top: 5px; font-size: clamp(1rem, 5vw, 1.5rem); line-height: 1.12; }
	.sc-cashier-download { width: 28px; height: 28px; top: 8px; right: 8px; border-radius: 8px; font-size: .72rem; }
	.sc-cashier-receipt.is-blank { padding-top: 0; }
	.sc-cashier-receipt.is-blank > i { font-size: 1.5rem; }
	.sc-cashier-receipt.is-blank > strong { font-size: .9rem; }
	.sc-cashier-receipt.is-blank > small { display: block; font-size: .68rem; }
	.sc-cashier-history {
		width: 100%;
		height: auto;
		position: relative;
		left: auto;
		top: auto;
		margin: 0;
		padding: 14px 0;
		overflow: visible;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}
	.sc-cashier-history { margin-top: 14px; border-top: 1px solid #d6c4a7; }
	.sc-cashier-history h3 { height: auto; justify-content: flex-start; margin-bottom: 13px; padding: 0; font-size: 1.05rem; }
	.sc-cashier-history-list { height: auto; grid-template-rows: none; gap: 7px; padding: 0; transform: none; }
	.sc-cashier-history button { min-height: 64px; grid-template-columns: minmax(0, 1fr) 16px; grid-template-rows: auto auto; place-items: normal; align-content: center; padding: 9px 10px; border: 1px solid #ddcdb6; border-radius: 9px; background: #fffdf7; }
	.sc-cashier-history button span { font-size: 1.02rem; }
	.sc-cashier-history button strong { font-size: .76rem; line-height: 1.4; white-space: normal; }
	.sc-cashier-history button i { display: inline-block; }
	.sc-cashier-history-empty { min-height: 100px; height: auto; padding: 0; }
	.sc-cashier-history-empty i { font-size: 1.7rem; }
	.sc-cashier-history-empty p { font-size: .72rem; }
	.sc-cashier .sc-cashier-subtitle { display: none; }
	.sc-cashier-history > footer { display: flex; margin-top: 12px; padding-top: 11px; }
}

@media (max-width: 380px) {
	.sc-cashier-history { width: 100%; margin-inline: 0; padding: 12px 0; }
	.sc-cashier-print { font-size: .62rem; }
}