/* ============================================
   MENU.CSS - tela própria (céu opaco) +
   🔤 fonte Minecraft grande
   ============================================ */
#menu {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(50px 18px at 15% 18%, rgba(255,255,255,.95) 98%, transparent),
    radial-gradient(70px 22px at 75% 12%, rgba(255,255,255,.9) 98%, transparent),
    radial-gradient(60px 20px at 55% 32%, rgba(255,255,255,.85) 98%, transparent),
    radial-gradient(80px 24px at 30% 8%, rgba(255,255,255,.9) 98%, transparent),
    radial-gradient(65px 20px at 88% 38%, rgba(255,255,255,.8) 98%, transparent),
    linear-gradient(#6ec2f0, #a8dcf7 55%, #cfeefb);
}
#menu.hidden { display: none; }

.menu-panel {
  width: min(92vw, 420px);
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  padding: 10px 22px 26px;
}

.menu-logo {
  width: min(78vw, 340px);
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 #000);
  margin-bottom: 6px;
}
.menu-logo.hidden { display: none; }

.menu-title {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 4px 4px 0 #000, 0 0 24px rgba(126, 203, 255, .8);
}
.menu-title.hidden { display: none; }

.menu-sub {
  color: #17435c;
  letter-spacing: 3px;
  margin: 8px 0 10px;
  font-size: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5);
}

.menu-screen.hidden { display: none; }

.menu-screen.sheet {
  background: rgba(0, 0, 0, .72);
  border: 3px solid #000;
  border-radius: 12px;
  padding: 16px;
}

.menu-btn {
  width: 100%;
  padding: 18px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  background: #455a64;
  border: 4px solid #000;
  border-radius: 12px;
  box-shadow: 0 7px 0 #000, inset 3px 3px 0 rgba(255,255,255,.28), inset -3px -3px 0 rgba(0,0,0,.4);
  text-shadow: 2px 2px 0 #000;
  font-family: 'Press Start 2P', 'Courier New', monospace;
}
.menu-btn:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #000, inset 3px 3px 0 rgba(255,255,255,.28), inset -3px -3px 0 rgba(0,0,0,.4);
}
.menu-btn.green  { background: #2e7d32; font-size: 17px; padding: 20px; }
.menu-btn.blue   { background: #2b6cb0; }
.menu-btn.gray   { background: #455a64; }
.menu-btn.danger { background: #8a2a2a; }

.menu-btn.back {
  background: #222;
  font-size: 11px;
  padding: 12px;
  margin-top: 14px;
  box-shadow: 0 4px 0 #000, inset 2px 2px 0 rgba(255,255,255,.15), inset -2px -2px 0 rgba(0,0,0,.4);
}
.menu-btn.back:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }

.menu-version {
  margin-top: 22px;
  color: #17435c;
  font-size: 9px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.4);
}

#pick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 4px;
  max-height: 42vh;
  overflow-y: auto;
}
.pick-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #2a2a2a;
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.5);
}
.pick-card.sel {
  border-color: #ffd93b;
  box-shadow: 0 0 12px #ffd93b66, inset 3px 3px 0 rgba(255,255,255,.08), inset -3px -3px 0 rgba(0,0,0,.5);
}
.pick-card.locked { opacity: .75; }
.pick-img {
  width: 56px;
  height: 56px;
  image-rendering: pixelated;
  background: #00000066;
  border: 2px solid #000;
  border-radius: 4px;
  object-fit: contain;
}
.pick-name {
  flex: 1;
  text-align: left;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 1px;
}
.pick-sel { color: #ffd93b; font-weight: bold; font-size: 9px; }