/* Space School — Space Train */
.tr{position:relative;min-height:clamp(440px,44vw,560px);padding:14px 16px 20px;border-radius:24px;overflow:hidden;user-select:none;-webkit-user-select:none;
	background:radial-gradient(70% 60% at 80% 10%,rgba(56,189,248,.28),transparent 70%),linear-gradient(180deg,#141b63 0%,#0b1150 60%,#070b33 100%)}
.tr-sky{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 32% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 58% 26%,#fff,transparent),radial-gradient(1px 1px at 82% 60%,#fff,transparent),radial-gradient(1px 1px at 92% 18%,#fff,transparent)}
.tr-planet{position:absolute;right:-60px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd9a8,#f59e0b 45%,#9a3412 100%);opacity:.75;box-shadow:0 0 90px rgba(245,158,11,.45)}
.tr-planet::after{content:"";position:absolute;left:-30%;top:40%;width:160%;height:20%;border-radius:50%;border:6px solid rgba(255,236,200,.45);transform:rotate(-14deg)}
.tr-moon{position:absolute;left:8%;top:22%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f5f9,#94a3b8);box-shadow:inset -6px -6px 10px rgba(0,0,0,.25);animation:trmoon 8s ease-in-out infinite alternate}
@keyframes trmoon{to{transform:translateY(-12px)}}
.tr-sign{position:relative;z-index:2;max-width:760px;margin:0 auto 18px;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);text-align:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tr-sign small{display:block;color:#ffd36b;font:800 12px "Nunito Sans",sans-serif;text-transform:uppercase;letter-spacing:.4px}
.tr-sign b{display:block;margin-top:2px;font:700 clamp(18px,2.2vw,24px)/1.25 Fredoka,sans-serif;color:#fff}
.tr-img{display:block;max-height:110px;margin:8px auto 0;border-radius:12px}
.tr-track{position:relative;z-index:1;margin-top:clamp(20px,5vw,60px);padding:20px 4px 30px;overflow-x:auto;scrollbar-width:thin;touch-action:pan-x}
.tr-rail{position:absolute;left:0;right:0;bottom:22px;height:6px;border-radius:6px;background:linear-gradient(90deg,#5ee0ff,#a78bfa,#f472b6);box-shadow:0 0 16px #5ee0ff,0 0 30px rgba(167,139,250,.6);min-width:100%}
.tr-rail::after{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 18px,transparent 18px 36px)}
.tr-train{position:relative;z-index:1;display:flex;align-items:flex-end;width:max-content;min-width:100%;padding:0 10px;transition:transform 1.8s cubic-bezier(.7,0,.3,1)}
.tr-engine{position:relative;flex:0 0 auto;width:150px;margin-bottom:-4px}
.tr-engine svg{display:block;width:100%;height:auto;transform:scaleX(-1)}
.tr-engine .wh{transform-origin:center;transform-box:fill-box}
.tr-puff{position:absolute;right:112px;top:-6px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(255,255,255,0) 70%);animation:trpuff 2.4s ease-out infinite}
.tr-puff.b{animation-delay:.8s}.tr-puff.c{animation-delay:1.6s}
@keyframes trpuff{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(30px,-60px) scale(2.2);opacity:0}}
.tr-link{flex:0 0 auto;width:14px;height:6px;margin:0 -2px 24px;background:#94a3b8;border-radius:3px}

/* wagons */
.tr-w{position:relative;flex:0 0 auto;width:clamp(128px,14vw,170px);min-height:118px;padding:24px 10px 28px;border-radius:16px 16px 10px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--wc) 85%,#fff),var(--wc) 55%,color-mix(in srgb,var(--wc) 70%,#000));color:#fff;cursor:grab;touch-action:none;box-shadow:0 10px 0 rgba(0,0,0,.18),inset 0 -6px 0 rgba(0,0,0,.18);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .2s,filter .3s;animation:trin .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes trin{from{opacity:0;transform:translateY(-30px)}}
.tr-w:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tr-n{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:#0b1150;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font:700 15px Fredoka,sans-serif;color:#fff}
.tr-win{display:flex;justify-content:center;gap:8px;margin-bottom:6px}
.tr-win i{width:22px;height:14px;border-radius:5px;background:rgba(255,255,255,.75);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.tr-t{display:block;padding:6px 6px;border-radius:10px;background:rgba(255,255,255,.92);color:#1b2340;font:800 clamp(12px,1.2vw,14.5px)/1.25 "Nunito Sans",sans-serif;text-align:center;overflow-wrap:anywhere}
.tr-wh{position:absolute;left:14px;right:14px;bottom:-14px;display:flex;justify-content:space-between}
.tr-wh i{width:26px;height:26px;border-radius:50%;background:#0b1226;border:4px solid #94a3b8;box-shadow:inset 0 0 0 3px #0b1226}
.tr-mv{position:absolute;left:0;right:0;bottom:-46px;display:flex;justify-content:center;gap:6px}
.tr-mv button{width:34px;height:28px;border:0;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;cursor:pointer}
.tr-mv button:hover{background:rgba(255,255,255,.26)}
.tr-w.is-pick{transform:translateY(-10px);box-shadow:0 0 0 4px #fff,0 0 30px rgba(255,255,255,.6)}
.tr-w.is-drag{cursor:grabbing;z-index:3;transition:none;box-shadow:0 26px 30px rgba(0,0,0,.45)}
.tr-w.is-bump{animation:trbump .35s}
@keyframes trbump{30%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.tr-w.is-right{filter:drop-shadow(0 0 12px #4ade80)}
.tr-w.is-right .tr-n{background:#22c55e;border-color:#bbf7d0}
.tr-w.is-wrong{filter:drop-shadow(0 0 12px #f87171)}
.tr-w.is-wrong .tr-n{background:#ef4444}
.tr-w.is-fix .tr-n{background:#22c55e}
.tr-w.is-lockd{cursor:default;filter:drop-shadow(0 0 10px #4ade80)}
.tr-w.is-lockd .tr-n{background:#22c55e}
.tr-w.is-lockd .tr-n::after{content:"🔒";position:absolute;right:-16px;top:-8px;font-size:13px}
.tr-w.is-lockd .tr-mv{visibility:hidden}
.tr-w.is-miss .tr-n{background:#ef4444}

/* the train leaves (to the left) */
.tr.is-go .tr-train{transform:translateX(-130%)}
.tr.is-go .tr-wh i{animation:trspin .35s linear infinite;border-style:dashed}
@keyframes trspin{to{transform:rotate(360deg)}}
.tr.is-go .tr-puff{animation-duration:.8s}
.tr.is-win::after,.tr.is-lose::after,.tr.is-part::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:24px;animation:fzflash .9s ease-out forwards}
.tr.is-win::after{box-shadow:inset 0 0 0 5px #4ade80,inset 0 0 60px rgba(74,222,128,.35)}
.tr.is-lose::after{box-shadow:inset 0 0 0 5px #f87171,inset 0 0 60px rgba(248,113,113,.3)}
.tr.is-part::after{box-shadow:inset 0 0 0 5px #f59e0b,inset 0 0 60px rgba(245,158,11,.3)}
@keyframes fzflash{to{opacity:0}}
.ssa.is-mode .ssa-answers.t-mode{display:block}

@media (max-width:640px){
	.tr{padding:10px 8px 16px}
	.tr-planet{width:260px;height:260px;bottom:-90px}
	.tr-engine{width:110px}
	.tr-w{width:120px;min-height:108px}
}
@media (prefers-reduced-motion:reduce){.tr *{animation:none!important;transition:none!important}}
/* room under the wagons for the ◀ ▶ buttons — the track scrolls sideways, so anything outside it was clipped and unclickable */
.tr-track{padding:24px 4px 74px}
.tr-rail{bottom:64px}
@media (max-width:640px){.tr-track{padding-bottom:70px}.tr-rail{bottom:60px}}
/* four wagons fit on a desktop card without scrolling (more than that still scrolls sideways) */
.tr-engine{width:118px}
.tr-w{width:clamp(112px,10.5vw,148px)}
.tr-train{padding:0 4px}

/* ================= Train Station theme (flat daytime landscape, side view) ================= */
.tr.tr-station{background:linear-gradient(180deg,#bfe7f7 0%,#dff3f9 42%,#f3f9ec 60%)}
.tr-station .tr-sky{background:none}
.tr-sun{position:absolute;right:10%;top:9%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fffbe6,#ffe08a);box-shadow:0 0 0 14px rgba(255,236,170,.35),0 0 60px rgba(255,214,120,.5)}
.tr-cloud{position:absolute;height:32px;border-radius:32px;background:#fff;animation:fzcloud linear infinite}
.tr-cloud::before,.tr-cloud::after{content:"";position:absolute;bottom:10px;border-radius:50%;background:#fff}
.tr-cloud::before{left:18%;width:46px;height:46px}.tr-cloud::after{left:50%;width:60px;height:60px}
.tr-cloud.a{width:150px;top:12%;left:-180px;animation-duration:64s}
.tr-cloud.b{width:120px;top:26%;left:-150px;animation-duration:80s;animation-delay:-36s;opacity:.85}
@keyframes fzcloud{to{left:110%}}
.tr-hills{position:absolute;left:0;right:0;top:32%;width:100%;height:28%}
.tr-tree{position:absolute;top:36%;width:40px;height:64px}
.tr-tree::before{content:"";position:absolute;left:50%;bottom:0;width:8px;height:22px;margin-left:-4px;background:#8b5a2b;border-radius:3px}
.tr-tree::after{content:"";position:absolute;left:0;top:0;width:40px;height:48px;border-radius:50% 50% 45% 45%;background:#4caf50;box-shadow:inset -6px -6px 0 rgba(0,0,0,.08)}
.tr-tree.a{left:6%}.tr-tree.b{left:22%;transform:scale(.8)}.tr-tree.c{right:24%;transform:scale(1.1)}
.tr-roof{position:absolute;left:4%;right:4%;top:46%;height:16px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#e67e22,#d35400);box-shadow:0 6px 0 rgba(0,0,0,.08)}
.tr-pillar{position:absolute;top:16px;width:10px;height:90px;background:#95a5a6;border-radius:3px}
.tr-pillar.a{left:12%}.tr-pillar.b{right:12%}
.tr-clock{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:22px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.tr-platform{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,#d7ccc8 0,#bcaaa4 14px,#a1887f 15px,#a1887f 18px,#cfc6bd 19px,#cfc6bd 100%)}
/* station board */
.tr-station .tr-sign{background:#1e6b52;border:4px solid #e8e2d0;border-radius:14px;box-shadow:0 8px 0 rgba(0,0,0,.12);-webkit-backdrop-filter:none;backdrop-filter:none}
.tr-station .tr-sign small{color:#ffe08a}
.tr-station .tr-sign b{color:#fff}
/* tracks on gravel */
.tr-station .tr-rail{height:10px;border-radius:2px;background:linear-gradient(180deg,#7f8c8d 0 3px,#566573 3px 5px,transparent 5px 7px,#7f8c8d 7px);box-shadow:none}
.tr-station .tr-rail::after{top:10px;height:12px;background:repeating-linear-gradient(90deg,#8d6e63 0 14px,transparent 14px 34px),linear-gradient(#b0a597,#9c8f80);border-radius:2px}
.tr-station .tr-engine{width:132px;margin-bottom:-8px}
.tr-station .tr-engine svg{transform:none}
.tr-station .tr-puff{right:auto;left:30px;top:-14px;width:22px;height:22px;background:radial-gradient(circle,#fff 40%,rgba(255,255,255,0) 72%)}
.tr-station .tr-puff.d{animation-delay:2.2s}
@keyframes trpuff{0%{transform:translate(0,0) scale(.5);opacity:.95}100%{transform:translate(-10px,-70px) scale(2.6);opacity:0}}
/* passenger carriages */
.tr-station .tr-w{border-radius:12px 12px 8px 8px;padding-top:28px;background:linear-gradient(180deg,var(--wc),color-mix(in srgb,var(--wc) 78%,#000));box-shadow:0 8px 0 rgba(0,0,0,.14),inset 0 -6px 0 rgba(0,0,0,.15)}
.tr-top{position:absolute;left:-4px;right:-4px;top:-8px;height:12px;border-radius:8px 8px 3px 3px;background:#34495e}
.tr-station .tr-n{top:-26px;background:#fff;color:#1e6b52;border-color:#1e6b52}
.tr-station .tr-win i{width:18px;height:16px;border-radius:4px;background:#d6f0fb;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.tr-station .tr-wh i{background:#2c3e50;border-color:#f5b041;box-shadow:inset 0 0 0 3px #2c3e50}
.tr-station .tr-link{background:#34495e}
.tr-station .tr-mv button{background:#1e6b52;color:#fff}
.tr-station .tr-mv button:hover{background:#2d8a6b}
.tr-station .tr-w.is-right .tr-n,.tr-station .tr-w.is-fix .tr-n,.tr-station .tr-w.is-lockd .tr-n{background:#22c55e;color:#fff;border-color:#fff}
.tr-station .tr-w.is-wrong .tr-n,.tr-station .tr-w.is-miss .tr-n{background:#ef4444;color:#fff;border-color:#fff}
@media (max-width:640px){.tr-roof{top:44%}.tr-tree{display:none}.tr-station .tr-engine{width:104px}}

/* ================= themes ================= */
/* 🐫 desert caravan */
.tr.th-caravan{background:linear-gradient(180deg,#fb923c 0%,#fbbf77 30%,#fde5b7 52%,#f4b26a 60%)}
.th-caravan .tr-hills,.th-caravan .tr-tree,.th-caravan .tr-roof,.th-caravan .tr-cloud{display:none}
.th-caravan .tr-sun{background:radial-gradient(circle,#fff7d6,#fde047);box-shadow:0 0 70px rgba(253,224,71,.8);top:18%;right:auto;left:12%}
.tr-dunes{position:absolute;left:0;right:0;top:30%;width:100%;height:34%}
.th-caravan .tr-platform{background:linear-gradient(180deg,#e8994f,#d9843c)}
.tr-palm{position:absolute;bottom:46%;width:14px;height:90px;background:#92400e;border-radius:6px}
.tr-palm::before{content:"";position:absolute;left:-36px;top:-24px;width:86px;height:40px;background:radial-gradient(ellipse at 20% 80%,#15803d 40%,transparent 41%),radial-gradient(ellipse at 80% 80%,#16a34a 40%,transparent 41%),radial-gradient(ellipse at 50% 30%,#22c55e 42%,transparent 43%)}
.tr-palm.a{left:30%}.tr-palm.b{right:12%;height:70px}
.th-caravan .tr-sign{background:#92400e;border-color:#fde68a}
.th-caravan .tr-sign small{color:#fde68a}
.th-caravan .tr-rail{height:16px;background:linear-gradient(180deg,#d9843c,#b45309);border-radius:8px}
.th-caravan .tr-rail::after{display:none}
.th-caravan .tr-wh,.th-caravan .tr-win,.th-caravan .tr-top{display:none}
.th-caravan .tr-w{min-height:86px;margin-bottom:46px;border-radius:10px;padding:18px 8px 10px;background:repeating-linear-gradient(45deg,var(--wc) 0 10px,color-mix(in srgb,var(--wc) 70%,#fff) 10px 20px)!important;box-shadow:0 6px 0 rgba(0,0,0,.2),inset 0 0 0 3px rgba(255,255,255,.4)}
.tr-camel{position:absolute;left:-12px;right:-12px;bottom:-48px;z-index:-1;width:calc(100% + 24px);height:auto;pointer-events:none}
.th-caravan .tr-link{height:3px;margin-bottom:76px;background:#78350f;border-radius:2px}
.th-caravan .tr-engine{width:150px;margin-bottom:2px}
.th-caravan .tr-puff{display:none}
.th-caravan .tr-n{background:#fff7ed;color:#92400e;border-color:#92400e}
/* 🎢 roller coaster */
.tr.th-coaster{background:radial-gradient(60% 50% at 70% 20%,rgba(244,114,182,.35),transparent 70%),linear-gradient(180deg,#312e81 0%,#4c1d95 50%,#1e1b4b 100%)}
.th-coaster .tr-hills,.th-coaster .tr-tree,.th-coaster .tr-roof,.th-coaster .tr-cloud,.th-coaster .tr-sun{display:none}
.th-coaster .tr-platform{background:linear-gradient(180deg,#1e1b4b,#0f0a2e)}
.tr-ferris{position:absolute;right:8%;top:8%;width:160px;height:160px;border-radius:50%;border:5px solid #f472b6;animation:trspin 14s linear infinite;box-shadow:0 0 30px rgba(244,114,182,.5)}
.tr-ferris i{position:absolute;left:50%;top:50%;width:2px;height:80px;background:#f9a8d4;transform-origin:top center}
.tr-ferris i:nth-child(1){transform:rotate(0)}.tr-ferris i:nth-child(2){transform:rotate(60deg)}.tr-ferris i:nth-child(3){transform:rotate(120deg)}.tr-ferris i:nth-child(4){transform:rotate(180deg)}.tr-ferris i:nth-child(5){transform:rotate(240deg)}.tr-ferris i:nth-child(6){transform:rotate(300deg)}
.tr-bulbs{position:absolute;left:0;right:0;top:4%;height:20px;background:radial-gradient(circle,#fde047 4px,transparent 5px) 0 0/36px 20px repeat-x;filter:drop-shadow(0 0 6px #fde047);animation:trbulb 1s steps(2) infinite}
@keyframes trbulb{50%{opacity:.5}}
.th-coaster .tr-sign{background:rgba(30,27,75,.85);border-color:#f472b6}
.th-coaster .tr-sign small{color:#f9a8d4}
.th-coaster .tr-rail{height:12px;background:linear-gradient(180deg,#ef4444,#991b1b);box-shadow:0 0 14px rgba(239,68,68,.6)}
.th-coaster .tr-rail::after{top:12px;height:70px;background:repeating-linear-gradient(90deg,#94a3b8 0 6px,transparent 6px 70px);opacity:.6}
.th-coaster .tr-win,.th-coaster .tr-top{display:none}
.th-coaster .tr-w{border-radius:10px 10px 26px 26px;padding-top:30px}
.tr-riders{position:absolute;left:50%;top:-40px;transform:translateX(-50%);display:flex;gap:4px;z-index:-1}
.tr-riders svg{width:34px;height:40px}
.th-coaster.is-go .tr-riders svg{animation:trcheer .3s ease-in-out infinite alternate}
@keyframes trcheer{to{transform:translateY(-5px)}}
.th-coaster .tr-puff{display:none}
.th-coaster .tr-engine{width:140px}
/* 🧩 code blocks */
.tr.th-code{background:#f8fafc}
.th-code .tr-sky,.th-code .tr-platform{background:none}
.th-code .tr-hills,.th-code .tr-tree,.th-code .tr-roof,.th-code .tr-cloud,.th-code .tr-sun,.th-code .tr-platform{display:none}
.tr-grid{position:absolute;inset:0;background-image:linear-gradient(#e2e8f0 1px,transparent 1px),linear-gradient(90deg,#e2e8f0 1px,transparent 1px);background-size:24px 24px}
.th-code .tr-sign{background:#fff;border-color:#cbd5e1;box-shadow:0 6px 0 rgba(15,23,42,.08)}
.th-code .tr-sign small{color:#4f46e5}.th-code .tr-sign b{color:#1e293b}
.th-code .tr-rail,.th-code .tr-link,.th-code .tr-wh,.th-code .tr-win,.th-code .tr-top,.th-code .tr-puff{display:none}
.th-code .tr-train{gap:0}
.th-code .tr-w{margin-left:-2px;border-radius:8px;padding:22px 12px 16px;background:var(--wc)!important;box-shadow:0 4px 0 color-mix(in srgb,var(--wc) 65%,#000)!important}
.th-code .tr-w::before{content:"";position:absolute;left:-10px;top:50%;width:14px;height:22px;margin-top:-11px;border-radius:4px;background:inherit}
.th-code .tr-t{background:rgba(255,255,255,.95)}
.th-code .tr-n{background:#fff;color:#1e293b;border-color:#1e293b}
.th-code .tr-engine{width:150px;margin-bottom:0}
.th-code .tr-mv button{background:#e2e8f0;color:#1e293b}
.tr-bot{position:absolute;left:0;bottom:84px;z-index:4;font-size:34px;opacity:0;transition:none}
.th-code.is-go .tr-bot{opacity:1;animation:trbot 1.8s linear forwards}
@keyframes trbot{from{left:0}to{left:90%}}
.th-code.is-go .tr-train{transform:none}
.th-code.is-go .tr-w{box-shadow:0 0 0 3px #22c55e,0 0 20px rgba(34,197,94,.6)!important}