/* =====================================================================
     Passenger Runner (2026-10-14) -- the fifth Train Yarder game.
     A colour-and-shape sorting game for pre-readers, built on Freight
     Runner (same throttle, spotting, close-up camera, voice and sounds).

       * The Bullet Express and three coaches: red, blue and yellow. The
         coaches come in a different order each game.
       * Passengers wear a red cap, a blue top hat or a yellow pompom hat.
         Up to six wait at the main station, which sits on a track across
         the middle of the loop ("layout B").
       * Boarding happens in a big close-up of the platform: drag (or tap,
         then tap) each passenger into the coach that matches their hat.
         The right coach glows; a wrong coach gives a soft bounce and a hint.
       * Drive them out: stop each coach at its own station, the same way
         Freight Runner spots a car under a loader.
       * Blue is on the bottom of the loop, on the way round. Yellow and red
         are up the left side and across the top. Switch A (left side)
         sends the train up there or back to the main station; it glows,
         and the voice says so, when it needs tapping. Switch B (right side)
         is only a merge, so it never needs a tap.
       * After every second trip home: "Keep going, or all done?"
     No timers, no losing, no game over.
     ===================================================================== */
  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
  :root{
    --navy-deep:#3b3e42; --navy-darker:#2e3134; --brass:#C8935B; --brass-dark:#A8703C;
    --cream:#F6F3EC; --ink-dim:#5B6B76; --white:#FFFFFF; --success:#9ADE73; --caution:#E74C3C;
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{ background:var(--navy-darker); color:var(--cream); overflow:hidden;
    font-family:'Inter',"Helvetica Neue",Helvetica,Arial,sans-serif; }
  h2,h3{ font-family:'Oswald',"Helvetica Neue",sans-serif; font-weight:600; }
  #sim-wrapper{ position:relative; width:100%; height:100vh; display:flex; flex-direction:column; }
  #sim-topbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding:10px 18px; flex-shrink:0; }
  #sim-topbar .title .sub{ margin-left:8px; }
  #sim-main{ flex:1; display:flex; overflow:hidden; }
  #sim-canvas-holder{ flex:1; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  #canvas-wrap{ position:relative; width:100%; height:100%; overflow:hidden; }
  #sim-canvas{ display:block; width:100%; height:100%; touch-action:none; background:#bbe292; }

  #sim-toast{ position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:8;
    background:rgba(8,44,71,.94); color:var(--cream); padding:9px 18px; border-radius:999px;
    font-weight:600; font-family:'Fredoka','Oswald',sans-serif; font-size:15px; border:2px solid var(--brass);
    opacity:0; pointer-events:none; transition:opacity .18s ease; white-space:nowrap; max-width:88%;
    overflow:hidden; text-overflow:ellipsis; }
  #sim-toast.show{ opacity:1; }
  #sim-toast.warn{ border-color:var(--caution); background:rgba(90,26,20,.94); }
  #sim-toast.good{ border-color:var(--success); background:rgba(15,46,26,.94); }

  #sim-sidebar{ width:300px; padding:16px; overflow-y:auto; flex-shrink:0; display:flex; flex-direction:column; gap:14px; }
  .panel{ border-radius:10px; padding:13px 15px; }
  .panel h2{ margin:0 0 4px; font-size:13px; }
  .hint{ font-size:12px; color:var(--cream); line-height:1.4; margin:0 0 10px; }
  .row-btn{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
    border-radius:8px; padding:9px 12px; margin-top:8px; font-weight:500; font-size:13px; color:var(--cream);
    cursor:pointer; text-decoration:none; box-sizing:border-box; }
  .row-link-arrow{ font-weight:700; }
  .switch-toggle{ position:relative; }
  .sim-action-btn{ width:100%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .advance-btn{ width:100%; padding:14px 0; margin-top:12px; cursor:pointer; font-weight:700; -webkit-tap-highlight-color:transparent; }

  /* throttle (same widget as the other games) */
  #throttle-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; user-select:none; }
  #throttle-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
  #throttle-svg{ touch-action:none; pointer-events:none; flex:0 0 auto; }
  .throttle-arrow-btn{ flex:0 0 auto; width:46px; height:60px; border-radius:12px; cursor:pointer;
    background:var(--navy-deep); display:flex; align-items:center; justify-content:center;
    touch-action:none; -webkit-tap-highlight-color:transparent; transition:background .12s ease, transform .08s ease; }
  .throttle-arrow-btn.rev{ border:2px solid var(--caution); color:var(--caution); }
  .throttle-arrow-btn.fwd{ border:2px solid var(--success); color:var(--success); }
  .throttle-arrow-btn:active, .throttle-arrow-btn.held{ transform:scale(.92); }
  .throttle-arrow-btn.rev.held{ background:rgba(224,87,74,.22); }
  .throttle-arrow-btn.fwd.held{ background:rgba(154,222,115,.18); }
  .throttle-arrow-btn.fwd.cue{ animation:throttleCue 1.8s ease-in-out infinite; }
  .throttle-arrow-btn.fwd.cue.held{ animation:none; }
  @keyframes throttleCue{ 0%,100%{ box-shadow:0 0 0 0 rgba(154,222,115,0); }
    50%{ box-shadow:0 0 14px 4px rgba(154,222,115,.65); background:rgba(154,222,115,.14); } }
  .throttle-arrow-btn.locked{ opacity:.35; animation:none !important; }
  #throttle-readout{ font-weight:600; font-family:'Fredoka','Oswald',sans-serif; font-size:14px; display:flex; align-items:center; gap:6px; color:var(--cream); }
  #throttle-labels{ display:flex; justify-content:space-between; width:180px; font-size:10.5px; font-weight:700; color:#c9ccd0; letter-spacing:.05em; }

  /* ---------- passenger rows: pictures, no reading needed ---------- */
  .order{ display:flex; align-items:center; gap:6px; padding:8px 8px; margin-top:8px; border-radius:14px;
    background:#3b3e42; border:3px solid #686c71; cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:transform .07s ease; user-select:none; }
  .order:active{ transform:scale(.97); }
  .order .ic{ width:46px; height:46px; flex:0 0 auto; border-radius:10px; background:#cfe9b4; border:2px solid #686c71;
    display:flex; align-items:center; justify-content:center; }
  .order .ic svg{ width:40px; height:40px; display:block; }
  .order .ic.hat{ background:#e9edf1; }
  .order .arrow{ color:#ffe27a; font-weight:700; font-size:18px; flex:0 0 auto; }
  .order .riders{ display:flex; flex-wrap:wrap; gap:1px; width:44px; flex:0 0 auto; min-height:20px; align-items:center; }
  .order .riders svg{ width:20px; height:20px; display:block; }
  .order.now{ border-color:#ffe27a; box-shadow:0 0 0 3px rgba(255,226,122,.35); }
  .order.now .ic.to{ border-color:#ffe27a; box-shadow:0 0 0 3px #f7bb1c; animation:icPulse 1.2s ease-in-out infinite; }
  .order.empty{ opacity:.55; }
  @keyframes icPulse{ 50%{ transform:scale(1.08); } }
  #delivered{ display:flex; align-items:center; gap:8px; margin-top:10px; font-family:'Fredoka',sans-serif; font-size:15px; }
  #delivered .tick{ width:28px; height:28px; border-radius:50%; background:#7dff6a; border:3px solid #26763a; color:#0d2a13;
    display:flex; align-items:center; justify-content:center; font-weight:700; }
  #say-row{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; }
  #say-line{ flex:1; margin:0 2px; min-height:36px; font-family:'Fredoka','Inter',sans-serif; font-size:14px; line-height:1.35; text-align:center; }
  #btn-repeat{ flex:0 0 auto; width:40px; height:40px; border-radius:50%; border:3px solid #686c71; background:#fff; font-size:18px;
    cursor:pointer; -webkit-tap-highlight-color:transparent; }
  @media (prefers-reduced-motion: reduce){ .order.now .ic.to{ animation:none; } }

  /* ---------- close-up camera (side view of a station stop) ---------- */
  #cam{ position:absolute; left:50%; top:67%; z-index:5; width:330px; border-radius:14px; overflow:hidden;
    border:4px solid #686c71; background:#a9dcfa; box-shadow:0 6px 0 #4f5357, 0 10px 20px rgba(0,0,0,.35);
    opacity:0; transform:translate(-50%,-50%) translateY(-8px) scale(.96); transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
  #cam.show{ opacity:1; transform:translate(-50%,-50%); }
  #cam canvas{ display:block; width:100%; aspect-ratio:2/1; }
  #cam .cam-label{ position:absolute; left:8px; top:6px; padding:2px 9px 3px; border-radius:99px;
    background:rgba(20,22,24,.72); color:#fff; font:600 12.5px 'Fredoka',sans-serif; letter-spacing:.02em; }
  #cam .cam-label i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff4a3d; margin-right:6px;
    animation:recBlink 1.2s steps(2) infinite; }
  @keyframes recBlink{ 50%{ opacity:.2; } }
  @media (max-width: 640px){ #cam{ width:200px; border-width:3px; } }

  /* ---------- boarding close-up: the platform and the three coaches ---------- */
  #board{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center;
    padding:8px; background:rgba(30,50,20,.30); }
  #board.hide{ display:none; }
  .board-card{ width:min(720px, 100%); background:#46494d; border:4px solid #d3d6d9; border-radius:20px;
    padding:8px 8px 10px; box-shadow:0 6px 0 #6f7377, 0 14px 30px rgba(0,0,0,.4); user-select:none; -webkit-user-select:none; }
  .plat{ background:linear-gradient(#a9dcfa, #d3effc 60%, #cfc8ba 60%, #b9b1a1); border-radius:12px; padding:6px 6px 0;
    border-bottom:7px solid #f2c14e; position:relative; }
  .plat .station-roof{ position:absolute; left:6px; right:6px; top:0; height:12px; border-radius:12px 12px 0 0;
    background:repeating-linear-gradient(90deg,#c98a4f 0 18px,#b5773f 18px 36px); opacity:.85; }
  .slots{ display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; height:clamp(78px, 15vw, 118px); margin-top:8px; }
  .slot{ display:flex; align-items:flex-end; justify-content:center; min-width:0; }
  .pax{ height:100%; aspect-ratio:60/104; max-width:100%; touch-action:none; cursor:grab; position:relative;
    transition:transform .15s ease, opacity .15s ease; -webkit-tap-highlight-color:transparent; }
  .pax svg{ width:100%; height:100%; display:block; pointer-events:none; }
  .pax .bob{ animation:bob 2.6s ease-in-out infinite; transform-origin:50% 100%; }
  @keyframes bob{ 50%{ transform:translateY(-3px) rotate(1.5deg); } }
  .pax.arrive{ animation:arrive .7s ease-out; }
  @keyframes arrive{ from{ transform:translateX(70px); opacity:0; } }
  .pax.sel{ transform:translateY(-10px) scale(1.08); filter:drop-shadow(0 0 6px #ffe27a) drop-shadow(0 0 3px #ffe27a); }
  .pax.lift{ opacity:.25; }
  .pax.bounce{ animation:paxBounce .55s ease-out; }
  @keyframes paxBounce{ 20%{ transform:translateY(-16px); } 45%{ transform:translateY(0); } 65%{ transform:translateY(-6px); } }
  .trainrow{ display:flex; align-items:flex-end; gap:3px; margin-top:8px; padding:0 2px 8px;
    background:linear-gradient(transparent calc(100% - 8px), #94592a calc(100% - 8px)); }
  .coach{ flex:1 1 0; min-width:0; position:relative; border-radius:12px; touch-action:none; cursor:pointer;
    transition:transform .12s ease; -webkit-tap-highlight-color:transparent; }
  .coach svg{ width:100%; height:auto; display:block; pointer-events:none; }
  .coach.glow{ animation:coachGlow 1s ease-in-out infinite; }
  @keyframes coachGlow{ 50%{ filter:drop-shadow(0 0 9px #ffe27a) drop-shadow(0 0 4px #ffe27a); transform:translateY(-3px); } }
  .coach.hover{ transform:translateY(-6px) scale(1.03); }
  .coach.shake{ animation:shake .45s ease; }
  @keyframes shake{ 25%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } 75%{ transform:translateX(-3px); } }
  .coach.pop{ animation:pop .4s ease; }
  @keyframes pop{ 40%{ transform:scale(1.07); } }
  .engine{ flex:0 0 21%; }
  .engine svg{ width:100%; height:auto; display:block; }
  #ghost{ position:fixed; left:0; top:0; z-index:50; width:72px; height:125px; pointer-events:none; display:none;
    transform:translate(-50%,-62%) scale(1.1); filter:drop-shadow(0 8px 6px rgba(0,0,0,.35)); }
  #ghost svg{ width:100%; height:100%; display:block; }
  @media (prefers-reduced-motion: reduce){ .pax .bob, .coach.glow{ animation:none; } }

  /* ---------- cards over the map ---------- */
  .overlay{ position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center;
    background:rgba(30,50,20,.35); padding:16px; }
  .overlay.hide{ display:none; }
  .overlay .card{ width:min(440px, 100%); background:#46494d; border:4px solid #d3d6d9; border-radius:22px;
    padding:16px 18px 20px; box-shadow:0 6px 0 #6f7377, 0 14px 30px rgba(0,0,0,.4); text-align:center; font-family:'Fredoka',sans-serif;
    max-height:100%; overflow:auto; }
  .overlay h2{ display:table; margin:0 auto 12px; transform:rotate(-1.5deg); background:linear-gradient(#c98a4f,#a86a35);
    color:#fff8e8; font-family:'Fredoka',sans-serif; font-weight:700; font-size:24px; padding:6px 24px 8px;
    border-radius:12px; border:3px solid #6e4320; box-shadow:0 4px 0 #5a3519; text-shadow:0 2px 0 rgba(0,0,0,.25); }
  .overlay .order{ cursor:default; justify-content:center; }
  #intro .advance-btn{ font-family:'Fredoka',sans-serif; font-size:22px; margin-top:18px; }
  #intro .train-pic{ display:block; margin:6px auto 2px; width:100%; max-width:380px; height:auto; }
  .tally{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px; margin:6px auto 4px; max-width:340px; }
  .tally svg{ width:30px; height:30px; display:block; }
  .tally-n{ font-size:20px; margin:4px 0 2px; }
  .choice{ display:flex; gap:12px; margin-top:16px; }
  .choice button{ flex:1; font-family:'Fredoka',sans-serif; font-size:21px; padding:14px 0; border-radius:18px; margin-top:0; }
  .choice .big{ display:block; font-size:38px; line-height:1.1; }
  #finish .choice a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none;
    font-family:'Fredoka',sans-serif; font-size:19px; border-radius:18px; }

  #sim-sidebar #btn-reset.celebrate{ animation:resetPulseOrange 1.1s ease-in-out infinite; }

  @media (max-width: 860px){
    #sim-wrapper{ height:auto; min-height:100vh; }
    body{ overflow:auto; }
    #sim-main{ flex-direction:column; overflow:visible; }
    #sim-sidebar{ width:auto; overflow-y:visible; }
    #sim-canvas-holder{ min-height:62vh; }
  }
  /* phones held upright: size the map to the railroad's own shape; boarding
     needs a little more height so the passengers are big enough to drag */
  @media (max-width: 860px) and (orientation: portrait){
    #sim-canvas-holder{ min-height:0; height:calc(100vw * 0.66); flex:0 0 auto; }
    #sim-canvas-holder.boarding{ height:max(calc(100vw * 0.66), 300px); }
  }