/* ============================================================
   JuxtAPoser — Crimson + Bone site theme
   Site-wide visual layer. Loaded after the individual tool CSS.
   ============================================================ */

:root{
  --juxta-bg:#090b0e;
  --juxta-bg-soft:#0f1216;
  --juxta-panel:#12151a;
  --juxta-panel-raised:#171a20;
  --juxta-panel-warm:#1a1215;

  --juxta-bone-bright:#fff4e2;
  --juxta-bone:#eadfce;
  --juxta-bone-soft:#d2c6b6;
  --juxta-muted:#a49d96;
  --juxta-muted-dark:#77777a;

  --juxta-crimson-bright:#ef6a70;
  --juxta-crimson:#c84d57;
  --juxta-crimson-mid:#9f3540;
  --juxta-crimson-deep:#66202a;
  --juxta-crimson-black:#271116;

  --juxta-border:#363b43;
  --juxta-border-soft:#292e35;
  --juxta-border-crimson:#73303a;

  --juxta-font-ui:Optima,Candara,"Segoe UI",Tahoma,sans-serif;
  --juxta-font-display:Optima,Candara,"Segoe UI",Tahoma,sans-serif;

  --juxta-glow:rgba(200,77,87,.18);
  --juxta-glow-strong:rgba(239,106,112,.25);
}

html{color-scheme:dark}
body{
  background:
    radial-gradient(circle at 50% -20%,rgba(110,28,38,.08),transparent 35%),
    var(--juxta-bg);
  color:var(--juxta-bone);
  font-family:var(--juxta-font-ui);
}

button,input,select,textarea{font-family:var(--juxta-font-ui)}

h1,h2,h3,h4,h5,h6,
.brand-copy h1,
.game-card strong,
.guide-tool-button strong,
.build-category-heading h3,
.build-card h4{
  font-family:var(--juxta-font-display)!important;
  color:var(--juxta-bone-bright);
  font-weight:700;
  letter-spacing:.015em;
}

