/* =========================================================
   Caelian Vàel — Character Sheet · Styles (Liquid Glass)
   ========================================================= */
:root{
  --text-1:#f5f3ee;
  --text-2:rgba(245,243,238,0.62);
  --text-3:rgba(245,243,238,0.4);
  --glass-bg:rgba(255,255,255,0.07);
  --glass-bg-strong:rgba(255,255,255,0.13);
  --glass-bg-recessed:rgba(0,0,0,0.18);
  --glass-border:rgba(255,255,255,0.20);
  --gold:#e8c37a;
  --gold-strong:#f5d99a;
  --celestial:#7fd4ff;
  --violet:#a98ce0;
  --rose:#e59a9a;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-pill:999px;
  --font-display:'Manrope', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Dark base behind everything so Safari's toolbar tint and overscroll
   bounce area match the sheet instead of showing white. */
html{background:#0c0f1c;color-scheme:dark;}
body{
  background:
    radial-gradient(1000px 700px at 12% -8%, rgba(94,200,255,0.32), transparent 60%),
    radial-gradient(900px 600px at 112% 8%, rgba(232,195,122,0.26), transparent 55%),
    radial-gradient(800px 900px at 50% 115%, rgba(139,107,209,0.30), transparent 60%),
    linear-gradient(160deg, #140c26 0%, #0c0f1c 55%, #090a12 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--text-1);
  font-family:var(--font-body);
  padding-bottom:104px;
  min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:var(--gold);color:#1a1408;}
button, input, textarea{font-family:inherit;}

/* Hide the browser's up/down arrows on number fields. They take space on
   the right, which pushes centered numbers off-center and covers narrow
   fields like BAB. Mobile keyboards still show the number pad. */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
:focus-visible{outline:2px solid var(--celestial);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- Header ---------- */
.dossier-header{position:relative;padding:calc(30px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));text-align:center;}
.seal{
  width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  background:var(--glass-bg-strong);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;color:var(--gold-strong);
}
.seal svg{width:30px;height:30px;}
.stamp{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2.5px;color:var(--gold);text-transform:uppercase;opacity:.85;}
.case-no{color:var(--gold-strong);}
/* View mode: plain text that wraps instead of getting cut by input boxes */
.char-name{
  font-family:var(--font-display);font-size:clamp(22px,7vw,30px);font-weight:800;color:var(--text-1);
  margin-top:8px;padding:4px 0;line-height:1.2;overflow-wrap:anywhere;
}
.char-sub{font-size:13px;color:var(--celestial);margin-top:2px;line-height:1.5;overflow-wrap:anywhere;}
.char-sub .sub-sep{color:var(--text-3);margin:0 5px;}
.char-sub .sub-part{white-space:nowrap;}
/* Edit mode: labeled full-width fields */
.header-edit{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px auto 0;max-width:420px;text-align:left;}
.header-edit[hidden]{display:none;}
.he-field.he-wide{grid-column:1 / -1;}
.he-field label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-2);text-transform:uppercase;margin-bottom:3px;}
.he-field input{
  width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  color:var(--text-1);font-family:var(--font-body);font-size:16px;padding:8px 10px;
}
.he-field input:focus{outline:none;border-color:var(--celestial);box-shadow:0 0 0 3px rgba(127,212,255,0.20);}
.header-edit-btn{
  margin-top:12px;padding:6px 14px;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);
  border-radius:var(--radius-pill);color:var(--celestial);font-family:var(--font-mono);font-size:11px;
  letter-spacing:1px;text-transform:uppercase;
}
.header-edit-btn[aria-pressed="true"]{background:rgba(127,212,255,0.18);border-color:rgba(127,212,255,0.55);}
.section-edit-btn{
  padding:4px 11px;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);
  border-radius:var(--radius-pill);color:var(--celestial);font-family:var(--font-mono);font-size:10px;
  letter-spacing:1px;text-transform:uppercase;flex:none;
}
.section-edit-btn[aria-pressed="true"]{background:rgba(127,212,255,0.18);border-color:rgba(127,212,255,0.55);}
.save-status{
  position:absolute;top:calc(12px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));font-family:var(--font-mono);font-size:9.5px;letter-spacing:1px;
  color:var(--gold-strong);text-transform:uppercase;opacity:0;transition:opacity .5s;
}
.save-status.show{opacity:.85;}

