/* ===== SRD 5.1 Character Creator — Styles ===== */
/* Dark theme matching StatBlocker */

:root {
  --parchment:#1A1A20;--parchment-light:#222228;--ink:#E8E8ED;--ink-mid:#9898A0;
  --crimson:#DC2626;--crimson-hover:#EF4444;--crimson-glow:rgba(220,38,38,.25);
  --gold:#D4D4DA;--gold-dim:#71717A;--bark:#131316;--bark-light:#252528;
  --bark-dark:#0C0C0E;--bark-deep:#060608;--border:#2A2A30;--shadow:rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{min-height:100vh;background:var(--bark-dark);font-family:'Crimson Text',Georgia,serif;color:var(--ink);overflow-x:hidden;}
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--bark);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}

/* ===== Toast ===== */
#toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--crimson);color:#fff;padding:12px 28px;border-radius:6px;font-size:15px;z-index:9999;box-shadow:0 6px 24px var(--shadow);font-family:'Crimson Text',serif;display:none;opacity:0;transition:all .3s ease;letter-spacing:.3px;}
#toast.show{display:block;opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== Header ===== */
.app-header{background:var(--bark-deep);border-bottom:3px solid var(--crimson);padding:14px 24px;text-align:center;position:relative;}
.app-header::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(220,38,38,.06),transparent 50%,rgba(220,38,38,.04));}
.app-header h1{font-family:'Cinzel',serif;font-size:24px;font-weight:900;color:#fff;letter-spacing:3px;text-transform:uppercase;position:relative;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.app-header p{color:var(--crimson);margin-top:3px;font-size:13px;font-style:italic;position:relative;letter-spacing:.5px;}
.header-nav{position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:1;}
.header-nav a{color:var(--gold-dim);font-family:'Cinzel',serif;font-size:11px;text-decoration:none;letter-spacing:.5px;transition:color .2s;}
.header-nav a:hover{color:var(--crimson);}

/* ===== Buttons (shared with StatBlocker) ===== */
.btn{border:none;border-radius:5px;padding:8px 16px;cursor:pointer;font-family:'Cinzel',serif;font-size:11px;white-space:nowrap;transition:all .2s;position:relative;letter-spacing:.5px;font-weight:600;}
.btn:active{transform:scale(.96);}
.btn-primary{background:linear-gradient(180deg,var(--crimson-hover),var(--crimson));color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(220,38,38,.4),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.3);}
.btn-primary:hover{background:linear-gradient(180deg,#F87171,var(--crimson-hover));box-shadow:0 4px 16px rgba(220,38,38,.5);transform:translateY(-1px);}
.btn-secondary{background:linear-gradient(180deg,var(--bark-light),var(--bark));color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08);}
.btn-secondary:hover{background:linear-gradient(180deg,#7A6350,var(--bark-light));transform:translateY(-1px);}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--gold);box-shadow:none;}
.btn-outline:hover{border-color:var(--gold);color:#fff;background:rgba(255,255,255,.05);}
.btn-small{padding:5px 10px;font-size:10px;}
.btn-save{border:none;border-radius:5px;cursor:pointer;font-family:'Cinzel',serif;font-weight:700;letter-spacing:.5px;transition:all .2s;background:linear-gradient(180deg,var(--crimson-hover),var(--crimson));color:#fff;box-shadow:0 2px 8px rgba(220,38,38,.4),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.3);}
.btn-save:hover{background:linear-gradient(180deg,#F87171,var(--crimson-hover));box-shadow:0 4px 16px rgba(220,38,38,.5);transform:translateY(-1px);}
.btn-save:active{transform:scale(.96);}
.btn-big{padding:12px 20px;font-size:13px;letter-spacing:1px;width:100%;text-align:center;margin-top:4px;}

/* ===== Form Fields ===== */
.field-label{display:block;font-weight:700;font-size:11px;color:var(--gold);margin-bottom:3px;font-family:'Cinzel',serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.3);}
.field-input,.field-select{width:100%;padding:8px 10px;border:2px solid var(--border);border-radius:5px;font-size:14px;font-family:'Crimson Text',serif;background:var(--parchment-light);color:var(--ink);box-shadow:inset 0 1px 4px rgba(0,0,0,.08);transition:all .2s;}
.field-input:focus,.field-select:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 3px var(--crimson-glow),inset 0 1px 4px rgba(0,0,0,.08);background:var(--bark-light);}
.field-input::placeholder{color:var(--gold-dim);font-style:italic;}

/* ===== Wizard Layout ===== */
.wizard-container{max-width:1100px;margin:0 auto;padding:20px 20px 20px;}

/* ===== Split Panel Layout ===== */
.split-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;}
.split-left{min-width:0;}
.split-right{position:sticky;top:20px;max-height:calc(100vh - 140px);overflow-y:auto;}
.info-detail-panel{background:var(--bark);border:1px solid var(--border);border-radius:8px;padding:20px;transition:opacity .2s ease;}
.info-detail-panel.empty{opacity:.5;text-align:center;color:var(--gold-dim);font-style:italic;padding:40px 20px;}
.info-detail-title{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:var(--crimson);letter-spacing:.5px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.info-detail-body{font-size:16px;color:var(--ink);line-height:1.6;}
.info-heading{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.5px;text-transform:uppercase;margin:12px 0 4px;padding-bottom:2px;border-bottom:1px solid var(--border);}
.info-heading:first-child{margin-top:0;}
.info-para{margin:6px 0;color:var(--ink-mid);font-size:16px;}
.info-list{margin:2px 0 8px 0;padding-left:18px;list-style:none;}
.info-list li{position:relative;padding:2px 0;color:var(--ink);font-size:15px;}
.info-list li::before{content:'\25B8';position:absolute;left:-14px;color:var(--crimson);font-size:10px;top:4px;}
.spell-school-label{font-family:'Crimson Text',serif;font-size:12px;color:var(--ink-mid);font-style:italic;margin-top:1px;letter-spacing:.3px;}

/* ===== Breadcrumb ===== */
.breadcrumb-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.btn-back{flex-shrink:0;padding:6px 14px;font-size:11px;}
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 14px;background:var(--bark);border:1px solid var(--border);border-radius:6px;min-height:42px;flex:1;}
.breadcrumb-item{font-family:'Cinzel',serif;font-size:11px;color:var(--gold-dim);letter-spacing:.5px;cursor:pointer;transition:color .2s;padding:3px 8px;border-radius:3px;}
.breadcrumb-item:hover{color:var(--crimson);background:rgba(220,38,38,.08);}
.breadcrumb-item.current{color:var(--crimson);font-weight:700;}
.breadcrumb-sep{color:var(--border);font-size:12px;user-select:none;}
.breadcrumb-empty{color:var(--gold-dim);font-style:italic;font-size:12px;}

/* ===== Step Card ===== */
.step-card{background:var(--bark);border:1px solid var(--border);border-radius:8px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,.3);animation:fadeIn .3s ease;}

/* ===== Race Banner ===== */
.race-card-with-banner{display:flex;padding:0;overflow:visible;position:relative;}
.race-banner{width:340px;flex-shrink:0;background-size:cover;background-position:top center;background-repeat:no-repeat;background-color:var(--bark);border-right:1px solid var(--border);transition:background-image .3s ease;height:100vh;border-radius:8px 0 0 8px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%),linear-gradient(to right,transparent 0%,black 5%,black 85%,transparent 100%);-webkit-mask-composite:destination-in;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%),linear-gradient(to right,transparent 0%,black 5%,black 85%,transparent 100%);mask-composite:intersect;}
.race-card-content{flex:1;padding:24px;min-width:0;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.step-title{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--ink);letter-spacing:1px;margin-bottom:6px;line-height:1.3;}
.step-subtitle{font-size:15px;color:var(--ink-mid);margin-bottom:20px;line-height:1.5;font-style:italic;}
.step-rules-text{font-size:13px;color:var(--gold-dim);margin-bottom:16px;line-height:1.5;padding:10px 14px;background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.15);border-radius:5px;}
.step-rules-text ul{margin:6px 0 0 18px;list-style:disc;}
.step-rules-text li{margin-bottom:3px;}

/* ===== Source Filter ===== */
.source-filter-bar{display:flex;gap:0;margin-bottom:12px;border-radius:8px;overflow:hidden;border:1px solid var(--border);}
.source-filter-btn{flex:1;padding:8px 16px;background:var(--parchment-light);border:none;color:var(--gold-dim);font-family:'Cinzel',serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;text-transform:uppercase;}
.source-filter-btn:not(:last-child){border-right:1px solid var(--border);}
.source-filter-btn:hover:not(.active){background:rgba(220,38,38,.06);color:var(--ink);}
.source-filter-btn.active{background:var(--crimson);color:#fff;}

/* ===== Option Grid ===== */
.option-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;max-height:calc(100vh - 260px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;}
.option-grid::-webkit-scrollbar{width:6px;}
.option-grid::-webkit-scrollbar-track{background:transparent;}
.option-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.option-grid::-webkit-scrollbar-thumb:hover{background:var(--gold-dim);}
.option-grid.narrow{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
.option-grid.wide{grid-template-columns:1fr;}

/* ===== Option Card ===== */
.option-card{background:var(--parchment-light);border:2px solid var(--border);border-radius:6px;padding:14px 16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.option-card:hover{border-color:var(--crimson);transform:translateY(-2px);box-shadow:0 4px 16px rgba(220,38,38,.15);}
/* On touch devices :hover is "sticky" — it fires on tap and persists until
   the user taps somewhere else, leaving cards visually highlighted as if
   selected. Cancel the hover visual on no-hover devices so only the
   explicit `.selected` class highlights a card. */
@media (hover: none) {
  /* Same sticky-hover issue applies to every card-like control in the
     wizard. Cancel all of their hover visuals on touch devices. */
  .option-card:hover {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
    background: var(--parchment-light);
  }
  .level-carousel-card:hover { border-color: var(--border); }
  .custom-create-card:hover {
    border-color: var(--border) !important;
    background: var(--parchment-light) !important;
  }
  .ability-slot:hover {
    border-color: var(--border);
    background: transparent;
  }
  .builder-feature-card:hover { border-color: var(--border); }
  .levelup-change-item:hover,
  .levelup-choice-item:hover {
    border-color: var(--border);
    transform: none;
  }
  .levelup-hp-outline-btn:hover {
    border-color: var(--border);
    color: inherit;
  }
}
.option-card.selected{border-color:var(--crimson);background:rgba(220,38,38,.08);box-shadow:0 0 0 2px var(--crimson-glow),0 4px 16px rgba(220,38,38,.15);}
.option-card.disabled{opacity:.45;pointer-events:none;cursor:default;}
.option-card.maxed-out{opacity:.3;pointer-events:none;cursor:default;filter:grayscale(.5);transition:opacity .3s,filter .3s;}
.known-badge{position:absolute;top:8px;right:10px;font-family:'Cinzel',serif;font-size:9px;color:var(--gold-dim);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:2px 8px;letter-spacing:.3px;text-transform:uppercase;}
.school-count{font-family:'Cinzel',serif;font-size:11px;color:var(--crimson);letter-spacing:.3px;margin-left:12px;}
.school-count.met{color:#4ade80;}

.option-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0;}
.option-card-label{font-family:'Cinzel',serif;font-size:19px;font-weight:700;color:var(--crimson);letter-spacing:.5px;line-height:1.2;overflow-wrap:break-word;word-wrap:break-word;}
.option-card-desc{font-size:16px;color:var(--ink-mid);margin-top:6px;line-height:1.45;}

.option-card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.tag-chip{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:10px;background:rgba(220,38,38,.1);color:var(--crimson);border:1px solid rgba(220,38,38,.2);}

/* ===== Multi-select ===== */
.option-card.multi-mode{cursor:pointer;}

.multi-confirm{margin-top:16px;display:flex;justify-content:flex-end;gap:10px;align-items:center;}
.multi-confirm.sticky{position:sticky;bottom:0;background:var(--bark);padding:12px 16px;border-top:1px solid var(--border);margin:16px -24px -24px;z-index:10;box-shadow:0 -4px 12px rgba(0,0,0,.3);border-radius:0 0 8px 8px;}
.multi-count{font-family:'Cinzel',serif;font-size:12px;color:var(--gold-dim);letter-spacing:.5px;}

/* ===== Reselection Modal ===== */
.reselect-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;align-items:center;justify-content:center;animation:sbGateFadeIn .2s ease;}
.reselect-modal{background:var(--bark);border:1px solid var(--border);border-radius:10px;padding:28px 28px 20px;max-width:540px;width:94%;max-height:85vh;overflow-y:auto;position:relative;box-shadow:0 8px 32px rgba(0,0,0,.6);font-family:'Crimson Text',Georgia,serif;}
.reselect-modal::-webkit-scrollbar{width:6px;}
.reselect-modal::-webkit-scrollbar-track{background:transparent;}
.reselect-modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.reselect-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--gold-dim);font-size:18px;cursor:pointer;padding:4px;}
.reselect-close:hover{color:var(--ink);}
.reselect-title{font-family:'Cinzel',serif;font-size:18px;font-weight:700;color:var(--ink);letter-spacing:1px;text-align:center;margin-bottom:8px;}
.reselect-explanation{color:var(--ink-mid);font-size:14px;text-align:center;line-height:1.45;margin-bottom:14px;}
.reselect-counter{font-family:'Cinzel',serif;font-size:12px;color:var(--gold-dim);letter-spacing:.5px;text-align:center;margin-bottom:12px;}
.reselect-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px;max-height:45vh;overflow-y:auto;padding-right:4px;}
.reselect-grid::-webkit-scrollbar{width:5px;}
.reselect-grid::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.reselect-grid .option-card{padding:10px 14px;}
.reselect-grid .option-card-label{font-size:16px;}
.reselect-grid .option-card-desc{font-size:13px;}
.reselect-auto-badge{color:#D4A843 !important;border-color:rgba(212,168,67,.3) !important;background:rgba(212,168,67,.1) !important;}
.reselect-locked{opacity:.7;pointer-events:none;cursor:default;}
.reselect-btn-row{display:flex;gap:10px;justify-content:center;padding-top:8px;border-top:1px solid var(--border);}
.reselect-confirm{min-width:120px;transition:all .2s;}
.reselect-confirm:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.reselect-confirm.ready{opacity:1;cursor:pointer;pointer-events:auto;}

/* ===== Level Input ===== */
.level-input-wrap{display:flex;align-items:center;gap:16px;justify-content:center;margin:20px 0;}
.level-input{width:120px;text-align:center;font-size:28px;font-family:'Cinzel',serif;font-weight:900;padding:12px;border:2px solid var(--border);border-radius:8px;background:var(--parchment-light);color:var(--crimson);box-shadow:inset 0 2px 6px rgba(0,0,0,.15);transition:all .2s;}
.level-input:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 3px var(--crimson-glow),inset 0 2px 6px rgba(0,0,0,.15);}
.level-label{font-family:'Cinzel',serif;font-size:14px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;}
/* 3D Level Carousel */
.level-carousel-wrap{display:flex;align-items:center;justify-content:center;margin:20px 0;user-select:none;cursor:grab;}
.level-carousel-wrap:active{cursor:grabbing;}
.level-carousel-stage{width:240px;height:160px;perspective:800px;overflow:visible;position:relative;}
.level-carousel-ring{width:100%;height:100%;position:absolute;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.level-carousel-card{position:absolute;width:100px;height:120px;left:50%;top:50%;margin-left:-50px;margin-top:-60px;background:var(--parchment-light);border:2px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;backface-visibility:hidden;transition:border-color .3s,box-shadow .3s,opacity .3s;opacity:.4;}
.level-carousel-card.front{border-color:var(--crimson);box-shadow:0 0 20px rgba(220,38,38,.35),0 4px 16px rgba(0,0,0,.4);opacity:1;}
.level-carousel-card:hover{border-color:var(--crimson-hover);}
.level-carousel-number{font-family:'Cinzel',serif;font-size:42px;font-weight:900;color:var(--gold);line-height:1;transition:color .3s;}
.level-carousel-card.front .level-carousel-number{color:var(--crimson);}
.level-carousel-label{font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:var(--gold-dim);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;text-align:center;}
.level-carousel-desc{text-align:center;font-family:'Crimson Text',serif;font-size:15px;color:var(--ink-mid);font-style:italic;max-width:400px;margin:8px auto 0;min-height:40px;line-height:1.5;}
.level-carousel-confirm{display:block;margin:12px auto 0;padding:12px 36px;background:var(--crimson);color:#fff;border:none;border-radius:6px;font-family:'Cinzel',serif;font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:all .2s;}
.level-carousel-confirm:hover{background:var(--crimson-hover);box-shadow:0 4px 16px rgba(220,38,38,.3);}

/* ===== Info Only Step ===== */
.info-panel{background:var(--parchment-light);border:1px solid var(--border);border-radius:6px;padding:16px 18px;margin-bottom:16px;}
.info-panel-title{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--crimson);margin-bottom:8px;}
.info-panel-text{font-size:14px;color:var(--ink);line-height:1.5;margin-bottom:12px;}
.info-option{padding:10px 12px;background:rgba(0,0,0,.15);border-radius:4px;margin-bottom:8px;border-left:3px solid var(--crimson);}
.info-option-label{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.5px;margin-bottom:4px;}
.info-option-desc{font-size:13px;color:var(--ink-mid);line-height:1.4;}

/* ===== Composite Step ===== */
.composite-substep{margin-bottom:20px;}
.composite-substep-title{font-family:'Cinzel',serif;font-size:16px;font-weight:700;color:var(--gold);margin-bottom:8px;letter-spacing:.5px;}
.composite-divider{border:none;border-top:1px solid var(--border);margin:24px 0;}

/* ===== Level-scaled note ===== */
.level-note{background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.2);border-radius:6px;padding:12px 16px;margin-top:12px;}
.level-note-title{font-family:'Cinzel',serif;font-size:11px;color:var(--crimson);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;font-weight:700;}
.level-note-item{font-size:13px;color:var(--ink-mid);line-height:1.5;padding:3px 0;display:flex;gap:8px;}
.level-note-level{font-family:'Cinzel',serif;font-size:11px;color:var(--gold-dim);min-width:50px;flex-shrink:0;font-weight:600;}

