/* Pullblade.

   Single theme on purpose: the interface floats over a lit 3D room, and a light
   mode would mean a second set of legibility decisions for every panel against
   six different zone skies. The platform's warm-dark palette is the ground —
   #14161a rather than black, ink softened rather than pure white.

   Colour discipline: the nine rarity hues are the only saturated values in the
   game, and they are set from JS (--tier) because they are data. Nothing else
   is allowed a hue.

   No inline styles anywhere — docker/headers.inc ships style-src 'self' with no
   'unsafe-inline', so dynamic values go through el.style.setProperty(). A
   setAttribute('style', …) would pass in development and fail only in
   production, which is the worst possible place to find out. */

:root {
  --bg:        #14161a;
  --panel:     #1c1f25;
  --panel-2:   #23272e;
  --line:      #2e333b;
  --line-soft: #262a31;
  --ink:       #e9e7e2;
  --ink-soft:  #c3c1bb;
  --muted:     #8b8f97;
  --faint:     #6a6e76;
  --gold:      #d8b45c;
  --accent:    #4fb3a5;
  --danger:    #d9714f;

  --tier: #8b919b;

  --r-common:    #8b919b;
  --r-uncommon:  #6fb383;
  --r-rare:      #6197d4;
  --r-epic:      #a486dc;
  --r-legendary: #dcac41;
  --r-mythic:    #e0705a;
  --r-godly:     #46bab2;
  --r-celestial: #f2ead6;
  --r-secret:    #b48cff;

  --pad: 14px;
  --radius: 10px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .75);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dim { color: var(--muted); }
.num, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; }

kbd {
  font-size: .85em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── World ──────────────────────────────────────────────────────────────── */
#stage { position: fixed; inset: 0; }
#world { display: block; width: 100%; height: 100%; touch-action: none; }

/* ── Nameplate ──────────────────────────────────────────────────────────── */
#nameplate {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  font: 600 13px/1 var(--font);
  letter-spacing: .01em;
  color: #fff;
  background: rgba(20, 22, 26, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
#nameplate[hidden] { display: none; }

/* ── Character creator ──────────────────────────────────────────────────── */
/* The card never sits on top of the character.

   Picking a shirt colour with the shirt hidden behind the card is picking from
   a list of hex codes, which is the one thing this screen exists not to be. On
   a wide screen it goes to the right and leaves the character in the open; on a
   phone it goes to the bottom and leaves the head and shoulders above it. The
   ground is only dimmed, never blacked out, for the same reason. */
#creator {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: end center;
  padding: 20px;
  background: rgba(10, 12, 15, .38);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
@media (min-width: 760px) {
  #creator { place-content: center end; padding-right: 5vw; }
}
#creator[hidden] { display: none; }

.creator__card {
  width: min(380px, calc(100vw - 40px));
  max-height: min(calc(100vh - 40px), 640px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px var(--pad) var(--pad);
  animation: panelIn .2s ease-out backwards;
}
.creator__card h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; }
.creator__sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

.creator__field {
  display: block;
  margin: 14px 0 6px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

#nameInput {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--ink);
}
#nameInput::placeholder { color: var(--faint); }
#nameInput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.creator__warn { margin: 6px 0 0; font-size: 12px; color: var(--danger); }
.creator__warn[hidden] { display: none; }

.sw { display: flex; flex-wrap: wrap; gap: 7px; }
.sw button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  padding: 0;
}
.sw button[aria-pressed="true"] { border-color: var(--ink); }
.sw button:hover { border-color: var(--muted); }

.creator__row { display: flex; gap: 8px; margin-top: 20px; }
.creator__row button {
  flex: 1;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #10231f;
  border-radius: 9px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
}
.creator__row button:disabled { opacity: .4; }
#creatorCancel {
  flex: 0 0 auto;
  background: none;
  color: var(--ink-soft);
  border-color: var(--line);
  font-weight: 500;
}
#creatorCancel[hidden] { display: none; }

/* Tighter on a phone so each palette stays one row and the card leaves the
   character room above it. Two rows of swatches costs sixty pixels a palette,
   and there are three of them. */
@media (max-width: 560px) {
  #creator { padding: 12px; }
  .creator__card { padding: 16px 13px 13px; border-radius: 16px 16px 0 0; }
  .creator__card h2 { font-size: 17px; }
  .creator__sub { margin-bottom: 12px; font-size: 12.5px; }
  .creator__field { margin: 11px 0 5px; }
  #nameInput { padding: 9px 11px; font-size: 14px; }
  .sw { gap: 6px; }
  .sw button { width: 30px; height: 30px; border-radius: 8px; }
  .creator__row { margin-top: 14px; }
  .creator__row button { padding: 10px 12px; }
}

