/* ═══════════════════════════════════════════════════════
   §2  SKILLS — ARKANOID  ·  skills.css
═══════════════════════════════════════════════════════ */

/* ── Game-specific CSS vars (overridden in responsive.css) ── */
:root {
  --brick-gap: 14px;
  --brick-height: 34px;
  --brick-font-size: clamp(0.92rem, 1.3vw, 1.25rem);
  --brick-letter-spacing: 0.28em;
  --brick-padding-x: 18px;
  --brick-scale: 1;
  --board-height: clamp(520px, 64vw, 760px);
  --paddle-width: 168px;
  --paddle-height: 30px;
  --ball-size: 42px;
}

/* ── Section wrapper ── */
.skills-arkanoid {
  position: relative;
  width: 100%;
  background: transparent;
  /* overflow: visible to allow background circle to overlap next section */
  overflow: visible;
}

.skills-arkanoid__inner {
  position: relative;
  z-index: 1;
  max-width: var(--design-w);
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
}

/* ── Section header ── */
.skills-arkanoid__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: var(--pad) var(--pad) 0;
  margin-bottom: 40px;
  text-align: center;
}

.skills-arkanoid__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(60px, 10vw, 100px);
  font-weight: 420;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-black);
  line-height: 0.85;
}

.skills-arkanoid__description {
  margin: 0 auto;
  max-width: 360px;
  font-family: var(--f-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  color: var(--c-black);
}

/* ── Divider (solid 1px yellow line) ── */
.skills-arkanoid__divider {
  position: relative;
  z-index: 2;
  height: 1px;
  margin: 0 0 18px;
  border: 0;
  background: var(--c-black);
}

/* ── Game board ── */
.skills-arkanoid__board {
  position: relative;
  height: var(--board-height);
  user-select: none;
  touch-action: pan-y;
  /* Custom crosshair cursor: 21×21px SVG, hotspot at center (10 10) */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3E%3Cline x1='10.5' y1='0' x2='10.5' y2='21' stroke='%23141414' stroke-width='1'/%3E%3Cline x1='0' y1='10.5' x2='21' y2='10.5' stroke='%23141414' stroke-width='1'/%3E%3C/svg%3E") 10 10, crosshair;
}

.skills-arkanoid__overlay,
.skills-arkanoid__bricks {
  position: absolute;
  pointer-events: none;
}

.skills-arkanoid__overlay {
  inset: 0;
}

.skills-arkanoid__bricks {
  inset: 10px 0 0;
}

/* ── Brick ── */
.skills-arkanoid__brick {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--brick-height) * var(--brick-scale));
  padding: 0 calc(var(--brick-padding-x) * var(--brick-scale));
  border-radius: 7px;
  border: 1px solid var(--c-grey);
  color: var(--c-grey);
  font-family: var(--f-body);
  font-size: var(--brick-font-size);
  font-weight: 400;
  letter-spacing: calc(var(--brick-letter-spacing) * var(--brick-scale));
  text-transform: uppercase;
  background: var(--c-yellow);
  white-space: nowrap;
  transform-origin: center;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    filter 280ms ease,
    border-color 280ms ease,
    color 280ms ease;
  will-change: transform, opacity;
}

.skills-arkanoid__brick.is-premium {
  border-color: var(--c-black);
  color: var(--c-black);
  /* box-shadow: 0 0 0 1px var(--c-black) inset; */
}

.skills-arkanoid__brick.is-hit-standard {
  opacity: 0;
  transform: scale(0.92);
  filter: blur(2px);
}

.skills-arkanoid__brick.is-hit-premium {
  opacity: 0;
  transform: scale(1.08);
  filter: brightness(1.4) blur(2px);
}

/* ── Particle effects ── */
.skills-arkanoid__spark {
  position: absolute;
  width: 6px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(40, 40, 40, 1), rgba(var(--c-black-rgb), 0.85));
  transform-origin: center top;
  pointer-events: none;
  animation: premium-spark var(--spark-duration, 720ms) cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
  box-shadow: 0 0 12px rgba(var(--c-black-rgb), 0.45);
}

/* ── Ball & paddle ── */
.skills-arkanoid__ball {
  position: absolute;
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  /*border: 1px solid var(--c-grey);*/
  background: var(--dot-color);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.skills-arkanoid__paddle {
  position: absolute;
  width: var(--paddle-width);
  height: var(--paddle-height);
  border-radius: 4px;
  /*border: 1px solid var(--c-grey);*/
  background: var(--dot-color);
  transform: translateX(-50%);
  pointer-events: none;
}

/* ── Bottom solid line ── */
.skills-arkanoid__bottom-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(var(--c-black-rgb), 0.45);
  pointer-events: none;
}

/* ── Hidden measure element (JS uses to compute brick widths) ── */
.skills-arkanoid__measure {
  position: absolute;
  visibility: hidden;
  left: -9999px;
  top: -9999px;
  font-family: var(--f-body);
  font-size: var(--brick-font-size);
  font-weight: 400;
  letter-spacing: calc(var(--brick-letter-spacing) * var(--brick-scale));
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 calc(var(--brick-padding-x) * var(--brick-scale));
  height: calc(var(--brick-height) * var(--brick-scale));
  border: 2px solid transparent;
}

/* ── Victory message ── */
.skills-arkanoid__victory {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-family: var(--f-display);
  font-size: clamp(3.2rem, 8.5vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  animation: victory-pop 0.65s cubic-bezier(0.34, 1.58, 0.64, 1) forwards;
}

.skills-arkanoid__victory.is-exploding {
  animation: victory-explode 0.45s cubic-bezier(0.4, 0, 0.8, 0.2) forwards;
}

/* ── Mega-explosion particles ── */
.skills-arkanoid__mega-spark {
  position: absolute;
  border-radius: 999px;
  transform-origin: center center;
  pointer-events: none;
  animation: mega-spark var(--spark-duration, 950ms) cubic-bezier(0.1, 0.9, 0.22, 1) forwards;
  animation-delay: var(--spark-delay, 0ms);
}


/* ═══════════════════════════════════════════════════════
   KEYFRAMES (Skills / Arkanoid)
═══════════════════════════════════════════════════════ */

@keyframes victory-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.05);
  }

  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }

  75% {
    transform: translate(-50%, -50%) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes victory-explode {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1);
  }

  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.32);
    filter: brightness(3.5);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
    filter: brightness(6) blur(10px);
  }
}

@keyframes mega-flash {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.15);
    filter: blur(0px);
  }

  20% {
    opacity: 1;
    filter: blur(2px);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8);
    filter: blur(22px);
  }
}

@keyframes mega-spark {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--spark-angle, 0deg)) scaleY(1);
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--spark-x, 0px), var(--spark-y, 0px), 0) rotate(calc(var(--spark-angle, 0deg) + 22deg)) scaleY(0.25);
  }
}

@keyframes premium-flash {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.2);
  }

  62% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.1);
  }
}

@keyframes premium-spark {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--spark-angle, 0deg)) scaleY(1);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--spark-x, 0px), var(--spark-y, 48px), 0) rotate(calc(var(--spark-angle, 0deg) + 14deg)) scaleY(0.4);
  }
}