/* =====================================================================
   AYA GAME STUDIO — tema futurista (neon, vidro escuro, brilho suave)
   Leve de propósito: sem blur de fundo em áreas grandes (pesa em PC fraco);
   brilhos com box-shadow e animações só de transform/opacity.
   ===================================================================== */
@font-face { font-family: 'Orbitron'; src: url('../lib/fonts/orbitron-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Orbitron'; src: url('../lib/fonts/orbitron-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --fundo: #060911;
  --painel: #0b101b;
  --painel-2: #111a2a;
  --borda: #1c2a42;
  --texto: #e6edfb;
  --mudo: #7f8db0;
  --acento: #7c5cff;
  --acento-2: #22e3c4;
  --neon: #3ef0ff;
  --perigo: #ff4f74;
  --aviso: #ffc65c;
  --grad: linear-gradient(135deg, #7c5cff 0%, #4a7dff 55%, #22d3ee 100%);
  --grad-play: linear-gradient(135deg, #10e3a5 0%, #22d3ee 100%);
  --brilho: 0 0 0 1px rgba(62,240,255,.35), 0 0 18px rgba(62,240,255,.25);
  --fonte-tit: 'Orbitron', var(--fonte);
}

/* fundo do app com um leve "grid" de ficção científica */
#t-editor, #t-estudio { background: radial-gradient(900px 300px at 50% -120px, rgba(124,92,255,.14), transparent 70%), var(--fundo); }

/* ------------ botões ------------ */
.bt {
  position: relative; border-radius: 9px; padding: 6px 13px; letter-spacing: .01em;
  background: var(--grad); border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px -6px rgba(90,110,255,.7);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease, background-color .15s ease;
}
.bt:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1) saturate(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--brilho), 0 8px 20px -8px rgba(90,110,255,.9); }
.bt:active:not(:disabled) { transform: translateY(0) scale(.98); filter: brightness(.95); }
.bt.sec {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01)), var(--painel-2);
  border-color: var(--borda); color: var(--texto); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.bt.sec:hover:not(:disabled) { background: linear-gradient(180deg, rgba(62,240,255,.10), rgba(124,92,255,.06)), var(--painel-2); border-color: rgba(62,240,255,.55); box-shadow: var(--brilho); filter: none; color: #fff; }
.bt.mini { border-radius: 7px; background: rgba(255,255,255,.02); box-shadow: none; }
.bt.mini:hover:not(:disabled) { border-color: rgba(62,240,255,.5); color: var(--neon); box-shadow: 0 0 10px rgba(62,240,255,.18); transform: none; }
.bt.mini.prim { background: var(--grad); color: #fff; border-color: transparent; }
.bt.icone, .bt.icone-q { background: transparent; box-shadow: none; border-color: transparent; }
.bt.icone:hover:not(:disabled), .bt.icone-q:hover:not(:disabled) { background: rgba(62,240,255,.08); border-color: rgba(62,240,255,.35); box-shadow: 0 0 12px rgba(62,240,255,.2); }
.bt.icone-q { font-size: 15px; padding: 5px 9px; border: 1px solid var(--borda); background: var(--painel-2); }
.bt.play { background: var(--grad-play); color: #022a22; font-weight: 800; letter-spacing: .03em; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(16,227,165,.45), 0 0 18px rgba(16,227,165,.35); animation: aya-pulso 2.6s ease-in-out infinite; }
.bt.play.parar { background: linear-gradient(135deg, #ff4f74, #ff8a5c); color: #fff; box-shadow: 0 0 0 1px rgba(255,79,116,.5), 0 0 18px rgba(255,79,116,.4); }
@keyframes aya-pulso { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(16,227,165,.45), 0 0 12px rgba(16,227,165,.25); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(16,227,165,.7), 0 0 24px rgba(16,227,165,.5); } }
.bt.exportar { background: linear-gradient(135deg, #ff5fd2 0%, #7c5cff 50%, #22d3ee 100%); background-size: 180% 180%; animation: aya-fluxo 6s ease infinite; font-weight: 700; }
@keyframes aya-fluxo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.bt.perigo { background: rgba(255,79,116,.06); border-color: rgba(255,79,116,.45); color: #ff8aa3; box-shadow: none; }
.bt.perigo:hover:not(:disabled) { background: rgba(255,79,116,.16); box-shadow: 0 0 14px rgba(255,79,116,.3); filter: none; }
.bt:disabled { opacity: .38; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bt.play, .bt.exportar { animation: none; } .bt { transition: none; } }

/* ------------ barra superior ------------ */
.barra {
  background: linear-gradient(180deg, #0d1424, #0a0f1b); border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(124,92,255,.7), rgba(62,240,255,.7), transparent) 1;
  box-shadow: 0 6px 24px -14px rgba(62,240,255,.45); gap: 6px; padding: 7px 10px; flex-wrap: nowrap; position: relative; z-index: 3;
}
.ferramentas { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.025); border: 1px solid var(--borda); min-width: 0; }
.bt.ferr { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; font-weight: 600; }
.bt.ferr.sec { background: transparent; border-color: transparent; box-shadow: none; }
.bt.ferr.sec:hover:not(:disabled) { background: rgba(62,240,255,.08); border-color: rgba(62,240,255,.4); }
.bt.ferr i { font-style: normal; font-size: 14px; line-height: 1; filter: drop-shadow(0 0 6px rgba(62,240,255,.25)); }
.bt.ferr.destaque { background: var(--grad); }
.nome-proj { font-family: var(--fonte-tit); font-weight: 700; letter-spacing: .04em; font-size: 13px; width: clamp(110px, 12vw, 200px); }
.sep { background: linear-gradient(180deg, transparent, var(--borda), transparent); }
.grupo-modo { border-radius: 10px; border-color: var(--borda); background: rgba(255,255,255,.02); }
.bt.modo { box-shadow: none; background: transparent; }
.bt.modo:hover:not(:disabled) { transform: none; box-shadow: none; color: #fff; filter: none; }
.bt.modo.ativo { background: linear-gradient(180deg, rgba(124,92,255,.35), rgba(62,240,255,.12)); color: #fff; box-shadow: inset 0 -2px 0 var(--neon); }
.barra > .flex { min-width: 0; flex: 1 1 0; }
.ferramentas { flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.ferramentas::-webkit-scrollbar { display: none; }
.barra > * { flex-shrink: 0; } .barra > .ferramentas { flex-shrink: 1; }
.bt.modo { display: inline-flex; align-items: center; gap: 5px; } .bt.modo i { font-style: normal; font-size: 14px; }
/* telas menores: só os ícones (o nome aparece ao passar o mouse) */
@media (max-width: 1880px) { .bt.ferr .rot, .bt.modo .rot { display: none; } .bt.ferr { padding: 5px 8px; } .bt.ferr i { font-size: 16px; } }
@media (max-width: 1100px) { #status-salvo, label.chk[title="Prender ao grid"] { display: none; } }

/* ------------ painéis ------------ */
.painel { background: linear-gradient(180deg, #0b111d, #090d17); }
.painel.esq { border-right: 1px solid var(--borda); } .painel.dir { border-left: 1px solid var(--borda); }
h3, .secao > b, .mun-grupo > b { font-family: var(--fonte-tit); font-weight: 700; letter-spacing: .12em; font-size: 10px; color: #9fb3dd; }
.secao > b, h3 { position: relative; padding-left: 9px; }
.secao > b::before, h3::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--acento), var(--neon)); box-shadow: 0 0 8px rgba(62,240,255,.6); }
.grade-add button { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--painel-2); border-radius: 10px; transition: transform .12s, border-color .15s, box-shadow .15s; }
.grade-add button:hover { border-color: rgba(62,240,255,.6); box-shadow: 0 0 14px rgba(62,240,255,.22); transform: translateY(-1px); }
.grade-add .ic { filter: drop-shadow(0 0 6px rgba(62,240,255,.35)); }
.aba { font-family: var(--fonte-tit); letter-spacing: .08em; font-size: 11px; }
.aba.ativa { border-bottom-color: var(--neon); text-shadow: 0 0 10px rgba(62,240,255,.6); }

/* campos */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea {
  background: #070b14 !important; border: 1px solid var(--borda) !important; border-radius: 7px !important; color: var(--texto); transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus, select:focus, textarea:focus { border-color: rgba(62,240,255,.7) !important; box-shadow: 0 0 0 3px rgba(62,240,255,.14); outline: none; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--neon); }
.bt:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

/* barras de rolagem finas e neon */
* { scrollbar-width: thin; scrollbar-color: #26385a transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2a3b63, #1d2a46); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--acento), #2a6bff); background-clip: padding-box; }

/* ------------ tela inicial ------------ */
#t-inicio { background:
  linear-gradient(rgba(62,240,255,.035) 1px, transparent 1px) 0 0 / 46px 46px,
  linear-gradient(90deg, rgba(62,240,255,.035) 1px, transparent 1px) 0 0 / 46px 46px,
  radial-gradient(1100px 520px at 15% -10%, rgba(124,92,255,.32), transparent 60%),
  radial-gradient(900px 500px at 110% 0%, rgba(34,211,238,.18), transparent 55%), var(--fundo); }
.marca b { font-family: var(--fonte-tit); font-weight: 900; letter-spacing: .18em; background: linear-gradient(90deg, #fff, #9fe9ff 60%, #b9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(62,240,255,.35)); }
.marca .logo { filter: drop-shadow(0 0 14px rgba(124,92,255,.6)); }
h2 { font-family: var(--fonte-tit); letter-spacing: .14em; font-size: 13px; color: #9fb3dd; }
.cartao-modelo, .cartao-proj {
  background: linear-gradient(160deg, rgba(124,92,255,.08), rgba(62,240,255,.03) 60%, transparent), var(--painel);
  border-radius: 14px; border-color: var(--borda); transition: transform .15s ease, border-color .15s, box-shadow .2s;
}
.cartao-modelo:hover, .cartao-proj:hover { transform: translateY(-3px); border-color: rgba(62,240,255,.6); box-shadow: 0 0 0 1px rgba(62,240,255,.25), 0 12px 30px -12px rgba(62,240,255,.45); background: linear-gradient(160deg, rgba(124,92,255,.16), rgba(62,240,255,.06) 60%, transparent), var(--painel-2); }
.cartao-modelo .ico { filter: drop-shadow(0 0 10px rgba(62,240,255,.4)); }

/* ------------ diálogos ------------ */
.dlg { background: linear-gradient(180deg, #0e1526, #0a0f1b); border: 1px solid rgba(62,240,255,.28); border-radius: 16px; box-shadow: 0 0 0 1px rgba(124,92,255,.18), 0 30px 80px -20px rgba(0,0,0,.8), 0 0 40px -10px rgba(62,240,255,.25); }
.dlg header b { font-family: var(--fonte-tit); letter-spacing: .06em; font-weight: 700; }
.dlg::backdrop { background: radial-gradient(circle at 50% 30%, rgba(30,20,70,.55), rgba(2,4,10,.82)); }
.exp-op { border-radius: 14px !important; transition: transform .15s, box-shadow .2s, border-color .15s; }
.exp-op:hover { transform: translateY(-2px); border-color: rgba(62,240,255,.6) !important; box-shadow: 0 0 22px -4px rgba(62,240,255,.45); }
.exp-barra { height: 12px; border-color: rgba(62,240,255,.3); }
.exp-barra i { background: linear-gradient(90deg, #7c5cff, #22d3ee, #10e3a5); box-shadow: 0 0 12px rgba(62,240,255,.7); }

/* painéis de baixo (Mundo / Cinemáticas) e console */
.painel-cine { background: linear-gradient(180deg, #0c1322, #090d17); border-top: 1px solid rgba(62,240,255,.25); box-shadow: 0 -8px 24px -16px rgba(62,240,255,.5); }
.mun-grupo { background: linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--painel-2); border-radius: 12px; }
.mun-f.ativa, .mun-cl.ativa { box-shadow: 0 0 14px rgba(124,92,255,.45); border-color: var(--neon); }
.console { background: #060912; border-top: 1px solid var(--borda); }
.vista::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(62,240,255,.12), inset 0 0 60px rgba(0,0,0,.35); }

@media (max-width: 1440px) {
  .nome-proj { width: 104px; } .bt.ferr { padding: 4px 6px; } .ferramentas { gap: 2px; }
  #bt-salvar .rot { display: none; } .barra { gap: 4px; padding: 6px 8px; }
  label.chk[title="Prender ao grid"] { font-size: 0; gap: 0; }
}

/* ------------ produtividade: tudo visível, letras e botões maiores ------------ */
/* barra do editor em duas linhas: comandos em cima, todos os estúdios (com nome) embaixo — nada fica escondido */
#t-editor > .barra { flex-wrap: wrap; row-gap: 6px; }
#t-editor .ferramentas { order: 50; flex: 1 1 100%; flex-wrap: wrap; overflow: visible; gap: 3px; }
#t-editor .bt.ferr .rot { display: inline !important; }
#t-editor .bt.ferr { padding: 5px 10px !important; font-size: 13px; }
#t-editor .bt.ferr i { font-size: 15px !important; }
#t-editor #bt-biblioteca { order: -1; }
/* painéis mais largos (e ajustáveis arrastando a borda) */
#t-editor .corpo { grid-template-columns: var(--larg-esq, 260px) 1fr var(--larg-dir, 380px); }
#t-editor .painel { position: relative; }
.divisor-painel { position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 5; }
.divisor-painel.esq { right: -3px; } .divisor-painel.dir { left: -3px; }
.divisor-painel:hover { background: linear-gradient(90deg, transparent, rgba(62,240,255,.45), transparent); }
.inspetor { overflow-x: hidden; } .inspetor input, .inspetor select, .inspetor textarea { min-width: 0; max-width: 100%; }
/* janelas maiores: menos rolagem */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 16px); }
.dlg.grande { width: min(1280px, calc(100vw - 24px)); }
.dlg-corpo { max-height: calc(100vh - 20px); }
/* botões pequenos legíveis: o texto não fica cortado */
.bt.mini { font-size: 13px; padding: 3px 9px; min-height: 26px; white-space: normal; line-height: 1.25; }
.secao .bt, .inspetor .bt { white-space: normal; line-height: 1.25; }
/* 📍 marcar no mapa */
.marcar-aya-bt { position: absolute; left: 12px; top: 12px; z-index: 4; padding: 7px 12px; font-size: 13px; }
.marcar-aya-bt.ativo { background: #ff4fd8; color: #fff; }
.marca-aya { position: absolute; z-index: 6; width: 340px; display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: #0e1526f2; border: 1px solid #ff4fd8; box-shadow: 0 10px 40px #000a; font-size: 13px; }
@media (max-width: 1100px) { #t-editor .corpo { grid-template-columns: 1fr; } }
.vista.jogando .marcar-aya-bt { display: none; }
/* assets do projeto: botões curtos lado a lado, nomes legíveis em 2 linhas */
.bts-assets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.bts-assets .bt { display: grid; justify-items: center; gap: 3px; padding: 7px 4px; font-size: 12px; line-height: 1.2; white-space: normal; text-align: center; }
.bts-assets .bt i { font-style: normal; font-size: 17px; }
#lista-assets li { flex-wrap: wrap; }
#lista-assets li span { white-space: normal; word-break: break-word; line-height: 1.25; min-width: 0; flex: 1 1 100%; }
#lista-assets li small { flex: 1; }
/* blocos do painel esquerdo recolhíveis (clique no título) — menos rolagem */
#t-editor .painel.esq .bloco > h3 { cursor: pointer; user-select: none; }
#t-editor .painel.esq .bloco > h3::after { content: ' ▾'; color: var(--mudo); font-size: 10px; }
#t-editor .painel.esq .bloco.fechado > h3::after { content: ' ▸'; }
#t-editor .painel.esq .bloco.fechado > :not(h3) { display: none !important; }
#t-editor .painel.esq .bloco.fechado { flex: 0 0 auto !important; min-height: 0 !important; }
.grade-add { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
#t-editor .painel.esq { overflow-x: hidden; } #t-editor .painel.esq .bloco { min-width: 0; }