/* ==========================================
   IMAGAS — CLEAN RESPONSIVE / CROPPED LAYOUT
========================================== */

:root {
    /* Base dimensions of the artwork. JS updates these using the real image size. */
    --scene-base-width: 1920;
    --scene-base-height: 1080;
    --scene-scale: 1;
    --min-scene-scale: 0.74;

    /* Global scene offsets */
    --scene-x: 0px;
    --scene-y: 0px;

    /* Invisible source image position (moves the ASCII drawing too) */
    --logo-x: 0px;
    --logo-y: 0px;

    /* Buttons centered in the horizontal black band between the white bars */
    --buttons-left: 50%;
    --buttons-top: 32.5%;
    --buttons-x: 0px;
    --buttons-y: 0px;
    --button-design-width: 88px;
    --button-design-gap: 100px;

    /* Logo / gif centered in the circle */
    --gif-left: 49.6%;
    --gif-top: 13.7%;
    --gif-x: 0px;
    --gif-y: 0px;
    --gif-design-width: 120px;

    /* Static i-mode logo */
    --i-logo-left: 49.8%;
    --i-logo-top: 12.65%;
    --i-logo-x: 0px;
    --i-logo-y: 0px;
    --i-logo-width: 120px;

    /* Terminal placement */
    --terminal-top: 42px;
    --terminal-right: 42px;
    --terminal-button-x: 0px;
    --terminal-button-y: 0px;
    --static-toggle-x: 0px;
    --static-toggle-y: 0px;
    --terminal-window-x: 0px;
    --terminal-window-y: 0px;

    /* ASCII extra: só fora dos limites horizontais da imagem.
       Os 31% de cima ficam sem preenchimento adicional. */
    --side-fill-start: 0%;

    --brand-blue: #4b5d8a;
    --page-bg: #f7f7f7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background: var(--page-bg);
}
body {
    color: var(--brand-blue);
    font-family: "Courier New", monospace;
}

.hero {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--page-bg);
    z-index: 0;
}

#grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* The composition scales down only until --min-scene-scale.
   After that, the viewport crops it instead of shrinking it further. */
.scene {
    position: absolute;
    top: calc(50% + var(--scene-y));
    left: calc(50% + var(--scene-x));
    width: calc(var(--scene-base-width) * 1px);
    transform: translate(-50%, -50%) scale(var(--scene-scale));
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
}

.scene > .logo {
    position: relative;
    width: 100%;
    transform: translate(var(--logo-x), var(--logo-y));
    pointer-events: none;
}

#source {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.scene > .container {
    position: absolute;
    top: calc(var(--buttons-top) + var(--buttons-y));
    left: calc(var(--buttons-left) + var(--buttons-x));
    transform: translate(-50%, -50%);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--button-design-gap);
    width: max-content;
    max-width: 100%;
    z-index: 20;
    pointer-events: auto;
}

/* BUTTON SIZE CONTROL */

:root {
    --button-width: 200px;
}

.image-button {
    display: block;
    flex: 0 0 auto;
    width: var(--button-width);
    cursor: pointer;
}

.image-button img {
    display: block;
    width: 100%;
    height: auto;

    image-rendering: auto;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.image-button:hover img {
    transform: none !important;
    filter: none !important;
    opacity: 1;

}
.image-button:hover img { transform: scale(1.08); opacity: .9; }
.image-button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 4px; }

.scene > .gif-container,
.scene > .i-mode-logo {
    position: absolute;
    left: calc(var(--gif-left) + var(--gif-x));
    top: calc(var(--gif-top) + var(--gif-y));
    transform: translate(-50%, -50%);
    z-index: 12;
    pointer-events: none;
}

.scene > .gif-container { width: var(--gif-design-width); }
.scene > .gif-container img {
    display: block;
    width: 100%;
    height: auto;
}

