/* Final ARARA navigation and task artwork.
   The source sprite uses 48 px cells and is rendered slightly smaller for a
   clean downscale in Telegram WebView instead of being enlarged. */

:root {
  --arara-icon-sprite: url("/assets/game/runtime/arara-icons-sprite.webp?v=4");
}

/* Bottom navigation ------------------------------------------------------- */
.bottom-nav button {
  position: relative;
  isolation: isolate;
  color: #d7c7df;
}

/* The SVG remains only as a layout spacer. */
.bottom-nav svg {
  width: 40px;
  height: 40px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.bottom-nav button::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 50%;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(233, 194, 255, .16);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #321344 0 42%, #16091f 72%, #09030e 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 3px 8px rgba(0, 0, 0, .65);
  transform: translateX(-50%);
  pointer-events: none;
}

.bottom-nav button::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 50%;
  width: 40px;
  height: 40px;
  background-image: var(--arara-icon-sprite);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  opacity: 1;
  image-rendering: auto;
  backface-visibility: hidden;
  filter: saturate(1.04) contrast(1.03) drop-shadow(0 2px 4px rgba(0, 0, 0, .82));
  transform: translateX(-50%) translateZ(0);
  transform-origin: 50% 50%;
  transition: filter .18s ease, transform .18s ease;
  pointer-events: none;
}

.bottom-nav button[data-nav="tap"]::before { background-position: 0% 0%; }
.bottom-nav button[data-nav="tasks"]::before { background-position: 50% 0%; }
.bottom-nav button[data-nav="leaders"]::before { background-position: 100% 0%; }
.bottom-nav button[data-nav="profile"]::before { background-position: 0% 50%; }

.bottom-nav span {
  position: relative;
  z-index: 2;
  margin-top: 2px;
  color: #cbbbd4;
  opacity: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .96);
}

.bottom-nav button.is-active::after {
  border-color: rgba(255, 219, 113, .5);
  background: radial-gradient(circle at 50% 40%, #48205c 0 42%, #1b0a25 73%, #09030e 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 0 11px rgba(245, 201, 92, .28);
}

.bottom-nav button.is-active::before {
  opacity: 1;
  filter: saturate(1.12) contrast(1.05) brightness(1.06) drop-shadow(0 0 7px rgba(245, 201, 92, .5));
  transform: translateX(-50%) translateZ(0) scale(1.04);
}

.bottom-nav button.is-active span { color: #ffe6a0; }

/* Task platform icons ---------------------------------------------------- */
.task-card__icon {
  position: relative;
  z-index: 2;
  overflow: hidden;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(237, 201, 255, .24);
  border-radius: 50%;
  background-color: #1a0925;
  background-image: var(--arara-icon-sprite);
  background-repeat: no-repeat;
  background-size: 300% 300%;
  background-clip: border-box;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 4px 9px rgba(0, 0, 0, .55);
  color: transparent;
  font-size: 0;
  line-height: 0;
  opacity: 1;
  image-rendering: auto;
  backface-visibility: hidden;
  filter: saturate(1.12) contrast(1.06) brightness(1.05);
  transform: translateZ(0);
}

.task-card__icon::before,
.task-card__icon::after { display: none; }

/* Explicit keys survive task sorting, filtering and the once-per-second rerender. */
.task-card__icon[data-task-icon="telegram"] { background-position: 50% 50%; }
.task-card__icon[data-task-icon="x"] { background-position: 100% 50%; }
.task-card__icon[data-task-icon="tiktok"] { background-position: 0% 100%; }
.task-card__icon[data-task-icon="youtube"] { background-position: 50% 100%; }
.task-card__icon[data-task-icon="instagram"] { background-position: 100% 100%; }

/* Immediate fallback before the annotating script runs. */
.task-card:nth-child(1) .task-card__icon:not([data-task-icon]) { background-position: 50% 50%; }
.task-card:nth-child(2) .task-card__icon:not([data-task-icon]) { background-position: 100% 50%; }
.task-card:nth-child(3) .task-card__icon:not([data-task-icon]) { background-position: 0% 100%; }
.task-card:nth-child(4) .task-card__icon:not([data-task-icon]) { background-position: 50% 100%; }
.task-card:nth-child(5) .task-card__icon:not([data-task-icon]) { background-position: 100% 100%; }

.task-card:has(.task-card__action.is-claimed) .task-card__icon {
  border-color: rgba(91, 204, 140, .36);
  filter: saturate(.9) contrast(1.04) brightness(1.02) drop-shadow(0 0 6px rgba(91, 204, 140, .26));
}

@media (max-width: 390px) {
  .bottom-nav svg,
  .bottom-nav button::before {
    width: 38px;
    height: 38px;
  }

  .bottom-nav button::after {
    top: 2px;
    width: 37px;
    height: 37px;
  }

  .bottom-nav button::before { top: 1px; }
  .bottom-nav span { margin-top: 3px; }

  .task-card__icon {
    width: 42px;
    height: 42px;
  }
}