/* IMAGAS — entrada acessível retro / respeita claro e escuro */
#imagas-pages {min-height:100%;}
.imagas-route-content[hidden], #imagas-preferences-overlay[hidden] {display:none!important;}
#imagas-preferences-reopen {
  position:fixed; bottom:12px; right:12px; z-index:2147481000;
  color:#4b5d8a; background:var(--page-bg,#f7f7f7);
  border:1px solid currentColor; padding:8px 11px; font:700 10px/1.2 'Courier New',monospace;
  cursor:pointer; box-shadow:2px 2px 0 #4b5d8a;
}
html[data-theme='dark'] #imagas-preferences-reopen {background:#000;color:#e0e8ff;}
#imagas-preferences-overlay {
  position:fixed;inset:0;z-index:2147483000;
  background:rgba(8,14,31,.79); display:grid;place-items:center;
  padding:clamp(12px,3vw,32px); overflow-y:auto;
}
body.imagas-pref-open {overflow:hidden!important;}
#imagas-preferences-dialog {
  width:min(100%,560px);max-height:min(92dvh,850px);overflow:auto;
  background:#edf1f5;color:#20365a;border:2px solid #4b5d8a;
  box-shadow:8px 8px 0 #4b5d8a;padding:clamp(18px,4vw,32px);
  font-family:'Courier New',monospace;outline:none;
}
html[data-theme='dark'] #imagas-preferences-dialog {background:#101b2b;color:#dceaff;border-color:#9fb7f7;}
.imagas-pref-code {font-size:11px;letter-spacing:.15em;margin:0 0 14px;}
#imagas-preferences-title {font-size:clamp(20px,4vw,30px);line-height:1.15;margin:0 0 14px;}
#imagas-preferences-description {font-size:13px;line-height:1.55;margin:0 0 20px;}
.imagas-pref-options {display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;}
.imagas-pref-options button {
  color:inherit;background:transparent;border:2px solid currentColor;padding:14px 8px;
  font:700 clamp(12px,2.8vw,15px)/1.3 'Courier New',monospace;cursor:pointer;
}
.imagas-pref-options button:hover,.imagas-pref-options button:focus-visible {color:white;background:#4b5d8a;outline:2px solid #afc6ee;outline-offset:2px;}
.imagas-pref-warning {border:1px solid currentColor;padding:15px;font-size:12px;line-height:1.6;}
.imagas-pref-warning strong {display:block;margin-bottom:8px;}
.imagas-pref-warning p {margin:0 0 14px;}
.imagas-pref-warning label {display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:bold;}
.imagas-pref-warning input {accent-color:#4167d2;width:18px;height:18px;flex:none;}
.imagas-pref-footer {margin:16px 0 0;font-size:11px;opacity:.8;}
@media(max-width:470px){.imagas-pref-options{grid-template-columns:1fr;}}
/* Escolha manual de layout mobile: aplica-se mesmo em uma janela larga. */
html[data-imagas-layout='mobile'] body.subpage .subpage-topbar {
  height:auto!important;max-height:none!important;min-height:0!important;
  flex-flow:column nowrap!important;gap:8px;padding:8px!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links {
  width:100%;max-width:100%;justify-content:flex-start;overflow-x:auto;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links a {
  flex:0 0 clamp(48px,12vw,76px);width:clamp(48px,12vw,76px);
}
html[data-imagas-layout='mobile'] body.subpage .subpage-stage {
  width:min(calc(100vw - 18px),650px)!important;
}
html[data-imagas-layout='mobile'] body.page-musicas {
  --music-player-offset-y:0px;
  --imagas-player-width:90%;
}
html[data-imagas-layout='mobile'] body.page-home-player {
  --home-player-offset-y:0px;
  --home-player-size:90%;
}
html[data-imagas-layout='mobile'] .home-navigation {
  flex-wrap:wrap!important;max-width:95vw;justify-content:center;
}
html[data-imagas-layout='mobile'] .home-navigation .image-button {width:clamp(39px,11vw,69px)!important;}
/* Movimento reduzido: o JS ativa MODO 0 (zeros), não interrompe o ASCII. */
html[data-imagas-motion='reduced'] .mp-now-text.is-scrolling,
html[data-imagas-motion='reduced'] .imagas-mp * {animation:none!important;transition:none!important;}
@media(prefers-reduced-motion: reduce) {
  #imagas-preferences-dialog,.imagas-pref-options button{transition:none!important;}
}


/* ==========================================================
   IMAGAS — PERSONALIZACAO DE BOTAO / TELA DE VISUALIZACAO
   Altere SOMENTE as variaveis para manter o sistema intacto.
   ========================================================== */
:root {
  --imagas-visual-button-width: 145px;         /* ex.: 130px */
  --imagas-visual-button-height: 35px;         /* ex.: 40px */
  --imagas-visual-button-x: 0px;
  --imagas-visual-button-y: 0px;
  --imagas-visual-button-gap: 12px;           /* dist. ate IMAGEM ASCII */
  --imagas-visual-button-bg: var(--page-bg,#f7f7f7);
  --imagas-visual-button-color: #4b5d8a;

  --imagas-pref-dialog-width: 560px;
  --imagas-pref-dialog-background: #edf1f5;
  --imagas-pref-dialog-color: #20365a;
  --imagas-pref-dialog-border-color: #4b5d8a;
  --imagas-pref-panel-art-fit: cover;         /* cover ou contain */
  --imagas-pref-panel-overlay: rgba(237,241,245,.08);
  --imagas-pref-options-gap: 12px;
  --imagas-pref-option-height: 54px;
  --imagas-pref-option-bg: transparent;
  --imagas-pref-option-border: 2px solid currentColor;
  --imagas-pref-option-radius: 0px;
  --imagas-pref-option-image-fit: contain;
}
#imagas-preferences-reopen {
  width:var(--imagas-visual-button-width);
  min-height:var(--imagas-visual-button-height);
  color:var(--imagas-visual-button-color);
  background:var(--imagas-visual-button-bg);
  transform:translate(var(--imagas-visual-button-x),var(--imagas-visual-button-y));
  display:inline-flex;align-items:center;justify-content:center;
  gap:0; white-space:nowrap; line-height:1;
}
#imagas-preferences-reopen.imagas-pref-has-art {border:0;box-shadow:none;background:transparent;padding:0;}
#imagas-preferences-reopen .imagas-pref-custom-art {
  display:none;max-width:100%;width:100%;height:100%;object-fit:contain;
}
#imagas-preferences-reopen.imagas-pref-has-art .imagas-pref-custom-art {display:block;}
#imagas-preferences-reopen.imagas-pref-has-art .imagas-pref-button-label {display:none;}

/* Páginas internas: os dois botões ficam no MESMO grupo flexível. */
body.subpage .ascii-image-editor.imagas-pref-button-row {
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:var(--imagas-visual-button-gap);width:max-content;
  max-width:calc(100vw - 32px);
}
body.subpage .ascii-image-editor.imagas-pref-button-row > #imagas-preferences-reopen {
  position:relative;top:auto;right:auto;bottom:auto;left:auto;
  margin:0;z-index:auto;flex:none;
}
body.subpage .ascii-image-editor.imagas-pref-button-row > #edit-ascii-image {flex:none;}
@media(max-width:520px){
  body.subpage .ascii-image-editor.imagas-pref-button-row {gap:6px;}
  body.subpage .ascii-image-editor.imagas-pref-button-row > #imagas-preferences-reopen {font-size:9px;padding:7px 8px;}
}

#imagas-preferences-dialog {
  position:relative; isolation:isolate;
  width:min(100%,var(--imagas-pref-dialog-width));
  color:var(--imagas-pref-dialog-color);
  background:var(--imagas-pref-dialog-background);
  border-color:var(--imagas-pref-dialog-border-color);
}
#imagas-preferences-dialog > *:not(.imagas-pref-panel-art) {position:relative;z-index:1;}
#imagas-preferences-dialog > .imagas-pref-panel-art {
  display:none;position:absolute;inset:0;width:100%;height:100%;
  object-fit:var(--imagas-pref-panel-art-fit);z-index:0;
  pointer-events:none;
}
#imagas-preferences-dialog.imagas-pref-has-panel-art > .imagas-pref-panel-art {display:block;}
#imagas-preferences-dialog.imagas-pref-has-panel-art::before {
  content:'';position:absolute;inset:0;
  background:var(--imagas-pref-panel-overlay);z-index:1;pointer-events:none;
}
.imagas-pref-options {gap:var(--imagas-pref-options-gap);}
.imagas-pref-options button {
  position:relative;min-height:var(--imagas-pref-option-height);
  background:var(--imagas-pref-option-bg);
  border:var(--imagas-pref-option-border);
  border-radius:var(--imagas-pref-option-radius);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.imagas-pref-options button .imagas-pref-custom-art {display:none;}
.imagas-pref-options button.imagas-pref-has-art {padding:0;background:transparent;border:0;}
.imagas-pref-options button.imagas-pref-has-art .imagas-pref-button-label {display:none;}
.imagas-pref-options button.imagas-pref-has-art .imagas-pref-custom-art {
  display:block;width:100%;height:100%;max-height:110px;
  object-fit:var(--imagas-pref-option-image-fit);
}
/* O modo escuro continua legível; ajuste as variáveis se usar arte própria. */
html[data-theme='dark'] #imagas-preferences-dialog {
  background:var(--imagas-pref-dialog-background,#101b2b);
}
html[data-theme='dark'] #imagas-preferences-reopen {background:var(--imagas-visual-button-bg);}
html[data-theme='dark'] #imagas-preferences-reopen.imagas-pref-has-art {background:transparent;}

html[data-theme='dark'] {
  --imagas-pref-dialog-background: #101b2b;
  --imagas-pref-dialog-color: #dceaff;
  --imagas-visual-button-bg: #000000;
  --imagas-visual-button-color: #e0e8ff;
}


/* ==============================================================
   IMAGAS — HOME MOBILE: ASCII PROPRIO + LOGO NO TOPO + GRID 3 x 2
   Alterar SOMENTE as variaveis abaixo.
   Este bloco afeta apenas a Home quando MODO MOBILE esta escolhido.
   O CSS desktop e o player da pagina MÚSICAS ficam intactos.
   ============================================================== */
html[data-imagas-layout='mobile'] body.page-home-player {
  /* IMAGEM ASCII: o arquivo e escolhido em script.js, MOBILE_ASCII_IMAGES */
  --mobile-ascii-width: min(125vw, 720px);
  --mobile-ascii-top: 23dvh;     /* inicio da imagem-base no plano vertical */
  --mobile-ascii-x: 0px;
  --mobile-ascii-y: 0px;

  /* LOGO (GIF normal ou logo estatico ao ativar MODO 0) */
  --mobile-logo-width: clamp(110px, 33vw, 168px);
  --mobile-logo-top: 10dvh;
  --mobile-logo-x: 0px;
  --mobile-logo-y: 0px;

  /* SEIS BOTOES: duas linhas de tres */
  --mobile-nav-width: min(92vw, 490px);
  --mobile-nav-top: 36dvh;
  --mobile-nav-x: 0px;
  --mobile-nav-y: 0px;
  --mobile-nav-column-gap: clamp(7px, 3vw, 18px);
  --mobile-nav-row-gap: clamp(14px, 3dvh, 28px);
  --mobile-nav-button-width: min(100%, 137px);
}

/* O player NAO aparece na Home mobile, mas o elemento <audio>
   continua no DOM, para preservar a musica que ja esta tocando. */
html[data-imagas-layout='mobile'] body.page-home-player #home-player-in-ascii,
html[data-imagas-layout='mobile'] body.page-home-player .home-player-in-ascii {
  display: none !important;
}

/* A cena ASCII mobile ocupa a tela, independente do crop de 1920x1080. */
html[data-imagas-layout='mobile'] body.page-home-player .hero > .scene {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  transform: none !important;
  transform-origin: top left !important;
}

/* A imagem-base permanece invisivel: ela alimenta somente o canvas ASCII. */
html[data-imagas-layout='mobile'] body.page-home-player .scene > .logo {
  position: absolute !important;
  width: var(--mobile-ascii-width) !important;
  left: calc(50% + var(--mobile-ascii-x)) !important;
  top: calc(var(--mobile-ascii-top) + var(--mobile-ascii-y)) !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}
html[data-imagas-layout='mobile'] body.page-home-player .scene > .logo #source {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
}

/* Centraliza o logo real da Home, separado do desenho ASCII. */
html[data-imagas-layout='mobile'] body.page-home-player .scene > .gif-container,
html[data-imagas-layout='mobile'] body.page-home-player .scene > .i-mode-logo {
  left: calc(50% + var(--mobile-logo-x)) !important;
  top: calc(var(--mobile-logo-top) + var(--mobile-logo-y)) !important;
  width: var(--mobile-logo-width) !important;
  transform: translateX(-50%) !important;
  transform-origin: top center !important;
  pointer-events: none;
}

