:root{
    --void:#050508;
    --panel:#0d1019;
    --panel-2:#131728;
    --line:#262c42;
    --line-soft:#1a1e30;
    --violet:#9c80fb;
    --violet-glow:#7c5cff;
    --violet-dim:#4c3f80;
    --ember:#ff8c42;
    --storm:#6fd6ff;
    --acid:#8ec99a;
    --ink:#e9e4da;
    --ink-dim:#9098ae;
    --ink-faint:#565d78;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--void);
    color:var(--ink);
    font-family:'Spectral',serif;
    -webkit-font-smoothing:antialiased;
  }

  ::selection{background:var(--violet-dim);color:var(--ink);}

  a{color:var(--violet);}

  /* ambient void texture */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      radial-gradient(1px 1px at 10% 20%, rgba(156,128,251,0.35), transparent),
      radial-gradient(1px 1px at 80% 15%, rgba(111,214,255,0.25), transparent),
      radial-gradient(1px 1px at 60% 70%, rgba(156,128,251,0.3), transparent),
      radial-gradient(1px 1px at 30% 85%, rgba(111,214,255,0.2), transparent),
      radial-gradient(1px 1px at 90% 60%, rgba(156,128,251,0.25), transparent),
      radial-gradient(1px 1px at 45% 40%, rgba(255,255,255,0.15), transparent);
    background-size: 100% 100%;
    opacity:0.6;
  }

  .wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;}

  /* ---------- BACK LINK ---------- */
  .back-link{
    position:fixed;
    top:1.4rem;
    left:1.4rem;
    z-index:10;
  }
  .back-link a{
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    padding:0.55em 1.1em;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-dim);
    background:rgba(13,16,25,0.6);
    border:1px solid var(--line);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    text-decoration:none;
    transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .back-link a:hover{
    color:var(--violet);
    border-color:var(--violet-dim);
    background:rgba(19,23,40,0.85);
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    width:100%;
    height:min(92vh, 900px);
    overflow:hidden;
    background:#000;
  }
  .hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 58%;
    display:block;
    filter:saturate(1.05) contrast(1.03);
  }
  .hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(5,5,8,0.15) 0%, rgba(5,5,8,0.02) 30%, rgba(5,5,8,0.1) 60%, rgba(5,5,8,0.55) 85%, rgba(5,5,8,0.95) 100%),
      linear-gradient(90deg, rgba(5,5,8,0.55) 0%, transparent 18%, transparent 82%, rgba(5,5,8,0.55) 100%);
  }
  .hero-content{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:4rem 5vw 3.2rem;
    text-align:center;
    background:linear-gradient(180deg, transparent 0%, rgba(5,5,8,0.75) 55%, rgba(5,5,8,0.97) 100%);
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--violet);
    margin:0 0 0.9rem;
    opacity:0.9;
  }
  .eyebrow::before, .eyebrow::after{
    content:"◆";
    font-size:0.55rem;
    margin:0 0.6em;
    color:var(--violet-dim);
    vertical-align:middle;
  }
  h1.name{
    font-family:'Cinzel',serif;
    font-weight:800;
    font-size:clamp(2.8rem, 8vw, 5.4rem);
    letter-spacing:0.02em;
    margin:0;
    line-height:1;
    background:linear-gradient(180deg, #f4f1ff 0%, #cdbfff 55%, #9c80fb 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 60px rgba(124,92,255,0.35);
  }
  .pronunciation{
    font-family:'JetBrains Mono', monospace;
    font-size:0.95rem;
    color:var(--storm);
    margin:0.9rem 0 0;
    letter-spacing:0.02em;
  }
  .pronunciation .ipa{color:var(--storm);}

  /* ---------- LORE ---------- */
  .lore-section{
    padding:4.5rem 6vw 2rem;
  }
  .lore-quote{
    position:relative;
    margin:0 auto;
    max-width:680px;
    padding:2.4rem 2.6rem;
    border:1px solid var(--line);
    border-left:2px solid var(--violet-glow);
    background:linear-gradient(180deg, rgba(19,23,40,0.5), rgba(13,16,25,0.3));
    font-style:italic;
    font-size:1.08rem;
    line-height:1.75;
    color:#cfc9e0;
  }
  .lore-quote::before{
    content:"";
    position:absolute;
    top:-1px; left:-2px;
    width:14px; height:14px;
    border-top:2px solid var(--violet-glow);
    border-left:2px solid var(--violet-glow);
    opacity:0.8;
  }
  .lore-attribution{
    text-align:center;
    margin-top:1.1rem;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }

  /* ---------- SECTION HEADERS ---------- */
  .section{padding:2.2rem 6vw;}
  .section-head{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.6rem;
  }
  .section-head h2{
    font-family:'Cinzel',serif;
    font-weight:600;
    font-size:1.05rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink);
    margin:0;
    white-space:nowrap;
  }
  .section-head .rule{
    flex:1;
    height:1px;
    background:linear-gradient(90deg, var(--line) 0%, transparent 100%);
  }

  /* ---------- SHIELD TRACKER (signature element) ---------- */
  .tracker-panel{
    border:1px solid var(--line);
    background:var(--panel);
    padding:2rem 2rem 1.8rem;
  }
  .tracker-label-row{
    display:flex;
    justify-content:space-between;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    color:var(--ink-faint);
    letter-spacing:0.05em;
    margin-bottom:0.6rem;
  }
  .tracker-bar{
    position:relative;
    height:34px;
    background:var(--void);
    border:1px solid var(--line-soft);
  }
  .tracker-fill{
    position:absolute; inset:0;
    background:linear-gradient(90deg, #2c2440 0%, var(--violet-dim) 100%);
    width:100%;
  }
  .tracker-marker{
    position:absolute;
    top:-6px; bottom:-6px;
    width:2px;
  }
  .tracker-marker.fire{left:calc(100% - (140/210*100%)); background:var(--ember); box-shadow:0 0 12px var(--ember);}
  .tracker-marker.lightning{left:calc(100% - (70/210*100%)); background:var(--storm); box-shadow:0 0 12px var(--storm);}
  .tracker-tag{
    position:absolute;
    top:-38px;
    transform:translateX(-50%);
    font-family:'JetBrains Mono', monospace;
    font-size:0.65rem;
    letter-spacing:0.06em;
    white-space:nowrap;
    padding:2px 7px;
    border:1px solid currentColor;
  }
  .tracker-tag.fire{left:calc(100% - (140/210*100%)); color:var(--ember);}
  .tracker-tag.lightning{left:calc(100% - (70/210*100%)); color:var(--storm);}
  .tracker-scale{
    display:flex;
    justify-content:space-between;
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    color:var(--ink-faint);
    margin-top:0.5rem;
  }
  .tracker-note{
    margin-top:1.6rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line-soft);
    font-size:0.92rem;
    color:var(--ink-dim);
    line-height:1.65;
  }
  .tracker-note b{color:var(--ink);font-weight:600;}
  .tracker-note .fire-txt{color:var(--ember);}
  .tracker-note .storm-txt{color:var(--storm);}

  /* ---------- STAT BLOCK ---------- */
  .statblock{
    border:1px solid var(--line);
    background:var(--panel);
  }
  .stat-topline{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-bottom:1px solid var(--line);
  }
  .stat-topline div{
    padding:1.1rem 1.4rem;
    border-right:1px solid var(--line-soft);
  }
  .stat-topline div:last-child{border-right:none;}
  .stat-topline .k{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.62rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:0.3rem;
  }
  .stat-topline .v{
    font-family:'JetBrains Mono', monospace;
    font-size:1.05rem;
    color:var(--ink);
  }

  .ability-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border-bottom:1px solid var(--line);
  }
  .ability-grid div{
    text-align:center;
    padding:1rem 0.4rem;
    border-right:1px solid var(--line-soft);
  }
  .ability-grid div:last-child{border-right:none;}
  .ability-grid .k{
    display:block;
    font-family:'Cinzel',serif;
    font-size:0.72rem;
    letter-spacing:0.1em;
    color:var(--violet);
    margin-bottom:0.4rem;
  }
  .ability-grid .v{
    font-family:'JetBrains Mono', monospace;
    font-size:0.98rem;
    color:var(--ink);
  }
  .ability-grid .mod{color:var(--ink-dim);font-size:0.82rem;}

  .stat-list{padding:1.3rem 1.4rem;}
  .stat-list p{
    margin:0.55rem 0;
    font-size:0.92rem;
    line-height:1.6;
    color:var(--ink-dim);
  }
  .stat-list p b{
    font-family:'JetBrains Mono', monospace;
    font-weight:600;
    letter-spacing:0.03em;
    text-transform:uppercase;
    font-size:0.72rem;
    color:var(--ink);
    margin-right:0.6em;
  }
  .cr-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1rem 1.4rem;
    border-top:1px solid var(--line);
    background:var(--panel-2);
  }
  .cr-line .cr-badge{
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:1rem;
    color:var(--violet);
    letter-spacing:0.04em;
  }
  .cr-line .xp{
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    color:var(--ink-faint);
  }

  /* ---------- ENTRIES (traits / actions / legendary) ---------- */
  .entry{
    padding:1.5rem 0;
    border-bottom:1px solid var(--line-soft);
  }
  .entry:last-child{border-bottom:none;}
  .entry-name{
    font-family:'Cinzel',serif;
    font-weight:600;
    font-size:1rem;
    color:var(--ink);
    margin:0 0 0.15rem;
    letter-spacing:0.01em;
  }
  .entry-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:0.68rem;
    color:var(--violet);
    font-weight:400;
    letter-spacing:0.04em;
  }
  .entry-flavor{
    font-style:italic;
    color:#a49bc4;
    font-size:0.94rem;
    margin:0.5rem 0 0.6rem;
    line-height:1.65;
    border-left:2px solid var(--violet-dim);
    padding-left:0.9rem;
  }
  .entry-body{
    font-size:0.95rem;
    line-height:1.7;
    color:var(--ink-dim);
    margin:0;
  }
  .entry-body .dmg{
    font-family:'JetBrains Mono', monospace;
    color:var(--ink);
  }

  /* ---------- ART CREDIT / FOOTER ---------- */
  footer{
    padding:3rem 6vw 4.5rem;
    text-align:center;
  }
  footer .rule-full{
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line), transparent);
    margin-bottom:2rem;
  }
  footer p{
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:0.1em;
    color:var(--ink-faint);
    text-transform:uppercase;
    margin:0.3rem 0;
  }
  footer p.big{
    font-family:'Cinzel',serif;
    text-transform:none;
    letter-spacing:0.03em;
    font-size:0.95rem;
    color:var(--ink-dim);
    margin-bottom:0.6rem;
  }

  @media (max-width:640px){
    .stat-topline{grid-template-columns:1fr;}
    .stat-topline div{border-right:none;border-bottom:1px solid var(--line-soft);}
    .ability-grid{grid-template-columns:repeat(3,1fr);}
    .ability-grid div:nth-child(3){border-right:none;}
    .ability-grid div:nth-child(n+4){border-top:1px solid var(--line-soft);}
    .section{padding:2rem 5vw;}
    .lore-section{padding:3rem 5vw 1rem;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
  }