/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Jim+Nightshade&family=Lora:ital,wght@0,400..700;1,400..700&family=Lugrasimo&family=Quicksand:wght@300..700&family=Rubik+Vinyl&family=Snippet&display=swap');

/* ========== THEME TOKENS ========== */
:root{
  /* Core palette */
  --bg:        #0a0d12;      /* page background */
  --surface:   #0f141b;      /* bars / large sections */
  --panel:     #121826;      /* cards / panels */
  --panel-2:   #0f1522;      /* darker inner */
  --stroke:    #222c3b;      /* borders */
  --muted:     #b8c7de;      /* secondary text */
  --text:      #eaf1ff;      /* body text */
  --heading:   #ffffff;      /* h1 */
  --primary:   #dbecf7;      /* link + h2 accent (screenshot blue) */
  --primary-2: #3b4aee;      /* deeper blue for gradients */
  --gold:      #be955b;      /* optional accent */

  /* Inputs / focus */
  --input:       #030108;
  --input-brd:   #600cb4bb;
  --input-focus: #3e6fb1;

  /* Status */
  --danger-1: #de7070;
  --danger-2: #9e3a3a;
  --success-1:#57c09b;
  --warn-1:  #e2b566;

  /* Radii & shadows */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --shadow-lg: 0 18px 45px rgba(10,16,28,.55), 0 0 0 1px rgba(62,110,176,.18);
  --shadow-sm: 0 8px 20px rgba(10,16,28,.45);

  /* Max widths */
  --w-sm: 680px;
  --w-md: 980px;
  --w-lg: 1180px;
  --app-scale: 1;
  @media (min-width: 1280px){
    :root{ --app-scale: 1.06; }
  }
}

/* ========== RESET / BASE ========== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; font-size: calc(16px * var(--app-scale)); }
body{
  margin:0;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 50% 120%, rgba(108,48,255,.12), transparent 55%),
    radial-gradient(900px 600px at -10% -10%, rgba(67,132,255,.10), transparent 55%),
    var(--bg);
  background-attachment: fixed;
}

/* smooth focus */
:focus-visible{ outline:3px solid rgba(63,111,177,.65); outline-offset:2px; }

/* media defaults */
img,svg,canvas,video{ max-width:100%; display:block; }

