/* 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;
  }
}