/* ── Floating numbers ───────────────────────────────────────────────────── */
#numbers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.num3d {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform, opacity;
  font: 700 17px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 10px rgba(0,0,0,.5);
  white-space: nowrap;
}
.num3d[hidden] { display: none; }
.num3d[data-kind="hit"]      { color: #ffe6c2; }
.num3d[data-kind="kill"]     { color: #ff8a5c; font-size: 21px; }
.num3d[data-kind="gold"]     { color: var(--gold); }
.num3d[data-kind="strength"] { color: #7fd8ff; }
.num3d[data-kind="drop"]     { color: var(--accent); }

/* ── Readout ────────────────────────────────────────────────────────────── */
#top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  pointer-events: none;
}

.stat {
  background: rgba(20, 22, 26, .72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 7px 12px;
  min-width: 0;
}
.stat b {
  display: block;
  font: 600 17px/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 2px;
}
.stat--zone { flex: 1 1 auto; }
.stat--zone b { font-family: var(--font); font-weight: 600; }
.stat--gold b { color: var(--gold); }
.stat--power b { color: var(--accent); }

.stat--mats { flex: none; }
.stat--mats b { color: var(--gold); }
.stat--mats[hidden] { display: none; }

/* ── Buff strip ─────────────────────────────────────────────────────────── */
#buffs {
  position: fixed;
  top: calc(74px + env(safe-area-inset-top));
  left: var(--pad);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  pointer-events: none;
}
#buffs b {
  display: inline-flex;
  gap: 7px;
  align-items: baseline;
  background: rgba(20, 22, 26, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--tier, var(--accent));
  border-radius: 7px;
  padding: 4px 10px;
  font: 600 11.5px/1 var(--font);
  color: var(--ink-soft);
}
#buffs b i { font-style: normal; font-family: var(--mono); color: var(--faint); font-weight: 400; }

/* ── Boss ───────────────────────────────────────────────────────────────── */
#boss {
  position: fixed;
  top: calc(74px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 28px));
  pointer-events: none;
  text-align: center;
}
.boss__bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.boss__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #b8503a, #e08a5e);
  transform-origin: left center;
  transition: transform .12s linear;
}
.boss__line {
  display: flex;
  justify-content: space-between;
  margin: 5px 2px 0;
  font: 500 11.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
#reveal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 78px);
  text-align: center;
  pointer-events: none;
  width: min(460px, calc(100% - 28px));
}
#revealTier {
  margin: 0;
  font: 600 12px/1 var(--font);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tier);
  text-shadow: 0 0 18px color-mix(in srgb, var(--tier) 55%, transparent);
}
#revealName {
  margin: 7px 0 0;
  font: 600 26px/1.15 var(--font);
  letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .85);
}
#revealPower, #revealExtra {
  margin: 4px 0 0;
  font: 500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
#reveal[hidden] { display: none; }
body[data-revealing="true"] #reveal { animation: rise .26s ease-out backwards; }

/* `rise` has only a from-frame, so fill-mode forwards would hold the element's
   own base style and re-hide it. backwards plus the end state as a normal
   declaration is the shape that works — the same trap the homepage documents. */
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 92px); }
}

/* ── Pull ───────────────────────────────────────────────────────────────── */
/* Bottom-right rather than centred: a 112px disc in the middle of the screen
   covers the stone, which is the one thing worth looking at. The corner is also
   where a thumb already is on a phone. Holding the stone itself does the same
   job for anyone who would rather. */
/* Two buttons now: the swing, which is always available, and a contextual Use
   that only lights up next to something. */
#use {
  min-width: 118px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(28, 31, 37, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  transition: opacity .16s ease, border-color .16s ease;
}
#use[data-ready="false"] { opacity: .3; pointer-events: none; }
#use[data-ready="true"]:hover { border-color: var(--accent); }

#pullbar {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(64px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#attack {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(28, 31, 37, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display: grid;
  place-content: center;
  gap: 1px;
  touch-action: none;
  transition: transform .12s ease, border-color .2s ease;
}
#attack:hover { border-color: var(--accent); }
#attack:active { transform: scale(.92); }


.pull__ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}
.pull__ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* --p is written by ui/pull.js through setProperty, never as an attribute. */
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 54px);
  mask: radial-gradient(circle, transparent 54px, #000 54px);
  opacity: .9;
}
.pull__label { font: 600 19px/1 var(--font); letter-spacing: .01em; }
.pull__sub {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 4px;
}

/* The button is dim until there is something to press it on, which is most of
   what teaches that you have to walk somewhere first. */