/* Grid puro: 3 colunas x 2 linhas, na ordem dos seis botoes existentes. */
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation,
html[data-imagas-layout='mobile'] body.page-home-player .home-navigation {
  position: absolute !important;
  top: calc(var(--mobile-nav-top) + var(--mobile-nav-y)) !important;
  left: calc(50% + var(--mobile-nav-x)) !important;
  width: var(--mobile-nav-width) !important;
  max-width: calc(100vw - 24px) !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,auto) !important;
  column-gap: var(--mobile-nav-column-gap) !important;
  row-gap: var(--mobile-nav-row-gap) !important;
  justify-items: center !important;
  align-content: start !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
  z-index: 25;
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button {
  display: block !important;
  width: var(--mobile-nav-button-width) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  aspect-ratio: 88 / 31;
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* A Home mobile exibe somente o logo, os seis botoes e o acesso
   ao painel VISUALIZACAO. Os controles de editor/tema permanecem
   disponiveis nas outras paginas e no modo desktop. */
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor {
  display: none !important;
}

/* A Home mobile nao ganha barra de rolagem so pelo ASCII. */
html[data-imagas-layout='mobile'] body.page-home-player .hero {
  overflow: hidden;
}


/* ==============================================================
   IMAGAS — CORREDOR ASCII MOBILE EM TODAS AS PAGINAS
   Usa /ascii/mobile.png como arte de fundo e mascara de caracteres.
   O canvas desenha apenas sobre as partes CLARAS do PNG.
   =============================================================== */
html[data-imagas-layout='mobile'] {
  --mobile-corridor-image: url('/ascii/mobile.png');
}
html[data-imagas-layout='mobile'] body.page-home-player .hero,
html[data-imagas-layout='mobile'] body.subpage .hero {
  background-color: #ffffff !important;
  background-image: var(--mobile-corridor-image) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* A malha quadriculada das paginas internas nao cobre o corredor preto. */
html[data-imagas-layout='mobile'] body.subpage .subpage-mesh {
  background-image: none !important;
  background-color: transparent !important;
}
/* Botões centralizados no corredor central (aprox. 60% da largura).
   Pode aumentar para 60vw caso a arte tenha uma faixa preta maior. */
html[data-imagas-layout='mobile'] body.page-home-player {
  --mobile-nav-width: min(57vw, 400px);
  --mobile-nav-top: 37dvh;
  --mobile-nav-x: 0px;
  --mobile-nav-y: 0px;
  --mobile-nav-column-gap: clamp(3px, .8vw, 10px);
  --mobile-nav-row-gap: clamp(12px, 2dvh, 24px);
  --mobile-nav-button-width: 100%;
}
/* O logo ocupa o topo do mesmo corredor. */
html[data-imagas-layout='mobile'] body.page-home-player {
  --mobile-logo-top: 9dvh;
  --mobile-logo-width: clamp(90px, 28vw, 160px);
}
/* A janela de escolha tem botão de fechar, acessível por teclado. */
#imagas-preferences-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 5 !important;
  border: 1px solid currentColor;
  background: var(--imagas-pref-dialog-background, #edf1f5);
  color: inherit;
  padding: 6px 9px;
  font: 700 13px/1 'Courier New',monospace;
  cursor: pointer;
  margin: -4px -4px 10px 12px;
}
#imagas-preferences-close:hover,
#imagas-preferences-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Enquanto o aviso de sensibilidade esta aberto, ocultar GIFs animados. */
body.imagas-pref-open .gif-container img { visibility: hidden !important; }


/* ===============================================================
   IMAGAS / MOBILE V4 — CORREDOR BRANCO E CONTROLES CENTRALIZADOS
   Somente no layout manual MOBILE. Nenhum ajuste no Desktop.
   =============================================================== */
html[data-imagas-layout='mobile'] {
  /* Ajuste para acompanhar a largura da faixa preta em /ascii/mobile.png. */
  --imagas-mobile-corridor-width: 60vw;
  --imagas-mobile-nav-gap: clamp(6px,1.4vw,13px);
  --imagas-mobile-nav-height: clamp(32px,9vw,50px);
  --imagas-mobile-control-height: clamp(32px,9vw,48px);
  --imagas-mobile-control-gap: clamp(5px,1.4vw,12px);
  --imagas-mobile-text-color: #4b5d8a;
}

/* O PNG fica EXCLUSIVAMENTE como mascara das letras ASCII; sua
   parte preta nao aparece mais visualmente no fundo do site. */
html[data-imagas-layout='mobile'] body.page-home-player,
html[data-imagas-layout='mobile'] body.subpage,
html[data-imagas-layout='mobile'] body.page-home-player .hero,
html[data-imagas-layout='mobile'] body.subpage .hero {
  background-color: #fff !important;
  background-image: none !important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-mesh {background:transparent!important;}

/* HOMEPAGE: mantem as 3 colunas x 2 linhas, mas agora dentro da
   faixa central branca (o ASCII aparece apenas nas laterais). */
html[data-imagas-layout='mobile'] body.page-home-player {
  --mobile-nav-width: min(var(--imagas-mobile-corridor-width), 420px);
  --mobile-nav-column-gap: var(--imagas-mobile-nav-gap);
}
/* Os botoes de edicao ficam disponiveis tambem na HOME Mobile. */
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor {
  display:block!important;
  position:fixed!important;
  z-index:60!important;
  top:calc(var(--mobile-nav-top) + var(--mobile-nav-y) + 17dvh)!important;
  bottom:auto!important;
  right:auto!important;
  left:50%!important;
  width:min(var(--imagas-mobile-corridor-width),420px)!important;
  max-width:none!important;
  transform:translateX(-50%)!important;
  pointer-events:auto!important;
}

/* PAGINAS INTERNAS: topbar e grade sao centralizadas no corredor.
   A grade tem 2 COLUNAS e 3 FILEIRAS. */
html[data-imagas-layout='mobile'] body.subpage .subpage-topbar {
  box-sizing:border-box!important;
  position:relative!important;
  z-index:55!important;
  margin:0 auto!important;
  width:min(var(--imagas-mobile-corridor-width),520px)!important;
  max-width:none!important;
  display:flex!important;
  flex-flow:column nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:var(--imagas-mobile-nav-gap)!important;
  padding:12px 0!important;
  background:transparent!important;
  border:0!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-brand {
  flex:0 0 auto!important;
  margin:0 auto!important;
  max-width:100%!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3, var(--imagas-mobile-nav-height))!important;
  justify-items:center!important;
  align-content:center!important;
  align-items:center!important;
  gap:var(--imagas-mobile-nav-gap)!important;
  padding:0!important;
  margin:0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:visible!important;
  flex:none!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex:none!important;
  padding:0!important;
  overflow:hidden!important;
  text-decoration:none!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

/* A mesma barra de 4 controles das paginas internas fica apos o menu;
   os elementos sao movidos pelo entrada-acessivel.js, mantendo seus eventos. */
html[data-imagas-layout='mobile'] body.subpage .ascii-editor {
  display:block!important;
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  right:auto!important;
  left:auto!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  pointer-events:auto!important;
  z-index:60!important;
}

/* MODO 0 | ESCURO
   EDITAR TEXTO | VISUALIZACAO — quatro areas exatamente iguais. */
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,var(--imagas-mobile-control-height))!important;
  gap:var(--imagas-mobile-control-gap)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle {order:1!important;}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle {order:2!important;}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars {order:3!important;}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen {order:4!important;}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen {
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  flex:none!important;
  top:auto!important;
  bottom:auto!important;
  right:auto!important;
  left:auto!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:3px!important;
  transform:none!important;
  border-radius:0!important;
  font-size:clamp(8px,2vw,11px)!important;
  line-height:1.15!important;
  text-align:center!important;
  overflow:hidden!important;
  color:var(--imagas-mobile-text-color);
  background:#ffffff;
}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions .control-art,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions .imagas-pref-custom-art {
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions .motion-toggle input {
  position:absolute!important;
}
/* O editor de texto abre acima/abaixo dos botoes, nunca atras deles. */
html[data-imagas-layout='mobile'] .ascii-editor #ascii-panel {
  position:absolute!important;
  bottom:auto!important;
  top:calc(100% + 8px)!important;
  left:50%!important;
  right:auto!important;
  width:min(340px,calc(100vw - 24px))!important;
  max-width:none!important;
  transform:translateX(-50%)!important;
  z-index:1000!important;
  pointer-events:auto!important;
}
/* IMAGEM ASCII continua disponivel no Desktop; no Mobile, nao ocupa
   uma quinta area no grupo de quatro controles solicitado. */
html[data-imagas-layout='mobile'] body.subpage .ascii-image-editor {display:none!important;}

/* PLAYER de MUSICAS: cabera na largura do corredor, sem retangulo branco. */
html[data-imagas-layout='mobile'] body.page-musicas .subpage-main,
html[data-imagas-layout='mobile'] body.page-musicas .subpage-stage {
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html[data-imagas-layout='mobile'] body.page-musicas .subpage-stage {
  width:min(var(--imagas-mobile-corridor-width),520px)!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
}
html[data-imagas-layout='mobile'] body.page-musicas .imagas-player-square {
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
}
html[data-imagas-layout='mobile'] body.page-musicas .imagas-mp {
  width:100%!important;
  max-width:100%!important;
  transform:none!important;
}

/* Painel de conteudo das demais paginas respeita o corredor. */
html[data-imagas-layout='mobile'] body.subpage .subpage-main {
  max-width:100%!important;
  padding:10px 0 90px!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-stage {
  width:min(var(--imagas-mobile-corridor-width),520px)!important;
  max-width:100%!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-panel {
  box-sizing:border-box!important;
  max-width:100%!important;
  padding:clamp(10px,2vw,25px)!important;
  overflow-wrap:anywhere;
}


/* ================================================================
   IMAGAS — HOME MOBILE: MENU 2 COLUNAS x 3 LINHAS
   E quatro controles no mesmo tamanho, ABAIXO do menu.
   Mantém as páginas internas centralizadas como na versão anterior.

   Edite aqui as medidas dos BOTÕES na Home mobile:
     --imagas-home-button-height
     --imagas-mobile-nav-gap
     --mobile-nav-top
     --imagas-mobile-corridor-width
   ================================================================ */
html[data-imagas-layout='mobile'] body.page-home-player {
  --imagas-home-button-height: clamp(36px, 10.5vw, 54px);
  --mobile-nav-width: min(60vw, 420px);
  --mobile-nav-top: 31dvh;
  --mobile-nav-column-gap: var(--imagas-mobile-nav-gap);
  --mobile-nav-row-gap: var(--imagas-mobile-nav-gap);
  --mobile-nav-button-width: 100%;
  --imagas-mobile-control-height: var(--imagas-home-button-height);
  --imagas-mobile-control-gap: var(--imagas-mobile-nav-gap);
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation,
html[data-imagas-layout='mobile'] body.page-home-player .home-navigation {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,var(--imagas-home-button-height))!important;
  align-items:stretch!important;
  justify-items:stretch!important;
  gap:var(--imagas-mobile-nav-gap)!important;
  width:var(--mobile-nav-width)!important;
  max-width:calc(100vw - 24px)!important;
  height:auto!important;
  padding:0!important;
  overflow:visible!important;
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button {
  display:flex!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:0!important;
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}
/* Em vez de deslocar os 4 controles por '17dvh' (que sobrepõe
   botões em celulares pequenos), usa a altura real das 3 linhas. */
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor {
  top:calc(
    var(--mobile-nav-top) + var(--mobile-nav-y)
    + var(--imagas-home-button-height)
    + var(--imagas-home-button-height)
    + var(--imagas-home-button-height)
    + var(--imagas-mobile-nav-gap)
    + var(--imagas-mobile-nav-gap)
    + var(--imagas-mobile-nav-gap)
  )!important;
  width:var(--mobile-nav-width)!important;
  max-width:calc(100vw - 24px)!important;
}
/* MODO 0 / ESCURO / EDITAR / VISUALIZAÇÃO seguem exatamente as duas
   colunas e a altura dos seis botões da Home mobile. */
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor .terminal-actions {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,var(--imagas-home-button-height))!important;
  gap:var(--imagas-mobile-nav-gap)!important;
  width:100%!important;
}


/* =====================================================================
   IMAGAS — MOBILE: TAMANHOS REALMENTE UNIFORMES (V5)
   EDITE SOMENTE estas variaveis para alterar TODOS os 10 botoes.
   Não altera o Desktop, as cores dos PNGs ou a navegação do player.
   ===================================================================== */
html[data-imagas-layout='mobile'] {
  --imagas-mobile-button-width-group: min(60vw, 420px);
  --imagas-mobile-button-height: clamp(36px, 9.4vw, 52px);
  --imagas-mobile-button-gap: 8px;
  --imagas-mobile-button-border: #4b5d8a;

  /* Compatibilidade com as variáveis da versão anterior. */
  --imagas-mobile-nav-height: var(--imagas-mobile-button-height);
  --imagas-mobile-control-height: var(--imagas-mobile-button-height);
  --imagas-home-button-height: var(--imagas-mobile-button-height);
  --imagas-mobile-nav-gap: var(--imagas-mobile-button-gap);
  --imagas-mobile-control-gap: var(--imagas-mobile-button-gap);
}

html[data-imagas-layout='mobile'] body.page-home-player {
  --mobile-nav-width: var(--imagas-mobile-button-width-group);
  --imagas-home-button-height: var(--imagas-mobile-button-height);
  --imagas-mobile-control-height: var(--imagas-mobile-button-height);
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation,
html[data-imagas-layout='mobile'] body.page-home-player .home-navigation,
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor {
  width:var(--imagas-mobile-button-width-group)!important;
}

/* Páginas internas: mesma largura total usada na Home. */
html[data-imagas-layout='mobile'] body.subpage .subpage-topbar,
html[data-imagas-layout='mobile'] body.subpage .subpage-links,
html[data-imagas-layout='mobile'] body.subpage .ascii-editor {
  width:var(--imagas-mobile-button-width-group)!important;
  max-width:calc(100vw - 24px)!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links {
  grid-template-rows:repeat(3,var(--imagas-mobile-button-height))!important;
}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions,
html[data-imagas-layout='mobile'] body.page-home-player .ascii-editor .terminal-actions {
  grid-template-rows:repeat(2,var(--imagas-mobile-button-height))!important;
  gap:var(--imagas-mobile-button-gap)!important;
}

/* Uma caixa exterior identica em largura/altura para todos os PNGs e
   controles. object-fit:contain preserva a arte (sem cortes/distorcao).
   Se o desenho dentro do PNG tem margens, o conteúdo visual pode parecer
   menor: nessa situação é preciso recortar a transparência da imagem. */
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button,
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen {
  box-sizing:border-box!important;
  width:100%!important;
  height:var(--imagas-mobile-button-height)!important;
  min-height:0!important;
  max-height:var(--imagas-mobile-button-height)!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--imagas-mobile-button-border)!important;
  border-radius:0!important;
  overflow:hidden!important;
  align-items:center!important;
  justify-content:center!important;
  background:#fff!important;
}
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button img,
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a img,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions .control-art,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions .imagas-pref-custom-art {
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
}

html[data-imagas-layout='mobile'] body.page-home-player,
html[data-imagas-layout='mobile'] body.subpage {
  --imagas-mobile-nav-height:var(--imagas-mobile-button-height);
  --imagas-mobile-control-height:var(--imagas-mobile-button-height);
  --imagas-mobile-nav-gap:var(--imagas-mobile-button-gap);
  --imagas-mobile-control-gap:var(--imagas-mobile-button-gap);
}

/* Impede o max-width antigo de 94px de encolher os PNGs das páginas
   internas: cada um agora ocupa toda a sua célula de 113px no exemplo. */
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a {
  max-width:none!important;
  justify-self:stretch!important;
}


/* =====================================================================
   IMAGAS — MOBILE V6: SEM CAIXAS / ARTES UNIFORMES / 3 COLUNAS x 2 LINHAS
   As caixas continuam com tamanho igual para manter os cliques alinhados,
   mas borda e fundo ficam INVISIVEIS. Apenas no modo Mobile.
   ===================================================================== */
html[data-imagas-layout='mobile'] {
  /* Controles adicionais para acertar o tamanho VISUAL dos seus PNGs. */
  --imagas-mobile-theme-image-scale: 1.13;
  --imagas-mobile-editor-image-scale: 1.13;
  --imagas-mobile-control-text-size: clamp(10px, 2.7vw, 13px);
}

/* Retira molduras externas, sem alterar a area clicavel. */
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button,
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen {
  border:0!important;
  border-bottom:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  outline:0;
  padding:0!important;
}

/* Sem caixas, mas o foco por teclado continua perceptivel. */
html[data-imagas-layout='mobile'] body.page-home-player #home-navigation > .image-button:focus-visible,
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a:focus-visible,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle:focus-visible,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars:focus-visible,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle:focus-within,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen:focus-visible {
  outline:2px solid var(--imagas-mobile-text-color,#4b5d8a)!important;
  outline-offset:2px!important;
}

/* Preenche a mesma area dos outros botoes, sem deformar os PNGs. */
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle .control-art {
  transform:scale(var(--imagas-mobile-theme-image-scale))!important;
  transform-origin:center;
}
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars .control-art {
  transform:scale(var(--imagas-mobile-editor-image-scale))!important;
  transform-origin:center;
}
/* Quando ainda nao ha PNG, o texto tem o mesmo tamanho nos quatro. */
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #theme-toggle .control-text,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #edit-chars .control-text,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > .motion-toggle .control-text,
html[data-imagas-layout='mobile'] .ascii-editor .terminal-actions > #imagas-preferences-reopen .imagas-pref-button-label {
  font-size:var(--imagas-mobile-control-text-size)!important;
  font-weight:700!important;
  line-height:1.1!important;
}

/* PÁGINAS INTERNAS: seis botoes em 3 COLUNAS e 2 LINHAS horizontais.
   A HOME continua com 2 COLUNAS e 3 LINHAS como ja foi personalizada. */
html[data-imagas-layout='mobile'] body.subpage .subpage-links {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,var(--imagas-mobile-button-height))!important;
  grid-auto-flow:row!important;
  justify-content:center!important;
  justify-items:stretch!important;
  align-items:stretch!important;
  gap:var(--imagas-mobile-button-gap)!important;
  overflow:visible!important;
}
html[data-imagas-layout='mobile'] body.subpage .subpage-links > a {
  width:100%!important;
  height:var(--imagas-mobile-button-height)!important;
  max-width:none!important;
  min-width:0!important;
  aspect-ratio:auto!important;
}

/* Páginas internas: quatro controles têm a MESMA largura dos seis PNGs.
   Usamos seis colunas menores, com cada controle ocupando duas delas;
   ficam centralizados em 2 linhas de 2. A Home continua em 2x2. */
html[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions {
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,var(--imagas-mobile-button-height))!important;
  gap:var(--imagas-mobile-button-gap)!important;
}
html[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > .motion-toggle {
  grid-column:2 / span 2!important;
  grid-row:1!important;
}
html[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > #theme-toggle {
  grid-column:4 / span 2!important;
  grid-row:1!important;
}
html[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > #edit-chars {
  grid-column:2 / span 2!important;
  grid-row:2!important;
}
html[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > #imagas-preferences-reopen {
  grid-column:4 / span 2!important;
  grid-row:2!important;
}
/* Texto de fallback cabe na arte estreita das 3 colunas, sem overflow. */
html[data-imagas-layout='mobile'] body.subpage {
  --imagas-mobile-control-text-size:clamp(8px,2.2vw,10px);
}

/* ===============================================================
   IMAGAS — HOME MOBILE / 10 BOTOES COM MESMO TAMANHO VISUAL
   Cole SOMENTE no final de player/shared/entrada-acessivel.css.
   Mantem as caixas invisiveis e nao altera o Desktop nem as subpaginas.
   =============================================================== */
html[data-imagas-layout="mobile"] body.page-home-player {
  /* AJUSTE AQUI: largura do grupo de 2 colunas e altura de cada botao */
  --imagas-home-mobile-group-width: min(60vw, 420px);
  --imagas-home-mobile-button-height: clamp(36px, 9.4vw, 52px);
  --imagas-home-mobile-button-gap: 75px;
  --imagas-home-mobile-text-size: clamp(11px, 3vw, 16px);

  /* Compatibilidade com as variaveis que voce ja usa */
  --mobile-nav-width: var(--imagas-home-mobile-group-width);
  --imagas-mobile-button-width-group: var(--imagas-home-mobile-group-width);
  --imagas-mobile-button-height: var(--imagas-home-mobile-button-height);
  --imagas-home-button-height: var(--imagas-home-mobile-button-height);
  --imagas-mobile-control-height: var(--imagas-home-mobile-button-height);
  --imagas-mobile-nav-gap: var(--imagas-home-mobile-button-gap);
  --imagas-mobile-control-gap: var(--imagas-home-mobile-button-gap);
}

/* Os dois grids usam as mesmas duas colunas, altura e espacamento. */
html[data-imagas-layout="mobile"] body.page-home-player #home-navigation,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor {
  width: var(--imagas-home-mobile-group-width) !important;
  max-width: calc(100vw - 24px) !important;
}
html[data-imagas-layout="mobile"] body.page-home-player #home-navigation {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, var(--imagas-home-mobile-button-height)) !important;
  gap: var(--imagas-home-mobile-button-gap) !important;
}
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, var(--imagas-home-mobile-button-height)) !important;
  gap: var(--imagas-home-mobile-button-gap) !important;
  width: 100% !important;
}

/* Area clicavel: a mesma medida exata para os dez botoes. */
html[data-imagas-layout="mobile"] body.page-home-player #home-navigation > .image-button,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #theme-toggle,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > .motion-toggle,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #imagas-preferences-reopen {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--imagas-home-mobile-button-height) !important;
  min-height: 0 !important;
  max-height: var(--imagas-home-mobile-button-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Artes: as areas clicaveis continuam iguais, mas os PNGs preservam
   a proporcao original (sem esticar horizontal nem verticalmente). */
html[data-imagas-layout="mobile"] body.page-home-player #home-navigation > .image-button img,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #theme-toggle.has-control-art .control-art,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #edit-chars.has-control-art .control-art,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > .motion-toggle.has-control-art .control-art,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #imagas-preferences-reopen.imagas-pref-has-art .imagas-pref-custom-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important; /* remove os scales antigos 1.13 */
  transform-origin: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Se algum PNG estiver ausente, o texto continua no centro
   da mesma area clicavel, sem o tamanho reduzido de antes. */
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions .control-text,
html[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions .imagas-pref-button-label {
  font-size: var(--imagas-home-mobile-text-size) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}


/* ==========================================================
   IMAGAS — NOVAS ARTES DAS DUAS JANELAS
   Arquivos em /artes-janelas/ da raiz do site.
   Esta seção não altera os botões, o ASCII ou o layout desktop/mobile.
   ========================================================== */

/* Terminal de edição: fundo com proporção original 640×720 (8:9).
   Mantém o conteúdo HTML acessível e clicável por cima do desenho. */
#ascii-panel {
    background-color: #f1f2f9 !important;
    background-image: url('/artes-janelas/terminal.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
    aspect-ratio: 8 / 9;
    min-height: min(360px, calc(100dvh - 130px));
    border: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    padding: 8px;
    color: #4b5d8a !important;
}
#ascii-panel .terminal-header,
#ascii-panel .terminal-body {
    background: transparent !important;
    color: #4b5d8a !important;
}
#ascii-panel .terminal-header {
    border-bottom-color: #4b5d8a !important;
}
#ascii-panel #ascii-input {
    background: rgba(255, 255, 255, .65) !important;
    color: #4b5d8a !important;
    border-color: #4b5d8a !important;
    caret-color: #4b5d8a !important;
}
/* A imagem do terminal é clara também quando o usuário usa Modo Escuro. */
html[data-theme='dark'] #ascii-panel,
html[data-theme='dark'] #ascii-panel .terminal-header,
html[data-theme='dark'] #ascii-panel .terminal-body,
html[data-theme='dark'] #ascii-panel .terminal-cursor,
html[data-theme='dark'] #ascii-panel .terminal-status,
html[data-theme='dark'] #ascii-panel #close-terminal,
html[data-theme='dark'] #ascii-panel #reset-chars {
    color: #4b5d8a !important;
}
html[data-theme='dark'] #ascii-panel #close-terminal,
html[data-theme='dark'] #ascii-panel #reset-chars {
    background: transparent !important;
}

