/* v0.5.3.1 */
/* v0.5.2 */
:root{
  --bg: #0e0e10;
  --ink: #e4e0d8;
  --muted: #a7a19a;
  --gold: #c8a86b;
  --silver: #b7b9c4;
  --panel: rgba(10,10,12,.86);
  --edge: rgba(200,168,107,.35);
  --radius: 16px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  height:100%;
  background: var(--bg) url('images/background.png') center/cover no-repeat fixed;
  color:var(--ink);
  font-family:'Cormorant Garamond',serif;
}

.intro-screen{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.85) 100%);
  z-index:50;
  text-align:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.intro-screen.fade-out{ opacity:0; visibility:hidden; }
.intro-content{ max-width:720px; padding:2rem; }
.intro-content p{
  font-family:'Cormorant Infant',serif;
  font-style:italic;
  font-size:1.7rem;
  color:var(--gold);
  text-shadow:0 0 8px rgba(0,0,0,0.8);
  margin-bottom:2rem;
}

.asc-art{
  position:fixed; inset:0; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
  background-image:
    linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6)),
    var(--asc-img);
  background-position:center; background-size:cover; background-repeat:no-repeat;
  filter:saturate(.9) brightness(1.05);
}
.asc-art.show{ opacity:.92; }

#app.hidden{ display:none; }
.fade-in{ animation:fadeIn .7s ease forwards; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

#app{
  position:relative;
  min-height:100%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(0,0,0,.28);
}


header{
  text-align:center;
  padding:3rem 1rem 1.25rem;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}

.title{
  letter-spacing:.04em;
  font-weight:600;
  margin:0 0 .25rem;
  font-size:1.9rem;
  color:var(--gold);
}

.subtitle{
  font-style:italic;
  font-weight:400;
  color:var(--silver);
  margin-top:-0.2rem;
  margin-bottom:0.6rem;
  position:relative;
}
.subtitle::after{
  content:"";
  display:block;
  height:4px;
  width:65%;
  margin:0.6rem auto 1.1rem;
  background:
    radial-gradient(circle at left, transparent 70%, rgba(0,0,0,0.9) 100%),
    radial-gradient(circle at right, transparent 70%, rgba(0,0,0,0.9) 100%),
    linear-gradient(90deg, transparent, var(--gold), transparent);
  background-blend-mode:overlay;
  border-radius:50%;
  filter: drop-shadow(0 0 4px rgba(200,168,107,.4));
}

.build-name{
  margin:.2rem 0 0;
  font-size:clamp(1.2rem,2.6vw,1.9rem);
  color:var(--gold);
  font-family:'Cormorant Infant',serif;
  font-style:italic;
  letter-spacing:.06em;
}

.flavor{
  margin:.35rem auto .75rem;
  color:var(--muted);
  font-family:'Cormorant Infant',serif;
  font-style:italic;
  max-width:60ch;
  font-size:1.1rem;
}

.roll-btn{
  margin-top:.5rem; padding:.7rem 1.1rem;
  border-radius:var(--radius);
  border:1px solid var(--edge);
  background:rgba(24,24,26,.55);
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.roll-btn .roll-text{
  white-space:nowrap;
}

.roll-btn .roll-status{
  font-size:.8rem;
  color:var(--muted);
  opacity:0;
  transition:opacity .25s ease;
}

.roll-btn.is-loading .roll-status{
  opacity:1;
}


main{ max-width:860px; margin:0 auto; padding:1.25rem; }

.panel{
  position:relative; background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  padding:1rem 1.25rem 1.25rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  overflow:hidden;
}
.panel::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background-image: var(--ailment-overlay-1, none), var(--ailment-overlay-2, none);
  background-blend-mode: screen, normal; mix-blend-mode: normal;
}

.sect{ padding:.25rem 0; }
.sect-head{ margin-bottom:.5rem; position:relative; }
.sect-head .underline{
  height:1px; width:120px;
  background:linear-gradient(90deg, var(--gold), transparent);
  margin:.25rem 0 .4rem;
}
.section-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.section-title-row{
  display:flex;
  align-items:center;
  gap:.4rem;
}
.section-header .section-title{ margin:0 0 .1rem; font-weight:600; color:var(--silver); letter-spacing:.02em; }
.lock-toggle{
  background:transparent;
  border:0px solid rgba(220, 188, 120, 0.28);
  color:#d9c07a;
  cursor:pointer;
  width:32px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:6px;
  opacity:0.85;
  pointer-events:auto;
  filter:drop-shadow(0 0 6px rgba(200,168,107,0.45));
  transition:opacity 150ms ease-out, border-color 120ms ease-out, filter 150ms ease-out;
}
.lock-toggle:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.section-header[data-locked="true"] .lock-toggle{
  opacity:1;
  pointer-events:auto;
  border-color:var(--gold);
  filter:drop-shadow(0 0 8px rgba(200,168,107,0.6));
}
.lock-icon.lock-on{ display:none; }
.section-header[data-locked="true"] .lock-icon.lock-on{ display:inline-block; }
.section-header[data-locked="true"] .lock-icon.lock-off{ display:none; }
.section-header[data-locked="true"] .section-title{ color:var(--gold); }

