/* Bagani: War of Isles — shared theme (tokens, nav, buttons, forms, cards).
   Loaded on every reskinned page; page-specific files (landing.css, map.css, ...)
   extend this rather than redefining it. */

.dv {
  /* Light theme: the parchment/ink relationship is inverted rather than
     replaced -- parchment (light, warm) is now the surface color and ink
     (dark) is now the text color, so this stays "Bagani" (gold/ember/moss
     accents, parchment identity) instead of becoming a generic light UI. */
  --ink: #f6f0dd;
  --ink-2: #fffcf3;
  --ink-3: #eee4c8;
  --parchment: #211f14;
  --parchment-dim: #524c37;
  --ember: #b8461f;
  --ember-bright: #963415;
  --moss: #3f5138;
  --moss-bright: #2c3f27;
  --gold: #92720f;
  --bone: #6e6549;
  --danger: #b8461f;
  --line: rgba(33, 31, 20, 0.14);

  --display: "Cinzel", "Iowan Old Style", Georgia, serif;
  --body: "Crimson Pro", Georgia, "Iowan Old Style", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--ink);
  color: var(--parchment-dim);
  font-family: var(--body);
  min-height: 100vh;
  overflow-x: hidden;

  /* Sword-shaped cursor (blade tip at the hotspot, crossguard, grip,
     pommel), gold on dark outline so it reads on both palettes. Shared here
     (not just landing.css) so it's consistent across the whole game, not
     just the marketing page. SVG cursor support is inconsistent in Safari;
     the ", auto" fallback keeps every page fully usable there, just without
     the flourish. */
  cursor: url("cursor.svg") 4 4, auto;
}

.dv a,
.dv button,
.dv .dv-btn,
.dv .q_link,
.dv input[type="submit"],
.dv input[type="button"] {
  cursor: url("cursor-pointer.svg") 4 4, pointer;
}

/* Dark mode: the original palette this game shipped with before the light
   flip, restored as an override rather than a second theme built from
   scratch. Two ways in -- the OS-level preference, used only when the user
   has never made an explicit choice (data-theme="light" opts back out of
   it); or an explicit choice via data-theme="dark" (set by the toggle in
   antet.php's menu_down()), which always wins regardless of OS setting. */
@media (prefers-color-scheme: dark) {
  .dv:not([data-theme="light"]) {
    --ink: #14150f;
    --ink-2: #1b1d15;
    --ink-3: #23261b;
    --parchment: #ece3c8;
    --parchment-dim: #c9c1a4;
    --ember: #c1552c;
    --ember-bright: #e07a4a;
    --moss: #4f6148;
    --moss-bright: #8aa37d;
    --gold: #c9a227;
    --bone: #a79c7e;
    --danger: #c1552c;
    --line: rgba(201, 162, 39, 0.18);
  }
}
.dv[data-theme="dark"] {
  --ink: #14150f;
  --ink-2: #1b1d15;
  --ink-3: #23261b;
  --parchment: #ece3c8;
  --parchment-dim: #c9c1a4;
  --ember: #c1552c;
  --ember-bright: #e07a4a;
  --moss: #4f6148;
  --moss-bright: #8aa37d;
  --gold: #c9a227;
  --bone: #a79c7e;
  --danger: #c1552c;
  --line: rgba(201, 162, 39, 0.18);
}

.dv * { box-sizing: border-box; }
.dv a { color: inherit; text-decoration: none; }
.dv ::selection { background: var(--ember); color: var(--ink); }
.dv img { max-width: 100%; }

/* legacy compat: pages rebuilt on the .dv shell still have inner content
   (unit tables, alliance tabs, upgrade links) generated by untouched PHP
   that emits the old q_link/q_table/textbox/button/dropdown classes. */

.dv a.q_link {
  font-family: var(--mono);
  font-size: .85em;
  color: var(--bone);
  text-decoration: none;
  font-weight: 500;
}
.dv a.q_link:hover { color: var(--ember-bright); }

.dv table.q_table {
  background: var(--ink);
  border: 1px solid var(--line);
  border-collapse: collapse;
  color: var(--parchment-dim);
  margin-left: auto;
  margin-right: auto;
}
.dv table.q_table td, .dv table.q_table tr { border: 1px solid var(--line); padding: .4rem .6rem; }

.dv input.textbox, .dv input.button, .dv textarea.textbox, .dv select.dropdown {
  font-family: var(--body);
  font-size: .95rem;
  background: var(--ink);
  color: var(--parchment);
  border: 1px solid var(--line);
  padding: .35rem .5rem;
}
.dv input.button {
  font-family: var(--mono);
  font-size: .78em;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--ember);
  border-color: var(--ember);
  color: var(--parchment);
  cursor: pointer;
  padding: .5rem .9rem;
}
.dv input.button:hover { background: var(--ember-bright); border-color: var(--ember-bright); }
.dv input.textbox:focus, .dv select.dropdown:focus, .dv textarea.textbox:focus { outline: none; border-color: var(--gold); }

.dv ul#tabs { list-style: none; margin: 1.2rem 0 0; padding: 0; font-family: var(--mono); font-size: .78em; letter-spacing: .05em; text-transform: uppercase; }
.dv ul#tabs li { display: inline; }
.dv ul#tabs li a { color: var(--bone); background: var(--ink); border: 1px solid var(--line); border-bottom: none; padding: .5em .8em; text-decoration: none; }
.dv ul#tabs li a:hover { color: var(--ember-bright); }
.dv ul#tabs li a.selected { color: var(--parchment); border-color: var(--gold); font-weight: 600; }
.dv div.tabContent { border: 1px solid var(--line); padding: .8em; background: var(--ink-2); }
.dv div.tabContent.hide { display: none; }

