/* Train Yard. Loaded after assets/css/game-base.css.

   The yard is a positioned box: rails are one SVG drawn by ui.js, and every
   carriage is an element that keeps its identity from move to move, so moving
   it is just a new transform and the CSS transition animates the shunt. */

  body.g-trainyard{
    --rail:#9aa3b5; --sleeper:#6b4a2e; --ballast:rgba(255,255,255,.04);
    --c-red:#ef4444; --c-blue:#3b82f6; --c-yellow:#f5c518; --c-green:#22c55e; --c-purple:#a855f7; --c-orange:#f97316;
  }
  html[data-theme="light"] body.g-trainyard{ --rail:#7c8599; --sleeper:#9a6b44; --ballast:rgba(40,20,90,.04) }

  [data-c="red"]{--c:var(--c-red)} [data-c="blue"]{--c:var(--c-blue)} [data-c="yellow"]{--c:var(--c-yellow)}
  [data-c="green"]{--c:var(--c-green)} [data-c="purple"]{--c:var(--c-purple)} [data-c="orange"]{--c:var(--c-orange)}

  /* ---------------- next trains ---------------- */
  .ty-next{display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:30px; margin:-4px 0 10px; font-size:12px; color:var(--muted); font-weight:700}
  .ty-card{display:inline-flex; gap:3px; align-items:center; padding:5px 8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border)}
  .ty-card i{width:14px; height:10px; border-radius:3px; background:var(--c); display:block}

  /* ---------------- the yard ---------------- */
  .ty-yard{
    position:relative; width:100%; max-width:500px; margin:0 auto; border-radius:18px; overflow:hidden;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 70%, #2b3a2b), color-mix(in srgb, var(--surface-solid) 85%, #20301f));
    box-shadow:inset 0 0 0 1px var(--border);
    user-select:none; -webkit-user-select:none; touch-action:manipulation;
  }
  .ty-yard.instant .ty-car, .ty-yard.instant .ty-engine{transition:none !important}
  .ty-rails{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

  .ty-hit{position:absolute; left:0; right:0; border-radius:12px; cursor:pointer; transition:background-color .15s ease}
  .ty-hit:hover{background:rgba(255,255,255,.04)}
  .ty-hit.target{background:color-mix(in srgb, var(--accent) 14%, transparent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent)}
  .ty-hit.full{cursor:not-allowed}
  .ty-hit.hint{animation:tyHint 1s ease-in-out 3}
  @keyframes tyHint{50%{background:rgba(255,225,77,.22); box-shadow:inset 0 0 0 2px #ffe14d}}
  .ty-hit:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}

  .ty-plat{
    position:absolute; left:6px; right:6px; top:6px; border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border:1px solid var(--border);
  }
  .ty-plat-label{position:absolute; left:12px; top:6px; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

  /* ghost slots on the platform: what this engine wants */
  .ty-ghost{
    position:absolute; border-radius:7px; border:2px dashed var(--c); opacity:.7;
    background:color-mix(in srgb, var(--c) 14%, transparent); transition:opacity .3s ease;
    display:grid; place-items:center; color:var(--c); font-size:13px; font-weight:900;
  }
  .ty-ghost.next{opacity:1; animation:tyNext 1.2s ease-in-out infinite}
  @keyframes tyNext{50%{box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 40%, transparent)}}

  /* ---------------- carriages ---------------- */
  .ty-car{
    position:absolute; left:0; top:0; border-radius:8px 8px 5px 5px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0 18%, var(--c) 18% 78%, color-mix(in srgb, var(--c) 70%, #000) 78%);
    box-shadow:0 3px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.18);
    transition:transform .34s cubic-bezier(.3,.9,.4,1), filter .2s ease;
    display:grid; place-items:center; z-index:2;
  }
  /* windows */
  .ty-car::before{
    content:""; position:absolute; left:14%; right:14%; top:26%; height:26%; border-radius:3px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 26%, transparent 26% 37%);
  }
  /* wheels */
  .ty-car::after{
    content:""; position:absolute; left:12%; right:12%; bottom:-5px; height:10px;
    background:radial-gradient(circle at 18% 50%, #222 0 4px, transparent 4.5px), radial-gradient(circle at 82% 50%, #222 0 4px, transparent 4.5px);
  }
  .ty-car .sym{position:relative; top:18%; font-size:11px; color:rgba(0,0,0,.55); font-weight:900; line-height:1}
  .ty-car.lift{filter:brightness(1.15) drop-shadow(0 0 10px var(--c)); z-index:5}
  .ty-car.shake{animation:tyShake .4s ease}
  @keyframes tyShake{25%{margin-left:-5px} 75%{margin-left:5px}}

  /* ---------------- the engine ---------------- */
  .ty-engine{position:absolute; left:0; top:0; z-index:3; transition:transform .9s cubic-bezier(.5,0,.3,1)}
  .ty-engine .boiler{
    position:absolute; left:10%; right:30%; bottom:22%; height:46%; border-radius:12px 6px 6px 12px;
    background:linear-gradient(180deg, #4b5563, #1f2937);
  }
  .ty-engine .cab{position:absolute; right:4%; bottom:22%; width:32%; height:78%; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg, #b91c1c, #7f1d1d)}
  .ty-engine .cab::before{content:""; position:absolute; left:20%; right:20%; top:14%; height:30%; border-radius:3px; background:#fde68a}
  .ty-engine .stack{position:absolute; left:18%; bottom:66%; width:12%; height:24%; border-radius:3px 3px 0 0; background:#111827}
  .ty-engine .front{position:absolute; left:0; bottom:22%; width:14%; height:40%; border-radius:50% 0 0 50%; background:#374151}
  .ty-engine .wheels{
    position:absolute; left:8%; right:6%; bottom:0; height:26%;
    background:radial-gradient(circle at 15% 50%, #111 0 38%, #9ca3af 40% 50%, transparent 52%),
               radial-gradient(circle at 48% 50%, #111 0 38%, #9ca3af 40% 50%, transparent 52%),
               radial-gradient(circle at 82% 50%, #111 0 38%, #9ca3af 40% 50%, transparent 52%);
    background-size:100% 100%;
  }
  .ty-engine.shake{animation:tyShake .4s ease}
  .ty-smoke{position:absolute; width:16px; height:16px; border-radius:50%; background:rgba(230,230,240,.7); pointer-events:none; z-index:4; animation:tyPuff 1.2s ease-out forwards}
  @keyframes tyPuff{from{transform:translate(0,0) scale(.5); opacity:.9} to{transform:translate(-18px,-46px) scale(2.2); opacity:0}}

  .ty-status{text-align:center; font-size:13.5px; color:var(--muted); margin:12px 0 0; min-height:1.5em}
  .ty-status b{color:var(--text)}
  .ty-stars{font-size:34px; letter-spacing:6px; margin:4px 0 6px; color:#ffc93c; text-align:center}
  .ty-stars .off{color:var(--border)}
  .rule.big p{font-size:15px; line-height:1.5}
  .rule.big .glyph{font-size:22px}
  .controls .btn[hidden]{display:none}

  @media(max-width:520px){
    body.g-trainyard .hud{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-bottom:12px}
    body.g-trainyard .stat{padding:8px 8px 8px 11px; min-width:0}
    body.g-trainyard .stat .k{font-size:9.5px; letter-spacing:.06em}
    body.g-trainyard .stat .v{font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  }
  @media (prefers-reduced-motion: reduce){
    .ty-car, .ty-engine{transition:none !important}
    .ty-smoke, .ty-ghost.next, .ty-hit.hint{animation:none !important}
  }