:root {
  color-scheme:dark;
  --bg:#1b1b1e;
  --panel:#19191b;
  --line:#303033;
  --text:#eee9df;
  --muted:#aaa7a1;
  --red:#c95146;
  --gold:#c9ad79
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 'Segoe UI',
  sans-serif
}
button,
input,
select,
textarea {
  font:inherit
}
button,
select {
  cursor:pointer
}
button {
  color:inherit
}
button:focus-visible,
a:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
input:focus,
select:focus,
textarea:focus {
  outline:1px solid var(--gold)
}
.app {
  display:flex;
  min-height:100vh
}
aside {
  width:260px;
  flex-shrink:0;
  padding:36px 23px;
  border-right:1px solid var(--line);
  background:#080404;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh
}
.brand {
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--text);
  text-decoration:none;
  font-family:Georgia,
  serif;
  letter-spacing:2px;
  font-weight:bold
}
.brand small {
  display:block;
  font:10px 'Segoe UI',
  sans-serif;
  letter-spacing:3px;
  color:var(--muted);
  margin-top:6px
}
.emblem {
  font:32px Georgia,
  serif;
  color:var(--red);
  border:1px solid #63312c;
  padding:4px 9px
}
.nav-label {
  font-size: 13px;
  letter-spacing: 2px;
  color: #aaa39b;
  margin-top: 65px;
  margin-bottom: 19px;
  text-align: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  
}
.nav {
  border-radius: 30px;
  border:1px solid transparent;
  background:none;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 12px;
  text-align:left;
  font-size:14px;
  margin-bottom:10px;
  color:var(--muted)
}
.nav b {
  font-size:11px;
  margin-left:auto;
  font-weight:normal;
  opacity:.6
}
.nav span {
  font-size:22px
}
.nav.active {
  background:#302020;
  border-color:#5b302c;
  color:#f1d5cb
}
.nav.active span {
  color:var(--red)
}
.aside-bottom {
  margin-top:auto;
  padding-top:40px;
  font-size:13px;
  color:var(--red)
}
.aside-bottom p {
  font-size:16px;
  color:var(--red);
  margin:0 0 12px
}
.aside-bottom small {
  font-size:10px;
  letter-spacing:1.5px
}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#86a28b;
  margin-right:8px
}
main {
  max-width:1500px;
  width:100%;
  padding:0 48px
}
header {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:20px;
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--muted)
}
header i {
  color:var(--red);
  margin:0 14px
}
.subtle {
  background:transparent;
  border:1px solid var(--line);
  padding:10px 14px;
  color:#c6c2ba;
  font-size:14px;
  letter-spacing:0
}
.subtle:hover {
  border-color:#796c5c;
  color:white
}
.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px 0 29px
}
.eyebrow {
  font-size:11px;
  color:var(--red);
  letter-spacing:3px;
  font-weight:600
}
h1 {
  font:48px/1.1 Georgia,
  serif;
  margin:14px 0
}
h1 span {
  color:var(--red)
}
.page-head p {
  color:var(--muted);
  margin:0
}
.seal {
  border:1px solid #514335;
  color:var(--gold);
  width:98px;
  height:98px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font:28px Georgia,
  serif;
  transform:rotate(-6deg)
}
.seal small {
  font:9px 'Segoe UI',
  sans-serif;
  letter-spacing:2px;
  margin-top:9px
}
.notice {
  border-left:2px solid var(--gold);
  background:#211f1a;
  padding:13px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  color:#cbbd9f
}
.notice>span {
  font-size:25px
}
.notice strong {
  font-size:14px;
  font-weight:500
}
.notice p {
  font-size:13px;
  margin:2px 0 0;
  color:#a9a294
}
.toolbar {
  display:flex;
  gap:12px;
  margin-top:28px
}
.search {
  display:flex;
  align-items:center;
  gap:15px;
  background:var(--panel);
  border:1px solid var(--line);
  padding:0 16px;
  flex:1
}
.search span {
  font-size:28px;
  color:var(--muted)
}
input,
select,
textarea {
  background:#1a1a1c;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:0;
  padding:12px;
  min-width:0
}
.search input {
  border:0;
  background:transparent;
  width:100%;
  padding:14px 0
}
.select-label {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  padding-left:15px;
  gap:12px;
  color:var(--muted);
  font-size:14px
}
.select-label select {
  border:0;
  max-width:210px
}
.chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px
}
.chip {
  background:none;
  border:1px solid var(--line);
  color:var(--muted);
  padding:6px 14px;
  font-size:13px
}
.chip.active {
  border-color:#835147;
  color:#f1c8ad;
  background:#30221e
}
.results-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:32px;
  margin-bottom:18px
}
.results-header h2 {
  font-size:16px;
  font-weight:500;
  margin:0
}
.results-header>span {
  font-size:13px;
  color:var(--muted)
}
.cards {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px
}
.card {
  background:linear-gradient(140deg, #202022, #171719);
  border:1px solid var(--line);
  padding:23px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  min-height:255px;
  transition:border-color .18s,
  transform .18s
}
.card:hover {
  border-color:#82694b;
  transform:translateY(-3px)
}
.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font-size:10px;
  letter-spacing:1.5px;
  color:var(--gold)
}
.index {
  font:20px Georgia,
  serif;
  color:#797064
}
.card h3 {
  font:23px/1.25 Georgia,
  serif;
  margin:25px 0 8px;
  color:#ead5ad
}
.card .type {
  font-size:13px;
  color:var(--muted);
  margin-bottom:22px
}
.card .source {
  margin-top:auto;
  border-top:1px solid var(--line);
  width:100%;
  padding-top:14px;
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:#d1cac1
}
.arrow {
  color:var(--red)
}
footer {
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:25px 0;
  display:flex;
  justify-content:space-between;
  color:#85817b;
  font-size:11px;
  letter-spacing:1px
}
dialog {
  background:#19191b;
  border:1px solid #63503d;
  color:var(--text);
  width:min(580px, calc(100% - 32px));
  padding:35px;
  max-height:85vh
}
dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(4px)
}
dialog h2 {
  font:32px Georgia,
  serif;
  margin:18px 0
}
.close {
  position:absolute;
  top:10px;
  right:15px;
  border:0;
  background:none;
  font-size:28px;
  color:var(--muted)
}
dialog label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:14px;
  margin:18px 0
}
dialog p {
  color:var(--muted)
}
.primary {
  background:#913c33;
  border:1px solid #c25c4f;
  color:white;
  padding:12px 17px
}
.form-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.detail-list {
  padding:0;
  list-style:none
}
.detail-list li {
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.muted {
  font-size:14px
}
.empty {
  grid-column:1/-1;
  text-align:center;
  padding:60px;
  color:var(--muted);
  border:1px dashed var(--line)
}
@media(min-width:1600px) {
  main {
    padding:0 64px
  }
  .card {
    min-height:290px
  }
}
@media(max-width:1150px) {
  aside {
    width:215px;
    padding:28px 15px
  }
  main {
    padding:0 28px
  }
  .cards {
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }
  .seal {
    display:none
  }
}
@media(max-width:750px) {
  .app {
    display:block
  }
  aside {
    position:static;
    width:100%;
    height:auto;
    padding:20px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }
  .brand {
    font-size:15px
  }
  .emblem {
    font-size:24px
  }
  .nav-label,
  .aside-bottom {
    display:none
  }
  nav {
    display:flex;
    gap:10px;
    margin-top:20px
  }
  .nav {
    margin:0;
    justify-content:center;
    padding:9px 5px
  }
  .nav b {
    display:none
  }
  main {
    padding:0 20px
  }
  header {
    height:auto;
    min-height:70px;
    flex-wrap:wrap;
    padding:14px 0;
    gap:10px;
    font-size:10px
  }
  .page-head {
    padding-top:28px
  }
  h1 {
    font-size:36px
  }
  .toolbar {
    flex-wrap:wrap
  }
  .search {
    flex-basis:100%
  }
  .select-label {
    flex:1
  }
  .cards {
    grid-template-columns:1fr
  }
  .card {
    min-height:220px
  }
  .card h3 {
    margin-top:18px
  }
  footer {
    gap:20px;
    font-size:10px
  }
  .notice p {
    font-size:12px
  }
  .notice>span {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
}
.header-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.language-switch {
  display:flex;
  border:1px solid var(--line)
}
.language-switch button {
  background:none;
  border:0;
  color:var(--muted);
  padding:10px 12px;
  font-size:13px
}
.language-switch button.active {
  background:#382521;
  color:#f1c8ad
}
.language-switch button:hover {
  color:white
}
.brand-logo {
  width: 220px;
  height: 220px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-logo {
  animation: logo-glow 5s ease-in-out infinite;
}

@keyframes logo-glow {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(230, 65, 45, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(230, 65, 45, 0.8));
  }
}
.nav {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(0, 0, 0, 0.12)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}

.nav:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.35);
}