.scene > .i-mode-logo {
    left: calc(var(--i-logo-left) + var(--i-logo-x));
    top: calc(var(--i-logo-top) + var(--i-logo-y));
    width: var(--i-logo-width);
    display: none;
}

.scene > .i-mode-logo img {
    display: block;
    width: 100%;
    height: auto;
}

body.i-mode .scene > .gif-container {
    opacity: 0;
    visibility: hidden;
}
body.i-mode .scene > .i-mode-logo {
    display: block;
}

/* Terminal */
.ascii-editor {
    position: fixed;
    top: var(--terminal-top);
    right: var(--terminal-right);
    z-index: 9999;
    font-family: "Courier New", monospace;
    color: var(--brand-blue);
    pointer-events: auto;
}

.terminal-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
}

#edit-chars {
    position: relative;
    left: var(--terminal-button-x);
    top: var(--terminal-button-y);
    display: block;
    background: #ffffff;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    padding: 10px 15px;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}
#edit-chars:hover { background: var(--brand-blue); color: white; }

.motion-toggle {
    position: relative;
    left: var(--static-toggle-x);
    top: var(--static-toggle-y);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--brand-blue);
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
}
.motion-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.toggle-track {
    position: relative;
    width: 34px;
    height: 18px;
    border: 1px solid var(--brand-blue);
    background: #dfe3ec;
}
.toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    background: var(--brand-blue);
    transition: transform .18s ease;
}
.motion-toggle input:checked + .toggle-track .toggle-thumb {
    transform: translateX(16px);
}
.toggle-label { line-height: 1; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#ascii-panel {
    position: absolute;
    top: calc(45px + var(--terminal-window-y));
    right: calc(0px - var(--terminal-window-x));
    width: 320px;
    max-width: min(320px, calc(100vw - 24px));
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    background: #ffffff;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    box-shadow: 4px 4px 0 var(--brand-blue);
}
#ascii-panel[hidden] { display: none; }

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #ffffff;
    border-bottom: 1px solid var(--brand-blue);
    font-weight: bold;
}
#close-terminal,
#reset-chars {
    background: transparent;
    border: none;
    color: var(--brand-blue);
    font-family: inherit;
    cursor: pointer;
}
.terminal-body {
    padding: 18px 15px;
    background: #ffffff;
    line-height: 1.6;
}
.terminal-body p { margin-bottom: 16px; }
.terminal-body label {
    display: block;
    margin-bottom: 8px;
}
#ascii-input {
    display: block;
    width: 100%;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--brand-blue);
    color: var(--brand-blue);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    caret-color: var(--brand-blue);
}
#ascii-input:focus { box-shadow: 0 0 8px rgba(75, 93, 138, .33); }
.terminal-cursor {
    color: var(--brand-blue);
    font-size: 18px;
    animation: blink 1s steps(1) infinite;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.terminal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}
.terminal-status { font-size: 11px; }
#reset-chars:hover,
#close-terminal:hover { text-decoration: underline; }

@media (max-width: 900px) {
    :root {
        --terminal-top: 14px;
        --terminal-right: 14px;
    }

    #ascii-panel {
        width: min(320px, calc(100vw - 24px));
    }

    
}
/* BUTTON SHARPNESS FIX */

.image-button,
.image-button img {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
}

.image-button img {
    display: block;
    width: 88px;
    height: 31px;

    image-rendering: auto !important;
    backface-visibility: visible;

}
html {
    zoom: 1;

}

/* ==================================
   IMAGAS — BUTTON SIZE
================================== */

:root {
    --button-width: 130px;
    --button-gap: 50px;
}

/* BUTTON CONTAINER */
.container {
    gap: var(--button-gap) !important;
}

/* BUTTON */
.container .image-button {
    width: var(--button-width) !important;
    height: auto !important;
    flex: 0 0 auto;
}

/* BUTTON IMAGE */
.container .image-button img {
    display: block;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;

    image-rendering: auto;
    transform: none !important;
    transition: none !important;
}

