/*
 * ECO: Fragmento do Amanhã / ECO: Fragment of Tomorrow
 * © 2025-2026 Daniel Paschoalinoto. Todos os direitos reservados. All rights reserved.
 * Licença / License: https://playeco.com.br/license.html
 * Proibido copiar, redistribuir, hospedar, vender ou publicar versões modificadas sem autorização por escrito.
 * Copying, redistributing, hosting, selling or publishing modified versions without written permission is prohibited.
 *
 * MEXER AQUI ANTES DE FINALIZAR ESTRAGARÁ SUA EXPERIÊNCIA, SE PREPARAR DE VERDADE É ESSENCIAL PARA DERROTÁ-LA.
 */

:root {
  --bg: #0a0b10;
  --fg: #d6d8de;
  --dim: #7b8090;
  --neon-rgb: 60,240,240;
  --neon: rgb(var(--neon-rgb));
  --pink: #ff3cc8;
  --fs: 18px;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs);
  line-height: 1.55;
  transition: background-color 1.4s ease;
}

#app { position: fixed; inset: 0; overflow: hidden; }

#app::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,11,16,.5), rgba(10,11,16,.92)), url("../assets/images/bg.jpg") center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
body.has-bg #app::before { opacity: .8; }

#app::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.5) 100%);
}

#btn-config {
  position: absolute; top: 5px; right: 10px; z-index: 20;
  background: transparent; border: 1px solid transparent; color: var(--dim);
  font-size: .85rem; line-height: 1; cursor: pointer; padding: 3px 6px; border-radius: 4px;
  opacity: .5; transition: opacity .2s, color .2s;
}
#btn-config:hover, #btn-config:focus-visible { opacity: 1; color: var(--fg); border-color: #333; }

#langs { position: absolute; top: 8px; left: 12px; z-index: 20; display: flex; gap: 10px; }
#langs button { background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 2px; cursor: pointer; opacity: .45; line-height: 0; transition: opacity .2s, border-color .2s; }
#langs button:hover, #langs button:focus-visible { opacity: .9; border-color: #444; }
#langs svg { width: 32px; height: 23px; display: block; border-radius: 2px; }
body.lumina #langs, body.possessed #langs, body.langs-off #langs { pointer-events: none; }
body.langs-off #langs { opacity: 0; visibility: hidden; }
#langs { transition: opacity .25s; }

#stage {
  position: absolute; inset: 0; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 36px);
  padding: 34px clamp(14px, 2.6vw, 36px) clamp(14px, 2.6vw, 36px);
}
@media (max-width: 980px) {
  #stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 44vh); }
}

#narr-panel {
  position: relative; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 clamp(4px, 2vw, 28px) clamp(20px, 11vh, 120px);
  cursor: default;
}
.plabel {
  position: absolute; top: 4px; left: clamp(4px, 2vw, 28px);
  font-size: .66em; letter-spacing: .32em; color: var(--dim); opacity: .7;
}
#narr {
  display: flex; flex-direction: column; gap: .85em;
  width: 100%; max-width: 50ch; margin: 0 auto;
  max-height: 100%; overflow: hidden;
  font-size: 1.2em; line-height: 1.65;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}
