/* ══════════════════════════════════════════════════════════════════════
   SOULSLIKE MARATHON — ash & ember
   One accent, one texture, a lot of black.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Completion colour. Overridden per card from that game's wordmark. */
  --seal:       #dba545;

  --ink:        #0a0908;
  --ash:        #100e0d;
  --ash-2:      #171412;
  --ash-3:      #211c19;
  --edge:       rgba(233, 227, 215, 0.085);
  --edge-hi:    rgba(233, 227, 215, 0.18);

  --bone:       #e9e3d7;
  --muted:      #948b7e;
  --faint:      #625a51;

  --ember:      #ff7a2f;
  --ember-soft: #ffa062;
  --ember-deep: #a8400f;
  --gold:       #dba545;
  --cold:       #7fa3bd;
  --cold-deep:  #3f5a70;

  /* The live accent. Swaps to cold steel when viewing another player. */
  --accent:      var(--ember);
  --accent-soft: var(--ember-soft);
  --accent-deep: var(--ember-deep);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --r-sm: 3px;
  --r:    6px;
  --r-lg: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --pad: clamp(1rem, 4vw, 3rem);
  --maxw: 1320px;
}

html[data-view="other"] {
  --accent:      var(--cold);
  --accent-soft: #a9c6dc;
  --accent-deep: var(--cold-deep);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent-deep); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════ atmosphere ═══════════ */

#embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: drift 8s steps(4) infinite;
}

@keyframes drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 122, 47, 0.055), transparent 55%),
    radial-gradient(100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
  transition: background 700ms var(--ease);
}

html[data-view="other"] .vignette {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(127, 163, 189, 0.06), transparent 55%),
    radial-gradient(100% 100% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

/* ═══════════════════════════════════════════════ the loader ═══════════ */
/* One mark. It fades in, it fades out. That is the whole idea. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.2rem;
  background: var(--ink);
  transition: opacity 900ms var(--ease), visibility 900ms;
}

.loader[data-done="1"] { opacity: 0; visibility: hidden; }

.loader__mark {
  width: 76px;
  height: 95px;
  animation: breathe 2600ms var(--ease-io) infinite;
  filter: drop-shadow(0 0 26px rgba(255, 122, 47, 0.42));
}

.loader__mark svg { width: 100%; height: 100%; overflow: visible; }

.loader__flame {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2;
  stroke-linejoin: round;
}

.loader__ring {
  fill: none;
  stroke: var(--ember-deep);
  stroke-width: 1;
  stroke-dasharray: 3 9;
  opacity: 0.7;
  transform-origin: 32px 52px;
  animation: turn 22s linear infinite;
}

.loader__word {
  font-family: var(--serif);
  font-size: 0.78rem;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  text-transform: uppercase;
  color: var(--faint);
  animation: breathe 2600ms var(--ease-io) infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.12; transform: scale(0.965); }
  50%      { opacity: 1;    transform: scale(1); }
}

@keyframes turn { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════ shell ════════════════ */

.app {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--pad) 4rem;
  animation: rise 800ms var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════ masthead ═════════════ */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--edge);
}

.masthead__title { flex: 1 1 16rem; min-width: 0; }

.masthead h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
}

.masthead h1 span {
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 0.62em;
  padding-left: 0.18em;
  transition: color 600ms var(--ease);
}

.masthead__sub {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.masthead__totals {
  display: flex;
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: flex-end;
}

.bigstat { text-align: right; }

.bigstat__n {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bigstat__n small { font-size: 0.45em; color: var(--faint); letter-spacing: 0.06em; }

.bigstat__k {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.35rem;
}

.masthead__actions { display: flex; gap: 0.6rem; }

/* ═══════════════════════════════════════════════ buttons ══════════════ */

.btn {
  --btn-fg: var(--bone);
  appearance: none;
  border: 1px solid var(--edge-hi);
  background: transparent;
  color: var(--btn-fg);
  padding: 0.55rem 1.1rem;
  border-radius: var(--r);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms, transform 200ms var(--ease);
  white-space: nowrap;
}

.btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.03); }
.btn:active { transform: translateY(1px); }
.btn--tiny { padding: 0.3rem 0.7rem; font-size: 0.62rem; }