/* ---------- Layout ---------- */
.content{padding:4px 16px 8px;max-width:640px;margin:0 auto;}
.panel{display:none;}
.panel.active{display:block;animation:fade .2s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.card{
  position:relative;overflow:hidden;background:var(--glass-bg);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
  padding:16px 16px 17px;margin-bottom:16px;
}
.card::before{
  content:'';position:absolute;top:-45%;left:-15%;width:65%;height:120%;
  background:linear-gradient(120deg, rgba(255,255,255,0.14), transparent 65%);
  transform:rotate(8deg);pointer-events:none;
}
.card > *{position:relative;}
.card h2{
  font-family:var(--font-display);font-size:12.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold-strong);margin:0 0 13px;font-weight:700;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,0.1);
}
/* Card heading with an edit toggle on the right */
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,0.1);margin:0 0 13px;padding-bottom:9px;}
.card-head h2{border:none;margin:0;padding:0;}

/* ---------- Feats ---------- */
.feat-entry{padding:9px 12px;margin-bottom:8px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}
.feat-name{font-weight:700;color:var(--text-1);font-size:14.5px;overflow-wrap:anywhere;}
.feat-type{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.5px;color:var(--gold);font-weight:400;margin-left:8px;white-space:nowrap;}
.feat-summary{font-size:13px;line-height:1.4;color:var(--text-2);margin-top:3px;}
.feat-unknown{font-style:italic;color:var(--text-3);}
.feat-live{font-size:12.5px;line-height:1.4;color:var(--celestial);margin-top:4px;}
.feat-note{font-size:12.5px;line-height:1.4;color:var(--text-1);margin-top:6px;padding-left:8px;border-left:2px solid var(--gold);white-space:pre-wrap;}

/* Attacks view (Combat tab) */
.attack-entry{padding:10px 12px;margin-bottom:8px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}
.attack-top{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap;}
.attack-name{font-weight:700;color:var(--text-1);font-size:15px;overflow-wrap:anywhere;}
.attack-nums{font-family:var(--font-mono);font-size:15px;color:var(--gold-strong);white-space:nowrap;}
.attack-notes{font-size:12.5px;line-height:1.4;color:var(--text-2);margin-top:4px;}
/* Column labels above the attack edit rows */
.list-head{display:flex;gap:6px;margin-bottom:4px;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-3);text-transform:uppercase;}
.list-head span{padding-left:4px;}
.list-head .col-name{flex:1.4;}
.list-head .col-mid{flex:1;}
.list-head .col-small{flex:0 0 54px;}
.list-head .del-gap{flex:0 0 30px;padding:0;}

/* Phone: each attack edits as a small stacked form — name + delete, then atk/dmg, then notes */
@media (max-width:767px){
  .attack-head{display:none;}
  #attacksList .list-row{flex-wrap:wrap;padding:8px;margin-bottom:8px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);}
  #attacksList .list-row .col-name{flex:1 1 calc(100% - 36px);order:0;min-width:0;}
  #attacksList .list-row .row-del{order:1;}
  #attacksList .list-row .col-small{flex:1 1 0;order:2;min-width:0;}
  #attacksList .list-row .col-mid{flex:1 1 100%;order:3;}
}

/* Special abilities view */
.trait-list{list-style:none;margin:0;padding:0;}
.trait-list li{position:relative;padding:7px 0 7px 18px;font-size:14px;line-height:1.4;color:var(--text-1);border-top:1px solid rgba(255,255,255,0.06);}
.trait-list li:first-child{border-top:none;}
.trait-list li::before{content:"✦";position:absolute;left:0;top:8px;font-size:10px;color:var(--gold);}
.trait-list li.hint{padding-left:0;border:none;}
.trait-list li.hint::before{display:none;}

/* Power Attack calculator on the Combat tab */
.pa-block{padding:10px 12px;margin-bottom:10px;border-radius:12px;background:rgba(127,212,255,0.07);border:1px solid rgba(127,212,255,0.3);}
.pa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.pa-title{font-weight:700;color:var(--text-1);}
.pa-stepper{display:flex;align-items:center;gap:8px;}
.pa-stepper button{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);border:1px solid var(--glass-border);color:var(--text-1);font-size:18px;line-height:1;}
.pa-stepper button:disabled{opacity:.35;}
.pa-stepper span{min-width:3ch;text-align:center;font-family:var(--font-mono);font-size:15px;color:var(--celestial);}
#paSummary{margin:0 0 6px;}
.pa-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-top:1px solid rgba(255,255,255,0.06);}
.pa-name{color:var(--text-2);overflow-wrap:anywhere;}
.pa-val{font-family:var(--font-mono);color:var(--text-1);white-space:nowrap;}

