/* Horse Ranch (shared: sim3d.css + tycoon-kit.css) */
.hr-hud { position: absolute; left: 10px; top: 10px; display: grid; gap: 5px; width: 200px; pointer-events: none; color: #fff; font: 800 13px system-ui, sans-serif; }
.hr-hud > div { background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 5px 9px; }
.hr-bars { display: grid; gap: 3px; }
.hr-bars span { display: grid; grid-template-columns: 20px 1fr; align-items: center; }
.hr-bars i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.hr-bars u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #fde047, #f59e0b); transition: width .2s; }
.hr-bars .h { background: linear-gradient(90deg, #fb7185, #e11d48); }
.hr-bars .c { background: linear-gradient(90deg, #67e8f9, #0891b2); }
.hr-course { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: rgba(8, 16, 28, .8); color: #fff; border-radius: 12px; padding: 5px 12px; font: 800 15px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.hr-course:empty { display: none; }
.hr-care, .hr-pick { width: min(300px, calc(100% - 20px)); }
.cs-hint { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); background: rgba(8, 16, 28, .8); color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; padding: 6px 12px; font: 800 14px system-ui, sans-serif; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.cs-hint.is-on { opacity: 1; }
@container (max-width: 560px) {
  .hr-hud { width: 150px; font-size: 11px; gap: 3px; top: 96px; left: 8px; }
  .hr-hud > div { padding: 3px 7px; }
  .hr-course { top: 96px; left: auto; right: 8px; transform: none; font-size: 12px; }
  .cs-hint { bottom: 150px; font-size: 12px; }
}