/* Tracy Hub: games, level test, roadmap, library. */
.tracy-game, .tracy-leveltest, .tracy-roadmap { position: relative; background: #FFF5F3; border-radius: 28px; padding: clamp(1rem, 3vw, 1.8rem); }
.tracy-game__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .9rem; }
@media (max-width: 700px) { .tracy-game__tabs { grid-template-columns: repeat(2, 1fr); } }
.tracy-tab { display: grid; gap: .1rem; text-align: left; background: #fff; border: 2px solid transparent; border-radius: 18px; padding: .7rem .9rem; cursor: pointer; color: #1F2D52; font: inherit; }
.tracy-tab small { color: #56607A; font-size: .78rem; line-height: 1.3; }
.tracy-tab__icon { font-size: 1.5rem; }
.tracy-tab.is-active { border-color: #E11D2E; box-shadow: 0 8px 20px -10px rgba(31,45,82,.35); }
.tracy-game__sets { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1rem; font-weight: 600; }
.tracy-chip { border: 0; background: #fff; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: .88rem; cursor: pointer; color: #1F2D52; }
.tracy-chip.is-active { background: #E11D2E; color: #fff; }
.tracy-game__stage { background: #fff; border-radius: 22px; padding: clamp(1rem, 3vw, 1.6rem); min-height: 300px; text-align: center; position: relative; overflow: hidden; }
.tracy-pic { font-size: clamp(3.2rem, 9vw, 4.6rem); line-height: 1.1; display: block; }
.tracy-game__count { color: #56607A; font-size: .9rem; margin: .8rem 0 0; }
.tracy-game__nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; margin-top: 1rem; }
.tracy-game__prompt { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin-bottom: 1rem; }
.tracy-game__prompt p { margin: 0; font-weight: 600; }
.tracy-speak { width: 74px; height: 74px; border-radius: 50%; border: 0; background: #FFC845; font-size: 2rem; cursor: pointer; box-shadow: 0 8px 0 #E0A92B; transition: transform .1s; }
.tracy-speak:active { transform: translateY(4px); box-shadow: 0 4px 0 #E0A92B; }

/* Flashcard */
.tracy-flash { position: relative; width: min(300px, 100%); height: 220px; margin: 0 auto; border: 0; background: none; cursor: pointer; perspective: 900px; padding: 0; font: inherit; color: #1F2D52; }
.tracy-flash__front, .tracy-flash__back {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
	border-radius: 24px; backface-visibility: hidden; transition: transform .5s; box-shadow: 0 12px 26px -14px rgba(31,45,82,.45);
}
.tracy-flash__front { background: #DDF4EF; }
.tracy-flash__front small { color: #56607A; }
.tracy-flash__back { background: #E11D2E; color: #fff; transform: rotateY(180deg); }
.tracy-flash__back strong { font-family: "Baloo 2", sans-serif; font-size: 2.6rem; line-height: 1; }
.tracy-flash.is-flipped .tracy-flash__front { transform: rotateY(180deg); }
.tracy-flash.is-flipped .tracy-flash__back { transform: rotateY(360deg); }

/* Options */
.tracy-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 560px; margin: 0 auto; }
.tracy-options.is-text { grid-template-columns: 1fr; max-width: 420px; }
@media (max-width: 560px) { .tracy-options { grid-template-columns: repeat(2, 1fr); } }
.tracy-option { background: #FFF5F3; border: 3px solid transparent; border-radius: 20px; padding: .8rem .5rem; cursor: pointer; font: inherit; font-weight: 600; color: #1F2D52; transition: transform .1s; }
.tracy-option:hover { transform: translateY(-2px); }
.tracy-option.is-right { border-color: #3DB39E; background: #DDF4EF; animation: tracy-pop .4s; }
.tracy-option.is-wrong { border-color: #E57373; opacity: .55; animation: tracy-shake .35s; }

/* Spell */
.tracy-slots { display: flex; justify-content: center; gap: .35rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tracy-slot { width: 2.4rem; height: 2.8rem; border-bottom: 4px solid #FFE1DC; font-family: "Baloo 2", sans-serif; font-size: 1.9rem; font-weight: 700; display: grid; place-items: center; text-transform: lowercase; }
.tracy-slot.is-filled { border-color: #7FD1C1; animation: tracy-pop .3s; }
.tracy-tiles { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.tracy-tile { width: 3rem; height: 3rem; border-radius: 14px; border: 0; background: #FFC845; font-family: "Baloo 2", sans-serif; font-size: 1.6rem; font-weight: 700; color: #1F2D52; cursor: pointer; box-shadow: 0 5px 0 #E0A92B; }
.tracy-tile.is-used { opacity: .25; box-shadow: none; }
.tracy-tile.is-wrong { animation: tracy-shake .35s; background: #F8B4B4; }

/* Memory */
.tracy-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; max-width: 520px; margin: 0 auto; }
@media (max-width: 520px) { .tracy-memory { grid-template-columns: repeat(3, 1fr); } }
.tracy-mem { position: relative; aspect-ratio: 1; border: 0; border-radius: 16px; background: #E11D2E; cursor: pointer; font: inherit; padding: 0; overflow: hidden; }
.tracy-mem__back { color: #FFC845; font-size: 1.8rem; }
.tracy-mem__face { position: absolute; inset: 0; display: none; place-items: center; background: #DDF4EF; color: #1F2D52; font-size: 2.2rem; }
.tracy-mem__face.is-word { font-family: "Baloo 2", sans-serif; font-size: clamp(.95rem, 3.6vw, 1.3rem); font-weight: 700; }
.tracy-mem.is-open .tracy-mem__face { display: grid; }
.tracy-mem.is-found .tracy-mem__face { background: #FFF1C7; }

/* Finish + burst */
.tracy-finish { padding: 1rem 0; }
.tracy-finish__big { font-size: 4rem; line-height: 1; }
.tracy-finish__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.tracy-burst { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.tracy-burst span { position: absolute; font-size: 1.5rem; animation: tracy-burst 1.1s ease-out forwards; }
@keyframes tracy-burst { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.2); opacity: 0; } }
@keyframes tracy-pop { 50% { transform: scale(1.08); } }
@keyframes tracy-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .tracy-burst, .tracy-option, .tracy-slot, .tracy-tile { animation: none !important; } .tracy-flash__front, .tracy-flash__back { transition: none; } }

.tracy-note { color: #56607A; font-size: .88rem; }

/* Star counter */
.tracy-starcount { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; align-items: center; gap: .6rem; background: #fff; border-radius: 999px; padding: .5rem 1.1rem; box-shadow: 0 8px 20px -12px rgba(31,45,82,.4); }
.tracy-starcount__icon { font-size: 1.4rem; }
.tracy-starcount__badge { background: #FFF1C7; border-radius: 999px; padding: .1rem .7rem; font-weight: 600; font-size: .88rem; }

/* Level test */
.tracy-lt__intro { text-align: center; display: grid; gap: .8rem; justify-items: center; background: #fff; border-radius: 22px; padding: 1.6rem; }
.tracy-lt__intro input { font: inherit; padding: .7rem 1rem; border-radius: 14px; border: 1.5px solid #E2D9C2; width: min(320px, 100%); text-align: center; }
.tracy-leveltest > .tracy-options, .tracy-leveltest > .tracy-game__prompt, .tracy-leveltest > .tracy-game__count { text-align: center; }
.tracy-leveltest .tracy-finish { background: #fff; border-radius: 22px; text-align: center; padding: 1.6rem; }
.tracy-lt__bar { height: 10px; background: #FFE1DC; border-radius: 99px; overflow: hidden; margin: .4rem 0; }
.tracy-lt__bar span { display: block; height: 100%; background: linear-gradient(90deg, #FFC845, #7FD1C1); border-radius: 99px; transition: width .3s; }
.tracy-lt__word { font-family: "Baloo 2", sans-serif; font-size: 2.6rem !important; line-height: 1; }
.tracy-lt__q { font-size: 1.15rem; }

/* Roadmap */
.tracy-rm__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tracy-rm__head > div { flex: 1 1 260px; }
.tracy-rm__badges { display: flex; gap: .4rem; overflow-x: auto; padding: .8rem 0; }
.tracy-badge { flex: none; display: grid; justify-items: center; width: 74px; background: #fff; border-radius: 16px; padding: .4rem .2rem; opacity: .55; }
.tracy-badge small { font-size: .66rem; text-align: center; line-height: 1.2; }
.tracy-badge.is-earned { opacity: 1; background: #FFF1C7; }
.tracy-rm__weeks { display: grid; grid-template-columns: repeat(13, 1fr); gap: .3rem; margin: .4rem 0 1rem; }
@media (max-width: 700px) { .tracy-rm__weeks { grid-template-columns: repeat(7, 1fr); } }
.tracy-rm__wk { border: 0; border-radius: 10px; background: #fff; padding: .45rem 0; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; color: #1F2D52; }
.tracy-rm__wk.is-partial { background: #FFF1C7; }
.tracy-rm__wk.is-done { background: #7FD1C1; }
.tracy-rm__wk.is-active { outline: 3px solid #1F2D52; }
.tracy-rm__card { background: #fff; border-radius: 22px; padding: 1.4rem; }
.tracy-rm__card h3 { margin-top: .2rem; }
.tracy-rm__tasks { list-style: none; padding: 0; display: grid; gap: .5rem; }
.tracy-rm__tasks li { display: flex; gap: .7rem; align-items: flex-start; background: #FFF5F3; padding: .7rem .9rem; border-radius: 14px; }
.tracy-rm__tasks input { width: 22px; height: 22px; margin-top: .1rem; accent-color: #1F2D52; flex: none; }
.tracy-rm__tasks label { cursor: pointer; }

/* Library */
.tracy-filter { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; font-weight: 600; }
.tracy-filter a { text-decoration: none; background: #FFF5F3; padding: .3rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 500; }
.tracy-filter a.is-active { background: #E11D2E; color: #fff; }
.tracy-library__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tracy-library__item { display: grid; gap: .3rem; align-content: start; text-decoration: none; background: #fff; border-radius: 20px; padding: 1.2rem; box-shadow: 0 12px 28px -18px rgba(31,45,82,.45); border: 1px solid rgba(31,45,82,.06); color: #1F2D52; transition: transform .15s; }
.tracy-library__item:hover { transform: translateY(-3px); }
.tracy-library__icon { font-size: 2.4rem; line-height: 1; }
.tracy-library__kind { color: #A8122A; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tracy-library__item small { color: #56607A; }
.tracy-library__age { font-size: .78rem; background: #DDF4EF; border-radius: 999px; padding: .1rem .6rem; justify-self: start; }

/* Printable flashcards */
.tracy-printable__bar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.tracy-printable__bar span { color: #56607A; font-size: .9rem; }
.tracy-printable__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 2px dashed #C9BFA5; }
@media (max-width: 700px) { .tracy-printable__grid { grid-template-columns: repeat(2, 1fr); } }
.tracy-printable__card { display: grid; justify-items: center; align-content: center; gap: .2rem; aspect-ratio: 3/4; border: 1px dashed #C9BFA5; padding: .5rem; text-align: center; }
.tracy-printable__card .e { font-size: 3.6rem; line-height: 1.1; }
.tracy-printable__card strong { font-family: "Baloo 2", sans-serif; font-size: 1.7rem; line-height: 1; }
.tracy-printable__card small { color: #56607A; }
@media print {
	body * { visibility: hidden; }
	.tracy-printable, .tracy-printable * { visibility: visible; }
	.tracy-printable { position: absolute; left: 0; top: 0; width: 100%; }
	.tracy-printable__bar { display: none; }
	.tracy-printable__grid { grid-template-columns: repeat(4, 1fr); }
}