/* ---------- utility bar: neutralized, see antet.php's menu_up() ---------- */
/* The old full-width header is gone in favor of a floating menu button + an
   off-canvas sidebar (below). .dv-bar/.dv-brand/.dv-nav still wrap the
   menu_up()/menu_down() call on every one of the 70+ page templates -- rather
   than edit each file, this strips the bar down to zero visual footprint so
   its position:fixed children (the toggle button, the sidebar itself) render
   as overlays with nothing left of the old header behind them. Every other
   page's --nav-h offset naturally becomes ~0 as a result, which is exactly
   what "map fills 100% of the viewport" needs -- no separate change there. */
.dv-bar {
  position: relative;
  z-index: 2;
  padding: 0;
  border: 0;
  min-height: 0;
}

.dv-bar .dv-brand { display: none; }

.dv-bar .dv-nav {
  display: block;
}

/* ---------- floating menu toggle ---------- */

.dv-menu-toggle {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 80;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--ink-2);
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: border-color .15s ease, color .15s ease;
}
.dv-menu-toggle:hover { border-color: var(--gold); color: var(--ember-bright); }

/* ---------- off-canvas sidebar ---------- */

.dv-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dv-sidebar-backdrop.on { opacity: 1; pointer-events: auto; }

.dv-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  width: 280px;
  max-width: 84vw;
  /* overlays the map, never pushes/resizes it -- fixed positioning takes the
     sidebar out of document flow entirely, so nothing else on the page ever
     has to make room for it. */
  transform: translateX(-100%);
  transition: transform .22s ease;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 30px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.dv-sidebar.open { transform: translateX(0); }

.dv-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .08em;
  font-size: .9rem;
  color: var(--parchment);
}
.dv-sidebar-brand svg { flex: none; }
.dv-sidebar-brand span { flex: 1; }

.dv-sidebar-close {
  flex: none;
  width: 28px;
  height: 28px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--parchment-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.dv-sidebar-close:hover { color: var(--parchment); border-color: var(--gold); }

.dv-sidebar-links {
  display: flex;
  flex-direction: column;
  padding: .6rem;
  gap: .1rem;
}

.dv-sidebar-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--bone);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .6rem .7rem;
  border-radius: 8px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.dv-sidebar-link:hover { color: var(--ember-bright); background: var(--ink-3); }

.dv-sidebar-theme { color: var(--gold); }

.dv-sidebar-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ember-bright);
  color: #fff;
  font-size: .62rem;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 560px) {
  .dv-menu-toggle { top: .6rem; left: .6rem; width: 38px; height: 38px; }
}

/* ---------- eyebrow / section heads ---------- */

.dv-eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
}

.dv-eyebrow::before, .dv-eyebrow::after {
  content: "◆";
  color: var(--moss-bright);
  margin: 0 .8em;
  font-size: .6rem;
  vertical-align: middle;
}

.dv-section {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}

.dv-section-head { text-align: center; margin-bottom: 2.6rem; }
.dv-section-head .dv-eyebrow { margin-bottom: .7rem; }

.dv-h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--parchment);
  margin: 0;
  font-weight: 600;
}

/* ---------- small hero (interior pages) ---------- */

.dv-page-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(2.4rem, 6vw, 3.6rem) 1.5rem 1rem;
}

.dv-h1-sm {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  color: var(--parchment);
  margin: 0 auto .6rem;
}

.dv-page-sub {
  max-width: 46ch;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--bone);
  font-style: italic;
}

/* ---------- buttons ---------- */

.dv-btn {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .95rem 1.9rem;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  display: inline-block;
  cursor: pointer;
  background: none;
}

.dv-btn:hover { transform: translateY(-2px); }

.dv-btn-primary { background: var(--ember); color: var(--parchment); border-color: var(--ember); }
.dv-btn-primary:hover { background: var(--ember-bright); border-color: var(--ember-bright); }

.dv-btn-ghost { border-color: rgba(201, 162, 39, 0.4); color: var(--parchment-dim); }
.dv-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.dv-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.dv-btn-block { display: block; width: 100%; text-align: center; }

/* ---------- cards ---------- */

.dv-card {
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line);
  border-top: 2px solid var(--moss);
}

.dv-card-pad { padding: 1.9rem 1.7rem; }

/* ---------- forms ---------- */

.dv-form { display: flex; flex-direction: column; gap: 1.1rem; }

.dv-field { display: flex; flex-direction: column; gap: .4rem; }

.dv-field label,
.dv-label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
}

.dv-input, .dv-select, .dv-textarea {
  font-family: var(--body);
  font-size: 1rem;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--parchment);
  padding: .7rem .8rem;
  width: 100%;
  transition: border-color .15s ease;
}

.dv-input:focus, .dv-select:focus, .dv-textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.dv-hint { font-size: .82rem; color: var(--bone); }
.dv-hint a { color: var(--moss-bright); }
.dv-hint a:hover { color: var(--ember-bright); }

.dv-captcha {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.dv-captcha-code {
  font-family: var(--mono);
  letter-spacing: .2em;
  color: var(--ember-bright);
  font-size: 1.1rem;
}

/* faction radio-cards, used on register */

.dv-fchoice { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }

.dv-fchoice label {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--ink);
  padding: .9rem .9rem 1rem;
  transition: border-color .15s ease, background .15s ease;
}