/* ── Prompt ─────────────────────────────────────────────────────────────── */
#prompt {
  position: fixed;
  left: 50%;
  bottom: calc(104px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 14px;
  background: rgba(20, 22, 26, .8);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: var(--shadow);
  pointer-events: none;
  white-space: nowrap;
  animation: promptIn .16s ease-out backwards;
}
#prompt[hidden] { display: none; }
#prompt b { font-size: 14px; font-weight: 600; }
#prompt span {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 5px); } }

/* ── Toggles ────────────────────────────────────────────────────────────── */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__box {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  position: relative;
  transition: background .18s ease, border-color .18s ease;
}
.toggle__box::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .18s ease, background .18s ease;
}
.toggle input:checked + .toggle__box { background: color-mix(in srgb, var(--accent) 30%, transparent); border-color: var(--accent); }
.toggle input:checked + .toggle__box::after { transform: translateX(14px); background: var(--accent); }
.toggle input:focus-visible + .toggle__box { outline: 2px solid var(--accent); outline-offset: 2px; }

#autoWrap {
  background: rgba(20, 22, 26, .75);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 13px 5px 9px;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
#tabs {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 3px;
  background: rgba(20, 22, 26, .8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
#tabs::-webkit-scrollbar { display: none; }
#tabs button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
#tabs button:hover { color: var(--ink); }
#tabs button[aria-expanded="true"] { background: var(--panel-2); color: var(--ink); }

/* Affix chips: the two bonuses an item carries, in the colour of the stat. */
.aff { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.aff span {
  font: 500 10.5px/1 var(--mono);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.aff span[data-k="power"] { color: #e0705a; border-color: #5a3630; }
.aff span[data-k="speed"] { color: #6fb383; border-color: #2f4a38; }
.aff span[data-k="luck"]  { color: #6197d4; border-color: #2c405c; }
.aff span[data-k="gold"]  { color: var(--gold); border-color: #4d4128; }
.fuseTag { color: var(--accent); font-family: var(--mono); font-size: 11px; }

.slotName {
  font: 600 10px/1 var(--font);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  display: block;
  margin-bottom: 3px;
}
.empty { color: var(--faint); font-style: italic; }
#tabs i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}
#tabs i[hidden] { display: none; }
#shopDot { color: var(--accent); font-size: 14px; }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.panel {
  position: fixed;
  left: 50%;
  bottom: calc(58px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(520px, calc(100% - 20px));
  max-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: panelIn .18s ease-out backwards;
}
.panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translate(-50%, 10px); } }

.panel__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px var(--pad) 11px;
  border-bottom: 1px solid var(--line-soft);
}
.panel__head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.panel__head p { margin: 0; flex: 1; font-size: 12.5px; font-family: var(--mono); }
.x {
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
}
.x:hover { color: var(--ink); }

.panel__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--line-soft);
}
.panel__tools button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  transition: border-color .16s ease, color .16s ease;
}
.panel__tools button:hover { border-color: var(--accent); color: var(--ink); }

.list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.list:empty::after {
  content: "Nothing here yet.";
  display: block;
  padding: 26px var(--pad);
  color: var(--faint);
  font-size: 13.5px;
  text-align: center;
}

/* One row shape for blades, upgrades and zones alike. */
.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px var(--pad);
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row__chip {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--tier);
  flex: none;
}
.row__body { flex: 1; min-width: 0; }
.row__name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row__meta {
  display: block;
  font: 400 11.5px/1.35 var(--mono);
  color: var(--faint);
  margin-top: 1px;
}
.row__meta em { font-style: normal; color: var(--tier); }
.row__n {
  font: 500 12.5px/1 var(--mono);
  color: var(--muted);
  flex: none;
}
.row button {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink-soft);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 12.5px;
  flex: none;
  transition: border-color .16s ease, color .16s ease, opacity .16s ease;
}
.row button:hover:not(:disabled) { border-color: var(--accent); color: var(--ink); }
.row button:disabled { opacity: .38; cursor: default; }
.row[data-on="true"] { background: rgba(79, 179, 165, .07); }
.row[data-on="true"] .row__name { color: var(--accent); }

.list--shop .row__name { font-weight: 600; }
.price { color: var(--gold); }
.price[data-afford="false"] { color: var(--faint); }

.mat { color: var(--gold); font-family: var(--mono); }
.questBar {
  display: block;
  height: 4px;
  border-radius: 3px;
  background: var(--panel-2);
  margin-top: 5px;
  overflow: hidden;
}
.questBar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }

#rebirthBox {
  padding: 13px var(--pad) 15px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
#rebirthBox h3 { margin: 0 0 3px; font-size: 14px; }
#rebirthBox p { margin: 0 0 10px; font-size: 12.5px; }
#rebirth {
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold);
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
}
#rebirth[data-armed="true"] { background: var(--gold); color: #1a1a1a; }

