*{box-sizing:border-box}
:root{--ink:#243447;--rail:#52606d;--orange:#f59e0b;--orange-dark:#c2410c;--blue:#2563eb}
body{margin:0;min-height:100vh;font-family:Inter,sans-serif;background:linear-gradient(135deg,#dbeafe 0%,#f8fafc 48%,#dcfce7 100%);color:var(--ink);display:grid;place-items:center;padding:clamp(12px,3vw,32px)}
.game-container{width:min(100%,980px);padding:clamp(16px,3vw,34px);text-align:center;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:20px;box-shadow:0 18px 50px #33415525;position:relative}
h1,h2,.wagon,.caboose{font-family:'Fredoka One',cursive}h1{font-size:clamp(1.8rem,4vw,3rem);margin:1.4rem 0 .45rem;color:#1e3a5f}.game-container>p{font-size:clamp(.95rem,2vw,1.1rem);margin:0 auto 1.5rem;color:#52606d}#level-counter{position:absolute;top:16px;right:18px;padding:.38rem .75rem;border:1px solid #94a3b855;border-radius:999px;background:#f8fafccc;font-size:.78rem;font-weight:700;color:#52606d}
#drop-zone{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:0;min-height:112px;padding:22px 14px 28px;border-radius:14px;background:linear-gradient(#dbeafe,#bfdbfe);box-shadow:inset 0 -9px 0 #64748b,inset 0 -15px 0 #cbd5e1;overflow:visible}
#source-zone{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem;min-height:86px;padding:14px;margin-top:14px;border:1px dashed #94a3b8;border-radius:14px;background:#f1f5f9}
.locomotive,.caboose{position:relative;display:inline-block;flex:0 0 auto;width:76px;height:52px;margin:0 6px 4px;background:#dc2626;border:3px solid #991b1b;border-radius:8px 15px 7px 7px;box-shadow:inset 0 -12px #b91c1c,0 4px 0 #475569}.locomotive:before,.caboose:before{content:'';position:absolute;bottom:-13px;left:10px;width:14px;height:14px;border:3px solid #475569;border-radius:50%;background:#1f2937;box-shadow:42px 0 0 -3px #1f2937,42px 0 0 0 #475569}.locomotive:after{content:'';position:absolute;left:-12px;bottom:4px;width:18px;height:25px;border-radius:9px 0 0 9px;background:#f97316;border:3px solid #c2410c}.smokestack{position:absolute;left:14px;top:-18px;width:12px;height:19px;background:#374151;border-radius:3px 3px 0 0}.smokestack:after{content:'';position:absolute;left:-4px;top:-5px;width:20px;height:6px;border-radius:4px;background:#1f2937}.cab-window{position:absolute;right:10px;top:9px;width:22px;height:16px;border:3px solid #7f1d1d;border-radius:3px;background:#bfdbfe}.caboose{width:68px;background:#2563eb;border-color:#1e40af;border-radius:8px 8px 12px 12px;box-shadow:inset 0 -12px #1d4ed8,0 4px 0 #475569}.caboose:after{content:'';position:absolute;left:12px;top:8px;width:40px;height:15px;border-radius:3px;background:#bfdbfe;border:3px solid #1e3a8a}
.wagon{position:relative;flex:0 0 auto;padding:.65rem .82rem;margin:0 6px 5px;border:2px solid var(--orange-dark);border-bottom:6px solid var(--orange-dark);border-radius:8px 8px 5px 5px;background:#fbbf24;color:#713f12;font-size:clamp(.92rem,2vw,1.12rem);line-height:1;cursor:grab;box-shadow:0 3px 0 #92400e;transition:transform .15s,filter .15s}.wagon:after,.wagon:before{content:'';position:absolute;bottom:-12px;width:10px;height:10px;border:3px solid #475569;border-radius:50%;background:#1f2937}.wagon:before{left:9px}.wagon:after{right:9px}.wagon:hover{filter:brightness(1.05);transform:translateY(-2px)}.wagon:active{cursor:grabbing;transform:scale(1.04)}
#feedback{min-height:2.7rem;margin:1rem 0;font-size:1.05rem}button{font:inherit;border:0;border-radius:999px;padding:.7rem 1.25rem;background:#16a34a;color:#fff;cursor:pointer;font-weight:700}button:hover{filter:brightness(1.08)}.hidden{display:none!important}#end-game-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0f172acc;padding:1rem;z-index:10}#end-game-modal>div{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 15px 50px #0005}#end-game-modal h2{color:#ca8a04}
@media(max-width:600px){body{padding:8px}.game-container{padding:14px;border-radius:14px}#level-counter{position:static;display:inline-block;margin-bottom:.25rem}#drop-zone{min-height:96px;padding:18px 8px 25px}.locomotive{width:62px;height:44px;margin-right:3px}.caboose{width:56px;height:44px;margin-left:3px}.wagon{padding:.58rem .62rem;margin-left:3px;margin-right:3px;font-size:.9rem}}
.leaderboard{margin-top:20px;padding:16px 20px;border-top:1px solid #cbd5e1;text-align:left}.leaderboard-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.leaderboard h2{font-size:1.3rem;margin:0;color:#1e3a5f}.leaderboard p{font-size:.85rem;color:#64748b;margin:8px 0}.leaderboard ol{display:grid;gap:6px;padding-left:1.8rem;margin:12px 0 0}.leaderboard li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;background:#f1f5f9;font-size:.92rem}.leaderboard li strong{color:#15803d}.secondary-button{padding:.45rem .8rem;background:#64748b;font-size:.8rem}.result-actions{display:grid;gap:10px;margin-top:18px}.result-actions label{text-align:left;font-weight:700}.result-actions input{width:100%;padding:12px 14px;border:1px solid #94a3b8;border-radius:8px;font:inherit}.result-actions p{min-height:1.2em;margin:0;color:#475569;font-size:.9rem}.result-actions button:last-child{background:#2563eb}.feedback-correct{min-height:2.7rem;margin:1rem 0;color:#15803d;font-size:1.05rem;font-weight:700}.feedback-wrong{min-height:2.7rem;margin:1rem 0;color:#dc2626;font-size:1.05rem;font-weight:700}