/*!
 * Arrow Escape 3D — game-specific loading shimmer styles.
 * Look only; the engine + base (#tz-game-loader fixed overlay, fade-out,
 * tz-loader-shimmer keyframe) come from kit/tz-game-loader.css. Load this AFTER it.
 */

#tz-game-loader.ae3d-loader {
  background: #eef2fb; /* light default, matches game light theme */
}

.ae3d-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px;
}

.ae3d-loader-board {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
  gap: 9px;
}

.ae3d-loader-tile {
  border-radius: 11px;
  background: linear-gradient(
    100deg,
    rgba(29, 78, 216, 0.07) 30%,
    rgba(29, 78, 216, 0.16) 50%,
    rgba(29, 78, 216, 0.07) 70%
  );
  background-size: 200% 100%;
  animation: tz-loader-shimmer 1.3s linear infinite; /* keyframe from kit css */
}

/* Centre tile = the escaping arrow (brand accent, gentle pulse). */
.ae3d-loader-arrow {
  background: #1d4ed8;
  position: relative;
  animation: ae3d-loader-pulse 1.3s ease-in-out infinite;
}

.ae3d-loader-arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  background: #fff;
  /* right-pointing arrow */
  clip-path: polygon(0 32%, 55% 32%, 55% 12%, 100% 50%, 55% 88%, 55% 68%, 0 68%);
}

@keyframes ae3d-loader-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.4); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 7px rgba(29, 78, 216, 0); }
}

.ae3d-loader-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1e293b;
}

.ae3d-loader-sub {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(30, 41, 59, 0.55);
}

/* Dark — matches tz-game-theme dark (html without data-theme="light"). */
html:not([data-theme="light"]) #tz-game-loader.ae3d-loader {
  background: #0c1322;
}
html:not([data-theme="light"]) .ae3d-loader-tile {
  background-image: linear-gradient(
    100deg,
    rgba(96, 165, 250, 0.08) 30%,
    rgba(96, 165, 250, 0.2) 50%,
    rgba(96, 165, 250, 0.08) 70%
  );
}
html:not([data-theme="light"]) .ae3d-loader-arrow {
  background: #4a86e8;
}
html:not([data-theme="light"]) .ae3d-loader-title {
  color: #e8edf7;
}
html:not([data-theme="light"]) .ae3d-loader-sub {
  color: rgba(232, 237, 247, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .ae3d-loader-tile,
  .ae3d-loader-arrow { animation: none; }
}