.nav:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.3);
}
.nav {
  background: linear-gradient(180deg, #653c39, #392120);
  border: 1px solid #98615a;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 200, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.4);
  color: #f0ddd5;
}

.nav:hover {
  background: linear-gradient(180deg, #794843, #4b2926);
  border-color: #ce8b7b;
}

.nav.active {
  background: linear-gradient(180deg, #85463d, #512a25);
  border-color: #d98b73;
  color: #fff1e5;
}
.nav-label::before,
.nav-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #b77968
  );
}

.nav-label::after {
  transform: rotate(180deg);
}
/* Akira Expanded: local font and a soft text shadow. */
@font-face {
  font-family: 'Akira Expanded';
  src: url('./fonts/akira-expanded.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body, body * {
  font-family: 'Akira Expanded', 'Segoe UI', sans-serif;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

h1, .card h3, dialog h2 {
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

h1 {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.2;
}

.card h3 {
  font-size: 19px;
  line-height: 1.4;
}

main, .page-head > div, .search {
  min-width: 0;
}

header, .toolbar, footer {
  flex-wrap: wrap;
}

header {
  height: auto;
  min-height: 88px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.nav {
  font-size: 12px;
  gap: 6px;
  overflow-wrap: anywhere;
}

.nav-label {
  font-size: 11px;
  letter-spacing: 0.5px;
}

.nav-label::before, .nav-label::after {
  min-width: 10px;
}

.card-top {
  flex-wrap: wrap;
  gap: 8px;
}

.brand-logo {
  max-width: 100%;
}

@media (max-width: 750px) {
  .nav { font-size: 11px; }
  dialog h2 { font-size: 24px; }
}
.nav {
  justify-content: center;
  text-align: center;
  color: #dfc4a7;
}

.nav:hover {
  color: #ffe1c2;
}

.nav.active:hover {
  color: #ffe1c2;
}

.nav.active {
  color: #dfc4a7;
}
.nav-label {
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-shadow: none;
}
.nav {
  letter-spacing: 1.7px;
}
aside nav {
  margin-top: 100px;
}
aside {
  background:
    radial-gradient(
      ellipse at 50% 15%,
      rgba(140, 40, 30, 0.60),
      transparent 55%
    ),
    linear-gradient(
      160deg,
      #1c1010 0%,
      #100909 50%,
      #080404 100%
    );

  border-right: 1px solid #57312c;

  box-shadow:
    inset -1px 0 0 rgba(255, 170, 140, 0.06),
    8px 0 24px rgba(0, 0, 0, 0.25);
}
.nav,
.nav:hover,
.nav.active,
.nav:active {
  background: none;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.nav {
  transition: scale 0.2s ease, text-shadow 0.2s ease;
}

.nav:hover {
  scale: 1.2;
  text-shadow:
    0 0 8px rgba(255, 180, 140, 0.5),
    0 0 18px rgba(230, 65, 45, 0.3);
}
aside nav {
  position: relative;
}



.nav {
  margin-bottom: 0;
  padding-top: 2px;
  padding-bottom: 1px;
}

.nav + .nav {
  margin-top: 0;
}
/* Vollkorn: headings in small caps, readable text in both languages. */
@font-face {
  font-family: 'Vollkorn';
  src: url('./fonts/vollkorn.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Vollkorn SC';
  src: url('./fonts/vollkorn-sc-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body, body * {
  font-family: 'Vollkorn', Georgia, serif;
}

body {
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3, .nav, .eyebrow, .seal, .brand {
  font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
  font-weight: 700;
}

h1 {
  font-size: clamp(32px, 3.8vw, 52px);
  letter-spacing: 0.3px;
  line-height: 1.15;
}

.card h3 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
}

.nav {
  font-size: 16px;
  letter-spacing: 1.7px;
}

.card-top, .eyebrow, header, footer {
  font-size: 13px;
}

.card .type, .notice p, .chip, .results-header > span {
  font-size: 15px;
}

input, select, textarea, .subtle, .primary {
  font-size: 16px;
}

@media (max-width: 750px) {
  .nav {
    font-size: 14px;
    letter-spacing: 0.8px;
  }
}
@media (max-width: 750px) {
  .brand {
    display: none;
  }

  aside nav {
    margin-top: 0;
  }

  aside nav::before {
    display: none;
  }
}
/* Separate logo and navigation areas. */
aside {
  padding: 0;
  background: #100909;
}

.sidebar-logo {
  flex-shrink: 0;
  padding: 36px 20px 32px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(140, 40, 30, 0.6), transparent 75%),
    linear-gradient(160deg, #281313, #160b0b);
}

.sidebar-logo .brand {
  display: flex;
  justify-content: center;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 10px 23px 36px;
  background: linear-gradient(180deg, #160d0d, #080404);
}

aside nav {
  margin-top: 0;
}

@media (min-width: 751px) and (max-width: 1150px) {
  .sidebar-logo {
    padding: 28px 15px;
  }

  .sidebar-content {
    padding: 28px 15px;
  }
}

@media (max-width: 750px) {
  .sidebar-logo {
    display: none;
  }

  .sidebar-content {
    padding: 16px 20px;
  }

  aside nav {
    margin-top: 0;
  }
}

/* Visible separation between the two desktop sidebar blocks. */
@media (min-width: 751px) {
  aside {
    gap: 16px;
    background: var(--bg);
  }

  .sidebar-logo {
    border-radius: 0 0 18px 18px;
  }

  .sidebar-content {
    border-radius: 0px 18px 0 0;
  }
}

/* Clean sidebar edge: no continuous divider across the gap. */
aside {
  border-right: 0;
  box-shadow: none;
}

/* Let the logo sit directly on the page background. */
.sidebar-logo {
  background: transparent;
}

/* Subtle outline around the navigation panel. */
.sidebar-content {
  border: 1px solid rgba(155, 145, 142, 0.25);
}

.sidebar-content {
  border-left: 0;
}

/* Slow ambient light, independent of navigation hover effects. */
.sidebar-content {
  position: relative;
  isolation: isolate;
  background: linear-gradient(155deg, #242326, #1b1b1e 60%, #161619);
}

.sidebar-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(145, 115, 110, 0.09), transparent 60%),
    radial-gradient(ellipse at 90% 85%, rgba(105, 100, 115, 0.08), transparent 55%);
  background-size: 160% 160%;
  animation: sidebar-light 14s ease-in-out infinite alternate;
}

@keyframes sidebar-light {
  from {
    background-position: 0% 0%;
    opacity: 0.55;
  }
  to {
    background-position: 100% 65%;
    opacity: 1;
  }
}

@media (max-width: 750px), (prefers-reduced-motion: reduce) {
  .sidebar-content::before {
    animation: none;
    opacity: 0.75;
  }
}

/* Soft depth around the menu panel. */
.sidebar-content {
  box-shadow:
    8px 4px 20px rgba(0, 0, 0, 0.35),
    2px 0 5px rgba(0, 0, 0, 0.2);
}

/* Consistent, restrained corners across the interface. */
:root {
  --corner-radius: 8px;
}

.sidebar-content {
  border-radius: 0 var(--corner-radius) 0 0;
}

.card,
.notice,
.search,
.select-label,
.subtle,
.primary,
.chip,
.nav,
.language-switch,
input,
select,
textarea,
dialog,
.empty {
  border-radius: var(--corner-radius);
}

.language-switch button:first-child {
  border-radius: 7px 0 0 7px;
}

.language-switch button:last-child {
  border-radius: 0 7px 7px 0;
}

@media (max-width: 750px) {
  .sidebar-content {
    border-radius: 0 0 var(--corner-radius) var(--corner-radius);
  }
}

/* Boss filters echo the sidebar navigation. */
.chip {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: #dfc4a7;
  font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.8px;
  transition: scale 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.chip.active {
  background: none;
  border-color: transparent;
  color: #ffe1c2;
  text-decoration: underline;
  text-decoration-color: rgba(223, 196, 167, 0.55);
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    scale: 1.2;
    color: #ffe1c2;
    text-shadow:
      0 0 8px rgba(255, 180, 140, 0.5),
      0 0 18px rgba(230, 65, 45, 0.3);
  }
}

.card {
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.18);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover {
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.36),
    0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Sidebar navigation matches the boss filters. */
.nav {
  transition: scale 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}

.nav.active {
  color: #ffe1c2;
  text-decoration: underline;
  text-decoration-color: rgba(223, 196, 167, 0.55);
  text-underline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .nav:hover {
    scale: 1.2;
    color: #ffe1c2;
    text-shadow:
      0 0 8px rgba(255, 180, 140, 0.5),
      0 0 18px rgba(230, 65, 45, 0.3);
  }
}

@media (hover: none) {
  .nav:hover {
    scale: 1;
    text-shadow: inherit;
  }
}
.nav:active,
.chip:active {
  scale: 0.95;
  transition-duration: 0.08s;
}
/* Compact branding above the mobile navigation. */
.mobile-brand {
  display: none;
}

@media (max-width: 750px) {
  .mobile-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg);
  }

  .mobile-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .mobile-brand span {
    font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    color: #dfc4a7;
  }

  .sidebar-content {
    border-radius: 0;
  }
}

.notice a, #detailBody a {
  color: var(--gold);
  text-underline-offset: 3px;
}

/* Mobile slide-out navigation; original controls move here without duplication. */
#mobileMenu {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(360px, 90vw);
  height: 100dvh;
  max-height: 100dvh;
  padding: 22px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #1b1b1e;
  overflow-y: auto;
}

#mobileMenu[open] { animation: menu-enter 0.22s ease-out; }
@keyframes menu-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.menu-is-open { overflow: hidden; }
.drawer-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.drawer-heading h2 { margin: 0; font-size: 26px; }
#drawerNav nav { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
#drawerActions, #drawerFilters { padding: 18px 0; border-top: 1px solid var(--line); }
#drawerFilters .select-label { margin: 0 0 12px; align-items: stretch; padding: 10px; }
#drawerFilters select { max-width: 100%; width: 100%; }
#drawerBosses .chips { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0 0 20px; }
#drawerBosses .chip { text-align: left; padding: 11px 10px; }
@media (max-width: 750px) {
  .mobile-brand { justify-content: flex-start; }
  #menuOpen { margin-left: auto; font-size: 22px; padding: 5px 12px; }
  aside .sidebar-content, main > header { display: none; }
  .page-head { padding-top: 22px; }
  .page-head .eyebrow { display: none; }
  .notice { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { #mobileMenu[open] { animation: none; } }

/* Real item artwork, with a dedicated slot on the right. */
.card.has-item-image h3,
.card.has-item-image > .type {
  width: calc(100% - 90px);
}

.item-icon {
  position: absolute;
  right: 16px;
  top: 62px;
  width: 86px;
  height: 128px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.5));
}

.card.has-item-image {
  min-height: 285px;
}

.item-preview {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
  margin: 8px auto 24px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}

.item-preview[hidden], .item-icon[hidden] { display: none; }

@media (max-width: 750px) {
  .item-icon {
    width: 72px;
    height: 105px;
    right: 14px;
  }
  .card.has-item-image h3,
  .card.has-item-image > .type {
    width: calc(100% - 78px);
  }
}

/* Unified desktop sidebar with a quiet vertical divider. */
@media (min-width: 751px) {
  aside {
    gap: 0;
    background: #151516;
    border-right: 1px solid #343033;
    box-shadow: none;
  }

  .sidebar-logo {
    background: transparent;
    border-radius: 0;
    padding-bottom: 28px;
  }

  .sidebar-content {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-top: 20px;
  }

  .sidebar-content::before,
  aside nav::before {
    display: none;
    animation: none;
  }
}

/* Loot cards are reference entries, not interactive buttons. */
.card.static-card,
.card.static-card:hover {
  cursor: default;
  transform: none;
  border-color: var(--line);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Gentle hover motion on non-clickable loot cards. */
@media (hover: hover) and (pointer: fine) {
  .card.static-card:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--line);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.36),
      0 3px 6px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card.static-card:hover {
    transform: none;
  }
}

/* Slightly lighter item cards. */
.card {
  background: linear-gradient(140deg, #2a2a2d, #222225);
}

/* Custom class choices match the navigation instead of OS selection colors. */
.search input:focus, .class-trigger:focus {
  outline: none;
  box-shadow: none;
}
.search:focus-within { background: #202023; }
.search:has(input:focus-visible) { box-shadow: inset 0 -2px #71635b; }
.class-picker { position: relative; }
.class-picker select[hidden] { display: none; }
.class-trigger {
  background: transparent;
  border: 0;
  padding: 13px 16px;
  min-width: 145px;
  text-align: left;
  color: #dfc4a7;
}
.class-trigger:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
.class-options {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 210px;
  max-height: min(420px, 55dvh);
  overflow-y: auto;
  padding: 8px;
  background: #202023;
  border: 1px solid #363033;
  border-radius: 8px;
  box-shadow: 0 12px 28px #0008;
  z-index: 20;
}
.class-options[hidden] { display: none; }
.class-option {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  padding: 10px 12px;
  text-align: left;
  font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
  color: #dfc4a7;
  border-radius: 5px;
}
.class-option:hover, .class-option:focus-visible {
  outline: none;
  background: #302827;
  color: #ffe1c2;
  text-shadow: 0 0 8px #ffb48c65;
}
.class-option[aria-checked="true"] { color: #ffe1c2; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 750px) {
  #drawerFilters .class-picker { display: flex; flex-direction: column; align-items: stretch; }
  .class-options { position: static; min-width: 0; width: 100%; margin-top: 6px; box-shadow: none; max-height: 40dvh; }
}

/* Hide the editing entry point in desktop and mobile navigation. */
#edit {
  display: none;
}

/* Boss filters use the archive heading accent. */
.chip {
  color: var(--red);
}

.chip.active,
.chip:hover {
  color: #e57a6d;
  text-decoration-color: rgba(229, 122, 109, 0.65);
}

/* Soft surface lighting alongside the existing card hover motion. */
@media (hover: hover) and (pointer: fine) {
  .card.static-card:hover {
    background: linear-gradient(140deg, #353235, #2b292c);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.36),
      0 0 20px rgba(201, 81, 70, 0.1);
  }
}

/* Equal-size social icons in the top bar and mobile menu. */
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.social-links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-links img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: invert(1);
}
.social-links a:hover {
  opacity: 1;
  transform: translateY(-2px);
}
#drawerActions .social-links { margin-bottom: 16px; }

/* Tuning prisms: one reading pane on desktop, accordions on mobile. */
.notice[hidden] { display: none; }
.cube-view .select-label { display: none !important; }
.cube-view #drawerBosses { display: none; }
.cards.prism-surface { display: block; }
.prism-workspace { display: grid; grid-template-columns: minmax(230px, 0.85fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.prism-list { display: flex; flex-direction: column; gap: 7px; }
.prism-choice {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px; border: 1px solid transparent; border-radius: 8px;
  background: none; text-align: left; color: #c8bfb4;
  font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif;
  transition: background 0.2s, color 0.2s;
}
.prism-choice:hover { background: #252528; color: #fff0dc; }
.prism-choice[aria-pressed="true"] { background: #2a282b; border-color: #494044; color: #fff0dc; }
.prism-mark { color: var(--prism-color); font-size: 17px; flex-shrink: 0; }
.prism-detail {
  padding: 30px; border-radius: 8px; background: linear-gradient(140deg, #2a2a2d, #222225);
  box-shadow: 0 6px 20px #0004; min-width: 0;
}
.prism-detail > .eyebrow { color: var(--prism-color); }
.prism-detail h2 { font-size: 28px; line-height: 1.3; margin: 12px 0 26px; }
.prism-affixes { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.prism-affixes li { padding: 12px 0; border-bottom: 1px solid #ffffff0d; display: flex; gap: 10px; }
.prism-affixes li::before { content: '·'; color: var(--prism-color); font-weight: bold; }
.prism-rule + .prism-rule { border-top: 1px solid #ffffff12; padding-top: 18px; margin-top: 20px; }
.prism-rule h3 { font-size: 18px; color: var(--prism-color); margin: 0 0 8px; }
.prism-rule p { color: #c6c1b9; margin: 0; line-height: 1.65; }
.prism-accordion { display: none; }
@media (min-width: 751px) and (max-width: 1050px) { .prism-affixes { grid-template-columns: 1fr; } .prism-workspace { gap: 14px; grid-template-columns: 210px minmax(0,1fr); } .prism-detail { padding: 22px; } }
@media (max-width: 750px) {
  .prism-workspace { display: none; }
  .prism-accordion { display: grid; gap: 10px; }
  .prism-entry { background: #242427; border-radius: 8px; }
  .prism-entry summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 18px 16px; font-family: 'Vollkorn SC', 'Vollkorn', Georgia, serif; list-style: none; }
  .prism-entry summary::-webkit-details-marker { display: none; }
  .prism-entry summary::after {
    content: '';
    margin-left: auto;
    margin-right: 3px;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    color: var(--prism-color);
    transform: rotate(45deg);
  }
  .prism-entry[open] summary::after { transform: rotate(225deg); }
  .prism-entry .prism-detail { padding: 0 18px 20px; background: none; box-shadow: none; }
  .prism-entry .prism-detail h2, .prism-entry .prism-detail > .eyebrow { display: none; }
  .prism-affixes { grid-template-columns: 1fr; }
}

.prism-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Prism controls follow the site's text-button style. */
.prism-choice,
.prism-choice:hover,
.prism-choice[aria-pressed="true"] {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--red);
}
.prism-choice {
  transform-origin: left center;
  transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.prism-choice[aria-pressed="true"] {
  color: #e57a6d;
  text-decoration: underline;
  text-underline-offset: 6px;
}
.prism-icon { filter: drop-shadow(0 3px 4px #0006); }
@media (hover: hover) and (pointer: fine) {
  .prism-choice:hover {
    transform: scale(1.05);
    color: #e57a6d;
    text-shadow: 0 0 8px #ffb48c65;
  }
}
.prism-choice:active { transform: scale(0.97); }
@media (max-width: 750px) {
  .prism-entry { background: none; }
  .prism-entry summary { color: var(--red); }
  .prism-entry[open] summary { color: #e57a6d; }
  .prism-entry[open] summary > span { text-decoration: underline; text-underline-offset: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .prism-choice:hover, .prism-choice:active { transform: none; }
}

/* Cream prism navigation, red section heading. */
.prism-choice {
  color: #dfc4a7;
}
.prism-choice:hover,
.prism-choice[aria-pressed="true"] {
  color: #ffe1c2;
}
.cube-view #collectionTitle {
  color: var(--red);
}
@media (max-width: 750px) {
  .prism-entry summary { color: #dfc4a7; }
  .prism-entry[open] summary { color: #ffe1c2; }
}

/* Active choices glow softly instead of being underlined. */
.nav.active,
.chip.active,
.class-option[aria-checked="true"],
.prism-choice[aria-pressed="true"],
.prism-entry[open] summary > span {
  text-decoration: none;
  text-shadow:
    0 0 7px rgba(255, 180, 140, 0.45),
    0 0 16px rgba(230, 65, 45, 0.2);
}

.language-switch button.active {
  text-decoration: none;
  text-shadow: 0 0 7px rgba(255, 180, 140, 0.45);
}

/* Class options behave like the other text buttons. */
.class-option,
.class-option:hover,
.class-option:focus-visible,
.class-option[aria-checked="true"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}
.class-option {
  transform-origin: left center;
  transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.class-option[aria-checked="true"],
.class-option:focus-visible {
  color: #ffe1c2;
  text-shadow: 0 0 7px rgba(255, 180, 140, 0.45), 0 0 16px rgba(230, 65, 45, 0.2);
}
@media (hover: hover) and (pointer: fine) {
  .class-option:hover {
    transform: scale(1.08);
    color: #ffe1c2;
    text-shadow: 0 0 8px rgba(255, 180, 140, 0.5);
  }
}
.class-option:active {
  transform: scale(0.95);
  transition-duration: 0.08s;
}
.class-trigger:focus-visible {
  text-decoration: none;
  text-shadow: 0 0 8px rgba(255, 180, 140, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .class-option:hover, .class-option:active { transform: none; }
}

/* Keep scaled class labels inside the menu and center it below the field. */
.class-options {
  box-sizing: border-box;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max(100%, 210px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 16px;
}

.class-option {
  transform-origin: center;
}

@media (max-width: 750px) {
  .class-options {
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
  }
}

/* Match the dropdown precisely to its parent field. */
.class-options {
  left: 0;
  right: 0;
  width: 100%;
  min-width: 0;
  transform: none;
}

/* Compact search and filter controls. */
.toolbar {
  align-items: center;
  gap: 10px;
}
.search {
  padding: 0 12px;
  gap: 10px;
}
.search input {
  padding: 8px 0;
  line-height: 1.4;
}
.search span {
  font-size: 23px;
}
.class-picker {
  padding-left: 12px;
  gap: 6px;
}
.class-trigger {
  min-width: 110px;
  padding: 8px 12px;
  line-height: 1.4;
}
#reset {
  padding: 8px 12px;
  line-height: 1.4;
}

/* More visible bullets in prism affix lists. */
.prism-affixes li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--prism-color);
  margin-top: 0.58em;
}

/* Stronger item titles in the boss loot cards. */
.card.static-card h3 {
  font-size: 27px;
  line-height: 1.3;
  font-weight: 700;
  color: #f4dfb9;
}

@media (max-width: 750px) {
  .card.static-card h3 {
    font-size: 25px;
  }
}

/* Keep the loot view focused on search and items. */
body:not(.cube-view) .notice {
  display: none;
}

/* Minimal language switch with a single divider. */
.language-switch {
  border: 0;
  background: none;
}
.language-switch button,
.language-switch button.active {
  background: none;
  border: 0;
  border-radius: 0;
  color: #dfc4a7;
}
.language-switch button + button {
  border-left: 1px solid #64514a;
}
.language-switch button.active,
.language-switch button:hover,
.language-switch button:focus-visible {
  color: #ffe1c2;
  text-shadow: 0 0 8px rgba(255, 180, 140, 0.5);
}
.language-switch button:focus-visible {
  outline: none;
}

/* Language controls share the red archive accent and button motion. */
.language-switch button {
  color: var(--red);
  transition: scale 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.language-switch button.active,
.language-switch button:hover,
.language-switch button:focus-visible {
  color: #e57a6d;
  text-shadow: 0 0 8px rgba(229, 122, 109, 0.45);
}
@media (hover: hover) and (pointer: fine) {
  .language-switch button:hover { scale: 1.1; }
}
.language-switch button:active { scale: 0.95; }
@media (prefers-reduced-motion: reduce) {
  .language-switch button:hover, .language-switch button:active { scale: 1; }
}

/* Independent divider: unaffected by button scaling or selected language. */
.language-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.language-switch button + button {
  border-left: 0;
}
.language-switch::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: #64514a;
  pointer-events: none;
}

/* Footer credits remain readable on desktop and mobile. */
footer {
  flex-direction: column;
  gap: 8px;
  line-height: 1.6;
}

/* Content-sized language buttons with an independent middle divider. */
.language-switch {
  grid-template-columns: auto 1px auto;
  column-gap: 3px;
  align-items: center;
}
.language-switch button:first-child {
  grid-column: 1;
  grid-row: 1;
}
.language-switch button:last-child {
  grid-column: 3;
  grid-row: 1;
}
.language-switch::after {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  height: 18px;
}
.language-switch button {
  padding-left: 9px;
  padding-right: 9px;
}

/* Soft ember light and etched texture for the desktop navigation. */
@media (min-width: 751px) {
  aside {
    isolation: isolate;
    background:
      radial-gradient(ellipse at 0% 18%, rgba(112, 47, 43, .2), transparent 60%),
      linear-gradient(155deg, #201c1f 0%, #19191c 55%, #151518 100%);
    border-right-color: #413236;
    box-shadow: 8px 0 28px rgba(0, 0, 0, .18);
  }
  aside::before,
  aside::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
  }
  aside::before {
    background:
      radial-gradient(ellipse at 15% 38%, rgba(175, 63, 49, .16), transparent 55%),
      radial-gradient(ellipse at 85% 82%, rgba(130, 66, 49, .1), transparent 50%);
    animation: navigation-embers 12s ease-in-out infinite alternate;
  }
  aside::after {
    background: repeating-linear-gradient(125deg,
      transparent 0 38px, rgba(209, 174, 145, .025) 39px,
      transparent 40px 78px);
    box-shadow: inset -1px 0 rgba(209, 145, 117, .06);
  }
}
@keyframes navigation-embers {
  from { opacity: .35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  aside::before { animation: none; }
}

/* Matching outer heights for the search, class filter and reset. */
.toolbar .search,
.toolbar .class-picker,
.toolbar #reset {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  align-items: center;
}
.toolbar .search input,
.toolbar .class-trigger {
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.toolbar #reset {
  display: inline-flex;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* Keep the mobile class filter and reset on one compact row. */
@media (max-width: 750px) {
  #drawerFilters {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  #drawerFilters .class-picker {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 8px;
    gap: 6px;
  }
  #drawerFilters #selectLabel { flex-shrink: 0; }
  #drawerFilters .class-trigger {
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #drawerFilters #reset {
    flex-shrink: 0;
    height: 42px;
    padding: 0 10px;
    white-space: nowrap;
  }
  #drawerFilters .class-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
  }
}

/* Social links on the left and languages on the right in the mobile drawer. */
@media (max-width: 750px) {
  #drawerActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  #drawerActions .social-links {
    margin: 0;
    gap: 4px;
  }
  #drawerActions .social-links a {
    width: 34px;
    height: 40px;
  }
  #drawerActions .header-actions {
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* Compact section navigation in the mobile drawer. */
@media (max-width: 750px) {
  #drawerNav nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }
  #drawerNav .nav {
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 10px 2px;
    font-size: 14px;
    letter-spacing: .3px;
    text-align: center;
    justify-content: center;
    line-height: 1.35;
  }
}

@media (max-width: 750px) {
  #drawerFilters #reset { display: none; }
}

/* The selected prism already supplies the title in the desktop list. */
@media (min-width: 751px) {
  .prism-workspace .prism-detail > h2 { display: none; }
  .prism-choice[aria-pressed="true"] {
    color: #fff0da;
    text-shadow:
      0 0 5px rgba(255, 219, 174, .8),
      0 0 14px rgba(255, 180, 140, .65),
      0 0 26px rgba(230, 110, 65, .35);
  }
  .prism-choice[aria-pressed="true"] .prism-icon {
    filter: drop-shadow(0 0 5px var(--prism-color))
            drop-shadow(0 0 10px rgba(255, 198, 140, .35));
  }
}

/* A quiet white glow for the social icons. */
.social-links img {
  filter: invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, .22));
  animation: social-glow 6s ease-in-out infinite alternate;
}
@keyframes social-glow {
  from { filter: invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, .16)); }
  to { filter: invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, .38)); }
}
@media (prefers-reduced-motion: reduce) {
  .social-links img { animation: none; }
}

/* Darker cards with soft depth against the page background. */
.card.static-card,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry {
  background: linear-gradient(140deg, #1d1c20, #141417);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(235, 214, 193, .06);
}
@media (hover: hover) and (pointer: fine) {
  .card.static-card:hover {
    background: linear-gradient(140deg, #29252a, #1d1b20);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, .42),
      0 0 20px rgba(201, 81, 70, .1),
      inset 0 1px 0 rgba(235, 214, 193, .08);
  }
}