/* Doomnight Avenger's chrome.
   Two registers on purpose: a quiet, thin, letter-spaced frame borrowed from the owner's
   reference images, and the heavy Diablo furniture — globes and a belt — at the foot. */

.dn-hud {
  --ink: #f2f5fb;
  --dim: rgba(242, 245, 251, 0.58);
  --panel: rgba(9, 11, 16, 0.82);
  --edge: rgba(255, 255, 255, 0.13);
  --gold: #e8c46a;
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--ink);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

.dn-hud button { pointer-events: auto; font: inherit; cursor: pointer; }

/* ---- title plate --------------------------------------------------------- */

.dn-title { position: absolute; top: 20px; left: 26px; }
.dn-kicker {
  margin: 0;
  font-size: 9.5px;
  letter-spacing: 0.34em;
  color: var(--dim);
  text-transform: uppercase;
}
.dn-title h1 {
  margin: 4px 0 0;
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 300;
  letter-spacing: 0.30em;
  line-height: 1;
}
.dn-act {
  margin: 5px 0 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(242, 245, 251, 0.76);
  letter-spacing: 0.02em;
}
.dn-rule {
  display: block;
  width: 46px;
  height: 1px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.4);
}

/* ---- frame counter ------------------------------------------------------- */

.dn-perf {
  position: absolute;
  top: 22px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--dim);
}
.dn-perf i { width: 5px; height: 5px; border-radius: 50%; background: #7cf7c6; }
.dn-perf b { color: var(--ink); font-weight: 600; }
.dn-perf-sep { opacity: 0.4; }

/* ---- zone plate ---------------------------------------------------------- */

.dn-zone { position: absolute; bottom: 26px; left: 26px; display: flex; gap: 12px; align-items: center; }
.dn-diamond {
  width: 13px;
  height: 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: rotate(45deg);
  flex: none;
}
.dn-zone-act { margin: 0; font-size: 9.5px; letter-spacing: 0.3em; color: var(--dim); }
.dn-zone-name { margin: 2px 0 0; font-size: 15px; letter-spacing: 0.02em; }

/* ---- the use prompt ------------------------------------------------------- */
/* Sits above the dock, centred, and only while you are standing on something that does
   anything. A key cap rather than a sentence, because it is read at a glance mid-run. */

.dn-use {
  position: absolute;
  bottom: 232px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 8px;
  background: rgba(8, 7, 6, 0.86);
  border: 1px solid rgba(176, 140, 74, 0.55);
  box-shadow: 0 0 22px -6px rgba(232, 196, 106, 0.5);
  white-space: nowrap;
}
.dn-use[hidden] { display: none; }
.dn-use b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  color: #0a0906;
  background: linear-gradient(180deg, #f0d288, #a8843a);
  border: 1px solid rgba(0, 0, 0, 0.6);
}
.dn-use span { font-size: 12px; letter-spacing: 0.1em; color: var(--ink); }

@media (max-width: 820px) {
  .dn-use { bottom: 196px; }
}

/* ---- control legend ------------------------------------------------------ */

.dn-legend {
  position: absolute;
  bottom: 24px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Kept clear of the dock, which is centred and about 540px wide. Without the second
     term the legend runs under the mana globe on every desktop width. */
  max-width: min(46vw, calc(50vw - 320px));
}
.dn-legend-cell { display: inline-flex; gap: 5px; align-items: baseline; }
.dn-legend-cell b { color: var(--ink); font-weight: 600; }
.dn-legend-cell i { font-style: normal; }
.dn-legend-btn {
  background: none;
  border: 0;
  color: var(--dim);
  letter-spacing: 0.12em;
  font-size: 10px;
  padding: 2px 4px;
}
.dn-legend-btn:hover { color: var(--ink); }
.dn-saved { letter-spacing: 0.24em; opacity: 0.5; font-size: 9px; }

/* ---- field notes --------------------------------------------------------- */

.dn-notes {
  position: absolute;
  /* Below the boss bar, which lives at 58px and outranks a field note. */
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 8px;
  width: min(420px, 74vw);
}
.dn-note {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--gold);
  border-radius: 4px;
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.dn-note.in { opacity: 1; transform: translateY(0); }
.dn-note-kicker { display: block; font-size: 8.5px; letter-spacing: 0.3em; color: var(--dim); }
.dn-note strong { display: block; font-size: 13px; margin: 3px 0 2px; font-weight: 500; }
.dn-note em { font-size: 11.5px; color: var(--dim); }

/* ---- floating labels ----------------------------------------------------- */

.dn-plate, .dn-ground-label { position: absolute; top: 0; left: 0; will-change: transform; }
.dn-plate {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 4px 9px 5px;
  min-width: 96px;
  text-align: center;
}
.dn-plate[hidden] { display: none; }
.dn-plate strong { display: block; font-size: 11.5px; font-weight: 500; }
.dn-plate-bar {
  height: 3px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  overflow: hidden;
}
.dn-plate-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b4262f, #e4525f); }
/* What the thing in front of you does not care about. Nothing is shown at zero, so a plate
   with three rows on it is telling you something. */
.dn-plate-resists { display: flex; gap: 7px; margin-top: 4px; }
.dn-plate-resists:empty { display: none; }
.dn-res { font-size: 8.5px; letter-spacing: 0.14em; font-weight: 600; opacity: 0.85; }
.dn-res.immune { opacity: 1; text-shadow: 0 0 7px currentColor; }
.dn-res.weak { text-decoration: underline; text-underline-offset: 2px; }

.dn-ground-label {
  font-size: 11px;
  letter-spacing: 0.02em;
  background: rgba(6, 8, 12, 0.7);
  padding: 1px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.dn-ground-label[hidden] { display: none; }

/* ---- the dock: globes, belt, skills -------------------------------------- */

.dn-dock {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.dn-dock .dn-globe { margin: 0 -14px; z-index: 1; }

/* The globes are three layers, and it matters which is which. The liquid `i` is a DOM
   element so it can rise and fall; `::after` is the generated glass — a hammered ring and
   a transparent sphere with a highlight — laid over it; the reading sits above both. A
   gradient in a circle is a coloured dot, and this is the difference. */
.dn-globe {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(30, 26, 22, 0.9), rgba(4, 5, 7, 0.95));
  overflow: hidden;
  flex: none;
}
.dn-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chrome-orb) center / 100% 100% no-repeat;
  pointer-events: none;
}
.dn-globe i {
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  transition: height 130ms linear;
}
/* The meniscus. A liquid has a surface, and the surface is what tells you it is a liquid
   rather than a bar that happens to be inside a circle. */
