/*
  1UP Stats styling plugin: GAPT Protocol guard layer.
  Keep protocol visuals here so the board can swap or remove this module cleanly.
*/

.gapt-guard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .92fr) minmax(320px, 1.08fr);
  gap: 12px;
  margin: 0 0 18px;
}

.gapt-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-hero);
  border: 1px solid rgba(255, 224, 102, .20);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 224, 102, .12), transparent 30%),
    radial-gradient(circle at 82% 28%, rgba(0, 212, 255, .16), transparent 32%),
    linear-gradient(180deg, rgba(12, 15, 30, .88), rgba(4, 7, 16, .74));
  padding: 18px;
  box-shadow: 0 22px 80px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.gapt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 224, 102, .12), transparent),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(255, 255, 255, .025) 17px);
  opacity: .42;
  transform: translateX(-80%);
  animation: gaptSweep 5.6s ease-in-out infinite;
}

.gapt-eyebrow {
  position: relative;
  font-size: 10px;
  letter-spacing: 2.6px;
  color: var(--ny);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.gapt-title {
  position: relative;
  font-size: 24px;
  line-height: 1.04;
  font-weight: 950;
  color: var(--text);
  max-width: 420px;
}

.gapt-title span {
  display: block;
  color: var(--nb);
}

.gapt-copy {
  position: relative;
  margin-top: 10px;
  max-width: 560px;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.55;
}

.gapt-matrix {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.gapt-chip {
  min-height: 62px;
  border-radius: var(--radius-ui);
  border: 1px solid rgba(255, 255, 255, .075);
  background: rgba(0, 0, 0, .22);
  padding: 10px 12px;
  backdrop-filter: blur(8px);
}

.gapt-chip small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gapt-chip b {
  display: block;
  color: var(--text);
  font: 900 18px/1 monospace;
}

.gapt-chip.good b { color: var(--ng); }
.gapt-chip.warn b { color: var(--ny); }
.gapt-chip.hot b { color: var(--nr); }
.gapt-chip.blue b { color: var(--nb); }

.gapt-graph {
  position: relative;
  min-height: 284px;
  border-radius: var(--radius-hero);
  border: 1px solid rgba(0, 212, 255, .18);
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 255, 136, .12), transparent 28%),
    linear-gradient(180deg, rgba(7, 12, 28, .86), rgba(2, 5, 12, .78));
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0, 212, 255, .06);
}

.gapt-graph::before {
  content: '';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(0, 212, 255, .08);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(-12deg);
  box-shadow: 0 0 34px rgba(0, 212, 255, .07);
}

.gapt-node {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  background: radial-gradient(circle, rgba(255, 255, 255, .20), rgba(0, 0, 0, .52));
  color: var(--text);
  font: 900 10px/1 monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 0 32px rgba(0, 212, 255, .14);
  animation: gaptFloat 6s ease-in-out infinite;
}

.gapt-node.core {
  left: calc(50% - 46px);
  top: calc(50% - 46px);
  width: 92px;
  height: 92px;
  border-color: rgba(0, 255, 136, .40);
  background: radial-gradient(circle, rgba(0, 255, 136, .62), rgba(0, 212, 255, .24) 45%, rgba(0, 0, 0, .48) 72%);
  color: #03120b;
  box-shadow: 0 0 46px rgba(0, 255, 136, .34);
}

.gapt-node.music { left: 8%; top: 16%; color: var(--nb); animation-delay: .2s; }
.gapt-node.stats { right: 9%; top: 14%; color: var(--ny); animation-delay: .8s; }
.gapt-node.wallet { left: 12%; bottom: 12%; color: var(--np); animation-delay: 1.3s; }
.gapt-node.lock { right: 13%; bottom: 14%; color: var(--nr); animation-delay: 1.7s; }

.gapt-edge {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 255, 136, .0), rgba(0, 212, 255, .70), rgba(255, 224, 102, .0));
  transform-origin: left center;
  filter: drop-shadow(0 0 7px rgba(0, 212, 255, .38));
  animation: gaptPulse 2.8s ease-in-out infinite;
}

.gapt-edge.e1 { transform: rotate(214deg); }
.gapt-edge.e2 { transform: rotate(322deg); animation-delay: .35s; }
.gapt-edge.e3 { transform: rotate(142deg); animation-delay: .7s; }
.gapt-edge.e4 { transform: rotate(38deg); animation-delay: 1.05s; }

.gapt-ledger {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.gapt-ledger-step {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-ui);
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .035);
  padding: 10px 12px;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.gapt-ledger-step b {
  display: block;
  margin-bottom: 5px;
  color: var(--text);
  font-size: 11px;
}

.gapt-ledger-step::after {
  content: '';
  position: absolute;
  left: -20%;
  bottom: 0;
  width: 40%;
  height: 2px;
  background: var(--ng);
  box-shadow: 0 0 12px var(--ng);
  animation: gaptTrace 4s linear infinite;
}

.gapt-ledger-step:nth-child(2)::after { animation-delay: .45s; background: var(--nb); box-shadow: 0 0 12px var(--nb); }
.gapt-ledger-step:nth-child(3)::after { animation-delay: .9s; background: var(--ny); box-shadow: 0 0 12px var(--ny); }
.gapt-ledger-step:nth-child(4)::after { animation-delay: 1.35s; background: var(--nr); box-shadow: 0 0 12px var(--nr); }

@keyframes gaptSweep {
  0%, 26% { transform: translateX(-90%); opacity: .08; }
  48% { opacity: .46; }
  70%, 100% { transform: translateX(90%); opacity: .10; }
}

@keyframes gaptFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.025); }
}

@keyframes gaptPulse {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}

@keyframes gaptTrace {
  to { left: 120%; }
}

@media (max-width: 920px) {
  .gapt-guard,
  .gapt-ledger {
    grid-template-columns: 1fr;
  }

  .gapt-graph {
    min-height: 248px;
  }
}

@media (max-width: 560px) {
  .gapt-matrix {
    grid-template-columns: 1fr;
  }

  .gapt-node {
    width: 62px;
    height: 62px;
    font-size: 9px;
  }

  .gapt-node.core {
    width: 78px;
    height: 78px;
    left: calc(50% - 39px);
    top: calc(50% - 39px);
  }
}