/* ---- ALB Academy Arcade ---- */
.learn-arcade {
  display: grid;
  gap: 0.75rem;
  animation: learnCardIn 0.4s ease both;
}
.learn-arcade[hidden] { display: none !important; }
.learn-arcade-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: space-between;
  align-items: flex-end;
}
.learn-arcade-head h2 {
  margin: 0 0 0.25rem;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--alb-accent-deep);
}
.learn-arcade-head p {
  margin: 0;
  max-width: 36rem;
  color: var(--alb-muted);
  font-size: 0.92rem;
}
.learn-arcade-side {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
}
.learn-arcade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.85rem;
}
.arcade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background:
    url("./images/panel-card.svg") center / cover no-repeat,
    linear-gradient(160deg, #0f172a 0%, #102a43 100%);
  color: #e8f1fb;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.arcade-card:hover { transform: translateY(-2px); }
.arcade-icon {
  width: 2.2rem;
  height: 2.2rem;
}
.arcade-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.arcade-card-body strong {
  font-size: 1rem;
  color: #fff;
}
.arcade-card-body span {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.35;
}
.arcade-card-foot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.arcade-cost {
  font-size: 0.8rem;
  font-weight: 800;
  color: #fde68a;
}
.arcade-play {
  font-size: 0.8rem;
  font-weight: 800;
  color: #7dd3fc;
}
.arcade-collectible {
  font-size: 0.76rem;
  font-weight: 700;
  color: #bae6fd;
}
.arcade-card.is-unlocked {
  border-color: #67e8f9;
  box-shadow: 0 10px 24px rgba(11, 107, 203, 0.28);
}
.arcade-card.is-buy {
  border-color: #fbbf24;
  animation: mapBuyPulse 1.6s ease-in-out infinite;
}
.arcade-card.is-lock {
  opacity: 0.7;
}

/* Arcade cards — vibrant VGA palette */
.arcade-card:nth-child(6n+1),
.arcade-card:nth-child(6n+1) .arcade-card-body strong,
.arcade-card:nth-child(6n+1) .arcade-card-body span,
.arcade-card:nth-child(6n+1) .arcade-cost,
.arcade-card:nth-child(6n+1) .arcade-play,
.arcade-card:nth-child(6n+1) .arcade-collectible { color: #0f172a; }
.arcade-card:nth-child(6n+1) { background: #ff4b4b; border-color: #ef4444; }
.arcade-card:nth-child(6n+2) { background: #1cb0f6; }
.arcade-card:nth-child(6n+3) { background: #1cb0f6; }
.arcade-card:nth-child(6n+4) { background: #ffc800; }
.arcade-card:nth-child(6n+5) { background: #ce82ff; }
.arcade-card:nth-child(6n+6) { background: #ff9600; }
.arcade-card:nth-child(6n+2),
.arcade-card:nth-child(6n+3),
.arcade-card:nth-child(6n+5),
.arcade-card:nth-child(6n+6) { color: #ffffff; }


/* Game overlay — hosts the compiled ALBW runtime in an iframe */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.learn-game-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(5, 5, 17, 0.9);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.learn-game-overlay[hidden] { display: none; }
.learn-game-frame {
  display: flex; flex-direction: column; gap: 0.5rem;
  width: min(100%, 992px);
}
.learn-game-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  color: #e2e8f0;
}
.learn-game-bar h2 { margin: 0; font-size: 1.25rem; color: #ffd75e; }
.learn-game-bar p { margin: 0; font-size: 0.9rem; color: #94a3b8; flex: 1; min-width: 16rem; }
.learn-game-close {
  font: inherit; font-weight: 700;
  background: #ff4b4b; color: #fff;
  border: 2px solid #ef4444; border-radius: 0.5rem;
  padding: 0.4rem 1rem; cursor: pointer;
}
.learn-game-close:focus-visible { outline: 3px solid #7df9ff; outline-offset: 2px; }
#learnGameFrame {
  width: 100%; aspect-ratio: 960 / 600; max-height: 78vh;
  border: 3px solid #22304a; border-radius: 0.75rem;
  background: #050511;
}