/* links */
a{ color:var(--primary); text-decoration:underline; }
a:hover,a:focus{ color:#83b6ff; }

/* ========== TYPOGRAPHY ========== */
h1,h2,h3,h4{
  margin:0 0 0rem;
  line-height:1.15;
  letter-spacing:.2px;
}
h1{ color:var(--heading); font-weight:800; font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2{ color:var(--primary); font-weight:800; font-size: clamp(1.1rem, 2.6vw, 2rem); }
h3{ color:var(--text);    font-weight:700; font-size: clamp(1 rem, 1.6vw, 1.4rem); }
.lead, .muted, .sub, .help, .description{ color:var(--muted); }

/* ========== LAYOUT ========== */
.container{
  width:min(100% - 2rem, var(--w-lg));
  margin-inline:auto;
}

.section{
  background:
    radial-gradient(1200px 900px at 50% 120%, rgba(139,92,246,.10), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:clamp(1rem, 2vw, 2rem);
  margin-block: clamp(1rem, 2vw, 2rem);
}

/* Cards — match screenshot: soft corners, dark gradient, gentle glow */
.card, .panel{
  background: linear-gradient(180deg, #171e2b 0%, #121827 100%);
  border:1px solid var(--stroke);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  padding:1.1rem;
}
.card h2, .panel h2{ margin-top:.1rem; }

/* Grids */
.grid{ display:grid; gap:1rem; }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }

@media (min-width: 820px){
  .grid-2{ grid-template-columns:1fr 1fr; }
  .grid-3{ grid-template-columns:1fr 1fr 1fr; }
}

/* ========== NAV / HEADER / FOOTER ========== */
header.site, nav.site, footer.site{
  background: linear-gradient(180deg, var(--surface) 0%, #0e1320 100%);
  border-top:1px solid var(--stroke);
  border-bottom:1px solid var(--stroke);
  box-shadow:var(--shadow-sm);
}
.site .inner{
  max-width:var(--w-lg);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1rem;
}
.nav-brand{
  color:var(--heading);
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
}
.nav-links{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.nav-links a{
  text-decoration:none;
  color:var(--text);
  padding:.45rem .65rem;
  border-radius:var(--r-sm);
}
.nav-links a:hover{ background:rgba(255,255,255,.06); }

@media (max-width: 720px){
  .site .inner{ flex-wrap:wrap; }
  .nav-links{ width:100%; }
}

/* ========== FORMS ========== */
label{ color:var(--primary); font-weight:700; display:inline-block; margin:.35rem 0 .25rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea, .input{
  width:100%;
  background:var(--input);
  color:var(--text);
  border:1px solid var(--input-brd);
  border-radius:var(--r-sm);
  padding:.6rem .7rem;
  line-height:1.35;
  outline:none;
}
textarea{ min-height:120px; resize:vertical; }
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:focus, select:focus, textarea:focus, .input:focus{
  border-color:var(--input-focus);
  box-shadow:0 0 0 3px rgba(62,111,177,.25);
}

/* Inline number field for IL-style controls */
.input-inline-num{ width:6.2rem; text-align:right; }

/* Form rows */
.form-row{ display:grid; gap:.75rem; }
@media (min-width: 740px){
  .form-row--2{ grid-template-columns:1fr 1fr; }
  .form-row--3{ grid-template-columns:1fr 1fr 1fr; }
}

/* ========== BUTTONS ========== */
button, .btn, [type="button"], [type="submit"]{
  border-radius:var(--r-sm);
  border:1px solid #7f8ea7;
  color:#ecf3ff;
  background:linear-gradient(180deg, #5b00f9 0%, #000000 100%);
  box-shadow:0 1.5px 6px rgba(0,0,0,.35), 0 .5px 1px rgba(255,255,255,.06) inset;
  font-weight:700;
  letter-spacing:.02em;
  padding:.55rem .85rem;
  cursor:pointer;
}
button:hover,.btn:hover,button:focus,.btn:focus{
  background:linear-gradient(180deg, #36507a 0%, #2a3a55 100%);
  border-color:#98a4b7;
  color:#fff;
  box-shadow:0 2px 10px rgba(29,52,84,.35);
}
.btn.primary{
  background:linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  border-color:#6b8fbe;
  color:#fff;
}
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{
  background:transparent; border-color:var(--stroke);
}
.btn.danger{
  background:linear-gradient(180deg, var(--danger-1) 0%, var(--danger-2) 100%);
  border-color:#9b5858;
  color:#fff6f6;
}

/* Pills / badges */
.badge,.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .6rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  border:1px solid var(--stroke);
  font-size:.88rem;
}

/* ========== TABLES (sleek modal/table look) ========== */
.table-wrap{
  background: linear-gradient(180deg, #0f1420 0%, #0c111a 100%);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}
table{ width:100%; border-collapse:collapse; }
thead th{
  color:var(--muted);
  font-weight:700;
  text-align:left;
  padding:.9rem .9rem;
  background:rgba(255,255,255,.06);
}
tbody td{
  border-top:1px solid var(--stroke);
  padding:.85rem .9rem;
}
tbody tr{
  background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
}
tbody tr:nth-child(2n){
  background: linear-gradient(180deg, #0e1320 0%, #0c111b 100%);
}
tbody tr:hover{ background: rgba(255,255,255,.04); }

/* ========== MODALS (match screenshot: rounded, subtle glow) ========== */
.backdrop, .modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal, .dialog, [role="dialog"]{
  position:fixed; inset: 4vh 50% auto;
  transform: translateX(-50%);
  width:min(100% - 2rem, var(--w-md));
  z-index:1000;
}
.modal .content, .dialog .content, [role="dialog"] .content,
.modal-content{
  background: radial-gradient(1200px 900px at 50% 120%, rgba(108,48,255,.12), transparent 60%),
              linear-gradient(180deg, #0e1420 0%, #0c1119 100%);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: var(--shadow-lg);
  overflow:hidden;
}
.modal-header, .dialog-header{
  padding:1rem 1.2rem;
  border-bottom:1px solid var(--stroke);
  color:var(--heading);
  font-weight:800;
  background: linear-gradient(180deg, #101827 0%, #0f1522 100%);
}
.modal-body, .dialog-body{ padding:1rem 1.2rem; }
.modal-footer, .dialog-footer{
  padding: .8rem 1.2rem;
  border-top:1px solid var(--stroke);
  display:flex; gap:.5rem; justify-content:flex-end;
}

@media (max-width: 700px){
  .modal, .dialog, [role="dialog"]{
    inset: 2vh 0 auto; transform:none; width:100%;
  }
}

/* ========== ALERTS ========== */
.alert{
  border:1px solid var(--stroke);
  border-radius:var(--r-md);
  background: rgba(255,255,255,.04);
  padding:.9rem 1rem;
}
.alert.success{ border-color:#2f7a64; background: rgba(87,192,155,.12); }
.alert.warn{    border-color:#7b6124; background: rgba(226,181,102,.14); }
.alert.danger{  border-color:#8d2a2a; background: rgba(222,112,112,.14); }

/* ========== HERO / BANNERS (like the “One System, Any Setting”) ========== */
.hero{
  text-align:center;
  padding: clamp(2rem, 7vw, 5rem) 1rem;
  background: transparent;
}
.hero h1{ margin-bottom: 1.2rem; }
.hero .tiles{
  display:grid; gap:1.2rem;
  grid-template-columns:1fr;
  margin-top: clamp(1rem, 2vw, 2rem);
}
.hero .tile{
  background: linear-gradient(180deg, #191f2b 0%, #131a28 100%);
  border:1px solid var(--stroke);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1rem, 2vw, 1.6rem);
  text-align:left;
}
@media (min-width: 980px){
  .hero .tiles{ grid-template-columns:1fr 1fr; }
}

/* ========== UTILITIES ========== */
.center{ text-align:center; }
.right{ text-align:right; }
.muted{ color:var(--muted); }
.mt-0{ margin-top:0!important; }
.mt-2{ margin-top:.5rem!important; }
.mt-4{ margin-top:1rem!important; }
.mb-0{ margin-bottom:0!important; }
.mb-4{ margin-bottom:1rem!important; }
.p-0{ padding:0!important; }
.p-2{ padding:.5rem!important; }
.p-4{ padding:1rem!important; }
.round{ border-radius: var(--r-md)!important; }
.hidden{ display:none!important; }

/* ========== MOTION SAFETY ========== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important;
     transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* === Character Sheet — Dark Skin + Compact Type (DROP AT END OF style.css) === */

/* quick knobs: change these 4 lines to tune sizes */
:root{
  --cs-base: 0.92rem;                                /* body text */
  --cs-h1: clamp(1.1rem, 1.7vw, 1.65rem);             /* name */
  --cs-h2: clamp(1.05rem, 1.7vw, 1.45rem);           /* subhead */
  --cs-h3: clamp(0.98rem, 1.2vw, 1.18rem);           /* section titles */
}


/* container */
.char-sheet{
  /* matches: bg-gradient-to-b from-black via-[#07020f] to-[#0e041b] */
  background: linear-gradient(to bottom, #000000 0%, #07020f 50%, #0e041b 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(10,16,28,.55), 0 0 0 1px rgba(62,110,176,.18);
  padding: clamp(1rem, 2vw, 1.5rem);
  color: var(--text, #eaf1ff);
  font-size: var(--cs-base);
}

/* header */
.char-header{
  background: linear-gradient(180deg, #101827 0%, #0f1522 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 14px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}
.char-core h1{ font-size: var(--cs-h1); color: #fff; margin: 0 0 .25rem; font-weight: 800; }
.char-core h2{ font-size: var(--cs-h2); color: var(--primary, #5fa0ff); margin: 0 0 .5rem; font-weight: 800; }
.char-subfields{ display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; color: var(--muted, #b8c7de); }
.char-subfields strong{ color: var(--primary, #5fa0ff); }

/* sections */
.char-section{
  background: linear-gradient(180deg, #121826 0%, #0f1522 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 14px;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 8px 20px rgba(10,16,28,.45);
}
.char-section h3{
  font-size: var(--cs-h3);
  color: var(--primary, #5fa0ff);
  margin: 0 0 .6rem;
  font-weight: 800;
}

/* definition lists */
.char-section dl{
  display: grid;
  gap: .65rem .9rem;
  grid-template-columns: 160px 1fr;
}
.char-section dt{
  color: var(--muted, #b8c7de);
  font-weight: 600;
}
.char-section dd{ margin: 0; }

/* details row */
.char-details .char-details-row{
  display: grid;
  gap: .5rem .75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 880px){
  .char-details .char-details-row{ grid-template-columns: repeat(6, 1fr); }
}
/* dark tiles for HP / DHP / Tokens / Age / Height / Weight */
.char-details .char-details-row span{
  background: linear-gradient(180deg, #121826 0%, #0f1522 100%);
  border: 1px solid var(--stroke, #253244);
  color: var(--text, #eaf1ff);
  border-radius: 12px;
  padding: .55rem .7rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
}
.char-details .char-details-row span strong{
  color: var(--primary, #5fa0ff);
  font-weight: 700;
}

/* attributes grid: 1→2 columns */
.char-attributes-grid{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;          /* mobile: single column */
}
@media (min-width: 720px){
  .char-attributes-grid{ grid-template-columns: 1fr 1fr; }  /* tablet/desktop: two columns */
}
/* remove/disable any previous @media that made it 3 columns */


/* attribute cards */
.char-attribute-card{
  background: linear-gradient(180deg, #171e2b 0%, #121827 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 14px;
  padding: .9rem;
  box-shadow: 0 8px 20px rgba(10,16,28,.45);
}
.char-attribute-header{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .4rem;
}
.char-attribute-label{ font-weight: 700; letter-spacing: .2px; }
.char-attribute-value{
  color: var(--muted, #b8c7de);
  font-weight: 600;
  background: rgba(255,255,255,.06);
  padding: .12rem .5rem;
  border: 1px solid var(--stroke, #253244);
  border-radius: 999px;
}
.char-attr-desc{ color: var(--muted, #b8c7de); }
.char-attr-desc .attr-block{
  display: grid; gap: .25rem .6rem; grid-template-columns: auto 1fr;
}
.char-attr-desc .attr-block > strong[style*="1.2em"]{ font-size: 1.05em !important; }
.char-attr-desc .attr-block > em[style*=".8em"]{ font-size: .95em !important; color: var(--muted, #b8c7de); font-style: normal; opacity: .9; }
.char-attr-desc .attr-block > strong[style*=".8em"]{ font-size: .92em !important; color: var(--text, #eaf1ff); }

/* lists (skills / powers) */
.char-list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .5rem;
}
.char-list li{
  background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 12px;
  padding: .6rem .8rem;
  display: flex; justify-content: space-between; align-items: center;
}
.char-skill-points, .char-power-points{ color: var(--muted, #b8c7de); }

/* footer buttons */
.char-sheet .ld-btn{
  display: inline-block;
  border: 1px solid #7f8ea7;
  border-radius: 10px;
  color: #ecf3ff; text-decoration: none;
  background: linear-gradient(180deg, #2a3a55 0%, #1f2a3e 100%);
  padding: .52rem .8rem;
  font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 1.5px 6px rgba(0,0,0,.35), 0 .5px 1px rgba(255,255,255,.06) inset;
  margin: .25rem .35rem;
}

.char-sheet a.ld-btn {
  display: inline-block;
  text-decoration: none;
  border: 1px solid #7f8ea7;
  border-radius: 10px;
  color: #ecf3ff;
  background: linear-gradient(180deg, #2a3a55 0%, #1f2a3e 100%);
  padding: .52rem .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 1.5px 6px rgba(0,0,0,.35), 0 .5px 1px rgba(255,255,255,.06) inset;
  margin: .25rem .35rem;
  cursor: pointer;   /* make it behave like a button */
}
.char-sheet a.ld-btn:hover {
  background: linear-gradient(180deg, #36507a 0%, #2a3a55 100%);
}
.char-sheet .ld-btn:hover{ background: linear-gradient(180deg, #36507a 0%, #2a3a55 100%); }

/* “special windows” (popups / modals used by the sheet) */
.char-sheet .table-wrap,
.char-sheet .popup,
.char-sheet .modal,
.char-sheet .dialog,
.char-sheet [role="dialog"]{
  background: linear-gradient(180deg, #0f1420 0%, #0c111a 100%);
  border: 1px solid var(--stroke, #253244);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(10,16,28,.55), 0 0 0 1px rgba(62,110,176,.18);
}

/* mobile tweaks */
@media (max-width: 700px){
  .char-section dl{ grid-template-columns: 1fr; }
  .char-attribute-header{ align-items: center; }
}

/* Quick knobs for sizing */
:root{
  --cs-base: 0.95rem;                              /* body text */
  --cs-h1: clamp(1.45rem, 2.3vw, 2.0rem);          /* name */
  --cs-h2: clamp(1.05rem, 1.6vw, 1.35rem);         /* concept */
  --cs-h3: clamp(0.98rem, 1.2vw, 1.15rem);         /* section titles */
}

/* Container with the exact gradient you asked for */
.char-sheet {
  max-width: 760px;
  margin: 2em auto 3em auto;
  padding: 1.2em 1em 1.4em 1em;
  background: linear-gradient(to bottom, #000000 0%, #07020f 50%, #0e041b 100%);
  border-radius: 18px;
  border: 1px solid #253244;
  box-shadow: 0 18px 45px rgba(10,16,28,.55), 0 0 0 1px rgba(62,110,176,.18);
  color: #eaf1ff;
  font-size: var(--cs-base);
}

/* Header box (portrait + name) */
.char-header {
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin-bottom: 1.2em;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #0e1421 0%, #0c111b 100%);
  border: 1px solid #253244;
  border-radius: 14px;
  padding: .8em .9em;
  box-shadow: 0 8px 20px rgba(10,16,28,.45);
}
.char-portrait {
  width: 120px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
  object-fit: cover;
}
.char-core { flex: 1 1 260px; min-width: 0; }
.char-core h1 {
  margin: 0;
  font-size: var(--cs-h1);
  color: #ffffff;
  letter-spacing: .02em;
  font-weight: 800;
}
.char-core h2 {
  margin: .15em 0 .5em 0;
  font-size: var(--cs-h2);
  color: #5fa0ff;
  font-weight: 800;
  letter-spacing: .02em;
}
.char-subfields {
  display: flex; flex-wrap: wrap; gap: .8em 1.2em;
  font-size: .98em; color: #b8c7de;
}
.char-subfields strong { color: #5f9fff5a; }

/* Sections */
.char-section {
  margin-bottom: 1.2em;
  background: linear-gradient(180deg, #121826 0%, #0f1522 100%);
  border: 1px solid #253244;
  border-radius: 14px;
  padding: .9em 1em;
  box-shadow: 0 8px 20px rgba(10,16,28,.45);
}
.char-section h3 {
  font-size: var(--cs-h3);
  color: #5fa0ff;
  margin: 0 0 .55em;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Definition lists */
.char-section dl {
  display: grid;
  gap: .55rem .9rem;
  grid-template-columns: 160px 1fr;
}
.char-section dt { color: #b8c7de; font-weight: 700; }
.char-section dd { margin: 0; color: #eaf1ff; }

/* Details row tiles (HP, DHP, etc.) */
.char-details .char-details-row {
  display: grid;
  gap: .6em .8em;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.char-details .char-details-row span{
  background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
  border: 1px solid #253244;
  color: #eaf1ff;
  border-radius: 12px;
  padding: .5em .7em;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.2rem;
}
.char-details .char-details-row span strong{
  color: #5fa0ff; font-weight: 800;
}
@media (min-width: 840px){
  .char-details .char-details-row { grid-template-columns: repeat(6, 1fr); }
}

/* Attributes grid — 1 column on mobile → 2 columns on wider screens */
.char-attributes-title {
  font-size: calc(var(--cs-h3) + .15rem);
  margin-bottom: .6em;
  color: #5fa0ff;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}
.char-attributes-grid {
  display: grid;
  grid-template-columns: 1fr;             /* mobile */
  gap: 1rem 1.2rem;
}
@media (min-width: 720px){
  .char-attributes-grid { grid-template-columns: 1fr 1fr; } /* tablet/desktop: two per row */
}

/* Attribute card */
.char-attribute-card {
  background: linear-gradient(180deg, #171e2b 0%, #121827 100%);
  padding: .9em 1em;
  border-radius: 14px;
  border: 1px solid #253244;
  box-shadow: 0 8px 20px rgba(10,16,28,.45);
  display: flex; flex-direction: column;
}
.char-attribute-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .45em;
}
.char-attribute-label { font-weight: 800; letter-spacing: .02em; }
.char-attribute-value{
  color: #b8c7de; font-weight: 700; font-size: .95em;
  background: rgba(255,255,255,.06);
  padding: .12rem .5rem;
  border: 1px solid #253244;
  border-radius: 999px;
}

/* Attribute description (we override inline font-size hints to be consistent) */
.char-attr-desc { color: #b8c7de; }
.char-attr-desc .attr-block{
  display: grid; column-gap: .5em; row-gap: .35em; grid-template-columns: auto 1fr;
}
.char-attr-desc .attr-block > strong[style*="1.2em"]{ font-size: 1.05em !important; }
.char-attr-desc .attr-block > em[style*=".8em"]{ font-size: .95em !important; font-style: normal; opacity: .9; color: #b8c7de !important; }
.char-attr-desc .attr-block > strong[style*=".8em"]{ font-size: .92em !important; color: #eaf1ff !important; }
.char-attr-desc .attr-block span { font-size: .92em; color: #d9e5ff; }

/* Skills / Powers list */
.char-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .5rem;
}
.char-list li {
  background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
  border: 1px solid #253244;
  border-radius: 12px;
  padding: .55em .8em;
  color: #eaf1ff;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
}
.char-skill-notes { font-style: italic; color: #b8c7de; }
.char-skill-points, .char-power-points { font-weight: 800; color: #be955b; }

/* Footer buttons */
.char-sheet .ld-btn{
  display: inline-block; text-decoration: none;
  border: 1px solid #7f8ea7; border-radius: 10px;
  color: #ecf3ff;
  background: linear-gradient(180deg, #2a3a55 0%, #1f2a3e 100%);
  padding: .52rem .8rem;
  font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 1.5px 6px rgba(0,0,0,.35), 0 .5px 1px rgba(255,255,255,.06) inset;
  margin: .25rem .35rem;
}
.char-sheet .ld-btn:hover{ background: linear-gradient(180deg, #36507a 0%, #2a3a55 100%); }

/* Responsive */
@media (max-width: 700px) {
  .char-sheet { padding: .8em .5em 1.1em .5em; }
  .char-header { gap: .9em; }
  .char-portrait { width: 100px; }
}

/* --- Sitewide button look for <a class="ld-btn"> and <button class="ld-btn"> --- */
.ld-btn,
a.ld-btn,
button.ld-btn {
  display: inline-block;
  text-decoration: none !important;      /* kill default link underline */
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #7f8ea7 !important;
  border-radius: 10px;
  color: #ecf3ff !important;             /* override global a { color } */
  background: linear-gradient(180deg, #2a3a55 0%, #1f2a3e 100%) !important;
  padding: .52rem .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 1.5px 6px rgba(0,0,0,.35), 0 .5px 1px rgba(255,255,255,.06) inset;
  cursor: pointer;
}

.ld-btn:hover,
.ld-btn:focus,
a.ld-btn:hover,
a.ld-btn:focus,
button.ld-btn:hover,
button.ld-btn:focus {
  background: linear-gradient(180deg, #36507a 0%, #2a3a55 100%) !important;
  border-color: #98a4b7 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Danger variant */
.ld-btn-delete,
a.ld-btn.ld-btn-delete,
button.ld-btn.ld-btn-delete {
  background: linear-gradient(180deg, #d07171 0%, #9a3c3c 100%) !important;
  border-color: #9b5858 !important;
  color: #fff6f6 !important;
}
.ld-btn-delete:hover,
.ld-btn-delete:focus {
  filter: brightness(1.05);
}

body {
  font-family: 'Inter', sans-serif;
}
h1,h3, .char-core h1, .char-core h2 {
  font-family: "Bricolage Grotesque", sans-serif;
}
h2 {
font-size: clamp(1.2rem, 1.2vw, 1.2rem); 
}

/* Full-page aurora background */
.page-bg{
  position: relative;
  background:
    radial-gradient(1100px 800px at 50% 120%, rgba(108,48,255,.10), transparent 60%),
    radial-gradient(900px 700px at -10% -10%, rgba(67,132,255,.12), transparent 55%),
    #0a0d12; /* your --bg */
  background-attachment: fixed;
}

.page-bg::before{
  content:"";
  position: fixed; inset:-10vh -10vw;
  pointer-events:none;
  background:
    conic-gradient(from 210deg at 70% 20%, rgba(95,160,255,.12), transparent 30%, rgba(190,149,91,.10), transparent 70%),
    radial-gradient(900px 500px at 85% 10%, rgba(95,160,255,.10), transparent 60%);
  filter: blur(40px) saturate(110%);
  opacity:.9;
  z-index: -1;
}
/* Wider char sheet on large screens */
.char-sheet{ max-width: 980px; margin: 2.2rem auto 3rem; }
@media (min-width: 1400px){
  .char-sheet{ max-width: 1120px; }
  .char-core h1{ font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  .char-core h2{ font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
}

/* Attributes: a touch more breathing room at desktop */
@media (min-width: 900px){
  .char-attributes-grid{ gap: 1.2rem 1.4rem; }
  .char-attribute-card{ padding: 1.05rem 1.15rem; }
}
/* Subtle neon edge + glow */
.u-neon {
  position: relative;
  border:1px solid #2a3952;        /* keeps your stroke tone */
  box-shadow:
    0 8px 22px rgba(10,16,28,.45),
    0 0 0 1px rgba(62,110,176,.18),
    0 0 24px rgba(95,160,255,.08);  /* soft aura */
}
.u-neon::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  padding:1px;                          /* gradient hairline */
  background: linear-gradient(180deg, rgba(95,160,255,.35), rgba(62,110,176,.15));
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* Shimmer sweep (on hover for “rare” cards/buttons) */
@keyframes fx-sheen {
  from { transform: translateX(-150%) rotate(10deg); }
  to   { transform: translateX(250%)  rotate(10deg); }
}
.u-sheen{
  position:relative; overflow:hidden;
}
.u-sheen::after{
  content:"";
  position:absolute; top:-30%; left:-30%; width:40%; height:160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-150%) rotate(10deg);
  transition: opacity .3s ease;
  opacity:0;
}
.u-sheen:hover::after{
  animation: fx-sheen 1200ms ease forwards;
  opacity:1;
}

/* Gradient text accent for headings (apply to h1/h2 spans) */
.fx-gradient-text{
  background: linear-gradient(180deg, #eaf1ff 0%, #9ec2ff 60%, #5fa0ff 100%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Fancy title underline */
.fx-underline{
  position:relative; display:inline-block; padding-bottom:.25rem;
}
.fx-underline::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, rgba(95,160,255,.0), rgba(95,160,255,.8), rgba(95,160,255,.0));
  filter: drop-shadow(0 0 6px rgba(95,160,255,.3));
}

/* Glassy chip (nice for points remaining) */
.fx-chip{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(127,142,167,.45);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
  border-radius: 999px; padding:.28rem .6rem; display:inline-flex; gap:.4rem;
}
.char-section{
  box-shadow:
    0 10px 26px rgba(10,16,28,.52),
    0 0 0 1px rgba(62,110,176,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.char-attribute-card{
  box-shadow:
    0 10px 22px rgba(10,16,28,.5),
    0 0 0 1px rgba(62,110,176,.15);
}
/* Match skill input to selects */
.skill-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  border: 1px solid #253244;
  border-radius: 8px;
  background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
  color: #eaf1ff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35) inset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Placeholder style */
.skill-select::placeholder {
  color: #7f8ea7;
  font-style: italic;
}

/* Hover / focus states */
.skill-select:hover {
  border-color: #5fa0ff;
}
.skill-select:focus {
  outline: none;
  border-color: #5fa0ff;
  box-shadow: 0 0 0 2px rgba(95,160,255,.3);
}

/* Datalist dropdown suggestions */
datalist option {
  background: #0e1421;
  color: #eaf1ff;
  padding: 0.3rem;
}

/* === Step 3 Skills Table — Mobile Stacking === */
#skillsTable {
  width: 100%;
  border-collapse: collapse;
}

#skillsTable th,
#skillsTable td {
  text-align: left;
  padding: .6rem .7rem;
}

/* Compact numeric input on desktop */
#skillsTable .skill-points {
  width: 6ch;
}

/* Attribute selects row on desktop */
.attr-select-row {
  display: flex;
  gap: .5rem;
}
.attr-select-row select {
  flex: 1 1 0;
  min-width: 0;
}

/* ----- Mobile (stack each row vertically) ----- */
@media (max-width: 650px) {
  #skillsTable thead {
    display: none; /* hide header on small screens */
  }

  #skillsTable tbody tr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #253244;
    border-radius: 12px;
    background: linear-gradient(180deg, #101623 0%, #0e1421 100%);
  }

  #skillsTable tbody td {
    display: block;
    width: 100%;
    padding: 0;
  }

  /* make all inputs expand full width */
  #skillsTable input,
  #skillsTable select,
  #skillsTable textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* stack the two attribute selects vertically */
  .attr-select-row {
    flex-direction: column;
    gap: .4rem;
  }

  /* widen points field on mobile */
  #skillsTable .skill-points {
    width: 100%;
  }

  /* remove button to right edge */
  #skillsTable .text-center {
    text-align: right;
  }
}

/* hamburger button hidden on desktop */
.nav-toggle {
  display: none;
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-top: .5rem;
  }
  .nav-links.open { display: flex; }
}
#cropperModal img { max-width: 100%; }

.rubik-vinyl-regular {
  font-family: "Rubik Vinyl", system-ui;
  font-weight: 400;
  font-style: normal;
}
.snippet-regular {
  font-family: "Snippet", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.lugrasimo-regular {
  font-family: "Lugrasimo", cursive;
  font-weight: 400;
  font-style: normal;
}
.jim-nightshade-regular {
  font-family: "Jim Nightshade", cursive;
  font-weight: 400;
  font-style: normal;
}

.bricolage-grotesque-ld {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.lora-ld {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.quicksand-ld {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}