.container .image-button img {
    opacity: 1 !important;
    transform: scale(1) !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease !important;
}

.container .image-button:hover img {
    opacity: 0.7 !important;
    transform: scale(1.08) !important;
}

/* ====================================================
   IMAGAS — DARK MODE
   Tema inicial claro. O tema escuro é aplicado ao <html>.
   A arte original e os PNGs dos botões nunca são invertidos.
==================================================== */
:root {
    --ascii-color: #4b5d8a;
    --theme-toggle-x: 0px;
    --theme-toggle-y: 0px;
}
html[data-theme="dark"] {
    --page-bg: #000000;
    --brand-blue: #ffffff;
    --ascii-color: #2f4bc2;
    color-scheme: dark;
}

/* Botão de tema — independente do canvas e da cena escalada */
.terminal-actions { flex-wrap: wrap; }
.theme-toggle {
    position: relative;
    left: var(--theme-toggle-x);
    top: var(--theme-toggle-y);
    display: inline-block;
    border: 1px solid var(--brand-blue);
    padding: 10px 15px;
    font: 12px/1.4 "Courier New", monospace;
    background: #ffffff;
    color: #4b5d8a;
    white-space: nowrap;
    cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: #4b5d8a;
    color: #ffffff;
}

/* Plano de fundo + elementos do terminal */
html[data-theme="dark"] body,
html[data-theme="dark"] .hero {
    background: #000000;
    color: #ffffff;
}
html[data-theme="dark"] .ascii-editor,
html[data-theme="dark"] .terminal-cursor,
html[data-theme="dark"] .terminal-status {
    color: #ffffff;
}
html[data-theme="dark"] #edit-chars,
html[data-theme="dark"] .motion-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] #ascii-panel,
html[data-theme="dark"] .terminal-header,
html[data-theme="dark"] .terminal-body,
html[data-theme="dark"] #ascii-input,
html[data-theme="dark"] #close-terminal,
html[data-theme="dark"] #reset-chars {
    background: #000000;
    color: #ffffff;
    border-color: #ffffff;
}
html[data-theme="dark"] #ascii-panel {
    box-shadow: 4px 4px 0 #ffffff;
}
html[data-theme="dark"] #ascii-input { caret-color: #ffffff; }
html[data-theme="dark"] .toggle-track {
    border-color: #ffffff;
    background: #000000;
}
html[data-theme="dark"] .toggle-thumb { background: #ffffff; }
html[data-theme="dark"] .motion-toggle input:checked + .toggle-track .toggle-thumb {
    background: #000000;
}
html[data-theme="dark"] .motion-toggle input:checked + .toggle-track {
    background: #ffffff;
}
html[data-theme="dark"] #edit-chars:hover,
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .theme-toggle:focus-visible {
    background: #ffffff;
    color: #000000;
}

/* Foco do teclado no tema escuro */
html[data-theme="dark"] .image-button:focus-visible,
html[data-theme="dark"] #edit-chars:focus-visible,
html[data-theme="dark"] .motion-toggle:focus-within,
html[data-theme="dark"] .theme-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}


/* ==========================================================
   IMAGAS — ARTES PERSONALIZADAS DOS CONTROLES
   As 5 imagens são configuradas em controls.js. Se o PNG
   não existir, o botão mantém seu texto original.
========================================================== */
:root {
    --controle-tema-largura: 120px;
    --controle-editar-largura: 120px;
    --controle-modo0-largura: 120px;
}

.custom-image-control .control-art { display: none; }
.custom-image-control.has-control-art .control-text,
.custom-image-control.has-control-art .toggle-track { display: none; }

/* Anula molduras, fundos e padding do botão textual só quando há uma arte válida. */
.custom-image-control.has-control-art {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 0;
}
.custom-image-control.has-control-art .control-art {
    display: block;
    max-width: none;
    height: auto;
    image-rendering: auto;
    opacity: 1;
    transition: opacity .18s ease;
}
#theme-toggle.has-control-art .control-art { width: var(--controle-tema-largura); }
#edit-chars.has-control-art .control-art { width: var(--controle-editar-largura); }
.motion-toggle.has-control-art .control-art { width: var(--controle-modo0-largura); }