.hint{font-size:11.5px;color:var(--text-2);font-style:italic;margin:-5px 0 10px;line-height:1.4;}

/* ---------- Ability scores ---------- */
.ability-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.ability-cell{background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:9px 4px;text-align:center;}
.ability-cell label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--text-2);margin-bottom:3px;}
.ability-cell input{width:100%;padding:0;margin:0;background:transparent;border:none;color:var(--text-1);font-family:var(--font-mono);font-size:19px;font-weight:600;text-align:center;}
.ability-cell input:focus{outline:none;}
.ability-mod{font-family:var(--font-mono);font-size:12.5px;color:var(--celestial);margin-top:1px;}

/* ---------- Stat boxes (now can hold either input or computed value) ---------- */
.stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.stat-box{flex:1;min-width:64px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:8px 4px;text-align:center;}
.stat-box label{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;color:var(--text-2);margin-bottom:4px;text-transform:uppercase;}
.stat-box .signed{display:flex;align-items:center;justify-content:center;gap:0;}
.stat-box .signed span{font-family:var(--font-mono);font-size:16px;color:var(--text-2);}
.stat-box .signed input{width:3ch;flex:0 0 auto;padding:0;text-align:left;font-size:16px;}
.stat-box input{width:100%;background:transparent;border:none;color:var(--text-1);font-family:var(--font-mono);font-size:16px;text-align:center;}
.stat-box input:focus{outline:none;}
.computed-value{font-family:var(--font-mono);font-size:16px;color:var(--text-1);}

/* ---------- HP block ---------- */
.hp-block{background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:13px 15px;margin-bottom:12px;}
.hp-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.hp-top label{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--text-2);text-transform:uppercase;}
.hp-values{display:flex;align-items:baseline;gap:3px;font-family:var(--font-mono);}
.hp-values input{background:transparent;border:none;color:var(--text-1);font-size:25px;font-weight:600;width:50px;text-align:right;}
.hp-values input:focus{outline:none;}
.hp-sep{color:var(--text-2);font-size:17px;}
.hp-max{color:var(--text-2) !important;font-size:15px !important;width:42px !important;text-align:left !important;font-weight:400 !important;}
.hp-bar-track{height:6px;background:rgba(0,0,0,0.3);border-radius:3px;overflow:hidden;margin-bottom:10px;}
.hp-bar-fill{height:100%;background:linear-gradient(90deg,var(--rose),var(--gold-strong));transition:width .3s;}
.resist-block{margin-top:2px;}
.resist-title{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--text-2);text-transform:uppercase;margin:0 0 8px 2px;}
.resist-block .stat-row{flex-wrap:nowrap;gap:6px;}
.resist-block .stat-box{min-width:0;}
.resist-block .hint{margin:0;}
.hp-steppers{display:flex;gap:6px;}
.hp-steppers button{flex:1;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);color:var(--text-1);border-radius:var(--radius-pill);padding:9px 0;font-family:var(--font-mono);font-size:13px;}
.hp-steppers button:active{background:var(--gold);color:#1a1408;border-color:var(--gold);}

/* ---------- Breakdown disclosure ---------- */
details.breakdown{margin-top:4px;}
details.breakdown summary{
  cursor:pointer;list-style:none;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;
  color:var(--celestial);text-transform:uppercase;padding:9px 0;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
}
details.breakdown summary::-webkit-details-marker{display:none;}
details.breakdown summary::after{content:' ▾';}
details.breakdown[open] summary::after{content:' ▴';}
.bd-group{margin-top:10px;}
.bd-title{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2);margin-bottom:6px;}
.bd-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.bd-field{flex:1;min-width:52px;text-align:center;}
.bd-field label{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.8px;color:var(--text-3);text-transform:uppercase;margin-bottom:3px;}
.bd-field input, .bd-field .auto-readout{
  width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:8px;
  color:var(--text-1);font-family:var(--font-mono);font-size:13px;text-align:center;padding:6px 2px;
}
.bd-field .auto-readout{color:var(--celestial);background:rgba(127,212,255,0.08);border-color:rgba(127,212,255,.25);}
.bd-field input:focus{outline:none;border-color:var(--celestial);}
.save-bd-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap;}
.save-bd-label{font-family:var(--font-mono);font-size:11px;color:var(--gold-strong);width:36px;flex:0 0 auto;}

