/* Inventory edition: compact item tiles on a layered dark work surface. */
:root { --bg:#101012; --panel:#202024; --line:#3b3634; --red:#df8267; --gold:#d5af77; --text:#eee6d9; --muted:#a89e93; }
body { background:radial-gradient(ellipse at 50% -10%,#49372b66,transparent 60%),#101012; }
main { max-width:1680px; }
.page-head h1 { font-size:clamp(30px,3vw,44px); line-height:1.1; letter-spacing:-.8px; margin:8px 0; }
.page-head .eyebrow { font-size:11px; letter-spacing:3px; color:#d5af77; }
#intro { display:none; }
.search,.class-picker,#reset { background:linear-gradient(#19181a,#201e20); border-color:#453e37; border-radius:8px; box-shadow:inset 0 2px 5px #0005,0 1px 0 #ffffff08; }
.cards { padding:20px; background:linear-gradient(130deg,#272326,#19191c); border:1px solid #46403b; border-radius:14px; gap:12px; box-shadow:0 18px 40px #0005,inset 0 1px 0 #ffffff0c; }
.card.static-card,.card.static-card.has-item-image {
  min-height:246px; padding:12px 12px 11px; align-items:center; text-align:center;
  border:1px solid #544739; border-radius:9px;
  background:radial-gradient(ellipse at 50% 22%,#69503930,transparent 60%),linear-gradient(150deg,#302a27,#1e1d20 70%);
  box-shadow:0 5px 0 #0f0f11,0 9px 13px #0006,inset 0 1px 0 #eac59820;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.card.static-card .card-top { order:0; justify-content:center; font-family:'Vollkorn',Georgia,serif; font-size:11px; letter-spacing:.4px; color:#b3a799; line-height:1.3; min-height:14px; }
.card.static-card .item-icon { order:1; position:static; width:100%; height:99px; margin:5px 0 8px; object-fit:contain; filter:drop-shadow(0 9px 6px #000b); }
.card.static-card h3,.card.static-card.has-item-image h3 { order:2; width:100%; font-family:'Vollkorn',Georgia,serif; font-size:18px; line-height:1.15; color:#f2d6a7; margin:0 0 9px; min-height:42px; text-shadow:0 2px 2px #0008; overflow-wrap:anywhere; }
.card.static-card > .type { display:none; }
.card.static-card .source { order:3; justify-content:center; margin-top:auto; width:100%; padding-top:9px; border-top:1px solid #ad886025; color:#b9afa4; font-size:12px; line-height:1.3; }
.results-header { margin:22px 0 12px; }
.results-header h2 { font-size:14px; color:#bcae9b; letter-spacing:1px; }
.chips .chip { padding:9px 13px; font-size:14px; line-height:1.3; border-radius:6px; border:1px solid transparent; color:#cbbba5; text-shadow:none; }
.chips .chip.active { background:linear-gradient(#594532,#382c24); border-color:#8c6d49; box-shadow:0 3px 0 #171312,inset 0 1px #ffdcaa22; color:#ffe4b9; text-shadow:0 0 10px #dfa56744; }
.cards.prism-surface { padding:22px; }
.prism-workspace { grid-template-columns:265px minmax(0,1fr); gap:24px; }
.prism-choice { padding:14px 12px; font-size:15px; border-radius:7px; }
.prism-choice[aria-pressed="true"] { background:linear-gradient(135deg,#45362b,#2c2826); border:1px solid #73593e; box-shadow:0 4px 0 #131113,inset 0 1px #ffe3b51a; color:#ffe3b5; text-shadow:0 0 9px #edc78d55; }
.prism-workspace .prism-detail { background:linear-gradient(135deg,#252225,#19191c); border:1px solid #484039; box-shadow:inset 0 2px 9px #0005,0 1px #ffffff0a; padding:24px; border-radius:9px; }
.prism-affixes li { padding:15px 0; }
footer { font-size:12px; letter-spacing:.3px; color:#948b82; }
@media (min-width:751px) {
  .app { display:block; padding:18px 24px; }
  aside { position:relative; width:100%; max-width:1632px; margin:0 auto; height:82px; padding:0 22px; flex-direction:row; align-items:center; gap:32px; border:1px solid #514336; border-radius:12px; background:linear-gradient(175deg,#35302b,#211f20); box-shadow:0 5px 0 #0b0b0d,0 14px 30px #0004,inset 0 1px #edd2ac22; }
  aside::before,aside::after { display:none; }
  .sidebar-logo { padding:0; flex:0 0 auto; }
  .sidebar-logo .brand { margin:0; padding:0; }
  .sidebar-logo .brand-logo { width:76px; height:72px; object-fit:contain; }
  .sidebar-content { flex:1; display:flex; align-items:center; padding:0; margin:0; background:none; }
  aside nav { display:flex; flex-direction:row; gap:12px; width:auto; margin:0; padding:0; }
  aside nav .nav { width:auto; margin:0; padding:12px 20px; font-size:16px; letter-spacing:.5px; border:1px solid transparent; border-radius:7px; }
  aside nav .nav.active { background:#171619; border-color:#62503c; box-shadow:inset 0 2px 6px #0006; color:#f3d6aa; }
  aside nav .nav:hover { scale:1.03; }
  main { width:100%; margin:0 auto; padding:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  main > header { grid-column:2; grid-row:1; height:auto; padding:25px 0; border:0; gap:24px; }
  .page-head { grid-column:1; grid-row:1; padding:30px 0 24px; }
  .toolbar { grid-column:1/-1; margin:0; padding:16px; border:1px solid #3f3832; border-bottom:0; background:#222023; border-radius:12px 12px 0 0; }
  main > .chips { grid-column:1/-1; margin:0; padding:0 16px 16px; gap:6px; border:1px solid #3f3832; border-top:0; background:#222023; border-radius:0 0 12px 12px; }
  .results-header,.cards,footer { grid-column:1/-1; }
  .cards { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
  .cube-view .toolbar { border-bottom:1px solid #3f3832; border-radius:12px; }
  .cube-view main > .chips { display:none; }
}
@media (hover:hover) and (pointer:fine) {
  .card.static-card:hover { transform:translateY(-5px) scale(1.02); background:radial-gradient(ellipse at 50% 22%,#ad824440,transparent 65%),linear-gradient(150deg,#3b322a,#252125); border-color:#544739; box-shadow:0 8px 0 #0f0f11,0 16px 24px #0008,inset 0 1px #ffe3b533,0 0 18px #bb895b15; z-index:1; }
  .chips .chip:hover { scale:1; transform:translateY(-1px); color:#ffe2b9; background-color:#3a3029; }
}
@media (max-width:750px) {
  aside { background:linear-gradient(#302b27,#201e20); border-bottom:1px solid #554636; box-shadow:0 4px 16px #0005; }
  main { padding:0 12px; }
  .page-head { padding:24px 3px 12px; }
  .cards { padding:10px; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:10px; }
  .card.static-card,.card.static-card.has-item-image { min-height:233px; padding:10px 8px; }
  .card.static-card h3,.card.static-card.has-item-image h3 { font-size:17px; }
  .card.static-card .item-icon { height:88px; }
  .toolbar { margin-top:10px; }
  #mobileMenu { background:linear-gradient(145deg,#302923,#18181b); }
  .cards.prism-surface { padding:10px; }
  .prism-accordion .prism-entry { background:linear-gradient(135deg,#302923,#201e21); border:1px solid #574634; box-shadow:0 4px 0 #111013,inset 0 1px #ffffff0a; }
  .prism-entry summary { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { .card.static-card:hover,.chips .chip:hover { transform:none; } }

/* Aligned burgundy surfaces and lively text navigation. */
:root { --red:#d56860; --gold:#d7b49b; --line:#493335; }
body { background:radial-gradient(ellipse at 50% -10%,#642b3260,transparent 60%),#141113; }
.inventory-brand-name { font-family:'Vollkorn SC','Vollkorn',Georgia,serif; font-size:22px; line-height:1.15; letter-spacing:.7px; color:#f1d3bd; white-space:nowrap; }
.cards { background:linear-gradient(130deg,#2d2227,#1e191e); border-color:#53363b; }
.card.static-card,.card.static-card.has-item-image { border-color:#604044; background:radial-gradient(ellipse at 50% 22%,#963d3930,transparent 60%),linear-gradient(150deg,#38282b,#211b20 70%); box-shadow:0 5px 0 #130e11,0 9px 13px #0006,inset 0 1px #edaaa020; }
.card.static-card h3 { color:#f0d0b5; }
.search,.class-picker,#reset { border-color:#53383d; }
.prism-choice[aria-pressed="true"] { background:linear-gradient(135deg,#482b30,#2d2026); border-color:#795056; }
.prism-workspace .prism-detail { border-color:#53383d; background:linear-gradient(135deg,#2d2228,#211a20); }
.chips .chip,.nav { transition:scale .2s ease,transform .2s ease,color .2s ease,text-shadow .2s ease; }
.chips .chip.active { background:none; border-color:transparent; box-shadow:none; color:#f1b3a5; text-shadow:0 0 7px #ffab8d70,0 0 17px #d84f4a40; }
@media (min-width:751px) {
  main,aside { max-width:1632px; }
  aside { border-color:#654047; background:linear-gradient(175deg,#3a282e,#251c23); gap:32px; }
  .sidebar-logo .brand { gap:14px; }
  .toolbar,main > .chips { background:#291e24; border-color:#53363b; }
  aside nav .nav.active { background:none; border-color:transparent; box-shadow:none; color:#f1b3a5; text-shadow:0 0 7px #ffab8d70,0 0 17px #d84f4a40; }
}
@media (hover:hover) and (pointer:fine) {
  aside nav .nav:hover,.chips .chip:hover { scale:1.08; transform:none; color:#ffe0cb; background:none; text-shadow:0 0 8px #f4a18a80,0 0 18px #d84f4a40; }
  .card.static-card:hover { background:radial-gradient(ellipse at 50% 22%,#b54c4540,transparent 65%),linear-gradient(150deg,#453036,#2b2027); border-color:#604044; }
}
aside nav .nav:active,.chips .chip:active { scale:.95; transform:translateY(1px); }
@media (min-width:751px) and (max-width:1000px) {
  .inventory-brand-name { font-size:18px; }
  aside { gap:18px; padding:0 14px; }
  aside nav { gap:8px; }
  aside nav .nav { padding:12px 10px; font-size:14px; }
}
@media (max-width:750px) {
  aside { background:linear-gradient(#38262e,#241b22); border-bottom-color:#654047; }
  #mobileMenu { background:linear-gradient(145deg,#38252d,#20181e); }
  .prism-accordion .prism-entry { background:linear-gradient(135deg,#39272e,#261c23); border-color:#604044; }
}
@media (prefers-reduced-motion:reduce) {
  aside nav .nav:hover,aside nav .nav:active,.chips .chip:hover,.chips .chip:active { scale:1; transform:none; }
}

/* Charcoal and true red, with a shared masthead across screen sizes. */
:root { --red:#d44836; --line:#49312b; }
body { background:radial-gradient(ellipse at 50% -15%,#7a1c1255,transparent 60%),#131212; }
aside { background:linear-gradient(175deg,#382521,#201a18); border-color:#64382d; }
aside .sidebar-content { display:none; }
aside .masthead-actions { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-left:auto; border:0; padding:0; height:auto; }
.section-tabs { grid-column:1/-1; padding:22px 0 0; }
.section-tabs nav { display:flex; flex-direction:row; justify-content:center; gap:32px; margin:0; padding:0 0 14px; border-bottom:1px solid #4f3027; }
.section-tabs .nav { width:auto; margin:0; padding:10px 18px; font-size:18px; color:#bea99b; background:none; border:0; letter-spacing:.6px; }
.section-tabs .nav.active { color:#f27a56; text-shadow:0 0 9px #e93a2560; background:none; box-shadow:none; }
.cards { background:linear-gradient(130deg,#29231f,#1c1b19); border-color:#4f382d; }
.card.static-card,.card.static-card.has-item-image { border-color:#573a2d; background:radial-gradient(ellipse at 50% 22%,#a7391830,transparent 60%),linear-gradient(150deg,#32251d,#211d19 70%); }
.toolbar,main > .chips { background:#241e1b; border-color:#4f382d; }
.search,.class-picker,#reset { border-color:#50382d; background:#1d1a18; }
.chips .chip.active { color:#f07a54; text-shadow:0 0 8px #ef45264d; }
.prism-workspace .prism-detail { background:linear-gradient(135deg,#2b231e,#201b17); border-color:#50382d; }
.prism-choice[aria-pressed="true"] { background:linear-gradient(135deg,#48271b,#2c2119); border-color:#79462d; }
#drawerNav:empty,#drawerActions:empty { display:none; }
@media (min-width:751px) {
  aside { background:linear-gradient(175deg,#382521,#201a18); border-color:#64382d; }
  .page-head { grid-column:1/-1; grid-row:auto; padding:24px 0; }
}
@media (hover:hover) and (pointer:fine) {
  .section-tabs .nav:hover { scale:1.08; color:#ffc5a5; text-shadow:0 0 10px #ed4d2c70; }
  .card.static-card:hover { background:radial-gradient(ellipse at 50% 22%,#b9412040,transparent 65%),linear-gradient(150deg,#402b20,#2a211a); border-color:#573a2d; }
}
.section-tabs .nav:active { scale:.95; }
@media (max-width:750px) {
  aside { display:flex; flex-direction:column; height:auto; padding:0 12px; gap:0; background:linear-gradient(#35221b,#211a16); border-bottom-color:#64382d; }
  aside .mobile-brand { width:100%; padding:10px 0 4px; background:none; }
  aside .masthead-actions { width:100%; margin:0; padding:4px 0 10px; display:flex; justify-content:space-between; }
  aside .social-links { gap:6px; }
  aside .social-links a { width:32px; height:34px; }
  aside .social-links img { width:22px; height:22px; }
  aside .header-actions { flex-wrap:nowrap; }
  .section-tabs { padding-top:14px; }
  .section-tabs nav { gap:12px; padding-bottom:12px; }
  .section-tabs .nav { width:50%; padding:8px 3px; font-size:15px; letter-spacing:.2px; }
  .page-head { padding-top:18px; }
  #mobileMenu { background:linear-gradient(145deg,#33251c,#1e1915); }
  .prism-accordion .prism-entry { background:linear-gradient(135deg,#34261b,#231c16); border-color:#573a2d; }
}
@media (prefers-reduced-motion:reduce) { .section-tabs .nav:hover,.section-tabs .nav:active { scale:1; } }

/* Prism navigation matches the shared glowing text buttons. */
.prism-choice,
.prism-choice:hover,
.prism-choice[aria-pressed="true"] {
  background:none;
  border-color:transparent;
  box-shadow:none;
}
.prism-choice { color:#bea99b; }
.prism-choice[aria-pressed="true"] {
  color:#f27a56;
  text-shadow:0 0 9px #e93a2560;
}
@media (hover:hover) and (pointer:fine) {
  .prism-choice:hover {
    transform:none;
    scale:1.05;
    color:#ffc5a5;
    text-shadow:0 0 10px #ed4d2c70;
  }
}
.prism-choice:active { transform:none; scale:.95; }
@media (max-width:750px) {
  .prism-entry summary { color:#bea99b; }
  .prism-entry[open] summary,
  .prism-entry[open] summary > span {
    color:#f27a56;
    text-shadow:0 0 9px #e93a2560;
  }
  .prism-entry summary:active > span { scale:.95; }
}
@media (prefers-reduced-motion:reduce) {
  .prism-choice:hover,.prism-choice:active,
  .prism-entry summary:active > span { scale:1; transform:none; }
}

/* Keep the press and release smooth while the detail panel changes. */
.prism-choice {
  transform-origin:left center;
  transition:scale .2s ease,color .2s ease,text-shadow .2s ease;
}
@media (prefers-reduced-motion:reduce) {
  .prism-choice { transition:none; }
}

/* Borderless surfaces retain their depth through lighting and shadows. */
aside,
.toolbar,
main > .chips,
.cards,
.card.static-card,
.card.static-card.has-item-image,
.card.static-card:hover,
.search,
.class-picker,
#reset,
.class-options,
.prism-workspace .prism-detail,
.prism-accordion .prism-entry,
#mobileMenu,
.section-tabs .nav,
.chips .chip,
.chips .chip.active,
.prism-choice,
.prism-choice[aria-pressed="true"] {
  border-color:transparent;
}

/* Prism properties share the raised loot-card surface. */
.prism-workspace .prism-detail {
  border:1px solid transparent;
  border-radius:9px;
  background:radial-gradient(ellipse at 50% 22%,#a7391830,transparent 60%),linear-gradient(150deg,#32251d,#211d19 70%);
  box-shadow:0 5px 0 #130e11,0 9px 13px #0006,inset 0 1px #edaaa020;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
@media (hover:hover) and (pointer:fine) {
  .prism-workspace .prism-detail:hover {
    transform:translateY(-3px);
    background:radial-gradient(ellipse at 50% 22%,#b9412040,transparent 65%),linear-gradient(150deg,#402b20,#2a211a);
    box-shadow:0 8px 0 #0f0f11,0 16px 24px #0008,inset 0 1px #ffe3b533;
  }
}
@media (prefers-reduced-motion:reduce) {
  .prism-workspace .prism-detail:hover { transform:none; }
}

/* Sanctuary palette: charcoal, dark crimson and aged gold. */
:root { --bg:#100e0e; --panel:#1c1717; --red:#ba382b; --gold:#c4a16d; --text:#e9dfcd; --muted:#a49989; }
body { background:radial-gradient(ellipse at 40% -15%,#72170d55,transparent 58%),#100e0e; }
aside { background:linear-gradient(175deg,#2b1b18,#181313); border-color:transparent; }
.section-tabs nav { justify-content:flex-start; gap:16px; border-bottom-color:#44251e; }
.section-tabs .nav { padding-left:9px; padding-right:9px; color:#baa58a; }
.section-tabs .nav.active,.chips .chip.active,.prism-choice[aria-pressed="true"] { color:#df6345; text-shadow:0 0 9px #b526184d; }
.inventory-brand-name { color:#d9b883; }
.toolbar,main > .chips { background:#201918; }
.search,.class-picker,#reset { background:#151111; }
.cards { background:linear-gradient(130deg,#231b19,#171414); }
.card.static-card,.card.static-card.has-item-image,
.prism-workspace .prism-detail {
  background:radial-gradient(ellipse at 50% 15%,#8b210f25,transparent 65%),linear-gradient(150deg,#2b1d19,#181414 70%);
  box-shadow:0 5px 0 #0b0909,0 9px 15px #0008,inset 0 1px #b98b551c;
}
.card.static-card h3 { color:#dec08c; }
.card.static-card .card-top { color:#ad9a80; }
.card.static-card .source { color:#a79986; border-top-color:#98733d22; }
.card.static-card h3,.inventory-brand-name { text-shadow:0 2px 3px #0009; }
@media (hover:hover) and (pointer:fine) {
  .card.static-card:hover,.prism-workspace .prism-detail:hover {
    background:radial-gradient(ellipse at 50% 15%,#b4321740,transparent 65%),linear-gradient(150deg,#38231c,#211815);
    box-shadow:0 8px 0 #0b0909,0 16px 24px #0009,inset 0 1px #d8aa7026,0 0 16px #8c1b0e18;
  }
  .section-tabs .nav:hover,.chips .chip:hover,.prism-choice:hover { color:#edac79; text-shadow:0 0 10px #c5382260; }
}
@media (max-width:750px) {
  aside { background:linear-gradient(#2b1b18,#181313); }
  .section-tabs nav { gap:6px; flex-wrap:wrap; }
  .section-tabs .nav { width:auto; padding-left:6px; padding-right:6px; }
  #mobileMenu { background:linear-gradient(145deg,#291b17,#151111); }
  .prism-accordion .prism-entry { background:linear-gradient(135deg,#2b1d19,#181414); }
}

/* Aspect descriptions use the loot-card surface with room to read. */
.aspects-view main > .chips,
.aspects-view #drawerBosses { display:none; }
.aspects-view .toolbar { border-radius:12px; border-bottom:1px solid transparent; }
.cards.aspect-surface { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); align-items:stretch; }
.card.static-card.aspect-card { min-height:0; align-items:flex-start; text-align:left; padding:20px; }
.aspect-card .card-top { justify-content:flex-start; margin-bottom:12px; }
.card.static-card.aspect-card h3 { font-size:21px; min-height:0; margin:0 0 14px; }
.aspect-card .aspect-description { order:3; margin:0; font-family:'Vollkorn',Georgia,serif; font-size:16px; line-height:1.55; color:#d7cbbb; white-space:pre-line; overflow-wrap:anywhere; }
.section-tabs nav { flex-wrap:wrap; }
@media (max-width:750px) {
  .cards.aspect-surface { grid-template-columns:1fr; }
  .card.static-card.aspect-card { min-height:0; padding:18px; }
  .section-tabs .nav { font-size:14px; }
}

/* Aspect artwork and names share a compact heading above the effect. */
.aspect-card .aspect-heading { order:2; display:flex; align-items:center; gap:12px; width:100%; margin-bottom:14px; }
.aspect-card .aspect-icon { width:52px; height:52px; flex:0 0 52px; object-fit:contain; filter:drop-shadow(0 4px 5px #0008); }
.card.static-card.aspect-card .aspect-heading h3 { margin:0; flex:1; min-width:0; }