/* Sem transform scale: evita voltar a borrar o texto dos PNGs. */
.custom-image-control.has-control-art:hover .control-art { opacity: .75; }
.custom-image-control.has-control-art:focus-visible,
.custom-image-control.has-control-art:focus-within { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
html[data-theme="dark"] .custom-image-control.has-control-art {
    background: transparent !important;
    border: 0 !important;
}

/* O logo estático é visível no MODO 0 e preserva sua posição. */
body.i-mode .scene > .i-mode-logo { display: block; visibility: visible; opacity: 1; }
.scene > .i-mode-logo img { display: block; width: 100%; height: auto; }

/* =========================================================
   HOME — NAVEGAÇÃO NÍTIDA (FORA DA .scene ESCALADA)
   A âncora invisível acompanha a arte; imagens não recebem scale().
   Edite as duas variáveis abaixo para tamanho e espaçamento.
========================================================= */
:root {
    --home-nav-icon-width: 105px;
    --home-nav-gap: 16px;
}

/* Fica exatamente onde estava a barra antiga, mas é apenas um marcador. */
.scene > .home-nav-anchor {
    position: absolute;
    left: calc(var(--buttons-left) + var(--buttons-x));
    top: calc(var(--buttons-top) + var(--buttons-y));
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Camada independente: dentro de .hero, FORA de .scene. */
#home-navigation {
    position: absolute;
    z-index: 25;
    top: 0;
    left: 0;
    width: max-content;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--home-nav-gap);
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    pointer-events: auto;
    transform: none !important;
    filter: none !important;
    opacity: 1;
}

#home-navigation .image-button {
    display: block;
    flex: 0 0 var(--home-nav-icon-width);
    width: var(--home-nav-icon-width) !important;
    height: auto;
    line-height: 0;
    padding: 0;
    margin: 0;
    transform: none !important;
    filter: none !important;
}

#home-navigation .image-button img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    image-rendering: auto;
    transform: none !important;
    filter: none !important;
    backface-visibility: visible;
    opacity: 1;
    transition: opacity .18s ease !important;
    will-change: auto !important;
}

/* Hover apenas em opacidade; scale no hover recriaria o borrão. */
#home-navigation .image-button:hover img,
#home-navigation .image-button:focus-visible img {
    transform: none !important;
    opacity: .72;
}

#home-navigation .image-button:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

/* ===============================================================
   IMAGAS — ARTE DO BOTÃO [ IMAGEM ASCII ] (PÁGINAS INTERNAS)
   Tamanho independente dos outros controles e da animação ASCII.
================================================================ */
:root {
    --controle-imagem-ascii-largura: 125px;
}

/* Não mostra o ícone até ter certeza de que o arquivo carregou. */
#edit-ascii-image .ascii-image-button-art {
    display: none;
}

/* Quando a arte está disponível, o botão continua clicável. */
#edit-ascii-image.has-ascii-image-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    line-height: 0;
}

#edit-ascii-image.has-ascii-image-art .ascii-image-button-label {
    display: none;
}

#edit-ascii-image.has-ascii-image-art .ascii-image-button-art {
    display: block;
    width: var(--controle-imagem-ascii-largura);
    max-width: min(60vw, 260px);
    height: auto;
    transform: none !important;
    filter: none !important;
    image-rendering: auto;
    opacity: 1;
    transition: opacity .18s ease;
}

#edit-ascii-image.has-ascii-image-art:hover .ascii-image-button-art,
#edit-ascii-image.has-ascii-image-art:focus-visible .ascii-image-button-art {
    opacity: .75;
}