/* ===== DM Approval Badge ===== */
.dm-badge{display:inline-flex;align-items:center;gap:4px;font-family:'Cinzel',serif;font-size:9px;color:var(--gold-dim);background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;padding:2px 8px;margin-top:6px;letter-spacing:.3px;}

/* ===== Availability Warning ===== */
.availability-note{font-size:11px;color:var(--gold-dim);font-style:italic;margin-top:4px;}

/* ===== Confirm Bar (removed — back button now in breadcrumb row) ===== */

/* ===== Search Input ===== */
.search-wrap{margin-bottom:14px;position:relative;}
.search-input{width:100%;padding:10px 14px 10px 36px;border:2px solid var(--border);border-radius:6px;font-size:14px;font-family:'Crimson Text',serif;background:var(--parchment-light);color:var(--ink);transition:all .2s;}
.search-input:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 3px var(--crimson-glow);}
.search-input::placeholder{color:var(--gold-dim);font-style:italic;}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gold-dim);font-size:14px;pointer-events:none;}

/* ===== Section Headings ===== */
.section-heading{text-align:center;padding:32px 20px 24px;margin-bottom:20px;}
.section-heading-title{font-family:'Cinzel',serif;font-size:32px;font-weight:900;color:var(--crimson);letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 12px rgba(220,38,38,.3);margin:0;}
.section-heading-divider{width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--crimson),transparent);margin:14px auto;border-radius:2px;}
.section-heading-text{font-size:17px;color:var(--ink-mid);max-width:680px;margin:0 auto;line-height:1.7;}

/* ===== Text Input Form ===== */
.text-form{display:flex;flex-direction:column;gap:20px;}
.text-form-field{}
.field-explanation{font-size:13px;color:var(--ink-mid);font-style:italic;margin-bottom:6px;line-height:1.4;}
.field-textarea{resize:vertical;min-height:60px;}
.field-textarea-large{min-height:120px;}
.required-mark{color:var(--crimson);}