/* ===== Locked section overlay (more pronounced lock state) ===== */

/* Give locked sections a positioning context */
.sect[data-locked="true"]{
  position:relative;
}

/* Gold band across the section: strongest in the middle, fades at the sides */
.sect[data-locked="true"]::before{
  content:"";
  position:absolute;
  /* sit slightly inside the card instead of spilling past the edges */
  inset:6px 10px;
  border-radius:10px;
  background:
    linear-gradient(
      90deg,
      rgba(212,170,80,0.00) 0%,
      rgba(212,170,80,0.14) 50%,
      rgba(212,170,80,0.00) 100%
    );
  pointer-events:none;

  /* much softer or no glow; pick one of these: */

  /* Option A: very soft halo */
  box-shadow:0 0 6px rgba(212,170,80,0.18);
  opacity:0.7;

  /* Option B (ultra subtle, no glow at all) */
  /* box-shadow:none;
     opacity:0.6; */
}


/* (Optional) tiny extra emphasis on the title when locked */
.sect[data-locked="true"] .section-title{
  text-shadow:0 0 6px rgba(0,0,0,0.7);
}

.sect h3{ margin:0 0 .1rem; font-weight:600; color:var(--silver); letter-spacing:.02em; }
.sub{ margin:0; color:var(--muted); font-size:.95rem; }
.gold.subtle{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  margin:.9rem 0; opacity:.6;
}
.grid{ display:grid; gap:.65rem .75rem; }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid .wide{ grid-column:1 / -1; }
.label{ display:inline-block; min-width:9rem; color:var(--gold); letter-spacing:.02em; margin-right:.25rem; }
#weapons,#ailments,#tactics,#defense,#defstrat{ font-weight:600; }
.foot{ text-align:center; padding:1.25rem 1rem 3rem; color:var(--muted); }
.hidden{ display:none; }

/* === v0.5: Attribute Balance Visualization === */
#balance-bar {
  height: 20px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  margin: .6rem 0 .25rem;
  box-shadow: 0 0 8px rgba(0,0,0,0.4);
}

.balance-str { background: #b03030; }   /* Strength — red */
.balance-dex { background: #2d7a2d; }   /* Dexterity — green */
.balance-int { background: #2f4f9d; }   /* Intelligence — blue */

#balance-text {
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
  margin-top: .25rem;
}

/* === v0.5 visual fix: ensure panel overlay is visible === */
.panel::after{
  opacity:.55;
  transition: opacity .3s ease;
}

/* === v0.5 visualfix4: dynamic blended Balance bar === */
#balance-bar {
  position: relative;
  height: 20px;
  border-radius: 12px;
  overflow: hidden;
  margin: .6rem 0 .25rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  background: linear-gradient(90deg,
    rgba(122,58,58,0.78) 0%,
    rgba(91,122,74,0.78) 50%,
    rgba(75,95,143,0.78) 100%);
}
#balance-bar::before,
#balance-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16%;
  pointer-events: none;
}
#balance-bar::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.9), transparent);
}
#balance-bar::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.9), transparent);
}

/* === v0.5_visualfix5 layering === */
.panel { position: relative; z-index: 1; }
.panel::after { z-index: 0; }

/* === v0.5_visualfix5: glowing Balance bar === */
#balance-bar {
  position: relative;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  margin: .8rem 0 .25rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.8), 0 0 20px rgba(255,255,255,0.05) inset;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.6) 100%);
}
#balance-bar::before,
#balance-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16%;
  pointer-events: none;
}
#balance-bar::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.9), transparent);
}
#balance-bar::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.9), transparent);
}
#balance-bar.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--balance-gradient);
  filter: blur(8px) brightness(1.3);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* === v0.5_visualfix11 layering and balance === */
.panel { position: relative; z-index: 1; }
.panel::after { position: absolute; inset: 0; z-index: -1; }
.panel > * { position: relative; z-index: 1; }

#balance-bar {
  position: relative;
  height: 10px;
  border-radius: 10px;
  overflow: hidden;
  margin: .8rem 0 .25rem;
  background: var(--balance-gradient);
  box-shadow: 0 0 8px rgba(0,0,0,0.7);
}
#balance-bar.glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--balance-gradient);
  filter: blur(6px) brightness(1.2);
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 0;
  box-shadow:
    0 0 6px rgba(255,215,120,0.3),
    0 0 14px rgba(255,200,80,0.25),
    0 0 22px rgba(255,190,60,0.15);
}
#balance-bar::before,
#balance-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  pointer-events: none;
  z-index: 2;
}
#balance-bar::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.9), transparent);
}
#balance-bar::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0,0,0,0.9), transparent);
}


/* === v0.5.1: Recommended Skills section === */
.skills-grid { margin-top: .25rem; }

