/* TTK Games — camada "fliperama 16 bits" compartilhada pelos overlays (fonte pixel, CRT, barras segmentadas,
 * abertura VS → ROUND → FIGHT!, faíscas). Só transform/opacity nas animações (leve para o OBS).
 * Fonte: "Press Start 2P" (SIL Open Font License 1.1 — ver OFL.txt), servida localmente. */
@font-face {
  font-family: "TTKPixel";
  src: url("press-start-2p-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}
:root { --px: "TTKPixel", "Courier New", monospace; --pink: #ff3d7f; }
canvas.px, img.px, .px-img { image-rendering: pixelated; image-rendering: crisp-edges; }

/* contorno de texto em degraus (pixel) */
.pxo { text-shadow: -3px 0 0 #140b1e, 3px 0 0 #140b1e, 0 -3px 0 #140b1e, 0 3px 0 #140b1e, -3px -3px 0 #140b1e, 3px -3px 0 #140b1e, -3px 3px 0 #140b1e, 3px 3px 0 #140b1e, 0 7px 0 rgba(0,0,0,.45); }
.pxo2 { text-shadow: -2px 0 0 #140b1e, 2px 0 0 #140b1e, 0 -2px 0 #140b1e, 0 2px 0 #140b1e, -2px -2px 0 #140b1e, 2px -2px 0 #140b1e, -2px 2px 0 #140b1e, 2px 2px 0 #140b1e, 0 4px 0 rgba(0,0,0,.4); }

/* ---------- CRT (linhas de varredura + vinheta), liga/desliga por display.crt / ?crt= ---------- */
.ttk-crt { position: fixed; inset: 0; pointer-events: none; z-index: 40; display: none; }
.ttk-crt.on { display: block; }
.ttk-crt::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
}
.ttk-crt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 62%, rgba(0,0,0,.34) 100%);
}

/* ---------- barra segmentada (estilo barra de vida) ---------- */
.ar-seg {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 var(--seg, 18px), rgba(10,6,20,.7) var(--seg, 18px) calc(var(--seg, 18px) + 3px));
}
.ar-shine { position: absolute; left: 0; right: 0; top: 3px; height: 4px; background: rgba(255,255,255,.45); pointer-events: none; }

/* ---------- abertura: VS → ROUND N → FIGHT! ---------- */
.ar-intro { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; pointer-events: none; z-index: 30; overflow: hidden; font-family: var(--px); color: #fff; }
.ar-intro .dim { position: absolute; inset: 0; background: rgba(8,4,20,.55); animation: ar-dim 3.4s steps(6) forwards; }
@keyframes ar-dim { 0% { opacity: 0; } 8% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
.ar-vs { position: absolute; left: 0; right: 0; top: var(--vs-top, 300px); height: 330px; animation: ar-vsout 3.4s forwards; }
@keyframes ar-vsout { 0%, 44% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: scale(1.04); } }
.ar-vs .pn { position: absolute; top: 0; width: 380px; height: 330px; }
.ar-vs .pn.a { left: -20px; animation: ar-in-l .42s steps(7) both; }
.ar-vs .pn.b { right: -20px; animation: ar-in-r .42s steps(7) both; }
@keyframes ar-in-l { from { transform: translateX(-420px); } }
@keyframes ar-in-r { from { transform: translateX(420px); } }
.ar-vs .slab { position: absolute; inset: 22px 0 22px 0; background: var(--c); box-shadow: inset 0 0 0 4px #140b1e, inset 0 0 0 8px rgba(255,255,255,.25); }
.ar-vs .pn.a .slab { clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.ar-vs .pn.b .slab { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.ar-vs canvas { position: absolute; top: 34px; width: 216px; height: 216px; box-shadow: 0 0 0 4px #140b1e, 0 0 0 8px #fff, 0 0 0 12px #140b1e; }
.ar-vs .pn.a canvas { left: 64px; } .ar-vs .pn.b canvas { right: 64px; }
.ar-vs .nm { position: absolute; bottom: 30px; font-size: 22px; white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.ar-vs .pn.a .nm { left: 50px; } .ar-vs .pn.b .nm { right: 50px; text-align: right; }
.ar-vs .vs { position: absolute; left: 50%; top: 110px; width: 160px; margin-left: -80px; text-align: center; font-size: 76px; line-height: 1; color: #ffd23f; animation: ar-vspop .5s .3s steps(5) both; }
@keyframes ar-vspop { from { transform: scale(3); opacity: 0; } to { transform: none; opacity: 1; } }
.ar-word { position: absolute; left: 0; right: 0; top: var(--word-top, 430px); text-align: center; white-space: nowrap; opacity: 0; }
.ar-word.round { font-size: 58px; color: #fff; animation: ar-round 3.4s forwards; }
.ar-word.fight { font-size: 92px; color: #ffd23f; animation: ar-fight 3.4s forwards; }
@keyframes ar-round { 0%, 50% { opacity: 0; transform: scale(2.4); } 56% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; } }
@keyframes ar-fight { 0%, 74% { opacity: 0; transform: scale(.2); } 79% { opacity: 1; transform: scale(1.25); } 83% { transform: scale(1); } 94% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.5); } }
.ar-word .small { display: block; font-size: 20px; margin-top: 14px; color: #ffd23f; }

/* ---------- faísca de impacto (sprite em degraus) ---------- */
.ar-spark {
  position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; z-index: 6;
  background-size: 300% 100%; background-repeat: no-repeat; image-rendering: pixelated;
  animation: ar-spark .3s steps(3) forwards;
}
@keyframes ar-spark { from { background-position: 0 0; } to { background-position: 150% 0; } }
.ar-coin { position: absolute; width: 30px; height: 30px; pointer-events: none; background-size: 100% 100%; image-rendering: pixelated; }

/* ---------- vencedor ---------- */
.ar-perfect { font-family: var(--px); font-size: 40px; color: #ff3d7f; letter-spacing: 2px; animation: ar-blink .5s steps(2) infinite; }
@keyframes ar-blink { 50% { color: #ffd23f; } }

@media (prefers-reduced-motion: reduce) { .ar-intro * { animation-duration: .01s !important; } }