/* /bosses, redesigned.

   The page has one job: you are about to fight something, and you need to know
   what to bring. The old design treated Weak, Resists, Hits with and Inflicts
   as four identical rows of bordered pills, so the answer sat among twelve
   lookalike chips and the page read as a wall. Everything below is arranged
   around making the answer the loudest thing on a card.

   The identity comes from the game's own name. Ecliptica's run climbs through
   the phases of an eclipse, so the ground is the sky at totality and the fixed
   accent is corona gold rather than the indigo the site used before. Gold is
   spent on structure only: the phase rail, the section marks, the one button.
   The seven damage colours are data and keep their own hues untouched. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

.wrap {
  /* Scoped here rather than in theme.css: this page is the proof of the
     direction, so the rest of the site is left alone until it is agreed. */
  --void:   #07070a;
  --panel:  #0e0e13;
  --raised: #15151c;
  --edge:   #1e1e28;
  --edge-2: #2b2b38;
  --ink:    #f0f1f6;
  --dim:    #8e8e9c;
  --faint:  #5d5d6b;
  --corona: #f0c46a;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Bricolage Grotesque", var(--sans);

  font-family: var(--sans);
  color: var(--ink);
}

body { background: var(--void); }

/* ---------- the head ---------- */

.wrap h1 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0.7em 0 0.35em;
}
.wrap h1 em { font-style: normal; color: var(--corona); }

.sub {
  color: var(--dim);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 1.6rem;
}

/* ---------- the phase rail, and why it exists ----------

   You meet these bosses in this order. That is real information and the only
   sequence on the page, so it is the one thing given a structural device: a
   gold rule down the left of every group, opened by a disc. The disc is an
   eclipse and the rail is the climb. Nothing else on the page is numbered or
   ruled, so the device stays meaningful. */

.phase {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin: 2.75rem 0 0;
  padding-left: 2rem;
  position: relative;
}
.phase::before {
  content: "";
  position: absolute;
  left: 0; top: 0.1em;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--void);
  box-shadow: 0 0 0 1.5px var(--corona), 0 0 11px rgba(240,196,106,0.30);
}
.phase h2 {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--corona);
  margin: 0;
}
.phase .n {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.phase.unplaced::before { box-shadow: 0 0 0 1.5px var(--edge-2); }
.phase.unplaced h2 { color: var(--dim); }

.phasenote {
  margin: 0.7rem 0 0;
  padding-left: 2rem;
  color: var(--faint);
  font-size: 0.82rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* The rail itself runs down the list, so the group reads as one span of the
   climb rather than as a heading with cards loose underneath it. */
.blist {
  margin: 1.1rem 0 0;
  padding-left: 2rem;
  border-left: 1px solid var(--edge);
  margin-left: 6px;
  display: grid;
  gap: 0.9rem;
}
/* Two views of the same cards. The class is 'list', not 'full': the button is
   labelled Full but setView writes list, and a rule written against the label
   matches nothing, which showed the quick answer and the whole table together. */
.blist.grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.blist.list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 760px), 1fr)); }

/* ---------- a boss ---------- */

.card.boss {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  align-content: start;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.card.boss:hover { border-color: var(--edge-2); background: var(--raised); }

/* The art was 80px behind a plate. These are drawn to their edges, so they are
   given room and no frame beyond a hairline. */
.face {
  width: 84px; height: 84px;
  /* two sizes: Full is one card a row and can afford the art at full size */
  border-radius: 10px;
  overflow: hidden;
  background: #0a0a0e;
  border: 1px solid var(--edge);
  display: grid;
  place-items: center;
  flex: none;
}
.face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blist.list .face { width: 148px; height: 148px; border-radius: 12px; }
.blist.list .card.boss { grid-template-columns: 148px 1fr; }
.face .none {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.bhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.75rem;
}
.bhead h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
  text-transform: none;
}
.bhead .title {
  font-style: italic;
  font-size: 0.86rem;
  color: var(--dim);
}
.bhead .hp, .bhead .ph {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bhead .hp span {
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-right: 0.35em;
}
.bhead .ph {
  border: 1px solid var(--edge-2);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--dim);
}

/* ---------- the answer ----------

   Weak reads as the loudest line on the card, because it is the reason anybody
   opened the page. The element carries its own colour at full strength and the
   multiplier sits beside it in mono. Resists is the same shape at a whisper:
   dimmed, no fill, so it reads as the caveat rather than a second answer. */

.quick { display: grid; gap: 0.4rem; }

/* A hanging indent rather than a flex column, because the label and the chips
   are siblings with no wrapper between them. Left as plain flex, a second line
   of chips wrapped back under the label instead of lining up with the first
   chip, which read as a new row with a missing name. */
