/* Harvest Hero 3D (shared: sim3d.css + tycoon-kit.css + car-kit.css for the touch pedals) */
.hh-setup { display: grid; gap: 10px; }
.hh-h { margin: 4px 0 0; font-size: 18px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.hh-h small { font-size: 14px; opacity: .85; }
.hh-h3 { margin: 6px 0 0; font-size: 16px; }
.hh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.hh-job { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: inherit; font: 800 14px system-ui, sans-serif; cursor: pointer; min-height: 60px; }
.hh-job i { grid-row: span 2; font-style: normal; font-size: 22px; text-align: center; }
.hh-job small { font-weight: 600; opacity: .8; font-size: 12px; }
.hh-job:hover:not(:disabled) { border-color: #facc15; }
.hh-job:focus-visible, .hh-buy:focus-visible, .hh-col:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.hh-job.is-locked { opacity: .45; cursor: not-allowed; }
.hh-shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hh-buy { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(34, 197, 94, .14); color: inherit; font: 800 13px system-ui, sans-serif; cursor: pointer; }
.hh-buy span { display: flex; flex-direction: column; } .hh-buy small { font-weight: 600; opacity: .75; }
.hh-buy b { color: #fde047; } .hh-buy:disabled { opacity: .55; cursor: default; }
.hh-cols { display: flex; gap: 6px; flex-wrap: wrap; }
.hh-col { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: inherit; font: 700 13px system-ui, sans-serif; cursor: pointer; }
.hh-col i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.hh-col.is-on { border-color: #facc15; } .hh-col:disabled { opacity: .5; cursor: not-allowed; }

.hh-tank { position: absolute; left: 10px; top: 52px; width: 170px; background: rgba(8, 16, 28, .74); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: 5px 8px; color: #fff; font: 800 12px system-ui, sans-serif; pointer-events: none; }
.hh-tank div { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .15); overflow: hidden; margin: 3px 0; }
.hh-tank u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ca8a04, #fde047); }
.hh-tank b { font-size: 11px; opacity: .9; }
.hh-tank.is-full { border-color: #fb7185; animation: hh-blink .8s steps(2) infinite; }
@keyframes hh-blink { 50% { border-color: rgba(255, 255, 255, .16); } }
.hh-time.is-late { border-color: #fb7185 !important; }
.sim-stage canvas.hh-map { position: absolute; inset: auto; right: 10px; top: 10px; width: 130px; height: 130px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .3); pointer-events: none; }
@container (max-width: 560px) {
  .sim-stage canvas.hh-map { width: 92px; height: 92px; top: 96px; }
  .hh-tank { top: 92px; width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .hh-tank.is-full { animation: none; } }