/* Janela inicial: o JS aplica a imagem 1120×1000 por trás do texto.
   Usamos a proporção da arte sem apagar avisos e botões. */
#imagas-preferences-dialog.imagas-pref-has-panel-art {
    aspect-ratio: 28 / 25;
    background: #f7f7f7 !important;
    color: #20365a !important;
    border: 0 !important;
    box-shadow: none !important;
    --imagas-pref-panel-art-fit: fill;
    --imagas-pref-panel-overlay: transparent;
}
#imagas-preferences-dialog.imagas-pref-has-panel-art > .imagas-pref-panel-art {
    object-fit: fill !important;
}
#imagas-preferences-dialog.imagas-pref-has-panel-art::before {
    background: transparent !important;
}
html[data-theme='dark'] #imagas-preferences-dialog.imagas-pref-has-panel-art {
    background: #f7f7f7 !important;
    color: #20365a !important;
}
/* Em telas estreitas o conteúdo determina a altura e continua rolável.
   O fundo acompanha o painel sem cortar o aviso de sensibilidade. */
@media (max-width: 470px) {
    #imagas-preferences-dialog.imagas-pref-has-panel-art {
        aspect-ratio: auto;
        padding: clamp(24px, 7vw, 34px);
    }
}
:root {
    /* Tamanho de exibicao (as artes originais sao 88 x 88px) */
    --imagas-close-terminal-size: 44px;
    --imagas-close-visualizacao-size: 44px;
}