.qrow {
  position: relative;
  padding-left: 5.8em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.7rem;
  min-height: 1.4em;
}
.qrow > .k {
  position: absolute;
  left: 0;
  top: 0.3em;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.chip {
  font-family: var(--mono);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
}
/* The multiplier is an <i> inside the chip, so it needs both the separator and
   its italics taken off: without them the card reads SHADOW1.5x. */
.chip i {
  font-style: normal;
  font-weight: 400;
  margin-left: 0.42em;
  opacity: 0.8;
}
/* Red, and not the element's own colour faded.

   That is what it was, and it meant a boss you should bring SHADOW to and a
   boss that shrugs SHADOW off drew the same chip in the same hue at two
   opacities. The element colour says which element; it cannot also say the
   direction. Red says the direction, and matches what the table below already
   does for a resisted cell.

   The plain values come first so a browser without color-mix loses the tint
   rather than the border, which is the rule the rest of the site follows. */
.chip.res {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--bad);
  border: 1px solid var(--bad);
  background: var(--void);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--edge));
  background: color-mix(in srgb, var(--bad) 12%, var(--void));
  border-radius: 5px;
  padding: 1px 7px;
}
.chip.res i { opacity: 0.8; }
/* No colour is set here on purpose. A status takes the hue of the element that
   causes it, from theme.css, and the three that no element causes stay neutral
   by having no tint class at all. Setting a colour would flatten that. */
.chip.st {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid var(--edge-2);
  border-radius: 5px;
  padding: 1px 7px;
}

/* ---------- the full view ---------- */

.brow {
  position: relative;
  padding-left: 5.8em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.7rem;
  margin-top: 0.5rem;
  min-height: 1.4em;
}
.brow > .k {
  position: absolute;
  left: 0;
  top: 0.3em;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* Seven columns of the same table on every boss, so it is set as a table and
   not as chips: the eye compares down the column. The container is .aff and each
   cell is .af, carrying .weak or .res itself.

   Inside a cell the element name is <b class="dt FIRE"> and the multiplier is
   <i>. The multiplier leads at size because it is the number being compared;
   the name is the label under it and takes the element's own colour from
   theme.css, which is left to win. */
.aff {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0.85rem 0 0;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow: hidden;
}
.af {
  background: var(--panel);
  border: 1px solid transparent;
  padding: 0.55rem 0.25rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 3px;
  text-align: center;
}
.af i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  line-height: 1;
}
.af b {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
}
/* Green for bring this, red for do not. The element name keeps its own colour
   underneath, so a lit cell carries both facts: which element, and which way. */
.af.weak { border-color: var(--ok); background: rgba(62, 207, 142, .1); }
.af.weak i { color: var(--ok); font-weight: 700; }
.af.res { border-color: var(--bad); background: rgba(255, 92, 92, .1); }
.af.res i { color: var(--bad); font-weight: 700; }

.strat { margin: 0.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.strat li {
  color: var(--dim);
  font-size: 0.84rem;
  line-height: 1.6;
  padding-left: 0.95rem;
  position: relative;
}
.strat li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--edge-2);
}

/* ---------- toolbar ---------- */

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.tools input[type="search"], .tools input.q {
  flex: 1 1 18rem;
  font-family: var(--sans);
  font-size: 0.92rem;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 9px;
  padding: 0.62rem 0.85rem;
}
.tools input::placeholder { color: var(--faint); }
.tools input:focus-visible { outline: 2px solid var(--corona); outline-offset: 1px; }

.vbtn {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--edge-2);
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
}
.vbtn:hover { color: var(--ink); border-color: var(--faint); }
.vbtn[aria-pressed="true"] {
  color: var(--void);
  background: var(--corona);
  border-color: var(--corona);
}
.count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

/* Arriving from the log panel lands on one boss, so it is marked. */
.card.boss.hit { border-color: var(--corona); }

:focus-visible { outline: 2px solid var(--corona); outline-offset: 2px; }

/* ---------- grid view hides the detail ---------- */

/* Grid is the overview: picture, name, and the two rows that answer what to
   bring. Everything else belongs to Full. .bnote is the loose sentence under a
   card and was the one that kept showing. */
.blist.grid .strat, .blist.grid .aff, .blist.grid .bnote { display: none; }
.blist.grid .brow { display: none; }

.bnote {
  margin: 0.85rem 0 0;
  color: var(--dim);
  font-size: 0.84rem;
  line-height: 1.6;
}
.strat > .k {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.45rem;
}
.strat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.blist.list .quick { display: none; }

@media (max-width: 560px) {
  .card.boss { grid-template-columns: 1fr; gap: 0.85rem 0; }
  .face { width: 68px; height: 68px; }
  .aff { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blist, .phase, .phasenote { padding-left: 1.15rem; }
}

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