/* =========================================================================
   Typing Master Pro — design system
   Visual direction: a calm "mechanical keyboard / typewriter" identity.
   Monospace type carries the drill text and headings (it's literally what
   the user is typing — character alignment matters functionally, not just
   aesthetically). Keys render as real skeuomorphic keycaps with a bevel and
   a "press" animation, color-coded by finger. Certificates switch to a
   ceremonial serif to contrast with the utilitarian rest of the app.
   ========================================================================= */

#ttm-app, .ttm-app {
	--ttm-ink:        #1E2530;
	--ttm-ink-soft:   #3C4654;
	--ttm-paper:      #EFEBE2;
	--ttm-paper-deep: #E2DCCC;
	--ttm-surface:    #FFFFFF;
	--ttm-amber:      #E0972D;
	--ttm-amber-dark: #B5751B;
	--ttm-correct:    #5F8B6E;
	--ttm-error:      #C75C4A;
	--ttm-bronze:     #A86B3C;
	--ttm-silver:     #8E97A3;
	--ttm-gold:       #C99A2E;

	--ttm-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ttm-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--ttm-font-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;

	--ttm-radius: 8px;
	--ttm-radius-sm: 4px;
	--ttm-shadow-key: 0 3px 0 rgba(30,37,48,0.25), 0 4px 6px rgba(30,37,48,0.12);
	--ttm-shadow-key-active: 0 1px 0 rgba(30,37,48,0.25), 0 2px 3px rgba(30,37,48,0.12);

	font-family: var(--ttm-font-sans);
	color: var(--ttm-ink);
	background: var(--ttm-paper);
	border-radius: var(--ttm-radius);
	padding: 24px;
	box-sizing: border-box;
	max-width: 980px;
	margin: 0 auto;
	line-height: 1.5;
}

#ttm-app *, .ttm-app * { box-sizing: border-box; }

#ttm-app h2, #ttm-app h3, #ttm-app h4,
.ttm-app h2, .ttm-app h3, .ttm-app h4 {
	font-family: var(--ttm-font-mono);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--ttm-ink);
}
#ttm-app h3 { font-size: 1.3rem; }
#ttm-app h4 { font-size: 1.05rem; }
#ttm-app p { margin: 0 0 12px; }
.ttm-muted { color: var(--ttm-ink-soft); font-size: 0.9rem; }

.ttm-loading { font-family: var(--ttm-font-mono); padding: 40px; text-align: center; color: var(--ttm-ink-soft); }
.ttm-noscript { padding: 16px; background: #fdecea; border-radius: var(--ttm-radius-sm); }
.ttm-storage-warning { background: #FDF3DC; border: 1px solid var(--ttm-amber); border-radius: var(--ttm-radius-sm); padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px; }

/* ---------------- Tab bar ---------------- */

.ttm-tabbar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--ttm-paper-deep);
	padding-bottom: 0;
}
.ttm-tab-btn {
	font-family: var(--ttm-font-mono);
	font-size: 0.85rem;
	font-weight: 600;
	background: transparent;
	border: none;
	padding: 10px 16px;
	cursor: pointer;
	color: var(--ttm-ink-soft);
	border-bottom: 3px solid transparent;
	transform: translateY(2px);
	transition: color 0.15s ease, border-color 0.15s ease;
}
.ttm-tab-btn:hover { color: var(--ttm-ink); }
.ttm-tab-btn.ttm-tab-active { color: var(--ttm-ink); border-bottom-color: var(--ttm-amber); }
.ttm-tab-btn:focus-visible { outline: 2px solid var(--ttm-amber-dark); outline-offset: 2px; }

.ttm-tab-content { min-height: 320px; }

/* ---------------- Buttons (keycap styling) ---------------- */