/* Botao de fechar do terminal: ja existe como #close-terminal. */
#ascii-panel button#close-terminal,
html[data-theme="dark"] #ascii-panel button#close-terminal {
    display: inline-block !important;
    flex: 0 0 var(--imagas-close-terminal-size) !important;
    width: var(--imagas-close-terminal-size) !important;
    height: var(--imagas-close-terminal-size) !important;
    min-width: var(--imagas-close-terminal-size) !important;
    min-height: var(--imagas-close-terminal-size) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: url('/artes-janelas/fechar-terminal.png') !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
}

/* Botao de fechar da janela COMO DESEJA VISUALIZAR?. */
#imagas-preferences-dialog button#imagas-preferences-close,
html[data-theme="dark"] #imagas-preferences-dialog button#imagas-preferences-close {
    display: block !important;
    position: sticky;
    top: 0;
    float: right;
    z-index: 5 !important;
    width: var(--imagas-close-visualizacao-size) !important;
    height: var(--imagas-close-visualizacao-size) !important;
    min-width: var(--imagas-close-visualizacao-size) !important;
    min-height: var(--imagas-close-visualizacao-size) !important;
    padding: 0 !important;
    margin: -4px -4px 10px 12px !important;
    border: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: url('/artes-janelas/fechar-visualizacao.png') !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    cursor: pointer;
    appearance: none;
}

/* Foco acessivel, sem moldura na aparencia normal. */
#ascii-panel button#close-terminal:focus-visible,
#imagas-preferences-dialog button#imagas-preferences-close:focus-visible {
    outline: 2px solid #4b5d8a !important;
    outline-offset: 3px !important;
}
/* ==========================================
   IMAGAS — MP3 PLAYER MÚSICAS / MOBILE
   ========================================== */

html[data-imagas-layout='mobile'] body.page-musicas {

    /* TAMANHO DO PLAYER */
    --musicas-mobile-player-size: 100vw;

    /* LIMITE MÁXIMO */
    --musicas-mobile-player-max: 650px;

    /* POSIÇÃO */
    --musicas-mobile-player-x: 0px;
    --musicas-mobile-player-y: 0px;
}

/* Área que contém o player */
html[data-imagas-layout='mobile']
body.page-musicas .subpage-stage {
    width: min(
        var(--musicas-mobile-player-size),
        var(--musicas-mobile-player-max)
    ) !important;
    max-width: none !important;
}

/* Caixa do player */
html[data-imagas-layout='mobile']
body.page-musicas .imagas-player-square {
    width: 100% !important;
    max-width: none !important;
}

/* Player MP3 */
html[data-imagas-layout='mobile']
body.page-musicas .imagas-mp {
    width: 100% !important;
    max-width: none !important;

    transform: translate(
        var(--musicas-mobile-player-x),
        var(--musicas-mobile-player-y)
    ) !important;
}
/* ==========================================
   IMAGAS — OCULTAR SHUFFLE E REPEAT
   SOMENTE NO MOBILE / PÁGINA MÚSICAS
   ========================================== */

html[data-imagas-layout="mobile"]
body.page-musicas .mp-shuffle,

html[data-imagas-layout="mobile"]
body.page-musicas .mp-repeat {
    display: none !important;
}
/* =========================================
   IMAGAS — BOTÕES IGUAIS NO DESKTOP
   VISUALIZAÇÃO + EDITAR IMAGEM ASCII
   ========================================= */

html:not([data-imagas-layout="mobile"]) {
    --imagas-visual-button-width: 145px;
    --imagas-visual-button-height: 44px;
    --controle-imagem-ascii-largura: 145px;
}

html:not([data-imagas-layout="mobile"]) #imagas-preferences-reopen,
html:not([data-imagas-layout="mobile"]) #edit-ascii-image {
    box-sizing: border-box !important;

    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    flex: 0 0 145px !important;
    padding: 0 !important;
}

html:not([data-imagas-layout="mobile"]) #imagas-preferences-reopen .imagas-pref-custom-art,
html:not([data-imagas-layout="mobile"]) #edit-ascii-image .ascii-image-button-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
/* ==============================================================
   IMAGAS — MODO ESCURO NO LAYOUT MOBILE
   Cole este bloco NO FINAL de player/shared/entrada-acessivel.css
   Sem alterar o modo Desktop, o tamanho dos botoes nem a mascara ASCII.
   ============================================================== */

/* O Mobile ja forcava fundo branco com !important mesmo no tema escuro.
   Estas regras vencem apenas enquanto o tema escuro estiver selecionado. */
html[data-imagas-layout="mobile"][data-theme="dark"] {
    --page-bg: #000000;
    --brand-blue: #ffffff;
    --ascii-color: #2f4bc2;
    --imagas-mobile-text-color: #ffffff;
    --imagas-mobile-button-border: #ffffff;
    color-scheme: dark;
}
html[data-imagas-layout="mobile"][data-theme="dark"] body.page-home-player,
html[data-imagas-layout="mobile"][data-theme="dark"] body.subpage,
html[data-imagas-layout="mobile"][data-theme="dark"] body.page-home-player .hero,
html[data-imagas-layout="mobile"][data-theme="dark"] body.subpage .hero {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff;
}
/* O conteudo textual das paginas internas segue o tema ativo. */
html[data-imagas-layout="mobile"][data-theme="dark"] body.subpage {
    --page-ui-color: #ffffff;
}
/* Mantem a arte PNG original, mas deixa os controles com fundo e texto
   coerentes caso algum deles use o fallback textual. */
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor .terminal-actions > #theme-toggle,
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor .terminal-actions > .motion-toggle,
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor .terminal-actions > #imagas-preferences-reopen {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
}
/* Garante contraste das janelas transparentes/terminais no modo escuro. */
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor #ascii-panel,
html[data-imagas-layout="mobile"][data-theme="dark"] .ascii-editor #ascii-input {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}


/* =======================================================================
   IMAGAS — MARCADOR DE RODAPE / SEIS PAGINAS
   Compativel com rotas SPA cacheadas (.imagas-route-content), tema e mobile.
   Nao altera o player, a malha ASCII, o menu ou posicao do conteudo.
   Uma unica imagem/GIF pode aparecer nas seis paginas em posicoes distintas.

   Ajustes globais (Desktop e Mobile):
     --imagas-rodape-largura: tamanho horizontal do GIF/imagem
     --imagas-rodape-altura: altura reservada para o GIF/imagem
     --imagas-rodape-margem-superior: espaco DEPOIS do conteudo
     --imagas-rodape-margem-inferior: espaco ate fim da pagina
     --imagas-rodape-largura-trilho: area horizontal de distribuicao

   Ajustes por pagina: --imagas-rodape-x (%), --imagas-rodape-y (px)
   X: 0% = esquerda | 50% = centro | 100% = direita.
   Modifique os valores das seis regras [data-pagina] abaixo.
   ======================================================================= */
:root {
  --imagas-rodape-largura: 200px;
  --imagas-rodape-altura: 200px;
  --imagas-rodape-margem-superior: 32px;
  --imagas-rodape-margem-inferior: 32px;
  --imagas-rodape-largura-trilho: 960px;
  --imagas-rodape-opacidade: 1;
  --imagas-rodape-rotacao: 0deg;
}
/* Distribuicao linear da esquerda para a direita, em ordem de menu. */
.imagas-rodape-marca[data-pagina="musicas"]   { --imagas-rodape-x: 50%;   --imagas-rodape-y: 10px; }
.imagas-rodape-marca[data-pagina="sobre"]     { --imagas-rodape-x: 50%;--imagas-rodape-y: 10px; }
.imagas-rodape-marca[data-pagina="projetos"]  { --imagas-rodape-x: 50%;--imagas-rodape-y: 10px; }
.imagas-rodape-marca[data-pagina="galeria"]   { --imagas-rodape-x: 50%;--imagas-rodape-y: 10px; }
.imagas-rodape-marca[data-pagina="contato"]   { --imagas-rodape-x: 50%;--imagas-rodape-y: 10px; }
.imagas-rodape-marca[data-pagina="recursos"]  { --imagas-rodape-x: 50%;  --imagas-rodape-y: 10px; }

.imagas-rodape-marca {
  position: relative;
  z-index: 18;
  display: block;
  box-sizing: border-box;
  width: 100%;
  clear: both;
  margin: var(--imagas-rodape-margem-superior) 0 var(--imagas-rodape-margem-inferior);
  padding: 0 16px;
  background: transparent;
  pointer-events: none;
}
.imagas-rodape-marca[hidden] { display: none !important; }
.imagas-rodape-trilho {
  position: relative;
  width: 100%;
  max-width: var(--imagas-rodape-largura-trilho);
  height: var(--imagas-rodape-altura);
  margin-inline: auto;
}
.imagas-rodape-imagem {
  position: absolute;
  display: block;
  left: var(--imagas-rodape-x, 50%);
  top: 0;
  width: var(--imagas-rodape-largura);
  height: var(--imagas-rodape-altura);
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: translateX(-50%) translateY(var(--imagas-rodape-y, 0px)) rotate(var(--imagas-rodape-rotacao));
  transform-origin: center;
  opacity: var(--imagas-rodape-opacidade);
  image-rendering: auto;
  pointer-events: none;
}
/* Configuracoes independentes para o modo Mobile selecionado. */
html[data-imagas-layout="mobile"] {
  --imagas-rodape-largura: 200px;
  --imagas-rodape-altura: 200px;
  --imagas-rodape-largura-trilho: min(60vw, 520px);
  --imagas-rodape-margem-superior: 26px;
  --imagas-rodape-margem-inferior: 26px;
}
html[data-imagas-layout="mobile"] .imagas-rodape-marca {
  padding-inline: 0;
}
/* ======================================================================
   IMAGAS — CURSOR PERSONALIZADO (TODAS AS PAGINAS)
   1. Coloque a arte transparente em /artes-cursor/cursor.png
   2. Use preferencialmente uma imagem PNG de 32x32 ou 48x48 px.
   3. Os dois numeros apos url sao o ponto de clique (hotspot), em px:
      0 0 = canto superior esquerdo; 16 16 = centro de imagem 32x32.
   4. Celulares sem mouse nao mostram cursor (o som continua funcionando).

   Editar somente --imagas-cursor-arquivo para usar outro caminho.
   A seta/I-beam normal aparece se a imagem estiver ausente ou bloqueada.
   ====================================================================== */
:root {
  --imagas-cursor-arquivo: url("/artes-cursor/cursor.png");
  --imagas-cursor-hotspot-x: 0;
  --imagas-cursor-hotspot-y: 0;
}

@media (pointer: fine), (any-pointer: fine) {
  html,
  body,
  body * {
    cursor: var(--imagas-cursor-arquivo)
            var(--imagas-cursor-hotspot-x)
            var(--imagas-cursor-hotspot-y), auto !important;
  }

  /* Em links e botoes, conserva a mao como fallback quando o PNG nao carregar. */
  body :is(a, button, select, summary, label, [role="button"],
           input[type="button"], input[type="submit"], input[type="checkbox"],
           input[type="radio"], input[type="range"]) {
    cursor: var(--imagas-cursor-arquivo)
            var(--imagas-cursor-hotspot-x)
            var(--imagas-cursor-hotspot-y), pointer !important;
  }

  /* Campos editaveis continuam com cursor de texto, por acessibilidade. */
  body :is(textarea, input[type="text"], input[type="search"],
           input[type="email"], input[type="url"], input[type="password"],
           input[type="number"], [contenteditable="true"]) {
    cursor: text !important;
  }
}
/* ===============================================================
   IMAGAS / FINAL — TEMA AO LADO DE VISUALIZACAO + AGENDA HOME
   Aplicar ao FINAL de /player/shared/entrada-acessivel.css
   Os IDs sao novos; nao altera a navegacao do player ou o ASCII.
   =============================================================== */