.dv-fchoice input { position: absolute; opacity: 0; }

.dv-fchoice label:hover { border-color: var(--gold); }

.dv-fchoice input:checked + span {
  color: var(--parchment);
}

.dv-fchoice input:checked ~ label,
.dv-fchoice label:has(input:checked) {
  border-color: var(--ember);
  background: var(--ink-2);
}

.dv-fchoice .dv-fc-name {
  display: block;
  font-family: var(--display);
  font-size: .98rem;
  color: var(--parchment-dim);
  margin-bottom: .25rem;
}

.dv-fchoice .dv-fc-lore {
  display: block;
  font-size: .74rem;
  color: var(--bone);
  letter-spacing: .02em;
}

.dv-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--bone);
  font-style: italic;
}

/* ---------- level & achievements ---------- */

.dv-lvl-head { display: flex; align-items: center; gap: .9rem; }

.dv-lvl-badge {
  flex: none;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold), #8a6f1a);
  border: 1px solid var(--gold);
}

.dv-lvl-meta { display: flex; flex-direction: column; }

.dv-lvl-title {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--parchment);
}

.dv-lvl-sub {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
}

.dv-ach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .5rem;
}

.dv-ach {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .6rem .7rem;
  background: var(--ink);
  border: 1px solid var(--line);
  opacity: .4;
}

.dv-ach b {
  font-family: var(--display);
  font-size: .85rem;
  color: var(--bone);
  font-weight: 600;
}

.dv-ach span { font-size: .7rem; color: var(--bone); line-height: 1.3; }

.dv-ach.got {
  opacity: 1;
  border-left: 2px solid var(--gold);
  background: rgba(201,162,39,.06);
}

.dv-ach.got b { color: var(--parchment); }
.dv-ach.got span { color: var(--parchment-dim); }

/* ---------- realtime toasts ---------- */

.dv-toasts {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(340px, calc(100vw - 2rem));
}

.dv-toast {
  display: block;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding: .7rem .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  animation: dv-toast-in .25s ease-out;
}

.dv-toast b {
  display: block;
  font-family: var(--display);
  font-size: .9rem;
  color: var(--parchment);
  font-weight: 600;
}

.dv-toast span {
  display: block;
  font-size: .78rem;
  color: var(--bone);
  margin-top: .15rem;
}

.dv-toast.out { animation: dv-toast-out .6s ease-in forwards; }

@keyframes dv-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes dv-toast-out { to { opacity: 0; transform: translateX(20px); } }

@media (prefers-reduced-motion: reduce) {
  .dv-toast, .dv-toast.out { animation: none; }
}

/* ---------- job queue with progress bars ---------- */

.dv-job {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .2rem;
  border-bottom: 1px solid var(--line);
}

.dv-job:last-child { border-bottom: none; }

.dv-job-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 1px solid var(--line);
}

.dv-job-icon img { max-width: 30px; max-height: 30px; }

.dv-job-body { flex: 1; min-width: 0; }

.dv-job-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .35rem;
}

.dv-job-name {
  font-family: var(--display);
  font-size: .88rem;
  color: var(--parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-job-time {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--gold);
  flex: none;
}

.dv-prog {
  /* Rendered site-wide as a bare <span> (job queues, building construction,
     the profile XP bar). A <span> defaults to display:inline, and height --
     plus the child <i>'s height:100%/width:X% -- simply doesn't apply to a
     non-replaced inline box per spec. Every usage that happened to sit
     inside a flex container (building-progress anchors) got "blockified" by
     that parent and looked fine by accident; every usage that didn't (the
     profile drawer's XP bar) rendered as a collapsed sliver or, depending on
     the surrounding layout, an enormous unconstrained fill -- both symptoms
     of the same missing display:block. Fixing it here, once, for every
     caller instead of patching each call site. */
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 4px;
  background: var(--ink);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

.dv-prog i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--moss), var(--moss-bright));
  box-shadow: 0 0 8px -1px rgba(138, 163, 125, .5);
  transition: width .6s cubic-bezier(.22, .9, .3, 1);
}

.dv-prog.atk i { background: linear-gradient(90deg, var(--ember), var(--ember-bright)); box-shadow: 0 0 8px -1px rgba(224, 122, 74, .55); }
.dv-prog.gold i { background: linear-gradient(90deg, #8a6f1a, var(--gold)); box-shadow: 0 0 8px -1px rgba(201, 162, 39, .55); }

@media (prefers-reduced-motion: reduce) { .dv-prog i { transition: none; } }

.dv-job-cancel {
  flex: none;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--ember);
  padding: .2rem .45rem;
  border: 1px solid transparent;
}

.dv-job-cancel:hover { color: var(--ember-bright); border-color: var(--ember); }

.dv-job-sub {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bone);
  margin-top: .3rem;
  display: block;
}

/* ---------- resource ticker ---------- */

.dv-resbar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.2rem;
}

.dv-res-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--ink);
  border: 1px solid var(--line);
  padding: .3rem .6rem;
}

.dv-res-chip img { display: block; width: 18px; height: 18px; }

.dv-res-chip b {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .82rem;
  color: var(--parchment);
  white-space: nowrap;
}

.dv-res-chip b span { color: var(--gold); }

/* ---------- unit spotlight (barracks train panel) ---------- */

.dv-unit-spotlight {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember);
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
  text-align: left;
}

.dv-unit-spotlight-portrait {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  border: 1px solid var(--line);
}

.dv-unit-spotlight-portrait img { image-rendering: pixelated; max-width: 90%; max-height: 90%; }