.skill-card {
  border-radius: 10px;
  padding: .8rem 1rem;
  background: rgba(20,20,24,0.75);
  border: 1px solid var(--edge);
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transition: box-shadow .2s ease, border-color .2s ease;
}

/* Skill name: slightly more prominent */
.skill-title {
  margin: 0 0 .15rem;
  color: var(--gold);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Subtle "Requires: ..." line under the title */
.skill-subtitle {
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}

.skill-desc {
  margin: 0 0 .35rem;
  font-style: italic;
  color: var(--muted);
}

.skill-tags, .support-tags {
  display:block;
  font-size:.9rem;
  color:var(--muted);
  opacity:.9;
  margin:.2rem 0 .2rem;
}

.skill-divider {
  border: 0;
  border-top: 1px dashed rgba(200,168,107,0.25);
  padding-top: .5rem;
  padding-bottom: .25rem;
  /* 
border-top: 1px dotted var(--gold);
  opacity: 0.45;
  margin: 0.25rem 0 0.45rem;
 */
}

/* Make the skill-style divider inside uniques match the interior width */
.unique-card .skill-divider{
  margin: .45rem 14px .3rem; /* same 14px side inset as .tags-row */
}


.req-line { font-size:.9rem; color:var(--silver); opacity:.85; margin:.1rem 0 .3rem; }
.supports-wrap { margin-top: .5rem; border-top: 1px dashed rgba(200,168,107,0.25); padding-top: .5rem; }
.support-item {
  border-radius: 8px;
  padding: .5rem .6rem;
  margin: .4rem 0;
  border: 1px solid var(--edge);
  background: rgba(14,14,16,0.6);
}
.support-title { margin: 0 0 .15rem; font-weight: 600; color: var(--silver); }
.support-desc { margin: 0; font-size:.9rem; color:var(--muted); }

/* Attribute glows (active skills) */
.skill-card.str { border-color: rgba(176,48,48,0.7); box-shadow: 0 0 8px rgba(176,48,48,0.25); }
.skill-card.dex { border-color: rgba(45,122,45,0.7); box-shadow: 0 0 8px rgba(45,122,45,0.25); }
.skill-card.int { border-color: rgba(47,79,157,0.7); box-shadow: 0 0 8px rgba(47,79,157,0.25); }
.skill-card.hybrid { border: 1px solid transparent; border-image: linear-gradient(90deg,#b03030,#2d7a2d,#2f4f9d) 1; box-shadow: 0 0 10px rgba(255,255,255,0.05), 0 0 12px rgba(200,168,107,0.05) inset; }

/* Dimmer outlines for supports */
.support-item.str { border-color: rgba(176,48,48,0.5); }
.support-item.dex { border-color: rgba(45,122,45,0.5); }
.support-item.int { border-color: rgba(47,79,157,0.5); }
.support-item.hybrid { border:1px solid transparent; border-image: linear-gradient(90deg,#b03030,#2d7a2d,#2f4f9d) 1; }

/* ensure long lists remain tidy */
.supports-wrap { max-height: 280px; overflow: auto; scrollbar-width: thin; }


/* v0.5.3.1: balance bar richer + fade ends */
#balance-bar{
  height:6px;
  border-radius:12px;
  background: var(--balance-gradient);
  position:relative;
  box-shadow: 0 0 6px rgba(255,215,120,0.25), 0 0 14px rgba(200,168,107,0.22);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
#balance-bar::before{
  content:"";
  position:absolute; inset:0;
  background: var(--balance-gradient);
  filter: saturate(1.2) brightness(0.9) contrast(1.1) blur(6px);
  opacity:.85; mix-blend-mode: screen;
  border-radius:12px;
}
.version-label{ text-align:center; font-size:.85rem; opacity:.8; color:#ccc; margin-top:10px; }

/* === v0.5.3.6 Brass Glow Enhancement === */
#balance-bar {
  position: relative;
  height: 6px;
  border-radius: 4px;
  background: var(--balance-gradient);
  box-shadow:
    0 0 12px rgba(212,170,80,0.65),
    0 0 24px rgba(180,130,50,0.45),
    0 0 36px rgba(140,90,20,0.25);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
#balance-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--balance-gradient);
  opacity: 0.8;
  filter: blur(10px);
  pointer-events: none;
}



/* ===== v0.6_init.1: Unified Tag System Enhancement ===== */
.skill-tags, .support-tags, .spirit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.tag-pill {
  display: inline-block;
  background: rgba(212,170,80,0.22);
  border: 1px solid rgba(212,170,80,0.45);
  color: #e5cc99;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  box-shadow: 0 0 3px rgba(212,170,80,0.25);
}


/* ===== v0.6_init.2: Tag Pills Visibility Overrides ===== */
.skill-tags, .support-tags, .spirit-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  color: inherit !important;
  opacity: 1 !important;
}
.tag-pill {
  display: inline-block;
  background: rgba(212,170,80,0.25);
  border: 1px solid rgba(212,170,80,0.55);
  color: #e6d8a5 !important;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.1rem 0.55rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  box-shadow: 0 0 6px rgba(212,170,80,0.4);
  position: relative;
  z-index: 3;
}



/* ===== v0.6_init.3: Tag Visibility Refinement ===== */
.skill-tags, .support-tags, .spirit-tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
  color: inherit !important;
  opacity: 1 !important;
}
.tag-pill {
  display: inline-block;
  background: rgba(212,170,80,0.25);
  border: 1px solid rgba(212,170,80,0.55);
  color: #e6d8a5 !important;
  border-radius: 999px;
  font-size: 0.8rem;
  padding: 0.1rem 0.55rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  box-shadow: 0 0 6px rgba(212,170,80,0.4);
  position: relative;
  z-index: 3;
}


/* ===== v0.6_init.4: Spirit Tag Integration ===== */
.spirit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}



/* ===== v0.6_init.5: Active Gem Tag Integration ===== */
.active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}


