/* =====================================================
   EDITOR DE CENA V3 — Continent of Legend, Fase 33

   O palco é TRANSPARENTE de propósito: por baixo dele fica a arena de verdade,
   e é ela que o autor está editando. Tudo aqui é contorno, alça e cromo do
   editor — nada aqui desenha o jogo.

   As laterais ficam presas às BORDAS da tela, não sobre a arena: o autor
   precisa ver o que está movendo enquanto move. `pointer-events` é `none` no
   que é decoração e `auto` só no que se clica, senão o painel rouba o arrasto.
   ===================================================== */

.col-v3-oculto{display:none!important}

/* ==========================================================================
   A BARRA PRETA QUE APARECIA "DO NADA"  (Fase 42)

   O autor perseguiu isto por quatro fases: *"a barra preta foi parar no canto
   superior esquerdo"*, *"apareceu de novo no meio da tela"*, *"a barra e
   solida, sem texto... acho que so apareceu quando eu abri o editor"*. Ele
   fechou o caso inspecionando o elemento:

       <div id="colV3Menu" class="col-v3-menu" hidden=""></div>

   O ATRIBUTO `hidden` NAO E `!important`, E NEM SEQUER E DE AUTOR. O navegador
   o implementa como `[hidden]{display:none}` na folha de USER-AGENT, que perde
   para QUALQUER regra de autor. `.col-v3-menu` declara `display:flex` -- entao
   o menu ficava visivel mesmo marcado como escondido: uma caixa vazia com
   `background:rgba(9,14,24,.98)`, ou seja, um retangulo preto solido.

   E "do nada" porque o menu e criado UMA VEZ, quando o Editor e instanciado, e
   fica no `body` para sempre. Antes da primeira abertura ele nao tem `left`
   nem `top`: um `position:fixed` com deslocamentos `auto` cai na posicao
   ESTATICA dele -- depois de todo o conteudo do body -- que muda conforme a
   tela. Dai a barra "andar" entre o canto superior esquerdo e o meio da tela.

   Os outros dois elementos que o Editor liga e desliga por `hidden`
   (`.col-v3-realce` e `.col-v3-caixa`) nao declaram `display`, e por isso
   nunca falharam. A guarda abaixo cobre o prefixo inteiro para que o proximo
   elemento com `display` nao repita o defeito.
   ========================================================================== */
[class^="col-v3-"][hidden],[class*=" col-v3-"][hidden]{display:none!important}

/* ---------------------------------------------------------------- palco */
.col-v3-palco{
  position:fixed;z-index:99000;
  cursor:crosshair;
  touch-action:none;
  background:transparent;
}
.col-v3-palco>*{position:absolute;pointer-events:none}

.col-v3-grade{
  inset:0!important;width:auto!important;height:auto!important;
  background-image:
    linear-gradient(to right,rgba(120,200,255,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(120,200,255,.16) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.30) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.22) 1px,transparent 1px);
  background-size:32px 32px,32px 32px,100% 100%,100% 100%;
  background-position:0 0,0 0,50% 0,0 80%;
}

/* AS CAIXAS QUE NAO DESENHAM NADA (Fase 34).
   Relato do autor: "clico num elemento invisivel e aparece dano, ai level up".
   Elas existem, ocupam lugar e precisam ser calibraveis — entao aparecem
   enquanto o editor esta aberto. NAO recebem ponteiro: mostram, nao
   interceptam (a regra .col-v3-palco>* acima ja poe pointer-events:none em
   todo filho direto do palco). Quem seleciona continua sendo o clique na
   arena, e a prioridade de clique delas ja caiu no indice, em estaVazio. */
.col-v3-vazias{inset:0!important;width:auto!important;height:auto!important}
.col-v3-vazia{
  position:absolute;
  outline:1px dashed rgba(250,204,21,.55);
  background:repeating-linear-gradient(45deg,rgba(250,204,21,.05) 0 6px,transparent 6px 12px);
  border-radius:2px;
}
.col-v3-vazia.sel{outline-color:rgba(250,204,21,.95);background:rgba(250,204,21,.12)}

/* A FAIXA DA HORDA (Fase 61). Verde, e nao amarelo: ela nao e uma caixa vazia
   a calibrar, e o LIMITE DO CAMPO. Cor propria porque o autor precisa
   distingui-la de relance no meio das outras caixas.
   Fundo quase transparente de proposito: ela cobre metade da arena, e um
   preenchimento visivel escureceria justamente a cena que ele quer calibrar. */