/* ==============================================================
   IMAGAS — CONTROLES SEM PISCADA (FOUC)
   A arte substitui o botão de texto somente quando carregada.
   Enquanto o PNG está chegando, não mostra a interface antiga.
   Se houver erro ou o arquivo não for configurado, o texto volta.
   O JS marca .control-art-fallback / .ascii-image-art-fallback.
============================================================== */

/* Reserva a mesma largura da arte enquanto o arquivo carrega,
   reduzindo o deslocamento dos controles na primeira renderização. */
#theme-toggle.custom-image-control {
    min-width: var(--controle-tema-largura);
}
#edit-chars.custom-image-control {
    min-width: var(--controle-editar-largura);
}
.motion-toggle.custom-image-control {
    min-width: var(--controle-modo0-largura);
}
#edit-ascii-image {
    min-width: var(--controle-imagem-ascii-largura);
}

/* Oculta somente os controles cujas imagens ainda não foram
   confirmadas como carregadas ou ausentes. Mantém o espaço reservado. */
.custom-image-control:not(.has-control-art):not(.control-art-fallback),
#edit-ascii-image:not(.has-ascii-image-art):not(.ascii-image-art-fallback) {
    visibility: hidden !important;
}


/* ==============================================================
   IMAGAS — CONTROLES ESTÁVEIS (SEM SALTO DE POSIÇÃO)
   Largura e altura idênticas ANTES e DEPOIS do carregamento.
============================================================== */
:root {
    --controle-altura: 44px;
}

#theme-toggle.custom-image-control,
#edit-chars.custom-image-control,
.motion-toggle.custom-image-control {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--controle-altura) !important;
    min-height: var(--controle-altura) !important;
    max-height: var(--controle-altura) !important;
    margin: 0;
    overflow: hidden;
    vertical-align: middle;
}

#theme-toggle.custom-image-control {
    flex: 0 0 var(--controle-tema-largura);
    width: var(--controle-tema-largura) !important;
    min-width: var(--controle-tema-largura) !important;
    max-width: var(--controle-tema-largura) !important;
}
#edit-chars.custom-image-control {
    flex: 0 0 var(--controle-editar-largura);
    width: var(--controle-editar-largura) !important;
    min-width: var(--controle-editar-largura) !important;
    max-width: var(--controle-editar-largura) !important;
}
.motion-toggle.custom-image-control {
    flex: 0 0 var(--controle-modo0-largura);
    width: var(--controle-modo0-largura) !important;
    min-width: var(--controle-modo0-largura) !important;
    max-width: var(--controle-modo0-largura) !important;
}

/* PNGs proporcionais dentro do espaço reservado, sem escala CSS. */
#theme-toggle.has-control-art .control-art,
#edit-chars.has-control-art .control-art,
.motion-toggle.has-control-art .control-art {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: var(--controle-altura) !important;
    object-fit: contain;
}

/* A versão textual continua funcional se faltar o PNG. */
.custom-image-control .control-text { white-space: normal; }

/* IMAGEM ASCII: idênticas dimensões na espera, na arte e no fallback. */
#edit-ascii-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--controle-imagem-ascii-largura) !important;
    min-width: var(--controle-imagem-ascii-largura) !important;
    max-width: var(--controle-imagem-ascii-largura) !important;
    height: var(--controle-altura) !important;
    min-height: var(--controle-altura) !important;
    max-height: var(--controle-altura) !important;
    overflow: hidden;
}
#edit-ascii-image.has-ascii-image-art .ascii-image-button-art {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: var(--controle-altura) !important;
    object-fit: contain;
}

/* Home: não renderizar a navegação no canto superior esquerdo antes
   do JavaScript calcular a posição correta da âncora invisível. */
#home-navigation:not([data-positioned="true"]) {
    visibility: hidden !important;
}
/* Proporção constante durante o download de PNGs de alta resolução. */
#home-navigation .image-button {
    aspect-ratio: 88 / 31;
    overflow: hidden;
}
#home-navigation .image-button img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}