/* ===== v0.6_init.10: Granted Skills Display ===== */
.granted-skills {
  margin-top: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid #c8a04e;
  font-size: 0.9em;
  opacity: 0.9;
}
.granted-title {
  font-weight: bold;
  color: #d8b46e;
  margin-bottom: 0.2rem;
}
.granted-skill {
  margin-bottom: 0.2rem;
}
.granted-name {
  font-weight: 600;
  color: #e6d28c;
}
.granted-desc {
  color: #bcb09a;
  margin-left: 0.25rem;
}

/* === v0.6.4: Cohesion Slider + Skill Cards === */
.cohesion-slider{ margin:1.2rem auto; width:min(720px,90%); text-align:center; color:var(--gold); }
.cohesion-slider input[type=range]{ width:100%; appearance:none; height:6px; border-radius:6px; background:linear-gradient(90deg, rgba(212,170,80,0.4), rgba(212,170,80,0.9)); outline:none; cursor:pointer; box-shadow:0 0 6px rgba(212,170,80,0.3); }
.cohesion-slider .mode-labels{ display:flex; justify-content:space-between; font-size:.85rem; opacity:.8; margin-top:.2rem; color:var(--muted); }
.cohesion-status{ min-height:1.2rem; margin-top:.35rem; font-size:.9rem; color:#f3d27a; text-shadow:0 0 4px rgba(0,0,0,0.6); }
.cohesion-status[data-status="ok"]{ color:var(--muted); opacity:.75; }
.cohesion-bar-wrapper[data-cohesion-constrained="true"] input[type=range]::-webkit-slider-thumb{ box-shadow:0 0 0 2px rgba(255,204,0,0.7), 0 0 12px rgba(255,204,0,0.55); }
.cohesion-bar-wrapper[data-cohesion-constrained="true"] input[type=range]::-moz-range-thumb{ box-shadow:0 0 0 2px rgba(255,204,0,0.7), 0 0 12px rgba(255,204,0,0.55); }

.skill-tags, .support-tags { display:flex; flex-wrap:wrap; gap:.3rem; }
.tag-pill{ display:inline-block; background: rgba(212,170,80,0.22); border:1px solid rgba(212,170,80,0.45); color:#e5cc99; border-radius:999px; font-size:.8rem; padding:.1rem .5rem; letter-spacing:.02em; text-transform:lowercase; box-shadow:0 0 3px rgba(212,170,80,0.25); }

.supports-wrap { margin-top:.5rem; border-top:1px dashed rgba(200,168,107,0.25); padding-top:.5rem; }
.support-item { border-radius:8px; padding:.5rem .6rem; margin:.35rem 0; border:1px solid var(--edge); background:rgba(14,14,16,0.6); }
.support-title { margin:0 0 .15rem; font-weight:600; color:var(--silver); }
.support-desc { margin:0; font-size:.9rem; color:var(--muted); }
.req-line { font-size:.9rem; color:var(--silver); opacity:.85; margin:.1rem 0 .3rem; }

/* v0.6.7 overlay beneath content via pseudo-element */
.panel{ position:relative; z-index:1; }
.panel::before{
  content:'';
  position:absolute;
  inset:0;
  background: var(--overlay-gradient, linear-gradient(225deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%));
  z-index:0;
  pointer-events:none;
}
.panel > *{ position:relative; z-index:1; }

/* panel overlay kept: use --overlay-gradient set by JS */
.panel::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--overlay-gradient,linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%));
  z-index:0;
  pointer-events:none;
}
.panel > * { position: relative; z-index: 1; }

/* build name + subtext (restored) */
#build-name{
  font-family:"Cinzel Decorative",serif;
  color:#d5b66a;
  font-size:1.6rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin:.6rem 0 .15rem;
}
#build-subtext{
  font-style:italic;
  color:rgba(235,235,235,.85);
  margin:0 0 1rem;
}