/* ---------- List rows ---------- */
.list-row{display:flex;gap:6px;align-items:center;margin-bottom:7px;}
.list-row input, .list-row textarea{
  background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  color:var(--text-1);font-family:var(--font-body);font-size:13px;padding:8px 9px;width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.list-row input:focus, .list-row textarea:focus{outline:none;border-color:var(--celestial);box-shadow:0 0 0 3px rgba(127,212,255,0.20);}
.list-row textarea{resize:vertical;min-height:36px;line-height:1.4;}
.list-row .col-name{flex:1.4;}
.list-row .col-mid{flex:1;}
.list-row .col-small{flex:0 0 54px;}
.row-del{background:rgba(229,154,154,0.12);border:1px solid rgba(229,154,154,0.4);color:var(--rose);border-radius:50%;width:30px;height:30px;flex:0 0 auto;font-size:13px;line-height:1;}
.row-del:active{background:var(--rose);color:#2a1414;}
.row-del.small{width:26px;height:26px;font-size:11px;}
.add-row-btn{width:100%;margin-top:2px;padding:10px;background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.3);color:var(--gold-strong);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:13px;font-weight:500;}
.add-row-btn:active{border-color:var(--gold);background:rgba(232,195,122,0.1);}
.add-row-btn.small{padding:7px;font-size:12px;margin-top:6px;}
.row-check{flex:0 0 auto;width:20px;height:20px;accent-color:var(--gold);}

/* ---------- Spell level blocks ---------- */
.spell-level-block{background:var(--glass-bg-recessed);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:11px 12px 12px;margin-bottom:12px;}
.slvl-head{display:grid;grid-template-columns:44px 1fr 1fr 1fr 30px;gap:6px;align-items:end;margin-bottom:10px;}
.slvl-head .bd-field{min-width:0;}
.slvl-spells{margin-top:2px;}

/* ---------- Ledger ---------- */
.ledger-total{display:flex;justify-content:space-between;align-items:baseline;padding:11px 14px;background:rgba(232,195,122,0.08);border:1px solid rgba(232,195,122,0.4);border-radius:var(--radius-md);margin-bottom:12px;}
.ledger-total .lbl{font-family:var(--font-mono);font-size:11px;letter-spacing:1.5px;color:var(--gold);text-transform:uppercase;}
.ledger-total .amt{font-family:var(--font-mono);font-size:22px;color:var(--gold-strong);font-weight:600;}

/* ---------- Text blocks ---------- */
.text-block{width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-1);font-family:var(--font-body);font-size:13.5px;line-height:1.55;padding:11px;min-height:88px;resize:vertical;transition:border-color .15s, box-shadow .15s;}
.text-block:focus{outline:none;border-color:var(--celestial);box-shadow:0 0 0 3px rgba(127,212,255,0.20);}
.domain-block{margin-bottom:14px;}
.domain-block:last-child{margin-bottom:0;}
.domain-block .domain-name{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;color:var(--gold-strong);text-transform:uppercase;margin-bottom:6px;display:block;}
.danger-btn{width:100%;padding:11px;margin-top:2px;background:rgba(229,154,154,0.08);border:1px solid rgba(229,154,154,0.5);color:var(--rose);border-radius:var(--radius-pill);font-size:13px;font-weight:500;}
.danger-btn:active{background:var(--rose);color:#2a1414;}

/* ---------- Tab bar ---------- */
.tab-bar{
  position:fixed;left:14px;right:14px;bottom:14px;margin-bottom:env(safe-area-inset-bottom);
  display:flex;gap:3px;padding:6px;background:var(--glass-bg-strong);
  backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);
  border:1px solid var(--glass-border);border-radius:26px;
  box-shadow:0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
  z-index:20;max-width:640px;margin-left:auto;margin-right:auto;
}
.tab-btn{flex:1;background:transparent;border:none;color:var(--text-2);font-family:var(--font-display);font-size:9.5px;letter-spacing:.2px;text-transform:uppercase;padding:11px 1px;border-radius:20px;font-weight:700;transition:background .15s, color .15s;}
.tab-btn.active{color:var(--gold-strong);background:rgba(255,255,255,0.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);}

