/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */
.flash {
  max-width: 960px;
  margin: 16px auto;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 500;
  animation: fadeIn 0.4s ease-out;
}

.flash.notice {
  background: #f0fdf4;
  color: #166534;
  border-left: 6px solid #22c55e;
}

.flash.alert {
  background: #fef2f2;
  color: #991b1b;
  border-left: 6px solid #ef4444;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.life-card {
  border-radius: 32px;
}

progress.life-progress {
  width: 100%;
  height: 26px;
  border: 3px solid #0f172a; /* slate-900 */
  border-radius: 9999px;
  background: #fff;
  overflow: hidden;
  appearance: none;
  box-sizing: border-box;
}

progress.life-progress::-webkit-progress-bar {
  background: #fff;
  border-radius: 9999px;
}

progress.life-progress::-webkit-progress-value {
  background: #ff6b6b;
  border-radius: 9999px;
  overflow: hidden;
}

progress.life-progress::-moz-progress-bar {
  background: #ff6b6b;
  border-radius: 9999px;
}