.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #140b04;
  font-weight: 600;
}
.btn--solid:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: #140b04; }

.btn--danger:hover { border-color: #c9463a; color: #e2685c; }

.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ═══════════════════════════════════════════════ roster ═══════════════ */

.roster {
  display: flex;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ash-3) transparent;
  scroll-snap-type: x proximity;
}

.roster::-webkit-scrollbar { height: 4px; }
.roster::-webkit-scrollbar-thumb { background: var(--ash-3); border-radius: 4px; }

.pchip {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1rem 0.55rem 0.6rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ash-2), var(--ash));
  cursor: pointer;
  transition: border-color 220ms, transform 220ms var(--ease), background 220ms;
}

.pchip:hover { border-color: var(--edge-hi); transform: translateY(-2px); }

.pchip[aria-current="true"] {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--ash-2)), var(--ash));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 22px rgba(0, 0, 0, 0.5);
}

.pchip__sigil {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  border: 1px solid var(--edge-hi);
}

.pchip__sigil svg { width: 17px; height: 17px; stroke: var(--accent); fill: none; stroke-width: 1.6; }

.pchip__name {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pchip__pct {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pchip__you {
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  padding: 0.12rem 0.4rem;
  border-radius: 3px;
  background: var(--accent);
  color: #140b04;
  font-weight: 700;
}

.pchip--add { border-style: dashed; color: var(--muted); }

/* ═══════════════════════════════════════════════ viewbar ══════════════ */

.viewbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.1rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
  transition: border-color 500ms var(--ease), background 500ms var(--ease);
}

.viewbar__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  flex: 0 0 auto;
}

.viewbar[data-mode="own"] .viewbar__pip { animation: pulse 2.4s var(--ease-io) infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.viewbar__text {
  flex: 1;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.viewbar__text strong { color: var(--bone); font-weight: 600; }
.viewbar__text em { font-style: normal; color: var(--accent); }

/* ═══════════════════════════════════════════════ overview ═════════════ */

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 1.6rem 0 2.4rem;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tile {
  background: linear-gradient(180deg, var(--ash-2), var(--ash));
  padding: 1.1rem 1.2rem;
}

.tile__k {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.tile__v {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.1;
  margin-top: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.tile__v small { font-size: 0.5em; color: var(--faint); }

.tile--accent .tile__v { color: var(--accent); }

.tile__bar {
  margin-top: 0.7rem;
  height: 2px;
  background: var(--ash-3);
  border-radius: 2px;
  overflow: hidden;
}

.tile__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  border-radius: 2px;
  transition: width 900ms var(--ease);
}

/* ═══════════════════════════════════════════════ game cards ═══════════ */

.games {
  display: grid;
  gap: 1rem;
}

.game {
  --g: var(--game-accent, var(--accent));
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background:
    radial-gradient(140% 100% at 0% 0%, color-mix(in srgb, var(--g) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--ash-2), var(--ash));
  overflow: hidden;
  transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}

.game:hover { border-color: var(--edge-hi); }

.game[data-open="1"] {
  border-color: color-mix(in srgb, var(--g) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--g) 14%, transparent), 0 18px 50px -20px rgba(0, 0, 0, 0.9);
}

.game[data-done="1"] { --g: var(--seal); }

/* ── header row ── */

.game__head {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.5rem);
  width: 100%;
  min-height: 132px;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

/* ── key art ───────────────────────────────────────────────────────────
   Steam's library_hero is 1920x620; a collapsed bar is nearer 12:1, so the
   image is cropped to a horizontal band and each game sets its own
   object-position so the crop lands on the subject rather than through it. */

.game__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.game__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1200ms var(--ease), filter 700ms var(--ease), opacity 500ms;
}

.game[data-art="0"] .game__art { display: none; }

/* Progress lights the art up. The desaturation ramp is deliberately gentle -
   the art is the point, so an untouched game still reads clearly; it just sits
   cooler and dimmer than one you've beaten. --art-b is set per card in JS from
   each image's own measured brightness so eight differently-exposed key arts
   land at a matching level instead of some glaring and some going black. */
.game__art img {
  filter: grayscale(var(--art-g, 1)) brightness(var(--art-b, 0.6)) contrast(var(--art-c, 1.06));
}

.game[data-phase="cold"]   { --art-g: 0.45; --art-c: 1.06; }
.game[data-phase="warm"]   { --art-g: 0.3;  --art-c: 1.04; }
.game[data-phase="hot"]    { --art-g: 0.14; --art-c: 1.02; }
.game[data-phase="beaten"] { --art-g: 0;    --art-c: 1; }

.game__head:hover .game__art img { transform: scale(1.07); }
.game[data-phase="cold"] .game__head:hover { --art-g: 0.12; }
.game[data-phase="warm"] .game__head:hover { --art-g: 0.08; }
.game[data-phase="hot"]  .game__head:hover { --art-g: 0; }

/* ── scrim ──
   Left-heavy so the ring and title always sit on near-solid ink, easing off to
   the right where the art is allowed to breathe. */

.game__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Publisher key art centres its subject, so the scrim has to clear out of the
     middle. Strong only across the left third where the ring and title sit,
     then falls away fast. */
  background:
    linear-gradient(90deg,
      rgba(10, 9, 8, 0.95) 0%,
      rgba(10, 9, 8, 0.88) 30%,
      rgba(10, 9, 8, 0.58) 48%,
      rgba(10, 9, 8, 0.28) 70%,
      rgba(10, 9, 8, 0.16) 100%),
    linear-gradient(0deg, rgba(10, 9, 8, 0.55), rgba(10, 9, 8, 0) 52%);
  transition: opacity 500ms var(--ease);
}