/* ---------- Story page: banner + portrait ---------- */
.story-card{padding:0 !important;}
.story-card::before{display:none;}
.banner-wrap{position:relative;width:100%;aspect-ratio:16/9;background:rgba(255,255,255,0.05);overflow:hidden;border-radius:var(--radius-lg) var(--radius-lg) 0 0;cursor:pointer;}
.banner-img{width:100%;height:100%;object-fit:cover;display:none;}
.banner-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-2);font-size:12.5px;text-align:center;padding:0 20px;}
.banner-placeholder .plus{font-size:26px;color:var(--gold-strong);}
.img-edit-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:var(--glass-bg-strong);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);color:var(--text-1);font-size:14px;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.portrait-row{display:flex;align-items:flex-end;gap:12px;padding:0 16px;margin-top:-38px;position:relative;}
.portrait-circle{position:relative;width:76px;height:76px;border-radius:50%;overflow:hidden;background:var(--glass-bg-strong);border:3px solid #0c0f1c;box-shadow:0 6px 16px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;}
.portrait-img{width:100%;height:100%;object-fit:cover;display:none;}
.portrait-placeholder{color:var(--text-2);font-size:26px;}
.img-edit-btn.small{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;font-size:11px;}
.portrait-caption{padding-bottom:6px;}
.char-title{font-family:var(--font-display);font-size:17px;font-weight:800;color:var(--text-1);line-height:1.2;}
.char-subtitle{font-family:var(--font-body);font-size:12px;color:var(--celestial);margin-top:2px;}
.portrait-caption-pad{padding:14px 16px 16px;}

/* ---------- Balance power ---------- */
.power-block{margin:4px 0 6px;padding:12px 13px;border-radius:var(--radius-md);background:rgba(169,140,224,0.10);border:1px solid rgba(169,140,224,0.35);transition:background .2s,border-color .2s,box-shadow .2s;}
.power-block.active{background:rgba(127,212,255,0.14);border-color:rgba(127,212,255,0.6);box-shadow:0 0 18px rgba(127,212,255,0.25);}
.power-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.power-title{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--violet);}
.power-block.active .power-title{color:var(--celestial);}
.power-desc{font-size:12px;color:var(--text-2);margin-top:3px;line-height:1.4;}
.power-uses{font-family:var(--font-mono);font-size:12px;color:var(--text-2);white-space:nowrap;padding:3px 8px;border-radius:var(--radius-pill);border:1px solid var(--glass-border);}
.power-status{font-family:var(--font-display);font-weight:700;font-size:15px;margin:10px 0 9px;color:var(--text-1);}
.power-actions{display:flex;gap:6px;flex-wrap:wrap;}
.power-btn{flex:1;min-width:64px;padding:9px 6px;border-radius:var(--radius-pill);border:1px solid var(--glass-border);background:rgba(255,255,255,0.06);color:var(--text-1);font-size:12.5px;font-weight:500;}
.power-btn.primary{background:rgba(127,212,255,0.18);border-color:rgba(127,212,255,0.55);color:var(--celestial);}
.power-btn.ghost{background:transparent;color:var(--text-2);}
.power-btn:disabled{opacity:.35;}
.stat-box.buffed{border-color:rgba(127,212,255,0.6);box-shadow:0 0 12px rgba(127,212,255,0.25);}
.stat-box.buffed .computed-value{color:var(--celestial);}

