/* ==========================================================================
   JOGOSRÁPIDOS — dottrack.css
   Jogo de reflexo em canvas (formato retrato). Enquadramento vem do modo stage.
   ========================================================================== */

.dottrack {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: #000; overflow: hidden; border-radius: var(--radius); margin: 0;
}
.dottrack canvas { display: block; width: 100%; height: 100%; background: transparent; box-shadow: none; border-radius: 0; }

.dottrack__ui { position: absolute; top: 0; left: 0; width: 100%; padding: 1.25rem; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; }
.dottrack__grupo { display: flex; flex-direction: column; }
.dottrack__grupo--dir { align-items: flex-end; }
.dottrack__rotulo { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.125rem; color: rgba(255, 255, 255, 0.5); }
.dottrack__valor { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: #00f2ff; text-shadow: 0 0 0.625rem #00f2ff; }
.dottrack__valor--rec { color: #ff0055; text-shadow: 0 0 0.625rem #ff0055; }

.dottrack__tela { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 20; text-align: center; padding: 1.85rem; transition: opacity 0.3s ease; }
.dottrack__tela.hidden { display: none; }
.dottrack__titulo { font-family: var(--font-title); font-size: clamp(2.2rem, 10vw, 3.5rem); margin: 0; letter-spacing: 0.5rem; background: linear-gradient(to bottom, #fff, #00f2ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 0.625rem #00f2ff); }
.dottrack__msg { margin: 1.25rem 0 2.5rem; line-height: 1.6; color: #aaa; }
.dottrack__btn { background: #00f2ff; color: #000; border: none; padding: 1.1rem 3rem; font-family: var(--font-text); font-size: 1.1rem; font-weight: 700; border-radius: 3.125rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.125rem; box-shadow: 0 0 1.25rem rgba(0, 242, 255, 0.4); }
.dottrack__btn:active { transform: scale(0.95); }
.dottrack__dica { position: absolute; bottom: 1.85rem; width: 100%; display: flex; justify-content: space-around; opacity: 0.2; pointer-events: none; font-size: 0.72rem; color: #fff; }