/* Math Tables Kids - styles. Everything is scoped under .mtk-app */

.mtk-app {
	--mtk-bg: #fff8ec;
	--mtk-card: #ffffff;
	--mtk-ink: #2b2a4c;
	--mtk-soft: #6b6a8c;
	--mtk-line: #ece3d2;
	--mtk-main: #6c4cf1;
	--mtk-main-ink: #ffffff;
	--mtk-a: #ff7a59;
	--mtk-b: #2fc4a2;
	--mtk-c: #ffc531;
	--mtk-bad: #e5484d;
	--mtk-good: #1fa971;
	--mtk-shadow: 0 6px 0 rgba(43, 42, 76, .12);
	box-sizing: border-box;
	width: 100%;
	margin: 1em 0;
	padding: 14px;
	background: var(--mtk-bg);
	color: var(--mtk-ink);
	border-radius: 22px;
	font-family: "Nunito", "Baloo 2", "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.45;
	position: relative;
	overflow: hidden;
	min-height: min(80vh, 640px);
}

.mtk-app.mtk-layout-boxed {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

/* Fit the window: break out of narrow theme containers */
.mtk-app.mtk-layout-full {
	width: 100%;
	max-width: none;
}

/* Dark theme (chosen in settings, by the toggle, or auto from the device) */
.mtk-app[data-theme="dark"] {
	--mtk-bg: #17162b;
	--mtk-card: #232243;
	--mtk-ink: #f2f0ff;
	--mtk-soft: #aaa8d0;
	--mtk-line: #34335c;
	--mtk-main: #8f78ff;
	--mtk-main-ink: #14132a;
	--mtk-bad: #ff6b70;
	--mtk-good: #3dd598;
	--mtk-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}

.mtk-app *, .mtk-app *::before, .mtk-app *::after { box-sizing: border-box; }

.mtk-app button { font-family: inherit; }

/* Header */
.mtk-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.mtk-logo { font-size: 2rem; line-height: 1; }
.mtk-logo img { width: 42px; height: 42px; object-fit: contain; border-radius: 10px; display: block; }
.mtk-title {
	margin: 0;
	flex: 1 1 auto;
	font-size: clamp(1.4rem, 4vw, 2.2rem);
	font-weight: 900;
	letter-spacing: .3px;
	color: var(--mtk-main);
	line-height: 1.1;
}
.mtk-tools { display: flex; gap: 8px; }
.mtk-icon-btn {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 2px solid var(--mtk-line);
	background: var(--mtk-card);
	color: var(--mtk-ink);
	font-size: 1.2rem;
	cursor: pointer;
	box-shadow: var(--mtk-shadow);
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0;
}
.mtk-icon-btn:hover { border-color: var(--mtk-main); }

/* Navigation */
.mtk-nav {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 10px;
	scrollbar-width: thin;
}
.mtk-tab {
	flex: 1 0 auto;
	min-width: 92px;
	border: 0;
	border-radius: 16px;
	padding: 10px 14px;
	font-size: 1rem;
	font-weight: 800;
	background: var(--mtk-card);
	color: var(--mtk-ink);
	box-shadow: var(--mtk-shadow);
	cursor: pointer;
	white-space: nowrap;
	transition: transform .12s;
}
.mtk-tab:hover { transform: translateY(-2px); }
.mtk-tab.on { background: var(--mtk-main); color: var(--mtk-main-ink); }

.mtk-body { animation: mtk-pop .25s ease; }
@keyframes mtk-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mtk-h { margin: 6px 0 8px; font-size: 1.3rem; font-weight: 900; color: var(--mtk-ink); }
.mtk-sub { margin: 0 0 10px; color: var(--mtk-soft); }
.mtk-card {
	background: var(--mtk-card);
	border-radius: 18px;
	padding: 14px;
	box-shadow: var(--mtk-shadow);
	margin-bottom: 14px;
}

/* Buttons */
.mtk-btn {
	border: 0;
	border-radius: 14px;
	padding: 10px 18px;
	font-size: 1rem;
	font-weight: 800;
	cursor: pointer;
	background: var(--mtk-main);
	color: var(--mtk-main-ink);
	box-shadow: var(--mtk-shadow);
	transition: transform .1s;
}
.mtk-btn:hover { transform: translateY(-2px); }
.mtk-btn:active { transform: translateY(2px); box-shadow: none; }
.mtk-btn.ghost { background: var(--mtk-card); color: var(--mtk-ink); border: 2px solid var(--mtk-line); box-shadow: none; }
.mtk-btn.alt { background: var(--mtk-b); color: #06382d; }
.mtk-btn.warm { background: var(--mtk-a); color: #3a1204; }
.mtk-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.mtk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }

/* Table chips */
.mtk-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.mtk-chip {
	min-width: 46px;
	height: 46px;
	border-radius: 14px;
	border: 2px solid var(--mtk-line);
	background: var(--mtk-card);
	color: var(--mtk-ink);
	font-size: 1.1rem;
	font-weight: 900;
	cursor: pointer;
	padding: 0 10px;
}
.mtk-chip:hover { border-color: var(--mtk-main); }
.mtk-chip.on { background: var(--mtk-main); color: var(--mtk-main-ink); border-color: var(--mtk-main); }
.mtk-chip.mtk-all, .mtk-chip.mtk-none { font-size: .9rem; }

/* Table rows */
.mtk-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mtk-row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	border: 0; border-radius: 16px;
	padding: 12px 14px;
	font-size: 1.25rem; font-weight: 900;
	color: var(--mtk-ink);
	background: var(--mtk-card);
	box-shadow: var(--mtk-shadow);
	cursor: pointer;
	text-align: left;
}
.mtk-row:nth-child(4n+1) { border-left: 8px solid var(--mtk-a); }
.mtk-row:nth-child(4n+2) { border-left: 8px solid var(--mtk-b); }
.mtk-row:nth-child(4n+3) { border-left: 8px solid var(--mtk-c); }
.mtk-row:nth-child(4n+4) { border-left: 8px solid var(--mtk-main); }
.mtk-row .ans { color: var(--mtk-main); min-width: 2.2em; text-align: right; }
.mtk-row.now { outline: 4px solid var(--mtk-c); }
.mtk-skip { font-weight: 800; color: var(--mtk-soft); word-break: break-word; }

/* Chart */
.mtk-chartwrap { overflow: auto; max-height: 420px; border-radius: 14px; }
.mtk-chart { border-collapse: collapse; width: 100%; font-size: .95rem; text-align: center; }
.mtk-chart th, .mtk-chart td { padding: 6px 8px; border: 1px solid var(--mtk-line); }
.mtk-chart th { background: var(--mtk-main); color: var(--mtk-main-ink); position: sticky; top: 0; }
.mtk-chart td.h { background: rgba(108, 76, 241, .14); font-weight: 800; cursor: pointer; }
.mtk-chart td.t { background: var(--mtk-main); color: var(--mtk-main-ink); font-weight: 900; cursor: pointer; position: sticky; left: 0; }

/* Songs */
.mtk-song-opts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.mtk-app select, .mtk-app input[type="text"], .mtk-app input[type="number"] {
	font: inherit;
	border: 2px solid var(--mtk-line);
	border-radius: 12px;
	padding: 8px 12px;
	background: var(--mtk-card);
	color: var(--mtk-ink);
	max-width: 100%;
}
.mtk-lyrics { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.mtk-lyrics li {
	padding: 10px 14px; border-radius: 14px;
	background: var(--mtk-card);
	font-weight: 800; font-size: 1.1rem;
	transition: transform .15s, background .15s;
}
.mtk-lyrics li.now { background: var(--mtk-c); color: #3a2a00; transform: scale(1.03); }
.mtk-note { font-size: .95rem; color: var(--mtk-soft); }

/* Tips */
.mtk-tips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.mtk-tip {
	background: var(--mtk-card);
	border-radius: 18px;
	padding: 14px;
	box-shadow: var(--mtk-shadow);
}
.mtk-tip h4 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 900; }
.mtk-tip p { margin: 0 0 6px; }
.mtk-ex {
	display: inline-block;
	background: rgba(47, 196, 162, .18);
	border-radius: 10px;
	padding: 4px 10px;
	font-weight: 800;
}
.mtk-finger-row { display: flex; gap: 6px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.mtk-finger {
	width: 46px; height: 92px;
	border-radius: 24px 24px 12px 12px;
	border: 3px solid var(--mtk-line);
	background: #ffd9b8;
	color: #4a2a10;
	font-weight: 900; font-size: 1.1rem;
	cursor: pointer;
	display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.mtk-finger.fold { height: 52px; background: #ff7a59; color: #fff; align-self: flex-end; }
.mtk-finger-out { text-align: center; font-weight: 900; font-size: 1.2rem; min-height: 2.6em; }
.mtk-finder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mtk-hintbox {
	margin-top: 10px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(255, 197, 49, .25);
	font-weight: 800;
}

/* Game cards */
.mtk-games { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mtk-game {
	text-align: left;
	background: var(--mtk-card);
	color: var(--mtk-ink);
	border: 0;
	border-radius: 20px;
	padding: 16px;
	box-shadow: var(--mtk-shadow);
	cursor: pointer;
	transition: transform .12s;
}
.mtk-game:hover { transform: translateY(-3px) rotate(-.4deg); }
.mtk-game .em { font-size: 2.3rem; display: block; }
.mtk-game b { display: block; font-size: 1.2rem; margin: 4px 0; }
.mtk-game span.d { color: var(--mtk-soft); font-size: .95rem; }

/* Quiz */
.mtk-hud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mtk-pill { background: var(--mtk-card); border-radius: 999px; padding: 6px 14px; font-weight: 900; box-shadow: var(--mtk-shadow); }
.mtk-bar { height: 12px; background: var(--mtk-line); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.mtk-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mtk-b), var(--mtk-c)); transition: width .4s linear; }
.mtk-q { text-align: center; font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 900; padding: 14px 6px; }
.mtk-blank { color: var(--mtk-a); }
.mtk-ans { text-align: center; }
.mtk-ans form { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mtk-ans input[type="text"] { font-size: 1.8rem; width: 170px; text-align: center; font-weight: 900; }
.mtk-fb { text-align: center; min-height: 2em; font-size: 1.3rem; font-weight: 900; }
.mtk-fb.good { color: var(--mtk-good); }
.mtk-fb.bad { color: var(--mtk-bad); }
.mtk-hint { text-align: center; min-height: 1em; }

/* Bubbles */
.mtk-bubbles { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; padding: 6px 0 14px; }
.mtk-bubble {
	width: 104px; height: 104px;
	border-radius: 50%;
	border: 0;
	font-size: 1.9rem; font-weight: 900;
	color: #1b1a33;
	background: radial-gradient(circle at 30% 28%, #fff 0 9%, rgba(255,255,255,.2) 10%), var(--bc, #7fd8ff);
	box-shadow: inset -6px -8px 14px rgba(0,0,0,.12), 0 6px 0 rgba(43,42,76,.12);
	cursor: pointer;
	animation: mtk-float 3s ease-in-out infinite;
}
.mtk-bubble:nth-child(2n) { animation-delay: -1s; }
.mtk-bubble:nth-child(3n) { animation-delay: -2s; }
@keyframes mtk-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.mtk-bubble.pop { animation: mtk-pop-b .25s forwards; }
.mtk-bubble.no { animation: mtk-shake .3s; }
@keyframes mtk-pop-b { to { transform: scale(1.6); opacity: 0; } }
@keyframes mtk-shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Memory */
.mtk-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; margin: 0 auto; }
.mtk-card-m {
	aspect-ratio: 1 / 1;
	border: 0; border-radius: 16px;
	font-size: clamp(1rem, 4.4vw, 1.6rem); font-weight: 900;
	background: var(--mtk-main); color: var(--mtk-main-ink);
	cursor: pointer;
	box-shadow: var(--mtk-shadow);
	padding: 0;
}
.mtk-card-m.up { background: var(--mtk-card); color: var(--mtk-ink); border: 3px solid var(--mtk-c); }
.mtk-card-m.done { background: var(--mtk-b); color: #06382d; cursor: default; }

/* Results */
.mtk-result { text-align: center; padding: 8px; }
.mtk-result .big { font-size: 3.4rem; margin: 0; }
.mtk-stars { font-size: 2.4rem; letter-spacing: 4px; }
.mtk-list { text-align: left; max-width: 420px; margin: 8px auto; padding-left: 20px; }
.mtk-table { width: 100%; border-collapse: collapse; }
.mtk-table th, .mtk-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--mtk-line); }
.mtk-table th { color: var(--mtk-soft); font-size: .9rem; }
.mtk-winner {
	text-align: center;
	background: linear-gradient(135deg, #ffe08a, #ffb347);
	color: #3a2200;
	border-radius: 20px;
	padding: 16px;
	font-weight: 900;
	margin-bottom: 14px;
}
.mtk-winner .crown { font-size: 3rem; }
.mtk-cert { border: 4px dashed var(--mtk-c); border-radius: 18px; padding: 12px; margin: 10px 0; }

.mtk-field { margin: 10px 0; }
.mtk-field label { font-weight: 800; display: block; margin-bottom: 4px; }
.mtk-players { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.mtk-foot { margin-top: 10px; text-align: center; font-size: .85rem; color: var(--mtk-soft); }
.mtk-foot a { color: var(--mtk-main); font-weight: 800; }

/* Confetti */
.mtk-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.mtk-confetti span { position: absolute; top: -40px; font-size: 1.8rem; animation: mtk-fall linear forwards; }
@keyframes mtk-fall { to { transform: translateY(115vh) rotate(540deg); } }

@media (max-width: 560px) {
	.mtk-app { padding: 10px; border-radius: 16px; font-size: 16px; }
	.mtk-tab { min-width: 78px; padding: 9px 10px; }
	.mtk-mem { grid-template-columns: repeat(3, 1fr); }
	.mtk-bubble { width: 88px; height: 88px; font-size: 1.6rem; }
	.mtk-finger { width: 30px; height: 76px; }
	.mtk-finger.fold { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.mtk-app * { animation: none !important; transition: none !important; }
}