.ttm-btn {
	font-family: var(--ttm-font-sans);
	font-weight: 600;
	font-size: 0.9rem;
	background: var(--ttm-surface);
	color: var(--ttm-ink);
	border: 1px solid var(--ttm-paper-deep);
	border-radius: var(--ttm-radius-sm);
	padding: 10px 18px;
	cursor: pointer;
	box-shadow: var(--ttm-shadow-key);
	transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ttm-btn:hover { transform: translateY(1px); box-shadow: var(--ttm-shadow-key-active); }
.ttm-btn:active { transform: translateY(2px); box-shadow: none; }
.ttm-btn:focus-visible { outline: 2px solid var(--ttm-amber-dark); outline-offset: 2px; }
.ttm-btn-primary { background: var(--ttm-amber); border-color: var(--ttm-amber-dark); color: #fff; }
.ttm-btn-primary:hover { background: var(--ttm-amber-dark); }

/* ---------------- Lessons layout ---------------- */

.ttm-lessons-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
.ttm-lesson-sidebar h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ttm-ink-soft); }
.ttm-lesson-list { list-style: none; margin: 0 0 16px; padding: 0; }
.ttm-lesson-item {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 10px; border-radius: var(--ttm-radius-sm);
	font-size: 0.88rem; cursor: pointer; color: var(--ttm-ink-soft);
}
.ttm-lesson-item:hover:not(.ttm-locked) { background: var(--ttm-paper-deep); }
.ttm-lesson-item.ttm-active { background: var(--ttm-surface); color: var(--ttm-ink); font-weight: 600; box-shadow: 0 1px 0 rgba(30,37,48,0.08); }
.ttm-lesson-item.ttm-completed .ttm-lesson-icon { color: var(--ttm-correct); }
.ttm-lesson-item.ttm-locked { opacity: 0.5; cursor: not-allowed; }
.ttm-lesson-icon { width: 16px; text-align: center; }
.ttm-smart-practice-btn { width: 100%; font-size: 0.82rem; padding: 8px 10px; }

.ttm-lesson-main { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }
.ttm-lesson-intro p { color: var(--ttm-ink-soft); }
.ttm-drill-progress { font-size: 0.8rem; font-family: var(--ttm-font-mono); color: var(--ttm-amber-dark); }

/* ---------------- Stats row ---------------- */

.ttm-drill-stats { display: flex; gap: 24px; margin: 14px 0; }
.ttm-stat { display: flex; flex-direction: column; align-items: flex-start; }
.ttm-stat-value { font-family: var(--ttm-font-mono); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.ttm-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ttm-ink-soft); margin-top: 2px; }

/* ---------------- Drill text ---------------- */

.ttm-drill-text {
	font-family: var(--ttm-font-mono);
	font-size: 1.25rem;
	line-height: 1.9;
	letter-spacing: 0.01em;
	background: var(--ttm-paper);
	border-radius: var(--ttm-radius-sm);
	padding: 18px 20px;
	margin: 10px 0 18px;
	outline: none;
	word-break: break-word;
}
.ttm-drill-text:focus-visible { box-shadow: 0 0 0 2px var(--ttm-amber-dark); }
.ttm-char { color: var(--ttm-ink-soft); }
.ttm-char-correct { color: var(--ttm-correct); }
.ttm-char-incorrect { color: var(--ttm-error); background: rgba(199,92,74,0.12); border-radius: 2px; }
.ttm-char-current { background: var(--ttm-amber); color: #fff; border-radius: 2px; animation: ttm-blink 1s step-end infinite; }
@keyframes ttm-blink { 50% { background: var(--ttm-amber-dark); } }

/* ---------------- Result cards ---------------- */

.ttm-result-card { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 24px; text-align: center; }
.ttm-result-card.ttm-pass { border: 1px solid var(--ttm-correct); }
.ttm-result-card.ttm-retry { border: 1px solid var(--ttm-amber); }
.ttm-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0; }
.ttm-result-big { font-family: var(--ttm-font-mono); font-size: 2rem; font-weight: 700; display: block; }
.ttm-new-best { color: var(--ttm-amber-dark); font-weight: 700; }

/* ---------------- Virtual keyboard ---------------- */