/* “Grants” callout (baseline look) */
.grants-callout{
  border-left:3px solid rgba(213,182,106,.65);
  padding:.5rem .75rem;
  background:rgba(0,0,0,.18);
  margin:.25rem 0 .6rem;
}
.grants-title{
  color:#d5b66a;
  font-weight:700;
  margin-bottom:.25rem;
  letter-spacing:.02em;
}
.grants-body .granted-name{
  font-weight:700;
  color:#e9d8a6;
}

/* tag pill fallback */
.tag-pill{
  display:inline-block; padding:.2rem .6rem; border-radius:999px;
  border:1px solid rgba(213,182,106,.35);
  color:rgba(235,235,235,.92);
  margin:.15rem .25rem .15rem 0;
  font-size:.85rem; white-space:nowrap;
}

/* Keep tags above supports reliably */
.skill-tags { display:block; clear: both; margin-bottom: .35rem; }
.supports { display:block; clear: both; }
/* Scroll panel for supports to limit card height */
.supports {
  max-height: 220px;
  overflow: auto;
  padding-right: .25rem; /* avoid scrollbar overlap */
  border-top: 1px dashed var(--edge);
  margin-top: .35rem;
}
.support-item { margin:.35rem 0; }


/* --- Multi-grant display (restored) --- */
.grants { margin:.4rem 0; }
.grants .label { font-size:.9rem; color: var(--silver); opacity:.85; display:block; margin-bottom:.25rem; }
.grant-list { display:block; }
.grant-item { border-left: 2px solid var(--edge); padding:.3rem .6rem; margin:.3rem 0; background: rgba(12,12,14,0.35); }
.grant-title { font-weight:600; color:var(--silver); margin:0 0 .1rem; }
.grant-desc { font-size:.9rem; color: var(--muted); margin:0; }


/* --- Active skill card flex + supports fill --- */
.skill-card.active { display:flex; flex-direction:column; max-height: 720px; }
.skill-card .skill-title,
.skill-card .req-block,
.skill-card .grants,
.skill-card .skill-desc,
.skill-card .skill-tags { flex: 0 0 auto; width:100%; }
.supports { flex: 1 1 auto; min-height: 0; overflow:auto; width:100%; }
/* Keep tags above supports reliably */
.skill-tags { display:block; clear: both; margin-bottom:.35rem; }
.supports { display:block; clear: both; }

/* override: let flex-fill manage height */
.supports { max-height: none; }

/* Label above supports */
/* supports label matches required weapon label */
.supports-label{ color:#d5b66a; font-style:italic; }


/* v0.7 additions */
.tag-pill.matched {
  border-color: rgba(126, 217, 87, 0.7);
  background: rgba(126, 217, 87, 0.12);
  box-shadow: 0 0 8px rgba(126, 217, 87, 0.25) inset;
  font-weight: 600;
}

/* v0.7 grant wrap */
.grant-wrap{
  margin:.35rem 0 .5rem;
  padding:.35rem .5rem;
  background: rgba(12,12,14,0.35);
  border-left:2px solid var(--edge);
}

/* --- v0.7: Recommended Supports scroll panel --- */
.supports{
  --panel-height: 240px;
  max-height: var(--panel-height);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
  margin-top: 6px;
  border: 1px solid rgba(140,120,90,0.35);
  border-radius: 10px;
  background: rgba(18,18,20,0.55);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
  scrollbar-gutter: stable;
}

.supports::-webkit-scrollbar { width: 10px; }
.supports::-webkit-scrollbar-thumb {
  background: rgba(120,110,90,0.55);
  border-radius: 8px;
  border: 2px solid rgba(18,18,20,0.7);
}
.supports::-webkit-scrollbar-track { background: rgba(18,18,20,0.35); }

/* Ensure cards stack cleanly inside the panel */
.supports .support-item{
  display: block;
  max-width: unset;
  margin: 0;
}

/* === v0.7 restore 0.6_release support pane behavior === */
.skill-card{
  display: flex;
  flex-direction: column;
  /* allow inner scroller to size correctly */
  min-height: 0;
}
.skill-card .supports-label{
  margin-top: .5rem;
}
.skill-card .supports{
  /* fill remaining space within card and scroll */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  /* revert to 0.6_release look (no panel border/background) */
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;

  /* 0.6 style: dashed divider and top padding */
  border-top: 1px dashed rgba(200,168,107,0.25);
  padding-top: .5rem;
  padding-bottom: .25rem;
}

/* support cards spacing, consistent with 0.6 */
.supports .support-item{
  display: block;
  max-width: unset;
  margin: .4rem 0;
}

/* remove prior custom scrollbar visuals for parity with 0.6 */
.supports::-webkit-scrollbar,
.supports::-webkit-scrollbar-thumb,
.supports::-webkit-scrollbar-track{ background: transparent; border: 0; }

/* === v0.7 supports pane: fill remaining space reliably === */
.skills-grid{
  align-items: stretch;     /* ensure grid items fill the row height */
}
.skill-card{
  height: 100%;             /* allow inner flex to consume row height */
}

/* === v0.7: active gem cards fixed max-height + flex scroller === */
:root{
  --skill-card-max: 560px;
}

.skills-grid{ align-items: stretch; }

.skill-card{
  /* allow the supports area to calculate remaining space */
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* key: keep cards neat and let supports scroll within */
  height: auto !important;
  max-height: var(--skill-card-max);
}

.skill-card .supports-label{ margin-top: .5rem; }

.skill-card .supports{
  flex: 1 1 auto;   /* fills remaining vertical space */
  min-height: 0;    /* critical for nested flex scrolling */
  overflow-y: auto; /* create an internal scroller */
}


/* ===== v0.7.6: Uniques bronze cards ===== */
:root{
  --unique-bronze: #c58a46;
  --unique-bronze-edge: rgba(197,138,70,0.35);
  --unique-bronze-soft: rgba(197,138,70,0.12);
}
.uniques-grid{ margin-top:.35rem; }

/* Unique card frame */
.unique-card {
  background: #12100c;
  border: 1px solid rgba(255, 200, 120, 0.45);
  border-radius: 14px;
  box-shadow:
    0 0 18px rgba(255, 180, 80, 0.18),
    inset 0 0 0 1px rgba(255, 200, 140, 0.05);
  overflow: hidden;
}

/* Header: align with skill card title + subtitle stack */
.unique-header{
  background:none;
  border-bottom:none;            /* we’ll use the dashed divider instead */
  padding: .75rem 1rem .25rem;   /* roughly matches skill-card padding */
}

.unique-name{
  margin:0 0 .15rem;
  color:var(--gold);             /* same as .skill-title */
  font-weight:600;               /* slightly softer than 700 */
  font-size:1.05rem;             /* matches .skill-title */
  line-height:1.15;
}

.unique-base{
  margin:0;
  color:var(--muted);            /* same palette as .skill-subtitle */
  font-size:.9rem;
  font-style:italic;             /* mirrors the “Requires:” line feel */
  opacity:0.9;
}


/* Tag pills row */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 14px 2px;
}