a{color:#e58a8e}
a:hover,a:focus-visible{color:#ffb0b2}
::selection{background:#7a2833;color:#fff6e8}

/* ---------- Main site shell ---------- */
.panel,
.section-card,
.reference-box{
  border-color:var(--juxta-border);
  background:linear-gradient(180deg,#15181d,#0c0f12);
}

.site-header{
  background:
    radial-gradient(circle at 20% 0,rgba(124,35,46,.08),transparent 30%),
    linear-gradient(90deg,#08090b,#13151a 58%,#090a0d);
}

.brand-row{border-bottom-color:#493037}
.brand-copy h1{color:var(--juxta-bone-bright)}
.brand-copy p,
.section-subtext,
.game-card span,
.feedback,
.coming-soon p{color:var(--juxta-muted)}
.intro-copy{color:var(--juxta-bone-soft)}
.welcome,
.section-label{color:var(--juxta-crimson-bright)}

.social-links a{
  border-color:#41464e;
  background:#171a1f;
  color:var(--juxta-bone-soft);
}
.social-links a:hover,.social-links a:focus-visible{
  border-color:var(--juxta-crimson);
  color:var(--juxta-crimson-bright);
  box-shadow:0 0 13px var(--juxta-glow);
}

.game-card{
  border-color:#3d424a;
  background:#15181d;
  color:var(--juxta-bone);
}
.game-card:hover,.game-card:focus-visible{
  border-color:#86404a;
  background:#191518;
}
.game-card.active{
  border-color:var(--juxta-crimson);
  background:linear-gradient(180deg,#25151a,#141317);
  box-shadow:inset 0 0 0 1px rgba(239,106,112,.08),0 0 16px rgba(120,30,41,.08);
}
.game-card strong{color:var(--juxta-bone-bright)}

.reference-box h3{color:var(--juxta-bone-bright)}
.reference-box p,.copy-section{color:var(--juxta-bone-soft)}
.reference-box b,.copy-section b{color:var(--juxta-crimson-bright)}
.copy-section hr{background:#3d2c31}

.selection-bar{
  border-color:#4a3439;
  background:rgba(9,10,13,.94);
}
.selection-bar small{color:var(--juxta-muted)}
.selection-bar strong{color:var(--juxta-crimson-bright)}
.selection-bar button{
  border-color:var(--juxta-border-crimson);
  background:linear-gradient(#431d24,#241318);
  color:var(--juxta-bone-bright);
}

/* ---------- Tool launcher cards ---------- */
.guide-tool-button,
.guide-tool-button.skill-tool{
  border-color:#44383d;
  background:linear-gradient(180deg,#171a1f,#0d1013);
  color:var(--juxta-bone);
}
.guide-tool-button strong,
.guide-tool-button.skill-tool strong{
  color:var(--juxta-bone-bright);
}
.guide-tool-button span{color:var(--juxta-muted)}
.guide-tool-button:hover,
.guide-tool-button:focus-visible,
.guide-tool-button.skill-tool:hover,
.guide-tool-button.skill-tool:focus-visible{
  border-color:var(--juxta-crimson);
  background:linear-gradient(180deg,#211519,#101114);
  box-shadow:0 0 14px rgba(200,77,87,.08);
}

/* ---------- Build/tier list ---------- */
.build-category{
  --accent:var(--juxta-crimson-bright)!important;
  --accent-label:#db8d91!important;
  --accent-border:#71313a!important;
  --accent-glow:rgba(200,77,87,.10)!important;
}
.build-category-heading{border-bottom-color:#633039!important}
.build-category-heading h3{color:var(--juxta-crimson-bright)!important}
.build-category-heading p{color:var(--juxta-muted)!important}
.build-card{
  border-color:#3b3739!important;
  border-left-color:var(--juxta-crimson)!important;
  background:linear-gradient(105deg,rgba(131,33,45,.10),rgba(17,19,22,.96) 24%,#0b0d0f 100%)!important;
}
.build-card h4{color:var(--juxta-bone-bright)!important}
.build-category .build-detail>span,
.build-category .build-rating>span,
.build-category .build-block-label{color:#d58a8f!important}
.build-detail strong{color:var(--juxta-bone-soft)!important}
.build-area-token{color:var(--juxta-bone)!important}
.build-link{
  border-color:#74333c!important;
  color:#f3c7c4!important;
  background:linear-gradient(#31181d,#181013)!important;
}
.build-link:hover{border-color:#b84e59!important;color:#fff1e8!important}
.build-notes{border-left-color:#9c3f49!important;background:#130e10!important;color:var(--juxta-bone-soft)!important}
.build-notes span{color:#e7797e!important}
.build-about-compact{border-color:#403238!important;background:linear-gradient(180deg,#121317,#0b0d0f)!important}
.build-about-compact h3{color:var(--juxta-bone-bright)!important}

/* Keep semantic grade/category colors and item rarity colors untouched. */

/* ---------- Shared modal surfaces ---------- */
.skill-calc-modal,
.map-index-modal,
.currency-values-modal,
.cz-modal,
.rwz-modal,
.cex-modal{
  border-color:#5b3038!important;
  background:
    radial-gradient(circle at 50% 0,rgba(113,28,39,.08),transparent 32%),
    linear-gradient(180deg,#13161a,#090b0e)!important;
  color:var(--juxta-bone)!important;
}

.skill-calc-close,
.map-index-close,
.currency-values-close,
.cz-close,
.rwz-close,
.cex-close{
  border-color:#603039!important;
  background:#101216!important;
  color:var(--juxta-bone)!important;
}
.skill-calc-close:hover,.skill-calc-close:focus-visible,
.map-index-close:hover,.map-index-close:focus-visible,
.currency-values-close:hover,.currency-values-close:focus-visible,
.cz-close:hover,.cz-close:focus-visible,
.rwz-close:hover,.rwz-close:focus-visible,
.cex-close:hover,.cex-close:focus-visible{
  border-color:var(--juxta-crimson-bright)!important;
  color:#fff!important;
  box-shadow:0 0 12px var(--juxta-glow)!important;
  outline:none!important;
}

.skill-calc-title,
.map-index-title h2,
.currency-values-header h2,
.cz-header h2,
.rwz-header h2,
.cex-header h2{
  font-family:var(--juxta-font-display)!important;
  color:var(--juxta-bone-bright)!important;
  text-shadow:0 1px 0 #000!important;
}

.skill-control-label,
.map-element-label,
.currency-values-kicker,
.cz-kicker,
.rwz-kicker,
.cex-kicker,
.cex-section-kicker,
.cex-profile-kicker{
  color:var(--juxta-crimson-bright)!important;
}
.currency-live-dot,
.cz-kicker span,
.rwz-kicker span,
.cex-kicker span{
  background:var(--juxta-crimson-bright)!important;
  box-shadow:0 0 8px var(--juxta-glow-strong)!important;
}

/* ---------- Form controls across tools ---------- */
.skill-character-select,
.cex-search input,
.rwz-filter-button,
.rwz-subtype-button,
.rwz-socket-button,
.cz-header-actions button,
#currency-values-refresh{
  border-color:#4a4447;
  background:#0b0d10;
  color:var(--juxta-bone);
}

.skill-character-select:focus,
.cex-search input:focus{
  border-color:var(--juxta-crimson)!important;
  outline-color:var(--juxta-crimson)!important;
  box-shadow:0 0 0 2px rgba(200,77,87,.10)!important;
}

.rwz-filter-button:hover,.rwz-subtype-button:hover,.rwz-socket-button:hover,
.rwz-filter-button:focus-visible,.rwz-subtype-button:focus-visible,.rwz-socket-button:focus-visible,
.cz-header-actions button:hover,.cz-header-actions button:focus-visible,
#currency-values-refresh:hover,#currency-values-refresh:focus-visible{
  border-color:var(--juxta-crimson)!important;
  color:var(--juxta-bone-bright)!important;
}

.rwz-filter-button.is-active,
.rwz-subtype-button.is-active,
.rwz-socket-button.is-active{
  border-color:var(--juxta-crimson)!important;
  background:linear-gradient(180deg,#421c23,#231317)!important;
  color:var(--juxta-bone-bright)!important;
}

/* ---------- Runeword Wizard ---------- */
.rwz-header{border-bottom-color:#4b2d33}
.rwz-header p{color:var(--juxta-muted)}
.rwz-filter-block{border-color:#43343a;background:linear-gradient(180deg,#141418,#0d0f12)}
.rwz-filter-block h3,.rwz-subtype-label{color:#db8b90!important}
.rwz-status{color:#c9898d}
.rwz-card{border-color:#3e3539;background:linear-gradient(180deg,#111418,#0a0c0f)}
.rwz-card:hover{border-color:#76404a}
.rwz-name-row h3{color:var(--juxta-bone-bright)!important}
.rwz-runes span{border-color:#5d3038;background:#171012;color:#f0d7c3}
.rwz-card-meta{border-color:#37292e;color:var(--juxta-muted)}
.rwz-card-meta strong{color:#d7b2ad}
.rwz-stat-list{color:var(--juxta-bone-soft)}
.rwz-wiki-link{color:#dc7e83}

/* ---------- Corrupted Zone Tracker ---------- */
.cz-header{border-bottom-color:#4c2c33}
.cz-frame{color:var(--juxta-bone-soft)}
.cz-section-title,.cz-list-heading{color:#df8b90!important}
.cz-column{border-color:#41343a;background:#0d1013}
.cz-current-wrap{border-bottom-color:#4b3036;background:linear-gradient(180deg,#181216,#101216)}
/* Status/live semantic greens are intentionally retained. */

/* ---------- Currency Values ---------- */
.currency-values-header{border-bottom-color:#4b2d33}
.currency-values-header p{color:var(--juxta-muted)}
.currency-values-header p strong{color:var(--juxta-bone)}
.currency-credit{border-color:#59323a;background:#111418;color:var(--juxta-bone-soft)}
.currency-credit strong{color:#ea9699}
.currency-status-row{color:#b69091}
/* Rune/item valuation semantic colors remain untouched. */

/* ---------- Map Index ---------- */
.map-index-title h2{color:var(--juxta-bone-bright)!important}
.map-element-panel{border-color:#49343a;background:linear-gradient(180deg,#121419,#0c0f12)}
.map-element-label{color:var(--juxta-crimson-bright)!important}
.map-element-button{border-color:#42464c;background:linear-gradient(#15181c,#0c0f12);color:var(--juxta-bone-soft);font-family:var(--juxta-font-ui)!important}
.map-element-button:hover,.map-element-button:focus-visible{border-color:#8c414b}
.map-element-reset{border-color:#5f343b;color:var(--juxta-bone-soft)}
.map-count{color:#d68489;font-family:var(--juxta-font-ui)!important}
.map-list-shell{border-color:#413238}
.map-list-header{border-bottom-color:#60313a;color:#d88c91;font-family:var(--juxta-font-ui)!important}
/* Element-specific physical/magic/fire/light/cold/poison active colors stay semantic. */

/* ---------- Skill Calculator ---------- */
.skill-control-box{border-color:#41343a;background:linear-gradient(180deg,#101318,#0b0d10)}
.skill-control-label{font-family:var(--juxta-font-ui)!important}
.skill-character-select{font-family:var(--juxta-font-ui)!important}
/* Skill-tree native class/skill colors are intentionally retained. */

/* ============================================================
   CHARACTER EXPORTER — readable Optima-style typography
   ============================================================ */
.cex-modal,
.cex-modal button,
.cex-modal input,
.cex-modal a,
.cex-directory-panel,
.cex-directory-panel button{
  font-family:var(--juxta-font-ui)!important;
}

.cex-header h2,
.cex-character-title,
.cex-directory-heading h3,
.cex-section-heading h3{
  font-family:var(--juxta-font-display)!important;
  color:var(--juxta-bone-bright)!important;
}

.cex-directory-launch strong{
  font-family:var(--juxta-font-display)!important;
  color:var(--juxta-bone-bright)!important;
}
.cex-directory-launch span{color:var(--juxta-muted)!important}

.cex-search label{color:var(--juxta-crimson-bright)!important}
.cex-search-button,.cex-download{
  border-color:#73313a!important;
  background:linear-gradient(180deg,#3b1a20,#201216)!important;
  color:var(--juxta-bone-bright)!important;
}
.cex-armory-link{color:var(--juxta-bone-soft)!important}
.cex-profile-card{border-color:#57313a!important;background:linear-gradient(90deg,#1d1215,#121419 58%,#0d1013)!important}
.cex-character-meta{color:var(--juxta-muted)!important}

.cex-equipment-view-toggle button,
.cex-weapon-set-tabs button{
  font-family:var(--juxta-font-ui)!important;
  color:var(--juxta-bone)!important;
}
.cex-equipment-view-toggle button[aria-pressed="true"],
.cex-weapon-set-tabs button[aria-pressed="true"]{
  border-color:var(--juxta-crimson)!important;
  background:#421d24!important;
  color:var(--juxta-bone-bright)!important;
}

/* Ladder — brighter, simpler type. */
.cex-ladder-row button{
  font-family:var(--juxta-font-ui)!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
  color:var(--juxta-bone-bright)!important;
  text-shadow:none!important;
}
.cex-ladder-row > span{
  font-family:var(--juxta-font-ui)!important;
  color:#b7b2ad!important;
  font-size:12px!important;
}
.cex-ladder-row.is-head span{
  color:#e48388!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}
.cex-ladder-row.is-selected{
  background:linear-gradient(90deg,rgba(121,32,42,.38),rgba(18,21,25,.88))!important;
  box-shadow:inset 3px 0 0 var(--juxta-crimson)!important;
}

/* Heroes — boss headers are deliberately crimson so they cannot
   be confused with the bone-colored character-name rows. */
.cex-heroes-group{
  border-color:#3c3f45!important;
  background:#090c0f!important;
}
.cex-heroes-group-heading{
  border-bottom-color:#6d323b!important;
  background:linear-gradient(90deg,#2a1419,#171519 60%,#111419)!important;
}
.cex-heroes-group-heading::before{
  color:var(--juxta-crimson-bright)!important;
  text-shadow:0 0 8px var(--juxta-glow)!important;
}
.cex-heroes-group-heading h4{
  font-family:var(--juxta-font-display)!important;
  color:var(--juxta-crimson-bright)!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  text-shadow:none!important;
}
.cex-heroes-group-heading > span{
  border-color:#7d3540!important;
  background:#241317!important;
  color:#f0a3a6!important;
  font-family:var(--juxta-font-ui)!important;
}
.cex-hero-row{border-bottom-color:#292e34!important}
.cex-hero-name{
  font-family:var(--juxta-font-ui)!important;
  font-size:15px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:.002em!important;
  color:var(--juxta-bone-bright)!important;
  text-shadow:none!important;
}
.cex-hero-row:hover{
  background:linear-gradient(90deg,rgba(128,34,45,.24),rgba(18,21,25,.82))!important;
}
.cex-hero-row:hover .cex-hero-name,
.cex-hero-row.is-selected .cex-hero-name{
  color:#fff!important;
  text-decoration:none!important;
}
.cex-hero-row.is-selected{
  background:linear-gradient(90deg,rgba(128,34,45,.42),rgba(18,21,25,.88))!important;
  box-shadow:inset 3px 0 0 var(--juxta-crimson)!important;
}
.cex-heroes-empty{color:var(--juxta-muted-dark)!important}

.cex-directory-mode button[aria-pressed="true"],
.cex-directory-classes button[aria-pressed="true"]{
  border-color:var(--juxta-crimson)!important;
  background:linear-gradient(180deg,#4b2027,#281418)!important;
  color:var(--juxta-bone-bright)!important;
}
.cex-directory-mode button,
.cex-directory-classes button{font-family:var(--juxta-font-ui)!important}
.cex-directory-status{color:var(--juxta-muted)!important}

/* Do not recolor Diablo item rarity text. The .is-runeword,
   .is-unique, .is-set, .is-rare, .is-magic and .is-crafted
   rules remain owned by character-item-images.css. */

/* ---------- Focus accessibility ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline-color:var(--juxta-crimson-bright);
}

@media(max-width:620px){
  .cex-ladder-row button,.cex-hero-name{font-size:14px!important}
  .cex-heroes-group-heading h4{font-size:15px!important}
}