/* ==========================================================================
   css/safari-areas.css — the Safari Zone page as an expedition board (DECISIONS 239)
   --------------------------------------------------------------------------
   js/ui/safari.js: a banner over the owner's marsh art with the ticket, "Today in the Safari"
   and the progress side by side, the area cards (art on top, a lock and a progress bar while
   closed), the chosen area's Pokémon and the folded rules. The game's dark navy panels with the
   park's khaki green (--safari, css/safari.css) as the accent; gold marks rare, blue marks a
   migrant. Caught Pokémon step back (quiet, a tick), undiscovered ones are a "?", so the ones
   still to find stand out - the owner's point: not forty sprites asking for attention.
   ========================================================================== */

.sfa-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end;
  min-height: 190px; padding: 20px 22px; border-radius: var(--radius, 12px); overflow: hidden;
  border: 1px solid rgba(157, 180, 63, 0.35);
  background:
    linear-gradient(90deg, rgba(9, 14, 28, 0.94) 0%, rgba(9, 14, 28, 0.72) 48%, rgba(9, 14, 28, 0.2) 100%),
    url("../assets/ui/safari/hero.jpg") center 40% / cover no-repeat,
    #16213a;
}
.sfa-hero h3 { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.01em; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.sfa-hero-tag { margin-top: 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--safari, #9db43f); }
.sfa-hero p { margin: 8px 0 0; max-width: 60ch; line-height: 1.5; color: #e6ebf5; }
.sfa-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.sfa-hero-note { font-size: 0.8rem; color: #e6ebf5; opacity: 0.85; }
.sfa-map, .sfa-leave { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.sfa-ticket {
  min-width: 170px; padding: 12px 14px; border-radius: var(--radius-sm, 8px);
  background: rgba(9, 14, 28, 0.78); border: 1px solid rgba(157, 180, 63, 0.45);
}
.sfa-ticket-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--safari, #9db43f); }
.sfa-ticket-row { margin-top: 4px; color: #e6ebf5; }
.sfa-ticket-row b { font-size: 1.15rem; font-variant-numeric: tabular-nums; color: #fff; }

.sfa-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sfa-today h4, .sfa-progress h4, .sfa-areas h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 0.95rem; }
.sfa-today h4 svg, .sfa-progress h4 svg, .sfa-areas h4 svg, .sfa-area h4 svg { color: var(--safari, #9db43f); }
/* "Today in the Safari": a header with the timer, then rows in one grid (slot · name/area · pill). */
.sfa-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sfa-box-head h4 { margin: 0; }
.sfa-timer {
  display: inline-flex; align-items: baseline; gap: 6px; flex: none; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem; color: var(--muted, #9aa3b8); white-space: nowrap;
}
.sfa-countdown { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--text, #e6ebf5); }
.sfa-news { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.sfa-news-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.sfa-news-row:last-child { border-bottom: 0; }
.sfa-news-slot {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
}
.sfa-news-icon { width: 32px; height: 32px; image-rendering: pixelated; }
.sfa-news-spark { display: grid; place-items: center; color: #f6c945; }
.sfa-news-spark svg { width: 16px; height: 16px; }
.sfa-news-row.boost .sfa-news-slot { background: rgba(246, 201, 69, 0.1); border-color: rgba(246, 201, 69, 0.4); }
.sfa-news-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sfa-news-name { font-weight: 700; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfa-news-sub { font-size: 0.76rem; color: var(--muted, #9aa3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfa-news-empty { padding: 10px 2px; font-size: 0.86rem; }
.sfa-pill {
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.sfa-pill.new { background: rgba(90, 143, 214, 0.16); border-color: rgba(90, 143, 214, 0.45); color: #a9c9f5; }
.sfa-pill.ok { background: var(--safari-soft, rgba(157, 180, 63, 0.16)); border-color: rgba(157, 180, 63, 0.45); color: var(--safari, #9db43f); }
.sfa-pill.boost { background: rgba(246, 201, 69, 0.12); border-color: rgba(246, 201, 69, 0.45); color: #f6c945; }
.sfa-link { background: none; border: 0; padding: 0; font: inherit; color: var(--safari, #9db43f); font-weight: 700; cursor: pointer; }
.sfa-link:hover, .sfa-link:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.sfa-link-lock svg { width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; opacity: 0.8; }
.sfa-bar, .sfa-card-bar { display: block; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sfa-bar span, .sfa-card-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--safari-strong, #6f8a2c), var(--safari, #9db43f)); }
.sfa-progress-main { margin: 8px 0 6px; }
.sfa-progress-main b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.sfa-progress-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; color: var(--muted, #9aa3b8); }
.sfa-progress-list svg { width: 13px; height: 13px; color: var(--safari, #9db43f); vertical-align: -2px; }
.sfa-q { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--text, #e6ebf5); font-weight: 800; font-size: 0.7rem; }
.sfa-star { color: #f6c945; }

/* --- Area cards ---------------------------------------------------------- */
.sfa-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.sfa-section-head h4 { margin: 0; }
.sfa-areas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.sfa-card {
  display: flex; flex-direction: column; border-radius: var(--radius-sm, 8px); overflow: hidden;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
}
.sfa-card.selected { border-color: var(--safari, #9db43f); box-shadow: 0 0 0 1px var(--safari, #9db43f) inset; }
.sfa-card.here { border-color: rgba(157, 180, 63, 0.7); }
.sfa-card-pick { display: flex; flex-direction: column; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sfa-card-pick:focus-visible { outline: 2px solid var(--safari, #9db43f); outline-offset: -2px; }
.sfa-card-art { position: relative; display: block; aspect-ratio: 16 / 9; background: #1b2640; }
.sfa-card-art img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.sfa-card.locked .sfa-card-art img { filter: grayscale(0.85) brightness(0.45); }
.sfa-card-lock { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.sfa-card-lock svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.sfa-card-here {
  position: absolute; left: 6px; top: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--safari, #9db43f); color: #17200a; font-size: 0.68rem; font-weight: 800;
}
.sfa-card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 6px; }
.sfa-card-name { font-weight: 800; font-size: 0.92rem; }
.sfa-card-line { font-size: 0.8rem; }
.sfa-card-line.rare { color: #f6c945; }
.sfa-card-line.done { color: var(--safari, #9db43f); font-weight: 700; }
.sfa-card-bar { height: 7px; margin-top: 3px; }
.sfa-explore { margin: 2px 10px 10px; align-self: stretch; }

/* --- The chosen area ----------------------------------------------------- */
.sfa-area-head {
  margin: -14px -14px 12px; padding: 16px 16px 14px; border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
  background: rgba(157, 180, 63, 0.08) center / cover no-repeat;
  border-bottom: 1px solid rgba(157, 180, 63, 0.3);
}
.sfa-area-head h4 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.15rem; color: #fff; }
.sfa-area-head p { margin: 4px 0 0; color: #e6ebf5; }
.sfa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sfa-chip {
  height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); color: inherit;
}
.sfa-chip.active { border-color: var(--safari, #9db43f); background: var(--safari-soft, rgba(157, 180, 63, 0.16)); color: var(--safari-text, #eef5d6); }
.sfa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.sfa-mon {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 108px; padding: 8px 4px 6px; border-radius: var(--radius-sm, 8px); text-align: center;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
}
.sfa-mon-icon { width: 44px; height: 44px; image-rendering: pixelated; }
.sfa-mon-name { font-size: 0.74rem; font-weight: 700; line-height: 1.15; }
.sfa-mon-status { margin-top: auto; font-size: 0.68rem; color: var(--muted, #9aa3b8); }
.sfa-mon-status svg { width: 11px; height: 11px; vertical-align: -1px; }
.sfa-mon-status.ok { color: var(--safari, #9db43f); font-weight: 700; }
.sfa-mon-status.miss { color: #ff8f8f; font-weight: 700; }
.sfa-mon-q {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px dashed rgba(255, 255, 255, 0.22);
  font-size: 1.3rem; font-weight: 800; color: rgba(255, 255, 255, 0.6);
}
/* Caught: done, so it steps back. */
.sfa-mon.st-caught { background: rgba(255, 255, 255, 0.025); }
.sfa-mon.st-caught .sfa-mon-icon { opacity: 0.6; filter: saturate(0.6); }
.sfa-mon.st-caught .sfa-mon-name { color: var(--muted, #9aa3b8); }
/* Still to find: a rare one you have seen glows gold, a migrant blue. */
.sfa-mon.r-rare.st-seen { border-color: rgba(246, 201, 69, 0.55); background: rgba(246, 201, 69, 0.08); }
.sfa-mon.r-rare.st-unknown .sfa-mon-q { border-color: rgba(246, 201, 69, 0.6); color: #f6c945; }
.sfa-mon.migrant { border-color: rgba(90, 143, 214, 0.6); background: rgba(90, 143, 214, 0.1); }
.sfa-mon.boosted { box-shadow: 0 0 0 1px rgba(246, 201, 69, 0.6) inset; }
.sfa-mon-tag {
  position: absolute; top: 4px; right: 4px; padding: 0 5px; border-radius: 4px;
  font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
}
.sfa-mon-tag.rare { background: #f6c945; color: #2b2305; }
.sfa-mon-tag.migrant { background: #5a8fd6; color: #fff; }
.sfa-mon-tag.boost { background: rgba(246, 201, 69, 0.9); color: #2b2305; }

/* --- Rules and tip ------------------------------------------------------- */
.sfa-howto summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.sfa-howto summary svg { width: 15px; height: 15px; color: var(--safari, #9db43f); }
.sfa-howto .sfa-rules { margin-top: 10px; }
.sfa-tip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 10px 14px;
  border-radius: var(--radius-sm, 8px); background: rgba(157, 180, 63, 0.08); border: 1px dashed rgba(157, 180, 63, 0.35);
  font-size: 0.86rem; color: var(--text, #e6ebf5);
}
.sfa-tip-label { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--safari, #9db43f); }
.sfa-tip-label svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .sfa-hero { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .sfa-hero h3 { font-size: 1.35rem; }
  .sfa-hero-actions .btn-lg { flex: 1 1 auto; }
  .sfa-ticket { justify-self: start; }
  .sfa-top { grid-template-columns: minmax(0, 1fr); }
  .sfa-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sfa-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}