.col-v3-faixa{
  position:absolute;
  outline:2px dashed rgba(74,222,128,.85);
  background:rgba(74,222,128,.045);
  border-radius:3px;
}
.col-v3-faixa>span{
  position:absolute;left:4px;top:4px;
  font:700 10px/14px ui-monospace,Consolas,monospace;
  color:#4ade80;background:rgba(0,0,0,.7);padding:0 5px;border-radius:2px;
  white-space:nowrap;pointer-events:none;letter-spacing:.03em;
}
.col-v3-vazia>span{
  position:absolute;left:2px;top:2px;
  font:600 9px/13px ui-monospace,Consolas,monospace;
  color:#facc15;background:rgba(0,0,0,.6);padding:0 4px;border-radius:2px;
  white-space:nowrap;pointer-events:none;
}

.col-v3-realce{
  outline:1px dashed rgba(120,200,255,.9);
  background:rgba(120,200,255,.08);
  border-radius:2px;
}

.col-v3-caixa{
  outline:1.5px solid #4ade80;
  box-shadow:0 0 0 1px rgba(0,0,0,.65) inset;
  border-radius:2px;
}
.col-v3-etiqueta{
  position:absolute;left:0;top:-19px;
  font:600 10px/16px ui-monospace,Consolas,monospace;
  color:#04140a;background:#4ade80;
  padding:0 6px;border-radius:3px;white-space:nowrap;
}
.col-v3-alca{
  position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;
  background:#4ade80;border:1px solid #04140a;border-radius:2px;
  pointer-events:auto;
}
.col-v3-alca-nw{left:0;top:0;cursor:nwse-resize}
.col-v3-alca-n {left:50%;top:0;cursor:ns-resize}
.col-v3-alca-ne{left:100%;top:0;cursor:nesw-resize}
.col-v3-alca-e {left:100%;top:50%;cursor:ew-resize}
.col-v3-alca-se{left:100%;top:100%;cursor:nwse-resize}
.col-v3-alca-s {left:50%;top:100%;cursor:ns-resize}
.col-v3-alca-sw{left:0;top:100%;cursor:nesw-resize}
.col-v3-alca-w {left:0;top:50%;cursor:ew-resize}

/* ------------------------------------------------------------- estrutura */
.col-v3{
  position:fixed;inset:0;z-index:99100;
  pointer-events:none;                 /* só a barra e as laterais capturam */
  font:12px/1.45 system-ui,Segoe UI,sans-serif;color:#e8eefc;
}
.col-v3-topo,
.col-v3-lateral{pointer-events:auto}

.col-v3-topo{
  position:absolute;left:0;right:0;top:0;height:44px;
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:linear-gradient(180deg,rgba(9,14,24,.97),rgba(9,14,24,.90));
  border-bottom:1px solid rgba(120,200,255,.22);
}
.col-v3-topo>strong{font:700 12px/1 system-ui;letter-spacing:.10em;color:#7dd3fc}
.col-v3-modos,.col-v3-skillbar,.col-v3-ferramentas{display:flex;align-items:center;gap:4px}
.col-v3-ferramentas{margin-left:auto}

.col-v3 button,.col-v3 select{
  font:600 10px/1 system-ui;letter-spacing:.04em;
  color:#dbeafe;background:rgba(30,41,59,.9);
  border:1px solid rgba(120,200,255,.24);border-radius:5px;
  padding:6px 9px;cursor:pointer;
}
.col-v3 button:hover:not(:disabled){background:rgba(51,65,85,.95);border-color:rgba(120,200,255,.5)}
.col-v3 button:disabled{opacity:.38;cursor:default}
.col-v3 button.ativo{background:#164e63;border-color:#22d3ee;color:#a5f3fc}
.col-v3 select{padding:5px 6px;max-width:190px}

/* ------------------------------------------------------------- laterais */
.col-v3-corpo{position:absolute;inset:44px 0 0 0}
.col-v3-lateral{
  position:absolute;top:8px;bottom:8px;width:236px;
  display:flex;flex-direction:column;gap:8px;
  padding:10px;overflow:auto;
  background:rgba(9,14,24,.94);
  border:1px solid rgba(120,200,255,.20);border-radius:10px;
}
.col-v3-esquerda{left:8px}
.col-v3-direita{right:8px}
.col-v3-lateral h4{
  margin:0;font:700 10px/1 system-ui;letter-spacing:.12em;color:#7dd3fc;
}

/* --------------------------------------------------------------- camadas */
#colV3Camadas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
#colV3Camadas li{display:flex;align-items:center;gap:3px}
#colV3Camadas li.sel .nome{background:#164e63;border-color:#22d3ee;color:#a5f3fc}
#colV3Camadas .olho,#colV3Camadas .trava{padding:4px 5px;flex:0 0 auto;font-size:10px}
#colV3Camadas .nome{
  flex:1 1 auto;text-align:left;display:flex;flex-direction:row;align-items:center;gap:6px;
  padding:4px 7px;overflow:hidden;
}
#colV3Camadas .col-v3-nome-copy{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
#colV3Camadas .nome small{font-weight:400;opacity:.55;font-size:9px;letter-spacing:.06em}

/* O PREVIEW (Fase 34). Pedido do autor: "como eu vou saber o que to
   aumentando?". Nao e um renderer novo — e a propria imagem do elemento, ou um
   recorte dos canvas REAIS da arena. Ver previewHtml em src/visual/editor-v3.js.
   O xadrez de fundo existe para arte transparente nao virar um quadrado vazio. */
#colV3Camadas .col-v3-mini{
  flex:0 0 auto;width:26px;height:26px;border-radius:3px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%,transparent 0% 50%) 50%/8px 8px;
  border:1px solid rgba(255,255,255,.10);
}
#colV3Camadas .col-v3-mini img,
#colV3Camadas .col-v3-mini canvas{max-width:100%;max-height:100%;object-fit:contain;display:block}
#colV3Camadas .col-v3-mini.letra{font:700 11px/1 ui-monospace,Consolas,monospace;color:#94a3b8}
#colV3Camadas .col-v3-mini.vazia{color:#facc15;font-size:13px;border-style:dashed;border-color:rgba(250,204,21,.5)}