.nline { white-space: pre-wrap; word-break: break-word; color: #eceef4; transition: opacity .7s ease; }
#narr:not(.static) .nline:nth-last-child(2) { opacity: .55; }
#narr:not(.static) .nline:nth-last-child(3) { opacity: .34; }
#narr:not(.static) .nline:nth-last-child(4) { opacity: .2; }
#narr:not(.static) .nline:nth-last-child(n+5) { opacity: .1; }
#narr .nline[class*="c-"], #narr .nline span[class^="c-"] { text-shadow: 0 0 14px currentColor; }
#narr.static { max-width: 60ch; }
#narr.credits { gap: .3em; line-height: 1.4; }
#narr:not(.static) .nline.keep { opacity: 1 !important; }
body.paused .timebar i { animation-play-state: paused; }
#idle { white-space: pre-line; line-height: 1.7; position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; text-align: center; background: rgba(0,0,0,.86); color: #3cf0f0; font-size: 1.15em; text-shadow: 0 0 10px rgba(60,240,240,.5); }
#narr.static .nline { opacity: 1; }
.bigkey { font-size: 3.4em; text-align: center; letter-spacing: .1em; margin-bottom: .1em; }
.logo { display: block; width: 104px; height: 104px; margin: 0 0 .8em; }
.ascii { line-height: 1.1; font-size: 1em; }

#term-panel {
  position: relative; min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--neon-rgb),.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(6,14,24,.86), rgba(4,8,16,.9));
  box-shadow:
    0 0 0 1px rgba(255,60,200,.1),
    0 0 26px rgba(var(--neon-rgb),.16),
    inset 0 0 46px rgba(var(--neon-rgb),.06);
  overflow: hidden;
  font-size: .94em;
}
#term-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
  animation: flick 7s infinite;
}
@keyframes flick { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .82; } 98% { opacity: 1; } 99% { opacity: .9; } }

.tbar {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px; font-size: .74em; letter-spacing: .14em; color: #8ff3f3;
  border-bottom: 1px solid rgba(var(--neon-rgb),.28);
  background: linear-gradient(90deg, rgba(var(--neon-rgb),.12), rgba(255,60,200,.08));
}
.tbar .ttl { flex: 1; }
.tbar .stat { color: #3cf07a; }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--neon-rgb),.45); }
.dots i:nth-child(2) { background: rgba(255,60,200,.45); }
.dots i:nth-child(3) { background: rgba(255,200,100,.45); }

#screen {
  flex: 1; min-height: 0; overflow-y: auto; outline: none;
  padding: 14px 16px 22px;
  scrollbar-width: thin; scrollbar-color: rgba(var(--neon-rgb),.3) transparent;
}
#output .hdr { position: sticky; top: -14px; z-index: 2; margin: -14px -16px 6px; padding: 14px 16px 6px; background: linear-gradient(180deg, rgba(6,14,24,.98) 78%, rgba(6,14,24,0)); }
#output {
  text-shadow: -1px 0 rgba(255,60,120,.3), 1px 0 rgba(var(--neon-rgb),.3), 0 0 7px rgba(var(--neon-rgb),.22);
}
#output::after { content: "▌"; color: var(--neon); animation: blink 1.05s steps(2) infinite; }
#output:has(.inputrow:not(.done))::after, #output:has(.menu button:not([disabled]))::after, #output:has(.menu.locked)::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }

body.calm #term-panel::after { animation: none; }
body.calm #output { text-shadow: 0 0 4px rgba(var(--neon-rgb),.2); }
body.calm #output::after { animation: none; }

.line { white-space: pre-wrap; word-break: break-word; min-height: 1.55em; }
.dim { color: var(--dim); }