.game__head:hover .game__scrim { opacity: 0.9; }

/* A hairline of the game's own colour along the bottom edge. */
.game__head::after {
  content: "";
  z-index: 2;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--g), transparent 70%);
  opacity: 0.5;
  transition: opacity 400ms;
}

.game__head:hover::after { opacity: 1; }

/* No art? Fall back to a generated field built from the game's accent. */
.game[data-art="0"] .game__scrim {
  background:
    radial-gradient(120% 180% at 8% 50%, color-mix(in srgb, var(--g) 16%, transparent), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, rgba(10, 9, 8, 0.9), rgba(10, 9, 8, 0.4));
}

/* ── the ring ── */

.ring {
  position: relative;
  z-index: 2;
  /* 58px of ring plus 8px of breathing room, and deliberately no backdrop of
     its own. A box-shadow glow got squared off by .game__head's overflow clip;
     replacing it with a radial-gradient background drew a visible box too. The
     scrim is already near-opaque at the far left where the ring sits, so the
     ring needs nothing behind it to stay readable. */
  width: 74px;
  height: 74px;
  padding: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--ash-3); stroke-width: 3; }

.ring__fill {
  fill: none;
  stroke: var(--g);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease), stroke 500ms;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--g) 55%, transparent));
}

.ring__pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* The display serif, not the monospace used for list counters - this is a
     headline number, and ui-monospace read as console output. */
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--muted);
}

.game[data-done="1"] .ring__pct { color: var(--seal); }

/* ── titles ── */

.game__meta { position: relative; z-index: 2; min-width: 0; }

.game__title {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  letter-spacing: 0.03em;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  /* Art sits behind the type, so the type carries its own shadow. */
  text-shadow: 0 1px 12px rgba(6, 5, 4, 0.9), 0 1px 3px rgba(6, 5, 4, 0.8);
}

.game__year { font-size: 0.66rem; color: var(--faint); font-family: var(--mono); }

.game__line {
  margin-top: 0.35rem;
  text-shadow: 0 1px 8px rgba(6, 5, 4, 0.9);
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  gap: 0.5rem 0.9rem;
  flex-wrap: wrap;
  align-items: center;
}