/* ---------------------------------------------------------------- painel */
.col-v3-id{display:flex;flex-direction:column;gap:2px;padding-bottom:6px;border-bottom:1px solid rgba(120,200,255,.16)}
.col-v3-id strong{font-size:13px;color:#f8fafc}
.col-v3-id small{font-size:9.5px;opacity:.6;word-break:break-all}
.col-v3-campo{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:6px;margin-top:6px}
.col-v3-campo span{font-size:10px;letter-spacing:.06em;opacity:.75}
.col-v3-campo input{
  font:11px/1 ui-monospace,Consolas,monospace;color:#e8eefc;
  background:rgba(15,23,42,.95);border:1px solid rgba(120,200,255,.22);
  border-radius:5px;padding:6px 7px;width:100%;
}
.col-v3-campo input:focus{outline:none;border-color:#22d3ee}
.col-v3-heranca{
  margin-top:10px;display:grid;grid-template-columns:64px 1fr;gap:4px 8px;
  padding-top:8px;border-top:1px solid rgba(120,200,255,.16);font-size:10.5px;
}
.col-v3-heranca span{opacity:.6;letter-spacing:.05em}
.col-v3-heranca strong.sim{color:#fbbf24}
.col-v3-heranca strong.nao{color:#94a3b8;font-weight:500}
.col-v3-botoes{display:flex;gap:4px;margin-top:10px}
.col-v3-botoes button{flex:1}
.col-v3-vazio{opacity:.55;font-size:11px;line-height:1.6}
/* FORA DA ARENA — o aviso que faltava quando `enemy:hound` foi arrastado meia
   arena para a direita e virou "o monstro foge" na boca do autor. Vermelho e
   no topo do painel de propósito: ele existe para ser visto sem ser procurado. */
.col-v3-fora{
  margin:6px 0 8px;padding:6px 8px;border-radius:6px;
  border:1px solid rgba(255,120,120,.55);background:rgba(120,20,20,.28);
  color:#ffd9d9;font-size:10.5px;line-height:1.5;font-weight:700;
}
.col-v3-aviso{margin-top:auto;font-size:10.5px;line-height:1.5;color:#fbbf24;min-height:2em}

/* ----------------------------------------------------------------- menu */
.col-v3-menu{
  position:fixed;z-index:99300;min-width:248px;max-width:300px;
  padding:5px;display:flex;flex-direction:column;gap:1px;
  background:rgba(9,14,24,.98);
  border:1px solid rgba(120,200,255,.3);border-radius:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.6);
  font:11px/1.4 system-ui,sans-serif;
}
.col-v3-menu button{
  text-align:left;padding:7px 9px;font:500 11px/1.3 system-ui;
  color:#e8eefc;background:transparent;border:0;border-radius:5px;cursor:pointer;
}
.col-v3-menu button:hover:not(:disabled){background:#164e63;color:#a5f3fc}
.col-v3-menu button:disabled{opacity:.35;cursor:default}
.col-v3-menu hr{border:0;border-top:1px solid rgba(120,200,255,.16);margin:3px 2px}

/* ------------------------------------------------------- teste em mobile */
/* Mesma configuração lógica, janela menor: é só para conferir que a fração
   cai bem nos dois — não existe um segundo conjunto de offsets. */
body.col-v3-mobile #gameShell,
body.col-v3-mobile .battle-arena{max-width:420px;margin-left:auto;margin-right:auto}