/* Modern community database: quiet surfaces and clear typography. */
:root { --bg:#0c0d0f; --panel:#17181c; --line:#27292e; --red:#dc5648; --gold:#d8c4a3; --text:#eeeef0; --muted:#94959d; }
body { background:radial-gradient(ellipse at 10% 0%,#671b1516,transparent 45%),#0c0d0f; font-family:'Vollkorn',Georgia,serif; text-shadow:none; }
.app { padding-top:0; }
aside { background:#101114; border:0; border-bottom:1px solid #27292e; border-radius:0; box-shadow:none; }
.inventory-brand-name { font-family:'Vollkorn',Georgia,serif; color:#ededf0; font-weight:700; font-size:21px; letter-spacing:-.5px; text-shadow:none; }
.sidebar-logo .brand-logo { filter:drop-shadow(0 0 10px #b8201826); animation:none; }
.page-head h1 { font-family:'Vollkorn',Georgia,serif; font-size:clamp(34px,4vw,56px); letter-spacing:-1.4px; color:#f1eee9; text-transform:none; text-shadow:none; }
.page-head h1 > span { color:#dc5648; }
.page-head .eyebrow { color:#ad7971; font-family:'Vollkorn',Georgia,serif; font-size:11px; letter-spacing:2px; }
.page-head { padding:32px 0 26px; }
.section-tabs { padding-top:18px; }
.section-tabs nav { gap:6px; border-bottom:1px solid #25262b; padding-bottom:14px; }
.section-tabs .nav { font-family:'Vollkorn',Georgia,serif; font-size:15px; font-weight:600; letter-spacing:0; border:0; border-radius:7px; padding:10px 16px; color:#9799a2; background:none; box-shadow:none; text-shadow:none; }
.section-tabs .nav.active { background:#242024; color:#f17d69; border:0; box-shadow:none; text-shadow:none; }
.toolbar,main > .chips { background:none; border:0; padding:0; }
.toolbar { margin-bottom:16px; }
main > .chips { gap:6px; padding-bottom:10px; }
.search,.class-picker,#reset { background:#17181c; border:1px solid #292b31; box-shadow:none; border-radius:7px; }
.search input,.class-trigger,#selectLabel,#reset { font-family:'Vollkorn',Georgia,serif; font-size:14px; text-shadow:none; }
.chips .chip { font-family:'Vollkorn',Georgia,serif; font-size:13px; letter-spacing:0; padding:8px 11px; border:0; border-radius:6px; color:#a1a2aa; background:#15161a; box-shadow:none; text-shadow:none; }
.chips .chip.active { background:#48231f; color:#ffae94; box-shadow:none; border:0; text-shadow:none; }
.cards { padding:0; background:none; border:0; border-radius:0; box-shadow:none; gap:14px; }
.card.static-card,.card.static-card.has-item-image,.prism-workspace .prism-detail {
 background:linear-gradient(145deg,#1b1c21,#15161a); border:1px solid #27292e; border-radius:10px;
 box-shadow:0 4px 14px #0003; text-shadow:none;
}
.card.static-card { padding:15px 12px; }
.card.static-card .card-top { font-family:'Vollkorn',Georgia,serif; color:#81848f; font-size:10px; letter-spacing:.4px; }
.card.static-card h3 { color:#e2d2b7; font-family:'Vollkorn',Georgia,serif; text-shadow:none; font-size:18px; }
.card.static-card .source { font-family:'Vollkorn',Georgia,serif; font-size:11px; color:#8d8f99; border-top-color:#292b30; line-height:1.5; }
.card.static-card .item-icon { filter:drop-shadow(0 6px 6px #0008); }
.results-header { margin:20px 0 14px; }
.results-header h2 { font-family:'Vollkorn',Georgia,serif; font-weight:600; font-size:14px; letter-spacing:0; color:#a9aab2; }
.cards.prism-surface { padding:0; }
.prism-list { gap:6px; }
.prism-choice { font-family:'Vollkorn',Georgia,serif; font-size:14px; background:none; color:#999ba6; border:0; border-radius:7px; padding:13px 12px; box-shadow:none; text-shadow:none; }
.prism-choice[aria-pressed="true"] { background:#262024; color:#f19b81; border:0; box-shadow:none; text-shadow:none; }
.prism-choice[aria-pressed="true"] .prism-icon { filter:drop-shadow(0 2px 4px #0006); }
.prism-affixes li,.prism-rule p { font-family:'Vollkorn',Georgia,serif; font-size:15px; color:#c5c6cd; line-height:1.6; }
.prism-affixes li { border-bottom-color:#292b31; }
.prism-detail > .eyebrow { font-size:12px; letter-spacing:1px; }
.card.static-card.aspect-card { padding:20px; }
.aspect-card .aspect-description { font-family:'Vollkorn',Georgia,serif; font-size:14px; line-height:1.7; color:#b6b8c1; text-shadow:none; }
.class-options { background:#1b1c21; border:1px solid #30323a; border-radius:8px; box-shadow:0 14px 35px #0008; }
.class-option { font-family:'Vollkorn',Georgia,serif; font-size:14px; }
.language-switch button { font-family:'Vollkorn',Georgia,serif; font-size:12px; font-weight:600; }
footer { font-family:'Vollkorn',Georgia,serif; color:#757780; font-size:12px; line-height:1.7; border-color:#24262b; }
@media (min-width:751px) { aside { background:#101114; border:0; border-bottom:1px solid #27292e; padding-left:0; padding-right:0; height:78px; } }
@media (hover:hover) and (pointer:fine) {
 .section-tabs .nav:hover,.chips .chip:hover,.prism-choice:hover { scale:1; transform:translateY(-1px); background:#282329; color:#f1b09a; border:0; box-shadow:none; text-shadow:none; }
 .card.static-card:hover,.prism-workspace .prism-detail:hover { background:linear-gradient(145deg,#222329,#1b1c21); border-color:#39333a; box-shadow:0 10px 22px #0005; transform:translateY(-3px); }
}
.section-tabs .nav:active,.chips .chip:active,.prism-choice:active { scale:.98; transform:translateY(1px); }
@media (max-width:750px) {
 aside { background:#101114; border:0; border-bottom:1px solid #27292e; }
 .mobile-brand span { font-family:'Vollkorn',Georgia,serif; font-size:19px; color:#ededf0; }
 .section-tabs nav { gap:5px; flex-wrap:wrap; }
 .section-tabs .nav { padding:10px 12px; font-size:13px; }
 .cards { padding:0; gap:10px; }
 .card.static-card,.card.static-card.has-item-image { padding:12px 9px; }
 .cards.prism-surface { padding:0; }
 .prism-accordion .prism-entry { background:#18191e; border:1px solid #2a2c32; border-radius:8px; box-shadow:none; }
 .prism-entry summary { font-family:'Vollkorn',Georgia,serif; font-size:14px; }
 .prism-entry[open] summary { color:#f19b81; text-shadow:none; }
 #mobileMenu { background:#141519; border:1px solid #2b2d33; }
 .card.static-card.aspect-card { padding:18px; }
}
@media (prefers-reduced-motion:reduce) { .section-tabs .nav:hover,.section-tabs .nav:active,.chips .chip:hover,.chips .chip:active,.prism-choice:hover,.prism-choice:active { scale:1; transform:none; } }

/* Compact glowing masthead and raised, borderless collection tiles. */
.inventory-brand-name { color:#d87964; text-shadow:0 0 12px #b9342226; }
.sidebar-logo .brand-logo {
  animation:community-logo-glow 7s ease-in-out infinite alternate;
  filter:drop-shadow(0 0 8px #d22b2055);
}
@keyframes community-logo-glow {
  from { filter:drop-shadow(0 0 5px #d22b203b); }
  to { filter:drop-shadow(0 0 13px #d22b2070); }
}
@media (min-width:751px) {
  aside { height:64px; }
  .sidebar-logo .brand-logo { width:60px; height:58px; }
  .inventory-brand-name { font-size:19px; }
  aside .masthead-actions { gap:18px; }
}
.section-tabs .nav.active,.chips .chip.active,.prism-choice[aria-pressed="true"] {
  color:#ffa389;
  text-shadow:0 0 7px #f16a4b70,0 0 17px #c8332635;
}
.card.static-card,.card.static-card.has-item-image,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry {
  border-color:transparent;
  box-shadow:0 4px 0 #08090b,0 9px 18px #0007,inset 0 1px 0 #ffffff09;
}
@media (hover:hover) and (pointer:fine) {
  .section-tabs .nav:hover,.chips .chip:hover,.prism-choice:hover {
    color:#ffc4ac;
    text-shadow:0 0 8px #f17d5c80,0 0 18px #c8332645;
  }
  .card.static-card:hover,.prism-workspace .prism-detail:hover {
    border-color:transparent;
    transform:translateY(-4px);
    box-shadow:0 6px 0 #08090b,0 16px 27px #0008,inset 0 1px 0 #ffffff0d;
  }
}
@media (max-width:750px) {
  aside .mobile-brand { padding-top:7px; }
  .mobile-brand img { width:36px; height:36px; filter:drop-shadow(0 0 7px #d22b2055); }
  .mobile-brand span { font-size:17px; color:#d87964; }
  aside .masthead-actions { padding-bottom:6px; }
  .prism-entry[open] summary,.prism-entry[open] summary > span {
    color:#ffa389; text-shadow:0 0 7px #f16a4b70,0 0 17px #c8332635;
  }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar-logo .brand-logo { animation:none; }
  .card.static-card:hover,.prism-workspace .prism-detail:hover { transform:none; }
}

/* Match the logo to the social icons and restore the brand typeface. */
.sidebar-logo .brand-logo { width:28px; height:28px; object-fit:contain; }
.inventory-brand-name,
.mobile-brand span {
  font-family:'Vollkorn SC','Vollkorn',Georgia,serif;
  font-weight:700;
  letter-spacing:.5px;
}
@media (min-width:751px) {
  aside { height:58px; }
  .sidebar-logo .brand { align-items:center; gap:12px; }
  .sidebar-logo .brand-logo { width:28px; height:28px; }
}
@media (max-width:750px) {
  .mobile-brand img { width:28px; height:28px; }
}
/* Glow belongs to the prism artwork as well as its label. */
.prism-choice .prism-icon,
.prism-entry .prism-icon {
  filter:drop-shadow(0 0 3px var(--prism-color));
  transition:filter .25s ease;
}
.prism-choice[aria-pressed="true"] .prism-icon,
.prism-entry[open] .prism-icon {
  filter:drop-shadow(0 0 5px var(--prism-color)) drop-shadow(0 0 10px var(--prism-color));
}
@media (hover:hover) and (pointer:fine) {
  .prism-choice:hover .prism-icon {
    filter:drop-shadow(0 0 6px var(--prism-color)) drop-shadow(0 0 12px var(--prism-color));
  }
}
@media (prefers-reduced-motion:reduce) {
  .prism-choice .prism-icon,.prism-entry .prism-icon { transition:none; }
}

/* User-supplied artwork, darkened behind opaque cards. */
.sidebar-logo .brand-logo,.mobile-brand img { width:36px; height:36px; }
body { isolation:isolate; background:#0c0d0f; }
body::before {
 content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
 background:linear-gradient(180deg,rgba(12,13,15,.66),rgba(12,13,15,.85)),var(--city-art) center / cover no-repeat;
}
@media (max-width:750px) {
 body::before { background-position:center; background-image:linear-gradient(rgba(12,13,15,.82),rgba(12,13,15,.92)),var(--city-art); }
}

/* Smooth masthead matching the loot cards. */
aside { background:linear-gradient(145deg,#1b1c21,#15161a); border:0; border-radius:10px; padding-left:18px; padding-right:18px; box-shadow:0 4px 0 #08090b,0 9px 18px #0007,inset 0 1px 0 #ffffff09; }
@media (min-width:751px) { .app { padding-top:12px; } }
@media (max-width:750px) { aside { border-radius:0 0 10px 10px; padding-left:12px; padding-right:12px; } body::before { background-position:65% center; } }

/* A little artwork shows through the collection surfaces. */
aside,
.card.static-card,
.card.static-card.has-item-image,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry {
 background:linear-gradient(145deg,rgba(27,28,33,.84),rgba(21,22,26,.88));
}
@media (hover:hover) and (pointer:fine) {
 .card.static-card:hover,
 .card.static-card.has-item-image:hover,
 .prism-workspace .prism-detail:hover {
  background:linear-gradient(145deg,rgba(34,35,41,.88),rgba(27,28,33,.90));
 }
}

/* Consistent Vollkorn typography across desktop and mobile controls. */
.section-tabs .nav,
.chips .chip,
.class-trigger,
.class-option,
.language-switch button,
.prism-choice,
.prism-entry summary,
.page-head .eyebrow,
.results-header h2 {
 font-family:'Vollkorn SC','Vollkorn',Georgia,serif;
 font-weight:700;
}
.search input::placeholder { font-family:'Vollkorn',Georgia,serif; }
.card.static-card .card-top { font-size:11px; }
.card.static-card .source { font-size:12px; }
.aspect-card .aspect-description { font-size:16px; line-height:1.6; }
/* Copyright left, Blizzard attribution right on the same desktop row. */
footer { flex-direction:row; align-items:baseline; justify-content:space-between; gap:24px; }
footer > span:first-child { flex-shrink:0; }
footer > span:last-child { text-align:right; max-width:950px; }
@media (max-width:750px) {
 footer { flex-direction:column; align-items:flex-start; gap:8px; }
 footer > span:last-child { text-align:left; }
}
/* Shared warm red glow for the logo and site name. */
@keyframes community-logo-glow {
 from { filter:drop-shadow(0 0 5px #ef4936a0) drop-shadow(0 0 12px #d22b2055); }
 to { filter:drop-shadow(0 0 9px #ff6552c0) drop-shadow(0 0 22px #dc302590); }
}
@keyframes community-brand-glow {
 from { text-shadow:0 0 5px #ef49366b,0 0 12px #d22b203d; }
 to { text-shadow:0 0 8px #ff655299,0 0 21px #dc302573; }
}
.sidebar-logo .brand-logo,.mobile-brand img {
 animation:community-logo-glow 7s ease-in-out infinite alternate;
}
.inventory-brand-name,.mobile-brand span {
 color:#ef6554;
 animation:community-brand-glow 7s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:reduce) {
 .sidebar-logo .brand-logo,.mobile-brand img { animation:none; filter:drop-shadow(0 0 9px #ef493699); }
 .inventory-brand-name,.mobile-brand span { animation:none; text-shadow:0 0 7px #ef493680,0 0 16px #dc302550; }
}
/* Stronger title glow and a little more transparency for the tiles. */
.inventory-brand-name,.mobile-brand span { color:#ff4438; }
@keyframes community-brand-glow {
 from { text-shadow:0 0 5px #ff4438cc,0 0 13px #ef302699,0 0 25px #dc30254d; }
 to { text-shadow:0 0 7px #ff5548ee,0 0 19px #f23228bb,0 0 34px #dc302580; }
}
.card.static-card,
.card.static-card.has-item-image,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry {
 background:linear-gradient(145deg,rgba(27,28,33,.74),rgba(21,22,26,.79));
}
@media (hover:hover) and (pointer:fine) {
 .card.static-card:hover,
 .card.static-card.has-item-image:hover,
 .prism-workspace .prism-detail:hover {
  background:linear-gradient(145deg,rgba(34,35,41,.79),rgba(27,28,33,.83));
 }
}
@media (prefers-reduced-motion:reduce) {
 .inventory-brand-name,.mobile-brand span { text-shadow:0 0 6px #ff4438cc,0 0 17px #ef302699,0 0 28px #dc302566; }
}
/* Soft white edge lighting separates translucent surfaces from the artwork. */
aside,
.card.static-card,
.card.static-card.has-item-image,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry {
 box-shadow:inset 0 1px 0 #ffffff20,0 0 9px #ffffff0d,0 0 20px #ffffff06,0 4px 0 #08090baa,0 9px 18px #0007;
}
@media (hover:hover) and (pointer:fine) {
 .card.static-card:hover,
 .card.static-card.has-item-image:hover,
 .prism-workspace .prism-detail:hover {
  box-shadow:inset 0 1px 0 #ffffff30,0 0 12px #ffffff1a,0 0 26px #ffffff0b,0 6px 0 #08090baa,0 16px 27px #0008;
 }
}
/* Remove the old cube toolbar joining edge. */
.cube-view .toolbar,.aspects-view .toolbar { border:0; box-shadow:none; }
/* White halo on the social symbols. */
.social-links img {
 filter:invert(1) drop-shadow(0 0 4px #ffffff99) drop-shadow(0 0 9px #ffffff44);
}
@keyframes social-glow {
 from { filter:invert(1) drop-shadow(0 0 3px #ffffff80) drop-shadow(0 0 7px #ffffff33); }
 to { filter:invert(1) drop-shadow(0 0 5px #ffffffbb) drop-shadow(0 0 12px #ffffff66); }
}
/* Quiet snowfall behind the interface; never intercepts clicks. */
.ambient-snow { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .ambient-snow { display:none; } }
/* Compact single-row mobile masthead. */
@media (max-width:750px) {
 aside {
  display:flex; flex-direction:row; align-items:center; flex-wrap:nowrap;
  gap:6px; padding:6px 8px; min-height:48px; height:auto;
 }
 aside .mobile-brand,aside .masthead-actions { display:contents; }
 aside .mobile-brand > img { order:0; width:26px; height:26px; flex:0 0 26px; }
 aside .mobile-brand > span {
  order:1; font-size:clamp(11px,3vw,15px); letter-spacing:0;
  white-space:nowrap; line-height:1.2; flex-shrink:0;
 }
 aside .social-links { order:2; margin:0 0 0 auto; gap:2px; flex-shrink:0; }
 aside .social-links a { width:25px; height:34px; }
 aside .social-links img { width:18px; height:18px; }
 aside .header-actions { order:3; margin:0; padding:0; gap:0; flex-shrink:0; }
 aside .language-switch { gap:2px; margin:0; padding:0; }
 aside .language-switch button { padding:7px 3px; font-size:10px; letter-spacing:0; min-width:0; }
 aside #menuOpen { order:4; width:28px; min-width:28px; height:34px; padding:0; margin:0; font-size:20px; flex-shrink:0; }
}
@media (max-width:360px) {
 aside { gap:4px; padding-left:6px; padding-right:6px; }
 aside .mobile-brand > img { width:23px; height:23px; flex-basis:23px; }
 aside .social-links a { width:22px; }
 aside .language-switch button { padding-left:2px; padding-right:2px; }
}
/* Roomier mobile controls without the site-name label. */
@media (max-width:750px) {
 aside { min-height:60px; padding:8px 12px; gap:10px; }
 aside .mobile-brand > span { display:none; }
 aside .mobile-brand > img { width:36px; height:36px; flex-basis:36px; }
 aside .social-links { gap:5px; }
 aside .social-links a { width:32px; height:42px; }
 aside .social-links img { width:23px; height:23px; }
 aside .language-switch { gap:3px; }
 aside .language-switch button { font-size:12px; padding:10px 5px; min-height:42px; }
 aside #menuOpen {
  position:relative; width:42px; min-width:42px; height:42px;
  font-size:0; border:0; border-radius:8px; background:#ab30221c;
  box-shadow:inset 0 1px #ffac8c18,0 0 12px #cd33251c;
  transition:background .2s ease,transform .2s ease;
 }
 aside #menuOpen::before,aside #menuOpen::after {
  content:""; position:absolute; right:10px; height:2px; border-radius:2px;
  background:#f08a70; box-shadow:0 0 6px #ff604c99;
 }
 aside #menuOpen::before { top:15px; width:22px; }
 aside #menuOpen::after { top:24px; width:15px; }
 aside #menuOpen:active { transform:scale(.94); background:#ab302238; }
 aside #menuOpen:focus-visible { outline:2px solid #f08a70; outline-offset:2px; }
}
@media (max-width:360px) {
 aside { gap:6px; padding-left:8px; padding-right:8px; }
 aside .social-links { gap:2px; }
 aside .social-links a { width:29px; }
 aside .language-switch button { padding-left:3px; padding-right:3px; }
}
@media (prefers-reduced-motion:reduce) { aside #menuOpen:active { transform:none; } }
/* Straight bottom corners on the mobile masthead. */
@media (max-width:750px) {
 aside { border-bottom-left-radius:0; border-bottom-right-radius:0; }
}

.section-tabs a.nav { display:inline-block; text-decoration:none; text-align:center; cursor:pointer; }
/* Drawer close control matches the glowing menu button. */
#mobileMenu .drawer-heading { padding-bottom:16px; min-height:44px; }
#menuClose {
 position:relative; flex:0 0 42px; width:42px; height:42px; padding:0; margin:0;
 font-size:0; border:0; border-radius:8px; background:#ab30221c;
 box-shadow:inset 0 1px #ffac8c18,0 0 12px #cd33251c;
 transition:background .2s ease,transform .2s ease;
 -webkit-tap-highlight-color:transparent;
}
#menuClose::before,#menuClose::after {
 content:""; position:absolute; left:10px; top:20px; width:22px; height:2px;
 border-radius:2px; background:#f08a70; box-shadow:0 0 6px #ff604c99;
 transform:rotate(45deg);
}
#menuClose::after { transform:rotate(-45deg); }
#menuClose:focus { outline:none; }
#menuClose:focus-visible { outline:2px solid #f08a70; outline-offset:3px; }
#menuClose:active { transform:scale(.94); background:#ab302238; }
@media (prefers-reduced-motion:reduce) { #menuClose:active { transform:none; } }
/* showModal autofocus should not paint a keyboard ring after a tap. */
#mobileMenu.opened-by-pointer #menuClose:focus-visible { outline:none; }
/* Main section titles share the warm item-name colour. */
.page-head h1,
#mobileMenu .drawer-heading h2 { color:#e2d2b7; }