:root{
    --bg:#ece4d3;
    --paper:#f8f4e9;
    --ink:#20282a;
    --ink-soft:#4b5457;
    --brass:#a06a24;
    --brass-dark:#7c5119;
    --forest:#2f4b3c;
    --forest-dark:#20362a;
    --rust:#8c4a34;
    --line:#cdbfa0;
    --line-soft:#e2d7bd;
    --ok:#2f6b4a;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    background-image:
      radial-gradient(circle at 20% 10%, rgba(160,106,36,0.06), transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(47,75,60,0.07), transparent 45%);
    color:var(--ink);
    font-family:'Source Sans 3', sans-serif;
    font-size:18px;
    line-height:1.5;
    min-height:100vh;
  }
  h1,h2,h3,.display{font-family:'Bitter', serif;}
  .wrap{
    max-width:1100px;
    margin:0 auto;
    padding:28px 20px 80px;
  }
  header.top{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    border-bottom:2px solid var(--ink);
    padding-bottom:14px;
    margin-bottom:22px;
    flex-wrap:wrap;
  }
  header.top .brand{
    font-family:'Bitter', serif;
    font-weight:800;
    font-size:26px;
    letter-spacing:0.5px;
  }
  header.top .brand span{color:var(--brass-dark);}
  header.top .tag{
    font-size:14px;
    color:var(--ink-soft);
    letter-spacing:1.5px;
    text-transform:uppercase;
  }
  .progress-rail{
    display:flex;
    gap:6px;
    margin-bottom:26px;
  }
  .progress-rail .seg{
    flex:1;
    height:8px;
    background:var(--line-soft);
    border-radius:4px;
    position:relative;
    overflow:hidden;
  }
  .progress-rail .seg.done{background:var(--forest);}
  .progress-rail .seg.current{background:var(--brass);}
  .progress-labels{
    display:flex;
    justify-content:space-between;
    font-size:12.5px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:0.6px;
    margin-bottom:24px;
  }
  .layout{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:24px;
    align-items:start;
  }
  @media (max-width:860px){
    .layout{grid-template-columns:1fr;}
    .dossier{order:-1;}
  }
  .panel{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:26px 28px;
    box-shadow:0 1px 0 rgba(0,0,0,0.03);
  }
  .panel h2{
    margin-top:0;
    font-size:24px;
    border-bottom:1px solid var(--line-soft);
    padding-bottom:12px;
    margin-bottom:6px;
  }
  .step-sub{color:var(--ink-soft); font-size:15.5px; margin-bottom:20px;}
  label{display:block; font-weight:600; margin-bottom:6px; font-size:15px;}
  select, input[type=text], textarea{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:17px;
    font-family:inherit;
    background:#fff;
    color:var(--ink);
    margin-bottom:16px;
  }
  textarea{resize:vertical; min-height:44px;}
  select:focus, input:focus, button:focus{outline:3px solid var(--brass); outline-offset:1px;}
  .info-card{
    background:#fffef9;
    border:1px dashed var(--line);
    border-radius:8px;
    padding:14px 16px;
    margin:10px 0 20px;
    font-size:15.5px;
  }
  .hero-media{
    width:100%;
    aspect-ratio:1/1;
    border-radius:var(--radius);
    overflow:hidden;
    margin:14px 0 18px;
    background:var(--line-soft);
  }
  .hero-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .cover-media{
    width:100%;
    aspect-ratio:2/3;
    max-height:520px;
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:18px;
    background:var(--line-soft);
  }
  .cover-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .info-card .badges{margin-bottom:6px;}
  .badge{
    display:inline-block;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.5px;
    padding:3px 9px;
    border-radius:100px;
    margin-right:6px;
    font-weight:700;
  }
  .badge.easy{background:var(--forest); color:#fff;}
  .badge.stat{background:var(--brass); color:#fff;}
  details.more{margin-top:10px;}
  details.more summary{
    cursor:pointer;
    color:var(--brass-dark);
    font-weight:600;
    font-size:14.5px;
  }
  details.more[open] summary{margin-bottom:8px;}
  .btn-row{display:flex; justify-content:space-between; gap:10px; margin-top:24px;}
  button{
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    padding:12px 22px;
    border-radius:8px;
    border:none;
    cursor:pointer;
    transition:transform 0.05s ease;
  }
  button:active{transform:translateY(1px);}
  button.primary{background:var(--forest); color:#fff;}
  button.primary:hover{background:var(--forest-dark);}
  button.ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  button.ghost:hover{background:var(--line-soft);}
  button:disabled{opacity:0.4; cursor:not-allowed;}
  button.big-cta{
    display:block;
    width:100%;
    background:var(--brass);
    color:#fff;
    font-size:19px;
    padding:20px 22px;
    border-radius:12px;
    box-shadow:0 3px 0 var(--brass-dark);
    margin-top:6px;
  }
  button.big-cta:hover{background:var(--brass-dark);}
  button.big-cta:active{box-shadow:0 1px 0 var(--brass-dark); transform:translateY(2px);}
  .brief-status{
    display:none;
    background:#eaf3ec;
    border:1px solid var(--ok);
    color:var(--forest-dark);
    border-radius:8px;
    padding:10px 14px;
    font-size:14.5px;
    font-weight:600;
    margin:12px 0;
  }
  .brief-status.show{display:block;}
  /* dossier */
  .dossier{
    background:var(--ink);
    color:#f3ecda;
    border-radius:var(--radius);
    padding:22px 24px;
    position:sticky;
    top:20px;
  }
  .dossier h3{
    margin:0 0 4px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#c9a05a;
  }
  .dossier .name{font-family:'Bitter',serif; font-size:22px; margin-bottom:14px; min-height:28px;}
  .dossier dl{margin:0;}
  .dossier .row{
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.12);
    padding:7px 0;
    font-size:15px;
  }
  .dossier .row .k{color:#b9ad8f;}
  .dossier .row .v{font-weight:600; text-align:right;}
  .dossier .stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:14px;
  }
  .dossier .stat-box{
    background:rgba(255,255,255,0.06);
    border-radius:6px;
    text-align:center;
    padding:8px 4px;
  }
  .dossier .stat-box .lbl{font-size:11px; letter-spacing:1px; color:#b9ad8f;}
  .dossier .stat-box .val{font-size:20px; font-weight:800; font-family:'Bitter',serif;}
  .dossier .stat-box .mod{font-size:12px; color:#c9a05a;}
  .stamp{
    display:inline-block;
    margin-top:16px;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#8a9a86;
    border:1px solid #8a9a86;
    border-radius:4px;
    padding:3px 8px;
  }
  /* point buy */
  .pb-remaining{
    background:var(--forest);
    color:#fff;
    border-radius:8px;
    padding:14px 18px;
    text-align:center;
    font-family:'Bitter',serif;
    font-size:20px;
    margin-bottom:18px;
  }
  .pb-remaining.warn{background:var(--rust);}
  .pb-row{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .pb-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
  }
  .pb-row .stat-name{font-weight:700;}
  .pb-controls{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .pb-btn{
    width:44px; height:44px;
    flex:0 0 auto;
    border-radius:8px;
    border:1px solid var(--line);
    background:#fff;
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    line-height:1;
  }
  .pb-btn:hover:not(:disabled){background:var(--line-soft);}
  .pb-score{
    min-width:34px;
    text-align:center;
    font-size:22px;
    font-weight:800;
    font-family:'Bitter',serif;
  }
  .pb-cost{font-size:13px; color:var(--ink-soft); margin-left:auto;}
  .pb-final{font-size:14.5px; font-weight:700; color:var(--forest);}
  .rec-banner{
    background:#fff6e6;
    border:1px solid var(--brass);
    border-radius:8px;
    padding:12px 16px;
    font-size:15px;
    margin-bottom:18px;
  }
  .bg-bonus-picker{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin:10px 0 20px;
  }
  .ability-choice{
    border:2px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:10px 14px;
    cursor:pointer;
    font-weight:700;
    min-width:110px;
    text-align:center;
  }
  .ability-choice.plus2{border-color:var(--forest); background:#eaf3ec;}
  .ability-choice.plus1{border-color:var(--brass); background:#fff6e6;}
  .skill-chip-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:16px 0 6px;
  }
  .skill-chip{
    border:2px solid var(--line);
    background:#fff;
    border-radius:100px;
    padding:9px 16px;
    cursor:pointer;
    font-weight:600;
    font-size:14.5px;
  }
  .skill-chip.selected{border-color:var(--forest); background:#eaf3ec; color:var(--forest-dark);}
  .skill-chip:disabled{opacity:0.35; cursor:not-allowed;}
  .feature-card-list{display:flex; flex-direction:column; gap:10px; margin:14px 0 6px;}
  .feature-card{
    border:2px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:12px 16px;
    cursor:pointer;
  }
  .feature-card:hover{border-color:var(--brass);}
  .feature-card.selected{border-color:var(--forest); background:#eaf3ec;}
  .feature-card .fc-name{font-family:'Bitter',serif; font-weight:700; font-size:16.5px; margin-bottom:4px;}
  .feature-card .fc-blurb{font-size:14.5px; color:var(--ink-soft);}
  .custom-wrap{display:none; margin-top:-8px;}
  .custom-wrap.show{display:block;}
  .summary-block{margin-bottom:22px;}
  .summary-block h4{
    font-family:'Bitter',serif;
    font-size:17px;
    margin:0 0 8px;
    color:var(--forest-dark);
  }
  .final-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-bottom:8px;
  }
  .final-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    text-align:center;
    padding:10px;
  }
  .final-box .lbl{font-size:12px; color:var(--ink-soft); letter-spacing:1px;}
  .final-box .val{font-size:24px; font-weight:800; font-family:'Bitter',serif;}
  .final-box .mod{font-size:13px; color:var(--forest);}
  .intro-list{padding-left:20px;}
  .intro-list li{margin-bottom:6px;}
  footer.credit{
    text-align:center;
    color:var(--ink-soft);
    font-size:13px;
    margin-top:36px;
  }
  .form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 16px;
  }
  .lock-note{
    font-size:13px;
    color:var(--ink-soft);
    margin:-10px 0 16px;
  }
  .appearance-preview{
    background:#fffef9;
    border:1px dashed var(--line);
    border-radius:8px;
    padding:12px 16px;
    font-size:15px;
    margin-bottom:20px;
  }

  /* ---- Mobile friendliness ---- */
  @media (max-width:600px){
    .form-grid{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    body{font-size:16.5px;}
    .wrap{padding:16px 12px 56px;}
    header.top{gap:4px 10px;}
    header.top .brand{font-size:21px;}
    header.top .tag{font-size:12px;}
    .panel{padding:18px 16px;}
    .dossier{padding:16px 18px; position:static;}
    .panel h2{font-size:21px;}
    .btn-row{flex-direction:column-reverse; gap:10px;}
    .btn-row button{width:100%;}
    .dossier .stats-grid{grid-template-columns:repeat(3,1fr); gap:6px;}
    .dossier .stat-box .val{font-size:17px;}
    .final-grid{grid-template-columns:repeat(2,1fr);}
    .bg-bonus-picker{gap:8px;}
    .ability-choice{min-width:0; flex:1 1 30%; padding:10px 8px; font-size:14.5px;}
  }

/* ---- Roster page ---- */
.roster-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.roster-nav{display:flex; gap:10px; flex-wrap:wrap;}
.party-section{margin-bottom:28px;}
.party-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.party-title h2{font-size:20px; margin:0;}
.party-count{
  font-size:13px;
  font-weight:700;
  padding:4px 12px;
  border-radius:100px;
  background:var(--forest);
  color:#fff;
}
.party-count.full{background:var(--rust);}
.warning-banner{
  background:#f7e9e4;
  border:1px solid var(--rust);
  color:var(--rust);
  border-radius:8px;
  padding:10px 14px;
  font-size:14px;
  font-weight:600;
  margin-bottom:14px;
}
.member-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
}
.member-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  cursor:pointer;
  text-align:center;
}
.member-card:hover{border-color:var(--brass);}
.member-thumbs{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-bottom:10px;
}
.member-thumbs .thumb{
  width:48px; height:48px;
  border-radius:8px;
  overflow:hidden;
  background:var(--line-soft);
  flex:0 0 auto;
}
.member-thumbs .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.member-card .m-name{font-family:'Bitter',serif; font-weight:700; font-size:16px;}
.member-card .m-sub{font-size:13px; color:var(--ink-soft); margin-top:2px;}
.empty-slot{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  font-size:14px;
  min-height:120px;
}
.empty-roster{
  text-align:center;
  padding:60px 20px;
  color:var(--ink-soft);
}
/* modal */
.modal-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(20,25,26,0.6);
  z-index:50;
  padding:20px;
  overflow-y:auto;
}
.modal-backdrop.show{display:flex; align-items:flex-start; justify-content:center;}
.modal-card{
  background:var(--paper);
  border-radius:var(--radius);
  max-width:560px;
  width:100%;
  padding:26px 28px;
  margin-top:30px;
  position:relative;
}
.modal-close{
  position:absolute;
  top:16px; right:16px;
  background:transparent;
  border:none;
  font-size:22px;
  cursor:pointer;
  padding:4px 8px;
  color:var(--ink-soft);
}
.modal-thumbs{display:flex; gap:10px; margin-bottom:16px;}
.modal-thumbs .thumb{width:72px; height:72px; border-radius:8px; overflow:hidden; background:var(--line-soft);}
.modal-thumbs .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:520px){
  .member-grid{grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));}
  .modal-card{padding:20px 18px;}
}