.dv-unit-spotlight-body {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--parchment-dim);
}

.dv-unit-spotlight-hint {
  margin: 0;
  font-style: italic;
  color: var(--bone);
}

.dv-unit-icon {
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}

.dv-unit-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 4px var(--gold));
}

/* ---------- data tables (reports, messages, towns...) ---------- */

.dv-table { width: 100%; border-collapse: collapse; font-size: .92rem; }

.dv-table th {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
}

.dv-table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  color: var(--parchment-dim);
  vertical-align: middle;
}

.dv-table tr:last-child td { border-bottom: none; }
.dv-table tr:hover td { background: rgba(201, 162, 39, 0.05); }
.dv-table td a:hover, .dv-table th a:hover { color: var(--ember-bright); }

.dv-table .dv-num { font-family: var(--mono); color: var(--parchment); }
.dv-table .dv-x { color: var(--ember); }
.dv-table .dv-x:hover { color: var(--ember-bright); }

.dv-badge-new {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: .1rem .4rem;
  margin-right: .4rem;
  border-radius: 2px;
}

/* ---------- pagination ---------- */

.dv-pager {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .78rem;
  margin-top: 1rem;
}

.dv-pager a, .dv-pager span {
  padding: .35rem .6rem;
  color: var(--bone);
}

.dv-pager a:hover { color: var(--ember-bright); }

.dv-pager .dv-pager-current {
  color: var(--parchment);
  border: 1px solid var(--line);
}

.dv-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 1rem;
}

/* ---------- profile stat grid ---------- */

.dv-profile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1.6rem 1.7rem 1.2rem;
  border-bottom: 1px solid var(--line);
}

.dv-profile-name {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--parchment);
  margin: 0;
}

.dv-profile-tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}

.dv-kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.1rem;
  padding: 1.6rem 1.7rem;
}

.dv-kv dt {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0 0 .3rem;
}

.dv-kv dd {
  margin: 0;
  font-size: 1rem;
  color: var(--parchment);
}

.dv-kv dd a:hover { color: var(--ember-bright); }

/* ---------- chat ---------- */

.dv-chat-log {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--parchment-dim);
  font-family: var(--mono);
  font-size: .85rem;
  padding: .8rem .9rem;
  line-height: 1.5;
}

.dv-chat-bar {
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
  flex-wrap: wrap;
}

.dv-chat-bar input.dv-input { flex: 1; min-width: 200px; }
.dv-chat-bar .dv-select { width: auto; flex: none; }

.dv-chat-timer {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--bone);
  margin-bottom: .6rem;
  display: block;
}

.dv-chat-hint { color: var(--moss-bright); }

/* the room selector was rendering as an unlabelled empty box */
.dv-chat-bar .dv-select { min-width: 7rem; }

/* ---------- footer ---------- */

.dv-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem 3rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--bone);
  border-top: 1px solid var(--line);
}

.dv-footer a { color: var(--moss-bright); }
.dv-footer a:hover { color: var(--ember-bright); }

/* ---------- misc ---------- */

.dv-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

.dv-divider-word {
  text-align: center;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  margin: .2rem 0;
}

@media (max-width: 760px) {
  .dv-bar { flex-direction: column; align-items: flex-start; }
  .dv-grid-2 { grid-template-columns: 1fr; }
  .dv-fchoice { grid-template-columns: 1fr; }
}

/* --- in-scene global chat dock (town.php) -------------------------------- */
/* Floats over the town scene, bottom-left, clear of the bottom HUD bar.
   Collapsed by default so the scene stays uncluttered; the tab lights a dot
   when a line arrives while it is minimised. */
.dv-chatdock{position:fixed;left:1rem;bottom:calc(var(--bottom-h, 74px) + 1rem);z-index:60;
  font-family:var(--body);width:640px;max-width:calc(100vw - 2rem);}
.dv-chatdock-peek{display:flex;flex-direction:column;gap:.15rem;
  margin-bottom:.4rem;pointer-events:none;max-width:min(70vw,340px);}