:root {
  --imagas-footer-gap: 8px;
  --imagas-footer-bottom: 14px;
  --imagas-footer-right: 18px;
  --imagas-footer-button-width: 145px;
  --imagas-footer-button-height: 44px;
  --imagas-agenda-button-width: 150px;
  --imagas-agenda-bottom: 16px;
  --imagas-agenda-left: 18px;
}
html.imagas-final-ui-ready #theme-toggle {display:none !important;}
#imagas-final-dock {
  position: fixed !important;
  z-index: 2147480800 !important;
  right: var(--imagas-footer-right) !important;
  bottom: var(--imagas-footer-bottom) !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: var(--imagas-footer-gap) !important;
  align-items: center !important;
  width: max-content !important;
  pointer-events: auto;
}
#imagas-final-theme,
#imagas-final-dock #imagas-preferences-reopen {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--imagas-footer-button-width) !important;
  width: var(--imagas-footer-button-width) !important;
  min-width: 0 !important;
  max-width: var(--imagas-footer-button-width) !important;
  height: var(--imagas-footer-button-height) !important;
  min-height: var(--imagas-footer-button-height) !important;
  max-height: var(--imagas-footer-button-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--page-ui-color, #4b5d8a) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
  line-height: 1.1 !important;
  font: 700 10px/1.2 'Courier New', monospace !important;
}
#imagas-final-theme img,
#imagas-final-dock #imagas-preferences-reopen .imagas-pref-custom-art {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
#imagas-final-theme img[hidden] {display: none !important;}
#imagas-final-theme:hover,
#imagas-final-dock #imagas-preferences-reopen:hover,
#imagas-agenda-open:hover {opacity:.75;}
#imagas-final-theme:focus-visible,
#imagas-final-dock #imagas-preferences-reopen:focus-visible,
#imagas-agenda-open:focus-visible {
  outline: 2px solid var(--page-ui-color, #4b5d8a) !important;
  outline-offset: 2px !important;
}
/* Garante contraste nos controles do rodape em tema escuro. */
html[data-theme='dark'] #imagas-final-theme,
html[data-theme='dark'] #imagas-final-dock #imagas-preferences-reopen {color:#f0f3ff!important;}

/* Botao independente da Home: a arte PNG e opcional. */
#imagas-agenda-open {
  position: fixed;
  z-index: 2147480700;
  bottom: var(--imagas-agenda-bottom);
  left: var(--imagas-agenda-left);
  width: var(--imagas-agenda-button-width);
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--page-ui-color, #4b5d8a);
  font: 700 12px/1.2 'Courier New',monospace;
  cursor:pointer;
}
#imagas-agenda-open[hidden] {display:none !important;}
#imagas-agenda-open img {display:block;width:100%;height:auto;max-height:65px;object-fit:contain;}
#imagas-agenda-open img[hidden] {display:none;}
html[data-theme='dark'] #imagas-agenda-open {color:#f0f3ff;}

/* Janela de calendario: tema claro/escuro e navegacao por meses. */
#imagas-agenda-overlay[hidden] {display:none!important;}
#imagas-agenda-overlay {
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:grid;
  place-items:center;
  padding:14px;
  background:rgba(0,0,0,.65);
  overflow:auto;
}
#imagas-agenda-dialog {
  box-sizing:border-box;
  width:min(100%,540px);
  max-height:92dvh;
  overflow:auto;
  padding:clamp(14px,4vw,26px);
  border:2px solid currentColor;
  background:rgba(250,250,250,.98);
  color:#4b5d8a;
  box-shadow:5px 5px 0 currentColor;
  font:400 13px/1.45 'Courier New',monospace;
}
html[data-theme='dark'] #imagas-agenda-dialog {
  background:rgba(8,10,20,.98);
  color:#ecf1ff;
}
.imagas-agenda-head {display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:15px;}
.imagas-agenda-head h2 {margin:0;font-size:clamp(18px,5vw,26px);}
.imagas-agenda-eyebrow {font-size:10px;opacity:.75;letter-spacing:.12em;margin-bottom:4px;}
#imagas-agenda-dialog button {font:inherit;color:inherit;cursor:pointer;}
#imagas-agenda-close,
.imagas-agenda-month-nav button {background:transparent;border:1px solid currentColor;padding:6px 10px;}
.imagas-agenda-month-nav {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.imagas-agenda-month-nav strong {text-align:center;font-size:14px;}
.imagas-agenda-weekdays,
.imagas-agenda-days {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;}
.imagas-agenda-weekdays {font-size:10px;text-align:center;opacity:.78;margin-bottom:5px;}
.imagas-agenda-day {
  position:relative;
  min-width:0;
  height:clamp(32px,8vw,45px);
  border:1px solid currentColor;
  background:transparent;
  padding:3px 1px;
  font-size:12px;
}
.imagas-agenda-day[disabled] {cursor:default;opacity:.15;}
.imagas-agenda-day.is-event {font-weight:700;border-width:2px;}
.imagas-agenda-day.is-event::after {
  content:'';position:absolute;left:50%;bottom:3px;width:5px;height:5px;
  transform:translateX(-50%);background:currentColor;border-radius:50%;
}
.imagas-agenda-day.is-selected {background:#4b5d8a;color:#fff;}
html[data-theme='dark'] .imagas-agenda-day.is-selected {background:#e4ecff;color:#10182b;}
.imagas-agenda-day.is-today {outline:1px dashed currentColor;outline-offset:-4px;}
.imagas-agenda-info {margin-top:15px;border-top:1px solid currentColor;padding-top:12px;}
.imagas-agenda-info h3 {font-size:13px;margin:0 0 9px;}
.imagas-agenda-event {padding:8px 0;border-bottom:1px dotted currentColor;overflow-wrap:anywhere;}
.imagas-agenda-event strong {display:block;}
.imagas-agenda-event p {margin:3px 0;}
.imagas-agenda-event a {color:inherit;text-decoration:underline;text-underline-offset:3px;}
body.imagas-agenda-visible {overflow:hidden!important;}
@media (max-width:650px) {
  :root {
    --imagas-footer-button-width: min(29vw,130px);
    --imagas-footer-button-height: 41px;
    --imagas-footer-right: 0px;
    --imagas-footer-bottom: 12px;
    --imagas-agenda-button-width: min(45vw,170px);
    --imagas-agenda-bottom: 71px;
    --imagas-agenda-left: 50%;
  }
  #imagas-final-dock {right:50%!important;transform:translateX(50%)!important;}
  #imagas-agenda-open {transform:translateX(-50%);}
}

/* O modo MOBILE pode ser selecionado manualmente mesmo numa janela larga. */
html[data-imagas-layout='mobile'] {
  --imagas-footer-button-width: min(29vw,130px);
  --imagas-footer-button-height: 41px;
  --imagas-footer-right: 0px;
  --imagas-footer-bottom: 12px;
  --imagas-agenda-button-width: min(45vw,170px);
  --imagas-agenda-bottom: 71px;
  --imagas-agenda-left: 50%;
}
html[data-imagas-layout='mobile'] #imagas-final-dock {
  right: 50% !important;
  transform: translateX(50%) !important;
}
html[data-imagas-layout='mobile'] #imagas-agenda-open {transform:translateX(-50%);}
/* Mantem MODO 0 e EDITAR TEXTO sob o menu. ESCURO e VISUALIZACAO
   passam a ocupar a faixa inferior fixa. */
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.page-home-player .ascii-editor .terminal-actions,
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions {
  display: grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:var(--imagas-mobile-button-height,42px) !important;
  gap:var(--imagas-mobile-button-gap,8px) !important;
}
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > .motion-toggle,
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.page-home-player .ascii-editor .terminal-actions > .motion-toggle {
  grid-column:1!important;grid-row:1!important;
}
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.subpage .ascii-editor .terminal-actions > #edit-chars,
html.imagas-final-ui-ready[data-imagas-layout='mobile'] body.page-home-player .ascii-editor .terminal-actions > #edit-chars {
  grid-column:2!important;grid-row:1!important;
}
/* ===============================================================
   IMAGAS — AJUSTE 2026-10-30
   1) Alinha MODO 0000 + EDITAR TEXTO com ESCURO + VISUALIZACAO
   2) Fundo personalizado, Orbitron e FECHAR do calendario
   COLE NO FINAL de /player/shared/entrada-acessivel.css
   =============================================================== */

/* A arte de fechar da AGENDA é a mesma do VISUALIZACAO.
   Para usar a do editor ASCII, troque o caminho por:
   /artes-janelas/fechar-terminal.png */
:root {
  --imagas-agenda-fundo: url('/artes-janelas/fundo-calendario.png');
  --imagas-agenda-fundo-ajuste: 100% 100%; /* ou 'cover' para manter proporcao e recortar */
  --imagas-agenda-fechar-arte: url('/artes-janelas/fechar-visualizacao.png');
  --imagas-agenda-fechar-tamanho: 44px;
  --imagas-agenda-texto-claro: #4b5d8a;
  --imagas-agenda-texto-escuro: #ecf1ff;
}

/* O HTML da Home NAO importa /paginas.css. Portanto, declaramos
   as mesmas fontes para o calendario, com caminhos ja usados no site. */
@font-face {
  font-family: "OrbitronImagasAgenda";
  src: url("/fontes/orbitron-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "OrbitronImagasAgenda";
  src: url("/fontes/orbitron-black-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

/* Fundo da arte no painel; o CSS base continua servindo caso a
   imagem ainda nao tenha sido enviada para o Cloudflare. */
#imagas-agenda-dialog,
html[data-theme="dark"] #imagas-agenda-dialog {
  background-image: var(--imagas-agenda-fundo) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: var(--imagas-agenda-fundo-ajuste) !important;
}
#imagas-agenda-dialog {
  background-color: #f7f7f7 !important;
  color: var(--imagas-agenda-texto-claro) !important;
}
html[data-theme="dark"] #imagas-agenda-dialog {
  background-color: #101523 !important;
  color: var(--imagas-agenda-texto-escuro) !important;
}

/* TITULO Orbitron Black; SUBTITULO Orbitron Regular. */
#imagas-agenda-dialog #imagas-agenda-titulo {
  font-family: "OrbitronImagasAgenda", "Courier New", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .035em;
}
#imagas-agenda-dialog .imagas-agenda-eyebrow,
#imagas-agenda-dialog #imagas-agenda-mes {
  font-family: "OrbitronImagasAgenda", "Courier New", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .035em;
}

/* FECHAR do calendario: mesma arte de VISUALIZACAO, mantendo
   o botao real e o aria-label para teclado/leitores de tela. */
#imagas-agenda-dialog button#imagas-agenda-close,
html[data-theme="dark"] #imagas-agenda-dialog button#imagas-agenda-close {
  display: block !important;
  position: relative !important;
  flex: 0 0 var(--imagas-agenda-fechar-tamanho) !important;
  width: var(--imagas-agenda-fechar-tamanho) !important;
  height: var(--imagas-agenda-fechar-tamanho) !important;
  min-width: var(--imagas-agenda-fechar-tamanho) !important;
  min-height: var(--imagas-agenda-fechar-tamanho) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: var(--imagas-agenda-fechar-arte) !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
}
#imagas-agenda-dialog button#imagas-agenda-close:focus-visible {
  outline: 2px solid var(--imagas-agenda-texto-claro) !important;
  outline-offset: 3px !important;
}
html[data-theme="dark"] #imagas-agenda-dialog button#imagas-agenda-close:focus-visible {
  outline-color: var(--imagas-agenda-texto-escuro) !important;
}