.game__line b { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Separator leads the item rather than trailing it, so a wrapped line never
   ends on a dangling dot. */
.game__line span + span::before {
  content: "·";
  opacity: 0.3;
  margin-right: 0.55em;
}

.game__chev {
  position: relative;
  z-index: 2;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 350ms var(--ease), border-color 250ms;
  margin-right: 0.3rem;
}

.game[data-open="1"] .game__chev { transform: rotate(-135deg); border-color: var(--g); }

/* ── flags ── */

.flag {
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.16rem 0.44rem;
  border-radius: 3px;
  border: 1px solid var(--edge-hi);
  color: var(--muted);
  white-space: nowrap;
}

.flag--dlc   { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.flag--opt   { color: var(--faint); }
.flag--verify{ color: #d98a4f; border-color: rgba(217, 138, 79, 0.4); }
.flag--tbd   { color: var(--faint); border-style: dashed; }
.flag--done  { color: var(--seal); border-color: color-mix(in srgb, var(--seal) 45%, transparent); }

/* ═══════════════════════════════════════════════ boss list ════════════ */

.game__body {
  display: none;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--ash-2), var(--ash));
  border-top: 1px solid var(--edge);
  padding: 0.9rem clamp(0.6rem, 2vw, 1.2rem) 1.2rem;
}

/* Once a card is open the art recedes - the boss list is the subject now. */
.game[data-open="1"] .game__head { min-height: 104px; }
.game[data-open="1"] { --art-g: 0.5; }
.game[data-open="1"] .game__art img { opacity: 0.5; }
.game[data-open="1"] .game__scrim { opacity: 1; }

.game[data-open="1"] .game__body { display: block; animation: unfold 420ms var(--ease); }

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

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0.4rem 0.85rem;
}

.search {
  flex: 1 1 12rem;
  min-width: 0;
  background: var(--ink);
  border: 1px solid var(--edge);
  color: var(--bone);
  padding: 0.45rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.78rem;
}

.search::placeholder { color: var(--faint); }
.search:focus { outline: none; border-color: var(--accent); }

.seg { display: flex; border: 1px solid var(--edge); border-radius: var(--r); overflow: hidden; }

.seg button {
  background: transparent;
  border: 0;
  padding: 0.42rem 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
  transition: background 180ms, color 180ms;
}

.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.seg button:hover { color: var(--bone); }

/* ── section headings inside a game ── */

.bsec {
  margin: 0.9rem 0 0.3rem;
  padding: 0 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.bsec::after { content: ""; flex: 1; height: 1px; background: var(--edge); }

/* ── one boss ── */

.boss {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  background: transparent;
  border-radius: var(--r);
  text-align: left;
  cursor: pointer;
  transition: background 160ms;
}

.boss:hover { background: rgba(255, 255, 255, 0.028); }

html[data-view="other"] .boss { cursor: default; }
html[data-view="other"] .boss:hover { background: transparent; }

/* the mark */
.boss__mark {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-sm);
  position: relative;
  transition: border-color 220ms, background 220ms, box-shadow 260ms;
}

.boss__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 1px;
  transform: scale(0);
  opacity: 0;
  transition: transform 300ms var(--ease), opacity 200ms;
}

.boss[data-killed="1"] .boss__mark {
  border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.boss[data-killed="1"] .boss__mark::after { transform: scale(1); opacity: 1; }

.boss__name {
  font-size: 0.86rem;
  letter-spacing: 0.01em;
  transition: color 260ms;
  min-width: 0;
}

.boss[data-killed="1"] .boss__name {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
}

.boss__loc {
  display: block;
  font-size: 0.68rem;
  color: var(--faint);
  letter-spacing: 0.03em;
  margin-top: 0.05rem;
}

.boss__flags { display: flex; gap: 0.3rem; flex: 0 0 auto; }

/* ── grouped duplicates ── */

.bgroup { border-radius: var(--r); }
.bgroup[data-open="1"] { background: rgba(255, 255, 255, 0.02); }

.bgroup__head { position: relative; }

.bgroup__count {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

.bgroup__kids { display: none; padding: 0 0 0.4rem 1.5rem; }
.bgroup[data-open="1"] .bgroup__kids { display: block; animation: unfold 300ms var(--ease); }

.bgroup__kids .boss__name { font-size: 0.78rem; }

/* ── stats strip inside a game ── */

.gstats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.85rem 0.7rem 0.2rem;
  border-top: 1px solid var(--edge);
  font-size: 0.72rem;
  color: var(--muted);
}

.gstat { display: flex; align-items: center; gap: 0.45rem; }
.gstat b { color: var(--bone); font-variant-numeric: tabular-nums; }

.gstat input {
  width: 5rem;
  background: var(--ink);
  border: 1px solid var(--edge);
  color: var(--bone);
  padding: 0.25rem 0.45rem;
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-family: var(--mono);
}

.gstat input:focus { outline: none; border-color: var(--accent); }
.gstat input[type="date"] { width: 8.6rem; }

/* ── empty state (Mortal Shell 2) ── */

.empty {
  text-align: center;
  padding: 2.2rem 1rem;
  color: var(--faint);
}

.empty__mark {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ash-3);
  letter-spacing: 0.4em;
}