.dv-chatdock-peek p{margin:0;padding:.2rem .5rem;font-size:.72rem;line-height:1.35;
  /* overlays the town scene art, so it keeps a dark translucent chip with
     hardcoded light text regardless of site theme -- same reasoning as the
     in-scene building popups. */
  color:#c9c1a4;background:rgba(18,17,11,.75);border-radius:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-chatdock-peek p b{color:#e0c157;font-weight:600;}
.dv-chatdock-tab{display:none;align-items:center;gap:.4rem;cursor:pointer;
  background:var(--ink-2);color:var(--parchment);border:1px solid var(--line);
  border-radius:9px;padding:.5rem .8rem;font-family:var(--display);font-size:.8rem;
  letter-spacing:.03em;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.dv-chatdock-tab:hover{border-color:var(--gold);}
.dv-chatdock-tab svg{color:var(--gold);}
.dv-chatdock-dot{display:none;width:8px;height:8px;border-radius:50%;
  background:var(--ember-bright);box-shadow:0 0 6px var(--ember-bright);}
.dv-chatdock.collapsed .dv-chatdock-tab{display:inline-flex;}
.dv-chatdock.collapsed .dv-chatdock-panel{display:none;}
.dv-chatdock-panel{display:flex;flex-direction:column;background:var(--ink-2);
  border:1px solid var(--line);border-radius:11px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.5);}
.dv-chatdock-head{display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;
  background:var(--ink-3);border-bottom:1px solid var(--line);}
.dv-chatdock-tabs{flex:1 1 auto;min-width:0;display:flex;gap:.3rem;overflow-x:auto;}
.dv-chatdock-roomtab{flex:0 0 auto;background:var(--ink);color:var(--parchment-dim);
  border:1px solid var(--line);border-radius:6px;padding:.28rem .55rem;
  font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.02em;
  cursor:pointer;transition:color .15s ease,border-color .15s ease;}
.dv-chatdock-roomtab:hover{color:var(--parchment);}
.dv-chatdock-roomtab.active{color:var(--gold);border-color:var(--gold);background:var(--ink-2);}
.dv-chatdock-hint{font-family:var(--mono);font-size:.62rem;color:var(--bone);
  opacity:.7;white-space:nowrap;}
.dv-chatdock-online{flex:0 0 auto;font-family:var(--mono);font-size:.66rem;
  color:var(--moss-bright);white-space:nowrap;cursor:pointer;}
.dv-chatdock-online:hover{color:var(--gold);}
.dv-chatdock-onlinelist{display:none;flex-direction:column;gap:.1rem;max-height:140px;
  overflow-y:auto;padding:.4rem .6rem;background:var(--ink-3);border-bottom:1px solid var(--line);}
.dv-chatdock-onlinelist.open{display:flex;}
.dv-chatdock-onlinelist a{font-family:var(--mono);font-size:.72rem;color:var(--parchment-dim);
  text-decoration:none;padding:.15rem 0;}
.dv-chatdock-onlinelist a:hover{color:var(--gold);}
.dv-chatdock-onlinelist-empty{font-family:var(--mono);font-size:.68rem;color:var(--bone);opacity:.7;}
.dv-chatdock-min{flex:0 0 auto;width:24px;height:24px;line-height:1;cursor:pointer;
  background:transparent;color:var(--parchment-dim);border:1px solid var(--line);
  border-radius:6px;font-size:1rem;}
.dv-chatdock-min:hover{color:var(--parchment);border-color:var(--gold);}
.dv-chatdock-log{height:560px;resize:none;border:0;outline:none;
  background:var(--ink);color:var(--parchment-dim);padding:.55rem .6rem;
  font-family:var(--mono);font-size:.72rem;line-height:1.5;white-space:pre-wrap;}
.dv-chatdock-bar{display:flex;gap:.4rem;padding:.45rem .55rem;
  background:var(--ink-3);border-top:1px solid var(--line);}
.dv-chatdock-input{flex:1 1 auto;min-width:0;background:var(--ink);
  color:var(--parchment);border:1px solid var(--line);border-radius:6px;
  padding:.4rem .5rem;font-family:var(--body);font-size:.82rem;}
.dv-chatdock-input:focus{outline:none;border-color:var(--gold);}
.dv-chatdock-send{flex:0 0 auto;cursor:pointer;background:var(--ember);
  color:#fff;border:0;border-radius:6px;padding:.4rem .7rem;
  font-family:var(--display);font-size:.72rem;letter-spacing:.03em;}
.dv-chatdock-send:hover{background:var(--ember-bright);}
@media (max-width:560px){.dv-chatdock{left:.5rem;bottom:calc(var(--bottom-h, 74px) + .5rem);width:min(88vw,320px);} .dv-chatdock-log{height:340px;}}

/* --- in-scene quest tracker (town.php) ------------------------------------ */
/* Same fixed-to-viewport dock mechanic as the chat dock, mirrored to the
   top-left corner. Fixed rather than positioned inside the scene canvas on
   purpose: buildings can be dragged anywhere in Arrange mode, so anything
   anchored to scene coordinates risks ending up under a building a player
   moved there. A viewport-fixed dock can never collide with that. */
/* offsets below account for the floating hamburger menu button (top:1rem,
   left:1rem, ~2.6rem tall) that replaced the old header bar -- the left
   column (menu button, player HUD, quest dock) stacks down from it instead
   of from a nav bar that no longer has any height. */
.dv-questdock{position:fixed;left:1rem;top:calc(var(--nav-h, 12px) + 13rem);z-index:59;
  font-family:var(--body);width:280px;max-width:calc(100vw - 2rem);}
.dv-questdock-tab{display:none;align-items:center;gap:.4rem;cursor:pointer;
  background:var(--ink-2);color:var(--parchment);border:1px solid var(--line);
  border-radius:9px;padding:.5rem .8rem;font-family:var(--display);font-size:.8rem;
  letter-spacing:.03em;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.dv-questdock-tab:hover{border-color:var(--gold);}
.dv-questdock-tab svg{color:var(--gold);}
.dv-questdock-dot{width:8px;height:8px;border-radius:50%;
  background:var(--ember-bright);box-shadow:0 0 6px var(--ember-bright);}
.dv-questdock.collapsed .dv-questdock-tab{display:inline-flex;}
.dv-questdock.collapsed .dv-questdock-panel{display:none;}
.dv-questdock-panel{display:flex;flex-direction:column;gap:.55rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:11px;
  padding:.7rem .8rem;box-shadow:0 10px 30px rgba(0,0,0,.5);}
.dv-questdock-head{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:.78rem;letter-spacing:.03em;color:var(--gold);}
.dv-questdock-head-actions{display:flex;align-items:center;gap:.4rem;}
.dv-questdock-all{font-family:var(--mono);font-size:.62rem;color:var(--parchment-dim);
  text-decoration:none;}
.dv-questdock-all:hover{color:var(--gold);}
.dv-questdock-min{flex:0 0 auto;width:20px;height:20px;line-height:1;cursor:pointer;
  background:transparent;color:var(--parchment-dim);border:1px solid var(--line);
  border-radius:5px;font-size:.85rem;padding:0;}
.dv-questdock-min:hover{color:var(--parchment);border-color:var(--gold);}
.dv-questdock-row{display:grid;grid-template-columns:1fr auto;gap:.15rem .5rem;}
.dv-questdock-name{font-size:.74rem;color:var(--parchment-dim);text-transform:capitalize;}
.dv-questdock-frac{font-family:var(--mono);font-size:.68rem;color:var(--bone);
  text-align:right;text-decoration:none;}
.dv-questdock-row.ready .dv-questdock-name{color:var(--parchment);}
.dv-questdock-row.ready .dv-questdock-frac{color:var(--gold);font-weight:600;}
.dv-questdock-row .dv-prog{grid-column:1/-1;height:4px;}
@media (max-width:560px){.dv-questdock{left:.5rem;top:calc(var(--nav-h, 12px) + 7.5rem);width:min(80vw,280px);}}

/* --- player HUD (avatar / level / XP) (town.php) --------------------------- */
.dv-phud{position:fixed;left:1rem;top:calc(var(--nav-h, 12px) + 4rem);z-index:59;
  display:flex;align-items:center;gap:.6rem;
  background:var(--ink-2);border:1px solid var(--line);border-radius:11px;
  padding:.55rem .8rem;box-shadow:0 10px 30px rgba(0,0,0,.5);
  font-family:var(--body);width:242px;max-width:calc(100vw - 2rem);}
.dv-phud-avatar{position:relative;flex:none;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ember-bright), var(--ember) 70%);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:#fff;font-size:1.1rem;
  border:2px solid var(--gold);}
