/* Toolbar 2026-10-13
 * One sweet little countryside tray, not five unrelated glyphs separated by
 * pipes. All existing station action IDs/handlers remain in place.
 * Expanded-counter HUD: x=610..1242, safely between mood (ends x=577) and
 * clock (begins x=1255) in the 1536px game coordinate system.
 */
#game .bottom-bar .tools .tool-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
#game .bottom-bar .tools button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#game.expanded .bottom-bar {
  left: 610px;
  right: auto;
  top: 7px;
  bottom: auto;
  width: 632px;
  height: 54px;
  padding: 0 16px;
  border: 2px solid #9d6739;
  border-radius: 22px;
  background: linear-gradient(180deg,#fff4dc 0%,#f4dfba 56%,#eed0a0 100%);
  color: #603c25;
  box-shadow: 0 3px 0 #81502b, 0 6px 12px #42281724,
    inset 0 2px 0 #fffdf0, inset 0 -2px 0 #d8aa78;
  z-index: 21;
}
/* Two tiny wooden pegs dress the shared tray without becoming fake buttons. */
#game.expanded .bottom-bar::before,
#game.expanded .bottom-bar::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 22px;
  background: #bd8b59;
  box-shadow: inset 0 1px 1px #71462565,0 1px 0 #ffefc6;
  pointer-events: none;
}
#game.expanded .bottom-bar::before { left: 7px; }
#game.expanded .bottom-bar::after { right: 7px; }

#game.expanded .bottom-bar .tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  gap: 10px;
}
#game.expanded .bottom-bar .tool-status { width: 187px; flex: none; }
#game.expanded .bottom-bar .tool-demo { width: 210px; flex: none; }
#game.expanded .bottom-bar .tool-actions {
  width: 169px;
  flex: none;
  gap: 7px;
  justify-content: space-between;
}
#game.expanded .bottom-bar .tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: none;
  min-height: 40px;
  padding: 0 12px;
  margin: 0;
  border: 1.5px solid #af8152;
  border-radius: 14px;
  color: #623f26;
  background: linear-gradient(#fff9e9,#f8e6c7);
  font-family: var(--font-body),Patrick,'Segoe UI',sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-shadow: 0 1px 0 #fff8e8;
  box-shadow: inset 0 1px 0 #fffdf2,0 2px 0 #b78a59a8;
  transition: background .14s,box-shadow .14s,transform .12s;
}
/* No old vertical separators. The three distinct material finishes do the
 * grouping, so removing the pipes does not make the row harder to scan. */
#game.expanded .bottom-bar .tools #upgrade::after,
#game.expanded .bottom-bar .tools #sound::after {
  content: none;
  display: none;
}
#game.expanded .bottom-bar .tools button:hover,
#game.expanded .bottom-bar .tools button:focus-visible {
  filter: none;
  background: linear-gradient(#fffef2,#f4dfb7);
  box-shadow: inset 0 1px 0 #ffffff,0 2px 0 #a97847,0 0 0 2px #fff2c878;
}
#game.expanded .bottom-bar .tools button:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 2px #5b381c30;
}
#game.expanded .bottom-bar .tools #upgrade {
  width: 187px;
  padding-inline: 5px;
  font-size: 16px;
  border-color: #92a077;
  border-radius: 12px;
  color: #4f5e39;
  background: linear-gradient(#f4f6dc,#e0e9bb);
  box-shadow: inset 0 1px 0 #ffffed,0 2px 0 #9caa74;
}
#game.expanded .bottom-bar .tools #upgrade:hover {
  background: linear-gradient(#fbfbe7,#e9efca);
}
#game.expanded .bottom-bar .tools #demo {
  width: 210px;
  gap: 8px;
  font-size: 18px;
  border-color: #965128;
  color: #fff9e5;
  background: linear-gradient(#bb783f,#9a562b);
  border-radius: 13px;
  text-shadow: 0 1px 1px #643316;
  box-shadow: inset 0 1px 0 #e6b877,0 2px 0 #673c24;
}
#game.expanded .bottom-bar .tools #demo span:first-child {
  font-family: 'Segoe UI Symbol',sans-serif;
  font-size: 21px;
  line-height: 1.15;
}
#game.expanded .bottom-bar .tools #demo:hover,
#game.expanded .bottom-bar .tools #demo:focus-visible {
  color: #fffef0;
  background: linear-gradient(#ca8a4e,#a86737);
  box-shadow: inset 0 1px 0 #f3c58c,0 2px 0 #673c24,0 0 0 2px #f9d8986b;
}
#game.expanded .bottom-bar .tools #demo.running {
  color: #fff7d3;
  background: linear-gradient(#9a6641,#794528);
}
#game.expanded .bottom-bar .tools #sound,
#game.expanded .bottom-bar .tools #help,
#game.expanded .bottom-bar .tools #fullscreen {
  display: grid;
  place-items: center;
  width: 49px;
  height: 40px;
  min-width: 49px;
  min-height: 40px;
  padding: 0;
  border: 1.5px solid #b48b64;
  border-radius: 13px;
  background: linear-gradient(#fff9e9,#efdbb8);
  color: #775034;
  font-size: 24px;
  line-height: 1.15;
}
#game.expanded .bottom-bar .tools #sound span { display: none; }
#game.expanded .bottom-bar .tools #sound[aria-pressed="true"] {
  color: #536735;
  background: linear-gradient(#ecf2d8,#dce6b4);
  border-color: #99a577;
}
#game.expanded .bottom-bar .tools #help {
  font-size: 21px;
  font-weight: 800;
}
#game.expanded .bottom-bar .tools #fullscreen { font-size: 25px; }

/* The modest first counter keeps the original footer placement, but its
 * controls use the same simple grouping instead of old pipe typography. */
#game:not(.expanded) .bottom-bar .tools { gap: 10px; }
#game:not(.expanded) .bottom-bar .tool-actions { gap: 7px; }
#game:not(.expanded) .bottom-bar .tools #upgrade { color: #e9edbb; }
#game:not(.expanded) .bottom-bar .tools #demo { color: #ffe6b0; }

/* The browser may be only 844×390 while the game stays 1536px wide.
 * Increase the hit area IN the stage coordinates; keep all within the HUD
 * and never let the toolbar block the customer's order beneath it. */
@media (pointer: coarse) {
  #game.expanded .bottom-bar {
    top: 2px;
    height: 70px;
  }
  #game.expanded .bottom-bar .tools button { min-height: 58px; }
  #game.expanded .bottom-bar .tools #sound,
  #game.expanded .bottom-bar .tools #help,
  #game.expanded .bottom-bar .tools #fullscreen { height: 58px; min-height: 58px; }
  #game.expanded .bottom-bar::before,
  #game.expanded .bottom-bar::after { top: 30px; }
}