.c-red { color: #ff6464; }
.c-darkRed { color: #b02020; }
.c-darkerRed { color: #7a1010; }
.c-green { color: #3cf07a; }
.c-lightGreen { color: #90ee90; }
.c-blue { color: #7a8aff; }
.c-lightBlue { color: #87cefa; }
.c-yellow { color: #ffc864; }
.c-lightYellow { color: #ffef7a; }
.c-cyan { color: #3cf0f0; }
.c-orange { color: #ff8c00; }
.c-magenta { color: #ff64ff; }
.c-gray { color: var(--dim); }
.c-cmd { color: #3cf0f0; background: rgba(60,240,240,.16); box-shadow: inset 0 0 0 1px rgba(60,240,240,.3); border-radius: 3px; }

.inputrow { display: flex; gap: .6ch; align-items: baseline; }
.inputrow .ps { color: var(--neon); white-space: pre; flex: none; }
.inputrow input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none; color: #fff;
  font: inherit; text-shadow: inherit; caret-color: var(--neon); padding: 0;
}
.inputrow.done input { color: var(--fg); }
.inputrow.done .ps { color: var(--dim); }

.menu { display: flex; flex-direction: column; gap: .3em; margin: .8em 0; align-items: flex-start; }
.menu button {
  font: inherit; text-shadow: inherit; background: transparent; color: var(--fg);
  border: 0; border-left: 2px solid transparent; padding: .15em .8em; cursor: pointer; text-align: left;
}
.menu button:hover, .menu button:focus-visible { color: #fff; border-left-color: var(--neon); outline: none; background: rgba(var(--neon-rgb),.09); }
.menu button[disabled] { color: #555a68; cursor: default; }
.menu.single button { color: #fff; border-left-color: var(--neon); background: rgba(var(--neon-rgb),.09); }
.menu .n { color: var(--pink); margin-right: 1ch; }
.docbox { margin: .4em 0; white-space: pre-wrap; word-break: break-word; font: inherit; color: var(--fg); user-select: text; }
.docbox.decoding { color: #3cf0f0; text-shadow: 0 0 8px rgba(60,240,240,.55); }
.menu .badge { margin-left: 1.4ch; padding: 0 .55ch; font-size: .62em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #231a00; background: #ffc864; border-radius: 2px; box-shadow: 0 0 8px rgba(255,200,100,.35); vertical-align: .15em; }

.timebar { height: 3px; background: #222; max-width: 28ch; margin: .4em auto 0; overflow: hidden; }
.timebar i { display: block; height: 100%; background: #ffc864; transform-origin: left; animation: shrink var(--t, 600ms) linear forwards; }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

#popup {
  position: absolute; z-index: 30; left: 50%; top: 38%; transform: translateX(-50%);
  width: min(92vw, 62ch);
  background: #f0f0f0; color: #111; border: 1px solid #999;
  box-shadow: 0 8px 40px rgba(0,0,0,.7); border-radius: 4px; overflow: hidden;
}
#popup[hidden] { display: none; }
.popup-title { background: #2b5797; color: #fff; padding: .25em .8em; font-size: .85em; }
.popup-text { padding: 1.1em 1em; word-break: break-all; user-select: none; -webkit-user-select: none; font-weight: 600; }
.popup-bar { height: 4px; background: #ccc; }
.popup-bar i { display: block; height: 100%; background: #2b5797; transform-origin: left; animation: shrink var(--t, 3000ms) linear forwards; }

#fx { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.fakewin {
  position: absolute; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 50px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  transition: left .9s ease, top .9s ease, width .9s ease, height .9s ease, opacity .6s ease;
  font-size: .8rem;
}
.fakewin .tb { background: rgba(0,0,0,.55); color: #ddd; padding: .2em .7em; letter-spacing: .05em; }
.fakewin .bd { flex: 1; }
.shake { animation: shake .5s linear; }
@keyframes shake {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-6px,3px); }
  40% { transform: translate(5px,-4px); } 60% { transform: translate(-4px,-3px); } 80% { transform: translate(6px,4px); }
}
body.calm .shake { animation: none; }
body.calm .fakewin { transition-duration: 1.2s; }

.modal { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-card { width: min(94vw, 460px); background: #11131a; border: 1px solid rgba(var(--neon-rgb),.35); border-radius: 6px; padding: 20px 22px; display: grid; gap: 14px; }
.modal-card h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #fff; }
.modal-card label { display: grid; gap: 6px; font-size: .88rem; color: var(--fg); }
.modal-card label output { color: var(--dim); float: right; }
.modal-card label.check { display: flex; gap: 10px; align-items: center; }
.modal-card select, .modal-card button {
  font: inherit; font-size: .88rem; background: #1a1d26; color: var(--fg); border: 1px solid #3a3f4e; border-radius: 4px; padding: 6px 10px;
}
.modal-card button { cursor: pointer; }
.modal-card button:hover, .modal-card button:focus-visible { border-color: var(--neon); outline: none; }
.modal-card button.ghost { background: transparent; }
.modal-card .hint { margin: 0; font-size: .78rem; color: var(--dim); }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.tcard { container-type: inline-size; position: relative; flex: none; align-self: stretch; width: min(100%, calc(18vh * 16 / 9)); margin: 0; }
.tc-label { display: block; margin: 0 0 .4em .1em; font-size: min(.8rem, 3.3cqw); line-height: 1.35; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--neon); }
.tc-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid rgba(var(--neon-rgb),.45); border-radius: 6px; box-shadow: 0 0 22px rgba(var(--neon-rgb),.2); transition: border-color .2s, box-shadow .2s; }
.tc-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tc-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; background: #000; border: 0; cursor: pointer; font: inherit; text-align: left; }
.tc-poster img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .2s; }
.tc-play { position: absolute; left: 50%; top: 45%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; font-size: 1.4rem; color: #04141a; background: var(--neon); box-shadow: 0 0 24px rgba(var(--neon-rgb),.6); transition: transform .15s; }
.tc-frame:hover { border-color: var(--neon); box-shadow: 0 0 28px rgba(var(--neon-rgb),.4); }
.tc-poster:hover img, .tc-poster:focus-visible img { opacity: 1; }
.tc-poster:hover .tc-play, .tc-poster:focus-visible .tc-play { transform: scale(1.1); }
.tc-poster:focus-visible { outline: 2px solid var(--neon); outline-offset: -2px; }
@media (max-width: 980px) { #narr:has(.tcard) .logo { display: none; } }
/* telas largas: o vídeo fica no topo da coluna, alinhado com a janela do terminal; o logo e o título seguem embaixo, na posição original */
@media (min-width: 981px) {
  #narr:has(.tcard) { -webkit-mask-image: none; mask-image: none; }
  @media (max-height: 700px) { #narr:has(.tcard) .logo { display: none; } }
  .tcard {
    --pad: clamp(4px, 2vw, 28px);
    --n: min(calc(100% - 2 * var(--pad)), 60ch); /* largura do bloco do título (mesma conta do #narr.static) */
    --l: calc(var(--pad) + (100% - 2 * var(--pad) - var(--n)) / 2); /* borda esquerda do título */
    position: absolute; top: 1.45em; left: var(--l); align-self: auto;
    width: min(calc(100% - var(--l)), 1100px, max(260px, calc((100vh - 70px - clamp(20px, 11vh, 120px) - 378px - 1.45em) * 16 / 9)));
  }
}
}
input[type=range] { width: 100%; accent-color: var(--neon); }

@media (prefers-reduced-motion: reduce) {
  .shake { animation: none; }
  #term-panel::after, #output::after { animation: none; }
}

body.lumina { --neon-rgb: 255,60,60; }
body.lumina .tbar .stat { color: #ff6464; }

.denied { font-size: 2.1em; letter-spacing: .04em; text-shadow: 0 0 22px rgba(255,60,60,.6); }

.denied-ok { font-size: 1.9em; text-shadow: 0 0 20px rgba(60,240,122,.45); }

body.possessed, body.possessed * { cursor: none !important; }
body.possessed #stage { pointer-events: none; }
#ghost {
  position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 22px; height: 28px; opacity: 0;
  transition: transform var(--gms, 700ms) cubic-bezier(.55, 0, .25, 1), opacity .2s;
  filter: drop-shadow(0 0 6px rgba(255,60,60,.7));
}
#ghost.on { opacity: 1; }
#ghost .ring {
  position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #ff4040; opacity: 0;
}
#ghost.click .ring { animation: ripple .45s ease-out; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
#btn-config.hot { opacity: 1; color: #ff6464; border-color: #ff6464; }

.glitch { animation: glitch .45s steps(2, end); }
@keyframes glitch {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(-5px); filter: hue-rotate(60deg) saturate(2.2); }
  40% { transform: translateX(6px) skewX(1.5deg); filter: contrast(1.4); }
  60% { transform: translateX(-3px); filter: hue-rotate(-50deg) saturate(2); }
  80% { transform: translateX(3px); filter: invert(.07); }
}
body.calm .glitch { animation: none; }

.qrbox { position: relative; z-index: 4; width: min(220px, 70%); background: #fff; padding: 6px; margin: .5em 0; border-radius: 4px; }
.qrbox svg { display: block; width: 100%; height: auto; }

body { cursor: default; }
#narr-panel, .tbar, .plabel, #langs, #btn-config, #fx, .modal, #popup, #devpanel {
  -webkit-user-select: none; user-select: none;
}