/* Wild Hearts · FFXIV Adventurers
   Chrome (home-bar, wallpaper, main) matches battydev.com/palworld so the two pages
   read as one site. The content skin borrows FFXIV's own UI language: translucent
   slate-blue panels, thin gold rules, corner flourishes, gold small-caps headers. */

:root {
  --void: #07151c;
  --deep: #0b1d28;
  --panel: rgba(18, 40, 56, 0.78);
  --panel-solid: #12283a;
  --rule: rgba(198, 166, 100, 0.38);
  --gold: #c6a664;
  --gold-bright: #e6cf95;
  --ink: #e8eef2;
  --ink-dim: #9db2c0;
  --ink-faint: #7d94a4;

  /* Grand Company colours, from the in-game emblems. Drives per-character accent. */
  --gc-maelstrom: #e0776a;
  --gc-adder: #d4b13f;
  --gc-flames: #dd7c33;
  --gc-none: #7d94a4;

  --accent: var(--gc-none);
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: 'Roboto Condensed', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- wallpaper: expansion key art, dimmed behind a scrim so text stays legible ---- */
.wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(7,21,28,0.86) 0%, rgba(7,21,28,0.94) 55%, rgba(7,21,28,0.99) 100%),
    url("assets/keyart.jpg");
  background-size: cover;
  background-position: center 22%;
  background-attachment: fixed;
}
@media (max-width: 700px) {
  /* fixed attachment is janky on mobile and forces a full-size repaint on scroll */
  .wallpaper { background-attachment: scroll; }
}

/* ---- home bar (shared with /palworld) ---- */
/* Skip link: visually hidden until keyboard-focused, so keyboard and screen
   reader users can bypass the nav (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--panel-solid);
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

.home-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(5, 15, 21, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 20;
}
.account { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.gamerpic {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold) 0%, #8a6f30 100%);
  color: var(--void);
  font-family: 'Cinzel', serif;
  font-weight: 700;
}
.account b { display: block; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; }
.account small { display: block; color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }

.system-icons { display: flex; gap: 4px; margin-left: auto; }
.system-icons button,
.system-icons a {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-dim);
  width: 38px; height: 34px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 16px;
  transition: color .15s, background .15s, border-color .15s;
}
/* The anchor needs these to sit level with the buttons; a button centres its
   own label, an inline anchor does not.

   It also needs to be heavier than its neighbours to read at all: the view
   icons are solid glyphs (people-fill, trophy-fill) while bi-controller is a
   thin outline with fine interior detail, so at the buttons' 16px muted grey it
   disappeared. Larger and brighter evens it out — and it earns the distinction,
   being the one control that leaves the page rather than switching a view.
   line-height is pinned because an anchor inherits body's 1.55 and rides high. */
.system-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 21px;
  line-height: 1;
  color: var(--ink);
}
.system-icons button:hover,
.system-icons a:hover { color: var(--gold-bright); background: rgba(198,166,100,0.08); }
.system-icons button.is-active {
  color: var(--gold-bright);
  border-color: var(--rule);
  background: rgba(198,166,100,0.12);
}
.system-icons button:focus-visible,
.system-icons a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.system-status { margin-left: 8px; }
.stamp {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 620px) { .system-status { display: none; } }

/* Below ~380px the account block plus five 38px icons exceed the viewport and
   force a horizontal scroll. Let the bar wrap instead (WCAG 1.4.10 Reflow);
   targets stay at their full size rather than shrinking under 24px. */
@media (max-width: 400px) {
  .home-bar { flex-wrap: wrap; gap: 8px 10px; padding-left: 12px; padding-right: 12px; }
  .system-icons { margin-left: 0; width: 100%; justify-content: space-between; gap: 2px; }
  .account { min-width: 0; }
  .account small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- layout ---- */
main { max-width: 1140px; margin: 0 auto; padding: 28px 20px 72px; }
.view { display: none; }
.view.is-active { display: block; }

.section-head { margin-bottom: 26px; }
.eyebrow {
  margin: 0 0 4px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}
h1 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  text-shadow: 0 2px 18px rgba(198,166,100,0.22);
}
.lede { margin: 6px 0 0; color: var(--ink-dim); font-weight: 300; }