.empty p { margin-top: 0.7rem; font-size: 0.78rem; max-width: 34ch; margin-inline: auto; }

/* ═══════════════════════════════════════════════ dialogs ══════════════ */

.dlg {
  border: 1px solid var(--edge-hi);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--ash-2), var(--ash));
  color: var(--bone);
  padding: 0;
  width: min(92vw, 30rem);
  box-shadow: 0 40px 90px -30px #000;
}

.dlg--wide { width: min(94vw, 54rem); }

.dlg::backdrop { background: rgba(4, 3, 3, 0.82); backdrop-filter: blur(3px); }

.dlg[open] { animation: pop 320ms var(--ease); }

@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

.dlg__close-form { position: absolute; top: 0; right: 0; }

.dlg__close {
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  transition: color 180ms;
}

.dlg__close:hover { color: var(--bone); }

.dlg__body { padding: 1.8rem clamp(1.2rem, 4vw, 2rem) 1.6rem; }

.dlg h2 {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.dlg .hint { font-size: 0.76rem; color: var(--muted); margin-bottom: 1.3rem; }

.field { margin-bottom: 0.95rem; }

.field label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.4rem;
}

.field input, .field select {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--edge);
  color: var(--bone);
  padding: 0.6rem 0.8rem;
  border-radius: var(--r);
  font-size: 0.9rem;
}

.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }

.sigils { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.sigils button {
  width: 40px; height: 40px;
  border: 1px solid var(--edge);
  background: var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 200ms, transform 200ms var(--ease);
}

.sigils button:hover { transform: translateY(-2px); }
.sigils button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.sigils svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.6; }

.dlg__row { display: flex; gap: 0.6rem; margin-top: 1.3rem; }
.dlg__row .btn { flex: 1; justify-content: center; text-align: center; }

.err {
  font-size: 0.76rem;
  color: #e2685c;
  margin-top: 0.6rem;
  min-height: 1.1rem;
}

.tabs { display: flex; gap: 0.4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }

.tabs button {
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  padding: 0.35rem 0.7rem;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
}

.tabs button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ── admin table ── */

.arows { max-height: 52vh; overflow-y: auto; border: 1px solid var(--edge); border-radius: var(--r); }

.arow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--edge);
  align-items: center;
}

