:root{
    --bg: #0B0A08;
    --bg-panel: #14110C;
    --bg-panel-2: #1B160E;
    --border: #4A3D22;
    --border-bright: #8A6B23;
    --gold: #D4AF37;
    --teal: #3FA9C9;
    --text: #EFE7D6;
    --text-dim: #A79C86;
    --radius: 4px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(ellipse at top, #1A140A 0%, var(--bg) 55%),
      var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.6;
  }
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .font-display{font-family:'Cinzel', serif;}
  .font-mono{font-family:'JetBrains Mono', monospace;}
  ::selection{background:var(--gold); color:#0B0A08;}

  .wrap{max-width:1080px; margin:0 auto; padding:0 22px;}
  @media (min-width:768px){ .wrap{padding:0 40px;} }

  .tag{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.03em;
    color:var(--text-dim);
  }
  .gold{color:var(--gold);}
  .teal{color:var(--teal);}

  /* panel with corner brackets */
  .panel{
    position:relative;
    background:var(--bg-panel);
    border:1px solid var(--border);
    padding:26px;
  }
  .corner{position:absolute; width:11px; height:11px; pointer-events:none;}
  .corner.tl{top:-1px; left:-1px; border-top:2px solid var(--border-bright); border-left:2px solid var(--border-bright);}
  .corner.tr{top:-1px; right:-1px; border-top:2px solid var(--border-bright); border-right:2px solid var(--border-bright);}
  .corner.bl{bottom:-1px; left:-1px; border-bottom:2px solid var(--border-bright); border-left:2px solid var(--border-bright);}
  .corner.br{bottom:-1px; right:-1px; border-bottom:2px solid var(--border-bright); border-right:2px solid var(--border-bright);}
  .panel-hover{transition: border-color .2s ease, transform .2s ease;}
  .panel-hover:hover{border-color:var(--border-bright); transform:translateY(-3px);}

  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.02em;
    padding:13px 26px;
    border-radius:2px;
    transition: filter .2s ease, transform .2s ease, background .2s ease, box-shadow .25s ease;
    cursor:pointer;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-primary{ background:var(--gold); color:#1A1305; border:1px solid var(--gold); }
  .btn-primary:hover{ filter:brightness(1.1); box-shadow:0 6px 24px rgba(212,175,55,0.35); }
  .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border-bright); }
  .btn-ghost:hover{ border-color:var(--teal); color:var(--teal); box-shadow:0 6px 24px rgba(63,169,201,0.2); }
  a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

  /* scroll progress bar */
  .progress-bar{
    position:fixed; top:0; left:0; height:2px;
    background:linear-gradient(90deg, var(--gold), var(--teal));
    width:0%; z-index:80;
    transition:width .1s linear;
  }

  /* ambient embers */
  .embers{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
  .ember{
    position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
    background:var(--gold); opacity:0; box-shadow:0 0 6px var(--gold);
    animation: rise 9s linear infinite;
  }
  @keyframes rise{
    0%{ transform:translateY(0) translateX(0); opacity:0; }
    10%{ opacity:0.7; }
    90%{ opacity:0.35; }
    100%{ transform:translateY(-100vh) translateX(20px); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .ember{animation:none; display:none;}
    .progress-bar{display:none;}
  }

  /* mobile menu */
  .menu-btn{
    display:flex; flex-direction:column; gap:4px; background:none; border:none;
    padding:6px; cursor:pointer;
  }
  .menu-btn span{width:20px; height:2px; background:var(--text);}
  @media (min-width:860px){ .menu-btn{display:none;} }
  .mobile-nav{
    display:none; flex-direction:column; gap:2px;
    border-top:1px solid var(--border);
    background:var(--bg-panel);
  }
  .mobile-nav.open{display:flex;}
  .mobile-nav a{padding:14px 22px; border-bottom:1px solid var(--border); font-family:'JetBrains Mono', monospace; font-size:0.82rem; color:var(--text-dim);}
  .mobile-nav a:active{color:var(--gold);}
  @media (min-width:860px){ .mobile-nav{display:none !important;} }

  /* NAV */
  header{position:sticky; top:0; z-index:50; background:rgba(11,10,8,0.92); border-bottom:1px solid var(--border); backdrop-filter:blur(6px);}
  .navbar{height:60px; display:flex; align-items:center; justify-content:space-between;}
  .logo{font-family:'Cinzel', serif; font-weight:600; font-size:1.05rem; letter-spacing:0.03em;}
  .navlinks{display:none; align-items:center; gap:26px;}
  .navlinks a{position:relative; transition:color .2s ease; padding-bottom:4px;}
  .navlinks a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .25s ease;}
  .navlinks a:hover{color:var(--gold);}
  .navlinks a:hover::after{width:100%;}
  @media (min-width:860px){ .navlinks{display:flex;} }

  /* HERO / CHARACTER SHEET */
  .hero{padding:64px 0 70px;}
  .char-grid{display:grid; grid-template-columns:1fr; gap:28px;}
  @media (min-width:900px){ .char-grid{grid-template-columns: 1.3fr 1fr;} }

  .avatar{
    width:76px; height:76px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel', serif; font-weight:700; font-size:1.6rem;
    color:var(--gold);
    background:var(--bg-panel-2);
    border:1px solid var(--border-bright);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    flex-shrink:0;
    box-shadow:0 0 0 0 rgba(212,175,55,0.35);
    animation: avatarPulse 3s ease-in-out infinite;
  }
  @keyframes avatarPulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,0.25); }
    50%{ box-shadow:0 0 0 10px rgba(212,175,55,0); }
  }
  @media (prefers-reduced-motion: reduce){ .avatar{animation:none;} }
  .status-badge{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:14px;
  }
  .status-dot{width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal);}
  .char-name{font-family:'Cinzel', serif; font-weight:600; font-size:2rem; margin-top:16px; letter-spacing:0.01em;}
  @media (min-width:768px){ .char-name{font-size:2.5rem;} }
  .char-meta{margin-top:6px; display:flex; flex-wrap:wrap; gap:16px;}
  .char-bio{margin-top:20px; color:var(--text-dim); max-width:560px; font-size:1rem;}
  .dialogue{
    margin-top:18px; font-family:'JetBrains Mono', monospace; font-size:0.85rem; color:var(--teal);
  }
  .cursor{display:inline-block; width:7px; height:14px; background:var(--teal); margin-left:2px; animation:blink 1s step-end infinite; vertical-align:middle;}
  @keyframes blink{ 50%{opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .cursor{animation:none;} html{scroll-behavior:auto;} }
  .char-actions{margin-top:26px; display:flex; flex-wrap:wrap; gap:14px;}

  /* stat block */
  .stat-title{font-family:'Cinzel', serif; font-size:0.95rem; margin-bottom:18px; color:var(--gold); letter-spacing:0.02em;}
  .stat-row{margin-bottom:16px;}
  .stat-row:last-child{margin-bottom:0;}
  .stat-label{display:flex; justify-content:space-between; margin-bottom:6px;}
  .stat-bar{height:6px; background:var(--bg); border:1px solid var(--border); overflow:hidden;}
  .stat-fill{height:100%; background:linear-gradient(90deg, var(--gold), #F3D77A); width:0%; transition:width 1.2s cubic-bezier(.2,.8,.2,1);}
  .stat-fill.filled{width:95%;}
  .stat-plain{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border);}
  .stat-plain:last-child{border-bottom:none;}

  section{padding:56px 0; scroll-margin-top:76px;}
  .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.visible{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
  }
  .section-head{margin-bottom:36px;}
  .section-eyebrow{display:block; margin-bottom:8px;}
  h2.section-title{font-family:'Cinzel', serif; font-weight:600; font-size:1.7rem; letter-spacing:0.01em;}
  @media (min-width:768px){ h2.section-title{font-size:2.1rem;} }

  /* SKILL TREE */
  .tree{display:grid; grid-template-columns:1fr; gap:30px;}
  @media (min-width:700px){ .tree{grid-template-columns:repeat(2,1fr);} }
  .branch-name{font-family:'JetBrains Mono', monospace; font-size:0.78rem; color:var(--teal); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border);}
  .node-list{display:flex; flex-direction:column; gap:10px;}
  .node{
    display:flex; align-items:center; gap:12px;
    padding:10px 14px;
    background:var(--bg-panel-2);
    border:1px solid var(--border);
    border-left:3px solid var(--gold);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .node:hover{ transform:translateX(4px); border-left-color:var(--teal); box-shadow:-2px 0 12px rgba(63,169,201,0.15); }
  .node-dot{width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;}
  .node span.tag{color:var(--text);}

  /* QUEST LOG */
  .quest-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px;}
  .quest-title{font-family:'Cinzel', serif; font-size:1.25rem; font-weight:600;}
  .badge{
    font-family:'JetBrains Mono', monospace; font-size:0.68rem;
    padding:4px 10px; border:1px solid var(--border-bright); color:var(--gold);
    letter-spacing:0.03em;
  }
  .quest-giver{margin-top:2px;}
  .objectives{margin-top:20px; display:flex; flex-direction:column; gap:10px;}
  .objective{display:flex; align-items:flex-start; gap:10px; color:var(--text-dim); font-size:0.95rem;}
  .obj-check{
    flex-shrink:0; width:16px; height:16px; margin-top:3px;
    border:1px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
  }
  .obj-check svg{width:10px; height:10px;}

  /* ACHIEVEMENTS */
  .ach-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px;}
  @media (min-width:700px){ .ach-grid{grid-template-columns:1fr 1fr;} }
  .ach-unlock{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'JetBrains Mono', monospace; font-size:0.66rem;
    color:var(--gold); letter-spacing:0.04em; margin-bottom:14px;
  }

  /* card banner art */
  .card-banner{
    height:120px;
    margin:-26px -26px 20px -26px;
    border-bottom:1px solid var(--border);
    background:
      radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0/16px 16px,
      var(--bg-panel-2);
    overflow:hidden;
    position:relative;
  }
  .card-banner svg{width:100%; height:100%; transition:transform .35s ease;}
  .panel-hover:hover .card-banner svg{ transform:scale(1.06); }
  .ach-title{font-family:'Cinzel', serif; font-weight:600; font-size:1.25rem; margin-bottom:4px;}
  .ach-sub{margin-bottom:14px;}
  .ach-list{display:flex; flex-direction:column; gap:7px; font-size:0.9rem; color:var(--text-dim);}
  .ach-list li{position:relative; padding-left:16px;}
  .ach-list li::before{content:'▸'; position:absolute; left:0; color:var(--teal);}
  .reward-row{margin-top:16px; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .reward-tag{font-family:'JetBrains Mono', monospace; font-size:0.66rem; color:var(--text-dim); border:1px solid var(--border); padding:3px 8px;}
  .ach-link{display:block; margin-top:14px; font-family:'JetBrains Mono', monospace; font-size:0.8rem; color:var(--teal); border-bottom:1px solid transparent; width:fit-content;}
  .ach-link:hover{border-color:var(--teal);}

  /* TRAINING */
  .rank-grid{display:grid; grid-template-columns:1fr; gap:16px;}
  @media (min-width:700px){ .rank-grid{grid-template-columns:1fr 1fr;} }
  .rank-num{font-family:'Cinzel', serif; font-size:2.2rem; color:var(--gold); font-weight:700; line-height:1;}
  .rank-title{font-family:'Cinzel', serif; font-size:1.1rem; font-weight:600; margin-top:14px;}
  .rank-sub{margin-top:6px; color:var(--text-dim); font-size:0.9rem;}

  /* CONTACT */
  .contact-panel{padding:40px 26px; text-align:center;}
  @media (min-width:768px){ .contact-panel{padding:52px;} }
  .contact-title{font-family:'Cinzel', serif; font-weight:600; font-size:1.6rem; max-width:480px; margin:0 auto;}
  @media (min-width:768px){ .contact-title{font-size:2rem;} }
  .inv-grid{margin-top:32px; display:grid; grid-template-columns:1fr; gap:10px; max-width:520px; margin-left:auto; margin-right:auto;}
  @media (min-width:560px){ .inv-grid{grid-template-columns:1fr 1fr;} }
  .inv-slot{
    display:flex; align-items:center; gap:12px;
    padding:12px 14px;
    background:var(--bg-panel-2); border:1px solid var(--border);
    transition:border-color .2s ease;
  }
  .inv-slot:hover{border-color:var(--gold);}
  .inv-icon{width:30px; height:30px; flex-shrink:0; border:1px solid var(--border-bright); display:flex; align-items:center; justify-content:center;}
  .inv-icon svg{width:15px; height:15px;}
  .inv-slot .tag{color:var(--text); text-align:left; word-break:break-word;}

  footer{padding:40px 0 60px; text-align:center;}