/* Let uniques reuse the gem-pill look but with bronze tint */
.unique-card .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 140, 0.35);
  background: radial-gradient(
    160% at 10% 30%,
    rgba(140, 90, 35, 0.30) 0%,
    rgba(35, 26, 16, 0.45) 60%,
    rgba(8, 5, 2, 0.9) 100%
  );
  font-size: 0.78rem;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #f5e3cf;
}

.unique-card .pill.match {
  box-shadow:
    0 0 0 1px rgba(255, 210, 140, 0.45),
    0 0 12px rgba(255, 180, 90, 0.25);
  color: #fff2df;
}

/* Lines */
.unique-lines {
  padding: 10px 14px 12px;
  color: #e4d9c9;
  font-size: 0.95rem;
}

.unique-line {
  margin: 2px 0;
  opacity: 0.95;
}

/* Highlighted terms inside lines (from highlight()) */
.unique-lines .hit {
  color: var(--unique-bronze, #ffcf7a);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(197, 138, 70, 0.35);
}

.unique-highlights {
  font-size: 0.85rem;
  color: rgba(255, 235, 210, 0.95);
  margin-bottom: 0.35rem;
  font-style: italic;
  opacity: 0.95;
}



/* ===== Recommended Passives ===== */
.panel--passives {
  margin-top: 1.5rem;
}

.panel--passives .panel-header {
  margin-bottom: 0.75rem;
}

.panel--passives .panel-title {
  margin: 0;
}

.panel--passives .panel-subtitle {
  margin: 0.2rem 0 0;
  color: var(--muted);
}

.passives-groups {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.passives-group {
  padding: 0.75rem 0.35rem 0.35rem;
  border-radius: 10px;
  background: rgba(10, 8, 6, 0.45);
  border: 1px solid rgba(200, 168, 107, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.passives-group.hidden {
  display: none;
}

.passives-group-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.2px;
  color: #e5cf9f;
}

.passives-row {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.3rem 0.35rem 0.55rem;
  align-items: center;
}

.passives-row-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: nowrap;
}

/* v0.8.2_cleanup: temporarily disable Keystone recommendations */
.passives-group[data-passive-group="keystones"] {
  display: none;
}


.passive-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  max-width: 210px;
}

.passive-node__orb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  padding: 2px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 230, 180, 0.12), rgba(15, 12, 10, 0.9));
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 0 8px rgba(0, 0, 0, 0.5),
    inset 0 0 8px rgba(0, 0, 0, 0.55),
    0 0 12px rgba(255, 220, 140, 0.35);
}

.passive-node__orb-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.75));
}

.passive-node__icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.passive-node__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.passive-node__name {
  font-weight: 600;
  color: #f4e7d2;
  letter-spacing: 0.2px;
}

.passive-node__lines {
  font-size: 0.9rem;
  color: rgba(229, 207, 159, 0.9);
  line-height: 1.3;
}

.passive-node__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
}