.notice {
  border: 1px solid var(--rule);
  border-left-width: 3px;
  background: var(--panel);
  padding: 12px 16px;
  margin-bottom: 24px;
  color: var(--ink-dim);
  font-size: 14px;
}

/* ---- panels with corner flourishes ---- */
.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  backdrop-filter: blur(3px);
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--gold);
  opacity: 0.75;
  pointer-events: none;
}
.panel::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* ---- roster ---- */
.roster-grid {
  display: grid;
  /* min() clamps the track floor to the container. A bare minmax(290px, 1fr) forces
     cards wider than a narrow viewport and scrolls the whole page sideways — which
     it did at 265px, narrower than any phone but exactly what a side panel gives you. */
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 18px;
}

.adventurer {
  --accent: var(--gc-none);
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  backdrop-filter: blur(3px);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.adventurer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}
.adventurer::before, .adventurer::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--accent);
  opacity: 0.7;
  pointer-events: none;
}
.adventurer::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.adventurer::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

.gc-maelstrom { --accent: var(--gc-maelstrom); }
.gc-adder     { --accent: var(--gc-adder); }
.gc-flames    { --accent: var(--gc-flames); }

/* An expanded card claims the whole row so the rest of the grid reflows around it,
   rather than growing inside one column and stretching its neighbours to match.
   Deliberately NOT using grid-auto-flow: dense — dense would backfill gaps with
   later cards and quietly break the Free Company rank ordering. */
.adventurer.is-expanded {
  grid-column: 1 / -1;
  border-top-width: 3px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}
.adventurer.is-expanded:hover { transform: none; }

/* With the full width available, lay the detail blocks out in columns instead of
   one long thin strip. */
.is-expanded .char-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 18px 26px;
  align-items: start;
}
.is-expanded .char-detail > .detail-portrait { grid-row: span 2; }

.char-head { display: flex; gap: 13px; align-items: flex-start; }
.portrait {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  background: var(--deep);
  flex-shrink: 0;
}
.char-id { min-width: 0; flex: 1; }
.char-name {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.char-title {
  display: block;
  font-size: 11px;
  font-style: italic;
  color: var(--gold);
  opacity: 0.9;
}
.char-meta { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.09em; }

.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--accent);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 1px 6px;
  margin-top: 5px;
  opacity: 0.92;
}