/* ---------- Skills ---------- */
.skill-head,.skill-row{display:grid;grid-template-columns:22px 1fr 48px 44px 42px;gap:6px;align-items:center;}
.skill-head{margin:4px 0 6px;}
.skill-head span{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);text-align:center;}
.skill-head span:nth-child(2){text-align:left;}
.skill-row{padding:6px 0;border-top:1px solid rgba(255,255,255,0.07);}
.skill-row input[type=number]{width:100%;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);border-radius:8px;color:var(--text-1);font-family:var(--font-mono);font-size:13px;text-align:center;padding:6px 0;}
.skill-row input[type=number].over{border-color:var(--rose);color:var(--rose);}
.skill-row input[type=number]:focus{outline:none;border-color:var(--celestial);}
.skill-name{min-width:0;}
.skill-name input[type=text]{width:100%;background:transparent;border:none;border-bottom:1px dashed transparent;color:var(--text-1);font-size:13px;padding:1px 0;}
.skill-name input[type=text]:focus{outline:none;border-bottom-color:var(--celestial);}
.skill-name .nm{font-size:13px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.skill-meta{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.5px;color:var(--text-3);margin-top:2px;display:flex;gap:6px;align-items:center;}
.skill-meta select{background:transparent;border:1px solid var(--glass-border);border-radius:6px;color:var(--text-2);font-family:var(--font-mono);font-size:9.5px;padding:1px 2px;}
.skill-info{width:15px;height:15px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--text-2);padding:0;cursor:pointer;position:relative;}
.skill-info svg,.info-icon svg{width:100%;height:100%;display:block;}
.info-icon{display:inline-block;width:13px;height:13px;vertical-align:-2px;color:var(--text-2);}
.skill-info::after{content:"";position:absolute;inset:-10px;}
.skill-info[hidden]{display:none;}
.skill-info.boost{color:var(--celestial);}
.more-link{background:none;border:none;padding:0;font:inherit;font-style:normal;color:var(--celestial);cursor:pointer;white-space:nowrap;}
.skill-tip{position:fixed;z-index:60;max-width:min(300px, calc(100vw - 24px));padding:10px 12px;border-radius:var(--radius-sm);background:rgba(20,22,34,0.96);border:1px solid var(--glass-border);box-shadow:0 10px 30px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:12px;line-height:1.4;color:var(--text-1);}
.skill-tip[hidden]{display:none;}
.skill-tip-title{font-weight:600;color:var(--gold-strong);margin-bottom:4px;}
.skill-tip ul{margin:0;padding-left:16px;}
.skill-tip li{margin:2px 0;color:var(--text-2);}
.skill-meta .rm{background:none;border:none;color:var(--rose);font-size:10px;padding:0;}
.skill-total{font-family:var(--font-mono);font-size:14px;font-weight:600;text-align:center;color:var(--celestial);}
.skill-row.cls .skill-name .nm, .skill-row.cls .skill-name input{color:var(--gold-strong);}
.skill-total.na{color:var(--text-3);}
.skill-meta{flex-wrap:wrap;column-gap:4px;}
.skill-meta .ab-mod{color:var(--celestial);opacity:.8;white-space:nowrap;}

#domainBalance, #domainMagic{min-height:70px;}

/* ---------- Tablet & desktop ----------
   Phones keep the single column above. From tablet width the cards of each tab
   flow into columns (top to bottom, then the next column), so the sheet uses
   the extra width instead of stretching every card. */
@media (min-width:768px){
  .content{max-width:1000px;padding:8px 24px 16px;}
  .panel.active{column-count:2;column-gap:18px;}
  .card{break-inside:avoid;-webkit-column-break-inside:avoid;display:inline-block;width:100%;box-sizing:border-box;margin-bottom:18px;}
  .card[hidden]{display:none;}
  /* Combat: attack rows get the full width so their fields aren't squeezed */
  #panel-combat.active{column-count:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start;}
  #panel-combat > .card:first-child{grid-column:1 / -1;}
  #panel-combat .list-row .col-small, #panel-combat .list-head .col-small{flex-basis:76px;}
  /* Magic: domains and spells side by side */
  #panel-magic.active{column-count:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start;}
  #domainBalance, #domainMagic{min-height:130px;}
  #panel-combat .list-row .col-name, #panel-combat .list-head .col-name{flex:2;}
  #panel-combat .list-row .col-mid, #panel-combat .list-head .col-mid{flex:3;}
  /* Skills: the long skill list on the left, feats and abilities stacked on the right */
  #panel-skills.active{column-count:auto;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;align-items:start;}
  #panel-skills > .card:first-child{grid-row:1 / span 3;}
  #panel-skills > .card:not(:first-child){grid-column:2;}
  .tab-bar{max-width:620px;bottom:18px;}
  .tab-btn{font-size:11px;letter-spacing:.8px;padding:12px 4px;}
  body{padding-bottom:112px;}
}
@media (min-width:1280px){
  .content{max-width:1320px;}
  .panel.active{column-count:3;}
}
/* Mouse / trackpad: hover feedback and pointer cursors */
@media (hover:hover) and (pointer:fine){
  button, summary, .banner-wrap{cursor:pointer;}
  .tab-btn:hover:not(.active){color:var(--text-1);background:rgba(255,255,255,0.07);}
  .header-edit-btn:hover, .section-edit-btn:hover, .add-row-btn:hover{border-color:rgba(127,212,255,0.55);}
}