/* ===================================================================
   MAGIC · LAPLACE  —  estilo arcano
   =================================================================== */
:root{
  --bg-0:#06060d;
  --bg-1:#0c0d1a;
  --bg-2:#13152b;
  --ink:#e9e4f2;
  --ink-dim:#9a93b8;
  --ink-faint:#5d5878;
  --gold:#e8c373;
  --gold-deep:#a9863f;
  --cyan:#6fe0ff;
  --violet:#b693ff;
  --magenta:#ff7bd5;
  --line:#262a47;
  --line-soft:#1a1d33;
  --good:#5dff9b;
  --bad:#ff6b6b;
  --font: "Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-ui: "Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:
    radial-gradient(1200px 800px at 50% -10%, #1a1c38 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 110%, #1d1430 0%, transparent 55%),
    var(--bg-0);
  color:var(--ink);
  font-family:var(--font-ui);
  overflow:hidden;
  user-select:none;
}

/* ---- scenes ---- */
.scene{position:fixed; inset:0; display:none; flex-direction:column; opacity:0; transition:opacity .35s ease;}
.scene--active{display:flex; opacity:1;}

/* ---- buttons ---- */
.btn{
  font-family:var(--font-ui);
  font-size:14px; letter-spacing:.04em;
  color:var(--ink);
  background:linear-gradient(180deg,#1c1f3a,#13162b);
  border:1px solid var(--line);
  padding:11px 20px; border-radius:10px; cursor:pointer;
  transition:.18s; position:relative;
}
.btn:hover{border-color:var(--gold-deep); color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 0 1px rgba(232,195,115,.12) inset;}
.btn--primary{background:linear-gradient(180deg,#2a2350,#1a1633);
  border-color:var(--gold-deep); color:var(--gold);}
.btn--primary:hover{box-shadow:0 0 30px rgba(232,195,115,.3);}
.btn--ghost{background:transparent; border-color:var(--line-soft); color:var(--ink-dim);}
.btn--sm{padding:7px 13px; font-size:13px; border-radius:8px;}

/* =================================================================== MENU */
#scene-menu{align-items:center; justify-content:center;}
.menu-stars{position:absolute; inset:0; overflow:hidden;}
.menu-inner{position:relative; text-align:center; z-index:2;}
.menu-sigil{width:min(46vmin,360px); height:min(46vmin,360px); margin:0 auto;}
.menu-sigil svg{width:100%; height:100%;}
.title{
  font-family:var(--font); font-weight:600;
  font-size:clamp(38px,7vmin,84px); letter-spacing:.18em; margin:6px 0 2px;
  color:var(--ink);
  text-shadow:0 0 32px rgba(182,147,255,.35);
}
.title-dot{color:var(--gold); padding:0 .12em; text-shadow:0 0 24px var(--gold);}
.subtitle{color:var(--ink-dim); font-style:italic; letter-spacing:.05em; margin:0 0 28px;
  font-family:var(--font);}
.menu-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.menu-foot{color:var(--ink-faint); font-size:12px; margin-top:30px; letter-spacing:.1em;}

/* =================================================================== FORGE */
.forge-top{display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--line-soft); background:rgba(8,9,18,.55); backdrop-filter:blur(6px);}
/* size picker (REWORK F5: Básica/Média/Complexa no topo — substitui type+tier, ambos removidos) */
.size-picker{display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap;}
.size-chip{display:flex; flex-direction:column; align-items:center; line-height:1.1;
  padding:3px 14px; border:1px solid var(--line); border-radius:18px; cursor:pointer;
  background:#10122400; transition:.16s; color:var(--ink-dim);}
.size-chip:hover{border-color:var(--gold-deep); color:var(--ink);}
.size-chip.active{border-color:var(--gold); color:var(--gold);
  background:linear-gradient(180deg,rgba(232,195,115,.12),transparent);
  box-shadow:0 0 18px rgba(232,195,115,.18);}
.size-chip .si-name{font-size:12px; font-weight:600;}
.size-chip .si-slots{font-size:9px; color:var(--ink-faint); letter-spacing:.04em;}

.forge-body{flex:1; display:grid; grid-template-columns:280px 1fr 300px; min-height:0;}

/* palette */
.palette{border-right:1px solid var(--line-soft); display:flex; flex-direction:column; min-height:0;
  background:rgba(8,9,18,.35);}
.palette-tabs{display:flex; flex-wrap:wrap; gap:4px; padding:7px 8px;}
.ptab{font-size:10.5px; letter-spacing:.02em; padding:4px 8px; border-radius:6px; cursor:pointer;
  color:var(--ink-faint); border:1px solid transparent; transition:.15s;}
.ptab:hover{color:var(--ink);}
.ptab.active{color:var(--gold); border-color:var(--line); background:rgba(232,195,115,.07);}
.palette-grid{flex:1; min-height:60px; overflow-y:auto; display:grid; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:7px; padding:4px 10px 10px;}
.pal-item{aspect-ratio:1; border:1px solid var(--line-soft); border-radius:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s; position:relative;
  background:radial-gradient(circle at 50% 35%, #161a30, #0d0f1e);}
.pal-item:hover{border-color:var(--c,#888); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);}
.pal-item.selected{border-color:#fff; box-shadow:0 0 0 1px #fff, 0 0 22px var(--c,#888);}
.pal-item.disabled{opacity:.28; cursor:not-allowed; filter:grayscale(.6);}
.pal-item.disabled:hover{border-color:var(--line-soft); transform:none; box-shadow:none;}
.pal-item svg{width:72%; height:72%; color:var(--c,#cfcfe4);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--c,#888) 60%, transparent));}
.pal-item .lvl-badge{position:absolute; bottom:3px; right:4px; font-size:9px; color:var(--ink-faint);}
/* catálogo só-leitura (paleta esquerda): não aplica, só navega/tooltip */
.pal-item.is-catalog{cursor:help;}
.pal-item.is-catalog:hover{transform:none; box-shadow:0 0 14px color-mix(in srgb, var(--c,#888) 30%, transparent);}
/* picker do slot: cabeçalho de categoria + corpo rolável */
.sp-cat-h{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold,#e8c373); opacity:.8; margin:2px 0 6px;}
#slot-picker-modal .modal-body{max-height:62vh; overflow:auto;}
/* picker do anel externo: tela dividida NOVO(esq) / ANTIGO(dir) — separação temporária do rework (ver CLAUDE.md) */
.sp-split{display:flex; gap:20px; align-items:flex-start;}
.sp-side{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:10px;}
.sp-side--old{opacity:.82;}
.sp-side-h{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold,#e8c373); padding-bottom:6px; margin-bottom:2px; border-bottom:1px solid rgba(232,195,115,.28);}
.sp-side--old .sp-side-h{color:#8a93a8; border-bottom-color:rgba(138,147,168,.22);}
@media (max-width:760px){ .sp-split{flex-direction:column;} }
.palette-hint{padding:8px 12px; font-size:10.5px; color:var(--ink-faint); border-top:1px solid var(--line-soft);
  line-height:1.35;}

/* painel de aparência (personagem + arma) — rodapé da paleta esquerda */
.avatar-panel{border-top:1px solid var(--line-soft); padding:9px 11px 11px; background:rgba(8,9,18,.5);}
.ap-title{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px;}
.ap-group{display:flex; align-items:center; gap:8px; margin-top:7px;}
.ap-lbl{font-size:10.5px; color:var(--ink-faint); width:62px; flex:none;}
.ap-opts{display:flex; gap:6px; flex-wrap:wrap;}
.ap-opt{width:36px; height:36px; padding:0; border:1px solid var(--line-soft); border-radius:9px; cursor:pointer;
  background:radial-gradient(circle at 50% 32%, #161a30, #0b0d1a); display:flex; align-items:center;
  justify-content:center; transition:.15s; overflow:hidden;}
.ap-opt:hover{transform:translateY(-2px); border-color:var(--gold); box-shadow:0 5px 14px rgba(0,0,0,.5);}
.ap-opt.active{border-color:#fff; box-shadow:0 0 0 1px #fff, 0 0 14px rgba(232,195,115,.4);}
.ap-opt img{width:86%; height:86%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));}
.ap-opt svg{width:74%; height:74%; pointer-events:none; filter:drop-shadow(0 0 3px rgba(0,0,0,.55));}

/* circle stage */
.circle-stage{position:relative; display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:0; padding:14px;}
.circle-wrap{flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0;}
.circle-wrap svg{width:min(72vmin,640px); height:min(72vmin,640px);}
.circle-toolbar{display:flex; gap:10px; align-items:center; padding-top:8px;}
.spell-name{font-family:var(--font); font-size:16px; color:var(--gold); text-align:center;
  background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:6px 10px; outline:none; letter-spacing:.06em;}
.spell-name:focus{border-color:var(--gold-deep);}

/* preview de combate (item 10) — selo vivo no canto da forja */
.forge-preview{position:absolute; right:14px; bottom:58px; width:128px; height:128px; z-index:4;
  pointer-events:none; opacity:.92; display:flex; align-items:center; justify-content:center;}
.forge-preview canvas{width:128px; height:128px;}
.forge-preview-label{position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); opacity:.65;}

/* slot interaction */
.slot-hit{cursor:pointer;}

/* readout */
.readout{border-left:1px solid var(--line-soft); padding:18px 16px; overflow-y:auto;
  background:rgba(8,9,18,.35); display:flex; flex-direction:column; gap:14px;}
.ro-title{font-family:var(--font); font-size:20px; color:var(--gold); letter-spacing:.04em;}
.ro-desc{font-size:13px; line-height:1.6; color:var(--ink); font-style:italic; font-family:var(--font);
  border-left:2px solid var(--gold-deep); padding-left:11px;}
.ro-stats{display:flex; flex-direction:column; gap:7px;}
.ro-stat{display:flex; align-items:center; gap:9px; font-size:12px;}
.ro-stat .k{width:74px; color:var(--ink-faint); flex:0 0 74px; text-transform:uppercase; letter-spacing:.05em; font-size:10px;}
.ro-bar{flex:1; height:6px; border-radius:4px; background:#1a1d33; overflow:hidden;}
.ro-bar > i{display:block; height:100%; border-radius:4px;}
.ro-tags{display:flex; flex-wrap:wrap; gap:6px;}
.ro-tag{font-size:11px; padding:4px 9px; border-radius:20px; border:1px solid var(--line);
  color:var(--ink-dim); display:flex; align-items:center; gap:5px;}
.ro-tag svg{width:14px;height:14px;}
.ro-empty{color:var(--ink-faint); font-style:italic; font-size:13px;}
/* composição agrupada por família (Fase 2) */
.ro-fam{margin-top:8px;}
.ro-fam-h{font-size:9px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:4px;}
.ro-fam-h span{color:var(--gold-deep); margin-left:3px;}
.ro-tag.is-mini{opacity:.82; padding:3px 8px; font-size:10px;}
.ro-tag .ro-mini-tag{font-style:normal; font-size:8px; letter-spacing:.05em; color:var(--ink-faint); text-transform:uppercase; margin-left:2px;}
.ro-compounds{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.ro-compounds .ro-tag{font-weight:600;}
.ro-section-h{font-size:10px; letter-spacing:.14em; color:var(--ink-faint); text-transform:uppercase;
  border-bottom:1px solid var(--line-soft); padding-bottom:5px;}

/* loadout */
.loadout{display:flex; gap:12px; padding:12px 18px; border-top:1px solid var(--line-soft);
  background:rgba(8,9,18,.55); align-items:center; justify-content:center;}
.lo-slot{width:128px; height:60px; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  display:flex; align-items:center; gap:10px; padding:8px 10px; transition:.16s; position:relative;
  background:linear-gradient(180deg,#13152b,#0c0d1a);}
.lo-slot:hover{border-color:var(--gold-deep);}
.lo-slot.filled{border-color:var(--line);}
.lo-slot .lo-key{position:absolute; top:-9px; left:-9px; width:22px; height:22px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--gold-deep); color:var(--gold); font-size:12px;
  display:flex; align-items:center; justify-content:center; font-weight:700;}
.lo-slot .lo-icon{width:42px; height:42px; flex:0 0 42px;}
.lo-slot .lo-meta{display:flex; flex-direction:column; min-width:0;}
.lo-slot .lo-name{font-size:12px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lo-slot .lo-sub{font-size:10px; color:var(--ink-faint);}
.lo-slot.empty .lo-meta{color:var(--ink-faint); font-style:italic;}
.lo-slot .lo-cat{position:absolute; top:-8px; right:8px; font-size:9px; letter-spacing:.04em;
  padding:1px 7px; border-radius:8px; background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink-faint); text-transform:uppercase;}
.lo-slot.fits{border-color:var(--gold-deep);}
.lo-slot.fits .lo-cat{color:var(--gold); border-color:var(--gold-deep);}
.lib-eq-slot:disabled{opacity:.32; cursor:not-allowed; border-color:var(--line);}
.lib-eq-slot:disabled:hover{border-color:var(--line); color:var(--ink-dim);}
.lo-save{align-self:stretch;}

/* =================================================================== BATTLE */
#scene-battle{align-items:center; justify-content:center;}
#battle-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.battle-hud{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between;
  align-items:center; padding:12px 18px; pointer-events:none;}
.battle-hud .btn{pointer-events:auto;}
.battle-tip{font-size:12px; color:var(--ink-dim); background:rgba(8,9,18,.6); padding:7px 14px;
  border-radius:20px; letter-spacing:.04em;}
.battle-tip b{color:var(--gold);}
.battle-bar{position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px;}
.bb-slot{width:78px; height:78px; border:1px solid var(--line); border-radius:14px; position:relative;
  background:linear-gradient(180deg,#13152b,#0a0b16); display:flex; align-items:center; justify-content:center;}
.bb-slot .bb-icon{width:62%; height:62%;}
.bb-slot .bb-key{position:absolute; top:5px; left:8px; font-size:12px; color:var(--gold); font-weight:700;}
.bb-slot .bb-cat{position:absolute; top:6px; right:7px; font-size:7px; letter-spacing:.03em;
  color:var(--ink-faint); text-transform:uppercase; pointer-events:none;}
.bb-slot .bb-name{position:absolute; bottom:5px; left:0; right:0; text-align:center; font-size:9px;
  color:var(--ink-dim); white-space:nowrap; overflow:hidden;}
.bb-slot .bb-cd{position:absolute; inset:0; background:rgba(6,6,13,.72); border-radius:14px;
  transform-origin:bottom; transform:scaleY(0);}
.bb-slot .bb-timer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700; color:#fff; text-shadow:0 0 7px #000; pointer-events:none;}
.bb-slot.empty{opacity:.35;}

/* =================================================================== MODAL */
.modal{position:fixed; inset:0; background:rgba(4,4,10,.7); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; z-index:50;}
.modal.on{display:flex;}
.modal-card{width:min(92vw,1040px); max-height:86vh; background:var(--bg-1);
  border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px;
  border-bottom:1px solid var(--line-soft);}
.modal-head h2{margin:0; font-family:var(--font); color:var(--gold); font-weight:500; letter-spacing:.05em;}
.modal-body{overflow-y:auto; padding:18px 22px;}
.codex-group{margin-bottom:26px;}
.codex-group > h3{font-size:12px; letter-spacing:.18em; color:var(--ink-faint); text-transform:uppercase;
  border-bottom:1px solid var(--line-soft); padding-bottom:6px;}
.codex-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:14px;}
.codex-cell{display:flex; gap:11px; align-items:center; padding:9px; border:1px solid var(--line-soft);
  border-radius:11px; background:radial-gradient(circle at 30% 30%,#15182c,#0c0d1a);}
.codex-cell .ci{width:40px; height:40px; flex:0 0 40px; color:var(--c,#ccc);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c,#888) 55%, transparent));}
.codex-cell .cn{font-size:13px; color:var(--ink);}
.codex-cell .cd{font-size:10px; color:var(--ink-faint); line-height:1.3;}

/* =================================================================== TOOLTIP */
.tooltip{position:fixed; z-index:99; pointer-events:none; max-width:230px;
  background:#0a0b18; border:1px solid var(--line); border-radius:10px; padding:9px 12px;
  font-size:12px; color:var(--ink); opacity:0; transition:opacity .12s; transform:translateY(4px);
  box-shadow:0 12px 30px rgba(0,0,0,.6);}
.tooltip.on{opacity:1; transform:none;}
.tooltip .tt-name{color:var(--gold); font-weight:600; margin-bottom:3px; display:flex; gap:7px; align-items:center;}
.tooltip .tt-name svg{width:16px; height:16px;}
.tooltip .tt-desc{color:var(--ink-dim); line-height:1.45;}
.tooltip .tt-kind{color:var(--ink-faint); font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-top:5px;}

/* =================================================================== FORGE EXTRAS */
/* botões desabilitados (desfazer/refazer) */
.btn:disabled{opacity:.35; cursor:default;}
.btn:disabled:hover{transform:none; box-shadow:none; border-color:var(--line-soft); color:var(--ink-dim);}
#btn-undo,#btn-redo{min-width:36px; padding:7px 11px; font-size:15px; line-height:1;}

/* readout: conflitos / avisos */
.ro-h-bad{color:#ff9a9a;}
.ro-h-warn{color:var(--gold);}
.ro-issues{display:flex; flex-direction:column; gap:6px;}
.ro-issue{font-size:11px; line-height:1.45; padding:7px 10px; border-radius:8px; border:1px solid;}
.ro-issue.bad{color:#ffc4c4; background:rgba(255,80,80,.07); border-color:rgba(255,90,90,.3);}
.ro-issue.warn{color:#f0dca6; background:rgba(232,195,115,.06); border-color:rgba(232,195,115,.25);}

/* dica da paleta piscando quando a inscrição é bloqueada */
.palette-hint.flash{color:#ffc4c4; background:rgba(255,80,80,.09);}

/* toast transitório */
.ml-toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(8px);
  background:#0a0b18; border:1px solid var(--gold-deep); color:var(--gold); font-size:13px;
  padding:9px 18px; border-radius:22px; opacity:0; pointer-events:none; z-index:120;
  transition:.2s; box-shadow:0 10px 30px rgba(0,0,0,.5);}
.ml-toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

/* modal de entrada (import/export — substitui prompt bloqueado no Electron) */
.ml-input-modal{position:fixed; inset:0; z-index:130; display:none; align-items:center; justify-content:center;
  background:rgba(4,5,12,.66); backdrop-filter:blur(2px);}
.ml-input-modal.on{display:flex;}
.ml-input-modal .mim-box{width:min(520px,92vw); background:linear-gradient(180deg,#13152b,#0c0d1a);
  border:1px solid var(--gold-deep); border-radius:14px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.6);}
.ml-input-modal .mim-title{color:var(--gold); font-size:14px; font-weight:600; margin-bottom:10px;}
.ml-input-modal .mim-ta{width:100%; box-sizing:border-box; resize:vertical; padding:9px 11px;
  background:rgba(8,9,18,.7); border:1px solid var(--line); border-radius:8px; color:var(--ink);
  font-size:13px; font-family:inherit;}
.ml-input-modal .mim-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px;}

/* =================================================================== BIBLIOTECA */
.modal-sub{font-size:12px; color:var(--ink-faint); letter-spacing:.04em; margin-left:8px;
  font-family:var(--font-ui); font-weight:400;}
.lib-empty{color:var(--ink-faint); font-style:italic; text-align:center; padding:42px 20px; line-height:1.6;}
.lib-row{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:12px;
  padding:11px 12px; border:1px solid var(--line-soft); border-radius:12px; margin-bottom:10px;
  background:radial-gradient(circle at 25% 25%,#15182c,#0c0d1a);}
.lib-row:hover{border-color:var(--line);}
.lib-ic{width:42px; height:42px;}
.lib-name{font-size:14px;}
.lib-sub{font-size:11px; color:var(--ink-faint); margin-top:2px;}
.lib-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.lib-confirm{font-size:12px; color:#ffc4c4; margin-right:4px;}
.lib-equip{grid-column:1 / -1;}
.lib-equip[hidden]{display:none;}
.lib-equip-lbl{display:block; font-size:11px; color:var(--ink-dim); margin:8px 0 7px;}
.lib-eq-slots{display:flex; gap:8px; flex-wrap:wrap;}
.lib-eq-slot{display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:linear-gradient(180deg,#1a1d33,transparent); color:var(--ink-dim);
  font-size:12px; transition:.15s;}
.lib-eq-slot:hover{border-color:var(--gold-deep); color:var(--ink);}
.lib-eq-slot b{color:var(--gold);}
.lib-eq-slot span{max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* scrollbars */
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-thumb{background:#22253f; border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

/* spin util for live circle */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spin-rev{to{transform:rotate(-360deg);}}
@keyframes pulse{0%,100%{opacity:.55;}50%{opacity:1;}}