/* ---- job chips: an icon accompanies every job, never a bare label ---- */
.job {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(7, 21, 28, 0.55);
  border: 1px solid rgba(198,166,100,0.22);
  border-radius: 2px;
  padding: 3px 8px 3px 4px;
  font-size: 13px;
  color: var(--ink);
}
.job img { width: 20px; height: 20px; display: block; }
.job .lv { color: var(--gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
.job.is-main { border-color: var(--accent); background: rgba(7,21,28,0.75); }

.job-list { display: flex; flex-wrap: wrap; gap: 6px; }
.job-more { align-self: center; font-size: 11px; color: var(--ink-faint); }

/* "N at cap" — stands in for a run of identical max-level chips. */
.job-cap {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(198, 166, 100, 0.12);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 3px 8px;
}

.char-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(198,166,100,0.18);
  font-size: 12px;
  color: var(--ink-dim);
}
.char-stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.char-stats .muted { color: var(--ink-faint); font-style: italic; }

.last-seen { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.last-seen b { color: var(--gold); font-style: normal; }

.delta { color: #7fc99a; font-weight: 700; }

.char-unavailable { color: var(--ink-faint); font-style: italic; font-size: 13px; }

/* ---- expanded card detail ---- */
/* Plus/minus affordance, pinned to the card's top-right corner. */
.detail-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .25s ease;
  z-index: 2;
}
.detail-toggle .bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  margin: -0.75px 0 0 -5.5px;
  background: var(--gold);
  transition: transform .25s ease, background .15s;
}
.detail-toggle .bar-v { transform: rotate(90deg); }

/* The whole control turns; the vertical bar lands flat on the horizontal one, so a
   plus becomes a minus in a single motion. */
.is-expanded .detail-toggle { transform: rotate(180deg); }
.is-expanded .detail-toggle .bar-v { transform: rotate(0deg); }

.detail-toggle:hover { background: rgba(198,166,100,0.14); border-color: var(--gold); }
.detail-toggle:hover .bar { background: var(--gold-bright); }
.detail-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Keep long names and titles clear of the button. */
.char-head { padding-right: 28px; }

@media (prefers-reduced-motion: reduce) {
  .detail-toggle, .detail-toggle .bar { transition: none; }
}

/* Any class that sets `display` outranks the UA stylesheet's [hidden] rule, so the
   hidden attribute silently stops working. Restore it explicitly. */
[hidden] { display: none !important; }

/* Pushed last in the flex column so it always sits below the toggle that opens it. */
.char-detail {
  order: 10;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adventurer.is-expanded { border-color: var(--accent); }

.detail-portrait {
  width: 100%;
  max-width: 220px;
  align-self: center;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: block;
}

.detail-facts { display: flex; flex-direction: column; gap: 3px; }
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  border-bottom: 1px dotted rgba(198,166,100,0.16);
  padding-bottom: 2px;
}
.detail-label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.detail-value { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.detail-heading {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.gear-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.gear-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(198,166,100,0.22);
  border-radius: 2px;
  background: rgba(7,21,28,0.55);
}
.gear-slot img { width: 32px; height: 32px; display: block; }
/* With names present each slot becomes a full-width row; icons alone stay a grid. */
.gear-slot.has-name { width: 100%; padding: 3px 8px 3px 3px; }
.gear-name { font-size: 12px; color: var(--ink); }
.gear-ilvl { color: var(--gold); font-variant-numeric: tabular-nums; }

.job-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.job-grid .job { font-size: 12px; }

.detail-count {
  float: right;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}

.char-name.is-clickable { cursor: pointer; }
.char-name.is-clickable:hover { color: var(--gold-bright); }
.char-name.is-clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- deeds ---- */
.deeds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.deed {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-left: 2px solid var(--gold);
  flex-wrap: wrap;
}
.deed:nth-child(odd) { background: rgba(18, 40, 56, 0.6); }
.deed-name { font-weight: 400; }
.deed-who { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.deed-when { margin-left: auto; color: var(--ink-faint); font-size: 11px; white-space: nowrap; }

/* ---- progression ---- */
.progress-list { display: flex; flex-direction: column; gap: 18px; }
.progress-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
}
.progress-card h2 {
  margin: 0 0 12px;
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-bright);
}
.spark-row { display: flex; align-items: center; gap: 12px; padding: 5px 0; flex-wrap: wrap; }
.spark-label { display: flex; align-items: center; gap: 6px; min-width: 150px; font-size: 13px; }
.spark-label img { width: 18px; height: 18px; }
.spark { flex: 1; min-width: 160px; height: 34px; }
.spark path { fill: none; stroke: var(--gold); stroke-width: 1.6; }
.spark circle { fill: var(--gold-bright); }
.spark-value { font-variant-numeric: tabular-nums; color: var(--gold-bright); font-weight: 700; min-width: 62px; text-align: right; }
.spark-single { font-size: 11px; color: var(--ink-faint); font-style: italic; }

/* ---- empty states ---- */
.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-faint);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  font-style: italic;
}

/* ---- footer ---- */
.credits {
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 20px calc(34px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(198,166,100,0.18);
  color: var(--ink-faint);
  font-size: 11px;
  line-height: 1.6;
}
.credits p { margin: 0 0 5px; }
.credits a { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .adventurer:hover { transform: none; }
}