/* ===== Ability Score Mode Toggle ===== */
.ability-mode-toggle{display:flex;justify-content:center;gap:0;margin-bottom:20px;border-radius:8px;overflow:hidden;border:1px solid var(--border);max-width:320px;margin-left:auto;margin-right:auto;}
.ability-mode-btn{flex:1;padding:10px 16px;background:var(--parchment-light);border:none;color:var(--gold-dim);font-family:'Cinzel',serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;letter-spacing:.5px;}
.ability-mode-btn:first-child{border-right:1px solid var(--border);}
.ability-mode-btn:hover:not(.active){background:rgba(220,38,38,.06);color:var(--ink);}
.ability-mode-btn.active{background:var(--crimson);color:#fff;}

/* ===== Roll Instructions ===== */
.roll-instructions{list-style:disc;padding-left:24px;margin:8px 0 12px;text-align:left;}
.roll-instructions li{margin:4px 0;font-size:13px;line-height:1.5;}
.roll-instructions li:first-child{font-weight:700;color:var(--crimson);list-style:none;margin-left:-24px;font-size:14px;}

/* ===== Manual Entry ===== */
.manual-entry-area{margin-top:8px;}
.manual-score-input{width:72px;height:48px;background:var(--parchment-light);border:2px solid var(--border);border-radius:6px;text-align:center;font-family:'Cinzel',serif;font-size:28px;font-weight:900;color:var(--ink);margin:4px 0;outline:none;transition:border-color .2s;-moz-appearance:textfield;}
.manual-score-input::-webkit-outer-spin-button,.manual-score-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.manual-score-input:focus{border-color:var(--crimson);box-shadow:0 0 0 2px rgba(220,38,38,.3);}
.manual-score-input::placeholder{color:var(--gold-dim);font-size:24px;}

/* ===== Ability Score Roller ===== */
.ability-roller{margin-top:8px;}
.roll-slots{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.roll-slot{width:80px;height:80px;background:var(--parchment-light);border:2px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:28px;font-weight:900;color:var(--gold-dim);transition:all .2s;}
.roll-slot.rolling{border-color:var(--crimson);color:var(--crimson);animation:rollPulse .15s infinite alternate;}
.roll-slot.rolled{border-color:var(--crimson);color:var(--ink);}
/* Once all 6 rolls have landed, the slots become the drag sources — no
   separate chip row underneath. Interactive states below are only active
   when the parent .roll-slots has .assignable. */
.roll-slots.assignable .roll-slot[draggable="true"]{cursor:grab;background:var(--crimson);color:#fff;border-color:var(--crimson);box-shadow:0 2px 8px rgba(220,38,38,.4);user-select:none;touch-action:none;}
.roll-slots.assignable .roll-slot[draggable="true"]:active{cursor:grabbing;transform:scale(.96);}
.roll-slots.assignable .roll-slot.used{opacity:.25;cursor:default;background:var(--border);color:var(--ink-mid);border-color:var(--border);box-shadow:none;}
.roll-slots.assignable .roll-slot.selected{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--crimson);transform:scale(1.08);}
@media (hover: hover) {
  .roll-slots.assignable .roll-slot[draggable="true"]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(220,38,38,.5);}
}
@keyframes rollPulse{from{transform:scale(.95);}to{transform:scale(1.05);}}

.assignment-area{margin-top:8px;}
/* Legacy .score-chip rules — kept as a no-op shim in case anything else in
   the codebase still references them. Ability-score assignment now uses
   .roll-slot drag sources directly. */
.score-chips{display:none;}

.ability-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
.ability-slot{background:var(--parchment-light);border:2px dashed var(--border);border-radius:8px;padding:16px 8px;text-align:center;min-height:120px;transition:all .2s;cursor:pointer;}
.ability-slot:hover{border-color:var(--crimson);background:rgba(220,38,38,.04);}
.ability-slot.filled{border-style:solid;border-color:var(--crimson);background:rgba(220,38,38,.06);}
/* Drop-hover highlight used by the touch-drag fallback (it can't rely on
   :hover on phone). Also fires on desktop during native HTML5 drag-over
   if we ever want to, but currently only the touch path toggles it. */
.ability-slot.drop-hover{border-color:var(--crimson-hover,#EF4444);background:rgba(220,38,38,.12);transform:scale(1.02);box-shadow:0 0 0 3px rgba(220,38,38,.2);}
.ability-slot-label{font-family:'Cinzel',serif;font-size:18px;font-weight:900;color:var(--crimson);letter-spacing:2px;}
.ability-slot-full-label{font-family:'Crimson Text',serif;font-size:11px;color:var(--gold-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;}
.ability-slot-value{font-family:'Cinzel',serif;font-size:32px;font-weight:900;color:#fff;margin:4px 0;}
.ability-slot-bonus{font-size:11px;color:var(--crimson);font-family:'Cinzel',serif;letter-spacing:.3px;}
.ability-slot-total{font-size:16px;color:var(--gold);margin-top:4px;font-family:'Cinzel',serif;font-weight:700;}
.ability-mod{font-size:13px;color:var(--gold-dim);font-weight:400;}

/* ===== Character Counter ===== */
.char-counter{text-align:right;font-size:11px;color:var(--gold-dim);margin-top:2px;font-family:'Crimson Text',serif;}
.char-counter-warn{color:var(--gold);}
.char-counter-full{color:var(--crimson);}

/* ===== Character Sheet ===== */
.summary-toolbar{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.feat-mode-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-right:8px;}
.feat-mode-toggle .feat-mode-label{font-weight:600;color:#58180d;}
.feat-mode-toggle label{cursor:pointer;display:inline-flex;align-items:center;gap:2px;}
.feat-mode-toggle label.feat-mode-disabled{opacity:.35;cursor:default;text-decoration:line-through;}
.page-size-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-right:8px;}
.page-size-toggle .feat-mode-label{font-weight:600;color:#58180d;}
.page-size-select{padding:3px 6px;border:1px solid #c4a97d;border-radius:4px;font-family:'Crimson Text',serif;font-size:13px;background:#fef6e4;color:#58180d;cursor:pointer;}
.character-sheet{background:#fdf1dc;border:2px solid #58180d;border-radius:0;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.3);color:#000;font-family:'Crimson Text',serif;font-size:12px;line-height:1.35;max-width:7.5in;margin:0 auto;overflow:hidden;}
[contenteditable]{outline:none;cursor:text;}
[contenteditable]:hover{background:rgba(88,24,13,.05);}
[contenteditable]:focus{background:rgba(88,24,13,.08);box-shadow:0 0 0 1px rgba(88,24,13,.3);}

/* Header */
.cs-header-row{display:flex;gap:12px;border-bottom:3px solid #58180d;padding-bottom:10px;margin-bottom:12px;align-items:flex-end;}
.cs-name-box{flex:1;min-width:0;}
.cs-name{font-family:'Cinzel',serif;font-size:22px;font-weight:900;color:#58180d;letter-spacing:1px;border-bottom:1px solid #999;padding-bottom:2px;min-height:28px;text-transform:uppercase;}
.cs-field-label{font-size:11px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;font-family:'Cinzel',serif;}
.cs-header-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:2;}
.cs-header-field{border:1px solid #999;border-radius:3px;padding:3px 6px;text-align:center;}
.cs-header-val{font-size:17px;font-weight:700;color:#000;min-height:18px;}

/* Ability Scores Row (horizontal across top) */
.cs-abilities-row{display:flex;justify-content:space-between;gap:6px;margin-bottom:8px;border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;}

/* Three-column body */
.cs-body{display:grid;grid-template-columns:180px 1fr 260px;gap:10px;margin-top:0;}
/* At tablet / phone-landscape widths (>740 but still narrow), the fixed 180px
   left + 260px right columns leave the center strip (attacks, HP, equipment,
   pack) crushed to ~120-200px. Stack to single column at <=900px so the
   middle gets full width before the 740px breakpoint catches it and handles
   the abilities row / header layout too. */
@media(max-width:900px){
  .cs-body{grid-template-columns:1fr;gap:12px;}
  .cs-col-center{order:-1;}
}

/* Left column - abilities, saves, skills */
.cs-col-left{display:flex;flex-direction:column;gap:6px;min-width:0;}
.cs-col-center{min-width:0;}
.cs-col-right{min-width:0;}
.cs-ability-block{display:flex;flex-direction:column;align-items:center;border:2px solid #58180d;border-radius:4px;padding:3px 4px 2px;background:transparent;position:relative;flex:1;min-width:0;}
.cs-ability-label{font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:#58180d;letter-spacing:.5px;text-transform:uppercase;}
.cs-ability-mod{font-family:'Cinzel',serif;font-size:18px;font-weight:900;color:#000;line-height:1;min-width:30px;text-align:center;}
.cs-ability-score-circle{width:24px;height:24px;border:2px solid #58180d;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#fdf1dc;margin-top:1px;}

/* Stat rows */
.cs-stat-row{display:flex;align-items:center;gap:6px;padding:3px 0;}
.cs-circle-sm{width:24px;height:24px;min-width:24px;border:2px solid #58180d;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#fef6e4;}
.cs-circle-sm.cs-filled{background:#fef6e4;}
.cs-stat-label{font-size:12px;color:#333;font-weight:600;}

/* Proficiencies box */
.cs-prof-box{font-size:11px;line-height:1.4;flex:1;}
.cs-prof-row{margin:2px 0;}
.cs-prof-label{font-weight:700;color:#58180d;}
.cs-prof-subsection{margin-bottom:3px;}
.cs-prof-subsection:last-of-type{margin-bottom:0;}
.cs-prof-subsection-heading{font-weight:700;color:#58180d;font-size:11px;outline:none;}
.cs-prof-inline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;}
.cs-prof-inline .cs-prof-subsection-heading{display:inline;white-space:nowrap;margin-right:3px;}
.cs-prof-inline .cs-prof-item{display:inline;position:relative;padding:0;font-size:11px;outline:none;min-height:auto;}
.cs-prof-inline .cs-prof-item + .cs-prof-item::before{content:', ';white-space:pre;}
.cs-prof-inline .cs-prof-item:hover{background:rgba(88,24,13,.08);border-radius:2px;}
.cs-prof-inline .cs-prof-item:hover .cs-module-remove{opacity:1;}
.cs-prof-inline .cs-module-remove{position:relative;right:auto;top:auto;transform:none;display:none;font-size:10px;vertical-align:super;margin-left:1px;}
.cs-prof-inline .cs-prof-item:hover .cs-module-remove{display:inline;}
.cs-prof-inline .cs-add-module-btn{display:none;margin:0;border:none;padding:0 2px;font-size:11px;color:#7a6840;cursor:pointer;font-family:inherit;letter-spacing:0;text-transform:none;border-radius:2px;}
.cs-prof-inline .cs-add-module-btn:hover{color:#58180d;background:rgba(88,24,13,.08);}
.cs-prof-inline:hover .cs-add-module-btn{display:inline;}
.cs-prof-item{position:relative;padding:1px 0;font-size:11px;outline:none;min-height:13px;}
.cs-prof-name{display:inline;outline:none;font-size:11px;min-height:auto;}
.cs-prof-item:hover .cs-module-remove{opacity:1;}

/* Coin Purse & Pockets */
.cs-pocket-row{display:flex;gap:6px;flex:0 0 auto;}
.cs-pocket-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;flex:1;display:flex;flex-direction:column;}
.cs-pocket-title{font-family:'Cinzel',serif;font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;color:#58180d;border-bottom:1px solid #c4a97d;padding-bottom:3px;margin-bottom:4px;}
.cs-pocket-divider{display:none;}
.cs-pocket-content{font-size:12px;line-height:1.5;white-space:pre-wrap;flex:1;min-height:20px;}

/* Coin list in purse/bag */
.cs-coin-list{display:flex;flex-direction:column;gap:1px;}
.cs-coin-row{display:flex;align-items:baseline;gap:3px;padding:1px 0;}
.cs-coin-qty{cursor:pointer;font-size:inherit;font-weight:inherit;font-family:inherit;flex:0 0 auto;}
.cs-coin-qty:hover{text-decoration:underline;}
.cs-coin-label{font-size:11px;color:#58180d;font-weight:600;white-space:nowrap;}
.cs-coin-label[data-help]{cursor:help;}
.cs-coin-add-btn{font-size:11px;color:#7a6840;cursor:pointer;text-align:center;padding:2px 0;opacity:0;transition:opacity .15s;position:relative;}
.cs-coin-purse-box:hover .cs-coin-add-btn,.cs-pocket-box:hover .cs-coin-add-btn{opacity:1;}
.cs-coin-capacity{font-size:9px;color:#999;text-align:right;margin-top:2px;}
.cs-coin-dropdown{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#2a1810;border:1px solid #8b4513;border-radius:6px;padding:4px 0;min-width:160px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.4);}
.cs-coin-dropdown-item{padding:6px 12px;font-size:12px;color:#e8d5b7;cursor:pointer;font-family:'Crimson Text',serif;white-space:nowrap;}
.cs-coin-dropdown-item:hover{background:rgba(255,255,255,.1);}

/* Box groups (saving throws, skills) */
.cs-box-group{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;}
.cs-box-title{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #58180d;padding-bottom:3px;margin-bottom:4px;}
.cs-skill-row{display:flex;align-items:center;gap:4px;padding:1px 0;font-size:12px;}
.cs-dot{width:8px;height:8px;min-width:8px;border:1.5px solid #58180d;border-radius:50%;background:transparent;cursor:pointer;transition:background .15s;}
.cs-dot-filled{background:#58180d;}
.cs-dot-double{background:#58180d;box-shadow:0 0 0 2px #fef6e4,0 0 0 4px #58180d;}
.cs-skill-mod{font-weight:700;min-width:20px;text-align:right;font-size:12px;}
.cs-skill-name{font-size:12px;color:#000;}
.cs-skill-ab{font-size:10px;color:#666;}
.cs-skill-disadv{color:#dc2626;font-size:8px;font-weight:700;margin-left:auto;padding-right:2px;letter-spacing:.5px;cursor:help;}
.cs-armor-disadv{color:#dc2626;font-size:7px;font-weight:700;text-align:center;letter-spacing:.5px;margin-top:-2px;cursor:help;}

/* Center column - combat, HP, attacks, equipment */
.cs-col-center{display:flex;flex-direction:column;gap:8px;}
.cs-combat-row{display:flex;gap:6px;}
.cs-combat-box{flex:1;border:2px solid #58180d;border-radius:5px;text-align:center;padding:0;background:#fef6e4;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.cs-combat-box .cs-field-label{background:#e8d5b7;padding:2px 4px;margin-top:0;}
.cs-combat-val{font-family:'Cinzel',serif;font-size:16px;font-weight:900;color:#000;min-height:18px;line-height:1;flex:1;display:flex;align-items:center;justify-content:center;padding:4px 3px;}
.cs-speed-warn .cs-combat-val{color:#dc2626;}
.cs-speed-warn .cs-field-label{color:#dc2626;}
.cs-combat-val-sm{font-family:'Cinzel',serif;font-size:14px;font-weight:900;color:#000;text-align:center;}
.cs-hp-val{font-family:'Cinzel',serif;font-size:22px;font-weight:900;color:#000;text-align:center;}

/* HP quad row — Hit Dice, Death Saves, Current HP, Temp HP all equal */
.cs-hp-quad{display:flex;gap:6px;}
.cs-hp-quad-box{flex:1;border:2px solid #58180d;border-radius:5px;background:#fef6e4;padding:0;overflow:hidden;text-align:center;}
.cs-hp-quad-box .cs-hp-label{font-size:10px;font-weight:700;color:#58180d;background:#e8d5b7;padding:2px 4px;}
.cs-hp-quad-box .cs-hp-content{padding:4px 3px;min-height:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;}

/* Death saves */
.cs-combat-val:has(.cs-death-row){flex-direction:column;}
.cs-death-row{display:flex;align-items:center;gap:4px;justify-content:center;margin:2px 0;}
.cs-death-label{font-size:11px;font-weight:700;color:#000;width:10px;}
.cs-death-circles{display:flex;gap:3px;}
.cs-death-circle{width:10px;height:10px;border:1.5px solid #000;border-radius:50%;background:transparent;cursor:pointer;transition:background .15s;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.cs-death-circle.filled{background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}

/* Attacks */
.cs-attacks-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;}
.cs-attack-table{font-size:12px;}
.cs-attack-header{display:grid;grid-template-columns:2fr 1fr 2fr;gap:4px;font-weight:700;color:#58180d;border-bottom:1px solid #58180d;padding-bottom:2px;margin-bottom:3px;font-size:11px;text-transform:uppercase;}
.cs-attack-row{display:grid;grid-template-columns:2fr 1fr 2fr;gap:4px;padding:2px 0;border-bottom:1px solid #ddd;position:relative;cursor:pointer;}
.cs-attack-row:hover{background:rgba(196,169,125,.08);}
.cs-attack-row:hover .cs-module-remove{opacity:1;}
.cs-attack-row span{min-height:14px;}

/* Equipment + Bag column */
.cs-equip-bag-row{display:flex;flex-direction:column;gap:6px;flex:1;}
.cs-equip-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;flex:1;position:relative;}
.cs-equip-list{font-size:12px;min-height:80px;line-height:1.4;}
.cs-equip-item{display:flex;align-items:baseline;gap:2px;padding:1px 0;border-bottom:1px solid #e8d5b7;position:relative;}
.cs-equip-item .cs-module-remove{right:0;top:50%;}
.cs-equip-item:hover .cs-module-remove{opacity:1;}
.cs-equip-item:last-child{border-bottom:none;}
.cs-equip-item-name{flex:0 1 auto;min-width:0;overflow-wrap:break-word;word-break:break-word;}
.cs-equip-item-stats{font-size:10px;color:#7a6840;font-style:italic;text-align:right;flex:1 1 0;min-width:0;margin-left:auto;overflow-wrap:break-word;word-break:break-word;}

/* Inventory qty badge */
.cs-equip-qty{font-size:inherit;font-weight:inherit;font-family:inherit;opacity:1;margin-right:2px;margin-left:0;flex:0 0 auto;user-select:none;}
.cs-equip-qty:hover{opacity:1;text-decoration:underline;}
.cs-qty-inline-edit{width:44px;font-size:11px;border:1px solid #c4a97d;border-radius:3px;padding:1px 3px;background:#fef6e4;color:#333;text-align:center;}
.cs-equip-item-name:empty::before{content:attr(data-placeholder);color:#aaa;font-style:italic;}

/* Equipped item glow */
.cs-equip-item.cs-equipped{box-shadow:inset 0 0 0 1px #c4a97d,0 0 6px rgba(196,169,125,.35);background:rgba(196,169,125,.08);border-radius:3px;}

/* Qty remove prompt overlay */
.cs-qty-prompt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999;}
.cs-qty-prompt{background:#2a1810;border:2px solid #8b4513;border-radius:8px;padding:20px 24px;color:#e8d5b7;min-width:280px;text-align:center;font-family:'Cinzel',serif;}
.cs-qty-prompt-title{font-size:14px;margin-bottom:14px;font-weight:600;}
.cs-qty-slider-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:0 4px;}
.cs-qty-slider-label{font-size:13px;opacity:.7;min-width:20px;text-align:center;}
.cs-qty-slider{flex:1;-webkit-appearance:none;appearance:none;height:20px;background:transparent;outline:none;cursor:pointer;}
.cs-qty-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:#1a0e08;}
.cs-qty-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#c4a97d;border:2px solid #8b4513;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);margin-top:-7px;}
.cs-qty-slider::-moz-range-track{height:6px;border-radius:3px;background:#1a0e08;}
.cs-qty-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#c4a97d;border:2px solid #8b4513;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4);}
.cs-qty-slider-value{font-size:13px;margin-bottom:16px;opacity:.85;}
.cs-qty-slider-value strong{color:#c4a97d;font-size:16px;}
.cs-qty-prompt-btns{display:flex;gap:8px;justify-content:center;}
.cs-qty-btn-cancel,.cs-qty-btn-confirm{padding:6px 14px;border:1px solid #8b4513;border-radius:4px;cursor:pointer;font-size:12px;font-family:'Cinzel',serif;}
.cs-qty-btn-cancel{background:transparent;color:#e8d5b7;}
.cs-qty-btn-cancel:hover{background:rgba(255,255,255,.1);}
.cs-qty-btn-confirm{background:#8b4513;color:#fff;}
.cs-qty-btn-confirm:hover{background:#a0522d;}

/* Bag item list (inventory-backed) — 2-column layout */
.cs-bag-list{font-size:12px;line-height:1.5;flex:1;min-height:60px;columns:2;column-gap:12px;column-rule:1px solid #c4a97d;}
.cs-bag-list .cs-equip-item{break-inside:avoid;border-bottom-color:#c4a97d;}
.cs-bag-list .cs-equip-item-name{font-size:12px;}
.cs-bag-list .cs-add-module-btn{column-span:all;}

/* Bag / Backpack box */
.cs-bag-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;flex:2;display:flex;flex-direction:column;position:relative;}
.cs-bag-divider{display:none;}
.cs-bag-title{font-family:'Cinzel',serif;font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;color:#58180d;border-bottom:1px solid #c4a97d;padding-bottom:4px;margin-bottom:4px;min-height:18px;}
.cs-bag-title:empty::before{content:attr(data-placeholder);color:#aaa;font-style:italic;}
.cs-bag-contents{font-size:12px;line-height:1.5;white-space:pre-wrap;flex:1;min-height:60px;columns:2;column-gap:12px;column-rule:1px solid #c4a97d;}
.cs-bag-contents:empty::before{content:attr(data-placeholder);color:#aaa;font-style:italic;}

/* Right column - personality, features */
.cs-col-right{display:flex;flex-direction:column;gap:6px;}
.cs-personality-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;}
.cs-personality-text{font-size:12px;min-height:30px;white-space:pre-wrap;line-height:1.4;}
.cs-features-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;flex:1;overflow:hidden;}
.cs-features-text{font-size:12px;white-space:pre-wrap;min-height:80px;line-height:1.4;overflow:hidden;}
.cs-features-text strong{color:#000;}
.cs-feat-section-title{color:#58180d !important;font-size:1.05em;}
.cs-features-box .cs-feat-section-title{color:#58180d !important;}

/* Help popup system */
[data-help]{cursor:help;}
.cs-help-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9998;background:rgba(0,0,0,0.3);}
.cs-help-popup{position:fixed;z-index:9999;background:#fdf1dc;border:2px solid #58180d;border-radius:8px;padding:14px 18px;max-width:340px;min-width:200px;box-shadow:0 4px 20px rgba(0,0,0,0.3);font-family:'Crimson Text',serif;font-size:13px;line-height:1.5;color:#1a1a1a;animation:cs-help-in .15s ease-out;}
.cs-help-popup-title{font-family:'Cinzel',serif;font-size:13px;font-weight:700;color:#58180d;margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #c4a97d;padding-bottom:4px;}
.cs-help-popup-body{font-size:12.5px;}
.cs-help-popup-body b{color:#58180d;}
.cs-help-popup-calc{background:#e8d5b7;border-radius:4px;padding:4px 8px;margin:6px 0 2px;font-family:'Courier New',monospace;font-size:12px;font-weight:700;color:#3a2a0a;text-align:center;}
@keyframes cs-help-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* Detail popup (item/feature click) — extends help popup */
.cs-detail-popup{max-width:400px;}
.cs-detail-popup-footer{margin-top:10px;padding-top:8px;border-top:1px solid #c4a97d;text-align:right;}
.cs-detail-delete-btn{background:#dc2626;color:#fff;border:none;border-radius:4px;padding:5px 14px;font-family:'Cinzel',serif;font-size:11px;cursor:pointer;letter-spacing:.5px;transition:background .15s;}
.cs-detail-delete-btn:hover{background:#b91c1c;}
.cs-detail-desc-edit{width:100%;min-height:60px;border:1px solid #c4a97d;border-radius:4px;padding:6px 8px;font-family:'Crimson Text',serif;font-size:12px;resize:vertical;background:#fef9ef;box-sizing:border-box;}
/* Clickable rows — pointer on non-editable areas */
.cs-attack-row,.cs-equip-item,.cs-skill-row,.cs-prof-item{cursor:pointer;}
.cs-attack-row [contenteditable],.cs-equip-item [contenteditable],.cs-skill-row [contenteditable],.cs-prof-item [contenteditable]{cursor:text;}

/* Spellcasting section */
.cs-spell-section{border:2px solid #58180d;border-radius:5px;padding:8px 10px;background:#fef6e4;margin-top:10px;}
.cs-spell-header{display:flex;gap:10px;border-bottom:1px solid #58180d;padding-bottom:6px;margin-bottom:6px;}
.cs-spell-stat{flex:1;text-align:center;}
.cs-spell-stat-val{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:#000;min-height:18px;}
.cs-spell-group{margin-bottom:6px;}
.cs-spell-level{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:#58180d;text-transform:uppercase;margin-bottom:3px;}
.cs-spell-list{font-size:12px;line-height:1.5;min-height:16px;}

/* Backstory */
.cs-backstory-section{border:2px solid #58180d;border-radius:5px;padding:8px 10px;background:#fef6e4;margin-top:10px;}
.cs-backstory-text{font-size:12px;white-space:pre-wrap;min-height:40px;line-height:1.5;}

/* ===== Spell Page (Page 2) ===== */
.cs-spell-page{background:#fdf1dc;border:2px solid #58180d;padding:20px;color:#000;font-family:'Crimson Text',serif;font-size:12px;line-height:1.35;max-width:7.5in;margin:20px auto 0;}
.cs-sp-header{border-bottom:3px solid #58180d;padding-bottom:10px;margin-bottom:12px;}
.cs-sp-title{font-family:'Cinzel',serif;font-size:20px;font-weight:900;color:#58180d;text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.cs-sp-body{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cs-sp-level-box{border:2px solid #58180d;border-radius:5px;padding:6px 8px;background:#fef6e4;}
.cs-sp-level-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #58180d;padding-bottom:4px;margin-bottom:4px;}
.cs-sp-level-name{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;}
.cs-sp-slots{font-size:12px;color:#58180d;display:flex;align-items:center;gap:3px;}
.cs-sp-slot-circle{width:12px;height:12px;border:1.5px solid #58180d;border-radius:50%;background:transparent;display:inline-block;}
.cs-sp-slot-none{color:#999;font-size:11px;}
.cs-sp-spell-row{display:flex;align-items:center;gap:4px;padding:1px 0;border-bottom:1px solid #e8d5b7;min-height:18px;}
.cs-sp-prep-check{font-size:12px;color:#58180d;min-width:14px;text-align:center;cursor:pointer;user-select:none;transition:color .12s,transform .12s;}
.cs-sp-prep-check:hover{color:#8b1d10;transform:scale(1.15);}
.cs-sp-prep-check.cs-sp-prep-checked{color:#58180d;}
.cs-sp-spell-name{font-size:12px;color:#000;flex:1;min-height:14px;outline:none;}
.cs-sp-spell-name:empty::before{content:'';display:block;border-bottom:1px dotted #ccc;height:14px;}

/* ===== Ki Page (Monk) / Metamagic Page (Sorcerer) ===== */
.cs-ki-page,.cs-metamagic-page,.cs-custom-resource-page{background:#fdf1dc;border:2px solid #58180d;padding:20px;color:#000;font-family:'Crimson Text',serif;font-size:12px;line-height:1.35;max-width:7.5in;margin:20px auto 0;}
.cs-ki-points-row{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid #58180d;}
.cs-ki-points-label{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;min-width:110px;}
.cs-ki-points{display:flex;flex-wrap:wrap;gap:4px;}
.cs-ki-body{margin-top:10px;}
.cs-ki-col-header{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:2px solid #58180d;font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;}
.cs-ki-ability-row{display:flex;align-items:flex-start;gap:6px;padding:3px 0;border-bottom:1px solid #e8d5b7;min-height:20px;}
.cs-ki-cost-col{min-width:50px;max-width:50px;text-align:center;font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#58180d;outline:none;}
.cs-ki-name-col{min-width:160px;max-width:160px;font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:#58180d;outline:none;}
.cs-ki-desc-col{font-size:11px;color:#333;flex:1;min-height:14px;outline:none;}
.cs-ki-cost-col:empty::before,.cs-ki-name-col:empty::before,.cs-ki-desc-col:empty::before{content:'';display:block;border-bottom:1px dotted #ccc;height:14px;}

/* ===== Spell Preparation Reference (Page 3+) ===== */
.cs-prep-sheet{background:#fdf1dc;border:2px solid #58180d;padding:20px;color:#000;font-family:'Crimson Text',serif;font-size:11px;line-height:1.35;max-width:7.5in;margin:20px auto 0;}
.cs-prep-header{border-bottom:3px solid #58180d;padding-bottom:8px;margin-bottom:12px;text-align:center;}
.cs-prep-title{font-family:'Cinzel',serif;font-size:18px;font-weight:900;color:#58180d;letter-spacing:2px;text-transform:uppercase;}
.cs-prep-howto{background:#fef6e4;border:2px solid #58180d;border-radius:5px;padding:10px 14px;margin-bottom:14px;}
.cs-prep-howto .cs-box-title{margin-bottom:6px;}
.cs-prep-rules{font-size:11px;line-height:1.5;color:#333;}
.cs-prep-rules p{margin:4px 0;}
.cs-prep-rules strong{color:#58180d;}
.cs-prep-spell-heading{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:#58180d;text-align:center;margin:16px 0 12px;padding:6px 0;border-top:2px solid #58180d;border-bottom:2px solid #58180d;text-transform:uppercase;letter-spacing:1px;}
.cs-prep-level{margin-bottom:10px;}
.cs-prep-level-title{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #58180d;padding-bottom:3px;margin-bottom:4px;}
.cs-prep-table{width:100%;border-collapse:collapse;font-size:11px;line-height:1.3;}
.cs-prep-table thead{background:#e8d5b7;}
.cs-prep-table th{font-family:'Cinzel',serif;font-size:10px;font-weight:700;color:#58180d;text-transform:uppercase;letter-spacing:.3px;padding:3px 4px;text-align:left;border-bottom:1px solid #58180d;}
.cs-prep-table td{padding:2px 4px;border-bottom:1px solid #e8d5b7;vertical-align:top;}
.cs-prep-spell-name{font-weight:700;color:#000;white-space:nowrap;}
.cs-prep-desc{color:#444;}
.cs-prep-desc-wide{}

/* How to Play / Spell Reference sheets */
.cs-howto-sheet .cs-prep-howto{margin-bottom:10px;}
.cs-howto-sheet .cs-prep-rules p{margin:3px 0;font-size:12px;line-height:1.45;}

/* ===== Print Inventory Notification ===== */
.cs-print-notice{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:10000;align-items:center;justify-content:center;}
.cs-print-notice.show{display:flex;}
.cs-print-notice-box{background:#fdf1dc;border:3px solid #58180d;border-radius:8px;padding:24px 28px;max-width:440px;width:90%;color:#1c1008;font-family:'Crimson Text',serif;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.cs-print-notice-box p{font-size:14px;line-height:1.6;margin:0 0 16px;}
.cs-print-notice-check{display:flex;align-items:center;gap:8px;margin-bottom:18px;cursor:pointer;font-size:13px;color:#58180d;font-weight:600;}
.cs-print-notice-check input[type="checkbox"]{width:16px;height:16px;accent-color:#58180d;cursor:pointer;}
.cs-print-notice-btns{display:flex;gap:10px;justify-content:flex-end;}
.cs-print-notice-btns button{border:none;border-radius:5px;padding:8px 20px;font-family:'Cinzel',serif;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s;}
.cs-print-notice-btns .btn-print-ok{background:#58180d;color:#fff;}
.cs-print-notice-btns .btn-print-ok:hover{background:#7a200d;}
.cs-print-notice-btns .btn-print-cancel{background:#e8d5b7;color:#58180d;}
.cs-print-notice-btns .btn-print-cancel:hover{background:#d4c4a0;}

/* ===== Spellcasting 101 ===== */
.cs-spell-formula{font-family:'Courier New',monospace;font-size:12px;background:#e8d5b7;padding:4px 8px;border-radius:3px;display:inline-block;margin:4px 0;color:#58180d;font-weight:700;}

/* ===== Print Styles ===== */
@media print{
  @page{size:letter;margin:0.25in;}
  .app-header,.breadcrumb-row,.summary-toolbar,.section-heading,.step-title,.step-subtitle,.cs-print-notice,.sb-navbar,.sb-topbar,.sb-sidebar-mini,.sb-sidebar-expanded,.sb-bottom-nav,.sb-chat-bubble,.sb-chat-panel,footer,.cs-add-module-btn,.cs-module-remove,.cs-autocomplete-dropdown,.cs-gm-edit-bar,.feat-mode-btns,.cs-coin-add-btn,.cs-coin-capacity{display:none !important;}
  .cs-inventory-hide-print .cs-inventory{display:none !important;}
  .cs-inventory-hide-print .cs-bag-divider,.cs-inventory-hide-print .cs-pocket-divider{display:block !important;border-bottom:1px solid #000;margin-top:16px;margin-bottom:4px;}
  .cs-inventory-hide-print .cs-equip-box::after,.cs-inventory-hide-print .cs-bag-box::after{content:'';position:absolute;left:50%;top:8px;bottom:8px;border-left:1px solid #999;pointer-events:none;}
  .cs-inventory-hide-print .cs-equip-box,.cs-inventory-hide-print .cs-bag-box{flex:1 1 auto!important;}
  .wizard-container{padding:0 !important;margin:0 !important;max-width:100%;}
  .step-card{box-shadow:none;border:none;padding:0;margin:0;background:transparent;}
  body{background:#fff;color:#000;font-size:9pt;margin:0 !important;padding:0 !important;}
  .cs-equip-item.cs-equipped{box-shadow:none;background:transparent;}.cs-equip-item.cs-equipped::after{display:none;}
  .character-sheet{background:#fff;border:2px solid #000;box-shadow:none;padding:10px 14px;width:8.0in;height:10.5in;max-width:none;overflow:hidden;margin:0;box-sizing:border-box;}
  .cs-spell-page,.cs-ki-page,.cs-metamagic-page,.cs-custom-resource-page,.cs-prep-sheet,.cs-spell-ref-sheet,.cs-howto-sheet,.cs-custom-page{background:#fff;border:2px solid #000;box-shadow:none;padding:16px;max-width:7.5in;overflow:hidden;margin:0 auto;}
  .cs-ability-block,.cs-combat-box,.cs-hp-quad-box,.cs-attacks-box,.cs-equip-box,.cs-bag-box,.cs-pocket-box,.cs-personality-box,.cs-features-box,.cs-spell-section,.cs-backstory-section,.cs-box-group,.cs-abilities-row,.cs-sp-level-box,.cs-prep-howto{background:#fff;border-color:#000;}
  .cs-header-row{border-color:#000;}
  .cs-header-field{border-color:#666;}
  .cs-name{color:#000;}
  .cs-field-label,.cs-box-title,.cs-bag-title,.cs-pocket-title,.cs-ability-label,.cs-spell-level,.cs-death-label,.cs-sp-level-name,.cs-sp-title,.cs-prep-title,.cs-prep-level-title,.cs-prep-spell-heading{color:#000;}
  .cs-prep-spell-heading{border-color:#000;}
  .cs-hp-max,.cs-hp-quad-box .cs-hp-label,.cs-prep-table thead{background:#eee;color:#000;}
  .cs-dot{border-color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cs-dot-filled{background:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cs-dot-double{background:#000;box-shadow:0 0 0 2px #fff,0 0 0 4px #000;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .cs-ability-score-circle{border-color:#000;background:#fff;}
  .cs-spell-formula{background:#eee;color:#000;}
  .cs-sp-slot-circle{border-color:#000;}
  .cs-ki-cost-col,.cs-ki-name-col,.cs-ki-points-label,.cs-ki-col-header{color:#000;}
  .cs-ki-points-row,.cs-ki-col-header{border-color:#000;}
  .cs-sp-header,.cs-prep-header{border-color:#000;}
  .cs-prep-rules strong,.cs-prep-spell-name,.cs-prep-table th,.cs-sp-prep-check{color:#000;}
  [contenteditable]{outline:none;background:transparent !important;box-shadow:none !important;}
  [contenteditable]:hover,[contenteditable]:focus{background:transparent !important;box-shadow:none !important;}
  [data-placeholder]:empty::before{display:none !important;}
  .character-sheet{page-break-after:always;display:flex;flex-direction:column;}
  .character-sheet .cs-body{flex:1;min-height:0;grid-template-columns:200px 1fr 280px;grid-template-rows:1fr;gap:10px;align-content:stretch;}
  /* Print width (~768px at letter-0.25") trips the <=900px responsive
     breakpoint, which sets cs-col-center { order:-1 } to stack the
     center column on top in mobile view. That `order` property
     survives into print and visually swaps the left and center
     columns. Force everything back to source order so saves/skills
     stay left and attacks/AC/HP stay center when printing. */
  .character-sheet .cs-col-left,.character-sheet .cs-col-center,.character-sheet .cs-col-right{gap:4px;min-height:0;overflow:hidden;order:0!important;}
  .character-sheet .cs-equip-box,.character-sheet .cs-bag-box,.character-sheet .cs-features-box{flex:1;min-height:0;overflow:hidden;}
  .character-sheet .cs-features-text{overflow:hidden;flex:1;min-height:0;}
  .character-sheet .cs-personality-box{flex-shrink:1;overflow:hidden;}
  .character-sheet .cs-personality-text{max-height:65px;overflow:hidden;font-size:10px;line-height:1.3;}
  /* Equipment + Bag side by side in print to save vertical space */
  .character-sheet .cs-equip-bag-row{flex-direction:column;gap:3px;flex:1 1 auto;}
  .character-sheet .cs-equip-box{flex:0 0 auto;max-height:none;padding:4px 6px;min-height:0!important;}
  .character-sheet .cs-bag-box{flex:1 1 auto;max-height:none;padding:4px 6px;min-height:0!important;}
  .character-sheet .cs-bag-list{columns:2;font-size:11px;line-height:1.35;max-height:none;overflow:hidden;}
  .character-sheet .cs-equip-list{font-size:11px;line-height:1.35;}
  .character-sheet .cs-equip-item{gap:2px;padding:1px 0;}
  .character-sheet .cs-equip-item-stats{font-size:9px;}
  .character-sheet .cs-bag-title{font-size:10px;padding-bottom:2px;margin-bottom:2px;}
  /* Coin purse + pockets compact */
  .character-sheet .cs-pocket-row{flex:0 0 auto;gap:4px;}
  .character-sheet .cs-pocket-box{min-height:0;overflow:hidden;flex-shrink:1;padding:4px 6px;}
  .character-sheet .cs-pocket-title{font-size:10px;padding-bottom:2px;margin-bottom:2px;}
  .character-sheet .cs-coin-list{overflow:hidden;min-height:0;}
  .character-sheet .cs-pocket-content{min-height:0;overflow:hidden;}
  .character-sheet .cs-coin-row{font-size:10px;line-height:1.3;}
  .character-sheet .cs-name{font-size:26px;}
  .character-sheet .cs-header-row{padding-bottom:6px;margin-bottom:6px;}
  /* Strip all min-heights — let content shrink to actual size */
  .character-sheet .cs-personality-text,.character-sheet .cs-features-text,.character-sheet .cs-backstory-text,
  .character-sheet .cs-bag-list,.character-sheet .cs-equip-list,.character-sheet .cs-pocket-content,
  .character-sheet .cs-bag-contents,.character-sheet .cs-hp-content{min-height:0!important;}
  /* Hide empty attack rows in print */
  .character-sheet .cs-attack-row:not(:has(span:not(:empty))){display:none;}
  /* Tighten attack table */
  .character-sheet .cs-attack-row{padding:1px 0;}
  .character-sheet .cs-attacks-box{min-height:0;}
  /* Tighten combat and HP rows */
  .character-sheet .cs-combat-row{gap:4px;}
  .character-sheet .cs-hp-quad{gap:4px;}
  .character-sheet .cs-combat-val{padding:3px 2px;font-size:16px;}
  .character-sheet .cs-hp-quad-box .cs-hp-content{padding:2px 2px;}
  .cs-spell-page,.cs-ki-page,.cs-metamagic-page,.cs-custom-resource-page,.cs-prep-sheet,.cs-spell-ref-sheet,.cs-howto-sheet,.cs-custom-page,.cs-custom-builtin-wrap{page-break-inside:avoid;margin:8px auto 0;}
  .cs-add-page-btn,.cs-page-delete{display:none !important;}
  .cs-secondary-pages{page-break-before:always;}
  .cs-sp-level-box,.cs-prep-level{page-break-inside:avoid;}
  /* Print font sizes — scale back to fit page */
  .character-sheet .cs-field-label{font-size:9px;}
  .character-sheet .cs-ability-label{font-size:8px;}
  .character-sheet .cs-ability-score-circle,.character-sheet .cs-circle-sm{font-size:10px;}
  .character-sheet .cs-stat-label,.character-sheet .cs-skill-row,.character-sheet .cs-skill-mod,.character-sheet .cs-skill-name{font-size:10px;}
  .character-sheet .cs-skill-ab{font-size:8px;}
  .character-sheet .cs-prof-box{font-size:9px;}
  .character-sheet .cs-death-label{font-size:9px;}
  .character-sheet .cs-hp-quad-box .cs-hp-label{font-size:8px;}
  .character-sheet .cs-attack-table{font-size:10px;}
  .character-sheet .cs-attack-header{font-size:9px;}
  .character-sheet .cs-box-title,.character-sheet .cs-pocket-title,.character-sheet .cs-bag-title{font-size:10px;}
  .character-sheet .cs-equip-list,.character-sheet .cs-bag-contents,.character-sheet .cs-pocket-content{font-size:10px;}
  .character-sheet .cs-equip-item-stats{font-size:8px;}
  .character-sheet .cs-personality-text,.character-sheet .cs-features-text,.character-sheet .cs-backstory-text{font-size:10px;}
  .character-sheet .cs-spell-level,.character-sheet .cs-spell-list{font-size:10px;}
}

/* ===== Custom Subclass/Subrace Builder ===== */
.builder-section-title{font-family:'Cinzel',serif;font-size:16px;color:var(--crimson);margin:18px 0 10px;letter-spacing:.5px;}
.builder-section-title:first-child{margin-top:0;}
.builder-hint{font-size:13px;color:var(--ink-mid);margin:0 0 8px;}
.builder-field{margin-bottom:14px;}
.builder-divider{border:none;border-top:1px solid var(--border);margin:20px 0;}
.builder-checkbox-grid{display:flex;flex-wrap:wrap;gap:4px 14px;}
.builder-checkbox-label{font-size:13px;color:var(--ink);display:flex;align-items:center;gap:5px;cursor:pointer;padding:3px 0;}
.builder-checkbox-label input[type="checkbox"]{accent-color:var(--crimson);}
.builder-feature-card{background:var(--parchment-light,rgba(255,255,255,.03));border:1px solid var(--border);border-radius:6px;padding:14px;margin-top:10px;}
.builder-feature-card:hover{border-color:var(--gold-dim);}
.builder-feature-header{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.builder-actions{text-align:center;margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.builder-actions .btn-big{max-width:280px;flex:1;}
.custom-subclass-remove{position:absolute;top:6px;right:6px;background:none;border:1px solid var(--border);color:var(--ink-mid);font-size:11px;width:22px;height:22px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1;padding:0;line-height:1;}
.custom-subclass-remove:hover{background:var(--crimson);color:#fff;border-color:var(--crimson);}
.custom-create-card{border:2px dashed var(--border) !important;background:transparent !important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:100px;transition:all .2s;}
.custom-create-card:hover{border-color:var(--crimson) !important;background:rgba(220,38,38,.04) !important;}
.custom-create-icon{font-size:32px;color:var(--crimson);font-weight:300;line-height:1;}
.custom-create-label{font-size:15px !important;color:var(--crimson) !important;}
.custom-create-upload{margin-top:4px;font-size:12px !important;padding:4px 14px !important;}

/* ===== Upload Popup ===== */
.subclass-upload-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;}
.subclass-upload-box{background:var(--bark);border:1px solid var(--border);border-radius:10px;padding:28px 32px;max-width:480px;width:90%;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.5);}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== More Info button (mobile only) ===== */
.option-card-more-info{display:none;}
.mobile-info-back{display:none;}

/* ===== Responsive ===== */
@media(max-width:740px){
  .split-layout{grid-template-columns:1fr;}
  .split-right{position:static;max-height:none;display:none;}

  /* Show "More Info" buttons on mobile */
  .option-card-more-info{
    display:inline-block;
    margin-top:8px;
    padding:5px 14px;
    font-size:12px;
    font-family:'Cinzel',serif;
    font-weight:600;
    color:var(--crimson);
    background:transparent;
    border:1px solid var(--crimson);
    border-radius:4px;
    cursor:pointer;
    transition:all .15s;
  }
  .option-card-more-info:hover{background:rgba(220,38,38,.08);}

  /* Mobile info panel active — takes over the screen */
  .split-layout.mobile-info-active .split-left{display:none;}
  .split-layout.mobile-info-active .split-right{display:block;}
  .split-layout.mobile-info-active .info-detail-panel{
    min-height:60vh;
  }

  /* Back button */
  .mobile-info-back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:12px;
    padding:6px 14px;
    font-family:'Cinzel',serif;
    font-size:13px;
    font-weight:600;
    color:var(--crimson);
    background:transparent;
    border:1px solid var(--crimson);
    border-radius:4px;
    cursor:pointer;
    transition:all .15s;
  }
  .mobile-info-back:hover{background:rgba(220,38,38,.08);}
  /* Force a clean vertical stack on phone instead of relying on a
     single-column grid. Some embedded contexts (the play.html iframe,
     section views, etc.) interact poorly with `display:grid` collapse
     and can leave the right column overlapping the center one. Using
     flex-column with explicit order numbers guarantees the columns
     render one-per-row in the order: combat (center) → saves/skills
     (left) → personality/features (right). */
  .cs-body{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;gap:12px;width:100%;}
  .cs-col-center{order:1!important;width:100%!important;min-width:0;}
  .cs-col-left  {order:2!important;width:100%!important;min-width:0;}
  .cs-col-right {order:3!important;width:100%!important;min-width:0;}
  .cs-abilities-row{flex-wrap:wrap;justify-content:center;}
  .cs-ability-block{flex:0 0 calc(33.33% - 4px);min-width:0;}
  .cs-header-row{flex-direction:column;align-items:center;}
  .cs-name-box{text-align:center;width:100%;}
  .cs-header-fields{grid-template-columns:repeat(2,1fr);width:100%;}
  .cs-sp-body{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .wizard-container{padding:12px 12px 12px;}
  .option-grid{grid-template-columns:1fr;}
  .step-title{font-size:17px;}
  .step-card{padding:16px;}
  .race-banner{display:none;}
  .race-card-with-banner{display:block;}
  .race-card-content{padding:16px;}
  .app-header h1{font-size:18px;letter-spacing:1px;}
  .header-nav{position:static;transform:none;margin-bottom:6px;}
  /* Hide the step-progress breadcrumb on phone — takes vertical space that
     users need for the wizard itself, and the Back button alone is enough
     for navigating backward. The row shrinks to just the back button. */
  .breadcrumb{display:none;}
  .breadcrumb-row{margin-bottom:8px;gap:0;}
  .section-heading-title{font-size:24px;letter-spacing:1px;}
  .ability-slots{grid-template-columns:repeat(2,1fr);}
  .roll-slot{width:64px;height:64px;font-size:22px;}
  .cs-abilities-row .cs-ability-block{flex:0 0 calc(50% - 4px);}
  .cs-combat-row{flex-direction:column;}
  .cs-hp-quad{flex-wrap:wrap;}
  .cs-sp-body{grid-template-columns:1fr;}
  .cs-prep-table{font-size:10px;}
  .cs-prep-desc{max-width:150px;}
}

/* ============ Wizard — unlock viewport on phone ============
   On desktop the wizard locks itself to 100dvh with overflow:hidden and
   internally scrolls each panel. On phone that hides the Next button
   behind the bottom nav whenever a step's content is taller than the
   cramped interior. Override: let the whole page scroll naturally so the
   user can always reach the bottom of the container by scrolling the
   document. */
@media (max-width: 740px) {
  body.wizard-active,
  body.wizard-active .wizard-container,
  body.wizard-active #wizard-main,
  body.wizard-active .step-card,
  body.wizard-active .split-layout,
  body.wizard-active .split-left,
  body.wizard-active .split-right {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.wizard-active { display: block !important; }
  body.wizard-active .wizard-container {
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    /* Anchor the absolutely-positioned back button below. */
    position: relative;
  }
  body.wizard-active .split-layout { display: block !important; }

  /* ---- Hide the "Character Creator" banner on phone. The global
     topbar (StatBlocker logo) already establishes brand; this row was
     eating ~50px of vertical space without adding info. ---- */
  body.wizard-active .app-header { display: none !important; }

  /* ---- Relocate the back button INSIDE the step-card's top-left corner
     so the old breadcrumb-row stops consuming a whole slice of vertical
     space above the content. The breadcrumb itself is already hidden on
     phone (see .breadcrumb { display: none } at max-width:640px), so the
     row would otherwise just show the back button in its own row. Now the
     button floats over the step-card's top-left instead. ---- */
  body.wizard-active .breadcrumb-row {
    position: absolute;
    top: 20px;   /* wizard-container's 12px padding + 8px inset */
    left: 20px;
    z-index: 30;
    margin: 0 !important;
    pointer-events: none;   /* don't block taps on card content below */
  }
  body.wizard-active .breadcrumb-row .btn-back {
    pointer-events: auto;
    padding: 5px 10px;
    font-size: 11px;
    min-height: 0;
    line-height: 1.3;
  }
  /* Hide the wizard-level back button while the mobile "More Info" panel
     is showing — the info panel has its own "← Back" control that returns
     to the selector, and two stacked back buttons are confusing (users
     aren't sure whether tapping goes back one screen or two). When the
     info panel closes (mobile-info-active is removed), this selector
     stops matching and the back button reappears automatically. */
  body.wizard-active:has(.split-layout.mobile-info-active) .breadcrumb-row {
    display: none !important;
  }

  /* Hide option-card tag chips on phone. The chips (e.g. "divine",
     "languages", "stealth") add visual noise and eat vertical space that's
     more valuable on a narrow screen for the description text. Tags are
     still present in the DOM and rendered on desktop. */
  .option-card .option-card-tags { display: none !important; }
  body.wizard-active .split-right { width: 100% !important; }
  /* Step header reserves 72px on BOTH sides so content sits visually
     centered between the back-button corner and an equal counterweight
     on the right. Without the matching right padding the title looked
     shifted to the right of center. Explicit text-align:center makes
     the title/subtitle/search strip center themselves inside that reserve. */
  body.wizard-active .step-header-sticky {
    position: static !important;
    margin: 0 0 10px !important;
    padding: 12px 72px 8px !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* The search input's wrapper is inline-block/flex by default — nudge
     its alignment so it centers with the rest. */
  body.wizard-active .step-header-sticky .search-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* The level-selection 3D carousel has side cards that project out past
     the stage via perspective + rotateY. On desktop the step-card's
     overflow:hidden clipped them; we unlocked that above, so the cards
     now bleed past the viewport edge on phone. Re-clip just the carousel
     wrapper so the stage stays visually contained. */
  body.wizard-active .level-carousel-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
  }

  /* ============ Mobile snap-scroll selectors ============
     Variants under A/B evaluation. CSS scroll-snap locks each card into
     view — no JS required.
       .mobile-snap-v1 — (archived) horizontal races, ~72vw per card
       .mobile-snap-v2 — classes,  horizontal, ~62vw, neighbors peek in
       .mobile-snap-v3 — races,    vertical snap-scroll
     The shared rules below establish a horizontal strip (v1/v2); v3
     overrides that with column + y-axis snap. */
  .option-grid.mobile-snap {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 12px;
    padding: 6px 16px 14px;
    /* Bleed past the step-card's horizontal padding so edge cards can still
       center under scroll-snap. The step-card has padding:16px on phone. */
    margin-inline: -16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .option-grid.mobile-snap::-webkit-scrollbar { display: none; }
  .option-grid.mobile-snap .option-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: 0 0 auto;
    /* On-tap feedback — the transform:translateY hover from desktop isn't
       great on phone (sticks), so compress slightly instead. */
    transition: border-color .15s, box-shadow .2s, transform .1s;
  }
  .option-grid.mobile-snap .option-card:hover { transform: none; }
  .option-grid.mobile-snap .option-card:active { transform: scale(.98); }

  /* --- Variant 1 (races) — bigger than v2 but still leaves edge breathing
     room so the step-card border is clearly visible on both sides and the
     neighboring card peeks in enough to suggest "swipe me". --- */
  .option-grid.mobile-snap-v1 .option-card {
    width: 72vw;
    max-width: 300px;
    min-height: 220px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
  }
  .option-grid.mobile-snap-v1 .option-card-label { font-size: 20px; letter-spacing: .8px; }
  .option-grid.mobile-snap-v1 .option-card-desc  { font-size: 14px; line-height: 1.5; margin-top: 10px; }
  .option-grid.mobile-snap-v1 .option-card-tags  { margin-top: 12px; }

  /* --- Variant 2 (classes) — slimmer, neighbors peek in from the edges --- */
  .option-grid.mobile-snap-v2 .option-card {
    width: 62vw;
    max-width: 260px;
    min-height: 220px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
  }
  .option-grid.mobile-snap-v2 .option-card-label { font-size: 18px; }
  .option-grid.mobile-snap-v2 .option-card-desc  { font-size: 13px; line-height: 1.45; margin-top: 8px; }
  .option-grid.mobile-snap-v2 .option-card-tags  { margin-top: 10px; }
  /* Cards not in the center dim slightly to focus attention. Uses a basic
     opacity trick — the centered card keeps full opacity via :has() around
     scroll-snap-align, but browser support varies, so we use a lighter
     touch: neutral opacity on all cards and rely on the snap itself. */

  /* --- Variant 3 (races, vertical test) — scroll-snaps on the Y axis.
     Each card spans the full usable width with neighbor cards peeking
     above and below to invite the vertical swipe.
     Override specificity notes:
       • The parent phone rule forces most wrappers to overflow:visible !important.
         We use !important on our own overflow-y so the grid still scrolls.
       • Explicit height (not just max-height) so the grid definitely has
         a bounded scroll viewport — some browsers don't honor max-height
         for a flex item whose parent chain is all auto-height.
       • Block-axis scroll-snap must be on the scroll container (this one),
         and each child gets scroll-snap-align. --- */
  /* --- Variant 3 (races, vertical) — dead-center snap.
     Matches the feel of v2 (horizontal): one card occupies the "stage"
     position, neighbors peek above and below, no freeform scroll.
     Keys to making center-snap reliable on iOS:
       • All cards SAME height. Variance breaks center snap.
       • The container fills remaining vertical space so snap padding
         (top/bottom gutters) sits above and below the active card.
       • The outer layout is locked (no document-level scroll) on this
         step only, so the vertical gesture belongs to the snap strip. --- */
  .option-grid.mobile-snap-v3 {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: y mandatory !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-block: 50%;
    margin-inline: 0 !important;
    max-height: none !important;
    padding: 0 4px;
    overscroll-behavior-y: contain;
    gap: 0 !important;
    touch-action: pan-y;
    scrollbar-width: none;
  }
  .option-grid.mobile-snap-v3::-webkit-scrollbar { display: none; }
  .option-grid.mobile-snap-v3 .option-card {
    display: block !important;
    width: 100%;
    max-width: none;
    /* Fixed height — critical for center snap. Variance makes iOS bail. */
    height: 180px;
    min-height: 180px;
    max-height: 180px;
    margin: 10px 0;
    padding: 16px 18px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    overflow: hidden;
    /* Non-focused cards dim so the active (centered) one stands out.
       The .snap-active class is toggled by initMobileSnapDots during
       scroll; it's always on exactly one card at a time. */
    opacity: 0.45;
    transition: opacity .2s ease, transform .2s ease;
  }
  .option-grid.mobile-snap-v3 .option-card.snap-active {
    opacity: 1;
  }
  /* Spacer at the top and bottom equal to half the remaining container
     height, so the FIRST and LAST cards can sit dead center just like the
     middle ones. scroll-padding-block:50% already reserves the space; this
     prevents last-card content from looking flush against the bottom. */
  .option-grid.mobile-snap-v3::before,
  .option-grid.mobile-snap-v3::after {
    content: '';
    display: block;
    height: 0;
  }
  /* Description clamp — prevents text taller than the fixed card height
     from visually breaking the card. */
  .option-grid.mobile-snap-v3 .option-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- Outer layout lock. When v3 is in the DOM we flip the whole wizard
     back to a locked 100dvh viewport so the snap strip owns the vertical
     gesture. Non-race steps keep the whole-page-scroll layout from the
     parent rule above. :has() supported on iOS Safari 15.4+. --- */
  body.wizard-active:has(.mobile-snap-v3) {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
  }
  body.wizard-active:has(.mobile-snap-v3) .wizard-container,
  body.wizard-active:has(.mobile-snap-v3) #wizard-main,
  body.wizard-active:has(.mobile-snap-v3) .split-layout,
  body.wizard-active:has(.mobile-snap-v3) .split-left,
  body.wizard-active:has(.mobile-snap-v3) .step-card,
  body.wizard-active:has(.mobile-snap-v3) .race-card-with-banner,
  body.wizard-active:has(.mobile-snap-v3) .race-card-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
    height: auto !important;
  }
  /* The step header on a race_select step stays as a fixed-size block at
     the top of the flex column so the grid can claim the remaining space. */
  body.wizard-active:has(.mobile-snap-v3) .step-header-sticky {
    flex: 0 0 auto !important;
  }
  /* Dots row sits below the scroll strip at auto height. */
  body.wizard-active:has(.mobile-snap-v3) .mobile-snap-dots {
    flex: 0 0 auto;
  }
  .option-grid.mobile-snap-v3 .option-card-label { font-size: 20px; letter-spacing: .6px; }
  .option-grid.mobile-snap-v3 .option-card-desc  { font-size: 14px; line-height: 1.5; margin-top: 8px; }
  .option-grid.mobile-snap-v3 .option-card-tags  { margin-top: 10px; }

  /* --- Hint chip: a small "swipe" affordance appended by the chrome.
     Only applies to horizontal variants (v1/v2). The vertical v3 uses
     display:block so pseudo-element flex hacks don't apply. --- */
  .option-grid.mobile-snap-v1::after,
  .option-grid.mobile-snap-v2::after {
    content: '';
    flex: 0 0 4px;
  }

  /* When mobile-snap is active, hide the desktop hover info panel to the
     right — the snap card contents include the description inline. */
  body.wizard-active .split-layout:has(.mobile-snap) + * { display: none; }

  /* --- Page-indicator dots below the snap strip --- */
  .mobile-snap-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 16px 0;
    margin-top: 2px;
    /* Cap the dot row height for very long option lists (e.g. 14 races).
       With flex-wrap, dots will spill to a second row rather than scroll. */
    max-width: 100%;
  }
  .mobile-snap-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--border, #2A2A30);
    cursor: pointer;
    transition: background .2s, transform .2s, width .2s;
    /* Enlarge the hit target without visually growing the dot — users
       should be able to tap without precision. */
    position: relative;
  }
  .mobile-snap-dot::before {
    content: '';
    position: absolute;
    inset: -6px;
  }
  .mobile-snap-dot:hover { background: var(--gold-dim, #71717A); }
  .mobile-snap-dot.active {
    background: var(--crimson, #DC2626);
    width: 20px;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(220, 38, 38, .4);
  }
}

/* Dots row is mobile-only; hide on desktop even though it's rendered. */
@media (min-width: 741px) {
  .mobile-snap-dots { display: none !important; }
}

/* ============ ASI (Ability Score Improvement) ============ */
.asi-container{max-width:680px;margin:0 auto;}
.asi-points-bar{text-align:center;font-family:'Cinzel',serif;font-size:15px;color:var(--ink);padding:12px 0 16px;letter-spacing:.5px;}
.asi-points-bar.asi-spent{color:#4ADE80;}
.asi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px;}
.asi-card{background:var(--bark);border:1px solid var(--border);border-radius:8px;padding:10px 4px;text-align:center;transition:all .2s;min-width:0;}
.asi-card.boosted{border-color:var(--crimson);background:rgba(220,38,38,.08);box-shadow:0 0 12px rgba(220,38,38,.15);}
.asi-card.maxed{opacity:.5;}
.asi-card-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--gold-dim);letter-spacing:1px;margin-bottom:6px;}
.asi-card-score{font-size:28px;font-weight:700;color:var(--ink);line-height:1.1;}
.asi-card.boosted .asi-card-score{color:var(--crimson-hover);}
.asi-card-mod{font-size:13px;color:var(--ink-mid);margin-bottom:8px;}
.asi-card.boosted .asi-card-mod{color:var(--crimson-hover);}
.asi-card-buttons{display:flex;align-items:center;justify-content:center;gap:6px;}
.asi-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bark-dark);color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;line-height:1;}
.asi-btn:hover:not(:disabled){border-color:var(--crimson);color:var(--crimson-hover);background:rgba(220,38,38,.1);}
.asi-btn:disabled{opacity:.3;cursor:not-allowed;}
.asi-alloc{font-size:12px;color:var(--ink-mid);min-width:22px;text-align:center;font-family:'Cinzel',serif;}
.asi-card.boosted .asi-alloc{color:var(--crimson-hover);font-weight:700;}
.asi-feat-note{text-align:center;color:var(--ink-mid);font-size:13px;padding:8px 0 16px;font-style:italic;}
@media(max-width:600px){
  .asi-grid{grid-template-columns:repeat(3,1fr);}
}

/* ============ Wizard Active — No-Scroll Viewport ============ */
/* Use 100dvh (dynamic viewport height) so the wizard shrinks with the iOS
   Safari URL bar instead of overflowing under it. Falls back to 100vh on
   engines that don't support dvh. Pair with viewport-fit=cover in the meta
   tag so env(safe-area-inset-bottom) returns a real pixel value for the
   home-indicator zone. */
body.wizard-active{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
body.wizard-active .app-header{flex-shrink:0;}
body.wizard-active footer{display:none;}
/* padding-bottom: 48px baseline (for the Next/Continue button) PLUS the iOS
   safe-area inset so the button isn't hidden behind the home indicator. */
body.wizard-active .wizard-container{flex:1;display:flex;flex-direction:column;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));min-height:0;overflow:hidden;}
body.wizard-active #wizard-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:8px;background:var(--bark);box-shadow:0 2px 12px rgba(0,0,0,.3);}
/* Interstitial splash screens (race/class/background intros). Balanced
   top and bottom padding so the Next button doesn't sit flush against
   the container's bottom border — it should have the same breathing room
   as the heading has above it. */
body.wizard-active .section-heading.interstitial{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 40px;margin:0;gap:4px;}
.section-heading-next{margin-top:32px;margin-bottom:0;max-width:260px;}
@media (max-width:740px){
  body.wizard-active .section-heading.interstitial{padding:24px 24px;}
  .section-heading-next{margin-top:24px;}
}
body.wizard-active .step-card{flex:1;min-height:0;overflow-y:auto;border:none;border-radius:0;box-shadow:none;}
body.wizard-active .step-card:has(.level-grid),body.wizard-active .step-card:has(.level-carousel-wrap){display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;}
body.wizard-active .split-layout{flex:1;min-height:0;overflow:hidden;display:flex;align-items:stretch;gap:0;}
body.wizard-active .split-left{flex:1;min-height:0;min-width:0;max-height:100%;overflow-y:auto;}
body.wizard-active .split-left>.step-card{overflow:visible;}
body.wizard-active .split-right{position:static;width:340px;flex-shrink:0;max-height:100%;min-height:0;overflow-y:auto;}
body.wizard-active .option-grid{max-height:none;overflow-y:visible;}
body.wizard-active .race-card-with-banner{flex:1;min-height:0;overflow:visible;}
body.wizard-active .race-banner{position:static;width:280px;border-radius:0;flex-shrink:0;height:auto;}
body.wizard-active .race-card-content{padding:24px;flex:1;min-width:0;}
body.wizard-active .step-header-sticky{position:sticky;top:-24px;z-index:10;background:var(--bark);padding:24px 24px 10px;margin:-24px -24px 10px;width:calc(100% + 48px);border-bottom:1px solid var(--border);}
body.wizard-active .step-header-sticky .step-title{margin-bottom:4px;}
body.wizard-active .step-header-sticky .step-subtitle{margin-bottom:6px;}
body.wizard-active .step-header-sticky .search-wrap{margin-bottom:0;}
/* Sticky "Continue" bar at the bottom of multi-select steps — add safe-area
   padding so the button clears the iOS home indicator. */
body.wizard-active .multi-confirm{position:sticky;bottom:0;background:var(--bark);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);margin:16px -24px -24px;z-index:10;box-shadow:0 -4px 12px rgba(0,0,0,.3);}
body.wizard-active .multi-confirm .btn{padding:12px 32px;font-size:14px;}

/* ===== Modular Add Buttons & Dynamic Rows ===== */
.cs-add-module-btn{display:none;border:2px dashed #c4a77d;border-radius:4px;padding:4px 8px;text-align:center;cursor:pointer;color:#7a6840;font-size:11px;font-family:'Cinzel',serif;letter-spacing:.5px;margin-top:3px;transition:all .2s;user-select:none;}
.cs-module-section:hover .cs-add-module-btn,.cs-add-module-btn:focus{display:block;}
.cs-add-module-btn:hover{border-color:#58180d;color:#58180d;background:rgba(88,24,13,.05);}
.cs-add-module-icon{font-size:14px;font-weight:700;vertical-align:middle;}
.cs-module-row{position:relative;}
.cs-module-remove{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:none;color:#c4a77d;font-size:14px;cursor:pointer;padding:0 3px;line-height:1;opacity:0;transition:opacity .15s;z-index:1;}
.cs-module-row:hover .cs-module-remove{opacity:1;}
.cs-module-remove:hover{color:#dc2626;}
.cs-module-feat-name{font-weight:700;font-size:12px;color:#58180d;min-height:16px;outline:none;}
.cs-module-desc{font-size:11px;color:#333;min-height:14px;outline:none;padding-left:8px;border-left:2px solid #e8d5b7;margin-top:2px;}
.cs-feature-subsection{margin-bottom:4px;}
.cs-feature-subsection:last-of-type{margin-bottom:0;}
.cs-feature-subsection-heading{font-family:'Crimson Text',serif;font-size:12.5px;font-weight:700;color:#58180d;line-height:1.4;outline:none;padding:2px 0 1px 0;border-bottom:1px solid #c4a77d;}
.cs-feature-module{position:relative;border-bottom:1px solid #e8d5b7;padding:3px 0;cursor:pointer;}
.cs-feature-module:last-of-type{border-bottom:none;}
.cs-feature-module:hover{background:rgba(88,24,13,.05);}
@media print{.cs-feature-module:hover{background:transparent;} .cs-feature-module{cursor:default;}}
.cs-feature-module-content{font-family:'Crimson Text',serif;font-size:12px;color:#000;line-height:1.4;outline:none;min-height:14px;white-space:pre-wrap;}
.cs-feature-module-content strong{color:#000;}
.cs-feature-module-fields{display:inline;}
.cs-feature-module-title{font-family:'Crimson Text',serif;font-size:11px;font-weight:700;color:#000;line-height:1.4;outline:none;display:inline;}
.cs-feature-module-title:before{content:'\2022 ';color:#000;}
.cs-feature-module-desc{font-family:'Crimson Text',serif;font-size:11px;color:#333;line-height:1.4;outline:none;display:inline;}
.cs-feature-module-desc:not(:empty)::before{content:' \2014 ';color:#333;}
.cs-feature-module:hover .cs-module-remove{opacity:1;}
[data-placeholder]:empty::before{content:attr(data-placeholder);color:#bbb;font-style:italic;pointer-events:none;}
.cs-feature-module-desc:empty::before{display:none;}
.cs-feature-module-desc:focus:empty::before{display:inline;}
.cs-sp-module-row{display:block;}

/* Autocomplete dropdown */
.cs-autocomplete-dropdown{position:fixed;z-index:9999;background:#fef6e4;border:1px solid #c4a77d;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);max-height:180px;overflow-y:auto;font-size:12px;font-family:'Crimson Text',serif;}
.cs-autocomplete-option{padding:5px 10px;cursor:pointer;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-autocomplete-option:hover,.cs-autocomplete-active{background:#58180d;color:#fff;}

/* ===== Level-Up System ===== */
body.wizard-active .levelup-summary,body.wizard-active .levelup-hp-page{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;}
.levelup-summary{max-width:600px;margin:0 auto;padding:40px 20px;}
.levelup-header{text-align:center;margin-bottom:32px;padding-bottom:24px;border-bottom:2px solid var(--crimson);}
.levelup-icon{font-size:52px;margin-bottom:4px;filter:drop-shadow(0 0 12px rgba(220,38,38,.4));}
.levelup-header h2{font-family:Cinzel,serif;font-size:28px;font-weight:700;color:var(--crimson);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;}
.levelup-subtitle{color:var(--ink-mid);font-size:15px;font-style:italic;}
.levelup-section{margin-bottom:28px;}
.levelup-section h3{font-family:Cinzel,serif;font-size:14px;font-weight:700;color:var(--crimson);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;border-bottom:1px solid var(--border);padding-bottom:8px;}
.levelup-changes,.levelup-choices-list{list-style:none;padding:0;}
.levelup-change-item,.levelup-choice-item{padding:12px 16px;margin-bottom:6px;border-radius:6px;background:var(--parchment-light);border:1px solid var(--border);color:var(--ink);font-size:15px;display:flex;align-items:flex-start;gap:10px;transition:all .2s;}
.levelup-change-item:hover,.levelup-choice-item:hover{border-color:var(--crimson);transform:translateX(4px);}
.levelup-check{color:var(--crimson);font-weight:bold;flex-shrink:0;font-size:16px;}
.levelup-arrow{color:var(--crimson);font-weight:bold;flex-shrink:0;font-size:16px;}
.levelup-btn-row{text-align:center;margin-top:36px;}
.levelup-continue-btn{padding:14px 48px !important;font-size:16px !important;font-family:Cinzel,serif !important;font-weight:700 !important;letter-spacing:1px !important;text-transform:uppercase !important;}
.btn-levelup{display:inline-block;padding:8px 20px;font-size:14px;font-family:Cinzel,serif;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--crimson),#ef4444);border:none;border-radius:6px;cursor:pointer;transition:all .2s;letter-spacing:.5px;}
.btn-levelup:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 4px 16px rgba(220,38,38,.3);}
.swap-section-heading{font-family:'Cinzel',serif;font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--crimson);margin:20px 0 10px;padding-bottom:6px;border-bottom:1px solid rgba(139,0,0,0.3);}
.swap-section-heading:first-of-type{margin-top:12px;}
.levelup-swap-card{cursor:pointer;}
/* Dedicated HP page */
.levelup-hp-page{max-width:680px;width:100%;margin:0 auto;padding:20px 20px;box-sizing:border-box;}
.levelup-hp-page-header{text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--crimson);}
.levelup-hp-page-header h2{font-family:Cinzel,serif;font-size:24px;font-weight:700;color:var(--crimson);letter-spacing:2px;text-transform:uppercase;margin-bottom:6px;}
.levelup-hp-page-sub{color:var(--ink-mid);font-size:14px;line-height:1.5;margin:0;}
.levelup-hp-page-sub strong{color:var(--ink);}
.levelup-hp-bonus-note{font-style:italic;}
.levelup-hp-methods{display:flex;gap:10px;margin-bottom:16px;}
.levelup-hp-method{flex:1;padding:10px 12px;border-radius:6px;background:var(--parchment-light);border:1px solid var(--border);text-align:center;}
.levelup-hp-method-icon{font-size:20px;margin-bottom:2px;}
.levelup-hp-method-title{font-family:Cinzel,serif;font-size:11px;font-weight:700;color:var(--crimson);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
.levelup-hp-method p{color:var(--ink-mid);font-size:12px;margin:0;line-height:1.4;}
.levelup-hp-method p strong{color:var(--ink);}
.levelup-hp-action-box{background:var(--parchment-light);border:2px solid var(--crimson);border-radius:10px;padding:20px;text-align:center;}
.levelup-hp-result-big{font-size:16px;color:var(--ink-mid);margin-bottom:14px;min-height:24px;font-style:italic;transition:all .3s;}
.levelup-hp-result-big.levelup-hp-set{color:var(--ink);font-style:normal;font-weight:600;}
.levelup-hp-total{color:var(--crimson);font-size:20px;}
.levelup-hp-action-row{display:flex;align-items:center;gap:10px;justify-content:center;}
.levelup-hp-input-big{width:90px;padding:10px;background:var(--bark);border:2px solid var(--border);border-radius:6px;color:var(--ink);font-size:20px;text-align:center;font-family:'Crimson Text',serif;transition:border-color .2s;}
.levelup-hp-input-big:focus{outline:none;border-color:var(--crimson);}
.levelup-hp-enter-btn{padding:10px 24px;font-size:14px;font-family:Cinzel,serif;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--crimson);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s;}
.levelup-hp-enter-btn:hover{background:#a51c1c;transform:translateY(-1px);}
.levelup-hp-or{color:var(--ink-mid);font-size:12px;font-style:italic;margin:8px 0;}
.levelup-hp-outline-btn{padding:8px 18px;font-size:12px;font-family:Cinzel,serif;font-weight:600;letter-spacing:.5px;text-transform:uppercase;background:transparent;color:var(--ink-mid);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .2s;}
.levelup-hp-outline-btn:hover{border-color:var(--crimson);color:var(--crimson);}
.levelup-continue-btn:disabled{opacity:.4;cursor:not-allowed;}

/* ===== Custom Pages (Add Page feature) ===== */
.cs-custom-page{position:relative;background:#1A1A20;border:2px solid var(--gold);border-radius:8px;padding:24px;margin:16px auto 0;max-width:7.5in;}
.cs-custom-page-title{font-family:'Cinzel',serif;font-size:18px;color:var(--gold);text-align:center;margin-bottom:14px;letter-spacing:.5px;}
.cs-custom-page img{display:block;max-width:100%;max-height:10in;object-fit:contain;margin:0 auto;background:#fff;}
.cs-custom-builtin-wrap{position:relative;}
.cs-page-delete{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:1px solid var(--crimson);font-size:18px;line-height:1;cursor:pointer;font-family:'Cinzel',serif;z-index:5;transition:all .15s;display:flex;align-items:center;justify-content:center;padding:0;}
.cs-page-delete:hover{background:var(--crimson);transform:scale(1.1);}
.cs-add-page-btn{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:transparent;border:2px dashed var(--gold);color:var(--gold);font-size:32px;font-family:'Cinzel',serif;font-weight:300;line-height:1;cursor:pointer;margin:24px auto 32px;transition:all .2s;padding:0;}
.cs-add-page-btn:hover{background:var(--gold);color:#1A1A20;border-style:solid;transform:scale(1.05);}

/* Add Page modal */
.cs-add-page-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;align-items:center;justify-content:center;padding:16px;}
.cs-add-page-box{background:var(--panel,#131316);border:1px solid var(--border,#2A2A30);border-top:3px solid var(--crimson);border-radius:10px;padding:24px 28px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;font-family:'Crimson Text',Georgia,serif;color:var(--ink,#E8E8ED);box-shadow:0 12px 36px rgba(0,0,0,.6);}
.cs-add-page-box h3{font-family:'Cinzel',serif;font-size:18px;color:#fff;margin:0 0 14px;letter-spacing:1px;text-transform:uppercase;}
.cs-add-page-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border,#2A2A30);margin-bottom:16px;}
.cs-add-page-tab{padding:8px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--ink-mid,#9898A0);font-family:'Cinzel',serif;font-size:12px;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .15s;}
.cs-add-page-tab.active{color:var(--gold,#c4a97d);border-bottom-color:var(--gold,#c4a97d);}
.cs-add-page-tab:hover:not(.active){color:var(--ink,#E8E8ED);}
.cs-add-page-pane{display:none;}
.cs-add-page-pane.active{display:block;}
.cs-add-page-upload-label{display:block;padding:24px;border:2px dashed var(--border,#2A2A30);border-radius:8px;text-align:center;cursor:pointer;color:var(--ink-mid,#9898A0);transition:all .15s;font-size:14px;}
.cs-add-page-upload-label:hover{border-color:var(--gold,#c4a97d);color:var(--ink,#E8E8ED);}
.cs-add-page-upload-label input{display:none;}
.cs-add-page-hint{font-size:12px;color:var(--ink-dim,#71717A);margin-top:10px;line-height:1.5;}
.cs-add-page-select{width:100%;padding:10px;background:var(--panel-2,#1A1A20);border:1px solid var(--border,#2A2A30);border-radius:5px;color:var(--ink,#E8E8ED);font-family:'Crimson Text',serif;font-size:14px;margin-bottom:14px;}
.cs-add-page-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}
.cs-add-page-actions button{padding:9px 18px;border-radius:5px;font-family:'Cinzel',serif;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border:none;}
.cs-add-page-cancel{background:transparent;color:var(--ink-mid,#9898A0);border:1px solid var(--border,#2A2A30) !important;}
.cs-add-page-cancel:hover{color:var(--ink,#E8E8ED);}
.cs-add-page-confirm{background:linear-gradient(180deg,#EF4444,#DC2626);color:#fff;}
.cs-add-page-confirm:disabled{opacity:.5;cursor:not-allowed;}
.cs-add-page-status{font-size:13px;color:var(--gold,#c4a97d);margin-top:10px;min-height:1.4em;}
.cs-add-page-status.error{color:#FCA5A5;}


/* ===== Spell picker popup (Add Cantrip / Add Spell buttons) =====
   Uses the document's theme variables so the popup inherits whatever
   palette is currently active (dark default vs fantasy parchment).
   Background, ink, border, and crimson accents all flow from
   --parchment / --ink / --border / --crimson, defined on :root in
   this file and overridden globally by shared/navbar.js when the
   user picks a different theme. */
.cs-spell-picker-overlay{position:fixed;inset:0;background:rgba(8,8,11,.78);z-index:9100;display:flex;align-items:center;justify-content:center;padding:24px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.cs-spell-picker-box{position:relative;width:100%;max-width:680px;background:var(--parchment,#1A1A20);border:2px solid var(--crimson,#DC2626);border-radius:10px;padding:22px 24px 24px;box-shadow:0 24px 60px var(--shadow,rgba(0,0,0,.6));font-family:'Crimson Text',serif;color:var(--ink,#E8E8ED);display:flex;flex-direction:column;max-height:calc(100vh - 48px);}
.cs-spell-picker-close{position:absolute;top:8px;right:10px;width:30px;height:30px;background:transparent;border:1px solid var(--border,#2A2A30);border-radius:6px;color:var(--ink,#E8E8ED);font-size:18px;cursor:pointer;line-height:1;}
.cs-spell-picker-close:hover{background:var(--crimson-glow,rgba(220,38,38,.15));border-color:var(--crimson,#DC2626);color:var(--crimson,#DC2626);}
.cs-spell-picker-title{font-family:'Cinzel',serif;font-size:18px;font-weight:800;color:var(--crimson,#DC2626);letter-spacing:.5px;text-transform:uppercase;margin:0 36px 6px 0;}
.cs-spell-picker-sub{font-size:12px;color:var(--ink-mid,#9898A0);font-style:italic;margin-bottom:12px;line-height:1.4;}
.cs-spell-picker-search{width:100%;box-sizing:border-box;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);color:var(--ink,#E8E8ED);border-radius:6px;padding:8px 10px;font-family:inherit;font-size:14px;margin-bottom:10px;}
.cs-spell-picker-search:focus{outline:none;border-color:var(--crimson,#DC2626);}
.cs-spell-picker-filters{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;padding:8px 10px;background:var(--bark-dark,#0C0C0E);border:1px solid var(--border,#2A2A30);border-radius:6px;}
.cs-spell-picker-chips{display:flex;flex-wrap:wrap;align-items:center;gap:5px;}
.cs-spell-picker-chips-label{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-mid,#9898A0);padding-right:4px;flex-shrink:0;min-width:50px;}
.cs-spell-picker-chip{display:inline-flex;align-items:center;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);color:var(--ink,#E8E8ED);font-family:'Cinzel',serif;font-size:10.5px;font-weight:600;letter-spacing:.5px;padding:3px 9px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.cs-spell-picker-chip:hover{background:var(--crimson-glow,rgba(220,38,38,.15));border-color:var(--crimson,#DC2626);color:var(--crimson,#DC2626);}
.cs-spell-picker-chip.active{background:var(--crimson,#DC2626);border-color:var(--crimson,#DC2626);color:#fff;}
.cs-spell-picker-count{font-family:'Cinzel',serif;font-size:10px;color:var(--ink-mid,#9898A0);letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px;}
.cs-spell-picker-list{flex:1;min-height:0;overflow-y:auto;padding-right:4px;display:flex;flex-direction:column;gap:4px;}
.cs-spell-picker-group{position:sticky;top:-1px;font-family:'Cinzel',serif;font-size:13px;font-weight:800;color:var(--crimson,#DC2626);letter-spacing:1.5px;text-transform:uppercase;padding:8px 10px 6px;border-bottom:2px solid var(--crimson,#DC2626);background:var(--parchment,#1A1A20);margin-top:8px;z-index:1;}
.cs-spell-picker-group:first-child{margin-top:0;}
.cs-spell-picker-row{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);border-radius:6px;padding:8px 12px;cursor:pointer;font-family:inherit;color:var(--ink,#E8E8ED);transition:border-color .15s,background .15s,transform .1s;}
.cs-spell-picker-row:hover{border-color:var(--crimson,#DC2626);background:var(--crimson-glow,rgba(220,38,38,.08));}
.cs-spell-picker-row:active{transform:translateY(1px);}
.cs-spell-picker-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.cs-spell-picker-row-name{font-family:'Cinzel',serif;font-size:13.5px;font-weight:700;color:var(--ink,#E8E8ED);letter-spacing:.3px;flex:1 1 auto;min-width:0;}
.cs-spell-picker-row-meta{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-mid,#9898A0);letter-spacing:1px;text-transform:uppercase;font-family:'Cinzel',serif;flex-shrink:0;}
.cs-spell-picker-lvlpill{background:var(--crimson,#DC2626);color:#fff;border-radius:3px;padding:1px 6px;font-size:9.5px;letter-spacing:.8px;}
.cs-spell-picker-school{background:var(--bark-dark,#0C0C0E);border:1px solid var(--border,#2A2A30);border-radius:3px;padding:1px 6px;font-size:9.5px;color:var(--ink-mid,#9898A0);}
.cs-spell-picker-row-blurb{font-size:12px;color:var(--ink-mid,#9898A0);line-height:1.4;font-style:italic;}
.cs-spell-picker-empty{font-size:13px;color:var(--ink-mid,#9898A0);font-style:italic;text-align:center;padding:24px 0;}
.cs-spell-picker-clearall{display:inline-block;margin-left:8px;background:var(--crimson,#DC2626);color:#fff;border:0;border-radius:4px;padding:4px 10px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.5px;cursor:pointer;}
.cs-spell-picker-clearall:hover{background:var(--crimson-hover,#EF4444);}

/* Fantasy-theme nudge: the row hover state needs a slightly stronger
   tint than the dark theme's translucent crimson glow to read against
   the parchment palette. Same component, different paint. */
[data-theme="fantasy"] .cs-spell-picker-row:hover{background:rgba(139,26,26,.08);}
[data-theme="fantasy"] .cs-spell-picker-school{background:rgba(139,26,26,.06);}

/* ===== Feature / Proficiency edit popup =====
   Themed via document CSS variables so it matches the active theme
   (dark default vs fantasy parchment). */
.cs-edit-popup-overlay{position:fixed;inset:0;background:rgba(8,8,11,.72);z-index:9200;display:flex;align-items:center;justify-content:center;padding:24px 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.cs-edit-popup-box{position:relative;width:100%;max-width:520px;background:var(--parchment,#1A1A20);border:2px solid var(--crimson,#DC2626);border-radius:10px;padding:22px 24px 18px;box-shadow:0 24px 60px var(--shadow,rgba(0,0,0,.6));font-family:'Crimson Text',serif;color:var(--ink,#E8E8ED);display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 48px);}
.cs-edit-popup-close{position:absolute;top:8px;right:10px;width:30px;height:30px;background:transparent;border:1px solid var(--border,#2A2A30);border-radius:6px;color:var(--ink,#E8E8ED);font-size:18px;cursor:pointer;line-height:1;}
.cs-edit-popup-close:hover{background:var(--crimson-glow,rgba(220,38,38,.15));border-color:var(--crimson,#DC2626);color:var(--crimson,#DC2626);}
.cs-edit-popup-title{font-family:'Cinzel',serif;font-size:18px;font-weight:800;color:var(--crimson,#DC2626);letter-spacing:.5px;text-transform:uppercase;margin:0 36px 0 0;}
.cs-edit-popup-sub{font-size:12px;color:var(--ink-mid,#9898A0);font-style:italic;line-height:1.4;margin-top:-4px;}
.cs-edit-popup-body{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;overflow-y:auto;padding-right:4px;}
.cs-edit-popup-field{display:flex;flex-direction:column;gap:5px;}
.cs-edit-popup-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--ink-mid,#9898A0);letter-spacing:1.4px;text-transform:uppercase;}
.cs-edit-popup-input{width:100%;box-sizing:border-box;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);color:var(--ink,#E8E8ED);border-radius:6px;padding:8px 10px;font-family:inherit;font-size:14px;}
.cs-edit-popup-input:focus{outline:none;border-color:var(--crimson,#DC2626);}
.cs-edit-popup-textarea{min-height:96px;resize:vertical;line-height:1.45;font-family:'Crimson Text',serif;}
/* Autocomplete in the proficiency / feature edit popup. The
   dropdown itself is rendered into <body> with position:fixed so
   it floats above the popup overlay regardless of its overflow. */
.cs-edit-popup-autocomplete-wrap{position:relative;}
.cs-edit-popup-autocomplete{background:var(--parchment,#1A1A20)!important;border:1px solid var(--crimson,#DC2626)!important;border-radius:6px!important;box-shadow:0 8px 22px var(--shadow,rgba(0,0,0,.6))!important;font-family:'Crimson Text',serif!important;font-size:13px!important;max-height:240px!important;}
.cs-edit-popup-autocomplete .cs-autocomplete-option{color:var(--ink,#E8E8ED);padding:7px 12px;border-bottom:1px solid var(--border,#2A2A30);}
.cs-edit-popup-autocomplete .cs-autocomplete-option:last-child{border-bottom:none;}
.cs-edit-popup-autocomplete .cs-autocomplete-option:hover,
.cs-edit-popup-autocomplete .cs-autocomplete-option.cs-autocomplete-active{background:var(--crimson,#DC2626);color:#fff;}
.cs-edit-popup-footer{display:flex;align-items:center;gap:8px;padding-top:6px;border-top:1px solid var(--border,#2A2A30);flex-wrap:wrap;}
.cs-edit-popup-spacer{flex:1;}
.cs-edit-popup-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);color:var(--ink,#E8E8ED);font-family:'Cinzel',serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:8px 16px;border-radius:5px;cursor:pointer;transition:background .15s,border-color .15s,color .15s;}
.cs-edit-popup-btn:hover{background:var(--crimson-glow,rgba(220,38,38,.15));border-color:var(--crimson,#DC2626);color:var(--crimson,#DC2626);}
.cs-edit-popup-btn.primary{background:var(--crimson,#DC2626);border-color:var(--crimson,#DC2626);color:#fff;}
.cs-edit-popup-btn.primary:hover{background:var(--crimson-hover,#EF4444);color:#fff;}
.cs-edit-popup-btn.danger{background:transparent;border-color:var(--border,#2A2A30);color:#fca5a5;}
.cs-edit-popup-btn.danger:hover{background:rgba(220,38,38,.12);border-color:#dc2626;color:#fca5a5;}

/* Spell detail popup — reuses the edit-popup overlay/box but adds
   structured stat rows (casting time, range, etc.) above the
   description. Inherits theming from the same variables. */
.cs-spell-detail-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px 12px;padding:10px 12px;background:var(--bark,#131316);border:1px solid var(--border,#2A2A30);border-radius:6px;}
.cs-spell-detail-stat{display:flex;flex-direction:column;gap:2px;min-width:0;}
.cs-spell-detail-stat-label{font-family:'Cinzel',serif;font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-mid,#9898A0);}
.cs-spell-detail-stat-value{font-family:'Crimson Text',serif;font-size:13px;color:var(--ink,#E8E8ED);}
.cs-spell-detail-badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px;}
.cs-spell-detail-badge{display:inline-flex;align-items:center;background:var(--crimson,#DC2626);color:#fff;font-family:'Cinzel',serif;font-size:9.5px;font-weight:700;letter-spacing:1px;padding:2px 8px;border-radius:999px;text-transform:uppercase;}
.cs-spell-detail-badge.subtle{background:transparent;border:1px solid var(--crimson,#DC2626);color:var(--crimson,#DC2626);}
.cs-spell-detail-desc{font-size:13px;color:var(--ink,#E8E8ED);line-height:1.55;white-space:pre-wrap;}
.cs-spell-detail-section-label{font-family:'Cinzel',serif;font-size:11px;font-weight:700;color:var(--crimson,#DC2626);letter-spacing:1.4px;text-transform:uppercase;margin-top:6px;margin-bottom:2px;}