/* ── Index ──────────────────────────────────────────────────────────────── */
#indexGrid {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px var(--pad) 16px;
}
.idxTier { margin-bottom: 14px; }
.idxTier > p {
  margin: 0 0 7px;
  font: 600 10.5px/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tier);
  display: flex;
  justify-content: space-between;
}
.idxTier > p span { font-family: var(--mono); color: var(--faint); letter-spacing: 0; }
.idxRow { display: flex; flex-wrap: wrap; gap: 5px; }
.idxCell {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  display: grid;
  place-content: center;
  font: 600 11px/1 var(--mono);
  color: var(--faint);
}
.idxCell[data-found="true"] {
  border-color: var(--tier);
  background: color-mix(in srgb, var(--tier) 16%, transparent);
  color: var(--tier);
}

/* ── Zones ──────────────────────────────────────────────────────────────── */
.list--zones .row[data-locked="true"] { opacity: .45; }
.list--zones .row__meta { white-space: normal; }

/* ── Toasts ─────────────────────────────────────────────────────────────── */
#toasts {
  position: fixed;
  left: 50%;
  top: calc(116px + env(safe-area-inset-top));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100% - 28px);
}
.toast {
  background: rgba(28, 31, 37, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--tier);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 13px;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  animation: toastIn .2s ease-out backwards;
}
.toast b { color: var(--tier); font-weight: 600; }
.toast[data-out="true"] { opacity: 0; transition: opacity .3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } }

/* ── Sound ──────────────────────────────────────────────────────────────── */
#sound {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  display: grid;
  place-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(20, 22, 26, .75);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: var(--muted);
  transition: color .16s ease, border-color .16s ease;
}
#sound:hover { color: var(--ink); border-color: var(--accent); }
#sound svg { width: 19px; height: 19px; }
#sound[data-on="true"] .i-mute { display: none; }
#sound[data-on="false"] .i-wave { display: none; }
#sound[data-on="false"] { color: var(--faint); }

/* ── Chrome ─────────────────────────────────────────────────────────────── */
#hint {
  position: fixed;
  left: 50%;
  bottom: calc(54px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  transition: opacity .3s ease;
}
#hint[data-gone="true"] { opacity: 0; }
/* While it is teaching rather than reminding, it gets a ground of its own —
   a line of grey text over a bright field is a line nobody reads. */
#hint[data-nudge="true"] {
  background: rgba(20, 22, 26, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 7px 15px;
  color: var(--ink-soft);
  font-size: 13px;
  max-width: calc(100vw - 32px);
  white-space: normal;
  text-align: center;
}
#hint[data-nudge="true"] b { color: var(--accent); }
#hint b { color: var(--muted); font-weight: 600; }
#hint .taps { display: none; }
@media (hover: none) {
  #hint .keys { display: none; }
  #hint .taps { display: inline; }
}

#saveWarn {
  position: fixed;
  left: 50%;
  top: calc(12px + env(safe-area-inset-top));
  transform: translateX(-50%);
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
#saveWarn[hidden] { display: none; }

#boot {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  z-index: 50;
  transition: opacity .45s ease;
}
#boot[data-gone="true"] { opacity: 0; pointer-events: none; }
.boot__title { margin: 0; font: 300 38px/1 var(--font); letter-spacing: .02em; }
.boot__title b { font-weight: 700; }
#bootMsg { margin: 0; font-size: 13px; color: var(--faint); }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  /* One row, always. Wrapping put a second row of figures straight through the
     boss bar, which is pinned below a header of a fixed height. */
  #top { gap: 6px; padding-inline: 10px; }
  .stat { padding: 6px 9px; }
  .stat b { font-size: 15px; }
  .stat span { font-size: 9.5px; }
  #boss { top: calc(66px + env(safe-area-inset-top)); }
  #reveal { transform: translate(-50%, 54px); }
  /* Two buttons now: the swing, which is always available, and a contextual Use
   that only lights up next to something. */
#use {
  min-width: 118px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(28, 31, 37, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  transition: opacity .16s ease, border-color .16s ease;
}
#use[data-ready="false"] { opacity: .3; pointer-events: none; }
#use[data-ready="true"]:hover { border-color: var(--accent); }

#pullbar { right: calc(14px + env(safe-area-inset-right)); bottom: calc(62px + env(safe-area-inset-bottom)); }
  #attack { width: 96px; height: 96px; }
  .pull__ring i {
    -webkit-mask: radial-gradient(circle, transparent 46px, #000 46px);
    mask: radial-gradient(circle, transparent 46px, #000 46px);
  }
  #revealName { font-size: 21px; }
  #prompt { bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* The tab bar runs nearly edge to edge at this width, so the sound button
     goes above it rather than under it. */
  #sound { bottom: calc(62px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); }
  .panel { max-height: 58vh; }
  #hint .keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}