/*
 * Module      : Lofi (styles)
 * Description : Low-fidelity layer over the interface chrome, loaded last so
 *               it takes precedence without editing the component sheets:
 *               square windows with hard, unblurred drop shadows, an ultra
 *               subtle paisley mosaic under every dialogue and listing window
 *               (dark ink on cream, light ink on dark), and a faint
 *               misregistered print on their text that keeps it legible. It
 *               paints only, so no size or spacing changes; the logo and
 *               listing images stay crisp.
 */

:root {
  --lofi-mosaic: 128px 128px;
  --lofi-print: 0.6px 0.5px 0 rgba(150, 30, 40, 0.22), -0.5px 0 0 rgba(30, 110, 150, 0.16);
  --lofi-shadow: 5px 5px 0 rgba(12, 4, 8, 0.55);
  --lofi-shadow-lg: 7px 7px 0 rgba(12, 4, 8, 0.5);
}

.vn-box,
.vn-portrait,
.vn-name,
.vn-ctrl,
.choice,
.price-alert,
.scope-product-summon,
.scope-product-plate,
.filter-panel-body,
.modal,
.gate-card,
.gate-input,
.gate-btn,
.gate-admin,
.btn,
.hdr-ctrl {
  border-radius: 0;
}

.vn-box,
.vn-name,
.vn-ctrl,
.choice,
.price-alert,
.scope-product-plate {
  background-image: var(--rx-paisley-ink);
  background-size: var(--lofi-mosaic);
}

.filter-panel-body,
.modal {
  background-image: var(--rx-paisley-light);
  background-size: var(--lofi-mosaic);
}

.vn-box,
.vn-name,
.vn-ctrl,
.choice,
.price-alert,
.scope-product-summon,
.scope-product-plate,
.filter-panel-body,
.modal,
.gate-card,
.card-info {
  text-shadow: var(--lofi-print);
}

.vn-box { box-shadow: var(--lofi-shadow-lg); }
.filter-panel-body { box-shadow: var(--lofi-shadow), inset 0 0 0 1px rgba(230, 181, 168, 0.06); }
.modal,
.gate-admin { box-shadow: var(--lofi-shadow); }

.gate-card {
  background: var(--rx-paisley-ink), linear-gradient(180deg, var(--cream), var(--vellum));
  background-size: var(--lofi-mosaic), auto;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.gate-btn:hover { box-shadow: 3px 3px 0 rgba(122, 58, 42, 0.55); transform: translate(-1px, -1px); }
.gate-input:focus { box-shadow: 3px 3px 0 rgba(156, 74, 58, 0.25); }