.dv-phud-lv{position:absolute;bottom:-5px;right:-5px;min-width:20px;height:20px;
  padding:0 3px;border-radius:10px;background:var(--moss);color:#fff;
  border:1px solid var(--ink-2);font-family:var(--mono);font-size:.62rem;
  line-height:18px;text-align:center;}
.dv-phud-body{flex:1;min-width:0;}
.dv-phud-name{font-family:var(--display);font-size:.8rem;color:var(--parchment);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dv-phud-meta{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.6rem;color:var(--parchment-dim);margin:.15rem 0 .3rem;}
.dv-phud-pts{color:var(--gold);}
.dv-phud-bar{height:6px;border-radius:3px;background:var(--ink);overflow:hidden;
  border:1px solid var(--line);}
.dv-phud-fill{height:100%;background:linear-gradient(90deg, var(--moss), var(--moss-bright));}
@media (max-width:560px){.dv-phud{left:.5rem;top:calc(var(--nav-h, 12px) + 3.3rem);width:min(78vw,242px);}}

/* --- right-side quick-access icon rail (town.php) -------------------------- */
/* Same idea as a reference's vertical icon cluster, built from our own
   destinations and theme: real nav links (reports/messages/alerts/
   statistics/profile), no button that opens onto nothing. */
.dv-rail{position:fixed;right:1rem;top:calc(var(--nav-h, 44px) + 5.5rem);z-index:59;
  display:flex;flex-direction:column;gap:.55rem;}
.dv-rail-btn{position:relative;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--ink-2);color:var(--gold);border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.4);transition:border-color .15s ease,transform .15s ease;}
.dv-rail-btn:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--ember);}
.dv-rail-dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  padding:0 3px;border-radius:8px;background:var(--ember-bright);color:#fff;
  font-family:var(--mono);font-size:.6rem;line-height:16px;text-align:center;
  box-shadow:0 0 6px rgba(150,52,21,.7);}
@media (max-width:560px){.dv-rail{right:.5rem;top:calc(var(--nav-h, 44px) + .5rem);gap:.4rem;}
  .dv-rail-btn{width:34px;height:34px;}}

/* --- in-scene reports drawer (town.php) ------------------------------------
   Overlays the map -- position:fixed takes it out of document flow entirely,
   so it never resizes or shifts .dv-scene-frame. Sits just left of the rail
   (rail is 40px wide at right:1rem) so it never covers those icons. */
.dv-reportdrawer{position:fixed;top:calc(var(--nav-h, 44px) + 5.5rem);right:4.2rem;
  bottom:calc(var(--bottom-h, 74px) + 1rem);z-index:70;width:320px;max-width:calc(100vw - 6rem);
  display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);
  border-radius:11px;box-shadow:0 10px 34px rgba(0,0,0,.55);
  transform:translateX(calc(100% + 5rem));opacity:0;pointer-events:none;
  transition:transform .2s ease,opacity .2s ease;overflow:hidden;}
.dv-reportdrawer.open{transform:translateX(0);opacity:1;pointer-events:auto;}
.dv-reportdrawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);flex:none;
  font-family:var(--display);font-size:.85rem;letter-spacing:.04em;color:var(--gold);}
.dv-reportdrawer-close{width:26px;height:26px;background:none;border:1px solid var(--line);
  border-radius:6px;color:var(--parchment-dim);font-size:1.1rem;line-height:1;cursor:pointer;}
.dv-reportdrawer-close:hover{color:var(--parchment);border-color:var(--gold);}
.dv-reportdrawer-tabs{display:flex;flex:none;border-bottom:1px solid var(--line);}
.dv-reportdrawer-tab{flex:1;background:none;border:0;border-bottom:2px solid transparent;
  padding:.55rem .3rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--parchment-dim);cursor:pointer;white-space:nowrap;}