.ttm-keyboard { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 8px; }
.ttm-kb-row { display: flex; gap: 6px; }
.ttm-key {
	font-family: var(--ttm-font-mono);
	font-size: 0.78rem;
	background: var(--ttm-surface);
	border-radius: 5px;
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	box-shadow: var(--ttm-shadow-key);
	text-transform: lowercase;
	color: var(--ttm-ink-soft);
	transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.15s ease;
}
.ttm-key-wide { width: 64px; }
.ttm-key-superwide { width: 320px; max-width: 60vw; }
.ttm-key-active {
	background: var(--ttm-amber);
	color: #fff;
	transform: translateY(2px);
	box-shadow: var(--ttm-shadow-key-active);
}
.ttm-key-error { background: var(--ttm-error) !important; color: #fff; transform: translateY(2px) translateX(-1px); }

/* Finger color zones - a subtle bottom border so the keyboard still reads
   as neutral until a key is actively highlighted. */
.ttm-finger-lp    { border-bottom: 3px solid #C97064; }
.ttm-finger-lr    { border-bottom: 3px solid #D69A52; }
.ttm-finger-lm    { border-bottom: 3px solid #C9B144; }
.ttm-finger-li    { border-bottom: 3px solid #7FA866; }
.ttm-finger-thumb { border-bottom: 3px solid #8C8C8C; }
.ttm-finger-ri    { border-bottom: 3px solid #5FA38E; }
.ttm-finger-rm    { border-bottom: 3px solid #5B8FB0; }
.ttm-finger-rr    { border-bottom: 3px solid #7B7FC4; }
.ttm-finger-rp    { border-bottom: 3px solid #A87FC4; }

.ttm-finger-legend { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ttm-legend-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ttm-legend-dot.ttm-finger-lp { background: #C97064; }
.ttm-legend-dot.ttm-finger-lr { background: #D69A52; }
.ttm-legend-dot.ttm-finger-lm { background: #C9B144; }
.ttm-legend-dot.ttm-finger-li { background: #7FA866; }
.ttm-legend-dot.ttm-finger-thumb { background: #8C8C8C; }
.ttm-legend-dot.ttm-finger-ri { background: #5FA38E; }
.ttm-legend-dot.ttm-finger-rm { background: #5B8FB0; }
.ttm-legend-dot.ttm-finger-rr { background: #7B7FC4; }
.ttm-legend-dot.ttm-finger-rp { background: #A87FC4; }

/* ---------------- Speed test ---------------- */

.ttm-test-setup, .ttm-test-run { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 24px; }
.ttm-duration-picker { display: flex; gap: 10px; margin: 14px 0; }
.ttm-best-score { font-family: var(--ttm-font-mono); }
.ttm-score-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.88rem; }
.ttm-score-table th, .ttm-score-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ttm-paper-deep); }
.ttm-scoreboard { margin-top: 18px; }

/* ---------------- Games ---------------- */

.ttm-games-menu { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 24px; }
.ttm-game-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.ttm-game-card { background: var(--ttm-paper); border-radius: var(--ttm-radius); padding: 18px; text-align: center; }
.ttm-game-card p { color: var(--ttm-ink-soft); font-size: 0.88rem; }

.ttm-game-falling, .ttm-game-zap { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }
.ttm-game-hud { display: flex; justify-content: space-between; font-family: var(--ttm-font-mono); margin-bottom: 10px; font-size: 0.9rem; }
.ttm-game-field { position: relative; height: 320px; background: var(--ttm-paper); border-radius: var(--ttm-radius-sm); overflow: hidden; margin-bottom: 12px; }
.ttm-falling-word {
	position: absolute; top: -30px;
	font-family: var(--ttm-font-mono);
	background: var(--ttm-surface);
	padding: 4px 10px;
	border-radius: var(--ttm-radius-sm);
	box-shadow: var(--ttm-shadow-key);
	animation-name: ttm-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.ttm-falling-word.ttm-word-cleared { background: var(--ttm-correct); color: #fff; animation-play-state: paused; opacity: 0; transition: opacity 0.15s ease; }
@keyframes ttm-fall { from { top: -30px; } to { top: 290px; } }
.ttm-game-input { width: 100%; font-family: var(--ttm-font-mono); font-size: 1.1rem; padding: 10px 14px; border-radius: var(--ttm-radius-sm); border: 1px solid var(--ttm-paper-deep); }

.ttm-zap-target {
	font-family: var(--ttm-font-mono);
	font-size: 4rem; font-weight: 700;
	text-align: center;
	background: var(--ttm-paper);
	border-radius: var(--ttm-radius);
	padding: 40px;
	margin-bottom: 12px;
	transition: background 0.15s ease;
}
.ttm-zap-target.ttm-zap-hit { background: rgba(95,139,110,0.25); }
.ttm-zap-target.ttm-zap-miss { background: rgba(199,92,74,0.25); }

/* ---------------- Dashboard / tiers ---------------- */

.ttm-dashboard { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 24px; }
.ttm-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 14px 0 22px; }
.ttm-dash-stat { background: var(--ttm-paper); border-radius: var(--ttm-radius-sm); padding: 16px; text-align: center; }
.ttm-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 22px; }
.ttm-tier-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: var(--ttm-radius-sm); background: var(--ttm-paper); font-size: 0.82rem; color: var(--ttm-ink-soft); }
.ttm-tier-card.ttm-unlocked { background: #fff; color: var(--ttm-ink); box-shadow: var(--ttm-shadow-key); }
.ttm-tier-badge { font-size: 1.6rem; }
.ttm-tier-card.ttm-tier-bronze.ttm-unlocked strong { color: var(--ttm-bronze); }
.ttm-tier-card.ttm-tier-silver.ttm-unlocked strong { color: var(--ttm-silver); }
.ttm-tier-card.ttm-tier-gold.ttm-unlocked strong { color: var(--ttm-gold); }

.ttm-cert-form { background: var(--ttm-paper); border-radius: var(--ttm-radius-sm); padding: 18px; }
.ttm-cert-name-input { font-family: var(--ttm-font-sans); font-size: 0.95rem; padding: 8px 10px; border-radius: var(--ttm-radius-sm); border: 1px solid var(--ttm-paper-deep); width: 260px; max-width: 100%; margin: 6px 0 14px; }

/* ---------------- Certificate ---------------- */

.ttm-certificate {
	margin-top: 24px;
	border: 3px double var(--ttm-ink-soft);
	border-radius: var(--ttm-radius);
	padding: 4px;
	background: var(--ttm-surface);
}
.ttm-cert-inner {
	border: 1px solid var(--ttm-paper-deep);
	border-radius: calc(var(--ttm-radius) - 4px);
	padding: 48px 32px;
	text-align: center;
	font-family: var(--ttm-font-serif);
}
.ttm-cert-eyebrow { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ttm-ink-soft); margin-bottom: 18px; }
.ttm-cert-name { font-size: 2.1rem; margin-bottom: 14px; border-bottom: 1px solid var(--ttm-paper-deep); display: inline-block; padding-bottom: 8px; }
.ttm-cert-body { color: var(--ttm-ink-soft); margin-bottom: 4px; }
.ttm-cert-wpm { font-size: 2.6rem; font-weight: 700; margin: 6px 0; }
.ttm-cert-date { margin-top: 18px; font-size: 0.85rem; color: var(--ttm-ink-soft); }
.ttm-cert-footer { margin-top: 28px; font-family: var(--ttm-font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ttm-ink-soft); }

.ttm-cert-bronze .ttm-cert-wpm, .ttm-cert-bronze .ttm-cert-name { color: var(--ttm-bronze); }
.ttm-cert-silver .ttm-cert-wpm, .ttm-cert-silver .ttm-cert-name { color: var(--ttm-silver); }
.ttm-cert-gold   .ttm-cert-wpm, .ttm-cert-gold   .ttm-cert-name { color: var(--ttm-gold); }
.ttm-cert-bronze { border-color: var(--ttm-bronze); }
.ttm-cert-silver { border-color: var(--ttm-silver); }
.ttm-cert-gold   { border-color: var(--ttm-gold); }

.ttm-print-cert-btn { margin-top: 16px; }

/* Print only the certificate, nothing else on the page. */
@media print {
	body.ttm-printing-cert > *:not(#ttm-app) { display: none !important; }
	body.ttm-printing-cert #ttm-app * { visibility: hidden; }
	body.ttm-printing-cert .ttm-certificate,
	body.ttm-printing-cert .ttm-certificate * { visibility: visible; }
	body.ttm-printing-cert .ttm-certificate { position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
	body.ttm-printing-cert .ttm-print-cert-btn { display: none !important; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 720px) {
	.ttm-lessons-layout { grid-template-columns: 1fr; }
	.ttm-result-grid, .ttm-dashboard-grid, .ttm-tier-grid { grid-template-columns: repeat(2, 1fr); }
	.ttm-game-cards { grid-template-columns: repeat(2, 1fr); }
	.ttm-key { width: 26px; height: 30px; font-size: 0.65rem; }
	.ttm-key-wide { width: 44px; }
	.ttm-key-superwide { width: 50vw; }
	.ttm-drill-text { font-size: 1.05rem; }
	.ttm-duration-picker { flex-wrap: wrap; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.ttm-char-current { animation: none; background: var(--ttm-amber); }
	.ttm-falling-word { animation-duration: 0.01ms !important; }
	#ttm-app *, .ttm-app * { transition: none !important; }
}

/* =========================================================
   New game styles — added with 5-game update
   ========================================================= */

/* Shared hint line shown under each new game field */
.ttm-game-hint {
	text-align: center;
	font-size: 0.78rem;
	color: var(--ttm-ink-soft);
	margin: 6px 0 0;
}

/* ---- Speed Racer ---- */
.ttm-game-racer { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }

.ttm-speed-hud { display: flex; align-items: center; gap: 8px; }
.ttm-speed-bar-wrap {
	display: inline-block;
	width: 120px; height: 10px;
	background: var(--ttm-paper-deep);
	border-radius: 999px;
	overflow: hidden;
	vertical-align: middle;
}
.ttm-speed-bar {
	height: 100%; width: 0;
	background: var(--ttm-correct);
	border-radius: 999px;
	transition: background 0.3s ease;
}

.ttm-racer-road {
	height: 88px;
	background:
		#4a4a4a
		repeating-linear-gradient(
			90deg,
			rgba(255,255,255,0.75) 0,
			rgba(255,255,255,0.75) 28px,
			transparent 28px,
			transparent 100px
		);
	background-size: 100px 4px, 100px 4px;
	background-repeat: repeat-x;
	background-position-y: center, center;
	border-radius: var(--ttm-radius-sm);
	position: relative;
	margin: 12px 0;
	display: flex;
	align-items: center;
	overflow: hidden;
}
/* Road shoulder stripes */
.ttm-racer-road::before,
.ttm-racer-road::after {
	content: '';
	position: absolute; left: 0; right: 0; height: 10px;
	background: repeating-linear-gradient(90deg, #e8c840 0, #e8c840 30px, #333 30px, #333 60px);
}
.ttm-racer-road::before { top: 0; }
.ttm-racer-road::after  { bottom: 0; }

.ttm-racer-car {
	font-size: 2rem;
	position: absolute;
	left: 60px;
	z-index: 2;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
	transition: transform 0.05s ease-out;
}
.ttm-racer-scenery {
	position: absolute; inset: 0;
	pointer-events: none;
}

.ttm-racer-display {
	background: var(--ttm-paper);
	border-radius: var(--ttm-radius-sm);
	padding: 12px 18px;
	font-family: var(--ttm-font-mono);
	font-size: 1.4rem;
	min-height: 50px;
	letter-spacing: 0.03em;
}

/* ---- Defuse the Bomb ---- */
.ttm-game-bomb { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }

.ttm-bomb-arena {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 0 14px;
	gap: 14px;
}
.ttm-bomb { display: inline-flex; flex-direction: column; align-items: center; }

.ttm-bomb-fuse {
	width: 5px; height: 32px;
	background: linear-gradient(to bottom, #c8a060, #5a3a10);
	border-radius: 3px 3px 0 0;
	position: relative;
}
.ttm-bomb-spark {
	width: 10px; height: 10px;
	background: radial-gradient(circle, #fff 0%, #ffe040 40%, #ff7700 80%, transparent 100%);
	border-radius: 50%;
	position: absolute;
	top: -5px; left: -2.5px;
	animation: ttm-spark 0.25s ease-in-out infinite alternate;
}
@keyframes ttm-spark {
	from { opacity: 1; transform: scale(1) rotate(0deg); }
	to   { opacity: 0.55; transform: scale(1.5) rotate(15deg); }
}

.ttm-bomb-body {
	width: 128px; height: 128px;
	background: radial-gradient(circle at 36% 32%, #606060, #111 80%);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.45), inset 0 -4px 8px rgba(255,255,255,0.05);
}
.ttm-bomb-word {
	font-family: var(--ttm-font-mono);
	font-size: 1rem;
	font-weight: 700;
	color: #f0f0f0;
	text-align: center;
	padding: 0 12px;
	word-break: break-all;
	line-height: 1.3;
}

.ttm-bomb-timer-wrap {
	width: 170px; height: 10px;
	background: var(--ttm-paper-deep);
	border-radius: 999px;
	overflow: hidden;
}
.ttm-bomb-timer-bar {
	height: 100%; width: 100%;
	background: var(--ttm-correct);
	border-radius: 999px;
	transition: background 0.25s ease;
}

.ttm-bomb-critical { animation: ttm-shake 0.12s ease-in-out infinite; }
@keyframes ttm-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.ttm-bomb-defused .ttm-bomb-body {
	background: radial-gradient(circle at 36% 32%, #7aaa6a, #3a6a28 80%);
	transition: background 0.3s ease;
}
.ttm-bomb-defused .ttm-bomb-spark { display: none; }

.ttm-bomb-explode .ttm-bomb-body {
	animation: ttm-explode 0.65s ease-out forwards;
}
@keyframes ttm-explode {
	0%   { transform: scale(1);    background: radial-gradient(circle, #ff8800, #111);  opacity: 1; }
	25%  { transform: scale(1.4);  background: radial-gradient(circle, #fff,    #ff6600); }
	55%  { transform: scale(2.1);  background: radial-gradient(circle, #ffe000, #ff3300); }
	100% { transform: scale(2.8);  opacity: 0; }
}

/* ---- Zombie Defense ---- */
.ttm-game-zombie { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }

.ttm-zombie-field {
	position: relative;
	height: 260px;
	background: linear-gradient(to bottom, #7dcf5a 0%, #5aad3a 65%, #4a9030 100%);
	border-radius: var(--ttm-radius-sm);
	overflow: hidden;
	margin: 12px 0;
}
/* Ground strip */
.ttm-zombie-field::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 24px;
	background: #6b4c2a;
}

.ttm-zombie {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	animation: ttm-march linear forwards;
}
@keyframes ttm-march {
	from { left: 105%; }
	to   { left: -90px; }
}

.ttm-zombie-icon { font-size: 2rem; line-height: 1; }
.ttm-zombie-word {
	font-family: var(--ttm-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(20, 30, 20, 0.82);
	color: #c8ffa0;
	padding: 2px 7px;
	border-radius: 3px;
	white-space: nowrap;
	border: 1px solid rgba(120,200,80,0.3);
}
.ttm-zombie-dead {
	opacity: 0;
	transform: scale(1.4) rotate(20deg);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

/* ---- Bubble Pop ---- */
.ttm-game-bubble { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }

.ttm-bubble-field {
	position: relative;
	height: 260px;
	background: linear-gradient(to bottom, #0a2a50 0%, #1a5a9a 55%, #3a90d8 100%);
	border-radius: var(--ttm-radius-sm);
	overflow: hidden;
	margin: 12px 0;
}
/* Caustic light ripples on the water floor */
.ttm-bubble-field::after {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 28px;
	background: repeating-linear-gradient(90deg,
		rgba(255,255,255,0.08) 0, rgba(255,255,255,0.08) 8px,
		transparent 8px, transparent 22px);
}

.ttm-bubble {
	position: absolute;
	bottom: -80px;
	width: 76px; height: 76px;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 32% 28%,
		rgba(255,255,255,0.65) 0%,
		rgba(160,210,255,0.22) 55%,
		rgba(80,150,220,0.10) 100%);
	border: 1.5px solid rgba(255,255,255,0.55);
	border-radius: 50%;
	font-family: var(--ttm-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-align: center;
	padding: 6px;
	word-break: break-all;
	animation: ttm-rise linear forwards;
	box-shadow:
		inset -3px -3px 8px rgba(255,255,255,0.25),
		0 2px 8px rgba(0,60,120,0.3);
}
@keyframes ttm-rise {
	from { bottom: -80px; }
	to   { bottom: 112%; }
}
.ttm-bubble-pop {
	transform: scale(1.8);
	opacity: 0;
	animation-play-state: paused;
	transition: transform 0.24s ease-out, opacity 0.24s ease-out;
}

/* ---- Asteroid Blast ---- */
.ttm-game-asteroid { background: var(--ttm-surface); border-radius: var(--ttm-radius); padding: 20px; }

.ttm-asteroid-field {
	position: relative;
	height: 270px;
	background: radial-gradient(ellipse at center, #18203a 0%, #04060f 100%);
	border-radius: var(--ttm-radius-sm);
	overflow: hidden;
	margin: 12px 0;
}
/* Static starfield via tiny radial dots */
.ttm-asteroid-field::before {
	content: '';
	position: absolute; inset: 0;
	background-image:
		radial-gradient(1.2px 1.2px at  8% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
		radial-gradient(1px   1px   at 22% 72%, rgba(255,255,255,0.60) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 38%  9%, rgba(255,255,255,0.90) 0%, transparent 100%),
		radial-gradient(1px   1px   at 51% 53%, rgba(255,255,255,0.70) 0%, transparent 100%),
		radial-gradient(1.2px 1.2px at 65% 34%, rgba(255,255,255,0.80) 0%, transparent 100%),
		radial-gradient(1px   1px   at 78% 81%, rgba(255,255,255,0.55) 0%, transparent 100%),
		radial-gradient(1.5px 1.5px at 88% 12%, rgba(255,255,255,0.90) 0%, transparent 100%),
		radial-gradient(1px   1px   at 14% 91%, rgba(255,255,255,0.65) 0%, transparent 100%),
		radial-gradient(1px   1px   at 45% 25%, rgba(255,255,255,0.75) 0%, transparent 100%),
		radial-gradient(1.2px 1.2px at 93% 60%, rgba(255,255,255,0.80) 0%, transparent 100%),
		radial-gradient(1px   1px   at 30% 45%, rgba(255,255,255,0.50) 0%, transparent 100%),
		radial-gradient(1px   1px   at 72% 88%, rgba(255,255,255,0.70) 0%, transparent 100%);
	pointer-events: none;
}

.ttm-asteroid-crosshair {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.7rem;
	z-index: 2;
	filter: drop-shadow(0 0 8px rgba(255,210,0,0.9));
	animation: ttm-pulse-cross 2s ease-in-out infinite;
}
@keyframes ttm-pulse-cross {
	0%, 100% { filter: drop-shadow(0 0 8px rgba(255,210,0,0.9)); }
	50%       { filter: drop-shadow(0 0 18px rgba(255,140,0,1)); }
}

.ttm-asteroid {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	z-index: 3;
	transform: translate(-50%, -50%);  /* center on x,y coords */
}
.ttm-asteroid-icon { font-size: 1.9rem; line-height: 1; animation: ttm-tumble 2.5s linear infinite; }
@keyframes ttm-tumble { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ttm-asteroid-word {
	font-family: var(--ttm-font-mono);
	font-size: 0.73rem;
	font-weight: 700;
	background: rgba(255,255,255,0.12);
	color: #e8f0ff;
	padding: 1px 6px;
	border-radius: 3px;
	white-space: nowrap;
	border: 1px solid rgba(150,180,255,0.25);
}
.ttm-asteroid-blast {
	animation: ttm-blast 0.32s ease-out forwards;
	pointer-events: none;
}
@keyframes ttm-blast {
	0%   { transform: translate(-50%, -50%) scale(1);   opacity: 1; filter: brightness(1); }
	40%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0.8; filter: brightness(4); }
	100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* ---- Small-screen overrides for new games ---- */
@media (max-width: 720px) {
	.ttm-game-cards { grid-template-columns: repeat(2, 1fr); }
	.ttm-bomb-body  { width: 100px; height: 100px; }
	.ttm-bomb-word  { font-size: 0.85rem; }
	.ttm-racer-car  { font-size: 1.5rem; left: 30px; }
	.ttm-racer-display { font-size: 1.1rem; }
}
@media (max-width: 480px) {
	.ttm-game-cards { grid-template-columns: 1fr; }
}