/* MEGA-MAN ROLE SELECT — green-CRT stage select. */
#megaRole{
  position: fixed; inset: 0; z-index: 9500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; overflow: hidden;
  /* Ambient era background — dark-green vignette with a soft center glow. */
  background:
    radial-gradient(ellipse 130% 100% at 50% 42%, #0d5228 0%, #083c1d 32%, #05230f 62%, #010a05 100%);
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: #b8ffcf; text-align: center;
  animation: mrIn .18s ease;
}
#megaRole.mr-out{ animation: mrOut .26s ease forwards; }
@keyframes mrIn{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes mrOut{ from{ opacity: 1; } to{ opacity: 0; transform: scale(1.04); } }

/* faint static grid texture (matches the ambient era background) */
.mr-bands{
  position: absolute; inset: 0; z-index: 0; opacity: .12;
  background-image:
    linear-gradient(rgba(46,228,101,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,228,101,.35) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}

.mr-head, .mr-sub, .mr-grid, .mr-foot{ position: relative; z-index: 1; }
.mr-head{
  display: flex; align-items: center; gap: 16px;
  font-size: clamp(20px, 3.4vw, 40px); font-weight: 700; letter-spacing: 5px;
  color: #eafff0; text-shadow: 0 0 12px rgba(46,228,101,.7), 2px 2px 0 #063017;
}
.mr-bar{ width: clamp(40px, 8vw, 120px); height: 6px; background: #b8ffcf;
  box-shadow: 0 8px 0 #2ee465, 0 -8px 0 #2ee465; }
.mr-sub{ color: #2b9e52; letter-spacing: 2px; font-size: 12px; margin: 8px 0 26px; }

.mr-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 640px){ .mr-grid{ grid-template-columns: 1fr; gap: 16px; } }

.mr-tile{
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 10px 10px; cursor: pointer; font: inherit; color: inherit;
  background: transparent; border: none;
  opacity: 0; transform: scale(.3);
  animation: mrPop .32s cubic-bezier(.2,1.4,.4,1) forwards;
}
@keyframes mrPop{ to{ opacity: 1; transform: scale(1); } }

.mr-num{ position: absolute; top: 2px; left: 8px; font-size: 12px; color: #2b9e52; font-weight: 700; }

/* the TV frame — Mega-Man double border */
.mr-tv{
  display: grid; place-items: center;
  width: 120px; height: 120px; padding: 8px;
  background: #02160a;
  border: 4px solid #15903c;
  box-shadow: 0 0 0 4px #041d0f, 0 0 0 7px #2ee465, inset 0 0 18px rgba(46,228,101,.12);
}
.mr-tv canvas{ width: 96px; height: 96px; image-rendering: pixelated; }

.mr-name{
  font-size: 17px; font-weight: 700; letter-spacing: 2px; line-height: 1.05;
  color: #eafff0; text-shadow: 2px 2px 0 #063017;
}
.mr-tag{ font-size: 10px; color: #2b9e52; letter-spacing: 1px; min-height: 24px; }

/* selection cursor: bright frame + blink, like the boss cursor */
.mr-tile.sel .mr-tv{
  border-color: #eafff0;
  box-shadow: 0 0 0 4px #041d0f, 0 0 0 7px #b8ffcf, 0 0 26px rgba(184,255,207,.55);
  animation: mrSel .5s steps(2) infinite;
}
@keyframes mrSel{ 50%{ box-shadow: 0 0 0 4px #041d0f, 0 0 0 7px #2ee465, 0 0 26px rgba(46,228,101,.5); } }
.mr-tile.sel .mr-name{ color: #fff; }

/* the flash when picked */
.mr-tile.picked .mr-tv{ animation: mrFlash .16s steps(1) 3; }
@keyframes mrFlash{ 50%{ background: #eafff0; } }

.mr-foot{ margin-top: 34px; color: #2b6e3e; font-size: 12px; letter-spacing: 1px; }