.passive-tag {
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(120, 110, 90, 0.28);
  color: rgba(235, 225, 205, 0.9);
  font-size: 0.8rem;
  border: 1px solid rgba(200, 180, 120, 0.25);
}

.passive-tag.is-match {
  background: rgba(210, 170, 90, 0.35);
  border-color: rgba(255, 210, 120, 0.65);
  box-shadow: 0 0 8px rgba(255, 210, 120, 0.28);
}

.passive-link {
  flex: 0 0 48px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
  opacity: 0.9;
}

.passive-node--ascendancy .passive-node__orb {
  border-color: rgba(255, 210, 120, 0.7);
  box-shadow:
    0 0 12px rgba(255, 210, 120, 0.25),
    inset 0 0 8px rgba(255, 210, 120, 0.35);
}

.passive-node--keystone .passive-node__orb {
  border-color: rgba(165, 220, 255, 0.55);
  box-shadow:
    0 0 10px rgba(165, 220, 255, 0.25),
    inset 0 0 8px rgba(165, 220, 255, 0.35);
}

.passive-node--notable .passive-node__orb {
  border-color: rgba(200, 200, 200, 0.35);
}

@media (max-width: 720px) {
  .passives-row {
    gap: 1rem;
  }

  .passive-link {
    flex-basis: 32px;
  }
}


/* --- Mobile polish pack (v0.7.9_beta2m) --- */
html { font-size: clamp(14px, 1.8vw, 16px); }
h1 { font-size: clamp(24px, 5.5vw, 40px); }
h2 { font-size: clamp(18px, 3.5vw, 28px); }

.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 960px) {
  .grid.two { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 960px) {
  .skill-card, .unique-card { padding: 12px; }
  .unique-lines div, .skill-lines div { line-height: 1.3; }
}

.skill-tags, .unique-tags { display:flex; flex-wrap:wrap; gap: 6px; }
.tag-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
@media (max-width: 480px) {
  .tag-pill { font-size: 11px; padding: 2px 6px; }
}

@media (max-width: 960px) {
  .sect { margin: 16px 0; }
  .sect .sect-head .underline { margin-top: 6px; }
}

.roll-btn { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; }
.roll-btn .btn-ico{ width:18px; height:18px; display:inline-block; object-fit:contain; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.roll-sticky { position: sticky; bottom: 16px; z-index: 50; display:flex; justify-content:center; pointer-events:none; }
.roll-sticky .roll-btn { pointer-events:auto; border-radius: 999px; padding: 10px 16px; }
@supports (padding: max(0px)) {
  .roll-sticky { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

img, video { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .background-vignette { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.container { width: min(100%, 1100px); margin: 0 auto; padding: 0 16px; }

/* --- Mobile background / blur stability fixes --- */
@media (max-width: 960px) {
  /* 1) Avoid background-attachment: fixed quirks on mobile */
  html,
  body {
    background-attachment: scroll;
    background-position: center top;
  }

  /* 2) Let the ascendancy art track the document instead of the viewport */
  body {
    position: relative;
  }

  .asc-art {
    position: absolute;   /* instead of fixed on mobile */
    inset: 0;
    /* keep layering and image behavior the same */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    /* 3) Apply the blur directly to the art so it doesn't flicker */
    filter: blur(3px) saturate(.9) brightness(1.05);
    opacity: 0;           /* keep the fade-in behavior */
    pointer-events: none;
    transition: opacity .5s ease;
  }

  .asc-art.show {
    opacity: .92;
  }

  /* 4) Since we're blurring the art itself on mobile, 
        we can drop the backdrop blur (which is flaky on iOS)
        and just use a slightly stronger dark overlay. */
  #app {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.55);
  }
}


/* Divider styling + spacing */
:root { --section-gap: 24px; }
.ornate-divider.gold.unique-divider{
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(202,164,95,.38), rgba(0,0,0,0));
  opacity: .9;
  margin: var(--section-gap) 0;
}
#uniques-section.sect { margin-top: 0; }

/* Info Lightbox */

.rm-info-fab{
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 120;
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(202,164,95,.4);
  background: radial-gradient(circle at 30% 30%, rgba(202,164,95,.12), rgba(0,0,0,.65));
  color: rgba(255, 230, 180, .78);
  font-weight: 600;
  font-size: 14px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,.35);
  opacity: 0.8;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}
.saved-fab{ right: calc(max(16px, env(safe-area-inset-right)) + 40px); }
.rm-info-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  opacity: 1;
}

.rm-info-fab:hover{ transform: translateY(-1px); box-shadow: 0 2px 12px rgba(0,0,0,.55); }
.rm-info-fab:focus{ outline: none; box-shadow: 0 0 0 2px rgba(202,164,95,.45); }

.rm-info-overlay[hidden]{ display:none; }
.rm-info-overlay{
  position: fixed; inset:0; z-index: 110;
}
.rm-info-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
}
.rm-info-dialog{
  position:absolute; inset: 10% 50% auto 50%;
  transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  background: rgba(20,18,15,.96);
  border: 1px solid rgba(202,164,95,.4);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4);
  border-radius: 14px;
  color: #f3e8d0;
  max-height: 78vh;
  overflow: hidden;
}
.saved-overlay .rm-info-dialog{ width: min(560px, calc(100% - 32px)); }
@media (max-width: 640px){
  .rm-info-dialog{ inset: 8% 50% auto 50%; width: calc(100% - 24px); }
}
.rm-info-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px; border-bottom: 1px solid rgba(202,164,95,.25);
  background: linear-gradient(180deg, rgba(202,164,95,.08), rgba(0,0,0,0));
}
.rm-info-head h3{ margin:0; font-size: 18px; letter-spacing:.3px; }
.rm-info-close{
  appearance:none; background:transparent; border:none; color:#f3e8d0; font-size:18px;
  width:28px; height:28px; border-radius:8px; cursor:pointer;
}
.rm-info-close:hover{ background: rgba(255,255,255,.06); }
.rm-info-content{
  padding: 14px;
  overflow:auto;
  max-height: calc(78vh - 52px);
}
.rm-info-content h4{ margin: 12px 0 6px; font-size: 16px; color: #f7e7c3; letter-spacing:.2px; }
.rm-info-content p{ margin: 8px 0; }
.rm-info-content a{ color: #ffd58f; text-decoration: underline; text-decoration-color: rgba(255,213,143,.45); }
.rm-disclaimer small{ font-size: 12px; opacity: .85; line-height: 1.35; display:block; }

.panel-actions{
  position:absolute;
  top:10px;
  right:12px;
  display:flex;
  gap:8px;
  z-index:5;
}
.icon-btn{
  appearance:none;
  width:36px;
  height:36px;
  border-radius:10px;
  border:none;
  background: transparent;
  color: var(--gold);
  font-size: 16px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: transform .12s ease, box-shadow .12s ease, color .2s ease, background .2s ease;
}
.icon-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.35); background: rgba(255,255,255,0.04); }
.icon-btn:active{ transform: translateY(0); background: rgba(255,255,255,0.08); }
.icon-btn:focus{ outline:none; box-shadow: 0 0 0 2px rgba(202,164,95,0.45); }
.icon-btn[data-saved="1"]{ color: #ffd58f; text-shadow: 0 0 8px rgba(255,213,143,0.35); }

/* ===== Saved builds / favorites list ===== */

.saved-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 10px 12px;
}

