/* (2026-10-08) all panel blues swapped for "Soft Pewter" greys:
   sidebar #b9bcc0->#a1a5aa, panel #46494d, cards #3b3e42, borders #686c71. */
/* =====================================================================
   Playful side-panel theme (2026-10-02, "can the buttons in the panel be
   more playful?") -- shared by index.html, my-train-set-build-your-own.html
   and The-Original.html (the Expert Train Builder).
   Loaded AFTER each page's own <style>, so it only restyles; no behavior
   lives here. What it does:
     * chunky toy buttons that press down (and bounce -- see the small
       pointerdown script in each page), one color per kind of job:
         yellow = track pieces, green = go on, pink = undo/remove,
         blue = save/cancel, purple = go to another page, red = start over
     * the rounded Fredoka font for labels and headings
     * section headings as little wooden station signs
     * on/off switches as railroad signal lights (green = on, red = off)
   The throttle, the corner view thumbnail and the hint text are unchanged.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

#sim-sidebar{
  background:linear-gradient(#b9bcc0, #a1a5aa 45%);
  font-family:'Fredoka', 'Inter', sans-serif;
}
#sim-sidebar .panel{
  background:#46494d; border:3px solid #686c71; border-radius:18px; padding:14px 14px 16px;
}
#sim-sidebar .hint{ font-family:'Inter', sans-serif; font-size:12.5px; opacity:.9; text-align:center; }

/* ---------- wooden station-sign headings ---------- */
#sim-sidebar .panel h2{
  display:table; margin:2px auto 12px; position:relative; transform:rotate(-1.5deg);
  background:linear-gradient(#c98a4f,#a86a35); color:#fff8e8;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:16px; text-transform:none; letter-spacing:.02em;
  padding:6px 20px 7px; border-radius:10px; border:3px solid #6e4320; white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.25); box-shadow:0 4px 0 #5a3519;
}
#sim-sidebar .panel h2::before, #sim-sidebar .panel h2::after{
  content:''; position:absolute; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:#5a3519; box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
#sim-sidebar .panel h2::before{ left:7px; }
#sim-sidebar .panel h2::after{ right:7px; }

/* ---------- "← Back" links: small friendly pills ---------- */
#sim-sidebar .back-link{
  display:inline-block; font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; opacity:1;
  color:#cfe8ff; background:rgba(143,211,255,.12); border:2px solid rgba(143,211,255,.35);
  border-radius:99px; padding:4px 12px; margin:0 0 10px;
}
#sim-sidebar .back-link:active{ transform:scale(.95); background:rgba(143,211,255,.25); }

/* ---------- chunky toy buttons ---------- */
.piece-btn, .sim-action-btn, .advance-btn, a.row-btn, button.row-btn{
  --c1:#8fd3ff; --c2:#3a9be0; --edge:#1f6aa6; --ink:#062b4a;
  position:relative; font-family:'Fredoka', sans-serif; font-weight:600; color:var(--ink);
  background:linear-gradient(var(--c1), var(--c2)); border:3px solid var(--edge); border-radius:16px;
  box-shadow:0 6px 0 var(--edge), 0 9px 14px rgba(0,0,0,.35);
  transition:transform .07s ease, box-shadow .07s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent;
}
/* the little shine stripe along the top edge */
.piece-btn::before, .sim-action-btn::before, .advance-btn::before, a.row-btn::before, button.row-btn::before{
  content:''; position:absolute; left:8px; right:8px; top:3px; height:7px; border-radius:99px;
  background:rgba(255,255,255,.45); pointer-events:none;
}
.piece-btn:active, .sim-action-btn:active, .advance-btn:active, a.row-btn:active, button.row-btn:active{
  transform:translateY(5px); box-shadow:0 1px 0 var(--edge), 0 3px 6px rgba(0,0,0,.35); background:linear-gradient(var(--c1), var(--c2));
}
.toy-boing{ animation:toyBoing .38s ease; }
@keyframes toyBoing{
  0%{ transform:scale(1); } 30%{ transform:scale(.92,.86); } 60%{ transform:scale(1.05,1.04); } 100%{ transform:scale(1); }
}