/* Os dois pares de botoes ficam centralizados nas mesmas duas
   colunas e com mesma largura, espacamento e altura no MOBILE.
   Mantem o primeiro par no menu e o segundo fixo no rodape. */
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.page-home-player {
  --imagas-par-width: var(--imagas-home-mobile-group-width, min(65vw,420px));
  --imagas-par-height: var(--imagas-home-mobile-button-height, 42px);
  --imagas-par-gap: var(--imagas-home-mobile-button-gap, 8px);
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.subpage {
  --imagas-par-width: var(--imagas-mobile-button-width-group, min(60vw,420px));
  --imagas-par-height: var(--imagas-mobile-button-height, 42px);
  --imagas-par-gap: var(--imagas-mobile-button-gap, 8px);
}

/* Primeiro par: MODO 0000 e EDITAR TEXTO. */
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor {
  box-sizing: border-box !important;
  width: var(--imagas-par-width) !important;
  max-width: calc(100vw - 24px) !important;
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor .terminal-actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-par-height) !important;
  gap: var(--imagas-par-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > .motion-toggle,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor .terminal-actions > .motion-toggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions > #edit-chars,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor .terminal-actions > #edit-chars {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Segundo par: ESCURO/CLARO e VISUALIZACAO.
   Centralizado pela mesma linha X que o primeiro. */
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body #imagas-final-dock {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-par-height) !important;
  gap: var(--imagas-par-gap) !important;
  width: var(--imagas-par-width) !important;
  max-width: calc(100vw - 24px) !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-final-theme,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-preferences-reopen {
  box-sizing: border-box !important;
  display: flex !important;
  flex: none !important;
  width: 100% !important;
  height: var(--imagas-par-height) !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: var(--imagas-par-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-final-theme {grid-column: 1;grid-row: 1;}
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-preferences-reopen {grid-column: 2;grid-row: 1;}
/* =============================================================== */
/* =====================================================================
   IMAGAS — ALINHAMENTO DESKTOP + 9 BOTOES MOBILE — 30/10/2026
   Adicionar NO FINAL de /player/shared/entrada-acessivel.css
   Nao substitua os estilos anteriores. Nao altera o player nem ASCII.
   ===================================================================== */

/* Remove DEFINITIVAMENTE o botao de tema antigo. O novo botao
   #imagas-final-theme no rodape continua sendo o unico visivel.
   Dois IDs repetidos aqui sao propositais para superar os antigos
   display:inline-flex !important de /styles.css e Mobile. */
html.imagas-final-ui-ready #theme-toggle#theme-toggle,
html.imagas-final-ui-ready[data-imagas-layout="mobile"] body .ascii-editor .terminal-actions > #theme-toggle#theme-toggle {
  display: none !important;
  visibility: hidden !important;
}

/* =====================================================================
   DESKTOP — CONTROLE DE TAMANHO E POSICAO DOS DOIS PARES
   Modifique APENAS este bloco para ajustar o Desktop.
   - X positivo: direita; X negativo: esquerda.
   - Y positivo: baixo;   Y negativo: cima.
   - Os valores right ancoram os dois pares a mesma margem direita.
   ===================================================================== */
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) {
  --imagas-desktop-botao-largura: 145px;
  --imagas-desktop-botao-altura: 44px;
  --imagas-desktop-espaco: 8px;

  /* PRIMEIRO PAR: EDITAR TEXTO + MODO 0000 (perto do terminal) */
  --imagas-desktop-cima-right: 18px;
  --imagas-desktop-cima-x: 0px;
  --imagas-desktop-cima-y: 0px;

  /* SEGUNDO PAR: ESCURO/CLARO + VISUALIZACAO (rodape) */
  --imagas-desktop-baixo-right: 18px;
  --imagas-desktop-baixo-x: 0px;
  --imagas-desktop-baixo-y: 0px;

  --imagas-desktop-par-largura: calc(
    var(--imagas-desktop-botao-largura) +
    var(--imagas-desktop-botao-largura) +
    var(--imagas-desktop-espaco)
  );
}

/* Primeiro par: mesmo comprimento, duas colunas, um so row. */
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor {
  box-sizing: border-box !important;
  left: auto !important;
  right: var(--imagas-desktop-cima-right) !important;
  width: var(--imagas-desktop-par-largura) !important;
  max-width: calc(100vw - 24px) !important;
  translate: var(--imagas-desktop-cima-x) var(--imagas-desktop-cima-y) !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-desktop-botao-altura) !important;
  gap: var(--imagas-desktop-espaco) !important;
  width: 100% !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > #edit-chars,
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > .motion-toggle {
  box-sizing: border-box !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  height: var(--imagas-desktop-botao-altura) !important;
  min-height: var(--imagas-desktop-botao-altura) !important;
  max-height: var(--imagas-desktop-botao-altura) !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > #edit-chars {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > .motion-toggle {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > #edit-chars img.control-art,
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body .ascii-editor .terminal-actions > .motion-toggle img.control-art {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Segundo par: mesma largura, altura, margem e espacamento. */
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body #imagas-final-dock {
  box-sizing: border-box !important;
  left: auto !important;
  right: var(--imagas-desktop-baixo-right) !important;
  width: var(--imagas-desktop-par-largura) !important;
  max-width: calc(100vw - 24px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-desktop-botao-altura) !important;
  gap: var(--imagas-desktop-espaco) !important;
  align-items: stretch !important;
  transform: none !important;
  translate: var(--imagas-desktop-baixo-x) var(--imagas-desktop-baixo-y) !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body #imagas-final-dock > #imagas-final-theme,
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body #imagas-final-dock > #imagas-preferences-reopen {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--imagas-desktop-botao-altura) !important;
  min-height: var(--imagas-desktop-botao-altura) !important;
  max-height: var(--imagas-desktop-botao-altura) !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body #imagas-final-dock > #imagas-final-theme {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html.imagas-final-ui-ready:not([data-imagas-layout="mobile"]) body #imagas-final-dock > #imagas-preferences-reopen {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* =====================================================================
   IMAGAS — CORRECAO DEFINITIVA DA AGENDA MOBILE (30/10/2026)
   AGENDA ABAIXO de ESCURO/CLARO + VISUALIZACAO no MESMO #imagas-final-dock.
   Substitui a regra antiga de "9 botoes" que reservava uma linha vazia
   no editor e tentava estilizar a agenda dentro de .terminal-actions.
   ===================================================================== */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] {
  /* Personalize aqui, se desejar */
  --imagas-nove-largura: min(66vw, 420px);
  --imagas-nove-altura: clamp(36px, 9.4vw, 52px);
  --imagas-nove-espaco: 6px;
  --imagas-rodape-bottom: 12px;
}

/* Mesmo tamanho nos 6 links, par MODO 0000 / EDITAR e rodape. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage {
  --imagas-home-mobile-group-width: var(--imagas-nove-largura);
  --imagas-mobile-button-width-group: var(--imagas-nove-largura);
  --imagas-par-width: var(--imagas-nove-largura);
  --imagas-par-height: var(--imagas-nove-altura);
  --imagas-par-gap: var(--imagas-nove-espaco);
  --imagas-home-mobile-button-height: var(--imagas-nove-altura);
  --imagas-home-mobile-button-gap: var(--imagas-nove-espaco);
  --imagas-mobile-button-height: var(--imagas-nove-altura);
  --imagas-mobile-button-gap: var(--imagas-nove-espaco);
  --imagas-mobile-nav-gap: var(--imagas-nove-espaco);
}

/* HOME e paginas internas: 6 links em duas colunas e tres fileiras. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #home-navigation,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-links {
  box-sizing: border-box !important;
  display: grid !important;
  width: var(--imagas-nove-largura) !important;
  max-width: calc(100vw - 24px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, var(--imagas-nove-altura)) !important;
  grid-auto-flow: row !important;
  gap: var(--imagas-nove-espaco) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin-inline: auto !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #home-navigation > .image-button,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-links > a {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--imagas-nove-altura) !important;
  min-height: 0 !important;
  max-height: var(--imagas-nove-altura) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #home-navigation > .image-button img,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-links > a img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* MODO 0000 e EDITAR TEXTO ficam numa UNICA fileira abaixo dos links.
   Nao reservar a segunda fileira que antes recebia a AGENDA. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor {
  top: calc(var(--mobile-nav-top) + var(--mobile-nav-y)
    + 3 * var(--imagas-nove-altura) + 3 * var(--imagas-nove-espaco)) !important;
  translate: 0 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor {
  box-sizing: border-box !important;
  width: var(--imagas-nove-largura) !important;
  max-width: calc(100vw - 24px) !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor {translate: 0 0 !important;}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor .terminal-actions {
  box-sizing: border-box !important;
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-nove-altura) !important;
  grid-auto-rows: 0 !important;
  gap: var(--imagas-nove-espaco) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body .ascii-editor .terminal-actions > .motion-toggle {
  grid-column: 1 !important; grid-row: 1 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body .ascii-editor .terminal-actions > #edit-chars {
  grid-column: 2 !important; grid-row: 1 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body .ascii-editor .terminal-actions > .motion-toggle,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body .ascii-editor .terminal-actions > #edit-chars {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--imagas-nove-altura) !important;
  min-height: var(--imagas-nove-altura) !important;
  max-height: var(--imagas-nove-altura) !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rodape fixo: 2 colunas x 2 linhas, agenda NA LINHA 2. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(var(--imagas-rodape-bottom), env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  translate: none !important;
  display: grid !important;
  flex-flow: unset !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,var(--imagas-nove-altura)) !important;
  grid-auto-flow: row !important;
  gap: var(--imagas-nove-espaco) !important;
  width: var(--imagas-nove-largura) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  z-index: 2147480800 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-final-theme,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-preferences-reopen {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--imagas-nove-altura) !important;
  min-height: var(--imagas-nove-altura) !important;
  max-height: var(--imagas-nove-altura) !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-final-theme {
  grid-column: 1 !important; grid-row: 1 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-preferences-reopen {
  grid-column: 2 !important; grid-row: 1 !important;
}
/* ESSENCIAL: anula position:fixed, bottom e left da AGENDA anterior.
   O botao passa a pertencer ao GRID do dock e nao a tela inteira. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-agenda-open {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;
  display: flex !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc((100% - var(--imagas-nove-espaco)) / 2) !important;
  min-width: 0 !important;
  max-width: calc((100% - var(--imagas-nove-espaco)) / 2) !important;
  height: var(--imagas-nove-altura) !important;
  min-height: var(--imagas-nove-altura) !important;
  max-height: var(--imagas-nove-altura) !important;
  padding: 0 !important;
  margin: 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-agenda-open[hidden] {
  display: none !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-agenda-open img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-agenda-open img[hidden] {
  display: none !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-main {
  padding-bottom: max(155px, env(safe-area-inset-bottom)) !important;
}

/* ======================================================================
   IMAGAS — MOBILE SEM RODAPE / DISTRIBUICAO CONTINUA — 30/10/2026
   COLE NO FINAL DE /player/shared/entrada-acessivel.css

   HOME: as seis artes do menu, MODO 0000 + EDITAR TEXTO,
         ESCURO/CLARO + VISUALIZACAO e AGENDA ficam em SEQUENCIA.
         Nao ha controle preso ao limite inferior da tela.
   PAGINAS INTERNAS: mesma distancia, logo abaixo da navegacao.
   DESKTOP: permanece INALTERADO.
   ====================================================================== */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] {
  /* AJUSTE AQUI: UMA distancia horizontal e vertical para tudo. */
  --imagas-mobile-distancia-entre-botoes: 8px;

  /* Largura total do menu de DUAS colunas. */
  --imagas-mobile-grupo-largura: min(66vw, 420px);

  /* Altura de CADA botao, inclusive AGENDA. */
  --imagas-mobile-altura-botao: clamp(36px, 9.4vw, 52px);

  /* Ajuste opcional: desloca o conjunto da Home de cima para baixo. */
  --imagas-mobile-grupo-y: 0px;

  /* Reaproveita as variaveis das atualizacoes anteriores. */
  --imagas-nove-espaco: var(--imagas-mobile-distancia-entre-botoes);
  --imagas-nove-largura: var(--imagas-mobile-grupo-largura);
  --imagas-nove-altura: var(--imagas-mobile-altura-botao);
}

/* HOME — A MESMA GRADE 2 COLUNAS X 3 LINHAS, COM ESPACO UNICO. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player {
  --imagas-home-menu-top: calc(
     var(--mobile-nav-top) + var(--mobile-nav-y) + var(--imagas-mobile-grupo-y)
  );
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #home-navigation {
  top: var(--imagas-home-menu-top) !important;
  width: var(--imagas-mobile-grupo-largura) !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  grid-template-rows: repeat(3,var(--imagas-mobile-altura-botao)) !important;
  column-gap: var(--imagas-mobile-distancia-entre-botoes) !important;
  row-gap: var(--imagas-mobile-distancia-entre-botoes) !important;
}

/* HOME — MODO 0000 + EDITAR TEXTO: UMA distancia apos a linha 3. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor {
  top: calc(
      var(--imagas-home-menu-top)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-distancia-entre-botoes)
      + var(--imagas-mobile-distancia-entre-botoes)
      + var(--imagas-mobile-distancia-entre-botoes)
  ) !important;
  width: var(--imagas-mobile-grupo-largura) !important;
  translate: none !important;
}

/* HOME — ESCURO/CLARO + VISUALIZACAO NA LINHA 5;
   AGENDA CENTRALIZADA NA LINHA 6, TUDO NO MESMO BLOCO. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #imagas-final-dock {
  position: fixed !important; /* ancora pelo MENU, NAO pelo fundo da tela */
  top: calc(
      var(--imagas-home-menu-top)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-altura-botao)
      + var(--imagas-mobile-distancia-entre-botoes)
      + var(--imagas-mobile-distancia-entre-botoes)
      + var(--imagas-mobile-distancia-entre-botoes)
      + var(--imagas-mobile-distancia-entre-botoes)
  ) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  translate: none !important;
  width: var(--imagas-mobile-grupo-largura) !important;
  max-width: calc(100vw - 24px) !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,var(--imagas-mobile-altura-botao)) !important;
  column-gap: var(--imagas-mobile-distancia-entre-botoes) !important;
  row-gap: var(--imagas-mobile-distancia-entre-botoes) !important;
}

