/* Continent of Legend — Visual Editor v0.69 */
body.col-editor-active{cursor:crosshair!important;user-select:none!important}
/* v1.2.2: enquanto o editor está ativo, o tooltip real do jogo (que aparece ao passar
   o mouse em qualquer coisa com [data-tooltip], incluindo o monstro) continuava
   aparecendo por cima da tela, como se estivesse jogando de verdade -- confunde a
   edição. #gameTooltip é um id, então esta regra vence a classe "hidden" que o jogo
   alterna via JS independente do estado do editor. */
body.col-editor-active #gameTooltip{display:none!important}
body.col-editor-active *{animation-play-state:paused!important}
body.col-editor-active .col-editor-ui,body.col-editor-active .col-editor-ui *{cursor:default!important;user-select:text!important;animation-play-state:running!important}
body.col-editor-active .col-editor-ui button,body.col-editor-active .col-editor-ui input,body.col-editor-active .col-editor-ui select{cursor:pointer!important}
.col-editor-hidden,.hidden[data-col-tab]{display:none!important}
.col-editor-root{position:fixed;inset:0;z-index:100000;pointer-events:none;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf2ff}
.col-editor-root *{box-sizing:border-box}
.col-editor-pause-badge{position:fixed;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #d7b75c;border-radius:999px;background:rgba(18,20,27,.96);box-shadow:0 10px 34px rgba(0,0,0,.45);color:#f0d889;font-size:11px;font-weight:900;letter-spacing:.8px;pointer-events:none}
.col-editor-pause-badge i{display:block;width:8px;height:8px;border-radius:50%;background:#e6c55f;box-shadow:0 0 14px rgba(230,197,95,.75)}
.col-editor-hover-box,.col-editor-selection-box{position:fixed;display:none;border-radius:6px;pointer-events:none}
.col-editor-hover-box{border:1px dashed rgba(119,181,255,.9);background:rgba(72,139,219,.06)}
/* A moldura fica ANCORADA no root (que já é position:fixed;inset:0), não fixed ela mesma:
   no Chrome position:fixed cria stacking context SEMPRE, e isso prendia as alças dentro
   da moldura — com o painel arrastado por cima da seleção (posição válida e persistida em
   editor-layout.js) a alça de redimensionar ficava literalmente inalcançável pelo ponteiro,
   por mais que tivesse z-index maior. Com absolute a moldura não cria contexto, então as
   alças sobem acima do painel enquanto a moldura em si continua abaixo dele. */
.col-editor-selection-box{position:absolute;border:2px solid #ffd45e;box-shadow:0 0 0 1px rgba(0,0,0,.65),0 0 24px rgba(255,212,94,.22)}
.col-editor-selection-label{position:absolute;left:-2px;bottom:calc(100% + 4px);max-width:420px;padding:4px 7px;border-radius:5px;background:#f0c84f;color:#14171d;font-size:10px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-editor-resize-handle{position:absolute;right:-7px;bottom:-7px;z-index:100002;width:16px;height:16px;border:2px solid #171a21;border-radius:4px;background:#ffd45e;pointer-events:auto;cursor:nwse-resize!important}
.col-editor-panel{position:fixed;top:12px;right:12px;z-index:100001;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;padding:14px;border:1px solid #46546c;border-radius:14px;background:linear-gradient(160deg,rgba(18,23,32,.985),rgba(10,13,19,.985));box-shadow:0 26px 80px rgba(0,0,0,.68);pointer-events:auto}
.col-editor-panel::-webkit-scrollbar{width:8px}.col-editor-panel::-webkit-scrollbar-thumb{background:#45526a;border-radius:99px}
.col-editor-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid #2c3544;cursor:grab}
.col-editor-head:active{cursor:grabbing}
.col-editor-title span{display:block;color:#e8c96e;font-size:9px;font-weight:950;letter-spacing:1.1px}.col-editor-title strong{display:block;margin-top:3px;font-size:18px}.col-editor-title small{display:block;margin-top:4px;color:#8491a5;font-size:10px;line-height:1.35}
.col-editor-close{width:34px;height:34px;padding:0;border:1px solid #4d5d74;border-radius:8px;background:#202a38;color:#dce7f6;font-size:18px;font-weight:900}
.col-editor-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.col-editor-tabs button{min-height:34px;padding:8px 6px;border:1px solid #3d4a61;border-radius:8px;background:#151d29;color:#a8b8ce;font-size:9px;font-weight:900;letter-spacing:.45px}
.col-editor-tabs button.active{border-color:#a98831;background:linear-gradient(180deg,#6f5720,#4d3c15);color:#fff0b7}
.col-editor-section{margin-top:12px;padding:12px;border:1px solid #2e3949;border-radius:10px;background:#111722}
.col-editor-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.col-editor-section-title strong{font-size:11px;letter-spacing:.35px}.col-editor-section-title span{color:#728198;font-size:9px}
.col-editor-selected{padding:9px;border:1px solid #3d4a5e;border-radius:8px;background:#0c1119;color:#b8c6d9;font-size:10px;line-height:1.4;word-break:break-word}.col-editor-selected b{color:#f3d67d}
.col-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.col-editor-field{display:grid;gap:4px}.col-editor-field label{color:#7f8da2;font-size:8px;font-weight:900;letter-spacing:.7px}.col-editor-field input,.col-editor-field select{width:100%;min-width:0;padding:8px 9px;border:1px solid #40506a;border-radius:7px;background:#0b1018;color:#eef5ff;font:inherit;font-size:11px;outline:none}.col-editor-field input:focus,.col-editor-field select:focus{border-color:#e5bf55;box-shadow:0 0 0 2px rgba(229,191,85,.12)}
.col-editor-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.col-editor-row button{flex:1 1 110px;min-height:34px;padding:8px 10px;border:1px solid #46556c;border-radius:8px;background:#202a38;color:#dce7f6;font-size:9px;font-weight:900;letter-spacing:.3px}.col-editor-row button:hover{border-color:#7285a2;background:#293648}.col-editor-row button.primary{border-color:#9b7d2f;background:linear-gradient(180deg,#725a1f,#524016);color:#fff0b7}.col-editor-row button.danger{border-color:#71454a;background:#3a2227;color:#ffc2c8}.col-editor-row button:disabled{opacity:.38;cursor:not-allowed!important}
.col-editor-project-status{display:flex;align-items:flex-start;gap:8px;padding:8px;border-radius:8px;background:#0c121a;color:#91a1b8;font-size:9px;line-height:1.4}.col-editor-project-status i{flex:0 0 8px;width:8px;height:8px;margin-top:3px;border-radius:50%;background:#69778b}.col-editor-project-status.connected i{background:#55d69b;box-shadow:0 0 10px rgba(85,214,155,.55)}.col-editor-project-status.warning i{background:#e7bd55}.col-editor-project-status.error i{background:#e66570}
.col-editor-asset-path{margin-top:8px;padding:8px;border:1px dashed #3a475b;border-radius:7px;background:#0a0f16;color:#b5c3d7;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;line-height:1.4;word-break:break-all}
.col-editor-check{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:#aebbd0;font-size:9px;line-height:1.35}.col-editor-check input{margin-top:2px}.col-editor-check strong{color:#e8cf83}
.col-editor-note{margin:8px 0 0;color:#7f8da1;font-size:9px;line-height:1.45}.col-editor-note strong{color:#c6d2e2}
.col-editor-pending{margin-top:8px;color:#e9cf7f;font-size:9px;font-weight:850}
.col-editor-footer{position:sticky;bottom:-14px;margin:14px -14px -14px;padding:12px 14px 14px;border-top:1px solid #334055;background:rgba(12,16,23,.985)}
.col-editor-footer .col-editor-row{margin:0}.col-editor-footer button.validate{min-height:42px;border-color:#4f946e;background:linear-gradient(180deg,#235e42,#17422e);color:#dff9ea}.col-editor-footer button.discard{min-height:42px}
.col-editor-toast{position:fixed;left:18px;bottom:18px;max-width:min(460px,calc(100vw - 36px));padding:11px 13px;border:1px solid #50627a;border-radius:10px;background:rgba(16,21,29,.97);box-shadow:0 16px 46px rgba(0,0,0,.52);color:#dbe7f5;font-size:10px;font-weight:750;line-height:1.45;opacity:0;transform:translateY(12px);transition:.18s ease;pointer-events:none}.col-editor-toast.show{opacity:1;transform:translateY(0)}.col-editor-toast.good{border-color:#4c8d6b}.col-editor-toast.bad{border-color:#98565e}.col-editor-toast.warn{border-color:#9a7b35}
.col-editor-dirty{display:inline-flex;align-items:center;gap:5px;color:#f0ca67;font-size:9px;font-weight:900}.col-editor-dirty::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0ca67}
.col-editor-chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.col-editor-asset-chip{padding:7px 9px;border:1px solid #40506a;border-radius:8px;background:#0f1520;color:#dce6f5;font-size:9px;font-weight:800;line-height:1.2;text-align:left}
.col-editor-asset-chip.active{border-color:#dfba58;background:rgba(223,186,88,.14);color:#fff0bb}
.col-editor-empty{padding:8px;border:1px dashed #38445a;border-radius:8px;color:#7f8da1;font-size:9px}
.col-editor-subtitle{margin-top:8px;color:#d8e3f2;font-size:9px;font-weight:900;letter-spacing:.5px}
.col-editor-subsection+.col-editor-subsection{margin-top:10px}
.col-editor-context-menu{position:fixed;display:none;min-width:220px;padding:6px;border:1px solid #48566d;border-radius:10px;background:rgba(14,18,25,.98);box-shadow:0 18px 40px rgba(0,0,0,.55);pointer-events:auto;z-index:100005}.col-editor-context-menu button{display:block;width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#e8eef8;font-size:10px;font-weight:800;text-align:left}.col-editor-context-menu button:hover{background:#212d3f}
@media(max-width:760px){.col-editor-panel{top:auto;right:8px;bottom:8px;left:8px;width:auto;max-height:68vh}.col-editor-pause-badge{top:8px;font-size:9px}.col-editor-grid{grid-template-columns:1fr 1fr}.col-editor-tabs{grid-template-columns:repeat(2,1fr)}}

/* v0.66 — asset manager */
.col-editor-searchbar{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px;align-items:center;margin-top:12px;padding:7px 8px;border:1px solid #38465c;border-radius:9px;background:#0b1018}
.col-editor-searchbar>span{color:#d6bd72;font-size:17px;text-align:center}.col-editor-searchbar input{min-width:0;border:0;background:transparent;color:#eef5ff;font-size:10px;outline:none}.col-editor-searchbar button{padding:6px 8px;border:1px solid #46556c;border-radius:6px;background:#1d2633;color:#aebbd0;font-size:8px;font-weight:900}
.col-editor-catalog-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.col-editor-catalog-stats span{padding:4px 6px;border:1px solid #303d4e;border-radius:999px;background:#0d131c;color:#8392a7;font-size:8px}.col-editor-catalog-stats b{color:#e7cf86}
.col-editor-tabs{grid-template-columns:repeat(5,1fr)}
.col-editor-chip-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.col-editor-scroll-grid{max-height:340px;overflow:auto;padding-right:4px}
.col-editor-asset-card{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;align-items:center;min-width:0;padding:7px;border:1px solid #3a485e;border-radius:9px;background:#0f1520;color:#dce6f5;text-align:left;overflow:hidden}
.col-editor-asset-card:hover{border-color:#637896;background:#151f2d}.col-editor-asset-card.active{border-color:#dfba58;box-shadow:0 0 0 1px rgba(223,186,88,.25);background:rgba(94,75,28,.22)}.col-editor-asset-card.missing{border-style:dashed}.col-editor-asset-card.pending{border-color:#5e9d79}
.col-editor-asset-thumb{position:relative;display:grid;place-items:center;width:44px;height:44px;border:1px solid #334155;border-radius:8px;background:linear-gradient(145deg,#182130,#0a0e14);overflow:hidden}.col-editor-asset-thumb img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.col-editor-asset-thumb i{position:absolute;display:grid;place-items:center;inset:0;color:#7c8ba1;font-size:18px;font-style:normal;font-weight:900}.col-editor-asset-card.missing .col-editor-asset-thumb img{opacity:.08}.col-editor-asset-card.pending .col-editor-asset-thumb{box-shadow:inset 0 0 0 1px #5e9d79}
/* VFX de ataque (Fase VFX-sprite): a folha tem 4 quadros lado a lado; o
   thumbnail mostra só o primeiro. A caixa segue a proporção 543:724 do
   quadro real para o corte com background-size 400% não distorcer a arte. */
.col-editor-vfx-thumb{width:44px;height:58px;background-repeat:no-repeat;background-position:0 0;background-size:400% 100%}
.col-editor-asset-copy{display:block;min-width:0}.col-editor-asset-copy strong{display:block;overflow:hidden;color:#e9f0f9;font-size:9px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.col-editor-asset-copy small{display:block;margin-top:2px;overflow:hidden;color:#77879d;font-size:7.5px;text-overflow:ellipsis;white-space:nowrap}.col-editor-asset-copy em{display:inline-block;margin-top:4px;padding:2px 4px;border-radius:999px;background:#202b39;color:#96a5b8;font-size:6.5px;font-style:normal;font-weight:900;letter-spacing:.35px}.col-editor-asset-card.missing .col-editor-asset-copy em{background:#3a2a24;color:#dfaa82}.col-editor-asset-card.pending .col-editor-asset-copy em{background:#1d392b;color:#8bd8a8}
@media(max-width:760px){.col-editor-tabs{grid-template-columns:repeat(2,1fr)}.col-editor-chip-grid{grid-template-columns:1fr}.col-editor-scroll-grid{max-height:270px}}

/* v0.67 — seleção profunda, framing e elementos dinâmicos */
.col-editor-compact-row button{flex-basis:90px}
.col-editor-layer-stack{display:flex;gap:5px;overflow-x:auto;margin-top:7px;padding:6px;border:1px solid #2d394b;border-radius:8px;background:#0a0f16}
.col-editor-layer-stack span{color:#6f7f95;font-size:8px;white-space:nowrap}
.col-editor-layer-stack button{flex:0 0 auto;max-width:210px;padding:6px 8px;border:1px solid #39475c;border-radius:7px;background:#141c27;color:#aebdd0;font-size:8px;font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-editor-layer-stack button.active{border-color:#dfba58;background:rgba(223,186,88,.14);color:#ffe9a4}
.col-editor-selected em{color:#83d5aa;font-size:8px;font-style:normal;font-weight:800}
#colEditorImageTools.is-disabled{opacity:.52}
.col-runtime-added-element{display:block;max-width:none!important;max-height:none!important;box-sizing:border-box;user-select:none;-webkit-user-drag:none}
.col-runtime-added-element.col-runtime-preview{outline:1px dashed rgba(255,214,94,.72);outline-offset:2px;filter:saturate(.72)}
.col-custom-anchor{isolation:isolate}
body:not(.col-editor-active) .col-runtime-added-element{pointer-events:none!important}
@media(max-width:760px){.col-editor-layer-stack{max-width:100%}}


/* v0.69 — alvos de FX, prévia de slot dinâmico e edição sem contaminar filhos */
body.col-editor-active .damage-number.col-editor-fx-preview{display:block!important;opacity:1!important;animation:none!important;pointer-events:auto!important;user-select:none!important}
body.col-editor-active .damage-layer .col-editor-fx-preview{z-index:999!important}
.col-runtime-added-element.col-runtime-placeholder-preview{border:1px dashed rgba(240,200,79,.65);border-radius:12px;background:rgba(22,27,37,.28);outline:1px dashed rgba(240,200,79,.82)!important;outline-offset:3px;filter:none!important}
body:not(.col-editor-active) .col-runtime-placeholder-preview{display:none!important}

#colEditorImageTools.is-disabled .col-editor-field,#colEditorImageTools.is-disabled .col-editor-note{opacity:.6}
body.col-editor-active .damage-layer{pointer-events:none!important}
body.col-editor-active .damage-layer .col-editor-fx-preview{cursor:crosshair!important}

/* v0.71 — editor estrutural por slots + UI compacta */
.col-editor-panel{width:min(365px,calc(100vw - 20px));max-height:calc(100vh - 20px);padding:10px;border-radius:12px}
.col-editor-head{gap:8px;padding-bottom:8px}.col-editor-title strong{font-size:16px}.col-editor-title small{font-size:8px;line-height:1.25}.col-editor-close{width:30px;height:30px}
.col-editor-searchbar{margin-top:8px;padding:5px 6px}.col-editor-catalog-stats{margin-top:5px}.col-editor-tabs{gap:4px;margin-top:7px}.col-editor-tabs button{min-height:29px;padding:5px 3px;font-size:7.5px}
.col-editor-element-mode .col-editor-searchbar,.col-editor-element-mode .col-editor-catalog-stats{display:none}
.col-editor-section{margin-top:7px;padding:8px;border-radius:8px}.col-editor-grid{gap:5px;margin-top:6px}.col-editor-field{gap:2px}.col-editor-field input,.col-editor-field select{padding:6px 7px;font-size:10px}.col-editor-row{gap:5px;margin-top:6px}.col-editor-row button{min-height:29px;padding:5px 7px;font-size:8px}
.col-editor-footer{bottom:-10px;margin:9px -10px -10px;padding:8px 10px 10px}.col-editor-footer .col-editor-row button{min-height:34px}
.col-editor-details{padding:0;overflow:hidden}.col-editor-details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 9px;cursor:pointer;list-style:none;color:#dce7f6}.col-editor-details>summary::-webkit-details-marker{display:none}.col-editor-details>summary::before{content:'›';color:#d7b75c;font-size:14px;transition:transform .15s}.col-editor-details[open]>summary::before{transform:rotate(90deg)}.col-editor-details>summary strong{font-size:9px;letter-spacing:.45px}.col-editor-details>summary span{margin-left:auto;color:#728198;font-size:7.5px}.col-editor-details-body{padding:0 8px 8px;border-top:1px solid #273244}
.col-editor-quickbar{position:sticky;top:-10px;z-index:20;margin:7px -2px 0;padding:7px;border:1px solid #39475c;border-radius:9px;background:rgba(12,17,25,.98);box-shadow:0 8px 24px rgba(0,0,0,.28)}.col-editor-quickbar-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.col-editor-kind-chip{padding:4px 7px;border:1px solid #5c6b81;border-radius:999px;background:#192231;color:#cdd9e8;font-size:7.5px;font-weight:950;letter-spacing:.5px}.col-editor-kind-chip[data-kind="card"]{border-color:#b18a38;color:#f0d783}.col-editor-kind-chip[data-kind="column"]{border-color:#587da7;color:#a9d2ff}.col-editor-quickbar-head>#colEditorDirty{font-size:7.5px;color:#7f8da2}.col-editor-quick-actions{display:grid;grid-template-columns:1.15fr repeat(4,1fr);gap:4px;margin-top:6px}.col-editor-quick-actions button,.col-editor-align-actions button{min-height:27px;padding:4px;border:1px solid #40506a;border-radius:6px;background:#1c2532;color:#dce7f6;font-size:7.5px;font-weight:900}.col-editor-quick-actions button:disabled,.col-editor-align-actions button:disabled{opacity:.3}.col-editor-snap-control{display:flex;align-items:center;gap:4px;padding:3px 5px;border:1px solid #344156;border-radius:6px;color:#7f8da2;font-size:7px;font-weight:900}.col-editor-snap-control select{min-width:0;width:100%;border:0;background:#0b1018;color:#eef5ff;font-size:8px}.col-editor-align-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:5px}
.col-editor-rotate-handle{position:absolute;left:50%;top:-35px;z-index:100002;display:none;place-items:center;width:24px;height:24px;transform:translateX(-50%);border:2px solid #171a21;border-radius:50%;background:#ffd45e;color:#171a21;font-size:15px;font-weight:950;pointer-events:auto;cursor:grab!important}.col-editor-rotate-handle:active{cursor:grabbing!important}.col-editor-rotate-handle::after{content:'';position:absolute;top:22px;left:50%;width:2px;height:11px;transform:translateX(-50%);background:#ffd45e}
.col-editor-structure-host{outline:1px dashed rgba(255,212,94,.16);outline-offset:2px}/* NÃO force position aqui: o palco da arena é absolute/inset:0 e virava relative com
   altura 0, tirando player e inimigo da tela. installStructureHandles() garante o
   containing block por elemento, apenas quando ele é static. */.col-editor-structure-handle{position:absolute!important;top:4px!important;right:4px!important;z-index:99998!important;display:grid!important;place-items:center!important;width:27px!important;height:24px!important;min-width:0!important;padding:0!important;border:1px solid #d0aa43!important;border-radius:6px!important;background:rgba(21,25,34,.95)!important;color:#f2d478!important;font-size:13px!important;font-weight:950!important;line-height:1!important;cursor:grab!important;box-shadow:0 4px 12px rgba(0,0,0,.35)!important}.col-editor-structure-handle:active{cursor:grabbing!important}
.col-editor-drop-indicator{position:fixed;display:none;z-index:100004;border-radius:99px;background:#ffd45e;box-shadow:0 0 12px rgba(255,212,94,.8);pointer-events:none}
.col-editor-selection-box[data-kind="card"]{border-color:#d6ae50}.col-editor-selection-box[data-kind="column"]{border-color:#6da8e7}
@media(max-width:760px){.col-editor-panel{max-height:72vh;padding:8px}.col-editor-quickbar{top:-8px}.col-editor-quick-actions{grid-template-columns:1fr 1fr 1fr}.col-editor-align-actions{grid-template-columns:repeat(3,1fr)}}


/* v0.72 — recuperação segura e biblioteca de combate */
.col-editor-combat-targets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.col-editor-combat-targets button{min-height:30px;padding:6px 8px;border:1px solid #3c4b61;border-radius:7px;background:#121a25;color:#cbd8ea;font-size:8px;font-weight:850;text-align:left}
.col-editor-combat-targets button:hover{border-color:#d7b75c;background:#202838;color:#fff0b7}
.col-editor-ghost-target{outline:1px dashed rgba(118,194,255,.95)!important;outline-offset:2px!important;filter:saturate(.65)!important}
body.col-editor-active .col-editor-ghost-target::after{content:"ALVO OCULTO"}
@media(max-width:760px){.col-editor-combat-targets{grid-template-columns:1fr}}


/* v0.73 — caixas-base reais dos FX de combate */
/* v0.80 — fix: se o jogador tiver "Animações de combate" desativado nas opções,
   style.css aplica `body.combat-fx-off .damage-layer{display:none!important}`,
   que apaga TODA a camada (jogador e inimigo) e todos os previews do Editor
   dentro dela, não importa o que o Editor faça nos elementos filhos. Enquanto
   o Editor estiver aberto, a camada precisa ficar visível para poder ser
   editada, mesmo com essa opção desligada no jogo normal. */
body.col-editor-active.combat-fx-off .damage-layer{display:block!important}
body.col-editor-active .combat-fx-slot{pointer-events:none!important;outline:1px dashed rgba(115,190,255,.78);outline-offset:2px;background:rgba(48,103,156,.07);border-radius:7px}
body.col-editor-active .combat-fx-slot::before{content:"FX • " attr(data-col-fx-label);position:absolute;left:4px;top:3px;padding:2px 4px;border-radius:4px;background:rgba(8,14,22,.9);color:#91cfff;font-size:7px;font-weight:950;letter-spacing:.45px;line-height:1;white-space:nowrap;pointer-events:none}
body.col-editor-active .combat-fx-slot .col-editor-fx-preview{pointer-events:none!important}
body:not(.col-editor-active) .combat-fx-slot:empty{display:block}

/* v0.74 — modo FX simplificado */
.col-editor-fx-group{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.col-editor-fx-group button{min-height:32px;padding:7px 8px;border:1px solid #3c4b61;border-radius:8px;background:#121a25;color:#9eafc5;font-size:8px;font-weight:950;letter-spacing:.35px}
.col-editor-fx-group button.active{border-color:#d7b75c;background:linear-gradient(180deg,#6e571f,#4f3e16);color:#fff1bd}
.col-editor-combat-targets button.active{border-color:#ffd45e;background:rgba(255,212,94,.16);color:#fff1bd;box-shadow:0 0 0 1px rgba(255,212,94,.22) inset}
/* v1.2.2 — caixas agrupadas (PERSONAGEM e futuras) */
.col-editor-group-layer{min-height:29px;padding:5px 8px;border:1px solid #3c4b61;border-radius:8px;background:#121a25;color:#9eafc5;font-size:8px;font-weight:950;letter-spacing:.35px}
.col-editor-group-layer.active{border-color:#d7b75c;background:linear-gradient(180deg,#6e571f,#4f3e16);color:#fff1bd}
/* v1.2.2 -- "ALVO ATUAL" (itens 9/12/13): sempre visível, não precisa adivinhar pela borda amarela */
.col-editor-target-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin-top:7px;padding:7px 9px;border:1px solid #4a5a74;border-radius:8px;background:rgba(72,139,219,.08)}
.col-editor-target-eyebrow{font-size:7px;font-weight:950;letter-spacing:.6px;color:#7f9bc2}
#colEditorTargetLabel{font-size:10px;font-weight:900;color:#eaf2ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-editor-lock-btn{min-height:24px;padding:3px 8px;border:1px solid #3c4b61;border-radius:6px;background:#121a25;color:#9eafc5;font-size:8px;font-weight:900;white-space:nowrap}
.col-editor-lock-btn.locked{border-color:#d78a5c;background:rgba(215,138,92,.16);color:#ffcfa8}
.col-editor-lock-btn:disabled{opacity:.35}
/* v0.79 — fix: usa visibility (não opacity) para não ser vencido por uma opacidade
   já salva no layout do usuário para esta caixa (applyRecordToElement grava opacity
   inline com !important, que sempre vence a regra !important desta stylesheet). */
body.col-editor-active .combat-fx-slot.col-editor-fx-muted{visibility:hidden!important;pointer-events:none!important}
body.col-editor-active .combat-fx-slot.col-editor-fx-focused{visibility:visible!important;pointer-events:auto!important;outline:2px solid #ffd45e!important;outline-offset:3px!important;background:rgba(255,212,94,.09)!important;box-shadow:0 0 24px rgba(255,212,94,.16)}
body.col-editor-active .combat-fx-slot.col-editor-fx-focused::after{content:"+";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(255,212,94,.55);font-size:18px;font-weight:700;line-height:1;pointer-events:none}

/* v0.75 — encerramento do editor: limpeza segura, quick actions e proteção fora do editor */
body:not(.col-editor-active) [data-col-editor-preview="1"]{display:none!important}
body:not(.col-editor-active) .col-editor-ghost-target{outline:none!important;filter:none!important}
.col-editor-quick-actions-primary{grid-template-columns:1fr 1.35fr 1.35fr auto!important}
.col-editor-quick-actions-primary button{min-height:29px}
.col-editor-checkpoint-status{display:flex;align-items:center;justify-content:center;padding:4px 6px;border:1px solid #334156;border-radius:6px;background:#0d141e;color:#8392a8;font-size:7px;font-weight:850;white-space:nowrap}
@media(max-width:760px){.col-editor-quick-actions-primary{grid-template-columns:1fr 1fr!important}.col-editor-checkpoint-status{grid-column:1/-1}}

/* v0.85 — empty Relic content background hit areas only while editing */
/* Os fundos de Relíquia são camadas inset:0 com uma imagem real (Crystal Sanctum/Guardian).
   v0.99/v1.0 bugfix: a regra antiga forçava display:block!important em QUALQUER mapa normal
   assim que o Editor abria — mostrando o cenário da Dungeon das Relíquias por cima do
   background real (Lorencia, Devias, etc.), mesmo o jogador nunca tendo entrado ali. A
   intenção original (poder selecionar/editar esses fundos pela aba "HUD da Batalha" mesmo
   fora de uma run de Relíquia) continua válida — só que agora isso é feito sob demanda pelo
   MESMO mecanismo de "alvo oculto" (ghost mode / seleção direta) que todo outro alvo
   condicional já usa, em vez de um display:block incondicional. Fora de uma run real de
   Relíquia, eles ficam ocultos por padrão — exatamente como no jogo sem o Editor aberto. */
body.col-editor-active.relic-sanctum-mode #relicSanctumBackground,
body.col-editor-active.relic-guardian-mode #relicGuardianBackground{pointer-events:auto!important}

/* v0.89 — HUD explicativa de Dungeon/Guardian pode ser agarrada diretamente no Editor. */
body.col-editor-active .relic-battle-status{pointer-events:auto!important}

/* v0.101 — SFX individual por skill (aba SKILLS) + disabled state do Enhancement Preview */
.col-editor-skill-grid{grid-template-columns:1fr}
.col-editor-skill-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px;align-items:start;padding:7px;border:1px solid #2c3849;border-radius:9px;background:#0d1219}
.col-editor-skill-row .col-editor-asset-card{background:#0f1520}
.col-editor-skill-audio{display:flex;flex-direction:column;gap:6px;min-width:0}
.col-editor-skill-audio-status{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:9px;color:#9aa9bd}
.col-editor-skill-audio-status strong{color:#e8cf83;font-size:8px;letter-spacing:.4px}
.col-editor-skill-audio-status span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;color:#cdd8e8}
.col-editor-skill-audio .col-editor-row{margin-top:0;gap:5px}
.col-editor-skill-audio-btn{flex:1 1 auto!important;min-height:26px!important;padding:5px 6px!important;font-size:8px!important}
.col-editor-skill-audio .col-editor-grid{grid-template-columns:1fr 1fr;gap:6px;margin-top:0}
.col-editor-skill-audio .col-editor-field label{display:flex;justify-content:space-between;gap:4px}
.col-editor-note-inline{color:#68768c;font-weight:400;font-size:8px;letter-spacing:0}
#colEditorPreviewEnhancementField.is-disabled{opacity:.45}
#colEditorPreviewEnhancementField.is-disabled select{cursor:not-allowed}
@media(max-width:760px){.col-editor-skill-row{grid-template-columns:1fr}}
body.col-editor-active .relic-battle-status>*{pointer-events:none!important}

/* Nome real da pasta conectada (item 49): rodar uma build nova de ZIP com o
   Editor ainda apontando para a pasta antiga e o pior cenario possivel. */
.col-editor-project-name{display:inline-block;margin:3px 0;padding:2px 7px;border-radius:5px;border:1px solid rgba(240,200,79,.35);background:rgba(240,200,79,.10);color:#f0c84f;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;word-break:break-all}
#colEditorSwitchProject{background:rgba(240,200,79,.12);border-color:rgba(240,200,79,.42);color:#f0c84f}
#colEditorSwitchProject:disabled{opacity:.55;cursor:not-allowed}

/* ===== PAINEL DO PERSONAGEM: dois modos (v1.2.3) =====
   MODO 1 (PERSONAGEM INTEIRO) e um botao grande e sozinho de proposito: e o estado
   padrao ao abrir o Editor e resolve 90% dos ajustes sem o usuario precisar saber que
   existe container/wrapper/anchor por baixo. MODO 2 (AJUSTAR PECAS) so aparece abaixo,
   como escolha explicita -- e sempre uma peca por vez. */
.col-editor-player-whole{
  display:block;width:100%;margin:2px 0 6px;padding:13px 12px;
  border:1px solid #4a5566;border-radius:10px;
  border-color:#4a5566;background:linear-gradient(180deg,#2b3546,#1e2633);
  color:#e8edf6;font-size:calc(12px * var(--text-scale,1));font-weight:950;letter-spacing:1.2px;cursor:pointer;
}
.col-editor-player-whole:hover{border-color:#6b7d96;background:linear-gradient(180deg,#334054,#232c3b)}
.col-editor-player-whole.active{border-color:#f0c84f;background:linear-gradient(180deg,#4a3f1c,#2c2612);color:#ffe9a8;box-shadow:0 0 0 1px rgba(240,200,79,.35) inset}
.col-editor-player-numbers{margin-top:8px}
.col-editor-player-numbers.col-editor-disabled{opacity:.45;pointer-events:none}
.col-editor-stepper label em{color:#8a93a6;font-style:normal}
.col-editor-stepper-row{display:flex;align-items:stretch;gap:4px}
.col-editor-stepper-row input{flex:1 1 auto;min-width:0;text-align:center}
.col-editor-stepper-row button{
  flex:0 0 30px;padding:0;border:1px solid #465064;border-radius:7px;
  background:#1b2230;color:#d4dbe8;font-size:calc(13px * var(--text-scale,1));font-weight:900;cursor:pointer;
}
.col-editor-stepper-row button:hover{border-color:#6b7d96;background:#26303f;color:#fff}
.col-editor-stepper.hidden{display:none}

/* =====================================================================
   BLOCO DE DIREÇÕES EM DESTAQUE — Fase 16f
   ---------------------------------------------------------------------
   Relatado jogando: "não consigo mudar a posição sem ser a original".
   Os oito botões de pose existiam, mas se perdiam num painel de ~3.200px
   sem nenhuma separação visual do resto. Agora o bloco tem moldura e
   título próprios: quem seleciona ARMA ou ASA vê imediatamente que aquela
   peça tem oito poses, e qual está sendo editada.
   ===================================================================== */
#colEditorPlayerDirectional:not(.hidden){
  margin:10px 0 12px;padding:12px 10px 10px;
  border:1px solid rgba(199,154,99,.45);border-radius:6px;
  background:linear-gradient(180deg,rgba(48,38,24,.5),rgba(20,18,22,.42));
  box-shadow:inset 0 0 22px rgba(0,0,0,.35)}
#colEditorPlayerDirectional:not(.hidden)::before{
  content:"POSE POR DIREÇÃO — esta peça tem 8";
  display:block;margin:-2px 0 9px;
  color:#e7c07a;font-size:calc(8px * var(--text-scale, 1));
  font-weight:900;letter-spacing:1.6px}
/* A direção ativa precisa se distinguir de relance das outras sete. */
  border:1px solid rgba(150,140,130,.34);background:rgba(16,15,20,.72);
  color:#cdc3b6;font-weight:900;letter-spacing:.6px}
  border-color:#d8a34a!important;
  background:linear-gradient(180deg,#c9913f,#7d5410)!important;
  color:#fff3cd!important;box-shadow:0 0 14px rgba(216,163,74,.34)}
/* Rede de segurança: em janelas muito baixas o painel chegou a colapsar para
   6px de altura com 10.000px de conteúdo -- inutilizável, e sem nenhum aviso.
   Uma altura mínima garante que sempre haja área de rolagem utilizável. */
#colEditorPanel{min-height:min(320px,90dvh)!important}