.dv-reportdrawer-tab:hover{color:var(--parchment);}
.dv-reportdrawer-tab.active{color:var(--gold);border-bottom-color:var(--gold);}
.dv-reportdrawer-tabcount{color:var(--ember-bright);font-weight:600;}
.dv-reportdrawer-body{flex:1;overflow-y:auto;padding:.4rem;}
.dv-reportdrawer-empty{padding:1.4rem .6rem;text-align:center;color:var(--parchment-dim);
  font-family:var(--body);font-size:.82rem;}
.dv-reportdrawer-row{display:flex;flex-direction:column;gap:.15rem;padding:.55rem .6rem;
  border-radius:7px;cursor:pointer;transition:background .12s ease;}
.dv-reportdrawer-row:hover{background:var(--ink-3);}
.dv-reportdrawer-row.unread .dv-reportdrawer-subj{color:var(--parchment);font-weight:600;}
.dv-reportdrawer-subj{display:flex;align-items:center;gap:.4rem;font-family:var(--body);
  font-size:.82rem;color:var(--parchment-dim);}
.dv-reportdrawer-newdot{flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--ember-bright);box-shadow:0 0 5px var(--ember-bright);}
.dv-reportdrawer-time{font-family:var(--mono);font-size:.62rem;color:var(--bone);}
.dv-reportdrawer-back{margin:.3rem .4rem .6rem;background:none;border:1px solid var(--line);
  border-radius:6px;color:var(--parchment-dim);font-family:var(--mono);font-size:.68rem;
  padding:.3rem .6rem;cursor:pointer;}
.dv-reportdrawer-back:hover{color:var(--gold);border-color:var(--gold);}
.dv-reportdrawer-detail{padding:0 .8rem .8rem;}
.dv-reportdrawer-detail-subj{font-family:var(--display);font-size:.9rem;color:var(--parchment);
  margin:0 0 .2rem;}
.dv-reportdrawer-detail-time{font-family:var(--mono);font-size:.64rem;color:var(--bone);
  margin:0 0 .7rem;}
.dv-reportdrawer-detail-body{font-family:var(--body);font-size:.82rem;color:var(--parchment-dim);
  line-height:1.5;}
@media (max-width:760px){.dv-reportdrawer{right:1rem;top:calc(var(--nav-h, 44px) + .5rem);
  width:min(88vw,320px);}}
/* Trading Post's drawer: same shape as every other .dv-reportdrawer, just
   ~60% wider -- its content (transport/npc/offer forms, offer lists) is
   denser than the others and was cramped at the shared 320px width. */
.dv-reportdrawer-wide{width:512px;}
@media (max-width:760px){.dv-reportdrawer-wide{width:min(88vw,512px);}}

/* --- floating quick-build button (town.php) -------------------------------- */
.dv-fab{position:fixed;right:1.1rem;bottom:calc(var(--bottom-h, 74px) + 1rem);z-index:41;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--ember);color:#fff;border:2px solid rgba(255,255,255,.15);
  box-shadow:0 6px 18px rgba(0,0,0,.5);transition:background .15s ease,transform .15s ease;}
.dv-fab:hover{background:var(--ember-bright);transform:translateY(-2px);}
.dv-fab-dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;
  padding:0 3px;border-radius:9px;background:var(--gold);color:#1b1704;
  font-family:var(--mono);font-size:.62rem;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 6px rgba(201,162,39,.7);}
@media (max-width:560px){.dv-fab{right:.6rem;bottom:calc(var(--bottom-h, 74px) + .6rem);width:44px;height:44px;}}

/* --- floating HUD "glass" pass (town.php) ----------------------------------
   Every floating overlay on the town scene (player card, rail buttons, FAB,
   the shared report/hall/war/market/etc. drawer, quest/chat docks, minimap)
   already shared the same flat ink-2 panel + hard shadow recipe; this layers
   a translucent blur + soft inner highlight on top of that shared recipe
   instead of rewriting each panel's own rule, so the HUD's draggable
   positions (Arrange mode, hud_panel_.php-saved layout) and every panel's
   existing box model are untouched -- only the paint changes. backdrop-filter
   is layered over each panel's own background (kept as a fallback) rather
   than replacing it, so a browser without backdrop-filter support just sees
   the original flat panel, never a transparent hole into the map. */
.dv-phud, .dv-rail-btn, .dv-fab,
.dv-reportdrawer, .dv-questdock-panel, .dv-questdock-tab,
.dv-chatdock-panel, .dv-chatdock-tab, .dv-town-minimap {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: transform .2s cubic-bezier(.22,.9,.3,1), box-shadow .2s ease, border-color .18s ease, background-color .18s ease;
}
.dv-phud, .dv-reportdrawer, .dv-questdock-panel, .dv-chatdock-panel, .dv-town-minimap {
  background-color: rgba(20, 21, 15, .78);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.5);
}
/* .dv-fab is deliberately excluded here -- it keeps its own solid ember
   accent color (the one "primary action" button in the HUD) rather than
   being folded into the same dark-glass tone as every read-only panel. */
.dv-rail-btn, .dv-questdock-tab, .dv-chatdock-tab { background-color: rgba(27, 29, 21, .8); }

.dv-phud:hover, .dv-town-minimap:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 36px rgba(0,0,0,.55); }
.dv-questdock-panel:hover, .dv-chatdock-panel:hover { box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 14px 36px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce) {
  .dv-phud, .dv-rail-btn, .dv-fab, .dv-reportdrawer, .dv-questdock-panel,
  .dv-questdock-tab, .dv-chatdock-panel, .dv-chatdock-tab, .dv-town-minimap { transition: none; }
}