/* As areas clicaveis de TODOS os controles seguem as mesmas medidas. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player .ascii-editor .terminal-actions,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.page-home-player #imagas-final-dock {
  gap: var(--imagas-mobile-distancia-entre-botoes) !important;
}

/* SUBPAGINAS — SEM RODAPE: os controles seguem o menu dentro da
   .subpage-topbar, na ordem menu > editor > tema/visualizacao > agenda. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--imagas-mobile-distancia-entre-botoes) !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-links {
  width: var(--imagas-mobile-grupo-largura) !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(3,var(--imagas-mobile-altura-botao)) !important;
  gap: var(--imagas-mobile-distancia-entre-botoes) !important;
  margin: 0 !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .ascii-editor {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: var(--imagas-mobile-grupo-largura) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  translate: none !important;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,var(--imagas-mobile-altura-botao)) !important;
  gap: var(--imagas-mobile-distancia-entre-botoes) !important;
  width: var(--imagas-mobile-grupo-largura) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* O terceiro botao (AGENDA) preserva o tamanho de uma celula e
   fica centralizado na segunda linha, nao ocupando a tela toda. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body #imagas-final-dock > #imagas-agenda-open {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  width: calc((100% - var(--imagas-mobile-distancia-entre-botoes))/2) !important;
  height: var(--imagas-mobile-altura-botao) !important;
  max-height: var(--imagas-mobile-altura-botao) !important;
}

/* Quando o editor abre, o painel de texto continua sobre a pagina. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .ascii-editor #ascii-panel {
  z-index: 2147480000 !important;
}


/* =====================================================================
   IMAGAS — PAGINAS INTERNAS / MOBILE — 3 COLUNAS IGUAIS
   Adicionar no FIM de /player/shared/entrada-acessivel.css

   Somente paginas internas; a HOME e o DESKTOP nao sao alterados.
   Ha 11 botoes: 3 linhas cheias de 3 + 2 na ultima linha.
   Os controles reais (sem clones) conservam eventos e imagens.
   ===================================================================== */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage {
  --imagas-subgrade-width: min(90vw, 510px); /* largura TOTAL da grade */
  --imagas-subgrade-height: clamp(36px, 10.2vw, 50px); /* altura de cada botao */
  --imagas-subgrade-gap: 8px; /* distancia horizontal/vertical */
}

/* Transforma a barra no UNICO grid, e nao tres grids independentes. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: var(--imagas-subgrade-gap) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: var(--imagas-subgrade-width) !important;
  max-width: calc(100vw - 24px) !important;
  margin-inline: auto !important;
  padding: 12px 0 !important;
  position: relative !important;
}

/* Logo fora da grade de botoes, ocupando uma linha inteira. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .subpage-brand {
  grid-column: 1 / -1 !important;
  width: max-content !important;
  max-width: 100% !important;
  justify-self: center !important;
  margin: 0 auto !important;
}

/* Os tres grupos originais ficam transparentes ao layout,
   permitindo o alinhamento de TODOS os 11 botoes na mesma grade. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .subpage-links,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .ascii-editor,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .ascii-editor > .terminal-actions,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock {
  display: contents !important;
}

/* Seis botoes de navegacao (linhas 1 e 2). */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .subpage-links > a {
  order: 0 !important;
}

/* Controles ficam em ordem logica, sem clones e sem o tema antigo. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > .motion-toggle {order: 1 !important;}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > #edit-chars {order: 2 !important;}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-final-theme {order: 3 !important;}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-preferences-reopen {order: 4 !important;}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-agenda-open {order: 5 !important;}

/* Forca a mesma celula para os 6 links e os 5 controles.
   Remove linhas/colunas atribuidas pelos estilos antigos. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .subpage-links > a,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > .motion-toggle,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > #edit-chars,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-final-theme,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-preferences-reopen,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-agenda-open {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
  place-self: stretch !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--imagas-subgrade-height) !important;
  min-height: var(--imagas-subgrade-height) !important;
  max-height: var(--imagas-subgrade-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: none !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Evita reexibir o botao antigo ESCURO, ja substituido pelo novo. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .terminal-actions > #theme-toggle {
  display: none !important;
}

/* As artes aproveitam a area integral da celula sem distorcer. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > .subpage-links > a img,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > .motion-toggle .control-art,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > #edit-chars .control-art,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock button img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Fallbacks de texto e label continuam legiveis quando a arte nao existe. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar button,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .motion-toggle {
  font-size: clamp(8px, 2vw, 11px) !important;
}

/* Painel EDITAR TEXTO abre abaixo da barra sem ocupar celula na grade. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .ascii-editor > #ascii-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(340px, calc(100vw - 24px)) !important;
  z-index: 2147480000 !important;
}

/* A terceira linha tem 3 botoes e a quarta tem os 2 restantes.
   O item AGENDA e' sempre o ultimo, sem desaparecer. */

/* Texto auxiliar de acessibilidade: preserva sua funcao, mas nao ocupa
   uma celula vazia da grade (caso esteja em .terminal-actions). */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar .terminal-actions > .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Os dois ultimos botoes ocupam a quarta linha, centralizados como par,
   e continuam da mesma largura dos outros nove. */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-preferences-reopen,
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"] body.subpage .subpage-topbar > #imagas-final-dock > #imagas-agenda-open {
  translate: calc((100% + var(--imagas-subgrade-gap)) / 2) 0 !important;
}
/* =====================================================================
   IMAGAS — RESTAURAR CONTROLES E CURSOR NO MODO DESKTOP
   Cole no FINAL de /player/shared/entrada-acessivel.css.
   Exclusivo do Desktop: nao altera a Home Mobile nem a grade Mobile 3 colunas.
   ===================================================================== */

/* O editor estava ficando fora da area visivel nas paginas internas ao
   alternar Mobile/Desktop. Garante sua posicao fixa original no Desktop. */
html[data-imagas-layout="desktop"] body.subpage .ascii-editor {
  display: block !important;
  position: fixed !important;
  top: var(--terminal-top, 150px) !important;
  bottom: auto !important;
  left: auto !important;
  right: var(--imagas-desktop-cima-right, 18px) !important;
  width: var(--imagas-desktop-par-largura, 298px) !important;
  max-width: calc(100vw - 24px) !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147480801 !important;
  transform: none !important;
  translate: var(--imagas-desktop-cima-x, 0px)
             var(--imagas-desktop-cima-y, 0px) !important;
}

html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: var(--imagas-desktop-botao-altura, 44px) !important;
  column-gap: var(--imagas-desktop-espaco, 8px) !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-editor .terminal-actions > #edit-chars,
html[data-imagas-layout="desktop"] body.subpage .ascii-editor .terminal-actions > .motion-toggle {
  display: flex !important;
  position: relative !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: var(--imagas-desktop-botao-altura, 44px) !important;
}

/* A agenda tambem deve estar disponivel nas seis paginas do Desktop.
   O JS complementar remove o atributo hidden colocado pelo codigo antigo. */
html[data-imagas-layout="desktop"] body.subpage #imagas-agenda-open:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  left: var(--imagas-agenda-left, 18px) !important;
  bottom: var(--imagas-agenda-bottom, 16px) !important;
  z-index: 2147480802 !important;
}

/* Reafirma o cursor desenhado pelo usuario, inclusive apos mudar de rota.
   Para aparecer, /artes-cursor/cursor.png deve existir no site publicado. */
@media (pointer: fine), (any-pointer: fine) {
  html,
  html body,
  html body * {
    cursor: url('/artes-cursor/cursor.png') 0 0, auto !important;
  }
  html body :is(a, button, select, summary, label, [role="button"]) {
    cursor: url('/artes-cursor/cursor.png') 0 0, pointer !important;
  }
  html body :is(input[type="text"], input[type="search"], textarea, [contenteditable="true"]) {
    cursor: text !important;
  }
}


/* ============================================================================
   IMAGAS — DESKTOP V2: controles visiveis nas subpaginas cacheadas pelo SPA
   Nao muda o modo MOBILE, incluindo o grid de 3 colunas.
   ============================================================================ */
html[data-imagas-layout="desktop"] {
  --imagas-desktop-editor-top: var(--terminal-top, 150px);
  --imagas-desktop-editor-right: var(--imagas-desktop-cima-right, 18px);
}

/* A regra antiga dependia de body.subpage e podia atingir controles de
   paginas guardadas no cache. Seleciona somente a rota atualmente visivel. */
html[data-imagas-layout="desktop"] body #imagas-pages > .imagas-route-content:not([hidden]) .ascii-editor,
html[data-imagas-layout="desktop"] body.subpage > .ascii-editor {
  display: block !important;
  position: fixed !important;
  top: var(--imagas-desktop-editor-top) !important;
  right: var(--imagas-desktop-editor-right) !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--imagas-desktop-par-largura, 298px) !important;
  max-width: calc(100vw - 24px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147480801 !important;
  transform: none !important;
  translate: var(--imagas-desktop-cima-x, 0px) var(--imagas-desktop-cima-y, 0px) !important;
}

html[data-imagas-layout="desktop"] body #imagas-pages > .imagas-route-content:not([hidden]) .ascii-editor > .terminal-actions,
html[data-imagas-layout="desktop"] body.subpage > .ascii-editor > .terminal-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: var(--imagas-desktop-botao-altura, 44px) !important;
  column-gap: var(--imagas-desktop-espaco, 8px) !important;
  width: 100% !important;
  height: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Prioridade maior que styles.css:
   .custom-image-control:not(.has-control-art):not(.control-art-fallback)
   que escondia MODO 0 e EDITAR TEXTO se o PNG nao fosse inicializado. */
html[data-imagas-layout="desktop"] body .imagas-route-content:not([hidden]) .ascii-editor .terminal-actions > #edit-chars.custom-image-control,
html[data-imagas-layout="desktop"] body .imagas-route-content:not([hidden]) .ascii-editor .terminal-actions > .motion-toggle.custom-image-control,
html[data-imagas-layout="desktop"] body.subpage > .ascii-editor .terminal-actions > #edit-chars.custom-image-control,
html[data-imagas-layout="desktop"] body.subpage > .ascii-editor .terminal-actions > .motion-toggle.custom-image-control {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--imagas-desktop-botao-altura, 44px) !important;
  min-height: var(--imagas-desktop-botao-altura, 44px) !important;
  max-height: var(--imagas-desktop-botao-altura, 44px) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Nao esconde o botao ao esperar a imagem: mostra o texto ate carregar. */
html[data-imagas-layout="desktop"] body .ascii-editor .custom-image-control.control-art-fallback .control-text {
  display: inline !important;
  line-height: normal !important;
}
html[data-imagas-layout="desktop"] body .ascii-editor .custom-image-control.control-art-fallback .control-art {
  display: none !important;
}

/* AGENDA no Desktop: ja nao depende da classe da subpagina. */
html[data-imagas-layout="desktop"] body > #imagas-agenda-open:not([hidden]) {
  display: inline-flex !important;
  position: fixed !important;
  left: var(--imagas-agenda-left, 18px) !important;
  bottom: var(--imagas-agenda-bottom, 16px) !important;
  top: auto !important;
  right: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147480802 !important;
}

/* CURSOR: caminho independente do CSS da pagina; fora de media queries para
   funcionar inclusive em laptops hibridos com mouse e tela de toque. */
:root { --imagas-cursor-arquivo: url('/artes-cursor/cursor.png'); }
html, html body, html body * {
  cursor: var(--imagas-cursor-arquivo) 0 0, auto !important;
}
html body :is(a, button, label, select, summary, [role="button"], input[type="button"], input[type="submit"]) {
  cursor: var(--imagas-cursor-arquivo) 0 0, pointer !important;
}
html body :is(input[type="text"], input[type="email"], input[type="search"], textarea, [contenteditable="true"]) {
  cursor: text !important;
}

/* =====================================================================
   IMAGAS — CONTROLES UNIFICADOS NO CANTO INFERIOR DIREITO — DESKTOP
   SOMENTE SUBPAGINAS. A Home e TODAS as regras MOBILE ficam preservadas.

   DISTRIBUICAO:
     [ MODO 0        ][ EDITAR TEXTO   ]
     [ ESCURO / CLARO][ VISUALIZACAO   ]
               [ EDITAR ASCII ]

   Nao move nem duplica os botoes do terminal: apenas alinha seus grupos.
   ===================================================================== */
html[data-imagas-layout="desktop"] body.subpage {
  --imagas-bloco-desktop-right: 18px;    /* distancia da borda direita */
  --imagas-bloco-desktop-bottom: 16px;   /* distancia da borda inferior */
  --imagas-bloco-desktop-width: 298px;   /* largura dos dois botoes juntos */
  --imagas-bloco-desktop-height: 44px;   /* altura de cada botao */
  --imagas-bloco-desktop-gap: 8px;       /* distancia igual nas 2 direcoes */
  --imagas-bloco-desktop-x: 0px;         /* mover o bloco: + direita */
  --imagas-bloco-desktop-y: 0px;         /* mover o bloco: + baixo */
}

