/* The hunt (docs/hunting.md): the hunt board (/hunt) and the "Recent finds" widget of the landing page.
   Dark glass and the violet accent of style.css; one colour per boss state. */

/* --- the board: targets left, events right ------------------------------------------ */
.hunt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 28px;
    align-items: start;
    margin-top: 1.6rem;
}

.hunt-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 0.9rem;
    font-family: var(--font-head);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text);
}
.hunt-heading > span:first-child { flex: 1; }
.hunt-heading .more {
    font-family: var(--font);
    font-size: 0.78rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}
.hunt-heading .more:hover { color: var(--accent-hi); text-decoration: none; }

.hunt-group {
    margin: 1.2rem 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}
.hunt-group:first-child { margin-top: 0; }

/* phones (hunt.js, under 600 px): the groups fold; the field bosses are open */
.hunt-fold { margin-top: 0.6rem; }
.hunt-fold:first-child { margin-top: 0; }
.hunt-fold > summary.hunt-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 2px;
    min-height: 44px;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid var(--line);
}
.hunt-fold > summary.hunt-group::-webkit-details-marker { display: none; }
.hunt-fold > summary.hunt-group::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.hunt-fold[open] > summary.hunt-group::after { transform: rotate(225deg); }
.hunt-fold[open] > summary.hunt-group { margin-bottom: 0.6rem; }
.hunt-fold-count {
    padding: 0 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}
.hunt-fold-alive { color: var(--ok); letter-spacing: 0.04em; text-transform: none; }

/* --- hunt targets -------------------------------------------------------------------- */
.hunt-target-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.hunt-target {
    --state: var(--accent);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-left: 3px solid var(--state);
    border-radius: var(--radius-sm);
}
.hunt-target.is-alive { --state: var(--ok); }
.hunt-target.is-slain { --state: var(--bad); }
.hunt-target.is-window { --state: var(--warn); }
.hunt-target.is-event { --state: var(--info); }
.hunt-target.is-probably { --state: var(--accent); }

.hunt-state-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--state);
    box-shadow: 0 0 10px var(--state);
}
.hunt-target.is-slain .hunt-state-dot,
.hunt-target.is-event .hunt-state-dot { box-shadow: none; opacity: 0.8; }

.hunt-target-body { min-width: 0; flex: 1; }
.hunt-target-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.hunt-target-name { font-family: var(--font-head); font-weight: 600; color: #fff; }
.hunt-target-state {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--state);
}
.hunt-target-maps { font-size: 0.8rem; }
/* a hidden hunting ground: its hint instead of a map */
.hunt-target.is-hidden { background: linear-gradient(90deg, rgba(143, 123, 255, 0.07), rgba(255, 255, 255, 0.02) 60%); }
.hunt-target.is-hidden .hunt-target-where { font-style: italic; color: #b8afff; }
.hunt-target-line { margin-top: 4px; font-size: 0.86rem; color: var(--muted); overflow-wrap: anywhere; }
.hunt-target-line b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hunt-target-next { color: var(--accent-hi); font-variant-numeric: tabular-nums; }

/* --- next invasions and events ------------------------------------------------------- */
.hunt-event-list { list-style: none; margin: 0; padding: 0; }
.hunt-event-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}
.hunt-event-list li:last-child { border-bottom: none; }
.hunt-event-name { color: var(--text); min-width: 0; }
.hunt-event-time { margin-left: auto; color: var(--accent-hi); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- rare finds (board and widget) --------------------------------------------------- */
.hunt-filters { margin-bottom: 1rem; }

.hunt-finds { list-style: none; margin: 0; padding: 0; }
.hunt-finds-wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.hunt-finds-wide > .empty-state,
.hunt-finds-wide > li:only-child { grid-column: 1 / -1; }

.find-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.hunt-finds > .find-row:last-child { border-bottom: none; }
.hunt-finds-wide > .find-row:nth-last-child(2):nth-child(odd) { border-bottom: none; }

.find-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(143, 123, 255, 0.18), rgba(0, 0, 0, 0.35) 70%);
    border: 1px solid var(--line);
}
.find-icon img { max-width: 34px; max-height: 34px; object-fit: contain; image-rendering: auto; }
.find-icon img.img-missing { visibility: hidden; }
.find-jewel .find-icon { border-color: rgba(143, 123, 255, 0.45); }
.find-ancient .find-icon { border-color: rgba(252, 211, 77, 0.4); }
.find-excellent .find-icon { border-color: rgba(52, 211, 153, 0.4); }
.find-box .find-icon { border-color: rgba(248, 113, 113, 0.35); }

.find-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.find-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.find-name { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.find-excellent .find-name { color: #6ee7b7; }
.find-ancient .find-name { color: #fcd34d; }
.find-jewel .find-name { color: var(--accent-hi); }

.find-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.find-tag.exc { background: rgba(52, 211, 153, 0.9); color: #052e1c; }
.find-tag.anc { background: rgba(252, 211, 77, 0.92); color: #2a2100; }

.find-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 0.78rem; color: var(--muted); min-width: 0; }
.find-meta .sep { color: var(--faint); }
.find-meta .find-hidden { font-style: italic; color: #b8afff; }
.find-meta .find-from-box { color: var(--accent-hi); }
.find-meta time { white-space: nowrap; }

/* the landing page widget (in the side column of the home grid) */
#wFinds .find-row { padding: 8px 0; }
#wFinds .find-icon { width: 34px; height: 34px; border-radius: 8px; }
#wFinds .find-icon img { max-width: 28px; max-height: 28px; }

@media (max-width: 1000px) {
    .hunt-layout { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 760px) {
    .hunt-finds-wide { grid-template-columns: 1fr; }
    .hunt-finds-wide > .find-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); }
    .hunt-target { padding: 10px 12px; }
    .hunt-target-state { margin-left: 0; width: 100%; order: 2; }
}