.arow:last-child { border-bottom: 0; }
.arow input {
  background: var(--ink);
  border: 1px solid transparent;
  color: var(--bone);
  padding: 0.32rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.78rem;
  min-width: 0;
}
.arow input:hover { border-color: var(--edge); }
.arow input:focus { outline: none; border-color: var(--accent); }
.arow__x {
  background: none; border: 1px solid var(--edge); color: var(--faint);
  border-radius: var(--r-sm); cursor: pointer; padding: 0.2rem 0.5rem; font-size: 0.7rem;
}
.arow__x:hover { border-color: #c9463a; color: #e2685c; }

/* ═══════════════════════════════════════════════ misc ═════════════════ */

.footer {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--edge);
  font-size: 0.7rem;
  color: var(--faint);
  letter-spacing: 0.06em;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sync { color: var(--faint); }
.sync[data-state="saving"] { color: var(--accent); }
.sync[data-state="error"] { color: #e2685c; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translate(-50%, 140%);
  z-index: 90;
  background: var(--ash-3);
  border: 1px solid var(--edge-hi);
  color: var(--bone);
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  box-shadow: 0 20px 50px -18px #000;
  transition: transform 480ms var(--ease), opacity 320ms;
  opacity: 0;
  pointer-events: none;
  max-width: min(90vw, 30rem);
  text-align: center;
}

.toast[data-show="1"] { transform: translate(-50%, 0); opacity: 1; }
.toast[data-kind="error"] { border-color: #7c2f27; color: #f0a79f; }

/* ═══════════════════════════════════════════════ responsive ═══════════ */

@media (min-width: 860px) {
  .games { grid-template-columns: 1fr; }
  .game[data-open="0"] { }
}

@media (max-width: 720px) {
  .masthead { align-items: flex-start; }
  .masthead__totals { width: 100%; justify-content: space-between; }
  .bigstat { text-align: left; }
  .masthead__actions { width: 100%; }
  .masthead__actions .btn { flex: 1; }
  .game__head { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
  .game__chev { display: none; }
  .overview { grid-template-columns: repeat(2, 1fr); }
  .boss { gap: 0.65rem; }
  .arow { grid-template-columns: 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .loader__mark, .loader__word { opacity: 1; }
  #embers { display: none; }
  .grain { animation: none; }
}

/* ═══════════════════════════════════════ per-game accent (expanded) ════
   An open panel adopts its game's own colour. Only on your own run - on
   someone else's page the cold-steel signal has to win, or the strongest
   affordance on the site gets diluted.
   --accent-text is lifted toward bone because several game accents (Sekiro's
   red, DS3's violet) fail contrast against near-black as text. */

html[data-view="own"] .game__body {
  --accent:      var(--game-accent);
  --accent-soft: color-mix(in srgb, var(--game-accent) 60%, #f6f1e8);
  --accent-deep: color-mix(in srgb, var(--game-accent) 55%, #000);
  --accent-text: color-mix(in srgb, var(--game-accent) 58%, #f6f1e8);
}

.game__body { --accent-text: var(--accent); }

.seg button[aria-pressed="true"] { color: var(--accent-text); }
.bsec { color: color-mix(in srgb, var(--accent-text) 40%, var(--faint)); }

/* ═══════════════════════════════════════════ sticky toolbar ═══════════ */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: 0 -0.4rem;
  padding: 0.7rem 0.8rem;
  background: linear-gradient(180deg, var(--ash-2) 78%, rgba(23, 20, 18, 0.92));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--edge);
  border-radius: var(--r) var(--r) 0 0;
}

.toolbar__who {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.toolbar__who b {
  color: var(--accent-text);
  font-weight: 600;
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.toolbar__who span { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sweep { flex: 0 0 auto; }
.sweep[data-state="clear"]:hover { border-color: #c9463a; color: #e2685c; }

/* ═══════════════════════════════════════════ next-boss line ═══════════ */

.game__next {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.74rem;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(6, 5, 4, 0.9);
  min-width: 0;
}

.game__next i {
  font-style: normal;
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--g);
  border: 1px solid color-mix(in srgb, var(--g) 45%, transparent);
  border-radius: 3px;
  padding: 0.1rem 0.36rem;
  flex: 0 0 auto;
}

.game__next em {
  font-style: normal;
  color: var(--faint);
  font-size: 0.68rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game[data-done="1"] .game__next { display: none; }

/* ═══════════════════════════════════════════ ghost marks ══════════════ */

.ghosts { display: flex; align-items: center; gap: 2px; margin-right: 0.35rem; }

.ghost {
  width: 15px; height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--ink);
  opacity: 0.55;
  transition: opacity 200ms;
}

.ghosts:hover .ghost { opacity: 1; }
.ghost svg { width: 9px; height: 9px; stroke: var(--muted); fill: none; stroke-width: 2; }

.ghost--more {
  font-size: 0.52rem;
  font-family: var(--mono);
  color: var(--faint);
  width: auto;
  padding: 0 3px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════ victory flourish ═════════ */

.fxlayer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.game[data-flourish="1"] {
  animation: seal 1900ms var(--ease);
}

@keyframes seal {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--seal) 70%, transparent); }
  18%  { box-shadow: 0 0 34px 6px color-mix(in srgb, var(--seal) 55%, transparent),
                     inset 0 0 60px color-mix(in srgb, var(--seal) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.game[data-flourish="1"] .game__head::after { opacity: 1; height: 2px; }

/* Beaten games keep a slow, quiet glow so a finished run reads at a glance. */
.game[data-done="1"] .game__head::after {
  height: 2px;
  opacity: 0.85;
  animation: emberline 4.5s var(--ease-io) infinite;
}

@keyframes emberline {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ═══════════════════════════════════════════ row flash (search jump) ══ */

.boss[data-flash="1"] {
  animation: flash 1600ms var(--ease);
  border-radius: var(--r);
}

@keyframes flash {
  0%, 100% { background: transparent; }
  15%      { background: color-mix(in srgb, var(--accent) 26%, transparent); }
}

/* ═══════════════════════════════════════════ global search ════════════ */

.gsearch { position: relative; flex: 1 1 13rem; min-width: 0; max-width: 20rem; }

.gsearch__input {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--edge-hi);
  color: var(--bone);
  padding: 0.55rem 0.85rem;
  border-radius: var(--r);
  font-size: 0.78rem;
}

.gsearch__input::placeholder { color: var(--faint); letter-spacing: 0.04em; }
.gsearch__input:focus { outline: none; border-color: var(--accent); }

.gsearch__results {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  min-width: 22rem;
  z-index: 40;
  background: linear-gradient(180deg, var(--ash-3), var(--ash-2));
  border: 1px solid var(--edge-hi);
  border-radius: var(--r);
  box-shadow: 0 26px 60px -20px #000;
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}

.gsrow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.5rem 0.8rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--edge);
  text-align: left;
  cursor: pointer;
  transition: background 150ms;
}

.gsrow:last-child { border-bottom: 0; }
.gsrow:hover { background: rgba(255, 255, 255, 0.04); }

.gsrow__mark {
  width: 13px; height: 13px;
  border: 1px solid var(--edge-hi);
  border-radius: 2px;
}

.gsrow__mark[data-killed="1"] { background: var(--accent); border-color: var(--accent); }

.gsrow__name { font-size: 0.82rem; min-width: 0; }
.gsrow__name span {
  display: block;
  font-size: 0.66rem;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gsrow__game {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.gsempty { padding: 0.9rem; font-size: 0.76rem; color: var(--faint); text-align: center; }

/* ═══════════════════════════════════════════ toast action ═════════════ */

.toast__action {
  margin-left: 0.8rem;
  background: none;
  border: 1px solid var(--edge-hi);
  color: var(--accent);
  border-radius: var(--r-sm);
  padding: 0.15rem 0.55rem;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
}

.toast__action:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.toast[data-show="1"] { pointer-events: auto; }

@media (max-width: 720px) {
  .gsearch { max-width: none; flex-basis: 100%; order: -1; }
  .gsearch__results { min-width: 0; }
  .toolbar__who { width: 100%; }
}

/* ═══════════════════════════════════════════ acts (sub-sections) ══════ */

.act {
  border: 1px solid var(--edge);
  border-radius: var(--r);
  margin: 0.4rem 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.16);
}

.act[data-open="1"] { border-color: var(--edge-hi); }

.act__head {
  display: grid;
  grid-template-columns: auto 1fr minmax(3rem, 8rem) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background 180ms;
}

.act__head:hover { background: rgba(255, 255, 255, 0.03); }

.act__chev {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 300ms var(--ease), border-color 200ms;
}

.act[data-open="1"] .act__chev { transform: rotate(45deg); border-color: var(--accent-text); }

.act__name {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.act[data-full="1"] .act__name { color: var(--seal); }

.act__bar {
  height: 2px;
  background: var(--ash-3);
  border-radius: 2px;
  overflow: hidden;
}

.act__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width 600ms var(--ease);
}

.act[data-full="1"] .act__bar i { background: var(--seal); }

.act__count {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.act__count b { color: var(--bone); font-weight: 600; }
.act[data-full="1"] .act__count b { color: var(--seal); }

.act__body { display: none; padding: 0.15rem 0.35rem 0.5rem; }
.act[data-open="1"] .act__body { display: block; animation: unfold 320ms var(--ease); }

/* ═══════════════════════════════════════════ back to top ══════════════ */

.totop {
  position: sticky;
  bottom: 1rem;
  display: block;
  margin: 0.9rem auto 0.2rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--edge-hi);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ash-3) 88%, transparent);
  backdrop-filter: blur(8px);
  color: var(--bone);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 12px 30px -12px #000;
  transition: border-color 200ms, color 200ms, transform 200ms var(--ease);
  animation: risein 300ms var(--ease);
}

.totop:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-2px); }
.totop span { color: var(--accent-text); margin-right: 0.3rem; }

@keyframes risein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════ official wordmark ════════ */

.game__logo {
  display: block;
  overflow: hidden;
  margin-bottom: 0.34rem;
  filter: drop-shadow(0 2px 10px rgba(6, 5, 4, 0.95)) drop-shadow(0 0 2px rgba(6, 5, 4, 0.8));
  transition: filter 400ms var(--ease), opacity 400ms;
}

.game__logo img {
  display: block;
  max-width: none;
  /* Hidden until fitLogo has measured the ink; otherwise a 1280x720 canvas of
     mostly transparency flashes at full size before being trimmed. */
  visibility: hidden;
}

.game__logo[data-fit] img { visibility: visible; }

/* Unstarted games get a muted wordmark, matching the desaturated art. */
.game[data-phase="cold"] .game__logo { opacity: 0.72; filter: drop-shadow(0 2px 10px rgba(6, 5, 4, 0.95)) grayscale(0.4); }
.game[data-done="1"] .game__logo { filter: drop-shadow(0 2px 12px rgba(6, 5, 4, 0.95)) drop-shadow(0 0 14px color-mix(in srgb, var(--seal) 45%, transparent)); }

.game[data-logo="0"] .game__logo { display: none; }

/* With a wordmark present the plain title drops to a small caption beneath it,
   so the name is still selectable, searchable and legible if art ever fails. */
.game__logo[data-fit] ~ .game__title {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.game__logo[data-fit] ~ .game__title .game__year { font-size: 0.62rem; }

/* ═══════════════════════════════════ persistent glow (beaten) ═════════ */

.fxlayer--ambient { z-index: 1; }

.game[data-done="1"] {
  border-color: color-mix(in srgb, var(--seal) 34%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--seal) 16%, transparent),
    0 0 34px -14px color-mix(in srgb, var(--seal) 55%, transparent);
  animation: alight 6s var(--ease-io) infinite;
}

@keyframes alight {
  0%, 100% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--seal) 14%, transparent),
      0 0 26px -16px color-mix(in srgb, var(--seal) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--seal) 26%, transparent),
      0 0 46px -12px color-mix(in srgb, var(--seal) 70%, transparent);
  }
}

