*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body,#app{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#87ceeb;font-family:Fredoka,Nunito,"Rounded Mplus 1c",system-ui,-apple-system,sans-serif;touch-action:none}#game-canvas{display:block;width:100%;height:100%;touch-action:none}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));z-index:10}.hud-row{display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.hud-group{display:flex;align-items:center;gap:10px;pointer-events:auto;flex-wrap:wrap}.toy-panel{background:#ffffffe0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:3px solid rgba(255,255,255,.95);border-radius:26px;padding:8px 12px;box-shadow:0 8px 24px #0f234138,inset 0 -3px #00000014;display:flex;align-items:center;gap:10px;pointer-events:auto}.toy-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;min-width:60px;height:60px;padding:0 14px;border-radius:20px;font-size:26px;font-weight:800;color:#1e293b;background:linear-gradient(180deg,#fff,#f1f5f9);box-shadow:0 5px #cbd5e1,0 8px 16px #00000029;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .1s cubic-bezier(.34,1.56,.64,1),box-shadow .1s ease;position:relative;touch-action:manipulation}.toy-btn:active{transform:translateY(4px) scale(.96);box-shadow:0 1px #cbd5e1,0 3px 6px #00000029}.toy-btn.active{background:linear-gradient(180deg,#fde047,#facc15);box-shadow:0 5px #ca8a04,0 8px 18px #eab30873;transform:translateY(-2px) scale(1.04)}.toy-btn.primary{background:linear-gradient(180deg,#4ade80,#22c55e);color:#fff;box-shadow:0 5px #15803d,0 8px 16px #22c55e59}.toy-btn.danger{background:linear-gradient(180deg,#fb7185,#e11d48);color:#fff;box-shadow:0 5px #9f1239,0 8px 16px #e11d4859}.toy-btn.blue{background:linear-gradient(180deg,#60a5fa,#3b82f6);color:#fff;box-shadow:0 5px #1d4ed8,0 8px 16px #3b82f659}.toy-btn.orange{background:linear-gradient(180deg,#fb923c,#f97316);color:#fff;box-shadow:0 5px #c2410c,0 8px 16px #f9731659}.toy-btn.purple{background:linear-gradient(180deg,#c084fc,#a855f7);color:#fff;box-shadow:0 5px #7e22ce,0 8px 16px #a855f759}.btn-label{font-size:13px;font-weight:800;letter-spacing:.2px;line-height:1}.toy-btn-col{flex-direction:column;padding:6px 12px;min-width:68px;height:68px;gap:2px}.toy-btn-col .icon{font-size:28px;line-height:1}.bottom-dock{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}.train-controls-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.speed-slider-wrap{display:flex;align-items:center;gap:8px;background:#f1f5f9;padding:8px 14px;border-radius:20px;border:2px solid #cbd5e1}.speed-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:170px;height:22px;border-radius:12px;background:linear-gradient(90deg,#f97316,#94a3b8,#22c55e 66%,#3b82f6);outline:none;cursor:pointer}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:40px;border-radius:50%;background:#fff;border:4px solid #f59e0b;box-shadow:0 4px 10px #0000004d;cursor:pointer}.speed-slider::-moz-range-thumb{width:40px;height:40px;border-radius:50%;background:#fff;border:4px solid #f59e0b;box-shadow:0 4px 10px #0000004d;cursor:pointer}.toast-banner{position:fixed;top:90px;left:50%;transform:translate(-50%) translateY(-10px);background:#fffffff0;color:#0f172a;padding:10px 22px;border-radius:999px;font-size:18px;font-weight:800;box-shadow:0 10px 25px #0003;border:3px solid #facc15;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);z-index:20;white-space:nowrap}.toast-banner.show{opacity:1;transform:translate(-50%) translateY(0)}.badge-count{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;border-radius:999px;background:#ef4444;color:#fff;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;box-shadow:0 2px 6px #00000040}@media(max-width:768px){.toy-btn{min-width:52px;height:52px;font-size:22px;border-radius:16px}.toy-btn-col{min-width:58px;height:58px}.speed-slider{width:130px}.toy-panel{padding:6px 8px;border-radius:20px;gap:6px}}
