/* A compact family of mechanical icons, with readable action states. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.stage-top { justify-content: flex-end; }
#app #play-panel { --control-blue: #426e98; --control-ink: #314a55; }
#play-panel .little-star { color: #b98258; }
#play-panel svg { stroke-width: 1.8; }
.icon-tint { fill: currentColor; fill-opacity: .12; }
.icon-motion { stroke-width: 1.5; opacity: .65; }
#play-panel .control-art { width: 42px; height: 42px; padding: 6px; border-radius: 12px; }
#play-panel .control-state, #play-panel .spin-state { width: 22px; height: 22px; margin-left: auto; opacity: 1; }

#app #play-panel .play-steps { gap: 0; margin: 6px 0 10px; }
#play-panel .play-steps > span {
  width: 44px; height: 44px; border: 1px solid #e0e5e2;
  background: #f3f5f1; color: #9ca9a8; opacity: 1;
}
#play-panel .play-steps .control-art { width: 32px; height: 32px; padding: 2px; }
#play-panel .play-steps > i { height: 1px; flex: 1; margin: 0 10px; background: #e0e5e2; }
#play-panel .play-steps > span.done { background: #e4efe9; border-color: #c0d7cc; color: #3d7b6c; }
#play-panel .play-steps > span.current { background: #edf3f8; border-color: #9ebbd2; color: #426e98; }

#app #play-panel .big-action {
  width: 100%; min-height: 72px; padding: 12px 14px; gap: 13px;
  border: 1px solid transparent; border-radius: 17px;
  background: var(--control-blue); color: #fff; font-size: 15px;
  box-shadow: 0 3px 0 #284e7114;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
#play-panel .big-action > span { flex: 1; text-align: left; }
#play-panel .big-action .control-art { color: inherit; background: #ffffff1f; }
#app #play-panel .big-action[aria-pressed=true] { background: #2e557b; border-color: #284d6c; }
#app #play-panel .big-action:disabled {
  opacity: 1; background: #f0f2ef; border-color: #e1e5df;
  color: #798783; box-shadow: none;
}
#play-panel .big-action:disabled .control-art { background: #e7ece6; color: #8b9991; }
#play-panel .big-action:disabled .control-state, #play-panel .big-action:disabled .spin-state { opacity: .72; }
#app #play-panel #feet { background: #e8f1ec; border-color: #c8dacf; color: #315f54; box-shadow: none; }
#play-panel #feet .control-art { background: #d9e9df; color: #327663; }
#app #play-panel #feet[aria-pressed=true] { background: #d9eae1; border-color: #a6cbb7; color: #295f4d; }
#app #play-panel #feet:disabled { border-color: #c1d7cb; color: #527266; }
#play-panel #feet:disabled .control-art { background: #d4e3d9; color: #52796a; }

#app #play-panel .machine-slider {
  --slider-accent: #426e98;
  display: grid; grid-template-columns: 42px 1fr;
  gap: 5px 10px; padding: 12px 14px; border: 1px solid #d8e1e6;
  border-radius: 17px; background: #f3f6f8; color: #375a72;
  font-size: 14px; font-weight: 700;
}
#play-panel .machine-slider .control-art { width: 38px; height: 38px; padding: 5px; background: #e2ebf2; color: #426e98; }
#app #play-panel .machine-slider[data-control=depth] {
  --slider-accent: #ad704d;
  border-color: #e4d5c7; background: #f6f0e9; color: #75543d;
}
#play-panel .machine-slider[data-control=depth] .control-art { background: #eee0d1; color: #9e6945; }
#play-panel .control-lock { width: 18px; height: 18px; justify-self: end; visibility: hidden; }
#app #play-panel .machine-slider:has(input:disabled) { background: #f2f3ef; border-color: #e1e5dd; color: #79877f; }
#play-panel .machine-slider:has(input:disabled) .control-art { background: #e8ece5; color: #8a998e; }
#play-panel .machine-slider:has(input:disabled) .control-lock { visibility: visible; color: #929f96; }
#play-panel .machine-slider input { grid-column: 1/-1; width: 100%; height: 32px; min-width: 0; opacity: 1; }
#play-panel input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(to right, var(--slider-accent) var(--level,0%), #dce3e5 var(--level,0%));
}
#play-panel input[type=range]::-moz-range-track {
  height: 6px; border-radius: 4px;
  background: linear-gradient(to right, var(--slider-accent) var(--level,0%), #dce3e5 var(--level,0%));
}
#play-panel input[type=range]::-webkit-slider-thumb { width: 25px; height: 25px; margin-top: -9.5px; background: var(--slider-accent); border: 4px solid #fffdf9; box-shadow: 0 1px 4px #30465430; }
#play-panel input[type=range]::-moz-range-thumb { width: 17px; height: 17px; background: var(--slider-accent); border: 4px solid #fffdf9; box-shadow: 0 1px 4px #30465430; }
#play-panel input:disabled::-webkit-slider-runnable-track { background: #dce2d9; }
#play-panel input:disabled::-moz-range-track { background: #dce2d9; }
#play-panel input:disabled::-webkit-slider-thumb { background: #a6b4a9; box-shadow: none; }
#play-panel input:disabled::-moz-range-thumb { background: #a6b4a9; box-shadow: none; }

#app #play-panel #play-reset {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 46px; margin-top: auto;
  border: 1px solid #dbe1dc; border-radius: 14px;
  background: #f7f8f3; color: #657c72; font-size: 13px; font-weight: 600;
}
#play-panel #play-reset .control-art { width: 21px; height: 21px; padding: 0; }
@media(max-width:1100px) {
  #app #play-panel .big-action { min-height: 64px; padding: 9px 11px; gap: 10px; }
  #app #play-panel .machine-slider { padding: 8px 11px; grid-template-columns: 34px 1fr; gap: 2px 8px; }
  #play-panel .machine-slider .control-art { width: 32px; height: 32px; padding: 3px; }
  #app #play-panel .play-steps { margin: 2px 0 5px; }
  #play-panel .play-steps > span { width: 40px; height: 40px; }
}
@media(prefers-reduced-motion:reduce) { #app #play-panel .big-action { transition: none; } }

/* Solid miniature mechanisms: broad silhouettes and restrained material colors. */
.ground-choices { display: flex; gap: 8px; flex-shrink: 0; }
.ground-choices button { position: relative; flex: 1; height: 63px; padding: 6px; border-radius: 12px; background: #f3f1e8; border: 1px solid transparent; }
.ground-choices button>svg:first-child { width: 100%; height: 100%; }
.ground-choices button[aria-pressed=true] { border-color: #799884; background: #e8eee2; }
.ground-choices button:disabled { opacity: .55; }
.ground-choices .found-mark { position: absolute; width: 20px; height: 20px; right: -3px; top: -5px; display: none; }
.ground-choices .collected .found-mark { display: block; }
.ground-choices .discovered { box-shadow: inset 0 -3px #d6ab52; }
#app #play-panel .machine-slider.retrieving { border-color: #b8cdb8; background: #eaf1e5; --slider-accent: #60836d; }
#app #play-panel #cargo.on-target { background: #477961; border-color: #46755e; }
@media(max-height:850px) and (min-width:761px) {
  #app #play-panel { gap: 10px; padding-top: 23px; padding-bottom: 23px; }
  #app #play-panel h1 { font-size: 27px; line-height: 1.45; margin: 0; }
  #app #play-panel .ground-choices button { height: 54px; }
  #app #play-panel .big-action { min-height: 58px; }
  #app[data-vehicle=crane] #play-panel { gap: 9px; }
  #app[data-vehicle=crane] #play-title br { display: none; }
  #app[data-vehicle=crane] #play-panel .machine-slider { padding: 6px 10px; row-gap: 0; }
  #app[data-vehicle=crane] #play-panel .machine-slider input { height: 28px; }
}
#app #play-panel .control-art:not(#play-reset .control-art) { padding: 2px; border-radius: 0; background: transparent; }
#app #play-panel .big-action .control-art { width: 42px; height: 42px; }
#app #play-panel .big-action:not(#feet):not(:disabled) .control-art { background: #fff4da; border-radius: 10px; padding: 4px; }
#app #play-panel .machine-slider .control-art { width: 36px; height: 36px; padding: 1px; }
#app #play-panel .play-steps .control-art { width: 30px; height: 30px; padding: 1px; }
#app #play-panel .play-steps > span { border: 0; background: #f0f1e8; }
#app #play-panel .play-steps > span.current { background: #f4e6bd; }
#app #play-panel .play-steps > span.done { background: #dce9df; }
#app #play-panel .big-action:disabled .control-art,
#app #play-panel .machine-slider:has(input:disabled) .control-art,
#app #play-panel .play-steps > span:not(.done):not(.current) .control-art { filter: saturate(.3); opacity: .72; }