/* A warm wash inside the bar itself, strongest at the left where the ring is. */
.game[data-done="1"] .game__head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(80% 160% at 6% 50%, color-mix(in srgb, var(--seal) 13%, transparent), transparent 62%);
  animation: alightwash 6s var(--ease-io) infinite;
}

@keyframes alightwash {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

.game[data-done="1"] .ring__fill { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--seal) 75%, transparent)); }

@media (prefers-reduced-motion: reduce) {
  .game[data-done="1"],
  .game[data-done="1"] .game__head::before { animation: none; }
}

@media (max-width: 720px) {
  .act__head { grid-template-columns: auto 1fr auto; }
  .act__bar { display: none; }
  .game__logo { margin-bottom: 0.28rem; }
}

/* ═══════════════════════════════ boss row: flags beside the name ══════ */
/* Tags stranded at the far right of a 1200px row force the eye to travel.
   They belong next to what they describe. */

.boss__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.boss__flags {
  display: inline-flex;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.boss__side {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.bgroup__head .boss__title .bgroup__count { margin-left: 0.15rem; }

/* Strike the name only - a line through the tags beside it reads as noise. */
.boss[data-killed="1"] .boss__name { text-decoration: none; color: inherit; }

.boss__nm { min-width: 0; overflow-wrap: anywhere; }

.boss[data-killed="1"] .boss__nm {
  color: var(--faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
}

.boss[data-killed="1"] .boss__flags { opacity: 0.55; }

/* ═══════════════════════════════════════════ change PIN ═══════════════ */

.pinbox {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--edge);
}

.pinbox > .btn { width: 100%; }
.pinbox #pinFields { margin-top: 1rem; }
.pinbox #pinFields .btn--solid { width: 100%; }