/* Subtitle under "Saved Builds" label */
.saved-subtitle{
  margin: 4px 14px 4px;
  color: var(--muted);
  font-size: 0.95rem;
  font-style:italic;
}

/* Each saved build row */
.saved-item{
  position:relative;
  display:block;
  width:100%;
  background: radial-gradient(circle at top left, rgba(0,0,0,0.8), rgba(0,0,0,0.3));
  border: 1px solid rgba(202,164,95,0.32);
  padding: 7px 11px 6px;
  border-radius: 9px;
  cursor:pointer;
  text-align:left;
  overflow:hidden;
  transition:
    background .14s ease,
    border-color .14s ease,
    box-shadow .14s ease;
}

/* subtle gold wash on the left edge */
.saved-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(202,164,95,0.18),
      rgba(202,164,95,0.02)
    );
  opacity:0.7;
  pointer-events:none;
  mix-blend-mode:screen;
}

/* content sits above the wash */
.saved-item > .name,
.saved-item > .meta{
  position:relative;
  z-index:1;
}

/* Hover: gentle, not "card jumps at you" */
.saved-item:hover{
  background: radial-gradient(circle at top left, rgba(202,164,95,0.16), rgba(0,0,0,0.45));
  border-color: rgba(202,164,95,0.6);
  box-shadow: 0 6px 16px rgba(0,0,0,0.45);
}

/* Title line – modeled after .flavor */
.saved-item .name{
  display:block;
  font-family:'Cormorant Infant',serif; /* same family as .flavor */
  font-style:italic;
  font-weight:500;
  letter-spacing:.04em;
  font-size:1.1rem;
  color:var(--gold);
  margin-bottom:1px;
}

/* Secondary line – class, weapon, etc. */
.saved-item .meta{
  display:block;
  color:var(--muted);
  font-size:0.9rem;
  opacity:0.95;
}

/* Empty state text */
.saved-empty{
  margin: 8px 14px 12px;
  color: var(--muted);
  font-size: 0.95rem;
  font-style:italic;
}



/* === Info Lightbox extra polish (v0.7.9_beta2n) === */
.rm-info-content .rm-info-hr{
  height:1px; border:0; margin: 12px 0 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(202,164,95,.35), rgba(0,0,0,0));
  opacity: .9;
}


/* Persistent Buff section layout tweaks */
#persistent-buff-section{
  margin-top: 8px;
  margin-bottom: 8px;
}
.persistent-buff-grid{
  grid-template-columns: minmax(0, 1fr);
}
.persistent-buff-card{
  max-width: 780px;
  margin: 0 auto 0.5rem;
}