/* colors by job */
.piece-btn{ --c1:#ffe27a; --c2:#f7bb1c; --edge:#b07d00; --ink:#4a3300; }
.advance-btn{ --c1:#86e08f; --c2:#3fae4f; --edge:#26763a; --ink:#0d2a13; }
#btn-undo-piece, #btn-undo-decor{ --c1:#ffc3cf; --c2:#f28aa0; --edge:#b5536a; --ink:#4a0f1e; }
#btn-save-design, #btn-save-cancel{ --c1:#8fd3ff; --c2:#3a9be0; --edge:#1f6aa6; --ink:#062b4a; }
#btn-save-confirm{ --c1:#86e08f; --c2:#3fae4f; --edge:#26763a; --ink:#0d2a13; }
a.row-btn, button.row-btn{ --c1:#d4b0ff; --c2:#9b6be6; --edge:#6a3fb0; --ink:#25104a; }
.reset-btn-danger{ --c1:#ff9a8c; --c2:#e0473a; --edge:#8a251c; --ink:#3a0e08; }

/* sizes */
.piece-row{ gap:9px; margin-top:16px; }
.piece-btn{ gap:2px; padding:10px 2px 8px; font-size:13px; line-height:1.1; text-align:center; }
.piece-btn svg{ width:46px; height:46px; }
.piece-btn:disabled{ opacity:.4; box-shadow:0 2px 0 var(--edge); }
.sim-action-btn{ padding:11px 0; margin-top:14px; font-size:16px; }
.sim-action-btn.reset-btn-danger{ font-size:18px; padding:13px 0; }
.advance-btn{ font-size:19px; border-radius:18px; }
.advance-btn:disabled{ opacity:.4; box-shadow:0 2px 0 var(--edge); transform:none; }
.modal-actions .sim-action-btn{ margin-top:0; }
.modal-card h3{ font-family:'Fredoka', sans-serif; font-size:18px; }

/* link rows (Expert Train Builder, questions/comments) become purple buttons */
#sim-sidebar a.row-btn, #sim-sidebar button.row-btn{
  justify-content:center; width:100%; cursor:pointer; padding:10px 12px; margin-top:14px; font-size:15px; text-align:center;
}
#sim-sidebar a.row-btn:active, #sim-sidebar button.row-btn:active{ background:linear-gradient(var(--c1), var(--c2)); }
#sim-sidebar .row-btn .row-link-arrow{ opacity:1; font-weight:700; }

/* ---------- on/off rows with signal lights ---------- */
#sim-sidebar div.row-btn{
  background:#3b3e42; border:3px solid #686c71; border-radius:14px; padding:8px 10px 8px 14px; margin-top:10px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px;
  -webkit-tap-highlight-color:transparent; transition:transform .07s ease;
}
#sim-sidebar div.row-btn:active{ transform:scale(.97); background:#3b3e42; }
/* The switch's housing: a little black signal head with a red lamp on top
   and a green lamp below. Same element and same .on class as before, so the
   game's code that flips it didn't have to change. */
.switch-toggle{
  width:26px; height:46px; border-radius:11px; background:#1a1a1a; border:2px solid #000;
  position:relative; flex:0 0 auto; margin-left:34px; transition:none;
}
.switch-toggle::before{
  /* both lamps, painted as two circles */
  content:''; position:absolute; left:4px; top:4px; width:14px; height:34px; border-radius:7px;
  background:
    radial-gradient(circle at 7px 7px, #ff5a4a 0 6.5px, transparent 7px),
    radial-gradient(circle at 7px 27px, #1f4a25 0 6.5px, transparent 7px);
  filter:drop-shadow(0 0 5px rgba(255,90,74,.85));
}
.switch-toggle.on::before{
  background:
    radial-gradient(circle at 7px 7px, #4a1f1b 0 6.5px, transparent 7px),
    radial-gradient(circle at 7px 27px, #7dff6a 0 6.5px, transparent 7px);
  filter:drop-shadow(0 0 5px rgba(125,255,106,.85));
}
.switch-toggle::after{
  /* the ON / OFF word beside the signal (overrides the old slider knob) */
  content:'OFF'; position:absolute; right:32px; top:50%; left:auto; width:auto; height:auto;
  transform:translateY(-50%); background:none; box-shadow:none; border-radius:0;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:12px; color:#F6F3EC; opacity:.85; transition:none;
}
.switch-toggle.on::after{ content:'ON'; left:auto; }
.switch-toggle.on{ background:#1a1a1a; }

/* ---------- picker cards (tracks, engines, cars, scenery) ---------- */
.layout-card, .model-card, .swatch{
  border-width:3px; border-radius:16px; background:#3b3e42;
  box-shadow:0 4px 0 rgba(0,0,0,.35); font-family:'Fredoka', sans-serif;
  transition:transform .08s ease, box-shadow .08s ease;
}
.layout-card{ font-weight:600; font-size:13px; }
.model-card .model-label{ font-family:'Fredoka', sans-serif; font-size:12px; opacity:1; }
.layout-card:active, .model-card:active, .swatch:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.model-card.picked, .swatch.picked{ border-color:#7dff6a; box-shadow:0 4px 0 #26763a, 0 0 0 3px rgba(125,255,106,.35); }
.swatch-label{ font-family:'Fredoka', sans-serif; font-size:11px; opacity:.9; }

/* ---------- counters ---------- */
.decor-counter{ font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; opacity:.9; }
/* track-piece meter (built by updateBuildUI in the build-your-own page) */
.piece-counter{ display:flex; align-items:center; gap:8px; margin:14px 0 4px; text-align:left;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:13px; opacity:1; }
.piece-counter .meter{ flex:1; height:12px; border-radius:99px; background:#2a2c2f; border:2px solid #686c71; overflow:hidden; }
.piece-counter .meter i{ display:block; height:100%; border-radius:99px; transition:width .25s ease;
  background:repeating-linear-gradient(90deg,#ffd65a 0 8px,#f4b400 8px 16px); }
.piece-counter.full .meter i{ background:repeating-linear-gradient(90deg,#ff9a8c 0 8px,#e0473a 8px 16px); }

/* Expert Train Builder: its big green "Play Again" keeps its own chunky
   green look (and its end-of-shift pulse); it just gets the rounder font. */
#sim-sidebar #reset-btn{ font-family:'Fredoka', sans-serif; font-weight:700; font-size:19px; letter-spacing:.01em; }
#sim-sidebar #timer-display{ font-family:'Fredoka', sans-serif; }
/* its yard panels sit inside one wrapper, so the sidebar's own gap doesn't reach them */
#panel-yard > .panel + .panel{ margin-top:14px; }

@media (prefers-reduced-motion: reduce){ .toy-boing{ animation:none; } }

/* =====================================================================
   Settings gear (2026-10-02, "a gear widget on every page with Sounds,
   Talking help and Have questions") -- a round gear button at the right
   end of the top bar that opens a small pop-down menu. The Sounds and
   Talking-help rows keep their old ids (#sound-toggle-row etc.), so each
   page's existing code that flips them didn't have to change; they simply
   moved out of the side panel and into this menu. Open/close behavior
   lives in settings-gear.js.
   ===================================================================== */
#settings-gear{ position:relative; margin-left:auto; flex:0 0 auto; z-index:60; }
#settings-gear-btn{
  width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(#d4b0ff, #9b6be6); border:3px solid #6a3fb0; color:#25104a;
  box-shadow:0 4px 0 #6a3fb0, 0 6px 10px rgba(0,0,0,.35);
  transition:transform .07s ease, box-shadow .07s ease; -webkit-tap-highlight-color:transparent;
}
#settings-gear-btn svg{ width:26px; height:26px; transition:transform .35s ease; }
#settings-gear-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #6a3fb0, 0 2px 4px rgba(0,0,0,.35); }
#settings-gear.open #settings-gear-btn svg{ transform:rotate(90deg); }
#settings-gear-btn:focus-visible{ outline:3px solid #ffe27a; outline-offset:2px; }

#settings-menu{
  display:none; position:absolute; right:0; top:calc(100% + 12px); width:270px; max-width:calc(100vw - 24px);
  background:linear-gradient(#46494d, #3b3e42); border:3px solid #686c71; border-radius:18px;
  padding:6px 12px 14px; box-shadow:0 12px 28px rgba(0,0,0,.5); font-family:'Fredoka', 'Inter', sans-serif;
}
#settings-gear.open #settings-menu{ display:block; animation:gearMenuPop .16s ease-out; }
@keyframes gearMenuPop{ from{ opacity:0; transform:translateY(-6px) scale(.97); } to{ opacity:1; transform:none; } }
#settings-menu::before{
  /* little pointer up to the gear */
  content:''; position:absolute; right:13px; top:-11px; width:16px; height:16px; transform:rotate(45deg);
  background:#46494d; border-left:3px solid #686c71; border-top:3px solid #686c71;
}
#settings-menu div.row-btn{
  background:#3b3e42; border:3px solid #686c71; border-radius:14px; padding:8px 10px 8px 14px; margin-top:10px;
  font-family:'Fredoka', sans-serif; font-weight:600; font-size:15px; color:#F6F3EC;
  -webkit-tap-highlight-color:transparent; transition:transform .07s ease; user-select:none;
}
#settings-menu div.row-btn:active{ transform:scale(.97); background:#3b3e42; }
#settings-menu a.row-btn{
  justify-content:center; width:100%; cursor:pointer; padding:10px 12px; margin-top:14px; font-size:15px; text-align:center;
}
#settings-menu a.row-btn:active{ background:linear-gradient(var(--c1), var(--c2)); }
#settings-menu .row-btn .row-link-arrow{ opacity:1; font-weight:700; }
@media (prefers-reduced-motion: reduce){
  #settings-gear-btn svg{ transition:none; }
  #settings-gear.open #settings-menu{ animation:none; }
}

/* =====================================================================
   Sunny sky look (2026-10-03, "render an improvement on the dark blue
   background" -> "let's go with the light blue background") -- replaces
   the dark navy around the game on all three pages:
     * top bar: sky-blue gradient (clouds removed 2026-10-03), a wooden edge
       along the bottom, and the title in dark navy so it stays readable
     * side panel: bright sky blue (polka dots removed 2026-10-03); the menu
       cards stay deep blue (so all their text keeps its contrast) and get
       a light-blue outline and a chunky shadow
     * any gap around the play area is grass green instead of navy stripes
   ===================================================================== */
#sim-topbar{
  background:linear-gradient(#69bff3, #a9dcfa);
  border-bottom:4px solid #b9793f; box-shadow:0 3px 0 #8a5528;
  position:relative; z-index:5;  /* keeps the wooden edge's shadow above the play area */
}
#sim-topbar .title{
  color:#0B3654; font-family:'Fredoka','Oswald',sans-serif; font-weight:700; font-size:19px;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
#sim-topbar .title .sub{
  color:#0B3654; opacity:.8; font-family:'Fredoka','Inter',sans-serif; font-weight:500; font-size:13px; text-shadow:none;
}
body, #sim-canvas-holder{ background:#c8e5a7; }

#sim-sidebar{
  background:linear-gradient(#b9bcc0, #a1a5aa);
  background-attachment:local;
  border-left:4px solid #868a8f;
}
#sim-sidebar .panel{ background:#46494d; border-color:#d3d6d9; box-shadow:0 5px 0 #6f7377, 0 8px 14px rgba(0,0,0,.25); }
/* phones/narrow screens: the side panel drops below the map, so its edge is on top */
@media (max-width: 860px){
  #sim-sidebar{ border-left:none; border-top:4px solid #868a8f; }
}

/* =====================================================================
   One button color (2026-10-03, "make all the buttons -- except the red
   and green arrows -- the color of the Expert Train Builder button").
   Every toy button now uses the same purple as the page links, set
   through the same --c1/--c2/--edge/--ink variables, so the chunky
   press-down look is unchanged. Only the throttle's red (slower/reverse)
   and green (faster/forward) arrows keep their own colors.
   ===================================================================== */
.piece-btn, .sim-action-btn, .advance-btn, a.row-btn, button.row-btn,
#btn-undo-piece, #btn-undo-decor, #btn-save-design, #btn-save-cancel, #btn-save-confirm,
.reset-btn-danger{
  --c1:#d4b0ff; --c2:#9b6be6; --edge:#6a3fb0; --ink:#25104a;
}

/* Expert Train Builder's big "Play Again" has its own green styling */
#sim-sidebar #reset-btn{
  color:#25104a; background:linear-gradient(#d4b0ff, #9b6be6);
  border:3px solid #6a3fb0; box-shadow:0 5px 0 #6a3fb0, 0 7px 14px rgba(0,0,0,.35);
}
#sim-sidebar #reset-btn:active{ box-shadow:0 1px 0 #6a3fb0, 0 3px 8px rgba(0,0,0,.35); }
#sim-sidebar #reset-btn.celebrate{ animation:resetPulsePurple 1.1s ease-in-out infinite; }
@keyframes resetPulsePurple{
  0%,100%{ transform:scale(1);    box-shadow:0 5px 0 #6a3fb0, 0 7px 14px rgba(0,0,0,.35); }
  50%    { transform:scale(1.05); box-shadow:0 5px 0 #6a3fb0, 0 0 0 7px rgba(212,176,255,.45), 0 7px 18px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce){
  #sim-sidebar #reset-btn.celebrate{ animation:none; outline:4px solid rgba(212,176,255,.7); outline-offset:3px; }
}

/* Expert Train Builder's "Uncouple" button that pops up on the map */
#sim-uncouple-btn{
  color:#25104a; background:linear-gradient(#d4b0ff, #9b6be6); border:3px solid #6a3fb0;
  font-family:'Fredoka', sans-serif; font-weight:700; font-size:14px;
  box-shadow:0 4px 0 #6a3fb0, 0 6px 12px rgba(0,0,0,.35);
}

/* "← Back" links: small purple pills to match */
#sim-sidebar .back-link{
  color:#25104a; background:linear-gradient(#d4b0ff, #9b6be6); border:2px solid #6a3fb0;
  box-shadow:0 3px 0 #6a3fb0;
}
#sim-sidebar .back-link:active{ background:linear-gradient(#d4b0ff, #9b6be6); box-shadow:0 1px 0 #6a3fb0; transform:translateY(2px); }

/* =====================================================================
   Colour by job (2026-10-08). Replaces the all-purple look above so the
   voice can say "click the green button" to kids who can't read yet.
   Every button visible on the same screen has its own colour name.
     green  = go on to the next step       yellow = go back a step
     pink   = erase / take away            orange = start over / play again
     blue   = save, and Uncouple           purple = switch to the other game
     brown  = track pieces (wood)          white  = cancel / grown-up links
     gray   = settings gear
   The throttle's red / green arrows are unchanged.
   ===================================================================== */
.advance-btn                          { --c1:#86e08f; --c2:#3fae4f; --edge:#26763a; --ink:#0d2a13; }   /* green  */
.piece-btn                            { --c1:#f3dcbc; --c2:#d9ab76; --edge:#8a5a2b; --ink:#2e1a08; }   /* brown (light wood) */
#btn-undo-piece, #btn-undo-decor      { --c1:#ffc3cf; --c2:#f28aa0; --edge:#b5536a; --ink:#4a0f1e; }   /* pink   */
.sim-action-btn.reset-btn-danger      { --c1:#ffc27a; --c2:#f5891f; --edge:#a8540a; --ink:#3d1d00; }   /* orange */
#btn-save-design, #btn-save-confirm   { --c1:#8fd3ff; --c2:#3a9be0; --edge:#1f6aa6; --ink:#062b4a; }   /* blue   */
#btn-save-cancel, a.row-btn#btn-feedback-link
                                      { --c1:#ffffff; --c2:#e2e5e8; --edge:#9aa0a6; --ink:#2b2f33; }   /* white  */
a.row-btn#btn-expert-link, a.row-btn#btn-back-home
                                      { --c1:#d4b0ff; --c2:#9b6be6; --edge:#6a3fb0; --ink:#25104a; }   /* purple */
button.row-btn#btn-change-train       { --c1:#ffe27a; --c2:#f7bb1c; --edge:#b07d00; --ink:#4a3300; }   /* yellow */

/* Build Your Own's eraser + "Start a New Track" had page-level colours too */
.sim-action-btn.reset-btn-danger, .advance-btn, .piece-btn{
  background:linear-gradient(var(--c1), var(--c2)); border-color:var(--edge); color:var(--ink);
  box-shadow:0 6px 0 var(--edge), 0 9px 14px rgba(0,0,0,.35);
}
.advance-btn:active, .sim-action-btn.reset-btn-danger:active, .piece-btn:active{
  box-shadow:0 1px 0 var(--edge), 0 3px 6px rgba(0,0,0,.35);
}
.advance-btn:disabled, .piece-btn:disabled{ box-shadow:0 2px 0 var(--edge); }

/* Expert "Play Again": orange, with an orange celebration pulse */
#sim-sidebar #reset-btn{
  color:#3d1d00; background:linear-gradient(#ffc27a, #f5891f);
  border:3px solid #a8540a; box-shadow:0 5px 0 #a8540a, 0 7px 14px rgba(0,0,0,.35);
}
#sim-sidebar #reset-btn:active{ box-shadow:0 1px 0 #a8540a, 0 3px 8px rgba(0,0,0,.35); }
#sim-sidebar #reset-btn.celebrate{ animation:resetPulseOrange 1.1s ease-in-out infinite; }
@keyframes resetPulseOrange{
  0%,100%{ transform:scale(1);    box-shadow:0 5px 0 #a8540a, 0 7px 14px rgba(0,0,0,.35); }
  50%    { transform:scale(1.05); box-shadow:0 5px 0 #a8540a, 0 0 0 7px rgba(255,194,122,.5), 0 7px 18px rgba(0,0,0,.45); }
}
@media (prefers-reduced-motion: reduce){
  #sim-sidebar #reset-btn.celebrate{ animation:none; outline:4px solid rgba(255,194,122,.75); outline-offset:3px; }
}

/* Expert "Uncouple" on the map: blue */
#sim-uncouple-btn{
  color:#062b4a; background:linear-gradient(#8fd3ff, #3a9be0); border:3px solid #1f6aa6;
  box-shadow:0 4px 0 #1f6aa6, 0 6px 12px rgba(0,0,0,.35);
}

/* "← Back" pills: yellow */
#sim-sidebar .back-link{
  color:#4a3300; background:linear-gradient(#ffe27a, #f7bb1c); border:2px solid #b07d00;
  box-shadow:0 3px 0 #b07d00; opacity:1;
}
#sim-sidebar .back-link:active{ background:linear-gradient(#ffe27a, #f7bb1c); box-shadow:0 1px 0 #b07d00; transform:translateY(2px); }

/* Settings gear: metal gray */
#settings-gear-btn{
  color:#1f2327; background:linear-gradient(#c9cdd2, #8f959c); border-color:#5d6268;
  box-shadow:0 4px 0 #5d6268, 0 6px 10px rgba(0,0,0,.35);
}
#settings-gear-btn:active{ box-shadow:0 1px 0 #5d6268, 0 2px 4px rgba(0,0,0,.35); }