.dn-globe i::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: -5px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 7px -1px rgba(255, 255, 255, 0.22);
  animation: dn-swell 3.6s ease-in-out infinite alternate;
}
@keyframes dn-swell {
  from { transform: translateY(-1.5px) scaleY(0.9); }
  to { transform: translateY(1.5px) scaleY(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .dn-globe i::after { animation: none; }
}
.dn-globe.life i { background: linear-gradient(180deg, #d8404f 0%, #a71e29 55%, #63111a 100%); }
.dn-globe.life[data-low="1"] i { background: linear-gradient(180deg, #ff5f6d, #b4262f); }
.dn-globe.mana i { background: linear-gradient(180deg, #4f83ee 0%, #2a4fbb 55%, #16276b 100%); }
.dn-globe span {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* The belt, the skills and the experience track sit on a slab, the way they do in D2 —
   furniture bolted to the bottom of the screen rather than cards floating over it. */
.dn-dock-mid {
  display: grid;
  gap: 7px;
  justify-items: center;
  padding: 10px 16px 22px;
  border: 20px solid transparent;
  border-image: var(--chrome-frame) var(--chrome-frame-slice, 26) round;
  background: var(--chrome-slate) 0 0 / 128px 128px repeat, rgba(10, 9, 8, 0.92);
  margin-bottom: 6px;
}
.dn-belt { display: flex; gap: 6px; }
.dn-belt-slot {
  position: relative;
  width: 44px;
  height: 50px;
  border: 7px solid transparent;
  border-image: var(--chrome-socket) var(--chrome-socket-slice, 15) fill stretch;
  background: rgba(10, 12, 18, 0.6);
  color: var(--ink);
  overflow: hidden;
}
.dn-belt-slot::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: var(--tint, transparent);
  opacity: 0.4;
}
.dn-belt-slot.empty::before { display: none; }
.dn-belt-slot b { position: absolute; top: 2px; left: 4px; font-size: 9px; color: var(--dim); font-weight: 500; }
.dn-belt-slot span { position: relative; font-size: 14px; font-weight: 700; }

.dn-skills { display: flex; gap: 6px; }
.dn-skill {
  border: 8px solid transparent;
  border-image: var(--chrome-socket) var(--chrome-socket-slice, 15) fill stretch;
  background: rgba(10, 12, 18, 0.6);
  color: var(--ink);
  padding: 2px 6px;
  opacity: 0.52;
  min-width: 74px;
}
.dn-skill.active { opacity: 1; box-shadow: 0 0 0 1px var(--gold), 0 0 16px -4px var(--gold); }
.dn-skill strong { display: block; font-size: 11.5px; font-weight: 500; }
.dn-skill small { display: block; font-size: 9.5px; color: var(--dim); }

.dn-xp {
  position: relative;
  width: 264px;
  height: 19px;
  border: 5px solid transparent;
  border-image: var(--chrome-socket) var(--chrome-socket-slice, 15) stretch;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.dn-xp i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #f0d288, #8a6a2a);
  box-shadow: 0 0 8px -1px rgba(232, 196, 106, 0.8);
}
.dn-xp span {
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--dim);
  white-space: nowrap;
}

/* ---- status strip -------------------------------------------------------- */

.dn-strip { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dn-chip {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 99px;
  padding: 3px 12px;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink);
}
.dn-chip.gold { color: var(--gold); }
.dn-chip.points { border-color: var(--gold); color: #0a0c11; background: var(--gold); font-weight: 700; }
.dn-chip[hidden] { display: none; }

/* ---- log ----------------------------------------------------------------- */

.dn-log {
  position: absolute;
  right: 26px;
  bottom: 104px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  max-width: 40vw;
}
.dn-log li { font-size: 11.5px; color: var(--dim); line-height: 1.55; }
.dn-log li:last-child { color: var(--ink); }
.dn-log .dn-log-hurt, .dn-log .dn-log-death { color: #ff8f88; }
.dn-log .dn-log-level, .dn-log .dn-log-gold { color: var(--gold); }
.dn-log .dn-log-shrine { color: #6fd2ff; }
.dn-log .dn-log-miss { color: rgba(242, 245, 251, 0.4); }
.dn-log .dn-log-unique { color: #c9853f; }
.dn-log .dn-log-rare { color: #f2e35c; }
.dn-log .dn-log-magic { color: #7f92ff; }
/* A quest line is the one thing in the log worth interrupting a fight to read. */
.dn-log .dn-log-quest { color: #c7d94f; }

/* The room under your feet. It fades rather than snapping, because it changes as you walk
   and a hard cut on every threshold reads as a flicker. */
.dn-zone-room {
  margin: 2px 0 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  transition: opacity 320ms ease;
}
.dn-zone-room.on { opacity: 0.75; }

/* ---- the automap ------------------------------------------------------------
   Top right, out of the way of the dock and the log, and deliberately not centred: this is
   a thing you hold open while walking, not a screen you stop on. */
.dn-map {
  position: absolute;
  top: 58px;
  right: 18px;
  padding: 8px 8px 6px;
  background: rgba(8, 9, 13, 0.82);
  border: 1px solid rgba(242, 245, 251, 0.1);
  pointer-events: none;
}
.dn-map canvas { display: block; image-rendering: pixelated; }
.dn-map-label {
  margin: 6px 0 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
@media (max-width: 1180px) { .dn-map { top: 92px; } }
@media (max-width: 860px) { .dn-map { display: none; } }

/* An open way back. Warmer than the room line under it and always on when it is there,
   because it is a thing you are holding rather than a thing you are standing in. */
.dn-zone-portal {
  margin: 2px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6fa8d2;
  opacity: 0;
  transition: opacity 320ms ease;
}
.dn-zone-portal.on { opacity: 0.9; }

/* A wager is the one thing in the shop with no quality colour on it, because it does not
   have one yet. The dashed edge is the whole point: it is not a finished item. */
.dn-wager { border-style: dashed; --tint: rgba(242, 245, 251, 0.28); }
.dn-wager strong { color: var(--dim); }

/* ---- sets, and the unread mark -----------------------------------------------
   Set green is the one colour in this interface that means "and there is more of this",
   so it is used for a set that is paying and withheld from one that is not yet. */
.dn-set {
  margin-top: 8px;
  padding: 7px 9px;
  border-left: 2px solid rgba(242, 245, 251, 0.12);
  background: rgba(8, 9, 13, 0.34);
}
.dn-set b { font-size: 12px; color: var(--dim); }
.dn-set-count {
  float: right;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.dn-set-line { margin: 3px 0 0; font-size: 11px; line-height: 1.5; color: var(--dim); }
.dn-set.on { border-left-color: #2fbf3f; }
.dn-set.on b { color: #63d96f; }
.dn-set.on .dn-set-count { color: #63d96f; }
.dn-set.on .dn-set-line { color: rgba(242, 245, 251, 0.78); }

/* An unread item is worth saying twice: once in the name, once here. */
.dn-tip-unread { display: block; margin-top: 3px; color: #d8ccab; letter-spacing: 0.04em; }

/* ---- the journal ------------------------------------------------------------
   Three states, and the difference between them is carried by colour and weight rather
   than by an icon, because a tick and a cross at 11px read as the same grey smudge. */
.dn-quests { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.dn-quest {
  padding: 8px 10px;
  border: 1px solid rgba(242, 245, 251, 0.08);
  background: rgba(8, 9, 13, 0.42);
}
.dn-quest-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dn-quest-top b { font-size: 12.5px; letter-spacing: 0.02em; }
.dn-quest-depth { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dim); }
.dn-quest-text { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--dim); }
.dn-quest-reward { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.02em; color: var(--gold); }

.dn-quest.unknown { opacity: 0.55; }
.dn-quest.unknown b { color: var(--dim); font-weight: 500; }
.dn-quest.active { border-color: rgba(199, 217, 79, 0.34); }
.dn-quest.active b { color: #d8e57a; }
.dn-quest.done { border-color: rgba(242, 245, 251, 0.06); }
.dn-quest.done b { color: var(--ink); }
.dn-quest.done .dn-quest-reward { color: rgba(242, 245, 251, 0.34); }

/* ---- panels -------------------------------------------------------------- */

.dn-panel {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  max-height: 86vh;
  overflow-y: auto;
  /* Carved stone, not a dark card: the border is a generated frame with a raised outer
     rail, mortar joints and a boss at each corner, and the interior is tiling slate. */
  background: var(--chrome-slate) 0 0 / 128px 128px repeat, rgba(9, 8, 7, 0.97);
  border: 26px solid transparent;
  border-image: var(--chrome-frame) var(--chrome-frame-slice, 26) round;
  border-radius: 0;
  padding: 14px 18px 20px;
  pointer-events: auto;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
  scrollbar-color: #7a5f2a rgba(0, 0, 0, 0.55);
}
.dn-panel::-webkit-scrollbar { width: 10px; }
.dn-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.55); }
.dn-panel::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6d5423, #a8843a 45%, #4e3c19);
  border: 1px solid rgba(0, 0, 0, 0.7);
}
.dn-panel[hidden] { display: none; }
.dn-panel h2 { margin: 0; font-size: 21px; font-weight: 400; letter-spacing: 0.08em; }
.dn-panel h3 {
  margin: 22px 0 8px;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  color: var(--dim);
  font-weight: 600;
}
.dn-panel-head { border-bottom: 1px solid var(--edge); padding-bottom: 10px; }
.dn-panel-sub { margin: 4px 0 0; font-size: 12px; font-style: italic; color: var(--dim); }
.dn-panel-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--dim); }
.dn-panel-hint.armed { color: var(--gold); }
.dn-dim { color: var(--dim); font-size: 11.5px; }

.dn-attrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.dn-attr {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.34);
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.6);
}
.dn-attr-name { font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
.dn-attr b { font-size: 19px; }
.dn-attr small { grid-column: 1 / -1; font-size: 10.5px; color: var(--dim); }
.dn-attr-add {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
}
.dn-attr-add:disabled { opacity: 0.22; cursor: default; }

.dn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 18px; }
.dn-stat { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.dn-stat span { color: var(--dim); }

.dn-skill-list { display: grid; gap: 6px; }
.dn-skill-row { border-left: 2px solid var(--gold); padding: 5px 11px; background: rgba(0, 0, 0, 0.32); border-radius: 0 2px 2px 0; }
.dn-skill-row.locked { border-left-color: rgba(255, 255, 255, 0.14); opacity: 0.45; }
.dn-skill-row strong { display: block; font-size: 12.5px; font-weight: 500; }
.dn-skill-head { display: flex; align-items: center; gap: 9px; }
.dn-skill-head strong { flex: 1; }
/* Rank pips. The record of every point spent, which is the reason to open the panel. */
.dn-pips { display: inline-flex; gap: 2px; }
.dn-pips i {
  width: 5px;
  height: 11px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.dn-pips i.on { background: linear-gradient(180deg, #f0d288, #8a6a2a); }
.dn-rank { font-size: 11px; color: var(--gold); min-width: 16px; text-align: right; font-weight: 600; }
.dn-skill-gain { color: #8fa0ff !important; }
.dn-skill-block { color: #ff8f88 !important; }
.dn-skill-row small { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }

.dn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; }
.dn-slot-label { font-size: 9px; letter-spacing: 0.22em; color: var(--dim); }
.dn-item {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-top-color: rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--tint, var(--edge));
  border-radius: 2px;
  padding: 8px 12px;
  margin-top: 4px;
}
button.dn-item:hover { background: rgba(255, 255, 255, 0.085); }
.dn-item.empty { color: var(--dim); font-size: 12px; }
.dn-item.unusable { opacity: 0.62; }
.dn-item strong { display: block; color: var(--tint, var(--ink)); font-size: 13px; font-weight: 500; }
.dn-item small { display: block; font-size: 10.5px; color: var(--dim); }
.dn-item-mod { color: #8fa0ff !important; }
.dn-item-req.bad { color: #ff8f88 !important; }
.dn-item-flavour { color: #b08a5a !important; font-style: italic; }
.dn-item-value { color: var(--gold) !important; margin-top: 3px; }
.dn-sell {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--edge);
  border-radius: 5px;
  color: var(--dim);
  padding: 2px 8px;
}
.dn-sell:hover { color: var(--gold); border-color: var(--gold); }

.dn-shop { display: flex; gap: 8px; flex-wrap: wrap; }
.dn-buy {
  border: 1px solid var(--edge);
  border-left: 3px solid var(--tint);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  padding: 7px 13px;
  text-align: left;
}
.dn-buy:disabled { opacity: 0.35; cursor: default; }
.dn-buy strong { display: block; font-size: 12px; font-weight: 500; }
.dn-buy small { font-size: 10.5px; color: var(--gold); }

/* ---- death --------------------------------------------------------------- */

.dn-dead {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background: rgba(4, 5, 8, 0.86);
  pointer-events: auto;
  backdrop-filter: blur(5px);
}
.dn-dead[hidden] { display: none; }
.dn-dead h2 { margin: 0; font-size: clamp(24px, 5vw, 42px); font-weight: 300; letter-spacing: 0.16em; }
.dn-dead table { border-collapse: collapse; font-size: 13px; }
.dn-dead td { padding: 5px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.dn-dead td:first-child { font-size: 9.5px; letter-spacing: 0.2em; color: var(--dim); }
.dn-dead td:last-child { text-align: right; font-weight: 700; }
.dn-dead-hint { font-size: 11px; letter-spacing: 0.18em; color: var(--dim); margin: 0; }
.dn-dead-note { font-size: 12px; color: var(--gold); text-align: center; margin: 10px 0 0; }
/* The offer to go round again. The one button on this screen that is not "start over". */
.dn-again {
  margin-top: 14px;
  padding: 10px 22px;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: #0a0906;
  background: linear-gradient(180deg, #f0d288, #a8843a);
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 26px -6px rgba(232, 196, 106, 0.7);
}
.dn-again:hover { background: linear-gradient(180deg, #fbe3a4, #c09b46); }

/* Below this the dock is wider than the space either side of it. Lifting the legend clear
   of it does not work either — the plinth is about 190px tall, so "above the dock" is the
   middle of a short screen. The top right is empty apart from the frame counter, so the
   legend goes there and the zone plate keeps the bottom left to itself. */
@media (max-width: 1180px) {
  .dn-legend {
    bottom: auto;
    top: 44px;
    max-width: 42vw;
    align-items: flex-start;
  }
  .dn-zone { bottom: 116px; }
}

@media (max-width: 820px) {
  .dn-title { top: 12px; left: 14px; }
  .dn-title h1 { letter-spacing: 0.2em; }
  .dn-log { display: none; }
  .dn-legend { max-width: 62vw; gap: 9px; top: 40px; }
  .dn-zone { bottom: 100px; left: 14px; }
  .dn-globe { width: 62px; height: 62px; }
  .dn-xp { width: 180px; }
  .dn-dock-mid { border-width: 16px; padding: 8px 10px 10px; }
  .dn-belt-slot { width: 38px; height: 44px; border-width: 6px; }
  .dn-skill { min-width: 62px; padding: 3px 7px; }
  .dn-panel { padding: 14px 14px 18px; }
}

/* ---- class select on the start menu --------------------------------------- */
/* The class choice is the largest single decision in a run and it cannot be undone, so
   it gets the whole menu rather than a dropdown: name, role, the sentence that says what
   it feels like to play, and the actual starting spread. */

.menu-wide { max-width: min(1040px, 94vw); }

.menu-classes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin: 22px 0 6px;
  width: 100%;
  pointer-events: auto;
}

button.menu-class {
  font: inherit;
  text-align: left;
  color: var(--hud-fg, #f2f5fb);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--tint);
  border-radius: 10px;
  padding: 14px 16px 16px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  align-content: start;
  transition: background 140ms ease, transform 140ms ease;
}
button.menu-class:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-2px); }
button.menu-class.selected { box-shadow: 0 0 0 1px var(--tint); }
button.menu-class:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button.menu-class strong { font-size: 17px; font-weight: 500; letter-spacing: 0.02em; color: var(--tint); }
button.menu-class em { font-size: 11px; color: rgba(242, 245, 251, 0.6); }
button.menu-class > span { font-size: 12px; color: rgba(242, 245, 251, 0.78); line-height: 1.5; margin-top: 4px; }

.menu-class-bars { display: grid; gap: 3px; margin-top: 10px; }
.menu-class-bars span { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 7px; }
.menu-class-bars i {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(242, 245, 251, 0.5);
}
.menu-class-bars b {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--tint);
  opacity: 0.85;
}

/* ---- floating combat text ------------------------------------------------- */
/* Numbers that rise off whatever they happened to. Without them a fight is a health
   bar moving for reasons the player has to infer. */

.dn-floats { position: absolute; inset: 0; }
.dn-float {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  will-change: transform, opacity;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.7);
}
.dn-float[hidden] { display: none; }
.dn-float.dealt { color: #f6f0e2; }
.dn-float.boss { color: #ffd98a; font-size: 16px; }
.dn-float.taken { color: #ff8f88; }
.dn-float.miss { color: rgba(242, 245, 251, 0.5); font-weight: 500; font-size: 12px; }
.dn-float.gold { color: var(--gold); }
.dn-float.level { color: #7cf7c6; font-size: 16px; letter-spacing: 0.14em; }

/* ---- boss bar -------------------------------------------------------------- */
/* Only on screen while a boss is actually awake. A permanent bar for a thing you have
   not met yet is a spoiler and a distraction. */

.dn-boss {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 74vw);
  text-align: center;
}
.dn-boss[hidden] { display: none; }
.dn-boss strong {
  display: block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd98a;
  margin-bottom: 5px;
}
.dn-boss-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 217, 138, 0.4);
  overflow: hidden;
}
.dn-boss-track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7a1218, #d4353f 60%, #ffb46a);
  transition: width 140ms linear;
}
.dn-boss span {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--dim);
}

/* ---- victory --------------------------------------------------------------- */

.dn-dead.won { background: rgba(10, 8, 4, 0.9); }
.dn-dead.won h2 { color: var(--gold); }
.dn-dead-flavour {
  max-width: 34em;
  text-align: center;
  font-style: italic;
  font-size: 13px;
  color: var(--dim);
  margin: 0;
}

@media (max-width: 820px) {
  .dn-boss { top: 44px; width: 86vw; }
  .dn-boss strong { font-size: 12px; letter-spacing: 0.14em; }
}

/* ---- the inventory grid ---------------------------------------------------- */
/* A list of text cards is a spreadsheet. This line of game has always had a grid where a
   two-handed maul physically takes four squares a ring does not, so the footprint is the
   item system made visible rather than decoration. */

.dn-grid-board {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
  gap: 2px;
  padding: 8px;
  width: max-content;
  border-radius: 4px;
  /* Cell lines drawn as a repeating gradient, so an empty square still reads as a square
     you could put something in. */
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px calc(var(--cell) + 2px)),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0 1px, transparent 1px calc(var(--cell) + 2px)),
    linear-gradient(180deg, rgba(22,20,18,0.9), rgba(12,11,10,0.9));
  border: 10px solid transparent;
  border-image: var(--chrome-socket) var(--chrome-socket-slice, 15) stretch;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.75);
}

button.dn-cell {
  border: 1px solid transparent;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
button.dn-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
button.dn-cell:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--tint); }
button.dn-cell.unusable { background: rgba(150, 30, 30, 0.16); }
button.dn-cell.rune { background: rgba(255, 154, 60, 0.08); }
/* The rune in hand. It has to be obvious which one is armed, because the next click is
   permanent. */
button.dn-cell.armed {
  background: rgba(255, 154, 60, 0.28);
  box-shadow: 0 0 0 2px #ff9a3c, 0 0 16px -2px #ff9a3c;
}
button.dn-cell.unusable img { filter: saturate(0.4) brightness(0.75); }

.dn-worn { display: flex; gap: 14px; flex-wrap: wrap; }
.dn-worn-slot { display: grid; gap: 3px; justify-items: center; width: 92px; }
.dn-worn-frame {
  width: 70px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 8px solid transparent;
  border-image: var(--chrome-socket) var(--chrome-socket-slice, 15) fill stretch;
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--tint, transparent);
}
.dn-worn-frame img { max-width: 88%; max-height: 88%; }
/* Somewhere a rune could still go. Marked always, not only while one is in hand, so the
   sockets on a thing are visible before you have anything to put in them. */
.dn-worn-frame.socketable { cursor: pointer; box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 154, 60, 0.6); }
.dn-worn-empty { color: rgba(242, 245, 251, 0.3); font-size: 18px; }
.dn-worn-name { font-size: 10px; color: var(--dim); text-align: center; line-height: 1.3; }

/* ---- item tooltips ---------------------------------------------------------- */

.dn-tips { position: absolute; inset: 0; pointer-events: none; }
.dn-tip {
  position: absolute;
  width: 232px;
  padding: 9px 12px 10px;
  background: rgba(6, 6, 8, 0.95);
  border: 1px solid var(--tint);
  border-radius: 3px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 40;
}
.dn-tip strong { display: block; color: var(--tint); font-size: 13px; font-weight: 500; }
.dn-tip small { display: block; font-size: 11px; line-height: 1.5; }
.dn-tip-base { color: var(--dim); margin-bottom: 4px; }
.dn-tip-mod { color: #8fa0ff; }
.dn-tip-req { color: var(--dim); margin-top: 4px; }
.dn-tip-req.bad { color: #ff6f61; }
.dn-tip-flavour { color: #b08a5a; font-style: italic; margin-top: 4px; }
.dn-tip-value { color: var(--gold); margin-top: 4px; }

.dn-buy { display: flex; align-items: center; gap: 9px; }
.dn-buy-icon { width: 26px; height: 26px; }

@media (max-width: 820px) {
  .dn-grid-board { --cell: 22px; }
  .dn-worn-slot { width: 74px; }
  .dn-worn-frame { width: 58px; height: 76px; }
}