/* --- centered modal (town.php) ----------------------------------------
   A second in-scene overlay shape alongside .dv-reportdrawer's edge-docked
   panel: a centered card over a dimmed, blurred backdrop. Currently used by
   the Inventory drawer only -- .dv-modal-* is named generically (not
   .dv-inv-*) so any other feature that wants a centered dialog instead of a
   side drawer can reuse it without new CSS. */
.dv-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(10, 10, 6, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dv-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.dv-modal {
  width: 100%;
  max-width: 560px;
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px rgba(0,0,0,.6);
  overflow: hidden;
  transform: scale(.96) translateY(6px);
  transition: transform .2s cubic-bezier(.22,.9,.3,1);
}

/* Wider variant for content that wants a dense multi-column grid (Inventory)
   rather than the default single-column-ish 560px card. */
.dv-modal.wide { max-width: 820px; }
.dv-modal-backdrop.open .dv-modal { transform: scale(1) translateY(0); }

.dv-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .03em;
  color: var(--gold);
}

.dv-modal-close {
  width: 28px; height: 28px;
  background: none; border: 1px solid var(--line); border-radius: 7px;
  color: var(--parchment-dim); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.dv-modal-close:hover { color: var(--parchment); border-color: var(--gold); }

.dv-modal-tabs {
  display: flex;
  flex: none;
  gap: .3rem;
  padding: .6rem .8rem 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}

.dv-modal-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .45rem .55rem .6rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.dv-modal-tab:hover { color: var(--parchment); }
.dv-modal-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.dv-modal-tab-count {
  font-size: .6rem;
  color: var(--bone);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: .05rem .4rem;
}
.dv-modal-tab.active .dv-modal-tab-count { color: var(--gold); }

.dv-item-cap {
  flex: 1;
  text-align: right;
  font-family: var(--mono);
  font-size: .64rem;
  color: var(--bone);
  margin-right: .6rem;
}

.dv-item-toolbar {
  display: flex;
  flex: none;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
}
.dv-item-toolbar #invSearch { flex: 1 1 160px; min-width: 0; padding: .5rem .7rem; font-size: .85rem; }
.dv-item-toolbar select { flex: none; width: auto; padding: .5rem .6rem; font-size: .78rem; }

.dv-modal-body { flex: 1; overflow-y: auto; padding: 1rem; }

/* ---------- item grid (Inventory) ---------- */

.dv-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .6rem;
}

.dv-item-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rarity, var(--line)) 16%, var(--ink)), var(--ink) 72%);
  border: 1px solid var(--rarity, var(--line));
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.dv-item-slot:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.4), 0 0 0 1px var(--rarity, var(--line)) inset;
}
.dv-item-slot svg {
  width: 62%;
  height: 62%;
  color: var(--rarity, var(--gold));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rarity, var(--gold)) 55%, transparent));
}

.dv-item-qty {
  position: absolute;
  right: 4px; bottom: 4px;
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  color: var(--parchment);
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: .05rem .32rem;
  line-height: 1.35;
}

.dv-item-slot.empty {
  cursor: default;
  border-style: dashed;
  border-color: var(--line);
  opacity: .5;
}
.dv-item-slot.empty:hover { transform: none; box-shadow: none; }

.dv-item-new {
  position: absolute;
  left: 3px; top: 3px;
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 3px;
  padding: .03rem .28rem;
  line-height: 1.3;
  box-shadow: 0 0 6px rgba(201, 162, 39, .6);
}

/* ---------- item tooltip (JS-positioned, follows the hovered slot) ---------- */

.dv-item-tooltip {
  position: fixed;
  z-index: 80;
  max-width: 220px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem .7rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  font-family: var(--body);
  font-size: .78rem;
  color: var(--parchment-dim);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.dv-item-tooltip.show { opacity: 1; }
.dv-item-tooltip-name { font-family: var(--display); font-size: .86rem; color: var(--parchment); margin: 0 0 .1rem; }
.dv-item-tooltip-rarity {
  display: inline-block;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rarity, var(--bone));
  margin-bottom: .35rem;
}
.dv-item-tooltip-qty { font-family: var(--mono); font-size: .68rem; color: var(--bone); margin-top: .35rem; }

/* ---------- item detail panel (Inventory) ---------- */

.dv-item-detail-back {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .04em;
  color: var(--parchment-dim); padding: 0 0 .8rem; display: flex; align-items: center; gap: .3rem;
}
.dv-item-detail-back:hover { color: var(--gold); }

.dv-item-detail-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .9rem; }
.dv-item-detail-icon {
  flex: none; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); border: 1px solid var(--rarity, var(--line)); border-radius: 10px;
}
.dv-item-detail-icon svg { width: 60%; height: 60%; color: var(--rarity, var(--gold)); }
.dv-item-detail-name { font-family: var(--display); font-size: 1.05rem; color: var(--parchment); margin: 0 0 .15rem; }
.dv-item-detail-rarity { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--rarity, var(--bone)); }
.dv-item-detail-desc { font-size: .85rem; line-height: 1.5; color: var(--parchment-dim); margin: 0 0 1rem; }
.dv-item-detail-qty { font-family: var(--mono); font-size: .72rem; color: var(--bone); margin-bottom: 1rem; }
.dv-item-detail-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .dv-modal-backdrop { padding: .8rem; }
  .dv-modal { max-height: 88vh; }
}