/* Primeira linha: controla o editor (SEM tirar o #ascii-panel de dentro). */
html[data-imagas-layout="desktop"] body.subpage #imagas-pages > .imagas-route-content:not([hidden]) .ascii-editor,
html[data-imagas-layout="desktop"] body.subpage > .ascii-editor,
html[data-imagas-layout="desktop"] body.subpage .ascii-editor {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: var(--imagas-bloco-desktop-right) !important;
  bottom: calc(
    var(--imagas-bloco-desktop-bottom) +
    var(--imagas-bloco-desktop-height) + var(--imagas-bloco-desktop-gap) +
    var(--imagas-bloco-desktop-height) + var(--imagas-bloco-desktop-gap)
  ) !important;
  width: var(--imagas-bloco-desktop-width) !important;
  max-width: calc(100vw - 24px) !important;
  height: var(--imagas-bloco-desktop-height) !important;
  min-height: var(--imagas-bloco-desktop-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: var(--imagas-bloco-desktop-x) var(--imagas-bloco-desktop-y) !important;
  z-index: 2147481100 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-bloco-desktop-height) !important;
  gap: var(--imagas-bloco-desktop-gap) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: var(--imagas-bloco-desktop-height) !important;
  padding: 0 !important;
  margin: 0 !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions > .motion-toggle,
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions > #edit-chars {
  display: flex !important;
  position: relative !important;
  inset: auto !important;
  top: 0 !important;
  left: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--imagas-bloco-desktop-height) !important;
  height: var(--imagas-bloco-desktop-height) !important;
  max-height: var(--imagas-bloco-desktop-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions > .motion-toggle {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > .terminal-actions > #edit-chars {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
/* Abre o terminal ACIMA do bloco, nao em cima dos botoes. */
html[data-imagas-layout="desktop"] body.subpage .ascii-editor > #ascii-panel {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  translate: none !important;
  transform: none !important;
  max-width: min(350px,calc(100vw - 24px)) !important;
  z-index: 20 !important;
}

/* Segunda linha: ESCURO/CLARO e VISUALIZACAO, no rodape que ja existe. */
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: var(--imagas-bloco-desktop-right) !important;
  bottom: calc(
    var(--imagas-bloco-desktop-bottom) +
    var(--imagas-bloco-desktop-height) + var(--imagas-bloco-desktop-gap)
  ) !important;
  box-sizing: border-box !important;
  width: var(--imagas-bloco-desktop-width) !important;
  max-width: calc(100vw - 24px) !important;
  height: var(--imagas-bloco-desktop-height) !important;
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: var(--imagas-bloco-desktop-height) !important;
  gap: var(--imagas-bloco-desktop-gap) !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  translate: var(--imagas-bloco-desktop-x) var(--imagas-bloco-desktop-y) !important;
  z-index: 2147481050 !important;
  pointer-events: auto !important;
}
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock > #imagas-final-theme,
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock > #imagas-preferences-reopen {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--imagas-bloco-desktop-height) !important;
  height: var(--imagas-bloco-desktop-height) !important;
  max-height: var(--imagas-bloco-desktop-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  transform: none !important;
  translate: none !important;
}
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock > #imagas-final-theme {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock > #imagas-preferences-reopen {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

/* Terceira linha: IMAGEM ASCII centralizada, sem sobrepor VISUALIZACAO. */
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: var(--imagas-bloco-desktop-right) !important;
  bottom: var(--imagas-bloco-desktop-bottom) !important;
  box-sizing: border-box !important;
  width: var(--imagas-bloco-desktop-width) !important;
  max-width: calc(100vw - 24px) !important;
  height: var(--imagas-bloco-desktop-height) !important;
  min-height: var(--imagas-bloco-desktop-height) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: var(--imagas-bloco-desktop-x) var(--imagas-bloco-desktop-y) !important;
  z-index: 2147481200 !important;
  pointer-events: auto !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor > #edit-ascii-image {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc((100% - var(--imagas-bloco-desktop-gap))/2) !important;
  width: calc((100% - var(--imagas-bloco-desktop-gap))/2) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--imagas-bloco-desktop-height) !important;
  min-height: var(--imagas-bloco-desktop-height) !important;
  max-height: var(--imagas-bloco-desktop-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor > #edit-ascii-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}
/* Janela da imagem acima do bloco quando aberta. */
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor > #ascii-image-panel {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;
  z-index: 30 !important;
}

/* CURSOR: mesma arte tambem no hover dos botoes e sobre suas imagens.
   Mais especifico que os `cursor: pointer` locais do player e das paginas.
   O arquivo /artes-cursor/cursor.png deve continuar publicado. */
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock,
html[data-imagas-layout="desktop"] body.subpage #imagas-final-dock *,
html[data-imagas-layout="desktop"] body.subpage .ascii-editor .terminal-actions,
html[data-imagas-layout="desktop"] body.subpage .ascii-editor .terminal-actions *,
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor > #edit-ascii-image,
html[data-imagas-layout="desktop"] body.subpage .ascii-image-editor > #edit-ascii-image * {
  cursor: url('/artes-cursor/cursor.png') 0 0, pointer !important;
}

/* RECURSOS: restaura o zoom das capas de LIVROS e FILMES no Desktop,
   mesmo em dispositivos que anunciam touch como ponteiro principal.
   Nao aplica zoom no MOBILE nem em imagens de outros blocos. */
html[data-imagas-layout="desktop"] body.page-recursos .ir-cover-card {
  position: relative !important;
  overflow: visible !important;
  isolation: auto !important;
}
html[data-imagas-layout="desktop"] body.page-recursos .ir-cover-card img {
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: transform .22s ease, filter .22s ease !important;
  will-change: transform;
}
html[data-imagas-layout="desktop"] body.page-recursos .ir-cover-card:is(:hover,:focus-within) {
  z-index: 100 !important;
}
html[data-imagas-layout="desktop"] body.page-recursos .ir-cover-card:is(:hover,:focus-within) img {
  transform: scale(var(--ir-cover-hover-scale,1.12)) !important;
}
/* ==========================================
   IMAGAS — AJUSTES EXCLUSIVOS DA HOME MOBILE
   ========================================== */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player {

    /* POSIÇÃO DO CONJUNTO */
    --mobile-nav-top: 31dvh;
    --imagas-mobile-grupo-y: 0px;
    --imagas-home-x: 0px;

    /* TAMANHO DOS BOTÕES */
    --imagas-mobile-grupo-largura: min(66vw, 420px);
    --imagas-mobile-altura-botao: clamp(36px, 9.4vw, 52px);

    /* DISTÂNCIA ENTRE TODOS OS BOTÕES */
    --imagas-mobile-distancia-entre-botoes: 38px;

    /* SINCRONIZA TODOS OS GRUPOS */
    --imagas-nove-largura: var(--imagas-mobile-grupo-largura);
    --imagas-nove-altura: var(--imagas-mobile-altura-botao);
    --imagas-nove-espaco: var(--imagas-mobile-distancia-entre-botoes);
}

/* ==========================================
   IMAGAS — APROXIMAR COLUNAS NA HOME MOBILE
   ========================================== */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player {

    /* DISTÂNCIA ENTRE AS DUAS COLUNAS */
    --imagas-home-gap-horizontal: 2px;

    /* LARGURA TOTAL DO CONJUNTO */
    --imagas-mobile-grupo-largura: min(50vw, 420px);
    --imagas-nove-largura: var(--imagas-mobile-grupo-largura);
}

/* Aplicar a mesma distância aos três grupos */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player #home-navigation,

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player .ascii-editor .terminal-actions,

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player #imagas-final-dock {
    column-gap: var(--imagas-home-gap-horizontal) !important;
}

/* AGENDA mantém a largura dos outros botões */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.page-home-player #imagas-final-dock > #imagas-agenda-open {
    width: calc((100% - var(--imagas-home-gap-horizontal)) / 2) !important;
    max-width: calc((100% - var(--imagas-home-gap-horizontal)) / 2) !important;
}
/* ==========================================
   IMAGAS — TAMANHO DO EDITAR TEXTO
   SOMENTE PÁGINAS INTERNAS / MOBILE
   ========================================== */

html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.subpage {
    /* Ajuste o tamanho visual da arte */
    --imagas-editar-texto-escala: 1.25;
}

/* Mantém o botão do mesmo tamanho dos outros */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.subpage .subpage-topbar .terminal-actions > #edit-chars {
    width: 100% !important;
    max-width: 100% !important;
    height: var(--imagas-subgrade-height) !important;
    min-height: var(--imagas-subgrade-height) !important;
    max-height: var(--imagas-subgrade-height) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Ajusta somente a imagem do botão */
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.subpage .subpage-topbar .terminal-actions > #edit-chars img.control-art {
    width: 80% !important;
    height: 90% !important;
    max-width: 80% !important;
    max-height: 80% !important;
    object-fit: contain !important;
    transform:
    translateX(var(--imagas-editar-texto-x))
    scale(var(--imagas-editar-texto-escala)) !important;
    transform-origin: center center !important;
}
html.imagas-nine-mobile-ready[data-imagas-layout="mobile"]
body.subpage {
    --imagas-editar-texto-escala: 1.25;
    --imagas-editar-texto-x: -2px;
}
/* ==========================================
   IMAGAS — CURSOR PERSONALIZADO NOS
   BOTÕES INFERIORES DO DESKTOP
   ========================================== */

html[data-imagas-layout="desktop"] body
:is(
    #imagas-final-dock,
    #imagas-agenda-open,
    #imagas-preferences-reopen,
    #imagas-final-theme,
    .ascii-editor .terminal-actions,
    #edit-chars,
    .motion-toggle,
    #edit-ascii-image
),
html[data-imagas-layout="desktop"] body
:is(
    #imagas-final-dock,
    #imagas-agenda-open,
    #imagas-preferences-reopen,
    #imagas-final-theme,
    .ascii-editor .terminal-actions,
    #edit-chars,
    .motion-toggle,
    #edit-ascii-image
) * {
    cursor: url("/artes-cursor/cursor.png") 0 0, pointer !important;
}
/* ==========================================
   IMAGAS — CURSOR UNIFORME NO DESKTOP
   ========================================== */

html[data-imagas-layout="desktop"] body
:is(
    #imagas-final-dock,
    #imagas-agenda-open,
    #imagas-preferences-reopen,
    #imagas-final-theme,
    .ascii-editor .terminal-actions,
    #edit-chars,
    .motion-toggle,
    #edit-ascii-image
),
html[data-imagas-layout="desktop"] body
:is(
    #imagas-final-dock,
    #imagas-agenda-open,
    #imagas-preferences-reopen,
    #imagas-final-theme,
    .ascii-editor .terminal-actions,
    #edit-chars,
    .motion-toggle,
    #edit-ascii-image
) * {
    cursor:
        var(--imagas-cursor-arquivo)
        0 0,
        auto !important;
}
/* ==========================================
   IMAGAS — FONTE GLOBAL DOS TÍTULOS H3
   ========================================== */

/* FONTE PERSONALIZADA */
@font-face {
    font-family: "ImagasH3";
    src: url("/fontes/orbitron-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* CONFIGURAÇÕES GLOBAIS */
:root {
    --imagas-h3-font: "ImagasH3", sans-serif;
    --imagas-h3-size: 22px;
    --imagas-h3-weight: 400;
    --imagas-h3-spacing: 1px;
}

/* APLICA A TODOS OS H3 */
body h3 {
    font-family: var(--imagas-h3-font) !important;
    font-size: var(--imagas-h3-size);
    font-weight: var(--imagas-h3-weight);
    letter-spacing: var(--imagas-h3-spacing);
}
/* IMAGAS — FONTE GLOBAL DOS SPANS */

:root {
    --imagas-span-font: "ImagasH3", sans-serif;
}

body span {
    font-family: var(--imagas-span-font) !important;
}
/* ==========================================
   IMAGAS — CORRIGIR CAIXA EDITAR TEXTO
   SOMENTE MOBILE / MODO CLARO
   ========================================== */

html[data-imagas-layout="mobile"]:not([data-theme="dark"])
body .ascii-editor #ascii-panel {
    background-color: #f1f2f9 !important;
    color: #4b5d8a !important;
    color-scheme: light;
}

html[data-imagas-layout="mobile"]:not([data-theme="dark"])
body .ascii-editor #ascii-panel #ascii-input {
    background: rgba(255, 255, 255, 0.0) !important;
    color: #4b5d8a !important;
    -webkit-text-fill-color: #4b5d8a !important;
    border-color: #4b5d8a !important;
    caret-color: #4b5d8a !important;
}
/* ===============================================
   IMAGAS — EDITAR TEXTO
   CORREÇÃO IPHONE / MOBILE CLARO
   =============================================== */

html[data-imagas-layout="mobile"]:not([data-theme="dark"])
#ascii-panel {
    background: #f1f2f9 !important;
    background-image: none !important;
    color: #4b5d8a !important;
    color-scheme: light !important;
}

html[data-imagas-layout="mobile"]:not([data-theme="dark"])
#ascii-panel .terminal-header,
html[data-imagas-layout="mobile"]:not([data-theme="dark"])
#ascii-panel .terminal-body {
    background: transparent !important;
    color: #4b5d8a !important;
}

html[data-imagas-layout="mobile"]:not([data-theme="dark"])
#ascii-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #4b5d8a !important;
    -webkit-text-fill-color: #4b5d8a !important;
    border: 1px solid #4b5d8a !important;
    caret-color: #4b5d8a !important;
    color-scheme: light !important;
}